/*
 * Don Ignacio — Brand refresh v1
 * Tipografía y ajustes visuales del ecommerce.
 *
 * Requiere estos archivos en:
 *   /var/www/hf-staging/public/assets/fonts/
 *
 *   GlamourAbsoluteExtended.ttf
 *   Omnes Regular_1.ttf
 *   Omnes Bold.otf
 *   omnes-semi-bold.ttf
 *   Saira_Condensed-Medium.ttf
 *   Saira_Condensed-SemiBold.ttf
 *   Saira_Condensed-Bold.ttf
 *
 * No modifica lógica de carrito, checkout ni productos.
 */

@font-face{
    font-family:"DI Glamour";
    src:url("/assets/fonts/GlamourAbsoluteExtended.ttf") format("truetype");
    font-style:normal;
    font-weight:400;
    font-display:swap;
}

@font-face{
    font-family:"DI Omnes";
    src:url("/assets/fonts/Omnes Regular_1.ttf") format("truetype");
    font-style:normal;
    font-weight:400;
    font-display:swap;
}

@font-face{
    font-family:"DI Omnes";
    src:url("/assets/fonts/omnes-semi-bold.ttf") format("truetype");
    font-style:normal;
    font-weight:600;
    font-display:swap;
}

@font-face{
    font-family:"DI Omnes";
    src:url("/assets/fonts/Omnes Bold.otf") format("opentype");
    font-style:normal;
    font-weight:700;
    font-display:swap;
}

@font-face{
    font-family:"DI Saira Condensed";
    src:url("/assets/fonts/Saira_Condensed-Medium.ttf") format("truetype");
    font-style:normal;
    font-weight:500;
    font-display:swap;
}

@font-face{
    font-family:"DI Saira Condensed";
    src:url("/assets/fonts/Saira_Condensed-SemiBold.ttf") format("truetype");
    font-style:normal;
    font-weight:600;
    font-display:swap;
}

@font-face{
    font-family:"DI Saira Condensed";
    src:url("/assets/fonts/Saira_Condensed-Bold.ttf") format("truetype");
    font-style:normal;
    font-weight:700;
    font-display:swap;
}

:root{
    --navy:#07578b;
    --turq:#00a7c7;
    --cream:#faf1e8;
    --cream2:#f4e5d6;
    --white:#ffffff;
    --text:#17466a;
    --muted:#5d7283;
    --line:#dbe6e9;
    --soft:#e6f5f7;
    --brand-gold:#cdb573;
    --brand-blue:#07578b;
    --brand-ink:#163955;
}

/* Base */
body{
    font-family:"DI Omnes",Arial,Helvetica,sans-serif;
    color:var(--text);
}

button,
input,
textarea,
select{
    font-family:"DI Omnes",Arial,Helvetica,sans-serif;
}

/* Header: más limpio y más cercano a la nueva etiqueta */
.header{
    height:78px;
    padding:0 3.2vw;
    background:rgba(255,255,255,.985);
    border-bottom:1px solid rgba(7,87,139,.10);
    backdrop-filter:blur(14px);
}

.brand{
    font-family:"DI Glamour",Georgia,serif;
    font-size:28px;
    line-height:1;
    font-weight:400;
    letter-spacing:-.035em;
    color:var(--brand-blue);
    text-transform:none;
}

.nav{
    gap:34px;
    font-family:"DI Saira Condensed","Arial Narrow",sans-serif;
    font-size:13px;
    font-weight:700;
    letter-spacing:.115em;
    color:var(--brand-ink);
}

.bag-btn{
    font-family:"DI Saira Condensed","Arial Narrow",sans-serif;
    font-size:13px;
    font-weight:700;
    letter-spacing:.08em;
    border-color:rgba(7,87,139,.5);
    color:var(--brand-blue);
    background:#fff;
    padding:10px 19px;
}

.bag-btn:hover{
    background:var(--brand-blue);
    color:#fff;
}

/* Barra informativa */
.announcement,
.topbar,
.delivery-bar{
    font-family:"DI Saira Condensed","Arial Narrow",sans-serif;
    font-weight:600;
    letter-spacing:.03em;
}

/* Hero */
.hero-slider{
    background:var(--soft);
}

.hero-kicker,
.eyebrow{
    font-family:"DI Saira Condensed","Arial Narrow",sans-serif;
    color:var(--turq);
    font-size:15px;
    font-weight:700;
    letter-spacing:.16em;
}

.hero-slide h1,
.hero h1{
    font-family:"DI Glamour",Georgia,serif;
    color:var(--brand-blue);
    font-weight:400;
    letter-spacing:-.035em;
    line-height:.89;
}

.hero-slide p,
.hero p{
    font-family:"DI Omnes",Arial,sans-serif;
    color:#526d80;
    font-size:19px;
    line-height:1.55;
    font-weight:400;
}

.hero-btn,
.btn-primary,
.btn-outline{
    font-family:"DI Saira Condensed","Arial Narrow",sans-serif;
    font-size:14px;
    line-height:1;
    font-weight:700;
    letter-spacing:.095em;
    min-height:50px;
    padding-left:27px;
    padding-right:27px;
}

