/* ==========================================================================
   Dra. Nathalia Julio — Cirurgia do Aparelho Digestivo (Florianópolis/SC)
   Fonte Rethink Sans local (variável) + tokens do design system + componentes.
   ========================================================================== */

/* ---- Rethink Sans (local, variável 400–800) ---- */
@font-face{font-family:'Rethink Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url('fontes/rethink-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Rethink Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url('fontes/rethink-sans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---- Tokens ---- */
:root{
  --brand-azul-escuro:#1D2B45;--brand-azul-claro:#3C5C75;--brand-verde-escuro:#8C7149;--brand-verde-claro:#C5AC8E;--brand-cinza:#7B7B7B;
  --azul-50:#EFF1F6;--azul-100:#DCE1EB;--azul-200:#BFC8DA;--azul-300:#93A2BD;--azul-400:#5E7096;--azul-500:#1D2B45;--azul-600:#2E4368;--azul-700:#24365B;--azul-800:#16213A;--azul-900:#101A2E;
  --cyan-300:#7C97AC;--cyan-400:#567992;--cyan-500:#3C5C75;--cyan-600:#2F4A5F;
  --teal-50:#F5EFE4;--teal-100:#EADFC9;--teal-200:#DCC9A6;--teal-300:#D0BB9A;--teal-400:#C5AC8E;--teal-500:#9A7E52;--teal-600:#8C7149;--teal-700:#6F5938;--teal-800:#59472D;
  --gray-0:#fff;--gray-25:#FCFAF6;--gray-50:#F9F6F1;--gray-100:#F1EDE4;--gray-200:#E3DDD1;--gray-300:#CFC8BB;--gray-400:#A9A296;--gray-500:#7B7B7B;--gray-600:#6E6A61;--gray-700:#4E4A42;--gray-800:#33302A;--gray-900:#1D2B45;
  --success:#9A7E52;--info:#3C5C75;--warning:#d99a2b;--danger:#d1495b;
  --color-primary:var(--azul-500);--color-primary-hover:var(--azul-600);--color-secondary:var(--teal-600);--color-accent:var(--cyan-500);
  /* --text-muted usa gray-600: o gray-500 (#7B7B7B) rende 4,2:1 no branco e reprova no WCAG AA (mín. 4,5:1);
     o gray-600 (#6E6A61) rende 5,4:1 no branco e 5,0:1 no cream (#F9F6F1) — passa nos dois fundos. */
  --text-strong:var(--gray-900);--text-body:var(--gray-700);--text-muted:var(--gray-600);--text-on-brand:#fff;--text-link:var(--azul-500);
  --surface-page:var(--gray-50);--surface-card:#fff;--surface-brand-soft:var(--azul-50);--surface-teal-soft:var(--teal-50);
  --border-subtle:var(--gray-200);--border-default:var(--gray-300);--border-brand:var(--azul-500);
  --focus-ring:color-mix(in srgb, var(--azul-500) 45%, transparent);
  --font-sans:'Rethink Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--font-display:'Rethink Sans',system-ui,sans-serif;
  --fs-display:clamp(2.4rem,5vw,3.7rem);--fs-h2:clamp(1.7rem,2.6vw,2.25rem);--fs-h3:1.5rem;--fs-h4:1.25rem;--fs-lead:1.1875rem;--fs-eyebrow:0.8125rem;
  --lh-heading:1.2;--lh-snug:1.35;--lh-body:1.65;--ls-tight:-0.02em;--ls-eyebrow:0.14em;
  --space-3:0.875rem;--space-4:1.25rem;--space-6:2.25rem;--space-7:3rem;--space-9:4.5rem;--space-12:clamp(4.5rem,9vw,8rem);
  --radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:18px;--radius-xl:26px;--radius-2xl:34px;--radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(20,29,48,.06);--shadow-sm:0 2px 6px rgba(20,29,48,.08);--shadow-md:0 8px 24px rgba(20,29,48,.10);--shadow-lg:0 18px 44px rgba(20,29,48,.14);--shadow-brand:0 12px 30px rgba(29,43,69,.28);
  --container:1200px;--container-narrow:820px;--gutter:clamp(1.25rem,4vw,3rem);
  --ease-out:cubic-bezier(0.22,0.61,0.36,1);--dur-fast:140ms;--dur:220ms;--dur-slow:400ms;
  --gradient-brand:linear-gradient(120deg,var(--azul-500) 0%,var(--cyan-500) 60%,var(--teal-600) 100%);
  --gradient-brand-soft:linear-gradient(135deg,var(--azul-50) 0%,var(--teal-50) 100%);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* o header .medh é sticky (74px): sem esta folga, navegar por âncora (#areas,
   #faq, #agendamento…) para o título logo ATRÁS do header */
[id]{scroll-margin-top:92px;}
@media (max-width:680px){[id]{scroll-margin-top:84px;}}

/* seleção de texto na cor da marca */
::selection{background:var(--teal-100);color:var(--text-strong);}

/* anel de foco único do site — todo controle interativo herda o mesmo padrão */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--color-secondary);outline-offset:3px;border-radius:var(--radius-xs);
}

/* ---- reveal ao rolar (reveal.js marca html.js-reveal antes da pintura;
   sem JS nada disto se aplica, então o conteúdo nunca fica oculto) ---- */
html.js-reveal .rvz{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);will-change:opacity,transform;}
html.js-reveal .rvz.rvz-in{opacity:1;transform:none;}
/* cascata: blocos irmãos entram escalonados em vez de todos de uma vez.
   .rv-d1/.rv-d2 já vinham marcados no HTML do /sobre; os chips herdam o
   escalonamento por posição. */
html.js-reveal .rv-d1{transition-delay:.08s;}
html.js-reveal .rv-d2{transition-delay:.16s;}
html.js-reveal .chips > .rvz:nth-child(2){transition-delay:.07s;}
html.js-reveal .chips > .rvz:nth-child(3){transition-delay:.14s;}
html.js-reveal .chips > .rvz:nth-child(4){transition-delay:.21s;}
/* brilho único que varre a imagem quando o card aparece */
html.js-reveal .rvz-fig{position:relative;}
html.js-reveal .rvz-fig::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45),transparent 70%);transform:translateX(-130%) skewX(-12deg);opacity:0;}
html.js-reveal .rvz-fig.rvz-in::after{animation:rvShine 1.15s .2s ease-out;}
@keyframes rvShine{0%{transform:translateX(-130%) skewX(-12deg);opacity:0}18%{opacity:1}100%{transform:translateX(130%) skewX(-12deg);opacity:0}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  html.js-reveal .rvz{opacity:1;transform:none;transition:none;}
  html.js-reveal .rvz-fig::after{display:none;}
}

