/* Access Now · Pisolutions — la página oficial.
   Concepto: la noche de la marca (como el paseo) abre una hoja de día donde vive cada módulo. Las pantallas son las
   reales: capturas del paseo (la app del laboratorio y el panel de AccessNowWeb, paso por paso), que sitio.js va
   cambiando con los movimientos del panel (rise con desenfoque, la chispa que viaja, quien actúa pasa al frente). */

:root {
  --noche: #15131D;
  --noche-2: #1D1A27;
  --noche-3: #282436;
  --tinte: 255 255 255;
  --linea: rgba(255, 255, 255, 0.07);
  --blanco: #FFFFFF;
  --tenue: rgba(255, 255, 255, 0.64);
  --apagado: rgba(255, 255, 255, 0.4);
  --turquesa: #2FE6D8;
  --coral: #F7A08F;
  --dia: #F6F3EF;
  --papel: #FFFFFF;
  --tinta: #1B1517;
  --tinta-2: rgba(27, 21, 23, 0.6);
  --tinta-3: rgba(27, 21, 23, 0.4);
  --raya: rgba(27, 21, 23, 0.09);
  --navy: #1E3A5F;
  --navy-2: #3E6FA8;
  --verde: #15924A;
  --verde-bg: #E8F7EE;
  --ambar: #C27A12;
  --ambar-bg: #FFF3E1;
  --rojo: #C83A3A;
  --rojo-bg: #FDECEC;
  --lav: #6B4FD8;
  --lav-bg: #F2EFFF;
  --azul: #4A50C8;
  --azul-bg: #EEF0FF;
  --wa: #25D366;
  --acento-noche: linear-gradient(100deg, var(--turquesa) 0%, var(--coral) 100%);
  --acento-dia: linear-gradient(100deg, var(--navy) 10%, var(--navy-2) 90%);
  --sans: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --rebote: cubic-bezier(0.3, 1.45, 0.55, 1);
  --resorte: cubic-bezier(0.32, 1.28, 0.42, 1);
  --expo: cubic-bezier(0.16, 1, 0.3, 1);
  --suave: cubic-bezier(0.22, 1, 0.36, 1);
  --carr-1: #EDE8E1;
  --carr-2: #F4F0EB;
  --ancho: 1220px;
  color-scheme: dark;
}

/* ——— Base ——— */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; background: var(--noche); color: var(--blanco);
  font: 500 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--turquesa); outline-offset: 3px; border-radius: 6px; }
