/* ═══════════════════════════════════════════════════════════════════════
   Abrakadabras — sitio público
   Azul noche, rojo y cromado, como el escudo. Las animaciones son solo de
   transform y opacity (las compone la placa de video: no traban una PC
   vieja ni un celular gama baja). Nada de filter animado.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --noche: #040816;
  --noche-2: #071029;
  --noche-3: #0B1736;
  --noche-4: #10204A;
  --vidrio: rgba(255, 255, 255, .045);
  --vidrio-2: rgba(255, 255, 255, .08);
  --borde: rgba(147, 178, 255, .14);
  --borde-2: rgba(147, 178, 255, .26);
  --azul: #2563EB;
  --azul-2: #3B82F6;
  --azul-osc: #1D3FAF;
  --celeste: #60A5FA;
  --cian: #7DD3FC;
  --rojo: #E11D2E;
  --rojo-2: #FF3B4E;
  --rojo-osc: #A3101F;
  --texto: #E9EFFC;
  --suave: #A8B6D8;
  --tenue: #7385AE;
  --verde: #22C55E;
  --ambar: #FBBF24;
  --wa: #25D366;
  --cromo: linear-gradient(180deg, #FFFFFF 0%, #EAF0FB 38%, #9FB0CF 52%, #F6F9FF 70%, #C7D2E8 100%);
  --radio: 20px;
  --sombra: 0 10px 30px rgba(0, 0, 0, .35);
  --sombra-alta: 0 24px 70px rgba(0, 0, 0, .55);
  --ancho: 1240px;
  --cab: 76px;
  --curva: cubic-bezier(.2, .8, .2, 1);
  --rebote: cubic-bezier(.34, 1.56, .64, 1);
  --fuente: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --titulos: 'Exo 2', 'Outfit', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cab) + 16px); background: var(--noche); }
body { margin: 0; font-family: var(--fuente); font-size: 16px; line-height: 1.6; color: var(--texto); background: var(--noche); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70vmax 50vmax at 100% 0%, rgba(37, 99, 235, .10), transparent 60%), radial-gradient(60vmax 50vmax at 0% 100%, rgba(225, 29, 46, .07), transparent 60%); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3 { line-height: 1.1; margin: 0; letter-spacing: -.01em; font-family: var(--titulos); font-weight: 800; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--celeste); outline-offset: 2px; border-radius: 8px; }
::selection { background: var(--azul); color: #fff; }
.ic { width: 1.25em; height: 1.25em; flex: none; }
.ic--chico { width: .95em; height: .95em; }
[hidden] { display: none !important; }
.saltar { position: absolute; left: -999px; top: 8px; z-index: 999; background: var(--rojo); color: #fff; padding: 10px 16px; border-radius: 10px; }
.saltar:focus { left: 8px; }
.trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.solo-cel { display: none; }
.degrade { background: linear-gradient(100deg, var(--celeste), #fff 45%, var(--rojo-2) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.degrade--claro { background: linear-gradient(100deg, #fff, var(--cian) 60%, #fff); -webkit-background-clip: text; background-clip: text; }

/* ── Botones ───────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 600; font-size: .98rem; white-space: nowrap; transition: transform .3s var(--curva), background-color .2s, color .2s, border-color .2s; position: relative; isolation: isolate; overflow: hidden; }
.btn:active { transform: scale(.97); }
.btn:hover { transform: translateY(-2px); }
.btn--prim { color: #fff; background: linear-gradient(135deg, var(--rojo-2), var(--rojo) 50%, var(--rojo-osc)); box-shadow: 0 10px 28px rgba(225, 29, 46, .35), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn--azul { color: #fff; background: linear-gradient(135deg, var(--celeste), var(--azul) 50%, var(--azul-osc)); box-shadow: 0 10px 28px rgba(37, 99, 235, .35), inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn--wa { background: var(--wa); color: #052e16; }
.btn--wa:hover { background: #3ee07f; }
.btn--borde { border: 1.5px solid var(--borde-2); background: var(--vidrio); color: var(--texto); }
.btn--borde:hover { border-color: var(--celeste); background: var(--vidrio-2); }
.btn--vidrio { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .22); color: #fff; }
.btn--vidrio:hover { background: rgba(255, 255, 255, .14); }
.btn--claro { background: #fff; color: var(--noche-3); box-shadow: 0 12px 34px rgba(0, 0, 0, .3); }
.btn--claro .ic { color: var(--rojo); }
.btn--grande { height: 56px; padding: 0 28px; font-size: 1.05rem; }
.btn--bloque { width: 100%; }
.btn--icono { width: 48px; padding: 0; }
.btn .ic { transition: transform .35s var(--curva); }
.btn:hover .ic:last-child:not(:first-child) { transform: translateX(3px); }
/* Brillo que cruza el botón cada tanto */
.btn--brilla::after { content: ''; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(0) skewX(-18deg); animation: brillo 4.2s ease-in-out infinite; pointer-events: none; z-index: 1; }
.btn--claro.btn--brilla::after { background: linear-gradient(100deg, transparent, rgba(96, 165, 250, .35), transparent); }
@keyframes brillo { 0%, 62% { transform: translateX(0) skewX(-18deg); } 92%, 100% { transform: translateX(560%) skewX(-18deg); } }

/* ── Logo ──────────────────────────────────────────────────────────────── */
.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo__escudo { position: relative; width: 54px; height: 54px; flex: none; display: grid; place-items: center; }
.logo__escudo::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(circle, rgba(59, 130, 246, .55), transparent 68%); animation: respira 3.6s ease-in-out infinite; }
.logo__escudo img { position: relative; width: 54px; height: auto; transition: transform .6s var(--rebote); }
a:hover > .logo .logo__escudo img { transform: rotate(-10deg) scale(1.08); }
@keyframes respira { 50% { transform: scale(1.18); opacity: .55; } }
.logo__txt { display: flex; flex-direction: column; line-height: 1; }
.logo__marca { font-family: var(--titulos); font-style: italic; font-weight: 800; font-size: 1.36rem; letter-spacing: .04em; background: var(--cromo); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo__sub { font-size: .6rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--celeste); margin-top: 5px; }
.logo--img img { height: 48px; width: auto; }
.logo--pie .logo__escudo, .logo--pie .logo__escudo img { width: 64px; height: 64px; }
.logo--pie .logo__marca { font-size: 1.6rem; }

