:root{--azul:#071d27;--gris:#f4f6f8;--borde:#dfe5ea;--verde:#17a85b}*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--gris);color:#15242d}.header{background:white;border-bottom:1px solid var(--borde);position:sticky;top:0;z-index:5}.wrap{max-width:1180px;margin:auto;padding:18px}.brand{display:flex;align-items:center;gap:14px}.brand img{height:64px;object-fit:contain}.brand h1{font-size:28px;margin:0;color:var(--azul)}.nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}.nav a{color:var(--azul);text-decoration:none;padding:9px 12px;border:1px solid var(--borde);border-radius:20px;background:#fff}.hero{background:linear-gradient(135deg,#071d27,#12384a);color:#fff;padding:42px 0}.hero h2{font-size:38px;margin:0 0 10px}.hero p{font-size:18px;max-width:780px}.notice{background:#fff;border-left:5px solid var(--azul);padding:16px;margin:18px 0;border-radius:12px}.filters{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.filters input,.filters select{padding:13px;border:1px solid var(--borde);border-radius:12px;font-size:16px}.filters input{flex:1;min-width:240px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}.card{background:#fff;border:1px solid var(--borde);border-radius:18px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,.05)}.card img{width:100%;height:190px;object-fit:cover;background:#e9eef2}.card-body{padding:16px}.tag{display:inline-block;background:#e9f0f4;color:var(--azul);padding:5px 9px;border-radius:20px;font-size:12px;font-weight:bold}.card h3{margin:12px 0 8px}.price{font-weight:bold;font-size:18px;color:var(--azul);line-height:1.5}.desc{color:#53636d;min-height:44px}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.btn{border:0;border-radius:12px;padding:11px 12px;text-decoration:none;cursor:pointer;font-weight:bold;display:inline-block}.btn-wpp{background:var(--verde);color:white}.btn-cart{background:var(--azul);color:white}.footer{background:#071d27;color:#fff;margin-top:40px}.footer a{color:#fff}.cart{position:fixed;right:18px;bottom:18px;background:#fff;border:1px solid var(--borde);border-radius:18px;box-shadow:0 8px 30px rgba(0,0,0,.18);padding:14px;max-width:350px;z-index:10}.cart h3{margin:0 0 8px}.cart-items{max-height:220px;overflow:auto}.admin-box{max-width:980px;margin:30px auto;background:#fff;padding:22px;border-radius:18px;border:1px solid var(--borde)}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.form-grid input,.form-grid select,.form-grid textarea{width:100%;padding:12px;border:1px solid var(--borde);border-radius:10px}.full{grid-column:1/-1}table{width:100%;border-collapse:collapse;background:#fff}td,th{padding:10px;border-bottom:1px solid var(--borde);text-align:left}.admin-nav a{margin-right:10px}@media(max-width:700px){.brand h1{font-size:22px}.hero h2{font-size:28px}.form-grid{grid-template-columns:1fr}.cart{left:10px;right:10px}.brand img{height:52px}}

.card-image{
    background:#eef3f6;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.tags{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    width:100%;
    padding:10px;
}

.tag{
    margin:0 !important;
}

.card-image img{
    width:100%;
    height:220px;
    object-fit:contain;
    padding:10px;
}

.precio-destacado{
    background:#e8f7ef;
    border:2px solid var(--verde);
    border-radius:10px;
    padding:10px;
    font-size:18px;
    font-weight:bold;
}

.precio-principal{
    background:#e8f7ef;
    border:2px solid var(--verde);
    border-radius:12px;
    padding:14px;
    margin:14px 0;
    display:flex;
    flex-direction:column;
    gap:5px;
}

.precio-principal span{
    font-size:14px;
    font-weight:bold;
    color:#53636d;
}

.precio-principal strong{
    font-size:26px;
    color:var(--azul);
}


.titulo-catalogo{
    margin:24px 0 8px;
}

.titulo-catalogo h2{
    margin:0 0 5px;
    font-size:30px;
    color:var(--azul);
}

.titulo-catalogo p{
    margin:0;
    color:#53636d;
    font-size:16px;
}

.nav a.activo{
    background:var(--azul);
    color:#fff;
    border-color:var(--azul);
    font-weight:bold;
}

.cart{
    width:300px;
    max-width:calc(100vw - 30px);
}

.cart-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}

.cart-head h3{
    margin:0;
}

.cart-toggle{
    width:32px;
    height:32px;
    border:0;
    border-radius:50%;
    background:var(--azul);
    color:#fff;
    font-size:20px;
    font-weight:bold;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
}

.cart-content{
    margin-top:10px;
}

.cart.minimizado{
    width:auto;
    min-width:135px;
}

.cart.minimizado .cart-content{
    display:none;
}

@media(max-width:700px){
    .cart.minimizado{
        left:auto;
        right:10px;
        width:auto;
    }
}

.envios{
    margin:50px 0 20px;
    padding:35px;
    background:#fff;
    border:1px solid var(--borde);
    border-radius:22px;
}

.envios-header{
    max-width:750px;
    margin-bottom:25px;
}

.envios-badge{
    display:inline-block;
    background:#e8f7ef;
    color:var(--verde);
    font-weight:bold;
    padding:8px 12px;
    border-radius:20px;
    margin-bottom:12px;
}

