/* Portada v3 (diseño de Carlos, 19 oct): texto a la izquierda, abanico de cartas de video a la derecha,
   fila de pasos con el paquete de tokens y visor de cada carta. Va después de estilo.css. */
.hero-v3 {
	--w: clamp(146px, 11.2vw, 240px);
	text-align: left; min-height: 0; padding: clamp(28px, 4.5vw, 56px) 0 clamp(20px, 3vw, 36px);
	background:
		radial-gradient(ellipse 34% 46% at 12% 0%, rgb(var(--acento-rgb) / .18), transparent 70%),
		radial-gradient(ellipse 30% 40% at 78% 4%, rgb(var(--acento-4-rgb) / .16), transparent 72%),
		radial-gradient(ellipse 60% 50% at 70% 60%, rgb(var(--acento-rgb) / .07), transparent 75%),
		linear-gradient(180deg, #0c0a0d 0%, var(--fondo) 100%);
}
.hero-luces {
	position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
	background:
		radial-gradient(circle at 18% 22%, rgb(var(--acento-2-rgb) / .35) 0 1.5px, transparent 2.5px),
		radial-gradient(circle at 63% 12%, rgb(var(--acento-2-rgb) / .3) 0 1.2px, transparent 2.2px),
		radial-gradient(circle at 88% 30%, rgb(var(--acento-2-rgb) / .3) 0 1.6px, transparent 2.6px),
		radial-gradient(circle at 41% 8%, rgb(var(--acento-2-rgb) / .25) 0 1px, transparent 2px),
		conic-gradient(from 200deg at 12% -10%, transparent 0deg, rgb(var(--acento-rgb) / .09) 14deg, transparent 30deg),
		conic-gradient(from 150deg at 80% -10%, transparent 0deg, rgb(var(--acento-rgb) / .08) 16deg, transparent 32deg);
}
.hero-rejilla { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(20px, 3vw, 44px); align-items: center; }
.hero-texto { min-width: 0; }
.hero-sobre { display: block; color: var(--ambar); font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; font-weight: 700; }
.hero-v3 .hero-titulo {
	margin: 12px 0 0; font-family: "Cinzel", "Times New Roman", serif; font-weight: 800; text-transform: uppercase; letter-spacing: .01em;
	font-size: clamp(1.9rem, 3.3vw, 3.15rem); line-height: 1.02; text-shadow: 0 6px 30px rgba(0, 0, 0, .55);
}
.hero-v3 .hero-titulo .texto-oro { font-size: 1.38em; line-height: 1.02; filter: drop-shadow(0 4px 18px rgb(var(--acento-rgb) / .25)); }
.hero-lema { margin: 10px 0 0; font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.2; }
.hero-v3 .hero-sub { margin: 10px 0 20px; max-width: 560px; font-size: clamp(.95rem, 1.4vw, 1.04rem); color: #d6cfc3; }
.hero-v3 .compositor { width: 100%; max-width: 640px; margin: 0; border-color: rgb(var(--acento-rgb) / .28); }
.hero-v3 .compositor textarea { min-height: 58px; }
.hero-v3 .generos { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.hero-v3 .generos::-webkit-scrollbar { display: none; }
.hero-v3 .ideas { justify-content: flex-start; margin: 14px 0 0; }

/* Abanico: la carta activa se decide por zonas fijas (portada.js pone data-activa); así mover las cartas no cambia
   cuál queda bajo el mouse y no hay parpadeo. La activa se endereza, crece y brilla; sus vecinas se apartan. */
.abanico { position: relative; height: calc(var(--w) * 16 / 9 * 1.22); }
.abanico-plano { position: absolute; inset: 0; }
.carta {
	--x: 0px; --r: 0deg; --s: 1; --y: 0px; --dx: 0px;
	position: absolute; top: 50%; left: 50%; width: var(--w); aspect-ratio: 9 / 16; padding: 0; margin: 0; overflow: hidden; cursor: pointer;
	border-radius: 10px; border: 2px solid rgb(var(--acento-2-rgb) / .55); background: #050506; color: var(--texto);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 26px 60px rgba(0, 0, 0, .65), 0 0 26px rgb(var(--acento-rgb) / .22);
	transform: translate(-50%, -50%) translateX(calc(var(--x) + var(--dx))) translateY(var(--y)) rotate(var(--r)) scale(var(--s));
	transition: transform .45s cubic-bezier(.22, .9, .3, 1), box-shadow .3s ease, filter .3s ease, border-color .3s ease;
	will-change: transform;
}
.carta video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, .78) 100%); pointer-events: none; }
.carta-nombre {
	position: absolute; left: 8px; right: 8px; bottom: 14px; z-index: 1; text-align: center; font-family: "Cinzel", "Times New Roman", serif;
	font-weight: 700; font-size: .7rem; letter-spacing: .18em; line-height: 1.35; text-transform: uppercase; text-shadow: 0 2px 10px #000;
}
.carta:nth-child(1) { --x: calc(var(--w) * -1.2); --r: -7deg; --s: .9; --y: 16px; z-index: 1; }
.carta:nth-child(2) { --x: calc(var(--w) * -.37); --r: -2deg; --s: 1.08; z-index: 3; }
.carta:nth-child(3) { --x: calc(var(--w) * .45); --r: 3deg; --s: 1; z-index: 2; }
.carta:nth-child(4) { --x: calc(var(--w) * 1.18); --r: 8deg; --s: .9; --y: 18px; z-index: 1; }
@media (hover: hover) and (pointer: fine) and (min-width: 981px) {
	.abanico-plano .carta { pointer-events: none; }
	.abanico-plano[data-activa] { cursor: pointer; }
	.abanico-plano[data-activa] .carta { filter: brightness(.7) saturate(.9); }
	.abanico-plano[data-activa="1"] .carta:nth-child(n+2),
	.abanico-plano[data-activa="2"] .carta:nth-child(n+3),
	.abanico-plano[data-activa="3"] .carta:nth-child(4) { --dx: calc(var(--w) * .26); }
	.abanico-plano[data-activa="4"] .carta:nth-child(-n+3),
	.abanico-plano[data-activa="3"] .carta:nth-child(-n+2),
	.abanico-plano[data-activa="2"] .carta:nth-child(1) { --dx: calc(var(--w) * -.26); }
	.abanico-plano[data-activa="1"] .carta:nth-child(1),
	.abanico-plano[data-activa="2"] .carta:nth-child(2),
	.abanico-plano[data-activa="3"] .carta:nth-child(3),
	.abanico-plano[data-activa="4"] .carta:nth-child(4) { --dx: 0px; }
}
.abanico-plano[data-activa="1"] .carta:nth-child(1),
.abanico-plano[data-activa="2"] .carta:nth-child(2),
.abanico-plano[data-activa="3"] .carta:nth-child(3),
.abanico-plano[data-activa="4"] .carta:nth-child(4),
.abanico .carta:focus-visible {
	--r: 0deg; --s: 1.12; --y: -8px; z-index: 5; filter: none; border-color: var(--ambar-2);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 34px 80px rgba(0, 0, 0, .7), 0 0 44px rgb(var(--acento-rgb) / .45);
}
.carta:focus-visible { outline: 3px solid var(--ambar); outline-offset: 4px; }

