/* ==========================================================================
   AFA Atalaya — Hoja de estilos principal
   Estructura:
     1. Variables y reset
     2. Utilidades (contenedor, botones, iconos, enlaces)
     3. Header y navegación
     4. Hero
     5. Sección: Próximas actividades
     6. Sección: ¿Qué hace el AFA?
     7. Sección: Conoce a la junta
     8. Sección: Actualidad AFA
     9. CTA: Hazte socio
    10. Footer
    11. Responsive
   ========================================================================== */

/* ---------- 1. Variables y reset ---------- */

:root {
  /* Colores de marca */
  --green-900: #123d29;
  --green-800: #17552f;
  --green-700: #1d6b3b;
  --green-600: #257f47;
  --green-100: #dcefe2;
  --green-50:  #eef7f0;

  --cream:     #f6f1e3;   /* botón claro del CTA */
  --bg-page:   #ffffff;
  --bg-soft:   #f7f8f6;   /* fondo de secciones alternas */
  --card-bg:   #ffffff;

  --text-main: #24292e;
  --text-soft: #5c6660;
  --text-inverse: #ffffff;

  --border:    #e4e8e4;
  --shadow-sm: 0 1px 3px rgba(18, 61, 41, 0.08);
  --shadow-md: 0 6px 18px rgba(18, 61, 41, 0.10);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --font-sans: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;

  --container: 1120px;

  /* Imagen de cabecera de la portada.
     Hay dos versiones: la de escritorio y una más ligera para móviles, que se
     intercambian en el bloque responsive del final de este fichero.
     Para cambiar la foto, sustituye estos dos ficheros en /img conservando los
     nombres (en minúsculas: el servidor distingue mayúsculas). */
  --hero-image: url("../img/cabecera.webp");
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-main);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul {
  margin: 0;
}

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

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

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

/* Desplazamiento suave para los anclajes del menú */
html {
  scroll-behavior: smooth;
}

/* ---------- 2. Utilidades ---------- */

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

.icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.icon-title {
  width: 1.3em;
  height: 1.3em;
  color: var(--green-700);
}

/* Botones ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease,
              border-color 0.2s ease, transform 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  background: var(--green-800);
  color: var(--text-inverse);
}

.btn-primary:hover {
  background: var(--green-700);
}

.btn-outline {
  border-color: var(--green-800);
  color: var(--green-800);
  background: transparent;
}

.btn-outline:hover {
  background: var(--green-50);
}

.btn-outline-light {
  border-color: rgba(255, 255, 255, 0.9);
  color: var(--text-inverse);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(2px);
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.2);
}

.btn-light {
  background: var(--cream);
  color: var(--green-900);
}

.btn-light:hover {
  background: #fffbef;
}

/* Enlaces con flecha ------------------------------------------------------ */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--green-700);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  /* Estos enlaces medían 20-22 px de alto, por debajo del mínimo de 24 px que
     pide la WCAG 2.5.8 para un objetivo táctil. El padding vertical los sube
     a 28 px sin mover nada de sitio, porque el margen negativo compensa. */
  min-height: 28px;
  padding-block: 4px;
  margin-block: -4px;
}

.link-arrow:hover {
  color: var(--green-900);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.link-arrow-sm {
  font-size: 0.82rem;
}

/* Cabeceras de sección ---------------------------------------------------- */

.section {
  padding: 64px 0;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-900);
}

/* Variante de cabecera de sección con subtítulo debajo del título, en lugar
   de la disposición por defecto (título a la izquierda, algo a la derecha). */
.section-header-stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.section-sub {
  max-width: 68ch;
  color: var(--text-soft);
}

.section-title-center {
  justify-content: center;
  text-align: center;
  margin-bottom: 40px;
}

.section-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 36px;
  text-align: center;
}

/* Rejillas de tarjetas ---------------------------------------------------- */

.cards-grid {
  display: grid;
  gap: 24px;
}

/* Tres columnas COMO MÁXIMO, no exactamente tres.

   Con repeat(3, 1fr) fijo, una rejilla con dos tarjetas dejaba un hueco vacío
   a la derecha, y eso pasa cada vez que se retira una convocatoria terminada
   de Actualidad o de la portada. Con auto-fit las tarjetas se reparten el
   ancho disponible sea cual sea su número, así que la página se puede quedar
   con una, dos o tres sin que haya que tocar el CSS.

   El minmax lleva min(320px, 100%) para que en pantallas estrechas la tarjeta
   pueda bajar de 320px en lugar de desbordar. */
