/* sitio.css — las pantallas.
 *
 * base.css puso la casa; aquí van los cuartos: el héroe, las cifras, las
 * secciones, las tarjetas, las categorías, los niveles de patrocinio, los
 * pasos y las páginas de error. Nada de esto se usa en todas las pantallas,
 * por eso no vive allá.
 */

/* ── Héroe ─────────────────────────────────────────────────────────────── */

.heroe {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--azul-hondo) 0%, var(--azul) 58%, #1F6389 100%);
  color: var(--blanco);
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(3.5rem, 9vw, 6.5rem);
}

/* El resplandor magenta es lo que le da vida al bloque. Vive en un elemento
   propio y aria-hidden porque es decoración pura: un lector de pantalla no
   tiene nada que anunciar aquí. */
.heroe__brillo {
  position: absolute; inset: auto -12% -35% auto;
  width: min(760px, 88vw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(186, 76, 198, .55) 0%, rgba(186, 76, 198, 0) 68%);
  pointer-events: none;
}

.heroe__rejilla {
  position: relative; display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}

.cintillo {
  display: inline-block; margin: 0 0 1.1rem;
  padding: .4rem .95rem; border-radius: 999px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26);
  font-family: "Oswald", sans-serif; font-size: .82rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
}

.heroe__titulo {
  font-family: "Oswald", "Source Sans 3", system-ui, sans-serif; line-height: 1.12;
  font-size: clamp(2.9rem, 8vw, 5.2rem);
  font-weight: 700; letter-spacing: -.02em; margin-bottom: 1.1rem;
}
.heroe__entrada {
  font-size: clamp(1.06rem, 2.2vw, 1.28rem);
  line-height: 1.6; max-width: 34em; color: #DCE9F2; margin-bottom: 0;
}
.heroe__lema {
  margin: 1.9rem 0 0;
  font-family: "Oswald", sans-serif; font-size: 1.22rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--magenta);
}

.heroe__escudo { display: flex; justify-content: center; }
.heroe__escudo img {
  width: min(400px, 78%); height: auto;
  filter: drop-shadow(0 22px 48px rgba(0, 0, 0, .34));
  animation: flotar 7s ease-in-out infinite;
}
@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

/* El escudo es azul petróleo sobre un fondo azul petróleo: la corona de
   laureles y la estrella se perderían. El disco blanco detrás es lo que lo
   devuelve a su medio natural, que es el claro. */
.heroe__escudo {
  position: relative;
}
.heroe__escudo::before {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(430px, 86%); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .93) 62%, rgba(255, 255, 255, 0) 71%);
}

/* ── Cifras ────────────────────────────────────────────────────────────── */

.cifras { background: var(--blanco); margin-top: -2.5rem; position: relative; z-index: 2; }
.cifras__rejilla {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: var(--sombra-alta); overflow: hidden;
}
.cifra { padding: 1.7rem 1.25rem; text-align: center; border-right: 1px solid var(--linea); }
.cifra:last-child { border-right: 0; }
.cifra__valor {
  display: block; font-family: "Oswald", sans-serif;
  font-size: clamp(1.5rem, 3.2vw, 2rem); font-weight: 600; color: var(--azul);
  line-height: 1.1;
}
.cifra__nombre {
  display: block; margin-top: .35rem;
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave);
}

/* ── Secciones ─────────────────────────────────────────────────────────── */

.seccion { padding: clamp(3rem, 7vw, 5rem) 0; }
.seccion--clara { background: var(--papel); }
.seccion__encabezado { max-width: 52rem; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }

.titulo { font-size: clamp(1.7rem, 3.6vw, 2.5rem); color: var(--azul-hondo); margin-bottom: .9rem; }
.titulo--separado { margin-top: 2.5rem; }
.parrafo { font-size: 1.06rem; color: var(--tinta-suave); line-height: 1.7; }
.parrafo--ancho { max-width: 46em; margin-inline: auto; }
.parrafo--nota { font-size: .94rem; color: var(--tinta-suave); }
.centrado { text-align: center; }
.centrado--izquierda { text-align: left; }
.texto-largo { max-width: 46rem; }