.hero-btn-primary,
.btn-primary{
    background:var(--brand-blue);
    border-color:var(--brand-blue);
}

.hero-btn-secondary,
.btn-outline{
    color:var(--brand-blue);
    border-color:var(--brand-blue);
    background:rgba(255,255,255,.62);
}

.hero-btn-secondary:hover,
.btn-outline:hover{
    background:#fff;
}

.hero-slide-media-card{
    background:#fff;
    box-shadow:0 24px 55px rgba(7,87,139,.09);
}

/* Catálogo */
.catalog{
    background:#fff;
}

.catalog-head h2{
    font-family:"DI Glamour",Georgia,serif;
    font-weight:400;
    color:var(--brand-blue);
    letter-spacing:-.025em;
    line-height:.93;
}

.catalog-head p{
    font-size:17px;
    color:var(--muted);
}

.filters{
    gap:9px;
}

.filter-btn{
    font-family:"DI Saira Condensed","Arial Narrow",sans-serif;
    font-size:14px;
    font-weight:600;
    letter-spacing:.035em;
    padding:10px 19px;
    color:var(--brand-ink);
    border-color:#d7e2e5;
}

.filter-btn.active{
    background:var(--brand-blue);
    border-color:var(--brand-blue);
}

/* Productos */
.product-photo{
    background:linear-gradient(180deg,#fbf4ed 0%,#f8efe6 100%);
}

.product-line{
    font-family:"DI Saira Condensed","Arial Narrow",sans-serif;
    color:var(--turq);
    font-size:13px;
    font-weight:700;
    letter-spacing:.12em;
}

.product-title{
    font-family:"DI Glamour",Georgia,serif;
    font-size:31px;
    line-height:1.06;
    font-weight:400;
    letter-spacing:-.02em;
    color:var(--brand-blue);
}

.product-size{
    font-family:"DI Omnes",Arial,sans-serif;
    color:var(--muted);
}

/* Story / títulos editoriales */
.story h2,
.claims h2,
section h2{
    text-wrap:balance;
}

.story h2{
    font-family:"DI Glamour",Georgia,serif;
    font-weight:400;
    color:var(--brand-blue);
    letter-spacing:-.025em;
}

/* Claims */
.claim strong{
    font-family:"DI Glamour",Georgia,serif;
    font-weight:400;
    color:var(--brand-blue);
}

.claim span{
    font-family:"DI Saira Condensed","Arial Narrow",sans-serif;
    font-weight:700;
    letter-spacing:.08em;
}

/* Footer */
.footer{
    background:var(--brand-blue);
}

.footer-brand{
    font-family:"DI Glamour",Georgia,serif;
    font-size:35px;
    font-weight:400;
    letter-spacing:-.03em;
    text-transform:none;
}

.footer h4{
    font-family:"DI Saira Condensed","Arial Narrow",sans-serif;
    font-size:14px;
    letter-spacing:.10em;
}

.footer a,
.footer p{
    font-family:"DI Omnes",Arial,sans-serif;
}

/* Pequeños detalles inspirados en la etiqueta */
.product-card{
    transition:transform .2s ease;
}

.product-card:hover{
    transform:translateY(-2px);
}

.account-dropdown a,
.account-dropdown button{
    font-family:"DI Saira Condensed","Arial Narrow",sans-serif;
    font-size:13px;
}

/* Mobile */
@media(max-width:760px){
    .header{
        height:68px;
        padding:0 18px;
    }

    .brand{
        font-size:24px;
    }

    .hero-slide h1,
    .hero h1{
        letter-spacing:-.025em;
        line-height:.92;
    }

    .hero-slide p,
    .hero p{
        font-size:17px;
    }

    .product-title{
        font-size:28px;
    }

    .footer-brand{
        font-size:31px;
    }
}

/* ============================================================
   Catálogo: buscador visible + promociones
   ============================================================ */

.catalog-search-wrap{
    width:min(760px,92vw);
    margin:0 auto 22px;
    position:relative;
}

.catalog-search-icon{
    position:absolute;
    left:20px;
    top:50%;
    transform:translateY(-50%);
    color:var(--brand-blue);
    font-size:22px;
    opacity:.7;
    pointer-events:none;
}

.catalog-search-input{
    width:100%;
    min-height:56px;
    border:1px solid #d5e1e5;
    border-radius:999px;
    background:#fff;
    color:var(--brand-ink);
    padding:0 24px 0 52px;
    outline:none;
    font-family:"DI Omnes",Arial,sans-serif;
    font-size:16px;
    box-shadow:0 7px 24px rgba(7,87,139,.045);
    transition:border-color .18s ease,box-shadow .18s ease;
}

.catalog-search-input::placeholder{
    color:#8496a2;
}

.catalog-search-input:focus{
    border-color:rgba(7,87,139,.55);
    box-shadow:0 8px 28px rgba(7,87,139,.09);
}

.promo-filter{
    border-color:rgba(205,181,115,.8);
    color:#856f35;
    background:#fffdf7;
}

.promo-filter.active{
    background:#cdb573;
    border-color:#cdb573;
    color:#fff;
}

.promotion-summary{
    max-width:1300px;
    margin:-28px auto 42px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.promotion-summary[hidden]{
    display:none;
}

.promotion-mini-card{
    min-height:86px;
    display:flex;
    align-items:center;
    gap:14px;
    border:1px solid #e4dcc7;
    background:#fffdf8;
    padding:15px 17px;
    border-radius:16px;
}

.promotion-mini-mark{
    flex:0 0 40px;
    width:40px;
    height:40px;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#cdb573;
    color:#fff;
    font-family:"DI Saira Condensed","Arial Narrow",sans-serif;
    font-weight:700;
    font-size:18px;
}

.promotion-mini-card strong,
.promotion-mini-card span,
.promotion-mini-card small{
    display:block;
}

.promotion-mini-card strong{
    color:var(--brand-blue);
    font-family:"DI Omnes",Arial,sans-serif;
    font-size:15px;
    line-height:1.2;
}

.promotion-mini-card span{
    margin-top:4px;
    color:#5e6f79;
    font-size:13px;
}

.promotion-mini-card small{
    margin-top:2px;
    color:#8a7136;
    font-size:11px;
    font-weight:600;
}

.product-promo-badge{
    display:inline-flex;
    align-items:center;
    margin-bottom:9px;
    padding:5px 9px;
    border-radius:999px;
    background:#fff6d9;
    color:#806720;
    font-family:"DI Saira Condensed","Arial Narrow",sans-serif;
    font-size:11px;
    font-weight:700;
    letter-spacing:.07em;
}

.promotion-empty{
    grid-column:1/-1;
    padding:22px;
    border:1px dashed #d8d8d2;
    border-radius:14px;
    text-align:center;
    color:var(--muted);
}

@media(max-width:900px){
    .promotion-summary{
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:620px){
    .catalog-search-wrap{
        width:100%;
    }

    .catalog-search-input{
        min-height:52px;
        font-size:15px;
    }

    .promotion-summary{
        grid-template-columns:1fr;
        margin-top:-20px;
    }
}


/* ============================================================
   DON IGNACIO · PRODUCT CARDS MOBILE COMPACTAS
   2 productos por fila estilo ecommerce
============================================================ */

@media (max-width: 680px){

    /* Menos espacio general del catálogo */
    .catalog{
        padding-left:12px;
        padding-right:12px;
        padding-bottom:75px;
    }

    .catalog-head{
        margin-bottom:30px;
    }

    .catalog-head h2{
        font-size:40px;
        line-height:.98;
    }

    .catalog-head p{
        font-size:14px;
        line-height:1.5;
        padding:0 8px;
    }


    /* Buscador */
    .catalog-search-wrap{
        margin-bottom:16px;
    }

    .catalog-search-input{
        min-height:48px;
        padding-left:46px;
        padding-right:18px;
        font-size:14px;
    }

    .catalog-search-icon{
        left:17px;
        font-size:19px;
    }


    /* Filtros algo más compactos */
    .filters{
        justify-content:flex-start;
        flex-wrap:nowrap;
        overflow-x:auto;
        gap:7px;
        margin:0 -12px 28px;
        padding:0 12px 4px;
        scrollbar-width:none;
    }

    .filters::-webkit-scrollbar{
        display:none;
    }

    .filter-btn{
        flex:0 0 auto;
        padding:9px 14px;
        font-size:11px;
        white-space:nowrap;
    }


    /* DOS PRODUCTOS POR FILA */
    .product-grid{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px 9px;
    }


    /* Tarjeta */
    .product-card{
        min-width:0;
        border:1px solid #ece9e2;
        border-radius:12px;
        overflow:hidden;
        background:#fff;
    }


    /* Foto mucho más compacta */
    .product-photo{
        aspect-ratio:1 / 1;
        min-height:0;
        padding:10px;
        display:flex;
        align-items:center;
        justify-content:center;
        background:#faf9f6;
    }

    .product-photo img{
        width:100%;
        height:100%;
        max-height:145px;
        object-fit:contain;
    }

    .product-photo .placeholder,
    .placeholder{
        min-height:120px;
    }


    /* Texto */
    .product-meta{
        padding:11px 10px 12px;
    }

    .product-line{
        margin-bottom:5px;
        font-size:9px;
        line-height:1.2;
        letter-spacing:.08em;
    }

    .product-title{
        min-height:38px;
        margin-bottom:5px;
        font-size:14px;
        line-height:1.3;
        letter-spacing:-.01em;

        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }

    .product-size{
        font-size:11px;
        margin-bottom:7px;
    }


    /*
     * En mobile los beneficios quedan para la ficha/modal.
     * Evitamos tarjetas demasiado altas.
     */
    .product-attributes{
        display:none;
    }


    /* Promo */
    .product-promo-badge{
        margin-bottom:6px;
        padding:4px 7px;
        font-size:9px;
    }


    /* Precio + botón */
    .product-bottom{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:9px;
        margin-top:8px;
    }

    .product-price{
        font-size:16px;
        line-height:1;
        font-weight:700;
    }

    .add-small{
        width:100%;
        min-height:37px;
        border-radius:999px;
        padding:8px 7px;
        font-size:10px;
        letter-spacing:.04em;
    }


    /* Promociones en una sola columna */
    .promotion-summary{
        grid-template-columns:1fr;
        gap:8px;
        margin-bottom:25px;
    }

    .promotion-mini-card{
        min-height:70px;
        padding:11px 13px;
    }

}


/* Celulares muy angostos */
@media (max-width: 370px){

    .product-grid{
        gap:8px 6px;
    }

    .product-meta{
        padding:9px 8px 10px;
    }

    .product-title{
        font-size:13px;
    }

    .product-price{
        font-size:15px;
    }

}



/* ============================================================
   DON IGNACIO · MOBILE CARDS V2
   atributos + tamaño oscuro + cantidad + promo visible
============================================================ */

.product-promo-detail{
    margin-top:8px;
    padding:8px 10px;
    border-radius:10px;
    background:#fff8df;
    color:#7b6421;
    font-size:12px;
    line-height:1.3;
    font-weight:700;
}

.card-qty-row{
    display:grid;
    grid-template-columns:38px 1fr 38px;
    align-items:center;
    width:100%;
    min-height:38px;
    border:1px solid #d8e1e6;
    border-radius:999px;
    overflow:hidden;
    background:#fff;
}

.card-qty-btn{
    height:38px;
    border:0;
    background:#f7f9fa;
    color:var(--brand-blue);
    font-size:19px;
    font-weight:700;
    line-height:1;
}

.card-qty-value{
    display:block;
    text-align:center;
    color:#17233b;
    font-size:13px;
    font-weight:700;
}

@media (max-width:680px){

    .product-size{
        color:#20242a !important;
        font-weight:600;
        font-size:11px;
        margin:6px 0 8px;
    }

    .product-attributes{
        display:flex !important;
        flex-wrap:wrap;
        gap:4px 6px;
        margin:6px 0 2px;
    }

    .product-attribute{
        display:inline-flex;
        align-items:center;
        color:#20242a !important;
        background:transparent !important;
        border:0 !important;
        padding:0 !important;
        border-radius:0 !important;
        font-size:9px !important;
        line-height:1.25;
        font-weight:700;
        letter-spacing:.025em;
    }

    .product-attribute:not(:last-child)::after{
        content:"·";
        margin-left:6px;
        color:#8b949a;
    }

    .product-promo-detail{
        margin-top:0;
        padding:7px 8px;
        font-size:10px;
        border-radius:8px;
    }

    .card-qty-row{
        grid-template-columns:32px 1fr 32px;
        min-height:34px;
    }

    .card-qty-btn{
        height:34px;
        font-size:17px;
    }

    .card-qty-value{
        font-size:12px;
    }

    .add-small{
        min-height:36px;
    }
}

@media (max-width:370px){
    .product-attribute{
        font-size:8px !important;
    }

    .product-promo-detail{
        font-size:9px;
    }
}


/* ============================================================
   DON IGNACIO - MOBILE PULIDO + HERO ESTABLE V1
============================================================ */

/*
 * Las promociones pasarán a ser productos/combos propios.
 * En las cards normales no mostramos badge ni explicación
 * de la promoción automática.
 */
.product-promo-detail,
.product-promo-badge{
    display:none !important;
}

/* Atributos: más discretos, editoriales y compactos */
@media (max-width:680px){

    .product-card .product-attributes{
        display:flex !important;
        align-items:center;
        flex-wrap:wrap;
        gap:0 !important;
        margin:7px 0 3px !important;
        min-height:14px;
    }

    .product-card .product-attribute{
        display:inline-flex !important;
        align-items:center;
        padding:0 !important;
        margin:0 !important;
        border:0 !important;
        border-radius:0 !important;
        background:transparent !important;
        box-shadow:none !important;
        font-family:"DI Saira Condensed","Arial Narrow",sans-serif !important;
        font-size:8.5px !important;
        line-height:1.25 !important;
        font-weight:600 !important;
        letter-spacing:.055em !important;
        color:#4d555b !important;
    }

    .product-card .product-attribute:not(:last-child)::after{
        content:"·";
        display:inline-block;
        margin:0 6px;
        color:#a1a6aa;
        font-weight:400;
    }

    .product-card .product-size{
        color:#1f2529 !important;
        font-family:"DI Omnes",Arial,sans-serif !important;
        font-size:10.5px !important;
        line-height:1.2 !important;
        font-weight:500 !important;
        margin:5px 0 7px !important;
    }
}


/* ============================================================
   HERO MOBILE - ALTURA ESTABLE ENTRE BANNERS
============================================================ */

@media (max-width:850px){

    .hero-slider{
        padding:24px 16px 28px !important;
    }

    /*
     * Antes el track quedaba en altura automática y el slide activo
     * cambiaba el alto total. Ahora todos viven en la misma caja.
     */
    .hero-slider-track{
        position:relative !important;
        height:650px !important;
        min-height:650px !important;
        overflow:hidden;
    }

    .hero-slide,
    .hero-slide.active{
        position:absolute !important;
        inset:0 !important;
        display:grid !important;
        grid-template-columns:1fr !important;
        grid-template-rows:285px minmax(0,1fr) !important;
        gap:20px !important;
        align-content:start !important;
    }

    .hero-slide{
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
    }

    .hero-slide.active{
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
    }

    .hero-slide-media{
        order:-1 !important;
        width:100%;
        height:285px !important;
        min-height:285px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }

    .hero-slide-media-card{
        width:100% !important;
        max-width:520px !important;
        height:285px !important;
        padding:12px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        overflow:hidden !important;
    }

    .hero-slide-media-card img{
        width:100% !important;
        height:100% !important;
        max-width:100% !important;
        max-height:100% !important;
        object-fit:contain !important;
    }

    .hero-slide-text{
        width:100%;
        max-width:none !important;
        min-height:325px;
        overflow:hidden;
    }

    .hero-slide h1{
        margin-bottom:16px !important;
        font-size:clamp(43px,12vw,66px) !important;
        line-height:.92 !important;
    }

    .hero-slide p{
        margin-bottom:20px !important;
        font-size:15px !important;
        line-height:1.45 !important;
    }

    .hero-kicker{
        margin-bottom:12px !important;
        font-size:11px !important;
    }

    .hero-actions{
        gap:9px !important;
    }

    .hero-btn{
        min-height:44px !important;
        padding:0 18px !important;
        font-size:11px !important;
    }

    .hero-slider-controls{
        position:static !important;
        margin-top:14px !important;
    }
}

@media (max-width:390px){

    .hero-slider-track{
        height:625px !important;
        min-height:625px !important;
    }

    .hero-slide,
    .hero-slide.active{
        grid-template-rows:255px minmax(0,1fr) !important;
        gap:17px !important;
    }

    .hero-slide-media,
    .hero-slide-media-card{
        height:255px !important;
        min-height:255px !important;
    }

    .hero-slide-text{
        min-height:330px;
    }

    .hero-slide h1{
        font-size:clamp(40px,12vw,56px) !important;
    }
}


/* ============================================================
   DON IGNACIO - RESET BANNERS V1
   Unifica los 3 slides en desktop y mobile.
============================================================ */

.hero-slider{
    position:relative !important;
    padding:0 !important;
    background:#eaf5f6 !important;
    overflow:hidden !important;
}

.hero-slider-track{
    position:relative !important;
    height:620px !important;
    min-height:620px !important;
}

.hero-slide,
.hero-slide.active,
.hero-slide-wide{
    position:absolute !important;
    inset:0 !important;
    min-height:0 !important;
    height:620px !important;
    padding:54px 5vw 58px !important;

    display:grid !important;
    grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr) !important;
    gap:46px !important;
    align-items:center !important;

    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    overflow:hidden !important;
}

.hero-slide.active{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
}

.hero-slide::after,
.hero-slide-wide::after{
    content:none !important;
    display:none !important;
}

.hero-slide-text,
.hero-slide-wide .hero-slide-text{
    position:relative !important;
    z-index:2 !important;
    width:auto !important;
    max-width:620px !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
}

.hero-slide-media,
.hero-slide-wide .hero-slide-media{
    position:relative !important;
    inset:auto !important;
    z-index:1 !important;
    width:100% !important;
    height:480px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    order:initial !important;
}

.hero-slide-media-card,
.hero-slide-wide .hero-slide-media-card{
    width:100% !important;
    max-width:560px !important;
    height:480px !important;
    padding:24px !important;
    background:#fff !important;
    box-shadow:0 24px 55px rgba(7,87,139,.09) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
}

.hero-slide-media-card img,
.hero-slide-wide .hero-slide-media-card img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
}

.hero-slide h1,
.hero-slide-wide h1{
    font-size:clamp(52px,6vw,88px) !important;
    line-height:.92 !important;
    margin:0 0 22px !important;
}

.hero-slide p{
    font-size:17px !important;
    line-height:1.5 !important;
    margin:0 0 26px !important;
}

.hero-slider-controls{
    position:absolute !important;
    inset:0 !important;
    pointer-events:none !important;
    z-index:10 !important;
}

.hero-arrow-wrap{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    pointer-events:none !important;
}

.hero-arrow{
    display:grid !important;
    place-items:center !important;
    position:absolute !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:48px !important;
    height:48px !important;
    pointer-events:auto !important;
}

#heroPrev{ left:18px !important; }
#heroNext{ right:18px !important; }

.hero-dots{
    position:absolute !important;
    left:50% !important;
    bottom:18px !important;
    transform:translateX(-50%) !important;
    display:flex !important;
    gap:8px !important;
    pointer-events:auto !important;
}

@media(max-width:850px){

    .hero-slider-track{
        height:690px !important;
        min-height:690px !important;
    }

    .hero-slide,
    .hero-slide.active,
    .hero-slide-wide{
        height:690px !important;
        padding:22px 18px 54px !important;
        grid-template-columns:1fr !important;
        grid-template-rows:330px minmax(0,1fr) !important;
        gap:18px !important;
        align-content:start !important;
    }

    .hero-slide-media,
    .hero-slide-wide .hero-slide-media{
        order:-1 !important;
        height:330px !important;
    }

    .hero-slide-media-card,
    .hero-slide-wide .hero-slide-media-card{
        width:100% !important;
        max-width:none !important;
        height:330px !important;
        padding:14px !important;
        box-shadow:none !important;
    }

    .hero-slide-text,
    .hero-slide-wide .hero-slide-text{
        width:100% !important;
        max-width:none !important;
        height:auto !important;
        min-height:0 !important;
        overflow:visible !important;
    }

    .hero-slide h1,
    .hero-slide-wide h1{
        font-size:clamp(44px,12vw,62px) !important;
        line-height:.92 !important;
        margin-bottom:14px !important;
    }

    .hero-slide p{
        font-size:15px !important;
        line-height:1.42 !important;
        margin-bottom:18px !important;
    }

    .hero-kicker{
        font-size:10px !important;
        margin-bottom:9px !important;
    }

    .hero-actions{
        gap:8px !important;
    }

    .hero-btn{
        min-height:42px !important;
        padding:0 16px !important;
        font-size:10px !important;
    }

    .hero-arrow{
        width:42px !important;
        height:42px !important;
        font-size:26px !important;
    }

    #heroPrev{ left:10px !important; }
    #heroNext{ right:10px !important; }

    .hero-dots{
        bottom:14px !important;
    }
}

@media(max-width:390px){

    .hero-slider-track{
        height:650px !important;
        min-height:650px !important;
    }

    .hero-slide,
    .hero-slide.active,
    .hero-slide-wide{
        height:650px !important;
        grid-template-rows:285px minmax(0,1fr) !important;
        padding:18px 14px 50px !important;
        gap:16px !important;
    }

    .hero-slide-media,
    .hero-slide-wide .hero-slide-media,
    .hero-slide-media-card,
    .hero-slide-wide .hero-slide-media-card{
        height:285px !important;
    }

    .hero-slide h1,
    .hero-slide-wide h1{
        font-size:clamp(40px,12vw,54px) !important;
    }
}


/* ============================================================
   DON IGNACIO · PRODUCTOS SIN FONDO BLANCO V1
============================================================ */

.product-photo{
    background:#faf6f0 !important;
}

.product-photo img{
    mix-blend-mode:multiply;
    background:transparent !important;
}

/* Mobile */
@media(max-width:680px){

    .product-photo{
        background:#faf6f0 !important;
    }

    .product-photo img{
        mix-blend-mode:multiply;
    }

}


/* ============================================================
   PRODUCTOS PNG TRANSPARENTE
============================================================ */

.product-photo img{
    mix-blend-mode:normal !important;
    background:transparent !important;
}


/* ============================================================
   DON IGNACIO · PRODUCT PHOTO TRANSPARENTE V2
============================================================ */

.product-card{
    background:#f6f3ee !important;
}

.product-photo,
.product-card .product-photo{
    background:#f6f3ee !important;
    border:none !important;
    box-shadow:none !important;
}

.product-photo img,
.product-card .product-photo img{
    background:transparent !important;
    mix-blend-mode:normal !important;
    display:block !important;
}


/* ============================================================
   DON IGNACIO · PRODUCT IMAGE FINAL V3
============================================================ */

.product-card{
    background:#f6f3ee !important;
}

.product-photo,
.product-card .product-photo{
    background:#f6f3ee !important;
    border:0 !important;
    box-shadow:none !important;
}

.product-photo img,
.product-card .product-photo img{
    display:block !important;
    background:transparent !important;
    mix-blend-mode:normal !important;
    object-fit:contain !important;
}



/* ============================================================
   DON IGNACIO · CARD COMPACTA ERP SEO V1
============================================================ */
.product-card{display:flex !important;flex-direction:column !important}
.product-meta{display:flex !important;flex-direction:column !important;flex:1 1 auto !important}
.product-line{margin-bottom:4px !important}
.product-title{margin-bottom:5px !important}
.product-size{margin-bottom:5px !important}
.product-attributes{display:flex !important;flex-wrap:wrap !important;align-items:center !important;gap:0 !important;min-height:18px !important;margin:2px 0 7px !important}
.product-attribute{display:inline !important;background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;padding:0 !important;margin:0 !important;font-size:9px !important;line-height:1.35 !important;letter-spacing:.02em !important;font-weight:600 !important;white-space:normal !important}
.product-attribute:not(:last-child)::after{content:" · ";display:inline;margin:0 4px;opacity:.55}
.product-bottom{margin-top:auto !important}

@media (max-width:850px){
    .product-meta{padding:9px 9px 10px !important}
    .product-line{font-size:8px !important;margin-bottom:4px !important}
    .product-title{min-height:34px !important;font-size:13px !important;line-height:1.25 !important;margin-bottom:4px !important}
    .product-size{font-size:10px !important;margin-bottom:4px !important}
    .product-attributes{min-height:16px !important;margin:1px 0 6px !important;max-height:30px !important;overflow:hidden !important}
    .product-attribute{font-size:7.8px !important;line-height:1.35 !important;letter-spacing:.015em !important}
    .product-attribute:not(:last-child)::after{margin:0 3px}
    .product-bottom{gap:6px !important;margin-top:auto !important}
}


/* ============================================================
   DON IGNACIO · CARDS COMPACTAS V2
============================================================ */

.product-card .product-size{
    display:none !important;
}

.product-card .product-attributes{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
    gap:6px !important;
    min-height:28px !important;
    margin:7px 0 8px !important;
}

.product-card .product-attribute{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:25px !important;
    padding:4px 9px !important;
    margin:0 !important;
    border:1px solid rgba(27,42,74,.06) !important;
    border-radius:999px !important;
    background:#f1ede9 !important;
    box-shadow:none !important;
    color:#504b48 !important;
    font-size:9px !important;
    line-height:1.1 !important;
    font-weight:600 !important;
    letter-spacing:.015em !important;
    white-space:nowrap !important;
}

.product-card .product-attribute::after{
    content:none !important;
    display:none !important;
}

@media (min-width:851px){
    .product-card .card-qty-row{
        width:100% !important;
        max-width:230px !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .product-card .add-small{
        width:auto !important;
        min-width:145px !important;
        align-self:center !important;
        padding-left:24px !important;
        padding-right:24px !important;
    }
}

@media (max-width:850px){
    .product-card .product-meta{
        padding-top:9px !important;
        padding-bottom:10px !important;
    }

    .product-card .product-line{
        margin-bottom:4px !important;
    }

    .product-card .product-title{
        min-height:34px !important;
        margin-bottom:5px !important;
        line-height:1.23 !important;
    }

    .product-card .product-attributes{
        gap:4px !important;
        min-height:24px !important;
        margin:5px 0 7px !important;
        max-height:54px !important;
        overflow:hidden !important;
    }

    .product-card .product-attribute{
        min-height:22px !important;
        padding:3px 6px !important;
        font-size:7.5px !important;
        letter-spacing:0 !important;
    }

    .product-card .card-qty-row{
        width:100% !important;
    }

    .product-card .product-bottom{
        gap:7px !important;
    }
}


/* ============================================================
   DON IGNACIO · ATTRIBUTE PILLS V3
   Más humano, limpio y legible.
============================================================ */

.product-card .product-attribute{
    font-family:"DI Omnes", Arial, sans-serif !important;
    font-size:10px !important;
    line-height:1.1 !important;
    font-weight:600 !important;
    letter-spacing:0 !important;

    color:#35425a !important;
    background:#f4f5f6 !important;

    border:1px solid rgba(27,42,74,.08) !important;
    border-radius:999px !important;

    min-height:26px !important;
    padding:5px 10px !important;

    text-transform:none !important;
}

@media (max-width:850px){
    .product-card .product-attribute{
        font-family:"DI Omnes", Arial, sans-serif !important;
        font-size:8.8px !important;
        line-height:1.1 !important;
        font-weight:600 !important;
        letter-spacing:0 !important;

        min-height:23px !important;
        padding:4px 7px !important;
    }
}

/* ============================================================
   DON IGNACIO · CENTRAR ATRIBUTOS
============================================================ */

.product-card .product-attributes{
    justify-content:center !important;
    text-align:center !important;
}

@media (max-width:850px){
    .product-card .product-attributes{
        justify-content:center !important;
        text-align:center !important;
    }
}



/* ============================================================
   DON IGNACIO - HERO FULL BACKGROUND V1
   Imagen completa + texto HTML superpuesto en los 3 banners.
============================================================ */
.hero-slider{
    padding:0 !important;
    background:#eaf5f6 !important;
    overflow:hidden !important;
}
.hero-slider-track{
    position:relative !important;
    height:640px !important;
    min-height:640px !important;
}
.hero-slide,
.hero-slide.hero-slide-wide{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:640px !important;
    min-height:640px !important;
    display:block !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    isolation:isolate !important;
}
.hero-slide.active,
.hero-slide.hero-slide-wide.active{
    position:absolute !important;
}
.hero-slide .hero-slide-media{
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    display:block !important;
    margin:0 !important;
    padding:0 !important;
}
.hero-slide .hero-slide-media-card{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    border:0 !important;
    border-radius:0 !important;
    overflow:hidden !important;
}
.hero-slide .hero-slide-media-card img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:cover !important;
    object-position:center center !important;
    margin:0 !important;
    padding:0 !important;
}
.hero-slide::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(90deg,
        rgba(248,249,246,.96) 0%,
        rgba(248,249,246,.88) 25%,
        rgba(248,249,246,.58) 43%,
        rgba(248,249,246,.18) 61%,
        rgba(248,249,246,0) 76%);
}
.hero-slide .hero-slide-text,
.hero-slide.hero-slide-wide .hero-slide-text{
    position:relative !important;
    z-index:2 !important;
    width:min(620px,44%) !important;
    max-width:none !important;
    min-height:640px !important;
    margin:0 0 0 clamp(70px,6vw,120px) !important;
    padding:76px 0 84px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:flex-start !important;
    box-sizing:border-box !important;
}
.hero-slide .hero-kicker{margin-bottom:16px !important}
.hero-slide h1{max-width:600px !important;margin:0 0 24px !important}
.hero-slide p{max-width:500px !important;margin-bottom:28px !important}
.hero-slide-media-card::before,
.hero-slide-media-card::after{display:none !important;content:none !important}
.hero-arrow{z-index:5 !important}

