/* Landing de Uruz. Hierro y oro: el grafito de las pesas, el dorado de la runa y, apenas,
   el rojo de los discos. Títulos en Big Shoulders (condensada, como los números de los discos),
   texto en Archivo. La foto de portada es oscura en los dos temas. */

:root, :root[data-tema="claro"] {
  color-scheme: light;
  --fondo: #eef0f2; --superficie: #ffffff; --texto: #1b1c1f; --tenue: #575b62; --linea: #d5d8dd;
  --oro: #a65e14; --oro-vivo: #c97f24; --rojo: #b42318;
  --telefono: #1b1c1f;
}
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo: #1b1c1f; --superficie: #25272b; --texto: #ecedef; --tenue: #a4a7ad; --linea: #36393e;
  --oro: #e8a23e; --oro-vivo: #fcd371; --rojo: #e0483a;
  --telefono: #0d0e10;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font-family: 'Archivo', system-ui, sans-serif; font-size: 1.0625rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: 'Big Shoulders Display', 'Archivo', sans-serif; font-weight: 800; line-height: 0.95; margin: 0; }
h2 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
h3 { font-size: 1.6rem; font-weight: 700; line-height: 1.05; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--oro-vivo); outline-offset: 3px; border-radius: 4px; }

.saltar { position: absolute; left: -9999px; top: 8px; background: var(--superficie); padding: 8px 12px; z-index: 10; }
.saltar:focus { left: 8px; }

