/* ==========================================================================
   Footvia International Tournament — hoja de estilos principal
   Paleta tomada del logotipo de marca (naranja + negro) con dos acentos
   de edicion: oro para Promises (invierno) y turquesa para Summer (verano).
   ========================================================================== */

:root {
  /* Marca */
  --brand: #ea6a10;
  --brand-dark: #c4550a;
  --brand-ink: #b34d08;   /* 5.3:1 sobre blanco — texto y enlaces */
  --brand-btn: #b34d08;   /* fondo de boton: lleva texto blanco encima */
  --brand-ink-dark: #9c4207;
  --brand-btn-hover: #9c4207;
  --brand-on-dark: #ff8a2b;  /* naranja legible sobre fondos oscuros translucidos */
  --brand-soft: #fff1e6;

  /* Acentos de edicion */
  --promises: #1f6fb8;
  --promises-soft: #eaf3fb;
  --summer: #9c5c07;   /* 5.3:1 — etiqueta y fechas */
  --summer-soft: #fdf3e3;

  /* Neutros */
  --ink: #0b0e12;        /* superficie oscura: hero, pie, barra superior */
  --heading: #0b0e12;    /* texto de titulares */
  --ink-2: #151a21;
  --ink-3: #222a35;
  --body: #2c3542;
  --muted: #5d6877;
  --line: #e2e6eb;
  --surface: #f5f6f8;
  --paper: #ffffff;
  --table-head: #e9edf2;  /* cabecera de tabla: tinte claro, texto --heading */

  /* Tipografia */
  --font-display: "Fjalla One", "Arial Narrow", Impact, sans-serif;
  --font-ui: "Jost", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Medidas */
  --container: 1180px;
  --gutter: 20px;
  --radius: 14px;
  --radius-lg: 22px;
  --header-h: 84px;
  --header-top-h: 38px;

  --shadow-sm: 0 1px 2px rgba(11, 14, 18, .06), 0 2px 8px rgba(11, 14, 18, .05);
  --shadow-md: 0 4px 12px rgba(11, 14, 18, .08), 0 12px 32px rgba(11, 14, 18, .09);
  --shadow-lg: 0 18px 50px rgba(11, 14, 18, .16);
}

/* --------------------------------------------------------- Reset y base -- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--header-top-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;              /* Fjalla One solo tiene un grosor */
  text-transform: uppercase;
  line-height: 1.04;             /* menos estrecha que Anton: necesita aire */
  letter-spacing: .01em;
  color: var(--heading);
  margin: 0 0 .5em;
  text-wrap: balance;
}

h3, h4 {
  font-family: var(--font-ui);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--heading);
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); }
h2 { font-size: clamp(1.45rem, 1.15rem + 1.25vw, 2.05rem); }
h3 { font-size: clamp(1.08rem, .98rem + .4vw, 1.3rem); }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
strong { color: var(--heading); font-weight: 500; }

ul { margin: 0 0 1.1em; padding-left: 1.15em; }
li { margin-bottom: .4em; }

:focus-visible {
  outline: 3px solid var(--brand-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: .97rem;
  letter-spacing: -.01em;
  line-height: 1;
  padding: 15px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  text-align: center;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--brand-btn); color: #fff; }
.btn--primary:hover { background: var(--brand-btn-hover); color: #fff; }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--ink-3); color: #fff; }

.btn--ghost { border-color: var(--line); color: var(--heading); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

.btn--light { background: var(--paper); color: var(--heading); }
.btn--light:hover { background: var(--brand-soft); color: var(--heading); }

.btn--on-dark { border-color: rgba(255,255,255,.45); color: #fff; }
.btn--on-dark:hover { background: var(--paper); color: var(--heading); border-color: #fff; }

.btn--sm { padding: 11px 18px; font-size: .88rem; }
.btn--block { width: 100%; }

/* ----------------------------------------------------------- Logotipo --- */

.logo { display: inline-flex; align-items: center; flex: none; }
.logo:hover { text-decoration: none; }
/* Cabecera de dos niveles: el logotipo puede ir mas grande que antes. */
.logo img { height: 54px; width: auto; }
.logo--footer img { height: 58px; }

/* -------------------------------------------------------------- Header -- */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid var(--line);
}
.header::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
}
.header__top, .header__inner { position: relative; }

.header__top {
  background: var(--ink);
  color: rgba(255,255,255,.72);
  font-size: .82rem;
}
.header__top-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: var(--header-top-h);
}
.header__contact {
  color: rgba(255,255,255,.72);
  font-weight: 500;
  letter-spacing: .01em;
}
.header__contact:hover { color: #fff; text-decoration: none; }
.header__top-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.header__client {
  font-family: var(--font-ui);
  font-size: .74rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: #fff;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
}
.header__client:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); text-decoration: none; }

.header__inner {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: var(--header-h);
}

/* El menu ocupa el espacio central; las acciones quedan pegadas a la derecha. */
.header__nav { margin-left: auto; }
.header__actions { margin-left: 0; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: .93rem;
  font-weight: 500;
  white-space: nowrap;
  color: var(--body);
}
.nav__link:hover { background: var(--surface); color: var(--heading); text-decoration: none; }
.nav__link[aria-current="page"] { color: var(--heading); font-weight: 500; box-shadow: inset 0 -2px 0 var(--brand); border-radius: 8px 8px 0 0; }

.header__actions { display: flex; align-items: center; gap: 10px; }

/* Selector de idioma */
.lang { position: relative; }
.lang__toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px; padding: 6px 12px;
  font-family: var(--font-ui); font-weight: 500; font-size: .74rem;
  color: #fff; cursor: pointer; text-transform: uppercase; letter-spacing: .1em;
}
.lang__toggle:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); }
.lang__toggle svg { width: 11px; height: 11px; transition: transform .18s ease; }
.lang__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.lang__menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--paper); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-md); padding: 6px; min-width: 156px;
  list-style: none; margin: 0; display: none; z-index: 120;
}
.lang__menu[data-open="true"] { display: block; }
.lang__menu li { margin: 0; }
.lang__menu a {
  display: block; padding: 9px 12px; border-radius: 8px;
  color: var(--body); font-size: .93rem;
}
.lang__menu a:hover { background: var(--surface); color: var(--heading); text-decoration: none; }
.lang__menu a[aria-current="true"] { font-weight: 500; color: var(--heading); background: var(--brand-soft); }

.nav__toggle {
  display: none;
  background: transparent; border: 1px solid var(--line);
  border-radius: 10px; width: 44px; height: 44px;
  cursor: pointer; align-items: center; justify-content: center;
  color: var(--heading);
}
.nav__toggle svg { width: 22px; height: 22px; }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }
.nav__toggle[aria-expanded="true"] .icon-menu { display: none; }

@media (max-width: 1139px) {
  .nav__toggle { display: inline-flex; }
  /* El menu pasa a ser un panel fijo, asi que las acciones empujan a la derecha. */
  .header__actions { margin-left: auto; }
  .header__nav {
    position: fixed;
    inset: 0;
    z-index: 130;
    background: rgba(11, 14, 18, .82);
    backdrop-filter: saturate(140%) blur(22px);
    -webkit-backdrop-filter: saturate(140%) blur(22px);
    padding: calc(var(--header-h) + var(--header-top-h) + 18px) var(--gutter) 48px;
    overflow-y: auto;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.04);
    transition: opacity .32s ease, transform .32s cubic-bezier(.22,1,.36,1), visibility .32s;
  }
  .header__nav[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
  }

  /* Los enlaces entran escalonados detras del panel */
  .header__nav .nav__list > li,
  .header__nav .nav__cta > a {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1);
  }
  .header__nav[data-open="true"] .nav__list > li,
  .header__nav[data-open="true"] .nav__cta > a { opacity: 1; transform: none; }
  .header__nav[data-open="true"] .nav__list > li:nth-child(1) { transition-delay: .07s; }
  .header__nav[data-open="true"] .nav__list > li:nth-child(2) { transition-delay: .12s; }
  .header__nav[data-open="true"] .nav__list > li:nth-child(3) { transition-delay: .17s; }
  .header__nav[data-open="true"] .nav__list > li:nth-child(4) { transition-delay: .22s; }
  .header__nav[data-open="true"] .nav__list > li:nth-child(5) { transition-delay: .27s; }
  .header__nav[data-open="true"] .nav__list > li:nth-child(6) { transition-delay: .32s; }
  .header__nav[data-open="true"] .nav__cta > a:nth-child(1) { transition-delay: .37s; }
  .header__nav[data-open="true"] .nav__cta > a:nth-child(2) { transition-delay: .42s; }

  /* El boton de cierre debe quedar por encima del panel */
  .nav__toggle[aria-expanded="true"] { position: relative; z-index: 140; color: #fff; border-color: rgba(255,255,255,.4); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__link {
    padding: 14px 4px; border-radius: 10px;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.1rem);
    font-weight: 500; letter-spacing: -.02em;
    color: rgba(255,255,255,.82);
  }
  .nav__link:hover { background: transparent; color: #fff; }
  .nav__link[aria-current="page"] { box-shadow: none; background: transparent; color: #fff; }
  .nav__link[aria-current="page"]::after {
    content: ""; display: block; width: 46px; height: 3px;
    background: var(--brand); border-radius: 2px; margin-top: 6px;
  }
  .nav__cta { border-top: 1px solid rgba(255,255,255,.16); padding-top: 22px; }

  /* "Acceso clientes" en naranja: el gris de .btn--ghost apenas se lee
     sobre el panel oscuro del menu. */
  .nav__cta .btn--ghost {
    color: var(--brand-on-dark);
    border-color: rgba(255, 138, 43, .55);
    background: transparent;
  }
  .nav__cta .btn--ghost:hover,
  .nav__cta .btn--ghost:focus-visible {
    background: var(--brand-on-dark);
    border-color: var(--brand-on-dark);
    color: var(--heading);
  }
  .header__actions .btn--cta { display: none; }
  .nav__cta { margin-top: 18px; display: grid; gap: 10px; }
}
@media (min-width: 1140px) {
  .nav__cta { display: none; }
}
@media (max-width: 720px) {
  .header__top-inner { gap: 12px; }
  .header__contact[href^="mailto"] { display: none; }
}
@media (max-width: 560px) {
  :root { --header-h: 74px; --header-top-h: 34px; }
  .logo img { height: 46px; }
  .header__client { display: none; }
  .header__contact { font-size: .78rem; }
}

/* ---------------------------------------------------------- Secciones --- */

.section { padding: clamp(56px, 7vw, 104px) 0; }
.section--tight { padding: clamp(40px, 5vw, 70px) 0; }
.section--surface { background: var(--surface); }
.section--dark { background: var(--ink); color: rgba(255,255,255,.76); }
.section--dark h2, .section--dark h3 { color: #fff; }

.section__head { max-width: 720px; margin-bottom: clamp(32px, 4vw, 52px); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head p { color: var(--muted); font-size: 1.08rem; }
.section--dark .section__head p { color: rgba(255,255,255,.72); }

.kicker {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin-bottom: 14px;
}
.section--dark .kicker { color: #ff9a4d; }

/* --------------------------------------------------------------- Hero --- */

.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute; inset: 0; z-index: -2;
}
.hero__media img,
.hero__video {
  width: 100%; height: 100%; object-fit: cover; object-position: center 32%;
}
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(11,14,18,.52) 0%, rgba(11,14,18,.28) 45%, rgba(11,14,18,.72) 100%),
    linear-gradient(95deg, rgba(11,14,18,.66) 6%, rgba(11,14,18,.04) 62%);
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
  padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 84px);
}
.hero__col--text { max-width: 44ch; }
.hero h1 { text-shadow: 0 2px 22px rgba(11,14,18,.5); color: #fff; font-size: clamp(1.95rem, 1.4rem + 1.8vw, 3.05rem); max-width: 15ch; margin-bottom: .5em; }
.hero__lead {
  font-size: clamp(1.02rem, .95rem + .45vw, 1.2rem);
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 14px rgba(11,14,18,.55);
  margin-bottom: 0;
}
.hero .kicker { color: #ff9a4d; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* Columna derecha: las dos ediciones como protagonistas */
.hero__col--info { display: flex; flex-direction: column; gap: 18px; }

.hero__editions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.ed-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 18px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(8px);
  color: rgba(255,255,255,.82);
  overflow: hidden;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.ed-card::before {
  content: "";
  position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--ed-accent, var(--brand));
}
.ed-card:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.34);
  transform: translateY(-2px);
  text-decoration: none;
  color: #fff;
}
.ed-card--promises { --ed-accent: #6cb6ff; }
.ed-card--summer { --ed-accent: #ffa028; }

.ed-card__tag {
  font-family: var(--font-ui);
  font-size: .64rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ed-accent);
}
.ed-card__name {
  font-family: var(--font-ui);
  font-size: clamp(1.02rem, .95rem + .35vw, 1.22rem);
  font-weight: 500; line-height: 1.15; color: #fff;
}
.ed-card__dates {
  font-size: .9rem; font-weight: 500; color: #fff;
}
.ed-card__cats {
  display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px;
}
.ed-card__cats span {
  font-family: var(--font-ui);
  font-size: .66rem; font-weight: 500; letter-spacing: .04em;
  padding: 3px 7px; border-radius: 6px;
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.88);
}
.ed-card__more {
  margin-top: auto; padding-top: 10px;
  font-family: var(--font-ui);
  font-size: .74rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ed-accent);
}

