/* ==========================================================================
   AMPA El Pinar — Sistema de diseño
   --------------------------------------------------------------------------
   Sitio estático, sin dependencias externas. Todo se sirve desde este host.
   Regla del workspace: cada edición crea una versión nueva (estilos-YYYYMMDD-vN.css)
   y se anota en CHANGELOG.md. Nunca se edita una versión ya publicada.

   Paleta: verde pino (el nombre del colegio) + terracota andaluza sobre crema.
   ========================================================================== */

/* --- 1. Reinicio ---------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 .5em;
  letter-spacing: -.015em;
  text-wrap: balance;
}

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--rojo-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--rojo-700); }

ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: .4em; }
li::marker { color: var(--rojo-500); }

button { font: inherit; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--rojo-500);
  outline-offset: 3px;
  border-radius: 4px;
}

.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--rojo-800);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 8px 0;
  font-weight: 600;
}
.salto-contenido:focus { left: 0; }

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

/* --- 2. Tokens ------------------------------------------------------------ */

:root {
  /* ======================================================================
     PALETA — liderada por el ROJO del Colegio El Pinar
     ----------------------------------------------------------------------
     El rojo #e74c3c es el color dominante del colegio (89 usos en su hoja de
     estilos). Se usa como color PRINCIPAL del AMPA para que la identidad
     tenga un vínculo evidente con el centro.
     Ajuste técnico: #e74c3c sólo da 3.82:1 con texto blanco (por debajo del
     mínimo AA de 4.5), así que el ROJO DE TRABAJO es #c0392b (5.44:1).
     Misma familia cromática, legible.
     El verde pino se mantiene como SECUNDARIO: habla del nombre del colegio
     (El Pinar) y de la sierra, sin competir con el rojo.
     ====================================================================== */

  /* Rojo del colegio — color principal */
  --rojo-900: #6d1c11;
  --rojo-800: #8f2418;
  --rojo-700: #a82b1d;
  --rojo-600: #c0392b;   /* 5.44:1 con blanco — el rojo "de trabajo" */
  --rojo-500: #cf3f2e;   /* 4.55:1 con blanco — sólo texto grande */
  --rojo-400: #e74c3c;   /* el rojo exacto del colegio: acentos decorativos */
  --rojo-200: #f2b3aa;
  --rojo-100: #f9dcd7;
  --rojo-050: #fdf1ee;

  /* Verde pino — secundario (El Pinar, la sierra) */
  --pino-950: #081c16;
  --pino-900: #0c2a20;
  --pino-800: #11392b;
  --pino-700: #174b39;
  --pino-600: #1f6049;
  --pino-500: #2a7a5c;
  --pino-400: #4d9b7d;
  --pino-200: #b8d8ca;
  --pino-100: #d9eadf;
  --pino-050: #eef6f1;

  /* Fondos oscuros CALIDOS: sustituyen al verde pino en heroe, pie y bloques
     oscuros. Son marrones rojizos de la familia del colegio, no verdes. */
  /* Un solo token oscuro: #2a1210 y #1a0b09 eran indistinguibles a la vista,
     solo ruido en la hoja de estilos. */
  --oscuro-800: #2a1210;
  --oscuro-900: #2a1210;
  --oscuro-950: #1a0b09;

  /* Terracota / sol — acento cálido (coincide con el #cd6727 del colegio) */
  --brasa-700: #96431c;
  --brasa-600: #b3541f;
  --brasa-500: #cd6727;
  --brasa-400: #e08a4a;
  --brasa-200: #f2cdaf;

  /* Ámbar — luz andaluza */
  --ambar-600: #c8871f;
  --ambar-500: #e8a33d;
  --ambar-200: #f6e2b5;

  /* Neutros cálidos */
  --crema: #fbf7f0;
  --crema-2: #f4ece1;
  --crema-3: #e9dfd1;
  --tinta: #1c1a15;
  --tinta-suave: #4d4840;
  --gris: #716a61;   /* 5.00:1 sobre crema — AA para texto normal */

  /* Tipografía */
  --fuente-titulo: "Fraunces", "Georgia", "Times New Roman", serif;
  --fuente-texto: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  /* Ritmo */
  --ancho-max: 72rem;
  --ancho-texto: 42rem;
  --radio: 14px;
  --radio-g: 22px;

  --sombra-s: 0 1px 2px rgba(28, 26, 21, .06), 0 2px 8px rgba(28, 26, 21, .045);
  --sombra-m: 0 4px 12px rgba(28, 26, 21, .07), 0 12px 32px rgba(28, 26, 21, .06);
  --sombra-g: 0 8px 24px rgba(109, 28, 17, .14), 0 28px 64px rgba(109, 28, 17, .11);

  --seccion-y: clamp(3.5rem, 7vw, 6.5rem);
}

/* --- 3. Tipografía fluida ------------------------------------------------- */

.titulo-heroe {
  font-size: clamp(2.1rem, 6.2vw, 4.35rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.028em;
  margin-bottom: .35em;
}

.titulo-seccion {
  font-size: clamp(1.7rem, 3.9vw, 2.85rem);
  letter-spacing: -.022em;
}

.titulo-menor {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
}

.entradilla {
  font-size: clamp(1.075rem, 1.9vw, 1.32rem);
  line-height: 1.58;
  color: var(--tinta-suave);
  max-width: 46rem;
}

.sobrelinea {
  display: inline-block;
  font-family: var(--fuente-texto);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--rojo-600);
  margin-bottom: .9rem;
}

/* --- 4. Estructura -------------------------------------------------------- */

.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}

.seccion { padding-block: var(--seccion-y); position: relative; }

.seccion--crema { background: var(--crema); }
.seccion--crema-2 { background: var(--crema-2); }

.seccion--oscura {
  /* Antes era verde pino. Los companeros de Alex pidieron reducir el verde:
     estos bloques pasan a una tinta caliente de la familia del colegio. */
  background:
    radial-gradient(140% 120% at 12% -20%, #7a1f16 0%, transparent 58%),
    linear-gradient(160deg, #2a1713 0%, #1a0f0c 100%);
  color: var(--crema);
}
.seccion--oscura .entradilla { color: #f0d9d2; }
.seccion--oscura .sobrelinea { color: #e08a4a; }  /* 6.17:1 medido sobre el fondo oscuro real */
.seccion--oscura a { color: var(--ambar-200); }
.seccion--oscura a:hover { color: #fff; }

.texto-centrado { text-align: center; }
.texto-centrado .entradilla { margin-inline: auto; }

.cabecera-seccion { margin-bottom: clamp(2rem, 4vw, 3.25rem); max-width: 52rem; }

/* La seccion del colegio fue escrita con la clase .encabezado-seccion, que no
   existia en el CSS: sin margen inferior, la entradilla quedaba pegada al
   borde superior de las tarjetas. Se define con el MISMO margen que la clase
   buena para que la separacion sea identica al resto de secciones. */
.encabezado-seccion { margin-bottom: clamp(2rem, 4vw, 3.25rem); max-width: 52rem; }

/* --- 5. Cabecera / navegación -------------------------------------------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 247, 240, .88);
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border-bottom: 1px solid rgba(28, 26, 21, .07);
  transition: box-shadow .25s ease, background .25s ease;
}

.cabecera--desplazada {
  box-shadow: 0 4px 22px rgba(42, 18, 16, .09);
  background: rgba(251, 247, 240, .96);
}

.cabecera__interior {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.5rem;
}

.marca {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--rojo-800);
  flex-shrink: 0;
}
.marca:hover { color: var(--rojo-700); }

.marca__logo { width: 44px; height: 44px; flex-shrink: 0; }

.marca__texto { display: flex; flex-direction: column; line-height: 1.1; }

.marca__nombre {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: -.02em;
  color: var(--rojo-800);
}

.marca__lema {
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
}

.navegacion {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-left: auto;
}

.navegacion__enlace {
  padding: .5rem .8rem;
  border-radius: 8px;
  font-size: .93rem;
  font-weight: 500;
  color: var(--tinta-suave);
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.navegacion__enlace:hover { background: var(--rojo-050); color: var(--rojo-700); }

.acciones-cabecera { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }

/* Selector de idioma */
.idioma {
  display: flex;
  align-items: center;
  border: 1px solid var(--crema-3);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}

.idioma__boton {
  border: 0;
  background: transparent;
  padding: .38rem .72rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--gris);
  transition: background .18s ease, color .18s ease;
}
.idioma__boton:hover { color: var(--rojo-700); }
.idioma__boton[aria-pressed="true"] {
  background: var(--rojo-600);
  color: #fff;
}

/* Menú móvil */
.hamburguesa {
  display: none;
  border: 1px solid var(--crema-3);
  background: #fff;
  border-radius: 10px;
  padding: .52rem .6rem;
}
.hamburguesa__barra {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--rojo-800);
  border-radius: 2px;
}
.hamburguesa__barra + .hamburguesa__barra { margin-top: 4px; }

/* --- 6. Botones ----------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .82rem 1.5rem;
  border-radius: 999px;
  font-size: .96rem;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease,
    color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0); }

.boton--primario {
  /* Rojo del colegio. El degradado va de rojo-600 (5.44:1 con blanco) hasta
     rojo-800: nunca por debajo del mínimo AA. */
  background: linear-gradient(135deg, var(--rojo-600) 0%, var(--rojo-800) 100%);
  color: #fff;
  box-shadow: 0 4px 14px rgba(192, 57, 43, .3);
}
.boton--primario:hover {
  color: #fff;
  box-shadow: 0 8px 24px rgba(192, 57, 43, .4);
}

.boton--pino {
  background: var(--rojo-700);
  color: #fff;
  box-shadow: 0 4px 14px rgba(143, 36, 24, .26);
}
.boton--pino:hover { background: var(--rojo-600); color: #fff; }

.boton--contorno {
  /* El borde anterior (#e9dfd1) daba 1.12:1 sobre el fondo crema: el boton no
     parecia un boton. Ahora 4.26:1, claramente reconocible como pulsable. */
  border-color: var(--brasa-600);
  color: var(--rojo-800);
  background: #fff;
}
.boton--contorno:hover {
  border-color: var(--rojo-600);
  color: var(--rojo-700);
  background: var(--rojo-050);
}

.boton--claro {
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(6px);
}
.boton--claro:hover {
  background: rgba(255, 255, 255, .2);
  border-color: #fff;
  color: #fff;
}

.boton--grande { padding: 1rem 2rem; font-size: 1.03rem; }
.boton--bloque { width: 100%; }

.grupo-botones {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
}

/* --- 7. Héroe ------------------------------------------------------------- */

.heroe {
  position: relative;
  min-height: min(88vh, 46rem);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--oscuro-900);
  padding-block: clamp(3.5rem, 9vw, 7rem);
}

.heroe__fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.heroe__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}

.heroe__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(100deg,
      rgba(46, 20, 17, .78) 0%,
      rgba(48, 21, 18, .56) 38%,
      rgba(52, 24, 19, .24) 66%,
      rgba(58, 28, 21, .06) 100%),
    linear-gradient(to top,
      rgba(42, 18, 16, .48) 0%,
      rgba(42, 18, 16, .05) 30%,
      transparent 55%);
}

