/* ==========================================================================
   Plenum Reps — hoja de estilos única, compartida por las veintiuna páginas
   de los tres idiomas.
   Sin framework y sin dependencias, salvo la hoja de Google Fonts.

   El nombre de la empresa no aparece en ninguna parte del CSS: vive en
   src/_data/site.js y entra por el HTML. Acá solo hay estilo.

   Orden del archivo:
     1. Tokens
     2. Temas
     3. Reset y base
     4. Chrome (header, footer, skip link)
     5. Bandas y contenedor
     6. Bloques de contenido
     7. Responsive
     8. Movimiento reducido
   ========================================================================== */


/* == 1. Tokens ============================================================ */

:root {
  /* Paleta de identidad. Estos siete valores NO cambian con el tema:
     las bandas oscuras son oscuras en claro y en oscuro. */
  --ink:           #0B0C0D;
  --graphite:      #17191B;
  --silver:        #B8BEC4;
  --steel:         #6E767D;
  --paper:         #EDEEF0;
  --paper-hi:      #FFFFFF;

  /* Dorado: único color cromático del sitio. Vive en banda oscura.
     Contraste medido:
       --gold     sobre ink 8,09:1   sobre graphite 7,29:1   (texto)
       --gold-dim sobre ink 4,25:1   sobre graphite 3,83:1   (solo filetes)
       --bronze   sobre paper 6,30:1 sobre paper-hi 7,31:1   (texto, banda clara)
     --bronze sobre graphite da 2,41:1, así que NO se usa en banda oscura;
     y --gold sobre paper da 2,08:1, así que nunca va sobre fondo claro. */
  --gold:          #C9A227;
  --gold-dim:      #8A7327;
  --bronze:        #6B5312;

  /* Derivados neutros de la paleta, para superficies y bordes. */
  --graphite-hi:   #1F2225;
  --graphite-lift: #262A2E;
  --graphite-edge: #2C3034;
  --paper-edge:    #D4D8DC;
  --slate:         #4A5157;

  /* Tokens de tema. Valores del tema claro, completos, antes de cualquier
     bloque de tema. Gobiernan las bandas claras y el chrome, nada más. */
  --page-bg:      var(--paper);
  --alt-bg:       var(--paper);
  --alt-surface:  var(--paper-hi);
  --alt-fg:       var(--ink);
  --alt-dim:      var(--slate);
  --alt-rule:     var(--paper-edge);

  /* Acento de la banda clara y del chrome. En tema claro es bronce, porque
     el oro sobre papel no llega a contraste de texto. */
  --alt-accent:      var(--bronze);
  --alt-accent-rule: var(--bronze);

  /* El bloque de imagen es un área sólida de grafito. Sobre banda clara en
     tema oscuro el grafito se confunde con el fondo, así que sube un escalón. */
  --figure-bg:    var(--graphite);

  --chrome-bg:    var(--paper-hi);
  --chrome-fg:    var(--ink);
  --chrome-dim:   var(--slate);
  --chrome-rule:  var(--paper-edge);

  --chrome-accent:      var(--bronze);
  --chrome-accent-rule: var(--bronze);

  /* Tipografía. IBM Plex, con respaldo real en cada familia. */
  --font-display: "IBM Plex Sans Condensed", "Helvetica Neue", "Arial Narrow", Arial, sans-serif;
  --font-body:    "IBM Plex Sans", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  /* Ritmo. El gutter lateral se declara acá y se aplica una sola vez, en .wrap. */
  --wrap:    1100px;
  --gutter:  clamp(16px, 5vw, 40px);
  --band-y:  clamp(56px, 8vw, 100px);
  --rhythm:  clamp(28px, 4vw, 48px);

  /* Altura del header sticky, para el scroll-margin de las anclas. Es una
     sola en todos los anchos: bajo 1100px la navegación colapsa en un
     desplegable en vez de envolver, así que el header no crece nunca. */
  --header-h: 72px;

  /* Redondeo del selector de idioma y de su panel. */
  --lang-radius: 5px;

  /* Velo del hero: opacidad de una capa plana de --ink sobre la fotografía.
     No cambia con el tema, porque la banda del hero es oscura en los dos.
     El valor está medido contra el contraste real del titular, no estimado.
     Ver la nota en la regla .hero::before. */
  --hero-veil: 0.80;
}


