/* ==========================================================================
   AFA Atalaya — Estilos de las páginas interiores
   Se carga SIEMPRE después de styles.css (que aporta variables y componentes
   comunes: contenedor, botones, tarjetas, header y footer).

   Estructura:
     1. Cabecera de página y migas de pan
     2. Bloques de contenido (prosa, destacados, dos columnas)
     3. Listas de valores / comisiones
     4. Junta directiva ampliada
     5. Calendario de actividades (timeline)
     6. Tarjetas de formularios y listas de documentos
     7. Acordeón (preguntas frecuentes)
     8. Formularios
     9. Paginación
    10. Datos de contacto
    11. Responsive
   ========================================================================== */

/* ---------- 1. Cabecera de página y migas de pan ---------- */

.page-header {
  position: relative;
  padding: 56px 0 48px;
  background: linear-gradient(135deg, var(--green-900) 0%, var(--green-700) 100%);
  color: var(--text-inverse);
  overflow: hidden;
}

/* Textura decorativa sutil */
.page-header::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}

.page-header > .container {
  position: relative;
  z-index: 1;
}

.page-title {
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 12px;
}

.page-lead {
  font-size: 1.08rem;
  max-width: 62ch;
  opacity: 0.94;
}

.breadcrumb {
  margin-bottom: 20px;
  font-size: 0.85rem;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.breadcrumb a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.breadcrumb a:hover {
  color: var(--text-inverse);
}

.breadcrumb [aria-current="page"] {
  font-weight: 700;
}

.breadcrumb .sep {
  opacity: 0.6;
}

/* ---------- 2. Bloques de contenido ---------- */

.prose {
  max-width: 72ch;
}

.prose h2 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--green-900);
  margin-top: 36px;
  margin-bottom: 12px;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--green-800);
  margin-top: 24px;
  margin-bottom: 8px;
}

.prose p {
  margin-bottom: 16px;
  color: var(--text-main);
}

.prose ul {
  margin-bottom: 16px;
  padding-left: 4px;
  list-style: none;
}

.prose ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-600);
}

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

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

/* Recuadro destacado */

.callout {
  display: flex;
  gap: 16px;
  padding: 20px 24px;
  margin: 24px 0;
  border-left: 4px solid var(--green-600);
  border-radius: var(--radius-md);
  background: var(--green-50);
}

.callout .icon {
  flex: none;
  width: 1.5em;
  height: 1.5em;
  color: var(--green-700);
}

.callout p {
  margin: 0;
  font-size: 0.95rem;
}

.callout p + p {
  margin-top: 8px;
}

.callout-warning {
  border-left-color: #c9821f;
  background: #fdf6e8;
}

.callout-warning .icon {
  color: #b0711a;
}

/* Rejilla de dos columnas para contenido + aparte */

.split {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 48px;
  align-items: start;
}

.aside-card {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
}

.aside-card h2,
.aside-card h3 {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-900);
  margin-bottom: 14px;
}

.aside-card dl {
  margin: 0;
  font-size: 0.92rem;
}

.aside-card dt {
  font-weight: 800;
  color: var(--green-800);
}

.aside-card dd {
  margin: 0 0 14px;
  color: var(--text-soft);
}

.aside-card dd:last-child {
  margin-bottom: 0;
}

/* ---------- 3. Listas de valores / comisiones ---------- */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

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

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

.tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: var(--radius-md);
  background: var(--green-50);
  color: var(--green-700);
}

.tile-icon .icon {
  width: 1.5em;
  height: 1.5em;
}

.tile h3 {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--green-900);
  margin-bottom: 8px;
}

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

/* ---------- 4. Junta directiva ampliada ---------- */

.board-full {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.board-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
}

.board-card .avatar {
  width: 64px;
  height: 64px;
  margin: 0;
  flex: none;
}

.board-card-info strong {
  display: block;
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--green-900);
  line-height: 1.3;
}

.board-card-info .board-role {
  display: block;
  margin-top: 2px;
  font-size: 0.85rem;
}

/* ---------- Actividades de cursos anteriores ---------- */

