/* ESL · MAKO — estilos de los bloques dinámicos
   ============================================================================
   SISTEMA DE TOKENS
   ============================================================================

   Todo el diseño de los bloques (colores, tipografía y radios) está declarado
   una sola vez, arriba, como variables CSS en :root. Ninguna regla de este
   archivo vuelve a escribir un color o un tamaño literal: todas leen un token.

   PARA CAMBIAR EL DISEÑO NO HACE FALTA TOCAR ESTE ARCHIVO.
   Basta con redefinir los tokens que se quieran cambiar desde:

     · Elementor → Ajustes del sitio → CSS personalizado, o
     · el CSS personalizado de la página, o
     · el style.css del tema hijo.

   Ejemplo — cambiar el azul de marca y redondear las tarjetas:

       :root{
         --esl-blue:#0d4f7a;
         --esl-radius-card:14px;
       }

   Los tokens van en :root a propósito (no en los bloques): así una redefinición
   escrita en cualquier hoja posterior gana sin peleas de especificidad, y los
   elementos anidados que quedan fuera del contenedor del bloque también los ven.

   PARA DESACTIVAR ESTA HOJA POR COMPLETO y diseñar los bloques desde cero,
   añadir en wp-config.php:  define( 'ESL_MAKO_DISABLE_CSS', true );
   El HTML de los shortcodes no cambia; solo deja de cargarse este archivo.

   ACCESIBILIDAD: los pares de color de la paleta por defecto superan 4.5:1
   (WCAG AA). Si se cambian los tokens de color hay que volver a comprobar el
   contraste — el sistema de tokens no lo garantiza por sí solo.

   MANTENIMIENTO: al tocar este archivo hay que subir ESL_MAKO_VERSION en
   esl-mako-sync.php o el navegador seguirá sirviendo la hoja antigua.
   ========================================================================== */

