/* =========================================================================
   WIXPON — wixpon.com
   -------------------------------------------------------------------------
   PALETA (revisada el 23-09-2026; la versión anterior era papel crema con
   serif y acento terracota, y se leía como un folleto impreso).
   Claro: blanco con grises fríos. Oscuro: grafito con un punto de azul, el
   color de un rack a oscuras. Un solo acento con peso, el VERDE ÓPTICO del
   enlace levantado, y tres colores que NO son decoración porque ya significan
   algo en el panel del operador: verde online, ámbar aviso, rojo corte. El
   azul queda para el camino de la señal en los diagramas.
   Todas las parejas texto/fondo de esta hoja están medidas: pasan AA (4.5:1)
   en los dos modos, incluidas las que van sobre un tinte.

   TIPOGRAFÍA. Dos papeles:
     · sans -> todo lo que se lee: titulares, prosa, menús, botones, etiquetas.
               Segoe UI Variable primero (Windows 11), luego la del sistema.
     · mono -> solo lo que se mide o se copia: comandos, seriales, direcciones
               IP y cifras que tienen que alinearse en columna.
   Todo del sistema: cero peticiones, cero CDN, cero parpadeo de fuente.

   MAQUETACIÓN. Rejilla de producto: superficies con radio contenido (8/12/18)
   y una sombra muy baja, barra superior translúcida con desenfoque, y la
   retícula de 1px reservada para las tablas y las maquetas del panel, donde
   sirve para leer datos. El acabado vive en la última sección del archivo,
   "capa de superficie", para poder revisarlo de un vistazo.
   ========================================================================= */

/* -------------------------------------------------------------------------
   IDENTIDAD (revisión 23-09-2026). Se cambió entera la anterior, que era
   papel crema con serif y acento terracota: se leía como un folleto impreso.

   La de ahora sale del propio oficio. Un ISP mira dos cosas todo el día: una
   consola y una luz. Así que el fondo es grafito frío —el color de un rack, no
   de un papel—, el acento es el VERDE ÓPTICO del enlace levantado, el azul
   marca el camino de la señal en los dibujos, y el ámbar y el rojo son los que
   ya significan algo en el panel: aviso y corte. Nada decorativo: cada color
   quiere decir lo mismo aquí que en la pantalla del operador.
   ------------------------------------------------------------------------- */
:root{
  color-scheme: light dark;

  --papel:#FFFFFF;
  --papel-2:#F3F7FA;
  --papel-3:#FFFFFF;
  --tinta:#0B1117;
  --tinta-2:#4A5B6C;
  --tinta-3:#68798A;
  --linea:#E2E9F0;
  --linea-2:#C0CCD9;

  --acento:#0E7C63;
  --acento-txt:#0A6A54;
  --acento-suave:rgba(14,124,99,.10);
  /* Sobre el verde oscuro va blanco: 4,8:1. (En oscuro el verde es luminoso y
     entonces encima va tinta, no blanco: ver el bloque de abajo.) */
  --sobre-acento:#FFFFFF;

  /* El azul es el camino de la señal en los diagramas: fibra, uplink, ruta.
     No compite con el verde porque no dice lo mismo. */
  --fibra:#0F6FB8;
  --fibra-suave:rgba(15,111,184,.10);

  --ok:#0E7C63;   --ok-suave:rgba(14,124,99,.10);
  --mal:#C1122B;  --mal-suave:rgba(193,18,43,.10);
  --av:#8A5200;   --av-suave:rgba(214,138,0,.14);

  /* La consola NO cambia con el tema. Una terminal es oscura en los dos modos,
     y ese bloque es el que más vende: en claro perdía fuerza. */
  --cmd-fondo:#0A1016;
  --cmd-txt:#CFE0EC;
  --cmd-clave:#2BE0A8;
  --cmd-tenue:#7E93A5;
  --cmd-linea:#1C2732;

  --mono: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", Menlo, "DejaVu Sans Mono", monospace;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", "Times New Roman", serif;
  /* Segoe UI Variable primero: es la de Windows 11, que es donde va a mirar
     esto casi todo el mundo aquí, y es una tipografía de 2021, no de 1996. */
  --sans: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Superficies. Radios y elevación contenidos: esto es un producto técnico,
     no una app de recetas. */
  --r-chico:8px;
  --r:12px;
  --r-grande:18px;
  --sombra:0 1px 2px rgba(11,17,23,.05), 0 8px 24px -12px rgba(11,17,23,.16);
  --sombra-alta:0 2px 4px rgba(11,17,23,.06), 0 18px 46px -18px rgba(11,17,23,.28);

  --ancho: 1180px;
  --rail: 8.5rem;
}

/* Bloque oscuro. Va escrito dos veces a propósito: una para el modo del
   sistema y otra para cuando el visitante lo fuerza con el botón. CSS no deja
   aliasar un grupo de variables sin duplicarlo, y duplicarlo cuesta menos que
   meter JavaScript en la ruta crítica del color. */
