/* ============================================================
   Vestuario · landing v4 (solo modo oscuro, el de la marca)
   Identidad V1 "Voltaje" (negro + verde flúor): docs/identidad/v1/paleta.md
   TODO el color de la página está en los tokens de :root.
   ============================================================ */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fuentes/Inter-latin.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fuentes/Montserrat-600-latin.woff2") format("woff2"); }

:root {
  /* ====== IDENTIDAD: V1 "Voltaje" (activa, elegida por el CEO el 20/10/2026) ======
     Paleta exacta de docs/identidad/v1/paleta.md. Para pasar a otra identidad se copian de su paleta.md
     (docs/identidad/v2/ o v3/) el acento, el hover, fondo, superficies, borde, textos y estados.
     Hover, fondos suaves, bordes con tinte, brillos y el color del símbolo salen solos de --acento.
     Lo que NO cambia con estos tokens (son archivos): el dibujo del símbolo y la palabra
     (<symbol id="v-sim"> y <symbol id="v-pal"> en cada página), img/icono*.svg/png, img/logo.svg,
     favicon.ico, img/og.png y las capturas; se regeneran con los scripts que explica el README.
     Contraste: el verde #00FF85 sobre #0A0A0A da 14.7:1, así que sirve también para texto chico. */
  --acento: #00FF85;
  --acento-hover: #5CFFAE;

  /* base exacta de la V1 */
  --fondo: #0A0A0A;
  --superficie: #141414;
  --superficie-2: #1D1D1D;
  --borde: #2A2A2A;
  --texto: #F5F7F5;
  --texto-2: #A1A7A3;
  --sobre-acento: #0A0A0A;
  /* estados (semáforo) de la V1: el verde de "entrena" es el mismo de la marca, a propósito */
  --ok: #00FF85;
  --atencion: #FFC53D;
  --riesgo: #FF4D4F;

  /* derivados (no tocar: salen de los de arriba) */
  --acento-suave: color-mix(in srgb, var(--acento) 12%, transparent);
  --acento-borde: color-mix(in srgb, var(--acento) 42%, transparent);
  --acento-brillo: color-mix(in srgb, var(--acento) 22%, transparent);
  --acento-brillo-2: color-mix(in srgb, var(--acento) 8%, transparent);
  --fondo-2: color-mix(in srgb, var(--superficie) 40%, var(--fondo));
  --borde-2: color-mix(in srgb, var(--borde) 80%, var(--texto));
  --texto-3: color-mix(in srgb, var(--texto-2) 82%, var(--fondo));
  --velo: color-mix(in srgb, var(--fondo) 80%, transparent);
  --velo-fuerte: color-mix(in srgb, var(--fondo) 94%, transparent);
  --linea: color-mix(in srgb, var(--texto) 9%, transparent);
  --linea-2: color-mix(in srgb, var(--texto) 15%, transparent);
  --grilla: color-mix(in srgb, var(--texto) 4%, transparent);
  --marco: color-mix(in srgb, var(--fondo) 45%, #000);
  --isla: #000;
  --mascara: #000; /* solo para máscaras de transparencia, no se ve */
  --sombra-color: rgb(0 0 0 / .85);
  --sombra: 0 50px 100px -40px var(--sombra-color), 0 0 0 1px var(--linea);
  --brillo-boton: color-mix(in srgb, var(--acento) 45%, transparent);

  --f-titulo: "Montserrat", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --radio: 16px;
  --suave: cubic-bezier(.2, .7, .2, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; background: var(--fondo); }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 400 17px/1.6 var(--f-texto); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--acento); text-underline-offset: 3px; }