:root{

  /* ---- Color · marca ------------------------------------------------- */
  --esl-navy:#0a2540;          /* azul muy oscuro: fondos y titulares       */
  --esl-navy-deep:#062031;     /* texto sobre los acentos claros            */
  --esl-blue:#146092;          /* azul ESL: enlaces, antetítulos, cifras    */
  --esl-blue-deep:#0f3556;     /* extremo oscuro de los degradados          */
  --esl-bright:#4ab2f9;        /* azul luminoso: acento y botón principal   */
  --esl-bright-hover:#2ea0ef;  /* el mismo, al pasar el ratón               */
  --esl-cyan:#ace9f1;          /* acento claro sobre fondo oscuro           */

  /* ---- Color · texto y superficies ------------------------------------ */
  --esl-ink:var(--esl-navy);   /* color de titular por defecto              */
  --esl-grey:#5c6670;          /* texto secundario                          */
  --esl-grey-soft:#8a939c;     /* texto terciario (pie de datos antiguos)   */
  --esl-line:#e2e8ef;          /* bordes y separadores                      */
  --esl-surface:#fff;          /* fondo de tarjeta                          */
  --esl-surface-soft:#fafcfe;  /* pie de tarjeta                            */
  --esl-surface-hover:#f7fafd; /* fila de tabla al pasar el ratón           */
  --esl-surface-alt:#f4f6fa;   /* bloque de estado vacío                    */
  --esl-on-dark:#fff;          /* texto sobre fondo oscuro                  */
  --esl-on-bright:var(--esl-navy-deep); /* texto sobre el azul luminoso     */

  /* ---- Color · capas sobre fondo oscuro -------------------------------- */
  --esl-dark-fill:rgba(255,255,255,.1);
  --esl-dark-line:rgba(255,255,255,.18);
  --esl-dark-text:rgba(255,255,255,.92);
  --esl-dark-muted:rgba(255,255,255,.75);
  --esl-dark-track:rgba(255,255,255,.16);
  --esl-dark-ghost:rgba(255,255,255,.4);

  /* ---- Color · estados del calendario ---------------------------------- */
  --esl-done-bg:#e8edf2;  --esl-done-fg:#3d4b58;
  --esl-live-bg:#c0392b;  --esl-live-fg:#fff;
  --esl-open-bg:var(--esl-bright); --esl-open-fg:var(--esl-navy-deep);
  --esl-soon-bg:var(--esl-cyan);   --esl-soon-fg:var(--esl-navy);

  /* ---- Color · distintivos y avisos ------------------------------------ */
  --esl-badge-bg:#e7f3fd;  --esl-badge-fg:#12547d;   /* U18 y similares     */
  --esl-empty-line:#c8d2de;                          /* estado vacío        */
  --esl-notice-bg:#fff8e5; --esl-notice-line:#e0c168; --esl-notice-fg:#6b5416;
  --esl-code-bg:rgba(0,0,0,.06);

  /* ---- Tipografía · familia -------------------------------------------- */
  /* Por defecto hereda la del tema: los bloques se integran con la web.
     Para forzar otra:  --esl-font:"Barlow Condensed",sans-serif;           */
  --esl-font:inherit;

  /* ---- Tipografía · tamaños -------------------------------------------- */
  --esl-fs-display:clamp(28px,3.4vw,42px);  /* titular del próximo evento   */
  --esl-fs-section:clamp(28px,3.2vw,40px);  /* titular de sección           */
  --esl-fs-season:clamp(26px,3vw,38px);     /* titular de la temporada      */
  --esl-fs-count:clamp(28px,4vw,44px);      /* cifras de la cuenta atrás    */
  --esl-fs-num:40px;                        /* número grande de la tarjeta  */
  --esl-fs-stat:30px;                       /* cifra de estadística         */
  --esl-fs-stat-lg:38px;                    /* cifra de «Qué es la ESL»     */
  --esl-fs-leader:22px;                     /* nombre del líder             */
  --esl-fs-title:19px;                      /* titular de tarjeta           */
  --esl-fs-title-sm:18px;
  --esl-fs-title-xs:17px;
  --esl-fs-lead:17px;                       /* entradilla                   */
  --esl-fs-cell:14.5px;                     /* nombre de prueba en tabla    */
  --esl-fs-body:15px;                       /* texto base y tablas          */
  --esl-fs-sm:14px;
  --esl-fs-xs:13.5px;
  --esl-fs-2xs:13px;
  --esl-fs-3xs:12.5px;
  --esl-fs-eyebrow:12px;                    /* antetítulo                   */
  --esl-fs-micro:11px;
  --esl-fs-label:10.5px;                    /* encabezados de tabla         */
  --esl-fs-tag:10px;                        /* distintivos del calendario   */

  /* ---- Tipografía · grosores ------------------------------------------- */
  --esl-fw-medium:500;
  --esl-fw-semi:600;
  --esl-fw-bold:700;
  --esl-fw-extra:800;
  --esl-fw-black:900;

  /* ---- Tipografía · interlineado y espaciado --------------------------- */
  --esl-lh-tight:1.1;
  --esl-lh-head:1.12;
  --esl-lh-title:1.2;
  --esl-lh-title-loose:1.25;
  --esl-track-eyebrow:.16em;
  --esl-track-label:.14em;
  --esl-track-caps:.12em;
  --esl-track-tag:.1em;
  --esl-track-wide:.06em;
  --esl-track-btn:.02em;
  --esl-track-tight:-.02em;

  /* ---- Radios ----------------------------------------------------------- */
  /* Esquinas rectas por defecto: decisión de diseño de la ESL.
     Para volver a esquinas redondeadas basta con --esl-radius-card:14px.    */
  --esl-radius-card:0;     /* tarjetas y bloques grandes                     */
  --esl-radius-inner:0;    /* cajas anidadas: cuenta atrás, fotos            */
  --esl-radius-pill:999px; /* botones y distintivos: la píldora es lo que
                              los hace legibles como algo pulsable o como
                              una etiqueta. No se recomienda ponerla a 0.    */
  --esl-radius-xs:3px;     /* fragmentos de código en los avisos             */

  /* ---- Sombras, movimiento y trama ------------------------------------- */
  --esl-shadow-card:0 12px 30px rgba(10,37,64,.1);
  --esl-shadow-card-lg:0 12px 34px rgba(10,37,64,.11);
  --esl-lift:-3px;              /* desplazamiento al pasar el ratón          */
  --esl-speed:.2s;              /* transición de tarjetas                    */
  --esl-speed-fast:.18s;        /* transición de botones                     */
  --esl-focus-width:3px;        /* grosor del anillo de foco                 */
  --esl-content-max:620px;      /* medio ancho del contenido en los bloques
                                   a sangre: 620 = franja de 1240 px         */
  --esl-gutter:24px;            /* margen lateral mínimo en móvil            */
}

