/* ==========================================================================
   Sembrando Fútbol — sistema visual

   Paleta corporativa: azul marino, azul eléctrico y ámbar.
   Criterios: separación por cambio de superficie en lugar de bordes o
   sombras, tres estilos tipográficos y escalas fluidas sin puntos de
   ruptura. Sin dependencias externas.
   ========================================================================== */

:root {
  color-scheme: only light;

  /* Superficies claras */
  --perla:  #f4f4f5;
  --alzado: #ffffff;
  --hundido:#ececed;

  /* Superficies oscuras (las del sitio original) */
  --marino:  #00072E;
  --marino-2:#040d3d;
  --grafito: #222222;

  /* Colores corporativos */
  --azul:       #2A35AE;
  --azul-claro: #3a46c9;
  --ambar:      #FFB606;
  --ambar-claro:#ffc635;

  /* Precios */
  --precio:       #F24C0A;
  --precio-gratis:#5EBB3E;

  /* Tinta sobre claro */
  --tinta:    #1c1c1d;
  --tinta-70: #5c5c5d;
  --tinta-55: #7c7c7c;
  --tinta-35: #a6a6a7;
  --tinta-25: #bcbcbc;

  /* Tinta sobre oscuro */
  --nieve:    #f2f3f7;
  --nieve-70: #b9bcca;
  --nieve-55: #9096a8;

  /* Rellenos */
  --relleno:       rgba(28, 28, 29, 0.05);
  --relleno-hover: rgba(28, 28, 29, 0.08);
  --relleno-boton: rgba(28, 28, 29, 0.06);
  --relleno-claro: rgba(255, 255, 255, 0.10);

  /* Anchos */
  --ancho-pagina:  1200px;
  --ancho-columna: 760px;
  --medida:        58ch;

  /* Curvas y movimiento */
  --radio: 24px;
  --curva: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--perla);
  color: var(--tinta);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(16px, 0.95rem + 0.2vw, 18px);
  font-weight: 400;
  letter-spacing: -0.005em;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Los tres estilos de letra ------------------------------------------ */

.titulo {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display",
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: clamp(28px, 1.4rem + 1.8vw, 46px);
  letter-spacing: -0.035em;
  line-height: 1.07;
  margin: 0;
  text-wrap: balance;
}

.titulo.es-hero {
  font-size: clamp(34px, 1.6rem + 3.2vw, 64px);
  letter-spacing: -0.042em;
  line-height: 1.04;
}

.titulo.es-pequeno {
  font-size: clamp(20px, 1.1rem + 0.6vw, 26px);
  letter-spacing: -0.028em;
  line-height: 1.16;
}

.etiqueta {
  font-weight: 500;
  font-size: clamp(11px, 0.68rem + 0.1vw, 12px);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.4;
  color: var(--tinta-55);
  margin: 0;
}

.texto { margin: 0; }
.fino  { font-size: 14px; line-height: 1.6; }

.medida      { max-width: var(--medida); }
.apagado     { color: var(--tinta-70); }
.mas-apagado { color: var(--tinta-55); }
.dato        { color: var(--tinta-35); }
.punto       { color: var(--ambar); }

/* Sobre fondo oscuro */
.oscura,
.oscura .titulo { color: var(--nieve); }
.oscura .etiqueta     { color: var(--nieve-55); }
.oscura .apagado      { color: var(--nieve-70); }
.oscura .mas-apagado  { color: var(--nieve-55); }

/* Las tarjetas de superficie clara conservan su tinta oscura aunque estén
   contenidas en una franja oscura. */
.oscura .tarjeta:not(.marino),
.oscura .tarjeta:not(.marino) .titulo { color: var(--tinta); }
.oscura .tarjeta:not(.marino) .meta   { color: var(--tinta-35); }
.oscura .tarjeta:not(.marino) .apagado { color: var(--tinta-70); }

/* --- Anchos y ritmo ------------------------------------------------------ */

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

.seccion          { padding-block: 88px; }
.seccion.apretada { padding-block: 56px; }

@media (min-width: 768px) {
  .seccion          { padding-block: 120px; }
  .seccion.apretada { padding-block: 72px; }
}

.centrado { text-align: center; }
.centrado .medida { margin-inline: auto; }

.mt-4  { margin-top: 16px; }
.mt-6  { margin-top: 24px; }
.mt-10 { margin-top: 40px; }
.mt-16 { margin-top: 64px; }

.banda-hundida { background: var(--hundido); }
.banda-marino  { background: var(--marino); }

/* --- Barra superior (generada por sitio.js) ------------------------------ */

.topbar {
  background: var(--grafito);
  color: #ABABAB;
  font-size: 14px;
  line-height: 1;
}

.topbar-interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  min-height: 42px;
  padding-block: 10px;
}