.envios-header h2{
    margin:0 0 10px;
    font-size:32px;
    color:var(--azul);
}

.envios-header p{
    color:#53636d;
    font-size:17px;
}

.envios-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.zona-card{
    background:#f4f6f8;
    border-radius:16px;
    padding:20px;
}

.zona-card h3{
    margin-top:0;
    color:var(--azul);
}

.zona-card ul{
    padding-left:20px;
    line-height:1.9;
    margin-bottom:0;
}

.envios-consulta{
    margin-top:22px;
    padding:20px;
    border:1px solid var(--borde);
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.envios-consulta h3{
    margin:0 0 5px;
}

.envios-consulta p{
    margin:0;
    color:#53636d;
}

.mapa-envios{
    margin-top:22px;
}

.mapa-placeholder{
    min-height:320px;
    background:#e9eef2;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
    color:#53636d;
    text-align:center;
    padding:20px;
}

@media(max-width:700px){

    .envios{
        padding:20px;
    }

    .envios-grid{
        grid-template-columns:1fr;
    }

    .envios-consulta{
        flex-direction:column;
        align-items:flex-start;
    }

    .envios-header h2{
        font-size:26px;
    }
}

.mapa-envios{
    margin-top:25px;
}

.mapa-envios h3{
    margin:0 0 6px;
    color:var(--azul);
    font-size:22px;
}

.mapa-texto{
    margin:0 0 15px;
    color:#53636d;
}

.mapa-responsive{
    width:100%;
    height:480px;
    overflow:hidden;
    border-radius:18px;
    border:1px solid var(--borde);
    background:#e9eef2;
}

.mapa-responsive iframe{
    width:100%;
    height:100%;
    border:0;
    display:block;
}

@media(max-width:700px){

    .mapa-responsive{
        height:380px;
    }

}

/* ======================================
   NUEVA ESTÉTICA - DISTRIBUIDORA 3ER TIEMPO
====================================== */

/* PORTADA */

.hero-portada{
    position:relative;
    min-height:560px;

    background-image:
        linear-gradient(
            90deg,
            rgba(4,22,31,.94) 0%,
            rgba(4,22,31,.82) 42%,
            rgba(4,22,31,.40) 70%,
            rgba(4,22,31,.18) 100%
        ),
        url('/img/portada-deposito.png');

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    display:flex;
    align-items:center;

    color:white;
    overflow:hidden;
}

.hero-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            0deg,
            rgba(4,22,31,.22),
            transparent 45%
        );

    pointer-events:none;
}

.hero-content{
    position:relative;
    z-index:2;
    width:100%;
}

.hero-texto{
    max-width:720px;
    padding:55px 0;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;

    background:rgba(255,255,255,.13);
    border:1px solid rgba(255,255,255,.25);

    backdrop-filter:blur(6px);

    padding:9px 14px;
    border-radius:30px;

    font-size:14px;
    font-weight:bold;

    margin-bottom:18px;
}

.hero-portada h2{
    font-size:52px;
    line-height:1.04;
    margin:0 0 18px;
    color:#fff;
    letter-spacing:-1px;
}

.hero-portada h2 span{
    display:block;
}

.hero-subtitulo{
    font-size:19px !important;
    line-height:1.5;
    max-width:620px !important;
    color:rgba(255,255,255,.90);
    margin-bottom:24px;
}

.hero-beneficios{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-bottom:28px;
}

.hero-beneficios span{
    background:rgba(255,255,255,.11);
    border:1px solid rgba(255,255,255,.18);
    padding:9px 12px;
    border-radius:10px;
    font-size:14px;
    font-weight:bold;
}

.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.hero-btn{
    padding:14px 18px;
    border-radius:12px;
    font-size:15px;
    transition:.2s ease;
}

.hero-btn:hover{
    transform:translateY(-2px);
}

.btn-ofertas{
    background:#fff;
    color:var(--azul);
}

.btn-envios{
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.35);
    color:white;
}


/* HEADER */

.header{
    box-shadow:0 3px 18px rgba(0,0,0,.05);
}

.brand img{
    transition:.2s ease;
}

.nav a{
    transition:.18s ease;
}

.nav a:hover{
    background:#eef3f6;
    transform:translateY(-1px);
}

.nav a.activo:hover{
    background:var(--azul);
}


/* TÍTULOS DEL CATÁLOGO */

.titulo-catalogo{
    padding-top:14px;
    margin-bottom:22px;
}

.titulo-catalogo h2{
    font-size:32px;
    letter-spacing:-.5px;
}

.titulo-catalogo p{
    font-size:16px;
}


/* TARJETAS DE PRODUCTOS */

.grid{
    gap:22px;
}

.card{
    border-radius:18px;
    border:1px solid #e3e8ec;

    box-shadow:
        0 5px 15px rgba(7,29,39,.05);

    transition:
        transform .20s ease,
        box-shadow .20s ease;

    overflow:hidden;
}

.card:hover{
    transform:translateY(-5px);

    box-shadow:
        0 14px 30px rgba(7,29,39,.12);
}

.card-image{
    min-height:245px;
    background:#f1f5f7;
    padding:14px;
}

.card-image img{
    height:220px;
    width:100%;
    object-fit:contain;

    transition:transform .25s ease;
}

