/* ============================================================
   VirtualNet Cloud — hoja de estilo del sitio
   T031 Fase 2 · Leo · sobre la dirección B "Operación" de Diego

   Los tokens, la escala tipográfica y los componentes de portada
   son los de direccion-b-operacion.html sin alterar. Lo añadido
   aquí es lo que la maqueta no cubría: páginas interiores, migas,
   formulario, prosa larga y marcadores internos.

   Cero JavaScript. El menú móvil es <details>.
   ============================================================ */

:root{
  /* --- color: Full palette, claro (Diego, sin cambios) --- */
  --paper:     oklch(0.947 0.004 250);
  --paper-2:   oklch(0.905 0.005 250);
  --rule:      oklch(0.845 0.007 250);
  --rule-soft: oklch(0.895 0.006 250);
  --ink:       oklch(0.215 0.013 252);
  --ink-2:     oklch(0.455 0.012 252);
  --signal:    oklch(0.872 0.187 118);
  --signal-dk: oklch(0.495 0.125 128);
  --alert:     oklch(0.545 0.168 33);
  --night:     oklch(0.185 0.015 252);

  /* --- tipografía --- */
  --disp: 'Big Shoulders Display', 'Arial Narrow', 'Helvetica Neue Condensed', sans-serif;
  --sans: 'Schibsted Grotesk', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --fs-h1:   clamp(3.4rem, 10.5vw, 9.5rem);
  --fs-h1s:  clamp(2.6rem, 7vw, 5.4rem);   /* h1 de página interior */
  --fs-h2:   clamp(2.5rem, 6vw, 4.75rem);
  --fs-h2s:  clamp(1.9rem, 3.6vw, 2.9rem); /* h2 dentro de prosa */
  --fs-h3:   clamp(1.15rem, 1.6vw, 1.35rem);
  --fs-lead: clamp(1.06rem, 1.35vw, 1.24rem);
  --fs-body: 1.02rem;
  --fs-meta: 0.69rem;

  --pad: clamp(1.1rem, 4vw, 4rem);
  --sec: clamp(4rem, 8vw, 8rem);
  --max: 1420px;
  --prose: 68ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-body);line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,p,figure{margin:0}
::selection{background:var(--signal);color:var(--ink)}
:where(a,button,input,select,textarea,summary):focus-visible{outline:2px solid var(--signal-dk);outline-offset:2px}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.meta{
  font-family:var(--sans);font-size:var(--fs-meta);font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;line-height:1.4;
}
.disp{font-family:var(--disp);text-transform:uppercase;font-weight:700;letter-spacing:.004em;line-height:.86}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:.5rem;top:-4rem;z-index:80;background:var(--ink);color:var(--paper);
  padding:.7rem 1rem;text-decoration:none;font-size:.8rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;transition:top .15s;
}
.skip:focus{top:.5rem}

/* ---------- marcador interno (se elimina con build.py --public) ---------- */
.internal{
  background:var(--alert);color:var(--paper);
  border-bottom:2px solid var(--ink);
}
.internal .wrap{padding-block:.6rem}
.internal p{font-size:.8rem;line-height:1.45;max-width:none}
.internal p + p{margin-top:.3rem}
.internal strong{font-size:var(--fs-meta);font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.internal a{color:var(--paper)}

/* ---------- selector de idioma ---------- */
.status-right{display:inline-flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.langsw{display:inline-flex;align-items:center;gap:.1rem}
.langsw a,.langsw span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.75rem;min-height:1.55rem;padding:.18rem .42rem;line-height:1;
  text-decoration:none;border:1px solid oklch(0.95 0 0/.28);
}
@media (pointer:coarse){.langsw a,.langsw span{min-width:2.6rem;min-height:1.7rem}}
.langsw a + a,.langsw a + span,.langsw span + a{margin-left:-1px}
.langsw a:hover,.langsw a:focus-visible{background:var(--signal);color:var(--ink);border-color:var(--signal)}
.langsw [aria-current="true"]{background:var(--signal);color:var(--ink);border-color:var(--signal)}

/* Cadena aun sin traducir. Solo se ve en el build interno; con --public
   la version espanola cae a ingles en silencio. */
.untranslated{
  text-decoration:underline;text-decoration-style:dotted;text-decoration-thickness:1px;
  text-decoration-color:var(--alert);text-underline-offset:.22em;
}

/* ---------- barra de estado ---------- */
.status{background:var(--ink);color:var(--paper)}
.status .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:2.3rem;flex-wrap:wrap}
.status .meta{color:oklch(0.78 0.008 250)}
.status a{text-decoration:none}
.status a:hover{color:var(--signal)}
.dot{
  display:inline-block;width:.5rem;height:.5rem;background:var(--signal);
  border-radius:50%;margin-right:.5rem;vertical-align:.02rem;
}
@media (prefers-reduced-motion:no-preference){
  .dot{animation:blink 2.6s cubic-bezier(.16,1,.3,1) infinite}
  @keyframes blink{0%,72%,100%{opacity:1}82%{opacity:.25}}
}

