/* ============================================================================
   NEXARA · Hoja de estilo del sitio
   ----------------------------------------------------------------------------
   La paleta y las formas salen de la propia aplicacion: fondo #0E1020, paneles
   con la esquina cortada como el HUD del juego y los acentos que ya usa la
   interfaz. El sitio se compromete con el modo oscuro a proposito -- es el
   mundo visual del juego -- asi que pinta todos los colores de forma explicita
   y no hereda nada del navegador.
   ========================================================================= */

:root {
  /* Fondos */
  --fondo:            #0E1020;
  --fondo-hondo:      #06080E;
  --fondo-alterno:    #0B0D1B;
  --panel:            #161930;
  --panel-alto:       #1E203A;

  /* Bordes */
  --borde:            #2A2E4C;
  --borde-fuerte:     #3A3F66;

  /* Texto */
  --texto:            #F4F1FA;
  --texto-suave:      #A9AFCE;
  --texto-tenue:      #767DA0;

  /* Acentos del juego */
  --azul:             #385AE6;
  --azul-claro:       #6B87FF;
  --morado:           #7A3FFB;
  --rosa:             #D945C7;
  --cian:             #099EC6;
  --verde:            #27BF2C;
  --amarillo:         #E6C61B;
  --coral:            #FF93B0;
  --perla:            #FEE9D7;

  /* Tipografia */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --cuerpo:  "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* Ritmo */
  --ancho:   1160px;
  --corte:   14px;   /* tamano del chaflan de los paneles */
}

/* ─────────────────────────────────────────────────────────── base */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
  margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 1;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); letter-spacing: -0.015em; }
h3 { font-size: 1.16rem; letter-spacing: -0.005em; }

p { margin: 0; }

a { color: var(--azul-claro); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--perla); }

:focus-visible {
  outline: 2px solid var(--amarillo);
  outline-offset: 3px;
  border-radius: 2px;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tenue { color: var(--texto-tenue); }

.envoltorio {
  width: min(100% - 44px, var(--ancho));
  margin-inline: auto;
}

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.saltar {
  position: absolute; left: 16px; top: -60px;
  background: var(--amarillo); color: #171200;
  padding: 10px 18px; font-weight: 600; z-index: 100;
  transition: top .18s ease;
}
.saltar:focus { top: 16px; color: #171200; }

.etiqueta {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cian);
  margin-bottom: 14px;
}

.parrafo-guia {
  color: var(--texto-suave);
  max-width: 60ch;
  font-size: 1.05rem;
}

/* Chaflan compartido: esquina superior izquierda y inferior derecha. */
.panel,
.tics-demo,
.cierre__caja,
.tabla-envoltura {
  clip-path: polygon(
    var(--corte) 0, 100% 0,
    100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%,
    0 100%, 0 var(--corte)
  );
}

/* ─────────────────────────────────────────────────────── cabecera */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--fondo) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 68px;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--texto);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}
.marca:hover { color: var(--texto); }
.marca__glifo { color: var(--azul-claro); display: flex; }

