/* =============================================================================
   Sitio publico - Estilos propios (complementan Tailwind CDN)
   Paleta tomada del logo de Gras Automotores:
     naranja #FF6D00 (isotipo) + carbon calido #2B2B1D (tipografia)
   ============================================================================= */

:root {
    --color-primario: #FF6D00;          /* Naranja del isotipo del logo */
    --color-primario-oscuro: #D95A00;   /* Naranja quemado para hover */
    --color-primario-claro: #FF8A2B;    /* Naranja claro para acentos */
    --color-primario-brillante: #FFA24D;/* Resaltes sobre fondo oscuro */
    --color-primario-texto: #C24E00;    /* Naranja legible como TEXTO sobre blanco */
    --color-negro: #22221A;             /* Carbon calido (fondo oscuro del sitio) */
    --color-gris-900: #2B2B1D;          /* Carbon del texto del logo */
    --color-gris-800: #4B4B40;          /* Gris del logo */
    --color-gris-500: #7E7E70;
    --color-gris-200: #E4E2DB;
    --color-gris-100: #F1EFEA;
    --color-gris-50:  #F8F7F4;

    /* Sombras derivadas del naranja (antes eran azules) */
    --sombra-primario: rgba(255,109,0,.18);
    --sombra-primario-fuerte: rgba(255,109,0,.28);
}

* { -webkit-font-smoothing: antialiased; }

body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--color-gris-900);
    background: #fff;
}

/* --- Utilidades de color --- */
.bg-primario { background-color: var(--color-primario); }
.bg-primario-claro { background-color: var(--color-primario-claro); }
.text-primario { color: var(--color-primario-texto); }
.text-primario-claro { color: var(--color-primario-claro); }
.border-primario { border-color: var(--color-primario); }
.hover\:text-primario:hover { color: var(--color-primario); }
.hover\:bg-primario:hover { background-color: var(--color-primario); }
/* Inputs del formulario de contacto: los templates la usan desde el inicio y no
   existia en ningun lado; aparecio al compilar Tailwind (2026-09-13). */
.focus\:border-primario:focus { border-color: var(--color-primario); outline: none; }
.hover\:border-primario:hover { border-color: var(--color-primario); }

