/* ============================================================
   AtlasTweaks — Bento Grid + Liquid Glass
   ------------------------------------------------------------
   Paleta de marca conservada del diseño anterior:
   #04081a  #eef1fb  #2c6fff  #5ea0ff  #012A7D  #1e53c8
   ============================================================ */

:root {
  color-scheme: dark;

  /* Fondo e ink */
  --bg: #04081a;
  --text: #eef1fb;
  --muted: #99a3c6;
  /* --dim es sólo para marcas redundantes (el +/− del FAQ).
     Todo texto con significado usa --muted, que pasa AA sobre el vidrio. */
  --dim: #6f7a99;

  /* Señal — paleta de marca, sin cambios */
  --blue: #2c6fff;
  --blue-hi: #5ea0ff;
  --blue-deep: #012A7D;
  --blue-ink: #1e53c8;
  --blue-glow: rgba(44, 111, 255, 0.35);

  /* Funcional: SOLO como dato, nunca como decoración */
  --loss: #e8384f;

  /* Material Liquid Glass */
  --glass: rgba(255, 255, 255, 0.055);
  --glass-hi: rgba(255, 255, 255, 0.095);
  --rim-lit: rgba(255, 255, 255, 0.46);
  --rim-dim: rgba(255, 255, 255, 0.05);
  --rim-tint: rgba(44, 111, 255, 0.22);
  --float: 0 16px 40px rgba(2, 6, 23, 0.55);
  --blur: blur(24px) saturate(180%) brightness(1.06);

  /* Forma — radios concéntricos: interior = exterior − padding */
  --r: 24px;
  --pad: 20px;
  --r-in: calc(var(--r) - var(--pad));
  --gap: 14px;

  /* Tipografía */
  --sans: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
}

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

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  font-family: var(--sans);
  font-variation-settings: 'wdth' 100;
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

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

.container {
  width: min(1180px, 92%);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 200;
  background: var(--blue);
  color: #fff;
  padding: 11px 18px;
  border-radius: 999px;
  font-weight: 600;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 14px;
}

/* ============================================================
   Sustrato — el campo de color que el vidrio refracta.
   Sin esto, el Liquid Glass se ve gris y muerto.
   ============================================================ */

.field {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  transform: translateZ(0);
}

.field span {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
}

.field-1 {
  width: 66vw;
  height: 66vw;
  max-width: 860px;
  max-height: 860px;
  background: radial-gradient(circle, rgba(44, 111, 255, 0.46), transparent 66%);
  top: -22vh;
  right: -10vw;
}

.field-2 {
  width: 62vw;
  height: 62vw;
  max-width: 800px;
  max-height: 800px;
  background: radial-gradient(circle, rgba(1, 42, 125, 0.92), transparent 64%);
  top: 30%;
  left: -14vw;
}

.field-3 {
  width: 50vw;
  height: 50vw;
  max-width: 660px;
  max-height: 660px;
  background: radial-gradient(circle, rgba(44, 111, 255, 0.26), transparent 68%);
  bottom: -16vh;
  right: 2vw;
}

/* Capa media del apilado de profundidad: se desplaza al 0.35x del
   scroll mientras el contenido va al 1x. Esa diferencia es el 3D.
   Alto = viewport + 2 celdas, para que el desplazamiento envuelva. */
.dots {
  position: fixed;
  top: -26px;
  left: 0;
  z-index: -1;
  pointer-events: none;
  will-change: transform;
}

/* ============================================================
   Liquid Glass — el material
   ============================================================ */

.tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r);
  padding: var(--pad);
  /* Velo oscuro bajo el vidrio: el material real atenúa el fondo para que
     el texto encima mantenga contraste, caiga sobre lo que caiga. */
  background:
    linear-gradient(rgba(4, 8, 26, 0.34), rgba(4, 8, 26, 0.34)),
    var(--glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.16),
    inset -1px -1px 0 rgba(255, 255, 255, 0.03),
    var(--float);
  /* Resorte al soltar: el vidrio vuelve pasándose un poco, como un gel */
  transition:
    backdrop-filter 0.42s ease,
    box-shadow 0.4s ease,
    transform 0.5s cubic-bezier(0.34, 1.4, 0.5, 1);
}

/* Canto refractante: un degradado recortado, no una línea de 1px */
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    140deg,
    var(--rim-lit),
    var(--rim-dim) 32%,
    var(--rim-tint) 64%,
    rgba(255, 255, 255, 0.30)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* Los tiles que son enlaces se leen clickeables por el material:
   canto mas brillante en reposo, y respuesta de gel al presionar. */
.tile-tap {
  cursor: pointer;
  --rim-lit: rgba(255, 255, 255, 0.6);
}

/* El vidrio se hincha hacia el cursor */
.tile-tap:hover {
  transform: translateY(-4px) scale(1.006);
}

/* Y se aplasta al presionar, más en alto que en ancho: eso es gel,
   no un botón que se encoge en proporción. */
.tile-tap:active {
  transform: translateY(-1px) scale(0.986, 0.972);
  transition-duration: 0.07s;
}



.tile > * {
  position: relative;
  z-index: 2;
}

.tile-hi {
  background:
    linear-gradient(rgba(4, 8, 26, 0.3), rgba(4, 8, 26, 0.3)),
    var(--glass-hi);
  --rim-lit: rgba(255, 255, 255, 0.62);
  --rim-tint: rgba(94, 160, 255, 0.34);
}

