/**
 * ============================================
 * DULCES-REGULARES-CUSTOM.CSS
 * ============================================
 * Estilos específicos para la página de dulces regulares (dulces-regulares.html)
 * Incluye: grid de catálogo, títulos con imágenes de fondo, secciones colapsables
 */

/* ============================================
   TIPOGRAFÍA
   ============================================ */
body { 
  font-family: 'Noto Sans', sans-serif; 
}

/* Títulos: Noto Serif Display Thin (100) en toda la web */
.font-serif { 
  font-family: 'Noto Serif Display', serif; 
  font-weight: 100; 
}

/* Estilos de navbar movidos a assets/styles/navbar.css */

/* ============================================
   SUBTÍTULOS Y LISTAS (Sección Queques)
   ============================================ */
/* Subtítulo con línea arriba y lista (sección Queques) */
.subtitulo-contenido .subtitulo-linea-arriba { 
  display: block; 
  margin-bottom: 0.25rem; 
}

.subtitulo-contenido .subtitulo-linea-intro { 
  display: block; 
}

.subtitulo-contenido .subtitulo-lista-card {
  list-style-type: disc;
  margin: 0.25rem 0 0 0;
  padding-left: 1.25rem;
  list-style-position: outside;
}

.subtitulo-contenido .subtitulo-lista-card li { 
  margin-bottom: 0.125rem; 
}

/* ============================================
   GRID CATÁLOGO
   ============================================
   * Flexbox: columnas según cantidad de productos (catalogo-grid-N).
   * ≥1024px: 1–4 columnas según clase; <1024px: card fijo 280px, columnas se reducen con zoom/ventana.
   * Especificidad .catalogo-grid.catalogo-grid-N > * para ganar a Tailwind .w-full .max-w-sm de la card.
   */
.catalogo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 2rem;
}

.catalogo-grid > * {
  width: 260px;
  max-width: 100%;
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  .catalogo-grid.catalogo-grid-1 > * { width: min(260px, 100%); }
  .catalogo-grid.catalogo-grid-2 > * { width: min(260px, calc((100% - 2rem) / 2)); }
  .catalogo-grid.catalogo-grid-3 > * { width: min(260px, calc((100% - 2rem * 2) / 3)); }
  .catalogo-grid.catalogo-grid-4 > * { width: min(260px, calc((100% - 2rem * 3) / 4)); }
}

/* ============================================
   TÍTULO ALFAJORES CON IMAGEN DE FONDO
   ============================================ */

/* Contenedor del título Alfajores con imagen de fondo */
.titulo-alfajores-container {
  position: relative;
  width: 100vw; /* Full width de lado a lado */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 3rem 1rem; /* Rectángulo chato: padding vertical moderado */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Para que el blur no se salga del contenedor */
}

/* Imagen de fondo con blur */
.titulo-alfajores-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../images/products/alfajores3.webp');
  background-size: cover;
  background-position: center; /* Mostrar el centro de la imagen */
  background-repeat: no-repeat;
  filter: blur(4px); /* Aplicar blur a la imagen de fondo */
  z-index: 0;
}

/* Overlay oscuro sobre la imagen de fondo con blur */
.titulo-alfajores-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* Oscurece la imagen al 50% */
  z-index: 1;
}

/* Título Alfajores: siempre blanco, sobre el overlay */
.titulo-alfajores {
  position: relative;
  z-index: 2; /* Por encima del overlay */
  color: white !important; /* Siempre blanco, sin importar el modo */
  font-family: 'Noto Serif Display', serif;
  font-size: 1.5rem;
  font-weight: 100;
  text-align: center;
}

/* Responsive: ajustar tamaño del texto en diferentes pantallas */
@media (min-width: 640px) {
  .titulo-alfajores {
    font-size: 1.875rem; /* text-2xl */
  }
  .titulo-alfajores-container {
    padding: 3.5rem 1rem;
  }
}

@media (min-width: 768px) {
  .titulo-alfajores {
    font-size: 2.25rem; /* text-3xl */
  }
  .titulo-alfajores-container {
    padding: 4rem 1rem;
  }
}

/* ============================================
   TÍTULO CHOCTEJAS CON IMAGEN DE FONDO
   ============================================ */

/* Contenedor del título Chocotejas con imagen de fondo */
.titulo-chocotejas-container {
  position: relative;
  width: 100vw; /* Full width de lado a lado */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 3rem 1rem; /* Rectángulo chato: padding vertical moderado */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Para que el blur no se salga del contenedor */
}

/* Imagen de fondo con blur */
.titulo-chocotejas-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../images/products/chocotejas2.webp');
  background-size: cover;
  background-position: center; /* Mostrar el centro de la imagen */
  background-repeat: no-repeat;
  filter: blur(4px); /* Aplicar blur a la imagen de fondo */
  z-index: 0;
}

