/* La home de rebotea.com (7-oct-2026): el diseño de la landing nueva, con los tokens del sistema de
   diseño de Rebotea. Más corta y más comercial que la anterior; de la demo se queda el vídeo de 1:20,
   capturas de la app de verdad y «Haz la cuenta». */
:root {
  --blue-50: #EEF3FF; --blue-100: #DCE6FF; --blue-300: #8AABFF; --blue-500: #0053FE; --blue-600: #0047D6;
  --blue-700: #003BB0; --blue-800: #002F8C;
  --neutral-50: #F5F7FA; --neutral-100: #EDF0F5; --neutral-200: #DFE4EC; --neutral-300: #C7CEDB;
  --neutral-500: #6B7689; --neutral-600: #4B5568; --neutral-900: #070709;
  --green-50: #E7F8EF; --green-600: #0E9257; --red-500: #E5484D; --violet-50: #F1EEFD; --violet-500: #6E56CF;
  --marca: var(--blue-500);
  --texto: var(--neutral-900); --texto-2: var(--neutral-600); --texto-3: var(--neutral-500);
  --borde: var(--neutral-200); --borde-suave: var(--neutral-100);
  --fondo-suave: var(--neutral-50); --fondo-oscuro: var(--neutral-900);
  --sobre-oscuro-2: rgba(255, 255, 255, .72);
  --f-titulo: "Jost", "Avenir Next", system-ui, sans-serif;
  --f-texto: "Inter", system-ui, -apple-system, sans-serif;
  --t-display: clamp(38px, 4.6vw, 62px); --t-h2: clamp(30px, 4.2vw, 50px); --t-h3: clamp(20px, 2vw, 24px);
  --t-lead: clamp(17px, 1.5vw, 19px);
  --r-md: 12px; --r-lg: 16px; --r-xl: 22px;
  --sombra-tarjeta: 0 1px 2px rgba(7, 7, 9, .04), 0 6px 20px rgba(7, 7, 9, .06);
  --sombra-tarjeta-hover: 0 2px 4px rgba(7, 7, 9, .06), 0 14px 32px rgba(7, 7, 9, .10);
  --sombra-modal: 0 24px 64px rgba(7, 7, 9, .24);
  --sombra-marca: 0 8px 24px rgba(0, 83, 254, .28);
  --ancho: 1280px; --margen: clamp(20px, 4.4vw, 56px); --seccion: clamp(64px, 8vw, 112px);
  /* Lo que usa el vídeo de la demo (peli.css) */
  --letra: var(--f-texto); --azul: #0053fe; --azul-c: #6f9bff; --bola: #d7f24a; --tinta: #0d1320; --verde: #16a34a; --gris: #626a78; --rojo: #ef4444;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; font: 400 15px/1.55 var(--f-texto); color: var(--texto); background: #fff; -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3 { margin: 0; font-family: var(--f-titulo); letter-spacing: -.02em; text-wrap: balance; }
h1 em, h2 em { font-style: normal; color: var(--marca); }
p { margin: 0; text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
a { color: var(--blue-600); text-decoration: none; font-weight: 500; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 6px; }
.envoltura { max-width: var(--ancho); margin: 0 auto; padding: var(--seccion) var(--margen); }
.antetitulo { display: block; font: 600 12px/1.2 var(--f-texto); text-transform: uppercase; letter-spacing: .08em; color: var(--marca); }
.cabecera-seccion { display: grid; gap: 12px; max-width: 680px; }
.cabecera-seccion h2, .h2 { font-weight: 800; font-size: var(--t-h2); line-height: 1.08; }
.lead { font-size: var(--t-lead); line-height: 1.65; color: var(--texto-2); }

/* ── Botones ── */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 24px; border-radius: 999px; border: 0; font: 600 15px/1 var(--f-texto); white-space: nowrap; cursor: pointer; text-decoration: none; transition: background .2s, box-shadow .2s, transform .2s, color .2s; }
.boton:hover { transform: translateY(-1px); text-decoration: none; }
.boton svg { width: 18px; height: 18px; flex: none; }
.boton-azul { background: var(--marca); color: #fff; box-shadow: var(--sombra-marca); }
.boton-azul:hover { background: var(--blue-600); color: #fff; }
.boton-claro { background: #fff; color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--neutral-300); }
.boton-claro:hover { color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--texto); }
.boton-blanco { background: #fff; color: var(--marca); }
.boton-blanco:hover { color: var(--blue-700); }
.boton-claro small, .boton-azul small { font-weight: 500; opacity: .7; }
.boton.peq { height: 40px; padding: 0 18px; font-size: 14px; }

/* ── Cabecera ── */
.cabecera { position: sticky; top: 0; z-index: 50; height: 76px; transition: background .24s, box-shadow .24s; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.cabecera.bajada { background: rgba(255, 255, 255, .92); box-shadow: 0 1px 0 var(--borde); }
.cabecera-dentro { max-width: var(--ancho); height: 100%; margin: 0 auto; padding: 0 var(--margen); display: flex; align-items: center; gap: 28px; }
.cabecera-logo img { width: 132px; height: auto; }
.menu { display: flex; gap: 22px; flex: 1; }
.menu a { font-size: 14px; font-weight: 500; color: var(--texto-2); white-space: nowrap; }
.menu a:hover { color: var(--texto); }
.menu-movil { display: none; position: relative; }
.menu-movil summary { list-style: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; cursor: pointer; color: var(--texto); }
.menu-movil summary::-webkit-details-marker { display: none; }
.menu-movil nav { position: absolute; right: 0; top: 52px; display: grid; min-width: 220px; padding: 8px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sombra-modal); }
.menu-movil nav a { padding: 12px 14px; border-radius: 10px; color: var(--texto); font-size: 15px; }
.menu-movil nav a:hover { background: var(--fondo-suave); }

/* ── Héroe ── */
.heroe { position: relative; margin-top: -76px; overflow: hidden; }
.heroe::before { content: ""; position: absolute; right: -10%; top: 0; width: 70%; height: 100%; background: radial-gradient(closest-side, var(--blue-50), rgba(238, 243, 255, 0)); pointer-events: none; }
.heroe-dentro { position: relative; max-width: var(--ancho); margin: 0 auto; padding: 136px var(--margen) 88px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.heroe-texto { display: grid; gap: 22px; justify-items: start; max-width: 590px; }
.heroe h1 { font-weight: 900; font-size: var(--t-display); line-height: 1.08; letter-spacing: -.03em; }
.heroe h1 .antetitulo { margin-bottom: 18px; letter-spacing: .08em; }
.heroe-botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.sellos { display: flex; flex-wrap: wrap; gap: 10px 24px; width: 100%; margin: 6px 0 0; padding: 20px 0 0; border-top: 1px solid var(--borde); list-style: none; }
.sellos li { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; }
.sellos svg { width: 16px; height: 16px; color: var(--marca); }
.heroe-visual { position: relative; margin: 0; padding: 44px 0 30px; }
.heroe-visual .cam { aspect-ratio: 16 / 11; box-shadow: var(--sombra-modal); }
.cam-chip b svg { width: 17px; height: 17px; color: #fff; }
.movil { position: relative; padding: 8px; border-radius: 34px; background: #0c0f16; box-shadow: 0 30px 60px rgba(0, 0, 0, .45), inset 0 0 0 1.5px rgba(255, 255, 255, .12); }
.movil img { width: 100%; height: auto; border-radius: 27px; }
.flotante { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; background: #fff; border-radius: var(--r-lg); box-shadow: var(--sombra-modal); }
.flotante b { display: block; font-size: 15px; font-weight: 600; line-height: 1.2; }
.flotante small { display: block; font-size: 13px; color: var(--texto-2); line-height: 1.25; }
.flotante .ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-md); }
.flotante .ico svg { width: 20px; height: 20px; }
.ico.verde { background: var(--green-50); color: var(--green-600); }
.ico.azul { background: var(--blue-50); color: var(--marca); }
.f-reserva { top: -6px; right: 28px; }
.f-puerta { top: 56%; left: -22px; }
.heroe-visual figcaption { margin-top: 22px; text-align: center; font-size: 13px; color: var(--texto-3); }

/* ── Tarjetas ── */
.rejilla-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.tarjeta { display: grid; gap: 12px; align-content: start; padding: 28px; background: #fff; border: 1px solid var(--borde); border-radius: var(--r-lg); box-shadow: var(--sombra-tarjeta); }
.tarjeta h3 { font-weight: 600; font-size: var(--t-h3); line-height: 1.25; margin-top: 8px; }
.tarjeta p { color: var(--texto-2); }
.ico-grande { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-md); background: var(--blue-50); color: var(--marca); }
.ico-grande svg { width: 22px; height: 22px; }
.seccion-problemas .envoltura { display: grid; gap: 40px; }

/* ── La app ── */
.seccion-app { background: var(--fondo-suave); }
.seccion-app .envoltura { display: grid; gap: 44px; }
.app-cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; }
.pantallas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
.pantallas li { display: grid; gap: 18px; justify-items: center; text-align: center; }
.pantallas .movil { width: min(100%, 260px); margin: 0; box-shadow: 0 24px 48px rgba(7, 7, 9, .22); }
.pantallas b { display: block; font: 600 var(--t-h3)/1.25 var(--f-titulo); }
.pantallas span { display: block; max-width: 300px; margin-top: 6px; color: var(--texto-2); }
.nota-capturas { font-size: 13px; color: var(--texto-3); }

/* ── Módulos ── */
.seccion-modulos .envoltura { display: grid; gap: 40px; }
.modulos-cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; }
.modulos-cabecera .lead { max-width: 380px; }
.modulos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.modulo { display: grid; grid-template-rows: auto auto 1fr auto; gap: 14px; padding: 24px; background: #fff; border: 1px solid var(--borde); border-radius: var(--r-lg); box-shadow: var(--sombra-tarjeta); color: var(--texto); font-weight: 400; transition: box-shadow .2s, transform .2s; }
.modulo:hover { box-shadow: var(--sombra-tarjeta-hover); transform: translateY(-2px); color: var(--texto); text-decoration: none; }
.modulo-arriba { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.modulo .ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--marca); color: #fff; }
.modulo .ico svg { width: 20px; height: 20px; }
.etiqueta { display: inline-flex; padding: 4px 10px; border-radius: 999px; background: var(--blue-50); color: var(--blue-600); font: 600 12px/1.2 var(--f-texto); }
.modulo h3 { font-weight: 600; font-size: var(--t-h3); }
.modulo h3 span { color: var(--texto-3); font-weight: 700; }
.modulo p { font-size: 14px; color: var(--texto-2); }
.modulo .ver { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--blue-600); }
.modulo .ver svg { width: 16px; height: 16px; }

/* ── Rec ── */
.seccion-rec { background: var(--fondo-oscuro); color: #fff; }
.dos-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }
.foto-rec { position: relative; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3; }
.foto-rec img { width: 100%; height: 100%; object-fit: cover; }
.pildora-rec { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; color: var(--red-500); font: 600 12px/1.2 var(--f-texto); letter-spacing: .08em; }
.pildora-rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--red-500); animation: latido 1.6s ease-in-out infinite; }
.pildora-ia { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(7, 7, 9, .7); color: #fff; font-size: 13px; font-weight: 600; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pildora-ia svg { width: 16px; height: 16px; color: #b9abff; }
@keyframes latido { 50% { opacity: .35; } }
.texto-rec { display: grid; gap: 18px; justify-items: start; }
.texto-rec .antetitulo { color: var(--blue-300); }
.texto-rec h2 em { color: var(--blue-300); }
.texto-rec .lead { color: var(--sobre-oscuro-2); max-width: 500px; }
.lista { display: grid; gap: 12px; margin: 4px 0 8px; padding: 0; list-style: none; }
.lista li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; font-size: 15.5px; }
.lista svg { width: 20px; height: 20px; margin-top: 1px; color: var(--blue-300); }

/* ── Pasos ── */
.seccion-pasos .envoltura { display: grid; gap: 40px; }
.pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.pasos li { display: grid; gap: 12px; align-content: start; padding-top: 20px; border-top: 2px solid var(--marca); }
.pasos .num { font: 900 clamp(34px, 4.4vw, 52px)/1 var(--f-titulo); color: var(--marca); font-variant-numeric: tabular-nums; }
.pasos h3 { font-weight: 700; font-size: clamp(22px, 2.4vw, 28px); }
.pasos p { color: var(--texto-2); }

/* ── Tu marca ── */
.seccion-marca { background: var(--fondo-suave); }
.texto-marca { display: grid; gap: 16px; }
.puntos-marca { display: grid; gap: 18px; margin: 8px 0 0; padding: 0; list-style: none; }
.puntos-marca li { display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: start; }
.puntos-marca .ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; background: var(--blue-50); color: var(--marca); }
.puntos-marca .ico svg { width: 16px; height: 16px; }
.puntos-marca b { display: block; font-weight: 600; }
.puntos-marca span:not(.ico) { display: block; font-size: 14px; color: var(--texto-2); }
.foto-marca { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sombra-modal); }
.foto-marca img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; }
.foto-marca div { position: absolute; left: 16px; right: 16px; bottom: 16px; display: grid; gap: 2px; padding: 14px 18px; background: #fff; border-radius: var(--r-md); }
.foto-marca b { font-weight: 600; }
.foto-marca small { font-size: 13px; color: var(--texto-2); }

/* ── Cada euro / Haz la cuenta ── */
.seccion-cuenta { position: relative; background: var(--marca); color: #fff; overflow: hidden; }
.seccion-cuenta::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, .12) 2px, transparent 2px), linear-gradient(to bottom, rgba(255, 255, 255, .12) 2px, transparent 2px); background-size: 160px 160px; }
.seccion-cuenta .envoltura { position: relative; }
.texto-cuenta { display: grid; gap: 18px; justify-items: start; }
.texto-cuenta .antetitulo { color: rgba(255, 255, 255, .9); }
.texto-cuenta h2 em { color: #fff; text-decoration: underline; text-decoration-color: var(--bola); text-decoration-thickness: 4px; text-underline-offset: 6px; }
.texto-cuenta .lead { color: rgba(255, 255, 255, .9); }
.texto-cuenta .lead strong { color: #fff; font-weight: 600; }
.ventajas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; width: 100%; margin: 6px 0 0; padding: 0; list-style: none; }
.ventajas li { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.ventajas svg { width: 18px; height: 18px; flex: none; }
.calculadora { background: #fff; color: var(--texto); border-radius: var(--r-xl); box-shadow: var(--sombra-modal); overflow: hidden; }
.calc-cabecera { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--borde); }
.calc-cabecera b { font: 700 18px/1.2 var(--f-titulo); }
.calc-cabecera small { font: 600 12px/1.2 var(--f-texto); color: var(--texto-3); text-transform: uppercase; letter-spacing: .08em; }
.calc-campos { display: grid; gap: 16px; padding: 18px 22px 6px; }
.campo label { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 500; color: var(--texto-2); }
.campo output { font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; }
.campo input[type=range] { width: 100%; margin: 8px 0 0; accent-color: var(--marca); }
.campo small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--texto-3); }
.calc-resultado { display: grid; gap: 8px; padding: 16px 22px 20px; margin-top: 10px; background: var(--fondo-suave); }
.calc-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.calc-total span { font-size: 14px; color: var(--texto-2); }
.calc-total b { font: 800 clamp(26px, 3vw, 34px)/1 var(--f-titulo); font-variant-numeric: tabular-nums; }
.calc-fila { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--texto-2); }
.calc-fila b { color: var(--texto); font-variant-numeric: tabular-nums; }
.calc-fila b.rojo { color: var(--red-500); }
.calc-fila.ahorro { padding-top: 8px; border-top: 1px solid var(--borde); font-weight: 600; color: var(--texto); }
.calc-fila.ahorro b { color: var(--green-600); font-size: 18px; }
.calc-resultado .boton { margin-top: 8px; height: auto; min-height: 52px; padding: 14px 20px; white-space: normal; text-align: center; line-height: 1.25; }
.calc-total b { white-space: nowrap; }

