:root {
  --verde-oscuro: hsl(156, 40%, 32%);
  --verde-medio: #2d6a4f;
  --verde: #0bce52;
  --verde-claro: #74c69d;
  --verde-suave: #b7e4c7;
}

/* --- FONDO GLOBAL CON DEGRADADO (Marca Biofont) --- */
body {
  font-family: 'Segoe UI', Arial;
  margin: 0;
  background: radial-gradient(circle at 15% 15%, #ffffff 0%, #ffffff 100%);
   overflow-x: hidden;
   min-height: 100vh;
}

/* HEADER */
header {
  background: white;
  border-bottom: none;
  box-shadow: none;

  position: fixed;
  top: 25px !important;
  width: 100%;
   z-index: 9999; /* 🔥 más alto que TODO */
}

/* NAV */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 15px arriba/abajo da un aire elegante sin ser gigante */
  padding: 10px 40px 10px 40px; 
  position: relative; 
 
}

/* LOGO */
/* --- LOGO BIOFONT: RÉPLICA EXACTA (COLOR Y BORDE) --- */

.logo-container {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

/* Esto hace que el link ocupe el mismo lugar que el contenedor y no mueva nada */
.logo-container a {
    display: flex;
    gap: 12px;  
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.logo-container img {
  height: 65px !important;
  width: auto;
  /* El isotipo circular sí es más brillante, lo dejamos natural */
  transition: 0.3s;
}

.logo-container span {
  font-family: 'Arial Black', sans-serif; /* Usamos una fuente muy gruesa de base */
  font-size: 35px;
  font-weight: 800; /* Máximo grosor */
  
  /* EL COLOR EXACTO DEL LOGO RECORTADO: */
  color: #00c81a; 
  
  letter-spacing: 2.5px; /* Las letras están muy juntas en tu imagen */
  text-transform: lowercase; /* El logo está en minúsculas */
  position: relative;
  line-height: 1;

  /* --- BORDE AFINADO DE LAS LETRAS DEL LOGO --- */
  text-shadow: 
    1.5px 1.5px 0 #1b2d20,
    -1.5px -1.5px 0 #1b2d20,
    1.5px -1.5px 0 #1b2d20,
    -1.5px 1.5px 0 #1b2d20,
    1.5px 0px 0 #1b2d20,
    -1.5px 0px 0 #1b2d20,
    0px 1.5px 0 #1b2d20,
    0px -1.5px 0 #1b2d20;
}


/* LA LÍNEA VERDE INFERIOR (Subrayado del logo) */
.logo-container span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px; /* Ajustado para que no toque las letras */
  height: 3px;
  background: #00c81a; /* El mismo verde del texto */
  width: 100%;
  border: 1.2px solid #1b2d20; /* ¡Ojo! La línea también tiene borde negro en el logo */
  box-sizing: border-box;
}

.logo-container:hover img {
  transform: scale(1.05);
}

/*Hace que al pasar el mouse por el logo aparezca la línea abajo*/
.logo-container:hover span::after {
  width: 100%;
}

/* El icono crece y rota un pelín para dar sensación de energía renovable */
.logo-container:hover img {
  transform: scale(1.15) rotate(5deg);
}


/* TOPBAR */

/* 1. LA BARRA DE ARRIBA (Independiente) */
.topbar {
    width: 100%;
    height: auto;
    background-color: #f9f9f9; /* Un gris muy clarito para diferenciarla del header blanco */
    padding: 5px 0;
    font-size: 14.5px;
    border-bottom: none;
   
}



.topbar-content {
  max-width: 100%;
  margin: auto;
  align-items: center;
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  padding: 0 40px;
  
  /* --- SUBIMOS EL TAMAÑO --- */
  font-size: 14.5px; /* De 13px a 14.5px (lo justo para que se lea sin destacar demasiado) */
  color: var(--verde-oscuro);
}

.topbar a {
  text-decoration: none;
  color: var(--verde-oscuro);
  font-weight: 600; /* Le damos un pelín de cuerpo a los enlaces/números */
  display: flex;
  align-items: center;
  gap: 5px; /* Espacio entre el icono y el texto */
  transition: 0.3s;
}

.topbar a:hover {
  color: var(--verde);
}


/* MENU */
nav ul {
    display: flex;
    gap: 30px; /* Aumentamos un pelín el espacio entre opciones */
    list-style: none;
    margin: 0;
    padding: 0;
}

nav li {
  cursor: pointer;
  font-weight: 500;
  position: relative;
  transition: 0.3s;
  color: var(--verde-oscuro);
}



/* HOVER */

nav li:hover {
  color: var(--verde);
}

nav li::after {
  background: var(--verde);
}


/* LINKS DEL NAV (FIX MULTIPÁGINA) */
nav ul li a {
    text-decoration: none;
    color: var(--verde-oscuro); 
    
    /* --- MEJORAS DE LEGIBILIDAD --- */
    font-size: 17px;       /* Subimos de los 14-15px que suele haber por defecto a 17px */
    font-weight: 600;      /* Le damos un poco más de cuerpo para que aguante el tipo junto al logo */
    
    letter-spacing: 0.3px; /* Un pelín de aire entre letras para que se vea más pro */
    transition: 0.3s;
    display: block;
}

/* Efecto Hover más marcado */
nav li:hover a {
    color: var(--verde);
    transform: translateY(-2px); /* Pequeño movimiento hacia arriba al pasar el ratón */
}

/* Opcional: Si quieres que la opción activa o el hover tenga una rayita debajo */
nav li::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: var(--verde);
    transition: width .3s;
}