a:hover { color: var(--acento-hover); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 6px; }
.oculto { position: absolute; width: 0; height: 0; overflow: hidden; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--superficie-2); color: var(--texto); padding: 12px 16px; border-radius: 10px; z-index: 99; }
.saltar:focus { left: 8px; }
.cont { width: min(1200px, 100% - 32px); margin: 0 auto; }
.angosto { max-width: 820px; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.s-a { fill: var(--acento); }
.s-b { fill: var(--texto); }

/* ---------- barra ---------- */
.barra { position: sticky; top: 0; z-index: 40; background: var(--velo); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid var(--linea); }
.barra-i { display: flex; align-items: center; gap: 12px; min-height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texto); margin-right: auto; min-height: 44px; }
.logo-s { width: 26px; height: 26px; display: block; flex: none; }
.logo-p { width: 104px; height: 12px; display: block; fill: var(--texto); }
.barra-l { display: none; gap: 2px; }
/* "Entrar" (link a la app de Vestuario) usa el mismo estilo que los links de la barra: discreto, para que el botón principal siga siendo la demo */
.barra-l a, .barra-entrar { text-decoration: none; color: var(--texto-2); font-weight: 500; font-size: 15px; padding: 10px 14px; border-radius: 10px; min-height: 44px; display: inline-flex; align-items: center; transition: color .15s, background .15s; }
.barra-l a:hover, .barra-entrar:hover { color: var(--texto); background: var(--superficie); }
.barra-entrar, .barra .btn { flex: none; white-space: nowrap; }
/* Selector de idioma ES | EN (landing en castellano y en/, la versión en inglés): discreto, al lado de "Entrar" o de la demo.
   El idioma actual va en blanco y el otro es el link. En celulares angostos queda solo el link al otro idioma (ver abajo, 439 px). */
.idioma { display: flex; align-items: center; flex: none; font: 600 13px/1 var(--f-texto); letter-spacing: .06em; }
.idioma a, .idioma-act { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 30px; padding: 0 5px; border-radius: 8px; }
.idioma a { color: var(--texto-2); text-decoration: none; transition: color .15s, background .15s; }
.idioma a:hover { color: var(--texto); background: var(--superficie); }
.idioma-act { color: var(--texto); }
.idioma-sep { color: var(--borde-2); }
/* Si la barra no alcanza, se achica la palabra del logo en vez de aparecer scroll de costado */
.logo, .logo-p { min-width: 0; }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 12px; font: 600 16px/1.2 var(--f-texto); letter-spacing: -.005em; text-decoration: none; text-align: center; border: 1px solid transparent; cursor: pointer; transition: transform .15s var(--suave), background .15s, border-color .15s, box-shadow .2s; }
.btn:active { transform: scale(.98); }
.btn .i { width: 18px; height: 18px; transition: transform .2s var(--suave); }
.btn:hover .i { transform: translateX(3px); }
.btn-p { background: var(--acento); color: var(--sobre-acento); box-shadow: 0 10px 30px -12px var(--brillo-boton); }
.btn-p:hover { background: var(--acento-hover); color: var(--sobre-acento); }
.btn-s { background: transparent; color: var(--texto); border-color: var(--linea-2); }
.btn-s:hover { background: var(--superficie); border-color: var(--borde-2); color: var(--texto); }
.btn-g { min-height: 54px; padding: 0 24px; font-size: 16.5px; }
.btn-chico { min-height: 44px; padding: 0 14px; font-size: 14.5px; border-radius: 10px; }
.botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.nota { margin-top: 16px; font-size: 14.5px; color: var(--texto-2); }
.nota-dir { margin-top: 2px; font-size: 14.5px; }
.nota-dir a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; text-decoration: none; }
.nota-dir a:hover { text-decoration: underline; }
.nota-dir .i { width: 16px; height: 16px; transition: transform .2s var(--suave); }
.nota-dir a:hover .i { transform: translateX(3px); }

/* ---------- textos ---------- */
.kick { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--acento); margin-bottom: 18px; }
.punto { display: inline-block; vertical-align: 2px; margin-right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); }
h1 { font: 600 clamp(38px, 6.2vw, 76px)/1.02 var(--f-titulo); letter-spacing: -.04em; text-wrap: balance; }
h1 em { font-style: normal; color: var(--acento); }
h2 { font: 600 clamp(30px, 4.6vw, 54px)/1.06 var(--f-titulo); letter-spacing: -.035em; text-wrap: balance; max-width: 20ch; }
h3 { font: 600 20px/1.25 var(--f-titulo); letter-spacing: -.02em; }
.lead { font-size: 18px; line-height: 1.55; color: var(--texto-2); max-width: 34em; margin-top: 22px; text-wrap: pretty; }
.sub { font-size: 17.5px; line-height: 1.6; color: var(--texto-2); max-width: 40em; margin-top: 18px; text-wrap: pretty; }
.kick .etiq { margin-left: 10px; }
.etiq { display: inline-flex; align-items: center; font: 600 11.5px/1 var(--f-texto); letter-spacing: .04em; text-transform: none; color: var(--texto-2); border: 1px solid var(--borde-2); background: var(--superficie); padding: 5px 9px; border-radius: 99px; white-space: nowrap; vertical-align: 3px; }
.origen { display: inline-flex; align-items: center; font: 600 10.5px/1 var(--f-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--texto); border: 1px solid var(--borde-2); padding: 4px 8px; border-radius: 99px; margin-right: 8px; vertical-align: 1px; white-space: nowrap; }
.tildes { display: grid; gap: 10px; margin-top: 20px; }
.tildes li { position: relative; padding-left: 28px; font-size: 16px; color: var(--texto); }
.tildes li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 11px; height: 6px; border-left: 2px solid var(--acento); border-bottom: 2px solid var(--acento); transform: rotate(-45deg); }

