/* Single dark look by design: black base, neon green accent, gold for money figures */
:root { --bg: #0a0a0a; --fg: #f3f4f6; --neon: #DAFF00; color-scheme: dark; }
html { scroll-behavior: smooth; }
body {
font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
background: var(--bg); color: var(--fg);
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--bg); }
.gutter { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.sticky-top { top: env(safe-area-inset-top, 0px); }
h1, h2, h3 { text-wrap: balance; }
.tnum { font-variant-numeric: tabular-nums; }
a:focus-visible, select:focus-visible, input:focus-visible, button:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; }
.wa-float { background: #25D366; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--neon); font-weight: 800; }
.faq[open] summary::after { content: "−"; }
.chip { padding: 6px 14px; border-radius: 9999px; font-size: 13px; font-weight: 600; border: 1px solid #374151; color: #d1d5db; background: #000; transition: all .15s; }
.chip:hover { border-color: #6b7280; }
.chip[aria-pressed="true"] { background: var(--neon); border-color: var(--neon); color: #000; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
/* Diálogos de alto nivel */
dialog.dlg { padding: 0; border: 0; background: transparent; color: var(--fg); max-width: min(960px, calc(100vw - 32px)); width: 100%; max-height: calc(100dvh - 32px); overflow: visible; }
dialog.dlg::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
dialog.dlg[open] .dlg-panel { animation: dlgIn .38s cubic-bezier(.2,.9,.25,1.15) both; }
dialog.dlg[open]::backdrop { animation: fadeIn .3s ease both; }
dialog.dlg.cerrando .dlg-panel { animation: dlgOut .22s ease-in both; }
dialog.dlg.cerrando::backdrop { animation: fadeOut .22s ease-in both; }
.dlg-panel { background: #0f0f0f; border: 1px solid rgba(218,255,0,.25); border-radius: 24px; box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 60px rgba(218,255,0,.08); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; }
@keyframes dlgIn { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes dlgOut { to { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes fadeIn { from { opacity: 0; } } @keyframes fadeOut { to { opacity: 0; } }
body.dlg-abierto { overflow: hidden; }
.dlg-x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 9999px; display: grid; place-items: center; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #fff; font-size: 20px; z-index: 5; transition: background .15s, transform .15s; }
.dlg-x:hover { background: rgba(218,255,0,.15); transform: rotate(90deg); }
/* Revelado al hacer scroll (visible por defecto; solo anima lo que está fuera de pantalla) */
.js-anim .reveal.fuera { opacity: 0; transform: translateY(28px); }
.reveal { transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
/* Tarjetas con inclinación 3D */
.tilt { transform-style: preserve-3d; transition: transform .25s ease, border-color .2s; will-change: transform; }
.tilt:hover .tilt-img { transform: translateZ(40px) scale(1.04); }
.tilt-img { transition: transform .35s ease; }
/* Calendario de prueba de ruta */
.dia, .hora, .lugar { border: 1px solid #374151; background: #000; border-radius: 14px; transition: all .15s; }
.dia:hover, .hora:hover, .lugar:hover { border-color: #6b7280; }
.dia[aria-pressed="true"], .hora[aria-pressed="true"], .lugar[aria-pressed="true"] { border-color: var(--neon); background: rgba(218,255,0,.12); color: #fff; box-shadow: 0 0 0 1px var(--neon) inset; }
.opc { font-size: 12.5px; padding: 8px 13px; }
.opc[aria-pressed="true"] { box-shadow: 0 0 0 3px rgba(218,255,0,.18); }
.hora:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.campo { width: 100%; background: #000; border: 1px solid #374151; border-radius: 12px; padding: 12px 14px; color: #fff; outline: none; transition: border-color .15s, box-shadow .15s; }
.campo:focus { border-color: var(--neon); box-shadow: 0 0 0 3px rgba(218,255,0,.15); }
.campo[aria-invalid="true"] { border-color: #ff4d4d; }
.paso { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #9ca3af; }
.paso b { width: 26px; height: 26px; border-radius: 9999px; display: grid; place-items: center; background: #1f2937; color: #fff; font-size: 12px; }
.paso.ok b { background: var(--neon); color: #000; }
/* Toast */
#toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 140%); z-index: 70; transition: transform .35s cubic-bezier(.2,.9,.25,1.2); }
#toast.ver { transform: translate(-50%, 0); }
/* Barra de progreso de lectura */
#progreso { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--neon), #fff); z-index: 61; }
@keyframes pulso { 0%,100% { box-shadow: 0 0 0 0 rgba(218,255,0,.5); } 50% { box-shadow: 0 0 0 10px rgba(218,255,0,0); } }
.pulso { animation: pulso 2.2s infinite; }
@media (prefers-reduced-motion: reduce) { .js-anim .reveal.fuera { opacity: 1; transform: none; } .tilt { transform: none !important; } }

/* --- Ajustes v2: accesibilidad, responsive y sin estilos en línea --- */
#dm-pot, #dm-aut { width: 0; }
dialog.dlg.dlg-sm { max-width: min(520px, calc(100vw - 32px)); }
h1, h2 { overflow-wrap: break-word; hyphens: auto; }
.nav-top { display: none; }
.menu-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; min-width: 40px; padding: 0 12px; }
.menu-txt { display: none; }
@media (min-width: 640px) { .menu-txt { display: inline; } }
@media (min-width: 1280px) { .nav-top { display: flex; } .menu-btn { display: none; } }
.link-tap { display: inline-block; padding: 10px 0; }
.menu-link { display: block; padding: 14px 16px; border-radius: 14px; border: 1px solid #1f2937; color: #fff; font-weight: 700; }
.menu-link:hover, .menu-link:focus-visible { border-color: var(--neon); color: var(--neon); }
.chip, .hora { min-height: 40px; }
[data-probar], #modelos-limpiar { min-height: 40px; padding: 8px 4px; }
.text-red-300 { color: #fca5a5; }
#form-error:empty { display: none; }
.gap-1{gap:.25rem}
.mt-6{margin-top:1.5rem}
@media (max-width: 400px) { .wa-xs { display: none; } }
.nav-top { align-items: center; }
.nav-top a { white-space: nowrap; }
.nav-top > * + * { margin-left: 1.1rem !important; }
@media (min-width: 1280px) and (max-width: 1439px) { .nav-top { font-size: 13px; } }

/* --- Ajustes v3: accesibilidad y respaldo sin JavaScript --- */
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--neon); color: #000; font-weight: 800; padding: 12px 18px; border-radius: 12px; transition: top .15s; }
.skip-link:focus { top: calc(12px + env(safe-area-inset-top, 0px)); }
.aviso-nojs { margin-top: 1rem; padding: 1.25rem; border: 1px solid rgba(218,255,0,.3); border-radius: 16px; background: rgba(218,255,0,.06); color: #e5e7eb; font-size: 14px; line-height: 1.6; }
.aviso-nojs a { color: var(--neon); text-decoration: underline; text-underline-offset: 4px; }
.pagina-404 { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.25rem; padding: 32px 16px; }
.pagina-404 .cifra { font-size: clamp(72px, 20vw, 160px); font-weight: 900; line-height: 1; color: var(--neon); }
.pagina-404 .boton { display: inline-block; background: var(--neon); color: #000; font-weight: 800; padding: 14px 24px; border-radius: 12px; }
.pagina-404 .boton-sec { display: inline-block; border: 1px solid #374151; color: #fff; font-weight: 700; padding: 13px 22px; border-radius: 12px; }
.h-12{height:3rem}

/* --- v4: Pilares con brillo neón y viso de luz (solo CSS, sin tocar el contenido) --- */
#gamas .grid > div { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(160deg, #171a10 0%, #121212 38%, #0c0c0c 100%); border-color: rgba(218,255,0,.22) !important; box-shadow: 0 0 0 1px rgba(218,255,0,.06), 0 0 18px rgba(218,255,0,.07); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease; animation: pilarRespira 5s ease-in-out infinite; }
#gamas .grid > div:nth-child(2) { animation-delay: -1s; } #gamas .grid > div:nth-child(3) { animation-delay: -2s; } #gamas .grid > div:nth-child(4) { animation-delay: -3s; } #gamas .grid > div:nth-child(5) { animation-delay: -4s; }
#gamas .grid > div > * { position: relative; z-index: 1; }
/* Halo neón en la esquina */
#gamas .grid > div::after { content: ""; position: absolute; z-index: 0; width: 220px; height: 220px; top: -110px; left: -60px; border-radius: 50%; background: radial-gradient(circle, rgba(218,255,0,.22), transparent 70%); filter: blur(10px); opacity: .55; transition: opacity .4s ease, transform .6s ease; pointer-events: none; }
/* Viso: barrido de luz diagonal */
#gamas .grid > div::before { content: ""; position: absolute; z-index: 0; inset: -2px; background: linear-gradient(115deg, transparent 35%, rgba(218,255,0,.16) 46%, rgba(255,255,255,.14) 50%, rgba(218,255,0,.16) 54%, transparent 65%); transform: translateX(-130%); pointer-events: none; }
/* Ícono dentro de un círculo iluminado */
#gamas .grid > div > div:first-child { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: radial-gradient(circle at 30% 25%, rgba(218,255,0,.25), rgba(218,255,0,.06) 70%); border: 1px solid rgba(218,255,0,.35); box-shadow: 0 0 18px rgba(218,255,0,.25), inset 0 0 12px rgba(218,255,0,.12); font-size: 28px; line-height: 1; transition: transform .35s ease, box-shadow .35s ease; }
#gamas .grid > div h3 { transition: color .3s ease, text-shadow .3s ease; }
/* Encendido total al pasar el mouse o al tocar */
#gamas .grid > div:hover, #gamas .grid > div:focus-within, #gamas .grid > div:active { transform: translateY(-6px); border-color: var(--neon) !important; box-shadow: 0 0 0 1px rgba(218,255,0,.75), 0 0 22px rgba(218,255,0,.45), 0 0 70px rgba(218,255,0,.18), inset 0 0 40px rgba(218,255,0,.07); animation-play-state: paused; }
#gamas .grid > div:hover::before, #gamas .grid > div:active::before { animation: pilarViso 1.1s ease forwards; }
#gamas .grid > div:hover::after { opacity: 1; transform: scale(1.35); }
#gamas .grid > div:hover > div:first-child { transform: scale(1.08) rotate(-4deg); box-shadow: 0 0 28px rgba(218,255,0,.55), inset 0 0 14px rgba(218,255,0,.25); }
#gamas .grid > div:hover h3 { color: var(--neon); text-shadow: 0 0 14px rgba(218,255,0,.45); }
@keyframes pilarRespira { 0%,100% { box-shadow: 0 0 0 1px rgba(218,255,0,.06), 0 0 14px rgba(218,255,0,.06); border-color: rgba(218,255,0,.2); } 50% { box-shadow: 0 0 0 1px rgba(218,255,0,.22), 0 0 26px rgba(218,255,0,.16); border-color: rgba(218,255,0,.45); } }
@keyframes pilarViso { from { transform: translateX(-130%); } to { transform: translateX(130%); } }
@keyframes pilarVisoAuto { 0%, 70% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
/* En celulares (sin mouse) el viso pasa solo, escalonado, para que se note la luz */
@media (hover: none) { #gamas .grid > div::before { animation: pilarVisoAuto 6s ease-in-out infinite; } #gamas .grid > div:nth-child(2)::before { animation-delay: 1.2s; } #gamas .grid > div:nth-child(3)::before { animation-delay: 2.4s; } #gamas .grid > div:nth-child(4)::before { animation-delay: 3.6s; } #gamas .grid > div:nth-child(5)::before { animation-delay: 4.8s; } }
@media (prefers-reduced-motion: reduce) { #gamas .grid > div, #gamas .grid > div::before { animation: none !important; } #gamas .grid > div:hover { transform: none; } }

/* --- v5: dinámica según ubicación (cursor en computador, posición en pantalla en celular) --- */
#gamas .grid { perspective: 1200px; }
#gamas .grid > div { background: radial-gradient(420px circle at var(--mx, 20%) var(--my, 0%), rgba(218,255,0, calc(.05 + var(--cerca, 0) * .12)), transparent 45%), linear-gradient(160deg, #171a10 0%, #121212 38%, #0c0c0c 100%); }
#gamas .grid > div::after { left: calc(var(--mx, 15%) - 110px); top: calc(var(--my, 0%) - 110px); transition: opacity .4s ease, transform .6s ease, left .25s ease-out, top .25s ease-out; }
@media (hover: hover) and (pointer: fine) {
  #gamas .grid:hover > div { animation: none; border-color: rgba(218,255,0, calc(.18 + var(--cerca, 0) * .6)) !important; box-shadow: 0 0 0 1px rgba(218,255,0, calc(.05 + var(--cerca, 0) * .45)), 0 0 calc(12px + var(--cerca, 0) * 28px) rgba(218,255,0, calc(.05 + var(--cerca, 0) * .32)); }
  #gamas .grid:hover > div:hover { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); border-color: var(--neon) !important; box-shadow: 0 0 0 1px rgba(218,255,0,.75), 0 0 22px rgba(218,255,0,.45), 0 0 70px rgba(218,255,0,.18), inset 0 0 40px rgba(218,255,0,.07); transition: transform .12s ease-out, box-shadow .35s ease, border-color .35s ease; }
  #gamas .grid > div:hover::after { opacity: .9; transform: scale(1.15); }
}
/* Celular: la tarjeta que queda en el centro de la pantalla se enciende */
#gamas .grid > div.en-foco { transform: translateY(-4px); border-color: var(--neon) !important; box-shadow: 0 0 0 1px rgba(218,255,0,.7), 0 0 20px rgba(218,255,0,.4), 0 0 60px rgba(218,255,0,.16), inset 0 0 36px rgba(218,255,0,.07); animation: none; }
#gamas .grid > div.en-foco::before { animation: pilarViso 1.2s ease forwards; }
#gamas .grid > div.en-foco::after { opacity: 1; transform: scale(1.3); }
#gamas .grid > div.en-foco > div:first-child { transform: scale(1.08) rotate(-4deg); box-shadow: 0 0 28px rgba(218,255,0,.55), inset 0 0 14px rgba(218,255,0,.25); }
#gamas .grid > div.en-foco h3 { color: var(--neon); text-shadow: 0 0 14px rgba(218,255,0,.45); }
@media (prefers-reduced-motion: reduce) { #gamas .grid > div.en-foco, #gamas .grid:hover > div:hover { transform: none !important; } }

/* --- v6: tarjetas neón en toda la página (El Problema, Garantía, Repuestos, Eco-Eslabones, Preguntas, Catálogo) --- */
.neon { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(380px circle at var(--mx, 20%) var(--my, 0%), rgba(218,255,0, calc(.04 + var(--cerca, 0) * .12)), transparent 45%), linear-gradient(160deg, #171a10 0%, #121212 38%, #0c0c0c 100%) !important; border-color: rgba(218,255,0,.2) !important; box-shadow: 0 0 0 1px rgba(218,255,0,.05), 0 0 16px rgba(218,255,0,.06); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease, opacity .7s ease; animation: pilarRespira 6s ease-in-out infinite; }
.neon:nth-child(3n+2) { animation-delay: -2s; } .neon:nth-child(3n) { animation-delay: -4s; }
.neon > * { position: relative; z-index: 1; }
.neon::before { content: ""; position: absolute; z-index: 0; inset: -2px; background: linear-gradient(115deg, transparent 35%, rgba(218,255,0,.14) 46%, rgba(255,255,255,.12) 50%, rgba(218,255,0,.14) 54%, transparent 65%); transform: translateX(-130%); pointer-events: none; }
.neon::after { content: ""; position: absolute; z-index: 0; width: 180px; height: 180px; left: calc(var(--mx, 10%) - 90px); top: calc(var(--my, 0%) - 90px); border-radius: 50%; background: radial-gradient(circle, rgba(218,255,0,.2), transparent 70%); filter: blur(10px); opacity: .45; transition: opacity .4s ease, transform .6s ease, left .25s ease-out, top .25s ease-out; pointer-events: none; }
/* Íconos y números con brillo */
#problema .neon > div:first-child { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; font-size: 26px; background: radial-gradient(circle at 30% 25%, rgba(218,255,0,.25), rgba(218,255,0,.06) 70%); border: 1px solid rgba(218,255,0,.35); box-shadow: 0 0 16px rgba(218,255,0,.22), inset 0 0 10px rgba(218,255,0,.12); transition: transform .35s ease, box-shadow .35s ease; }
#comunidad .neon > div:first-child, #garantia .neon li > span:first-child { box-shadow: 0 0 14px rgba(218,255,0,.45); }
.neon h3, .neon summary { transition: color .3s ease, text-shadow .3s ease; }
/* Cercanía del cursor: las vecinas se van encendiendo */
@media (hover: hover) and (pointer: fine) {
  .neon-grupo:hover > .neon { animation: none; border-color: rgba(218,255,0, calc(.16 + var(--cerca, 0) * .55)) !important; box-shadow: 0 0 0 1px rgba(218,255,0, calc(.04 + var(--cerca, 0) * .4)), 0 0 calc(10px + var(--cerca, 0) * 24px) rgba(218,255,0, calc(.04 + var(--cerca, 0) * .28)); }
}
/* Encendido total: mouse encima, foco con teclado, toque o tarjeta en el centro de la pantalla (celular) */
.neon:hover, .neon:focus-within, .neon.en-foco, details.neon[open], .neon-grupo:hover > .neon:hover { border-color: var(--neon) !important; box-shadow: 0 0 0 1px rgba(218,255,0,.7), 0 0 20px rgba(218,255,0,.4), 0 0 60px rgba(218,255,0,.15), inset 0 0 36px rgba(218,255,0,.06); animation: none; }
.neon:not(.tilt):not(details):hover, .neon.en-foco:not(details) { transform: translateY(-4px); }
@media (hover: hover) and (pointer: fine) { .neon-grupo:hover > .neon:not(.tilt):not(details):hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-5px); transition: transform .12s ease-out, box-shadow .35s ease, border-color .35s ease; } }
.neon:hover::before, .neon.en-foco::before { animation: pilarViso 1.1s ease forwards; }
.neon:hover::after, .neon.en-foco::after { opacity: .95; transform: scale(1.2); }
.neon:hover h3, .neon.en-foco h3, details.neon[open] summary, .neon:hover summary { color: var(--neon); text-shadow: 0 0 14px rgba(218,255,0,.45); }
#problema .neon:hover > div:first-child, #problema .neon.en-foco > div:first-child { transform: scale(1.08) rotate(-4deg); box-shadow: 0 0 26px rgba(218,255,0,.5), inset 0 0 12px rgba(218,255,0,.25); }
@media (hover: none) { .neon::before { animation: pilarVisoAuto 7s ease-in-out infinite; } .neon:nth-child(3n+2)::before { animation-delay: 1.5s; } .neon:nth-child(3n)::before { animation-delay: 3s; } }
@media (prefers-reduced-motion: reduce) { .neon, .neon::before { animation: none !important; } .neon:hover, .neon.en-foco { transform: none !important; } }

/* --- v7: barra superior como cinta neón en movimiento hacia la derecha --- */
.marquesina { position: relative; overflow: hidden; white-space: nowrap; text-align: left !important; padding: 9px 0 !important; background: linear-gradient(90deg, #050505, #0b0f02 50%, #050505) !important; color: var(--neon) !important; border-top: 1px solid rgba(218,255,0,.55); border-bottom: 1px solid rgba(218,255,0,.55) !important; box-shadow: 0 0 18px rgba(218,255,0,.28), inset 0 0 14px rgba(218,255,0,.10); -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.marquesina br { display: none; }
.marquesina .hidden { display: inline !important; }
.marq-pista { display: inline-flex; width: max-content; will-change: transform; animation: marqDerecha var(--marq-dur, 30s) linear infinite; }
.marq-item { display: inline-flex; align-items: center; gap: .45rem; padding: 0 2.25rem; font-weight: 700; letter-spacing: .02em; text-shadow: 0 0 6px rgba(218,255,0,.85), 0 0 16px rgba(218,255,0,.45); }
.marq-item::after { content: "⚡"; margin-left: 2.25rem; text-shadow: 0 0 10px rgba(218,255,0,.9); }
.marquesina:hover .marq-pista { animation-play-state: paused; }
.marquesina.marq-quieta .marq-pista { animation: none; }
.marquesina.marq-quieta { -webkit-mask-image: none; mask-image: none; white-space: normal; }
@keyframes marqDerecha { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .marq-pista { animation: none !important; } }

/* --- v8: puntero en forma de patineta eléctrica neón (solo computador; en celular no hay puntero) --- */
@media (hover: hover) and (pointer: fine) {
  html, body { cursor: url("/cursor.svg") 3 3, auto; }
  a, button, select, summary, label, [role="button"], input[type="range"], input[type="checkbox"], .chip, .dia, .hora, .lugar, .cursor-pointer, .cursor-zoom-in, [data-detalle], [data-probar] { cursor: url("/cursor-click.svg") 3 3, pointer !important; }
  input:not([type]), input[type="text"], input[type="tel"], textarea, .campo:not(select) { cursor: text !important; }
  .hora:disabled, button:disabled { cursor: not-allowed !important; }
}

/* --- v9: sección «Conócenos» con videos de Instagram en marcos neón --- */
.videos-ig { display: grid; grid-template-columns: 1fr; gap: 28px; justify-items: center; }
@media (min-width: 768px) { .videos-ig { grid-template-columns: 1fr 1fr; } }
.video-ig { width: 100%; max-width: 400px; margin: 0; container-type: inline-size; border-radius: 20px; padding: 10px; background: linear-gradient(160deg, #171a10, #0c0c0c); border: 1px solid rgba(218,255,0,.45); box-shadow: 0 0 0 1px rgba(218,255,0,.15), 0 0 26px rgba(218,255,0,.18), inset 0 0 20px rgba(218,255,0,.05); transition: box-shadow .35s ease, border-color .35s ease, transform .35s ease; }
.video-ig:hover, .video-ig:focus-within { border-color: var(--neon); box-shadow: 0 0 0 1px rgba(218,255,0,.7), 0 0 30px rgba(218,255,0,.42), 0 0 80px rgba(218,255,0,.16); transform: translateY(-4px); }
.video-ig iframe { display: block; width: 100%; height: 690px; height: calc(125cqw + 190px); border: 0; border-radius: 12px; background: #fff; }
.video-ig figcaption { margin-top: 10px; text-align: center; font-size: 13px; font-weight: 700; color: var(--neon); text-shadow: 0 0 10px rgba(218,255,0,.45); }
@media (prefers-reduced-motion: reduce) { .video-ig:hover { transform: none; } }

/* --- v10: el aviso emergente queda oculto por completo cuando no hay mensaje --- */
#toast:not(.ver) { opacity: 0; visibility: hidden; transform: translate(-50%, 200%); pointer-events: none; }
#toast { transition: transform .35s cubic-bezier(.2,.9,.25,1.2), opacity .25s ease, visibility .35s; }

/* --- v11: reposicionamiento «patineta eléctrica», CTAs repetidos, catálogo con jerarquía y formulario en 3 pasos --- */
.precio-contexto { margin-top: 18px; font-size: 13px; color: #d1d5db; line-height: 1.55; max-width: 34rem; }
.precio-contexto b { color: var(--neon); }
@media (max-width: 1023px) { .precio-contexto { margin-left: auto; margin-right: auto; } }
.ver-motos { margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 12px; border: 1px solid rgba(218,255,0,.3); border-radius: 14px; background: rgba(0,0,0,.45); color: #e5e7eb; font-size: 12.5px; text-align: left; transition: border-color .2s, box-shadow .2s; }
.ver-motos img { width: 56px; height: 40px; object-fit: contain; flex-shrink: 0; }
.ver-motos b { color: var(--neon); }
.ver-motos:hover, .ver-motos:focus-visible { border-color: var(--neon); box-shadow: 0 0 18px rgba(218,255,0,.25); }
.cta-prim { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--neon); color: #000; font-weight: 800; padding: 15px 28px; border-radius: 12px; box-shadow: 0 0 24px rgba(218,255,0,.3); transition: background .15s, transform .15s; }
.cta-prim:hover { background: #c9f000; transform: translateY(-1px); }
.cta-sec { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid #374151; color: #fff; font-weight: 700; padding: 14px 26px; border-radius: 12px; transition: border-color .15s; }
.cta-sec:hover { border-color: var(--neon); }
.cta-franja { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.aviso-legal { margin-bottom: 24px; padding: 14px 18px; border: 1px solid rgba(245,158,11,.55); border-radius: 16px; background: rgba(245,158,11,.08); color: #f3f4f6; font-size: 13.5px; line-height: 1.6; }
.aviso-legal b { color: #fbbf24; }
.insignia { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 9999px; background: rgba(218,255,0,.12); border: 1px solid rgba(218,255,0,.45); color: var(--neon); font-size: 11.5px; font-weight: 800; box-shadow: 0 0 12px rgba(218,255,0,.18); }
.beneficio { margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: #f3f4f6; font-weight: 600; }
.separador-motos { margin-top: 12px; padding: 14px 18px; border-top: 1px solid rgba(218,255,0,.35); color: var(--neon); font-weight: 800; font-size: 18px; text-shadow: 0 0 12px rgba(218,255,0,.35); }
.paso.sub b { background: transparent; border: 1px solid #374151; font-size: 13px; }
.plan-opcional > summary { list-style: none; cursor: pointer; display: block; }
.plan-opcional > summary::-webkit-details-marker { display: none; }
.plan-opcional[open] > summary .paso b { background: var(--neon); color: #000; }
.plan-opcional > div { margin-top: 14px; }
/* Barra fija en celular con el CTA principal */
.cta-fija { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: none; padding: 10px max(16px, env(safe-area-inset-left, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(10,10,10,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid rgba(218,255,0,.4); box-shadow: 0 -8px 30px rgba(0,0,0,.5); transform: translateY(110%); transition: transform .3s ease; }
.cta-fija .cta-prim { width: calc(100% - 70px); padding: 13px 16px; }
.cta-fija.ver { transform: none; }
@media (max-width: 767px) {
  .cta-fija { display: block; }
  body.cta-visible .wa-float { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  body.cta-visible #toast { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
}
#modelos-orden { max-width: 100%; min-width: 0; }
@media (max-width: 520px) { #modelos-orden { max-width: calc(100vw - 150px); } }
@media (max-width: 767px) { body.cta-visible .wa-float { z-index: 46; } }
/* --- v12: el titular principal no parte palabras con guion --- */
h1 { hyphens: manual; -webkit-hyphens: manual; }
/* --- v13: microcopia de riesgo cero, próximo horario y barra fija personalizada --- */
.micro-cta { margin-top: 14px; font-size: 12.5px; line-height: 1.55; color: #d1d5db; }
#proximo-turno { display: block; margin-top: 4px; color: var(--neon); font-weight: 700; }
#proximo-turno:empty { display: none; }
.cta-fija .cta-prim { font-size: 15px; line-height: 1.25; text-align: center; }
/* --- v14: «Conoce las reinas de la movilidad» bajo el precio, con video de Instagram y luces de lujo --- */
.ig-hero { margin-top: 30px; max-width: 34rem; }
.ig-hero-titulo { font-weight: 900; font-size: clamp(26px, 6vw, 38px); line-height: 1.08; letter-spacing: -.01em; color: var(--neon); text-shadow: 0 0 8px rgba(218,255,0,.6), 0 0 22px rgba(218,255,0,.35), 0 0 48px rgba(218,255,0,.18); }
.ig-hero-titulo span { display: block; text-shadow: none; color: transparent; background: linear-gradient(100deg, #DAFF00 0%, #DAFF00 38%, #fff 50%, #DAFF00 62%, #DAFF00 100%); background-size: 260% 100%; -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 10px rgba(218,255,0,.6)) drop-shadow(0 0 26px rgba(218,255,0,.3)); animation: brilloLujo 3.6s linear infinite; }
.ig-hero-titulo::after { content: ""; display: block; width: 140px; height: 3px; margin-top: 14px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--neon), #fff, var(--neon), transparent); box-shadow: 0 0 14px var(--neon), 0 0 30px rgba(218,255,0,.5); animation: lineaLujo 2.6s ease-in-out infinite; }
.ig-hero-marco { position: relative; isolation: isolate; margin: 20px 0 0; }
.ig-hero-marco::before { content: ""; position: absolute; inset: -2px; z-index: 1; border-radius: 22px; padding: 2px; pointer-events: none; background: conic-gradient(from var(--giro, 0deg), transparent 0 55%, rgba(218,255,0,.35) 65%, #DAFF00 76%, #fff 80%, #DAFF00 84%, transparent 95%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: giroMarco 4.5s linear infinite; }
.ig-hero-marco::after { content: ""; position: absolute; inset: -18px; z-index: -1; border-radius: 34px; pointer-events: none; background: radial-gradient(closest-side, rgba(218,255,0,.22), transparent 75%); filter: blur(14px); animation: respiraLujo 4s ease-in-out infinite; }
@property --giro { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes giroMarco { to { --giro: 360deg; } }
@keyframes brilloLujo { from { background-position: 130% 0; } to { background-position: -130% 0; } }
@keyframes lineaLujo { 0%, 100% { opacity: .55; transform: scaleX(.8); } 50% { opacity: 1; transform: scaleX(1); } }
@keyframes respiraLujo { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@media (max-width: 1023px) { .ig-hero { margin-left: auto; margin-right: auto; } .ig-hero-titulo::after { margin-left: auto; margin-right: auto; } .ig-hero-marco { margin-left: auto; margin-right: auto; } }
@media (prefers-reduced-motion: reduce) { .ig-hero-titulo span, .ig-hero-titulo::after, .ig-hero-marco::before, .ig-hero-marco::after { animation: none !important; } }
@media (min-width: 1024px) { #inicio > .gutter { align-items: flex-start; } }
/* --- v15: bloque «reinas de la movilidad» centrado sobre un escenario con foco de luz --- */
.ig-hero { position: relative; isolation: isolate; overflow: hidden; text-align: center; margin-left: auto; margin-right: auto; padding: 30px 20px 28px; border-radius: 28px; border: 1px solid rgba(218,255,0,.22); background: radial-gradient(120% 70% at 50% 0%, rgba(218,255,0,.16), transparent 60%), radial-gradient(60% 45% at 50% 100%, rgba(218,255,0,.10), transparent 70%), linear-gradient(180deg, #11140a 0%, #0a0a0a 55%, #050505 100%); box-shadow: 0 0 0 1px rgba(218,255,0,.06), 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(218,255,0,.10), inset 0 1px 0 rgba(255,255,255,.06); }
.ig-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(218,255,0,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(218,255,0,.07) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 75%); mask-image: radial-gradient(70% 60% at 50% 40%, #000, transparent 75%); }
.ig-hero::after { content: ""; position: absolute; z-index: -1; top: -30%; left: 50%; width: 150%; height: 85%; pointer-events: none; background: conic-gradient(from 180deg at 50% 0%, transparent 0deg 152deg, rgba(218,255,0,.13) 170deg, rgba(255,255,255,.09) 180deg, rgba(218,255,0,.13) 190deg, transparent 208deg 360deg); filter: blur(6px); transform: translateX(-50%); animation: focoLujo 7s ease-in-out infinite; }
@keyframes focoLujo { 0%, 100% { opacity: .65; transform: translateX(-50%) rotate(-4deg); } 50% { opacity: 1; transform: translateX(-50%) rotate(4deg); } }
.ig-hero-titulo::after { margin-left: auto; margin-right: auto; }
.ig-hero .ig-hero-marco { margin-left: auto; margin-right: auto; }
@media (max-width: 639px) { .ig-hero { padding: 24px 12px 20px; border-radius: 22px; } }
@media (prefers-reduced-motion: reduce) { .ig-hero::after { animation: none !important; } }
/* --- v16: en computador el bloque «reinas de la movilidad» va en su propia fila, centrado en la página --- */
#inicio .ig-hero { width: 100%; }
@media (min-width: 1024px) { #inicio > .gutter { flex-wrap: wrap; } #inicio .ig-hero { flex: 0 0 100%; max-width: 40rem; margin-top: 8px; } }
/* --- v17: la tarjeta de la portada vuelve a su sitio; «reinas de la movilidad» va en su propia fila, fuera de la fila de la tarjeta --- */
@media (min-width: 1024px) { #inicio > .gutter { flex-wrap: nowrap; } }
#inicio .ig-fila { margin-top: 48px; }
#inicio .ig-fila .ig-hero { flex: none; margin-top: 0; }
/* --- v18: foto de cada repuesto, tomada del catálogo de energycolombia.com --- */
.rep-img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; margin-bottom: 12px; background: #111827; color: #6b7280; font-size: 11px; }