@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --papel:#090E13;
    --papel-2:#111A22;
    --papel-3:#0E161D;
    --tinta:#E9F0F6;
    --tinta-2:#9FB2C2;
    --tinta-3:#7E93A5;
    --linea:#1D2833;
    --linea-2:#3A4C5D;
    --acento:#2BE0A8;
    --acento-txt:#2BE0A8;
    --acento-suave:rgba(43,224,168,.13);
    --sobre-acento:#04120D;
    --fibra:#58BCFF;
    --fibra-suave:rgba(88,188,255,.13);
    --ok:#2BE0A8;   --ok-suave:rgba(43,224,168,.13);
    --mal:#FF7286;  --mal-suave:rgba(255,114,134,.13);
    --av:#FFC24B;   --av-suave:rgba(255,194,75,.14);
    --sombra:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.7);
    --sombra-alta:0 2px 6px rgba(0,0,0,.55), 0 22px 54px -20px rgba(0,0,0,.8);
  }
}
:root[data-tema="oscuro"]{
  --papel:#090E13;
  --papel-2:#111A22;
  --papel-3:#0E161D;
  --tinta:#E9F0F6;
  --tinta-2:#9FB2C2;
  --tinta-3:#7E93A5;
  --linea:#1D2833;
  --linea-2:#3A4C5D;
  --acento:#2BE0A8;
  --acento-txt:#2BE0A8;
  --acento-suave:rgba(43,224,168,.13);
  --sobre-acento:#04120D;
  --fibra:#58BCFF;
  --fibra-suave:rgba(88,188,255,.13);
  --ok:#2BE0A8;   --ok-suave:rgba(43,224,168,.13);
  --mal:#FF7286;  --mal-suave:rgba(255,114,134,.13);
  --av:#FFC24B;   --av-suave:rgba(255,194,75,.14);
  --sombra:0 1px 2px rgba(0,0,0,.5), 0 10px 30px -14px rgba(0,0,0,.7);
  --sombra-alta:0 2px 6px rgba(0,0,0,.55), 0 22px 54px -20px rgba(0,0,0,.8);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--papel);color:var(--tinta);
  /* Sans, no serif: el serif daba aire de folleto. Y el texto corrido pide un
     pelo más de cuerpo e interlineado que antes. */
  font:400 16.5px/1.65 var(--sans);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
svg{display:block}
/* Los titulares ya no van en monoespaciada. La mono se gana el sitio donde
   dice algo —comandos, seriales, cifras que se alinean— y ahí se queda. */
h1,h2,h3,h4{font-family:var(--sans);font-weight:670;letter-spacing:-.025em;line-height:1.14;margin:0}
h1{letter-spacing:-.035em;line-height:1.05}
p{margin:0 0 1em}
a{color:var(--acento-txt);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--tinta)}
code{font-family:var(--mono);font-size:.88em;background:var(--acento-suave);color:var(--acento-txt);
  padding:.08em .32em;border-radius:2px}
.mono{font-family:var(--mono);font-size:.9em}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px;border-radius:1px}
::selection{background:var(--acento);color:var(--sobre-acento)}

.visualmente-oculta{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

.saltar{position:absolute;left:-9999px;top:0;z-index:99;background:var(--tinta);color:var(--papel);
  padding:.6rem 1rem;font:600 13px/1 var(--mono)}
.saltar:focus{left:.5rem;top:.5rem}

/* La barra tapa el destino de los anclajes: --barra-h la mide app.js y aquí se
   descuenta. El valor de reserva cubre el caso de que el script no cargue. */
section[id],footer[id]{scroll-margin-top:calc(var(--barra-h, 96px) + 12px)}

/* ---------- barra ---------- */
.barra{
  position:sticky;top:0;z-index:40;background:var(--papel);
  border-bottom:1px solid var(--linea);
  transition:box-shadow .2s, border-color .2s;
}
.barra.compacta{border-bottom-color:var(--linea-2);box-shadow:0 1px 0 var(--linea)}
.barra-fila{
  max-width:var(--ancho);margin:0 auto;padding:.55rem 16px;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.marca{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--tinta)}
.marca-mk{width:22px;height:22px;flex:none}
.mk-in{stroke:var(--fibra)} .mk-out{stroke:var(--acento)}
.marca-txt{font:600 17px/1 var(--mono);letter-spacing:-.04em}
.marca-sub{font:400 11px/1 var(--mono);color:var(--tinta-3);letter-spacing:.02em;display:none}
.barra-acc{display:flex;align-items:center;gap:.5rem}

.btn{display:inline-block;font:600 13.5px/1 var(--mono);text-decoration:none;
  padding:.62rem .95rem;border:1px solid var(--tinta);border-radius:2px;white-space:nowrap}
.btn-pri{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento)}
.btn-pri:hover{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.btn-sec{background:transparent;color:var(--tinta);border-color:var(--linea-2)}
.btn-sec:hover{border-color:var(--tinta);color:var(--tinta);background:var(--papel-2)}
.btn-sm{padding:.5rem .7rem;font-size:12.5px}

.btn-tema{display:inline-flex;align-items:center;gap:.4rem;background:transparent;cursor:pointer;
  border:1px solid var(--linea-2);border-radius:2px;color:var(--tinta-2);
  font:600 11.5px/1 var(--mono);padding:.5rem .55rem}
.btn-tema:hover{color:var(--tinta);border-color:var(--tinta-2)}
/* El icono del botón de tema se pinta con clases, no con estilos en línea:
   así la página sobrevive el día que se quite 'unsafe-inline' de style-src. */
.btn-tema-ico{width:10px;height:10px;border-radius:50%;flex:none;border:1px solid var(--linea-2);
  background:linear-gradient(90deg,var(--tinta) 0 50%, var(--papel-2) 50% 100%)}
.tema-claro .btn-tema-ico{background:var(--papel-3)}
.tema-oscuro .btn-tema-ico{background:var(--tinta)}
.btn-tema-txt{display:none}

/* La fila de enlaces se desliza dentro de la barra: en móvil no hace falta un
   cajón hamburguesa. El degradado de los bordes es la señal de que hay más a
   los lados; sin él, la tira parece cortada. */
.barra-nav{border-top:1px solid var(--linea);position:relative}
.barra-nav::after{content:"";position:absolute;inset:0 0 0 auto;width:26px;pointer-events:none;
  background:linear-gradient(to right, transparent, var(--papel))}
.barra-nav-int{overflow-x:auto;scrollbar-width:none}
.barra-nav-int::-webkit-scrollbar{display:none}
.barra-nav ul{display:flex;gap:0;list-style:none;margin:0 auto;padding:0 8px;max-width:var(--ancho)}
.barra-nav a{display:block;padding:.55rem .6rem;font:500 12.5px/1.2 var(--mono);color:var(--tinta-2);
  text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.barra-nav a:hover{color:var(--tinta)}
.barra-nav a[aria-current="true"]{color:var(--acento-txt);border-bottom-color:var(--acento)}

/* ---------- portada ---------- */
.portada{max-width:var(--ancho);margin:0 auto;padding:2.2rem 16px 2.6rem}
.cintillo{display:inline-flex;align-items:center;gap:.5rem;font:600 11.5px/1.4 var(--mono);
  letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2);
  border:1px solid var(--linea);padding:.35rem .6rem;border-radius:2px;background:var(--papel-3)}
.led{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 3px var(--ok-suave);animation:late 2.4s ease-in-out infinite}
.led.av{background:var(--av);box-shadow:0 0 0 3px var(--av-suave)}
@keyframes late{0%,100%{opacity:1}50%{opacity:.35}}

h1{font-size:clamp(1.72rem,6.4vw,3rem);margin:.9rem 0 .8rem;text-wrap:balance}
.bajada{font-size:1.06rem;color:var(--tinta-2);max-width:56ch}
.acciones{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.4rem 0 .8rem}
.acciones .btn{padding:.78rem 1.15rem;font-size:14px}
.acciones-n{font:400 12.5px/1.55 var(--mono);color:var(--tinta-2);margin:0 0 1.5rem;max-width:44ch;
  padding-left:.75rem;border-left:2px solid var(--fibra)}
.acciones-planes{margin-top:1.6rem}

.ficha{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:0;
  background:var(--linea);border:1px solid var(--linea)}
.ficha>div{background:var(--papel);padding:.7rem .8rem}
.ficha dt{font:600 10.5px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--tinta-3)}
.ficha dd{margin:.15rem 0 0;font:600 1.18rem/1.2 var(--mono);letter-spacing:-.03em}
.ficha-pie{font-size:12.5px;color:var(--tinta-2);margin-top:.55rem;font-family:var(--mono);
  line-height:1.55;max-width:52ch}