body{margin:0;font-family:var(--font-sans);font-size:1rem;line-height:var(--lh-body);color:var(--text-body);background:var(--surface-card);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{margin:0;}

/* ---- ícones ---- */
.ico{display:inline-flex;align-items:center;justify-content:center;}
.ico svg{width:1em;height:1em;display:block;}

/* ---- helpers ---- */
.wrap{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter);}
.wrap-narrow{max-width:var(--container-narrow);margin:0 auto;padding-inline:var(--gutter);}
.sec{padding-block:var(--space-12);}
.eyebrow{font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--color-secondary);}
.sh{max-width:none;}
.sh.center{text-align:center;max-width:680px;margin-inline:auto;}
.sh .eyebrow{display:block;margin-bottom:var(--space-3);}
.sh h2{font-family:var(--font-display);font-weight:500;font-size:var(--fs-h2);line-height:var(--lh-heading);letter-spacing:var(--ls-tight);color:var(--text-strong);text-wrap:balance;}
.sh .lead{margin:var(--space-4) 0 0;font-size:var(--fs-lead);line-height:var(--lh-snug);color:var(--text-muted);}

/* ---- botões ---- */
/* line-height 1.3: labels longos quebram em 2 linhas no mobile e, com leading 1,
   as linhas colavam; min-height + padding seguram a altura dos botões de 1 linha */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-weight:700;line-height:1.3;text-align:center;letter-spacing:.01em;border-radius:var(--radius-pill);cursor:pointer;text-decoration:none;border:1px solid transparent;transition:transform var(--dur-fast) var(--ease-out),filter var(--dur) var(--ease-out),background var(--dur);}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px);}