/* ---------- nav ---------- */
header.nav{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--ink)}
header.nav .wrap{display:flex;align-items:stretch;gap:0;min-height:4.3rem}
.mark{display:flex;align-items:center;gap:.55rem;text-decoration:none;padding-right:2rem}
.mark .m1{font-family:var(--disp);text-transform:uppercase;font-weight:800;font-size:1.85rem;line-height:1;letter-spacing:.005em}
.mark .m2{
  font-size:.6rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--ink);padding:.22rem .42rem;line-height:1;
}
nav.links{display:flex;align-items:stretch;margin-left:auto}
nav.links a{
  display:flex;align-items:center;padding-inline:1.35rem;text-decoration:none;
  font-size:.82rem;font-weight:600;letter-spacing:.02em;
  border-left:1px solid var(--rule);
  transition:background-color .2s cubic-bezier(.22,1,.36,1);
}
nav.links a:hover,nav.links a:focus-visible{background:var(--signal)}
nav.links a[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--ink);font-weight:700}
@media (max-width:1000px){nav.links{display:none}}
@media (max-width:620px){
  /* El logotipo caia en dos lineas y dejaba la cabecera a doble altura,
     descuadrada respecto al boton. El distintivo es decorativo: fuera. */
  .mark .m2{display:none}
  .mark .m1{font-size:1.35rem;white-space:nowrap}
  .mark{padding-right:.75rem}
  .nav-cta{padding-inline:.85rem;font-size:.62rem;letter-spacing:.07em;white-space:nowrap}
  header.nav .wrap{min-height:3.9rem}
  .status .wrap{min-height:auto;padding-block:.4rem}
}

/* menú móvil sin JS. Panel opaco: F-07 de la auditoría. */
.menu{display:none}
@media (max-width:1000px){
  .menu{display:block;border-top:1px solid var(--rule);background:var(--paper)}
  .menu summary{
    list-style:none;cursor:pointer;padding:.8rem var(--pad);
    font-size:var(--fs-meta);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
    display:flex;justify-content:space-between;align-items:center;
  }
  .menu summary::-webkit-details-marker{display:none}
  .menu summary::after{content:"+";font-size:1.05rem;line-height:1}
  .menu[open] summary::after{content:"\2013"}
  .menu ul{list-style:none;margin:0;padding:0 var(--pad) .9rem;display:grid}
  .menu > ul > li > a{
    display:block;padding:.7rem 0;text-decoration:none;
    border-top:1px solid var(--rule);font-family:var(--disp);
    text-transform:uppercase;font-weight:700;font-size:1.3rem;line-height:1;
  }
  .menu ul ul{padding:0 0 .5rem 0;display:grid;gap:.1rem}
  .menu ul ul a{
    display:block;padding:.42rem 0 .42rem .9rem;text-decoration:none;
    font-size:.9rem;color:var(--ink-2);border-left:1px solid var(--rule);
  }
}
.nav-cta{margin-left:auto}
nav.links + .nav-cta{margin-left:0}
.nav-cta{
  display:flex;align-items:center;padding-inline:1.5rem;background:var(--ink);color:var(--paper);
  text-decoration:none;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  transition:background-color .2s cubic-bezier(.22,1,.36,1),color .2s cubic-bezier(.22,1,.36,1);
}
.nav-cta:hover,.nav-cta:focus-visible{background:var(--signal);color:var(--ink)}