.portada-mk{margin-top:2rem}
.mk-nota{font:400 11.5px/1.5 var(--mono);color:var(--tinta-2);margin-top:.5rem}

/* ---------- ventana (maqueta del panel) ---------- */
.ventana{border:1px solid var(--linea-2);background:var(--papel-3);border-radius:3px;overflow:hidden;
  font-family:var(--sans)}
.ven-cab{display:flex;align-items:center;gap:.55rem;padding:.45rem .6rem;
  background:var(--papel-2);border-bottom:1px solid var(--linea)}
.ven-luces{display:flex;gap:4px}
.ven-luces i{width:8px;height:8px;background:var(--linea-2);display:block}
.ven-ruta{font:500 11px/1 var(--mono);color:var(--tinta-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ven-ruta-b{color:var(--tinta-3)}
.ven-led{width:7px;height:7px;border-radius:50%;background:var(--ok);margin-left:auto;flex:none}
.ven-cuerpo{display:grid;grid-template-columns:1fr}
.mk-lat{display:none;border-right:1px solid var(--linea);padding:.6rem .35rem;background:var(--papel-2);
  flex-direction:column;gap:1px;font-family:var(--sans)}
.mk-lat-t{font:600 9.5px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--tinta-3);
  padding:.45rem .5rem .1rem}
.mk-lat-i{font-size:11.5px;color:var(--tinta-2);padding:.28rem .5rem;border-radius:2px}
.mk-lat-i.act{background:var(--acento-suave);color:var(--acento-txt);font-weight:600;
  box-shadow:inset 2px 0 0 var(--acento)}
.mk-main{padding:.85rem .8rem 1rem;min-width:0;font-family:var(--sans)}
.mk-titulo{font:600 14px/1.3 var(--mono);margin:0;color:var(--tinta)}
.mk-pie-t{font-size:11.5px;color:var(--tinta-2);margin:.2rem 0 .8rem;line-height:1.45}
.mk-sub{font:600 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.09em;
  color:var(--tinta-2);margin:1rem 0 .45rem}

.mk-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea)}
.mk-st{background:var(--papel-3);padding:.45rem .5rem;display:flex;flex-direction:column;
  font-size:10.5px;color:var(--tinta-2);line-height:1.3}
.mk-st b{font:600 1.05rem/1.15 var(--mono);color:var(--tinta);letter-spacing:-.03em}
.mk-st.ok b{color:var(--ok)} .mk-st.av b{color:var(--av)} .mk-st.mal b{color:var(--mal)}

/* Las cajas que se deslizan en horizontal llevan tabindex para poder moverlas
   con el teclado. El foco se dibuja por DENTRO: hacia fuera lo recortaría la
   caja de la maqueta que las contiene. */
.tabla-scroll{overflow-x:auto}
.tabla-scroll:focus-visible{outline-offset:-2px}
.mk-tabla{width:100%;border-collapse:collapse;font-size:11.5px;min-width:340px}
.mk-tabla th{text-align:left;font:600 9.5px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;
  color:var(--tinta-2);padding:.3rem .45rem;border-bottom:1px solid var(--linea-2)}
.mk-tabla td{padding:.42rem .45rem;border-bottom:1px solid var(--linea);color:var(--tinta-2);white-space:nowrap}
.mk-tabla .mono{font-family:var(--mono);font-size:10.5px;color:var(--tinta-2)}
.mk-tabla .neg{color:var(--mal);font-weight:600}
.mk-tabla .atenuado{color:var(--tinta-2);font-style:italic}

.chip{display:inline-block;font:600 9.5px/1.5 var(--mono);padding:.08rem .38rem;border-radius:2px;
  border:1px solid var(--linea-2);color:var(--tinta-2);background:var(--papel-2);white-space:nowrap}
.chip.ok{color:var(--ok);border-color:var(--ok);background:var(--ok-suave)}
.chip.mal{color:var(--mal);border-color:var(--mal);background:var(--mal-suave)}
.chip.av{color:var(--av);border-color:var(--av);background:var(--av-suave)}

