/* ==========================================================================
   APANHEM — Global stylesheet
   Switzer · #BD1F4D · 12/4/3 col grid · no media queries*

   TABLE OF CONTENTS
    1. Design Tokens          (:root)
    2. Reset                  (Josh W. Comeau)
    3. Base                   (html, body, typography, images)
    4. Atom: Container        (.container)
    5. Atom: Button           (.btn)
    6. Atom: Section label    (.label)
    7. Organism: Header       (.header, .menu)
    8. Organism: Hero         (.hero)
    9. Organism: Footer       (.footer)
   10. Page: Contact          (.contact-page, .contact-*, .contact-form)
   11. Page: Home             (.hero--home, .home-page, .about, .programs,
                               .program-card, .stories, .story, .supporters)
   12. Page: Calendar         (.calendar-page, .calendar-section, .calendar-grid,
                               .calendar-agenda, .calendar-event, .calendar-disclaimer)
   13. Page: Event            (.event-page, .event-header, .event-cover, .event-layout,
                               .event-content, .event-meta)
   14. Page: Services         (.services-page, .atencion, .sensibilizacion,
                               .voluntariado, .piso)
   15. Page: About            (.about-page, .about-intro, .mision-objetivo,
                               .equipo, .directiva, .directiva-card, .voluntarias)
   16. Page: Collaborate      (.collaborate-page, .collaborate-quote,
                               .collaborate-info, .collaborate-form)
   17. Page: Legal            (.page-legal, .page-legal__header, .page-legal__content)
   18. Page: Error / 404      (.page-error, .page-error__header, .page-error__content)

   * Responsive layout via flex/grid + container queries (no @media).
     JS in websolidaria-core handles the mobile menu toggle state.
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {

  /* --- Typography ------------------------------------------------------- */
  --font-sans: 'Switzer', system-ui, sans-serif;
  --fw-regular: 300;
  --fw-bold: 600;

  /* Fluid type scale — Major Third (1.25) mobile → Perfect Fourth (1.333) desktop
     Generated with fluid-type-scale.com · min 16px @ 375px · max 18px @ 1440px */
  --fs-sm: clamp(0.8rem, 0.07vi + 0.78rem, 0.84rem);
  /*  13→13.5px */
  --fs-base: clamp(1rem, 0.19vi + 0.96rem, 1.13rem);
  /*  16→18px   */
  --fs-md: clamp(1.25rem, 0.38vi + 1.16rem, 1.5rem);
  /*  20→24px   */
  --fs-lg: clamp(1.56rem, 0.66vi + 1.41rem, 2rem);
  /*  25→32px   */
  --fs-xl: clamp(1.95rem, 1.07vi + 1.7rem, 2.66rem);
  /*  31→43px   */
  --fs-display: clamp(2.44rem, 1.67vi + 2.05rem, 3.55rem);
  /*  39→57px   */
  --fs-hero: clamp(2.5rem, 9vi - 0.5rem, 9rem);
  /*  48→160px+ */
  --lh-hero: 1;
  --lh-heading: 1.05;
  --lh-body: 1.35;
  --lh-lead: 1.2;
  --lh-compact: 1.2;

  /* Section label — uppercase with tracking */
  --fs-label: var(--fs-sm);
  --label-spacing: 0.1em;

  /* --- Colors ----------------------------------------------------------- */
  --color-crimson: #BD1F4D;
  --color-crimson-dark: #961840;
  --color-crimson-rgb: 189, 31, 77;

  --color-bg: #F5F4F1;
  --color-surface: #FFFFFF;
  --color-text: #1A1A1A;
  --color-text-muted: #6B6B6B;
  --color-white: #FFFFFF;
  --color-border: #E2E0DC;

  /* --- Spacing ---------------------------------------------------------- */
  /* 0–6: fixed · 7–12: fluid */
  --space-0: 0.125rem;
  /*  2px        */
  --space-1: 0.25rem;
  /*  4px        */
  --space-2: 0.5rem;
  /*  8px        */
  --space-3: 0.75rem;
  /* 12px        */
  --space-4: 1rem;
  /* 16px        */
  --space-5: 1.25rem;
  /* 20px        */
  --space-6: 1.5rem;
  /* 24px        */
  --space-7: clamp(1.5rem, 3vw, 2rem);
  /* 24→32px     */
  --space-8: clamp(2rem, 4vw, 3rem);
  /* 32→48px     */
  --space-9: clamp(2.5rem, 5vw, 4rem);
  /* 40→64px     */
  --space-10: clamp(3rem, 6vw, 5rem);
  /* 48→80px     */
  --space-11: clamp(3.5rem, 7vw, 6rem);
  /* 56→96px     */
  --space-12: clamp(4rem, 8vw, 8rem);
  /* 64→128px    */
  --space-13: clamp(5rem, 10vw, 10rem);
  /* 80→160px    */

  /* --- Layout ----------------------------------------------------------- */
  /* Fluid container with a gentler slope: anchored so vp=1024 gives ~985px
     and vp=1920 gives ~1510px. Cap at 80rem (~1664px @ scaled rem) so on
     2K/4K monitors the content keeps comfortable reading width. */
  --container-max: clamp(44rem, 56vw + 21rem, 80rem);
  --container-padding: clamp(1.25rem, 4vw, 3rem);
  --grid-cols: 12;
  --grid-cols-mobile: 2;
  --grid-cols-tablet: 4;
  --grid-cols-desktop: 12;
  --grid-gutter: clamp(var(--space-3), 1.5vw, var(--space-5));
  --about-label-span: 2;
  --about-content-start: 5;
  --about-content-span: 8;
  --header-nav-break: 42rem;

  /* --- Border radius ---------------------------------------------------- */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
  --radius-pill: 100vmax;

  /* --- Transitions ------------------------------------------------------ */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms ease;
}


/* ==========================================================================
   2. RESET — Josh W. Comeau (joshwcomeau.com/css/custom-css-reset)
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  /* Preserve the browser's base font size for accessibility */
  font-size: 100%;
  /* Prevent iOS font size inflation on orientation change */
  -moz-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;
}

/* Smooth scroll global (Lenis) — estilos requeridos por la librería.
   Cuando Lenis está activo añade `.lenis` al <html>; si no carga (o el
   usuario pide menos movimiento) se conserva el scroll nativo + el
   scroll-behavior: smooth de arriba como fallback. */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

body {
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}


/* ==========================================================================
   3. BASE
   ========================================================================== */

html {
  /* Fluid root: 120% (19.2px) @ 375px → 130% (20.8px) @ 1920px
     Makes all rem values grow proportionally on larger viewports */
  font-size: clamp(120%, 117.57% + 0.65vi, 130%);
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--color-crimson);
  background-color: var(--color-bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: var(--color-crimson);
}

h1 {
  font-size: var(--fs-display);
}

h2 {
  font-size: var(--fs-xl);
}

h3 {
  font-size: var(--fs-lg);
}

h4 {
  font-size: var(--fs-md);
}

h5,
h6 {
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
}

p {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}

p+p {
  margin-top: var(--space-4);
}

/* KirbyText / rich copy — nested blocks inherit parent leading */
:where(.about__intro,
  .about__point-text,
  .contact-intro,
  .contact-talk__text,
  .contact-address__text,
  .collaborate-main__text,
  .collaborate-donate__intro,
  .stories__intro,
  .story__quote,
  .footer__copy) :where(p, li) {
  font-size: inherit;
  line-height: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Inline links within body copy */
:where(p, li) a {
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
  transition: color var(--transition-fast);
}

:where(p, li) a:hover {
  color: var(--color-crimson);
  text-decoration-color: var(--color-crimson);
}

ul,
ol {
  list-style: none;
  padding: 0;
}

strong {
  font-weight: var(--fw-regular);
}


/* ==========================================================================
   4. ATOM: CONTAINER
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}


/* ==========================================================================
   5. ATOM: BUTTON
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  line-height: 1;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    background-color var(--transition-normal),
    color var(--transition-normal),
    border-color var(--transition-normal);
}

/* Solid crimson fill */
.btn--primary {
  background-color: var(--color-crimson);
  color: var(--color-white);
  border-color: var(--color-crimson);
}

.btn--primary:hover {
  background-color: var(--color-crimson-dark);
  border-color: var(--color-crimson-dark);
}

/* Crimson outline */
.btn--outline {
  background-color: transparent;
  color: var(--color-crimson);
  border-color: var(--color-crimson);
}

.btn--outline:hover {
  background-color: var(--color-crimson);
  color: var(--color-white);
}

/* White outline — for use on dark or crimson backgrounds */
.btn--outline-white {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.btn--outline-white:hover {
  background-color: var(--color-white);
  color: var(--color-crimson);
}

/* Compact size — thinner border, smaller text/padding */
.btn--sm {
  padding: var(--space-2) var(--space-4);
  font-size: 0.75rem;
  border-width: 1px;
  white-space: nowrap;
}


/* ==========================================================================
   6. ATOM: SECTION LABEL
   ========================================================================== */

/* e.g. "ABOUT US", "LET'S TALK", "PROGRAMS (2)" */
.label {
  display: block;
  font-size: var(--fs-label);
  font-weight: var(--fw-regular);
  line-height: var(--lh-compact);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--color-crimson);
}


/* ==========================================================================
   7. ORGANISM: HEADER
   ========================================================================== */

.header {
  container-type: inline-size;
  container-name: site-header;
  position: relative;
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.header__container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  padding-block: clamp(0.75rem, 2vw, 1.25rem);
}

.header__brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.header__logo-img {
  height: clamp(3.25rem, 4.8vw, 4.25rem);
  width: auto;
}

.header__logo-text {
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  color: var(--color-crimson);
}

.header__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 0 0 auto;
  margin-inline-start: auto;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
  width: 2.5rem;
  height: 2.5rem;
}

.header__toggle-icon,
.header__toggle-icon::before,
.header__toggle-icon::after {
  display: block;
  width: 1.5rem;
  height: 2px;
  background-color: var(--color-text);
  transition:
    transform var(--transition-normal),
    opacity var(--transition-fast);
}

.header__toggle-icon {
  position: relative;
}

.header__toggle-icon::before,
.header__toggle-icon::after {
  content: '';
  position: absolute;
  left: 0;
}

.header__toggle-icon::before {
  top: -6px;
}

.header__toggle-icon::after {
  top: 6px;
}

.header__toggle[aria-expanded="true"] .header__toggle-icon {
  background-color: transparent;
}

.header__toggle[aria-expanded="true"] .header__toggle-icon::before {
  transform: translateY(6px) rotate(45deg);
}

.header__toggle[aria-expanded="true"] .header__toggle-icon::after {
  transform: translateY(-6px) rotate(-45deg);
}

.header__nav {
  display: none;
  flex: 1 1 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.header__nav.is-open {
  display: flex;
}

.menu__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  width: 100%;
}

.menu__link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-crimson);
  transition: color var(--transition-fast);
}

.menu__link:hover {
  color: var(--color-crimson-dark);
}

.menu__link--active {
  color: var(--color-text);
  font-weight: var(--fw-regular);
}

.menu__actions {
  display: flex;
  align-items: center;
  width: 100%;
}

.menu__cta {
  width: 100%;
  justify-content: center;
}

/* Breakpoint del menú inline → toggle.
   Subido de 42rem a 60rem cuando se incorporó "NOTICIAS" como 6º ítem:
   los 6 labels uppercase + gaps + logo necesitan ~900px para respirar.
   Por debajo, se muestra el toggle y el menú colapsa a columna. */
@container site-header (min-width: 60rem) {
  .header__toggle {
    display: none;
  }

  .header__nav {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    align-self: flex-end;
    justify-content: flex-end;
    gap: var(--space-6);
    padding-block: 0;
    border-top: none;
    margin-inline-start: auto;
  }

  .header__nav.is-open {
    display: flex;
  }

  .menu__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
    width: auto;
  }

  .menu__actions {
    width: auto;
  }

  .menu__cta {
    width: auto;
    justify-content: center;
  }
}


/* ==========================================================================
   8. ORGANISM: HERO
   ========================================================================== */

/*
   HTML (site/snippets/hero.php):
   <section class="hero" style="background-image: url('…')">
     <div class="hero__container container">
       <h1 class="hero__title">…</h1>
     </div>
   </section>
*/

.hero {
  container-type: inline-size;
  container-name: hero;
  position: relative;
  min-height: calc(100svh - (clamp(3.25rem, 4.8vw, 4.25rem) + (clamp(0.75rem, 2vw, 1.25rem) * 2)));
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-color: var(--color-text);
}

@container hero (max-width: 48rem) {
  .hero {
    background-attachment: scroll;
  }
}

/* Multiply overlay — blends the crimson with the photo */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #1A1A1A;
  mix-blend-mode: multiply;
  opacity: 0.55;
}

.hero__container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__title {
  font-size: var(--fs-display);
  font-weight: var(--fw-regular);
  color: var(--color-white);
  line-height: var(--lh-heading);
  max-width: 20ch;
  text-align: center;
}


/* ==========================================================================
   9. ORGANISM: FOOTER
   ========================================================================== */

/*
   Layout del footer (de arriba a abajo):

     .footer__main
       .footer__branding   → logo a la izquierda, CTA al borde opuesto
       .footer__info       → direcciones y navegación, en columnas
     .footer__bottom       → copy + créditos

   .footer__branding y .footer__info viven en filas separadas; la branding
   queda visualmente aislada de las direcciones, y los títulos del bloque
   de direcciones (.footer__address-title) y de navegación (.footer__nav)
   se alinean en la misma línea horizontal por estar al inicio de columnas
   hermanas con `align-items: flex-start`.
*/

.footer {
  background-color: var(--color-crimson);
  color: var(--color-white);
  padding-block: var(--space-9) var(--space-6);
}

.footer__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.footer__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

/* Branding row: logo isolated on one edge, CTA on the opposite edge.
   `align-items: last baseline` alinea la última línea de la columna de marca
   (el nombre "Apanhem Talavera") con la línea de texto del botón Colabora. */
.footer__branding {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  justify-content: space-between;
  /* Alinea los hijos por su borde inferior; el .footer__lead (más alto)
     define la fila y su borde inferior coincide con el del botón Colabora.
     El nudge en .footer__top reposiciona su centro sobre el del botón. */
  align-items: flex-end;
}

.footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 18rem;
}

