/* ============================================================
   PÁGINAS LEGALES · Club Atletismo Apolana
   ------------------------------------------------------------
   Aviso legal, privacidad, condiciones de uso y cookies.

   Un solo archivo para las cinco páginas: si mañana hay que
   cambiar cómo se lee un apartado, se cambia aquí y cambia en
   todas. Nada de esto se repite dentro de las páginas.

   La forma no es inventada: es la misma que el impreso de
   autorización que las familias ya firman en papel —barra navy
   numerada, ficha de etiqueta y valor, notas al margen—. Quien
   ha firmado ese papel reconoce esta página al abrirla.
   ============================================================ */

/* --- Sub-navegación entre las cuatro páginas legales ---------
   Mismo patrón que /club: una banda crema con los hermanos.
   48 px de alto de pulsación: en el móvil se navega con el pulgar. */
.leg-subnav {
  background: var(--crema-banda);
  border-bottom: 1px solid var(--linea-marcada);
}
.leg-subnav .contenedor {
  display: flex; gap: 4px; overflow-x: auto;
  /* El scroll horizontal es de la banda, no de la página: por eso
     los enlaces no se recortan ni se salen por la derecha. */
  -webkit-overflow-scrolling: touch;
  /* Se alinea con la columna de lectura (780 px centrada): así las
     pestañas y el título arrancan a la misma altura, no la pestaña a la
     izquierda y el texto centrado. El +2·margen conserva el padding. */
  max-width: calc(780px + var(--margen-lateral) * 2);
}
.leg-subnav a {
  display: flex; align-items: center;
  min-height: 48px; padding-inline: 12px;
  color: var(--texto-suave); font-size: 14px; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.leg-subnav a:first-child { padding-left: 0; }
.leg-subnav a.activo { color: var(--azul-oscuro); font-weight: 600; border-bottom-color: var(--azul-filete); }
.leg-subnav a:hover { color: var(--azul-oscuro); }

/* --- Cabecera de la página ---------------------------------- */
.leg-cab { display: flex; flex-direction: column; gap: 10px; max-width: 780px; margin-inline: auto; }
.leg-cab .titular {
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: clamp(42px, 7vw, 62px); line-height: 0.94;
  text-transform: uppercase; color: var(--navy);
  /* Los títulos largos («Política de privacidad») parten por la
     palabra entera; sin esto, en 320 px se corta a mitad. */
  overflow-wrap: break-word;
}
.leg-cab p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--texto); }
.leg-fecha {
  font-size: 13px; color: var(--texto-suave);
  border-top: 1px solid var(--linea); padding-top: 12px; margin-top: 4px;
}

/* --- El documento -------------------------------------------
   780 px es el ancho al que una línea de texto cabe de un
   vistazo. Más ancho y el ojo pierde el renglón al volver. */
.leg-doc { max-width: 780px; margin-inline: auto; margin-top: clamp(28px, 5vw, 40px); }
.leg-doc p,
.leg-doc li { font-size: 16.5px; line-height: 1.7; color: var(--texto); }
.leg-doc p { margin: 0 0 14px; }
.leg-doc p:last-child { margin-bottom: 0; }
.leg-doc a { color: var(--azul-oscuro); font-weight: 600; overflow-wrap: anywhere; }
.leg-doc a:hover { color: var(--azul-hover); }
.leg-doc strong { color: var(--navy); font-weight: 600; }

/* Apartado: la barra navy numerada del impreso del club.
   El número no es decoración: es la referencia con la que se
   cita un apartado («lo del punto 4»), igual que en el papel. */
.leg-ap { margin-top: clamp(30px, 5vw, 42px); scroll-margin-top: 90px; }
.leg-ap:first-child { margin-top: 0; }
.leg-ap > h2 {
  background: var(--navy); color: #fff;
  font-family: var(--fuente-titulo); font-weight: 700;
  font-size: 21px; letter-spacing: .02em; text-transform: uppercase;
  line-height: 1.15; margin: 0 0 18px;
  padding: 11px 16px; border-radius: var(--radio-dentro);
}
.leg-ap > h2 .n { color: rgba(255,255,255,0.55); margin-right: 8px; }
.leg-ap h3 {
  font-size: 17px; font-weight: 600; color: var(--navy);
  margin: 24px 0 8px; line-height: 1.3;
}
.leg-ap h3:first-of-type { margin-top: 0; }

/* Listas: sin viñeta de sistema, con un filete azul corto.
   Se usan solo donde el contenido es de verdad una lista
   (los derechos, los destinatarios), no para trocear párrafos. */
.leg-lista { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.leg-lista li { position: relative; padding-left: 18px; }
.leg-lista li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 8px; height: 2px; background: var(--azul-filete); border-radius: 2px;
}