/* ---------- héroe ---------- */
.heroe { position: relative; padding: 48px 0 72px; }
.heroe-fondo { position: absolute; inset: 0 0 auto; height: 980px; pointer-events: none; overflow: hidden; }
.heroe-fondo::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--grilla) 1px, transparent 1px), linear-gradient(90deg, var(--grilla) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, var(--mascara), transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, var(--mascara), transparent 75%); }
.heroe-fondo::after { content: ""; position: absolute; left: 50%; top: 380px; width: 1100px; height: 620px; transform: translateX(-50%); background: radial-gradient(closest-side, var(--acento-brillo), transparent); filter: blur(10px); opacity: .7; }
.heroe-grilla { position: relative; display: grid; gap: 40px; }
.heroe-txt .botones { margin-top: 32px; }

/* selector de deporte */
.deporte { align-self: end; background: color-mix(in srgb, var(--superficie) 88%, transparent); border: 1px solid var(--borde); border-radius: 20px; padding: 20px; box-shadow: var(--sombra); backdrop-filter: blur(6px); }
.selector legend { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); margin-bottom: 12px; padding: 0; }
.selector-op { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.selector-op label { position: relative; display: block; cursor: pointer; }
.selector-op input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.selector-op span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 8px; border: 1px solid var(--borde); border-radius: 11px; font-weight: 600; font-size: 15px; color: var(--texto-2); transition: color .15s, background .15s, border-color .15s; }
.selector-op label:hover span { color: var(--texto); border-color: var(--borde-2); }
.selector-op input:checked + span { color: var(--texto); background: var(--acento-suave); border-color: var(--acento-borde); }
.selector-op input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
.ganchos { margin-top: 6px; }
.gancho { display: none; animation: aparecer .45s var(--suave) both; }
.deporte:has(input[value="rugby"]:checked) .gancho[data-d="rugby"],
.deporte:has(input[value="hockey"]:checked) .gancho[data-d="hockey"],
.deporte:has(input[value="futbol"]:checked) .gancho[data-d="futbol"],
.deporte:has(input[value="basquet"]:checked) .gancho[data-d="basquet"],
.deporte:has(input[value="voley"]:checked) .gancho[data-d="voley"],
.deporte:has(input[value="handball"]:checked) .gancho[data-d="handball"] { display: block; }
.g-num { font: 600 clamp(52px, 8vw, 76px)/1 var(--f-titulo); letter-spacing: -.045em; color: var(--acento); margin-top: 20px; }
.g-txt { font: 600 19px/1.38 var(--f-texto); letter-spacing: -.01em; margin-top: 12px; text-wrap: pretty; }
.g-fte { font-size: 13.5px; line-height: 1.55; color: var(--texto-2); margin-top: 12px; }
.g-fte a { white-space: nowrap; }
.g-voc { font-size: 13.5px; line-height: 1.5; color: var(--texto-2); margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borde); }
.g-voc b { color: var(--texto); font-weight: 600; }