/* == 2. Temas ============================================================= */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page-bg:     var(--ink);
    --alt-bg:      var(--graphite);
    --alt-surface: var(--graphite-hi);
    --alt-fg:      var(--paper);
    --alt-dim:     var(--silver);
    --alt-rule:    var(--graphite-edge);
    --figure-bg:   var(--graphite-lift);

    /* En tema oscuro la banda "clara" es grafito, no papel: ahí el acento
       vuelve a ser oro. El bronce sobre grafito da 2,41:1 y no se usa. */
    --alt-accent:      var(--gold);
    --alt-accent-rule: var(--gold-dim);

    --chrome-bg:   var(--ink);
    --chrome-fg:   var(--paper);
    --chrome-dim:  var(--silver);
    --chrome-rule: var(--graphite-edge);

    --chrome-accent:      var(--gold);
    --chrome-accent-rule: var(--gold-dim);
  }
}

:root[data-theme="dark"] {
  --page-bg:     var(--ink);
  --alt-bg:      var(--graphite);
  --alt-surface: var(--graphite-hi);
  --alt-fg:      var(--paper);
  --alt-dim:     var(--silver);
  --alt-rule:    var(--graphite-edge);
  --figure-bg:   var(--graphite-lift);

  --alt-accent:      var(--gold);
  --alt-accent-rule: var(--gold-dim);

  --chrome-bg:   var(--ink);
  --chrome-fg:   var(--paper);
  --chrome-dim:  var(--silver);
  --chrome-rule: var(--graphite-edge);

  --chrome-accent:      var(--gold);
  --chrome-accent-rule: var(--gold-dim);
}


/* == 3. Reset y base ====================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--alt-fg);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}

img,
svg { max-width: 100%; height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

/* El enlace descansa en el color de su banda, con el subrayado en el acento.
   El color entra en hover y en foco, que es donde el acento está autorizado.
   Así no queda dorado dentro del texto de cuerpo. */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--band-accent-rule, var(--alt-accent-rule));
  transition: color 120ms linear, border-color 120ms linear;
}

a:hover,
a:focus-visible {
  color: var(--band-accent, var(--alt-accent));
  border-color: var(--band-accent, var(--alt-accent));
}

/* El anillo de foco va en currentColor, o sea en el color del texto de la
   banda: tinta sobre papel y papel sobre negro. Es el máximo contraste
   disponible en las dos bandas, y no depende del acento. */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* La selección se queda en metal. El dorado no rellena áreas. */
::selection {
  background: var(--silver);
  color: var(--ink);
}

/* Etiqueta: mono, versalita ancha. Es el eyebrow de cada sección, y uno de
   los tres lugares donde vive el acento. */
.label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--band-accent, var(--alt-accent));
  margin: 0;
}

.measure { max-width: 65ch; }

/* Solo para lector de pantalla. Da nombre al selector de idioma sin ocupar
   espacio en el header. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* == 4. Chrome ============================================================ */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--graphite-edge);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

.skip:focus { left: 0; }


/* --- Header ---------------------------------------------------------------
   Oscuro en los dos temas, igual que las bandas oscuras: una superficie
   oscura es identidad, no tema. El header viaja fijo por encima de bandas
   claras y oscuras y por encima de la foto del hero, así que su contraste no
   puede depender ni del tema del lector ni de lo que pase por debajo.

   Sticky y no fixed: ocupa su lugar en el flujo, así que no hay que compensar
   con padding en el hero y un cambio de altura no rompe el layout en silencio.
   Cero JavaScript, acá y en los dos desplegables que contiene.
   -------------------------------------------------------------------------- */