.btn:active{transform:scale(.98);}
.btn .ico{font-size:1.1em;}
.btn-sm{padding:10px 18px;font-size:.875rem;min-height:44px;}
.btn-md{padding:12px 24px;font-size:1rem;min-height:46px;}
.btn-lg{padding:16px 30px;font-size:1.0625rem;min-height:56px;}
.btn-primary{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-brand);}
.btn-secondary{background:var(--color-secondary);color:#fff;box-shadow:0 12px 30px rgba(140,113,73,.26);}
.btn-outline{background:transparent;color:var(--color-primary);border:1.5px solid var(--color-primary);}
.btn-whatsapp{background:#25D366;color:#fff;box-shadow:0 12px 30px rgba(37,211,102,.28);}
.btn-block{width:100%;}

/* ---- cards ---- */
/* Títulos de card em peso 500 (decisão do Marco, 21/07): mesmo tom editorial
   dos headings de seção. Peso 700 fica só para rótulos/CTAs (.eyebrow, .btn,
   .chip, .go), nunca para hierarquia de título. */
.card{position:relative;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-6);overflow:hidden;transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);}
/* card inteiro como link: sem isto o underline default do <a> propaga para
   título e parágrafo (blocos não conseguem cancelar decoration do ancestral) */
a.card{text-decoration:none;}
.card-interactive:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}

/* ---- tags ---- */
.tag{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;font-size:.875rem;font-weight:500;color:var(--text-body);background:#fff;border:1.5px solid var(--border-default);border-radius:var(--radius-pill);cursor:pointer;transition:all var(--dur) var(--ease-out);user-select:none;}
.tag:hover{border-color:var(--color-primary);}
.tag.active{color:#fff;background:var(--color-primary);border-color:var(--color-primary);}

/* ---- tiles de ícone ---- */
/* Redesign: ícones dourados sem chip de fundo (o box flex permanece só p/ alinhamento;
   os font-sizes foram aumentados ~20% p/ compensar a perda do chip). */
/* Sem chip de fundo, o span esticado pelos cards flex-column centralizava o
   ícone (justify center + largura 100%). flex-start alinha o ícone à esquerda,
   na mesma margem do título — padrão aprovado pelo Marco. */
.itile{display:inline-flex;align-items:center;justify-content:flex-start;border-radius:0;flex-shrink:0;}
.itile-azul{color:var(--color-secondary);}
.itile-teal{color:var(--color-secondary);}

/* (header antigo .site-header/.desktop-nav/.mobile-nav removido — o header
   vivo é o .medh do partials/header.php, com CSS próprio) */

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;background:var(--gradient-brand-soft);}
.hero .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center;padding-block:clamp(3rem,7vw,6rem);}
.hero h1{font-size:var(--fs-display);font-weight:500;line-height:1.06;letter-spacing:-.02em;color:var(--text-strong);}
.hero .lead{margin:22px 0 0;font-size:var(--fs-lead);line-height:1.45;color:var(--text-body);max-width:520px;}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px;}
.hero .facts{display:flex;flex-wrap:wrap;gap:22px;margin-top:34px;}
.hero .facts .f{display:flex;align-items:center;gap:9px;font-size:.88rem;font-weight:500;color:var(--text-body);}
.hero .facts .f .ico{font-size:18px;color:var(--color-secondary);}
/* (.hero-card/.hl do hero antigo removidos — o hero atual usa .hero-foto) */

