:root{
    --escuro: #6D391A;
    --escuro-2: #A35627;
    --escuro-fundo: #341B0D;
    --marfim: #F7F4EC;
    --areia: #E9E1D2;
    --dourado: #93794C;
    --dourado-claro: #C2A877;
    --dourado-escuro: #6E5936;
    --rosa: #C08876;
    --tinta: #241E18;
    --tinta-suave: #6B6053;
    --branco: #FBF9F4;
    /* Variantes AA-safe (auditoria 21/07/2026): dourado/dourado-claro puros falham WCAG AA
       em contextos específicos (texto de botão, texto sobre o gradiente do hero, rótulo
       sobre --escuro). Não alterar --dourado/--dourado-claro em si (usados no logotipo e em
       elementos decorativos onde o contraste de texto não se aplica) — usar estas variantes
       só nos pontos com falha de contraste confirmada. */
    --dourado-botao: #846C43;
    --dourado-claro-aa: #DFC8A2;
    --sombra: 0 20px 60px -20px rgba(23,15,9,0.35);
    --nav-h: 84px;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  }

  body{
    background:var(--marfim);
    color:var(--tinta);
    font-family:'Manrope', sans-serif;
    font-size:16px;
    line-height:1.65;
    overflow-x:hidden;
  }

  h1,h2,h3,.serif{
    font-family:'Fraunces', serif;
    font-weight:500;
    letter-spacing:-0.01em;
    color:var(--dourado-escuro);
  }

  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; }
  img,svg{ display:block; max-width:100%; }
  button{ font-family:inherit; border:none; background:none; cursor:pointer; }
  input,select,textarea{ font-family:inherit; font-size:15px; }

  .container{
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding:0 32px;
  }

  /* ---------- Motivo de folha/nervura — usado em toda a página ---------- */
  .folhas-fundo{
    position:absolute;
    inset:0;
    pointer-events:none;
    overflow:hidden;
    z-index:0;
  }
  .folhas-fundo svg{ width:100%; height:100%; }
  .folhas-fundo.clara path{ stroke:var(--dourado); }
  .folhas-fundo.escura path{ stroke:var(--dourado-claro); }

  .veio-divisor{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin:0 auto 48px;
    position:relative;
    z-index:1;
  }
  .veio-divisor svg{ width:74px; height:16px; color:var(--dourado); }
  .veio-divisor span{
    font-size:11px;
    letter-spacing:0.24em;
    text-transform:uppercase;
    color:var(--dourado);
    font-weight:600;
    white-space:nowrap;
  }

  /* ---------- LOGO (e·m) ---------- */
  .em-mark{
    font-family:'Jost', sans-serif;
    font-weight:300;
    color:var(--dourado);
    line-height:1;
    display:inline-flex;
    align-items:baseline;
    /* text-shadow removido em 12/07/2026: a cliente não aprovou o sombreado da logo */
  }
  .em-mark .dot{ padding:0 0.06em; opacity:0.9; }

  .logo-lockup{
    display:inline-flex;
    align-items:center;
    gap:0;
    font-size:16px;
  }
  .logo-lockup .em-mark{ font-size:2.6em; }
  .lockup-divider{
    width:1px;
    align-self:stretch;
    background:var(--dourado);
    opacity:0.55;
    margin:0 0.55em;
  }
  .lockup-text{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.32em;
  }
  .lockup-text .l1{
    font-family:'Manrope', sans-serif;
    font-weight:600;
    font-size:0.44em;
    letter-spacing:0.16em;
    color:var(--dourado);
    white-space:nowrap;
  }
  .lockup-text .l2{
    font-family:'Manrope', sans-serif;
    font-weight:400;
    font-size:0.3em;
    letter-spacing:0.28em;
    color:var(--dourado);
    opacity:0.85;
  }

  /* ---------- NAV ---------- */
  header{
    position:fixed;
    top:0; left:0; right:0;
    height:var(--nav-h);
    z-index:100;
    display:flex;
    align-items:center;
    background:rgba(247,244,236,0);
    transition:background 0.25s ease, box-shadow 0.25s ease, backdrop-filter .25s ease;
  }
  header.scrolled{
    background:rgba(247,244,236,0.9);
    backdrop-filter:blur(14px) saturate(1.1);
    box-shadow:0 1px 0 rgba(36,30,24,0.08);
  }
  .nav-inner{
    width:100%;
    max-width:1180px;
    margin:0 auto;
    padding:0 32px;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .nav-slot{ width:190px; height:36px; position:relative; }

  /* logo fixa NO CANTO desde o início: tamanho constante, nunca encolhe.
     Ao rolar, a barra+texto convergem para dentro do "e·m" (e somem),
     enquanto o "e·m" se desloca para o centro do vão reservado ao menu. */
  #brandMorph{
    position:fixed;
    left:32px;
    top:calc(var(--nav-h) / 2);
    z-index:110;
    pointer-events:auto;
    cursor:pointer;
    will-change:transform;
    font-size:calc(16px * var(--logo-scale, 1.75));
  }
  #brandMorph{ transform:translateY(-50%); }
  #brandMorph .em-mark{ transform:translateX(var(--em-shift, 0px)); }
  /* transform/opacity/filter do divisor e do texto são controlados via JS
     (rAF), quadro a quadro — não usam transição CSS. */

  .nav-links{
    display:flex;
    align-items:center;
    gap:30px;
  }
  .nav-links a{
    font-size:14px;
    color:var(--branco);
    position:relative;
    padding:6px 0;
    transition:color .25s ease;
  }
  .nav-links a::after{
    content:'';
    position:absolute; left:0; bottom:0;
    width:0; height:1px;
    background:var(--dourado-claro);
    transition:width .25s ease;
  }
  .nav-links a:hover::after{ width:100%; }
  .nav-links a:hover{ color:var(--dourado-claro-aa); }
  header.scrolled .nav-links a{ color:var(--tinta); }
  header.scrolled .nav-links a::after{ background:var(--dourado); }
  header.scrolled .nav-links a:hover{ color:var(--dourado); }

  .lang-switch{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    letter-spacing:0.04em;
    color:rgba(251,249,244,0.6);
  }
  header.scrolled .lang-switch{ color:var(--tinta-suave); }
  .lang-switch button{
    color:inherit;
    font-weight:600;
    padding:2px 3px;
    opacity:0.6;
    transition:opacity .2s ease, color .2s ease;
  }
  .lang-switch button.active{ opacity:1; color:var(--dourado-claro-aa); }
  header.scrolled .lang-switch button.active{ color:var(--dourado); }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 24px;
    border-radius:2px;
    font-size:14px;
    letter-spacing:0.02em;
    font-weight:600;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
    white-space:nowrap;
  }
  .btn-dourado{
    background:var(--dourado-botao);
    color:var(--branco);
  }
  .btn-dourado:hover{ transform:translateY(-2px); box-shadow:0 12px 24px -10px rgba(132,108,67,0.55); }
  .btn-outline{
    border:1px solid rgba(251,249,244,0.4);
    color:var(--branco);
  }
  .btn-outline:hover{ border-color:var(--dourado-claro); color:var(--dourado-claro); }
  /* Variante clara do outline, pra CTAs secundários sobre fundo marfim/areia
     (mesma cor já usada no botão outline do banner de cookies) — usada pra
     demover visualmente os CTAs de WhatsApp por tópico/Google/Maps, deixando
     só "Agendar consulta" e o formulário final como ação primária de fato. */
  .btn-secundario{
    background:transparent;
    border:1px solid rgba(36,30,24,0.25);
    color:var(--tinta);
  }
  .btn-secundario:hover{ border-color:var(--dourado); color:var(--dourado); }
  header.scrolled .btn-outline{ border-color:rgba(36,30,24,0.25); color:var(--tinta); }
  header.scrolled .btn-outline:hover{ border-color:var(--dourado); color:var(--dourado); }

  .nav-cta{ display:flex; align-items:center; gap:16px; }
  .nav-cta .btn-dourado,
  .mobile-menu .btn-dourado{ border-radius:0; padding:9px 18px; font-size:13px; }

  .menu-toggle{
    display:none;
    width:44px; height:44px;
    padding:12px 9px;
    box-sizing:border-box;
    position:relative;
    flex-direction:column;
    justify-content:space-between;
  }
  .menu-toggle span{
    height:1.5px; width:100%;
    background:var(--branco);
    transition:transform .25s ease, opacity .25s ease, background .25s ease;
  }
  header.scrolled .menu-toggle span{ background:var(--escuro); }
  .menu-toggle.open span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
  .menu-toggle.open span:nth-child(2){ opacity:0; }
  .menu-toggle.open span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:92vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:radial-gradient(circle at 50% 18%, var(--escuro-2) 0%, var(--escuro) 62%, var(--escuro-fundo) 100%);
    color:var(--branco);
    padding:140px 32px 100px;
    overflow:hidden;
  }

  .hero-eyebrow{
    font-size:13px;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:var(--dourado-claro-aa);
    margin-bottom:30px;
    position:relative;
    z-index:2;
  }
  .hero .headline{
    font-family:'Fraunces',serif;
    font-size:clamp(28px, 4.4vw, 54px);
    font-weight:400;
    line-height:1.18;
    max-width:850px;
    margin:0 auto 26px;
    color:var(--branco);
    position:relative; z-index:2;
  }
  .hero .headline em{
    font-style:italic;
    color:var(--dourado-claro-aa);
  }

  /* Carrossel de frases do hero (troca automática, sem controle manual — site.js) */
  .hero-frases{
    display:grid;
    position:relative; z-index:2;
  }
  .hero-frase{
    grid-area:1 / 1;
    opacity:0;
    transition:opacity 1.6s ease;
    pointer-events:none;
  }
  .hero-frase.frase-ativa{
    opacity:1;
    pointer-events:auto;
  }
  @media (prefers-reduced-motion: reduce){
    .hero-frase{ transition:none; }
  }
  .hero p.lead{
    max-width:560px;
    margin:0 auto 46px;
    color:rgba(251,249,244,0.78);
    font-size:17px;
    position:relative; z-index:2;
  }
  .hero-ctas{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    justify-content:center;
    position:relative; z-index:2;
  }
  .scroll-cue{
    position:absolute;
    bottom:38px; left:50%;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    color:rgba(251,249,244,0.55);
    font-size:11px;
    letter-spacing:0.24em;
    text-transform:uppercase;
    z-index:2;
  }
  .scroll-cue .linha{
    width:1px; height:34px;
    background:linear-gradient(to bottom, rgba(251,249,244,0.7), transparent);
    animation:desliza 2.2s ease-in-out infinite;
  }
  @keyframes desliza{
    0%{ transform:scaleY(0.3); transform-origin:top; opacity:0.4; }
    50%{ transform:scaleY(1); transform-origin:top; opacity:1; }
    100%{ transform:scaleY(0.3); transform-origin:bottom; opacity:0.4; }
  }

  /* Cue "Ver Mapa" na seção Localização (pisca apontando pro mapa) */
  .mapa-cue{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:26px;
    font-size:11.5px;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--dourado-escuro);
  }
  .mapa-cue-seta{
    font-size:22px;
    line-height:0.6;
    color:var(--dourado);
    animation:piscarPerfil 2.8s ease-in-out 4;
  }
  /* Variante atual (index-19+): mesmo layout do "Role" do hero — texto em coluna
     sobre a linha que desliza, sem a seta ⌄. O card "Como chegar" tem fundo escuro,
     então a cor é marfim cheio (o dourado-escuro da versão antiga sumia no marrom —
     era isso que parecia "apagado"). As regras acima ficam pros checkpoints antigos,
     que ainda usam a versão com seta. */
  .mapa-cue.cue-role{
    flex-direction:column;
    align-items:center;
    gap:10px;
    font-size:11.5px;
    letter-spacing:0.24em;
    color:var(--marfim);
  }
  .mapa-cue.cue-role .linha{
    width:1px; height:34px;
    background:linear-gradient(to bottom, rgba(251,249,244,0.7), transparent);
    animation:desliza 2.2s ease-in-out infinite;
  }

  /* Link "Outras Dúvidas" abaixo do FAQ da home */
  .faq-outras{
    text-align:center;
    margin-top:36px;
  }

  /* Obs. pra médicos/representantes/candidatos na seção Fale Conosco da home */
  .form-obs{
    max-width:600px;
    margin:20px auto 0;
    text-align:center;
    font-size:13.5px;
    line-height:1.6;
    color:var(--tinta-suave);
    background:rgba(147,121,76,0.10);
    border:1px solid rgba(147,121,76,0.25);
    border-radius:8px;
    padding:12px 18px;
  }
  .form-obs a{
    color:var(--dourado-escuro);
    text-decoration:underline;
    font-weight:600;
  }

  /* ---------- SEÇÕES GERAIS ---------- */
  section{ padding:120px 0; position:relative; }
  .sand{ background:var(--areia); }
  .eyebrow{
    font-size:12.5px;
    letter-spacing:0.26em;
    text-transform:uppercase;
    color:var(--dourado);
    font-weight:700;
    margin-bottom:18px;
    display:block;
    position:relative; z-index:1;
  }
  .titulo-secao{
    font-size:clamp(28px, 3.4vw, 42px);
    font-weight:400;
    max-width:640px;
    margin-bottom:22px;
    position:relative; z-index:1;
  }
  .texto-secao{
    max-width:560px;
    color:var(--tinta-suave);
    font-size:16.5px;
    position:relative; z-index:1;
  }

  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity 0.8s cubic-bezier(.22,.61,.36,1), transform 0.8s cubic-bezier(.22,.61,.36,1);
  }
  .reveal.on{ opacity:1; transform:translateY(0); }

  /* ---------- QUEM SOMOS ---------- */
  .quem-somos .grid{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:72px;
    align-items:start;
    margin-top:56px;
    position:relative; z-index:1;
  }
  .medalhao{
    position:relative;
    aspect-ratio:1/1.12;
    max-width:380px;
    border-radius:4px;
    background:linear-gradient(155deg, var(--escuro) 0%, var(--escuro-2) 55%, var(--escuro-fundo) 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  .medalhao .em-mark{ font-size:52px; }
  .medalhao img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 20%;
  }
  .medalhao::after{
    content:'';
    position:absolute; inset:14px;
    border:2px solid var(--escuro-2);
    border-radius:2px;
    pointer-events:none;
  }
  .medalhao-cred{
    position:absolute;
    left:0; right:0; bottom:0;
    padding:22px 26px;
    background:linear-gradient(to top, rgba(23,15,9,0.92), transparent);
    color:var(--branco);
  }
  .medalhao-cred .nome{ font-family:'Fraunces',serif; font-size:19px; margin-bottom:3px; color:var(--branco); }
  .medalhao-cred .cargo{ font-size:12.5px; color:var(--dourado-claro); letter-spacing:0.06em; }

  .quem-somos-texto p{
    color:var(--tinta-suave);
    margin-bottom:20px;
    font-size:16.5px;
  }
  .assinatura{
    margin-top:32px;
    padding-top:28px;
    border-top:1px solid rgba(36,30,24,0.14);
    display:flex;
    gap:28px;
    flex-wrap:wrap;
  }
  .assinatura-item .num{ font-family:'Fraunces',serif; font-size:30px; color:var(--dourado); display:block; }
  .assinatura-item .label{ font-size:12.5px; color:var(--tinta-suave); letter-spacing:0.03em; }

  /* ---------- ESPECIALIDADES ---------- */
  .cards-servicos{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:2px;
    margin-top:60px;
    background:rgba(36,30,24,0.08);
    position:relative; z-index:1;
  }
  .card-servico{
    display:block;
    background:var(--marfim);
    padding:46px 38px;
    transition:background .3s ease;
  }
  .card-servico:hover{ background:var(--branco); }
  .card-servico .icone{
    width:46px; height:46px;
    margin-bottom:28px;
    color:var(--dourado);
  }
  .card-servico h3{
    font-size:21px;
    font-weight:500;
    margin-bottom:14px;
  }
  .card-servico p{
    color:var(--tinta-suave);
    font-size:15.5px;
    margin-bottom:18px;
  }
  .lista-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .lista-tags span{
    font-size:12px;
    color:var(--dourado-escuro);
    background:rgba(147,121,76,0.14);
    padding:5px 11px;
    border-radius:20px;
    letter-spacing:0.01em;
  }

  /* Cards de especialidade com verso (flip 3D no hover mostrando os serviços).
     Tudo escopado em .tem-verso: os index-N antigos usam a estrutura simples
     de .card-servico e não podem ser afetados por estas regras. */
  .card-servico.tem-verso{
    padding:0;
    background:transparent;
    perspective:1200px;
  }
  .card-servico.tem-verso:hover{ background:transparent; }
  .card-servico.tem-verso .card-flip{
    position:relative;
    height:100%;
    transform-style:preserve-3d;
    transition:transform .65s cubic-bezier(.35,.1,.25,1);
  }
  .card-servico.tem-verso .card-face{
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }
  .card-servico.tem-verso .card-frente{
    position:relative;
    height:100%;
    background:var(--marfim);
    padding:46px 38px;
    transition:background .3s ease;
  }
  .card-servico.tem-verso .card-verso{
    position:absolute;
    inset:0;
    transform:rotateY(180deg);
    background:var(--marfim);
    padding:46px 38px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .card-servico.tem-verso.virado .card-flip{ transform:rotateY(180deg); }
  @media (hover:hover) and (pointer:fine){
    .card-servico.tem-verso:hover .card-flip{ transform:rotateY(180deg); }
  }
  @media (prefers-reduced-motion:reduce){
    .card-servico.tem-verso .card-flip{ transition:none; }
  }
  .card-servico.tem-verso .card-verso .icone{ margin-bottom:22px; }
  .card-servico.tem-verso .card-verso h3{ margin-bottom:18px; }
  .verso-lista{
    list-style:none;
    margin:0; padding:0;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .verso-lista li{
    font-size:14.5px;
    line-height:1.35;
    color:var(--tinta);
    padding-left:18px;
    position:relative;
  }
  .verso-lista li::before{
    content:'›';
    position:absolute;
    left:0; top:0;
    color:var(--dourado);
  }

  /* ---------- EQUIPE ---------- */
  .equipe-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
    margin-top:56px;
    position:relative; z-index:1;
  }
  .equipe-card{
    background:var(--branco);
    border:1px solid rgba(36,30,24,0.08);
    border-radius:16px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .equipe-card:hover{ transform:translateY(-4px); box-shadow:var(--sombra); }
  [data-href]{ cursor:pointer; }
  .equipe-foto{
    aspect-ratio:1/1;
    background:linear-gradient(155deg, var(--escuro) 0%, var(--escuro-2) 55%, var(--escuro-fundo) 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  .equipe-foto .em-mark{ font-size:38px; }
  .equipe-foto img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .equipe-info{
    padding:26px 26px 30px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    flex:1;
  }
  .equipe-info .nome{ font-family:'Fraunces',serif; font-size:19px; margin-bottom:4px; color:var(--dourado-escuro); }
  .equipe-info .cargo{ font-size:13px; color:var(--tinta-suave); margin-bottom:4px; }
  /* Credencial visível na home, não só no perfil individual — a auditoria de
     22/07/2026 apontou que o carrossel da home não mostrava CRM/RQE, a
     "escada de crença" passo 2 do PRODUCT.md, então o visitante só via isso
     depois de clicar no perfil. */
  .equipe-info .crm{ font-size:11px; color:var(--dourado-escuro); letter-spacing:0.02em; margin-bottom:16px; }
  .perfil{
    align-self:flex-end;
    margin-top:auto;
    font-size:13px;
    font-weight:600;
    color:var(--dourado);
    display:inline-flex;
    align-items:center;
    gap:6px;
    animation:piscarPerfil 2.8s ease-in-out 4;
  }
  @keyframes piscarPerfil{
    0%, 100%{ opacity:1; }
    50%{ opacity:0.45; }
  }
  @media (prefers-reduced-motion: reduce){
    .mapa-cue-seta, .perfil, .carrossel-seta, .memorias-linha .linha-seta-fim, .memoria-seta{
      animation:none;
    }
  }

  /* ---------- CARROSSEL DA EQUIPE ---------- */
  .equipe-carrossel{ position:relative; margin-top:56px; }
  .equipe-carrossel-viewport{ overflow:hidden; }
  .equipe-carrossel-track{
    display:flex;
    gap:28px;
    transition:transform 1.1s cubic-bezier(.22,.61,.36,1);
  }
  .equipe-carrossel-track .equipe-card{
    flex:0 0 calc((100% - 84px) / 4);
    min-width:0;
  }
  .carrossel-seta{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:none;
    box-shadow:none;
    font-size:30px;
    font-weight:600;
    line-height:1;
    color:var(--dourado);
    z-index:2;
    animation:piscarPerfil 2.8s ease-in-out 4;
    transition:color .2s ease;
  }
  .carrossel-seta:hover{ color:var(--dourado-escuro); }
  .carrossel-seta.prev{ left:-34px; }
  .carrossel-seta.next{ right:-34px; }

  @media (max-width: 980px){
    .equipe-carrossel-track .equipe-card{ flex:0 0 calc((100% - 28px) / 2); }
  }
  @media (max-width: 760px){
    .equipe-carrossel-track .equipe-card{ flex:0 0 100%; }
    .carrossel-seta{ display:none; }
  }
  a.perfil:hover{ color:var(--dourado-escuro); }
  .perfil.perfil-bloqueado{
    color:var(--tinta-suave);
    animation:none;
    cursor:not-allowed;
    opacity:0.65;
  }
  .equipe-card.em-breve{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:30px;
    background:var(--areia);
    border-style:dashed;
    border-color:rgba(36,30,24,0.18);
  }
  .equipe-card.em-breve p{ color:var(--tinta-suave); font-size:14px; max-width:220px; }

  /* ---------- DIFERENCIAIS ---------- */
  .diferenciais{
    background:var(--escuro);
    color:var(--branco);
  }
  .diferenciais .eyebrow{ color:var(--dourado-claro); }
  .diferenciais .titulo-secao{ color:var(--branco); }
  .diferenciais .texto-secao{ color:rgba(251,249,244,0.72); }
  .dif-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    margin-top:64px;
    background:rgba(251,249,244,0.12);
    position:relative; z-index:1;
  }
  .dif-item{
    padding:40px 30px;
    background:var(--escuro);
  }
  .dif-item .n{
    font-family:'Fraunces',serif;
    font-size:15px;
    color:var(--dourado-claro);
    margin-bottom:20px;
    display:block;
  }
  .dif-item h4{
    font-family:'Fraunces',serif;
    font-weight:500;
    font-size:19px;
    color:var(--branco);
    margin-bottom:12px;
  }
  .dif-item p{ font-size:14.5px; color:rgba(251,249,244,0.66); }
  /* Variante pra grades com 6 itens (valores da página Quem Somos): 3 colunas fecham
     2 fileiras exatas — na grade de 4 colunas sobravam 2 células vazias claras.
     Os overrides de 980/760px repetem os da .dif-grid base porque .dif-grid.seis
     tem especificidade maior e senão travaria em 3 colunas no mobile. */
  .dif-grid.seis{ grid-template-columns:repeat(3,1fr); }
  @media (max-width: 980px){ .dif-grid.seis{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width: 760px){ .dif-grid.seis{ grid-template-columns:1fr; } }

  /* ---------- BLOG ---------- */
  .blog-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
    margin-top:56px;
    position:relative; z-index:1;
  }
  .blog-card{
    display:block;
    background:var(--branco);
    border:1px solid rgba(36,30,24,0.08);
    border-radius:16px;
    overflow:hidden;
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .blog-card:hover{ transform:translateY(-4px); box-shadow:var(--sombra); }
  .blog-card-capa{
    aspect-ratio:16/10;
    background:linear-gradient(155deg, var(--escuro) 0%, var(--escuro-2) 55%, var(--escuro-fundo) 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  .blog-card-capa .em-mark{ font-size:32px; }
  .blog-card-capa img{ width:100%; height:100%; object-fit:cover; display:block; }
  .blog-card-corpo{ padding:24px 26px 28px; }
  .blog-card-meta{ font-size:12.5px; color:var(--tinta-suave); margin-bottom:10px; }
  .blog-card-titulo{
    font-family:'Fraunces',serif;
    font-weight:500;
    font-size:19px;
    color:var(--dourado-escuro);
    margin-bottom:10px;
    line-height:1.35;
  }
  .blog-card-resumo{ font-size:14px; color:var(--tinta-suave); line-height:1.6; }
  .blog-vazio{
    grid-column:1/-1;
    text-align:center;
    color:var(--tinta-suave);
    font-size:15px;
    padding:24px 0;
  }
  @media (max-width: 980px){
    .blog-grid{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width: 760px){
    .blog-grid{ grid-template-columns:1fr; }
  }

  /* ---------- PÁGINA DE POST DO BLOG ---------- */
  .blog-post-capa{
    max-width:900px;
    margin:-60px auto 0;
    aspect-ratio:16/8;
    border-radius:4px;
    background:linear-gradient(155deg, var(--escuro) 0%, var(--escuro-2) 55%, var(--escuro-fundo) 100%);
    display:flex; align-items:center; justify-content:center;
    position:relative; z-index:2;
    box-shadow:var(--sombra);
    overflow:hidden;
  }
  .blog-post-capa .em-mark{ font-size:44px; }
  .blog-post-capa img{ width:100%; height:100%; object-fit:cover; display:block; }
  .blog-post-corpo{ max-width:720px; margin:0 auto; padding:80px 0 220px; }
  .blog-post-corpo h3{ font-family:'Fraunces',serif; font-weight:500; font-size:21px; margin:36px 0 14px; color:var(--dourado-escuro); }
  .blog-post-corpo p{ color:var(--tinta-suave); font-size:16.5px; line-height:1.75; margin-bottom:18px; }
  .blog-post-corpo ul{ margin:0 0 18px; padding-left:22px; list-style:disc; }
  .blog-post-corpo li{ color:var(--tinta-suave); font-size:16.5px; line-height:1.75; margin-bottom:8px; }
  .blog-post-corpo li::marker{ color:var(--dourado); }
  .blog-post-corpo blockquote{
    margin:32px 0; padding:22px 28px;
    border-left:3px solid var(--dourado);
    background:var(--areia);
    font-family:'Fraunces',serif; font-style:italic; font-size:18px; color:var(--tinta);
  }
  .blog-post-corpo blockquote cite{ display:block; margin-top:10px; font-family:'Manrope',sans-serif; font-style:normal; font-size:13px; font-weight:600; color:var(--dourado-escuro); }

  /* ---------- SELO DE VERIFICADO (sobreposto na borda do card do autor) ---------- */
  .post-rodape{ position:relative; max-width:600px; margin:64px auto 0; }
  .selo-verificado{
    position:absolute;
    left:-135px;
    top:104px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    width:210px;
    z-index:2;
  }
  .selo-moldura{
    position:relative;
    width:150px; height:150px;
    border-radius:50%;
    overflow:hidden;
    transform:rotate(-8deg);
    transition:transform .35s ease, filter .35s ease;
    filter:brightness(1) drop-shadow(0 2px 6px rgba(52,27,13,0.35));
  }
  .selo-moldura svg{ width:100%; height:100%; display:block; }
  .selo-verificado:hover .selo-moldura{
    transform:rotate(-8deg) scale(1.05);
    filter:brightness(1.08) saturate(1.05) drop-shadow(0 0 10px rgba(194,168,119,0.4));
  }
  .selo-moldura::after{
    content:'';
    position:absolute;
    top:-10%; left:-50%;
    width:14%; height:120%;
    background:linear-gradient(80deg, transparent 0%, rgba(247,244,236,0.16) 42%, rgba(247,244,236,0.32) 50%, rgba(247,244,236,0.16) 58%, transparent 100%);
    transform:translateX(0%);
    transition:transform 1.8s cubic-bezier(.22,.61,.36,1);
    pointer-events:none;
  }
  .selo-verificado:hover .selo-moldura::after{ transform:translateX(280%); }
  .selo-moldura .selo-textos{
    transform-box:view-box;
    transform-origin:100px 100px;
    animation:girarSelo 26s linear infinite;
  }
  @keyframes girarSelo{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
  @media (prefers-reduced-motion: reduce){
    .selo-moldura .selo-textos{ animation:none; }
    .selo-verificado:hover .selo-moldura{ transform:rotate(-8deg); }
    .selo-moldura::after{ transition:none; }
  }
  .selo-texto{
    margin-top:12px;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .selo-label{
    font-family:'Manrope',sans-serif;
    font-size:10px;
    font-weight:700;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--dourado);
  }
  .selo-nome{
    font-family:'Fraunces',serif;
    font-weight:500;
    font-size:17px;
    line-height:1.3;
    color:var(--dourado-escuro);
    margin-top:4px;
    white-space:nowrap;
  }
  .selo-divisor{
    width:26px; height:1px;
    background:var(--dourado-claro);
    margin:9px 0;
    opacity:0.7;
  }
  .selo-meta{
    font-size:11.5px;
    line-height:1.55;
    color:var(--tinta-suave);
    letter-spacing:0.01em;
  }
  .selo-meta span{ display:block; }

  /* Nota "Mostrando posts de X" (blog.html?autor=slug) */
  .blog-filtro-nota{
    text-align:center;
    color:var(--tinta-suave);
    font-size:14.5px;
    margin:-18px 0 34px;
  }
  .blog-filtro-nota strong{ color:var(--dourado-escuro); font-weight:600; }
  .blog-filtro-nota .perfil{ margin-left:4px; }

  /* Temas sobre os quais o profissional escreve (seção Publicações do perfil) */
  .blog-temas{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    margin:6px 0 34px;
  }
  .blog-temas-rotulo{
    font-size:11px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--dourado);
    font-weight:700;
  }
  .blog-temas .lista-tags{ justify-content:center; }

  /* Botões da seção Publicações do perfil */
  .blog-perfil-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:14px 46px;
    margin-top:38px;
  }

  /* Links "ver mais" no fim do texto do post (antes do card do autor) */
  .post-mais-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:14px 46px;
    margin-top:48px;
  }

  /* ---------- SOBRE O AUTOR (fim de post do blog) ---------- */
  .post-autor{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:20px;
    padding:26px 28px;
    background:var(--branco);
    border:1px solid rgba(36,30,24,0.08);
    border-radius:10px;
    box-shadow:var(--sombra);
    text-align:left;
  }
  .post-autor-avatar{
    width:64px; height:64px;
    border-radius:50%;
    flex-shrink:0;
    overflow:hidden;
    background:linear-gradient(155deg, var(--escuro) 0%, var(--escuro-2) 55%, var(--escuro-fundo) 100%);
    display:flex; align-items:center; justify-content:center;
  }
  .post-autor-avatar img{ width:100%; height:100%; object-fit:cover; }
  .post-autor-avatar .em-mark{ font-size:22px; }
  .post-autor-corpo{ flex:1; min-width:0; }
  .post-autor-eyebrow{ font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--dourado); font-weight:700; margin-bottom:4px; }
  .post-autor-nome{ font-family:'Fraunces',serif; font-size:18px; color:var(--dourado-escuro); }
  .post-autor-cargo{ font-size:13px; color:var(--tinta-suave); margin-bottom:10px; }
  .post-autor-corpo .perfil{ align-self:auto; }
  .post-autor-social{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    flex-shrink:0;
    padding-left:20px;
    border-left:1px solid rgba(36,30,24,0.1);
  }
  .post-autor-social a{ color:var(--dourado); }
  .post-autor-social a:hover{ color:var(--dourado-escuro); }
  .post-autor-social svg{ width:18px; height:18px; }
  /* entre ~520px e ~860px o post fica mais estreito que o vão de 125px que o
     selo pendura pra fora — encosta o selo pra dentro pra ele não ser cortado
     na borda da tela (body tem overflow-x:hidden) */
  @media (max-width: 860px){
    .selo-verificado{ left:-20px; }
  }
  @media (max-width: 520px){
    .post-rodape{ padding-top:50px; }
    .post-autor{ flex-direction:column; text-align:center; padding-left:28px; }
    .post-autor-social{
      flex-direction:row;
      border-left:none;
      border-top:1px solid rgba(36,30,24,0.1);
      padding-left:0;
      padding-top:16px;
      margin-top:4px;
      width:100%;
      justify-content:center;
    }
    .selo-verificado{
      left:50%;
      top:0;
      transform:translate(-50%, -50%);
    }
  }

  /* ---------- INFUSÃO ----------
     Catálogo gerado por dados (assets/infusoes-data.js + infusoes.js, mesmo
     espírito do BLOG_INDEX/MEMORIAS_MARCOS): grid auto-fit porque o número de
     infusões vai crescer (usuário ainda vai mandar a lista completa). Reaproveita
     o card simples .card-servico (sem .tem-verso) já usado em Especialidades. */
  .infusao-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:2px;
    margin-top:60px;
    background:rgba(36,30,24,0.08);
    position:relative; z-index:1;
  }
  .infusao-nota{
    text-align:center;
    color:var(--tinta-suave);
    font-size:14.5px;
    margin-top:28px;
  }
  .infusao-cta{ text-align:center; margin-top:26px; }
  .infusao-em-breve{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:10px;
  }
  .infusao-em-breve-badge{
    font-size:11px;
    letter-spacing:0.2em;
    text-transform:uppercase;
    font-weight:700;
    color:var(--dourado-escuro);
  }
  .infusao-em-breve p{
    color:var(--tinta-suave);
    font-size:14.5px;
    line-height:1.5;
    max-width:220px;
  }
  .infusao-em-breve .perfil{ align-self:center; margin-top:2px; }

  /* ---------- CONVÊNIOS ---------- */
  .convenios-wrap{
    max-width:760px;
    margin:0 auto;
    text-align:center;
    position:relative; z-index:1;
  }
  .convenios-wrap .texto-secao{ margin-left:auto; margin-right:auto; margin-bottom:18px; }
  .convenios-wrap .btn{ margin-top:26px; }
  .convenios-form{
    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap;
    margin-top:26px;
  }
  .convenios-form input{
    flex:1 1 260px;
    max-width:340px;
    padding:13px 15px;
    border:1px solid rgba(36,30,24,0.18);
    border-radius:2px;
    background:var(--marfim);
    color:var(--tinta);
  }
  .convenios-form input:focus{ outline:none; border-color:var(--dourado); }
  .convenios-form .btn{ margin-top:0; }

  /* ---------- FAQ (accordion com <details>, sem JS) ---------- */
  .faq-lista{
    max-width:760px;
    margin:56px auto 0;
    position:relative; z-index:1;
  }
  .faq-lista details{
    background:var(--branco);
    border:1px solid rgba(36,30,24,0.08);
    border-radius:10px;
    margin-bottom:14px;
    overflow:hidden;
  }
  .faq-lista summary{
    cursor:pointer;
    padding:20px 24px;
    font-weight:600;
    font-size:15.5px;
    color:var(--tinta);
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
  }
  .faq-lista summary::-webkit-details-marker{ display:none; }
  .faq-lista summary::after{
    content:'+';
    font-family:'Fraunces',serif;
    font-size:22px;
    line-height:1;
    color:var(--dourado);
    transition:transform .25s ease;
    flex-shrink:0;
  }
  .faq-lista details[open] summary::after{ transform:rotate(45deg); }
  .faq-lista details p{
    padding:0 24px 20px;
    color:var(--tinta-suave);
    font-size:15px;
    line-height:1.7;
  }

  /* ---------- BOTÃO FLUTUANTE DE WHATSAPP ---------- */
  /* ---------- BANNER DE COOKIES ---------- */
  .cookies-banner{
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:95; /* abaixo do menu mobile (99) e header (100) */
    background:var(--branco);
    border-top:2px solid var(--dourado);
    box-shadow:0 -10px 30px -10px rgba(23,15,9,0.25);
    padding:18px 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    flex-wrap:wrap;
    transform:translateY(100%);
    opacity:0;
    transition:transform .4s cubic-bezier(0.16,1,0.3,1), opacity .4s cubic-bezier(0.16,1,0.3,1);
  }
  .cookies-banner.on{
    transform:translateY(0);
    opacity:1;
  }
  .cookies-banner p{
    margin:0;
    font-size:13.5px;
    color:var(--tinta-suave);
    line-height:1.6;
    max-width:760px;
  }
  .cookies-banner p a{
    color:var(--dourado-escuro);
    text-decoration:underline;
  }
  .cookies-banner-botoes{
    display:flex;
    gap:10px;
    flex-shrink:0;
  }
  .cookies-banner-botoes .btn{
    padding:9px 18px;
    font-size:13px;
  }
  /* .btn-outline por padrão é pensado pro header escuro (texto/borda claros) —
     aqui o fundo é claro, então precisa da variante escura (mesmas cores que
     header.scrolled .btn-outline já usa) */
  .cookies-banner-botoes .btn-outline{
    border-color:rgba(36,30,24,0.25);
    color:var(--tinta);
  }
  .cookies-banner-botoes .btn-outline:hover{
    border-color:var(--dourado);
    color:var(--dourado);
  }
  @media(max-width:760px){
    .cookies-banner{ padding:16px; flex-direction:column; align-items:stretch; gap:14px; }
    .cookies-banner-botoes{ justify-content:flex-end; }
  }
  @media(prefers-reduced-motion:reduce){
    .cookies-banner{ transition:none; }
  }

  /* ---------- REDES SOCIAIS ---------- */
  .redes-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:20px;
    margin-top:56px;
    position:relative; z-index:1;
  }
  .rede-item{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    width:128px;
    padding:26px 16px;
    background:var(--branco);
    border:1px solid rgba(36,30,24,0.08);
    border-radius:8px;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  a.rede-item:hover{ transform:translateY(-4px); box-shadow:var(--sombra); }
  .rede-icone{
    width:44px; height:44px;
    border-radius:50%;
    background:linear-gradient(155deg, var(--escuro) 0%, var(--escuro-2) 55%, var(--escuro-fundo) 100%);
    color:var(--branco);
    display:flex; align-items:center; justify-content:center;
  }
  .rede-icone svg{ width:22px; height:22px; }
  .rede-nome{ font-size:13px; font-weight:600; color:var(--tinta); }
  .rede-item.rede-em-breve{ opacity:0.55; cursor:default; }
  .rede-item.rede-em-breve .rede-icone{ background:var(--areia); color:var(--tinta-suave); }
  .rede-em-breve-label{ font-size:11px; color:var(--tinta-suave); margin-top:-6px; }

  /* ---------- LOCALIZAÇÃO ---------- */
  .localizacao .grid{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:0;
    margin-top:56px;
    box-shadow:var(--sombra);
    border-radius:4px;
    overflow:hidden;
    position:relative; z-index:1;
  }
  .loc-info{
    background:var(--escuro);
    color:var(--branco);
    padding:56px 46px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .loc-info h3{ color:var(--branco); font-size:26px; margin-bottom:22px; }
  .loc-linha{
    display:flex;
    gap:16px;
    margin-bottom:22px;
    align-items:flex-start;
  }
  .loc-linha svg{ width:20px; height:20px; flex-shrink:0; margin-top:2px; color:var(--dourado-claro); }
  .loc-linha .rotulo{ font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--dourado-claro-aa); margin-bottom:4px; }
  .loc-linha .valor{ font-size:15.5px; color:rgba(251,249,244,0.9); }
  .loc-info .btn{ margin-top:16px; align-self:flex-start; }
  .mapa-wrap{ position:relative; min-height:420px; background:var(--areia); }
  .mapa-wrap iframe{ width:100%; height:100%; min-height:420px; border:0; filter:saturate(0.85) contrast(1.02); }

  /* ---------- FORMULÁRIO DE CONTATO ---------- */
  .form-wrap{
    max-width:640px;
    margin:56px auto 0;
    background:var(--branco);
    border-radius:4px;
    padding:44px;
    box-shadow:var(--sombra);
    position:relative; z-index:1;
  }
  .campo{ margin-bottom:22px; }
  .campo label{
    display:block;
    font-size:12.5px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--dourado-escuro);
    font-weight:700;
    margin-bottom:8px;
  }
  .campo input, .campo select, .campo textarea{
    width:100%;
    padding:13px 15px;
    border:1px solid rgba(36,30,24,0.18);
    border-radius:2px;
    background:var(--marfim);
    color:var(--tinta);
  }
  .campo input:focus, .campo select:focus, .campo textarea:focus{
    outline:none;
    border-color:var(--dourado);
  }
  .campo textarea{ resize:vertical; min-height:90px; }
  .form-aviso{
    font-size:13px;
    color:var(--tinta-suave);
    margin-top:16px;
  }
  .form-sucesso{
    display:none;
    margin-top:16px;
    padding:14px 16px;
    background:rgba(147,121,76,0.12);
    border-left:3px solid var(--dourado);
    font-size:14px;
    color:var(--dourado-escuro);
  }
  .form-sucesso.on{ display:block; }

  /* ---------- CONTATO / FOOTER ---------- */
  footer{
    background:var(--escuro-fundo);
    color:rgba(251,249,244,0.7);
    padding:90px 0 34px;
    position:relative;
  }
  .footer-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr;
    gap:60px;
    padding-bottom:60px;
    border-bottom:1px solid rgba(251,249,244,0.1);
    position:relative; z-index:1;
  }
  .footer-logo{ display:flex; align-items:center; margin-bottom:22px; }
  .footer-logo .em-mark{ font-size:30px; }
  .footer-brand p{ font-size:14.5px; max-width:320px; line-height:1.7; }
  .footer-slogan{
    font-family:'Fraunces',serif;
    font-style:italic;
    font-size:16px;
    color:var(--dourado-claro-aa);
    margin-bottom:12px;
    max-width:280px;
  }
  .footer-pagamentos{ margin-top:24px; }
  .footer-pagamentos-titulo{ display:block; font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(251,249,244,0.42); margin-bottom:12px; }
  .footer-pagamentos-lista{ display:flex; flex-wrap:wrap; gap:16px; }
  .pagamento-item{ display:flex; align-items:center; gap:7px; font-size:13px; color:rgba(251,249,244,0.65); }
  .pagamento-item svg{ width:18px; height:18px; flex-shrink:0; }
  footer h5{
    font-size:12.5px;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--dourado-claro);
    margin-bottom:22px;
  }
  footer ul li{ margin-bottom:13px; font-size:14.5px; }
  footer ul li a:hover{ color:var(--branco); }
  .footer-base{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:14px;
    padding-top:30px;
    font-size:13px;
    color:rgba(251,249,244,0.42);
    position:relative; z-index:1;
  }
  .footer-social{ display:flex; flex-wrap:wrap; gap:16px; }
  .footer-social a{ color:rgba(251,249,244,0.6); transition:color .2s ease; }
  .footer-social a:hover{ color:var(--dourado-claro); }
  .footer-social-em-breve{ color:rgba(251,249,244,0.3); cursor:default; }
  /* Identificação obrigatória (Resolução CFM 2.336/2023): Diretor(a) Técnico(a) Médico(a) + CRM */
  .footer-legal{
    margin-top:22px;
    padding-top:18px;
    border-top:1px solid rgba(251,249,244,0.1);
    text-align:center;
    font-size:12.5px;
    line-height:1.55;
    color:rgba(251,249,244,0.5);
    position:relative; z-index:1;
  }
  /* Espaço reservado pra assinatura do criador do site (conteúdo ainda não definido) */
  .footer-assinatura{
    margin-top:16px;
    text-align:center;
    font-size:12px;
    letter-spacing:0.04em;
    color:rgba(251,249,244,0.38);
    position:relative; z-index:1;
    min-height:1px;
  }
  .footer-assinatura a{ color:rgba(251,249,244,0.55); }
  .footer-assinatura a:hover{ color:var(--dourado-claro); }
  /* Assinatura do criador: "Criado por Rodrigo Costa • [brasão RC]" (brasão enviado em 12/07/2026,
     fundo branco removido por cor — original intacto na pasta Imagens do usuário) */
  .assinatura-sep{ color:var(--dourado-claro); margin:0 3px; }
  .assinatura-brasao{
    height:30px; width:auto;
    display:inline-block;
    vertical-align:middle;
    position:relative; top:-2px;
  }

  /* ---------- RESPONSIVO ---------- */
  /* Em telas até ~1460px a logo completa (~330px) invade o início dos links do
     menu (o .nav-slot reservava só 190px). Abaixo disso: logo um pouco menor e
     vão alargado pra 250px — mesmo valor do GUTTER_WIDTH usado pelo site.js. */
  @media (max-width: 1500px){
    #brandMorph{ --logo-scale:1.3; }
    .nav-slot{ width:250px; }
    .nav-links{ gap:20px; }
  }
  @media (max-width: 980px){
    .quem-somos .grid{ grid-template-columns:1fr; gap:44px; }
    .medalhao{ max-width:340px; margin:0 auto; }
    .cards-servicos{ grid-template-columns:repeat(2, 1fr); }
    .equipe-grid{ grid-template-columns:1fr 1fr; }
    .avaliacoes-grid{ grid-template-columns:1fr; }
    .dif-grid{ grid-template-columns:repeat(2,1fr); }
    .localizacao .grid{ grid-template-columns:1fr; }
    .footer-grid{ grid-template-columns:1fr; gap:40px; }
  }
  @media (max-width: 760px){
    /* Barra de topo fica só com a logo + hambúrguer no mobile — o botão
       "Agendar consulta" já existe duplicado dentro do #mobileMenu (o
       hambúrguer abre e ele está lá), então não perde a ação, só some da
       barra apertada. Sem isso, a logo (com o texto "Dra. Emanuela
       Meireles") e o botão brigavam por espaço e chegavam a se sobrepor em
       telas estreitas (reportado testando num celular real). */
    .nav-links, .nav-cta .btn-outline, .nav-cta .lang-switch, .nav-cta .btn-dourado{ display:none; }
    .menu-toggle{ display:flex; }
    .nav-cta{ gap:12px; }
    /* Logo centralizada no mobile (pedido do usuário) — sem vão de menu pra
       "viajar" até ele, então também trava o deslocamento lateral no scroll
       (ver GUTTER/mobile em site.js, medir()). */
    #brandMorph{ left:50%; transform:translateX(-50%) translateY(-50%); }
    .dif-grid{ grid-template-columns:1fr; }
    .equipe-grid{ grid-template-columns:1fr; }
    .cards-servicos{ grid-template-columns:1fr; }
    section{ padding:88px 0; }
    .hero{ padding-top:120px; }
    #brandMorph{ --logo-scale:1.2; }
    .form-wrap{ padding:30px 22px; }
    /* Títulos longos em português "quebravam" em 3-4 linhas no celular — o
       piso do clamp() (pensado pra tablet/desktop) não encolhia mais que
       isso pra telas de ~375px. Reduzido só aqui, pra encurtar a quebra de
       linha sem perder a hierarquia de título (reportado testando num
       celular real: "os textos continuam grandes"). */
    .hero .headline{ font-size:clamp(22px, 7vw, 30px); }
    .titulo-secao{ font-size:clamp(20px, 6vw, 26px); }
  }

  .mobile-menu{
    position:fixed;
    inset:0;
    background:var(--escuro);
    z-index:99;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:26px;
    transform:translateY(-100%);
    transition:transform .35s ease;
  }
  .mobile-menu.open{ transform:translateY(0); }
  .mobile-menu a{
    font-family:'Fraunces',serif;
    font-size:26px;
    color:var(--branco);
  }
  .mobile-menu .btn{ margin-top:6px; }
  .mobile-menu .lang-switch{ color:rgba(251,249,244,0.6); font-size:13px; margin-top:6px; }

  a:focus-visible, button:focus-visible{
    outline:2px solid var(--dourado);
    outline-offset:3px;
  }

  /* Link "pular pro conteúdo" — invisível até receber foco por teclado, pra
     não obrigar quem navega via Tab/leitor de tela a passar pelos 6 links do
     menu + CTA + seletor de idioma + hambúrguer em toda carga de página. */
  .skip-link{
    position:absolute;
    left:-9999px;
    top:0;
    z-index:200;
    background:var(--dourado-botao);
    color:var(--branco);
    padding:12px 20px;
    font-size:14px;
    font-weight:600;
    border-radius:0 0 4px 0;
  }
  .skip-link:focus{ left:0; }

  /* Botão flutuante de WhatsApp — só aparece ≤760px (ver regra abaixo). No
     desktop o CTA do header já fica sempre visível, então seria redundante. */
  .whatsapp-flutuante{
    display:none;
    position:fixed;
    right:16px;
    bottom:16px;
    width:56px; height:56px;
    border-radius:50%;
    background:var(--dourado-botao);
    align-items:center;
    justify-content:center;
    color:var(--branco);
    box-shadow:0 8px 20px -6px rgba(23,15,9,0.4);
    z-index:90;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .whatsapp-flutuante:hover{ transform:translateY(-2px); box-shadow:0 12px 24px -10px rgba(147,121,76,0.55); }
  .whatsapp-flutuante svg{ width:28px; height:28px; }
  @media (prefers-reduced-motion: reduce){
    .whatsapp-flutuante:hover{ transform:none; }
  }
  @media (max-width: 760px){
    .whatsapp-flutuante{ display:flex; }
  }

/* ---------- PÁGINA DE PERFIL (equipe individual) ---------- */
.perfil-hero{
  position:relative;
  padding:130px 32px 130px;
  background:radial-gradient(circle at 50% 10%, var(--escuro-2) 0%, var(--escuro) 62%, var(--escuro-fundo) 100%);
  color:var(--branco);
  text-align:center;
}
.perfil-voltar{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--dourado-claro);
  margin-bottom:34px;
  position:relative; z-index:2;
}
.perfil-voltar:hover{ color:var(--branco); }
.perfil-hero .medalhao-mini{
  width:120px; height:120px;
  border-radius:50%;
  margin:0 auto 26px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(251,249,244,0.06);
  border:1px solid rgba(194,168,119,0.4);
  position:relative; z-index:2;
  overflow:hidden;
}
.perfil-hero .medalhao-mini .em-mark{ font-size:34px; }
.perfil-hero .medalhao-mini img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.perfil-hero .eyebrow{ color:var(--dourado-claro); position:relative; z-index:2; }
.perfil-hero h1{
  color:var(--branco);
  font-size:clamp(30px, 4vw, 48px);
  font-weight:400;
  margin-bottom:10px;
  position:relative; z-index:2;
}
@media (max-width: 760px){
  /* Mesmo ajuste do .titulo-secao/.hero .headline em style.css — título
     longo quebrando demais no celular. */
  .perfil-hero h1{ font-size:clamp(24px, 7vw, 30px); }
}
.perfil-hero .cargo{
  color:rgba(251,249,244,0.75);
  font-size:15.5px;
  letter-spacing:0.03em;
  position:relative; z-index:2;
}

.perfil-corpo{
  display:grid;
  grid-template-columns:1.3fr 0.9fr;
  gap:64px;
  align-items:start;
  padding:100px 0;
  position:relative; z-index:1;
}
.perfil-corpo h2{ font-size:26px; margin-bottom:22px; }
.perfil-corpo p{ color:var(--tinta-suave); font-size:16.5px; margin-bottom:20px; }

.lista-condicoes{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:10px;
}
.lista-condicoes span{
  font-size:13px;
  color:var(--dourado-escuro);
  background:rgba(147,121,76,0.14);
  padding:8px 16px;
  border-radius:20px;
}

.perfil-lateral{
  background:var(--escuro);
  color:var(--branco);
  border-radius:4px;
  padding:38px 34px;
  position:sticky;
  top:120px;
}
.perfil-lateral h3{ color:var(--branco); font-size:21px; margin-bottom:12px; }
.perfil-lateral p{ color:rgba(251,249,244,0.72); font-size:14.5px; margin-bottom:22px; }
.perfil-lateral .btn{ margin-right:10px; margin-bottom:10px; }
/* Selo de "perfil verificado", sobreposto no canto inferior direito da placa de
   agendar consulta — só nos perfis já confirmados pelo(a) próprio(a) médico(a)
   (hoje: Dra. Emanuela). Reusa .selo-moldura/.selo-textos do selo do blog. */
.selo-perfil{
  position:absolute;
  right:-26px;
  bottom:-32px;
  width:118px; height:118px;
  z-index:2;
}
.selo-perfil .selo-moldura{ width:118px; height:118px; }
.selo-perfil:hover .selo-moldura{
  transform:rotate(-8deg) scale(1.06);
  filter:brightness(1.08) saturate(1.05) drop-shadow(0 0 10px rgba(194,168,119,0.4));
}
@media (max-width: 900px){
  .selo-perfil{ right:-8px; bottom:-26px; }
}
.perfil-lateral .link-instagram{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:600;
  color:var(--dourado-claro);
}
.perfil-lateral .link-instagram:hover{ color:var(--branco); }

@media (max-width: 860px){
  .perfil-corpo{ grid-template-columns:1fr; }
  .perfil-lateral{ position:relative; top:auto; } /* relative (não static) pro .selo-perfil continuar ancorado no canto da placa */
}

/* âncora do menu "Equipe" (home): mira o carrossel de cards, não o título da
   seção — a folga cobre o menu fixo (--nav-h) + as setas/sombra do carrossel */
#equipe{ scroll-margin-top:calc(var(--nav-h) + 24px); }

/* ---------- MEMÓRIAS (linha do tempo com marcos alternados) ----------
   Marcos e traço são gerados por assets/memorias-timeline.js a partir de
   assets/memorias-data.js — o espaçamento entre marcos (margin-bottom) e o
   "d" do path abaixo são escritos via JS, não à mão. */
.quadro{
  width:185px;
  aspect-ratio:4/5;
  background:var(--marfim);
  padding:10px;
  border-radius:2px;
  box-shadow:0 22px 30px -14px rgba(36,30,24,0.4), 0 2px 6px rgba(36,30,24,0.15);
  transition:transform .3s ease, box-shadow .3s ease;
  flex-shrink:0;
}
/* foto deitada (paisagem): o quadro segue a orientação da foto — a classe é
   adicionada por memorias-timeline.js depois de medir a imagem de verdade.
   A foto cobre o miolo inteiro (background cover), mas nunca as bordas
   (que são o padding marfim do .quadro). */
.quadro.quadro-horizontal{ width:232px; aspect-ratio:5/4; }
.marco-direita .quadro{ transform:rotate(1.5deg); }
.marco-esquerda .quadro{ transform:rotate(-2deg); }
.quadro:hover{ transform:rotate(0deg) translateY(-6px) scale(1.045); box-shadow:0 30px 34px -14px rgba(36,30,24,0.45); }
.quadro-img{
  position:relative;
  width:100%; height:100%;
  background:var(--areia) center/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
}
/* Marco antes/depois (m.fotos no memorias-data.js): as fotos ficam empilhadas
   exatas no mesmo lugar (position:absolute, mesmo tamanho do quadro) e
   alternam por crossfade de opacidade — nunca desliza nada, então não tem
   como uma foto vazar ao lado da outra. Setas ficam SOBRE a foto (o quadro é
   pequeno demais pra setas do lado de fora, como nos carrosséis maiores). */
.quadro.quadro-carrossel .quadro-img{ overflow:hidden; }
.quadro-carrossel .quadro-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .8s ease;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.quadro-carrossel .quadro-slide.ativa{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .quadro-carrossel .quadro-slide{ transition:none; }
}
.quadro-carrossel-seta{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:26px; height:26px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(36,30,24,0.45);
  color:var(--branco);
  font-size:15px;
  line-height:1;
  z-index:3;
  transition:background .2s ease;
}
.quadro-carrossel-seta:hover{ background:rgba(36,30,24,0.72); }
.quadro-carrossel-seta.prev{ left:8px; }
.quadro-carrossel-seta.next{ right:8px; }
/* pontos de luz que cintilam sobre a foto no hover (duas camadas fora de fase) */
.quadro-img::before,
.quadro-img::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .4s ease;
  background-repeat:no-repeat;
}
.quadro-img::before{
  background-image:
    radial-gradient(circle 4px at 18% 24%, rgba(255,251,240,0.95), rgba(255,251,240,0) 70%),
    radial-gradient(circle 3px at 72% 15%, rgba(255,244,214,0.9), rgba(255,244,214,0) 70%),
    radial-gradient(circle 2.5px at 38% 66%, rgba(255,251,240,0.85), rgba(255,251,240,0) 70%),
    radial-gradient(circle 3.5px at 85% 78%, rgba(255,244,214,0.9), rgba(255,244,214,0) 70%);
}
.quadro-img::after{
  background-image:
    radial-gradient(circle 3px at 55% 38%, rgba(255,251,240,0.9), rgba(255,251,240,0) 70%),
    radial-gradient(circle 2.5px at 12% 82%, rgba(255,244,214,0.85), rgba(255,244,214,0) 70%),
    radial-gradient(circle 4px at 90% 48%, rgba(255,251,240,0.9), rgba(255,251,240,0) 70%),
    radial-gradient(circle 2px at 32% 10%, rgba(255,244,214,0.8), rgba(255,244,214,0) 70%);
}
.quadro:hover .quadro-img::before{ opacity:1; animation:pontoLuz 1.7s ease-in-out infinite; }
.quadro:hover .quadro-img::after{ opacity:1; animation:pontoLuz 1.7s ease-in-out 0.85s infinite; }
@keyframes pontoLuz{ 0%, 100%{ opacity:1; } 50%{ opacity:0.2; } }
@media (prefers-reduced-motion: reduce){
  .quadro:hover .quadro-img::before, .quadro:hover .quadro-img::after{ animation:none; }
}
.quadro-legenda{
  width:180px;
  font-size:12.5px;
  line-height:1.5;
  color:var(--tinta-suave);
  font-style:italic;
}
.quadro-legenda strong{
  display:block;
  font-family:'Fraunces',serif;
  font-style:normal;
  font-size:13.5px;
  color:var(--dourado-escuro);
  margin-bottom:2px;
}

