body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2); /* Oscurece el fondo un poco */
  z-index: -1;
}

/* Encabezado */
header {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 1rem 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Contenido del encabezado */
.header-content {
  text-align: center;
  margin-top: 0;
}

/* TÍTULO EN UNA SOLA LÍNEA con tamaño responsivo */
  .header-content h1 {
    white-space: nowrap;
    font-family: 'Georgia', serif;
    text-transform: uppercase;
    font-weight: bold;

    /* Gradiente de fuego: amarillo arriba, naranja en el medio, rojo abajo */
    background: linear-gradient(to bottom, #ffff00 0%, #ffa500 50%, #ff0000 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    
    margin-top: 0rem;      /* añade un poco de espacio encima */
    margin-bottom: 1rem;  /* “sube” el h1 medio rem */
    font-size: clamp(2rem, calc(100vw / 9), 3rem);
}

/* Subtítulo */
.header-content p {
  font-size: 1.2rem;
  color: #fff;
  text-shadow: 1px 1px 4px rgba(254, 253, 253, 0.8);
  margin: 0 0 10px 0;
}





/* Contenedor de productos */
.productos {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem;
}

.productos-container {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* Pie de Página */
.footer {
  text-align: center;
  padding: 1rem 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  margin-top: auto;
  transition: background-color 0.3s ease;
}

.footer:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.footer a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s;
}

.footer a:hover {
  color: #f39c12;
}


/* Añade al CSS de contacto (por ejemplo css_politica_privacidad.css o un nuevo css_contacto.css) */

.cookie-content.privacy-content .contact-form {
  background: rgba(0, 0, 0, 0.5);      /* Fondo semitransparente */
  border: 3px solid #FFA500;           /* Borde naranja */
  padding: 1rem;
  border-radius: 0.5rem;
  color: #FFD700;                       /* Texto amarillo */
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="hidden"],
.contact-form textarea {
  width: 100%;
  background: transparent;             /* Fondo transparente */
  border: 1px solid #FFA500;           /* Borde naranja */
  color: #FFD700;                       /* Texto amarillo */
  padding: 0.5rem;
  margin-bottom: 1rem;
  border-radius: 0.25rem;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #FFD700;                       /* Placeholder en amarillo */
  opacity: 0.7;
}

.contact-form .form-group {
  margin-bottom: 1rem;
}

.contact-form .form-group label,
.contact-form .form-group input[type="checkbox"] + label {
  color: #FFD700;                       /* Texto de label en amarillo */
}

.contact-form .btn-unete {
  display: block;                      /* Para poder centrar con margin auto */
  margin: 1.5rem auto 0 auto;         /* Centrado horizontal y separación superior */
  background: transparent;             /* Fondo transparente por defecto */
  border: 3px solid #FFD700;           /* Borde grueso y amarillo */
  color: #FFD700;                       /* Texto amarillo */
  padding: 0.75rem 2rem;               /* Ajusta anchura interna */
  font-size: 1rem;
  border-radius: 9999px;               /* Botón completamente redondo/píldora */
  cursor: pointer;
  transition: 
    background 0.2s ease, 
    border-color 0.2s ease, 
    color 0.2s ease, 
    box-shadow 0.2s ease;
  font-weight: bold;
}

.contact-form .btn-unete:hover {
  background: #FFD700;                 /* Fondo amarillo */
  border-color: #000;                  /* Borde negro */
  color: #000;                         /* Texto negro */
  box-shadow: 
    0 0 8px rgba(0,0,0,0.6),           /* Sombra oscura */
    0 0 15px rgba(255,255,255,0.8);    /* Brillo radiante */
}


/* Hacer los labels en negrita y con separación del input */
.contact-form label {
  display: block;         /* Para que el margin funcione mejor */
  margin-bottom: 0.5rem;  /* Espacio entre el nombre y el campo */
  font-weight: bold;      /* Negrita */
  color: #FFD700;         /* Mantén el amarillo si quieres */
}

/* Opcional: más espaciado entre cada grupo de label+input */
.contact-form .form-group,
.contact-form input,
.contact-form textarea {
  margin-bottom: 1.5rem;  /* Aumenta este valor a tu gusto */
}

/* Asegúrate de tener esto en la .checkbox-group */
.contact-form .checkbox-group {
  display: flex;
  align-items: center;    /* centrar verticalmente */
}

/* Ajusta el line-height y un pequeño margen superior */
.contact-form .checkbox-group label {
  display: inline-block;
  margin-left: 0.5rem;
  font-weight: bold;
  color: #FFD700;
  line-height: 1;        /* iguala altura de línea al text */
  margin-top: -0.6rem;   /* baja muy ligeramente el texto */
}



/*------------------------------------------------------------------------------------------------
ESTILOS PARA LOS BOTONES FLOTANTES (COPIAR ESTE FRAGMENTO EN LOS DEMÁS CSS)
------------------------------------------------------------------------------------------------*/

.brand-name {
  position: absolute !important;   /* lo saca del flujo visual */
  width: 1px !important;           /* tamaño mínimo */
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;         /* elimina márgenes */
  overflow: hidden !important;     /* oculta cualquier contenido sobrante */
  clip: rect(1px, 1px, 1px, 1px) !important; /* recorta todo el elemento */
  white-space: nowrap !important;  /* evita saltos de línea */
  border: 0 !important;
}

/* Estilo base para el logo en escritorio */
.brand-logo {
  width: 240px;      /* ajusta este valor al tamaño “ideal” en desktop */
  height: auto;      /* mantiene la proporción original */
}

/* Si quieres forzar un máximo de altura */
.brand-logo {
  max-height: 120px;  /* para que no sea excesivamente alto */
}




  .bienvenida-dracollectors {
    display: none;
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #1a1a1a, #2c2c2c);
    color: #ffd700;
    padding: 1rem 2rem;
    border: 2px solid #d4af37;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
    font-size: 1.1rem;
    font-weight: bold;
    z-index: 9999;
    animation: bienvenidaFadeIn 0.6s ease-out;
  }
  
  @keyframes bienvenidaFadeIn {
    0% { opacity: 0; transform: translate(-50%, -20px); }
    100% { opacity: 1; transform: translate(-50%, 0); }
  }



/* ========================================
   Media Query para dispositivos móviles
   ======================================== */



    
  
  /* Responsive: reducimos el logo en móvil */
@media (max-width: 768px) {
  .brand-logo {
    width: 200px;     /* más pequeño en móviles */
    max-height: 100px;
    
    
  }
  .header-brand {
    margin-top: 50px;   /* baja todo el logo + texto 20px */
  }
}

/* Si el logo está demasiado pegado, añade un margen */
.header-brand .brand-logo {
  margin-right: 8px; /* separación entre logo y texto (aunque el texto esté oculto) */
}
  

/* 1. Fuente medieval para títulos */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');

/* Contenedor central y ajustable */
.cookie-content {
  max-width: 900px;                   /* anchura máxima razonable */
  margin: 2rem auto;                  /* centrado con espacio arriba/abajo */
  background: rgba(0, 0, 0, 0.6);  /* semitransparente oscuro */
  padding: 2rem;                      /* espacio interno */
  border-radius: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

/* 2. Texto general en amarillo suave */
.cookie-content p,
.cookie-content li,
.cookie-content td {
  color: #ffd700;      /* amarillo pálido */
  line-height: 1.6;
  font-family: 'Inter', sans-serif;
}

/* 3. Títulos en naranja Dracollectors */
.cookie-content h2,
.cookie-content h3 {
  font-family: 'Cinzel', serif;
  color: #ff8c00;      /* naranja Dracollectors */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
  margin-top: 1.5rem;
}

/* 4. Tabla compacta con líneas en naranja */
.cookie-content table {
  width: auto;               /* ajusta al contenido */
  max-width: 90%;            /* no ocupe todo el ancho */
  margin: 1rem auto;         /* centrada */
  border-collapse: collapse;
  table-layout: auto;
  border-spacing: 0;         /* sin espacios */
}
.cookie-content th,
.cookie-content td {
  padding: 0.4rem 0.6rem;     /* padding reducido */
  font-size: 0.9rem;
  white-space: nowrap;
  border: 1px solid #e07b00; /* línea en naranja */
  color: #f8e16c;            /* texto amarillo */
  background: rgba(255,255,255,0.05); /* sutil contraste */
}

/* Encabezados de columna más destacados */
.cookie-content th {
  font-weight: bold;
  background: rgba(255,255,255,0.1);
}

@media (max-width: 640px) {
  /* Hacer la tabla 100% del contenedor y scrollable */
  .cookie-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* eliminamos el max-width de escritorio */
    max-width: none;
  }

  /* Celdas más compactas y con wrap de texto */
  .cookie-content th,
  .cookie-content td {
    white-space: normal;        /* permite saltos de línea */
    font-size: 0.75rem;         /* texto más pequeño */
    padding: 0.2rem 0.4rem;     /* padding reducido */
  }

  /* Reducir también el tamaño de los encabezados */
  .cookie-content h3 {
    font-size: 1.1rem;
  }
}


/* 5. Enlaces estilo pergamino */
.cookie-content a {
  color: #f8e16c;
  text-decoration: underline dotted;
}
.cookie-content a:hover {
  color: #ffe599;
}

/* 6. Listas con bala naranja */
.cookie-content ul {
  list-style-type: none;
  padding-left: 1.2rem;
}
.cookie-content ul li::before {
  content: '•';
  color: #e07b00;
  display: inline-block;
  width: 1rem;
}

/* 7. Responsive */
@media (max-width: 640px) {
  .cookie-content {
    padding: 1rem;
    margin: 1rem auto;
  }
  .cookie-content h2 {
    font-size: 1.5rem;
  }
  .cookie-content h3 {
    font-size: 1.25rem;
  }
  .cookie-content th,
  .cookie-content td {
    padding: 0.2rem 0.4rem;
    font-size: 0.8rem;
  }
  .cookie-content table {
    max-width: 100%;
  }
}



  .header-content {
    padding: 0 0.5rem;    /* de 1rem ó 2rem a únicamente 0.5rem */
  }

  /* Título principal: tamaño ideal y sin margen lateral */
  .header-content h1 {
    font-size: 3.5rem;      /* tu tamaño deseado */
    margin: 0.5rem 0;     /* reduce top/bottom y anula left/right */
    line-height: 1.1;
    text-align: center;
    word-break: break-word;
  }

  /* Subtítulo: movido hacia arriba y margen lateral cero */
  .header-content p {
    font-size: 1.5rem;
    margin: 0.25rem 0 1rem;  /* negative top para subirlo, 0 left/right */
    text-align: center;
    word-break: break-word;
    font-weight: 500;
    margin-bottom: 2rem;
  }


/* ========================================
   Media Query para dispositivos móviles
   ======================================== */
/* General para móviles (max-width: 768px) */
@media (max-width: 768px) {
  body {
    background-attachment: scroll !important;  /* Forzar scroll en lugar de fixed */
    background-size: cover !important;
    background-position: center center !important;
  }
  header {
    width: 100%;
  }
  .header-content {
    width: 95%;
    margin: 0 auto;
  }
  /* Ajustamos la fórmula en pantallas medianas */
  .header-content h1 {
    /* Mínimo 1.8rem, óptimo calc(100vw / 9), máximo 4rem */
    font-size: clamp(1.8rem, calc(100vw / 9), 4rem);
  }
  .header-content p {
    font-size: 0.9rem;
  }


/* Media Query para pantallas muy pequeñas (hasta 350px) */
@media (max-width: 350px) {
  .header-content h1 {
    /* Mínimo 1.6rem, óptimo calc(100vw / 9), máximo 4rem */
    font-size: clamp(1.6rem, calc(100vw / 9), 4rem) !important;
    padding: 0 10px;
    text-align: center;
  }
  .header-content p {
    font-size: 0.9rem !important;
    text-align: center;
    margin: 0 10px;
  }
}


  /* Media query para pantallas pequeñas (tablets y móviles) */
  @media (max-width: 768px) {
    .account-sidebar {
      width: 90vw;
      max-width: 90vw;
      right: -90vw; /* fuera de pantalla inicialmente */
    }
  
    .account-sidebar.open {
      right: 0;
    }
  }
  
  /* Media query para pantallas muy pequeñas (ej. 300px) */
  @media (max-width: 300px) {
    .account-sidebar {
      width: 90vw;
      max-width: 90vw;
      right: -100vw;
    }
  
    .account-sidebar.open {
      right: 0;
    }

    

  }


  .search-suggestions {
    left: 100% !important;
    transform: translateX(-50%) !important;
  }


}

@media (max-width: 640px) {
  /* Reducir padding general en móvil */
  .header-content {
    padding: 0 0.5rem;    /* de 1rem ó 2rem a únicamente 0.5rem */
  }

  /* Título principal: tamaño ideal y sin margen lateral */
  .header-content h1 {
    font-size: 3rem;      /* tu tamaño deseado */
    margin: 0.5rem 0;     /* reduce top/bottom y anula left/right */
    line-height: 1.1;
    text-align: center;
    word-break: break-word;
  }

  /* Subtítulo: movido hacia arriba y margen lateral cero */
  .header-content p {
    font-size: 1rem;
    margin: -0.25rem 0 1rem;  /* negative top para subirlo, 0 left/right */
    text-align: center;
    word-break: break-word;
    font-weight: bold;
  }
}


.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8); /* fondo más oscuro */
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: #000;                     /* fondo negro */
  color: #FFD700;                       /* texto amarillo dorado */
  padding: 1.5rem;
  border-radius: 0.5rem;
  max-width: 90%;
  text-align: center;
  box-shadow: 0 0 20px 5px #FFD700;     /* sombra dorada alrededor */
}

