/* ============================================================
   PLANTILLA DE PÁGINA DE SECCIÓN · la misma ficha para todas
   ------------------------------------------------------------
   Las páginas de sección (Running, Montaña, Triatlón, El Cubo,
   Natación, Escuelas…) son LA MISMA PÁGINA con otros datos.
   Aquí está la colocación; los datos los pone `seccion.js`
   leyéndolos de la base. Ninguna página debe traer su propio
   <style> con otra manera de hacer lo mismo.

   LOS BLOQUES, EN ESTE ORDEN (lo pedido por el maquetador):

     1 · Foto            .sec-foto      primero la foto, siempre
     2 · Para quién es   .sec-intro     antetítulo, título, frase y
                                        la tarjeta «De un vistazo»
     3 · Días y sede     .sec-grupos    un grupo, una tarjeta
     4 · Precio          .sec-precio    con la cuota de socio dicha aparte
     5 · Servicios       .sec-servicios lo que pone el club
     6 · A qué te
         comprometes     .sec-compromiso  lo que pone el atleta
     7 · Quién entrena   .sec-equipo    retrato, nombre y contacto
     8 · Qué incluye     .sec-banda     banda crema a sangre
     9 · Botón de prueba .sec-cta-zona  cierre de la página

   Los bloques 5 y 6 son las dos mitades del mismo trato y por eso
   van pegados y justo detrás del precio: primero lo que se recibe,
   que es la respuesta a cuánto cuesta, y luego lo que se pone. Hoy
   solo los usa competición; en las otras siete secciones están
   vacíos y por tanto no existen.

   REGLAS QUE NO SE TOCAN
     · Plano: ni sombras ni relieve. Se separa por color y línea de 1 px.
     · Si la foto va con esquinas redondeadas, van TODAS redondeadas:
       el radio es `--radio-grande` y sale de aquí, no de cada página.
     · Las bandas a sangre no llevan radio.
     · Etiquetas de 13 px, en minúscula y sin espaciado (.eyebrow).
     · Nombres propios del club en ámbar (.nombre-propio); los nombres
       genéricos, en navy.
     · 44 px de zona pulsable y foco visible: lo pone apolana.css.

   Se carga con:
     <link rel="stylesheet" href="…/assets/css/seccion.css">
   DESPUÉS de apolana.css.
   ============================================================ */

/* ------------------------------------------------------------
   1 · FOTO
   Primero la foto, a lo ancho del contenedor y con el mismo
   redondeo en todas las secciones. El encuadre no se escribe
   aquí: lo pone el club desde el panel (`imagen_encuadre`).
   ------------------------------------------------------------ */
.sec-foto { padding-block: clamp(20px, 3vw, 28px) 0; }
.sec-foto .marco { height: clamp(200px, 34vw, 360px); }

/* ------------------------------------------------------------
   2 y 3 · PARA QUIÉN ES  +  DE UN VISTAZO
   ------------------------------------------------------------ */
.sec-intro { padding-block: clamp(24px, 4vw, 36px) 0; }
.sec-intro__rejilla {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(22px, 4vw, 40px);
  align-items: start;
}
.sec-texto { display: flex; flex-direction: column; gap: 14px; }
.sec-texto .display { font-size: clamp(42px, 8vw, 60px); }
.sec-texto .intro { margin: 0; }

/* Tarjeta «De un vistazo»: días, sede y precio de un golpe de vista */
.sec-ficha {
  background: #fff;
  border: 1px solid var(--crema-media);
  border-radius: var(--radio-grande);
  padding: clamp(20px, 3vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sec-ficha .fila {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--linea);
}
.sec-ficha .fila:last-child { padding-bottom: 0; border-bottom: 0; }
.sec-ficha .k { font-size: 15px; color: var(--texto-suave); flex-shrink: 0; }
.sec-ficha .v { font-size: 15px; color: var(--navy); text-align: right; }
.sec-ficha .v--azul { color: var(--azul-oscuro); }

/* La razón escrita, cuando una sección no tiene cuota de entrenamiento.
   Va en crema, no en ámbar: es una explicación, no un aviso. */
.sec-nota {
  margin: 2px 0 0;
  background: var(--crema-banda);
  border-left: 3px solid var(--linea-borde);
  border-radius: 0 10px 10px 0;
  padding: 12px 14px;
  font-size: 14px; line-height: 1.5; color: var(--texto);
}

/* Lo que todavía no ha publicado el club. Nunca un dato inventado. */
.sec-vacio { font-size: 15px; line-height: 1.5; color: var(--texto-suave); }

/* ------------------------------------------------------------
   4 · PRECIO, con la cuota de socio sumada
   ------------------------------------------------------------ */
.sec-precio { padding-block: clamp(28px, 4vw, 40px) 0; }
.sec-cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--linea); padding-bottom: 12px; margin-bottom: 18px;
}
.sec-cab .nota { font-size: 15px; color: var(--texto-suave); }

