/* base.css — común a todas las páginas de nueva2/ (ES y EN).
   Se enlaza desde tools/stamp/templates/head.html ANTES de la hoja de la página: es la base
   de la cascada y cada hoja de página la refina. Los tokens que se definen acá son de esta
   hoja: nada más los vuelve a declarar, ni otra hoja (con ningún selector: ganaría la hoja de
   página, que carga después, o los heredaría de html/body) ni un <style> o style="" de una
   página; tools/test_stamp.py lo verifica. */

:root{
  /* Paleta compartida: idéntica en styles.css y home-redesign.css. El resto (--ink, --line,
     --soft, --dark, familias) todavía difiere entre las dos hojas y sigue en cada una. */
  --red:#a5101b;
  --paper:#f5f1e9;
  /* Texto secundario. Antes #6e6a63 (styles.css) / #6d6860 (home-redesign.css): 3,66–4,45:1
     sobre los fondos tostados. #5e5a53 da ≥4,5:1 (WCAG AA) sobre todos los fondos donde se
     usa: #f5f1e9 6,09 · #efe9df 5,68 · #ebe5da 5,47 · #e6e0d5 5,22 · #ded7cb 4,79 · #dcd4c8 4,67. */
  --muted:#5e5a53;

  /* Cromo y ritmo. Se definen acá; los aplican las PRs siguientes (header 7, barra 9, páginas). */
  --header-h:56px;                  /* alto del header por debajo de 900px */
  --bar-h:60px;                     /* barra de contacto inferior, sin el safe-area */
  --tap:44px;                       /* zona táctil mínima */
  --sec:clamp(56px,11vw,100px);     /* padding vertical de sección */
  --sec-lg:clamp(64px,13vw,120px);  /* secciones de cierre y contacto */

  /* «only»: además de fijar controles y barras de scroll en claro, le impide al navegador
     oscurecer la página por su cuenta (Auto Dark Theme de Chrome en Android). */
  color-scheme:only light;
}
@media (min-width:900px){
  :root{--header-h:72px}
}

/* ── Fuentes propias (nueva2/assets/fonts/, licencia OFL al lado de cada una) ─────────────
   GENERADO por tools/fonts/build.sh entre los marcadores: no se edita a mano. Webfonts woff2
   instanciadas y recortadas, más un fallback local por familia con las métricas de la webfont
   (size-adjust y overrides): mientras la webfont no llega, el texto ocupa casi lo mismo y el
   cambio no mueve la página (CLS). Las pilas --serif/--sans/--mono de styles.css y
   home-redesign.css los usan en este orden: webfont, fallback (Georgia/Arial/Courier New),
   fallback de Android (Noto Serif/Roboto), la local de siempre y la genérica. */