.mk-pon{display:flex;flex-direction:column;gap:.35rem}
.pon{display:grid;grid-template-columns:2.6rem 1fr 2rem;align-items:center;gap:.5rem}
.pon i{font:500 10.5px/1 var(--mono);color:var(--tinta-2);font-style:normal}
.pon u{font:600 10.5px/1 var(--mono);color:var(--tinta-2);text-decoration:none;text-align:right}
.barra-pon{display:block;height:8px;background:var(--acento);width:var(--w,100%);
  transition:width .9s cubic-bezier(.2,.7,.2,1);border-radius:1px}

/* maqueta: barra de acción y filas de corte */
.mk-barra-acc{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-end;margin-bottom:.6rem}
.mk-campo{display:flex;flex-direction:column;gap:.22rem;font-size:11px;color:var(--tinta-2);min-width:0}
.mk-campo>span{font:600 9.5px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em}
.mk-campo input[type="text"],.mk-campo select{
  font:400 12px/1.2 var(--sans);color:var(--tinta);background:var(--papel);
  border:1px solid var(--linea-2);border-radius:2px;padding:.36rem .42rem;max-width:100%}
.mk-campo.ancho{grid-column:1 / -1}
/* color:var(--papel) vale en los dos modos: en claro es papel sobre rojo y en
   oscuro el "papel" ya es tinta, así que queda tinta sobre rosa. Medido: 6,67:1
   en claro y 7,83:1 en oscuro. */
.mk-btn-mal{font:600 12px/1 var(--mono);color:var(--papel);background:var(--mal);cursor:pointer;
  border:1px solid var(--mal);border-radius:2px;padding:.52rem .7rem}
.mk-btn-mal:hover{filter:brightness(1.08)}
.mk-btn-mal:disabled{opacity:.45;cursor:not-allowed;filter:none}
.mk-aviso{font:400 11px/1.5 var(--mono);color:var(--av);background:var(--av-suave);
  border:1px solid var(--av);border-radius:2px;padding:.4rem .5rem;margin:0 0 .6rem}
.mk-dos{display:grid;gap:.7rem}
.mk-caja{border:1px solid var(--linea-2);border-radius:2px;margin:0 0 .7rem;padding:.4rem .5rem .55rem;min-width:0}
.mk-caja.mal{border-color:var(--mal)}
.mk-caja.ok{border-color:var(--ok)}
.mk-caja.neutra{border-style:dashed}
.mk-caja legend{font:600 11px/1 var(--mono);padding:0 .3rem;display:flex;gap:.3rem;align-items:center;
  flex-wrap:wrap;color:var(--tinta-2)}
.mk-caja.mal legend{color:var(--mal)} .mk-caja.ok legend{color:var(--ok)}
.mk-fila,.mk-fila-n{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;font-size:11.5px;
  border:1px solid var(--linea);background:var(--papel-2);border-radius:2px;
  padding:.32rem .42rem;margin:.28rem 0 0}
.mk-fila{cursor:pointer}
.mk-fila:hover{border-color:var(--linea-2)}
.mk-fila input{accent-color:var(--acento);flex:none;margin:0}
.mk-fila .nom,.mk-fila-n .nom{flex:1 1 7rem;color:var(--tinta);min-width:0}
.mk-venc{font:500 10px/1 var(--mono);color:var(--mal)}
.mk-plazo{font:500 10px/1.4 var(--mono);color:var(--fibra)}
.mk-dinero{font:600 11px/1 var(--mono);color:var(--tinta);margin-left:auto}

.mk-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-bottom:.8rem}

/* consola: oscura en los dos modos */
.mk-cmd{border:1px solid var(--cmd-linea);border-radius:2px;background:var(--cmd-fondo)}
.mk-cmd-t{display:flex;align-items:center;gap:.4rem;margin:0;padding:.4rem .5rem;
  font:600 10px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--cmd-txt);
  border-bottom:1px solid var(--cmd-linea)}