.heroe__contenido {
  position: relative;
  z-index: 2;
  max-width: 47rem;
  color: #fff;
}

.heroe__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem 1rem .45rem .8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(8px);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
  margin-bottom: 1.4rem;
}
.heroe__punto {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--rojo-400);
  box-shadow: 0 0 0 3px rgba(231, 76, 60, .32);
}

.heroe .titulo-heroe { color: #fff; }

.heroe .titulo-heroe .destaque {
  font-style: italic;
  font-weight: 500;
  color: var(--ambar-200);
}

.heroe__entradilla {
  font-size: clamp(1.05rem, 1.9vw, 1.3rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, .9);
  max-width: 40rem;
  margin-bottom: 2rem;
}

.heroe__datos {
  display: grid;
  /* Cuadrícula de 3 columnas exactas: los tres datos quedan siempre
     alineados y ninguno salta de línea de forma desigual. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, .17);
  max-width: 44rem;
}

.heroe__dato { min-width: 0; }

.heroe__dato-numero {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.3rem, 2.3vw, 1.65rem);
  font-weight: 700;
  color: var(--ambar-200);
  line-height: 1.05;
  margin-bottom: .35rem;
  letter-spacing: -.02em;
}

.heroe__dato-texto {
  font-size: .84rem;
  color: rgba(255, 255, 255, .74);
  line-height: 1.4;
}

/* --- 8. Rejillas ---------------------------------------------------------- */

.rejilla { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.rejilla--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

/* --- 9. Tarjetas de valores ---------------------------------------------- */

.tarjeta {
  background: #fff;
  border: 1px solid var(--crema-3);
  border-radius: var(--radio-g);
  padding: clamp(1.5rem, 2.6vw, 2.1rem);
  box-shadow: var(--sombra-s);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  position: relative;
  height: 100%;
}
.tarjeta:hover {
  transform: translateY(-4px);
  box-shadow: var(--sombra-m);
  border-color: var(--rojo-200);
}

.tarjeta__icono {
  width: 48px; height: 48px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--rojo-050), var(--rojo-100));
  border: 1px solid var(--rojo-200);
  color: var(--rojo-600);
  margin-bottom: 1.15rem;
}
.tarjeta__icono svg { width: 24px; height: 24px; }

.tarjeta__titulo {
  font-size: 1.16rem;
  font-weight: 600;
  margin-bottom: .5rem;
  color: var(--rojo-800);
}

.tarjeta__texto {
  font-size: .97rem;
  color: var(--tinta-suave);
  margin: 0;
}

.tarjeta--numerada .tarjeta__numero {
  font-family: var(--fuente-titulo);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--rojo-200);
  margin-bottom: .5rem;
  display: block;
}

/* Variante sobre fondo verde */
.seccion--oscura .tarjeta {
  background: rgba(255, 255, 255, .055);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: none;
  backdrop-filter: blur(4px);
}
.seccion--oscura .tarjeta:hover {
  background: rgba(255, 255, 255, .085);
  border-color: rgba(255, 255, 255, .24);
}
.seccion--oscura .tarjeta__titulo { color: #fff; }
.seccion--oscura .tarjeta__texto { color: rgba(255, 255, 255, .8); }
.seccion--oscura .tarjeta__icono {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .18);
  color: var(--ambar-200);
}
.seccion--oscura .tarjeta--numerada .tarjeta__numero { color: rgba(246, 226, 181, .5); }

/* --- 10. Bloque de cita / manifiesto ------------------------------------- */

.manifiesto {
  max-width: 54rem;
  margin-inline: auto;
  text-align: center;
}

.manifiesto__cita {
  font-family: var(--fuente-titulo);
  font-size: clamp(1.35rem, 3vw, 2.05rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.015em;
  color: #fff;
  margin-bottom: 1.5rem;
  text-wrap: balance;
}
.manifiesto__cita em {
  font-style: italic;
  color: var(--ambar-200);
}

.manifiesto__pie {
  font-size: .95rem;
  color: rgba(255, 255, 255, .72);
  max-width: 40rem;
  margin-inline: auto;
}

/* --- 11. Franja destacada (familias ya asociadas) ------------------------------ */

.franja-familias {
  background: linear-gradient(135deg, var(--rojo-600) 0%, var(--rojo-800) 100%);
  color: #fff;
  border-radius: var(--radio-g);
  padding: clamp(1.75rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  flex-wrap: wrap;
  box-shadow: var(--sombra-g);
  position: relative;
  overflow: hidden;
}
.franja-familias::after {
  content: "";
  position: absolute;
  right: -3rem; top: -3rem;
  width: 14rem; height: 14rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  pointer-events: none;
}

.franja-familias__numero {
  font-family: var(--fuente-titulo);
  font-size: clamp(3rem, 8vw, 4.5rem);
  font-weight: 700;
  line-height: .85;
  letter-spacing: -.04em;
  color: #fff;
  flex-shrink: 0;
}

.franja-familias__cuerpo { flex: 1 1 20rem; position: relative; z-index: 1; }

.franja-familias__titulo {
  font-size: clamp(1.15rem, 2.3vw, 1.5rem);
  margin-bottom: .45rem;
  color: #fff;
}

.franja-familias__texto {
  font-size: .99rem;
  color: rgba(255, 255, 255, .9);
  margin: 0;
}

/* --- 12. Camino de adhesión (dos opciones) ------------------------------- */

.dos-caminos { align-items: stretch; }

.camino {
  background: #fff;
  border: 2px solid var(--crema-3);
  border-radius: var(--radio-g);
  padding: clamp(1.6rem, 3vw, 2.35rem);
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra-s);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  position: relative;
}
.camino:hover { transform: translateY(-4px); box-shadow: var(--sombra-m); }

.camino--socio {
  border-color: var(--rojo-400);
  box-shadow: 0 6px 20px rgba(192, 57, 43, .16), var(--sombra-s);
}

.camino__insignia {
  position: absolute;
  top: -.8rem;
  left: clamp(1.6rem, 3vw, 2.35rem);
  background: var(--rojo-600);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .3rem .8rem;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(192, 57, 43, .32);
}

.camino__cabecera {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1rem;
  margin-top: .3rem;
}

.camino__icono {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--rojo-050);
  border: 1px solid var(--rojo-100);
  color: var(--rojo-600);
}
.camino--socio .camino__icono {
  background: var(--rojo-050);
  border-color: var(--rojo-200);
  color: var(--rojo-600);
}
.camino__icono svg { width: 22px; height: 22px; }

.camino__titulo {
  font-size: 1.32rem;
  margin: 0;
  color: var(--rojo-800);
}

.camino__subtitulo {
  font-size: .87rem;
  color: var(--gris);
  margin: .15rem 0 0;
  font-weight: 500;
}

.camino__lista {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  flex: 1;
}
.camino__lista li {
  position: relative;
  padding-left: 1.65rem;
  margin-bottom: .6rem;
  font-size: .95rem;
  color: var(--tinta-suave);
}
.camino__lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .48em;
  width: .95rem; height: .53rem;
  border-left: 2px solid var(--rojo-500);
  border-bottom: 2px solid var(--rojo-500);
  transform: rotate(-45deg) scale(.78);
  transform-origin: left center;
}
.camino--socio .camino__lista li::before {
  border-color: var(--rojo-500);
}

