/*
  STYLES — "Ningún Animal Atrás"
  Mobile-first. Sin frameworks. Pensado para portar a templates CakePHP
  (cada sección = un element de template) en la Fase 2.
*/

/* ============ RESET BÁSICO ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-m);
  line-height: var(--lh-body);
  color: var(--color-ink-900);
  background: var(--color-paper-0);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
/* El header ahora es position:fixed y flota siempre sobre el contenido —
   sin este scroll-margin, cualquier salto a un ancla (#manifiesto, etc.)
   dejaría el título tapado debajo de la pastilla. */
[id] { scroll-margin-top: var(--header-height-scrolled); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-s);
}
.icon { width: 1.25em; height: 1.25em; stroke: currentColor; flex-shrink: 0; }

/* ============ LAYOUT BASE ============ */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.section { padding-block: var(--space-9); position: relative; }
.section--tight { padding-block: var(--space-8); }
.section--light  { background: var(--surface-light-bg); color: var(--surface-light-fg); }
.section--dark   { background: var(--surface-dark-bg);  color: var(--surface-dark-fg); }
.section--blue   { background: var(--surface-blue-bg);  color: var(--surface-blue-fg); }
.section--tint   { background: var(--surface-tint-bg);  color: var(--surface-tint-fg); }

/* Secciones con fotografía real de campaña de fondo: degradado de marca
   (color de la variante --dark/--blue) por encima de la foto, para que el
   texto siga siendo legible sin perder la imagen. --section-photo se pasa
   inline por sección en index.html. */
.section--photo { background-position: center; background-size: cover; }
.section--photo.section--dark {
  background-image: linear-gradient(rgba(11,12,16,0.82), rgba(11,12,16,0.9)), var(--section-photo);
}
.section--photo.section--blue {
  background-image: linear-gradient(rgba(3,41,140,0.78), rgba(4,31,102,0.88)), var(--section-photo);
}
@media (max-width: 640px) {
  .section--photo.section--dark {
    background-image: linear-gradient(rgba(11,12,16,0.82), rgba(11,12,16,0.9)), var(--section-photo-mobile, var(--section-photo));
  }
  .section--photo.section--blue {
    background-image: linear-gradient(rgba(3,41,140,0.78), rgba(4,31,102,0.88)), var(--section-photo-mobile, var(--section-photo));
  }
}

.section--diag-top {
  clip-path: polygon(0 3.5vw, 100% 0, 100% 100%, 0 100%);
  margin-top: -3.5vw;
  padding-top: calc(var(--space-9) + 3.5vw);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: var(--border-thick);
  background: currentColor;
  display: inline-block;
  transform: skewX(-20deg);
}
.section--blue .eyebrow, .section--dark .eyebrow { color: var(--color-accent-600); }
.section--light .eyebrow, .section--tint .eyebrow { color: var(--color-blue-700); }

.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-display-l);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  max-width: 18ch;
  margin-bottom: var(--space-5);
}
.section-subtitle {
  font-size: var(--fs-body-l);
  max-width: 60ch;
  opacity: 0.85;
}

/* ============ BOTONES ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.95em 1.8em;
  font-weight: 800;
  font-size: var(--fs-body-m);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: var(--border-thick) solid transparent;
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
  clip-path: var(--diag-clip-tag);
  white-space: nowrap;
}
.btn:hover { transform: translate(2px, -2px); }
.btn:active { transform: translate(0, 0); }

.btn--cta {
  background: var(--color-accent-600);
  color: #fff;
  border-color: var(--color-accent-600);
  box-shadow: var(--shadow-raised);
}
.btn--cta:hover { background: var(--color-accent-700); border-color: var(--color-accent-700); }

.btn--outline-light {
  background: transparent;
  color: #fff;
  border-color: #fff;
}
.btn--outline-light:hover { background: rgba(255,255,255,0.12); }

.btn--outline-dark {
  background: transparent;
  color: var(--color-blue-800);
  border-color: var(--color-blue-800);
}
.btn--outline-dark:hover { background: var(--color-blue-50); }

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  clip-path: none;
  padding: 0.4em 0.2em;
}
.btn--block { width: 100%; }
.btn--small { padding: 0.7em 1.3em; font-size: var(--fs-body-s); }

/* ============ HEADER / NAV ============
   Dos estados (ver main.js → toggleHeaderState):
   1) Al tope de página: barra transparente, sin fondo, SIN logo (el logo
      grande vive dentro del hero como pieza de marca dominante).
   2) .is-scrolled: la barra se convierte en una pastilla blanca pegada
      arriba (sin separación), con las esquinas inferiores redondeadas,
      MÁS ALTA que la barra inicial, y el logo azul aparece a la izquierda. */