/* ---- grids de conteúdo ---- */
/* min(Xpx,100%): sem isso a coluna mantém o mínimo fixo em telas muito estreitas
   (~320px) e os cards são cortados, sem scroll para ver o resto (overflow-x:hidden). */
.grid-exams{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:18px;}
.grid-docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(290px,100%),1fr));gap:18px;margin-top:44px;}

/* ---- slider (seção Sobre) ----
   Scroll-snap nativo: o arrasto/swipe é do navegador; o JS só cuida das setas
   e das bolinhas. Zero biblioteca. */
.slider{margin-top:44px;}
.slider-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 40px)/3);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding:4px;margin:-4px;}
.slider-track::-webkit-scrollbar{display:none;}
.slider-track>.card{scroll-snap-align:start;}
.slider-track:focus-visible{outline:2px solid var(--color-primary);outline-offset:4px;border-radius:var(--radius-sm);}
@media (max-width:980px){.slider-track{grid-auto-columns:calc((100% - 20px)/2);}}
@media (max-width:620px){.slider-track{grid-auto-columns:100%;}}
.slider-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:26px;}
.slider-btn{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--border-default);background:#fff;color:#8C7149;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color var(--dur),background var(--dur),opacity var(--dur);}
.slider-btn svg{width:18px;height:18px;}
.slider-btn:hover:not(:disabled){border-color:#8C7149;background:#F5EFE4;}
.slider-btn:disabled{opacity:.35;cursor:default;}
.slider-btn:focus-visible,.slider-dot:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;}
/* min-width:0 + wrap: como item de flex, .slider-dots não encolhe abaixo do
   conteúdo (min-width:auto) e uma fila longa estoura a tela — 18 bolinhas do
   mobile dos depoimentos dariam ~437px em 375px. Com poucas bolinhas é no-op. */
/* gap 2px: as bolinhas agora têm 24px de caixa (padding de toque) — 8px de gap
   dobraria o passo entre centros e quebraria a fileira em mais linhas */
.slider-dots{display:flex;gap:2px;flex-wrap:wrap;justify-content:center;min-width:0;}
/* alvo de toque 24px com visual de 9px (background-clip:content-box recorta a
   cor pro miolo; o padding vira área clicável invisível) */