/* Cuenta atras */
.countdown {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 4px; padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.16);
}
.countdown__label {
  font-family: var(--font-ui); font-size: .74rem; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: rgba(255,255,255,.55); width: 100%;
}
.countdown__unit {
  flex: 1 1 0; min-width: 62px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 9px 8px; text-align: center;
}
.countdown__num {
  display: block; font-family: var(--font-ui); font-weight: 500;
  font-size: 1.45rem; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums;
}
.countdown__unit span:last-child {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255,255,255,.6);
}

@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; gap: 30px; align-items: start; }
  .hero__col--text { max-width: 60ch; }
}
@media (max-width: 460px) {
  .hero__editions { grid-template-columns: 1fr; }
}

/* Hero interior (paginas secundarias) */
.pagehero {
  background: var(--ink); color: #fff; position: relative; isolation: isolate;
  overflow: hidden;
}
.pagehero__media { position: absolute; inset: 0; z-index: -2; }
.pagehero__media img { width: 100%; height: 100%; object-fit: cover; }
.pagehero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11,14,18,.86), rgba(11,14,18,.78));
}
.pagehero__inner { padding: clamp(46px, 6.5vw, 88px) 0; max-width: 780px; }
.pagehero h1 { color: #fff; margin-bottom: .35em; }
.pagehero p { color: rgba(255,255,255,.82); font-size: 1.08rem; max-width: 60ch; }
.pagehero .kicker { color: #ff9a4d; }
.pagehero__meta {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px;
}
.pagehero--promises::after {
  background: linear-gradient(180deg, rgba(11,14,18,.80), rgba(8,22,38,.9));
}
.pagehero--summer::after {
  background: linear-gradient(180deg, rgba(11,14,18,.80), rgba(36,22,6,.9));
}

/* ------------------------------------------------------- Escudos clubes -- */

.clubs { padding: 34px 0 38px; border-bottom: 1px solid var(--line); background: var(--paper); }
.clubs__title {
  text-align: center; font-family: var(--font-display); font-size: .76rem;
  font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 22px;
}
.clubs__track {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(22px, 4vw, 52px);
}
.clubs__track img {
  height: clamp(36px, 5vw, 52px); width: auto;
  filter: grayscale(1); opacity: .62;
  transition: filter .25s ease, opacity .25s ease;
}
.clubs__track img:hover { filter: none; opacity: 1; }
.clubs__note {
  text-align: center; font-size: .76rem; color: var(--muted);
  margin: 20px auto 0; max-width: 62ch;
}

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

.editions { display: grid; gap: 24px; }
@media (min-width: 860px) { .editions { grid-template-columns: 1fr 1fr; } }

.edition {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.edition:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* El aspect-ratio va en la imagen, no en el contenedor: dentro de una
   tarjeta flexible el navegador ignora la proporcion del contenedor y le da
   el alto natural de la foto, asi que dos fotos con proporciones distintas
   (4:3 y 3:2) salian con alturas distintas. */
.edition__media { position: relative; background: var(--ink); flex: none; }
.edition__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.edition__tag {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--font-ui); font-size: .72rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 999px; color: #fff;
}
.edition--promises .edition__tag { background: var(--promises); }
.edition--summer .edition__tag { background: var(--summer); }
.edition__body { padding: clamp(22px, 3vw, 30px); display: flex; flex-direction: column; flex: 1; }
.edition__dates {
  font-family: var(--font-ui); font-weight: 500; font-size: .95rem;
  margin-bottom: 10px;
}
.edition--promises .edition__dates { color: var(--promises); }
.edition--summer .edition__dates { color: var(--summer); }
.edition__body h3 { margin-bottom: .45em; }
.edition__body p { color: var(--muted); }
.edition__foot { margin-top: auto; padding-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }

.edition__cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 18px; }
.cat-pill {
  font-family: var(--font-ui); font-size: .78rem; font-weight: 500;
  padding: 5px 10px; border-radius: 7px;
  background: var(--surface); color: var(--ink-3);
}
.edition--promises .cat-pill { background: var(--promises-soft); color: #14507f; }
.edition--summer .cat-pill { background: var(--summer-soft); color: #8a5208; }

/* ---------------------------------------------------------------- Datos -- */

.proof {
  position: relative;
  isolation: isolate;
  background: var(--ink);
  color: rgba(255,255,255,.76);
  padding: clamp(56px, 7vw, 96px) 0;
  overflow: hidden;
}
.proof__media { position: absolute; inset: 0; z-index: -2; }
.proof__media img { width: 100%; height: 100%; object-fit: cover; }
.proof::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11,14,18,.9), rgba(11,14,18,.82));
}
.proof__head { max-width: 640px; margin-bottom: clamp(28px, 3.5vw, 44px); }
.proof__head h2 { color: #fff; }
.proof__head p { color: rgba(255,255,255,.76); }
.proof__head .kicker { color: #ffb163; }

.proof__note {
  margin: 20px 0 0;
  font-size: .8rem;
  color: rgba(255,255,255,.55);
}

.fact__star { color: #ffb163; font-size: .5em; margin-left: .15em; top: -.7em; }

.facts {
  display: grid; gap: 1px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius); overflow: hidden;
}
@media (min-width: 640px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact { background: rgba(11,14,18,.72); padding: 28px 24px; text-align: center; }
.fact__value {
  display: block; font-family: var(--font-ui); font-weight: 500;
  font-size: clamp(1.9rem, 1.4rem + 1.7vw, 2.7rem); color: #fff;
  letter-spacing: -.03em; line-height: 1;
}
.fact__label {
  display: block; margin-top: 10px; font-size: .86rem;
  color: rgba(255,255,255,.62); text-transform: uppercase; letter-spacing: .08em;
}

/* ------------------------------------------------------------ Features -- */

.features { display: grid; gap: 22px; }
@media (min-width: 680px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .features { grid-template-columns: repeat(3, 1fr); } }

.feature {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 24px;
}
.feature__icon {
  width: 44px; height: 44px; border-radius: 11px;
  background: var(--brand-soft); color: var(--brand-dark);
  display: grid; place-items: center; margin-bottom: 16px;
}
.feature__icon svg { width: 22px; height: 22px; }
.feature h3 { font-size: 1.12rem; margin-bottom: .4em; }
.feature p { color: var(--muted); font-size: .97rem; margin: 0; }

/* --------------------------------------------------------------- Split -- */

.split { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.split + .split { margin-top: clamp(48px, 6vw, 84px); }
@media (min-width: 900px) {
  .split--reverse .split__media { order: 2; }
}
.split__media img {
  width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3; object-fit: cover;
}
.split__body p { color: var(--muted); }
.split__body p:first-of-type { font-size: 1.05rem; }

/* ------------------------------------------------------------ Timeline -- */

.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ""; position: absolute; left: 9px; top: 12px; bottom: 12px;
  width: 2px; background: var(--line);
}
.timeline__item { position: relative; padding: 0 0 30px 40px; margin: 0; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: ""; position: absolute; left: 3px; top: 8px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--brand);
}
.timeline--promises .timeline__item::before { border-color: var(--promises); }
.timeline--summer .timeline__item::before { border-color: var(--summer); }
.timeline__day {
  font-family: var(--font-display); font-weight: 500; font-size: 1.08rem;
  color: var(--heading); margin-bottom: 8px; letter-spacing: -.01em;
}
.timeline__list { list-style: none; margin: 0; padding: 0; }
.timeline__list li {
  position: relative; padding-left: 18px; color: var(--muted);
  font-size: .97rem; margin-bottom: .35em;
}
.timeline__list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--line);
}

/* ----------------------------------------------------- Tabla categorias -- */

