/* Velora — landing.
   Colores del icono: noche #080A12, azul del play #2F7BFF, cian del anillo #6FE3FF. */

:root {
  --noche: #080A12;
  --noche-2: #0E121D;
  --carta: #141a2a;
  --borde: rgba(255, 255, 255, 0.09);
  --texto: #EEF2FF;
  --suave: #9AA6C3;
  --azul: #2F7BFF;
  --cian: #6FE3FF;
  --rojo-rec: #ff4d5e;
  --display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  --cuerpo: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --margen: clamp(16px, 5vw, 72px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--noche);
  color: var(--texto);
  font: 400 17px/1.6 var(--cuerpo);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; margin: 0; }
h2 { font-size: clamp(36px, 6vw, 76px); }
h3 { font-size: 22px; letter-spacing: -0.02em; line-height: 1.15; }
em { font-style: normal; background: linear-gradient(100deg, var(--azul), var(--cian)); -webkit-background-clip: text; background-clip: text; color: transparent; }
code { font-family: var(--mono); font-size: 0.86em; background: rgba(255,255,255,0.07); padding: 2px 6px; border-radius: 6px; }
section { position: relative; }

/* Fondo vivo */
#polvo { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.grano {
  position: fixed; inset: -50%; z-index: 60; pointer-events: none; opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grano 0.9s steps(4) infinite;
}
@keyframes grano { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }
/* «clip» recorta lo que se sale por los lados sin romper las secciones fijas (sticky). */
main, .pie { position: relative; z-index: 1; overflow-x: clip; }

/* Navegación */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: 14px var(--margen);
  transition: background 0.3s, backdrop-filter 0.3s, border-color 0.3s;
  border-bottom: 1px solid transparent;
}
.nav.con-fondo { background: rgba(8, 10, 18, 0.72); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-color: var(--borde); }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 800 21px var(--display); letter-spacing: -0.03em; }
.marca img { border-radius: 9px; }
.nav-enlaces { display: flex; gap: 26px; margin-left: auto; }
.nav-enlaces a { text-decoration: none; color: var(--suave); font-size: 15px; font-weight: 500; transition: color 0.2s; }
.nav-enlaces a:hover { color: var(--texto); }

.boton {
  --fondo: linear-gradient(120deg, var(--azul), #5a8dff 55%, var(--cian));
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 26px; border-radius: 999px; border: 0;
  background: var(--fondo); background-size: 160% 100%; background-position: 0 0;
  color: #fff; font: 600 16px var(--cuerpo); text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 30px -10px rgba(47, 123, 255, 0.8), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: transform 0.2s, background-position 0.5s, box-shadow 0.3s;
}
.boton:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: 0 16px 40px -12px rgba(111, 227, 255, 0.7); }
.boton:focus-visible, .selector button:focus-visible, summary:focus-visible { outline: 2px solid var(--cian); outline-offset: 3px; }
.boton-chico { padding: 10px 18px; font-size: 14px; }
.boton-fantasma { --fondo: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px var(--borde); }
.boton-fantasma:hover { box-shadow: inset 0 0 0 1px rgba(111,227,255,0.5); }
.boton-ancho { width: 100%; margin-top: auto; }

.kicker { font: 500 12.5px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cian); margin: 0 0 18px; display: flex; align-items: center; gap: 10px; }
.punto-rec { width: 9px; height: 9px; border-radius: 50%; background: var(--rojo-rec); box-shadow: 0 0 12px var(--rojo-rec); animation: rec 1.6s ease-in-out infinite; }
@keyframes rec { 50% { opacity: 0.25; } }