nav li:hover::after {
    width: 100%;
}

/* SECCIONES */
/* SOLO secciones del index */
#inicio,
#quienes,
#servicios,
#legal,
#presupuesto {
  display: none;
}

#inicio.active,
#quienes.active,
#servicios.active,
#legal.active,
#presupuesto.active {
  display: block;
}

/* HERO desktop*/
.hero {
  height: 55vh;
  background: linear-gradient(rgba(27,67,50,0.45), rgba(27,67,50,0.45)),
              url("/images/hero1.webP") center right / cover no-repeat;
  display: flex;
  align-items: center;
  margin-bottom: 0px;

   position: relative; 
  z-index: 1;         
}

/* CONTENIDO HERO */
.overlay {
  color: white;
  padding: 60px;
  max-width: 600px;

  position: relative; /* 🔥 AÑADIR */
  z-index: 1;         /* 🔥 AÑADIR */
}

.overlay h1 {
  font-size: 48px;
  font-weight: 700;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

.overlay button {
  background: var(--verde);
  border: none;
  padding: 15px 25px;
  color: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: 0.3s;
}

.overlay button:hover {
  background: var(--verde-medio);
}

/* CARDS */
.card {
  background: white;
  padding: 25px;
  margin: 15px 0;
  cursor: pointer;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  transition: 0.3s;
}

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




/* FOOTER */


.footer {
  background-color: #163423; /* verde oscuro elegante */
  color: #ffffff;
  padding: 40px 20px;
  text-align: center;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-cta {
  margin-bottom: 20px;
}

.btn-contacto {
  background-color: #3aa76d; /* verde marca */
  color: #fff;
  padding: 12px 30px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
}

.btn-contacto:hover {
  background-color: #2e8b57;
}

.footer-links {
  margin-bottom: 15px;
}

.footer-links a {
  color: #ccc;
  margin: 0 10px;
  text-decoration: none;
  font-size: 14px;
}

.footer-links a:hover {
  color: #fff;
}

.footer-copy {
  font-size: 13px;
  color: #888;
}

/* SERVICES (mejora visual PRO) */
.services {
  background: white;
  padding: 30px 40px;
  border-radius: 12px;

  margin: -60px auto 60px auto; /* Reducido de -120px a -60px */
  position: relative;           /* 🔥 Importante para el z-index */
  z-index: 10;                  /* 🔥 Asegura que esté por encima del hero */

  max-width: 1200px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.12);
}

.services-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.service-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  color: var(--verde-oscuro);
  cursor: pointer;
  transition: 0.3s;
}

.service-item i {
  font-size: 22px;
  color: var(--verde);
}

.service-item:hover {
  color: var(--verde);
  transform: translateY(-4px);
}

/* WHY SECTION */
.why {
  padding: 5px 5px 15px 5px;
  background: white;
  text-align: center;
}

.why h2 {
  font-size: 28px;
  margin-bottom: 40px;
  color: var(--verde-oscuro);
}

.why-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
  max-width: 1100px;
  margin: auto;
}

/* TEXTO */
.why-text {
  text-align: left;
  font-size: 18px;
  line-height: 2;
  
}

/* Atacamos directamente a los iconos de esa sección */
.why-text i { /* Reemplaza .why-text por la clase de tu contenedor */
    color: #149a14 !important;  
    font-size: 19px !important; 
    font-weight: 900 !important;
    margin-right: 12px;
    display: inline-block;
    vertical-align: middle;
    
    
    /* EL TRUCO DEL SRASTRE: Engordamos el icono artificialmente */
    /* Dibujamos un borde de 1.5px del mismo color neón */
    -webkit-text-stroke: 1px #149a14; 
    

}