.cards-grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

/* ---------- 3. Header y navegación ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-page);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 78px;
}

/* Marca / logo ----------------------------------------------------------
   Monograma tipográfico de la AFA. Sustituyó al escudo del Colegio Atalaya
   en agosto de 2026: la asociación es una entidad independiente del centro y
   no debe presentarse con la marca del colegio.

   Es provisional: la asamblea del 29/05/2026 acordó convocar un concurso de
   rediseño del logotipo. Cuando haya ganador basta con cambiar el <span
   class="brand-mark"> del HTML por un <img> o un <svg> y borrar el bloque
   .brand-mark de aquí; el resto de la cabecera no se toca.
   --------------------------------------------------------------------- */

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--green-800);
  text-decoration: none;
}

.brand-mark {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--green-800);
  color: var(--text-inverse);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.brand-name strong {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--green-900);
}

.brand-name small {
  font-size: 0.72rem;
  color: var(--text-soft);
  white-space: nowrap;
}

/* Navegación principal */

.main-nav {
  margin-left: auto;
}

.main-nav ul {
  display: flex;
  align-items: center;
  gap: 22px;
}

.main-nav a {
  position: relative;
  padding: 8px 0;
  white-space: nowrap;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-main);
  transition: color 0.2s ease;
}

.main-nav a:hover {
  color: var(--green-700);
}

.main-nav a.is-active {
  color: var(--green-800);
  font-weight: 800;
}

.main-nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 3px;
  border-radius: 2px;
  background: var(--green-700);
}

.btn-header {
  padding: 10px 18px;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* Acceso "Hazte socio" dentro del menú: solo se muestra en móvil,
   donde el botón del header queda oculto por falta de espacio. */

.nav-cta {
  display: none;
}

/* Botón hamburguesa (solo móvil) */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}

.nav-toggle span {
  height: 2px;
  width: 100%;
  background: var(--green-900);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- 4. Hero ---------- */

.hero {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  color: var(--text-inverse);
  /* La foto va como fondo. El degradado de debajo solo se ve mientras la
     imagen carga o si falla, para que el texto blanco nunca quede ilegible. */
  background:
    var(--hero-image),
    linear-gradient(180deg, #4c7a44 0%, #2f5c34 100%);
  background-size: cover;
  background-position: 50% 42%;   /* encuadre: prioriza a los niños */
  background-repeat: no-repeat;
}

/* Capa que oscurece la foto para que el texto blanco tenga contraste
   suficiente. Se refuerza por la izquierda, que es donde está el titular. */

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(8, 30, 19, 0.86) 0%,
      rgba(8, 30, 19, 0.72) 38%,
      rgba(8, 30, 19, 0.38) 70%,
      rgba(8, 30, 19, 0.22) 100%),
    linear-gradient(180deg,
      rgba(8, 30, 19, 0.30) 0%,
      transparent 40%);
}

.hero-content {
  position: relative;
  padding-top: 72px;
  padding-bottom: 56px;
}

.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.12;
  margin-bottom: 18px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.hero-subtitle {
  font-size: 1.15rem;
  margin-bottom: 28px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 36px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 0.95rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

/* ---------- 5. Próximas actividades ---------- */

.section-activities {
  background: var(--bg-soft);
}

.event-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.event-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.event-card-body {
  display: flex;
  gap: 18px;
  padding: 24px;
}

.event-date {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-md);
  background: var(--green-800);
  color: var(--text-inverse);
  line-height: 1.05;
}

.event-day {
  font-size: 1.5rem;
  font-weight: 800;
}

.event-month {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.event-info h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--green-900);
  margin-bottom: 6px;
}

.event-info > p {
  font-size: 0.92rem;
  color: var(--text-soft);
  margin-bottom: 14px;
}

.event-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  font-size: 0.88rem;
  color: var(--text-soft);
}

.event-meta li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.event-meta .icon {
  color: var(--green-700);
}

/* ---------- 6. ¿Qué hace el AFA? ---------- */

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.feature {
  padding: 8px 28px;
  text-align: center;
}

.feature + .feature {
  border-left: 1px solid var(--border);
}

.feature-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
  color: var(--green-700);
}

.feature-icon svg {
  width: 56px;
  height: 56px;
}

.feature h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--green-800);
  margin-bottom: 10px;
}

.feature p {
  font-size: 0.9rem;
  color: var(--text-soft);
}

/* ---------- 7. Conoce a la junta ---------- */