/* Ficha de etiqueta y valor · igual que el impreso en papel */
.leg-ficha {
  border: 1px solid var(--linea); border-radius: var(--radio-dentro);
  overflow: hidden; margin: 0 0 16px; background: #fff;
}
.leg-ficha-fila { display: grid; grid-template-columns: 190px 1fr; border-top: 1px solid var(--linea); }
.leg-ficha-fila:first-child { border-top: 0; }
.leg-ficha-et {
  background: var(--crema-banda); color: var(--navy);
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 14px 16px; line-height: 1.4;
}
.leg-ficha-va { padding: 14px 16px; font-size: 16px; line-height: 1.6; color: var(--texto); min-width: 0; }
.leg-ficha-va p { font-size: 16px; margin-bottom: 10px; }
.leg-ficha-va p:last-child { margin-bottom: 0; }
.leg-ficha-va .leg-lista { margin-bottom: 0; }

/* Nota al margen · el recuadro con filete lateral del impreso */
.leg-nota {
  border-left: 3px solid var(--azul-filete);
  background: #fff; border-radius: 0 var(--radio-dentro) var(--radio-dentro) 0;
  padding: 14px 18px; margin: 0 0 16px;
  box-shadow: var(--sombra-suave);
}
.leg-nota p { font-size: 16px; }
.leg-nota--ojo { border-left-color: var(--ambar); background: var(--ambar-fondo); }
.leg-nota--ojo p { color: var(--aviso-texto); }

/* Resumen de arriba · lo que casi todo el mundo viene a leer */
.leg-corto {
  background: var(--crema-banda); border: 1px solid var(--linea-marcada);
  border-radius: var(--radio); padding: clamp(18px, 3vw, 24px);
  margin: 0 0 clamp(26px, 4vw, 34px);
}
.leg-corto .eyebrow { display: block; margin-bottom: 10px; }
.leg-corto p { font-size: 16.5px; margin-bottom: 10px; }
.leg-corto p:last-child { margin-bottom: 0; }

/* Índice de apartados. Solo en las páginas largas. */
.leg-indice { margin: 0 0 clamp(26px, 4vw, 34px); }
.leg-indice .eyebrow { display: block; margin-bottom: 8px; }
.leg-indice ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 26px; }
.leg-indice li { break-inside: avoid; counter-increment: leg-i; }
.leg-indice ol { counter-reset: leg-i; }
.leg-indice a {
  display: flex; align-items: center; gap: 9px;
  min-height: 44px; font-size: 15px; font-weight: 400;
  color: var(--texto); border-bottom: 1px solid var(--linea);
}
.leg-indice a:hover { color: var(--azul-oscuro); }
.leg-indice a::before {
  content: counter(leg-i);
  font-size: 12px; color: var(--azul-oscuro); font-variant-numeric: tabular-nums;
  width: 16px; flex: none;
}

/* Hueco pendiente de rellenar. A la vista a propósito: es mejor
   un hueco que se ve que un dato que alguien se inventó. */
.leg-falta {
  display: inline-block;
  background: var(--aviso-fondo); border: 1px dashed var(--aviso-borde);
  color: var(--aviso-titulo); font-weight: 600;
  border-radius: var(--radio-dentro); padding: 3px 9px;
  font-size: 14px; line-height: 1.45;
}

/* Cierre de la página: a quién se escribe */
.leg-cierre {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  max-width: 780px; margin-inline: auto;
  border-top: 1px solid var(--linea); padding-top: clamp(24px, 4vw, 30px);
  margin-top: clamp(32px, 5vw, 44px);
}
.leg-cierre p { margin: 0; font-size: 16px; color: var(--texto); }

/* Portada de /legal: las cuatro páginas como cuatro puertas */
.leg-puertas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 780px; margin-inline: auto; margin-top: clamp(24px, 4vw, 32px); }
.leg-puerta {
  display: flex; flex-direction: column; gap: 6px;
  background: #fff; border: 1px solid var(--crema-media); border-radius: var(--radio);
  padding: 20px 22px; min-height: 44px;
  box-shadow: 0 18px 40px -36px rgba(46,66,86,0.5);
  transition: border-color .2s ease, transform .2s ease;
}
.leg-puerta:hover { border-color: var(--azul-filete); transform: translateY(-1px); }
.leg-puerta .que { font-family: var(--fuente-titulo); font-weight: 700; font-size: 24px; text-transform: uppercase; color: var(--navy); line-height: 1.05; }
.leg-puerta .det { font-size: 15px; line-height: 1.5; color: var(--texto-suave); }

/* ============================================================
   PANTALLAS ESTRECHAS
   ============================================================ */
@media (max-width: 700px) {
  /* La ficha deja de ser dos columnas: a 375 px, 190 px de
     etiqueta dejaban el valor en un canalón de tres palabras. */
  .leg-ficha-fila { grid-template-columns: 1fr; }
  .leg-ficha-et { padding-bottom: 6px; background: transparent; border-bottom: 0; }
  .leg-ficha-va { padding-top: 0; }
  .leg-ficha-fila + .leg-ficha-fila { border-top: 1px solid var(--linea); }
  .leg-indice ol { columns: 1; }
  .leg-puertas { grid-template-columns: 1fr; }
  .leg-ap > h2 { font-size: 19px; padding: 10px 14px; }
  .leg-cierre .btn { width: 100%; text-align: center; }
}

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