.cat-table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.cat-table caption { text-align: left; color: var(--muted); padding-bottom: 14px; font-size: .95rem; }
.cat-table th, .cat-table td { padding: 15px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.cat-table thead th {
  font-family: var(--font-display); font-size: .74rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  border-bottom-width: 2px;
}
.cat-table tbody tr:last-child th, .cat-table tbody tr:last-child td { border-bottom: 0; }
.cat-table tbody th {
  font-family: var(--font-display); font-weight: 500; font-size: 1.02rem;
  color: var(--heading); width: 1%; white-space: nowrap;
}
.cat-table td { color: var(--muted); }
.format-badge {
  display: inline-block; font-family: var(--font-ui); font-weight: 500;
  font-size: .78rem; padding: 4px 11px; border-radius: 6px;
  background: var(--surface); color: var(--ink-3);
}
.format-badge[data-format="7v7"] { background: var(--brand-soft); color: var(--brand-ink); }

.table-wrap {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(18px, 2.5vw, 28px);
  overflow-x: auto;
}

@media (max-width: 560px) {
  .cat-table thead { display: none; }
  .cat-table tbody tr {
    display: grid; grid-template-columns: auto 1fr; gap: 2px 14px;
    padding: 14px 0; border-bottom: 1px solid var(--line);
  }
  .cat-table th, .cat-table td { border: 0; padding: 2px 0; }
  .cat-table tbody th { grid-row: span 2; align-self: center; font-size: 1.3rem; }
  .cat-table tbody tr:last-child { border-bottom: 0; }
}

/* ----------------------------------------------------------- Reglamento -- */

.rules { display: grid; gap: 20px; }
@media (min-width: 720px) { .rules { grid-template-columns: repeat(2, 1fr); } }
.rule {
  border-left: 3px solid var(--line); padding: 2px 0 2px 20px;
}
.rule h3 { font-size: 1.02rem; margin-bottom: .35em; }
.rule p { color: var(--muted); font-size: .95rem; margin: 0; }

/* ------------------------------------------------------------ Pasos ----- */

.steps { display: grid; gap: 22px; counter-reset: step; }
@media (min-width: 700px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { counter-increment: step; }
.step::before {
  content: counter(step);
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-family: var(--font-display); font-weight: 500; font-size: 1.05rem;
  margin-bottom: 14px;
}
.step h3 { font-size: 1.05rem; margin-bottom: .35em; }
.step p { color: var(--muted); font-size: .95rem; margin: 0; }

/* ------------------------------------------------------------- FAQ ------ */

.faq { max-width: 820px; margin-inline: auto; }
.faq__item {
  border-bottom: 1px solid var(--line);
}
.faq__item summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 500; font-size: 1.06rem;
  color: var(--heading); line-height: 1.35;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: none; width: 14px; height: 14px; margin-top: 6px;
  border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq__item[open] summary::after { transform: rotate(-135deg); }
.faq__item .faq__answer { padding: 0 0 22px; color: var(--muted); max-width: 68ch; }

/* ------------------------------------------------------------ Banda CTA -- */

.cta-band {
  background: var(--brand-btn);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(32px, 4.5vw, 56px);
  display: grid; gap: 24px; align-items: center;
}
@media (min-width: 860px) { .cta-band { grid-template-columns: 1.4fr auto; } }
.cta-band h2 { color: #fff; margin-bottom: .3em; }
.cta-band p { color: rgba(255,255,255,.9); margin: 0; max-width: 56ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------- Area cliente -- */

.clientbox {
  background: var(--ink); color: rgba(255,255,255,.76);
  border-radius: var(--radius-lg); padding: clamp(26px, 3.5vw, 40px);
  display: grid; gap: 20px; align-items: center;
}
@media (min-width: 780px) { .clientbox { grid-template-columns: 1fr auto; } }
.clientbox h2, .clientbox h3 { color: #fff; margin-bottom: .35em; }
.clientbox p { margin: 0; }

/* ------------------------------------------------------------ Contacto -- */

.contact-grid { display: grid; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 920px) { .contact-grid { grid-template-columns: 360px 1fr; } }

.contact-card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 24px; margin-bottom: 18px;
}
.contact-card h3 { font-size: 1.02rem; margin-bottom: .7em; }
.contact-card ul { list-style: none; margin: 0; padding: 0; }
.contact-card li { margin-bottom: .5em; }
.contact-card a { color: var(--body); }
.contact-card a:hover { color: var(--brand-dark); }

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

.form { display: grid; gap: 18px; }
.form__row { display: grid; gap: 18px; }
@media (min-width: 620px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: 7px; }
.field label {
  font-family: var(--font-display); font-weight: 500; font-size: .88rem; color: var(--heading);
}
.field label .req { color: var(--brand-ink); }
.field__help { font-size: .82rem; color: var(--muted); }

.field input, .field select, .field textarea {
  font-family: inherit; font-size: 1rem; color: var(--heading);
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: 13px 14px; width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(234,106,16,.16);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: #cf3b2f; }

.field--check { display: flex; align-items: flex-start; gap: 11px; }
.field--check input { width: 19px; height: 19px; flex: none; margin-top: 3px; accent-color: var(--brand); }
.field--check label { font-family: var(--font-body); font-weight: 400; font-size: .93rem; color: var(--muted); }

.form__note { font-size: .84rem; color: var(--muted); }

.form__alert {
  display: none; border-radius: 12px; padding: 18px 20px; font-size: .96rem;
}
.form__alert[data-state="success"] { display: block; background: #e9f7ee; border: 1px solid #b7e2c7; color: #1c6b3a; }
.form__alert[data-state="error"] { display: block; background: #fdeceb; border: 1px solid #f3c2bd; color: #a02a1f; }
.form__alert strong { display: block; margin-bottom: 4px; color: inherit; }

/* -------------------------------------------------------------- Prosa --- */

.prose { max-width: 74ch; }
.prose h2 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); margin-top: 1.9em; }
.prose h2:first-of-type { margin-top: 1em; }
.prose p { color: var(--body); }

/* ------------------------------------------------------------- Footer --- */

.footer { background: var(--ink); color: rgba(255,255,255,.66); padding: clamp(48px, 6vw, 76px) 0 0; }
.footer__grid { display: grid; gap: 34px; }
@media (min-width: 680px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }

.footer h3 {
  color: #fff; font-size: .78rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: .55em; }
.footer a { color: rgba(255,255,255,.66); font-size: .95rem; }
.footer a:hover { color: #fff; text-decoration: none; }
.footer__about { font-size: .95rem; max-width: 40ch; margin: 18px 0 0; }

.social { display: flex; gap: 10px; margin-top: 18px; }
.social a {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255,255,255,.08); display: grid; place-items: center;
  color: rgba(255,255,255,.8); transition: background-color .18s ease, color .18s ease;
}
.social a:hover { background: var(--brand-btn); color: #fff; }
.social svg { width: 19px; height: 19px; }

.footer__bottom {
  margin-top: clamp(38px, 5vw, 58px);
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 22px 0 30px;
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  align-items: center; justify-content: space-between;
  font-size: .85rem;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; margin: 0; padding: 0; }
.footer__legal li { margin: 0; }

@media (max-width: 679px) {
  .footer { text-align: center; }
  .footer .logo { justify-content: center; }
  .footer__about { margin-left: auto; margin-right: auto; }
  .social { justify-content: center; }
  .footer__bottom { justify-content: center; text-align: center; }
  .footer__legal { justify-content: center; }
  .footer__credit { justify-content: center; }
}

/* ------------------------------------------------------- Accesibilidad -- */

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

@media print {
  .header, .footer, .cta-band, .clientbox, .hero__actions { display: none; }
  body { color: #000; }
}

/* Listas dentro del reglamento */
.rule ol, .rule ul { color: var(--muted); font-size: .95rem; margin: .4em 0 0; padding-left: 1.15em; }
.rule li { margin-bottom: .3em; }
.rule p + p { margin-top: .5em; }

/* ------------------------------------------------------ Galeria fotos --- */

.shots { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.shot { margin: 0; border-radius: 14px; overflow: hidden; background: var(--ink); }
.shot img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.facts--light .fact__value { color: var(--heading); }
.facts--light .fact__label { color: var(--muted); }

/* -------------------------------------------------------------- Prosa --- */

.prose { max-width: 74ch; }
.prose p { color: var(--muted); margin-bottom: 1em; }
.prose p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .header__nav,
  .header__nav .nav__list > li,
  .header__nav .nav__cta > a { transition-duration: .01ms; transform: none; }
}

/* Credito de desarrollo */
.footer__credit { margin: 0; width: 100%; font-size: .82rem; }
.footer__credit a { color: rgba(255,255,255,.6); font-size: .82rem; }
.footer__credit a:hover { color: #fff; }

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

/* Aviso interno en las paginas legales */
.legal-note {
  background: var(--brand-soft);
  border-left: 3px solid var(--brand);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  font-size: .92rem;
}

/* ------------------------------------------------------------ Precios --- */

.prices { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.prices--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.price {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  background: var(--paper);
}
.price--card { display: flex; flex-direction: column; }
.price__name {
  font-family: var(--font-ui); font-weight: 500;
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 10px;
}
.price__fig {
  font-family: var(--font-ui); font-weight: 500;
  font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.5rem);
  line-height: 1; color: var(--heading); margin: 0;
  font-variant-numeric: tabular-nums;
}
.price__unit { font-size: .88rem; color: var(--muted); margin: 6px 0 0; }
.price ul {
  list-style: none; margin: 16px 0 0; padding: 16px 0 0;
  border-top: 1px solid var(--line); font-size: .92rem; color: var(--muted);
}
.price li { margin-bottom: .45em; padding-left: 1.15em; position: relative; }
.price li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
}
.price li:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------- Galerias --- */

.gal-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.gal-card {
  position: relative; display: block; border-radius: var(--radius);
  overflow: hidden; background: var(--ink); color: #fff;
  aspect-ratio: 4 / 3;
}
.gal-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.gal-card:hover img, .gal-card:focus-visible img { transform: scale(1.05); }
.gal-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,14,18,0) 42%, rgba(11,14,18,.88) 100%);
}
.gal-card__body { position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 1; }
.gal-card__year {
  font-family: var(--font-ui); font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: #ff8a2b;
}
.gal-card__name {
  display: block; font-family: var(--font-ui); font-weight: 500;
  font-size: 1.14rem; line-height: 1.2; color: #fff; margin-top: 3px;
}
.gal-card__count { display: block; font-size: .84rem; color: rgba(255,255,255,.72); margin-top: 3px; }
.gal-card:hover { text-decoration: none; }

/* Edicion sin fotos todavia */
.gal-card--soon { background: var(--surface); color: var(--muted); cursor: default; }
.gal-card--soon::after { display: none; }
.gal-card--soon .gal-card__body { position: static; padding: 22px; }
.gal-card--soon .gal-card__name { color: var(--heading); }
.gal-card--soon .gal-card__count { color: var(--muted); }
.gal-card--soon .gal-card__year { color: var(--brand-ink); }

/* Rejilla de fotos de una edicion */
.gal-photos { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.gal-photo {
  padding: 0; border: 0; background: var(--ink); cursor: pointer;
  border-radius: 10px; overflow: hidden; aspect-ratio: 3 / 2; display: block;
}
.gal-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.22,1,.36,1); }
.gal-photo:hover img { transform: scale(1.06); }

/* Visor a pantalla completa */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(11,14,18,.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: grid; place-items: center; padding: 56px 16px;
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
}
.lightbox[data-open="true"] { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 82vh; border-radius: 10px; }
.lightbox__bar {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; color: rgba(255,255,255,.8); font-size: .9rem;
}
.lightbox__btn {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25);
  color: #fff; border-radius: 50%; width: 46px; height: 46px;
  display: grid; place-items: center; cursor: pointer;
}
.lightbox__btn:hover { background: rgba(255,255,255,.22); }
.lightbox__btn svg { width: 20px; height: 20px; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 14px; }
.lightbox__nav--next { right: 14px; }
@media (max-width: 560px) {
  .lightbox { padding: 64px 8px; }
  .lightbox__nav--prev { left: 6px; }
  .lightbox__nav--next { right: 6px; }
}

/* Telefonos por idioma */
.phones { list-style: none; margin: 0; padding: 0; }
.phones li { margin-bottom: 10px; }
.phone {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  color: var(--heading); background: var(--paper);
}
.phone:hover { border-color: var(--ink); text-decoration: none; }
.phone__flag { font-size: 1.35rem; line-height: 1; flex: none; }
.phone__num { font-family: var(--font-ui); font-weight: 500; font-size: 1.02rem; }
.phone__lang {
  margin-left: auto; font-size: .78rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}

/* -------------------------------------------------------------- Media --- */

.videos { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.video__frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius);
  overflow: hidden; background: var(--ink);
}
.video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__title { font-family: var(--font-ui); font-weight: 500; margin: 12px 0 2px; color: var(--heading); }
.video__meta { font-size: .86rem; color: var(--muted); margin: 0; }

.matches { display: grid; gap: 10px; }
.match {
  display: grid; align-items: center; gap: 4px 16px;
  grid-template-columns: auto 1fr auto;
  padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); color: var(--heading);
}
.match:hover { border-color: var(--ink); text-decoration: none; }
.match__cat {
  font-family: var(--font-ui); font-weight: 500; font-size: .74rem;
  letter-spacing: .08em; padding: 5px 9px; border-radius: 7px;
  background: var(--surface); color: var(--ink-3);
}
.match__teams { font-weight: 500; }
.match__meta { font-size: .86rem; color: var(--muted); }
.match__live {
  font-family: var(--font-ui); font-size: .68rem; font-weight: 500;
  letter-spacing: .12em; padding: 4px 9px; border-radius: 999px;
  background: #b3261e; color: #fff;
}
@media (max-width: 560px) {
  .match { grid-template-columns: auto 1fr; }
  .match__meta, .match__live { grid-column: 2; }
}
.media-empty { color: var(--muted); font-style: italic; }

/* Sin video para quien prefiere menos movimiento: queda el poster */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
  .hero__media { background: center 32% / cover no-repeat url("../img/hero-winners-1920.jpg"); }
}