.topbar-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }

.topbar a {
  color: #ABABAB;
  text-decoration: none;
  transition: color 300ms var(--curva);
}
.topbar a:hover { color: var(--ambar); }

/* --- Cabecera ------------------------------------------------------------ */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--perla);
}

.cabecera-interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
}

.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.marca img { width: 36px; height: 36px; }
.marca span { font-weight: 600; letter-spacing: -0.028em; font-size: 17px; }

.navegacion { display: none; gap: 4px; align-items: center; }

@media (min-width: 940px) {
  .navegacion { display: flex; }
  .boton-menu { display: none; }
}

.navegacion a {
  text-decoration: none;
  font-size: 15px;
  line-height: 1;
  color: var(--tinta-70);
  padding: 10px 14px;
  border-radius: 999px;
  transition: background 300ms var(--curva), color 300ms var(--curva);
}
.navegacion a:hover { background: var(--relleno); color: var(--tinta); }
.navegacion a[aria-current="page"] { color: var(--azul); background: var(--relleno); }

.boton-menu {
  appearance: none;
  border: 0;
  background: var(--relleno);
  color: var(--tinta);
  font: inherit;
  font-size: 14px;
  line-height: 1;
  padding: 11px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 300ms var(--curva);
}
.boton-menu:hover { background: var(--relleno-hover); }

.menu-movil { display: none; padding-bottom: 16px; }
.menu-movil.abierto { display: block; }

.menu-movil a {
  display: block;
  text-decoration: none;
  color: var(--tinta-70);
  padding: 12px 14px;
  border-radius: 16px;
  transition: background 300ms var(--curva), color 300ms var(--curva);
}
.menu-movil a:hover { background: var(--relleno); color: var(--tinta); }

@media (min-width: 940px) { .menu-movil { display: none !important; } }

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

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 16px 28px;
  border-radius: 999px;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background 300ms var(--curva), color 300ms var(--curva),
              transform 400ms var(--curva);
}

.boton.principal { background: var(--ambar); color: #1a1200; }
.boton.principal:hover { background: var(--ambar-claro); transform: translateY(-2px); }

.boton.azul { background: var(--azul); color: #ffffff; }
.boton.azul:hover { background: var(--azul-claro); transform: translateY(-2px); }

.boton.terciario { background: var(--relleno-boton); color: var(--tinta); }
.boton.terciario:hover { background: var(--relleno-hover); transform: translateY(-2px); }

.oscura .boton.terciario { background: var(--relleno-claro); color: var(--nieve); }
.oscura .boton.terciario:hover { background: rgba(255,255,255,0.18); }

.acciones { display: flex; flex-wrap: wrap; gap: 12px; }
.centrado .acciones { justify-content: center; }

/* Enlace de texto con flecha */
.enlace {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ambar);
  transition: gap 400ms var(--curva);
}
.enlace:hover { gap: 14px; }

/* --- Banda de categorías (azul eléctrico) -------------------------------- */

.categorias { background: var(--azul); }

.categorias-rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 8px;
  padding-block: 28px;
}

@media (min-width: 860px) {
  .categorias-rejilla { grid-template-columns: repeat(6, 1fr); }
}

.categoria {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 8px;
  border-radius: 18px;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  transition: background 300ms var(--curva), transform 400ms var(--curva);
}
.categoria:hover { background: rgba(255,255,255,0.10); transform: translateY(-3px); }
.categoria img { width: 46px; height: 46px; object-fit: contain; }
.categoria span {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* --- Tarjetas ------------------------------------------------------------- */

.rejilla { display: grid; gap: 20px; }

@media (min-width: 640px) { .rejilla.de-2, .rejilla.de-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .rejilla.de-3 { grid-template-columns: repeat(3, 1fr); } }

.tarjeta {
  background: var(--alzado);
  border-radius: var(--radio);
  padding: 28px;
  transition: transform 400ms var(--curva), background 300ms var(--curva);
}

a.tarjeta { text-decoration: none; display: block; }
a.tarjeta:hover { transform: translateY(-4px); }

.tarjeta.con-foto { padding: 0; overflow: hidden; }
.tarjeta.con-foto .cuerpo { padding: 24px 26px 30px; }

.tarjeta .foto {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  background: var(--hundido);
}

/* Tarjeta azul marino: las seis áreas de la oferta académica */
.tarjeta.marino {
  background: var(--marino);
  color: var(--nieve);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.tarjeta.marino .foto { aspect-ratio: 4 / 5; }
.tarjeta.marino .cuerpo { padding: 26px 28px 32px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.tarjeta.marino .titulo { color: #ffffff; }
.tarjeta.marino p { color: var(--nieve-70); margin: 0; font-size: 15px; line-height: 1.6; }
.tarjeta.marino .enlace { margin-top: auto; }

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--tinta-35);
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
}

.precio { font-weight: 600; color: var(--precio); }
.precio .antes { color: var(--tinta-35); font-weight: 400; text-decoration: line-through; margin-right: 6px; }
.gratis { font-weight: 600; color: var(--precio-gratis); }

/* --- Franja con foto de fondo -------------------------------------------- */

/* Capas, de atrás hacia delante: fondo de la sección, imagen, vídeo, velo de
   oscurecimiento y contenido.

   Todos los índices son positivos a propósito. Un z-index negativo situaría
   el vídeo por detrás del fondo opaco de la sección: el navegador lo compone
   en una capa acelerada por hardware y deja de respetar el orden previsto.
   Con imágenes no ocurre, y de ahí que el fallo pase inadvertido. */
.franja {
  position: relative;
  background: var(--marino);
  color: var(--nieve);
  overflow: hidden;
}

.franja > img.fondo,
.franja > video.fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.franja > img.fondo   { z-index: 0; }
.franja > video.fondo { z-index: 1; display: none; }

.franja::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 7, 46, 0.72);
  z-index: 2;
}

