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






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

  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: 1.1rem;
    margin: -0.25rem 0 1rem;  /* negative top para subirlo, 0 left/right */
    text-align: center;
    word-break: break-word;
    font-weight: bold;
  }
}
  /* ============================
   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_aviso_legal.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_aviso_legal_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 */
}