/* --- Header / Navbar --- */
.barra-top {
    background: var(--color-negro);
    color: #D6D3CA;
    font-size: 0.82rem;
}
.barra-top a { color: #D6D3CA; }
.barra-top a:hover { color: var(--color-primario-brillante); }

.nav-link {
    padding: 0.5rem 0.75rem;
    color: var(--color-gris-900);
    font-weight: 500;
    position: relative;
    transition: color .2s;
}
.nav-link:hover,
.nav-link.activo { color: var(--color-primario); }
.nav-link.activo::after {
    content: '';
    position: absolute;
    left: .75rem; right: .75rem; bottom: -2px;
    height: 3px;
    background: var(--color-primario);
    border-radius: 2px;
}

/* --- Hero --- */
.hero {
    position: relative;
    /* Foto real del frente de la casa central (San Justo) */
    background: url('../img/gras_central.png') center 45%/cover no-repeat;
    color: #fff;
    min-height: 480px;
    display: flex;
    align-items: center;
}
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(34,34,26,.85) 0%, rgba(34,34,26,.58) 55%, rgba(34,34,26,.18) 100%);
    pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.hero h1 {
    font-size: clamp(2rem, 5vw, 3.75rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.05;
}
.hero p { color: #e5e7eb; }

.banner-titulo {
    background:
        linear-gradient(90deg, rgba(34,34,26,.97) 0%, rgba(34,34,26,.80) 45%, rgba(255,109,0,.88) 100%),
        url('../img/textura-carbon.jpg') center/cover;
    color: #fff;
    padding: 2.5rem 0;
}

/* --- Cards de vehiculo --- */
.card-vehiculo {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    transition: transform .25s, box-shadow .25s;
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e7eb;
}
.card-vehiculo:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px var(--sombra-primario);
    border-color: var(--color-primario-claro);
}
.card-vehiculo .img-wrap {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #f3f4f6;
}
.card-vehiculo .img-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s;
}
.card-vehiculo:hover .img-wrap img { transform: scale(1.05); }
.card-vehiculo .badge-condicion {
    position: absolute;
    top: 0; left: 0;
    background: var(--color-primario-claro);
    color: #fff;
    padding: 0.4rem 0.9rem;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    border-bottom-right-radius: 10px;
    box-shadow: 0 2px 8px var(--sombra-primario-fuerte);
}
.card-vehiculo .contenido {
    padding: 1rem 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.card-vehiculo h3 {
    font-weight: 700;
    font-size: 1rem;
    color: #111;
    margin-bottom: .6rem;
    line-height: 1.3;
    min-height: 2.6em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-vehiculo .datos {
    list-style: none;
    padding: 0; margin: 0;
    font-size: 0.82rem;
    color: #4b5563;
    line-height: 1.6;
}
.card-vehiculo .datos strong { color: #111; font-weight: 600; }
.card-vehiculo .precio {
    margin-top: auto;
    padding-top: .8rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--color-primario-texto);
}

/* --- Filtros --- */
.filtros-box {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1.25rem;
}
.filtros-box label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: .3rem;
}
.filtros-box select,
.filtros-box input[type="text"],
.filtros-box input[type="number"] {
    width: 100%;
    padding: .55rem .75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: .9rem;
    background: #fff;
    transition: border .15s, box-shadow .15s;
}
.filtros-box select:focus,
.filtros-box input:focus {
    outline: none;
    border-color: var(--color-primario-claro);
    box-shadow: 0 0 0 3px var(--sombra-primario);
}

/* --- Botones --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1.4rem;
    font-weight: 600;
    border-radius: 6px;
    transition: all .2s;
    cursor: pointer;
    border: none;
    text-decoration: none;
    font-size: .92rem;
}
.btn-primario {
    background: var(--color-primario);
    color: #fff;
}
.btn-primario:hover { background: var(--color-primario-oscuro); }
.btn-secundario {
    background: var(--color-negro);
    color: #fff;
}
.btn-secundario:hover { background: #12120D; }
.btn-outline {
    background: transparent;
    border: 2px solid var(--color-primario);
    color: var(--color-primario);
}
.btn-outline:hover {
    background: var(--color-primario);
    color: #fff;
}
.btn-lg { padding: .9rem 2rem; font-size: 1rem; }

/* --- WhatsApp flotante --- */
.whatsapp-flotante {
    position: fixed;
    bottom: 24px; right: 24px;
    width: 58px; height: 58px;
    background: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(37,211,102,.4);
    z-index: 1000;
    transition: transform .2s;
}
.whatsapp-flotante:hover { transform: scale(1.08); }

/* --- Formulario de contacto lateral --- */
.form-contacto {
    background: linear-gradient(145deg, var(--color-primario) 0%, var(--color-primario-oscuro) 100%);
    color: #fff;
    border-radius: 10px;
    padding: 1.5rem;
    box-shadow: 0 8px 25px var(--sombra-primario-fuerte);
}
.form-contacto h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #fff;
}
.form-contacto input,
.form-contacto textarea {
    width: 100%;
    padding: .65rem .8rem;
    margin-bottom: .7rem;
    border: none;
    border-radius: 4px;
    font-size: .9rem;
    background: #fff;
    color: var(--color-negro);
}
.form-contacto button {
    width: 100%;
    background: var(--color-negro);
    color: #fff;
    padding: .75rem;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.form-contacto button:hover { background: #12120D; }
.form-contacto input:focus,
.form-contacto textarea:focus {
    outline: 2px solid var(--color-primario-brillante);
}

/* --- Galeria ficha --- */
.galeria-principal {
    aspect-ratio: 16/10;
    background: var(--color-negro);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: .6rem;
}
.galeria-principal img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.galeria-miniaturas {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .5rem;
}
.galeria-miniaturas .mini {
    aspect-ratio: 4/3;
    background: #f3f4f6;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border .15s;
}
.galeria-miniaturas .mini.activa { border-color: var(--color-primario); }
.galeria-miniaturas .mini img {
    width: 100%; height: 100%;
    object-fit: cover;
}

/* --- Dropdown menu --- */
.menu-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 220px;
    box-shadow: 0 10px 25px rgba(0,0,0,.12);
    border-radius: 6px;
    padding: .5rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: all .2s;
    z-index: 50;
    border-top: 3px solid var(--color-primario);
}
.tiene-dropdown:hover .menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.menu-dropdown a {
    display: block;
    padding: .55rem 1rem;
    color: #374151;
    font-size: .9rem;
}
.menu-dropdown a:hover {
    background: var(--color-gris-50);
    color: var(--color-primario);
}

/* --- Alertas flash --- */
.alerta {
    padding: .9rem 1.2rem;
    border-radius: 6px;
    margin-bottom: 1.2rem;
    font-weight: 500;
}
.alerta-ok { background: #D1FAE5; color: #065F46; border: 1px solid #6EE7B7; }
.alerta-err { background: #FEE2E2; color: #991B1B; border: 1px solid #FCA5A5; }

/* --- Paginacion --- */
.paginacion {
    display: flex; justify-content: center;
    gap: .4rem;
    margin-top: 2rem;
}
.paginacion a, .paginacion span {
    padding: .5rem .85rem;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    font-size: .9rem;
    text-decoration: none;
    transition: all .15s;
}
.paginacion a:hover { border-color: var(--color-primario); color: var(--color-primario); }
.paginacion .activa {
    background: var(--color-primario);
    color: #fff;
    border-color: var(--color-primario);
    font-weight: 700;
}

/* --- Seccion servicios home --- */
.tarjeta-servicio {
    background: #fff;
    padding: 2rem;
    border-radius: 10px;
    text-align: center;
    transition: all .25s;
    border: 1px solid #e5e7eb;
}
.tarjeta-servicio:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0,0,0,.1);
    border-color: var(--color-primario);
}
.tarjeta-servicio .icono {
    width: 70px; height: 70px;
    margin: 0 auto 1rem;
    background: rgba(255,109,0,.10);
    color: var(--color-primario);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tarjeta-servicio h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: .5rem;
    color: #111;
}
.tarjeta-servicio p {
    color: #6b7280;
    font-size: .9rem;
    line-height: 1.55;
}

/* --- Footer --- */
footer.sitio-footer {
    background: var(--color-negro);
    color: #A9A599;
    padding: 3rem 0 1rem;
}
footer.sitio-footer h4 {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 1rem;
}
footer.sitio-footer a { color: #A9A599; }
footer.sitio-footer a:hover { color: var(--color-primario-brillante); }
footer .copy {
    border-top: 1px solid var(--color-gris-900);
    margin-top: 2rem;
    padding-top: 1.2rem;
    text-align: center;
    font-size: .85rem;
}

/* --- Sucursales --- */
.card-sucursal {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    transition: all .25s;
    /* Columna: el contenido estira hasta el fondo y el boton del mapa queda
       alineado en todas las tarjetas de la fila, tengan o no telefono. */
    display: flex;
    flex-direction: column;
}
.card-sucursal:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,.1);
    border-color: var(--color-primario);
}
.card-sucursal .img {
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, var(--color-gris-800) 0%, var(--color-negro) 60%, var(--color-primario-oscuro) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.22);
}
.card-sucursal .img i { width: 80px; height: 80px; }
.card-sucursal .contenido {
    padding: 1.2rem 1.3rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.card-sucursal .contenido > .btn { margin-top: auto; }
.card-sucursal h3 {
    font-weight: 700;
    font-size: 1.1rem;
    color: #111;
    margin-bottom: .4rem;
}
.card-sucursal p { color: #6b7280; font-size: .88rem; margin-bottom: 1rem; }

/* --- Equipamiento tags --- */
.tag-equip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .8rem;
    background: var(--color-gris-50);
    border: 1px solid var(--color-gris-200);
    border-radius: 999px;
    font-size: .82rem;
    color: var(--color-gris-800);
    margin: .15rem;
}
.tag-equip i { color: var(--color-primario-texto); width: 14px; height: 14px; }

/* --- Responsive --- */
@media (max-width: 768px) {
    .hero { min-height: 420px; }
    .galeria-miniaturas { grid-template-columns: repeat(4, 1fr); }
}

/* --- Naranja sobre fondos oscuros -------------------------------------------
   Sobre blanco el naranja legible es el quemado (--color-primario-texto), pero
   sobre el carbon del footer / barra superior / banners hay que usar el vivo,
   si no el texto se apaga. --------------------------------------------------- */
.barra-top .text-primario,
.banner-titulo .text-primario,
footer.sitio-footer .text-primario,
.hero .text-primario {
    color: var(--color-primario-brillante);
}
.banner-titulo a:hover,
.barra-top .hover\:text-primario:hover,
footer.sitio-footer .hover\:text-primario:hover {
    color: var(--color-primario-brillante);
}

/* --- Logo de marca ---------------------------------------------------------- */
.logo-marca { display: flex; align-items: center; gap: .6rem; }
.logo-marca img { height: 46px; width: auto; display: block; }
.logo-marca .texto { line-height: 1; }
.logo-marca .nombre {
    font-weight: 800;
    font-size: 1.45rem;
    letter-spacing: -.02em;
    color: var(--color-gris-900);
}
.logo-marca .nombre .acento { color: var(--color-primario); }
.logo-marca .bajada {
    font-size: .58rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--color-gris-500);
    margin-top: .18rem;
}
/* Variante para el footer (fondo carbon) */
.logo-marca.claro .nombre { color: #fff; }
.logo-marca.claro .bajada { color: var(--color-gris-500); }
.logo-marca.claro img { filter: brightness(0) invert(1); }
.logo-marca.claro .isotipo { color: var(--color-primario); }

/* --- Sucursales: datos de contacto ------------------------------------------ */
.card-sucursal .datos-sucursal {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    font-size: .88rem;
    color: var(--color-gris-800);
}
.card-sucursal .datos-sucursal li {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: .45rem;
    line-height: 1.45;
}
.card-sucursal .datos-sucursal i {
    width: 16px; height: 16px;
    margin-top: .15rem;
    color: var(--color-primario);
    flex-shrink: 0;
}
.card-sucursal .datos-sucursal a:hover { color: var(--color-primario-texto); }

/* --- Superficies oscuras de marca --------------------------------------------
   Reemplazan a bg-gray-900 / bg-black de Tailwind, que son grises frios y
   desentonan con el carbon calido del logo. ---------------------------------- */
.bg-carbon { background-color: var(--color-negro); }
.bg-carbon-suave { background-color: var(--color-gris-800); }
.hover\:bg-carbon-suave:hover { background-color: var(--color-gris-800); }

/* --- Franjas de logos (marcas y bancos) -------------------------------------- */
.franja-logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1.5rem 1rem;
    align-items: center;
}
.franja-logos .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: .8rem .5rem;
    border-radius: 10px;
    transition: background .2s, transform .2s;
}
.franja-logos a.item:hover { background: var(--color-gris-50); transform: translateY(-3px); }
.franja-logos img {
    height: 44px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .6;
    transition: filter .2s, opacity .2s;
}
.franja-logos .item:hover img { filter: none; opacity: 1; }
.franja-logos .nombre {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-gris-500);
}
.franja-logos .item:hover .nombre { color: var(--color-primario-texto); }
/* Los logos de bancos son PNG con fondo transparente y colores fuertes:
   ahi no conviene el gris, se muestran como son. */