/* fonts:begin */
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/source-serif-4.woff2?v=a5eedd42) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:400;font-display:swap;src:url(assets/fonts/source-serif-4-italic.woff2?v=35634853) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;src:url(assets/fonts/inter.woff2?v=8a3ca54d) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(assets/fonts/jetbrains-mono.woff2?v=fba1737f) format("woff2")}
@font-face{font-family:"Source Serif 4 Fallback";font-style:normal;font-weight:400;src:local("Georgia"),local("Gelasio"),local("Gelasio Regular"),local("Gelasio-Regular");size-adjust:96.36%;ascent-override:107.51%;descent-override:34.77%;line-gap-override:0.00%}
@font-face{font-family:"Source Serif 4 Fallback";font-style:italic;font-weight:400;src:local("Georgia Italic"),local("Georgia-Italic"),local("Gelasio Italic"),local("Gelasio-Italic");size-adjust:87.86%;ascent-override:117.91%;descent-override:38.13%;line-gap-override:0.00%}
@font-face{font-family:"Source Serif 4 Fallback Noto";font-style:normal;font-weight:400;src:local("Noto Serif Regular"),local("NotoSerif-Regular"),local("Noto Serif");size-adjust:89.45%;ascent-override:115.82%;descent-override:37.45%;line-gap-override:0.00%}
@font-face{font-family:"Source Serif 4 Fallback Noto";font-style:italic;font-weight:400;src:local("Noto Serif Italic"),local("NotoSerif-Italic");size-adjust:85.09%;ascent-override:121.76%;descent-override:39.37%;line-gap-override:0.00%}
@font-face{font-family:"Inter Fallback";font-style:normal;font-weight:400;src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans"),local("Arimo"),local("Arimo Regular"),local("Arimo-Regular");size-adjust:106.20%;ascent-override:91.22%;descent-override:22.71%;line-gap-override:0.00%}
@font-face{font-family:"Inter Fallback";font-style:normal;font-weight:500;src:local("Arial"),local("ArialMT"),local("Liberation Sans"),local("LiberationSans"),local("Arimo"),local("Arimo Regular"),local("Arimo-Regular");size-adjust:107.19%;ascent-override:90.37%;descent-override:22.50%;line-gap-override:0.00%}
@font-face{font-family:"Inter Fallback";font-style:normal;font-weight:700;src:local("Arial Bold"),local("Arial-BoldMT"),local("Liberation Sans Bold"),local("LiberationSans-Bold"),local("Arimo Bold"),local("Arimo-Bold");size-adjust:101.07%;ascent-override:95.85%;descent-override:23.87%;line-gap-override:0.00%}
@font-face{font-family:"Inter Fallback Roboto";font-style:normal;font-weight:400;src:local("Roboto"),local("Roboto Regular"),local("Roboto-Regular");size-adjust:106.96%;ascent-override:90.57%;descent-override:22.55%;line-gap-override:0.00%}
@font-face{font-family:"Inter Fallback Roboto";font-style:normal;font-weight:500;src:local("Roboto Medium"),local("Roboto-Medium");size-adjust:107.17%;ascent-override:90.39%;descent-override:22.51%;line-gap-override:0.00%}
@font-face{font-family:"Inter Fallback Roboto";font-style:normal;font-weight:700;src:local("Roboto Bold"),local("Roboto-Bold");size-adjust:107.50%;ascent-override:90.12%;descent-override:22.44%;line-gap-override:0.00%}
@font-face{font-family:"JetBrains Mono Fallback";font-style:normal;font-weight:400;src:local("Courier New"),local("CourierNewPSMT"),local("Liberation Mono"),local("LiberationMono"),local("Cousine"),local("Cousine Regular"),local("Cousine-Regular"),local("Droid Sans Mono"),local("DroidSansMono");size-adjust:99.98%;ascent-override:102.02%;descent-override:30.00%;line-gap-override:0.00%}
/* fonts:end */

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  /* las anclas (#contacto, #pie…) y el foco con teclado no quedan debajo del header fijo */
  scroll-padding-top:calc(var(--header-h) + 8px);
}

/* Foco visible con teclado: anillo rojo de la marca con un anillo claro por dentro, así se ve
   sobre los fondos claros (el rojo) y sobre los oscuros del footer y los bloques negros (el
   claro). Especificidad de una pseudoclase: las reglas de componente (.pick-who:focus-visible,
   .chip input:focus-visible+span…) la refinan. */
:focus-visible{
  outline:2px solid var(--red);
  outline-offset:2px;
  box-shadow:0 0 0 2px var(--paper);
}
/* Campos de texto y listas: la etiqueta va pegada encima del campo (0px en la home), así que un
   anillo 4px por fuera le cortaba la base de las letras. El anillo se pega al campo (offset 0,
   sin el claro, como el nativo) y su borde superior va por dentro: clip-path recorta el tramo de
   arriba del outline y el box-shadow lo repone dentro del padding del campo, donde no hay texto.
   No se usa un outline hacia adentro: el texto arranca en x=0 (padding lateral 0) y taparía el
   cursor de un campo vacío. En modo de colores forzados y con autocompletado (sus reglas pisan
   el box-shadow) queda el outline de los lados y la base. Sobre fondo oscuro, la hoja de la
   página cambia el rojo por --paper (ej.: .v2-report en styles.css). */
