/* =================================================================================================
   Home styles — Eurosur Sanlúcar
   Fase 8 (PR_home_harmonization) — 2026-07-23

   Estilos específicos de la homepage (index.php). Sólo contiene:
     - .eu-home-hero / .eu-home-hero__slide / .eu-home-hero__content  (slider principal)
     - .eu-home-section (wrapper genérico para "Productos en oferta", "Nuestros proveedores", "Empresas asociadas", "Más comprados", "Recientemente vistos")
     - .eu-home-section--deals / --brands / --asociados (modificadores)
     - .eu-home-section__title (heredado del .eu-section-title común de layout.css)
     - .eu-home-slider-track (reutilizable dentro de cualquier owl-carousel de home)
     - .eu-home-brand-grid / .eu-home-brand-card (sin grid Bootstrap — owl-carousel controla)
     - .product-carousel-section hereda de product-card.css

   Las clases legacy .slider_area / .product_area / .product_deals / .brand_area / .asociados_area /
   .section_title / .brand_container / .asociados_container se PRESERVAN como wrappers en el HTML
   porque plugins.js hace auto-init buscando esos selectores (ver comentario en cada regla equivalente).

   Carga en blocks/head.php entre product-card.css y los seasonales, con id="home-css-v3" para
   rollback de 1 click vía DevTools:
       document.getElementById('home-css-v3')?.remove();

   Diseño:
     - Hero a pantalla completa con images en owl-lazy + texto superpuesto a la izquierda en desktop
     - Sections de grid: title h2 unificado + carrusel responsive
     - Brands/Asociados: carrusel sin orden de grid, logos ghosts sobre bg blanco
   ================================================================================================= */

:root {
    /* override propio de home: hero slide maneja bg oscuro para que el texto blanco contraste siempre,
       incluso sin image lazy-loaded (no parpadeo). */
    --eu-home-hero-bg: #0F1B2E;
}

/* -------------------------------------------------------------------------------------------------
   Hero slider — cap del contenedor + slides full-width.
   ------------------------------------------------------------------------------------------------- */
.eu-home-hero {
    position: relative;
    background: var(--eu-home-hero-bg);
}

.eu-home-hero__slide {
    /* Mapping legacy: .single_slider d-flex align-items-center owl-lazy con data-src fallback */
    display: flex;
    align-items: center;
    min-height: 420px;
    background-size: cover;
    background-position: center right;
    position: relative;
}

