/* slabblu.com
   Una sola familia, Archivo variable, usada como en un plano: expandida y
   gruesa para los títulos (parecida al logotipo), condensada para cotas y
   anotaciones, normal para el texto. Concreto de fondo, tinta azul marino del
   logo, y el amarillo de chaleco solo para la acción principal y lo que se
   está editando. */

@font-face {
  font-family: 'Archivo';
  src: url('/img/archivo.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --concreto: #E3E8EE;
  --concreto-2: #D3DAE3;
  --papel: #F6F8FA;
  --tinta: #02254F;
  --tinta-2: #3A506E;
  --tinta-3: #7E90A8;
  --linea: #C2CBD6;
  --azul: #0286DB;
  --azul-texto: #00629F;
  --cielo: #55B3F8;
  --chaleco: #FFB000;
  --chaleco-suave: #FFE6A3;
  --alerta: #B42318;
  --alerta-suave: #FBE7E5;
  --ok: #17703F;
  --radio: 6px;
  --ancho: 1240px;
  --margen: clamp(16px, 4vw, 48px);
  --lado: max(var(--margen), calc((100% - var(--ancho)) / 2));
  --sombra: 0 1px 0 rgba(2, 37, 79, .04), 0 28px 48px -32px rgba(2, 37, 79, .45);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--concreto);
  color: var(--tinta);
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  font-stretch: 100%;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
p { margin: 0; }
a { color: var(--azul-texto); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; border-radius: 3px; }
button { font: inherit; color: inherit; }
section[id] { scroll-margin-top: 76px; }

.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--tinta); color: #fff; padding: .6rem 1rem; border-radius: var(--radio); }
.saltar:focus { top: 1rem; }
.tope { position: absolute; top: 0; left: 0; width: 1px; height: 24px; }

/* ---------- Tipografía ---------- */
.titular {
  margin: 0;
  font-size: clamp(2.4rem, 1.4rem + 3.3vw, 4.3rem);
  font-weight: 800;
  font-stretch: 116%;
  line-height: .98;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.h2 {
  margin: 0;
  font-size: clamp(1.85rem, 1.3rem + 2vw, 3.1rem);
  font-weight: 780;
  font-stretch: 112%;
  line-height: 1.04;
  letter-spacing: -.008em;
  text-wrap: balance;
}
.h3 { margin: 0; font-size: 1.25rem; font-weight: 720; font-stretch: 106%; line-height: 1.2; }
.lead { font-size: clamp(1.0625rem, 1rem + .3vw, 1.2rem); color: var(--tinta-2); max-width: 60ch; text-wrap: pretty; }

/* ---------- Botones ---------- */
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; }
.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 1.3rem;
  border: 2px solid transparent; border-radius: var(--radio);
  font-weight: 650; font-stretch: 104%; font-size: 1rem; line-height: 1.1;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.boton-chaleco { background: var(--chaleco); color: var(--tinta); }
