/* =====================================================================
   BRILTEC v14 — «Destello»  (parte de v13 «Archivo», que no se modifica)

   Papel cálido + dos capítulos a sangre en navy. Cero tarjetas, cero
   sombras: todo se separa con reglas. El azul es acento puntual, nunca
   fondo de superficie grande sobre papel.

   ORDEN DEL ARCHIVO — respetarlo al editar:
     1. Tokens
     2. Reset y tipografía base
     3. Utilidades (wrap, mono, rail, reglas)
     4. Componentes (botones, campos)
     5. Secciones, EN ORDEN DE APARICIÓN EN LA PÁGINA
     6. Estados de movimiento (html.motion)
     7. Media queries, agrupados y en ORDEN ASCENDENTE de ancho
     8. @media print

   El CHANGELOG de v12 señala que allá los media queries quedaron fuera de
   orden y se volvieron una trampa para quien editara después. Acá van
   todos juntos al final. No agregar media queries sueltos entre secciones.
   ===================================================================== */

/* ======================= 1 · TOKENS ================================= */
:root{
  /* Papel — cálido, nunca blanco puro ni azulado */
  --paper:#F7F5F1;
  --paper-2:#EFEBE4;

  /* Tinta */
  --ink:#15171A;
  --ink-2:#565C63;
  /* --ink-3 es el color de los metadatos en mono a 11 px, así que tiene que
     pasar AA como texto chico. Medido con el arnés sobre --paper:
     #7C838C → 3,52:1 (no)   #6B727A → 4,47:1 (no)   #646B73 → 4,8:1 (sí). */
  --ink-3:#646B73;

  /* Reglas */
  /* Tres pesos y no dos: pelo dentro de una lista, regla entre bloques y
     barra al abrir capítulo. Antes .16 y .08 hacían todo el trabajo y el
     documento entero sonaba al mismo volumen. */
  --rule:rgba(21,23,26,.26);
  --rule-soft:rgba(21,23,26,.11);
  --rule-w:1px;
  --rule-barra:3px;

  /* Capítulo oscuro */
  --night:#070C12;
  --night-2:#0B131C;
  --night-tx:#E9EEF3;
  --night-tx2:#93A3B3;
  --night-tx3:#8296A9;
  --hair:rgba(233,238,243,.11);
  --hair-soft:rgba(233,238,243,.055);

  /* Marca.
     --accent    es el azul de la marca: rellenos, la estrella del logo, el
                 punto del depósito, fondos de estado. No se toca.
     --accent-tx es el MISMO azul apenas más oscuro, para cuando es TEXTO
                 sobre papel: a 14,5 px, #1E75BB da 4,47:1 y no pasa AA.
                 Medido con el arnés. Usar siempre éste en texto azul.
     --accent-br es el azul sobre los capítulos oscuros. */
  /* Rojo de error. Estaba escrito a mano en .field__err y NO se remapeaba:
     sobre el navy del capitulo de contacto daba 3,57:1, por debajo de AA
     para texto de 13 px. El claro pasa 4,89:1 sobre papel; el de los
     capitulos oscuros, 6,35:1 sobre --night. */
  --err:#C0392B;
  --accent:#1E75BB;
  --accent-tx:#1B6AAB;
  --accent-br:#3B9AF0;

  /* Código de color por zona de riesgo (Fig. 03).
     No es paleta de marca: es la norma del rubro —paños y mopas de color
     distinto según la zona, para no arrastrar contaminación del baño a la
     cocina— y por eso los valores no se eligen por gusto. Van apagados a
     propósito: tienen que leerse como código industrial, no como
     resaltador. El azul ES el de la marca, para no sumar un quinto color
     al sistema. */
  --z-rojo:#B8382C;
  --z-amarillo:#BC8E12;
  --z-verde:#2C7A52;
  --z-azul:var(--accent);

  /* Anchos de Archivo. El eje estaba APAGADO en v14 — medido: 729,4 px
     idénticos de wdth 62 a wdth 125. Tres anchos y no más:
       --w-ancho    titulares — chapa estampada, no grotesca de galería
       --w-normal   subtítulos y nombres de marca
       --w-angosto  rótulos y cifras — etiqueta impresa */
  --w-ancho:112;
  --w-normal:100;
  --w-angosto:86;

  /* ESCALA. v14 tenía 26 tamaños distintos en 66 declaraciones, con ONCE
     escalones entre 12 y 20 px: 0.875 / 0.90625 / 0.9375 / 0.96875 / 1 /
     1.0625 / 1.125 / 1.1875 / 1.25… Nadie decide once tamaños; se van
     acumulando. Siete escalones, y todo lo demás se compone contra ellos.
       --t-xs    rótulos chicos       11 px
       --t-sm    rótulo estándar      12 px
       --t-nota  notas y errores      13 px
       --t-2     texto secundario     15 px
       --t-1     cuerpo               16 px
       --t-3     lead                 17 px
       --t-4     título de ítem       19 px
       --t-5     cita / campo grande  22 px */
  --t-xs:0.6875rem;
  --t-sm:0.75rem;
  --t-nota:0.8125rem;
  --t-2:0.9375rem;
  --t-1:1rem;
  --t-3:1.0625rem;
  --t-4:1.1875rem;
  --t-5:1.375rem;

  /* Tipografía */
  --f-display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Chivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;

  /* Movimiento */
  --ease:cubic-bezier(0.16,1,0.3,1);
  --t-micro:200ms; --t-med:380ms; --t-macro:700ms;

  /* Medidas */
  /* Cero radio en toda la hoja. El 2px de v13 era un resto que nadie
     decidió: ni redondea ni deja de redondear. */
  --radius:0px;
  --wrap:1320px;
  --pad:clamp(1.5rem,5vw,4rem);
  --rail:300px;
  --gap:80px;
  /* C1 · Separación ENTRE capítulos, comprimida ~20 % respecto de v13
     (era clamp(80px,9vw,132px)). El aire en blanco es caro cuando separa
     contenido denso; cuando separa contenido escaso se lee como página
     sin terminar, y además empujaba el mapa más allá del 55 % del scroll.
     La composición interna de cada sección no se toca. */
  --sp-sec:clamp(64px,7.2vw,106px);
  --nav-h:84px;
  /* A2 · La barra es sticky y suma masthead + nav + progreso (~119 px).
     Sin compensación, el anclaje deja el título de la sección justo
     debajo de la barra. Éste es el valor con aire por encima. */
  --anchor-off:148px;
}
/* v14 bajaba la regla a MEDIO PÍXEL en retina —o sea, en la pantalla desde
   la que se mira la maqueta— y así todo el documento quedaba dibujado con
   susurros. Se mantiene 1 px y sube la opacidad: una regla que separa
   tiene que verse. */
@media (min-resolution:2dppx){
  :root{ --rule:rgba(21,23,26,.30); --hair:rgba(233,238,243,.16); }
}

/* ================= 2 · RESET Y TIPOGRAFÍA BASE ====================== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;hanging-punctuation:first last;
  scrollbar-color:var(--ink-3) transparent;scrollbar-width:thin;}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:var(--t-1);line-height:1.62;letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:hidden;}

/* height:auto es defensivo: sin él, el atributo height="N" del HTML gana
   sobre el ancho fijado por CSS y la imagen renderiza deformada. */
img,svg{max-width:100%;}
img{height:auto;display:block;}

a{color:inherit;text-decoration:none;}
ul,ol{margin:0;padding:0;list-style:none;}
p{margin:0;max-width:62ch;text-wrap:pretty;}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}

/* La regla que corrige el defecto de v12: el tracking negativo SIEMPRE va
   compensado con word-spacing. Sin esto las palabras se pegan. */
/* El tracking negativo SIEMPRE va compensado con word-spacing — regla
   heredada de v12, donde sin eso las palabras se pegaban.

   Los titulares usan el eje de ancho, que en v14 estaba muerto. A wdth 112
   Archivo deja de leerse como grotesca de galería y pasa a leerse como
   chapa estampada. Verificado que los cuatro renglones del hero, que están
   cortados a mano en el marcado, entran a todos los anchos: a 1280 el más
   largo mide 535 px en una columna de 772. */
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:600;
  font-variation-settings:"wdth" var(--w-ancho);
  letter-spacing:-0.022em;word-spacing:0.02em;line-height:1.02;text-wrap:balance;}
h1{font-size:clamp(2.6rem,5.4vw,4.875rem);letter-spacing:-0.026em;line-height:0.97;
  font-weight:700;}
h2{font-size:clamp(1.9rem,3.2vw,2.875rem);letter-spacing:-0.024em;line-height:1;}
/* h3 y h4 rotulan bloques dentro de una lista: al ancho normal, para que
   no compitan con el titular del capítulo. */
h3{font-size:1.3125rem;letter-spacing:-0.012em;line-height:1.2;
  font-variation-settings:"wdth" var(--w-normal);}
h4{font-size:var(--t-3);letter-spacing:-0.010em;line-height:1.25;
  font-variation-settings:"wdth" var(--w-normal);}

b,strong{font-weight:600;}
.num,.tnum,b,strong{font-variant-numeric:tabular-nums;}
::selection{background:var(--accent);color:#fff;}
/* Sobre navy el acento es el celeste claro, y el blanco encima da 2,6:1.
   Se invierte a la misma tinta que ya usa el boton primario oscuro. */
.night ::selection{background:var(--accent-br);color:#04101C;}

/* ===================== 3 · UTILIDADES ============================== */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);}

/* A2 · Todo destino de anclaje respeta la altura de la barra fija. */
main > section[id],#top,#buscar,#dilucion{scroll-margin-top:var(--anchor-off);}

/* EL RÓTULO — la causa principal del efecto «estudio de arquitectura».
   Era IBM Plex Mono a 11 px, 0.17em de tracking, versalita, en gris claro,
   usado unas 60 veces: la voz de un curador poniendo cartelitos al lado de
   las obras. Y con ese estilo estaba escrito lo más importante que dice la
   página — el plazo de entrega y el teléfono.

   Pasa a etiqueta impresa: más grande, casi sin tracking, más oscura, y en
   Archivo angosto en lugar de mono. El rol mono NO se elimina: sobrevive
   para un solo trabajo —los datos que cambian— y ahí sí es la voz correcta. */
.mono{font-family:var(--f-display);font-weight:600;font-size:var(--t-sm);
  font-variation-settings:"wdth" var(--w-angosto);
  letter-spacing:0.045em;text-transform:uppercase;color:var(--ink-2);line-height:1.35;}
/* El único lugar donde la mono sigue siendo la voz correcta: cifras que
   cambian solas. Es tabular por construcción, así que no bailan al
   recalcular. */
/* Los datos que cambian solos: el estado del depósito, los tres resultados
   de la calculadora y las cuatro cifras que cuentan al entrar en pantalla.
   La mono es tabular por construcción, así que las cifras no bailan de
   ancho mientras se recalculan — que es exactamente para lo que sirve una
   mono, y no para rotular una página entera. */
.mono--dato,.dilu__salida dd.mono--dato{
  font-family:var(--f-mono);font-variation-settings:normal;
  font-weight:400;font-variant-numeric:tabular-nums;}
.mono--dato{letter-spacing:0.01em;}
.dilu__salida dd.mono--dato{letter-spacing:-0.012em;}

.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;
  background:var(--ink);color:var(--paper);padding:0.85rem 1.15rem;}
.skip-link:focus{left:0;}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}

/* Reglas. Son el separador de TODO el sitio: no hay tarjetas ni sombras.
   .rule se anima con scaleX al entrar en viewport (ver §6). */