.why-text p {
    display: flex;

    align-items: center;
    margin-bottom: 15px;
    font-size: 17px;
}

/* IMAGEN */
.why-image {
  background: none;
  padding: 0;
}


.why-image img {
  width: 100%;
  max-width: 350px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* ===============================
   HEADER + TOPBAR FIJOS (LIMPIO)
================================= */

/* TOPBAR fija */
.topbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background: white;
}


/* NAV con línea inferior (solo una, limpia) */
nav {
  border-bottom: 1px solid #eee;
}

/* ESPACIO PARA QUE NO SE MONTE */
body {
  padding-top: 80px;
}

/* ===============================
   🍔 BOTÓN HAMBURGUESA
================================= */

/* 🍔 BOTÓN HAMBURGUESA */
/* 🔒 DESKTOP */
.menu-toggle {
  display: none;
  font-size: 24px;
  cursor: pointer;

  position: relative;   /* 🔥 SIEMPRE */
  z-index: 10000;       /* 🔥 SIEMPRE */
}

/* ===============================
   📱 RESPONSIVE TABLET
================================= */

@media (max-width: 1024px) {

  nav {
    padding: 15px 20px;
  }

  .overlay h1 {
    font-size: 38px;
  }

  .services-container {
    flex-wrap: wrap;
    gap: 20px;
  }

  .why-container {
    flex-direction: column;
    gap: 40px;
    text-align: center;
  }

  .why-text {
    text-align: center;
  }
}

/* ===============================
   📱 RESPONSIVE MÓVIL
================================= */

@media (max-width: 768px) {

  body {
    padding-top: 0 !important;
    background-color: white;
  }

  .topbar {
  position: static !important;
  width: 100%;
  background-color: #ffffff; /* Fondo blanco para que el verde resalte */
  border-bottom: 1px solid #f0f0f0; /* Línea divisoria muy fina */
}

  /* ESTO SE QUEDA: Controla que no se monten las capas */
  .topbar, header {
    position: static !important; 
    width: 100%;
  }
  /* TOPBAR */
  /* ESTO SE QUEDA Y SE AJUSTA: Controla los iconos */
  .topbar-content {
  display: flex;
  flex-direction: row;       /* 👈 DE VERTICAL A HORIZONTAL */
  justify-content: center;  /* Centra el grupo en la pantalla */
  align-items: center;
  flex-wrap: nowrap;          /* Por si el móvil es muy estrecho, que bajen sin romperse */
  gap: 12px;                 /* Espacio entre cada dato */
  padding: 6px 0;          /* Menos padding para ahorrar espacio vertical */
  font-size: 12px;           /* Un pelín más pequeña para que quepa en una línea */
}

/* Color unificado para iconos y texto */
.topbar-content span, 
.topbar-content a {
  color: var(--verde-medio);
  font-size: 11px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;                  /* Espacio entre icono y texto */
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: -0.2px;
}

.topbar-content i {
  font-size: 13px;           /* Iconos un pelín más grandes que el texto */
  color: #2ecc71;
}

  


/* NAV MOBILE FIX DEFINITIVO */
/* Asegura que el NAV sea relativo para que el menú absoluto funcione */
  nav {
    position: relative; 
    display: flex;
    width: 100%;
    box-sizing: border-box; /* Evita que el padding extra agrande el ancho */
  }

    .logo-container {
      flex: 0 0 auto;
    }

    
/* 🍔 BOTÓN MOVIL*/
.menu-toggle {
    display: block !important; /* El !important asegura que aparezca sí o sí */
    padding: 12px 8px;
    visibility: visible;
    opacity: 1;
    cursor: pointer;
}

/* Color y tamaño de las rayitas */
.menu-toggle i {
    color: var(--verde-medio); /* 👈 Aquí le das tu verde corporativo */
    font-size: 22px;           /* Un tamaño que se vea bien y sea fácil de pulsar */
    display: block;            /* Para que se comporte bien dentro del div */
    transition: all 0.3s ease;    
}

/* Opcional: Un pequeño efecto al tocarlo con el dedo */
.menu-toggle:active i {
    color: #2ecc71;            /* Un verde un poco más brillante al pulsar */
    transform: scale(0.9);      /* Se encoge un pelín, da sensación de botón real */
}

/* 🔥 MENÚ OCULTO */
nav ul {
  display: none; /* Oculta el menú por defecto */
  position: absolute;
   top: 100%; /* 👈 SIEMPRE debajo del nav */
  left: 0;
  width: 100%; /* Asegúrate de que ocupe todo el ancho */
  background: white;
  flex-direction: column;
  padding: 10px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  z-index: 9999; /* Para que esté por encima de la imagen */
}

/* 🔥 MENÚ ACTIVO */

nav ul.active {
    display: flex !important;
    flex-direction: column;
    position: absolute;    /* 👈 IMPORTANTE: para que flote sobre el resto */
    width: 90%;
    left: 5%;
    top: 80px;             /* 👈 Ajusta esto según el alto de tu nav */
    background: #ffffff;
    border-radius: 8px;    
    padding: 20px 0;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* 👈 Le da un toque más sutil */
    border-top: 1px solid #f0f0f0;
    z-index: 10000;        /* 👈 Para que nada lo tape */
}

  /* ITEMS DEL MENÚ */
  nav li {
    text-align: left;
    padding: 12px 25px !important;
    padding-left: 30px;
    font-size: 15px;
    letter-spacing: 0.5px;
    border-bottom: 1px solid #fafafa;
  }

  nav li:last-child {
    border-bottom: none; /* Elimina el borde en el último elemento */
  }

  /* HERO */
  .hero {
    height: auto; /* Ajusta la altura para que se vea bien en móvil */
    padding: 40px 0;
    margin-bottom: 60px;
  }



/* CONTENIDO */
  .overlay {
    padding: 20px;
    width: 100%;
    max-width: 100%;
    display: flex;      /* Activamos flexbox */
    flex-direction: column; /* Ponemos los elementos uno sobre otro */
    align-items: center;
    justify-content: center;
    text-align: center;
    
  }

 /* TEXTO */
  .overlay h1 {
    text-align: left;
    font-size: 18px;
    line-height: 1.3;
    padding: 0 10px;
    margin-bottom: 20px; /* Espacio entre el texto y el botón */
    width: 100%;
  }

/* BOTÓN */
.overlay button {
  width: auto;
  min-width: 200px;
  max-width: 200px;
  margin: 0 auto;
  padding: 8px 16px;
  font-size: 13px;
  margin: 0 auto;
  border-radius: 5px;
}

  /* SERVICES - El contenedor principal */
.services {
    
    margin: -40px 15px 15px 15px !important;
    padding: 15px !important;
    width: auto;
    box-sizing: border-box; /* 👈 VITAL para que no se salga */
    background-color: white;
}

.services-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
    background-color: white;
}