.boton-chaleco:hover { background: #FFC23D; }
.boton-tinta { background: var(--tinta); color: #fff; }
.boton-tinta:hover { background: #063A75; }
.boton-linea { border-color: var(--tinta); color: var(--tinta); background: transparent; }
.boton-linea:hover { background: var(--tinta); color: #fff; }
.boton-chico { min-height: 40px; padding: 0 .95rem; font-size: .9375rem; }
.boton-texto { background: none; border: 0; padding: .25rem 0; color: var(--azul-texto); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: .18em; }

/* ---------- Cabecera ---------- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: rgba(227, 232, 238, .9);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.cabecera.bajada { border-bottom-color: var(--linea); }
.cabecera-fila { display: flex; align-items: center; gap: 2rem; height: 68px; padding-inline: var(--lado); }
.marca { display: block; flex: none; }
.marca img { display: block; height: 32px; width: auto; }
.menu ul { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.menu a { color: var(--tinta); text-decoration: none; font-weight: 560; padding: .4rem 0; }
.menu a:hover, .menu a[aria-current] { box-shadow: inset 0 -2px 0 var(--tinta); }
.cabecera-acciones { margin-left: auto; display: flex; align-items: center; gap: 1.1rem; }
.desplegable { position: relative; }
.desplegable summary { list-style: none; cursor: pointer; font-weight: 560; padding: .4rem 0; display: flex; align-items: center; gap: .45rem; }
.desplegable summary::-webkit-details-marker { display: none; }
.desplegable summary::after { content: ''; width: 6px; height: 6px; border-right: 1.6px solid; border-bottom: 1.6px solid; transform: translateY(-2px) rotate(45deg); }
.desplegable[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.desplegable-lista {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 13rem;
  list-style: none; margin: 0; padding: .35rem;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 8px; box-shadow: var(--sombra);
}
.desplegable-lista a { display: block; padding: .55rem .7rem; border-radius: 5px; color: var(--tinta); text-decoration: none; }
.desplegable-lista a:hover { background: var(--concreto); }
.desplegable-lista a[aria-current] { font-weight: 700; }
.menu-boton {
  display: none; min-height: 40px; padding: 0 .9rem; border: 1.5px solid var(--tinta); border-radius: var(--radio);
  background: transparent; font-weight: 600; cursor: pointer;
}
.menu-movil { display: none; }
.menu-movil-idiomas a, .pie-idiomas a { color: var(--tinta-2); margin-right: 1rem; }
.menu-movil-idiomas a[aria-current], .pie-idiomas a[aria-current] { color: var(--tinta); font-weight: 700; text-decoration: none; }

/* ---------- Portada ---------- */
.portada {
  display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); align-items: center;
  gap: clamp(24px, 4vw, 64px);
  min-height: min(760px, calc(100svh - 68px));
  padding: clamp(24px, 4vw, 56px) var(--lado) clamp(24px, 3vw, 40px);
}
.portada-texto .lead { margin: 1.6rem 0 2.1rem; }
.nota { margin-top: 1.1rem; font-size: .875rem; font-stretch: 82%; color: var(--tinta-2); }

/* La pila de losas. Coordenadas del "mundo": x a la derecha, y hacia el
   frente, z hacia arriba. Cada losa sube --h por nivel. */
.pila {
  --s: 240px; --t: 16px; --h: 96px;
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px;
}
.pila.abierta { --h: 136px; }
.pila-escena { height: 600px; display: grid; place-items: center; perspective: 2200px; }
.pila-mundo {
  --rx: 58deg; --rz: -42deg;
  position: relative; width: var(--s); height: var(--s);
  transform-style: preserve-3d;
  transform: translateY(84px) rotateX(var(--rx)) rotateZ(var(--rz));
}
.losa {
  --lev: 0px; --retraso: 0s;
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--n) * var(--h) + var(--lev)));
  transition: transform .85s cubic-bezier(.2, .85, .25, 1.06) var(--retraso), opacity .35s linear var(--retraso);
  cursor: pointer;
}
.losa[data-losa="0"] { --n: 0; --retraso: .05s; }
.losa[data-losa="1"] { --n: 1; --retraso: .32s; }
.losa[data-losa="2"] { --n: 2; --retraso: .59s; }
.losa.activa { --lev: 18px; }
.pila:not(.armada) .losa { transform: translateZ(calc(var(--n) * var(--h) + 460px)); opacity: 0; }
.cara { position: absolute; }
.cara-arriba { inset: 0; transform: translateZ(var(--t)); background: var(--c1); transition: box-shadow .2s; }
.cara-arriba svg { display: block; width: 100%; height: 100%; }
.cara-y0, .cara-y1 { left: 0; width: 100%; height: var(--t); transform-origin: top; transform: rotateX(90deg); background: var(--c2); }
.cara-y0 { top: 0; }
.cara-y1 { top: 100%; }
.cara-x0, .cara-x1 { top: 0; width: var(--t); height: 100%; transform-origin: left; transform: rotateY(-90deg); background: var(--c3); }
.cara-x0 { left: 0; }
.cara-x1 { left: 100%; }
.losa.activa .cara-arriba { box-shadow: inset 0 0 0 3px var(--chaleco); }
.ancla { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; }