.footer__logo-link {
  display: inline-flex;
}

.footer__logo-img {
  height: clamp(3.75rem, 5.4vw, 4.75rem);
  width: auto;
}

.footer__logo-text {
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  color: var(--color-white);
}

/* Footer CTA — uses the existing .btn .btn--outline-white atom (defined in
   §5) so it sits accessibly on the crimson background. The local class only
   handles flex placement so wrapping behaves predictably. */
/* Grupo izquierdo de la fila de branding: marca + CTA "Colabora" juntos, uno
   tras otro. `align-items: last baseline` alinea el nombre "Apanhem Talavera"
   con la línea de texto del botón. El conjunto se alinea con .footer__top por
   su borde inferior (flex-end de .footer__branding). */
.footer__lead {
  display: flex;
  flex-wrap: wrap;
  align-items: last baseline;
  gap: var(--space-6);
}

.footer__cta {
  flex-shrink: 0;
}

/* Enlace "Volver al topo": misma estrategia que .event-page__back
   (mayúsculas + subrayado + tracking), adaptado al footer blanco/crimson.
   El subrayado es un border-bottom (no text-decoration) para que su borde
   inferior sea una línea alineable con flex-end en .footer__branding. */
.footer__top {
  font-size: var(--fs-sm);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--color-white);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  line-height: var(--lh-body);
  white-space: nowrap;
  /* Sube el enlace ~media diferencia de altura respecto al botón Colabora
     (su padding-block + borde) para que su centro vertical coincida con el
     centro del botón, partiendo de la alineación flex-end de .footer__branding. */
  margin-bottom: var(--space-2);
  opacity: 0.85;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

.footer__top:hover,
.footer__top:focus-visible {
  opacity: 1;
  color: var(--color-text);
}

/* Info row: addresses + nav groups sharing the same horizontal axis.
   `align-items: flex-start` makes .footer__address-title (top of its column)
   align with the .footer__nav-title row of each nav group. */
.footer__info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  justify-content: space-between;
  align-items: flex-start;
}

/* Columna izquierda del footer__info: agrupa direcciones + contacto directo
   para que el teléfono/email queden debajo de la dirección, en la misma
   columna. El dimensionado flex vive aquí (antes en .footer__addresses). */
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1 1 16rem;
  min-width: 0;
}

/* Título de la columna de contacto ("Contactos"). Misma tipografía que los
   títulos de navegación para que las tres columnas del footer__info alineen
   sus encabezados en la misma fila. */
.footer__contact-title {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  line-height: var(--lh-body);
  margin: 0;
}

.footer__addresses {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: 0;
}

.footer__address {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.footer__address-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  margin: 0;
  /* Match the leading of .footer__nav-title so the first address-title
     baseline aligns with the nav-title baseline in the same row. */
  line-height: var(--lh-body);
}

.footer__address-text {
  font-size: var(--fs-sm);
  font-style: normal;
  line-height: var(--lh-body);
  /* Preserva los saltos de línea del textarea de Kirby sin tener que
     inyectar <br> en PHP — más limpio y semántico que nl2br(). */
  white-space: pre-line;
  opacity: 0.85;
}

/* Contacto directo (teléfono + email) bajo la dirección. */
.footer__contact-methods {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__contact-method {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

/* El icono no debe encogerse aunque el texto del método ocupe varias líneas. */
.footer__contact-method .ph {
  flex-shrink: 0;
}

/* Subrayado igual que .footer__nav-link: ambos enlaces viven dentro de <li>,
   así que toman el text-decoration de la regla global :where(p, li) a. */
.footer__contact-link {
  color: var(--color-white);
  opacity: 0.85;
  transition: opacity var(--transition-fast);
}

.footer__contact-link:hover,
.footer__contact-link:focus-visible {
  opacity: 1;
  color: var(--color-text);
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  flex: 0 1 auto;
}

.footer__nav-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 8rem;
}

.footer__nav-title {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  /* Match leading with .footer__address-title so titles align in the row. */
  line-height: var(--lh-body);
  margin: 0;
}

.footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer__nav-link {
  font-size: var(--fs-sm);
  color: var(--color-white);
  transition: color var(--transition-fast);
}

.footer__nav-link:hover,
.footer__nav-link:focus-visible {
  color: var(--color-text);
}

/* Bottom row: social + copyright */
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Redes sociales: viven dentro de .footer__contact, bajo los métodos de
   contacto. Rejilla de 2 columnas; cada celda es un enlace con el icono de
   Phosphor arriba y el nombre de la red debajo. */
.footer__social-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cada red: icono + nombre en una fila (uno al lado del otro), igual que las
   filas de contacto (icono + enlace). */
.footer__social-link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-white);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

.footer__social-link .ph {
  flex-shrink: 0;
}

/* El nombre va subrayado como los enlaces de navegación/contacto. Se aplica al
   span (no al <a>) para que la línea afecte solo al texto y no al icono.
   Mismos valores que la regla global :where(p, li) a. */
.footer__social-name {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

.footer__social-link:hover,
.footer__social-link:focus-visible {
  opacity: 1;
  color: var(--color-text);
}

.footer__donations {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.footer__donations-title {
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  line-height: var(--lh-body);
  margin: 0 0 var(--space-3);
}

.footer__donations-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__donations-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.footer__donations-item .ph {
  flex-shrink: 0;
}

.footer__copy,
.footer__credits {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  opacity: 0.6;
}

.footer__copy p,
.footer__credits p {
  font-size: inherit;
  color: inherit;
}

.footer__credits-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color var(--transition-fast);
}

/* Sobre el fondo crimson del footer, el hover de los enlaces vira a negro
   (mismo criterio que .footer__nav-link). */
.footer__credits-link:hover,
.footer__credits-link:focus-visible {
  color: var(--color-text);
}


/* ==========================================================================
   10. PAGE: CONTACT
   ========================================================================== */

/*
   HTML (site/templates/contact.php):
   <main class="contact-page">
     <section class="contact-page__intro">…</section>
     <section class="contact-page__talk">…</section>
     <section class="contact-page__locations">…</section>
     <section class="contact-page__map">…</section>
   </main>
*/

/* --- Intro -------------------------------------------------------------- */

.contact-page__intro {
  padding-block: var(--space-10);
  text-align: center;
}

.contact-intro {
  max-width: 42rem;
  margin-inline: auto;
}

.contact-intro__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-lead);
  color: var(--color-crimson);
  margin: 0;
}

.contact-intro__arrow {
  margin-top: var(--space-6);
  color: var(--color-crimson);
}

/* --- Talk (contact info + illustration) -------------------------------- */

.contact-page__talk {
  padding-block-start: var(--space-8);
  padding-block-end: var(--space-12);
  background-color: var(--color-bg);
}

.contact-talk {
  display: grid;
  /* Info column tighter, form column gets the remaining space.
     Collapses to one column when the narrower track can't fit. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-8) var(--grid-gutter);
  color: var(--color-crimson);
  align-items: start;
}

.contact-talk__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-block-start: var(--space-7);
}

.contact-talk__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact-talk__title,
.contact-form__title,
.contact-locations__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: var(--color-crimson);
  margin: 0;
}

.contact-locations__title {
  text-align: center;
}

.contact-talk__intro,
.contact-talk__text {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-crimson);
}

.contact-talk__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.contact-talk__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.contact-talk__subtitle {
  margin: 0;
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
}

.contact-talk__section-intro {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-crimson);
}

.contact-talk__figure {
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-talk__image {
  width: 100%;
  max-width: 12rem;
}

/* Emails */
.contact-emails {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  list-style: none;
  padding-left: 0;
}

.contact-email {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.contact-email__name {
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

.contact-email__value {
  font-size: var(--fs-base);
  color: var(--color-crimson);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
  transition: color var(--transition-fast);
}

.contact-email__value:hover {
  color: var(--color-crimson-dark);
}

/* Phones */
.contact-phones {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-phone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.contact-phone__name {
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

.contact-phone__number {
  font-size: var(--fs-base);
  color: var(--color-crimson);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
  transition: color var(--transition-fast);
}

.contact-phone__number:hover {
  color: var(--color-crimson-dark);
}

.contact-phone__schedule {
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--color-crimson);
}

/* Social links */
.contact-social__intro {
  font-size: var(--fs-sm);
  color: var(--color-crimson);
}

.contact-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-social__link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-crimson);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.contact-social__link .ph {
  flex-shrink: 0;
}

.contact-social__name {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
}

.contact-social__link:hover,
.contact-social__link:focus-visible {
  color: var(--color-crimson-dark);
}

/* --- Locations --------------------------------------------------------- */

.contact-page__locations {
  padding-block: var(--space-11);
}

.contact-locations {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.contact-locations__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.contact-address {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact-address__media {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--grid-gutter);
}

.contact-address__figure,
.contact-address__map {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  min-height: 0;
}

.contact-address__map .location-map,
.contact-address__map-canvas {
  width: 100%;
  height: 100%;
  margin: 0;
  position: relative;
  display: block;
  border: 0;
  border-radius: var(--radius-md);
}

.contact-address__map .location-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* El <picture> debe llenar el figure para que el recorte lo controle
   object-fit/object-position (punto focal) y no el overflow del contenedor. */
.contact-address__figure picture {
  display: block;
  width: 100%;
  height: 100%;
}

.contact-address__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.contact-address:hover .contact-address__image {
  transform: scale(1.03);
}

.contact-address__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-address__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--color-crimson);
}

.contact-address__text {
  font-size: var(--fs-sm);
  color: var(--color-crimson);
  line-height: var(--lh-body);
}

.contact-address__schedule {
  font-size: var(--fs-sm);
  color: var(--color-crimson);
}

/* --- Map --------------------------------------------------------------- */

/* No padding — map spans full width */
.contact-map {
  display: grid;
  width: 100%;
  aspect-ratio: auto;
  min-height: clamp(25rem, 40vw, 35rem);
  overflow: hidden;
}

.contact-map__canvas,
.contact-map .location-map {
  width: 100%;
  min-height: clamp(25rem, 40vw, 35rem);
  border: none;
  display: block;
}

.contact-map .location-map {
  margin: 0;
  position: relative;
  overflow: hidden;
}

.contact-map .location-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}


/* --- Form -------------------------------------------------------------- */
/* Formulario de contacto dentro del bloque .contact-talk.
   Uniform + Turnstile, validación accesible y estados de éxito/error.
   La envuelve <section class="contact-talk__form contact-form"> dentro de
   .contact-talk (grid de 2 columnas, info + form). */

.contact-talk__form {
  /* Reset del color crimson heredado del .contact-talk (los iconos lo usan).
     El form usa color de texto neutro. */
  color: var(--color-text);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-7);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  container-type: inline-size;
  container-name: contact-form;
}

.contact-form__wrap {
  display: contents;
}

.contact-form__form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-5);
}

/* Singles fields take full row at narrow widths via container query.
   Until then, two columns make first_name + last_name align side-by-side. */
.contact-form__field--full,
.contact-form__checkbox,
.contact-form__submit,
.contact-form__form .turnstile-container {
  grid-column: 1 / -1;
}

/* Honeypot — hidden but available */
.contact-form__honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.contact-form__submit {
  justify-self: start;
  margin-block-start: var(--space-2);
}

/* Cloudflare Turnstile container — centralizado horizontalmente */
.contact-form .turnstile-container {
  display: flex;
}

/* Container query — colapsa a 1 columna en formularios estrechos
   (el form vive dentro del grid .contact-talk, que ya colapsa solo). */
@container contact-form (max-width: 28rem) {
  .contact-form__form {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   11. PAGE: HOME
   ==========================================================================
   The Home page extends the shared organisms with a few page-specific
   modifiers. So far:
     .hero--home  → crimson filter, left-aligned title, word-by-word reveal
   ========================================================================== */

/* --- Hero variant: Home ------------------------------------------------ */

/* Crimson filter overrides the default dark multiply */
.hero--home::after {
  background-color: var(--color-crimson);
  opacity: 0.65;
}

/* Push the title block to the bottom of the hero */
.hero--home {
  align-items: flex-end;
}

/* Inside the container: left-align the title, drop the .container max-width
   so the home title can extend full-bleed (only edge padding is preserved) */
.hero--home .hero__container {
  align-items: flex-start;
  max-width: none;
  padding-bottom: var(--space-9);
}

.hero--home .hero__title {
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  max-width: 100%;
  text-align: left;
  text-transform: uppercase;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* Each line typed in the panel renders on its own line */
.hero__line {
  display: block;
}


/* --- Home page: vertical rhythm between sections ---------------------- */

.home-page__section {
  padding-block: var(--space-12);
}


/* --- About ------------------------------------------------------------- */
/* Desktop-first: 12-col asymmetric grid (original). CQ on .about = viewport width. */

.about {
  container-type: inline-size;
  container-name: about;
}

.about__container {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--space-8);
  align-items: start;
}

.about__label {
  grid-column: 1 / span var(--about-label-span);
  grid-row: 1;
}

.about__intro {
  grid-column: var(--about-content-start) / span var(--about-content-span);
  grid-row: 1;
  font-size: var(--fs-md);
  line-height: var(--lh-lead);
  color: var(--color-crimson);
  max-width: none;
}

.about__points {
  grid-column: var(--about-content-start) / span var(--about-content-span);
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-8) var(--grid-gutter);
  list-style: none;
  padding: 0;
  width: 100%;
}

.about__figure {
  grid-column: var(--about-content-start) / span var(--about-content-span);
  grid-row: 3;
  margin: 0;
  margin-block-start: var(--space-4);
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background-color: var(--color-border);
}

/* Tablet: 4 columns (viewport 480px–1024px) */
@container about (max-width: 64rem) and (min-width: 30rem) {
  .about__container {
    grid-template-columns: repeat(var(--grid-cols-tablet), minmax(0, 1fr));
  }

  .about__label {
    grid-column: 1 / span 1;
    grid-row: 1;
  }

  .about__intro {
    grid-column: 2 / -1;
    grid-row: 1;
  }

  .about__points {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about__figure {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

/* Mobile: single column */
@container about (max-width: 29.99rem) {
  .about__container {
    grid-template-columns: minmax(0, 1fr);
  }

  .about__label,
  .about__intro,
  .about__points,
  .about__figure {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .about__points {
    grid-template-columns: minmax(0, 1fr);
  }
}

.about__point {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.about__point-num {
  font-size: var(--fs-sm);
  letter-spacing: var(--label-spacing);
  color: var(--color-crimson);
}

.about__point-text {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-crimson);
}

.about__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* --- Programs ---------------------------------------------------------- */

.programs {
  background-color: var(--color-crimson);
  color: var(--color-white);
}

.programs__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  margin-bottom: var(--space-9);
}

.programs__label {
  color: rgba(255, 255, 255, 0.75);
}

.programs__title {
  color: var(--color-white);
  font-size: var(--fs-xl);
  text-transform: uppercase;
}

.programs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--grid-gutter);
  list-style: none;
  padding: 0;
}

.programs__item {
  display: flex;
}

/* program-card is its own block, used inside .programs */
.program-card {
  position: relative;
  display: flex;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  text-decoration: none;
  color: var(--color-white);
  background-color: rgba(0, 0, 0, 0.3);
  transition: transform var(--transition-slow);
}

.program-card:hover {
  transform: translateY(-2px);
}

.program-card__figure {
  position: absolute;
  inset: 0;
  margin: 0;
}

.program-card__figure--placeholder {
  background-color: rgba(0, 0, 0, 0.25);
}

.program-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.2) brightness(0.85);
  transition: filter var(--transition-slow), transform var(--transition-slow);
}