.mk-cmd .led.av{background:#EFBA5A;box-shadow:0 0 0 3px rgba(239,186,90,.16)}
.mk-cmd pre{margin:0;padding:.55rem .6rem;overflow-x:auto;
  font:400 11px/1.65 var(--mono);color:var(--cmd-txt);tab-size:2}
/* El <code> de dentro del bloque de comandos NO es un code en línea: hay que
   desactivarle el fondo ámbar y el relleno que lleva <code> en el texto corrido. */
.mk-cmd pre code{background:none;color:inherit;padding:0;border-radius:0;font-size:inherit}
.mk-cmd .ck{color:var(--cmd-clave);font-weight:600}
.mk-cmd-p{margin:0;padding:.4rem .5rem;border-top:1px solid var(--cmd-linea);
  font:400 10.5px/1.5 var(--mono);color:var(--cmd-tenue)}

/* ---------- secciones y regleta ---------- */
.seccion{max-width:var(--ancho);margin:0 auto;padding:2.6rem 16px 2.8rem;border-top:1px solid var(--linea)}
.num{font:600 12px/1 var(--mono);color:var(--acento-txt);letter-spacing:.14em;margin:0 0 .5rem}
.rail-n{font:400 12px/1.6 var(--mono);color:var(--tinta-2);margin:0;display:none}
.seccion h2{font-size:clamp(1.3rem,4.6vw,1.9rem);text-wrap:balance}
.entradilla{margin:.7rem 0 0;color:var(--tinta-2);max-width:62ch}
.cuerpo{margin-top:1.8rem}
.remate{font-size:1.02rem;border-left:3px solid var(--acento);padding-left:1rem;margin-top:1.8rem;
  color:var(--tinta);max-width:60ch}
.remate-chico{font-size:.94rem;color:var(--tinta-2);border-left-color:var(--fibra)}
.sub-h{font-size:1.02rem;margin:2.6rem 0 1rem;color:var(--tinta);
  border-top:1px solid var(--linea);padding-top:1.2rem}

/* ---------- casos del problema ---------- */
.caso{margin:0 0 2.6rem}
.caso:last-of-type{margin-bottom:0}
.caso h3{font-size:1.08rem;margin-bottom:1rem;display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap}
.indice{font-size:.78rem;color:var(--acento-txt);letter-spacing:.1em;flex:none}

/* Dibujos. Son mecanismo, no adorno: el calendario dice "vence el 1, corta el
   5" sin una palabra, y la tira de índices dice qué es un hueco libre. */
.fig{margin:0 0 1.2rem}
.fig svg{width:100%;height:auto;max-width:520px}
.fig text{font-family:var(--mono);font-size:9px;fill:var(--tinta-2);letter-spacing:.02em}
.fig .f-linea{fill:none;stroke:var(--linea-2);stroke-width:1.2}
.fig .f-caja{fill:var(--papel-3);stroke:var(--linea-2);stroke-width:1.2}
.fig .f-cable{fill:none;stroke:var(--acento);stroke-width:1.8;stroke-linecap:round}
.fig .f-guion{stroke-dasharray:4 3}
.fig .f-relleno-caja{fill:var(--acento-suave)}
.fig .f-tenue{fill:none;stroke:var(--linea);stroke-width:1}
.fig .f-rejilla{fill:none;stroke:var(--linea);stroke-width:1;opacity:.6}
.fig .f-punteado{fill:none;stroke:var(--linea-2);stroke-width:1;stroke-dasharray:3 3}
.fig .f-macizo{fill:var(--acento);stroke:none}
.fig .f-macizo-2{fill:var(--linea-2);stroke:none}
.fig .f-libre{fill:none;stroke:var(--fibra);stroke-width:1.8}
.fig .f-dia{font-size:13px;font-weight:700;fill:var(--tinta);text-anchor:middle}
.fig .f-sobre{fill:var(--sobre-acento)}
.fig .f-apagado{fill:var(--tinta-3)}
.fig .f-codigo{font-size:7.5px;fill:var(--tinta-2)}
.fig figcaption{font:400 12px/1.55 var(--mono);color:var(--tinta-2);margin-top:.6rem;max-width:62ch}

/* "Hoy, a mano" enfrentado a "Con Wixpon". Va a ANCHO COMPLETO a propósito:
   metido en la columna de lectura se partía en dos y dejaba veintitantos
   caracteres por línea, tres veces seguidas. */
.enfrentado{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea)}
.enfrentado>div{background:var(--papel);padding:1rem 1rem 1.1rem}
.enfrentado h4{font:600 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.12em;
  margin:0 0 .7rem}
.hoy h4{color:var(--tinta-3)}
.ahora h4{color:var(--fibra)}
.ahora{border-left:3px solid var(--fibra)}
.enfrentado p{margin:0 0 .7rem;font-size:.95rem;color:var(--tinta-2)}
.enfrentado p:last-child{margin-bottom:0}
.enfrentado strong{color:var(--tinta)}
.matiz{border-top:1px dotted var(--linea-2);padding-top:.7rem;font-size:.9rem!important}

/* ---------- módulos ---------- */
.rejilla-mod{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea)}
.mod{background:var(--papel);padding:.95rem 1rem 1.1rem;position:relative}
/* escuadra de acento en el ángulo: marca los cuatro grupos que sostienen la
   operación diaria sin gritar con una insignia de "el más popular". */
.mod.destacado::before{content:"";position:absolute;left:-1px;top:-1px;width:14px;height:14px;
  border-top:2px solid var(--acento);border-left:2px solid var(--acento)}
.mod header{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;margin-bottom:.45rem}
.mod h3{font-size:.98rem}
.mod-n{font:600 10.5px/1 var(--mono);color:var(--tinta-2);border:1px solid var(--linea-2);
  padding:.18rem .34rem;border-radius:2px}
.mod-d{font-size:.88rem;color:var(--tinta-2);margin:0 0 .5rem}
.mod-l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem}
.mod-l li{font:400 11.5px/1.4 var(--mono);color:var(--tinta-2);
  background:var(--papel-2);border:1px solid var(--linea);border-radius:2px;padding:.16rem .38rem}
/* El límite se dice donde nace: dentro de la propia tarjeta. */
.mod-av{font:400 11.5px/1.6 var(--mono);color:var(--tinta-2);margin:.7rem 0 0;
  border-top:1px dotted var(--linea-2);padding-top:.6rem}

/* ---------- demostración ---------- */
.demo{border:1px solid var(--linea-2);border-radius:3px;background:var(--papel-3);overflow:hidden}
.demo-tabs{display:flex;overflow-x:auto;background:var(--papel-2);border-bottom:1px solid var(--linea-2);
  scrollbar-width:none}
.demo-tabs::-webkit-scrollbar{display:none}
.demo-tab{flex:none;background:transparent;border:0;border-right:1px solid var(--linea);cursor:pointer;
  font:600 12px/1 var(--mono);color:var(--tinta-2);padding:.75rem .8rem;display:flex;align-items:center;
  gap:.4rem;border-bottom:2px solid transparent;white-space:nowrap}
.demo-tab:hover{color:var(--tinta)}
.demo-tab[aria-selected="true"]{color:var(--tinta);background:var(--papel-3);border-bottom-color:var(--acento)}
.tab-n{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:2px;
  background:var(--linea);color:var(--tinta-2);font-size:10px}
.demo-tab[aria-selected="true"] .tab-n{background:var(--acento);color:var(--sobre-acento)}
.demo-cuerpo{display:grid;grid-template-columns:1fr}
.demo-pans{min-width:0}
.demo-pan{min-width:0}
/* Sin JavaScript las pestañas no cambian, así que las tres pantallas se muestran
   una debajo de otra en vez de quedarse dos escondidas para siempre.
   La clase .js la pone app.js en cuanto arranca. */