.rule{height:var(--rule-w);background:var(--rule);border:0;margin:0;
  transform-origin:left center;}
.rule--soft{background:var(--rule-soft);}

/* Patrón de sección: rail con el número a la izquierda, contenido a la
   derecha. Es lo que convierte la página en un documento con índice. */
.sec{padding-top:var(--sp-sec);}
/* La regla superior es un degradado de 1 px y no un border-top: así se le
   puede animar el ancho al entrar en viewport. Sin JS queda al 100 %. */
/* La regla que abre capítulo sube de 1 px a 3: es la única de la página
   que anuncia algo, y estaba sonando igual que las que separan filas de
   una lista. Sigue siendo un degradado y no un border para poder animarle
   el ancho al entrar en viewport; sin JS queda al 100 %. */
.sec__head{display:grid;grid-template-columns:var(--rail) 1fr;gap:var(--gap);
  padding-top:26px;
  background-image:linear-gradient(var(--ink),var(--ink));
  background-repeat:no-repeat;background-position:top left;
  background-size:100% var(--rule-barra);}
.sec__rail{padding-top:6px;}          /* alinea ópticamente con la 1ª línea del título */
/* El guion va por CSS: así el número y el rótulo son dos piezas y en móvil
   se pueden componer distinto sin duplicar el marcado. */
.sec__n::after{content:" — ";}
.sec__lead{margin-top:20px;color:var(--ink-2);font-size:var(--t-3);max-width:56ch;}
.sec__sub{display:block;margin:0 0 22px;}

/* Epígrafes de figura enfrentados sobre una regla.
   max-width:none porque .figline es un <p> y heredaba el tope de 62ch del
   reset: la regla terminaba a media caja debajo de una lámina a sangre, y
   con un epígrafe largo las dos puntas se partían en dos renglones. Un pie
   de figura mide lo que mide la figura. */
.figline{display:flex;justify-content:space-between;gap:24px;max-width:none;
  border-top:var(--rule-w) solid var(--rule);padding-top:14px;}
/* A 390 px los dos tramos quedan en 150 px cada uno y parten en tres
   renglones enfrentados. Apilados se leen como epígrafe y bajada. */
@media (max-width:560px){
  .figline{flex-direction:column;gap:5px;}
  .figline span:last-child{color:var(--ink-3);}
}

/* ===================== 4 · COMPONENTES ============================= */

/* --- Botones ---
   El tracking negativo es de los tamaños grandes. A 14 px un botón no lleva
   tracking display: eso, más el word-spacing, es lo que evita que
   "Solicitar cotización" se lea pegado. v12 aplicaba -0.045em acá. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--f-display);font-weight:600;font-size:var(--t-2);line-height:1;
  font-variation-settings:"wdth" var(--w-angosto);
  letter-spacing:0.01em;word-spacing:0.02em;
  padding:17px 28px;border-radius:var(--radius);border:var(--rule-w) solid transparent;
  cursor:pointer;text-align:center;
  transition:background var(--t-micro) var(--ease),color var(--t-micro) var(--ease),
             border-color var(--t-micro) var(--ease);}
.btn--primary{background:var(--ink);color:var(--paper);}
.btn--primary:hover{background:var(--accent);}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule);}
.btn--ghost:hover{border-color:var(--ink);}
.btn--line{background:transparent;color:var(--ink);border-radius:0;padding:17px 0;
  border-bottom:var(--rule-w) solid var(--rule);}
.btn--line:hover{border-bottom-color:var(--ink);}
.btn--block{width:100%;}
.btn--sm{padding:11px 20px;font-size:var(--t-nota);}
/* Las flechas son dibujo, no carácter. currentColor y 1em para que sigan
   al texto que rematan, igual que lo hacía el glifo. */
.ico-fl{display:inline-block;width:1em;height:1em;fill:none;stroke:currentColor;
  flex:none;vertical-align:-0.11em;}
.btn__arrow{display:inline-flex;transition:transform var(--t-med) var(--ease);}
.btn__arrow .ico-fl{width:0.95em;height:0.95em;}
.to-top .ico-fl{width:15px;height:15px;vertical-align:middle;}
.marca__go .ico-fl,.link-arrow .ico-fl{width:0.9em;height:0.9em;}
.btn:hover .btn__arrow{transform:translateX(5px);}
.btn.is-sent{background:var(--accent);color:#fff;pointer-events:none;}

/* Enlace dentro de un párrafo de cuerpo. La página no tenía ninguno hasta
   ahora —todos los enlaces eran botones, filas o rótulos— así que hacía
   falta decidir cómo se ve: subrayado de 1 px separado del texto, en el
   azul que pasa AA sobre papel. */
.enlace{color:var(--accent-tx);
  border-bottom:var(--rule-w) solid var(--accent-tx);padding-bottom:1px;
  transition:background var(--t-micro) var(--ease);}
.enlace:hover{background:rgba(30,117,187,.09);}
.night .enlace{color:var(--accent-br);border-bottom-color:var(--accent-br);}

.link-arrow{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-display);font-weight:500;font-size:var(--t-2);
  letter-spacing:0;word-spacing:0.02em;color:var(--accent-tx);
  border-bottom:var(--rule-w) solid transparent;padding-bottom:2px;}
.link-arrow:hover{border-bottom-color:var(--accent-tx);}
.link-arrow i{font-style:normal;transition:transform var(--t-med) var(--ease);}
.link-arrow:hover i{transform:translateX(5px);}

/* --- Campos: línea inferior, nunca caja con borde ---
   Es un cambio chico que sube mucho la percepción, y el que hace que el
   formulario sobre el navy no parezca un formulario de plantilla. */
.field{display:flex;flex-direction:column;gap:7px;}
/* Todos los rótulos chicos heredan de la misma regla: antes seis lugares
   replicaban a mano el estilo del mono viejo y quedaban desincronizados en
   cuanto se cambiaba la voz en uno solo. */
.field > label,.menu__i,.pendiente,.footer__col-title,.map__cap span{
  font-family:var(--f-display);font-weight:600;
  font-variation-settings:"wdth" var(--w-angosto);
  letter-spacing:0.045em;text-transform:uppercase;}
.field > label{font-size:var(--t-xs);color:var(--ink-2);}
.field input,.field select,.field textarea{
  font-family:var(--f-body);font-size:var(--t-1);color:var(--ink);line-height:1.5;
  background:transparent;border:0;border-bottom:var(--rule-w) solid var(--rule);
  border-radius:0;padding:11px 0;width:100%;
  transition:border-color var(--t-micro) var(--ease);}
.field textarea{resize:vertical;min-height:84px;}
.field input:hover,.field select:hover,.field textarea:hover{border-bottom-color:var(--ink-2);}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-bottom:2px solid var(--accent);padding-bottom:10px;}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:4px;}
.field ::placeholder{color:var(--ink-3);opacity:1;}
/* El select nativo sobre fondo oscuro se ve blanco en Windows: hay que
   dibujar la flecha a mano. */
.field select{appearance:none;-webkit-appearance:none;padding-right:26px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 11px) calc(50% + 1px),calc(100% - 6px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
.field select option{color:var(--ink);background:var(--paper);}
.field__err{font-size:var(--t-nota);color:var(--err);min-height:1.2em;}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{border-bottom-color:var(--err);}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;}

/* ================ SISTEMA DEL DESTELLO ============================
   El destello de cuatro puntas del isotipo es el elemento más apropiable
   de la identidad. Aparece SEIS veces en toda la página, y ése es el
   presupuesto: si alguien quiere una séptima, tiene que sacar otra.
   Repetido sin límite deja de ser firma y pasa a ser ornamento.

     1 · viñeta de los cuatro diferenciales        .dlist__n
     2 · marcador del depósito y su leyenda        .map__destello
     3 · separador de capítulo, cinco secciones    .cap-flash
     4 · remate de cierre antes del footer         .cierre
     5 · acento del botón primario, en hover       .btn__flash
     6 · latido en la capa de carga                .carga__mark .s

   La geometría se define UNA sola vez, en el <symbol id="destello"> del
   marcado. Tamaño y color se controlan siempre desde acá, nunca en el
   HTML. Todas son decorativas y quedan visibles sin JavaScript.        */
.destello-def{position:absolute;width:0;height:0;overflow:hidden;}
.destello{display:inline-block;width:1em;height:1em;fill:currentColor;
  flex:none;vertical-align:middle;}

/* 1 · Viñeta de los diferenciales. Alineada con la primera línea del
       título del ítem — mal alineada, ensucia. */
/* align-self:start es imprescindible: sin él la celda de la grilla se
   estira a todo el alto del ítem y el conjunto queda centrado contra el
   párrafo descriptivo en vez de contra la primera línea del título. */
.dlist__n{display:inline-flex;align-items:center;gap:8px;align-self:start;
  padding-top:6px;}
.dlist__n .destello{width:9px;height:9px;color:var(--accent-tx);
  transition:transform var(--t-med) var(--ease);}
.dlist__i:hover .dlist__n .destello{transform:rotate(90deg) scale(1.18);}

/* 3 · Separador de capítulo: sobre el extremo IZQUIERDO de la regla, no
       centrado. Centrado flota sin relación con nada; sobre el inicio
       del rail marca el comienzo del capítulo, que es lo que hace. */
.sec__head{position:relative;}
.cap-flash{position:absolute;left:0;top:0;line-height:0;
  transform:translate(-4px,-50%);color:var(--accent);}
.cap-flash .destello{width:15px;height:15px;}
.night .cap-flash{color:var(--accent-br);}

/* 4 · Remate de cierre. Es el único que está solo, así que va algo más
       grande. Estático, sin animación. */
.cierre{display:flex;align-items:center;justify-content:center;gap:22px;
  margin-top:clamp(56px,6vw,84px);color:var(--accent-br);}
.cierre__linea{width:clamp(40px,7vw,74px);height:var(--rule-w);background:var(--hair);}
.cierre .destello{width:22px;height:22px;}

/* 5 · Acento del botón primario. Absoluto a propósito: no puede empujar
       el texto ni cambiar el ancho del botón. Sólo en el primario. */
.btn--primary{position:relative;}
.btn__flash{position:absolute;right:11px;top:9px;line-height:0;
  opacity:0;transform:scale(.4) rotate(-35deg);
  transition:opacity var(--t-med) var(--ease),transform var(--t-med) var(--ease);}
.btn__flash .destello{width:9px;height:9px;}
.btn--primary:hover .btn__flash{opacity:1;transform:scale(1) rotate(0deg);}
@media (hover:none){ .btn__flash{display:none;} }

/* --- Placeholder de contenido pendiente ---
   Convierte "parece roto" en "ficha en preparación". Reemplaza a los
   .tag-todo en itálica azul de v12. */
.pendiente{display:inline-flex;align-items:center;gap:8px;vertical-align:middle;
  font-size:var(--t-xs);color:var(--ink-3);background:var(--paper-2);
  padding:4px 9px;border-radius:var(--radius);white-space:nowrap;}
.pendiente::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--ink-3);flex:none;}
.muestra{color:var(--ink-3);}

/* ============ 5 · SECCIONES (en orden de aparición) ================ */

/* ---------- Carga ----------
   Capa fija SOBRE contenido ya pintado. 700 ms, una vez por sesión. */
/* pointer-events:none desde el arranque, no recién con .is-done: la capa
   es decorativa y no tiene nada con qué interactuar, pero durante sus
   primeros 700 ms tapaba toda la página y se tragaba el primer clic. El
   contenido ya está pintado debajo — esa es justamente la idea de la capa —
   así que no hay razón para bloquearlo. Detectado con un clic real en el
   botón del menú: el clic no llegaba nunca. */