.program-card:hover .program-card__image {
  filter: grayscale(0) brightness(0.95);
  transform: scale(1.04);
}

.program-card__overlay {
  position: relative;
  z-index: 1;
  align-self: flex-end;
  width: 100%;
  padding: var(--space-5);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

.program-card__title {
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--color-white);
  line-height: var(--lh-lead);
}


/* --- Stories ----------------------------------------------------------- */

.stories {
  background-color: var(--color-bg);
  /* Contenedor para reorganizar la toolbar en móvil (mismo patrón de
     container queries que .stories__header). */
  container-type: inline-size;
  container-name: stories;
}

/*
   Header mirrors the .atencion__header editorial layout: 12-col grid that
   lets the title hang (line 1 outdents to col 2, wrap lands on col 4) and
   the intro use a book indent (line 1 starts at col 4 = title wrap, wrap
   returns to col 1). Container-scoped so the carousel below is unaffected.

   Sort nav and pagination keep their own justify-content: center rules,
   and individual .story cards set their own text-align — so the previous
   text-align: center on .stories is no longer needed.
*/
.stories__header {
  container-type: inline-size;
  container-name: stories-header;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--space-5);
  margin-bottom: var(--space-10);

  /*
     Shared first-line indent for title + intro. 2 col-steps in the
     12-col grid → lands on col 3 left edge.
       1 col-step = (100% + gutter) / 12   = 1 col + 1 gutter
       2 col-steps = (100% + gutter) / 6

     Both elements use the EXACT same expression (via this custom
     property) so they resolve to the exact same px value at the
     same containing-block width — no cancellation math, no
     opportunity for sub-pixel rounding to drift the alignment.
  */
  --stories-line1-indent: calc((100% + var(--grid-gutter)) / 6);
}

.stories__label {
  grid-column: 1 / -1;
}

/*
   Title block-indent — the whole title sits at the shared col-3 indent.
   When it wraps to a second line, that line also stays at col 3
   (no hanging effect). Simpler than the previous padding+negative
   text-indent dance, and crucially: the first character's left
   edge is computed from a SINGLE value rather than the difference
   of two, which keeps it pixel-perfectly aligned with the intro.
*/
.stories__title {
  grid-column: 1 / -1;
  padding-inline-start: var(--stories-line1-indent);
  color: var(--color-crimson);
  font-size: var(--fs-xl);
  text-transform: uppercase;
}

/*
   Book indent — line 1 at col 3 (same value as the title's
   padding-inline-start), wrap lines return to col 1.
*/
.stories__intro {
  grid-column: 1 / -1;
  text-indent: var(--stories-line1-indent);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-crimson);
}

/* Tablet: 4-col — calc()s still resolve against the header's width,
   so the indent scales down proportionally without extra rules. */
@container stories-header (max-width: 64rem) and (min-width: 30rem) {
  .stories__header {
    grid-template-columns: repeat(var(--grid-cols-tablet), minmax(0, 1fr));
  }
}

/* Mobile: single column */
@container stories-header (max-width: 29.99rem) {
  .stories__header {
    grid-template-columns: minmax(0, 1fr);
  }
}

/*
   Toolbar row — sort nav on the left, "Testimonio X de Y" on the right.
   Wraps to a single column on narrow widths so neither edge collides.
*/
.stories__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-block-start: var(--space-7);
}

/* Sort nav — Más recientes / A-Z / Aleatorio */
.stories__sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
}

/*
   Autoplay toggle — shares the toolbar's small-caps register with the
   sort links (same color, same opacity ramp on hover) so it reads as
   part of the same control cluster rather than a separate widget.
   JS swaps the inner .ph-pause ↔ .ph-play class and the aria-label.
*/
.stories__autoplay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--space-1) var(--space-2);
  border: none;
  background: transparent;
  color: var(--color-crimson);
  cursor: pointer;
  opacity: 0.6;
  transition:
    color var(--transition-fast),
    opacity var(--transition-fast);
}

.stories__autoplay:hover,
.stories__autoplay:focus-visible {
  opacity: 1;
  color: var(--color-crimson-dark);
}

.stories__autoplay:focus-visible {
  outline: 2px solid var(--color-crimson);
  outline-offset: 2px;
}

.stories__autoplay i {
  font-size: var(--fs-base);
  line-height: 1;
}

/* Page indicator — same small-caps treatment as the sort links so both
   sides of the toolbar share a single visual register. JS keeps the
   .stories__count-current span in sync with Swiper's realIndex.
   margin-inline-start: auto pushes the count to the far right edge,
   leaving the sort nav + autoplay button grouped on the left. */
.stories__count {
  margin: 0;
  margin-inline-start: auto;
  font-size: var(--fs-sm);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--color-crimson);
}

/*
   Móvil: en flex con wrap, los tres elementos caían en tres filas sueltas
   (play arriba solo, orden en medio, contador flotando a la derecha).
   Pasamos a un grid de 2 filas: fila 1 = play + contador (extremos),
   fila 2 = navegación de orden a todo el ancho.
*/
@container stories (max-width: 29.99rem) {
  .stories__toolbar {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: var(--space-3);
    row-gap: var(--space-3);
  }

  .stories__autoplay {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .stories__count {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin-inline-start: 0;
  }

  .stories__sort {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

.stories__sort-btn {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--color-crimson);
  padding-block: var(--space-1);
  border-bottom: 1px solid transparent;
  text-decoration: none;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    opacity var(--transition-fast);
  opacity: 0.6;
}

.stories__sort-btn:hover,
.stories__sort-btn:focus-visible {
  opacity: 1;
  color: var(--color-crimson-dark);
  outline: none;
}

.stories__sort-btn.is-active {
  opacity: 1;
  color: var(--color-crimson);
  border-bottom-color: var(--color-crimson);
}

.stories__carousel-wrap {
  max-width: min(52rem, 100%);
  margin-inline: auto;
  margin-block-start: var(--space-8);
}

.stories__carousel {
  overflow: hidden;
}

/* Progressive enhancement — stacked list before Swiper inits */
.stories__carousel:not(.swiper-initialized) .stories__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.stories__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.stories__item {
  height: auto;
  /* Stabilises the carousel height across slides of varying quote
     length so the bottom controls (bullets / arrows / count) don't
     jump between transitions. Combined with Swiper's default
     align-items: stretch on .swiper-wrapper, all slides end up the
     same height = max(natural content, this min). */
  min-height: 16rem;
  box-sizing: border-box;
}

/*
   Bottom controls row — bullets pinned to the left, arrows pinned to
   the right (mirrors the kseman image-carousel pattern but with
   space-between rather than center). On narrow widths the two halves
   stay aligned and wrap their own items thanks to flex-wrap.
*/
.stories__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6) var(--space-4);
  margin-block-start: var(--space-7);
}

.stories__arrows {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.stories__arrow {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-crimson);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
}

.stories__arrow i {
  font-size: var(--fs-xl);
}

.stories__arrow:hover {
  color: var(--color-crimson-dark);
}

.stories__arrow:focus-visible {
  outline: 2px solid var(--color-crimson);
  outline-offset: 2px;
}

.stories__arrow.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}

/*
   Pagination override — Swiper's vendor CSS applies
     .swiper-pagination                              { position: absolute; … }
     .swiper-pagination-bullets.swiper-pagination-horizontal { width: 100%; bottom: 10px; left: 0; }
   The second selector is (0,2,0), so a flat .stories__pagination
   (0,1,0) loses by specificity even with global.css loaded after
   swiper-bundle.min.css. Anchoring our rule to .stories__controls
   brings us up to (0,2,0) — same specificity as Swiper's selector,
   then source order wins because our file loads later. Without this
   the bullets steal 100% width inside the controls row and push the
   arrows onto a second line.
*/
.stories__controls .stories__pagination {
  position: static;
  width: auto;
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin: 0;
  --swiper-pagination-bullet-size: 0.625rem;
  --swiper-theme-color: var(--color-crimson);
}

.stories__controls .stories__pagination .swiper-pagination-bullet {
  opacity: 1;
  background: var(--color-bg);
  border: 2px solid var(--color-crimson);
}

.stories__controls .stories__pagination .swiper-pagination-bullet-active {
  background: var(--color-crimson);
}

/*
   Pull-quote treatment for a single testimonial slide — matches the
   visual register of .voluntariado__quote (left border accent, larger
   font, looser leading, curly quote marks) but adapted to the
   carousel context (block .story__quote wrapping a kt()-generated <p>,
   plus an author/year footer below).

   The whole blockquote is a white card filling the slide. height: 100%
   makes it stretch when its .stories__item parent is taller than the
   natural content (because Swiper stretches all slides to match the
   tallest one). Author is pinned to the bottom of the card via
   margin-block-start: auto on .story__author below.
*/
.story {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  margin: 0;
  padding: var(--space-8) var(--space-7);
  text-align: left;
  background-color: var(--color-white);
}

.story__quote {
  font-size: var(--fs-md);
  line-height: var(--lh-lead);
  color: var(--color-crimson);
  border-inline-start: 4px solid var(--color-crimson);
  padding-inline-start: var(--space-5);
  /* Comfort line length — 65ch caps the measure so the quote stays
     readable even on wide viewports. Block stays left-aligned because
     .story uses align-items: flex-start. */
  max-width: 65ch;
}

/* Curly quotes attach to the first/last kt() paragraph so they sit
   inline with the text instead of breaking onto their own lines. */
.story__quote :where(p):first-child::before {
  content: "\201C";
}

.story__quote :where(p):last-child::after {
  content: "\201D";
}

/* Móvil: cita más pequeña, padding izquierdo más ajustado y tarjeta más
   baja para que el testimonio quepa en la mayoría de móviles. */
@container stories (max-width: 29.99rem) {

  /* Apuntamos también a los <p>/<li> generados por kt(): la regla base
     `p { font-size }` (especificidad 0,0,1) gana a la herencia con
     :where() (0,0,0), así que aquí forzamos el tamaño en los párrafos. */
  .story__quote,
  .story__quote :where(p, li) {
    font-size: var(--fs-sm);
  }

  .story__quote {
    padding-inline-start: var(--space-3);
  }

  /* Mantiene al autor alineado con el primer carácter de la cita
     (borde 4px + padding reducido). */
  .story__author {
    margin-inline-start: calc(var(--space-3) + 4px);
  }

  .stories__item {
    min-height: 8rem;
  }

  .stories__arrows {
    width: 100%;
    justify-content: space-between;
  }
}

.story__author {
  /* margin-block-start: auto pushes the author to the bottom of the
     flex column, so when a short quote leaves the card with extra
     vertical room (because all slides equal the tallest), the gap
     sits between quote and author instead of below them.

     margin-inline-start matches the quote's padding-inline-start so
     the author label sits flush with the first character of the
     quote text (just inside the crimson rule), not flush with the
     card edge. */
  margin-block-start: auto;
  /* Matches the .story__quote's border (4px) + padding-inline-start
     (var(--space-5)) so the author label aligns flush with the first
     character of the quote text. */
  margin-inline-start: calc(var(--space-5) + 4px);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--color-crimson);
}

.story__year {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}


/* --- Supporters / Colaboradores --------------------------------------- */

.supporters {
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

.supporters__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--color-crimson);
  text-align: center;
  margin-bottom: var(--space-7);
}

.supporters__list {
  display: flex;
  flex-wrap: wrap;
  /* Items alineados por arriba: junto a la altura fija de la zona del logo
     hace que todos los nombres empiecen en la misma línea base. */
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-9);
  list-style: none;
  padding: 0;
}

.supporters__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
  text-align: center;
  max-width: 14rem;
}

/* Zona del logo con altura reservada y el logo pegado abajo. Así, sea cual sea
   la altura/proporción del logo, su base queda en la misma línea y —con el gap
   constante— los nombres se alinean por su línea base. */
.supporters__logo-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: clamp(4rem, 7vw, 6rem);
}

.supporters__logo {
  max-height: 100%;
  width: auto;
  filter: grayscale(1) opacity(0.75);
  transition: filter var(--transition-normal);
}

.supporters__logo:hover {
  filter: grayscale(0) opacity(1);
}

.supporters__name {
  font-size: var(--fs-sm);
  line-height: var(--lh-compact);
  color: var(--color-text-muted);
}

/* Word-by-word reveal — staggered fade-in + slide-up */
.hero--home .hero__word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  animation: hero-word-reveal 0.7s ease forwards;
  animation-delay: calc(var(--i, 0) * 0.12s);
}

@keyframes hero-word-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ==========================================================================
   12. PAGE: CALENDAR
   --------------------------------------------------------------------------
   .calendar-page          page wrapper
   .calendar-section       container that owns the responsive switch
   .calendar-section__nav  month picker (prev / label / next)
   .calendar-grid          desktop month matrix (visible above ~720px)
   .calendar-agenda        chronological mobile list (below ~720px)
   .calendar-event         the event chip shared by grid + agenda
   .calendar-disclaimer    cancellation notice under the calendar
   --------------------------------------------------------------------------
   Tokens local to this section:
     --calendar-cell-min-height
     --color-event-featured / --color-event-regular
   ========================================================================== */