/* Fila de pasos + paquete de tokens */
.fila-pasos { padding: 4px 0 clamp(28px, 4vw, 48px); }
.fila-pasos .contenedor { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.12fr); gap: 14px; align-items: stretch; }
.pasos-v3 { display: contents; list-style: none; margin: 0; padding: 0; }
.paso-v3 {
	position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 46%; min-height: 150px;
	border-radius: 10px; background: linear-gradient(180deg, #17141b, #100e13); border: 1px solid rgb(var(--acento-rgb) / .22);
}
.paso-v3 + .paso-v3::before {
	content: "›"; position: absolute; left: -7px; top: 50%; transform: translate(-50%, -54%); z-index: 1;
	color: var(--ambar); font-size: 1.7rem; font-weight: 700; line-height: 1;
}
.paso-v3-texto { padding: 14px 4px 14px 16px; display: grid; align-content: start; gap: 6px; min-width: 0; }
.paso-v3-num { width: 26px; height: 26px; border-radius: 25% / 50%; display: grid; place-items: center; background: var(--oro); color: var(--sobre-acento); font-weight: 800; font-size: .85rem; }
.paso-v3 h3 { margin: 2px 0 0; font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: 1.35rem; line-height: 1.1; }
.paso-v3 p { margin: 0; color: var(--suave); font-size: .86rem; line-height: 1.45; }
.paso-v3 > img, .paso-v3-mosaico { width: 100%; height: 100%; min-height: 150px; border-radius: 0 10px 10px 0; overflow: hidden; }
.paso-v3 > img { object-fit: cover; -webkit-mask-image: linear-gradient(90deg, transparent, #000 34%); mask-image: linear-gradient(90deg, transparent, #000 34%); }
.paso-v3-mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 8px 8px 8px 0; }
.paso-v3-mosaico img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; border: 1px solid rgb(var(--acento-rgb) / .25); }
.paquetes-v3 {
	position: relative; overflow: hidden; padding: 16px 18px; border-radius: 10px;
	background: radial-gradient(ellipse 70% 80% at 90% 90%, rgb(var(--acento-rgb) / .14), transparent 70%), linear-gradient(180deg, #17141b, #100e13);
	border: 1px solid rgb(var(--acento-rgb) / .4);
}
.paquetes-v3 h3 { margin: 0; font-family: "Cinzel", "Times New Roman", serif; font-weight: 700; font-size: 1.02rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ambar-2); }
.paquetes-v3 > p { margin: 2px 0 8px; color: var(--suave); font-size: .84rem; }
.paquetes-v3 ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 5px; max-width: 64%; }
.paquetes-v3 li { display: flex; gap: 8px; align-items: center; font-size: .84rem; color: #e6dfd3; }
.paquetes-v3 li::before {
	content: "✓"; flex: none; width: 17px; height: 17px; border-radius: 25% / 50%; display: grid; place-items: center; font-size: .66rem; font-weight: 800;
	color: var(--ambar-2); border: 1.5px solid rgb(var(--acento-rgb) / .7);
}
.paquetes-v3 .boton { position: relative; z-index: 1; }
.monedas { position: absolute; right: 6px; top: 34px; width: 112px; height: 112px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .5)); }

