/* ============================================================
   Lomont Motors — Landing de vehículo
   Estilos complementarios a Tailwind (CDN)

   TEMAS
   Toda la paleta vive en variables CSS con formato "R G B"
   (sin coma) para poder usar la opacidad de Tailwind: text-plata/60.
   El tema se cambia con el atributo data-tema en <html>:
     data-tema="claro"   → fondo blanco y grises  (por defecto)
     data-tema="oscuro"  → fondo negro grafito

   Paleta de marca: Negro Grafito #0D1117 · Azul Acero #1C232D
                    Dorado Lomont #D4AF37 · Plata #C0C6CC · Blanco #F2F2F2
   ============================================================ */

/* ---------------------------------------------------------- TEMA CLARO (base) */
:root{
  --c-fondo:      255 255 255;   /* fondo de página            */
  --c-panel:      243 245 247;   /* secciones y tarjetas        */
  --c-panel2:     233 237 241;   /* nivel elevado               */
  --c-texto:       15  21  30;   /* texto principal             */
  --c-suave:       82  92 105;   /* texto secundario            */
  --c-borde:       18  26  38;   /* bordes y separadores        */
  --c-oro:        212 175  55;   /* dorado de marca (rellenos)  */
  --c-oro-claro:  226 190  90;
  --c-oro-txt:    138 106  12;   /* dorado legible sobre claro  */
  --c-tinta:       13  17  23;   /* siempre oscuro (sobre oro)  */

  --sombra-1: 0 1px 2px rgb(16 24 40 / .05), 0 10px 28px -16px rgb(16 24 40 / .22);
  --sombra-2: 0 2px 6px rgb(16 24 40 / .06), 0 22px 48px -24px rgb(16 24 40 / .28);
}

/* ---------------------------------------------------------------- TEMA OSCURO */
:root[data-tema="oscuro"]{
  --c-fondo:       13  17  23;
  --c-panel:       28  35  45;
  --c-panel2:      38  48  60;
  --c-texto:      242 242 242;
  --c-suave:      192 198 204;
  --c-borde:      255 255 255;
  --c-oro:        212 175  55;
  --c-oro-claro:  232 199 102;
  --c-oro-txt:    212 175  55;
  --c-tinta:       13  17  23;

  --sombra-1: none;
  --sombra-2: 0 24px 60px -34px rgb(0 0 0 / .9);
}

html{ scroll-behavior:smooth; }
body{ overflow-x:hidden; }
@media (max-width:1023px){ body{ padding-bottom:76px; } } /* espacio para la barra fija móvil */

/* Pesos de la familia display (Saira Condensed) ---------------------------- */
.font-700{ font-weight:700; }
.font-800{ font-weight:800; }

/* Logotipo según el tema --------------------------------------------------- */
.logo-claro{ display:none; }
:root[data-tema="claro"] .logo-oscuro{ display:none; }
:root[data-tema="claro"] .logo-claro{ display:block; }

/* Encabezado --------------------------------------------------------------- */
#site-header{ background:transparent; }
#site-header.compacto{
  background:rgb(var(--c-fondo) / .9);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgb(var(--c-borde) / .08);
  box-shadow:var(--sombra-1);
}

.nav-link{
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgb(var(--c-suave) / .9);
}
.nav-link:hover{ color:rgb(var(--c-oro-txt)); }

.mobile-link{
  padding:.85rem .25rem;
  font-size:.95rem;
  font-weight:600;
  color:rgb(var(--c-suave) / .95);
  border-bottom:1px solid rgb(var(--c-borde) / .07);
}
.mobile-link:hover{ color:rgb(var(--c-oro-txt)); }

/* Botón de cambio de tema -------------------------------------------------- */
.btn-tema{
  width:2.75rem; height:2.75rem;
  border-radius:9999px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgb(var(--c-borde) / .14);
  color:rgb(var(--c-suave));
}
.btn-tema:hover{ color:rgb(var(--c-oro-txt)); border-color:rgb(var(--c-oro) / .5); }
.icono-luna{ display:none; }
:root[data-tema="claro"] .icono-sol{ display:none; }
:root[data-tema="claro"] .icono-luna{ display:block; }