.encabezado { background: var(--papel); padding: clamp(2.5rem, 6vw, 4rem) 0; border-bottom: 1px solid var(--linea); }
.encabezado--fuerte { background: linear-gradient(140deg, var(--azul-hondo), var(--azul)); border-bottom: 0; }
.encabezado--fuerte .encabezado__titulo { color: var(--blanco); }
.encabezado--fuerte .encabezado__entrada { color: #DCE9F2; }
.encabezado__titulo { font-size: clamp(2.1rem, 5vw, 3.2rem); color: var(--azul-hondo); margin-bottom: .8rem; }
.encabezado__entrada { font-size: clamp(1.04rem, 2vw, 1.2rem); color: var(--tinta-suave); max-width: 44em; margin: 0; }

/* ── Tarjetas ──────────────────────────────────────────────────────────── */

.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.5rem; }
.tarjeta {
  position: relative; background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 2rem 1.6rem 1.7rem; overflow: hidden;
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); border-color: transparent; }
.tarjeta__marca { position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--azul), var(--magenta)); }
.tarjeta__titulo { font-size: 1.28rem; color: var(--azul-hondo); margin-bottom: .6rem; }
.tarjeta p { color: var(--tinta-suave); margin-bottom: 0; }
.tarjeta--contacto { padding-top: 1.7rem; }
.enlace-grande { font-family: "Oswald", sans-serif; font-size: 1.3rem; font-weight: 500; color: var(--azul); text-decoration: none; }
.enlace-grande:hover { color: var(--magenta-texto); text-decoration: underline; }

/* ── Categorías por edad ───────────────────────────────────────────────── */

.categorias { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-bottom: 2.5rem; }
.categoria {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 1.8rem 1.6rem; display: flex; flex-direction: column;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.categoria:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.categoria--amplia { padding: 2.2rem 1.9rem; }
.categoria__edad { font-family: "Oswald", sans-serif; font-size: 1.45rem; font-weight: 600; color: var(--magenta-texto); margin-bottom: .6rem; }
.categoria__texto { color: var(--tinta-suave); flex: 1; }

/* ── Dos columnas, listas, caja de ayuda ──────────────────────────────── */

.dos-columnas { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }

.lista-palomas li { position: relative; padding-left: 2rem; margin-bottom: .85rem; color: var(--tinta-suave); }
.lista-palomas li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 11px; height: 6px; border-left: 2.5px solid var(--magenta); border-bottom: 2.5px solid var(--magenta);
  transform: rotate(-45deg);
}


.ayuda { margin-top: 1.6rem; padding: 1.25rem; border-radius: var(--radio-chico); background: var(--magenta-velo); border: 1px solid rgba(186, 76, 198, .26); }
.ayuda__titulo { font-size: 1.1rem; color: var(--magenta-texto); margin-bottom: .45rem; }
.ayuda p { margin: 0; color: var(--tinta); }
.ayuda--sola { margin-top: 0; padding: 1.8rem 1.6rem; }
.ayuda--sola .ayuda__titulo { font-size: 1.35rem; }
.ayuda__enlace { margin-top: .9rem !important; }
.ayuda__enlace a { color: var(--magenta-texto); font-weight: 600; }

.transparencia { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 2rem 1.8rem; }
.datos { margin: 1.25rem 0; }
.datos dt { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); margin-top: 1rem; }
.datos dd { margin: .2rem 0 0; font-weight: 600; color: var(--azul-hondo); }

/* ── Niveles de patrocinio ─────────────────────────────────────────────── */