/* vitrina: capturas con marco de dispositivo */
.vitrina { position: relative; margin: 56px 0 0; padding-bottom: 28px; }
.marco-pc { border-radius: 14px; overflow: hidden; background: var(--superficie); border: 1px solid var(--linea-2); box-shadow: var(--sombra); }
.marco-barra { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: var(--superficie-2); border-bottom: 1px solid var(--borde); font-size: 12px; color: var(--texto-2); white-space: nowrap; overflow: hidden; }
.marco-barra i { width: 9px; height: 9px; border-radius: 50%; background: var(--borde-2); flex: none; opacity: .7; }
.marco-barra span { margin: 0 auto; padding-right: 33px; overflow: hidden; text-overflow: ellipsis; }
.marco-barra b { font-weight: 500; color: var(--texto); }
.v-d { display: none; }
.heroe:has(input[value="rugby"]:checked) .v-d[data-d="rugby"],
.heroe:has(input[value="hockey"]:checked) .v-d[data-d="hockey"],
.heroe:has(input[value="futbol"]:checked) .v-d[data-d="futbol"],
.heroe:has(input[value="basquet"]:checked) .v-d[data-d="basquet"],
.heroe:has(input[value="voley"]:checked) .v-d[data-d="voley"],
.heroe:has(input[value="handball"]:checked) .v-d[data-d="handball"] { display: inline; }
/* en hockey: texto con jugadoras y captura del centro de comando de hockey femenino (sin :has queda la de siempre) */
.v-h { display: none; }
.heroe:has(input[value="hockey"]:checked) .v-h { display: inline; }
.heroe:has(input[value="hockey"]:checked) a.v-h { display: block; }
.heroe:has(input[value="hockey"]:checked) .v-nh { display: none; }
html:not(.js) .vitrina a.v-h { display: none !important; }
html:not(.js) .vitrina a.v-nh { display: block !important; }
.marco-pc img { width: 100%; }
/* capturas que se abren completas al tocarlas */
.ampliar { position: relative; display: block; cursor: zoom-in; }
.ampliar::after { content: "Ampliar"; position: absolute; right: 10px; bottom: 10px; font: 600 12px/1 var(--f-texto); color: var(--texto); background: var(--velo-fuerte); border: 1px solid var(--borde-2); padding: 6px 10px; border-radius: 99px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.ampliar:hover::after, .ampliar:focus-visible::after { opacity: 1; }
@media (hover: none) { .ampliar::after { opacity: .92; } }
.vitrina .ampliar::after { right: auto; left: 10px; }
/* plataforma: qué está hoy y qué llega con el piloto */
.estado { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 22px; }
.estado span { font-size: 14px; line-height: 1.4; color: var(--texto-2); border: 1px solid var(--borde); background: var(--superficie); border-radius: 12px; padding: 8px 12px; }
.estado b { color: var(--texto); font-weight: 600; }
.estado span:first-child b { color: var(--acento); }
.marco-cel { background: var(--marco); border: 1px solid var(--linea-2); border-radius: 40px; padding: 7px; box-shadow: 0 40px 70px -25px var(--sombra-color), 0 0 0 5px var(--velo); }
.cel-isla { height: 26px; display: grid; place-items: center; background: var(--fondo); border-radius: 33px 33px 0 0; }
.cel-isla i { display: block; width: 32%; height: 15px; border-radius: 10px; background: var(--isla); }
.marco-cel img { width: 100%; border-radius: 0 0 33px 33px; }
.vitrina .marco-cel { position: absolute; right: 0; bottom: 0; width: 31%; border-radius: 26px; padding: 4px; }
.vitrina .cel-isla { height: 14px; border-radius: 22px 22px 0 0; }
.vitrina .cel-isla i { height: 8px; }
.vitrina .marco-cel img { border-radius: 0 0 22px 22px; }
.vitrina .marco-pc { width: 92%; }
.vitrina figcaption { margin-top: 18px; font-size: 13px; color: var(--texto-3); max-width: 60%; }

/* ---------- secciones ---------- */
.sec { padding: 88px 0; position: relative; }
.sec-alt { background: var(--fondo-2); border-block: 1px solid var(--linea); }
.cabeza { margin-bottom: 40px; }

/* ---------- plataforma: pestañas de módulos ---------- */
.tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 20px; padding: 2px 16px 6px; scroll-padding-inline: 16px; -webkit-mask-image: linear-gradient(90deg, transparent, var(--mascara) 16px, var(--mascara) calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, transparent, var(--mascara) 16px, var(--mascara) calc(100% - 40px), transparent); }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border: 1px solid var(--borde); border-radius: 12px; background: transparent; color: var(--texto-2); font: 600 14.5px/1.25 var(--f-texto); text-align: left; cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.tabs button:hover { color: var(--texto); border-color: var(--borde-2); }
.tabs button[aria-selected="true"] { color: var(--texto); background: var(--superficie-2); border-color: var(--acento-borde); }
.tabs button[aria-selected="true"] .i { color: var(--acento); }
html:not(.js) .tabs { display: none; }
.paneles { position: relative; }
.panel { display: grid; gap: 28px; background: linear-gradient(180deg, var(--superficie), color-mix(in srgb, var(--superficie) 60%, var(--fondo))); border: 1px solid var(--borde); border-radius: 22px; padding: 24px 20px; overflow: hidden; }
html:not(.js) .panel + .panel { margin-top: 16px; }
.js .panel:not(.activo) { display: none; }
.js .panel.activo { animation: aparecer .45s var(--suave) both; }
.panel h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; font-size: 24px; }
.panel h3 .i { width: 26px; height: 26px; color: var(--acento); }
.panel-txt p { color: var(--texto-2); margin-top: 14px; font-size: 16.5px; }
.panel-img { min-width: 0; }
.panel-img.es-cel { display: flex; justify-content: center; }
.panel-img.es-cel .marco-cel { width: min(270px, 78%); }
.dato-chico { margin-top: 22px !important; padding: 14px 16px; border-left: 2px solid var(--atencion); background: var(--superficie-2); border-radius: 0 12px 12px 0; font-size: 14.5px !important; line-height: 1.5; color: var(--texto) !important; }
.dato-chico span { display: block; margin-top: 6px; color: var(--texto-2); font-size: 13px; }
.esquema { counter-reset: e; display: grid; gap: 0; max-width: 420px; margin: 0 auto; }
.esquema li { counter-increment: e; position: relative; padding: 0 0 26px 56px; }
.esquema li::before { content: counter(e); position: absolute; left: 0; top: -2px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 600 15px/1 var(--f-titulo); color: var(--acento); border: 1px solid var(--acento-borde); background: var(--acento-suave); }
.esquema li::after { content: ""; position: absolute; left: 19px; top: 40px; bottom: 2px; width: 1px; background: linear-gradient(var(--acento-borde), var(--borde)); }
.esquema li:last-child { padding-bottom: 0; }
.esquema li:last-child::after { display: none; }
.esquema b { display: block; font: 600 17px/1.3 var(--f-titulo); }
.esquema span { display: block; color: var(--texto-2); font-size: 14.5px; margin-top: 3px; }
.esquema-avisos { gap: 10px; }
.esquema-avisos li { padding: 14px 16px 14px 48px; border: 1px solid var(--borde); border-radius: 14px; background: var(--fondo); }
.esquema-avisos li::before { content: ""; left: 18px; top: 21px; width: 10px; height: 10px; border: 0; background: var(--acento); box-shadow: 0 0 0 4px var(--acento-suave); }
.esquema-avisos li::after { display: none; }
.esquema-avisos li:last-child { padding-bottom: 14px; }