/* ============================================================
   Bento
   ============================================================ */

.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}

.t3 { grid-column: span 3; }
.t4 { grid-column: span 4; }
.t5 { grid-column: span 5; }
.t6 { grid-column: span 6; }
.t7 { grid-column: span 7; }
.t8 { grid-column: span 8; }
.t12 { grid-column: span 12; }
.r2 { grid-row: span 2; }
.r3 { grid-row: span 3; }

/* ============================================================
   Tipografía
   ============================================================ */

h1,
h2,
h3,
h4 {
  font-family: var(--sans);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

h1 {
  font-variation-settings: 'wdth' 118;
  font-size: clamp(2.5rem, 5.6vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}

h2 {
  font-variation-settings: 'wdth' 114;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  letter-spacing: -0.03em;
}

h3 {
  font-variation-settings: 'wdth' 104;
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}

h4 {
  font-variation-settings: 'wdth' 104;
  font-size: 0.9rem;
  font-weight: 600;
}

.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'zero' 1;
  letter-spacing: -0.02em;
}

.section {
  padding: 96px 0;
}

.section-head {
  margin-bottom: 36px;
}

/* La nota en mono va encima del titular, y ambos arrancan en el mismo
   borde izquierdo que las tarjetas. Antes vivía en un rail de 3
   columnas que empujaba el h2 294px a la derecha: en móvil el media
   query lo colapsaba, pero en escritorio se leía como mal centrado. */
.section-note {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--muted);
  margin-bottom: 10px;
}

.section-sub {
  color: var(--muted);
  font-size: 1rem;
  max-width: 58ch;
  margin-top: 12px;
}

/* ============================================================
   Botones
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: 999px;
  font-family: var(--sans);
  font-variation-settings: 'wdth' 104;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 0.22s cubic-bezier(0.2, 0.9, 0.25, 1.15),
    box-shadow 0.22s ease,
    background 0.22s ease,
    backdrop-filter 0.3s ease;
}

.btn svg {
  width: 18px;
  height: 18px;
}

.btn:active {
  transform: scale(0.965);
  transition-duration: 0.08s;
}

/* El arco especular va como capa de background, no como ::before:
   el texto del boton es un nodo suelto y no se puede apilar sobre
   un pseudo-elemento posicionado. */
.btn-primary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 52%),
    linear-gradient(160deg, var(--blue), var(--blue-ink));
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 6px 20px var(--blue-glow);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 10px 30px var(--blue-glow);
}

/* Al presionar, el arco se aplana: el vidrio flexiona */
.btn-primary:active {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 52%),
    linear-gradient(160deg, var(--blue-ink), var(--blue-ink));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 2px 6px rgba(0, 0, 0, 0.3),
    0 2px 8px var(--blue-glow);
}

.btn-glass {
  background: var(--glass-hi);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  color: var(--text);
  box-shadow:
    inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.3),
    inset -1.5px -1.5px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px rgba(94, 160, 255, 0.1);
}

/* El vidrio del boton tambien engorda al interactuar */
.btn-glass:hover {
  transform: translateY(-2px);
  color: var(--blue-hi);
  backdrop-filter: blur(24px) saturate(190%) brightness(1.12);
  -webkit-backdrop-filter: blur(24px) saturate(190%) brightness(1.12);
  box-shadow:
    inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.44),
    inset -1.5px -1.5px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(94, 160, 255, 0.2);
}

.btn-glass:active {
  box-shadow:
    inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.22),
    inset 0 2px 8px rgba(0, 0, 0, 0.28);
}

.btn-block {
  width: 100%;
}

.btn-lg {
  padding: 16px 34px;
  font-size: 1.03rem;
}

/* ============================================================
   Header — cápsula flotante; el contenido pasa por debajo
   ============================================================ */

.header {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 100;
  pointer-events: none;
}

/* La cabecera son dos islas flotantes con aire real entre ellas.
   pointer-events va en las islas y NO en la barra: si estuviera en la
   barra, el hueco central capturaría los clics del contenido de abajo. */
.nav-bar {
  display: flex;
  /* stretch, no center: así ambas islas comparten la altura de la más
     alta y sus cantos quedan alineados. */
  align-items: stretch;
  justify-content: space-between;
  gap: 14px;
}

.nav-island {
  position: relative;
  pointer-events: auto;
  display: flex;
  align-items: center;
  border-radius: 999px;
}

/* Menos aire del lado de la marca que del lado del texto: el emblema es
   redondo y tolera acercarse al canto curvo; los astiles rectos de
   "Tweaks", no. */
.logo-island {
  padding: 6px calc(var(--cap) * 1.3) 6px var(--cap);
}

.menu-island {
  gap: 24px;
  padding: 7px 8px 7px 20px;
}

/* El vidrio vive en un pseudo-elemento a propósito: si el backdrop-filter
   estuviera en la isla, ésta sería bloque contenedor y el cajón móvil
   (position: fixed) se posicionaría contra la cápsula en vez del viewport. */