/* Agrupacion por genero en las categorias */
.cat-group {
  font-family: var(--font-ui); font-size: .8rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  margin: 26px 0 12px;
}
.cat-group:first-child { margin-top: 0; }
.cat-gender {
  font-family: var(--font-ui); font-size: .66rem; font-weight: 500;
  letter-spacing: .08em; color: var(--muted);
  align-self: center; margin-right: 2px;
}

/* ------------------------------------------------------- Cinta animada --- */

.marquee {
  background: var(--ink);
  border-block: 1px solid rgba(255,255,255,.1);
  overflow: hidden;
  padding: 14px 0;
  /* Aisla el desplazamiento del resto del documento. */
  contain: content;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee__group {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: clamp(28px, 5vw, 64px);
  padding-right: clamp(28px, 5vw, 64px);
  flex: none;
  /* Cada grupo ocupa al menos media pantalla. Con cuatro grupos, la pista
     mide siempre dos pantallas como minimo, asi que nunca queda un trozo
     vacio por mucho que se ensanche la ventana o se acorte el texto. */
  min-width: 50vw;
}
.marquee__item {
  font-family: var(--font-display);
  font-size: clamp(.95rem, .8rem + .7vw, 1.35rem);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.88);
  white-space: nowrap;
}
.marquee__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none; }

/* Se desplaza justo un grupo —una cuarta parte de la pista, que lleva
   cuatro— asi que al reiniciarse el ciclo no se ve ningun salto. */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

.marquee:hover .marquee__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}

/* ---------------------------------------------------- Secciones con nº --- */

.section__num {
  display: block;
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--brand-ink);
  margin-bottom: 10px;
}
.section--dark .section__num,
.proof .section__num { color: #ff8a2b; }

/* ---------------------------------------------------------- Modo oscuro --- */
/*
   Se activa con data-theme="dark" en <html>. Toda la hoja funciona sobre
   variables, asi que basta con redefinirlas: no hay que duplicar reglas.

   Los fondos siguen la referencia del cliente (casi negro, no gris medio) y
   todos los pares texto/fondo se han comprobado contra el minimo AA de 4,5:1.
*/
html[data-theme="dark"] {
  /* --ink NO se invierte: es el fondo del hero, del pie y de la barra
     superior, que llevan texto blanco fijo. Invertirlo dejaba blanco sobre
     blanco. El color de los titulares vive en --heading. */
  --heading: #f2f5f8;
  /* ink-2 e ink-3 tampoco se invierten: son fondos (btn--dark:hover, etc.) */
  --ink-2:   #16202b;
  --ink-3:   #202d3a;
  --body:    #ced6e0;
  --muted:   #98a3b3;   /* 6.2:1 sobre el fondo */
  --line:    #1c2733;
  --surface: #0c141d;   /* tarjetas, un punto por encima del fondo */
  --table-head: #16202b;  /* cabecera de tabla en oscuro */
  --paper:   #05090e;   /* fondo de pagina, casi negro */

  /* El naranja de TEXTO se aclara para leerse sobre negro; el de BOTON se
     mantiene oscuro, porque lleva texto blanco encima. */
  --brand-ink:      #ff8a2b;
  --brand-ink-dark: #ffa028;
  --brand-btn:      #b85408;
  --brand-btn-hover: #9c4207;
  --brand-soft:     #2a1a0c;

  --promises:      #6cb6ff;
  --promises-soft: #0e1b28;
  --summer:        #ffa028;
  --summer-soft:   #2a1d0c;

  --shadow-sm: none;
  --shadow-md: 0 4px 12px rgba(0,0,0,.5);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.6);

  color-scheme: dark;
}

/* Superficies que llevaban blanco fijo */
html[data-theme="dark"] body { background: var(--paper); color: var(--body); }
html[data-theme="dark"] .header::before { background: rgba(5,9,14,.92); }
html[data-theme="dark"] .section--surface { background: var(--surface); }
html[data-theme="dark"] .edition,
html[data-theme="dark"] .price,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .form,
html[data-theme="dark"] .faq__item,
html[data-theme="dark"] .match,
html[data-theme="dark"] .phone,
html[data-theme="dark"] .clubs,
html[data-theme="dark"] .lang__menu,
html[data-theme="dark"] .video__frame,
html[data-theme="dark"] .cat-table,
html[data-theme="dark"] .table-wrap {
  background: var(--surface);
  border-color: var(--line);
}

/* La franja de clubes tenia fondo blanco fijo. */
html[data-theme="dark"] .clubs { border-bottom-color: var(--line); }
html[data-theme="dark"] .clubs__track img { filter: grayscale(1) invert(1) brightness(1.6); opacity: .72; }

/* La seccion clara pasa a ser la tarjeta; el resto queda al fondo. */
html[data-theme="dark"] .section--surface { background: var(--surface); }

/* Bloques que ya eran oscuros en claro no deben aclararse. */
html[data-theme="dark"] .hero,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .header__top,
html[data-theme="dark"] .section--dark,
html[data-theme="dark"] .pagehero,
html[data-theme="dark"] .proof { background: var(--ink); }
html[data-theme="dark"] .btn--light { background: var(--surface); color: var(--heading); }
html[data-theme="dark"] .btn--ghost { border-color: var(--line); color: var(--heading); }
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: var(--surface); color: var(--body); border-color: var(--line);
}

/* El logotipo oscuro no se ve sobre fondo negro: se usa la version clara. */
html[data-theme="dark"] .header .logo img { content: url("../img/logo-fit-light.png"); }

/* ------------------------------------------------------ Selector de tema --- */

.theme-switch {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 90;
  display: flex; flex-direction: column; gap: 4px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--line); border-right: 0;
  border-radius: 12px 0 0 12px;
  box-shadow: var(--shadow-md);
}
.theme-switch button {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; border-radius: 9px;
  background: transparent; color: var(--muted);
  cursor: pointer;
}
.theme-switch button:hover { color: var(--heading); background: var(--surface); }
.theme-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.theme-switch svg { width: 18px; height: 18px; }

@media (max-width: 560px) {
  .theme-switch { top: auto; bottom: 16px; transform: none; flex-direction: row; border-radius: 12px 0 0 12px; }
}

