/* ============================================================
   TU PLANTILLA v2 — scenery-frio.css
   Escenografía del ACTO FRÍO (f01–f05).
   Los decorados los inyecta js/scenery-frio.js como primer hijo
   de cada <section>: div.sfrio-deco absolute inset, z-index:1,
   pointer-events:none. El contenido (.container) sube a z-index:2.
   Solo azul #2440ff/#4d6bff + negro + blanco + crema. Sutil (5–12%).
   ============================================================ */

/* El contenido de las secciones frías vive SOBRE el decorado */
#f01-como > .container,
#f02-calc > .container,
#f03-planes > .container,
#f04-comparacion > .container,
#f05-packredes > .container{position:relative;z-index:2}

/* Capa decorado: entre el fondo global y el contenido.
   overflow:hidden = las piezas quedan "recortadas" por la sección
   (como las donas del ADN) y jamás producen scroll horizontal. */
.sfrio-deco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}

/* ─────────────────────────────────────────────────────────────
   f01 · ¿Cómo se hace? (#f3f6ff claro)
   Piezas esqueleto GIGANTES flotando + 1 cursor gigante outline
   ───────────────────────────────────────────────────────────── */
.sfrio-skel{position:absolute;opacity:.06}
.sfrio-skel i{display:block;background:#09090e;border-radius:999px}
.sfrio-skel i:first-child{height:clamp(18px,2.4vw,34px);width:68%}
.sfrio-skel i + i{height:clamp(10px,1.3vw,18px);margin-top:clamp(10px,1.1vw,16px)}
.sfrio-skel i:nth-child(2){width:100%}
.sfrio-skel i:nth-child(3){width:84%}
.sfrio-skel--a{top:6%;left:-5%;width:40vw;transform:rotate(-2deg)}
.sfrio-skel--b{bottom:7%;right:-6%;width:36vw;transform:rotate(1.5deg)}
.sfrio-cursor{position:absolute;top:34%;right:4%;width:clamp(90px,11vw,150px);opacity:.09;transform:rotate(-14deg)}
.sfrio-cursor svg{width:100%;height:auto;display:block;overflow:visible}

/* ─────────────────────────────────────────────────────────────
   f02 · Calculadora (#060608 negro)
   Glow radial azul + siluetas de personas outline flotando + dígitos
   ───────────────────────────────────────────────────────────── */
.sfrio-glow{
  position:absolute;inset:0;margin:auto;
  width:min(74vw,900px);height:min(74vw,900px);border-radius:50%;
  background:radial-gradient(circle,rgba(36,64,255,.16),rgba(36,64,255,.05) 44%,transparent 68%);
}
.sfrio-persona{position:absolute;color:#4d6bff;user-select:none}
.sfrio-persona svg{width:100%;height:auto;display:block;overflow:visible}
.sfrio-persona--1{left:6%;top:14%;width:clamp(3rem,7vw,6rem);opacity:.09}
.sfrio-persona--2{right:7%;top:22%;width:clamp(4.5rem,10vw,8.5rem);opacity:.12}
.sfrio-persona--3{left:15%;bottom:9%;width:clamp(2.4rem,5vw,4rem);opacity:.08}
.sfrio-dig{
  position:absolute;font-family:var(--f-display);font-weight:700;line-height:1;
  color:#f4efe6;opacity:.05;user-select:none;
}

/* ─────────────────────────────────────────────────────────────
   f03 · Planes (#0b0d26 azul-noche)
   Ondas concéntricas tras la ventana destacada + estrellas + dona
   ───────────────────────────────────────────────────────────── */
.sfrio-rings{position:absolute;left:50%;top:52%;width:640px;height:640px;margin:-320px 0 0 -320px}
.sfrio-ring{
  position:absolute;inset:0;margin:auto;border-radius:50%;
  border:1px solid #4d6bff;opacity:.12; /* estático (sin GSAP): pulso lo pone JS */
}
.sfrio-ring--1{width:200px;height:200px}
.sfrio-ring--2{width:340px;height:340px}
.sfrio-ring--3{width:480px;height:480px}
.sfrio-ring--4{width:620px;height:620px}
.sfrio-star{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:.08}
.sfrio-star:nth-of-type(3n){width:4px;height:4px}
.sfrio-dona{
  position:absolute;top:-110px;left:-90px;width:300px;height:300px;border-radius:50%;
  border:12px solid #2440ff;opacity:.35; /* dona fina recortada por el borde */
}

/* ─────────────────────────────────────────────────────────────
   f04 · Comparación (#fbfaf6 claro)
   "VS" gigante outline azul al centro-fondo con parallax
   ───────────────────────────────────────────────────────────── */
.sfrio-vs{
  position:absolute;inset:0;margin:auto;width:max-content;height:max-content;
  font-family:var(--f-display);font-weight:800;font-stretch:125%;line-height:1;
  font-size:clamp(9rem,24vw,20rem);letter-spacing:-.02em;
  color:rgba(36,64,255,.5);opacity:.07;user-select:none;
}
@supports (-webkit-text-stroke:1px #000){
  .sfrio-vs{color:transparent;-webkit-text-stroke:2px #2440ff}
}

/* ─────────────────────────────────────────────────────────────
   f05 · Pack de redes (#eef1fb claro)
   Corazones outline mini en 2 diagonales (spans, no background)
   ───────────────────────────────────────────────────────────── */
.sfrio-hearts{
  position:absolute;left:-12%;width:130%;display:flex;justify-content:space-between;
  transform:rotate(-13deg);font-size:clamp(1.1rem,2.2vw,1.9rem);line-height:1;
  color:#2440ff;opacity:.11;user-select:none;
}
.sfrio-hearts--a{top:14%}
.sfrio-hearts--b{top:68%}
.sfrio-heart{display:inline-block;transform:rotate(-8deg)}
.sfrio-heart:nth-child(even){transform:translateY(1.5em) rotate(11deg)}

/* ─────────────────────────────────────────────────────────────
   Móvil: menos piezas (los pesados se apagan)
   ───────────────────────────────────────────────────────────── */
@media(max-width:767.9px){
  .sfrio-skel--b,
  .sfrio-cursor,
  .sfrio-dig,
  .sfrio-persona--3,
  .sfrio-ring--4,
  .sfrio-star--extra,
  .sfrio-hearts--b{display:none}
  .sfrio-skel--a{width:58vw}
  .sfrio-rings{transform:scale(.62)}
  .sfrio-dona{top:-140px;left:-130px}
}

@media(prefers-reduced-motion:reduce){
  /* Sin movimiento: los decorados quedan como escenografía fija */
  .sfrio-deco *{animation:none!important}
}