/*
Theme Name: Avada Child
Theme URI: https://theme-fusion.com/avada/
Description: Child theme personalizado para Avada.
Author: VallbroIT
Template: Avada
Version: 1.1.5
Text Domain: avada-child
*/

/* =========================================================
   Hero parts finder — shortcode [hero_parts_finder]
   Tarjeta blanca grande con campo principal y filtros opcionales.
   Todo scopeado bajo .hero-parts-finder para no afectar a otros
   formularios (header, WooCommerce, etc.).
   ========================================================= */
.hero-parts-finder {
    --hpf-green: #066450;
    --hpf-green-hover: #044d3d;
    --hpf-field-radius: 18px;
    --hpf-piece-radius: 20px;

    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 42px 52px;
    border-radius: 28px;
    background: #ffffff;
    box-shadow: 0 30px 80px rgba(2, 6, 23, 0.18);
    box-sizing: border-box;
    text-align: left;
}

.hero-parts-finder__title {
    margin: 0 0 24px;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 700;
    color: #0f172a;
}

.hero-parts-finder__form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
}

.hero-parts-finder__main-field {
    display: block;
}

/* Base unificada para inputs y selects */
.hero-parts-finder .hero-parts-finder__input {
    width: 100%;
    height: 58px;
    padding: 0 18px;
    font-size: 16px;
    font-weight: 500;
    color: #0f172a;
    background-color: #f8fafc;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: var(--hpf-field-radius);
    box-shadow: none;
    outline: none;
    box-sizing: border-box;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.hero-parts-finder .hero-parts-finder__input:focus {
    border-color: var(--hpf-green);
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(6, 100, 80, 0.14);
}

.hero-parts-finder .hero-parts-finder__input::placeholder {
    color: #94a3b8;
    opacity: 1;
}

.hero-parts-finder .hero-parts-finder__input--piece {
    height: 64px;
    font-size: 17px;
    padding: 0 22px;
    border-radius: var(--hpf-piece-radius);
}

.hero-parts-finder__filters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.hero-parts-finder__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.hero-parts-finder__label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #64748b;
}

/* Selects: misma altura/borde/radio/fondo que los inputs;
   sólo se diferencia por la flecha custom y el cursor. */