/* ---------- hero de portada ---------- */
.hero{position:relative;background:var(--night);color:var(--paper);overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,oklch(0.185 0.015 252/.86) 0%,oklch(0.185 0.015 252/.58) 42%,oklch(0.185 0.015 252/.92) 100%);
}
.hero-guides{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);pointer-events:none}
@media (min-width:900px){.hero-guides{grid-template-columns:repeat(12,1fr)}}
.hero-guides span{border-right:1px solid oklch(0.95 0 0/.09)}
.hero-guides span:last-child{border-right:none}
.hero .wrap{position:relative;padding-block:clamp(4rem,10vw,9rem) clamp(2rem,4vw,3rem)}
.hero-kicker{color:var(--signal);margin-bottom:clamp(1.4rem,3vw,2.2rem)}
h1.hero-h1{font-family:var(--disp);text-transform:uppercase;font-weight:800;font-size:var(--fs-h1);line-height:.83;letter-spacing:.002em;max-width:16ch}
h1.hero-h1 span{color:var(--signal)}
.hero-lower{display:grid;grid-template-columns:1fr;gap:2rem;margin-top:clamp(2rem,4vw,3.2rem);align-items:end}
@media (min-width:900px){.hero-lower{grid-template-columns:minmax(0,1fr) minmax(0,20rem)}}
.hero-lower p.lead{font-size:var(--fs-lead);max-width:52ch;color:oklch(0.90 0.008 250)}
.hero-acts{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.7rem}
.hero-card{border:1px solid oklch(0.95 0 0/.24);padding:1.15rem 1.25rem 1.3rem}
.hero-card .meta{color:var(--signal)}
.hero-card dl{margin:.85rem 0 0;display:grid;gap:.55rem}
.hero-card div{display:flex;justify-content:space-between;gap:1rem;border-bottom:1px dotted oklch(0.95 0 0/.2);padding-bottom:.45rem}
.hero-card dt{color:oklch(0.80 0.008 250);font-size:.84rem}
.hero-card dd{margin:0;font-weight:600;font-size:.9rem}
.btn{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;cursor:pointer;
  font-size:.75rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:1rem 1.6rem;border:1px solid currentColor;background:none;
  transition:background-color .2s cubic-bezier(.22,1,.36,1),color .2s cubic-bezier(.22,1,.36,1);
}
.btn-signal{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.btn-signal:hover,.btn-signal:focus-visible{background:var(--paper);border-color:var(--paper)}
.btn-ink{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn-ink:hover,.btn-ink:focus-visible{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.btn-line{color:inherit}
.btn-line:hover,.btn-line:focus-visible{background:currentColor}
.btn-line:hover span,.btn-line:focus-visible span{color:var(--night)}
.btn-line-ink:hover,.btn-line-ink:focus-visible{background:var(--ink);color:var(--paper)}

/* ---------- cabecera de página interior ---------- */
.phead{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.phead .wrap{position:relative;padding-block:clamp(2.6rem,6vw,5rem) clamp(2.2rem,5vw,4rem)}
.phead .hero-guides span{border-right-color:oklch(0.95 0 0/.07)}
.phead .kicker{color:var(--signal);margin-bottom:1rem}
.phead h1{
  font-family:var(--disp);text-transform:uppercase;font-weight:800;
  font-size:var(--fs-h1s);line-height:.85;letter-spacing:.002em;max-width:18ch;
}
.phead p.lead{margin-top:1.4rem;font-size:var(--fs-lead);max-width:58ch;color:oklch(0.88 0.008 250)}
.phead .phead-facts{
  display:flex;flex-wrap:wrap;gap:0 2.5rem;margin-top:1.8rem;padding-top:1.1rem;
  border-top:1px solid oklch(0.95 0 0/.22);
}
.phead .phead-facts div{padding-block:.5rem}
.phead .phead-facts dt{font-size:var(--fs-meta);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:oklch(0.78 0.008 250)}
.phead .phead-facts dd{margin:.3rem 0 0;font-family:var(--disp);text-transform:uppercase;font-weight:700;font-size:1.5rem;line-height:1}

/* ---------- migas ---------- */
.crumbs{border-bottom:1px solid var(--rule);background:var(--paper)}
.crumbs ol{
  list-style:none;margin:0;padding-block:.75rem;display:flex;flex-wrap:wrap;gap:.45rem;
  font-size:var(--fs-meta);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}
.crumbs a{text-decoration:none;display:inline-block;padding-block:.42rem;margin-block:-.42rem}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs li + li::before{content:"/";margin-right:.45rem;color:var(--rule)}
.crumbs [aria-current="page"]{color:var(--ink)}

/* ---------- estructura de sección ---------- */
section{padding-block:var(--sec)}
section.tight{padding-top:0}
.sec-head{
  display:grid;grid-template-columns:1fr;gap:1rem;align-items:end;
  border-bottom:1px solid var(--ink);padding-bottom:1.4rem;margin-bottom:clamp(2rem,4vw,3.2rem);
}
@media (min-width:900px){.sec-head{grid-template-columns:5.5rem minmax(0,1fr) minmax(0,26rem);gap:2.5rem}}
.sec-head .idx{font-size:var(--fs-meta);font-weight:700;letter-spacing:.16em;color:var(--ink-2)}
.sec-head h2{font-family:var(--disp);text-transform:uppercase;font-weight:700;font-size:var(--fs-h2);line-height:.85;letter-spacing:.004em}
.sec-head .aside{color:var(--ink-2);font-size:.98rem;line-height:1.5}

/* ---------- los tres caminos (portada) ---------- */
.paths{display:grid;grid-template-columns:1fr;border-top:1px solid var(--ink);border-left:1px solid var(--rule)}
@media (min-width:980px){.paths{grid-template-columns:repeat(3,1fr)}}
.path{
  display:flex;flex-direction:column;gap:.9rem;text-decoration:none;
  padding:1.7rem 1.6rem 1.9rem;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);
  transition:background-color .2s cubic-bezier(.22,1,.36,1);
}
.path:hover,.path:focus-visible{background:var(--paper-2)}
.path .pq{font-size:.95rem;color:var(--ink-2);font-style:italic;max-width:34ch}
.path h3{font-family:var(--disp);text-transform:uppercase;font-weight:800;font-size:clamp(1.9rem,3vw,2.5rem);line-height:.88;letter-spacing:.004em}
.path ul{list-style:none;margin:0;padding:0;display:grid;gap:.42rem;font-size:.93rem;color:var(--ink-2)}
.path li{padding-left:1rem;position:relative}
.path li::before{content:"";position:absolute;left:0;top:.62em;width:.42rem;height:1px;background:var(--signal-dk)}
.path .pfoot{
  margin-top:auto;padding-top:1.1rem;border-top:1px dotted var(--rule);
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;
}
.path .pprice{font-size:.85rem;font-weight:700}
.path .pprice.q{font-weight:500;color:var(--ink-2)}
.path .pgo{font-size:var(--fs-meta);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-dk)}
.path:hover .pgo{text-decoration:underline}

/* ---------- grupos de cobertura (los tres caminos) ---------- */
.covgroup + .covgroup{margin-top:clamp(2.4rem,4vw,3.4rem)}
.covgroup-h{
  font-family:var(--disp);text-transform:uppercase;font-weight:800;
  font-size:clamp(1.7rem,2.6vw,2.2rem);line-height:.9;letter-spacing:.004em;
}
.covgroup-q{margin-top:.5rem;margin-bottom:1.1rem;color:var(--ink-2);font-size:.98rem;font-style:italic;max-width:60ch}
/* Cada grupo llena su fila exacta: 4, 5 y 1. Sin fila huerfana. */
@media (min-width:1120px){.covgroup .coverage{grid-template-columns:repeat(var(--cols),1fr)}}

/* ---------- bloques de cobertura ---------- */
.coverage{display:grid;grid-template-columns:1fr;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
@media (min-width:640px){.coverage{grid-template-columns:1fr 1fr}}
@media (min-width:1120px){.coverage{grid-template-columns:repeat(5,1fr)}}
.cov{
  padding:1.35rem 1.4rem 1.5rem;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);
  display:flex;flex-direction:column;gap:.55rem;text-decoration:none;
  transition:background-color .2s cubic-bezier(.22,1,.36,1);
}
.cov:hover,.cov:focus-visible{background:var(--paper-2)}
.cov.is-new{background:var(--ink);color:var(--paper)}
.cov.is-new:hover,.cov.is-new:focus-visible{background:var(--night)}
.cov.is-new .cov-id{color:oklch(0.76 0.008 250)}
.cov.is-new p{color:oklch(0.83 0.008 250)}
.cov.is-new .price{border-top-color:oklch(0.95 0 0/.28);color:var(--signal)}
.cov.is-new .price.q{color:oklch(0.82 0.06 118)}
.cov.is-new .chip{border-color:var(--paper)}
.cov-top{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.cov-id{font-size:var(--fs-meta);font-weight:700;letter-spacing:.16em;color:var(--ink-2)}
.chip{
  font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:.24rem .5rem;border:1px solid var(--ink);line-height:1;white-space:nowrap;
}
.chip.on{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.chip.new{background:var(--ink);color:var(--paper)}
.cov h3{font-family:var(--disp);text-transform:uppercase;font-weight:700;font-size:1.55rem;line-height:.92;letter-spacing:.005em}
.cov p{color:var(--ink-2);font-size:.93rem;line-height:1.5}
.cov .price{margin-top:auto;padding-top:.85rem;border-top:1px dotted var(--rule);font-size:.82rem;font-weight:600}
.cov .price.q{color:var(--ink-2);font-weight:500}

/* ---------- tabla de tarifas ---------- */
/* T047. La tabla se arrastraba pero no lo decia: a 390 px se corta por la
   derecha y el corte parece final de contenido, no corte. Y lo que se come
   son las bandas de precio que aprobo Jaime.

   Probe primero el truco de sombras en el borde con fondos superpuestos
   `local`/`scroll`. Aqui NO sirve, y esta escrito para que nadie lo reintente:
   ese truco pinta en el fondo del contenedor y las celdas de esta tabla
   llevan fondo propio —el thead va sobre --ink y la fila destacada sobre
   verde—, asi que la sombra queda debajo y no se ve. Medido en el borde
   derecho: sobre la cabecera salian 21,26,31 planos, sin degradado.

   Queda un aviso que no depende de que el fondo se vea: una linea de texto
   explicita, solo mientras la tabla no cabe. Y el marco es foco de teclado
   con role=region, que es lo que hace que una zona con scroll se pueda
   recorrer sin raton (WCAG 2.1.1). Cero JavaScript. */
.tablewrap{overflow-x:auto;border:1px solid var(--ink)}
.tablewrap:focus-visible{outline:2px solid var(--signal-dk);outline-offset:2px}
.tablehint{
  display:none;margin-top:.55rem;color:var(--ink-2);
  font-size:var(--fs-meta);letter-spacing:.14em;text-transform:uppercase;
}
/* El aviso aparece cuando la tabla NO CABE, y eso depende del ancho del marco,
   no del de la ventana: con una media query el aviso desaparecia a 768 px
   mientras la tabla seguia arrastrandose. Por eso va con container query, que
   pregunta por la medida correcta.
   EL UMBRAL: 59rem, y esta elegido, no deducido. Historia corta porque ya me
   costo dos intentos:
     - 44rem, el min-width declarado de la tabla, es FALSO: .desc lleva su
       propio min-width de 20rem y empuja mas.
     - 53rem (848 px) es el ancho intrinseco de la tabla de portada EN INGLES.
       Tambien falso: hay OCHO tablas y no miden lo mismo. Inventario
       completo, contado sobre el build y no sobre las paginas que teniamos
       abiertas —dos veces nos quedamos cortos aqui—:
           /                                   1     848
           /es/                                1     856
           /services/                          2     848  886
           /es/services/                       2     856  935
           /services/ai-agent-services/        1     848
           /es/services/ai-agent-services/     1     856
       Con 53rem, las cinco mas anchas se quedaban sin aviso arrastrandose.
       Lo caza Alicia barriendo de dos en dos.
     - 59rem (944 px) cubre la mas ancha de las ocho, 935, mas los 2 px que la
       zona mide de mas que el marco por el borde de 1px de cada lado.
   CRITERIO DE ACEPTACION — leelo antes de tocar el 59. No es una disculpa
   por un numero holgado: es la regla con la que se valida esto.
       FALLO      = la tabla desborda y el aviso NO sale. Cero tolerancia.
                    Es invisible, y esconde las bandas de precio.
       ACEPTADO   = el aviso sale y la tabla ya cabia. Es visible y molesto,
                    no esconde nada, y NO se corrige apretando el umbral.
   Con ocho tablas de anchos distintos y un umbral unico, la coherencia
   estricta es inalcanzable: perseguirla reabre los falsos negativos, que son
   los que no se ven. Medido por Alicia sobre 4.640 comprobaciones (las ocho
   tablas x 580 anchos de 300 a 1458): 0 fallos. Los prematuros son 237 y
   estan TODOS en las seis que caben; en las dos de IA el aviso sale siempre
   y es correcto que salga, porque esa tabla no cabe a ningun ancho.
   Nota de rango: los anchos de arriba son los estables. Con el marco
   estrangulado a 320 px el min-content empuja mas y las de 848 suben a 864.
   Sigue muy por debajo del umbral.
   CAVEAT sobre las dos de IA: ahi el aviso esta permanentemente puesto,
   diciendole al visitante que deslice una tabla que no cabe en ningun sitio.
   Eso no es un aviso, es un sintoma —la tabla vive en div.prose de 676 px—.
   No se arregla desde aqui y no se intenta: es T053, de Diego.
   Y no: no se pasa el umbral por custom property desde la plantilla. Serian
   cuatro numeros medidos a mano que caducan al primer cambio de contenido de
   una columna. Uno holgado y explicado envejece mejor que cuatro exactos. */
.tablezone{container-type:inline-size}
@container (max-width:59rem){.tablehint{display:block}}
table.rates{width:100%;border-collapse:collapse;min-width:44rem;font-size:.96rem}
table.rates th,table.rates td{text-align:left;padding:1.05rem 1.15rem;border-bottom:1px solid var(--rule);vertical-align:top}
table.rates thead th{
  background:var(--ink);color:var(--paper);font-size:var(--fs-meta);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;border-bottom:none;white-space:nowrap;
}
table.rates tbody tr:last-child td{border-bottom:none}
table.rates tbody tr:hover{background:var(--paper-2)}
table.rates .svc{font-family:var(--disp);text-transform:uppercase;font-weight:700;font-size:1.3rem;line-height:.95;letter-spacing:.005em}
table.rates .svc a{text-decoration:none}
table.rates .svc a:hover{text-decoration:underline;text-decoration-thickness:2px}
table.rates .fig{font-weight:700;white-space:nowrap;font-size:1.02rem}
table.rates .dur{color:var(--ink-2);white-space:nowrap;font-size:.9rem}
table.rates .desc{color:var(--ink-2);font-size:.92rem;min-width:20rem}
table.rates tr.pick td,table.rates tr.pick th{background:oklch(0.872 0.187 118/.16)}
/* El rótulo va en el marcado, no en content: — se traduce sin tocar el CSS. */
.svc-note{
  display:block;font-family:var(--sans);font-size:.55rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--signal-dk);margin-top:.4rem;
}
.rates-foot{margin-top:1.1rem;color:var(--ink-2);font-size:.92rem;max-width:66ch}

/* ---------- lo que cambia ---------- */
.swaps{border-top:1px solid var(--ink)}
.swap{display:grid;grid-template-columns:1fr;gap:.5rem;padding-block:1.4rem;border-bottom:1px solid var(--rule)}
@media (min-width:900px){.swap{grid-template-columns:1fr 1fr;gap:3rem;align-items:start}}
.swap .before,.swap .after{display:flex;gap:.85rem;align-items:flex-start}
.swap .tagl{
  flex:none;font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:.24rem .45rem;line-height:1;margin-top:.28rem;
}
.swap .before .tagl{background:var(--alert);color:var(--paper)}
.swap .after .tagl{background:var(--signal);color:var(--ink)}
.swap .before p{color:var(--ink-2)}
.swap .after p{font-weight:600}

/* ---------- proceso ---------- */
.process{display:grid;grid-template-columns:1fr;border-top:1px solid var(--ink)}
@media (min-width:880px){.process{grid-template-columns:repeat(3,1fr)}}
.pstep{padding:1.7rem 1.5rem 1.9rem;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);position:relative}
.pstep:last-child{border-right:none}
.pstep .pn{font-family:var(--disp);font-size:clamp(3rem,5.5vw,4.4rem);font-weight:800;line-height:.8;color:oklch(0.620 0.010 250)}
.pstep h3{font-family:var(--disp);text-transform:uppercase;font-weight:700;font-size:1.75rem;line-height:.92;margin-top:.9rem}
.pstep p{margin-top:.7rem;color:var(--ink-2);font-size:.95rem;max-width:36ch}
.pstep .deliv{
  margin-top:1.2rem;padding-top:.75rem;border-top:1px solid var(--rule);
  font-size:var(--fs-meta);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-dk);
}

/* ---------- clientes ---------- */
/* ---------- banda tecnica: el circuito del agente supervisado ----------
   El SVG trae fondo #eef0f2, que es exactamente --paper, asi que se funde
   con la pagina y no necesita marco. Retrato por debajo de 720 px. */
.techband{margin:0;padding-block:clamp(2.5rem,6vw,5rem) clamp(2.5rem,6vw,4rem)}
.techband .meta{color:var(--ink-2);margin-bottom:1rem}
.techband img{width:100%;height:auto;border:1px solid var(--rule-soft)}
.techband figcaption{
  margin-top:1rem;max-width:58ch;color:var(--ink-2);font-size:.95rem;
}

/* T040: sin filtro y sin velo. saturate/contrast/brightness son correccion
   de fotografia: existen para domar una imagen cuyos niveles no controlas.
   Los de esta trama van escritos dentro del SVG (blancos .045-.11, verde .10),
   asi que el filtro corregia dos veces y borraba las tres bandas verdes
   (delta 30 -> 7 contra su fondo). El velo tampoco hacia falta: sin el,
   .cn lee 12,2:1 y el .aside 8,4:1 sobre el pixel mas claro de la trama.
   Lo que si hacia falta era opacar las celdas (/.34 -> /.93): con la trama
   a su fuerza real, las filas tabulares cruzaban POR DENTRO del registro y
   leian como subrayados, y las bandas verdes caian sobre clientes concretos
   como si los marcasen. Opacas, la trama vuelve a estar detras. */
.clients{position:relative;color:var(--paper);background:var(--night);overflow:hidden}
.clients-media{position:absolute;inset:0}
.clients-media img{width:100%;height:100%;object-fit:cover}
.clients .wrap{position:relative}
.clients .sec-head{border-bottom-color:oklch(0.95 0 0/.35)}
.clients .sec-head .idx,.clients .sec-head .aside{color:oklch(0.83 0.008 250)}
.ledger{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid oklch(0.95 0 0/.3);border-left:1px solid oklch(0.95 0 0/.3)}
@media (min-width:760px){.ledger{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1140px){.ledger{grid-template-columns:repeat(4,1fr)}}
.ledger div{
  padding:1.05rem 1.1rem 1.15rem;border-right:1px solid oklch(0.95 0 0/.3);border-bottom:1px solid oklch(0.95 0 0/.3);
  background:oklch(0.185 0.015 252/.93);
}
.ledger .cn{font-family:var(--disp);text-transform:uppercase;font-weight:700;font-size:1.45rem;line-height:.95;letter-spacing:.005em}
.ledger .cs{margin-top:.4rem;font-size:.68rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:oklch(0.80 0.06 118)}

/* ---------- prosa de página interior ---------- */
/* minmax(0,1fr) y min-width:0, no `1fr` a secas: la tabla de tarifas tiene
   min-width:44rem y en una columna `1fr` (= minmax(auto,1fr)) esa medida
   minima se propaga al grid y desborda la pagina en movil, aunque .tablewrap
   tenga su propio overflow-x. */
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.5rem,5vw,4.5rem)}
@media (min-width:1000px){.layout{grid-template-columns:minmax(0,1fr) minmax(0,20.5rem)}}
.prose{max-width:var(--prose);min-width:0}
.prose > * + *{margin-top:1.15rem}
.prose h2{
  font-family:var(--disp);text-transform:uppercase;font-weight:700;font-size:var(--fs-h2s);
  line-height:.9;letter-spacing:.004em;margin-top:clamp(2.4rem,4vw,3.4rem);
  padding-top:1.1rem;border-top:1px solid var(--ink);
}
.prose h2:first-child{margin-top:0;border-top:none;padding-top:0}
.prose h3{font-family:var(--disp);text-transform:uppercase;font-weight:700;font-size:1.45rem;line-height:.95;margin-top:2rem}
.prose p{color:var(--ink)}
.prose p.lead{font-size:var(--fs-lead);line-height:1.5}
/* :not(.btn) — si no, `.prose a` (0,1,1) gana a `.btn-ink` (0,1,0) y el boton
   sale tinta sobre tinta, invisible. */
