/* ===========================================================================
   Edmundo Ríos — landing.css
   La portada: foto a sangre, claim, acceso, trayectoria y valores.

   Rehecha el 2026-09-01 con la lámina del dueño.

   ── ESTA PANTALLA VA EN OSCURO SIEMPRE ────────────────────────────────────
   Es una composición fotográfica —el estadio de noche y Edmundo señalando—,
   no una pantalla de la aplicación. En claro habría que apagar la foto o
   poner texto oscuro encima de ella, y las dos cosas rompen el cartel. Por eso
   los colores de aquí NO salen de los tokens del tema: se declaran en `.lp`
   y valen igual con `data-theme` en claro o en oscuro. El conmutador de la
   barra sigue sirviendo — cambia el tema del RESTO del sitio, que es donde el
   papá va a pasar el rato.

   Móvil primero, y con el orden INVERTIDO respecto al escritorio: arriba el
   acceso, abajo la foto. Casi todo el tráfico es un papá que viene a entrar
   desde el celular, y hacerle bajar media pantalla de foto para encontrar el
   formulario es cobrarle un peaje por lo único que venía a hacer.
   =========================================================================== */

.lp {
  /* La paleta de la lámina. Verde lima sobre casi negro, con el naranja del
     escudo para la escuela de porteros. */
  --lp-ink: #ffffff;
  --lp-dim: #b9c0ae;
  --lp-lime: #a9e034;
  --lp-black: #080a06;
  --lp-panel: rgb(255 255 255 / .045);
  --lp-line: rgb(255 255 255 / .12);

  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--lp-black);
  color: var(--lp-ink);
  overflow: hidden;
}

/* ── La foto ──────────────────────────────────────────────────────────────
   En celular es una banda arriba; en escritorio ocupa la mitad derecha a
   sangre. Va detrás de todo con `position:absolute` y no como columna de la
   rejilla: así el claim puede montarse sobre su resplandor, que es lo que
   hace que la pantalla se lea como UNA imagen y no como dos mitades. */
/* En celular la foto NO es una banda arriba: va pegada a la derecha y el
   claim se le monta encima, igual que en escritorio. Como banda ocupaba 42vh
   de alto y empujaba el formulario fuera de la pantalla — y el formulario es
   lo único que un papá viene a buscar. Al costado, cabe todo sin rodar. */
.lp-hero { position: absolute; inset: 0 0 auto auto; width: 78%; height: 64vh; z-index: 0; }
.lp-hero img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* La cara está en el tercio de arriba: con el `center` por omisión, el
     recorte lo decapita. */
  object-position: 46% top;
}
/* El fundido que entrega la foto al negro. Sin él, el corte inferior es una
   línea recta y se ve pegado. */
/* Dos capas: el velo de arriba es para que el escudo y los botones de la
   barra se lean cuando la foto tiene ahí el reflector encendido; el de abajo
   entrega la foto al negro sin una línea de corte. */
.lp-hero::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, var(--lp-black) 0%, rgb(8 10 6 / .62) 34%, rgb(8 10 6 / .04) 72%),
    linear-gradient(to bottom, rgb(8 10 6 / .5) 0%, rgb(8 10 6 / 0) 18%, rgb(8 10 6 / 0) 62%, var(--lp-black) 99%);
}

/* ── Barra superior ─────────────────────────────────────────────────────── */
.lp-bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem;
  padding: .875rem 1rem;
  padding-top: max(.875rem, env(safe-area-inset-top));
}
.lp-brand { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--lp-ink); }
.lp-brand img { max-height: 46px; width: auto; }
.lp-bar-actions { display: flex; align-items: center; gap: .5rem; }
.lp-bar-actions .btn { color: var(--lp-ink); }
.lp-lang {
  border-color: var(--lp-line);
  color: var(--lp-ink);
  letter-spacing: .1em;
}
.lp-lang:hover { border-color: var(--lp-lime); color: var(--lp-lime); }

/* ── Cuerpo ─────────────────────────────────────────────────────────────── */
.lp-main {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; flex-direction: column; gap: 1.75rem;
  width: 100%; max-width: 1440px;
  margin-inline: auto;
  padding: .5rem 1rem 1rem;
}

/* ── El claim ───────────────────────────────────────────────────────────── */
.lp-eyebrow {
  margin: 0 0 .5rem;
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--lp-lime);
}
.lp-title {
  margin: 0 0 .875rem;
  font-family: var(--font-display, var(--font));
  font-weight: 400;
  /* clamp para que en un teléfono de 360 px el claim quepa en dos renglones y
     en escritorio siga siendo un cartel. */
  font-size: clamp(2.4rem, 8.2vw, 4.9rem);
  /* 1.06, y la razón cambió al pasar a caja mixta.
     En VERSALES el choque era de acentos: la tilde de la Ó y la de la Ñ
     —que en inglés no existen, y Anton se dibujó pensando en inglés— se
     montaban sobre el renglón de arriba con el interlineado apretado.
     Ahora esas tildes bajan a la altura de x y ya no estorban, pero
     aparecen ASCENDENTES (l, d, h) y DESCENDENTES (p, y) que antes no
     había: la «y» de «Hoy,» baja justo hacia la «C» de «Campeón».
     Con line-height 1 esos dos trazos se tocan exactamente; 1.06 les
     deja el aire que hace que el claim se lea de un golpe.

     La caja alta NO se pone aquí con text-transform: va escrita en el
     archivo de idioma. Así lo que dice el archivo es lo que sale en
     pantalla, y quien traduzca puede decidir la caja de su idioma —en
     inglés los titulares se capitalizan por palabra, en español no
     siempre. */
  line-height: 1.06;
  letter-spacing: 0;
  text-wrap: balance;
}
.lp-title span, .lp-title em { display: block; font-style: normal; }
/* El segundo renglón en verde, como en la lámina. */
.lp-title em { color: var(--lp-lime); }

.lp-sub {
  margin: 0 0 1.25rem;
  max-width: 46ch;
  color: var(--lp-dim);
  font-size: clamp(.9375rem, 2.4vw, 1.0625rem);
  line-height: 1.5;
  text-wrap: pretty;
}
.lp-sub b { color: var(--lp-lime); font-weight: 600; }

