@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fuentes/schibsted-grotesk-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 800;font-display:swap;src:url('/assets/fuentes/schibsted-grotesk-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* ══════════════════════════════════════════════════════════════════════════
   sqaingenieros.com — hoja de estilos única.

   LA REGLA QUE PIDIÓ MARCELO (2026-10-02): «que la página se ajuste sola según
   el tamaño de pantalla, pero que no se superpongan sus cosas».

   Cómo se cumple, y por qué la versión anterior no podía:
   · Nada de texto con posición absoluta ni cajas de alto fijo: el alto lo pone
     el contenido, así que un texto más largo empuja lo de abajo, no lo tapa.
   · Toda rejilla es `minmax(0, 1fr)` o `auto-fit`: las columnas se achican o
     pasan abajo solas; ninguna obliga a desplazarse de lado. Vale también para
     las de UNA columna: sin declararla, la columna mide lo que su palabra más
     larga, y una dirección de correo empujó el texto fuera de un teléfono de
     320 px (lo encontró el barrido de anchos el 2026-10-02).
   · Las medidas son `clamp()`: crecen con la pantalla entre un mínimo y un
     máximo, sin saltos entre «versión teléfono» y «versión escritorio».
   · Un solo punto de quiebre de estructura (el menú); el resto fluye.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* GRIS ACERO, NO NEGRO (Marcelo, 2026-10-05: «el negro es como color de velorio… nuestro
     color es el gris metalizado, el color de SQA»). Los tres tonos oscuros subieron de negro
     a acero; para volver atrás: #12161c, #15181e y #1c212a. */
  --tinta: #1c2229;
  --acero: #20262d;
  --acero-2: #2b323a;
  --fondo: #f1f2f4;
  --papel: #ffffff;
  --naranja: #c4561a;
  --naranja-oscuro: #a8450f;
  --naranja-claro: #e8783a;
  --gris: #5c6470;
  --gris-2: #3d434c;
  --gris-claro: #b9bec7;
  --linea: rgba(18, 22, 28, .12);
  --linea-clara: rgba(255, 255, 255, .14);
  --ancho: 1220px;
  --pad: clamp(18px, 4.5vw, 56px);
  --radio: 12px;
  --cabecera: 68px;
  --sans: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  /* UNA SOLA TIPOGRAFÍA (Marcelo, 2026-10-05: «hay fuentes distintas en la página»; en
     el audio del 02-10: «que sea la misma»). Los rótulos chicos iban en una segunda
     familia, de ancho fijo; ahora todo el sitio usa la misma letra y los rótulos se
     distinguen por tamaño, mayúsculas y espaciado. `--mono` queda como otro nombre
     de la misma familia para no tocar cada regla. */
  --mono: var(--sans);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font-family: var(--sans); font-size: 17px; line-height: 1.55;
  overflow-wrap: break-word; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--naranja-claro); outline-offset: 3px; border-radius: 4px; }

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--pad); }
.saltar { position: absolute; left: -9999px; top: 0; background: var(--papel); color: var(--tinta); padding: 10px 14px; z-index: 100; }
.saltar:focus { left: 8px; top: 8px; }

/* ── Tipografía ── */
h1 { font-size: clamp(32px, 5.4vw, 62px); font-weight: 800; letter-spacing: -.028em; line-height: 1.04; text-wrap: balance; }
h2 { font-size: clamp(27px, 3.8vw, 46px); font-weight: 800; letter-spacing: -.024em; line-height: 1.08; text-wrap: balance; }
h3 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; letter-spacing: -.015em; line-height: 1.2; }
.sobre { font-family: var(--mono); font-weight: 600; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.oscura .sobre { color: var(--gris-claro); }
.bajada { font-size: clamp(16.5px, 1.5vw, 19px); color: var(--gris-2); max-width: 62ch; }
.oscura .bajada { color: #d5d9df; }
.acento { color: var(--naranja-claro); }

/* ── Botones ── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 11px 22px; border-radius: 8px; border: 2px solid transparent;
  font-weight: 700; font-size: 15.5px; line-height: 1.2; cursor: pointer; text-align: center;
  transition: background .15s, color .15s, border-color .15s;
}
.boton-acento { background: var(--naranja); color: #fff; }
.boton-acento:hover { background: var(--naranja-oscuro); }
.boton-linea { border-color: currentColor; background: transparent; }
.boton-linea:hover { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.oscura .boton-linea:hover { background: #fff; border-color: #fff; color: var(--tinta); }
.botones { display: flex; flex-wrap: wrap; gap: 12px; }

/* ══ Cabecera ══════════════════════════════════════════════════════════════
   Una fila de alto fijo. En pantallas angostas el menú se guarda detrás de un
   botón: antes ocupaba tres filas (196 px) pegadas arriba, un cuarto de la
   pantalla del teléfono. */
.cabecera { position: sticky; top: 0; z-index: 50; background: var(--acero); color: #fff; border-bottom: 1px solid var(--linea-clara); }
/* La cabecera entera mide `--cabecera`, con su línea de abajo incluida: por eso
   la fila mide 1 px menos. Sin ese descuento medía 69 px y las secciones «de
   una pantalla» (que restan `--cabecera`) quedaban 1 px más largas que la ventana. */
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: calc(var(--cabecera) - 1px); }
.marca { display: flex; align-items: center; gap: 14px; flex: none; min-width: 0; }
/* Solo las letras «SQA» (2026-10-02): miden 40 px de alto, contra 27 cuando el
   archivo traía además las dos líneas de texto. La sombra las despega del
   fondo oscuro. */
.marca img { height: 40px; width: auto; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .55)); }
.marca-nombre { display: flex; flex-direction: column; gap: 3px; line-height: 1; padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .2); }
/* Las dos líneas del nombre van iguales, con la letra chica y espaciada (Marcelo, 2026-10-05:
   «dejarlo todo con la letra de abajo»): el protagonista es el logo. */