.nav-island::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--glass);
  /* Variable para que el JS pueda enchufar el filtro SVG de refracción:
     el estilo de un ::after no es accesible desde JS, pero una custom
     property del padre sí hereda hasta acá. */
  backdrop-filter: var(--nav-optics, blur(20px) saturate(180%) brightness(1.08));
  -webkit-backdrop-filter: var(--nav-optics, blur(20px) saturate(180%) brightness(1.08));
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.2),
    inset -1px -1px 0 rgba(255, 255, 255, 0.04),
    0 10px 30px rgba(2, 6, 23, 0.5);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.nav-island::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(140deg, var(--rim-lit), var(--rim-dim) 36%, var(--rim-tint) 68%, rgba(255, 255, 255, 0.28));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* ── Panel de la hamburguesa ─────────────────────────────────
   Se separó de .nav-menu porque ahora los dos coexisten: la fila
   son las secciones de la portada y el panel son las otras
   páginas. Antes se turnaban por punto de corte y podían ser el
   mismo elemento. El material (clip-path, lente, filo, destello,
   escalonado) es exactamente el que ya tenía. */


/* En escritorio el panel sólo lleva las dos páginas, así que va angosto.
   En móvil se ensancha para albergar también las secciones. */
.nav-panel {
  width: 216px;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 12px;
  border-radius: 24px;
  background:
    linear-gradient(rgba(4, 8, 26, 0.44), rgba(4, 8, 26, 0.44)),
    var(--glass);
  backdrop-filter: var(--nav-optics, blur(18px) saturate(185%) brightness(1.08));
  -webkit-backdrop-filter: var(--nav-optics, blur(18px) saturate(185%) brightness(1.08));
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.2),
    inset -1px -1px 0 rgba(255, 255, 255, 0.04),
    0 18px 50px rgba(2, 6, 23, 0.6);
  /* Cerrado: sólo la huella de la hamburguesa, arriba a la derecha */
  clip-path: inset(0 6px calc(100% - 36px) calc(100% - 44px) round 18px);
  visibility: hidden;
  transition:
    clip-path 0.5s cubic-bezier(0.34, 1.32, 0.5, 1),
    visibility 0s linear 0.34s;
}

.nav-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(140deg, var(--rim-lit), var(--rim-dim) 36%, var(--rim-tint) 68%, rgba(255, 255, 255, 0.28));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.nav-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 88% 0%, rgba(255, 255, 255, 0.24), transparent 62%);
  opacity: 0;
  pointer-events: none;
}

.nav-open .nav-panel {
  clip-path: inset(0 round 24px);
  visibility: visible;
  transition:
    clip-path 0.52s cubic-bezier(0.34, 1.32, 0.5, 1),
    visibility 0s;
}

.nav-open .nav-panel::after {
  animation: panel-sheen 0.6s ease-out;
}

@keyframes panel-sheen {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Cada ítem entra escalonado. El índice va explícito porque los ocho
   viven en tres grupos distintos: :nth-of-type reinicia dentro de cada
   <ul> —dejaba FAQ sin retardo y repetía los de las páginas— y el
   Discord ni siquiera es <li>. */
.nav-panel li,
.nav-panel a.panel-discord {
  opacity: 0;
  transform: translateY(-6px);
  /* El Discord es a la vez ítem y enlace, así que su transition lleva
     también el hover: si no, la de .nav-panel .panel-link —que empata en
     especificidad y va después— reemplazaba la entrada y aparecía de
     golpe. Por lo mismo va por a.panel-discord y no por la clase sola. */
  transition:
    opacity 0.22s ease,
    transform 0.34s cubic-bezier(0.34, 1.3, 0.5, 1),
    background 0.2s ease,
    color 0.2s ease;
}

.nav-open .nav-panel li,
.nav-open .nav-panel a.panel-discord {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.08s + var(--i, 0) * 0.042s);
}

/* Escritorio: sólo se ven las dos páginas, así que la cascada arranca
   en ellas. En móvil se reasigna el orden completo. */
.panel-pages li:nth-child(1) { --i: 0; }
.panel-pages li:nth-child(2) { --i: 1; }

/* En escritorio el panel sólo lleva las otras páginas: las secciones
   están en la fila y Discord ya tiene su botón en la isla.
   El Discord va por el elemento (a.panel-discord) y no por la clase
   sola: como también es .panel-link, empataba en especificidad con
   .nav-panel .panel-link y perdía por orden, quedando visible. */
.nav-panel .panel-sections,
.nav-panel a.panel-discord {
  display: none;
}

.panel-pages + .panel-sections,
.panel-sections + .panel-pages,
.panel-pages + .panel-discord,
.panel-sections + .panel-discord {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.panel-discord {
  align-items: center;
  gap: 11px;
  color: var(--blue-hi);
}

.panel-discord svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

.nav-panel .panel-link {
  display: block;
  font-size: 1.02rem;
  padding: 11px 12px;
  border-radius: 13px;
  transition: background 0.2s ease, color 0.2s ease;
}

.header::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(4, 8, 26, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.34s ease;
}

.nav-open .header::after {
  opacity: 1;
  pointer-events: auto;
}

.nav-panel .panel-link:hover,
.nav-panel .panel-link:focus-visible {
  background: rgba(255, 255, 255, 0.07);
}
/* Píldora de gel que fluye entre los enlaces, como el Liquid Glass de
   iOS: el vidrio no salta de un ítem a otro, se estira y se asienta. */
.nav-gel {
  position: absolute;
  left: 0;
  top: 50%;
  height: 32px;
  width: var(--gel-w, 0px);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.3),
    inset -1px -1px 0 rgba(255, 255, 255, 0.05);
  transform: translate3d(var(--gel-x, 0), -50%, 0);
  opacity: 0;
  pointer-events: none;
  will-change: transform, width;
  transition:
    transform 0.44s cubic-bezier(0.34, 1.32, 0.5, 1),
    width 0.44s cubic-bezier(0.34, 1.32, 0.5, 1),
    opacity 0.26s ease;
}