.franja > .pagina,
.franja > .columna { position: relative; z-index: 3; }

/* El vídeo solo se presenta en escritorio: en pantallas estrechas y con
   movimiento reducido queda a la vista la imagen y el archivo no llega a
   descargarse. */
@media (min-width: 900px) {
  .franja > video.fondo { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .franja > video.fondo { display: none; }
}

/* --- Acordeón de imágenes ------------------------------------------------ */

.acordeon { display: grid; gap: 12px; }

@media (min-width: 900px) {
  .acordeon { display: flex; height: 460px; gap: 12px; }
}

.panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--radio);
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  color: #ffffff;
}

@media (min-width: 900px) {
  .panel { flex: 1; transition: flex 500ms var(--curva); }
  .acordeon:hover .panel { flex: 1; }
  .acordeon .panel:hover { flex: 2.6; }
}

.panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,7,46,0.86) 10%, rgba(0,7,46,0.15) 70%);
  z-index: -1;
}

.panel .numero {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ambar);
  margin: 0 0 10px;
}

.panel p.desc {
  margin: 0;
  font-weight: 600;
  font-size: clamp(17px, 1rem + 0.4vw, 21px);
  letter-spacing: -0.02em;
  line-height: 1.25;
  max-width: 26ch;
}

/* --- Eventos -------------------------------------------------------------- */

.eventos { list-style: none; margin: 0; padding: 0; }

.evento {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 0;
  background: linear-gradient(var(--hundido), var(--hundido)) bottom left / 100% 1px no-repeat;
}
.evento:last-child { background-image: none; }

.fecha {
  flex: none;
  width: 62px;
  text-align: center;
  background: var(--marino);
  color: #ffffff;
  border-radius: 16px;
  padding: 10px 6px;
  line-height: 1.1;
}
.fecha .dia { display: block; font-size: 22px; font-weight: 600; letter-spacing: -0.03em; }
.fecha .mes { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ambar); margin-top: 2px; }

.evento h3 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.evento .lugar { margin: 4px 0 0; font-size: 14px; color: var(--tinta-55); }

/* --- Marquesina: fila con desplazamiento automático y manual ------------- */

.marquesina {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  cursor: grab;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

.marquesina::-webkit-scrollbar { display: none; }
.marquesina.arrastrando { cursor: grabbing; }

.pista { display: flex; gap: 20px; padding-inline: 4px; width: max-content; }

.pista > * { flex: 0 0 auto; width: clamp(220px, 24vw, 280px); }
.marquesina.ancha .pista > * { width: clamp(260px, 30vw, 340px); }

/* Sin JavaScript, la fila conserva el desplazamiento nativo. */

/* --- Escudos de trayectoria ---------------------------------------------- */

.escudos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 12px;
  align-items: center;
}

@media (min-width: 640px) { .escudos { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 980px) { .escudos { grid-template-columns: repeat(6, 1fr); } }

/* Los archivos originales presentan fondos heterogéneos: unos con recuadro
   blanco y otros con transparencia. Una superficie blanca común los unifica
   sin necesidad de editar las imágenes. */
.escudos img {
  width: 100%;
  max-width: 104px;
  height: 104px;
  margin-inline: auto;
  object-fit: contain;
  background: var(--alzado);
  border-radius: 20px;
  padding: 14px;
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter 300ms var(--curva), opacity 300ms var(--curva), transform 400ms var(--curva);
}
.escudos img:hover { filter: grayscale(0); opacity: 1; transform: translateY(-3px); }

/* --- Retratos del equipo -------------------------------------------------- */

.rejilla.retratos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 640px) { .rejilla.retratos { grid-template-columns: repeat(4, 1fr); } }