html:not(.js) .demo-pan[hidden]{display:block;border-top:1px solid var(--linea-2)}
.demo-pan:focus-visible{outline-offset:-3px}
.demo-lee{font-size:.94rem;color:var(--tinta-2);margin:1.1rem 0 0;max-width:72ch;
  font-family:var(--serif);border-top:1px solid var(--linea);padding-top:.9rem}
.demo-lee strong{color:var(--tinta);font-family:var(--mono);font-size:.86rem}
.demo-lee .mono{color:var(--tinta)}

/* ---------- técnica ---------- */
.tec{display:grid;gap:1.6rem}
.tec-fig{margin:0}
.diagrama{max-width:420px;margin:0 auto}
.dg-caja rect,.dg-centro{fill:var(--papel-3);stroke:var(--linea-2);stroke-width:1}
.dg-centro{fill:var(--acento-suave);stroke:var(--acento);stroke-width:1.5}
.dg-linea path{stroke:var(--linea-2);stroke-width:1.5;fill:none;stroke-dasharray:4 3}
.dg-t text{font:600 14px var(--mono);fill:var(--tinta)}
.dg-t-c{fill:var(--tinta)}
.dg-s text{font:400 10px var(--mono);fill:var(--tinta-2)}
.dg-eti rect{fill:var(--papel)}
.dg-eti text{font:600 10.5px var(--mono);fill:var(--acento-txt)}
.tec-fig figcaption{text-align:center;margin-left:auto;margin-right:auto}
.tec-item{border-top:1px solid var(--linea);padding-top:.9rem;margin-bottom:1.3rem}
.tec-item h3{font-size:.92rem;color:var(--acento-txt);text-transform:uppercase;letter-spacing:.1em;
  margin-bottom:.6rem}
.tec-item p{margin:0 0 .6rem;font-size:.95rem;color:var(--tinta-2)}
.tec-item p:last-child{margin-bottom:0}
.tec-item b{color:var(--tinta);font-family:var(--mono);font-size:.86rem;font-weight:600}
/* El "+" y el "−" no son el único portador del sentido: la frase lo dice igual,
   y por eso van con aria-hidden. */
.sig{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:2px;flex:none;
  font:700 11px/1 var(--mono);margin-right:.3rem;vertical-align:.05em}
.hace .sig{background:var(--fibra-suave);color:var(--fibra);border:1px solid var(--fibra)}
.nohace .sig{background:var(--av-suave);color:var(--av);border:1px solid var(--av)}
.nohace{color:var(--tinta-2)}
.tec-n{font-family:var(--mono);font-size:.82rem!important;line-height:1.6;
  border-left:2px solid var(--linea-2);padding-left:.7rem}

.planta{display:grid;gap:1.6rem}
.planta-fig svg{max-width:300px;margin:0 auto}
.listilla{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;align-content:start}
.listilla li{font-size:.94rem;color:var(--tinta-2);padding-left:1.15rem;position:relative}
.listilla li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--fibra)}
.listilla b{color:var(--tinta);font-family:var(--mono);font-size:.86rem;font-weight:600}

/* ---------- planes ---------- */
.calc{border:1px solid var(--linea-2);background:var(--papel-3);border-radius:3px;padding:1rem;
  margin-bottom:1.4rem;display:grid;gap:1.2rem}
.calc-lab{display:block;font:600 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.09em;
  color:var(--tinta-2);margin-bottom:.5rem}
.calc-out{display:block;font:600 1.5rem/1.1 var(--mono);color:var(--tinta);letter-spacing:-.03em;
  margin-bottom:.4rem}
#rango{width:100%;margin:0;accent-color:var(--acento);height:24px}
.calc-marcas{display:flex;justify-content:space-between;font:500 10.5px/1 var(--mono);
  color:var(--tinta-2);margin:.15rem 0 0}
.calc-res{border-top:1px solid var(--linea);padding-top:1rem}
.calc-plan{font:400 .98rem/1.4 var(--serif);color:var(--tinta-2);margin:0 0 .25rem}
.calc-plan strong{font-family:var(--mono);color:var(--tinta);font-size:1.15rem;letter-spacing:-.02em}
.calc-precio{font:600 2rem/1 var(--mono);letter-spacing:-.04em;color:var(--acento-txt);margin:0 0 .5rem}
.calc-unit,.calc-nota{font:400 12.5px/1.55 var(--mono);color:var(--tinta-2);margin:0 0 .3rem}
.calc-nota{margin-bottom:0}
.calc-ojo{color:var(--av);border-left:2px solid var(--av);padding-left:.6rem;margin-top:.6rem}

.tabla-planes-env{border:1px solid var(--linea-2);border-radius:3px}
.tabla-planes{width:100%;border-collapse:collapse;min-width:520px;font-size:.92rem}
.tabla-planes th,.tabla-planes td{padding:.6rem .7rem;border-bottom:1px solid var(--linea);text-align:left}
.tabla-planes thead th{font:600 .95rem/1.25 var(--mono);color:var(--tinta);vertical-align:bottom;
  border-bottom:1px solid var(--linea-2);background:var(--papel-2)}
.tabla-planes tbody th{font:400 .9rem/1.4 var(--serif);color:var(--tinta-2);font-weight:400;
  width:10rem;background:var(--papel-3)}
/* En un teléfono la tabla se desliza, y sin esto la columna de la izquierda
   —la que dice de qué es cada fila— se va fuera y quedan tres "sí" sueltos.
   Los fondos ya son opacos, así que basta con fijarla y subirla de capa.
   Ahí va más estrecha (10rem, dos líneas) para dejarle sitio a los planes; en
   escritorio vuelve a 15rem, donde cada fila cabe en una sola línea. */