.site-header {
  position: fixed; /* flota SIEMPRE sobre el hero, no reserva espacio en el flujo */
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 50;
  background: transparent;
  box-shadow: none;
  transition: background-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.site-header.is-scrolled {
  background: #fff;
  border-radius: 0 0 28px 28px;
  box-shadow: var(--shadow-soft);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--header-height-top);
  transition: min-height var(--duration-base) var(--ease-out);
}
.site-header.is-scrolled .site-header__inner {
  min-height: var(--header-height-scrolled);
}

/* --- Logo grande (lockup vertical blanco): anclado al header, no al hero.
   Al estar dentro de .site-header (position:fixed) permanece fijo arriba
   mientras se ve, y su altura excede la del header a propósito para que
   "sobresalga" hacia abajo, sobre el hero. --- */
.site-header__logo-big-link {
  position: absolute;
  /* Empieza justo donde termina la barra de nav (no en la misma franja que
     el selector de idioma / CTA / hamburguesa) y cuelga hacia abajo desde
     ahí — evita que se solape con las acciones del header en móvil, donde
     el logo y esas acciones compiten por el mismo ancho. */
  top: calc(var(--header-height-top) - 2rem);
  left: var(--container-pad);
  z-index: 51;
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

@media (min-width: 1400px) {
  .site-header__logo-big-link {
    top: calc(var(--header-height-top) * -.3);
  }
}

@media (min-width: 900px) {
  .site-header__logo-big-link {
    top: calc(var(--header-height-top) - 3rem);
  }
}

.site-header__logo-big {
  display: block;
  width: var(--hero-logo-w);
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,0.35));
}
.site-header.is-scrolled .site-header__logo-big-link {
  opacity: 0;
  transform: translateY(-16px);
  pointer-events: none;
}

/* --- Logo pequeño (lockup horizontal azul): vive dentro de la barra y solo
   aparece en el estado "pastilla" (scrolled). --- */
.site-header__brand { display: flex; align-items: center; }
.site-header__logo-small {
  height: 0;
  width: auto;
  opacity: 0;
  transform: scale(0.85);
  transform-origin: left center;
  transition: height var(--duration-base) var(--ease-out),
              opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.site-header.is-scrolled .site-header__logo-small {
  height: 76px;
  opacity: 1;
  transform: scale(1);
}

.site-nav {
  display: none;
}
.site-nav ul { display: flex; gap: var(--space-6); }
.site-nav a {
  color: #fff;
  font-weight: 600;
  font-size: var(--fs-body-s);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: relative;
  padding-block: var(--space-1);
  transition: color var(--duration-base) var(--ease-out);
}
.site-header.is-scrolled .site-nav a { color: var(--color-ink-900); }
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--color-accent-600);
  transition: width var(--duration-base) var(--ease-out);
}
.site-nav a:hover::after { width: 100%; }

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

.site-header.is-scrolled .lang-switcher__toggle {
  border-color: var(--color-paper-100);
  color: var(--color-ink-900);
}

.menu-toggle {
  display: inline-flex;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: var(--space-2);
  transition: color var(--duration-base) var(--ease-out);
}
.site-header.is-scrolled .menu-toggle { color: var(--color-ink-900); }
.menu-toggle .icon { width: 1.75em; height: 1.75em; }

@media (min-width: 900px) {
  .site-nav { display: block; }
  .menu-toggle { display: none; }
}