.section-board {
  background: var(--bg-soft);
}

.board-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}

.board-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.board-member strong {
  /* Altura reservada para 2 líneas: mantiene los cargos alineados
     aunque unos nombres ocupen una línea y otros dos. */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 2.8em;
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.3;
  text-wrap: balance;
}

.board-role {
  font-size: 0.8rem;
  color: var(--text-soft);
}

/* Avatar placeholder (sustituir por <img> con foto real cuando exista) */

.avatar {
  position: relative;
  width: 88px;
  height: 88px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--green-100);
  overflow: hidden;
}

.avatar::before {           /* cabeza */
  content: "";
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  width: 32%;
  height: 32%;
  border-radius: 50%;
  background: var(--green-700);
}

.avatar::after {            /* hombros */
  content: "";
  position: absolute;
  bottom: -18%;
  left: 50%;
  transform: translateX(-50%);
  width: 66%;
  height: 46%;
  border-radius: 50%;
  background: var(--green-700);
}

.avatar-b::before,
.avatar-b::after {
  background: var(--green-600);
}

.board-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.board-contact p {
  font-size: 0.92rem;
  color: var(--text-soft);
}

/* ---------- 8. Actualidad AFA ---------- */

.section-header-wrap {
  flex-wrap: wrap;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  padding: 8px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg-soft);
  color: var(--text-main);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.chip:hover {
  border-color: var(--green-600);
  color: var(--green-800);
}

.chip.is-active {
  background: var(--green-800);
  border-color: var(--green-800);
  color: var(--text-inverse);
}

.news-card {
  display: flex;
  overflow: hidden;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.news-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.news-card.is-hidden {
  display: none;
}

/* Miniatura placeholder: sustituir el fondo por una foto real
   (p. ej. background-image: url("../img/noticia-1.jpg")) */

.news-thumb {
  position: relative;
  flex: none;
  width: 42%;
  min-height: 150px;
  background-size: cover;
  background-position: center;
}

.news-thumb-a {
  background-image: linear-gradient(135deg, #f6d365 0%, #d98e4a 60%, #8c5a2b 100%);
}

.news-thumb-b {
  background-image: linear-gradient(135deg, #a8c68f 0%, #6f9660 55%, #3f6b3c 100%);
}

.news-thumb-c {
  background-image: linear-gradient(135deg, #f7c8a0 0%, #dd9660 55%, #a45f2f 100%);
}

.news-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.92);
  color: var(--green-900);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.news-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
}

.news-body h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--green-900);
}

.news-body time {
  font-size: 0.82rem;
  color: var(--text-soft);
}

.news-body .link-arrow {
  margin-top: auto;
}

.news-empty {
  margin-top: 8px;
  text-align: center;
  color: var(--text-soft);
}

/* ---------- 9. CTA: Hazte socio ---------- */

.section-join {
  background: var(--green-800);
  color: var(--text-inverse);
  padding: 48px 0;
}

.join-inner {
  display: flex;
  align-items: center;
  gap: 32px;
}

.join-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-inverse);
}

.join-icon svg {
  width: 52px;
  height: 52px;
}

.join-text {
  flex: 1;
}

.join-text h2 {
  font-size: 1.6rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.join-text p {
  font-size: 1rem;
  opacity: 0.92;
  max-width: 46ch;
}

/* ---------- 10. Footer ---------- */

.site-footer {
  background: var(--bg-page);
  border-top: 1px solid var(--border);
  padding-top: 56px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 40px;
  padding-bottom: 48px;
}

.brand-footer .brand-name small {
  display: block;
}

.brand-footer {
  margin-bottom: 16px;
}

.footer-brand p {
  font-weight: 800;
  color: var(--green-900);
}

.footer-brand small {
  font-weight: 400;
  color: var(--text-soft);
}

.footer-col h3 {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-900);
  margin-bottom: 16px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-col a {
  font-size: 0.92rem;
  color: var(--text-soft);
  transition: color 0.2s ease;
}

.footer-col a:hover {
  color: var(--green-700);
}

.footer-mail {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer-mail .icon {
  color: var(--green-700);
}

/* Mismo motivo que en .link-arrow: subir el alto del objetivo táctil. */
.footer-mail {
  min-height: 32px;
  padding-block: 4px;
}

.footer-social-label {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-soft);
}

.footer-social {
  display: flex;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--green-800);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.footer-social a:hover,
.footer-social a:focus-visible {
  background: var(--green-800);
  color: var(--text-inverse);
}

.footer-social .icon {
  width: 1.25em;
  height: 1.25em;
}

.footer-address {
  margin-top: 16px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-soft);
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding: 18px 0;
}

