/* =====================================================================
   Momento Engenharia — styles.css  (design system da marca real)
   Vinho #821A39 · Carvão #14181B · Branco · Montserrat + Open Sans
   ===================================================================== */
:root{
  --ink:#14181B; --ink-2:#20262B;
  --wine:#821A39; --wine-deep:#5E1229;
  --bg:#FFFFFF; --bg-alt:#F5F3F1;
  --line:#E7E3DF; --muted:#6B7078;
  --radius:14px; --radius-btn:10px; --wrap:1200px;
  --font-display:"Montserrat",-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-body:"Open Sans",-apple-system,"Segoe UI",Roboto,sans-serif;
  --shadow:0 10px 30px rgba(20,24,27,.08);
  --shadow-lg:0 24px 60px rgba(20,24,27,.16);
  --header-h:84px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);color:var(--ink);background:var(--bg);
  line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.14;letter-spacing:-.01em;font-weight:700}
p{color:var(--muted)}
.container{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ---------- utils ---------- */
.overline{
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.2em;
  font-size:.74rem;font-weight:700;color:var(--wine);display:inline-flex;align-items:center;gap:12px;margin-bottom:20px;
}
.overline::before{content:"";width:26px;height:2px;background:var(--wine);display:inline-block}
.overline.light{color:#e7b7c5}
.overline.light::before{background:#e7b7c5}
.sec{padding:clamp(72px,10vw,120px) 0}
.sec-alt{background:var(--bg-alt)}
.sec-dark{background:var(--ink);color:#fff}
.sec-dark p{color:#aab2ba}
.sec-title{font-size:clamp(1.7rem,3.6vw,2.6rem);color:var(--ink);max-width:20ch;margin-bottom:22px}
.sec-dark .sec-title{color:#fff}
.sec-title.center{margin-left:auto;margin-right:auto;text-align:center;max-width:24ch}
.lead{font-size:1.08rem;max-width:64ch}
.sec-head{max-width:760px}
.sec-head.center{margin:0 auto;text-align:center}
.sec-head.center .overline{justify-content:center}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);
  font-weight:600;font-size:.98rem;letter-spacing:.01em;cursor:pointer;border:0;
  padding:16px 30px;border-radius:var(--radius-btn);transition:.25s ease;
  background:var(--wine);color:#fff;
}
.btn:hover{background:var(--wine-deep);transform:translateY(-2px);box-shadow:0 12px 28px rgba(130,26,57,.28)}
.btn svg{width:18px;height:18px}
.btn-lg{padding:19px 40px;font-size:1.05rem}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff;box-shadow:none}
.btn-dark{background:var(--ink)}
.btn-dark:hover{background:#000}

/* ---------- header ---------- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:60;background:transparent;
  transition:transform .4s ease;
}
/* leve scrim no topo para legibilidade quando transparente sobre o hero */
.header::before{content:"";position:absolute;inset:0;bottom:auto;height:170%;pointer-events:none;z-index:0;
  background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,0));opacity:1;transition:opacity .5s ease}
.header.scrolled::before{opacity:0}
/* fundo sólido em CORTINA: animação automática (transição própria) ao sair do hero */
.header::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:rgba(20,24,27,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transform:translateY(-100%);transition:transform .6s cubic-bezier(.22,1,.36,1)}
.header.scrolled::after{transform:translateY(0)}
.header.hide{transform:translateY(-100%)}
.header-in{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.brand{display:flex;align-items:center}
.brand img{height:38px;width:auto}
.nav{display:flex;align-items:center;gap:34px}
.nav a{font-family:var(--font-display);font-size:.94rem;font-weight:500;color:#e7e9ec;position:relative;padding:4px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--wine);transition:width .28s ease}
.nav a:hover::after,.nav a.active::after{width:100%}
.nav .btn{color:#fff;padding:11px 22px;font-size:.9rem;border-radius:8px}
.nav .btn::after{display:none}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;z-index:70}
.burger span{width:26px;height:2px;background:#fff;transition:.3s}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;color:#fff;overflow:hidden;background:#000}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.6s ease}
.hero-bg img.active{opacity:1}
.hero-bg::after{content:"";position:absolute;inset:0;z-index:3;
  background:linear-gradient(100deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.78) 42%,rgba(0,0,0,.45) 100%);}
.hero-in{position:relative;z-index:2;padding:calc(var(--header-h) + 40px) 0 80px;max-width:760px}
.hero h1{font-size:clamp(2.1rem,5.4vw,3.6rem);color:#fff;margin-bottom:24px;letter-spacing:-.02em}
.hero .sub{font-size:clamp(1.05rem,1.7vw,1.28rem);color:#d7dce1;max-width:40ch;margin-bottom:36px}
.hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.hero-micro{margin-top:22px;font-size:.92rem;color:#aeb6bd;display:flex;align-items:center;gap:10px}
.hero-micro svg{width:16px;height:16px;color:var(--wine);flex:0 0 auto}
/* split-line reveal */
.hl{display:block;overflow:hidden}
.hl>span{display:block;transform:translateY(110%);transition:transform .9s cubic-bezier(.16,1,.3,1)}
.reveal-hero .hl>span{transform:translateY(0)}
.hl:nth-child(2)>span{transition-delay:.09s}
.hl:nth-child(3)>span{transition-delay:.18s}
/* sublinhado animado que "desenha" nas palavras-chave ao entrar */
.uline{
  background-image:linear-gradient(var(--wine),var(--wine));
  background-repeat:no-repeat;background-position:0 92%;
  background-size:0% .085em;transition:background-size 1s cubic-bezier(.16,1,.3,1);
  padding-bottom:.04em;
}
.reveal-hero .uline{background-size:100% .085em}
/* dispara o sublinhado quando a seção entra na viewport */
.rv.in .uline{background-size:100% .085em}
.rv .uline{transition-delay:.25s}
.uline.d1{transition-delay:.55s}
.uline.d2{transition-delay:.85s}

/* ---------- marquee ---------- */
.marquee{background:var(--wine);color:#fff;overflow:hidden;padding:16px 0;white-space:nowrap}
.marquee-track{display:inline-flex;gap:0;animation:marq 32s linear infinite;will-change:transform}
.marquee span{font-family:var(--font-display);font-weight:600;font-size:.98rem;letter-spacing:.08em;text-transform:uppercase;padding:0 34px;display:inline-flex;align-items:center;gap:34px}
.marquee span::after{content:"◆";font-size:.6rem;opacity:.7}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- identificação / prose split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split .prose p{margin-bottom:18px;font-size:1.06rem}
.split .prose p:last-child{margin-bottom:0}
.media{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)}
.media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.media.tall img{aspect-ratio:3/4}
/* par dinâmico de imagens (identificação) */
.media-duo{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.media-duo figure{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);margin:0}
.media-duo figure:nth-child(2){margin-top:54px}
/* dá mais peso à coluna das imagens nesta seção (desktop) */
@media (min-width:901px){ .split:has(.media-duo){grid-template-columns:.82fr 1.18fr} }
.media-duo img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;
  transform:translateY(var(--py,0)) scale(1.12);transition:transform .7s cubic-bezier(.16,1,.3,1);will-change:transform}
.media-duo figure:hover img{transform:translateY(var(--py,0)) scale(1.18)}
@media (max-width:560px){.media-duo figure:nth-child(2){margin-top:28px}}

/* ---------- orçamento (dark feature) ---------- */
.budget-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
/* imagem à esquerda, textos à direita (desktop) */
@media (min-width:901px){
  .budget-grid{grid-template-columns:.95fr 1.05fr}
  .budget-media{order:-1}
}
.budget-list{list-style:none;margin-top:30px;display:grid;gap:2px;border-top:1px solid rgba(255,255,255,.12)}
.budget-list li{display:flex;align-items:center;gap:16px;padding:16px 4px;border-bottom:1px solid rgba(255,255,255,.12);font-family:var(--font-display);font-weight:500;color:#eef1f3;font-size:1.02rem}
.budget-list li .n{color:var(--wine);font-weight:700;font-size:.85rem;min-width:30px;letter-spacing:.06em}
.budget-note{margin-top:26px;font-size:.98rem;color:#aab2ba}
.budget-media{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)}
.budget-media img{aspect-ratio:3/4;object-fit:cover;width:100%}
/* inset sobreposto (2ª imagem) dentro do budget-media */
.budget-media{position:relative}
.bm-inset{position:absolute;right:-30px;bottom:-30px;width:58%;margin:0;z-index:2;
  border-radius:12px;overflow:hidden;border:6px solid var(--ink);box-shadow:var(--shadow-lg)}
.bm-inset img{aspect-ratio:4/3;transform:translateY(var(--py,0)) scale(1.12);transition:transform .7s cubic-bezier(.16,1,.3,1);will-change:transform}
.bm-inset:hover img{transform:translateY(var(--py,0)) scale(1.18)}
@media (max-width:700px){
  .bm-inset{position:static;width:100%;right:auto;bottom:auto;margin-top:14px;border:0;border-radius:var(--radius)}
}

/* ---------- diferenciais (numbered) ---------- */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:20px}
.dif{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:32px 26px;transition:.3s}
.sec-alt .dif{background:#fff}
.dif:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.dif .num{font-family:var(--font-display);font-weight:700;font-size:1.6rem;color:var(--wine);display:block;margin-bottom:16px;letter-spacing:.02em}
.dif p{color:var(--ink);font-weight:600;font-family:var(--font-display);font-size:1.06rem;line-height:1.4}

/* ---------- timeline vertical CENTRAL (diferenciais, scroll-driven) ---------- */
.timeline{position:relative;max-width:940px;margin:40px auto 0}
.timeline-rail,.timeline-fill{position:absolute;left:50%;transform:translateX(-50%);top:14px;bottom:14px;width:2px;border-radius:2px}
.timeline-rail{background:var(--line)}
.timeline-fill{background:var(--wine);bottom:auto;height:0}
.tl-item{position:relative;display:grid;grid-template-columns:1fr 56px 1fr;align-items:center;column-gap:30px;padding:16px 0;
  opacity:0;transition:opacity .7s ease,transform .7s cubic-bezier(.16,1,.3,1)}
.tl-left{transform:translateX(-34px)}
.tl-right{transform:translateX(34px)}
.tl-item.in{opacity:1;transform:none}
.tl-node{grid-column:2;justify-self:center;position:relative;z-index:2;width:56px;height:56px;border-radius:50%;
  background:#fff;border:2px solid var(--line);color:var(--muted);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:.02em;transition:.45s ease}
.sec-alt .tl-node{background:#fff}
.tl-item.active .tl-node{background:var(--wine);border-color:var(--wine);color:#fff;box-shadow:0 0 0 7px rgba(130,26,57,.12)}
.tl-balloon{position:relative;background:#fff;border-radius:16px;padding:22px 26px;box-shadow:var(--shadow)}
.tl-left .tl-balloon{grid-column:1;text-align:right}
.tl-right .tl-balloon{grid-column:3;text-align:left}
.tl-balloon h3{font-family:var(--font-display);font-weight:600;font-size:1.08rem;color:var(--ink);line-height:1.45}
/* bico do balão apontando para a linha */
.tl-balloon::after{content:"";position:absolute;top:50%;transform:translateY(-50%);
  border-top:10px solid transparent;border-bottom:10px solid transparent}
.tl-left .tl-balloon::after{right:-9px;border-left:10px solid #fff}
.tl-right .tl-balloon::after{left:-9px;border-right:10px solid #fff}
@media (max-width:700px){
  .timeline{margin-top:24px}
  .timeline-rail,.timeline-fill{left:22px;transform:none}
  .tl-item{grid-template-columns:46px 1fr;column-gap:18px}
  .tl-left,.tl-right{transform:translateY(22px)}
  .tl-node{grid-column:1;width:46px;height:46px;font-size:.95rem}
  .tl-left .tl-balloon,.tl-right .tl-balloon{grid-column:2;text-align:left}
  .tl-left .tl-balloon::after,.tl-right .tl-balloon::after{left:-9px;right:auto;border-left:0;border-right:10px solid #fff}
  .tl-balloon h3{font-size:1.02rem}
}

/* ---------- seção com foto de fundo + timeline em vidro (glass) ---------- */
.sec-photo{position:relative;background-size:cover;background-position:center;color:#fff;overflow:hidden}
.sec-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(15,18,20,.80),rgba(15,18,20,.86))}
.sec-photo>.container{position:relative;z-index:1}
.sec-photo .overline{color:#e7b7c5}
.sec-photo .overline::before{background:#e7b7c5}
.sec-photo .sec-title{color:#fff}
.sec-photo .cta-note{color:#c7cdd3}
/* glass na timeline */
.sec-photo .timeline-rail{background:rgba(255,255,255,.22)}
.sec-photo .tl-node{background:rgba(255,255,255,.10);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border-color:rgba(255,255,255,.45);color:#fff}
.sec-photo .tl-item.active .tl-node{background:var(--wine);border-color:var(--wine);color:#fff;box-shadow:0 0 0 7px rgba(130,26,57,.25)}
.sec-photo .tl-balloon{background:rgba(255,255,255,.10);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border:1px solid rgba(255,255,255,.20);box-shadow:0 14px 40px rgba(0,0,0,.28)}
.sec-photo .tl-balloon h3{color:#fff}
/* conector fino no lugar do bico sólido */
.sec-photo .tl-balloon::after{border:0;width:30px;height:1px;background:rgba(255,255,255,.32);top:50%}
.sec-photo .tl-left .tl-balloon::after{right:-30px;left:auto}
.sec-photo .tl-right .tl-balloon::after{left:-30px;right:auto}
@media (max-width:700px){
  .sec-photo .tl-balloon::after,.sec-photo .tl-left .tl-balloon::after,.sec-photo .tl-right .tl-balloon::after{left:-18px;right:auto;width:18px}
}

/* ---------- cards atuação ---------- */
.grid-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:20px}
.grid-cards.cols-3{grid-template-columns:repeat(3,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 26px;border-top:3px solid var(--wine);transition:.3s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card h3{font-size:1.14rem;color:var(--ink);margin-bottom:12px}
.card p{font-size:.98rem}

/* ---------- "Como podemos atuar" — lista editorial ---------- */
.atuar{margin-top:26px;border-top:1px solid var(--line)}
.atuar-row{display:grid;grid-template-columns:104px 1fr auto;gap:32px;align-items:start;
  padding:34px 10px;border-bottom:1px solid var(--line);
  transition:padding .4s cubic-bezier(.16,1,.3,1),background .4s ease}
.atuar-row .idx{font-family:var(--font-display);font-weight:700;font-size:2.7rem;line-height:.9;
  color:transparent;-webkit-text-stroke:1.5px var(--line);transition:.4s ease}
.atuar-row .txt h3{font-family:var(--font-display);font-weight:600;font-size:1.3rem;color:var(--ink);margin-bottom:8px;transition:color .3s ease}
.atuar-row .txt p{font-size:1rem;max-width:62ch}
.atuar-row .go{opacity:0;transform:translateX(-8px);transition:.4s ease;color:var(--wine);align-self:center}
.atuar-row .go svg{width:22px;height:22px}
.atuar-row:hover{background:var(--bg-alt);padding-left:26px;padding-right:26px;border-radius:14px;border-bottom-color:transparent}
.atuar-row:hover .idx{-webkit-text-stroke-color:var(--wine);color:var(--wine)}
.atuar-row:hover .txt h3{color:var(--wine)}
.atuar-row:hover .go{opacity:1;transform:none}
@media (max-width:640px){
  .atuar-row{grid-template-columns:1fr;gap:6px;padding:26px 8px}
  .atuar-row .idx{font-size:2.1rem}
  .atuar-row .go{display:none}
  .atuar-row:hover{padding-left:14px;padding-right:14px}
}

/* ---------- ambientes / chips ---------- */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:14px;margin-top:12px}
.chips li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:15px 26px;font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:1rem;transition:.25s}
.chips li:hover{border-color:var(--wine);color:var(--wine);transform:translateY(-2px)}
.sec-alt .chips li{box-shadow:0 1px 2px rgba(20,24,27,.04)}

/* ---------- ambientes atendidos — tiles com ícone ---------- */
.amb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.amb{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px 26px;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.sec-alt .amb{background:#fff}
.amb:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.amb .ic{flex:0 0 auto;width:54px;height:54px;border-radius:13px;background:rgba(130,26,57,.08);color:var(--wine);display:flex;align-items:center;justify-content:center;transition:.35s ease}
.amb:hover .ic{background:var(--wine);color:#fff;transform:rotate(-4deg)}
.amb .ic svg{width:26px;height:26px}
.amb h3{font-family:var(--font-display);font-weight:600;font-size:1.04rem;color:var(--ink);line-height:1.35}
@media (max-width:900px){.amb-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.amb-grid{grid-template-columns:1fr}}

/* expertise checklist (LP2) */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px}
.check{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px}
.sec-alt .check{background:#fff}
.check .ic{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:rgba(130,26,57,.1);color:var(--wine);display:flex;align-items:center;justify-content:center;margin-top:2px}
.check .ic svg{width:18px;height:18px}
.check p{color:var(--ink);font-weight:500;font-size:1.02rem;line-height:1.5}

/* ---------- comparativa ---------- */
.compare{margin-top:12px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.compare-row{display:grid;grid-template-columns:1fr 1fr}
.compare-row+.compare-row{border-top:1px solid var(--line)}
.compare-head{background:var(--ink);color:#fff}
.compare-head .cell{font-family:var(--font-display);font-weight:700;font-size:1.02rem;padding:20px 26px}
.compare-head .cell.good{background:var(--wine)}
.cell{padding:20px 26px;font-size:1rem}
.cell.bad{color:#7a7a7a}
.cell.good{background:rgba(130,26,57,.05);color:var(--ink);font-weight:600;border-left:3px solid var(--wine)}
.cell.bad{display:flex;gap:12px;align-items:flex-start}
.cell.good{display:flex;gap:12px;align-items:flex-start}
.cell .mk{flex:0 0 auto;font-weight:700;margin-top:1px}
.cell.bad .mk{color:#b9b0b0}
.cell.good .mk{color:var(--wine)}
.compare-label{display:none;font-family:var(--font-display);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px}

/* ---------- comparativa — dois painéis contrastantes ---------- */
.versus{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px;align-items:center}
.vpanel{border-radius:18px;padding:34px 32px;position:relative;overflow:hidden}
.vpanel-market{background:#fff;border:1px solid var(--line)}
.vpanel-momento{background:var(--ink);color:#fff;box-shadow:var(--shadow-lg);padding:66px 40px}
.vlabel{display:inline-block;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:.74rem;margin-bottom:26px;padding:8px 16px;border-radius:999px}
.vpanel-market .vlabel{color:var(--muted);background:var(--bg-alt)}
.vpanel-momento .vlabel{color:#fff;background:var(--wine)}
.vlist{list-style:none;display:grid;gap:20px;position:relative;z-index:1}
.vlist li{display:flex;gap:15px;align-items:flex-start;font-size:1.05rem;line-height:1.45}
.vpanel-market .vlist li{color:var(--muted)}
.vpanel-momento .vlist li{color:#eef1f3;font-weight:500}
.vlist .mk{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;margin-top:1px}
.vpanel-market .vlist .mk{background:rgba(20,24,27,.06);color:#a2a9b0}
.vpanel-momento .vlist .mk{background:var(--wine);color:#fff}
@media (max-width:760px){
  .versus{grid-template-columns:1fr;gap:16px}
  .vpanel{padding:30px 26px}
}

/* ---------- portfólio ---------- */
.port-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:20px}
.port-card{position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;background:var(--ink);aspect-ratio:4/3;box-shadow:var(--shadow)}
.port-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.port-card:hover img{transform:scale(1.08)}
.port-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,18,20,.9) 0%,rgba(15,18,20,.15) 55%,rgba(15,18,20,.05) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:26px;color:#fff}
.port-ov .city{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:700;color:#e7b7c5;margin-bottom:8px}
.port-ov h3{font-size:1.24rem;color:#fff;margin-bottom:6px}
.port-ov .count{font-size:.86rem;color:#c6ccd2;display:flex;align-items:center;gap:8px}
.port-zoom{position:absolute;top:20px;right:20px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.16);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.85);transition:.3s}
.port-card:hover .port-zoom{opacity:1;transform:scale(1)}
.port-zoom svg{width:20px;height:20px;color:#fff}

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(10,12,13,.96);display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
.lb.open{display:flex;opacity:1}
.lb img{max-width:90vw;max-height:80vh;object-fit:contain;border-radius:6px;box-shadow:var(--shadow-lg)}
.lb-close{position:absolute;top:22px;right:26px;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.12);border:0;color:#fff;font-size:1.6rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.25s}
.lb-close:hover{background:var(--wine)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.12);border:0;color:#fff;font-size:1.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.25s}
.lb-nav:hover{background:var(--wine)}
.lb-prev{left:22px}.lb-next{right:22px}
.lb-count{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:#fff;font-family:var(--font-display);font-size:.9rem;letter-spacing:.1em;background:rgba(255,255,255,.1);padding:8px 18px;border-radius:999px}

/* ---------- CASES (showcase de obras) ---------- */
.cases-wrap{display:grid;gap:clamp(56px,8vw,104px);margin-top:56px}
.case{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(36px,5vw,64px);align-items:center}
.case:nth-child(even) .case-media{order:2}
.case-media{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg);cursor:pointer;background:var(--ink)}
.case-cover{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;
  transform:translateY(var(--py,0)) scale(1.14);transition:transform .7s cubic-bezier(.16,1,.3,1);will-change:transform}
.case-media:hover .case-cover{transform:translateY(var(--py,0)) scale(1.2)}
.case-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(15,18,20,.55),rgba(15,18,20,0) 45%);pointer-events:none}
.case-badge{display:none;position:absolute;left:22px;top:18px;z-index:2;display:flex;align-items:center;gap:10px}
.case-badge img{height:22px;opacity:.95}
.case-zoom{position:absolute;right:20px;top:20px;z-index:2;width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.85);transition:.3s}
.case-media:hover .case-zoom{opacity:1;transform:scale(1)}
.case-zoom svg{width:22px;height:22px;color:#fff}
.case-thumbs{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;gap:10px;padding:16px}
.case-thumbs .t{width:64px;height:48px;border-radius:8px;overflow:hidden;border:2px solid rgba(255,255,255,.6);flex:0 0 auto}
.case-thumbs .t img{width:100%;height:100%;object-fit:cover}
.case-thumbs .more{display:flex;align-items:center;justify-content:center;width:64px;height:48px;border-radius:8px;
  background:rgba(20,24,27,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;
  font-family:var(--font-display);font-weight:700;font-size:.82rem;border:1px solid rgba(255,255,255,.25)}
.case-body{position:relative}
.case-num{display:none}
.case-body .overline{position:relative;z-index:1}
.case-title{position:relative;z-index:1;font-size:clamp(1.5rem,3vw,2.1rem);color:var(--ink);margin-bottom:16px}
.case-body p{position:relative;z-index:1;font-size:1.05rem;margin-bottom:22px;max-width:52ch}
.case-tags{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px;position:relative;z-index:1}
.case-tags li{font-family:var(--font-display);font-weight:600;font-size:.8rem;letter-spacing:.02em;color:var(--wine);
  background:rgba(130,26,57,.08);border-radius:999px;padding:8px 16px}
.case-cta{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;color:var(--ink);
  cursor:pointer;position:relative;z-index:1;transition:.25s;background:none;border:0;font-size:1rem;padding:0}
.case-cta svg{width:20px;height:20px;color:var(--wine);transition:transform .25s}
.case-cta:hover{color:var(--wine)}
.case-cta:hover svg{transform:translateX(5px)}
@media (max-width:840px){
  .case{grid-template-columns:1fr;gap:26px}
  .case:nth-child(even) .case-media{order:0}
  .case-num{position:static;font-size:3rem;margin-bottom:6px;-webkit-text-stroke-color:var(--wine);color:transparent}
  .case:nth-child(even) .case-num{left:auto}
}
@media (max-width:560px){
  .case-thumbs .t:nth-child(n+3){display:none}
}

/* ---------- sobre ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.about p+.btn{margin-top:30px}
.creds{list-style:none;display:grid;gap:14px;margin:26px 0 32px}
.creds li{display:flex;gap:14px;align-items:flex-start;font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:1.02rem}
.creds li svg{width:20px;height:20px;color:var(--wine);flex:0 0 auto;margin-top:3px}
/* imagem do Sobre + cards de vidro flutuantes (parallax) */
.about-visual{position:relative}
.about-visual .media img{aspect-ratio:4/5}
.float-card{position:absolute;z-index:2;display:flex;gap:12px;align-items:center;
  background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.6);border-radius:14px;padding:14px 18px;
  box-shadow:0 18px 40px rgba(20,24,27,.22);color:var(--ink);
  font-family:var(--font-display);font-weight:600;font-size:.9rem;line-height:1.3;max-width:224px;will-change:transform;transition:box-shadow .3s ease}
.float-card .fi{flex:0 0 auto;width:24px;height:24px;color:var(--wine)}
.float-card .fi svg{width:24px;height:24px}
.fc1{top:5%;left:-8%}
.fc2{top:45%;right:-9%}
.fc3{bottom:6%;left:2%}
@media (max-width:900px){.fc1{left:-2%}.fc2{right:-2%}.fc3{left:2%}}
@media (max-width:600px){
  .about-visual .media img{aspect-ratio:4/3}
  .float-card{position:static;transform:none!important;max-width:none;margin-top:12px;
    background:#fff;border-color:var(--line);box-shadow:var(--shadow);-webkit-backdrop-filter:none;backdrop-filter:none}
}

.stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:30px;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
.stat{padding:26px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.stat+.stat{border-left:1px solid var(--line)}
.stat .ic{width:42px;height:42px;border-radius:11px;background:rgba(130,26,57,.08);color:var(--wine);display:flex;align-items:center;justify-content:center}
.stat .ic svg{width:22px;height:22px}
.stat .big{font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--ink);line-height:1.1}
.stat .lbl{font-size:.9rem;color:var(--muted);line-height:1.35}
@media (max-width:560px){
  .stats{grid-template-columns:1fr}
  .stat{flex-direction:row;justify-content:flex-start;text-align:left;gap:16px;padding:20px 22px}
  .stat+.stat{border-left:0;border-top:1px solid var(--line)}
  .stat .tx{display:flex;flex-direction:column}
}

/* ---------- prova social (logos) ---------- */
.logos{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:12px}
.logo-ph{width:170px;height:88px;border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;color:var(--ink);letter-spacing:.02em}
.logo-ph.empty{color:#b4bcc4;font-weight:500;font-style:italic;font-size:.85rem;border-style:dashed}
.logos-note{text-align:center;color:var(--muted);font-size:1.05rem;max-width:60ch;margin:22px auto 0}

/* ---------- FAQ ---------- */
.faq{max-width:none;margin:12px auto 0}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;background:none;border:0;text-align:left;cursor:pointer;padding:26px 48px 26px 0;position:relative;font-family:var(--font-display);font-weight:600;font-size:1.08rem;color:var(--ink);line-height:1.4}
.faq-q::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:1.6rem;color:var(--wine);transition:transform .3s;font-weight:400}
.faq-item.open .faq-q::after{transform:translateY(-50%) rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease,opacity .3s;opacity:0}
.faq-item.open .faq-a{opacity:1}
.faq-a p{padding:0 0 26px;font-size:1.02rem}

/* ---------- CTA final: como funciona (3 passos) ---------- */
.cta-final{background:var(--ink);color:#fff}
.cta-final .sec-title{color:#fff}
.cta-final .sec-head p{color:#c7cdd3}
/* layout 2 colunas: texto à esquerda, caixa (form) à direita */
.cta-final-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:center}
.cta-final-left .sec-title{max-width:16ch;margin-bottom:20px}
.cta-final-left p{color:#c7cdd3;max-width:46ch;font-size:1.06rem}
.cta-card{background:var(--ink-2);border:1px solid rgba(255,255,255,.1);border-radius:20px;
  padding:clamp(28px,4vw,44px);box-shadow:var(--shadow-lg)}
.cta-card .steps{max-width:none;margin:0 0 28px;padding-left:6px}
.cta-card .steps::before{display:none}
.cta-card .btn{width:100%;justify-content:center}
@media (max-width:860px){
  .cta-final-grid{grid-template-columns:1fr;gap:36px}
  .cta-final-left .sec-title{max-width:none}
}
.steps{position:relative;max-width:720px;margin:44px auto 40px;padding-left:8px}
.steps::before{content:"";position:absolute;left:25px;top:8px;bottom:8px;width:2px;background:rgba(255,255,255,.16);transform:scaleY(0);transform-origin:top;transition:transform 1.1s ease}
.steps.in::before{transform:scaleY(1)}
.step{display:flex;gap:24px;align-items:flex-start;padding:16px 0;opacity:0;transform:translateY(16px);transition:.6s ease}
.steps.in .step{opacity:1;transform:none}
.steps.in .step:nth-child(2){transition-delay:.2s}
.steps.in .step:nth-child(3){transition-delay:.4s}
.steps.in .step:nth-child(4){transition-delay:.6s}
.step .dot{flex:0 0 auto;width:52px;height:52px;border-radius:50%;background:var(--wine);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:1.2rem;z-index:2}
.step .txt h3{font-size:1.14rem;color:#fff;margin-bottom:6px}
.step .txt p{color:#aab2ba;font-size:1rem}
.cta-final .cta-btn-wrap{text-align:center;margin-top:14px}

/* ---------- footer ---------- */
.footer{background:#0d1012;color:#aab2ba;padding:70px 0 30px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;margin-bottom:48px}
.footer img.flogo{height:44px;margin-bottom:20px}
.footer p{font-size:.96rem;color:#8b939b;max-width:38ch}
.footer h4{font-family:var(--font-display);color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;margin-bottom:20px}
.footer ul{list-style:none;display:grid;gap:12px}
.footer ul a{font-size:.96rem;color:#aab2ba;transition:.2s}
.footer ul a:hover{color:#fff}
.footer-contact a{display:flex;gap:10px;align-items:center}
.footer-contact svg{width:16px;height:16px;color:var(--wine)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:26px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.86rem;color:#6f777e}
.footer-bottom a{color:#8b939b}.footer-bottom a:hover{color:#fff}

/* ---------- cookie banner ---------- */
.cookie{position:fixed;left:20px;right:20px;bottom:20px;z-index:80;max-width:520px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:24px;display:none}
.cookie.show{display:block}
.cookie p{font-size:.92rem;color:var(--ink)}
.cookie p a{color:var(--wine);text-decoration:underline}
.cookie-actions{display:flex;gap:12px;margin-top:16px}
.cookie .btn{padding:12px 22px;font-size:.9rem}
.cookie .btn-line{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.cookie .btn-line:hover{border-color:var(--ink);background:transparent;color:var(--ink);transform:none;box-shadow:none}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.1s}.rv.d2{transition-delay:.2s}.rv.d3{transition-delay:.3s}.rv.d4{transition-delay:.4s}

/* ---------- section divider (motif) ---------- */
.divider{display:flex;justify-content:center;padding:8px 0}
.divider img{height:34px;opacity:.9}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width:900px){
  :root{--header-h:72px}
  .nav{position:fixed;inset:0 0 0 auto;width:min(82vw,340px);background:var(--ink);flex-direction:column;
    align-items:flex-start;justify-content:center;gap:26px;padding:40px;transform:translateX(100%);transition:transform .4s ease;box-shadow:var(--shadow-lg)}
  .nav.open{transform:translateX(0)}
  .nav a{font-size:1.15rem}
  .burger{display:flex}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .split,.about,.budget-grid{grid-template-columns:1fr;gap:40px}
  .budget-media,.media.tall{max-width:520px}
  .grid-4,.grid-cards,.grid-cards.cols-3{grid-template-columns:repeat(2,1fr)}
  .checks{grid-template-columns:1fr}
  .port-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
}
@media (max-width:560px){
  .container{padding:0 20px}
  .hero-in{padding-top:calc(var(--header-h) + 30px)}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{justify-content:center}
  .grid-4,.grid-cards,.grid-cards.cols-3,.port-grid,.stats{grid-template-columns:1fr}
  .stats{gap:28px}
  /* comparativa vira cartões */
  .compare-head{display:none}
  .compare-row{grid-template-columns:1fr}
  .cell{padding:18px 20px}
  .compare-label{display:block}
  .cell.bad .compare-label{color:#9a9a9a}
  .cell.good{border-left:0;border-top:3px solid var(--wine)}
  .footer-grid{grid-template-columns:1fr}
  .cookie{left:12px;right:12px;bottom:12px}
  .cookie-actions{flex-direction:column}
  .lb-nav{width:46px;height:46px}
}

/* ---------- A/B teste: variante B (LP enxuta) ---------- */
.ab-only-b{display:none!important}
html.ab-lean .case.ab-only-b{display:grid!important}
html.ab-lean .ab-hide-b{display:none!important}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .hl>span,.rv,.step,.steps::before{transform:none!important;opacity:1!important}
  .uline{background-size:100% .085em!important}
  .tl-item{opacity:1!important;transform:none!important}
  .tl-item .tl-node{background:var(--wine)!important;border-color:var(--wine)!important;color:#fff!important}
  .timeline-fill{height:100%!important}
  .marquee-track{animation:none!important}
  .hero-bg img{opacity:0!important}.hero-bg img.active,.hero-bg img:first-child{opacity:1!important}
}

/* Botão flutuante do Merlin na cor da marca */
.merlin-button{background:var(--wine)!important}

/* Ambiente em destaque (hospitalar + agências) */
.amb-feat{border-color:var(--wine);box-shadow:0 10px 28px rgba(130,26,57,.14)}
.amb-feat .ic{background:var(--wine);color:#fff}
.amb-feat:hover .ic{transform:rotate(-4deg)}

/* Logo maior no desktop/notebook (mobile mantém) */
@media (min-width:901px){.brand img{height:50px}}

/* crédito do fotógrafo (discreto) */
.lb-credit{position:absolute;bottom:24px;right:26px;color:rgba(255,255,255,.7);font-size:.76rem;letter-spacing:.04em}
.lb-credit:empty{display:none}
.case-credit{font-size:.76rem;color:var(--muted);margin-top:14px;opacity:.85}