/* Islagenda · web de cine (02-11-2026) · sistema común de todas las páginas que no son la portada.
   La misma jerarquía de la portada: noche de fondo, mapa 3D fijo detrás, tinta blanca, coral para la acción, verde para lo hecho,
   azul cielo solo para la app Mi local. Cada página trae su dirección de arte (body.d-*): composición, tipografía, movimiento y
   cámara propios, sin salir de estos colores ni de estas dos letras (Poppins para titular, Inter para leer).
   Regla de medidas: todo en calc(N * var(--px)); --px vale 1px y solo crece en vertical ancho (móvil en «versión de ordenador»). */
:root { --px: 1px; --vw: 1vw; }
:root {
  --noche: #05090D;
  --noche-2: #03070A;
  --tinta: #F3F6F8;
  --suave: #B7C3CB;
  --tenue: #7E8A92;
  --coral: #E8573A;
  --coral-osc: #C5432A;
  --verde: #2BD3B5;
  --oro: #FFD27A;
  --cielo: #2A6CB4;
  --vidrio: rgba(10, 16, 22, .72);
  --vidrio-fuerte: rgba(6, 12, 18, .88);
  --vidrio-borde: rgba(255, 255, 255, .14);
  --f-disp: 'Poppins', 'Inter', system-ui, sans-serif;
  --f-txt: 'Inter', system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --margen: clamp(calc(20 * var(--px)), 6vw, calc(96 * var(--px)));
  --t-hero: clamp(calc(46 * var(--px)), 7.2vw, calc(132 * var(--px)));
  --t-titulo: clamp(calc(38 * var(--px)), 5vw, calc(92 * var(--px)));
  --t-linea: clamp(calc(17 * var(--px)), 1.35vw, calc(21 * var(--px)));
  /* Lo que cambia cada dirección de arte */
  --acento: var(--coral);
  --peso-t: 700;
  --tracking-t: -.035em;
  --caja-t: none;
  --interlinea-t: .98;
  --sombra-t: 0 calc(2 * var(--px)) calc(30 * var(--px)) rgba(0, 0, 0, .35);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--noche); scroll-padding-top: calc(80 * var(--px)); }
