/* ============================================================
   Centro Oftalmológico de Divinópolis · home.css
   CSS específico da Home: hero, trust strip, statement, stats,
   spec-grid (resumo de especialidades), blog-prévia e band.
   Extraído de _original/index_1.html sem alterações visuais.
   Tokens, reset, loader, nav, botões, .wrap/.sec-pad/.sec-tag/
   .sec-title/.sec-sub/.obs/.words, footer e .wa-float já estão
   em css/base.css — não duplicados aqui.
   ============================================================ */

/* ===== NAV sobre o hero escuro (só na Home, antes do scroll) =====
   O header é transparente até header.scrolled; nas páginas internas o
   primeiro bloco sob o header é claro (--paper), então o nav-links
   escuro (herdado de base.css) já tem contraste. Só a Home tem um
   hero de fundo escuro colado no topo, então aqui os links/CTA/burger
   precisam ficar claros até o header ganhar o fundo .scrolled. */
body.page-home header:not(.scrolled) .nav-links a,
body.page-home header:not(.scrolled) .nav-cta{color:var(--paper)}
body.page-home header:not(.scrolled) .burger span{background:var(--paper)}
body.page-home header:not(.scrolled) .brand{color:var(--paper);mix-blend-mode:normal}

/* ===== HERO (crossfade start->end + parallax) ===== */
.hero{position:relative;min-height:100dvh;display:flex;align-items:center;overflow:hidden;background:var(--ink);padding:104px 0 64px}
.hero-layer{position:absolute;inset:0;will-change:transform,opacity}
.hero-start{background:radial-gradient(120% 90% at 50% 50%,#143036 0%,#06151700 60%),var(--ink);
  display:grid;place-items:center;opacity:1;transition:opacity 1.4s var(--ease)}
.hero-end{background:radial-gradient(110% 100% at 72% 25%,var(--ink-2) 0%,var(--ink) 62%);
  opacity:0;transition:opacity 1.6s var(--ease)}
.hero.revealed .hero-start{opacity:0}
.hero.revealed .hero-end{opacity:1}
.hero-aperture{position:absolute;right:-4%;top:50%;transform:translateY(-50%);width:min(70vh,680px);height:min(70vh,680px);opacity:.42;pointer-events:none;display:grid;place-items:center}
.hero-aperture img{width:100%;height:auto;animation:slowSpin 70s linear infinite;transform-origin:50% 50%}
@keyframes slowSpin{to{transform:rotate(360deg)}}
.hero-glow{position:absolute;right:6%;top:50%;transform:translateY(-50%);width:48vw;height:48vw;background:radial-gradient(circle,rgba(200,146,74,.22),transparent 60%);filter:blur(50px)}
.start-iris{width:min(60vh,420px);height:min(60vh,420px);animation:startPulse 3s ease-in-out infinite}
@keyframes startPulse{0%,100%{transform:scale(.96);opacity:.7}50%{transform:scale(1);opacity:1}}
.hero-inner{position:relative;z-index:3;max-width:1300px;margin:0 auto;padding:0 2rem;width:100%;color:var(--paper)}
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;color:var(--accent);margin-bottom:1.6rem}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--accent)}
.hero h1{font-size:clamp(2.8rem,8vw,6.4rem);color:var(--paper);max-width:15ch}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero p{max-width:46ch;margin:1.8rem 0 2.6rem;color:rgba(242,235,220,.72);font-size:clamp(1rem,1.6vw,1.18rem)}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap}
.scroll-hint{position:absolute;bottom:2.4rem;left:50%;transform:translateX(-50%);z-index:3;color:rgba(242,235,220,.5);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.6rem;opacity:0;transition:opacity 1s ease 1.4s}
.hero.revealed .scroll-hint{opacity:1}
.scroll-hint .line{width:1px;height:38px;background:linear-gradient(rgba(242,235,220,.5),transparent);animation:scrollPulse 2s ease infinite}
@keyframes scrollPulse{0%,100%{opacity:.3;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}

/* ===== TRUST STRIP ===== */
.trust{background:var(--ink);border-top:1px solid rgba(242,235,220,.08);padding:1.7rem 0;position:relative;z-index:2}
.trust-row{display:flex;flex-wrap:wrap;gap:1.6rem 2.2rem}
.trust-item{display:flex;align-items:center;gap:.7rem;font-size:.9rem;color:rgba(242,235,220,.7);flex:1 1 210px}
.trust-item svg{width:20px;height:20px;color:var(--accent);flex:none}
.trust-item strong{color:var(--paper);font-weight:500}

/* ===== STATEMENT (frase grande estilo Apple) ===== */
.statement{padding:clamp(7rem,18vh,14rem) 0;background:var(--paper)}
.statement .wrap{max-width:1100px}
.statement h2{font-size:clamp(2.2rem,6vw,4.6rem);max-width:18ch}
.statement h2 em{font-style:normal;color:var(--ink)}
.statement .sub{margin-top:2rem;color:var(--muted);font-size:1.15rem;max-width:50ch;opacity:0;transform:translateY(20px);transition:opacity .9s var(--ease) .4s,transform .9s var(--ease) .4s}
.statement .sub.in{opacity:1;transform:none}

/* ===== STATS BARRAS (crescem no scroll) ===== */
.stats{background:var(--cream)}
.stat-row{display:grid;gap:2.2rem;margin-top:3.5rem}
.stat{display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:center;border-top:1px solid var(--line);padding-top:1.8rem}
.stat .num{font-family:'Fraunces',serif;font-size:clamp(2.4rem,5vw,3.6rem);color:var(--accent-deep);min-width:3.5ch}
.stat .meta{display:flex;flex-direction:column;gap:.6rem}
.stat .lbl{font-size:1.05rem}
.stat .bar{height:4px;background:rgba(10,29,32,.1);border-radius:4px;overflow:hidden}
.stat .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent-deep),var(--accent));border-radius:4px;transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease)}
.stat.in .bar i{transform:scaleX(var(--fill,1))}