/* Las dos escuelas, como pastillas */
.lp-schools { display: flex; flex-wrap: wrap; gap: .625rem; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.lp-school {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem 1.125rem;
  font-size: .9375rem; font-weight: 600;
  border-radius: 999px;
  color: var(--tag, var(--lp-lime));
  border: 1px solid color-mix(in srgb, var(--tag, var(--lp-lime)) 55%, transparent);
  background: color-mix(in srgb, var(--tag, var(--lp-lime)) 12%, transparent);
}

/* ── La tarjeta de acceso ─────────────────────────────────────────────────
   De vidrio sobre la foto: en la lámina se ve el estadio a través de ella. */
.lp-card {
  max-width: 30rem;
  padding: 1.375rem;
  border: 1px solid var(--lp-line);
  border-radius: 16px;
  background: rgb(12 15 9 / .72);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgb(0 0 0 / .45);
}
/* Anton es SOLO para el claim. Los h2/h3 del sitio la heredan, y en un
   título de tarjeta o en una etiqueta pequeña se lee apretada y desentona:
   en la lámina esos textos son de palo seco normal. */
.lp-card-t {
  margin: 0 0 .25rem;
  font-family: var(--font); font-size: 1.1875rem; font-weight: 700;
  letter-spacing: 0; text-transform: none;
}
.lp-card-s { margin: 0 0 1.125rem; font-size: .875rem; color: var(--lp-dim); }

/* Los campos, en oscuro pase lo que pase: la tarjeta está sobre la foto. */
.lp-card .label { color: var(--lp-ink); font-size: .8125rem; }
.lp-card .input-group { background: rgb(255 255 255 / .05); border-color: var(--lp-line); }
.lp-card .input { background: transparent; color: var(--lp-ink); }
.lp-card .input::placeholder { color: rgb(255 255 255 / .35); }
.lp-card .input-lead, .lp-card .input-addon { color: var(--lp-dim); }
.lp-card .input-group:focus-within { border-color: var(--lp-lime); }
.lp-form .field + .field { margin-top: .875rem; }

.lp-row { display: flex; justify-content: flex-end; margin-top: .75rem; }
.lp-forgot { font-size: .8125rem; color: var(--lp-lime); text-decoration: none; }
.lp-forgot:hover { text-decoration: underline; }

.lp-cta { margin-top: 1rem; gap: .5rem; }
/* El botón de entrar es el verde de la marca con tinta oscura, como la lámina. */
.lp-card .btn-primary { background: var(--lp-lime); border-color: var(--lp-lime); color: #10150a; font-weight: 700; }
.lp-card .btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.lp-card .btn-outline { border-color: var(--lp-lime); color: var(--lp-lime); background: transparent; }
.lp-card .btn-outline:hover { background: color-mix(in srgb, var(--lp-lime) 14%, transparent); }
.lp-card .divider { color: var(--lp-dim); }
.lp-card .divider::before, .lp-card .divider::after { border-color: var(--lp-line); }
.lp-note { margin: .875rem 0 0; font-size: .75rem; line-height: 1.45; color: var(--lp-dim); text-align: center; }

/* ── Trayectoria ──────────────────────────────────────────────────────────
   Nueve escudos. Es la credencial del entrenador y es lo que decide a un papá:
   dicen más que un párrafo de currículum. */
.lp-side { display: flex; flex-direction: column; gap: 1.25rem; }

.lp-track {
  padding: 1.125rem;
  border: 1px solid var(--lp-line);
  border-radius: 16px;
  background: rgb(12 15 9 / .55);
  backdrop-filter: blur(10px);
}
.lp-track-t {
  margin: 0 0 1rem;
  font-family: var(--font);
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--lp-lime);
}
.lp-clubs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem .5rem;
  list-style: none; margin: 0; padding: 0;
}
.lp-club { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; }
.lp-club img { width: 46px; height: 46px; object-fit: contain; }
.lp-club-ini {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--lp-line);
  font-weight: 700; font-size: .875rem; color: var(--lp-dim);
}
.lp-club-n {
  font-size: .625rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--lp-dim);
  line-height: 1.25;
}

/* ── La firma ─────────────────────────────────────────────────────────────
   El recorte trae el fondo oscuro de la foto de donde salió; `screen` lo
   descarta y deja solo el trazo, así que sirve sobre cualquier parte de la
   composición sin tener que recortarlo a mano. */
.lp-sign { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.lp-sign img { width: 190px; height: auto; }
.lp-sign figcaption { display: flex; flex-direction: column; align-items: center; line-height: 1.3; }
.lp-sign-name {
  font-family: var(--font);
  font-size: .9375rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--lp-ink);
}
.lp-sign-role {
  font-size: .625rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--lp-dim);
}

/* ── La franja de valores ─────────────────────────────────────────────────
   Cinco en escritorio, dos en celular. En una sola fila de cinco a 360 px cada
   texto quedaría en una columna de cuatro letras. */
.lp-values {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem 1rem;
  width: 100%; max-width: 1440px;
  margin: 0 auto;
  padding: 1.25rem;
  border-radius: 16px;
  border: 1px solid var(--lp-line);
  background: rgb(255 255 255 / .035);
}
.lp-value { display: flex; align-items: flex-start; gap: .75rem; }
.lp-value-ic { flex: none; color: var(--lp-lime); }
.lp-value-ic .ic { width: 26px; height: 26px; vertical-align: 0; }
.lp-value h3 {
  margin: 0 0 .25rem;
  font-family: var(--font);
  font-size: .75rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--lp-lime);
}
.lp-value p { margin: 0; font-size: .8125rem; line-height: 1.4; color: var(--lp-dim); }

/* ── Pie ────────────────────────────────────────────────────────────────── */
.lp-foot {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem;
  width: 100%; max-width: 1440px;
  margin: 0 auto;
  padding: 1.25rem 1rem;
  padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  font-size: .8125rem;
  color: var(--lp-dim);
}
.lp-copy { order: 1; }
.lp-social { order: 3; display: flex; gap: 1rem; width: 100%; justify-content: center; }
.lp-social a { color: var(--lp-dim); display: inline-flex; transition: color .15s; }
.lp-social a:hover, .lp-social a:focus-visible { color: var(--lp-lime); }
.lp-foot .footer-links { order: 2; display: flex; gap: 1rem; }
.lp-foot .footer-links a { color: var(--lp-dim); text-decoration: none; }
.lp-foot .footer-links a:hover { color: var(--lp-lime); text-decoration: underline; }

/* ── Escritorio ───────────────────────────────────────────────────────────
   La foto pasa a ocupar la mitad derecha entera, y el contenido se reparte en
   dos columnas: el claim con el acceso, y la trayectoria con la firma. */