body { margin: 0; background: var(--noche); color: var(--tinta); font: 400 calc(17 * var(--px))/1.5 var(--f-txt); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2 { font-family: var(--f-disp); font-weight: var(--peso-t); letter-spacing: var(--tracking-t); line-height: var(--interlinea-t); text-transform: var(--caja-t); }
h3 { font-family: var(--f-disp); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
:focus-visible { outline: calc(3 * var(--px)) solid var(--coral); outline-offset: calc(3 * var(--px)); border-radius: calc(8 * var(--px)); }
::selection { background: var(--coral); color: #fff; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: calc(12 * var(--px)); top: calc(-60 * var(--px)); z-index: 60; background: #fff; color: #000; padding: calc(10 * var(--px)) calc(16 * var(--px)); border-radius: calc(999 * var(--px)); text-decoration: none; }
.saltar:focus { top: calc(12 * var(--px)); }
.num { font-variant-numeric: tabular-nums; }

/* ── El mundo: mapa 3D fijo (con la foto aérea real de la zona mientras carga) y la capa de efectos ── */
.mundo { position: fixed; inset: 0; z-index: 0; background: #0B3C5D var(--poster, url(/assets/mapa3d/cabecera-1600.v2.webp)) 50% 50% / cover no-repeat; }
.mundo::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, rgba(5, 9, 13, 0) 40%, rgba(5, 9, 13, .55)); transition: opacity 1.2s; pointer-events: none; }
.mapa-listo .mundo::after { opacity: 0; }
.mundo canvas { position: absolute; inset: 0; }
.fx { position: fixed; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
main, .pie { position: relative; z-index: 3; }
.capa-dir { position: fixed; inset: 0; z-index: 3; pointer-events: none; }

/* ── Botones ── */
.boton { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: calc(10 * var(--px)); min-height: calc(54 * var(--px)); padding: 0 calc(28 * var(--px)); border: 0; border-radius: calc(999 * var(--px)); font: 600 calc(17 * var(--px))/1 var(--f-disp); letter-spacing: -.01em; text-decoration: none; cursor: pointer; white-space: nowrap; overflow: hidden; isolation: isolate; transition: transform .2s var(--ease), background-color .2s, box-shadow .2s; -webkit-tap-highlight-color: transparent; }
.boton:active { transform: scale(.96); }
.boton-coral { background: var(--coral); color: #fff; box-shadow: 0 calc(10 * var(--px)) calc(40 * var(--px)) rgba(232, 87, 58, .38); }
.boton-coral:hover { background: var(--coral-osc); }
.boton-coral::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); transform: translateX(-120%); animation: brillo 4.5s var(--ease) infinite 2s; }
@keyframes brillo { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.boton-vidrio { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 calc(1 * var(--px)) rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(calc(12 * var(--px))); backdrop-filter: blur(calc(12 * var(--px))); }
.boton-vidrio:hover { background: rgba(255, 255, 255, .18); }
.enlace-flecha { display: inline-flex; align-items: center; gap: calc(8 * var(--px)); font: 600 calc(16 * var(--px))/1.2 var(--f-disp); color: #fff; text-decoration: none; }
.enlace-flecha::after { content: '→'; transition: transform .25s var(--ease); }
.enlace-flecha:hover::after { transform: translateX(calc(4 * var(--px))); }

/* ── Barra superior: logotipo, migas en ordenador y una acción ── */
.barra { position: fixed; inset: 0 0 auto 0; z-index: 30; height: calc(72 * var(--px)); display: flex; align-items: center; justify-content: space-between; gap: calc(18 * var(--px)); padding: 0 var(--margen); background: linear-gradient(180deg, rgba(3, 8, 12, .72), rgba(3, 8, 12, 0)); transition: transform .45s var(--ease), background-color .3s; }
.barra.oculta { transform: translateY(-110%); }
.barra.solida { background: rgba(3, 8, 12, .94); }
.barra-logo { flex: none; display: block; }
.barra-logo img { width: calc(128 * var(--px)); height: auto; }
.barra-boton { min-height: calc(46 * var(--px)); padding: 0 calc(22 * var(--px)); font-size: calc(15 * var(--px)); max-width: 46vw; }
.barra-boton span { overflow: hidden; text-overflow: ellipsis; }
.barra-der { display: flex; align-items: center; gap: calc(14 * var(--px)); min-width: 0; }
.idioma { display: flex; gap: calc(2 * var(--px)); padding: calc(3 * var(--px)); border-radius: calc(999 * var(--px)); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 calc(1 * var(--px)) var(--vidrio-borde); font: 600 calc(13 * var(--px))/1 var(--f-txt); }
.idioma a { display: block; padding: calc(8 * var(--px)) calc(10 * var(--px)); border-radius: calc(999 * var(--px)); text-decoration: none; color: var(--suave); }
.idioma a[aria-current] { background: #fff; color: #05090D; }

/* Migas: dónde estás (también en datos estructurados) */
.migas ol { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6 * var(--px)); font: 600 calc(13 * var(--px))/1.2 var(--f-txt); color: var(--suave); }
.migas li { display: flex; align-items: center; gap: calc(6 * var(--px)); }
.migas li + li::before { content: '/'; color: rgba(255, 255, 255, .3); }
.migas a { text-decoration: none; color: #DCE4E9; }
.migas a:hover { color: #fff; text-decoration: underline; text-underline-offset: calc(3 * var(--px)); }
.migas [aria-current] { color: #fff; }

/* ── Capítulos: dónde estás de la historia (y atajo a cada escena) ── */
.capitulos { position: fixed; right: calc(22 * var(--px)); top: 50%; z-index: 20; transform: translateY(-50%); display: flex; flex-direction: column; gap: calc(10 * var(--px)); transition: opacity .4s; }
.capitulos a { position: relative; display: block; width: calc(26 * var(--px)); height: calc(18 * var(--px)); }
.capitulos a::before { content: ''; position: absolute; right: 0; top: calc(8 * var(--px)); width: calc(14 * var(--px)); height: calc(2 * var(--px)); border-radius: calc(2 * var(--px)); background: rgba(255, 255, 255, .35); transition: width .35s var(--ease), background-color .35s; }
.capitulos a.activo::before { width: calc(26 * var(--px)); background: #fff; }
.capitulos span { position: absolute; right: calc(36 * var(--px)); top: 0; white-space: nowrap; font-size: calc(13 * var(--px)); font-weight: 600; opacity: 0; transform: translateX(calc(6 * var(--px))); transition: opacity .25s, transform .25s var(--ease); pointer-events: none; text-shadow: 0 calc(1 * var(--px)) calc(8 * var(--px)) rgba(0, 0, 0, .6); }
.capitulos a:hover span, .capitulos a:focus-visible span { opacity: 1; transform: none; }
.capitulos.fuera { opacity: 0; pointer-events: none; }

/* ── Campo «nombre de tu negocio»: la acción de toda la web ── */
.constructor { display: flex; gap: calc(6 * var(--px)); margin-top: calc(28 * var(--px)); max-width: calc(560 * var(--px)); padding: calc(6 * var(--px)); border-radius: calc(999 * var(--px)); background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 calc(1 * var(--px)) rgba(255, 255, 255, .2); -webkit-backdrop-filter: blur(calc(16 * var(--px))); backdrop-filter: blur(calc(16 * var(--px))); transition: box-shadow .25s, background-color .25s; }
.constructor:focus-within { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 calc(1 * var(--px)) rgba(255, 255, 255, .45), 0 0 0 calc(6 * var(--px)) rgba(232, 87, 58, .18); }
.constructor input { flex: 1; min-width: 0; height: calc(54 * var(--px)); border: 0; background: transparent; padding: 0 0 0 calc(20 * var(--px)); font: 500 calc(17 * var(--px))/1 var(--f-txt); color: #fff; }
.constructor input::placeholder { color: rgba(255, 255, 255, .62); }
.constructor input:focus { outline: none; }
.garantias { display: flex; flex-wrap: wrap; gap: calc(8 * var(--px)) calc(22 * var(--px)); margin-top: calc(18 * var(--px)); font-size: calc(15 * var(--px)); color: #D7E0E6; }
.garantias li { display: flex; align-items: center; gap: calc(8 * var(--px)); }
.garantias li::before { content: ''; width: calc(16 * var(--px)); height: calc(16 * var(--px)); border-radius: 50%; flex: none; background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%2305090D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
.garantias b { color: #fff; }
.alterna { margin-top: calc(14 * var(--px)); font-size: calc(15 * var(--px)); color: var(--suave); }
.alterna a { color: #fff; font-weight: 600; text-underline-offset: calc(4 * var(--px)); }

/* Datos en vivo (hora de Canarias, días gratis): pastillas de cristal */
.vivo { display: flex; flex-wrap: wrap; gap: calc(10 * var(--px)); font-size: calc(15 * var(--px)); color: #DCE4E9; }
.vivo li { padding: calc(9 * var(--px)) calc(14 * var(--px)); border-radius: calc(999 * var(--px)); background: rgba(8, 14, 20, .5); box-shadow: inset 0 0 0 calc(1 * var(--px)) var(--vidrio-borde); -webkit-backdrop-filter: blur(calc(10 * var(--px))); backdrop-filter: blur(calc(10 * var(--px))); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vivo b { color: #fff; margin-right: calc(4 * var(--px)); }
.punto { display: inline-block; width: calc(8 * var(--px)); height: calc(8 * var(--px)); margin-right: calc(8 * var(--px)); border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 0 rgba(43, 211, 181, .7); animation: late 2s infinite; vertical-align: calc(1 * var(--px)); }
@keyframes late { 70% { box-shadow: 0 0 0 calc(9 * var(--px)) rgba(43, 211, 181, 0); } 100% { box-shadow: 0 0 0 0 rgba(43, 211, 181, 0); } }

/* ── Portada de cada página (héroe) ── */
.heroe { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(110 * var(--px)) var(--margen) 14svh; }
.heroe-velo { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(3, 8, 12, .84) 0%, rgba(3, 8, 12, .38) 46%, rgba(3, 8, 12, 0) 72%), linear-gradient(90deg, rgba(3, 8, 12, .52), rgba(3, 8, 12, 0) 58%); }
.heroe-txt { position: relative; max-width: calc(1000 * var(--px)); }
.heroe .migas { margin-bottom: calc(22 * var(--px)); }
.heroe h1 { font-size: var(--t-hero); max-width: 14ch; text-shadow: var(--sombra-t); }
.heroe h1 > span { display: block; }
.heroe h1 .kicker { margin-bottom: calc(18 * var(--px)); font: 700 calc(14 * var(--px))/1.3 var(--f-txt); letter-spacing: .14em; text-transform: uppercase; color: var(--acento); text-shadow: 0 calc(1 * var(--px)) calc(10 * var(--px)) rgba(0, 0, 0, .5); }
.heroe h1 .kicker .c, .heroe h1 .kicker .w { font: inherit; }
.heroe-sub { margin-top: calc(22 * var(--px)); max-width: 34ch; font: 500 clamp(calc(19 * var(--px)), 1.6vw, calc(24 * var(--px)))/1.35 var(--f-disp); color: #E3EAEF; }
.heroe .vivo { margin-top: calc(18 * var(--px)); }
.palabra-fondo { position: absolute; left: 50%; top: 50%; z-index: 0; translate: -50% -50%; font: 700 clamp(calc(120 * var(--px)), 19vw, calc(360 * var(--px)))/.8 var(--f-disp); letter-spacing: -.06em; white-space: nowrap; color: transparent; -webkit-text-stroke: calc(1.2 * var(--px)) rgba(255, 255, 255, .26); pointer-events: none; user-select: none; }
/* Composiciones del héroe (las elige la dirección de arte) */
.heroe.h-centro { align-items: center; text-align: center; justify-content: center; padding-bottom: 12svh; }
.heroe.h-centro .heroe-txt { display: flex; flex-direction: column; align-items: center; }
.heroe.h-centro .migas ol, .heroe.h-centro .garantias, .heroe.h-centro .vivo { justify-content: center; }
.heroe.h-centro .heroe-sub { margin-left: auto; margin-right: auto; }
.heroe.h-centro .constructor { width: 100%; margin-left: auto; margin-right: auto; }
.heroe.h-centro .heroe-velo { background: radial-gradient(70% 60% at 50% 55%, rgba(3, 8, 12, .7), rgba(3, 8, 12, .25) 70%, rgba(3, 8, 12, .1)); }
.heroe.h-arriba { justify-content: flex-start; padding-top: 20svh; }
.heroe.h-arriba .heroe-velo { background: linear-gradient(180deg, rgba(3, 8, 12, .82) 0%, rgba(3, 8, 12, .3) 50%, rgba(3, 8, 12, 0) 75%); }
.heroe.h-derecha { align-items: flex-end; }
.heroe.h-derecha .heroe-txt { max-width: calc(720 * var(--px)); }
.heroe.h-derecha .heroe-velo { background: linear-gradient(0deg, rgba(3, 8, 12, .8) 0%, rgba(3, 8, 12, .3) 46%, rgba(3, 8, 12, 0) 72%), linear-gradient(270deg, rgba(3, 8, 12, .6), rgba(3, 8, 12, 0) 58%); }
.heroe.h-partido .heroe-txt { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: calc(28 * var(--px)) calc(56 * var(--px)); max-width: none; width: 100%; align-items: end; }
.heroe.h-partido .heroe-col2 { padding-bottom: calc(6 * var(--px)); }
.heroe.h-partido .heroe-sub { margin-top: 0; }
.heroe-ficha { display: grid; gap: calc(6 * var(--px)); margin-top: calc(20 * var(--px)); font: 500 calc(14 * var(--px))/1.3 var(--f-txt); color: var(--suave); }
.heroe-ficha b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.desliza { position: absolute; left: 50%; bottom: calc(26 * var(--px)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: calc(10 * var(--px)); font-size: calc(13 * var(--px)); font-weight: 600; text-decoration: none; color: #DCE4E9; }
.desliza i { width: calc(2 * var(--px)); height: calc(42 * var(--px)); border-radius: calc(2 * var(--px)); background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0)); transform-origin: top; animation: baja 2.2s var(--ease) infinite; }
@keyframes baja { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ── Escenas de la película ── */
.esc { position: relative; }
.pin { height: calc(var(--alto, 220) * 1svh); }
.fijo { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.velo { position: absolute; inset: 0; pointer-events: none; }
.velo-izq { background: linear-gradient(90deg, rgba(3, 8, 12, .76) 0%, rgba(3, 8, 12, .4) 36%, rgba(3, 8, 12, 0) 62%); }
.velo-der { background: linear-gradient(270deg, rgba(3, 8, 12, .76) 0%, rgba(3, 8, 12, .4) 36%, rgba(3, 8, 12, 0) 62%); }
.velo-abajo { background: linear-gradient(0deg, rgba(3, 8, 12, .78) 0%, rgba(3, 8, 12, .3) 40%, rgba(3, 8, 12, 0) 62%); }
.velo-arriba { background: linear-gradient(180deg, rgba(3, 8, 12, .8) 0%, rgba(3, 8, 12, .3) 40%, rgba(3, 8, 12, 0) 60%); }
.velo-centro { background: radial-gradient(62% 60% at 50% 50%, rgba(3, 8, 12, .66), rgba(3, 8, 12, .2) 70%, rgba(3, 8, 12, 0)); }
.velo-total { background: rgba(3, 8, 12, .55); }
.esc-cab { position: absolute; z-index: 5; max-width: min(46vw, calc(760 * var(--px))); }
.esc-cab.pos-ia { left: var(--margen); top: 17svh; }
.esc-cab.pos-ib { left: var(--margen); bottom: 13svh; }
.esc-cab.pos-da { right: var(--margen); top: 17svh; }
.esc-cab.pos-db { right: var(--margen); bottom: 13svh; }
.esc-cab.pos-c { left: 50%; top: 15svh; translate: -50% 0; text-align: center; max-width: min(72vw, calc(1100 * var(--px))); display: flex; flex-direction: column; align-items: center; }
.esc-cab.pos-cb { left: 50%; bottom: 13svh; translate: -50% 0; text-align: center; max-width: min(72vw, calc(1100 * var(--px))); display: flex; flex-direction: column; align-items: center; }
.esc-ante { margin-bottom: calc(14 * var(--px)); font: 700 calc(13 * var(--px))/1.2 var(--f-txt); letter-spacing: .14em; text-transform: uppercase; color: var(--acento); font-variant-numeric: tabular-nums; }
.esc-titulo { font-size: var(--t-titulo); max-width: 13ch; text-shadow: var(--sombra-t); }
.pos-c .esc-titulo, .pos-cb .esc-titulo { max-width: 16ch; }
.esc-linea { margin-top: calc(18 * var(--px)); max-width: 34ch; font-size: var(--t-linea); line-height: 1.45; color: #DCE4E9; text-shadow: 0 calc(1 * var(--px)) calc(16 * var(--px)) rgba(0, 0, 0, .5); }
.esc-linea b { color: #fff; font-weight: 600; }
.ejemplo { position: absolute; left: var(--margen); bottom: calc(22 * var(--px)); z-index: 5; font-size: calc(13 * var(--px)); color: rgba(255, 255, 255, .58); }
.ancla { position: absolute; left: 0; top: 0; translate: calc(-999 * var(--px)) calc(-999 * var(--px)); will-change: translate, opacity; pointer-events: none; z-index: 4; }
.tapado { opacity: 0 !important; transition: opacity .14s !important; }
/* Objetos de una escena: columna derecha o izquierda, centrados en vertical */
.obj { position: absolute; z-index: 4; }
.obj.lado-d { right: calc(var(--margen) + calc(30 * var(--px))); top: 50%; translate: 0 -50%; }
.obj.lado-i { left: calc(var(--margen) + calc(10 * var(--px))); top: 50%; translate: 0 -50%; }
.obj.abajo-d { right: calc(var(--margen) + calc(30 * var(--px))); bottom: 11svh; }
.obj.abajo-i { left: var(--margen); bottom: 11svh; }
.obj.centro-abajo { left: 50%; bottom: 9svh; translate: -50% 0; }

/* Texto partido para los efectos (palabras y letras) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.c { display: inline-block; will-change: transform, opacity; }
.ln { display: block; overflow: hidden; }
.ln > span { display: block; will-change: transform; }
.marca-sub { position: relative; white-space: nowrap; }
.marca-sub::after { content: ''; position: absolute; left: -.04em; right: -.04em; bottom: .06em; height: .16em; z-index: -1; border-radius: .1em; background: var(--acento); opacity: .85; transform: scaleX(var(--k, 0)); transform-origin: left; }

/* ── iPhone 17 en CSS: aluminio finísimo, Dynamic Island, Safari abajo ── */
.iphone { position: relative; aspect-ratio: 71.5 / 149.6; padding: .55%; border-radius: 15.8% / 7.6%; background: linear-gradient(140deg, #A7ADB4 0%, #4A4F55 12%, #26292D 50%, #474C52 88%, #B4BAC1 100%); box-shadow: 0 calc(50 * var(--px)) calc(120 * var(--px)) rgba(0, 0, 0, .5), 0 0 0 calc(.5 * var(--px)) rgba(255, 255, 255, .35); }
.ip-pantalla { position: relative; width: 100%; height: 100%; padding: 1.5%; border-radius: 15.2% / 7.3%; background: #030303; overflow: hidden; }
.ip-boton { position: absolute; width: 1.3%; min-width: calc(2 * var(--px)); border-radius: calc(2 * var(--px)); background: linear-gradient(90deg, #2C3034, #8E949C 50%, #2C3034); }
.ip-accion { left: -.9%; top: 17%; height: 4.6%; }
.ip-vol1 { left: -.9%; top: 24.5%; height: 7.6%; }
.ip-vol2 { left: -.9%; top: 33.6%; height: 7.6%; }
.ip-lateral { right: -.9%; top: 26%; height: 11%; }
.ip-camara { right: -.9%; top: 57%; height: 6.4%; border-radius: calc(1 * var(--px)); }
.ip-web, .ip-app { position: absolute; inset: 1.5%; border-radius: 13.8% / 6.6%; overflow: hidden; background: #0D0F11; }
.ip-web img { position: absolute; left: 0; top: 5.9%; display: block; width: 100%; height: auto; will-change: transform; }
.ip-web::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 5.9%; z-index: 1; background: var(--tope, #0D0F11); }
.ip-web::after { content: ''; position: absolute; left: 0; right: 0; top: 5.9%; height: 3.2%; z-index: 1; background: linear-gradient(180deg, var(--tope, #0D0F11), rgba(0, 0, 0, 0)); }
.ip-app { background: var(--cielo); }
.ip-app img { position: absolute; left: 0; top: 6.4%; width: 100%; height: calc(100% - 6.4%); object-fit: cover; object-position: top; }
.ip-app img + img { opacity: 0; }
.ip-estado { position: absolute; left: 9%; right: 9%; top: 2.6%; height: 4.4%; z-index: 4; display: flex; align-items: center; justify-content: space-between; color: #fff; font: 600 clamp(calc(8 * var(--px)), .95vw, calc(13 * var(--px)))/1 -apple-system, 'SF Pro Text', 'Inter', sans-serif; letter-spacing: -.01em; text-shadow: 0 calc(1 * var(--px)) calc(3 * var(--px)) rgba(0, 0, 0, .45); pointer-events: none; }
.ip-estado.ip-oscuro { color: #111; text-shadow: none; }
.ip-isla { position: absolute; left: 50%; top: 50%; width: 36%; height: 88%; transform: translate(-50%, -50%); border-radius: calc(999 * var(--px)); background: #000; }
.ip-isla::after { content: ''; position: absolute; right: 13%; top: 50%; width: 15%; aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; background: radial-gradient(circle at 40% 40%, #2C3A5A, #0A0D14 60%); }
.ip-iconos { display: flex; align-items: center; gap: calc(4 * var(--px)); }
.ip-cob { width: calc(15 * var(--px)); height: calc(9 * var(--px)); background: linear-gradient(currentColor, currentColor) 0 100% / calc(3 * var(--px)) 35% no-repeat, linear-gradient(currentColor, currentColor) calc(4 * var(--px)) 100% / calc(3 * var(--px)) 55% no-repeat, linear-gradient(currentColor, currentColor) calc(8 * var(--px)) 100% / calc(3 * var(--px)) 78% no-repeat, linear-gradient(currentColor, currentColor) calc(12 * var(--px)) 100% / calc(3 * var(--px)) 100% no-repeat; }
.ip-bat { position: relative; width: calc(20 * var(--px)); height: calc(9.5 * var(--px)); border-radius: calc(3 * var(--px)); box-shadow: inset 0 0 0 calc(1 * var(--px)) rgba(127, 127, 127, .7); background: linear-gradient(currentColor, currentColor) calc(2 * var(--px)) 50% / calc(13 * var(--px)) calc(5.5 * var(--px)) no-repeat; }
.ip-safari { position: absolute; left: 10%; right: 10%; bottom: 3.2%; height: 5.6%; z-index: 4; display: flex; align-items: center; justify-content: center; gap: calc(5 * var(--px)); border-radius: calc(999 * var(--px)); background: rgba(248, 248, 250, .8); -webkit-backdrop-filter: blur(calc(10 * var(--px))) saturate(1.5); backdrop-filter: blur(calc(10 * var(--px))) saturate(1.5); box-shadow: 0 calc(6 * var(--px)) calc(20 * var(--px)) rgba(0, 0, 0, .28); color: #111; font: 500 clamp(calc(8 * var(--px)), .9vw, calc(12.5 * var(--px)))/1 -apple-system, 'SF Pro Text', 'Inter', sans-serif; }
.ip-safari span { max-width: 78%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ip-pantalla::after { content: ''; position: absolute; left: 50%; bottom: 1.3%; z-index: 5; width: 33%; height: .5%; min-height: calc(3 * var(--px)); border-radius: calc(99 * var(--px)); background: rgba(255, 255, 255, .78); transform: translateX(-50%); }
.ip-reflejo { position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit; background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .04) 24%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, .06) 100%); }
.ip-aviso { position: absolute; left: 4.5%; right: 4.5%; top: 6.6%; z-index: 7; display: flex; gap: calc(9 * var(--px)); align-items: center; padding: calc(10 * var(--px)) calc(11 * var(--px)); border-radius: calc(18 * var(--px)); background: rgba(245, 245, 247, .92); -webkit-backdrop-filter: blur(calc(14 * var(--px))) saturate(1.6); backdrop-filter: blur(calc(14 * var(--px))) saturate(1.6); box-shadow: 0 calc(10 * var(--px)) calc(30 * var(--px)) rgba(0, 0, 0, .3); color: #111; }
.ip-aviso img { width: calc(26 * var(--px)); height: calc(26 * var(--px)); flex: none; border-radius: calc(7 * var(--px)); background: #fff; padding: calc(3 * var(--px)); }
.ip-aviso p { display: flex; flex-direction: column; min-width: 0; font-size: calc(11 * var(--px)); line-height: 1.3; }
.ip-aviso b { display: flex; justify-content: space-between; gap: calc(6 * var(--px)); font-size: calc(11.5 * var(--px)); }
.ip-aviso small { font-weight: 500; color: #6B7680; }
.ip-aviso span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tel-caja { margin: 0; display: flex; flex-direction: column; align-items: center; gap: calc(14 * var(--px)); }
.tel-caja .iphone { width: min(calc(292 * var(--px)), 22vw); }
.tel-pie { font-size: calc(13 * var(--px)); color: rgba(255, 255, 255, .72); text-align: center; max-width: 30ch; }

/* ── Tarjeta «lo que leemos de tu negocio» ── */
.lectura { padding: calc(10 * var(--px)); width: min(calc(440 * var(--px)), 38vw); border-radius: calc(22 * var(--px)); background: rgba(8, 14, 20, .78); box-shadow: inset 0 0 0 calc(1 * var(--px)) rgba(255, 255, 255, .12); }
.lectura li { display: grid; grid-template-columns: calc(26 * var(--px)) minmax(0, 1fr) auto; align-items: center; gap: calc(10 * var(--px)); padding: calc(10 * var(--px)) calc(12 * var(--px)); border-radius: calc(14 * var(--px)); font-size: calc(16 * var(--px)); color: rgba(255, 255, 255, .4); transition: color .3s, background-color .3s; }
.lectura li + li { margin-top: calc(2 * var(--px)); }
.lectura li i { width: calc(22 * var(--px)); height: calc(22 * var(--px)); border-radius: 50%; box-shadow: inset 0 0 0 calc(2 * var(--px)) rgba(255, 255, 255, .22); }
.lectura li b { font-weight: 700; color: rgba(255, 255, 255, .4); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lectura li[data-estado="lee"] { color: #fff; background: linear-gradient(100deg, rgba(43, 211, 181, 0) 20%, rgba(43, 211, 181, .2) 50%, rgba(43, 211, 181, 0) 80%) 0 0 / 220% 100%; animation: brillocarga .9s linear infinite; }
.lectura li[data-estado="ok"] { color: #fff; }
.lectura li[data-estado="ok"] b { color: var(--verde); }
.lectura li[data-estado="ok"] i { background: var(--verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%2305090D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat; box-shadow: none; }
@keyframes brillocarga { to { background-position: -220% 0; } }
.listo { display: inline-block; margin-top: calc(16 * var(--px)); padding: calc(12 * var(--px)) calc(18 * var(--px)); border-radius: calc(999 * var(--px)); background: rgba(43, 211, 181, .14); box-shadow: inset 0 0 0 calc(1 * var(--px)) rgba(43, 211, 181, .5); color: #CFF6EE; font-size: calc(15 * var(--px)); font-weight: 600; }
.listo b { color: #fff; }

/* ── Cifras con fuente ── */
.dato { max-width: calc(340 * var(--px)); }
.dato-num { font: 700 clamp(calc(80 * var(--px)), 9vw, calc(160 * var(--px)))/.85 var(--f-disp); letter-spacing: -.05em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dato-num small { font-size: .42em; letter-spacing: -.02em; margin-left: .08em; }
.dato-txt { margin-top: calc(10 * var(--px)); font: 500 calc(20 * var(--px))/1.3 var(--f-disp); }
.fuente { margin-top: calc(8 * var(--px)); font-size: calc(13 * var(--px)); color: var(--suave); }
.dato.der { text-align: right; }

/* ── Mensajes y agenda ── */
.chat { width: min(calc(400 * var(--px)), 34vw); display: flex; flex-direction: column; gap: calc(10 * var(--px)); }
.msg { max-width: 88%; padding: calc(14 * var(--px)) calc(18 * var(--px)); border-radius: calc(20 * var(--px)); font-size: calc(17 * var(--px)); line-height: 1.35; box-shadow: 0 calc(16 * var(--px)) calc(40 * var(--px)) rgba(0, 0, 0, .3); }
.msg-sale { align-self: flex-start; background: #fff; color: #121619; border-bottom-left-radius: calc(6 * var(--px)); }
.msg-entra { align-self: flex-end; background: #1FA88F; color: #fff; border-bottom-right-radius: calc(6 * var(--px)); font-weight: 600; }
.msg small { display: block; margin-top: calc(4 * var(--px)); font-size: calc(12 * var(--px)); opacity: .6; }
.agenda { display: grid; gap: calc(6 * var(--px)); width: min(calc(420 * var(--px)), 34vw); padding: calc(14 * var(--px)); border-radius: calc(22 * var(--px)); background: rgba(10, 16, 24, .8); box-shadow: inset 0 0 0 calc(1 * var(--px)) rgba(255, 255, 255, .14); }
.agenda-cab { display: flex; justify-content: space-between; padding: calc(4 * var(--px)) calc(8 * var(--px)) calc(8 * var(--px)); font: 600 calc(14 * var(--px))/1.2 var(--f-disp); color: var(--suave); }
.ag-fila { display: grid; grid-template-columns: calc(54 * var(--px)) minmax(0, 1fr) auto; align-items: center; gap: calc(10 * var(--px)); padding: calc(12 * var(--px)); border-radius: calc(12 * var(--px)); font-size: calc(16 * var(--px)); background: rgba(255, 255, 255, .03); }
.ag-fila span { font-weight: 700; font-variant-numeric: tabular-nums; }
.ag-fila b { font-size: calc(13 * var(--px)); padding: calc(5 * var(--px)) calc(10 * var(--px)); border-radius: calc(999 * var(--px)); background: rgba(43, 211, 181, .18); color: #9FF0DF; white-space: nowrap; }
.ag-fila.ag-cancel b { background: rgba(232, 87, 58, .2); color: #FFB7A6; }
.ag-fila.ag-hueco b { background: rgba(255, 210, 120, .2); color: #FFE2A6; }

/* ── Carteles sobre el mapa ── */
.etiqueta { padding: calc(9 * var(--px)) calc(14 * var(--px)); border-radius: calc(999 * var(--px)); background: rgba(10, 16, 24, .86); box-shadow: inset 0 0 0 calc(1 * var(--px)) rgba(255, 255, 255, .22); font: 600 calc(14 * var(--px))/1.15 var(--f-txt); white-space: nowrap; transform: translate(-50%, calc(-100% - calc(14 * var(--px)))); opacity: 0; transition: opacity .35s; }
.etiqueta.on { opacity: 1; }
.etiqueta.abajo { transform: translate(-50%, calc(14 * var(--px))); }
.etiqueta small { margin-left: calc(6 * var(--px)); font-weight: 500; color: var(--suave); font-variant-numeric: tabular-nums; }
.etiqueta.yo { background: var(--coral); box-shadow: 0 calc(8 * var(--px)) calc(24 * var(--px)) rgba(232, 87, 58, .45); }
.etiqueta.yo small { color: #FFE3DB; }
.etiqueta.oro { box-shadow: inset 0 0 0 calc(1 * var(--px)) rgba(255, 210, 120, .6); }
.etiqueta.no { box-shadow: inset 0 0 0 calc(1 * var(--px)) rgba(255, 110, 90, .7); color: #FFC1B4; }
.etiqueta.no::after { content: ' ✕'; color: var(--coral); }
.pin-mapa { width: 0; height: 0; }
.pin-cuerpo { position: absolute; left: calc(-16 * var(--px)); top: calc(-46 * var(--px)); width: calc(32 * var(--px)); height: calc(32 * var(--px)); border-radius: 50% 50% 50% 0; background: var(--coral); transform: rotate(-45deg); box-shadow: 0 calc(8 * var(--px)) calc(24 * var(--px)) rgba(232, 87, 58, .6); }
.pin-cuerpo::after { content: ''; position: absolute; inset: calc(9 * var(--px)); border-radius: 50%; background: #fff; }
.aviso-mapa i { position: absolute; left: calc(-7 * var(--px)); top: calc(-7 * var(--px)); width: calc(14 * var(--px)); height: calc(14 * var(--px)); border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 calc(6 * var(--px)) rgba(232, 87, 58, .25), 0 0 calc(24 * var(--px)) rgba(232, 87, 58, .9); opacity: 0; transition: opacity .3s; }
.aviso-mapa p { position: absolute; left: calc(16 * var(--px)); bottom: calc(14 * var(--px)); padding: calc(10 * var(--px)) calc(14 * var(--px)); border-radius: calc(14 * var(--px)); background: rgba(10, 16, 24, .86); box-shadow: inset 0 0 0 calc(1 * var(--px)) rgba(255, 255, 255, .16); font-size: calc(14 * var(--px)); white-space: nowrap; opacity: 0; transition: opacity .3s; }
.aviso-mapa b { display: block; font-size: calc(12 * var(--px)); color: var(--verde); font-variant-numeric: tabular-nums; }
.aviso-mapa.on i, .aviso-mapa.on p { opacity: 1; }
.aviso-mapa.izq p { left: auto; right: calc(16 * var(--px)); }
.aviso-mapa.abajo p { bottom: auto; top: calc(14 * var(--px)); }
.gps-txt { position: absolute; left: calc(70 * var(--px)); top: calc(-40 * var(--px)); width: max-content; max-width: calc(250 * var(--px)); padding: calc(8 * var(--px)) calc(12 * var(--px)); border-radius: calc(999 * var(--px)); background: rgba(10, 16, 24, .86); box-shadow: inset 0 0 0 calc(1 * var(--px)) rgba(43, 211, 181, .5); font-size: calc(13 * var(--px)); font-weight: 600; line-height: 1.3; opacity: 0; transition: opacity .3s; }
.on > .gps-txt { opacity: 1; }

/* ── Chips de ventajas ── */
.ventajas { display: flex; flex-direction: column; gap: calc(10 * var(--px)); }
.ventajas li { width: fit-content; padding: calc(12 * var(--px)) calc(18 * var(--px)); border-radius: calc(999 * var(--px)); background: rgba(10, 16, 24, .76); box-shadow: inset 0 0 0 calc(1 * var(--px)) rgba(255, 255, 255, .16); font: 600 calc(17 * var(--px))/1.1 var(--f-disp); }
.ventajas li::before { content: ''; display: inline-block; width: calc(8 * var(--px)); height: calc(8 * var(--px)); margin-right: calc(10 * var(--px)); border-radius: 50%; background: var(--acento); vertical-align: calc(2 * var(--px)); }
.ventajas.fila { flex-direction: row; flex-wrap: wrap; }

/* ── Reloj, cronómetro y número enorme ── */
.reloj-grande { font: 700 clamp(calc(110 * var(--px)), 14vw, calc(250 * var(--px)))/.82 var(--f-disp); letter-spacing: -.06em; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .94); text-shadow: 0 0 calc(60 * var(--px)) rgba(120, 170, 255, .25); }
.crono { display: flex; align-items: baseline; gap: calc(14 * var(--px)); }
.crono b { font: 700 clamp(calc(84 * var(--px)), 10vw, calc(180 * var(--px)))/.85 var(--f-disp); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.crono span { font: 600 calc(20 * var(--px))/1 var(--f-disp); color: var(--suave); }

/* ── Precio: 0 € hasta 2028 y la escalera que baja ── */
.precio-bloque { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: calc(90 * var(--px)) var(--margen) calc(40 * var(--px)); }
.precio-bloque.izq { align-items: flex-start; text-align: left; }
.precio-num { display: block; font: 700 clamp(calc(110 * var(--px)), 14vw, calc(250 * var(--px)))/.82 var(--f-disp); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.precio-hasta { display: block; margin-top: calc(6 * var(--px)); font: 600 clamp(calc(26 * var(--px)), 2.6vw, calc(44 * var(--px)))/1 var(--f-disp); letter-spacing: -.02em; color: #E6EDF1; }
.escalera { display: flex; align-items: flex-end; gap: calc(6 * var(--px)); width: min(calc(420 * var(--px)), 80vw); height: calc(96 * var(--px)); margin-top: calc(36 * var(--px)); }
.escalera i { flex: 1; border-radius: calc(6 * var(--px)) calc(6 * var(--px)) calc(2 * var(--px)) calc(2 * var(--px)); background: rgba(255, 255, 255, .85); transform-origin: bottom; }
.escalera i:first-child { background: var(--coral); }
.escalera-txt { margin-top: calc(16 * var(--px)); font-size: calc(18 * var(--px)); color: #DDE5EA; }
.escalera-txt b { color: #fff; font-variant-numeric: tabular-nums; }
.precio-letra { margin-top: calc(10 * var(--px)); font-size: calc(15 * var(--px)); color: var(--suave); max-width: 50ch; }
.precio-cuenta { margin: calc(20 * var(--px)) 0 calc(24 * var(--px)); font-size: calc(16 * var(--px)); color: #FFD7CC; }
.precio-cuenta b { font-variant-numeric: tabular-nums; color: #fff; }
.meses { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(6 * var(--px)); margin-top: calc(26 * var(--px)); }
.meses button { width: calc(40 * var(--px)); height: calc(40 * var(--px)); border: 0; border-radius: calc(12 * var(--px)); background: rgba(255, 255, 255, .1); color: #fff; font: 600 calc(14 * var(--px))/1 var(--f-txt); cursor: pointer; box-shadow: inset 0 0 0 calc(1 * var(--px)) rgba(255, 255, 255, .16); transition: background-color .2s, transform .2s var(--ease); }
.meses button:hover { background: rgba(255, 255, 255, .2); }
.meses button[aria-pressed="true"] { background: var(--coral); box-shadow: none; transform: translateY(calc(-2 * var(--px))); }
.meses-valor { margin-top: calc(12 * var(--px)); font: 600 calc(18 * var(--px))/1.3 var(--f-disp); }
.meses-valor b { font-size: calc(30 * var(--px)); font-variant-numeric: tabular-nums; margin-right: calc(8 * var(--px)); }

/* ── Dudas (Chris Voss): la objeción tachada y la respuesta ── */
.dudas { padding: 20svh var(--margen) 14svh; }
.dudas-caja { max-width: calc(900 * var(--px)); margin: 0 auto; padding: clamp(calc(28 * var(--px)), 4vw, calc(56 * var(--px))); border-radius: calc(28 * var(--px)); background: var(--vidrio-fuerte); box-shadow: inset 0 0 0 calc(1 * var(--px)) rgba(255, 255, 255, .12), 0 calc(40 * var(--px)) calc(120 * var(--px)) rgba(0, 0, 0, .45); }
.dudas h2 { font-size: clamp(calc(36 * var(--px)), 4.2vw, calc(70 * var(--px))); max-width: 16ch; }
.objeciones { margin-top: calc(34 * var(--px)); display: grid; gap: calc(22 * var(--px)); }
.objeciones li { display: grid; gap: calc(4 * var(--px)); }
.objeciones s { position: relative; width: fit-content; font: 500 clamp(calc(19 * var(--px)), 1.7vw, calc(25 * var(--px)))/1.3 var(--f-disp); color: var(--suave); text-decoration: none; }
.objeciones s::after { content: ''; position: absolute; left: calc(-4 * var(--px)); right: calc(-4 * var(--px)); top: 55%; height: calc(3 * var(--px)); border-radius: calc(3 * var(--px)); background: var(--coral); box-shadow: 0 0 calc(14 * var(--px)) rgba(232, 87, 58, .9); transform: scaleX(var(--tachado, 1)); transform-origin: left; }
.objeciones b { font: 700 clamp(calc(21 * var(--px)), 2vw, calc(30 * var(--px)))/1.22 var(--f-disp); letter-spacing: -.02em; opacity: var(--respuesta, 1); }
.objeciones.rejilla2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(26 * var(--px)) calc(34 * var(--px)); }
.lestter { display: flex; align-items: center; gap: calc(16 * var(--px)); margin-top: calc(36 * var(--px)); font-size: calc(17 * var(--px)); }
.lestter img { width: calc(64 * var(--px)); height: calc(64 * var(--px)); border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 calc(3 * var(--px)) rgba(255, 255, 255, .2); }
.lestter a { color: var(--verde); font-weight: 700; text-underline-offset: calc(4 * var(--px)); }

/* ── Pasos (0 de 3 → 3 de 3) ── */
.pasos { width: min(calc(460 * var(--px)), 40vw); padding: calc(18 * var(--px)); border-radius: calc(24 * var(--px)); background: var(--vidrio); box-shadow: inset 0 0 0 calc(1 * var(--px)) var(--vidrio-borde); }
.pasos-cab { display: flex; justify-content: space-between; align-items: baseline; font: 600 calc(15 * var(--px))/1.2 var(--f-disp); }
.pasos-cab span { color: var(--suave); font-variant-numeric: tabular-nums; }
.pasos-barra { height: calc(6 * var(--px)); margin: calc(12 * var(--px)) 0 calc(14 * var(--px)); border-radius: calc(99 * var(--px)); background: rgba(255, 255, 255, .1); overflow: hidden; }
.pasos-barra i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--verde); transform-origin: left; transform: scaleX(var(--k, 0)); }
.paso { display: grid; grid-template-columns: calc(30 * var(--px)) minmax(0, 1fr); gap: calc(12 * var(--px)); padding: calc(12 * var(--px)) calc(4 * var(--px)); }
.paso + .paso { box-shadow: 0 calc(-1 * var(--px)) 0 rgba(255, 255, 255, .08); }
.paso i { width: calc(26 * var(--px)); height: calc(26 * var(--px)); border-radius: 50%; box-shadow: inset 0 0 0 calc(2 * var(--px)) rgba(255, 255, 255, .3); font: normal 700 calc(13 * var(--px))/calc(26 * var(--px)) var(--f-txt); text-align: center; color: var(--suave); transition: background-color .3s, color .3s, box-shadow .3s; }
.paso.hecho i { background: var(--verde); color: #05090D; box-shadow: none; }
.paso strong { display: block; font: 600 calc(17 * var(--px))/1.25 var(--f-disp); }
.paso small { display: block; margin-top: calc(3 * var(--px)); font-size: calc(14 * var(--px)); color: var(--suave); line-height: 1.4; }

/* ── Radio de clientes: zonas cercanas reales con sus km ── */
.radio { width: min(calc(440 * var(--px)), 38vw); padding: calc(16 * var(--px)); border-radius: calc(24 * var(--px)); background: var(--vidrio); box-shadow: inset 0 0 0 calc(1 * var(--px)) var(--vidrio-borde); }
.radio-cab { font: 600 calc(15 * var(--px))/1.2 var(--f-disp); color: var(--suave); margin-bottom: calc(10 * var(--px)); }
.radio li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: calc(10 * var(--px)); padding: calc(9 * var(--px)) calc(4 * var(--px)); font-size: calc(16 * var(--px)); }
.radio li + li { box-shadow: 0 calc(-1 * var(--px)) 0 rgba(255, 255, 255, .07); }
.radio li a { text-decoration: none; font-weight: 600; }
.radio li a:hover { text-decoration: underline; text-underline-offset: calc(3 * var(--px)); }
.radio li b { font-variant-numeric: tabular-nums; color: var(--oro); font-weight: 600; }
.radio-barra { grid-column: 1 / -1; height: calc(3 * var(--px)); border-radius: calc(3 * var(--px)); background: linear-gradient(90deg, var(--oro), rgba(255, 210, 120, .15)); transform-origin: left; transform: scaleX(var(--k, 1)); }
.cifra-grande { font: 700 clamp(calc(64 * var(--px)), 7.5vw, calc(132 * var(--px)))/.86 var(--f-disp); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }

/* ── Tarjetas de la app (reseña, vuelven, equipo, exporta, QR) ── */
.tarjeta { width: min(calc(400 * var(--px)), 34vw); padding: calc(18 * var(--px)); border-radius: calc(24 * var(--px)); background: rgba(250, 251, 252, .97); color: #121619; box-shadow: 0 calc(30 * var(--px)) calc(80 * var(--px)) rgba(0, 0, 0, .45); }
.tarjeta-cab { display: flex; align-items: center; gap: calc(10 * var(--px)); font: 600 calc(14 * var(--px))/1.2 var(--f-disp); color: #5B6770; }
.tarjeta-cab img { width: calc(24 * var(--px)); height: calc(24 * var(--px)); }
.tarjeta h3 { margin-top: calc(10 * var(--px)); font-size: calc(19 * var(--px)); color: #121619; }
.tarjeta p { margin-top: calc(6 * var(--px)); font-size: calc(15 * var(--px)); color: #33414A; line-height: 1.45; }
.tarjeta .estrellas { margin-top: calc(10 * var(--px)); color: #F5B301; font-size: calc(22 * var(--px)); letter-spacing: .08em; }
.tarjeta .boton { margin-top: calc(14 * var(--px)); min-height: calc(46 * var(--px)); font-size: calc(15 * var(--px)); background: var(--cielo); color: #fff; box-shadow: none; }
.tarjeta-filas li { display: grid; grid-template-columns: calc(38 * var(--px)) minmax(0, 1fr) auto; align-items: center; gap: calc(10 * var(--px)); padding: calc(10 * var(--px)) 0; font-size: calc(15 * var(--px)); }
.tarjeta-filas li + li { box-shadow: 0 calc(-1 * var(--px)) 0 #E7ECEF; }
.tarjeta-filas .ini { width: calc(34 * var(--px)); height: calc(34 * var(--px)); border-radius: 50%; display: grid; place-items: center; background: #E6F0FA; color: var(--cielo); font: 700 calc(13 * var(--px))/1 var(--f-txt); }
.tarjeta-filas strong { display: block; font-weight: 600; }
.tarjeta-filas small { display: block; color: #6B7680; font-size: calc(13 * var(--px)); }
.tarjeta-filas em { font-style: normal; font-size: calc(12 * var(--px)); font-weight: 600; padding: calc(5 * var(--px)) calc(9 * var(--px)); border-radius: calc(999 * var(--px)); background: #E6F7F3; color: #13836F; white-space: nowrap; }
.columnas3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(8 * var(--px)); margin-top: calc(12 * var(--px)); }
.columnas3 div { border-radius: calc(14 * var(--px)); background: #F1F4F6; padding: calc(8 * var(--px)); display: grid; gap: calc(6 * var(--px)); align-content: start; min-height: calc(170 * var(--px)); }
.columnas3 p { margin: 0; font: 600 calc(12 * var(--px))/1.2 var(--f-txt); color: #5B6770; text-align: center; }
.columnas3 i { display: block; border-radius: calc(9 * var(--px)); background: #DCE8F4; height: calc(var(--h, 2) * 18 * var(--px)); }
.columnas3 i.lleno { background: var(--cielo); }
.qr { width: calc(150 * var(--px)); aspect-ratio: 1; margin: calc(12 * var(--px)) auto 0; background: #fff; border-radius: calc(12 * var(--px)); padding: calc(10 * var(--px)); box-shadow: inset 0 0 0 calc(1 * var(--px)) #E3E8EC; }
.qr svg { display: block; width: 100%; height: 100%; }
.huecos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(8 * var(--px)); margin-top: calc(12 * var(--px)); }
.huecos span { padding: calc(10 * var(--px)) 0; border-radius: calc(12 * var(--px)); background: #EEF3F7; text-align: center; font: 600 calc(15 * var(--px))/1 var(--f-txt); font-variant-numeric: tabular-nums; color: #121619; }
.huecos span.pasado { opacity: .35; text-decoration: line-through; }
.huecos span.libre { background: var(--cielo); color: #fff; }

/* ── Guía de la zona: lo que hay que saber, para leer con calma (el mapa sigue detrás, atenuado) ── */
.guia { position: relative; padding: 18svh var(--margen) 12svh; }
.guia-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 9, 13, 0), rgba(5, 9, 13, .86) 14%, rgba(5, 9, 13, .9) 86%, rgba(5, 9, 13, 0)); pointer-events: none; }
.guia-dentro { position: relative; max-width: calc(1180 * var(--px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: calc(40 * var(--px)) calc(64 * var(--px)); align-items: start; }
.guia h2 { grid-column: 1 / -1; font-size: clamp(calc(34 * var(--px)), 4vw, calc(64 * var(--px))); max-width: 18ch; }
.guia-texto p { font-size: calc(18 * var(--px)); line-height: 1.68; color: #E2E9ED; max-width: 64ch; }
.guia-texto p + p { margin-top: calc(18 * var(--px)); }
.guia-texto h3 { margin: calc(30 * var(--px)) 0 calc(10 * var(--px)); font-size: calc(22 * var(--px)); }
.guia-texto ul { margin-top: calc(14 * var(--px)); display: grid; gap: calc(10 * var(--px)); }
.guia-texto ul li { position: relative; padding-left: calc(26 * var(--px)); font-size: calc(17 * var(--px)); line-height: 1.55; color: #E2E9ED; }
.guia-texto ul li::before { content: ''; position: absolute; left: 0; top: calc(9 * var(--px)); width: calc(10 * var(--px)); height: calc(10 * var(--px)); border-radius: 50%; background: var(--acento); }
.guia-datos { position: relative; padding: calc(22 * var(--px)); border-radius: calc(24 * var(--px)); background: var(--vidrio); box-shadow: inset 0 0 0 calc(1 * var(--px)) var(--vidrio-borde); }
.guia-datos dl { display: grid; gap: calc(14 * var(--px)); }
.guia-datos dt { font: 700 calc(12 * var(--px))/1.2 var(--f-txt); letter-spacing: .12em; text-transform: uppercase; color: var(--suave); }
.guia-datos dd { margin-top: calc(4 * var(--px)); font: 600 calc(19 * var(--px))/1.3 var(--f-disp); font-variant-numeric: tabular-nums; }
.guia-datos dd small { display: block; margin-top: calc(2 * var(--px)); font: 400 calc(13 * var(--px))/1.4 var(--f-txt); color: var(--suave); }
.guia-foto { margin-top: calc(18 * var(--px)); border-radius: calc(16 * var(--px)); overflow: hidden; position: relative; }
.guia-foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.guia-foto figcaption { padding: calc(8 * var(--px)) 0 0; font-size: calc(12 * var(--px)); color: var(--tenue); }
.faq { margin-top: calc(34 * var(--px)); }
.faq h3 { margin: 0 0 calc(8 * var(--px)); font-size: calc(24 * var(--px)); }
.faq details { box-shadow: 0 calc(1 * var(--px)) 0 rgba(255, 255, 255, .1); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: calc(16 * var(--px)); min-height: calc(56 * var(--px)); padding: calc(14 * var(--px)) 0; cursor: pointer; list-style: none; font: 600 calc(18 * var(--px))/1.35 var(--f-disp); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; flex: none; font-size: calc(26 * var(--px)); font-weight: 400; color: var(--suave); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 calc(18 * var(--px)); font-size: calc(17 * var(--px)); line-height: 1.6; color: #D6DFE5; max-width: 66ch; }
.enlaces { grid-column: 1 / -1; display: grid; gap: calc(22 * var(--px)); }
.enlaces h3 { font-size: calc(18 * var(--px)); color: var(--suave); }
.enlaces ul { display: flex; flex-wrap: wrap; gap: calc(8 * var(--px)); margin-top: calc(10 * var(--px)); }
.enlaces a { display: inline-flex; align-items: baseline; gap: calc(8 * var(--px)); padding: calc(10 * var(--px)) calc(14 * var(--px)); border-radius: calc(999 * var(--px)); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 calc(1 * var(--px)) rgba(255, 255, 255, .12); text-decoration: none; font: 600 calc(15 * var(--px))/1.2 var(--f-txt); transition: background-color .2s; }
.enlaces a:hover { background: rgba(255, 255, 255, .16); }
.enlaces a small { font-weight: 500; color: var(--suave); font-variant-numeric: tabular-nums; }
.actualizado { grid-column: 1 / -1; font-size: calc(14 * var(--px)); color: var(--tenue); }

/* ── Cierre ── */
.final { position: relative; min-height: 100svh; display: flex; align-items: center; justify-content: center; padding: 14svh var(--margen); }
.final-caja { width: 100%; max-width: calc(780 * var(--px)); text-align: center; display: flex; flex-direction: column; align-items: center; }
.final h2 { font-size: clamp(calc(42 * var(--px)), 5.4vw, calc(94 * var(--px))); max-width: 13ch; text-shadow: 0 calc(4 * var(--px)) calc(40 * var(--px)) rgba(0, 0, 0, .4); }
.final .constructor { width: 100%; margin-top: calc(34 * var(--px)); }
.final-micro { margin-top: calc(16 * var(--px)); color: #DDE5EA; font-size: calc(16 * var(--px)); }

/* ── Pie ── */
.pie { padding: calc(64 * var(--px)) var(--margen) calc(110 * var(--px)); background: var(--noche-2); color: var(--suave); font-size: calc(15 * var(--px)); display: grid; gap: calc(18 * var(--px)); }
.pie img { width: calc(120 * var(--px)); height: auto; }
.pie nav { display: flex; flex-wrap: wrap; gap: calc(10 * var(--px)) calc(26 * var(--px)); font-weight: 600; color: #fff; }
.pie nav a { text-decoration: none; }
.pie nav a:hover { text-decoration: underline; text-underline-offset: calc(4 * var(--px)); }
.pie nav + nav { font-weight: 500; color: #DCE4E9; }
.pie-creditos { font-size: calc(13 * var(--px)); color: var(--tenue); max-width: 92ch; }
.barra-movil { display: none; }

/* ══ Lienzos de páginas de lectura (ayuda, aviso legal, privacidad, blog, comparativas) ══ */
.lectura-pag { position: relative; padding: calc(130 * var(--px)) var(--margen) 12svh; }
.lectura-pag .velo-total { position: fixed; inset: 0; z-index: -1; }
.doc { position: relative; max-width: calc(1180 * var(--px)); margin: 0 auto; display: grid; grid-template-columns: calc(250 * var(--px)) minmax(0, 1fr); gap: calc(56 * var(--px)); align-items: start; }
.doc-indice { position: sticky; top: calc(100 * var(--px)); display: grid; gap: calc(4 * var(--px)); font: 500 calc(14 * var(--px))/1.35 var(--f-txt); }
.doc-indice a { display: block; padding: calc(8 * var(--px)) calc(12 * var(--px)); border-radius: calc(10 * var(--px)); text-decoration: none; color: var(--suave); transition: background-color .2s, color .2s; }
.doc-indice a:hover, .doc-indice a.activo { background: rgba(255, 255, 255, .08); color: #fff; }
.doc-cuerpo { padding: clamp(calc(26 * var(--px)), 4vw, calc(56 * var(--px))); border-radius: calc(28 * var(--px)); background: var(--vidrio-fuerte); box-shadow: inset 0 0 0 calc(1 * var(--px)) rgba(255, 255, 255, .1); }
.doc-cuerpo h2 { margin: calc(42 * var(--px)) 0 calc(12 * var(--px)); font-size: clamp(calc(26 * var(--px)), 2.4vw, calc(36 * var(--px))); letter-spacing: -.02em; line-height: 1.12; scroll-margin-top: calc(100 * var(--px)); }
.doc-cuerpo h2:first-child { margin-top: 0; }
.doc-cuerpo h3 { margin: calc(26 * var(--px)) 0 calc(8 * var(--px)); font-size: calc(20 * var(--px)); }
.doc-cuerpo p, .doc-cuerpo li { font-size: calc(17 * var(--px)); line-height: 1.68; color: #DCE4E9; }
.doc-cuerpo p + p { margin-top: calc(14 * var(--px)); }
.doc-cuerpo ul, .doc-cuerpo ol { margin: calc(12 * var(--px)) 0; padding-left: calc(22 * var(--px)); list-style: disc; display: grid; gap: calc(6 * var(--px)); }
.doc-cuerpo ol { list-style: decimal; }
.doc-cuerpo a { color: #fff; text-underline-offset: calc(3 * var(--px)); }
.doc-cuerpo strong { color: #fff; }
.tabla-env { overflow-x: auto; margin: calc(18 * var(--px)) 0; border-radius: calc(16 * var(--px)); box-shadow: inset 0 0 0 calc(1 * var(--px)) rgba(255, 255, 255, .12); }
.tabla-env table { width: 100%; border-collapse: collapse; font-size: calc(15 * var(--px)); }
.tabla-env th, .tabla-env td { padding: calc(12 * var(--px)) calc(14 * var(--px)); text-align: left; vertical-align: top; box-shadow: 0 calc(1 * var(--px)) 0 rgba(255, 255, 255, .08); color: #DCE4E9; }
.tabla-env th { font: 600 calc(14 * var(--px))/1.3 var(--f-disp); color: #fff; background: rgba(255, 255, 255, .06); }
.tabla-env td.si { color: var(--verde); font-weight: 600; }
.tabla-env td.nuestro, .tabla-env th.nuestro { background: rgba(43, 211, 181, .08); }
.buscador-ayuda { display: flex; align-items: center; gap: calc(10 * var(--px)); max-width: calc(620 * var(--px)); margin-top: calc(26 * var(--px)); padding: calc(6 * var(--px)) calc(6 * var(--px)) calc(6 * var(--px)) calc(18 * var(--px)); border-radius: calc(999 * var(--px)); background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 calc(1 * var(--px)) rgba(255, 255, 255, .2); }
.buscador-ayuda input { flex: 1; min-width: 0; height: calc(48 * var(--px)); border: 0; background: transparent; color: #fff; font: 500 calc(17 * var(--px))/1 var(--f-txt); }
.buscador-ayuda input:focus { outline: none; }
.buscador-ayuda input::placeholder { color: rgba(255, 255, 255, .6); }
.nada { display: none; margin-top: calc(16 * var(--px)); color: var(--suave); }
.nada.visible { display: block; }

/* Héroe de las páginas generales: más bajo, para que el contenido llegue antes */
.heroe-doc { min-height: 82svh; padding-bottom: 10svh; }
.heroe-doc h1 { font-size: clamp(calc(40 * var(--px)), 5.8vw, calc(104 * var(--px))); max-width: 16ch; }
/* Blog: las guías como tarjetas (el servidor añade aquí las de los agentes con las mismas clases) */
.ml-guias { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(260 * var(--px)), 1fr)); gap: calc(14 * var(--px)); margin-bottom: calc(26 * var(--px)); }
.ml-guia { display: grid; gap: calc(8 * var(--px)); align-content: start; padding: calc(20 * var(--px)); border-radius: calc(20 * var(--px)); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 calc(1 * var(--px)) rgba(255, 255, 255, .12); text-decoration: none; transition: background-color .2s, transform .25s var(--ease); }
.ml-guia:hover { background: rgba(255, 255, 255, .11); transform: translateY(calc(-3 * var(--px))); }
.ml-guia h3 { font-size: calc(20 * var(--px)); color: #fff; }
.ml-guia p { font-size: calc(15 * var(--px)); color: var(--suave); line-height: 1.5; }
.ml-guia-m { font: 700 calc(12 * var(--px))/1.2 var(--f-txt); letter-spacing: .12em; text-transform: uppercase; color: var(--acento); }
/* Privacidad: tus preferencias de cookies */
.consentimiento { margin-top: calc(18 * var(--px)); padding: calc(18 * var(--px)); border-radius: calc(18 * var(--px)); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 calc(1 * var(--px)) rgba(255, 255, 255, .12); }
.consentimiento .boton { min-height: calc(44 * var(--px)); font-size: calc(15 * var(--px)); margin: calc(6 * var(--px)) calc(6 * var(--px)) 0 0; }
.consentimiento .boton[aria-pressed="true"] { background: var(--verde); color: #05090D; }
/* Planes: calculadora de citas perdidas */
.calc { margin-top: calc(10 * var(--px)); padding: calc(20 * var(--px)); border-radius: calc(20 * var(--px)); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 calc(1 * var(--px)) rgba(255, 255, 255, .12); }
.calc-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(12 * var(--px)); margin: calc(16 * var(--px)) 0; }
.calc-campo { display: grid; gap: calc(6 * var(--px)); font: 600 calc(14 * var(--px))/1.3 var(--f-txt); color: var(--suave); }
.calc-in { display: flex; align-items: center; gap: calc(6 * var(--px)); padding: 0 calc(14 * var(--px)); border-radius: calc(14 * var(--px)); background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 calc(1 * var(--px)) rgba(255, 255, 255, .18); }
.calc-in input { width: 100%; min-width: 0; height: calc(50 * var(--px)); border: 0; background: transparent; color: #fff; font: 700 calc(22 * var(--px))/1 var(--f-disp); }
.calc-in input:focus { outline: none; }
.calc-in em { font-style: normal; color: var(--suave); }
.calc-res { font: 600 calc(19 * var(--px))/1.35 var(--f-disp); color: #fff; }
.calc-res b { display: block; font-size: clamp(calc(48 * var(--px)), 5vw, calc(80 * var(--px))); letter-spacing: -.04em; color: var(--coral); font-variant-numeric: tabular-nums; }
.calc-res2 { margin-top: calc(8 * var(--px)); color: #DCE4E9; }
.calc-res2 b { color: var(--verde); font-variant-numeric: tabular-nums; }
.calc-nota { margin-top: calc(10 * var(--px)); font-size: calc(13 * var(--px)) !important; color: var(--tenue) !important; }
@media (max-width: 899px), (max-aspect-ratio: 4/5) { .calc-campos { grid-template-columns: minmax(0, 1fr); } .heroe-doc { min-height: 88svh; } }

/* La sombra de los titulares partidos en palabras va en bloque (drop-shadow): con text-shadow cada palabra recortaba su sombra en un rectángulo */
.heroe h1[data-partido], .esc-titulo[data-partido], .final h2[data-partido] { text-shadow: none; filter: drop-shadow(0 calc(2 * var(--px)) calc(16 * var(--px)) rgba(0, 0, 0, .38)); }
.d-noche .heroe h1[data-partido], .d-noche .esc-titulo[data-partido] { filter: drop-shadow(0 0 calc(22 * var(--px)) rgba(120, 170, 255, .32)) drop-shadow(0 calc(2 * var(--px)) calc(12 * var(--px)) rgba(0, 0, 0, .45)); }

/* ══ Direcciones de arte ══ */
/* 1 · Cine: bandas de pantalla ancha, rótulos en el tercio inferior, timecode */
.d-cine { --acento: var(--oro); --peso-t: 600; --tracking-t: -.03em; }
.d-cine .banda { position: absolute; left: 0; right: 0; height: 9svh; background: #000; transform: scaleY(0); transition: transform 1.1s var(--ease); }
.d-cine .banda-a { top: 0; transform-origin: top; }
.d-cine .banda-b { bottom: 0; transform-origin: bottom; }
.d-cine.en-pelicula .banda { transform: scaleY(1); }
.d-cine .esc-linea { font-size: calc(17 * var(--px)); letter-spacing: .01em; color: #E9EEF1; }
.d-cine .esc-ante { color: var(--oro); }
.d-cine .codigo { position: absolute; right: var(--margen); top: calc(9svh + calc(14 * var(--px))); font: 600 calc(12 * var(--px))/1 var(--f-txt); letter-spacing: .16em; color: rgba(255, 255, 255, .62); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .6s; }
.d-cine.en-pelicula .codigo { opacity: 1; }
/* 2 · Cartografía: coordenadas reales, escala real, norte real y rutas a las zonas vecinas */
.d-carto { --acento: var(--verde); --caja-t: uppercase; --tracking-t: -.01em; --peso-t: 700; --interlinea-t: .95; }
.d-carto .esc-titulo { font-size: clamp(calc(34 * var(--px)), 4.2vw, calc(76 * var(--px))); }
.d-carto .marco-carto { position: absolute; inset: calc(84 * var(--px)) calc(16 * var(--px)) calc(16 * var(--px)); box-shadow: inset 0 0 0 calc(1 * var(--px)) rgba(255, 255, 255, .14); border-radius: calc(4 * var(--px)); }
.d-carto .coord { position: absolute; font: 600 calc(11 * var(--px))/1 var(--f-txt); letter-spacing: .1em; color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums; background: rgba(5, 9, 13, .6); padding: calc(4 * var(--px)) calc(6 * var(--px)); border-radius: calc(4 * var(--px)); }
.d-carto .coord-lat { left: calc(18 * var(--px)); top: 50%; translate: 0 -50%; writing-mode: vertical-rl; rotate: 180deg; }
.d-carto .coord-lon { right: calc(92 * var(--px)); bottom: calc(52 * var(--px)); }
.d-carto .norte { position: absolute; right: calc(34 * var(--px)); bottom: calc(40 * var(--px)); width: calc(44 * var(--px)); height: calc(44 * var(--px)); border-radius: 50%; background: rgba(5, 9, 13, .6); box-shadow: inset 0 0 0 calc(1 * var(--px)) rgba(255, 255, 255, .25); }
.d-carto .norte i { position: absolute; left: 50%; top: 50%; width: calc(2 * var(--px)); height: calc(30 * var(--px)); margin: calc(-15 * var(--px)) 0 0 calc(-1 * var(--px)); background: linear-gradient(180deg, var(--coral) 50%, rgba(255, 255, 255, .7) 50%); transform: rotate(var(--rumbo, 0deg)); border-radius: calc(2 * var(--px)); }
.d-carto .norte b { position: absolute; left: 50%; top: calc(-18 * var(--px)); translate: -50% 0; font: 700 calc(11 * var(--px))/1 var(--f-txt); color: #fff; }
.d-carto .escala { position: absolute; left: calc(34 * var(--px)); bottom: calc(44 * var(--px)); font: 600 calc(11 * var(--px))/1 var(--f-txt); color: #fff; }
.d-carto .escala i { display: block; height: calc(6 * var(--px)); width: var(--ancho, calc(80 * var(--px))); margin-bottom: calc(6 * var(--px)); background: repeating-linear-gradient(90deg, #fff 0 50%, rgba(255, 255, 255, .25) 50% 100%) 0 0 / 50% 100%; box-shadow: 0 0 0 calc(1 * var(--px)) rgba(255, 255, 255, .5); }
/* 3 · Editorial: tipografía gigante, el nombre del lugar como fondo, columnas */
.d-edit { --acento: var(--coral); --t-titulo: clamp(calc(44 * var(--px)), 6.4vw, calc(118 * var(--px))); --tracking-t: -.05em; --interlinea-t: .9; }
.d-edit .esc-linea { font-size: calc(19 * var(--px)); padding-left: calc(18 * var(--px)); box-shadow: inset calc(3 * var(--px)) 0 0 var(--coral); }
.d-edit .esc-ante { color: #fff; letter-spacing: .3em; }
/* 4 · Interfaz: esquinas de visor, telemetría real y textos que se descifran */
.d-hud { --acento: var(--verde); --peso-t: 600; --tracking-t: -.02em; }
.d-hud .visor i { position: absolute; width: calc(34 * var(--px)); height: calc(34 * var(--px)); border-color: rgba(43, 211, 181, .7); border-style: solid; border-width: 0; }
.d-hud .visor i:nth-child(1) { left: calc(18 * var(--px)); top: calc(86 * var(--px)); border-left-width: calc(2 * var(--px)); border-top-width: calc(2 * var(--px)); }
.d-hud .visor i:nth-child(2) { right: calc(18 * var(--px)); top: calc(86 * var(--px)); border-right-width: calc(2 * var(--px)); border-top-width: calc(2 * var(--px)); }
.d-hud .visor i:nth-child(3) { left: calc(18 * var(--px)); bottom: calc(18 * var(--px)); border-left-width: calc(2 * var(--px)); border-bottom-width: calc(2 * var(--px)); }
.d-hud .visor i:nth-child(4) { right: calc(18 * var(--px)); bottom: calc(18 * var(--px)); border-right-width: calc(2 * var(--px)); border-bottom-width: calc(2 * var(--px)); }
.d-hud .telemetria { position: absolute; right: calc(28 * var(--px)); bottom: calc(30 * var(--px)); display: grid; gap: calc(4 * var(--px)); text-align: right; font: 600 calc(11 * var(--px))/1.2 var(--f-txt); letter-spacing: .14em; color: rgba(43, 211, 181, .9); font-variant-numeric: tabular-nums; }
.d-hud .esc-cab { padding-left: calc(18 * var(--px)); box-shadow: inset calc(2 * var(--px)) 0 0 rgba(43, 211, 181, .7); }
.d-hud .pos-c, .d-hud .pos-cb, .d-hud .pos-da, .d-hud .pos-db { padding-left: 0; box-shadow: none; }
/* 5 · Postal: marco de tarjeta, sello con el lugar y foto aérea real como postal */
.d-postal { --acento: var(--oro); --peso-t: 600; }
.d-postal .marco-postal { position: absolute; inset: calc(12 * var(--px)); border-radius: calc(18 * var(--px)); box-shadow: inset 0 0 0 calc(1 * var(--px)) rgba(255, 255, 255, .28), 0 0 0 calc(40 * var(--px)) rgba(5, 9, 13, .35); }
.d-postal .sello { position: absolute; right: var(--margen); bottom: calc(40 * var(--px)); padding: calc(10 * var(--px)) calc(12 * var(--px)); border-radius: calc(6 * var(--px)); box-shadow: inset 0 0 0 calc(1.5 * var(--px)) rgba(255, 210, 120, .75); color: var(--oro); font: 700 calc(11 * var(--px))/1.35 var(--f-txt); letter-spacing: .14em; text-transform: uppercase; text-align: center; rotate: 4deg; background: rgba(5, 9, 13, .4); }
.d-postal .sello b { display: block; font: 700 calc(15 * var(--px))/1.1 var(--f-disp); letter-spacing: 0; text-transform: none; color: #fff; }
.postal-foto { width: min(calc(420 * var(--px)), 36vw); padding: calc(10 * var(--px)) calc(10 * var(--px)) calc(38 * var(--px)); background: #F7F4EE; border-radius: calc(6 * var(--px)); box-shadow: 0 calc(40 * var(--px)) calc(90 * var(--px)) rgba(0, 0, 0, .55); rotate: -3deg; color: #1B232A; }
.postal-foto img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: calc(3 * var(--px)); }
.postal-foto figcaption { margin-top: calc(10 * var(--px)); font: 600 calc(15 * var(--px))/1.2 var(--f-disp); text-align: center; }
.postal-foto small { display: block; margin-top: calc(2 * var(--px)); font: 500 calc(11 * var(--px))/1.3 var(--f-txt); color: #6B7680; }
/* 6 · Nocturno: la película de noche, brillo suave en los textos */
.d-noche { --acento: #8FB8FF; --sombra-t: 0 0 calc(40 * var(--px)) rgba(120, 170, 255, .35), 0 calc(2 * var(--px)) calc(24 * var(--px)) rgba(0, 0, 0, .5); }
.d-noche .esc-ante { color: #8FB8FF; }
/* 7 · Bitácora: un día del negocio, hora a hora, con su raíl */
.d-bitacora { --acento: var(--oro); --peso-t: 600; }
.d-bitacora .rail { position: absolute; left: calc(26 * var(--px)); top: 22svh; bottom: 14svh; width: calc(2 * var(--px)); background: rgba(255, 255, 255, .18); border-radius: calc(2 * var(--px)); }
.d-bitacora .rail i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: var(--oro); transform-origin: top; transform: scaleY(var(--k, 0)); border-radius: inherit; }
.d-bitacora .rail b { position: absolute; left: calc(14 * var(--px)); top: calc(var(--k, 0) * 100%); translate: 0 -50%; font: 700 calc(13 * var(--px))/1 var(--f-txt); color: var(--oro); font-variant-numeric: tabular-nums; white-space: nowrap; }
.d-bitacora .esc-ante { font-size: calc(15 * var(--px)); letter-spacing: .06em; }
/* 8 · Rejilla: índice enorme en contorno, columnas suizas */
.d-rejilla { --acento: var(--coral); --tracking-t: -.04em; }
.d-rejilla .indice-esc { margin-bottom: calc(10 * var(--px)); font: 700 clamp(calc(64 * var(--px)), 6vw, calc(110 * var(--px)))/.8 var(--f-disp); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: calc(1.3 * var(--px)) rgba(255, 255, 255, .5); font-variant-numeric: tabular-nums; }
.d-rejilla .esc-linea { columns: 2; column-gap: calc(28 * var(--px)); max-width: 52ch; font-size: calc(16 * var(--px)); }
/* 9 · Teatro: foco sobre el lugar, un elemento cada vez */
.d-teatro { --acento: var(--oro); }
.d-teatro .foco { position: absolute; inset: 0; background: radial-gradient(circle at var(--fx, 50%) var(--fy, 55%), rgba(5, 9, 13, 0) 0, rgba(5, 9, 13, 0) calc(var(--fr, 22) * 1vmin), rgba(5, 9, 13, .62) calc(var(--fr, 22) * 1vmin + calc(160 * var(--px)))); transition: opacity .8s; opacity: 0; }
.d-teatro.en-pelicula .foco { opacity: 1; }
/* 10 · Collage: piezas superpuestas, ligeramente giradas */
.d-collage { --acento: var(--coral); --peso-t: 700; }
.d-collage .obj.lado-d .iphone, .d-collage .obj.lado-d .tarjeta { rotate: 2.5deg; }
.d-collage .obj.lado-i .tarjeta, .d-collage .obj.lado-i .lectura { rotate: -2deg; }
.d-collage .esc-titulo .w:nth-child(2n) .c { font-weight: 500; }
/* 11 · Marea: cinta de frases que pasa despacio y escenas que avanzan en horizontal */
.d-marea { --acento: var(--verde); }
.d-marea .cinta { position: absolute; left: 0; right: 0; bottom: calc(18 * var(--px)); overflow: hidden; white-space: nowrap; font: 600 calc(13 * var(--px))/1 var(--f-txt); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.d-marea .cinta span { display: inline-block; padding-left: 100%; animation: cinta 60s linear infinite; }
@keyframes cinta { to { transform: translateX(-100%); } }
/* 12 · Radar: anillos reales de 5, 10 y 20 km alrededor del lugar (se dibujan en el lienzo) */
.d-radar { --acento: var(--verde); --peso-t: 600; }
/* 13 · Mosaico: pantallas reales que se ordenan en rejilla */
.d-mosaico { --acento: var(--coral); }
.mosaico { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(12 * var(--px)); width: min(calc(520 * var(--px)), 42vw); perspective: calc(1200 * var(--px)); }
.mosaico figure { position: relative; aspect-ratio: 9 / 16; border-radius: calc(16 * var(--px)); overflow: hidden; background: #0D0F11; box-shadow: 0 calc(20 * var(--px)) calc(50 * var(--px)) rgba(0, 0, 0, .45), 0 0 0 calc(1 * var(--px)) rgba(255, 255, 255, .12); }
.mosaico img { width: 100%; height: auto; }
/* 14 · Aurora: aire, una frase por pantalla, luz que entra por los bordes */
.d-aurora { --acento: var(--verde); --peso-t: 600; --tracking-t: -.03em; }
.d-aurora .luz-borde { position: absolute; inset: 0; background: radial-gradient(40% 50% at 0% 100%, rgba(43, 211, 181, .16), rgba(43, 211, 181, 0)), radial-gradient(40% 50% at 100% 0%, rgba(232, 87, 58, .14), rgba(232, 87, 58, 0)); }

/* Las marcas de la dirección de arte solo acompañan a la película: fuera de ella (portada, guía, dudas, cierre) se apagan */
.capa-dir > * { transition: opacity .5s; }
body:not(.en-pelicula) .capa-dir > *:not(.foco):not(.luz-borde) { opacity: 0; }
/* Marea: el aviso de «Ejemplo» sube por encima de la cinta (solo en apaisado; en el móvil va arriba) */
@media (min-width: 900px) and (min-aspect-ratio: 4/5) { .d-marea .ejemplo { bottom: calc(50 * var(--px)); } }
/* En «Alrededor», en el móvil caben tres vecinas bajo la cifra del INE */
@media (max-width: 899px), (max-aspect-ratio: 4/5) { .esc-radio .radio li:nth-child(n+4) { display: none; } .mosaico figure:nth-child(n+4) { display: none; } }
/* En «Nadie se olvida», en el móvil la cifra no cabe junto a la agenda: la cuenta la frase */
@media (max-width: 899px), (max-aspect-ratio: 4/5) { .esc-recuerda .dato-caja { display: none; } }

/* ══ Móvil: composición propia ══ */
@media (max-width: 899px), (max-aspect-ratio: 4/5) {
  :root { --t-hero: clamp(calc(40 * var(--px)), calc(11.6 * var(--vw)), calc(60 * var(--px))); --t-titulo: clamp(calc(34 * var(--px)), calc(9.6 * var(--vw)), calc(52 * var(--px))); --t-linea: calc(16 * var(--px)); --margen: calc(20 * var(--px)); }
  .barra { height: calc(62 * var(--px)); padding: 0 calc(16 * var(--px)); }
  .barra-logo img { width: calc(108 * var(--px)); }
  .barra-boton { min-height: calc(42 * var(--px)); padding: 0 calc(16 * var(--px)); font-size: calc(14 * var(--px)); }
  .barra .idioma { display: none; }
  .capitulos { display: none; }
  .heroe { padding: calc(90 * var(--px)) calc(20 * var(--px)) calc(110 * var(--px)); }
  .heroe.h-partido .heroe-txt { display: block; }
  .heroe.h-partido .heroe-sub { margin-top: calc(18 * var(--px)); }
  .heroe.h-arriba { padding-top: calc(110 * var(--px)); }
  .heroe.h-derecha { align-items: stretch; }
  .heroe .migas { margin-bottom: calc(16 * var(--px)); }
  .heroe-sub { font-size: calc(18 * var(--px)); }
  .constructor { flex-direction: column; border-radius: calc(26 * var(--px)); }
  .constructor input { height: calc(52 * var(--px)); padding: 0 calc(16 * var(--px)); }
  .constructor .boton { width: 100%; }
  .vivo { font-size: calc(14 * var(--px)); }
  .desliza { display: none; }
  .palabra-fondo { font-size: calc(30 * var(--vw)); top: 30%; }
  .velo-izq, .velo-der, .velo-arriba { background: linear-gradient(180deg, rgba(3, 8, 12, .86) 0%, rgba(3, 8, 12, .62) 26%, rgba(3, 8, 12, .22) 40%, rgba(3, 8, 12, 0) 55%, rgba(3, 8, 12, .55) 100%); }
  .velo-abajo { background: linear-gradient(0deg, rgba(3, 8, 12, .86) 0%, rgba(3, 8, 12, .3) 45%, rgba(3, 8, 12, .5) 100%); }
  .esc-cab, .esc-cab.pos-ia, .esc-cab.pos-da, .esc-cab.pos-ib, .esc-cab.pos-db { left: calc(20 * var(--px)); right: calc(20 * var(--px)); top: 12svh; bottom: auto; max-width: none; text-align: left; translate: none; }
  .esc-cab.pos-c, .esc-cab.pos-cb { left: calc(20 * var(--px)); right: calc(20 * var(--px)); top: 12svh; bottom: auto; translate: none; max-width: none; }
  .esc-titulo { max-width: 12ch; }
  .esc-linea { font-size: calc(16 * var(--px)); margin-top: calc(12 * var(--px)); max-width: 32ch; }
  .esc-ante { margin-bottom: calc(10 * var(--px)); font-size: calc(12 * var(--px)); }
  .ejemplo { bottom: auto; top: calc(70 * var(--px)); left: calc(20 * var(--px)); font-size: calc(12 * var(--px)); }
  .obj, .obj.lado-d, .obj.lado-i, .obj.abajo-d, .obj.abajo-i, .obj.centro-abajo { left: 50%; right: auto; top: auto; bottom: calc(96 * var(--px)); translate: -50% 0; }
  .obj.ancho { left: calc(20 * var(--px)); right: calc(20 * var(--px)); translate: none; }
  .tel-caja .iphone { width: calc(36 * var(--vw)); max-width: calc(180 * var(--px)); }
  .tel-pie { display: none; }
  .lectura, .agenda, .chat, .pasos, .radio, .tarjeta { width: calc(100vw - calc(40 * var(--px))); max-width: calc(420 * var(--px)); }
  .lectura { padding: calc(6 * var(--px)); background: rgba(8, 14, 20, .94); }
  .lectura li { padding: calc(6 * var(--px)) calc(10 * var(--px)); font-size: calc(14 * var(--px)); grid-template-columns: calc(20 * var(--px)) minmax(0, 1fr) auto; }
  .lectura li i { width: calc(18 * var(--px)); height: calc(18 * var(--px)); }
  .ag-fila { padding: calc(9 * var(--px)); font-size: calc(14 * var(--px)); grid-template-columns: calc(46 * var(--px)) minmax(0, 1fr) auto; }
  .msg { font-size: calc(15 * var(--px)); padding: calc(11 * var(--px)) calc(14 * var(--px)); }
  .dato-num { font-size: calc(64 * var(--px)); }
  .dato-txt { font-size: calc(16 * var(--px)); }
  .reloj-grande { font-size: calc(22 * var(--vw)); }
  .crono b { font-size: calc(60 * var(--px)); }
  .crono span { font-size: calc(14 * var(--px)); }
  .cifra-grande { font-size: calc(56 * var(--px)); }
  .ventajas { flex-direction: row; flex-wrap: wrap; gap: calc(6 * var(--px)); }
  .ventajas li { font-size: calc(13 * var(--px)); padding: calc(8 * var(--px)) calc(12 * var(--px)); }
  .gps-txt { display: none; }
  .escalera { height: calc(70 * var(--px)); }
  .precio-bloque { padding: calc(80 * var(--px)) calc(20 * var(--px)) calc(100 * var(--px)); }
  .dudas { padding: 14svh calc(12 * var(--px)) 10svh; }
  .dudas-caja { border-radius: calc(22 * var(--px)); }
  .objeciones.rejilla2 { grid-template-columns: minmax(0, 1fr); }
  .guia { padding: 14svh calc(16 * var(--px)) 10svh; }
  .guia-dentro { grid-template-columns: minmax(0, 1fr); gap: calc(28 * var(--px)); }
  .guia-datos { position: static; }
  .guia-texto p { font-size: calc(17 * var(--px)); }
  .final .constructor { border-radius: calc(26 * var(--px)); }
  .pie { padding-bottom: calc(130 * var(--px)); }
  .barra-movil { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: calc(10 * var(--px)) calc(12 * var(--px)) calc(calc(10 * var(--px)) + env(safe-area-inset-bottom)); background: rgba(3, 8, 12, .94); transform: translateY(110%); transition: transform .45s var(--ease); }
  .barra-movil .boton { width: 100%; min-height: calc(54 * var(--px)); }
  .barra-movil.visible { transform: none; }
  .lectura-pag { padding: calc(96 * var(--px)) calc(14 * var(--px)) 10svh; }
  .doc { grid-template-columns: minmax(0, 1fr); gap: calc(18 * var(--px)); }
  .doc-indice { position: static; display: flex; overflow-x: auto; gap: calc(6 * var(--px)); padding-bottom: calc(6 * var(--px)); }
  .doc-indice a { white-space: nowrap; background: rgba(255, 255, 255, .06); }
  .doc-cuerpo { border-radius: calc(20 * var(--px)); }
  /* Direcciones en el móvil: sus marcas se quedan en los bordes y no tapan nada */
  .d-cine .banda { height: 6svh; }
  .d-cine .codigo { top: calc(6svh + calc(10 * var(--px))); right: calc(16 * var(--px)); font-size: calc(10 * var(--px)); }
  .d-carto .marco-carto { inset: calc(70 * var(--px)) calc(8 * var(--px)) calc(8 * var(--px)); }
  .d-carto .coord-lat, .d-carto .escala, .d-carto .norte { display: none; }
  .d-carto .coord-lon { display: none; }
  .d-hud .visor i:nth-child(1), .d-hud .visor i:nth-child(2) { top: calc(70 * var(--px)); }
  .d-hud .visor i:nth-child(3), .d-hud .visor i:nth-child(4) { bottom: calc(84 * var(--px)); }
  .d-hud .telemetria { display: none; }
  .d-postal .sello { display: none; }
  .d-postal .marco-postal { inset: calc(6 * var(--px)); }
  .postal-foto { width: calc(70 * var(--vw)); }
  .d-bitacora .rail { display: none; }
  .d-rejilla .indice-esc { font-size: calc(46 * var(--px)); margin-bottom: calc(6 * var(--px)); }
  .d-rejilla .esc-linea { columns: 1; }
  .d-marea .cinta { bottom: calc(84 * var(--px)); }
  .mosaico { width: calc(100vw - calc(40 * var(--px))); max-width: calc(420 * var(--px)); gap: calc(8 * var(--px)); }
}
/* Escena «tu web» en el móvil: la tarjeta espera bajo el titular (sin su frase, la tarjeta ya la cuenta) y vuela al iPhone de abajo */
@media (max-width: 899px), (max-aspect-ratio: 4/5) {
  .esc-web .esc-linea, .esc-web .crono-caja, .esc-web .tel-pie { display: none; }
  .esc-web .esc-cab .lectura { position: absolute; left: 0; right: 0; top: calc(100% + calc(16 * var(--px))); width: auto; max-width: none; }
  .esc-web .esc-cab .listo { position: absolute; left: 0; top: calc(100% + calc(16 * var(--px))); margin: 0; }
  .esc-web .tel-caja .iphone { width: calc(34 * var(--vw)); max-width: calc(170 * var(--px)); }
  .esc-titulo.medio { font-size: calc(var(--t-titulo) * .84); }
  .esc-titulo.largo { font-size: calc(var(--t-titulo) * .74); }
}
/* Vertical y ancho (móvil en «versión de ordenador», ~980 × 1800, o tableta en vertical): la composición del móvil, agrandada */
@media (min-width: 600px) and (max-aspect-ratio: 4/5) {
  :root { --px: min(calc(100vw / 400), calc(100svh / 860)); --vw: calc(3.9 * var(--px)); }
}
/* Entre 900 y 1199 px apaisado: los objetos laterales se estrechan un poco para no tocar el titular */
@media (min-width: 900px) and (max-width: 1199px) and (min-aspect-ratio: 4/5) {
  .esc-cab { max-width: 44vw; }
  .tel-caja .iphone { width: 20vw; }
  .lectura, .agenda, .chat, .pasos, .radio, .tarjeta { width: 36vw; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* Sin movimiento o sin script: las escenas se leen enteras, sin fijarse */
html:not(.js) .pin, .quieto .pin { height: auto; }
html:not(.js) .fijo, .quieto .fijo { position: relative; height: auto; min-height: 100svh; padding-bottom: calc(40 * var(--px)); }
html:not(.js) .etiqueta, html:not(.js) .aviso-mapa, html:not(.js) .ancla { display: none; }