.prose a:not(.btn){color:var(--ink);text-decoration-thickness:1px;text-underline-offset:.18em}
.prose a:not(.btn):hover{background:var(--signal);text-decoration:none}
.prose .btn{text-decoration:none;margin-top:.4rem}
.prose ul,.prose ol{margin-block:1.15rem;padding-left:0;list-style:none;display:grid;gap:.55rem}
.prose ul li{padding-left:1.35rem;position:relative;color:var(--ink-2)}
.prose ul li::before{content:"";position:absolute;left:0;top:.66em;width:.7rem;height:1px;background:var(--signal-dk)}
.prose ol{counter-reset:n}
.prose ol li{padding-left:2.1rem;position:relative;counter-increment:n;color:var(--ink-2)}
.prose ol li::before{
  content:counter(n,decimal-leading-zero);position:absolute;left:0;top:0;
  font-size:var(--fs-meta);font-weight:700;letter-spacing:.1em;color:var(--signal-dk);line-height:1.9;
}
.prose strong{font-weight:700;color:var(--ink)}

/* especificación en dos columnas: lo que en el sitio de 2019 era una lista suelta */
.spec{border-top:1px solid var(--ink);margin-top:clamp(2.4rem,4vw,3.4rem)}
.specrow{display:grid;grid-template-columns:1fr;gap:.4rem 2.5rem;padding-block:1.05rem;border-bottom:1px solid var(--rule)}
@media (min-width:720px){.specrow{grid-template-columns:minmax(0,15rem) minmax(0,1fr)}}
.specrow dt{font-family:var(--disp);text-transform:uppercase;font-weight:700;font-size:1.25rem;line-height:.98;letter-spacing:.005em}
.specrow dd{margin:0;color:var(--ink-2);font-size:.95rem}