.site-header {
  /* Tokens locales, del mismo modo que .band--dark. Fijos en ambos temas. */
  --hdr-fg:   var(--paper);
  --hdr-dim:  var(--silver);
  --hdr-rule: var(--graphite-edge);
  --band-accent:      var(--gold);
  --band-accent-rule: var(--gold-dim);

  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  color: var(--hdr-fg);
  border-bottom: 1px solid var(--hdr-rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 12px 28px;
  padding-block: 18px;
}

.brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3125rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hdr-fg);
  border-bottom: 0;
  margin-right: auto;
  white-space: nowrap;
}

.brand:hover,
.brand:focus-visible { color: var(--hdr-fg); }

/* Tipografía común de los dos desplegables y de la navegación. */
.menu__panel a,
.menu__btn,
.lang__code,
.lang__name,
.lang__menu a {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 0;
}


/* --- Los dos <details> del header -----------------------------------------
   Menú y idioma comparten atributo name, así que el navegador los trata como
   un grupo exclusivo: abrir uno cierra el otro, sin JavaScript. Donde el
   navegador todavía no soporte name, los dos paneles siguen sin taparse
   porque cada uno se ancla a un borde distinto del header.
   -------------------------------------------------------------------------- */

.menu,
.lang { position: relative; }

.menu__btn,
.lang__current {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  color: var(--hdr-fg);
  list-style: none;
}

.menu__btn { gap: 8px; }

/* El selector de idioma NO es un gemelo del boton de menu, y ese era el
   problema: dos summary identicos, uno al lado del otro, con el mismo chevron.
   Ahora va en caja con borde y con bandera, asi que se lee como un control
   distinto de un vistazo y sin depender del texto. Sin chevron: la bandera ya
   es la senal, y el chevron era justo lo que los volvia iguales. */
.lang__current {
  gap: 8px;
  padding: 6px 11px;
  border: 1px solid var(--steel);
  /* El único elemento redondeado del sitio, que es severo y a escuadra en todo
     lo demás. Va a propósito: la forma es lo que distingue este control del
     botón de menú, que es texto plano. */
  border-radius: var(--lang-radius);
  transition: border-color 120ms linear, color 120ms linear;
}

.lang__current:hover,
.lang[open] > .lang__current { border-color: var(--band-accent); }

/* El marcador por defecto del summary, en los dos motores. */
.menu__btn::-webkit-details-marker,
.lang__current::-webkit-details-marker { display: none; }

.menu__btn::marker,
.lang__current::marker { content: ""; }

.menu__btn:hover,
.lang__current:hover { color: var(--band-accent); }

/* Íconos propios. El tamaño va explícito porque la regla global de svg pone
   height:auto y deformaría el trazo. */
.menu__icon,
.lang__chev {
  flex: none;
  overflow: visible;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu__icon { width: 14px; height: 10px; }

/* El chevron gira al abrir: es la señal de que el desplegable está abierto,
   además del borde que cambia de color. */
.lang__chev {
  width: 10px;
  height: 6px;
  transition: transform 120ms linear;
}

.lang[open] .lang__chev { transform: rotate(180deg); }

/* El codigo va en ancho fijo para que los nombres del desplegable queden en
   columna, y no cambia de color con el enlace: es la etiqueta, no el enlace. */
.lang__code {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
}

.lang__menu .lang__code {
  min-width: 2.1em;
  color: var(--hdr-dim);
}

/* Paneles desplegables: absolutos, así que no empujan el contenido del header.
   El del menú se ancla a la izquierda y el del idioma a la derecha, de modo
   que ninguno se sale de la pantalla por su lado. */
.menu__panel,
.lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  z-index: 1;
  min-width: 11rem;
  padding: 6px 0;
  background: var(--ink);
  /* Borde en --steel y no en --hdr-rule: el panel flota por encima del
     contenido de la página, así que necesita recortarse contra cualquier
     fondo, no solo contra el negro del header. */
  border: 1px solid var(--steel);
}