.tabla-planes thead th:first-child,.tabla-planes tbody th{position:sticky;left:0;z-index:1}
.tabla-planes td{font-family:var(--mono);font-size:.84rem;color:var(--tinta-2);background:var(--papel)}
.tp-p{display:block;font:600 1.5rem/1.1 var(--mono);letter-spacing:-.04em;color:var(--tinta);margin-top:.2rem}
.tabla-planes tr:last-child th,.tabla-planes tr:last-child td{border-bottom:0}
/* La columna que toca se marca con fondo Y con una escuadra: no depende solo
   del color. */
.tabla-planes .col-on{background:var(--acento-suave);color:var(--tinta)}
.tabla-planes thead .col-on{position:relative;background:var(--acento-suave)}
.tabla-planes thead .col-on::before{content:"te toca este";display:block;
  font:600 9px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--acento-txt)}
.tabla-planes thead .col-on::after{content:"";position:absolute;left:0;top:0;width:12px;height:12px;
  border-top:2px solid var(--acento);border-left:2px solid var(--acento)}

/* ---------- límites ---------- */
.limites{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--linea);
  border:1px solid var(--linea)}
.limites li{background:var(--papel);padding:.8rem 1rem .85rem .9rem;font-size:.94rem;color:var(--tinta-2);
  border-left:3px solid var(--linea-2)}
.limites b{color:var(--tinta);font-family:var(--mono);font-size:.87rem;font-weight:600}

/* ---------- preguntas ---------- */
.faq-acc{margin:0 0 .8rem}
.btn-lin{background:none;border:0;padding:0;cursor:pointer;color:var(--acento-txt);
  font:600 12px/1 var(--mono);text-decoration:underline;text-underline-offset:3px}
.faq{border:1px solid var(--linea);background:var(--papel)}
.faq details{border-bottom:1px solid var(--linea)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;list-style:none;padding:.85rem 2.4rem .85rem 1rem;position:relative;
  font:600 .95rem/1.4 var(--mono);color:var(--tinta)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--acento-txt);background:var(--papel-2)}
.faq summary::after{content:"";position:absolute;right:1rem;top:1.15rem;width:11px;height:11px;
  border-right:2px solid var(--acento);border-bottom:2px solid var(--acento);
  transform:rotate(45deg);transition:transform .18s}
.faq details[open] summary::after{transform:rotate(225deg);top:1.35rem}
.faq details p{margin:0;padding:0 1rem 1rem;font-size:.95rem;color:var(--tinta-2);max-width:72ch}

/* ---------- pie ---------- */
footer{border-top:1px solid var(--linea-2);background:var(--papel-2);margin-top:1rem}
.pie{max-width:var(--ancho);margin:0 auto;padding:2.2rem 16px 1.4rem;display:grid;gap:1.8rem}
.marca-pie{margin:0 0 .7rem}
.pie-t{font-size:.94rem;color:var(--tinta-2);max-width:44ch}
.pie-h{font:600 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.11em;color:var(--tinta-2);
  margin:0 0 .7rem}
.pie-l{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.pie-l a{font:500 13px/1.4 var(--mono);color:var(--tinta-2);text-decoration:none}
.pie-l a:hover{color:var(--acento-txt);text-decoration:underline}
.pendiente{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--av);
  border:1px dashed var(--av);padding:.05rem .3rem;border-radius:2px;margin-left:.25rem}
.pie-n{font:400 11.5px/1.55 var(--mono);color:var(--tinta-2);margin-top:.7rem;max-width:34ch}
.pie-legal{max-width:var(--ancho);margin:0 auto;padding:.9rem 16px 2rem;border-top:1px solid var(--linea);
  font:400 11.5px/1.6 var(--mono);color:var(--tinta-2)}

/* ---------- aparición al entrar en pantalla ----------
   La clase .revela la pone app.js, y solo si hay IntersectionObserver y nadie
   ha pedido menos movimiento. Así nada puede quedarse invisible por un fallo
   de media query o por un script a medio cargar. */
.revela{opacity:0;transform:translateY(14px);
  transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1)}
.revela.dentro{opacity:1;transform:none}
/* el escalonado entre hermanos va en CSS, no en atributos style= desde JS */
.revela:nth-child(2){transition-delay:55ms}
.revela:nth-child(3){transition-delay:110ms}
.revela:nth-child(4){transition-delay:165ms}
.revela:nth-child(5){transition-delay:220ms}
.revela:nth-child(6){transition-delay:275ms}