.past-activity {
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--border);
}

.past-activity:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.past-activity-head {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.past-activity-num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: var(--green-800);
  color: var(--text-inverse);
  font-size: 1.15rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.past-activity h2 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--green-900);
  line-height: 1.3;
}

.past-activity .activity-tags {
  margin-bottom: 8px;
}

.past-activity .prose {
  padding-left: 72px;
}

/* Recuadro "Qué aprendimos" que va dentro de cada actividad pasada.
   Lleva también la clase .prose para heredar la tipografía y las viñetas,
   por eso aquí sólo se ajusta la caja y los márgenes. */
.past-activity .learned {
  margin-left: 72px;
  margin-top: 4px;
  padding: 18px 22px;
  background: var(--green-50);
  border-left: 3px solid var(--green-600);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.past-activity .learned h3 {
  margin-top: 0;
  margin-bottom: 10px;
}

.past-activity .learned > *:last-child {
  margin-bottom: 0;
}

.past-activity .learned li {
  margin-bottom: 10px;
}

/* Variante para las actividades cuya memoria aún no está redactada */
.past-activity .learned.is-pending {
  background: var(--bg-soft);
  border-left-color: var(--border);
}

.past-activity .learned.is-pending p {
  color: var(--text-soft);
  font-size: 0.95rem;
}

@media (max-width: 640px) {
  .past-activity .prose {
    padding-left: 0;
  }

  .past-activity .learned {
    margin-left: 0;
    padding: 16px 18px;
  }
}

/* ---------- Comisiones de trabajo ---------- */

.commission-grid {
  display: grid;
  /* min(320px, 100%) en lugar de 320px: en pantallas de 320 px de ancho, una
     columna mínima de 320 px más el padding del contenedor desbordaba y hacía
     que la página se moviera en horizontal. */
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 16px;
}

.commission {
  display: flex;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.commission:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--green-600);
}

.commission-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--green-50);
  color: var(--green-700);
}

.commission-icon .icon {
  width: 1.4em;
  height: 1.4em;
}

.commission h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--green-900);
  margin-bottom: 4px;
  line-height: 1.3;
}

.commission p {
  font-size: 0.9rem;
  color: var(--text-soft);
  line-height: 1.5;
}

/* Comisión anunciada pero todavía sin poner en marcha */

.commission.is-forming {
  background: var(--bg-soft);
}

.commission.is-forming h3::after {
  content: "En formación";
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: var(--green-100);
  color: var(--green-800);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* ---------- 5. Calendario de actividades (timeline) ---------- */

.term-group + .term-group {
  margin-top: 48px;
}

.term-title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--green-100);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--green-900);
}

.term-title .badge {
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  background: var(--green-50);
  color: var(--green-800);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Reutiliza .event-card de styles.css, en una sola columna con más aire */

.activity-list {
  display: grid;
  gap: 16px;
}

.activity-list .event-card-body {
  align-items: flex-start;
}

.activity-list .event-info {
  flex: 1;
}

.activity-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.tag {
  padding: 3px 12px;
  border-radius: var(--radius-pill);
  background: var(--green-50);
  color: var(--green-800);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tag-family    { background: #e7f0fb; color: #1c4f86; }
.tag-kids      { background: #fdeee3; color: #9c5620; }
.tag-formation { background: #f0e9f9; color: #5a3a8a; }
.tag-org       { background: var(--green-50); color: var(--green-800); }

/* ---------- Página de detalle de una actividad ---------- */

/* Rejilla de datos clave (cuándo, dónde, para quién, inscripción) */

.key-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

.key-fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
}

.key-fact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  border-radius: var(--radius-md);
  background: var(--green-50);
  color: var(--green-700);
}

.key-fact-icon .icon {
  width: 1.35em;
  height: 1.35em;
}

.key-fact-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-700);
}

.key-fact strong {
  font-size: 1rem;
  font-weight: 800;
  color: var(--green-900);
  line-height: 1.35;
}

.key-fact-note {
  font-size: 0.85rem;
  color: var(--text-soft);
  line-height: 1.45;
}

/* Botonera de la actividad */

.activity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}

