/**
 * ============================================
 * EVENTOS-CUSTOM.CSS
 * ============================================
 * Estilos específicos para la página de eventos (eventos.html)
 * Incluye: tipografía, precios, títulos con imágenes de fondo, secciones colapsables, grid de catálogo
 */

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

.font-serif { 
  font-family: 'Noto Serif Display', serif; 
  font-weight: 100; 
}

/* ============================================
   PRECIOS Y SUBTÍTULOS EN CARDS DE EVENTOS
   ============================================ */
.eventos-precio { 
  font-size: 1.05em; 
  font-weight: 600; 
  color: inherit; 
}

.eventos-subtitulo > div { 
  margin-bottom: 0.25rem; 
}

.eventos-subtitulo > div.eventos-mini-jumbo-espacio { 
  margin-top: 1rem; 
  margin-bottom: 1.25rem; 
}

/* ============================================
   SECCIONES COLAPSABLES (ACORDEÓN)
   ============================================ */
/* Secciones clickeables: mismo patrón que dulces-regulares (título con imagen de fondo, blur, overlay) */
.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: 50000px; 
  opacity: 1; 
  overflow: visible; 
}

/* Deslizamiento hacia arriba del contenido al abrir la sección */
.seccion-contenido > .catalogo-grid { 
  transition: transform 0.3s ease-out; 
}

.seccion-contenido.cerrada > .catalogo-grid { 
  transform: translateY(20px); 
}

.seccion-contenido.abierta > .catalogo-grid { 
  transform: translateY(0); 
}

.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.75rem;
  transition: transform 0.2s ease;
  transform: rotate(0deg);
  color: white !important;
}

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

/* ============================================
   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.
 */
.catalogo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem 2rem;
}

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

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

/* ============================================
   TÍTULO DULCES (EVENTOS) – IMAGEN DE FONDO
   ============================================ */
.titulo-eventos-dulces-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-eventos-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;
  background-repeat: no-repeat;
  filter: blur(4px);
  z-index: 0;
}

.titulo-eventos-dulces-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-eventos-dulces {
  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-eventos-dulces { font-size: 1.875rem; }
  .titulo-eventos-dulces-container { padding: 3.5rem 1rem; }
}

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

/* ============================================
   TÍTULO SALADOS (EVENTOS) – IMAGEN DE FONDO
   ============================================ */
.titulo-eventos-salados-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-eventos-salados-container::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url('../images/products/salados_eventos.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(4px);
  z-index: 0;
}

.titulo-eventos-salados-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-eventos-salados {
  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-eventos-salados { font-size: 1.875rem; }
  .titulo-eventos-salados-container { padding: 3.5rem 1rem; }
}

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