/* === FUENTES PERSONALIZADAS === */

/* Título principal */
@font-face {
  font-family: 'Glimmer of Light';
  src: url('../fuentes/glimmer_of_light.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* Fuente secundaria decorativa */
@font-face {
  font-family: 'Romantically';
  src: url('../fuentes/Romantically.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

/* Fuente para párrafos y cuerpo - Regular */
@font-face {
  font-family: 'Utendo';
  src: url('../fuentes/UTENDO-REGULAR.TTF') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* Fuente para negritas - Bold */
@font-face {
  font-family: 'Utendo';
  src: url('../fuentes/UTENDO-BOLD.TTF') format('truetype');
  font-weight: 700;
  font-style: normal;
}

/* === VARIABLES CSS === */
:root {
  /* Tipografías */
  --font-titulo: 'Glimmer of Light', sans-serif;
  --font-secundaria: 'Romantically', cursive;
  --font-parrafo: 'Utendo', sans-serif;

  /* Colores institucionales y derivados */
  --color-primary: #C3350C;
  --color-on-primary: #ffffff;
  --color-primary-container: #f4c1b5;
  --color-on-primary-container: #400100;

  --color-secondary: #D97A05;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #ffd6a5;
  --color-on-secondary-container: #4d2600;

  --color-tertiary: #002A36;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #a6cedc;
  --color-on-tertiary-container: #00141a;

  --color-error: #D97A05;
  --color-on-error: #ffffff;
  --color-error-container: #ffe2cc;
  --color-on-error-container: #4d2600;

  --color-surface: #0e1a1c;
  --color-on-surface: #ffffff;
  --color-surface-variant: #1e2f2e;

  --color-outline: #6c7a78;
  --color-outline-variant: #334746;

  --color-inverse-surface: #ffffff;
  --color-inverse-on-surface: #002a36;
  --color-inverse-primary: #ffb9ab;
}


@view-transition {
  navigation: auto;
}

html::view-transition-old(root),
html::view-transition-new(root) {
  animation-duration: 0.4s;
  animation-timing-function: ease-in-out;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-parrafo);
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  overflow-x: hidden;
}

p,
.texto-tarjeta {
  line-height: 1.7;
  letter-spacing: 0.3px;
  max-width: 65ch;
  margin: 0 auto 1.2rem;
}

/* FRASE IMPACTO EN HERO */
.frase-impacto {
  color: var(--color-on-primary);
  font-family: var(--font-secundaria);
  font-style: italic;
  font-weight: normal;
  display: inline-block;
  animation: fadeInUp 1.5s ease-out;
}

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

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* HERO */
.hero-header {
  height: 100vh;
  position: relative;
  overflow: hidden;
}


.hero-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover; 
  /* AÑADIDO: Centra la imagen para que lo importante esté visible */
  object-position: center center; 
  top: 0;
  left: 0;
  z-index: 1;
}

.hero-overlay {
  position: relative;
  z-index: 2;
  background: rgba(12, 45, 44, 0.4);
  height: 100%;
  width: 100%;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.titulo-hero {
  font-size: 3rem;
  font-family: var(--font-titulo);
  font-weight: normal;
  margin-bottom: 20px;
}

.subtexto-hero {
  font-size: 1.2rem;
  max-width: 600px;
  text-align: center;
  margin-bottom: 30px;
  color: #e0e0e0;
}

.boton-principal {
  font-family: var(--font-parrafo);
  /* AÑADIDO */
  background-color: var(--color-tertiary);
  color: var(--color-on-tertiary);
  padding: 12px 30px;
  border-radius: 50px;
  border: none;
  font-weight: bold;
  font-size: 1rem;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

.boton-principal:hover {
  background-color: var(--color-primary);
  transform: scale(1.05);
}


/* ONDA INFERIOR */
.onda-inferior {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 180px;
  overflow: hidden;
  line-height: 0;
  z-index: 2;
}

.wave {
  width: 200%;
  height: 100%;
  animation: waveMove 8s linear infinite;
}

.waveGroup {
  animation: waveShift 4s ease-in-out infinite;
}

@keyframes waveMove {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes waveShift {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(5px);
  }
}

@media (max-width: 768px) {
  .onda-inferior {
    height: 80px;
    /* Más baja en móvil */
  }

  .wave {
    height: 100%;
    transform: scaleY(0.5);
    /* Aplasta verticalmente */
    transform-origin: top;
  }
}


/* SECCIÓN ONDAS */
.seccion-ondas {
  background-color: var(--color-tertiary);
  padding: 100px 0 60px;
}

/* Estilos personalizados para la onda desde CSS */
.wave-fill {
  fill: var(--color-tertiary);
}

.wave-fill-secondary {
  fill: rgba(0, 42, 54, 0.5);
  /* tono suave derivado del terciario */
}

/* TARJETAS */
.tarjeta {
  text-align: center;
  margin-bottom: 2rem;
}

.tarjeta a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.titulo-tarjeta {
  margin-top: 1rem;
  font-size: 1.3rem;
  color: var(--color-primary);
  font-family: var(--font-titulo);
  transition: color 0.3s ease;
}

.tarjeta a:hover .titulo-tarjeta {
  color: var(--color-secondary);
  transform: scale(1.05);
}

.texto-tarjeta {
  color: var(--color-on-surface);
  font-family: var(--font-parrafo);
  font-size: 1rem;
  opacity: 0.9;
}

.texto-tarjeta,
.center-subtitle,
p {
  font-family: var(--font-parrafo);
}


.tarjeta a:link,
.tarjeta a:visited {
  color: inherit;
}


/* EFECTO HOVER CON MÁSCARA RADIAL INTERACTIVA */
.img-hover-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  width: 100%;
  height: 220px;
  background-color: transparent;
  /* o elimínalo */
}

.img-hover-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}


.img-hover-wrapper .img-hovered {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  --mask-x: 50%;
  --mask-y: 50%;
  mask-image: radial-gradient(ellipse 100px 40px at var(--mask-x) var(--mask-y), rgba(0, 0, 0, 1) 0%, transparent 0%);
  -webkit-mask-image: radial-gradient(ellipse 100px 40px at var(--mask-x) var(--mask-y), rgba(0, 0, 0, 1) 0%, transparent 0%);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: cover;
  -webkit-mask-size: cover;
  transition: mask-image 0.1s, -webkit-mask-image 0.1s;
}

/* Activación en hover: transiciona suavemente al pasar el cursor */
.img-hover-wrapper:hover .img-hovered {
  transform: scale(1.05);
}

.img-hover-wrapper:hover .img-normal {
  transform: scale(1.05);
}

/* Contenedor especial para controlar la máscara */
.mascara-radial {
  position: relative;
}

/* La máscara es invisible hasta el hover */
.mask {
  display: none;
}

.img-hovered,
.img-normal {
  transition: opacity 0.3s ease;
}


.mascara-radial:hover .mask {
  opacity: 1;
}

/* LOADER DE CARGA */
#loader {
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1e2f2e;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 1rem;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--color-secondary);
  /* Naranja institucional */
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
  font-family: var(--font-parrafo);
  /* AÑADIDO */

}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* FOOTER */
.footer {
  background-color: var(--color-tertiary);
  color: white;
  text-align: center;
  padding: 40px 20px;
  font-size: 0.95rem;
  height: 47vh;
}

.cirgaita {
  width: 100px;
  height: 100px;
  position: relative;
  top: 0px;
  left: 0px;
  background-color: var(--color-primary-container);
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  margin: 0 auto;
  margin-top: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
  padding: 3px;
}

.footer img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px;
}