/* Familia tipográfica: se aplica en la raíz de cada bloque para que la herede
   todo su contenido. */
.esl-card,.esl-season,.esl-cal,.esl-podium-wrap,.esl-athlete,
.esl-sec-head,.esl-next,.esl-ath-grid,.esl-empty{
  font-family:var(--esl-font);
}

/* ---- encabezado de sección ----------------------------------------- */
.esl-sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  flex-wrap:wrap;margin:0 0 32px}
.esl-sec-head-txt{min-width:0}
.esl-eyebrow{font-size:var(--esl-fs-eyebrow);font-weight:var(--esl-fw-extra);
  letter-spacing:var(--esl-track-eyebrow);text-transform:uppercase;
  color:var(--esl-blue);margin-bottom:10px}
.esl-eyebrow.on-dark,.esl-sec-head.on-dark .esl-eyebrow{color:var(--esl-cyan)}
/* Tamaño y color con !important a propósito: los temas de WordPress dan estilo
   a h1/h2/h3 con selectores muy específicos y el titular salía al doble de
   tamaño que en el boceto. Acotado a .esl-sec-head: no afecta a nada más. */
.esl-sec-head .esl-sec-head-txt h2,
.esl-sec-head .esl-sec-head-txt h1,
.esl-sec-head .esl-sec-head-txt h3{font-size:var(--esl-fs-section) !important;
  font-weight:var(--esl-fw-extra) !important;line-height:var(--esl-lh-head) !important;
  margin:0 !important;color:var(--esl-ink) !important;letter-spacing:var(--esl-track-tight)}
.esl-sec-head.on-dark .esl-sec-head-txt h2,
.esl-sec-head.on-dark .esl-sec-head-txt h1,
.esl-sec-head.on-dark .esl-sec-head-txt h3{color:var(--esl-on-dark) !important}
.esl-sec-head.on-dark h2,.esl-sec-head.on-dark h1,.esl-sec-head.on-dark h3{color:var(--esl-on-dark)}

.esl-btn,.esl-btn-ghost{display:inline-flex;align-items:center;gap:8px;
  font-weight:var(--esl-fw-bold);font-size:var(--esl-fs-sm);
  letter-spacing:var(--esl-track-btn);padding:13px 26px;
  border-radius:var(--esl-radius-pill);border:2px solid transparent;text-decoration:none;
  transition:background var(--esl-speed-fast),color var(--esl-speed-fast),border-color var(--esl-speed-fast);
  white-space:nowrap}
.esl-btn{background:var(--esl-bright);color:var(--esl-on-bright)}
.esl-btn:hover{background:var(--esl-bright-hover);color:var(--esl-on-bright)}
.esl-btn-ghost{border-color:currentColor;color:var(--esl-blue);background:transparent}
.esl-btn-ghost:hover{background:var(--esl-blue);color:var(--esl-on-dark);border-color:var(--esl-blue)}
.esl-btn-ghost.on-dark,.esl-sec-head.on-dark .esl-btn-ghost{color:var(--esl-on-dark)}
.esl-btn-ghost.on-dark:hover{background:var(--esl-on-dark);color:var(--esl-navy);border-color:var(--esl-on-dark)}
.esl-btn:focus-visible,.esl-btn-ghost:focus-visible{
  outline:var(--esl-focus-width) solid var(--esl-bright);outline-offset:3px}

/* ---- próximo evento + cuenta atrás --------------------------------- */
.esl-next{display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center;
  background:linear-gradient(160deg,var(--esl-blue) 0%,var(--esl-blue-deep) 100%);
  color:var(--esl-on-dark);border-radius:var(--esl-radius-card);padding:56px 48px}
.esl-next-info h2{font-size:var(--esl-fs-display);font-weight:var(--esl-fw-black);
  margin:0 0 6px;color:var(--esl-on-dark);line-height:var(--esl-lh-tight)}