@media (min-width: 980px) {
  .lp-hero { inset: 0 0 0 auto; width: 62%; height: 100%; }
  .lp-hero img { object-position: 42% center; }
  /* En horizontal el fundido va hacia la IZQUIERDA, que es donde vive el
     texto: si siguiera cayendo hacia abajo, el claim quedaría sobre el
     estadio iluminado y en blanco sobre blanco. */
  .lp-hero::after {
    background:
      /* El negro llega hasta el 46%: es donde termina el claim. Con el velo
         más corto, «DISCIPLINA HOY,» caía sobre el brazo iluminado y las
         últimas letras se perdían — justo las que dan el sentido. */
      linear-gradient(to right, var(--lp-black) 4%, rgb(8 10 6 / .9) 46%, rgb(8 10 6 / .12) 76%, rgb(8 10 6 / .55) 100%);
  }

  .lp-main {
    display: grid;
    /* La segunda columna arranca antes y la tarjeta se acota: así cae en la
       franja OSCURA que hay entre el formulario y el jugador, no encima de
       él. En la lámina, la trayectoria va a su izquierda —el que decide es
       Edmundo, y taparle el pecho con nueve escudos es esconder justo lo
       que hace que un papá se quede mirando. */
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    align-items: center;
    gap: 2rem;
    padding: .5rem 2rem 1rem;
  }
  /* Pegadas a la IZQUIERDA de su columna y con ancho tope: sin esto, la
     tarjeta se estira hasta el borde y vuelve a montarse sobre el jugador
     en cuanto la ventana crece. */
  .lp-side { align-self: center; align-items: flex-start; }
  .lp-track, .lp-sign { width: 100%; max-width: 20.5rem; }
  .lp-values { padding: 1.125rem 2rem; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
  .lp-foot { padding-inline: 2rem; }
  .lp-social { order: 2; width: auto; }
  .lp-foot .footer-links { order: 3; }
}

/* ── QUE QUEPA SIN SCROLL ─────────────────────────────────────────────────
   El dueño la quiere entera en pantalla: claim, acceso, trayectoria, valores
   y pie, sin rodar. En su ventana (820 px de alto) sobraban 300.

   No se resuelve con un tamaño fijo más chico —en un monitor de 1080 se vería
   diminuta— sino atando las medidas al ALTO de la ventana: `clamp(mínimo,
   Nvh, máximo)`. Así la misma hoja se aprieta en una laptop y respira en un
   monitor grande, y el día que alguien abra el navegador a media pantalla no
   se rompe nada: simplemente vuelve a rodar, que es la salida decente.

   Todo esto vive DENTRO del escritorio: en celular la página es larga a
   propósito y ahí sí se rueda. */
@media (min-width: 980px) {
  .lp-bar { padding: .5rem 2rem; }
  .lp-brand img { max-height: min(46px, 4.6vh); }

  .lp-main { padding: 0 2rem; gap: 1.75rem; align-content: center; }

  .lp-eyebrow { margin-bottom: .35rem; font-size: clamp(.625rem, 1.4vh, .6875rem); }
  .lp-title {
    font-size: clamp(2rem, 6.6vh, 4.9rem);
    margin-bottom: clamp(.35rem, 1vh, .875rem);
  }
  .lp-sub {
    margin-bottom: clamp(.6rem, 1.5vh, 1.25rem);
    font-size: clamp(.875rem, 2vh, 1.0625rem);
  }
  .lp-schools { margin-bottom: clamp(.7rem, 1.8vh, 1.5rem); gap: .5rem; }
  .lp-school { padding: clamp(.35rem, .9vh, .5rem) clamp(.8rem, 2vh, 1.125rem); font-size: clamp(.8125rem, 1.9vh, .9375rem); }

  /* La tarjeta de acceso es la que más pesa: 511 px de los 877 del cuerpo.
     Se aprieta por dentro —relleno, huecos, alto de los campos— sin quitar
     ningún control: el papá tiene que poder entrar igual. */
  .lp-card { padding: clamp(.85rem, 2vh, 1.375rem); }
  .lp-card-t { font-size: clamp(1rem, 2.5vh, 1.1875rem); }
  .lp-card-s { margin-bottom: clamp(.45rem, 1.2vh, 1.125rem); font-size: clamp(.75rem, 1.7vh, .875rem); }
  .lp-card .label { margin-bottom: .25rem; font-size: clamp(.75rem, 1.6vh, .8125rem); }
  .lp-card .input-group { min-height: clamp(34px, 4.8vh, 46px); }
  .lp-card .input { min-height: clamp(34px, 4.8vh, 46px); padding-block: 0; }
  /* `.field` trae `margin-bottom: 1rem` de components.css y ahí se iban 32 px
     de los dos campos sin que se notara: el hueco entre ellos lo pone el
     `margin-top` de aquí, no el de abajo. */
  .lp-card .field { margin-bottom: 0; }
  .lp-form .field + .field { margin-top: clamp(.4rem, 1.2vh, .875rem); }

  /* `btn-lg` impone su relleno y el `min-height` no lo baja: la altura de un
     botón la manda el padding, no el mínimo. */
  .lp-card .btn { padding-block: clamp(.4rem, 1.15vh, .6875rem); }

  /* El subtítulo, más ancho para que quepa en DOS renglones y no en tres.
     Es la línea que más barato recorta: no se quita ni una palabra. */
  .lp-sub { max-width: 62ch; }
  .lp-row { margin-top: clamp(.35rem, 1vh, .75rem); }
  .lp-cta { margin-top: clamp(.5rem, 1.4vh, 1rem); min-height: clamp(40px, 5.6vh, 52px); }
  .lp-card .divider { margin-block: clamp(.35rem, 1vh, 1rem); }
  .lp-note { margin-top: clamp(.45rem, 1.2vh, .875rem); font-size: clamp(.6875rem, 1.5vh, .75rem); line-height: 1.3; }

  /* La trayectoria y la firma, al mismo compás. */
  .lp-side { gap: clamp(.6rem, 1.6vh, 1.25rem); }
  .lp-track { padding: clamp(.7rem, 1.8vh, 1.125rem); }
  .lp-track-t { margin-bottom: clamp(.5rem, 1.5vh, 1rem); }
  .lp-clubs { gap: clamp(.5rem, 1.5vh, 1rem) .5rem; }
  .lp-club { gap: clamp(.3rem, .8vh, .5rem); }
  .lp-club img, .lp-club-ini { width: clamp(32px, 4.6vh, 46px); height: clamp(32px, 4.6vh, 46px); }
  .lp-sign img { width: clamp(120px, 17vh, 190px); }

  .lp-values { padding: clamp(.5rem, 1.25vh, 1.5rem) 2rem; gap: clamp(.5rem, 1.2vh, 1.5rem) 1rem; }
  .lp-value-ic .ic { width: clamp(20px, 2.9vh, 26px); height: clamp(20px, 2.9vh, 26px); }
  .lp-value p { font-size: clamp(.6875rem, 1.5vh, .8125rem); line-height: 1.32; }

  .lp-foot { padding: clamp(.3rem, .9vh, 1.25rem) 2rem; font-size: clamp(.6875rem, 1.6vh, .8125rem); }
  .lp-bar { padding-block: clamp(.35rem, 1vh, .75rem); }
  .lp-card .label { margin-bottom: .2rem; line-height: 1.2; }
  .lp-values { row-gap: clamp(.5rem, 1.2vh, 1.5rem); }
}
/* En pantallas grandes el claim crece pero la tarjeta no: un formulario de
   600 px de ancho se lee peor, no mejor. */
@media (min-width: 1440px) {
  /* Con el tope por ALTO también aquí: si no, en una ventana ancha pero baja
     el titular volvía a 80 px y se llevaba él solo 140 px de pantalla. */
  .lp-title { font-size: clamp(2rem, 6.6vh, 5rem); }
  .lp-main { padding-inline: 3rem; }
  .lp-values, .lp-foot { padding-inline: 3rem; }
}

/* Quien pidió menos movimiento no necesita el desenfoque, que además es lo
   más caro de pintar de esta pantalla. */
@media (prefers-reduced-motion: reduce) {
  .lp-card, .lp-track { backdrop-filter: none; }
}

/* ── Ventana baja: se quita la línea que menos pesa ────────────────────────
   Por debajo de ~880 px de alto ya no alcanza con apretar: seguir encogiendo
   la letra la deja ilegible. Así que se cae el subtítulo de la tarjeta
   —«Entra para seguir a tus jugadores»—, que es lo único de esta pantalla que
   no aporta nada que no diga ya el título de arriba. Ningún control se
   esconde: el papá sigue teniendo sus dos campos y sus dos botones. */
@media (min-width: 980px) and (max-height: 880px) {
  .lp-card-s { display: none; }
}

/* Portátil de 720: quedaban 3 px de más. Se los quita la franja de valores,
   que es la que puede ceder sin que se note. */
@media (min-width: 980px) and (max-height: 760px) {
  .lp-values { padding-block: .45rem; row-gap: .45rem; }
  .lp-value p { line-height: 1.28; }
}

/* ═══ CELULAR ══════════════════════════════════════════════════════════════
   La lámina del móvil: escudo grande arriba, la foto al costado con el claim
   encima, pastillas en versalitas, la tarjeta con su icono redondo y los dos
   campos en pareja, la franja de valores en CLARO, la trayectoria con su
   trofeo y el pie con la firma y las redes.

   La prioridad la puso el dueño: **el formulario tiene que verse sin rodar**.
   Todo lo de aquí abajo existe para eso o para parecerse a la lámina. */
@media (max-width: 979px) {

  /* ── La barra ─────────────────────────────────────────────────────────
     El escudo, en grande: es lo único que identifica la escuela antes de
     que se lea una palabra. */
  .lp-brand img { max-height: clamp(48px, 12vw, 68px); }
  .lp-lang { padding: .5rem .9rem; font-size: .8125rem; }

  /* ── El claim ─────────────────────────────────────────────────────────
     Se acota al 62% para que no se meta debajo del jugador: la foto entra
     por la derecha y ahí el texto blanco sobre el estadio no se lee. */
  .lp-say { position: relative; z-index: 1; }
  .lp-eyebrow { font-size: .6875rem; letter-spacing: .16em; }
  /* 76% y un punto más chico: al 62% «MAÑANA.» se caía a un tercer renglón
     y el claim dejaba de leerse de un golpe, que es lo único que tiene que
     hacer. El jugador entra pasado el 72%, así que hay sitio. */
  .lp-title { font-size: clamp(1.9rem, 8.4vw, 3rem); max-width: 76%; }
  /* 64%: uno o dos renglones menos que al 58%, y todavía lejos del jugador
     —entra por la derecha y su cuerpo empieza pasado el 70%—. */
  .lp-sub { max-width: 64%; font-size: .9375rem; }

  /* Las pastillas, en versalitas y más grandes: en la lámina son botones. */
  .lp-schools { gap: .625rem; margin-bottom: .875rem; }
  .lp-school {
    padding: .625rem 1.125rem;
    font-size: .8125rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
  }

  /* ── La tarjeta ───────────────────────────────────────────────────────
     Con su icono redondo, y los dos campos en pareja para ahorrar el alto
     que hace falta para que el botón de ENTRAR se vea sin rodar. */
  .lp-card { max-width: none; padding: 1rem; }
  .lp-card-head { display: flex; align-items: center; gap: .875rem; margin-bottom: .875rem; }
  .lp-card-ic {
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%;
    border: 2px solid var(--lp-lime); color: var(--lp-lime);
  }
  .lp-card-ic .ic { width: 26px; height: 26px; vertical-align: 0; }
  .lp-card-t { font-size: 1.125rem; }
  .lp-card-s { margin: 0; font-size: .8125rem; }

  /* Dos columnas a partir de 380 px. Por debajo se apilan: dos campos de
     160 px con «tu@correo.com» dentro no se pueden ni leer ni tocar. */
  /* `end`: la etiqueta de la izquierda ocupa dos renglones y la de la
     derecha uno. Sin esto, los dos campos quedaban a distinta altura y el
     par se leía torcido. */
  /* Uno debajo del otro, a lo ancho. Estuvieron en pareja un rato para
     ahorrar alto, pero en la mano un campo de 160 px se toca mal y la
     etiqueta larga descuadraba el par. El alto se recupera apretando lo de
     arriba, no encogiendo lo que se teclea. */
  .lp-fields { display: grid; gap: .625rem; }
  .lp-card .field { margin-bottom: 0; }
  .lp-fields .field + .field { margin-top: 0; }
  .lp-card .label { font-size: .75rem; font-weight: 600; }

  .lp-row { margin-top: .875rem; }

  /* ── Los valores, en CLARO ────────────────────────────────────────────
     Es el único bloque claro de la pantalla, y en la lámina lo es a
     propósito: corta el negro y marca dónde termina el acceso y empieza
     quién es Edmundo. */
  .lp-values {
    background: #f2f4ee;
    border-color: transparent;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 1rem .5rem;
    padding: 1.25rem 1rem;
    margin-top: 1.25rem;
    text-align: center;
  }
  .lp-value { flex-direction: column; align-items: center; gap: .5rem; }
  /* El filete separa PAREJAS, no todo: con dos columnas, ponérselo a cada uno
     le dibujaba una raya suelta al primero de cada renglón. */
  .lp-value:nth-child(even) { border-left: 1px solid #dde0d6; }

  /* ── El orden de la lámina ──────────────────────────────────────────────
     claim → acceso → VALORES → trayectoria → firma → pie.
     `display: contents` disuelve el contenedor y deja a sus dos hijos como
     hermanos del resto: es lo único que permite meter la franja de valores
     ENTRE ellos sin duplicar el HTML. El relleno lateral se pasa a los hijos,
     que es lo que ese contenedor aportaba. */
  .lp-main { display: contents; }
  .lp-say  { order: 1; padding: .5rem 1rem 0; }
  .lp-values { order: 2; margin-inline: 1rem; width: auto; }
  .lp-side { order: 3; padding: 0 1rem; }
  .lp-foot { order: 4; }
  .lp-value-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--lp-lime); color: #16200c;
  }
  .lp-value-ic .ic { width: 24px; height: 24px; vertical-align: 0; }
  .lp-value h3 { color: #4c7a12; }
  .lp-value p { color: #4a4f44; }

  /* ── La trayectoria ───────────────────────────────────────────────────
     Cada club en su recuadro, y el título entre dos filetes. */
  .lp-side { margin-top: 1.5rem; }
  .lp-track { padding: 0; border: 0; background: none; backdrop-filter: none; }
  .lp-track-t {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    margin-bottom: 1rem;
    font-size: .875rem; letter-spacing: .16em;
  }
  .lp-track-t::before, .lp-track-t::after {
    content: ""; flex: 1 1 auto; height: 1px;
    background: color-mix(in srgb, var(--lp-lime) 45%, transparent);
  }
  .lp-track-t .ic { width: 18px; height: 18px; vertical-align: 0; flex: none; }
  .lp-clubs { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .625rem; }
  .lp-club {
    padding: .75rem .375rem;
    border: 1px solid var(--lp-line);
    border-radius: 12px;
    background: rgb(255 255 255 / .04);
  }
  .lp-club img, .lp-club-ini { width: 40px; height: 40px; }

  /* ── El pie ───────────────────────────────────────────────────────────
     La firma y el nombre a la izquierda, las redes en círculos a la
     derecha, y los legales debajo. */
  .lp-sign { flex-direction: row; align-items: center; gap: .75rem; margin-top: 1.5rem; }
  .lp-sign img { width: 118px; }
  .lp-sign figcaption { align-items: flex-start; text-align: left; }

  .lp-foot { border-top: 1px solid var(--lp-line); margin-top: 1.25rem; }
  .lp-social { order: 2; width: auto; gap: .625rem; }
  .lp-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--lp-lime) 55%, transparent);
    color: var(--lp-lime);
  }
  .lp-foot .footer-links { order: 3; width: 100%; justify-content: center; }
}