@media (max-width:850px){
    .hero-slider-track,
    .hero-slide,
    .hero-slide.hero-slide-wide,
    .hero-slide.active,
    .hero-slide.hero-slide-wide.active{
        height:610px !important;
        min-height:610px !important;
    }
    .hero-slide::before{
        background:linear-gradient(180deg,
            rgba(248,249,246,.93) 0%,
            rgba(248,249,246,.86) 31%,
            rgba(248,249,246,.54) 49%,
            rgba(248,249,246,.15) 69%,
            rgba(248,249,246,0) 84%) !important;
    }
    .hero-slide .hero-slide-media-card img{
        object-fit:cover !important;
        object-position:center center !important;
    }
    .hero-slide .hero-slide-text,
    .hero-slide.hero-slide-wide .hero-slide-text{
        width:100% !important;
        min-height:610px !important;
        margin:0 !important;
        padding:44px 58px 170px 28px !important;
        justify-content:flex-start !important;
    }
    .hero-slide h1{
        max-width:520px !important;
        margin-bottom:16px !important;
        font-size:clamp(42px,12vw,64px) !important;
        line-height:.92 !important;
    }
    .hero-slide p{
        max-width:430px !important;
        margin-bottom:20px !important;
        font-size:15px !important;
        line-height:1.42 !important;
    }
    .hero-slide .hero-kicker{font-size:11px !important;margin-bottom:11px !important}
    .hero-slide .hero-actions{gap:8px !important}
    .hero-slide .hero-btn{min-height:42px !important;padding:0 17px !important;font-size:11px !important}
    #heroPrev{left:10px !important}
    #heroNext{right:10px !important}
    .hero-dots{bottom:16px !important}
}
@media (max-width:390px){
    .hero-slider-track,
    .hero-slide,
    .hero-slide.hero-slide-wide,
    .hero-slide.active,
    .hero-slide.hero-slide-wide.active{
        height:570px !important;
        min-height:570px !important;
    }
    .hero-slide .hero-slide-text,
    .hero-slide.hero-slide-wide .hero-slide-text{
        min-height:570px !important;
        padding:38px 50px 150px 24px !important;
    }
    .hero-slide h1{font-size:clamp(38px,12vw,54px) !important}
}

