/* La web del producto.
   Marca (brand/README.md): negro régie de base y un solo acento, el rojo
   de "al aire", que se usa SOLO para lo que está en vivo (el paso "Al
   aire" del recorrido y el resplandor de Transmisión). Los botones
   principales van en papel con texto negro.
   Acabado (estándar pedido por el dueño, 22/10/2026): profundidad por
   elevación lumínica (las capas de arriba son más claras, no más
   sombreadas), bordes de 1px con el borde superior más brillante como luz
   cenital, vidrio en la cabecera y los menús, texto en tres niveles,
   Inter para el texto y JetBrains Mono con cifras tabulares para números
   y rótulos, y respuesta al cursor en menos de 150 ms. */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fuentes/space-grotesk-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fuentes/space-grotesk-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fuentes/inter-latin-wght-normal.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fuentes/jetbrains-mono-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fuentes/jetbrains-mono-latin-500-normal.woff2') format('woff2');
}

:root {
  /* Superficies: cada capa un poco más clara que la de abajo. */
  --bg-base: #0b0c10;
  --bg-surface: #12141c;
  --bg-elevated: #181b26;
  --bg-glass: rgba(18, 20, 28, 0.75);
  --bg-hover: rgba(255, 255, 255, 0.025);

  /* Bordes de 1px: el de arriba más brillante, como luz cenital. */
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-top: rgba(255, 255, 255, 0.14);
  --border-hover: rgba(255, 255, 255, 0.18);
  --border-strong: rgba(255, 255, 255, 0.24);

  /* Texto en tres niveles. El terciario no llega a 4,5:1: solo para
     rótulos y números que acompañan, nunca para texto que haya que leer. */
  --text-primary: #f3f4f6;
  --text-secondary: #9ca3af;
  --text-muted: #6b7280;

  /* El único acento: lo que está al aire. */
  --accent-live: #ff3b30;
  --accent-live-glow: rgba(255, 59, 48, 0.08);
  --accent-live-ring: rgba(255, 59, 48, 0.55);

  --font-display: 'Space Grotesk', 'Inter Variable', system-ui, sans-serif;
  --font-sans: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.2s;
  --focus-ring: 0 0 0 2px var(--bg-base), 0 0 0 4px rgba(243, 244, 246, 0.7);

  --ancho: 1120px;
  color-scheme: dark;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.24);
}

::selection {
  background: rgba(243, 244, 246, 0.18);
  color: var(--text-primary);
}

body {
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

a:focus-visible,
summary:focus-visible,
button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.icono {
  width: 1em;
  height: 1em;
  flex: none;
}

/* Números y rótulos: monoespaciada con cifras tabulares, para que nada
   baile cuando cambia. */
.mono,
.antetitulo,
.paso__num,
.pilar__num,
.etiqueta,
.steam,
.idioma summary,
.tabla th,
.tabla td.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.contenedor {
  width: 100%;
  max-width: calc(var(--ancho) + 48px);
  margin-inline: auto;
  padding-inline: 16px;
}

@media (min-width: 720px) {
  .contenedor {
    padding-inline: 24px;
  }
}

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

.saltar {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 20;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--text-primary);
  color: var(--bg-base);
  font-weight: 600;
  text-decoration: none;
}

.saltar:focus {
  top: 12px;
}

/* La caja de los íconos: una capa elevada con su propia luz cenital. */
.icono-caja {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border-subtle);
  border-top-color: var(--border-top);
  border-radius: 10px;
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.icono-caja svg {
  width: 18px;
  height: 18px;
}

/* --- cabecera ---------------------------------------------------------------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-glass);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 64px;
}

.marca {
  display: inline-flex;
  flex: none;
  margin-right: 16px;
  border-radius: 6px;
}

.marca svg {
  display: block;
  width: auto;
  height: 22px;
}

.nav {
  display: none;
  gap: 2px;
  margin-left: auto;
  font-size: 14px;
}

.nav a {
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.nav a:hover,
.nav a[aria-current='page'] {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.idioma {
  position: relative;
  margin-left: auto;
}

@media (min-width: 820px) {
  .nav {
    display: flex;
  }
  .idioma {
    margin-left: 8px;
  }
}

.idioma summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--border-subtle);
  border-top-color: var(--border-top);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 12px;
  letter-spacing: 0.06em;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.idioma summary::-webkit-details-marker {
  display: none;
}

.idioma summary:hover,
.idioma[open] summary {
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.idioma summary:active {
  transform: scale(0.98);
}

.idioma summary .icono {
  transition: transform var(--dur) var(--ease);
}

.idioma[open] summary .icono {
  transform: rotate(180deg);
}

.idioma ul {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 176px;
  padding: 6px;
  border: 1px solid var(--border-subtle);
  border-top-color: var(--border-top);
  border-radius: var(--radius-md);
  background: rgba(24, 27, 38, 0.86);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  animation: aparecer 0.18s var(--ease);
}

@keyframes aparecer {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.idioma a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 14px;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.idioma a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.idioma a[aria-current='page'] {
  color: var(--text-primary);
}

.idioma a[aria-current='page']::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-primary);
}

/* --- portada ------------------------------------------------------------------ */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: 56px 64px;
}