.navegacion {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: .93rem;
}
.navegacion a {
  color: var(--texto-suave);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.navegacion a:hover,
.navegacion a.activo {
  color: var(--texto);
  border-bottom-color: var(--azul-claro);
}
.navegacion__aparte {
  padding-left: 30px;
  border-left: 1px solid var(--borde);
}
.navegacion__aparte:hover { border-bottom-color: transparent; }

.menu-boton {
  display: none;
  width: 42px; height: 42px;
  background: transparent;
  border: 1px solid var(--borde-fuerte);
  color: var(--texto);
  cursor: pointer;
  place-items: center;
}
.menu-boton__barras,
.menu-boton__barras::before,
.menu-boton__barras::after {
  display: block;
  width: 18px; height: 2px;
  background: currentColor;
  content: "";
  transition: transform .2s ease, opacity .2s ease;
}
.menu-boton__barras::before { transform: translateY(-6px); }
.menu-boton__barras::after  { transform: translateY(4px); }
.menu-boton[aria-expanded="true"] .menu-boton__barras { background: transparent; }
.menu-boton[aria-expanded="true"] .menu-boton__barras::before { transform: rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton__barras::after  { transform: rotate(-45deg) translateY(1px); }

/* ────────────────────────────────────────────────────────── heroe */

.heroe {
  position: relative;
  padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 9vw, 116px);
  overflow: hidden;
  border-bottom: 1px solid var(--borde);
}

/* Resplandor: es el unico gesto llamativo de la pagina, y va aqui. */
.heroe__aura {
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 620px;
  background:
    radial-gradient(46% 60% at 22% 34%, color-mix(in srgb, var(--morado) 34%, transparent), transparent 70%),
    radial-gradient(40% 54% at 74% 22%, color-mix(in srgb, var(--azul) 32%, transparent), transparent 72%),
    radial-gradient(30% 44% at 52% 66%, color-mix(in srgb, var(--rosa) 16%, transparent), transparent 74%);
  filter: blur(12px);
  pointer-events: none;
}

.heroe__rejilla {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.heroe__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.heroe__texto h1 { margin-bottom: 20px; }

.cifras {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 40px;
  margin: 40px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--borde);
}
.cifras div { display: grid; gap: 2px; }
.cifras dt {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.16rem;
  color: var(--perla);
}
.cifras dd {
  margin: 0;
  font-size: .87rem;
  color: var(--texto-tenue);
}

/* ─────────────────────────────────────────────────────── botones */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  font-family: var(--cuerpo);
  font-weight: 600;
  font-size: .97rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.boton--principal {
  background: linear-gradient(100deg, var(--azul) 0%, var(--morado) 100%);
  color: #fff;
}
.boton--principal:hover { color: #fff; transform: translateY(-2px); }
.boton--fantasma {
  background: transparent;
  border-color: var(--borde-fuerte);
  color: var(--texto);
}
.boton--fantasma:hover { border-color: var(--azul-claro); color: var(--texto); transform: translateY(-2px); }
.boton--inerte { cursor: default; opacity: .95; }
.boton--inerte:hover { transform: none; }

/* ────────────────────────────────────────────────────────── movil */

.movil { display: flex; justify-content: center; }

.movil__marco {
  width: min(100%, 336px);
  background: var(--fondo-hondo);
  border: 1px solid var(--borde-fuerte);
  border-radius: 30px;
  padding: 14px 14px 18px;
  box-shadow:
    0 40px 80px -30px rgba(0, 0, 0, .9),
    0 0 0 8px rgba(255, 255, 255, .02);
}

.movil__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 8px 12px;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--texto-tenue);
}
.movil__iconos { display: flex; gap: 4px; }
.movil__iconos i {
  width: 4px; height: 10px;
  background: var(--texto-tenue);
  display: block;
  opacity: .55;
}
.movil__iconos i:nth-child(2) { height: 13px; opacity: .75; }
.movil__iconos i:nth-child(3) { height: 16px; opacity: .95; }

.chat__cabecera {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 6px 14px;
  border-bottom: 1px solid var(--borde);
}
.chat__cabecera strong { display: block; font-size: .95rem; }
.chat__cabecera em {
  font-style: normal;
  font-size: .75rem;
  color: var(--verde);
}
.avatar {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--morado), var(--rosa));
  color: #fff;
  font-weight: 600;
  border-radius: 50%;
  font-size: .95rem;
}

.chat__hilo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 6px 10px;
}

