/* =========================================================
   AUTOS FOCA
   Identidad visual: azul, negro y blanco
   ASP.NET Core MVC - .NET 8
   ========================================================= */

:root {
    --foca-blue: #0785f9;
    --foca-blue-dark: #0067d7;
    --foca-cyan: #11c9ff;
    --foca-navy: #061321;
    --foca-black: #030912;
    --foca-text: #111b2b;
    --foca-muted: #607087;
    --foca-border: #e0e8f1;
    --foca-white: #ffffff;
    --foca-container: 1300px;
    --foca-radius: 12px;
    --foca-shadow: 0 12px 35px rgba(7, 29, 55, 0.09);
}

/* RESET */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px;
}

body {
    margin: 0;
    color: var(--foca-text);
    background: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body,
button,
input,
select {
    font-family: Arial, Helvetica, sans-serif;
}

button,
input,
select {
    font-size: inherit;
}

button,
a,
select {
    -webkit-tap-highlight-color: transparent;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    cursor: pointer;
}

img {
    display: block;
    max-width: 100%;
}

[hidden] {
    display: none !important;
}

.foca-container {
    width: min(var(--foca-container), calc(100% - 48px));
    margin-inline: auto;
}

/* =========================================================
   BARRA SUPERIOR
   ========================================================= */

.foca-topbar {
    position: relative;
    z-index: 20;
    height: 35px;
    color: #fff;
    background: #04101d;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.foca-topbar-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.foca-top-contact {
    display: flex;
    align-items: center;
    gap: 22px;
}

    .foca-top-contact a {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #f4f7fc;
        font-size: 12px;
        white-space: nowrap;
        transition: color 0.2s ease;
    }

        .foca-top-contact a span {
            color: var(--foca-cyan);
            font-size: 15px;
        }

        .foca-top-contact a:hover {
            color: var(--foca-cyan);
        }

.foca-social {
    display: flex;
    align-items: center;
    gap: 19px;
}

    .foca-social a,
    .foca-footer-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: 700;
        font-size: 17px;
        transition: color 0.2s ease;
    }

        .foca-social a:hover,
        .foca-footer-social a:hover {
            color: var(--foca-cyan);
        }

/* =========================================================
   ENCABEZADO Y NAVEGACIÓN
   ========================================================= */

.foca-header {
    position: absolute;
    z-index: 15;
    top: 35px;
    left: 0;
    width: 100%;
    min-height: 82px;
    color: #fff;
    background: #061321; /* Cambiado a un tono oscuro sólido y elegante acorde al sitio */
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.foca-header-inner {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.foca-brand {
    flex: 0 0 245px;
    display: flex;
    align-items: center;
    min-width: 0;
}

    .foca-brand img {
        width: 245px;
        max-height: 67px;
        object-fit: contain;
        object-position: left center;
    }

.foca-brand-fallback {
    display: none;
    color: #fff;
    font-size: 27px;
    font-style: italic;
    font-weight: 900;
    letter-spacing: -1.6px;
    line-height: 1;
}

    .foca-brand-fallback > span {
        color: var(--foca-blue);
    }

    .foca-brand-fallback small {
        display: block;
        margin-top: 7px;
        font-size: 8px;
        font-style: normal;
        letter-spacing: 3px;
        text-align: center;
    }

.foca-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 2.4vw, 38px);
    height: 82px;
}

.foca-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    color: rgba(255, 255, 255, 0.96);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    transition: color 0.2s ease;
}

    .foca-nav-link::after {
        position: absolute;
        bottom: 20px;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--foca-blue);
        content: "";
        transition: width 0.2s ease;
    }

    .foca-nav-link:hover,
    .foca-nav-link.active {
        color: #fff;
    }

        .foca-nav-link:hover::after,
        .foca-nav-link.active::after {
            width: 100%;
        }

.foca-contact-button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 47px;
    padding: 0 23px;
    color: #fff;
    background: var(--foca-blue);
    border-radius: 11px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 7px 20px rgba(0, 116, 255, 0.18);
    transition: background 0.2s ease, transform 0.2s ease;
}

    .foca-contact-button:hover {
        color: #fff;
        background: var(--foca-blue-dark);
        transform: translateY(-2px);
    }

    .foca-contact-button > span {
        font-size: 19px;
    }

