/* =========================================================
   Fundación Colindres — Capa v7: secciones apiladas (scroll stacking)
   Cada bloque principal se queda fijo mientras el siguiente se monta
   encima con esquinas redondeadas y sombra; el que queda atrás se
   encoge y se oscurece suavemente. Los bloques más altos que la
   pantalla no se fijan (para que se puedan leer completos), pero
   igual se montan sobre el anterior.
   ========================================================= */

:root{--stack-r:28px}
@media (max-width:640px){:root{--stack-r:20px}}

main{position:relative}
main > *{position:relative;background:#fff}
main > .ticker{background:var(--green-dark)}
main > .hero,main > .page-hero{background:#5E6864}

/* Esquinas redondeadas arriba y solape sobre el bloque anterior */
main > * + *,
.footer{
  border-top-left-radius:var(--stack-r);border-top-right-radius:var(--stack-r);
  margin-top:calc(-1 * var(--stack-r));
  box-shadow:0 -18px 50px -28px rgba(15,58,42,.45);
}
.footer{position:relative;z-index:50;overflow:hidden}
main > * + .ticker{padding-top:calc(18px + var(--stack-r) / 2)}
main > .section + *,main > .section--tight + *{/* el anterior deja sitio bajo el borde */}
main > .section,main > .section--tight{padding-bottom:calc(clamp(64px, 9vw, 120px) + var(--stack-r))}
main > .section--tight{padding-bottom:calc(clamp(48px, 6vw, 80px) + var(--stack-r))}
@media (max-width:640px){
  main > .section{padding-bottom:calc(56px + var(--stack-r))}
  main > .section--tight{padding-bottom:calc(40px + var(--stack-r))}
}

/* Bloques que caben en pantalla: se fijan y el siguiente se monta encima */
.stk{position:sticky;top:0;transform-origin:50% 0;will-change:transform}
.stk{transform:scale(calc(1 - var(--cover,0) * .06)) translateY(calc(var(--cover,0) * -14px))}
.stk::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:40;
  background:#0F3A2A;opacity:calc(var(--cover,0) * .45);
}
.hero.stk::after,.page-hero.stk::after{border-radius:0}
/* el sticky del hero debe ir por debajo del header */
.header{z-index:120}
.progress{z-index:130}

/* Overlay oscuro no debe tapar elementos fijos */
.wa-float,.totop,.toast,.loader{z-index:200}
.wa-float{z-index:200}
.totop{z-index:199}

/* El pie entra montándose sobre el último bloque */
.footer{box-shadow:0 -24px 60px -30px rgba(0,0,0,.6)}

/* Dentro de un bloque fijo, nada de overflow visible raro */
.stk{overflow:hidden}
.section-head .section-num{z-index:0}

@media (prefers-reduced-motion:reduce){
  .stk{position:relative;transform:none !important}
  .stk::after{display:none}
}