/* ---------- cómo funciona ---------- */
.pasos { display: grid; gap: 56px; counter-reset: p; }
.paso-img { display: flex; justify-content: center; margin-bottom: 26px; -webkit-mask-image: linear-gradient(var(--mascara) 72%, transparent); mask-image: linear-gradient(var(--mascara) 72%, transparent); }
.paso-img .marco-cel { width: min(260px, 74%); border-radius: 36px 36px 0 0; padding-bottom: 0; border-bottom: 0; }
.paso-img .marco-cel img { border-radius: 0; }
.paso-n { font: 600 14px/1 var(--f-titulo); color: var(--acento); letter-spacing: .08em; margin-bottom: 10px; }
.paso h3 { font-size: 22px; }
.paso p:last-child { color: var(--texto-2); margin-top: 10px; font-size: 16.5px; }

/* ---------- datos por deporte ---------- */
.deslizar { display: none; }
.datos { display: grid; gap: 14px; }
.dato { display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; padding: 24px 22px; }
.dato-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dato-cab b { font: 600 18px/1.2 var(--f-titulo); letter-spacing: -.015em; }
.dato-cab .origen { margin: 0; }
.dato-num { font: 600 54px/1 var(--f-titulo); letter-spacing: -.045em; color: var(--acento); margin-top: 22px; }
.dato-txt { font-weight: 600; font-size: 17.5px; line-height: 1.42; margin-top: 12px; letter-spacing: -.008em; text-wrap: pretty; }
.dato-fte { font-size: 13.5px; line-height: 1.55; color: var(--texto-2); margin-top: 12px; }
.dato-fte a, .dato-mas a { white-space: nowrap; }
.dato-mas { margin-top: 14px; font-size: 13.5px; color: var(--texto-2); }
.dato-mas summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; color: var(--texto); font-size: 14px; list-style: none; }
.dato-mas summary::-webkit-details-marker { display: none; }
.dato-mas summary::after { content: "+"; color: var(--acento); font: 600 18px/1 var(--f-titulo); }
.dato-mas[open] summary::after { content: "−"; }
.dato-mas p { margin-top: 8px; line-height: 1.5; }
.dato-mas p b { color: var(--texto); font-weight: 600; }
.dato-v { margin-top: auto; padding-top: 16px; font-size: 14.5px; line-height: 1.5; color: var(--texto); }
.dato-v::before { content: ""; display: block; height: 1px; background: var(--borde); margin: 4px 0 14px; }