.carga{position:fixed;inset:0;z-index:9999;background:var(--paper);
  display:flex;align-items:center;justify-content:center;gap:14px;
  pointer-events:none;
  transition:opacity 450ms var(--ease),visibility 450ms;}
.carga.is-done{opacity:0;visibility:hidden;pointer-events:none;}
.carga__mark{width:34px;height:29px;}
.carga__mark .b{fill:var(--ink);}
/* 6 · El destello respira mientras la capa está visible. Es la primera
       impresión y dura 700 ms: tiene que leerse como respiración, no
       como parpadeo. La animación es puramente CSS — no introduce
       ninguna dependencia nueva sobre la capa de carga. */
.carga__mark .s{fill:var(--accent);transform-box:fill-box;transform-origin:center;
  animation:cargaDestello 1600ms var(--ease) infinite alternate;}
.carga__word{font-family:var(--f-display);font-weight:600;font-size:var(--t-1);
  letter-spacing:0.2em;word-spacing:0.02em;color:var(--ink);}
@keyframes cargaDestello{
  from{opacity:.38;transform:scale(.82) rotate(-10deg);}
  to  {opacity:1;  transform:scale(1.06) rotate(4deg);}
}
@media (prefers-reduced-motion:reduce){
  .carga{display:none!important;}
  .carga__mark .s{animation:none;}
}

/* ---------- Masthead + nav ----------
   La franja negra superior de v12 se eliminó: competía con el hero y era
   lo primero que veía el visitante. */
.nav{position:sticky;top:0;z-index:900;background:var(--paper);}
.masthead{border-bottom:var(--rule-w) solid var(--rule-soft);}
.masthead__in{max-width:var(--wrap);margin-inline:auto;padding:9px var(--pad);
  display:flex;align-items:center;gap:16px;}
.masthead__sep{width:1px;height:11px;background:var(--rule);flex:none;}
.masthead__right{margin-left:auto;}
/* Estado del depósito, en vivo. El punto se enciende en el azul de la
   marca cuando está abierto y queda apagado cuando no. Es el único
   elemento de la página que cambia solo, y por eso alcanza con que sea
   diminuto: lo que comunica no es el dato, es que del otro lado hay
   alguien. Sin JavaScript queda el horario escrito y el punto apagado. */
.estado{display:inline-flex;align-items:center;gap:7px;}
.estado__punto{width:5px;height:5px;border-radius:50%;flex:none;
  background:var(--ink-3);
  transition:background var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease);}
.estado.is-abierto .estado__punto{background:var(--accent);
  box-shadow:0 0 0 3px rgba(30,117,187,.18);}
.masthead a:hover{color:var(--ink-2);}

.nav__in{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad);
  height:var(--nav-h);display:flex;align-items:center;gap:40px;
  border-bottom:var(--rule-w) solid var(--rule);}
.nav.is-scrolled .nav__in{border-bottom-color:var(--rule);}
.brand{display:flex;align-items:center;gap:11px;flex:none;}
.brand__mark{width:26px;height:22px;flex:none;}
.brand__mark .b{fill:var(--ink);}
/* transform-box:fill-box para que la apertura pueda girar el destello
   sobre su propio centro. Sin esto el origen sería el del SVG completo y
   la estrella describiría un arco en vez de resolver en su lugar. */
.brand__mark .s{fill:var(--accent);transform-box:fill-box;transform-origin:center;}
.brand__word{font-family:var(--f-display);font-weight:600;font-size:var(--t-2);
  letter-spacing:0.2em;word-spacing:0.02em;}
.nav__links{display:flex;gap:34px;margin-left:auto;font-size:var(--t-2);color:var(--ink-2);}
.nav__links a{padding-block:6px;border-bottom:var(--rule-w) solid transparent;
  transition:color var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease);}
.nav__links a:hover{color:var(--ink);border-bottom-color:var(--ink);}
/* D2 · Capítulo activo. La página mide ~9.000 px y tiene cinco capítulos
   numerados; sin esto el menú nunca dice dónde estás. El subrayado es el
   mismo del hover, así que no se agrega vocabulario visual: se reusa. */
.nav__links a[aria-current]{color:var(--ink);border-bottom-color:var(--accent);}
.nav__cta{flex:none;}
.nav__burger{display:none;width:40px;height:40px;margin-left:auto;
  flex-direction:column;justify-content:center;gap:5px;align-items:center;}
/* D1 · Las dos barras se cruzan al abrir. v14 declaraba el transition y no
   existía ninguna regla que las transformara: el gesto estaba escrito a
   medias. El estado se lee del aria-expanded que el JS ya mantenía, así
   que no hace falta una clase nueva.
   3,25 px es la mitad de la distancia entre centros: 1,5 de alto + 5 de
   separación. Con ese valor las dos barras se cruzan exactamente. */
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg);}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg);}
.nav__burger span{display:block;width:19px;height:1.5px;background:var(--ink);
  transition:transform var(--t-med) var(--ease);}
.nav__progress{height:2px;background:var(--accent);transform:scaleX(0);
  transform-origin:left center;}

/* Menú móvil */
.menu{position:fixed;inset:0;z-index:890;background:var(--paper);
  padding:calc(var(--nav-h) + 40px) var(--pad) var(--pad);
  display:flex;flex-direction:column;justify-content:space-between;
  opacity:0;visibility:hidden;transition:opacity 300ms var(--ease),visibility 300ms;}
.menu.is-open{opacity:1;visibility:visible;}
.menu__links{display:flex;flex-direction:column;gap:4px;}
.menu__links a{display:flex;align-items:baseline;gap:14px;padding:16px 0;
  font-family:var(--f-display);font-weight:500;font-size:1.75rem;
  letter-spacing:-0.02em;word-spacing:0.02em;
  border-bottom:var(--rule-w) solid var(--rule-soft);}
.menu__i{font-size:var(--t-xs);color:var(--ink-3);}
.menu__foot{display:flex;flex-direction:column;gap:12px;}
.no-scroll,.no-scroll body{overflow:hidden;}

/* ---------- Flotantes ----------
   TRES ESTADOS, y el orden de estas reglas importa:

     base       fuera de pantalla, invisible
     .is-on     entra — pasada la primera pantalla
     .is-fuera  se va — mientras se baja

   `.is-on` y `.is-fuera` tienen la MISMA especificidad (0,2,0), así que
   gana la que está más abajo. Estas reglas estaban repartidas en tres
   lugares de la hoja y `.is-on` quedó después de `.is-fuera`: el botón se
   quedaba puesto mientras se bajaba y volvía a tapar texto. Medido: con
   clases `[is-on is-fuera]` el transform computaba `none`.
   Por eso van juntas y en este orden. No separarlas.

   T1 · El de WhatsApp no aparece hasta pasada la primera pantalla: a 390 px,
   con la ficha del hero en una sola columna, en y=0 se apoyaba sobre
   «Cobertura · CABA + Gran Buenos Aires». Y ahí es además redundante — esa
   pantalla ya tiene su llamado, «Probá un producto sin cargo». */
.wa-float,.to-top{
  position:fixed;right:20px;z-index:880;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(calc(100% + 24px));
  transition:background var(--t-micro) var(--ease),
             border-color var(--t-micro) var(--ease),
             transform var(--t-med) var(--ease),
             opacity var(--t-med) var(--ease),
             visibility var(--t-med);}

.wa-float{bottom:20px;
  display:inline-flex;align-items:center;gap:9px;
  background:var(--ink);color:var(--paper);padding:12px 17px;
  border-radius:var(--radius);
  font-family:var(--f-display);font-weight:600;font-size:var(--t-nota);
  font-variation-settings:"wdth" var(--w-angosto);
  letter-spacing:0.01em;word-spacing:0.02em;}
.to-top{bottom:74px;width:38px;height:38px;
  border:var(--rule-w) solid var(--rule);background:var(--paper);color:var(--ink);
  border-radius:var(--radius);}

/* 2 · presentes */
.wa-float.is-on,.to-top.is-on{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;}

/* 3 · fuera mientras se baja. VA DESPUÉS de .is-on a propósito. */
.wa-float.is-fuera,.to-top.is-fuera{
  transform:translateX(calc(100% + 24px));opacity:0;pointer-events:none;}

.wa-float:hover{background:var(--accent);}
.to-top:hover{border-color:var(--ink);}

/* El rótulo se pliega mientras se baja, para que el botón no reaparezca de
   golpe a todo su ancho cuando el scroll frena. Se pliega el rótulo y no el
   botón: el ícono no se mueve de lugar. */
.wa-float__t{display:inline-block;max-width:90px;overflow:hidden;white-space:nowrap;
  transition:max-width var(--t-med) var(--ease),opacity var(--t-micro) var(--ease),
             margin-left var(--t-med) var(--ease);}
.wa-float.is-compacto .wa-float__t{max-width:0;opacity:0;margin-left:-9px;}
.wa-float:hover .wa-float__t{max-width:90px;opacity:1;margin-left:0;}

@media (prefers-reduced-motion:reduce){
  .wa-float,.to-top{transition:opacity var(--t-med),visibility var(--t-med);}
  .wa-float.is-on,.to-top.is-on{transform:none;}
  .wa-float.is-fuera,.to-top.is-fuera{transform:none;opacity:0;visibility:hidden;}
  .wa-float__t{transition:none;}
}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(10px);
  z-index:9000;background:var(--ink);color:var(--paper);padding:11px 17px;border-radius:var(--radius);
  font-size:var(--t-nota);opacity:0;visibility:hidden;
  transition:opacity var(--t-med) var(--ease),transform var(--t-med) var(--ease),visibility var(--t-med);}
.toast.is-on{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}

/* ---------- Hero ---------- */
.hero{padding-top:clamp(56px,7vw,96px);}
/* align-items:stretch + la ficha repartida a lo alto es lo que evita el
   hueco muerto abajo a la derecha. v12 tenía el problema simétrico: un
   panel oscuro vacío ocupando el 55 % de la primera pantalla. */
/* align-items:start y no stretch. Con stretch la ficha se estiraba a la
   altura de la columna izquierda —que la fija el buscador, no la ficha— y
   la regla vertical corría 310 px por debajo del último dato, sosteniendo
   aire. v14 ya había probado repartir los seis datos con space-between y
   los huecos quedaban en ~95 px: el problema no era el reparto, era que la
   caja no tenía por qué medir lo mismo que la de al lado. */
.hero__grid{display:grid;grid-template-columns:1fr var(--rail);gap:var(--gap);
  align-items:start;}
/* Sin tope en ch y sin balance: los cortes del titular están escritos a
   mano en el marcado (un <span class="line"> por renglón). Un max-width en
   ch pelea contra eso — medido a 1440: la caja quedaba en 650 px con 900
   disponibles, y la línea «Somos parte de tu operación.», que necesita
   991 px, se partía sola. El titular pasaba de 3 a 4+ renglones y arrastraba
   el espaciado de la ficha de al lado. Los renglones ahora son cortos por
   diseño, así que no hace falta acotarlos. */
/* El titular no va todo en un peso. La frase tiene dos mitades —una
   negación y una afirmación— y componerlas iguales las aplana: se lee como
   un bloque parejo en vez de como un giro. La negación entra en 500 y el
   remate en 800, así que el énfasis cae donde está el argumento.
   Es el mismo recurso que ya usa la página con <em> en los capítulos
   oscuros y en «Empezamos por tu operación». */
.hero__title{max-width:none;text-wrap:normal;font-weight:400;}
.hero__title .es{font-weight:800;}