.dia :focus-visible { outline-color: var(--navy-2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.envoltura {
  width: 100%; max-width: var(--ancho); margin-inline: auto;
  padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) { .envoltura { padding-inline: 32px; } }

/* La retícula y los brillos de la noche (fijos detrás de todo). */
.fondo { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fondo::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--linea) 1px, transparent 1px), linear-gradient(90deg, var(--linea) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 25%, #000 25%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 25%, #000 25%, transparent 100%);
  opacity: 0.6;
}
.fondo i { position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; filter: blur(46px); opacity: 0.2; }
.fondo i:nth-child(1) { left: -24vmax; top: -28vmax; background: radial-gradient(circle, var(--turquesa), transparent 62%); animation: deriva 26s ease-in-out infinite alternate; }
.fondo i:nth-child(2) { right: -26vmax; top: 10vmax; background: radial-gradient(circle, var(--coral), transparent 62%); animation: deriva 31s ease-in-out infinite alternate-reverse; }
@keyframes deriva { to { transform: translate(6vmax, 5vmax) scale(1.08); } }

/* ——— Barra de avance y navegación ——— */
.avance { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; transform-origin: 0 50%; transform: scaleX(0); background: var(--acento-noche); }
.nav {
  position: sticky; top: 0; z-index: 50; transition: background .3s, box-shadow .3s, backdrop-filter .3s;
}
.nav.flota { background: color-mix(in srgb, var(--noche) 78%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 1px 0 var(--linea); }
.nav .envoltura { display: flex; align-items: center; gap: 20px; min-height: 68px; }
.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; margin-right: auto; }
.marca img { width: 38px; height: 38px; transition: transform .6s var(--rebote); }
.marca:hover img { transform: rotate(-14deg) scale(1.06); }
.marca b { font: 800 20px/1 var(--sans); letter-spacing: -0.035em; }
.marca b span { background: var(--acento-noche); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marca small { display: block; margin-top: 4px; font: 600 9px/1 var(--mono); letter-spacing: 0.28em; color: var(--apagado); text-transform: uppercase; }
.nav-links { display: none; gap: 4px; }
.nav-links a { padding: 8px 12px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--tenue); text-decoration: none; transition: color .2s, background .2s; }
.nav-links a:hover { color: var(--blanco); background: rgb(var(--tinte) / 0.06); }
@media (min-width: 980px) { .nav-links { display: flex; } }

/* ——— Botones ——— */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 700 15.5px/1 var(--sans); letter-spacing: -0.01em;
  transition: transform .45s var(--rebote), box-shadow .3s, background .25s, border-color .25s;
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: scale(0.96); transition-duration: .12s; }
.boton svg { width: 18px; height: 18px; flex: none; }
.boton.wa { background: var(--blanco); color: var(--noche); box-shadow: 0 10px 30px -10px rgba(47, 230, 216, 0.55); }
.boton.wa svg { color: #1DAA52; }
.boton.wa:hover { box-shadow: 0 16px 40px -12px rgba(47, 230, 216, 0.75); }
.boton.fantasma { background: rgb(var(--tinte) / 0.05); color: var(--blanco); border: 1px solid rgb(var(--tinte) / 0.16); }
.boton.fantasma:hover { border-color: rgba(47, 230, 216, 0.6); background: rgba(47, 230, 216, 0.08); }
.boton.chico { min-height: 40px; padding: 0 16px; font-size: 14px; }
.dia .boton.oscuro { background: var(--tinta); color: var(--dia); }
.dia .boton.linea { background: transparent; color: var(--tinta); border: 1.5px solid var(--raya); }
.dia .boton.linea:hover { border-color: var(--navy-2); color: var(--navy); }
.cuadro { width: 8px; height: 8px; border-radius: 2px; background: var(--acento-noche); }

/* ——— Frases que entran por palabra (máscara, rebote, el acento con pop, el punto que nace) ——— */
.ojo { margin: 0; font: 600 12px/1.4 var(--mono); letter-spacing: 0.3em; text-transform: uppercase; color: var(--tenue); }
.dia .ojo { color: var(--tinta-3); }
.m { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 0.05em 0.16em; margin: 0 -0.05em -0.16em; }
.w { display: inline-block; transform: translateY(110%); }
.w.ac { background: var(--acento); -webkit-background-clip: text; background-clip: text; color: transparent; }
.punto { display: inline-block; width: 0.19em; height: 0.19em; margin-left: 0.06em; border-radius: 0.03em; background: var(--acento); transform: scale(0.001); }
.entra .w { animation: sube .7s var(--rebote) both; animation-delay: calc(var(--k) * 55ms + var(--d, 0ms)); }
.entra .w.ac { animation-name: sube, pop; animation-duration: .7s, .36s; animation-timing-function: var(--rebote), ease-in-out; animation-delay: calc(var(--k) * 55ms + var(--d, 0ms)), calc(var(--k) * 55ms + var(--d, 0ms) + 200ms); }
.entra .punto { animation: nace .4s var(--rebote) both; animation-delay: calc(var(--k) * 55ms + var(--d, 0ms) + 120ms); }
@keyframes sube { from { transform: translateY(110%); } to { transform: none; } }
@keyframes pop { 50% { transform: scale(1.07); } }
@keyframes nace { from { transform: scale(0.001); } to { transform: none; } }
.noche { --acento: var(--acento-noche); }
.dia { --acento: var(--acento-dia); }

/* Lo que aparece al bajar: el rise del panel (sube, se enfoca). */
.aparece { opacity: 0; transform: translateY(22px) scale(0.985); filter: blur(6px); transition: opacity .8s var(--suave), transform .8s var(--suave), filter .8s var(--suave); transition-delay: var(--d, 0ms); }
.aparece.visto { opacity: 1; transform: none; filter: none; }

/* ——— Héroe: el texto a la izquierda y la escena a la derecha, todo en la primera pantalla ——— */
.heroe { padding-block: clamp(20px, 3vw, 40px) clamp(32px, 4vw, 56px); }
.heroe > .envoltura { display: grid; gap: clamp(28px, 4vw, 48px); align-items: center; }
.heroe-texto { display: grid; gap: 22px; align-content: center; }
@media (min-width: 1000px) {
  .heroe { min-height: calc(100vh - 68px); min-height: calc(100svh - 68px); display: grid; align-items: center; }
  .heroe > .envoltura { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(24px, 3vw, 48px); }
}
.heroe h1 { margin: 0; font: 800 clamp(46px, 6vw, 92px)/0.98 var(--sans); letter-spacing: -0.055em; text-wrap: balance; }
.lede { margin: 0; max-width: 46ch; color: var(--tenue); font-size: clamp(16.5px, 1.5vw, 19px); text-wrap: pretty; }
.lede b { color: var(--blanco); font-weight: 700; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.tiendas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--apagado); font-size: 13px; }
.tienda {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 11px; border-radius: 12px; text-decoration: none;
  border: 1px solid rgb(var(--tinte) / 0.14); background: rgb(var(--tinte) / 0.03); transition: border-color .2s, background .2s, transform .4s var(--rebote);
}
.tienda:hover { border-color: rgb(var(--tinte) / 0.34); background: rgb(var(--tinte) / 0.07); transform: translateY(-2px); }
.tienda svg { width: 20px; height: 20px; }
.tienda span { display: grid; line-height: 1.1; }
.tienda small { font-size: 11px; color: var(--apagado); }
.tienda b { font-size: 14.5px; color: var(--blanco); font-weight: 700; }

/* ——— La escena: el panel atrás, el celular adelante a la izquierda y la caseta adelante a la derecha ———
   Teléfono 870×1876 (0.4638) y ventana del panel 1440×1124 (1.2811). Sin caja: flotan sobre la noche, con un halo.
   Quien actúa pasa al frente y los demás se apagan. sitio.js traza las curvas con las medidas reales de cada aparato. */