:is(input:not([type=checkbox],[type=radio]),select,textarea):focus-visible{
  outline-offset:0;
  clip-path:inset(0 -2px -2px);
  box-shadow:inset 0 2px var(--red);
}

/* Salto al contenido: fuera de la vista hasta que recibe el foco. El markup llega con la
   plantilla del header (PR 7), como primer hijo de <body>: <a class="skip-link" href="#…">. */
.skip-link{
  position:fixed;
  top:8px;
  left:8px;
  z-index:1000;
  display:inline-flex;
  align-items:center;
  min-height:var(--tap);
  padding:0 16px;
  background:var(--red);
  color:#fff;
  font:600 .875rem/1.2 var(--sans,"Inter",Arial,sans-serif);
  text-decoration:none;
  transform:translateY(calc(-100% - 16px));
}
.skip-link:focus{
  transform:none;
}

/* ── Header (bloque stamp:header: tools/stamp/templates/header.html) ─────────────────────
   Desde 900px es el header de escritorio de cada página, igual que antes: lo pintan sus hojas
   (styles.css; rrhh.css, el menú de los segmentos; home-redesign.css; contable.css), con todas sus
   reglas de header dentro de @media(min-width:900px). Por debajo de 900px lo pinta esta hoja,
   igual en todas las páginas:
   logo (a la home) + nombre del área + «Menú», y la hoja del menú a ancho completo, que maneja
   site.js. Sin JS, «Menú» es un enlace al pie (#pie). */
.menu-toggle,.site-menu{display:none}