.slider-dot{width:24px;height:24px;border-radius:999px;border:none;padding:7.5px;background:var(--gray-300);background-clip:content-box;cursor:pointer;transition:background var(--dur),width var(--dur) var(--ease-out);}
.slider-dot.active{width:41px;background:#8C7149;background-clip:content-box;}
@media (prefers-reduced-motion:reduce){.slider-track{scroll-behavior:auto;}.slider-dot{transition:none;}}

/* diferenciais card */
/* sem o chip, o ícone alinha à esquerda com o texto do card (box centrado o deslocaria) */
.dif .itile{justify-content:flex-start;font-size:32px;margin-bottom:16px;}
.dif h3{margin:0 0 7px;font-size:1.15rem;font-weight:500;line-height:1.3;color:var(--text-strong);}
.dif p{margin:0;color:var(--text-muted);line-height:1.55;font-size:.95rem;}

/* exames */
.exam{display:flex;flex-direction:column;}
/* foto sangra até a borda do card: puxa o padding do .card para fora.
   max-width:none é obrigatório — o img{max-width:100%} global grampearia a
   largura na caixa de conteúdo e a sangria não aconteceria. */
/* height:auto é obrigatório: com a largura vinda do CSS e sem altura declarada,
   o atributo height="630" do HTML vira valor usado e a foto estica p/ 630px. */
.exam .foto{width:calc(100% + var(--space-6) * 2);max-width:none;height:auto;margin:calc(var(--space-6) * -1) calc(var(--space-6) * -1) 16px;aspect-ratio:1200 / 630;object-fit:cover;background:var(--surface-page);}
.exam h3{margin:0 0 6px;font-size:1.1rem;font-weight:500;line-height:1.3;color:var(--text-strong);}
.exam p{margin:0 0 16px;color:var(--text-muted);line-height:1.5;font-size:.9rem;flex-grow:1;}
.exam .go{display:inline-flex;align-items:center;gap:6px;font-size:.88rem;font-weight:700;color:var(--color-primary);text-decoration:none;}
.exam .go .ico{font-size:15px;}
.card-interactive .go .ico{transition:transform var(--dur) var(--ease-out);}
.card-interactive:hover .go .ico{transform:translateX(4px);}

/* home — cirurgias em 2 colunas: cards maiores pedem tipografia um degrau acima */
.grid-exams-2{grid-template-columns:repeat(2,1fr);gap:24px;}
.grid-exams-2 .exam h3{font-size:1.3rem;}
.grid-exams-2 .exam p{font-size:.95rem;line-height:1.55;}
.grid-exams-2 .exam .go{font-size:.95rem;}
@media (max-width:760px){.grid-exams-2{grid-template-columns:1fr;}}
/* placeholder da área da foto enquanto as imagens das cirurgias não chegam */
.exam .cir-ph{display:flex;align-items:center;justify-content:center;background:var(--gradient-brand-soft);border-bottom:1px solid var(--border-subtle);}
.exam .cir-ph img{width:60px;height:60px;opacity:.45;}

/* alert */
.alert{display:flex;gap:13px;align-items:flex-start;border-radius:var(--radius-md);padding:15px 18px;margin-top:30px;}
.alert-care{background:var(--teal-50);border:1px solid var(--teal-200);}
.alert .ai{color:var(--color-secondary);flex-shrink:0;margin-top:1px;font-size:20px;}
.alert .at{font-weight:700;color:var(--teal-700);margin-bottom:3px;font-size:.95rem;}
.alert .ad{color:var(--text-body);font-size:.9rem;line-height:1.55;}

/* convênios */
.chips{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:40px;}
.chip{display:flex;align-items:center;gap:10px;padding:16px 26px;background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-xs);font-weight:700;color:var(--text-strong);transition:transform var(--dur) var(--ease-out),border-color var(--dur),box-shadow var(--dur);}
.chip:hover{transform:translateY(-3px);border-color:var(--azul-200);box-shadow:var(--shadow-md);}
.chip .ico{color:var(--color-secondary);font-size:20px;transition:transform var(--dur) var(--ease-out);}
.chip:hover .ico{transform:scale(1.18) rotate(-6deg);}
@media (prefers-reduced-motion:reduce){.chip,.chip .ico{transition:none;}.chip:hover{transform:none;}.chip:hover .ico{transform:none;}}
.parceiros{text-align:center;margin-top:30px;color:var(--text-muted);font-size:.9rem;max-width:760px;margin-inline:auto;}

/* corpo clínico */
/* align-items:center + sem a div .tags vazia (era um vão reservado de 20px em 14
   dos 16 cards): o bloco de texto fica verticalmente equilibrado com o avatar. */
/* gap/padding aparados (era 16/24) p/ devolver ao nome os 16px que o avatar
   de 72px tomou: sem isso "Dr. Marcus Vinicius de Godoy Bueno Caldas Mesquita"
   (415px de nome) vai p/ 3 linhas e cria uma 3ª altura de card no grid */
.doc{display:flex;gap:14px;align-items:center;padding:22px 20px;}
/* abaixo de ~420px o card fica com ~335px e o nome volta a espremer; 16px de
   padding devolve a folga e reproduz exatamente a quebra de linha do layout antigo */
@media (max-width:480px){.doc{padding:22px 16px;}}
/* foto de perfil (placeholder perfil-medico.webp por enquanto — mesma p/ todos) */
/* 72px = a altura exata do bloco de texto ao lado, então a foto alinha com ele
   e o card NÃO cresce (quem manda na altura é a .meta). Acima disso o card estica.
   Radius: --radius-md (12px); o --radius-lg dos cards (18px) arredondaria demais. */