/* El remate va además en el AZUL DE MARCA, a pedido del cliente: la primera
   pantalla necesitaba algo de color.
   Estaba escrito acá como alternativa desde v16 y descartado por miedo a que
   dos renglones de azul saturado a 69 px pesaran demasiado. Puesto y mirado,
   no pesa: el peso 800 ya separaba las dos mitades de la frase y el color
   refuerza el mismo corte en vez de agregar uno nuevo.
   Va --accent-tx y no --accent porque el manual es explícito: cuando el azul
   es TEXTO, va el de texto. A este cuerpo los dos pasarían AA —es texto
   grande, le alcanza con 3:1— pero mantener la regla evita que mañana alguien
   use el otro en un cuerpo chico donde sí falla. Medido acá: 5,22:1. */
.hero__title .es{color:var(--accent-tx);}
.hero__lead{margin-top:34px;font-size:1.15625rem;line-height:1.55;
  color:var(--ink-2);max-width:44ch;}
.hero__actions{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;}

.hero__buscar{margin-top:52px;max-width:520px;display:block;}
.hero__buscar > label{display:block;margin-bottom:9px;}
.hero__buscar-row{display:flex;align-items:center;gap:14px;
  border-bottom:var(--rule-w) solid var(--rule);
  transition:border-color var(--t-micro) var(--ease);}
.hero__buscar-row:focus-within{border-bottom-color:var(--ink);}
.hero__buscar input{flex:1;min-width:0;font-family:var(--f-body);font-size:var(--t-1);
  color:var(--ink);background:transparent;border:0;padding:10px 0;}
.hero__buscar input:focus{outline:none;}
.hero__buscar input::placeholder{color:var(--ink-3);opacity:1;}
.hero__buscar .btn{margin-block:7px;}
/* C4 · El epígrafe quedó al pie de la figura: el aire grande pasa a estar
   ANTES de la foto, y el epígrafe se pega a ella. */
.hero__pie{margin-top:12px;}

/* Ficha técnica: la promesa como dato verificable, arriba a la derecha */
.hero__ficha{border-left:var(--rule-w) solid var(--rule);padding-left:26px;
  padding-top:6px;display:flex;}
/* align-content:start y no space-between: repartir seis filas a lo alto de
   la fila del hero dejaba ~95 px entre dato y dato, y se leía desarmado.
   Compacto arriba; la regla vertical sigue corriendo toda la altura, que
   es lo que sostiene la columna. */
.hero__ficha dl{margin:0;flex:1;display:grid;gap:clamp(20px,2.2vw,30px);
  align-content:start;}
.hero__ficha dt{margin-bottom:4px;}
.hero__ficha dd{margin:0;font-family:var(--f-display);font-weight:500;
  font-size:var(--t-1);letter-spacing:-0.012em;word-spacing:0.02em;line-height:1.3;}

/* ---------- Lámina fotográfica ----------
   Blanco y negro con virado cálido: es la única foto del sitio y tiene que
   leerse como lámina de archivo, no como foto de celular. */
.plate{margin:clamp(44px,6vw,76px) 0 0;position:relative;overflow:hidden;
  background:var(--paper-2);}
/* A2 · A 430 px sobre 1.440 de ancho la lámina se leía como franja de
   transición y no como pausa. Sube el tope a 525: sigue siendo panorámica
   —2,7:1 a 1.440— y el cliente pidió un cambio contenido, no una foto a
   pantalla completa. El tratamiento y el epígrafe no se tocan. */
.plate img{width:100%;height:clamp(240px,38vw,525px);object-fit:cover;
  object-position:50% 42%;filter:grayscale(1) contrast(1.08) brightness(1.04);}

.plate__tono{position:absolute;inset:0;background:#C9A06A;
  mix-blend-mode:color;opacity:.13;pointer-events:none;}

/* ---------- 01 · Quiénes somos ---------- */
.manifiesto{font-size:clamp(1.75rem,2.9vw,2.625rem);line-height:1.14;
  letter-spacing:-0.024em;max-width:26ch;}
.nosotros{margin-top:74px;display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);
  align-items:start;}

.carta{border-left:2px solid var(--accent);padding-left:32px;}
.carta p + p{margin-top:18px;}
.carta__firma{margin-top:28px;padding-top:20px;
  border-top:var(--rule-w) solid var(--rule-soft);
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;}
.carta__sign{font-family:var(--f-display);font-weight:500;font-size:var(--t-4);
  letter-spacing:0.06em;word-spacing:0.02em;}

.dlist{display:grid;}
.dlist__i{display:grid;grid-template-columns:58px 1fr;gap:20px;padding:26px 0;
  border-top:var(--rule-w) solid var(--rule-soft);}
.dlist__i:first-child{border-top-color:var(--rule);}
.dlist__n{color:var(--accent-tx);}
.dlist__i p{margin-top:8px;color:var(--ink-2);font-size:var(--t-2);max-width:42ch;}

/* C2 · Sin fondo. Era el único bloque con caja de toda la parte clara y
   por eso se leía como una tarjeta pegada encima del documento, en vez
   de formar parte de él. Ahora se separa con una regla, como el resto. */
/* Imagen a la izquierda, texto a la derecha: la PRIMERA composición del
   documento que no es rail + lista de filas. Va acá y no en otro lado
   porque el texto habla justamente de ir a ver la planta del cliente, y
   la foto es exactamente eso. */
.metodo{margin-top:clamp(56px,6vw,80px);padding-top:26px;
  border-top:var(--rule-w) solid var(--rule);
  display:grid;grid-template-columns:minmax(240px,31%) 1fr;gap:var(--gap);
  align-items:start;}
.metodo__lamina{margin:0;position:relative;overflow:hidden;
  background:var(--paper-2);}
/* Recortada a 2:3. La toma original traía un 15 % de piso vacío abajo y
   ya viene cortada en el archivo; el aspect-ratio sólo la sostiene. */
.metodo__lamina img{width:100%;aspect-ratio:700/1061;object-fit:cover;
  filter:grayscale(1) contrast(1.08) brightness(1.04);}
.metodo__intro h3{margin-top:14px;font-size:clamp(1.5rem,2.2vw,1.9rem);max-width:20ch;}
.metodo__intro h3 em{font-style:normal;color:var(--accent-tx);}
.metodo__lead{margin-top:16px;color:var(--ink-2);max-width:56ch;}
/* Con la lámina ocupando un tercio, tres columnas de pasos quedaban en
   ~250 px cada una. Apilados y separados por regla siguen el patrón de
   .dlist, que es el que ya usa el documento para enumerar. */
.metodo__pasos{margin-top:32px;display:grid;}
.metodo__pasos li{padding:20px 0;border-top:var(--rule-w) solid var(--rule-soft);}
.metodo__pasos li:first-child{border-top-color:var(--rule);}
.metodo__pasos p{margin-top:7px;color:var(--ink-2);font-size:var(--t-2);max-width:52ch;}
.metodo__cta{margin-top:32px;}

/* ---------- 02 · Catálogo ---------- */
.catalogo__sub{margin:72px 0 4px;}
/* Banda de marcas 3×2.
   Antes eran seis filas a todo el ancho, 95 px cada una, para una palabra
   y un enlace diminuto: 570 px de página para seis nombres, en la sección
   MÁS ALTA del documento. Con los logotipos puestos habría sido peor —
   seis logos flotando en filas gigantes.

   Cada celda es un HUECO DE LOGOTIPO de alto fijo: cuando lleguen los seis
   oficiales entran sin mover una sola medida del layout. Y las marcas se
   leen juntas, que es lo que significa «respaldo de marcas líderes».

   Sigue el patrón de .cifras —regla arriba, pelo entre celdas— y no arma
   tarjetas: los bordes son las mismas reglas del resto del documento. */
/* Tres columnas fijas, no auto-fit. Lo probé con `auto-fit` para que la banda
   aguantara cualquier cantidad de marcas y el resultado fue peor: con seis
   y 1216 px de ancho armaba CINCO columnas y dejaba a Panter sola en la
   segunda fila. Una banda de logotipos con una fila coja se lee como error.
   Si cambia la cantidad de marcas, hay que elegir el número de columnas a
   mano — es una decisión de composición, no algo que resuelva el motor. */
/* La regla de arriba va en --rule, igual que la de «Por categoría»: son dos
   subtítulos del mismo rango y estaban dibujados con pesos distintos —ésta
   en negro sólido, aquélla al 26 %— porque copié el borde de .cifras al
   armar la banda. Además el capítulo ya abre con la barra de 3 px en
   --ink: un segundo negro sólido adentro compite con ella. */
.marcas{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:var(--rule-w) solid var(--rule);}
.marca{display:flex;align-items:center;justify-content:center;
  position:relative;min-height:124px;padding:24px 20px;text-align:center;
  border-bottom:var(--rule-w) solid var(--rule-soft);
  transition:background var(--t-micro) var(--ease);}
/* El pelo vertical va en TODAS las celdas y se tapa con un margen
   negativo del contenedor: así no depende de saber en qué columna cae
   cada una, que con auto-fit cambia según el ancho. */
.marca{border-left:var(--rule-w) solid var(--rule-soft);}
.marcas{margin-left:calc(var(--rule-w) * -1);}
/* Un nombre suelto pesa lo mismo que un logotipo en gris. Hoy las seis
   marcas tienen logotipo, así que esta regla no se usa — se deja porque es
   lo que sostiene la banda si mañana entra una marca sin archivo. */
.marca__nom{font-family:var(--f-display);font-weight:600;
  font-variation-settings:"wdth" var(--w-normal);font-size:var(--t-5);
  letter-spacing:-0.014em;word-spacing:0.02em;color:var(--ink-2);
  transition:color var(--t-micro) var(--ease);}

/* ---------- Los logotipos de las marcas ----------
   Seis logotipos dibujados por seis estudios distintos, en seis épocas
   distintas, dentro de un documento que tiene papel, tinta y un azul.
   Crudos y uno al lado del otro, la banda deja de ser banda y pasa a ser
   una plancha de calcomanías: Elegante trae contorno blanco, bisel y
   sombra; Tork es una mancha navy plana.

   EN GRIS, Y A COLOR AL PASAR EL CURSOR. La banda se lee como conjunto y
   cada marca se identifica igual. Se probó también la silueta en tinta
   —filter:brightness(0)— y se descartó MIRÁNDOLA: aplasta el contorno
   blanco de Elegante contra su relleno y lo deja en un borrón ilegible.
   Un tratamiento que sirve con logotipos planos y rompe con los que tienen
   borde no sirve para un conjunto que no controlamos.

   EL ALTO SE FIJA Y EL ANCHO SE DEJA LIBRE: es lo que iguala proporciones
   distintas. Nunca al revés.

   Y el alto se calibra UNO POR UNO. Primero los puse a un alto común y
   Tork se leía la mitad que los otros dos: es compacto, así que a igual
   altura ocupa mucha menos mancha. Se igualan por ÁREA aproximada
   —alto ≈ √(área / relación)— y después se ajusta a ojo.
     tork 1,89 · elegante 2,48 · wassington 2,38   (ancho ÷ alto)

   Los archivos van a 132 px de alto: es 3× el tamaño en que se muestran.
   A 220 pesaban 119 KB; a 132, 55 KB, y no se ve ninguna diferencia. */
.marca__logo{display:block;width:auto;max-width:100%;object-fit:contain;
  filter:grayscale(1) contrast(1.04);opacity:.8;
  transition:filter var(--t-med) var(--ease),opacity var(--t-med) var(--ease);}