.escena {
  position: relative; aspect-ratio: 1 / 0.92; margin-inline: auto;
  width: min(100%, 760px, calc((100vh - 130px) / 0.92)); width: min(100%, 760px, calc((100svh - 130px) / 0.92)); min-width: min(100%, 300px);
}
.escena::before {
  content: ""; position: absolute; inset: 8% 4% 4% 10%; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: 0.38;
  background: radial-gradient(closest-side at 38% 55%, rgba(47, 230, 216, 0.55), transparent), radial-gradient(closest-side at 72% 40%, rgba(247, 160, 143, 0.45), transparent);
}
.eq { position: absolute; z-index: 1; }
.eq.panel { right: 0; top: 9%; width: 78%; aspect-ratio: 1440 / 1124; }
.eq.telefono { left: 0; bottom: 3%; height: 72%; aspect-ratio: 870 / 1876; z-index: 2; }
.eq.caseta { right: 2%; bottom: 0; height: 56%; aspect-ratio: 870 / 1876; z-index: 2; }
.eq-cuerpo {
  position: absolute; inset: 0; --luz: 1; --tam: 1;
  scale: var(--tam); transform-origin: 50% 60%;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.5)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3)) brightness(var(--luz)) saturate(calc(0.6 + var(--luz) * 0.4));
  transition: scale .8s var(--resorte), filter .6s var(--suave);
  animation: flota 7s ease-in-out infinite alternate; animation-delay: calc(var(--e) * -2.3s);
}
@keyframes flota { from { transform: translateY(-0.6%); } to { transform: translateY(0.8%); } }
.eq img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; user-select: none; -webkit-user-drag: none; }
.eq img.vista { opacity: 1; }
.eq img.entra { animation: entraCaptura .6s var(--suave) both; }
/* La caseta en movimiento (media/escena/caseta.mp4, del paseo): escanea el QR, «Acceso OK», sube la pluma y pasa el auto.
   Es solo la pantalla (411×914, esquinas de 44 px) y va encima de la captura, que pone el bisel. */
.eq-video { position: absolute; z-index: 1; left: 2.76%; top: 1.28%; width: 94.25%; height: 97.44%; object-fit: cover; border-radius: 10.7% / 4.81%; opacity: 0; transition: opacity .35s; pointer-events: none; }
.escena.caseta-viva .eq-video { opacity: 1; }
/* Quien actúa: al frente y un poco más grande; los otros, en penumbra. */
.escena[data-lado] .eq .eq-cuerpo { --luz: 0.58; --tam: 0.97; }
.escena[data-lado="app"] .telefono .eq-cuerpo, .escena[data-lado="caseta"] .caseta .eq-cuerpo, .escena[data-lado="panel"] .panel .eq-cuerpo,
.escena[data-lado="todos"] .eq .eq-cuerpo { --luz: 1; --tam: 1.025; }
.escena[data-lado="panel"] .panel .eq-cuerpo, .escena[data-lado="todos"] .panel .eq-cuerpo { --tam: 1.01; }
.escena[data-lado="app"] .telefono, .escena[data-lado="caseta"] .caseta { z-index: 4; }
/* La fila de Rosa en la Bitácora (panel-3): se enciende cuando llega la señal. */
.fila-nueva {
  position: absolute; z-index: 2; left: 22.2%; top: 39%; width: 74.3%; height: 5.1%; border-radius: 0.6em; pointer-events: none; opacity: 0; overflow: hidden;
  box-shadow: 0 0 0 2px var(--turquesa), 0 0 24px 4px rgba(47, 230, 216, 0.45); transition: opacity .4s;
}
.fila-nueva::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(47, 230, 216, 0.3), transparent) no-repeat; background-size: 40% 100%; background-position: -70% 0; }
.escena.fila .fila-nueva { opacity: 1; }
.escena.fila .fila-nueva::after { animation: barre 1.1s var(--suave) .15s both; }
@keyframes barre { to { background-position: 170% 0; } }