:root {
  --calendar-cell-min-height: 7.5rem;
  --color-event-featured: var(--color-crimson);
  --color-event-regular: var(--color-text);
  --calendar-border: var(--color-border);
  --calendar-weekend-bg: var(--color-bg);
  --calendar-weekend-bg-muted: color-mix(in srgb, var(--color-bg) 45%, var(--color-surface));
}

main.calendar-page {
  padding-block: var(--space-9) var(--space-11);
}

.calendar-page__intro {
  margin-block-end: var(--space-9);
}

.calendar-intro {
  max-width: 48rem;
  font-size: var(--fs-md);
  line-height: var(--lh-lead);
  color: var(--color-text);
}

.calendar-section {
  container-type: inline-size;
  container-name: calendar;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

/* Month picker ------------------------------------------------------------ */
.calendar-section__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.calendar-section__month {
  font-size: var(--fs-xl);
  font-weight: var(--fw-regular);
  color: var(--color-crimson);
  text-align: center;
  margin: 0;
}

.calendar-section__nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  color: var(--color-crimson);
  background: transparent;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.calendar-section__nav-link:hover,
.calendar-section__nav-link:focus-visible {
  background-color: var(--color-crimson);
  color: var(--color-white);
  outline: none;
}

/* Grid -------------------------------------------------------------------- */
.calendar-grid {
  display: none;
  border: 1px solid var(--calendar-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-surface);
}

.calendar-grid__header,
.calendar-grid__row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-grid__weekday {
  padding-block: var(--space-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--label-spacing);
  text-align: center;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--calendar-border);
}

.calendar-grid__weekday--weekend {
  background-color: var(--calendar-weekend-bg-muted);
  color: var(--color-text);
}

.calendar-grid__row+.calendar-grid__row .calendar-grid__cell {
  border-top: 1px solid var(--calendar-border);
}

.calendar-grid__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-height: var(--calendar-cell-min-height);
  padding: var(--space-2);
  border-inline-start: 1px solid var(--calendar-border);
}

.calendar-grid__cell:first-child {
  border-inline-start: none;
}

.calendar-grid__cell--out-of-month {
  /* White like weekdays — “empty” month is conveyed by faded day numbers,
     not a grey wash that mimicked weekend shading. */
  background-color: var(--color-surface);
}

.calendar-grid__cell--weekend {
  background-color: var(--calendar-weekend-bg);
}

.calendar-grid__cell--weekend.calendar-grid__cell--out-of-month {
  background-color: var(--calendar-weekend-bg-muted);
}

.calendar-grid__cell--out-of-month .calendar-grid__day-number {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.calendar-grid__cell--today .calendar-grid__day-number {
  /* Only the visual difference vs a regular day: filled crimson disc.
     Box dimensions (1.75rem × 1.75rem) live on the base rule below so
     every day number occupies the same square — keeps the today bubble
     and the plain numbers on the same baseline across the row. */
  background-color: var(--color-crimson);
  color: var(--color-white);
}

.calendar-grid__day-number {
  /* Right-aligned within the column-flex .calendar-grid__cell so the
     number sits at the cell's top-right corner. align-self also makes
     the today bubble pin to the right edge without needing a separate
     rule.

     Every day number gets the same 1.75rem square so the today bubble
     (which only adds background + color via the --today modifier) sits
     on the exact same baseline as the plain numbers across the row. */
  align-self: flex-end;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 1.75rem;
  min-width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  font-size: 0.8125rem;
  font-weight: var(--fw-regular);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  line-height: 1;
  text-align: center;
  transform: translateY(0.1em);
}

.calendar-grid__events {
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Event chip (shared) ----------------------------------------------------- */
.calendar-event__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  border-inline-start: 3px solid currentColor;
  background-color: color-mix(in srgb, currentColor 8%, transparent);
  color: var(--color-event-regular);
  transition: background-color var(--transition-fast);
}

.calendar-event__link:hover,
.calendar-event__link:focus-visible {
  background-color: color-mix(in srgb, currentColor 18%, transparent);
  outline: none;
}

.calendar-event--featured .calendar-event__link {
  color: var(--color-event-featured);
}

.calendar-event--regular .calendar-event__link {
  color: var(--color-event-regular);
}

.calendar-event__time {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  letter-spacing: 0.02em;
}

.calendar-event__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: inherit;
  line-height: var(--lh-compact);
}

/* Grid-only: tighter chips so more events fit per cell */
.calendar-grid .calendar-event__link {
  padding: var(--space-0) var(--space-1);
  gap: 0;
  color: var(--color-crimson);
}

.calendar-grid .calendar-event__time,
.calendar-grid .calendar-event__title {
  font-size: 0.7rem;
  line-height: 1.2;
}

.calendar-event__badge {
  align-self: flex-start;
  margin-block-start: var(--space-0);
  padding: 0 var(--space-1);
  font-size: 0.7rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 1px solid currentColor;
  color: inherit;
}

/* Agenda (mobile) --------------------------------------------------------- */
.calendar-agenda {
  display: block;
}

.calendar-agenda__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  list-style: none;
  padding: 0;
  margin: 0;
}

.calendar-agenda__empty {
  color: var(--color-text-muted);
  font-style: italic;
}

.calendar-agenda__day {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-top: 1px solid var(--calendar-border);
}

.calendar-agenda__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
}

.calendar-agenda__day-number {
  font-size: var(--fs-xl);
  font-weight: var(--fw-regular);
  line-height: 1;
  color: var(--color-crimson);
}

.calendar-agenda__day--today .calendar-agenda__day-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background-color: var(--color-crimson);
  color: var(--color-white);
}

.calendar-agenda__day-name {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--label-spacing);
  color: var(--color-text-muted);
}

.calendar-agenda__events {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.calendar-agenda .calendar-event__link {
  flex-direction: row;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
}

.calendar-agenda .calendar-event__title {
  font-size: var(--fs-base);
}

/* Responsive switch — container query on .calendar-section ---------------- */
@container calendar (min-width: 45rem) {
  .calendar-grid {
    display: block;
  }

  .calendar-agenda {
    display: none;
  }
}

/* Disclaimer (calendar listing) ------------------------------------------- */
.calendar-disclaimer {
  margin-block-start: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background-color: color-mix(in srgb, var(--color-crimson) 8%, var(--color-surface));
  border-inline-start: 3px solid var(--color-crimson);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.calendar-disclaimer :where(p, li) {
  font-size: var(--fs-sm);
}

.calendar-disclaimer a {
  color: var(--color-crimson);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}


/* ==========================================================================
   13. PAGE: EVENT (detail)
   ========================================================================== */

main.event-page {
  padding-block: 0 var(--space-11);
}

.event-header {
  padding-block: var(--space-8);
  background-color: var(--color-crimson);
  color: var(--color-white);
}

.event-header__inner--has-cover {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

@media (min-width: 48rem) {
  .event-header__inner--has-cover {
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    gap: var(--space-8);
  }
}

.event-header__text {
  min-width: 0;
}

.event-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

.event-header__eyebrow {
  font-size: var(--fs-sm);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  margin: 0 0 var(--space-8);
}

.event-header__eyebrow a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.event-header__eyebrow a:hover,
.event-header__eyebrow a:focus-visible {
  color: var(--color-text);
}

.event-header__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
}

.event-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.625rem;
  padding: 0 0.7em;
  font-size: 0.7rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  background-color: color-mix(in srgb, var(--color-white) 18%, transparent);
}

.event-badge--featured {
  background-color: var(--color-white);
  color: var(--color-crimson);
}

.event-header__title {
  font-size: var(--fs-display);
  color: inherit;
  margin: 0;
}

.event-header__summary {
  max-width: 48rem;
  margin-block-start: var(--space-4);
  font-size: var(--fs-md);
  line-height: var(--lh-lead);
}

.event-cover {
  margin: 0;
}

.event-cover__picture {
  display: block;
}

.event-cover__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 30rem;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.event-page__body {
  margin-block-start: var(--space-9);
}

.event-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-9);
  align-items: start;
}

.event-content {
  min-width: 0;
}

.event-description {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}

.event-description :where(p, li)+ :where(p, li, h2, h3) {
  margin-top: var(--space-4);
}

.event-exceptions__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--fs-sm);
}

.event-exceptions__item {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-1);
}

.event-exceptions__notes {
  color: var(--color-text-muted);
}

.event-map {
  margin-block-start: var(--space-8);
}

.event-map__title {
  font-size: var(--fs-md);
  margin: 0 0 var(--space-3);
}

.event-map__embed iframe,
.event-map__canvas,
.event-map .location-map {
  width: 100%;
  border: 0;
  border-radius: var(--radius-md);
}

.event-map .location-map {
  margin: 0;
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 22rem;
  overflow: hidden;
}

.event-map .location-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
}

.event-meta {
  position: sticky;
  top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.event-meta__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: 0;
}

.event-meta__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.event-meta__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Unified panel text size — hierarchy is created with colour only
   (crimson/black = primary, muted grey = secondary), never a second axis. */
.event-meta__value {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--color-text);
  margin: 0;
}

/* Primary values across the panel share one treatment: crimson, regular
   weight. Hierarchy vs secondary text is colour only (regla §14). */
.event-meta__headline,
.event-exceptions__date,
.event-meta__venue {
  color: var(--color-crimson);
  font-weight: var(--fw-regular);
}

.event-meta__sub {
  color: var(--color-text);
}

.event-meta__address,
.event-meta__address :where(p) {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.event-page__back {
  display: inline-block;
  margin-block-start: var(--space-8);
  font-size: var(--fs-sm);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.event-page__back:hover,
.event-page__back:focus-visible {
  color: var(--color-text);
}

.event-meta__notice {
  margin: 0;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--color-border);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

.event-meta__notice :where(p, li) {
  margin: 0;
  font-size: inherit;
  color: inherit;
}

.event-meta__notice a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.event-meta__notice a:hover,
.event-meta__notice a:focus-visible {
  color: var(--color-crimson);
}


/* ==========================================================================
   14. PAGE: SERVICES
   --------------------------------------------------------------------------
   .services-page                  page wrapper
   .services-page__section         vertical rhythm helper

   Each section is its own container query scope, with a 12-col asymmetric
   grid on desktop (≥ ~64rem) and progressively simpler layouts on tablet
   (4 cols) and mobile (single column). The 12-col grid intentionally
   leaves empty columns to follow the rhythm in Figma.

     .atencion          patient & family support program
     .sensibilizacion   awareness program
     .voluntariado      volunteering program
     .piso              assisted housing program

   Block names mirror those used in services.php and the blueprint fields
   (atencion_*, sensibilizacion_*, etc.). The wider ecosystem convention
   (ws-conv-naming, ws-conv-css) is English-only — a future refactor of
   services.php + services.yml should rename these blocks to e.g. .support,
   .awareness, .volunteering, .housing. Kept in sync for now to avoid a
   blueprint + content migration alongside this layout work.
   ========================================================================== */

/* --- Vertical rhythm between sections --------------------------------- */
.services-page__section {
  padding-block: var(--space-13);

  /* Holgura al saltar desde un ancla (#atencion, #sensibilizacion, …)
     para que el inicio de la sección no quede pegado al borde superior. */
  scroll-margin-top: var(--space-6);

  /* Approx 1 column of the designer's 6-col InDesign grid (= 2 cols of the
     12-col CSS grid). Used as the magnitude of the title hanging indent
     and the intro book indent so both fall on the same column rhythm. */
  --first-line-indent: clamp(2.5rem, 11vw, 11rem);
}

.services-page__section+.services-page__section {
  padding-block-start: 0;
}


/* --- Shared: big section title (overrides .label) --------------------- */
/*
   Hanging indent: line 1 sits at the box's left edge, subsequent lines
   are pushed in by --first-line-indent. Achieved with positive padding +
   negative text-indent of the same magnitude.

   The PHP applies the small .label atom and a section-specific class to
   the same <span>; these declarations come after .label in the cascade
   so the bigger size wins without bumping specificity.
*/
.atencion__label,
.sensibilizacion__label,
.voluntariado__label,
.piso__label {
  font-size: var(--fs-xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: 0;
  color: var(--color-crimson);
  padding-inline-start: var(--first-line-indent);
  /* Honor manual line breaks typed in the panel (textarea fields).
     Newlines are kept; runs of spaces still collapse to one. */
  white-space: pre-line;
  text-indent: calc(-1 * var(--first-line-indent));
}


/* --- Shared: intro paragraph (book first-line indent) ----------------- */
/*
   Book indent: line 1 is pushed in by --first-line-indent, subsequent
   lines wrap back to the left margin.
*/
.atencion__intro,
.sensibilizacion__intro,
.voluntariado__intro,
.piso__intro {
  font-size: var(--fs-md);
  line-height: var(--lh-lead);
  color: var(--color-crimson);
  text-indent: var(--first-line-indent);
}


/* --- Shared: section figure ------------------------------------------- */
.atencion__image,
.sensibilizacion__image,
.voluntariado__image,
.piso__gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ==========================================================================
   14.1 Section: Atención al paciente y su familia
   --------------------------------------------------------------------------
   Desktop 12-col grid:
     row 1 ─ header (inner 12-col grid)
              label  col 1 / -1   full-bleed, line 1 outdents to col 2,
                                  wrap lands on col 4 (grid-aligned via calc)
              intro  col 1 / -1   full-bleed, line 1 lands on col 4,
                                  wrap returns to col 1 (same col-step calc)
     row 2 ─ figure   col 1 / span 5   image hugs left edge
             items    col 7 / span 6   two sub-columns of text
   Title and intro use calc() tied to the container width so the indents
   fall exactly on the 12-col grid at any viewport.
   ========================================================================== */

.atencion {
  container-type: inline-size;
  container-name: atencion;
}

.atencion__container {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--space-9);
  align-items: start;
}

.atencion__header {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--space-5);
}

/*
   Title and intro both span the full container so 100% inside their calc()
   expressions resolves to the same width: the 12-col grid's content area.
   That lets us land them precisely on the grid using col-steps:

      one col-step  = (100% + gutter) / 12   ≈ 1 col + 1 gutter
      two col-steps = (100% + gutter) / 6
      three col-steps = (100% + gutter) / 4

   Title (asymmetric hanging indent):
     padding-inline-start = 3 col-steps  → wrap lands on col 4
     text-indent          = -2 col-steps → line 1 outdents back to col 2
   Intro (book indent):
     text-indent          = 3 col-steps  → line 1 lands on col 4 (= title wrap)
                                             wrap returns to col 1
*/
.atencion__label {
  grid-column: 1 / -1;
  padding-inline-start: calc((100% + var(--grid-gutter)) / 4);
  text-indent: calc(((100% + var(--grid-gutter)) / 6) * -1);
}

.atencion__intro {
  grid-column: 1 / -1;
  text-indent: calc((100% + var(--grid-gutter)) / 4);
}

.atencion__figure {
  grid-column: 1 / span 4;
  grid-row: 2;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background-color: var(--color-border);
}

.atencion__items {
  grid-column: 5 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--grid-gutter);
  list-style: none;
  padding: 0;
  margin: 0;
}

