/* =========================================================
   Autos Caribe - kit editorial suizo:
   papel blanco hueso, tipografía grande, un solo rojo,
   cuadrícula estricta, esquinas rectas, sin sombras y datos
   en mono. Fuente de verdad: el sistema de diseño "Autos Caribe"
   (tokens.json). Los nombres --ac-* se conservan para no tocar
   cada regla; solo cambian sus valores.
   Paleta: rojo #C8102E, papel #F2F0EB, tinta #111111, tinta suave #5C5A55
   ========================================================= */
:root {
    /* Colores de marca (los nombres "vino" quedan por compatibilidad: ahora son el rojo del kit) */
    --ac-vino: #C8102E;            /* rojo: precio, botón principal, Disponible. 5.17:1 sobre papel */
    --ac-vino-oscuro: #9E0C24;     /* rojo-profundo: hover y presionado */
    --ac-rojo-noche: #F04452;      /* rojo sobre bandas en tinta: 5.08:1 (el rojo normal da 3.21) */
    --ac-beige: #F2F0EB;           /* papel */
    --ac-negro: #111111;           /* tinta */
    --ac-gris: #5C5A55;            /* tinta-suave: 6.05:1 sobre papel */

    /* Superficies */
    --ac-blanco: #F2F0EB;          /* papel: fondo de todo, nunca blanco puro */
    --ac-marmol: #E6E3DC;          /* papel-2: bandas y zonas de datos */
    --ac-crema: #E6E3DC;
    --ac-arena: #D3D0CA;
    --ac-escenario: #111111;       /* banda en tinta (invertida) */
    --ac-profundo: #111111;        /* menú y pie de página */

    /* Textos y bordes */
    --ac-texto: #111111;
    --ac-texto-suave: #5C5A55;
    --ac-borde: #D3D0CA;           /* linea: filete de 1px sobre papel */
    --ac-borde-oscuro: #333230;    /* linea sobre tinta */
    --ac-reservado: #8A5A00;       /* ámbar, solo para el estado Reservado */

    /* Compatibilidad con clases anteriores */
    --ac-fondo: #F2F0EB;
    --ac-boton: #C8102E;
    --ac-boton-hover: #9E0C24;
    --ac-boton-oscuro: #111111;
    --ac-boton-oscuro-hover: #000000;
    --ac-peligro: #9E0C24;
    --ac-peligro-hover: #7A0A1C;

    /* Tipografía: display para títulos y modelos, sans para texto y controles, mono para datos */
    --ac-fuente-display: "Unbounded", "Archivo Black", system-ui, sans-serif;
    --ac-fuente-titulo: "Archivo", "Helvetica Neue", Arial, sans-serif;   /* botones, menú, etiquetas */
    --ac-fuente-texto: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --ac-fuente-dato: "IBM Plex Mono", ui-monospace, monospace;
    --ac-espaciado-titulo: -.01em;
    --ac-espaciado-etiqueta: .18em;

    /* Filetes */
    --ac-hairline: 1px;
    --ac-trazo: 2px;

    /* Curva de movimiento: una sola en todo el sitio */
    --ac-curva: cubic-bezier(.16, 1, .3, 1);

    /* Espaciado (base 8px) y formas */
    --ac-seccion: 80px;
    --ac-radio: 0;
    --ac-sombra: none;
}

/* ---------- Base ---------- */
body {
    background: var(--ac-blanco);
    color: var(--ac-texto);
    font-family: var(--ac-fuente-texto);
    font-size: 1rem;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main { flex: 1; }

h1, h2, h3, h4, h5, .titulo-serif, .navbar-brand {
    font-family: var(--ac-fuente-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ac-espaciado-titulo);
    color: var(--ac-texto);
    line-height: 1;
    overflow-wrap: break-word;
}
/* Unbounded es extendida: los tamaños bajan respecto a Barlow Condensed para que quepan */
h1 { font-size: clamp(2rem, 5vw, 4rem); font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.5rem); }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1rem; letter-spacing: .01em; }

a { color: var(--ac-texto); text-decoration: none; }
a:hover { color: var(--ac-vino); }
.text-suave { color: var(--ac-texto-suave) !important; }
.bg-crema, .bg-arena { background: var(--ac-marmol) !important; }

/* Etiqueta pequeña sobre los títulos */
.etiqueta {
    display: inline-block;
    background: none;
    color: var(--ac-vino);
    padding: 0;
    font-family: var(--ac-fuente-titulo);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: var(--ac-espaciado-etiqueta);
    text-transform: uppercase;
}

/* ---------- Botones: rectos, en mayúsculas ---------- */
.btn {
    border-radius: 0;
    font-family: var(--ac-fuente-titulo);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: .7rem 1.5rem;
}
.btn-lg { padding: .95rem 2rem; font-size: 1.05rem; }
.btn-sm { padding: .45rem 1rem; font-size: .85rem; letter-spacing: .1em; }

.btn-primary {
    --bs-btn-bg: var(--ac-vino);
    --bs-btn-border-color: var(--ac-vino);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--ac-negro);
    --bs-btn-hover-border-color: var(--ac-negro);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ac-negro);
    --bs-btn-active-border-color: var(--ac-negro);
    --bs-btn-disabled-bg: var(--ac-arena);
    --bs-btn-disabled-border-color: var(--ac-arena);
    --bs-btn-focus-shadow-rgb: 158, 63, 70;
}
.btn-dark {
    --bs-btn-bg: var(--ac-negro);
    --bs-btn-border-color: var(--ac-negro);
    --bs-btn-hover-bg: var(--ac-vino);
    --bs-btn-hover-border-color: var(--ac-vino);
    --bs-btn-active-bg: var(--ac-vino);
    --bs-btn-focus-shadow-rgb: 38, 38, 38;
}
/* Secundario = contorno fino, sin relleno */
.btn-secondary, .btn-light {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--ac-negro);
    --bs-btn-color: var(--ac-negro);
    --bs-btn-hover-bg: var(--ac-negro);
    --bs-btn-hover-border-color: var(--ac-negro);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ac-negro);
    --bs-btn-active-color: #fff;
}
.btn-outline-primary {
    --bs-btn-color: var(--ac-vino);
    --bs-btn-border-color: var(--ac-vino);
    --bs-btn-hover-bg: var(--ac-vino);
    --bs-btn-hover-border-color: var(--ac-vino);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ac-vino-oscuro);
    --bs-btn-active-border-color: var(--ac-vino-oscuro);
}
.btn-danger {
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--ac-vino-oscuro);
    --bs-btn-color: var(--ac-vino-oscuro);
    --bs-btn-hover-bg: var(--ac-vino-oscuro);
    --bs-btn-hover-border-color: var(--ac-vino-oscuro);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--ac-vino-oscuro);
}
.btn-outline-danger {
    --bs-btn-color: var(--ac-vino-oscuro);
    --bs-btn-border-color: var(--ac-vino-oscuro);
    --bs-btn-hover-bg: var(--ac-vino-oscuro);
    --bs-btn-hover-border-color: var(--ac-vino-oscuro);
}
/* Botones sobre escenario oscuro */
.escenario .btn-secondary, .hero .btn-secondary, .hero-slide .btn-secondary,
.ac-navbar .btn-secondary, .page-header .btn-secondary {
    --bs-btn-border-color: #FFFFFF;
    --bs-btn-color: #FFFFFF;
    --bs-btn-hover-bg: #FFFFFF;
    --bs-btn-hover-border-color: #FFFFFF;
    --bs-btn-hover-color: var(--ac-negro);
}

/* ---------- Formularios ---------- */
.form-control, .form-select {
    border-radius: 0;
    border-color: var(--ac-borde);
    background-color: var(--ac-blanco);
    padding: .65rem .9rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--ac-vino);
    box-shadow: none;
    outline: 1px solid var(--ac-vino);
}
/* Línea vino que crece de izquierda a derecha al enfocar.
   Es la animación para los campos donde no se puede dibujar el cursor
   propio: número, correo, fecha, hora, archivo y los desplegables. */
.form-control {
    background-image: linear-gradient(var(--ac-vino), var(--ac-vino));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 2px;
    transition: background-size .4s cubic-bezier(.22, 1, .36, 1),
                border-color .25s ease;
}
.form-control:focus { background-size: 100% 2px; }
.form-select {
    background-image: var(--bs-form-select-bg-img), linear-gradient(var(--ac-vino), var(--ac-vino));
    background-repeat: no-repeat, no-repeat;
    background-position: right .75rem center, 0 100%;
    background-size: 16px 12px, 0% 2px;
    transition: background-size .4s cubic-bezier(.22, 1, .36, 1),
                border-color .25s ease;
}
.form-select:focus { background-size: 16px 12px, 100% 2px; }
@media (prefers-reduced-motion: reduce) {
    .form-control, .form-select { transition: none; }
}
.form-check-input { border-radius: 0; border-color: var(--ac-borde); }
.form-check-input:checked { background-color: var(--ac-vino); border-color: var(--ac-vino); }
.form-label {
    font-family: var(--ac-fuente-titulo);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-weight: 600;
    font-size: .85rem;
    color: var(--ac-texto-suave);
}