.footer .redes a {
  color: var(--color-secondary);
  text-decoration: none;
  margin: 0 8px;
  font-family: var(--font-parrafo);
  /* AÑADIDO */

}

.footer .redes a:hover {
  text-decoration: underline;
}

.footer .redes {
  margin-top: 10px;
}

/* NAVBAR TIPO CÁPSULA FLOTANTE ABAJO */
.floating-navbar {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
}

/* BOTÓN HAMBURGUESA REDONDO */
.hamburger {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: var(--color-on-primary);
  /* fondo blanco */
  border: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.hamburger span {
  display: block;
  width: 28px;
  height: 3px;
  background-color: var(--color-primary);
  /* líneas rojas institucionales */
  border-radius: 4px;
  transition: all 0.4s ease;
}

/* ANIMACIÓN DE CRUZ CUANDO SE ABRE */
.hamburger.active span:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* MENÚ EN PANTALLA COMPLETA */
.menu-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--color-surface);
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scaleY(0);
  transform-origin: top;
  opacity: 0;
  z-index: 9998;
  transition: transform 0.6s ease-in-out, opacity 0.3s ease-in-out;
}

.menu-fullscreen.open {
  transform: scaleY(1);
  opacity: 1;
}

/* ITEMS DEL MENÚ */
.menu-items {
  list-style: none;
  padding: 0;
  text-align: center;
}



.menu-items li {
  opacity: 0;
  transform: translateY(20px);
  margin: 20px 0;
  transition: all 0.4s ease-in-out;
}

.menu-fullscreen.open .menu-items li {
  opacity: 1;
  transform: translateY(0);
}

/* DELAY DE APARICIÓN ESCALONADO */
.menu-items li:nth-child(1) {
  transition-delay: 0.2s;
}

.menu-items li:nth-child(2) {
  transition-delay: 0.4s;
}

.menu-items li:nth-child(3) {
  transition-delay: 0.6s;
}

.menu-items li:nth-child(4) {
  transition-delay: 0.8s;
}

.menu-items li:nth-child(5) {
  transition-delay: 1s;
}

.menu-items li:nth-child(6) {
  transition-delay: 1.2s;
}

.menu-items li:nth-child(7) {
  transition-delay: 1.4s;
}

.menu-items li:nth-child(8) {
  transition-delay: 1.6s;
}

/* Estilos para el menú de navegación */



/* ENLACES DEL MENÚ */
.menu-items a {
  font-family: var(--font-titulo);
  /* AÑADIDO */
  font-size: 1rem;
  color: white;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s;
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
}

.menu-items a:hover {
  color: var(--color-primary);
  /* o var(--color-secondary) si quieres naranja al hover */
}

/* MINIATURA DE IMAGEN AL LADO DEL LINK (si se usa) */
.menu-thumb {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  object-fit: cover;
  border: 2px solid white;
}

@media (max-width: 768px) {
  .hamburger {
    width: 50px;
    height: 50px;
  }

  .menu-items a {
    font-size: 1.5rem;
  }

  .menu-thumb {
    display: none;
  }

  .fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
  }

  .fade-hidden {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }

  .fade-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .fade-visible-hidden {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }
}

/* ============================
    /* CONTENEDOR ÚNICO PARA GALERÍA */
