/* ============================================================
   Centro Oftalmológico de Divinópolis · estrutura.css
   CSS específico da página Estrutura. Tokens, reset, header/nav,
   footer, botões, .wrap/.sec-pad/.sec-tag/.sec-title/.sec-sub/.obs,
   .words e .wa-float já estão em css/base.css — não duplicados aqui.
   ============================================================ */

/* ===== CABEÇALHO DA PÁGINA ===== */
/* usa .sec-pad/.sec-tag/.sec-title/.sec-sub/.obs de base.css;
   apenas um respiro extra no topo por ficar logo abaixo do header fixo */
.page-head{padding-top:clamp(7rem,16vh,11rem)}

/* ===== VIEWER PINNED (sticky troca de mídia no scroll) — do original ===== */
.viewer{position:relative;background:var(--ink);color:var(--paper)}
.viewer-sticky{position:sticky;top:0;min-height:100dvh;display:grid;
  grid-template-columns:1fr 1fr;align-items:center;gap:2rem;max-width:1300px;margin:0 auto;padding:0 2rem;overflow:hidden}
.viewer-stage{position:relative;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--ink-2);box-shadow:var(--shadow)}
.v-frame{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:scale(1.06);
  background-size:cover;background-position:center;
  transition:opacity .8s var(--ease),transform 1.2s var(--ease);background-size:cover;background-position:center}
.v-frame.active{opacity:1;transform:scale(1)}
.v-frame .ph{color:rgba(242,235,220,.28);letter-spacing:.25em;font-size:.8rem;text-align:center}
.v-frame svg{width:46%;opacity:.32;position:absolute;left:50%;top:42%;transform:translate(-50%,-50%)}
.viewer-side{position:relative}
.v-progress{position:absolute;left:-2rem;top:0;bottom:0;width:2px;background:rgba(242,235,220,.12);border-radius:2px}
.v-progress span{position:absolute;left:0;top:0;width:100%;background:var(--accent);border-radius:2px;height:0;transition:height .3s linear}
.v-tag{font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:1rem}
.viewer-side h2{font-size:clamp(2rem,4.5vw,3.2rem);color:var(--paper);margin-bottom:1rem;min-height:1.1em}
.viewer-side .v-text{color:rgba(242,235,220,.7);font-size:1.1rem;max-width:42ch;min-height:4.5em}
.v-cap{transition:opacity .5s var(--ease),transform .5s var(--ease)}
.v-cap.swap{opacity:0;transform:translateY(12px)}
.viewer-nav{list-style:none;display:flex;gap:1.4rem;margin-top:2.6rem;flex-wrap:wrap}
.viewer-nav li{font-size:.9rem;color:rgba(242,235,220,.4);cursor:pointer;transition:color .3s;padding-bottom:.3rem;border-bottom:1.5px solid transparent}
.viewer-nav li.on{color:var(--paper);border-color:var(--accent)}

/* ===== MAIS ESPAÇOS (grade de fotos + lightbox) ===== */
.more-spaces{background:var(--paper)}
.space-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:3rem}
.space-card{aspect-ratio:4/3;border-radius:10px;overflow:hidden;position:relative;background:var(--ink-2);
  background-size:cover;background-position:center;cursor:pointer;transition:transform .5s var(--ease)}
.space-card:hover{transform:translateY(-6px)}
.space-card::after{content:attr(data-label);position:absolute;inset:0;display:flex;align-items:flex-end;padding:1.2rem;color:var(--paper);
  background:linear-gradient(transparent 55%,rgba(10,29,32,.85));font-size:.98rem;font-family:'Fraunces',serif;opacity:0;transform:translateY(10px);transition:.4s var(--ease)}
.space-card:hover::after,.space-card:focus-visible::after{opacity:1;transform:none}

/* Lightbox: mesmo padrão visual da Galeria, replicado aqui pois esta
   página não carrega css/galeria.css. */
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(8,20,22,.94);backdrop-filter:blur(8px);display:none;place-items:center;padding:4vw;opacity:0;transition:opacity .35s ease}
.lightbox.open{display:grid;opacity:1}
.lightbox-img{width:70vw;height:80vh;max-width:90vw;max-height:85vh;border-radius:8px;background-size:cover;background-position:center;background-color:var(--ink-2);box-shadow:0 40px 80px -20px rgba(0,0,0,.6);transform:scale(.94);transition:transform .4s var(--ease);display:grid;place-items:center;color:rgba(242,235,220,.3);letter-spacing:.2em}
.lightbox.open .lightbox-img{transform:scale(1)}
.lb-close{position:absolute;top:2rem;right:2rem;width:46px;height:46px;border-radius:50%;border:1px solid rgba(242,235,220,.3);background:none;color:var(--paper);font-size:1.4rem;cursor:pointer;transition:.3s}
.lb-close:hover{background:var(--paper);color:var(--ink);transform:rotate(90deg)}

/* ===== CTA FINAL (convite para agendar visita) ===== */
.cta-final{background:var(--ink);color:var(--paper);padding:clamp(5rem,14vh,9rem) 0;text-align:center}
.cta-final-inner{max-width:760px;margin:0 auto}
.cta-final .sec-title{color:var(--paper)}
.cta-final .sec-sub{color:rgba(242,235,220,.7);margin:0 auto 2.2rem;max-width:52ch}
.cta-final .sec-title.words{margin-bottom:1.2rem}

/* ===== RESPONSIVO ===== */
@media(max-width:980px){
  .viewer-sticky{grid-template-columns:1fr;gap:2.5rem;padding:6rem 2rem 4rem;align-content:center}
  .viewer-stage{aspect-ratio:16/11}
  .v-progress{display:none}
  .space-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:680px){
  .page-head{padding-top:8rem}
  .space-grid{grid-template-columns:1fr}
}

/* Movimento reduzido — específico do viewer desta página.
   Sem prefers-reduced-motion, o viewer é "pinned" e troca de frame
   conforme o scroll. Com reduce, o JS não faz o pin nem o scroll-sync;
   aqui garantimos que o frame ativo e as legendas fiquem visíveis. */
@media(prefers-reduced-motion:reduce){
  .v-frame{transition:none}
  .v-cap{transition:none}
  .v-cap.swap{opacity:1;transform:none}
}