/* Visible en cuanto el JS la coloca sobre el enlace activo */
.nav-menu.gel-ready .nav-gel {
  opacity: 1;
}

.header.scrolled .nav-island::after {
  background: rgba(255, 255, 255, 0.075);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.24),
    inset -1px -1px 0 rgba(255, 255, 255, 0.04),
    0 14px 38px rgba(2, 6, 23, 0.62);
}

/* El bloqueo marca + logotipo se deriva de UNA unidad: la altura de
   mayúscula del logotipo (cap height). Medida sobre Archivo 700 con
   'wdth' 112 ya renderizada: cap = 0.6875em.

     alto de la marca  = 2,30 x cap   (deja el anillo en 1,67 x cap)
     ancho de la marca = alto x 0,8604   proporción real del dibujo
     separación        = 0,72 x cap
     aire de la cápsula = 1,0 x cap a la izquierda, 1,3 x cap a la derecha

   La marca es un emblema en diagonal: su caja la fijan las puntas del
   rayo, no el anillo, que sólo ocupa el 72,7% del alto. Por eso la caja
   se mide contra el anillo y no contra sus extremos — si no, la marca
   parece enorme y las puntas se comen el aire de la cápsula.

   Cambiando sólo --cap se reescala el bloqueo entero sin tocar razones. */
.logo {
  --cap: 12.1px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--cap) * 0.72);
  font-family: var(--sans);
  font-variation-settings: 'wdth' 112;
  font-size: calc(var(--cap) / 0.6875);
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* El texto va envuelto para que sea UN solo item de flex. Suelto, el
   nodo "Atlas" y el <span> eran dos items y el gap de 9px caía entre
   ellos: de ahí el espacio en "Atlas Tweaks". */
.logo-text {
  white-space: nowrap;
}

.logo-text b {
  font-weight: inherit;
  color: var(--blue-hi);
}

/* El PNG trae un margen transparente enorme: sobre 6144x4096, el dibujo
   ocupa 2293x2665 px en (1951, 650). Es decir el 37,32% del ancho y el
   65,06% del alto, descentrado 31,75% a la izquierda y 15,87% arriba.

   Estos números recortan ese margen para que el dibujo llene su caja:
     zoom     = 100/37,32 = 267,95%   ·   100/65,06 = 153,71%
     posición = 31,75/(100-37,32) = 50,65%   ·   15,87/(100-65,06) = 45,42%

   Describen ESTE archivo. Si se reemplaza el logo hay que volver a medir
   la caja del dibujo y recalcular también la proporción 0,8604. */
.logo-mark {
  flex-shrink: 0;
  display: block;
  height: calc(var(--cap) * 2.3);
  width: calc(var(--cap) * 2.3 * 0.8604);
  background-image: url("logo_altas_tweaks.png");
  background-repeat: no-repeat;
  background-size: 267.95% 153.71%;
  background-position: 50.65% 45.42%;
}

.logo-island {
  --cap: 15.2px;
}

.footer .logo {
  --cap: 13.75px;
}

.nav-menu {
  position: relative;
  display: flex;
  gap: 26px;
  margin-left: auto;
}

.nav-link {
  position: relative;
  z-index: 1;
  padding: 4px 12px;
  font-size: 0.92rem;
  white-space: nowrap;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: var(--text);
}

.nav-link.active {
  color: var(--text);
}




.nav-cta {
  padding: 9px 18px;
  font-size: 0.87rem;
}


.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}

.nav-toggle span {
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  padding: 150px 0 70px;
}

.hero-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 52px);
  min-height: 400px;
}

.hero-tile h1 {
  max-width: 15ch;
}

.hero-sub {
  color: var(--muted);
  font-size: 1.06rem;
  max-width: 54ch;
  margin-top: 22px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

/* Traza de frametime: el momento memorable de la página */
.trace-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 18px;
}

.trace-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.trace-label {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--muted);
}