.marca-nombre b, .marca-nombre small { font-size: 11.5px; font-weight: 600; letter-spacing: .2em; color: #e5e7eb; white-space: nowrap; }

.menu-boton {
  display: none; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px;
  background: transparent; border: 1px solid rgba(255, 255, 255, .28); border-radius: 8px; color: #fff;
  font-weight: 600; font-size: 14.5px; cursor: pointer;
}
.menu-boton svg { width: 18px; height: 18px; }
.menu { display: flex; align-items: center; gap: 2px; font-size: 15px; }
.menu a { padding: 9px 10px; border-radius: 6px; color: #d5d9df; white-space: nowrap; }
.menu a:hover, .menu a[aria-current="page"] { background: rgba(255, 255, 255, .09); color: #fff; }
.menu .boton { margin-left: 10px; color: #fff; padding: 10px 18px; min-height: 42px; }
.menu .boton:hover { background: var(--naranja-oscuro); }


/* El menú completo necesita ~1.200 px (marca + cinco enlaces + botón). Por
   debajo de 1.260 se guarda: medido con la revisión automática, no a ojo.
   Y tiene que caber DENTRO del ancho del contenido, no solo de la ventana: con
   el logo de solo «SQA» (más ancho) la fila pedía 1.109 px y el contenido medía
   1.088, así que «Solicitar propuesta» se pasaba 21 px del borde derecho de la
   página. Por eso `--ancho` es 1.220 y los enlaces llevan 10 px a los lados:
   la fila pide 1.089 de 1.108. */
@media (max-width: 1259px) {
  .menu-boton { display: inline-flex; }
  .menu {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 10px var(--pad) 18px; background: var(--acero); border-bottom: 1px solid var(--linea-clara);
    max-height: calc(100vh - var(--cabecera)); max-height: calc(100dvh - var(--cabecera)); overflow-y: auto;
    box-shadow: 0 18px 30px rgba(0, 0, 0, .35);
  }
  .cabecera[data-abierto="si"] .menu, .sin-js .menu { display: flex; }
  .sin-js .menu { position: static; box-shadow: none; padding-inline: 0; }
  .sin-js .cabecera-fila { flex-wrap: wrap; padding-block: 8px; }
  .sin-js .menu-boton { display: none; }
  .menu a { padding: 12px 10px; font-size: 16px; white-space: normal; }
  .menu .boton { margin: 8px 0 0; }
}
/* El nombre al lado del logo se guarda cuando no cabe junto al botón «Menú».
   Medido en el navegador: logo + nombre (314 px) + separación (16) + botón (91)
   + los márgenes piden 462 px de página, 479 si hay barra de desplazamiento.
   Con el corte anterior (420 px) el botón quedaba aplastado entre 421 y 470. */
@media (max-width: 499px) {
  .marca-nombre { display: none; }
}

/* ══ Secciones ═════════════════════════════════════════════════════════════ */
.seccion { padding-block: clamp(44px, 7vw, 92px); }
.oscura { background: var(--tinta); color: #fff; }
.oscura-degradado { background: linear-gradient(120deg, #272d35 0%, #363d46 56%, #2c333b 100%); color: #fff; }
.blanca { background: var(--papel); }
.encabezado { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: clamp(26px, 4vw, 44px); }
.encabezado-lado { display: grid; gap: 14px 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: end; margin-bottom: clamp(26px, 4vw, 44px); }
.migas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: clamp(20px, 3vw, 32px); font-size: 14.5px; }
.volver { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 7px 14px; border: 1.5px solid var(--tinta); border-radius: 999px; font-weight: 600; }
.volver:hover { background: var(--tinta); color: #fff; }

/* ── Portada ── */
.portada { padding-block: clamp(52px, 9vw, 120px) clamp(40px, 6vw, 72px); }
.portada h1 { max-width: 15ch; margin-top: 16px; }
.portada .bajada { margin-top: 20px; }
.portada .botones { margin-top: 28px; }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 20px 32px; margin-top: clamp(36px, 6vw, 64px); padding-top: 24px; border-top: 1px solid var(--linea-clara); }
.cifra b { display: block; font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.cifra span { display: block; font-size: 14.5px; color: var(--gris-claro); margin-top: 4px; }


.clientes { padding-block: clamp(30px, 5vw, 52px); background: var(--papel); border-bottom: 1px solid var(--linea); }
.clientes-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; margin-top: 20px; }
.clientes-lista a { display: flex; align-items: center; justify-content: center; min-height: 72px; padding: 14px; border: 1px solid var(--linea); border-radius: 10px; background: var(--papel); transition: border-color .15s, box-shadow .15s; }
.clientes-lista a:hover { border-color: var(--naranja); box-shadow: 0 6px 18px rgba(18, 22, 28, .08); }
.clientes-lista img { max-height: 38px; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: .82; transition: filter .15s, opacity .15s; }
.clientes-lista a:hover img { filter: none; opacity: 1; }

/* ── Servicios ── */
.dos { display: grid; gap: clamp(26px, 4vw, 56px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
.lineas { display: grid; grid-template-columns: minmax(0, 1fr); }
.linea-fila { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 16px 12px; border-top: 1px solid rgba(255, 255, 255, .16); transition: background .15s; }
.linea-fila:last-child { border-bottom: 1px solid rgba(255, 255, 255, .16); }
.linea-fila:hover { background: rgba(255, 255, 255, .07); }
.linea-fila .num { font-family: var(--mono); font-weight: 600; font-size: 13px; color: var(--naranja-claro); }
.linea-fila b { display: block; font-size: clamp(17px, 1.7vw, 20px); font-weight: 700; line-height: 1.25; }
.linea-fila small { display: block; font-size: 14px; color: var(--gris-claro); margin-top: 2px; }
.linea-fila .flecha { font-size: 20px; color: var(--naranja-claro); }
.grupo-rotulo { font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .12em; color: var(--gris-claro); padding: 18px 12px 8px; }

.fichas-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.ficha-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(18, 22, 28, .22); font-family: var(--mono); font-weight: 600; font-size: 12.5px; }
.ficha-num:hover { border-color: var(--naranja); }
.ficha-num[aria-current="page"] { background: var(--naranja); border-color: var(--naranja); color: #fff; }
.linea-detalle { display: grid; gap: clamp(26px, 4vw, 56px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
.linea-detalle h1 { font-size: clamp(30px, 4.4vw, 50px); margin-top: 10px; }
.linea-detalle .bajada { margin-top: 16px; }
.linea-detalle .botones { margin-top: 24px; }
.etiquetas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; }
.etiquetas .sobre { margin-right: 4px; }
.etiqueta { display: inline-flex; align-items: center; min-height: 34px; padding: 5px 12px; border: 1px solid rgba(18, 22, 28, .2); border-radius: 6px; font-size: 14px; font-weight: 500; background: var(--papel); }
.etiqueta:hover { border-color: var(--naranja); color: var(--naranja); }
.foto { margin-top: 26px; border-radius: 14px; overflow: hidden; background: #e3e5e9; aspect-ratio: 16 / 10; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.lista-num li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--linea); font-size: clamp(16.5px, 1.5vw, 18.5px); font-weight: 500; }
.lista-num li:last-child { border-bottom: 1px solid var(--linea); }
.lista-num .num { font-family: var(--mono); font-weight: 600; font-size: 12.5px; color: var(--naranja); }
.oscura .lista-num li, .etapa-panel .lista-num li { border-color: var(--linea-clara); }
.oscura .lista-num .num, .etapa-panel .lista-num .num { color: var(--naranja-claro); }

/* ── Etapas del contrato (el ciclo) ── */
.etapas-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 0; }
.etapa-tab { display: flex; flex-direction: column; gap: 8px; padding: 16px 14px; background: transparent; border: 0; border-top: 3px solid var(--linea); text-align: left; cursor: pointer; transition: background .15s; min-width: 0; }
.etapa-tab .num { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-weight: 600; font-size: 12.5px; color: var(--gris); }
.etapa-tab .num::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: rgba(18, 22, 28, .25); }
.etapa-tab b { font-size: 16.5px; font-weight: 700; line-height: 1.25; }
.etapa-tab:hover { background: rgba(18, 22, 28, .05); }
.etapa-tab[aria-selected="true"] { background: var(--tinta); color: #fff; border-top-color: var(--naranja); }
.etapa-tab[aria-selected="true"] .num { color: var(--gris-claro); }
.etapa-tab[aria-selected="true"] .num::before { background: var(--naranja-claro); }
.etapa-panel { display: grid; gap: clamp(22px, 3.5vw, 48px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); padding: clamp(22px, 3.5vw, 40px); background: var(--tinta); color: #fff; border-radius: 0 0 var(--radio) var(--radio); }
.etapa-panel[hidden] { display: none; }
.riesgo { font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: .1em; color: var(--naranja-claro); }
.etapa-panel h3 { margin-top: 10px; font-size: clamp(22px, 2.6vw, 30px); }
.etapa-panel p { margin-top: 12px; color: #c3c8d0; }
.etapa-panel .ir { display: inline-block; margin-top: 16px; font-weight: 700; color: var(--naranja-claro); }
.etapa-titulo { font-family: var(--mono); font-weight: 600; font-size: 12.5px; letter-spacing: .1em; color: var(--gris-claro); margin-bottom: 6px; }
/* Sin JavaScript se muestran las cinco, una bajo otra, con su nombre. */
.sin-js .etapas-tabs { display: none; }
.sin-js .etapa-panel { border-radius: var(--radio); margin-top: 14px; }
.con-js .etapa-titulo { display: none; }

/* ── Normativas ── */
.norma-grupo { margin-top: clamp(26px, 4vw, 40px); }
.norma-grupo-rotulo { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-weight: 600; font-size: 12.5px; letter-spacing: .12em; color: var(--gris); }
.norma-grupo-rotulo::after { content: ''; flex: 1; height: 1px; background: var(--linea); }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 12px; margin-top: 14px; }
.tarjeta { display: flex; flex-direction: column; gap: 6px; padding: 18px; background: var(--papel); border: 1.5px solid rgba(18, 22, 28, .1); border-radius: var(--radio); transition: border-color .15s, box-shadow .15s; }
.tarjeta:hover { border-color: var(--naranja); box-shadow: 0 10px 24px rgba(196, 86, 26, .13); }
.tarjeta b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.tarjeta span { font-size: 14.5px; color: var(--gris); }
.tarjeta .ir { margin-top: auto; padding-top: 8px; font-weight: 700; font-size: 14.5px; color: var(--naranja); }
.tarjeta .sobre { font-size: 11.5px; }

.norma { display: grid; gap: clamp(22px, 3vw, 40px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 980px) { .norma { grid-template-columns: 290px minmax(0, 1fr); } }
.norma-indice { display: none; background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px; }
@media (min-width: 980px) { .norma-indice { display: block; position: sticky; top: calc(var(--cabecera) + 16px); max-height: calc(100vh - var(--cabecera) - 32px); overflow-y: auto; } }
.norma-indice .sobre { display: block; padding: 12px 10px 6px; font-size: 11.5px; }
.norma-indice a { display: block; padding: 9px 10px; border-radius: 8px; border-left: 3px solid transparent; line-height: 1.25; }
.norma-indice a b { display: block; font-size: 15.5px; font-weight: 700; }
.norma-indice a span { display: block; font-size: 13px; color: var(--gris); }
.norma-indice a:hover { background: var(--fondo); }
.norma-indice a[aria-current="page"] { background: var(--fondo); border-left-color: var(--naranja); }
.norma-indice a[aria-current="page"] b { color: var(--naranja); }
.ficha { background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; }
.ficha-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: clamp(22px, 3.5vw, 38px); background: var(--tinta); color: #fff; }
.ficha-cabeza h1 { font-size: clamp(30px, 4.6vw, 52px); margin-top: 8px; }
.ficha-cabeza .lema { display: block; margin-top: 10px; font-size: clamp(16.5px, 1.6vw, 19px); color: #d5d9df; }
.ficha-cabeza img { width: clamp(84px, 12vw, 140px); border-radius: 8px; }
@media (max-width: 520px) { .ficha-cabeza { grid-template-columns: minmax(0, 1fr); } .ficha-cabeza img { display: none; } }
.ficha-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(22px, 3vw, 34px); padding: clamp(22px, 3.5vw, 38px); }
.ficha-cuerpo h2 { font-family: var(--mono); font-weight: 600; font-size: 12.5px; letter-spacing: .14em; color: var(--naranja); text-transform: uppercase; }
.ficha-cuerpo h2 + * { margin-top: 12px; }
.ficha-cuerpo h3 { font-size: 18.5px; margin-top: 18px; }
.ficha-cuerpo h3 + * { margin-top: 10px; }
.vinetas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.vinetas li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: baseline; }
.vinetas li::before { content: ''; width: 7px; height: 7px; background: var(--naranja); transform: translateY(-2px); }
.vinetas-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.nota { font-size: 15px; color: var(--gris); }
.ficha-pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px clamp(22px, 3.5vw, 38px); border-top: 1px solid var(--linea); background: var(--fondo); font-size: 14.5px; }
.ficha-pie a { font-weight: 700; color: var(--naranja); }
.ficha-pie .pos { font-family: var(--mono); font-weight: 600; font-size: 12.5px; color: var(--gris); }

/* ── Por qué SQA ── */
.razones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 1px; background: var(--linea-clara); border: 1px solid var(--linea-clara); border-radius: var(--radio); overflow: hidden; }
.razon { padding: clamp(20px, 3vw, 30px); background: var(--tinta); }
.razon .dato { font-size: clamp(32px, 3.6vw, 46px); font-weight: 800; letter-spacing: -.03em; color: var(--naranja-claro); line-height: 1; }
.razon b { display: block; margin-top: 12px; font-size: 17px; }
.razon p { margin-top: 6px; font-size: 15px; color: var(--gris-claro); line-height: 1.45; }
.razon a { color: var(--naranja-claro); font-weight: 600; white-space: nowrap; }

/* ── Proyectos ── */

/* ── Sistema de gestión y documentos ── */
.doc-tarjeta .sobre { color: var(--naranja); }
.doc-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.doc-nav a { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid rgba(18, 22, 28, .16); background: var(--papel); font-size: 14.5px; font-weight: 600; }
.doc-nav a:hover { border-color: var(--tinta); }
.doc-nav a[aria-current="page"] { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.documento { max-width: 880px; margin-inline: auto; background: var(--papel); border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; }
.documento-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: clamp(22px, 3.5vw, 40px); background: var(--tinta); color: #fff; }
.documento-cabeza h1 { font-size: clamp(25px, 3.4vw, 38px); margin-top: 8px; }
.documento-cabeza img { width: clamp(72px, 10vw, 116px); border-radius: 6px; }
@media (max-width: 520px) { .documento-cabeza { grid-template-columns: minmax(0, 1fr); } .documento-cabeza img { display: none; } }
.documento-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 1px; background: var(--linea); border-bottom: 1px solid var(--linea); }
.documento-datos div { padding: 14px clamp(16px, 2.5vw, 24px); background: var(--fondo); }
.documento-datos dt { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: .12em; color: var(--gris); }
.documento-datos dd { margin-top: 3px; font-weight: 600; }
.documento-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: clamp(22px, 3.5vw, 40px); }
.documento-cuerpo h2 { font-size: 20px; letter-spacing: -.01em; }
.documento-cuerpo h2 + * { margin-top: 10px; }
.aviso { padding: 12px 16px; border-left: 4px solid var(--naranja); background: #fbf1ea; font-size: 15px; color: var(--gris-2); border-radius: 0 8px 8px 0; }
.documento-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 16px clamp(22px, 3.5vw, 40px); border-top: 1px solid var(--linea); font-size: 13px; color: var(--gris); }

/* ── Formularios ── */
.formulario { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: clamp(20px, 3vw, 32px); background: var(--fondo); border: 1px solid var(--linea); border-radius: 14px; }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.campo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; font-family: var(--mono); font-weight: 600; font-size: 11.5px; letter-spacing: .1em; color: var(--gris-2); min-width: 0; }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 48px; padding: 11px 13px; border: 1.5px solid rgba(18, 22, 28, .2); border-radius: 8px; background: var(--papel); font-family: var(--sans); font-size: 16px; letter-spacing: 0; color: var(--tinta); }
.campo textarea { min-height: 120px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--naranja); box-shadow: 0 0 0 3px rgba(196, 86, 26, .16); }
.opciones { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 16px; }
.opcion { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; font-size: 15.5px; line-height: 1.45; }
.opcion input { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--naranja); }
.formulario .boton { justify-self: start; }
.formulario .nota { font-size: 13.5px; }
.confirmacion { padding: 14px 16px; border-left: 4px solid #1a7f4e; background: #e6f5ee; border-radius: 0 8px 8px 0; font-size: 15.5px; }
.confirmacion[hidden] { display: none; }
/* El envío no se completó: el mensaje queda redactado para mandarlo por correo
   o WhatsApp. Se muestra como un paso siguiente, con el naranja del sitio y no
   con rojo de error (Max: decirlo «de una forma más sutil»). */
.fallo { padding: 14px 16px; border-left: 4px solid var(--naranja); background: #fbf1ea; border-radius: 0 8px 8px 0; font-size: 15.5px; }
.fallo[hidden] { display: none; }
.fallo a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.confirmacion:focus, .fallo:focus { outline: none; }
.formulario .boton[disabled] { opacity: .65; cursor: progress; }
/* La trampa para robots: un campo que las personas no ven ni alcanzan con el teclado. */
.trampa { display: none; }

.contacto-datos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 28px; }
.contacto-datos div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; }
.contacto-datos dt { font-family: var(--mono); font-weight: 600; font-size: 11.5px; letter-spacing: .12em; color: var(--gris); }
.contacto-datos dd a { font-weight: 600; border-bottom: 1px solid rgba(18, 22, 28, .25); }
.contacto-datos dd a:hover { color: var(--naranja); border-color: var(--naranja); }
.contacto-datos dd { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; justify-items: start; font-size: 17px; min-width: 0; }
.contacto-datos dd a { overflow-wrap: anywhere; }
.dos > *, .linea-detalle > *, .encabezado-lado > * { min-width: 0; }

/* ── Llamado final ── */
.llamado { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.llamado h2 { font-size: clamp(24px, 3vw, 36px); max-width: 22ch; }

/* ══ Pie ═══════════════════════════════════════════════════════════════════ */
.pie { background: var(--tinta); color: var(--gris-claro); padding-block: 36px 96px; font-size: 15px; }
.pie-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.pie-marca { display: flex; align-items: center; gap: 14px; color: #fff; font-weight: 700; }
.pie-marca img { height: 34px; width: auto; }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pie-enlaces a:hover { color: #fff; }
.pie-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linea-clara); font-size: 13.5px; color: #8e96a3; }

.whatsapp { position: fixed; right: clamp(12px, 2.5vw, 24px); bottom: clamp(12px, 2.5vw, 24px); z-index: 40; display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 10px 18px; border-radius: 999px; background: #1fb855; color: #062b14; font-weight: 700; font-size: 15px; box-shadow: 0 10px 26px rgba(0, 0, 0, .28); }
.whatsapp::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #062b14; }
.whatsapp:hover { background: #23cc5f; }

/* ══ EFECTOS ═══════════════════════════════════════════════════════════════
   Max, 2026-10-02: «agrégale hartos efectos con CSS para que se vea pulida».
   Marcelo, el día antes: «que no sea tan loca la página». Las dos cosas caben:
   son efectos de RESPUESTA (algo se mueve porque uno lo tocó o porque llegó a
   verlo), cortos, y ninguno cambia el tamaño de una caja —así no empujan ni
   tapan nada—. Solo se animan `opacity` y `transform`, que el navegador mueve
   sin recalcular la página. Con «reducir movimiento» activado, no hay ninguno. */

/* Cambio de página suave, sin recargar en blanco (navegadores que lo soportan). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: sale .16s ease both; }
::view-transition-new(root) { animation: entra .26s ease both; }
@keyframes sale { to { opacity: 0; } }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } }

/* Lo que aparece al llegar a verlo. Solo con JavaScript: sin él, todo visible. */
.con-js [data-aparece] { opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.con-js [data-aparece].visto { opacity: 1; transform: none; }
/* LO QUE SE VE AL ABRIR LA PÁGINA NO ESPERA AL SCRIPT. La primera sección entra
   con una animación de CSS puro: si el script tarda o falla, el titular igual
   aparece. (Con el observador de JavaScript, el titular de la portada quedaba
   invisible hasta que el script corría: medido el 2026-10-02.) */
.con-js main > :first-child [data-aparece], .con-js main > :first-child[data-aparece] {
  opacity: 1; transform: none; transition: none;
  animation: sube .62s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes sube { from { opacity: 0; transform: translateY(20px); } }

/* La cabecera gana sombra al bajar. */
.cabecera { transition: box-shadow .25s, background .25s; }
.cabecera.bajo { box-shadow: 0 10px 30px rgba(0, 0, 0, .32); background: rgba(21, 24, 30, .94); backdrop-filter: saturate(1.4) blur(10px); }

/* Subrayado que crece en los enlaces del menú. */
.menu > a:not(.boton) { position: relative; }
.menu > a:not(.boton)::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--naranja-claro); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; }
.menu > a:not(.boton):hover::after, .menu > a[aria-current="page"]::after { transform: scaleX(1); }

/* Botones: se levantan apenas, y el de acento tiene un brillo que cruza. */
.boton { position: relative; overflow: hidden; transition: background .15s, color .15s, border-color .15s, transform .15s, box-shadow .2s; }
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0); }
.boton-acento { box-shadow: 0 6px 18px rgba(196, 86, 26, .28); }
.boton-acento:hover { box-shadow: 0 10px 26px rgba(196, 86, 26, .4); }
.boton-acento::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-18deg); transition: left .55s ease; }
.boton-acento:hover::after { left: 120%; }
.flecha, .ir { display: inline-block; transition: transform .2s ease; }
a:hover > .flecha, a:hover .ir, .linea-fila:hover .flecha { transform: translateX(5px); }

/* La portada: una luz que se mueve muy lento detrás del titular, y una trama. */
.portada { position: relative; overflow: hidden; isolation: isolate; }
.portada::before { content: ''; position: absolute; z-index: -1; inset: -25% -35% auto 15%; height: 100%; background: radial-gradient(ellipse 55% 50% at 62% 38%, rgba(232, 120, 58, .08), transparent 72%), radial-gradient(ellipse 65% 60% at 34% 62%, rgba(120, 140, 170, .22), transparent 74%); filter: blur(26px); animation: deriva 18s ease-in-out infinite alternate; }
.portada::after { content: ''; position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(180deg, #000 20%, transparent 95%); -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 95%); }
@keyframes deriva { from { transform: translate3d(-4%, -2%, 0) scale(1); } to { transform: translate3d(6%, 5%, 0) scale(1.12); } }
.portada h1 .acento { background: linear-gradient(100deg, #f09a63, var(--naranja-claro) 45%, #ffd2b3 60%, var(--naranja-claro) 75%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: brillo 7s linear infinite; }
@keyframes brillo { to { background-position: -220% 0; } }
.cifra b { background: linear-gradient(180deg, #fff, #b9bec7); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Tarjetas: se elevan y una línea de acento crece en el borde. */
.tarjeta, .clientes-lista a { transition: border-color .18s, box-shadow .22s, transform .22s; }
.tarjeta:hover, .clientes-lista a:hover { transform: translateY(-4px); }
.linea-fila { position: relative; }
.linea-fila::before { content: ''; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--naranja-claro); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.linea-fila:hover::before { transform: scaleX(1); }
.linea-fila b { transition: transform .2s ease; }
.linea-fila:hover b { transform: translateX(4px); }
.ficha-num, .etiqueta, .volver, .doc-nav a { transition: background .15s, border-color .15s, color .15s, transform .15s; }
.ficha-num:hover, .etiqueta:hover { transform: translateY(-2px); }
.razon { transition: background .25s; }
.razon:hover { background: var(--acero-2); }
.razon .dato { transition: transform .25s ease; transform-origin: left; }
.razon:hover .dato { transform: scale(1.06); }

/* Las pestañas del ciclo: el panel entra con un fundido. */
.con-js .etapa-panel:not([hidden]) { animation: entra .32s ease both; }
.etapa-tab { position: relative; }

/* Galería: la descripción sube al pasar el cursor; en pantallas táctiles queda a la vista. */
.foto img { transition: transform .6s ease; }
.foto:hover img { transform: scale(1.03); }

/* El título de cada sección lleva una barra de acento que se dibuja al aparecer. */
.encabezado h1::after, .encabezado-lado h1::after, .encabezado h2::after, .encabezado-lado h2::after { content: ''; display: block; width: 64px; height: 4px; margin-top: 16px; background: var(--naranja); transform-origin: left; animation: barra .7s .35s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes barra { from { transform: scaleX(0); } }

.whatsapp { transition: transform .18s, background .15s, box-shadow .2s; }
.whatsapp:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, .34); }
.whatsapp::before { animation: late 2.4s ease-in-out infinite; }
@keyframes late { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.72); opacity: .55; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .con-js [data-aparece] { opacity: 1 !important; transform: none !important; }
  @view-transition { navigation: none; }
}
@media print {
  .cabecera, .pie, .whatsapp, .doc-nav, .migas, .no-imprimir { display: none !important; }
  body { background: #fff; }
  .documento { border: 0; max-width: none; }
  .seccion { padding: 0; }
}

/* ── Ajustes tras la revisión visual (2026-10-02) ── */
.ficha-cabeza .sobre, .documento-cabeza .sobre, .oscura-degradado .sobre { color: var(--gris-claro); }
.ficha-cuerpo p + ul, .documento-cuerpo p + ul { margin-top: 12px; }

/* ══ UNA PANTALLA EXACTA ═══════════════════════════════════════════════════
   Max, 2026-10-02: «que se vea toda la parte azul encajada exactamente en la
   pantalla y todo el contenido quede bien mostrado». Y Marcelo, el día antes:
   «está bien estar en una página, pero no puede estar en media página».

   La sección mide exactamente el alto de la ventana menos la cabecera, y su
   contenido va centrado. Para que QUEPA —no solo para que la caja mida eso—
   las letras y los espacios se achican con el ALTO de la ventana (`vh`), no
   solo con el ancho: un notebook de 1366 × 768 deja unos 600 px útiles.
   Si aun así no cabe (un teléfono con siete líneas), la sección crece y se
   desplaza: nunca se corta ni se encima. */
.pantalla {
  min-height: calc(100vh - var(--cabecera)); min-height: calc(100dvh - var(--cabecera));
  display: flex; flex-direction: column; justify-content: center;
  /* 4vh y no 4,5: en una ventana de 600 px de alto (notebook de 1366 × 768 con
     la barra de marcadores) «Servicios» se pasaba 2 px entre 1.024 y 1.179 de ancho. */
  padding-block: clamp(20px, 4vh, 64px);
}
.pantalla > .contenedor { flex: none; }
.pantalla h1 { font-size: clamp(28px, min(4.6vw, 7.4vh), 58px); }
.pantalla .encabezado { margin-bottom: clamp(18px, 3.2vh, 40px); gap: clamp(8px, 1.4vh, 14px); }
.pantalla .bajada { font-size: clamp(15.5px, min(1.5vw, 2.5vh), 19px); }

.portada.pantalla h1 { font-size: clamp(32px, min(5.4vw, 8.6vh), 62px); margin-top: clamp(8px, 1.6vh, 16px); }
.portada.pantalla .bajada { margin-top: clamp(12px, 2.2vh, 20px); }
.portada.pantalla .botones { margin-top: clamp(16px, 3vh, 28px); }

.servicios-pantalla { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 3vh, 36px) clamp(24px, 3.5vw, 52px); align-items: center; }
.servicios-pantalla .encabezado { margin-bottom: 0; }
.lineas-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(10px, 2vh, 24px) clamp(20px, 3vw, 44px); align-items: start; }
.pantalla .linea-fila { padding-block: clamp(8px, 1.45vh, 16px); }
.pantalla .linea-fila b { font-size: clamp(16px, min(1.6vw, 2.5vh), 20px); }
.pantalla .linea-fila small { font-size: clamp(13px, min(1.15vw, 1.9vh), 14.5px); line-height: 1.4; }
.pantalla .grupo-rotulo { padding-top: 0; }
/* Con ancho de sobra, el título va a la izquierda y las dos familias a la derecha. */
@media (min-width: 1180px) {
  .servicios-pantalla { grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); }
}
.pantalla .razones { margin-top: 0; }
/* Las cuatro razones caben en una fila desde tablet apaisada: en dos filas la
   sección no entraba en una pantalla de 1024 × 700 (medido). */
.pantalla .razones { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.pantalla .razon { padding: clamp(16px, 2.6vh, 30px) clamp(16px, 2vw, 30px); }
.pantalla .razon .dato { font-size: clamp(28px, min(3.4vw, 5.6vh), 46px); }
/* En la columna angosta de Servicios el título no debe partirse en cuatro líneas. */
@media (min-width: 1180px) { .servicios-pantalla h1 { font-size: clamp(26px, min(2.7vw, 5.6vh), 40px); } }

/* ══ LA FICHA DE CADA LÍNEA: riesgo, entregables y forma de trabajo ═════════
   Marcelo, 2026-10-01: textos «más orientados a impactos o riesgos, más
   industriales», y que cada línea tenga SU página «con el detalle para quien
   quiera leer». La franja oscura dice qué se arriesga sin el servicio, con el
   mismo molde del ciclo de «Etapas del contrato» (que a él le gustó); debajo,
   qué recibe el cliente y en qué orden se trabaja. */
.rotulo { font-family: var(--mono); font-weight: 600; font-size: 12.5px; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; text-wrap: initial; color: var(--gris); margin-bottom: 10px; }
.linea-riesgo { padding-block: clamp(34px, 5vw, 64px); }
.linea-riesgo .contenedor { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(16px, 3vw, 52px); align-items: center; }
.linea-riesgo .contenedor > * { min-width: 0; }
.linea-riesgo h2 { margin-top: 12px; font-size: clamp(24px, 3vw, 37px); line-height: 1.12; }
.linea-riesgo .texto { padding-left: 18px; border-left: 3px solid var(--naranja); font-size: clamp(16.5px, 1.45vw, 18.5px); color: #d5d9df; }
.linea-fondo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(28px, 4vw, 56px); align-items: start; }
.linea-fondo > * { min-width: 0; }
.lista-visto li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--linea); font-size: clamp(16.5px, 1.5vw, 18.5px); font-weight: 500; }
.lista-visto li:last-child { border-bottom: 1px solid var(--linea); }
.lista-visto li::before { content: ''; width: 11px; height: 6px; border-left: 2.5px solid var(--naranja); border-bottom: 2.5px solid var(--naranja); transform: translateY(-4px) rotate(-45deg); }

/* ══ LO QUE PIDIÓ MARCELO EN EL AUDIO DEL 2026-10-02 ════════════════════════
   Su resumen: «la información está toda buena; hay que darle fluidez». */
.enlace { text-decoration: underline; text-underline-offset: 3px; }
.enlace:hover { color: var(--naranja-claro); }


/* De una línea a la siguiente, sin volver atrás. */
.paso { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 18px; border-top: 1px solid var(--linea); font-size: 15px; font-weight: 700; }
.paso a { color: var(--naranja); }
.paso a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* El mapa de regulaciones: una tabla que se lee por suministro. Banda oscura de
   títulos, una banda gris por familia y una fila por suministro. En pantallas
   angostas cada fila se apila y la norma lleva su rótulo. */
.mapa { margin-top: clamp(22px, 3.5vw, 36px); background: var(--papel); border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; }
.mapa-cabeza { display: none; }
.mapa-grupo-rotulo { padding: 11px clamp(16px, 2.4vw, 26px); background: #e6e9ed; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta); }
.mapa-fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 26px; padding: 18px clamp(16px, 2.4vw, 26px); border-top: 1px solid var(--linea); align-items: start; }
.mapa-fila > * { min-width: 0; }
.mapa-que { font-size: 18.5px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.mapa-rotulo { margin-right: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); }
.mapa-norma { font-weight: 700; color: var(--naranja); }
.mapa-norma:hover { text-decoration: underline; text-underline-offset: 3px; }
.mapa .vinetas { font-size: 15.5px; }
.mapa .etiquetas { margin-top: 0; }
@media (min-width: 900px) {
  .mapa-cabeza, .mapa-fila { grid-template-columns: minmax(0, .95fr) minmax(0, .6fr) minmax(0, 1.45fr) minmax(0, 1.1fr); }
  .mapa-cabeza { display: grid; gap: 26px; padding: 14px clamp(16px, 2.4vw, 26px); background: var(--acero); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
  .mapa-rotulo { display: none; }
  .mapa-que { font-size: 17px; }
}

/* Quejas y políticas, a la vista en el pie. */
.pie-politicas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 22px; font-size: 14.5px; }
.pie-politicas a:hover { color: #fff; }
.pie-queja { display: inline-flex; align-items: center; min-height: 40px; padding: 7px 16px; border: 1.5px solid rgba(255, 255, 255, .4); border-radius: 999px; color: #fff; font-weight: 600; }
.pie-queja:hover { background: #fff; color: var(--tinta) !important; }
.razon .dato { overflow-wrap: anywhere; }
/* La consigna de la portada es más larga que la anterior: más ancho y letra algo menor. */
.portada.pantalla h1.consigna { max-width: 21ch; font-size: clamp(30px, min(4.6vw, 7.4vh), 56px); }
.parrafo { font-size: clamp(16.5px, 1.45vw, 18px); color: var(--gris-2); }
.parrafo + .parrafo { margin-top: 14px; }
.experiencia { display: grid; grid-template-columns: minmax(0, 1fr); }
.experiencia div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 14px 0; border-top: 1px solid var(--linea); }
.experiencia div:last-child { border-bottom: 1px solid var(--linea); }
.experiencia dt { font-family: var(--mono); font-weight: 600; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--naranja); }
.experiencia dd { font-weight: 500; }

/* La ruta a la vista en las páginas interiores: dónde estoy y cómo subo un nivel. */
.ruta { font-size: 14.5px; color: var(--gris); min-width: 0; }
.ruta a { text-decoration: underline; text-underline-offset: 3px; }
.ruta a:hover { color: var(--naranja); }
.etiquetas + .etiquetas { margin-top: 12px; }
/* El certificado SICEP, a la vista en la portada: el logo va sin fondo, directo sobre el acero. */
.cifra-sicep img { height: 66px; width: auto; }
.cifra-sicep span { margin-top: 8px; }
.portada.pantalla .cifra-sicep img { height: clamp(44px, 8vh, 72px); }

/* Los rótulos de los formularios llevan peso 600; lo que escribe la persona, no. */
.campo input, .campo select, .campo textarea { font-weight: 400; }

/* ══ LA BARRA DE RUTA: siempre hay cómo volver ═════════════════════════════
   Toda página interior abre con ella, debajo de la cabecera: «← Volver» y la
   ruta desde Inicio. Es una sola, igual en todo el sitio. */
:root { --barra: 46px; }
.barra-ruta { background: var(--acero-2); color: #d5d9df; border-bottom: 1px solid var(--linea-clara); }
.barra-ruta .contenedor { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; min-height: calc(var(--barra) - 1px); padding-block: 6px; }
.barra-ruta .volver { min-height: 32px; padding: 4px 13px; border-color: rgba(255, 255, 255, .42); color: #fff; font-size: 14px; }
.barra-ruta .volver:hover { background: #fff; border-color: #fff; color: var(--tinta); }
.barra-ruta .ruta { font-size: 13.5px; color: #9aa3ae; }
.barra-ruta .ruta a { color: #d5d9df; }
.barra-ruta .ruta a:hover { color: #fff; }
.barra-ruta .ruta [aria-current] { color: #fff; font-weight: 600; }
/* Con la barra arriba, la sección «de una pantalla» mide lo que queda debajo de ella. */
.barra-ruta + .pantalla { min-height: calc(100vh - var(--cabecera) - var(--barra)); min-height: calc(100dvh - var(--cabecera) - var(--barra)); }
/* En ventanas muy bajas (notebook de 768 px con barras del navegador), «Servicios» deja su
   frase secundaria para que las siete líneas sigan cabiendo en una pantalla bajo la barra de ruta. */
@media (min-width: 1024px) and (max-height: 660px) { .servicios-pantalla .bajada { display: none; } }
/* Entre 1.024 y 1.179 px el título de «Servicios» también va al lado (ahora es corto:
   «Líneas de negocio»), con las dos familias en dos columnas: apilado no cabía en una
   pantalla baja con la barra de ruta arriba. */
@media (min-width: 1024px) and (max-width: 1179px) {
  .servicios-pantalla { grid-template-columns: minmax(0, .6fr) minmax(0, 2fr); }
  .servicios-pantalla .bajada { display: none; }
  .lineas-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) and (max-height: 640px) {
  .barra-ruta + .pantalla { padding-block: 12px; }
  .barra-ruta + .pantalla .linea-fila { padding-block: 6px; }
  .barra-ruta + .pantalla .grupo-rotulo { padding-bottom: 4px; }
}

/* ══ AUDIOS DEL 2026-10-05: fotos reales, ciclo de seis etapas, portada en acero ═════ */
.grupo-rotulo span { color: #fff; letter-spacing: .04em; text-transform: none; font-weight: 600; }

/* La portada: acero con un brillo hacia la derecha, detrás de las fotos. */
.portada .cifra span { color: #d9dde2; }
.portada-dos { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3.4vh, 36px) clamp(24px, 4vw, 56px); }
.portada-dos > * { min-width: 0; }
/* Las fotos que van cambiando. Sin animaciones (o si la persona pidió menos movimiento)
   queda fija la primera. */
.giro { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: #1c2229; box-shadow: 0 24px 60px rgba(0, 0, 0, .34), 0 0 0 1px rgba(255, 255, 255, .16); }
.giro figure { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; animation: giro 25s infinite; animation-delay: calc(var(--k) * 5s); }
/* La primera foto queda siempre debajo y las demás aparecen encima: si una tarda en
   cargar (conexión lenta), se sigue viendo una foto y nunca un recuadro vacío. */
.giro figure:first-child { opacity: 1; visibility: visible; animation: none; }
.giro figure:not(:first-child) { z-index: 1; }
.giro img { width: 100%; height: 100%; object-fit: cover; }
.giro figcaption { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; gap: 9px; padding: 44px 16px 14px; background: linear-gradient(0deg, rgba(20, 24, 30, .92), rgba(20, 24, 30, 0)); font-size: 14.5px; font-weight: 600; line-height: 1.3; color: #fff; }
.giro figcaption::before { content: ''; flex: none; width: 8px; height: 8px; background: var(--naranja-claro); }
@keyframes giro {
  0% { opacity: 0; visibility: visible; }
  3%, 20% { opacity: 1; visibility: visible; }
  23% { opacity: 0; visibility: visible; }
  23.01%, 100% { opacity: 0; visibility: hidden; }
}
@media (max-width: 699px) { .giro figure { animation: none; } .giro figure:not(:first-child) { display: none; } }
@media (min-width: 1024px) {
  .portada-dos { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: stretch; }
  .giro { aspect-ratio: auto; min-height: 0; }
  .portada.pantalla h1.consigna { max-width: none; font-size: clamp(27px, min(3.2vw, 6.4vh), 50px); }
}

/* El ciclo de compras, en la primera pantalla de la portada. En pantallas anchas, las etapas en
   una línea unida por un trazo naranja; en las angostas, fichas chicas que se acomodan solas.
   Al pasar el cursor por una etapa aparece su titular debajo; al pinchar se abre su página. */
.ciclo-portada { margin-top: clamp(18px, 3.6vh, 44px); padding-top: clamp(12px, 2.2vh, 22px); border-top: 1px solid var(--linea-clara); }
.ciclo-rotulo { font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.ciclo-rotulo::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 9px; background: var(--naranja-claro); }
.ciclo-rotulo span { font-weight: 500; letter-spacing: .02em; text-transform: none; font-size: 14px; color: #eef0f3; }
.ciclo { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(10px, 1.8vh, 16px); }
.ciclo li { position: relative; min-width: 0; }
.ciclo a { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 6px 14px 6px 6px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: rgba(20, 24, 30, .42); color: #fff; transition: border-color .15s, background .15s; }
.ciclo a:hover, .ciclo a:focus-visible { border-color: #fff; background: rgba(20, 24, 30, .7); }
/* Los números van en negro (Marcelo, 2026-10-06: el naranjo «no le gustó mucho; negrito, como antes»).
   El naranjo queda solo para la etapa sobre la que está el cursor. */
.ciclo .num { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #14181d; border: 1.5px solid rgba(255, 255, 255, .55); color: #fff; font-size: 12px; font-weight: 700; transition: background .2s, border-color .2s, transform .2s; }
.ciclo b { font-size: 14.5px; font-weight: 700; line-height: 1.2; }
.ciclo-ficha { display: none; }
@media (min-width: 1020px) and (hover: hover) {
  .ciclo { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0; }
  .ciclo::before { content: ''; position: absolute; left: 7.14%; right: 7.14%; top: 16px; height: 2px; background: #14181d; }
  .ciclo a { flex-direction: column; gap: 8px; min-height: 0; padding: 0 6px; border: 0; border-radius: 0; background: none; text-align: center; }
  .ciclo a:hover, .ciclo a:focus-visible { background: none; }
  .ciclo .num { position: relative; width: 34px; height: 34px; font-size: 12.5px; }
  .ciclo a:hover .num, .ciclo a:focus-visible .num { background: var(--naranja); border-color: #fff; transform: scale(1.14); }
  .ciclo b { font-size: clamp(13px, 1.2vw, 14.5px); transition: transform .2s; }
  /* LA MINI FICHA. Sale hacia abajo desde la etapa (Max, 2026-10-06): se descorre de arriba hacia abajo y sus
     renglones entran uno tras otro. Todo con CSS, sin script. */
  .ciclo-ficha { display: block; position: absolute; z-index: 6; left: 50%; top: calc(100% + 14px); width: 340px; margin-left: -170px; padding: 14px 20px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .2); border-top: 3px solid var(--naranja); background: linear-gradient(160deg, #262c33, #14181d); box-shadow: 0 22px 50px rgba(0, 0, 0, .5); text-align: left; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(-14px) scale(.94); transform-origin: 50% 0; clip-path: inset(0 0 100% 0 round 14px); transition: opacity .22s ease, transform .38s cubic-bezier(.2, .9, .25, 1.15), clip-path .42s cubic-bezier(.2, .8, .2, 1), visibility 0s .42s; }
  .ciclo li:first-child .ciclo-ficha { left: 0; margin-left: 0; transform-origin: 18% 0; }
  .ciclo li:last-child .ciclo-ficha { left: auto; right: 0; margin-left: 0; transform-origin: 82% 0; }
  .ciclo a:hover .ciclo-ficha, .ciclo a:focus-visible .ciclo-ficha { opacity: 1; visibility: visible; transform: none; clip-path: inset(0 0 0 0 round 14px); transition-delay: 0s; }
  .ciclo-ficha em { display: block; }
  .ciclo-ficha > * { opacity: 0; transform: translateY(10px); transition: opacity .3s ease, transform .34s ease; }
  .ciclo a:hover .ciclo-ficha > *, .ciclo a:focus-visible .ciclo-ficha > * { opacity: 1; transform: none; }
  .ciclo a:hover .ciclo-ficha > :nth-child(1) { transition-delay: .1s; }
  .ciclo a:hover .ciclo-ficha > :nth-child(2) { transition-delay: .17s; }
  .ciclo a:hover .ciclo-ficha > :nth-child(3) { transition-delay: .24s; }
  .ciclo a:hover .ciclo-ficha > :nth-child(4) { transition-delay: .31s; }
  .ciclo a:hover .ciclo-ficha > :nth-child(5) { transition-delay: .38s; }
  .ciclo a:hover .ciclo-ficha > :nth-child(6) { transition-delay: .45s; }
  .ciclo-ficha span { display: flex; gap: 14px; align-items: baseline; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 15px; font-weight: 600; line-height: 1.3; color: #fff; }
  .ciclo-ficha strong { display: block; padding-bottom: 10px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--naranja-claro); }
  .ciclo-ficha span:first-child { border-top: 0; padding-top: 2px; }
  .ciclo-ficha i { flex: none; font-style: normal; font-size: 12px; font-weight: 700; color: var(--naranja-claro); }
  .ciclo-ficha em { padding-top: 11px; border-top: 1px solid rgba(255, 255, 255, .14); font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--naranja-claro); }
}
/* Las cifras, en su franja, debajo de la primera pantalla. */
.franja-cifras { background: var(--acero); color: #fff; padding-block: clamp(22px, 3.4vw, 36px); }
.franja-cifras .cifras { margin-top: 0; padding-top: 0; border-top: 0; align-items: center; }
.franja-cifras .cifra span { color: #d9dde2; }

/* FIERRO ESMERILADO (Marcelo, 2026-10-05 por la tarde): «no sé si me gusta el negro; me gustaría
   el fierro esmerilado», como el del logo, «con las rayas para todos lados». Mientras él consigue
   la foto de una plancha esmerilada, el efecto se dibuja: gris acero más claro y dos capas de
   rayas finas en distintos ángulos. Va en la primera pantalla. */
/* MAS METALICO, EN EL COLOR DEL LOGO (Marcelo, por Max, 2026-10-06): plata con franjas de brillo en
   diagonal, como una plancha que refleja la luz. El lado del titular y la franja de las etapas
   quedan mas oscuros para que las letras blancas se lean. */
.portada { background: linear-gradient(180deg, rgba(34, 40, 47, 0) 46%, rgba(34, 40, 47, .62) 100%), linear-gradient(90deg, rgba(30, 36, 43, .78) 0%, rgba(30, 36, 43, .5) 38%, rgba(30, 36, 43, 0) 64%), linear-gradient(112deg, #464e57 0%, #6b747e 16%, #4f5760 30%, #8a939c 46%, #c3c9ce 58%, #8d969f 68%, #5a626b 82%, #9aa2aa 94%, #6a727b 100%); }
.portada::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' preserveAspectRatio='none'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.5 0 0 0 -.62'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .6' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.5 0 0 0 -.66'/%3E%3C/filter%3E%3Crect width='1600' height='900' filter='url(%23a)' opacity='.55'/%3E%3Cg transform='rotate(24 800 450)'%3E%3Crect x='-400' y='-500' width='2400' height='1900' filter='url(%23b)' opacity='.46'/%3E%3C/g%3E%3Cg transform='rotate(-38 800 450)'%3E%3Crect x='-400' y='-500' width='2400' height='1900' filter='url(%23a)' opacity='.34'/%3E%3C/g%3E%3C/svg%3E"); background-size: cover; mask-image: linear-gradient(90deg, rgba(0, 0, 0, .32), #000 62%); -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .32), #000 62%); mix-blend-mode: screen; }

/* Fotos de trabajos reales: mosaico de la portada y tiras de la página de proyectos. */
.obra-mosaico { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 860px) { .obra-mosaico { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.obra-mosaico a { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--tinta); }
.obra-mosaico img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.obra-mosaico a:hover img { transform: scale(1.05); }
.obra-mosaico span { position: absolute; inset: auto 0 0 0; padding: 36px 14px 12px; background: linear-gradient(0deg, rgba(20, 24, 30, .93), rgba(20, 24, 30, 0)); color: #fff; font-weight: 700; font-size: clamp(13.5px, 3.6vw, 15.5px); line-height: 1.25; }
.obra-grupo { padding-block: clamp(22px, 3vw, 34px); border-top: 1px solid var(--linea); scroll-margin-top: calc(var(--cabecera) + var(--barra) + 12px); }
.obra-cabeza { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 40px; margin-bottom: 16px; }
.obra-cabeza > * { min-width: 0; }
.obra-cabeza h3 { font-size: clamp(20px, 2.1vw, 26px); }
.obra-cabeza p { color: var(--gris-2); max-width: 62ch; }
/* La «hojita de avance» de las salas eléctricas: fabricación, equipamiento, despacho. */
.avance { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.avance > * { min-width: 0; }
.avance-paso { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-2); }
.avance-paso i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--naranja); color: #fff; font-size: 12px; font-style: normal; letter-spacing: 0; }
/* La foto ampliada: a su tamaño real, sin estirarla. */
.visor { max-width: min(96vw, 1100px); max-height: 94vh; padding: 0; border: 0; border-radius: 14px; background: #14181d; color: #fff; overflow: hidden; }
.visor::backdrop { background: rgba(12, 14, 18, .84); }
.visor figure { margin: 0; min-width: min(88vw, 360px); }
.visor img:not([src]) { display: none; }
.visor.cargando figcaption::after { content: ' · cargando…'; color: var(--naranja-claro); }
.visor img { display: block; margin-inline: auto; width: auto; height: auto; max-width: 100%; max-height: calc(94vh - 58px); }
.visor figcaption { padding: 14px 60px; font-size: 14.5px; line-height: 1.35; text-align: center; color: #d5d9df; }
.visor button { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(20, 24, 30, .72); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }
.visor button:hover { background: var(--naranja); }
.visor-cerrar { top: 10px; right: 10px; font-size: 26px; }
.visor-ant { left: 10px; top: calc(50% - 51px); }
.visor-sig { right: 10px; top: calc(50% - 51px); }
.experiencias { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.experiencias .tarjeta .sobre { color: var(--naranja); }
.experiencias .vinetas { margin-top: 8px; font-size: 15px; color: var(--gris-2); }

/* Quiénes somos: la dirección técnica, con cara. */
.direccion { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 40px; align-items: start; }
.direccion > * { min-width: 0; }
@media (min-width: 760px) { .direccion { grid-template-columns: auto minmax(0, 1fr); } }
.direccion-cara { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; background: linear-gradient(135deg, #5b646e, #2b3139); color: #fff; font-size: 34px; font-weight: 800; letter-spacing: .02em; box-shadow: 0 0 0 5px var(--fondo), 0 0 0 6px rgba(18, 22, 28, .16); }
@media (prefers-reduced-motion: reduce) { .giro figure { animation: none; } }

/* La ficha de un proyecto: cabecera en acero con lo que se hizo, y debajo cada suministro con sus fotos. */
.ficha-proyecto { background: var(--papel); border: 1px solid var(--linea); border-radius: 16px; overflow: hidden; }
.ficha-proyecto-cabeza { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: clamp(22px, 3.5vw, 40px); background: linear-gradient(120deg, #272d35 0%, #3a424b 70%, #2c333b 100%); color: #fff; }
.ficha-proyecto-cabeza .sobre { color: var(--naranja-claro); }
.ficha-proyecto-cabeza h2 { font-size: clamp(25px, 3.2vw, 40px); }
.ficha-proyecto-cabeza p:not(.sobre) { color: #d5d9df; max-width: 70ch; }
.ficha-proyecto-lista { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ficha-proyecto-lista li { padding: 5px 12px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; font-size: 14px; font-weight: 500; color: #fff; }
.ficha-proyecto .obra-grupo { padding-inline: clamp(18px, 3.5vw, 40px); }
.ficha-proyecto .obra-grupo:first-of-type { border-top: 0; }
.ficha-proyecto + .ficha-proyecto { margin-top: clamp(26px, 4vw, 44px); }

/* Collages de fotos: cuatro por grupo (una grande, una apaisada, dos chicas), a todo el ancho.
   Cada foto lleva el estilo de las de la portada: esquinas redondeadas, degradado y pie con
   el cuadrito naranja. El texto de cada suministro va debajo de su título. */
.collages { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.collage { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.collage > * { position: relative; display: block; min-width: 0; min-height: 0; aspect-ratio: 1; grid-column: span 2; border-radius: 12px; overflow: hidden; background: #1c2229; box-shadow: 0 10px 26px rgba(20, 24, 30, .16); }
.collage > a { cursor: zoom-in; }
.collage > :first-child { grid-column: span 6; aspect-ratio: 3 / 2; }
.collage-3 > :nth-child(n+2), .collage-2 > * { grid-column: span 3; }
.collage-2 > :first-child { aspect-ratio: 1; }
.collage img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.collage a:hover img, .collage a:focus-visible img, .proyecto-tarjeta:hover .collage img { transform: scale(1.05); }
.collage img, .giro img, .obra-mosaico img { filter: contrast(1.04) saturate(1.1); }
.collage .pie { position: absolute; inset: auto 0 0 0; display: none; align-items: flex-start; gap: 8px; padding: 36px 14px 12px; background: linear-gradient(0deg, rgba(20, 24, 30, .92), rgba(20, 24, 30, 0)); font-size: 13.5px; font-weight: 600; line-height: 1.3; color: #fff; }
.collage .pie::before { content: ''; flex: none; width: 7px; height: 7px; margin-top: 5px; background: var(--naranja-claro); }
.collage > :first-child .pie { display: flex; }
@media (min-width: 700px) {
  .collage { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; aspect-ratio: 2 / 1; }
  .collage > *, .collage-2 > :first-child { aspect-ratio: auto; grid-column: span 1; }
  .collage > :first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .collage-4 > :nth-child(2) { grid-column: span 2; }
  .collage-3 > :nth-child(n+2) { grid-column: span 2; }
  .collage-2 > * { grid-column: span 2; grid-row: span 2; }
  .collage-1 > * { grid-column: span 4; }
  .collage .pie { display: flex; }
}
/* Proyectos: tarjetas con tapa de fotos que abren la ficha. */
.proyectos-destacados { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
@media (min-width: 900px) { .proyectos-destacados { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.proyecto-tarjeta { display: flex; flex-direction: column; gap: 14px; padding: 12px; background: var(--papel); border: 1.5px solid rgba(18, 22, 28, .1); border-radius: 18px; transition: border-color .18s, box-shadow .22s, transform .22s; }
.proyecto-tarjeta:hover { border-color: var(--naranja); box-shadow: 0 14px 32px rgba(196, 86, 26, .14); transform: translateY(-4px); }
.proyecto-tarjeta .collage > * { box-shadow: none; }
.proyecto-tarjeta-texto { display: flex; flex-direction: column; gap: 6px; padding: 2px 8px 10px; }
.proyecto-tarjeta-texto .sobre { font-size: 11.5px; color: var(--naranja); }
.proyecto-tarjeta-texto b { font-size: clamp(19px, 2vw, 23px); font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.proyecto-tarjeta-texto span:not(.sobre):not(.ir) { font-size: 14.5px; color: var(--gris); }
.proyecto-tarjeta-texto .ir { margin-top: 6px; font-weight: 700; font-size: 14.5px; color: var(--naranja); }
.ficha-proyecto-cabeza h1 { font-size: clamp(25px, 3.2vw, 40px); }
.ficha-proyecto-alcance { padding: clamp(22px, 3.5vw, 40px); }
.ficha-proyecto-alcance h2 { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--naranja); margin-bottom: 12px; }
/* Un dato que es una frase y no una palabra (Max, 2026-10-05: «Red de inspectores y consultores»). */
.razon .dato-frase, .pantalla .razon .dato-frase { font-size: clamp(22px, min(2.3vw, 4vh), 30px); letter-spacing: -.02em; line-height: 1.08; overflow-wrap: normal; }
/* Una palabra larga que debe ir entera en un renglón («Imparcialidad»). */
.razon .dato-palabra, .pantalla .razon .dato-palabra { font-size: clamp(22px, min(2.9vw, 5vh), 38px); overflow-wrap: normal; white-space: nowrap; }
/* Con siete etapas, «Comisionamiento» se partía en dos renglones: la letra de las pestañas baja un punto. */
.etapa-tab { padding-inline: 10px; }
.etapa-tab b { font-size: clamp(14px, 1.15vw, 15.5px); }
/* Las fotos de la portada con flechas. Con script (clase `giro-js`) manda la clase `activa` y no la
   animación: así la flecha cambia la foto al instante y el giro automático sigue desde ahí. En el
   teléfono las demás fotos no se cargan hasta que se pide una con la flecha. */
.giro.giro-js figure, .giro.giro-js figure:first-child { animation: none; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s; }
.giro.giro-js figure.activa { opacity: 1; visibility: visible; transition: opacity .6s ease; }
@media (max-width: 699px) { .giro.giro-js figure { display: none; } .giro.giro-js figure.activa { display: block; } }
.giro-flecha { position: absolute; z-index: 2; top: calc(50% - 22px); display: grid; place-items: center; width: 44px; height: 44px; padding: 0 0 4px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%; background: rgba(20, 24, 30, .55); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.giro-flecha[hidden] { display: none; }
.giro-flecha:hover, .giro-flecha:focus-visible { background: var(--naranja); border-color: var(--naranja); transform: scale(1.06); }
.giro-ant { left: 10px; }
.giro-sig { right: 10px; }
/* El fondo se mueve: un brillo plateado que cruza despacio la plancha (antes era una nube
   naranja; el 2026-10-06 Marcelo pidió sacar el naranjo del fondo). */
.portada::before { background: radial-gradient(ellipse 46% 44% at 60% 40%, rgba(255, 255, 255, .3), transparent 70%), radial-gradient(ellipse 56% 52% at 28% 66%, rgba(255, 255, 255, .12), transparent 72%); filter: blur(34px); animation: deriva 14s ease-in-out infinite alternate; }
@keyframes deriva { from { transform: translate3d(-9%, -5%, 0) scale(1); } to { transform: translate3d(11%, 8%, 0) scale(1.18); } }
.portada h1, .portada .bajada, .ciclo > li > a > b, .ciclo-rotulo { text-shadow: 0 1px 2px rgba(20, 24, 30, .55); }
.portada h1 .acento { text-shadow: none; }

/* EL METALICO COMO BASE DE TODOS LOS FONDOS (Marcelo, por Max, 2026-10-06: «todos los fondos con ese
   color metalico»). Las franjas oscuras llevan la plancha esmerilada oscura; el fondo claro de las
   paginas, la misma plancha en plata clara. Las fichas y tarjetas blancas siguen blancas: ahi se lee. */
:root {
  --rayas: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' preserveAspectRatio='none'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.5 0 0 0 -.62'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .6' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.5 0 0 0 -.66'/%3E%3C/filter%3E%3Crect width='1600' height='900' filter='url(%23a)' opacity='.55'/%3E%3Cg transform='rotate(24 800 450)'%3E%3Crect x='-400' y='-500' width='2400' height='1900' filter='url(%23b)' opacity='.46'/%3E%3C/g%3E%3Cg transform='rotate(-38 800 450)'%3E%3Crect x='-400' y='-500' width='2400' height='1900' filter='url(%23a)' opacity='.34'/%3E%3C/g%3E%3C/svg%3E");
  --rayas-oscuras: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1600' height='900' preserveAspectRatio='none'%3E%3Cfilter id='a' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .85' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .14 0 0 0 0 .17 1.5 0 0 0 -.62'/%3E%3C/filter%3E%3Cfilter id='b' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .6' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .14 0 0 0 0 .17 1.5 0 0 0 -.66'/%3E%3C/filter%3E%3Crect width='1600' height='900' filter='url(%23a)' opacity='.16'/%3E%3Cg transform='rotate(24 800 450)'%3E%3Crect x='-400' y='-500' width='2400' height='1900' filter='url(%23b)' opacity='.13'/%3E%3C/g%3E%3Cg transform='rotate(-38 800 450)'%3E%3Crect x='-400' y='-500' width='2400' height='1900' filter='url(%23a)' opacity='.1'/%3E%3C/g%3E%3C/svg%3E");
  --metal: linear-gradient(rgba(22, 27, 33, .56), rgba(22, 27, 33, .56)), var(--rayas) center / cover no-repeat, linear-gradient(112deg, #262c33 0%, #434b54 20%, #2d333a 38%, #59616a 56%, #3a4149 72%, #4a525b 88%, #2b3138 100%);
  --metal-claro: var(--rayas-oscuras) 0 0 / 1600px 900px, linear-gradient(112deg, #e9ebee 0%, #f6f7f8 24%, #e2e5e8 46%, #f4f5f7 66%, #e5e8eb 84%, #f1f2f4 100%);
}
body { background: var(--metal-claro); }
.blanca { background: var(--rayas-oscuras) 0 0 / 1600px 900px, linear-gradient(112deg, #f7f8f9 0%, #ffffff 30%, #eef0f2 55%, #fcfcfd 78%, #f1f3f5 100%); }
.cabecera, .barra-ruta, .franja-cifras, .oscura, .oscura-degradado, .etapa-panel, .ficha-cabeza, .documento-cabeza, .ficha-proyecto-cabeza, .pie, .razon { background: var(--metal); }
.razon:hover { background: var(--metal); filter: brightness(1.14); }
@media (min-width: 900px) { .mapa-cabeza { background: var(--metal); } }
.direccion-nombre { margin-top: 8px; font-size: 15px; font-weight: 700; color: var(--gris-2); }

/* EL METAL QUEDA FIJO Y LA PAGINA BAJA SOBRE EL (Max, 2026-10-06: «que el fondo metalico estuviera
   pegado y que cuando uno baja con scroll se fuera viendo como bajas por el metal»). La plancha no
   se mueve con el contenido: cada franja es una ventana a la misma plancha. En telefonos y tabletas
   se deja corriendo con la pagina, porque ahi el fondo fijo no funciona bien. */
body { background: #eceef0; }
body::before { content: ''; position: fixed; z-index: -1; inset: 0; background: var(--metal-claro); }
@media (min-width: 901px) and (hover: hover) {
  .blanca, .cabecera, .barra-ruta, .franja-cifras, .oscura, .oscura-degradado, .etapa-panel, .ficha-cabeza, .documento-cabeza, .ficha-proyecto-cabeza, .pie, .razon, .razon:hover, .mapa-cabeza, .portada, .portada::after { background-attachment: fixed; }
}
@media print { body::before { display: none; } }
/* La cabecera va mas oscura que el resto del metal, para que el menu se distinga de lo que pasa debajo;
   y el texto chico de las franjas oscuras, mas claro. */
.cabecera { background: linear-gradient(rgba(16, 20, 25, .86), rgba(16, 20, 25, .86)), var(--metal); }
.barra-ruta { background: linear-gradient(rgba(22, 27, 33, .5), rgba(22, 27, 33, .5)), var(--metal); }
.razon p, .pie, .franja-cifras .cifra span { color: #e3e6ea; }
.razon a { white-space: normal; }

/* ══ BAJAR POR EL METAL (Max, 2026-10-06) ═══════════════════════════════════════════════════════
   La plancha ya no queda quieta: al bajar por la pagina se recorre la plancha (las rayas suben
   mas lento que el contenido, como algo que esta mas atras) y una franja de luz la cruza en
   sentido contrario, como el reflejo que cambia al moverse frente a un metal. sitio.js escribe
   tres numeros en la raiz al hacer scroll: --metal-y, --brillo-y y --avance. Sin script, o en el
   telefono, la plancha simplemente se queda donde esta. */
:root { --metal-y: 0px; --brillo-y: 0px; --avance: 0; }
.cabecera, .cabecera.bajo, .barra-ruta, .franja-cifras, .oscura, .oscura-degradado, .etapa-panel, .ficha-cabeza, .documento-cabeza, .ficha-proyecto-cabeza, .pie, .razon, .razon:hover {
  background-color: #2b3138;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .17) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(rgba(22, 27, 33, .56), rgba(22, 27, 33, .56)), var(--rayas), linear-gradient(112deg, #262c33 0%, #434b54 20%, #2d333a 38%, #59616a 56%, #3a4149 72%, #4a525b 88%, #2b3138 100%);
  background-size: 100% 880px, auto, auto 180vh, auto;
  background-repeat: repeat-y, no-repeat, no-repeat, no-repeat;
  background-position: 0 var(--brillo-y), 0 0, 50% var(--metal-y), 0 0;
}
@media (min-width: 900px) {
  .mapa-cabeza { background-color: #2b3138; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .17) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(rgba(22, 27, 33, .56), rgba(22, 27, 33, .56)), var(--rayas), linear-gradient(112deg, #262c33 0%, #434b54 20%, #2d333a 38%, #59616a 56%, #3a4149 72%, #4a525b 88%, #2b3138 100%); background-size: 100% 880px, auto, auto 180vh, auto; background-repeat: repeat-y, no-repeat, no-repeat, no-repeat; background-position: 0 var(--brillo-y), 0 0, 50% var(--metal-y), 0 0; }
}
/* La cabecera y la barra de volver, mas oscuras que el resto (el oscurecido va por dentro). */
.cabecera { box-shadow: inset 0 0 0 400px rgba(14, 18, 23, .66); backdrop-filter: none; }
.cabecera.bajo { box-shadow: 0 10px 30px rgba(0, 0, 0, .34), inset 0 0 0 400px rgba(14, 18, 23, .66); }
.barra-ruta { box-shadow: inset 0 0 0 400px rgba(22, 27, 33, .42); }
.razon:hover { filter: brightness(1.16); }
/* El fondo claro de las paginas: la misma plancha en plata, con una sombra suave que la recorre. */
body::before, .blanca {
  background-color: #eceef0;
  background-image: linear-gradient(180deg, rgba(110, 120, 132, 0) 0%, rgba(110, 120, 132, .2) 50%, rgba(110, 120, 132, 0) 100%), var(--rayas-oscuras), linear-gradient(112deg, #e9ebee 0%, #f6f7f8 24%, #e2e5e8 46%, #f4f5f7 66%, #e5e8eb 84%, #f1f2f4 100%);
  background-size: 100% 980px, 100% 300vh, auto;
  background-repeat: repeat-y, no-repeat, no-repeat;
  background-position: 0 var(--brillo-y), 0 var(--metal-y), 0 0;
}
.blanca { background-color: #f6f7f8; background-image: linear-gradient(180deg, rgba(110, 120, 132, 0) 0%, rgba(110, 120, 132, .14) 50%, rgba(110, 120, 132, 0) 100%), var(--rayas-oscuras), linear-gradient(112deg, #f7f8f9 0%, #ffffff 30%, #eef0f2 55%, #fcfcfd 78%, #f1f3f5 100%); }
/* La primera pantalla: sus rayas tambien se recorren. */
.portada::after { background-size: auto 180vh; background-repeat: no-repeat; background-position: 50% var(--metal-y); opacity: .55; }
/* Cuanto se ha bajado: una linea fina bajo la cabecera. */
.cabecera::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: linear-gradient(90deg, var(--naranja), var(--naranja-claro)); transform-origin: 0 50%; transform: scaleX(var(--avance)); pointer-events: none; }

/* ══ ANIMACIONES ═══════════════════════════════════════════════════════════════════════════════
   Todas son de CSS. Con «reducir movimiento» activado en el equipo no corre ninguna. */
/* El ciclo se dibuja al abrir: primero el trazo, despues cada etapa en su turno. */
@keyframes traza { from { transform: scaleX(0); } }
@keyframes nodo { from { opacity: 0; transform: translateY(14px) scale(.7); } 70% { transform: translateY(-2px) scale(1.06); } }
.ciclo li { animation: nodo .55s cubic-bezier(.2, .8, .3, 1) backwards; }
.ciclo li:nth-child(1) { animation-delay: .5s; } .ciclo li:nth-child(2) { animation-delay: .62s; } .ciclo li:nth-child(3) { animation-delay: .74s; }
.ciclo li:nth-child(4) { animation-delay: .86s; } .ciclo li:nth-child(5) { animation-delay: .98s; } .ciclo li:nth-child(6) { animation-delay: 1.1s; }
.ciclo li:nth-child(7) { animation-delay: 1.22s; }
@media (min-width: 1020px) and (hover: hover) { .ciclo::before { transform-origin: 0 50%; animation: traza 1.2s .45s cubic-bezier(.3, .7, .2, 1) backwards; } }
/* Tarjetas, razones, cifras y mosaicos entran una tras otra cuando su bloque llega a la vista. */
@keyframes sube-fila { from { opacity: 0; transform: translateY(26px) scale(.97); } }
.con-js .visto:is(.tarjetas, .experiencias, .proyectos-destacados, .obra-mosaico, .razones, .cifras) > * { animation: sube-fila .65s cubic-bezier(.2, .7, .2, 1) backwards; }
.con-js .visto > :nth-child(2) { animation-delay: .09s; } .con-js .visto > :nth-child(3) { animation-delay: .18s; } .con-js .visto > :nth-child(4) { animation-delay: .27s; }
.con-js .visto > :nth-child(5) { animation-delay: .36s; } .con-js .visto > :nth-child(6) { animation-delay: .45s; } .con-js .visto > :nth-child(7) { animation-delay: .54s; }
/* Las fotos de un collage se enfocan al aparecer. */
@keyframes enfoca { from { opacity: 0; transform: scale(.9); filter: blur(8px); } }
.con-js .visto .collage > * { animation: enfoca .75s cubic-bezier(.2, .7, .2, 1) backwards; }
.con-js .visto .collage > :nth-child(2) { animation-delay: .1s; } .con-js .visto .collage > :nth-child(3) { animation-delay: .2s; } .con-js .visto .collage > :nth-child(4) { animation-delay: .3s; }
/* Un destello cruza la foto al pasar el cursor. */
.collage > *::after, .obra-mosaico a::after, .giro::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .34) 50%, rgba(255, 255, 255, 0) 62%); transform: translateX(-130%); transition: transform .85s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.collage > *:hover::after, .obra-mosaico a:hover::after, .proyecto-tarjeta:hover .collage > *::after, .giro:hover::after { transform: translateX(130%); }
.giro::after { z-index: 1; }
/* Las cifras reflejan la luz. */
@keyframes reflejo { from { background-position: 0 0; } to { background-position: 0 100%; } }
.cifra b { background-image: linear-gradient(180deg, #ffffff 0%, #aab1ba 40%, #ffffff 60%, #b9bec7 100%); background-size: 100% 260%; animation: reflejo 5s ease-in-out infinite alternate; }
/* Los puntos de una etapa entran en fila al cambiar de pestaña. */
.etapa-panel:not([hidden]) li { animation: sube-fila .5s cubic-bezier(.2, .7, .2, 1) backwards; }
.etapa-panel li:nth-child(2) { animation-delay: .08s; } .etapa-panel li:nth-child(3) { animation-delay: .16s; } .etapa-panel li:nth-child(4) { animation-delay: .24s; }
/* Las filas del mapa de normativas se marcan al pasar. */
.mapa-fila { transition: background .2s, box-shadow .2s; }
.mapa-fila:hover { background: rgba(196, 86, 26, .05); box-shadow: inset 4px 0 0 var(--naranja); }

/* La mini ficha se despliega hacia abajo y puede pasar por encima de la franja siguiente: la
   primera pantalla deja de recortar por abajo (por los lados y por arriba sigue recortando su
   brillo) y queda por delante de lo que viene despues. */
.portada { position: relative; z-index: 3; overflow: visible; overflow-x: clip; clip-path: inset(0 0 -420px 0); }

/* ══ TODO SOBRE METAL, SIN PARTES BLANCAS (Marcelo, por Max, 2026-10-06) ════════════════════════
   «Quitar las partes blancas y que todo quede con metal», con el metal oscuro, que es el que
   gusto (el plateado claro se veia «muy rayado, falso»). La pagina entera va sobre la plancha
   oscura; las tarjetas y fichas son paneles oscuros translucidos con borde claro, y el texto pasa
   a claro. Solo en pantalla: al imprimir (los documentos del sistema de gestion) sigue en blanco.
   Queda claro lo unico que no se puede oscurecer: las placas de los logos de clientes. */
@media screen {
  :root { color-scheme: dark; --gris: #b6bdc6; --gris-2: #d6dae0; --linea: rgba(255, 255, 255, .16); --papel: rgba(15, 19, 24, .6); --fondo: rgba(15, 19, 24, .42); }
  body { background: #2b3138; color: #f0f2f5; }
  body::before, .blanca {
    background-color: #2b3138;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(rgba(22, 27, 33, .56), rgba(22, 27, 33, .56)), var(--rayas), linear-gradient(112deg, #262c33 0%, #434b54 20%, #2d333a 38%, #59616a 56%, #3a4149 72%, #4a525b 88%, #2b3138 100%);
    background-size: 100% 880px, auto, auto 180vh, auto;
    background-repeat: repeat-y, no-repeat, no-repeat, no-repeat;
    background-position: 0 var(--brillo-y), 0 0, 50% var(--metal-y), 0 0;
  }
  /* Las franjas se distinguen del fondo por tono: unas un punto mas claras, otras mas oscuras. */
  .blanca { box-shadow: inset 0 0 0 3000px rgba(255, 255, 255, .045); }
  .franja-cifras, .pie { box-shadow: inset 0 0 0 3000px rgba(10, 13, 17, .42); }
  .saltar { background: #fff; color: #1c2229; }
  .boton-linea { color: #fff; border-color: rgba(255, 255, 255, .75); }
  .boton-linea:hover { background: #fff; border-color: #fff; color: #1c2229; }
  .volver { border-color: rgba(255, 255, 255, .6); color: #fff; }
  .volver:hover { background: #fff; border-color: #fff; color: #1c2229; }
  .tarjeta, .proyecto-tarjeta, .ficha, .documento, .ficha-proyecto, .mapa, .norma-indice, .formulario, .clientes { border-color: rgba(255, 255, 255, .16); }
  .tarjeta, .proyecto-tarjeta { box-shadow: 0 10px 30px rgba(0, 0, 0, .22); }
  .tarjeta:hover, .proyecto-tarjeta:hover { border-color: var(--naranja-claro); box-shadow: 0 16px 38px rgba(0, 0, 0, .4); }
  .etiqueta, .ficha-num, .doc-nav a { border-color: rgba(255, 255, 255, .34); }
  .etiqueta:hover { border-color: var(--naranja-claro); color: var(--naranja-claro); }
  .doc-nav a:hover { border-color: #fff; }
  .doc-nav a[aria-current="page"] { background: #fff; border-color: #fff; color: #1c2229; }
  .etapa-tab { border-top-color: rgba(255, 255, 255, .22); color: #f0f2f5; }
  .etapa-tab .num { color: var(--gris); }
  .etapa-tab .num::before { background: rgba(255, 255, 255, .4); }
  .etapa-tab:hover { background: rgba(255, 255, 255, .07); }
  .etapa-tab[aria-selected="true"] { background: rgba(10, 13, 17, .62); border-top-color: var(--naranja-claro); }
  .campo input, .campo select, .campo textarea { background: rgba(10, 13, 17, .55); border-color: rgba(255, 255, 255, .32); color: #fff; }
  .campo input::placeholder, .campo textarea::placeholder { color: #9aa3ae; }
  .aviso { background: rgba(232, 120, 58, .14); color: #f0f2f5; }
  .contacto-datos dd a { border-color: rgba(255, 255, 255, .34); }
  .mapa-grupo-rotulo { background: rgba(255, 255, 255, .09); color: #fff; }
  .mapa-fila:hover { background: rgba(255, 255, 255, .05); }
  .direccion-cara { box-shadow: 0 0 0 5px rgba(255, 255, 255, .14); }
  .collage > *, .obra-mosaico a { box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
  /* El naranjo de los textos chicos sube un tono para leerse sobre oscuro. */
  .lista-num .num, .tarjeta .ir, .norma-indice a[aria-current="page"] b, .ficha-cuerpo h2, .ficha-pie a, .doc-tarjeta .sobre, .paso a, .mapa-norma, .experiencia dt, .experiencias .tarjeta .sobre, .proyecto-tarjeta-texto .sobre, .proyecto-tarjeta-texto .ir, .ficha-proyecto-alcance h2, .enlace, .contacto-datos dd a:hover { color: var(--naranja-claro); }
  .lista-visto li::before { border-color: var(--naranja-claro); }
  /* Los logos de clientes necesitan fondo claro para verse: van en placas de plata, no blancas. */
  .clientes-lista a { background: linear-gradient(135deg, #f4f5f7, #d9dde2); border-color: rgba(255, 255, 255, .4); }
}
/* Las rayas conservan su proporcion (antes se estiraban a lo alto y se veian falsas): la plancha mide 1,8 pantallas. */
/* La franja bajo la primera pantalla: solo el certificado SICEP, al centro. */
.franja-sicep { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 22px; text-align: center; }
.franja-sicep img { height: clamp(52px, 7vw, 72px); width: auto; }
.franja-sicep span { font-size: clamp(15px, 1.5vw, 18px); font-weight: 600; letter-spacing: .02em; color: #e3e6ea; }

/* PLATEADO CON NEGRO, LETRAS BLANCAS Y BOTONES NARANJOS (Marcelo, por Max, 2026-10-06). Al llevar el
   metal a todos los fondos se habian vuelto grises tambien los bloques que eran negros, y Max lo
   reclamo. Queda asi: la BASE de la pagina es la plancha plateada; los BLOQUES (cabecera, barra de
   volver, franja de SICEP, razones, cabezas de ficha, paneles, tarjetas y pie) son negros y lisos;
   las letras, blancas; los botones y lo que se pincha, naranjo. */
@media screen {
  :root { --papel: rgba(11, 14, 18, .9); --fondo: rgba(11, 14, 18, .72); }
  .cabecera, .cabecera.bajo, .barra-ruta, .franja-cifras, .oscura:not(.portada), .oscura-degradado:not(.portada), .etapa-panel, .ficha-cabeza, .documento-cabeza, .ficha-proyecto-cabeza, .pie, .razon, .razon:hover, .mapa-cabeza { background-image: none; background-color: #0e1115; box-shadow: none; }
  .cabecera.bajo { box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
  .barra-ruta { background-color: #171b21; }
  .razon:hover { background-color: #1a1f26; filter: none; }
  .etapa-tab[aria-selected="true"] { background: #0e1115; }
  /* La base plateada: mas clara que antes, para que el negro de los bloques se note. */
  body::before, .blanca {
    background-color: #59626b;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 100%), linear-gradient(rgba(26, 31, 37, .34), rgba(26, 31, 37, .34)), var(--rayas), linear-gradient(112deg, #3b434c 0%, #5e6770 20%, #454d56 38%, #7b848d 56%, #535b64 72%, #68717a 88%, #414951 100%);
  }
  .blanca { box-shadow: none; }
  body { background: #4c545d; }
  h1, h2, h3, .bajada, .parrafo { text-shadow: 0 1px 2px rgba(14, 17, 21, .45); }
  .tarjeta h1, .tarjeta h2, .tarjeta h3, .razon h2, .pie h2, .ficha-proyecto h1, .ficha-proyecto h2, .ficha-proyecto h3, .etapa-panel h2, .etapa-panel h3 { text-shadow: none; }
  .portada h1 .acento { text-shadow: none; }
}

/* EL COLOR DE ANTES (Max, 2026-10-06: «no era negro, quiero el color de antes»). Los bloques vuelven
   al gris acero oscuro que tenian antes de hoy (los tonos --tinta, --acero y --acero-2 de arriba,
   y sus degradados), no negro. La base de la pagina sigue siendo la plancha plateada. */
@media screen {
  :root { --papel: rgba(28, 34, 41, .94); --fondo: rgba(32, 38, 45, .78); }
  .cabecera, .cabecera.bajo, .franja-cifras, .mapa-cabeza { background-color: var(--acero); }
  .barra-ruta { background-color: var(--acero-2); }
  .oscura:not(.portada), .etapa-panel, .ficha-cabeza, .documento-cabeza, .pie, .razon, .etapa-tab[aria-selected="true"] { background-color: var(--tinta); }
  .razon:hover { background-color: var(--acero-2); }
  .oscura-degradado:not(.portada) { background-image: linear-gradient(120deg, #272d35 0%, #363d46 56%, #2c333b 100%); }
  .ficha-proyecto-cabeza { background-image: linear-gradient(120deg, #272d35 0%, #3a424b 70%, #2c333b 100%); }
}
/* Max, 2026-10-06: «me gusta el fondo metalico en la base de todas las pantallas; lo que no me gusto
   fueron los fondos grises que anadiste a ventanas». Se quitaron las placas alrededor de cada seccion. */
/* Las flechas de las fotos de la portada aparecen solo con el cursor encima (Max, 2026-10-06).
   En pantallas tactiles, donde no hay cursor, se ven siempre: si no, no habria como usarlas. */
@media (hover: hover) {
  .giro-flecha:not([hidden]) { opacity: 0; transform: translateX(var(--asoma, 0)); transition: opacity .25s ease, transform .3s ease, background .15s, border-color .15s; }
  .giro-ant { --asoma: -8px; }
  .giro-sig { --asoma: 8px; }
  .giro:hover .giro-flecha:not([hidden]), .giro:focus-within .giro-flecha:not([hidden]) { opacity: 1; transform: none; }
  .giro-flecha:hover, .giro-flecha:focus-visible { transform: scale(1.06); }
}
/* Servicios en el orden del ciclo: cada linea dice en que etapas actua. */
.linea-etapas { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--naranja-claro); }
.linea-etapas i { display: inline-grid; place-items: center; min-width: 22px; height: 18px; padding-inline: 4px; border: 1px solid rgba(232, 120, 58, .55); border-radius: 999px; font-style: normal; font-size: 10.5px; letter-spacing: .04em; }
.pantalla .linea-etapas { margin-top: clamp(2px, .6vh, 6px); font-size: clamp(10.5px, 1.6vh, 11.5px); }
@media (min-width: 1024px) and (max-height: 640px) { .barra-ruta + .pantalla .linea-etapas { display: none; } }
/* UNA SOLA PLANCHA (Max, 2026-10-06): la primera pantalla deja ver la misma plancha oscura que el
   resto del sitio y conserva solo el brillo que se mueve solo. */
@media screen {
  .portada, .portada.oscura, .portada.oscura-degradado { background: transparent; }
  .portada::after { display: none; }
  .portada::before { background: radial-gradient(ellipse 46% 44% at 60% 40%, rgba(255, 255, 255, .22), transparent 70%), radial-gradient(ellipse 56% 52% at 28% 66%, rgba(255, 255, 255, .09), transparent 72%); }
}
/* LA LINEA DEL CICLO EN NARANJO (Max, 2026-10-06, con un dibujo: no una franja grande, sino «algo asi,
   con el color de fondo, pero por detras» de los numeros): una banda naranja delgada, con las puntas
   redondeadas, que pasa por detras de los siete numeros. En el telefono, la misma banda baja por la
   izquierda uniendo los numeros de la lista. */
@media (min-width: 1020px) and (hover: hover) {
  .ciclo::before { left: 2%; right: 2%; top: 14px; height: 6px; border-radius: 999px; background: linear-gradient(90deg, #b84d14, #e8783a 50%, #b84d14); opacity: 1; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
  .ciclo .num { box-shadow: 0 0 0 3px #e8783a; }
  .ciclo a:hover .num, .ciclo a:focus-visible .num { background: #fff; border-color: #fff; color: #14181d; }
}
/* EN EL TELEFONO, LA MISMA LINEA HORIZONTAL (Max, 2026-10-06: «que se logre igual la linea hacia el
   lado como en pantalla grande»; la lista hacia abajo no se entendia). Las siete etapas van en fila
   sobre la banda naranja, cada una con su nombre debajo, y la fila se desliza con el dedo; un
   degradado en el borde derecho avisa que sigue. */
@media (max-width: 1019px), (hover: none) {
  .ciclo-portada { position: relative; }
  .ciclo { position: relative; display: flex; flex-wrap: nowrap; gap: 0; margin: 12px 0 0; padding: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ciclo::-webkit-scrollbar { display: none; }
  .ciclo::before { display: none; }
  .ciclo li::before { content: ''; position: absolute; left: 0; right: 0; top: 14px; height: 6px; background: #d9682a; }
  .ciclo li:first-child::before { left: 50%; border-radius: 999px 0 0 999px; }
  .ciclo li:last-child::before { right: 50%; border-radius: 0 999px 999px 0; }
  .ciclo li:first-child::before { left: 50%; }
  .ciclo li { position: relative; flex: 0 0 118px; scroll-snap-align: start; padding-top: 2px; }
  .ciclo a { flex-direction: column; align-items: center; gap: 8px; min-height: 0; padding: 0 4px; border: 0; border-radius: 0; background: none; text-align: center; }
  .ciclo a:hover, .ciclo a:focus-visible, .ciclo a:active { background: none; }
  .ciclo .num { position: relative; width: 34px; height: 34px; margin-top: -2px; font-size: 12.5px; box-shadow: 0 0 0 3px #e8783a; }
  .ciclo b { position: relative; font-size: 13.5px; line-height: 1.2; }
  .ciclo-portada::after { content: ''; position: absolute; right: 0; top: 44px; bottom: 0; width: 46px; pointer-events: none; background: linear-gradient(90deg, rgba(43, 49, 56, 0), rgba(43, 49, 56, .85)); }
}
/* LA LINEA AVANZA CON EL CURSOR (Max, 2026-10-06; la primera version, por tramos, «quedo como las
   weas»: los bloques no empalmaban con la banda). Ahora es UNA sola banda que se llena de izquierda
   a derecha: debajo queda la banda apagada completa, y encima la misma banda naranja recortada
   hasta el numero donde esta el cursor (clip-path animado, sin costuras). Los numeros recorridos
   se encienden; el actual queda naranjo solido con un halo; los que faltan se atenuan. Sin cursor,
   la banda vuelve a estar llena. Todo con CSS. */
@media (min-width: 1020px) and (hover: hover) {
  .ciclo { --lleno: 100%; isolation: isolate; }
  .ciclo::before { background: linear-gradient(90deg, #b84d14, #e8783a 50%, #b84d14); }
  .ciclo::after { content: ''; position: absolute; left: 2%; right: 2%; top: 14px; height: 6px; border-radius: 999px; background: #3a4149; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45); opacity: 0; transition: opacity .3s ease; z-index: -2; }
  .ciclo::before { z-index: -1; clip-path: inset(0 calc(100% - var(--lleno)) 0 0 round 999px); transition: clip-path .5s cubic-bezier(.2, .8, .2, 1); }
  .ciclo:has(a:hover)::after { opacity: 1; }
  .ciclo:has(li:nth-child(1) a:hover) { --lleno: 7.2%; }
  .ciclo:has(li:nth-child(2) a:hover) { --lleno: 22.1%; }
  .ciclo:has(li:nth-child(3) a:hover) { --lleno: 37%; }
  .ciclo:has(li:nth-child(4) a:hover) { --lleno: 51.9%; }
  .ciclo:has(li:nth-child(5) a:hover) { --lleno: 66.7%; }
  .ciclo:has(li:nth-child(6) a:hover) { --lleno: 81.6%; }
  .ciclo:has(li:nth-child(7) a:hover) { --lleno: 100%; }
  .ciclo li::before { display: none; }
  .ciclo li a { z-index: 2; }
  .ciclo .num { transition: background .25s, border-color .25s, color .25s, transform .25s, box-shadow .25s; }
  .ciclo:has(a:hover) li:has(~ li a:hover) .num { background: #e8783a; border-color: #ffd9bf; }
  .ciclo a:hover .num, .ciclo a:focus-visible .num { background: var(--naranja); border-color: #fff; color: #fff; transform: scale(1.14); box-shadow: 0 0 0 3px #e8783a, 0 0 22px rgba(232, 120, 58, .85); }
  .ciclo:has(a:hover) li:has(a:hover) ~ li .num { background: #2b323a; border-color: rgba(255, 255, 255, .3); box-shadow: 0 0 0 3px #3a4149; }
  .ciclo:has(a:hover) li:has(a:hover) ~ li b { opacity: .55; }
}
/* LA PAGINA DEL CICLO (Max, 2026-10-06). Las pestanas que no estan abiertas van en el naranjo de la
   banda de la portada; la abierta, en acero, unida a su panel. Y cada punto de la etapa lleva su
   explicacion, con dos claves a la izquierda: que pasa si no se hace y que recibe el cliente. */
@media screen {
  /* Max, 2026-10-06: «queria que el fondo fuera naranjo, no los cuadros». La fila de etapas es UNA franja
     naranja continua (la misma banda de la portada); las pestanas no abiertas son transparentes sobre
     ella, separadas por un filo fino, y la abierta va en acero, unida a su panel. */
  .etapas-tabs { gap: 0; background: linear-gradient(90deg, #b84d14, #e8783a 50%, #b84d14); border-radius: 12px 12px 0 0; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28); }
  .etapa-tab { background: transparent; border-top-color: transparent; border-radius: 0; color: #fff; box-shadow: inset -1px 0 0 rgba(20, 24, 30, .22); }
  .etapa-tab .num { color: #ffe3d0; }
  .etapa-tab .num::before { background: #fff; }
  .etapa-tab:hover { background: rgba(255, 255, 255, .14); }
  .etapa-tab[aria-selected="true"], .etapa-tab[aria-selected="true"]:hover { background: var(--tinta); border-top-color: var(--naranja-claro); box-shadow: none; }
  .etapa-tab[aria-selected="true"] .num { color: var(--gris-claro); }
  .etapa-tab[aria-selected="true"] .num::before { background: var(--naranja-claro); }
}
.etapa-panel .lista-num li { align-items: start; }
.etapa-panel .lista-num li > span:last-child { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
.etapa-panel .lista-num b { font-weight: 700; }
.etapa-panel .lista-num small { font-size: 15px; font-weight: 400; line-height: 1.5; color: #c9ced6; }
.etapa-panel .lista-num .num { padding-top: 4px; }
.etapa-claves { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 18px; }
.etapa-claves div { padding: 12px 14px; border-left: 3px solid var(--naranja-claro); border-radius: 0 8px 8px 0; background: rgba(255, 255, 255, .06); }
.etapa-claves .sin { border-left-color: #ef6b4a; background: rgba(239, 107, 74, .1); }
.etapa-claves dt { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--naranja-claro); }
.etapa-claves .sin dt { color: #ff9c82; }
.etapa-claves dd { margin: 4px 0 0; font-size: 15.5px; line-height: 1.45; color: #f0f2f5; }
/* EN PANTALLA ANGOSTA (Max, 2026-10-06: «en telefono se ve horrible»): la franja naranja partida en
   tres filas se veia mal. Ahi las etapas van en una lista vertical, cada una en su fila, sobre una
   franja naranja con los bordes redondeados; la etapa abierta se marca en acero y el panel sigue debajo. */
@media screen and (max-width: 759px) {
  .etapas-tabs { grid-template-columns: minmax(0, 1fr); border-radius: 12px; margin-bottom: 10px; }
  .etapa-tab { flex-direction: row; align-items: center; gap: 12px; padding: 12px 14px; box-shadow: inset 0 -1px 0 rgba(20, 24, 30, .22); border-top: 0; border-left: 4px solid transparent; }
  .etapa-tab:last-child { box-shadow: none; }
  .etapa-tab .num { flex: none; min-width: 34px; }
  .etapa-tab b { font-size: 15.5px; }
  .etapa-tab[aria-selected="true"], .etapa-tab[aria-selected="true"]:hover { border-left-color: var(--naranja-claro); border-top: 0; }
  .etapa-panel { border-radius: var(--radio); }
}
/* INVERTIDO (Max, 2026-10-06: «que el abierto sea naranjo y los demas negros»). La fila de etapas va
   en acero oscuro; la etapa abierta se enciende en naranjo y su panel sigue en acero debajo. */
@media screen {
  .etapas-tabs { background: var(--tinta); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
  .etapa-tab { box-shadow: inset -1px 0 0 rgba(255, 255, 255, .1); }
  .etapa-tab .num { color: var(--gris); }
  .etapa-tab .num::before { background: rgba(255, 255, 255, .35); }
  .etapa-tab:hover { background: rgba(255, 255, 255, .07); }
  .etapa-tab[aria-selected="true"], .etapa-tab[aria-selected="true"]:hover { background: linear-gradient(180deg, #e8783a, #c4561a); border-top-color: #ffb27f; box-shadow: none; }
  .etapa-tab[aria-selected="true"] .num { color: #ffe3d0; }
  .etapa-tab[aria-selected="true"] .num::before { background: #fff; }
}
@media screen and (max-width: 759px) {
  .etapa-tab { box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .1); }
  .etapa-tab:last-child { box-shadow: none; }
  .etapa-tab[aria-selected="true"], .etapa-tab[aria-selected="true"]:hover { border-left-color: #fff; border-top: 0; }
}
/* LAS TRES RAZONES (Max, 2026-10-06: en telefono «se ve como si le faltara uno»): o van las tres en
   una fila, o una bajo otra. Nunca dos y una, que deja un hueco vacio. */
.razones { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .razones, .pantalla .razones { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* UNA FOTO POR ETAPA (Max, 2026-10-06: «le falta una imagen… esta muy estatico»). Va en la columna
   izquierda del panel, bajo el texto, no detras de las letras: asi se lee y la foto se luce. Al
   cambiar de etapa la foto entra enfocandose. */
.etapa-foto { position: relative; margin: 20px 0 0; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; background: #14181d; box-shadow: 0 14px 34px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .12); }
.etapa-foto img { width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(1.04) saturate(1.1); }
.etapa-foto figcaption { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; gap: 9px; padding: 34px 14px 11px; background: linear-gradient(0deg, rgba(20, 24, 30, .92), rgba(20, 24, 30, 0)); font-size: 13.5px; font-weight: 600; line-height: 1.3; color: #fff; }
.etapa-foto figcaption::before { content: ''; flex: none; width: 7px; height: 7px; background: var(--naranja-claro); }
@keyframes foto-entra { from { opacity: 0; transform: scale(1.06); filter: blur(6px); } }
.con-js .etapa-panel:not([hidden]) .etapa-foto img { animation: foto-entra .7s cubic-bezier(.2, .7, .2, 1) both; }
.encabezado .bajada + .bajada { margin-top: 10px; }
.encabezado .bajada b { color: #fff; }
/* LA MINI FICHA SE PUEDE ALCANZAR Y PINCHAR (Max, 2026-10-06: «al intentar llevar el clic a la mini
   ficha se sale»). Antes no recibia el cursor y habia un hueco entre el numero y la ficha: al bajar
   el cursor se cerraba. Ahora la ficha recibe el cursor mientras esta abierta, un puente invisible
   cubre el hueco, y como la ficha va dentro del enlace de su etapa, pincharla lleva a esa etapa. */
@media (min-width: 1020px) and (hover: hover) {
  .ciclo a:hover .ciclo-ficha, .ciclo a:focus-visible .ciclo-ficha { pointer-events: auto; cursor: pointer; }
  .ciclo-ficha::before { content: ''; position: absolute; left: 0; right: 0; top: -44px; height: 44px; }
  .ciclo a:hover .ciclo-ficha, .ciclo a:focus-visible .ciclo-ficha { clip-path: inset(-44px 0 0 0 round 14px); }
  .ciclo-ficha { transition: opacity .22s ease, transform .38s cubic-bezier(.2, .9, .25, 1.15), clip-path .42s cubic-bezier(.2, .8, .2, 1), visibility 0s .5s; }
  .ciclo a:hover .ciclo-ficha:hover { border-color: var(--naranja-claro); }
}
/* LOS SERVICIOS DE CADA LINEA, EN UN CUADRO (Max, 2026-10-06). Un panel de acero con filo naranjo
   arriba, como el panel de las etapas; cada servicio es una fila que se marca al pasar el cursor,
   y entran una tras otra al abrir la pagina. */
.linea-cuadro { padding: clamp(18px, 2.6vw, 30px); background: var(--tinta); border: 1px solid rgba(255, 255, 255, .14); border-top: 3px solid var(--naranja-claro); border-radius: 14px; box-shadow: 0 22px 50px rgba(0, 0, 0, .35); }
.linea-cuadro .rotulo { color: var(--naranja-claro); margin-bottom: 6px; }
.linea-cuadro .lista-num li { margin-inline: -12px; padding-inline: 12px; border-color: rgba(255, 255, 255, .14); border-radius: 8px; transition: background .2s, transform .2s; }
.linea-cuadro .lista-num li:first-child { border-top: 0; }
.linea-cuadro .lista-num li:last-child { border-bottom: 0; }
.linea-cuadro .lista-num li:hover { background: rgba(255, 255, 255, .06); transform: translateX(4px); }
.linea-cuadro .lista-num .num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(232, 120, 58, .16); border: 1px solid rgba(232, 120, 58, .5); color: var(--naranja-claro); font-size: 12px; }
.linea-cuadro .lista-num li { align-items: center; }
.con-js .linea-cuadro.visto .lista-num li { animation: sube-fila .55s cubic-bezier(.2, .7, .2, 1) backwards; }
.con-js .linea-cuadro.visto .lista-num li:nth-child(2) { animation-delay: .1s; }
.con-js .linea-cuadro.visto .lista-num li:nth-child(3) { animation-delay: .2s; }
.con-js .linea-cuadro.visto .lista-num li:nth-child(4) { animation-delay: .3s; }
.con-js .linea-cuadro.visto .lista-num li:nth-child(5) { animation-delay: .4s; }
/* UN SOLO BOTON PARA «IR A» (Max, 2026-10-06: los enlaces de texto con flecha «no se ven bien»). Borde
   fino, fondo que se enciende al pasar el cursor y la flecha avanza. El tamano chico va dentro de
   tarjetas y en la navegacion anterior/siguiente. */
.boton-ir { gap: 10px; min-height: 42px; padding: 9px 18px; border: 1.5px solid rgba(255, 255, 255, .45); border-radius: 999px; background: rgba(255, 255, 255, .06); color: #fff; font-size: 15px; }
.boton-ir i { font-style: normal; font-size: 18px; line-height: 1; color: var(--naranja-claro); transition: transform .2s ease; }
.boton-ir:hover, .boton-ir:focus-visible { background: var(--naranja); border-color: var(--naranja); color: #fff; }
.boton-ir:hover i, .boton-ir:focus-visible i { color: #fff; transform: translateX(4px); }
.boton-ir:hover i:first-child, .boton-ir:focus-visible i:first-child { transform: translateX(-4px); }
.boton-ir.chico { min-height: 36px; padding: 6px 14px; font-size: 13.5px; gap: 8px; }
.boton-ir.chico i { font-size: 16px; }
.razon .boton-ir { margin-top: 14px; }
.tarjeta .boton-ir, .proyecto-tarjeta-texto .boton-ir { margin-top: auto; align-self: flex-start; }
.proyecto-tarjeta-texto .boton-ir { margin-top: 10px; }
.proyecto-tarjeta:hover .boton-ir, .tarjeta:hover .boton-ir { background: var(--naranja); border-color: var(--naranja); }
.proyecto-tarjeta:hover .boton-ir i, .tarjeta:hover .boton-ir i { color: #fff; transform: translateX(4px); }
.paso, .ficha-pie { align-items: center; }
.paso .boton-ir, .ficha-pie .boton-ir { max-width: 100%; }
.paso .boton-ir, .ficha-pie .boton-ir { white-space: normal; text-align: left; }

/* EL SERVICIO DE CADA ETAPA (Marcelo, audio «SQA WEB», 2026-10-08): la activación de ingeniería no
   lleva a una ficha, y la liberación y el despacho llevan a dos (nacional e internacional). */
.etapa-panel .servicio-etapa { margin-top: 16px; font-size: 15px; color: #fff; }
.etapa-panel .servicio-etapa b { font-weight: 700; }
.etapa-panel .servicio-etapa.varios { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.etapa-panel .servicio-etapa.varios span { flex-basis: 100%; }
/* LOS PANELES DE LAS ETAPAS MIDEN LO MISMO (Marcelo: «hay un problema de fluidez en esa página»).
   Al cambiar de etapa el panel cambiaba de alto, hasta 66 px, y movía todo lo que venía debajo. En
   pantallas anchas van apilados en la misma celda: el alto lo fija el más largo y nada se mueve. */
@media (min-width: 900px) {
  .etapa-paneles { display: grid; }
  .etapa-paneles > .etapa-panel { grid-area: 1 / 1; }
  .etapa-paneles > .etapa-panel[hidden] { display: grid; visibility: hidden; pointer-events: none; }
}