/* Resplandor del hero ------------------------------------------------------ */
.hero-glow{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(60rem 34rem at 78% -8%, rgb(var(--c-oro) / .10), transparent 62%),
    radial-gradient(48rem 28rem at 6% 24%, rgb(var(--c-panel) / .9), transparent 65%);
}
:root[data-tema="oscuro"] .hero-glow{
  background:
    radial-gradient(60rem 34rem at 78% -8%, rgb(var(--c-oro) / .14), transparent 62%),
    radial-gradient(48rem 28rem at 6% 24%, rgb(var(--c-panel) / .9), transparent 65%);
}

/* Superficies -------------------------------------------------------------- */
.seccion-alterna{
  background:rgb(var(--c-panel) / .75);
  border-top:1px solid rgb(var(--c-borde) / .08);
  border-bottom:1px solid rgb(var(--c-borde) / .08);
}
:root[data-tema="oscuro"] .seccion-alterna{ background:rgb(var(--c-panel) / .4); }

/* En tema claro los paneles son blancos y las secciones grises: eso da
   profundidad sin recurrir a más color. En oscuro se invierte la lógica.     */
.panel-suave{
  background:rgb(var(--c-fondo));
  border:1px solid rgb(var(--c-borde) / .09);
  box-shadow:var(--sombra-1);
}
:root[data-tema="oscuro"] .panel-suave{ background:rgb(var(--c-panel) / .6); }

/* Banda gris del bloque principal (solo en tema claro) */
.banda-hero{ background:linear-gradient(180deg, rgb(var(--c-panel2)) 0%, rgb(var(--c-panel)) 55%, rgb(var(--c-fondo)) 100%); }
:root[data-tema="oscuro"] .banda-hero{ background:transparent; }

/* Caja de resultado del simulador: gris sobre panel blanco, oscura en tema oscuro */
.caja-resultado{ background:rgb(var(--c-panel)); border:1px solid rgb(var(--c-oro) / .35); }
:root[data-tema="oscuro"] .caja-resultado{ background:rgb(var(--c-fondo) / .85); border-color:rgb(var(--c-oro) / .3); }

/* Marco de la galería */
.marco-galeria{
  border:1px solid rgb(var(--c-borde) / .1);
  box-shadow:var(--sombra-2);
}

.tarjeta-cta{
  background:linear-gradient(180deg, rgb(var(--c-panel)), rgb(var(--c-fondo)));
  border:1px solid rgb(var(--c-oro) / .3);
  box-shadow:var(--sombra-2);
}

/* Títulos ------------------------------------------------------------------ */
.titulo-seccion{
  position:relative;
  font-family:"Saira Condensed", Inter, sans-serif;
  font-weight:700;
  font-size:clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  line-height:1.05;
  text-transform:uppercase;
  letter-spacing:.01em;
  padding-bottom:.85rem;
}
.titulo-seccion::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width:64px; height:3px;
  background:linear-gradient(90deg, rgb(var(--c-oro)), rgb(var(--c-oro) / 0));
}
.titulo-centrado::after{
  left:50%; transform:translateX(-50%);
  background:linear-gradient(90deg, rgb(var(--c-oro) / 0), rgb(var(--c-oro)), rgb(var(--c-oro) / 0));
}

/* Acento dorado del título: color plano, no degradado.
   En claro usa el dorado profundo (4.2:1 sobre la banda gris); en oscuro,
   el dorado de marca.                                                       */
.titulo-acento{ color:rgb(var(--c-oro-txt)); }

/* Insignias ---------------------------------------------------------------- */
.badge-oro{
  display:inline-flex; align-items:center;
  border-radius:9999px;
  background:rgb(var(--c-oro)); color:rgb(var(--c-tinta));
  padding:.3rem .8rem;
  font-size:.68rem; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase;
}
.badge-linea{
  display:inline-flex; align-items:center;
  border-radius:9999px;
  border:1px solid rgb(var(--c-oro) / .45);
  color:rgb(var(--c-oro-txt));
  padding:.3rem .8rem;
  font-size:.68rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
}