/* Orden del día */

.agenda {
  display: grid;
  gap: 0;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  counter-reset: agenda;
}

.agenda li {
  position: relative;
  display: flex;
  gap: 20px;
  padding: 0 0 22px 0;
}

/* Línea vertical que une los puntos del orden del día */
.agenda li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 27px;
  top: 30px;
  bottom: 0;
  width: 2px;
  background: var(--green-100);
}

.agenda-time {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--green-800);
  color: var(--text-inverse);
  font-size: 0.78rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.agenda li strong {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: var(--green-900);
  line-height: 1.4;
}

.agenda li p {
  margin: 4px 0 0;
  font-size: 0.92rem;
  color: var(--text-soft);
}

/* Etiqueta neutra (por ejemplo "Entrada libre") */

.page-header .activity-tags {
  margin-bottom: 14px;
}

.page-header .tag {
  background: rgba(255, 255, 255, 0.18);
  color: var(--text-inverse);
}

/* Estado "pasada" */

.event-card.is-past {
  opacity: 0.62;
}

.event-card.is-past .event-date {
  background: var(--text-soft);
}

/* ---------- 6. Tarjetas de formularios y documentos ---------- */

.form-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.form-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

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

.form-card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--green-900);
  margin-bottom: 8px;
}

.form-card p {
  font-size: 0.92rem;
  color: var(--text-soft);
  margin-bottom: 18px;
}

.form-card .btn {
  align-self: flex-start;
  margin-top: auto;
}

.form-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green-700);
}

/* Lista de documentos descargables */

.doc-list {
  display: grid;
  gap: 12px;
}

.doc-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.doc-item:hover {
  border-color: var(--green-600);
  background: var(--green-50);
}

.doc-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--green-50);
  color: var(--green-700);
}

.doc-info {
  flex: 1;
  min-width: 0;
}

.doc-info strong {
  display: block;
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--green-900);
}

.doc-info span {
  font-size: 0.82rem;
  color: var(--text-soft);
}

.doc-item .link-arrow {
  flex: none;
}

/* Documento aún no publicado: el enlace se muestra apagado y no es clicable.
   Al subir el PDF a /docs, se quita la clase .is-pending del enlace. */

.doc-pending {
  flex: none;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-soft);
  display: none;
}

.doc-item.is-pending {
  opacity: 0.62;
  pointer-events: none;
  background: var(--bg-soft);
}

.doc-item.is-pending .doc-action {
  display: none;
}

.doc-item.is-pending .doc-pending {
  display: inline-flex;
}

/* ---------- 7. Acordeón ---------- */

.accordion {
  display: grid;
  gap: 12px;
  max-width: 76ch;
}

.accordion-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  overflow: hidden;
}

.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px 20px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  color: var(--green-900);
  text-align: left;
  cursor: pointer;
}

.accordion-trigger:hover {
  background: var(--green-50);
}

.accordion-trigger .chevron {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  color: var(--green-700);
  transition: transform 0.25s ease;
}

.accordion-trigger[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.accordion-panel {
  padding: 0 20px 20px;
  font-size: 0.95rem;
  color: var(--text-soft);
}

.accordion-panel[hidden] {
  display: none;
}

.accordion-panel p + p {
  margin-top: 10px;
}

/* ---------- 8. Formularios ---------- */

.form {
  display: grid;
  gap: 20px;
  max-width: 640px;
}

.field {
  display: grid;
  gap: 6px;
}

.field label {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--green-900);
}

.field .req {
  color: #b3261e;
}

.field .hint {
  font-size: 0.82rem;
  color: var(--text-soft);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--text-main);
  background: var(--bg-page);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green-600);
  box-shadow: 0 0 0 3px rgba(37, 127, 71, 0.18);
}

.field textarea {
  min-height: 150px;
  resize: vertical;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Casilla de verificación */

.field-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.field-check input {
  /* 24 px es el mínimo de la WCAG 2.5.8 para un objetivo táctil, y esta es la
     casilla del consentimiento: si no se puede pulsar bien, no se puede enviar
     el formulario. */
  width: 24px;
  height: 24px;
  margin-top: 0;
  flex: none;
  accent-color: var(--green-700);
}

.field-check label {
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--text-soft);
}