.camino__nota {
  font-size: .83rem;
  color: var(--gris);
  margin: .9rem 0 0;
  text-align: center;
}

/* --- 13. Formulario ------------------------------------------------------- */

.panel-formulario {
  background: #fff;
  border: 1px solid var(--crema-3);
  border-radius: var(--radio-g);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  box-shadow: var(--sombra-m);
  max-width: 46rem;
  margin-inline: auto;
}

.campo { margin-bottom: 1.25rem; }

.campo__etiqueta {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  color: var(--rojo-800);
  margin-bottom: .4rem;
}

.campo__ayuda {
  font-size: .82rem;
  color: var(--gris);
  margin: .35rem 0 0;
}

.campo__control {
  width: 100%;
  padding: .75rem .95rem;
  font-family: inherit;
  font-size: .97rem;
  color: var(--tinta);
  background: var(--crema);
  border: 1.5px solid var(--crema-3);
  border-radius: 10px;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.campo__control:focus {
  outline: none;
  background: #fff;
  border-color: var(--rojo-400);
  box-shadow: 0 0 0 4px rgba(192, 57, 43, .12);
}
.campo__control::placeholder { color: #a8a199; }

textarea.campo__control { resize: vertical; min-height: 6rem; }

select.campo__control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%237a736a' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.5rem;
}

/* Selector de tipo de adhesión */
.tipo-adhesion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: .85rem;
  margin-bottom: 1.6rem;
}

.tipo-adhesion__opcion { position: relative; }

.tipo-adhesion__opcion input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 2;
}

.tipo-adhesion__caja {
  height: 100%;
  border: 2px solid var(--crema-3);
  border-radius: var(--radio);
  padding: 1.1rem 1.15rem;
  background: var(--crema);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
  display: flex;
  gap: .8rem;
  align-items: flex-start;
}

.tipo-adhesion__marca {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 2px solid var(--gris);
  flex-shrink: 0;
  margin-top: .12rem;
  position: relative;
  transition: border-color .18s ease;
}
.tipo-adhesion__marca::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--rojo-500);
  transform: scale(0);
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}

.tipo-adhesion__opcion input:checked ~ .tipo-adhesion__caja {
  border-color: var(--rojo-500);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(192, 57, 43, .13);
}
.tipo-adhesion__opcion input:checked ~ .tipo-adhesion__caja .tipo-adhesion__marca {
  border-color: var(--rojo-500);
}
.tipo-adhesion__opcion input:checked ~ .tipo-adhesion__caja .tipo-adhesion__marca::after {
  transform: scale(1);
}
.tipo-adhesion__opcion input:focus-visible ~ .tipo-adhesion__caja {
  outline: 3px solid var(--rojo-500);
  outline-offset: 3px;
}

.tipo-adhesion__titulo {
  font-weight: 700;
  font-size: .96rem;
  color: var(--rojo-800);
  display: block;
  margin-bottom: .2rem;
}

.tipo-adhesion__texto {
  font-size: .82rem;
  color: var(--gris);
  line-height: 1.4;
  margin: 0;
}

/* Campos que aparecen según el tipo elegido */
.campos--socio {
  display: none;
  border-top: 1px dashed var(--crema-3);
  padding-top: 1.35rem;
  margin-top: .4rem;
}
body[data-adhesion="socio"] .campos--socio { display: block; }
body[data-adhesion="info"] .campos--info { display: block; }
.campos--info { display: none; }

/* Consentimiento */
.consentimiento {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  font-size: .87rem;
  color: var(--tinta-suave);
  line-height: 1.5;
  margin-bottom: 1.4rem;
}
.consentimiento input {
  width: 1.15rem; height: 1.15rem;
  margin-top: .15rem;
  flex-shrink: 0;
  accent-color: var(--rojo-600);
}

.aviso-formulario {
  margin-top: 1rem;
  padding: .85rem 1.1rem;
  border-radius: 10px;
  font-size: .89rem;
  background: var(--rojo-050);
  border: 1px solid var(--rojo-100);
  color: var(--rojo-700);
}
.aviso-formulario[hidden] { display: none; }
.aviso-formulario--error {
  background: #fdf0ec;
  border-color: #f0c8b8;
  color: #8f3a1c;
}

/* --- 14. Preguntas frecuentes -------------------------------------------- */

.faq { max-width: 52rem; margin-inline: auto; }

.faq__item {
  background: #fff;
  border: 1px solid var(--crema-3);
  border-radius: var(--radio);
  margin-bottom: .75rem;
  overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq__item[open] {
  border-color: var(--rojo-100);
  box-shadow: var(--sombra-s);
}

.faq__pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  font-weight: 600;
  font-size: 1rem;
  color: var(--rojo-800);
  cursor: pointer;
  list-style: none;
  font-family: var(--fuente-texto);
}
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta::after {
  content: "";
  width: .62rem; height: .62rem;
  border-right: 2px solid var(--rojo-500);
  border-bottom: 2px solid var(--rojo-500);
  transform: rotate(45deg);
  flex-shrink: 0;
  transition: transform .22s ease;
  margin-top: -.25rem;
}
.faq__item[open] .faq__pregunta::after {
  transform: rotate(-135deg);
  margin-top: .25rem;
}

.faq__respuesta {
  padding: 0 1.35rem 1.3rem;
  font-size: .95rem;
  color: var(--tinta-suave);
  border-top: 1px solid var(--crema-2);
  padding-top: 1.1rem;
}
.faq__respuesta p:last-child { margin-bottom: 0; }

/* --- 15. Contacto --------------------------------------------------------- */

.tarjetas-contacto { margin-top: 2rem; }

.contacto-tarjeta {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: var(--radio);
  padding: 1.4rem 1.5rem;
  text-decoration: none;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.contacto-tarjeta:hover {
  background: rgba(255, 255, 255, .11);
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
  transform: translateY(-3px);
}

.contacto-tarjeta__icono {
  width: 42px; height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .1);
  color: var(--ambar-200);
  flex-shrink: 0;
}
.contacto-tarjeta__icono svg { width: 21px; height: 21px; }

.contacto-tarjeta__etiqueta {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
  display: block;
  margin-bottom: .18rem;
}
.contacto-tarjeta__valor {
  font-size: 1.03rem;
  font-weight: 600;
  display: block;
  word-break: break-word;
}

/* --- 16. Pie -------------------------------------------------------------- */

.pie {
  background: var(--oscuro-950);
  color: rgba(255, 255, 255, .72);
  padding-block: clamp(2.5rem, 5vw, 3.75rem) 2rem;
  font-size: .92rem;
}

.pie__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(9rem, 1fr));
  gap: 2rem;
  margin-bottom: 2.5rem;
}