.burbuja {
  max-width: 88%;
  padding: 10px 13px;
  font-size: .89rem;
  line-height: 1.5;
  border-radius: 14px;
}
.burbuja--otro {
  align-self: flex-start;
  background: var(--panel-alto);
  border-bottom-left-radius: 4px;
  color: var(--texto-suave);
}
.burbuja--mia {
  align-self: flex-end;
  background: linear-gradient(150deg, color-mix(in srgb, var(--azul) 78%, #000), var(--morado));
  border-bottom-right-radius: 4px;
}
.burbuja--corta { max-width: 60%; }
.burbuja--tarjeta { padding: 9px 9px 6px; width: 88%; }

.burbuja__pie {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin-top: 6px;
  padding-right: 3px;
  font-family: var(--mono);
  font-size: .67rem;
  color: rgba(255, 255, 255, .68);
}

.tarjeta-mascota {
  display: flex;
  gap: 10px;
  align-items: center;
  background: rgba(6, 8, 14, .5);
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 9px;
  border-radius: 10px;
}
.tarjeta-mascota__sello {
  width: 46px; height: 46px;
  flex: none;
  border-radius: 9px;
  background:
    radial-gradient(circle at 34% 32%, var(--coral), transparent 58%),
    linear-gradient(160deg, var(--amarillo), var(--rosa) 62%, var(--morado));
}
.tarjeta-mascota__datos { display: grid; gap: 3px; min-width: 0; }
.tarjeta-mascota__datos strong { font-size: .92rem; }
.tarjeta-mascota__datos span { font-size: .68rem; color: rgba(255, 255, 255, .8); }

.barra-xp {
  height: 5px;
  background: rgba(0, 0, 0, .45);
  border-radius: 99px;
  overflow: hidden;
  margin: 3px 0 1px;
}
.barra-xp span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--verde), var(--amarillo));
}

.movil__leyenda {
  text-align: center;
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-top: 6px;
  min-height: 1.2em;
}

/* ─────────────────────────────────────────────────────────── tics */

.tics { display: inline-flex; color: currentColor; }
.tics .tic { transition: opacity .25s ease; }
.tics[data-estado="enviado"]   { color: rgba(255, 255, 255, .62); }
.tics[data-estado="enviado"]   .tic--dos { opacity: 0; }
.tics[data-estado="entregado"] { color: rgba(255, 255, 255, .62); }
.tics[data-estado="leido"]     { color: var(--cian); }

.tics--muestra svg { width: 26px; height: 15px; }
.tics--muestra[data-estado="enviado"],
.tics--muestra[data-estado="entregado"] { color: var(--texto-tenue); }

/* ──────────────────────────────────────────────────────── secciones */

.seccion { padding: clamp(64px, 8vw, 108px) 0; }
.seccion--alterna {
  background: var(--fondo-alterno);
  border-block: 1px solid var(--borde);
}

.seccion__cabecera { margin-bottom: 44px; max-width: 68ch; }
.seccion__cabecera h2 { margin-bottom: 16px; }

.seccion__doble {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.seccion__doble h2 { margin-bottom: 16px; }

/* ───────────────────────────────────────────────────────── paneles */

.paneles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(266px, 1fr));
  gap: 18px;
}
.paneles--cuatro { grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); }
/* Seis fichas: tres columnas las llenan exactamente, cuatro dejarian dos huecos. */
.paneles--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .paneles--tres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .paneles--tres { grid-template-columns: 1fr; } }

.panel {
  background: var(--panel);
  border: 1px solid var(--borde);
  padding: 26px 24px;
  display: grid;
  gap: 10px;
  align-content: start;
  transition: border-color .18s ease, background .18s ease;
}
.panel:hover { border-color: var(--borde-fuerte); background: var(--panel-alto); }
.panel p { color: var(--texto-suave); font-size: .95rem; }

.panel__marca {
  font-size: .74rem;
  letter-spacing: .16em;
  color: var(--azul-claro);
}
.panel--acento { border-top: 2px solid var(--azul); }

/* ──────────────────────────────────────────────────────── evolucion */