.gallery-container-unique {
  background: linear-gradient(180deg,
      var(--color-tertiary) 0%,
      #1a252f 50%,
      #243040 100%);
}

.gallery-container-unique::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, rgba(217, 122, 5, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

/* GALERÍA CIRCULAR MEJORADA */
.enhanced-gallery {
  position: relative;
  width: 100%;
  height: 180vh;
  /* Se mantiene para el espacio total de la galería */
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}


.gallery-item {
  position: absolute;
  /* Se mantiene absoluto para la distribución circular */
  width: 140px;
  /* Ancho base de la tarjeta */
  height: 200px;
  /* Alto base de la tarjeta */
  border-radius: 20px;
  overflow: hidden;
  /* Asegura que el contenido no se salga */
  cursor: pointer;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  border: 2px solid transparent;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(10px);

  /* NUEVO: Contenedor flex para organizar imagen y texto */
  display: flex;
  flex-direction: column;
  /* Apila la imagen y el panel de información */
  align-items: center;
  /* Centra el contenido horizontalmente */
  justify-content: flex-start;
  /* Alinea el contenido al inicio de la tarjeta */
  padding-top: 10px;
  /* Pequeño padding en la parte superior para la imagen */
}

/* NUEVO: Estilo para la imagen principal de la tarjeta (ahora no es overlay) */
.gallery-item .gallery-main-image {
  width: 100%;
  /* Ancho de la imagen dentro de la tarjeta */
  height: auto;
  /* La altura se ajusta automáticamente para mantener la proporción */
  max-height: 100%;
  /* La imagen no tomará más del 55% del alto disponible del .gallery-item */
  object-fit: contain;
  /* ¡CRÍTICO! Asegura que la imagen completa sea visible, sin cortes */
  border-radius: 10px;
  /* Bordes redondeados para la imagen */
  margin-bottom: 10px;
  /* Espacio entre la imagen y el panel de texto */
  transition: transform 0.6s ease;
  /* Mantener la transición al pasar el mouse */
}

.gallery-item.active .gallery-main-image {
    width: 50%;
}

/* Efecto hover: la tarjeta completa crece y la imagen también */
.gallery-item:hover {
  transform: scale(1.1);
  box-shadow: 0 20px 40px rgba(217, 122, 5, 0.3);
  border-color: var(--color-secondary);
}

.gallery-item:hover .gallery-main-image {
  transform: scale(1.05);
  /* Ligeramente más grande al pasar el mouse */
}


/* Estado activo de la tarjeta */
.gallery-item.active {
  width: 400px;
  /* Ancho más grande cuando está activa */
  height: 600px;
  /* AUMENTADO: Mucho más alta para el contenido */
  z-index: 100;
  /* Asegura que esté al frente */
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
  border-color: var(--color-secondary);
  padding: 15px;
  /* Ajusta el padding para el tamaño activo */
}

.gallery-item.hidden {
  opacity: 0.3;
  transform: scale(0.8);
}


/* NUEVO: Panel de información (texto) */
.gallery-info-panel {
  width: 100%;
  /* Ocupa todo el ancho disponible */
  padding: 0 1.5rem 1.5rem;
  /* Padding para el contenido del texto */
  text-align: center;

  /* Controla la visibilidad y animación del panel */
  opacity: 0;
  transform: translateY(10px);
  /* Pequeño efecto de deslizamiento al aparecer */
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;

  background: none;
  /* No tiene fondo degradado; la tarjeta ya lo tiene */
  color: white;
  /* Color del texto */

  /* MODIFICACIONES PARA GESTIONAR ESPACIO Y SCROLL DENTRO DEL PANEL */
  display: flex;
  /* Habilita Flexbox para organizar los hijos */
  flex-direction: column;
  /* Apila título, descripción, detalles */
  /* Alinea el contenido hacia la parte inferior del panel */
}



/* Cuando la tarjeta está activa, el panel de información se hace visible */
.gallery-item.active .gallery-info-panel {
  opacity: 1;
  transform: translateY(0);
}



.gallery-item.active .image-info {
  transform: translateY(0);
}

/* Estilos para el título */
.image-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--color-secondary);
  font-family: var(--font-titulo);
}

.image-description,
.image-details {
  font-family: var(--font-parrafo);
  /* AÑADIDO */
}

/* Estilos para la descripción */
.image-description {
  font-size: 0.9rem;
  line-height: 1.4;
  opacity: 0.9;

  /* MODIFICACIONES PARA SCROLL DEL TEXTO LARGO */
  flex-grow: 1;
  /* Permite que la descripción crezca y ocupe el espacio disponible */
  overflow-y: auto;
  /* Añade una barra de desplazamiento vertical si el contenido excede la altura */
  max-height: 150px;
  /* AUMENTADO SIGNIFICATIVAMENTE: Permite más líneas antes del scroll */
  margin-bottom: 0.5rem;
  /* Espacio entre descripción y detalles */

  /* Estilos personalizados para la barra de scroll (Firefox) */
  scrollbar-width: thin;
  scrollbar-color: var(--color-outline) var(--color-surface);
}

/* Estilos de la barra de desplazamiento para navegadores basados en WebKit (Chrome, Safari, Edge) */
.image-description::-webkit-scrollbar {
  width: 8px;
}

.image-description::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.image-description::-webkit-scrollbar-thumb {
  background-color: var(--color-outline);
  border-radius: 10px;
  border: 2px solid transparent;
}

.image-description::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-secondary);
}

/* Estilos para los detalles (ubicación, año) */
.image-details {
  display: flex;
  gap: 1rem;
  margin-top: auto;
  /* Empuja los detalles al final del panel */
  font-size: 0.8rem;
  opacity: 0.7;
  font-family: var(--font-parrafo);
  justify-content: center;
  /* Centrar los detalles */
}


/* CONTROLES */
.gallery-controls {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 200;
}

.control-btn {
  background: rgba(217, 122, 5, 0.8);
  border: none;
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.control-btn:hover {
  background: var(--color-secondary);
  transform: scale(1.1);
  box-shadow: 0 5px 15px rgba(217, 122, 5, 0.4);
}

.prev-control {
  left: 2rem;
}

.next-control {
  right: 2rem;
}

@media (max-width: 768px) {
  .enhanced-gallery {
    height: 100vh;
    padding: 0.5rem;
  }


  /* Ajustes para el .gallery-item base en móvil */
  .gallery-item {
    width: 80px;
    height: 100px;
    padding-top: 10px;
    margin-left: 30px;
    margin-top: 37px;
  }

  /* Ajustes para la imagen principal en móvil */
  .gallery-item .gallery-main-image {
    max-height: 100%;
  }


  /* Ajustes para el .gallery-item activo en móvil */
  .gallery-item.active {
    width: 280px;
    height: 500px;
    /* AUMENTADO: Mucho más alta para la tarjeta activa en móvil */
  }

  /* Ajustes para el panel de información en móvil */
  .gallery-info-panel {
    padding: 0 1rem 1rem;

  }

  .image-title {
    font-size: 1.2rem;
    margin-bottom: 0.4rem;
  }

  .image-description {
    font-size: 0.85rem;
    line-height: 1.3;
    max-height: 100px;
    /* AUMENTADO SIGNIFICATIVAMENTE para móvil */
  }

  .image-details {
    font-size: 0.75rem;
    margin-top: 0.6rem;
  }

  /* Controles (botones de navegación izquierda/derecha) */
  .control-btn {
    width: 50px;
    height: 50px;
    font-size: 1.6rem;
  }


}


/* INDICADOR CENTRAL */
.gallery-center-info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.gallery-center-info.visible {
  opacity: 1;
}

.center-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--color-secondary);
  font-family: var(--font-titulo);
  /* YA CORRECTO */
}