/* Las curvas que unen los tres lados y la señal que viaja por ellas. */
.rutas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; overflow: visible; pointer-events: none; }
.ruta-base { fill: none; stroke: rgb(var(--tinte) / 0.22); stroke-width: 1.6; stroke-dasharray: 2 7; stroke-linecap: round; }
.ruta-luz { fill: none; stroke: url(#g-ruta); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(47, 230, 216, 0.7)); transition: opacity .6s; }
.senal { fill: #FFFFFF; opacity: 0; filter: drop-shadow(0 0 4px #2FE6D8) drop-shadow(0 0 12px rgba(47, 230, 216, 0.9)); }
.rutas.apaga .ruta-luz { opacity: 0; }

/* Las notas junto a cada aparato: la del paso se enciende; las demás esperan. */
.nota {
  position: absolute; z-index: 6; margin: 0; display: flex; align-items: center; gap: 10px; max-width: 48%;
  padding: 8px 14px 8px 8px; border-radius: 999px; font: 700 clamp(13px, 1.15vw, 15px)/1.25 var(--sans); letter-spacing: -0.01em;
  color: var(--tenue); background: color-mix(in srgb, var(--noche) 72%, transparent); box-shadow: inset 0 0 0 1px rgb(var(--tinte) / 0.12), 0 14px 30px -14px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0.6; scale: 0.94; transition: opacity .5s, scale .6s var(--rebote), color .4s, background .4s, box-shadow .4s;
}
.nota b { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 800 12px/1 var(--mono); color: var(--noche); background: rgb(var(--tinte) / 0.5); transition: background .4s; }
.nota span { display: inline-block; }
.nota span.cambia { animation: rise .5s var(--suave) both; }
.nota em, .remate em, .escena-leyenda em { font-style: normal; background: var(--acento-noche); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nota.activa { opacity: 1; scale: 1; color: var(--blanco); background: color-mix(in srgb, var(--noche-3) 88%, transparent); box-shadow: inset 0 0 0 1px rgba(47, 230, 216, 0.5), 0 16px 34px -12px rgba(47, 230, 216, 0.45); }
.nota.activa b { background: var(--acento-noche); }
.nota[data-nota="app"] { left: -6px; top: calc(25% - 52px); }
.nota[data-nota="panel"] { left: 22%; top: 0; }
.nota[data-nota="caseta"] { right: 0; bottom: -14px; }
.remate {
  position: absolute; z-index: 6; left: 51%; bottom: 17%; margin: 0; translate: -50% 0; white-space: nowrap;
  font: 800 clamp(16px, 1.7vw, 22px)/1.2 var(--sans); letter-spacing: -0.025em; opacity: 0; transition: opacity .5s;
}
.remate span { display: inline-block; }
.escena.remata .remate { opacity: 1; }
.escena.remata .remate span { animation: rise .6s var(--rebote) both; }
.escena-leyenda { display: none; }

/* Tablet: la escena va debajo del texto, centrada. */
@media (max-width: 999px) {
  .escena { width: min(100%, 680px); }
}
/* Celular: sin notas sobre los aparatos; el paso se lee en una sola línea debajo. */
@media (max-width: 640px) {
  .escena { aspect-ratio: 1 / 1.08; width: 100%; }
  .eq.panel { left: 0; right: auto; top: 0; width: 100%; }
  .eq.telefono { left: 2%; bottom: 0; height: 64%; }
  .eq.caseta { right: 2%; bottom: 0; height: 50%; }
  .nota, .remate { display: none; }
  .fila-nueva { box-shadow: 0 0 0 1.5px var(--turquesa), 0 0 14px 2px rgba(47, 230, 216, 0.45); }
  .escena-leyenda { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 2.8em; margin: 0; text-align: center; font: 700 17px/1.3 var(--sans); letter-spacing: -0.015em; }
  .escena-leyenda b { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 800 12px/1 var(--mono); color: var(--noche); background: var(--acento-noche); }
  .escena-leyenda span { display: inline-block; animation: rise .5s var(--suave) both; }
  .heroe > .envoltura { gap: 28px 0; }
}

/* ——— El palco: las pantallas reales (capturas del paseo) acomodadas como en el video ———
   Teléfono 870×1876 (0.4638) y ventana del panel 1440×1124 (1.2811). Con dos aparatos el teléfono va adelante a la
   izquierda y el panel atrás a la derecha; con la caseta (.tres) el panel sube al centro y la caseta va a la derecha.
   Quien actúa en el paso (data-lado) pasa al frente y crece un poco; los demás se apagan apenas. */
/* Nunca más alto que la pantalla (celular acostado, laptop baja): el ancho sale del alto disponible. */
.palco { position: relative; aspect-ratio: 16 / 10; margin-inline: auto; width: min(100%, calc((100vh - 170px) * 1.6)); width: min(100%, calc((100svh - 170px) * 1.6)); min-width: min(100%, 300px); }
.aparato {
  position: absolute; z-index: 1; --brillo: 1;
  filter: drop-shadow(0 24px 34px rgba(27, 21, 23, 0.22)) drop-shadow(0 4px 8px rgba(27, 21, 23, 0.1)) brightness(var(--brillo));
  transition: left .8s var(--expo), top .8s var(--expo), right .8s var(--expo), bottom .8s var(--expo), width .8s var(--expo), height .8s var(--expo), transform .7s var(--resorte), opacity .5s, filter .5s;
}
.noche .aparato { filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.3)) brightness(var(--brillo)); }
.aparato.panel { right: 0; top: 4%; width: 74%; aspect-ratio: 1440 / 1124; }
.aparato.telefono { left: 2%; bottom: 0; height: 96%; aspect-ratio: 870 / 1876; z-index: 2; }
.aparato.caseta { right: 0; bottom: 0; height: 80%; aspect-ratio: 870 / 1876; z-index: 2; opacity: 0; transform: translateY(6%) scale(0.96); pointer-events: none; }
.palco.tres .aparato.panel { right: auto; left: 22%; top: 0; width: 64%; }
.palco.tres .aparato.telefono { left: 0; height: 92%; }
.palco.tres .aparato.caseta { opacity: 1; transform: none; }
.palco.solo .aparato.panel { right: auto; left: 11%; top: 1%; width: 78%; }
.palco.solo .aparato.telefono { opacity: 0; transform: translateX(-8%) scale(0.96); pointer-events: none; }
.palco[data-lado="app"] .telefono, .palco[data-lado="panel"] .panel, .palco[data-lado="caseta"] .caseta { z-index: 4; transform: translateY(-1.2%) scale(1.025); }
.palco[data-lado="app"] .aparato:not(.telefono), .palco[data-lado="panel"] .aparato:not(.panel), .palco[data-lado="caseta"] .aparato:not(.caseta) { --brillo: 0.94; }
.palco[data-lado="caseta"] .panel { transform: scale(0.985); }
.aparato img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; user-select: none; -webkit-user-drag: none; }
.aparato img.vista { opacity: 1; }
.aparato img.entra { animation: entraCaptura .6s var(--suave) both; }
@keyframes entraCaptura { from { opacity: 0; transform: scale(0.992); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
.chispa {
  position: absolute; left: 0; top: 0; z-index: 9; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 4px; pointer-events: none; opacity: 0;
  background: #FFFFFF; box-shadow: 0 0 0 5px rgba(47, 230, 216, 0.35), 0 0 26px 8px rgba(47, 230, 216, 0.75);
}
.dia .chispa { background: var(--navy-2); box-shadow: 0 0 0 5px rgba(62, 111, 168, 0.22), 0 0 22px 6px rgba(62, 111, 168, 0.5); }
@media (max-width: 700px) {
  .palco { aspect-ratio: 4 / 5; width: min(100%, calc((100vh - 190px) * 0.8)); width: min(100%, calc((100svh - 190px) * 0.8)); }
  .aparato.panel, .palco.tres .aparato.panel { left: 0; right: auto; top: 0; width: 100%; }
  .aparato.telefono, .palco.tres .aparato.telefono { left: 4%; height: 68%; }
  .aparato.caseta { right: 4%; height: 58%; }
  .palco.solo .aparato.panel { left: 0; top: 18%; width: 100%; }
}

/* Lo que acompaña al palco: la leyenda del paso y sus barritas (tocar una salta a ese paso). */
@keyframes rise { from { opacity: 0; transform: translateY(0.6em); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.mod-leyenda { margin: 18px 4px 0; min-height: 2.9em; font: 800 clamp(17px, 1.8vw, 22px)/1.3 var(--sans); letter-spacing: -0.02em; color: var(--tinta); }
.mod-leyenda em { font-style: normal; background: var(--acento-dia); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mod-leyenda span { display: inline-block; animation: rise .5s var(--suave) both; }
.mod-pasos { display: flex; gap: 6px; margin: 8px 4px 0; }
.mod-pasos button { flex: 1; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.mod-pasos button::before, .mod-pasos button::after { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 4px; border-radius: 4px; }
.mod-pasos button::before { background: var(--raya); }
.mod-pasos button::after { background: var(--navy-2); transform-origin: 0 50%; transform: scaleX(var(--lleno, 0)); }
.mod-pasos button.hecho::after { --lleno: 1; }
.mod-pasos button.ahora::after { animation: llena var(--dura, 3.4s) linear forwards; }
.carrusel.pausado .mod-pasos button.ahora::after, .mod-pasos button.ahora.quieto::after { animation: none; --lleno: 1; }
@keyframes llena { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ——— El carrusel de módulos: uno a la vez, con altura fija ——— */
.carrusel { padding: clamp(14px, 2.4vw, 28px); border-radius: clamp(24px, 3vw, 36px); background: linear-gradient(160deg, var(--carr-1), var(--carr-2)); box-shadow: inset 0 0 0 1px var(--raya); }
.carr-barra { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(18px, 3vw, 28px); }
.carr-pestanas { position: relative; flex: 1; min-width: 0; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 3px; scroll-padding-inline: 16px; }
.carr-pestanas::-webkit-scrollbar { display: none; }
/* Si hay más pestañas a un lado, la orilla se desvanece (sitio.js: mas-izq, mas-der). */
.carr-pestanas.mas-der { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.carr-pestanas.mas-izq { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px); mask-image: linear-gradient(90deg, transparent, #000 36px); }
.carr-pestanas.mas-izq.mas-der { -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.carr-pestanas button {
  flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 999px; border: 0; cursor: pointer;
  font: 700 14px/1 var(--sans); color: var(--tinta-2); background: color-mix(in srgb, var(--papel) 75%, transparent); box-shadow: 0 0 0 1px var(--raya);
  transition: background .3s, color .3s, box-shadow .3s, transform .45s var(--rebote);
}
.carr-pestanas button:hover { color: var(--tinta); transform: translateY(-1px); }
.carr-pestanas button[aria-selected="true"] { background: var(--tinta); color: var(--dia); box-shadow: none; }
.carr-pestanas button i { font: 700 10.5px/1 var(--mono); opacity: 0.6; font-style: normal; }
.carr-mandos { display: flex; gap: 6px; flex: none; }
.carr-boton { width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; background: var(--papel); color: var(--tinta); box-shadow: 0 0 0 1px var(--raya); transition: transform .45s var(--rebote), background .2s; }
.carr-boton:hover { transform: translateY(-2px); }
.carr-boton:active { transform: scale(0.92); }
.carr-boton svg { width: 18px; height: 18px; }
.carr-boton[aria-pressed="true"] { background: var(--tinta); color: var(--dia); }
.carr-cuerpo { display: grid; gap: 24px; align-items: center; }
@media (min-width: 980px) { .carr-cuerpo { grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); gap: 44px; } }
.carr-textos { display: grid; }
.diapo { grid-area: 1 / 1; display: grid; gap: 14px; align-content: start; }
.diapo.entra { animation: diapoEntra .6s var(--suave) both; }
.diapo.entra.atras { animation-name: diapoAtras; }
@keyframes diapoEntra { from { opacity: 0; transform: translateX(28px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes diapoAtras { from { opacity: 0; transform: translateX(-28px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.diapo h3 { margin: 0; font: 800 clamp(28px, 3.2vw, 42px)/1.04 var(--sans); letter-spacing: -0.045em; text-wrap: balance; }
.diapo ul { list-style: none; margin: 2px 0 4px; padding: 0; display: grid; gap: 10px; }
.diapo li { position: relative; padding-left: 30px; color: var(--tinta-2); }
.diapo li b { color: var(--tinta); font-weight: 700; }
.diapo li::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 18px; height: 18px; border-radius: 6px; background: var(--azul-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A50C8' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.carr-escena { min-width: 0; touch-action: pan-y; }
@media (max-width: 979px) {
  .carr-escena { order: -1; }
  .carr-barra { flex-wrap: wrap; }
  .carr-pestanas { flex-basis: 100%; order: 2; }
  .carr-mandos { margin-left: auto; }
}
.ver-video {
  justify-self: start; display: inline-flex; align-items: center; gap: 12px; padding: 6px 16px 6px 6px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--papel); box-shadow: 0 0 0 1px var(--raya), 0 10px 26px -18px rgba(30, 58, 95, 0.5); font: 700 14px/1 var(--sans); color: var(--tinta);
  transition: transform .45s var(--rebote), box-shadow .3s;
}
.ver-video:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(62, 111, 168, 0.4), 0 16px 34px -18px rgba(30, 58, 95, 0.6); }
.ver-video img { width: 64px; height: 36px; object-fit: cover; border-radius: 999px; }
.ver-video small { font: 600 12px/1 var(--mono); color: var(--tinta-3); }
.ver-video .play { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--tinta); color: var(--dia); margin-left: -38px; margin-right: 14px; box-shadow: 0 0 0 3px var(--papel); }
.ver-video .play svg { width: 9px; height: 9px; margin-left: 1px; }

/* Íconos y pastillas de las tarjetas (detalles, interruptores, casos). */
.ico { width: 2.3em; height: 2.3em; flex: none; display: grid; place-items: center; border-radius: 0.75em; background: var(--azul-bg); color: var(--azul); }
.ico svg { width: 1.2em; height: 1.2em; }
.ico.v { background: var(--verde-bg); color: var(--verde); }
.ico.a { background: var(--ambar-bg); color: var(--ambar); }
.ico.r { background: var(--rojo-bg); color: var(--rojo); }
.ico.l { background: var(--lav-bg); color: var(--lav); }
.pastilla { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.3em 0.65em; border-radius: 1em; font: 700 0.72em/1.2 var(--sans); background: var(--azul-bg); color: var(--azul); white-space: nowrap; }
.pastilla.v { background: var(--verde-bg); color: var(--verde); }
.pastilla.n { background: #F1F1F3; color: #3B3B44; }

/* ——— La hoja de día ——— */
.dia { background: var(--dia); color: var(--tinta); color-scheme: light; position: relative; z-index: 1; }
.hoja { border-radius: clamp(28px, 4vw, 56px); margin-top: 40px; box-shadow: 0 -40px 80px -40px rgba(0, 0, 0, 0.6); }
.hoja-fin { border-radius: 0 0 clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px); }
.seccion { padding-block: clamp(72px, 10vw, 128px); }
.cabeza { display: grid; gap: 16px; max-width: 820px; margin-bottom: clamp(36px, 5vw, 60px); }
.cabeza h2 { margin: 0; font: 800 clamp(34px, 5.2vw, 68px)/1.02 var(--sans); letter-spacing: -0.05em; text-wrap: balance; }
.cabeza p { margin: 0; font-size: clamp(16px, 1.5vw, 18.5px); color: var(--tinta-2); max-width: 62ch; text-wrap: pretty; }
.noche .cabeza p { color: var(--tenue); }

/* Una visita en tres pasos (es una secuencia real: el número dice el orden). */
.pasos { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 860px) { .pasos { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.paso { position: relative; padding: 26px 24px 28px; border-radius: 24px; background: var(--papel); box-shadow: 0 0 0 1px var(--raya), 0 20px 50px -34px rgba(30, 58, 95, 0.4); overflow: hidden; }
.paso-n { display: flex; align-items: center; gap: 12px; font: 700 12px/1 var(--mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--tinta-3); }
.paso-n b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--tinta); color: var(--dia); font: 800 15px/1 var(--sans); letter-spacing: 0; }
.paso h3 { margin: 18px 0 8px; font: 800 24px/1.15 var(--sans); letter-spacing: -0.03em; }
.paso p { margin: 0; color: var(--tinta-2); }
.paso::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 3px; border-radius: 3px; background: var(--acento-dia); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s var(--suave); transition-delay: calc(var(--d, 0ms) + 300ms); }
.paso.visto::after { transform: scaleX(1); }

/* ——— Tu privada elige (los interruptores del panel) ——— */
.elige { display: grid; gap: 32px; align-items: center; }
@media (min-width: 980px) { .elige { grid-template-columns: 1.05fr 0.95fr; gap: 64px; } }
.interruptores { display: grid; gap: 10px; }
.base { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.base span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; background: var(--papel); box-shadow: 0 0 0 1px var(--raya); font: 700 13.5px/1 var(--sans); }
.base span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22C55E; }
.base small { width: 100%; font-size: 13px; color: var(--tinta-3); }
.interruptores .pedir { margin-top: 8px; justify-self: start; }
@media (max-width: 560px) { .interruptores .pedir { justify-self: stretch; white-space: normal; text-align: center; } }
.int {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 18px; border: 0; cursor: pointer; text-align: left;
  background: var(--papel); box-shadow: 0 0 0 1px var(--raya); transition: box-shadow .3s, transform .45s var(--rebote);
}
.int:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(62, 111, 168, 0.35), 0 14px 30px -22px rgba(30, 58, 95, 0.6); }
.int .ico { width: 40px; height: 40px; border-radius: 12px; font-size: 16px; }
.int > span:not(.ico) { flex: 1; display: grid; gap: 2px; }
.int b { font: 800 16px/1.2 var(--sans); letter-spacing: -0.02em; }
.int small { color: var(--tinta-2); font-size: 13.5px; line-height: 1.35; }
.int .sw { flex: none; position: relative; width: 46px; height: 28px; border-radius: 999px; background: #D9D6E0; transition: background .3s; }
.int .sw::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); transition: transform .45s var(--rebote); }
.int[aria-checked="true"] .sw { background: var(--verde); }
.int[aria-checked="true"] .sw::after { transform: translateX(18px); }
/* ——— Y los detalles ——— */
.detalles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.detalle { padding: 22px; border-radius: 22px; background: var(--papel); box-shadow: 0 0 0 1px var(--raya); display: grid; gap: 10px; align-content: start; transition: transform .5s var(--rebote), box-shadow .3s; }
.detalle:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: 0 0 0 1px rgba(62, 111, 168, 0.3), 0 24px 44px -30px rgba(30, 58, 95, 0.55); }
.detalle .ico { width: 42px; height: 42px; border-radius: 13px; font-size: 16px; transition: transform .6s var(--rebote); }
.detalle:hover .ico { transform: rotate(-10deg) scale(1.08); }
.detalle h3 { margin: 4px 0 0; font: 800 18px/1.25 var(--sans); letter-spacing: -0.02em; }
.detalle p { margin: 0; color: var(--tinta-2); font-size: 15px; }
.detalle .pastilla { justify-self: start; font-size: 11.5px; }

/* ——— Para quién ——— */
.casos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.caso { padding: 20px; border-radius: 20px; background: color-mix(in srgb, var(--papel) 55%, transparent); box-shadow: 0 0 0 1px var(--raya); }
.caso.bandera { background: var(--tinta); color: var(--dia); box-shadow: none; }
.caso.bandera p { color: var(--dia); opacity: 0.75; }
.caso h3 { margin: 0 0 6px; font: 800 18px/1.2 var(--sans); letter-spacing: -0.02em; }
.caso p { margin: 0; font-size: 14.5px; color: var(--tinta-2); }
.caso .pastilla { margin-bottom: 10px; font-size: 11px; }

/* ——— El paseo (noche) ——— */
.paseo { display: grid; gap: 28px; align-items: center; }
@media (min-width: 980px) { .paseo { grid-template-columns: 0.8fr 1.2fr; gap: 56px; } }
.cine {
  position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; text-decoration: none; cursor: pointer; border: 0; padding: 0; width: 100%;
  box-shadow: 0 0 0 1px rgb(var(--tinte) / 0.1), 0 50px 100px -40px rgba(0, 0, 0, 0.85), 0 0 140px -50px rgba(47, 230, 216, 0.5);
}
.cine img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--suave), filter .6s; }
.cine:hover img { transform: scale(1.04); filter: brightness(0.92); }
.cine .boton-play { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; display: grid; place-items: center; background: var(--blanco); color: var(--noche); box-shadow: 0 0 0 10px rgb(var(--tinte) / 0.18), 0 20px 40px -10px rgba(0, 0, 0, 0.6); transition: transform .5s var(--rebote), box-shadow .4s; }
.cine .boton-play svg { width: 28px; height: 28px; margin-left: 4px; }
.cine:hover .boton-play { transform: scale(1.08); box-shadow: 0 0 0 16px rgba(47, 230, 216, 0.22), 0 20px 40px -10px rgba(0, 0, 0, 0.6); }
.cine .dur { position: absolute; right: 14px; bottom: 14px; padding: 6px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #FFFFFF; font: 700 12px/1 var(--mono); letter-spacing: 0.08em; }
.capitulos { display: flex; flex-wrap: wrap; gap: 8px; }
.capitulos button { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgb(var(--tinte) / 0.12); background: rgb(var(--tinte) / 0.04); color: var(--tenue); font: 700 13px/1 var(--sans); cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.capitulos button:hover { border-color: rgba(47, 230, 216, 0.55); color: var(--blanco); background: rgba(47, 230, 216, 0.08); }
.capitulos button i { font: 700 10.5px/1 var(--mono); opacity: 0.6; font-style: normal; }

/* ——— Pisolutions ——— */
.servicios { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.servicio { padding: 22px; border-radius: 20px; background: rgb(var(--tinte) / 0.035); box-shadow: inset 0 0 0 1px rgb(var(--tinte) / 0.08); transition: background .3s, box-shadow .3s, transform .5s var(--rebote); }
.servicio:hover { background: rgb(var(--tinte) / 0.06); box-shadow: inset 0 0 0 1px rgba(47, 230, 216, 0.35); transform: translateY(-3px); }
.servicio svg { width: 26px; height: 26px; color: var(--turquesa); margin-bottom: 14px; }
.servicio:nth-child(even) svg { color: var(--coral); }
.servicio h3 { margin: 0 0 6px; font: 800 18px/1.2 var(--sans); letter-spacing: -0.02em; }
.servicio p { margin: 0; color: var(--tenue); font-size: 15px; }

/* ——— Llamado final y pie ——— */
.final { text-align: center; display: grid; justify-items: center; gap: 22px; padding-block: clamp(90px, 12vw, 150px) 70px; }
.final h2 { margin: 0; font: 800 clamp(40px, 7vw, 92px)/1 var(--sans); letter-spacing: -0.055em; text-wrap: balance; max-width: 15ch; }
.final p { margin: 0; color: var(--tenue); max-width: 52ch; font-size: clamp(16px, 1.5vw, 18.5px); }
.contacto { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin-top: 10px; color: var(--tenue); font-size: 15px; }
.contacto a { text-decoration: none; display: inline-flex; gap: 8px; align-items: center; transition: color .2s; }
.contacto a:hover { color: var(--blanco); }
.contacto svg { width: 16px; height: 16px; opacity: 0.8; }
.pie { border-top: 1px solid var(--linea); padding-block: 28px calc(28px + env(safe-area-inset-bottom, 0px)); color: var(--apagado); font-size: 13.5px; }
.pie .envoltura { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }
.pie nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pie a { text-decoration: none; transition: color .2s; }
.pie a:hover { color: var(--blanco); }

/* ——— El reproductor (diálogo) ——— */
.sala { width: min(96vw, calc((100vh - 140px) * 16 / 9), 1280px); max-width: none; padding: 0; border: 0; background: transparent; color: #FFFFFF; --blanco: #FFFFFF; --tinte: 255 255 255; --tenue: rgba(255, 255, 255, 0.64); --apagado: rgba(255, 255, 255, 0.4); overflow: visible; }
.sala::backdrop { background: rgba(10, 9, 14, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.sala[open] { animation: rise .45s var(--suave); }
.sala-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sala-cab b { font: 800 clamp(17px, 2vw, 22px)/1.2 var(--sans); letter-spacing: -0.02em; }
.sala-cab small { display: block; font: 600 11px/1.4 var(--mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--apagado); }
.cerrar { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(var(--tinte) / 0.18); background: rgb(var(--tinte) / 0.06); cursor: pointer; display: grid; place-items: center; transition: background .2s, transform .4s var(--rebote); }
.cerrar:hover { background: rgb(var(--tinte) / 0.14); transform: rotate(90deg); }
.cerrar svg { width: 18px; height: 18px; }
.sala video { width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; background: #0B0B0D; box-shadow: 0 0 0 1px rgb(var(--tinte) / 0.1), 0 40px 90px -30px rgba(0, 0, 0, 0.8); }
.sala-pie { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-top: 12px; color: var(--tenue); font-size: 14px; }
.sala-pie a { color: var(--turquesa); font-weight: 700; text-decoration: none; }

/* En pantallas táctiles, lo que se toca mide al menos 40 px. */
@media (pointer: coarse) {
  .carr-pestanas button, .capitulos button { min-height: 42px; }
  .mod-pasos button { height: 34px; }
  .mod-pasos button::before, .mod-pasos button::after { top: 15px; }
  .contacto a, .pie nav a { display: inline-flex; align-items: center; min-height: 40px; }
  .pie nav { gap: 0 18px; }
}

/* El botón de iniciar sesión, en la barra. */
.entrar svg { width: 18px; height: 18px; flex: none; }
.marca b { white-space: nowrap; }
.corto { display: none; }
@media (max-width: 560px) {
  .nav .envoltura { gap: 8px; }
  .marca small { display: none; }
  .marca b { font-size: 18px; }
  .marca img { width: 34px; height: 34px; }
  .nav .boton.entrar { width: 40px; padding: 0; }
  .entrar span, .nav .boton.wa .largo { display: none; }
  .nav .boton.wa .corto { display: inline; }
}

/* ——— Movimiento reducido: todo en su estado final, sin bucles ——— */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; animation-delay: 0s !important; transition-delay: 0s !important; }
  .w, .punto { transform: none; }
  .aparece { opacity: 1; transform: none; filter: none; }
  .fondo i { animation: none; }
}