/* Mensajes de validación */

.field-error {
  font-size: 0.82rem;
  font-weight: 700;
  color: #b3261e;
}

.field-error[hidden] {
  display: none;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: #b3261e;
}

.form-status {
  padding: 16px 20px;
  border-radius: var(--radius-md);
  background: var(--green-50);
  border-left: 4px solid var(--green-600);
  font-size: 0.95rem;
}

.form-status[hidden] {
  display: none;
}

.form-status-error {
  background: #fdecea;
  border-left-color: #b3261e;
}

/* Trampa anti-spam: campo que ninguna persona ve ni puede rellenar, pero que
   muchos robots completan automáticamente. Si llega marcado, se descarta el
   envío (lo comprueba js/formulario-contacto.js). */

.honeypot {
  display: none !important;
}

/* Oculta un elemento a la vista manteniéndolo para lectores de pantalla. */

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

/* Foco visible general (accesibilidad) */

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--green-600);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 9. Paginación ---------- */

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
}

.pagination a,
.pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-main);
}

.pagination a:hover {
  border-color: var(--green-600);
  color: var(--green-800);
  background: var(--green-50);
}

.pagination [aria-current="page"] {
  background: var(--green-800);
  border-color: var(--green-800);
  color: var(--text-inverse);
}

.pagination .is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* ---------- 10. Datos de contacto ---------- */

.contact-list {
  display: grid;
  gap: 20px;
}

.contact-item {
  display: flex;
  gap: 16px;
}

.contact-item .doc-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.contact-item strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--green-900);
  margin-bottom: 2px;
}

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

.contact-item a {
  color: var(--green-700);
  font-weight: 700;
}

.contact-item a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Bloque "Cómo llegar": dirección postal y enlace al mapa.
   Se usa en lugar de un iframe de Google Maps para no compartir la IP de quien
   visita la web sin que haya hecho nada (ver el comentario en contacto). */

.location-card {
  margin-top: 28px;
  padding: 24px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--green-600);
  border-radius: var(--radius-lg);
  background: var(--green-50);
}

.location-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-900);
}

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

.location-card address {
  margin-bottom: 18px;
  font-style: normal;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text-main);
}

/* La dirección del apartado de datos de contacto */

.contact-item address {
  margin: 0;
  font-style: normal;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-soft);
}

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