.modal button {
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  border: none;
  background: #FFD700;                  /* botón dorado */
  color: #000;                          /* texto negro sobre el botón */
  border-radius: 0.25rem;
  cursor: pointer;
}

  /* ============================
   Fondo “fijo” + footer pegado
   ============================ */

/* 1) html/body llenan la ventana, permiten pull-to-refresh */
html,
body {
  min-height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;            /* deja que la página siga scrollando */
  overscroll-behavior-y: auto !important; /* permite pull-to-refresh en iOS/Android */
}

/* 2) Fondo fijo en su propio elemento */
.fixed-bg {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-image: url('assets/images/fondo_resto_footer.webp') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  pointer-events: none !important; /* no interfiere con el scroll */
  z-index: -1 !important;
}

/* 2b) En móvil cambia la imagen */
@media (max-width: 768px) {
  .fixed-bg {
    background-image: url('assets/images/fondo_resto_footer_movil.webp') !important;
  }
}

/* 3) Empuja el footer al fondo */
.page-content {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}

/* 4) Mantén el footer siempre abajo */
.footer {
  margin-top: auto !important;
}

/* ─────────────────────────────────────────────
   Desactivar auto-enlaces telefónicos en iOS
   ───────────────────────────────────────────── */
a[x-apple-data-detectors],
a[href^="tel:"] {
  color: inherit !important;         /* mantiene el color original */
  text-decoration: none !important;  /* quita cualquier subrayado */
  pointer-events: none !important;   /* desactiva el clic */
  cursor: default !important;        /* cursor normal */
}