.niveles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.25rem; margin-bottom: 1.75rem; }
.nivel {
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 1.8rem 1.4rem; display: flex; flex-direction: column; text-align: center;
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.nivel:hover { transform: translateY(-5px); box-shadow: var(--sombra-alta); }
.nivel--destacado { border-color: var(--magenta); border-width: 2px; box-shadow: 0 10px 30px rgba(186, 76, 198, .18); }
.nivel__nombre { font-size: 1.12rem; color: var(--azul-hondo); margin-bottom: .7rem; min-height: 2.4em; display: flex; align-items: center; justify-content: center; }
.nivel__precio { font-family: "Oswald", sans-serif; font-size: 2.4rem; font-weight: 600; color: var(--magenta-texto); margin: 0 0 1.1rem; line-height: 1; }
.nivel__precio span { font-size: 1.2rem; vertical-align: super; margin-right: 2px; }
.nivel__lista { text-align: left; border-top: 1px solid var(--linea); padding-top: 1rem; }
.nivel__lista li { position: relative; padding-left: 1.4rem; margin-bottom: .6rem; font-size: .95rem; color: var(--tinta-suave); }
.nivel__lista li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--magenta); }

.vacio {
  text-align: center; padding: 2.5rem 1.5rem; color: var(--tinta-suave);
  border: 2px dashed var(--linea); border-radius: var(--radio); background: var(--papel);
  max-width: 40rem; margin-inline: auto;
}

/* ── Pasos ─────────────────────────────────────────────────────────────── */

.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin: 2.5rem 0; }
.paso { display: flex; gap: 1rem; align-items: flex-start; }
.paso__numero {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: var(--magenta-accion); color: var(--blanco);
  display: grid; place-items: center;
  font-family: "Oswald", sans-serif; font-size: 1.3rem; font-weight: 600;
}
.paso p { margin: 0; color: var(--tinta-suave); padding-top: .55rem; }

/* ── Banda de llamado ──────────────────────────────────────────────────── */

.llamado { padding: 0 0 clamp(3rem, 7vw, 5rem); }
.llamado__caja {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--azul-hondo), var(--magenta-texto));
  border-radius: var(--radio); padding: clamp(2rem, 5vw, 3rem);
  color: var(--blanco);
}
.llamado__titulo { font-size: clamp(1.5rem, 3.2vw, 2.1rem); color: var(--blanco); margin-bottom: .6rem; }
.llamado__texto { color: #E8DDF0; max-width: 42em; margin: 0; }

/* ── Errores ───────────────────────────────────────────────────────────── */

.seccion--error { padding: clamp(4rem, 12vw, 8rem) 0; }
.error__codigo { font-family: "Oswald", sans-serif; font-size: clamp(4rem, 14vw, 7rem); font-weight: 700; color: var(--magenta-velo); line-height: 1; margin: 0 0 -.5rem; }

/* ── Móvil ─────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .heroe__rejilla { grid-template-columns: 1fr; text-align: center; }
  .heroe__escudo { order: -1; }
  .heroe__escudo img { width: min(250px, 62%); }
  .heroe__entrada { margin-inline: auto; }
  .acciones { justify-content: center; }
  .cifras__rejilla { grid-template-columns: repeat(2, 1fr); }
  .cifra:nth-child(2) { border-right: 0; }
  .cifra:nth-child(1), .cifra:nth-child(2) { border-bottom: 1px solid var(--linea); }
  .dos-columnas { grid-template-columns: 1fr; }
  .llamado__caja { flex-direction: column; align-items: flex-start; text-align: left; }
}

@media (max-width: 560px) {
  .cifras { margin-top: -1.5rem; }
  .cifra { padding: 1.25rem .75rem; }
  .boton { width: 100%; }
  .acciones { flex-direction: column; }
  .llamado__caja .boton { width: 100%; }
}

/* ── Fotografías ───────────────────────────────────────────────────────── */
/* Añadidas el 2026-09-17, tomadas del sitio público del propio club. Son de
 * menores: su publicación exige consentimiento de medios firmado por el padre
 * o tutor. Éstas se mudan del sitio de ellos al sitio de ellos — el día que
 * entre una foto nueva, el consentimiento va primero. */

.heroe__foto { position: absolute; inset: 0; z-index: 0; }
.heroe__foto picture, .heroe__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }

/* El velo es lo que hace legible el texto encima de la foto. Sin él, el título
 * blanco cae sobre un cielo claro y desaparece. Es el mismo azul del escudo,
 * así que la foto se tiñe de la marca en vez de verse apagada. */