.card:hover .card-image img{
    transform:scale(1.035);
}

.card-body{
    padding:19px;
}

.card h3{
    font-size:19px;
    line-height:1.25;
    color:var(--azul);
    margin:0 0 12px;
}

.card-body p{
    line-height:1.45;
}

.price-box{
    background:#f5f8fa;
    border-radius:12px;
    padding:10px 13px;
    margin:12px 0;
}

.price-box p{
    margin:5px 0;
}

.actions{
    margin-top:17px;
}

.actions .btn{
    flex:1;
    text-align:center;
}


/* PRECIO PRINCIPAL */

.precio-principal{
    background:#eaf8f0;
    border:1px solid #bce7cf;
    border-radius:13px;
    padding:13px 15px;
    margin:14px 0;
}

.precio-principal span{
    display:block;
    font-size:13px;
    margin-bottom:3px;
}

.precio-principal strong{
    font-size:25px;
}


/* ENVÍOS */

.envios{
    box-shadow:0 8px 30px rgba(7,29,39,.06);
}

.zona-card{
    border:1px solid #e4e9ed;
}

.mapa-responsive{
    box-shadow:0 6px 22px rgba(7,29,39,.08);
}


/* BOTONES */

.btn{
    transition:
        transform .18s ease,
        opacity .18s ease;
}

.btn:hover{
    transform:translateY(-1px);
}

.btn-wpp:hover{
    opacity:.90;
}


/* FOOTER NUEVO */

.footer{
    margin-top:65px;
    padding:45px 0 25px;
    background:#061b24;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    gap:40px;
}

.footer h3{
    font-size:22px;
    margin:0 0 12px;
}

.footer h4{
    margin:0 0 12px;
}

.footer p{
    color:#c7d0d5;
    line-height:1.6;
}

.footer-links{
    display:flex;
    flex-direction:column;
    gap:9px;
}

.footer-links a{
    color:#dbe2e6;
    text-decoration:none;
}

.footer-links a:hover{
    text-decoration:underline;
}

.footer-bottom{
    border-top:1px solid rgba(255,255,255,.12);
    margin-top:30px;
    padding-top:20px;
    color:#9eabb1;
    font-size:13px;
}


/* CELULAR */