/* Texto de las pildoras, que en oscuro quedaba oscuro sobre oscuro. */
html[data-theme="dark"] .cat-pill,
html[data-theme="dark"] .format-badge,
html[data-theme="dark"] .match__cat { background: var(--ink-3); color: var(--heading); }
html[data-theme="dark"] .edition--promises .cat-pill { background: var(--promises-soft); color: #9cc9ff; }
html[data-theme="dark"] .edition--summer .cat-pill { background: var(--summer-soft); color: #ffb45c; }

/* Botones e interruptores que invertian a dos tonos oscuros. */
html[data-theme="dark"] .btn--ghost:hover { background: var(--ink-3); color: var(--heading); }
html[data-theme="dark"] .theme-switch button[aria-pressed="true"] { background: var(--heading); color: var(--paper); }
html[data-theme="dark"] .btn--dark { background: var(--ink-3); color: var(--heading); }
html[data-theme="dark"] .btn--dark:hover { background: var(--line); color: var(--heading); }
html[data-theme="dark"] .btn--light { background: var(--ink-3); color: var(--heading); }
html[data-theme="dark"] .nav__cta .btn--ghost { color: var(--brand-ink); border-color: rgba(255,138,43,.55); }
html[data-theme="dark"] .nav__cta .btn--ghost:hover,
html[data-theme="dark"] .nav__cta .btn--ghost:focus-visible { background: var(--brand-ink); color: var(--paper); }
/* Etiquetas pequenas: en oscuro su texto usaba un tono de superficie. */
html[data-theme="dark"] .theme-switch button[aria-pressed="true"] { background: var(--heading); color: var(--paper); }
/* La insignia de formato lleva texto, no es decorativa: en oscuro su naranja
   debe aclararse para alcanzar el minimo AA. */
html[data-theme="dark"] .format-badge[data-format="7v7"] { color: #ffa851; }
html[data-theme="dark"] .feature__icon { color: #ffa851; }

/* ---------------------------------------------------------------- *
 * Resultados y clasificaciones publicos
 * ---------------------------------------------------------------- */
.results__filters{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-end;margin-bottom:38px}
.results__filters .field{display:flex;flex-direction:column;gap:6px}
.results__filters label{font-size:.82rem;font-weight: 500;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.results__filters select{min-width:220px;padding:11px 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);color:var(--heading);font:inherit}
.results__filters select:focus-visible{outline:3px solid var(--brand-ink);outline-offset:2px}

.results__group{margin-bottom:54px}
.results__group > h2{margin:0 0 6px}
.results__subhead{margin:26px 0 12px;font-size:1.05rem;color:var(--muted);
  letter-spacing:.06em;text-transform:uppercase}
.results__empty{padding:28px;border:1px dashed var(--line);border-radius:14px;color:var(--muted)}
.results__legend{margin:10px 0 0;font-size:.82rem;color:var(--muted)}
.results__note{margin:6px 0 0;font-size:.85rem;color:var(--brand-ink)}

/* La tabla se desborda en movil antes que encogerse hasta ser ilegible. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.standings{width:100%;min-width:560px;border-collapse:collapse;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
.standings th,.standings td{padding:12px 10px;text-align:center;border-bottom:1px solid var(--line)}
.standings thead th{background:var(--table-head);color:var(--heading);font-size:.78rem;
  letter-spacing:.06em;text-transform:uppercase}
.standings tbody th{text-align:left;font-weight: 500;color:var(--heading);white-space:nowrap}
.standings tbody tr:last-child th,.standings tbody tr:last-child td{border-bottom:0}
.standings tbody tr.is-qualified td:first-child{color:var(--brand-ink)}
.standings tbody tr.is-qualified{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.standings__note{margin:8px 0 0;font-size:.82rem;color:var(--muted)}
.standings__note b{color:var(--brand-ink)}
.standings tr.is-unresolved{background:color-mix(in srgb,var(--brand-ink) 8%,transparent)}

.matches{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.match{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.match__team{font-weight: 500;color:var(--heading)}
.match__team--away{text-align:right}
.match__score{min-width:86px;text-align:center;font-variant-numeric:tabular-nums;
  font-weight: 500;font-size:1.15rem;color:var(--heading)}
.match__score span{margin:0 6px;color:var(--muted)}
.match--played .match__score{color:var(--brand-ink)}
.match__meta{grid-column:1/-1;display:flex;justify-content:space-between;gap:10px;
  font-size:.8rem;color:var(--muted)}

@media (max-width:640px){
  .match{grid-template-columns:1fr auto;row-gap:6px}
  .match__team--away{grid-column:1;text-align:left}
  .match__score{grid-row:1/3;grid-column:2}
  .results__filters select{min-width:0;width:100%}
  .results__filters .field{flex:1 1 100%}
}
/* Cabecera sin foto: solo el fondo oscuro con un toque de marca. */
.pagehero--plain::after{background:linear-gradient(180deg,rgba(11,14,18,.92),rgba(30,16,4,.94))}

/* ==========================================================================
 * REDISEÑO 2027
 *
 * Capa que reescribe el lenguaje visual sobre la base anterior. Se apoya en
 * las referencias que pasó el cliente: fondo oscuro profundo, tarjetas con
 * una pestaña diagonal en color de marca, franja de cifras bajo el hero,
 * titulares condensados y botones con flecha.
 *
 * Claro y oscuro se tratan igual: todo lo que cambia entre temas es un token,
 * nunca una regla duplicada, para que ninguno de los dos quede a medias.
 * ========================================================================== */

:root {
  /* Superficies del rediseño. En claro la pagina es blanca y las tarjetas
     llevan un borde marcado; en oscuro es al reves, manda el relleno. */
  --card:        #ffffff;
  --card-border: #dfe4ea;
  --card-hover:  #ffffff;
  --band:        #0b0e12;   /* franjas oscuras intercaladas */
  --rule:        #e2e6eb;
  --accent:      #c4550a;   /* linea y pestaña de marca */
  --accent-on:   #ffffff;   /* texto sobre la pestaña */
  --shadow-card: 0 1px 2px rgba(11,14,18,.05), 0 10px 26px rgba(11,14,18,.07);
  --shadow-lift: 0 4px 10px rgba(11,14,18,.08), 0 18px 40px rgba(11,14,18,.12);
  --cut: 16px;              /* profundidad del corte diagonal */
}

html[data-theme="dark"] {
  --card:        #0e1721;
  --card-border: #1e2b39;
  --card-hover:  #12202c;
  --band:        #070c12;
  --rule:        #1c2733;
  --accent:      #ff8a2b;
  --accent-on:   #0b0e12;
  --shadow-card: 0 1px 2px rgba(0,0,0,.5), 0 12px 30px rgba(0,0,0,.45);
  --shadow-lift: 0 6px 14px rgba(0,0,0,.55), 0 22px 50px rgba(0,0,0,.6);
}

/* ------------------------------------------------- Tarjeta con pestaña --- */
/* La pestaña recorta su esquina derecha, como en las referencias. Es
   decorativa: el texto que lleva dentro ya esta en el titulo de la tarjeta. */
.rcard {
  position: relative;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rcard:hover, .rcard:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: var(--accent);
}
.rcard__tab {
  display: inline-block;
  padding: 9px 30px 9px 18px;
  background: var(--accent);
  color: var(--accent-on);
  font-family: var(--font-ui);
  font-size: .76rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%);
}
.rcard__body { padding: 20px 22px 24px; }
.rcard__body > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------ Franja de cifras -- */
.statband { background: var(--band); color: #fff; }
.statband__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  margin: -34px 0 0;                 /* monta sobre el hero */
  position: relative; z-index: 2;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(6px);
}
.statband__item {
  padding: 22px 20px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.14);
}
.statband__item:last-child { border-right: 0; }
.statband__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.6rem);
  line-height: 1; color: #ff9a4d;
}
.statband__label {
  display: block; margin-top: 8px;
  font-size: .78rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.76);
}
@media (max-width: 720px) {
  .statband__inner { margin-top: 0; }
  .statband__item { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .statband__item:last-child { border-bottom: 0; }
}

/* ------------------------------------------ Titular de seccion centrado -- */
/* Las dos rayitas laterales de la referencia, hechas con el propio titulo
   para no meter elementos vacios que lea el lector de pantalla. */
.section__head--center h2 {
  display: flex; align-items: center; justify-content: center; gap: 18px;
}
.section__head--center h2::before,
.section__head--center h2::after {
  content: ""; height: 2px; flex: 0 1 68px;
  background: linear-gradient(90deg, transparent, var(--accent));
}
.section__head--center h2::after { background: linear-gradient(90deg, var(--accent), transparent); }
@media (max-width: 560px) {
  .section__head--center h2::before,
  .section__head--center h2::after { flex-basis: 24px; }
}

/* ------------------------------------------------------ Botón con flecha -- */
.btn--primary::after,
.btn--dark::after {
  content: "→";
  margin-left: 10px;
  transition: transform .18s ease;
}
.btn--primary:hover::after,
.btn--dark:hover::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .btn--primary:hover::after, .btn--dark:hover::after { transform: none; }
  .rcard:hover, .rcard:focus-within { transform: none; }
}

/* ------------------------------------------------------- Corte diagonal -- */
/* Separador entre el hero oscuro y lo que viene debajo. */
.slant { position: relative; }
.slant::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 34px;
  background: var(--paper);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.slant--accent::after { background: var(--accent); height: 8px; clip-path: polygon(0 100%, 100% 0, 100% 100%); }

/* ------------------------------------------------- Tira de ventajas ------ */
.perks { background: var(--accent); color: var(--accent-on); }
.perks__inner {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.perk {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 26px 22px;
  border-right: 1px solid color-mix(in srgb, var(--accent-on) 22%, transparent);
}
.perk:last-child { border-right: 0; }
.perk svg { width: 26px; height: 26px; flex: none; }
.perk h3 { font-size: 1rem; margin: 0 0 .25em; color: inherit; }
.perk p { margin: 0; font-size: .9rem; opacity: .88; }
@media (max-width: 720px) {
  .perk { border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--accent-on) 22%, transparent); }
  .perk:last-child { border-bottom: 0; }
}

/* ------------------------------------------ Ajustes de piezas existentes -- */
/* Las tarjetas que ya habia adoptan el mismo lenguaje sin cambiar su HTML. */
.feature, .faq__item, .standings, .match, .results__filters select {
  border-color: var(--card-border);
}
.feature {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 24px 22px;
  box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--accent); }
.feature::before {
  content: ""; display: block;
  width: 46px; height: 3px; margin-bottom: 16px;
  background: var(--accent);
}
.standings, .match { box-shadow: var(--shadow-card) }
.standings thead th { border-bottom: 2px solid var(--accent) }
.match { transition: border-color .18s ease }
.match:hover { border-color: var(--accent) }
@media (prefers-reduced-motion: reduce) { .feature:hover { transform: none } }

/* Las tarjetas de edición adoptan la pestaña diagonal del rediseño: la
   etiqueta deja de ser texto suelto y pasa a ser la pestaña de color. */
.ed-card { padding-top: 0; border-radius: 14px; }
.ed-card::before { width: 3px; }
.ed-card__tag {
  align-self: flex-start;
  margin: 0 0 4px -18px;         /* se pega al borde izquierdo de la tarjeta */
  padding: 8px 26px 8px 21px;
  font-size: .66rem; letter-spacing: .12em;
  background: var(--ed-accent);
  color: #0b0e12;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
}
.ed-card__more { letter-spacing: .08em; }
.ed-card:hover .ed-card__more { text-decoration: underline; text-underline-offset: 3px; }

/* La marquesina y la tira de clubes recogen la nueva línea de marca. */
.marquee { border-top: 2px solid var(--accent); border-bottom: 1px solid var(--rule); }
.clubs { border-bottom: 1px solid var(--rule); }