.pie__marca { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; }
.pie__marca .marca__nombre { color: #fff; }
.pie__marca .marca__lema { color: rgba(255, 255, 255, .5); }
.pie__logo { width: 40px; height: 40px; }

.pie__descripcion { max-width: 26rem; font-size: .89rem; line-height: 1.6; }

.pie__titulo {
  font-family: var(--fuente-texto);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-bottom: .85rem;
}

.pie__lista { list-style: none; padding: 0; margin: 0; }
.pie__lista li { margin-bottom: .5rem; }
.pie__lista a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.pie__lista a:hover { color: #fff; text-decoration: underline; }

/* Los enlaces legales del pie no tenian clase y heredaban el rojo global
   (a { color: var(--rojo-600) }): #c0392b sobre el pie oscuro da 3.52:1 y
   FALLA el minimo AA de 4.5. Se les da el mismo trato que al resto del pie. */
.pie a { color: rgba(255, 255, 255, .82); }
.pie a:hover { color: #fff; }

.pie__legal {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  font-size: .84rem;
}

.pie__nota { max-width: 34rem; font-size: .82rem; line-height: 1.55; color: rgba(255, 255, 255, .55); }

/* Acceso de la junta: deliberadamente DISCRETO. Va en la ultima linea del pie,
   junto a los enlaces legales, con el mismo tamano pero algo mas apagado
   (rgba .62 sobre el pie oscuro da ~5.0:1, sigue cumpliendo AA), sin boton,
   sin recuadro y sin icono. El panel muestra los datos personales de todas las
   familias: debe poder encontrarlo quien ya sabe que existe, y no llamar la
   atencion de nadie mas. Si algun dia lleva un borde o un color de acento,
   dejara de ser discreto. */
.pie__acceso {
  color: rgba(255, 255, 255, .62);
  font-size: .82rem;
  text-decoration: none;
}
.pie__acceso:hover,
.pie__acceso:focus-visible { color: rgba(255, 255, 255, .9); text-decoration: underline; }

/* --- 17. Páginas legales -------------------------------------------------- */

.legal { padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.legal__cuerpo {
  max-width: 46rem;
  margin-inline: auto;
}
.legal__cuerpo h2 {
  font-size: 1.4rem;
  margin-top: 2.5rem;
  color: var(--rojo-800);
}
.legal__cuerpo h2:first-of-type { margin-top: 1.5rem; }
.legal__cuerpo h3 { font-size: 1.1rem; margin-top: 1.75rem; color: var(--rojo-700); }
.legal__cuerpo table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: .9rem;
}
.legal__cuerpo th, .legal__cuerpo td {
  text-align: left;
  padding: .65rem .8rem;
  border-bottom: 1px solid var(--crema-3);
  vertical-align: top;
}
.legal__cuerpo th {
  background: var(--crema-2);
  font-weight: 600;
  color: var(--rojo-800);
  font-size: .84rem;
}

.idioma-bloque[hidden] { display: none; }

/* --- 18. Animaciones de entrada ------------------------------------------ */

.revelar {
  opacity: 0;
  transform: translateY(18px);
}
.revelar--visible {
  opacity: 1;
  transform: none;
  transition: opacity .65s cubic-bezier(.22, 1, .36, 1),
    transform .65s cubic-bezier(.22, 1, .36, 1);
}
.sin-js .revelar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .revelar { opacity: 1; transform: none; }
  .revelar--visible { transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .boton:hover, .tarjeta:hover, .camino:hover, .contacto-tarjeta:hover { transform: none; }
}

/* --- 19. Adaptación a pantallas ------------------------------------------ */

/* La cabecera lleva ahora 8 destinos (se añadieron «Propuestas» y
   «Calendario»). Entre 992 px —donde desaparece el menú de hamburguesa— y
   ~1.200 px, los 8 enlaces más el botón no caben en una línea y la cabecera
   DESBORDA en horizontal, arrastrando toda la página. Medido: 1426 px de ancho
   de documento con una ventana de 1280 px (y 1265 px sin los dos enlaces
   nuevos, o sea que el desbordamiento lo añadieron ellos).

   En esa franja se aprieta la cabecera: menos hueco entre enlaces y menos
   relleno por enlace. Por ENCIMA de 1.200 px no se toca nada, así que el
   aspecto original se conserva donde hay sitio de sobra. */
@media (min-width: 62rem) and (max-width: 75rem) {
  .navegacion { gap: .1rem; }
  .navegacion__enlace { padding: .45rem .5rem; font-size: .88rem; }
  .cabecera__interior { gap: .6rem; }
  .acciones-cabecera { gap: .4rem; }
}

@media (max-width: 62rem) {
  .navegacion { display: none; }
  .hamburguesa { display: block; }

  .cabecera__interior { justify-content: space-between; }
  .marca { order: 1; }
  .acciones-cabecera { order: 3; }

  /* Menú desplegable móvil */
  .navegacion--abierta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--crema);
    border-bottom: 1px solid var(--crema-3);
    padding: .75rem clamp(1.1rem, 4vw, 2.5rem) 1.25rem;
    gap: .15rem;
    box-shadow: 0 12px 28px rgba(42, 18, 16, .10);
    margin-left: 0;
  }
  .navegacion--abierta .navegacion__enlace {
    padding: .7rem .8rem;
    font-size: 1rem;
  }
  .navegacion--abierta .boton {
    margin-top: .6rem;
    width: 100%;
  }
}

@media (max-width: 44rem) {
  body { font-size: 1.03rem; }

  .heroe { min-height: auto; }
  .heroe__fondo img { object-position: 62% center; }
  .heroe__datos { gap: 1.4rem; }
  .heroe__dato { min-width: 6.5rem; }
  .heroe__dato-numero { font-size: 1.4rem; }

  .franja-familias { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .franja-familias__numero { font-size: 3.25rem; }

  .grupo-botones { flex-direction: column; align-items: stretch; }
  .grupo-botones .boton { width: 100%; }

  .pie__rejilla { grid-template-columns: 1fr; gap: 1.75rem; }
  .pie__legal { flex-direction: column; align-items: flex-start; }

  .marca__lema { display: none; }
}

/* --- 21. Figuras del pueblo (galería con pie de foto) --------------------- */

.figure-casera {
  margin: 0;
  background: #fff;
  border: 1px solid var(--crema-3);
  border-radius: var(--radio-g);
  overflow: hidden;
  box-shadow: var(--sombra-s);
  transition: transform .22s ease, box-shadow .22s ease;
}
.figure-casera:hover { transform: translateY(-4px); box-shadow: var(--sombra-m); }

.figure-casera img {
  width: 100%;
  height: 15rem;
  object-fit: cover;
  display: block;
}

.figure-casera figcaption {
  padding: .9rem 1.1rem 1rem;
  font-size: .87rem;
  line-height: 1.5;
  color: var(--tinta-suave);
  border-top: 1px solid var(--crema-2);
  min-height: 3.9rem;   /* pies de una y dos lineas: las tarjetas quedan parejas */
}

@media (max-width: 44rem) {
  .figure-casera img { height: 12rem; }
}

@media print {
  .figure-casera { break-inside: avoid; }
}

/* --- 20. Impresión -------------------------------------------------------- */

@media print {
  .cabecera, .hamburguesa, .pie, .boton, .subir { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .seccion--oscura { background: #fff !important; color: #000 !important; }
  .seccion--oscura * { color: #000 !important; }
  .heroe { min-height: auto; }
  .heroe__fondo, .heroe__velo { display: none; }
  .heroe__contenido { color: #000; }
  a { color: #000; text-decoration: underline; }
}

/* =====================================================================
   22. Seccion "El colegio" — logros reales y que anade la AMPA
   ===================================================================== */

/* Tarjeta de logro. Se separa de .tarjeta porque necesita altura
   homogenea (6 tarjetas de texto desigual) y un remate inferior. */
.tarjeta--colegio {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: clamp(1.25rem, 2vw, 1.6rem);
  background: #fff;
  /* Borde definido en vez de sombra difusa: seis tarjetas blancas flotando con
     sombra sobre crema es un tratamiento ya anticuado. */
  border: 1px solid #eadfce;
  border-top: 3px solid var(--rojo-600);
  border-radius: var(--radio-g);
  box-shadow: none;
}
.tarjeta--colegio .tarjeta__titulo {
  font-size: 1.06rem;
  line-height: 1.3;
  color: var(--rojo-800);
  margin: 0;
}
.tarjeta--colegio .tarjeta__texto {
  font-size: .93rem;
  line-height: 1.62;
  color: var(--tinta-suave);
  margin: 0;
}

/* El remate: que aporta la asociacion. Empujado abajo para que todas las
   tarjetas de una fila alineen su remate a la misma altura. */
.tarjeta__ampa {
  margin: auto 0 0;
  padding-top: .8rem;
  border-top: 1px dashed var(--crema-3);
  font-size: .89rem;
  line-height: 1.55;
  color: var(--tinta);
}
.tarjeta__ampa strong {
  /* Papel semantico: el ROJO es del colegio, el TERRACOTA es lo que aporta la
     AMPA. #b3541f da 4.99:1 sobre blanco; el #cd6727 solo daria 3.77:1. */
  color: #b3541f;
}

/* Cierre de la seccion */
.bloque-cierre {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: var(--crema);
  border-left: 4px solid var(--rojo-600);
  border-radius: 0 var(--radio) var(--radio) 0;
}
.bloque-cierre .titulo-menor { margin-top: 0; }
.bloque-cierre p { max-width: 68ch; }
.bloque-cierre p + p { margin-top: .9rem; }

/* Nota de fuentes: discreta pero legible (no usar --gris crudo) */
.nota-fuente {
  font-size: .82rem;
  color: var(--tinta-suave);
  font-style: italic;
  margin-top: .9rem;
}

/* =====================================================================
   22. Seccion "El colegio" — logros reales y qué añade la AMPA
   ===================================================================== */

/* Al pulsar un enlace del menu, la cabecera fija (73px) no debe tapar el
   titulo de la seccion. Se declara aqui en vez de confiar en el relleno. */
#proyecto, #colegio, #valores, #unete, #preguntas, #contacto {
  scroll-margin-top: 5.5rem;
}

/* =====================================================================
   24. Botón «volver arriba»
   ---------------------------------------------------------------------
   Se pide a menudo en webs largas: al bajar mucho, volver al principio de
   un toque. Dos decisiones deliberadas:

   1. Es un CONTROL DE FLUJO, no decoración, así que va en un GRIS OSCURO
      NEUTRO y no en el rojo de marca. Si llevara el rojo, competiría con
      los botones de acción («Quiero unirme»), que son los que convierten.
      Además, un botón de posición fija pintado con el color de marca parece
      publicidad; uno neutro parece interfaz.

   2. Empieza OCULTO (`hidden`) y sólo aparece al bajar 600 px. A los pocos
      píxeles taparía contenido sin que el visitante lo haya necesitado.
      Sin JS no se muestra nunca: no molesta ni queda como un elemento
      muerto. (Ver `app-*.js`, la regla `.sin-js` ya oculta el resto.)

   Colores comprobados sobre #2f2b26: blanco = 13.9:1 (AAA).
   Anillo de foco claro para que se vea sobre el fondo oscuro del pie.
   ===================================================================== */

.subir {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: calc(clamp(1rem, 3vw, 1.75rem) + 3rem + .75rem);
  z-index: 150;                 /* bajo la cabecera (200), sobre el contenido */
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: #2f2b26;
  color: #fff;
  box-shadow: var(--sombra-m);
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
}

.subir:hover {
  background: #423c35;
  transform: translateY(-3px);
}

.subir:active { transform: translateY(0); }

/* El atributo `hidden` del HTML manda: sin esta regla, el `display: grid`
   de arriba lo anularía y el botón se vería siempre. */
.subir[hidden] { display: none; }

.subir:focus-visible {
  outline: 3px solid var(--ambar-200);
  outline-offset: 3px;
}

.subir__icono {
  width: 22px;
  height: 22px;
}

/* En móvil un poco más pequeño: menos estorbo en pantalla estrecha. */
@media (max-width: 44rem) {
  .subir { width: 2.75rem; height: 2.75rem; }
  .subir__icono { width: 20px; height: 20px; }
}

/* Quien pide «reducir movimiento» no debe ver una animación de entrada. */
@media (prefers-reduced-motion: reduce) {
  .subir { transition: none; }
  .subir:hover { transform: none; }
}

/* =====================================================================
   23. Cuerpo equilibrado de las tarjetas del colegio
   ---------------------------------------------------------------------
   Problema: los seis textos ocupan de 6 a 9 lineas segun el idioma, y el
   remate «Que anade la AMPA» queda pegado al borde inferior. Resultado:
   en las tarjetas cortas aparecia un hueco de hasta 55px entre el texto y
   su linea divisoria, y las seis tarjetas no remataban igual.
   Solucion: reservar la altura del texto mas largo (8 lineas) para que las
   seis ocupen lo mismo y TODAS las divisorias caigan a la misma altura.
   Solo desde 60rem: en movil la columna es ancha y los textos ocupan
   muchas menos lineas (una altura reservada dejaria un hueco enorme).
   ===================================================================== */
@media (min-width: 60rem) {
  .tarjeta--colegio .tarjeta__texto {
    min-height: calc(8 * 1.62em);   /* 8 lineas x line-height */
  }
  /* El remate tambien se reserva: es lo que empuja la divisoria. Sin esto,
     un remate de 4 lineas y otro de 5 desplazan la linea divisoria 22px y
     el hueco vuelve a notarse al comparar tarjetas. */
  .tarjeta--colegio .tarjeta__ampa {
    min-height: calc(5 * 1.55em);
  }
  /* Y el titulo: si uno parte en dos lineas, toda su fila crece 22px y las
     divisorias de esa fila dejan de coincidir con las de al lado. */
  .tarjeta--colegio .tarjeta__titulo {
    min-height: calc(2 * 1.3em);
  }
}

/* =====================================================================
   25. Campo trampa (anti-bots)
   ---------------------------------------------------------------------
   El campo trampa del formulario tiene que estar fuera de la vista de las
   personas pero seguir siendo rellenable por un robot. Se oculta por
   completo (display:none en el contenedor) para que ni un lector de
   pantalla ni el autorrelleno lo alcancen. Se oculta el CONTENEDOR y no el
   input, para que la etiqueta tampoco ocupe espacio.
   ===================================================================== */
.trampa {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.trampa * { display: none !important; }

/* ==========================================================================
   BUZÓN DE PROPUESTAS (v11, 2026-09-29)
   --------------------------------------------------------------------------
   Tarjetas de propuesta con barra de progreso.

   Notas de implementación que conviene no romper:

   - Se usan SÓLO variables definidas en este mismo fichero. Varias que parecen
     «de casa» (`--papel`, `--gris-300`, `--sombra`, `--gris-100`) existen en el
     panel del backend pero NO aquí: una variable inexistente no da error, el
     color simplemente se ignora — y el fallo se ve como un borde que no
     aparece, no como un error.
   - Las tarjetas que crea el JavaScript llevan SÓLO `.propuesta`, NUNCA
     `.revelar`: `prepararRevelado()` se ejecuta una vez al arrancar y sólo
     observa lo que ya existe, así que una tarjeta creada después (al responder
     el fetch) se quedaría con `opacity:0` para siempre y la sección parecería
     vacía. El marcado estático sí usa `.revelar`; lo que se crea por JS, no.
   - El color de cada estado NO se inventa: el rojo es del colegio, y lo que va
     avanzando va pasando a terracota y verde pino, que son los acentos que el
     sitio ya usa para «lo que aporta la AMPA».
   ========================================================================== */

/* --- Aviso de «todavía no hay propuestas» ------------------------------- */
.propuesta-vacia {
  max-width: 34rem;
  margin: 0 auto clamp(1.5rem, 3vw, 2.25rem);
  padding: 1.1rem 1.4rem;
  text-align: center;
  color: var(--tinta-suave);
  background: var(--crema);
  border: 1px dashed var(--crema-3);
  border-radius: var(--radio-g);
  font-size: .95rem;
}
.propuesta-vacia[hidden] { display: none; }

/* --- Aire entre el listado de propuestas y el formulario de envío ---------- */
/* Alex lo pidió el 11-oct-2026: con las dos cosas pegadas, la tarjeta del
   formulario se lee como si fuera «otra propuesta» del listado.
   `:not(:empty)` es lo que evita meter hueco de más cuando todavía no hay ninguna
   propuesta publicada: en ese caso el listado está vacío y el que manda el espaciado
   es el mensaje de `.propuesta-vacia`, que ya lleva su propio margen. (El JavaScript
   hace `lista.textContent = ""` cuando no hay ninguna, así que el selector es fiable.) */
#lista-propuestas:not(:empty) { margin-bottom: clamp(2.75rem, 6vw, 4.5rem); }

/* --- Tarjeta de propuesta ---------------------------------------------- */
.propuesta {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: clamp(1.2rem, 2vw, 1.5rem);
  background: #fff;
  border: 1px solid var(--crema-3);
  border-top: 3px solid var(--rojo-600);
  border-radius: var(--radio-g);
  min-height: 100%;
}

.propuesta__categoria {
  align-self: flex-start;
  padding: .22rem .6rem;
  border-radius: 999px;
  background: var(--rojo-050);
  color: var(--rojo-800);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.propuesta__titulo {
  margin: 0;
  font-size: 1.06rem;
  line-height: 1.3;
  color: var(--rojo-800);
  font-family: var(--fuente-titulo);
}

.propuesta__texto {
  margin: 0;
  font-size: .93rem;
  line-height: 1.62;
  color: var(--tinta-suave);
}

/* Respuesta de la junta: «qué estamos haciendo con esto» */
.propuesta__respuesta {
  margin: 0;
  padding: .7rem .9rem;
  background: var(--crema);
  border-left: 3px solid var(--brasa-600);
  border-radius: 0 var(--radio) var(--radio) 0;
  font-size: .89rem;
  line-height: 1.55;
  color: var(--tinta);
}
.propuesta__respuesta strong { color: var(--brasa-700); }

/* --- Progreso ----------------------------------------------------------- */
.propuesta__progreso {
  margin-top: auto;          /* empuja la barra al pie: alinea todas las filas */
  padding-top: .9rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.propuesta__progreso-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
}

.propuesta__viabilidad {
  font-size: .8rem;
  font-weight: 700;
}
.propuesta__viabilidad--estudio   { color: var(--brasa-700); }
.propuesta__viabilidad--viable    { color: var(--brasa-600); }
.propuesta__viabilidad--en_marcha { color: var(--pino-600); }
.propuesta__viabilidad--hecha     { color: var(--pino-700); }

.propuesta__pct {
  font-size: .8rem;
  font-weight: 700;
  color: var(--gris);
  font-variant-numeric: tabular-nums;
}

.propuesta__barra {
  height: 9px;
  width: 100%;
  background: var(--crema-3);
  border-radius: 999px;
  overflow: hidden;
}

.propuesta__barra-relleno {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width .5s ease;
}
/* El relleno se intensifica a medida que la propuesta avanza. */
.propuesta__barra-relleno--estudio   { background: var(--brasa-400); }
.propuesta__barra-relleno--viable    { background: var(--brasa-500); }
.propuesta__barra-relleno--en_marcha { background: var(--pino-500); }
.propuesta__barra-relleno--hecha     { background: var(--pino-700); }

.propuesta__autor {
  margin: 0;
  font-size: .82rem;
  color: var(--gris);
  font-style: italic;
}

/* --- Votos de apoyo (dentro de la tarjeta) ------------------------------- */
/* OJO: aquí NO se usa `margin-top:auto`. El que empuja al pie de la tarjeta es
   `.propuesta__progreso`, y dos `auto` en la misma columna se repartirían el hueco,
   dejando el bloque de votos flotando a media tarjeta. */
.votos {
  margin-top: .35rem;
  padding-top: .85rem;
  border-top: 1px solid var(--crema-3);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.votos__respaldo {
  margin: 0;
  font-size: .86rem;
  font-weight: 700;
  color: var(--pino-700);
}

.votos__botones { display: flex; gap: .5rem; flex-wrap: wrap; }

.votos__boton { padding: .5rem .95rem; font-size: .86rem; }

/* El botón del sentido que se está rellenando se queda marcado. */
.votos__boton[aria-expanded="true"] {
  background: var(--rojo-700);
  border-color: var(--rojo-700);
  color: #fff;
}

.votos__form {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: .95rem;
  background: var(--crema);
  border: 1px solid var(--crema-3);
  border-radius: var(--radio);
}
/* Sin esta regla, `display:flex` gana al atributo `hidden` y el formulario se
   quedaría siempre abierto (el mismo fallo que tuvo el panel). */
.votos__form[hidden] { display: none; }

.votos__form .campo { margin-bottom: 0; }
.votos__form-titulo {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: 1rem;
  color: var(--rojo-800);
}
.votos__form-sentido {
  margin: -.45rem 0 0;
  font-size: .95rem;
  font-weight: 700;
  color: var(--brasa-700);
}

.votos__acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

.votos__ayuda {
  margin: 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--gris);
}

.votos__porcorreo { font-weight: 700; color: var(--rojo-800); }

/* Un solo ancho de tarjeta en móvil, como el resto de rejillas del sitio. */
@media (max-width: 40rem) {
  .propuesta { min-height: 0; }
}

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

/* ==========================================================================
   v12 (2026-09-29): la cabecera aprieta los enlaces entre 992 y 1200 px, porque
   con «Propuestas» y «Calendario» desbordaba en horizontal.
   ========================================================================== */

/* ==========================================================================
   CALENDARIO DE EVENTOS (v11, 2026-09-29)
   --------------------------------------------------------------------------
   El año escolar entero en rejilla, un mes por bloque, con un dibujo por
   evento. Al pinchar un día con marca se abre abajo el cuadro de detalle.

   Notas:
   - La rejilla usa `grid-template-columns: repeat(7, 1fr)` (SIEMPRE 7), no
     `auto-fit`: con `auto-fit` las columnas se recolocan y los días dejan de
     caer bajo su día de la semana, que es justo lo que hace legible un
     calendario.
   - Los días del fin de semana no son botones: no hay eventos que abrir y un
     botón que no hace nada es una trampa.
   - El color de cada tipo se define aquí y también en el JS (que es quien lo
     asigna a cada icono). Si se cambia uno, hay que cambiar el otro.
   - `--color-tipo` NO se define en esta hoja: la escribe el JavaScript en cada
     tarjeta de detalle (`style.setProperty("--color-tipo", …)`) según el tipo
     del evento. Por eso lleva un valor de reserva en el `border-left`. Si se
     buscara aquí, no aparecería: se define en tiempo de ejecución, no en el CSS.
   ========================================================================== */

.cal { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

.cal__barra {
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
  align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem;
  padding: .9rem 1.1rem;
  background: #fff;
  border: 1px solid var(--crema-3);
  border-radius: var(--radio-g);
}

.cal__meses-texto {
  font-size: .84rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--rojo-800);
}

.cal__leyenda { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; }

.cal__leyenda-item {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .82rem; color: var(--tinta-suave);
}

.cal__leyenda-icono { width: 18px; flex: none; line-height: 0; }
.cal__leyenda-icono svg { width: 100%; height: auto; }

.cal__leyenda-punto {
  width: 10px; height: 10px; border-radius: 999px; flex: none;
}

/* --- Un mes -------------------------------------------------------------- */

.cal__rejilla {
  display: grid;
  gap: clamp(1rem, 2vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

.cal__mes {
  background: #fff;
  border: 1px solid var(--crema-3);
  border-radius: var(--radio-g);
  padding: .9rem .85rem 1rem;
}

.cal__mes-titulo {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 0 .7rem;
  font-family: var(--fuente-titulo);
  font-size: 1.02rem; color: var(--rojo-800);
  text-transform: capitalize;
}

.cal__mes-anio { font-size: .78rem; font-weight: 500; color: var(--gris); }

.cal__semana, .cal__dias {
  display: grid;
  grid-template-columns: repeat(7, 1fr);   /* siempre 7: si no, los días se desalinean */
  gap: 2px;
}

.cal__dia-nombre {
  text-align: center; font-size: .68rem; font-weight: 700;
  color: var(--gris); padding-bottom: .3rem;
}
.cal__dia-nombre--finde { color: var(--rojo-400); }

.cal__dia {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1px;
  border: 0; background: transparent;
  border-radius: 9px;
  font: inherit; font-size: .8rem;
  color: var(--tinta-suave);
  padding: 0;
}

.cal__dia--vacio { visibility: hidden; }
.cal__dia--finde { color: var(--gris); opacity: .55; }

.cal__dia--evento {
  background: var(--crema);
  color: var(--tinta);
  font-weight: 700;
  cursor: pointer;
}

/* Pista visual de que se puede pinchar */
.cal__dia--evento:hover { background: var(--rojo-050); }

.cal__dia--evento:focus-visible {
  outline: 3px solid var(--rojo-700);
  outline-offset: 1px;
}

.cal__icono {
  display: block;
  width: 74%;
  max-width: 30px;          /* dibujo GRANDE: es lo que hace el calendario llamativo */
  line-height: 0;
}
.cal__icono svg { width: 100%; height: auto; }

.cal__mas {
  position: absolute; top: 1px; right: 2px;
  font-size: .56rem; font-weight: 700;
  color: #fff;
  background: var(--rojo-600);
  border-radius: 999px;
  padding: 0 3px;
  line-height: 1.5;
}

.cal__dia--hoy {
  box-shadow: inset 0 0 0 2px var(--rojo-600);
}

/* Los días de un evento largo (vacaciones) se ven más suaves y sin dibujo en
   todos: un icono repetido 15 casillas seguidas ensucia la rejilla. */
.cal__dia--tipo-vacaciones.cal__dia--evento { background: var(--pino-050); }

/* --- Cuadro de detalle -------------------------------------------------- */

.cal__detalle {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}
.cal__detalle[hidden] { display: none; }

.cal__detalle-titulo {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: 1.05rem; color: var(--rojo-800);
  text-transform: capitalize;
}

.cal__detalle-evento {
  background: #fff;
  border: 1px solid var(--crema-3);
  border-left: 4px solid var(--color-tipo, var(--rojo-600));
  border-radius: var(--radio);
  padding: 1rem 1.1rem;
}

.cal__detalle-cab {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: .45rem;
}

.cal__detalle-icono { width: 26px; flex: none; line-height: 0; }
.cal__detalle-icono svg { width: 100%; height: auto; }

.cal__detalle-nombre {
  margin: 0;
  font-size: 1rem; line-height: 1.3; color: var(--rojo-800);
}

.cal__detalle-meta {
  margin: 0 0 .5rem;
  font-size: .8rem; font-weight: 700; color: var(--gris);
}

.cal__detalle-texto {
  margin: 0; font-size: .92rem; line-height: 1.6; color: var(--tinta-suave);
}

.cal__detalle-fuente {
  margin: .6rem 0 0;
  font-size: .76rem; color: var(--gris); font-style: italic;
}

/* Ventanita flotante del calendario (al pasar el ratón / tocar un día). */
.cal__tooltip {
  position: fixed;
  z-index: 40;
  max-width: min(20rem, calc(100vw - 1rem));
  display: grid;
  gap: .5rem;
  pointer-events: none;   /* no roba el hover a las casillas vecinas */
}
.cal__tooltip[hidden] { display: none; }
.cal__tooltip .cal__detalle-evento {
  box-shadow: 0 10px 30px rgba(43, 38, 34, .22);
}

.cal__vacio {
  grid-column: 1 / -1;
  text-align: center; color: var(--gris);
  padding: 2rem 1rem;
  background: #fff;
  border: 1px dashed var(--crema-3);
  border-radius: var(--radio-g);
}

@media (max-width: 40rem) {
  /* En móvil la casilla se queda pequeña: el dibujo se simplifica. */
  .cal__icono { max-width: 16px; }
  .cal__mas { font-size: .5rem; }
}

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

/* Nota al pie del calendario, explicando de dónde salen las fechas. */
.cal__nota {
  max-width: 44rem;
  margin: clamp(1.25rem, 2.5vw, 1.75rem) auto 0;
  text-align: center;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--gris);
}


/* ==========================================================================
   v13 (2026-09-29): páginas nuevas (calendario.html y propuestas.html) y
   navegación con 8 destinos.
   --------------------------------------------------------------------------
   Las páginas nuevas llevan la navegación completa pero SIN el botón «Quiero
   unirme» (no tiene sentido dentro de la propia sección). Eso deja más sitio
   para los enlaces, así que la franja en la que se aprieta la cabecera puede
   ser más estrecha que en la portada.
   ========================================================================== */

/* La franja apretada se aplica igual en las páginas nuevas, porque el número de
   destinos es el mismo (8). Se mantiene la regla de v12 para la portada y se
   reafirma aquí para que una página nueva no se quede sin ella si algún día se
   reordena el CSS. Ya está definida arriba; esto sólo deja constancia. */

/* Los iconos de los días del calendario, un poco más grandes en la página propia:
   al estar el calendario solo, hay más ancho y los dibujos se lucen mejor. */
@media (min-width: 62rem) {
  .cal__icono { max-width: 34px; }
  .cal__dia { font-size: .84rem; }
}

/* ==========================================================================
   v14 (2026-09-29): la cabecera ya no desborda.
   --------------------------------------------------------------------------
   Medido con el navegador, ancho del documento frente al de la ventana:

     portada 1280 px  → 1426 px (+146)   desbordaba
     portada 1400 px  → 1486 px  (+86)   desbordaba
     calendario 1100  → 1120 px  (+20)   desbordaba

   La causa es la misma en los tres casos: los 8 destinos, más el botón «Quiero
   unirme» que sólo lleva la portada, no caben en una línea. El desbordamiento
   horizontal arrastra TODA la página, así que se ve como un fallo grave.

   Dos medidas:

   1. Por debajo de 82rem, el botón de la cabecera se retira: es el que no cabe,
      y su acción sigue disponible en el menú de hamburguesa, en el héroe y en
      toda la sección «Únete». Así los 8 enlaces respiran.
   2. En la franja de 62 a 75rem se aprietan un poco más los enlaces.

   Comprobado después a 1100, 1280 y 1400 en las tres páginas.
   ========================================================================== */

@media (max-width: 82rem) {
  /* Se oculta SÓLO el botón de la cabecera; el conmutador de idioma y los
     enlaces se quedan. */
  .cabecera .acciones-cabecera > .boton { display: none; }
}

@media (min-width: 62rem) and (max-width: 75rem) {
  .navegacion { gap: 0; }
  .navegacion__enlace { padding: .4rem .45rem; font-size: .84rem; }
}

/* --------------------------------------------------------------------------
   CORRECCIÓN (misma v14; no llegó a publicarse, así que se edita en su sitio).

   El intento anterior apuntaba a `.acciones-cabecera > .boton`, pero en la
   portada el botón «Quiero unirme» NO está ahí: es el último hijo de
   `.navegacion`. Por eso la regla no ocultó nada y la portada seguía
   desbordando 146 px a 1280.

   En vez de ocultar el botón (es la llamada a la acción principal del sitio),
   se aprieta la barra entera —enlaces Y botón— en la franja de 992 a 1440 px,
   que es donde no caben los 9 elementos. Medido: hacía falta recortar ~150 px
   y estas reglas recortan ~150 px. Por encima de 1440 px no se toca nada.
   -------------------------------------------------------------------------- */
@media (min-width: 62rem) and (max-width: 90rem) {
  .navegacion { gap: 0; }
  .navegacion__enlace { padding: .4rem .45rem; font-size: .85rem; }
  .navegacion > .boton { padding: .45rem .7rem; font-size: .85rem; min-height: 38px; }
  .cabecera__interior { gap: .5rem; }
  .acciones-cabecera { gap: .35rem; }
  .idioma__boton { padding: .35rem .55rem; }
}

/* --------------------------------------------------------------------------
   CIERRE (misma v14). La franja anterior tenía DOS agujeros, vistos al medir
   más anchos de los previstos:

     1100 px  → +17 px   (por debajo aún no cabía con el ajuste solo)
     1500 px  → +36 px   (por ENCIMA de 90rem el ajuste ya no se aplicaba, y
                          sin ajuste la barra necesita ~1536 px)

   Una franja con dos extremos es frágil: basta otro idioma o un enlace más para
   volver a salirse. Así que el ajuste se aplica SIEMPRE que la navegación esté
   en línea (≥62rem). En pantallas muy anchas se ve un poco más apretada que
   antes, que es un cambio estético mínimo a cambio de que no desborde a ningún
   ancho.

   Y por debajo de 72rem se retira el botón «Quiero unirme» de la barra: es lo
   que no cabe, y su acción sigue estando en el héroe, en la sección «Únete» y en
   el menú de hamburguesa. Así los enlaces dejan de apretarse tanto.
   -------------------------------------------------------------------------- */
@media (max-width: 90rem) {
  .navegacion { gap: 0; }
  .navegacion__enlace { padding: .4rem .45rem; font-size: .85rem; }
  .navegacion > .boton { padding: .45rem .7rem; font-size: .85rem; min-height: 38px; }
  .cabecera__interior { gap: .5rem; }
  .acciones-cabecera { gap: .35rem; }
  .idioma__boton { padding: .35rem .55rem; }
}

@media (min-width: 62rem) and (max-width: 72rem) {
  .navegacion > .boton { display: none; }   /* no cabe; sigue en «Únete» */
}

/* --------------------------------------------------------------------------
   CIERRE DEFINITIVO (misma v14). Tercera medición, tres agujeros más:

     index 1500 px → +36   (por encima de 90rem el ajuste no se aplicaba)
     calendario 1100 → +20,  1160 → +15

   Conclusión: acotar el ajuste por arriba con un `max-width` sólo mueve el
   problema al ancho siguiente. El ajuste se aplica SIEMPRE que la navegación
   esté en línea, sin límite superior. En pantallas grandes los enlaces quedan
   algo más juntos que antes, y a cambio NINGÚN ancho desborda.
   -------------------------------------------------------------------------- */
@media (min-width: 62rem) {
  .navegacion { gap: 0; }
  .navegacion__enlace { padding: .4rem .45rem; font-size: .85rem; }
  .navegacion > .boton { padding: .45rem .7rem; font-size: .85rem; min-height: 38px; }
  .cabecera__interior { gap: .5rem; }
  .acciones-cabecera { gap: .35rem; }
  .idioma__boton { padding: .35rem .55rem; }
}

/* Franja estrecha (992–1152 px): aquí sí hace falta recortar más. */
@media (min-width: 62rem) and (max-width: 72rem) {
  .navegacion > .boton { display: none; }   /* no cabe; sigue en «Únete» */
  .navegacion__enlace { padding: .35rem .35rem; font-size: .8rem; }
  .cabecera__interior { gap: .4rem; }
}

/* --------------------------------------------------------------------------
   El calendario también desbordaba (18 px a 1100–1160 px y en móvil ancho).
   No era la cabecera: eran las CASILLAS de los días, 53 px cada una. Una
   columna de rejilla tiene `min-width: auto` por defecto, o sea que no baja de
   su tamaño de contenido mínimo; con 7 columnas × 53 px la fila se sale de la
   tarjeta del mes y arrastra toda la página.

   La corrección es la de siempre para este caso: permitir que las casillas
   bajen de su mínimo y recortar lo que no quepa. Se aplica a toda la cadena
   (mes → fila de días → casilla), porque basta un eslabón sin `min-width: 0`
   para que el problema vuelva.
   -------------------------------------------------------------------------- */
.cal__mes, .cal__dias, .cal__dia { min-width: 0; }
.cal__dia { overflow: hidden; }
/* El número no debe poder ensanchar la casilla. */
.cal__dia-num { min-width: 0; }

/* ==========================================================================
   v16 (2026-09-29): se renombra a v16 y se añade el botón de BAJAR. v15 no llegó
   a publicarse, así que no se acumulan dos versiones de lo mismo.
   v15 (2026-09-29): botón flotante de ACCESO A MIEMBROS
   --------------------------------------------------------------------------
   Alex: «un botón de acceso rápido al final de la web (para el acceso de
   miembros), igual que el círculo que te devuelve al inicio».

   Va ENCIMA del botón de subir (mismo sitio, apilados en vertical): así los dos
   accesos rápidos quedan juntos, en la esquina donde ya se busca el de subir.
   El de arriba es «subir» porque se usa más y el dedo llega antes.

   Reglas que hereda del botón de subir, para que se comporten igual:
   - 48x48 px, círculo, mismo radio y misma sombra.
   - `hidden` en el HTML y regla `[hidden]` propia: sin ella, el `display: grid`
     anularía el atributo y el botón se vería siempre.
   - `data-i18n-aria` igual: su etiqueta se traduce como la del otro.

   Color: el de subir es gris neutro a propósito (un flotante con el color de
   marca compite con los botones de acción y parece publicidad). Éste hace
   exactamente lo mismo, para que los dos se lean como la misma pareja y no como
   un reclamo.
   ========================================================================== */

/* El atributo `hidden` manda (misma trampa que en `.subir`). */
@media (max-width: 44rem) {
  }

@media (prefers-reduced-motion: reduce) {
  }

/* Al imprimir no debe salir ninguno de los dos flotantes. */
@media print {
  }

/* --------------------------------------------------------------------------
   Botón para BAJAR AL FINAL («necesitamos otro para bajar hasta el final»).

   Los tres flotantes quedan apilados en la misma esquina, de abajo arriba:
     1. subir   (abajo del todo: el más usado, donde llega antes el dedo)
     2. bajar
     3. miembros

   El de bajar y el de subir son la misma pareja visual: mismo tamaño, mismo
   gris neutro, misma sombra. Se distinguen por la flecha, que es lo único que
   debe cambiar.
   -------------------------------------------------------------------------- */
.bajar {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 150;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: #2f2b26;
  color: #fff;
  box-shadow: var(--sombra-m);
  transition: background .2s ease, transform .2s ease, opacity .2s ease;
}

.bajar:hover { background: #423c35; transform: translateY(-3px); }
.bajar:active { transform: translateY(0); }
.bajar[hidden] { display: none; }
.bajar:focus-visible { outline: 3px solid var(--ambar-200); outline-offset: 3px; }
.bajar__icono { width: 22px; height: 22px; }

/* El de miembros sube un escalón más: ahora hay tres. */
@media (max-width: 44rem) {
  .subir { width: 2.75rem; height: 2.75rem; bottom: calc(1rem + 2.75rem + .6rem); }
  .bajar { width: 2.75rem; height: 2.75rem; bottom: 1rem; }
  .bajar__icono { width: 20px; height: 20px; }
  }

@media (prefers-reduced-motion: reduce) {
  .bajar { transition: none; }
  .bajar:hover { transform: none; }
}

@media print {
  .bajar { display: none !important; }
}


/* ==========================================================================
   v17 (2026-09-29): se retira el TERCER botón flotante (acceso a miembros).
   --------------------------------------------------------------------------
   Alex: «no son 3 botones, solo son dos... en la parte de abajo de la web, está
   el enlace de socios». Tiene razón: el acceso de miembros ya vive en el enlace
   discreto del pie, así que un círculo para lo mismo era redundante. El pie de
   TODAS las páginas lleva ahora ese enlace (antes sólo lo tenía la portada, y
   en las demás el único acceso era el círculo que acabo de retirar).

   Quedan DOS flotantes, la pareja que se pidió:
     - abajo: subir
     - encima: bajar
   ========================================================================== */

/* v18: la posición coincide con el significado. Antes estaban cruzados (la flecha
   de subir abajo y la de bajar encima), que es lo que Alex vio como «invertidos».
   Ahora: ↑ arriba, ↓ abajo. */
.subir { bottom: calc(clamp(1rem, 3vw, 1.75rem) + 3rem + .75rem); }
.bajar { bottom: clamp(1rem, 3vw, 1.75rem); }

@media (max-width: 44rem) {
  .subir { bottom: calc(1rem + 2.75rem + .6rem); }
  .bajar { bottom: 1rem; }
}


/* ==========================================================================
   v19 (2026-09-29): la cabecera vuelve a tener aire, y el menú es el mismo en
   todas las páginas.

   Alex: «el espacio entre los menús y el language toggle es demasiado poco,
   sepáralos. Quiero unirme y el botón de idioma están prácticamente pegados»,
   y «el orden de los puntos del menú difiere entre la página principal y la de
   calendario o propuestas».

   POR QUÉ ESTABA APRETADO: todas las reglas de arriba se escribieron cuando la
   barra tenía NUEVE elementos (ocho enlaces + botón) y desbordaba en pantallas
   medianas. Se fueron acumulando ajustes («gap: 0», tipografía a .85rem) hasta
   dejarlo todo pegado. Ahora la barra tiene SEIS elementos (cinco enlaces +
   botón): sobra sitio de largo. Este bloque sustituye el apretado por espaciado
   holgado, y como va al final del fichero gana a los ajustes anteriores.

   ORDEN DEL MENÚ: se unifica en el HTML de las seis páginas, no aquí (el CSS no
   puede ordenar enlaces). Este bloque sólo se ocupa del espacio.
   ========================================================================== */

@media (min-width: 62rem) {
  .navegacion { gap: .5rem; }
  .navegacion__enlace { padding: .5rem .8rem; font-size: .93rem; }
  .navegacion > .boton { padding: .55rem 1.05rem; font-size: .93rem; min-height: 40px; }
  .cabecera__interior { gap: 1rem; }

  /* LA SEPARACIÓN QUE PEDÍA ALEX: el bloque de idioma ya no queda pegado al
     botón «Quiero unirme»; se aparta y respira. */
  .acciones-cabecera { gap: 1rem; margin-left: 1.6rem; }
  .idioma__boton { padding: .5rem .85rem; }
}

/* El botón vuelve a la barra también en pantallas medianas: con seis elementos
   ya cabe (antes se retiraba porque no cabía con nueve). Si en algún ancho
   justo no cupiera, el JS lo aparta al menú de hamburguesa. */
@media (min-width: 62rem) and (max-width: 75rem) {
  .navegacion > .boton { display: inline-flex; }
  .navegacion__enlace { padding: .45rem .6rem; font-size: .88rem; }
  .acciones-cabecera { margin-left: 1.1rem; }
}


/* ==========================================================================
   v20 (2026-09-29): los días del calendario son SIEMPRE un <button>.
   --------------------------------------------------------------------------
   Antes los sábados y domingos se creaban como <span>, y el manejador del clic
   sólo se enganchaba a los <button>: un evento en fin de semana se veía en la
   casilla pero al pulsarlo no ocurría nada (el 24 de octubre era sábado).

   Al pasar a botón TODOS los días, hace falta asegurarse de que el navegador no
   le meta su estilo por defecto (fondo gris, borde, tipografía del sistema), que
   rompería el aspecto del calendario. El botón tiene que verse EXACTAMENTE igual
   que se veía el <span>.
   ========================================================================== */

.cal__dia {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-family: inherit;
  color: inherit;
  padding: 0;
  text-align: center;
}

/* Los fines de semana mantienen su tono atenuado, ahora como botón. */
.cal__dia--finde { color: var(--gris); opacity: .55; }

/* Un día con evento invita a pulsarlo; el fin de semana, igual que los demás:
   antes sólo los laborables mostraban la mano, lo que despistaba. */
.cal__dia--evento { cursor: pointer; }
.cal__dia--evento:hover { background: var(--rojo-050); }
.cal__dia--evento:focus-visible { outline: 3px solid var(--rojo-700); outline-offset: 1px; }

/* Un día sin evento no debe parecer pulsable. */
.cal__dia:not(.cal__dia--evento) { cursor: default; }


/* ==========================================================================
   v21 (2026-09-29): el contenido del día ya cabe en la casilla.
   --------------------------------------------------------------------------
   MEDIDO, no supuesto: la casilla es cuadrada (43x43 px a 1280 de ancho) y el
   número (28 px) más el dibujo (32 px) sumaban 52 px. Como `.cal__dia` tiene
   `overflow: hidden`, el dibujo se recortaba por abajo en **las 38 casillas con
   evento** de la página. Eso es el renderizado roto que vio Alex: el dibujo se
   salía de su hueco y quedaba pegado/cortado.

   El reparto ahora reserva sitio a las dos cosas: el número con su alto de
   línea justo y el dibujo con un máximo que deja margen. Se usan `clamp()` para
   que el dibujo acompañe al tamaño de la casilla (grande en pantallas grandes,
   pequeño en móvil) sin descuadrarla nunca.
   ========================================================================== */

.cal__dia {
  gap: 0;
  overflow: hidden;
  padding: 1px 0;
}

/* El número, con el alto justo de su línea (28 px era demasiado para 43 de
   casilla). `line-height: 1.1` lo deja en ~18 px. */
.cal__dia-num {
  display: block;
  line-height: 1.1;
  font-size: .82rem;
}

/* El dibujo: hasta un 52% del alto de la casilla, con un tope absoluto.
   Antes era el 74% y no cabía junto al número. */
/* `width: auto` con un svg de alto fijo colapsaba el dibujo a 0x0 (medido).
   El contenedor necesita un ancho explícito: el svg lo llena al 100% y el alto
   lo pone el propio svg. */
.cal__icono {
  display: block;
  width: clamp(13px, 1.35vw, 20px);
  line-height: 0;
  margin: 1px auto 0;
}
.cal__icono svg {
  display: block;
  width: 100%;
  height: auto;
}

/* En móvil, algo más pequeño todavía. */
@media (max-width: 44rem) {
  .cal__icono { width: 12px; }
  .cal__dia-num { font-size: .72rem; }
}

/* La casilla necesita sitio para el número + el dibujo: con `aspect-ratio: 1/1`
   a 43 px no entraban. Se le da un mínimo cómodo y se deja crecer con la
   rejilla; en pantallas estrechas se reduce otra vez. */
.cal__dia { min-height: 46px; }
@media (max-width: 44rem) { .cal__dia { min-height: 38px; } }


/* ==========================================================================
   v22 (2026-09-30): los botones flotantes ya no quedan debajo de la barra del
   navegador en el móvil.
   --------------------------------------------------------------------------
   Alex: «en la versión móvil no sale el botón para bajar rápidamente al final».

   CAUSA, medida: en móvil el botón de BAJAR estaba a **16 px** del borde
   inferior, y el de SUBIR a 69,6 px. El código era correcto (los dos se muestran
   con la misma condición), pero **16 px es justo donde el navegador del móvil
   pone su barra**: el botón se dibujaba DEBAJO de ella y no se veía ni se podía
   pulsar. El de subir, más alto, sí se veía — y por eso desde fuera parecía que
   «el de bajar no aparece».

   Es la misma clase de fallo en las tres formas de la barra:
     - Safari en iPhone: barra inferior flotante.
     - Chrome en Android: barra que aparece y desaparece al desplazar.
     - El «notch» o borde redondeado de los móviles modernos.

   ARREGLO en tres partes:
     1. `viewport-fit=cover` en el HTML: sin esto, iOS no expone las zonas
        seguras y `env()` devuelve 0.
     2. `env(safe-area-inset-bottom)` en el `bottom` de los dos botones: respeta
        la zona que el sistema reserva.
     3. Un MÍNIMO de separación en móvil, para que sigan visibles aunque el
        navegador no informe de ninguna zona segura (muchos Android no lo hacen).
        Es lo que de verdad resuelve el caso de Alex.
   ========================================================================== */

@media (max-width: 44rem) {
  /* En móvil, los dos botones suben de verdad: nada de pegarse al borde. */
  .bajar {
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px) + 3.5rem);
    /* 3.5rem = 56 px de separación extra: la altura típica de la barra de un
       navegador móvil. Medido: con 16 px el botón quedaba tapado. */
  }
  .subir {
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px) + 3.5rem + 2.75rem + .6rem);
  }
}

/* Móviles muy bajos (apaisado): se aprieta para no comerse la pantalla. */
@media (max-width: 44rem) and (max-height: 420px) {
  .bajar { bottom: calc(.75rem + env(safe-area-inset-bottom, 0px) + 2.5rem); }
  .subir { bottom: calc(.75rem + env(safe-area-inset-bottom, 0px) + 2.5rem + 2.75rem + .4rem); }
}