.hero-parts-finder .hero-parts-finder__input--select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    padding-right: 46px;
    background-image:
        linear-gradient(45deg, transparent 50%, #64748b 50%),
        linear-gradient(135deg, #64748b 50%, transparent 50%);
    background-position:
        calc(100% - 24px) 50%,
        calc(100% - 18px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

.hero-parts-finder .hero-parts-finder__input--select:focus {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--hpf-green) 50%),
        linear-gradient(135deg, var(--hpf-green) 50%, transparent 50%);
}

.hero-parts-finder .hero-parts-finder__submit {
    width: 100%;
    height: 56px;
    margin-top: 6px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    background: var(--hpf-green);
    border: 0;
    border-radius: 18px;
    cursor: pointer;
    box-shadow: 0 14px 28px rgba(6, 100, 80, 0.28);
    transition:
        background-color 0.2s ease,
        transform 0.15s ease,
        box-shadow 0.2s ease;
}

.hero-parts-finder .hero-parts-finder__submit:hover,
.hero-parts-finder .hero-parts-finder__submit:focus {
    background: var(--hpf-green-hover);
    transform: translateY(-1px);
    box-shadow: 0 18px 36px rgba(6, 100, 80, 0.34);
    outline: none;
}

/* Tablet */
@media (max-width: 900px) {
    .hero-parts-finder {
        padding: 34px 32px;
    }
    .hero-parts-finder__title {
        font-size: 28px;
        margin-bottom: 20px;
    }
    .hero-parts-finder__filters {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Móvil */
@media (max-width: 600px) {
    .hero-parts-finder {
        padding: 26px 20px;
        border-radius: 20px;
    }
    .hero-parts-finder__title {
        font-size: 22px;
        margin-bottom: 18px;
    }
    .hero-parts-finder .hero-parts-finder__input {
        height: 54px;
        font-size: 15px;
    }
    .hero-parts-finder .hero-parts-finder__input--piece {
        height: 58px;
        font-size: 16px;
        padding: 0 18px;
        border-radius: var(--hpf-piece-radius);
    }
    .hero-parts-finder__filters {
        grid-template-columns: 1fr;
    }
    .hero-parts-finder .hero-parts-finder__submit {
        height: 54px;
    }
}

/* =========================================================
   Inyección automática del finder en el hero (.home-main-hero).
   El wrapper .hero-parts-finder-injected lo añade un JS del child
   theme — no hace falta colocar el shortcode con Avada Builder.
   ========================================================= */
.home .home-main-hero.has-hero-parts-finder {
    position: relative;
    overflow: visible;
}

/* Por si el hero queda muy bajo en desktop/tablet cuando el finder
   se absolutiza, garantizamos una altura mínima razonable. */
@media (min-width: 769px) {
    .home .home-main-hero.has-hero-parts-finder {
        min-height: 560px;
    }
}

/* Desktop ≥1025 — pegado a la derecha, centrado vertical */
@media (min-width: 1025px) {
    .home .hero-parts-finder-injected {
        position: absolute;
        right: clamp(32px, 7vw, 110px);
        top: 50%;
        transform: translateY(-50%);
        width: min(42vw, 600px);
        max-width: 600px;
        margin: 0;
        z-index: 30;
    }

    .home .hero-parts-finder-injected .hero-parts-finder {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
}

/* Tablet 769–1024 — centrado en el hero */
@media (min-width: 769px) and (max-width: 1024px) {
    .home .hero-parts-finder-injected {
        position: absolute;
        left: 50%;
        top: 54%;
        transform: translate(-50%, -50%);
        width: min(86vw, 620px);
        max-width: 620px;
        margin: 0;
        z-index: 30;
    }

    .home .hero-parts-finder-injected .hero-parts-finder {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
}

/* Móvil ≤768 — flujo normal, debajo del contenido del hero */
@media (max-width: 768px) {
    .home .hero-parts-finder-injected {
        position: relative;
        right: auto;
        left: auto;
        top: auto;
        transform: none;
        width: calc(100% - 28px);
        max-width: none;
        margin: 28px auto 0;
        z-index: 30;
    }

    .home .hero-parts-finder-injected .hero-parts-finder {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }
}

/* =========================================================
   Barra de búsqueda compacta tablet/móvil — entre header y hero.
   En desktop se oculta y se ve el buscador grande del hero.
   En tablet/móvil se oculta el buscador grande y se ve esta barra.
   Reutiliza [wcas-search-form] para mantener el autocomplete AJAX.
   ========================================================= */

/* Por defecto la barra está visible (modo tablet/móvil).
   Sólo se oculta explícitamente en desktop. */
.home .mobile-hero-search-bar {
    position: relative;
    z-index: 50;
    width: 100%;
    padding: 12px 16px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    box-sizing: border-box;
}

/* Desktop ≥1025: ocultar barra, mostrar finder grande (estado actual). */
@media (min-width: 1025px) {
    .home .mobile-hero-search-bar {
        display: none !important;
    }
}

/* Tablet/móvil ≤1024: ocultar finder grande, mostrar barra compacta. */
@media (max-width: 1024px) {
    .home .hero-parts-finder-injected,
    .home .home-main-hero .hero-parts-finder {
        display: none !important;
    }

    /* La min-height del hero pensada para el finder ya no aplica
       cuando lo ocultamos, para que el hero respire en móvil. */
    .home .home-main-hero.has-hero-parts-finder {
        min-height: 0;
    }
}

/* Centrado y ancho del wrapper que envuelve el form */
.home .mobile-hero-search-bar .dgwt-wcas-search-wrapp,
.home .mobile-hero-search-bar .mobile-hero-search-bar__form {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

/* Form: pill compacta */
.home .mobile-hero-search-bar .dgwt-wcas-search-form,
.home .mobile-hero-search-bar .mobile-hero-search-bar__form {
    min-height: 48px;
    border-radius: 999px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.home .mobile-hero-search-bar .dgwt-wcas-search-form:focus-within,
.home .mobile-hero-search-bar .mobile-hero-search-bar__form:focus-within {
    border-color: #066450 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(6, 100, 80, 0.12) !important;
}

/* Capas internas del plugin sin doble fondo */
.home .mobile-hero-search-bar .dgwt-wcas-sf-wrapp {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
}

/* Input */
.home .mobile-hero-search-bar .dgwt-wcas-search-input,
.home .mobile-hero-search-bar .mobile-hero-search-bar__input {
    height: 48px !important;
    background: transparent !important;
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 0 18px !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 100%;
    box-sizing: border-box;
    outline: none;
}

.home .mobile-hero-search-bar .dgwt-wcas-search-input::placeholder,
.home .mobile-hero-search-bar .mobile-hero-search-bar__input::placeholder {
    color: #64748b !important;
    opacity: 1 !important;
}

/* Botón / icono de envío integrado en la pastilla */
.home .mobile-hero-search-bar .dgwt-wcas-search-submit,
.home .mobile-hero-search-bar .mobile-hero-search-bar__submit {
    background: #066450 !important;
    color: #ffffff !important;
    border: 0 !important;
    border-radius: 999px !important;
    margin: 4px !important;
    padding: 0 18px !important;
    height: 40px !important;
    line-height: 1 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.home .mobile-hero-search-bar .dgwt-wcas-search-submit:hover,
.home .mobile-hero-search-bar .dgwt-wcas-search-submit:focus,
.home .mobile-hero-search-bar .mobile-hero-search-bar__submit:hover,
.home .mobile-hero-search-bar .mobile-hero-search-bar__submit:focus {
    background: #044d3d !important;
    outline: none;
}

.home .mobile-hero-search-bar .dgwt-wcas-ico-magnifier,
.home .mobile-hero-search-bar .dgwt-wcas-search-submit svg,
.home .mobile-hero-search-bar .dgwt-wcas-search-submit path {
    fill: #ffffff !important;
    color: #ffffff !important;
    stroke: #ffffff !important;
}

.home .mobile-hero-search-bar .dgwt-wcas-preloader {
    background: transparent !important;
}

/* Padding lateral ligeramente reducido en móvil estrecho */
@media (max-width: 480px) {
    .home .mobile-hero-search-bar {
        padding: 10px 12px;
    }
    .home .mobile-hero-search-bar .dgwt-wcas-search-submit,
    .home .mobile-hero-search-bar .mobile-hero-search-bar__submit {
        padding: 0 14px !important;
        font-size: 13px !important;
    }
}

/* =========================================================
   Ocultar el buscador del nav/header SÓLO en la home.
   - El finder grande (hero) y la barra móvil/tablet siguen visibles
     porque viven fuera de .fusion-header* (son siblings, no hijos).
   - Fuera de la home el buscador del header sigue intacto.
   ========================================================= */
.home .fusion-header .dgwt-wcas-search-wrapp,
.home .fusion-header-wrapper .dgwt-wcas-search-wrapp,
.home .fusion-main-menu .dgwt-wcas-search-wrapp,
.home .fusion-mobile-menu .dgwt-wcas-search-wrapp,
.home .fusion-main-menu-search,
.home .fusion-header .fusion-main-menu-search,
.home .fusion-header .fusion-search-form,
.home .fusion-header-wrapper .fusion-search-form {
    display: none !important;
}

/* =========================================================
   Homogeneización de imágenes en LOOPS WooCommerce.
   - Todos los wrappers de imagen del loop pasan a 1:1 (cuadrado).
   - La imagen se ajusta dentro con object-fit: contain, sin recorte.
   - Fondo neutro para los huecos cuando la imagen no llena el cuadro.
   - NO afecta a la ficha individual (.single-product / .woocommerce-product-gallery
     usan otros wrappers) ni al logo, hero, blog, etc.
   ========================================================= */

/* Loops nativos WooCommerce (shop, categoría, etiqueta, búsqueda) */
.woocommerce ul.products li.product .fusion-image-wrapper,
.woocommerce ul.products li.product .product-images,
.woocommerce ul.products li.product .crossfade-images,
.woocommerce ul.products li.product .featured-image,
/* Fusion Post Cards y bloques de productos del builder */
.fusion-post-cards .fusion-woo-product-image,
.fusion-post-cards .fusion-image-wrapper,
.fusion-products-slider .fusion-woo-product-image,
.fusion-products-slider .fusion-image-wrapper,
.fusion-woo-product-grid .fusion-woo-product-image,
.fusion-woo-product-grid .fusion-image-wrapper {
    aspect-ratio: 1 / 1;
    width: 100%;
    background: #f8fafc;
    overflow: hidden;
    position: relative;
}

.woocommerce ul.products li.product .fusion-image-wrapper img,
.woocommerce ul.products li.product .product-images img,
.woocommerce ul.products li.product .crossfade-images img,
.woocommerce ul.products li.product .featured-image img,
.fusion-post-cards .fusion-woo-product-image img,
.fusion-post-cards .fusion-image-wrapper img,
.fusion-products-slider .fusion-woo-product-image img,
.fusion-products-slider .fusion-image-wrapper img,
.fusion-woo-product-grid .fusion-woo-product-image img,
.fusion-woo-product-grid .fusion-image-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block;
}

/* El enlace anidado (anchor) debe ocupar todo el cuadro, sin huecos */
.woocommerce ul.products li.product .fusion-image-wrapper > a,
.woocommerce ul.products li.product .product-images > a,
.woocommerce ul.products li.product .featured-image > a,
.fusion-post-cards .fusion-woo-product-image > a,
.fusion-post-cards .fusion-image-wrapper > a {
    display: block;
    width: 100%;
    height: 100%;
}

/* =========================================================
   Sidebar de filtros de la tienda (columna izquierda)
   ---------------------------------------------------------
   El wrapper .shop-layout-with-filters lo inyecta functions.php
   con CSS Grid: columna izquierda = filtros, columna derecha =
   el .woocommerce-container que ya imprime Avada (con el loop).

   Todo está scopeado bajo .shop-layout-with-filters, así que no
   afecta a la ficha individual de producto, al blog ni a otras
   páginas (ahí este wrapper no existe).
   ========================================================= */
.shop-layout-with-filters {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

/* La columna de contenido es el contenedor de Avada. minmax(0,1fr)
   + min-width:0 evita desbordes horizontales del grid de productos. */
.shop-layout-with-filters > .woocommerce-container {
    min-width: 0;
    width: 100%;
    margin: 0;
    float: none;
}

.shop-layout-with-filters__sidebar {
    position: sticky;
    top: 120px;
    align-self: start;
    min-width: 0;
}

.shop-filters-widget {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    padding: 20px;
    margin-bottom: 18px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.shop-filters-widget:last-child {
    margin-bottom: 0;
}

.shop-filters-widget__title {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}

/* Listas de widgets (categorías, atributos) dentro de la sidebar */
.shop-filters-widget ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.shop-filters-widget ul li {
    margin: 0 0 8px;
}

.shop-filters-widget ul li:last-child {
    margin-bottom: 0;
}

/* Botón desplegable "Filtrar piezas": SOLO existe en tablet/móvil.
   En desktop se oculta y la sidebar se ve fija a la izquierda. */
.shop-filters-toggle {
    display: none;
}

/* --- Ficha individual de producto -----------------------------------
   En single product desactivamos la sidebar nativa de Avada por PHP
   (filtro avada_has_sidebar), así que aquí solo nos aseguramos de que
   el contenedor y el #content de Avada ocupen el 100% de su columna del
   grid y no arrastren floats/anchos residuales del layout con sidebar. */
.single-product .shop-layout-with-filters > .woocommerce-container {
    min-width: 0;
    width: 100%;
    margin: 0;
    float: none;
}

.single-product .shop-layout-with-filters #content {
    float: none;
    width: 100%;
    margin: 0;
}

/* Tablet / móvil (<=1024px): una sola columna y la sidebar se convierte
   en un desplegable cerrado por defecto, controlado por .shop-filters-toggle.
   Orden DOM dentro de .shop-layout-with-filters: botón → aside → contenido.
   - Cerrado:  botón + productos (aside oculto, no ocupa espacio).
   - Abierto:  botón + filtros + productos. */
@media (max-width: 1024px) {
    .shop-layout-with-filters {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    /* Botón "Filtrar piezas" visible arriba, a todo el ancho. */
    .shop-filters-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        min-height: 52px;
        padding: 0 18px;
        border: 0;
        border-radius: 16px;
        background: #066450;
        color: #ffffff;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.2;
        cursor: pointer;
        box-shadow: 0 12px 28px rgba(6, 100, 80, 0.22);
        -webkit-appearance: none;
        appearance: none;
    }

    .shop-filters-toggle:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 2px;
    }

    .shop-filters-toggle__icon::before {
        content: "\25BE"; /* ▾ */
        display: inline-block;
        font-size: 18px;
        line-height: 1;
        transition: transform 0.2s ease;
    }

    .shop-layout-with-filters.is-open .shop-filters-toggle__icon::before {
        transform: rotate(180deg);
    }

    /* Panel de filtros: oculto por defecto, sin sticky en móvil. */
    .shop-layout-with-filters__sidebar {
        display: none;
        position: static;
        top: auto;
    }

    .shop-layout-with-filters.is-open .shop-layout-with-filters__sidebar {
        display: block;
    }
}

/* =========================================================
   Hero principal de la home — shortcode [home_ochoa_hero]
   ---------------------------------------------------------
   Desktop (>=1025px): grid 2 columnas.
     - Izquierda 52%: eyebrow + H1 + texto + servicios + 2 CTAs.
     - Derecha 48%: buscador [hero_parts_finder] reutilizado, centrado
       verticalmente.
   Tablet/móvil (<=1024px): una sola columna (texto + botones). El buscador
   grande se OCULTA aquí porque la barra AJAX compacta (.mobile-hero-search-bar)
   ya cubre la búsqueda entre header y hero, evitando duplicar buscadores.

   Todo scopeado bajo .ochoa-home-hero para no afectar a otros bloques.
   ========================================================= */
.ochoa-home-hero {
    --ochoa-green: #066450;
    --ochoa-green-hover: #044d3d;

    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    /* Altura: el JS del shortcode mide lo que ocupan las barras superiores
       (top bar del correo + nav, y en móvil la barra AJAX) y fija
       --ochoa-hero-h = innerHeight - esas barras. Usamos height + overflow
       hidden para que el hero mida EXACTAMENTE ese hueco (ni crece ni empuja
       la página): así header + barras + hero entran juntos en una pantalla.
       Si el JS no corre, fallback a 100svh (height:auto + min-height). */
    /* --ochoa-hero-h (lo fija el JS) es el hueco bajo las barras superiores.
       Lo usamos como min-height (no height fijo): en pantallas altas el hero
       rellena exactamente ese hueco y centra su contenido; en pantallas bajas
       (p.ej. MacBook Air) el hero CRECE para que entre todo encuadrado, en vez
       de recortar la parte de arriba o solapar la banda de logos. */
    min-height: 100vh;
    min-height: var(--ochoa-hero-h, 100svh);
    display: flex;
    flex-direction: column;
    justify-content: center; /* centra el stack (contenido + logos) en el hueco */
    align-items: center;
    padding: clamp(20px, 3.5vh, 56px) clamp(16px, 5vw, 80px);
    background: linear-gradient(180deg, #eef4f2 0%, #ffffff 70%);
}

.ochoa-home-hero *,
.ochoa-home-hero *::before,
.ochoa-home-hero *::after {
    box-sizing: border-box;
}

/* ---- Banda inferior de FLIP-CARDS (recuadros pequeños) + overlay ----
   Las tarjetas (image_N + title_N/text_N) se muestran como una fila de
   recuadros pequeños, centrada bajo el contenido del hero. Cada recuadro
   enseña el logo centrado y, al pasar el ratón / enfocar / tocar, gira y
   muestra el texto del dorso (replica las antiguas flip boxes).
   La banda va en FLUJO NORMAL (no absoluta) como última fila de la columna
   flex del hero (order:2), debajo del .inner (order:1): así reserva su propio
   espacio y nunca se solapa con los botones, sea cual sea la altura de la
   pantalla. El contenedor usa pointer-events:none y cada tarjeta captura el
   hover (pointer-events:auto), para no interferir con clics en los huecos.
   Sólo existen con la clase --has-media.
   Prioridad: 3 tarjetas. La 4ª (card--4) se oculta en esta variante. */
.ochoa-home-hero__media {
    /* En FLUJO NORMAL como última fila del hero (order:2), debajo del
       contenido: así reserva su propio espacio y NUNCA se solapa con los
       botones, se adapte como se adapte la pantalla. */
    position: relative;
    order: 2;
    z-index: 4;
    width: 100%;
    max-width: 1280px;
    margin: clamp(24px, 4vh, 48px) auto 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(22px, 3vw, 48px);
    padding: 0 clamp(16px, 4vw, 56px);
    /* El contenedor no captura el ratón; cada tarjeta sí (para el flip). */
    pointer-events: none;
}

.ochoa-home-hero__card {
    position: relative;
    margin: 0;
    width: clamp(150px, 15vw, 200px);
    height: clamp(150px, 15vw, 200px);
    pointer-events: auto;
    perspective: 1000px;
    background: transparent;
}

/* En esta variante priorizamos 3 tarjetas; la 4ª se oculta. */
.ochoa-home-hero__card--4 {
    display: none;
}

/* Tarjeta SIMPLE (sin dorso): recuadro blanco con el logo centrado. */
.ochoa-home-hero__card:not(.ochoa-home-hero__card--flip) {
    background: #ffffff;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
}

.ochoa-home-hero__card:not(.ochoa-home-hero__card--flip) .ochoa-home-hero__img {
    width: auto;
    height: auto;
    max-width: 58%;
    max-height: 58%;
    object-fit: contain;
}

/* ---- Flip-card ---- */
.ochoa-home-hero__flip {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
    transform-style: preserve-3d;
}

/* Gira al pasar el ratón, al enfocar con teclado o al tocar (focus). */
.ochoa-home-hero__card--flip:hover .ochoa-home-hero__flip,
.ochoa-home-hero__card--flip:focus .ochoa-home-hero__flip,
.ochoa-home-hero__card--flip:focus-within .ochoa-home-hero__flip {
    transform: rotateY(180deg);
}

.ochoa-home-hero__card--flip:focus-visible {
    outline: 3px solid var(--ochoa-green);
    outline-offset: 3px;
    border-radius: 22px;
}

.ochoa-home-hero__face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
}

/* Cara frontal: recuadro blanco grande + logo PEQUEÑO centrado.
   El logo se limita a un % del recuadro (no llena la caja), así el marco
   puede ser grande mientras el logo conserva su tamaño reducido. */
.ochoa-home-hero__face--front {
    background: #ffffff;
    padding: 16px;
}

.ochoa-home-hero__face--front .ochoa-home-hero__img {
    width: auto;
    height: auto;
    max-width: 58%;
    max-height: 58%;
    object-fit: contain;
    object-position: center;
}

/* Cara trasera: fondo verde de marca + texto blanco. */
.ochoa-home-hero__face--back {
    transform: rotateY(180deg);
    background: var(--ochoa-green);
    color: #ffffff;
    padding: 14px 14px;
    text-align: center;
    overflow: auto;
}

.ochoa-home-hero__card-title {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
    color: #ffffff;
}

.ochoa-home-hero__card-text,
.ochoa-home-hero__card-text p {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.95);
}

.ochoa-home-hero__card-text p + p {
    margin-top: 6px;
}

.ochoa-home-hero__card-text strong {
    color: #ffffff;
}

.ochoa-home-hero__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* ---- Slider de fondo (fotos a pantalla completa) ----
   .ochoa-home-hero__bg (z0) al fondo; cada slide hace crossfade por opacidad.
   El JS alterna la clase .is-active. El primer slide arranca activo. */
.ochoa-home-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.ochoa-home-hero__bg-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.ochoa-home-hero__bg-slide.is-active {
    opacity: 1;
}

.ochoa-home-hero__bg-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Overlay suave: garantiza legibilidad del texto sin oscurecer la banda
   inferior de imágenes (que va por encima, en z-index 2). */
.ochoa-home-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0) 45%,
            rgba(6, 100, 80, 0.06) 100%
        );
}

/* Con fotos de fondo el overlay se refuerza: lado izquierdo casi blanco
   opaco (texto perfectamente legible) y lado derecho translúcido con tinte
   verde para dejar ver la foto. */
.ochoa-home-hero--has-bg .ochoa-home-hero__overlay {
    background:
        linear-gradient(
            105deg,
            rgba(255, 255, 255, 0.97) 0%,
            rgba(255, 255, 255, 0.9) 36%,
            rgba(255, 255, 255, 0.55) 58%,
            rgba(6, 100, 80, 0.28) 100%
        );
}

.ochoa-home-hero__inner {
    position: relative;
    z-index: 3; /* sobre el overlay (1); la banda de tarjetas (4) va encima */
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 52% 48%;
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
    order: 1; /* el contenido va arriba; la banda de logos (order:2) debajo */
}

.ochoa-home-hero__content {
    text-align: left;
    min-width: 0;
}

.ochoa-home-hero__eyebrow {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ochoa-green);
}

.ochoa-home-hero__title {
    margin: 0 0 clamp(10px, 1.6vh, 20px);
    font-size: clamp(30px, 3.6vw, 48px);
    line-height: 1.08;
    font-weight: 800;
    color: #0f172a;
}

.ochoa-home-hero__text {
    margin: 0 0 clamp(8px, 1.3vh, 16px);
    font-size: clamp(15px, 1.7vh, 17px);
    line-height: 1.5;
    color: #334155;
    max-width: 640px;
}

.ochoa-home-hero__services {
    list-style: none;
    margin: clamp(2px, 0.6vh, 4px) 0 clamp(16px, 2.4vh, 28px);
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(6px, 1vh, 10px) 24px;
}

.ochoa-home-hero__service {
    position: relative;
    padding-left: 30px;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 500;
    color: #0f172a;
}

.ochoa-home-hero__service::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--ochoa-green);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 12px 12px;
    background-position: center;
    background-repeat: no-repeat;
}