/* ── Preguntas ── */
.seccion-preguntas .envoltura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 56px; align-items: start; }
.faq { display: grid; gap: 10px; }
.faq details { border: 1px solid var(--borde); border-radius: var(--r-lg); background: #fff; }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 18px 22px; font-weight: 600; font-size: 16px; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 22px; line-height: 1; color: var(--marca); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 22px 20px; color: var(--texto-2); }

/* ── Contacto ── */
.seccion-contacto { border-top: 1px solid var(--borde-suave); }
.seccion-contacto .envoltura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.texto-contacto { display: grid; gap: 16px; }
.texto-contacto h2 { font-weight: 900; font-size: var(--t-display); line-height: 1; letter-spacing: -.03em; }
.formulario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 32px; background: #fff; border: 1px solid var(--borde); border-radius: var(--r-xl); box-shadow: var(--sombra-tarjeta); }
.formulario .ancho { grid-column: 1 / -1; }
.formulario label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; }
.formulario input[type=text], .formulario input[type=tel], .formulario input[type=number] { height: 46px; padding: 0 14px; border: 1.5px solid var(--neutral-300); border-radius: var(--r-md); font: 400 15px var(--f-texto); color: var(--texto); background: #fff; }
.formulario input:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px rgba(0, 83, 254, .2); }
.formulario fieldset { margin: 0; padding: 0; border: 0; }
.formulario legend { margin-bottom: 8px; font-size: 14px; font-weight: 500; }
.intereses { display: flex; flex-wrap: wrap; gap: 8px; }
.intereses label { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1.5px solid var(--neutral-300); border-radius: 999px; font-size: 14px; cursor: pointer; user-select: none; }
.intereses input { width: 16px; height: 16px; margin: 0; accent-color: var(--marca); }
.intereses label:has(input:checked) { border-color: var(--marca); background: var(--blue-50); color: var(--blue-700); }
.formulario .botones { display: flex; flex-wrap: wrap; gap: 10px; }
.formulario .botones .boton { flex: 1 1 200px; }
.boton-wasap { background: #25d366; color: #06301a; }
.boton-wasap:hover { color: #06301a; }
.formulario .privacidad { font-size: 12.5px; color: var(--texto-3); }
.hecho { display: flex; gap: 12px; align-items: start; padding: 14px 16px; border-radius: var(--r-md); background: var(--green-50); color: var(--green-600); font-weight: 500; }

/* ── Pie ── */
.pie { background: var(--fondo-oscuro); color: #fff; }
.pie .envoltura { display: grid; gap: 32px; padding-top: 56px; padding-bottom: 32px; }
.pie-arriba { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; }
.pie-marca img { width: 120px; height: auto; }
.pie-marca span { display: block; margin-top: 10px; font-size: 14px; color: var(--sobre-oscuro-2); }
.pie nav { display: grid; gap: 10px; align-content: start; }
.pie nav a { font-size: 14px; font-weight: 400; color: rgba(255, 255, 255, .86); }
.pie nav a:hover { color: #fff; }
.pie-columnas { display: flex; flex-wrap: wrap; gap: 48px; }
.pie address { font-style: normal; font-size: 13px; line-height: 1.7; color: var(--sobre-oscuro-2); }
.pie-abajo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 13px; color: var(--sobre-oscuro-2); }
.pie-nota { font-size: 12.5px; color: rgba(255, 255, 255, .55); max-width: 760px; }

/* ── La barra del móvil ── */
.barra-movil { display: none; }

/* ── El vídeo de la demo (peli.js): sin «Mis dudas», sin la demo larga y sin el paso a paso ── */
.peli .p-notas, .peli .solo-rapida, .peli .p-final-botones > .btn:last-child { display: none !important; }
.peli .btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 999px; border: 0; font: 700 15px/1 var(--f-texto); text-decoration: none; white-space: nowrap; cursor: pointer; }
.peli .btn svg { width: 18px; height: 18px; }
.peli .btn-azul { background: var(--azul); color: #fff; box-shadow: 0 12px 30px rgba(0, 83, 254, .38); }
.peli .btn-borde { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3); }
.guia-lanzar { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 999px; border: 0; background: var(--fondo-oscuro); color: #fff; font: 600 14.5px/1 var(--f-texto); box-shadow: 0 16px 40px rgba(0, 0, 0, .3); cursor: pointer; }
.guia-lanzar span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--marca); }
.guia-lanzar svg { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .pildora-rec i { animation: none; } .boton:hover, .modulo:hover { transform: none; } }

/* ── Tableta ── */
@media (max-width: 1080px) {
  .menu { display: none; }
  .menu-movil { display: block; }
  .cabecera-dentro > .boton { margin-left: auto; }
  .cabecera-dentro { gap: 12px; }
  .heroe-dentro { grid-template-columns: 1fr; padding-top: 112px; gap: 32px; }
  .heroe-texto { max-width: 680px; }
  .heroe-visual { max-width: 560px; width: 100%; margin: 0 auto; }
  .modulos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dos-columnas, .seccion-preguntas .envoltura, .seccion-contacto .envoltura { grid-template-columns: 1fr; gap: 40px; }
}

/* ── Móvil ── */
@media (max-width: 680px) {
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .cabecera { height: 64px; }
  .heroe { margin-top: -64px; }
  .cabecera-logo img { width: 112px; }
  .cabecera .boton { display: none; }
  .menu-movil { margin-left: auto; }
  .heroe-dentro { padding-top: 96px; padding-bottom: 56px; }
  .heroe-botones { width: 100%; }
  .heroe-botones .boton { flex: 1 1 100%; }
  .flotante { padding: 9px 12px 9px 9px; gap: 9px; }
  .flotante .ico { width: 32px; height: 32px; }
  .flotante b { font-size: 13.5px; }
  .flotante small { font-size: 12px; }
  .f-reserva { right: 4px; top: -12px; }
  .f-puerta { display: none; }
  .pantallas { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--margen)); padding: 0 var(--margen) 8px; scrollbar-width: none; }
  .pantallas::-webkit-scrollbar { display: none; }
  .pantallas li { scroll-snap-align: center; }
  .modulos, .pasos, .ventajas { grid-template-columns: 1fr; }
  .tarjeta, .modulo { padding: 22px; }
  .formulario { grid-template-columns: 1fr; padding: 22px; }
  .guia-lanzar { display: none !important; }
  .barra-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .95); box-shadow: 0 -1px 0 var(--borde); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .barra-movil .boton { flex: 1; height: 48px; padding: 0 12px; }
  .en-peli .barra-movil { display: none; }
}