/* ── Que el formulario entre sin rodar, con los campos apilados ────────────
   Con un campo por renglón la tarjeta creció ~80 px y en un teléfono de 390
   se salía por abajo. El alto se recupera de lo de ARRIBA —el saludo, las
   pastillas, el aire de la tarjeta—, nunca de lo que se teclea: los campos y
   los botones se quedan como están, que son los que se tocan con el pulgar. */
@media (max-width: 979px) {
  .lp-bar { padding-block: .5rem; }
  .lp-say { padding-top: .25rem; }

  .lp-title { margin-bottom: .5rem; }
  .lp-sub { font-size: .875rem; line-height: 1.45; margin-bottom: .875rem; }

  .lp-schools { margin-bottom: .75rem; }
  .lp-school { padding: .5rem 1rem; }

  .lp-card-head { gap: .75rem; margin-bottom: .75rem; }
  .lp-card-ic { width: 44px; height: 44px; }
  .lp-card-ic .ic { width: 22px; height: 22px; }
  .lp-card-t { font-size: 1.0625rem; }

  .lp-row { margin-top: .625rem; }
  .lp-cta { margin-top: .75rem; }
  .lp-card .divider { margin-block: .625rem; }
  .lp-note { margin-top: .625rem; font-size: .6875rem; line-height: 1.35; }
}