.sec-tarifas { display: flex; flex-direction: column; }
.sec-tarifa {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 14px 0; border-bottom: 1px solid var(--linea);
}
.sec-tarifa:first-child { padding-top: 0; }
.sec-tarifa .que { display: flex; flex-direction: column; gap: 3px; min-width: min(100%, 220px); flex: 1; }
.sec-tarifa .concepto { font-size: 17px; color: var(--navy); }
.sec-tarifa .detalle { font-size: 14px; line-height: 1.5; color: var(--texto-suave); }
.sec-tarifa .importe {
  font-family: var(--fuente-dato); font-variant-numeric: tabular-nums;
  font-size: 19px; color: var(--navy); white-space: nowrap;
}
.sec-tarifa .importe--texto { font-family: var(--fuente-texto); font-size: 17px; }
.sec-suma {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 16px 18px; margin-top: 14px;
  background: var(--crema-banda); border: 1px solid var(--linea-marcada); border-radius: var(--radio-dentro);
}
.sec-suma .k { font-size: 15px; color: var(--texto); }
.sec-suma .v {
  font-family: var(--fuente-dato); font-variant-numeric: tabular-nums;
  font-size: 19px; color: var(--azul-oscuro); white-space: nowrap;
}

/* ⚠️ LA NOTA QUE VA PEGADA A LA CUOTA ES LA MISMA CAJA, NO OTRA.
   `.sec-nota` se diseñó para ir SOLA: por eso lleva barra gruesa a la
   izquierda y las esquinas de ese lado rectas. Pero debajo de
   `.sec-suma` no va sola, va explicando lo de arriba —«125 €/año» y
   debajo qué incluye—, y las dos tienen el mismo relleno con marcos
   distintos: una con borde entero y esquinas redondeadas, la otra con
   barra lateral y esquinas rectas, separadas por 2 px. Andrés: «¿por
   qué las cajas amarillas no son iguales?». Porque no lo eran.
   Cuando van juntas se cosen: la de arriba pierde las esquinas de
   abajo, la de abajo pierde las de arriba y la barra lateral, y
   comparten el mismo borde. Una figura, no dos rotas. */
.sec-suma:has(+ .sec-nota) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.sec-suma + .sec-nota {
  margin-top: 0;
  border: 1px solid var(--linea-marcada);
  border-top: 0;
  border-radius: 0 0 var(--radio-dentro) var(--radio-dentro);
  padding: 12px 18px 14px;
}

/* ------------------------------------------------------------
   3 · DÍAS Y SEDE · un grupo, una tarjeta
   ------------------------------------------------------------ */
.sec-grupos { padding-block: clamp(28px, 4vw, 40px) 0; }
.sec-grupos__lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
/* Cómo se entra a la sede: una línea debajo de todos los grupos, porque
   es la misma para todos. Se separa de las tarjetas lo mismo que ellas
   entre sí, para que se lea como algo aparte y no como una tarjeta más
   que se ha quedado a medias. */