/* Overlay oscuro sobre la imagen de fondo con blur */
.titulo-chocotejas-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* Oscurece la imagen al 50% */
  z-index: 1;
}

/* Título Chocotejas: siempre blanco, sobre el overlay */
.titulo-chocotejas {
  position: relative;
  z-index: 2; /* Por encima del overlay */
  color: white !important; /* Siempre blanco, sin importar el modo */
  font-family: 'Noto Serif Display', serif;
  font-size: 1.5rem;
  font-weight: 100;
  text-align: center;
}

/* Responsive: ajustar tamaño del texto en diferentes pantallas */
@media (min-width: 640px) {
  .titulo-chocotejas {
    font-size: 1.875rem; /* text-2xl */
  }
  .titulo-chocotejas-container {
    padding: 3.5rem 1rem;
  }
}

@media (min-width: 768px) {
  .titulo-chocotejas {
    font-size: 2.25rem; /* text-3xl */
  }
  .titulo-chocotejas-container {
    padding: 4rem 1rem;
  }
}

/* ============================================
   TÍTULO BROWNIES CON IMAGEN DE FONDO
   ============================================ */

/* Contenedor del título Brownies con imagen de fondo */
.titulo-brownies-container {
  position: relative;
  width: 100vw; /* Full width de lado a lado */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 3rem 1rem; /* Rectángulo chato: padding vertical moderado */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Para que el blur no se salga del contenedor */
}

/* Imagen de fondo con blur */
.titulo-brownies-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../images/products/brownies2.webp');
  background-size: cover;
  background-position: center; /* Mostrar el centro de la imagen */
  background-repeat: no-repeat;
  filter: blur(4px); /* Aplicar blur a la imagen de fondo */
  z-index: 0;
}

/* Overlay oscuro sobre la imagen de fondo con blur */
.titulo-brownies-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* Oscurece la imagen al 50% */
  z-index: 1;
}

/* Título Brownies: siempre blanco, sobre el overlay */
.titulo-brownies {
  position: relative;
  z-index: 2; /* Por encima del overlay */
  color: white !important; /* Siempre blanco, sin importar el modo */
  font-family: 'Noto Serif Display', serif;
  font-size: 1.5rem;
  font-weight: 100;
  text-align: center;
}

/* Responsive: ajustar tamaño del texto en diferentes pantallas */
@media (min-width: 640px) {
  .titulo-brownies {
    font-size: 1.875rem; /* text-2xl */
  }
  .titulo-brownies-container {
    padding: 3.5rem 1rem;
  }
}

@media (min-width: 768px) {
  .titulo-brownies {
    font-size: 2.25rem; /* text-3xl */
  }
  .titulo-brownies-container {
    padding: 4rem 1rem;
  }
}

/* ============================================
   TÍTULO GALLETAS CON IMAGEN DE FONDO
   ============================================ */

/* Contenedor del título Galletas con imagen de fondo */
.titulo-galletas-container {
  position: relative;
  width: 100vw; /* Full width de lado a lado */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 3rem 1rem; /* Rectángulo chato: padding vertical moderado */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Para que el blur no se salga del contenedor */
}

/* Imagen de fondo con blur */
.titulo-galletas-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../images/products/galletas2.webp');
  background-size: cover;
  background-position: center; /* Mostrar el centro de la imagen */
  background-repeat: no-repeat;
  filter: blur(4px); /* Aplicar blur a la imagen de fondo */
  z-index: 0;
}

/* Overlay oscuro sobre la imagen de fondo con blur */
.titulo-galletas-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* Oscurece la imagen al 50% */
  z-index: 1;
}

/* Título Galletas: siempre blanco, sobre el overlay */
.titulo-galletas {
  position: relative;
  z-index: 2; /* Por encima del overlay */
  color: white !important; /* Siempre blanco, sin importar el modo */
  font-family: 'Noto Serif Display', serif;
  font-size: 1.5rem;
  font-weight: 100;
  text-align: center;
}

/* Responsive: ajustar tamaño del texto en diferentes pantallas */
@media (min-width: 640px) {
  .titulo-galletas {
    font-size: 1.875rem; /* text-2xl */
  }
  .titulo-galletas-container {
    padding: 3.5rem 1rem;
  }
}

@media (min-width: 768px) {
  .titulo-galletas {
    font-size: 2.25rem; /* text-3xl */
  }
  .titulo-galletas-container {
    padding: 4rem 1rem;
  }
}

/* ============================================
   TÍTULO TRUFAS DE CHOCOLATE CON IMAGEN DE FONDO
   ============================================ */