.trace-row svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.trace-line {
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* pathLength="1" en el markup: el dibujado no depende del largo real */
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.trace-bad {
  stroke: var(--loss);
}

.trace-good {
  stroke: var(--blue-hi);
  filter: drop-shadow(0 0 6px var(--blue-glow));
}

.trace-drawn .trace-bad {
  animation: draw 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.trace-drawn .trace-good {
  animation: draw 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.45s forwards;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* ============================================================
   Benchmarks
   ============================================================ */

/* ── Cama de color ───────────────────────────────────────────
   El problema de los iconos no era el recorte: era que un cuadrado
   opaco rosa, rojo o naranja flotaba sobre vidrio azul oscuro, sin
   nada que lo conectara al fondo. Poniendo detrás sus mismos colores
   el cuadrado deja de leerse como un error y pasa a ser un póster.

   La cama es el propio archivo del juego, a sangre y desenfocado. No
   necesita resolución —es atmósfera, no dibujo—, y por eso funciona
   incluso con Warzone, que mide 221 px.

   Va en un <span> y no en ::after porque hacen falta dos capas: la
   imagen desenfocada y, encima, un velo nítido. Si el velo fuera hijo
   del mismo elemento, el filter del padre también lo desenfocaría.

   El apilado ya lo daba .tile: el filo va en z 3, el contenido en z 2
   por .tile > *, así que a la cama le toca z 1. Y .tile ya trae
   overflow:hidden, que recorta el desenfoque contra el radio. */
.bench > .bench-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.bench-art::before {
  content: "";
  position: absolute;
  /* Se pasa del borde para que el desenfoque no deje un halo claro */
  inset: -10%;
  /* El zoom de la cama va por background-size y NO por transform. Sirve
     para elegir QUÉ zona del dibujo se vuelve atmósfera —CS2 lo necesita,
     su icono es 40% silueta blanca y promediada tiñe todo de niebla—,
     pero con transform:scale(2.9) el navegador rasteriza una superficie
     8 veces mayor antes de desenfocarla, y eso costaba frames. Con
     background-size sólo rasteriza la caja real. */
  background:
    var(--art)
    var(--bed-pos, center) / var(--bed-size, cover)
    no-repeat;
  /* El desenfoque es moderado a propósito. Con 26 px cada imagen se
     promediaba hasta volverse barro: CS2 caía a saturación 0,16 y
     Warzone a 0,04 —gris puro, que por definición no se puede saturar—.
     A 16 px sobrevive la estructura de color de cada juego: el corte
     naranja/azul de CS2, el verde del bloque de Minecraft, el olivo del
     key art de Warzone. Y sigue siendo suficiente para tapar que Warzone
     mide 221 px. */
  filter:
    blur(var(--art-blur, 16px))
    saturate(var(--art-sat, 1.5))
    brightness(var(--art-lift, 1));
}

/* El velo hace dos trabajos: garantiza el contraste del texto y mete a
   los seis juegos en el mismo rango tonal, que es lo que hace que
   naranja, rosa y celeste conviyan en una página azul. */
.bench-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(4, 8, 26, 0.52) 0%,
    rgba(4, 8, 26, 0.68) 46%,
    rgba(4, 8, 26, 0.88) 100%
  );
}

.bench-head {
  display: flex;
  align-items: center;
  gap: 13px;
}

/* El chip va envuelto: el recorte del marco se hace escalando la imagen
   dentro de una caja que no se mueve. Escalando el <img> directamente
   se escalaría también su borde redondeado y el marco seguiría dentro. */
.bench-chip {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    0 5px 16px rgba(2, 6, 23, 0.55);
}

/* --chip-crop se lleva por delante los marcos blancos que traen pegados
   Valorant (30 px sobre 600) y Rust (26 px sobre 736), sin tocar los
   archivos. Va acá y no en la caja para que el redondeo no se escale. */
.bench-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--chip-crop, 1));
}

.bench-head h3 {
  flex: 1;
  min-width: 0;
}

.gain {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--blue-hi);
}

.bench-row {
  display: grid;
  grid-template-columns: 78px 1fr 68px;
  align-items: center;
  gap: 12px;
}

.bench-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
}

.bench-bar {
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.bench-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  transition: width 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.bench-after {
  background: linear-gradient(90deg, var(--blue), var(--blue-hi));
  box-shadow: 0 0 14px var(--blue-glow);
}

.bench-base {
  background: var(--loss);
  opacity: 0.62;
}

.bench-value {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: right;
}

.bench-value-before {
  color: var(--muted);
}

.bench-value-after {
  color: var(--text);
  font-weight: 500;
}

/* Tile grande: gráfico completo con eje */
.bench-lg {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.bench-lg .bench-chip {
  width: 88px;
  height: 88px;
  border-radius: 23px;
}

.bench-lg .bench-head h3 {
  font-size: 1.3rem;
  font-variation-settings: 'wdth' 110;
}

/* La ganancia mayor del set manda: es el único número de la página
   a este tamaño, y es lo que diferencia el tile grande del resto. */
.bench-big-gain {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(3rem, 5.6vw, 4.4rem);
  font-weight: 500;
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--text);
}

/* Las barras se agrupan en una franja asentada sobre la cama: es donde
   se garantiza el contraste del dato, que es lo único que no puede
   ceder terreno al arte.

   Sin backdrop-filter a propósito: anidado dentro de un tile muestrearía
   el tile y no la página, igual que pasa con .diag-chip. Un lavado sólido
   da el mismo asiento sin mentir sobre el material.

   El radio es --r-in por la regla de radios concéntricos: la franja se
   apoya en el borde del padding, así que su curva es la exterior menos
   el padding. */
.bench-plot {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: auto;
  padding: 15px 17px;
  border-radius: var(--r-in);
  background: rgba(3, 6, 20, 0.5);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.09),
    inset -1px -1px 0 rgba(255, 255, 255, 0.02);
}

.bench-lg .bench-bar {
  height: 14px;
}

.bench-lg .bench-row {
  grid-template-columns: 82px 1fr 88px;
}

.bench-lg .bench-value {
  font-size: 0.94rem;
}

/* Tile ancho de 1 fila: ficha y gráfico lado a lado */
.bench-wide {
  display: grid;
  grid-template-columns: minmax(150px, 0.85fr) 1.6fr;
  gap: 28px;
  align-items: center;
}

.bench-wide .bench-head {
  flex-wrap: wrap;
  gap: 10px;
}

.bench-wide .bench-chip {
  width: 54px;
  height: 54px;
  border-radius: 14px;
}

.bench-wide .bench-head h3 {
  font-size: 1.15rem;
  font-variation-settings: 'wdth' 110;
  flex: 1 1 auto;
}