/* Visor de una carta */
.visor-carta {
	width: min(940px, calc(100% - 24px)); max-height: calc(100svh - 24px); padding: 0; border-radius: 12px; overflow: hidden;
	background: #0e0c11; color: var(--texto); border: 1px solid rgb(var(--acento-rgb) / .35); box-shadow: 0 40px 120px rgba(0, 0, 0, .8);
}
.visor-carta::backdrop { background: rgba(4, 4, 5, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.visor-cuerpo { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.visor-cuerpo video { display: block; height: min(78svh, 720px); aspect-ratio: 9 / 16; width: auto; max-width: 100%; background: #000; object-fit: cover; }
.visor-info { padding: 26px 24px; display: grid; align-content: center; gap: 10px; }
.visor-info h2 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.05; }
.visor-info p { margin: 0; color: var(--suave); }
.visor-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.visor-info .visor-nota { font-size: .78rem; color: var(--tenue); }

@media (max-width: 1100px) {
	.fila-pasos .contenedor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.paso-v3:nth-child(3)::before { display: none; }
}
@media (max-width: 980px) {
	.hero-rejilla { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.hero-texto { display: contents; }
	.hero-sobre { order: 1; } .hero-v3 .hero-titulo { order: 2; } .hero-lema { order: 3; } .abanico { order: 4; margin-top: 14px; }
	.hero-v3 .hero-sub { order: 5; } .hero-v3 .compositor { order: 6; } .hero-v3 .ideas { order: 7; }
	.abanico {
		height: auto; perspective: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
		margin-inline: -16px; padding: 6px 16px 14px;
	}
	.abanico::-webkit-scrollbar { display: none; }
	.abanico-plano { position: static; display: flex; gap: 12px; width: max-content; }
	.carta { position: relative; top: auto; left: auto; flex: none; width: min(44vw, 210px); transform: none; scroll-snap-align: start; filter: none; }
}
@media (max-width: 640px) {
	.fila-pasos .contenedor { grid-template-columns: minmax(0, 1fr); }
	.paso-v3 + .paso-v3::before { display: none; }
	.visor-cuerpo { grid-template-columns: minmax(0, 1fr); }
	.visor-cuerpo video { height: min(62svh, 560px); margin: 0 auto; }
	.visor-info { padding: 16px 18px 20px; }
}
@media (prefers-reduced-motion: reduce) { .carta { transition: none; } }

/* Títulos de sección de la portada con la misma letra del hero */
.hero-v3 ~ .seccion .seccion-titulo { font-family: "Cinzel", "Times New Roman", serif; font-weight: 800; font-size: clamp(1.7rem, 3.2vw, 2.6rem); line-height: 1.05; letter-spacing: .01em; }

/* Nombres del lado que no tapa la carta vecina */
.carta:nth-child(1) .carta-nombre { text-align: left; right: 26%; }
.carta:nth-child(3) .carta-nombre, .carta:nth-child(4) .carta-nombre { text-align: right; left: 26%; }
@media (max-width: 980px) { .carta .carta-nombre { text-align: center !important; left: 8px !important; right: 8px !important; } }

/* ---------- Lectura real del verso 1 de «Te bajo la luna» (el verso fuera de rango, en rojo) ---------- */
.hoja-letra .verso.fuera .n { color: var(--rojo); }

/* ---------- «Así se hace»: escena 4D con medios reales del estudio ----------
   Misma línea que precios-v2.css (aurora, piso en perspectiva, monedas). portada.js pone en .asi --p (avance del scroll,
   0 → 1) y en cada [data-asi-3d] --rx/--ry/--mx/--my (inclinación y brillo con el mouse); en #asi-comparar, --corte
   (cuánto se ve de la foto) y --alza (la foto que se despega). Todo con style.setProperty: la CSP no deja estilos en línea. */
.asi {
	--p: .5;
	position: relative; isolation: isolate; overflow: clip; padding: clamp(56px, 8vw, 110px) 0 clamp(64px, 8vw, 120px);
	background: linear-gradient(180deg, var(--fondo) 0%, #0d0a10 30%, #0c0c0d 70%, var(--fondo) 100%);
}
.asi-escena { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.asi-aurora {
	position: absolute; inset: -10% -10% 35%; filter: blur(70px); opacity: .7;
	background:
		radial-gradient(38% 30% at 18% 18%, rgb(169 191 242 / .34), transparent 70%),
		radial-gradient(32% 26% at 84% 36%, rgb(255 92 56 / .22), transparent 70%),
		radial-gradient(40% 30% at 50% 62%, rgb(120 86 255 / .18), transparent 70%);
	transform: translate3d(0, calc((var(--p) - .5) * -140px), 0);
	animation: asi-aurora 20s ease-in-out infinite alternate;
}
@keyframes asi-aurora { 0% { rotate: 0deg; scale: 1; } 50% { rotate: 5deg; scale: 1.08; } 100% { rotate: -4deg; scale: 1.02; } }
.asi-piso {
	position: absolute; left: -30%; right: -30%; bottom: -4%; height: 46%;
	background-image: linear-gradient(rgb(169 191 242 / .2) 1px, transparent 1px), linear-gradient(90deg, rgb(169 191 242 / .2) 1px, transparent 1px);
	background-size: 64px 64px; background-position: 0 calc(var(--p) * 256px), 0 0;
	transform: perspective(700px) rotateX(64deg); transform-origin: center top;
	-webkit-mask-image: linear-gradient(to top, rgb(0 0 0 / .85), transparent 85%); mask-image: linear-gradient(to top, rgb(0 0 0 / .85), transparent 85%);
}
.asi-monedas { position: absolute; inset: 0; perspective: 900px; transform: translate3d(0, calc((var(--p) - .5) * -260px), 0); }
.asi-moneda { --t: 80px; position: absolute; width: var(--t); height: var(--t); transform-style: preserve-3d; animation: asi-giro 8s linear infinite, asi-flota 6s ease-in-out infinite alternate; }
.asi-moneda .cara {
	position: absolute; inset: 0; display: grid; place-items: center; border-radius: 25% / 50%;
	font: 800 calc(var(--t) * .5) / 1 Cinzel, Georgia, serif; color: #34517b;
	background: radial-gradient(circle at 32% 28%, #eff4fc, #bed0fb 38%, #829dce 70%, #48678f);
	box-shadow: inset 0 0 0 calc(var(--t) * .07) #acc1f5, inset 0 0 calc(var(--t) * .2) rgb(52 81 123 / .55);
	transform: translateZ(calc(var(--t) * .06)); backface-visibility: hidden;
}
.asi-moneda .cara.atras { transform: rotateY(180deg) translateZ(calc(var(--t) * .06)); }
.asi-moneda .canto { position: absolute; inset: 0; border-radius: 25% / 50%; background: #597aa9; transform: scale(.985); }
.asi-moneda.m1 { --t: 70px; left: 4%; top: 9%; }
.asi-moneda.m2 { --t: 44px; right: 6%; top: 30%; animation-duration: 6s, 5s; animation-delay: -2s, -1s; }
.asi-moneda.m3 { --t: 58px; left: 7%; top: 62%; animation-duration: 9s, 7s; animation-delay: -4s, -3s; }
.asi-moneda.m4 { --t: 36px; right: 12%; top: 82%; animation-duration: 5.5s, 4.5s; animation-delay: -1s, -2s; opacity: .85; }
@keyframes asi-giro { to { rotate: y 360deg; } }
@keyframes asi-flota { from { translate: 0 -10px; } to { translate: 0 14px; } }

.asi-cabeza { text-align: center; display: grid; justify-items: center; margin-bottom: clamp(28px, 5vw, 64px); }
.asi-cabeza .seccion-titulo { font-family: "Cinzel", "Times New Roman", serif; font-weight: 800; font-size: clamp(1.9rem, 4.4vw, 3.6rem); line-height: 1.02; letter-spacing: .01em; text-shadow: 0 10px 40px rgb(0 0 0 / .5); }
.asi-cabeza .seccion-texto { margin-inline: auto; }

.asi-bloque {
	display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 64px); align-items: center;
	padding: clamp(18px, 3vw, 40px) 0;
}
.asi-bloque + .asi-bloque { margin-top: clamp(12px, 3vw, 40px); }
.asi-b3 { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.asi-b3 .asi-texto { order: 2; }
.asi-texto { min-width: 0; display: grid; gap: 10px; justify-items: start; }
.asi-num { font: 800 .8rem / 1 Cinzel, Georgia, serif; letter-spacing: .3em; color: var(--ambar-2); padding: 6px 10px; border-radius: 577px / 1000px; border: 1px solid rgb(169 191 242 / .35); background: rgb(169 191 242 / .08); }
.asi-texto h3 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1.08; }
.asi-texto p { margin: 0; color: var(--suave); max-width: 470px; line-height: 1.55; }
.asi-texto p strong { color: var(--texto); }
.asi-texto .asi-nota { font-size: .86rem; color: var(--tenue); }

/* Objetos 3D: se inclinan con el mouse, giran un poco con el scroll y llevan un brillo que sigue al cursor. */
[data-asi-3d] {
	--rx: 0deg; --ry: 0deg; --mx: 50%; --my: 30%;
	position: relative; transform-style: preserve-3d;
	transform: perspective(1200px) rotateX(calc(var(--rx) + (var(--p) - .5) * -10deg)) rotateY(var(--ry));
	transition: transform .6s cubic-bezier(.2, .9, .2, 1);
}
[data-asi-3d].inclinada { transition: transform .08s linear; }

/* 01 · De foto a video: comparación con deslizador, y la foto que se despega. */
.asi-tablero { display: grid; place-items: center; min-height: clamp(360px, 46vw, 600px); }
.asi-polaroid {
	position: absolute; left: 4%; top: 12%; width: clamp(150px, 17vw, 250px); margin: 0; padding: 10px 10px 34px;
	background: #e9f0fc; border-radius: 4px; box-shadow: 0 30px 60px rgb(0 0 0 / .55);
	transform: translate3d(0, calc((var(--p) - .5) * 60px), -70px) rotate(-9deg);
}
.asi-polaroid img { display: block; width: 100%; height: auto; }
.asi-polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 9px; text-align: center; font: 600 .74rem/1 "Playfair Display", Georgia, serif; color: #4b3a26; }
.asi-comparar {
	--corte: 100%; --alza: 0;
	position: relative; width: clamp(220px, 23vw, 330px); aspect-ratio: 412 / 720; border-radius: 10px; overflow: hidden; cursor: ew-resize; touch-action: pan-y;
	border: 2px solid rgb(201 216 251 / .6); background: #050506;
	box-shadow: 0 40px 90px rgb(0 0 0 / .6), 0 0 50px rgb(169 191 242 / .22);
	transform: translate3d(14%, 0, 40px);
}
.asi-comparar video, .asi-comparar .asi-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.asi-comparar .asi-foto {
	clip-path: inset(0 calc(100% - var(--corte)) 0 0); transform-origin: left center;
	transform: perspective(700px) rotateY(calc(var(--alza) * -16deg)) translateZ(calc(var(--alza) * 30px));
	filter: drop-shadow(10px 0 18px rgb(0 0 0 / calc(var(--alza) * .7)));
}
.asi-corte-linea {
	position: absolute; top: 0; bottom: 0; left: var(--corte); width: 3px; margin-left: -1.5px; z-index: 2; pointer-events: none;
	background: linear-gradient(180deg, transparent, #d7e3fb 12%, #a9bff2 88%, transparent); box-shadow: 0 0 16px rgb(169 191 242 / .8);
}
.asi-corte-linea::after {
	content: "‹ ›"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center;
	width: 38px; height: 38px; border-radius: 25% / 50%; font: 800 .9rem/1 var(--letra); color: #0e0f10; background: var(--oro); box-shadow: 0 6px 20px rgb(0 0 0 / .5);
}
.asi-etiqueta {
	position: absolute; top: 12px; z-index: 3; padding: 5px 10px; border-radius: 577px / 1000px; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
	background: rgb(9 9 10 / .72); border: 1px solid rgb(255 255 255 / .16); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.asi-etiqueta.antes { left: 12px; }
.asi-etiqueta.despues { right: 12px; color: var(--ambar-2); }
/* Brillo y reflejo que siguen al cursor. */
.asi-comparar::after, .asi-toma::after, .asi-telefono::after, .asi-monitor-pantalla::after {
	content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
	background:
		radial-gradient(380px circle at var(--mx, 50%) var(--my, 30%), rgb(230 237 251 / .16), transparent 45%),
		linear-gradient(115deg, transparent 38%, rgb(255 255 255 / .07) 46%, transparent 54%);
}
.asi-deslizar { display: flex; align-items: center; gap: 10px; width: min(100%, 340px); margin-top: 6px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tenue); }
.asi-deslizar input { flex: 1; min-height: 32px; accent-color: var(--ambar); }

/* 02 · Abanico de tomas: entran en abanico al verse. */
.asi-abanico { --tw: clamp(136px, 13.6vw, 226px); position: relative; height: calc(var(--tw) * 16 / 9 * 1.24); }
.asi-toma {
	--x: 0; --r: 0deg; --z: 0px; --y: 0px; --s: .86;
	position: absolute; left: 50%; top: 50%; width: var(--tw); aspect-ratio: 412 / 720; margin: 0; border-radius: 10px; overflow: hidden;
	border: 2px solid rgb(201 216 251 / .5); background: #050506;
	box-shadow: 0 0 0 1px rgb(0 0 0 / .7), 0 26px 60px rgb(0 0 0 / .65), 0 0 26px rgb(169 191 242 / .2);
	transform: translate(-50%, -50%) translate3d(calc(var(--tw) * var(--x)), var(--y), var(--z)) rotate(var(--r)) scale(var(--s));
	transition: transform .9s cubic-bezier(.2, .9, .2, 1), box-shadow .3s ease, border-color .3s ease;
}
.asi-toma video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.asi-toma figcaption {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 22px 8px 10px; text-align: center;
	font: 700 .66rem/1.3 Cinzel, Georgia, serif; letter-spacing: .14em; text-transform: uppercase;
	background: linear-gradient(180deg, transparent, rgb(0 0 0 / .8));
}
.asi-toma:nth-child(1), .asi-toma:nth-child(5) { z-index: 1; }
.asi-toma:nth-child(2), .asi-toma:nth-child(4) { z-index: 2; }
.asi-toma:nth-child(3) { z-index: 3; }
.asi-abanico.abierto .asi-toma:nth-child(1) { --x: -1.62; --r: -13deg; --y: 34px; --z: -90px; --s: .9; transition-delay: .2s; }
.asi-abanico.abierto .asi-toma:nth-child(2) { --x: -.84; --r: -6deg; --y: 10px; --z: -30px; --s: .97; transition-delay: .1s; }
.asi-abanico.abierto .asi-toma:nth-child(3) { --x: 0; --r: 0deg; --y: -6px; --z: 40px; --s: 1.06; transition-delay: 0s; border-color: var(--ambar-2); }
.asi-abanico.abierto .asi-toma:nth-child(4) { --x: .84; --r: 6deg; --y: 10px; --z: -30px; --s: .97; transition-delay: .1s; }
.asi-abanico.abierto .asi-toma:nth-child(5) { --x: 1.62; --r: 13deg; --y: 34px; --z: -90px; --s: .9; transition-delay: .2s; }
@media (hover: hover) and (pointer: fine) {
	.asi-abanico.abierto .asi-toma:hover {
		--y: -18px; --z: 110px; --s: 1.1; --r: 0deg; z-index: 6; transition-delay: 0s; border-color: var(--ambar-2);
		box-shadow: 0 0 0 1px rgb(0 0 0 / .7), 0 40px 90px rgb(0 0 0 / .7), 0 0 50px rgb(169 191 242 / .45);
	}
}

/* 03 · Videoclip terminado: pantalla de teléfono en perspectiva. */
.asi-telefono {
	justify-self: center; width: clamp(230px, 24vw, 340px); aspect-ratio: 540 / 946; padding: 10px; border-radius: 12px;
	background: linear-gradient(160deg, #2b2620, #0c0a08 60%); border: 1px solid rgb(201 216 251 / .35);
	box-shadow: 0 50px 110px rgb(0 0 0 / .65), 0 0 60px rgb(145 170 218 / .2), inset 0 1px 0 rgb(255 255 255 / .1);
}
.asi-telefono video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; background: #000; }
.asi-telefono::after { inset: 10px; border-radius: 12px; }
.asi-sonido {
	position: absolute; left: 50%; bottom: 22px; z-index: 6; transform: translateX(-50%) translateZ(40px);
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 577px / 1000px; cursor: pointer; white-space: nowrap;
	font: 700 .86rem/1 var(--letra); color: #0e0f10; background: var(--oro); border: 0; box-shadow: 0 10px 30px rgb(0 0 0 / .5);
}
.asi-sonido svg { width: 18px; height: 18px; }
.asi-sonido .onda-sonido { display: none; }
.asi-sonido[aria-pressed="true"] .onda-sonido { display: inline; }
.asi-sonido[aria-pressed="true"] .tache-sonido { display: none; }
.asi-sonido:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* 04 · El estudio trabajando: monitor en perspectiva con su resplandor en el piso. */
.asi-monitor { justify-self: center; width: min(100%, 760px); }
.asi-monitor-pantalla {
	position: relative; aspect-ratio: 16 / 9; padding: 10px; border-radius: 10px; overflow: hidden;
	background: linear-gradient(160deg, #26222b, #0d0b10); border: 1px solid rgb(201 216 251 / .3);
	box-shadow: 0 50px 120px rgb(0 0 0 / .6), 0 0 70px rgb(169 191 242 / .16);
}
.asi-monitor-pantalla video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; background: #0c0d0e; }
.asi-monitor-pantalla::after { inset: 10px; border-radius: 8px; opacity: .55; }
.asi-monitor-pie { width: 22%; height: 18px; margin: 0 auto; background: linear-gradient(180deg, #2a2520, #120f0c); border-radius: 0 0 10px 10px; box-shadow: 0 24px 40px rgb(0 0 0 / .6); }
.asi-monitor::before {
	content: ""; position: absolute; left: 6%; right: 6%; bottom: -46px; height: 50px; border-radius: 25% / 50%; pointer-events: none;
	background: radial-gradient(ellipse at center, rgb(169 191 242 / .25), transparent 70%); filter: blur(10px);
}

/* Tableta y celular: una columna; la escena sigue en 3D pero más ligera (aurora quieta, menos monedas). */
@media (max-width: 980px) {
	.asi-bloque, .asi-b3 { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.asi-b3 .asi-texto { order: 0; }
	.asi-texto { justify-items: center; text-align: center; }
	.asi-texto p { margin-inline: auto; }
	.asi-aurora { animation: none; filter: blur(48px); }
	.asi-moneda.m2, .asi-moneda.m4 { display: none; }
	.asi-moneda { opacity: .75; }
	.asi-moneda.m1 { --t: 36px; left: auto; right: 4%; top: 31%; }
	.asi-moneda.m3 { --t: 30px; left: 4%; top: 47%; }
	.asi-tablero { min-height: 0; padding: 8px 0 18px; }
	.asi-polaroid { left: 2%; top: 4%; width: clamp(120px, 34vw, 190px); }
	.asi-comparar { width: min(58vw, 300px); transform: translate3d(18%, 0, 40px); }
	.asi-abanico { --tw: min(31vw, 170px); }
	.asi-abanico.abierto .asi-toma:nth-child(1) { --x: -1; }
	.asi-abanico.abierto .asi-toma:nth-child(2) { --x: -.54; }
	.asi-abanico.abierto .asi-toma:nth-child(4) { --x: .54; }
	.asi-abanico.abierto .asi-toma:nth-child(5) { --x: 1; }
	.asi-toma:not(:nth-child(3)) figcaption { display: none; }
	.asi-telefono { width: min(68vw, 300px); }
}
@media (prefers-reduced-motion: reduce) {
	.asi-aurora, .asi-moneda { animation: none; }
	.asi-aurora, .asi-monedas, .asi-polaroid { transform: none; }
	[data-asi-3d] { transform: none; transition: none; }
	.asi-toma { transition: none; }
	.asi-comparar .asi-foto { transform: none; filter: none; }
}

/* Tono del video (20 oct): en pantalla grande todos los chips a la vista (dos renglones, como Runway); en celular sigue la tira que se desliza. */
@media (min-width: 641px) { .hero-v3 .tonos { flex-wrap: wrap; overflow-x: visible; -webkit-mask-image: none; mask-image: none; } }