/* Botones: rectos y pesados, como una barra; no píldoras. */
.boton {
  display: inline-block; padding: 14px 24px; background: #e8a23e; color: #1b1c1f;
  font-weight: 600; text-decoration: none; border-radius: 3px; border: 2px solid #e8a23e;
  transition: background 0.15s, border-color 0.15s;
}
.boton:hover { background: #fcd371; border-color: #fcd371; }
.boton-fantasma { background: transparent; color: #ecedef; border-color: #ecedef80; }
.boton-fantasma:hover { background: #ecedef14; border-color: #ecedef; }
.boton-chico { padding: 9px 16px; font-size: 0.95rem; }

/* ── Portada ─────────────────────────────────────────────────────────────── */
.portada { position: relative; min-height: min(100svh, 920px); color: #ecedef; display: flex; flex-direction: column; isolation: isolate; }
/* La foto va al fondo entera (no solo la <img>): si no, tapa la barra y los botones y se come los clicks. */
.portada-foto { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.portada-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 18% center; }
/* Oscurece de izquierda a derecha: el texto sobre el piso negro, las mancuernas a la vista. */
.portada::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, #141518f2 0%, #141518d9 34%, #14151880 58%, #14151800 82%),
              linear-gradient(0deg, #141518cc 0%, #14151800 30%);
}
.barra { display: flex; align-items: center; justify-content: space-between; padding: 24px clamp(20px, 5vw, 64px); }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 1.7rem; letter-spacing: 0.02em; }
.portada-texto { margin: auto 0; padding: 40px clamp(20px, 5vw, 64px) 72px; max-width: min(50vw, 760px); }
.portada h1 { font-size: clamp(3.2rem, 6vw, 6.2rem); letter-spacing: -0.005em; text-wrap: balance; }
.bajada { margin-top: 24px; font-size: clamp(1.1rem, 1.6vw, 1.3rem); max-width: 36em; color: #d7d9dd; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.aclaracion { margin-top: 16px; font-size: 0.95rem; color: #a4a7ad; }

/* ── Secciones ───────────────────────────────────────────────────────────── */
main > section { padding: clamp(64px, 10vw, 128px) clamp(20px, 5vw, 64px); max-width: 1240px; margin: 0 auto; }

/* Un día: título pegado a la izquierda mientras corre la línea de tiempo. */
.dia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.dia-titulo { position: sticky; top: 40px; }
.dia-titulo p { margin-top: 20px; color: var(--tenue); max-width: 30em; }
.linea { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--linea); }
.linea li { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: 20px; padding: 0 0 44px 28px; position: relative; }
.linea li:last-child { padding-bottom: 0; }
.linea li::before { content: ''; position: absolute; left: -7px; top: 10px; width: 12px; height: 12px; background: var(--fondo); border: 2px solid var(--oro); border-radius: 50%; }
.linea time { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 2.4rem; line-height: 1; color: var(--oro); font-variant-numeric: tabular-nums; }
.linea p { margin-top: 8px; color: var(--tenue); max-width: 34em; }

/* Roles: tres columnas separadas por líneas, sin tarjetas. */
.roles-columnas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 40px; border-top: 2px solid var(--texto); }
.roles-columnas > div { padding: 24px 28px 8px 0; }
.roles-columnas > div + div { padding-left: 28px; border-left: 1px solid var(--linea); }
.roles-columnas p { margin-top: 12px; color: var(--tenue); }

/* QR: la parte viva de la página. */
.qr { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.telefono { margin: 0 auto; width: min(300px, 78vw); aspect-ratio: 9 / 15.5; background: var(--telefono); border-radius: 38px; padding: 14px; box-shadow: 0 30px 60px -30px #00000080; }
.telefono-pantalla { height: 100%; background: #1f2937; border-radius: 26px; padding: 26px 20px; color: #f9fafb; display: flex; flex-direction: column; }
.telefono-gym { font-size: 0.85rem; color: #9ca3af; }
.telefono-titulo { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 2rem; color: #f59e0b; line-height: 1; margin-top: 2px; }
.qr-caja { background: #fff; border-radius: 16px; padding: 14px; margin-top: 22px; aspect-ratio: 1; }
.qr-caja svg { width: 100%; height: 100%; display: block; }
.qr-tiempo { height: 6px; background: #374151; border-radius: 3px; margin-top: 14px; overflow: hidden; }
.qr-tiempo div { height: 100%; width: 100%; background: #f59e0b; transform-origin: left; }
.telefono-nota { margin-top: 10px; font-size: 0.8rem; color: #9ca3af; text-align: center; }
.qr-texto p { margin-top: 20px; color: var(--tenue); max-width: 32em; font-size: 1.15rem; }

/* Lo que no se ve. */
.detras dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 36px 48px; margin: 40px 0 0; }
.detras dt { font-family: 'Big Shoulders Display', sans-serif; font-weight: 700; font-size: 1.5rem; padding-top: 14px; border-top: 3px solid var(--oro); display: inline-block; }
.detras dd { margin: 10px 0 0; color: var(--tenue); }
.dominio { color: var(--texto); font-weight: 600; white-space: nowrap; }

/* Cierre. */
.probalo { text-align: left; }
.probalo h2 { font-size: clamp(2.8rem, 7vw, 5.4rem); max-width: 12em; }
.probalo p { margin: 20px 0 32px; color: var(--tenue); max-width: 34em; font-size: 1.15rem; }

.pie { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; padding: 28px clamp(20px, 5vw, 64px); border-top: 1px solid var(--linea); color: var(--tenue); font-size: 0.95rem; }
.pie strong { color: var(--texto); }
.tema { display: inline-flex; border: 1px solid var(--linea); border-radius: 4px; overflow: hidden; }
.tema button { background: none; border: 0; color: var(--tenue); font: inherit; font-size: 0.85rem; padding: 6px 12px; cursor: pointer; }
.tema button + button { border-left: 1px solid var(--linea); }
.tema button[aria-pressed='true'] { background: var(--texto); color: var(--fondo); }
/* Otro idioma que el español: oculto hasta que i18n.js aplica el catálogo (máx. 2 s). */
.i18n-pendiente body { visibility: hidden; }

/* ── Celular ─────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .portada::before { background: linear-gradient(0deg, #141518f5 0%, #141518d9 45%, #14151880 100%); }
  .portada-foto img { object-position: 62% center; }
  .portada-texto { max-width: none; }
  .portada h1 { font-size: clamp(3rem, 12vw, 4.6rem); }
  .dia, .qr { grid-template-columns: minmax(0, 1fr); }
  .dia-titulo { position: static; }
  .roles-columnas { grid-template-columns: minmax(0, 1fr); }
  .roles-columnas > div, .roles-columnas > div + div { padding: 20px 0; border-left: 0; }
  .roles-columnas > div + div { border-top: 1px solid var(--linea); }
  .qr .telefono { order: 2; }
}
@media (max-width: 520px) {
  .linea li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .barra .boton-chico { display: none; }
}

/* ── Ingresar (uruz.ar/ingresar) ─────────────────────────────────────────── */
.barra .enlace-barra { color: inherit; text-decoration: none; font-weight: 600; margin-right: 18px; }
.barra .enlace-barra:hover { text-decoration: underline; }
.barra-derecha { display: flex; align-items: center; }

/* ── Selector de idioma (i18n.js): del tamaño de "Ver demo", con bandera y código ──────────── */
.idioma-selector { position: relative; margin-left: 12px; }
.idioma-boton { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 0.95rem; font-weight: 600;
  letter-spacing: 0.04em; cursor: pointer; }
.idioma-bandera { display: inline-flex; flex-shrink: 0; width: 21px; height: 14px; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px #00000033; }
.idioma-bandera svg { width: 100%; height: 100%; display: block; }
.idioma-flecha { width: 10px; height: 6px; opacity: 0.75; }
.barra-plana .idioma-boton { color: var(--texto); border-color: var(--linea); }
.barra-plana .idioma-boton:hover { background: var(--superficie); border-color: var(--tenue); }
.idioma-menu { position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; margin: 0; padding: 6px; list-style: none;
  min-width: 240px; max-height: min(80vh, 560px); overflow-y: auto; background: var(--superficie); color: var(--texto);
  border: 1px solid var(--linea); border-radius: 8px; box-shadow: 0 16px 40px #00000040; outline: none; font-size: 0.95rem; }
.idioma-menu.arriba { top: auto; bottom: calc(100% + 8px); }
.idioma-menu[hidden] { display: none; }
.idioma-menu li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.idioma-menu li.activo { background: var(--fondo); }
.idioma-menu li[aria-selected='true'] { font-weight: 600; }
.idioma-menu li[aria-selected='true']::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--oro); }
.idioma-menu .idioma-nombre { flex: 1; }
.idioma-menu .idioma-codigo { font-size: 0.8rem; letter-spacing: 0.04em; color: var(--tenue); }
.pagina-ingreso { min-height: 100svh; display: flex; flex-direction: column; }
.barra-plana { color: var(--texto); }
.ingreso { width: 100%; max-width: 440px; margin: clamp(24px, 8vh, 96px) auto 48px; padding: 0 20px; }
.ingreso h1 { font-size: clamp(2.8rem, 9vw, 4rem); }
.ingreso-bajada { margin-top: 14px; color: var(--tenue); }
.ingreso-form { display: flex; flex-direction: column; gap: 10px; margin-top: 32px; }
.ingreso-form label { font-weight: 600; }
.ingreso-form input { font: inherit; font-size: 1.1rem; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 3px; background: var(--superficie); color: var(--texto); }
.ingreso-form input.codigo { font-size: 1.8rem; letter-spacing: 0.4em; text-align: center; }
.ingreso-form .boton { margin-top: 8px; cursor: pointer; font: inherit; font-weight: 600; }
.ingreso-form .boton:disabled { opacity: 0.6; cursor: default; }
.ingreso-ayuda { font-size: 0.9rem; color: var(--tenue); }
.canales { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--linea); border-radius: 3px; overflow: hidden; margin-bottom: 8px; }
.canales button { background: none; border: 0; padding: 10px; font: inherit; color: var(--tenue); cursor: pointer; }
.canales button + button { border-left: 1px solid var(--linea); }
.canales button[aria-pressed='true'] { background: var(--texto); color: var(--fondo); }
.enlace { background: none; border: 0; padding: 4px 0; font: inherit; color: var(--tenue); text-decoration: underline; cursor: pointer; align-self: flex-start; }
.ingreso-mensaje { margin-top: 16px; color: var(--rojo); font-weight: 500; min-height: 1.5em; }
#paso-gyms { margin-top: 32px; }
#paso-gyms h2 { font-size: 2rem; }
.lista-gyms { list-style: none; padding: 0; margin: 16px 0 0; border-top: 2px solid var(--texto); }
.lista-gyms li { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--linea); }
.lista-gyms-nombre { flex: 1 1 100%; font-family: 'Big Shoulders Display', sans-serif; font-weight: 700; font-size: 1.5rem; }
.ingreso-pie { margin-top: 40px; color: var(--tenue); font-size: 0.95rem; }
.pie a, .ingreso-firma a { color: inherit; text-decoration: underline; }
.ingreso-firma { margin-top: 12px; color: var(--tenue); font-size: 0.85rem; }

/* ── Registro (registrar.html) ──────────────────────────────────────────── */
.subdominio { display: flex; align-items: stretch; border: 1px solid var(--linea); border-radius: 3px; background: var(--superficie); }
.subdominio input { flex: 1; min-width: 0; border: 0 !important; background: transparent; }
.subdominio-sufijo { display: flex; align-items: center; padding: 0 14px; color: var(--tenue); font-size: 1.05rem; border-left: 1px solid var(--linea); }
.ingreso-form .acepto { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin-top: 6px; }
.ingreso-form .acepto input { margin-top: 5px; width: 18px; height: 18px; flex-shrink: 0; }
.ingreso-ayuda.error { color: var(--rojo); }

/* ── Términos (terminos.html) ───────────────────────────────────────────── */
.legal { max-width: 760px; margin: clamp(24px, 6vh, 64px) auto 64px; padding: 0 20px; }
.legal h1 { font-size: clamp(2.4rem, 7vw, 3.4rem); }
.legal h2 { font-size: 1.6rem; margin: 36px 0 10px; }
.legal p, .legal li { color: var(--texto); margin: 10px 0; }
.legal .borrador { background: var(--superficie); border: 1px dashed var(--oro); padding: 12px 16px; border-radius: 4px; color: var(--tenue); }
.probalo .probalo-precio { margin: 14px 0 0; font-size: 1rem; }
.probalo .probalo-mail { margin: 18px 0 0; font-size: 0.95rem; }

/* El código en seis casillas (casillas.js). */
.codigo-casillas { display: flex; gap: 8px; }
.codigo-casillas input { width: 52px; height: 60px; padding: 0; text-align: center; font: inherit; font-size: 1.8rem; font-weight: 600;
  border: 1px solid var(--linea); border-radius: 3px; background: var(--superficie); color: var(--texto); }
@media (max-width: 400px) { .codigo-casillas input { width: 42px; height: 52px; font-size: 1.5rem; } }