/* ========================================= */
    /* BRISA - ESTILOS PRINCIPALES */
    /* ========================================= */

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

    html{
        scroll-behavior:smooth;
    }

    body{

        font-family:'Poppins',sans-serif;

        background:#faf9f7;

        color:#222;

        line-height:1.6;

    }

    /* ========================================= */
    /* COLORES */
    /* ========================================= */

    :root{

        --principal:#7a1f2b;

        --principal-hover:#611723;

        --dorado:#c9a227;

        --gris:#777;

        --fondo:#faf9f7;

        --blanco:#ffffff;

    }

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

    .cabecera{

        padding:70px 20px 40px;

        text-align:center;

        background:linear-gradient(to bottom,#ffffff,#faf9f7);

    }

    /* ========================================= */
    /* LOGO */
    /* ========================================= */

    .logo img{

        width:150px;

        height:150px;

        border-radius:50%;

        object-fit:cover;

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

    }

    .cabecera h1{

        margin-top:25px;

        font-family:'Cormorant Garamond',serif;

        font-size:72px;

        letter-spacing:6px;

        color:var(--principal);

        font-weight:700;

    }

    .eslogan{

        margin-top:10px;

        color:var(--gris);

        font-size:18px;

        letter-spacing:1px;

    }

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

    .boton{

        display:inline-block;

        margin-top:35px;

        padding:15px 45px;

        background:var(--principal);

        color:white;

        text-decoration:none;

        border-radius:40px;

        transition:.35s;

        font-weight:500;

    }

    .boton:hover{

        background:var(--principal-hover);

        transform:translateY(-3px);

    }

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

    .banner{

        width:100%;

        margin-top:40px;

    }


    .banner img{

        width:65%;

        max-width:850px;

        display:block;

        margin:auto;

        border-radius:20px;

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

    }
/* ========================================= */
/* MENÚ FIJO */
/* ========================================= */

nav{

    width:100%;

    background:white;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:18px;

    padding:15px;

    position:fixed;

    top:0;

    left:0;

    z-index:9999;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

}


nav a{

    text-decoration:none;

    color:#222;

    font-weight:500;

    padding:12px 24px;

    border-radius:40px;

    transition:.3s;

}


nav a:hover{

    background:var(--principal);

    color:white;

}
    /* ========================================= */
    /* BIENVENIDA */
    /* ========================================= */

    .bienvenida{

        width:90%;

        max-width:900px;

        margin:80px auto;

        text-align:center;

    }

    .bienvenida h2{

        font-family:'Cormorant Garamond',serif;

        font-size:48px;

        color:var(--principal);

        margin-bottom:25px;

    }

    .bienvenida p{

        font-size:18px;

        color:#555;

    }

    /* ========================================= */
    /* TARJETAS */
    /* ========================================= */

    .categorias{

        width:90%;

        max-width:1200px;

        margin:80px auto;

        display:grid;

        grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

        gap:30px;

    }

    .card{

        background:white;

        text-decoration:none;

        color:#222;

        padding:35px;

        border-radius:18px;

        box-shadow:0 12px 30px rgba(0,0,0,.08);

        transition:.35s;

    }

    .card:hover{

        transform:translateY(-10px);

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

    }

    .card h3{

        font-family:'Cormorant Garamond',serif;

        color:var(--principal);

        font-size:34px;

        margin-bottom:15px;

    }

    .card p{

        color:#666;

    }

    /* ========================================= */
    /* PIE */
    /* ========================================= */

    footer{

        margin-top:80px;

        padding:35px;

        text-align:center;

        color:#777;

        border-top:1px solid #e8e8e8;

    }
    /* ========================================= */
    /* DETALLES - PROXIMAMENTE */
    /* ========================================= */

    .proximamente{

        width:90%;

        max-width:950px;

        margin:80px auto;

        padding:60px 40px;

        text-align:center;

        background:#ffffff;

        border-radius:25px;

        box-shadow:0 15px 40px rgba(0,0,0,.08);

    }


    .proximamente h2{

        font-family:'Cormorant Garamond',serif;

        font-size:48px;

        color:var(--principal);

        margin-bottom:20px;

    }


    .proximamente > p{

        max-width:700px;

        margin:0 auto 35px;

        color:#666;

        font-size:18px;

    }


    .caja-espera{

        max-width:600px;

        margin:35px auto;

        padding:30px;

        background:#faf9f7;

        border:1px solid #eee;

        border-radius:20px;

        color:#555;

        font-size:18px;

        line-height:2.2;

    }


    .proximamente h3{

        margin-top:35px;

        font-family:'Cormorant Garamond',serif;

        font-size:32px;

        color:var(--principal);

    }


    /* ========================================= */
    /* DETALLES - MÓVIL */
    /* ========================================= */

    @media(max-width:768px){

        .proximamente{

            width:92%;

            margin:50px auto;

            padding:40px 20px;

            border-radius:20px;

        }


        .proximamente h2{

            font-size:38px;

        }


        .proximamente > p{

            font-size:16px;

        }


        .caja-espera{

            padding:25px 15px;

            font-size:16px;

        }


        .proximamente h3{

            font-size:27px;

        }

    }
    /* ========================================= */
    /* CARRITO */
    /* ========================================= */


    .carrito-boton{

        display:inline-block;

        margin-top:20px;

        margin-left:15px;

        padding:15px 35px;

        background:var(--dorado);

        color:white;

        text-decoration:none;

        border-radius:40px;

        font-weight:500;

        transition:.3s;

    }


    .carrito-boton:hover{

        background:#b08b1f;

        transform:translateY(-3px);

    }
    .productos{

    width:90%;
    max-width:1200px;
    margin:60px auto;

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;

    }


    .producto img{

    width:100%;
    border-radius:15px;

    }


    .cantidad{

    margin:20px 0;

    }


    .cantidad select{

    padding:10px;
    border-radius:20px;
    border:1px solid #c9a227;

    }


    .btn-carrito{

    background:#7a1f2b;
    color:white;
    border:none;
    padding:15px 30px;
    border-radius:30px;
    cursor:pointer;

    }


    #mensaje-carrito{

    position:fixed;
    bottom:30px;
    right:30px;

    background:white;
    padding:15px 25px;

    border-radius:30px;

    box-shadow:0 10px 30px rgba(0,0,0,.15);

    opacity:0;

    transform:translateY(20px);

    transition:.3s;

    }


    #mensaje-carrito.mostrar{

    opacity:1;

    transform:translateY(0);

    }
    /* ========================================= */
    /* DATOS DE ENVÍO */
    /* ========================================= */


    .envio{

        width:90%;
        max-width:1200px;
        margin:60px auto;
        padding:40px;

        background:white;

        border-radius:25px;

        box-shadow:0 15px 40px rgba(0,0,0,.08);

    }



    .envio h2{

        font-family:'Cormorant Garamond',serif;

        color:var(--principal);

        font-size:42px;

        margin-bottom:25px;

    }



    .formulario-envio{

        display:grid;

        grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

        gap:20px;

    }



    .formulario-envio div{

        display:flex;

        flex-direction:column;

    }



    .formulario-envio label{

        margin-bottom:8px;

        font-weight:500;

    }



    .formulario-envio input{

        padding:14px;

        border-radius:15px;

        border:1px solid #ddd;

        font-size:15px;

    }



    .formulario-envio input:focus{

        outline:none;

        border-color:#7a1f2b;

    }




    /* PAGO */


    .pago{

        margin-top:35px;

    }



    .pago label{

        margin-right:20px;

        cursor:pointer;

    }



    .confirmar{

        margin-top:30px;

        padding:15px 40px;

        border:none;

        border-radius:40px;

        background:var(--principal);

        color:white;

        cursor:pointer;

        font-size:16px;

        transition:.3s;

    }



    .confirmar:hover{

        transform:translateY(-3px);

        background:var(--principal-hover);

    }
    /* =============================== */
    /* PAGO BRISA */
    /* =============================== */


    .zona-pago{
        display:flex;
        justify-content:center;
        padding:50px 20px;
    }



    .formulario-pago{

        background:white;

        max-width:600px;

        width:100%;

        padding:35px;

        border-radius:25px;

        box-shadow:0 15px 35px rgba(0,0,0,0.10);

    }



    .formulario-pago h3{

        color:#8a2be2;

        text-align:center;

        font-size:24px;

        margin-bottom:25px;

    }



    .formulario-pago label{

        display:block;

        margin-top:15px;

        font-weight:600;

    }



    .formulario-pago input[type="text"],
    .formulario-pago input[type="tel"],
    .formulario-pago input[type="email"]{

        width:100%;

        padding:14px;

        margin-top:7px;

        border-radius:12px;

        border:1px solid #ddd;

        font-size:15px;

    }



    .formulario-pago input:focus{

        outline:none;

        border-color:#8a2be2;

    }



    .metodos{

        display:flex;

        flex-direction:column;

        gap:12px;

        margin-top:20px;

    }



    .metodos label{

        background:#faf7ff;

        padding:15px;

        border-radius:15px;

        border:1px solid #eee;

    }



    .btn-carrito{

        background:#8a2be2;

        color:white;

        border:none;

        padding:15px;

        border-radius:15px;

        width:100%;

        font-size:18px;

        cursor:pointer;

        margin-top:25px;

    }
    /* ========================================= */
    /* COLORES DE CUADERNOS */
    /* ========================================= */

    .paleta-colores{

        display:flex;

        justify-content:center;

        flex-wrap:wrap;

        gap:18px;

        margin-top:30px;

    }

    .color-cuaderno{

        width:45px;

        height:45px;

        border-radius:50%;

        border:3px solid white;

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

        transition:.3s;

    }

    .color-cuaderno:hover{

        transform:scale(1.15);

    }

    /* Colores disponibles */

    .azul-claro{

        background:#7ec8ff;

    }

    .azul-oscuro{

        background:#2f5fa8;

    }

    .rosa{

        background:#ff7eb6;

    }

    .morado{

        background:#8a2be2;

    }
    .producto img{

        width:100%;

        height:280px;

        object-fit:contain;

        border-radius:15px;

        background:white;

    }
    .producto{
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    .producto img{
        width:100%;
        max-width:220px;
        height:220px;
        object-fit:contain;
        margin-bottom:20px;
    }

    .producto select{
        width:100%;
        padding:10px;
        margin:8px 0 15px;
        border-radius:10px;
    }

    .btn-carrito{
        width:100%;
        margin-top:15px;
    }
    /* IMÁGENES DE CATEGORÍAS PAPELERÍA */

    .imagen-producto{
        width:100%;
        height:180px;
        display:flex;
        justify-content:center;
        align-items:center;
        overflow:hidden;
        margin-bottom:20px;
    }

    .imagen-producto img{
        width:100%;
        height:100%;
        object-fit:contain;
    }
    /* Reducir textos de cuadernos */

    .bienvenida h2{
        font-size:35px;
    }

    .bienvenida p{
        font-size:16px;
    }


    .proximamente{
        margin:40px auto;
        padding:30px 20px;
    }


    .proximamente h2{
        font-size:35px;
    }


    .proximamente > p{
        font-size:16px;
    }
    /* CUADERNOS - TARJETAS MÁS PEQUEÑAS */

    .producto{
        padding:20px;
    }

    .producto h3{
        font-size:25px;
        margin-bottom:10px;
    }

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

    .producto label{
        font-size:15px;
    }

    .producto select{
        padding:8px;
        font-size:14px;
    }

    .btn-carrito{
        padding:12px 20px;
        font-size:15px;
    }
    /* PRODUCTOS BRISA */

    .productos{

        width:90%;
        max-width:1200px;
        margin:60px auto;

        display:grid;

        grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

        gap:30px;

    }
   /* ========================================= */
/* GALERÍA DEL ARCHIVADOR */
/* ========================================= */

.galeria-archivador {

    width:100%;

    display:flex;

    align-items:center;

    justify-content:center;

}


.galeria-archivador img {

    width:100%;

    height:280px;

    object-fit:contain;

    border-radius:12px;

}


/* ========================================= */
/* QUITAR FLECHAS DEL CARRUSEL */
/* ========================================= */

.flecha-archivador {

    display:none !important;

}


.flecha-archivador.izquierda {

    display:none !important;

}


.flecha-archivador.derecha {

    display:none !important;

}


/* ========================================= */
/* QUITAR PUNTOS DEL CARRUSEL */
/* ========================================= */

.puntos-archivador {

    display:none !important;

}


.punto {

    display:none !important;

}


.punto.activo {

    display:none !important;

}

    /* ========================================= */
    /* MÓVIL */
    /* ========================================= */

    @media (max-width: 600px) {

        .galeria-archivador img {
            height: 230px;
        }

        .flecha-archivador {
            width: 34px;
            height: 34px;
            font-size: 24px;
        }

    }
    /* ========================================= */
    /* LIBRETAS */
    /* ========================================= */

    .libretas-card {
        position: relative;
        max-width: 400px;
        margin: auto;
    }


    .galeria-libretas {
        position: relative;
        width: 100%;
        height: 180px;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    .galeria-libretas img {
        max-width: 170px;
        max-height: 170px;
        width: auto;
        height: auto;
        object-fit: contain;
        border-radius: 12px;
    }


    .galeria-libretas .flecha-archivador {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 2;
    }


    .galeria-libretas .flecha-archivador.izquierda {
        left: 8px;
    }


    .galeria-libretas .flecha-archivador.derecha {
        right: 8px;
    }


    .puntos-archivador {
        display: flex;
        justify-content: center;
        gap: 7px;
        margin-top: 10px;
        margin-bottom: 10px;
    }


    .libretas-card label {
        display: block;
        margin-top: 10px;
        margin-bottom: 5px;
    }


    .libretas-card select {
        width: 100%;
        margin-bottom: 10px;
    }


    @media (max-width: 600px) {

        .galeria-libretas {
            height: 150px;
        }

        .galeria-libretas img {
            max-width: 140px;
            max-height: 140px;
        }

    }   
    /* ========================================= */
    /* COLECCIÓN LABIALES */
    /* ========================================= */

    .card-labiales{

        background:#7A1635;

        color:#ffffff;

        border:2px solid #D4AF37;

        border-radius:18px;

        max-width:520px;

        width:90%;

        margin:0 auto;

        padding:35px 30px;

        text-align:center;

        transition:.35s;

    }

    .card-labiales h3{

        color:#ffffff;

        font-size:1.5rem;

        margin-bottom:15px;

    }

    .card-labiales p{

        color:#ffffff;

        font-size:1rem;

        line-height:1.8;

    }

    .card-labiales:hover{

        transform:translateY(-8px);

        box-shadow:0 18px 40px rgba(122,22,53,.35);

        border-color:#e6c76b;

    }
    /* ========================================= */
/* IMAGEN LABIALES */
/* ========================================= */

.card-labiales img{

    width:220px;

    height:220px;

    object-fit:contain;

    display:block;

    margin:0 auto 25px;

}
    /* ========================= */
    /* MODAL PAÍS */
    /* ========================= */

    #modal-pais{

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

        width: 100%;
        height: 100%;

        background: rgba(0,0,0,0.55);

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

        z-index: 9999;

    }


    .ventana-pais{

        background: white;

        width: 350px;

        padding: 35px;

        border-radius: 20px;

        text-align: center;

        box-shadow: 0 20px 50px rgba(0,0,0,0.3);

        border-top: 5px solid #8a2be2;

    }


    .ventana-pais h2{

        font-family: 'Cormorant Garamond', serif;

        font-size: 32px;

        color: #5a174d;

        margin-bottom: 15px;

    }


    .ventana-pais p{

        color: #555;

        margin-bottom: 20px;

    }


    #seleccion-pais{

        width: 100%;

        padding: 12px;

        border-radius: 10px;

        border: 1px solid #ccc;

        margin-bottom: 20px;

        font-size: 15px;

    }



    #boton-continuar-pais{

        width: 100%;

        padding: 12px;

        border: none;

        border-radius: 10px;

        background: #8a2be2;

        color:white;

        font-size:16px;

        cursor:pointer;

    }


    #boton-continuar-pais:hover{

        background:#6b1bb5;

    }
    /* =========================
    COMPÁS Y CALCULADORAS
    ========================= */

    .card{

        background: white;
        text-decoration: none;
        color: #222;

        padding: 20px;

        border-radius: 18px;

        box-shadow: 0 12px 30px rgba(0,0,0,.08);

        transition: .35s;

    }
    .mensaje-utiles{

        margin-top:20px;
        padding:20px;

        background:#f8f2ff;

        border-left:6px solid #8a2be2;

        border-radius:12px;

        color:#444;

        line-height:1.6;

        font-size:17px;
    }
    /* ========================================= */
    /* TARJETA COLECCIÓN LABIALES */
    /* ========================================= */

    .card-labiales{

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

        width:100%;
        max-width:700px;
        min-height:280px;

        margin:0 auto;

        padding:40px;

        background:linear-gradient(135deg,#7A1635,#A12A4D);

        border:2px solid #D4AF37;
        border-radius:25px;

        text-decoration:none;

        box-shadow:0 15px 40px rgba(122,22,53,.30);

        transition:.35s;

    }

    .card-labiales:hover{

        transform:translateY(-8px) scale(1.02);

        box-shadow:0 25px 50px rgba(122,22,53,.40);

    }

    .card-labiales h3{

        color:#fff !important;

        font-size:2rem;

        font-family:'Cormorant Garamond',serif;

        margin-bottom:20px;

        text-align:center;

    }

    .card-labiales p{

        color:#fff !important;

        font-size:1.05rem;

        line-height:1.8;

        text-align:center;

        max-width:520px;

    }
    /* ========================================= */
    /* RECAMBIOS PARA ARCHIVADOR */
    /* ========================================= */

    .producto-recambios{

        background:#fff;

        border-radius:20px;

        padding:30px;

        text-align:center;

        box-shadow:0 12px 30px rgba(0,0,0,.08);

        transition:.35s;

    }

    .producto-recambios:hover{

        transform:translateY(-8px);

        box-shadow:0 20px 40px rgba(0,0,0,.15);

    }

    .producto-recambios img{

        width:220px;

        height:220px;

        object-fit:contain;

        margin-bottom:20px;

    }

    .producto-recambios h3{

        font-family:'Cormorant Garamond',serif;

        font-size:42px;

        color:#7A1635;

        margin-bottom:20px;

    }

    .producto-recambios p{

        font-size:18px;

        line-height:1.8;

        color:#555;

        margin-bottom:15px;

    }

    .producto-recambios .colores{

        color:#8a2be2;

        font-weight:600;

        margin:20px 0;

    }

    .producto-recambios .precio{

        font-size:20px;

        color:#7A1635;

        font-weight:700;

        margin:20px 0;

    }
    /* ===========================
    TARJETA RECAMBIOS BRISA
    =========================== */

    .recambio-card{
        width:320px;
        background:#fff;
        border-radius:20px;
        padding:25px;
        box-shadow:0 8px 25px rgba(0,0,0,.08);
        text-align:center;
        display:flex;
        flex-direction:column;
        justify-content:space-between;
    }

    .recambio-card img{
        width:100%;
        height:220px;
        object-fit:contain;
        margin-bottom:15px;
    }

    .recambio-card h3{
        color:#7b2734;
        font-size:30px;
        font-family:"Cormorant Garamond", serif;
        margin-bottom:15px;
    }

    .recambio-card p{
        font-size:17px;
        line-height:1.7;
        color:#555;
        margin-bottom:12px;
    }

    .recambio-card .destacado{
        color:#8a2be2;
        font-weight:600;
    }

    .recambio-card .precio{
        font-size:34px;
        font-weight:bold;
        color:#7b2734;
        margin:20px 0;
    }

    .recambio-card .btn-carrito{
        width:100%;
        margin-top:auto;
    }
    /* ===========================
    MENSAJE CONSULTAR DISPONIBILIDAD
    =========================== */

    .bienvenida{
        text-align:center;
    }

    .bienvenida .boton{
        display:inline-block;
        margin-top:20px;
    }
    /* ===========================
    CONSULTAR DISPONIBILIDAD
    =========================== */

    .consulta-producto{
        max-width: 900px;
        margin: 60px auto;
        padding: 20px;
        text-align: center;
    }

    .consulta-producto h2{
        margin-bottom: 15px;
    }

    .consulta-producto p{
        margin: 0 auto 25px;
        max-width: 700px;
        line-height: 1.8;
    }

    .consulta-producto .boton{
        display: inline-block;
    }

    /* ========================= */
    /* PRODUCTOS MODA */
    /* ========================= */

    .imagen-mediana{

        width: 220px;

        max-width: 100%;

        height: auto;

        display: block;

        margin: 0 auto 20px;

    }

    .producto{

        max-width: 380px;

        margin: auto;

    }

    .producto h3{

        text-align: center;

    }

    .producto p{

        text-align: center;

    }

    .producto label{

        display: block;

        margin-top: 15px;

    }

    .producto select{

        width: 100%;

        padding: 10px;

        margin: 10px 0 15px;

    }

    .producto button{

        width: 100%;

    }
    /*======================================================
                        BRISA 2026
                ESTILOS GENERALES
    ======================================================*/

    :root{

        --morado:#7d3cff;
        --morado-oscuro:#6427d8;
        --morado-claro:#efe8ff;

        --rosa:#fff8fc;

        --blanco:#ffffff;

        --gris:#666666;
        --gris-claro:#f4f4f4;
        --texto:#2b2b2b;

        --radio:18px;

        --sombra:0 12px 35px rgba(0,0,0,.08);

        --transicion:.30s ease;

    }


    /*==========================
    RESET
    ==========================*/

    *{

        margin:0;

        padding:0;

        box-sizing:border-box;

    }


    html{

        scroll-behavior:smooth;

    }


    body{

        font-family:'Poppins',sans-serif;

        background:#fafafa;

        color:var(--texto);

        line-height:1.7;

    }


    /*==========================
    TEXTOS
    ==========================*/

    h1,
    h2,
    h3{

        font-family:'Cormorant Garamond',serif;

        color:var(--morado);

    }


    h1{

        font-size:52px;

        letter-spacing:2px;

    }


    h2{

        font-size:38px;

        margin-bottom:18px;

    }


    h3{

        font-size:28px;

    }


    p{

        color:var(--gris);

        font-size:17px;

    }


    /*==========================
    ENLACES
    ==========================*/

    a{

        text-decoration:none;

        color:inherit;

    }


    /*==========================
    IMÁGENES
    ==========================*/

    img{

        max-width:100%;

        display:block;

    }


    /*==========================
    BOTONES Y SELECT
    ==========================*/

    button,
    select{

        font-family:'Poppins',sans-serif;

    }


    /*==========================
    CONTENEDOR
    ==========================*/

    .contenedor{

        width:min(1200px,92%);

        margin:auto;

    }
    /*======================================================
                        CABECERA
    ======================================================*/

    .cabecera{

        background:linear-gradient(135deg,#ffffff,#f7f1ff);

        text-align:center;

        padding:55px 20px 45px;

        border-bottom:1px solid #ececec;

    }


    .logo{

        display:flex;

        justify-content:center;

        margin-bottom:20px;

    }


    .logo img{

        width:120px;

        height:120px;

        object-fit:cover;

        border-radius:50%;

        background:#fff;

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

        transition:.35s;

    }


    .logo img:hover{

        transform:scale(1.05);

    }


    .cabecera h1{

        font-size:52px;

        margin-bottom:10px;

        color:var(--morado);

    }


    .eslogan{

        max-width:700px;

        margin:0 auto 30px;

        font-size:19px;

        color:#666;

        line-height:1.7;

    }


    /*======================================================
                        BOTONES
    ======================================================*/

    .boton{

        display:inline-block;

        margin:8px;

        padding:14px 28px;

        background:var(--morado);

        color:#fff;

        border-radius:40px;

        font-weight:600;

        transition:var(--transicion);

        box-shadow:0 8px 20px rgba(125,60,255,.25);

    }


    .boton:hover{

        background:var(--morado-oscuro);

        transform:translateY(-3px);

    }


    /*======================================================
                    MENSAJES ESPECIALES
    ======================================================*/

    .mensaje-utiles{

        max-width:900px;

        margin:30px auto;

        padding:25px;

        background:#ffffff;

        border-left:6px solid var(--morado);

        border-radius:15px;

        box-shadow:var(--sombra);

        font-size:17px;

        line-height:1.8;

    }   
 /*======================================================
                        MENÚ
======================================================*/

nav{

    width:100%;

    background:#ffffff;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

    padding:18px 15px;

    box-shadow:0 5px 18px rgba(0,0,0,.06);

   position:fixed;

top:0;

left:0;

z-index:9999;

}


nav a{

    text-decoration:none;

    color:var(--texto);

    font-weight:600;

    padding:10px 18px;

    border-radius:30px;

    transition:var(--transicion);

    width:auto;

}


nav a:hover{

    background:var(--morado);

    color:white;

}

    /*======================================================
                        BANNER GENERAL
    ======================================================*/

    .banner{

        width:100%;

        display:flex;

        justify-content:center;

        align-items:center;

        margin:35px auto 55px;

        padding:0 20px;

    }

    .banner img{

        width:100%;

        max-width:1000px;

        height:340px;

        object-fit:cover;

        border-radius:22px;

        box-shadow:0 18px 40px rgba(0,0,0,.12);

    }


    /*======================================================
                    BANNER DETALLES
    ======================================================*/

    body:has(title),
    .banner img{

        transition:.35s;

    }

    /* Solo para la página Detalles */

    body .banner img[src*="detalles"]{

        max-width:760px;

        height:250px;

    }


    /*======================================================
                    BANNER MAQUILLAJE
    ======================================================*/

    body .banner img[src*="maquillaje"]{

        max-width:900px;

        height:300px;

    }


    /*======================================================
                    BANNER PAPELERÍA
    ======================================================*/

    body .banner img[src*="papeleria"]{

        max-width:950px;

        height:300px;

    }


    /*======================================================
                    EFECTO HOVER
    ======================================================*/

    .banner img:hover{

        transform:scale(1.01);

    }
    /*======================================================
                        TARJETAS
    ======================================================*/

    .categorias{

        width:min(1250px,94%);

        margin:50px auto;

        display:grid;

        grid-template-columns:repeat(auto-fit,minmax(290px,1fr));

        gap:28px;

    }


    .card{

        background:#ffffff;

        border-radius:22px;

        padding:28px;

        box-shadow:0 10px 30px rgba(0,0,0,.08);

        transition:all .35s ease;

        text-align:center;

        overflow:hidden;

        position:relative;

    }


    .card:hover{

        transform:translateY(-8px);

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

    }


    .card h3{

        margin:18px 0 12px;

        color:var(--morado);

        font-size:30px;

    }


    .card p{

        color:#666;

        line-height:1.8;

        margin-bottom:18px;

    }


    /*======================================================
                        PRODUCTOS
    ======================================================*/

    .producto{

        display:flex;

        flex-direction:column;

        justify-content:space-between;

    }


    .producto img{

        width:100%;

        height:250px;

        object-fit:contain;

        padding:15px;

        transition:.35s;

    }


    .producto:hover img{

        transform:scale(1.05);

    }


    /*======================================================
                    PRECIOS
    ======================================================*/

    .producto h3:last-of-type{

        font-size:34px;

        color:var(--morado);

        margin:18px 0;

    }


    /*======================================================
                    SELECT
    ======================================================*/

    .producto label{

        margin-top:15px;

        font-weight:600;

        color:#555;

    }


    .producto select{

        width:100%;

        padding:12px;

        margin-top:8px;

        margin-bottom:18px;

        border:1px solid #ddd;

        border-radius:12px;

        background:#fff;

        font-size:15px;

        transition:.25s;

    }


    .producto select:focus{

        outline:none;

        border-color:var(--morado);

    }
    /*======================================================
                    BOTONES DE PRODUCTOS
    ======================================================*/

    .btn-carrito{

        width:100%;

        margin-top:18px;

        padding:14px;

        border:none;

        border-radius:14px;

        background:linear-gradient(135deg,var(--morado),var(--morado-oscuro));

        color:#fff;

        font-size:16px;

        font-weight:600;

        cursor:pointer;

        transition:all .30s ease;

        box-shadow:0 10px 25px rgba(125,60,255,.25);

    }

    .btn-carrito:hover{

        transform:translateY(-3px);

        box-shadow:0 18px 35px rgba(125,60,255,.35);

    }

    .btn-carrito:active{

        transform:scale(.98);

    }


    /*======================================================
                    BOTONES GENERALES
    ======================================================*/

    .boton{

        display:inline-flex;

        justify-content:center;

        align-items:center;

        gap:8px;

        min-width:180px;

    }


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

    .whatsapp-flotante{

        position:fixed;

        right:22px;

        bottom:22px;

        width:68px;

        height:68px;

        border-radius:50%;

        background:#25D366;

        color:white;

        display:flex;

        justify-content:center;

        align-items:center;

        font-size:34px;

        text-decoration:none;

        box-shadow:0 12px 30px rgba(0,0,0,.25);

        z-index:9999;

        transition:.30s;

    }

    .whatsapp-flotante:hover{

        transform:scale(1.12);

    }


    /*======================================================
                MENSAJE PRODUCTO AÑADIDO
    ======================================================*/

    #mensaje-carrito{

        position:fixed;

        left:50%;

        bottom:35px;

        transform:translateX(-50%);

        background:var(--morado);

        color:white;

        padding:16px 28px;

        border-radius:50px;

        font-weight:600;

        opacity:0;

        visibility:hidden;

        transition:.35s;

        z-index:99999;

        box-shadow:0 12px 30px rgba(0,0,0,.20);

    }


    /* El JS añade esta clase */

    #mensaje-carrito.mostrar{

        opacity:1;

        visibility:visible;

    }


    /*======================================================
                    BOTONES PEQUEÑOS
    ======================================================*/

    button{

        outline:none;

    }

    button:hover{

        cursor:pointer;

    }
    /*======================================================
                        TABLETS
    ======================================================*/

    @media (max-width:992px){

        h1{

            font-size:42px;

        }

        h2{

            font-size:32px;

        }

        h3{

            font-size:24px;

        }

        .cabecera{

            padding:45px 20px;

        }

        .logo img{

            width:100px;

            height:100px;

        }

        .banner img{

            max-width:100%;

            height:260px;

        }

        .categorias{

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

            gap:22px;

        }

    }


    /*======================================================
   /*======================================================
                    MÓVILES
======================================================*/