/* Los dos se abren hacia la izquierda desde su propio botón, así que ninguno
   alcanza el borde derecho de la pantalla en móvil. */
.menu__panel,
.lang__menu { right: 0; }

.menu__panel a,
.lang__menu a {
  display: block;
  padding: 10px 18px;
  color: var(--hdr-dim);
  white-space: nowrap;
}

/* Mismo redondeo que la caja, para que se lean como una sola pieza. Los dos
   bordes derechos coinciden solos, porque el panel se ancla a la derecha del
   mismo .lang que contiene al botón. */
.lang__menu {
  min-width: 11.5rem;
  border-radius: var(--lang-radius);
}

.lang__menu a {
  display: flex;
  align-items: center;
  gap: 10px;
}

.menu__panel a:hover,
.menu__panel a:focus-visible,
.lang__menu a:hover,
.lang__menu a:focus-visible { color: var(--band-accent); }

.lang__menu [aria-current="true"] { color: var(--hdr-fg); }

/* --- La entrada de menú de la página actual -------------------------------
   Antes esto era solo --hdr-fg contra --hdr-dim: dos grises separados por muy
   poco, que en la práctica no se distinguían. Ahora la activa toma el dorado,
   que es el único color del sitio, y además lleva un filete. En el panel
   desplegable el filete va a la izquierda, porque el panel es una columna; en
   la barra horizontal va debajo, que es donde el ojo lo busca. */
.menu__panel a[aria-current="page"] {
  color: var(--band-accent);
  box-shadow: inset 2px 0 0 var(--band-accent);
}

/* Arriba del breakpoint el menú deja de ser desplegable y vuelve a ser una
   barra horizontal: se oculta el botón y se revela el panel aunque el
   <details> esté cerrado. Hacen falta las dos reglas, porque los motores
   ocultan ese contenido de dos maneras distintas: unos con display en el
   hijo, y Chromium moderno con content-visibility en ::details-content.

   El breakpoint subió de 961px a 1100px el 2026-09-17, cuando el menú pasó de
   cinco entradas a seis. Es el ancho en el que la barra más larga de los tres
   idiomas, la inglesa, todavía entra en una sola línea junto al wordmark y al
   selector de idioma. Si el nav envolviera, el header dejaría de tener una
   altura única y --header-h mentiría: las anclas internas quedarían tapadas.
   Antes de agregar una séptima entrada o de alargar una etiqueta, medir. */
@media (min-width: 1100px) {
  .menu > .menu__btn { display: none; }

  .menu::details-content { content-visibility: visible; }

  .menu__panel {
    position: static;
    display: flex;
    gap: 8px 22px;
    min-width: 0;
    padding: 0;
    background: none;
    border: 0;
  }

  .menu__panel a {
    position: relative;
    padding: 7px 0;
    color: var(--hdr-dim);
  }

  /* En barra el filete pasa de la izquierda a abajo, pegado al texto. El
     padding-block de arriba es lo que le deja sitio sin cambiar la altura del
     header: el enlace sigue midiendo menos que el wordmark y que la caja de
     idioma, que son las dos piezas que fijan la altura. */
  .menu__panel a[aria-current="page"] { box-shadow: none; }

  .menu__panel a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--band-accent);
  }

  /* La caja del selector ya lo separa del menú; una línea vertical además
     sería una segunda separación para lo mismo. */
  .lang { margin-left: 6px; }
}


/* --- Footer. Este sí sigue el tema, como el resto del chrome. --- */

.site-footer {
  --band-accent:      var(--chrome-accent);
  --band-accent-rule: var(--chrome-accent-rule);

  background: var(--chrome-bg);
  color: var(--chrome-dim);
  border-top: 1px solid var(--chrome-rule);
  padding-block: 40px;
  font-size: 0.875rem;
}

.site-footer a { color: var(--chrome-dim); }

.site-footer a:hover,
.site-footer a:focus-visible { color: var(--chrome-accent); }

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  justify-content: space-between;
  align-items: flex-start;
}