.evolucion {
  list-style: none;
  margin: 0 0 44px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  counter-reset: etapa;
}
.evolucion__paso {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--borde);
  padding: 26px 24px 24px;
  display: grid;
  gap: 8px;
  justify-items: start;
  clip-path: polygon(
    var(--corte) 0, 100% 0,
    100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%,
    0 100%, 0 var(--corte)
  );
}
.evolucion__marca {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
.evolucion__paso p { color: var(--texto-suave); font-size: .93rem; }

/* Las tres siluetas: la misma criatura, cada vez mas grande y mas caliente. */
.evolucion__figura {
  width: 76px; height: 76px;
  margin: 6px 0 4px;
  border-radius: 46% 46% 40% 40%;
  position: relative;
}
.evolucion__figura::after {
  content: "";
  position: absolute;
  inset: auto 0 -9px 0;
  height: 9px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .5);
  filter: blur(4px);
}
/* El margen superior compensa la altura: las tres siluetas apoyan en la misma
   linea, asi que los titulos de las tres fichas quedan alineados. */
.evolucion__figura--cria {
  width: 54px; height: 54px;
  margin-top: 28px;
  background: radial-gradient(circle at 36% 30%, var(--perla), var(--coral) 58%, #b45a76);
}
.evolucion__figura--joven {
  width: 66px; height: 70px;
  margin-top: 12px;
  background: radial-gradient(circle at 36% 28%, var(--amarillo), var(--coral) 52%, var(--rosa));
}
.evolucion__figura--adulta {
  background: radial-gradient(circle at 34% 26%, var(--perla), var(--rosa) 46%, var(--morado) 82%);
  box-shadow: 0 0 34px -6px color-mix(in srgb, var(--morado) 70%, transparent);
}

/* ──────────────────────────────────────────────────── lista marcada */

.lista-marcada {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 20px;
}
.lista-marcada li {
  padding-left: 20px;
  border-left: 2px solid var(--borde-fuerte);
  color: var(--texto-suave);
  font-size: .96rem;
  max-width: 62ch;
}
.lista-marcada strong {
  display: block;
  color: var(--texto);
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  margin-bottom: 3px;
}

/* ────────────────────────────────────────────────────── demo de tics */

.tics-demo {
  background: var(--panel);
  border: 1px solid var(--borde);
  padding: 26px 24px;
}
.tics-demo__titulo {
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: 20px;
}
.tics-demo__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.tics-demo__lista li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
}
.tics-demo__lista strong { display: block; font-size: .97rem; }
.tics-demo__lista p { color: var(--texto-tenue); font-size: .88rem; }

/* ──────────────────────────────────────────────────────────── tabla */

.tabla-envoltura {
  overflow-x: auto;
  background: var(--panel);
  border: 1px solid var(--borde);
}

.tabla-gemas {
  width: 100%;
  border-collapse: collapse;
  font-size: .97rem;
  min-width: 460px;
}
.tabla-gemas th,
.tabla-gemas td {
  padding: 15px 24px;
  text-align: left;
  border-bottom: 1px solid var(--borde);
}
.tabla-gemas thead th {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  background: var(--fondo-hondo);
}
.tabla-gemas tbody th {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
}
.tabla-gemas .num { text-align: right; }
/* Sin anchos fijos las dos columnas de cifras se estiran y los numeros quedan
   flotando en medio de la nada. */
.tabla-gemas th:first-child,
.tabla-gemas tbody th { width: 54%; }
.tabla-gemas .num { width: 23%; }
.tabla-gemas tbody tr:last-child th,
.tabla-gemas tbody tr:last-child td { border-bottom: 0; }
.tabla-gemas tbody tr:hover { background: var(--panel-alto); }
.tabla-gemas .destacada { background: color-mix(in srgb, var(--morado) 15%, transparent); }
.tabla-gemas .destacada td:first-of-type { color: var(--amarillo); }

.nota {
  margin-top: 20px;
  color: var(--texto-tenue);
  font-size: .9rem;
  max-width: 66ch;
}

/* ──────────────────────────────────────────────────────────── cierre */

.cierre { padding: 0 0 clamp(64px, 8vw, 104px); }
.cierre__caja {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--morado) 26%, var(--panel)), var(--panel) 62%);
  border: 1px solid var(--borde-fuerte);
  padding: clamp(38px, 6vw, 62px);
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
}
.cierre__caja p { color: var(--texto-suave); max-width: 52ch; }
.cierre__caja .boton { margin-top: 10px; }