.atencion__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.atencion__item-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--color-crimson);
}

.atencion__item-body {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-crimson);
}

/* Tablet: 4-col, full-width stack */
@container atencion (max-width: 64rem) and (min-width: 30rem) {

  .atencion__container,
  .atencion__header {
    grid-template-columns: repeat(var(--grid-cols-tablet), minmax(0, 1fr));
  }

  .atencion__header,
  .atencion__figure,
  .atencion__items {
    grid-column: 1 / -1;
  }

  .atencion__label,
  .atencion__intro {
    grid-column: 1 / -1;
  }

  .atencion__header {
    grid-row: 1;
  }

  .atencion__figure {
    grid-row: 2;
    aspect-ratio: 16 / 9;
  }

  .atencion__items {
    grid-row: 3;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: single column */
@container atencion (max-width: 29.99rem) {

  .atencion__container,
  .atencion__header {
    grid-template-columns: minmax(0, 1fr);
  }

  .atencion__header,
  .atencion__figure,
  .atencion__items {
    grid-column: 1 / -1;
  }

  .atencion__header {
    grid-row: 1;
  }

  .atencion__figure {
    grid-row: 2;
    aspect-ratio: 16 / 9;
  }

  .atencion__items {
    grid-row: 3;
    grid-template-columns: minmax(0, 1fr);
  }

  /* Drop the grid-aligned first-line indents in the single-column layout. */
  .atencion__label,
  .atencion__intro {
    grid-column: 1 / -1;
    padding-inline-start: 0;
    text-indent: 0;
  }
}


/* ==========================================================================
   14.2 Section: Programa de sensibilización
   --------------------------------------------------------------------------
   Mapped from the designer's 6-col InDesign grid (1 InDesign col = 2 CSS cols).
   Desktop 12-col CSS grid:
     row 1 ─ title    col 1 / -1       full-width label, aligned with intro
     row 2 ─ intro    col 1 / span 10  paragraph, last 2 cols empty
     row 3 ─ item 1   col 3 / span 4   left half
             item 2   col 7 / span 4   right of item 1, leaves cols 11–12 empty
     row 4 ─ figure   col 5 / span 6   centered narrow photo
   ========================================================================== */

.sensibilizacion {
  container-type: inline-size;
  container-name: sensibilizacion;
}

.sensibilizacion__container {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--space-9);
  align-items: start;
}

.sensibilizacion__header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--space-6);
}

/*
   Sensibilización label + intro share a 2 col-step indent (line 1 / wrap
   lands on col 3, the visual reference line). Each calc() solves for its
   own grid-span:

     label at span 12 → 100% = 12·col + 11·gutter
                        2 col-steps = (100% + gutter) / 6
     intro at span 10 → 100% = 10·col +  9·gutter
                        2 col-steps = (100% + gutter) / 5
*/
.sensibilizacion__label {
  grid-column: 1 / -1;
  padding-inline-start: calc((100% + var(--grid-gutter)) / 6);
  text-indent: calc(((100% + var(--grid-gutter)) / 6) * -1);
}

.sensibilizacion__intro {
  grid-column: 1 / span 10;
  text-indent: calc((100% + var(--grid-gutter)) / 5);
}

.sensibilizacion__items {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}

.sensibilizacion__item:nth-child(odd) {
  grid-column: 3 / span 4;
}

.sensibilizacion__item:nth-child(even) {
  grid-column: 7 / span 4;
}

.sensibilizacion__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sensibilizacion__item-num {
  font-size: var(--fs-sm);
  letter-spacing: var(--label-spacing);
  color: var(--color-crimson);
}

.sensibilizacion__item-text {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-crimson);
}

.sensibilizacion__figure {
  grid-column: 5 / span 6;
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

/* Tablet: 4-col */
@container sensibilizacion (max-width: 64rem) and (min-width: 30rem) {

  .sensibilizacion__container,
  .sensibilizacion__header,
  .sensibilizacion__items {
    grid-template-columns: repeat(var(--grid-cols-tablet), minmax(0, 1fr));
  }

  .sensibilizacion__label,
  .sensibilizacion__intro,
  .sensibilizacion__items,
  .sensibilizacion__figure {
    grid-column: 1 / -1;
  }

  .sensibilizacion__item:nth-child(odd),
  .sensibilizacion__item:nth-child(even) {
    grid-column: span 2;
  }
}

/* Mobile */
@container sensibilizacion (max-width: 29.99rem) {

  .sensibilizacion__container,
  .sensibilizacion__header,
  .sensibilizacion__items {
    grid-template-columns: minmax(0, 1fr);
  }

  .sensibilizacion__label,
  .sensibilizacion__intro,
  .sensibilizacion__items,
  .sensibilizacion__figure {
    grid-column: 1 / -1;
  }

  .sensibilizacion__item:nth-child(odd),
  .sensibilizacion__item:nth-child(even) {
    grid-column: 1 / -1;
  }
}


/* ==========================================================================
   14.3 Section: Programas de voluntariado
   --------------------------------------------------------------------------
   Mapped from the designer's 6-col InDesign grid (1 InDesign col = 2 CSS cols).
   Desktop 12-col CSS grid:
     row 1 ─ title    col 1 / span 6   left-aligned hanging-indent heading
             intro    col 1 / span 10  wide paragraph, book first-line indent
     row 2 ─ figure   col 3 / span 6   centered-left medium image
     row 3 ─ item 1   col 5 / span 4   right of figure
             item 2   col 9 / span 4   far right column
     row 4 ─ quote    col 3 / span 8   centered closing quote
   Empty rhythm: cols 7–12 around the title, cols 9–12 next to the figure.
   ========================================================================== */

.voluntariado {
  container-type: inline-size;
  container-name: voluntariado;
}

.voluntariado__container {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--space-9);
  align-items: start;
}

.voluntariado__header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--space-5);
}

.voluntariado__label {
  grid-column: 1 / span 6;
}

.voluntariado__intro {
  grid-column: 1 / span 10;
}

.voluntariado__figure {
  grid-column: 3 / span 6;
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.voluntariado__items {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--space-7);
  list-style: none;
  padding: 0;
  margin: 0;
}

.voluntariado__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.voluntariado__item:nth-child(odd) {
  grid-column: 5 / span 4;
}

.voluntariado__item:nth-child(even) {
  grid-column: 9 / span 4;
}

.voluntariado__item-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--color-crimson);
}

.voluntariado__item-body {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-crimson);
}

.voluntariado__quote {
  grid-column: 1 / span 8;
  font-size: var(--fs-md);
  line-height: var(--lh-lead);
  color: var(--color-crimson);
  text-align: left;
  margin: 0;
  border-inline-start: 3px solid var(--color-crimson);
  padding-inline-start: var(--space-7);
}

.voluntariado__quote::before {
  content: "\201C";
}

.voluntariado__quote::after {
  content: "\201D";
}

/* Tablet */
@container voluntariado (max-width: 64rem) and (min-width: 30rem) {

  .voluntariado__container,
  .voluntariado__header,
  .voluntariado__items {
    grid-template-columns: repeat(var(--grid-cols-tablet), minmax(0, 1fr));
  }

  .voluntariado__label,
  .voluntariado__intro,
  .voluntariado__figure,
  .voluntariado__quote {
    grid-column: 1 / -1;
  }

  .voluntariado__item:nth-child(odd),
  .voluntariado__item:nth-child(even) {
    grid-column: span 2;
  }
}

/* Mobile */
@container voluntariado (max-width: 29.99rem) {

  .voluntariado__container,
  .voluntariado__header,
  .voluntariado__items {
    grid-template-columns: minmax(0, 1fr);
  }

  .voluntariado__label,
  .voluntariado__intro,
  .voluntariado__figure,
  .voluntariado__quote {
    grid-column: 1 / -1;
  }

  .voluntariado__item:nth-child(odd),
  .voluntariado__item:nth-child(even) {
    grid-column: 1 / -1;
  }
}


/* ==========================================================================
   14.4 Section: Piso asistencial
   --------------------------------------------------------------------------
   Desktop 12-col grid:
     row 1 ─ header   col 1 / span 10  full-width heading + intro
     row 2 ─ items    col 1 / span 4   numbered text on the left
             gallery  col 7 / span 6   photo carousel on the right
   Empty rhythm: cols 11–12 on row 1, cols 5–6 between items and gallery.
   ========================================================================== */

.piso {
  container-type: inline-size;
  container-name: piso;
}

.piso__container {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--space-9);
  align-items: start;
}

.piso__header {
  grid-column: 1 / span 10;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.piso__intro {
  max-width: 56ch;
}

.piso__items {
  grid-column: 1 / span 4;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  list-style: none;
  padding: 0;
  margin: 0;
}

.piso__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.piso__item-num {
  font-size: var(--fs-sm);
  letter-spacing: var(--label-spacing);
  color: var(--color-crimson);
}

.piso__item-text {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-crimson);
}

/* --- Swipe carousel ----------------------------------------------------
   `.piso__gallery-wrap` keeps its place in the asymmetric 12-col grid
   (right column on desktop, full-width on tablet/mobile). The inner
   `.piso__gallery` is a horizontal scroll-snap track; navigation chrome
   (arrows + dots) is enhanced by `assets/js/piso-gallery.js`.
   ---------------------------------------------------------------------- */

.piso__gallery-wrap {
  position: relative;
  grid-column: 7 / span 6;
  grid-row: 2;
  min-width: 0;
}