/* aparato lateral */
.rail{display:grid;gap:1.5rem;align-content:start}
@media (min-width:1000px){.rail{position:sticky;top:6rem}}
.card{border:1px solid var(--ink);padding:1.25rem 1.3rem 1.4rem}
.card.solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.card.solid h2,.card.solid .meta{color:var(--signal)}
.card.solid a:not(.btn){color:var(--paper)}  /* :not(.btn): si no, el boton signal sale papel sobre chartreuse, 1.23:1 */
.card h2{font-size:var(--fs-meta);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.card ul{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.05rem}
.card li a{
  display:flex;justify-content:space-between;gap:.8rem;align-items:baseline;
  padding:.55rem 0;border-top:1px solid var(--rule);text-decoration:none;font-size:.93rem;
}
.card.solid li a{border-top-color:oklch(0.95 0 0/.2)}
.card li a:hover{color:var(--signal-dk)}
.card.solid li a:hover{color:var(--signal)}
.card li a[aria-current="page"]{font-weight:700}
.card li a .t{font-size:var(--fs-meta);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);flex:none}
.card.solid li a .t{color:oklch(0.78 0.008 250)}
.card p{margin-top:.8rem;font-size:.93rem;color:var(--ink-2)}
.card.solid p{color:oklch(0.85 0.008 250)}
.card .btn{margin-top:1.1rem;width:100%;justify-content:center}
.card .bigphone{
  display:block;margin-top:.5rem;font-family:var(--disp);text-transform:uppercase;font-weight:800;
  font-size:1.9rem;line-height:1;text-decoration:none;
}
.card .bigphone:hover{color:var(--signal)}