.site-footer p + p { margin-top: 10px; }

.site-footer__col { max-width: 46ch; }


/* == 5. Bandas y contenedor =============================================== */

/* Con el header sticky, una ancla sin scroll-margin deja el titulo de la
   seccion escondido detras del header. Va por atributo y no por lista de ids,
   porque las anclas estan localizadas (#lineas contra #lines) y una lista se
   desincroniza en cuanto se toca una de las dos paginas. */
.band[id],
main[id] {
  scroll-margin-top: calc(var(--header-h) + 24px);
}

/* El gutter lateral vive acá y en ningún otro lado. */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band {
  background: var(--band-bg);
  color: var(--band-fg);
  padding-block: var(--band-y);
}

/* Banda oscura: identidad, no tema. Los mismos valores en claro y en oscuro. */
.band--dark {
  --band-bg:      var(--ink);
  --band-fg:      var(--paper);
  --band-dim:     var(--silver);
  --band-rule:    var(--graphite-edge);
  --band-surface: var(--graphite);

  --band-accent:      var(--gold);
  --band-accent-rule: var(--gold-dim);
}

/* Banda clara: es lo que cambia con el tema. */
.band--alt {
  --band-bg:      var(--alt-bg);
  --band-fg:      var(--alt-fg);
  --band-dim:     var(--alt-dim);
  --band-rule:    var(--alt-rule);
  --band-surface: var(--alt-surface);

  --band-accent:      var(--alt-accent);
  --band-accent-rule: var(--alt-accent-rule);
}

/* Encabezado de sección: rótulo, título, bajada. Un solo bloque con un solo
   margen inferior, para que no se peleen dos selectores por el espaciado. */
.sec-head { margin-bottom: var(--rhythm); }
.sec-head .label { margin-bottom: 14px; }
.sec-head h2 { font-size: clamp(1.6rem, 3.4vw, 2.35rem); }

/* La línea fina bajo el título de sección. Es filete, no relleno: 52 × 2. */
.sec-head h2::after {
  content: "";
  display: block;
  width: 52px;
  height: 2px;
  margin-top: 20px;
  background: var(--band-accent-rule);
}

.sec-head__lead {
  margin-top: 18px;
  max-width: 65ch;
  color: var(--band-dim);
  font-size: 1.0625rem;
}


/* == 6. Bloques de contenido ============================================== */

/* --- Hero. Oscuro, y dimensionado por su contenido: no ocupa la ventana. --- */

.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(60px, 9vw, 116px) clamp(48px, 6vw, 72px);
}

/* Hero de página interior: mismo lenguaje, menos aire y titular más corto.
   Las siete páginas comparten el componente. */
.hero--page {
  padding-block: clamp(48px, 6.5vw, 84px) clamp(40px, 5vw, 60px);
}

.hero--page h1 { font-size: clamp(1.75rem, 3.9vw, 2.7rem); max-width: 24ch; }
.hero--page .hero__lead { margin-top: 22px; }

/* La fotografía de cada hero se declara acá y NO en un atributo style de la
   página. Motivo: un url() dentro de un valor CSS se resuelve contra la hoja
   donde se usa, no contra el documento. Esta hoja vive en la raíz del sitio,
   así que "img/hero.webp" resuelve igual desde /index.html, desde /en/ y desde
   /pt/. Pasarla por variable desde el HTML hacía que "../img/..." se resolviera
   un nivel por encima de la raíz y la foto no cargaba en inglés ni portugués.
   Tampoco sirve la ruta absoluta "/img/...": rompe la vista local por file://.
   El color de la banda queda detrás como respaldo mientras carga. */