.service-item {
    display: flex;        /* Para alinear icono y texto en línea */
    align-items: center;  /* Centrado vertical */
    justify-content: flex-start; /* Texto a la izquierda (queda más pro) */
    background: #ffffff;  /* Blanco puro resalta mejor la sombra */
    padding: 15px 20px;
    border-radius: 10px;
    max-width: 400px;
    width: 90%;
    box-sizing: border-box; /* 👈 VITAL para que el padding no lo estire */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Para que el icono no esté pegado al texto */
.service-item i, .service-item svg {
    margin-right: 15px;
    font-size: 20px;
    color: #2ecc71; /* El verde de tu marca */
  
}

  /* SECCIÓN WHY */
.why {
  padding: 10px 25px 30px 25px !important; /* Arriba, Derecha, Abajo, Izquierda */
  background-color: #ffffff;
}

.why h2 {
  font-size: 22px !important;
  margin-top: 0 !important;
  margin-bottom: 20px !important;
  text-align: center;
  color: #2d5a4c;
}

/* LA LISTA DE BENEFICIOS */
.why-text {
  display: flex;
  font-size: 12px;
  line-height: 1.6;
  text-align: left;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: 8px; /* Crea espacio entre cada check automáticamente */
}

.why-text p {
  display: flex;          /* Convierte cada línea en un contenedor flexible */
  line-height: 1.3;
  align-items: flex-start; /* Alinea el check con la primera línea de texto */
  gap: 10px;              /* Espacio fijo entre el check y el texto */
  text-align: left;
  margin-bottom: 5px;    /* Espacio entre cada beneficio */
  font-size: 15px;
}

/* LA IMAGEN */
.why-image img {
  width: 100%;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* Una sombrita suave */
}

 /* FOOTER MOVIL*/

 /* FOOTER RESPONSIVE */
.footer {
  padding-top: 25px;
  padding-bottom: 20px;
  background-color: #1a3a2a; /* Tu verde oscuro */
  text-align: center;
}

.footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px !important;
}