.center-subtitle {
  font-size: 1.1rem;
  opacity: 0.8;
  font-family: var(--font-parrafo);
  /* AÑADIDO */
}

/* === Galería Scroll - Estilos de contenedor === */
.gallery-container-scroll {
  position: relative;
  /* Fondo con degradado difuminado similar a .gallery-container-unique */
  background: linear-gradient(180deg,
      #243040 0%,          /* <--- Comienza donde el otro terminó */
      var(--color-surface) 100%  /* <--- Termina en el color base de tu sitio */
    );
}

.gallery-container-scroll::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, rgba(217, 122, 5, 0.1) 0%, transparent 70%);
  pointer-events: none;
}

/* Contenedor interno centrado y espaciamiento */
.scroll-gallery {
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

/* === Galería Scroll - Estilos de elementos === */
.scroll-gallery-item {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 4rem;
}

/* MODIFICAR: Contenedor para las dos imágenes del efecto de revelado */
.scroll-item-image.reveal-mask-container {
  position: relative;
  /* CRUCIAL: Necesario para posicionar absolutamente las imágenes hijas */
  width: 100%;
  height: 800px;
  /* IMPORTANTE: Define una altura fija o min-height para el contenedor de la imagen.
                     El tamaño de la imagen dentro se ajustará a esto.
                     Puedes ajustar este valor para que se vea bien en tu diseño. */
  overflow: hidden;
  /* Oculta cualquier parte de la máscara que se salga de los límites del contenedor */
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* NUEVO: Estilos para AMBAS imágenes dentro de .reveal-mask-container */
.scroll-item-image.reveal-mask-container img {
  position: absolute;
  /* Permite que las imágenes se superpongan */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Asegura que la imagen cubra el área sin distorsionarse */
}

/* NUEVO: La imagen de primer plano a la que se le aplicará la máscara SVG */
.img-mask-overlay {
  z-index: 2;
  /* Asegura que esta imagen esté por encima de la imagen a revelar */
  opacity: 1;
  /* Inicialmente visible para ocultar la imagen de fondo */
  /* Las propiedades de máscara (mask, webkit-mask) se establecerán y animarán con JavaScript */
}

/* NUEVO: La imagen de fondo que será revelada */
.img-revealed {
  z-index: 1;
  /* Estará debajo de la imagen de máscara */
}

/* ... (continúa con el resto de tus estilos de la sección scroll y media queries) ... */
.scroll-item-text h3 {
  font-family: var(--font-titulo);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: 0.5rem;
}

.scroll-item-text p {
  font-family: var(--font-parrafo);
  line-height: 1.6;
  /* Evitar centrado automático de párrafos global */
  margin: 0 0 1.2rem 0;
  max-width: 65ch;
}

/* Disposición alterna: los bloques pares invierten orden (imagen a la derecha, texto a la izquierda) */
.scroll-gallery-item:nth-child(even) {
  flex-direction: row-reverse;
}

/* Responsive: en pantallas pequeñas, apilar columna */
/*==================================================*/
/* Pega este bloque corregido o simplemente añade !important a tu código */
/*==================================================*/

@media (max-width: 768px) {

  .scroll-gallery-item,
  .scroll-gallery-item:nth-child(even) {
    /* Con !important, esta regla ganará y forzará a TODOS los bloques a apilarse */
    flex-direction: column !important;
    text-align: center;
  }

  .scroll-gallery-item {
    margin-bottom: 2.5rem;
  }

  .scroll-item-image.reveal-mask-container {
    height: 60vh;
    width: 95%;
    margin: 0 auto;
  }

  .scroll-item-text {
    text-align: center;
    width: 95%;
    margin: 1.5rem auto 0;
  }
}

/* === Animaciones de aparición con scroll === */
.scroll-reveal {
  opacity: 0;
  transform: translateY(20vh);
  visibility: hidden;
  transition: opacity 0.6s ease-out, transform 1.2s ease-out;
  will-change: opacity, transform, visibility;
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

/* ... (tus estilos existentes al inicio de style.css) ... */

/* AÑADIR ESTOS ESTILOS */
/* Oculta el SVG de la máscara para que no ocupe espacio visual en el diseño */
.hidden-svg-mask {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Estilos para el indicador visual de clic en la Galería Scroll */
.click-indicator-scroll {
  position: absolute;
  background-color: var(--color-secondary);
  /* Usa tu variable de color institucional */
  border-radius: 50%;
  /* Lo convierte en un círculo */
  opacity: 0;
  /* Inicialmente invisible */
  width: 20px;
  /* Tamaño del indicador */
  height: 20px;
  /* Centra el indicador perfectamente en el punto de clic */
  transform: translate(-50%, -50%) scale(1);
  /* Transiciones suaves para la aparición y desaparición */
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
  pointer-events: none;
  /* Asegura que el indicador no interfiera con los clics */
  z-index: 10;
  /* Lo coloca por encima de las imágenes */
}

/* style.css */

.gallery-item-title,
.gallery-item-description {
  transition: opacity 0.5s ease-in-out;
}

/* ... (continúa con tus estilos existentes hasta la sección de Galería Scroll) ... */
/* ======================================================================== */
/* === AJUSTES RESPONSIVE PARA LA GALERÍA DE SCROLL (NUEVO) === */
/* ======================================================================== */

/* --- 1. SOLUCIÓN PARA EL RESPONSIVE EN MÓVILES --- */

/* En pantallas de 768px o menos (móviles y tablets pequeñas)... */
@media (max-width: 768px) {

  /* Hacemos que el contenedor de la galería ocupe menos espacio */
  .scroll-gallery {
    padding: 2rem 1rem;
    /* Reducimos el padding */
  }

  /* El contenedor de la imagen ya no tendrá una altura fija de 800px, 
     sino una altura más razonable y proporcional. */
  .scroll-item-image.reveal-mask-container {
    /* Usamos 60vh (60% de la altura de la pantalla) para que se adapte a cualquier móvil.
       Puedes cambiar este valor si lo quieres más alto o más bajo. */
    height: 60vh;
    width: 95%;
    /* Hacemos que ocupe casi todo el ancho */
    margin: 0 auto;
    /* Lo centramos */
  }

  /* Centramos el texto que acompaña a la imagen */
  .scroll-item-text {
    text-align: center;
    width: 95%;
    margin: 1.5rem auto 0;
    /* Añadimos un margen superior */
  }
}


/* --- 2. SOLUCIÓN PARA MOSTRAR IMÁGENES VERTICALES Y HORIZONTALES --- */

/* Modificamos el contenedor de la imagen para que tenga un fondo sutil.
   Esto es para que si una imagen no llena todo el espacio, no se vea un vacío negro. */
.scroll-item-image.reveal-mask-container {
  background-color: rgba(0, 0, 0, 0.2);
  /* Fondo oscuro semitransparente */
  display: flex;
  /* Centramos la imagen hija */
  justify-content: center;
  align-items: center;
}

/* El cambio MÁS IMPORTANTE está aquí. 
   Cambiamos "object-fit: cover" por "object-fit: contain". */
.scroll-item-image.reveal-mask-container img {
  /* "contain" asegura que TODA la imagen (sea vertical u horizontal) 
     siempre sea visible dentro del contenedor, sin ser recortada. */
  object-fit: contain;

  /* Hacemos que la imagen no ocupe necesariamente el 100% del alto/ancho,
     sino que se ajuste manteniendo su proporción. */
  max-width: 100%;
  background-color: rgba(0, 0, 0, 0.0001);
}

/* Tenemos que ajustar también la imagen de la máscara para que siga la misma lógica */
.img-mask-overlay {
  /* La volvemos a poner encima con position: absolute */
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
}

/* ======================================================================== */
/* === ESTILOS PARA LA NUEVA SECCIÓN DE PERSONAJES (ESTILO POLAROID) === */
/* ======================================================================== */

/* Estilos para el título de la nueva sección */
.section-title-container {
  text-align: center;
  padding: 3rem 1rem 1rem;
  max-width: 800px;
  margin: 0 auto;
}

.section-title-container h2 {
  font-family: var(--font-titulo);
  font-size: 2.5rem;
  color: var(--color-secondary);
  margin-bottom: 0.5rem;
}

.section-title-container p {
  font-size: 1.5rem;
  color: var(--color-on-surface);
  opacity: 0.8;
}

/* Le damos la forma de Polaroid al contenedor de la imagen */
.character-item .scroll-item-image {
  /* Borde blanco hueso, más grueso en la parte de abajo */
  padding: 15px 15px 70px 15px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
  transform: rotate(-2.5deg);
  /* Le damos una ligera rotación */
  transition: transform 0.4s ease-in-out;
}

/* Al pasar el cursor, la "foto" se endereza y crece un poco */
.character-item:hover .scroll-item-image {
  transform: rotate(0deg) scale(1.03);
}

/* El nombre del personaje lo ponemos en el borde de la Polaroid */
.character-item .scroll-item-text h3 {
  position: relative;
  top: -55px;
  /* Sube el título para que se monte sobre el borde inferior */
  font-family: var(--font-titulo);
  font-size: 2.2rem;
  color: var(--color-secondary);
  text-align: center;
  margin-bottom: -30px;
  /* Reducimos el espacio que ocupa */
}

/* La descripción del personaje */
.character-item .scroll-item-text p {
  font-size: 1.1rem;
  font-style: italic;
  color: var(--color-on-surface);
  opacity: 0.9;
  text-align: center;
}

/* Ajustes para que se vea bien en móviles */
@media (max-width: 768px) {
  .character-item .scroll-item-image {
    transform: rotate(0);
    /* Quitamos la rotación en pantallas pequeñas */
  }

  .character-item .scroll-item-text h3 {
    top: -45px;
    font-size: 1.8rem;
  }
}

/* ======================================================================== */
/* === ESTILOS PARA LA ESCENA DE A-FRAME RESPONSIVE (CORREGIDO) === */
/* ======================================================================== */

.seccion-aframe {
  padding: 4rem 0;
  background-color: var(--color-tertiary);
}

/* Contenedor que hará que la escena 3D sea responsive */
.aframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  /* Esta es la proporción para pantallas grandes (escritorio) */
  aspect-ratio: 16 / 9;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Estilo para la escena de A-Frame cuando está dentro de nuestro contenedor */
.aframe-container a-scene {
  width: 100%;
  height: 100%;
}


/* ================================================= */
/* === ¡LA CORRECCIÓN PARA MÓVILES ESTÁ AQUÍ! === */
/* ================================================= */
@media (max-width: 768px) {
  .aframe-container {
    /* En móvil, cambiamos la proporción para que sea más ALTA que ancha */
    aspect-ratio: 4 / 5;
    border-radius: 0;
    /* Opcional: quita los bordes redondeados en móvil */
  }
}

/* ======================================================================== */
/* === ESTILOS COMPLETOS PARA EL CHAT DE DON GAITALOMA === */
/* ======================================================================== */

/* --- 1. Contenedor principal del chat --- */
#chat-container {
  max-width: 800px;
  margin: 2rem auto;
  padding: 1.5rem;
  background-image: url("../img/gaita360.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  /* Fondo con imagen de Gaita 360 */
  background-blend-mode: overlay;
  /* Mezcla la imagen con el fondo */
  background-color: rgba(0, 0, 0, 0.5);
  /* Fondo oscuro semitransparente */
  background-color: var(--color-surface-variant);
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  min-height: 50vh;
  /* Separamos el chat de la barra de entrada inferior */
  padding-bottom: 80px;
}

/* --- 2. Estructura Fila de Mensaje y Avatar --- */
.mensaje-fila {
  display: flex;
  align-items: flex-end;
  /* Alinea el avatar con la base de la burbuja */
  gap: 15px;
  /* Espacio entre el avatar y el mensaje */
  max-width: 90%;
}

.avatar-chat {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 2px solid var(--color-outline);
  object-fit: cover;
  flex-shrink: 0;
  /* Evita que el avatar se encoja */
}

/* Para los mensajes de usuario, invertimos el orden */
.mensaje-fila.user {
  flex-direction: row-reverse;
  align-self: flex-end;
  /* La fila completa se alinea a la derecha */
}

/* Los mensajes de bot se quedan a la izquierda (por defecto) */
.mensaje-fila.bot {
  align-self: flex-start;
}


/* --- 3. Burbujas de los mensajes con "Cola" --- */
.mensaje {
  position: relative;
  /* Necesario para posicionar la cola */
  padding: 12px 18px;
  border-radius: 20px;
  line-height: 1.6;
  font-family: var(--font-parrafo);
  color: var(--color-on-tertiary-container);
}

/* Estilo para los mensajes del BOT (Don Gaitaloma) */
.mensaje.bot {
  background-color: var(--color-tertiary-container);
  border-bottom-left-radius: 4px;
  /* Le da forma de burbuja de chat */
  text-align: left;
}

/* Estilo para los mensajes del USUARIO (cuando hace clic en una opción) */
.mensaje.user {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border-bottom-right-radius: 4px;
  /* Forma de burbuja en el otro lado */
  text-align: right;
}

/* La "cola" de la burbuja, creada con un pseudo-elemento */
.mensaje::after {
  content: '';
  position: absolute;
  bottom: 6px;
  width: 0;
  height: 0;
  border: 8px solid transparent;
}

.mensaje.bot::after {
  left: -12px;
  /* Posición de la cola a la izquierda */
  border-right-color: var(--color-tertiary-container);
  /* El color de la burbuja */
}

.mensaje.user::after {
  right: -12px;
  /* Posición de la cola a la derecha */
  border-left-color: var(--color-primary);
  /* El color de la burbuja de usuario */
}


/* --- 4. Contenedor de los botones de opción --- */
.opciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 1rem;
  align-self: center;
  /* Centra el contenedor de botones */
  width: 100%;
}

/* --- 5. Estilo de cada botón de opción --- */
.opciones button {
  background-color: var(--color-on-secondary);
  color: var(--color-secondary);
  border: 2px solid var(--color-secondary);
  font-family: var(--font-parrafo);
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.opciones button:hover {
  background-color: var(--color-secondary);
  color: var(--color-on-secondary);
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(217, 122, 5, 0.3);
}

/* --- 6. Barra de Entrada de Texto --- */
.chat-input-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem;
  background-color: var(--color-surface);
  display: flex;
  gap: 10px;
  border-top: 1px solid var(--color-outline);
}

.chat-input-bar input {
  flex-grow: 1;
  padding: 12px 15px;
  border-radius: 50px;
  border: 1px solid var(--color-outline-variant);
  background-color: var(--color-surface-variant);
  color: white;
  font-family: var(--font-parrafo);
  font-size: 1rem;
}

.chat-input-bar button.boton-enviar {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.chat-input-bar button.boton-enviar:hover {
  background-color: #ff8a65;
}

/* --- Estilo para el Indicador de "Escribiendo..." --- */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 5px;
  background-color: var(--color-tertiary-container);
  border-radius: 20px;
  padding: 10px 15px;
  width: fit-content;
  /* Se ajusta al contenido */
  border-bottom-left-radius: 4px;
}

.typing-indicator span {
  height: 8px;
  width: 8px;
  background-color: var(--color-on-tertiary-container);
  border-radius: 50%;
  opacity: 0.6;
  animation: typing-bounce 1.2s infinite ease-in-out;
}

/* Retraso en la animación para cada bolita */
.typing-indicator span:nth-of-type(2) {
  animation-delay: -1.0s;
}

.typing-indicator span:nth-of-type(3) {
  animation-delay: -0.8s;
}

@keyframes typing-bounce {

  0%,
  80%,
  100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1.0);
  }
}

/* ======================================================================== */
/* === ESTILOS PARA EL FORMULARIO EN EL FOOTER === */
/* ======================================================================== */

.footer-form-container {
  max-width: 600px;
  margin: 0 auto 2.5rem auto;
  /* Espaciado inferior */
  padding: 1.5rem;
  background-color: var(--color-surface);
  border-radius: 15px;
  text-align: center;
}

.footer-form-container h4 {
  font-family: var(--font-titulo);
  color: var(--color-error);
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
}

.footer-form-container p {
  font-size: 0.95rem;
  opacity: 0.8;
  margin-bottom: 1.5rem;
}

.footer-subscribe-form {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.footer-subscribe-form input {
  flex-grow: 1;
  max-width: 300px;
  padding: 12px 15px;
  border-radius: 50px;
  border: 1px solid var(--color-outline);
  background-color: var(--color-surface);
  color: white;
  font-family: var(--font-parrafo);
}

.footer-subscribe-form button {
  padding: 12px 25px;
  /* Ajuste de padding para el botón */
}

/* Ajustes para pantallas pequeñas */
@media (max-width: 576px) {
  .footer-subscribe-form {
    flex-direction: column;
    /* Apila el input y el botón en móviles */
    align-items: center;
  }

  .footer-subscribe-form input {
    width: 100%;
  }
}

/* ======================================================================== */
/* === ESTILO PARA EL SCROLLBAR GENERAL DE LA PÁGINA === */
/* ======================================================================== */

/* --- Para Firefox --- */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--color-secondary) var(--color-surface);
}