/* La ganancia baja a su propia línea y manda en la columna izquierda */
.bench-wide .gain {
  flex: 1 1 100%;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
}

.bench-wide .bench-plot {
  margin-top: 0;
  gap: 12px;
}

/* Tiles chicos: las mismas dos barras y la misma escala que el
   grande, para que el largo signifique lo mismo en toda la seccion. */
/* Con cama de color, 184 px quedaban ahogados: el arte necesita campo */
.bench-sm {
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-height: 215px;
}

.bench-sm .gain {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text);
}

.bench-sm .bench-plot {
  gap: 9px;
}

.bench-sm .bench-row {
  grid-template-columns: 62px 1fr 34px;
  gap: 8px;
}

.bench-sm .bench-bar {
  height: 7px;
}

/* La etiqueta no se parte en dos líneas: desalinea las filas */
.bench-sm .bench-label {
  font-size: 0.62rem;
  white-space: nowrap;
}

.bench-sm .bench-value {
  font-size: 0.75rem;
}

/* Tile de ficha técnica */
.rig {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.rig-label {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--muted);
}

.rig-spec {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.5;
}

.rig-spec strong {
  color: var(--text);
  font-weight: 500;
}

/* ============================================================
   Beneficios — molinete 8/4 · 4/8
   ============================================================ */

.benefit {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 190px;
}

/* Ficha de vidrio en vez de cuadrado azul plano: el icono forma
   parte del material en vez de flotar encima. Radio concentrico. */
.benefit-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--r-in);
  background: rgba(255, 255, 255, 0.055);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.18),
    inset -1px -1px 0 rgba(255, 255, 255, 0.03);
  color: var(--blue-hi);
}

/* Set trazado: mismo idioma que las hairlines de 1px, la traza de
   frametime y los numerales monoespaciados. */
.benefit-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.benefit-icon svg .solid {
  fill: currentColor;
  stroke: none;
}

.benefit h3 {
  font-size: 1.22rem;
  font-variation-settings: 'wdth' 110;
  margin-top: auto;
}

.benefit p {
  color: var(--muted);
  font-size: 0.94rem;
  max-width: 46ch;
}

/* Los tiles anchos se leen en horizontal y con titular mayor:
   ningún tile vecino comparte tratamiento interno. */
.benefit-wide {
  display: grid;
  grid-template-columns: auto 1fr;
  align-content: center;
  column-gap: 22px;
  row-gap: 10px;
}

.benefit-wide .benefit-icon {
  grid-row: span 2;
  width: 54px;
  height: 54px;
}

.benefit-wide .benefit-icon svg {
  width: 28px;
  height: 28px;
}

.benefit-wide h3 {
  margin-top: 0;
  align-self: end;
  font-size: 1.6rem;
  font-variation-settings: 'wdth' 112;
}

.benefit-wide p {
  max-width: 52ch;
}

/* ============================================================
   Franja de planes (index)
   ============================================================ */

/* ============================================================
   Franja de datos del hero
   ============================================================ */

/* La cifra y su contexto van juntos a propósito: +107% es el mejor
   caso, no la media. Suelta sería la misma promesa vaga que le
   criticamos a la competencia. */
.hero-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.hero-stat-num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text);
}

.hero-stat-rig {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text);
}

.hero-stat-label {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--muted);
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
}

.hero-trust span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-trust span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue-hi);
  flex-shrink: 0;
}

/* ============================================================
   Proceso — la sesión paso a paso
   ============================================================ */

/* Aquí la numeración 01–05 sí está justificada: es una secuencia. */
.step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 168px;
}

.step-num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
  color: var(--blue-hi);
}

.step h3 {
  margin-top: auto;
  font-size: 1.08rem;
  font-variation-settings: 'wdth' 108;
}

.step p {
  color: var(--muted);
  font-size: 0.92rem;
  max-width: 46ch;
}

/* ============================================================
   Diagnóstico interactivo
   ============================================================ */

.diag-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.diag-intro h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}

.diag-intro p {
  color: var(--muted);
  max-width: 34ch;
}

.diag {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(22px, 3vw, 32px);
}

.diag-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Ficha de vidrio ligera: sin backdrop-filter propio, porque anidarlo
   dentro de un tile haría que muestreara el tile y no la página. Toma
   el material por sombras internas y la misma física de presión. */
.diag-chip {
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.16),
    inset -1px -1px 0 rgba(255, 255, 255, 0.03);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition:
    background 0.2s ease,
    box-shadow 0.25s ease,
    transform 0.45s cubic-bezier(0.34, 1.4, 0.5, 1);
}

.diag-chip:hover {
  background: rgba(255, 255, 255, 0.09);
}

.diag-chip:active {
  transform: scale(0.985, 0.972);
  transition-duration: 0.07s;
}

.diag-chip[aria-pressed="true"] {
  background: rgba(44, 111, 255, 0.18);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 0 0 1px rgba(94, 160, 255, 0.45);
  color: #fff;
}

.diag-answer {
  color: var(--muted);
  font-size: 0.95rem;
  min-height: 3.4em;
  max-width: 52ch;
}

.diag .btn {
  align-self: flex-start;
}

/* Segunda vía de contacto para quien no quiere escribir por WhatsApp */
.diag-alt {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--muted);
  margin-top: 4px;
}

.diag-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.diag-social {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.16),
    inset -1px -1px 0 rgba(255, 255, 255, 0.03);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.diag-social svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.diag-social:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--blue-hi);
  transform: translateY(-2px);
}