.franja-logos.a-color img { filter: none; opacity: .9; height: 52px; }

/* --- Foto de la sucursal ----------------------------------------------------- */
.card-sucursal .img {
    position: relative;
    background:
        linear-gradient(135deg, rgba(75,75,64,.9) 0%, rgba(34,34,26,.85) 60%, rgba(217,90,0,.9) 100%),
        url('../img/textura-carbon.jpg') center/cover;
}
.card-sucursal .img.con-foto { background: none; }
.card-sucursal .img.con-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.card-sucursal .sin-foto {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    height: 100%;
    color: rgba(255,255,255,.85);
}
.card-sucursal .sin-foto i { width: 42px; height: 42px; color: var(--color-primario-brillante); }
.card-sucursal .sin-foto span {
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* --- Anti-spam y consentimiento del formulario de contacto -------------- */
/* Honeypot: fuera de pantalla, no display:none (algunos bots lo detectan). */
.hp-campo {
    position: absolute !important;
    left: -10000px !important;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.consentimiento {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    font-size: .85rem;
    color: #52525b;
    line-height: 1.4;
}
.consentimiento input[type="checkbox"] {
    width: auto !important;
    margin-top: .25rem;
    flex-shrink: 0;
}
.consentimiento a { text-decoration: underline; }
.form-contacto .consentimiento { color: #d4d4d8; margin: .5rem 0 .75rem; }
.form-contacto .consentimiento a { color: #fff; }