/* --- Para Chrome, Safari, Edge --- */
html::-webkit-scrollbar {
  width: 14px;
}

html::-webkit-scrollbar-track {
  background: var(--color-surface);
}

html::-webkit-scrollbar-thumb {
  background-color: var(--color-outline);
  border-radius: 20px;
  border: 3px solid var(--color-surface);
  transition: background-color 0.3s ease;
}

html::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-secondary);
  box-shadow: 0 0 10px var(--color-secondary);
  /* Efecto de brillo */
}

/* ======================================================================== */
/* === ESTILOS PARA LA PÁGINA "SOBRE NOSOTROS" === */
/* ======================================================================== */

.about-section {
  padding: 4rem 0;
  background-color: var(--color-surface-variant);
}

.team-section {
  padding: 4rem 0;
  background-color: var(--color-surface);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.team-card {
  perspective: 1500px;
}

.team-card-inner {
  position: relative;
  width: 100%;
  padding-bottom: 125%;
  /* Proporción 4:5 */
  transition: transform 0.7s;
  transform-style: preserve-3d;
}

.team-card.flipped .team-card-inner {
  transform: rotateY(180deg);
}

.team-card-front,
.team-card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.team-card-front {
  background: var(--color-surface-variant);
}

.team-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.team-card:hover .team-photo {
  transform: scale(1.05);
}

.team-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(14, 26, 28, 0.9) 20%, transparent);
  color: white;
}