.hero--photo {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

/* Una clase por foto. El sufijo es el nombre del archivo, así que la regla se
   verifica de un vistazo contra src/img/. No hay una clase por página: infra y
   seguridad quedaron con su nombre viejo y las usan data center y
   videovigilancia. Lo que manda es que el sufijo exista en src/img/. */
.hero--photo-hero        { background-image: url("img/hero.webp"); }
.hero--photo-infra       { background-image: url("img/infra.webp"); }
.hero--photo-seguridad   { background-image: url("img/seguridad.webp"); }
.hero--photo-fabricantes { background-image: url("img/fabricantes.webp"); }
.hero--photo-contacto    { background-image: url("img/contacto.webp"); }

/* Hero sin fotografía: banda sólida de grafito, a propósito y no por descuido.
   Drones y ciberseguridad no tienen imagen propia todavía, y un bloque sólido
   honesto se ve mejor que un stock genérico o que una referencia a un archivo
   que no existe. Es grafito y no el negro de la banda para que se lea como una
   superficie elegida y no como un hero al que no le cargó la foto.
   Cuando exista la foto: agregar su regla .hero--photo-<archivo> arriba y
   cambiar .hero--solid por .hero--photo .hero--photo-<archivo> en el JSON. */
.hero--solid { background-color: var(--graphite); }

/* Velo: una capa plana de --ink con opacidad. No es gradiente, no es color
   nuevo y no es efecto: es el mismo negro de la banda, bajado en alfa hasta
   que el titular mantiene contraste de texto sobre la franja clara del piso. */
.hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--ink);
  opacity: var(--hero-veil);
}

.hero__label { margin-bottom: 24px; }

.hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  line-height: 1.06;
  max-width: 27ch;
}

.hero__lead {
  margin-top: 26px;
  max-width: 58ch;
  color: var(--band-dim);
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
}

.hero__actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
}

/* --- Tira de datos. Mono, tabular, sobre banda oscura.

   Las etiquetas se pegan abajo con margin-top auto, así que una cifra que
   ocupe dos líneas no desalinea las etiquetas del resto de la fila. --- */

.datastrip {
  margin-top: clamp(44px, 6vw, 68px);
  border-top: 1px solid var(--band-rule);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}

.datastrip__item {
  padding: 26px 22px 24px 0;
  border-right: 1px solid var(--band-rule);
  display: flex;
  flex-direction: column;
}

.datastrip__item:last-child { border-right: 0; }

.datastrip__value {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.1875rem, 2.2vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--band-fg);
}

.datastrip__label {
  display: block;
  margin-top: auto;
  padding-top: 10px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--band-dim);
}

.datastrip__note {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--band-dim);
  max-width: 72ch;
}

/* --- Botón. De borde, nunca de relleno. Una sola transición de estado. --- */

.btn {
  display: inline-block;
  padding: 12px 22px;
  border: 1px solid var(--band-accent);
  background: transparent;
  color: var(--band-accent);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 120ms linear, border-color 120ms linear;
}

/* En hover el texto pasa al color de la banda y el borde se queda en el
   acento. No hay relleno de fondo en ningún estado. */
.btn:hover,
.btn:focus-visible {
  background: transparent;
  color: var(--band-fg);
}

/* Secundario: sin acento. El dorado es solo del CTA primario. */
.btn--quiet {
  border-color: var(--steel);
  color: var(--band-dim);
}

.btn--quiet:hover,
.btn--quiet:focus-visible {
  background: transparent;
  border-color: var(--band-fg);
  color: var(--band-fg);
}

/* --- Enlace de continuación entre páginas. --- */

.more { margin-top: 28px; }

.more a {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.more a::after { content: " \2192"; }


/* --- Rejillas. --- */

.cols-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 64px);
}

.cols-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3.2vw, 40px);
}

.cols-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.6vw, 44px);
}


/* --- Línea de negocio. --- */

.line__title {
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  margin-top: 26px;
}

/* El margen de arriba existe para separar el título de la foto que lo precede.
   En la rejilla de verticales del inicio no hay foto, así que el título abre el
   bloque y ese margen dejaría las cuatro columnas desalineadas. */
.line > .line__title:first-child { margin-top: 0; }

.line__intro {
  margin-top: 14px;
  color: var(--band-dim);
  max-width: 48ch;
}