.foca-menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    padding: 10px;
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 8px;
}

    .foca-menu-toggle span {
        display: block;
        width: 100%;
        height: 2px;
        margin: 4px 0;
        background: #fff;
    }

/* =========================================================
   CONTENIDO PRINCIPAL (UNIFICADO PARA TODAS LAS VISTAS)
   ========================================================= */

.foca-page-content {
    min-height: 500px;
    padding-top: 135px; /* Altura exacta y unificada para que Marcas, Vehículos y Modelos queden a la misma altura */
    padding-bottom: 50px;
}

.foca-home {
    overflow: hidden;
}

/* =========================================================
   HERO
   ========================================================= */

.foca-hero {
    position: relative;
    min-height: 475px;
    color: #fff;
    background: var(--foca-navy);
    isolation: isolate;
}

.foca-hero-background {
    position: absolute;
    z-index: -2;
    inset: 0;
    background-color: var(--foca-navy);
    background-image: url("/images/hero-autos.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.foca-hero-overlay {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient( 90deg, rgba(3, 14, 27, 0.92) 0%, rgba(3, 14, 27, 0.76) 31%, rgba(3, 14, 27, 0.25) 58%, rgba(3, 14, 27, 0.02) 100% ), linear-gradient( 0deg, rgba(3, 14, 27, 0.30) 0%, transparent 45% );
}

.foca-hero-inner {
    position: relative;
    min-height: 475px;
    display: flex;
    align-items: center;
    padding-top: 82px;
    padding-bottom: 43px;
}

.foca-hero-copy {
    width: min(600px, 53%);
    padding-top: 3px;
}

.foca-eyebrow {
    display: inline-block;
    margin-bottom: 9px;
    color: var(--foca-cyan);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
}

.foca-hero-copy h1 {
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(38px, 4vw, 58px);
    font-weight: 950;
    font-style: italic;
    letter-spacing: -2px;
    line-height: 0.99;
    text-transform: uppercase;
}

    .foca-hero-copy h1 span {
        color: #078af9;
    }

.foca-hero-copy > p {
    margin: 0;
    color: #fff;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}

.foca-benefits {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
    margin-top: 31px;
}

.foca-benefit {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
}

.foca-benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 36px;
    color: #fff;
    font-size: 27px;
}

/* =========================================================
   BUSCADOR
   ========================================================= */

.foca-search-wrap {
    position: relative;
    z-index: 5;
    width: min(var(--foca-container), calc(100% - 48px));
    margin: -35px auto 0;
}

.foca-search {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr)) 195px;
    align-items: end;
    gap: 22px;
    padding: 17px 25px;
    background: #fff;
    border: 1px solid rgba(218, 229, 241, 0.85);
    border-radius: 13px;
    box-shadow: 0 12px 35px rgba(20, 54, 88, 0.09);
}

.foca-filter {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
}

    .foca-filter > span {
        color: #111b2b;
        font-size: 12px;
        font-weight: 700;
    }

    .foca-filter select {
        width: 100%;
        height: 37px;
        padding: 0 30px 0 12px;
        color: #253b57;
        background-color: #fff;
        border: 1px solid #dbe4ef;
        border-radius: 8px;
        outline: none;
        font-size: 12px;
        appearance: auto;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

        .foca-filter select:focus {
            border-color: var(--foca-blue);
            box-shadow: 0 0 0 3px rgba(7, 133, 249, 0.1);
        }

.foca-search-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    padding: 8px 12px;
    color: #fff;
    background: var(--foca-blue);
    border: 0;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.25;
    transition: background 0.2s ease, transform 0.2s ease;
}

    .foca-search-button:hover {
        background: var(--foca-blue-dark);
        transform: translateY(-1px);
    }

.foca-search-symbol {
    position: relative;
    display: inline-block;
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    border: 2px solid #fff;
    border-radius: 50%;
}

    .foca-search-symbol::after {
        position: absolute;
        right: -6px;
        bottom: -4px;
        width: 8px;
        height: 2px;
        background: #fff;
        border-radius: 2px;
        content: "";
        transform: rotate(48deg);
    }

.foca-mobile-break {
    display: none;
}

/* =========================================================
   SECCIONES DE INVENTARIO
   ========================================================= */

.foca-inventory {
    padding-top: 19px;
    padding-bottom: 0;
}

