:root{
    --bg-deep:#123039;
    --bg-panel:#193d47;
    --bg-darker:#0b2027;
    --text-light:#f2ede1;
    --text-muted:#95afb1;
    --gold:#d8b45f;
    --gold-deep:#a9812f;
    --line: rgba(216,180,95,0.22);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg-deep);
    color:var(--text-light);
    font-family:'Mulish', sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.serif{
    font-family:'Lora', serif;
    font-weight:600;
    letter-spacing:0.01em;
    color:var(--text-light);
  }
  a{color:inherit;}
  img{max-width:100%; display:block;}
  .wrap{
    max-width:1120px;
    margin:0 auto;
    padding:0 32px;
  }
  .fish{
    display:inline-block;
    vertical-align:middle;
  }

  /* ---------- header ---------- */
  header{
    padding:28px 0;
    border-bottom:1px solid var(--line);
  }
  header .wrap{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:12px;
    font-family:'Lora', serif;
  }
  .brand .avatar{
    width:40px;
    height:40px;
    border-radius:50%;
    object-fit:cover;
    border:1px solid var(--gold);
  }
  .brand .first{font-size:1.05rem; color:var(--text-muted); font-style:italic;}
  .brand .last{font-size:1.3rem; font-weight:600; letter-spacing:0.02em;}
  header nav a{
    color:var(--text-muted);
    text-decoration:none;
    font-size:0.92rem;
    margin-left:28px;
  }
  header nav a:hover{color:var(--gold);}
  @media (max-width:640px){ header nav{display:none;} }

  /* ---------- hero ---------- */
  .hero{
    padding:88px 0 96px;
  }
  .hero .wrap{
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:64px;
    align-items:center;
  }
  .hero h1{
    font-size:2.6rem;
    line-height:1.28;
    margin:0 0 22px;
    max-width:16ch;
  }
  .hero .sub{
    font-size:1.15rem;
    color:var(--text-muted);
    max-width:38ch;
    margin:0 0 36px;
    font-style:italic;
    font-family:'Lora', serif;
  }
  .btn-gold{
    display:inline-block;
    background:linear-gradient(135deg, var(--gold), var(--gold-deep));
    color:#1b2a1c;
    font-weight:700;
    padding:15px 30px;
    border-radius:3px;
    text-decoration:none;
    font-size:0.98rem;
    letter-spacing:0.01em;
    box-shadow:0 8px 24px rgba(169,129,47,0.28);
  }
  .btn-gold:hover{filter:brightness(1.06);}
  .hero-photo{
    position:relative;
  }
  .hero-photo .frame{
    position:relative;
    border:1px solid var(--line);
    padding:14px;
    background:var(--bg-panel);
  }
  .hero-photo img{
    width:100%;
    filter:saturate(0.92) contrast(1.02);
  }
  .hero-photo .fish-watermark{
    position:absolute;
    right:-38px;
    bottom:-30px;
    width:150px;
    height:auto;
    opacity:1;
  }
  @media (max-width:760px){
    .hero-photo .fish-watermark{width:104px; right:-14px; bottom:-18px;}
  }

  /* ---------- section shared ---------- */
  section{padding:84px 0;}
  .section-head{
    max-width:44ch;
    margin:0 0 48px;
  }
  .section-head h2{
    font-size:1.9rem;
    margin:0 0 14px;
  }
  .section-head p{
    color:var(--text-muted);
    margin:0;
    font-size:1.03rem;
  }

  /* ---------- signs / symptoms ---------- */
  .signs{background:var(--bg-panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .signs-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    column-gap:56px;
  }
  .sign{
    padding:26px 0;
    border-bottom:1px solid var(--line);
    display:flex;
    gap:18px;
  }
  .sign svg{flex:none; width:26px; height:26px; margin-top:4px; stroke:var(--gold); fill:none; stroke-width:1.4;}
  .sign h3{font-size:1.08rem; margin:0 0 6px; font-weight:600;}
  .sign p{margin:0; color:var(--text-muted); font-size:0.95rem;}
  @media (max-width:760px){ .signs-grid{grid-template-columns:1fr;} }

  /* ---------- bio ---------- */
  .bio .wrap{
    display:grid;
    grid-template-columns:0.9fr 1.1fr;
    gap:64px;
    align-items:start;
  }
  .bio h2{font-size:1.9rem; margin:0 0 26px;}
  .bio p{margin:0 0 20px; color:var(--text-muted); max-width:56ch;}
  .bio .pull{
    font-family:'Lora', serif;
    font-style:italic;
    color:var(--text-light);
    font-size:1.18rem;
    line-height:1.55;
    border-left:2px solid var(--gold);
    padding-left:22px;
    margin:34px 0;
    max-width:48ch;
  }
  .bio-side{position:sticky; top:32px;}
  .bio-side .credential{
    border:1px solid var(--line);
    padding:26px;
    background:var(--bg-panel);
  }
  .bio-side .credential .num{
    font-family:'Lora', serif;
    font-size:2rem;
    color:var(--gold);
    display:block;
    margin-bottom:4px;
  }
  .bio-side .credential p{color:var(--text-muted); font-size:0.92rem; margin:0;}
  @media (max-width:760px){
    .bio .wrap{grid-template-columns:1fr;}
    .bio-side{position:static; margin-top:32px;}
  }

  /* ---------- faq ---------- */
  .faq{background:var(--bg-panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .faq-list{max-width:760px;}
  details{
    border-bottom:1px solid var(--line);
    padding:20px 0;
  }
  summary{
    cursor:pointer;
    list-style:none;
    font-family:'Lora', serif;
    font-size:1.08rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
  }
  summary::-webkit-details-marker{display:none;}
  summary .plus{
    flex:none;
    width:22px; height:22px;
    border:1px solid var(--gold);
    border-radius:50%;
    position:relative;
  }
  summary .plus::before, summary .plus::after{
    content:'';
    position:absolute;
    background:var(--gold);
    top:50%; left:50%;
  }
  summary .plus::before{width:9px; height:1.4px; transform:translate(-50%,-50%);}
  summary .plus::after{width:1.4px; height:9px; transform:translate(-50%,-50%) rotate(0deg); transition:transform .3s cubic-bezier(0.32,0.72,0,1);}
  details[open] summary .plus::after{transform:translate(-50%,-50%) rotate(90deg);}
  details p{
    color:var(--text-muted);
    margin:16px 0 0;
    max-width:64ch;
    font-size:0.97rem;
  }

  /* ---------- cta / footer ---------- */
  .cta{background:var(--bg-darker); text-align:left;}
  .cta .wrap{
    display:grid;
    grid-template-columns:1.2fr 0.8fr;
    gap:48px;
  }
  .cta h2{font-size:2rem; margin:0 0 16px; max-width:16ch;}
  .cta p{color:var(--text-muted); max-width:42ch; margin:0 0 32px;}
  .contact-block{border-left:1px solid var(--line); padding-left:40px;}
  .contact-block .clinic{
    display:flex; align-items:center; gap:12px;
    margin-bottom:22px;
    color:var(--text-muted);
    font-size:0.92rem;
  }
  .contact-block .clinic-logo{
    width:34px;
    height:34px;
    object-fit:contain;
  }
  .contact-block .clinic strong{color:var(--gold); font-family:'Lora', serif; font-weight:600;}
  .contact-line{display:flex; gap:12px; align-items:center; margin-bottom:14px; font-size:0.95rem;}
  .contact-line svg{width:17px; height:17px; stroke:var(--gold); fill:none; stroke-width:1.6;}
  .contact-line a{text-decoration:none; color:var(--text-light);}
  .contact-line a:hover{color:var(--gold);}
  @media (max-width:760px){
    .cta .wrap{grid-template-columns:1fr;}
    .contact-block{border-left:none; padding-left:0; border-top:1px solid var(--line); padding-top:32px;}
  }
  footer{
    background:var(--bg-darker);
    border-top:1px solid var(--line);
    padding:22px 0 34px;
    font-size:0.82rem;
    color:var(--text-muted);
    text-align:center;
  }

  /* ================= navegação multipágina ================= */
  header nav a.active{
    color:var(--gold);
    border-bottom:1px solid var(--gold);
    padding-bottom:3px;
  }
  header nav a:focus-visible,
  .btn-gold:focus-visible,
  a:focus-visible,
  summary:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
  }
  /* o CSS original escondia a navegação no mobile.
     num site de 4 páginas isso deixa o visitante sem saída. */
  @media (max-width:640px){
    header .wrap{flex-direction:column; gap:16px;}
    header nav{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 0;}
    header nav a{margin:0 14px;}
  }

  /* ================= cabeçalho de página interna ================= */
  .page-head{
    padding:64px 0 52px;
    border-bottom:1px solid var(--line);
    background:var(--bg-darker);
  }
  .page-head h1{
    font-size:clamp(1.9rem, 4vw, 2.7rem);
    margin:0 0 14px;
    max-width:20ch;
  }
  .page-head p{
    color:var(--text-muted);
    max-width:62ch;
    margin:0;
    font-size:1.05rem;
  }

  /* ================= abordagens (serviços) ================= */
  .approach-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:28px;
    margin-top:40px;
  }
  .approach{
    border:1px solid var(--line);
    border-left:3px solid var(--gold);
    padding:28px 30px;
    background:var(--bg-panel);
  }
  .approach h3{margin:0 0 12px; font-size:1.25rem;}
  .approach p{margin:0; color:var(--text-muted);}
  @media (max-width:760px){ .approach-grid{grid-template-columns:1fr;} }

  /* ================= modalidades ================= */
  .modes{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px;
    margin-top:40px;
  }
  .mode{
    padding:30px;
    border:1px solid var(--line);
    background:var(--bg-darker);
  }
  .mode h3{margin:0 0 10px; font-size:1.2rem;}
  .mode p{margin:0; color:var(--text-muted);}
  @media (max-width:760px){ .modes{grid-template-columns:1fr;} }

  /* ================= página de contato ================= */
  .contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:56px;
    align-items:start;
  }
  .contact-card{
    border:1px solid var(--line);
    background:var(--bg-panel);
    padding:34px;
  }
  .contact-card h2{margin:0 0 20px; font-size:1.45rem;}
  .contact-card .contact-line{margin-bottom:16px;}
  .hours{
    margin-top:28px;
    padding-top:22px;
    border-top:1px solid var(--line);
    color:var(--text-muted);
    font-size:0.95rem;
  }
  @media (max-width:760px){ .contact-grid{grid-template-columns:1fr; gap:36px;} }

  /* ================= respeito a preferências do sistema ================= */
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{transition:none !important; animation:none !important;}
  }

  /* seção em coluna única (serviços/contato) */
  .bio.stack .wrap{display:block;}

  /* ================================================================
     Correção de responsividade.
     O CSS de origem definia .hero .wrap como grid de 2 colunas sem
     nenhum breakpoint, então o hero nunca colapsava no celular.
     Tipografia e espaçamentos também eram todos fixos.
     ================================================================ */

  body{overflow-x:hidden;}

  .wrap{padding:0 clamp(20px, 5vw, 32px);}
  section{padding:clamp(52px, 9vw, 84px) 0;}

  .hero{padding:clamp(48px, 8vw, 88px) 0 clamp(56px, 9vw, 96px);}
  .hero h1{
    font-size:clamp(1.8rem, 5.6vw, 2.6rem);
    max-width:18ch;
  }
  .hero .sub{font-size:clamp(1rem, 2.8vw, 1.15rem);}

  .page-head h1{font-size:clamp(1.75rem, 5.2vw, 2.7rem);}
  .bio h2, .signs h2, .faq h2{font-size:clamp(1.45rem, 4.4vw, 1.9rem);}
  .cta h2{font-size:clamp(1.5rem, 4.6vw, 2rem);}

  @media (max-width:860px){
    .hero .wrap{
      grid-template-columns:1fr;
      gap:40px;
    }
    .hero h1{max-width:100%;}
    .hero .sub{max-width:100%;}
    .hero-photo{max-width:420px;}
    .hero-photo .fish-watermark{width:112px; right:4px; bottom:-22px;}
  }

  @media (max-width:520px){
    .btn-gold{display:block; text-align:center; padding:16px 20px;}
    .hero-photo .frame{padding:10px;}
    .hero-photo .fish-watermark{width:88px; right:2px; bottom:-16px;}
    .brand .last{font-size:1.12rem;}
    .brand .first{font-size:0.95rem;}
    .brand .avatar{width:34px; height:34px;}
    .bio-side .credential .num{font-size:1.7rem;}
    .contact-card{padding:24px 20px;}
  }

  /* Os atributos width/height do HTML entram como dica de estilo.
     Sem height:auto, a altura do atributo trava e a imagem distorce. */
  img{max-width:100%; height:auto;}
  .hero-photo img{width:100%; height:auto;}
  .brand .avatar{height:40px;}
  .clinic-logo{height:auto;}

  footer .wrap{padding-top:0; padding-bottom:0;}
  footer a{color:var(--text-muted);}
  footer a:hover{color:var(--gold);}

  /* Tamanho por contexto: compacto no bloco de CTA, com presença
     na coluna da página de contato. Antes estava preso a
     .contact-block e, fora dali, caía no tamanho natural do arquivo. */
  .clinic{display:flex; align-items:center; gap:14px;}
  .clinic-logo{width:68px; height:68px; object-fit:contain;}
  .contact-block .clinic-logo{width:34px; height:34px;}
  .contact-grid .clinic{gap:16px; margin-bottom:24px;}
  .contact-grid .clinic span{font-size:1.15rem;}
  @media (max-width:520px){ .clinic-logo{width:54px; height:54px;} }

  /* ================================================================
     Revelação no scroll.
     A classe .js é adicionada por um script inline no <head>. Sem JS,
     nada fica escondido: o seletor .js nem existe e o conteúdo aparece.
     ================================================================ */
  .js [data-reveal]{
    opacity:0;
    transform:translateY(14px);
    transition:opacity .55s ease-out, transform .55s ease-out;
    will-change:opacity, transform;
  }
  .js [data-reveal].is-visible{
    opacity:1;
    transform:none;
  }
  @media (prefers-reduced-motion: reduce){
    .js [data-reveal]{opacity:1; transform:none; transition:none;}
  }

  /* O parágrafo entra com um leve deslocamento ao abrir, para o olho
     encontrar o começo do texto em vez de ele surgir pronto. */
  details[open] p{ animation:faq-entra .34s ease-out .04s both; }
  @keyframes faq-entra{
    from{ opacity:0; transform:translateY(-4px); }
    to{ opacity:1; transform:none; }
  }
  @media (prefers-reduced-motion: reduce){
    details[open] p{animation:none;}
    summary .plus::after{transition:none;}
  }