/* ============================================================
   Archibliss — hoja unica del sitio publico, compartida por los tres idiomas.
   /  (es-AR)   ·   /en/  (en)   ·   /pt/  (pt-BR)

   Estaba adentro de index.html hasta el 30-sep-2026. Se saco al agregar ingles y
   portugues: tres copias del mismo CSS se separan solas, y la que se rompe es la
   que nadie mira. Con una sola hoja, un retoque de estilo sale igual en los tres.
   No cambia nada de lo que se ve; lo unico que cambio es de donde se carga.

   Lo que SI depende del idioma esta en una variable que cada pagina define en su
   propio <style>: --paso, el rotulo de los pasos de la metodologia. Si aparece otro
   caso, va por el mismo camino y no copiando la hoja.

   Identidad: panel de instrumento y documentacion tecnica.
   Se saco a proposito lo que hacia ver la pagina generica:
     - fondo crema calido con acento terracota  -> blanco y grises FRIOS, acento verde
       azulado de instrumento. El crema con terracota es el par que sale solo.
     - rotulos en monoespaciada mayuscula en todas las secciones -> etiqueta en sans
       con un filete corto delante, que es como se rotula una hoja de datos.
     - rombos rotados como vinetas -> cuadrado chico, 2 px.
     - mismo radio y misma sombra en todo -> filetes finos, casi sin radio, sin sombras.
   Una sola familia (IBM Plex) en tres roles: condensada para titulos, sans para texto,
   mono para datos. Plex se diseno para documentacion tecnica, que es lo que la pagina
   tiene que parecer.
   ============================================================ */
:root {
  --ink:      #12171c;   /* casi negro, frio */
  --ink-2:    #49545e;
  --ink-3:    #77838d;
  --ground:   #ffffff;
  --surface:  #eef1f3;   /* gris frio de gabinete, NO crema */
  --surface-2:#e3e8eb;
  --line:     #d3d9de;
  --line-2:   #bcc5cc;
  --steel:    #1a242d;   /* secciones oscuras: acero, no azul marino */
  --steel-2:  #24313c;
  --steel-line:#36454f;
  --steel-txt:#e7ecef;
  --steel-mut:#93a1ab;
  --accent:   #00655a;   /* verde azulado de instrumento */
  --accent-2: #008676;
  --accent-lo:#e4efed;
  --sans:  "IBM Plex Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --cond:  "IBM Plex Sans Condensed", "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --mono:  "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
  --max: 1200px;
  --gutter: clamp(16px, 4vw, 44px);
  /* Respaldo: si una pagina se olvida de definirlo, el rotulo sale en espanol y se ve,
     en vez de quedar vacio y pasar desapercibido. */
  --paso: "Paso ";
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

h1, h2, h3 { font-family: var(--cond); font-weight: 600; line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: 0; }
h1 { font-size: clamp(2.2rem, 5vw, 3.9rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.1vw, 2.35rem); }
h3 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0; }

/* Etiqueta de seccion: filete corto y versalita en sans. Reemplaza el rotulo en
   monoespaciada que llevaba cada seccion. */
.eyebrow {
  font-family: var(--sans); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent);
  display: flex; align-items: center; gap: 0.6rem;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--accent); flex: none; }
.hero .eyebrow, .portal .eyebrow { color: var(--steel-mut); }
.hero .eyebrow::before, .portal .eyebrow::before { background: var(--accent-2); }

.lede { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--ink-2); max-width: 38em; }

.btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.78em 1.25em; border-radius: 2px;
  font-family: var(--sans); font-weight: 600; font-size: 0.95rem;
  text-decoration: none; border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-copper { background: var(--accent); color: #fff; }
.btn-copper:hover { background: var(--accent-2); }
.btn-ghost { border-color: var(--steel-line); color: var(--steel-txt); background: transparent; }
.btn-ghost:hover { border-color: var(--steel-mut); background: rgba(255,255,255,0.05); }
.btn svg { width: 1em; height: 1em; }

/* ---------- barra superior ---------- */
.nav { position: sticky; top: 0; z-index: 10; background: var(--steel); color: var(--steel-txt); border-bottom: 1px solid var(--steel-line); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 62px; }
.brand {
  font-family: var(--cond); font-weight: 700; letter-spacing: 0.06em;
  font-size: 1.22rem; text-decoration: none; color: var(--steel-txt);
  display: inline-flex; align-items: center; gap: 0.6em;
}
.brand svg { width: 30px; height: 18px; flex: none; }
.nav-links { display: flex; gap: 1.7rem; list-style: none; margin: 0; padding: 0; font-size: 0.93rem; }
.nav-links a { text-decoration: none; color: var(--steel-mut); padding-block: 0.4rem; border-bottom: 2px solid transparent; }
.nav-links a:hover { color: #fff; border-bottom-color: var(--accent-2); }
.nav .btn { padding: 0.55em 1em; font-size: 0.88rem; white-space: nowrap; flex: none; }

/* El selector de idioma y el boton viajan juntos a la derecha. Sin agruparlos, el
   space-between de la barra reparte CUATRO elementos y el selector queda flotando en
   el medio, lejos de los dos con los que se usa. */
.nav-right { display: flex; align-items: center; gap: clamp(0.7rem, 2vw, 1.3rem); flex: none; }

/* Idioma: texto, no banderas. Una bandera es un pais y no un idioma, y con el
   portugues eso se nota (Brasil y Portugal) igual que con el espanol. */
.lang { display: flex; align-items: center; gap: 0.4rem; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.04em; }
.lang a { color: var(--steel-mut); text-decoration: none; padding-block: 0.3rem; border-bottom: 2px solid transparent; }
.lang a:hover { color: #fff; }
/* El idioma activo se marca con aria-current, que es lo que anuncia un lector de
   pantalla; el estilo cuelga de ese mismo atributo para que no puedan separarse. */
.lang a[aria-current] { color: #fff; font-weight: 500; border-bottom-color: var(--accent-2); }
.lang .sep { color: var(--steel-line); }

@media (max-width: 520px) { .cta-long { display: none; } .nav .btn { padding: 0.5em 0.8em; } .nav .wrap { gap: 0.6rem; } .lang { font-size: 0.72rem; gap: 0.3rem; } }
/* Al ocultar los enlaces de seccion, su <nav> queda con ancho 0 pero SIGUE siendo un
   elemento de la barra, asi que se lleva una separacion de mas. Con el selector de
   idioma agregado eso alcanzaba para que el boton se corriera 10 px sobre el margen
   derecho a 375 px (medido el 30-sep: marca 16-176, idioma 195-273, boton 284-369,
   sobre un ancho util de 16-359). En 0 no se junta nada, porque el space-between ya
   reparte el espacio libre.

   El corte estaba en 760 px y era un defecto: entre 760 y ~870 px el menu se mostraba
   pero NO entraba, y la barra se desbordaba -la pagina se podia desplazar de costado-.
   Lo meti el 30-sep con el selector de idioma, que ensancho la parte derecha, y no se
   vio porque se probo a 375 px (menu oculto) y a 1009 px, nunca en el medio. Un iPad
   vertical mide 768, justo adentro.

   Ultimo ancho con desborde, medido el 4-oct px por px, en las tres paginas, con los
   cuatro items del menu:
                        es    pt    en
     IBM Plex (web)    865   846   810
     Arial             879   862   829    (Mac o Linux sin las tipografias de Google)
   Segoe UI (Windows sin las de Google) dio MENOS que IBM Plex, asi que no es el peor caso.
   El peor es Arial en castellano, 879. Una red de empresa que bloquea servicios externos
   -el cliente de este sitio- es justo donde no cargan las de Google.

   Se pone 900: el peor caso medido mas 21 px para tipografias que no se pudieron medir en
   Windows, como Helvetica en una Mac, que es apenas mas ancha que Arial. El margen es
   criterio, no medicion.

   COMO SE MIDE, porque hubo que hacerlo dos veces: la primera tabla salio con unos 8 px de
   error y llevo a poner 880 creyendo que habia 9 px de margen, cuando habia uno. Se media
   clonando la barra en un contenedor del ancho a probar, con la ventana fija. Pero el
   margen lateral (--gutter) es 4vw, o sea depende de la VENTANA, no del contenedor; y las
   media queries tambien. Clonar sirve para medir el ancho que necesita el menu visible
   solo si al clon se le pone el --gutter que tendria a ese ancho:
   clamp(16px, 4% del ancho, 44px). Y para VERIFICAR el corte no sirve clonar: hay que
   cambiar el ancho real de la ventana, porque la media query mira la ventana.

   SI SE AGREGA UN ITEM AL MENU, ESTE NUMERO HAY QUE MEDIRLO DE NUEVO. Con un quinto item
   el peor caso pasa a 985 (Arial, castellano).

   EN CELULARES este corte no alcanzaba: ahi no hay menu que ocultar y la barra tambien se
   desbordaba (4-oct, tipografia real: a 360 px el castellano 7 px; a 320 px, 47, 32 y 30).
   El 30-sep se dijeron arreglados los margenes a 375 midiendo solo portugues e ingles. Lo
   resuelve la regla de abajo, la de los dos renglones. */
@media (max-width: 900px) {
  /* Se saca de la barra el <nav> de secciones ENTERO, no solo su lista. Ocultando solo la
     lista, el <nav> quedaba como un elemento de ancho 0 que seguia llevandose una separacion;
     por eso el 30-sep se puso la separacion en 0. Pero con separacion 0, cuando la barra entra
     justo en un renglon la marca queda pegada al selector de idioma: medido el 4-oct, 1 px en
     ingles a 367 y 7 px en castellano a 390, ya publicado. Sacando el <nav>, la separacion
     puede volver a ser real (abajo) y la barra se parte en dos ANTES de quedar apretada.
     ".wrap > nav" toma solo el de secciones: el selector de idioma esta dentro de .nav-right. */
  .nav .wrap > nav { display: none; }
  /* Celular: la barra se parte en DOS RENGLONES cuando no entra en uno (Juanca, 4-oct:
     «Barra en dos renglones», elegido entre sacar la flecha, achicar la marca o mover el
     selector). No hay un ancho de corte: flex-wrap la parte sola exactamente cuando marca +
     selector + boton no caben, asi que no hay que volver a medir cuando cambie un texto o
     una traduccion. Esa fue la razon para elegirla.
     .nav-right crece y empuja su contenido a la derecha: en un renglon se ve IGUAL que antes
     (la marca a la izquierda, selector y boton a la derecha); partida, queda la marca arriba
     a la izquierda y selector y boton abajo a la derecha. Solo hasta 900 px, donde el menu de
     secciones ya esta oculto: con el menu visible, hacer crecer .nav-right lo correria. */
  .nav .wrap { column-gap: 1rem; flex-wrap: wrap; row-gap: 0.45rem; padding-block: 0.5rem; }
  .nav-right { flex: 1 0 auto; justify-content: flex-end; }
}

/* ---------- aviso de idioma ----------
   Lo inserta idioma.js arriba de todo cuando el navegador pide un idioma que tenemos y
   la pagina esta en otro. Va ANTES de la barra, que es pegajosa: asi el aviso se va al
   desplazar y no tapa nada. Sin JavaScript no existe, y la pagina no deja hueco. */
.idioma-aviso {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem;
  background: var(--accent-lo); color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 0.7rem var(--gutter);
  font-size: 0.9rem;
}
.idioma-aviso a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.idioma-cerrar {
  margin-left: auto; flex: none;
  background: none; border: 0; cursor: pointer;
  color: var(--ink-3); font-size: 1.2rem; line-height: 1;
  padding: 0.2rem 0.4rem;
}
.idioma-cerrar:hover { color: var(--ink); }

/* ---------- portada ---------- */
.hero { position: relative; color: var(--steel-txt); background: var(--steel); isolation: isolate; overflow: hidden; }
.hero-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0.4; filter: grayscale(0.4); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(26,36,45,0.97) 0%, rgba(26,36,45,0.86) 48%, rgba(26,36,45,0.5) 100%); }
.hero .wrap { padding-block: clamp(3.5rem, 8vw, 7rem) clamp(2.8rem, 6vw, 5rem); display: grid; gap: 1.5rem; }
.hero h1 { max-width: 13em; }
.hero .lede { color: #c6d0d7; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.3rem; }

/* ---------- tabla de magnitudes ---------- */
.strip { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.strip .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 0; padding-block: 0; }
.strip .m { padding: 1.05rem 1.1rem 1.05rem 0; border-right: 1px solid var(--line); margin-right: 1.1rem; }
.strip .m:last-child { border-right: 0; }
.strip .u { font-family: var(--mono); font-size: 1.02rem; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.strip .l { font-size: 0.8rem; color: var(--ink-3); margin-top: 0.2rem; }
@media (max-width: 760px) { .strip .m { border-right: 0; border-bottom: 1px solid var(--line); margin-right: 0; padding-inline: 0; } .strip .m:last-child { border-bottom: 0; } }

/* ---------- secciones ---------- */
.section { padding-block: clamp(3.2rem, 7vw, 5.6rem); }
.section-head { display: grid; gap: 0.6rem; max-width: 42em; margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }

.service { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 4vw, 3.6rem); align-items: start; }
.service + .service { margin-top: clamp(2.8rem, 5vw, 4.2rem); padding-top: clamp(2.8rem, 5vw, 4.2rem); border-top: 1px solid var(--line); }
.service.flip .service-img { order: 2; }
.service-img { aspect-ratio: 4 / 3; max-width: 100%; overflow: hidden; border-radius: 2px; background: var(--surface-2); position: relative; border: 1px solid var(--line); }
.service-img img { width: 100%; height: 100%; object-fit: cover; }
.service-img figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.5rem 0.8rem; font-family: var(--mono); font-size: 0.7rem; color: #fff; background: rgba(18,23,28,0.72); }
.service-body { display: grid; gap: 0.9rem; }
.service-body h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }

.checks { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
/* NO usar grid en el <li>: cada item es "<b>titulo</b> y texto suelto", y en una grilla
   ese texto pasa a ser un tercer elemento y cae en la columna de la vineta, una palabra
   por renglon. Estuvo asi publicado del 19 al 21-sep. */
.checks li { position: relative; padding-left: 1.5rem; color: var(--ink-2); }
.checks li::before { content: ""; position: absolute; left: 0; top: 0.58rem; width: 8px; height: 8px; background: var(--accent); }
.checks b { color: var(--ink); font-weight: 600; }
@media (max-width: 860px) { .service { grid-template-columns: 1fr; } .service.flip .service-img { order: 0; } }

/* ---------- proceso ---------- */
.process { background: var(--surface); border-block: 1px solid var(--line); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; counter-reset: step; }
.steps li { counter-increment: step; display: grid; gap: 0.45rem; align-content: start; padding: 1.1rem 1.2rem 0 0; border-top: 2px solid var(--ink); margin-right: 1.2rem; }
/* El rotulo del paso es lo unico de esta hoja que cambia con el idioma: cada pagina
   define --paso en su propio <style>. */
.steps li::before { content: var(--paso) counter(step); font-family: var(--mono); font-size: 0.72rem; color: var(--ink-3); letter-spacing: 0.04em; }
.steps h3 { font-size: 1.05rem; }
.steps p { color: var(--ink-2); font-size: 0.93rem; }
@media (max-width: 620px) { .steps li { margin-right: 0; padding-right: 0; } }

/* ---------- cifra de ahorro ---------- */
.savings { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.2rem, 3.5vw, 3rem); align-items: start; background: var(--accent-lo); border-left: 3px solid var(--accent); padding: clamp(1.2rem, 2.6vw, 2rem); margin-top: clamp(2rem, 4vw, 3rem); }
.savings-texto { display: grid; gap: 0.65rem; }
.savings p { color: var(--ink-2); max-width: 44em; font-size: 0.97rem; }
.savings p b { color: var(--ink); font-weight: 600; }
.savings-nota { font-size: 0.92rem; }
.figure { font-family: var(--cond); font-size: clamp(2.6rem, 6vw, 4rem); font-weight: 700; line-height: 0.95; color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.figure small { font-family: var(--mono); font-size: 0.2em; font-weight: 400; color: var(--ink-3); display: block; margin-top: 0.5rem; letter-spacing: 0.05em; text-transform: uppercase; white-space: normal; }
@media (max-width: 640px) { .savings { grid-template-columns: 1fr; } }

/* ---------- portal ---------- */
.portal { background: var(--steel); color: var(--steel-txt); position: relative; isolation: isolate; overflow: hidden; }
.portal-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0.22; filter: grayscale(0.5); }
.portal::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(26,36,45,0.97) 0%, rgba(26,36,45,0.84) 58%, rgba(26,36,45,0.6) 100%); }
.portal .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start; }
.portal .lede { color: #c2ccd3; }
.portal-body { display: grid; gap: 1.1rem; }
.portal-list { list-style: none; margin: 0; padding: 0; display: grid; }
.portal-list li { display: grid; grid-template-columns: 96px 1fr; gap: 1rem; align-items: baseline; padding-block: 0.8rem; border-top: 1px solid var(--steel-line); }
.portal-list li:last-child { border-bottom: 1px solid var(--steel-line); }
.portal-list .k { font-family: var(--mono); font-size: 0.72rem; color: var(--accent-2); letter-spacing: 0.06em; }
.portal-list .v { color: #d3dbe0; font-size: 0.95rem; }
.portal-url { font-family: var(--mono); color: #fff; font-size: 1rem; text-decoration: none; border-bottom: 1px solid var(--accent-2); }
@media (max-width: 860px) { .portal .wrap { grid-template-columns: 1fr; } .portal-list li { grid-template-columns: 84px 1fr; } }

/* ---------- galeria ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.gallery figure { margin: 0; position: relative; aspect-ratio: 3 / 4; max-width: 100%; overflow: hidden; background: var(--surface-2); }
.gallery img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.25); transition: filter .3s ease; }
.gallery figure:hover img { filter: grayscale(0); }
.gallery figcaption { position: absolute; inset: auto 0 0 0; padding: 0.85rem 0.9rem; color: #fff; font-size: 0.83rem; background: linear-gradient(transparent, rgba(18,23,28,0.88)); }
.gallery figcaption b { display: block; font-family: var(--cond); font-weight: 600; font-size: 1.02rem; margin-bottom: 0.15rem; }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr 1fr; } .gallery figure { aspect-ratio: 4 / 3; } .gallery figure:first-child { grid-column: span 2; } }

/* ---------- contacto ---------- */
.contact .wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start; }
.contact-block { display: grid; gap: 0.9rem; }
.contact dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 1.4rem; font-size: 0.97rem; }
.contact dt { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); padding-block: 0.7rem; border-top: 1px solid var(--line); }
.contact dd { margin: 0; padding-block: 0.7rem; border-top: 1px solid var(--line); }
.contact dd a { color: var(--accent); font-weight: 600; text-decoration: none; }
.contact dd a:hover { text-decoration: underline; }
@media (max-width: 760px) { .contact .wrap { grid-template-columns: 1fr; } }

/* ---------- pie ---------- */
footer { background: var(--steel); color: var(--steel-mut); font-size: 0.83rem; border-top: 1px solid var(--steel-line); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; }
footer a { color: var(--steel-mut); }