.piso__gallery {
  display: flex;
  flex-direction: row;
  gap: var(--grid-gutter);
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.piso__gallery::-webkit-scrollbar {
  display: none;
}

.piso__gallery.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.piso__gallery:focus-visible {
  outline: 2px solid var(--color-crimson);
  outline-offset: 4px;
}

.piso__gallery-item {
  flex: 0 0 100%;
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.piso__gallery-item img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* Arrows */
.piso__gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  color: var(--color-crimson);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  transition: opacity 160ms ease, transform 160ms ease;
}

.piso__gallery-arrow:hover {
  transform: translateY(-50%) scale(1.05);
}

.piso__gallery-arrow:focus-visible {
  outline: 2px solid var(--color-crimson);
  outline-offset: 3px;
}

.piso__gallery-arrow[disabled] {
  opacity: 0.35;
  cursor: not-allowed;
}

.piso__gallery-arrow--prev {
  left: var(--space-3);
}

.piso__gallery-arrow--next {
  right: var(--space-3);
}

/* Hide arrows on coarse pointers (touch); rely on swipe + dots. */
@media (pointer: coarse) {
  .piso__gallery-arrow {
    display: none;
  }
}

/* Pagination dots */
.piso__gallery-pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.piso__gallery-dot {
  display: inline-flex;
}

.piso__gallery-dot-btn {
  width: 0.5rem;
  height: 0.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: currentColor;
  color: var(--color-crimson);
  opacity: 0.3;
  cursor: pointer;
  transition: opacity 160ms ease, transform 160ms ease;
}

.piso__gallery-dot-btn:hover {
  opacity: 0.6;
}

.piso__gallery-dot-btn[aria-selected="true"] {
  opacity: 1;
  transform: scale(1.25);
}

.piso__gallery-dot-btn:focus-visible {
  outline: 2px solid var(--color-crimson);
  outline-offset: 3px;
}

/* Tablet */
@container piso (max-width: 64rem) and (min-width: 30rem) {
  .piso__container {
    grid-template-columns: repeat(var(--grid-cols-tablet), minmax(0, 1fr));
  }

  .piso__header {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .piso__items {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .piso__gallery-wrap {
    grid-column: 1 / -1;
    grid-row: 3;
  }

  .piso__gallery-item {
    flex-basis: calc(50% - var(--grid-gutter) / 2);
  }
}

/* Mobile */
@container piso (max-width: 29.99rem) {
  .piso__container {
    grid-template-columns: minmax(0, 1fr);
  }

  .piso__header,
  .piso__items,
  .piso__gallery-wrap {
    grid-column: 1 / -1;
  }

  .piso__gallery-item {
    flex-basis: 100%;
  }
}


/* ==========================================================================
   15. PAGE: ABOUT
   --------------------------------------------------------------------------
   .about-page                     page wrapper
   .about-page__section            vertical rhythm + first-line-indent token

   Each section is its own container query scope, with a 12-col asymmetric
   grid on desktop (≥ ~64rem). On smaller widths the layouts collapse to 4
   columns (tablet) and a single column (mobile). The 12-col grid leaves
   empty columns to follow the rhythm in Figma.

     .about-intro       opening paragraph below the hero
     .mision-objetivo   two cards side by side
     .equipo            group photo + association history
     .directiva         board members grid (4 × 2)
     .voluntarias       volunteers group photo + names + quote

   Block names mirror those used in about.php and the blueprint fields
   (mision_*, equipo_*, directiva_*, voluntarias_*). Like the services
   block, this temporarily keeps Spanish names to stay aligned with the
   blueprint + content YAML — a future refactor would rename to e.g.
   .mission-goal, .team, .board, .volunteers.
   ========================================================================== */

/* --- Vertical rhythm + shared token ----------------------------------- */
.about-page__section {
  padding-block: var(--space-12);

  /* Book-style first-line indent applied to long paragraphs. Approximates
     one column of the 12-col grid so the indent "lands" on the same column
     the rest of the text wraps to. Identical token to .services-page. */
  --first-line-indent: clamp(2rem, 6vw, 5rem);
}

.about-page__section+.about-page__section {
  padding-block-start: 0;
}


/* --- Shared: section label decorated with a trailing line ------------- */
/*
   The PHP applies the small .label atom + the section-specific class to the
   same <span>. These rules override .label's display:block so the label
   becomes a flex row of [text + horizontal line]. The line takes whatever
   space is left in the label's grid cell.
*/
.directiva__label,
.voluntarias__label {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.directiva__label::after,
.voluntarias__label::after {
  content: "";
  flex: 1 1 auto;
  min-width: var(--space-6);
  height: 1px;
  background-color: var(--color-crimson);
}


/* --- Shared: section images ------------------------------------------- */
.directiva-card__image,
.voluntarias__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.equipo__image {
  display: block;
  width: 100%;
  height: auto;
}


/* ==========================================================================
   15.1 Section: Intro
   --------------------------------------------------------------------------
   Desktop 12-col grid:
     row 1 ─ text   col 2 / span 9   left-offset paragraph + first-line indent
   The first line of the paragraph indents to col 3, matching the rhythm of
   titles on the services page.
   ========================================================================== */

.about-intro {
  container-type: inline-size;
  container-name: about-intro;
}

.about-intro__container {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
}

.about-intro__text {
  grid-column: 2 / span 9;
  font-size: var(--fs-md);
  line-height: var(--lh-lead);
  color: var(--color-crimson);
  text-indent: var(--first-line-indent);
}

@container about-intro (max-width: 64rem) and (min-width: 30rem) {
  .about-intro__container {
    grid-template-columns: repeat(var(--grid-cols-tablet), minmax(0, 1fr));
  }

  .about-intro__text {
    grid-column: 1 / -1;
  }
}

@container about-intro (max-width: 29.99rem) {
  .about-intro__container {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-intro__text {
    grid-column: 1 / -1;
  }
}


/* ==========================================================================
   15.2 Section: Misión y Objetivo
   --------------------------------------------------------------------------
   Desktop 12-col grid:
     mision    col 2 / span 5
     objetivo  col 8 / span 5
   Empty rhythm: col 1, col 7 (between the two), col 13 (right edge).
   ========================================================================== */

.mision-objetivo {
  container-type: inline-size;
  container-name: mision-objetivo;
}

.mision-objetivo__container {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--space-8);
  align-items: start;
}

.mision-objetivo__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mision-objetivo__card--mision {
  grid-column: 2 / span 5;
}

.mision-objetivo__card--objetivo {
  grid-column: 8 / span 5;
}

.mision-objetivo__text {
  font-size: var(--fs-md);
  line-height: var(--lh-lead);
  color: var(--color-crimson);
  text-indent: var(--first-line-indent);
}

@container mision-objetivo (max-width: 64rem) and (min-width: 30rem) {
  .mision-objetivo__container {
    grid-template-columns: repeat(var(--grid-cols-tablet), minmax(0, 1fr));
  }

  .mision-objetivo__card--mision,
  .mision-objetivo__card--objetivo {
    grid-column: 1 / -1;
  }
}

@container mision-objetivo (max-width: 29.99rem) {
  .mision-objetivo__container {
    grid-template-columns: minmax(0, 1fr);
  }

  .mision-objetivo__card--mision,
  .mision-objetivo__card--objetivo {
    grid-column: 1 / -1;
  }
}


/* ==========================================================================
   15.3 Section: Equipo (foto de grupo + historia)
   --------------------------------------------------------------------------
   Desktop 12-col grid:
     figure  col 1 / span 7   wide image, hugs the left edge
     text    col 9 / span 4   history paragraph on the right
   Empty rhythm: col 8 between them.
   ========================================================================== */

.equipo {
  container-type: inline-size;
  container-name: equipo;
}

.equipo__container {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--space-8);
  align-items: start;
}

.equipo__figure {
  grid-column: 1 / span 7;
  margin: 0;
}

.equipo__text {
  grid-column: 9 / span 4;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-crimson);
}

.equipo__text>p {
  text-indent: var(--first-line-indent);
}

.equipo__text>p+p {
  margin-top: var(--space-4);
}

@container equipo (max-width: 64rem) and (min-width: 30rem) {
  .equipo__container {
    grid-template-columns: repeat(var(--grid-cols-tablet), minmax(0, 1fr));
  }

  .equipo__figure,
  .equipo__text {
    grid-column: 1 / -1;
  }
}

@container equipo (max-width: 29.99rem) {
  .equipo__container {
    grid-template-columns: minmax(0, 1fr);
  }

  .equipo__figure,
  .equipo__text {
    grid-column: 1 / -1;
  }
}


/* ==========================================================================
   15.4 Section: Directiva
   --------------------------------------------------------------------------
   Desktop 12-col grid:
     row 1 ─ header  col 1 / span 3   small label + trailing horizontal line
             grid    col 4 / span 9   4-card row of member cards
     row 2 ─ grid    col 4 / span 9   second 4-card row (members 5–8)
   The card grid is its own subgrid of 4 equal sub-columns inside the 9 cols
   reserved on the right. Empty rhythm: cols 1–3 to the left of row 2.
   ========================================================================== */

.directiva {
  container-type: inline-size;
  container-name: directiva;
}

.directiva__container {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--space-9);
  align-items: start;
}

.directiva__header {
  /* A todo el ancho: el label encabeza la sección en lugar de ocupar una
     columna izquierda que en resoluciones grandes quedaba casi vacía. */
  grid-column: 1 / -1;
  padding-top: var(--space-3);
}

.directiva__grid {
  /* El grid usa todo el ancho disponible y baja a 3 columnas para que las
     fotos sean más grandes en pantallas grandes (antes 4 cols comprimidas
     en 9/12 → fotos pequeñas con mucho espacio desperdiciado). */
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8) var(--grid-gutter);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* --- Member card ------------------------------------------------------- */
.directiva-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.directiva-card__figure {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--color-border);
}

.directiva-card__figure--placeholder {
  background-color: var(--color-border);
}

.directiva-card__body {
  display: flex;
  flex-direction: column;
  color: var(--color-crimson);
}

.directiva-card__role {
  font-size: var(--fs-sm);
  line-height: var(--lh-compact);
  margin-bottom: var(--space-1);
}

.directiva-card__name {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-compact);
  margin: 0 0 var(--space-1) 0;
}

.directiva-card__condition {
  font-size: var(--fs-sm);
  line-height: var(--lh-compact);
}

.directiva-card__quote {
  font-size: var(--fs-sm);
  font-style: italic;
  line-height: var(--lh-body);
  margin: var(--space-3) 0 0 0;
}

/* Tablet: 4-col, header on top, cards 2 × 4 */
@container directiva (max-width: 64rem) and (min-width: 30rem) {
  .directiva__container {
    grid-template-columns: repeat(var(--grid-cols-tablet), minmax(0, 1fr));
  }

  .directiva__header,
  .directiva__grid {
    grid-column: 1 / -1;
  }

  .directiva__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: stack everything, single column */
@container directiva (max-width: 29.99rem) {
  .directiva__container {
    grid-template-columns: minmax(0, 1fr);
  }

  .directiva__header,
  .directiva__grid {
    grid-column: 1 / -1;
  }

  .directiva__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ==========================================================================
   15.5 Section: Voluntarias
   --------------------------------------------------------------------------
   Desktop 12-col grid:
     row 1 ─ header  col 1 / span 3   small label + trailing horizontal line
             figure  col 4 / span 5   group photo
             list    col 10 / span 3  names list, right side
     row 2 ─ quote   col 4 / span 8   closing quote, aligned with the photo
   Empty rhythm: col 9 between figure and list, cols 1–3 + 12 around the
   quote.
   ========================================================================== */

.voluntarias {
  container-type: inline-size;
  container-name: voluntarias;
}

.voluntarias__container {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--space-7);
  align-items: start;
}

.voluntarias__header {
  grid-column: 1 / span 3;
  grid-row: 1;
  padding-top: var(--space-3);
}

.voluntarias__figure {
  grid-column: 4 / span 5;
  grid-row: 1;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-border);
}

.voluntarias__list {
  grid-column: 10 / span 3;
  grid-row: 1;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.voluntarias__name {
  font-size: var(--fs-base);
  line-height: var(--lh-compact);
  color: var(--color-crimson);
}

.voluntarias__quote {
  grid-column: 4 / span 8;
  grid-row: 2;
  margin: 0;
  font-size: var(--fs-md);
  font-style: italic;
  line-height: var(--lh-lead);
  color: var(--color-crimson);
}

/* Tablet */
@container voluntarias (max-width: 64rem) and (min-width: 30rem) {
  .voluntarias__container {
    grid-template-columns: repeat(var(--grid-cols-tablet), minmax(0, 1fr));
  }

  .voluntarias__header,
  .voluntarias__figure,
  .voluntarias__list,
  .voluntarias__quote {
    grid-column: 1 / -1;
  }

  .voluntarias__header {
    grid-row: 1;
  }

  .voluntarias__figure {
    grid-row: 2;
    aspect-ratio: 16 / 9;
  }

  .voluntarias__list {
    grid-row: 3;
  }

  .voluntarias__quote {
    grid-row: 4;
  }
}

/* Mobile */
@container voluntarias (max-width: 29.99rem) {
  .voluntarias__container {
    grid-template-columns: minmax(0, 1fr);
  }

  .voluntarias__header,
  .voluntarias__figure,
  .voluntarias__list,
  .voluntarias__quote {
    grid-column: 1 / -1;
  }

  .voluntarias__header {
    grid-row: 1;
  }

  .voluntarias__figure {
    grid-row: 2;
    aspect-ratio: 4 / 3;
  }

  .voluntarias__list {
    grid-row: 3;
  }

  .voluntarias__quote {
    grid-row: 4;
  }
}


/* ==========================================================================
   16. PAGE: COLLABORATE
   --------------------------------------------------------------------------
   .collaborate-page                 page wrapper
   .collaborate-page__section        vertical rhythm between sections

     .collaborate-quote   centred quote below the hero (curly quotes)
     .collaborate-info    intro paragraph + bank details + alt contact channels
     .collaborate-form    "Hazte socio" Uniform form (Turnstile + honeypot)

   Estructura mirror del Figma: cita centrada → bloque informativo en columna
   estrecha alineada a la izquierda dentro del grid → formulario.
   El formulario aparece sobre fondo crimson cuando se acompaña del CTA en
   un futuro, pero por defecto vive sobre `--color-bg` igual que el resto.
   ========================================================================== */

.collaborate-page__section {
  padding-block: var(--space-12);
}

.collaborate-page__section+.collaborate-page__section {
  padding-block-start: 0;
}

/* Two-column content/form layout (desktop 6/6) -------------------------- */
.collaborate-main__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
  align-items: start;
}

.collaborate-main__text {
  color: var(--color-crimson);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}

.collaborate-main__title {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: var(--color-crimson);
}

.collaborate-main__text p+p {
  margin-top: var(--space-3);
}

.collaborate-main__text strong,
.collaborate-main__text b {
  font-weight: var(--fw-bold);
}

.collaborate-main__text em,
.collaborate-main__text i {
  font-style: italic;
}

.collaborate-main__text ul,
.collaborate-main__text ol {
  margin: var(--space-3) 0 0;
  padding-left: 1.25rem;
}

.collaborate-main__text ul {
  list-style: disc;
}

.collaborate-main__text ol {
  list-style: decimal;
}

.collaborate-main__text li+li {
  margin-top: var(--space-1);
}

.collaborate-form__container--split {
  max-width: none;
  margin-inline: 0;
}

@media (min-width: 992px) {
  .collaborate-main__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* --------------------------------------------------------------------------
   16.1 Section: Quote
   --------------------------------------------------------------------------
   Centered blockquote, larger type, generous breathing room. The quote text
   already includes the curly marks (“ ”) when entered in the panel.
   ------------------------------------------------------------------------ */

.collaborate-quote {
  container-type: inline-size;
  container-name: collaborate-quote;
  text-align: center;
}

.collaborate-quote__container {
  display: flex;
  justify-content: center;
}

.collaborate-quote__text {
  max-width: 38ch;
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-lead);
  color: var(--color-crimson);
}

.collaborate-quote__text p {
  font-size: inherit;
  line-height: inherit;
}

@container collaborate-quote (max-width: 30rem) {
  .collaborate-quote__text {
    font-size: var(--fs-md);
  }
}


/* --------------------------------------------------------------------------
   16.2 Section: Info
   --------------------------------------------------------------------------
   Narrow left-aligned column (like the Figma): description → bank details
   → alternative contact channels (email + phone) → optional PDF link.
   ------------------------------------------------------------------------ */

.collaborate-info {
  container-type: inline-size;
  container-name: collaborate-info;
}