.marca:hover .marca__logo{filter:none;opacity:1;}
/* Los seis, igualados por área y después ajustados a ojo. La relación
   ancho÷alto de cada uno es muy distinta y es lo que manda: Royco es casi
   cuatro veces más ancho que alto y Unilever es prácticamente cuadrado, así
   que a un alto común el primero aplastaría la banda y el segundo
   desaparecería.
     tork 1,89 · wassington 2,38 · elegante 2,48
     royco 3,89 · unilever 1,10 · diversey 2,07 */
.marca__logo--tork{height:41px;}
.marca__logo--wassington{height:38px;}
.marca__logo--elegante{height:37px;}
.marca__logo--diversey{height:40px;}
.marca__logo--royco{height:32px;}
/* Unilever va más alto que el resto y aun así es el más flojo: el archivo
   es el bloque VERTICAL —la U, el script y la banda PRO apilados— y en una
   fila de palabras horizontales siempre va a perder. A esta altura la U
   pierde todo su dibujo interno. Hace falta la versión horizontal del
   logotipo; con ésta no hay altura que lo arregle. */
.marca__logo--unilever{height:54px;}
/* Sin cursor no hay hover: en táctil van siempre a color. */
/* En táctil el tratamiento neutro SE MANTIENE. Antes acá se quitaba el
   grayscale «porque no hay hover», y el resultado era que en cualquier
   teléfono la banda quedaba con seis logotipos a todo color, en una página
   que usa papel, tinta y un solo azul. El revelado es un premio del
   escritorio; en táctil no hay revelado y ya está. */
@media (hover:none){ .marca__logo{opacity:.85;} }
/* El rótulo va absoluto y aparece en hover: si ocupara sitio, obligaría a
   que la celda creciera y el hueco del logotipo dejaría de ser fijo. */
.marca__go{position:absolute;left:0;right:0;bottom:13px;
  opacity:0;color:var(--accent-tx);
  transition:opacity var(--t-micro) var(--ease);}
.marca__go i{font-style:normal;}
.marca:hover{background:var(--paper-2);}
.marca:hover .marca__nom{color:var(--accent-tx);}
.marca:hover .marca__go{opacity:1;}
.marcas__nota{margin-top:14px;}

.cats{display:grid;}
.cat{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:24px;
  padding:30px 0;border-top:var(--rule-w) solid var(--rule-soft);
  transition:padding-left var(--t-med) var(--ease);}
.cat:first-child{border-top-color:var(--rule);}
.cat:last-child{border-bottom:var(--rule-w) solid var(--rule-soft);}
.cat__n{color:var(--accent-tx);align-self:start;padding-top:6px;}
.cat h3{font-size:clamp(1.25rem,1.9vw,1.625rem);}
.cat__tx p{margin-top:7px;color:var(--ink-2);font-size:var(--t-2);}
.cat__go{font-size:var(--t-4);color:var(--ink-3);
  transition:transform var(--t-med) var(--ease),color var(--t-micro) var(--ease);}
.cat:hover{padding-left:14px;}
.cat:hover .cat__go{transform:translateX(6px);color:var(--accent-tx);}
.catalogo__cta{margin-top:48px;}

/* ---------- 03 · A quién servimos ----------
   Lista editorial a dos columnas. Sin las seis tarjetas idénticas de v12. */
.rubros{margin-top:64px;display:grid;grid-template-columns:1fr 1fr;
  column-gap:var(--gap);}
.rubro{display:grid;grid-template-columns:26px 1fr auto;align-items:start;gap:20px;
  padding:28px 0;border-top:var(--rule-w) solid var(--rule-soft);
  transition:background var(--t-micro) var(--ease);}
.rubro:nth-child(1),.rubro:nth-child(2){border-top-color:var(--rule);}
.rubro:nth-child(5),.rubro:nth-child(6){border-bottom:var(--rule-w) solid var(--rule-soft);}
/* Los seis íconos son VISTAS EN PLANTA, no símbolos de librería: el mismo
   lenguaje de dibujo técnico que el mapa. Remate recto y ángulo vivo —los
   de v14 mezclaban cabos redondeados con un rx="4" que contradecía el
   cero-radio de toda la hoja.
   Briltec vende que va, mide y releva la planta del cliente: dibujar cada
   entorno como se lo ve en un relevamiento es ese argumento hecho forma.
   Si se agrega un séptimo rubro, se dibuja su planta con este mismo trazo.
   No mezclar con un ícono de librería. */
.rubro__ico{width:26px;height:26px;color:var(--accent);margin-top:1px;flex:none;
  stroke-linecap:butt;stroke-linejoin:miter;}
.rubro h3{font-size:var(--t-4);}
.rubro__tx p{margin-top:7px;color:var(--ink-2);font-size:var(--t-2);max-width:38ch;}
.rubro__go{color:var(--ink-3);align-self:center;
  transition:transform var(--t-med) var(--ease),color var(--t-micro) var(--ease);}
.rubro:hover{background:var(--paper-2);
  margin-inline:-18px;padding-inline:18px;}
.rubro:hover .rubro__go{transform:translateX(5px);color:var(--accent-tx);}

/* ---------- Fig. 03 · Código de color por zona ----------
   Toda la gramática del sitio es la regla de 1 px. Ésta es la única regla
   que además LLEVA información, y por eso se gana el color: no es un
   adorno colgado encima, es el recurso propio del documento haciendo un
   trabajo nuevo. Cierra la sección de rubros porque la sección trata
   justamente de aplicar un criterio distinto según el entorno.

   La página venía afirmando «criterio técnico, no lista de precios» sin
   demostrarlo en ningún lado. Esto lo demuestra sin adjetivos.

   NO gasta una aparición del destello: usa rectángulos, no la estrella.
   El presupuesto sigue siendo seis. */
.codigo{margin:clamp(52px,5.5vw,76px) 0 0;}
.codigo__grid{display:grid;grid-template-columns:repeat(4,1fr);}
.codigo__col{position:relative;padding:22px 26px 0 0;}
/* Los cuatro tramos SE TOCAN. Separados leen como cuatro fichas sueltas;
   pegados leen como una banda, que es como se ve el código en la realidad. */
.codigo__col::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:var(--z);}
.codigo__col + .codigo__col{padding-left:26px;}
.codigo__col + .codigo__col::after{content:"";position:absolute;top:22px;bottom:0;left:0;
  width:var(--rule-w);background:var(--rule-soft);}
.codigo__zona{margin-bottom:9px;color:var(--ink);}
/* El color NUNCA es el único portador: cada tramo lleva su nombre escrito.
   Con daltonismo se lee «Rojo · Sanitarios» igual. */
.codigo__uso{font-size:var(--t-2);color:var(--ink-2);line-height:1.5;max-width:24ch;}
.codigo__cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;
  margin-top:22px;padding-top:14px;border-top:var(--rule-w) solid var(--rule);}

/* ---------- Fig. 04 · Calculadora de dilución ----------
   Vive en su propia banda oscura, entre Catálogo y Operación. Estuvo un
   rato al final de «A quién servimos», que ya tenía seis rubros y Fig. 03:
   tres bloques apilados leen como pila, no como composición. Y una sección
   que se llama «a quién servimos» no cierra en una calculadora.

   Usa la misma composición que el mapa —columna de texto a la izquierda,
   figura a la derecha— porque es el mejor momento de la página y conviene
   que el segundo instrumento rime con el primero.

   Sobre .night no hace falta ni una regla de color nueva: los tokens ya
   están remapeados, así que los campos, las reglas y la barra se adaptan
   solos. Ésa es la gracia del sistema de v13.                          */
.banda{padding-block:clamp(48px,5.2vw,76px);}

/* A1 · El capítulo 01 queda PARTIDO: el manifiesto en banda oscura a sangre
   y el resto sobre papel. La <section> deja de llevar .wrap —el ancho lo
   ponen los contenedores internos— así que la banda puede sangrar sin el
   truco de 100vw.

   Por qué el manifiesto y no otra cosa: es la tesis de la marca y estaba
   tratada con el mismo registro que la descripción de una categoría de
   producto. Cae cerca del 20 % del recorrido y parte al medio un tramo
   claro de cuatro pantallas.

   Y hay un beneficio que no se ve hasta ejecutarlo: el manifiesto ya se
   revelaba palabra por palabra con el scroll, pero sobre papel la palabra
   apagada es gris claro sobre crema y el efecto casi no se percibe. Sobre
   oscuro la diferencia entre encendida y apagada es enorme. Mismo código,
   mucho más rendimiento. */
.sec--partida{padding-top:var(--sp-sec);}
.banda--manifiesto{margin-top:0;padding-block:clamp(54px,5.8vw,86px);}
.sec__cuerpo{padding-top:clamp(56px,6vw,84px);}
.dilu{display:grid;grid-template-columns:minmax(300px,34%) 1fr;gap:var(--gap);
  align-items:stretch;}
.dilu__title{margin-top:20px;font-size:clamp(1.75rem,2.7vw,2.375rem);}
.dilu__lead{margin-top:18px;color:var(--ink-2);font-size:var(--t-3);max-width:42ch;}

.dilu__mandos{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:28px;
  align-items:end;}
.dilu__campo{display:flex;flex-direction:column;gap:9px;min-width:0;}
.dilu__campo select,.dilu__num input{
  font-family:var(--f-display);font-weight:500;font-size:var(--t-5);
  letter-spacing:-0.018em;color:var(--ink);line-height:1.2;
  background:transparent;border:0;border-bottom:var(--rule-w) solid var(--rule);
  border-radius:0;padding:7px 0;width:100%;
  transition:border-color var(--t-micro) var(--ease);}