/* ---------- formulario ---------- */
.form{display:grid;gap:1.15rem;max-width:38rem}
.field{display:grid;gap:.4rem}
.field label{font-size:var(--fs-meta);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.field .hint{font-size:.85rem;color:var(--ink-2);letter-spacing:0;text-transform:none;font-weight:400}
.field .req{color:var(--alert)}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:1rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--ink);padding:.8rem .9rem;width:100%;border-radius:0;
}
.field textarea{min-height:9rem;resize:vertical}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 49%,var(--ink) 50%),linear-gradient(-45deg,transparent 49%,var(--ink) 50%);background-position:calc(100% - 1.15rem) 1.35rem,calc(100% - .8rem) 1.35rem;background-size:.4rem .4rem;background-repeat:no-repeat;padding-right:2.6rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--signal-dk);outline-offset:1px}
.hp{position:absolute;left:-9999px}
.form-note{font-size:.9rem;color:var(--ink-2);max-width:52ch}
.form-note a{color:var(--ink)}
/* Sin border-left de acento: un filete lateral de color es decoracion que
   finge jerarquia. El filete va debajo, donde si separa algo: la promesa
   del formulario. Arriba no separaba nada, era el principio de la columna. */
.promise{
  border-bottom:1px solid var(--ink);padding:0 0 1.3rem;
  display:grid;gap:.55rem;margin-bottom:1.6rem;max-width:60ch;
}
.promise p{font-size:.95rem;color:var(--ink-2)}
.promise p strong{color:var(--ink)}

