/* =============================================================================
   Fundación El Chandé — Hoja de estilos base
   -----------------------------------------------------------------------------
   Complementa a Tailwind (Play CDN). Aquí vive todo lo que Tailwind no cubre:
   texturas, formas orgánicas, componentes repetidos (nav, footer, timeline),
   animaciones de aparición y accesibilidad.

   Nota: el Play CDN no procesa @apply en archivos .css externos, por eso los
   componentes se escriben en CSS plano usando los hex de la paleta M3.
   ============================================================================= */

:root {
  --primary: #af101a;
  --primary-container: #d32f2f;
  --on-primary: #ffffff;
  --secondary: #835400;
  --secondary-container: #fcab28;
  --tertiary: #11651d;
  --background: #fcf9f4;
  --surface-container: #f0ede8;
  --surface-container-high: #ebe8e3;
  --on-surface: #1c1c19;
  --on-surface-variant: #5b403d;
  --outline: #8f6f6c;
  --outline-variant: #e4beba;
}

* {
  -webkit-tap-highlight-color: transparent;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px; /* deja aire bajo la barra fija al saltar por anclas */
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------------------
   Iconografía
   --------------------------------------------------------------------------- */
.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  line-height: 1;
  user-select: none;
}
.icon-filled {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* ---------------------------------------------------------------------------
   Texturas y grano — dan el aire artesanal / papel del proyecto
   --------------------------------------------------------------------------- */
.paper-texture {
  /* Alojada localmente: evita depender de un servidor externo para el diseño. */
  background-image: url("../img/tex/natural-paper.webp");
  background-repeat: repeat;
}

.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: 0.045;
  background-image: url("../img/tex/paper-fibers.webp");
}

/* ---------------------------------------------------------------------------
   Pantalla de carga (preloader)
   --------------------------------------------------------------------------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--background);
  visibility: visible;
  transform: none;
  /* Salida "ease-in": arranca lenta y acelera hacia el final, como una cortina
     que se suelta y cae por su propio peso. */
  transition: transform 0.6s cubic-bezier(0.55, 0.055, 0.675, 0.19), visibility 0.6s ease;
}
.preloader::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left center;
  /* La duración la fija main.js (--preloader-duration) para que coincida
     siempre con el tiempo mínimo que el preloader permanece en pantalla. */
  animation: preloader-progress var(--preloader-duration, 2s) linear forwards;
}
@keyframes preloader-progress {
  to {
    transform: scaleX(1);
  }
}
.preloader.is-hidden {
  transform: translateY(-100%);
  visibility: hidden;
  pointer-events: none;
}
.preloader__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.preloader__eyebrow {
  margin: 0 0 10px;
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
}
.preloader__title {
  margin: 0 0 10px;
  font-family: "Bricolage Grotesque", Georgia, serif;
  font-size: 30px;
  font-weight: 700;
  color: var(--primary);
}
.preloader__place {
  margin: 0;
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  opacity: 0.75;
}
.preloader__place + .preloader__place {
  margin-top: 10px;
}
.preloader__place:last-of-type {
  margin-bottom: 34px;
}
.preloader__logo {
  width: 78px;
  height: auto;
}

/* Entrada escalonada: cada línea aparece después de la anterior mientras la
   página real carga detrás. El logo, al final, queda con un pulso suave para
   indicar que la carga sigue en curso si toma más de un segundo. */
.preloader__eyebrow,
.preloader__title,
.preloader__place,
.preloader__logo {
  opacity: 0;
  transform: translateY(14px);
  animation: preloader-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.preloader__eyebrow {
  animation-delay: 0.05s;
}
.preloader__title {
  animation-delay: 0.2s;
}
.preloader__place {
  animation-delay: 0.35s;
}
.preloader__logo {
  animation-name: preloader-in, preloader-pulse;
  animation-duration: 0.6s, 2s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease-in-out;
  animation-delay: 0.5s, 1.1s;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: both, none;
}
@keyframes preloader-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes preloader-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.93);
  }
}

.dot-grid {
  background-image: radial-gradient(currentColor 1px, transparent 1px);
  background-size: 20px 20px;
}

/* ---------------------------------------------------------------------------
   Formas orgánicas y recortes tipo sticker
   --------------------------------------------------------------------------- */