.ochoa-home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.ochoa-home-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px 28px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    border-radius: 16px;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.15s ease,
        box-shadow 0.2s ease;
}

.ochoa-home-hero__button--primary {
    background: var(--ochoa-green);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(6, 100, 80, 0.28);
}

.ochoa-home-hero__button--primary:hover,
.ochoa-home-hero__button--primary:focus {
    background: var(--ochoa-green-hover);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 18px 36px rgba(6, 100, 80, 0.34);
    outline: none;
}

.ochoa-home-hero__button--secondary {
    background: #ffffff;
    color: var(--ochoa-green);
    border: 2px solid var(--ochoa-green);
}

.ochoa-home-hero__button--secondary:hover,
.ochoa-home-hero__button--secondary:focus {
    background: var(--ochoa-green);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(6, 100, 80, 0.22);
    outline: none;
}

/* Columna derecha: buscador reutilizado, centrado y ajustado a la columna. */
.ochoa-home-hero__search {
    display: flex;
    justify-content: center;
    align-items: center;
}

.ochoa-home-hero__search .hero-parts-finder {
    margin: 0;
    width: 100%;
    max-width: 560px;
}

/* Desktop: el buscador es el bloque más alto del hero. Lo compactamos un
   poco (sin tocar su funcionalidad) para que todo el hero quepa en el hueco
   bajo las barras superiores. Sólo dentro del hero de la home. */