@media (max-width:899.98px){
  .site-head,.site-header{
    position:sticky;
    top:0;
    z-index:50;
    display:flex;
    align-items:center;
    gap:10px;
    height:var(--header-h);
    padding:0 16px;
    background:var(--paper); /* sólido: sin blur, que cuesta en el scroll de los Android chicos */
    border-bottom:1px solid var(--line);
  }
  /* lo de escritorio (navegación, acciones, ES/EN, desplegable de áreas) va dentro del menú */
  .site-head>nav,.site-header>nav,.head-actions,.header-actions,.lang-switch,.area-toggle,.area-menu{display:none}

  .brand-area{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0}
  .brand{display:flex;align-items:center;flex:none;min-height:var(--tap)}
  .brand img{display:block;width:112px;max-width:none;height:auto}
  .site-head .brand img{width:140px}

  /* el nombre del área, sin «Área 0X»; si no entra, con elipsis */
  .area-switch{display:flex;min-width:0}
  .area-tag{display:flex;align-items:center;min-width:0;min-height:var(--tap);padding-left:10px;border-left:1px solid var(--line);color:var(--ink)}
  .area-tag small{display:none}
  .area-tag span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:400 .9375rem/1.2 var(--serif);letter-spacing:-.01em}

  .menu-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    flex:none;
    margin:0 0 0 auto;
    min-width:var(--tap);
    height:var(--tap);
    padding:0 10px;
    border:1px solid var(--line);
    border-radius:0;
    background:transparent;
    color:var(--ink);
    font:500 11px/1 var(--mono);
    letter-spacing:.1em;
    text-transform:uppercase;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .menu-toggle-icon{position:relative;width:14px;height:1.5px;background:currentColor;box-shadow:0 -4.5px,0 4.5px}
  .menu-toggle-icon::before,.menu-toggle-icon::after{content:"";position:absolute;inset:0;background:currentColor;opacity:0}
  .menu-toggle[aria-expanded="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon{background:transparent;box-shadow:none}
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon::before{opacity:1;transform:rotate(45deg)}
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon::after{opacity:1;transform:rotate(-45deg)}

  /* hoja del menú: debajo del header, a ancho completo; lo de atrás queda velado e inerte. Nunca
     llega al borde de abajo: queda una franja del velo (≥44px) para cerrarlo tocando afuera. */
  .site-menu:not([hidden]){
    display:block;
    position:absolute;
    top:calc(100% + 1px);
    left:0;
    right:0;
    max-height:calc(100vh - var(--header-h) - 48px);
    max-height:calc(100dvh - var(--header-h) - 48px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:0 16px 24px;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px #16151324;
  }
  html.nav-open{overflow:hidden}
  html.nav-open body::after{content:"";position:fixed;inset:0;z-index:45;background:#16151359}

  .site-menu ul{list-style:none;margin:0;padding:0}
  .site-menu-nav>ul>li{border-bottom:1px solid var(--line)}
  .site-menu-nav>ul>li>a{display:grid;grid-template-columns:34px 1fr;align-items:baseline;row-gap:2px;min-height:52px;padding:13px 0 11px;color:var(--ink)}
  .site-menu-nav small{grid-column:1;font:500 11px/1 var(--mono);letter-spacing:.06em;color:var(--red)}
  .site-menu-nav b{grid-column:2;font:400 1.3rem/1.2 var(--serif);letter-spacing:-.01em}
  .site-menu-nav>ul>li>a span{grid-column:2;font-size:13px;line-height:1.4;color:var(--muted)}
  .site-menu .site-menu-sub{margin:-2px 0 10px 34px}
  .site-menu-sub a{display:flex;align-items:center;min-height:var(--tap);padding:4px 0 4px 14px;border-left:1px solid var(--line);font-size:.9375rem;line-height:1.3;color:var(--ink)}
  .site-menu a[aria-current="page"] b,.site-menu-sub a[aria-current="page"]{color:var(--red)}
  .site-menu-sub a[aria-current="page"]{border-left-color:var(--red)}

  .site-menu-portal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;min-height:52px;margin-top:16px;padding:10px 16px;border:1px solid var(--line);background:#16151308}
  .site-menu-portal span{font-size:14px;color:var(--muted)}
  .site-menu-portal b{font:600 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--red)}

  .site-menu-contact{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
  .site-menu-contact a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;padding:8px 10px;border:1px solid var(--ink);color:var(--ink);text-align:center}
  .site-menu-contact b{font:600 12px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase}
  .site-menu-call span{font-size:12px;line-height:1.2;color:var(--muted)}
  .site-menu-contact .site-menu-wa{flex-direction:row;gap:8px;background:var(--ink);color:var(--paper)}
  .site-menu-wa svg{width:18px;height:18px;flex:none;fill:currentColor}

  .site-menu-lang{display:flex;width:max-content;margin-top:16px;border:1px solid var(--line)}
  .site-menu-lang a{display:flex;align-items:center;justify-content:center;min-width:var(--tap);min-height:var(--tap);padding:0 12px;font:500 12px/1 var(--mono);letter-spacing:.1em;color:var(--muted)}
  .site-menu-lang a+a{border-left:1px solid var(--line)}
  .site-menu-lang a[aria-current]{background:var(--ink);color:var(--paper)}
}
@media (min-width:600px) and (max-width:899.98px){
  .site-head,.site-header{padding:0 24px}
  .brand img{width:140px}
  .site-head .brand img{width:170px}
  .area-tag span{font-size:1.0625rem}
  .site-menu:not([hidden]){padding:0 24px 28px}
}
@media (max-width:899.98px) and (hover:hover) and (pointer:fine){
  .site-menu-nav a:hover b,.site-menu-sub a:hover{color:var(--red)}
  .site-menu-portal:hover b{text-decoration:underline}
}

/* ── Pie: stamp:footer (tools/stamp/templates/footer.html), el mismo en las 20 páginas ─────────
   Mobile primero, ≤480px de alto a 390: logo y redes en una fila, la leyenda, Áreas | Contacto en
   dos columnas y los legales (el CUIT no se corta). Todo lo que se toca mide ≥44px (--tap). Desde
   900px, columnas como el pie de siempre. Las reglas del pie viejo (footer, .footer-grid,
   .site-footer, .foot-*, .soc) se borraron con la poda de la PR 21. */
.pie{
  background:#141614;
  color:#aaa;
  padding:28px 0 20px;
  font:400 14px/1.4 var(--sans,"Inter",Arial,sans-serif);
}
.pie-in{
  width:min(100% - 32px,1200px);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.pie-marca{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:2px 12px;
}
.pie-logo{
  display:inline-flex;
  align-items:center;
  min-height:var(--tap);
}
.pie-logo img{
  width:150px;
  height:auto;
}
.pie-leyenda{
  grid-column:1/-1;
  margin:0;
  font-size:13px;
  color:#8b8b8b;
  text-wrap:pretty;
}
.pie-redes{
  grid-row:1;
  grid-column:2;
  justify-self:end;
  display:flex;
  margin:0 -12px 0 0;
  padding:0;
  list-style:none;
}
.pie-redes a{
  display:grid;
  place-items:center;
  width:var(--tap);
  height:var(--tap);
  color:#aaa;
}
.pie-redes svg{
  width:18px;
  height:18px;
  fill:currentColor;
}
.pie-col h2{
  margin:0 0 2px;
  font:500 11px/1.4 var(--mono,"JetBrains Mono",monospace);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#8a8a8a;
}
.pie-col ul{
  margin:0;
  padding:0;
  list-style:none;
}
.pie-col a{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:var(--tap);
  color:#d4d4d4;
  text-decoration:none;
}
.pie address{
  font-style:normal;
}
/* teléfono: el rótulo (Recursos Humanos, Contable y Legal) arriba, el número y la aclaración del área
   (RR.HH.: «no recibe CV ni postulaciones») abajo, en una fila de ≥44px */
.pie address a{
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:0;
}
.pie address a span{
  font-size:12px;
  color:#8a8a8a;
}
.pie address a small{
  font-size:12px;
  line-height:1.35;
  color:#a8a39a;
}
.pie address p{
  margin:8px 0;
  text-wrap:balance;
}
.pie-legal{
  grid-column:1/-1;
  padding-top:12px;
  border-top:1px solid #2c2c2c;
  font-size:12px;
  color:#8a8a8a;
}
.pie-legal p{
  margin:0;
}
/* «Privacidad»: 44px de alto para tocarlo, como el resto del cromo */
.pie-legal a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  min-width:44px;
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}
/* razón social y CUIT: en mobile, una línea cada uno; desde 900px, en la misma, con «·» */
.pie-legal span{
  display:block;
}
.pie-cuit{
  white-space:nowrap;
}
@media (hover:hover) and (pointer:fine){
  .pie a:hover{color:#fff}
}
@media (min-width:900px){
  .pie{padding:64px 0 32px}
  .pie-in{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1.2fr);gap:24px 48px}
  .pie-marca{grid-column:auto;grid-template-columns:1fr;align-content:start;gap:12px}
  .pie-logo img{width:200px}
  .pie-leyenda{max-width:330px;line-height:1.6}
  .pie-redes{grid-row:auto;grid-column:auto;justify-self:start;margin:0 0 0 -12px}
  .pie-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 28px;margin-top:24px;padding-top:20px}
  .pie-legal span{display:inline}
  .pie-cuit::before{content:"· "}
}