/* ---------- puntos de ruptura ---------- */
@media (min-width:560px){
  .mk-stats{grid-template-columns:repeat(6,1fr)}
  .ficha{grid-template-columns:repeat(4,1fr)}
  .mk-dos{grid-template-columns:1fr 1fr}
  .mk-form{grid-template-columns:repeat(3,minmax(0,1fr))}
  .btn-tema-txt{display:inline}
  .marca-sub{display:inline}
  .calc{grid-template-columns:1fr 1fr;gap:1.4rem;align-items:start}
  .calc-res{border-top:0;border-left:1px solid var(--linea);padding-top:0;padding-left:1.4rem}
}
@media (min-width:720px){
  /* La barra se queda en dos filas también en escritorio. Se probó centrar los
     enlaces en la misma fila y entre 720 y 1000 px se montaban encima de la
     marca: dos filas limpias valen más que un truco que se rompe. */
  .barra-fila{padding:.6rem 24px}
  .barra-nav ul{padding:0 24px}
  .barra-nav a{padding:.5rem .7rem}
  .portada,.seccion,.pie,.pie-legal{padding-left:24px;padding-right:24px}
  .rejilla-mod{grid-template-columns:repeat(2,1fr)}
  .ven-cuerpo{grid-template-columns:150px 1fr}
  .demo-cuerpo{grid-template-columns:158px 1fr}
  .mk-lat{display:flex}
  .pie{grid-template-columns:1.5fr 1fr 1fr}
  .demo-pan .mk-main{padding:1.1rem 1.1rem 1.3rem}
  .limites{grid-template-columns:1fr 1fr}
  .enfrentado{grid-template-columns:1fr 1fr}
  .tabla-planes tbody th{width:15rem}
  .planta{grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:2.4rem;align-items:start}
}
@media (min-width:900px){
  .portada{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:2.6rem;
    align-items:center;padding-top:3.4rem;padding-bottom:3.6rem}
  .portada-mk{margin-top:0}
  .seccion-cab{display:grid;grid-template-columns:var(--rail) minmax(0,1fr)}
  /* la regleta: el número y la nota a la izquierda, y un capilar continuo que
     baja por toda la sección, como el margen de una lámina de dibujo. La nota
     se queda pegada mientras se lee la sección. */
  .seccion-cab>div:last-child,.cuerpo{border-left:1px solid var(--linea);padding-left:1.75rem}
  .cuerpo{margin-left:var(--rail)}
  .rail{position:sticky;top:calc(var(--barra-h, 96px) + 1.5rem);align-self:start;padding-right:1rem}
  .rail-n{display:block}
  .num{margin:.35rem 0 .7rem;position:relative}
  .num::after{content:"";position:absolute;right:-1.05rem;top:.42em;width:.75rem;height:1px;
    background:var(--linea-2)}
  .rejilla-mod{grid-template-columns:repeat(3,1fr)}
  .tec{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:2.4rem;align-items:start}
  .diagrama{max-width:100%}
  .tec-fig{position:sticky;top:calc(var(--barra-h, 96px) + 1.5rem)}
  .listilla{gap:.6rem}
  .mk-form{grid-template-columns:repeat(4,minmax(0,1fr))}
  .caso h3{font-size:1.15rem}
}
@media (min-width:1080px){
  .seccion{padding-top:3.4rem;padding-bottom:3.6rem}
}

/* ---------- menos movimiento ----------
   Quien lo pide no ve ni aparecer secciones, ni LED que late, ni barras que
   crecen. La información es exactamente la misma. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .revela{opacity:1;transform:none}
  .led{animation:none}
}

/* =========================================================================
   CAPA DE SUPERFICIE — revisión 23-09-2026
   Va al final a propósito: el archivo de arriba define la estructura y esta
   capa solo cambia el acabado. Así se puede leer de un vistazo qué es forma y
   qué es fondo, y revertirlo es borrar este bloque.

   Lo que cambia respecto al diseño anterior:
   - esquinas de 2px -> radios contenidos (8/12/18) y una sombra muy baja, la
     justa para separar del fondo sin parecer una app de recetas;
   - la monoespaciada deja de usarse para hablar (menús, botones, etiquetas) y
     se queda donde de verdad dice algo: comandos, seriales, cifras alineadas;
   - la barra superior se vuelve translúcida con desenfoque, como el panel.
   ========================================================================= */

/* --- barra --- */
.barra{
  background:color-mix(in srgb, var(--papel) 82%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom-color:transparent;
}
.barra.compacta{border-bottom-color:var(--linea);box-shadow:var(--sombra)}
@supports not (backdrop-filter: blur(1px)){ .barra{background:var(--papel)} }

/* --- botones --- */
.btn{
  font:600 14px/1 var(--sans);letter-spacing:-.01em;
  padding:.68rem 1.05rem;border-radius:var(--r-chico);
  transition:transform .12s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-pri{box-shadow:0 1px 2px rgba(0,0,0,.14)}
.btn-pri:hover{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento);
  box-shadow:0 6px 18px -6px color-mix(in srgb, var(--acento) 70%, transparent)}
.btn-sec:hover{background:var(--papel-2)}
.btn-sm{padding:.52rem .8rem;font-size:13px}
.btn-lin{font:600 13px/1 var(--sans)}
.btn-tema{border-radius:999px}

/* --- píldoras y etiquetas --- */
.chip{border-radius:999px;padding:.14rem .5rem;font-size:10px;letter-spacing:.02em}
.cintillo{border-radius:999px;padding:.4rem .8rem;background:var(--acento-suave);
  border-color:color-mix(in srgb, var(--acento) 30%, transparent);color:var(--acento-txt)}
/* Los nombres de los módulos son palabras, no comandos: van en sans y se leen
   el doble de rápido. */
.mod-l li{font:500 12.5px/1.45 var(--sans);border-radius:999px;padding:.24rem .6rem}
.mod-l li:hover{border-color:var(--linea-2);color:var(--tinta)}

/* --- superficies --- */
.rejilla-mod{border-radius:var(--r-grande);overflow:hidden;box-shadow:var(--sombra)}
.ficha{border-radius:var(--r);overflow:hidden}
.ventana{border-radius:var(--r);box-shadow:var(--sombra-alta);border-color:var(--linea)}
.faq{border-radius:var(--r);overflow:hidden}
.calc{border-radius:var(--r);border-color:var(--linea);box-shadow:var(--sombra)}
.mk-caja{border-radius:var(--r-chico)}
.mk-fila,.mk-fila-n{border-radius:var(--r-chico)}
.tabla-planes-env{border-radius:var(--r);overflow:hidden}
code{border-radius:5px;background:var(--papel-2);color:var(--tinta);
  border:1px solid var(--linea);padding:.1em .38em}

/* --- tipografía de apoyo: lo que era mono y es prosa --- */
.demo-tab{font:600 13px/1 var(--sans)}
.calc-lab,.ficha dt,.tec-item h3{font-family:var(--sans);letter-spacing:.06em}
.ficha dd{font-family:var(--mono)}          /* cifras: siguen alineadas */
.bajada,.entradilla{color:var(--tinta-2)}
.num{font-family:var(--sans);letter-spacing:.12em;font-weight:700}

/* --- foco visible, acorde al acento nuevo --- */
:focus-visible{outline:2px solid var(--acento);outline-offset:3px;border-radius:6px}

/* En pantallas grandes el titular puede permitirse más presencia sin gritar. */
@media (min-width:900px){
  h1{letter-spacing:-.04em}
}