/* Botones ------------------------------------------------------------------ */
.btn-primario,.btn-secundario,.btn-terciario{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  border-radius:9999px;
  padding:.85rem 1.4rem;
  font-size:.875rem; font-weight:700;
  cursor:pointer;
}
.btn-primario{ background:rgb(var(--c-oro)); color:rgb(var(--c-tinta)); }
.btn-primario:hover{ background:rgb(var(--c-oro-claro)); }
.btn-secundario{ border:1px solid rgb(var(--c-oro) / .5); color:rgb(var(--c-oro-txt)); }
.btn-secundario:hover{ background:rgb(var(--c-oro) / .1); border-color:rgb(var(--c-oro)); }
.btn-terciario{ border:1px solid rgb(var(--c-borde) / .16); color:rgb(var(--c-suave)); }
.btn-terciario:hover{ background:rgb(var(--c-borde) / .05); color:rgb(var(--c-texto)); }

/* Variante alta: se usa en la tarjeta de contacto, que estira su altura para
   igualar el marco de la galería.                                            */
.btn-alto{ padding-top:1.05rem; padding-bottom:1.05rem; }

/* Galería ------------------------------------------------------------------ */
.gallery-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:20;
  width:2.75rem; height:2.75rem;
  border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
  background:rgb(var(--c-fondo) / .8);
  border:1px solid rgb(var(--c-borde) / .14);
  color:rgb(var(--c-suave));
  backdrop-filter:blur(6px);
  box-shadow:var(--sombra-1);
}
.gallery-arrow:hover{ color:rgb(var(--c-oro-txt)); border-color:rgb(var(--c-oro) / .55); background:rgb(var(--c-fondo) / .95); }

/* Galería: las fotos de las unidades son verticales (tomadas con teléfono).
   El marco es fijo y la foto se muestra COMPLETA, con una copia desenfocada
   de ella misma rellenando los costados. Así ninguna orientación se recorta. */
#gallery-stage{ aspect-ratio:4/5; }
@media (min-width:640px){ #gallery-stage{ aspect-ratio:4/3; } }

#gallery-stage .foto{
  position:absolute; inset:0; z-index:1;
  width:100%; height:100%;
  object-fit:contain;
}
#gallery-stage .telon{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter:blur(32px) saturate(1.25) brightness(.8);
  transform:scale(1.18);
}

.thumb{
  position:relative; flex:0 0 auto;
  width:5rem; height:5rem;   /* cuadradas: sirven para foto vertical y horizontal */
  border-radius:.6rem; overflow:hidden;
  border:2px solid transparent;
  opacity:.6;
  background:rgb(var(--c-panel));
}
.thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb:hover{ opacity:.85; }
.thumb.activo{ opacity:1; border-color:rgb(var(--c-oro)); }

/* Marco “foto pendiente” --------------------------------------------------- */
.foto-pendiente{
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
  background:
    repeating-linear-gradient(135deg, rgb(var(--c-borde) / .035) 0 12px, transparent 12px 24px),
    linear-gradient(160deg, rgb(var(--c-panel)), rgb(var(--c-panel2)));
  color:rgb(var(--c-suave) / .65);
  text-align:center; padding:1rem;
}
.foto-pendiente img{ width:auto !important; height:3.5rem !important; object-fit:contain !important; opacity:.35; }
.foto-pendiente span{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; }
.thumb .foto-pendiente img{ height:1.5rem !important; }
.thumb .foto-pendiente span{ font-size:.5rem; letter-spacing:.08em; }

/* Barra de desplazamiento fina --------------------------------------------- */
.scrollbar-fino::-webkit-scrollbar{ height:6px; }
.scrollbar-fino::-webkit-scrollbar-track{ background:rgb(var(--c-borde) / .06); border-radius:9999px; }
.scrollbar-fino::-webkit-scrollbar-thumb{ background:rgb(var(--c-oro) / .5); border-radius:9999px; }
.scrollbar-fino::-webkit-scrollbar-thumb:hover{ background:rgb(var(--c-oro)); }

/* Datos del vehículo ------------------------------------------------------- */
.dato{ display:flex; align-items:flex-start; gap:.85rem; }
.dato-icono{
  flex:0 0 auto;
  width:2.9rem; height:2.9rem;
  border-radius:.75rem;
  display:flex; align-items:center; justify-content:center;
  background:rgb(var(--c-oro) / .12);
  border:1px solid rgb(var(--c-oro) / .28);
  color:rgb(var(--c-oro-txt));
}
.dato-valor{ font-weight:700; font-size:1.02rem; line-height:1.2; }
.dato-etiqueta{ font-size:.75rem; color:rgb(var(--c-suave) / .8); margin-top:.15rem; }