/* mobile menu panel */
.mobile-nav {
  position: fixed;
  inset: 0;
  background: var(--color-ink-900);
  z-index: 100;
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease-out);
  padding: var(--space-6) var(--container-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav__top { display: flex; justify-content: flex-end; }
.mobile-nav__top button { background: none; border: none; color: #fff; cursor: pointer; }
.mobile-nav ul { display: flex; flex-direction: column; gap: var(--space-5); }
.mobile-nav a {
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--fs-display-s);
  text-transform: uppercase;
}

/* ============ MODAL DE CONTACTO ============
   Genérico por id (.modal-overlay + [data-modal-open]/[data-modal-close],
   ver webroot/js/main.js) — hoy solo lo usa #contact-modal, activado desde
   el enlace "Contacto" del footer en ambos layouts. No usa display:none
   para poder animar la entrada/salida (mismo criterio que .mobile-nav
   arriba, que se desplaza en vez de aparecer/desaparecer). */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(11, 12, 16, 0.6);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-out), visibility 0s var(--duration-base);
}
.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration-base) var(--ease-out);
}
.modal-box {
  position: relative;
  background: #fff;
  color: var(--color-ink-900);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-raised);
  padding: var(--space-7) var(--space-6) var(--space-6);
  width: 100%;
  max-width: 32rem;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(16px) scale(0.98);
  transition: transform var(--duration-base) var(--ease-out);
}
.modal-overlay.is-open .modal-box { transform: translateY(0) scale(1); }
.modal-box__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: none;
  border: none;
  color: var(--color-ink-500);
  cursor: pointer;
  padding: var(--space-2);
  line-height: 0;
  transition: color var(--duration-fast) var(--ease-out);
}
.modal-box__close:hover { color: var(--color-ink-900); }
.modal-box__close .icon { width: 1.5em; height: 1.5em; }
.modal-box__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-s);
  text-transform: uppercase;
  color: var(--color-blue-800);
  margin-bottom: var(--space-3);
  padding-right: var(--space-6);
}
.modal-box__subtitle {
  font-size: var(--fs-body-m);
  color: var(--color-ink-700);
  opacity: 0.85;
  margin-bottom: var(--space-6);
}
.modal-box .form-grid { grid-template-columns: 1fr; }
.modal-box .form-footer { margin-top: var(--space-5); }

/* Bloquea el scroll de fondo mientras el modal está abierto (ver toggle en
   main.js). */
body.modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .modal-overlay,
  .modal-box { transition: none; }
}

/* ============ BADGE DE RECAPTCHA ============
   Oculto la mayor parte del tiempo — ver la lógica de aparición/ocultación
   en webroot/js/main.js (bloque "Recaptcha escondido"). Se usa solo
   opacity (NUNCA display:none/visibility:hidden/pointer-events:none): el
   badge debe seguir siendo funcionalmente accesible en todo momento —
   requisito de Google al ocultar su UI por defecto — y necesita seguir
   siendo "hoverable" en su sitio habitual para que el listener de
   'mouseenter' de main.js pueda revelarlo manualmente. */
.grecaptcha-badge {
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out);
}
.grecaptcha-badge.is-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .grecaptcha-badge { transition: none; }
}

/* ============ HERO ============
   Capas, de atrás hacia adelante:
   1. .hero (gradiente de marca — fallback visible mientras cargan imágenes)
   2. .hero__slider → .hero__slide × N (carrusel de imágenes, cross-fade)
   3. .hero__overlay (velo azul/negro para que el texto siga siendo legible
      sobre cualquier imagen)
   4. .hero__speedlines (textura de líneas diagonales de marca)
   5. contenido (.hero__grid, .hero__slider-dots) */
.hero {
  background: linear-gradient(165deg, var(--color-ink-900) 0%, var(--color-blue-900) 62%, var(--color-blue-800) 100%);
  color: #fff;
  clip-path: var(--diag-clip-hero);
  /* El logo grande ahora es del header (fixed), no del hero — pero sigue
     "sobresaliendo" visualmente sobre esta sección. Este padding-top deja
     espacio suficiente para que el texto del hero empiece DEBAJO del logo
     colgante en vez de quedar tapado por él. */
  padding-top: calc(var(--header-height-top) - 0.5rem + var(--hero-logo-w) * 1.05 + var(--space-6));
  padding-bottom: calc(var(--space-9) + 4vw);
  position: relative;
  overflow: hidden;
}

/* --- Slider / carrusel de imágenes de fondo ---
   Implementación vanilla (sin librería, ver main.js) al estilo Swiper:
   autoplay, cross-fade, puntos de control. Los paneles actuales son
   placeholders en duotono de marca — sustituir por fotografías reales
   de campaña vía --slide-image en cada .hero__slide cuando se reciban. */