/* ---------- datos y menores ---------- */
.ficha { display: grid; gap: 12px; }
.ficha li { background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.ficha b { font: 600 17px/1.3 var(--f-titulo); letter-spacing: -.01em; }
.ficha b::before { content: ""; display: block; width: 22px; height: 2px; background: var(--acento); margin-bottom: 14px; }
.ficha span { color: var(--texto-2); font-size: 15.5px; line-height: 1.55; }
.link-mas { margin-top: 24px; }
.link-mas a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; }
.link-mas a .i { width: 18px; height: 18px; transition: transform .2s var(--suave); }
.link-mas a:hover .i { transform: translateX(3px); }

/* ---------- uniones y federaciones ---------- */
.uniones { display: grid; gap: 44px; align-items: center; }
.uniones .botones { margin-top: 28px; }
.uniones-esq { position: relative; display: grid; justify-items: center; gap: 0; padding: 28px 20px; border: 1px solid var(--borde); border-radius: 22px; background: radial-gradient(80% 60% at 50% 100%, var(--acento-brillo-2), transparent), var(--superficie); }
.u-clubes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; max-width: 380px; }
.u-clubes span { display: grid; place-items: center; height: 44px; border: 1px solid var(--borde-2); border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--texto-2); background: var(--fondo); }
.u-flecha { width: 1px; height: 44px; background: linear-gradient(var(--borde-2), var(--acento)); position: relative; }
.u-flecha::after { content: ""; position: absolute; left: -4px; bottom: -1px; width: 9px; height: 9px; border-right: 1px solid var(--acento); border-bottom: 1px solid var(--acento); transform: rotate(45deg); }
.u-tablero { width: 100%; max-width: 380px; margin-top: 10px; border: 1px solid var(--acento-borde); border-radius: 16px; padding: 18px; background: var(--fondo); display: grid; gap: 10px; }
.u-tablero b { font: 600 15px/1.2 var(--f-titulo); margin-bottom: 4px; }
.u-tablero i { display: block; height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--acento) calc(var(--v) * 100%), var(--superficie-2) 0); }
.u-tablero small { color: var(--texto-2); font-size: 12.5px; margin-top: 4px; }

/* ---------- preguntas ---------- */
.faq-grilla .cabeza { margin-bottom: 32px; }
.faq { display: grid; gap: 10px; }
.faq details { background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; transition: border-color .2s; }
.faq details[open] { border-color: var(--borde-2); }
.faq summary { cursor: pointer; list-style: none; min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; font-weight: 600; font-size: 17px; border-radius: 14px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 600 24px/1 var(--f-titulo); color: var(--acento); flex: none; transition: transform .25s var(--suave); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 20px 20px; color: var(--texto-2); font-size: 16px; }
.faq details p a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* ---------- cierre ---------- */
.final { position: relative; padding: 104px 0; text-align: center; overflow: hidden; border-top: 1px solid var(--linea); }
.final::before { content: ""; position: absolute; left: 50%; bottom: -320px; width: 900px; height: 600px; transform: translateX(-50%); background: radial-gradient(closest-side, var(--acento-brillo), transparent); pointer-events: none; }
.final .cont { position: relative; margin-inline: auto; }
.final-s { width: 54px; height: 54px; display: block; margin: 0 auto 24px; filter: drop-shadow(0 10px 30px var(--acento-brillo)); }
.final h2, .final .sub { margin-inline: auto; }
.final .botones { justify-content: center; }
.final .nota { margin-top: 14px; }
.compartir { margin-top: 8px; font-size: 14.5px; }
.compartir a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* ---------- pie ---------- */
.pie { border-top: 1px solid var(--linea); padding: 48px 0 36px; color: var(--texto-2); font-size: 14.5px; }
.pie-i { display: grid; gap: 28px; }
.pie-marca p { margin-top: 8px; color: var(--texto); font-weight: 500; }
.pie-l { display: flex; flex-wrap: wrap; gap: 0 22px; }
.pie-l a { display: inline-flex; align-items: center; min-height: 44px; color: var(--texto-2); text-decoration: none; }
.pie-l a:hover { color: var(--texto); }
.pie-chico { font-size: 13px; color: var(--texto-3); display: grid; gap: 8px; max-width: 760px; }
.pie-chico a { color: var(--texto-2); }