/* ============================================================
   Reseñas
   ============================================================ */

.review {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.review-stars {
  color: var(--blue-hi);
  font-size: 0.9rem;
  letter-spacing: 3px;
}

.review-text {
  font-size: 1rem;
  line-height: 1.6;
  max-width: 44ch;
}

.review-lead .review-text {
  font-size: 1.32rem;
  font-variation-settings: 'wdth' 106;
  line-height: 1.45;
  letter-spacing: -0.02em;
  max-width: 26ch;
}

.review-author {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--muted);
}

.review-author strong {
  display: block;
  color: var(--text);
  font-weight: 500;
  font-size: 0.82rem;
}

/* ============================================================
   FAQ
   ============================================================ */

.faq-tile {
  padding: 8px var(--pad);
}

.faq-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.faq-item:last-child {
  border-bottom: 0;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 19px 0;
  cursor: pointer;
  list-style: none;
  font-weight: 500;
  font-size: 0.98rem;
  transition: color 0.2s ease;
}

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

.faq-item summary:hover {
  color: var(--blue-hi);
}

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 1.15rem;
  color: var(--dim);
  transition: transform 0.25s ease, color 0.25s ease;
}

.faq-item[open] summary::after {
  content: "−";
  color: var(--blue-hi);
}

.faq-body {
  padding: 0 0 20px;
  color: var(--muted);
  font-size: 0.93rem;
  max-width: 62ch;
}

.faq-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}

.faq-side h3 {
  font-size: 1.25rem;
  font-variation-settings: 'wdth' 110;
}

.faq-side p {
  color: var(--muted);
  font-size: 0.92rem;
}

.faq-side .btn {
  margin-top: 8px;
  align-self: flex-start;
}

/* ============================================================
   CTA final
   ============================================================ */

.cta-final {
  padding: 0 0 96px;
}

.cta-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: clamp(32px, 5vw, 60px);
}

.cta-tile h2 {
  max-width: 16ch;
}

.cta-tile p {
  color: var(--muted);
  max-width: 48ch;
}

.cta-tile .btn {
  margin-top: 12px;
}

/* ============================================================
   Página de servicios
   ============================================================ */

.page-hero {
  padding: 160px 0 34px;
}

.page-hero .section-note {
  display: block;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 14px;
}

.page-hero h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
}

.page-hero p {
  color: var(--muted);
  font-size: 1.04rem;
  max-width: 52ch;
  margin-top: 16px;
}

.section-flow {
  padding-top: 34px;
}

.plan {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 30px 26px;
}

/* En la portada las tarjetas llevan sólo 2 viñetas, así que la lista no
   necesita estirarse para igualar alturas. */
#planes .plan-list {
  flex: 0 1 auto;
}

#planes .plan .btn {
  margin-top: auto;
}

/* Pro rompe la fila: la jerarquía la marca la altura y la densidad
   del material, no un scale() en hover. */
.plan-featured {
  margin-top: -22px;
  padding-bottom: 52px;
}

.plan-flag {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--bg);
  background: var(--blue-hi);
  padding: 6px 14px;
  border-bottom-left-radius: 12px;
}

.plan-eyebrow {
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--blue-hi);
}

.plan h3 {
  font-size: 1.3rem;
  font-variation-settings: 'wdth' 110;
}

.plan-desc {
  color: var(--muted);
  font-size: 0.9rem;
  min-height: 2.7em;
}

.plan-price {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 2.6rem;
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1;
}

.plan-terms {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 8px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.plan-list {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.plan-list li {
  padding: 12px 0;
  font-size: 0.89rem;
  color: var(--muted);
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  line-height: 1.55;
}

.plan-list li:last-child {
  border-bottom: 0;
}

.plan-list .included {
  color: var(--text);
  font-weight: 500;
}

.plan-more {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--blue-hi);
  margin-top: 12px;
}

.plan-more:hover {
  color: var(--text);
}

.plan .btn {
  margin-top: 14px;
}

/* ============================================================
   Página quiénes somos
   ============================================================ */

.about-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: clamp(26px, 3.5vw, 44px);
}

.about-tile p {
  color: var(--muted);
  font-size: 1.02rem;
  max-width: 58ch;
}

.about-tile p:first-of-type {
  color: var(--text);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-variation-settings: 'wdth' 106;
  line-height: 1.45;
  letter-spacing: -0.02em;
  max-width: 34ch;
}

.value {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.value .benefit-icon {
  flex-shrink: 0;
}

.value h3 {
  font-size: 1.02rem;
  margin-bottom: 4px;
}

.value p {
  color: var(--muted);
  font-size: 0.9rem;
}

/* ============================================================
   Footer
   ============================================================ */

.footer {
  padding: 44px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(4, 8, 26, 0.5);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 40px;
}

.footer-brand p {
  color: var(--muted);
  font-size: 0.88rem;
  max-width: 32ch;
  margin: 14px 0 18px;
}

.socials {
  display: flex;
  gap: 9px;
}

.socials a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.055);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.12);
  color: var(--muted);
  transition: transform 0.2s ease, color 0.2s ease;
}

.socials a:hover {
  transform: translateY(-3px);
  color: var(--blue-hi);
}

.socials svg {
  width: 17px;
  height: 17px;
}

.footer-col h4 {
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--muted);
  margin-bottom: 14px;
}

