/* BioPurity — piezas interactivas: carga, sonido, neblina, medidor, iones,
   molinillo, comparador y ciclo del cielo. Se carga la última. */

/* ---------- Pantalla de carga ---------- */

.carga{display:none}
.cine .carga{position:fixed;inset:0;z-index:92;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  color:#fff;text-align:center;padding:24px;animation:telonSeguro .01s 12s forwards}
.carga p{margin:0}
.carga-marca{font-size:11px;font-weight:700;letter-spacing:.5em;padding-left:.5em;color:rgba(255,255,255,.55)}
.carga-marca span{color:#3fd0ff}
.carga-num{font-size:clamp(72px,13vw,168px);font-weight:300;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff 30%,rgba(120,210,255,.7));-webkit-background-clip:text;background-clip:text;color:transparent}
.carga-num small{font-size:.28em;letter-spacing:0;margin-left:.1em;vertical-align:top;position:relative;top:.35em}
.carga-barra{width:min(260px,60vw);height:1px;background:rgba(255,255,255,.14);overflow:hidden}
.carga-barra i{display:block;height:100%;background:linear-gradient(90deg,#35ad2c,#3fd0ff);transform:scaleX(0);transform-origin:0 50%;box-shadow:0 0 12px #3fd0ff}
.entrar{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:6px}
.entrar-si{display:inline-flex;align-items:center;gap:12px;font:inherit;font-size:13px;font-weight:800;letter-spacing:2px;color:#02101f;cursor:pointer;
  background:#fff;border:0;border-radius:999px;padding:16px 28px;box-shadow:0 0 0 0 rgba(63,208,255,.6);animation:latido 2.2s ease-out infinite}
.entrar-si:hover{background:#dff5ff}
.entrar-si .barras i{background:#0b8fe5}
.entrar-no{font:inherit;font-size:12px;letter-spacing:1px;color:rgba(255,255,255,.6);background:none;border:0;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.entrar-no:hover{color:#fff}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(63,208,255,.55)}100%{box-shadow:0 0 0 22px rgba(63,208,255,0)}}

/* ---------- Barras de sonido y botón ---------- */

.barras{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.barras i{display:block;width:3px;height:100%;border-radius:2px;background:currentColor;transform-origin:50% 100%;transform:scaleY(.3)}
.entrar-si .barras i,.sonido[aria-pressed="true"] .barras i{animation:barra 1s ease-in-out infinite}
.barras i:nth-child(2){animation-delay:-.4s!important}.barras i:nth-child(3){animation-delay:-.7s!important}.barras i:nth-child(4){animation-delay:-.2s!important}
@keyframes barra{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

.sonido{display:none}
.cine .sonido{position:fixed;z-index:80;right:max(18px,3vw);bottom:max(18px,env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:10px;
  font:inherit;color:var(--azul-noche);background:rgba(255,255,255,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(10,55,97,.12);border-radius:999px;padding:10px 16px;cursor:pointer;opacity:0;visibility:hidden;
  box-shadow:0 10px 30px -18px rgba(10,55,97,.6);transition:background .3s}
.sonido small{font-size:10px;font-weight:800;letter-spacing:2px}
.sonido:hover{background:#fff}
.sonido[aria-pressed="false"] .barras i{transform:scaleY(.3)}

/* ---------- Neblina, onda y efectos ---------- */

.smog-sat,.smog-bruma,.fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.smog-sat{z-index:5;mix-blend-mode:saturation;opacity:.8}
.smog-bruma{z-index:5;opacity:.42}
.fx{z-index:21}
.onda{position:absolute;z-index:19;left:50%;top:50%;width:40px;height:40px;margin:-20px;border-radius:50%;pointer-events:none;opacity:0;
  border:2px solid rgba(255,255,255,.95);box-shadow:0 0 30px 6px rgba(120,220,255,.6),inset 0 0 30px 6px rgba(255,255,255,.5)}
.brand{pointer-events:none}
.brand .hero-cta{pointer-events:auto}

/* Iones y molinillo se pueden tocar */
.ion{pointer-events:auto;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;transition:filter .3s}
.ion:hover{filter:brightness(1.15) drop-shadow(0 0 12px rgba(255,255,255,.8))}
.ion.cogido{cursor:grabbing;filter:brightness(1.25) drop-shadow(0 0 18px rgba(255,255,255,.9))}
.pinwheel-rotor{--spin:0deg;rotate:calc(var(--rot) + var(--spin));pointer-events:auto;cursor:grab;touch-action:none}
.pinwheel-rotor:active{cursor:grabbing}

/* Pista para limpiar el aire */
.pista-cursor{position:absolute;z-index:22;left:50%;bottom:92px;transform:translateX(-50%);margin:0;pointer-events:none;opacity:0;
  font-size:12px;font-weight:700;letter-spacing:1.5px;color:#fff;white-space:nowrap;text-shadow:0 1px 10px rgba(0,40,80,.6);
  padding:9px 16px;border-radius:999px;background:rgba(3,28,60,.28);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pc-tactil{display:none}
@media (pointer:coarse){.pc-escritorio{display:none}.pc-tactil{display:inline}}

/* ---------- Medidor de calidad del aire ---------- */

.medidor{position:absolute;z-index:22;left:4.7%;bottom:28px;width:150px;padding:14px 14px 12px;border-radius:18px;text-align:center;opacity:0;
  color:var(--azul-noche);background:rgba(255,255,255,.72);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);
  border:1px solid rgba(255,255,255,.7);box-shadow:0 18px 40px -22px rgba(3,28,60,.6)}
.medidor-arco{display:block;width:100%;height:auto;overflow:visible}
.medidor-arco path{fill:none;stroke-width:9;stroke-linecap:round}
.medidor-arco .pista{stroke:rgba(10,55,97,.1)}
.medidor-arco .valor{stroke:url(#gradCalidad);stroke-dasharray:100;stroke-dashoffset:70;transition:stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1)}
.medidor-num{display:flex;justify-content:center;margin:-34px 0 2px;font-size:30px;font-weight:800;line-height:1;height:1em;overflow:hidden;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.od{display:block;width:.62em;height:1em;overflow:hidden;transition:width .4s}
.od.oculto{width:0}
.od span{display:flex;flex-direction:column;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.od span b{display:block;height:1em;line-height:1em;font-weight:800}
.medidor small{display:block;margin-top:6px;font-size:8.5px;font-weight:800;letter-spacing:1.6px;color:#5d7a92}
.medidor-estado{display:inline-block;margin-top:5px;font-size:11px;font-weight:800;letter-spacing:.5px;padding:3px 10px;border-radius:999px;color:#fff;transition:background .5s}
.medidor[data-nivel="mala"] .medidor-estado{background:#e5533d}
.medidor[data-nivel="regular"] .medidor-estado{background:#e39b1b}
.medidor[data-nivel="buena"] .medidor-estado{background:#6bbf3a}
.medidor[data-nivel="excelente"] .medidor-estado{background:#1f9a3a;box-shadow:0 0 16px rgba(53,173,44,.7)}

/* ---------- Comparador antes / después ---------- */

.comparador{position:relative;margin-top:44px;aspect-ratio:16/8;max-width:100%;border-radius:26px;overflow:hidden;
  box-shadow:0 40px 80px -40px rgba(10,55,97,.55),0 0 0 1px rgba(10,55,97,.08);
  background:linear-gradient(90deg,#9d927f 0 var(--corte),#dff2ff var(--corte) 100%)}
.comparador canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.corte{position:absolute;top:0;bottom:0;left:var(--corte);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 18px rgba(255,255,255,.9);pointer-events:none}
.tirador{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px;border-radius:50%;display:grid;place-items:center;color:var(--azul-noche);
  background:#fff;box-shadow:0 10px 30px -8px rgba(3,28,60,.55),0 0 0 6px rgba(255,255,255,.35)}
.tirador svg{width:24px;height:24px}
.corte-rango{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none}
.comparador:focus-within .tirador{box-shadow:0 0 0 4px var(--cian),0 10px 30px -8px rgba(3,28,60,.55)}
.etq{position:absolute;top:20px;font-size:11px;font-weight:800;letter-spacing:2px;padding:8px 14px;border-radius:999px;pointer-events:none;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.etq-sucio{left:20px;color:#fff;background:rgba(60,48,32,.45)}
.etq-limpio{right:20px;color:var(--azul-noche);background:rgba(255,255,255,.7)}
.diferencia .nota{margin:14px 0 0;font-size:12px!important;color:#7d93a6}

/* El botón lo mueve GSAP (efecto magnético): CSS no debe interpolar su transform. */
.boton{transition:filter .2s,background .3s}

/* Hoja del formulario */
.hoja-envio{position:fixed;z-index:120;width:74px;height:auto;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(18,93,28,.35))}
.chispa-envio{position:fixed;z-index:119;width:7px;height:7px;margin:-3.5px;border-radius:50%;pointer-events:none;background:#bff3ff;box-shadow:0 0 10px 3px rgba(63,208,255,.8)}
.boton.enviado{background:linear-gradient(135deg,#35ad2c,#1f7f2a)}

/* ---------- Ciclo del cielo ---------- */

.cielo{display:none}
.cine .cielo{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;
  --ca:rgb(255,255,255);--cb:rgb(255,255,255);--ax:78vw;--ay:18vh;--ac:rgba(255,240,190,0);
  background:linear-gradient(180deg,var(--ca),var(--cb))}
.astro{position:absolute;left:var(--ax);top:var(--ay);width:44vmin;height:44vmin;margin:-22vmin;border-radius:50%;
  background:radial-gradient(circle,var(--ac) 0,transparent 62%)}
/* El fondo del body se pinta encima de las capas con z-index negativo: fuera, para que se vea el cielo. */
.cine body{background:transparent}
.cine #nosotros,.cine #diferencia,.cine #contacto{background:transparent}
.cine .cinta{background:transparent;border-color:rgba(10,55,97,.08)}

@media (max-width:800px){
  .medidor{width:118px;left:14px;bottom:18px;padding:10px 10px 9px;border-radius:14px}
  .medidor-num{font-size:24px;margin-top:-28px}
  .medidor small{font-size:7px;letter-spacing:1px}
  .pista-cursor{bottom:auto;top:calc(50% + 190px);font-size:11px;white-space:normal;width:max-content;max-width:80vw;text-align:center}
  .comparador{aspect-ratio:4/5;border-radius:20px}
  .etq{top:14px;font-size:9px;padding:6px 10px}
  .etq-sucio{left:14px}.etq-limpio{right:14px}
  .cine .sonido{padding:9px 12px}
  .cine .sonido small{display:none}
}