.collaborate-info__container {
  max-width: 38rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  color: var(--color-crimson);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.collaborate-info__intro {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.collaborate-info__intro p+p {
  margin-top: var(--space-3);
}

/* Bank details — Cuota / IBAN ------------------------------------------- */
.collaborate-info__bank {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.collaborate-info__bank-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.collaborate-info__bank-label {
  font-weight: var(--fw-bold);
}

.collaborate-info__bank-value {
  margin: 0;
}

/* Alternative channels ------------------------------------------------- */
.collaborate-info__alt-intro {
  font-size: var(--fs-sm);
  margin-top: var(--space-3);
}

.collaborate-info__channels {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.collaborate-info__channel {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.collaborate-info__channel i {
  flex: 0 0 auto;
  color: var(--color-crimson);
  line-height: 1;
  margin-top: 0.15em;
}

.collaborate-info__channel-link {
  color: var(--color-crimson);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--transition-fast);
}

.collaborate-info__channel-link:hover {
  color: var(--color-crimson-dark);
  text-decoration: underline;
}

.collaborate-info__channel-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-0);
}

.collaborate-info__channel-heading {
  font-weight: var(--fw-bold);
}

.collaborate-info__channel-value a {
  color: var(--color-crimson);
  transition: color var(--transition-fast);
}

.collaborate-info__channel-value a:hover {
  color: var(--color-crimson-dark);
}

.collaborate-info__channel-schedule {
  font-size: var(--fs-sm);
  color: var(--color-crimson);
}

/* Optional download link ----------------------------------------------- */
.collaborate-info__download {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
}

.collaborate-info__download-link {
  font-weight: var(--fw-bold);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  color: var(--color-crimson);
  transition: color var(--transition-fast);
}

.collaborate-info__download-link:hover {
  color: var(--color-crimson-dark);
}

/* Dona ahora ----------------------------------------------------------- */
.collaborate-donate {
  container-type: inline-size;
  container-name: collaborate-donate;
}

.collaborate-donate__container {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  align-items: start;
}

.collaborate-donate__content {
  grid-column: 1 / span 8;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  color: var(--color-crimson);
}

@container collaborate-donate (max-width: 64rem) and (min-width: 30rem) {
  .collaborate-donate__container {
    grid-template-columns: repeat(var(--grid-cols-tablet), minmax(0, 1fr));
  }

  .collaborate-donate__content {
    grid-column: 1 / -1;
  }
}

@container collaborate-donate (max-width: 29.99rem) {
  .collaborate-donate__container {
    grid-template-columns: minmax(0, 1fr);
  }

  .collaborate-donate__content {
    grid-column: 1 / -1;
  }
}

.collaborate-donate__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  margin: 0;
}

.collaborate-donate__intro {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}

.collaborate-donate__intro :where(p, ul, ol)+ :where(p, ul, ol) {
  margin-top: var(--space-3);
}

.collaborate-donate__intro strong,
.collaborate-donate__intro b {
  font-weight: var(--fw-bold);
}

.collaborate-donate__intro em,
.collaborate-donate__intro i {
  font-style: italic;
}

.collaborate-donate__intro ul,
.collaborate-donate__intro ol {
  padding-left: 1.25rem;
}

.collaborate-donate__intro ul {
  list-style: disc;
}

.collaborate-donate__intro ol {
  list-style: decimal;
}

.collaborate-donate__intro li+li {
  margin-top: var(--space-1);
}

.collaborate-donate__methods {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.collaborate-donate__intro + .collaborate-donate__methods {
  margin-block-start: var(--space-3);
}

/* Copy value ----------------------------------------------------------- */
.copy-value {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-crimson);
}

.copy-value__label {
  font-weight: var(--fw-bold);
}

.copy-value__sep {
  opacity: 0.6;
}

.copy-value__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1);
  border: 1px solid currentColor;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
  line-height: 1;
  transition: color var(--transition-fast), background-color var(--transition-fast), opacity var(--transition-fast);
}

.copy-value__btn:hover,
.copy-value__btn:focus-visible {
  color: var(--color-crimson-dark);
}

.copy-value__btn.is-copied {
  opacity: 0.75;
}

.copy-value--footer {
  color: var(--color-white);
  font-size: var(--fs-sm);
}

.copy-value--footer .copy-value__btn {
  border-color: rgba(255, 255, 255, 0.45);
}

.copy-value--footer .copy-value__btn:hover,
.copy-value--footer .copy-value__btn:focus-visible {
  color: var(--color-text);
}


/* --------------------------------------------------------------------------
   16.3 Section: Socio form
   --------------------------------------------------------------------------
   Same narrow column as .collaborate-info — keeps everything aligned on the
   left side of the layout, mirroring the Figma rhythm. The form has a soft
   surface card to separate it visually from the surrounding text.
   ------------------------------------------------------------------------ */

.collaborate-form {
  container-type: inline-size;
  container-name: collaborate-form;
}

.collaborate-form__container {
  max-width: 38rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.collaborate-form__header,
.contact-form__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--color-crimson);
}

.collaborate-form__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: var(--color-crimson);
  margin: 0;
}

.collaborate-form__description,
.contact-form__description {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--color-crimson);
  margin: 0;
}

.collaborate-form__price {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-crimson);
}

.collaborate-form__wrap {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-7);
}

.collaborate-form__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Visually hidden honeypot field --------------------------------------- */
.collaborate-form__honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Field -- shared layout for label + input ----------------------------- */
.collaborate-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.collaborate-form__label,
.contact-form__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-crimson);
  letter-spacing: 0.02em;
  text-transform: none;
}

.collaborate-form__input,
.collaborate-form__textarea,
.contact-form__input,
.contact-form__textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  line-height: var(--lh-body);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.collaborate-form__textarea,
.contact-form__textarea {
  resize: vertical;
  min-height: 6rem;
}

.collaborate-form__input::placeholder,
.collaborate-form__textarea::placeholder,
.contact-form__input::placeholder,
.contact-form__textarea::placeholder {
  color: var(--color-text-muted);
}

.collaborate-form__input:focus,
.collaborate-form__textarea:focus,
.contact-form__input:focus,
.contact-form__textarea:focus {
  outline: none;
  border-color: var(--color-crimson);
  box-shadow: 0 0 0 3px rgba(var(--color-crimson-rgb), 0.15);
}

.collaborate-form__input[aria-invalid="true"],
.collaborate-form__textarea[aria-invalid="true"],
.contact-form__input[aria-invalid="true"],
.contact-form__textarea[aria-invalid="true"] {
  border-color: var(--color-crimson);
}

/* Consent checkbox ----------------------------------------------------- */
.collaborate-form__checkbox,
.contact-form__checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--color-crimson);
  padding-block-start: var(--space-2);
}

.collaborate-form__checkbox-input,
.contact-form__checkbox-input {
  margin-top: 0.25em;
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-crimson);
}

.collaborate-form__checkbox-label,
.contact-form__checkbox-label {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--color-crimson);
}

.collaborate-form__privacy-link,
.contact-form__privacy-link {
  color: var(--color-crimson);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color var(--transition-fast);
}

.collaborate-form__privacy-link:hover,
.contact-form__privacy-link:hover,
.contact-form__privacy-link:focus-visible {
  color: var(--color-crimson-dark);
}

.collaborate-form__checkbox .collaborate-form__field-error,
.contact-form__checkbox .contact-form__field-error {
  grid-column: 1 / -1;
}

/* Field-level error feedback ------------------------------------------- */
.collaborate-form__field-error,
.contact-form__field-error {
  font-size: var(--fs-sm);
  color: var(--color-crimson);
  margin: 0;
}

/* Errors / success banners --------------------------------             */
.collaborate-form__errors,
.contact-form__errors {
  font-size: var(--fs-sm);
  color: var(--color-crimson);
  background-color: rgba(var(--color-crimson-rgb), 0.06);
  border: 1px solid rgba(var(--color-crimson-rgb), 0.25);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}

.collaborate-form__errors ul,
.contact-form__errors ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: disc inside;
}

.collaborate-form__success,
.contact-form__success {
  font-size: var(--fs-base);
  color: var(--color-crimson);
  background-color: rgba(var(--color-crimson-rgb), 0.05);
  border: 1px solid rgba(var(--color-crimson-rgb), 0.2);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
}

.collaborate-form__success p,
.contact-form__success p {
  margin: 0;
}

.collaborate-form__success p+p,
.contact-form__success p+p {
  margin-block-start: var(--space-3);
}

.collaborate-form__warning,
.contact-form__warning {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--color-crimson-dark);
}

/* Cloudflare Turnstile widget ------------------------------------------ */
.collaborate-form .turnstile-container,
.collaborate-form .cf-turnstile {
  margin: 0;
  min-height: 65px;
}

/* Submit button -------------------------------------------------------- */
.collaborate-form__submit {
  align-self: flex-start;
}

@container collaborate-form (max-width: 30rem) {
  .collaborate-form__wrap {
    padding: var(--space-5);
  }

  .collaborate-form__submit {
    align-self: stretch;
  }
}

/* ==========================================================================
   POST-MEETING (Track B) — Online events meta
   ========================================================================== */

.event-meta__online-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-crimson);
  background-color: rgba(var(--color-crimson-rgb), 0.06);
  border: 1px solid rgba(var(--color-crimson-rgb), 0.25);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.event-meta__online-link:hover,
.event-meta__online-link:focus-visible {
  background-color: var(--color-crimson);
  color: var(--color-white);
}

/* ==========================================================================
   POST-MEETING (Track B) — News section (.news-*)
   index list + single news_post page
   ========================================================================== */

.news-page__intro {
  padding-block: var(--space-9) var(--space-7);
}

.news-intro {
  max-width: 48rem;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--color-text);
}

.news-page__list {
  padding-block: var(--space-8) var(--space-11);
}

/* Toolbar — sort by date */
.news-index__toolbar {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}

.news-index__sort {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.news-index__sort-btn {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--color-crimson);
  padding-block: var(--space-1);
  border-bottom: 1px solid transparent;
  text-decoration: none;
  transition:
    color var(--transition-fast),
    border-color var(--transition-fast),
    opacity var(--transition-fast);
  opacity: 0.6;
}

.news-index__sort-btn:hover,
.news-index__sort-btn:focus-visible {
  opacity: 1;
  color: var(--color-crimson-dark);
  outline: none;
}

.news-index__sort-btn.is-active {
  opacity: 1;
  color: var(--color-crimson);
  border-bottom-color: var(--color-crimson);
}

/* Highlights — 4 equal rows (page 1, most recent first) */
.news-index__highlights {
  list-style: none;
  margin: 0 0 var(--space-10);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.news-index__highlights > li {
  min-width: 0;
}

.news-index__list-label {
  margin: 0 0 var(--space-6);
  color: var(--color-text-muted);
}

/* Compact list rows */
.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--color-border);
}

.news-list > li + li {
  border-top: 1px solid var(--color-border);
}

.news-empty {
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  text-align: center;
  padding-block: var(--space-9);
}

/* Grid of cards — legacy uniform grid (kept for reference); index uses variants below */
.news-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-7);
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

.news-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}

.news-card:hover,
.news-card:focus-within {
  border-color: rgba(var(--color-crimson-rgb), 0.35);
}

.news-card--highlight:hover,
.news-card--highlight:focus-within {
  border-color: rgba(var(--color-crimson-rgb), 0.35);
}

.news-card--list {
  background: none;
  border: none;
  border-radius: 0;
}

.news-card--list:hover,
.news-card--list:focus-within {
  transform: none;
  box-shadow: none;
}

.news-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.news-card--highlight .news-card__link {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  min-height: 100%;
}

@media (min-width: 48rem) {
  .news-card--highlight .news-card__link {
    grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
    column-gap: var(--grid-gutter);
    row-gap: 0;
    align-items: stretch;
  }

  .news-card--highlight .news-card__body {
    grid-column: 1 / span 6;
    padding: var(--space-6) 0 var(--space-6) var(--space-6);
  }

  .news-card--highlight .news-card__figure {
    grid-column: 8 / span 5;
    align-self: stretch;
    min-height: 100%;
    aspect-ratio: auto;
  }
}

.news-card--highlight .news-card__body {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-start;
}

.news-card--highlight .news-card__figure {
  margin: 0;
  aspect-ratio: 16 / 9;
  min-height: 12rem;
  overflow: hidden;
}

.news-card--highlight .news-card__image,
.news-card--highlight .news-card__figure-placeholder {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
}

.news-card--highlight .news-card__summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card--list .news-card__link {
  flex-direction: row;
  align-items: center;
  gap: var(--space-5);
  padding-block: var(--space-5);
  transition: color var(--transition-fast);
}

.news-card--list .news-card__link:hover .news-card__title,
.news-card--list .news-card__link:focus-visible .news-card__title {
  color: var(--color-crimson);
}

.news-card__figure {
  margin: 0;
  aspect-ratio: 16 / 9;
  background-color: var(--color-border);
  overflow: hidden;
}

.news-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-card__figure-placeholder {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 10rem;
  background: linear-gradient(135deg, rgba(var(--color-crimson-rgb), 0.08), rgba(var(--color-crimson-rgb), 0.02));
}

.news-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1 1 auto;
}

.news-card--list .news-card__body {
  padding: 0;
  flex: 1;
  min-width: 0;
  gap: var(--space-1);
}

.news-card__label {
  margin-bottom: var(--space-1);
  color: var(--color-crimson);
}