/* El bloque de cifras histórico se alinea con la franja nueva. */
.fact__value { color: #ff9a4d; }
.proof .facts { border-top: 1px solid rgba(255,255,255,.14); padding-top: 26px; }

/* Cierre de página: la tira de ventajas va pegada al pie sin hueco. */
.perks + .footer, .perks + footer { margin-top: 0; }

/* ------------------------------------------------ Hero: contraste real --- */
/* La foto es clara y muy cargada: con el velo anterior ni el titular ni las
   tarjetas se leian. Se oscurece a fondo y las piezas dejan de ser cristal
   translucido para tener su propio fondo solido. */
.hero::after {
  background:
    linear-gradient(180deg, rgba(11,14,18,.72) 0%, rgba(11,14,18,.58) 42%, rgba(11,14,18,.94) 100%),
    linear-gradient(100deg, rgba(11,14,18,.92) 0%, rgba(11,14,18,.62) 48%, rgba(11,14,18,.30) 100%);
}
.hero__inner { min-height: min(78vh, 680px); }
.hero h1 { text-shadow: 0 2px 28px rgba(11,14,18,.85); }
.hero__lead { color: rgba(255,255,255,.94); text-shadow: 0 1px 18px rgba(11,14,18,.85); }

.ed-card {
  background: rgba(8,12,17,.78);
  border-color: rgba(255,255,255,.26);
  backdrop-filter: blur(10px);
  color: rgba(255,255,255,.88);
}
.ed-card:hover { background: rgba(8,12,17,.92); border-color: var(--ed-accent); }
.ed-card__cats span { background: rgba(255,255,255,.16); color: #fff; }

.countdown {
  margin-top: 6px; padding: 18px;
  border: 1px solid rgba(255,255,255,.2);
  border-top: 2px solid var(--brand-ink, #ff8a2b);
  border-radius: 14px;
  background: rgba(8,12,17,.78);
  backdrop-filter: blur(10px);
}
.countdown__label { color: rgba(255,255,255,.78); margin-bottom: 4px; }
.countdown__unit { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
.countdown__unit span:last-child { color: rgba(255,255,255,.78); }

/* La franja de cifras deja de montarse sobre la foto: es su propia banda,
   separada del hero por la linea de marca. */
.statband__inner {
  margin-top: 0;
  border: 0; border-radius: 0;
  background: none; backdrop-filter: none;
}
.statband { border-top: 3px solid var(--accent); padding: 6px 0; }
.statband__item { border-color: rgba(255,255,255,.16); }


/* Franja de servicio sin imagen: el texto ocupa el ancho completo en lugar
   de quedarse en media columna con un hueco al lado. */
.split--text { grid-template-columns: 1fr; }
.split--text .split__body { max-width: 72ch; }

/* ------------------------------------------------ Sin negritas ----------- */
/* Peticion del cliente: la web no lleva negrita. La jerarquia la marcan el
   tamano, el color, las mayusculas y el espaciado, no el grosor. Jost se
   queda en 500 como maximo; los titulares van en Fjalla One, que solo tiene
   un grosor, asi que no les afecta. */
b, strong, th, dt, caption, legend, optgroup, summary {
  font-weight: 500;
}

/* Enlace a la retransmisión de un partido. */
.match__stream{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-ui);font-size:.78rem;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;color:var(--brand-ink);
}
.match__stream::before{
  content:"";width:0;height:0;
  border-left:8px solid currentColor;
  border-top:5px solid transparent;border-bottom:5px solid transparent;
}
.match__venue a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.results__actions{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 30px}

/* ------------------------------------------------------ Escudos ---------- */
.badge{
  width:22px;height:22px;flex:none;
  object-fit:contain;vertical-align:middle;
}
/* Hueco del mismo tamaño cuando el club no tiene escudo cargado, para que
   los nombres queden alineados entre filas. */
.badge--empty{display:inline-block;border-radius:4px;background:var(--line)}
.team{display:inline-flex;align-items:center;gap:9px}
.match__team{display:flex;align-items:center;gap:9px}
.match__team--away{justify-content:flex-start}
.match__team--home{justify-content:flex-end}
@media (max-width:640px){
  .match__team--away{justify-content:flex-start}
  .badge{width:20px;height:20px}
}

/* ---------------------------------------------------- Equipaciones ------- */
.kit{display:inline-flex;align-items:center;gap:5px;flex:none}
.kit__dot{
  width:11px;height:11px;border-radius:50%;
  background:var(--kit,#fff);
  /* Borde propio: una equipación blanca sobre tarjeta blanca desaparecería. */
  box-shadow:0 0 0 1px var(--line), inset 0 0 0 1px rgba(0,0,0,.08);
}
.kit__label{font-size:.72rem;color:var(--muted);white-space:nowrap}
@media (max-width:640px){ .kit__label{display:none} }

/* Nota bajo la casilla de imágenes: es un texto legal, va más pequeño pero
   legible, no escondido. */
.consent-note{
  margin:6px 0 0 30px;font-size:.84rem;line-height:1.5;color:var(--muted);
  max-width:64ch;
}
.consent-images{align-items:flex-start}

/* ------------------------------------------ Acceso del club por enlace --- */
.access{display:grid;gap:26px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){ .access{grid-template-columns:320px minmax(0,1fr);align-items:start} }

.access__summary{
  padding:22px;border:1px solid var(--card-border);border-radius:14px;
  background:var(--card);box-shadow:var(--shadow-card);
}
.access__summary h2{font-size:1.05rem;margin-bottom:14px}
.access__list{margin:0}
.access__list > div{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--rule)}
.access__list > div:last-child{border-bottom:0}
.access__list dt{color:var(--muted);font-size:.88rem}
.access__list dd{margin:0;text-align:right;color:var(--heading)}
/* El pago inicial es la cifra que importa en esta página. */
.access__highlight dd{color:var(--brand-ink);font-size:1.15rem}

.access__box{
  padding:24px;border:1px solid var(--card-border);border-radius:14px;
  background:var(--card);box-shadow:var(--shadow-card);
}
.access__box + .access__box{margin-top:18px}
.access__box--ok{border-color:#2f9e63;background:color-mix(in srgb,#2f9e63 7%,var(--card))}
.access__box--wait{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--card))}
.access__method + .access__method{margin-top:24px;padding-top:24px;border-top:1px solid var(--rule)}
.access__method h3{font-size:1rem;margin-bottom:8px}
.access__instructions{color:var(--body);margin-bottom:14px}
.access__soon{color:var(--muted);margin:0}
.access__bank{margin:16px 0;padding:16px;border-radius:10px;background:var(--surface);border:1px solid var(--rule)}
.access__bank > div{display:flex;justify-content:space-between;gap:14px;padding:6px 0}
.access__bank dt{color:var(--muted);font-size:.88rem}
.access__bank dd{margin:0;text-align:right;color:var(--heading)}
/* IBAN y concepto: se copian a mano, así que en monoespaciada y con espacio. */
.access__iban{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;user-select:all}

/* --------------------------------------------------- Equipación ---------- */
.kitfig{width:100%;max-width:180px;height:auto;display:block;margin:0 auto}
.kitform{display:grid;gap:22px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){ .kitform{grid-template-columns:180px minmax(0,1fr)} }
.kitform__fields{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.kitform__field label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:4px}
.kitform__field input[type=color]{width:100%;height:38px;padding:2px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.kitform__swatch{display:flex;align-items:center;gap:8px}
.kitform__swatch button{
  border:1px solid var(--line);background:var(--surface);color:var(--muted);
  border-radius:8px;padding:0 9px;height:38px;cursor:pointer;font-size:1.1rem;line-height:1;
}

/* ------------------------------------------ Formulario de inscripción ---- */
.regblock{
  padding:26px;margin-bottom:22px;border:1px solid var(--card-border);
  border-radius:14px;background:var(--card);box-shadow:var(--shadow-card);
}
.regblock > h2{margin-bottom:6px}
.regblock__lead{color:var(--muted);max-width:70ch;margin-bottom:18px}
.regblock__empty{color:var(--muted);padding:18px;border:1px dashed var(--line);border-radius:10px}
.access__flash{
  padding:12px 16px;margin-bottom:18px;border-radius:10px;
  background:color-mix(in srgb,#2f9e63 12%,transparent);
  border:1px solid #2f9e63;color:var(--heading);
}
/* Tras guardar se vuelve a la altura donde se estaba, asi que el aviso de
   arriba no se veria: unos segundos flota abajo. */
.access__flash--toast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;
  margin:0;max-width:calc(100vw - 32px);
  background:var(--card);box-shadow:0 8px 28px rgba(0,0,0,.22);
}

/* Barra fija con el unico «Guardar cambios» de la inscripcion. */
.savebar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:var(--card);border-top:1px solid var(--line);
  box-shadow:0 -6px 22px rgba(0,0,0,.10);
}
.savebar__inner{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding-top:12px;padding-bottom:12px}
.savebar__msg{color:var(--muted);font-size:.92rem}
.savebar[data-state="dirty"] .savebar__msg{color:var(--heading);font-weight:500}
.savebar[data-state="saved"] .savebar__msg{color:#2f9e63;font-weight:500}
.savebar[data-state="error"] .savebar__msg{color:#c0392b;font-weight:500}
.savebar .btn:disabled{opacity:.45;cursor:default}
/* Hueco para que la barra no tape el final de la pagina, y el aviso
   flotante por encima de ella. */
.has-savebar{padding-bottom:74px}
.has-savebar .access__flash--toast{bottom:86px}

.docs{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.doc{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 14px;
  border:1px solid var(--rule);border-radius:10px;background:var(--surface)}
.doc__name{flex:1;min-width:200px;color:var(--heading)}
.doc__missing{color:var(--muted);font-size:.88rem}

.kits{display:grid;gap:20px}
@media (min-width:900px){ .kits{grid-template-columns:repeat(2,minmax(0,1fr))} }
.kitcard{padding:20px;border:1px solid var(--rule);border-radius:12px;background:var(--surface)}
.kitcard h3{margin-bottom:14px}

.squad{width:100%;min-width:720px;border-collapse:collapse}
.squad th,.squad td{padding:10px 8px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
.squad thead th{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.squad__role{display:block;font-size:.78rem;color:var(--muted)}
.squad__minor{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:5px;
  font-size:.7rem;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--brand-ink)}
.squad__ok{color:#2f9e63;font-size:.85rem}
.squad__need{display:block;margin-top:4px;font-size:.75rem;color:var(--brand-ink)}
.squad__upload{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.squad__upload input[type=file]{font-size:.76rem;max-width:170px}
.squad__remove{background:none;border:0;color:var(--muted);font-size:1.3rem;line-height:1;cursor:pointer;padding:0 4px}
.squad__remove:hover{color:#c0392b}

.squadadd{margin-top:22px;padding:20px;border:2px dashed var(--line);border-radius:12px}
.squadadd h3{font-size:1rem;margin-bottom:14px}
.squadadd__grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:16px}
.form__alt{margin-top:14px;font-size:.9rem}
.field__error{margin-top:5px;font-size:.85rem;color:#c0392b}

/* ------------------------------------------- Reglamento plegable --------- */
.rules-acc{border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--card)}
.rules-acc__intro{padding:20px 22px;border-bottom:1px solid var(--rule);color:var(--body)}
.rules-acc__item{border-bottom:1px solid var(--rule)}
.rules-acc__item:last-child{border-bottom:0}
.rules-acc__item summary{
  position:relative;cursor:pointer;list-style:none;
  padding:17px 52px 17px 22px;
  font-family:var(--font-ui);font-weight:500;color:var(--heading);
}
.rules-acc__item summary::-webkit-details-marker{display:none}
.rules-acc__item summary:hover{background:var(--surface)}
.rules-acc__item summary:focus-visible{outline:3px solid var(--brand-ink);outline-offset:-3px}
/* Flecha que gira al abrir. */
.rules-acc__item summary::after{
  content:"";position:absolute;right:22px;top:50%;
  width:9px;height:9px;margin-top:-6px;
  border-right:2px solid var(--brand-ink);border-bottom:2px solid var(--brand-ink);
  transform:rotate(45deg);transition:transform .18s ease;
}
.rules-acc__item[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.rules-acc__item[open] summary{background:var(--surface)}
.rules-acc__body{padding:4px 22px 22px;color:var(--body);max-width:72ch}
.rules-acc__body p{margin-bottom:.9em}
.rules-acc__body p:last-child{margin-bottom:0}
.rules-acc__body ul,.rules-acc__body ol{margin:0 0 .9em 1.2em}
.rules-acc__body li{margin-bottom:.35em}
@media (prefers-reduced-motion: reduce){ .rules-acc__item summary::after{transition:none} }

/* ------------------------------------------------------- Carrusel -------- */
.carousel{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--ink)}
.carousel__track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track:focus-visible{outline:3px solid var(--brand-ink);outline-offset:-3px}
.carousel__slide{flex:0 0 100%;margin:0;scroll-snap-align:center}
.carousel__slide img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}

.carousel__nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(8,12,17,.62);backdrop-filter:blur(4px);
  transition:background .18s ease;
}
.carousel__nav:hover{background:rgba(8,12,17,.85)}
.carousel__nav:focus-visible{outline:3px solid #fff;outline-offset:2px}
.carousel__nav--prev{left:12px}
.carousel__nav--next{right:12px}
/* La flecha se dibuja con un borde girado: una imagen menos que cargar. */
.carousel__nav::before{
  content:"";position:absolute;top:50%;left:50%;width:10px;height:10px;
  border-top:2px solid #fff;border-right:2px solid #fff;
}
.carousel__nav--next::before{transform:translate(-65%,-50%) rotate(45deg)}
.carousel__nav--prev::before{transform:translate(-35%,-50%) rotate(-135deg)}

.carousel__dots{
  position:absolute;left:0;right:0;bottom:12px;
  display:flex;justify-content:center;gap:7px;
}
.carousel__dots button{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.45);transition:background .18s ease,width .18s ease;
}
.carousel__dots button[aria-current="true"]{background:#fff;width:22px;border-radius:5px}
.carousel__dots button:focus-visible{outline:2px solid #fff;outline-offset:3px}

@media (prefers-reduced-motion: reduce){
  .carousel__track{scroll-behavior:auto}
  .carousel__dots button{transition:none}
}
/* Listas dentro del reglamento: una línea por categoría, no un párrafo
   corrido donde hay que buscar la propia. */
.rules-acc__body .rule-list{list-style:none;margin:0 0 .9em;padding:0}
.rules-acc__body .rule-list li{
  padding:7px 0;border-bottom:1px solid var(--rule);margin:0;
}
.rules-acc__body .rule-list li:last-child{border-bottom:0}

/* ------------------------------------------------- Los dos logotipos ----- */
.logos{display:flex;align-items:center;gap:14px;flex:none}
/* Línea de separación: deja claro que son dos marcas, no un solo logotipo. */
.logos .logo--footvia{
  padding-left:14px;
  border-left:1px solid var(--line);
}
/* Los dos a la misma altura: el del FIT es apaisado y el de Footvia casi
   cuadrado, asi que a igual altura ocupan anchos muy distintos, pero es la
   altura lo que hace que se lean como una pareja. */
.logos .logo--footvia img{height:54px}
.logos .logo--footvia{opacity:.9;transition:opacity .18s ease}
.logos .logo--footvia:hover{opacity:1}
/* En móvil la cabecera va justa y manda el logo del torneo. */
@media (max-width:720px){ .logos .logo--footvia{display:none} }
/* Rejilla del formulario de contacto: dos columnas en pantalla ancha,
   una sola en móvil. */
.form__grid{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:620px){ .form__grid{grid-template-columns:1fr 1fr} }

/* Plantilla: pestañas por papel y filas de una sola linea. */
.squad-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .85rem; }
.squad-tab {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .8rem; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--ink-soft);
  font: inherit; font-size: .86rem; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.squad-tab:hover:not(:disabled) { border-color: var(--brand); color: var(--ink); }
.squad-tab:disabled { opacity: .4; cursor: default; }
.squad-tab.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.squad-tab__n {
  font-size: .74rem; padding: 0 .3rem; border-radius: 999px;
  background: color-mix(in srgb, currentColor 16%, transparent);
}
.squad-tab.is-on .squad-tab__n { background: rgba(255,255,255,.22); }

.squad--tight th, .squad--tight td {
  padding: .4rem .55rem; font-size: .88rem; white-space: nowrap; vertical-align: middle;
}
.squad--tight .squad__c-num { width: 2.5rem; text-align: center; color: var(--ink-soft); }
.squad--tight .squad__c-name { max-width: 15rem; overflow: hidden; text-overflow: ellipsis; }
.squad--tight .squad__c-act { width: 2rem; text-align: center; }
.squad__role--staff, .squad__role--family { color: var(--ink-soft); }

/* Alta: todos los campos en una sola linea en pantalla ancha. Los que no
   tocan al papel elegido se quitan del todo para que no ocupen hueco. */
.squadadd [hidden] { display: none; }
@media (min-width: 900px) {
  .squadadd__grid { display: flex; flex-wrap: nowrap; gap: 10px; align-items: flex-end; }
  .squadadd__grid .field { flex: 1 1 0; min-width: 0; }
  /* Nombre y apellidos piden mas sitio; el dorsal, casi ninguno. */
  .squadadd__grid .field:has(#a-first), .squadadd__grid .field:has(#a-last) { flex-grow: 1.5; }
  .squadadd__grid .field:has(#a-cat) { flex-grow: .7; }
  .squadadd__grid .field:has(#a-num) { flex: 0 0 4.5rem; }
  .squadadd__grid label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .8rem; }
  .squadadd__grid input, .squadadd__grid select {
    width: 100%; min-width: 0; padding-left: 8px; padding-right: 8px; font-size: .9rem;
  }
}

/* El input real no se ve: el texto de la etiqueta hace de boton. */
.squad__upload { display: inline; }
.squad__file > input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.squad__file > span {
  display: inline-block; padding: .18rem .5rem; border: 1px solid var(--line);
  border-radius: 6px; font-size: .78rem; cursor: pointer;
}
.squad__file:hover > span { border-color: var(--brand); color: var(--ink); }
.squad__file > input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.squad__need {
  display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem;
  margin-left: .3rem; border-radius: 999px; background: #b91c1c; color: #fff;
  font-size: .72rem;
}

/* Alojamiento y transporte -------------------------------------------- */
.choice { border: 0; padding: 0; margin: 0 0 1rem; }
.choice legend { padding: 0; margin-bottom: .5rem; color: var(--ink); }
.choice__opt { display: inline-flex; align-items: center; gap: .4rem; margin-right: 1.25rem; cursor: pointer; }

.stay__hotel h3, .stay__rooms h3 { margin: 1.25rem 0 .5rem; font-family: var(--font-display); font-size: 1.05rem; }
.stay__pending { margin: .75rem 0 0; color: #b45309; font-size: .9rem; }
.stay__total { margin: .5rem 0 .75rem; color: var(--ink); }

.grid--3 { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.field--xs { max-width: 8rem; }

.room {
  border: 1px solid var(--line); border-radius: 10px;
  padding: .85rem 1rem; margin: 0 0 .85rem;
}
.room--over { border-color: #b91c1c; }
.room__head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.room__head h4 { margin: 0; font-family: var(--font-display); font-size: 1rem; }
.room__occ { color: var(--ink-soft); font-size: .86rem; }
.room__warn { color: #b91c1c; font-size: .82rem; }
.room__head .squad__remove { margin-left: auto; }

.room__meta, .room__add { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; margin-top: .6rem; }
.room__add { padding-top: .85rem; border-top: 1px dashed var(--line); }

.room__who-title { margin: .9rem 0 .4rem; color: var(--ink-soft); font-size: .86rem; }
/* Columnas estrechas: una lista larga de gente no debe estirar la tarjeta. */
.room__people {
  display: grid; gap: .25rem .9rem; margin-bottom: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
.room__person { display: flex; align-items: baseline; gap: .45rem; font-size: .88rem; cursor: pointer; }
.room__person small { color: var(--ink-soft); font-size: .78rem; }
/* Ya duerme en otra habitacion: se ve, pero apagado. */
.room__person.is-taken > span { opacity: .5; }

/* Familiares: una lista corta de nombres, cada uno con su aspa para quitarlo. */
.family { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.family li {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .2rem .35rem .2rem .7rem; border: 1px solid var(--line); border-radius: 999px; font-size: .88rem;
}

.squad__export { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.squad__export-label { color: var(--ink-soft); font-size: .86rem; }
.field--sm { max-width: 11rem; }

/* Documentos legales: leer y firmar ------------------------------------ */
.regblock--legal { background: #f4f5f7; border-radius: 14px; padding: 22px 24px; }

.docs { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; counter-reset: doc; }
.doc { border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.doc--signed { border-color: #b7e2c7; background: #f4fbf6; }

.doc__panel > summary { list-style: none; cursor: pointer; }
.doc__panel > summary::-webkit-details-marker { display: none; }
.doc__head {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  padding: .9rem 1.1rem;
}
.doc__check {
  display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem;
  border-radius: 999px; border: 1px solid var(--line); color: transparent;
  font-size: .9rem; flex: none;
}
.doc--signed .doc__check { background: #1c6b3a; border-color: #1c6b3a; color: #fff; }
.doc__name { flex: 1; min-width: 12rem; color: var(--ink); }
.doc__state { font-size: .84rem; color: var(--ink-soft); }
.doc--signed .doc__state { color: #1c6b3a; }

/* El texto va en una caja con su propio scroll: obliga a recorrerlo y
   evita que un reglamento largo entierre el resto del formulario. */
.doc__body {
  max-height: 22rem; overflow-y: auto;
  margin: 0 1.1rem; padding: .9rem 1rem;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; font-size: .92rem;
}
.doc__body p:first-child { margin-top: 0; }
.doc__body p:last-child { margin-bottom: 0; }

.doc__sign { padding: 1rem 1.1rem 1.2rem; }
.doc__accept { display: flex; align-items: flex-start; gap: .5rem; margin: .8rem 0 .9rem; font-size: .9rem; cursor: pointer; }
.doc__accept input { margin-top: .22rem; flex: none; }
.doc__signed-by { margin: .8rem 1.1rem 1.1rem; font-size: .88rem; color: #1c6b3a; }
.doc__missing { margin: 0 1.1rem 1.1rem; font-size: .9rem; color: var(--ink-soft); }

.access__gate {
  margin: 1.2rem 0 0; padding: 16px 20px; border-radius: 12px;
  background: #fff6e8; border: 1px solid #f0d8b4; color: #8a5a12; font-size: .94rem;
}
/* Los errores de validacion, uno por linea dentro del aviso. */
.form__alert ul { margin: 6px 0 0; padding-left: 1.1rem; }
.form__alert li { margin: 2px 0; }

/* Acceso del club --------------------------------------------------------- */
.container--narrow { max-width: 30rem; }
.form--card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 26px 26px 22px;
}
.form--card .field { margin-bottom: 1rem; }
.form--card .choice__opt { margin: .2rem 0 1.2rem; }
.form__help { margin: .4rem 0 0; font-size: .88rem; color: var(--ink-soft); }
.club-bar {
  display: flex; align-items: center; justify-content: flex-end; gap: .7rem;
  margin-bottom: 1rem; font-size: .88rem; color: var(--ink-soft);
}
.club-bar form { margin: 0; }
.club-bar button {
  background: none; border: 0; padding: 0; font: inherit;
  color: var(--brand-ink); cursor: pointer; text-decoration: underline;
}

/* =====================================================================
   Inscribe a tu equipo (formulario al estilo MIC)
   ===================================================================== */
.regform__box { border: 1px solid var(--line); border-radius: 12px; padding: 18px 18px 6px; margin: 0 0 18px; display: grid; gap: 16px; min-width: 0; }
.regform__box > legend { font-weight: 600; color: var(--heading); padding: 0 6px; font-size: 1.02rem; text-transform: uppercase; letter-spacing: .02em; }
.regform__label { font-weight: 500; color: var(--heading); margin: 0; }
.regform__hint { color: var(--muted); font-size: .92rem; margin: 0; }
.regcats[hidden], .regcat__teams[hidden] { display: none; }
.regcats__cols { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 12px; }
.regcats__head { background: var(--surface); color: var(--muted); font-size: .95rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 10px 12px; border-radius: 6px; margin: 0 0 6px; }
.regcat { padding: 8px 4px; border-bottom: 1px solid var(--line); }
.regcat:last-child { border-bottom: 0; }
.regcat__check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: .95rem; line-height: 1.35; }
.regcat__check input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: #3f9b4a; }
.regcat__check small { color: var(--muted); }
.regcat.is-on .regcat__check { font-weight: 600; color: var(--heading); }
.regcat__teams { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px 30px; font-size: .92rem; color: var(--muted); }
.regcat__teams input { width: 64px; text-align: center; padding: 6px; border: 1px solid var(--ink-3); border-radius: 6px; background: var(--paper); color: var(--heading); }
.regform__box .choice { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* =====================================================================
   Intranet del club: menu lateral desplegable + secciones
   ===================================================================== */
.pagehero--intra .pagehero__inner { padding-block: 8px; }
.section--intra { padding-top: 28px; }
.intra { display: grid; gap: 24px; }
@media (min-width: 900px) { .intra { grid-template-columns: 270px minmax(0, 1fr); align-items: start; } }
.intra__nav { border: 1px solid var(--line); border-radius: 14px; background: var(--paper); overflow: hidden; }
@media (min-width: 900px) { .intra__nav { position: sticky; top: 90px; } }
.intra__club { display: flex; gap: 12px; align-items: center; padding: 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.intra__club strong { display: block; color: var(--heading); line-height: 1.2; }
.intra__club small { color: var(--muted); font-size: .8rem; }
.intra__logo { width: 44px; height: 44px; border-radius: 10px; object-fit: contain; background: #fff; flex: none; border: 1px solid var(--line); }
.intra__logo--empty { display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--brand-btn); border: 0; }
.intra__logo--big { width: 96px; height: 96px; font-size: 2rem; }
.intra__group { border-bottom: 1px solid var(--line); }
.intra__group > summary { cursor: pointer; list-style: none; padding: 13px 16px; font-weight: 600; color: var(--heading); display: flex; justify-content: space-between; align-items: center; font-size: .92rem; text-transform: uppercase; letter-spacing: .03em; }
.intra__group > summary::-webkit-details-marker { display: none; }
.intra__group > summary::after { content: "▾"; color: var(--muted); transition: transform .2s; }
.intra__group:not([open]) > summary::after { transform: rotate(-90deg); }
.intra__group ul { list-style: none; margin: 0; padding: 0 8px 10px; }
.intra__group a, .intra__send { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; color: var(--body, var(--heading)); font-size: .95rem; }
.intra__group a > span:first-child { flex: 1; }
.intra__group a:hover, .intra__send:hover { background: var(--surface); text-decoration: none; }
.intra__group a.is-on, .intra__send.is-on { background: var(--brand-soft); color: var(--brand-ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--brand); }
.intra__group a.is-locked { color: var(--muted); }
.intra__send { margin: 10px 8px; justify-content: center; background: var(--brand-btn); color: #fff; font-weight: 600; }
.intra__send:hover { background: var(--brand-btn-hover); color: #fff; }
.intra__count { font-size: .75rem; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; color: var(--muted); }
.intra__warn { font-size: .72rem; background: #fdecc8; color: #8a5300; border-radius: 999px; padding: 1px 7px; font-weight: 700; }
.intra__lock { font-size: .8rem; }
.intra__dot { width: 9px; height: 9px; border-radius: 50%; background: #e0a100; }
.intra__dot.is-ok { background: #2f9e63; }
.intra__main { min-width: 0; }
.intra__pane { border: 1px solid var(--line); border-radius: 14px; padding: 22px; background: var(--paper); margin-bottom: 20px; }
.intra.is-js .intra__pane { margin-bottom: 0; }
.intra__pane[hidden] { display: none; }
.intra__pane > h2 { margin-bottom: 6px; }
.intra__h3 { font-size: 1rem; margin: 0 0 4px; }
.intra__cats { margin: 6px 0 4px; }
.intra__modality { margin: 6px 0 0; }
.intra__logo-row { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; padding-bottom: 12px; }
.intra__upload { display: grid; gap: 10px; }
.intra__upload .field span { color: var(--muted); font-size: .88rem; }
.intra__locked { border: 1px solid #f0d58a; background: #fff8e6; color: #6b4a00; border-radius: 10px; padding: 14px 16px; }
.intra__locked p { margin: 6px 0 0; }
html[data-theme="dark"] .intra__locked { background: #2a2210; border-color: #5a4710; color: #f3d98a; }
html[data-theme="dark"] .intra__warn { background: #4a3608; color: #ffd47a; }

/* Jugadores con su enlace de familia */
.squadadd--inline { margin: 0 0 20px; }
.players__progress { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: .9rem; margin: 0 0 12px; }
.players__bar { flex: 0 0 160px; height: 8px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.players__bar span { display: block; height: 100%; background: #2f9e63; }
.players { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.players__cat { background: var(--surface); padding: 8px 14px; font-weight: 700; color: var(--heading); font-size: .85rem; letter-spacing: .03em; }
.players__cat small { color: var(--muted); font-weight: 400; }
.player { border-top: 1px solid var(--line); }
.player > details > summary { list-style: none; cursor: pointer; }
.player > details > summary::-webkit-details-marker { display: none; }
.player__row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.player__row:hover { background: var(--surface); }
.player__name { flex: 1; font-weight: 500; color: var(--heading); }
.player__more { color: var(--muted); transition: transform .2s; }
.player details[open] .player__more { transform: rotate(180deg); }
.badge-ok, .badge-wait { font-size: .78rem; border-radius: 999px; padding: 3px 10px; font-weight: 600; white-space: nowrap; }
.badge-ok { background: #e3f5ea; color: #1f7a4a; }
.badge-wait { background: #fdf1d8; color: #8a5300; }
html[data-theme="dark"] .badge-ok { background: #123524; color: #7fe0a8; }
html[data-theme="dark"] .badge-wait { background: #3a2a08; color: #ffd47a; }
.player__body { padding: 4px 14px 16px; display: grid; gap: 14px; }
.player__link label { font-size: .85rem; color: var(--muted); display: block; margin-bottom: 6px; }
.player__linkrow, .player__mail { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.player__linkrow input { flex: 1 1 260px; min-width: 0; font-size: .85rem; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--heading); }
.player__mail { margin-top: 8px; }
.player__mail input { flex: 1 1 220px; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--heading); }
.btn--wa { border-color: #25d366; color: #128c4a; }
.btn--wa:hover { background: #25d366; border-color: #25d366; color: #fff; }
.player__data { display: grid; gap: 10px 18px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 0; }
.player__data dt { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.player__data dd { margin: 2px 0 0; color: var(--heading); font-size: .93rem; word-break: break-word; }
.player__sigs { display: flex; gap: 14px; flex-wrap: wrap; }
.player__sigs figure { margin: 0; border: 1px solid var(--line); border-radius: 8px; padding: 6px; background: #fff; }
.player__sigs img { display: block; width: 220px; max-width: 100%; height: auto; }
.player__sigs figcaption { font-size: .75rem; color: #5d6877; text-align: center; }
.player__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.family-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.family-list li { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; }

/* =====================================================================
   Pagina de la familia: datos y firma con el dedo
   ===================================================================== */
.family { max-width: 820px; }
.family__langs { display: flex; gap: 10px; margin-top: 10px; }
.family__langs a { font-size: .85rem; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line); }
.family__langs a[aria-current="true"] { background: var(--brand-soft); font-weight: 600; }
.family__single { display: flex; gap: 10px; align-items: center; margin: -6px 0 18px; font-size: .95rem; cursor: pointer; }
.family__single input { width: 18px; height: 18px; }
.family__text { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; background: var(--surface); font-size: .9rem; }
.family__error { color: #cf3b2f; font-weight: 600; }
[data-second-guardian][hidden] { display: none; }
.sigs { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.sig { display: grid; gap: 8px; justify-items: start; }
.sig__label { margin: 0; font-weight: 500; color: var(--heading); }
.sig__pad { position: relative; width: 100%; height: 170px; border: 2px dashed var(--line); border-radius: 10px; background: #fff; touch-action: none; }
.sig.is-missing .sig__pad { border-color: #cf3b2f; }
.sig__pad canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.sig__hint { position: absolute; inset: 0; display: grid; place-items: center; color: #9aa4b1; pointer-events: none; font-size: .9rem; text-align: center; padding: 10px; }
.family__done { border-left: 4px solid #2f9e63; }

/* =====================================================================
   Inscribe a tu equipo: misma estructura que el formulario de MIC
   ===================================================================== */
.micf { padding-top: 48px; }
.micf__title { text-align: center; font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 28px; color: var(--heading); }
.micf__form { max-width: 1100px; margin: 0 auto; display: block; }
.micf__block { margin: 0 0 44px; }
.micf__band { background: var(--ink); color: #fff; font-size: 1.15rem; letter-spacing: .02em; text-transform: uppercase; padding: 12px 16px; margin: 0 0 20px; border-radius: 2px; }
.micf__grid { display: grid; gap: 18px 40px; padding: 0 12px; }
@media (min-width: 700px) { .micf__grid { grid-template-columns: 1fr 1fr; } }
.micf .field label, .micf__label, .micf__radios legend { font-size: .82rem; font-weight: 700; color: var(--heading); }
.micf .field input, .micf .field select, .micf .field textarea { border-radius: 2px; border: 1px solid var(--ink-3); padding: 8px 10px; min-height: 38px; }
.micf__label { padding: 0 12px; margin: 22px 0 10px; }
.micf__radios { border: 0; margin: 20px 0 6px; padding: 0 12px; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.micf__radios legend { margin-bottom: 10px; width: 100%; }
.micf__radios label { display: inline-flex; gap: 8px; align-items: center; font-size: .92rem; cursor: pointer; }
.micf__radios input { width: 18px; height: 18px; }
.micf__block > .field__help, .micf__block > .regform__hint, .micf .regcats { padding: 0 12px; }
.micf__info { background: #e8f8fc; color: #2b5d6b; font-size: .88rem; padding: 12px 14px; margin: 0 12px 20px; border-radius: 2px; }
.micf__info.has-teams { background: #e3f5ea; color: #1f7a4a; font-weight: 600; }
.micf .regcats__cols { gap: 18px 40px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.micf .regcats__head { background: #eeeeee; color: #9a9a9a; font-size: 1rem; border-radius: 0; padding: 8px 10px; }
.micf .regcat { border-bottom: 0; padding: 7px 4px; }
.micf .regcat__check { font-size: .92rem; }
.micf__notes { padding: 0 12px; margin-top: 16px; }
.micf__checks { display: grid; gap: 14px; padding: 0 12px; }
.micf__checks label { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--muted); cursor: pointer; }
.micf__checks input { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.micf__checks a { color: var(--heading); text-decoration: underline; }
.micf__submit { display: grid; justify-items: center; gap: 14px; margin-top: 10px; }
.micf__submit .btn { min-width: 300px; justify-content: center; border-radius: 2px; text-transform: uppercase; letter-spacing: .04em; }
.micf__submit a { font-size: .9rem; }
html[data-theme="dark"] .micf__band { background: var(--ink-3); }
html[data-theme="dark"] .micf .regcats__head { background: var(--surface); }
html[data-theme="dark"] .micf__info { background: #10303a; color: #9fd8e6; }