.hero__slider { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-out);
  background-image:
    var(--slide-image, none),
    linear-gradient(135deg, var(--slide-a, var(--color-blue-900)) 0%, var(--slide-b, var(--color-blue-700)) 100%);
  background-size: cover;
  background-position: center;
}
.hero__slide.is-active { opacity: 1; }

/* En pantallas pequeñas, servir la variante de foto recortada/liviana
   (800px, generada junto a la de escritorio) en lugar de la de 1920px,
   para no penalizar el rendimiento en datos móviles. */
@media (max-width: 640px) {
  .hero__slide {
    background-image:
      var(--slide-image-mobile, var(--slide-image, none)),
      linear-gradient(135deg, var(--slide-a, var(--color-blue-900)) 0%, var(--slide-b, var(--color-blue-700)) 100%);
  }
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(4,10,30,0.72) 0%, rgba(4,16,60,0.6) 45%, rgba(3,41,140,0.55) 100%);
}

.hero__speedlines {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.5;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 60px);
}

.hero__slider-dots {
  /* Se posiciona por encima de donde el módulo de firma se solapa con el
     hero (margin-top negativo) para que la tarjeta blanca nunca los tape. */
  position: absolute;
  z-index: 4;
  right: var(--container-pad);
  bottom: calc(var(--space-9) + 2.5rem);
  display: flex;
  gap: var(--space-3);
}
.hero__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.6);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.hero__dot.is-active { background: var(--color-accent-600); border-color: var(--color-accent-600); transform: scale(1.2); }

.hero__grid {
  position: relative;
  z-index: 5;
  display: grid;
  gap: var(--space-7);
}

.hero__claim {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  margin-bottom: var(--space-5);
}
.hero__claim .accent { color: var(--color-accent-600); }
.hero__subtitle {
  font-size: var(--fs-body-l);
  max-width: 46ch;
  opacity: 0.9;
  margin-bottom: var(--space-6);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-7); }

.counter {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3);
  border-top: var(--border-thick) solid var(--color-accent-600);
  padding-top: var(--space-4);
}
.counter__value {
  font-family: var(--font-display);
  font-size: clamp(4rem, 4.5vw + 1rem, 6rem);
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.counter__label {
  font-size: var(--fs-body-s);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.75;
  max-width: 16ch;
  position: relative;
  top: -3em;
  left: .8em;
}

.hero__scrollhint {
  position: absolute;
  z-index: 5;
  left: var(--container-pad);
  bottom: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-body-s);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.75;
}
.hero__scrollhint .icon { animation: bob 1.8s var(--ease-out) infinite; }
@media (prefers-reduced-motion: reduce) { .hero__scrollhint .icon { animation: none; } }

/* ============ MÓDULO DE FIRMA ============ */
.signup {
  margin-top: calc(var(--space-9) * -1);
  position: relative;
  z-index: 5;
}
.signup__card {
  background: #fff;
  color: var(--color-ink-900);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-raised);
  padding: var(--space-6);
  border: 1px solid var(--color-paper-100);
}
@media (min-width: 700px) {
  .signup {margin-top: calc(var(--space-9) * -1.4);}
  .signup__card { padding: var(--space-8); }
}

.signup__head { margin-bottom: var(--space-6); }
.signup__head .section-title { font-size: var(--fs-display-m); color: var(--color-blue-800); }

.tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); flex-wrap: wrap; }
.tab-btn {
  flex: 1 1 200px;
  padding: var(--space-4);
  border: var(--border-thick) solid var(--color-paper-100);
  background: var(--color-paper-50);
  color: var(--color-ink-700);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--fs-body-s);
  letter-spacing: 0.03em;
  cursor: pointer;
  border-radius: var(--radius-s);
  transition: all var(--duration-fast) var(--ease-out);
}
.tab-btn[aria-selected="true"] {
  background: var(--color-blue-800);
  border-color: var(--color-blue-800);
  color: #fff;
}

.tab-panel { display: none; position: relative; }
.tab-panel.is-active { display: block; animation: fade-up var(--duration-base) var(--ease-out); }