/* ── Safe areas (viewport-fit=cover, en la plantilla del head) ───────────────────────────
   Con cover la página llega hasta los bordes del teléfono (debajo del indicador de inicio y, en
   apaisado, de la muesca), y así la barra de contacto puede pintar su fondo hasta abajo. El
   contenido se corre lo mismo que sin cover: el body deja el ancho de la muesca a los costados
   (env() vale 0 en los teléfonos sin muesca y en la compu, que no cambian nada). */
body{
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}

/* Pantallas bajas (≤640px de alto: iPhone SE, apaisado): la barra baja a 52px, así header (56px) y
   barra no pasan del 20% del alto (108 de 568). */
@media (max-height:640px){
  :root{--bar-h:52px}
}

/* Celular apaisado (alto ≤500px): header (56px) + barra (52px) taparían el 30% del alto (108 de
   360). El header sigue sticky pero se esconde al bajar y reaparece apenas se sube (site.js pone
   html.header-away); así, leyendo, el único cromo fijo es la barra. */
@media (max-width:899.98px) and (max-height:500px){
  .site-head,.site-header{transition:transform .2s ease}
  html.header-away .site-head,html.header-away .site-header{transform:translateY(-100%)}
  html{scroll-padding-top:8px}
}
@media (max-width:899.98px) and (max-height:500px) and (prefers-reduced-motion:reduce){
  .site-head,.site-header{transition:none}
}