.footer-col a {
  display: block;
  font-size: 0.88rem;
  color: var(--muted);
  padding: 5px 0;
  transition: color 0.2s ease;
}

.footer-col a:hover {
  color: var(--text);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 20px 0;
}

.footer-bottom p {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--muted);
}

/* ============================================================
   Reveal
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1080px) {
  .bento {
    grid-template-columns: repeat(6, 1fr);
  }

  .t3 { grid-column: span 3; }
  .t4 { grid-column: span 3; }
  .t5 { grid-column: span 6; }
  .t6 { grid-column: span 6; }
  .t7 { grid-column: span 6; }
  .t8 { grid-column: span 6; }
  .r2,
  .r3 { grid-row: span 1; }

  .plan-featured {
    margin-top: 0;
    padding-bottom: 30px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* La navegación colapsa antes que el resto del layout: con dos islas
   (dos paddings más el aire entre ellas) los enlaces se quedan sin sitio
   mucho antes que el contenido.

   El punto de corte está medido, no estimado: la fila necesita 222 + 14
   + 695 = 931 px de contenedor, y el contenedor sólo llega ahí a partir
   de ~1030 px de ventana. Estaba en 900, así que entre 900 y 1030 la
   isla derecha se salía de la pantalla y sólo la tapaba el overflow-x
   del body. 1060 deja unos 30 px de holgura. */
@media (max-width: 1060px) {
  /* La fila no cabe: sus enlaces se muestran dentro del panel */
  .nav-cta,
  .nav-menu {
    display: none;
  }

  .nav-panel .panel-sections {
    display: block;
  }

  .nav-panel a.panel-discord {
    display: flex;
  }

  /* Los ocho ítems entran en una sola cascada, en orden de lectura. */
  .panel-sections li:nth-child(1) { --i: 0; }
  .panel-sections li:nth-child(2) { --i: 1; }
  .panel-sections li:nth-child(3) { --i: 2; }
  .panel-sections li:nth-child(4) { --i: 3; }
  .panel-sections li:nth-child(5) { --i: 4; }
  .panel-pages li:nth-child(1) { --i: 5; }
  .panel-pages li:nth-child(2) { --i: 6; }
  .panel-discord { --i: 7; }

  .nav-panel {
    width: min(272px, calc(92vw - 32px));
  }

  /* La isla derecha se encoge hasta ser sólo la hamburguesa: se acaba
     la franja de vidrio vacía que ocupaba todo el ancho. */
  .menu-island {
    padding: 7px;
    gap: 0;
  }

  .logo-island {
    --cap: 13px;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  /* Discord entra al cajón: en móvil no aparecía en ninguna parte */




  /* PANEL, no cajón: el vidrio crece desde la hamburguesa en vez de
     entrar desde el borde de la pantalla. El control se convierte en el
     panel, que es lo que hace iOS 26.

     Se revela con clip-path y NO cambiando de tamaño, a propósito: el
     mapa del lente se estira a la caja del elemento, así que si la caja
     cambiara durante la animación el bisel se deformaría a mitad de
     vuelo. Con clip-path la caja es fija y la refracción es correcta en
     todo momento.

     Va absoluto contra .menu-island (que ya es position: relative), así
     queda anclado a la hamburguesa sin números mágicos. */
  /* Filo especular, el mismo material que las islas */
  /* Destello: luz que atraviesa el vidrio desde la esquina del botón
     mientras el panel se abre, y se apaga al asentarse. */
  /* Los enlaces entran escalonados, detrás del vidrio */


  /* El velo oscurece el fondo y absorbe el toque para cerrar. Va como
     pseudo-elemento del header: sin marcado nuevo en las tres páginas,
     y sus eventos apuntan al propio header, que es donde escucha el JS. */
  /* En el cajón móvil no hay fila de enlaces que recorrer */
  .nav-gel {
    display: none;
  }

  .nav-link.active {
    color: var(--blue-hi);
  }
}

@media (max-width: 780px) {
  :root {
    --pad: 18px;
    --r: 20px;
  }

  .section {
    padding: 68px 0;
  }

  .cta-final {
    padding-bottom: 68px;
  }

  .hero {
    padding: 120px 0 40px;
  }

  .page-hero {
    padding: 128px 0 26px;
  }



}

@media (max-width: 620px) {
  .bento {
    grid-template-columns: 1fr;
  }

  .t3,
  .t4,
  .t5,
  .t6,
  .t7,
  .t8,
  .t12 {
    grid-column: 1 / -1;
  }

  .hero-tile {
    min-height: 0;
  }

  .hero-actions .btn {
    flex: 1 1 100%;
  }

  .bench-wide {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .diag-options {
    grid-template-columns: 1fr;
  }

  .bench-row {
    grid-template-columns: 70px 1fr 58px;
    gap: 9px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .bench-fill {
    transition: none;
  }

  .trace-line {
    stroke-dashoffset: 0;
    animation: none !important;
  }

  .tile,
  .btn,
  .nav-gel,
  .socials a {
    transition: none;
  }

  /* El panel aparece y desaparece; no crece ni escalona */
  .nav-panel,
  .nav-panel li,
  .nav-panel a.panel-discord,
  .header::after {
    transition: none !important;
    transition-delay: 0s !important;
  }

  .nav-open .nav-panel::after {
    animation: none;
  }

  .tile-tap:hover,
  .tile-tap:active {
    transform: none;
  }
}