.form-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid .field--full { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field label {
  font-size: var(--fs-body-s);
  font-weight: 700;
  color: var(--color-ink-700);
}
.field input,
.field select {
  padding: 0.85em 1em;
  border: 2px solid var(--color-paper-100);
  border-radius: var(--radius-s);
  background: #fff;
  color: var(--color-ink-900);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.field input:focus,
.field select:focus { border-color: var(--color-blue-700); outline: none; }
.field input:invalid[data-touched="true"],
.field.has-error input,
.field.has-error select { border-color: var(--color-error); }
.field__error {
  font-size: 0.8rem;
  color: var(--color-error);
  display: none;
}
.field.has-error .field__error { display: block; }

/* Nota informativa neutra dentro de un .field (a diferencia de .field__error,
   siempre visible — no depende de estado de validación). */
.field__hint {
  font-size: 0.8rem;
  color: var(--color-ink-700);
  opacity: 0.8;
}

/* Honeypot anti-bot (campo 'verify' inyectado por form-post real) — oculto
   de forma "accesible" (fuera del viewport, no display:none) porque algunos
   bots detectan y saltan campos con display:none/visibility:hidden. */
.form-verify {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Tarjetas de éxito/error del envío real — mismo contrato de clases que
   templates/element/form-post/form-post-success.php / -error.php: forms.js
   compartido las muestra/oculta tras la respuesta AJAX real. */
.form-post-success,
.form-post-error {
  text-align: center;
  padding: var(--space-6) var(--space-4);
}
.form-post-success .icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--color-success);
  margin-bottom: var(--space-3);
}
.form-post-success p,
.form-post-error p {
  font-size: var(--fs-body-l);
  color: var(--color-ink-900);
}
.form-post-error p { color: var(--color-error); }

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-body-s);
  color: var(--color-ink-700);
}
.checkbox-field input {
  margin-top: 3px;
  width: 1.15em;
  height: 1.15em;
  accent-color: var(--color-blue-800);
  flex-shrink: 0;
}
.checkbox-field.has-error { color: var(--color-error); }

.form-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.form-status {
  padding: var(--space-4);
  border-radius: var(--radius-s);
  font-size: var(--fs-body-s);
  font-weight: 600;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status--success { background: #E7F6EE; color: var(--color-success); }
.form-status--error { background: #FDE9EC; color: var(--color-error); }

/* ============ OVERLAY DE ENVÍO: carga → check → reset ============
   Ver la lógica en webroot/js/main.js ("ENVÍO DE FORMULARIOS DE FIRMA").
   Vive dentro de .tab-panel (position:relative, ver arriba) para poder
   cubrir tanto los campos como la tarjeta de éxito/error mientras dura la
   animación — así el usuario ve spinner→check en vez del salto brusco de
   "campos ocultos, texto de agradecimiento aparece". */
.form-submit-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--radius-m);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-out), visibility 0s var(--duration-base);
}
.form-submit-overlay.is-loading,
.form-submit-overlay.is-success {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration-base) var(--ease-out);
}

/* [2026-08-20] Agrandados a petición del usuario ("el spinner y el check...
   deben ser más grandes") — de 2.75rem/3.25rem a 5.5rem/6rem, con grosor de
   borde proporcional para que el spinner no se vea desproporcionadamente
   fino a ese tamaño. */