.doc .av{flex-shrink:0;width:72px;height:72px;border-radius:var(--radius-md);object-fit:cover;background:var(--azul-50);box-shadow:0 0 0 4px var(--azul-50);}
.doc .meta{min-width:0;}
.doc h3{margin:0 0 3px;font-size:1.02rem;font-weight:500;color:var(--text-strong);line-height:1.3;}
.doc .spec{margin:0;font-size:.85rem;color:var(--color-secondary);font-weight:500;}
.doc .reg{margin:5px 0 0;font-size:.8rem;color:var(--text-muted);letter-spacing:.01em;}

/* FAQ accordion */
.acc{display:flex;flex-direction:column;gap:12px;margin-top:40px;}
.acc .item{background:#fff;border:1px solid var(--border-subtle);border-radius:var(--radius-md);overflow:hidden;transition:border-color var(--dur);}
.acc .item.open{border-color:var(--azul-200);box-shadow:var(--shadow-sm);}
.acc .q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:30px 30px;background:transparent;border:none;cursor:pointer;text-align:left;font-family:inherit;font-size:1.02rem;font-weight:500;color:#4E4A42;transition:color var(--dur);}
.acc .q:hover{color:#1D2B45;}
.acc .item.open .q{color:#8C7149;}
.acc .q .chev{flex-shrink:0;width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--azul-50);color:var(--color-primary);transition:all var(--dur);font-size:15px;}
.acc .item.open .q .chev{background:var(--color-primary);color:#fff;transform:rotate(180deg);}
.acc .a{max-height:0;opacity:0;overflow:hidden;transition:max-height var(--dur-slow) var(--ease-out),opacity var(--dur);}
.acc .item.open .a{max-height:420px;opacity:1;}
.acc .a p{margin:0;padding:0 30px 24px;color:var(--text-muted);line-height:1.6;font-size:.95rem;}

/* contato */
.contato{background:var(--gradient-brand-soft);}
.contato .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start;}
/* O e-mail é um token longo sem espaço. Item de grid tem min-width:auto, então
   sem isto ele estica a coluna além da viewport e cria scroll horizontal no mobile
   (mesmo fix já aplicado na página /agendamento). */
.contato .grid>*{min-width:0;}
.cinfo .val{overflow-wrap:anywhere;}
/* Card de CTA no lugar do antigo formulário da home: o formulário agora é único,
   em /agendamento, e todos os CTAs do site apontam para lá. */
.contato-cta{padding:var(--space-7) clamp(1.25rem,3vw,2rem);text-align:center;}
.contato-cta h3{font-size:1.35rem;font-weight:500;color:var(--text-strong);margin:0 0 12px;}
.contato-cta p{color:var(--text-body);line-height:1.6;margin:0 0 24px;}
.contato-cta p.alt{margin:14px 0 0;font-size:.875rem;color:var(--text-muted);}
.contato-cta p.alt a{color:var(--color-primary);font-weight:500;text-decoration:none;}
.contato-cta p.alt a:hover{text-decoration:underline;}
/* coluna direita: CTA + mapa empilhados (o mapa preenche o vão que o card
   sozinho deixava ao lado da coluna de contatos) */
.cinfo{display:flex;flex-direction:column;gap:16px;margin-top:32px;}
.cinfo .row{display:flex;gap:14px;align-items:center;}
/* fio discreto entre os canais de contato */
.cinfo .row+.row{border-top:1px solid var(--azul-200);padding-top:16px;}
.cinfo .row .itile{width:44px;height:44px;color:var(--color-secondary);font-size:24px;}
.cinfo .lbl{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);}
.cinfo .val{font-weight:500;color:var(--text-strong);}
.cinfo a.val{text-decoration:none;}
.cinfo a.val:hover{color:var(--color-primary);}
.hours{background:#fff;border-radius:var(--radius-md);padding:18px;box-shadow:var(--shadow-xs);}
/* fios entre o título e cada linha de horário (card é branco: cinza sutil) */
.hours .lbl{margin-bottom:0;padding-bottom:10px;border-bottom:1px solid var(--border-subtle);}
.hours .hr{display:flex;justify-content:space-between;font-size:.92rem;padding:9px 0;color:var(--text-body);}
.hours .hr+.hr{border-top:1px solid var(--border-subtle);}
.hours .hr:last-child{padding-bottom:0;}
.hours .hr strong{color:var(--text-strong);}
.form{display:grid;gap:16px;}
/* .form-titulo é <h2> (ordem correta de headings) com o visual do antigo h3 */
.form h3,.form .form-titulo{font-size:1.25rem;font-weight:500;color:var(--text-strong);margin:0;}
.field{display:block;}
.field .flabel{display:block;font-size:.875rem;font-weight:500;color:var(--text-body);margin-bottom:7px;}
.field .flabel .req{color:var(--danger);}
.field .flabel .fopt{color:var(--text-muted);font-weight:400;font-size:.8rem;}
.field input,.field textarea,.field select{width:100%;box-sizing:border-box;font-family:inherit;font-size:1rem;color:var(--text-strong);background:#fff;border:1.5px solid var(--border-default);border-radius:var(--radius-md);padding:13px 15px;outline:none;transition:border-color var(--dur),box-shadow var(--dur);}
/* degrau intermediário: passar o mouse já dá retorno, antes de focar */
.field input:hover:not(:focus),.field textarea:hover:not(:focus),.field select:hover:not(:focus){border-color:var(--gray-400);}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--color-primary);box-shadow:0 0 0 4px var(--focus-ring);}
/* rótulo acompanha o campo focado (dourado da marca, sem negrito extra) */
.field .flabel{transition:color var(--dur) var(--ease-out);}
.field:focus-within .flabel{color:var(--color-secondary);}
.field textarea{resize:vertical;line-height:1.5;min-height:104px;}
.field select{appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236E6A61' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:42px;}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.check{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--text-body);}
.form-ok{text-align:center;padding:30px 10px;}
.form-ok .itile{width:64px;height:64px;justify-content:center;color:var(--color-secondary);margin:0 auto 16px;font-size:38px;}

/* footer */
/* O rodapé (e o botão flutuante) agora vivem em partials/footer.php, com estilo
   próprio — a home passou a usar o mesmo arquivo das páginas internas. */

/* responsivo */
/* O .wrap trava em 1200px, então a barra dispõe de 1104px de conteúdo em QUALQUER
   desktop. O menu (6 itens) + logo + CTA não cabem abaixo disso: vira hambúrguer. */
@media (max-width:1199px){
  .desktop-nav{display:none;}
  .menu-btn{display:inline-flex;}
}
@media (max-width:900px){
  .header-cta .btn{display:none;}
  .hero .grid,.contato .grid{grid-template-columns:1fr;}
  .hero-card{max-width:460px;}
}
@media (max-width:760px){
  .two{grid-template-columns:1fr;}
}

/* ---- depoimentos (avaliações reais do Google) ---- */
/* --depo-star fica escopado: âmbar de estrela não é token de marca (--warning é status, não paleta) */
#depoimentos{--depo-star:#d99a2b;}
.depo-stars{color:var(--depo-star);letter-spacing:.1em;line-height:1;}
.depo-nota{display:inline-flex;align-items:center;gap:10px;margin:var(--space-4) 0 0;padding:9px 18px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);box-shadow:var(--shadow-xs);}
.depo-nota b{font-size:1.0625rem;font-weight:800;color:var(--text-strong);line-height:1;}
.depo-nota .depo-stars{font-size:.875rem;}
.depo-nota span:last-child{font-size:.8125rem;color:var(--text-muted);line-height:1.3;text-align:left;}
/* flex-column + flex:1 no texto = o rodapé do card ancora embaixo mesmo com citações de tamanhos diferentes */
/* cards no formato do Google (pedido da cliente, 21/07): avatar colorido com
   inicial, nome no topo, estrelas AMARELAS do Google, logo G no canto e o card
   inteiro linkando a ficha — leitura imediata de "avaliação real do Google". */
.depo{display:flex;flex-direction:column;gap:12px;position:relative;color:inherit;}
a.depo:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.depo .depo-g{position:absolute;top:20px;right:20px;width:20px;height:20px;}
.depo .depo-g svg{width:100%;height:100%;display:block;}
.depo-who{display:flex;align-items:center;gap:12px;padding:0;border-top:0;padding-right:34px;}
.depo-av{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--av,#4285F4);color:#fff;font-size:1.02rem;font-weight:500;display:inline-flex;align-items:center;justify-content:center;}
.depo-nome{display:block;font-size:.9rem;font-weight:500;color:var(--text-strong);line-height:1.3;}
.depo-who .depo-stars{display:block;margin-top:3px;font-size:.8rem;}
.depo .depo-stars{color:#FBBC04;letter-spacing:2px;}
.depo-txt{margin:0;flex:1;font-size:.9375rem;line-height:1.6;color:var(--text-body);}
.depo-fonte{display:inline-flex;align-items:center;gap:6px;padding-top:12px;border-top:1px solid var(--border-subtle);font-size:.78rem;color:var(--text-muted);}
.depo-link{margin:26px 0 0;text-align:center;}
.depo-link a{display:inline-flex;align-items:center;gap:8px;font-size:.9375rem;font-weight:700;color:var(--text-link);text-decoration:none;}
.depo-link a:hover{text-decoration:underline;}
@media (max-width:520px){
  .depo-nota{flex-wrap:wrap;justify-content:center;gap:8px;}
}

/* ---- selo de avaliação do Google: prova social na dobra (home + exame) ---- */
.gbadge{display:inline-flex;align-items:center;gap:9px;margin-top:20px;padding:9px 15px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-pill);box-shadow:var(--shadow-xs);text-decoration:none;color:var(--text-body);font-size:.85rem;line-height:1.2;transition:transform var(--dur) var(--ease-out),box-shadow var(--dur);}
.gbadge:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.gbadge .gb-stars{color:#8C7149;letter-spacing:2px;font-size:.9rem;}
.gbadge b{color:var(--text-strong);font-weight:500;font-size:1rem;}

/* ---- resposta rápida (AEO) + selo de revisão no topo do corpo do exame ---- */
.ex-tldr{background:var(--surface-page);border:1px solid var(--border-subtle);border-left:4px solid var(--color-secondary);border-radius:var(--radius-lg);padding:18px 20px;margin:0 0 26px;}
.ex-tldr .ex-tldr-lbl{display:block;font-size:.6875rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--color-secondary);margin-bottom:7px;}
.ex-tldr p{margin:0;font-size:1rem;line-height:1.6;color:var(--text-body);}
.ex-revisor{display:flex;align-items:center;gap:8px;margin:0 0 26px;font-size:.875rem;font-weight:500;color:var(--color-secondary);}
.ex-revisor .ex-rev-check{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;color:var(--color-secondary);font-size:14px;font-weight:800;flex-shrink:0;}

/* ---- CTA contextual no meio do conteúdo clínico do exame ---- */
.ex-cta-mid{margin:36px 0;padding:20px 24px;background:var(--surface-brand-soft);border:1px solid var(--azul-100);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;}
.ex-cta-mid p{margin:0;font-weight:700;color:var(--text-strong);font-size:1.02rem;line-height:1.35;}
.ex-cta-mid .btn{flex-shrink:0;}

/* ---- convênios (faixa cream) — mesma seção em /cirurgias e nas páginas
   individuais de cirurgia; regras promovidas para cá como fonte única ---- */
.exl-conv{background:var(--surface-page);padding-block:var(--space-9);}
.exl-conv .obs{text-align:center;margin-top:22px;color:var(--text-muted);font-size:.9rem;max-width:70ch;margin-inline:auto;}
@media (max-width:560px){.ex-cta-mid{flex-direction:column;align-items:stretch;text-align:center;} .ex-cta-mid .btn{width:100%;}}