.sec-acceso { margin-top: 18px; }
.sec-grupo {
  background: #fff; border: 1px solid var(--crema-media); border-radius: var(--radio-grande);
  padding: clamp(20px, 3vw, 26px);
  display: flex; flex-direction: column; gap: 10px;
}
.sec-grupo .cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sec-grupo .nombre {
  font-family: var(--fuente-titulo); font-weight: 700; text-transform: uppercase;
  font-size: clamp(28px, 4vw, 34px); line-height: 1; color: var(--navy);
}
.sec-grupo .nombre.nombre-propio { color: #8A5307; }
/* Sin monoespaciada: aquí el precio se lee, no se compara en columna.
   La monoespaciada solo vuelve en la tabla de tarifas, más abajo. */
.sec-grupo .precio {
  font-family: var(--fuente-texto); font-variant-numeric: tabular-nums;
  font-size: 16px; color: var(--navy); white-space: nowrap;
}
/* El año de nacimiento del grupo, en los de la escuela. Es el dato que
   busca una familia, así que va en navy y con la cifra tabulada, por
   delante de los días. */
.sec-grupo .nacidos {
  font-size: 15px; line-height: 1.5; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.sec-grupo .cuando { font-size: 15px; line-height: 1.5; color: var(--azul-oscuro); }
/* La tabla de año → grupo, cuando una tarjeta resume la escuela entera.
   El año delante y en firme —es con lo que decide una familia—; el nombre
   del grupo detrás y en suave, que es jerga de pista. Rejilla y no lista:
   nueve renglones seguidos volverían a ser el catálogo que se quería
   evitar, y en rejilla son tres filas que se barren de un vistazo. */
.sec-anios {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 6px 14px; padding-top: 4px;
}
.sec-anio {
  display: flex; align-items: baseline; gap: 7px;
  font-size: 14px; line-height: 1.4; padding-block: 3px;
}
.sec-anio b {
  font-weight: 600; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.sec-anio span { color: var(--texto-suave); }
.sec-grupo .que { margin: 0; font-size: 15px; line-height: 1.55; color: var(--texto); }
/* Las pruebas que entrena el grupo: «60 m», «vallas», «cross». Es lo que
   hace que un nombre como «Velocidad A» signifique algo. */
.sec-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.sec-chips .chip { padding: 6px 12px; font-size: 13px; }
.sec-grupo .quien {
  display: flex; flex-direction: column; gap: 3px;
  padding-top: 12px; margin-top: auto; border-top: 1px solid var(--linea);
}
.sec-grupo .quien .valor { font-size: 15px; color: var(--navy); }

/* ------------------------------------------------------------
   5 · SERVICIOS · lo que el club pone de su parte
   ------------------------------------------------------------
   La lista larga de lo que se hace por el atleta: planificación,
   acompañamiento a las competiciones, inscripciones, material.
   Va detrás del precio a propósito, para que se lea como su
   respuesta: esto es lo que hay dentro de esa cifra.

   Blanco, dos columnas y una línea de 1 px por debajo de cada
   cosa: es un inventario, se repasa con la vista.
   Lo escribe el club en Panel → Páginas, casilla «Servicios»,
   una cosa por línea. Vacía, el bloque no existe.
   ------------------------------------------------------------ */
.sec-servicios { padding-block: clamp(28px, 4vw, 40px) 0; }
.sec-servicios__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 4vw, 48px);
}
.sec-servicio {
  display: flex; gap: 10px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--linea);
}
.sec-servicio .marca { color: var(--azul); flex-shrink: 0; }
.sec-servicio .texto { font-size: 16px; line-height: 1.55; color: var(--navy); }

/* ------------------------------------------------------------
   6 · A QUÉ TE COMPROMETES · lo que pone el atleta
   ------------------------------------------------------------
   La otra mitad del trato, y se lee distinto: no son cosas que
   uno se lleva, son condiciones que uno acepta. Por eso NO se
   parece a la lista de arriba: una sola columna para que se lea
   entera, sin marcas de lista que la conviertan en un menú, y
   sobre crema con el filete azul que en esta web ya significa
   «esto es una explicación, léela».

   Y no se numera: no son pasos en orden, valen todas a la vez.
   Numerarlas haría creer que hay una primera y una última.
   ------------------------------------------------------------ */
.sec-compromiso { padding-block: clamp(28px, 4vw, 40px) 0; }
.sec-compromiso__caja {
  list-style: none; margin: 0;
  background: var(--crema-banda);
  border: 1px solid var(--linea-marcada);
  border-left: 3px solid var(--azul-filete);
  border-radius: 0 var(--radio-dentro) var(--radio-dentro) 0;
  padding: 4px clamp(18px, 3vw, 26px);
}
.sec-compromiso__punto {
  padding: 14px 0; border-bottom: 1px solid var(--linea-marcada);
  font-size: 16px; line-height: 1.6; color: var(--navy);
}
.sec-compromiso__punto:last-child { border-bottom: 0; }

/* ------------------------------------------------------------
   7 · QUIÉN ENTRENA · la ficha de la persona
   Es de lo que más mira una familia antes de apuntarse, así que
   está en todas las secciones. El retrato lo pone el club desde
   el panel (Fotos de la web) y el nombre, desde Personas de
   contacto: aquí no hay ni un nombre escrito a mano.
   ------------------------------------------------------------ */