.team-name {
  font-family: var(--font-titulo);
  font-size: 1.8rem;
  color: white;
  margin: 0;
}

.team-role {
  font-size: 1rem;
  color: var(--color-secondary);
  font-weight: bold;
  margin: 0;
}

.team-card-back {
  background-color: var(--color-inverse-on-surface);
  color: var(--white);
  transform: rotateY(180deg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
}

.team-card-back h4 {
  font-family: var(--font-titulo);
  color: var(--color-primary);
}

.team-card-back h5 {
  font-weight: bold;
  margin-top: 1rem;
}

.team-card-back ul {
  list-style-type: none;
  padding: 0;
  font-size: 0.9rem;
}

/* En assets/css/style.css */

/* === ¡NUEVO! Estilos para la Cuadrícula del Equipo 2x2 === */

.team-grid-square {
  display: grid;
  /* Creamos una cuadrícula de 2x2 */
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2rem;
  max-width: 900px;
  /* Ancho máximo para el contenedor */
  margin: 0 auto;
  position: relative;
  /* Para posicionar el logo en el centro */
}

/* El logo de Don Gaitaloma en el centro */
.team-center-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  background-color: var(--color-surface-variant);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-shadow: 0 0 0 10px var(--color-surface), 0 5px 20px rgba(0, 0, 0, 0.5);
  z-index: 20;
}