/* ── Que «CREAR UNA CUENTA» entre sin rodar ────────────────────────────────
   En un teléfono alto el botón de crear cuenta quedaba mordido por el borde de
   abajo: faltaban ~30 px. El alto se saca del CLAIM, que es texto de venta y se
   lee de un vistazo, nunca de la tarjeta — los campos y los dos botones son lo
   que se toca con el pulgar y encogerlos se paga en errores de dedo.

   La palanca que más rinde es la medida del párrafo: al 64% caía en cuatro
   renglones y al 72% cae en tres. El jugador de la foto entra por la derecha y
   su cuerpo empieza pasado el 74%, así que hay sitio — y el último renglón
   siempre queda corto, que es justo por donde asoma. */
@media (max-width: 979px) {
  .lp-eyebrow { font-size: .625rem; margin-bottom: .25rem; }

  /* Un punto menos de cuerpo. «CAMPEÓN MAÑANA.» sigue cabiendo en un renglón
     a 390 px, que es lo único que este titular tiene que cumplir. */
  .lp-title { font-size: clamp(1.75rem, 7.6vw, 3rem); margin-bottom: .375rem; }

  .lp-sub {
    max-width: 72%;
    font-size: .8125rem;
    line-height: 1.4;
    margin-bottom: .75rem;
  }

  .lp-schools { margin-bottom: .625rem; }
  .lp-card { padding: .875rem; }
  .lp-card-head { margin-bottom: .625rem; }
  .lp-card-s { font-size: .78125rem; line-height: 1.35; }
}

/* Teléfonos cortos (o con la barra de pestañas de Chrome comiéndose el alto).
   Aquí ya no alcanza con apretar: el párrafo se recorta a dos renglones y el
   subtítulo del saludo se va. Lo que se pierde es adorno — el claim de arriba y
   la etiqueta de cada campo dicen lo mismo con menos. */
/* Por omisión manda la frase larga; la corta espera escondida. */
.lp-sub-short { display: none; }

/* Teléfonos cortos (o con la barra de pestañas de Chrome comiéndose el alto).
   Aquí ya no alcanza con apretar: entra la frase CORTA en lugar de la larga y
   el subtítulo del saludo se va. Lo que se pierde es adorno — el claim de
   arriba y la etiqueta de cada campo dicen lo mismo con menos.

   Se cambia de frase en vez de recortar la larga: `line-clamp` la partía a
   media palabra —«…Entrenamiento…»— y unos puntos suspensivos en el primer
   párrafo de la portada se leen como texto roto, no como una decisión. */
@media (max-width: 979px) and (max-height: 720px) {
  .lp-sub-full  { display: none; }
  .lp-sub-short { display: inline; }
  .lp-sub { margin-bottom: .625rem; }
  .lp-card-s { display: none; }
  .lp-schools { margin-bottom: .5rem; }
}