/* ---------- Menú superior (oscuro) ---------- */
.ac-navbar {
    background: var(--ac-profundo);
    border-bottom: 1px solid var(--ac-borde-oscuro);
}
.ac-navbar .navbar-brand {
    color: #FFFFFF;
    font-size: 1.4rem;
    letter-spacing: .1em;
}
.ac-navbar .navbar-brand .acento { color: var(--ac-vino); }

/* ---------- Entrada animada del logo ----------
   El auto llega desde la izquierda, el arco rojo se dibuja de izquierda
   a derecha y el nombre aparece después, como si se escribiera. */
.marca-figura {
    position: relative;
    display: inline-block;
    line-height: 0;
    flex: none;
}
.marca-figura img { display: block; }
.marca-arco {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.marca-texto { display: inline-block; }

@keyframes marcaCarro {
    from { opacity: 0; transform: translateX(-38px) scaleX(1.1); filter: blur(4px); }
    65%  { opacity: 1; filter: blur(0); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes marcaArco {
    from { opacity: 0; clip-path: inset(0 100% 0 0); }
    to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes marcaTexto {
    from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-12px); }
    to   { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
}
.marca-carro { animation: marcaCarro .9s cubic-bezier(.22, 1, .36, 1) both; }
.marca-arco  { animation: marcaArco .75s cubic-bezier(.22, 1, .36, 1) .35s both; }
.marca-texto { animation: marcaTexto .7s cubic-bezier(.22, 1, .36, 1) .6s both; }

@media (prefers-reduced-motion: reduce) {
    .marca-carro, .marca-arco, .marca-texto { animation: none; }
}
.ac-navbar .nav-link {
    color: #FFFFFF;
    font-family: var(--ac-fuente-titulo);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
    font-size: .95rem;
}
.ac-navbar .nav-link:hover, .ac-navbar .nav-link.active { color: var(--ac-vino); }
.ac-navbar .navbar-toggler { border-color: var(--ac-borde-oscuro); border-radius: 0; }
.ac-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.avatar { width: 34px; height: 34px; object-fit: cover; border-radius: 0; border: 1px solid var(--ac-borde-oscuro); }
.avatar-lg { width: 150px; height: 150px; object-fit: cover; border-radius: 0; border: 1px solid var(--ac-borde); }
.dropdown-menu {
    border-radius: 0;
    border-color: var(--ac-borde-oscuro);
    background: var(--ac-profundo);
    padding: .25rem 0;
}
.dropdown-item {
    color: #FFFFFF;
    font-family: var(--ac-fuente-titulo);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .95rem;
}
.dropdown-item:hover, .dropdown-item:focus { background: var(--ac-vino); color: #fff; }
.dropdown-item:active { background: var(--ac-vino); }
.dropdown-divider { border-color: var(--ac-borde-oscuro); }

/* ---------- Encabezado de página (escenario oscuro) ---------- */
.page-header {
    background: var(--ac-escenario);
    border-bottom: none;
    padding: 4rem 0;
    color: #FFFFFF;
}
.page-header h1 { margin: 0; color: #FFFFFF; font-size: clamp(2.2rem, 5vw, 3.5rem); }
.page-header .text-suave { color: rgba(255, 255, 255, .7) !important; }

/* ---------- Portada ---------- */
.hero {
    background: var(--ac-escenario);
    color: #FFFFFF;
    border-bottom: none;
    padding: 5rem 0;
}
.hero h1 { color: #FFFFFF; }
.hero .text-suave, .hero .lead { color: rgba(255, 255, 255, .72) !important; }
.hero img { border-radius: 0; box-shadow: none; }
.hero img.logo-portada { max-width: 520px; margin: 0 auto; display: block; }


/* =========================================================
   Portada cinematográfica (Swiper): pantalla completa,
   zoom lento de la imagen, texto que entra por capas y
   líneas indicadoras con botón de pausa.
   ========================================================= */
.hero-cine { background: var(--ac-escenario); }
.hero-swiper {
    height: calc(100vh - 74px);
    min-height: 560px;
    max-height: 900px;
    width: 100%;
}
/* Si Swiper no cargara, solo se ve la primera diapositiva */
.hero-swiper:not(.swiper-initialized) .swiper-slide + .swiper-slide { display: none; }

.hero-slide {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: var(--ac-escenario);
}
.hero-fondo {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.02);
    transition: transform 8s linear;
}
.hero-fondo-marca {
    background: radial-gradient(circle at 70% 40%, #3A3A3A 0%, #262626 45%, #1A1A1A 100%);
}
/* Zoom lento mientras la diapositiva está activa (efecto Ken Burns) */
.swiper-slide-active .hero-fondo { transform: scale(1.12); }

.hero-velo {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(26, 26, 26, .94) 0%, rgba(26, 26, 26, .78) 45%, rgba(26, 26, 26, .35) 100%);
}
.hero-contenido {
    position: relative;
    z-index: 2;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    padding-top: 3rem;
    padding-bottom: 5.5rem;
}
.hero-texto-bloque { max-width: 640px; }
.hero-eyebrow { color: var(--ac-vino); display: block; margin-bottom: 1rem; }
.hero-titulo {
    color: #FFFFFF;
    font-size: clamp(2.4rem, 5.6vw, 5rem);
    line-height: .95;
    margin-bottom: 1.2rem;
}
.hero-texto {
    color: rgba(255, 255, 255, .78);
    font-size: 1.05rem;
    letter-spacing: .04em;
    margin-bottom: 1.75rem;
    text-transform: uppercase;
}
.hero-slide .logo-portada { max-width: 380px; margin-left: auto; }

/* El texto entra por capas cuando la diapositiva se activa */
.hero-slide .hero-eyebrow,
.hero-slide .hero-titulo,
.hero-slide .hero-texto,
.hero-slide .hero-acciones { opacity: 0; transform: translateY(32px); }
.swiper-slide-active .hero-eyebrow,
.swiper-slide-active .hero-titulo,
.swiper-slide-active .hero-texto,
.swiper-slide-active .hero-acciones {
    animation: heroEntra .9s cubic-bezier(.22, .61, .36, 1) forwards;
}
.swiper-slide-active .hero-titulo { animation-delay: .12s; }
.swiper-slide-active .hero-texto { animation-delay: .24s; }
.swiper-slide-active .hero-acciones { animation-delay: .36s; }
.swiper-slide-active .hero-acciones + .hero-acciones { animation-delay: .46s; }
@keyframes heroEntra {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: none; }
}

/* Controles abajo a la derecha, como en las páginas de autos deportivos */
.hero-controles {
    position: absolute;
    right: clamp(1rem, 5vw, 4rem);
    bottom: clamp(1.5rem, 5vh, 3rem);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.hero-paginacion { display: flex; gap: 1.2rem; }
.hero-paginacion .swiper-pagination-bullet {
    width: 46px; height: 2px;
    border-radius: 0;
    background: rgba(255, 255, 255, .4);
    opacity: 1;
    margin: 0 !important;
    transition: background .3s ease;
    cursor: pointer;
}
.hero-paginacion .swiper-pagination-bullet-active { background: #FFFFFF; }
.hero-pausa {
    width: 46px; height: 46px;
    background: none;
    border: 1px solid rgba(255, 255, 255, .55);
    color: #FFFFFF;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .25s ease, color .25s ease;
    /* Silueta hexagonal, como el control de las páginas de superdeportivos */
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.hero-pausa:hover { background: #FFFFFF; color: var(--ac-negro); }

@media (max-width: 991.98px) {
    .hero-swiper { height: auto; min-height: 520px; }
    .hero-contenido { padding-top: 4rem; padding-bottom: 6rem; }
    .hero-velo { background: linear-gradient(180deg, rgba(26, 26, 26, .92) 30%, rgba(26, 26, 26, .72) 100%); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-fondo, .swiper-slide-active .hero-fondo { transition: none; transform: none; }
    .hero-slide .hero-eyebrow, .hero-slide .hero-titulo,
    .hero-slide .hero-texto, .hero-slide .hero-acciones {
        opacity: 1; transform: none; animation: none;
    }
}

/* ---------- Portada magnética (tira de fotos que sigue al mouse) ----------
   El texto va en blanco con "mix-blend-mode: difference": sobre el fondo
   claro se ve negro y sobre las fotos se invierte solo. */
.iman {
    position: relative;
    min-height: 88vh;
    overflow: hidden;
    background: var(--ac-beige);
    color: #FFFFFF;
}
.iman-encabezado {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.2rem;
    z-index: 50;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    font-family: var(--ac-fuente-titulo);
    font-size: .8rem;
    letter-spacing: var(--ac-espaciado-etiqueta);
    text-transform: uppercase;
    mix-blend-mode: difference;
    pointer-events: none;
}

/* Tira horizontal de fotos */
.iman-tira {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 180px;
    z-index: 20;
    will-change: transform;
}
.iman-pista {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    will-change: transform;
}
.iman-pieza {
    flex: none;
    display: block;
    width: 180px;
    height: 180px;
    overflow: hidden;
    background: var(--ac-blanco);
    border: 1px solid var(--ac-borde);
}
.iman-pieza img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Texto de la portada */
.iman-contenido {
    position: relative;
    z-index: 30;
    min-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12rem 1.5rem 9rem;
    text-align: center;
    mix-blend-mode: difference;
    pointer-events: none;
}
.iman-titulo {
    font-size: clamp(3.2rem, 13vw, 10rem);
    line-height: .86;
    color: inherit;
    margin: 0 0 2.5rem;
}
.iman-titulo .estela { display: block; }
.iman-fila {
    width: 100%;
    max-width: 1140px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    text-align: left;
}
.iman-lema {
    font-family: var(--ac-fuente-titulo);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: 1.7rem;
    line-height: 1.1;
    max-width: 280px;
}
.iman-parrafos {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    font-size: .82rem;
    line-height: 1.7;
}
.iman-columna { max-width: 270px; }
.estela { will-change: transform; }

/* Botones reales: fuera de la mezcla para que conserven su color */
.iman-acciones {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4.5rem;
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0 1rem;
}
.iman-pie {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.5rem;
    z-index: 40;
    margin: 0;
    text-align: center;
    font-size: .72rem;
    letter-spacing: .06em;
    mix-blend-mode: difference;
    pointer-events: none;
}

/* En celular la tira no sigue al mouse, así que el texto va debajo
   de las fotos y los botones pasan a la fila normal de la página. */
@media (max-width: 767.98px) {
    .iman { min-height: 0; }
    .iman-tira { height: 140px; }
    .iman-pieza { width: 140px; height: 140px; }
    .iman-contenido { min-height: 0; padding: 15rem 1.2rem 2rem; }
    .iman-titulo { margin-bottom: 1.8rem; }
    .iman-fila { justify-content: center; gap: 1.4rem; }
    .iman-lema { font-size: 1.35rem; max-width: none; }
    .iman-parrafos { gap: 1.4rem; }
    .iman-acciones {
        position: static;
        flex-direction: column;
        align-items: stretch;
        gap: .7rem;
        padding: 0 1.2rem 2.5rem;
    }
    .iman-acciones .llamanos { justify-content: center; }
    .iman-pie { display: none; }
}

/* ---------- Tarjetas: sin redondeo ni sombra ---------- */
.card {
    border: 1px solid var(--ac-borde);
    border-radius: 0;
    background: var(--ac-blanco);
    box-shadow: none;
}
.card-header {
    background: var(--ac-marmol);
    border-bottom-color: var(--ac-borde);
    font-family: var(--ac-fuente-titulo);
    text-transform: uppercase;
    letter-spacing: .1em;
}
.card-auto { overflow: hidden; transition: border-color .2s ease; }
.card-auto:hover { border-color: var(--ac-negro); }
.card-auto .foto {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    width: 100%;
    background: var(--ac-marmol);
    /* .25s y no .4s: un efecto de puntero que se ve decenas de veces al día tiene que
       responder, no lucirse. La curva es la misma que usa todo el sitio. */
    transition: transform .25s var(--ac-curva);
}
@media (hover: hover) and (pointer: fine) {
    .card-auto:hover .foto { transform: scale(1.04); }
}
/* Inclinación 3D al pasar el mouse (equivalente a TiltCard).
   La tarjeta gira siguiendo el mouse; el giro lo calcula rutinas.js. */
.inclina {
    will-change: transform;
    transition: box-shadow .35s ease;
}
.inclina.inclinando {
    box-shadow: 0 18px 40px rgba(38, 38, 38, .18);
    z-index: 2;
}

.card-auto .precio {
    font-family: var(--ac-fuente-titulo);
    font-weight: 600;
    color: var(--ac-vino);
    font-size: 1.6rem;
    letter-spacing: .03em;
}
.card-auto .card-title { font-size: 1.45rem; margin-bottom: .35rem; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--ac-marmol);
    border-radius: 0;
    padding: .2rem .6rem;
    font-size: .8rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ac-texto-suave);
}
.estado-vendido {
    position: absolute; top: 0; left: 0;
    background: var(--ac-negro);
    color: #FFFFFF;
    border-radius: 0;
    padding: .35rem .8rem;
    font-family: var(--ac-fuente-titulo);
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ---------- Cifras e íconos ---------- */
.stat { text-align: center; padding: 2rem 1rem; }
.stat .numero {
    font-family: var(--ac-fuente-titulo);
    font-size: 3.2rem;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--ac-vino);
    line-height: 1;
}
.stat .small, .stat .text-suave {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .78rem;
}
.icono-circulo {
    width: 56px; height: 56px;
    border-radius: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: none;
    border: 1px solid var(--ac-vino);
    color: var(--ac-vino);
    font-size: 1.3rem;
}

/* ---------- Llamado a la acción: WhatsApp ---------- */
.llamanos {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    border-radius: 0;
    background: var(--ac-vino);
    color: #FFFFFF;
    text-decoration: none;
    box-shadow: none;
    transition: background .2s ease;
}
.llamanos:hover, .llamanos:focus { background: #FFFFFF; color: var(--ac-negro); }
.llamanos-icono {
    width: 58px; flex: none;
    border-radius: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .18);
    color: inherit;
    font-size: 1.3rem;
}
/* Solo se mueve el ícono, no el recuadro */
.llamanos-icono i { display: inline-block; animation: timbre 2.6s ease-in-out infinite; }
.llamanos:hover .llamanos-icono { background: var(--ac-vino); color: #fff; }
.llamanos-texto {
    display: flex; flex-direction: column; justify-content: center;
    padding: .7rem 1.6rem .7rem 1.1rem;
    line-height: 1.1;
}
.llamanos-texto small {
    font-family: var(--ac-fuente-titulo);
    font-size: .75rem;
    letter-spacing: var(--ac-espaciado-etiqueta);
    text-transform: uppercase;
    opacity: .85;
}
.llamanos-texto strong {
    font-family: var(--ac-fuente-titulo);
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: .06em;
}
@keyframes timbre {
    0%, 62%, 100% { transform: rotate(0deg) scale(1); }
    66% { transform: rotate(-14deg) scale(1.06); }
    72% { transform: rotate(12deg) scale(1.06); }
    78% { transform: rotate(-8deg) scale(1.04); }
    84% { transform: rotate(6deg) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
    .llamanos-icono i { animation: none; }
    .card-auto:hover .foto { transform: none; }
}

/* ---------- Detalle del vehículo ---------- */
.galeria-principal {
    aspect-ratio: 16 / 10; object-fit: cover; width: 100%;
    border-radius: 0; background: var(--ac-marmol);
}
.miniatura {
    width: 96px; height: 64px; object-fit: cover;
    border-radius: 0; cursor: pointer;
    border: 1px solid var(--ac-borde); opacity: .75;
}
.miniatura:hover, .miniatura.activa { border-color: var(--ac-vino); opacity: 1; }
.tabla-caracteristicas th {
    color: var(--ac-texto-suave);
    font-family: var(--ac-fuente-titulo);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    width: 45%;
}
.tabla-caracteristicas td, .tabla-caracteristicas th {
    background: transparent;
    border-color: var(--ac-borde);
}

/* ---------- Tablas ---------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(229, 226, 219, .35);
    --bs-table-hover-bg: rgba(229, 226, 219, .6);
}
.table thead th {
    color: var(--ac-texto-suave);
    font-family: var(--ac-fuente-titulo);
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    border-bottom-color: var(--ac-negro);
}
.table td, .table th { border-color: var(--ac-borde); }
.miniatura-tabla { width: 96px; height: 60px; object-fit: cover; border-radius: 0; }

/* ---------- Estados y etiquetas ---------- */
.badge-estado {
    border-radius: 0;
    padding: .3rem .7rem;
    font-family: var(--ac-fuente-titulo);
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.estado-pendiente { background: var(--ac-arena); color: var(--ac-negro); }
.estado-confirmada { background: var(--ac-vino); color: #FFFFFF; }
.estado-atendida { background: var(--ac-marmol); color: var(--ac-gris); border: 1px solid var(--ac-borde); }
.estado-cancelada { background: var(--ac-negro); color: var(--ac-beige); }
.badge-rol {
    background: none;
    border: 1px solid var(--ac-negro);
    color: var(--ac-negro);
    border-radius: 0;
    padding: .2rem .55rem;
    font-family: var(--ac-fuente-titulo);
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.nav-pills .nav-link {
    color: var(--ac-texto);
    border-radius: 0;
    font-family: var(--ac-fuente-titulo);
    text-transform: uppercase;
    letter-spacing: .1em;
    border: 1px solid var(--ac-borde);
}
.nav-pills .nav-link.active { background: var(--ac-negro); border-color: var(--ac-negro); }

/* ---------- Experiencias ---------- */
.testimonio { position: relative; }
.testimonio::before {
    content: "\201C";
    position: absolute; top: -26px; left: 12px;
    font-family: Georgia, serif; font-size: 4rem;
    color: var(--ac-vino); opacity: .22;
    pointer-events: none;
}
/* ---------- Opiniones: dos columnas que suben y bajan solas ----------
   Equivalente a VerticalMarquee: se difumina arriba y abajo y se va
   frenando poco a poco cuando el mouse entra. */
.opiniones {
    position: relative;
    height: 520px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 120px,
                        #000 calc(100% - 120px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 120px,
                #000 calc(100% - 120px), transparent 100%);
}
.opiniones-rejilla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}
.opiniones-columna {
    display: flex;
    flex-direction: column;
    gap: 16px;
    will-change: transform;
}
.opiniones .testimonio { margin: 0; }

@media (max-width: 767.98px) {
    /* En celular se muestran en una sola columna y sin movimiento */
    .opiniones {
        height: auto;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .opiniones-rejilla { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .opiniones { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
}

.linea-tiempo { border-left: 1px solid var(--ac-borde); padding-left: 1.6rem; }
.linea-tiempo .hito { position: relative; margin-bottom: 1.8rem; }
.linea-tiempo .hito::before {
    content: "";
    position: absolute; left: -1.72rem; top: .45rem;
    width: 9px; height: 9px;
    background: var(--ac-vino);
}
.linea-tiempo .hito h6 {
    font-family: var(--ac-fuente-titulo);
    text-transform: uppercase;
    letter-spacing: .12em;
}

/* ---------- Pie de página (oscuro) ---------- */
.ac-footer {
    background: var(--ac-profundo);
    border-top: none;
    color: rgba(255, 255, 255, .7);
    padding-top: 4rem;
}
.ac-footer h5, .ac-footer h6 { color: #FFFFFF; }
.ac-footer a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.ac-footer a:hover { color: var(--ac-vino); }
.ac-footer hr { border-color: var(--ac-borde-oscuro) !important; opacity: 1; }

/* ---------- Mensajes y ventanas ---------- */
.toast { border-radius: 0; border: 1px solid var(--ac-borde); }
.toast-header {
    font-family: var(--ac-fuente-titulo);
    text-transform: uppercase;
    letter-spacing: .1em;
}
.toast-ok .toast-header { background: var(--ac-vino); color: #fff; }
.toast-error .toast-header { background: var(--ac-negro); color: #fff; }
.modal-content { border-radius: 0; border-color: var(--ac-borde); }
.modal-header { background: var(--ac-marmol); border-bottom-color: var(--ac-borde); }
.modal-title { font-family: var(--ac-fuente-titulo); text-transform: uppercase; letter-spacing: .08em; }
.alert { border-radius: 0; }
.breadcrumb {
    font-family: var(--ac-fuente-titulo);
    text-transform: uppercase;
    letter-spacing: .1em;
    font-size: .85rem;
}

.preview-img { max-height: 170px; border-radius: 0; margin-top: .5rem; }


/* =========================================================
   Animaciones: entradas suaves, sin rebotes ni brillos.
   Todo se desactiva si el sistema pide menos movimiento.
   ========================================================= */

/* Entrada de la portada (al cargar) */
.hero .etiqueta,
.hero h1,
.hero .lead,
.hero .d-flex,
.hero .llamanos,
.hero .logo-portada {
    animation: entrada .9s cubic-bezier(.22, .61, .36, 1) both;
}
.hero h1 { animation-delay: .08s; }
.hero .lead { animation-delay: .16s; }
.hero .d-flex { animation-delay: .24s; }
.hero .llamanos { animation-delay: .32s; }
.hero .logo-portada { animation: aparecer 1.2s ease both; animation-delay: .2s; }

@keyframes entrada {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
}
@keyframes aparecer {
    from { opacity: 0; transform: scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* Revelado al hacer scroll (la clase la agrega rutinas.js) */
/* Línea que crece bajo el enlace del menú */
.ac-navbar .nav-link { position: relative; }
.ac-navbar .nav-link::after {
    content: "";
    position: absolute; left: 0; bottom: .25rem;
    width: 100%; height: 2px;
    background: var(--ac-vino);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.ac-navbar .nav-link:hover::after,
.ac-navbar .nav-link.active::after { transform: scaleX(1); }

/* Botones: el ícono se desplaza al pasar el mouse */
.btn i { transition: transform .25s ease; }
.btn:hover i.fa-arrow-right { transform: translateX(5px); }
.btn:hover i.fa-arrow-left { transform: translateX(-5px); }
.btn { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }

/* Tarjetas de vehículo: la foto se acerca y el precio se marca */
.card-auto .precio { transition: color .25s ease; }
.card-auto:hover .precio { color: var(--ac-negro); }

/* Miniaturas de la galería */
.miniatura { transition: opacity .25s ease, border-color .25s ease, transform .25s ease; }
.miniatura:hover { transform: translateY(-3px); }

/* Filas de tabla */
.table tbody tr { transition: background-color .2s ease; }

/* Cifras: aparecen contando (ver rutinas.js) */
.stat .numero { font-variant-numeric: tabular-nums; }

/* ---------- Marcador tipo odómetro ----------
   Cada dígito es una columna de 0 a 9 (repetida tres veces) que
   se desliza hacia arriba hasta dejar a la vista el número correcto. */
.stat .numero.marcador {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 1em;
    line-height: 1;
    overflow: hidden;
}
.marcador-columna {
    display: block;
    height: 1em;
    overflow: hidden;
}
.marcador-tira {
    display: block;
    transform: translateY(0);
    transition: transform 1.9s cubic-bezier(.16, 1, .3, 1);
    will-change: transform;
}
.marcador-digito {
    display: block;
    height: 1em;
    line-height: 1;
}

/* ---------- Cursor suave al escribir ----------
   La envoltura y el cursor los crea rutinas.js. Si el JavaScript no
   corre, no se crea nada y el campo queda con el cursor normal. */
.campo-suave {
    position: relative;
    display: block;
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
}
.campo-suave > input { caret-color: transparent; }
.campo-suave > textarea { caret-color: transparent; }
/* Regla invisible que sirve para medir el ancho del texto */
.campo-suave-medida {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    white-space: pre;
    pointer-events: none;
}
/* Espejo del textarea: mismo ancho, misma letra y mismos renglones,
   sirve para saber en qué línea y columna quedó el cursor */
.campo-suave-espejo {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: hidden;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.campo-suave-cursor {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    background: var(--ac-vino);
    opacity: 0;
    pointer-events: none;
    will-change: transform;
}
/* El textarea recorta el cursor cuando el texto se va hacia arriba */
.campo-suave-caja { overflow: hidden; }
.campo-suave-cursor.visible { animation: latido 1.15s steps(1, end) infinite; }
@keyframes latido {
    0%, 54%   { opacity: 1; }
    55%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .campo-suave-cursor.visible { animation: none; opacity: 1; }
}

/* ---------- Cinta de texto con velocidad de scroll ---------- */
.cinta {
    background: var(--ac-negro);
    color: var(--ac-beige);
    padding: 3.2rem 0;
    overflow: hidden;
}
.cinta-fila { overflow: hidden; }
.cinta-pista {
    display: flex;
    white-space: nowrap;
    will-change: transform;
}
.cinta-copia {
    flex: none;
    font-family: var(--ac-fuente-titulo);
    font-weight: 600;
    text-transform: uppercase;
    font-size: clamp(2.4rem, 7.5vw, 5.5rem);
    line-height: 1.12;
    letter-spacing: .02em;
    padding-right: .35em;
}
/* La segunda fila va solo con el contorno de las letras */
.cinta-contorno .cinta-copia {
    color: transparent;
    -webkit-text-stroke: 1px var(--ac-beige);
    text-stroke: 1px var(--ac-beige);
}

/* ---------- Carrusel cilíndrico ----------
   Las fotos se colocan en 3D formando un anillo que gira solo. */
.cilindro-seccion {
    background-color: var(--ac-marmol);
    padding: 4.5rem 0;
    overflow: hidden;
}
.cilindro {
    position: relative;
    height: 300px;
    perspective: 1500px;
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}
.cilindro.arrastrando { cursor: grabbing; }
.cilindro-anillo {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 320px;
    height: 210px;
    transform-style: preserve-3d;
    will-change: transform;
}
.cilindro-pieza {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    background-color: var(--ac-negro);
    border: 1px solid var(--ac-borde);
    text-decoration: none;
    /* Sin esto se verían también las fotos del lado de atrás del anillo */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.cilindro-pieza img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(.3);
    transition: filter .4s ease;
}
.cilindro-pieza:hover img { filter: none; }
.cilindro-etiqueta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: .6rem .8rem;
    background: linear-gradient(to top, rgba(26, 26, 26, .9), transparent);
    color: #fff;
    font-family: var(--ac-fuente-titulo);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .85rem;
}
@media (max-width: 575.98px) {
    .cilindro { height: 200px; }
    .cilindro-anillo { width: 200px; height: 130px; }
    .cilindro-etiqueta { font-size: .75rem; }
}

/* Mensajes emergentes */
.toast.show { animation: entradaToast .4s ease both; }
@keyframes entradaToast {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero .etiqueta, .hero h1, .hero .lead, .hero .d-flex,
    .hero .llamanos, .hero .logo-portada { animation: none; }
    .ac-navbar .nav-link::after { transition: none; }
    .miniatura:hover { transform: none; }
    .marcador-tira { transition: none; }
    .cilindro { cursor: default; }
    .cilindro-pieza img { filter: none; }
}

@media print {
    .d-print-none, .navbar, .ac-footer { display: none !important; }
}

/* Campanita de citas pendientes en el menú (solo la ve el administrador) */
.campanita {
    font-size: 1.05rem;
}

.campanita-numero {
    position: absolute;
    top: .1rem;
    left: 60%;
    min-width: 1.15rem;
    padding: 0 .3rem;
    border-radius: 1rem;
    background: var(--ac-boton);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.15rem;
    text-align: center;
}

/* ---------- Filtro de tipos del catálogo (se puede marcar más de uno) ---------- */
/* Curva y duración únicas del proyecto; solo se animan transform y opacity. */
.filtro-tipos-boton {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    min-height: 44px;
    padding: .5rem .75rem;
    border: 1px solid var(--ac-borde);
    border-radius: .75rem;
    background: var(--ac-fondo);
    color: var(--ac-texto);
    font: inherit;
    text-align: left;
    transition: border-color .3s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1);
}

.filtro-tipos-boton:hover {
    border-color: var(--ac-boton);
}

.filtro-tipos-boton:active {
    transform: scale(.98);
}

.filtro-tipos-boton [data-resumen] {
    flex: 1;
}

.filtro-tipos-flecha {
    transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

.filtro-tipos[data-abierto] .filtro-tipos-flecha {
    transform: rotate(180deg);
}

.filtro-tipos-panel {
    list-style: none;
    margin: .5rem 0 0;
    padding: .25rem;
    border: 1px solid var(--ac-borde);
    border-radius: .75rem;
    background: var(--ac-fondo);
}

/* Con JavaScript el panel arranca cerrado; sin él queda visible y el filtro funciona igual */
.filtro-tipos.js-listo:not([data-abierto]) .filtro-tipos-panel {
    display: none;
}

.filtro-tipo {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 44px;
    padding: .25rem .5rem;
    border-radius: .5rem;
    cursor: pointer;
}

.filtro-tipo:hover {
    background: var(--ac-crema);
}

/* La casilla real se mantiene: recibe foco y funciona con teclado */
.filtro-tipo input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.filtro-tipo-marca {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border: 2px solid var(--ac-texto-suave);
    border-radius: 50%;
    color: #fff;
    font-size: .7rem;
    transition: background-color .3s cubic-bezier(.16, 1, .3, 1), border-color .3s cubic-bezier(.16, 1, .3, 1);
}

.filtro-tipo-marca i {
    transform: scale(0);
    transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

.filtro-tipo input:checked + .filtro-tipo-marca {
    background: var(--ac-boton);
    border-color: var(--ac-boton);
}

.filtro-tipo input:checked + .filtro-tipo-marca i {
    transform: scale(1);
}

.filtro-tipo input:focus-visible + .filtro-tipo-marca {
    outline: 2px solid var(--ac-texto);
    outline-offset: 2px;
}

/* ---------- Chips de tipos del formulario de vehículos ---------- */
/* El movimiento de "jalea" lo pone rutinas.js con resortes; aquí solo el reposo. */
.chips-tipos {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.chip-tipo {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    padding: .5rem .95rem;
    border: 1px solid var(--ac-borde);
    border-radius: 2rem;
    background: var(--ac-fondo);
    color: var(--ac-texto);
    cursor: pointer;
    user-select: none;
    transition: background-color .3s cubic-bezier(.16, 1, .3, 1), border-color .3s cubic-bezier(.16, 1, .3, 1), color .3s cubic-bezier(.16, 1, .3, 1);
}

.chip-tipo:hover {
    border-color: var(--ac-boton);
}

/* La casilla real se mantiene: recibe foco y funciona con teclado */
.chip-tipo input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.chip-tipo:has(input:checked) {
    background: var(--ac-boton);
    border-color: var(--ac-boton);
    color: #fff;
}

.chip-tipo:has(input:focus-visible) {
    outline: 2px solid var(--ac-texto);
    outline-offset: 2px;
}

/* Los dos iconos comparten la misma celda: al marcar, el + se cambia por el ✓
   sin mover el ancho del chip (nada de animar width) */
.chip-tipo-marca {
    display: grid;
    font-size: .75rem;
}

.chip-tipo-marca i {
    grid-area: 1 / 1;
    transition: opacity .3s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1);
}

.chip-tipo-marca .fa-check {
    opacity: 0;
    transform: scale(.6);
}

.chip-tipo:has(input:checked) .chip-tipo-marca .fa-plus {
    opacity: 0;
    transform: scale(.6);
}

.chip-tipo:has(input:checked) .chip-tipo-marca .fa-check {
    opacity: 1;
    transform: scale(1);
}

/* ---------- Ajustes para celular ---------- */
/* El logo no tenía tamaño en CSS: se dibujaba a sus 320 px reales y empujaba
   el nombre fuera de la pantalla en los teléfonos. */
@media (max-width: 1399.98px) {
    .logo-menu {
        height: 56px;
        width: auto;
    }
}

@media (max-width: 575.98px) {
    .logo-menu {
        height: 44px;
    }

    .ac-navbar .navbar-brand {
        font-size: 1.1rem;
    }
}

/* Las casillas de Bootstrap miden 16 px; el mínimo para tocar con el dedo es 24 (WCAG 2.5.8).
   Los interruptores (form-switch) se dejan como están: ya son anchos. */
.form-check:not(.form-switch) .form-check-input {
    width: 1.5rem;
    height: 1.5rem;
    margin-top: .1rem;
}

/* =========================================================
   Esqueletos de carga
   Las fotos vienen del CDN y llegan después que el HTML. En vez de dejar un
   hueco vacío, el marco muestra un brillo que recorre el espacio que va a
   ocupar la foto (mismo tamaño, así la página no salta) y la foto entra con un
   fundido cuando termina de bajar.
   Solo se anima transform/opacity. Si no hay JavaScript, la clase js-esqueletos
   no se pone y las fotos se ven normales desde el principio.
   ========================================================= */
.foto-marco {
    position: relative;
    overflow: hidden;
    background: var(--ac-marmol);
}

.js-esqueletos .foto-marco::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
    transform: translateX(-100%);
    /* lineal: un barrido constante no acelera ni frena */
    animation: esqueletoBrillo 1.3s linear infinite;
    pointer-events: none;
}

.js-esqueletos .foto-marco.cargada::after {
    content: none;
}

.js-esqueletos .foto-marco img {
    opacity: 0;
    transition: opacity .3s cubic-bezier(.16, 1, .3, 1);
}

.js-esqueletos .foto-marco.cargada img {
    opacity: 1;
}

@keyframes esqueletoBrillo {
    to { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .js-esqueletos .foto-marco::after { animation: none; }
}

/* =========================================================
   Jerarquía del color
   Un solo acento (vino) y un orden claro de importancia:
     1. Acción principal de la pantalla  -> botón vino relleno (.btn-primary)
     2. El precio, que es el dato que más se busca -> texto vino
     3. Acciones secundarias -> contorno negro sin relleno (.btn-secondary)
     4. Acciones terciarias  -> enlace de texto (.enlace-discreto)
     5. Información (etiquetas, chips, estados) -> grises, sin color
   Regla práctica: en una misma tarjeta o bloque nunca hay dos cosas en vino.
   ========================================================= */
.enlace-discreto {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-height: 44px;
    padding: .25rem 0;
    color: var(--ac-texto);
    font-family: var(--ac-fuente-titulo);
    font-size: .95rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid var(--ac-borde);
    transition: color .3s cubic-bezier(.16, 1, .3, 1), border-color .3s cubic-bezier(.16, 1, .3, 1);
}

.enlace-discreto:hover {
    color: var(--ac-vino);
    border-color: var(--ac-vino);
}

/* La etiqueta es información, no una acción: pierde el vino */
.etiqueta { color: var(--ac-texto-suave); }

/* En la portada el fondo es oscuro */
.iman-acciones .enlace-discreto {
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, .35);
}

.iman-acciones .enlace-discreto:hover {
    color: #FFFFFF;
    border-color: #FFFFFF;
}

/* =========================================================
   Ley de Hick: menos opciones a la vista
   El filtro del catálogo mostraba cinco controles a la vez. Quedan visibles los
   dos que se usan casi siempre (buscar y tipo) y el resto se abre a pedido.
   <details> es nativo: funciona sin JavaScript y con teclado.
   ========================================================= */
.mas-filtros {
    border-top: 1px solid var(--ac-borde);
    margin-bottom: 1rem;
}

.mas-filtros > summary {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    cursor: pointer;
    font-family: var(--ac-fuente-titulo);
    font-size: .9rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    list-style: none;
}

.mas-filtros > summary::-webkit-details-marker { display: none; }

.mas-filtros > summary .fa-chevron-down {
    margin-left: auto;
    font-size: .8rem;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

.mas-filtros[open] > summary .fa-chevron-down { transform: rotate(180deg); }

/* El marco de la galería no debe agregar la línea base de la imagen */
.galeria-marco { line-height: 0; }

/* El bloque de WhatsApp es otro canal, no la acción principal de la portada:
   pasa a negro para que el único vino del bloque sea "Ver catálogo". */
.iman-acciones .llamanos {
    background: var(--ac-negro);
}

.iman-acciones .llamanos:hover,
.iman-acciones .llamanos:focus {
    background: #FFFFFF;
    color: var(--ac-negro);
}

/* En el celular la portada apila las acciones y estira todo a lo ancho: el enlace
   terciario se queda del tamaño de su texto para que no parezca otro botón. */
.iman-acciones .enlace-discreto { align-self: center; }

/* Los interruptores de Bootstrap miden 32x16: en el teléfono cuesta acertarles.
   Se agrandan a 48x24 y se corre la etiqueta para que no los tape. */
.form-switch { padding-left: 3.5rem; }

.form-switch .form-check-input {
    width: 3rem;
    height: 1.5rem;
    margin-left: -3.5rem;
}

/* Modales con formulario: el <form> queda entre .modal-content y las secciones,
   y eso corta la cadena flex de "modal-dialog-scrollable". Sin esto el cuerpo no
   se limita a la altura de la pantalla y en un portátil el formulario se sale
   por abajo sin poder bajar. Se le devuelve el comportamiento al <form>. */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

.modal-dialog-scrollable .modal-content > form > .modal-body {
    overflow-y: auto;
    min-height: 0;
}

/* Al volver con un error, el formulario de citas no debe quedar bajo el menú fijo */
#agendar { scroll-margin-top: 90px; }

/* =========================================================
   Píldoras del menú (idioma y accesos)
   Al pasar el mouse sube un círculo desde abajo y el texto se cambia por su
   copia: el efecto del componente PillNav, hecho con CSS en vez de GSAP.
   Solo se animan transform y opacity.
   ========================================================= */
.pastilla {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 38px;
    padding: .35rem 1rem;
    border-radius: 999px;
    border: 1px solid transparent;
    color: #FFFFFF;
    font-family: var(--ac-fuente-titulo);
    font-size: .85rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color .3s cubic-bezier(.16, 1, .3, 1), transform .3s cubic-bezier(.16, 1, .3, 1);
}

.pastilla:active { transform: scale(.98); }

.pastilla-borde { border-color: rgba(255, 255, 255, .5); }

.pastilla-llena {
    background: var(--ac-vino);
    border-color: var(--ac-vino);
}

/* El círculo nace abajo, centrado, y crece hasta cubrir la píldora */
.pastilla-circulo {
    position: absolute;
    left: 50%;
    bottom: -120%;
    width: 150%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #FFFFFF;
    transform: translateX(-50%) scale(0);
    transform-origin: 50% 0;
    transition: transform .4s cubic-bezier(.16, 1, .3, 1);
    pointer-events: none;
}

.pastilla-llena .pastilla-circulo { background: #FFFFFF; }

.pastilla:hover .pastilla-circulo,
.pastilla:focus-visible .pastilla-circulo { transform: translateX(-50%) scale(1); }

/* Las dos copias del texto viajan juntas: sale la de arriba, entra la de abajo */
.pastilla-etiquetas {
    position: relative;
    display: grid;
    z-index: 1;
    overflow: hidden;
}

.pastilla-texto,
.pastilla-texto-hover {
    grid-area: 1 / 1;
    transition: transform .4s cubic-bezier(.16, 1, .3, 1);
    white-space: nowrap;
}

.pastilla-texto-hover {
    transform: translateY(110%);
    color: var(--ac-negro);
}

.pastilla:hover .pastilla-texto,
.pastilla:focus-visible .pastilla-texto { transform: translateY(-110%); }

.pastilla:hover .pastilla-texto-hover,
.pastilla:focus-visible .pastilla-texto-hover { transform: translateY(0); }

.pastilla:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
}

/* El idioma en uso se marca sin depender solo del color */
.idiomas {
    display: flex;
    gap: .25rem;
}

.idiomas .pastilla {
    min-width: 54px;
    padding: .35rem .75rem;
    border-color: rgba(255, 255, 255, .25);
}

.idiomas .pastilla-activa {
    background: rgba(255, 255, 255, .14);
    border-color: #FFFFFF;
}

/* Quien pide menos movimiento ve el cambio de color, no el viaje del texto */
@media (prefers-reduced-motion: reduce) {
    .pastilla-circulo,
    .pastilla-texto,
    .pastilla-texto-hover { transition: none; }
}

/* ---------- Hamburguesa: dos líneas que se cruzan ---------- */
.hamburguesa {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 46px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: .5rem;
}

.hamburguesa:focus { box-shadow: none; }

.hamburguesa-linea {
    display: block;
    width: 22px;
    height: 2px;
    margin: 0 auto;
    background: #FFFFFF;
    transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

.hamburguesa[aria-expanded="true"] .hamburguesa-linea:first-child { transform: translateY(4px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] .hamburguesa-linea:last-child { transform: translateY(-4px) rotate(-45deg); }

/* En el celular el menú abierto separa sus bloques como tarjetas */
@media (max-width: 1199.98px) {
    #menuPrincipal > * {
        padding: .75rem 0;
        border-top: 1px solid var(--ac-borde-oscuro);
    }

    #menuPrincipal .idiomas { justify-content: flex-start; }
}

/* En inglés los enlaces son más largos: que no se partan en dos líneas */
.ac-navbar .nav-link { white-space: nowrap; }

/* =========================================================
   Anuncio del financiamiento con Davibank
   Va antes de los vehículos. Usa la paleta del sitio (vino y crema): el
   logotipo y los colores del banco son suyos y no se usan aquí.
   ========================================================= */
.anuncio-davi {
    margin: 2rem 0;
}

.anuncio-davi-caja {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    padding: 1.75rem;
    border: 1px solid var(--ac-borde);
    border-left: 4px solid var(--ac-vino);
    background: var(--ac-crema);
}

.anuncio-davi-icono {
    display: grid;
    place-items: center;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--ac-vino);
    color: #FFFFFF;
    font-size: 1.5rem;
}

.anuncio-davi-texto {
    flex: 1 1 18rem;
}

.anuncio-davi-texto h2 {
    margin: .25rem 0 .5rem;
    font-size: 1.6rem;
}

/* El dato que más se busca, con el acento del sitio */
.anuncio-davi-plazos {
    font-family: var(--ac-fuente-titulo);
    font-weight: 600;
    color: var(--ac-vino);
    letter-spacing: .04em;
}

.anuncio-davi-acciones {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    flex: 0 1 auto;
}

.anuncio-davi-acciones .enlace-discreto {
    justify-content: center;
}

@media (max-width: 575.98px) {
    .anuncio-davi-caja {
        padding: 1.25rem;
        gap: 1rem;
    }

    .anuncio-davi-texto h2 { font-size: 1.35rem; }

    .anuncio-davi-acciones { width: 100%; }
}

/* =========================================================
   Cartel del vehículo
   Idea tomada del video: la foto va montada sobre una banda diagonal y el
   nombre del auto en grande detrás, como en un afiche. Con el scroll las dos
   capas del fondo se mueven menos que la foto, y eso da la sensación de
   profundidad (rutinas.js lo engancha al scroll; sin JavaScript queda quieto).
   ========================================================= */
.cartel {
    position: relative;
    overflow: hidden;
    padding: 1.5rem 0;
    isolation: isolate;
}

/* Banda diagonal: gris de fondo con una franja vino, como la del afiche */
.cartel-banda {
    position: absolute;
    top: -40%;
    left: 8%;
    width: 46%;
    height: 180%;
    background: linear-gradient(90deg,
            var(--ac-marmol) 0 60%,
            var(--ac-vino) 60% 68%,
            transparent 68%);
    transform: rotate(16deg);
    transform-origin: 50% 50%;
    opacity: .3;
    z-index: -2;
    pointer-events: none;
}

/* El nombre del auto, enorme y de canto */
.cartel-titulo {
    position: absolute;
    top: 50%;
    right: -.4rem;
    font-family: var(--ac-fuente-titulo);
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-weight: 700;
    letter-spacing: .02em;
    line-height: .9;
    white-space: nowrap;
    color: rgba(38, 38, 38, .05);
    writing-mode: vertical-rl;
    transform: translateY(-50%);
    z-index: -1;
    pointer-events: none;
    user-select: none;
}

.cartel-contenido {
    position: relative;
    z-index: 1;
}

/* En pantallas chicas el nombre de canto se come el ancho: se deja solo la banda */
@media (max-width: 767.98px) {
    .cartel-titulo { display: none; }

    .cartel-banda {
        left: -10%;
        width: 70%;
        opacity: .22;
    }
}

/* ---------- "Nosotros" en el inicio: la columna del texto queda anclada ----------
   Mientras se baja, el título se mantiene a la vista y las tarjetas pasan al lado.
   Debajo de 992 px todo vuelve a su orden normal, uno debajo del otro. */
@media (min-width: 992px) {
    .sobre-nosotros .sobre-fijo {
        position: sticky;
        top: 7rem;
    }
}

/* =========================================================
   Revelados al entrar en pantalla (técnica de Forge Automotive)
   Las fotos se destapan desde el centro —clip-path de inset(14%) a inset(0)—
   mientras bajan de escala, y los títulos suben desde debajo de una máscara
   con una ligera inclinación. Lo activa rutinas.js al entrar en pantalla; sin
   JavaScript nada se oculta.
   ========================================================= */
.js-revelado .revelar-foto {
    clip-path: inset(14%);
    transform: scale(1.08);
    transition: clip-path 1s cubic-bezier(.16, 1, .3, 1), transform 1s cubic-bezier(.16, 1, .3, 1);
}

.js-revelado .revelar-foto.visible {
    clip-path: inset(0%);
    transform: scale(1);
}

/* Título enmascarado: el texto vive dentro de una franja que lo recorta */
.titulo-mascara {
    display: block;
    overflow: hidden;
}

.js-revelado .titulo-mascara > span {
    display: inline-block;
    transform: translateY(105%) skewY(2deg);
    transition: transform .9s cubic-bezier(.16, 1, .3, 1);
}

.js-revelado .titulo-mascara.visible > span {
    transform: translateY(0) skewY(0);
}

@media (prefers-reduced-motion: reduce) {
    .js-revelado .revelar-foto,
    .js-revelado .titulo-mascara > span {
        clip-path: none;
        transform: none;
        transition: none;
    }
}

/* ---------- Transición entre páginas ----------
   Al cambiar de página el navegador funde la vieja con la nueva, como en la
   referencia. Es la API nativa: donde no existe, la navegación es la de siempre. */
@view-transition {
    navigation: auto;
}

@keyframes paginaEntra {
    from { opacity: 0; }
    to { opacity: 1; }
}

::view-transition-new(root) {
    animation: paginaEntra .5s cubic-bezier(.16, 1, .3, 1) both;
}

::view-transition-old(root) {
    animation: paginaEntra .35s cubic-bezier(.16, 1, .3, 1) reverse both;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-new(root),
    ::view-transition-old(root) { animation: none; }
}

/* ---------- Vitrina de destacados ----------
   En vez de seis fichas iguales una debajo de otra, un índice: a la izquierda la lista
   de autos y a la derecha una sola foto, la de la fila que se esté mirando o enfocando
   con el teclado. En celular cada fila lleva su foto encima; es la misma imagen
   recolocada por CSS, así que no se descarga dos veces.
   El cambio de foto es una transición, no una animación por cuadros: se puede
   interrumpir a mitad de camino, así que recorrer la lista rápido nunca reinicia nada. */
.vitrina { position: relative; }
.vitrina-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--ac-borde);
}
.vitrina-fila { border-bottom: 1px solid var(--ac-borde); }
.vitrina-enlace {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 20px 0;
    text-decoration: none;
    color: var(--ac-texto);
}
.vitrina-numero {
    font-family: var(--ac-fuente-titulo);
    font-size: .8rem;
    letter-spacing: var(--ac-espaciado-etiqueta);
    color: var(--ac-texto-suave);
    font-variant-numeric: tabular-nums;
    transition: color .22s var(--ac-curva);
}
.vitrina-centro {
    min-width: 0;
    transition: transform .22s var(--ac-curva);
}
.vitrina-nombre {
    display: block;
    font-family: var(--ac-fuente-titulo);
    text-transform: uppercase;
    letter-spacing: var(--ac-espaciado-titulo);
    font-weight: 600;
    font-size: clamp(1.3rem, 2.4vw, 1.9rem);
    line-height: 1.05;
}
.vitrina-datos {
    display: block;
    margin-top: .3rem;
    font-size: .85rem;
    color: var(--ac-texto-suave);
}
.vitrina-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
}
.vitrina-precio {
    font-family: var(--ac-fuente-titulo);
    font-weight: 600;
    font-size: 1.35rem;
    letter-spacing: .03em;
    color: var(--ac-vino);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* 40×40: por encima del mínimo de 24 px para algo que se puede pulsar */
.vitrina-flecha {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border: 1px solid var(--ac-borde);
    color: var(--ac-texto-suave);
    transition: transform .22s var(--ac-curva), border-color .22s var(--ac-curva), color .22s var(--ac-curva);
}
.vitrina-vendido {
    display: inline-block;
    margin-left: .6rem;
    vertical-align: middle;
    padding: .15rem .5rem;
    background: var(--ac-negro);
    color: #FFFFFF;
    font-family: var(--ac-fuente-titulo);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.vitrina-foto-caja {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--ac-marmol);
    overflow: hidden;
}
.vitrina-foto-caja .foto {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Escritorio: la lista a la izquierda y una sola foto a la derecha. Todas las fotos
   ocupan el mismo hueco, superpuestas; se ve la de la fila activa. */
@media (min-width: 992px) {
    .vitrina { padding-right: 42%; }
    .vitrina-enlace {
        flex-direction: row;
        align-items: center;
        gap: 28px;
        padding: 26px 0;
    }
    .vitrina-centro { flex: 1 1 auto; }
    .vitrina-pie { width: auto; gap: 24px; }
    .vitrina-foto-caja {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 38%;
        aspect-ratio: auto;
        opacity: 0;
        transform: scale(1.03);
        transition: opacity .3s var(--ac-curva), transform .5s var(--ac-curva);
    }
    /* Sin tocar nada se ve el primero, así la columna nunca queda vacía */
    .vitrina-fila:first-child .vitrina-foto-caja { opacity: 1; transform: none; }
    .vitrina-fila:hover .vitrina-foto-caja,
    .vitrina-fila:focus-within .vitrina-foto-caja { opacity: 1; transform: none; z-index: 2; }
}

/* El movimiento del puntero solo donde hay puntero: en una pantalla táctil el :hover
   se queda pegado después de tocar. El teclado recibe el mismo trato aparte. */
@media (hover: hover) and (pointer: fine) {
    .vitrina-enlace:hover .vitrina-centro { transform: translateX(10px); }
    .vitrina-enlace:hover .vitrina-numero { color: var(--ac-vino); }
    .vitrina-enlace:hover .vitrina-flecha {
        transform: translateX(4px);
        border-color: var(--ac-negro);
        color: var(--ac-negro);
    }
}
.vitrina-enlace:focus-visible .vitrina-centro { transform: translateX(10px); }
.vitrina-enlace:focus-visible .vitrina-numero { color: var(--ac-vino); }

/* Entrada: las filas suben una detrás de otra, 60 ms de diferencia */
.js-revelado .vitrina-fila {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s var(--ac-curva), transform .5s var(--ac-curva);
}
.js-revelado .vitrina-fila.visible { opacity: 1; transform: none; }
.js-revelado .vitrina-fila:nth-child(2) { transition-delay: .06s; }
.js-revelado .vitrina-fila:nth-child(3) { transition-delay: .12s; }
.js-revelado .vitrina-fila:nth-child(4) { transition-delay: .18s; }
.js-revelado .vitrina-fila:nth-child(5) { transition-delay: .24s; }
.js-revelado .vitrina-fila:nth-child(6) { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
    .vitrina-enlace:hover .vitrina-centro,
    .vitrina-enlace:hover .vitrina-flecha,
    .vitrina-enlace:focus-visible .vitrina-centro { transform: none; }
    .vitrina-foto-caja { transition: opacity .2s linear; transform: none; }
    .js-revelado .vitrina-fila { opacity: 1; transform: none; transition: none; }
}

/* ---------- Portada a sangre ----------
   La foto ocupa el ancho completo y el texto va montado encima. El degradado hacia el
   fondo de la página asegura que el texto se lea sea cual sea la foto. */
.portada {
    position: relative;
    overflow: hidden;
    min-height: min(78vh, 720px);
    display: flex;
    align-items: flex-end;
    background: var(--ac-marmol);
}
.portada-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center 60%;
}
.portada::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .78) 38%, rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}
.portada-contenido {
    position: relative;
    z-index: 1;
    padding-top: 72px;
    padding-bottom: 48px;
}
.portada-titulo {
    font-size: clamp(2.4rem, 7vw, 5.2rem);
    margin: .5rem 0 1rem;
}
.portada-titulo span { display: block; }
.portada-parrafo {
    max-width: 46ch;
    color: var(--ac-texto);
    margin-bottom: 0;
}
.portada-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    margin-top: 28px;
}
@media (max-width: 575.98px) {
    .portada { min-height: 70vh; }
    .portada-contenido { padding-top: 48px; padding-bottom: 36px; }
}

/* ---------- Banda de cierre del inicio ----------
   La foto del local a todo el ancho con la última invitación encima. Fondo oscuro, al
   revés que la portada: ahí la foto es de estudio sobre blanco, aquí es de exteriores y
   el texto necesita el velo oscuro para leerse. */
.cierre-sitio {
    position: relative;
    overflow: hidden;
    min-height: min(60vh, 540px);
    display: flex;
    align-items: center;
    background: var(--ac-escenario);
    margin-top: 80px;
}
.cierre-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cierre-sitio::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(26, 26, 26, .88) 0%, rgba(26, 26, 26, .72) 45%, rgba(26, 26, 26, .35) 100%);
    pointer-events: none;
}
.cierre-contenido {
    position: relative;
    z-index: 1;
    padding-block: 56px;
    color: #FFFFFF;
}
.cierre-sitio .etiqueta { color: #FFFFFF; opacity: .75; }
.cierre-titulo {
    color: #FFFFFF;
    font-size: clamp(1.8rem, 4vw, 3rem);
    margin: .5rem 0 .75rem;
    max-width: 18ch;
}
.cierre-texto {
    color: rgba(255, 255, 255, .85);
    max-width: 46ch;
    margin-bottom: 0;
}
.cierre-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    margin-top: 28px;
}
@media (max-width: 575.98px) {
    .cierre-sitio { min-height: 54vh; margin-top: 56px; }
    .cierre-contenido { padding-block: 40px; }
    .cierre-sitio::after {
        background: linear-gradient(to top, rgba(26, 26, 26, .92) 0%, rgba(26, 26, 26, .78) 55%, rgba(26, 26, 26, .5) 100%);
    }
}

/* ---------- Texto de la portada sobre foto o video ----------
   El administrador puede subir cualquier cosa: una foto clara de estudio o un video
   oscuro. El halo blanco alrededor de las letras hace que el texto se lea en los dos
   casos, sin depender de que el fondo colabore. El trazo va por detrás del relleno
   (paint-order), así la letra no adelgaza. */
.portada-titulo,
.portada-parrafo,
.portada-acciones .enlace-discreto {
    text-shadow:
        0 0 3px rgba(255, 255, 255, .95),
        0 0 10px rgba(255, 255, 255, .85),
        0 0 26px rgba(255, 255, 255, .6);
}
.portada-titulo {
    -webkit-text-stroke: 1px rgba(255, 255, 255, .9);
    paint-order: stroke fill;
}
/* La etiqueta es la línea más fina de todas: con el halo ancho se desdibuja, así que
   lleva uno más apretado y un poco más de peso. */


/* =========================================================
   Kit editorial suizo: piezas del sistema de diseño
   (Logotipo, FichaAuto, Boton, EtiquetaEstado, TarjetaCatalogo).
   Va al final para ganarle a las reglas anteriores sin !important.
   ========================================================= */

/* Unbounded es mucho más ancha que Barlow Condensed: el nombre del menú baja de tamaño para que quepa todo */
.ac-navbar .navbar-brand { font-size: 1.05rem; letter-spacing: .04em; }
.ac-navbar .nav-link { font-size: .875rem; letter-spacing: .08em; }

/* Rojo legible sobre las bandas en tinta (menú y pie) */
.ac-navbar .nav-link:hover, .ac-navbar .nav-link.active,
.ac-navbar .navbar-brand .acento, .ac-footer a:hover { color: var(--ac-rojo-noche); }
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item:active { background: var(--ac-vino-oscuro); }

/* Cada familia en su lugar: display para nombres grandes, mono para datos */
.cinta-copia, .cartel-titulo, .vitrina-nombre { font-family: var(--ac-fuente-display); }
.precio, .vitrina-precio, .stat .numero, .llamanos-texto strong {
    font-family: var(--ac-fuente-dato);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}
.etiqueta { color: var(--ac-texto-suave); }

/* Encabezado de página: título grande sobre papel y filete de 2px, sin ícono */
.page-header {
    background: var(--ac-blanco);
    color: var(--ac-texto);
    padding: 4rem 0 1.5rem;
    border-bottom: var(--ac-trazo) solid var(--ac-texto);
}
.page-header h1 { color: var(--ac-texto); }
.page-header h1 i { display: none; }
.page-header .text-suave { color: var(--ac-texto-suave) !important; }
.page-header .btn-secondary {
    --bs-btn-border-color: var(--ac-negro);
    --bs-btn-color: var(--ac-negro);
    --bs-btn-hover-bg: var(--ac-negro);
    --bs-btn-hover-border-color: var(--ac-negro);
    --bs-btn-hover-color: var(--ac-blanco);
}

/* Nada inclinado ni en perspectiva */
.cartel-banda { display: none; }

/* Boton: recto, 48px de alto, borde de 2px, foco de 2px en tinta */
.btn {
    font-family: var(--ac-fuente-titulo);
    font-size: .875rem;
    letter-spacing: .08em;
    border-width: var(--ac-trazo);
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
}
.btn-sm { min-height: 36px; font-size: .8125rem; }
.btn-lg { font-size: .9375rem; }
.btn-primary {
    --bs-btn-hover-bg: var(--ac-vino-oscuro);
    --bs-btn-hover-border-color: var(--ac-vino-oscuro);
    --bs-btn-active-bg: var(--ac-vino-oscuro);
    --bs-btn-active-border-color: var(--ac-vino-oscuro);
}
.btn:focus-visible { outline: var(--ac-trazo) solid var(--ac-negro); outline-offset: 3px; box-shadow: none; }
.btn:active { transform: scale(.98); }
.ac-btn-texto {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-family: var(--ac-fuente-titulo);
    font-weight: 600;
    font-size: .875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ac-texto);
    border-bottom: var(--ac-trazo) solid var(--ac-vino);
}
.ac-btn-texto:hover { color: var(--ac-vino); }

/* Texto utilitario */
.ac-eyebrow {
    font-family: var(--ac-fuente-titulo);
    font-weight: 600;
    font-size: .75rem;
    line-height: 1rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ac-texto-suave);
}
.ac-dato {
    font-family: var(--ac-fuente-dato);
    font-weight: 500;
    font-size: .8125rem;
    line-height: 1.125rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}
.ac-precio {
    font-family: var(--ac-fuente-dato);
    font-weight: 600;
    font-size: 2rem;
    line-height: 2.25rem;
    letter-spacing: -.01em;
    color: var(--ac-vino);
    font-variant-numeric: tabular-nums;
}

/* EtiquetaEstado: se distingue por relleno y texto, no solo por color */
.ac-estado {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 28px;
    padding: 0 .5rem;
    border: var(--ac-trazo) solid currentColor;
    font-family: var(--ac-fuente-titulo);
    font-weight: 600;
    font-size: .6875rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    white-space: nowrap;
}
.ac-estado::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: currentColor; }
.ac-estado--disponible { color: var(--ac-vino); }
.ac-estado--reservado { color: var(--ac-reservado); }
.ac-estado--vendido { color: var(--ac-blanco); background: var(--ac-negro); border-color: var(--ac-negro); }
.ac-estado--vendido::before { background: var(--ac-rojo-noche); }

/* FichaAuto: cuatro datos fijos y el precio, separados por filetes */
.ac-ficha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--ac-trazo) solid var(--ac-negro); }
.ac-ficha__item {
    padding: 1rem 0;
    border-bottom: var(--ac-hairline) solid var(--ac-borde);
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
}
.ac-ficha__item:nth-child(odd) { padding-right: 1rem; }
.ac-ficha__item:nth-child(even) { padding-left: 1rem; border-left: var(--ac-hairline) solid var(--ac-borde); }
.ac-ficha__k {
    font-family: var(--ac-fuente-titulo);
    font-weight: 600;
    font-size: .6875rem;
    line-height: .875rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ac-texto-suave);
}
.ac-ficha__v { font-family: var(--ac-fuente-dato); font-weight: 500; font-size: 1rem; line-height: 1.375rem; text-transform: uppercase; }
.ac-ficha__total { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 1rem; flex-wrap: wrap; }

/* TarjetaCatalogo: filete superior de 2px, foto 8:5, mismo orden de lectura que los posts */
.ac-card {
    display: flex;
    flex-direction: column;
    background: var(--ac-blanco);
    color: var(--ac-texto);
    border-top: var(--ac-trazo) solid var(--ac-negro);
}
.ac-card__head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem 0; }
.ac-card__foto { display: block; }
.ac-card .foto {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: #2A2927;   /* foto: fondo mientras carga o si falta */
}
.ac-card__body { padding-top: 1rem; }
.ac-card__modelo {
    font-family: var(--ac-fuente-display);
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.1;
    letter-spacing: 0;
    margin: .25rem 0 .5rem;
}
.ac-card__modelo a { color: inherit; }
.ac-card__modelo a:hover, .ac-card:hover .ac-card__modelo a {
    text-decoration: underline;
    text-decoration-color: var(--ac-vino);
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}
.ac-card__datos {
    color: var(--ac-texto-suave);
    padding-bottom: 1rem;
    margin: 0;
    border-bottom: var(--ac-hairline) solid var(--ac-borde);
}
.ac-card__datos span + span::before { content: " · "; }
.ac-card__pie { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; flex-wrap: wrap; }
.ac-card__pie .ac-precio { font-size: 1.375rem; line-height: 1.625rem; }