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

        body{
            background:#E2DFA2;
            color:#333;
            font-family:'Montserrat', sans-serif;
            padding-top: 100px; /* altura real de tu header */
        }

        /* CABECERA */
        header{
            position: fixed;
            top: 0;
            left: 0;
            width:100%;
            background:rgba(255,255,255,0.95);
            backdrop-filter: blur(8px);
            box-shadow:0 2px 10px rgba(0,0,0,0.05);
            z-index:1000;
        }

        /* Barra */
        .linea-cuerpo{
            width: 100%;
            height: 1cm; /* aunque recomiendo px */
            background-color: #92AAC7;
        }

        /*@import url('https://fonts.googleapis.com/css2?family=Yellowtail&display=swap');*/

       

      

      


        /* FOOTER GENERAL */
        footer{
            background:#92AAC7;
            color:black;
            padding:40px 20px; /* 🔧 más pequeño */
            font-family: Georgia, "Times New Roman", serif;
            text-align:center; /* 🔧 centra TODO */
        }

        /* CONTENEDOR */
        .footer-container{
            max-width:900px;
            margin:auto;
        }

        /* CONTACTO */
        .footer-contacto h3{
            margin-bottom:15px;
        }

        /* CONTENEDOR DE TODOS LOS ICONOS */
        /* CONTENEDOR */
        .boton-correo-container{
        display:flex;                 /* pone todo en fila */
        justify-content:center;       /* centra los iconos */
        align-items:center;           /* alinea verticalmente */
        gap:20px;                     /* mismo espacio REAL entre todos */
        margin:30px 0;
        }

        /* BASE PARA TODOS */
        .social-icon{
            width:75px;                 /* tamaño base uniforme */
            height:75px;
            object-fit:contain;         /* mantiene proporción */
            transition:0.3s;
        }

        /* HOVER GENERAL */
        .social-icon:hover{
            transform:scale(1.15);    /* acá sí está bien usar scale */
        }

        /* JUNTA O SEPARA LOS ICONOS DE FACE, INST Y VENTA */
        .social-group{
            display:flex;      /* fila */
            gap:3px;          /* mismo espacio entre FB, IG y tienda */
            align-items:center;
        }

        /* FACEBOOK (más chico REAL, no visual) */
        .facebook-icon{
            width:40px;                 /* antes usabas scale ❌ */
            height:40px;
        }

        /* 🔥 clave */
        .facebook-icon:hover{
            transform:scale(1.1); /* crece poquito desde su base */
        }

        /* TIENDA */
        .vent-icon{
            width:57px;
            height:57px;
        }

        /* 🔥 clave */
        .vent-icon:hover{
            transform:scale(1.2); /* crece poquito desde su base */
        }

        /* BOTÓN CORREO */
        .email-button-premium{
            width:60px;                  /* igualarlo al resto */
            height:60px;
            display:flex;
            align-items:center;
            justify-content:center;
            background: linear-gradient(135deg, #ED5752, #FF7A5C);
            border-radius:50%;
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            transition: all 0.4s ease;
            
        }


        /* ICONO DEL SVG */
        .email-icon-premium{
            width:28px;
            height:28px;
            fill:white;
        }

        /* PARTE INFERIOR */
        .footer-bottom{
            max-width:700px;
            margin:25px auto 0 auto;
            padding-top:15px;
            border-top:1px solid rgba(0,0,0,0.2);
        }

        /* TEXTOS */
        .copyright-text,
        .developer{
            font-size:14px;   /* 🔧 más chico */
            margin-bottom:10px;
        }

    /* FINAL FOOTER*/



    /* RESPONSIVE NAV 
    @media(max-width:768px){
        nav ul{
            display:none;
        }
    }*/

        /*###################################*/
        /* BOTON FLOTANTE DE WHATSAPP */
        /*###################################*/
        /* BOTÓN FLotANTE DE WHATSAPP */
        .whatsapp-float{
            position:fixed;
            width:60px;
            height:60px;
            bottom:30px;
            right:30px;
            background-color:#EFE6D8;
            color:#fff;
            border-radius:50%;
            text-align:center;
            box-shadow:0 5px 15px rgba(0,0,0,0.3);
            z-index:1001;
            transition:0.3s;
            display:flex;
            justify-content:center;
            align-items:center;
        }

        .whatsapp-float:hover{
            transform:scale(1.1);
        }

        .whatsapp-float img{
            width:35px;
            height:35px;
        }

        /* ============================= */
        /* MENU HAMBURGUESA PREMIUM FIX */
        /* ============================= */

        /* Icono hamburguesa */
        .menu-toggle{
            display:none;
            flex-direction:column;
            cursor:pointer;
            gap:5px;
            z-index:1100;
        }

        .menu-toggle span{
            width:25px;
            height:3px;
            background:#EFE6D8;
            border-radius:2px;
            transition:0.4s;
        }

        /* Animación a X */
        .menu-toggle.active span:nth-child(1){
            transform: rotate(45deg) translate(5px, 5px);
        }

        .menu-toggle.active span:nth-child(2){
            opacity:0;
        }

        .menu-toggle.active span:nth-child(3){
            transform: rotate(-45deg) translate(6px, -6px);
        }

        /* Lista normal escritorio */
        .nav-list{
            display:flex;
            gap:30px;
        }

       

        /* ============================= */
        /* VERSIÓN MÓVIL */
        /* ============================= */

        @media(max-width:768px){

            /* Oculta menú de escritorio */
            nav ul{
                display:none;
            }

            .menu-toggle{
                display:flex;
            }

            .menu-logo img {
            display: block;       /* se ve */
            margin: 0 auto 15px;  /* centrado y espacio debajo */
            width: 120px;         /* ajusta tamaño si quieres */
            }

            .menu-toggle{
                display:flex;
            }

            /* Estilo hamburguesa minimalista */
            .menu-toggle span {
                width: 25px;
                height: 3px;
                background: black;
                border-radius: 2px;
            }

            /* Menú desplegable móvil */
            .nav-list{
                position: fixed;
                top: 60px;  /* debajo del logo */
                right: 10px;
                width: 200px;       /* ancho profesional y compacto */
                background: #E2DFA2;
                border-radius: 10px;
                padding: 15px 10px;
                display: flex;
                flex-direction: column;
                gap: 12px;
                opacity: 0;
                pointer-events: none;
                transition: 0.3s ease;
                z-index: 1050;
                box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            }

            .nav-list{
                position: fixed;       /* flota sobre contenido */
                top: 20px;             /* un poco abajo de la pantalla */
                right: 0;              /* pegado al borde derecho */
                width: 220px;          /* ancho del menú */
                height: auto;          /* altura se ajusta al contenido */
                background: #E2DFA2;
                border-radius: 10px;   /* bordes suaves */
                padding: 20px;         /* espacio interno */
                display: flex;
                flex-direction: column; 
                align-items: center;
                gap: 15px;

                opacity: 0;
                pointer-events: none;
                transition: 0.3s ease;
                z-index: 1050;
            }

            .nav-list.active{
                opacity: 1;
                pointer-events: auto;
            }

            .nav-list li{
                    list-style: none;
            }

            .nav-list li a{
                text-decoration: none;
                color: black;
                font-weight: 500;
                font-size: 1rem;
                padding: 8px 10px;
                border-radius: 8px;
                transition: background 0.3s ease, color 0.3s ease;
                display: block;
                text-align: center;
            }

            .nav-list li a:hover{
                background: #d9cfa0;
                color: #000;
            }

            .nav-btn{
                display:block;
                width:100%;
                text-align:center;
                padding:16px 20px;
                border-radius:50px;
                background:white;
                color: black;
                font-weight:600;
                text-decoration:none;
                box-shadow:0 10px 25px rgba(0,0,0,0.2);
                transition:0.3s ease;
            }

            .nav-btn:hover{
                background:#EFE6D8;
                color:white;
            }

            .productos-container{
                flex-direction:column;
            }

            .columna{
                width:100%;
            }
        }

        /* PC (>1024px) */
        @media(min-width:1024px) {
            .hero-title { font-size: 7rem; }
            .hero-subtitle { font-size: 2.5rem; }
            .hero-author { font-size: 2rem; }
            .hero-small { font-size: 1.5rem; }
        }

        /* Tablet (768px - 1023px) */
        @media(min-width:768px) and (max-width:1023px) {
            .hero-title { font-size: 5.5rem; }
            .hero-subtitle { font-size: 2rem; }
            .hero-author { font-size: 1.8rem; }
            .hero-small { font-size: 1.3rem; }
        }

        /* Móvil (<768px) */
        @media(max-width:767px) {
            .hero-title { font-size: 5rem; }   /* ahora sí grande */
            .hero-subtitle { font-size: 2rem; }
            .hero-author { font-size: 1.8rem; }
            .hero-small { font-size: 1.2rem; }
        }

        /* Animaciones Hero */
        .hero h2, .hero p, .hero .btn{
            opacity:0;
            transform:translateY(20px);
            transition:all 0.8s ease-out;
            
        
        }
 



        /* Botones estilo premium */
        .btn{
            display:inline-block;
            padding:15px 30px;
            background:#EFE6D8;
            color:white;
            font-weight:600;
            border:none;
            border-radius:50px;
            text-decoration:none;
            cursor:pointer;
            transition:all 0.3s ease;
            position:relative;
            overflow:hidden;
            box-shadow:0 5px 15px rgba(0,0,0,0.1);
        }

        .btn:hover{
            background:#EFE6D8;
            box-shadow:0 8px 20px rgba(0,0,0,0.2);
        }

        .btn::after{
            content:'';
            position:absolute;
            top:0; left:0;
            width:100%;
            height:100%;
            background:rgba(255,255,255,0.1);
            transition:0.3s;
            border-radius:50px;
            z-index:0;
        }

        .btn:hover::after{
            background:rgba(255,255,255,0.2);
        }

        /* CONTENEDOR DEL BOTÓN */
        .boton-correo-container{
            display:flex;
            justify-content:center;
            align-items:center;
            margin:30px 0;
            position:relative;
            z-index:1000;
        }

        /* BOTÓN PREMIUM */
        .email-button-premium{
            width:50px;
            height:50px;
            background: linear-gradient(135deg, #ED5752, #FF7A5C);
            border-radius:50%;
            display:flex;
            align-items:center;
            justify-content:center;
            text-decoration:none;
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
        }

        /* EFECTO HOVER */
        .email-button-premium:hover{
            transform: translateY(-6px) scale(1.1);
            box-shadow: 0 20px 50px rgba(0,0,0,0.3);
            background: linear-gradient(135deg, #FF7A5C, #ED5752);
        }

        /* SVG ICONO */
        .email-icon-premium{
            width:32px;
            height:32px;
            fill:black;
            transition: fill 0.35s ease, transform 0.35s ease;
        }

        /* BOTON CORREO */
        /* EFECTO HOVER ICONO */
        .email-button-premium:hover .email-icon-premium{
            fill:#fffacd; /* color suave al pasar mouse */
            transform: rotate(-10deg) scale(1.1);
        }

        /* BURBUJAS ANIMADAS (opcional para más premium) */
        .email-button-premium::before{
            content:'';
            position:absolute;
            width:150%;
            height:150%;
            background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
            top:-25%;
            left:-25%;
            border-radius:50%;
            opacity:0;
            transition: all 0.5s ease;
        }

        .email-button-premium:hover::before{
            opacity:1;
            transform: scale(1.1);
        }

        /* RESPONSIVE */
        @media(max-width:768px){
        .email-button-premium{
            width:50px;
            height:50px;
        }
        .email-icon-premium{
            width:26px;
            height:26px;
        }
        }

        /* COOKIE */
        .cookie-banner{
            position:fixed;
            bottom:0;
            left:0;
            width:100%;
            background:#111;
            color:white;
            padding:15px;
            display:flex;
            justify-content:space-between;
            align-items:center;
            flex-wrap:wrap;
            z-index:9999;
            font-size:14px;
        }

        .cookie-banner a{
            color:#ccc;
            text-decoration:underline;
        }

        .cookie-buttons button{
            margin-left:10px;
            padding:8px 14px;
            border:none;
            cursor:pointer;
            border-radius:4px;
        }

        .cookie-buttons button:first-child{
            background:#4CAF50;
            color:white;
        }

        .cookie-buttons button:last-child{
            background:#444;
            color:white;
        }