/* ============================================================
   JOÃO VICTOR — PORTFÓLIO 2026 · v2
   Mobile-first. Tema claro/escuro. PT/EN.
   Estrutura: NexStudio (TailGrids) · Marca: JV
   ============================================================ */

/* ---------- 1. FONTES ---------- */
@font-face{font-family:'Poppins';src:url('../fonts/poppins-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-500-italico.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Morganite';src:url('../fonts/morganite-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Morganite';src:url('../fonts/morganite-900.woff2') format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Melodrame';src:url('../fonts/melodrame.woff2') format('woff2');font-weight:400;font-display:swap}

/* ---------- 2. TOKENS (tema claro) ---------- */
:root{
  --laranja:#ff5a00;
  --laranja-txt:#d94c00;          /* laranja para texto pequeno sobre fundo claro (contraste AA) */
  --verde:#15803d;                /* WhatsApp: branco sobre este verde passa AA */
  --verde-hover:#166534;

  --bg:#f0f0f0;
  --bg-2:#e7e7e7;
  --superficie:#ffffff;
  --escuro:#252525;               /* blocos escuros fixos (não mudam com o tema) */
  --txt:#252525;
  --txt-2:#555;
  --txt-3:#7a7a7a;
  --linha:rgba(37,37,37,.13);
  --linha-forte:rgba(37,37,37,.26);
  --sombra:0 1px 2px rgba(0,0,0,.05),0 8px 28px rgba(0,0,0,.06);

  --f-sans:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --f-display:'Morganite','Poppins',sans-serif;
  --f-script:'Melodrame',Georgia,serif;

  --t-xs:.72rem;
  --t-sm:.86rem;
  --t-base:1rem;
  --t-lg:1.12rem;
  --h3:clamp(1.35rem,1.1rem + 1.1vw,2rem);
  --h2:clamp(1.9rem,1.35rem + 2.6vw,3.6rem);
  --h1:clamp(2.3rem,1.5rem + 3.8vw,5rem);

  --gutter:clamp(1.15rem,4.5vw,4rem);
  --sec-y:clamp(3.75rem,9vw,8.5rem);
  --max:1320px;
  --raio:clamp(18px,2.2vw,32px);
  --raio-sm:14px;
  --cab-h:64px;

  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}

/* ---------- 3. TEMA ESCURO ---------- */
[data-tema="escuro"]{
  --bg:#111111;
  --bg-2:#171717;
  --superficie:#1c1c1c;
  --txt:#efefef;
  --txt-2:#b4b4b4;
  --txt-3:#8c8c8c;
  --laranja-txt:#ff7a2e;
  --linha:rgba(255,255,255,.1);
  --linha-forte:rgba(255,255,255,.22);
  --sombra:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
  color-scheme:dark;
}

/* ---------- 4. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--cab-h) + 12px)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  font-family:var(--f-sans);font-size:var(--t-base);line-height:1.6;
  color:var(--txt);background:var(--bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  transition:background-color .35s var(--ease),color .35s var(--ease);
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
[hidden]{display:none!important}
::selection{background:var(--laranja);color:#fff}
:focus-visible{outline:2px solid var(--laranja);outline-offset:3px;border-radius:6px}

/* ---------- 5. UTILITÁRIOS ---------- */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec-y)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.pular{position:fixed;top:.5rem;left:.5rem;z-index:500;background:var(--txt);color:var(--bg);padding:.6rem 1rem;border-radius:8px;transform:translateY(-200%)}
.pular:focus{transform:none}

.rotulo{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:var(--t-xs);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-3);
}
.rotulo::before{content:"";width:1.6em;height:1px;background:currentColor;opacity:.55}
/* boas-vindas do hero do portfólio (JV, 01/10): itálico de verdade (poppins-500-italico) e mais respiro entre as letras */
.rotulo--boasvindas{font-style:italic;letter-spacing:.3em}

/* Título: Poppins + destaque em Mélodrame.
   Medido: as duas fontes dividem a mesma linha de base; a x-height da Mélodrame (43)
   é menor que a da Poppins (55) → escala 1.28em. Inline, sem transform: alinha sozinho. */
.titulo{font-size:var(--h2);font-weight:400;line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.titulo em,.acento{
  font-family:var(--f-script);font-style:normal;font-weight:400;
  color:var(--laranja);
  font-size:1.28em;
  line-height:0;            /* não empurra a entrelinha */
  vertical-align:baseline;
  letter-spacing:0;
}
.titulo--lg{font-size:var(--h1)}
.titulo--sm{font-size:var(--h3)}
.lead{font-size:var(--t-lg);color:var(--txt-2);max-width:52ch}

/* ---------- 6. BOTÕES ---------- */
.btn{
  --b-bg:var(--txt);--b-fg:var(--bg);--b-bd:var(--txt);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:48px;padding:.9em 1.5em;border-radius:999px;
  background:var(--b-bg);color:var(--b-fg);border:1px solid var(--b-bd);
  font-size:var(--t-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn--vazado{--b-bg:transparent;--b-fg:var(--txt);--b-bd:var(--linha-forte)}
.btn--vazado:hover{--b-bd:var(--txt)}
.btn--claro{--b-bg:#fff;--b-fg:#252525;--b-bd:#fff}
/* WhatsApp é sempre verde — diferencia da cor da marca e a pessoa reconhece na hora */
.btn--zap{--b-bg:var(--verde);--b-fg:#fff;--b-bd:var(--verde)}
.btn--zap:hover{--b-bg:var(--verde-hover);--b-bd:var(--verde-hover)}
.btn--sm{min-height:40px;padding:.7em 1.1em}
.btn--bloco{width:100%}

/* ---------- 7. CABEÇALHO ---------- */
.cab{
  position:fixed;inset:0 0 auto;z-index:100;height:var(--cab-h);
  display:flex;align-items:center;
  background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--linha);
  transition:transform .45s var(--ease),background-color .35s var(--ease);
}
.cab.is-oculto{transform:translateY(-100%)}
.cab__in{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.cab__logo{display:flex;align-items:center;color:var(--txt);transition:color .3s}
.cab__logo svg{width:40px;height:40px;fill:currentColor}
.cab__logo:hover{color:var(--laranja)}

.nav{display:none}
.nav a{
  font-size:var(--t-xs);font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  position:relative;padding-block:.4rem;color:var(--txt-2);transition:color .3s;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--txt)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--laranja)}

.cab__acoes{display:flex;align-items:center;gap:.35rem}
.cab__redes{display:none;align-items:center;gap:.15rem;margin-right:.35rem}
.cab__zap{display:none}

.ic{
  width:40px;height:40px;border-radius:999px;display:grid;place-items:center;
  color:var(--txt-2);transition:color .25s,background-color .25s;
}
.ic:hover{color:var(--txt);background:var(--bg-2)}
.ic svg{width:18px;height:18px;fill:currentColor}
.ic--idioma{width:auto;min-width:40px;padding-inline:.55rem;font-size:var(--t-xs);font-weight:600;letter-spacing:.08em}
/* ícone do tema troca sozinho */
.ic--tema .sol{display:none}
[data-tema="escuro"] .ic--tema .sol{display:block}
[data-tema="escuro"] .ic--tema .lua{display:none}

.hamb{width:40px;height:40px;display:grid;place-items:center;border-radius:999px}
.hamb span{display:block;width:18px;height:1.5px;background:currentColor;transition:transform .4s var(--ease),opacity .3s}
.hamb span+span{margin-top:5px}
.hamb[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamb[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamb[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.menu{
  position:fixed;inset:var(--cab-h) 0 0;z-index:99;
  background:var(--bg);
  display:flex;flex-direction:column;gap:.25rem;
  padding:2rem var(--gutter) calc(2rem + env(safe-area-inset-bottom,0px));
  clip-path:inset(0 0 100% 0);visibility:hidden;
  transition:clip-path .6s var(--ease),visibility .6s;
  overflow-y:auto;
}
.menu.is-aberto{clip-path:inset(0);visibility:visible}
.menu a.menu__link{
  font-family:var(--f-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(2.8rem,14vw,4.5rem);line-height:.95;letter-spacing:.01em;
}
.menu a.menu__link:hover{color:var(--laranja)}
.menu__redes{display:flex;gap:.25rem;margin-top:1.75rem}
.menu .btn{margin-top:1.25rem}

/* ---------- 8. LINK NA BIO (home) ---------- */
.bio{
  min-height:100svh;
  padding:calc(var(--cab-h) + 1.75rem) var(--gutter) 3rem;
  background:
    radial-gradient(60% 40% at 50% 0%,color-mix(in srgb,var(--laranja) 16%,transparent),transparent 70%),
    var(--bg);
}
.bio__col{width:100%;max-width:520px;margin-inline:auto}
.bio__perfil{text-align:center;margin-bottom:1.75rem}
.bio__foto{
  width:112px;height:112px;margin:0 auto 1rem;border-radius:999px;overflow:hidden;
  border:2px solid var(--laranja);padding:3px;background:var(--bg);
}
.bio__foto img{width:100%;height:100%;object-fit:cover;object-position:center 22%;border-radius:999px}
/* bio no padrão do portfólio (JV, 02/10): Poppins + destaque em Mélodrame laranja, mesma métrica do .titulo */
.bio__nome{font-size:clamp(2.4rem,10vw,3.2rem);font-weight:400;line-height:1.05;letter-spacing:-.02em}
.bio__nome em{font-family:var(--f-script);font-style:normal;color:var(--laranja);font-size:1.28em;line-height:0}
.bio__funcao{margin-top:.55rem;font-size:var(--t-sm);color:var(--txt-2);letter-spacing:.02em}
.bio__frase{margin-top:.9rem;font-size:var(--t-base);color:var(--txt)}
.bio__frase em{font-family:var(--f-script);font-style:normal;color:var(--laranja);font-size:1.28em;line-height:0}

.bio__cards{display:grid;gap:.75rem}
.bcard{
  position:relative;display:flex;align-items:center;gap:1rem;
  min-height:96px;padding:1rem 1.1rem;border-radius:var(--raio-sm);
  background:var(--superficie);border:1px solid var(--linha);
  box-shadow:var(--sombra);overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease),border-color .35s var(--ease);
}
.bcard:hover{transform:translateY(-2px);border-color:var(--laranja)}
.bcard__txt{flex:1;min-width:0}
.bcard__t{font-weight:500;font-size:1.3rem;line-height:1.15;letter-spacing:-.01em}
.bcard__d{font-size:var(--t-sm);color:var(--txt-2);margin-top:.2rem;line-height:1.4}
.bcard__seta{flex:none;width:36px;height:36px;border-radius:999px;border:1px solid var(--linha-forte);display:grid;place-items:center;transition:background-color .3s,border-color .3s,color .3s}
.bcard__seta svg{width:13px;height:13px}
.bcard:hover .bcard__seta{background:var(--laranja);border-color:var(--laranja);color:#fff}
/* card-destaque com mosaico de peças */
.bcard--destaque{min-height:216px;align-items:flex-end;background:var(--escuro);color:#fff;border-color:transparent}
.bcard--destaque .bcard__d{color:rgba(255,255,255,.72)}
.bcard--destaque .bcard__seta{border-color:rgba(255,255,255,.35)}
/* grade 5×2: uma peça de cada cliente, nenhuma repetida */
.bcard__mosaico{position:absolute;inset:0;z-index:-1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:3px;opacity:.92}
.bcard__mosaico img{width:100%;height:100%;object-fit:cover}
.bcard--destaque::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.82) 88%)}
.bcard__selo{
  position:absolute;top:.8rem;right:.8rem;
  font-size:.66rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  background:var(--laranja);color:#fff;border-radius:999px;padding:.35em .8em;
}
.bcard__ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--bg-2);color:var(--txt)}
.bcard__ic svg{width:20px;height:20px;fill:currentColor}
.bcard--mini{min-height:72px}
.bio__redes{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.bio__zap{min-height:56px}   /* logo abaixo do card do Portfólio (JV, 29/09); o espaço vem do gap da lista */
.bio__pe{text-align:center;margin-top:2rem;font-size:var(--t-xs);color:var(--txt-3);letter-spacing:.06em}

/* ---------- 9. HERO DO PORTFÓLIO ---------- */
.hero{
  position:relative;overflow:hidden;
  padding-top:calc(var(--cab-h) + clamp(2.5rem,7vw,5rem));
  padding-bottom:clamp(2.5rem,6vw,4rem);
}
.hero__txt{position:relative;z-index:2}
.hero .titulo{max-width:14ch}
.hero__sub{margin-top:1.25rem}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.75rem}
.hero__rolar{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:2rem;
  font-size:var(--t-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--txt-3);
}
.hero__rolar i{display:block;width:1px;height:28px;background:currentColor;transform-origin:top;animation:fio 2.2s var(--ease) infinite}
@keyframes fio{0%{transform:scaleY(0)}45%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}

/* colunas de peças rolando — o trabalho aparece antes de qualquer texto longo */
.vitrine{
  position:relative;margin-top:2.25rem;height:min(96vw,520px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;
  -webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);
}
.vitrine__col{overflow:hidden}
.vitrine__trilho{display:flex;flex-direction:column;gap:.6rem;animation:sobe 48s linear infinite}
.vitrine__col:nth-child(2) .vitrine__trilho{animation-duration:60s;animation-direction:reverse}
.vitrine__col:nth-child(3) .vitrine__trilho{animation-duration:54s}
.vitrine img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px;background:var(--bg-2)}
@keyframes sobe{to{transform:translateY(-50%)}}
.vitrine:hover .vitrine__trilho{animation-play-state:paused}

/* ---------- 10. MARCAS (carrossel infinito) ---------- */
.marcas{background:#000;color:#fff;padding-block:clamp(2.25rem,5vw,3.5rem);overflow:hidden}
.marcas__rot{display:flex;justify-content:center;margin-bottom:1.5rem}
.marcas__rot .rotulo{color:rgba(255,255,255,.55)}
.marquee{display:flex;width:max-content;animation:desliza 42s linear infinite}
.marquee__grupo{display:flex;align-items:center;gap:clamp(2.25rem,6vw,4.5rem);padding-right:clamp(2.25rem,6vw,4.5rem)}
/* --h vem do gerador: altura em px no desktop para que todas ocupem área parecida */
.marcas{--esc:.66}
.marquee img{height:calc(var(--h,40) * var(--esc) * 1px);width:auto;opacity:.8;transition:opacity .3s}
.marquee img:hover{opacity:1}
.marcas:hover .marquee{animation-play-state:paused}
@keyframes desliza{to{transform:translateX(-50%)}}

/* ---------- 10b. SOBRE MIM (antes de "O que eu resolvo") ---------- */
.sobre__grid{display:grid;gap:1.75rem;align-items:center}
.sobre__foto{max-width:340px;border-radius:var(--raio);overflow:hidden;background:var(--bg-2)}
.sobre__foto img{width:100%;aspect-ratio:800/833;object-fit:cover}
.sobre__txt .titulo{margin-top:.6rem}
.sobre__p{color:var(--txt-2);margin-top:1rem;max-width:58ch}
.sobre__nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.6rem;padding-block:1.2rem;border-block:1px solid var(--linha)}
.sobre__nums .num__v{font-size:clamp(2.2rem,1.6rem + 3vw,3.4rem)}

/* ---------- 11. O QUE EU RESOLVO (4 cards 2×2) ---------- */
.resolvo__cab{margin-bottom:clamp(2rem,4vw,3rem)}
.resolvo__grid{display:grid;gap:.75rem}
.rcard{
  position:relative;padding:1.4rem 1.35rem 1.5rem;border-radius:var(--raio-sm);
  background:var(--superficie);border:1px solid var(--linha);
  transition:border-color .35s var(--ease),transform .35s var(--ease);
}
.rcard:hover{border-color:var(--laranja);transform:translateY(-2px)}
.rcard__n{font-size:var(--t-xs);font-weight:600;color:var(--laranja-txt);letter-spacing:.1em}
.rcard__t{font-size:var(--h3);font-weight:400;line-height:1.15;letter-spacing:-.015em;margin-top:.6rem}
.rcard__t em{font-family:var(--f-script);font-style:normal;color:var(--laranja);font-size:1.28em;line-height:0}
.rcard__d{margin-top:.6rem;color:var(--txt-2);font-size:var(--t-sm);line-height:1.55}
.rcard--ia{display:flex;flex-direction:column;background:var(--escuro);color:#fff;border-color:transparent}
.rcard--ia .rcard__n{color:var(--laranja)}
.rcard--ia .rcard__d{color:rgba(255,255,255,.72)}
.rcard__ver{display:inline-flex;align-items:center;gap:.5rem;margin-top:auto;padding-top:1.1rem;font-size:var(--t-xs);font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.rcard__ver svg{width:12px;height:12px;transition:transform .3s var(--ease)}
.rcard--ia:hover .rcard__ver svg{transform:translate(3px,-3px)}

/* ---------- 12. (a lista de cases saiu em 02/10: cases e galeria são uma grade só, seção 14) ---------- */

/* ---------- 13. AUTOMAÇÃO COM IA ---------- */
.automacao__cab{max-width:48rem;margin-bottom:clamp(2rem,4vw,3rem)}
.automacao__cab .titulo{margin:.6rem 0 1.1rem}
.automacao__p{color:var(--txt-2);margin-top:.9rem;max-width:60ch}
.automacao__p strong{color:var(--txt);font-weight:600}

/* o resultado: sem nome nem foto desde 05/10, números grandes num bloco escuro fixo (igual nos dois temas) */
.ecase{border-radius:var(--raio);background:var(--escuro);color:#fff}
.ecase__corpo{padding:clamp(1.4rem,4vw,2.75rem)}
.ecase .rotulo{color:rgba(255,255,255,.5)}
.ecase__t{font-size:var(--h3);font-weight:400;line-height:1.15;letter-spacing:-.015em;margin:.65rem 0 .85rem;text-wrap:balance}
.ecase__t em{font-family:var(--f-script);font-style:normal;color:var(--laranja);font-size:1.28em;line-height:0}
.ecase__p{color:rgba(255,255,255,.74);max-width:54ch}
/* contato -> consulta -> cirurgia: lê da esquerda para a direita. Números em sans, grandes */
.efunil{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;margin-top:1.6rem}
.efunil__i{position:relative;padding:.9rem .85rem;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.efunil__v{display:block;font-weight:600;font-size:clamp(1.8rem,1.4rem + 1.6vw,2.4rem);line-height:1;letter-spacing:-.02em}
.efunil__i--forte{border-color:var(--laranja);background:rgba(255,90,0,.1)}
.efunil__i--forte .efunil__v{color:var(--laranja)}
.efunil__l{display:block;margin-top:.4rem;font-size:var(--t-xs);line-height:1.35;color:rgba(255,255,255,.72)}
.ecase__fonte{margin-top:1.1rem;font-size:var(--t-xs);color:rgba(255,255,255,.45)}
.ecase__aviso{margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.12);max-width:64ch;font-size:var(--t-sm);line-height:1.55;color:rgba(255,255,255,.72)}
.ecase__aviso b{color:#fff;font-weight:600}

/* consultas por mês (só aparece com 2+ meses): série única, coluna fina, rótulo no pico e no último mês */
.emeses{margin-top:1.75rem}
.emeses__tit{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:.9rem}
.emeses__graf{position:relative;display:flex;height:160px;padding-left:1.6rem}
.emeses__grade{position:absolute;inset:0 0 1.5rem 0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.emeses__grade i{display:grid;grid-template-columns:1.6rem 1fr;align-items:center;height:0;font-style:normal;font-size:.62rem;color:rgba(255,255,255,.45)}
.emeses__grade i::after{content:"";border-top:1px solid rgba(255,255,255,.1)}
.emes{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;outline:0}
.emes__area{position:relative;flex:1;width:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.emes__b{width:min(24px,60%);height:calc(var(--v) * 100%);min-height:2px;background:var(--laranja);border-radius:4px 4px 0 0}
.emes__v{font-size:var(--t-xs);font-weight:600;margin-bottom:.3rem}
.emes__m{height:1.5rem;display:flex;align-items:flex-end;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.emes__dica{position:absolute;bottom:calc(var(--v) * 100% + .5rem);left:50%;translate:-50% 0;white-space:nowrap;padding:.35rem .55rem;border-radius:8px;background:#fff;color:#1a1a1a;font-size:.7rem;opacity:0;pointer-events:none;transition:opacity .2s}
.emes:hover .emes__dica,.emes:focus-visible .emes__dica{opacity:1}
.emes:focus-visible .emes__b{outline:2px solid #fff;outline-offset:2px}

/* passo a passo + conversa */
.efluxo{display:grid;gap:2.25rem;margin-top:clamp(2.75rem,6vw,4.5rem);align-items:center}
.efluxo__t{font-size:var(--h3);font-weight:400;line-height:1.15;letter-spacing:-.015em;text-wrap:balance}
.efluxo__t em{font-family:var(--f-script);font-style:normal;color:var(--laranja);font-size:1.28em;line-height:0}
.efluxo__p{color:var(--txt-2);margin-top:.5rem}
.epassos{display:grid;gap:1.1rem;margin-top:1.5rem}
.epasso{display:grid;grid-template-columns:34px 1fr;column-gap:.9rem}
.epasso__n{grid-row:span 2;width:34px;height:34px;border-radius:999px;display:grid;place-items:center;background:var(--laranja);color:#1a1a1a;font-weight:600;font-size:var(--t-sm)}
.epasso__t{font-weight:600;line-height:1.3;padding-top:.35rem}
.epasso__d{color:var(--txt-2);font-size:var(--t-sm);line-height:1.5;margin-top:.1rem}

/* celular com a conversa: vista do WhatsApp da clínica (a IA escreve à direita). Clara nos dois temas */
.chat{width:100%;max-width:360px;justify-self:center}
.chat__tela{border-radius:30px;overflow:hidden;background:#efeae2;border:8px solid #161616;box-shadow:0 1px 2px rgba(0,0,0,.08),0 24px 60px rgba(0,0,0,.18)}
.chat__cab{display:flex;align-items:center;gap:.65rem;padding:.75rem .9rem;background:#f0f2f5;border-bottom:1px solid #e2ded7;color:#111b21}
.chat__av{flex:none;width:36px;height:36px;border-radius:999px;display:grid;place-items:center;background:#dfe5e7;color:#54656f;font-size:.85rem;font-weight:600}
.chat__cab p{display:grid;line-height:1.25;font-size:.86rem}
.chat__cab b{font-weight:600}
.chat__cab small{font-size:.7rem;color:#667781}
.chat__msgs{display:flex;flex-direction:column;gap:.35rem;padding:.9rem .75rem 1.1rem}
.bolha{position:relative;max-width:80%;padding:.42rem .6rem .3rem;border-radius:10px;font-size:.8rem;line-height:1.42;color:#111b21;box-shadow:0 1px .5px rgba(11,20,26,.13)}
.bolha small{display:block;text-align:right;font-size:.6rem;color:#667781;margin-top:.1rem}
.bolha--ela{align-self:flex-start;background:#fff}
.bolha--ia{align-self:flex-end;background:#d9fdd3}
.bolha--ela+.bolha--ia,.bolha--ia+.bolha--ela{margin-top:.35rem}
.bolha__passo{position:absolute;left:-31px;top:.35rem;width:22px;height:22px;border-radius:999px;display:grid;place-items:center;background:var(--laranja);color:#1a1a1a;font-size:.68rem;font-weight:600}
.chat__leg{margin-top:.9rem;font-size:var(--t-xs);color:var(--txt-3);text-align:center;line-height:1.45}

/* quem usa: cards pequenos e iguais (nome, área, @), sem número por cliente (05/10) */
.eoutros{margin-top:clamp(3rem,7vw,5rem)}
.eoutros__t{font-size:var(--h3);font-weight:400;line-height:1.15;letter-spacing:-.015em;text-wrap:balance;margin-bottom:1.25rem}
.eoutros__t em{font-family:var(--f-script);font-style:normal;color:var(--laranja);font-size:1.28em;line-height:0}
.eoutros__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;list-style:none;margin:0;padding:0}
.ecard{display:grid;gap:.2rem;align-content:start;padding:1rem 1.05rem;border-radius:var(--raio-sm);background:var(--escuro);color:#fff;line-height:1.3}
.ecard b{font-weight:600;font-size:var(--t-sm)}
.ecard span{font-size:var(--t-xs);letter-spacing:.04em;color:rgba(255,255,255,.6)}
.ecard .ecard__ig{color:var(--laranja);letter-spacing:0;overflow-wrap:anywhere}

.automacao__pe{display:grid;gap:1rem;justify-items:start;margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.5rem;border-top:1px solid var(--linha)}
.automacao__ctaP{font-size:var(--t-lg);color:var(--txt)}

/* ---------- 14. GALERIA: grade no estilo do Behance (01/10) ---------- */
/* filtro em pílulas que quebram linha: nunca rolando de lado (no celular as categorias se perdiam) */
.gal__cab{margin-bottom:1.4rem}
.gal__cab .lead{margin-top:.9rem}
.gal__ancoras{display:grid;height:0}
.gal__filtros{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.5rem}
.gal__f{display:inline-flex;align-items:center;gap:.45em;min-height:44px;padding:.55em 1.05em;border-radius:999px;border:1px solid var(--linha-forte);font-size:var(--t-sm);font-weight:500;color:var(--txt-2);transition:color .25s,border-color .25s,background-color .25s}
.gal__f[aria-pressed="true"]{background:var(--txt);border-color:var(--txt);color:var(--bg)}
.gal__qt{font-size:.78em;font-variant-numeric:tabular-nums;opacity:.55}
.gal__grade{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem .65rem}
/* card: peça 4:5 inteira (capa de assets/img/capas) e o texto embaixo, fora da arte */
.gcard{display:block;width:100%;text-align:left;color:inherit;border-radius:12px;animation:gcard-in .55s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes gcard-in{from{opacity:0;transform:translateY(12px)}}
.gcard:focus-visible{outline:2px solid var(--laranja);outline-offset:4px}
.gcard__fig{position:relative;display:block;overflow:hidden;border-radius:10px;aspect-ratio:4/5;background:var(--bg-2)}
.gcard__fig img,.gcard__fig video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),opacity .4s}
/* o loop do hover fica inteiro (contain) e cai em cima da mesma peça da capa: nada de título cortado */
.gcard__fig video{opacity:0;object-fit:contain}
.gcard__play{position:absolute;top:.5rem;right:.5rem;width:28px;height:28px;border-radius:999px;background:rgba(0,0,0,.55);display:grid;place-items:center;color:#fff}
.gcard__play svg{width:9px;height:9px;fill:currentColor}
/* no toque não existe hover: o que o card faz fica dito no texto de baixo */
.gcard__over{position:absolute;inset:auto 0 0;display:flex;align-items:flex-end;padding:2.75rem .9rem .85rem;background:linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.72));color:#fff;opacity:0;transition:opacity .35s var(--ease)}
.gcard__acao{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--t-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.gcard__acao svg{width:11px;height:11px;flex:none}
.gcard__info{display:grid;gap:.15rem;margin-top:.6rem;padding-inline:.1rem}
.gcard__n{font-size:var(--t-sm);font-weight:600;line-height:1.25;color:var(--txt)}
.gcard__c{font-size:var(--t-xs);line-height:1.35;color:var(--txt-3)}
.gcard__c b{font-weight:600;color:var(--laranja-txt)}
@media(hover:hover){
  .gal__f:hover{border-color:var(--txt);color:var(--txt)}
  .gal__f[aria-pressed="true"]:hover{color:var(--bg)}
  .gcard:hover .gcard__over,.gcard:focus-visible .gcard__over{opacity:1}
  .gcard:hover .gcard__fig img,.gcard:hover .gcard__fig video{transform:scale(1.04)}
  .gcard:hover .gcard__fig video{opacity:1}
}
.gal__mais{display:flex;justify-content:center;margin-top:2rem}
.gal__mais .btn{width:100%;max-width:340px}
.gal__mais .gal__qt{opacity:.55}

/* ---------- 15. CTA FINAL ---------- */
.cta{text-align:center}
.cta .titulo{margin-inline:auto;max-width:18ch}
.cta p.lead{margin:1.1rem auto 0}
.cta__ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:1.75rem}

/* ---------- 16. RODAPÉ ---------- */
.pe{background:var(--escuro);color:#fff;padding-top:clamp(3rem,6vw,5rem);overflow:hidden}
.pe__topo{display:grid;gap:2rem}
.pe__logo svg{width:44px;height:44px;fill:#fff}
.pe__bio{color:rgba(255,255,255,.6);font-size:var(--t-sm);max-width:36ch;margin-top:.9rem}
.pe h2{font-size:var(--t-xs);font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:.6rem}
.pe__links{display:grid}
.pe__links a{display:flex;align-items:center;min-height:44px;font-size:var(--t-sm);color:rgba(255,255,255,.82);transition:color .25s}
.pe__links a:hover{color:var(--laranja)}
.pe__fantasma{
  margin-top:clamp(2rem,5vw,3.5rem);text-align:center;white-space:nowrap;user-select:none;
  font-family:var(--f-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(3.2rem,15vw,12rem);line-height:.8;letter-spacing:.01em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.16);
}
.pe__base{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:space-between;border-top:1px solid rgba(255,255,255,.12);margin-top:1.5rem;padding-block:1.25rem calc(1.5rem + env(safe-area-inset-bottom,0px));font-size:var(--t-xs);color:rgba(255,255,255,.45)}

/* ---------- 17. WHATSAPP FLUTUANTE ---------- */
.zap{
  position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:90;
  width:54px;height:54px;border-radius:999px;display:grid;place-items:center;
  background:var(--verde);color:#fff;box-shadow:0 8px 26px rgba(0,0,0,.25);
  opacity:0;transform:translateY(14px) scale(.92);pointer-events:none;
  transition:opacity .45s var(--ease),transform .45s var(--ease),background-color .25s;
}
.zap.is-on{opacity:1;transform:none;pointer-events:auto}
.zap:hover{background:var(--verde-hover)}
.zap svg{width:24px;height:24px;fill:currentColor}

/* ---------- 18. LIGHTBOX ---------- */
.lb{position:fixed;inset:0;z-index:200;background:rgba(8,8,8,.985);display:grid;grid-template-rows:auto 1fr auto;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.lb.is-on{opacity:1;visibility:visible}
.lb__cab{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem var(--gutter);color:#fff}
.lb__tit{font-size:var(--t-sm);font-weight:500}
.lb__tit small{display:block;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;opacity:.5;margin-top:.1rem}
.lb__x,.lb__nav{width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.25);display:grid;place-items:center;color:#fff;transition:background-color .25s,border-color .25s,opacity .25s}
.lb__x:hover,.lb__nav:hover{background:var(--laranja);border-color:var(--laranja)}
/* palco com altura definida (linha 1fr do grid). A mídia é absoluta dentro dele:
   max-height:100% passa a valer, e a peça nunca passa da tela, seja 4:5, 9:16 ou quadrada */
.lb__palco{position:relative;min-height:0;overflow:hidden}
.lb__palco img,.lb__palco video{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:calc(100% - 2 * var(--gutter));max-height:100%;object-fit:contain;border-radius:10px}
.lb__nav{position:absolute;top:50%;translate:0 -50%;background:rgba(0,0,0,.4)}
.lb__nav[disabled]{opacity:.2;pointer-events:none}
.lb__nav--ant{left:.5rem}
.lb__nav--prox{right:.5rem}
.lb__pe{padding:.75rem var(--gutter) calc(1.25rem + env(safe-area-inset-bottom,0px));text-align:center;color:rgba(255,255,255,.5);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase}

/* ---------- 19. PÁGINA DE CASE ---------- */
.caso-hero{padding-top:calc(var(--cab-h) + clamp(2rem,6vw,4.5rem));padding-bottom:clamp(2rem,4vw,3rem)}
.voltar{display:flex;width:fit-content;align-items:center;gap:.5rem;min-height:44px;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);margin-bottom:1rem;transition:color .25s}
.voltar:hover{color:var(--laranja-txt)}
.caso-hero .titulo{max-width:17ch;margin-top:.75rem}
.caso-hero .lead{margin-top:1.1rem}
.ficha{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem 1rem;border-block:1px solid var(--linha);padding-block:1.4rem;margin-top:2rem}
.ficha dt{font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);margin-bottom:.3rem}
.ficha dd{font-size:var(--t-sm);font-weight:500;line-height:1.45}

.etapas{display:grid;gap:1.75rem;padding-block:clamp(2.5rem,6vw,4.5rem)}
.etapa h2{font-size:var(--t-xs);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--laranja-txt);margin-bottom:.55rem}
.etapa p{color:var(--txt-2);max-width:56ch}
.etapa strong{color:var(--txt);font-weight:600}

.bloco{padding-bottom:clamp(2.5rem,6vw,4.5rem)}
.bloco__cab{margin-bottom:1.1rem;max-width:60ch}
.bloco__cab h2{font-size:var(--h3);font-weight:400;letter-spacing:-.015em;line-height:1.15}
.bloco__cab h2 em{font-family:var(--f-script);font-style:normal;color:var(--laranja);font-size:1.28em;line-height:0}
.bloco__cab p{color:var(--txt-2);margin-top:.5rem;font-size:var(--t-sm)}

/* carrossel completo: arrasta de lado, como no Instagram */
.fita{
  display:flex;align-items:flex-start;gap:.6rem;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);padding-bottom:.75rem;
  scrollbar-width:thin;scrollbar-color:var(--linha-forte) transparent;
}
.fita .peca{flex:0 0 min(74vw,340px);scroll-snap-align:start}
.fita--q .peca{flex-basis:min(56vw,260px)}
/* carrossel panorâmico (a imagem atravessa as lâminas): sem vão nem canto entre elas */
.fita--panorama{gap:0}
.fita--panorama .peca{border-radius:0}
.fita--panorama .peca:first-child{border-radius:12px 0 0 12px}
.fita--panorama .peca:last-child{border-radius:0 12px 12px 0}
.fita--panorama .peca:hover img{transform:none}
.fita--q .peca img{aspect-ratio:1/1}
.fita__dica{font-size:var(--t-xs);color:var(--txt-3);letter-spacing:.1em;text-transform:uppercase;margin-top:.4rem}

.pecas{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;align-items:start}
.peca{position:relative;border-radius:12px;overflow:hidden;background:var(--bg-2);cursor:zoom-in}
.peca img,.peca video{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .7s var(--ease)}
.peca--v img,.peca--v video{aspect-ratio:9/16}
.peca--q img{aspect-ratio:1/1}
.peca--l img{aspect-ratio:4/3}
.peca:hover img{transform:scale(1.03)}

.resultado{
  border-radius:var(--raio);padding:clamp(1.5rem,4vw,2.75rem);
  background:var(--escuro);color:#fff;margin-bottom:clamp(2.5rem,6vw,4.5rem);
}
.resultado .rotulo{color:rgba(255,255,255,.5)}
.resultado__palavra{
  display:block;margin-top:.75rem;
  font-family:var(--f-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(3.6rem,17vw,9rem);line-height:.85;letter-spacing:.01em;color:var(--laranja);
}
.resultado p{margin-top:1rem;color:rgba(255,255,255,.75);max-width:58ch}
.resultado ul{display:grid;gap:.6rem;margin-top:1.25rem}
.resultado li{position:relative;padding-left:1.1rem;color:rgba(255,255,255,.85);font-size:var(--t-sm)}
.resultado li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:999px;background:var(--laranja)}
.resultado__nota{margin-top:1.25rem!important;font-size:var(--t-xs)!important;color:rgba(255,255,255,.45)!important}

.proximo{background:var(--escuro);color:#fff;border-radius:var(--raio);margin-inline:.5rem}
.proximo a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:clamp(2.25rem,5vw,4rem)}
.proximo .rotulo{color:rgba(255,255,255,.5)}
.proximo .titulo{color:#fff;margin-top:.4rem}
.proximo__nicho{margin-top:.3rem;font-size:var(--t-sm);color:rgba(255,255,255,.6)}
.proximo__seta{flex:none;width:52px;height:52px;border-radius:999px;border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;transition:background-color .3s,border-color .3s,transform .3s}
.proximo a:hover .proximo__seta{background:var(--laranja);border-color:var(--laranja);transform:rotate(45deg)}

/* ---------- 20. CURRÍCULO ---------- */
.cv-topo{padding-top:calc(var(--cab-h) + clamp(2rem,6vw,4.5rem))}
.cv-sobre{display:grid;gap:1.75rem;align-items:center}
.cv-foto{border-radius:var(--raio);overflow:hidden;background:var(--bg-2);max-width:380px}
.cv-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 20%}
.cv-sobre p{color:var(--txt-2)}
.cv-sobre p+p{margin-top:.9rem}
.cv-sobre strong{color:var(--txt);font-weight:600}
.nums{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 1rem;margin-top:clamp(2.5rem,6vw,4rem);padding-block:1.75rem;border-block:1px solid var(--linha)}
.num__v{display:block;font-family:var(--f-script);color:var(--laranja);font-size:clamp(2.8rem,10vw,4.5rem);line-height:.95}
.num__l{display:block;font-size:var(--t-xs);color:var(--txt-2);margin-top:.35rem;line-height:1.4}
.cv-grid{display:grid;gap:clamp(2.5rem,5vw,3.5rem)}
.cv-bloco h2{font-size:var(--h3);font-weight:400;letter-spacing:-.015em;margin-bottom:1.25rem}
.cv-bloco h2 em{font-family:var(--f-script);font-style:normal;color:var(--laranja);font-size:1.28em;line-height:0}
.tempo{position:relative;padding-left:1.4rem}
.tempo::before{content:"";position:absolute;left:4px;top:.55rem;bottom:.55rem;width:1px;background:var(--linha-forte)}
.tempo li{position:relative;padding-bottom:1.25rem}
.tempo li::before{content:"";position:absolute;left:-1.4rem;top:.45rem;width:9px;height:9px;border-radius:999px;background:var(--laranja);box-shadow:0 0 0 3px var(--bg)}
.tempo__ano{font-size:var(--t-xs);color:var(--laranja-txt);font-weight:600;letter-spacing:.08em}
.tempo__org{font-weight:600;font-size:var(--t-lg);line-height:1.3}
.tempo__cargo{font-size:var(--t-sm);color:var(--txt-2)}
.tags{display:flex;flex-wrap:wrap;gap:.4rem}
.tag{border:1px solid var(--linha-forte);border-radius:999px;padding:.4em .9em;font-size:var(--t-xs);color:var(--txt-2)}
.softs{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1rem}
.soft{display:flex;align-items:center;gap:.65rem}
.soft img{width:28px;height:28px;object-fit:contain;flex:none}
.soft b{display:block;font-size:var(--t-sm);font-weight:600;line-height:1.2}
.soft small{display:block;font-size:var(--t-xs);color:var(--txt-3)}
.forma{display:grid;gap:.55rem}
.forma li{position:relative;padding-left:1rem;font-size:var(--t-sm);color:var(--txt-2);line-height:1.45}
.forma li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:1px;background:var(--laranja)}
.forma b{color:var(--txt);font-weight:600}

/* ---------- 20b. COMPONENTES NOVOS DA v2 ---------- */
/* redes no link na bio: ícone em cima, nome embaixo */
.bcard--mini{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:.7rem;min-height:104px;padding:.9rem}
.bcard--mini .bcard__ic{width:38px;height:38px;border-radius:10px}
.bcard--mini .bcard__ic svg{width:18px;height:18px}
.bcard--mini .bcard__t{font-size:1rem}

/* capa do case: uma peça no celular, tríptico no desktop */
.caso-capa{display:grid;gap:.6rem;margin-top:2rem;border-radius:0;overflow:visible;background:none}
.caso-capa img,.caso-capa video{width:100%;aspect-ratio:4/5;max-height:none;object-fit:cover;border-radius:var(--raio-sm);background:var(--bg-2)}
.caso-capa--v img,.caso-capa--v video{aspect-ratio:9/16}
.caso-capa--q img{aspect-ratio:1/1}
.caso-capa--l img{aspect-ratio:4/3}
.caso-capa > :nth-child(n+2){display:none}
.caso-capa.caso-capa--1{grid-template-columns:minmax(0,1fr);max-width:min(100%,400px);margin-inline:auto}
/* capa que é o próprio vídeo: ela toca muda; o selo avisa que o clique abre completo, com som */
.peca__som{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);display:inline-flex;align-items:center;gap:.45em;padding:.55em 1em;border-radius:999px;background:rgba(0,0,0,.62);color:#fff;font-size:var(--t-xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;pointer-events:none}
.peca__som::before{content:"";width:0;height:0;border-style:solid;border-width:.38em 0 .38em .62em;border-color:transparent transparent transparent currentColor}

/* atalho do case do Dr. Fred para a automação com IA */
.link-ia{display:grid;grid-template-columns:1fr auto;gap:.35rem 1rem;align-items:center;margin-bottom:clamp(2.5rem,6vw,4.5rem);
  padding:1.2rem 1.3rem;border-radius:var(--raio-sm);border:1px solid var(--linha);background:var(--superficie);transition:border-color .3s}
.link-ia:hover{border-color:var(--laranja)}
.link-ia .rotulo{grid-column:1}
.link-ia p{grid-column:1;font-size:var(--t-sm);color:var(--txt-2)}
.link-ia .bcard__seta{grid-column:2;grid-row:1/3}
.link-ia:hover .bcard__seta{background:var(--laranja);border-color:var(--laranja);color:#fff}

.soft__mono{width:28px;height:28px;flex:none;border-radius:7px;display:grid;place-items:center;background:#252525;color:var(--laranja);font-size:10px;font-weight:700}

@media(min-width:600px){
  .caso-capa{grid-template-columns:repeat(3,1fr)}
  .caso-capa > :nth-child(n+2){display:block}
}
@media(min-width:900px){
  .etapas{grid-template-columns:repeat(2,1fr)!important}
}

/* ---------- 21. REVEALS (o JS assume daqui) ---------- */
.js [data-rev]{opacity:0;transform:translateY(22px)}

/* ============================================================
   22. RESPONSIVO — de baixo pra cima
   ============================================================ */
@media(min-width:600px){
  .resolvo__grid{grid-template-columns:1fr 1fr}
  .marcas{--esc:.82}
  /* a partir de 600px, as etapas numa linha só, com seta entre elas (4 ou 5 números) */
  .efunil{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:.9rem}
  .efunil__i+.efunil__i::before{content:"";position:absolute;left:-.5rem;top:50%;width:.38rem;height:.38rem;border-top:1.5px solid rgba(255,255,255,.5);border-right:1.5px solid rgba(255,255,255,.5);transform:translate(-50%,-50%) rotate(45deg)}
  .efunil__v{font-size:clamp(1.5rem,1rem + 1.2vw,2.1rem)}
  .eoutros__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pecas{grid-template-columns:repeat(3,1fr);gap:.8rem}
  .gal__grade{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8rem .9rem}
  .nums{grid-template-columns:repeat(4,1fr)}
  .ficha{grid-template-columns:repeat(4,1fr)}
  .softs{grid-template-columns:repeat(3,1fr)}
  .bio__foto{width:128px;height:128px}
}
@media(min-width:900px){
  :root{--cab-h:76px}
  .cab__logo svg{width:46px;height:46px}
  .nav{display:flex;gap:clamp(1.25rem,2.4vw,2.25rem)}
  .cab__redes{display:flex}
  .cab__zap{display:inline-flex}
  .hamb{display:none}
  .menu{display:none}

  .hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:3rem;align-items:center}
  .vitrine{margin-top:0;height:min(78vh,680px)}


  .marcas{--esc:1}
  .eoutros__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem}
  .efluxo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem}
  .automacao__pe{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2rem}
  .sobre__grid{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:4rem}
  .sobre__foto{max-width:none}
  .gal__grade{grid-template-columns:repeat(4,minmax(0,1fr));gap:2.2rem 1.1rem}
  .gal__filtros{margin-bottom:2rem}

  .etapas{grid-template-columns:repeat(3,1fr);gap:2.5rem}
  .pecas--4{grid-template-columns:repeat(4,1fr)}
  .pecas--2{grid-template-columns:repeat(2,1fr)}

  .cv-sobre{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:3.5rem}
  .cv-grid{grid-template-columns:repeat(2,1fr)}
  .pe__topo{grid-template-columns:1.3fr 1fr 1fr}
  .proximo{margin-inline:1rem}
  .zap{right:1.5rem;bottom:1.5rem}
}
@media(min-width:1200px){
  .cv-grid{grid-template-columns:repeat(3,1fr)}
}

/* ---------- 23. MOVIMENTO REDUZIDO ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js [data-rev]{opacity:1!important;transform:none!important}
  .hero__rolar i{animation:none}
  .gcard{animation:none}
  /* o carrossel de marcas e a vitrine continuam, só que devagar — e param no toque/hover */
  .marquee{animation-duration:120s}
  .vitrine__trilho{animation-duration:140s!important}
}

/* ---------- 24. IMPRESSÃO (útil no currículo) ---------- */
@media print{
  .cab,.menu,.zap,.lb,.cta__ctas,.hero__ctas{display:none!important}
  body{background:#fff;color:#000}
  .cv-topo{padding-top:0}
  .pe{display:none}
}