/* ---------- barra fija del celular ---------- */
.fija { display: none; }

/* ---------- animaciones (sutiles, sin librerías) ---------- */
@keyframes aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes entrar { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.entra { animation: entrar .9s var(--suave) both; }
.e2 { animation-delay: .07s; } .e3 { animation-delay: .14s; } .e4 { animation-delay: .21s; } .e5 { animation-delay: .3s; }
.js .revelar { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--suave), transform .8s var(--suave); }
.js .revelar.visto { opacity: 1; transform: none; }
.js .pasos .revelar:nth-child(2), .js .datos .revelar:nth-child(3n+2) { transition-delay: .08s; }
.js .pasos .revelar:nth-child(3), .js .datos .revelar:nth-child(3n) { transition-delay: .16s; }

/* ---------- páginas simples (privacidad, datos, 404) ---------- */
.simple { padding: 56px 0 88px; }
.simple h1 { font-size: clamp(34px, 5.4vw, 56px); max-width: 18ch; }
.simple .lead { margin-top: 18px; }
.simple p { margin-top: 16px; color: var(--texto-2); }
.simple p b { color: var(--texto); }
.simple .kick { color: var(--acento); margin-top: 0; }
.simple p a { display: inline; padding: 12px 0; }
.simple .ficha { margin-top: 32px; }
.simple .chico { font-size: 14px; }
.simple .botones { margin-top: 36px; }

/* ---------- celular (hasta 767 px) ---------- */
@media (max-width: 767px) {
  body { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  body.sin-fija { padding-bottom: env(safe-area-inset-bottom); }
  .botones .btn-g { width: 100%; }
  .heroe { padding-top: 36px; }
  .sec { padding: 72px 0; }
  .final { padding: 80px 0; }
  .vitrina .marco-pc { width: 100%; }
  .vitrina .marco-cel { width: 30%; right: -2px; bottom: -6px; }
  .vitrina figcaption { max-width: 64%; }
  .deslizar { display: block; margin: -24px 0 14px; font-size: 14px; color: var(--texto-2); }
  .datos { grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -16px; padding: 2px 16px 8px; scroll-padding-inline: 16px; overscroll-behavior-x: contain; }
  .datos::-webkit-scrollbar { display: none; }
  .dato { scroll-snap-align: start; }
  .js .datos .revelar { opacity: 1; transform: none; }
  .ficha { gap: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; padding: 4px 20px; }
  .ficha li { background: none; border: 0; border-radius: 0; padding: 18px 0; }
  .ficha li + li { border-top: 1px solid var(--borde); }
  .ficha b::before { display: none; }
  .pasos { gap: 48px; }
  .paso-img .marco-cel { width: min(230px, 66%); }
  .fija { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--velo-fuerte); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--linea); transform: translateY(110%); visibility: hidden; transition: transform .25s var(--suave), visibility .25s; }
  .fija.ver { transform: none; visibility: visible; }
  .fija .btn-g { width: 100%; min-height: 52px; }
}
/* Barra angosta: logo, "Entrar" y el botón de la demo en un solo renglón (medido a 360, 375, 390 y 412 px) */
@media (max-width: 767px) {
  .barra-entrar { padding: 10px 8px; }
}
@media (max-width: 439px) {
  .barra-i { gap: 8px; }
  .logo { gap: 8px; }
  .logo-p { width: 86px; }
  .btn-chico { padding: 0 12px; }
}
@media (max-width: 379px) {
  .barra-i { gap: 6px; }
  .logo-s { width: 24px; height: 24px; }
  .logo-p { width: 78px; }
  .barra-entrar { padding: 10px 6px; font-size: 14px; }
  .btn-chico { padding: 0 10px; font-size: 13.5px; }
}
@media (max-width: 359px) {
  .logo-p { display: none; }
}
/* Con el selector de idioma: de 360 a 439 px se usan los tamaños compactos de 360 para que logo, idioma, "Entrar" y la demo
   entren en un renglón. Entre 360 y 379 px, si hace falta, la palabra del logo se achica un poco (regla .logo-p de arriba). */