/* 1. El lente */
.lente { height: 240vh; }
.lente-fijo { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; align-items: center; }
/* Sombra a la izquierda para que el texto se lea aunque el lente pase por detrás. */
.lente-fijo::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(8,10,18,0.85) 0%, rgba(8,10,18,0.55) 34%, rgba(8,10,18,0) 58%); }
.lente-dentro { position: absolute; z-index: 2; left: 0; right: 0; top: 50%; margin: 0; transform: translateY(-50%); text-align: center; font: 800 clamp(44px, 9vw, 140px)/0.95 var(--display); letter-spacing: -0.045em; opacity: 0; pointer-events: none; text-shadow: 0 20px 80px rgba(8,10,18,0.6); }
#diafragma { position: absolute; inset: 0; width: 100%; height: 100%; }
.lente-texto {
  position: relative; z-index: 2; width: min(820px, 100%); padding: 0 var(--margen);
  display: grid; justify-items: start; gap: 0; pointer-events: none;
  will-change: opacity, transform;
}
.lente-texto .acciones { pointer-events: auto; }
.lente-texto h1 { font-size: clamp(42px, 7vw, 104px); max-width: 11ch; text-shadow: 0 10px 60px rgba(8,10,18,0.8); }
.lente-texto .linea { display: block; }
.entradilla { max-width: 38ch; color: #c8d2ea; font-size: clamp(16px, 1.6vw, 19px); margin: 26px 0 30px; text-shadow: 0 2px 20px rgba(8,10,18,0.9); }
.acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.lente-pie {
  position: absolute; z-index: 2; bottom: 28px; left: var(--margen); right: var(--margen);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font: 500 12px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--suave);
}
.lente-pie b { color: var(--texto); font-weight: 500; }
.rueda { width: 22px; height: 34px; border: 1.5px solid var(--suave); border-radius: 12px; position: relative; }
.rueda i { position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--cian); animation: rueda 1.8s ease-in-out infinite; }
@keyframes rueda { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* Entrada del texto del lente */
.lente-texto > * { opacity: 0; transform: translateY(24px); animation: subir 0.9s cubic-bezier(.2,.8,.2,1) forwards; }
.lente-texto > :nth-child(1) { animation-delay: 0.9s; }
.lente-texto > :nth-child(2) { animation-delay: 1.05s; }
.lente-texto > :nth-child(3) { animation-delay: 1.25s; }
.lente-texto > :nth-child(4) { animation-delay: 1.4s; }
@keyframes subir { to { opacity: 1; transform: none; } }

/* 2. La señal */
.senal { display: flex; align-items: center; gap: 28px; padding: 26px 0 26px var(--margen); border-block: 1px solid var(--borde); background: rgba(14,18,29,0.6); overflow: hidden; }
.medidor { display: flex; align-items: flex-end; gap: 3px; height: 28px; flex: none; }
.medidor i { width: 4px; border-radius: 2px; background: linear-gradient(var(--cian), var(--azul)); animation: barra 1.1s ease-in-out infinite alternate; }
.medidor i:nth-child(3n) { animation-duration: 0.8s; }
.medidor i:nth-child(4n+1) { animation-duration: 1.4s; }
.medidor i:nth-child(5n+2) { animation-delay: -0.5s; }
@keyframes barra { from { height: 15%; } to { height: 100%; } }
.cinta { overflow: hidden; flex: 1; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.cinta-pista { display: flex; gap: 46px; width: max-content; animation: cinta 34s linear infinite; }
.cinta-pista span { font: 600 clamp(20px, 2.4vw, 30px) var(--display); color: #4d5876; white-space: nowrap; letter-spacing: -0.02em; }
.cinta-pista span:nth-child(3n) { color: var(--texto); }
@keyframes cinta { to { transform: translateX(-50%); } }

/* 3. La tira de película */
.tira { height: 300vh; } /* motion.js la ajusta a lo que tiene que recorrer */
.tira-fija { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 4vh; }
.tira-titulo { padding: 0 var(--margen); }
.pelicula { position: relative; padding: 26px 0; background: #05070c; border-block: 1px solid #1a2134; box-shadow: 0 40px 80px -40px rgba(0,0,0,0.9); }
.perforaciones { position: absolute; left: 0; right: 0; height: 12px; background: radial-gradient(closest-side, #1f283d 92%, transparent) 0 0 / 30px 12px repeat-x; opacity: 0.95; }
.perforaciones.arriba { top: 7px; }
.perforaciones.abajo { bottom: 7px; }
.fotogramas { list-style: none; margin: 0; padding: 0 var(--margen); display: flex; gap: 18px; width: max-content; will-change: transform; }
.fotograma {
  position: relative; width: clamp(270px, 30vw, 380px); min-height: clamp(330px, 46vh, 420px);
  padding: 26px; border-radius: 14px;
  background: linear-gradient(160deg, #161d2f, #0c1120 70%);
  border: 1px solid var(--borde);
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 0.4s, border-color 0.4s;
}
.fotograma:hover { transform: translateY(-6px); border-color: rgba(111, 227, 255, 0.35); }
.fotograma .num { font: 500 12px var(--mono); color: var(--suave); letter-spacing: 0.12em; }
.fotograma p { margin: 0; color: var(--suave); font-size: 15.5px; }
.tira-progreso { margin: 0 var(--margen); height: 2px; background: var(--borde); border-radius: 2px; overflow: hidden; }
.tira-progreso i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--azul), var(--cian)); }

/* Dibujos de cada fotograma: pequeñas escenas animadas hechas con CSS. */
.dibujo { position: relative; height: 140px; border-radius: 10px; background: radial-gradient(120% 120% at 30% 0%, #1d2a4a, #0b1020 70%); overflow: hidden; margin-bottom: 8px; }
.d-ficha i { position: absolute; bottom: 16px; width: 26%; aspect-ratio: 2/3; border-radius: 6px; background: linear-gradient(160deg, var(--c1, #2F7BFF), var(--c2, #0b1530)); box-shadow: 0 10px 20px rgba(0,0,0,0.5); animation: flotar 4s ease-in-out infinite; }
.d-ficha i:nth-child(1) { left: 12%; --c1: #ff7a59; --c2: #3a1020; }
.d-ficha i:nth-child(2) { left: 37%; --c1: #6FE3FF; --c2: #0d2a44; animation-delay: -1.3s; bottom: 26px; }
.d-ficha i:nth-child(3) { left: 62%; --c1: #b07cff; --c2: #1d1240; animation-delay: -2.6s; }
.d-ficha b { position: absolute; top: 14px; right: 14px; font: 600 12px var(--mono); color: #ffd36b; }
.d-ficha b::before { content: "★ 8.2"; }
@keyframes flotar { 50% { transform: translateY(-8px); } }
.d-motor i { position: absolute; top: 50%; width: 64px; height: 64px; margin-top: -32px; border-radius: 50%; border: 6px dashed rgba(111, 227, 255, 0.7); animation: girar 6s linear infinite; }
.d-motor i:nth-child(1) { left: 26%; }
.d-motor i:nth-child(2) { left: 50%; width: 46px; height: 46px; margin-top: -4px; border-color: rgba(47, 123, 255, 0.85); animation-direction: reverse; animation-duration: 4s; }
@keyframes girar { to { transform: rotate(360deg); } }
.d-descarga i { position: absolute; left: 50%; top: 22px; width: 6px; height: 54px; margin-left: -3px; border-radius: 3px; background: linear-gradient(var(--cian), var(--azul)); animation: caer 1.6s ease-in infinite; }
.d-descarga i::after { content: ""; position: absolute; left: -9px; bottom: -6px; border: 12px solid transparent; border-top-color: var(--azul); border-bottom: 0; }
.d-descarga b { position: absolute; left: 18%; right: 18%; bottom: 22px; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; }
.d-descarga b::after { content: ""; position: absolute; inset: 0; width: 0; background: linear-gradient(90deg, var(--azul), var(--cian)); animation: llenar 3.2s ease-in-out infinite; }
@keyframes caer { 0% { transform: translateY(-30px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(26px); opacity: 0; } }
@keyframes llenar { to { width: 100%; } }
.d-flotante i { position: absolute; inset: 18px 22px; border-radius: 8px; background: linear-gradient(135deg, #22314f, #121a2c); }
.d-flotante b { position: absolute; width: 38%; aspect-ratio: 16/10; border-radius: 8px; background: linear-gradient(135deg, var(--azul), var(--cian)); box-shadow: 0 14px 30px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.2); animation: rincones 7s ease-in-out infinite; }
@keyframes rincones { 0%, 100% { left: 56%; top: 52%; } 25% { left: 8%; top: 52%; } 50% { left: 8%; top: 10%; } 75% { left: 56%; top: 10%; } }
.d-mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 14px; }
.d-mosaico i { border-radius: 6px; background: linear-gradient(135deg, var(--c, #2F7BFF), #0b1020); animation: zapping 2.4s steps(1) infinite; }
.d-mosaico i:nth-child(1) { --c: #2F7BFF; }
.d-mosaico i:nth-child(2) { --c: #ff7a59; animation-delay: -0.6s; }
.d-mosaico i:nth-child(3) { --c: #43d69b; animation-delay: -1.2s; }
.d-mosaico i:nth-child(4) { --c: #b07cff; animation-delay: -1.8s; }
@keyframes zapping { 0% { filter: none; } 50% { filter: hue-rotate(70deg) brightness(1.2); } }
.d-buscar i { position: absolute; left: 14%; right: 14%; top: 50%; height: 40px; margin-top: -20px; border-radius: 20px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); }
.d-buscar i::after { content: "Buscar películas y series"; position: absolute; left: 40px; top: 10px; font-size: 13px; color: #c8d2ea; white-space: nowrap; overflow: hidden; width: 0; animation: teclear 4s steps(25) infinite; }
.d-buscar b { position: absolute; left: calc(14% + 14px); top: 50%; width: 14px; height: 14px; margin-top: -9px; border: 2px solid var(--cian); border-radius: 50%; }
@keyframes teclear { 0% { width: 0; } 60%, 100% { width: 150px; } }
.d-escudo i { position: absolute; left: 50%; top: 50%; width: 70px; height: 84px; margin: -42px 0 0 -35px; background: linear-gradient(160deg, var(--azul), #11214a); clip-path: polygon(50% 0, 100% 16%, 100% 55%, 50% 100%, 0 55%, 0 16%); animation: latido 2.2s ease-in-out infinite; }
.d-escudo i::after { content: "PIN"; position: absolute; inset: 0; display: grid; place-items: center; font: 600 15px var(--mono); color: #fff; }
@keyframes latido { 50% { transform: scale(1.08); filter: drop-shadow(0 0 18px rgba(111,227,255,0.7)); } }
.d-seguir i { position: absolute; left: 14%; right: 14%; top: 50%; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.1); }
.d-seguir i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 64%; border-radius: 3px; background: linear-gradient(90deg, var(--azul), var(--cian)); }
.d-seguir b { position: absolute; left: calc(14% + 64% * 0.72 - 7px); top: 50%; width: 14px; height: 14px; margin-top: -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(111,227,255,0.25); animation: pulso 1.8s ease-in-out infinite; }
@keyframes pulso { 50% { box-shadow: 0 0 0 12px rgba(111,227,255,0); } }

/* Títulos de sección */
.seccion-titulo { max-width: 900px; margin: 0 auto; padding: 0 var(--margen); text-align: center; }
.seccion-titulo .kicker { justify-content: center; }
.seccion-titulo > p:last-child { color: var(--suave); font-size: 18px; margin: 22px auto 0; max-width: 46ch; }

/* 4. Aparatos: un marco que cambia de forma */
.aparatos { padding: clamp(90px, 14vh, 160px) 0 clamp(70px, 10vh, 120px); }
.selector { position: relative; display: flex; width: max-content; margin: 44px auto 0; padding: 5px; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid var(--borde); }
.selector button { position: relative; z-index: 1; border: 0; background: none; color: var(--suave); font: 600 15px var(--cuerpo); padding: 10px 24px; border-radius: 999px; cursor: pointer; transition: color 0.3s; }
.selector button[aria-selected="true"] { color: #fff; }
.selector-marca { position: absolute; top: 5px; bottom: 5px; left: 5px; border-radius: 999px; background: linear-gradient(120deg, var(--azul), #4f8cff); transition: transform 0.5s cubic-bezier(.3,1.4,.4,1), width 0.5s cubic-bezier(.3,1.4,.4,1); box-shadow: 0 8px 22px -8px rgba(47,123,255,0.9); }
.escenario { display: grid; justify-items: center; padding: 50px var(--margen) 0; perspective: 1600px; }
.marco {
  --ancho: min(900px, 92vw); --alto: calc(var(--ancho) * 0.62); --radio: 18px; --bisel: 14px;
  position: relative; width: var(--ancho); height: var(--alto);
  padding: var(--bisel); border-radius: var(--radio);
  background: linear-gradient(145deg, #2a3146, #121726);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 60px 120px -40px rgba(47,123,255,0.45), 0 30px 60px -30px #000;
  transition: width 0.8s cubic-bezier(.65,0,.25,1), height 0.8s cubic-bezier(.65,0,.25,1), border-radius 0.8s, padding 0.8s, transform 0.6s;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
}
.marco[data-aparato="ipad"] { --ancho: min(620px, 86vw); --alto: calc(var(--ancho) * 0.75); --radio: 34px; --bisel: 18px; }
.marco[data-aparato="iphone"] { --ancho: min(560px, 90vw); --alto: calc(var(--ancho) * 0.47); --radio: 46px; --bisel: 12px; }
.peana { position: absolute; left: 50%; bottom: -26px; width: 22%; height: 26px; margin-left: -11%; background: linear-gradient(#1d2335, #0e1220); clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%); transition: opacity 0.4s; }
.marco[data-aparato="mac"] .peana { opacity: 1; }
.marco:not([data-aparato="mac"]) .peana { opacity: 0; }
.pantalla { position: relative; width: 100%; height: 100%; border-radius: calc(var(--radio) - var(--bisel) * 0.6); overflow: hidden; background: #080A12; display: flex; flex-direction: column; transition: border-radius 0.8s; container-type: inline-size; }
/* La app dentro del marco. Todo se mide en cqw (ancho de la pantalla) para
   que se vea igual en grande y en pequeño. */
.app { position: absolute; inset: 0; display: flex; flex-direction: column; background: #080A12; font-family: var(--cuerpo); }
.app-barra { display: flex; align-items: center; gap: 1.2cqw; padding: 1.2cqw 2.2cqw; height: 6.4cqw; background: #0E121D; border-bottom: 1px solid rgba(255,255,255,0.06); flex: none; }
.app-luces { display: flex; gap: 0.7cqw; margin-right: 0.8cqw; }
.app-luces i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: #ff5f57; }
.app-luces i:nth-child(2) { background: #febc2e; } .app-luces i:nth-child(3) { background: #28c840; }
.app-icono { width: 3.2cqw; height: 3.2cqw; border-radius: 0.8cqw; }
.app-nombre { font: 800 2.1cqw var(--display); letter-spacing: -0.03em; margin-right: 1cqw; }
.app-tab { display: flex; align-items: center; gap: 0.6cqw; padding: 0.7cqw 1.1cqw; border-radius: 0.9cqw; color: #9AA6C3; font-size: 1.45cqw; font-weight: 500; white-space: nowrap; }
.app-tab svg { width: 1.7cqw; height: 1.7cqw; fill: currentColor; }
.app-tab em { font-style: normal; }
.app-tab.activa { background: rgba(255,255,255,0.1); color: #fff; font-weight: 600; }
.app-botones { margin-left: auto; display: flex; gap: 0.9cqw; }
.app-botones i { width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: rgba(255,255,255,0.08); }
.app-botones i:last-child { background: #2F7BFF; }
.app-cuerpo { flex: 1; overflow: hidden; position: relative; }
.app-hero { position: relative; height: 58%; overflow: hidden; }
.app-fondos { position: absolute; inset: 0; }
.app-fondos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 1.2s ease, transform 6s linear; }
.app-fondos img.visible { opacity: 1; transform: scale(1); }
.app-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,10,18,0.92) 0%, rgba(8,10,18,0.55) 40%, rgba(8,10,18,0) 70%), linear-gradient(0deg, #080A12 0%, rgba(8,10,18,0) 35%); }
.app-buscar { position: absolute; z-index: 2; top: 1.6cqw; left: 50%; transform: translateX(-50%); width: 46%; display: flex; align-items: center; gap: 0.9cqw; padding: 0 1.6cqw; height: 3.6cqw; border-radius: 99px; background: rgba(10,12,20,0.55); border: 1px solid rgba(255,255,255,0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: rgba(255,255,255,0.6); font-size: 1.35cqw; }
.app-buscar svg { width: 1.5cqw; height: 1.5cqw; color: rgba(255,255,255,0.75); }
.app-hero-texto { position: absolute; z-index: 2; left: 4cqw; bottom: 5cqw; display: grid; gap: 0.9cqw; max-width: 50%; transition: opacity 0.5s; }
.app-hero-texto small { font: 600 1.05cqw var(--mono); letter-spacing: 0.14em; color: #dfe6f7; }
.app-hero-texto b { font: 800 5cqw/0.95 var(--display); letter-spacing: -0.04em; }
.app-meta { font-size: 1.35cqw; color: #dfe6f7; font-weight: 500; }
.app-botones-hero { display: flex; gap: 1cqw; margin-top: 0.6cqw; }
.app-botones-hero i { font-style: normal; font-weight: 600; font-size: 1.35cqw; padding: 1cqw 2cqw; border-radius: 0.8cqw; }
.app-botones-hero .blanco { background: #fff; color: #000; }
.app-botones-hero .gris { background: rgba(255,255,255,0.18); color: #fff; }
.app-puntos { position: absolute; z-index: 2; left: 50%; bottom: 1.8cqw; transform: translateX(-50%); display: flex; gap: 0.5cqw; }
.app-puntos i { width: 0.8cqw; height: 0.35cqw; border-radius: 1cqw; background: rgba(255,255,255,0.35); transition: width 0.4s, background 0.4s; }
.app-puntos i.activo { width: 2.4cqw; background: #fff; }
.app-fila { padding: 1.6cqw 4cqw 0; }
.app-fila-titulo { display: flex; align-items: baseline; gap: 1cqw; margin-bottom: 1.2cqw; }
.app-fila-titulo b { font: 700 1.9cqw var(--display); letter-spacing: -0.02em; }
.app-fila-titulo small { font-size: 1.15cqw; color: #9AA6C3; }
.app-pildora { font-size: 1.15cqw; font-weight: 600; padding: 0.4cqw 1.2cqw; border-radius: 99px; background: rgba(255,255,255,0.08); color: #dfe6f7; }
.app-pildora.activa { background: #fff; color: #000; }
.app-anchas { display: flex; gap: 1.4cqw; }
.app-ancha { width: 21cqw; flex: none; }
.app-ancha .arte { position: relative; aspect-ratio: 16/9; border-radius: 0.9cqw; overflow: hidden; }
.app-ancha img, .app-poster img { width: 100%; height: 100%; object-fit: cover; }
.app-ancha .sello { position: absolute; right: 0.8cqw; bottom: 0.8cqw; font-size: 0.95cqw; font-weight: 700; padding: 0.3cqw 0.8cqw; border-radius: 99px; background: #1f7a4d; color: #fff; }
.app-ancha b { display: block; font-size: 1.3cqw; margin-top: 0.7cqw; }
.app-ancha small { display: block; font-size: 1.1cqw; color: #9AA6C3; }
.app-posters { display: flex; gap: 1.2cqw; }
.app-poster { position: relative; width: 11.2cqw; flex: none; aspect-ratio: 2/3; border-radius: 0.8cqw; overflow: hidden; }
.app-poster .marcas { position: absolute; left: 0.6cqw; top: 0.6cqw; display: flex; gap: 0.4cqw; }
.app-poster .marcas i { font: 700 0.85cqw var(--mono); font-style: normal; letter-spacing: 0.06em; padding: 0.25cqw 0.6cqw; border-radius: 0.4cqw; background: #2F7BFF; color: #fff; }
.app-poster .marcas i + i { background: rgba(0,0,0,0.6); }
/* iPad: sin semáforos de ventana. iPhone: además, pestañas solo con icono. */
.marco:not([data-aparato="mac"]) .app-luces { display: none; }
.marco[data-aparato="iphone"] .app-tab:not(.activa) em, .marco[data-aparato="iphone"] .app-nombre { display: none; }
.marco[data-aparato="iphone"] .app-buscar { width: 60%; }
.pie-aparato { margin: 56px auto 0; text-align: center; color: var(--suave); min-height: 1.6em; transition: opacity 0.3s; }

/* 5. Premium: la entrada de cine */
.premium > * { min-width: 0; }
.premium { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; padding: clamp(80px, 12vh, 150px) var(--margen); max-width: 1320px; margin: 0 auto; }
.premium-texto > p { color: var(--suave); font-size: 18px; max-width: 46ch; }
.lista-premium { list-style: none; padding: 0; margin: 26px 0; display: grid; gap: 12px; }
.lista-premium li { position: relative; padding-left: 30px; color: #c8d2ea; }
.lista-premium li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(135deg, var(--azul), var(--cian)); transform: rotate(45deg) scale(0.75); }
.lista-premium b { color: var(--texto); }
.nota { font-size: 15px !important; }
.entrada { display: flex; max-width: 100%; filter: drop-shadow(0 40px 60px rgba(0,0,0,0.6)) drop-shadow(0 0 60px rgba(47,123,255,0.18)); transform: rotate(-4deg); transition: transform 0.6s cubic-bezier(.2,.8,.2,1); }
.entrada:hover { transform: rotate(0deg) scale(1.02); }
.entrada-cuerpo, .entrada-talon { background: linear-gradient(150deg, #f4f1e8, #e2dccb); color: #121521; }
.entrada-cuerpo {
  flex: 1; padding: 28px; border-radius: 16px 0 0 16px;
  -webkit-mask: radial-gradient(circle 12px at 100% 50%, transparent 98%, #000) ;
          mask: radial-gradient(circle 12px at 100% 50%, transparent 98%, #000);
}
.entrada-talon {
  width: 120px; padding: 24px 18px; border-radius: 0 16px 16px 0; border-left: 2px dashed rgba(18,21,33,0.35);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  -webkit-mask: radial-gradient(circle 12px at 0 50%, transparent 98%, #000);
          mask: radial-gradient(circle 12px at 0 50%, transparent 98%, #000);
}
.entrada-cabeza { display: flex; align-items: center; gap: 12px; }
.entrada-cabeza img { border-radius: 9px; }
.entrada-cabeza b { display: block; font: 800 20px var(--display); letter-spacing: 0.08em; }
.entrada-cabeza span { font-size: 13px; color: #585f73; }
.entrada-sello { margin-left: auto; font: 600 10.5px var(--mono) !important; letter-spacing: 0.16em; color: #c4303f !important; border: 1.5px solid #c4303f; padding: 5px 8px; border-radius: 6px; transform: rotate(-8deg); }
.entrada-codigo { margin: 26px 0 22px; font: 500 clamp(13px, 1.45vw, 17px) var(--mono); letter-spacing: 0.02em; padding: 14px 16px; border-radius: 10px; background: #121521; color: var(--cian); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.entrada-datos { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 12px; font-weight: 600; font-size: 15px; }
.entrada-datos small { display: block; font: 500 10.5px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #6c7286; }
.entrada-talon span { font: 500 11px var(--mono); color: #6c7286; letter-spacing: 0.12em; }
.entrada-talon b { font: 800 26px var(--display); writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: 0.1em; margin: 6px 0; }
.codigo-barras { margin-top: auto; width: 60px; height: 56px; background: repeating-linear-gradient(90deg, #121521 0 2px, transparent 2px 4px, #121521 4px 5px, transparent 5px 8px, #121521 8px 11px, transparent 11px 12px); }

/* 6. Descargar */
.descargar { padding: clamp(80px, 12vh, 150px) var(--margen); }
.tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 1100px; margin: 54px auto 0; }
.tarjeta {
  position: relative; overflow: hidden; padding: 30px; border-radius: 22px;
  background: linear-gradient(160deg, rgba(23,30,48,0.9), rgba(10,14,25,0.9));
  border: 1px solid var(--borde); display: flex; flex-direction: column; gap: 12px; min-height: 430px;
  transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); transition: transform 0.25s, border-color 0.3s;
}
.tarjeta:hover { border-color: rgba(111,227,255,0.3); }
.tarjeta-luz { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(111,227,255,0.14), transparent 60%); }
.tarjeta-plataforma { margin: 0; display: flex; align-items: center; gap: 10px; font: 500 13px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cian); }
.icono-mac, .icono-movil { display: inline-block; border: 2px solid var(--cian); }
.icono-mac { width: 20px; height: 14px; border-radius: 3px; box-shadow: 0 5px 0 -3px var(--cian); }
.icono-movil { width: 11px; height: 18px; border-radius: 3px; }
.tarjeta h3 { font-size: 30px; }
.tarjeta-req { margin: 0; color: var(--suave); font-size: 14.5px; }
.pasos { margin: 8px 0 20px; padding: 0; list-style: none; counter-reset: paso; display: grid; gap: 12px; }
.pasos li { counter-increment: paso; position: relative; padding-left: 38px; color: #c8d2ea; font-size: 15.5px; }
.pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 600 12px var(--mono); background: rgba(47,123,255,0.18); color: var(--cian); }
.pasos b { color: var(--texto); font-weight: 600; }

/* 7. Preguntas */
.preguntas { padding: clamp(60px, 10vh, 120px) var(--margen) clamp(80px, 12vh, 140px); }
.acordeon { max-width: 820px; margin: 46px auto 0; display: grid; gap: 10px; }
details { border: 1px solid var(--borde); border-radius: 16px; background: rgba(20,26,42,0.6); transition: border-color 0.3s, background 0.3s; }
details[open] { border-color: rgba(111,227,255,0.28); background: rgba(23,31,52,0.8); }
summary { list-style: none; cursor: pointer; padding: 20px 56px 20px 22px; font-weight: 600; font-size: 17px; position: relative; border-radius: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; margin-top: -7px; border-right: 2px solid var(--cian); border-bottom: 2px solid var(--cian); transform: rotate(45deg); transition: transform 0.3s; }
details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
details p { margin: 0; padding: 0 22px 22px; color: var(--suave); }

/* Pie */
.pie { padding: 60px var(--margen) 40px; border-top: 1px solid var(--borde); text-align: center; color: var(--suave); font-size: 14px; }
.pie-marca { display: inline-flex; align-items: center; gap: 10px; font: 800 20px var(--display); color: var(--texto); }
.pie-marca img { border-radius: 8px; }

/* Aparecer al entrar en pantalla */
.aparece { opacity: 0; transform: translateY(40px); transition: opacity 0.9s cubic-bezier(.2,.8,.2,1), transform 0.9s cubic-bezier(.2,.8,.2,1); }
.aparece.visto { opacity: 1; transform: none; }

/* Móvil */
@media (max-width: 860px) {
  .lente-fijo { align-items: end; padding-bottom: 90px; }
  .lente-fijo::before { background: linear-gradient(0deg, rgba(8,10,18,0.92) 0%, rgba(8,10,18,0.6) 45%, rgba(8,10,18,0) 70%); }
  .nav-enlaces { display: none; }
  .nav .boton-chico { margin-left: auto; }
  .premium { grid-template-columns: 1fr; }
  .entrada { transform: rotate(-2deg); }
  .tarjetas { grid-template-columns: 1fr; }
  .tarjeta { min-height: 0; }
  .lente-pie span:last-child { display: none; }
  .entrada-talon { width: 84px; padding: 18px 10px; }
  .entrada-cuerpo { padding: 20px; }
  .entrada-datos { grid-template-columns: 1fr 1fr; }
  .entrada-codigo { white-space: normal; word-break: break-all; font-size: 13px; line-height: 1.5; }
  .lente-texto h1 { font-size: clamp(38px, 11vw, 56px); }
  .entradilla { margin: 18px 0 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
  .grano { display: none; }
}