.eu-home-hero__content {
    position: relative;
    z-index: 2;
    padding: 3rem 0;
    max-width: 560px;
    color: var(--eu-steel);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

.eu-home-hero__title {
    font-family: var(--eu-font-display);
    font-weight: 700;
    font-size: 2.6rem;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin: 0 0 .75rem;
}

.eu-home-hero__subtitle {
    font-size: 1.05rem;
    color: var(--eu-steel);
    margin: 0 0 1.5rem;
    line-height: 1.4;
}

.eu-home-hero__cta {
    display: inline-block;
    background: var(--eu-primary);
    color: #fff;
    padding: .8rem 1.6rem;
    border-radius: var(--eu-radius-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .9rem;
    text-decoration: none;
    text-shadow: none;
    transition: background-color .15s ease, transform .15s ease;
}

.eu-home-hero__cta:hover {
    background: var(--eu-primary-dark);
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.eu-home-hero__cta:focus-visible {
    outline: none;
    box-shadow: var(--eu-focus-ring-shadow);
}

@media (max-width: 767px) {
    .eu-home-hero__slide { min-height: 280px; background-position: 65% center; }
    .eu-home-hero__title { font-size: 1.7rem; }
    .eu-home-hero__content { padding: 1.75rem 0; }
}

/* -------------------------------------------------------------------------------------------------
   Section wrapper genérico para homepage.
   Modificadores sólo cambian spacings; layout idéntico.
   ------------------------------------------------------------------------------------------------- */
.eu-home-section {
    padding: 4rem 0;
}

.eu-home-section--brands,
.eu-home-section--asociados {
    padding: 3rem 0;
    background: var(--eu-bg);
}

/* -------------------------------------------------------------------------------------------------
   Section title — las páginas home aplican el modifier global .eu-section-title--lg
   (definido en layout.css) sobre .eu-section-title. No se duplica patrón aquí; usar:
       class="section_title eu-section-title eu-section-title--lg"

   Mantenido REFERENCE: si en el futuro alguna página home requiere un underline aún más
   generoso, basta con añadir otro modifier en layout.css; no acumular reglas en home.css.
   ------------------------------------------------------------------------------------------------- */
.eu-home-slider-track .owl-stage-outer {
    position: relative;
}

/* -------------------------------------------------------------------------------------------------
   Brand/Provider item — logo ghost card.

   Mapping legacy: .single_brand > a > img dentro de .brand_container owl-carousel.
   plugins.js auto-init: $('.brand_container').owlCarousel({...}).
   ------------------------------------------------------------------------------------------------- */
.eu-home-brand-card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    padding: .75rem;
    background: var(--eu-bg-soft);
    border: 1px solid var(--eu-border);
    border-radius: var(--eu-radius-sm);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.eu-home-brand-card:hover {
    border-color: var(--eu-primary);
    box-shadow: var(--eu-shadow-sm);
}

.eu-home-brand-card img {
    /* max-height limita para que logos heterogéneos se vean uniformes.
       width: auto preserva aspect-ratio original del logo. */
    max-height: 56px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: saturate(.65) opacity(.9);
    transition: filter .2s ease;
}

.eu-home-brand-card:hover img {
    filter: saturate(1) opacity(1);
}

/* -------------------------------------------------------------------------------------------------
   Asociados — variante externa (logos con link externo target="_blank").
   Inherenta de .eu-home-brand-card pero color de borde diferente para distinguir.
   ------------------------------------------------------------------------------------------------- */
.eu-home-asociados-card {
    /* (0,1,0,1) gana vs .eu-home-brand-card genérico — override de border para distinguir.
       Los asociados son partners externos (logos más decorativos). */
    border-color: var(--eu-border);
}
.eu-home-asociados-card:hover {
    border-color: var(--eu-primary-dark);
}

/* -------------------------------------------------------------------------------------------------
   Banner CTA button (.btn-catalogo) — específico del botón en ofertas/ofertas.php top of list,
   preservado por compat con theme third-party .btn-gray. Ahora armonizado a tokens.
   ------------------------------------------------------------------------------------------------- */
.btn.btn-catalogo {
    background: var(--eu-bg-soft);
    border: 1px solid var(--eu-border);
    color: var(--eu-ink);
    font-weight: 600;
    border-radius: var(--eu-radius-sm);
    padding: .55rem 1.1rem;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn.btn-catalogo:hover {
    background: var(--eu-bg);
    color: var(--eu-primary);
    border-color: var(--eu-primary);
}
.btn.btn-catalogo:focus-visible {
    outline: none;
    box-shadow: var(--eu-focus-ring-shadow);
}

/* -------------------------------------------------------------------------------------------------
   CTA central de "Productos en oferta": .btn.btn-primary.w-100 / .m-4 → armonizado.
   ------------------------------------------------------------------------------------------------- */
.eu-home-section__cta {
    text-align: center;
    margin-top: 1.5rem;
}

/* -------------------------------------------------------------------------------------------------
   Reduced motion: respeta usuarios con prefers-reduced-motion: reduce (override home-specific).
   tokens.css ya tiene un guard global; aquí sólo anulamos cualquier animation específica de home.
   ------------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .eu-home-hero__cta,
    .eu-home-brand-card,
    .eu-home-brand-card img {
        transition: none !important;
        animation: none !important;
    }
}

.feature-card{

    background:#fff;

    border:1px solid #ececec;

    border-radius:18px;

    padding:24px;

    display:flex;

    align-items:flex-start;

    gap:18px;

    height:100%;

    transition:all .30s ease;

    box-shadow:0 .25rem .75rem rgba(0,0,0,.05);

}

.feature-card:hover{

    transform:translateY(-6px);

    box-shadow:0 1rem 2rem rgba(0,0,0,.12);

}

.feature-icon{

    width:68px;

    height:68px;

    min-width:68px;

    border-radius:50%;

    background:#f8f9fa;

    display:flex;

    align-items:center;

    justify-content:center;

}

.feature-icon img{

    max-width:38px;

    max-height:38px;

    transition:.3s;

}

.feature-card:hover .feature-icon img{

    transform:scale(1.12);

}

.feature-content h5{

    font-size:1.05rem;

    font-weight:700;

    margin-bottom:.5rem;

    color:#212529;

}

.feature-content p{

    margin:0;

    color:#6c757d;

    font-size:.92rem;

    line-height:1.5;

}