.form-submit-overlay__spinner {
  width: 5.5rem;
  height: 5.5rem;
  border: 6px solid var(--color-blue-100);
  border-top-color: var(--color-blue-700);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.form-submit-overlay.is-loading .form-submit-overlay__spinner {
  opacity: 1;
  transform: scale(1);
  animation: form-submit-spin 800ms linear infinite;
}

.form-submit-overlay__check {
  position: absolute;
  width: 6rem;
  height: 6rem;
  color: var(--color-success);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.form-submit-overlay.is-success .form-submit-overlay__check { opacity: 1; transform: scale(1); }
.form-submit-overlay.is-success .form-submit-overlay__spinner { opacity: 0; transform: scale(0.7); }

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

@media (prefers-reduced-motion: reduce) {
  .form-submit-overlay,
  .form-submit-overlay__spinner,
  .form-submit-overlay__check { transition: none; }
  .form-submit-overlay.is-loading .form-submit-overlay__spinner { animation-duration: 1400ms; }
}

/* Campos atenuados mientras se envía (el overlay de arriba ya bloquea el
   click; esto es refuerzo visual — los campos además quedan `disabled` de
   verdad, ver JS). No atenúa el overlay ni las tarjetas de éxito/error. */
.tab-panel.is-submitting > *:not(.form-submit-overlay) { opacity: 0.5; }

/* ============ MANIFIESTO (5 puntos) ============ */
.manifesto-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  margin-top: var(--space-7);
}
@media (min-width: 700px) { .manifesto-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .manifesto-grid { grid-template-columns: repeat(3, 1fr); } }

.manifesto-card {
  background: var(--color-paper-0);
  border: 1px solid var(--color-paper-100);
  border-radius: var(--radius-m);
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.manifesto-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
}
.manifesto-card__number {
  font-family: var(--font-display);
  font-size: 3.2rem;
  color: var(--color-blue-100);
  line-height: 1;
  position: absolute;
  top: var(--space-3);
  right: var(--space-4);
}
.manifesto-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-s);
  text-transform: uppercase;
  color: var(--color-blue-800);
  line-height: 1.15;
  margin-block: var(--space-4) var(--space-3);
  max-width: 14ch;
  position: relative;
}
.manifesto-card__description {
  color: var(--color-ink-700);
  font-size: var(--fs-body-m);
  position: relative;
}
.manifesto-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  background: var(--color-accent-600);
  transform: skewX(-8deg);
  transform-origin: top;
}

/* ============ CONTEXTO / TIMELINE / ALARMA ============ */
.context-layout {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-7);
}
@media (min-width: 900px) { .context-layout { grid-template-columns: 1fr 1fr; } }

.timeline { border-left: var(--border-thick) solid rgba(255,255,255,0.25); list-style: none; padding-left: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.timeline__item { position: relative; }
.timeline__item::before {
  content: "";
  position: absolute;
  left: calc(var(--space-6) * -1 - 3px);
  top: 4px;
  width: 12px; height: 12px;
  background: var(--color-accent-600);
  transform: rotate(45deg);
}
.timeline__date {
  font-family: var(--font-display);
  font-size: var(--fs-body-l);
  text-transform: uppercase;
  color: var(--color-accent-600);
  display: block;
  margin-bottom: var(--space-1);
}
.timeline__text { opacity: 0.85; }

.alarm-list { display: flex; flex-direction: column; gap: var(--space-5); }
.alarm-item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-m);
  border-left: 4px solid var(--color-accent-600);
}
.alarm-item .icon { color: var(--color-accent-600); width: 1.6em; height: 1.6em; flex-shrink: 0; }
.alarm-item__title { font-weight: 800; text-transform: uppercase; font-size: var(--fs-body-m); margin-bottom: var(--space-1); }
.alarm-item__description { opacity: 0.85; font-size: var(--fs-body-s); }

/* ============ MOVILIZACIÓN / EVENTO ============ */
.event-card {
  margin-top: var(--space-7);
  background: #fff;
  color: var(--color-ink-900);
  border-radius: var(--radius-l);
  padding: var(--space-7);
  display: grid;
  gap: var(--space-6);
  box-shadow: var(--shadow-raised);
  clip-path: var(--diag-clip-card);
}
@media (min-width: 780px) {
  .event-card { grid-template-columns: auto 1fr auto; align-items: center; }
}
.event-card__date {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  text-transform: uppercase;
  color: var(--color-blue-800);
  line-height: 1;
}
.event-card__details { display: flex; flex-direction: column; gap: var(--space-3); }
.event-card__row { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-body-m); }
.event-card__row .icon { color: var(--color-accent-600); }
.event-card__name { font-weight: 800; text-transform: uppercase; font-size: var(--fs-display-s); font-family: var(--font-display); margin-bottom: var(--space-1); }

/* ============ QUIÉNES SOMOS ============ */
.promoters-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-7);
}
@media (min-width: 700px) { .promoters-grid { grid-template-columns: repeat(5, 1fr); } }

.promoter-tile {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-m);
  padding: var(--space-4);
  text-align: center;
  font-weight: 800;
  font-size: var(--fs-body-s);
  text-transform: uppercase;
}

.adherents {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255,255,255,0.15);
}
/* Lista densa en columnas (estilo "listado de socios" de prensa) — sin
   cajas/logos, solo texto/enlaces ordenados alfabéticamente por
   display.php, repartidos automáticamente de arriba a abajo por columna
   (no en filas) vía `columns`. .adherent-item se aplica igual a <a> que a
   <span> a propósito: con o sin enlace real deben lucir idénticos. */