/* ---------- CTA ---------- */
.cta{background:var(--signal);color:var(--ink)}
.cta-top{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,3vw,2.6rem);align-items:end}
@media (min-width:960px){.cta-top{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}}
.cta h2{font-family:var(--disp);text-transform:uppercase;font-weight:800;font-size:var(--fs-h2);line-height:.85}
/* .cta-top p y no .cta p: a secas (0,2,0) le ganaba a .crail-v y a .crail-n
   (0,1,0) y le metia tamano de lead al valor y a la nota del rail. */
.cta-top p{margin-top:1.1rem;max-width:46ch;font-size:var(--fs-lead);color:oklch(0.34 0.09 118)}
.cta .btn{justify-self:start;border-color:var(--ink)}
@media (min-width:960px){.cta .btn{justify-self:end}}
.cta .btn:hover{background:var(--ink);color:var(--signal)}

/* ---------- rail de contacto (emplazamiento 04, T041) ----------
   No hay fotografia del Weston Business Center y no la va a haber. El
   edificio ademas es un business center: una foto probaria que hay un
   edificio, no que hay una empresa. La prueba que busca un director de IT
   no es visual, es comprobable: un numero al que llamar, una puerta con
   numero de suite, un huso horario. El tipo hace el trabajo que iba a
   hacer la foto, a tamano de senaletica.
   line-height 1.06 y no <1: en /es/ las mayusculas acentuadas de Big
   Shoulders se solapan por debajo de 1.10 y aqui el valor puede crecer. */
