/* ============================================================
   TU PLANTILLA — sub-escena.css
   La escenografía del HOME copiada 1:1 para las sub-páginas
   (cómo-funciona, planes al detalle, precios).
   Piezas calcadas de scenery-tibio.css y scenery-frio.css:
   mismos colores, mismas fuerzas (5–12%), mismas reglas.
   El movimiento acá es CSS puro (el home usa GSAP): derivas
   lentas en direcciones distintas, pulsos y titilar.
   Inyecta: js/sub-escena.js
   ============================================================ */

.se-deco{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
section:has(> .se-deco){position:relative}
section:has(> .se-deco) > .container{position:relative;z-index:2}

/* ── esqueletos gigantes (f01) ── */
.se-skel{position:absolute;opacity:.06}
.se-skel i{display:block;background:#09090e;border-radius:999px}
.se-skel i:first-child{height:clamp(18px,2.4vw,34px);width:68%}
.se-skel i + i{height:clamp(10px,1.3vw,18px);margin-top:clamp(10px,1.1vw,16px)}
.se-skel i:nth-child(2){width:100%}
.se-skel i:nth-child(3){width:84%}
.se-skel--a{top:6%;left:-5%;width:38vw;transform:rotate(-2deg)}
.se-skel--b{bottom:7%;right:-6%;width:32vw;transform:rotate(1.5deg);
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 96%);mask-image:linear-gradient(to bottom,#000 55%,transparent 96%)}
.se-deco--oscuro .se-skel i{background:#f4efe6}

/* ── cursor gigante outline (f01) ── */
.se-cursor{position:absolute;top:34%;right:4%;width:clamp(90px,11vw,150px);opacity:.09;transform:rotate(-14deg)}
.se-cursor svg{width:100%;height:auto;display:block;overflow:visible}

/* ── glow radial azul (f02) ── */
.se-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%)}

/* ── ondas concéntricas (f03) ── */
.se-rings{position:absolute;left:50%;top:52%;width:640px;height:640px;margin:-320px 0 0 -320px}
.se-ring{position:absolute;inset:0;margin:auto;border-radius:50%;border:1px solid #4d6bff;opacity:.12}
.se-ring--1{width:200px;height:200px}
.se-ring--2{width:340px;height:340px}
.se-ring--3{width:480px;height:480px}
.se-ring--4{width:620px;height:620px}

/* ── estrellas (f03/t05) ── */
.se-star{position:absolute;width:3px;height:3px;border-radius:50%;background:#2440ff;opacity:.22}
.se-deco--oscuro .se-star{background:#fff;opacity:.1}
.se-star:nth-of-type(3n){width:4px;height:4px}

/* ── dona azul recortada (f03/t01) ── */
.se-dona{position:absolute;top:-110px;left:-90px;width:300px;height:300px;border-radius:50%;border:12px solid #2440ff;opacity:.3}
.se-arc{position:absolute;top:-14%;right:max(-16vw,-220px);width:clamp(300px,32vw,500px);aspect-ratio:1;border-radius:50%;
  border:clamp(34px,4vw,64px) solid #ece6d9;opacity:.6}

/* ── cruces "+" azules (t01) y patrón de cruces en caja (t04) ── */
.se-plus{position:absolute;font-family:var(--f-display,Archivo);font-weight:800;font-size:clamp(15px,1.6vw,21px);line-height:1;color:#2440ff;opacity:.38}
.se-cruces::before{content:"";position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M15 10v10M10 15h10' stroke='rgba(9,9,14,0.06)' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.se-deco--oscuro.se-cruces::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M15 10v10M10 15h10' stroke='rgba(244,239,230,0.07)' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")}

/* ── esquinas de plano técnico (t01) ── */
.se-corner{position:absolute;width:clamp(18px,2.4vw,28px);aspect-ratio:1}
.se-corner--tl{top:14px;left:14px;border-top:2px solid rgba(9,9,14,.28);border-left:2px solid rgba(9,9,14,.28)}
.se-corner--tr{top:14px;right:14px;border-top:2px solid rgba(9,9,14,.28);border-right:2px solid rgba(9,9,14,.28)}
.se-corner--bl{bottom:14px;left:14px;border-bottom:2px solid rgba(9,9,14,.28);border-left:2px solid rgba(9,9,14,.28)}
.se-corner--br{bottom:14px;right:14px;border-bottom:2px solid rgba(9,9,14,.28);border-right:2px solid rgba(9,9,14,.28)}
.se-deco--oscuro .se-corner{border-color:rgba(244,239,230,.22)!important}

/* ── palabra gigante outline (t02 "50/50" / f04 "VS") ── */
.se-giant{position:absolute;top:6%;left:-2%;font-family:var(--f-display,Archivo);font-weight:800;
  font-size:19vw;line-height:1;letter-spacing:-.02em;white-space:nowrap;
  color:rgba(36,64,255,.5);opacity:.07;user-select:none}
@supports (-webkit-text-stroke:1px #000){
  .se-giant{color:transparent;-webkit-text-stroke:2px rgba(36,64,255,.55);opacity:.16}
  .se-deco--oscuro .se-giant{-webkit-text-stroke:2px rgba(255,255,255,.07);opacity:1}
}

/* ── rayos diagonales (t02) ── */
.se-ray{position:absolute;left:-22%;width:145%;height:clamp(70px,10vw,130px);
  background:linear-gradient(90deg,transparent,rgba(36,64,255,.09),transparent);transform:rotate(-16deg)}
.se-ray--1{top:16%}
.se-ray--2{top:60%}

/* ── burbujas fantasma + ✓✓ (t04b) ── */
.se-bub{position:absolute;border:2px solid rgba(36,64,255,.14);border-radius:18px}
.se-bub--l{left:3%;top:12%;width:clamp(120px,14vw,200px);height:clamp(60px,7vw,100px);border-bottom-left-radius:4px}
.se-bub--r{right:4%;bottom:14%;width:clamp(100px,11vw,170px);height:clamp(54px,6vw,88px);border-bottom-right-radius:4px}
.se-check{position:absolute;right:8%;top:6%;font-family:var(--f-display,Archivo);font-weight:800;
  font-size:clamp(70px,9vw,130px);line-height:1;letter-spacing:-.12em;
  color:transparent;-webkit-text-stroke:2px rgba(36,64,255,.12)}

/* ── comillas y signos "?" gigantes (t05/z01) ── */
.se-quote{position:absolute;font-family:var(--f-display,Archivo);font-weight:800;
  font-size:clamp(130px,17vw,250px);line-height:.9;
  color:transparent;-webkit-text-stroke:2.5px rgba(36,64,255,.13)}
.se-q{position:absolute;font-family:var(--f-display,Archivo);font-weight:800;font-size:clamp(4rem,8vw,7.5rem);
  line-height:1;color:transparent;-webkit-text-stroke:2px rgba(36,64,255,.16)}

/* ══════ EL MOVIMIENTO — derivas en direcciones distintas ══════ */
@media(prefers-reduced-motion:no-preference){
  .se-deco .se-skel--a,.se-deco .se-bub--l{animation:se-derivaA 11s ease-in-out infinite alternate}
  .se-deco .se-skel--b,.se-deco .se-bub--r{animation:se-derivaB 13s ease-in-out infinite alternate}
  .se-deco .se-cursor{animation:se-derivaC 9s ease-in-out infinite alternate}
  .se-deco .se-plus{animation:se-derivaB 8s ease-in-out infinite alternate}
  .se-deco .se-plus:nth-of-type(2n){animation:se-derivaA 10s ease-in-out infinite alternate}
  .se-deco .se-dona,.se-deco .se-arc{animation:se-giro 60s linear infinite}
  .se-deco .se-giant,.se-deco .se-quote,.se-deco .se-q,.se-deco .se-check{animation:se-derivaA 14s ease-in-out infinite alternate}
  .se-deco .se-ring{animation:se-pulso 5s ease-in-out infinite}
  .se-deco .se-ring--2{animation-delay:1.2s}
  .se-deco .se-ring--3{animation-delay:2.4s}
  .se-deco .se-ring--4{animation-delay:3.6s}
  .se-deco .se-star{animation:se-titila 3.4s ease-in-out infinite}
  .se-deco .se-star:nth-of-type(2n){animation-delay:1.1s}
  .se-deco .se-star:nth-of-type(3n){animation-delay:2.2s}
}
@keyframes se-derivaA{from{translate:0 0}to{translate:10px -16px}}
@keyframes se-derivaB{from{translate:0 0}to{translate:-12px 12px}}
@keyframes se-derivaC{from{translate:0 0;rotate:-14deg}to{translate:-8px -18px;rotate:-9deg}}
@keyframes se-giro{to{rotate:360deg}}
@keyframes se-pulso{0%,100%{opacity:.12;scale:1}50%{opacity:.2;scale:1.03}}
@keyframes se-titila{0%,100%{opacity:.22}50%{opacity:.05}}

/* ══════ Móvil: menos piezas, como el home ══════ */
@media(max-width:767.9px){
  .se-skel--b,.se-cursor,.se-ring--4,.se-ray,.se-bub--r,.se-arc{display:none}
  .se-skel--a{width:56vw}
  .se-rings{transform:scale(.62)}
  .se-giant{font-size:30vw}
  .se-corner{width:16px}
}

/* ── el footer también es escena: puntos + estrellas, como el cierre del home ── */
.footer{position:relative;overflow:hidden;
  background:radial-gradient(rgba(244,239,230,.06) 1px,transparent 1px) 0 0/26px 26px,#060608!important}
.footer > .container{position:relative;z-index:2}

/* ── portero: lo que no se ve, no anima (30-ago) ── */
[data-off] *, [data-off] *::before, [data-off] *::after,
.px-cinta[data-off] .px-cinta-pista{ animation-play-state:paused !important }

/* ── controles mslider compartidos (mismo lenguaje del home) ── */
.mslider-ctl { display: flex; align-items: center; justify-content: center; gap: .9rem; margin-top: .6rem; }
.mslider-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 2px solid #09090e; color: #09090e;
  box-shadow: 3px 3px 0 #09090e; font-size: 1.05rem;
  display: grid; place-items: center; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s;
}
.mslider-arrow:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #09090e; }
.mslider-arrow[disabled] { opacity: .35; box-shadow: none; }
.mslider-dots { display: flex; gap: .15rem; }
.mslider-dot { padding: 12px 8px; background: none; border: 0; cursor: pointer; }
.mslider-dot::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; background: #c9cede; transition: .3s; }
.mslider-dot.is-active::before { background: var(--azul, #2440ff); transform: scale(1.35); }
.mslider-ctl--dark .mslider-arrow { background: transparent; border-color: rgba(244,239,230,.9); color: #f4efe6; box-shadow: 0 3px 0 #000; }
.mslider-ctl--dark .mslider-dot::before { background: rgba(244,239,230,.28); }
.mslider-ctl--dark .mslider-dot.is-active::before { background: var(--azul-glow, #3a55ff); }

/* ── 30-ago · variante oscura de plus y aros (zonas #0d1024) ── */
.se-deco--oscuro .se-plus{color:#4d6bff;opacity:.5}
.se-deco--oscuro .se-ring{border-color:#8fa2ff}