/* BOTÓN CONTÁCTANOS (FOOTER) */
.btn-contacto {
  display: inline-block;
  background-color: #2ecc71;
  color: white;
  text-decoration: none;
  
  /* Tamaño controlado */
  padding: 8px 20px;     /* Menos altura para que no sea un "tocho" */
  width: auto;
  min-width: 140px;      /* Lo hacemos más estrecho */
  
  /* Texto */
  font-size: 13px;       /* Bajamos un punto la letra */
  font-weight: 600;
  text-transform: none;  /* 👈 Prueba a quitar las mayúsculas, suele verse más elegante */
  border-radius: 50px;
  text-align: center;
}

/* Contenedor del botón para asegurar el centrado */
/* CONTENEDOR CTA */
.footer-cta {
  display: flex;
  justify-content: center;
  margin-bottom: 5px; /* Reducimos el espacio con los links (estaba en 30px) */
}

/* ENLACES LEGALES */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 8px;              /* Links más pegaditos entre sí */
  margin-top: 0;
  margin-bottom: 15px;   /* Menos espacio antes del copyright */
}

.footer-links a {
  font-size: 12px;       /* Letra un pelín más pequeña para que no compita */
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}

.footer-links a:hover {
  color: #2ecc71;
}

/* COPYRIGHT */
.footer-copy p {
  color: rgba(255, 255, 255, 0.4);
  font-size: 11px;
  margin-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.1); /* Línea sutil divisoria */
  padding-top: 10px;
  width: 100%;
}

}


/* --- ESTILOS BANNER COOKIES --- */
/* --- BANNER COOKIES ESCRITORIO --- */
.cookie-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 350px; /* Un pelín más compacta */
    background: #ffffff;
    padding: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border-radius: 15px;
    z-index: 9999;
    border: 1px solid #eee;
    display: none; /* Se activa con JS */
}

.cookie-container.show {
    display: block;
    animation: fadeInUp 0.5s ease;
}

.cookie-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: center;
}

.cookie-content p {
    font-size: 14px;
    color: #444;
    margin: 0;
    line-height: 1.4;
}

/* Asegúrate de que estas clases existan en tu archivo .css */

/* Contenedor de la fila */
.cookie-main-buttons {
    display: flex;
    gap: 10px;
    width: 100%;
}

/* Estilo común para los dos botones de la fila */
.btn-cookie {
    flex: 1; /* Esto hace que Aceptar y Rechazar tengan el mismo ancho */
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
    border: none;
    text-align: center;
}

.btn-accept {
    background: #0bce52;
    color: white;
}

.btn-reject {
    background: #f1f1f1;
    color: #666;
}

/* El botón de personalizar abajo */
.btn-settings {
    background: none;
    border: none;
    color: #999;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
    margin-top: 5px;
    align-self: center; /* Lo centra bajo los otros dos */
}

/* Estilos para la ventana de personalizar cookies */
.cookie-options {
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 12px;      /* Un poco más de espacio entre opciones */
    margin: 20px 0; /* Más aire arriba y abajo */
    padding-left: 15px; /* Para que no choquen con el borde izquierdo */
}

.cookie-options label {
    display: flex;
    align-items: center;
    gap: 12px;      /* Espacio entre el cuadrito y el texto */
    cursor: pointer;
    font-size: 14px;
    color: #555;
}

/* Para que los cuadritos de check sean verdes como tu marca */
.cookie-options input[type="checkbox"] {
    accent-color: #0bce52; 
    width: 16px;
    height: 16px;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    /* Esto solo actuará en móviles, protegiendo tu diseño de escritorio */
    html, body {
        overflow-x: hidden !important;
        position: relative !important;
        width: 100% !important;
    }

    .cookie-container {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        width: 90% !important; /* Un pelín más ancho para aprovechar el móvil */
        max-width: 320px !important;
        
        /* El secreto: translateX(-50%) para centrar, translateY para animar */
        transform: translateX(-50%) translateY(20px) !important;
        
        bottom: 20px !important;
        padding: 20px !important;
        z-index: 99999 !important;
    }

    .cookie-container.show {
        transform: translateX(-50%) translateY(0) !important;
    }

    /* Esto asegura que los botones se adapten al ancho de la tarjeta */
    .cookie-main-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
    }

    .btn-cookie {
        width: 100% !important;
        box-sizing: border-box !important; /* Solo aplicamos esto al botón */
    }
}