.footer-bottom p {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-soft);
}

.footer-bottom a:hover {
  color: var(--green-700);
  text-decoration: underline;
}

.footer-bottom .dot {
  margin-inline: 8px;
}

/* ---------- Bloque de la cuota ----------
   Se usa en la PORTADA y en la página de Hazte socio. Por eso vive aquí y no en
   paginas.css: index.html no carga paginas.css, y al tenerlo allí el bloque
   salía sin estilos.

   La idea es que el importe se lea antes que el texto: es el dato que la
   familia viene a buscar. */

.quota-hero {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 40px;
  align-items: start;
}

.quota-price {
  display: flex;
  flex-direction: column;
  padding: 28px 30px 30px;
  border-radius: var(--radius-lg);
  background: var(--green-900);
  color: var(--text-inverse);
  box-shadow: var(--shadow-md);
}

.quota-amount {
  font-size: clamp(2.6rem, 7vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.quota-unit {
  margin-top: 8px;
  font-size: 1rem;
  font-weight: 700;
}

.quota-note {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.86rem;
  line-height: 1.45;
  /* 0.82 sobre el verde 900 mantiene el contraste por encima de 4.5:1 */
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 860px) {
  .quota-hero {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .quota-price {
    /* En móvil la ficha del precio no necesita ocupar todo el alto: se queda
       como una banda compacta arriba. */
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    padding: 22px 24px 24px;
  }

  .quota-note {
    flex-basis: 100%;
    margin-top: 10px;
  }
}

/* Tipografía del texto que acompaña al precio. En las páginas interiores esto
   lo aporta .prose (paginas.css); en la portada no existe, así que se define
   aquí para que el bloque se vea igual en los dos sitios. */

.quota-pitch h2 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--green-900);
  margin-bottom: 12px;
  line-height: 1.25;
}

.quota-pitch p {
  margin-bottom: 16px;
  max-width: 62ch;
}

.quota-pitch p:last-child {
  margin-bottom: 0;
}

.quota-pitch strong {
  color: var(--green-900);
}

/* ---------- 11. Responsive ---------- */

@media (max-width: 1180px) {
  /* Con siete elementos en el menú, el subtítulo de la marca es lo primero
     que sobra: se oculta para que la navegación no se parta en dos líneas. */
  .brand-name small {
    display: none;
  }
}

@media (max-width: 1024px) {
  .cards-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }

  .feature:nth-child(3) {
    border-left: none;
  }

  .board-grid {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 32px;
  }

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

@media (max-width: 860px) {
  /* Menú móvil */
  .nav-toggle {
    display: flex;
    margin-left: auto;
  }

  .btn-header {
    display: none;
  }

  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    background: var(--bg-page);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    display: none;
  }

  .main-nav.is-open {
    display: block;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 12px 24px;
  }

  .main-nav a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }

  .main-nav li:last-child a {
    border-bottom: none;
  }

  .nav-cta {
    display: block;
  }

  .nav-cta a {
    color: var(--green-800);
    font-weight: 800;
  }

  .main-nav a.is-active::after {
    display: none;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .join-inner {
    flex-direction: column;
    text-align: center;
  }

  .join-text p {
    margin-inline: auto;
  }
}