/* Acordeones --------------------------------------------------------------- */
.acordeon{
  border:1px solid rgb(var(--c-borde) / .1);
  border-radius:.9rem;
  background:rgb(var(--c-panel) / .8);
  overflow:hidden;
}
.acordeon.abierto{ border-color:rgb(var(--c-oro) / .4); box-shadow:var(--sombra-1); background:rgb(var(--c-fondo)); }
:root[data-tema="oscuro"] .acordeon{ background:rgb(var(--c-fondo) / .55); }
:root[data-tema="oscuro"] .acordeon.abierto{ background:rgb(var(--c-fondo) / .7); }
.acordeon-boton{
  width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.05rem 1.25rem;
  text-align:left;
  font-weight:600;
  color:rgb(var(--c-texto));
}
.acordeon-boton:hover{ color:rgb(var(--c-oro-txt)); }
.acordeon-flecha{ flex:0 0 auto; color:rgb(var(--c-suave) / .8); }
.acordeon.abierto .acordeon-flecha{ transform:rotate(180deg); color:rgb(var(--c-oro-txt)); }
.acordeon-panel{
  display:grid; grid-template-rows:0fr;
}
.acordeon.abierto .acordeon-panel{ grid-template-rows:1fr; }
.acordeon-panel > div{ overflow:hidden; }
.acordeon-cuerpo{ padding:0 1.25rem 1.25rem; }