/* ── Barra de contacto (bloque stamp:bar: tools/stamp/templates/bar.html) ────────────────
   Por debajo de 900px, fija abajo: WhatsApp · Llamar · Consulta del área. La muestra site.js
   (html.contact-bar-on) cuando el CTA del hero ([data-hero-cta]) salió de la vista, y la esconde
   sobre #contacto y el footer, con un campo en foco, con el teclado abierto y con el menú abierto.
   Sin JS no aparece. El body lleva el padding de la barra sólo mientras se ve (nunca queda una
   franja vacía debajo del footer: sobre el footer la barra ya no está). */
.contact-bar{display:none}

@media (max-width:899.98px){
  .contact-bar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:40; /* debajo del velo del menú (45) y del header (50) */
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background:#161513; /* sólido, sin blur */
    box-shadow:0 -1px #3a3d3a; /* el filo, por fuera: no suma alto */
    color:var(--paper);
    transform:translateY(100%);
    visibility:hidden;
    transition:transform .2s ease,visibility 0s linear .2s;
  }
  html.contact-bar-on .contact-bar{transform:none;visibility:visible;transition:transform .2s ease}
  html.contact-bar-on body{padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom))}
  /* El foco por teclado y los #anclas tienen que quedar por encima de la barra, no debajo. */
  html.contact-bar-on{scroll-padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom) + 8px)}

  .contact-bar-item{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-width:0;
    height:var(--bar-h);
    padding:0 6px;
    color:inherit;
    font:600 13px/1 var(--sans);
    letter-spacing:.01em;
    white-space:nowrap; /* una línea también a 320px: el texto más largo («WhatsApp») mide ~62px */
    text-decoration:none;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .contact-bar>*+*{border-left:1px solid #2c2f2c}
  .contact-bar-item svg{width:18px;height:18px;flex:none;fill:currentColor}
  .contact-bar-consult{background:var(--red);color:#fff}
  /* el anillo claro, por dentro, sólo en los ítems oscuros (el summary de la home incluido): los
     enlaces de .contact-bar-areas van sobre --paper y se quedan con el :focus-visible rojo global,
     que el padding de 16px del panel deja entero */
  .contact-bar-item:focus-visible{outline-color:var(--paper);outline-offset:-4px;box-shadow:none}

  /* home: WhatsApp elige el área; la lista se abre arriba de la barra, a su ancho */
  .contact-bar-choose{min-width:0}
  .contact-bar-choose>summary{list-style:none}
  .contact-bar-choose>summary::-webkit-details-marker{display:none}
  .contact-bar-choose[open]>summary{background:#2c2f2c}
  .contact-bar-areas{
    position:absolute;
    left:0;
    right:0;
    bottom:100%;
    padding:6px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));
    background:var(--paper);
    border-top:1px solid var(--line);
    box-shadow:0 -14px 32px #16151324;
    color:var(--ink);
  }
  .contact-bar-areas p{margin:8px 0 4px;font:500 11px/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .contact-bar-areas a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
  .contact-bar-areas a:last-child{border-bottom:0}
  .contact-bar-areas b{font:400 1.125rem/1.2 var(--serif)}
  .contact-bar-areas span{font:500 12px/1.2 var(--mono);color:var(--muted);white-space:nowrap}
}
@media (max-width:899.98px) and (prefers-reduced-motion:reduce){
  .contact-bar,html.contact-bar-on .contact-bar{transition:none}
}
@media (max-width:899.98px) and (hover:hover) and (pointer:fine){
  .contact-bar-item:hover span{text-decoration:underline}
  .contact-bar-areas a:hover b{color:var(--red)}
}

/* ── Campos de formulario (PR 11) ──────────────────────────────────────────────────────────────
   16px como piso en los campos de texto y las listas: con menos, Safari de iOS hace zoom al
   enfocarlos. Es el valor de todas las páginas; una hoja de página puede agrandarlos
   (.registro-buscador input), nunca achicarlos — el arnés (tools/qa) los mide: «inputs <16px». */
input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=image],[type=submit],[type=button],[type=reset],[type=hidden]),
select,
textarea{
  font-size:16px;
}