.team-center-logo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* --- Responsive para la cuadrícula --- */
@media (max-width: 768px) {
  .team-grid-square {
    /* En móvil, volvemos a una sola columna */
    grid-template-columns: 1fr;
  }

  .team-center-logo {
    /* Ocultamos el logo central en móvil para no sobrecargar el diseño */
    display: none;
  }
}

/* ======================================================================== */
/* === ESTILOS PARA LA NUEVA PÁGINA DE EVENTOS === */
/* ======================================================================== */

.events-container {
  background-color: var(--color-surface);
  padding: 4rem 0;
}

.filters-and-search-bar {
  background-color: var(--color-surface-variant);
  padding: 1.5rem;
  border-radius: 15px;
  margin-bottom: 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  position: sticky;
  top: 1rem;
  z-index: 100;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}

.search-wrapper {
  position: relative;
  flex-grow: 1;
}

.search-wrapper input {
  width: 100%;
  padding: 12px 15px 12px 45px;
  border-radius: 50px;
  border: 1px solid var(--color-outline);
  background-color: var(--color-surface);
  color: white;
  font-family: var(--font-parrafo);
}

.search-wrapper i {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-outline);
}

.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-btn {
  background-color: transparent;
  color: var(--color-outline);
  border: 1px solid var(--color-outline);
  padding: 8px 20px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: bold;
}

.filter-btn:hover {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-on-secondary);
}

.filter-btn.active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

.event-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface-variant);
  border-radius: 15px;
  overflow: hidden;
  height: 100%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.event-card-image {
  height: 400px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.event-card-category {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background-color: rgba(14, 26, 28, 0.7);
  backdrop-filter: blur(5px);
  color: white;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: bold;
}

.event-card-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  /* Permite que este contenedor crezca para llenar el espacio */
}

.event-card-title {
  font-family: var(--font-titulo);
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--color-on-surface);
}

.event-card-details {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--color-outline);
  margin-bottom: 1rem;
}

.event-card-details span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.event-card-description {
  font-size: 0.95rem;
  line-height: 1.6;
  opacity: 0.8;
  margin-bottom: 1.5rem;
  /* ¡ELIMINADO! Quitamos la altura fija y el overflow */
  flex-grow: 1;
  /* Hace que este párrafo ocupe todo el espacio disponible, empujando el link hacia abajo */
}


.event-card-link {
  font-weight: bold;
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

.event-card-link:hover {
  color: var(--color-secondary);
}

.no-results-message {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--color-outline);
}

