*{
            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');*/

        h1, h2, h3, .section-title{
            font-family:'Playfair Display', serif;
            font-weight:600;
            letter-spacing:0.5px;
        }

        .hero-title,
        .hero-subtitle,
        .hero-author,
        .hero-small{
            font-family:'Yellowtail', cursive;
        }

        h2 {
            font-family: 'Yellowtail', cursive;
            color: #ED5752;              /* Mantiene el color rojo que quieres */
            font-size: 4.5rem;             /*Ajusta el tamaño de la letra */
            letter-spacing: 20px;         /* Más espacio entre letras */
            font-weight: 600;            /* Grosor de la letra */
            /*-webkit-text-stroke: 0.5px black;  Borde fino negro alrededor de cada letra */
            text-transform: uppercase;   /* Opcional: poner todas las letras en mayúscula */
        }


        nav{
            display:flex;
            justify-content:space-between;
            align-items:center;
            padding:15px 10%;
        }

        nav h1{
            color: #EFE6D8;
            font-weight:700;
        }

        nav ul{
            list-style:none;
            display:flex;
            gap:30px;
        }

        nav ul li a{
            text-decoration:none;
            color:#333;
            font-weight:500;
            transition:0.3s;
        }

        nav ul li a:hover{
            color:#ED5752; 
        }

        /* ============================= */
        /* HERO PRINCIPAL: TITULO, TEXTO, AUTORA */
        /* ============================= */

        /* CONTENEDOR HERO */
        .hero {
            height: 100vh; /* Ocupa toda la pantalla */
            background: linear-gradient(135deg, #E2DFA2, #E2DFA2); /* Fondo degradado */
            display: flex; /* Flexbox para centrar elementos */
            flex-direction: column; /* Apila verticalmente */
            justify-content: center; /* Centrado vertical */
            align-items: center; /* Centrado horizontal */
            text-align: center; /* Texto centrado */
            padding: 20px; /* Espacio interno */
        }

        /* TITULO PRINCIPAL */
        .hero-title { 
            font-family: 'Yellowtail', cursive; /* Tipografía decorativa */
            color: #ED5752;                     /* Color rojo */
            font-size: clamp(4rem, 10vw, 20rem); /* Escala según pantalla */
            letter-spacing: 0.20em;             /* Espacio entre letras */
            font-weight: 550;                    /* Grosor */
            text-transform: capitalize;          /* Primera letra mayúscula */
            line-height: 1.1;                    /* Altura de línea */
            margin-bottom: 100px;                 /* Separación abajo */
        }

        /* SUBTITULO / PEQUEÑAS HISTORIAS */
        .hero-subtitle {
            font-family: 'Yellowtail', cursive;   /* Tipografía decorativa */
            color: #ED5752;                       /* Color rojo intenso */
            font-size: clamp(1.5rem, 4vw, 2.5rem); /* Escala automáticamente en móviles y tablets */
            line-height: 1.2;                     /* Mejora lectura */
            text-align: center;                    /* Centrado horizontal */
            margin-bottom: 10px;                  /* Separación debajo */
            font-weight: 500;                    /* Grosor */
        }

        /* NOMBRE AUTORA */
        .hero-author {
            font-family: 'Yellowtail', cursive;   /* Tipografía decorativa */
            color: #ED5752;                       /* Color rojo intenso */
            font-size: clamp(1.8rem, 5vw, 2rem);  /* Escala automáticamente */
            line-height: 1.2;                     /* Separación de líneas */
            text-align: center;                    /* Centrado horizontal */
            margin-top: 10px;                      /* Separación superior */
            font-weight: 450;                    /* Grosor */
        }

        /* 'por' - tamaño más pequeño */
        .hero-small {
            font-family: 'Yellowtail', cursive;
            color: #ED5752;
            font-size: clamp(1rem, 2.5vw, 1.5rem); /* tamaño más chico */
            text-align: center;
            margin: 0;
            font-weight: 439;                    /* Grosor */
        }


        /*pequeñas historias.... letra*/
        /* TEXTO DEL HERO */
        .hero p{
            max-width:600px; /* limita el ancho del texto para que sea legible */
            margin-bottom:30px; /* espacio debajo del párrafo */
            font-size:1.8rem; /* tamaño del texto */
            color:#ED5752; /* color del texto */
            font-family:'Yellowtail', cursive; /* tipografía decorativa */
            text-align:center; /* centra el texto */
        }




        .btn{
            padding:15px 30px;
            background:white;
            color:#EFE6D8;
            border:none;
            border-radius:30px;
            font-weight:600;
            cursor:pointer;
            transition:0.3s;
            
        }

        .btn:hover{
            background:#028090;
            color:white;
        
        }


        /* ESTILO TITULOS DE COLUMNA */
        .titulo-columna {
            text-align: center;     /* centra el h3 */
            color: #ED5752;         /* color rojo fuerte */
            margin-bottom: 20px;    /* espacio debajo del h3 */
            font-size: 1.8rem;      /* tamaño del título */
        }

        /* --- LI CON FLEXBOX PARA ALINEACIÓN PERFECTA --- */
        .objetivos-list li,
        .valores-list li{
            display:grid;   /* convierte cada elemento de lista en una estructura de grilla */
            grid-template-columns:26px 1fr; /* crea dos columnas: primera columna fija para el icono
                                            segunda columna flexible para el texto */
            align-items:start; /* alinea el icono con la parte superior del texto */
            column-gap:12px; /* espacio horizontal entre el icono y el texto */
            margin-bottom:18px; /* separación vertical entre cada punto de la lista */
            font-family: Georgia, "Times New Roman", serif; /* aplica la tipografía literaria */
            font-size:20px; /* tamaño de letra uniforme */
            line-height:1.6; /* altura de línea controlada para que el texto no empuje el icono */
            color:#333; /* color del texto */
        }


        .objetivos-list li img,
        .valores-list li img{
            width:20px; /* define el ancho del icono */
            height:20px; /* define el alto del icono */
            margin-top:-2px; /* mueve el icono ligeramente hacia arriba para alinearlo
                                exactamente con la primera línea del texto */
            display:block; /* evita que la imagen se comporte como carácter de texto */
            object-fit:contain; /* asegura que el icono mantenga proporción */
        }


        .objetivos-list,
        .valores-list{
            list-style:none; /* elimina las viñetas automáticas del navegador */
            padding-left:0; /* elimina la sangría izquierda del UL */
            margin:0; /* elimina márgenes por defecto del navegador */
        }

        /* HISTORIA DE INSTANTES */

        .historia{
            max-width:800px; /* limita el ancho del texto para que no sea demasiado largo al leer */
            margin:auto; /* centra el contenido horizontalmente en la pantalla */
            padding:40px; /* espacio interior alrededor del texto para que respire */
        }

        .texto-historia{
            font-size:20px; /* tamaño de letra cómodo para lectura */
            line-height:1.8; /* espacio entre líneas para que el texto no quede apretado */
            color:#333; /* color gris oscuro más suave que el negro */
            text-align:justify; /* alinea el texto como en los libros, bordes rectos a ambos lados */
            text-indent:30px; /* agrega sangría al inicio del párrafo como en novelas */
            margin-bottom:25px; /* espacio debajo del párrafo */
            font-family: Georgia, "Times New Roman", serif; /* tipografía estilo editorial/literatura */
            letter-spacing:0.3px; /* separa levemente las letras para mejorar la lectura */
        }



        /* SECCIONES */
        section{
            padding:100px 10%;
        }

        .section-title{
            text-align:center;
            margin-bottom:50px;
            font-size:2rem;
            color:black;
        }

        /* --- CONTENEDOR DE TODA LA SECCIÓN --- */
        .cards {
            max-width: 1100px;       /* ancho máximo para que no se estire demasiado */
            margin: 0 auto;           /* centrado horizontal */
            padding: 40px 20px;       /* espacio interno */
        }

        /* --- CADA TARJETA INDIVIDUAL --- */
        .card {
            display: flex;             /* permite dividir en columnas: imagen + texto */
            align-items: center;       /* alinea verticalmente la imagen con el texto */
            gap: 30px;                 /* separación entre imagen y texto */
            background-color: #A1BE95;    /* fondo blanco premium */
            padding: 30px;             /* espacio interno de la tarjeta */
            border-radius: 15px;       /* bordes redondeados */
            box-shadow: 0 8px 20px rgba(0,0,0,0.1); /* sombra delicada */
            flex-wrap: wrap;           /* se adapta en móviles */
        }

        /* --- TITULO PRINCIPAL DE LA TARJETA --- */
        .card .section-title {
            width: 100%;               /* ocupa todo el ancho para estar arriba */
            text-align: center;        /* centrado */
            color: #ED5752;            /* color destacado */
            font-size: 2rem;           /* tamaño grande */
            margin-bottom: 20px;       /* espacio debajo del título */
        }

        /* --- COLUMNA IMAGEN --- */
        .card-imagen {
            flex: 1;                   /* ocupa mitad del espacio disponible */
            min-width: 250px;          /* mínimo para que no se achique demasiado */
            display: flex;
            justify-content: center;   /* centra la imagen dentro de la columna */
        }

        .card-imagen img {
            max-width: 100%;           /* que la imagen no exceda el ancho de la columna */
            border-radius: 12px;       /* bordes suaves */
            box-shadow: 0 6px 18px rgba(0,0,0,0.15); /* sombra delicada para look premium */
            transition: transform 0.3s, box-shadow 0.3s; /* animación al hover */
        }

        .card-imagen img:hover {
            transform: scale(1.03);    /* efecto ligero de zoom al pasar mouse */
            box-shadow: 0 10px 25px rgba(0,0,0,0.2); /* sombra más marcada */
        }

        /* --- COLUMNA TEXTO --- */
        .card-texto {
            flex: 1;                   /* ocupa la otra mitad */
            min-width: 250px;
        }

        .card-texto h3 {
            font-family: Georgia, "Times New Roman", serif; /* letra estilo literario */
            font-size: 1.5rem;
            margin-bottom: 15px;
            color: #333;
        }

        .card-texto p {
            font-family: Georgia, "Times New Roman", serif;
            font-size: 1rem;
            line-height: 1.6;
            color: #444;
            margin-bottom: 20px;
        }

        /* --- BOTÓN / ICONO --- */
        .boton-card img {
            transition: transform 0.3s; /* efecto hover */
        }

        .boton-card img:hover {
            transform: scale(1.1);      /* aumenta ligeramente al pasar mouse */
        }
        .productos-container{
            display:flex;
            gap:40px;
            justify-content:center;

        
        }

        .columna{
            width:50%;
            display:flex;
            flex-direction:column;
            gap:30px;
        }

        .social{
            list-style: none;      /* ❌ quita los puntos */
            padding: 0;            /* quita espacio interno */
            margin: 0;
            
            display: flex;
            flex-direction: column;  /* 👈 uno debajo del otro */
            align-items: center;     /* centrados */
            gap: 15px;               /* espacio entre iconos */
        }


        /* 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;
        }

        /* ============================= */
        /* MEDIA QUERY: COMPUTADORAS (>1024px) */
        /* ============================= */
        @media(min-width: 1024px) {
            .hero-title {
                font-size: 7rem;   /* Tamaño fijo del título en PC */
            }

            .hero-subtitle {
                font-size: 2.2rem; /* Tamaño fijo del subtítulo en PC */
            }

            .hero-author {
                font-size: 2.5rem; /* Tamaño fijo del nombre autora en PC */
            }

        
        }

        /* ============================= */
        /* MEDIA QUERY: TABLETS (768px - 1023px) */
        /* ============================= */
        @media(min-width: 768px) and (max-width: 1023px) {
            .hero-title {
                font-size: 5.5rem; /* Ajuste para tablets */
            }

            .hero-subtitle {
                font-size: 2rem;
            }

            .hero-author {
                font-size: 2rem;
            }
        }

        /* ============================= */
        /* MEDIA QUERY: MÓVILES (<768px) */
        /* ============================= */
        @media(max-width: 767px) {
            .hero-title {
                font-size: clamp(5rem, 12vw, 8rem); /* más grande para móviles */
            }
            .hero-subtitle {
                font-size: clamp(2rem, 6vw, 3rem);
            }
            .hero-author {
                font-size: clamp(1.5rem, 5vw, 2rem);
            }
            .hero-small {
                font-size: clamp(1rem, 3vw, 1.5rem);
            }
        }

        /* ============================= */
        /* 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;
            
        
        }
        /* Historias para reflexionar... visto desde compu */
        /* HERO TEXTO ADAPTATIVO 
        .hero p{*/
            /*max-width:700px;                Limita el ancho del texto para que sea legible */
            /*margin-bottom:30px;             Espacio debajo del párrafo */
            /*padding:0 20px;                 Espacio lateral para que no toque bordes */
            /*font-size:clamp(1.4rem,3vw,2.5rem); /* Tamaño adaptable: mínimo 1.4rem, máximo 2.5rem */
            /*color:#ED5752;                 /* Color rojo elegante */
            /*font-family:'Yellowtail', cursive; /* Tipografía decorativa */
            /*text-align:center;             /* Centra el texto */
            /*line-height:1.3;               /* Espaciado entre líneas, mejor lectura */
        /*}*/

        .hero h2.show{
            opacity:1;
            transform:translateY(0);
            /*transition-delay:0.2s;*/
        }

        .hero p.show{
            opacity:1;
            transform:translateY(0);
            /*transition-delay:0.5s;*/
        }

        .hero .btn.show{
            opacity:1;
            transform:translateY(0);
            /*transition-delay:0.8s;*/
            animation:buttonBounce 1s ease;
        }

        /* Efecto leve de bounce para botón */
        @keyframes buttonBounce{
            0%{transform:translateY(20px);}
            50%{transform:translateY(-5px);}
            70%{transform:translateY(2px);}
            100%{transform:translateY(0);}
        }

        /* 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;
        }