.adherents-list {
  columns: 2;
  column-gap: var(--space-6);
  margin-top: var(--space-6);
}
@media (min-width: 700px)  { .adherents-list { columns: 3; } }
@media (min-width: 1000px) { .adherents-list { columns: 4; } }

.adherent-item {
  display: block;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: var(--space-2) 0;
  font-size: var(--fs-body-s);
  color: rgba(255,255,255,0.55);
  text-decoration: none;
}
a.adherent-item:hover,
a.adherent-item:focus-visible { color: #fff; text-decoration: underline; }
.adherents__footer { margin-top: var(--space-6); }

/* ============ DESCARGAS ============ */
.downloads-grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-7);
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .downloads-grid { grid-template-columns: 1fr 1fr; } }

.download-card {
  background: var(--color-paper-0);
  border: 1px solid var(--color-paper-100);
  border-radius: var(--radius-m);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.download-card .icon { width: 2em; height: 2em; color: var(--color-blue-800); }
.download-card__title { font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-display-s); color: var(--color-blue-800); }
.download-card__description { color: var(--color-ink-700); font-size: var(--fs-body-s); flex-grow: 1; }

/* ============ COMPARTIR FLOTANTE ============ */
.share-float {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.share-float__btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-ink-900);
  color: #fff;
  box-shadow: var(--shadow-soft);
  transition: transform var(--duration-fast) var(--ease-out);
}
.share-float__btn:hover { transform: scale(1.08); }
.share-float__btn--whatsapp { background: #1E9E5A; }
.share-float__btn--telegram { background: #1E88C7; }
.share-float__btn--x { background: var(--color-ink-900); }

/* ============ FOOTER ============ */
.site-footer {
  background: var(--color-ink-900);
  color: rgba(255,255,255,0.7);
  padding-block: var(--space-8) var(--space-6);
}

/* --- Logos: marca grande a la izquierda + logos adherentes reservados a la derecha --- */
.site-footer__logos {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  padding-bottom: var(--space-7);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
@media (min-width: 900px) {
  .site-footer__logos { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: var(--space-8); }
}
.site-footer__logo-block { max-width: 34ch; }
.site-footer__logo { width: min(260px, 60vw); height: auto; margin-bottom: var(--space-4); }
.site-footer__logos-label {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  font-weight: 700;
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-3);
}
.site-footer__logos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
@media (min-width: 640px) and (max-width: 899px) {
  .site-footer__logos-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 900px) {
  .site-footer__logos-grid { grid-template-columns: repeat(5, 1fr); max-width: 520px; }
}
.footer-logo-slot {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-2);
  border: 1px dashed rgba(255,255,255,0.3);
  border-radius: var(--radius-s);
  font-size: 0.68rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.45);
  /* TODO Fase 2/3: sustituir por <img> del logo real de cada entidad adherida
     cuando el flujo de moderación esté conectado al JSON de Campaigns/Posts. */
}

.site-footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
@media (min-width: 780px) {
  .site-footer__top { flex-direction: row; justify-content: space-between; align-items: flex-start; }
}
.site-footer__brand {
  font-family: var(--font-display);
  color: #fff;
  text-transform: uppercase;
  font-size: var(--fs-display-s);
  margin-bottom: var(--space-2);
}
.site-footer__tagline { max-width: 40ch; font-size: var(--fs-body-s); }
.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-5); font-size: var(--fs-body-s); }
.site-footer__legal a:hover { color: #fff; }
.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-6);
  font-size: var(--fs-body-s);
}
@media (min-width: 780px) {
  .site-footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ============ SELECTOR DE IDIOMA ============ */
.lang-switcher { position: relative; }
.lang-switcher__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 0.5em 0.9em;
  border-radius: var(--radius-s);
  cursor: pointer;
  font-size: var(--fs-body-s);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.lang-switcher__menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  background: #fff;
  color: var(--color-ink-900);
  border-radius: var(--radius-s);
  box-shadow: var(--shadow-soft);
  min-width: 180px;
  padding: var(--space-2);
  display: none;
  z-index: 40;
}
.lang-switcher.is-open .lang-switcher__menu { display: block; }
.lang-switcher__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3);
  background: none;
  border: none;
  text-align: left;
  border-radius: var(--radius-s);
  cursor: pointer;
  font-size: var(--fs-body-s);
}
.lang-switcher__option:hover:not([disabled]) { background: var(--color-paper-50); }
.lang-switcher__option[aria-current="true"] { font-weight: 800; color: var(--color-blue-800); }
.lang-switcher__option[disabled] {
  color: var(--color-ink-300);
  cursor: not-allowed;
}
.lang-switcher__soon {
  font-size: 0.68rem;
  text-transform: uppercase;
  background: var(--color-paper-100);
  color: var(--color-ink-500);
  padding: 0.2em 0.5em;
  border-radius: 3px;
}