@media (max-width: 1024px) {
  .split {
    grid-template-columns: 1fr;
    gap: 32px;
  }

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

@media (max-width: 640px) {
  .page-header {
    padding: 40px 0 36px;
  }

  .agenda li {
    flex-direction: column;
    gap: 8px;
  }

  .agenda li:not(:last-child)::before {
    display: none;
  }

  .activity-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .board-full {
    grid-template-columns: 1fr;
  }

  .field-row {
    grid-template-columns: 1fr;
  }

  .doc-item {
    flex-wrap: wrap;
  }

  .doc-item .link-arrow {
    width: 100%;
  }
}

/* ==========================================================================
   PÁGINAS LEGALES (política de privacidad y aviso legal)
   ========================================================================== */

/* ---------- Índice de la página ---------- */

.legal-toc {
  margin-bottom: 36px;
  padding: 20px 24px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.legal-toc h2 {
  margin: 0 0 12px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.legal-toc ol {
  margin: 0;
  padding-left: 22px;
  list-style: decimal;
  columns: 2;
  column-gap: 32px;
}

.legal-toc li {
  margin-bottom: 6px;
  break-inside: avoid;
  font-size: 0.94rem;
}

.legal-toc a {
  color: var(--green-800);
  text-decoration: none;
}

.legal-toc a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Ficha de datos del titular ---------- */

.legal-id {
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr;
  gap: 8px 20px;
  font-size: 0.96rem;
}

.legal-id dt {
  font-weight: 800;
  color: var(--green-900);
}

.legal-id dd {
  margin: 0;
}

/* ---------- Tabla de tratamientos ----------
   Se usa para el resumen de qué datos se tratan, con qué finalidad, con qué
   base jurídica y durante cuánto tiempo. En móvil no se puede reducir más sin
   que quede ilegible, así que se permite el desplazamiento horizontal. */

.legal-table-wrap {
  margin-bottom: 20px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

/* La tabla vive dentro de .prose, que está limitada a 72ch (~780 px) para que
   el texto se lea cómodo. Con cuatro columnas eso queda muy estrecho, así que
   en pantallas anchas la tabla se sale de esa limitación y ocupa todo el
   contenedor: 1120 px menos los 24 px de padding a cada lado. */
@media (min-width: 1120px) {
  .legal-table-wrap {
    width: 1072px;
  }
}

.legal-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.legal-table th,
.legal-table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.legal-table thead th {
  background: var(--green-50);
  color: var(--green-900);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.legal-table tbody tr:last-child th,
.legal-table tbody tr:last-child td {
  border-bottom: 0;
}

.legal-table tbody th {
  font-weight: 800;
  color: var(--green-900);
  white-space: normal;
}

/* ---------- Páginas legales en móvil ----------
   Una tabla de cuatro columnas no cabe en un móvil, y obligar a desplazarla a
   los lados en una página que las familias van a leer desde el teléfono es
   mala idea. Por debajo de 700 px la tabla se convierte en una lista de
   fichas: cada fila es un bloque con su título, y cada dato lleva delante su
   etiqueta, que sale del atributo data-label del HTML. */

@media (max-width: 700px) {
  .legal-toc ol {
    columns: 1;
  }

  /* La ficha de datos del titular pasa a una sola columna, y las direcciones
     de correo largas se parten en lugar de desbordar la pantalla. */
  .legal-id {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .legal-id dt {
    margin-top: 14px;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-soft);
  }

  .legal-id dt:first-child {
    margin-top: 0;
  }

  .legal-id dd {
    overflow-wrap: anywhere;
  }

  .legal-table-wrap {
    overflow-x: visible;
    border: 0;
  }

  .legal-table {
    min-width: 0;
    display: block;
  }

  .legal-table thead {
    display: none; /* los encabezados los aporta ::before de cada celda */
  }

  .legal-table tbody,
  .legal-table tbody tr {
    display: block;
  }

  .legal-table tbody tr {
    margin-bottom: 16px;
    padding: 4px 0 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
  }

  .legal-table tbody tr:last-child {
    margin-bottom: 0;
  }

  .legal-table tbody th,
  .legal-table tbody td {
    display: block;
    padding: 8px 16px;
    border-bottom: 0;
  }

  .legal-table tbody th {
    padding-top: 12px;
    font-size: 1rem;
  }

  .legal-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-soft);
  }
}

/* ---------- Fecha de última actualización ---------- */

.legal-updated {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--text-soft);
}

/* ---------- Títulos de grupo en las preguntas frecuentes ----------
   Agrupan el acordeón por temas (Ser socio, El dinero, Participar…) para que
   trece preguntas seguidas no se lean como un muro. */

.faq-group-title {
  margin: 44px 0 14px;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-700);
}

.faq-group-title:first-of-type {
  margin-top: 0;
}

/* ---------- Fotos de actividades ----------
   Las fotos van con <figure> y <figcaption> porque el pie hace falta: dice de
   qué actividad es y, cuando toca, que no aparece nadie identificable.

   ⚠ REGLA: aquí solo entran fotos sin personas identificables o con
   autorización de imagen firmada de todas las que aparecen. Ver la política
   de privacidad, apartado 9. */

.activity-photo {
  margin: 24px 0;
}

.activity-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  background: var(--bg-soft);
}

.activity-photo figcaption {
  margin-top: 10px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-soft);
}

/* Dentro de una actividad del histórico, la foto se alinea con el texto */
.past-activity .activity-photo {
  margin-left: 72px;
  max-width: 520px;
}

@media (max-width: 640px) {
  .past-activity .activity-photo {
    margin-left: 0;
    max-width: none;
  }
}