/* ===== ESPECIALIDADES (resumo) ===== */
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3.5rem}
.spec{padding:2.4rem;border:1px solid var(--line);border-radius:8px;background:var(--paper);position:relative;overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.spec::before{content:"";position:absolute;inset:0;background:linear-gradient(160deg,var(--ink-2),var(--ink));opacity:0;transition:opacity .4s var(--ease);z-index:0}
.spec:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.spec:hover::before{opacity:1}
.spec>*{position:relative;z-index:1;transition:color .4s}
.spec:hover *{color:var(--paper)}
.spec .ic{width:48px;height:48px;border-radius:12px;background:var(--cream);display:grid;place-items:center;margin-bottom:1.4rem;transition:background .4s}
.spec:hover .ic{background:rgba(200,146,74,.18)}
.spec .ic svg{width:24px;height:24px;color:var(--accent-deep)}.spec:hover .ic svg{color:var(--accent)}
.spec h3{font-size:1.4rem;margin-bottom:.6rem}.spec p{color:var(--muted);font-size:.95rem}
.spec-cta{margin-top:2.6rem;text-align:center}

/* ===== BLOG PRÉVIA ===== */
.posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3.5rem}
.post-card{display:block;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:2rem;transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.post-card .cat{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-deep);display:block;margin-bottom:.9rem}
.post-card h3{font-size:1.3rem;margin-bottom:.7rem}
.post-card .date{font-size:.82rem;color:var(--muted);display:block;margin-bottom:.7rem}
.post-card .excerpt{color:var(--muted);font-size:.95rem}
.blog-cta{margin-top:2.6rem;text-align:center}

/* ===== ZOOM PARALLAX BAND ===== */
.band{position:relative;height:100dvh;overflow:hidden;display:grid;place-items:center;background:var(--ink)}
.band-bg{position:absolute;inset:-8%;background:radial-gradient(circle at 50% 45%,#1a3a40,var(--ink) 70%);will-change:transform}
.band-bg svg{position:absolute;left:50%;top:50%;width:60vmin;transform:translate(-50%,-50%);opacity:.18}
.band-inner{position:relative;z-index:2;text-align:center;color:var(--paper);padding:0 2rem;max-width:900px}
.band-inner h2{font-size:clamp(2.2rem,6vw,4.4rem)}
.band-inner h2 em{font-style:italic;color:var(--accent)}
.band-inner p{margin-top:1.4rem;color:rgba(242,235,220,.7);font-size:1.15rem}

/* ===== RESPONSIVO (específico da home) ===== */
@media(max-width:980px){
  .spec-grid{grid-template-columns:1fr 1fr}
  .posts-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:680px){
  .spec-grid{grid-template-columns:1fr}
  .posts-grid{grid-template-columns:1fr}
  .trust-row{gap:1.1rem}
}

/* Movimento reduzido — específico das seções da home */
@media(prefers-reduced-motion:reduce){
  .hero-start{opacity:0}
  .hero-end{opacity:1}
  .stat .bar i{transform:scaleX(var(--fill,1))}
}

/* ===== ESPAÇO KIDS (destaque do ambiente infantil na home) =====
   As fotos usam .space-card para herdar hover/legenda e abrir no
   mesmo lightbox da seção "Mais espaços". */
.kids{background:var(--cream)}
.kids-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2.2rem,5vw,4.5rem);align-items:center}
.kids-copy .sec-sub{margin-top:1.4rem}
.kids-list{list-style:none;display:flex;flex-direction:column;gap:.9rem;margin-top:2.2rem}
.kids-list li{display:flex;gap:.8rem;align-items:flex-start;color:var(--muted);font-size:.98rem;border-top:1px solid var(--line);padding-top:.9rem}
.kids-list li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;margin-top:.6rem}
.kids-cta{margin-top:2.4rem}
.kids-cta .btn-ghost{color:var(--ink);border-color:var(--line)}
.kids-cta .btn-ghost:hover{border-color:var(--ink)}
.kids-photos{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.kids-photos .lead{grid-column:1/-1;aspect-ratio:16/10}
@media(max-width:980px){.kids-grid{grid-template-columns:1fr}}
@media(max-width:680px){.kids-photos{grid-template-columns:1fr}}