/* footer lang switcher variant (dark bg, light text by default) */
.site-footer .lang-switcher__toggle { border-color: rgba(255,255,255,0.25); color: #fff; }
/* En el footer el desplegable no cabe hacia abajo (es el último elemento de
   la página) — se abre hacia arriba en vez de hacia abajo, en ambos layouts
   (default.php/page.php comparten este mismo archivo). */
.site-footer .lang-switcher__menu { top: auto; bottom: calc(100% + var(--space-2)); }

/* ============ UTILIDADES ============ */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }

/* ============ CURSIVA SIMULADA PARA TITULARES (Anton SC) ============
   Anton SC no incluye una variante itálica real en Google Fonts (solo
   Regular 400). En vez de un fallback en una tipografía distinta, se
   simula la inclinación con transform: skewX() sobre cada titular — lo
   que además refuerza visualmente el motivo de líneas diagonales del
   logo. Se agrupan aquí todos los selectores que usan --font-display
   para no repetir la regla en cada bloque. */
.section-title,
.mobile-nav a,
.hero__claim,
.counter__value,
.manifesto-card__number,
.manifesto-card__title,
.timeline__date,
.event-card__date,
.event-card__name,
.download-card__title,
.site-footer__brand,
.page-content__title {
  transform: var(--skew-display);
  transform-origin: left bottom;
}

/* ============ PÁGINAS ESTÁTICAS (layout/page.php) ============
   Contenedor de lectura para páginas de texto plano (política de
   privacidad, términos, etc. — config/pages/{slug}.json, ver
   templates/Tenants/page.php). El header de layout/page.php vive siempre
   en su estado "pastilla" (--header-height-scrolled, ~108px) en vez de
   alternar como en el layout con hero, así que el padding superior tiene
   que despejarlo explícitamente — aquí se añade además un margen extra
   generoso para que el bloque de texto respire (el motivo de "padding
   elegante" pedido en QA, 2026-08-19). */
.page-content {
  max-width: 46rem; /* ≈ 60-70 caracteres por línea en fs-body-l, ideal para lectura */
  margin-inline: auto;
  padding-block-start: calc(var(--header-height-scrolled) + var(--space-8));
  padding-block-end: var(--space-9);
  padding-inline: var(--container-pad);
}
.page-content__title {
  font-family: var(--font-display);
  font-size: var(--fs-display-l);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--color-blue-800);
  max-width: 20ch;
  margin-bottom: var(--space-7);
}
.page-content__body {
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--color-ink-700);
}
.page-content__body > :first-child { margin-top: 0; }
.page-content__body h2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-s);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--color-blue-800);
  margin-block: var(--space-8) var(--space-4);
}
.page-content__body h3 {
  font-weight: 800;
  font-size: var(--fs-body-l);
  color: var(--color-ink-900);
  margin-block: var(--space-6) var(--space-3);
}
.page-content__body p { margin-bottom: var(--space-5); }
.page-content__body ul,
.page-content__body ol {
  margin-bottom: var(--space-5);
  padding-inline-start: var(--space-6);
}
.page-content__body ul { list-style: disc; }
.page-content__body ol { list-style: decimal; }
.page-content__body li { margin-bottom: var(--space-2); }
.page-content__body a {
  color: var(--color-blue-700);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-content__body a:hover { color: var(--color-accent-600); }
.page-content__body strong { font-weight: 800; }
.page-content__body blockquote {
  margin: var(--space-6) 0;
  padding-inline-start: var(--space-5);
  border-left: 3px solid var(--color-blue-100);
  color: var(--color-ink-500);
}