/* ── La cámara simulada de la pista (camara.js) y el mapa de accesos (accesos.js) ──
   Los mismos de la demo anterior: la cámara va en la portada y el vídeo de la demo se la lleva mientras
   la cuenta; el mapa solo sale en el vídeo. */
.cam { position: relative; aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; background: #05080f; box-shadow: 0 40px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(126,164,255,.18); transition: box-shadow .4s; }
.cam.grabando { box-shadow: 0 40px 80px rgba(0,0,0,.55), 0 0 0 2px rgba(239,68,68,.75), 0 0 40px rgba(239,68,68,.25); }
.cam canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.visor i { position: absolute; width: 26px; height: 26px; border: 2.5px solid rgba(255,255,255,.55); }
.visor i:nth-child(1) { top: 14px; left: 14px; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.visor i:nth-child(2) { top: 14px; right: 14px; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.visor i:nth-child(3) { bottom: 14px; left: 14px; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.visor i:nth-child(4) { bottom: 14px; right: 14px; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.cam-top { position: absolute; top: 18px; left: 50px; right: 50px; display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 12.5px; line-height: 1; letter-spacing: .04em; color: rgba(255,255,255,.85); }
.cam-top > span { background: rgba(5,8,15,.55); backdrop-filter: blur(6px); padding: 6px 9px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; }
.cam-rec i { width: 9px; height: 9px; border-radius: 50%; background: #6b7280; }
.cam.grabando .cam-rec { color: #fff; background: rgba(220,38,38,.85); }
.cam.grabando .cam-rec i { background: #fff; animation: parpadeo 1s infinite; }
.cam-reloj { font-variant-numeric: tabular-nums; }
.cam-info { margin-left: auto; }
.cam-pie { position: absolute; left: 50px; right: 50px; bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cam-estado { background: rgba(5,8,15,.62); backdrop-filter: blur(6px); color: #fff; font-weight: 700; font-size: 13.5px; padding: 8px 12px; border-radius: 10px; }
.cam.grabando .cam-estado { color: #fecaca; }
.cam-chips { display: flex; gap: 6px; }
.cam-chip { position: relative; width: 34px; height: 34px; border-radius: 50%; background: var(--c); display: grid; place-items: center; border: 2.5px solid rgba(255,255,255,.9); opacity: .55; transition: opacity .3s; }
.cam-chip b { font-size: 11px; font-weight: 800; color: #fff; }
.cam-chip em { position: absolute; right: -5px; bottom: -5px; width: 18px; height: 18px; border-radius: 50%; background: #6b7280; color: #fff; display: grid; place-items: center; border: 2px solid #05080f; transform: scale(.6); opacity: 0; transition: all .3s cubic-bezier(.2,.9,.3,1.4); }
.cam-chip.ok { opacity: 1; }
.cam-chip.ok em { background: var(--verde); transform: none; opacity: 1; }
.cam-subida { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.9); opacity: 0; width: min(300px, 60%); background: rgba(5,8,15,.82); backdrop-filter: blur(8px); border-radius: 16px; padding: 16px 18px; color: #fff; font-weight: 700; font-size: 14px; transition: all .3s; }
.cam-subida.on { opacity: 1; transform: translate(-50%, -50%); }
.cam-subida i { display: block; height: 6px; border-radius: 3px; background: var(--azul-c); margin-top: 10px; width: 0; }
.cam-aviso { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -40%); opacity: 0; display: flex; align-items: center; gap: 12px; padding: 14px 20px 14px 14px; border-radius: 20px; background: #fff; color: var(--tinta); box-shadow: 0 20px 40px rgba(0,0,0,.45); transition: all .5s cubic-bezier(.2,.9,.3,1.2); white-space: nowrap; }
.cam-aviso.on { opacity: 1; transform: translate(-50%, -50%); }
.cam-aviso img { width: 42px; height: 42px; border-radius: 11px; }
.cam-aviso b { display: block; font-size: 16px; }
.cam-aviso span { color: var(--gris); font-size: 13.5px; }
.cam-ia { position: absolute; top: 54px; left: 50px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 8px; background: rgba(5,8,15,.6); backdrop-filter: blur(6px); color: #e4ff4a; font-weight: 800; font-size: 11.5px; letter-spacing: .04em; opacity: 0; transform: translateY(-4px); transition: all .35s; }
.cam-ia em { font-style: normal; color: rgba(255,255,255,.6); font-weight: 700; }
.cam-ia i { width: 8px; height: 8px; border-radius: 50%; background: #e4ff4a; box-shadow: 0 0 8px #e4ff4a; animation: parpadeo 1.4s infinite; }
.cam.grabando .cam-ia { opacity: 1; transform: none; }
.cam-nota { margin: 12px 0 0; text-align: center; font-size: 12.5px; color: rgba(255,255,255,.45); font-weight: 600; }
.acc-mapa { position: relative; aspect-ratio: 1.05; border-radius: 36px; overflow: hidden; background: #0a1628; box-shadow: 0 40px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(111,155,255,.15); }
.acc-mapa svg { width: 100%; height: 100%; display: block; }
.en-vivo { position: absolute; top: 20px; left: 20px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #c0271c; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 8px 12px; border-radius: 12px; }
.en-vivo i { width: 8px; height: 8px; border-radius: 50%; background: var(--rojo); animation: parpadeo 1.2s infinite; }
.ejemplo { position: absolute; top: 22px; right: 20px; z-index: 2; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.55); }
.pista-acc { transition: fill .6s, filter .6s; }
.pista-acc { fill: #10213f; }
.pista-acc.luz { fill: #2563eb; filter: drop-shadow(0 0 26px rgba(147,197,253,.85)); }
.puerta-flash { transition: opacity .3s; }
.acc-mapa .pers { transition: opacity .6s; }
.acc-mapa .foco { transition: opacity .6s; }
.acc-mapa .etiqueta rect { transition: fill .5s; }
@keyframes parpadeo { 50% { opacity: .4; } }
@media (max-width: 680px) {
  .cam { aspect-ratio: 4 / 3.4; border-radius: 18px; }
  .cam-top { left: 34px; right: 34px; top: 14px; font-size: 11px; gap: 6px; }
  .cam-ia { left: 34px; top: 44px; font-size: 10.5px; }
  .cam-info { display: none !important; }
  .cam-pie { left: 14px; right: 14px; bottom: 12px; flex-direction: column; align-items: flex-start; }
  .cam-estado { font-size: 12.5px; }
  .cam-chip { width: 28px; height: 28px; }
  .cam-aviso { white-space: normal; width: 86%; }
}