.organic-blob,
.hero-blob {
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
.organic-blob--alt {
  border-radius: 38% 62% 55% 45% / 52% 38% 62% 48%;
}

.cutout-sticker {
  border: 3px solid #ffffff;
  filter: drop-shadow(3px 3px 0 rgba(91, 64, 61, 0.22));
}

.sticker-border {
  filter: drop-shadow(3px 3px 0 #410003);
}

.text-stroke {
  -webkit-text-stroke: 1px var(--primary);
  color: transparent;
}
.text-stroke-light {
  -webkit-text-stroke: 1px #ffffff;
  color: transparent;
}

/* Cinta adhesiva decorativa sobre tarjetas de galería */
.tape::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 92px;
  height: 26px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(252, 171, 40, 0.55);
  border-left: 1px dashed rgba(65, 0, 3, 0.25);
  border-right: 1px dashed rgba(65, 0, 3, 0.25);
  z-index: 2;
}

/* Rejilla asimétrica: las columnas pares bajan para romper la cuadrícula */
@media (min-width: 768px) {
  .asymmetric-grid > *:nth-child(even) {
    transform: translateY(32px);
  }
}

/* ---------------------------------------------------------------------------
   Navegación
   --------------------------------------------------------------------------- */
.nav-link {
  position: relative;
  padding-bottom: 4px;
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.2;
  color: var(--on-surface-variant);
  transition: color 0.3s ease;
  white-space: nowrap;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--primary);
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-link:hover {
  color: var(--secondary);
}
.nav-link:hover::after {
  width: 100%;
}
.nav-link[aria-current="page"] {
  color: var(--primary);
  font-weight: 700;
}
.nav-link[aria-current="page"]::after {
  width: 100%;
}

.mobile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  border-bottom: 1px solid var(--outline-variant);
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--on-surface-variant);
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.mobile-link:hover,
.mobile-link:focus-visible {
  color: var(--primary);
  padding-left: 10px;
}
.mobile-link[aria-current="page"] {
  color: var(--primary);
}

#site-header.is-stuck {
  box-shadow: 0 6px 24px -12px rgba(65, 0, 3, 0.45);
}

body.menu-open {
  overflow: hidden;
}