/* ── La trayectoria, pegada al login y fuera del jugador ───────────────────
   Estaba centrada en una segunda columna ancha y le caía encima del pecho a
   Edmundo: nueve escudos tapando justo a la persona que hace que un papá se
   quede mirando.

   El primer intento fue estrechar la segunda columna, y salió al revés: al
   quitarle ancho a la derecha, la PRIMERA columna creció y empujó el cuadro
   todavía más adentro del jugador. En una rejilla de fracciones, mover algo a
   la izquierda no se hace encogiéndolo — se hace topando lo que tiene delante.

   Así que se le pone tope a la columna del login (36rem, lo justo para la
   tarjeta y el claim) y la segunda arranca justo después. El cuadro cae
   entonces en la franja oscura que va del borde de la tarjeta al brazo, con
   `align-self: end` para que su base quede a ras de la del formulario: los dos
   terminan en la misma línea y se leen como una pareja, no como una pieza
   suelta flotando más arriba.

   El tope de 19rem tampoco es decorativo: por encima de eso el cuadro vuelve a
   invadir al jugador en cuanto la ventana pasa de 1500 px. */
@media (min-width: 980px) {
  .lp-main { grid-template-columns: minmax(0, 36rem) minmax(0, 1fr); }

  .lp-side { align-self: end; }
  .lp-track, .lp-sign { max-width: 19rem; }

  /* Los escudos, un punto más chicos y más juntos: en 19rem de ancho, tres
     columnas de 46 px se tocaban y el nombre del club se partía en dos. */
  .lp-club img, .lp-club-ini { width: clamp(30px, 4vh, 40px); height: clamp(30px, 4vh, 40px); }
  .lp-clubs { gap: clamp(.45rem, 1.2vh, .8rem) .375rem; }
  .lp-club-n { font-size: .625rem; letter-spacing: .06em; }

  /* La firma se alinea con el cuadro en vez de centrarse en la columna: dos
     bloques con el mismo borde izquierdo se leen como uno solo. */
  .lp-sign { align-items: flex-start; }
  .lp-sign figcaption { align-items: flex-start; text-align: left; }
  .lp-sign img { width: clamp(110px, 15vh, 160px); }
}

/* ── El video del fondo ────────────────────────────────────────────────────
   Va ENCIMA de la foto, con las mismas medidas y el mismo encuadre, y aparece
   fundido cuando `hero.js` le pone `is-ready`. La foto se queda debajo para
   siempre: es la que se pinta primero y la que sigue puesta si el video no
   llega. Dos capas en el mismo hueco, así que no hay salto de maquetación.

   El velo (`.lp-hero::after`) sigue encima de las dos sin tocar nada: es un
   pseudoelemento y se pinta después de los hijos reales. Eso es lo que
   mantiene legible el claim en blanco sobre el estadio iluminado. */
.lp-hero-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Mismo encuadre que la foto: la cara está en el tercio de arriba y con el
     `center` por omisión el recorte la decapita. */
  object-position: 46% top;
  opacity: 0;
  transition: opacity .8s ease;
  /* No es contenido: no se puede tocar ni seleccionar, y ningún clic dirigido
     al claim debe caer aquí. */
  pointer-events: none;
}
.lp-hero-vid.is-ready { opacity: 1; }

/* En horizontal el encuadre cambia, igual que el de la foto.

   `top` y no `center`: en horizontal sobran ~460 px de alto, y centrarlos se los
   quita mitad y mitad — al portero del video le cortaba la coronilla en el plano
   de apertura. Alineado arriba nunca se le corta la cabeza; a cambio, en el
   clavado del final se ve más gradería, que es justo la zona donde va el claim.
   Entre un encuadre con aire y uno que decapita, gana el que tiene aire. */
@media (min-width: 980px) {
  .lp-hero-vid { object-position: 42% top; }
}

/* Quien pidió menos movimiento no lo ve ni un cuadro. `hero.js` además ni
   siquiera descarga el archivo; esto es el segundo candado, por si el guión no
   corre —bloqueado, con error, o servido a medias—. */
@media (prefers-reduced-motion: reduce) {
  .lp-hero-vid { display: none; }
}

/* ── Recuperar el alto que pide el claim con aire ──────────────────────────
   Soltar el interlineado del titular cuesta píxeles, y en un teléfono corto
   esos píxeles se los come el botón de crear cuenta: medido, en 360×640 pasó
   de entrar con 12 px de sobra a quedar cortado.

   Se pagan quitando el antetítulo, que es la línea que menos trabaja de la
   pantalla: «Escuela de Fútbol y Porteros» ya lo dice el escudo de la barra,
   y justo debajo hay dos pastillas que lo repiten. En un teléfono normal se
   queda; solo desaparece donde de verdad estorba. */
@media (max-width: 979px) and (max-height: 720px) {
  .lp-eyebrow { display: none; }
  .lp-title { margin-bottom: .3125rem; }
}

/* ═══ Tipografía v3: todo en minúscula ════════════════════════════════════
   La lámina nueva escribe la portada ENTERA en minúsculas, claim incluido. Es
   una decisión tipográfica, no de contenido: los archivos de idioma siguen
   diciendo «Escuela de Fútbol y Porteros» con su caja correcta, y eso es lo que
   lee un lector de pantalla y lo que va en el <title> y en las etiquetas de
   compartir. Aquí solo se cambia cómo se DIBUJA.

   Va en dos capas porque `text-transform` no se hereda por encima de un valor
   explícito: la de abajo cubre todo lo que no lo declara, y la lista de arriba
   apaga uno por uno los que sí lo declaraban —incluido `.btn`, que lo impone
   desde components.css a todos los botones de la plataforma—. */
.lp { text-transform: lowercase; }

.lp .btn,
.lp-eyebrow,
.lp-track-t,
.lp-sign-role,
.lp-school {
  text-transform: lowercase;
  /* Y sin el espaciado de versalitas: ese tracking existe para separar
     mayúsculas, que se tocan entre sí. En minúscula deja las palabras
     descosidas y se leen letra a letra. */
  letter-spacing: 0;
}

/* ── El claim ─────────────────────────────────────────────────────────────
   Sale de Anton y entra en la del cuerpo, muy negra y en CURSIVA, como la
   lámina. La cursiva es lo que le da el gesto deportivo —de velocidad— que
   antes ponía la condensada; sin ella, en minúscula el claim se queda plano.

   `font-style: italic` y no `oblique`: si la fuente del sistema trae cursiva
   de verdad se usa esa, que está dibujada, en vez de inclinar la redonda. */
.lp-title {
  font-family: var(--font, system-ui, sans-serif);
  font-weight: 800;
  font-style: italic;
  letter-spacing: -.02em;
  line-height: 1.02;
}

