/* /assets/css/style.css - GP Repuestos y Lubricentro */

/* --- FUENTES Y PALETA (Automotriz) --- */
:root {
    --primary-color: #E53935; /* Rojo corporativo */
    --primary-700: #c62828;
    --secondary-color: #111827; /* Negro moderno */
    --text-color: #1f2d2a;
    --muted-text: #5b6b68;
    --surface: #ffffff;
    --surface-alt: #F3F4F6; /* gris claro moderno */
    --border: #e6ecef;
    --font-heading: 'Anton', sans-serif;
    --font-body: 'Montserrat', sans-serif;
    --glass: rgba(255,255,255,0.72);
    --glass-border: rgba(255,255,255,0.26);
}

body {
    font-family: var(--font-body);
    padding-top: 75px; /* navbar fija */
    background-color: var(--surface);
    color: var(--text-color);
}

h1, h2 {
    font-family: var(--font-heading);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
h3, h4, h5, h6 {
    font-family: var(--font-body);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

p, li, a, label, input, textarea, small {
    font-family: var(--font-body);
    font-weight: 400;
}

.section-title { font-weight: 400; margin-bottom: 0.5rem; }

a { color: var(--primary-700); }
a:hover { color: var(--secondary-color); }

/* --- HERO --- */
.hero-section {
    position: relative;
    background: radial-gradient(80% 60% at 30% 30%, #2b2f33, #0b0c0d 70%, #000 100%);
    color: #fff;
}
.hero-section::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(1000px 400px at 20% 0%, rgba(229,57,53,0.18), transparent 60%),
      repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 8px);
    opacity: 0.75;
    pointer-events:none;
}
.hero-section > .container { position: relative; z-index: 1; }
.hero-illustration {
    max-width: 520px;
}
.hero-section h1 {
    font-size: clamp(2.4rem, 6vw, 4.2rem);
    font-family: var(--font-body);
    font-weight: 800;
    letter-spacing: -0.02em;
    text-transform: none;
    text-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.hero-section p { max-width: 760px; margin: 0.75rem auto 1.25rem; color: rgba(255,255,255,0.92); }

/* Hero carousel */
#heroOffersCarousel .carousel-inner {
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 18px 60px rgba(0,0,0,0.35);
    background: rgba(255,255,255,0.02);
    backdrop-filter: blur(10px);
}
#heroOffersCarousel .carousel-inner img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
#heroOffersCarousel .carousel-control-prev-icon,
#heroOffersCarousel .carousel-control-next-icon {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

/* --- NAVBAR / BOTONES --- */
.navbar .brand-logo { height: 48px; width: auto; }
.navbar-glass { background: rgba(255,255,255,0.96); transition: background 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
.navbar-glass.is-glass {
    background: var(--glass);
    border-color: rgba(255,255,255,0.18) !important;
    box-shadow: 0 12px 40px rgba(17,24,39,0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* Navbar alto fijo (estado cerrado) */
.navbar.navbar-glass{
    min-height: 75px;
    padding-top: 0;
    padding-bottom: 0;
}
.navbar.navbar-glass > .container{
    min-height: 75px;
}
.navbar.navbar-glass .navbar-brand{
    display: inline-flex;
    align-items: center;
    height: 75px;
}
.navbar.navbar-glass .navbar-toggler{
    align-self: center;
}
.navbar-light .navbar-nav .nav-link { color: var(--text-color); padding: 0.5rem 0.75rem; border-radius: 0.5rem; transition: background-color 0.2s ease, color 0.2s ease, padding 0.2s ease; }
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus { color: var(--primary-700); background-color: var(--surface-alt); }
.navbar-light .navbar-nav .nav-link.active { color: var(--surface); background-color: var(--primary-color); padding: 0.5rem 1rem; }
.btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); color: #ffffff; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--primary-700); border-color: var(--primary-700); color: #ffffff; }

.btn-whatsapp{
    background-color: #16a34a; /* verde WhatsApp */
    border-color: #16a34a;
    color: #ffffff;
}
.btn-whatsapp:hover, .btn-whatsapp:focus{
    background-color: #15803d;
    border-color: #15803d;
    color: #ffffff;
}
.btn-whatsapp.btn-cta{
    box-shadow: 0 14px 40px rgba(22,163,74,0.22);
}
.btn-whatsapp.btn-cta:hover{
    box-shadow: 0 20px 52px rgba(22,163,74,0.28);
}

.btn-cta {
    border-radius: 999px;
    padding: 0.85rem 1.15rem;
    box-shadow: 0 14px 40px rgba(229,57,53,0.28);
    transform: translateY(0);
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 20px 52px rgba(229,57,53,0.34); filter: brightness(1.02); }

/* --- SECCIONES --- */
.py-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.bg-subtle { background: var(--surface-alt); }
.title-underline { width: 80px; height: 3px; margin: 0.75rem auto 0; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); border-radius: 2px; }

/* --- Transiciones premium entre secciones --- */
.section-premium-light{
    background: linear-gradient(180deg, #ffffff 0%, var(--surface-alt) 100%);
}
.section-premium-alt{
    background: linear-gradient(180deg, var(--surface-alt) 0%, #ffffff 100%);
}
.section-premium-divider{
    position: relative;
}
.section-premium-divider::before{
    content:"";
    position:absolute;
    left:0; right:0; top:-1px;
    height:56px;
    background: linear-gradient(180deg, rgba(17,24,39,0.18) 0%, rgba(17,24,39,0) 100%);
    opacity: 0.55;
    pointer-events:none;
}

/* --- GRID DE MARCAS --- */
.brand-logos img {
    height: 56px; /* altura uniforme */
    width: auto;
    object-fit: contain;
    filter: grayscale(100%) contrast(1.05); /* blanco y negro por defecto */
    opacity: 0.85;
    transition: transform 0.25s ease, filter 0.25s ease, opacity 0.25s ease;
}
.brand-logos img:hover { transform: translateY(-2px) scale(1.02); filter: grayscale(0%); opacity: 1; }

/* --- BRAND SCROLLER (logos en movimiento) --- */
.brand-scroller {
    overflow: hidden;
    position: relative;
    /* fade en los laterales para look moderno */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.brand-track {
    display: flex;
    align-items: center;
    gap: 32px;
    animation: scrollBrands 28s linear infinite;
    will-change: transform;
}
.brand-item{
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 14px 18px;
    border-radius: 16px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(17,24,39,0.08);
    box-shadow: 0 12px 30px rgba(17,24,39,0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.brand-track img { height: 56px; width: auto; object-fit: contain; }
.brand-scroller:hover .brand-track { animation-play-state: paused; }

/* --- SECCIÓN TALLER (agresiva/deportiva) --- */
.section-taller{
    position: relative;
    color: #fff;
    background: linear-gradient(135deg, rgba(229,57,53,1) 0%, rgba(17,24,39,1) 58%, rgba(0,0,0,1) 100%);
    overflow: hidden;
}
.section-taller::before,
.section-taller::after{
    content:"";
    position:absolute;
    left:0; right:0;
    height:42px;
    background: var(--surface);
    opacity: 0.06;
}
.section-taller::before{
    top:-1px;
    clip-path: polygon(0 0, 100% 0, 100% 55%, 0 100%);
}
.section-taller::after{
    bottom:-1px;
    clip-path: polygon(0 45%, 100% 0, 100% 100%, 0 100%);
}
.section-taller .btn-primary{
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.24);
    color: #fff;
}
.section-taller .btn-primary:hover{
    background: rgba(255,255,255,0.20);
    border-color: rgba(255,255,255,0.30);
    color: #fff;
}

/* --- FORM CONTROLS MODERN (suaves / gris claro) --- */
.form-control-modern{
    background: #f6f7f9;
    border: 1px solid rgba(17,24,39,0.08);
    border-radius: 14px;
    padding: 0.9rem 1rem;
}
.form-control-modern:focus{
    background: #ffffff;
    border-color: rgba(229,57,53,0.55);
    box-shadow: 0 0 0 0.25rem rgba(229,57,53,0.12);
}

/* Horarios (chips) */
.hours-wrap{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.hour-chip{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(17,24,39,0.10);
    box-shadow: 0 12px 30px rgba(17,24,39,0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.hour-chip__day{
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.78rem;
    color: rgba(17,24,39,0.78);
    white-space: nowrap;
}
.hour-chip__hours{
    color: rgba(17,24,39,0.72);
    font-size: 0.92rem;
    line-height: 1.15;
}
@media (max-width: 575.98px){
    .hours-wrap{ justify-content: stretch; }
    .hour-chip{ width: 100%; justify-content: space-between; }
    .hour-chip__hours{ text-align: right; }
}
@keyframes scrollBrands {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (max-width: 575.98px) {
    .brand-track { gap: 24px; }
    .brand-track img { height: 48px; }
    .brand-item { padding: 12px 14px; border-radius: 14px; }
}

/* Mobile swipe: carrusel horizontal nativo */
@media (max-width: 767.98px) {
    .brand-scroller{
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none; /* Firefox */
        mask-image: none;
        -webkit-mask-image: none;
        padding-bottom: 6px; /* evita cortar sombra */
    }
    .brand-scroller::-webkit-scrollbar{ display: none; } /* Chrome/Safari */
    .brand-track{
        animation: none;
        transform: none;
        width: max-content;
        padding-inline: 8px;
    }
    .brand-item{ scroll-snap-align: center; }
}

/* --- WHATSAPP FLOAT --- */
.whatsapp-float { position: fixed; width: 52px; height: 52px; bottom: 20px; right: 20px; background-color: #25d366; color: #FFF; border-radius: 50px; text-align: center; font-size: 26px; box-shadow: 0 8px 20px rgba(31,45,42,0.15); z-index: 100; display: flex; align-items: center; justify-content: center; text-decoration: none; transition: transform 0.3s ease; }
.whatsapp-float:hover { transform: scale(1.08); color: #FFF; }

/* --- REVEAL --- */
[data-reveal] { opacity: 0; transition: opacity 600ms ease, transform 600ms ease; }
[data-reveal].revealed { opacity: 1; }