/* Estado de los formularios de consulta: <p class="form-status" role="status" aria-live="polite"
   data-form-status>, vacío en el HTML; al enviar, app.js escribe ahí si la consulta salió o no.
   Es el mismo en todas las páginas; la hoja de la página sólo le da su lugar (márgenes). Vacío va
   fuera del flujo (no suma una fila ni un hueco a la grilla del form), pero nunca display:none ni
   hidden: una región aria-live que no está en el árbol de accesibilidad no se anuncia al llenarse. */
.form-status{margin:0;font-size:.95rem;line-height:1.45}
.form-status:empty{position:absolute}
.form-status:not(:empty){padding-left:12px;border-left:2px solid var(--red)}
/* Honeypot de los formularios (consulta.php): un campo que una persona no ve ni alcanza con el
   teclado (tabindex=-1, aria-hidden) y que los bots llenan. Fuera de la pantalla y no display:none,
   que algunos bots detectan y saltean. */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* ── Filtro de postulantes del WhatsApp de RR.HH. (el <dialog> lo arma site.js) ─────────── */
.wa-gate{
  width:min(440px,calc(100vw - 32px));
  margin:auto;
  max-height:calc(100dvh - 32px);
  padding:28px 24px 24px;
  border:0;
  border-top:4px solid var(--red);
  background:var(--paper);
  color:var(--ink,#161513);
  font:400 15px/1.5 var(--sans,"Inter",Arial,sans-serif);
  box-shadow:0 24px 60px rgba(0,0,0,.28);
}
.wa-gate::backdrop{background:rgba(22,21,19,.55)}
.wa-gate h2{outline:0;margin:0 32px 8px 0;font:400 1.5rem/1.2 var(--serif,Georgia,serif);letter-spacing:-.01em}
.wa-gate p{margin:0 0 18px;color:var(--muted)}
.wa-gate-close{position:absolute;top:6px;right:6px;display:flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border:0;background:none;color:var(--ink,#161513);cursor:pointer}
.wa-gate-choice{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  width:100%;min-height:64px;margin-top:10px;padding:12px 16px;
  border:1px solid var(--line,#cfc8bd);background:#fff;color:var(--ink,#161513);
  text-align:left;cursor:pointer;font:inherit;
}
.wa-gate-choice b{font-weight:600;font-size:16px}
.wa-gate-choice span{font-size:14px;color:var(--muted)}
.wa-gate-choice:hover{border-color:var(--red)}
.wa-gate-choice[data-choice="empresa"]{background:var(--ink,#161513);border-color:var(--ink,#161513);color:var(--paper)}
.wa-gate-choice[data-choice="empresa"] span{color:#d9d3c8}
.wa-gate-portal{
  display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 16px;
  background:var(--red);color:#fff;font-weight:600;text-decoration:none;
}
.wa-gate-back{display:block;min-height:var(--tap);margin:10px auto 0;padding:0 12px;border:0;background:none;color:var(--ink,#161513);font:inherit;text-decoration:underline;cursor:pointer}

/* aclaración del área bajo su número en el NAP de #contacto (RR.HH.: «no recibe CV ni postulaciones») */
.nap-note{display:block;margin-top:4px;font:400 13px/1.4 var(--sans,"Inter",Arial,sans-serif);color:var(--muted)}