/* Dos declaraciones explícitas que ganaban a las de arriba por especificidad,
   y que no se veían buscando «uppercase»:

   · `.lp-title span, .lp-title em` ponía `font-style: normal` en los DOS
     renglones del claim. La cursiva estaba puesta en el padre, así que no
     llegaba al texto: el titular salía recto. Aquel `normal` existía para que
     el <em> del segundo renglón no se inclinara cuando el claim iba en versales
     condensadas; ahora la cursiva es justo lo que se busca.
   · `.lp-card-t` traía `text-transform: none`, que bloqueaba la minúscula
     heredada y dejaba el saludo del acceso con su mayúscula inicial. */
.lp-title span,
.lp-title em { font-style: italic; }



/* ── Los valores en celular: oscuros, como el resto ────────────────────────
   Eran el único bloque CLARO de la pantalla. Venía de una lámina anterior donde
   esa franja cortaba el negro a propósito; en la actual va oscura, y sola sobre
   el estadio se leía como una tarjeta pegada de otro sitio.

   Se devuelve al mismo tratamiento que en escritorio —vidrio tenue sobre el
   fondo— y con él se caen los tres parches que existían solo para sobrevivir en
   claro: el círculo lima relleno detrás del icono y los dos colores de texto
   oscuros. En oscuro el icono va suelto y los colores son los de la marca. */
@media (max-width: 979px) {
  .lp-values {
    background: rgb(255 255 255 / .035);
    border: 1px solid var(--lp-line);
  }
  /* El filete que separaba parejas era gris claro: sobre negro no se veía. */
  .lp-value:nth-child(even) { border-left: 1px solid var(--lp-line); }

  /* El icono, sin el disco lima: ese relleno existía para que se viera sobre
     el fondo claro. Suelto y en lima es como va en el resto de la pantalla. */
  .lp-value-ic {
    width: auto; height: auto;
    background: none;
    border-radius: 0;
    color: var(--lp-lime);
  }
  .lp-value-ic .ic { width: 26px; height: 26px; }

  .lp-value h3 { color: var(--lp-lime); }
  .lp-value p  { color: var(--lp-dim); }
}

/* ── Lo que NO se pasa a minúscula ─────────────────────────────────────────
   La minúscula es el estilo de la portada, pero tiene dos excepciones, y las
   dos son la misma razón: son NOMBRES.

   · El claim abre cada renglón con mayúscula («Disciplina hoy,» / «Campeón
     mañana.») porque son dos frases, y una frase empieza en alta.
   · «Edmundo Ríos» es el nombre de una persona. Escribirlo en minúscula no es
     un gesto tipográfico, es escribirlo mal — y es justo el nombre que sostiene
     toda la escuela.

   El texto del archivo de idioma ya trae la caja correcta; aquí solo se le
   quita el transformador de encima. */
.lp-title,
.lp-title span,
.lp-title em,
.lp-sign-name,
/* Los cinco valores: «Disciplina», «Mentalidad»… Son los títulos de una
   lista, y un título de lista abre en alta como cualquier frase.
   `text-transform: none` y NO `capitalize`: capitalize pone en alta la
   primera letra de CADA palabra, así que el día que un valor sea «Trabajo
   en equipo» saldría «Trabajo En Equipo». La caja ya está bien escrita en
   el archivo de idioma; aquí solo se deja de pisarla. */
.lp-value h3,
/* Y el pie, que lleva el mismo nombre de persona que la firma: verlo en
   alta arriba y en baja abajo se lee como un descuido, no como un estilo. */
.lp-copy { text-transform: none; }

/* Estos dos salieron de la lista de minúsculas, pero el espaciado de
   versalitas que traían sigue estorbando: en caja normal deja las palabras
   descosidas. */
.lp-sign-name,
.lp-value h3 { letter-spacing: 0; }

/* ── La cabecera de la tarjeta de acceso ───────────────────────────────────
   El icono estaba SOLO en su renglón y el saludo debajo: en escritorio no
   existía regla para esta cabecera —la que la ponía en fila vivía dentro del
   bloque de celular— así que el icono y el texto se apilaban como dos bloques
   sueltos y sobraba un renglón de aire justo donde empieza el formulario.

   Se sube la regla al nivel base: en fila a cualquier ancho, que es como se
   lee una cabecera con icono. El bloque de celular ya solo ajusta medidas. */
.lp-card-head {
  display: flex;
  align-items: center;
  gap: .875rem;
  margin-bottom: 1rem;
}
.lp-card-ic {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--lp-lime);
  color: var(--lp-lime);
}
.lp-card-ic .ic { width: 26px; height: 26px; vertical-align: 0; }
/* El saludo y su línea de apoyo, ya sin el margen que los separaba del icono
   cuando cada uno iba en su renglón. */
.lp-card-head .lp-card-t { margin-bottom: .125rem; }
.lp-card-head .lp-card-s { margin-bottom: 0; }

/* ── Los párrafos, en caja de frase ────────────────────────────────────────
   La minúscula se queda como estilo de los RÓTULOS —botones, etiquetas de
   campo, pastillas, el antetítulo, «trayectoria», los nombres de club—, que son
   palabras sueltas y ahí funciona como gesto.

   Pero un párrafo es una frase, y una frase abre en alta. En minúscula el ojo
   pierde dónde empieza cada oración: «formamos atletas con carácter, pasión y
   valores. entrenamiento profesional…» se lee de corrido y el punto se pasa por
   alto.

   Las cuatro cadenas ya vienen bien escritas del archivo de idioma; aquí solo
   se les levanta el transformador de encima. */
.lp-sub,
.lp-card-s,
.lp-note,
.lp-value p { text-transform: none; }

/* ── El claim tiene que caber en DOS renglones ─────────────────────────────
   Al cambiar Anton por la del cuerpo en negrita, el claim se ensanchó mucho:
   Anton es una CONDENSADA y la nueva no. Con el techo de antes cabía en dos
   renglones por los pelos —«Campeón mañana.» ocupaba 577 px de los 576 de la
   columna— y bastaba abrir la ventana un poco más alta para que el tamaño
   creciera (el techo iba en `vh`) y se partiera en tres.

   El techo baja a 3.5rem, medido para que «Campeón mañana.» entre con holgura
   en la columna del acceso, que está topada en 36rem. No se ensancha la columna
   porque ese tope es justo lo que mantiene la trayectoria fuera del jugador.

   Si algún día cambia el claim a una frase más larga, esto hay que volver a
   medirlo: el número sale del texto, no de la nada. */
@media (min-width: 980px) {
  .lp-title { font-size: clamp(2rem, 5.8vh, 3.5rem); }
}