.lista-equipo{ display:grid; gap:.6rem .5rem; }
@media (min-width:640px){ .lista-equipo{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.lista-equipo li{
  display:flex; align-items:flex-start; gap:.55rem;
  font-size:.9rem; color:rgb(var(--c-suave));
}
.lista-equipo li::before{
  content:"";
  flex:0 0 auto; margin-top:.45rem;
  width:.4rem; height:.4rem; border-radius:9999px;
  background:rgb(var(--c-oro));
}
.par-dato{ border-bottom:1px solid rgb(var(--c-borde) / .09); padding-bottom:.5rem; }
.par-dato dt{ font-size:.72rem; color:rgb(var(--c-suave) / .8); }
.par-dato dd{ font-weight:600; margin-top:.15rem; }

/* Cierre de la descripción: la llamada a la acción del cliente, un escalón
   por encima del cuerpo de texto.                                           */
.cierre-descripcion{
  margin-top:1.75rem;
  padding-left:1.1rem;
  border-left:3px solid rgb(var(--c-oro));
  font-size:1.2rem;
  line-height:1.5;
  color:rgb(var(--c-suave));
}
.cierre-descripcion strong{
  display:block;
  font-family:"Saira Condensed", Inter, sans-serif;
  font-size:1.65rem;
  font-weight:700;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:rgb(var(--c-texto));
  margin-bottom:.2rem;
}

/* Formularios -------------------------------------------------------------- */
.etiqueta{
  display:block;
  margin-bottom:.4rem;
  font-size:.78rem; font-weight:600;
  color:rgb(var(--c-suave));
}
.campo{
  width:100%;
  border-radius:.7rem;
  border:1px solid rgb(var(--c-borde) / .14);
  background:rgb(var(--c-fondo) / .85);
  padding:.75rem 1rem;
  font-size:.9rem;
  color:rgb(var(--c-texto));
}
.campo::placeholder{ color:rgb(var(--c-suave) / .55); }
.campo:focus{
  outline:none;
  border-color:rgb(var(--c-oro) / .7);
  box-shadow:0 0 0 3px rgb(var(--c-oro) / .16);
}
.campo.error{ border-color:rgb(220 38 38 / .7); }
select.campo{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23525C69' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .9rem center;
  background-size:1.05rem;
  padding-right:2.5rem;
}
:root[data-tema="oscuro"] select.campo{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23C0C6CC' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
:root[data-tema="oscuro"] input[type="date"].campo::-webkit-calendar-picker-indicator{ filter:invert(.75); cursor:pointer; }

.chip-enganche{
  border-radius:9999px;
  border:1px solid rgb(var(--c-borde) / .16);
  padding:.1rem .55rem;
  font-size:.7rem; font-weight:600;
  color:rgb(var(--c-suave));
}
.chip-enganche:hover{ border-color:rgb(var(--c-oro) / .6); color:rgb(var(--c-oro-txt)); }

/* Estados de los formularios ---------------------------------------------- */
.estado-aviso{ font-size:.875rem; border-radius:.5rem; padding:.75rem 1rem; border:1px solid; }
.estado-ok{    background:rgb(22 163 74 / .1);  color:#15803D; border-color:rgb(22 163 74 / .35); }
.estado-error{ background:rgb(220 38 38 / .08); color:#B91C1C; border-color:rgb(220 38 38 / .3); }
:root[data-tema="oscuro"] .estado-ok{    color:#7EE2A8; }
:root[data-tema="oscuro"] .estado-error{ color:#FCA5A5; }

/* Tarjetas de beneficios y pasos ------------------------------------------- */
.tarjeta{
  border-radius:1rem;
  border:1px solid rgb(var(--c-borde) / .1);
  background:rgb(var(--c-fondo));
  box-shadow:var(--sombra-1);
  padding:1.6rem;
}
:root[data-tema="oscuro"] .tarjeta{
  background:linear-gradient(160deg, rgb(var(--c-panel2) / .55), rgb(var(--c-fondo) / .55));
}
.tarjeta:hover{ border-color:rgb(var(--c-oro) / .45); }
.tarjeta-icono{
  width:3rem; height:3rem;
  border-radius:.8rem;
  display:flex; align-items:center; justify-content:center;
  background:rgb(var(--c-oro) / .13);
  border:1px solid rgb(var(--c-oro) / .3);
  color:rgb(var(--c-oro-txt));
  margin-bottom:1rem;
}
.paso-numero{
  font-family:"Saira Condensed", Inter, sans-serif;
  font-size:2.75rem; font-weight:800; line-height:1;
  color:rgb(var(--c-oro-txt));
}

.icono-contacto{
  flex:0 0 auto;
  width:2.75rem; height:2.75rem;
  border-radius:.75rem;
  display:flex; align-items:center; justify-content:center;
  background:rgb(var(--c-oro) / .12);
  border:1px solid rgb(var(--c-oro) / .3);
  color:rgb(var(--c-oro-txt));
}

.social{
  width:2.25rem; height:2.25rem;
  border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgb(var(--c-borde) / .16);
  color:rgb(var(--c-suave));
}
.social:hover{ color:rgb(var(--c-oro-txt)); border-color:rgb(var(--c-oro) / .55); }

/* Lightbox ----------------------------------------------------------------- */
#lightbox.abierto{ display:flex; }

/* El visor es oscuro en los dos temas: es lo que hace que la foto resalte.
   Con el fondo claro la página se transparentaba y la imagen se lavaba.     */
#lightbox{ background:rgb(13 17 23 / .93); backdrop-filter:blur(4px); }
#lightbox-contenido{ position:relative; background:rgb(13 17 23 / .55); }

/* Controles siempre claros, porque van sobre el velo oscuro. */
#lightbox .gallery-arrow,
#lightbox #lightbox-close{
  background:rgb(13 17 23 / .6);
  border-color:rgb(255 255 255 / .25);
  color:#F2F2F2;
  box-shadow:none;
}
#lightbox .gallery-arrow:hover,
#lightbox #lightbox-close:hover{ color:#D4AF37; border-color:rgb(212 175 55 / .6); }

/* El visor usa el mismo par foto + telón que la galería; el object-fit lo
   definen las clases .foto y .telon.                                        */

/* Botón flotante ----------------------------------------------------------- */
#wa-flotante{ bottom:5.75rem; }
@media (min-width:1024px){ #wa-flotante{ bottom:1.5rem; } }

/* Footer -------------------------------------------------------------------
   Se mantiene en negro grafito en los dos temas: cierra la página, ancla la
   marca y evita que el pie se disuelva sobre el fondo blanco.               */
footer{
  --c-fondo:  13  17  23;
  --c-panel:  28  35  45;
  --c-panel2: 38  48  60;
  --c-texto: 242 242 242;
  --c-suave: 192 198 204;
  --c-borde: 255 255 255;
  --c-oro-txt: 212 175  55;
}
footer .logo-claro{ display:none !important; }
footer .logo-oscuro{ display:block !important; }

/* ============================================================================
   COMPONENTES DEL SITIO
   Todo lo anterior venía de la ficha de unidad. De aquí en adelante son
   piezas nuevas: navegación global, catálogo, bandas y páginas de contenido.
   ============================================================================ */

/* Estado activo del menú --------------------------------------------------- */
.nav-link.activo{ color:rgb(var(--c-oro-txt)); }
.mobile-link.activo{ color:rgb(var(--c-oro-txt)); }

/* Sub-navegación de la ficha de unidad ------------------------------------- */
.sub-nav{
  /* El encabezado es fijo, así que la sub-nav necesita empezar por debajo de
     él; si no, arranca escondida detrás y solo aparece al hacer scroll.      */
  margin-top:5rem;
  position:sticky; top:5rem; z-index:40;
  background:rgb(var(--c-fondo) / .92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgb(var(--c-borde) / .09);
}
@media (min-width:1024px){ .sub-nav{ top:6rem; margin-top:6rem; } }
.sub-nav-lista{
  display:flex; gap:1.5rem;
  overflow-x:auto;
  padding:.9rem 0;
  font-size:.75rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  white-space:nowrap;
}
.sub-nav-lista a{ color:rgb(var(--c-suave) / .9); }
.sub-nav-lista a:hover{ color:rgb(var(--c-oro-txt)); }

/* Portada ------------------------------------------------------------------ */
.hero-inicio{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg, rgb(var(--c-panel2)) 0%, rgb(var(--c-panel)) 60%, rgb(var(--c-fondo)) 100%);
}
.hero-titulo{
  font-family:"Saira Condensed", Inter, sans-serif;
  font-weight:800; text-transform:uppercase;
  font-size:clamp(2.5rem, 1.4rem + 4.4vw, 5rem);
  line-height:.95; letter-spacing:-.01em;
}

/* Tarjeta de unidad del catálogo ------------------------------------------- */
.tarjeta-unidad{
  display:flex; flex-direction:column;
  border-radius:1rem; overflow:hidden;
  border:1px solid rgb(var(--c-borde) / .1);
  background:rgb(var(--c-fondo));
  box-shadow:var(--sombra-1);
}
:root[data-tema="oscuro"] .tarjeta-unidad{ background:rgb(var(--c-panel) / .55); }
.tarjeta-unidad:hover{ border-color:rgb(var(--c-oro) / .45); }
.tarjeta-unidad-foto{
  position:relative; display:block;
  aspect-ratio:16/10;
  /* Blanco de respaldo por si una portada no cubre todo el marco. */
  background:#FFFFFF;
  border-bottom:1px solid rgb(var(--c-borde) / .08);
  overflow:hidden;
}
/* Con fotos reales la portada llena el marco. Va en posición absoluta para
   que sea el aspect-ratio del marco el que manda la altura: si la imagen
   quedara en el flujo, una foto vertical estiraría la tarjeta.              */
.tarjeta-unidad-foto img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center 35%;
}
.tarjeta-unidad-cuerpo{ display:flex; flex-direction:column; flex:1; padding:1.35rem; }

.dato-mini{
  display:flex; align-items:center; gap:.45rem;
  color:rgb(var(--c-suave));
}
.dato-mini svg{ flex:0 0 auto; color:rgb(var(--c-oro-txt)); }

/* Etiquetas de estatus ----------------------------------------------------- */
.etiqueta-estatus{
  position:absolute; top:.85rem; left:.85rem; z-index:2;
  border-radius:9999px;
  padding:.28rem .75rem;
  font-size:.65rem; font-weight:800;
  letter-spacing:.09em; text-transform:uppercase;
}
.etiqueta-disponible{ background:rgb(var(--c-oro)); color:rgb(var(--c-tinta)); }
.etiqueta-apartado{ background:#B45309; color:#FFF; }
.etiqueta-vendido{ background:rgb(var(--c-tinta)); color:#FFF; }

/* Filtros del catálogo ----------------------------------------------------- */
.panel-filtros{
  border-radius:1rem;
  border:1px solid rgb(var(--c-borde) / .09);
  background:rgb(var(--c-fondo));
  box-shadow:var(--sombra-1);
  padding:1.35rem;
}
:root[data-tema="oscuro"] .panel-filtros{ background:rgb(var(--c-panel) / .55); }
.contador-resultados{ font-size:.85rem; color:rgb(var(--c-suave)); }

/* Estado vacío ------------------------------------------------------------- */
.estado-vacio{
  border-radius:1rem;
  border:1px dashed rgb(var(--c-borde) / .22);
  background:rgb(var(--c-panel) / .5);
  padding:3rem 1.5rem;
  text-align:center;
}

/* Banda de llamada a la acción --------------------------------------------- */
.banda-cta{
  border-radius:1.25rem;
  border:1px solid rgb(var(--c-oro) / .3);
  background:linear-gradient(140deg, rgb(var(--c-panel2)), rgb(var(--c-panel)));
  box-shadow:var(--sombra-1);
  padding:2.5rem;
}
@media (min-width:768px){ .banda-cta{ padding:3rem; } }

/* Dos caminos (vende tu auto) ---------------------------------------------- */
.camino{
  border-radius:1rem;
  border:1px solid rgb(var(--c-borde) / .1);
  background:rgb(var(--c-fondo));
  box-shadow:var(--sombra-1);
  padding:2rem;
}
:root[data-tema="oscuro"] .camino{ background:rgb(var(--c-panel) / .55); }

/* Lista con palomita ------------------------------------------------------- */
.lista-check{ display:grid; gap:.85rem; }
.lista-check li{
  display:flex; align-items:flex-start; gap:.7rem;
  color:rgb(var(--c-suave));
}
.lista-check li::before{
  content:"";
  flex:0 0 auto; margin-top:.35rem;
  width:1.05rem; height:1.05rem; border-radius:9999px;
  background:rgb(var(--c-oro) / .18);
  border:1px solid rgb(var(--c-oro) / .45);
}

/* Notas de error bajo los campos ------------------------------------------- */
.nota-error{ margin-top:.35rem; font-size:.72rem; color:#B91C1C; }
:root[data-tema="oscuro"] .nota-error{ color:#FCA5A5; }

/* Aviso de prototipo ------------------------------------------------------- */
.aviso-prototipo{
  border-radius:.75rem;
  border:1px solid rgb(var(--c-oro) / .35);
  background:rgb(var(--c-oro) / .08);
  padding:.9rem 1.1rem;
  font-size:.8rem;
  color:rgb(var(--c-suave));
}

/* Formularios: envío ------------------------------------------------------- */
/* Trampa para bots: fuera de pantalla, no oculta con display:none para que
   los rellenadores automáticos sí la vean y caigan en ella.                  */
.campo-trampa{
  position:absolute !important;
  left:-9999px; top:auto;
  width:1px; height:1px;
  overflow:hidden;
}
.estado-info{
  background:rgb(var(--c-oro) / .1);
  color:rgb(var(--c-oro-txt));
  border-color:rgb(var(--c-oro) / .35);
}
button[disabled]{ opacity:.65; cursor:progress; }

/* Video corto de la unidad (YouTube Short, vertical 9:16) ------------------ */
.video-short{
  position:relative;
  width:100%; max-width:300px;
  margin-inline:auto;
  aspect-ratio:9/16;
  border-radius:1rem;
  overflow:hidden;
  background:#0D1117;
  border:1px solid rgb(var(--c-borde) / .1);
  box-shadow:var(--sombra-2);
}
.video-short-poster{
  position:absolute; inset:0;
  width:100%; height:100%;
  padding:0; border:0; cursor:pointer;
  background:#0D1117;
}
.video-short-poster img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
/* El botón va abajo y no al centro: los Shorts suelen traer texto grande
   justo en medio del cuadro y un play centrado lo tapa.                     */
.video-short-play{
  position:absolute; left:50%; bottom:1.1rem;
  transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.7rem 1.2rem .7rem 1rem;
  border-radius:9999px;
  background:rgb(var(--c-oro));
  color:rgb(var(--c-tinta));
  font-size:.875rem; font-weight:700;
  white-space:nowrap;
  box-shadow:0 8px 24px rgb(0 0 0 / .35);
}
.video-short-play svg{ width:1.1rem; height:1.1rem; }
.video-short-poster:hover .video-short-play{ background:rgb(var(--c-oro-claro)); }
.video-short iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}