/* ==========================================================================
   DATOS DE PAGO DE UNA ACTIVIDAD
   Caja destacada con el número de cuenta, el titular y el concepto.

   Se usa en las fichas de actividad que se pagan por transferencia. Está
   pensada para que el número se lea sin esfuerzo y se copie sin errores:
   tipografía monoespaciada, tamaño grande y un botón "Copiar" que añade
   js/copiar.js cuando el navegador lo permite.
   ========================================================================== */

.pay-box {
  border: 2px solid var(--green-600);
  border-radius: var(--radius-md);
  background: var(--green-50);
  padding: 24px;
  margin: 0;
}

.pay-box > h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  color: var(--green-900);
}

.pay-box .pay-intro {
  margin: 0 0 20px;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--text-soft);
}

.pay-row {
  padding: 14px 0;
  border-top: 1px solid var(--green-100);
}

.pay-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.pay-row:last-child {
  padding-bottom: 0;
}

.pay-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* El valor y el botón "Copiar" comparten línea y se envuelven en móvil */
.pay-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.pay-value > [data-copiar],
.pay-value > strong {
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--green-900);
  overflow-wrap: anywhere;
}

/* El IBAN y el concepto, en monoespaciada: los caracteres no se confunden
   entre sí (cero contra o, uno contra ele) y eso importa cuando el dato se
   va a teclear en una app del banco. */
.pay-mono {
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo,
    Consolas, monospace;
  letter-spacing: 0.02em;
}

.btn-copiar {
  flex: none;
  min-height: 32px;
  padding: 5px 14px;
  border: 1px solid var(--green-600);
  border-radius: var(--radius-pill);
  background: var(--bg-page);
  color: var(--green-700);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.btn-copiar:hover {
  background: var(--green-100);
}

.btn-copiar.is-done {
  border-color: var(--green-700);
  background: var(--green-700);
  color: var(--text-inverse);
}

/* ---------- Pasos numerados de una inscripción ---------- */

.steps {
  list-style: none;
  counter-reset: paso;
  margin: 20px 0 0;
  padding: 0;
}

.steps > li {
  position: relative;
  counter-increment: paso;
  padding: 0 0 22px 52px;
}

/* La línea vertical que une los pasos; el último no la lleva */
.steps > li::after {
  content: "";
  position: absolute;
  top: 34px;
  bottom: 4px;
  left: 16px;
  width: 2px;
  background: var(--green-100);
}

.steps > li:last-child {
  padding-bottom: 0;
}

.steps > li:last-child::after {
  display: none;
}

.steps > li::before {
  content: counter(paso);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--green-600);
  color: var(--text-inverse);
  font-size: 0.95rem;
  font-weight: 800;
}

.steps h3 {
  margin: 5px 0 6px;
  font-size: 1.02rem;
}

.steps p,
.steps ul {
  margin: 0 0 8px;
}

.steps > li > *:last-child {
  margin-bottom: 0;
}

/* Dentro de una actividad del histórico, la tabla NO se sale de la columna de
   texto. El ensanchamiento a 1072 px de .legal-table-wrap está pensado para
   las tablas de cuatro columnas de las páginas legales; aquí el bloque ya
   está sangrado por el número de la actividad y una tabla de tres columnas
   cabe de sobra en los 72ch del texto. */
@media (min-width: 1120px) {
  .past-activity .legal-table-wrap {
    width: auto;
  }
}

/* Etiqueta de actividad terminada. Gris deliberadamente apagado: compite con
   las etiquetas de categoría, que sí llevan color, y lo que tiene que
   transmitir es «esto ya pasó», no llamar la atención.
   Contraste comprobado: 7,36:1 sobre su propio fondo (hace falta 4,5:1). */