.heroe__velo {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(17,54,76,.96) 0%, rgba(17,54,76,.88) 38%, rgba(28,87,123,.72) 62%, rgba(28,87,123,.55) 100%),
    linear-gradient(to bottom, rgba(17,54,76,.30), rgba(17,54,76,.55));
}
.heroe__brillo { z-index: 2; }
.heroe__rejilla { z-index: 3; }

.con-foto { display: grid; grid-template-columns: 1fr .9fr; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
.con-foto--invertida { grid-template-columns: .9fr 1fr; }

.figura { margin: 0; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-alta); }
.figura__img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.figura--alta .figura__img { aspect-ratio: 3 / 4; }

.tarjetas--separadas { margin-top: clamp(2rem, 5vw, 3rem); }

/* La foto de cada categoría se recorta a una franja: así las tres tarjetas
 * miden igual aunque las fotos originales sean de proporciones distintas. */
.categoria--foto { padding: 0; overflow: hidden; }
.categoria--foto > :not(.categoria__foto) { padding-inline: 1.6rem; }
.categoria--foto > .categoria__edad { padding-top: 1.4rem; }
.categoria--foto > .categoria__texto { padding-bottom: 1.5rem; }
.categoria__foto img { width: 100%; height: 190px; object-fit: cover; object-position: center 35%; display: block; }

@media (max-width: 900px) {
  .con-foto, .con-foto--invertida { grid-template-columns: 1fr; }
  .con-foto--invertida .figura { order: 2; }
  .heroe__foto img { object-position: center 28%; }
}

/* ── WhatsApp ──────────────────────────────────────────────────────────── */
/* Verde de WhatsApp. Es el único color de este sitio que no sale del escudo, y
 * está a propósito: la gente reconoce ese verde sin leer, y reconocerlo es lo
 * que hace que le dé clic.
 *
 * El tono NO es el verde de marca de WhatsApp (#25D366): sobre él, el texto
 * blanco es ilegible. Se oscureció hasta que pasó, y el número está MEDIDO, no
 * supuesto: blanco sobre #17713E da **6.06:1**. (El comentario anterior decía
 * 4.62:1 sobre #1E8E4E; al medirlo salió 4.17:1 y no pasaba. Escribí una
 * medición que no hice — se corrige aquí y queda anotado, porque una cifra
 * inventada en un comentario envenena a quien la crea después.) */
.boton--wa { background: #17713E; color: var(--blanco); box-shadow: 0 6px 18px rgba(23,113,62,.32); }
.boton--wa:hover { background: #115A31; color: var(--blanco); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(23,113,62,.42); }
.tarjeta--wa { border-color: rgba(23,113,62,.35); }
.tarjeta--wa .tarjeta__marca { background: linear-gradient(90deg, #17713E, var(--magenta)); }

/* ── Galería de la portada ─────────────────────────────────────────────────
 * Las fotos las sube el club desde el panel, de cualquier proporción. Se
 * recortan a 4:3 para que la rejilla no quede escalonada; el enlace abre la
 * foto completa. */
.galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.galeria__foto { display: block; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.galeria__foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--transicion); }
.galeria__foto:hover img, .galeria__foto:focus-visible img { transform: scale(1.04); }

/* ── Preguntas frecuentes del programa ─────────────────────────────────────
 * <details> nativo: se abre con teclado y lector de pantalla sin una línea de JS. */
.contenedor--angosto { max-width: 820px; }
.preguntas { display: flex; flex-direction: column; gap: .75rem; margin: 1.5rem 0; }
.pregunta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-chico); padding: 0 1.25rem; }
.pregunta__p { cursor: pointer; padding: 1.1rem 0; font-weight: 700; color: var(--tinta); list-style-position: inside; }
.pregunta[open] .pregunta__p { color: var(--magenta-texto); }
.pregunta__r { margin: 0 0 1.1rem; color: var(--tinta-suave); }
.enlace-fuerte { color: var(--magenta-texto); font-weight: 700; }

/* Un correo es largo: en un teléfono de 360 px se sale de la tarjeta si no se deja partir. */
.enlace-grande--largo { overflow-wrap: anywhere; font-size: clamp(1.05rem, 4.2vw, 1.35rem); }