#mobile-menu[hidden] {
  display: none;
}
#mobile-menu {
  animation: menu-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#mobile-menu.is-closing {
  /* Exit is quicker than the entrance so the panel feels responsive, not sluggish. */
  animation: menu-out 0.15s cubic-bezier(0.4, 0, 1, 1) both;
}
@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes menu-out {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* ---------------------------------------------------------------------------
   Botones sociales del pie
   --------------------------------------------------------------------------- */
.social-btn {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 9999px;
  background: #fcf9f4;
  border: 1px solid var(--outline-variant);
  color: var(--on-surface-variant);
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.social-btn:hover {
  background: var(--secondary);
  color: #ffffff;
  transform: translateY(-3px);
}

.footer-link {
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: 14px;
  color: var(--on-surface-variant);
  transition: color 0.25s ease, padding-left 0.25s ease;
}
.footer-link:hover {
  color: var(--tertiary);
  padding-left: 6px;
}

/* ---------------------------------------------------------------------------
   Ticker / marquesina cultural
   --------------------------------------------------------------------------- */
.marquee {
  display: flex;
  overflow: hidden;
  user-select: none;
}
.marquee__track {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 2.5rem;
  padding-right: 2.5rem;
  min-width: 100%;
  animation: marquee-scroll 32s linear infinite;
}
@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/* ---------------------------------------------------------------------------
   Línea de tiempo vertical (Quiénes somos)
   --------------------------------------------------------------------------- */
.timeline {
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--primary), var(--secondary-container), var(--tertiary));
  opacity: 0.5;
}
@media (min-width: 768px) {
  .timeline::before {
    left: 50%;
    transform: translateX(-50%);
  }
}
.timeline__dot {
  position: absolute;
  left: 0;
  top: 2px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: var(--primary);
  color: #fff;
  border: 4px solid var(--background);
  z-index: 1;
}
@media (min-width: 768px) {
  .timeline__dot {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ---------------------------------------------------------------------------
   Acordeón (<details>) para preguntas frecuentes
   --------------------------------------------------------------------------- */
.faq-item summary {
  list-style: none;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary .faq-chevron {
  transition: transform 0.3s ease;
}
.faq-item[open] summary .faq-chevron {
  transform: rotate(180deg);
}
.faq-item[open] summary {
  color: var(--primary);
}

/* ---------------------------------------------------------------------------
   Animaciones de aparición al hacer scroll
   --------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  /* 500ms is the outer edge for a "complex" transition — long enough to read as
     graceful, short enough that scrolling never feels like it's waiting on the page. */
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

/* ---------------------------------------------------------------------------
   Contenidos incrustados con carga bajo demanda (Spotify, YouTube, mapas)
   ---------------------------------------------------------------------------
   Estos widgets externos pesan varios MB cada uno. En vez de cargarlos al
   abrir la página, se muestra una portada ligera y el widget real solo se
   descarga cuando la persona hace clic. Así la página abre rápido y quien no
   use el reproductor nunca paga ese peso.
   --------------------------------------------------------------------------- */
.embed-facade {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  overflow: hidden;
  border-radius: 12px;
  background: var(--surface-container-high);
  cursor: pointer;
  font-family: inherit;
}
.embed-facade__media {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.embed-facade:hover .embed-facade__media {
  transform: scale(1.03);
}
.embed-facade__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background: linear-gradient(180deg, rgba(28, 28, 25, 0.15), rgba(28, 28, 25, 0.6));
}
.embed-facade__play {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 9999px;
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.55);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.embed-facade:hover .embed-facade__play {
  transform: scale(1.08);
}
.embed-facade__play .material-symbols-outlined {
  font-size: 36px;
}
.embed-facade__label {
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
/* Portada sin imagen: se usa el color de marca del servicio */
.embed-facade--plain {
  min-height: 260px;
  background: var(--surface-container-high);
}
.embed-facade--plain .embed-facade__overlay {
  background: none;
}
.embed-facade--plain .embed-facade__label {
  color: var(--on-surface-variant);
  text-shadow: none;
}
.embed-facade__note {
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: 12px;
  color: var(--on-surface-variant);
  opacity: 0.8;
}

/* ---------------------------------------------------------------------------
   Galería con visor a pantalla completa
   --------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(28, 28, 25, 0.92);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.lightbox[hidden] {
  display: none;
}
.lightbox.is-open {
  opacity: 1;
}
.lightbox img {
  max-width: min(1100px, 92vw);
  max-height: 82vh;
  border-radius: 16px;
  border: 4px solid #fff;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
  transform: scale(0.96);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.lightbox.is-open img {
  transform: scale(1);
}

/* ---------------------------------------------------------------------------
   Formularios
   --------------------------------------------------------------------------- */
.field-input {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--outline-variant);
  background: #ffffff;
  padding: 12px 16px;
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: 16px;
  color: var(--on-surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field-input::placeholder {
  color: #a08a87;
}
.field-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(175, 16, 26, 0.14);
}
.field-input[aria-invalid="true"] {
  border-color: #ba1a1a;
  box-shadow: 0 0 0 3px rgba(186, 26, 26, 0.12);
}
.field-label {
  display: block;
  margin-bottom: 6px;
  font-family: "Work Sans", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--on-surface-variant);
}

/* Casilla de verificación con la paleta del sitio.
   Se define a mano para no depender del plugin @tailwindcss/forms. */
.field-checkbox {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 2px solid var(--outline);
  border-radius: 5px;
  background: #ffffff;
  cursor: pointer;
  display: grid;
  place-content: center;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.field-checkbox::before {
  content: "";
  width: 11px;
  height: 11px;
  transform: scale(0);
  transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
  background: #ffffff;
  /* Palomita dibujada en CSS, sin imagen ni icono externo */
  clip-path: polygon(14% 44%, 0 60%, 39% 100%, 100% 18%, 84% 4%, 39% 69%);
}
.field-checkbox:checked {
  background: var(--primary);
  border-color: var(--primary);
}
.field-checkbox:checked::before {
  transform: scale(1);
}
.field-checkbox:focus-visible {
  outline: 3px solid var(--secondary);
  outline-offset: 3px;
}
.field-error {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #ba1a1a;
}
.field-error[hidden] {
  display: none;
}

/* ---------------------------------------------------------------------------
   Accesibilidad
   --------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 90;
  padding: 12px 20px;
  border-radius: 9999px;
  background: var(--primary);
  color: #fff;
  font-family: "Work Sans", system-ui, sans-serif;
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 16px;
}

:focus-visible {
  outline: 3px solid var(--secondary);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   Barra de desplazamiento
   --------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  background: var(--surface-container);
}
::-webkit-scrollbar-thumb {
  background: var(--outline-variant);
  border-radius: 9999px;
  border: 3px solid var(--surface-container);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--outline);
}

/* ---------------------------------------------------------------------------
   Respeto por "reducir movimiento"
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .marquee__track,
  .animate-spin-slow,
  .animate-float,
  .animate-blob-morph {
    animation: none !important;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Impresión: fuera texturas, adornos y navegación */
@media print {
  .grain-overlay,
  #site-header,
  .no-print {
    display: none !important;
  }
  body {
    background: #fff;
  }
}