.dilu__campo select{appearance:none;-webkit-appearance:none;padding-right:24px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 10px) calc(50% + 2px),calc(100% - 5px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;}
.dilu__campo select option{color:#15171A;background:#fff;}
.dilu__campo select:hover,.dilu__num:hover input{border-bottom-color:var(--ink-2);}
.dilu__campo select:focus,.dilu__num input:focus{outline:none;border-bottom-color:var(--accent);}
.dilu__num{display:flex;align-items:baseline;gap:10px;
  border-bottom:var(--rule-w) solid var(--rule);
  transition:border-color var(--t-micro) var(--ease);}
.dilu__num input{border-bottom:0;}
.dilu__num:focus-within{border-bottom-color:var(--accent);}
/* Las flechitas del number rompen la línea de base del campo. */
.dilu__num input::-webkit-outer-spin-button,
.dilu__num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.dilu__num input{-moz-appearance:textfield;}

/* stretch + el epígrafe anclado abajo con margin-top:auto, igual que
   .map__nota en el panel del mapa. Con align-items:start la columna
   derecha terminaba 200 px antes que la izquierda y la banda quedaba
   descolgada por abajo. */
.dilu__fig{margin:0;padding-top:6px;display:flex;flex-direction:column;}
/* La barra es el argumento, así que ocupa altura y no una tira. A 1:100
   el concentrado queda en un filo de ~7 px contra un campo de 680: eso
   dice de un golpe lo que ninguna tabla comunica —que casi todo lo que se
   paga por litro es agua—. Como bloque alto, además, la columna derecha
   deja de terminar 200 px antes que la izquierda. */
.dilu__barra{height:clamp(96px,11vw,148px);background:var(--paper-2);
  display:flex;overflow:hidden;}
.dilu__conc{display:block;height:100%;background:var(--accent);flex:none;
  min-width:2px;transition:width var(--t-med) var(--ease);}
.dilu__salida{margin:26px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.dilu__salida > div{display:flex;flex-direction:column;gap:10px;}
/* Sin font-family acá: la pone .mono--dato. Antes esta regla la declaraba
   y, por especificidad (0,1,1 contra 0,1,0), le ganaba — los tres
   resultados salían en Archivo y la mono quedaba pagando 14 KB para
   rotular un horario. */
.dilu__salida dd{margin:0;
  font-size:clamp(1.75rem,3vw,2.5rem);letter-spacing:-0.022em;
  font-variant-numeric:tabular-nums;line-height:1;}
.dilu__cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;
  margin-top:auto;padding-top:14px;border-top:var(--rule-w) solid var(--rule);}

/* ---------- Capítulo oscuro ----------
   Remapea los tokens en vez de duplicar reglas: todo lo que ya está
   escrito (botones, campos, reglas, .pendiente) funciona adentro sin
   una sola regla nueva. */
.night{
  --paper:var(--night);
  --paper-2:var(--night-2);
  --ink:var(--night-tx);
  --ink-2:var(--night-tx2);
  --ink-3:var(--night-tx3);
  --rule:var(--hair);
  --rule-soft:var(--hair-soft);
  --accent:var(--accent-br);
  --accent-tx:var(--accent-br);
  --err:#E8705F;
  background:var(--night);color:var(--night-tx);
  padding-block:clamp(58px,6.4vw,93px);   /* C1 · −20 % */
  margin-top:var(--sp-sec);
}
.night .sec__head{padding-top:22px;}
.night .btn--primary{background:var(--accent-br);color:#04101C;}
.night .btn--primary:hover{background:#63B2F5;}
.night .btn--ghost{border-color:var(--hair);}
.night .btn--ghost:hover{border-color:var(--night-tx);}
.night .field select option{color:#15171A;background:#fff;}
.night h2 em{font-style:normal;color:var(--accent-br);}

/* ---------- Mapa ----------
   REGLA DE ESCALA, heredada de v12 y rota en v14: todo lo que va dentro
   del SVG —tipografías Y trazos— está en UNIDADES DEL viewBox, no en
   píxeles. El viewBox mide 424 unidades de ancho, así que el tamaño real
   de un rótulo es (unidades x ancho_render / 424). Con el mapa a 1000 px
   un rótulo de 16 unidades salía a 38 px: de ahí que se leyera grotesco.

   Dos consecuencias:
     1. El mapa se topa por ancho, para que la escala no se dispare en
        monitores grandes.
     2. Cuando el mapa se achica (teléfono), tipografías y trazos se
        compensan JUNTOS. Compensar sólo las tipografías fue el error
        documentado de v12: los bordes caían a sub-píxel y la geografía
        desaparecía.

   A 720 px de render la escala es 1,70: un rótulo de 8 unidades sale a
   13,6 px, que es tamaño de epígrafe, no de titular.                    */
/* Cobertura no usa el patrón rail + contenido: el título y el lead ocupan
   la columna izquierda, AL LADO de la figura. Con el patrón normal quedaba
   un vacío de ~400 × 700 px a la izquierda del mapa, porque el mapa está
   topado por ancho y no puede ocupar la columna entera. */
.cob{position:relative;display:grid;grid-template-columns:minmax(300px,32%) 1fr;
  gap:var(--gap);align-items:start;padding-top:22px;
  background-image:linear-gradient(var(--ink),var(--ink));
  background-repeat:no-repeat;background-position:top left;background-size:100% 1px;}
.cob__col{padding-top:6px;}
.cob__title{margin-top:26px;}
.cob .sec__lead{max-width:none;}

.map{margin:0;max-width:100%;}
.map__lienzo{position:relative;}
/* La máscara va sobre el SVG y no sobre la figura: si no, también se
   desvanecen el epígrafe y la etiqueta del cursor. */
.map__lienzo svg{
  -webkit-mask-image:radial-gradient(125% 108% at 48% 40%,#000 58%,transparent 100%);
  mask-image:radial-gradient(125% 108% at 48% 40%,#000 58%,transparent 100%);}

/* Epígrafe en el mismo registro que el de la foto del hero (Fig. 01). No
   dice nada sobre cómo se usa el mapa: el nombre del partido al pasar el
   cursor es un hallazgo, no una función que haya que anunciar. */
.map__cap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;
  margin-top:18px;padding-top:14px;border-top:var(--rule-w) solid var(--hair);}
.map__cap span{font-size:var(--t-sm);color:var(--night-tx3);line-height:1.35;}
/* display:inline y no inline-flex: como flex, "Fig. 02 —", el destello y el
   texto son tres ítems que envuelven como bloques, y en angosto el guion
   quedaba huérfano en su propia línea. Así fluye como texto normal. */
.map__cap-l{display:inline;}
.map__cap-l .destello{margin:0 3px 0 4px;vertical-align:-1px;}
.map__leyenda-flash{width:12px;height:12px;color:var(--accent-br);}

.map__lienzo svg{width:100%;height:auto;display:block;overflow:hidden;}

.map__partido{fill:rgba(233,238,243,.026);stroke:rgba(233,238,243,.17);stroke-width:0.9;
  transition:fill 160ms var(--ease),stroke 160ms var(--ease);}
.map__partido:hover{fill:rgba(59,154,240,.16);stroke:rgba(59,154,240,.55);cursor:default;}
.map__caba{fill:rgba(59,154,240,.18);stroke:var(--accent-br);stroke-width:1.1;}
.map__caba:hover{fill:rgba(59,154,240,.30);}

.map__caba-label,.map__depot-lbl,.map__nodes text{
  font-family:'Archivo',sans-serif;letter-spacing:-0.01em;paint-order:stroke;}
.map__caba-label{fill:#fff;font-weight:600;font-size:10px;}
.map__depot-lbl{fill:#fff;font-weight:600;font-size:9px;}
.map__nodes text{fill:#C7D2DD;font-weight:500;font-size:8px;}
.map__nodes circle{fill:var(--accent-br);r:2.6;}
.map__nodes,.map__caba-label,.map__depot-lbl{pointer-events:none;}

.map__route{fill:none;stroke:var(--accent-br);stroke-width:1.3;stroke-linecap:round;}
.map__route-dot{fill:#fff;r:2.4;}

/* El depósito deja de ser un círculo más entre los de los partidos y pasa
   a ser la ÚNICA forma propia del mapa. Centro en (316,231): la ruta nace
   del mismo lugar. */
.map__destello{fill:var(--accent-br);pointer-events:none;}
.map__halo{fill:var(--accent-br);opacity:.16;pointer-events:none;}

/* Nombre del partido al pasar el cursor. Estaba en v12 y se había perdido
   en el traslado: los 37 data-nombre seguían en el marcado, faltaba el
   comportamiento. */
.map__tip{position:absolute;left:0;top:0;z-index:2;pointer-events:none;
  font-family:var(--f-display);font-weight:600;
  font-variation-settings:"wdth" var(--w-angosto);
  font-size:var(--t-xs);letter-spacing:0.045em;
  text-transform:uppercase;color:var(--night-tx);
  background:rgba(7,12,18,.92);border:var(--rule-w) solid var(--hair);
  padding:6px 10px;border-radius:var(--radius);white-space:nowrap;
  opacity:0;transform:translate(-50%,-140%);
  transition:opacity 140ms var(--ease);}
.map__tip.is-on{opacity:1;}

.map__leyenda-flash{width:14px;height:14px;color:var(--accent-br);}

/* ---------- Línea de tiempo ---------- */
.tl-wrap{margin-top:clamp(64px,7vw,96px);}
.tl{margin-top:22px;position:relative;}
.tl__track{height:1px;background:var(--hair);margin-bottom:30px;}
.tl__bar{display:block;height:1px;background:var(--accent-br);
  transform:scaleX(0);transform-origin:left center;}
.tl__steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.tl__step{padding-right:30px;position:relative;}
.tl__step::before{content:"";position:absolute;top:-35px;left:0;width:9px;height:9px;
  border-radius:50%;border:1px solid var(--hair);background:var(--night);
  transition:background var(--t-med) var(--ease),border-color var(--t-med) var(--ease);}
.tl__step.is-on::before{background:var(--accent-br);border-color:var(--accent-br);}
.tl__t{display:block;margin-bottom:10px;color:var(--accent-br);}
.tl__step p{margin-top:9px;color:var(--night-tx2);font-size:var(--t-2);}

/* ---------- 05 · Operación medida ---------- */
.cifras{margin-top:64px;display:grid;grid-template-columns:repeat(4,1fr);
  border-top:var(--rule-w) solid var(--ink);}
/* Tres cifras y no cuatro. Salió el porcentaje de pedidos completos y no se
   reemplazó con relleno: tres números que se sostienen valen más que cuatro
   con uno frágil. Con tres columnas cada cifra respira más, además. */
.cifras--3{grid-template-columns:repeat(3,1fr);}
.cifra{padding:34px 28px 38px 0;display:flex;flex-direction:column;align-items:flex-start;gap:11px;}
.cifra + .cifra{border-left:var(--rule-w) solid var(--rule-soft);padding-left:28px;}
/* Las cifras van ANGOSTAS: en una planilla el número se comprime para que
   entren más dígitos en la columna, y ése es el gesto que las hace leer
   como dato medido y no como titular decorativo. */
.cifra b{font-family:var(--f-display);font-weight:700;
  font-variation-settings:"wdth" var(--w-angosto);
  font-size:clamp(2.25rem,3.6vw,3.5rem);
  letter-spacing:-0.028em;line-height:1;}
.cifra > span:not(.pendiente){font-size:var(--t-2);color:var(--ink-2);line-height:1.4;max-width:20ch;}

.casos{margin-top:72px;display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);
  align-items:start;}
.cita{margin:0;border-left:2px solid var(--accent);padding-left:28px;}
.cita p{font-family:var(--f-display);font-weight:500;font-size:var(--t-5);
  letter-spacing:-0.018em;word-spacing:0.02em;line-height:1.28;}
.cita footer{margin-top:20px;display:flex;flex-direction:column;align-items:flex-start;
  gap:9px;font-size:var(--t-2);}
/* Los chips: tres clientes listados por rubro, zona y escala. Van en el
   gris del texto secundario y no en tinta plena — son contexto del
   testimonio que tienen al lado, no un titular. */
.chips{display:grid;}
.chips li{padding:16px 0;border-top:var(--rule-w) solid var(--rule-soft);
  font-size:var(--t-2);color:var(--ink-2);}
.chips li:first-child{border-top-color:var(--rule);}
.minicaso{margin-top:26px;background:var(--paper-2);padding:22px 24px;
  display:flex;flex-direction:column;align-items:flex-start;gap:11px;}
.minicaso p:not(.mono){font-size:var(--t-2);}

/* ---------- 06 · Contacto ---------- */
.night--cta{margin-top:var(--sp-sec);}
.cta{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start;}
.cta__lead{margin-top:24px;font-size:var(--t-3);color:var(--ink-2);}
.cta__datos{margin-top:38px;display:grid;}
.cta__datos li{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:15px 0;
  border-top:var(--rule-w) solid var(--rule-soft);font-size:var(--t-2);}
.cta__datos li:first-child{border-top-color:var(--rule);}
.cta__datos .mono{flex:0 0 116px;}
.cta__datos a{border-bottom:var(--rule-w) solid var(--rule);padding-bottom:1px;}
.cta__datos a:hover{border-bottom-color:var(--accent-br);color:var(--accent-br);}
.copiar{display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border:var(--rule-w) solid var(--rule);border-radius:var(--radius);
  color:var(--ink-3);transition:color var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease);}
.copiar:hover{color:var(--accent-br);border-color:var(--accent-br);}
.cta__alt{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;}

.cta__form{display:grid;grid-template-columns:1fr 1fr;gap:26px 32px;align-content:start;}
@media (max-width:560px){ .cta__form{gap:18px;} }
.cta__form-full{grid-column:1/-1;}
/* El botón de envío era btn--block: una losa celeste de 536 px de ancho,
   la superficie más saturada de toda la página, en un sitio donde todos
   los demás botones son del ancho de su texto. El celeste sí hace falta
   —sobre navy el botón en tinta desaparece— pero el ancho completo no.
   justify-self:start porque en una celda de grilla el ítem se estira. */
.cta__enviar{justify-self:start;}
.cta__form-nota{margin-top:-8px;}
.cta__privacidad{margin-top:-14px;font-size:var(--t-nota);color:var(--ink-3);}

/* ---------- Footer ---------- */
/* La única box-shadow de toda la hoja, y no es una sombra: pinta el navy
   por debajo del pie para que el rebote de scroll en móvil no muestre una
   franja de papel bajo el footer. No afecta el layout. */
.footer{margin-top:0;padding-block:0 40px;box-shadow:0 50vh 0 50vh var(--night);}
.footer__in{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;
  padding-top:56px;border-top:var(--rule-w) solid var(--hair);}
.footer__marca p{margin-top:16px;color:var(--ink-2);font-size:var(--t-2);}
.footer__social{display:inline-flex;margin-top:20px;color:var(--ink-2);}
.footer__social:hover{color:var(--accent-br);}
.footer__col{display:flex;flex-direction:column;gap:11px;font-size:var(--t-2);}
.footer__col-title{margin-bottom:8px;}
.footer__col a:hover{color:var(--accent-br);}
.footer__col span{color:var(--ink-2);}
/* El CUIT lleva dos guiones y el navegador los toma como puntos de corte:
   en la columna angosta del pie en móvil partía en «30-71811254-» / «7».
   Un número de identificación no se parte. */
.nb{white-space:nowrap;}
/* Al revés que el CUIT: el correo es una sola palabra de 200 px y en la
   columna del pie a 360 px se salía 8 px de la pantalla. Acá sí hay que
   dejar cortar, en cualquier punto. */
.footer__col a{overflow-wrap:anywhere;}
.footer__legal{margin-top:48px;padding-top:22px;
  border-top:var(--rule-w) solid var(--hair-soft);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;}
.footer__legal a{border-bottom:var(--rule-w) solid var(--rule);}
.footer__legal a:hover{color:var(--accent-br);}

/* ---------- Páginas legales ----------
   Reusan el patrón de sección del documento —rail a la izquierda, cuerpo a
   la derecha— para que no se lean como un anexo pegado con cinta. La
   medida se acota: un texto legal a 62ch se lee; a todo el ancho, no. */
.legal{padding-bottom:clamp(64px,7vw,104px);}
.legal__title{font-size:clamp(2.1rem,4vw,3.25rem);letter-spacing:-0.028em;}
/* gap SOLO en columnas. Con gap:var(--gap) a secas el 80 px se aplicaba
   también entre filas y, sumado al margen de cada bloque, dejaba 114 px
   entre apartados de un texto legal — que se lee de corrido, no se hojea. */
.legal__cuerpo{margin-top:clamp(44px,5vw,72px);
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:0 var(--gap);}
.legal__meta{grid-column:1;display:flex;flex-direction:column;gap:8px;
  align-self:start;position:sticky;top:calc(var(--nav-h) + 34px);}
.legal__b{grid-column:2;padding-top:26px;
  border-top:var(--rule-w) solid var(--rule-soft);}
.legal__b:first-of-type{border-top-color:var(--rule);}
.legal__b + .legal__b{margin-top:34px;}
.legal__b h2{font-size:var(--t-4);letter-spacing:-0.014em;}
.legal__b p{margin-top:14px;color:var(--ink-2);}
.legal__b p:first-of-type{margin-top:16px;}
.legal__b a{color:var(--accent-tx);
  border-bottom:var(--rule-w) solid var(--rule);padding-bottom:1px;}
.legal__b a:hover{border-bottom-color:var(--accent-tx);}
.legal__lista{margin-top:16px;display:grid;}
.legal__lista li{padding:13px 0;color:var(--ink-2);
  border-top:var(--rule-w) solid var(--rule-soft);}
.legal__lista li:first-child{border-top-color:var(--rule-soft);}
.legal__lista b{color:var(--ink);}
.legal__volver{grid-column:2;margin-top:44px;padding-top:24px;
  border-top:var(--rule-w) solid var(--rule);}

/* ============ 6 · ESTADOS DE MOVIMIENTO ===========================
   TODO lo que esconde algo vive bajo html.motion, y main.js sólo agrega
   esa clase después de comprobar gsap Y ScrollTrigger. Sin la clase, la
   página se ve entera. No mover estas reglas fuera de html.motion.     */
html.motion [data-reveal]{clip-path:inset(0 0 100% 0);transform:translateY(14px);}
html.motion [data-hero]{opacity:0;}
html.motion [data-words] .w{opacity:0.14;}
/* Sobre el fondo oscuro la palabra apagada necesita más presencia: a 0,14
   sobre navy queda casi negra y se pierde la silueta de la frase. */
html.motion .night [data-words] .w{opacity:0.26;}
[data-words] .w{display:inline-block;}
[data-lines] .line,.hero__title .line{display:block;overflow:hidden;}
[data-lines] .line > span,.hero__title .line > span{display:block;}

@media (prefers-reduced-motion:reduce){
  html.motion [data-reveal],html.motion [data-hero]{
    clip-path:none!important;opacity:1!important;transform:none!important;}
  html.motion [data-lines] .line > span,html.motion .hero__title .line > span{
    transform:none!important;}
  html.motion [data-words] .w{opacity:1!important;}
  *,*::before,*::after{animation-duration:0.001ms!important;transition-duration:0.001ms!important;}
  html{scroll-behavior:auto!important;}
}

/* ===================== 7 · MEDIA QUERIES ===========================
   TODOS los media queries del sitio viven acá, en ORDEN ASCENDENTE de
   ancho. No agregar ninguno suelto entre las secciones: el CHANGELOG de
   v12 documenta que allá quedaron fuera de orden y se volvieron una
   trampa para quien editara después.                                   */

/* ---------- ≤ 1024 px ---------- */
@media (max-width:1024px){
  :root{ --gap:56px; --rail:220px; }

  /* A1 · La navegación de escritorio (logotipo + 5 enlaces + botón) no
     entra por debajo de 1024 px: entre 760 y 1024 el botón se salía del
     contenedor y la página desbordaba hasta 59 px. Medido a 768, 780,
     800 y 820. El menú compacto cubre ahora todo ese rango. */
  .nav__links,.nav__cta{display:none;}
  .nav__burger{display:flex;}

  /* Coherencia con lo anterior: en el mismo rango en que el nav se vuelve
     compacto, el masthead suelta el dato redundante y entra en una línea.
     "Envío incluido · CABA + GBA" ya está en la ficha técnica del hero. */
  .masthead__in > span:nth-child(2),
  .masthead__in > span:nth-child(3){display:none;}

  .hero__grid{grid-template-columns:1fr;gap:48px;}
  .hero__title{max-width:18ch;}
  .hero__ficha{border-left:0;padding-left:0;padding-top:22px;
    border-top:var(--rule-w) solid var(--rule);}
  .hero__ficha dl{grid-template-columns:repeat(2,1fr);gap:24px 40px;}

  .sec__head{grid-template-columns:1fr;gap:18px;}
  .sec__rail{padding-top:0;display:flex;align-items:baseline;gap:11px;}
  .sec__n{font-size:1.875rem;line-height:1;letter-spacing:-0.02em;
    color:var(--ink);font-variation-settings:"wdth" var(--w-angosto);}
  .sec__n::after{content:none;}
  .sec__t{padding-bottom:2px;}

  .nosotros{grid-template-columns:1fr;gap:56px;}
  .legal__cuerpo{grid-template-columns:1fr;gap:30px;}
  .legal__meta{position:static;}
  .legal__b,.legal__volver{grid-column:1;}
  .dilu{grid-template-columns:1fr;gap:40px;}
  .dilu__cap{margin-top:28px;}
  /* La lámina pasa arriba, pero SIGUE SIENDO VERTICAL.
     Estaba forzada a 16/9 —medido: 192 px de alto a 390 px de ancho— con el
     argumento de que a 2:3 medía 700 px y empujaba el texto fuera de
     pantalla. El argumento es cierto pero la solución se pasó de largo:
     recortada a franja, la foto deja de hacer lo único que vino a hacer,
     que es romper el compás horizontal del capítulo justo donde el texto
     habla de ir a ver la planta. Una franja no rompe nada.
     4/5 es el punto medio: 428 px de alto, media pantalla, y se sigue
     leyendo como lámina. */
  .metodo{grid-template-columns:1fr;gap:32px;}
  .metodo__lamina img{aspect-ratio:4/5;object-position:50% 42%;}
  .rubros{grid-template-columns:1fr;}
  .rubro:nth-child(2){border-top-color:var(--rule-soft);}
  .rubro:nth-child(5){border-bottom:0;}

  /* Sin espacio para dos columnas: título arriba, mapa debajo */
  .cob{grid-template-columns:1fr;gap:40px;}
  .cob__col{padding-top:0;}
  .tl__steps{grid-template-columns:repeat(2,1fr);gap:34px 24px;}
  .tl__step::before{display:none;}
  .tl__step{padding-right:0;border-top:var(--rule-w) solid var(--hair-soft);padding-top:18px;}
  .cifras{grid-template-columns:repeat(2,1fr);}
  .cifra:nth-child(3){border-left:0;padding-left:0;}
  .cifra:nth-child(n+3){border-top:var(--rule-w) solid var(--rule-soft);}
  .casos{grid-template-columns:1fr;gap:48px;}
  .cta{grid-template-columns:1fr;gap:56px;}
  .footer__in{grid-template-columns:1fr 1fr;gap:36px;}
}

/* ---------- ≤ 760 px ---------- */
/* Columna angosta, corte angosto. Ver la nota de --w-ancho en los tokens. */
@media (max-width:419px){
  :root{ --w-ancho:96; }
}

@media (max-width:760px){
  :root{ --nav-h:66px; --gap:36px; --anchor-off:124px; }

  /* En teléfono queda sólo lo accionable: horario y teléfono. La primera
     frase se repite tres centímetros más abajo como kicker del hero, y
     entre las dos hacían un bloque de tres líneas antes del logotipo. */
  /* Se conserva la línea de posicionamiento y el teléfono; sale el estado
     de apertura, que es el dato menos útil de los tres y ya está en el
     capítulo 06. Antes se ocultaban los tres y la barra quedaba diciendo
     sólo el horario. */
  .masthead__in > span:nth-child(2),
  .masthead__in > span:nth-child(3){display:none;}
  .masthead__in > span:nth-child(1){font-size:var(--t-xs);}
  .masthead__right{margin-left:auto;}
  .masthead__right .estado{display:none;}
  .masthead__right a{font-size:var(--t-xs);}

  .hero{padding-top:36px;}
  .hero__title{max-width:none;}
  /* T4.2 · Interlineado. En escritorio 0.97 a 78 px es una decisión y
     funciona; en móvil la tipografía baja a 42 px y el interlineado se
     mantenía igual de ajustado, así que cuatro renglones en una columna
     angosta formaban un bloque macizo. Cuanto menor es el cuerpo, más aire
     necesita entre líneas. El tracking no se toca. */
  .hero__title{line-height:1.05;}
  /* T4.1 · Las tres separaciones, iguales o mayores que en escritorio. */
  .hero__lead{margin-top:36px;font-size:var(--t-3);}
  .hero__actions{margin-top:44px;gap:12px;flex-direction:column;align-items:stretch;}
  .hero__actions .btn{width:100%;}
  .hero__buscar{margin-top:38px;}
  .hero__buscar .btn{padding:14px 18px;}
  /* Dos columnas: la ficha se lee como chapa de especificaciones y no como
     lista. Medido, pasa de 359 px de alto a poco más de la mitad. */
  .hero__ficha{border-left:0;padding-left:0;padding-top:0;
    border-top:var(--rule-w) solid var(--rule);margin-top:0;}
  .hero__ficha dl{grid-template-columns:1fr 1fr;gap:0;}
  .hero__ficha dl > div{padding:15px 16px 16px 0;
    border-bottom:var(--rule-w) solid var(--rule-soft);}
  .hero__ficha dl > div:nth-child(even){padding-right:0;padding-left:16px;
    border-left:var(--rule-w) solid var(--rule-soft);}
  .hero__ficha dl > div:nth-last-child(-n+2){border-bottom:0;}
  .hero__ficha dd{margin-top:5px;}

  .plate img{height:clamp(280px,82vw,380px);}

  /* D5 · Zona segura del iPhone. Sin esto los dos flotantes quedan debajo
     de la barra inferior del sistema y el de WhatsApp se vuelve difícil de
     tocar. En pantallas sin muesca env() vale 0 y no cambia nada. */
  .wa-float{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));}
  .to-top{right:14px;bottom:calc(66px + env(safe-area-inset-bottom));}

  /* T2 · En móvil el flotante es SÓLO EL ÍCONO, sin el rótulo «WhatsApp».
     Medido: con rótulo tapa 14 renglones a lo largo del recorrido en 360 px;
     sin rótulo, 9. Ningún elemento fijo puede dejar de superponerse a
     contenido que scrollea —eso es inherente, no un defecto que se arregle—,
     pero 116 px de ancho sobre una columna de 332 es media línea de texto.
     El ícono de WhatsApp es reconocible solo; el rótulo era para el escritorio,
     donde el flotante cae en el margen exterior y no tapa nada.

     Queda cuadrado de 46: sin rótulo el botón daba 40×45, y para la acción
     de contacto principal en un teléfono conviene el blanco de toque de 44
     que recomienda la WCAG, no el mínimo de 24. */
  .wa-float{width:46px;height:46px;padding:0;justify-content:center;}
  .wa-float .wa-float__t{max-width:0;opacity:0;margin-left:-9px;}
  /* En móvil el rótulo no vuelve nunca: :hover no existe en táctil y, si el
     puntero es un mouse en una ventana angosta, ensancharlo volvería a tapar
     texto. Es la misma razón por la que se sacó. */
  .wa-float:hover .wa-float__t{max-width:0;opacity:0;margin-left:-9px;}

  .manifiesto{max-width:none;}
  .carta{padding-left:22px;}
  .marca__nom{font-size:var(--t-5);}
  .marca{padding:22px 0;}
  .cat{grid-template-columns:38px 1fr auto;gap:16px;padding:24px 0;}
  .rubro{grid-template-columns:30px 1fr;gap:16px;}
  .rubro__ico{width:30px;height:30px;}
  .rubro__go{display:none;}

  /* Fig. 03 pasa a 2×2. Cuatro tramos en una fila de teléfono dejan cada
     rótulo en ~78 px y "Superficies generales y oficinas" no entra. Los
     dos de arriba siguen tocándose entre sí, y los dos de abajo también:
     la banda se parte en dos, no en cuatro. */
  .codigo__grid{grid-template-columns:1fr 1fr;}
  .codigo__col{padding-right:18px;}
  .codigo__col + .codigo__col{padding-left:18px;}
  .codigo__col:nth-child(3),.codigo__col:nth-child(4){margin-top:26px;}
  .codigo__col:nth-child(3){padding-left:0;}
  .codigo__col:nth-child(3)::after{display:none;}
  .metodo{padding-top:22px;}
  .catalogo__sub{margin-top:52px;}

  /* Fig. 04: la banda pasa a una columna y las tres salidas se apilan.
     En fila a 390 px, «Un bidón de 5 L rinde» partía en tres renglones y
     descolgaba su cifra del resto. */
  .dilu__mandos{grid-template-columns:1fr;gap:22px;}
  .dilu__fig{padding-top:0;}
  .dilu__salida{grid-template-columns:1fr;gap:0;}
  .dilu__salida > div{flex-direction:row;align-items:baseline;
    justify-content:space-between;gap:18px;padding:14px 0;
    border-top:var(--rule-w) solid var(--rule-soft);}
  .dilu__salida > div:first-child{border-top:0;}

  /* La banda de marcas pasa a 3×2 → 2×3. A 390 px tres columnas dejan cada
     hueco de logotipo en ~100 px de ancho y "WASSINGTON" no entra. El pelo
     vertical se recalcula: con dos columnas va en las celdas pares, no en
     las que no son múltiplo de tres. */
  .marcas{grid-template-columns:1fr 1fr;}
  .marca{min-height:104px;padding:20px 14px;}
  .marca:not(:nth-child(3n+1)){border-left:0;}
  .marca:nth-child(even){border-left:var(--rule-w) solid var(--rule-soft);}
  .marca__nom{font-size:var(--t-4);}
  .marca__logo--tork{height:34px;}
  .marca__logo--wassington{height:32px;}
  .marca__logo--elegante{height:31px;}
  .marca__logo--diversey{height:33px;}
  .marca__logo--royco{height:27px;}
  .marca__logo--unilever{height:44px;}

  /* El bloque de datos va SIEMPRE debajo del mapa, nunca encima: en v12
     apilados medían 360 px contra 260 px del mapa y lo tapaban entero. */
  /* El mapa se achica a ~327 px de render: la escala cae de 1,70 a 0,77,
     así que TODO lo que va en unidades del viewBox —tipografías y trazos
     JUNTOS— se compensa. Compensar sólo las tipografías fue el error
     documentado de v12: los bordes caían a sub-píxel y la geografía
     desaparecía. Los valores dejan los rótulos en ~13 px reales. */
  .map__nodes text{font-size:17px;}
  .map__caba-label{font-size:21px;}
  .map__depot-lbl{font-size:19px;}
  .map__nodes circle{r:5.4;}
  .map__partido{stroke-width:1.9;}
  .map__caba{stroke-width:2.3;}
  .map__route{stroke-width:2.7;}
  .map__route-dot{r:5;}
  /* El marcador del depósito también va en unidades del viewBox: sin
     compensar quedaba en ~11 px y dejaba de leerse como la forma propia
     del mapa. x/y se recalculan para que el centro siga en (316,231). */
  /* T2 · El marcador, con transform y NO con width.
     Medido: el `width` por CSS sobre un <use> se computa (38px) pero Chrome
     NO lo aplica — el marcador seguía renderizando 11 px, que son los
     width="14" del atributo del marcado. O sea que la compensación móvil
     que v14 daba por hecha nunca estuvo funcionando, y por eso el depósito
     se confundía con los puntos de los partidos (9 px).
     El transform sí se aplica. Con fill-box el origen es el centro del
     propio dibujo, así que crece en su lugar y no hace falta recalcular
     x/y para mantener el centro en (316,231). */
  .map__destello{transform:scale(2.3);transform-box:fill-box;transform-origin:center;}
  .map__halo{r:22;}
  .map__lbl-2{display:none;}   /* rótulos secundarios: no entran en angosto */
  /* Sin cursor no hay hover: el nombre del partido no puede ser la única
     vía. La geografía sigue rotulada y el <desc> del SVG la describe. */
  .map__tip{display:none;}   /* sin cursor no hay hover */
  .map__cap{flex-direction:column;gap:6px;}
  .map__cap span{letter-spacing:0.035em;}   /* el epígrafe entra en dos líneas */

  /* La línea de tiempo gira 90° en vez de deshacerse. */
  .tl__track{display:none;}
  .tl__steps{grid-template-columns:1fr;gap:0;}
  .tl__step{padding:0 0 26px 30px;border-top:0;position:relative;}
  .tl__step:last-child{padding-bottom:0;}
  .tl__step::before{display:block;top:6px;left:0;}
  .tl__step::after{content:"";position:absolute;left:4px;top:20px;bottom:0;
    width:var(--rule-w);background:var(--hair);}
  .tl__step:last-child::after{display:none;}
  /* Una columna, número y rótulo en la misma fila. En dos columnas la
     tercera cifra quedaba huérfana abajo con el rótulo partido en cuatro
     renglones. */
  .cifras{grid-template-columns:1fr;}
  /* A tres columnas en teléfono cada cifra queda en ~110 px y el rótulo
     parte en cuatro renglones. */
  .cifras--3{grid-template-columns:1fr;}
  .cifra{flex-direction:row;align-items:baseline;justify-content:space-between;
    gap:20px;padding:18px 0;}
  .cifra + .cifra{padding-left:0;border-left:0;
    border-top:var(--rule-w) solid var(--rule-soft);}
  .cifra span{text-align:right;max-width:60%;}
  /* En media columna de teléfono el rótulo no entra en una línea y
     empujaba 30 px fuera del cuadro. Medido con el arnés. */
  .pendiente{white-space:normal;}
  .cta__form{grid-template-columns:1fr;gap:22px;}
  /* Una fila por dato, con el rótulo angosto a la izquierda.
     Se probó en dos columnas —como la ficha del hero— y NO sirve: los
     valores de acá son largos. El correo se desbordaba de su celda y el
     teléfono partía en tres renglones con el botón de copiar colgando en
     un cuarto. La ficha admite dos columnas porque sus valores son cortos;
     éste no. Antes el rótulo ocupaba un renglón entero para él solo y
     cuatro datos ocupaban ocho. */
  .cta__datos .mono{flex:0 0 66px;}
  .cta__datos li{padding:12px 0;gap:9px;}
  /* El correo es el dato más largo del sitio: con el rótulo a 78 px, el
     botón de copiar caía a un segundo renglón. 66 px y un cuerpo de 15
     dejan la fila entera en una línea. */
  .cta__datos li a{font-size:var(--t-2);}
  /* 2×2 y no una columna: apilado medía 956 px, ×2,48 respecto del
     escritorio y el bloque más pesado de la página. */
  .footer__in{grid-template-columns:1fr 1fr;gap:30px 24px;}
  .footer__col{gap:9px;font-size:var(--t-nota);}
  .footer__legal{flex-direction:column;}
}

/* ---------- ≤ 400 px ----------
   Vacío a propósito. Acá vivía el ajuste A3 de v14, que aflojaba el
   tracking del kicker del hero para que "INSTITUCIONAL" entrara en 312 px.
   El kicker se eliminó en v15 —repetía palabra por palabra el masthead que
   está 200 px más arriba— así que la regla quedaba apuntando a un elemento
   inexistente. Si vuelve un kicker, vuelve este ajuste. */

/* ---------- ≥ 1600 px ---------- */
@media (min-width:1600px){
  :root{ --wrap:1440px; --pad:80px; }
}

/* ===================== 8 · IMPRESIÓN =============================== */
@media print{
  .nav,.menu,.carga,.wa-float,.to-top,.toast,.nav__progress{display:none!important;}
  html.motion [data-reveal],html.motion [data-hero]{
    clip-path:none!important;opacity:1!important;transform:none!important;}
  body{background:#fff;color:#000;}
}