.crail{
  --crail-mute:var(--ink-2);
  --crail-rule:var(--rule);
  display:grid;grid-template-columns:1fr;gap:0 clamp(1.5rem,3vw,3rem);
  border-top:2px solid currentColor;margin-top:clamp(2.2rem,4.5vw,3.4rem);
}
@media (min-width:720px){.crail{grid-template-columns:repeat(3,1fr)}}
.crail > div{padding-block:1.25rem 1.4rem}
@media (max-width:719px){.crail > div + div{border-top:1px solid var(--crail-rule)}}
.crail .meta{color:var(--crail-mute)}
.crail-v{
  display:block;margin-top:.55rem;font-style:normal;text-decoration:none;
  font-family:var(--disp);text-transform:uppercase;font-weight:700;
  font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.06;letter-spacing:.004em;
}
a.crail-v{
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.16em;
  text-decoration-color:transparent;
  transition:text-decoration-color .2s cubic-bezier(.22,1,.36,1);
}
a.crail-v:hover,a.crail-v:focus-visible{text-decoration-color:currentColor}
.crail-n{margin-top:.7rem;font-size:.92rem;line-height:1.5;color:var(--crail-mute);max-width:32ch}
.cta .crail{--crail-mute:oklch(0.36 0.08 118);--crail-rule:oklch(0.40 0.10 118/.4)}

/* En /contact/ el rail va suelto, sin CTA que lo envuelva: esa pagina no
   necesita un boton de "pedir cotizacion", necesita la prueba. */
.contactband{padding-top:0}
.contactband .crail{margin-top:0}

/* ---------- footer ---------- */
footer{background:var(--ink);color:oklch(0.76 0.008 250);padding-block:clamp(2.5rem,5vw,4rem)}
footer .wrap{display:grid;gap:2rem;grid-template-columns:1fr}
@media (min-width:820px){footer .wrap.cols{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2.5rem}}
footer h2{font-size:var(--fs-meta);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--signal);margin-bottom:.9rem}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.92rem}
footer a{text-decoration:none}
footer ul a{display:inline-block;padding-block:.28rem;margin-block:-.28rem}
footer a:hover{color:var(--paper)}
footer .mark{padding-block:.3rem}
footer address{font-style:normal;font-size:.92rem;line-height:1.5;margin-top:.9rem}
.partners h2{font-size:var(--fs-meta);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--signal);margin-bottom:.9rem}
.partners{margin-top:clamp(2rem,4vw,3rem);padding-top:1.3rem;border-top:1px solid oklch(0.95 0 0/.2)}
.partners .plist{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;font-size:.92rem}
.partners .plist li{color:oklch(0.83 0.008 250)}
.colophon{margin-top:clamp(2rem,4vw,3rem);padding-top:1.2rem;border-top:1px solid oklch(0.95 0 0/.2);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.colophon ul{display:flex;gap:1.4rem;flex-wrap:wrap}
.status a[href^="tel:"]{display:inline-block;padding-block:.45rem;margin-block:-.45rem}

/* ---------- 404 ---------- */
.notfound{padding-block:clamp(4rem,10vw,8rem)}
.notfound h1{font-family:var(--disp);text-transform:uppercase;font-weight:800;font-size:var(--fs-h1s);line-height:.85}
.notfound p{margin-top:1.2rem;max-width:52ch;font-size:var(--fs-lead);color:var(--ink-2)}

@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(16px);animation:rise .9s cubic-bezier(.16,1,.3,1) forwards}
  .rise:nth-child(2){animation-delay:.08s}
  .rise:nth-child(3){animation-delay:.16s}
  @keyframes rise{to{opacity:1;transform:none}}
}
@media print{
  .status,header.nav,.cta,.internal,.skip{display:none}
  body{background:#fff;color:#000}
}

/* ============================================================
   Castellano: mayúsculas acentuadas en los titulares condensados.

   Big Shoulders Display con line-height 0.83 deja una caja de línea
   de 125px a 1440; la tinta real de una mayúscula acentuada mide 147,
   y con una Q o una J en la línea de arriba el bloque llega a 166.
   En inglés no se nota porque no hay mayúsculas acentuadas: la tinta
   se queda en 124 contra una caja de 125, o sea que funciona por un
   píxel y por casualidad.

   Márgenes medidos por Diego sobre esta hoja, no estimados:
     .phead h1        lh .85   -21px a 1440, -14px a 834, -10px a 390
     .sec-head h2     lh .85   -17px a 1440
     h1.hero-h1       lh .83   -40px a 1440
     .prose h2        lh .90    -8px
     .pstep h3        lh .92    -4px
     .prose h3        lh .95    -3px
     .phead-facts dd  lh 1.00   -2px
   1.10 es el número al que el margen llega a cero.
   ============================================================ */
:lang(es) h1.hero-h1,
:lang(es) .phead h1,
:lang(es) .sec-head h2,
:lang(es) .cta h2,
:lang(es) .prose h2,
:lang(es) .prose h3,
:lang(es) .pstep h3,
:lang(es) .cov h3,
:lang(es) .covgroup-h,
:lang(es) .ledger .cn,
:lang(es) .phead-facts dd,
:lang(es) .crail-v{line-height:1.10}