@media (max-width: 900px) {
  /* Imagen más ligera: ahorra unos 60 KB en datos móviles */
  .hero {
    background-image:
      url("../img/cabecera-movil.webp"),
      linear-gradient(180deg, #4c7a44 0%, #2f5c34 100%);
  }

  /* En pantallas estrechas el texto ocupa todo el ancho, así que el degradado
     horizontal deja de servir: la parte derecha de la foto es clara y el texto
     blanco pierde contraste. Aquí se oscurece de forma uniforme.
     Medido: sin esto el contraste baja a 2,2:1; con esto supera el 4,5:1 que
     exige la WCAG para texto normal. */
  .hero-overlay {
    background: linear-gradient(180deg,
      rgba(8, 30, 19, 0.78) 0%,
      rgba(8, 30, 19, 0.70) 45%,
      rgba(8, 30, 19, 0.80) 100%);
  }
}

@media (max-width: 640px) {
  .section {
    padding: 48px 0;
  }

  .cards-grid-3 {
    grid-template-columns: 1fr;
  }

  .features-grid {
    grid-template-columns: 1fr;
  }

  .feature + .feature {
    border-left: none;
    border-top: 1px solid var(--border);
    padding-top: 32px;
  }

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

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .hero {
    min-height: 420px;
  }

  .news-card {
    flex-direction: column;
  }

  .news-thumb {
    width: 100%;
    min-height: 160px;
  }
}

/* ==========================================================================
   FRANJA DEL COLEGIO
   Banda que aparece justo encima del pie en todas las páginas.

   ▸ POR QUÉ EXISTE, Y POR QUÉ AQUÍ.

   La AFA es una asociación de familias del Colegio Atalaya, pero es una
   entidad jurídicamente independiente del centro (así lo dice el aviso
   legal). Esa relación hay que explicarla, no solo enlazarla: una familia
   que llega a esta web tiene que entender de un vistazo que el colegio es
   otra cosa, con su propia web y su propio teléfono.

   Por eso el bloque lleva una frase y no solo un logotipo. Y por eso está
   sobre el pie y NO en la cabecera: en agosto de 2026 se retiró de la
   cabecera el escudo del colegio precisamente porque usar la marca del
   centro en el sitio donde va la marca propia daba a entender que la AFA y
   el colegio eran lo mismo.

   El tono es deliberadamente discreto (fondo suave, botón de contorno) para
   no competir con el bloque verde de «Hazte socio», que en muchas páginas
   queda inmediatamente encima.
   ========================================================================== */

.school-strip {
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  padding: 30px 0;
}

.school-strip-inner {
  display: flex;
  align-items: center;
  gap: 16px 28px;
  flex-wrap: wrap;
}

/* Hueco del logotipo del centro.

   Mientras no haya logotipo, muestra un icono neutro de edificio escolar
   dentro de una tarjeta blanca. NO se dibuja aquí un escudo inventado: un
   logotipo aproximado es peor que ninguno.

   Cuando el colegio facilite el fichero, se rellena colegio.logo en
   js/config.js y js/enlaces-externos.js sustituye el icono por la imagen;
   no hay que tocar el HTML de las doce páginas. */
.school-mark {
  flex: none;
  /* La altura es fija y la anchura se adapta al contenido, con un mínimo
     cuadrado para el icono de reserva y un máximo para que un logotipo
     alargado no se coma la franja. Los logotipos de los centros suelen ser
     más anchos que altos. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  max-width: 170px;
  height: 68px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  color: var(--green-600);
}

.school-mark svg {
  width: 34px;
  height: 34px;
}

/* La ALTURA del logotipo se fija en píxeles y la anchura se deduce de su
   proporción. Con max-height en lugar de height, la caja y la imagen se
   dimensionan la una a partir de la otra y el navegador resuelve el círculo
   dejando el logotipo diminuto (comprobado: 50 px en lugar de 104).
   object-fit mantiene la proporción si además topa con el ancho máximo. */
.school-mark img {
  display: block;
  height: 52px;
  width: auto;
  max-width: 154px;
  object-fit: contain;
}

.school-text {
  flex: 1 1 320px;
  min-width: 0;
}

.school-label {
  display: block;
  margin-bottom: 2px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.school-name {
  margin: 0 0 6px;
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--green-900);
}

.school-note {
  margin: 0;
  max-width: 62ch;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-soft);
}

.school-note a {
  color: var(--green-700);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.school-actions {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

/* El teléfono del centro: en móvil es un enlace que llama, en escritorio
   es simplemente el número escrito. */
.school-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding-block: 4px;
  margin-block: -4px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-soft);
}

.school-phone:hover {
  color: var(--green-700);
}

.school-phone .icon {
  width: 16px;
  height: 16px;
}

/* Flecha de «sale de esta web». Se escribe en el HTML, no con ::after, para
   que también la lean los lectores de pantalla a través del aria-label del
   propio enlace. */
.icon-external {
  width: 15px;
  height: 15px;
  margin-left: 2px;
}

@media (max-width: 700px) {
  .school-strip-inner {
    gap: 18px;
  }

  .school-actions,
  .school-actions .btn {
    width: 100%;
  }

  .school-actions {
    align-items: stretch;
  }

  /* A ancho completo, el rótulo y la flecha se quedarían separados en los
     dos extremos del botón: se agrupan en el centro. */
  .school-actions .btn {
    justify-content: center;
  }

  .school-phone {
    justify-content: center;
  }
}

/* ==========================================================================
   SALTAR AL CONTENIDO
   Primer elemento tabulable de todas las páginas.

   Sin esto, quien navega con teclado tiene que pasar por la marca, los siete
   enlaces del menú y el botón de socio ANTES de llegar al contenido, y eso en
   CADA página que abre. Es el criterio 2.4.1 de la WCAG (evitar bloques).

   Está siempre en el DOM y siempre es accesible: se sale de la pantalla con
   un desplazamiento, no con display:none ni visibility:hidden, porque esas
   dos lo sacarían también del orden de tabulación y dejaría de existir para
   quien lo necesita. Al recibir el foco vuelve a su sitio.
   ========================================================================== */

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 100;
  transform: translate(-50%, -110%);
  padding: 12px 24px;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--green-800);
  color: var(--text-inverse);
  font-size: 0.95rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.skip-link:focus {
  transform: translate(-50%, 0);
}

