/* ==========================================================================
   Componentes compartidos por todas las páginas internas (Inicio, Nosotros, etc.)
   ========================================================================== */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.page-home,.page-info{overflow-x:clip}
.btn-lg{font-size:17px;padding:16px 28px}

/* Secciones y animación de entrada */
.section{padding-block:clamp(60px,9vw,112px)}
.section-title.on-dark{color:#fff}
.reveal{opacity:1}
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .75s ease var(--d,0ms),transform .75s ease var(--d,0ms)}
.js .reveal.is-in{opacity:1;transform:none}

/* Cita destacada */
.pull{margin:30px 0 0;padding:6px 0 6px 22px;border-left:4px solid var(--fire);font-family:var(--font-head);font-size:clamp(22px,2.6vw,30px);line-height:1.3;color:var(--agave-deep);text-wrap:balance}

/* Foto con marco y sello */
.frame{position:relative;margin:0;isolation:isolate}
.frame img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:22px;box-shadow:0 30px 60px -28px rgba(36,54,60,.55)}
.frame::before{content:"";position:absolute;inset:20px -16px -20px 16px;border:2px solid var(--fire);border-radius:22px;z-index:-1}
.badge{position:absolute;left:-14px;bottom:30px;display:flex;flex-direction:column;gap:2px;background:var(--agave-deep);color:#fff;padding:16px 22px;border-radius:16px;box-shadow:0 18px 36px -16px rgba(0,0,0,.5)}
.badge strong{font-family:var(--font-head);font-size:28px;line-height:1.05}
.badge span{font-size:13px;color:#CBD8D9}

/* Lista con viñetas de verificación */
.checklist{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:18px}
.checklist li{display:flex;gap:16px;align-items:flex-start;font-size:clamp(16px,1.6vw,18px);line-height:1.55;color:#243035}
.tick{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--fire);color:#fff;margin-top:1px}

/* Etiquetas */
.chips{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-size:12.5px;font-weight:500;padding:5px 11px;border-radius:999px;background:var(--aqua);color:var(--agave-deep)}

/* Banda de cierre con botón (se usa al final de todas las páginas) */
.cta{position:relative;isolation:isolate;color:#fff;text-align:center;overflow:hidden}
.cta-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.cta::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(24,38,43,.78),rgba(24,38,43,.62))}
.cta-inner{padding-block:clamp(72px,11vw,132px)}
.cta h2{font-size:clamp(30px,5vw,52px);max-width:20ch;margin-inline:auto;text-wrap:balance}
.cta p{margin:18px auto 0;max-width:52ch;font-size:clamp(16px,1.7vw,19px);color:#E4ECEC}
.cta-actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

@media (max-width:900px){
  .frame{max-width:520px;margin-inline:auto 18px}
}
@media (max-width:700px){
  .section{padding-block:56px}
  .frame{margin-inline:0 14px}
  .frame::before{inset:14px -12px -14px 12px}
  .badge{left:-6px;bottom:20px;padding:12px 16px}
  .badge strong{font-size:23px}
  .cta-actions .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none}
}