/* ─────────────────────────────────────────────────────────────── pie */

.pie {
  border-top: 1px solid var(--borde);
  background: var(--fondo-hondo);
  padding: 30px 0;
}
.pie__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.pie__marca {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.1rem;
}
.pie__enlaces { display: flex; gap: 24px; font-size: .9rem; }
.pie__enlaces a { color: var(--texto-suave); text-decoration: none; }
.pie__enlaces a:hover { color: var(--texto); text-decoration: underline; }
.pie__nota { font-size: .8rem; color: var(--texto-tenue); }

/* ═══════════════════════════════════════════════ pagina de privacidad */

.legal { padding: clamp(44px, 6vw, 76px) 0 clamp(56px, 7vw, 96px); }

.legal__cabecera {
  border-bottom: 1px solid var(--borde);
  padding-bottom: 30px;
  margin-bottom: 40px;
}
.legal__cabecera h1 { font-size: clamp(2.2rem, 4.6vw, 3.2rem); margin-bottom: 14px; }
.legal__fecha {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--texto-tenue);
}

.legal__cuerpo {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.indice {
  position: sticky;
  top: 96px;
  border-left: 1px solid var(--borde);
  padding-left: 18px;
}
.indice p {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  margin-bottom: 12px;
}
.indice ol {
  list-style: none;
  margin: 0; padding: 0;
  display: grid; gap: 9px;
  counter-reset: idx;
  font-size: .88rem;
}
.indice a {
  color: var(--texto-suave);
  text-decoration: none;
  display: block;
}
.indice a::before {
  counter-increment: idx;
  content: counter(idx, decimal-leading-zero) "  ";
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--texto-tenue);
}
.indice a:hover { color: var(--azul-claro); }

.articulo { max-width: 72ch; }
.articulo > section { margin-bottom: 44px; scroll-margin-top: 96px; }
.articulo h2 {
  font-size: 1.5rem;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--borde);
}
.articulo h3 {
  margin: 24px 0 8px;
  color: var(--perla);
}
.articulo p { margin-bottom: 14px; color: var(--texto-suave); }
.articulo ul { margin: 0 0 16px; padding-left: 22px; color: var(--texto-suave); }
.articulo li { margin-bottom: 8px; }
.articulo li strong { color: var(--texto); }

.aviso {
  background: color-mix(in srgb, var(--amarillo) 12%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--amarillo) 42%, transparent);
  border-left-width: 3px;
  padding: 18px 22px;
  margin-bottom: 36px;
  font-size: .94rem;
  color: var(--texto);
}
.aviso strong { color: var(--amarillo); }
.aviso p:last-child { margin-bottom: 0; }

.tabla-datos {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  margin-bottom: 18px;
  min-width: 460px;
}
.tabla-datos th,
.tabla-datos td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--borde);
  vertical-align: top;
}
.tabla-datos thead th {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--texto-tenue);
  background: var(--fondo-hondo);
}
.tabla-datos tbody th { font-weight: 600; color: var(--texto); width: 34%; }
.tabla-datos td { color: var(--texto-suave); }

/* ───────────────────────────────────────────────────────── responsive */

@media (max-width: 940px) {
  .heroe__rejilla,
  .seccion__doble { grid-template-columns: 1fr; }
  .heroe__aparato { order: -1; }
  .legal__cuerpo { grid-template-columns: 1fr; }
  .indice {
    position: static;
    border-left: 0;
    border-top: 1px solid var(--borde);
    padding-left: 0;
    padding-top: 20px;
    order: 2;
  }
  .articulo { order: 1; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .menu-boton { display: grid; }
  .navegacion {
    position: absolute;
    inset: 68px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--fondo-hondo);
    border-bottom: 1px solid var(--borde);
    padding: 8px 22px 18px;
    display: none;
  }
  .navegacion.abierta { display: flex; }
  .navegacion a {
    padding: 13px 0;
    border-bottom: 1px solid var(--borde);
  }
  .navegacion a:hover,
  .navegacion a.activo { border-bottom-color: var(--borde); color: var(--azul-claro); }
  .navegacion__aparte { padding-left: 0; border-left: 0; }
  .cifras { gap: 14px 28px; }
}

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