.contact-form input:not([type="checkbox"]),
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  box-sizing: border-box;

}

.contacto-whatsapp {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.35);
  border: 3px solid #FFA500;
}

.contacto-whatsapp h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.contacto-whatsapp a {
  text-decoration: underline;
}


/* Enlace de WhatsApp en contacto */
.whatsapp-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;          /* separa icono y texto */
  font-size: 1.1rem;     /* más grande que el texto normal */
  font-weight: 600;      /* un poco más “fuerte” */
  text-decoration: underline;
}

.whatsapp-link .whatsapp-icon {
  color: #25D366;        /* verde oficial de WhatsApp */
  font-size: 1.2em;      /* icono ligeramente más grande que el texto */
}

/* Opcional: efecto hover suave */
.whatsapp-link:hover .whatsapp-icon {
  transform: scale(1.05);
}
/* Enlace de WhatsApp en contacto */
.whatsapp-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;          /* separación icono-texto-icono */
  font-size: 1.1rem;
  font-weight: 600;
  text-decoration: none !important; /* nada subrayado por defecto */
}

/* Solo subrayar el texto, no los iconos */
.whatsapp-link .whatsapp-text {
  text-decoration: underline;
}

/* Iconos verdes y un pelín más grandes */
.whatsapp-link .whatsapp-icon {
  color: #25D366;        /* verde WhatsApp */
  font-size: 1.2em;
}

/* Hover suave sobre el enlace */
.whatsapp-link:hover .whatsapp-icon {
  transform: scale(1.05);
}