/* =========================================================
   Autos Caribe - estilo "showroom":
   escenarios oscuros + superficies claras, tipografía en
   MAYÚSCULAS, esquinas rectas, sin sombras y un solo acento.
   Paleta: vino #9E3F46, beige #F8F7F4, negro #262626, gris #666666
   ========================================================= */
:root {
    /* Colores de marca */
    --ac-vino: #9E3F46;
    --ac-vino-oscuro: #7C3136;
    --ac-beige: #F8F7F4;
    --ac-negro: #262626;
    --ac-gris: #666666;

    /* Superficies */
    --ac-blanco: #FFFFFF;          /* lienzo claro */
    --ac-marmol: #F2F0EC;          /* banda clara alterna */
    --ac-crema: #F2F0EC;
    --ac-arena: #E5E2DB;
    --ac-escenario: #262626;       /* escenario oscuro */
    --ac-profundo: #1A1A1A;        /* menú y pie de página */

    /* Textos y bordes */
    --ac-texto: #262626;
    --ac-texto-suave: #666666;
    --ac-borde: #DDD9D1;           /* línea fina sobre claro */
    --ac-borde-oscuro: #3D3D3D;    /* línea fina sobre oscuro */

    /* Compatibilidad con clases anteriores */
    --ac-fondo: #FFFFFF;
    --ac-boton: #9E3F46;
    --ac-boton-hover: #7C3136;
    --ac-boton-oscuro: #262626;
    --ac-boton-oscuro-hover: #000000;
    --ac-peligro: #7C3136;
    --ac-peligro-hover: #5F2529;

    /* Tipografía */
    --ac-fuente-titulo: "Barlow Condensed", "Arial Narrow", sans-serif;
    --ac-fuente-texto: "Barlow", "Segoe UI", system-ui, sans-serif;
    --ac-espaciado-titulo: .045em;
    --ac-espaciado-etiqueta: .18em;

    /* 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-titulo);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ac-espaciado-titulo);
    color: var(--ac-texto);
    line-height: 1.05;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); }
h3 { font-size: 1.9rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.2rem; letter-spacing: .06em; }

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);
    transition: transform .4s ease;
}
.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; }
}