/* ── La tarjeta de acceso, en caja de frase ────────────────────────────────
   El saludo, las dos etiquetas y los dos botones abren en alta. Son lo que se
   LEE y se toca para entrar; la minúscula se queda para los rótulos de adorno
   —el antetítulo, las pastillas, «trayectoria», los nombres de club—.

   `.lp-cta` y no `.lp .btn`: así el cambio alcanza a los dos botones del
   formulario sin tocar el selector de idioma ni el interruptor de tema de la
   barra, que siguen siendo rótulos.

   «¿Olvidaste tu contraseña?» va con ellos aunque no estaba señalado: es una
   frase completa dentro del mismo bloque, y dejarla sola en minúscula entre
   cinco elementos en alta se lee como un olvido, no como una decisión. */
.lp-card-t,
.lp-card .label,
.lp .lp-cta,
.lp-forgot { text-transform: none; }

/* Las etiquetas salían de la lista de rótulos, pero el tracking de versalitas
   que traían de allí sigue estorbando en caja normal. */
.lp-card .label { letter-spacing: 0; }

/* ── Las pastillas llevan NOMBRES ──────────────────────────────────────────
   «Equipo» y «Porteros» no son rótulos: son los nombres de las dos escuelas, y
   salen de `schools.short_name`, donde el admin los escribe con su caja. Que el
   CSS se la bajara era lo mismo que hacerle con «Edmundo Ríos». */
.lp-school { text-transform: none; }

/* ── Lo que se TECLEA nunca se transforma ──────────────────────────────────
   Esto no era solo cosa del texto guía. `text-transform: lowercase` en un campo
   cambia lo que la persona VE mientras escribe: alguien que teclea «Gonzalo»
   veía «gonzalo» y el correo con mayúscula parecía haberse escrito mal. El
   valor que se envía nunca cambia, así que el fallo no rompía el acceso — solo
   le hacía dudar a quien está entrando, que es peor de encontrar.

   Va sobre el campo y no sobre `::placeholder`: el texto guía hereda del campo,
   así que arreglando el campo se arreglan los dos de una vez. */
.lp-card .input,
.lp-card .select { text-transform: none; }

/* ── El rótulo de la trayectoria ───────────────────────────────────────────
   Estaba a 11 px, en versalitas muy espaciadas y con el icono pegado al texto
   sin separación: se leía como una etiqueta de sistema, no como el título de la
   sección que presenta la carrera de Edmundo — que es de lo que más convence a
   un papá que está decidiendo.

   Tres cosas: caja de frase («Trayectoria», que es un título), cuerpo de lectura
   en vez de tamaño de nota al pie, y el icono en su sitio con aire alrededor.
   `align-items: center` y un ancho fijo para el icono: en línea, la copa se
   apoyaba en la base del texto y quedaba media letra más abajo. */
.lp-track-t {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-transform: none;
  font-size: .9375rem;
  letter-spacing: .01em;
}
.lp-track-t .ic {
  flex: none;
  width: 20px;
  height: 20px;
  vertical-align: 0;
}

/* ── Juntar la trayectoria con el acceso ───────────────────────────────────
   Entre las dos tarjetas quedaban 125 px de vacío, y no era el hueco entre
   columnas: la columna izquierda mide 36rem pero la tarjeta de acceso estaba
   topada en 30, así que sobraban seis columnas de aire DENTRO de su propia
   celda, antes siquiera de empezar el hueco. Por eso se veía descuadrado —
   la tarjeta no llenaba su columna.

   El primer intento fue al revés: estrechar la columna y sacar el claim fuera
   con `max-width`. No funciona. Un bloque no CRECE con `max-width`; su ancho lo
   marca el padre, así que el titular se quedó en la medida corta y volvió a
   partirse en tres renglones. La columna se queda en 36rem —que es lo que el
   claim necesita— y es la tarjeta la que se estira hasta llenarla.

   El hueco entre columnas también baja de 2rem a 1.5rem: con las dos tarjetas
   ya del mismo ancho, dos de aire las separaba de más. */
@media (min-width: 980px) {
  .lp-card { max-width: none; }
  .lp-main { gap: 1.5rem; }
}

/* ── La barra, siempre a la vista ──────────────────────────────────────────
   `sticky` y no `fixed`: sticky CONSERVA su sitio en el flujo, así que el claim
   no se mete debajo y no hay que compensar con un relleno del alto exacto de la
   barra — que además habría que mantener a mano cada vez que cambie su padding.

   Para que sticky funcione hace falta cambiar el recorte del contenedor:
   `overflow: hidden` convierte a `.lp` en contenedor de scroll, y dentro de uno
   la barra se pega a ÉL —que no rueda— en vez de a la ventana. Es el motivo
   número uno por el que un sticky «no funciona» sin dar ningún error.

   `clip` recorta igual pero no crea contenedor de scroll. Se deja solo en el eje
   horizontal, que es lo que el `hidden` estaba protegiendo: que la foto del hero
   no saque una barra de desplazamiento lateral. */
.lp {
  /* Por PROPIEDAD y no por el atajo: en `overflow: a b` el primero es el eje
     X y el segundo el Y, y escribirlo al revés recorta el vertical — la
     página se queda sin poder desplazarse y no avisa de nada. Escrito así
     no hay forma de confundir el orden. */
  overflow-x: clip;
  overflow-y: visible;
}
.lp-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  /* Sin fondo mientras está arriba: ahí la barra flota sobre la foto, que es
     como está diseñada. El fondo solo aparece al rodar. */
  border-bottom: 1px solid transparent;
  transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}

/* Al bajar, cristal esmerilado. Es lo mismo que hace la tarjeta del registro:
   el desenfoque grande es lo que convierte el estadio en manchas y deja legible
   lo que va encima — con poco desenfoque se transparenta la grada y el nombre
   de la escuela se pica. */
.lp-bar.is-stuck {
  background: rgb(8 10 6 / .62);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border-bottom-color: var(--lp-line);
}

/* Sin `backdrop-filter` no hay desenfoque y el escudo caería sobre la grada
   iluminada: ahí la barra se vuelve casi opaca. Se pierde el efecto, que es lo
   prescindible, y se conserva que se lea. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .lp-bar.is-stuck { background: rgb(8 10 6 / .94); }
}

/* Y a quien tenga la transparencia apagada en su sistema, barra sólida. */
@media (prefers-reduced-transparency: reduce) {
  .lp-bar.is-stuck {
    background: rgb(8 10 6 / .96);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ── Los clubes llevan NOMBRE propio ───────────────────────────────────────
   «Puebla», «Tigres UANL», «Selección Nacional». Son nombres, como el de
   Edmundo: bajarlos a minúscula es escribirlos mal.

   `text-transform: none` y NO `capitalize`: capitalize habría roto las siglas
   —«Tigres Uanl», «Potros Uaem»—. La caja ya está bien escrita en el archivo
   de idioma, siglas incluidas; aquí solo se deja de pisarla. */
.lp-club-n { text-transform: none; letter-spacing: 0; }