/* Contenedor del título Trufas de Chocolate con imagen de fondo */
.titulo-trufas-container {
  position: relative;
  width: 100vw; /* Full width de lado a lado */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 3rem 1rem; /* Rectángulo chato: padding vertical moderado */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Para que el blur no se salga del contenedor */
}

/* Imagen de fondo con blur */
.titulo-trufas-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../images/products/trufas_chocolate2.webp');
  background-size: cover;
  background-position: center; /* Mostrar el centro de la imagen */
  background-repeat: no-repeat;
  filter: blur(4px); /* Aplicar blur a la imagen de fondo */
  z-index: 0;
}

/* Overlay oscuro sobre la imagen de fondo con blur */
.titulo-trufas-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* Oscurece la imagen al 50% */
  z-index: 1;
}

/* Título Trufas de Chocolate: siempre blanco, sobre el overlay */
.titulo-trufas {
  position: relative;
  z-index: 2; /* Por encima del overlay */
  color: white !important; /* Siempre blanco, sin importar el modo */
  font-family: 'Noto Serif Display', serif;
  font-size: 1.5rem;
  font-weight: 100;
  text-align: center;
}

/* Responsive: ajustar tamaño del texto en diferentes pantallas */
@media (min-width: 640px) {
  .titulo-trufas {
    font-size: 1.875rem; /* text-2xl */
  }
  .titulo-trufas-container {
    padding: 3.5rem 1rem;
  }
}

@media (min-width: 768px) {
  .titulo-trufas {
    font-size: 2.25rem; /* text-3xl */
  }
  .titulo-trufas-container {
    padding: 4rem 1rem;
  }
}

/* ============================================
   TÍTULO PIONONO CON IMAGEN DE FONDO
   ============================================ */

/* Contenedor del título Pionono con imagen de fondo */
.titulo-pionono-container {
  position: relative;
  width: 100vw; /* Full width de lado a lado */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 3rem 1rem; /* Rectángulo chato: padding vertical moderado */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Para que el blur no se salga del contenedor */
}

/* Imagen de fondo con blur */
.titulo-pionono-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../images/products/piononos2.webp');
  background-size: cover;
  background-position: center; /* Mostrar el centro de la imagen */
  background-repeat: no-repeat;
  filter: blur(4px); /* Aplicar blur a la imagen de fondo */
  z-index: 0;
}

/* Overlay oscuro sobre la imagen de fondo con blur */
.titulo-pionono-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* Oscurece la imagen al 50% */
  z-index: 1;
}

/* Título Pionono: siempre blanco, sobre el overlay */
.titulo-pionono {
  position: relative;
  z-index: 2; /* Por encima del overlay */
  color: white !important; /* Siempre blanco, sin importar el modo */
  font-family: 'Noto Serif Display', serif;
  font-size: 1.5rem;
  font-weight: 100;
  text-align: center;
}

/* Responsive: ajustar tamaño del texto en diferentes pantallas */
@media (min-width: 640px) {
  .titulo-pionono {
    font-size: 1.875rem; /* text-2xl */
  }
  .titulo-pionono-container {
    padding: 3.5rem 1rem;
  }
}

@media (min-width: 768px) {
  .titulo-pionono {
    font-size: 2.25rem; /* text-3xl */
  }
  .titulo-pionono-container {
    padding: 4rem 1rem;
  }
}

/* ============================================
   TÍTULO TARTAS CON IMAGEN DE FONDO
   ============================================ */

/* Contenedor del título Tartas con imagen de fondo */
.titulo-tartitas-container {
  position: relative;
  width: 100vw; /* Full width de lado a lado */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 3rem 1rem; /* Rectángulo chato: padding vertical moderado */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Para que el blur no se salga del contenedor */
}

/* Imagen de fondo con blur */
.titulo-tartitas-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../images/products/tartitas.webp');
  background-size: cover;
  background-position: center; /* Mostrar el centro de la imagen */
  background-repeat: no-repeat;
  filter: blur(4px); /* Aplicar blur a la imagen de fondo */
  z-index: 0;
}

/* Overlay oscuro sobre la imagen de fondo con blur */
.titulo-tartitas-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* Oscurece la imagen al 50% */
  z-index: 1;
}

/* Título Tartas: siempre blanco, sobre el overlay */
.titulo-tartitas {
  position: relative;
  z-index: 2; /* Por encima del overlay */
  color: white !important; /* Siempre blanco, sin importar el modo */
  font-family: 'Noto Serif Display', serif;
  font-size: 1.5rem;
  font-weight: 100;
  text-align: center;
}

/* Responsive: ajustar tamaño del texto en diferentes pantallas */
@media (min-width: 640px) {
  .titulo-tartitas {
    font-size: 1.875rem; /* text-2xl */
  }
  .titulo-tartitas-container {
    padding: 3.5rem 1rem;
  }
}