/* El destino del salto no debe dibujar un contorno al recibir el foco por
   programa: el usuario no ha tabulado hasta él, solo ha aterrizado ahí. */
#contenido:focus {
  outline: none;
}

/* ==========================================================================
   MOVIMIENTO REDUCIDO

   Quien activa «reducir movimiento» en su sistema suele hacerlo por mareos,
   migrañas o vértigo. La web tiene desplazamiento suave en los anclajes,
   transiciones en los botones y el menú móvil desplegándose: nada
   escandaloso, pero el ajuste del sistema es una petición explícita y hay
   que respetarla. Criterio 2.3.3 de la WCAG.

   No se desactiva todo a cero —eso rompe algunos componentes y deja cambios
   de estado sin avisar—, sino que se deja en 0,01s: el cambio ocurre, pero no
   se percibe como movimiento.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* El botón levanta un píxel al pasar por encima: se queda quieto. */
  .btn:hover {
    transform: none;
  }
}


/* ==========================================================================
   AVISO DE PORTADA: CARNET DE SOCIO DIGITAL (octubre de 2026)
   Franja bajo la cabecera de la portada que lleva a paginas/carnet-socio/.
   Se retira junto con su bloque en index.html cuando deje de ser novedad.
   ========================================================================== */

.aviso-portada {
  background: var(--green-50);
  border-bottom: 1px solid var(--green-100);
}

.aviso-portada-inner {
  display: flex;
  align-items: center;
  gap: 16px 20px;
  padding-block: 18px;
}

.aviso-portada-etiqueta {
  flex: none;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--green-700);
  color: var(--text-inverse);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.aviso-portada-texto {
  flex: 1;
  color: var(--text-main);
}

.aviso-portada-texto strong {
  color: var(--green-900);
}

.aviso-portada-btn {
  flex: none;
}

@media (max-width: 720px) {
  .aviso-portada-inner {
    flex-wrap: wrap;
  }

  .aviso-portada-texto {
    flex-basis: 100%;
  }
}

/* ======================================================================
   CRESPÓN NEGRO · SEÑAL DE LUTO  —  añadido el 30/10/2026
   ======================================================================
   Lazo negro a la izquierda del logotipo, en la cabecera de todas las
   páginas. Es un elemento temporal.

   PARA QUITARLO cuando la Junta lo decida, basta con dos cosas:
     1. borrar este bloque entero (desde el comentario hasta el cierre);
     2. borrar el archivo img/crespon-negro.webp.
   No hay que tocar ningún HTML: el crespón se pinta desde aquí, así que
   desaparece de las 14 páginas a la vez.

   Detalles de implementación:
   - Va en ::before de .brand, de modo que entra como primer elemento del
     flex y empuja al monograma; el margin-right negativo compensa el
     gap:12px de .brand y deja una separación óptica de 8px.
   - Está limitado a .site-header a propósito: el pie usa la misma clase
     .brand (con .brand-footer) y ahí no debe salir.
   - Es una imagen de fondo decorativa: no añade texto ni etiqueta alguna,
     tal como se pidió.
   --------------------------------------------------------------------- */

.site-header .brand::before {
  content: "";
  flex: none;
  width: 19px;
  height: 31px;
  margin-right: -4px;
  background: url("../img/crespon-negro.webp") no-repeat center / contain;
}

/* En pantallas muy estrechas la cabecera va justa de sitio: el crespón se
   encoge un poco para no comerle espacio al nombre de la Asociación. */
@media (max-width: 420px) {
  .site-header .brand::before {
    width: 15px;
    height: 25px;
    margin-right: -5px;
  }
}