.esl-next-meta{font-size:var(--esl-fs-lead);margin:0 0 22px;color:var(--esl-dark-text);
  font-weight:var(--esl-fw-medium)}
.esl-next-meta b{color:var(--esl-cyan)}
.esl-next-cta{display:flex;gap:12px;flex-wrap:wrap}
.esl-cd{display:flex;gap:12px}
.esl-cd>div{flex:1;background:var(--esl-dark-fill);border:1px solid var(--esl-dark-line);
  border-radius:var(--esl-radius-inner);padding:18px 8px;text-align:center}
.esl-cd strong{display:block;font-size:var(--esl-fs-count);font-weight:var(--esl-fw-black);
  color:var(--esl-on-dark);line-height:1;font-variant-numeric:tabular-nums}
.esl-cd span{display:block;font-size:var(--esl-fs-label);font-weight:var(--esl-fw-extra);
  letter-spacing:var(--esl-track-label);text-transform:uppercase;
  color:var(--esl-cyan);margin-top:7px}

/* ---- atletas destacados -------------------------------------------- */
.esl-ath-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.esl-ac{display:block;background:var(--esl-surface);border:1px solid var(--esl-line);
  border-radius:var(--esl-radius-card);overflow:hidden;color:inherit;text-decoration:none;
  transition:transform var(--esl-speed),box-shadow var(--esl-speed),border-color var(--esl-speed)}
a.esl-ac:hover,a.esl-ac:focus-visible{transform:translateY(var(--esl-lift));
  box-shadow:var(--esl-shadow-card);border-color:var(--esl-bright)}
a.esl-ac:focus-visible{outline:var(--esl-focus-width) solid var(--esl-bright);outline-offset:3px}
/* Solo se pinta si la ficha tiene imagen destacada: sin foto no hay hueco. */
.esl-ac-ph{aspect-ratio:3/4;border-radius:var(--esl-radius-inner);
  background-color:var(--esl-navy);background-size:cover;background-position:center}
.esl-ac-body{padding:16px 18px 18px}
.esl-ac-body .rk{font-size:var(--esl-fs-micro);font-weight:var(--esl-fw-extra);
  letter-spacing:var(--esl-track-tag);text-transform:uppercase;color:var(--esl-bright)}
.esl-ac-body h3{font-size:var(--esl-fs-title-sm);font-weight:var(--esl-fw-extra);
  margin:5px 0 3px;line-height:var(--esl-lh-title);color:var(--esl-ink)}
.esl-ac-body p{font-size:var(--esl-fs-xs);color:var(--esl-grey);margin:0}

/* ---- utilidades ---------------------------------------------------- */
.esl-card .screen-reader-text,.esl-ranking .screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- estados vacíos ------------------------------------------------ */
.esl-empty{padding:18px;background:var(--esl-surface-alt);
  border:1px dashed var(--esl-empty-line);border-radius:var(--esl-radius-card);
  color:var(--esl-grey);font-size:var(--esl-fs-body)}
.esl-empty--admin{background:var(--esl-notice-bg);border-color:var(--esl-notice-line);
  color:var(--esl-notice-fg)}
.esl-empty code{background:var(--esl-code-bg);padding:1px 5px;
  border-radius:var(--esl-radius-xs);font-size:var(--esl-fs-2xs)}
.esl-stale{margin:0;padding:10px 22px;font-size:var(--esl-fs-eyebrow);
  color:var(--esl-grey-soft);background:var(--esl-surface-soft);
  border-top:1px solid var(--esl-line)}

/* ---- bloque 2 · barra de temporada --------------------------------- */
.esl-season{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;align-items:center;
  background:var(--esl-navy);color:var(--esl-on-dark);padding:44px 32px;
  border-radius:var(--esl-radius-card)}
.esl-season-main{min-width:0}
.esl-season-title{font-size:var(--esl-fs-season);font-weight:var(--esl-fw-black);
  line-height:var(--esl-lh-tight);margin:0}

/* El color va con !important a propósito y solo dentro de este bloque.
   Los temas de WordPress dan color a h1/h2 con selectores muy específicos y
   el titular salía azul sobre fondo azul oscuro: fallo de contraste real.
   Esto NO afecta a ningún encabezado fuera de .esl-season. */