.no-results-message.hidden {
  display: none;
}

.no-results-message i {
  width: 60px;
  height: 60px;
  stroke-width: 1.5px;
  margin-bottom: 1rem;
}
/* ======================================================================== */
/* === ESTILOS RESPONSIVOS PARA LIBROS (SOBRE NOSOTROS) - v3.0 === */
/* ======================================================================== */

.book-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: var(--color-surface-variant);
    border-top: 1px solid var(--color-outline-variant);
}

.book-section .section-title-container h2 {
    color: var(--color-primary);
}

.book-section .section-title-container p {
    color: var(--color-on-surface);
    opacity: 0.8;
}

/* Contenedor principal del libro: ahora es flexible */
.magazine-viewport {
    width: 100%;
    max-width: 922px; /* Mantiene el tamaño máximo en pantallas grandes */
    margin: 3rem auto;
    position: relative; /* Necesario para posicionar los botones */
}

/* El libro usará el 100% del ancho de su contenedor */
.magazine-viewport .magazine {
    width: 100%;
    height: 100%;
}

.magazine .page img {
    /* Esta es la propiedad clave */
    object-fit: contain; 

    /* Estas aseguran que la imagen intente ocupar el espacio disponible */
    width: 100%;
    height: 100%;

    /* Un fondo sutil por si la imagen no ocupa todo el espacio */
    background-color: var(--color-surface); 
}s

/* Botones de navegación */
.magazine-viewport .next-button,
.magazine-viewport .previous-button {
    width: 40px; height: 40px; top: 50%; margin-top: -20px;
    background-color: var(--color-tertiary);
    border: 1px solid var(--color-outline);
    border-radius: 50%; cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
    position: absolute;
    z-index: 10;
}

.magazine-viewport .next-button::after,
.magazine-viewport .previous-button::after {
    content: '›'; font-family: 'Arial', sans-serif; font-size: 28px;
    line-height: 40px; color: var(--color-on-tertiary);
    display: block; text-align: center;
}

.magazine-viewport .previous-button::after { content: '‹'; }

.magazine-viewport .next-button:hover,
.magazine-viewport .previous-button:hover {
    background-color: var(--color-secondary);
    transform: scale(1.1);
}

.magazine-viewport .next-button { right: -50px; }
.magazine-viewport .previous-button { left: -50px; }


/* --- NUEVOS ESTILOS RESPONSIVOS --- */

/* En tablets (menos de 992px) */
@media (max-width: 992px) {
    .magazine-viewport .next-button {
        right: -20px; /* Acercamos los botones */
    }
    .magazine-viewport .previous-button {
        left: -20px;
    }
}

/* En móviles (menos de 576px) */
@media (max-width: 576px) {
    .magazine-viewport .next-button {
        right: 5px; /* Los ponemos casi en el borde */
    }
    .magazine-viewport .previous-button {
        left: 5px;
    }
    .book-section {
      padding-left: 15px;
      padding-right: 15px;
    }
}

/* ARCHIVO: assets/css/style.css */

/* Estilo para las imágenes dentro de los mensajes del chat */
.chat-message .chat-image {
    max-width: 20%; /* Asegura que la imagen no se salga de la burbuja */
    border-radius: 8px; /* Bordes redondeados para que combine con el diseño */
    margin-top: 10px; /* Un poco de espacio entre el texto y la imagen */
    display: block; /* Asegura que ocupe su propia línea */
}

/* ARCHIVO: assets/css/style.css */

/* Estilo para las imágenes dentro de los mensajes del chat */
.chat-image {
    max-width: 250px; /* NUEVO: Limita el ancho máximo a 250 píxeles */
    width: 100%;      /* Hace que la imagen se ajuste si es más pequeña que 250px */
    height: auto;     /* Mantiene la proporción de la imagen para que no se deforme */
    border-radius: 8px;
    margin-top: 10px;
    display: block;
}

/* ARCHIVO: assets/css/style.css */

/* ============================================= */
/* === ESTILOS PARA EL MODAL DE PODCASTS === */
/* ============================================= */

/* El fondo oscuro de la ventana modal */
.podcast-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(14, 26, 28, 0.85);
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s 0.4s;
}

.podcast-modal-overlay.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease;
}

/* El contenido de la ventana */
.podcast-modal-content {
  position: relative;
  background-color: var(--color-surface-variant);
  color: var(--color-on-surface);
  padding: 2rem;
  border-radius: 15px;
  width: 90%;
  max-width: 600px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  transform: scale(0.95);
  transition: transform 0.4s ease;
}

.podcast-modal-overlay.open .podcast-modal-content {
  transform: scale(1);
}

.podcast-modal-content h3 {
  font-family: var(--font-titulo);
  color: var(--color-primary);
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2rem;
}

.podcast-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: transparent;
  border: none;
  color: white;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s, transform 0.3s;
}

.podcast-modal-close:hover {
  opacity: 1;
  transform: rotate(90deg);
}

/* Contenedor de los reproductores */
.podcast-player-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.podcast-item h4 {
  font-family: var(--font-parrafo);
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  color: var(--color-secondary);
}

/* Estilo para los reproductores de audio */
audio {
  width: 100%;
  filter: invert(1) sepia(1) saturate(5) hue-rotate(180deg);
}

audio::-webkit-media-controls-panel {
  background-color: var(--color-tertiary-container);
  border-radius: 8px;
}

audio::-webkit-media-controls-play-button {
  background-color: var(--color-primary);
  border-radius: 50%;
}

audio::-webkit-media-controls-play-button:hover {
  background-color: var(--color-secondary);
}

audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display,
audio::-webkit-media-controls-mute-button {
  color: var(--color-on-tertiary-container);
}

audio::-webkit-media-controls-volume-slider {
  background-color: #FFF;
  border-radius: 25px;
  padding: 0;
  margin: 0 5px;
}