@media (max-width: 439px) {
  .idioma-act, .idioma-sep { display: none; }
  .idioma a { min-width: 0; padding: 0 5px; font-size: 12.5px; }
  .barra-i:has(.idioma) { gap: 6px; }
  .barra-i:has(.idioma) .barra-entrar { padding: 10px 6px; font-size: 14px; }
  .barra-i:has(.idioma) .btn-chico { padding: 0 10px; font-size: 13.5px; }
}
@media (max-width: 379px) {
  .barra-i:has(.idioma) { gap: 5px; }
  .barra-i:has(.idioma) .logo { gap: 6px; }
  .barra-i:has(.idioma) .barra-entrar { padding: 10px 5px; }
  .idioma a { padding: 0 4px; }
}

/* ---------- tableta y compu ---------- */
@media (min-width: 768px) {
  .cont { width: min(1200px, 100% - 64px); }
  .heroe { padding: 72px 0 96px; }
  .deporte { padding: 26px; max-width: 620px; }
  .lead { font-size: 19.5px; }
  .sec { padding: 120px 0; }
  .cabeza { margin-bottom: 52px; }
  .tabs { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; margin: 0 0 20px; padding: 0; -webkit-mask-image: none; mask-image: none; }
  .tabs button { min-height: 56px; padding: 0 16px; }
  .panel { padding: 40px; gap: 40px; }
  .datos { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .ficha { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .pasos { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .paso-img .marco-cel { width: min(250px, 92%); }
  .pie-i { grid-template-columns: 1fr auto; align-items: start; }
  .pie-marca p { white-space: nowrap; }
  .pie-chico { grid-column: 1 / -1; }
  .vitrina { margin-top: 80px; }
  .vitrina .marco-pc { width: 88%; }
  .vitrina .marco-cel { width: 22%; right: 0; bottom: -10px; border-radius: 40px; padding: 7px; }
  .vitrina .cel-isla { height: 26px; border-radius: 33px 33px 0 0; }
  .vitrina .cel-isla i { height: 15px; }
  .vitrina .marco-cel img { border-radius: 0 0 33px 33px; }
}
@media (min-width: 1100px) {
  .barra-l { display: flex; }
  .barra-i { min-height: 72px; }
  .logo { margin-right: 28px; }
  .barra-l { margin-right: auto; }
  .heroe-grilla { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 72px; align-items: end; }
  .deporte { max-width: none; }
  .panel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; padding: 48px; gap: 56px; }
  .datos { grid-template-columns: repeat(3, 1fr); }
  .ficha { grid-template-columns: repeat(3, 1fr); }
  .uniones { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; }
  .vitrina figcaption { max-width: 70%; }
  .faq-grilla { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; align-items: start; }
  .faq-grilla .cabeza { position: sticky; top: 112px; margin-bottom: 0; }
}
/* De 1100 a 1279 px, con el selector de idioma, los links de la barra se juntan un poco para que entre todo en un renglón */
@media (min-width: 1100px) and (max-width: 1279px) {
  .barra-i:has(.idioma) .barra-l a { padding-inline: 9px; }
}

/* ---------- versión en inglés (en/) ---------- */
/* textos que viven en el CSS, y nombres de deporte más largos (Field hockey, Basketball) en el selector de 3 columnas */
:lang(en) .ampliar::after { content: "Enlarge"; }
:lang(en) .selector-op span { font-size: 14px; line-height: 1.2; text-align: center; }
/* video de demo: hueco 16:9 con "Demo video coming soon" hasta que llegue el video (ver el comentario en en/index.html) */
.video { max-width: 960px; }
.video-hueco { aspect-ratio: 16 / 9; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 16px; text-align: center; background: radial-gradient(55% 65% at 50% 50%, var(--acento-brillo-2), transparent), var(--fondo); }
.video-play { display: block; width: 64px; height: 64px; padding: 20px 18px 20px 22px; border-radius: 50%; border: 1px solid var(--acento-borde); background: var(--acento-suave); fill: var(--acento); }
.video-hueco p { font: 600 17px/1.3 var(--f-titulo); color: var(--texto); }
.video-hueco small { display: block; margin-top: 6px; font: 400 14px/1.45 var(--f-texto); color: var(--texto-2); }
.video + .botones { margin-top: 28px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .revelar { opacity: 1; transform: none; }
}
/* Inglés en celulares muy chicos (hasta 359 px): los textos de los botones son más largos y no tienen que ensanchar el héroe. */
@media (max-width: 359px) {
  :lang(en) .heroe-txt, :lang(en) .heroe-txt > *, :lang(en) .deporte { min-width: 0; max-width: 100%; }
  :lang(en) .btn-g { padding: 0 14px; font-size: 15px; }
  :lang(en) .selector-op span { font-size: 13px; }
}