@media (min-width: 768px) {
  .titulo-tartitas {
    font-size: 2.25rem; /* text-3xl */
  }
  .titulo-tartitas-container {
    padding: 4rem 1rem;
  }
}

/* ============================================
   TÍTULO QUEQUES CON IMAGEN DE FONDO
   ============================================ */

.titulo-queques-container {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 3rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.titulo-queques-container::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url('../images/products/queques.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(4px);
  z-index: 0;
}

.titulo-queques-container::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.titulo-queques {
  position: relative;
  z-index: 2;
  color: white !important;
  font-family: 'Noto Serif Display', serif;
  font-size: 1.5rem;
  font-weight: 100;
  text-align: center;
}

@media (min-width: 640px) {
  .titulo-queques { font-size: 1.875rem; }
  .titulo-queques-container { padding: 3.5rem 1rem; }
}

@media (min-width: 768px) {
  .titulo-queques { font-size: 2.25rem; }
  .titulo-queques-container { padding: 4rem 1rem; }
}

/* ============================================
   TÍTULO MIX DE DULCES CON IMAGEN DE FONDO
   ============================================ */

/* Contenedor del título Mix de dulces con imagen de fondo */
.titulo-mix-dulces-container {
  position: relative;
  width: 100vw; /* Full width de lado a lado */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 3rem 1rem; /* Rectángulo chato: padding vertical moderado */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Para que el blur no se salga del contenedor */
}

/* Imagen de fondo con blur */
.titulo-mix-dulces-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('../images/products/mix_dulces.webp');
  background-size: cover;
  background-position: center; /* Mostrar el centro de la imagen */
  background-repeat: no-repeat;
  filter: blur(4px); /* Aplicar blur a la imagen de fondo */
  z-index: 0;
}

/* Overlay oscuro sobre la imagen de fondo con blur */
.titulo-mix-dulces-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5); /* Oscurece la imagen al 50% */
  z-index: 1;
}

/* Título Mix de dulces: siempre blanco, sobre el overlay */
.titulo-mix-dulces {
  position: relative;
  z-index: 2; /* Por encima del overlay */
  color: white !important; /* Siempre blanco, sin importar el modo */
  font-family: 'Noto Serif Display', serif;
  font-size: 1.5rem;
  font-weight: 100;
  text-align: center;
}

/* Responsive: ajustar tamaño del texto en diferentes pantallas */
@media (min-width: 640px) {
  .titulo-mix-dulces {
    font-size: 1.875rem; /* text-2xl */
  }
  .titulo-mix-dulces-container {
    padding: 3.5rem 1rem;
  }
}

@media (min-width: 768px) {
  .titulo-mix-dulces {
    font-size: 2.25rem; /* text-3xl */
  }
  .titulo-mix-dulces-container {
    padding: 4rem 1rem;
  }
}

/* ============================================
   SECCIONES COLAPSABLES (ACORDEÓN)
   ============================================ */
/* Solo una abierta; título clickeable solo si está cerrada */
.seccion-toggle:not(.seccion-cerrada) { cursor: default; }
.seccion-toggle.seccion-cerrada { cursor: pointer; }
.seccion-toggle > h2 { cursor: default; }
.seccion-toggle.seccion-cerrada > h2 { cursor: pointer; }
.seccion-toggle:focus-visible { outline: 2px solid var(--gray-base); outline-offset: 2px; }

/* Flecha colapsable: abajo cuando cerrada, gira hacia arriba cuando abierta */
.seccion-toggle .seccion-arrow {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.5rem;
  transition: transform 0.2s ease;
  transform: rotate(0deg);
  color: white !important;
  opacity: 1 !important;
}

.seccion-toggle:not(.seccion-cerrada) .seccion-arrow { transform: rotate(180deg); }

.seccion-contenido {
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

.seccion-contenido.cerrada { 
  max-height: 0; 
  opacity: 0; 
  overflow: hidden; 
}

.seccion-contenido.cerrada.cerrada-instant { 
  transition: none; 
}

.seccion-contenido.abierta { 
  max-height: 5000px; 
  opacity: 1; 
  overflow: visible; 
  padding-bottom: 1.5rem; 
}

@media (max-width: 767px) {
  .seccion-contenido { position: relative; z-index: 2; }
  .seccion-contenido.cerrada { margin-top: 0; }
}

.seccion-descripcion {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgb(55 65 71);
  margin-bottom: 1.5rem;
  text-align: center;
}

.dark .seccion-descripcion { 
  color: rgb(209 213 219); 
}

@media (min-width: 640px) { 
  .seccion-descripcion { 
    font-size: 1rem; 
  } 
}