.news-card__date {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.news-card--list .news-card__date {
  flex-shrink: 0;
  width: 5.5rem;
  font-size: var(--fs-sm);
}

.news-card__title {
  font-size: var(--fs-md);
  line-height: var(--lh-heading);
  margin: 0;
  color: var(--color-text);
  transition: color var(--transition-fast);
}

.news-card--highlight .news-card__link:hover .news-card__title,
.news-card--highlight .news-card__link:focus-visible .news-card__title {
  color: var(--color-crimson);
}

.news-card--list .news-card__title {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-card__summary {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

.news-card__arrow {
  flex-shrink: 0;
  font-size: 1.125rem;
  color: var(--color-crimson);
  opacity: 0;
  transform: translateX(-0.25rem);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

.news-card--list .news-card__link:hover .news-card__arrow,
.news-card--list .news-card__link:focus-visible .news-card__arrow {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 47.99rem) {
  .news-card--list .news-card__link {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .news-card--list .news-card__date {
    width: 100%;
  }

  .news-card__arrow {
    opacity: 1;
    transform: none;
  }
}

/* Pagination ----------------------------------------------------------- */
.news-pagination {
  margin-top: var(--space-9);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.news-pagination__link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-crimson);
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(var(--color-crimson-rgb), 0.3);
  border-radius: var(--radius-md);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.news-pagination__link:hover,
.news-pagination__link:focus-visible {
  background-color: var(--color-crimson);
  color: var(--color-white);
}

.news-pagination__status {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* Instagram feed (news index) -------------------------------------------- */
.news-instagram {
  padding-block: var(--space-10) var(--space-11);
  border-top: 1px solid var(--color-border);
  background-color: var(--color-bg);
}

.news-instagram__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.news-instagram__title {
  margin: 0;
}

.news-instagram__profile {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-crimson);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.news-instagram__profile:hover,
.news-instagram__profile:focus-visible {
  color: var(--color-crimson-dark);
  outline: none;
}

.news-instagram__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.news-instagram__item {
  min-width: 0;
}

.news-instagram__item .instagram-media {
  margin: 0 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100%;
}

.news-instagram__widget {
  min-width: 0;
  overflow-x: auto;
}

/* Single news_post page ------------------------------------------------ */
.news-post-page {
  display: block;
  padding-block: var(--space-8) var(--space-11);
}

/* 12-col grid: header full width, main + aside row 2 (8 + gap + 3) */
.news-post-layout {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--space-8);
  align-items: start;
}

.news-post-header {
  grid-column: 1 / -1;
  min-width: 0;
}

.news-post-main {
  grid-column: 1 / -1;
  min-width: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  text-align: left;
}

.news-post-aside {
  grid-column: 1 / -1;
  min-width: 0;
}

@media (min-width: 64rem) {
  .news-post-header {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 0;
  }

  .news-post-main {
    grid-column: 1 / span 8;
    grid-row: 2;
  }

  .news-post-aside {
    grid-column: 10 / span 3;
    grid-row: 2;
    position: sticky;
    top: var(--space-8);
  }
}

.news-post-aside__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.news-post-aside__section {
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.news-post-aside__section:first-child {
  padding-top: 0;
  border-top: none;
}

.news-post-aside__label {
  margin: 0 0 var(--space-5);
  color: var(--color-text-muted);
}

.news-post-aside__related {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.news-post-header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--color-border);
}

.news-post-header__eyebrow {
  font-size: var(--fs-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin: 0 0 var(--space-3);
}

.news-post-header__eyebrow a {
  color: var(--color-crimson);
  text-decoration: none;
}

.news-post-header__eyebrow a:hover,
.news-post-header__eyebrow a:focus-visible {
  text-decoration: underline;
}

.news-post-header__title {
  font-size: var(--fs-xl);
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-4);
}

.news-post-header__summary {
  font-size: var(--fs-md);
  line-height: var(--lh-lead);
  color: var(--color-text-muted);
}

/* Inline cover — natural ratio, left-aligned; caps height for tall assets */
.news-post-cover {
  margin: 0 0 var(--space-8);
  padding: var(--space-4);
  background-color: rgba(var(--color-crimson-rgb), 0.03);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.news-post-cover__image {
  display: block;
  max-width: 100%;
  width: auto;
  max-height: min(28rem, 55vh);
  height: auto;
  object-fit: contain;
}

/* Related news cards (aside) — text only */
.news-related-card {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-4);
}

.news-post-aside__related > li:first-child .news-related-card {
  border-top: none;
  padding-block-start: 0;
}

.news-related-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.news-related-card__link:hover .news-related-card__title,
.news-related-card__link:focus-visible .news-related-card__title {
  color: var(--color-crimson);
}

.news-related-card__date {
  display: block;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.news-related-card__title {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  transition: color var(--transition-normal);
}

/* Tags */
.news-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-post-tag {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-xs);
  letter-spacing: var(--label-spacing);
  text-transform: uppercase;
  color: var(--color-crimson);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
}

/* Prev / next navigation (end of article) */
.news-post-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}

@media (min-width: 40rem) {
  .news-post-nav {
    flex-direction: row;
    gap: var(--space-4);
  }

  .news-post-nav__link {
    flex: 1;
  }
}

.news-post-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  text-decoration: none;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition-normal),
    background-color var(--transition-normal);
}

.news-post-nav__link:hover,
.news-post-nav__link:focus-visible {
  border-color: var(--color-crimson);
  background-color: rgba(var(--color-crimson-rgb), 0.03);
}

.news-post-nav__link--next {
  text-align: right;
}

.news-post-nav__title {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-post-nav__link i {
  flex-shrink: 0;
  font-size: 1.25rem;
  color: var(--color-crimson);
}

.news-post-content__body :is(p, ul, ol, blockquote, h2, h3) {
  margin-block: 0 var(--space-5);
}

.news-post-content__body h2 {
  font-size: var(--fs-lg);
  line-height: var(--lh-heading);
  margin-top: var(--space-7);
}

.news-post-content__body h3 {
  font-size: var(--fs-md);
  line-height: var(--lh-heading);
  margin-top: var(--space-6);
}

.news-post-content__body a {
  color: var(--color-crimson);
}

.news-post-source {
  margin-top: var(--space-8);
  padding: var(--space-5);
  background-color: rgba(var(--color-crimson-rgb), 0.04);
  border-left: 3px solid var(--color-crimson);
  border-radius: var(--radius-sm);
}

.news-post-source__link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-crimson);
  text-decoration: none;
}

.news-post-source__link:hover,
.news-post-source__link:focus-visible {
  text-decoration: underline;
}

.news-post-back {
  display: inline-block;
  margin-top: var(--space-8);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-decoration: none;
}

.news-post-back:hover,
.news-post-back:focus-visible {
  color: var(--color-crimson);
}

/* News post block styles ----------------------------------------------- */
.news-post-gallery {
  margin-block: var(--space-7);
}

.news-post-gallery__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.news-post-gallery__item {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.news-post-gallery__link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  cursor: zoom-in;
}

.news-post-gallery__link:focus-visible {
  outline: 2px solid var(--color-crimson);
  outline-offset: 2px;
}

.news-post-gallery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-post-gallery__caption,
.news-post-image__caption,
.news-post-video__caption {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-align: center;
  margin-block-start: var(--space-2);
  line-height: var(--lh-body);
}

/* Parvus lightbox — brand tokens */
:root {
  --parvus-background-color: transparent;
  --parvus-overlay-color: rgba(26, 26, 26, 0.78);
  --parvus-color: var(--color-white);
  --parvus-btn-background-color: transparent;
  --parvus-btn-color: var(--color-white);
  --parvus-btn-hover-background-color: rgba(255, 255, 255, 0.14);
  --parvus-btn-hover-color: var(--color-white);
  --parvus-caption-color: rgba(255, 255, 255, 0.88);
  --parvus-loader-background-color: rgba(255, 255, 255, 0.2);
  --parvus-loader-color: var(--color-white);
}

body:has(.parvus[open]) {
  overflow: hidden;
}

/* Parvus vendor CSS is partially malformed in production, so we restate the
   critical control styles here to keep the lightbox usable and on-brand. */
.parvus[open] {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  z-index: 9999;
}

.parvus__overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  background: var(--parvus-overlay-color);
  z-index: 0;
}

.parvus__slider {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.parvus__toolbar {
  position: fixed;
  inset-block-start: clamp(1rem, 3vh, 1.5rem);
  inset-inline: clamp(1rem, 4vw, 2rem);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: calc(100vw - clamp(2rem, 8vw, 4rem));
  pointer-events: none;
}

.parvus__toolbar > * {
  pointer-events: auto;
}

.parvus__counter {
  font-size: var(--fs-sm);
  color: var(--parvus-color);
  opacity: 0.9;
}

.parvus__controls {
  display: inline-flex;
  align-items: stretch;
  margin-inline-start: auto;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  overflow: hidden;
}

.parvus__slide {
  padding-block-start: clamp(4rem, 10vh, 5.5rem);
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  padding-block-end: clamp(1.25rem, 4vh, 2.5rem);
}

.parvus__slide img {
  max-width: 100%;
  max-height: calc(100dvh - clamp(9rem, 18vh, 11rem));
  margin-inline: auto;
  border-radius: var(--radius-sm);
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.35);
}

.parvus__btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.625rem;
  border: 0;
  border-radius: 0;
  background: var(--parvus-btn-background-color);
  color: var(--parvus-btn-color);
  cursor: pointer;
  position: relative;
  z-index: 9;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

.parvus__controls .parvus__btn {
  align-self: stretch;
  padding-block: 0.5rem;
}

/* Undo broken vendor rules that pull nav buttons out of the toolbar cluster. */
.parvus__controls .parvus__btn--previous,
.parvus__controls .parvus__btn--next,
.parvus__controls .parvus__btn--close {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  opacity: 1 !important;
}

.parvus--is-opening .parvus__controls .parvus__btn,
.parvus--is-closing .parvus__controls .parvus__btn,
.parvus--is-vertical-closing .parvus__controls .parvus__btn,
.parvus--is-zooming .parvus__controls .parvus__btn {
  opacity: 1 !important;
  transform: none !important;
}

.parvus__btn--previous {
  order: 1;
}

.parvus__btn--next {
  order: 2;
}

.parvus__btn--close {
  order: 3;
}

.parvus__controls .parvus__btn--next,
.parvus__controls .parvus__btn--close {
  border: 0;
  border-inline-start: 1px solid rgba(255, 255, 255, 0.35);
}

.parvus__btn:hover,
.parvus__btn:focus-visible {
  background: var(--parvus-btn-hover-background-color);
  color: var(--parvus-btn-hover-color);
}

.parvus__controls .parvus__btn[aria-disabled="true"] {
  opacity: 0.35 !important;
  cursor: not-allowed;
}

.parvus__btn svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}

.parvus__controls .parvus__btn--previous svg,
.parvus__controls .parvus__btn--next svg {
  display: none;
}

.parvus__controls .parvus__btn--previous::after,
.parvus__controls .parvus__btn--next::after {
  font-size: 1.125rem;
  line-height: 1;
  pointer-events: none;
}

.parvus__controls .parvus__btn--previous::after {
  content: "←";
}

.parvus__controls .parvus__btn--next::after {
  content: "→";
}

.parvus__caption {
  position: relative;
  z-index: 2;
  color: var(--parvus-caption-color);
  padding-inline: clamp(1.25rem, 4vw, 3rem);
  padding-block: 0.75rem var(--space-3);
  text-align: center;
}

.news-post-image {
  margin-block: var(--space-7);
}

.news-post-image__img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.news-post-video-container {
  margin-block: var(--space-7);
}

.news-post-video {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background-color: var(--color-border);
}

.news-post-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.news-post-line {
  border: 0;
  border-block-start: 1px solid var(--color-border);
  margin-block: var(--space-9);
}

.news-post-table-wrap {
  overflow-x: auto;
  margin-block: var(--space-7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.news-post-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  text-align: left;
}

.news-post-table th,
.news-post-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  line-height: var(--lh-body);
}

.news-post-table th {
  background-color: rgba(var(--color-crimson-rgb), 0.03);
  font-weight: var(--fw-bold);
  color: var(--color-crimson);
}

.news-post-table tr:last-child td {
  border-bottom: 0;
}

.news-post-quote {
  margin-block: var(--space-7);
  padding: var(--space-5) var(--space-6);
  background-color: var(--color-surface);
  border-left: 4px solid var(--color-crimson);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.news-post-quote__text {
  margin: 0;
  font-size: var(--fs-md);
  line-height: var(--lh-lead);
  font-style: italic;
  color: var(--color-text);
}

.news-post-quote__text p {
  margin: 0;
}

.news-post-quote__citation {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-crimson);
}


/* ==========================================================================
   17. PAGE: LEGAL  (.page-legal)
   --------------------------------------------------------------------------
   Wrapper compartido por todas las páginas con plantilla `legal` (cookies,
   condiciones-de-uso, politica-privacidad). Textos largos en prosa: limitamos
   el ancho a ~65ch para mantener una línea de lectura cómoda y damos ritmo
   vertical generoso a títulos, párrafos y listas.
   ========================================================================== */

.page-legal {
  padding-block: var(--space-10) var(--space-12);
}

.page-legal__header {
  margin-block-end: var(--space-9);
  max-width: 38ch;
}

.page-legal__title {
  font-size: var(--fs-xl);
  line-height: var(--lh-heading);
  margin: 0;
}

.page-legal__subtitle {
  margin-block-start: var(--space-4);
  font-size: var(--fs-md);
  line-height: var(--lh-lead);
  color: var(--color-text-muted);
}

.page-legal__content {
  max-width: 65ch;
}

.page-legal__content .text {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}

.page-legal__content .text :where(p, ul, ol)+ :where(p, ul, ol) {
  margin-block-start: var(--space-4);
}

.page-legal__content .text :where(p, ul, ol)+ :where(h2, h3, h4) {
  margin-block-start: var(--space-8);
}

.page-legal__content .text :where(h2, h3, h4)+ :where(p, ul, ol) {
  margin-block-start: var(--space-4);
}

.page-legal__content .text h2 {
  font-size: var(--fs-lg);
  line-height: var(--lh-heading);
}

.page-legal__content .text h3 {
  font-size: var(--fs-md);
  line-height: var(--lh-heading);
}

.page-legal__content .text h4 {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--label-spacing);
}

.page-legal__content .text :where(ul, ol) {
  padding-inline-start: var(--space-6);
}

.page-legal__content .text li+li {
  margin-block-start: var(--space-2);
}

.page-legal__content .text hr {
  margin-block: var(--space-8);
  border: 0;
  border-block-start: 1px solid var(--color-border);
}

.page-legal__content .text a {
  color: var(--color-crimson);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.page-legal__content .text a:hover,
.page-legal__content .text a:focus-visible {
  color: var(--color-crimson-dark);
}

.page-legal__content .text strong {
  font-weight: var(--fw-bold);
}


/* ==========================================================================
   18. PAGE: ERROR / 404  (.page-error)
   --------------------------------------------------------------------------
   Página de fallback cuando una URL no coincide con ninguna ruta. Layout
   centrado, voz amable, navegación de rescate hacia secciones principales.
   ========================================================================== */

.page-error {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-block: var(--space-11) var(--space-12);
}

.page-error__header {
  margin-block-end: var(--space-7);
}

.page-error__title {
  font-size: var(--fs-display);
  line-height: var(--lh-heading);
  color: var(--color-crimson);
  margin: 0;
}

.page-error__content {
  max-width: 60ch;
}

.page-error__content .text {
  font-size: var(--fs-base);
  line-height: var(--lh-body);
}

.page-error__content .text :where(p, ul, ol)+ :where(p, ul, ol) {
  margin-block-start: var(--space-4);
}

.page-error__content .text :where(p, ul, ol)+ :where(h2, h3) {
  margin-block-start: var(--space-7);
}

.page-error__content .text :where(h2, h3)+ :where(p, ul, ol) {
  margin-block-start: var(--space-4);
}

.page-error__content .text h2 {
  font-size: var(--fs-lg);
  line-height: var(--lh-heading);
  color: var(--color-text);
}

.page-error__content .text ul {
  list-style: none;
  padding-inline-start: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.page-error__content .text ul a {
  display: inline-block;
  padding-block: var(--space-1);
  font-size: var(--fs-md);
  color: var(--color-crimson);
  text-decoration: none;
}

.page-error__content .text ul a::after {
  content: ' →';
  display: inline-block;
  margin-inline-start: var(--space-2);
  transition: transform 200ms ease;
}

.page-error__content .text ul a:hover,
.page-error__content .text ul a:focus-visible {
  color: var(--color-crimson-dark);
}

.page-error__content .text ul a:hover::after,
.page-error__content .text ul a:focus-visible::after {
  transform: translateX(0.25rem);
}

.page-error__content .text p a {
  color: var(--color-crimson);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.page-error__content .text p a:hover,
.page-error__content .text p a:focus-visible {
  color: var(--color-crimson-dark);
}