/* HF CLAIMS MARCA V1 CSS */
.hf-brand-claims{
    background:var(--brand-blue,#075d93)!important;
    color:#fff!important;
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    padding:54px 5vw!important;
}
.hf-brand-claims .claim{
    min-width:0!important;
    padding:10px 28px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    border-right:1px solid rgba(255,255,255,.18)!important;
}
.hf-brand-claims .claim:last-child{border-right:0!important}
.hf-brand-claims .claim strong{
    display:block!important;
    margin:0!important;
    font-family:"DI Saira Condensed","Arial Narrow",Arial,sans-serif!important;
    font-size:clamp(21px,1.7vw,29px)!important;
    line-height:1.02!important;
    font-weight:700!important;
    letter-spacing:.015em!important;
    text-transform:none!important;
    color:#fff!important;
}
.hf-brand-claims .claim span{
    display:block!important;
    margin-top:9px!important;
    max-width:260px!important;
    font-family:"DI Omnes",Arial,sans-serif!important;
    font-size:12px!important;
    line-height:1.35!important;
    font-weight:400!important;
    letter-spacing:0!important;
    text-transform:none!important;
    color:rgba(255,255,255,.82)!important;
    opacity:1!important;
}
@media(max-width:760px){
    .hf-brand-claims{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        padding:28px 14px!important;
    }
    .hf-brand-claims .claim{
        min-height:128px!important;
        padding:18px 12px!important;
        border-right:1px solid rgba(255,255,255,.16)!important;
        border-bottom:1px solid rgba(255,255,255,.16)!important;
    }
    .hf-brand-claims .claim:nth-child(2n){border-right:0!important}
    .hf-brand-claims .claim:nth-last-child(-n+2){border-bottom:0!important}
    .hf-brand-claims .claim strong{font-size:20px!important;line-height:1.05!important}
    .hf-brand-claims .claim span{margin-top:7px!important;font-size:11px!important;line-height:1.3!important}
}
@media(max-width:390px){
    .hf-brand-claims .claim{min-height:118px!important;padding:16px 9px!important}
    .hf-brand-claims .claim strong{font-size:18px!important}
    .hf-brand-claims .claim span{font-size:10px!important}
}

/* HF_BANNER_MOBILE_TEXTO_V1
 * Corrección exclusiva para móvil: despegar título del aviso de delivery.
 * Desktop (>850px) se mantiene sin modificaciones.
 */
@media (max-width:850px){
    .hero-slide .hero-slide-text,
    .hero-slide.hero-slide-wide .hero-slide-text{
        padding-top:104px !important;
        padding-bottom:95px !important;
    }
    .hero-slide h1,
    .hero-slide.hero-slide-wide h1{
        font-size:clamp(36px,10.2vw,56px) !important;
        line-height:1.02 !important;
        overflow-wrap:break-word;
    }
}
@media (max-width:390px){
    .hero-slide .hero-slide-text,
    .hero-slide.hero-slide-wide .hero-slide-text{
        padding-top:94px !important;
        padding-bottom:74px !important;
    }
    .hero-slide h1,
    .hero-slide.hero-slide-wide h1{
        font-size:clamp(34px,10vw,43px) !important;
    }
}