@media (max-width:768px){

    body{

        overflow-x:hidden;

    }

    h1{

        font-size:34px;
        line-height:1.2;

    }

    h2{

        font-size:28px;

    }

    h3{

        font-size:22px;

    }

    p{

        font-size:15px;

    }

    .cabecera{

        padding:35px 18px;

    }

    .logo img{

        width:85px;
        height:85px;

    }

    .eslogan{

        font-size:16px;

    }

    .banner{

        padding:0 12px;
        margin:20px auto 35px;

    }

    .banner img{

        width:100%;
        height:180px;
        border-radius:18px;

    }

    .categorias{

        grid-template-columns:1fr;
        gap:20px;
        width:94%;

    }

    .card{

        padding:22px;

    }

    .producto img{

        height:210px;

    }

    .boton{

        width:100%;
        margin:8px 0;

    }

    .btn-carrito{

        font-size:15px;
        padding:14px;

    }

    select{

        font-size:15px;

    }

    .mensaje-utiles{

        padding:18px;
        font-size:15px;

    }

    .whatsapp-flotante{

        width:58px;
        height:58px;
        font-size:28px;
        right:15px;
        bottom:15px;

    }

}

/*======================================================
                MÓVILES PEQUEÑOS
======================================================*/

@media (max-width:480px){

    h1{

        font-size:28px;

    }

    h2{

        font-size:24px;

    }

    h3{

        font-size:20px;

    }

    .logo img{

        width:75px;
        height:75px;

    }

    .banner img{

        height:150px;

    }

    .producto img{

        height:180px;

    }

    .card{

        padding:18px;
        border-radius:18px;

    }

}
    
  /* =========================
   MENSAJE PRODUCTO AÑADIDO
========================= */

#mensaje-carrito {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);

    background: #6c2cff;
    color: white;

    padding: 14px 24px;
    border-radius: 12px;

    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 500;

    opacity: 0;
    visibility: hidden;

    transition: all 0.3s ease;

    z-index: 9999;

    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}

#mensaje-carrito.mostrar {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}