.memorias-timeline{
  position:relative;
  max-width:1040px;
  margin:0 auto;
  padding:90px 24px 90px; /* embaixo, espaço pra linha continuar além do último marco e terminar na seta */
}
.memorias-linha{
  position:absolute;
  top:0; left:50%;
  width:220px;
  height:100%;
  transform:translateX(-50%);
  z-index:0;
  pointer-events:none;
}
.memorias-linha path{
  fill:none;
  stroke:var(--dourado);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  /* visibilidade sem engrossar: um halo suave em volta do traço
     (a piscada uniforme saiu — virou a onda do .linha-onda abaixo) */
  filter:drop-shadow(0 0 2.5px rgba(147,121,76,0.55));
}
/* pulso de brilho que percorre a linha de cima a baixo, estilo onda
   (dasharray/dashoffset animados por memorias-timeline.js via WAAPI) */
.memorias-linha .linha-onda{
  fill:none;
  stroke:var(--dourado-claro);
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:0.9;
  filter:drop-shadow(0 0 4px rgba(194,168,119,0.8));
}
/* ponta de seta no fim da linha: pisca igual às setas laterais e aos links
   "Ver perfil completo" (mesma animação piscarPerfil) */
.memorias-linha .linha-seta-fim{
  stroke:var(--dourado);
  stroke-width:1.8;
  animation:piscarPerfil 2.8s ease-in-out 4;
}
.memoria-marco{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 80px 1fr;
  align-items:center;
  margin-bottom:96px;
}
.memoria-marco:last-child{ margin-bottom:0; }
.memoria-eixo{
  grid-column:2;
  grid-row:1; /* trava eixo e lado na MESMA linha do grid — sem isso, quando o lado
                 usa a coluna 1 (marco-esquerda) o auto-placement o jogava pra uma
                 2ª linha e o nó subia pro topo, desalinhado da foto */
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.memoria-no{
  width:13px; height:13px;
  border-radius:50%;
  background:var(--branco);
  border:2px solid var(--dourado);
  box-shadow:0 0 0 6px var(--marfim);
}
.memoria-ano{
  /* absoluto pra não entrar na conta do centro: o CÍRCULO fica exatamente no
     meio da linha do grid (= meio da foto). A linha SEMPRE sai da bolinha na
     vertical (tangente vertical dos segmentos), passando por baixo dela — então
     a data fica AO LADO da bolinha, no lado oposto ao da foto, nunca no caminho
     da linha. */
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-family:'Fraunces',serif;
  font-size:13px;
  font-weight:500;
  color:var(--dourado-escuro);
  white-space:nowrap;
}
/* foto à direita → data à esquerda da bolinha; foto à esquerda → data à direita
   (a data cresce pro lado vazio do marco, onde não tem foto nem linha) */
.marco-direita .memoria-ano{ right:calc(50% + 17px); }
.marco-esquerda .memoria-ano{ left:calc(50% + 17px); }
/* Data realocada: a linha sorteada passou por cima dela — muda pro lado da
   foto, colada ao círculo (a data tem prioridade de fuga; ver
   ajustarDatas() em memorias-timeline.js) */
.marco-direita .memoria-ano.ano-realocado{ right:auto; left:calc(50% + 12px); }
.marco-esquerda .memoria-ano.ano-realocado{ left:auto; right:calc(50% + 12px); }
.memoria-lado{
  grid-row:1;
  display:flex;
  align-items:center;
  gap:8px;
}
/* seta e nó travados no meio da FOTO (não do conteúdo todo): a legenda ao lado
   é sempre mais baixa que a foto e alinhada por baixo, então o centro do
   conteúdo é o centro do quadro */
.memoria-seta{ align-self:center; }
.memoria-marco.marco-esquerda .memoria-lado{ grid-column:1; justify-content:flex-end; }
.memoria-marco.marco-direita .memoria-lado{ grid-column:3; justify-content:flex-start; }
.memoria-conteudo{ display:flex; align-items:flex-end; gap:12px; }
.marco-esquerda .memoria-conteudo{ flex-direction:row-reverse; }
.memoria-seta{
  font-size:26px;
  font-weight:600;
  line-height:1;
  color:var(--dourado);
  flex-shrink:0;
  animation:piscarPerfil 2.8s ease-in-out 4;
}
@media (max-width: 980px){
  .memoria-marco{ grid-template-columns:1fr 64px 1fr; }
  .quadro{ width:150px; }
  .quadro.quadro-horizontal{ width:188px; }
}
@media (max-width: 760px){
  .memorias-timeline{ padding-left:16px; padding-right:16px; }
  .memorias-linha{ left:22px; width:50px; transform:none; }
  .memoria-marco{ grid-template-columns:44px 1fr; margin-bottom:60px; }
  .memoria-eixo{ grid-column:1; }
  /* sem alternância no mobile: a data volta pra baixo da bolinha (não há lado vazio) */
  .marco-direita .memoria-ano, .marco-esquerda .memoria-ano{
    left:50%; right:auto;
    top:calc(100% + 7px);
    transform:translateX(-50%);
  }
  .memoria-marco.marco-esquerda .memoria-lado, .memoria-marco.marco-direita .memoria-lado{
    grid-column:2; justify-content:flex-start;
  }
  .memoria-seta{ display:none; }
  .memoria-conteudo, .marco-esquerda .memoria-conteudo{ flex-direction:column; align-items:flex-start; gap:10px; }
  .quadro{ width:min(240px, 62vw); }
  .quadro.quadro-horizontal{ width:min(280px, 76vw); }
  .quadro-legenda{ width:auto; max-width:240px; }
  .marco-direita .quadro, .marco-esquerda .quadro{ transform:none; }
  .quadro:hover{ transform:none; }
}