/* ============================================================
   TU PLANTILLA v2 — scenery-cierre.css
   Escenografía de cierre: z01-faq (signos "?"), z02-cierre
   (lluvia + horizonte) y DIVISORES GLOBALES entre secciones.
   ------------------------------------------------------------
   · Todo lo que se estila aquí lo INYECTA js/scenery-cierre.js.
   · Solo transform/opacity/clip-path se animan (en el JS, con gsap).
   · Sin gsap o con motion reducido: todo queda ESTÁTICO y sutil.
   · Paleta: azul #2440ff / negro #09090e / blanco / crema. Nada más.
   ============================================================ */

/* ── Capa decorado: entre el fondo global y el contenido ── */
.tpz-deco{
  position:absolute;inset:0;
  overflow:hidden;               /* nada se derrama a secciones vecinas */
  pointer-events:none;
  z-index:1;
  contain:layout style;
}
/* El contenido de las secciones vestidas sube a z:2 (el decorado queda detrás) */
.tpz-has-divisor > .container,
#z01-faq > .container,
#z02-cierre > .container{position:relative;z-index:2}

/* ══════════ DIVISORES GLOBALES (la sección siguiente "muerde") ══════════ */
.tpz-divisor{
  position:absolute;left:0;right:0;bottom:-1px;   /* -1px: sin hairline entre secciones */
  height:70px;z-index:1;pointer-events:none;line-height:0;
}
.tpz-divisor svg{display:block;width:100%;height:100%}
.tpz-divisor--esp svg{transform:scaleX(-1)}       /* alterna la dirección del mordisco */
.subsec > .tpz-divisor{height:42px}               /* subsecciones: padding corto → divisor bajo */
@media(max-width:767.9px){
  .tpz-divisor{height:44px}
  .subsec > .tpz-divisor{height:28px}
}

/* ── Desktop ≥1080: el contenido despeja la banda del divisor ──
   Auditoría: el padding-bottom de sección (54.4px / 32px subsec) era MENOR
   que la altura del divisor (70px / 42px) → la cta-band final entraba
   14.6px (9px en subsec) en la banda y la diagonal cruzaba los botones.
   Solo desktop: en móvil el divisor mide 44/28px y ya calza (no se toca). */
@media(min-width:1080px){
  .section.tpz-has-divisor{padding-bottom:calc(clamp(2.2rem,5vw,3.4rem) + 30px)}
  .subsec.tpz-has-divisor{padding-bottom:calc(clamp(1.2rem,3vw,2rem) + 20px)}
  /* Y durante el reveal: la CTA final entra con recorrido corto para no
     atravesar la diagonal (base.css la manda 56px abajo = dentro de la banda).
     :not(.is-shown) deja que el estado final (transform:none) siga mandando. */
  html.js .tpz-has-divisor .cta-band[data-reveal="up"]:not(.is-shown){
    transform:translateY(14px) scale(.995);
  }
}

/* ══════════ z01-faq · signos de interrogación gigantes ══════════ */
.tpz-q{
  position:absolute;
  font-family:var(--f-display),system-ui,sans-serif;
  font-weight:800;line-height:1;
  user-select:none;
  color:rgba(36,64,255,.05);                      /* respaldo si no hay text-stroke */
  will-change:transform;
}
@supports ((-webkit-text-stroke:2px red)){
  .tpz-q{color:transparent;-webkit-text-stroke:2.5px rgba(36,64,255,.07)}
  .tpz-q--b{-webkit-text-stroke-width:2px;-webkit-text-stroke-color:rgba(36,64,255,.08)}
  .tpz-q--c{-webkit-text-stroke-width:1.8px;-webkit-text-stroke-color:rgba(36,64,255,.06)}
  .tpz-q--negra{-webkit-text-stroke:2px rgba(9,9,14,.04);color:transparent}
}
.tpz-q--a{font-size:clamp(11rem,26vw,24rem);top:2%;right:-3%;transform:rotate(9deg)}
.tpz-q--b{font-size:clamp(7rem,15vw,13rem);top:40%;left:-2%;transform:rotate(-11deg)}
.tpz-q--c{font-size:clamp(5rem,9vw,8.5rem);bottom:7%;right:14%;transform:rotate(15deg)}
.tpz-q--negra{font-size:clamp(8rem,17vw,15rem);top:10%;left:5%;transform:rotate(-6deg);color:rgba(9,9,14,.035)}
@media(max-width:767.9px){
  .tpz-q--b,.tpz-q--negra{display:none}          /* móvil: solo 2 signos, los livianos */
  .tpz-q--a{right:-14%}
}

/* ══════════ z02-cierre · lluvia sutil + línea de horizonte ══════════ */
.tpz-gota{position:absolute;will-change:transform;opacity:.9}
.tpz-gota--circ{border:1.5px solid rgba(77,107,255,.38);border-radius:50%}
.tpz-gota--plus{
  color:rgba(77,107,255,.42);
  font-family:var(--f-display),system-ui,sans-serif;
  font-weight:700;line-height:1;user-select:none;
}
@media(max-width:767.9px){
  .tpz-gota--peso{display:none}                  /* móvil: 4 gotas en vez de 7 */
}

/* Arco enorme de horizonte tras el formulario (solo el borde superior se ve) */
.tpz-horizonte{
  position:absolute;left:50%;top:55%;
  width:240vw;aspect-ratio:1;
  transform:translateX(-50%);
  border:1px solid transparent;
  border-top-color:rgba(255,255,255,.08);
  border-radius:50%;
  will-change:transform;
}
@media(max-width:767.9px){
  .tpz-horizonte{width:340vw;top:60%}            /* curva más suave en pantallas angostas */
}