.tag-past { background: #e9ebe9; color: #454c48; }

/* Los hijos de una rejilla no pueden encogerse por debajo de su contenido a
   menos que se les diga. Es el `min-width: auto` que CSS Grid pone por
   defecto, y provoca desbordamientos de pocos píxeles cuando dentro hay algo
   que no parte: un botón con una palabra larga, un correo o un IBAN.

   En la ficha de la ludoteca desbordaba 3px a 320px por el botón de
   «Escribir el correo de inscripción». Son tres píxeles, pero el efecto es
   una barra de desplazamiento horizontal en toda la página, que en un móvil
   se nota al arrastrar. */
.split > *,
.quota-hero > * {
  min-width: 0;
}

/* Y lo que de verdad no cabe, que parta. Los botones de esta web llevan texto
   en mayúsculas con espaciado, así que una palabra como INSCRIPCIÓN ocupa
   mucho más de lo que parece. */
.btn {
  overflow-wrap: anywhere;
}

/* ==========================================================================
   CARNET DE SOCIO (/carnet/) Y VALIDACIÓN (/validar/)
   Añadido en octubre de 2026. Las dos páginas están en la raíz de la web.
   La lógica está en js/carnet-token.js, js/carnet.js y js/validar.js.
   ========================================================================== */

/* Texto solo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- /carnet/ ---------- */

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

.carnet-cargando,
.carnet-sin {
  max-width: 460px;
  margin: 0 auto;
  text-align: center;
}

.carnet-sin h1 {
  margin-bottom: 12px;
  font-size: 1.8rem;
  color: var(--green-900);
}

.carnet-sin p + p {
  margin-top: 12px;
}

.carnet-sin a,
.carnet-ayuda a {
  color: var(--green-700);
  font-weight: 700;
  text-decoration: underline;
}

.carnet-zona {
  max-width: 420px;
  margin: 0 auto;
}

.carnet {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow-md);
}

.carnet-cabecera {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(135deg, var(--green-900) 0%, var(--green-700) 100%);
  color: var(--text-inverse);
}

.carnet-cabecera .brand-mark {
  background: rgba(255, 255, 255, 0.16);
}

.carnet-cabecera strong {
  display: block;
  font-size: 1.1rem;
  line-height: 1.2;
}

.carnet-cabecera small {
  display: block;
  font-size: 0.8rem;
  opacity: 0.9;
}

.carnet-cuerpo {
  padding: 20px 20px 4px;
}

.carnet-etiqueta {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-700);
}

.carnet-nombre {
  margin: 4px 0 8px;
  font-size: clamp(1.5rem, 6.5vw, 1.9rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-main);
  overflow-wrap: anywhere;
}

.carnet-curso {
  font-weight: 700;
}

.carnet-caducidad,
.carnet-numero {
  color: var(--text-soft);
  font-size: 0.95rem;
}

.carnet-numero {
  font-variant-numeric: tabular-nums;
}

.carnet-qr {
  padding: 12px 16px 16px;
}

.carnet-qr svg {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

.carnet-sello {
  margin: 0;
  padding: 12px 20px;
  background: #fdecea;
  color: #8c1d18;
  font-weight: 700;
  text-align: center;
}

.carnet.is-prueba .carnet-sello {
  background: #fff4d6;
  color: #6b4a00;
}

/* Caducado o de baja: el carnet se ve apagado y sin QR legible */
.carnet.is-caducado .carnet-cuerpo,
.carnet.is-caducado .carnet-cabecera {
  filter: grayscale(1);
  opacity: 0.7;
}

.carnet.is-caducado .carnet-qr {
  display: none;
}

.carnet-nota {
  margin: 16px 4px 0;
  color: var(--text-soft);
  font-size: 0.95rem;
  text-align: center;
}

.carnet-ayuda {
  margin-top: 32px;
}

.carnet-ayuda h2 {
  margin: 24px 0 8px;
  font-size: 1.15rem;
  color: var(--green-900);
}

.carnet-ayuda p + p {
  margin-top: 12px;
}

.carnet-desplegable {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card-bg);
}

.carnet-desplegable summary {
  padding: 12px 16px;
  font-weight: 700;
  cursor: pointer;
}

.carnet-desplegable ol {
  margin: 0;
  padding: 0 16px 14px 36px;
}

.carnet-desplegable li + li {
  margin-top: 4px;
}

