/*
 * ESTILOS PROPIOS
 * estilos-base.css tiene todas las clases de Tailwind que ya usa la web (no editarlo).
 * Si en una página se usa una clase nueva que no tiene efecto, es porque no está en
 * estilos-base.css: agregala acá.
 */

/* Tipografía de títulos "The Seasons".
   Para activarla, subí el archivo theseasons-reg.woff2 a /assets/fonts y quitá el comentario. */
/*
@font-face {
  font-family: 'The Seasons';
  src: url('/assets/fonts/theseasons-reg.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
*/

/* ---------- Clases que no estaban en estilos-base.css ---------- */
.aspect-\[4\/5\] { aspect-ratio: 4 / 5; }
.text-6xl { font-size: 3.75rem; line-height: 1; }
.break-all { word-break: break-all; }
.not-italic { font-style: normal; }
@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Las flechas de los carruseles sobresalen un poco: evita el scroll horizontal en celulares. */
body { overflow-x: clip; }

/* ---------- Sin JavaScript, todo se ve igual (sin animaciones) ---------- */
html:not(.js) .animate-on-scroll,
html:not(.js) .animate-slide-in-left,
html:not(.js) [data-aparecer] { opacity: 1; transform: none; animation: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .animate-on-scroll, .animate-slide-in-left, [data-aparecer] { opacity: 1 !important; transform: none !important; }
}

/* ---------- Enlace "Saltar al contenido" (solo visible con teclado) ---------- */
.saltar-contenido {
  position: absolute; left: -9999px; top: 0.5rem; z-index: 100;
  background: #fff; color: #83484a; padding: 0.5rem 1rem; border-radius: 0.25rem;
}
.saltar-contenido:focus { left: 0.5rem; }

/* ---------- Carruseles (deslizan con el dedo, flechas y puntos) ---------- */
.carrusel-pista {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.carrusel-pista::-webkit-scrollbar { display: none; }
.carrusel-pista > * { scroll-snap-align: start; }
[data-carrusel]:focus-visible { outline: 2px solid #83484a; outline-offset: 4px; border-radius: 0.5rem; }

/* ---------- Preguntas desplegables ---------- */
.acordeon summary { cursor: pointer; list-style: none; }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary h3 { font-size: inherit; line-height: inherit; }
.acordeon details[open] > summary .acordeon-flecha { transform: rotate(180deg); }
.acordeon details[open] > summary + div { animation: acordeon-abrir 0.2s ease-out; }
@keyframes acordeon-abrir {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}