.esl-season h1.esl-season-title,
.esl-season h2.esl-season-title,
.esl-season h3.esl-season-title,
.esl-season p.esl-season-title,
.esl-season div.esl-season-title,
.esl-season .esl-season-title{color:var(--esl-on-dark) !important}

.esl-season .esl-season-title small{display:block;font-size:var(--esl-fs-2xs);
  font-weight:var(--esl-fw-bold);letter-spacing:var(--esl-track-eyebrow);
  text-transform:uppercase;color:var(--esl-cyan) !important;margin-bottom:10px}
.esl-progress{margin-top:16px}
.esl-bar{height:7px;background:var(--esl-dark-track);
  border-radius:var(--esl-radius-pill);overflow:hidden}
.esl-bar i{display:block;height:100%;background:var(--esl-bright);
  border-radius:var(--esl-radius-pill)}
.esl-progress p{font-size:var(--esl-fs-xs);color:var(--esl-dark-muted);margin:9px 0 0}
.esl-leader{border-left:3px solid var(--esl-bright);padding-left:16px}
.esl-leader .lbl{font-size:var(--esl-fs-micro);font-weight:var(--esl-fw-extra);
  letter-spacing:var(--esl-track-label);text-transform:uppercase;color:var(--esl-cyan)}
.esl-leader .nm{font-size:var(--esl-fs-leader);font-weight:var(--esl-fw-extra);
  margin-top:4px;line-height:var(--esl-lh-title)}
.esl-leader .mt{font-size:var(--esl-fs-xs);color:var(--esl-dark-muted)}

/* ---- bloque 4 · ranking -------------------------------------------- */
.esl-card{background:var(--esl-surface);border:1px solid var(--esl-line);
  border-radius:var(--esl-radius-card);overflow:hidden}
.esl-card>h3{font-size:var(--esl-fs-2xs);font-weight:var(--esl-fw-extra);
  letter-spacing:var(--esl-track-label);text-transform:uppercase;
  padding:16px 22px;background:var(--esl-navy);color:var(--esl-on-dark);margin:0}
.esl-ranking table{width:100%;border-collapse:collapse;font-size:var(--esl-fs-body);margin:0}
.esl-ranking th{text-align:left;font-size:var(--esl-fs-label);font-weight:var(--esl-fw-extra);
  letter-spacing:var(--esl-track-caps);text-transform:uppercase;color:var(--esl-grey);
  padding:12px 22px;border-bottom:1px solid var(--esl-line)}
.esl-ranking th.r,.esl-ranking td.pts{text-align:right}
.esl-ranking td{padding:13px 22px;border-bottom:1px solid var(--esl-line);
  font-weight:var(--esl-fw-medium)}
.esl-ranking tbody tr:last-child td{border-bottom:0}
.esl-ranking tbody tr:hover{background:var(--esl-surface-hover)}
.esl-ranking .pos{font-weight:var(--esl-fw-black);color:var(--esl-blue);width:44px}
.esl-ranking tr.top .pos{color:var(--esl-bright)}
.esl-ranking .ath{font-weight:var(--esl-fw-semi)}
.esl-ranking .flag{margin-right:7px}
.esl-ranking .nat{font-size:var(--esl-fs-micro);font-weight:var(--esl-fw-bold);
  color:var(--esl-grey);margin-left:6px;letter-spacing:var(--esl-track-wide)}
.esl-ranking .sub{display:inline-block;margin-left:7px;padding:2px 8px;
  border-radius:var(--esl-radius-pill);background:var(--esl-badge-bg);color:var(--esl-badge-fg);
  font-size:var(--esl-fs-label);font-weight:var(--esl-fw-extra);letter-spacing:var(--esl-track-wide)}
.esl-ranking .pts{font-weight:var(--esl-fw-extra);width:90px}
.esl-card-foot{padding:14px 22px;background:var(--esl-surface-soft);
  font-size:var(--esl-fs-2xs);border-top:1px solid var(--esl-line)}
.esl-card-foot a{color:var(--esl-blue);font-weight:var(--esl-fw-bold);
  border-bottom:1.5px solid var(--esl-bright);text-decoration:none}