.carnet-borrar {
  font-size: 0.8rem;
  padding: 8px 16px;
}

/* ---------- /validar/ ---------- */
/* Página sin menú, pensada para leerse de un vistazo en el móvil del comercio */

.validar-body {
  background: var(--bg-soft);
}

.validar-header {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto;
  padding: 14px 16px;
}

.validar-header-texto strong {
  display: block;
  line-height: 1.2;
  color: var(--green-900);
}

.validar-header-texto small {
  display: block;
  color: var(--text-soft);
  font-size: 0.82rem;
}

.validar-main {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 16px;
}

.validar-panel {
  padding: 28px 20px 20px;
  border-radius: var(--radius-lg);
  background: #5c6660;
  color: var(--text-inverse);
  text-align: center;
  box-shadow: var(--shadow-md);
}

.validar-panel.is-valido   { background: #17752f; }
.validar-panel.is-invalido { background: #b3261e; }
.validar-panel.is-error    { background: #8a5a00; }
.validar-panel.is-vacio,
.validar-panel.is-cargando { background: var(--green-900); }

.validar-icono {
  display: inline-grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
}

.validar-icono:empty {
  display: none;
}

.validar-titulo {
  margin-top: 10px;
  font-size: clamp(2rem, 11vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0.02em;
}

.validar-panel.is-error .validar-titulo,
.validar-panel.is-vacio .validar-titulo {
  font-size: clamp(1.4rem, 7vw, 1.9rem);
}

.validar-motivo {
  margin-top: 8px;
  font-size: 1.1rem;
  font-weight: 700;
}

.validar-motivo:empty {
  display: none;
}

.validar-prueba {
  margin: 16px 0 0;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: #ffd84d;
  color: #3d2c00;
  font-weight: 800;
}

.validar-datos {
  margin: 20px 0 0;
  padding: 16px;
  border-radius: var(--radius-md);
  background: var(--card-bg);
  color: var(--text-main);
}

.validar-datos dd {
  margin: 0;
}

.validar-datos dd + dd {
  margin-top: 2px;
  color: var(--text-soft);
}

.validar-datos .validar-nombre {
  margin-bottom: 6px;
  font-size: clamp(1.4rem, 6.5vw, 1.8rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-main);
  overflow-wrap: anywhere;
}

.validar-datos .validar-nombre + dd {
  font-weight: 700;
  color: var(--text-main);
}

.validar-reloj {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  font-size: 1.9rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.validar-reloj-fecha {
  font-size: 0.95rem;
  font-weight: 600;
  opacity: 0.9;
}

/* Punto que late: otra señal de que la pantalla está viva */
.validar-reloj-punto {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  animation: validar-latido 1s ease-in-out infinite;
}

@keyframes validar-latido {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.25; transform: scale(0.7); }
}

@media (prefers-reduced-motion: reduce) {
  .validar-reloj-punto { animation: none; }
}

.validar-aviso {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: #fff4d6;
  color: #5a3e00;
  font-size: 0.95rem;
}

.validar-instrucciones {
  margin-top: 24px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card-bg);
}

.validar-instrucciones h2 {
  margin-bottom: 8px;
  font-size: 1.05rem;
  color: var(--green-900);
}

.validar-instrucciones ol {
  margin: 0;
  padding-left: 20px;
}

.validar-instrucciones li + li {
  margin-top: 4px;
}

.validar-footer {
  max-width: 520px;
  margin: 0 auto;
  padding: 24px 16px 32px;
  color: var(--text-soft);
  font-size: 0.85rem;
  text-align: center;
}

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

.validar-nowrap {
  white-space: nowrap;
}

/* Mensaje de estado del botón de exclusión de la analítica (página de
   privacidad). Antes reutilizaba .legal-updated, que lleva una línea
   separadora pensada para cerrar la página: dibujaba una raya entre el botón
   y su propio mensaje, como si fueran cosas distintas. */
.hint-analitica {
  margin-top: 10px;
  font-size: 0.9rem;
  color: var(--text-soft);
  min-height: 1.4em;     /* reserva el hueco para que el texto no empuje nada */
}