/* ======================================== */
/* CONFIGURACIÓN GENERAL */
/* ======================================== */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
}

body{
    font-family: "DM Sans", sans-serif;
    background: #f4f0e8;
    color: #1d1b17;
    overflow-x: hidden;
}

a{
    text-decoration: none;
    color: inherit;
}

button,
input{
    font-family: inherit;
}


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

.header{

    width:100%;
    height:90px;

    position:fixed;
    top:0;
    left:0;

    z-index:9999;

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

    padding:0 60px;

    background:#11140f;

    box-shadow:
        0 4px 20px rgba(0,0,0,.18);

}

.header.activo{
    background: rgba(16, 17, 14, .97);
    height: 90px;
}


/* ========================================
   LOGOS DEL HEADER
======================================== */

.marcas-header{
    display: flex;
    align-items: center;
    gap: 26px;
    flex-shrink: 0;
}

.marca{
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo-palmonte{
    display: block;
    width: 260px;
    height: auto;
    object-fit: contain;
}

.marca-zootecnistas{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.logo-zootecnistas{
    display: block;
    width: 260px;
    height: auto;
    object-fit: contain;
}



/* ======================================== */
/* NAVEGACIÓN */
/* ======================================== */

.nav{
    display: flex;
    align-items: center;
    gap: 22px;
}

.nav a{
    font-size: 12px;
    font-weight: 600;

    letter-spacing: 1.5px;

    text-transform: uppercase;

    transition: opacity .3s;
}

.nav a:hover{
    opacity: .6;
}

.menu-mobile{
    display: none;

    border: none;
    background: transparent;

    color: white;

    font-size: 27px;

    cursor: pointer;
}


/* ======================================== */
/* MENÚ CELULAR */
/* ======================================== */

.nav-mobile{
    display: none;

    position: fixed;

    top: 75px;
    left: 0;

    width: 100%;

    padding: 35px 7%;

    background: #10110e;

    z-index: 999;

    flex-direction: column;

    gap: 25px;

    color: white;
}

.nav-mobile.activo{
    display: flex;
}

.nav-mobile a{
    font-size: 14px;

    text-transform: uppercase;

    letter-spacing: 2px;
}


/* ======================================== */
/* HERO / PORTADA */
/* ======================================== */

.hero{
    width: 100%;
    height: 100vh;
    min-height: 700px;

    position: relative;

    display: flex;
    align-items: center;

    padding: 120px 8% 80px;

    color: white;

    overflow: hidden;
}

/* ======================================== */
/* SLIDER PORTADA */
/* ======================================== */

.hero-slider{
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    display: flex;

    z-index: 0;

    transition: transform .8s ease-in-out;

    will-change: transform;
}

.hero-slide{
    position: relative;

    flex: 0 0 100%;

    width: 100%;
    height: 100%;

    overflow: hidden;
}

.hero-slide img{
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    user-select: none;
    pointer-events: none;
}

.hero-overlay{
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(8, 9, 6, .82) 0%,
            rgba(8, 9, 6, .50) 45%,
            rgba(8, 9, 6, .15) 100%
        );

    pointer-events: none;
}

.hero-contenido{
    position: relative;

    z-index: 3;

    width: 100%;
    max-width: 950px;
}

.hero-pequeno{
    font-size: 11px;

    font-weight: 700;

    letter-spacing: 5px;
}


/* ======================================== */
/* LOGO GRANDE DE LA PORTADA */
/* ======================================== */

.hero-logo-principal{
    width: 100%;

    margin: 30px 0 25px;

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

    overflow: visible;
}

.hero-logo{
    display: block;

    width: min(900px, 78vw);
    height: auto;

    max-width: none;

    object-fit: contain;
    object-position: left center;

    margin: 0;
    padding: 0;
}


.hero h2{
    font-family: "Playfair Display", serif;

    font-size: clamp(28px, 3vw, 42px);

    font-weight: 400;

    margin-top: -70px;
    margin-bottom: 18px;

    position: relative;
    z-index: 3;
}

.hero p{
    max-width: 560px;

    font-size: 17px;

    line-height: 1.8;

    margin-bottom: 38px;

    color: rgba(255,255,255,.9);

    position: relative;
    z-index: 3;
}


/* ======================================== */
/* BOTÓN */
/* ======================================== */

.boton{
    display: inline-block;

    padding: 18px 30px;

    background: #f4f0e8;

    color: #171813;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    transition: all .3s ease;
}

.boton:hover{
    background: #303724;

    color: white;

    transform: translateY(-3px);
}


/* ======================================== */
/* INDICADOR SCROLL */
/* ======================================== */

.scroll-indicator{
    position: absolute;

    bottom: 35px;
    right: 7%;

    z-index: 3;

    font-size: 9px;

    letter-spacing: 3px;

    opacity: .8;
}


/* ======================================== */
/* MANIFIESTO */
/* ======================================== */

.manifiesto{
    max-width: 1200px;

    margin: auto;

    padding: 150px 8%;

    text-align: center;
}

.subtitulo,
.titulo-seccion span,
.historia-texto > span,
.campo-texto > span,
.comunidad span,
.firma-superior{
    font-size: 10px;

    font-weight: 700;

    letter-spacing: 5px;

    color: #687054;
}

.manifiesto h2{
    font-family: "Playfair Display", serif;

    font-size: clamp(48px, 7vw, 90px);

    font-weight: 500;

    line-height: 1;

    margin: 35px 0;
}

.manifiesto p{
    font-size: 18px;

    color: #777168;
}


/* ======================================== */
/* COLECCIÓN */
/* ======================================== */

.coleccion{
    padding: 130px 6%;

    background: #e7e1d5;
}

.titulo-seccion{
    max-width: 700px;

    margin: 0 auto 75px;

    text-align: center;
}

.titulo-seccion h2{
    font-family: "Playfair Display", serif;

    font-size: clamp(50px, 6vw, 75px);

    font-weight: 500;

    margin: 15px 0 20px;
}

.titulo-seccion p{
    max-width: 600px;

    margin: auto;

    color: #6d685f;

    line-height: 1.8;
}

.productos{
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 25px;
}

.producto{
    cursor: pointer;
}

.producto-imagen{
    height: 600px;

    position: relative;

    background-size: cover;

    background-position: center;

    overflow: hidden;

    transition: transform .4s ease;
}

.producto:hover .producto-imagen{
    transform: translateY(-7px);
}

.producto-carnero{
    background-image:
        url("Imagenes/carnero.jpeg");
}

.producto-vaca{
    background-image:
        url("Imagenes/vaca.jpeg.png"),
        url("Imagenes/vaca.jpeg"),
        url("Imagenes/vaca.png");

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

.producto-campesino{
    background-image:
        url("Imagenes/campesino.jpeg");
}

.etiqueta{
    position: absolute;

    top: 20px;
    left: 20px;

    padding: 10px 14px;

    background: #f4f0e8;

    color: #171813;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.5px;
}

.producto-info{
    padding: 23px 4px 10px;
}

.producto-info h3{
    font-family: "Playfair Display", serif;

    font-size: 26px;

    font-weight: 500;
}

.producto-info p{
    margin-top: 7px;

    color: #747067;

    font-size: 13px;
}


/* ======================================== */
/* PRODUCTOS REALES - PALMONTE */
/* ======================================== */

.producto-disponible{
    cursor: default;
}

.producto-foto{
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
    background: #f7f4ee;
    border: 1px solid rgba(29, 27, 23, .08);
}

.imagen-producto{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform .45s ease, opacity .3s ease;
}

.producto-disponible:hover .imagen-producto{
    transform: scale(1.025);
}

.etiqueta-disponible{
    background: #303724;
    color: #ffffff;
}

.producto-categoria{
    display: block;
    margin-bottom: 10px;
    color: #687054;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

.producto-descripcion{
    max-width: 440px;
    margin-top: 12px !important;
    color: #69645c !important;
    font-size: 14px !important;
    line-height: 1.7;
}

.producto-precio{
    margin-top: 24px;
    color: #1d1b17;
    font-family: "Playfair Display", serif;
    font-size: 27px;
    font-weight: 600;
}

.selector-producto{
    margin-top: 22px;
}

.selector-producto label{
    display: block;
    margin-bottom: 9px;
    color: #535047;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.selector-materias{
    width: 100%;
    padding: 15px 16px;
    border: 1px solid #aaa397;
    border-radius: 0;
    background: transparent;
    color: #1d1b17;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    outline: none;
    cursor: pointer;
}

.selector-materias:focus{
    border-color: #303724;
}

.envio-gratis{
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: #4f5b37;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.envio-gratis i{
    font-size: 13px;
}

.boton-carrito{
    width: 100%;
    margin-top: 24px;
    padding: 18px 22px;
    border: 1px solid #191b15;
    background: #191b15;
    color: #ffffff;
    font-family: "DM Sans", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.boton-carrito:hover{
    background: transparent;
    color: #191b15;
    transform: translateY(-2px);
}


/* ======================================== */
/* FRASE PRINCIPAL */
/* ======================================== */

.frase-principal{
    min-height: 850px;

    position: relative;

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

    padding: 100px 8%;

    background-image:
        url("Imagenes/carnero.jpeg");

    background-size: cover;

    background-position: center;

    text-align: center;

    color: white;
}

.frase-overlay{
    position: absolute;

    inset: 0;

    background:
        rgba(8, 9, 6, .58);
}

.frase-contenido{
    position: relative;

    z-index: 2;

    max-width: 1200px;
}

.frase-contenido > span{
    font-size: 10px;

    font-weight: 700;

    letter-spacing: 5px;
}

.frase-contenido h2{
    font-family: "Playfair Display", serif;

    font-size: clamp(45px, 6vw, 85px);

    font-weight: 400;

    line-height: 1.08;

    margin: 35px 0;
}

.frase-contenido p{
    font-size: 11px;

    font-weight: 700;

    letter-spacing: 5px;
}


/* ======================================== */
/* HISTORIA */
/* ======================================== */

.historia{
    display: grid;

    grid-template-columns: 1fr 1fr;

    min-height: 850px;
}

.historia-imagen{
    min-height: 700px;

    background-image:
        url("Imagenes/ordeno.jpeg");

    background-size: cover;

    background-position: center;
}

.historia-texto{
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 11%;

    background: #f5f1e9;
}

.historia-texto h2{
    font-family: "Playfair Display", serif;

    font-size: clamp(45px, 5vw, 70px);

    font-weight: 500;

    line-height: 1.03;

    margin: 25px 0 40px;
}

.historia-texto p{
    margin-bottom: 20px;

    color: #625e56;

    font-size: 16px;

    line-height: 1.9;
}


/* ======================================== */
/* SOMOS CAMPO */
/* ======================================== */

.campo{
    width: 100%;
    min-height: 850px;

    position: relative;

    display: flex;
    align-items: flex-end;

    padding: 8%;

    /*
       FOTO DE FONDO "SOMOS CAMPO"
       Se prueban varias rutas porque Windows puede ocultar
       la extensión real del archivo.
    */
    background-image:
        url("Imagenes/vaca.jpeg.png"),
        url("Imagenes/vaca.jpeg"),
        url("Imagenes/vaca.png");

    background-size: cover, cover, cover;

    background-position:
        center 40%,
        center 40%,
        center 40%;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat;

    color: white;
}

.campo-overlay{
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            0deg,
            rgba(8,9,6,.78),
            rgba(8,9,6,.08)
        );
}

.campo-texto{
    position: relative;

    z-index: 2;

    max-width: 900px;
}

.campo-texto > span{
    color: white;
}

.campo-texto h2{
    font-family: "Playfair Display", serif;

    font-size: clamp(50px, 7vw, 95px);

    font-weight: 400;

    line-height: 1;

    margin: 25px 0;
}

.campo-texto p{
    font-size: 16px;

    letter-spacing: 1px;
}


/* ======================================== */
/* VALORES */
/* ======================================== */

.valores{
    padding: 140px 7%;

    background: #191b15;

    color: white;
}

.titulo-claro span{
    color: #aeb49a;
}

.titulo-claro h2{
    color: white;
}

.valores-grid{
    display: grid;

    grid-template-columns: repeat(5, 1fr);

    margin-top: 70px;
}

.valor{
    min-height: 320px;

    padding: 35px 25px;

    border-left:
        1px solid rgba(255,255,255,.14);
}

.valor > span{
    font-family: "Playfair Display", serif;

    font-size: 14px;

    color: #9da28b;
}

.valor h3{
    margin: 90px 0 20px;

    font-size: 15px;

    letter-spacing: 2px;
}

.valor p{
    color: #b8b9b0;

    font-size: 14px;

    line-height: 1.7;
}


/* ======================================== */
/* VIDA EN EL CAMPO */
/* ======================================== */

.vida-campo{
    min-height: 800px;

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

    padding: 80px 8%;

    background:
        linear-gradient(
            rgba(10,10,8,.38),
            rgba(10,10,8,.58)
        ),
        url("Imagenes/ordeno.jpeg");

    background-size: cover;

    background-position: center;

    color: white;

    text-align: center;
}

.vida-campo-contenido{
    max-width: 1000px;
}

.vida-campo span{
    font-size: 10px;

    font-weight: 700;

    letter-spacing: 5px;
}

.vida-campo h2{
    font-family: "Playfair Display", serif;

    font-size: clamp(50px, 7vw, 90px);

    font-weight: 400;

    line-height: 1;

    margin-top: 30px;
}


/* ======================================== */
/* COMUNIDAD */
/* ======================================== */

.comunidad{
    padding: 140px 8%;

    background: #d9d1c2;

    text-align: center;
}

.comunidad-contenido{
    max-width: 750px;

    margin: auto;
}

.comunidad h2{
    font-family: "Playfair Display", serif;

    font-size: clamp(50px, 6vw, 75px);

    font-weight: 500;

    margin: 20px 0;
}

.comunidad p{
    margin-bottom: 45px;

    color: #625e56;

    line-height: 1.8;
}

.formulario{
    display: flex;

    max-width: 620px;

    margin: auto;
}

.formulario input{
    flex: 1;

    padding: 20px;

    border: 1px solid #8e887c;

    background: transparent;

    outline: none;

    font-size: 14px;
}

.formulario button{
    padding: 0 32px;

    border: none;

    background: #191b15;

    color: white;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    cursor: pointer;

    transition: opacity .3s;
}

.formulario button:hover{
    opacity: .8;
}


/* ======================================== */
/* FIRMA PALMONTE */
/* ======================================== */

.firma-palmonte{
    padding: 150px 30px;

    background: #f4f0e8;

    text-align: center;
}

.firma-palmonte h2{
    font-family: "Playfair Display", serif;

    font-size: clamp(48px, 7vw, 90px);

    font-weight: 500;

    line-height: 1.05;

    margin: 35px 0;
}

.linea-firma{
    width: 60px;

    height: 1px;

    margin: 45px auto;

    background: #787368;
}

.firma-palmonte p{
    font-family: "Playfair Display", serif;

    font-size: 27px;

    font-weight: 700;

    letter-spacing: 5px;

    margin-bottom: 15px;
}

.firma-slogan{
    font-size: 9px;

    font-weight: 700;

    letter-spacing: 4px;

    color: #777268;
}


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

footer{
    padding: 90px 7% 35px;

    background: #10110e;

    color: white;
}

.footer-superior{
    display: grid;

    grid-template-columns: 2fr 1fr 1fr;

    gap: 60px;
}

.footer-marca h2{
    font-family: "Playfair Display", serif;

    font-size: clamp(45px, 5vw, 70px);

    letter-spacing: 5px;
}

.footer-marca p{
    margin-top: 10px;

    color: #aaa99d;

    font-family: "Playfair Display", serif;

    font-size: 20px;
}

.footer-menu{
    display: flex;

    flex-direction: column;

    gap: 14px;
}

.footer-menu h3{
    margin-bottom: 10px;

    color: #898b7d;

    font-size: 10px;

    letter-spacing: 3px;
}

.footer-menu a{
    width: fit-content;

    font-size: 13px;

    transition: opacity .3s;
}

.footer-menu a:hover{
    opacity: .6;
}

.footer-copy{
    display: flex;

    justify-content: space-between;

    margin-top: 80px;

    padding-top: 30px;

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

    color: #77776f;

    font-size: 11px;

    letter-spacing: 1px;
}


/* ======================================== */
/* PORTÁTILES / PANTALLAS MEDIANAS */
/* ======================================== */

@media(max-width: 1250px){

    .logo-palmonte{
        width: 225px;
    }

    .logo-zootecnistas{
        width: 88px;
    }

    .marcas-header{
        gap: 12px;
    }

    .nav{
        gap: 14px;
    }

    .nav a{
        font-size: 10px;
        letter-spacing: 1.1px;
    }

}


/* ======================================== */
/* TABLET */
/* ======================================== */

@media(max-width: 1000px){

    .logo-palmonte{
        width: 195px;
        height: auto;
    }

    .logo-zootecnistas{
        width: 72px;
    }

    .marcas-header{
        gap: 10px;
    }

    .marca{
        width: auto;
    }

    .nav{
        gap: 10px;
    }

    .nav a{
        font-size: 9px;
        letter-spacing: .8px;
    }

    .productos{
        grid-template-columns:
            repeat(2, 1fr);
    }

    .valores-grid{
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* ======================================== */
/* CELULAR */
/* ======================================== */

@media(max-width: 768px){

    .header{
        height: 82px;
        padding: 0 5%;
    }

    .header.activo{
        height: 82px;
    }

    .marcas-header{
        display: flex;
        align-items: center;
        gap: 12px;
        max-width: calc(100% - 58px);
    }

    .logo-palmonte{
        width: 150px;
        height: auto;
    }

    .marca-zootecnistas{
        width: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
    }

    .logo-zootecnistas{
        width: 150px;
        height: auto;
        display: block;
        object-fit: contain;
        transform: none;
    }

    .nav{
        display: none;
    }

    .menu-mobile{
        display: block;
    }

    .nav-mobile{
        top: 82px;
    }


    /* HERO */

    .hero{
        min-height: 100svh;

        padding: 120px 7% 70px;
    }

    .hero-slide img{
        object-position: 55% center;
    }

    .hero-overlay{
        background:
            linear-gradient(
                0deg,
                rgba(8,9,6,.80),
                rgba(8,9,6,.25)
            );
    }

    .hero-contenido{
        align-self: flex-end;

        width: 100%;

        max-width: 100%;
    }

    .hero-pequeno{
        font-size: 9px;

        letter-spacing: 3px;
    }


    /* LOGO PRINCIPAL EN CELULAR */

    .hero-logo-principal{
        margin: 22px 0 20px;

        width: 100%;
    }

    .hero-logo{
        width: 92vw;

        max-width: 640px;

        height: auto;
    }


    .hero h2{
        font-size: 26px;
        margin-top: -35px;
        margin-bottom: 16px;
    }

    .hero p{
        font-size: 14px;

        line-height: 1.7;
    }

    .scroll-indicator{
        display: none;
    }


    /* MANIFIESTO */

    .manifiesto{
        padding: 100px 7%;
    }

    .manifiesto h2{
        font-size: 50px;
    }

    .manifiesto p{
        font-size: 15px;
    }


    /* COLECCIÓN */

    .coleccion{
        padding: 90px 5%;
    }

    .titulo-seccion{
        margin-bottom: 50px;
    }

    .titulo-seccion h2{
        font-size: 50px;
    }

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

        gap: 45px;
    }

    .producto-imagen{
        height: 520px;
    }


    .producto-foto{
        height: 520px;
    }

    .producto-info{
        padding-top: 20px;
    }

    .producto-precio{
        font-size: 25px;
    }

    .boton-carrito{
        padding: 17px 18px;
    }


    /* FRASE */

    .frase-principal{
        min-height: 700px;

        padding: 80px 6%;
    }

    .frase-contenido h2{
        font-size: 46px;
    }


    /* HISTORIA */

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

    .historia-imagen{
        min-height: 520px;
    }

    .historia-texto{
        padding: 90px 7%;
    }

    .historia-texto h2{
        font-size: 48px;
    }


    /* CAMPO */

    .campo{
        min-height: 700px;

        padding: 70px 7%;

        background-position:
            center center,
            center center,
            center center;
    }

    .campo-texto h2{
        font-size: 52px;
    }


    /* VALORES */

    .valores{
        padding: 100px 7%;
    }

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

        margin-top: 40px;
    }

    .valor{
        min-height: auto;

        padding: 35px 15px;

        border-left: none;

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

    .valor h3{
        margin: 35px 0 15px;
    }


    /* VIDA CAMPO */

    .vida-campo{
        min-height: 650px;

        padding: 70px 7%;
    }

    .vida-campo h2{
        font-size: 50px;
    }


    /* COMUNIDAD */

    .comunidad{
        padding: 100px 7%;
    }

    .comunidad h2{
        font-size: 50px;
    }

    .formulario{
        flex-direction: column;
    }

    .formulario button{
        padding: 20px;
    }


    /* FIRMA */

    .firma-palmonte{
        padding: 110px 7%;
    }

    .firma-palmonte h2{
        font-size: 50px;
    }


    /* FOOTER */

    footer{
        padding: 70px 7% 30px;
    }

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

        gap: 50px;
    }

    .footer-marca h2{
        font-size: 45px;
    }

    .footer-copy{
        flex-direction: column;

        gap: 10px;
    }

}


/* ======================================== */
/* CELULARES PEQUEÑOS */
/* ======================================== */

@media(max-width: 420px){

    .marcas-header{
        gap: 8px;
        max-width: calc(100% - 50px);
    }

    .logo-palmonte{
        width: 128px;
        height: auto;
    }

    .marca-zootecnistas{
        width: 128px;
    }

    .logo-zootecnistas{
        width: 128px;
        height: auto;
    }


    /* LOGO PRINCIPAL */

    .hero-logo-principal{
        margin: 18px 0 18px;
    }

    .hero-logo{
        width: 94vw;

        max-width: 520px;

        height: auto;
    }


    .hero h2{
        font-size: 23px;
        margin-top: -20px;
        margin-bottom: 14px;
    }

    .producto-imagen{
        height: 460px;
    }


    .producto-foto{
        height: 460px;
    }

    .producto-descripcion{
        font-size: 13px !important;
    }

    .producto-precio{
        font-size: 23px;
    }

    .frase-contenido h2{
        font-size: 39px;
    }

    .historia-texto h2{
        font-size: 42px;
    }

    .campo-texto h2{
        font-size: 44px;
    }

    .firma-palmonte h2{
        font-size: 43px;
    }

}


/* ======================================== */
/* REDES SOCIALES PALMONTE */
/* ======================================== */


/* ======================================== */
/* INSTAGRAM - MENÚ SUPERIOR */
/* ======================================== */

.header .nav .instagram-menu{
    width: 44px;
    height: 44px;
    min-width: 44px;

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

    padding: 0;
    margin-left: 2px;

    border: none;
    border-radius: 13px;

    background:
        radial-gradient(
            circle at 30% 107%,
            #fdf497 0%,
            #fdf497 5%,
            #fd5949 45%,
            #d6249f 60%,
            #285AEB 90%
        );

    color: #ffffff;

    font-size: 21px;

    line-height: 1;

    opacity: 1;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.header .nav .instagram-menu i{
    color: #ffffff;

    font-size: 21px;

    line-height: 1;
}

.header .nav .instagram-menu:hover{
    opacity: 1;

    transform: translateY(-2px) scale(1.07);

    box-shadow:
        0 7px 22px rgba(214, 36, 159, .38);
}


/* ======================================== */
/* INSTAGRAM - MENÚ CELULAR */
/* ======================================== */

.instagram-mobile{
    display: flex;

    align-items: center;

    gap: 12px;

    color: #ffffff;
}

.instagram-mobile i{
    width: 35px;
    height: 35px;

    display: inline-flex;

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

    border-radius: 10px;

    background:
        radial-gradient(
            circle at 30% 107%,
            #fdf497 0%,
            #fdf497 5%,
            #fd5949 45%,
            #d6249f 60%,
            #285AEB 90%
        );

    color: #ffffff;

    font-size: 18px;
}


/* ======================================== */
/* REDES DEL FOOTER */
/* ======================================== */

.footer-redes{
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 14px;
}

.footer-menu .red-social{
    width: fit-content;

    display: flex;

    flex-direction: row;

    align-items: center;

    gap: 13px;

    color: rgba(255,255,255,.82);

    font-size: 13px;

    opacity: 1;

    transition:
        color .25s ease,
        transform .25s ease;
}

.footer-menu .red-social:hover{
    color: #ffffff;

    opacity: 1;

    transform: translateX(4px);
}


/* ======================================== */
/* INSTAGRAM - FOOTER */
/* ======================================== */

.instagram-icon{
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: inline-flex;

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

    border-radius: 12px;

    background:
        radial-gradient(
            circle at 30% 107%,
            #fdf497 0%,
            #fdf497 5%,
            #fd5949 45%,
            #d6249f 60%,
            #285AEB 90%
        );

    color: #ffffff;

    font-size: 23px;

    box-shadow:
        0 4px 15px rgba(214,36,159,.22);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.instagram-icon i{
    color: #ffffff;

    font-size: 23px;
}

.instagram-footer:hover .instagram-icon{
    transform: scale(1.07);

    box-shadow:
        0 6px 20px rgba(214,36,159,.38);
}


/* ======================================== */
/* TIKTOK - FOOTER */
/* ======================================== */

.tiktok-icon{
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: inline-flex;

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

    border-radius: 12px;

    background: #080808;

    border:
        1px solid rgba(255,255,255,.15);

    color: #ffffff;

    font-size: 21px;
}

.tiktok-icon i{
    color: #ffffff;
}


/* ======================================== */
/* WHATSAPP - FOOTER */
/* ======================================== */

.whatsapp-icon{
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: inline-flex;

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

    border-radius: 12px;

    background: #25D366;

    color: #ffffff;

    font-size: 24px;
}

.whatsapp-icon i{
    color: #ffffff;
}


/* ======================================== */
/* REDES SOCIALES - CELULAR */
/* ======================================== */

@media(max-width: 768px){

    .instagram-icon,
    .tiktok-icon,
    .whatsapp-icon{
        width: 40px;
        height: 40px;
    }

    .footer-menu .red-social{
        font-size: 14px;
    }

}
/* ======================================== */
/* WHATSAPP - MENÚ SUPERIOR */
/* ======================================== */

.header .nav .whatsapp-menu{
    width: 44px;
    height: 44px;
    min-width: 44px;

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

    padding: 0;
    margin-left: 0;

    border: none;
    border-radius: 13px;

    background: #25D366;
    color: #ffffff;

    font-size: 22px;
    line-height: 1;
    opacity: 1;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.header .nav .whatsapp-menu i{
    color: #ffffff;
    font-size: 22px;
    line-height: 1;
}

.header .nav .whatsapp-menu:hover{
    opacity: 1;
    transform: translateY(-2px) scale(1.07);
    box-shadow: 0 7px 22px rgba(37, 211, 102, .35);
}
/* ======================================== */
/* CARRITO PALMONTE */
/* ======================================== */

body.carrito-abierto{
    overflow: hidden;
}


/* ======================================== */
/* BOTÓN CARRITO - HEADER */
/* ======================================== */

.carrito-menu{
    width: 44px;
    height: 44px;
    min-width: 44px;

    position: relative;

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

    padding: 0;

    border: 1px solid rgba(255,255,255,.35);
    border-radius: 13px;

    background: rgba(255,255,255,.10);

    color: #ffffff;

    font-size: 18px;

    cursor: pointer;

    transition:
        background .25s ease,
        transform .25s ease,
        border-color .25s ease;
}

.carrito-menu:hover{
    background: rgba(255,255,255,.20);

    border-color: rgba(255,255,255,.6);

    transform: translateY(-2px);
}


/* CONTADOR */

.carrito-menu #contadorCarrito{
    position: absolute;

    top: -7px;
    right: -7px;

    min-width: 21px;
    height: 21px;

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

    padding: 0 5px;

    border-radius: 50px;

    background: #ffffff;

    color: #191b15;

    font-size: 10px;
    font-weight: 800;

    line-height: 1;
}


/* ======================================== */
/* FONDO OSCURO */
/* ======================================== */

.fondo-carrito{
    position: fixed;

    inset: 0;

    z-index: 1998;

    background: rgba(8,9,6,.55);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}

.fondo-carrito.activo{
    opacity: 1;

    visibility: visible;
}


/* ======================================== */
/* PANEL LATERAL */
/* ======================================== */

.panel-carrito{
    width: min(470px, 100%);

    height: 100vh;
    height: 100dvh;

    position: fixed;

    top: 0;
    right: 0;

    z-index: 1999;

    display: flex;
    flex-direction: column;

    background: #f4f0e8;

    color: #1d1b17;

    box-shadow:
        -15px 0 45px rgba(0,0,0,.18);

    transform: translateX(105%);

    transition:
        transform .4s cubic-bezier(.77,0,.18,1);
}

.panel-carrito.activo{
    transform: translateX(0);
}


/* ======================================== */
/* CABECERA CARRITO */
/* ======================================== */

.carrito-header{
    min-height: 115px;

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

    gap: 20px;

    padding: 28px 30px;

    border-bottom:
        1px solid rgba(29,27,23,.14);
}

.carrito-subtitulo{
    display: block;

    margin-bottom: 4px;

    color: #687054;

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

    letter-spacing: 3px;
}

.carrito-header h2{
    font-family: "Playfair Display", serif;

    font-size: 34px;
    font-weight: 500;
}


/* CERRAR */

.cerrar-carrito{
    width: 45px;
    height: 45px;

    flex-shrink: 0;

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

    border: 1px solid rgba(29,27,23,.18);
    border-radius: 50%;

    background: transparent;

    color: #1d1b17;

    font-size: 28px;
    font-weight: 300;

    cursor: pointer;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

.cerrar-carrito:hover{
    background: #191b15;

    color: #ffffff;

    transform: rotate(90deg);
}


/* ======================================== */
/* LISTA DE PRODUCTOS */
/* ======================================== */

.lista-carrito{
    flex: 1;

    overflow-y: auto;

    padding: 25px 30px;
}


/* CARRITO VACÍO */

.carrito-vacio{
    min-height: 300px;

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

    text-align: center;

    color: #777168;
}

.carrito-vacio::before{
    content: "\f07a";

    font-family: "Font Awesome 6 Free";
    font-weight: 900;

    margin-bottom: 25px;

    color: #9a958b;

    font-size: 38px;
}

.carrito-vacio p{
    margin-bottom: 8px;

    color: #1d1b17;

    font-family: "Playfair Display", serif;

    font-size: 25px;
}

.carrito-vacio span{
    font-size: 13px;
}


/* ======================================== */
/* PRODUCTO DENTRO DEL CARRITO */
/* ======================================== */

.item-carrito{
    padding: 22px 0;

    border-bottom:
        1px solid rgba(29,27,23,.12);
}

.item-carrito-info h4{
    margin-bottom: 7px;

    font-family: "Playfair Display", serif;

    font-size: 21px;
    font-weight: 500;
}

.item-variante{
    display: block;

    margin-bottom: 8px;

    color: #687054;

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

    letter-spacing: 1px;

    text-transform: uppercase;
}

.item-precio{
    display: block;

    margin-bottom: 5px;

    color: #1d1b17;

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

.item-envio{
    display: block;

    color: #687054;

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

    letter-spacing: 1.5px;
}


/* ======================================== */
/* CANTIDADES */
/* ======================================== */

.item-carrito-controles{
    display: flex;
    align-items: center;

    gap: 10px;

    margin-top: 17px;
}

.boton-cantidad{
    width: 34px;
    height: 34px;

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

    border:
        1px solid rgba(29,27,23,.25);

    background: transparent;

    color: #1d1b17;

    font-size: 17px;

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease;
}

.boton-cantidad:hover{
    background: #191b15;

    color: #ffffff;
}

.cantidad-producto{
    min-width: 25px;

    text-align: center;

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


/* ELIMINAR */

.eliminar-producto{
    width: 34px;
    height: 34px;

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

    margin-left: auto;

    border: none;

    background: transparent;

    color: #8d887f;

    cursor: pointer;

    transition:
        color .25s ease,
        transform .25s ease;
}

.eliminar-producto:hover{
    color: #8c2e26;

    transform: scale(1.1);
}


/* ======================================== */
/* PIE DEL CARRITO */
/* ======================================== */

.carrito-footer{
    padding: 25px 30px 30px;

    border-top:
        1px solid rgba(29,27,23,.14);

    background: #ede8de;
}


/* ENVÍO */

.carrito-envio{
    display: flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 22px;

    color: #566040;

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

    letter-spacing: 1.5px;

    text-transform: uppercase;
}


/* TOTAL */

.carrito-total{
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 25px;
}

.carrito-total span{
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;
}

.carrito-total strong{
    font-family: "Playfair Display", serif;

    font-size: 30px;
    font-weight: 600;
}


/* ======================================== */
/* FINALIZAR POR WHATSAPP */
/* ======================================== */

.finalizar-pedido{
    width: 100%;

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

    gap: 12px;

    padding: 19px;

    border: none;

    background: #191b15;

    color: #ffffff;

    font-family: "DM Sans", sans-serif;

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

    letter-spacing: 1.7px;

    cursor: pointer;

    transition:
        background .25s ease,
        transform .25s ease;
}

.finalizar-pedido i{
    font-size: 19px;
}

.finalizar-pedido:hover{
    background: #303724;

    transform: translateY(-2px);
}


/* ======================================== */
/* CARRITO EN MENÚ CELULAR */
/* ======================================== */

.carrito-mobile{
    display: flex;
    align-items: center;

    gap: 12px;

    width: fit-content;

    padding: 0;

    border: none;

    background: transparent;

    color: #ffffff;

    font-family: "DM Sans", sans-serif;

    font-size: 14px;

    letter-spacing: 2px;

    text-transform: uppercase;

    cursor: pointer;
}

.carrito-mobile i{
    font-size: 17px;
}

#contadorCarritoMobile{
    min-width: 22px;
    height: 22px;

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

    padding: 0 5px;

    border-radius: 30px;

    background: #ffffff;

    color: #191b15;

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


/* ======================================== */
/* RESPONSIVE DEL CARRITO */
/* ======================================== */

@media(max-width: 768px){

    .panel-carrito{
        width: min(430px, 94%);
    }

    .carrito-header{
        min-height: 100px;

        padding: 23px 22px;
    }

    .carrito-header h2{
        font-size: 30px;
    }

    .lista-carrito{
        padding: 20px 22px;
    }

    .carrito-footer{
        padding: 22px;
    }

    .carrito-total strong{
        font-size: 26px;
    }

}


@media(max-width: 420px){

    .panel-carrito{
        width: 100%;
    }

    .carrito-header{
        padding:
            20px 18px;
    }

    .lista-carrito{
        padding:
            18px;
    }

    .carrito-footer{
        padding:
            20px 18px;
    }

    .finalizar-pedido{
        font-size: 9px;

        letter-spacing: 1.2px;
    }

}
/* ======================================== */
/* WHATSAPP FLOTANTE */
/* ======================================== */

.whatsapp-flotante{
    position: fixed;

    right: 28px;
    bottom: 28px;

    z-index: 4000;

    width: 62px;
    height: 62px;

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

    border-radius: 50%;

    background: #25D366;

    color: #ffffff;

    font-size: 34px;

    text-decoration: none;

    box-shadow:
        0 8px 28px rgba(0,0,0,.25);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.whatsapp-flotante i{
    color: #ffffff;

    font-size: 34px;

    line-height: 1;
}


.whatsapp-flotante:hover{
    background: #20bd5a;

    transform: translateY(-4px) scale(1.06);

    box-shadow:
        0 12px 35px rgba(0,0,0,.32);
}


/* PEQUEÑO EFECTO DE PULSO */

.whatsapp-flotante::before{
    content: "";

    position: absolute;

    width: 100%;
    height: 100%;

    border-radius: 50%;

    border: 2px solid #25D366;

    animation: pulsoWhatsApp 2s infinite;
}


@keyframes pulsoWhatsApp{

    0%{
        transform: scale(1);
        opacity: .7;
    }

    70%{
        transform: scale(1.45);
        opacity: 0;
    }

    100%{
        transform: scale(1.45);
        opacity: 0;
    }

}


/* ======================================== */
/* CELULAR */
/* ======================================== */

@media(max-width: 768px){

    .whatsapp-flotante{
        right: 18px;
        bottom: 18px;

        width: 56px;
        height: 56px;

        font-size: 30px;
    }


    .whatsapp-flotante i{
        font-size: 30px;
    }

}

/* ======================================== */
/* NACIDOS DEL CAMPO - ENCIMA DE PALMONTE */
/* CORRECCION FINAL */
/* ======================================== */

/* Mantener el contenido del hero dentro de la pantalla */
.hero-contenido{
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    max-width: 950px !important;
    padding-top: 80px !important;
}

/* Frase justo encima del logo grande */
.hero-pequeno{
    display: block !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    text-align: center !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 5px !important;
    line-height: 1.4 !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10 !important;
}

/* Logo grande centrado y un poco mas compacto para que la frase quepa */
.hero-logo-principal{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 0 24px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
}

.hero-logo{
    display: block !important;
    width: min(760px, 66vw) !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* Evitar que el titulo suba y pise la composicion */
.hero h2{
    margin-top: 0 !important;
}

/* Ajuste solo para computador */
@media (min-width: 769px){
    .hero-contenido{
        padding-top: 95px !important;
    }

    .hero-pequeno{
        margin-bottom: 16px !important;
    }
}

/* Ajuste para celular */
@media (max-width: 768px){
    .hero-contenido{
        padding-top: 0 !important;
    }

    .hero-pequeno{
        font-size: 9px !important;
        letter-spacing: 3px !important;
        margin-bottom: 12px !important;
    }

    .hero-logo{
        width: 88vw !important;
        max-width: 560px !important;
    }
}
/* =====================================================
   CORRECCIÓN DEFINITIVA:
   "NACIDOS DEL CAMPO COLOMBIANO"
   JUSTO ENCIMA DEL LOGO GRANDE
===================================================== */


/* Ocultamos la frase original para evitar duplicados */

.hero-pequeno{
    display: none !important;
}


/* CONTENEDOR DEL LOGO GRANDE */

.hero-logo-principal{
    position: relative !important;

    top: auto !important;
    left: auto !important;

    transform: none !important;

    width: 100% !important;

    margin: 70px 0 35px 0 !important;

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

    overflow: visible !important;
}


/* CREAMOS LA FRASE JUSTO ENCIMA DEL LOGO */

.hero-logo-principal::before{
    content: "NACIDOS DEL CAMPO COLOMBIANO";

    position: absolute;

    top: -35px;
    left: 50%;

    transform: translateX(-50%);

    width: max-content;

    color: #ffffff;

    font-family: "DM Sans", sans-serif;

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

    letter-spacing: 5px;

    text-align: center;

    white-space: nowrap;

    z-index: 10;
}


/* LOGO PALMONTE */

.hero-logo{
    display: block !important;

    width: min(900px, 78vw) !important;
    height: auto !important;

    max-width: none !important;

    object-fit: contain !important;
    object-position: center !important;

    margin: 0 auto !important;
}


/* FRASE CON LOS CHIROS PUESTOS */

.hero h2{
    margin-top: -20px !important;
}


/* =====================================================
   CELULAR
===================================================== */

@media(max-width: 768px){

    .hero-logo-principal{
        margin-top: 55px !important;
    }

    .hero-logo-principal::before{
        top: -28px;

        font-size: 8px;

        letter-spacing: 3px;
    }

    .hero h2{
        margin-top: -10px !important;
    }

}
/* ======================================== */
/* COLABORACIÓN YIYIZOO - POPUP CUADERNO */
/* ======================================== */

.popup-contenido h2::after{
    content: "Colaboración con YIYIZOO";

    display: block;

    margin-top: 14px;

    font-family: "DM Sans", sans-serif;

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

    line-height: 1.3;

    letter-spacing: 2.5px;

    text-transform: uppercase;

    color: #687054;
}
/* ======================================== */
/* CARRITO FLOTANTE */
/* ======================================== */

.carrito-flotante{
    position: fixed;

    right: 28px;
    bottom: 105px;

    z-index: 3999;

    width: 62px;
    height: 62px;

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

    padding: 0;

    border: none;
    border-radius: 50%;

    background: #191b15;
    color: #ffffff;

    font-size: 24px;

    cursor: pointer;

    box-shadow:
        0 8px 28px rgba(0,0,0,.28);

    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease;
}


.carrito-flotante:hover{
    background: #303724;

    transform: translateY(-4px) scale(1.05);

    box-shadow:
        0 12px 34px rgba(0,0,0,.34);
}


.carrito-flotante i{
    color: #ffffff;

    font-size: 24px;
}


/* CONTADOR */

#contadorCarritoFlotante{
    position: absolute;

    top: -4px;
    right: -4px;

    min-width: 22px;
    height: 22px;

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

    padding: 0 5px;

    border-radius: 50px;

    background: #f4f0e8;

    color: #191b15;

    font-size: 10px;
    font-weight: 800;

    box-shadow:
        0 3px 8px rgba(0,0,0,.2);
}


/* EFECTO CUANDO LLEGA UN PRODUCTO */

.carrito-flotante.rebote{
    animation: reboteCarrito .55s ease;
}


@keyframes reboteCarrito{

    0%{
        transform: scale(1);
    }

    35%{
        transform: scale(1.25);
    }

    60%{
        transform: scale(.92);
    }

    100%{
        transform: scale(1);
    }

}


/* ========================================
   PRODUCTO VOLANDO AL CARRITO - LIMPIO
======================================== */

.producto-volando{
    position: fixed !important;

    z-index: 99999 !important;

    pointer-events: none !important;

    width: 75px !important;
    height: 75px !important;

    object-fit: cover !important;

    border-radius: 50% !important;

    /* Quitamos la sombra larga */
    box-shadow: 0 4px 12px rgba(0,0,0,.18) !important;

    border: 2px solid #ffffff !important;

    opacity: 1;

    transition:
        left .65s cubic-bezier(.55,.05,.35,1),
        top .65s cubic-bezier(.55,.05,.35,1),
        width .65s ease,
        height .65s ease,
        opacity .55s ease,
        transform .65s ease !important;

    will-change:
        left,
        top,
        width,
        height,
        transform,
        opacity;
}

/* CELULAR */

@media(max-width: 768px){

    .carrito-flotante{
        right: 18px;
        bottom: 92px;

        width: 56px;
        height: 56px;
    }

    .carrito-flotante i{
        font-size: 21px;
    }

}
/* =====================================================
   PRODUCTOS - 2 POR FILA EN CELULAR
===================================================== */

@media (max-width: 768px){

    .productos{
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 12px !important;

        padding-left: 12px !important;
        padding-right: 12px !important;
    }


    /* TARJETA */

    .producto{
        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
    }


    /* IMAGEN */

    .producto-foto,
    .producto-imagen{
        width: 100% !important;

        height: 210px !important;
        min-height: 210px !important;
    }


    .imagen-producto{
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
    }


    /* INFORMACIÓN */

    .producto-info{
        padding: 16px 12px !important;
    }


    .producto-categoria{
        font-size: 8px !important;

        letter-spacing: 1.5px !important;
    }


    .producto-info h3{
        margin-top: 7px !important;
        margin-bottom: 8px !important;

        font-size: 19px !important;
        line-height: 1.1 !important;
    }


    .producto-descripcion,
    .producto-info p{
        font-size: 11px !important;
        line-height: 1.45 !important;
    }


    /* PRECIO */

    .producto-precio{
        margin-top: 12px !important;

        font-size: 17px !important;
    }


    /* ENVÍO */

    .envio-gratis{
        font-size: 8px !important;

        letter-spacing: .8px !important;
    }


    /* SELECTOR DEL CUADERNO */

    .selector-producto label{
        font-size: 9px !important;
    }


    .selector-materias{
        width: 100% !important;

        padding: 9px 6px !important;

        font-size: 10px !important;
    }


    /* BOTÓN */

    .boton-carrito{
        width: 100% !important;

        padding: 12px 5px !important;

        font-size: 8px !important;

        letter-spacing: .8px !important;
    }


    /* ETIQUETA DISPONIBLE */

    .etiqueta{
        font-size: 7px !important;

        padding: 7px 9px !important;
    }

}
/* =====================================================
   CELULAR - TARJETAS DE PRODUCTOS MISMO TAMAÑO
===================================================== */

@media (max-width: 768px){

    /* Las dos columnas se estiran por igual */
    .productos{
        align-items: stretch !important;
    }

    /* Cada producto funciona como una columna */
    .producto{
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
    }

    /* MISMO TAMAÑO DE IMAGEN */
    .producto-foto,
    .producto-imagen{
        width: 100% !important;
        height: 230px !important;
        min-height: 230px !important;
        max-height: 230px !important;
        overflow: hidden !important;
    }

    .imagen-producto{
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* El contenido ocupa todo el espacio disponible */
    .producto-info{
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
        height: 100% !important;
    }

    /* BOTÓN SIEMPRE ABAJO */
    .producto-info .boton-carrito{
        margin-top: auto !important;
    }

}
/* =====================================================
   NUEVA COLECCIÓN PALMONTE
===================================================== */
/* =====================================================
   NUEVA COLECCIÓN PALMONTE
===================================================== */

.coleccion-nueva{
    width:100%;
    background:#f2ede3;
    color:#171914;
}


/* =====================================================
   PRODUCTO PRINCIPAL
===================================================== */

.cuaderno-principal{
    width:100%;
    min-height:680px;

    display:grid;
    grid-template-columns:1fr 1.1fr;

    background:
        linear-gradient(
            90deg,
            rgba(244,239,229,.98) 0%,
            rgba(244,239,229,.94) 42%,
            rgba(244,239,229,.2) 66%,
            rgba(244,239,229,0) 100%
        ),
        #e9e1d4;

    overflow:hidden;
}


.cuaderno-informacion{
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:80px 8vw;
}


.cuaderno-etiqueta{
    margin-bottom:18px;

    color:#4f5d3b;

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

    letter-spacing:5px;

    text-transform:uppercase;
}


.cuaderno-informacion h2{
    margin:0 0 18px;

    color:#171914;

    font-family:"Playfair Display", serif;

    font-size:clamp(55px, 6vw, 92px);
    font-weight:500;

    line-height:.88;
}


.cuaderno-colaboracion{
    width:max-content;

    margin:0 0 25px;

    padding:9px 18px;

    background:#354127;

    color:white;

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

    letter-spacing:3px;

    text-transform:uppercase;
}


.cuaderno-envio-superior{
    display:flex;
    align-items:center;

    gap:10px;

    margin-bottom:25px;

    color:#4c583a;

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

    letter-spacing:1.5px;

    text-transform:uppercase;
}


.cuaderno-descripcion{
    max-width:510px;

    margin:0 0 34px;

    color:#4e4a43;

    font-size:16px;

    line-height:1.7;
}


.cuaderno-beneficios{
    max-width:540px;

    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:20px;

    margin-bottom:38px;
}


.cuaderno-beneficio{
    display:flex;
    flex-direction:column;

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

    gap:10px;

    text-align:center;
}


.cuaderno-beneficio i{
    color:#3e4b2d;

    font-size:25px;
}


.cuaderno-beneficio span{
    color:#24251f;

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

    line-height:1.35;

    letter-spacing:.7px;
}


.cuaderno-compra{
    max-width:600px;

    display:grid;
    grid-template-columns:1.2fr .8fr;

    align-items:end;

    gap:20px;

    margin-bottom:18px;
}


.cuaderno-selector{
    display:flex;
    flex-direction:column;

    gap:8px;
}


.cuaderno-selector label{
    color:#20221b;

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

    letter-spacing:1px;
}


.cuaderno-selector select{
    width:100%;

    padding:16px 16px;

    border:1px solid rgba(23,25,20,.45);
    border-radius:3px;

    background:rgba(255,255,255,.46);

    color:#20221b;

    font-family:"DM Sans", sans-serif;

    font-size:13px;

    cursor:pointer;
}


.cuaderno-precio{
    padding-bottom:10px;

    color:#171914;

    font-family:"Playfair Display", serif;

    font-size:clamp(29px, 3vw, 40px);
    font-weight:700;

    white-space:nowrap;
}


.cuaderno-botones{
    max-width:600px;

    display:grid;
    grid-template-columns:1fr .58fr;

    gap:14px;
}


.boton-cuaderno-principal,
.boton-ver-cuaderno{
    min-height:55px;

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

    gap:10px;

    padding:15px 20px;

    font-family:"DM Sans", sans-serif;

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

    letter-spacing:2px;

    text-transform:uppercase;

    cursor:pointer;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease;
}


.boton-cuaderno-principal{
    border:1px solid #171914;

    background:#171914;

    color:white;
}


.boton-cuaderno-principal:hover{
    background:#354127;

    transform:translateY(-2px);
}


.boton-ver-cuaderno{
    border:1px solid #171914;

    background:transparent;

    color:#171914;
}


.boton-ver-cuaderno:hover{
    background:#171914;

    color:white;

    transform:translateY(-2px);
}


/* =====================================================
   IMAGEN PRINCIPAL
===================================================== */

.cuaderno-imagen-principal{
    position:relative;

    min-height:680px;

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

    padding:45px;

    background:
        linear-gradient(
            90deg,
            rgba(242,237,227,.5),
            rgba(242,237,227,0)
        ),
        url("./Imagenes/campo.jpeg");

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

    overflow:hidden;
}


.cuaderno-imagen-principal::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(242,237,227,.45),
            rgba(30,35,20,.08)
        );
}


.cuaderno-imagen-principal img{
    width:min(520px, 88%);
    max-height:610px;

    position:relative;
    z-index:2;

    display:block;

    object-fit:contain;

    filter:
        drop-shadow(
            0 30px 35px rgba(0,0,0,.3)
        );
}


/* =====================================================
   PRÓXIMOS LANZAMIENTOS
===================================================== */

.proximos-lanzamientos{
    padding:65px 5vw 80px;

    background:#f7f2e9;
}


.titulo-proximos{
    margin-bottom:38px;

    text-align:center;
}


.titulo-proximos span{
    color:#4f5d3b;

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

    letter-spacing:5px;

    text-transform:uppercase;
}


.titulo-proximos h2{
    margin:8px 0 0;

    color:#171914;

    font-family:"Playfair Display", serif;

    font-size:clamp(42px, 5vw, 65px);
    font-weight:500;
}


.productos-proximos{
    width:min(1450px, 100%);

    margin:auto;

    display:grid;
    grid-template-columns:repeat(5,1fr);

    gap:18px;
}


.producto-proximo{
    min-height:300px;

    position:relative;

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

    padding:25px;

    border-radius:5px;

    background-color:#293020;
    background-position:center;
    background-size:cover;

    overflow:hidden;

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.producto-proximo:hover{
    transform:translateY(-7px);

    box-shadow:
        0 18px 35px rgba(0,0,0,.18);
}


.producto-proximo-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(20,23,16,.18),
            rgba(20,23,16,.88)
        );
}


.producto-proximo-texto{
    position:relative;
    z-index:2;

    color:white;

    text-align:center;
}


.producto-proximo-texto span{
    display:block;

    margin-bottom:9px;

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

    letter-spacing:3px;
}


.producto-proximo-texto h3{
    margin:0;

    font-family:"Playfair Display", serif;

    font-size:25px;
    font-weight:600;
}


/* Imágenes opcionales de productos */

.tarjeta-camisetas{
    background-image:url("./Imagenes/camiseta.png");
}


.tarjeta-chaquetas{
    background-image:url("./Imagenes/chaqueta.png");
}


.tarjeta-gorras{
    background-image:url("./Imagenes/gorra.png");
}


.tarjeta-termos{
    background-image:url("./Imagenes/termo.png");
}


.tarjeta-sombreros{
    background-image:url("./Imagenes/sombrero.png");
}


/* =====================================================
   TABLETA
===================================================== */

@media(max-width:1024px){

    .cuaderno-principal{
        grid-template-columns:1fr 1fr;
    }


    .cuaderno-informacion{
        padding:70px 5vw;
    }


    .cuaderno-beneficios{
        grid-template-columns:repeat(2,1fr);
    }


    .productos-proximos{
        grid-template-columns:repeat(3,1fr);
    }

}


/* =====================================================
   CELULAR
===================================================== */

@media(max-width:768px){

    .cuaderno-principal{
        display:flex;
        flex-direction:column-reverse;
    }


    .cuaderno-imagen-principal{
        min-height:480px;

        padding:65px 25px 30px;
    }


    .cuaderno-imagen-principal img{
        width:min(390px, 88%);
        max-height:430px;
    }


    .cuaderno-informacion{
        padding:55px 25px 65px;

        text-align:center;
    }


    .cuaderno-colaboracion{
        margin-left:auto;
        margin-right:auto;
    }


    .cuaderno-envio-superior{
        justify-content:center;
    }


    .cuaderno-descripcion{
        margin-left:auto;
        margin-right:auto;
    }


    .cuaderno-beneficios{
        margin-left:auto;
        margin-right:auto;
    }


    .cuaderno-compra{
        width:100%;

        display:flex;
        flex-direction:column;

        align-items:stretch;

        gap:16px;
    }


    .cuaderno-precio{
        padding:0;

        text-align:center;
    }


    .cuaderno-botones{
        width:100%;

        display:flex;
        flex-direction:column;
    }


    .productos-proximos{
        grid-template-columns:repeat(2,1fr);
    }


    .producto-proximo{
        min-height:250px;
    }

}


/* =====================================================
   CELULAR PEQUEÑO
===================================================== */

@media(max-width:480px){

    .cuaderno-informacion h2{
        font-size:52px;
    }


    .cuaderno-beneficios{
        grid-template-columns:repeat(2,1fr);

        gap:25px 10px;
    }


    .productos-proximos{
        grid-template-columns:1fr;
    }


    .producto-proximo{
        min-height:300px;
    }

}

/* =====================================================
   AJUSTES FINALES PALMONTE
===================================================== */

.header,
.header.activo{
    background:#10130e !important;
    color:#ffffff !important;
}

.header .nav a{
    color:#ffffff !important;
    opacity:1;
}

.header .nav a:hover{
    opacity:.68;
}

.boton-cuaderno-principal{
    color:#ffffff !important;
}

.boton-cuaderno-principal i{
    color:#ffffff !important;
}

.boton-cuaderno-principal.producto-agregado{
    background:#4f6239 !important;
    border-color:#4f6239 !important;
    color:#ffffff !important;
    transform:translateY(-2px) scale(1.01);
}

.boton-cuaderno-principal.producto-agregado i{
    color:#ffffff !important;
}

/* ========================================
   EFECTO VISUAL: PRODUCTO AL CARRITO
======================================== */

.carrito-menu.rebote,
.carrito-flotante.rebote{
    animation: reboteCarrito .55s ease;
}

.producto-volando{
    transition:
        left .72s cubic-bezier(.2,.8,.2,1),
        top .72s cubic-bezier(.2,.8,.2,1),
        width .72s ease,
        height .72s ease,
        opacity .72s ease,
        transform .72s ease !important;
}

.boton-cuaderno-principal.producto-agregado{
    background:#4f6239 !important;
    border-color:#4f6239 !important;
    color:#ffffff !important;
    transform:translateY(-2px) scale(1.01);
}

/* =====================================================
   AJUSTE FINAL — PRÓXIMOS LANZAMIENTOS
   Centrado, más llamativo y responsive
===================================================== */

.proximos-lanzamientos{
    padding: 82px 5vw 96px;
    background:
        radial-gradient(
            circle at top center,
            rgba(255,255,255,.55),
            transparent 42%
        ),
        #f7f2e9;
}

.titulo-proximos{
    max-width: 760px;
    margin: 0 auto 48px;
    text-align: center;
}

.titulo-proximos span{
    display: block;
    margin-bottom: 10px;
    color: #4f5d3b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.titulo-proximos h2{
    margin: 0;
    color: #171914;
    font-family: "Playfair Display", serif;
    font-size: clamp(44px, 5vw, 66px);
    font-weight: 500;
    line-height: 1;
}

.productos-proximos{
    width: min(1400px, 100%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;

    align-items: stretch;
}

.producto-proximo{
    min-height: 320px;

    position: relative;

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

    padding: 30px 20px;

    border: 1px solid rgba(255,255,255,.10);
    border-radius: 8px;

    background-color: #1d2418;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    overflow: hidden;
    cursor: pointer;

    box-shadow:
        0 12px 30px rgba(28,34,22,.13);

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

.producto-proximo::before{
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,.12),
            transparent 58%
        );

    opacity: .65;

    transition: opacity .35s ease;
}

.producto-proximo::after{
    content: "";

    position: absolute;
    inset: 14px;

    border: 1px solid rgba(255,255,255,.13);
    border-radius: 4px;

    pointer-events: none;

    transition:
        inset .35s ease,
        border-color .35s ease;
}

.producto-proximo-overlay{
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(12,16,10,.20) 0%,
            rgba(12,16,10,.48) 48%,
            rgba(12,16,10,.86) 100%
        );
}

.producto-proximo-texto{
    position: relative;
    z-index: 3;

    width: 100%;

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

    text-align: center;
    color: #ffffff;

    transition: transform .35s ease;
}

.producto-proximo-texto::before{
    content: "";

    width: 44px;
    height: 1px;

    margin-bottom: 18px;

    background: rgba(255,255,255,.60);
}

.producto-proximo-texto span{
    display: block;

    margin-bottom: 12px;

    color: rgba(255,255,255,.84);

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

    letter-spacing: 4px;

    text-transform: uppercase;
}

.producto-proximo-texto h3{
    margin: 0;

    color: #ffffff;

    font-family: "Playfair Display", serif;

    font-size: clamp(25px, 2vw, 31px);
    font-weight: 600;

    line-height: 1.1;

    text-shadow:
        0 3px 14px rgba(0,0,0,.35);
}

.producto-proximo:hover{
    transform: translateY(-10px);

    border-color: rgba(255,255,255,.24);

    box-shadow:
        0 24px 44px rgba(28,34,22,.23);
}

.producto-proximo:hover::before{
    opacity: 1;
}

.producto-proximo:hover::after{
    inset: 10px;
    border-color: rgba(255,255,255,.32);
}

.producto-proximo:hover .producto-proximo-texto{
    transform: translateY(-4px);
}

@media(max-width: 1100px){

    .productos-proximos{
        grid-template-columns: repeat(3, 1fr);
    }

}

@media(max-width: 768px){

    .proximos-lanzamientos{
        padding: 66px 22px 76px;
    }

    .titulo-proximos{
        margin-bottom: 36px;
    }

    .productos-proximos{
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .producto-proximo{
        min-height: 265px;
    }

}

@media(max-width: 480px){

    .productos-proximos{
        grid-template-columns: 1fr;
    }

    .producto-proximo{
        min-height: 295px;
    }

}


/* =====================================================
   BOTÓN ÚNICO DEL CUADERNO
===================================================== */

.cuaderno-botones{
    width: 100%;
    max-width: 600px;
    display: block;
}

.boton-cuaderno-principal{
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.boton-ver-cuaderno{
    display: none !important;
}


/* =====================================================
   ANUNCIO SIMPLE DE PRÓXIMO LANZAMIENTO
===================================================== */

body.popup-abierto{
    overflow: hidden;
}

.popup-lanzamiento-simple{
    width: min(980px, 94vw);
    grid-template-columns: 1.08fr .92fr;
}

.popup-lanzamiento-simple .popup-imagen{
    min-height: 620px;
}

.popup-lanzamiento-simple .popup-imagen img{
    object-fit: cover;
    object-position: center;
}

.popup-contenido-simple{
    text-align: left;
}

.popup-contenido-simple h2{
    margin-bottom: 28px;
}

.popup-colaboracion-simple{
    width: fit-content;
    margin: 0 !important;
    padding: 11px 16px;
    background: #303724;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700;
    letter-spacing: 2.8px;
    line-height: 1.3 !important;
    text-transform: uppercase;
}

@media(max-width: 768px){

    .popup-lanzamiento-simple{
        display: block;
        width: min(500px, 94vw);
    }

    .popup-lanzamiento-simple .popup-imagen{
        min-height: 0;
        height: 430px;
    }

    .popup-contenido-simple{
        padding: 36px 26px 40px;
        text-align: center;
    }

    .popup-colaboracion-simple{
        margin: 0 auto !important;
    }

}

@media(max-width: 420px){

    .popup-lanzamiento-simple .popup-imagen{
        height: 340px;
    }

    .popup-contenido-simple h2{
        font-size: 40px;
    }

}


/* =====================================================
   POPUP LANZAMIENTO - IMAGEN COMPLETA SIN RECORTAR
===================================================== */
.popup-lanzamiento-fondo{
    padding: 24px;
    background: rgba(9,10,7,.78);
}

.popup-lanzamiento-imagen{
    width: auto;
    max-width: min(1180px, 94vw);
    max-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    background: transparent;
    box-shadow: none;
}

.popup-imagen-lanzamiento{
    display: block;
    width: auto;
    height: auto;
    max-width: 94vw;
    max-height: 90vh;
    object-fit: contain;
    object-position: center;
    box-shadow: 0 28px 80px rgba(0,0,0,.38);
}

.popup-lanzamiento-imagen .cerrar-popup{
    top: 12px;
    right: 12px;
}

@media(max-width: 768px){
    .popup-lanzamiento-fondo{
        padding: 12px;
    }

    .popup-lanzamiento-imagen{
        width: 100%;
        max-width: 100%;
        max-height: 94svh;
        display: flex;
        overflow: visible;
    }

    .popup-imagen-lanzamiento{
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: 92svh;
        object-fit: contain;
    }

    .popup-lanzamiento-imagen .cerrar-popup{
        width: 38px;
        height: 38px;
        top: 8px;
        right: 8px;
        font-size: 23px;
    }
}

@media(max-width: 420px){
    .popup-lanzamiento-fondo{
        padding: 8px;
    }

    .popup-imagen-lanzamiento{
        max-height: 94svh;
    }
}


/* =====================================================
   AJUSTES FINALES — POPUP COMPLETO Y DOS CUADERNOS
===================================================== */

body.popup-abierto{
    overflow: hidden;
}

.popup-lanzamiento-fondo{
    position: fixed !important;
    inset: 0 !important;
    z-index: 20000 !important;

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

    padding:
        max(18px, env(safe-area-inset-top))
        max(18px, env(safe-area-inset-right))
        max(18px, env(safe-area-inset-bottom))
        max(18px, env(safe-area-inset-left)) !important;

    background: rgba(7, 8, 6, .82) !important;

    overflow: auto !important;
}

.popup-lanzamiento-imagen{
    width: min(1500px, 94vw) !important;
    height: auto !important;
    max-width: 94vw !important;
    max-height: 90vh !important;

    position: relative !important;

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

    grid-template-columns: none !important;

    background: transparent !important;

    overflow: visible !important;

    box-shadow: none !important;
}

.popup-imagen-lanzamiento{
    width: auto !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: 90vh !important;

    display: block !important;

    object-fit: contain !important;
    object-position: center !important;

    border-radius: 7px;

    box-shadow:
        0 26px 80px rgba(0, 0, 0, .46);
}

.popup-lanzamiento-imagen .cerrar-popup{
    position: absolute !important;

    top: 12px !important;
    right: 12px !important;

    z-index: 10 !important;

    width: 44px !important;
    height: 44px !important;

    border: 1px solid rgba(255,255,255,.25) !important;

    background: rgba(17, 20, 15, .92) !important;

    box-shadow:
        0 8px 24px rgba(0,0,0,.28);
}


/* =====================================================
   COLECCIÓN DE CUADERNOS
===================================================== */

.coleccion-nueva{
    width: 100%;

    padding: 120px 5vw 0;

    background:
        radial-gradient(
            circle at top center,
            rgba(255,255,255,.58),
            transparent 38%
        ),
        #f4f0e8;

    color: #171914;
}

.coleccion-cuadernos-encabezado{
    width: min(850px, 100%);

    margin: 0 auto 58px;

    text-align: center;
}

.coleccion-cuadernos-encabezado > span{
    display: block;

    margin-bottom: 13px;

    color: #53603e;

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

    letter-spacing: 5px;

    text-transform: uppercase;
}

.coleccion-cuadernos-encabezado h2{
    margin: 0 0 18px;

    font-family: "Playfair Display", serif;

    font-size: clamp(48px, 6vw, 78px);
    font-weight: 500;

    line-height: 1;
}

.coleccion-cuadernos-encabezado p{
    width: min(650px, 100%);

    margin: auto;

    color: #686258;

    font-size: 16px;

    line-height: 1.75;
}

.cuadernos-grid{
    width: min(1250px, 100%);

    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 28px;
}

.cuaderno-tarjeta{
    min-width: 0;

    display: flex;
    flex-direction: column;

    background: rgba(255,255,255,.58);

    border: 1px solid rgba(31, 35, 25, .10);
    border-radius: 7px;

    overflow: hidden;

    box-shadow:
        0 18px 45px rgba(38, 42, 30, .10);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.cuaderno-tarjeta:hover{
    transform: translateY(-7px);

    box-shadow:
        0 28px 58px rgba(38, 42, 30, .16);
}

.cuaderno-tarjeta-imagen{
    min-height: 560px;

    position: relative;

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

    padding: 34px;

    background:
        linear-gradient(
            135deg,
            #eae4d9,
            #f7f3eb
        );

    overflow: hidden;
}

.cuaderno-tarjeta-imagen img{
    width: 100%;
    height: 100%;

    max-height: 520px;

    display: block;

    object-fit: contain;
    object-position: center;

    filter:
        drop-shadow(0 20px 22px rgba(0,0,0,.18));

    transition:
        transform .4s ease;
}

.cuaderno-tarjeta:hover
.cuaderno-tarjeta-imagen img{
    transform: scale(1.025);
}

.cuaderno-tarjeta-etiqueta{
    position: absolute;

    top: 18px;
    left: 18px;

    z-index: 2;

    padding: 9px 13px;

    background: #303724;

    color: #ffffff;

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

    letter-spacing: 2px;

    text-transform: uppercase;
}

.cuaderno-tarjeta-info{
    flex: 1;

    display: flex;
    flex-direction: column;

    padding: 34px 34px 36px;
}

.cuaderno-tarjeta-colaboracion{
    margin-bottom: 11px;

    color: #61704a;

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

    letter-spacing: 2.8px;

    text-transform: uppercase;
}

.cuaderno-tarjeta-info h3{
    margin: 0;

    font-family: "Playfair Display", serif;

    font-size: clamp(31px, 3vw, 43px);
    font-weight: 500;

    line-height: 1.08;
}

.cuaderno-tarjeta-variante{
    margin-top: 8px;

    color: #303724;

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

    letter-spacing: 2px;

    text-transform: uppercase;
}

.cuaderno-tarjeta-descripcion{
    margin: 20px 0 26px;

    color: #69645c;

    font-size: 14px;

    line-height: 1.75;
}

.cuaderno-tarjeta-pie{
    margin-top: auto;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 18px;
}

.cuaderno-tarjeta-precio{
    font-family: "Playfair Display", serif;

    font-size: clamp(30px, 3vw, 40px);
    font-weight: 700;

    white-space: nowrap;
}

.cuaderno-tarjeta-envio{
    display: flex;
    align-items: center;

    gap: 7px;

    padding-bottom: 7px;

    color: #52603c;

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

    letter-spacing: 1.3px;

    white-space: nowrap;
}

.boton-cuaderno-tarjeta{
    width: 100%;

    min-height: 57px;

    margin-top: 24px;

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

    gap: 11px;
}


/* =====================================================
   TABLETA
===================================================== */

@media(max-width: 980px){

    .coleccion-nueva{
        padding-top: 105px;
    }

    .cuaderno-tarjeta-imagen{
        min-height: 460px;
    }

    .cuaderno-tarjeta-imagen img{
        max-height: 420px;
    }

    .cuaderno-tarjeta-info{
        padding: 28px;
    }

    .cuaderno-tarjeta-pie{
        align-items: flex-start;
        flex-direction: column;

        gap: 8px;
    }

    .cuaderno-tarjeta-envio{
        padding-bottom: 0;
    }

}


/* =====================================================
   CELULAR
===================================================== */

@media(max-width: 768px){

    .popup-lanzamiento-fondo{
        align-items: center !important;

        padding:
            max(8px, env(safe-area-inset-top))
            max(8px, env(safe-area-inset-right))
            max(8px, env(safe-area-inset-bottom))
            max(8px, env(safe-area-inset-left)) !important;
    }

    .popup-lanzamiento-imagen{
        width: 98vw !important;
        max-width: 98vw !important;
        max-height: 92svh !important;
    }

    .popup-imagen-lanzamiento{
        width: 100% !important;
        height: auto !important;

        max-width: 100% !important;
        max-height: 90svh !important;

        object-fit: contain !important;

        border-radius: 4px;
    }

    .popup-lanzamiento-imagen .cerrar-popup{
        top: 7px !important;
        right: 7px !important;

        width: 39px !important;
        height: 39px !important;

        font-size: 22px !important;
    }

    .coleccion-nueva{
        padding: 88px 20px 0;
    }

    .coleccion-cuadernos-encabezado{
        margin-bottom: 38px;
    }

    .coleccion-cuadernos-encabezado h2{
        font-size: clamp(42px, 13vw, 59px);
    }

    .coleccion-cuadernos-encabezado p{
        font-size: 14px;
    }

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

        gap: 24px;
    }

    .cuaderno-tarjeta-imagen{
        min-height: 0;
        height: auto;

        padding: 28px 20px;
    }

    .cuaderno-tarjeta-imagen img{
        width: 100%;
        height: auto;

        max-height: 520px;
    }

    .cuaderno-tarjeta-info{
        padding: 27px 23px 30px;
    }

    .cuaderno-tarjeta-pie{
        align-items: flex-start;
        flex-direction: column;

        gap: 9px;
    }

    .cuaderno-tarjeta-precio{
        font-size: 34px;
    }

}


/* =====================================================
   CELULAR PEQUEÑO
===================================================== */

@media(max-width: 420px){

    .popup-lanzamiento-imagen{
        width: 99vw !important;
        max-width: 99vw !important;
    }

    .popup-imagen-lanzamiento{
        max-height: 88svh !important;
    }

    .coleccion-nueva{
        padding-left: 14px;
        padding-right: 14px;
    }

    .cuaderno-tarjeta-imagen{
        padding: 22px 12px;
    }

    .cuaderno-tarjeta-info{
        padding: 24px 19px 27px;
    }

    .cuaderno-tarjeta-info h3{
        font-size: 32px;
    }

}


/* =====================================================
   AJUSTE FINAL MÓVIL — DOS CUADERNOS LADO A LADO
===================================================== */

.cuaderno-tarjeta-envio,
.carrito-envio,
.item-envio{
    display:none !important;
}

@media (max-width: 768px){

    .coleccion-nueva{
        padding: 72px 10px 0 !important;
    }

    .coleccion-cuadernos-encabezado{
        margin-bottom: 26px !important;
        padding: 0 12px;
    }

    .coleccion-cuadernos-encabezado > span{
        font-size: 8px !important;
        letter-spacing: 3px !important;
    }

    .coleccion-cuadernos-encabezado h2{
        font-size: clamp(34px, 10vw, 48px) !important;
    }

    .coleccion-cuadernos-encabezado p{
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    .cuadernos-grid{
        width: 100% !important;
        max-width: none !important;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        gap: 9px !important;
        align-items: stretch !important;
    }

    .cuaderno-tarjeta{
        width: 100% !important;
        min-width: 0 !important;
        height: 100% !important;

        border-radius: 6px !important;
    }

    .cuaderno-tarjeta:hover{
        transform: none !important;
    }

    .cuaderno-tarjeta-imagen{
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: 4 / 5 !important;

        padding: 8px 5px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .cuaderno-tarjeta-imagen img{
        width: 100% !important;
        height: 100% !important;

        max-width: 100% !important;
        max-height: 100% !important;

        object-fit: contain !important;
        object-position: center !important;

        filter: drop-shadow(0 8px 10px rgba(0,0,0,.13)) !important;
    }

    .cuaderno-tarjeta-etiqueta{
        top: 7px !important;
        left: 7px !important;

        padding: 6px 7px !important;

        font-size: 7px !important;
        letter-spacing: 1.2px !important;
    }

    .cuaderno-tarjeta-info{
        padding: 14px 10px 12px !important;
    }

    .cuaderno-tarjeta-colaboracion{
        margin-bottom: 6px !important;

        font-size: 6.5px !important;
        letter-spacing: 1.25px !important;

        white-space: nowrap !important;
    }

    .cuaderno-tarjeta-info h3{
        font-size: clamp(17px, 5vw, 23px) !important;
        line-height: 1.04 !important;
    }

    .cuaderno-tarjeta-variante{
        margin-top: 5px !important;

        font-size: 8px !important;
        letter-spacing: 1.2px !important;
    }

    .cuaderno-tarjeta-descripcion{
        display: none !important;
    }

    .cuaderno-tarjeta-pie{
        margin-top: 15px !important;

        display: block !important;
    }

    .cuaderno-tarjeta-precio{
        display: block !important;

        font-size: clamp(20px, 6vw, 28px) !important;
        line-height: 1 !important;

        white-space: normal !important;
    }

    .boton-cuaderno-tarjeta{
        min-height: 45px !important;

        margin-top: 13px !important;
        padding: 9px 5px !important;

        gap: 5px !important;

        font-size: 7px !important;
        letter-spacing: .85px !important;
        line-height: 1.2 !important;
    }

    .boton-cuaderno-tarjeta i{
        font-size: 10px !important;
    }
}

@media (max-width: 390px){

    .coleccion-nueva{
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    .cuadernos-grid{
        gap: 7px !important;
    }

    .cuaderno-tarjeta-info{
        padding: 12px 8px 10px !important;
    }

    .cuaderno-tarjeta-info h3{
        font-size: 16px !important;
    }

    .cuaderno-tarjeta-precio{
        font-size: 20px !important;
    }

    .boton-cuaderno-tarjeta{
        min-height: 42px !important;
        font-size: 6.4px !important;
        letter-spacing: .65px !important;
    }
}


/* =====================================================
   ACTUALIZACIÓN PRODUCTOS Y DETALLES
===================================================== */

.whatsapp-mobile{
    width: fit-content;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 12px;
    background: #25D366;
    color: #ffffff !important;
    box-shadow: 0 10px 25px rgba(37, 211, 102, .22);
}

.whatsapp-mobile i{
    font-size: 22px;
    color: #ffffff;
}

.cuaderno-tarjeta-imagen{
    width: 100%;
    padding: 0;
    border: 0;
    cursor: pointer;
    text-align: inherit;
}

.acciones-producto{
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 10px;
    margin-top: 18px;
}

.acciones-producto .boton-cuaderno-tarjeta{
    margin-top: 0 !important;
}

.boton-detalles-producto{
    min-height: 54px;
    padding: 14px 12px;
    border: 1px solid #191b15;
    background: transparent;
    color: #191b15;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.boton-detalles-producto:hover{
    background: #303724;
    color: #ffffff;
    transform: translateY(-2px);
}

/* MODAL */

.modal-producto-fondo{
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(8, 9, 6, .78);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
}

.modal-producto-fondo.activo{
    opacity: 1;
    visibility: visible;
}

.modal-producto{
    width: min(1080px, 96vw);
    max-height: 92vh;
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr);
    overflow: hidden;
    background: #f5f1e9;
    box-shadow: 0 35px 100px rgba(0,0,0,.42);
    transform: translateY(20px) scale(.98);
    transition: transform .32s ease;
}

.modal-producto-fondo.activo .modal-producto{
    transform: translateY(0) scale(1);
}

.modal-producto-cerrar{
    width: 44px;
    height: 44px;
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 15;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(17,20,15,.94);
    color: white;
    font-size: 28px;
    cursor: pointer;
}

.galeria-producto{
    min-width: 0;
    position: relative;
    background: #e8e2d7;
}

.galeria-ventana{
    width: 100%;
    height: min(760px, 84vh);
    overflow: hidden;
    touch-action: pan-y;
}

.galeria-pista{
    height: 100%;
    display: flex;
    transition: transform .48s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}

.galeria-slide{
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    padding: 24px;
}

.galeria-slide img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
}

.galeria-flecha{
    width: 44px;
    height: 44px;
    position: absolute;
    top: 50%;
    z-index: 5;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(17,20,15,.86);
    color: #ffffff;
    cursor: pointer;
    transform: translateY(-50%);
}

.galeria-anterior{ left: 15px; }
.galeria-siguiente{ right: 15px; }

.galeria-indicadores{
    position: absolute;
    left: 50%;
    bottom: 15px;
    z-index: 6;
    display: flex;
    gap: 8px;
    transform: translateX(-50%);
}

.galeria-punto{
    width: 9px;
    height: 9px;
    padding: 0;
    border: 1px solid #303724;
    border-radius: 50%;
    background: rgba(255,255,255,.7);
    cursor: pointer;
}

.galeria-punto.activo{
    background: #303724;
}

.modal-producto-info{
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 58px 48px 46px;
    overflow-y: auto;
}

.modal-producto-marca{
    margin-bottom: 16px;
    color: #687054;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 3px;
}

.modal-producto-info h2{
    font-family: "Playfair Display", serif;
    font-size: clamp(34px, 4vw, 58px);
    font-weight: 500;
    line-height: 1;
}

.modal-producto-variante{
    margin-top: 12px;
    color: #303724;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.modal-producto-descripcion{
    margin-top: 24px;
    color: #676159;
    font-size: 15px;
    line-height: 1.75;
}

.modal-producto-caracteristicas{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 18px;
    margin-top: 25px;
    padding: 0;
    list-style: none;
}

.modal-producto-caracteristicas li{
    position: relative;
    padding-left: 17px;
    color: #373a2b;
    font-size: 12px;
    font-weight: 600;
}

.modal-producto-caracteristicas li::before{
    content: "•";
    position: absolute;
    left: 0;
    color: #687054;
}

.modal-producto-precio{
    margin-top: 30px;
    font-family: "Playfair Display", serif;
    font-size: 34px;
}

.modal-agregar-carrito{
    margin-top: 20px !important;
}

body.modal-abierto{
    overflow: hidden;
}

/* Producto que viaja al carrito */
.producto-volando{
    position: fixed;
    z-index: 20000;
    width: 82px;
    height: 82px;
    object-fit: cover;
    border-radius: 12px;
    pointer-events: none;
    box-shadow: 0 12px 30px rgba(0,0,0,.25);
    transition:
        left .72s cubic-bezier(.22,.61,.36,1),
        top .72s cubic-bezier(.22,.61,.36,1),
        width .72s ease,
        height .72s ease,
        opacity .72s ease,
        transform .72s ease;
}

@media (max-width: 768px){

    .acciones-producto{
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .boton-detalles-producto,
    .acciones-producto .boton-cuaderno-tarjeta{
        min-height: 43px !important;
        padding: 8px 5px !important;
        font-size: 6.5px !important;
        letter-spacing: .7px !important;
    }

    .modal-producto-fondo{
        padding: 10px;
    }

    .modal-producto{
        width: 100%;
        max-height: 96svh;
        display: block;
        overflow-y: auto;
    }

    .galeria-ventana{
        height: min(52svh, 490px);
    }

    .galeria-slide{
        padding: 12px;
    }

    .galeria-flecha{
        width: 38px;
        height: 38px;
    }

    .modal-producto-info{
        padding: 30px 20px 24px;
    }

    .modal-producto-info h2{
        padding-right: 36px;
        font-size: clamp(29px, 9vw, 42px);
    }

    .modal-producto-descripcion{
        font-size: 14px;
    }

    .modal-producto-caracteristicas{
        grid-template-columns: 1fr 1fr;
    }

    .modal-producto-precio{
        font-size: 29px;
    }

    .whatsapp-mobile{
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce){
    .galeria-pista,
    .modal-producto,
    .producto-volando{
        transition: none !important;
    }
}


/* =====================================================
   CORRECCIÓN FINAL: GALERÍA COMPLETA EN COMPUTADOR
===================================================== */

.modal-producto-fondo{
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

.modal-producto{
    height: min(88vh, 760px) !important;
    min-height: 0 !important;
}

.galeria-producto{
    height: 100% !important;
    min-height: 0 !important;
}

.galeria-ventana{
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
}

.galeria-pista,
.galeria-slide{
    height: 100% !important;
    min-height: 0 !important;
}

.galeria-slide{
    padding: 14px 22px 34px !important;
}

.galeria-slide img{
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

@media (max-width: 768px){

    .modal-producto{
        height: auto !important;
        max-height: 96svh !important;
    }

    .galeria-producto{
        height: auto !important;
    }

    .galeria-ventana{
        height: min(68svh, 620px) !important;
        min-height: 420px !important;
    }

    .galeria-slide{
        padding: 10px 14px 34px !important;
    }
}

@media (max-width: 430px){

    .galeria-ventana{
        height: min(62svh, 540px) !important;
        min-height: 360px !important;
    }
}


/* =====================================================
   AJUSTE DEFINITIVO DE GALERÍA
   Imágenes completas en computador, tablet y celular
===================================================== */

.modal-producto-fondo{
    padding: clamp(8px, 2vw, 24px) !important;
    overflow: auto !important;
}

.modal-producto{
    width: min(1120px, calc(100vw - 32px)) !important;
    height: min(820px, calc(100dvh - 48px)) !important;
    max-height: calc(100dvh - 48px) !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr) !important;
}

.galeria-producto{
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}

.galeria-ventana{
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.galeria-pista{
    width: 100% !important;
    height: 100% !important;
}

.galeria-slide{
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 0 !important;
    padding: 18px 48px 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.galeria-slide img{
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center !important;
    image-orientation: from-image;
}

.modal-producto-info{
    max-height: 100% !important;
    overflow-y: auto !important;
}

.galeria-indicadores{
    bottom: 14px !important;
}

/* Ventanas medianas o con poca altura:
   modal en una sola columna para evitar recortes */
@media (max-width: 1050px), (max-height: 720px){

    .modal-producto{
        width: min(760px, calc(100vw - 20px)) !important;
        height: auto !important;
        max-height: calc(100dvh - 20px) !important;
        display: block !important;
        overflow-y: auto !important;
    }

    .galeria-producto{
        height: min(68dvh, 620px) !important;
        min-height: 340px !important;
    }

    .galeria-ventana{
        height: 100% !important;
    }

    .galeria-slide{
        padding: 12px 42px 38px !important;
    }

    .modal-producto-info{
        max-height: none !important;
        overflow: visible !important;
    }
}

/* Celular */
@media (max-width: 768px){

    .modal-producto-fondo{
        padding: 6px !important;
        align-items: flex-start !important;
    }

    .modal-producto{
        width: 100% !important;
        max-height: calc(100dvh - 12px) !important;
        border-radius: 0 !important;
    }

    .galeria-producto{
        height: min(61dvh, 560px) !important;
        min-height: 330px !important;
    }

    .galeria-slide{
        padding: 10px 35px 34px !important;
    }

    .galeria-flecha{
        width: 38px !important;
        height: 38px !important;
    }

    .galeria-anterior{
        left: 6px !important;
    }

    .galeria-siguiente{
        right: 6px !important;
    }

    .modal-producto-info{
        padding: 25px 18px 24px !important;
    }
}

@media (max-width: 430px){

    .galeria-producto{
        height: min(58dvh, 500px) !important;
        min-height: 300px !important;
    }

    .galeria-slide{
        padding: 8px 30px 32px !important;
    }
}

/* Celular horizontal */
@media (max-height: 500px) and (orientation: landscape){

    .modal-producto{
        width: min(920px, calc(100vw - 12px)) !important;
        max-height: calc(100dvh - 12px) !important;
        display: grid !important;
        grid-template-columns: 1.15fr .85fr !important;
        overflow: hidden !important;
    }

    .galeria-producto{
        height: 100% !important;
        min-height: 0 !important;
    }

    .modal-producto-info{
        max-height: 100% !important;
        overflow-y: auto !important;
        padding: 24px 20px !important;
    }
}