.sec-equipo { padding-block: clamp(28px, 4vw, 40px) 0; }
.sec-equipo__lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.sec-persona {
  background: #fff; border: 1px solid var(--crema-media); border-radius: var(--radio-grande);
  padding: clamp(18px, 3vw, 22px);
  display: flex; gap: 18px; align-items: flex-start;
}
.sec-persona .retrato { width: 110px; height: 140px; border-radius: var(--radio-dentro); flex-shrink: 0; }
/* Mientras no haya retrato, no se enseña un hueco vacío: la ficha se
   queda solo con el texto y ya. En cuanto el club suba la foto desde
   el panel, el marco aparece solo. */
.sec-persona .retrato:has(img:not([src])) { display: none; }
.sec-persona .datos { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sec-persona .nombre {
  font-family: var(--fuente-titulo); font-weight: 700; text-transform: uppercase;
  font-size: clamp(24px, 3.5vw, 28px); line-height: 1; color: var(--navy);
}
.sec-persona .papel { font-size: 15px; line-height: 1.5; color: var(--texto); }
/* La trayectoria: dos o tres frases. Es lo que de verdad mira una familia
   antes de dejar a un hijo con alguien, así que se le da aire. */
.sec-persona .bio { margin: 4px 0 0; font-size: 15px; line-height: 1.6; color: var(--texto); }
/* Las cifras de la persona: «+400 · atletas entrenados». Números pequeños,
   no titulares: aquí acompañan a la trayectoria, no la sustituyen. */
.sec-persona .sec-datos { display: flex; flex-wrap: wrap; gap: 8px 26px; margin-top: 4px; }
.sec-persona .sec-datos:empty { display: none; }
.sec-persona .sec-datos .stat b { font-size: 24px; }
.sec-persona .sec-datos .stat span { font-size: 13px; color: var(--texto-suave); }
.sec-persona .contacto {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 15px; color: var(--azul-oscuro);
}

/* ------------------------------------------------------------
   8 · QUÉ INCLUYE · banda a sangre, sin radio
   ------------------------------------------------------------ */
.sec-banda {
  margin-top: clamp(32px, 5vw, 44px);
  background: var(--crema-banda);
  border-block: 1px solid var(--linea-marcada);
  padding-block: clamp(28px, 4vw, 40px);
}
/* Dos listas: «qué incluye» y «qué traer». Cuando solo hay una, se
   despliega a lo ancho en tres columnas; cuando hay dos, cada una se
   queda en su mitad y en una sola columna, que se leen en vertical. */
.sec-banda__cuerpo.sec-banda__dos {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px); align-items: start;
}
.sec-banda__cuerpo.sec-banda__dos .sec-banda__lista { grid-template-columns: 1fr; }
.sec-banda__lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 24px; margin-top: 16px; }
.sec-punto { display: flex; gap: 10px; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--linea-marcada); }
.sec-punto .marca { color: var(--azul); flex-shrink: 0; }
.sec-punto span:last-child { font-size: 15px; line-height: 1.5; color: var(--navy); }

/* ------------------------------------------------------------
   9 · BOTÓN DE PRUEBA
   ------------------------------------------------------------ */
.sec-cta-zona { padding-block: clamp(32px, 5vw, 44px); }
.sec-cta {
  background: #fff; border: 1px solid var(--crema-media);
  border-top: 3px solid var(--azul-filete);
  border-radius: var(--radio-grande);
  padding: clamp(24px, 4vw, 36px) clamp(22px, 4vw, 40px);
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.sec-cta .titular {
  font-family: var(--fuente-titulo); font-weight: 700; text-transform: uppercase;
  font-size: clamp(30px, 5vw, 40px); line-height: 1; color: var(--navy);
}
.sec-cta .lema { margin: 8px 0 0; font-size: 17px; line-height: 1.5; color: var(--texto); }
.sec-cta .botones { display: flex; gap: 12px; flex-wrap: wrap; }

/* ------------------------------------------------------------
   RESPONSIVE · la misma página, en una columna
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .sec-intro__rejilla { grid-template-columns: 1fr; }
  .sec-grupos__lista { grid-template-columns: 1fr; }
  .sec-servicios__lista { grid-template-columns: 1fr; }
  .sec-equipo__lista { grid-template-columns: 1fr; }
  .sec-banda__lista { grid-template-columns: 1fr 1fr; }
  .sec-banda__cuerpo.sec-banda__dos { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  .sec-banda__lista { grid-template-columns: 1fr; }
  .sec-tarifa { gap: 6px; }
  .sec-tarifa .importe { width: 100%; }
  .sec-cta { flex-direction: column; align-items: flex-start; gap: 20px; }
  .sec-cta .botones { width: 100%; flex-direction: column; }
  .sec-cta .botones .btn { width: 100%; }
}