/* ---- bloque 5 · calendario ----------------------------------------- */
.esl-cal{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.esl-ev{background:var(--esl-surface);border:1px solid var(--esl-line);
  border-radius:var(--esl-radius-card);overflow:hidden;
  display:flex;flex-direction:column;color:inherit;text-decoration:none;
  transition:transform var(--esl-speed),box-shadow var(--esl-speed),border-color var(--esl-speed)}
a.esl-ev:hover,a.esl-ev:focus-visible{transform:translateY(var(--esl-lift));
  box-shadow:var(--esl-shadow-card-lg);border-color:var(--esl-bright)}
a.esl-ev:focus-visible{outline:var(--esl-focus-width) solid var(--esl-bright);outline-offset:3px}
.esl-ev-ph{aspect-ratio:16/9;background:linear-gradient(140deg,var(--esl-blue),var(--esl-navy));
  background-size:cover;background-position:center;position:relative;
  border-radius:var(--esl-radius-inner)}
.esl-ev-ph .num{position:absolute;left:16px;top:10px;font-weight:var(--esl-fw-black);
  font-size:var(--esl-fs-num);color:var(--esl-dark-ghost);line-height:1;
  text-shadow:0 2px 10px rgba(0,0,0,.4)}
.esl-ev-ph .tag{position:absolute;right:12px;top:12px;font-size:var(--esl-fs-tag);
  font-weight:var(--esl-fw-extra);letter-spacing:var(--esl-track-tag);text-transform:uppercase;
  padding:5px 11px;border-radius:var(--esl-radius-pill)}
.t-done{background:var(--esl-done-bg);color:var(--esl-done-fg)}
.t-live{background:var(--esl-live-bg);color:var(--esl-live-fg)}
.t-open{background:var(--esl-open-bg);color:var(--esl-open-fg)}
.t-soon{background:var(--esl-soon-bg);color:var(--esl-soon-fg)}
.esl-ev-body{padding:18px 20px 20px;flex:1}
.esl-ev-body .date{font-size:var(--esl-fs-micro);font-weight:var(--esl-fw-extra);
  letter-spacing:var(--esl-track-tag);text-transform:uppercase;color:var(--esl-blue)}
.esl-ev-body h3{font-size:var(--esl-fs-title);font-weight:var(--esl-fw-extra);
  margin:6px 0 4px;line-height:var(--esl-lh-title)}
.esl-ev-body .loc{font-size:var(--esl-fs-sm);color:var(--esl-grey)}
.esl-ev-body .meta{margin-top:12px;padding-top:11px;border-top:1px solid var(--esl-line);
  font-size:var(--esl-fs-2xs);color:var(--esl-grey)}

/* ---- bloque 6 · podio ----------------------------------------------- */
.esl-podium-ev{font-size:var(--esl-fs-2xs);font-weight:var(--esl-fw-extra);
  letter-spacing:var(--esl-track-tag);text-transform:uppercase;
  color:var(--esl-blue);margin:0 0 16px}
.esl-podium-ev span{color:var(--esl-grey);font-weight:var(--esl-fw-semi);
  letter-spacing:0;text-transform:none}
/* Es un <h3> y los temas de WordPress le meten sus propios tamaños con
   selectores muy específicos: «MEN» salía a 40 px, como un titular de
   sección. El !important va acotado a esta clase; no afecta a nada más. */
.esl-podium-wrap h3.esl-podium-title,
.esl-podium-title{font-size:var(--esl-fs-sm) !important;
  font-weight:var(--esl-fw-extra) !important;line-height:1.2 !important;
  letter-spacing:var(--esl-track-caps);text-transform:uppercase;
  color:var(--esl-blue) !important;margin:0 0 14px !important}

/* El podio es un <ol>: orden semántico 1º-2º-3º en el DOM, orden visual
   2º-1º-3º mediante la propiedad `order`. Un lector de pantalla lee el
   orden correcto; la vista muestra el podio como se espera. */
/* Los tres cajones van a lo ancho de la sección, no dentro de media columna:
   con 3 tarjetas en media página los nombres se parten y el bloque se
   descompone. Masculino en una fila, femenino en otra debajo. */
.esl-podium{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch;
  list-style:none;margin:0;padding:0}
/* Aire entre la fila masculina y la femenina cuando van una debajo de otra. */
.esl-podium-wrap + .esl-podium-wrap{margin-top:38px}
.esl-pod{background:var(--esl-surface);border:1px solid var(--esl-line);
  border-radius:var(--esl-radius-card);padding:26px 22px;text-align:center;list-style:none;
  display:flex;flex-direction:column;align-items:center}
.esl-pod.first{border-color:var(--esl-bright);border-width:2px}
.esl-pod .medal{font-size:var(--esl-fs-eyebrow);font-weight:var(--esl-fw-black);
  letter-spacing:var(--esl-track-tag);color:var(--esl-blue);text-transform:uppercase}
.esl-pod .nm{font-weight:var(--esl-fw-extra);font-size:var(--esl-fs-title-xs);
  line-height:var(--esl-lh-title-loose);color:var(--esl-ink);margin-top:12px}
.esl-pod .co{font-size:var(--esl-fs-xs);color:var(--esl-grey);margin-top:6px}
.esl-pod .pt{font-weight:var(--esl-fw-extra);color:var(--esl-blue)}

/* ---- bloque 7 · ficha de atleta ------------------------------------- */
.esl-athlete h3{font-size:var(--esl-fs-2xs);font-weight:var(--esl-fw-extra);
  letter-spacing:var(--esl-track-label);text-transform:uppercase;
  color:var(--esl-blue);margin:0 0 14px}
.esl-totals{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:32px}
.esl-total{background:var(--esl-surface);border:1px solid var(--esl-line);
  border-radius:var(--esl-radius-card);padding:18px;text-align:center}
.esl-total.is-overall{background:var(--esl-navy);border-color:var(--esl-navy);
  color:var(--esl-on-dark)}
.esl-total .lab{display:block;font-size:var(--esl-fs-micro);font-weight:var(--esl-fw-extra);
  letter-spacing:var(--esl-track-tag);text-transform:uppercase;color:var(--esl-grey)}
.esl-total.is-overall .lab{color:var(--esl-cyan)}
.esl-total strong{display:block;font-size:var(--esl-fs-stat);font-weight:var(--esl-fw-black);
  line-height:var(--esl-lh-tight);margin:6px 0 2px}
.esl-total .rk{font-size:var(--esl-fs-3xs);color:var(--esl-grey)}
.esl-total.is-overall .rk{color:var(--esl-dark-muted)}
.esl-breakdown{width:100%;border-collapse:collapse;font-size:var(--esl-fs-body);
  background:var(--esl-surface);border:1px solid var(--esl-line);
  border-radius:var(--esl-radius-card);overflow:hidden}
.esl-breakdown th{text-align:left;font-size:var(--esl-fs-label);font-weight:var(--esl-fw-extra);
  letter-spacing:var(--esl-track-caps);text-transform:uppercase;color:var(--esl-grey);
  padding:12px 18px;border-bottom:1px solid var(--esl-line)}
.esl-breakdown td{padding:12px 18px;border-bottom:1px solid var(--esl-line);
  text-align:center;font-weight:var(--esl-fw-semi)}
.esl-breakdown tbody th{font-size:var(--esl-fs-cell);font-weight:var(--esl-fw-bold);
  color:var(--esl-navy);text-transform:none;letter-spacing:0}
.esl-breakdown tbody tr:last-child th,.esl-breakdown tbody tr:last-child td{border-bottom:0}

/* ---- bloque 8 · noticias -------------------------------------------- */
/* Mismo lenguaje que las tarjetas del calendario: misma proporción de foto,
   mismo borde, mismo levantamiento al pasar el ratón. */
.esl-news{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;font-family:var(--esl-font)}
.esl-nc{background:var(--esl-surface);border:1px solid var(--esl-line);
  border-radius:var(--esl-radius-card);overflow:hidden;display:flex;flex-direction:column;
  color:inherit;text-decoration:none;
  transition:transform var(--esl-speed),box-shadow var(--esl-speed),border-color var(--esl-speed)}
a.esl-nc:hover,a.esl-nc:focus-visible{transform:translateY(var(--esl-lift));
  box-shadow:var(--esl-shadow-card-lg);border-color:var(--esl-bright)}
a.esl-nc:focus-visible{outline:var(--esl-focus-width) solid var(--esl-bright);outline-offset:3px}
.esl-nc-ph{aspect-ratio:16/9;border-radius:var(--esl-radius-inner);
  background-color:var(--esl-navy);background-size:cover;background-position:center}
.esl-nc-body{padding:18px 20px 22px;flex:1}
.esl-nc-body .dt{font-size:var(--esl-fs-micro);font-weight:var(--esl-fw-extra);
  letter-spacing:var(--esl-track-tag);text-transform:uppercase;color:var(--esl-grey)}
.esl-nc-body h3{font-size:var(--esl-fs-title-sm);font-weight:var(--esl-fw-bold);
  margin:8px 0 0;line-height:1.28;color:var(--esl-ink)}
.esl-nc-body p{font-size:var(--esl-fs-xs);color:var(--esl-grey);margin:10px 0 0;line-height:1.5}

/* ---- bloque 9 · cifras de la liga ----------------------------------- */
/* Pensado para ir sobre el fondo azul marino de «Qué es la ESL», dentro de
   un contenedor de Elementor a ancho completo. Con la clase `on-light` sirve
   también sobre fondo claro. El número de columnas lo fija el shortcode con
   --esl-stats-cols (2 por defecto). */
.esl-stats{display:grid;grid-template-columns:repeat(var(--esl-stats-cols,2),1fr);
  gap:18px;list-style:none;margin:0;padding:0;font-family:var(--esl-font)}
.esl-st{background:var(--esl-dark-fill);border:1px solid var(--esl-dark-line);
  border-radius:var(--esl-radius-inner);padding:22px;list-style:none}
.esl-st strong{display:block;font-size:var(--esl-fs-stat-lg);font-weight:var(--esl-fw-black);
  color:var(--esl-cyan);line-height:1;font-variant-numeric:tabular-nums}
.esl-st span{display:block;font-size:var(--esl-fs-xs);color:var(--esl-dark-muted);margin-top:6px}
.esl-stats.on-light .esl-st{background:var(--esl-surface);border-color:var(--esl-line)}
.esl-stats.on-light .esl-st strong{color:var(--esl-blue)}
.esl-stats.on-light .esl-st span{color:var(--esl-grey)}

/* ---- responsive ------------------------------------------------------ */
@media(max-width:980px){
  .esl-next{grid-template-columns:1fr;gap:30px;padding:34px 24px}
  .esl-ath-grid{grid-template-columns:1fr 1fr}
  .esl-sec-head{margin-bottom:24px}
  .esl-season{grid-template-columns:1fr;gap:26px;padding:32px 24px}
  .esl-cal,.esl-podium,.esl-news{grid-template-columns:1fr}
  .esl-totals{grid-template-columns:1fr 1fr}
  .esl-pod{padding:22px 18px}
}
@media(prefers-reduced-motion:reduce){
  a.esl-ev:hover,a.esl-ev:focus-visible{transform:none}
}

/* =====================================================================
   FONDOS A ANCHO COMPLETO
   =====================================================================
   El fondo a todo el ancho lo pone la SECCIÓN de Elementor, no el bloque.

   POR QUÉ SE CAMBIÓ (19 ago 2026). Antes estos dos bloques se escapaban de
   su contenedor con `width:100vw` y márgenes negativos. Ese truco da por
   supuesto que el contenedor está centrado en la ventana; en la home real no
   lo está, y el bloque se salía por la izquierda comiéndose el principio de
   cada línea («…uropean SUP League», «…gister»). No se repite.

   FORMA CORRECTA: la sección de Elementor lleva el color de fondo y el
   espaciado, y al shortcode se le pasa bg="0" para que no pinte el suyo:

       [esl_season_bar lang="en" tag="h1" bg="0"]
       [esl_next_event lang="en" bg="0"]

   Así el fondo llega de borde a borde sin que nada pueda desbordarse, y el
   color se cambia desde Elementor sin tocar CSS.
   ===================================================================== */

.esl-season.esl-plain,.esl-next.esl-plain{
  background:none;
  padding:0;
  border-radius:0;
}

/* Solo si el bloque va suelto, fuera de una sección con fondo propio. */
.esl-season:not(.esl-plain){padding-top:56px;padding-bottom:56px}
.esl-next:not(.esl-plain){padding-top:72px;padding-bottom:72px}