.losa-budget { --c1: #02254F; --c2: #011A39; --c3: #01132B; }
.losa-cowork { --c1: #0286DB; --c2: #016FB6; --c3: #015C98; }
.losa-storage { --c1: #55B3F8; --c2: #3F9DE5; --c3: #318ACF; }
.planta { fill: none; stroke-width: .9; stroke-linecap: square; }
.losa-budget .planta { stroke: rgba(85, 179, 248, .7); }
.losa-cowork .planta { stroke: rgba(255, 255, 255, .7); }
.losa-storage .planta { stroke: rgba(2, 37, 79, .55); }
.trama { stroke: rgba(85, 179, 248, .45); stroke-width: .7; fill: none; }
.trama.tenue { stroke: rgba(85, 179, 248, .25); }
.marca-pin { fill: var(--chaleco); stroke: #fff; stroke-width: 1.2; }
.cota-mini { stroke: rgba(255, 255, 255, .6); stroke-width: .7; fill: none; }
.estante { fill: rgba(2, 37, 79, .28); stroke: rgba(2, 37, 79, .6); stroke-width: .6; }

.guias {
  --retraso: .95s;
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: translateZ(calc(var(--n) * var(--h) + var(--t)));
  transition: transform .85s cubic-bezier(.2, .85, .25, 1.06) var(--retraso), opacity .3s linear var(--retraso);
  pointer-events: none;
}
.guias[data-guias="0"] { --n: 0; }
.guias[data-guias="1"] { --n: 1; }
.guias i {
  position: absolute; width: 0; height: calc(var(--h) - var(--t));
  border-left: 1.5px dashed var(--tinta-3);
  transform-origin: top; transform: rotateX(90deg);
  transition: height .85s cubic-bezier(.2, .85, .25, 1.06) var(--retraso);
}
.guias i:nth-child(1) { left: 0; top: 0; }
.guias i:nth-child(2) { left: 100%; top: 0; }
.guias i:nth-child(3) { left: 0; top: 100%; }
.guias i:nth-child(4) { left: 100%; top: 100%; }
.pila:not(.armada) .guias { opacity: 0; }
.pila:not(.armada) .guias i { height: 0; }

.pila-lineas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; transition: opacity .5s; }
.pila-lineas polyline { fill: none; stroke: var(--tinta-3); stroke-width: 1; }
.pila-lineas circle { fill: var(--tinta); }
.pila:not(.lista) .pila-lineas { opacity: 0; }

.pila-rotulos { list-style: none; margin: 0; padding: 0; display: grid; gap: 54px; position: relative; z-index: 1; }
.pila-rotulos li { transition: opacity .5s ease, transform .5s ease; }
.pila-rotulos li:nth-child(1) { transition-delay: 1.15s; }
.pila-rotulos li:nth-child(2) { transition-delay: .95s; }
.pila-rotulos li:nth-child(3) { transition-delay: .75s; }
.pila:not(.armada) .pila-rotulos li { opacity: 0; transform: translateX(10px); }
.pila.lista .pila-rotulos li { transition-delay: 0s; }
.rotulo { display: grid; gap: .1rem; color: var(--tinta); text-decoration: none; padding: .2rem .25rem; border-radius: 4px; }
.rotulo-cota { display: flex; align-items: center; gap: .35rem; font-stretch: 72%; font-weight: 600; font-size: .875rem; color: var(--tinta-2); }
.rotulo-cota svg { width: 12px; height: 9px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.rotulo-n { font-weight: 760; font-stretch: 108%; font-size: 1.0625rem; transition: box-shadow .2s; }
.rotulo-d { font-stretch: 82%; font-size: .875rem; color: var(--tinta-2); }
.rotulo.activo .rotulo-n, .rotulo:hover .rotulo-n { box-shadow: inset 0 -.38em 0 var(--chaleco-suave); }
.pila-pista { grid-column: 1 / -1; text-align: center; font-stretch: 80%; font-size: .8125rem; color: var(--tinta-2); margin-top: -40px; }
.pila.lista .losa, .pila.lista .guias, .pila.lista .guias i { --retraso: 0s; }
.pila.sin-mov * { transition: none !important; }

/* ---------- Niveles (productos) ---------- */
.nivel { padding: clamp(48px, 6vw, 88px) var(--lado) clamp(32px, 4vw, 56px); }
.nivel-marca {
  display: flex; align-items: flex-end; gap: .6rem;
  border-bottom: 1.5px solid var(--tinta); padding-bottom: .45rem;
  margin-bottom: clamp(28px, 3.5vw, 48px);
}
.nivel-simbolo { width: 16px; height: 12px; margin-bottom: -.45rem; fill: currentColor; flex: none; }
.nivel-cota { font-stretch: 72%; font-weight: 650; font-size: 1rem; line-height: 1; }
.nivel-nombre { margin-left: auto; font-weight: 760; font-stretch: 106%; line-height: 1; }
.nivel-cabeza { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 4vw, 64px); align-items: end; }
.nivel-cuerpo {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(32px, 4.5vw, 64px); align-items: start;
}
.nivel > .acciones { margin-top: clamp(28px, 3.5vw, 44px); }

.lista-tecnica { margin: 0; }
.lista-tecnica > div { padding: .85rem 0 .9rem; border-top: 1px solid var(--linea); }
.lista-tecnica > div:last-child { border-bottom: 1px solid var(--linea); }
.lista-tecnica dt { font-weight: 700; font-stretch: 104%; }
.lista-tecnica dd { margin: .15rem 0 0; color: var(--tinta-2); font-size: .975rem; }

/* ---------- Marco de las demos ---------- */
.demo {
  margin: 0; background: var(--papel);
  border: 1px solid var(--linea); border-radius: 10px; overflow: hidden;
  box-shadow: var(--sombra);
  font-size: .9375rem;
}
.demo-barra {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  padding: .7rem 1rem; border-bottom: 1px solid var(--linea); background: #fff;
}
.demo-titulo { font-weight: 720; }
.demo-sub { font-stretch: 82%; color: var(--tinta-2); font-size: .875rem; }
.demo-nota, .demo-pista { padding: .55rem 1rem; font-size: .8125rem; font-stretch: 86%; color: var(--tinta-2); }
.demo-nota { padding-bottom: 0; }
.demo-pista.error { color: var(--alerta); font-weight: 600; }
.recien { animation: destello 1s ease-out; }
@keyframes destello { from { background-color: var(--chaleco-suave); } to { background-color: transparent; } }

.segmento { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; border: 1.5px solid var(--tinta); border-radius: var(--radio); background: var(--papel); }
.segmento button {
  min-height: 40px; padding: .4rem .95rem; border: 0; border-radius: 4px;
  background: transparent; color: var(--tinta); font-weight: 600; font-stretch: 96%; cursor: pointer;
}
.segmento button:hover { background: var(--concreto); }
.segmento button[aria-pressed="true"] { background: var(--tinta); color: #fff; }
.segmento-chico { border-width: 1px; }
.segmento-chico button { min-height: 30px; padding: .15rem .65rem; font-size: .875rem; }

/* ---------- Demo: ficha de costo ---------- */
.apu-envoltura { overflow-x: auto; }
.apu-tabla { width: 100%; border-collapse: collapse; font-size: .875rem; }
.apu-tabla th, .apu-tabla td { padding: .3rem .55rem; text-align: left; font-weight: 400; vertical-align: middle; }
.apu-tabla th:first-child { padding-left: 1rem; }
.apu-tabla td:last-child { padding-right: 1rem; }
.apu-tabla thead th { font-stretch: 80%; font-weight: 600; font-size: .8125rem; color: var(--tinta-2); border-bottom: 1px solid var(--linea); padding-top: .55rem; padding-bottom: .45rem; }
.apu-tabla .num { text-align: right; white-space: nowrap; }
.apu-grupo th, .apu-grupo td { padding-top: .75rem; font-weight: 720; font-stretch: 92%; }
.apu-u { color: var(--tinta-2); white-space: nowrap; }
.apu-u-movil { display: none; }
.apu-calc { color: var(--tinta-2); padding-right: calc(.55rem + .4rem) !important; }
.celda {
  width: 5.6em; padding: .22rem .38rem; text-align: right;
  font: inherit; font-variant-numeric: tabular-nums; color: var(--tinta);
  background: transparent; border: 1px solid transparent; border-radius: 4px;
  border-bottom-color: var(--linea);
}
.celda:hover { border-color: var(--linea); background: #fff; }
.celda:focus { outline: none; border-color: var(--tinta); background: var(--chaleco-suave); }
.celda[aria-invalid="true"] { border-color: var(--alerta); background: var(--alerta-suave); }
.apu-pct { display: inline-flex; align-items: center; gap: .2rem; }
.apu-pct .celda { width: 3.4em; }
.apu-totales tr:first-child th, .apu-totales tr:first-child td { border-top: 1px solid var(--linea); padding-top: .55rem; }
.apu-totales th { font-weight: 560; }
.apu-pu th, .apu-pu td { border-top: 2px solid var(--tinta); padding-top: .55rem; padding-bottom: .65rem; font-size: 1.0625rem; font-weight: 800; }
.apu-neto { font-stretch: 76%; font-weight: 520; font-size: .8125rem; color: var(--tinta-2); }
.apu-pie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem;
  padding: .75rem 1rem; border-top: 1px solid var(--linea); background: var(--concreto);
}
.apu-cant { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }
.apu-cant .celda { width: 4.5em; background: #fff; border-color: var(--linea); }
.apu-total { display: flex; align-items: baseline; gap: .7rem; margin: 0; }
.apu-total span { font-stretch: 84%; color: var(--tinta-2); font-size: .875rem; }
.apu-total output { font-size: 1.45rem; font-weight: 800; font-stretch: 110%; border-radius: 4px; padding: 0 .2rem; }

/* ---------- Demo: plano ---------- */
.plano-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 14.5rem; }
.plano-lienzo { position: relative; border-right: 1px solid var(--linea); touch-action: manipulation; }
.plano-svg { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
.plano-svg .eje { stroke: var(--tinta-3); stroke-width: 2.2; stroke-dasharray: 34 12 6 12; }
.burbuja { fill: var(--papel); stroke: var(--tinta); stroke-width: 3; }
.burbuja-t, .local, .cota-t, .medida-t { font-family: 'Archivo', sans-serif; text-anchor: middle; }
.burbuja-t { font-size: 36px; font-weight: 650; font-stretch: 88%; fill: var(--tinta); }
.muro { stroke: var(--tinta); stroke-width: 20; stroke-linecap: square; }
.muro-int { stroke-width: 12; }
.ventana { fill: var(--papel); stroke: var(--tinta); stroke-width: 2.5; }
.ventana-l { stroke: var(--tinta); stroke-width: 2; }
.puerta { stroke: var(--tinta); stroke-width: 4; }
.puerta-arco { fill: none; stroke: var(--tinta-3); stroke-width: 2.4; stroke-dasharray: 9 7; }
.local { font-size: 42px; font-weight: 650; font-stretch: 85%; fill: var(--tinta-3); }
.cota-l { stroke: var(--tinta-2); stroke-width: 2; }
.cota-tic { stroke: var(--tinta); stroke-width: 4; }
.cota-t { font-size: 30px; font-stretch: 80%; fill: var(--tinta-2); }
.medida-l { stroke: var(--azul); stroke-width: 4; }
.medida-tic { stroke: var(--azul); stroke-width: 6; }
.medida-fondo { fill: #fff; stroke: var(--azul); stroke-width: 2.5; }
.medida-t { font-size: 30px; font-weight: 720; font-stretch: 90%; fill: var(--azul-texto); }
.provisional { opacity: .65; }
.mira { fill: none; stroke: var(--tinta-3); stroke-width: 3; }
.mira.pegada { stroke: var(--chaleco); stroke-width: 6; }
.plano-lienzo.midiendo { cursor: crosshair; }
.plano-lienzo.midiendo .pin { opacity: .3; pointer-events: none; }
.pin {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; padding: 0;
  display: grid; place-items: center; border-radius: 50%;
  border: 2px solid #fff; background: var(--tinta); color: #fff; cursor: pointer;
  box-shadow: 0 2px 6px rgba(2, 37, 79, .35);
  transition: transform .15s, box-shadow .15s, opacity .2s;
}
.pin svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pin-rfi { background: var(--azul); }
.pin-inc { background: var(--alerta); }
.pin-ins { background: var(--ok); }
.pin-pun { background: var(--tinta); }
.pin:hover { transform: scale(1.08); }
.pin[aria-pressed="true"] { box-shadow: 0 0 0 4px var(--chaleco), 0 2px 6px rgba(2, 37, 79, .35); }
.plano-lienzo:not(.listo) .pin { display: none; }
.plano-detalle { padding: 1rem; display: grid; align-content: start; gap: .4rem; }
.detalle-tipo { font-stretch: 78%; font-weight: 650; font-size: .875rem; color: var(--azul-texto); }
.detalle-titulo { font-weight: 720; font-size: 1.05rem; line-height: 1.3; }
.detalle-datos { margin: .5rem 0 0; display: grid; gap: .5rem; }
.detalle-datos dt { font-stretch: 78%; font-size: .8125rem; color: var(--tinta-2); }
.detalle-datos dd { margin: 0; font-size: .9375rem; }
.plano-pie { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--linea); }
.plano-pie .demo-pista { padding-block: .6rem; }
.plano-pie .boton-texto { margin-right: 1rem; font-size: .875rem; }

/* ---------- Demo: bodega ---------- */
.bodega-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.req { padding: 1rem; border-right: 1px solid var(--linea); display: flex; flex-direction: column; gap: .8rem; }
.req-pasos { list-style: none; margin: 0 0 .2rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.req-pasos li { position: relative; padding-top: 1.55rem; font-size: .8125rem; font-stretch: 86%; color: var(--tinta-2); }
.req-pasos li::before {
  content: ''; position: absolute; top: .2rem; left: 0; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--tinta-3); background: var(--papel); transition: background-color .3s, border-color .3s;
}
.req-pasos li::after { content: ''; position: absolute; top: calc(.2rem + 7px); left: 22px; right: 6px; height: 2px; background: var(--linea); transition: background-color .4s; }
.req-pasos li:last-child::after { display: none; }
.req-pasos li[aria-current] { color: var(--tinta); font-weight: 720; }
.req-pasos li[aria-current]::before { border-color: var(--chaleco); background: var(--chaleco); }
.req-pasos li.hecho::before { border-color: var(--tinta); background: var(--tinta); }
.req-pasos li.hecho::after { background: var(--tinta); }
.req-actividad { font-weight: 650; line-height: 1.35; }
.req-pide { font-size: .875rem; color: var(--tinta-2); margin-top: -.5rem; }
.req-items { width: 100%; border-collapse: collapse; font-size: .875rem; }
.req-items th, .req-items td { padding: .35rem 0; text-align: left; border-top: 1px solid var(--linea); font-weight: 400; }
.req-items thead th { font-stretch: 80%; font-weight: 600; color: var(--tinta-2); border-top: 0; }
.req-items .num { text-align: right; white-space: nowrap; }
.req-estado { font-size: .875rem; min-height: 1.3em; color: var(--ok); font-weight: 600; }
.req .boton { align-self: flex-start; min-height: 44px; font-size: .9375rem; }
.inv { padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.inv-titulo { font-weight: 720; }
.inv-lista { list-style: none; margin: 0 0 .6rem; padding: 0; }
.inv-lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; row-gap: .3rem; padding: .5rem 0; border-top: 1px solid var(--linea); font-size: .875rem; }
.inv-ex { white-space: nowrap; color: var(--tinta-2); }
.inv-ex b { color: var(--tinta); font-weight: 760; }
.inv-barra { grid-column: 1 / -1; position: relative; height: 7px; border-radius: 4px; background: var(--concreto-2); }
[data-bodega]:not(.listo) .inv-barra { visibility: hidden; }
.inv-lleno { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 4px; background: var(--azul); transition: width .75s cubic-bezier(.2, .8, .2, 1), background-color .3s; }
.inv-min { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--tinta); }
.inv-lista li.bajo .inv-lleno { background: var(--alerta); }
.inv-mintxt { grid-column: 1 / -1; font-size: .75rem; font-stretch: 80%; color: var(--tinta-2); }
.kardex { list-style: none; margin: 0; padding: 0; font-size: .8125rem; display: grid; gap: .3rem; }
.kardex li { padding-left: .8rem; border-left: 2px solid var(--azul); animation: entra .4s both; }
.kardex li.kardex-vacio { border-left-color: var(--linea); color: var(--tinta-2); animation: none; }
@keyframes entra { from { opacity: 0; transform: translateY(4px); } }
.alerta { margin-top: .4rem; padding: .5rem .75rem; border-left: 3px solid var(--alerta); background: var(--alerta-suave); color: var(--alerta); font-size: .875rem; font-weight: 600; }

/* Tiendas: insignias oficiales de Apple y Google donde la app ya está publicada;
   donde todavía no, un recuadro "Próximamente" SIN logos (las dos tiendas
   prohíben usar su insignia para una app que no se puede bajar). */
.tiendas { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .7rem; margin-top: 1.25rem; }
.tiendas-t { font-stretch: 84%; color: var(--tinta-2); font-size: .9375rem; margin-right: .35rem; }
.insignia { display: inline-flex; border-radius: 7px; line-height: 0; transition: transform .15s; }
.insignia:hover { transform: translateY(-1px); }
.insignia img { display: block; height: 40px; width: auto; }
.insignia-pronto {
  display: inline-flex; flex-direction: column; justify-content: center; height: 40px; padding: 0 .9rem;
  border: 1.5px dashed var(--tinta-3); border-radius: 7px; line-height: 1.1; color: var(--tinta-2);
}
.pronto-t { font-size: .6875rem; font-stretch: 84%; font-weight: 600; }
.pronto-n { font-size: .9375rem; font-weight: 720; color: var(--tinta); }
.pie-pronto { margin-left: .4rem; color: var(--tinta-3); }
.pie-apps p { font-weight: 650; color: var(--tinta); }
.pie-apps li a { margin-left: .4rem; }

/* ---------- Circuito ---------- */
.circuito { position: relative; padding: clamp(56px, 7vw, 96px) var(--lado); }
.circuito::before, .nosotros::before, .contacto::before { content: ''; position: absolute; top: 0; left: var(--lado); right: var(--lado); border-top: 1.5px solid var(--tinta); }
.circuito-cabeza { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 4vw, 64px); align-items: end; }
.circuito-pasos { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.circuito-pasos li { position: relative; padding-top: 3.4rem; }
.circuito-pasos li p { color: var(--tinta-2); margin-top: .45rem; max-width: 34ch; }
.paso-num {
  position: absolute; top: 0; left: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center; border: 2px solid var(--tinta); background: var(--concreto);
  font-weight: 800; font-stretch: 100%;
}
.circuito-pasos li::before { content: ''; position: absolute; top: 1.15rem; left: 3rem; right: -1rem; border-top: 2px dashed var(--tinta-3); }
.circuito-pasos li:last-child::before { display: none; }

/* ---------- IA ---------- */
.ia { background: var(--tinta); color: #EAF2FB; padding: clamp(56px, 8vw, 112px) var(--lado); }
.ia-dentro { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.ia-nombre { font-stretch: 80%; font-weight: 650; color: var(--cielo); margin-bottom: 1.1rem; }
.ia .lead { color: #B7CAE2; margin-top: 1.4rem; }
.lista-clara > div { border-top-color: rgba(234, 242, 251, .16); }
.lista-clara > div:last-child { border-bottom-color: rgba(234, 242, 251, .16); }
.lista-clara dd { color: #B7CAE2; }
.ia :focus-visible { outline-color: var(--cielo); }

/* ---------- Planes ---------- */
.planes { padding: clamp(56px, 7vw, 96px) var(--lado) clamp(48px, 6vw, 80px); }
.planes-cabeza { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 4vw, 64px); align-items: end; }
.planes-controles { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin: clamp(28px, 3.5vw, 44px) 0 1.25rem; }
.planes-ver { display: none; margin-bottom: .75rem; }
.planes-envoltura { overflow-x: auto; }
.planes-tabla {
  width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; table-layout: fixed;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 10px; box-shadow: var(--sombra);
}
.planes-tabla th, .planes-tabla td { padding: .8rem 1.1rem; text-align: left; vertical-align: top; border-top: 1px solid var(--linea); font-weight: 400; }
.planes-tabla thead th, .planes-tabla thead td { border-top: 0; padding-top: 1.3rem; }
.planes-tabla tbody th { width: 27%; color: var(--tinta-2); font-weight: 520; }
.planes-tabla [data-col="1"] { background: rgba(255, 176, 0, .07); }
.plan-nombre { display: block; font-size: 1.375rem; font-weight: 800; font-stretch: 112%; line-height: 1.1; }
.plan-marca { display: inline-block; margin-top: .4rem; padding: .08rem .45rem; border-radius: 3px; background: var(--chaleco); font-size: .75rem; font-weight: 680; font-stretch: 84%; }
.fila-precio th { padding-top: 1.05rem !important; }
.monto { display: block; font-size: clamp(1.7rem, 1.35rem + 1vw, 2.35rem); font-weight: 800; font-stretch: 108%; line-height: 1.1; border-radius: 4px; }
.por { font-size: .875rem; color: var(--tinta-2); }
.equiv { display: block; min-height: 1.3em; font-size: .8125rem; font-stretch: 86%; color: var(--tinta-2); }
.cifra { font-weight: 720; font-size: 1.0625rem; }
.si svg, .no svg { display: block; width: 22px; height: 22px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.si svg { stroke: var(--ok); }
.no svg { stroke: var(--tinta-3); }
.fila-cta td { padding-bottom: 1.3rem; }
.fila-cta .boton { width: 100%; }
.planes-nota { margin-top: 1rem; font-weight: 600; }
.planes-letra { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .35rem; font-size: .9375rem; color: var(--tinta-2); max-width: 80ch; }

/* ---------- Nosotros ---------- */
.nosotros {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 88px); align-items: start;
  position: relative; padding: clamp(56px, 7vw, 96px) var(--lado);
}
.nosotros-texto .lead { margin: 1.5rem 0 1rem; }
.nosotros-texto > p:not(.lead) { color: var(--tinta-2); max-width: 62ch; margin-bottom: 2rem; }
.mapa { margin: 0; position: sticky; top: 92px; }
.mapa-svg { display: block; width: 100%; height: auto; background: var(--papel); border-radius: 8px; }
.pais { fill: var(--concreto-2); stroke: var(--papel); stroke-width: .9; transition: fill .2s; }
.pais-si { fill: var(--azul); }
.pais-si.senalado { fill: var(--tinta); }
.reticula { fill: none; stroke: var(--tinta-3); stroke-width: .7; stroke-dasharray: 2 4; }
.grado { font-family: 'Archivo', sans-serif; font-size: 11px; font-stretch: 75%; fill: var(--tinta-2); }
.rotulo-mapa text { font-family: 'Archivo', sans-serif; font-size: 15px; font-weight: 720; font-stretch: 92%; fill: var(--tinta); paint-order: stroke; stroke: var(--papel); stroke-width: 3.5px; stroke-linejoin: round; }
.rotulo-mapa text.fin { text-anchor: end; }
.rotulo-mapa.senalado text { fill: var(--azul-texto); }
.guia-mapa { fill: none; stroke: var(--tinta); stroke-width: 1; }
.punto circle { fill: var(--chaleco); stroke: var(--tinta); stroke-width: 2; transition: r .2s; }
.punto.senalado circle { r: 12; }
.punto path { stroke: var(--tinta); stroke-width: 1.5; fill: none; }
.escala path { stroke: var(--tinta); stroke-width: 2; fill: none; }
.escala text { font-family: 'Archivo', sans-serif; font-size: 11px; font-stretch: 80%; text-anchor: middle; fill: var(--tinta); }
.marco { fill: none; stroke: var(--linea); }
.mapa figcaption { margin-top: .9rem; }
.mapa-titulo { font-stretch: 80%; font-weight: 650; color: var(--tinta-2); font-size: .875rem; }
.mapa-lista { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: .4rem 0 0; padding: 0; }
.mapa-lista li { font-weight: 650; border-radius: 3px; }
.mapa-lista li span { font-weight: 450; font-stretch: 84%; color: var(--tinta-2); margin-left: .25rem; }
.mapa-lista li.senalado { color: var(--azul-texto); }

/* ---------- Contacto y pie ---------- */
.contacto { position: relative; padding: clamp(56px, 7vw, 96px) var(--lado) clamp(64px, 8vw, 112px); }
.contacto .lead { margin: 1.25rem 0 2rem; }
.contacto-correo { margin-bottom: 1.25rem; }
.contacto-correo a {
  display: inline-block; color: var(--tinta); text-decoration: none; overflow-wrap: anywhere;
  font-size: clamp(1.6rem, .9rem + 4.2vw, 4.4rem); font-weight: 800; font-stretch: 114%; line-height: 1.05;
  background: linear-gradient(var(--chaleco), var(--chaleco)) 0 94% / 100% .14em no-repeat;
  transition: background-size .25s;
}
.contacto-correo a:hover { background-size: 100% .5em; }
.contacto-apps { margin-top: 2.5rem; }
.contacto-apps p { color: var(--tinta-2); font-size: .9375rem; }
.contacto-apps ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.75rem; margin: .4rem 0 0; padding: 0; font-weight: 600; }
.pie { padding: 2.25rem var(--lado) 2.5rem; border-top: 1px solid var(--linea); font-size: .875rem; color: var(--tinta-2); display: grid; gap: 1.25rem; }
.pie-fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.pie-fila img { height: 30px; width: auto; display: block; }
.pie-lema { font-weight: 650; color: var(--tinta); }
.pie ul { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; list-style: none; margin: 0; padding: 0; }
.pie a { color: var(--tinta-2); }
.pagina-404 main { min-height: 100svh; display: grid; place-content: center; gap: 1rem; padding: var(--margen); }

/* ---------- Pantallas medianas ---------- */
@media (max-width: 1280px) {
  .pila { --s: 214px; --h: 88px; }
  .pila.abierta { --h: 124px; }
}
@media (max-width: 1080px) {
  .nivel-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .nivel-cuerpo .lista-tecnica { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
  .nivel-cuerpo .lista-tecnica > div:last-child { border-bottom: 0; }
  .nivel-cuerpo .demo { order: -1; }
}
@media (max-width: 960px) {
  .menu, .cabecera-acciones .desplegable { display: none; }
  .menu-boton { display: inline-flex; align-items: center; }
  .cabecera.menu-abierto .menu-movil { display: grid; padding: .25rem var(--lado) 1.25rem; max-height: calc(100svh - 68px); overflow-y: auto; }
  .menu-movil a { padding: .8rem 0; font-size: 1.125rem; font-weight: 650; color: var(--tinta); text-decoration: none; border-bottom: 1px solid var(--linea); }
  .menu-movil a[aria-current] { box-shadow: none; }
  .menu-movil-idiomas { padding-top: 1rem; }
  .menu-movil-idiomas a { font-size: 1rem; font-weight: 500; border: 0; padding: 0; color: var(--tinta-2); }
  .portada { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pila { --s: 210px; --h: 70px; max-width: 560px; margin-inline: auto; width: 100%; }
  .pila.abierta { --h: 100px; }
  .pila-escena { height: 470px; }
  .nivel-cabeza, .circuito-cabeza, .planes-cabeza { grid-template-columns: minmax(0, 1fr); }
  .ia-dentro, .nosotros { grid-template-columns: minmax(0, 1fr); }
  .mapa { position: static; max-width: 560px; }
}

/* ---------- Teléfono ---------- */
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .cabecera-fila { gap: .75rem; height: 60px; }
  .marca img { height: 26px; }
  section[id] { scroll-margin-top: 64px; }
  /* En el teléfono la pila va entre el titular y el texto: entra en la primera pantalla. */
  .portada { gap: 0; padding-top: 20px; }
  .portada-texto { display: contents; }
  .titular { order: 1; }
  .pila { order: 2; margin-top: -24px; }
  .portada-texto .lead { order: 3; margin-top: 1.25rem; }
  .portada-texto .acciones { order: 4; }
  .nota { order: 5; }
  .pila { --s: 168px; --t: 13px; --h: 56px; grid-template-columns: minmax(0, 1fr); }
  .pila.abierta { --h: 80px; }
  .pila-escena { height: 330px; }
  .pila-mundo { transform: translateY(44px) rotateX(var(--rx)) rotateZ(var(--rz)); }
  .pila-lineas { display: none; }
  .pila-rotulos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: -8px; }
  .rotulo { padding: .4rem .3rem; border-top: 1.5px solid var(--tinta); border-radius: 0; }
  .rotulo-n { font-size: .9375rem; }
  .rotulo-d { font-size: .8125rem; line-height: 1.3; }
  .pila-pista { display: none; }
  .nivel-cuerpo .lista-tecnica { grid-template-columns: minmax(0, 1fr); }
  .nivel-cuerpo .lista-tecnica > div:last-child { border-bottom: 1px solid var(--linea); }
  .apu-u { display: none; }
  .apu-u-movil { display: block; font-size: .75rem; font-stretch: 84%; color: var(--tinta-2); }
  .apu-tabla { font-size: .8125rem; }
  .apu-tabla th, .apu-tabla td { padding-inline: .2rem; }
  .apu-tabla th:first-child { padding-left: .7rem; }
  .apu-tabla td:last-child { padding-right: .7rem; }
  .apu-tabla thead th { font-size: .75rem; }
  .celda { width: 3.9em; padding-inline: .2rem; }
  .apu-pct .celda { width: 2.6em; }
  .apu-calc { padding-right: .45rem !important; }
  .apu-pu th, .apu-pu td { font-size: .9375rem; }
  .apu-total output { font-size: 1.25rem; }
  .plano-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .plano-lienzo { border-right: 0; border-bottom: 1px solid var(--linea); }
  .pin { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
  .pin svg { width: 17px; height: 17px; }
  .bodega-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .req { border-right: 0; border-bottom: 1px solid var(--linea); }
  .circuito-pasos { grid-template-columns: minmax(0, 1fr); }
  .circuito-pasos li { padding: 0 0 0 3.4rem; min-height: 2.6rem; }
  .circuito-pasos li::before { top: 2.9rem; bottom: -1.5rem; left: 1.15rem; right: auto; border-top: 0; border-left: 2px dashed var(--tinta-3); }
  .planes-ver { display: inline-flex; }
  .planes-tabla { min-width: 0; table-layout: auto; }
  .planes-tabla tbody th { width: 46%; }
  .planes-tabla[data-ver="1"] [data-col]:not([data-col="1"]),
  .planes-tabla[data-ver="2"] [data-col]:not([data-col="2"]),
  .planes-tabla[data-ver="3"] [data-col]:not([data-col="3"]) { display: none; }
  .planes-tabla thead td { padding: 0; width: 46%; }
  .planes-tabla th, .planes-tabla td { padding: .7rem .8rem; }
  .planes-tabla tbody th, .planes-tabla thead td { width: 42%; }
  .fila-cta .boton { padding: 0 .6rem; white-space: nowrap; }
  .planes-controles .segmento { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .planes-controles .segmento button { line-height: 1.2; padding-block: .45rem; }
  .contacto-correo a { font-size: 1.45rem; font-stretch: 100%; }
}
@media (max-width: 400px) {
  .cabecera-probar { display: none; }
  .tiendas-t { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
}