@media (min-width: 1025px) {
    .ochoa-home-hero__search .hero-parts-finder {
        padding: clamp(22px, 3vh, 34px) clamp(28px, 3vw, 44px);
    }

    .ochoa-home-hero__search .hero-parts-finder__title {
        font-size: clamp(20px, 2.4vh, 26px);
        margin-bottom: clamp(12px, 1.8vh, 20px);
    }

    .ochoa-home-hero__search .hero-parts-finder__form {
        gap: clamp(10px, 1.4vh, 16px);
    }

    .ochoa-home-hero__search .hero-parts-finder .hero-parts-finder__input {
        height: clamp(46px, 6vh, 56px);
    }

    .ochoa-home-hero__search .hero-parts-finder .hero-parts-finder__input--piece {
        height: clamp(50px, 6.6vh, 62px);
    }

    .ochoa-home-hero__search .hero-parts-finder .hero-parts-finder__submit {
        height: clamp(46px, 6vh, 54px);
        margin-top: 0;
    }
}

/* Tablet / móvil (<=1024px): una columna. El buscador grande se oculta
   porque la barra AJAX compacta ya cubre la búsqueda (sin duplicar).
   La banda de imágenes se mantiene abajo pero más baja y suave, y el
   contenido se eleva menos para que siga arriba y limpio. */