.retrato { text-align: center; }

.retrato img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radio);
  background: var(--hundido);
}

.retrato .nombre { margin-top: 14px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; }
.retrato .cargo  { color: var(--tinta-55); font-size: 14px; line-height: 1.4; margin-top: 2px; }

.retrato a { text-decoration: none; display: block; transition: transform 400ms var(--curva); }
.retrato a:hover { transform: translateY(-4px); }

/* --- Bloques de icono + texto -------------------------------------------- */

.bloque-icono img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radio);
  background: var(--hundido);
}
.bloque-icono h3 { margin: 20px 0 0; font-size: clamp(19px, 1.05rem + 0.4vw, 23px); font-weight: 600; letter-spacing: -0.028em; line-height: 1.2; }
.bloque-icono p  { margin: 12px 0 0; color: var(--tinta-70); font-size: 15px; line-height: 1.65; }

/* --- Listas --------------------------------------------------------------- */

.lista-simple { list-style: none; margin: 0; padding: 0; }
.lista-simple li {
  padding: 20px 0;
  background: linear-gradient(var(--hundido), var(--hundido)) bottom left / 100% 1px no-repeat;
}
.lista-simple li:last-child { background-image: none; }

/* --- Foto ancha ----------------------------------------------------------- */

.marco { border-radius: var(--radio); overflow: hidden; background: var(--hundido); }
.marco img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }

/* --- Cita ----------------------------------------------------------------- */

.cita-bloque { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .cita-bloque { grid-template-columns: 1fr 1.1fr; gap: 56px; } }

.cita-bloque .marco img { aspect-ratio: 4 / 3; }

.cita { margin: 0; }
.cita p {
  font-size: clamp(20px, 1.1rem + 1vw, 30px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.28;
  margin: 0;
}
.cita footer { margin-top: 20px; color: var(--tinta-55); font-size: 15px; }
.cita footer b { color: var(--tinta); font-weight: 600; }

/* --- Artículo (cursos y entradas) ---------------------------------------- */

.articulo { max-width: var(--medida); }
.articulo h2 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; color: var(--azul); margin: 48px 0 12px; }
.articulo h3 { font-size: clamp(19px, 1.05rem + 0.5vw, 24px); font-weight: 600; letter-spacing: -0.028em; line-height: 1.2; margin: 44px 0 12px; }
.articulo p  { margin: 0 0 18px; color: var(--tinta-70); }
.articulo ul { margin: 0; padding: 0; list-style: none; }
.articulo ul li { padding: 18px 0; color: var(--tinta-70);
  background: linear-gradient(var(--hundido), var(--hundido)) bottom left / 100% 1px no-repeat; }
.articulo ul li:last-child { background-image: none; }
.articulo ul strong { color: var(--tinta); font-weight: 600; }
.articulo > :first-child { margin-top: 0; }

/* --- Formulario ----------------------------------------------------------- */

.campo { display: block; margin-bottom: 18px; }
.campo > span { display: block; font-size: 14px; color: var(--tinta-70); margin-bottom: 8px; }

.campo input, .campo textarea {
  width: 100%;
  font: inherit;
  font-size: 16px;
  color: var(--tinta);
  background: var(--relleno);
  border: 0;
  border-radius: 999px;
  padding: 15px 22px;
  transition: background 300ms var(--curva);
}
.campo textarea { border-radius: 22px; min-height: 150px; resize: vertical; line-height: 1.6; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--tinta-25); }
.campo input:hover, .campo textarea:hover,
.campo input:focus, .campo textarea:focus { background: var(--relleno-hover); }

:focus-visible { outline: 2px solid var(--azul); outline-offset: 3px; }

.aviso { color: var(--tinta-55); font-size: 15px; line-height: 1.6; margin-top: 16px; }

/* --- Pie ------------------------------------------------------------------ */

.pie { background: var(--marino); color: var(--nieve); padding-block: 72px 40px; }

.pie-rejilla { display: grid; gap: 40px; }
@media (min-width: 768px) { .pie-rejilla { grid-template-columns: 1.6fr 1fr 1fr; } }

/* En el pie la marca se representa con el logotipo en blanco. El texto se
   mantiene en el documento, oculto visualmente, para lectores de pantalla. */
.pie .marca img {
  width: auto;
  height: 74px;
  filter: brightness(0) invert(1);
}
.pie .marca span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pie h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; color: var(--ambar); margin: 0 0 14px; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 10px; }
.pie a { color: var(--nieve-70); text-decoration: none; transition: color 300ms var(--curva); }
.pie a:hover { color: #ffffff; }
.pie .legal { margin-top: 48px; color: var(--nieve-55); font-size: 14px; }