.foca-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 10px;
}

    .foca-section-heading h2 {
        margin: 0;
        color: #101b2b;
        font-size: 22px;
        font-weight: 950;
        letter-spacing: -0.8px;
        line-height: 1.3;
    }

        .foca-section-heading h2 span {
            color: var(--foca-blue);
        }

.foca-view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #006dff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

    .foca-view-all span {
        font-size: 20px;
        transition: transform 0.2s ease;
    }

    .foca-view-all:hover span {
        transform: translateX(4px);
    }

/* =========================================================
   TARJETAS DE VEHÍCULOS
   ========================================================= */

.foca-car-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.foca-car-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid #e2eaf3;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(12, 39, 69, 0.025);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

    .foca-car-card:hover {
        z-index: 2;
        box-shadow: var(--foca-shadow);
        transform: translateY(-3px);
    }

.foca-car-image-wrap {
    position: relative;
    height: 150px;
    overflow: hidden;
    background: #e6edf5;
}

.foca-car-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.35s ease;
}

.foca-car-card:hover .foca-car-image {
    transform: scale(1.035);
}

.foca-featured-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px 11px;
    color: #fff;
    background: var(--foca-blue);
    border-radius: 20px;
    font-size: 10px;
    font-weight: 900;
}

.foca-favorite {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    padding: 0;
    color: #fff;
    background: rgba(5, 24, 42, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    font-size: 23px;
    line-height: 1;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    transition: background 0.2s ease;
}

    .foca-favorite[aria-pressed="true"] {
        color: #ff3e66;
        background: #fff;
        text-shadow: none;
    }

.foca-car-price {
    position: absolute;
    bottom: 8px;
    left: 10px;
    max-width: calc(100% - 20px);
    overflow: hidden;
    padding: 5px 10px;
    color: #fff;
    background: var(--foca-blue);
    border-radius: 7px;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.foca-car-body {
    position: relative;
    min-height: 95px;
    padding: 7px 15px 12px;
}

    .foca-car-body h3 {
        margin: 0 0 7px;
        overflow: hidden;
        color: #101b2b;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.foca-car-specs {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 6px 8px;
    padding-right: 24px;
}

    .foca-car-specs > span {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        overflow: hidden;
        color: #243b59;
        font-size: 10px;
        line-height: 1.4;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.foca-spec-icon {
    flex: 0 0 auto;
    color: #173657;
    font-size: 13px;
    font-weight: 700;
}

.foca-car-location {
    grid-column: 1 / -1;
}

.foca-car-details {
    position: absolute;
    right: 12px;
    bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--foca-blue);
    background: #fff;
    border: 1px solid #bfd5eb;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    transition: color 0.2s ease, background 0.2s ease;
}

    .foca-car-details:hover {
        color: #fff;
        background: var(--foca-blue);
    }

.foca-empty-state {
    padding: 55px 20px;
    text-align: center;
    background: #f7faff;
    border: 1px solid var(--foca-border);
    border-radius: 12px;
}

    .foca-empty-state h3 {
        margin: 0 0 8px;
        font-size: 20px;
    }

    .foca-empty-state p {
        margin: 0;
        color: var(--foca-muted);
    }

.foca-inventory-note {
    margin-bottom: 15px;
    color: var(--foca-muted);
    font-size: 13px;
}

/* =========================================================
   BANNERS COMERCIALES
   ========================================================= */

.foca-promos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 7px;
    padding-bottom: 5px;
}

.foca-promo {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 112px;
    overflow: hidden;
    color: #fff;
    background-color: #061321;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

    .foca-promo::before {
        position: absolute;
        inset: 0;
        background: linear-gradient( 90deg, rgba(3, 13, 24, 0.06) 0%, rgba(3, 13, 24, 0.38) 34%, rgba(3, 13, 24, 0.96) 62%, rgba(3, 13, 24, 0.94) 100% );
        content: "";
        transition: opacity 0.2s ease;
    }

    .foca-promo:hover::before {
        opacity: 0.85;
    }

.foca-promo-financing {
    background-image: url("/images/financiamiento.jpg");
}

.foca-promo-trade {
    background-image: url("/images/recibimos-usado.jpg");
}

.foca-promo-certified {
    background-image: url("/images/vehiculos-certificados.jpg");
}

.foca-promo-content {
    position: relative;
    width: 100%;
    margin-left: 54%;
    padding: 15px 42px 15px 0;
}

    .foca-promo-content h2 {
        margin: 0 0 5px;
        color: #fff;
        font-size: 19px;
        font-weight: 950;
        letter-spacing: -0.6px;
        line-height: 1.1;
    }

        .foca-promo-content h2 span {
            color: var(--foca-cyan);
        }

    .foca-promo-content p {
        margin: 0;
        color: #fff;
        font-size: 13px;
        line-height: 1.35;
    }

.foca-promo-arrow {
    position: absolute;
    right: 14px;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    color: var(--foca-cyan);
    border: 1px solid var(--foca-cyan);
    border-radius: 50%;
    font-size: 21px;
    transition: color 0.2s ease, background 0.2s ease;
}

.foca-promo:hover .foca-promo-arrow {
    color: #061321;
    background: var(--foca-cyan);
}

/* =========================================================
   PIE DE PÁGINA
   ========================================================= */

.foca-footer {
    color: #fff;
    background: #061321;
    border-top: 2px solid #172a3d;
}

.foca-footer-inner {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1.25fr auto;
    align-items: center;
    gap: 25px;
    min-height: 103px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.foca-footer-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    padding-right: 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}

    .foca-footer-brand img {
        width: 190px;
        max-height: 60px;
        object-fit: contain;
        object-position: left center;
    }

    .foca-footer-brand .foca-brand-fallback {
        font-size: 23px;
    }

.foca-footer-item {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.foca-footer-icon {
    flex: 0 0 auto;
    color: #fff;
    font-size: 24px;
}

.foca-footer-item > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.foca-footer-item strong {
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.foca-footer-item span:not(.foca-footer-icon),
.foca-footer-item a {
    overflow-wrap: anywhere;
    color: #edf3fa;
    font-size: 12px;
}

    .foca-footer-item a:hover {
        color: var(--foca-cyan);
    }

.foca-footer-social {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-left: 20px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.foca-footer-bottom {
    padding: 12px 0;
    color: #aab8c8;
    background: #040c15;
    font-size: 11px;
    text-align: center;
}

/* =========================================================
   TABLETAS
   ========================================================= */

@media (max-width: 1100px) {

    .foca-container {
        width: calc(100% - 36px);
    }

    .foca-brand {
        flex-basis: 190px;
    }

        .foca-brand img {
            width: 190px;
        }

    .foca-header-inner {
        gap: 15px;
    }

    .foca-navigation {
        gap: 17px;
    }

    .foca-nav-link {
        font-size: 11px;
    }

    .foca-contact-button {
        min-height: 43px;
        padding-inline: 15px;
        font-size: 11px;
    }

    .foca-search-wrap {
        width: calc(100% - 36px);
    }

    .foca-search {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .foca-search-button {
        min-height: 45px;
    }

    .foca-car-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .foca-car-image-wrap {
        height: 190px;
    }

    .foca-promo-content h2 {
        font-size: 16px;
    }

    .foca-promo-content p {
        font-size: 12px;
    }

    .foca-footer-inner {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
    }

    .foca-footer-brand {
        border-right: 0;
    }

    .foca-footer-social {
        border-left: 0;
        padding-left: 0;
    }
}

/* =========================================================
   TELÉFONOS (Corrección responsive barra superior)
   ========================================================= */

@media (max-width: 700px) {

    html {
        scroll-padding-top: 85px;
    }

    .foca-container {
        width: calc(100% - 30px);
    }

    .foca-topbar {
        height: auto;
        min-height: 38px;
        padding: 5px 0;
    }

    .foca-topbar-inner {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        text-align: center;
    }

    .foca-top-contact {
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
    }

        .foca-top-contact a {
            gap: 5px;
            font-size: 10px;
        }

            .foca-top-contact a span {
                font-size: 12px;
            }

    .foca-social {
        display: none;
    }

    .foca-header {
        top: 52px;
        min-height: 70px;
    }

    .foca-header-inner {
        min-height: 70px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .foca-brand {
        flex: 1 1 auto;
        max-width: 210px;
    }

        .foca-brand img {
            width: 190px;
            max-height: 54px;
        }

    .foca-menu-toggle {
        display: block;
        flex: 0 0 auto;
        order: 2;
    }

    .foca-contact-button {
        display: none;
    }

    .foca-navigation {
        position: absolute;
        top: calc(100% - 1px);
        right: 0;
        left: 0;
        display: none;
        height: auto;
        align-items: stretch;
        flex-direction: column;
        gap: 0;
        padding: 8px 15px 15px;
        background: #071525;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
    }

        .foca-navigation.is-open {
            display: flex;
        }

    .foca-nav-link {
        min-height: 45px;
        height: auto;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 12px;
    }

        .foca-nav-link::after {
            display: none;
        }

    .foca-hero {
        min-height: 570px;
    }

    .foca-hero-background {
        background-position: 62% center;
    }

    .foca-hero-overlay {
        background: linear-gradient( 90deg, rgba(3, 14, 27, 0.88) 0%, rgba(3, 14, 27, 0.68) 58%, rgba(3, 14, 27, 0.27) 100% );
    }

    .foca-hero-inner {
        min-height: 570px;
        align-items: flex-start;
        padding-top: 155px;
        padding-bottom: 70px;
    }

    .foca-hero-copy {
        width: 100%;
        max-width: 480px;
    }

    .foca-eyebrow {
        font-size: 11px;
        letter-spacing: 1.5px;
    }

    .foca-hero-copy h1 {
        font-size: clamp(37px, 9vw, 52px);
        letter-spacing: -1.4px;
    }

    .foca-hero-copy > p {
        max-width: 390px;
        font-size: 14px;
    }

    .foca-benefits {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 12px;
        margin-top: 28px;
    }

    .foca-benefit {
        gap: 8px;
        font-size: 10px;
    }

    .foca-benefit-icon {
        width: 27px;
        font-size: 23px;
    }

    .foca-search-wrap {
        width: calc(100% - 24px);
        margin-top: -36px;
    }

    .foca-search {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 13px;
        padding: 17px;
        border-radius: 12px;
    }

    .foca-filter > span {
        font-size: 11px;
    }

    .foca-filter select {
        height: 40px;
        font-size: 12px;
    }

    .foca-search-button {
        grid-column: 1 / -1;
        min-height: 47px;
    }

    .foca-mobile-break {
        display: none;
    }

    .foca-inventory {
        padding-top: 24px;
    }

    .foca-section-heading {
        align-items: flex-start;
        gap: 10px;
    }

        .foca-section-heading h2 {
            font-size: 18px;
        }

    .foca-view-all {
        gap: 3px;
        font-size: 11px;
    }

        .foca-view-all span {
            font-size: 17px;
        }

    .foca-car-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .foca-car-image-wrap {
        height: clamp(190px, 58vw, 290px);
    }

    .foca-car-body {
        min-height: 100px;
        padding: 10px 14px 13px;
    }

        .foca-car-body h3 {
            font-size: 14px;
        }

    .foca-car-specs > span {
        font-size: 11px;
    }

    .foca-car-price {
        font-size: 14px;
    }

    .foca-promos {
        grid-template-columns: 1fr;
        gap: 5px;
        margin-top: 25px;
    }

    .foca-promo {
        min-height: 135px;
    }

    .foca-promo-content {
        margin-left: 48%;
        padding-right: 50px;
    }

        .foca-promo-content h2 {
            font-size: 18px;
        }

    .foca-footer-inner {
        grid-template-columns: 1fr;
        gap: 19px;
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .foca-footer-brand {
        padding-bottom: 17px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

        .foca-footer-brand img {
            width: 190px;
        }

    .foca-footer-item {
        gap: 13px;
    }

    .foca-footer-social {
        gap: 22px;
        padding-top: 13px;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }
}

/* =========================================================
   TELÉFONOS PEQUEÑOS
   ========================================================= */

@media (max-width: 380px) {

    .foca-container {
        width: calc(100% - 22px);
    }

    .foca-top-contact {
        gap: 9px;
    }

        .foca-top-contact a {
            font-size: 9px;
        }

    .foca-brand img {
        width: 160px;
    }

    .foca-hero-copy h1 {
        font-size: 35px;
    }

    .foca-benefit {
        font-size: 9px;
    }

    .foca-section-heading h2 {
        font-size: 16px;
    }

    .foca-view-all {
        font-size: 10px;
    }

    .foca-search {
        padding: 12px;
        gap: 10px;
    }

    .foca-promo-content {
        margin-left: 43%;
    }
}

/* =========================================================
   ACCESIBILIDAD Y MOVIMIENTO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}