@media (max-width: 1024px) {
    .ochoa-home-hero {
        /* En tablet/móvil el contenido (texto completo + botones) es alto;
           dejamos altura natural para NO recortar (el alto fijo del hueco
           solo aplica en desktop). */
        height: auto;
        min-height: auto;
        padding: clamp(28px, 5vh, 52px) clamp(16px, 5vw, 40px);
    }

    .ochoa-home-hero__inner {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .ochoa-home-hero__search {
        display: none;
    }

    .ochoa-home-hero__media {
        margin-top: clamp(24px, 5vh, 48px);
        gap: clamp(16px, 3vw, 28px);
    }

    .ochoa-home-hero__card {
        width: clamp(148px, 28vw, 196px);
        height: clamp(148px, 28vw, 196px);
    }

    /* A una columna, el texto ocupa todo el ancho: overlay más uniforme
       (blanco arriba → ligero verde abajo) para legibilidad sobre la foto. */
    .ochoa-home-hero--has-bg .ochoa-home-hero__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(255, 255, 255, 0.94) 0%,
                rgba(255, 255, 255, 0.86) 55%,
                rgba(6, 100, 80, 0.22) 100%
            );
    }
}

/* Móvil estrecho (<=600px): texto y botones son prioridad. Las tarjetas se
   hacen más pequeñas para no robar espacio ni tapar la barra AJAX; el
   contenido deja de elevarse. El flip sigue disponible al tocar (focus). */