/* Luz ambiental: un halo neutro arriba, detrás del título. */
.hero::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -260px;
  width: min(1100px, 140vw);
  height: 560px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.06), transparent);
  filter: blur(40px);
  pointer-events: none;
}

.hero > .contenedor {
  position: relative;
}

@media (min-width: 720px) {
  .hero {
    padding-block: 96px 96px;
  }
}

.antetitulo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid var(--border-subtle);
  border-top-color: var(--border-top);
  border-radius: 999px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 17ch;
  margin-top: 24px;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.5rem + 4.4vw, 4.75rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.bajada {
  max-width: 60ch;
  margin-top: 24px;
  color: var(--text-secondary);
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  line-height: 1.6;
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
}

.boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 11px 20px;
  border-radius: 10px;
  background: var(--text-primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);
  color: var(--bg-base);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.boton:hover {
  background: #fff;
  transform: translateY(-1px);
}

.boton:active {
  transform: scale(0.98);
}

.boton:focus-visible {
  box-shadow: var(--focus-ring);
}

.boton .icono {
  transition: transform var(--dur) var(--ease);
}

.boton:hover .icono {
  transform: translateX(2px);
}

.steam {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 11px 16px;
  border: 1px solid var(--border-subtle);
  border-top-color: var(--border-top);
  border-radius: 10px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.steam--correo {
  letter-spacing: 0;
  text-transform: none;
}

/* El recorrido de un partido: cinco pasos unidos por una línea. "Al aire"
   es el único con la luz roja y su resplandor. */
.cadena {
  position: relative;
  margin-top: 64px;
  border: 1px solid var(--border-subtle);
  border-top-color: var(--border-top);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  overflow: hidden;
}

.cadena ol {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}

.paso {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr;
  grid-template-areas:
    'num nombre'
    'num detalle'
    'num vivo';
  column-gap: 12px;
  padding: 18px 20px;
  border-top: 1px solid var(--border-subtle);
}

.paso:first-child {
  border-top: 0;
}

.paso__num {
  grid-area: num;
  padding-top: 3px;
  color: var(--text-muted);
  font-size: 12px;
}

.paso__nombre {
  grid-area: nombre;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.paso__detalle {
  grid-area: detalle;
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 14px;
}

.paso--aire {
  isolation: isolate;
}

.paso--aire::after {
  content: '';
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: radial-gradient(closest-side, var(--accent-live-glow), transparent);
  filter: blur(40px);
  pointer-events: none;
}

.en-vivo {
  grid-area: vivo;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--accent-live);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.luz {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-live);
  box-shadow: 0 0 0 0 var(--accent-live-ring);
  animation: al-aire 1.8s var(--ease) infinite;
}

@keyframes al-aire {
  0% {
    box-shadow: 0 0 0 0 var(--accent-live-ring);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(255, 59, 48, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
  }
}

@media (min-width: 900px) {
  .cadena ol {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  /* La línea que une los cinco nodos. */
  .cadena ol::before {
    content: '';
    position: absolute;
    left: 24px;
    right: 24px;
    top: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-top) 8%, var(--border-top) 92%, transparent);
  }
  .paso {
    display: flex;
    flex-direction: column;
    padding: 24px 22px 26px;
    border-top: 0;
    border-left: 1px solid var(--border-subtle);
  }
  .paso:first-child {
    border-left: 0;
  }
  .paso::before {
    content: '';
    position: relative;
    z-index: 1;
    width: 9px;
    height: 9px;
    margin-bottom: 18px;
    border: 1.5px solid var(--text-muted);
    border-radius: 50%;
    background: var(--bg-surface);
  }
  .paso--aire::before {
    border-color: var(--accent-live);
    background: var(--accent-live);
    box-shadow: 0 0 12px rgba(255, 59, 48, 0.6);
  }
  .paso__num {
    padding-top: 0;
  }
  .paso__nombre {
    margin-top: 6px;
  }
  .en-vivo {
    margin-top: auto;
    padding-top: 16px;
  }
}

/* --- secciones ---------------------------------------------------------------- */

.seccion {
  padding-block: 72px;
}

@media (min-width: 720px) {
  .seccion {
    padding-block: 104px;
  }
}

.seccion--grafito {
  border-block: 1px solid var(--border-subtle);
  background: linear-gradient(180deg, rgba(18, 20, 28, 0.6), rgba(11, 12, 16, 0) 70%);
}

.seccion__cabecera {
  max-width: 720px;
  margin-bottom: 40px;
}

.seccion h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.35rem + 2.1vw, 2.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.seccion__cabecera p {
  margin-top: 16px;
  color: var(--text-secondary);
  font-size: 17px;
}

/* Tarjetas: superficie con luz cenital. Las que son enlace reaccionan al
   cursor; las que no, no fingen serlo. */
.pilar,
.propio__item,
.juego,
.otro {
  position: relative;
  border: 1px solid var(--border-subtle);
  border-top-color: var(--border-top);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
}

.pilar,
.otro {
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.pilar:hover,
.otro:hover {
  border-color: var(--border-hover);
  background: #141721;
  transform: translateY(-1px);
}

.pilar:active,
.otro:active {
  transform: scale(0.98);
}

/* Pilares en bento asimétrico: 5/7, 4/8 y Datos a lo ancho. */
.pilares {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 680px) {
  .pilares {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pilar--transmision {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1000px) {
  .pilares {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      'srv srv srv srv srv tor tor tor tor tor tor tor'
      'par par par par tra tra tra tra tra tra tra tra'
      'dat dat dat dat dat dat dat dat dat dat dat dat';
  }
  .pilar--servidor {
    grid-area: srv;
  }
  .pilar--torneos {
    grid-area: tor;
  }
  .pilar--partidos {
    grid-area: par;
  }
  .pilar--transmision {
    grid-area: tra;
  }
  .pilar--datos {
    grid-area: dat;
  }
  .pilar--transmision ul {
    columns: 2;
    column-gap: 32px;
  }
  .pilar--transmision li {
    break-inside: avoid;
  }
  .pilar--torneos ul,
  .pilar--datos ul {
    columns: 2;
    column-gap: 32px;
  }
  .pilar--torneos li,
  .pilar--datos li {
    break-inside: avoid;
  }
}

.pilar {
  display: flex;
  flex-direction: column;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
}

/* Transmisión es lo que sale al aire: lleva el resplandor rojo. */
.pilar--transmision::before {
  content: '';
  position: absolute;
  right: -120px;
  top: -120px;
  z-index: -1;
  width: 420px;
  height: 420px;
  background: radial-gradient(closest-side, var(--accent-live-glow), transparent);
  filter: blur(40px);
  pointer-events: none;
}

.pilar__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pilar__num {
  color: var(--text-muted);
  font-size: 12px;
}

.pilar h3 {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.pilar__frase {
  margin-top: 6px;
  color: var(--text-primary);
  font-size: 15px;
}

.pilar ul {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
}

.pilar li,
.bloque__cuerpo li,
.documento li {
  position: relative;
  padding-left: 18px;
  color: var(--text-secondary);
  font-size: 14.5px;
  line-height: 1.55;
}

.bloque__cuerpo li,
.documento li {
  font-size: 15.5px;
}

.pilar li + li,
.bloque__cuerpo li + li,
.documento li + li {
  margin-top: 9px;
}

.pilar li::before,
.bloque__cuerpo li::before,
.documento li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 8px;
  height: 1px;
  background: var(--text-muted);
}

/* "Ver más" estira su área a toda la tarjeta: la tarjeta entera es el
   enlace, sin anidar un enlace adentro de otro. */
.pilar__mas {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 22px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.pilar__mas::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.pilar__mas:focus-visible {
  box-shadow: none;
}

.pilar:has(.pilar__mas:focus-visible) {
  box-shadow: var(--focus-ring);
}

.pilar__mas .icono {
  transition: transform var(--dur) var(--ease);
}

.pilar:hover .pilar__mas .icono {
  transform: translateX(3px);
}

.nota {
  margin-top: 20px;
  color: var(--text-muted);
  font-size: 13.5px;
}

/* Hecho por Regie.gg: bento de tres columnas, el veto ocupa dos. */
.propio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 680px) {
  .propio {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .propio__item--destacado {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1000px) {
  .propio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .propio__item--destacado {
    grid-column: span 2;
  }
}

.propio__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
}

.propio__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.propio__item--destacado {
  background: linear-gradient(135deg, var(--bg-elevated), var(--bg-surface) 60%);
}

.propio__item--destacado h3 {
  font-size: clamp(22px, 1.2rem + 0.6vw, 26px);
}

.propio__item--destacado p {
  max-width: 62ch;
}

.etiqueta {
  padding: 3px 9px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.propio__item h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.propio__item p {
  color: var(--text-secondary);
  font-size: 15px;
}

/* Juegos */
.juegos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.juego {
  padding: 22px;
}

.juego h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.juego p {
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 14.5px;
  line-height: 1.5;
}

.juego--mas {
  border-style: dashed;
  border-color: var(--border-top);
  background: transparent;
}

.juego--mas .icono-caja {
  margin-bottom: 14px;
  background: transparent;
  color: var(--text-secondary);
}

.juego--mas h3 {
  color: var(--text-secondary);
}

/* Soporte */
.seccion--soporte {
  border-top: 1px solid var(--border-subtle);
}

.seccion--soporte p {
  margin-top: 14px;
  color: var(--text-secondary);
  font-size: 17px;
}

.seccion--soporte a {
  border-radius: 4px;
  color: var(--text-primary);
  text-decoration-color: var(--text-muted);
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
  transition: text-decoration-color var(--dur) var(--ease);
}

.seccion--soporte a:hover {
  text-decoration-color: var(--text-primary);
}

/* --- páginas internas ------------------------------------------------------------- */

.hero--pagina {
  padding-block: 32px 56px;
  border-bottom: 1px solid var(--border-subtle);
}

@media (min-width: 720px) {
  .hero--pagina {
    padding-block: 48px 80px;
  }
}

.hero--pagina h1 {
  max-width: 20ch;
  font-size: clamp(2.2rem, 1.4rem + 3.2vw, 3.75rem);
}

.volver {
  display: flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  margin-bottom: 36px;
  padding: 5px 10px 5px 8px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 14px;
  text-decoration: none;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.volver:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.volver:active {
  transform: scale(0.98);
}

/* Cada pilar: título a la izquierda, detalle a la derecha. */
.seccion--detalle {
  padding-top: 16px;
}

.bloque {
  display: grid;
  gap: 12px;
  padding-block: 32px;
  border-top: 1px solid var(--border-subtle);
}

.bloque:first-child {
  border-top: 0;
}

@media (min-width: 860px) {
  .bloque {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 48px;
    padding-block: 40px;
  }
}

.bloque h2 {
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.55rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.bloque__cuerpo p {
  color: var(--text-secondary);
}

.bloque__cuerpo ul,
.documento ul {
  margin-top: 16px;
}

.seccion--otros {
  padding-block: 56px;
}

.seccion .titulo-chico {
  margin-bottom: 20px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.otros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.otro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 20px;
  text-decoration: none;
}

.otro__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.otro strong {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: -0.01em;
}

.otro > span:last-child {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.45;
}

/* Privacidad, licencias y soporte: una columna para leer. */
.seccion--documento {
  padding-top: 16px;
}

.documento {
  max-width: 808px;
}

.documento--ancho {
  max-width: 1000px;
}

.documento section {
  padding-block: 32px;
  border-top: 1px solid var(--border-subtle);
}

.documento section:first-child {
  border-top: 0;
}

.documento h2 {
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.5rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.documento p {
  margin-top: 12px;
  color: var(--text-secondary);
}

.tabla {
  margin-top: 20px;
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-top-color: var(--border-top);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  -webkit-overflow-scrolling: touch;
}

.tabla table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.tabla th {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
}

.tabla td {
  padding: 11px 16px;
  border-top: 1px solid var(--border-subtle);
  vertical-align: top;
}

.tabla tbody tr:first-child td {
  border-top: 0;
}

.tabla tbody tr {
  transition: background-color var(--dur) var(--ease);
}

.tabla tbody tr:hover {
  background: var(--bg-hover);
}

.tabla td.mono {
  color: var(--text-secondary);
  font-size: 12.5px;
  white-space: nowrap;
}

.tabla a {
  border-radius: 4px;
  color: var(--text-secondary);
  text-decoration-color: var(--border-hover);
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}

.tabla a:hover {
  color: var(--text-primary);
  text-decoration-color: var(--text-secondary);
}

/* --- pie ------------------------------------------------------------------------ */

.pie {
  padding-block: 32px 40px;
  border-top: 1px solid var(--border-subtle);
}

.pie__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
}

.pie__derechos {
  color: var(--text-secondary);
  font-size: 13.5px;
}

.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-inline: -8px;
  font-size: 13.5px;
}

.pie__enlaces a {
  padding: 4px 8px;
  border-radius: 6px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.pie__enlaces a:hover,
.pie__enlaces a[aria-current='page'] {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}

.pie__marcas {
  max-width: 72ch;
  margin-top: 20px;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.55;
}

/* --- raíz (elige el idioma) ---------------------------------------------------- */

.raiz__caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  min-height: 100vh;
}

.raiz .marca {
  margin-right: 0;
}

.raiz .marca svg {
  height: 32px;
}

.raiz__idiomas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.raiz__idiomas a {
  display: inline-block;
  padding: 10px 16px;
  border: 1px solid var(--border-subtle);
  border-top-color: var(--border-top);
  border-radius: 10px;
  background: var(--bg-surface);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.raiz__idiomas a:hover {
  border-color: var(--border-hover);
  color: var(--text-primary);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}