.catlist {
  margin-top: 26px;
  border-top: 1px solid var(--band-rule);
}

.catlist li {
  padding: 13px 0;
  border-bottom: 1px solid var(--band-rule);
}

.catlist strong {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--band-fg);
}

.catlist span {
  display: block;
  margin-top: 3px;
  color: var(--band-dim);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Cuando la lista va a ancho completo de banda (páginas interiores) el rótulo
   y su explicación se reparten en dos columnas. A una sola, la línea de texto
   se estira muy por encima de la medida de lectura. Dentro de .cols-2, en el
   inicio, la lista sigue siendo de una columna y no la toca este selector. */
.wrap > .catlist li {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 4px 36px;
  align-items: start;
  padding-block: 16px;
}

.wrap > .catlist span {
  margin-top: 0;
  max-width: 62ch;
}

.line__sectors {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--band-dim);
}

/* --- Bloque de imagen. Conserva el 16/9 que tenía el bloque sólido, así que
   las dos columnas de la sección 2 siguen alineadas aunque las fotos no
   compartan proporción nativa. --figure-bg queda detrás mientras carga. --- */

.figure {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 50%;
  background-color: var(--figure-bg);
}

/* Figura de columna: acompaña un bloque de texto alto, así que toma proporción
   vertical en vez del 16/9 de las figuras a ancho completo. */
.figure--tall { aspect-ratio: 4 / 5; }

/* --- Gráfico de densidad por rack. Una sola serie, un solo tono: el acento de
   la banda, que ya resuelve bronce o oro según banda y tema. Todo el texto va
   en tokens de texto y ninguno se apoya sobre la barra, así que no hace falta
   un token de "texto sobre acento" ni hay riesgo de contraste. --- */

.dens {
  margin: 30px 0 0;
  max-width: 100%;
}

.dens__cap {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--band-dim);
  margin-bottom: 22px;
}

.dens__row + .dens__row { margin-top: 22px; }

/* Nombre y valor juntos y encima de su barra: es etiqueta directa, no leyenda,
   y a la vez es lo que lee un lector de pantalla en orden — "Rack corporativo,
   10 kW". Nunca se encabalgan con la barra porque no se apoyan sobre ella. */
.dens__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 16px;
  margin-bottom: 9px;
}

.dens__name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--band-fg);
}

.dens__val {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  color: var(--band-fg);
}

.dens__track {
  position: relative;
  height: 26px;
  background-color: var(--band-rule);
}

/* --from y --to son el valor en kW sobre 1.000, ya en porcentaje. El min-width
   es solo para que un tramo diminuto siga teniendo píxeles a 400px; no altera
   la escala, que arranca en el mismo --from. */
.dens__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--from);
  right: calc(100% - var(--to));
  min-width: 3px;
  background-color: var(--band-accent);
}

.dens__scale {
  position: relative;
  height: 28px;
  margin-top: 10px;
}

.dens__tick {
  position: absolute;
  top: 0;
  left: var(--at);
  transform: translateX(-50%);
  padding-top: 11px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--band-dim);
  white-space: nowrap;
}

.dens__tick::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 6px;
  background-color: var(--band-rule);
}

.dens__tick--first { transform: none; }
.dens__tick--first::before { left: 0; }

.dens__tick--last { transform: translateX(-100%); }
.dens__tick--last::before {
  left: auto;
  right: 0;
}

.dens__src {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.6;
  color: var(--band-dim);
}

/* --- Tarjeta de servicio. --- */

.card {
  border-top: 1px solid var(--band-rule);
  padding-top: 22px;
}

.card h3 { font-size: 1.1875rem; }

.card p {
  margin-top: 12px;
  color: var(--band-dim);
  font-size: 0.9375rem;
}

/* --- Cuerpo de texto de criterio. El nombre viene de la página de criterio
   técnico, que se disolvió el 2026-09-17; la clase sobrevivió porque el bloque
   sigue siendo el mismo en las cuatro verticales y en fabricantes. --- */