@media (max-width: 600px) {
    .ochoa-home-hero__services {
        grid-template-columns: 1fr;
    }

    .ochoa-home-hero__actions {
        flex-direction: column;
    }

    .ochoa-home-hero__button {
        width: 100%;
    }

    .ochoa-home-hero__inner {
        transform: none;
    }

    /* Banda inferior = UNA sola fila de iconos pequeños (sin envolver),
       centrada bajo los botones, sin taparlos ni pisar la barra AJAX. */
    .ochoa-home-hero__media {
        flex-wrap: nowrap;
        margin-top: clamp(18px, 3.5vh, 28px);
        gap: clamp(10px, 3vw, 16px);
        padding: 0 12px;
    }

    .ochoa-home-hero__card {
        width: clamp(58px, 18vw, 80px);
        height: clamp(58px, 18vw, 80px);
    }

    .ochoa-home-hero__face {
        border-radius: 14px;
    }

    /* A este tamaño el dorso no muestra texto legible: priorizamos el icono
       (el logo centrado en el recuadro). El flip al tocar sigue existiendo. */
    .ochoa-home-hero__face--front {
        padding: 8px;
    }

    .ochoa-home-hero__face--back {
        padding: 6px;
    }

    .ochoa-home-hero__card-title {
        font-size: 8px;
        margin-bottom: 2px;
    }

    .ochoa-home-hero__card-text,
    .ochoa-home-hero__card-text p {
        font-size: 7.5px;
        line-height: 1.2;
    }
}

/* =========================================================
   [TEMPORAL · REVERSIBLE] Ocultar la sección antigua de 3 logos de
   certificación (flip boxes: CENTRO CAT / 50 AÑOS DE HISTORIA /
   COLABORACIÓN) en la home, porque esas imágenes pasan al hero
   [home_ochoa_hero] como banda inferior.

   NO se ha borrado de la BD. Para revertir: elimina este bloque.
   Para borrarlo de verdad: quita ese contenedor de 3 columnas en
   Avada Builder (post home, ID 21).

   Scope: sólo .home y sólo la sección con flip boxes (única en la
   portada), así no afecta a otras páginas que pudieran usar flip boxes.
   ========================================================= */
.home .fusion-flip-boxes {
    display: none !important;
}

/* Navegadores con :has() → colapsan también el contenedor full-width
   que la envuelve, para no dejar el padding/fondo de la sección vacía. */
.home .fusion-fullwidth:has(.fusion-flip-boxes) {
    display: none !important;
}