@media(max-width:700px){

    .hero-portada{
        min-height:610px;

        background-position:62% center;

        background-image:
            linear-gradient(
                90deg,
                rgba(4,22,31,.94),
                rgba(4,22,31,.75)
            ),
            url('/img/portada-deposito.png');
    }

    .hero-texto{
        padding:45px 0;
    }

    .hero-portada h2{
        font-size:38px;
    }

    .hero-subtitulo{
        font-size:17px !important;
    }

    .hero-beneficios{
        flex-direction:column;
        align-items:flex-start;
    }

    .hero-actions{
        flex-direction:column;
    }

    .hero-actions .btn{
        width:100%;
        text-align:center;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

}

/* =========================================
   MEJORA CATÁLOGO + BUSCADOR + PRODUCTOS
========================================= */

/* Un poquito más visible la foto de portada */
.hero-portada{
    background-image:
        linear-gradient(
            90deg,
            rgba(4,22,31,.88) 0%,
            rgba(4,22,31,.72) 42%,
            rgba(4,22,31,.28) 72%,
            rgba(4,22,31,.08) 100%
        ),
        url('/img/portada-deposito.png');
}


/* ESPACIO ENTRE PORTADA Y CATÁLOGO */

main.wrap{
    padding-top:30px;
    padding-bottom:30px;
}


/* TÍTULO DEL CATÁLOGO */

.titulo-catalogo{
    margin:10px 0 24px;
}

.titulo-catalogo h2{
    font-size:34px;
    margin:0 0 7px;
    color:var(--azul);
    letter-spacing:-.7px;
}

.titulo-catalogo p{
    margin:0;
    color:#64737c;
    font-size:16px;
}


/* BUSCADOR Y FILTROS */

.filters{
    background:#fff;
    padding:14px;
    border:1px solid #e1e7eb;
    border-radius:16px;
    box-shadow:0 5px 18px rgba(7,29,39,.05);
    margin:0 0 28px;

    display:grid;
    grid-template-columns:1fr 220px auto;
    gap:10px;
}

.filters input,
.filters select{
    width:100%;
    height:48px;
    border:1px solid #dce3e7;
    border-radius:11px;
    padding:0 14px;
    background:#fff;
    font-size:15px;
    outline:none;
    transition:.2s;
}

.filters input:focus,
.filters select:focus{
    border-color:#8ea5b0;
    box-shadow:0 0 0 3px rgba(7,29,39,.07);
}

.filters button{
    min-width:105px;
    height:48px;
    padding:0 18px;
}


/* GRILLA */

.grid{
    grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
    gap:22px;
    align-items:stretch;
}


/* TARJETA */

.card{
    display:flex;
    flex-direction:column;
    height:100%;

    background:#fff;
    border:1px solid #e1e7eb;
    border-radius:18px;

    box-shadow:
        0 5px 16px rgba(7,29,39,.055);

    overflow:hidden;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.card:hover{
    transform:translateY(-5px);
    border-color:#cad5da;

    box-shadow:
        0 16px 35px rgba(7,29,39,.12);
}


/* ZONA DE FOTO */

.card-image{
    position:relative;
    min-height:255px;
    height:255px;

    padding:16px;

    background:
        linear-gradient(
            180deg,
            #f7f9fa 0%,
            #eef3f5 100%
        );

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.card-image img{
    width:100%;
    height:210px;
    object-fit:contain;
    padding:4px;

    transition:transform .25s ease;
}

.card:hover .card-image img{
    transform:scale(1.045);
}


/* ETIQUETAS OFERTA / COMBO */

.tags{
    position:absolute;
    top:12px;
    left:12px;
    z-index:2;

    width:auto;
    padding:0;

    display:flex;
    gap:6px;
}

.tag{
    background:#fff;
    color:var(--azul);

    border:1px solid rgba(7,29,39,.10);
    box-shadow:0 3px 10px rgba(0,0,0,.07);

    padding:6px 9px;
    border-radius:20px;

    font-size:12px;
    font-weight:700;
}


/* CONTENIDO */

.card-body{
    padding:19px;
    display:flex;
    flex-direction:column;
    flex:1;
}

.card h3{
    font-size:19px;
    line-height:1.25;
    color:var(--azul);

    margin:0 0 14px;
}

.card-body p{
    margin:5px 0;
    line-height:1.4;
}

.card-body .desc{
    margin-top:12px;
    color:#64737c;
    font-size:14px;
}


/* TODOS LOS PRECIOS EN INICIO */

.price-box{
    background:#f6f8f9;
    border:1px solid #e7ebee;
    border-radius:13px;

    padding:11px 13px;
    margin:13px 0;
}

.price-box p{
    margin:5px 0;
}


/* PRECIO DESTACADO EN MINORISTA / MAYORISTA */

.precio-principal{
    background:#edf8f2;
    border:1px solid #c7e8d5;
    border-radius:13px;

    padding:13px 14px;
    margin:14px 0;
}

.precio-principal span{
    font-size:13px;
    color:#53636d;
}

.precio-principal strong{
    display:block;
    margin-top:3px;

    color:var(--azul);
    font-size:25px;
}


/* BOTONES ABAJO SIEMPRE ALINEADOS */

.actions{
    display:flex;
    gap:8px;
    margin-top:auto;
    padding-top:16px;
}

.actions .btn{
    flex:1;
    text-align:center;
    white-space:nowrap;
}


/* EFECTO BOTONES */

.actions .btn-wpp{
    box-shadow:0 4px 12px rgba(23,168,91,.18);
}

.actions .btn-cart{
    box-shadow:0 4px 12px rgba(7,29,39,.14);
}


/* TABLET */

@media(max-width:900px){

    .filters{
        grid-template-columns:1fr 190px auto;
    }

}


/* CELULAR */

@media(max-width:700px){

    main.wrap{
        padding-top:20px;
    }

    .titulo-catalogo h2{
        font-size:28px;
    }

    .filters{
        grid-template-columns:1fr;
        padding:12px;
    }

    .filters input,
    .filters select,
    .filters button{
        width:100%;
    }

    .grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .card-image{
        height:230px;
        min-height:230px;
    }

    .card-image img{
        height:195px;
    }

    .card-body{
        padding:17px;
    }

    .actions{
        flex-direction:row;
    }

}

/* HEADER MÁS COMPACTO */

.header .wrap{
    padding-top:14px;
    padding-bottom:14px;
}

.brand img{
    height:50px;
}

.brand h1{
    font-size:26px;
}

.nav{
    margin-top:10px;
}


/* EVITA QUE EL HEADER TAPE LAS SECCIONES */

#envios{
    scroll-margin-top:140px;
}

.titulo-catalogo{
    scroll-margin-top:140px;
}


/* MÁS AIRE ENTRE BUSCADOR Y PRODUCTOS */

.filters{
    margin-bottom:26px;
}


/* FONDO DEL CATÁLOGO UN POCO MÁS LIMPIO */

body{
    background:#f5f7f8;
}


/* ======================================
   HEADER NUEVO
====================================== */

.header{
    background:rgba(255,255,255,.97);
    border-bottom:1px solid #e5eaed;
    position:sticky;
    top:0;
    z-index:50;
    box-shadow:0 3px 18px rgba(7,29,39,.05);
}

.header-inner{
    min-height:82px;
    padding-top:12px;
    padding-bottom:12px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
}

.brand{
    display:flex;
    align-items:center;
    gap:12px;

    text-decoration:none;
    color:var(--azul);
}

.brand img{
    width:auto;
    height:48px;
    object-fit:contain;
}

.brand-text{
    display:flex;
    flex-direction:column;
}

.brand-text strong{
    font-size:22px;
    line-height:1.15;
    color:var(--azul);
}

.brand-text span{
    margin-top:3px;
    font-size:12px;
    color:#728088;
}

.nav{
    margin:0;
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:nowrap;
}

.nav a{
    display:flex;
    align-items:center;
    justify-content:center;

    padding:9px 13px;
    border-radius:22px;

    border:1px solid transparent;

    font-size:14px;
    white-space:nowrap;

    color:var(--azul);
    background:transparent;

    transition:.18s ease;
}

.nav a:hover{
    background:#f1f5f6;
    border-color:#e0e6e9;
}

.nav a.activo{
    background:var(--azul);
    color:#fff;
    border-color:var(--azul);
}


/* CELULAR */

@media(max-width:800px){

    .header-inner{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
        padding-top:10px;
        padding-bottom:10px;
    }

    .brand img{
        height:42px;
    }

    .brand-text strong{
        font-size:19px;
    }

    .nav{
        width:100%;
        overflow-x:auto;
        padding-bottom:3px;
    }

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

    .nav a{
        flex:0 0 auto;
        padding:8px 11px;
        font-size:13px;
    }

}

/* ======================================
   FOOTER FINAL
====================================== */

.footer{
    background:#061b24;
    color:#fff;
    margin-top:65px;
    padding:55px 0 22px;
}

.footer-grid{
    display:grid;
    grid-template-columns:1.5fr .8fr .8fr 1.2fr;
    gap:45px;
}

.footer-logo{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:15px;
}

.footer-logo img{
    height:52px;
    width:auto;
    background:#fff;
    border-radius:10px;
    padding:5px;
}

.footer-logo h3{
    margin:0;
    font-size:21px;
    color:#fff;
}

.footer-logo span{
    display:block;
    margin-top:3px;
    font-size:12px;
    color:#9eabb1;
}

.footer-marca p{
    color:#bec9ce;
    line-height:1.65;
    max-width:390px;
    margin-bottom:18px;
}

.footer h4{
    margin:5px 0 16px;
    color:#fff;
    font-size:16px;
}

.footer-links{
    display:flex;
    flex-direction:column;
    gap:11px;
}

.footer-links a{
    color:#c8d2d7;
    text-decoration:none;
    transition:.18s ease;
}

.footer-links a:hover{
    color:#fff;
    transform:translateX(3px);
}

.footer-info{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.footer-info span{
    color:#c8d2d7;
    font-size:14px;
    line-height:1.4;
}

.footer-bottom{
    margin-top:42px;
    padding-top:20px;

    border-top:1px solid rgba(255,255,255,.12);

    display:flex;
    justify-content:space-between;
    gap:20px;

    color:#829198;
    font-size:12px;
}


/* CELULAR */

@media(max-width:800px){

    .footer{
        padding-top:40px;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .footer-bottom{
        flex-direction:column;
        gap:5px;
    }

}

/* =====================================================
   MOBILE FINAL - DISTRIBUIDORA 3ER TIEMPO
   ESTE BLOQUE DEBE QUEDAR AL FINAL DEL CSS
===================================================== */

@media (max-width:800px){

    /* ---------------------------------
       GENERAL
    --------------------------------- */

    body{
        overflow-x:hidden;
        padding-bottom:90px;
    }

    .wrap{
        width:100%;
        padding-left:16px;
        padding-right:16px;
    }


    /* ---------------------------------
       HEADER
    --------------------------------- */

    .header{
        position:sticky;
        top:0;
        z-index:50;
    }

    .header-inner{
        min-height:auto;
        flex-direction:column;
        align-items:flex-start;
        gap:8px;

        padding-top:10px;
        padding-bottom:9px;
    }

    .brand{
        gap:9px;
    }

    .brand img{
        height:38px;
    }

    .brand-text strong{
        font-size:19px;
        line-height:1.1;
    }

    .brand-text span{
        font-size:12px;
        margin-top:3px;
    }


    /* MENÚ */

    .nav{
        width:100%;
        display:flex;
        align-items:center;

        gap:4px;
        margin:0;

        overflow-x:auto;
        overflow-y:hidden;

        white-space:nowrap;

        padding:2px 0 3px;

        scrollbar-width:none;
    }

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

    .nav a{
        flex:0 0 auto;

        padding:8px 9px;

        font-size:13px;
        border-radius:18px;
    }


    /* ---------------------------------
       PORTADA
    --------------------------------- */

    .hero-portada{
        min-height:0;

        background-position:64% center;

        background-image:
            linear-gradient(
                90deg,
                rgba(4,22,31,.90) 0%,
                rgba(4,22,31,.74) 55%,
                rgba(4,22,31,.42) 100%
            ),
            url('/img/portada-deposito.png');
    }

    .hero-texto{
        max-width:none;
        width:100%;

        padding:38px 0 32px;
    }

    .hero-badge{
        font-size:13px;
        padding:8px 11px;
        margin-bottom:17px;
    }

    .hero-portada h2{
        font-size:36px;
        line-height:1.06;
        letter-spacing:-.6px;

        margin-bottom:17px;
    }

    .hero-subtitulo{
        font-size:16px !important;
        line-height:1.5;

        margin-bottom:20px;
    }


    /* BENEFICIOS */

    .hero-beneficios{
        display:flex;
        flex-direction:column;
        align-items:stretch;

        gap:8px;
        margin-bottom:22px;
    }

    .hero-beneficios span{
        width:fit-content;
        max-width:100%;

        padding:9px 11px;

        font-size:13px;
    }


    /* BOTONES PORTADA */

    .hero-actions{
        display:flex;
        flex-direction:column;
        gap:9px;
    }

    .hero-actions .btn{
        width:100%;

        padding:13px 14px;

        text-align:center;
        font-size:14px;
    }


    /* ---------------------------------
       CATÁLOGO
    --------------------------------- */

    main.wrap{
        padding-top:20px;
        padding-bottom:10px;
    }

    .titulo-catalogo{
        margin:4px 0 18px;
    }

    .titulo-catalogo h2{
        font-size:27px;
        line-height:1.15;
    }

    .titulo-catalogo p{
        font-size:14px;
    }


    /* BUSCADOR */

    .filters{
        display:grid;
        grid-template-columns:1fr;

        gap:8px;

        padding:10px;
        margin-bottom:18px;

        border-radius:14px;
    }

    .filters input,
    .filters select,
    .filters button{
        width:100%;
        height:45px;
    }


    /* ---------------------------------
       PRODUCTOS
    --------------------------------- */

    .grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .card{
        width:100%;
        border-radius:18px;
    }

    .card-image{
        height:215px;
        min-height:215px;

        padding:12px;
    }

    .card-image img{
        height:190px;
        padding:3px;
    }

    .card-body{
        padding:17px;
    }

    .card h3{
        font-size:20px;
        margin-bottom:12px;
    }

    .card-body p{
        font-size:15px;
    }

    .card-body .desc{
        min-height:0;

        font-size:14px;
        line-height:1.45;

        margin-top:12px;
    }


    /* PRECIOS */

    .price-box{
        margin:13px 0;

        padding:11px 13px;
        border-radius:12px;
    }

    .price-box p{
        margin:5px 0;
    }

    .precio-principal{
        margin:13px 0;
        padding:12px 13px;
    }

    .precio-principal strong{
        font-size:23px;
    }


    /* BOTONES PRODUCTOS */

    .actions{
        display:grid;
        grid-template-columns:1fr 1fr;

        gap:8px;

        margin-top:auto;
        padding-top:15px;
    }

    .actions .btn{
        width:100%;

        padding:12px 7px;

        font-size:14px;
        text-align:center;

        white-space:nowrap;
    }


    /* ---------------------------------
       ENVÍOS
    --------------------------------- */

    #envios{
        scroll-margin-top:115px;
    }

    .envios{
        margin:25px 0 10px;

        padding:18px;

        border-radius:18px;
    }

    .envios-header{
        margin-bottom:18px;
    }

    .envios-header h2{
        font-size:25px;
    }

    .envios-header p{
        font-size:15px;
        line-height:1.5;
    }

    .envios-grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .zona-card{
        padding:16px;
    }

    .zona-card ul{
        line-height:1.65;
    }

    .envios-consulta{
        flex-direction:column;
        align-items:stretch;

        gap:12px;

        margin-top:15px;
        padding:16px;
    }

    .envios-consulta .btn{
        width:100%;
        text-align:center;
    }


    /* MAPA */

    .mapa-envios{
        margin-top:18px;
    }

    .mapa-envios h3{
        font-size:20px;
    }

    .mapa-texto{
        font-size:14px;
    }

    .mapa-responsive{
        width:100%;
        height:270px;

        border-radius:15px;
    }


    /* ---------------------------------
       CARRITO FLOTANTE
    --------------------------------- */

    .cart{
        position:fixed;

        left:12px;
        right:12px;
        bottom:12px;

        width:auto;
        max-width:none;

        padding:12px;

        border-radius:18px;

        z-index:100;
    }

    .cart.minimizado{
        left:auto;
        right:12px;
        bottom:12px;

        width:auto;
        min-width:0;
        max-width:155px;

        padding:9px 11px;

        border-radius:18px;
    }

    .cart.minimizado .cart-head{
        gap:9px;
    }

    .cart.minimizado .cart-head h3{
        font-size:16px;
    }

    .cart-toggle{
        width:32px;
        height:32px;

        font-size:19px;

        flex:0 0 32px;
    }

    .cart-content{
        margin-top:8px;
    }

    .cart-content .btn{
        width:100%;
        text-align:center;
    }


    /* ---------------------------------
       FOOTER
    --------------------------------- */

    .footer{
        margin-top:24px;

        padding-top:34px;
        padding-bottom:28px;
    }

    .footer .wrap{
        padding-left:20px;
        padding-right:20px;
    }

    .footer-grid{
        grid-template-columns:1fr;

        gap:24px;
    }

    .footer-logo{
        margin-bottom:12px;
    }

    .footer-logo img{
        height:46px;
    }

    .footer-logo h3{
        font-size:20px;
    }

    .footer-marca p{
        font-size:14px;
        line-height:1.55;
        margin-bottom:15px;
    }

    .footer h4{
        margin-bottom:11px;
    }

    .footer-links{
        gap:8px;
    }

    .footer-info{
        gap:8px;
    }

    .footer-bottom{
        margin-top:25px;

        padding-top:16px;
        padding-bottom:12px;

        flex-direction:column;

        gap:5px;

        font-size:11px;
    }

}

/* ======================================
   ÚLTIMOS AJUSTES MOBILE
====================================== */

@media(max-width:800px){

    /* Header totalmente sólido */
    .header{
        background:#fff;
    }


    /* Carrito minimizado más compacto */
    .cart.minimizado{
        left:auto;
        right:12px;
        bottom:12px;

        width:auto;
        min-width:0;

        padding:7px 9px;

        border-radius:18px;
    }

    .cart.minimizado .cart-head{
        gap:7px;
    }

    .cart.minimizado .cart-head h3{
        font-size:14px;
        margin:0;
    }

    .cart.minimizado .cart-toggle{
        width:29px;
        height:29px;

        flex:0 0 29px;

        font-size:17px;
    }


    /* Un poquito menos de espacio al terminar la portada */
    .hero-texto{
        padding-bottom:26px;
    }

}

/* ======================================
   MÍNIMOS DE PRECIO POR PRODUCTO
====================================== */

.precio-linea{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    padding:7px 0;

    border-bottom:1px solid #e5eaed;
}

.precio-linea:last-child{
    border-bottom:0;
}

.precio-linea span{
    font-size:15px;
}

.precio-linea small{
    color:#64737c;
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
}

.precio-desde{
    display:block;

    margin-top:6px;

    color:#53636d;
    font-size:12px;
    font-weight:600;
}


/* CELULAR */

@media(max-width:800px){

    .precio-linea{
        align-items:flex-start;
    }

    .precio-linea small{
        font-size:11px;
    }

}

/* ======================================
   AJUSTE VISUAL DE PRECIOS Y MÍNIMOS
====================================== */

.price-box{
    padding:14px 15px;
}

.precio-linea{
    display:grid;
    grid-template-columns: 1fr auto;
    align-items:center;
    gap:10px;

    padding:8px 0;
    border-bottom:1px solid #e5eaed;
}

.precio-linea:last-child{
    border-bottom:0;
}

.precio-linea span{
    font-size:15px;
    line-height:1.25;
}

.precio-linea small{
    font-size:12px;
    line-height:1.2;
    font-weight:700;
    color:#60717b;
    white-space:nowrap;
    text-align:right;
}

.precio-principal{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.precio-principal span{
    font-size:13px;
    color:#60717b;
}

.precio-principal strong{
    font-size:20px;
}

.precio-desde{
    margin-top:2px;
    font-size:12px;
    font-weight:700;
    color:#60717b;
}


/* CELULAR */

@media(max-width:800px){

    .price-box{
        padding:12px 13px;
    }

    .precio-linea{
        grid-template-columns: 1fr;
        gap:3px;
    }

    .precio-linea small{
        text-align:left;
        font-size:11px;
    }

}

/* ÚLTIMO AJUSTE DEL BLOQUE DE PRECIOS */

.precio-linea{
    display:block;
    padding:8px 0;
}

.precio-linea span{
    display:block;
    white-space:nowrap;
}

.precio-linea small{
    display:block;
    margin-top:3px;
    text-align:left;
    font-size:11px;
    color:#60717b;
    font-weight:700;
}

/* ======================================
   EDITOR DE CANTIDAD DEL CARRITO
====================================== */

.cart-qty-editor{
    display:flex;
    align-items:center;
    gap:5px;
}

.cart-qty-input{
    width:58px;
    height:32px;

    padding:4px 6px;

    border:1px solid #dce3e7;
    border-radius:8px;

    background:#fff;
    color:#071d27;

    font-size:14px;
    font-weight:700;

    text-align:center;
    outline:none;
}

.cart-qty-input:focus{
    border-color:#8ea5b0;
    box-shadow:0 0 0 2px rgba(7,29,39,.07);
}

.cart-qty-editor small{
    font-size:12px;
    font-weight:700;
    color:#53636d;
}


/* Sacamos las flechitas internas del input */

.cart-qty-input::-webkit-inner-spin-button,
.cart-qty-input::-webkit-outer-spin-button{
    -webkit-appearance:none;
    margin:0;
}

.cart-qty-input{
    -moz-appearance:textfield;
}

/* ======================================
   CARRITO MÁS CÓMODO EN PC
====================================== */

@media(min-width:801px){

    .cart{
        width:380px;
        max-width:calc(100vw - 36px);
        padding:16px;
    }

    .cart-row{
        padding:10px 0;
    }

    .cart-product-name{
        margin-bottom:7px;
        font-size:14px;
        font-weight:700;
    }

    .cart-product-meta{
        line-height:1.4;
        margin-bottom:3px;
    }

    .cart-next-price{
        margin-top:6px;
        margin-bottom:7px;
        line-height:1.35;
    }

    .cart-controls{
        margin-top:8px;
    }

}

/* ======================================
   ALTURA DEL CARRITO ABIERTO
====================================== */

@media(min-width:801px){

    .cart-items{
        max-height:420px;
        overflow-y:auto;
    }

}

/* ======================================
   PRECIOS CLAROS POR PACK
====================================== */

.price-box-nuevo{
    padding:0;
    overflow:hidden;
    background:#f6f8f9;
}

.precio-nivel{
    padding:11px 13px;
    border-bottom:1px solid #e1e7ea;
}

.precio-nivel:last-child{
    border-bottom:0;
}

.precio-nivel-superior{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:7px;
}

.precio-nivel-superior strong{
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.3px;
    color:#071d27;
}

.precio-nivel-superior span{
    font-size:11px;
    font-weight:700;
    color:#60717b;
}


/* PACK + PRECIO UNITARIO */

.precio-pack-linea{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
}

.precio-pack-linea div{
    display:flex;
    flex-direction:column;
}

.precio-pack-linea small{
    margin-bottom:2px;
    font-size:11px;
    font-weight:700;
    color:#60717b;
}

.precio-pack-linea strong{
    font-size:20px;
    line-height:1.1;
    color:#071d27;
}

.precio-pack-linea > span{
    padding-bottom:2px;
    font-size:12px;
    font-weight:600;
    color:#74838a;
}


/* MINORISTA / MAYORISTA EN SU PROPIA SECCIÓN */

.precio-nivel-destacado{
    padding:15px;
    background:#edf8f2;
}

.precio-pack-label{
    margin-top:3px;
    font-size:12px;
    font-weight:700;
    color:#60717b;
}

.precio-pack{
    margin-top:2px;
    font-size:27px;
    line-height:1.1;
    font-weight:800;
    color:#071d27;
}

.precio-unitario{
    margin-top:5px;
    font-size:12px;
    font-weight:600;
    color:#60717b;
}


/* ======================================
   AVISO DE VENTA POR PACK
====================================== */

.aviso-venta-pack{
    display:flex;
    align-items:flex-start;
    gap:14px;

    margin:0 0 24px;
    padding:16px 18px;

    background:#fff;
    border:1px solid #dfe6e9;
    border-left:4px solid #071d27;

    border-radius:14px;

    box-shadow:0 4px 14px rgba(7,29,39,.04);
}

.aviso-pack-icono{
    font-size:26px;
    line-height:1;
}

.aviso-venta-pack strong{
    display:block;
    margin-bottom:4px;

    font-size:15px;
    color:#071d27;
}

.aviso-venta-pack p{
    margin:0;

    font-size:13px;
    line-height:1.45;
    color:#60717b;
}


/* CELULAR */

@media(max-width:800px){

    .precio-pack-linea strong{
        font-size:21px;
    }

    .precio-pack-linea > span{
        font-size:11px;
    }

    .aviso-venta-pack{
        padding:14px;
        gap:11px;
    }

    .aviso-pack-icono{
        font-size:23px;
    }

}

/* ======================================
   FILTROS CON ORDEN DE PRECIO
====================================== */

@media(min-width:901px){

    .filters{
        grid-template-columns:
            minmax(240px,1fr)
            190px
            210px
            auto;
    }

}

@media(min-width:701px) and (max-width:900px){

    .filters{
        grid-template-columns:1fr 1fr;
    }

    .filters button{
        width:100%;
    }

}

/* =========================================
   CÓMO COMPRAR
========================================= */

.como-comprar{
    padding:42px 0 38px;
    background:#fff;
    border-bottom:1px solid #e8edef;
}

.como-comprar-header{
    max-width:720px;
    margin:0 auto 28px;
    text-align:center;
}

.como-comprar-mini{
    display:inline-block;
    margin-bottom:8px;
    color:#168f50;
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.4px;
}

.como-comprar-header h2{
    margin:0 0 8px;
    color:#071d27;
    font-size:30px;
    line-height:1.15;
}

.como-comprar-header p{
    margin:0;
    color:#64737c;
    font-size:15px;
    line-height:1.6;
}

.como-comprar-grid{
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr;
    align-items:stretch;
    gap:16px;
}

.como-comprar-card{
    position:relative;
    padding:24px 20px;
    background:#f7f9fa;
    border:1px solid #dfe5e8;
    border-radius:18px;
    text-align:center;
}

.como-numero{
    position:absolute;
    top:14px;
    left:14px;

    width:29px;
    height:29px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#071d27;
    color:#fff;

    border-radius:50%;

    font-size:13px;
    font-weight:800;
}

.como-icono{
    margin:4px 0 12px;
    font-size:35px;
}

.como-comprar-card h3{
    margin:0 0 8px;
    color:#071d27;
    font-size:18px;
}

.como-comprar-card p{
    margin:0;
    color:#64737c;
    font-size:14px;
    line-height:1.5;
}

.como-destacado{
    display:inline-block;
    margin-top:13px;
    padding:7px 10px;

    background:#e5f7ed;
    color:#13713f;

    border-radius:9px;

    font-size:12px;
    font-weight:700;
}

.como-flecha{
    display:flex;
    align-items:center;
    justify-content:center;

    color:#9ba8ae;
    font-size:25px;
    font-weight:bold;
}

.como-comprar-footer{
    margin-top:22px;

    display:flex;
    justify-content:center;
    gap:20px;
    flex-wrap:wrap;

    color:#52636c;
    font-size:13px;
    font-weight:700;
}


/* MOBILE */

@media(max-width:800px){

    .como-comprar{
        padding:30px 0;
    }

    .como-comprar-header{
        margin-bottom:20px;
    }

    .como-comprar-header h2{
        font-size:25px;
    }

    .como-comprar-grid{
        grid-template-columns:1fr;
        gap:10px;
    }

    .como-flecha{
        height:14px;
        transform:rotate(90deg);
        font-size:20px;
    }

    .como-comprar-card{
        padding:21px 18px;
    }

    .como-icono{
        font-size:31px;
    }

    .como-comprar-footer{
        gap:10px 16px;
        margin-top:18px;
        font-size:12px;
    }

}