/* ═════════════════════════════════════════ pagina de eliminar cuenta */

.borrado {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(30px, 5vw, 60px);
  align-items: start;
}

.borrado__explicacion h2 {
  font-family: var(--display);
  font-size: 1.32rem;
  margin: 0 0 12px;
}
.borrado__explicacion h2:not(:first-child) { margin-top: 34px; }
.borrado__explicacion p { color: var(--texto-suave); margin-bottom: 14px; }

.lista-borrado {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  color: var(--texto-suave);
  font-size: .95rem;
}
.lista-borrado li {
  position: relative;
  padding-left: 26px;
}
.lista-borrado li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--mono);
  font-weight: 600;
}
/* Lo que se va y lo que se queda se leen distinto de un vistazo. */
.lista-borrado--fuera li::before  { content: "×"; color: var(--coral); font-size: 1.1rem; line-height: 1.4; }
.lista-borrado--queda li::before  { content: "→"; color: var(--cian); }
.lista-borrado--queda li { margin-bottom: 4px; }
.lista-borrado strong { color: var(--texto); }

.alerta {
  background: color-mix(in srgb, var(--danger, #E24B5B) 14%, var(--panel));
  border: 1px solid color-mix(in srgb, #E24B5B 44%, transparent);
  border-left-width: 3px;
  padding: 16px 20px;
  margin: 26px 0 0;
  font-size: .94rem;
}
.alerta strong { color: var(--coral); }
.alerta p { margin: 0; color: var(--texto); }

/* ------------------------------------------------------- formulario */

.formulario {
  background: var(--panel);
  border: 1px solid var(--borde-fuerte);
  padding: clamp(24px, 3vw, 32px);
  display: grid;
  gap: 18px;
  position: sticky;
  top: 96px;
  clip-path: polygon(
    var(--corte) 0, 100% 0,
    100% calc(100% - var(--corte)), calc(100% - var(--corte)) 100%,
    0 100%, 0 var(--corte)
  );
}
.formulario__titulo { font-size: 1.24rem; margin: 0; }
.formulario__guia { color: var(--texto-suave); font-size: .92rem; margin: -6px 0 0; }

.campo { display: grid; gap: 6px; }
.campo label {
  font-size: .88rem;
  font-weight: 500;
  color: var(--texto);
}
.campo__opcional { color: var(--texto-tenue); font-weight: 400; }
.campo__pista { font-size: .8rem; color: var(--texto-tenue); margin: 2px 0 0; }

.campo input[type="text"],
.campo input[type="email"],
.campo textarea {
  width: 100%;
  background: var(--fondo-hondo);
  border: 1px solid var(--borde);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: .95rem;
  padding: 11px 13px;
  transition: border-color .16s ease;
}
.campo input::placeholder,
.campo textarea::placeholder { color: var(--texto-tenue); }
.campo input:focus,
.campo textarea:focus { border-color: var(--azul-claro); }
.campo textarea { resize: vertical; min-height: 74px; }

.campo--casilla {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  margin-top: 2px;
}
.campo--casilla input {
  width: 17px; height: 17px;
  margin-top: 3px;
  accent-color: var(--azul);
}
.campo--casilla label { font-size: .86rem; color: var(--texto-suave); font-weight: 400; }

.formulario__error {
  margin: 0;
  padding: 10px 14px;
  background: color-mix(in srgb, #E24B5B 16%, transparent);
  border-left: 3px solid #E24B5B;
  color: var(--coral);
  font-size: .88rem;
}

.formulario__enviar { width: 100%; margin-top: 4px; }

.formulario__alternativa {
  font-size: .82rem;
  color: var(--texto-tenue);
  margin: 0;
  text-align: center;
}

@media (max-width: 940px) {
  .borrado { grid-template-columns: 1fr; }
  .formulario { position: static; }
  .borrado__formulario { order: -1; }
}