/* ── Encabezado ────────────────────────────────────────────────────────── */
.cab { position: sticky; top: 0; z-index: 50; height: var(--cab); color: #fff; background: rgba(4, 8, 22, .82); border-bottom: 1px solid var(--borde); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: background-color .3s, border-color .3s, transform .35s var(--curva); }
.pag-inicio .cab { position: fixed; left: 0; right: 0; background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.pag-inicio .cab.es-solida { background: rgba(4, 8, 22, .88); border-color: var(--borde); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.cab.se-esconde { transform: translateY(-100%); }
.cab__in { max-width: 1320px; margin: 0 auto; height: 100%; padding: 0 20px; display: flex; align-items: center; gap: 22px; }
.cab__logo { flex: none; }
.cab__nav { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
.cab__link { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 999px; font-weight: 500; color: rgba(233, 239, 252, .82); transition: background-color .2s, color .2s; }
.cab__link .ic { color: var(--celeste); }
.cab__link:hover, .cab__link[aria-expanded="true"] { background: var(--vidrio-2); color: #fff; }
.cab__link .ic--chico { transition: transform .3s; color: inherit; }
.cab__link[aria-expanded="true"] .ic--chico { transform: rotate(180deg); }
.cab__acc { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.cab__btn { width: 42px; height: 42px; border-radius: 50%; display: inline-grid; place-items: center; position: relative; transition: background-color .2s, transform .2s; }
.cab__btn:hover { background: var(--vidrio-2); }
.cab__btn .ic { width: 22px; height: 22px; }
.cab__wa .ic { color: var(--wa); }
.cab__cuenta { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rojo); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; }
.cab__cuenta.late { animation: late .5s var(--rebote); }
@keyframes late { 50% { transform: scale(1.5); } }
.cab__publicar { height: 44px; margin-left: 8px; padding: 0 18px; }
.cab__menu { display: none; }
.cab__sectores { position: relative; }

.mega { position: absolute; top: calc(100% + 14px); left: -10px; width: 640px; background: linear-gradient(180deg, #0B1838, #081028); border: 1px solid var(--borde-2); color: var(--texto); border-radius: 24px; box-shadow: var(--sombra-alta); padding: 16px; opacity: 0; transform: translateY(-10px) scale(.98); transform-origin: top left; pointer-events: none; transition: opacity .22s, transform .3s var(--curva); }
.mega.es-abierto { opacity: 1; transform: none; pointer-events: auto; }
.mega__tit { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tenue); margin: 2px 8px 10px; }
.mega__grilla { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mega__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; transition: background-color .2s; }
.mega__item:hover { background: var(--vidrio-2); }
.mega__item strong { display: block; font-weight: 600; color: #fff; }
.mega__item small { display: block; color: var(--tenue); font-size: .8rem; line-height: 1.3; }
.mega__ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--c, var(--azul-2)) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c, var(--azul-2)) 40%, transparent); color: var(--c, var(--celeste)); flex: none; transition: transform .4s var(--rebote); }
.mega__ic .ic { width: 24px; height: 24px; }
.mega__item:hover .mega__ic { transform: scale(1.1) rotate(-6deg); }
.mega__pronto { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 12px 14px; border-radius: 16px; border: 1px dashed var(--borde-2); color: var(--suave); font-size: .9rem; }
.mega__pronto > .ic { color: var(--ambar); }
.mega__pronto b { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 18%, transparent); color: #fff; font-weight: 600; }
.mega__pronto b .ic { color: var(--c); width: 18px; height: 18px; }
.mega__todos { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; padding: 12px; border-radius: 16px; background: var(--vidrio-2); font-weight: 600; color: #fff; }
.mega__todos:hover { background: rgba(255, 255, 255, .12); }

/* Cajón del celular */
.cajon { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.cajon__fondo { position: absolute; inset: 0; background: rgba(2, 4, 12, .65); opacity: 0; transition: opacity .3s; }
.cajon__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(390px, 90vw); background: linear-gradient(180deg, var(--noche-3), var(--noche)); border-left: 1px solid var(--borde); color: #fff; padding: 16px 18px 28px; overflow-y: auto; transform: translateX(100%); transition: transform .45s var(--curva); display: flex; flex-direction: column; gap: 4px; }
.cajon.es-abierto { pointer-events: auto; }
.cajon.es-abierto .cajon__fondo { opacity: 1; }
.cajon.es-abierto .cajon__panel { transform: none; }
.cajon__cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cajon__tit { font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; color: var(--tenue); margin: 14px 4px 4px; }
.cajon__item { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: 14px; font-weight: 500; opacity: 0; transform: translateX(24px); transition: background-color .2s; }
.cajon.es-abierto .cajon__item, .cajon.es-abierto .cajon__vender { animation: entraDer .45s var(--curva) forwards; animation-delay: calc(var(--i, 0) * 35ms + 80ms); }
.cajon__item:hover { background: var(--vidrio-2); }
.cajon__item small { margin-left: auto; color: var(--tenue); font-size: .8rem; }
.cajon__item--pronto { color: var(--suave); }
.cajon__item--pronto small { color: var(--ambar); }
.cajon .btn { margin-top: 18px; }
.cajon__vender { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: linear-gradient(135deg, rgba(225, 29, 46, .9), rgba(37, 99, 235, .9)); opacity: 0; transform: translateX(24px); }
.cajon__vender strong { display: block; line-height: 1.25; }
.cajon__vender small { display: block; color: rgba(255, 255, 255, .8); font-size: .82rem; }
.cajon__vender-ic { width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, .18); display: grid; place-items: center; flex: none; }
@keyframes entraDer { to { opacity: 1; transform: none; } }

/* Buscador grande */
.buscador { position: fixed; inset: 0; z-index: 90; pointer-events: none; display: flex; justify-content: center; padding: 80px 16px 0; }
.buscador__fondo { position: absolute; inset: 0; background: rgba(2, 4, 12, .75); opacity: 0; transition: opacity .25s; }
.buscador__caja { position: relative; width: min(720px, 100%); height: 66px; background: var(--noche-3); border: 1px solid var(--borde-2); border-radius: 22px; display: flex; align-items: center; gap: 10px; padding: 0 10px 0 20px; box-shadow: var(--sombra-alta); opacity: 0; transform: translateY(-20px) scale(.97); transition: opacity .25s, transform .35s var(--curva); }
.buscador__caja > .ic { color: var(--celeste); width: 24px; height: 24px; }
.buscador__caja input { flex: 1; border: 0; outline: 0; font-size: 1.15rem; background: none; min-width: 0; color: #fff; }
.buscador.es-abierto { pointer-events: auto; }
.buscador.es-abierto .buscador__fondo { opacity: 1; }
.buscador.es-abierto .buscador__caja { opacity: 1; transform: none; }

.sugerencias { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--noche-3); border: 1px solid var(--borde-2); color: var(--texto); border-radius: 18px; box-shadow: var(--sombra-alta); padding: 8px; z-index: 5; max-height: 60vh; overflow-y: auto; text-align: left; animation: aparece .2s var(--curva); }
.sugerencia { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; }
.sugerencia:hover, .sugerencia.es-activa { background: var(--vidrio-2); }
.sugerencia img, .sugerencia .sugerencia__ic { width: 54px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; background: var(--noche-4); display: grid; place-items: center; color: var(--celeste); }
.sugerencia strong { display: block; font-weight: 600; line-height: 1.2; color: #fff; }
.sugerencia small { color: var(--tenue); }
.sugerencia em { margin-left: auto; font-style: normal; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--tenue); }
.sugerencias__nada { padding: 14px; color: var(--suave); }
@keyframes aparece { from { opacity: 0; transform: translateY(-6px); } }

/* ── Animaciones de entrada ────────────────────────────────────────────── */
/* Si el reloj de animaciones se congela, el JS les saca la animación a los
   3 s (clase «anim-listo») y el contenido queda a la vista igual. */
.entra { animation: entra .95s var(--curva) both; animation-delay: calc(var(--d, 0) * 110ms + 80ms); }
.anim-listo .entra { animation: none; }
@keyframes entra { from { opacity: 0; transform: translateY(28px); } }
.js .revela { opacity: 0; transform: translateY(36px); transition: opacity .8s var(--curva), transform .9s var(--curva); transition-delay: calc(var(--d, 0) * 90ms); }
.js .revela.visto { opacity: 1; transform: none; }

/* ── Portada ───────────────────────────────────────────────────────────── */
.hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; color: #fff; overflow: hidden; background: var(--noche); isolation: isolate; }
@supports (min-height: 100svh) { .hero { min-height: 100svh; } }
.hero__slides { position: absolute; inset: 0; z-index: -5; }
.hero__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.6s ease; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); }
.hero__slide.es-activa { opacity: .34; }
.hero__slide.es-activa img { animation: kenburns 9s linear forwards; }
@keyframes kenburns { from { transform: scale(1.14) translate3d(0, 0, 0); } to { transform: scale(1.02) translate3d(-1.5%, -1%, 0); } }
.hero__velo { position: absolute; inset: 0; z-index: -4; background: radial-gradient(60% 70% at 72% 45%, rgba(29, 63, 175, .35), transparent 70%), linear-gradient(90deg, rgba(4, 8, 22, .96) 0%, rgba(4, 8, 22, .78) 45%, rgba(4, 8, 22, .55) 100%), linear-gradient(0deg, var(--noche) 0%, transparent 35%); }
/* Estrellas: dos capas que bajan despacio y titilan */
.hero__estrellas, .banda__estrellas { position: absolute; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; }
.hero__estrellas i, .banda__estrellas i { position: absolute; left: 0; right: 0; top: -260px; height: calc(100% + 260px); background-image: radial-gradient(1.4px 1.4px at 22px 34px, #fff, transparent), radial-gradient(1px 1px at 96px 140px, rgba(255, 255, 255, .8), transparent), radial-gradient(1.6px 1.6px at 170px 64px, #cfe0ff, transparent), radial-gradient(1px 1px at 214px 200px, #fff, transparent), radial-gradient(1.2px 1.2px at 60px 228px, rgba(255, 255, 255, .7), transparent), radial-gradient(1px 1px at 140px 12px, #fff, transparent); background-size: 260px 260px; animation: estrellas 60s linear infinite; opacity: .7; }
.hero__estrellas i:nth-child(2), .banda__estrellas i:nth-child(2) { background-size: 190px 190px; animation-duration: 38s; opacity: .45; }
.hero__estrellas i:nth-child(3) { background-image: radial-gradient(2px 2px at 40px 60px, #fff, transparent), radial-gradient(2px 2px at 300px 220px, #ffd6db, transparent), radial-gradient(1.6px 1.6px at 180px 330px, #d6e6ff, transparent); background-size: 420px 420px; animation: estrellas 90s linear infinite, titila 3.4s ease-in-out infinite; }
@keyframes estrellas { to { transform: translateY(260px); } }
@keyframes titila { 50% { opacity: .2; } }
/* Piso de grilla en perspectiva, que avanza */
.hero__piso { position: absolute; left: -40%; right: -40%; bottom: 0; height: 42%; z-index: -3; perspective: 360px; overflow: hidden; -webkit-mask: linear-gradient(to top, #000 10%, transparent 92%); mask: linear-gradient(to top, #000 10%, transparent 92%); pointer-events: none; }
.hero__piso i { position: absolute; left: 0; right: 0; bottom: 0; height: 300%; transform-origin: 50% 100%; transform: rotateX(74deg); background-image: linear-gradient(rgba(96, 165, 250, .32) 1px, transparent 1px), linear-gradient(90deg, rgba(96, 165, 250, .32) 1px, transparent 1px); background-size: 64px 64px; animation: piso 2.4s linear infinite; }
@keyframes piso { from { transform: rotateX(74deg) translateY(0); } to { transform: rotateX(74deg) translateY(64px); } }
.hero__luces span { position: absolute; z-index: -3; width: 50vmax; height: 50vmax; border-radius: 50%; background: radial-gradient(circle, rgba(37, 99, 235, .35), transparent 62%); top: -20vmax; left: -14vmax; animation: flota 16s ease-in-out infinite alternate; }
.hero__luces span:nth-child(2) { background: radial-gradient(circle, rgba(225, 29, 46, .22), transparent 62%); top: auto; bottom: -26vmax; left: 28vw; animation-duration: 21s; }
.hero__luces span:nth-child(3) { background: radial-gradient(circle, rgba(125, 211, 252, .16), transparent 62%); left: auto; right: -18vmax; top: 6vh; animation-duration: 25s; }
@keyframes flota { to { transform: translate3d(8vmax, 6vmax, 0) scale(1.1); } }
.hero__rayo { position: absolute; z-index: -2; top: -30%; left: 0; width: 18vw; height: 160%; background: linear-gradient(90deg, transparent, rgba(147, 197, 253, .10), transparent); transform: translateX(-30vw) rotate(18deg); animation: rayo 9s ease-in-out infinite; pointer-events: none; }
@keyframes rayo { 0%, 55% { transform: translateX(-30vw) rotate(18deg); } 100% { transform: translateX(130vw) rotate(18deg); } }

.hero__in { position: relative; z-index: 2; width: 100%; max-width: 1320px; margin: 0 auto; padding: calc(var(--cab) + 34px) 20px 96px; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; gap: 30px; }
.hero__pre { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid var(--borde-2); font-size: .9rem; font-weight: 600; letter-spacing: .04em; color: #dbe6ff; }
.punto-vivo { width: 9px; height: 9px; border-radius: 50%; background: var(--rojo-2); position: relative; flex: none; }
.punto-vivo::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--rojo-2); animation: pulso 2s ease-out infinite; }
@keyframes pulso { to { transform: scale(3); opacity: 0; } }
.hero__tit { font-size: clamp(2.5rem, 5.6vw, 4.9rem); font-weight: 800; letter-spacing: -.02em; margin: 22px 0 18px; line-height: 1.03; text-shadow: 0 10px 40px rgba(0, 0, 0, .4); }
.rota-junta { white-space: nowrap; }
.rota { display: inline-grid; vertical-align: bottom; overflow: hidden; padding: 0 .06em .1em; margin: 0 -.06em -.1em; transition: width .6s var(--curva); }
.rota__p { grid-area: 1 / 1; justify-self: start; white-space: nowrap; padding-right: .14em; color: transparent; font-style: italic; background: linear-gradient(100deg, var(--cian), #fff 40%, var(--rojo-2) 90%); -webkit-background-clip: text; background-clip: text; transform: translateY(105%); opacity: 0; transition: transform .7s var(--curva), opacity .5s; }
.rota__p.es-activa { transform: none; opacity: 1; }
.rota__p.se-va { transform: translateY(-105%); opacity: 0; }
.hero__txt { font-size: clamp(1.05rem, 1.5vw, 1.22rem); color: var(--suave); max-width: 52ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hbusca { margin-top: 28px; max-width: 700px; }
.hbusca__tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 12px; -webkit-mask: linear-gradient(90deg, #000 88%, transparent); mask: linear-gradient(90deg, #000 88%, transparent); }
.hbusca__tabs::-webkit-scrollbar { display: none; }
.hbusca__tabs input { position: absolute; opacity: 0; pointer-events: none; }
.hbusca__tabs span { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-radius: 999px; white-space: nowrap; font-size: .88rem; font-weight: 500; color: rgba(233, 239, 252, .8); background: rgba(255, 255, 255, .06); border: 1px solid var(--borde); cursor: pointer; transition: background-color .2s, color .2s; }
.hbusca__tabs span .ic { width: 18px; height: 18px; color: var(--celeste); }
.hbusca__tabs span:hover { background: rgba(255, 255, 255, .12); }
.hbusca__tabs input:checked + span { background: #fff; color: var(--noche-3); border-color: #fff; }
.hbusca__tabs input:checked + span .ic { color: var(--rojo); }
.hbusca__tabs input:focus-visible + span { outline: 3px solid var(--celeste); }
.hbusca__caja { position: relative; display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 8px 0 20px; background: rgba(10, 20, 48, .85); border: 1px solid var(--borde-2); border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hbusca__caja > .ic { color: var(--celeste); width: 22px; height: 22px; }
.hbusca__caja input { flex: 1; min-width: 0; border: 0; outline: 0; font-size: 1.05rem; background: none; color: #fff; }
.hbusca__caja input::placeholder { color: var(--tenue); }
.hbusca__caja .btn { height: 48px; padding: 0 26px; border-radius: 14px; }
.hero__etiqueta { position: absolute; z-index: 2; left: 28px; bottom: 34px; display: flex; align-items: center; gap: 14px; font-size: .86rem; color: var(--suave); }
.hero__etiqueta [data-hero-etiqueta] { min-width: 150px; order: 2; font-weight: 600; color: #fff; letter-spacing: .04em; }
.hero__barras { display: flex; gap: 6px; }
.hero__barras i { width: 30px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .2); overflow: hidden; position: relative; }
.hero__barras i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--celeste), var(--rojo-2)); transform: scaleX(0); transform-origin: left; }
.hero__barras i.es-activa::after { animation: barra 6.5s linear forwards; }
.hero__barras i.ya::after { transform: scaleX(1); }
@keyframes barra { to { transform: scaleX(1); } }
.hero__bajar { position: absolute; z-index: 2; left: 50%; bottom: 22px; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%; border: 1.5px solid var(--borde-2); display: grid; place-items: center; color: #fff; animation: rebota 2.2s ease-in-out infinite; }
@keyframes rebota { 50% { transform: translateY(8px); } }

/* El escudo animado */
.hero__logo { display: grid; place-items: center; }
.insignia { position: relative; width: min(520px, 100%); aspect-ratio: 1; perspective: 1000px; }
.insignia::before { content: ''; position: absolute; inset: -6%; border-radius: 50%; background: radial-gradient(circle, rgba(59, 130, 246, .55) 0%, rgba(37, 99, 235, .22) 38%, transparent 66%); animation: respira 4.5s ease-in-out infinite; }
.insignia::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: -4%; height: 10%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); animation: sombra 6s ease-in-out infinite; }
.insignia__halo { position: absolute; inset: 1%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg, rgba(96, 165, 250, .9) 50deg, transparent 110deg, rgba(255, 59, 78, .85) 190deg, transparent 250deg, rgba(255, 255, 255, .8) 300deg, transparent 350deg); -webkit-mask: radial-gradient(circle, transparent 66%, #000 67.5%, #000 69%, transparent 71%); mask: radial-gradient(circle, transparent 66%, #000 67.5%, #000 69%, transparent 71%); animation: gira 9s linear infinite; }
.insignia__aro { position: absolute; inset: 6%; border-radius: 50%; border: 1px solid rgba(147, 197, 253, .28); transform: rotateX(72deg) rotateZ(0); animation: orbita 12s linear infinite; }
.insignia__aro i { position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 4px rgba(96, 165, 250, .9); }
.insignia__aro--2 { inset: -2%; border-color: rgba(255, 59, 78, .26); transform: rotateX(64deg) rotateY(18deg); animation: orbita2 17s linear infinite reverse; }
.insignia__aro--2 i { background: #ffd2d7; box-shadow: 0 0 14px 4px rgba(255, 59, 78, .85); }
.insignia__aro--3 { inset: 14%; border: 1px dashed rgba(255, 255, 255, .14); transform: none; animation: gira 40s linear infinite reverse; }
@keyframes orbita { to { transform: rotateX(72deg) rotateZ(360deg); } }
@keyframes orbita2 { to { transform: rotateX(64deg) rotateY(18deg) rotateZ(360deg); } }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes sombra { 50% { transform: scaleX(.86); opacity: .6; } }
.insignia__giro { position: absolute; inset: 9%; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--curva); transform-style: preserve-3d; }
.insignia__flota { position: absolute; inset: 0; animation: flotaLogo 6s ease-in-out infinite; }
@keyframes flotaLogo { 50% { transform: translateY(-14px); } }
.insignia__img { width: 100%; height: 100%; object-fit: contain; animation: magia 1.8s var(--curva); }
@keyframes magia { 0% { opacity: 0; transform: scale(.35) rotate(-28deg); } 55% { opacity: 1; transform: scale(1.07) rotate(5deg); } 75% { transform: scale(.97) rotate(-2deg); } }
.insignia__brillo { position: absolute; inset: 0; overflow: hidden; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; pointer-events: none; }
.insignia__brillo i { position: absolute; top: -30%; bottom: -30%; left: -50%; width: 32%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7) 50%, transparent); transform: translateX(0) skewX(-16deg); animation: barrido 5.5s ease-in-out infinite 1.6s; }
@keyframes barrido { 0%, 52% { transform: translateX(0) skewX(-16deg); } 82%, 100% { transform: translateX(560%) skewX(-16deg); } }
.insignia__chispa { position: absolute; left: var(--x); top: var(--y); width: calc(26px * var(--s, 1)); height: calc(26px * var(--s, 1)); margin: calc(-13px * var(--s, 1)); background: #fff; clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); opacity: 0; animation: chispa 3.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.insignia__chispa:nth-child(even) { background: #bfe0ff; }
.insignia__chispa:nth-child(3n) { background: #ffd0d6; }
@keyframes chispa { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0deg); } 45% { opacity: 1; transform: scale(1) rotate(90deg); } 70% { opacity: 0; transform: scale(.4) rotate(160deg); } }

/* Cinta con las áreas que pasa */
.cinta-areas { position: relative; z-index: 3; overflow: hidden; background: linear-gradient(90deg, var(--rojo-osc), var(--rojo) 30%, var(--azul) 70%, var(--azul-osc)); padding: 14px 0; width: 104%; margin: -18px 0 0 -2%; transform: rotate(-1.2deg); box-shadow: 0 20px 50px rgba(0, 0, 0, .4); }
.cinta-areas__pista { display: flex; width: max-content; animation: desfile2 46s linear infinite; }
.cinta-areas__grupo { display: flex; align-items: center; gap: 34px; padding-right: 34px; }
.cinta-areas span { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; font-weight: 600; color: rgba(255, 255, 255, .85); font-size: 1rem; }
.cinta-areas span.es-area { font-family: var(--titulos); font-style: italic; font-weight: 800; font-size: 1.35rem; color: #fff; text-transform: uppercase; letter-spacing: .04em; }
.cinta-areas span::after { content: '✦'; margin-left: 34px; color: rgba(255, 255, 255, .55); font-size: .8rem; }
.cinta-areas .ic { width: 26px; height: 26px; }

/* ── Secciones ─────────────────────────────────────────────────────────── */
.seccion { max-width: var(--ancho); margin: 0 auto; padding: 96px 20px; }
.seccion--angosta { max-width: 820px; }
.seccion__cab { margin-bottom: 40px; }
.seccion__cab h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
.seccion__cab--fila { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.seccion__cab--centro { text-align: center; max-width: 760px; margin-left: auto; margin-right: auto; }
.seccion__cab--centro .volanta { justify-content: center; }
.seccion__bajada { color: var(--suave); margin-top: 14px; font-size: 1.06rem; }
.volanta { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--celeste); margin-bottom: 12px; }
.volanta::before { content: ''; width: 24px; height: 2px; background: linear-gradient(90deg, var(--rojo-2), var(--celeste)); border-radius: 2px; }
.volanta .ic { width: 18px; height: 18px; }
.volanta--clara { color: #fff; }
.volanta--clara::before { background: #fff; }

/* Tarjetas de área */
.areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.area { position: relative; min-height: 430px; border-radius: 26px; overflow: hidden; isolation: isolate; background: var(--noche-3); color: #fff; display: flex; flex-direction: column; justify-content: space-between; transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--curva); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }
.areas > .revela { display: flex; }
.areas > .revela > .area { flex: 1; }
.area__link { position: absolute; inset: 0; z-index: 2; }
.area__foto { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.area__img, .area__foto .sinfoto { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.1s var(--curva); }
.area:hover .area__img { transform: scale(1.13); }
.area__velo { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4, 8, 22, .25) 0%, rgba(4, 8, 22, .35) 35%, rgba(4, 8, 22, .94) 78%), linear-gradient(200deg, color-mix(in srgb, var(--c) 30%, transparent), transparent 55%); }
.area__borde { position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1.5px; overflow: hidden; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: .45; transition: opacity .4s; }
.area__borde::before { content: ''; position: absolute; width: 200%; aspect-ratio: 1; left: -50%; top: 50%; margin-top: -100%; background: conic-gradient(from 0deg, rgba(255, 255, 255, .15) 0deg, var(--c) 70deg, #fff 95deg, rgba(255, 255, 255, .15) 130deg, rgba(255, 255, 255, .15) 360deg); animation: gira 5s linear infinite; animation-play-state: paused; }
.area:hover .area__borde { opacity: 1; }
.area:hover .area__borde::before, .area--pronto .area__borde::before { animation-play-state: running; }
.area__arriba { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 0; }
.area__ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: rgba(4, 8, 22, .55); border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); color: var(--c); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .5s var(--rebote), background-color .3s, color .3s; }
.area__ic .ic { width: 30px; height: 30px; }
.area:hover .area__ic { transform: rotate(-8deg) scale(1.1); background: var(--c); color: #fff; }
.area__n { padding: 6px 12px; border-radius: 999px; background: rgba(4, 8, 22, .6); border: 1px solid rgba(255, 255, 255, .16); font-size: .82rem; font-weight: 600; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.area__n--pronto { background: var(--ambar); color: #3a2400; border-color: var(--ambar); animation: late 2.4s ease-in-out infinite; }
.area__txt { position: relative; z-index: 1; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.area__txt h3 { font-size: 1.9rem; font-style: italic; text-transform: uppercase; letter-spacing: .01em; }
.area__txt > p { color: rgba(233, 239, 252, .82); font-size: .95rem; line-height: 1.45; }
.area__chips { position: relative; z-index: 4; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.area__chips a { padding: 5px 11px; border-radius: 999px; font-size: .8rem; font-weight: 600; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); transition: background-color .2s, border-color .2s, transform .2s; }
.area__chips a:hover { background: var(--c); border-color: var(--c); transform: translateY(-2px); }
.area__ir { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 700; color: #fff; }
.area__ir .ic { color: var(--c); transition: transform .3s var(--curva); }
.area:hover .area__ir .ic { transform: translateX(6px); }
.area--pronto { transform: none; }
.area--pronto:hover .area__img { transform: scale(1.04); }
.area--pronto .area__img { filter: grayscale(.4) brightness(.7); }
.area--pronto .area__velo { background: linear-gradient(180deg, rgba(4, 8, 22, .55), rgba(4, 8, 22, .95) 70%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 12px, transparent 12px 24px); }
.area__pre { font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ambar); }
.area__proximos { display: flex; flex-wrap: wrap; gap: 8px; }
.area__proximos span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 14px; background: color-mix(in srgb, var(--c) 22%, transparent); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); font-weight: 600; }
.area__proximos .ic { color: var(--c); }
.area__avisar { position: relative; z-index: 4; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; height: 42px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); font-weight: 600; font-size: .92rem; transition: background-color .2s, transform .2s; }
.area__avisar:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }

/* Sección grande: vendé o cambiá */
.publica { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(80% 90% at 0% 0%, rgba(37, 99, 235, .55), transparent 60%), radial-gradient(70% 80% at 100% 100%, rgba(225, 29, 46, .5), transparent 60%), linear-gradient(135deg, #0A1B52, #0B1435 50%, #2A0A1E); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.publica__fondo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.publica__haz { position: absolute; top: -40%; left: 10%; width: 14%; height: 180%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent); transform: rotate(22deg); animation: haz 8s ease-in-out infinite alternate; }
.publica__haz--2 { left: 62%; width: 9%; animation-duration: 11s; animation-direction: alternate-reverse; }
@keyframes haz { to { transform: translateX(22vw) rotate(22deg); } }
.publica__orbe { position: absolute; right: -10vmax; top: -12vmax; width: 40vmax; height: 40vmax; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .1); box-shadow: inset 0 0 120px rgba(96, 165, 250, .15); animation: gira 50s linear infinite; }
.publica__orbe::before { content: ''; position: absolute; top: 12%; left: 12%; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 20px 6px rgba(255, 59, 78, .8); }
.publica__in { max-width: var(--ancho); margin: 0 auto; padding: 104px 20px; }
.publica__cab { max-width: 820px; }
.publica__cab h2 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); margin-bottom: 18px; }
.publica__cab > p { color: rgba(233, 239, 252, .85); font-size: 1.12rem; max-width: 64ch; }
.opciones-venta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.opv { position: relative; padding: 30px 26px; border-radius: 24px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .45s var(--curva), background-color .3s; overflow: hidden; }
.opv::after { content: ''; position: absolute; inset: auto -30% -60% auto; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 70%); transition: transform .6s var(--curva); }
.opv:hover { transform: translateY(-8px); background: rgba(255, 255, 255, .11); }
.opv:hover::after { transform: scale(1.5); }
.opv--centro { background: linear-gradient(160deg, rgba(225, 29, 46, .4), rgba(37, 99, 235, .3)); border-color: rgba(255, 255, 255, .3); }
.opv__ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: #fff; color: var(--rojo); margin-bottom: 20px; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); animation: flotaLogo 5s ease-in-out infinite; }
.opv:nth-child(2) .opv__ic { color: var(--azul); animation-delay: -1.6s; }
.opv:nth-child(3) .opv__ic { animation-delay: -3.2s; }
.opv__ic .ic { width: 32px; height: 32px; }
.opv h3 { font-size: 1.45rem; margin-bottom: 8px; }
.opv p { color: rgba(233, 239, 252, .82); }
.linea-pasos { list-style: none; margin: 46px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; position: relative; }
.linea-pasos::before { content: ''; position: absolute; left: 6%; right: 6%; top: 25px; height: 2px; background: rgba(255, 255, 255, .15); }
.linea-pasos::after { content: ''; position: absolute; left: 6%; right: 6%; top: 25px; height: 2px; background: linear-gradient(90deg, var(--cian), #fff, var(--rojo-2)); transform: scaleX(0); transform-origin: left; transition: transform 1.8s var(--curva) .3s; }
.linea-pasos.visto::after { transform: scaleX(1); }
.linea-pasos li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.linea-pasos span { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--noche-3); border: 2px solid rgba(255, 255, 255, .7); font-family: var(--titulos); font-weight: 800; font-size: 1.3rem; margin-bottom: 8px; box-shadow: 0 0 0 6px rgba(4, 8, 22, .4); }
.linea-pasos li:last-child span { background: var(--rojo); border-color: #fff; }
.linea-pasos strong { font-size: 1.05rem; }
.linea-pasos small { color: rgba(233, 239, 252, .7); font-size: .88rem; }
.publica__acc { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 46px; }
.publica__nota { display: inline-flex; align-items: center; gap: 8px; color: rgba(233, 239, 252, .78); }

/* Llamado al final de las páginas */
.vende-cta { position: relative; max-width: var(--ancho); margin: 40px auto 0; padding: 0 20px; }
.vende-cta__fondo { position: absolute; inset: 0 20px; border-radius: 30px; overflow: hidden; background: linear-gradient(120deg, var(--rojo-osc), var(--rojo) 35%, var(--azul) 75%, var(--azul-osc)); box-shadow: 0 30px 80px rgba(37, 99, 235, .25); }
.vende-cta__fondo span { position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 65%); top: -200px; left: -100px; animation: flota 12s ease-in-out infinite alternate; }
.vende-cta__fondo span:nth-child(2) { top: auto; bottom: -260px; left: 55%; animation-duration: 15s; }
.vende-cta__fondo span:nth-child(3) { width: 100%; height: 100%; top: 0; left: 0; border-radius: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 28px); animation: none; }
.vende-cta__in { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 46px 48px; }
.vende-cta h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); margin-bottom: 10px; }
.vende-cta__txt > p { color: rgba(255, 255, 255, .9); max-width: 60ch; }
.vende-cta__pasos { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.vende-cta__pasos li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); font-size: .88rem; font-weight: 600; }
.vende-cta__pasos .ic { width: 17px; height: 17px; }
.vende-cta__acc { display: flex; flex-direction: column; gap: 10px; flex: none; }

/* ── Tarjeta de vehículo ───────────────────────────────────────────────── */
.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 22px; }
.grilla > .revela { display: flex; }
.grilla > .revela > .tarjeta { flex: 1; }
.tarjeta { position: relative; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025)); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; color: var(--texto); transition: transform .45s var(--curva), border-color .3s; isolation: isolate; }
.tarjeta:hover { transform: translateY(-6px); border-color: var(--borde-2); }
.tarjeta__link { position: absolute; inset: 0; z-index: 2; }
.tarjeta__foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--noche-4); }
.tarjeta__foto img, .tarjeta__foto .sinfoto { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--curva); }
.tarjeta:hover .tarjeta__foto img { transform: scale(1.07); }
.tarjeta__foto::after { content: ''; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(transparent, rgba(4, 8, 22, .6)); pointer-events: none; }
.sinfoto { display: grid; place-items: center; color: var(--tenue); background: var(--noche-4); }
.sinfoto .ic { width: 42px; height: 42px; }
.tarjeta__badges { position: absolute; top: 12px; left: 12px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 1; }
.badge { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; background: rgba(4, 8, 22, .78); color: #fff; }
.badge .ic { width: 13px; height: 13px; }
.badge--nuevo { background: var(--verde); color: #052e16; }
.badge--dest { background: linear-gradient(135deg, var(--rojo-2), var(--rojo)); }
.badge--sector { background: rgba(4, 8, 22, .8); color: #fff; border: 1px solid var(--c); }
.cinta { position: absolute; top: 16px; right: -38px; z-index: 1; transform: rotate(40deg); width: 150px; text-align: center; padding: 5px 0; background: var(--ambar); color: #3b2500; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cinta--grande { top: 26px; right: -46px; width: 190px; font-size: .9rem; padding: 7px 0; }
.tarjeta__nfotos { position: absolute; bottom: 10px; left: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; color: #fff; font-size: .8rem; font-weight: 600; }
.tarjeta__nfotos .ic { width: 15px; height: 15px; }
.fav { position: absolute; top: 10px; right: 10px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(4, 8, 22, .65); border: 1px solid rgba(255, 255, 255, .2); color: #fff; transition: transform .3s var(--rebote), color .2s; }
.fav .ic { width: 20px; height: 20px; transition: transform .35s var(--rebote); }
.fav:hover { transform: scale(1.1); }
.fav.es-fav { color: var(--rojo-2); }
.fav.es-fav .ic { fill: currentColor; }
.fav.late .ic { animation: corazon .55s var(--rebote); }
@keyframes corazon { 30% { transform: scale(1.45); } 60% { transform: scale(.9); } }
.es-reservado .fav { bottom: 10px; top: auto; }
.tarjeta__cuerpo { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.tarjeta__titulo { font-size: 1.2rem; font-weight: 700; color: #fff; }
.tarjeta__version { color: var(--tenue); font-size: .9rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarjeta__datos { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tarjeta__datos li { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 9px; background: rgba(255, 255, 255, .06); font-size: .82rem; font-weight: 500; color: var(--suave); }
.tarjeta__datos .ic { width: 15px; height: 15px; color: var(--celeste); }
.tarjeta__pie { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; }
.tarjeta__precio { font-family: var(--titulos); font-size: 1.4rem; font-weight: 800; color: #fff; }
.tarjeta__ir { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .07); transition: background-color .3s, transform .4s var(--curva); }
.tarjeta:hover .tarjeta__ir { background: var(--rojo); transform: rotate(-45deg); }
.tarjeta__tags { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.mini { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 600; color: var(--suave); padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, .06); }
.mini .ic { width: 14px; height: 14px; }
.mini--fin { background: rgba(59, 130, 246, .16); color: #bcd6ff; }
.mini--per { background: rgba(255, 59, 78, .16); color: #ffc2c9; }
.mini--nuevo { background: rgba(34, 197, 94, .16); color: #b7f5cc; }

/* Carrusel */
.carrusel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 340px); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 20px 26px; margin: -8px -20px 0; scroll-padding: 0 20px; overscroll-behavior-x: contain; }
.carrusel::-webkit-scrollbar { display: none; }
.carrusel > * { scroll-snap-align: start; }
.carrusel__flechas { display: flex; gap: 8px; }
.carrusel__flechas button { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--borde-2); background: var(--vidrio); transition: transform .2s, background-color .2s, border-color .2s; }
.carrusel__flechas button:hover { transform: scale(1.06); border-color: var(--celeste); }

/* Marcas que pasan */
.marcas { overflow: hidden; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); padding: 22px 0; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marcas__pista { display: flex; width: max-content; animation: desfile2 40s linear infinite; }
.marcas:hover .marcas__pista { animation-play-state: paused; }
.marcas__grupo { display: flex; gap: 56px; padding-right: 56px; }
.marcas a { font-family: var(--titulos); font-style: italic; font-size: 1.5rem; font-weight: 800; white-space: nowrap; color: var(--suave); transition: color .2s; display: inline-flex; align-items: center; gap: 56px; }
.marcas a::after { content: '✦'; font-size: .8rem; color: var(--rojo-2); }
.marcas a:hover { color: #fff; }
@keyframes desfile2 { to { transform: translateX(-50%); } }

/* Beneficios */
.beneficios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.beneficio { padding: 30px 24px; border-radius: 24px; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border: 1px solid var(--borde); position: relative; overflow: hidden; transition: transform .4s var(--curva), border-color .3s; }
.beneficio::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--rojo-2), var(--celeste)); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--curva); }
.beneficio:hover { transform: translateY(-6px); border-color: var(--borde-2); }
.beneficio:hover::before { transform: scaleX(1); }
.beneficio__ic { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, var(--azul-2), var(--azul-osc)); color: #fff; margin-bottom: 20px; transition: transform .5s var(--rebote); box-shadow: 0 10px 26px rgba(37, 99, 235, .35); }
.beneficio:nth-child(even) .beneficio__ic { background: linear-gradient(135deg, var(--rojo-2), var(--rojo-osc)); box-shadow: 0 10px 26px rgba(225, 29, 46, .35); }
.beneficio__ic .ic { width: 28px; height: 28px; }
.beneficio:hover .beneficio__ic { transform: rotate(-10deg) scale(1.08); }
.beneficio h3 { font-size: 1.3rem; margin-bottom: 8px; }
.beneficio p { color: var(--suave); font-size: .96rem; }

/* Banner del asistente */
.ia { max-width: var(--ancho); margin: 0 auto; padding: 0 20px 90px; }
.ia__in { position: relative; overflow: hidden; display: flex; align-items: center; gap: 28px; padding: 38px 42px; border-radius: 30px; background: radial-gradient(120% 140% at 0% 0%, #1B2C6B 0%, var(--noche-2) 60%); border: 1px solid var(--borde-2); }
.ia__in::before { content: ''; position: absolute; width: 440px; height: 440px; right: -120px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(225, 29, 46, .35), transparent 65%); animation: flota 12s ease-in-out infinite alternate; }
.ia__in > * { position: relative; }
.ia__in h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 8px; }
.ia__in p { color: var(--suave); max-width: 62ch; }
.ia__in .btn { margin-left: auto; }
.ia__orbe { position: relative; width: 96px; height: 96px; flex: none; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(59, 130, 246, .5), transparent 70%); animation: flotaLogo 5s ease-in-out infinite; }
.ia__orbe::before { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--rojo-2); border-right-color: var(--celeste); animation: gira 3.5s linear infinite; }
.ia__orbe img { width: 84px; height: auto; }

/* Zona */
.zona { display: grid; grid-template-columns: 1fr 1.1fr; gap: 50px; align-items: center; }
.zona__txt h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 14px; }
.zona__txt > p { color: var(--suave); }
.zona__chips { list-style: none; padding: 0; margin: 20px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.zona__chips li { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--vidrio); border: 1px solid var(--borde); font-size: .9rem; font-weight: 500; }
.zona__chips .ic { width: 15px; height: 15px; color: var(--rojo-2); }
.zona__hor { display: flex; align-items: center; gap: 8px; color: var(--suave); margin-bottom: 24px; font-size: .95rem; }
.zona__txt .btn { margin-top: 6px; }
.zona__mapa { background: linear-gradient(180deg, var(--noche-3), var(--noche-2)); border: 1px solid var(--borde); border-radius: 28px; padding: 10px; aspect-ratio: 4 / 3; }
.zona__mapa svg { width: 100%; height: 100%; overflow: visible; }
.zona__rio { fill: none; stroke: #1E4E9A; stroke-width: 14; stroke-linecap: round; opacity: .7; }
.zona__ruta { fill: none; stroke: rgba(255, 255, 255, .25); stroke-width: 2; stroke-dasharray: 6 8; animation: ruta 3s linear infinite; }
@keyframes ruta { to { stroke-dashoffset: -28; } }
.zona__onda { fill: none; stroke: var(--rojo-2); stroke-width: 2; transform-origin: 228px 185px; transform-box: view-box; animation: onda 3s ease-out infinite; }
.zona__onda--2 { animation-delay: 1.5s; }
@keyframes onda { from { transform: scale(.3); opacity: 1; } to { transform: scale(3.6); opacity: 0; } }
.zona__pin circle { fill: #fff; }
.zona__pin text { fill: rgba(233, 239, 252, .8); font-size: 13px; font-weight: 500; font-family: var(--fuente); }
.zona__pin--centro circle { fill: var(--rojo); stroke: #fff; stroke-width: 3; }
.zona__pin--centro text { fill: #fff; font-size: 16px; font-weight: 700; }

/* ── Pie ───────────────────────────────────────────────────────────────── */
.pie { color: var(--suave); padding: 0 20px 26px; margin-top: 30px; border-top: 1px solid var(--borde); background: linear-gradient(180deg, var(--noche-2), var(--noche)); }
.vende-cta + .pie { margin-top: 70px; }
.pie__in { max-width: var(--ancho); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 36px; padding: 56px 0 40px; }
.pie__col { display: flex; flex-direction: column; gap: 10px; font-size: .95rem; }
.pie__col h3 { color: #fff; font-size: 1.05rem; margin-bottom: 6px; }
.pie__col a, .pie__col p, .pie__pronto { display: flex; align-items: center; gap: 9px; transition: color .2s; }
.pie__col a:hover { color: #fff; }
.pie__col .ic { color: var(--celeste); width: 18px; height: 18px; }
.pie__pronto { color: var(--tenue); }
.pie__pronto em { font-style: normal; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(251, 191, 36, .16); color: var(--ambar); }
.pie__marca p { color: var(--suave); }
.pie__redes { display: flex; gap: 8px; }
.pie__redes a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--vidrio-2); transition: background-color .2s, transform .3s var(--rebote); }
.pie__redes a:hover { background: var(--rojo); transform: translateY(-3px); }
.pie__redes .ic { color: #fff; }
.pie__base { max-width: var(--ancho); margin: 0 auto; padding-top: 22px; border-top: 1px solid var(--borde); display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: .84rem; color: var(--tenue); }
.pie__base a { margin-left: auto; }
.pie__base a:hover { color: #fff; }

/* ── Banda de las páginas internas ─────────────────────────────────────── */
.banda { position: relative; overflow: hidden; background: var(--noche-2); color: #fff; isolation: isolate; border-bottom: 1px solid var(--borde); }
.banda__foto { position: absolute; inset: 0; z-index: -3; }
.banda__foto img { width: 100%; height: 100%; object-fit: cover; opacity: .42; animation: kenburns 14s linear forwards; }
.banda::after { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(4, 8, 22, .96) 20%, rgba(4, 8, 22, .5)), linear-gradient(0deg, rgba(4, 8, 22, .7), transparent 50%), radial-gradient(60% 90% at 90% 0%, color-mix(in srgb, var(--c, #3B82F6) 35%, transparent), transparent 70%); }
.banda--todo::before, .banda--vender::before { content: ''; position: absolute; z-index: -1; width: 60vmax; height: 60vmax; left: -20vmax; top: -40vmax; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c, #3B82F6) 45%, transparent), transparent 62%); animation: flota 14s ease-in-out infinite alternate; }
.banda__estrellas { z-index: -1; }
.banda__in { position: relative; z-index: 1; max-width: var(--ancho); margin: 0 auto; padding: 50px 20px 58px; }
.banda h1 { display: flex; align-items: center; gap: 16px; font-size: clamp(2.2rem, 5vw, 3.8rem); margin: 14px 0 10px; font-style: italic; text-transform: uppercase; }
.banda p { color: var(--suave); max-width: 62ch; font-size: 1.08rem; }
.banda__ic { width: 66px; height: 66px; border-radius: 20px; display: grid; place-items: center; background: var(--c, var(--azul)); flex: none; box-shadow: 0 10px 30px color-mix(in srgb, var(--c, var(--azul)) 50%, transparent); animation: flotaLogo 5s ease-in-out infinite; }
.banda__ic .ic { width: 36px; height: 36px; }
.banda__rubros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.banda__rubros a { padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); font-weight: 600; font-size: .9rem; transition: background-color .2s; }
.banda__rubros a:hover { background: var(--c); border-color: var(--c); }
.banda__pronto { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 6px 14px; border-radius: 999px; background: var(--ambar); color: #3a2400 !important; font-weight: 700; font-size: .9rem !important; }
.banda__acc { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.banda--vender { --c: #E11D2E; background: radial-gradient(80% 120% at 0% 0%, rgba(37, 99, 235, .45), transparent 60%), linear-gradient(135deg, #0A1B52, #0B1435 55%, #2A0A1E); }
.banda--vender::after { display: none; }
.banda__in--vender { display: grid; grid-template-columns: 1.4fr .6fr; align-items: center; gap: 30px; padding-bottom: 64px; }
.banda--vender h1 { display: block; text-transform: none; font-style: normal; font-size: clamp(2.1rem, 4.4vw, 3.5rem); }
.banda__chips { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.banda__chips li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); font-weight: 600; }
.banda__chips .ic { color: var(--cian); }
.banda__logo img { width: 100%; max-width: 330px; margin: 0 auto; animation: flotaLogo 6s ease-in-out infinite; }
.migas { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .88rem; color: var(--tenue); }
.migas .ic { width: 14px; height: 14px; }
.migas a:hover { color: #fff; }
.migas span { color: #fff; }
.migas--ficha { margin-bottom: 18px; }

.pestanas { position: sticky; top: var(--cab); z-index: 30; background: rgba(4, 8, 22, .9); border-bottom: 1px solid var(--borde); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: top .35s var(--curva); }
.cab.se-esconde ~ main .pestanas { top: 0; }
.pestanas__in { max-width: var(--ancho); margin: 0 auto; padding: 10px 20px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.pestanas__in::-webkit-scrollbar { display: none; }
.pestanas a { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: 999px; white-space: nowrap; font-weight: 500; font-size: .94rem; color: var(--suave); transition: background-color .2s, color .2s; }
.pestanas a:hover { background: var(--vidrio-2); color: #fff; }
.pestanas a.es-activa { background: #fff; color: var(--noche-3); }
.pestanas a small { font-size: .75rem; padding: 1px 7px; border-radius: 999px; background: var(--vidrio-2); color: var(--suave); }
.pestanas a.es-activa small { background: rgba(4, 8, 22, .1); color: var(--noche-3); }
.pestanas .ic { width: 18px; height: 18px; color: var(--c, var(--celeste)); }
.pestanas a.es-activa .ic { color: var(--c, var(--rojo)); }
.pestanas__pronto { opacity: .7; }
.pestanas__pronto small { background: rgba(251, 191, 36, .16) !important; color: var(--ambar) !important; }

/* ── Catálogo ──────────────────────────────────────────────────────────── */
.catalogo { max-width: var(--ancho); margin: 0 auto; padding: 28px 20px 80px; display: grid; grid-template-columns: 290px 1fr; gap: 30px; align-items: start; }
.filtros { position: sticky; top: calc(var(--cab) + 76px); max-height: calc(100vh - var(--cab) - 96px); display: flex; flex-direction: column; background: rgba(11, 23, 54, .7); border: 1px solid var(--borde); border-radius: 22px; }
.filtros__cab { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--borde); }
.filtros__cab strong { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; color: #fff; }
.filtros__limpiar { margin-left: auto; font-size: .88rem; font-weight: 600; color: var(--rojo-2); }
.filtros__limpiar:hover { text-decoration: underline; }
.filtros__cerrar, .filtros__pie, .filtros__fondo { display: none; }
.filtros__cuerpo { overflow-y: auto; padding: 4px 18px 18px; scrollbar-width: thin; scrollbar-color: var(--noche-4) transparent; }
.filtro { padding: 16px 0; border-bottom: 1px solid var(--borde); }
.filtro:last-child { border-bottom: 0; }
.filtro__tit { display: flex; align-items: center; gap: 7px; font-size: .92rem; font-weight: 700; margin-bottom: 12px; font-family: var(--fuente); color: #fff; }
.filtro__tit .ic { width: 17px; height: 17px; color: var(--celeste); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--borde-2); font-size: .88rem; font-weight: 500; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--rebote), opacity .2s; user-select: none; }
.chip span:hover { border-color: var(--celeste); }
.chip input:checked + span { background: var(--azul); border-color: var(--azul); color: #fff; }
.chip input:checked + span:active { transform: scale(.95); }
.chip input:focus-visible + span { outline: 3px solid var(--celeste); }
.chip small, .switch small { font-size: .74rem; color: var(--tenue); }
.chip input:checked + span small { color: rgba(255, 255, 255, .7); }
.chip.es-cero span { opacity: .4; }
.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 4px 0; font-size: .92rem; font-weight: 500; }
.switch + .switch { margin-top: 8px; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch__pista { width: 44px; height: 24px; border-radius: 12px; background: var(--noche-4); border: 1px solid var(--borde-2); position: relative; flex: none; transition: background-color .25s; }
.switch__pista::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .3s var(--rebote); }
.switch input:checked + .switch__pista { background: var(--rojo); border-color: var(--rojo); }
.switch input:checked + .switch__pista::after { transform: translateX(20px); }
.switch input:focus-visible + .switch__pista { outline: 3px solid var(--celeste); outline-offset: 2px; }
.switch small { margin-left: 4px; }

.rango__vals { display: flex; justify-content: space-between; font-size: .88rem; font-weight: 600; color: var(--suave); margin-bottom: 10px; }
.rango__pista { position: relative; height: 24px; }
.rango__pista::before { content: ''; position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 4px; background: var(--noche-4); }
.rango__lleno { position: absolute; top: 10px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--azul-2), var(--rojo-2)); left: var(--a, 0%); right: calc(100% - var(--b, 100%)); }
.rango input { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; height: 24px; }
.rango input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--azul-2); box-shadow: 0 2px 8px rgba(0, 0, 0, .4); cursor: grab; transition: transform .2s var(--rebote); }
.rango input::-moz-range-thumb { pointer-events: auto; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--azul-2); cursor: grab; }
.rango input:active::-webkit-slider-thumb { transform: scale(1.2); cursor: grabbing; }
.rango input::-webkit-slider-runnable-track { background: none; }
.rango input::-moz-range-track { background: none; }

.barra { display: flex; gap: 10px; align-items: center; }
.barra__buscar { flex: 1; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px; background: rgba(11, 23, 54, .7); border: 1px solid var(--borde); border-radius: 16px; min-width: 0; }
.barra__buscar .ic { color: var(--celeste); }
.barra__buscar input { flex: 1; border: 0; outline: 0; background: none; min-width: 0; font-size: 1rem; color: #fff; }
.barra__filtros { display: none; height: 52px; border-radius: 16px; }
.barra__nfil { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--rojo); color: #fff; font-size: .76rem; display: grid; place-items: center; }
.barra__orden { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 14px; background: rgba(11, 23, 54, .7); border: 1px solid var(--borde); border-radius: 16px; }
.barra__orden .ic { color: var(--celeste); }
.barra__orden select { border: 0; outline: 0; background: none; font-weight: 500; cursor: pointer; max-width: 180px; color: #fff; }
.barra__orden option { background: var(--noche-3); }
.activos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.activos:empty { display: none; }
.activo { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px 0 12px; border-radius: 999px; background: rgba(59, 130, 246, .18); border: 1px solid rgba(59, 130, 246, .4); color: #cfe0ff; font-size: .86rem; font-weight: 600; animation: aparece .25s var(--curva); }
.activo .ic { width: 15px; height: 15px; }
.activo:hover { background: rgba(59, 130, 246, .3); }
.cuenta { margin: 16px 0 14px; color: var(--suave); }
.cuenta strong { color: #fff; font-size: 1.1rem; }
.grilla--catalogo { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grilla--catalogo .tarjeta { animation: tarjetaEntra .5s var(--curva) both; animation-delay: calc(var(--n, 0) * 40ms); }
.anim-listo .grilla--catalogo .tarjeta { animation: none; }
@keyframes tarjetaEntra { from { opacity: 0; transform: translateY(20px) scale(.98); } }
.tarjeta.se-oculta { display: none; }

.vacio { text-align: center; padding: 60px 20px; max-width: 560px; margin: 0 auto; }
.vacio--pagina { padding: 120px 20px; }
.vacio__ic { width: 100px; height: 100px; margin: 0 auto 22px; border-radius: 32px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(59, 130, 246, .25), rgba(225, 29, 46, .25)); border: 1px solid var(--borde-2); color: #fff; animation: rebota 2.4s ease-in-out infinite; }
.vacio__ic .ic { width: 50px; height: 50px; }
.vacio h1, .vacio h2 { font-size: 1.8rem; margin-bottom: 10px; }
.vacio p { color: var(--suave); margin-bottom: 22px; }
.vacio__acc { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.catalogo-vacio { padding-top: 64px; }
.catalogo-vacio__cab { text-align: center; max-width: 640px; margin: 0 auto 36px; }
.catalogo-vacio__cab h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 10px; }
.catalogo-vacio__cab p { color: var(--suave); }
.catalogo-vacio__opc { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; align-items: stretch; }
.catalogo-vacio .form--tarjeta h3 { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; }
.catalogo-vacio .form--tarjeta h3 .ic { color: var(--celeste); }
.vende-tarjeta { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 32px; border-radius: 26px; background: linear-gradient(140deg, var(--rojo-osc), var(--rojo) 40%, var(--azul) 100%); color: #fff; transition: transform .4s var(--curva); }
.vende-tarjeta::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 26px); pointer-events: none; }
.vende-tarjeta:hover { transform: translateY(-6px); }
.vende-tarjeta strong { font-family: var(--titulos); font-size: 1.6rem; line-height: 1.15; }
.vende-tarjeta > span:not(.btn):not(.vende-tarjeta__ic) { color: rgba(255, 255, 255, .88); }
.vende-tarjeta .btn { align-self: flex-start; margin-top: 6px; background: #fff; color: var(--rojo); box-shadow: none; }
.vende-tarjeta__ic { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: rgba(255, 255, 255, .18); animation: flotaLogo 5s ease-in-out infinite; }
.vende-tarjeta__ic .ic { width: 32px; height: 32px; }

/* ── Ficha del vehículo ────────────────────────────────────────────────── */
.ficha { max-width: var(--ancho); margin: 0 auto; padding: 26px 20px 30px; }
.ficha__grilla { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(330px, 1fr); gap: 30px; align-items: start; }
.aviso-admin { display: flex; align-items: center; gap: 8px; background: rgba(251, 191, 36, .14); border: 1px solid rgba(251, 191, 36, .4); color: #fde68a; padding: 12px 16px; border-radius: 14px; margin-bottom: 16px; font-weight: 500; }
.galeria__marco { position: relative; border-radius: 24px; overflow: hidden; background: var(--noche-3); border: 1px solid var(--borde); }
.galeria__pista { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.galeria__pista::-webkit-scrollbar { display: none; }
.galeria__foto { flex: 0 0 100%; margin: 0; scroll-snap-align: center; aspect-ratio: 3 / 2; }
.galeria__foto img, .galeria__foto .sinfoto { width: 100%; height: 100%; object-fit: cover; }
.galeria__flecha { position: absolute; top: 50%; width: 50px; height: 50px; margin-top: -25px; border-radius: 50%; display: grid; place-items: center; background: rgba(4, 8, 22, .7); border: 1px solid rgba(255, 255, 255, .25); color: #fff; opacity: 0; transition: opacity .25s, transform .3s var(--curva); }
.galeria__flecha--izq { left: 14px; transform: translateX(-10px); }
.galeria__flecha--der { right: 14px; transform: translateX(10px); }
.galeria__marco:hover .galeria__flecha { opacity: 1; transform: none; }
.galeria__cuenta { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(4, 8, 22, .75); color: #fff; font-size: .86rem; font-weight: 600; }
.galeria__cuenta .ic { width: 16px; height: 16px; }
.galeria__ampliar { position: absolute; right: 14px; bottom: 14px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(4, 8, 22, .75); color: #fff; transition: transform .3s var(--rebote); }
.galeria__ampliar:hover { transform: scale(1.1); }
.galeria__miniaturas { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; scrollbar-width: none; padding: 3px; }
.galeria__miniaturas::-webkit-scrollbar { display: none; }
.galeria__miniaturas button { flex: none; width: 96px; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; opacity: .5; outline: 2px solid transparent; outline-offset: 2px; transition: opacity .2s, outline-color .2s; }
.galeria__miniaturas button.es-activa { opacity: 1; outline-color: var(--rojo-2); }
.galeria__miniaturas button:hover { opacity: 1; }
.galeria__miniaturas img { width: 100%; height: 100%; object-fit: cover; }

.panel { position: sticky; top: calc(var(--cab) + 20px); background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)); border: 1px solid var(--borde-2); border-radius: 26px; padding: 26px; }
.panel__sector { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--c) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); color: #fff; font-size: .85rem; font-weight: 600; }
.panel__sector .ic { width: 18px; height: 18px; color: var(--c); }
.panel__tit { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-top: 14px; }
.panel__ver { color: var(--suave); font-size: 1.05rem; margin-top: 4px; }
.panel__rapidos { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.panel__rapidos li { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 10px; background: rgba(255, 255, 255, .06); font-size: .9rem; font-weight: 500; }
.panel__rapidos .ic { width: 16px; height: 16px; color: var(--celeste); }
.panel__precio { margin: 22px 0 14px; padding: 18px 20px; border-radius: 18px; background: linear-gradient(135deg, #0F2463, #0A1436 60%, #2A0A1E); border: 1px solid var(--borde-2); color: #fff; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.panel__precio::after { content: ''; position: absolute; width: 220px; height: 220px; right: -60px; top: -110px; border-radius: 50%; background: radial-gradient(circle, rgba(225, 29, 46, .5), transparent 65%); }
.panel__precio span { font-size: .8rem; color: var(--suave); text-transform: uppercase; letter-spacing: .12em; }
.panel__precio strong { font-family: var(--titulos); font-size: 2.4rem; font-weight: 800; line-height: 1.15; position: relative; }
.panel__precio small { color: var(--suave); font-size: .82rem; }
.panel__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.panel__vendido { background: rgba(255, 255, 255, .06); padding: 12px 14px; border-radius: 14px; color: var(--suave); margin-bottom: 14px; }
.panel__acc { display: flex; flex-direction: column; gap: 10px; }
.panel__fila { display: flex; gap: 8px; }
.panel__fila .btn:not(.btn--icono) { flex: 1; padding: 0 12px; }
.panel .fav { position: static; width: 48px; height: 48px; }

.simu { margin-top: 18px; border: 1.5px solid var(--borde-2); border-radius: 18px; overflow: hidden; }
.simu summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-weight: 600; cursor: pointer; }
.simu summary::-webkit-details-marker { display: none; }
.simu summary .ic:first-child { color: var(--rojo-2); }
.simu summary .ic--chico { margin-left: auto; transition: transform .3s; }
.simu[open] summary .ic--chico { transform: rotate(180deg); }
.simu__cuerpo { padding: 0 16px 16px; animation: aparece .3s var(--curva); }
.simu__fila { display: flex; justify-content: space-between; font-size: .92rem; margin-bottom: 6px; }
.simu input[type=range] { width: 100%; accent-color: var(--rojo); }
.simu__cuotas { display: flex; gap: 6px; margin: 12px 0; flex-wrap: wrap; }
.simu__cuotas input { position: absolute; opacity: 0; }
.simu__cuotas span { display: grid; place-items: center; min-width: 46px; height: 38px; border-radius: 10px; border: 1.5px solid var(--borde-2); font-weight: 600; cursor: pointer; transition: all .2s; }
.simu__cuotas input:checked + span { background: var(--azul); border-color: var(--azul); color: #fff; }
.simu__res { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.simu__res div { background: rgba(255, 255, 255, .06); border-radius: 12px; padding: 10px 12px; }
.simu__res span { display: block; font-size: .78rem; color: var(--tenue); }
.simu__res strong { font-size: 1.15rem; }
.simu__res div:last-child { background: rgba(225, 29, 46, .16); }
.simu__nota { font-size: .76rem; color: var(--tenue); margin-top: 10px; }

.ficha__info { max-width: calc(100% - 360px); margin-top: 30px; display: flex; flex-direction: column; gap: 20px; }
.bloque { background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02)); border: 1px solid var(--borde); border-radius: 24px; padding: 28px; }
.bloque h2 { font-size: 1.55rem; margin-bottom: 18px; }
.bloque > p { color: var(--suave); margin: -10px 0 18px; }
.specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 0; }
.spec { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, .045); border: 1px solid transparent; transition: transform .3s var(--curva), border-color .2s; }
.spec:hover { transform: translateY(-3px); border-color: var(--borde-2); }
.spec .ic { grid-row: span 2; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: rgba(59, 130, 246, .16); color: var(--celeste); }
.spec dt { font-size: .78rem; color: var(--tenue); }
.spec dd { margin: 0; font-weight: 600; color: #fff; }
.texto p { color: var(--suave); font-size: 1.04rem; }
.texto p + p { margin-top: 12px; }

/* ── Formularios ───────────────────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 14px; }
.form--tarjeta { background: linear-gradient(180deg, rgba(255, 255, 255, .065), rgba(255, 255, 255, .025)); border: 1px solid var(--borde-2); border-radius: 26px; padding: 30px; }
.form--tarjeta h2 { font-size: 1.4rem; margin-top: 6px; }
.form__fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form__fila--3 { grid-template-columns: 1fr 1fr 1.2fr; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > span { font-size: .9rem; font-weight: 600; color: #fff; }
.campo small { color: var(--tenue); font-weight: 400; }
.campo input, .campo textarea, .campo select { width: 100%; border: 1.5px solid var(--borde-2); border-radius: 14px; padding: 13px 14px; background: rgba(4, 8, 22, .55); color: #fff; outline: 0; transition: border-color .2s, background-color .2s; resize: vertical; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--tenue); }
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--celeste); background: rgba(4, 8, 22, .8); }
.campo.con-error input, .campo.con-error textarea { border-color: var(--rojo-2); animation: sacude .4s; }
.campo__precio { display: flex; gap: 8px; }
.campo__precio select { width: 92px; flex: none; }
.campo select option { background: var(--noche-3); }
@keyframes sacude { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.form__ok { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 14px; background: rgba(34, 197, 94, .14); border: 1px solid rgba(34, 197, 94, .4); color: #b7f5cc; font-weight: 600; animation: aparece .4s var(--rebote); }
.form__ok .ic { width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--verde); color: #052e16; flex: none; }
.form__ok--grande { gap: 16px; padding: 22px; }
.form__ok--grande strong { display: block; font-size: 1.15rem; color: #fff; }
.form__ok--grande span { color: #c9f7da; font-weight: 500; }
.form__ok-ic { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--verde); flex: none; animation: late 1.2s var(--rebote); }
.form__ok-ic .ic { width: 30px; height: 30px; padding: 0; background: none; }
.form__error { padding: 12px 14px; border-radius: 12px; background: rgba(225, 29, 46, .16); border: 1px solid rgba(225, 29, 46, .45); color: #ffc2c9; font-weight: 500; }
.form.enviado > :not(.form__ok):not(.form__ok--grande):not(h2):not(h3) { opacity: .35; pointer-events: none; }
.form__paso { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.form__paso:first-of-type { margin-top: 0; }
.form__paso span { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--rojo-2), var(--rojo-osc)); font-family: var(--titulos); font-weight: 800; flex: none; }
.form__paso h2 { font-size: 1.35rem; margin: 0; }
.form__paso small { font-family: var(--fuente); font-size: .85rem; font-weight: 500; color: var(--tenue); }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion input { position: absolute; opacity: 0; }
.opcion span { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; border-radius: 14px; border: 1.5px solid var(--borde-2); background: rgba(4, 8, 22, .4); font-weight: 500; cursor: pointer; transition: all .2s; }
.opcion span .ic { color: var(--c, var(--celeste)); }
.opcion input:checked + span { border-color: #fff; background: #fff; color: var(--noche-3); }
.opcion input:checked + span .ic { color: var(--c, var(--rojo)); }
.opcion input:focus-visible + span { outline: 3px solid var(--celeste); }
.opciones--grandes { display: grid; grid-template-columns: repeat(3, 1fr); }
.opciones--grandes span { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: center; padding: 14px; height: 100%; }
.opciones--grandes .ic { grid-row: span 2; width: 28px; height: 28px; }
.opciones--grandes b { font-weight: 700; }
.opciones--grandes small { font-size: .8rem; color: var(--tenue); line-height: 1.3; }
.opciones--grandes input:checked + span small { color: #4a5a80; }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--rojo); flex: none; }
.check--form span { color: var(--suave); font-size: .9rem; }
.subefotos { position: relative; display: block; cursor: pointer; }
.subefotos input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.subefotos__caja { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 18px; border-radius: 18px; border: 2px dashed var(--borde-2); background: rgba(59, 130, 246, .06); text-align: center; transition: border-color .2s, background-color .2s; }
.subefotos:hover .subefotos__caja, .subefotos.es-arrastre .subefotos__caja { border-color: var(--celeste); background: rgba(59, 130, 246, .12); }
.subefotos__caja .ic { width: 38px; height: 38px; color: var(--celeste); }
.subefotos__caja small { color: var(--tenue); }
.subefotos__lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.subefotos__lista:empty { display: none; }
.subefoto { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--noche-4); animation: aparece .3s var(--rebote); }
.subefoto img { width: 100%; height: 100%; object-fit: cover; }
.subefoto button { position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(4, 8, 22, .8); color: #fff; }
.subefoto button .ic { width: 15px; height: 15px; }
.subefoto.es-procesando::after { content: ''; position: absolute; inset: 0; background: rgba(4, 8, 22, .55); }

.pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding-bottom: 20px; }
.paso { position: relative; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border: 1px solid var(--borde); border-radius: 22px; padding: 24px; overflow: hidden; }
.paso > span { position: absolute; top: 14px; right: 18px; font-family: var(--titulos); font-weight: 800; font-size: 3rem; line-height: 1; color: rgba(255, 255, 255, .06); }
.paso > .ic { width: 50px; height: 50px; padding: 12px; border-radius: 16px; background: linear-gradient(135deg, var(--azul-2), var(--azul-osc)); color: #fff; margin-bottom: 14px; }
.paso:nth-child(even) > .ic { background: linear-gradient(135deg, var(--rojo-2), var(--rojo-osc)); }
.paso h3 { font-size: 1.15rem; margin-bottom: 4px; }
.paso p { color: var(--suave); font-size: .95rem; }

.contacto { display: grid; grid-template-columns: 1fr 1.2fr; gap: 30px; align-items: start; }
.contacto__datos { display: flex; flex-direction: column; gap: 12px; }
.dato { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .025)); border: 1px solid var(--borde); transition: transform .3s var(--curva), border-color .2s; }
a.dato:hover { transform: translateX(6px); border-color: var(--borde-2); }
.dato > span:not(.dato__ic) { display: flex; flex-direction: column; flex: 1; color: #fff; }
.dato strong { font-size: .76rem; text-transform: uppercase; letter-spacing: .12em; color: var(--tenue); }
.dato__ic { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: rgba(59, 130, 246, .16); color: var(--celeste); flex: none; }
.dato--wa .dato__ic { background: rgba(37, 211, 102, .16); color: var(--wa); }
.dato--vender { background: linear-gradient(120deg, rgba(225, 29, 46, .35), rgba(37, 99, 235, .35)); border-color: rgba(255, 255, 255, .2); }
.dato--vender .dato__ic { background: #fff; color: var(--rojo); }
.dato > .ic { color: var(--tenue); }

/* Barra fija del celular en la ficha */
.barra-movil { display: none; }

/* Visor de fotos */
.visor { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(2, 4, 12, .97); color: #fff; }
.visor[open] { display: flex; animation: aparece .3s; }
.visor::backdrop { background: rgba(2, 4, 12, .9); }
.visor__pista { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.visor__pista::-webkit-scrollbar { display: none; }
.visor__pista figure { flex: 0 0 100%; margin: 0; display: grid; place-items: center; scroll-snap-align: center; padding: 60px 20px; }
.visor__pista img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; }
.visor__cerrar { position: fixed; top: 16px; right: 16px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, .12); display: grid; place-items: center; z-index: 2; }
.visor__flecha { position: fixed; top: 50%; width: 54px; height: 54px; margin-top: -27px; border-radius: 50%; background: rgba(255, 255, 255, .12); display: grid; place-items: center; }
.visor__flecha--izq { left: 16px; }
.visor__flecha--der { right: 16px; }
.visor__cuenta { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); font-weight: 600; color: rgba(255, 255, 255, .8); }

/* Aviso flotante */
.tostada { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%); background: var(--noche-3); border: 1px solid var(--borde-2); color: #fff; padding: 12px 18px; border-radius: 14px; z-index: 99; font-weight: 500; box-shadow: var(--sombra); animation: aparece .3s; }

/* ── Chat (Abrakadabras IA) ────────────────────────────────────────────── */
.chat { position: fixed; right: 20px; bottom: 20px; z-index: 70; }
.chat__btn { position: relative; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--rojo-2), var(--rojo) 45%, var(--azul) 100%); box-shadow: 0 12px 32px rgba(225, 29, 46, .4); transition: transform .35s var(--rebote); }
.chat__btn:hover { transform: scale(1.08) rotate(-6deg); }
.chat__btn .ic { width: 30px; height: 30px; position: absolute; transition: transform .4s var(--rebote), opacity .25s; }
.chat__ic-abrir { animation: varita 4s ease-in-out infinite; }
@keyframes varita { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-18deg); } 86% { transform: rotate(14deg); } 93% { transform: rotate(-6deg); } }
.chat__ic-cerrar { opacity: 0; transform: rotate(-90deg) scale(.5); }
.chat.es-abierto .chat__ic-abrir { opacity: 0; animation: none; transform: rotate(90deg) scale(.5); }
.chat.es-abierto .chat__ic-cerrar { opacity: 1; transform: none; }
.chat__pulso { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--rojo-2); animation: pulso 2.4s ease-out infinite; }
.chat.es-abierto .chat__pulso { display: none; }
.chat__invita { position: absolute; right: 0; bottom: 80px; width: 270px; padding: 14px 16px; padding-right: 34px; background: var(--noche-3); border: 1px solid var(--borde-2); border-radius: 18px 18px 6px 18px; box-shadow: var(--sombra-alta); display: flex; flex-direction: column; gap: 2px; font-size: .9rem; color: var(--suave); animation: invita .6s var(--rebote); cursor: pointer; }
.chat__invita strong { color: #fff; font-size: 1rem; }
.chat__invita-x { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: var(--tenue); }
.chat__invita-x .ic { width: 15px; height: 15px; }
@keyframes invita { from { opacity: 0; transform: translateY(16px) scale(.9); } }
.chat__panel { position: absolute; right: 0; bottom: 82px; width: min(390px, calc(100vw - 32px)); height: min(600px, calc(100vh - 130px)); background: var(--noche-2); border: 1px solid var(--borde-2); border-radius: 26px; box-shadow: 0 24px 80px rgba(0, 0, 0, .6); display: flex; flex-direction: column; overflow: hidden; transform-origin: bottom right; animation: abreChat .4s var(--rebote); }
@keyframes abreChat { from { opacity: 0; transform: translateY(20px) scale(.9); } }
.chat__cab { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(135deg, #0F2463, #0A1436 60%, #2A0A1E); color: #fff; border-bottom: 1px solid var(--borde); }
.chat__cab small { display: block; font-size: .76rem; color: var(--suave); }
.chat__avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.chat__avatar img { width: 44px; height: auto; }
.chat__cerrar { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; }
.chat__cerrar:hover { background: rgba(255, 255, 255, .1); }
.chat__msgs { flex: 1; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.chat__msg { max-width: 86%; padding: 11px 14px; border-radius: 18px; font-size: .95rem; line-height: 1.45; white-space: pre-line; animation: burbuja .35s var(--curva); }
@keyframes burbuja { from { opacity: 0; transform: translateY(10px) scale(.96); } }
.chat__msg--ia { background: var(--noche-4); border-bottom-left-radius: 6px; align-self: flex-start; }
.chat__msg--yo { background: linear-gradient(135deg, var(--azul-2), var(--azul-osc)); color: #fff; border-bottom-right-radius: 6px; align-self: flex-end; }
.chat__botones { display: flex; flex-direction: column; gap: 6px; align-self: flex-start; max-width: 86%; animation: burbuja .4s var(--curva); }
.chat__botones a { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(225, 29, 46, .18); border: 1px solid rgba(225, 29, 46, .4); color: #ffd0d6; font-weight: 600; font-size: .9rem; transition: transform .2s; }
.chat__botones a:hover { transform: translateX(4px); }
.chat__botones .ic { width: 16px; height: 16px; }
.chat__escribe { align-self: flex-start; display: flex; gap: 5px; padding: 14px 16px; background: var(--noche-4); border-radius: 18px; }
.chat__escribe i { width: 7px; height: 7px; border-radius: 50%; background: var(--tenue); animation: punto 1.2s infinite; }
.chat__escribe i:nth-child(2) { animation-delay: .15s; }
.chat__escribe i:nth-child(3) { animation-delay: .3s; }
@keyframes punto { 30% { transform: translateY(-5px); background: var(--rojo-2); } }
.chat__atajos { display: flex; gap: 6px; overflow-x: auto; padding: 10px 14px 0; scrollbar-width: none; }
.chat__atajos::-webkit-scrollbar { display: none; }
.chat__atajos button { flex: none; padding: 8px 12px; border-radius: 999px; border: 1.5px solid var(--borde-2); background: var(--vidrio); font-size: .84rem; font-weight: 500; transition: border-color .2s; }
.chat__atajos button:hover { border-color: var(--celeste); }
.chat__form { display: flex; gap: 8px; padding: 12px 14px; }
.chat__form input { flex: 1; min-width: 0; height: 48px; border: 1.5px solid var(--borde-2); border-radius: 16px; padding: 0 14px; outline: 0; background: rgba(4, 8, 22, .6); color: #fff; font-size: 16px; }
.chat__form input:focus { border-color: var(--celeste); }
.chat__form button { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, var(--rojo-2), var(--rojo)); color: #fff; transition: transform .2s; }
.chat__form button:hover { transform: scale(1.06); }
.chat__pie { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px 12px; font-size: .84rem; color: var(--suave); }
.chat__pie .ic { color: var(--wa); width: 16px; height: 16px; }
.chat__pie:hover { color: #fff; }

/* ── Celular y tablet ──────────────────────────────────────────────────── */
@media (max-width: 1160px) {
  .cab__nav .cab__link:nth-child(2) { display: none; }
  .areas { grid-template-columns: repeat(2, 1fr); }
  .beneficios { grid-template-columns: repeat(2, 1fr); }
  .ficha__info { max-width: none; }
  .pie__in { grid-template-columns: 1fr 1fr; }
  .pasos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  :root { --cab: 66px; }
  .cab__nav { display: none; }
  .cab__menu { display: inline-grid; }
  .cab__fav, .cab__wa { display: none; }
  .logo__escudo, .logo__escudo img { width: 46px; height: 46px; }
  .logo__marca { font-size: 1.15rem; }
  .logo__sub { display: none; }
  .hero__in { grid-template-columns: minmax(0, 1fr); text-align: left; gap: 10px; padding-top: calc(var(--cab) + 14px); }
  .hero__logo { order: -1; }
  .insignia { width: min(330px, 76vw); }
  .hero__etiqueta { display: none; }
  .catalogo { grid-template-columns: 1fr; }
  .filtros { position: fixed; z-index: 85; top: auto; left: 0; right: 0; bottom: 0; max-height: 88vh; border-radius: 26px 26px 0 0; transform: translateY(105%); transition: transform .45s var(--curva); background: var(--noche-2); box-shadow: 0 -20px 60px rgba(0, 0, 0, .5); }
  .filtros.es-abierto { transform: none; }
  .filtros__cerrar, .filtros__pie { display: block; }
  .filtros__cerrar { display: inline-grid; }
  .filtros__pie { padding: 12px 18px 18px; border-top: 1px solid var(--borde); }
  .filtros__fondo { position: fixed; inset: 0; z-index: 84; background: rgba(2, 4, 12, .6); opacity: 0; pointer-events: none; transition: opacity .3s; display: block; }
  .filtros.es-abierto + .filtros__fondo { opacity: 1; pointer-events: auto; }
  .barra__filtros { display: inline-flex; }
  .ficha__grilla { grid-template-columns: 1fr; }
  .panel { position: static; }
  .zona, .contacto, .catalogo-vacio__opc { grid-template-columns: 1fr; }
  .opciones-venta { grid-template-columns: 1fr; }
  .linea-pasos { grid-template-columns: 1fr 1fr; row-gap: 28px; }
  .linea-pasos::before, .linea-pasos::after { display: none; }
  .vende-cta__in { flex-direction: column; align-items: flex-start; padding: 36px 28px; }
  .banda__in--vender { grid-template-columns: 1fr; }
  .banda__logo { display: none; }
}
@media (max-width: 640px) {
  .solo-pc { display: none; }
  .solo-cel { display: inline; }
  .cab__in { padding: 0 12px; gap: 10px; }
  .cab__publicar { height: 40px; padding: 0 14px; margin-left: 2px; }
  .logo__txt { display: none; }
  .seccion { padding: 64px 16px; }
  .hero__in { padding: calc(var(--cab) + 6px) 16px 86px; }
  .insignia { width: min(270px, 72vw); }
  .hero__tit { margin-top: 16px; }
  .hero__ctas .btn { flex: 1 1 100%; }
  .hbusca__caja { height: 58px; padding-left: 14px; border-radius: 18px; }
  .hbusca__caja .btn { padding: 0 16px; height: 44px; border-radius: 14px; }
  .areas { grid-template-columns: 1fr; }
  .area { min-height: 380px; }
  .seccion__cab--fila { flex-direction: column; align-items: flex-start; }
  .carrusel__flechas { display: none; }
  .carrusel { grid-auto-columns: 80vw; margin: -8px -16px 0; padding: 8px 16px 24px; }
  .beneficios, .pasos { grid-template-columns: 1fr; }
  .publica__in { padding: 72px 16px; }
  .linea-pasos { grid-template-columns: 1fr; }
  .linea-pasos li { flex-direction: row; text-align: left; flex-wrap: wrap; column-gap: 12px; }
  .linea-pasos li span { margin: 0; }
  .linea-pasos li small { flex-basis: 100%; padding-left: 64px; margin-top: -18px; }
  .ia__in { flex-direction: column; align-items: flex-start; padding: 28px 24px; }
  .ia__in .btn { margin-left: 0; width: 100%; }
  .vende-cta { padding: 0 12px; }
  .vende-cta__fondo { inset: 0 12px; }
  .vende-cta__in { padding: 30px 22px; }
  .vende-cta__acc, .vende-cta__acc .btn { width: 100%; }
  .pie__in { grid-template-columns: 1fr; }
  .catalogo { padding: 18px 16px 80px; }
  .barra { flex-wrap: wrap; }
  .barra__buscar { flex-basis: 100%; }
  .barra__filtros, .barra__orden { flex: 1; }
  .barra__orden select { max-width: none; width: 100%; }
  .grilla, .grilla--catalogo { grid-template-columns: 1fr; gap: 16px; }
  .ficha { padding: 16px 16px 20px; }
  .galeria__marco { margin: 0 -16px; border-radius: 0; border-left: 0; border-right: 0; }
  .galeria__flecha { display: none; }
  .panel { padding: 20px; }
  .bloque { padding: 22px 18px; }
  .form__fila, .form__fila--3, .opciones--grandes { grid-template-columns: 1fr; }
  .form--tarjeta { padding: 22px 18px; }
  .banda__in { padding: 30px 16px 38px; }
  .banda__ic { width: 52px; height: 52px; border-radius: 16px; }
  .banda__ic .ic { width: 28px; height: 28px; }
  .pag-vehiculo .chat { bottom: 92px; }
  .barra-movil { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--noche-2); border-top: 1px solid var(--borde-2); box-shadow: 0 -8px 30px rgba(0, 0, 0, .4); transform: translateY(110%); transition: transform .4s var(--curva); }
  .barra-movil.es-visible { transform: none; }
  .barra-movil > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .barra-movil small { color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .barra-movil strong { font-size: 1.2rem; font-family: var(--titulos); }
  .chat { right: 14px; bottom: 14px; }
  .chat__btn { width: 58px; height: 58px; }
  .chat__panel { position: fixed; inset: auto 8px 8px 8px; width: auto; height: min(78vh, 640px); bottom: 8px; }
  .chat.es-abierto .chat__btn { opacity: 0; pointer-events: none; }
  .chat__invita { display: none !important; }
  .visor__flecha { display: none; }
  .hero__piso { height: 30%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .revela { opacity: 1; transform: none; }
  .insignia__chispa { display: none; }
}