.crit + .crit { margin-top: clamp(40px, 5.5vw, 68px); }

.crit h3 { font-size: clamp(1.25rem, 2.1vw, 1.5rem); }

.crit__body {
  margin-top: 16px;
  max-width: 65ch;
}

.crit__body p + p { margin-top: 14px; }

.table-scroll {
  margin-top: 28px;
  overflow-x: auto;
  border: 1px solid var(--band-rule);
}

table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

caption {
  caption-side: bottom;
  padding: 12px 14px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: var(--band-dim);
  border-top: 1px solid var(--band-rule);
}

th,
td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--band-rule);
  font-size: 0.875rem;
}

thead th {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--band-dim);
}

tbody th { font-weight: 600; }

tbody td {
  font-family: var(--font-mono);
  font-weight: 400;
  white-space: nowrap;
}

tbody tr:last-child th,
tbody tr:last-child td { border-bottom: 0; }

/* --- Requisitos del comprador público. --- */

.reqs {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--band-rule);
  border: 1px solid var(--band-rule);
}

.reqs > li {
  background: var(--band-surface);
  padding: 20px;
}

.reqs h4 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--band-fg);
}

.reqs p {
  margin-top: 10px;
  color: var(--band-dim);
  font-size: 0.875rem;
  line-height: 1.55;
}

/* --- Aliados: el hueco, dicho como criterio. --- */

.tier + .tier { margin-top: clamp(34px, 4.5vw, 52px); }

.tier__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--band-rule);
}

.tier__head h3 { font-size: 1.125rem; }

.tier__status {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--band-dim);
}

.tier__note {
  margin-top: 14px;
  color: var(--band-dim);
  font-size: 0.9375rem;
  max-width: 65ch;
}

.slots {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 12px;
}

.slots li {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  background: var(--graphite);
  border: 1px dashed var(--steel);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--band-dim);
}

.disclosure {
  margin-top: clamp(36px, 5vw, 56px);
  padding: 22px 24px;
  border-left: 2px solid var(--band-accent-rule);
  background: var(--graphite);
  color: var(--silver);
  font-size: 0.9375rem;
  max-width: 68ch;
}

/* --- Contacto. --- */

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

.contact__lead p { color: var(--band-dim); max-width: 55ch; }
.contact__lead p + p { margin-top: 14px; }

.dl {
  border-top: 1px solid var(--band-rule);
  margin: 0;
}

.dl__row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--band-rule);
}

.dl dt {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--band-dim);
}

.dl dd {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--band-fg);
}

.pending { color: var(--band-dim); }


/* == 7. Responsive ======================================================== */

@media (max-width: 860px) {
  .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .cols-2 { grid-template-columns: minmax(0, 1fr); }

  .wrap > .catlist li { grid-template-columns: minmax(0, 1fr); }
  .wrap > .catlist span { margin-top: 4px; }
  .hero h1 { max-width: none; }

  /* Una cifra por fila: en angosto la rejilla de dos dejaba los bordes
     desparejos y las etiquetas partidas. */
  .datastrip { grid-template-columns: minmax(0, 1fr); }

  .datastrip__item {
    padding-right: 0;
    border-right: 0;
    border-bottom: 1px solid var(--band-rule);
  }

  .datastrip__item:last-child { border-bottom: 0; }
}

@media (max-width: 560px) {
  .cols-3 { grid-template-columns: minmax(0, 1fr); }

  .cols-4 { grid-template-columns: minmax(0, 1fr); }

  /* Cinco marcas de escala se encabalgan a este ancho: quedan las tres que
     sostienen la lectura, 0 / 500 kW / 1 MW. */
  .dens__tick--fine { display: none; }

  .site-header__inner {
    align-items: flex-start;
    gap: 14px 20px;
  }

  .brand {
    margin-right: 0;
    width: 100%;
  }

  .lang {
    border-left: 0;
    padding-left: 0;
    margin-left: auto;
  }
}


/* == 8. Movimiento reducido =============================================== */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}