/* Install Tech — sitio. Pensado para que lo lea bien gente grande: letra grande, mucho
   contraste, botones grandes y nada que haya que adivinar. */

:root {
  --azul: #5390c9;
  --azul-oscuro: #1f5f93;
  --noche: #0b1f33;
  --noche-2: #071526;
  --senal: #16a5e8;
  --verde: #22c55e;
  --tinta: #0f172a;
  --tinta-2: #334155;
  --papel: #f5f9fd;
  --blanco: #ffffff;
  --fuente: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  --radio: 14px;
  --cabecera: 76px;
  --sombra-texto: 0 2px 18px rgba(4, 12, 24, .55);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--cabecera); }
body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--papel);
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--senal); outline-offset: 3px; border-radius: 6px; }

.saltar-al-contenido {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--blanco); color: var(--tinta); padding: 10px 16px; border-radius: 10px;
  font-weight: 700; text-decoration: none;
}
.saltar-al-contenido:focus { top: 12px; }

/* ------------------------------------------------------------- cabecera */

.cabecera {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: var(--cabecera);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(16px, 3.5vw, 48px);
  background: linear-gradient(180deg, rgba(4, 12, 24, .55), rgba(4, 12, 24, 0));
  transition: background .4s ease, box-shadow .4s ease;
}
.cabecera.con-fondo {
  background: rgba(7, 21, 38, .94);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
.marca { display: block; flex: none; width: clamp(96px, 9vw, 122px); }
.marca img { width: 100%; height: auto; }
.cabecera-acciones { display: flex; align-items: center; gap: clamp(10px, 2vw, 26px); }
.enlace-cabecera {
  color: var(--blanco); text-decoration: none; font-weight: 700; font-size: 1.05rem;
  padding: 8px 4px; text-shadow: var(--sombra-texto);
}
.enlace-cabecera:hover { text-decoration: underline; text-underline-offset: 5px; }
/* con los productos (14/10/2026) la cabecera entera mide unos 1.125 px: en las compus más chicas
   los enlaces se van de a poco, primero los que repiten un botón del inicio; los productos, al
   final (medido de 761 a 1920 de ancho) */
@media (max-width: 1459px) { .enlace-cabecera[href="#preguntas"] { display: none; } }
@media (max-width: 1299px) { .enlace-cabecera[href="#llave"], .enlace-cabecera[href="#presupuesto"] { display: none; } }
@media (max-width: 979px) { .enlace-cabecera[href="#abono"] { display: none; } }
@media (max-width: 889px) { .enlace-cabecera[href="#videoporteros"] { display: none; } }
.boton-whatsapp {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 18px 0 14px; border-radius: 999px;
  background: #1faa53; color: var(--blanco); text-decoration: none; font-weight: 700;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.boton-whatsapp svg { width: 24px; height: 24px; fill: currentColor; }
.boton-whatsapp:hover { background: #1c9a4b; }
/* "Teléfonos": baja a las tres líneas de "Hablemos". Al lado del WhatsApp y sin competirle */
.boton-telefonos {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 0 16px 0 13px; border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .75); background: rgba(7, 21, 38, .35);
  color: var(--blanco); text-decoration: none; font-weight: 700;
}
.boton-telefonos svg { width: 20px; height: 20px; fill: currentColor; }
.boton-telefonos:hover { background: rgba(255, 255, 255, .14); }

/* ------------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--noche-2);
  color: var(--blanco);
  isolation: isolate;
}
.escena { position: absolute; inset: 0; z-index: -1; }
.escena-foto {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 50%;
  /* mismo encuadre que el canvas (escena.js: FOCO y zoom 1.045), para que no salte al aparecer */
  transform: scale(1.045); transform-origin: 62% 50%;
}
.escena-gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; }
.escena.gl-lista .escena-gl { opacity: 1; }
/* velo: garantiza el contraste del texto pase lo que pase en la imagen */
.escena-velo {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7, 21, 38, .9) 0%, rgba(7, 21, 38, .78) 28%, rgba(7, 21, 38, .36) 44%, rgba(7, 21, 38, 0) 57%),
    linear-gradient(0deg, rgba(7, 21, 38, .45) 0%, rgba(7, 21, 38, 0) 18%);
}

.hero-texto {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--cabecera) + 16px) clamp(20px, 5vw, 80px) clamp(56px, 8vh, 80px);
  max-width: min(900px, 60vw);
}
.hero-texto > * { max-width: 760px; }
.antetitulo {
  margin: 0 0 18px;
  font-size: 1.05rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #b8d6f2;
}
.antetitulo::before {
  content: ""; display: inline-block; width: 28px; height: 3px; border-radius: 2px;
  background: var(--azul); margin-right: 12px; vertical-align: .32em;
}
h1 {
  margin: 0;
  font-size: clamp(2.3rem, 0.9rem + 2.9vw, 3.9rem);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -.015em;
  text-shadow: var(--sombra-texto);
}
h1 .linea { display: block; text-wrap: balance; }
.bajada {
  margin: clamp(14px, 2.6vh, 22px) 0 0;
  font-size: clamp(1.2rem, 1rem + .55vw, 1.5rem);
  line-height: 1.45;
  color: #e3edf7;
  max-width: 34ch;
  text-shadow: var(--sombra-texto);
}
.acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(22px, 4.2vh, 36px); }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 62px; padding: 0 30px; border-radius: var(--radio);
  font: 700 1.2rem/1.2 var(--fuente); text-decoration: none; text-align: center;
  cursor: pointer; border: 2px solid transparent;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.boton:active { transform: translateY(1px) scale(.99); }
.boton-principal {
  background: var(--azul); color: var(--blanco);
  box-shadow: 0 10px 30px rgba(83, 144, 201, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.boton-principal:hover { background: #4a86bd; }
.boton-secundario {
  background: rgba(255, 255, 255, .08); color: var(--blanco); border-color: rgba(255, 255, 255, .75);
  backdrop-filter: blur(6px);
}
.boton-secundario:hover { background: rgba(255, 255, 255, .16); }
.icono-llavero { width: 30px; height: 30px; color: #2b5fb4; flex: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .3)); }
.boton-principal .icono-llavero { color: #1d3f86; }
.hablar { margin: 24px 0 0; font-size: 1.1rem; color: #d3e2f0; text-shadow: var(--sombra-texto); }
.hablar a { color: var(--blanco); font-weight: 700; text-underline-offset: 4px; }
/* un teléfono no se corta entre dos renglones */
.numero { white-space: nowrap; }

.seguir {
  position: absolute; left: 50%; bottom: 20px; width: 34px; height: 54px; margin-left: -17px;
  border: 2px solid rgba(255, 255, 255, .7); border-radius: 20px;
}
.seguir span {
  position: absolute; left: 50%; top: 10px; width: 4px; height: 10px; margin-left: -2px;
  border-radius: 2px; background: var(--blanco); animation: seguir 1.8s ease-in-out infinite;
}
@keyframes seguir { 0%, 100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(16px); opacity: 0; } }

/* ------------------------------------------------------------- equipos que se tocan */

/* capas del hero: la escena abajo, los carteles en el medio y el texto arriba (el texto deja
   pasar los toques salvo en sus propios elementos) */
.hero-texto { z-index: 2; pointer-events: none; }
.hero-texto > * { pointer-events: auto; }
/* en la compu cada bloque del texto mide lo que su texto, no todo el ancho: estiradas, sus cajas
   invisibles quedaban encima de las tarjetas de la cámara y de la cerradura, y una parte de cada
   tarjeta no se podía tocar (a 1440 × 900, un tercio de la de la cámara; 12/10/2026). En el
   celular no: los botones van a todo el ancho y las etiquetas no se acercan al texto */
@media (min-aspect-ratio: 4/5) and (min-width: 761px) {
  .hero-texto { align-items: flex-start; }
}
.carteles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cartel {
  position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; margin: 0;
  border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  will-change: transform; opacity: 0;
}
.carteles.visibles .cartel { pointer-events: auto; }
.cartel-punto {
  position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--blanco); box-shadow: 0 0 0 5px rgba(83, 144, 201, .6), 0 3px 12px rgba(0, 0, 0, .5);
}
.cartel-punto::before {
  content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--azul);
}
.cartel-punto::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .95); animation: latido 2.2s ease-out infinite;
}
@keyframes latido { 0% { transform: scale(1); opacity: .95; } 100% { transform: scale(2.8); opacity: 0; } }
.cartel-linea { position: absolute; left: 0; top: -1px; height: 2px; transform-origin: 0 50%; pointer-events: none; }
.cartel-linea i {
  display: block; width: 100%; height: 100%; transform-origin: 0 50%;
  background: rgba(255, 255, 255, .95); box-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}
.cartel-tarjeta {
  position: absolute; display: flex; align-items: center; gap: 12px;
  padding: 9px 16px 9px 9px; border-radius: 18px; white-space: nowrap; text-align: left;
  background: rgba(255, 255, 255, .97); color: var(--tinta);
  box-shadow: 0 14px 36px rgba(3, 10, 20, .42), inset 0 0 0 1px rgba(255, 255, 255, .7);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.cartel-icono {
  flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: linear-gradient(155deg, #64a2dc 0%, #2f6aa6 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 10px rgba(47, 106, 166, .35);
}
.cartel-icono svg { width: 30px; height: 30px; }
.cartel-textos { display: grid; gap: 3px; }
.cartel-titulo { font-weight: 800; font-size: 1.05rem; line-height: 1.15; color: var(--noche); }
.cartel-accion {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content;
  font-weight: 700; font-size: .98rem; color: #1f5f93;
}
.cartel-accion svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.cartel:hover .cartel-tarjeta, .cartel:focus-visible .cartel-tarjeta {
  transform: translateY(-3px); box-shadow: 0 18px 44px rgba(3, 10, 20, .5), inset 0 0 0 2px rgba(83, 144, 201, .8);
}
.cartel:hover .cartel-accion svg { transform: translateX(4px); }
/* el saludo del operador, a la izquierda del punto del tótem, con el mouse encima (escena.js) */
.cartel-hola {
  position: absolute; right: 20px; bottom: 14px; padding: 9px 15px; border-radius: 16px 16px 4px 16px;
  white-space: nowrap; pointer-events: none; opacity: 0; transform: translateY(6px);
  background: rgba(255, 255, 255, .97); color: var(--noche); font-weight: 800; font-size: 1.02rem;
  box-shadow: 0 12px 30px rgba(3, 10, 20, .42); transition: opacity .25s ease, transform .25s ease;
}
.cartel:hover .cartel-hola { opacity: 1; transform: none; transition-delay: .15s; }
.cartel:focus-visible { outline: none; }
.cartel:focus-visible .cartel-tarjeta { outline: 3px solid var(--senal); outline-offset: 3px; }

/* el llavero: no está en la foto, es el llavero renderizado que se apoya en el lector y queda
   al lado, hamacándose (se toca para pedir uno). La cara redonda va sobre el punto de anclaje. */
.figura-llavero {
  --ancho: clamp(46px, 3.9vw, 66px);
  position: absolute; left: 0; top: 0; width: var(--ancho); height: calc(var(--ancho) * 1.81);
  margin-left: calc(var(--ancho) / -2); margin-top: calc(var(--ancho) * -1.27);
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55)) drop-shadow(0 0 1px rgba(255, 255, 255, .5));
}
.figura-llavero img {
  width: 100%; height: 100%; transform-origin: 50% 8%;
  animation: hamaca 3.2s ease-in-out infinite;
}
.figura-llavero::after {
  content: ""; position: absolute; left: 50%; top: 70%; width: 70%; aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%); border: 2px solid rgba(255, 255, 255, .9);
  animation: latido-llavero 2.2s ease-out infinite; pointer-events: none;
}
@keyframes hamaca { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes latido-llavero { 0% { transform: translate(-50%, -50%) scale(1); opacity: .9; } 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } }
.cartel:hover .figura-llavero img, .cartel:focus-visible .figura-llavero img { animation-duration: 1.2s; }

/* la luz del lector: en el hero el LED es más chico que un píxel, así que la web lo dibuja
   (rojo en reposo; verde cuando se apoya el llavero) */
.led-lector { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; }
.led-lector::before {
  content: ""; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle, #ffe2d8 0 12%, #ff3b24 28%, rgba(255, 45, 20, .5) 50%, rgba(255, 45, 20, 0) 74%);
  transition: opacity .12s ease;
}
.led-lector.verde::before { opacity: 0; }
.led-lector i {
  position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #f2fff5 0 12%, #3ee774 24%, rgba(34, 197, 94, .55) 44%, rgba(34, 197, 94, 0) 72%);
}

/* la pista: que se entienda que la imagen se toca */
.pista {
  position: absolute; z-index: 1; right: clamp(16px, 3vw, 40px); bottom: clamp(18px, 4vh, 36px); margin: 0;
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 14px; border-radius: 999px;
  background: rgba(7, 21, 38, .72); color: var(--blanco); font-weight: 700; font-size: 1.02rem;
  backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(0, 0, 0, .3); opacity: 0;
  pointer-events: none;
}
.pista svg { width: 26px; height: 26px; fill: none; stroke: #9fd0ff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: tocar 1.8s ease-in-out infinite; }
@keyframes tocar { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(3px) scale(.94); } }

/* la manito que toca la etiqueta del tótem (escena.js la pone, main.js la hace tocar): entra, toca
   tres veces con un anillo en la yema y se va. La etiqueta se hunde un poco con cada toque. Abajo
   a la derecha de la etiqueta, con el dedo adentro y la mano colgando debajo */
.mano-pista {
  position: absolute; right: 12px; top: calc(100% - 18px); width: 52px; height: 52px;
  pointer-events: none; opacity: 0; transform-origin: 39% 8%;
  filter: drop-shadow(0 5px 8px rgba(3, 10, 20, .5));
}
.mano-pista svg { width: 100%; height: 100%; overflow: visible; fill: var(--blanco); stroke: var(--noche); stroke-width: 1.5; stroke-linejoin: round; }
.mano-pista::before {
  content: ""; position: absolute; left: 7px; top: -9px; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--azul); background: rgba(83, 144, 201, .25); opacity: 0;
}
.mano-pista.toca { animation: mano-toca 4.4s ease-in-out 1; }
.mano-pista.toca::before { animation: mano-onda 4.4s ease-out 1; }
.cartel-tarjeta:has(.mano-pista.toca) { animation: mano-hunde 4.4s ease-in-out 1; }
@keyframes mano-toca {
  0% { opacity: 0; transform: translate(16px, 18px); }
  12% { opacity: 1; transform: none; }
  20%, 42%, 64% { transform: scale(.86); }
  26%, 48%, 70% { transform: none; }
  86% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translate(12px, 14px); }
}
@keyframes mano-onda {
  0%, 19%, 41%, 63% { opacity: 0; transform: scale(.4); }
  20%, 42%, 64% { opacity: 1; transform: scale(.5); }
  31%, 53%, 75%, 100% { opacity: 0; transform: scale(1.7); }
}
@keyframes mano-hunde { 0%, 19%, 26%, 41%, 48%, 63%, 70%, 100% { transform: none; } 21%, 43%, 65% { transform: scale(.97); } }
.carteles:not(.visibles) .mano-pista { display: none; }

/* ------------------------------------------------------------- el primer plano de cada equipo */

.detalle { position: fixed; inset: 0; z-index: 35; background: var(--noche-2); color: var(--blanco); }
.detalle[hidden] { display: none; }
.detalle-fotos { position: absolute; inset: 0; overflow: hidden; }
.detalle-fotos img, .detalle-fotos video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* el video de la puerta va encima de la foto, con el mismo encuadre (detalle.js) */
.detalle-fotos video { pointer-events: none; }
.detalle-fotos.se-toca { cursor: pointer; }
/* "Tocá", chiquito, sobre el barral de la puerta en el primer plano de la cerradura */
.puerta-pista {
  position: absolute; z-index: 3; left: 0; top: 0; display: inline-flex; align-items: center; gap: 7px;
  min-height: 28px; padding: 3px 11px 3px 6px; border-radius: 999px; cursor: pointer; opacity: 0;
  border: 1px solid rgba(255, 255, 255, .3); background: rgba(7, 21, 38, .72); color: var(--blanco);
  font: 700 .86rem var(--fuente); backdrop-filter: blur(6px); box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}
.puerta-pista:hover { background: rgba(18, 44, 74, .9); }
.puerta-pista-punto {
  position: relative; flex: none; width: 12px; height: 12px; border-radius: 50%;
  background: var(--blanco); box-shadow: 0 0 0 3px rgba(83, 144, 201, .6);
}
.puerta-pista-punto::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .95); animation: latido 2.2s ease-out infinite;
}
/* el operador de la central, calzado sobre la pantalla del tótem (operador.js): la caja mide lo
   que el video y se lleva a las cuatro esquinas con matrix3d */
.detalle-fotos .operador {
  position: absolute; left: 0; top: 0; width: 1028px; height: 772px; transform-origin: 0 0;
  opacity: 0; cursor: pointer; border-radius: 10px; overflow: hidden;
}
.detalle-fotos .operador video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.detalle-fotos .operador .operador-saludo { opacity: 0; }
.operador-globo {
  position: absolute; z-index: 3; left: 0; top: 0; max-width: min(320px, calc(100vw - 32px));
  padding: 14px 20px 15px; border-radius: 18px 18px 6px 18px; opacity: 0; pointer-events: none;
  background: rgba(255, 255, 255, .97); color: var(--noche); box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
  font-family: var(--fuente);
}
.operador-globo strong { display: block; font-size: 1.4rem; line-height: 1.2; }
.operador-globo span { display: block; margin-top: 4px; font-size: 1.02rem; line-height: 1.3; color: #3a5068; }
/* los videos que todavía no se ven (algunos teléfonos no decodifican un video fuera de la página) */
.videos-ocultos {
  position: fixed; left: 0; top: 0; width: 2px; height: 2px; overflow: hidden; opacity: .01;
  pointer-events: none; z-index: -1;
}
.videos-ocultos video { width: 2px; height: 2px; }
.detalle-velo {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 21, 38, .92) 0%, rgba(7, 21, 38, .8) 30%, rgba(7, 21, 38, .2) 52%, rgba(7, 21, 38, 0) 64%);
}
.detalle-panel {
  position: absolute; z-index: 4; left: 0; top: 0; bottom: 0; width: min(560px, 46vw);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--cabecera) + 12px) clamp(20px, 4vw, 64px) 40px;
}
.detalle-panel h2 { color: var(--blanco); margin: 0 0 14px; font-size: clamp(2rem, 1.2rem + 2.2vw, 3.1rem); text-shadow: var(--sombra-texto); }
.detalle-cuerpo { font-size: clamp(1.15rem, 1rem + .4vw, 1.35rem); color: #e3edf7; line-height: 1.5; }
/* si el texto no entra (una notebook de 768 de alto, en la cerradura y el tótem), se desliza el
   cuerpo adentro del panel, como en el celular: centrado con flex, todo se salía parejo por arriba
   y por abajo, el "Volver" quedaba debajo del logo y los botones fuera de la pantalla (09/10/2026) */
.detalle-panel > .detalle-volver, .detalle-panel > h2, .detalle-panel > .antetitulo, .detalle-acciones { flex: none; }
.detalle-cuerpo { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.detalle-cuerpo::-webkit-scrollbar { display: none; }
.detalle-cuerpo.hay-mas {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent);
}
.detalle-cuerpo p { margin: 0 0 14px; }
.detalle-cuerpo ol, .detalle-cuerpo ul { margin: 0 0 14px; padding-left: 1.3em; }
.detalle-cuerpo li { margin: 6px 0; }
.detalle-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.detalle-volver {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px;
  min-height: 48px; padding: 0 18px 0 12px; border-radius: 999px; cursor: pointer;
  border: 2px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .08); color: var(--blanco);
  font: 700 1.05rem var(--fuente);
}
.detalle-volver svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.detalle-volver:hover { background: rgba(255, 255, 255, .16); }
.llavero-vuela {
  position: absolute; left: 0; top: 0; z-index: 3; width: clamp(110px, 12vw, 190px); height: auto; pointer-events: none;
  filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .55));
}
/* las partes de la cerradura, señaladas sobre la foto */
.partes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.parte { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.parte-punto {
  position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--blanco); box-shadow: 0 0 0 4px rgba(83, 144, 201, .55), 0 2px 8px rgba(0, 0, 0, .5);
}
.parte-linea {
  position: absolute; left: 0; top: -1px; height: 2px; transform-origin: 0 50%;
  background: rgba(255, 255, 255, .95); box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.parte-texto {
  position: absolute; white-space: nowrap; padding: 7px 13px; border-radius: 12px;
  background: rgba(7, 21, 38, .82); color: var(--blanco); font-weight: 700; font-size: 1.02rem; line-height: 1.25;
  backdrop-filter: blur(6px); box-shadow: 0 8px 22px rgba(0, 0, 0, .35); border: 1px solid rgba(255, 255, 255, .22);
}
.parte-texto small { display: block; font-weight: 500; font-size: .9rem; color: #c9dcee; }
/* con el celular acostado no queda alto para señalar las partes: los carteles se montaban sobre el
   título y sobre el "Tocá" de la puerta (12/10/2026). Queda la foto, y la puerta se abre igual */
@media (max-width: 760px) and (max-height: 450px) {
  .detalle .partes { display: none; }
}

.aviso-listo {
  display: inline-flex; align-items: center; gap: 10px; margin: 4px 0 6px; padding: 8px 14px;
  border-radius: 12px; background: rgba(34, 197, 94, .16); color: #b9f5cf; font-weight: 700;
  border: 1px solid rgba(34, 197, 94, .45);
}
.hablar-chico { font-size: 1.05rem; color: #c9dcee; }
.hablar-chico a { color: var(--blanco); font-weight: 700; text-underline-offset: 4px; white-space: nowrap; }

/* ------------------------------------------------------------- el pedido de llavero, paso a paso */

/* el panel arriba (no centrado: que la pregunta no salte de lugar entre un paso y otro) */
.con-pedido .detalle-panel {
  justify-content: flex-start; width: min(600px, 50vw); overflow-y: auto; overscroll-behavior: contain;
  padding-top: calc(var(--cabecera) + clamp(14px, 6vh, 64px)); padding-bottom: 0;
  /* sin barra: en una notebook (1366 × 657) quedaba la barra blanca de Windows en medio de la foto.
     Que sigue se ve igual: la última opción queda cortada debajo del pie (12/10/2026) */
  scrollbar-width: none;
  /* lo que se trae a la vista con el foco queda entre la cabecera y el pie con "Seguir" y "Atrás"
     (formulario.js mide el pie): antes el campo quedaba debajo del pie (12/10/2026) */
  scroll-padding: calc(var(--cabecera) + 8px) 0 calc(var(--alto-pie, 120px) + 12px);
}
.con-pedido .detalle-panel::-webkit-scrollbar { display: none; }
.con-pedido .detalle-velo {
  background: linear-gradient(90deg, rgba(7, 21, 38, .95) 0%, rgba(7, 21, 38, .86) 34%, rgba(7, 21, 38, .25) 56%, rgba(7, 21, 38, 0) 68%);
}
.con-pedido .detalle-volver { margin-bottom: 18px; }
.detalle-panel > [hidden] { display: none; }
.pedido[hidden] { display: none; }
.pedido-progreso { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; font-weight: 700; color: #b8d6f2; }
.pedido-barra { flex: 1; max-width: 220px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.pedido-barra i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--azul); transition: width .45s ease; }
.pedido-campos { border: 0; margin: 0; padding: 0; min-width: 0; }
.pedido-pregunta {
  float: none; width: 100%; padding: 0; margin: 0 0 10px;
  font-size: clamp(1.75rem, 1.15rem + 1.5vw, 2.45rem); line-height: 1.12; font-weight: 800; color: var(--blanco);
  text-shadow: var(--sombra-texto); text-wrap: balance;
}
.pedido-pregunta:focus { outline: none; }
.pedido-ayuda { margin: 0 0 6px; font-size: 1.15rem; color: #d3e2f0; line-height: 1.45; }
.pedido-destacado {
  margin: 0 0 22px; padding: 14px 16px; border-radius: 14px; font-size: 1.12rem; line-height: 1.45;
  background: rgba(34, 197, 94, .13); border: 1px solid rgba(34, 197, 94, .5); color: #dcfce7;
}
.pedido-destacado strong { color: var(--blanco); }

/* las opciones: botones grandes que se eligen con un toque */
.opciones { display: grid; gap: 10px; margin-top: 16px; }
.opcion { display: block; position: relative; cursor: pointer; }
/* la casilla de verdad, invisible, ocupa toda la opción (sin recibir el toque, que va a la etiqueta):
   al llegar con el teclado, el navegador trae a la vista lo que ella ocupa, y con un píxel en la
   esquina la opción quedaba medio debajo del pie con "Seguir" (12/10/2026). Igual en .item y .ficha */
.opcion input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.opcion-caja {
  display: flex; align-items: center; gap: 14px; min-height: 66px; padding: 11px 16px;
  border-radius: 14px; border: 2px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .07);
  color: var(--blanco); transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.opcion:hover .opcion-caja { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .8); }
.opcion-marca {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .75);
}
.opcion-textos { display: grid; gap: 2px; }
.opcion-textos strong { font-size: 1.18rem; line-height: 1.2; }
.opcion-textos small { font-size: 1rem; line-height: 1.3; color: #c9dcee; }
.opcion input:focus-visible + .opcion-caja { outline: 3px solid var(--senal); outline-offset: 3px; }
.opcion input:checked + .opcion-caja {
  background: var(--blanco); border-color: var(--azul); color: var(--noche); box-shadow: 0 0 0 3px rgba(83, 144, 201, .5);
}
.opcion input:checked + .opcion-caja small { color: var(--tinta-2); }
.opcion input:checked + .opcion-caja .opcion-marca { border-color: var(--azul); background: var(--azul); }
.opcion input:checked + .opcion-caja .opcion-marca::after {
  content: ""; width: 7px; height: 13px; border: solid var(--blanco); border-width: 0 3px 3px 0;
  transform: translateY(-2px) rotate(45deg);
}

/* los campos para escribir: letra grande, fondo blanco */
.campo { margin-top: 16px; }
.campo label { display: block; margin-bottom: 8px; font-weight: 700; font-size: 1.12rem; color: #e3edf7; }
.campo input {
  width: 100%; min-height: 60px; padding: 0 18px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .6);
  background: var(--blanco); color: var(--tinta); font: 500 1.25rem var(--fuente);
}
.campo input::placeholder { color: #8391a3; opacity: 1; }
.campo input:focus { outline: 3px solid var(--senal); outline-offset: 2px; border-color: var(--azul); }
.campo input:disabled { opacity: .45; }
.campo input[aria-invalid="true"] { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .35); }
.campo-ayuda { margin: 8px 0 0; font-size: 1.02rem; color: #c9dcee; }
.revela[hidden] { display: none; }
.casilla { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 1.12rem; cursor: pointer; }
.casilla input { flex: none; width: 26px; height: 26px; accent-color: var(--azul); }

.cantidad { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.cantidad-boton {
  width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .75);
  background: rgba(255, 255, 255, .08); color: var(--blanco); font: 700 2.1rem/1 var(--fuente); cursor: pointer;
}
.cantidad-boton:hover { background: rgba(255, 255, 255, .18); }
.cantidad input {
  width: 112px; height: 74px; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .6);
  background: var(--blanco); color: var(--tinta); font: 800 2.3rem var(--fuente); text-align: center;
  -moz-appearance: textfield; appearance: textfield;
}
.cantidad input::-webkit-inner-spin-button, .cantidad input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.cantidad input:focus { outline: 3px solid var(--senal); outline-offset: 2px; }

.pedido-nota { margin: 14px 0 0; font-size: 1.05rem; line-height: 1.45; color: #c9dcee; }
.pedido-nota strong { color: var(--blanco); }
.pedido-aviso {
  margin: 16px 0 0; padding: 10px 14px; border-radius: 12px; font-weight: 700; font-size: 1.08rem;
  background: rgba(245, 158, 11, .16); border: 1px solid rgba(245, 158, 11, .6); color: #fde7c2;
}
.pedido-aviso[hidden] { display: none; }
.pedido-botones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.pedido-botones [hidden] { display: none; }
/* los botones del paso quedan pegados al pie del panel aunque el paso sea largo (el resumen) */
.pedido-pie {
  position: sticky; bottom: 0; z-index: 1; margin-top: 10px; padding: 14px 0 calc(24px + env(safe-area-inset-bottom, 0px));
}
.pedido.desborda .pedido-pie { background: linear-gradient(180deg, rgba(7, 21, 38, 0) 0, var(--noche-2) 14px); }
@media (min-aspect-ratio: 4/5) and (min-width: 761px) {
  /* en la compu el fondo se funde hacia la foto en vez de cortar en seco */
  /* (se esfuma solo en lo que sobresale del panel: con el 80 %, el borde de la opción de abajo se
     veía a través del pie, al lado de "Atrás"; 12/10/2026) */
  .pedido.desborda .pedido-pie { margin-right: -40px; padding-right: 40px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
}
.pedido-pie .boton-enviar { margin-top: 0; width: auto; }
.pedido-seguir .flecha { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pedido-atras { min-height: 56px; padding: 0 24px; }

/* el resumen: la etiqueta de papel del pedido, con "Cambiar" en cada dato */
.resumen {
  position: relative; margin: 16px 0 0; padding: 10px 18px 6px 50px; border-radius: 10px;
  background: #f7f0e1; color: #2b2418; box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
  clip-path: polygon(24px 0, 100% 0, 100% 100%, 24px 100%, 0 calc(100% - 24px), 0 24px);
}
.resumen::before {
  content: ""; position: absolute; left: 13px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%;
  background: var(--noche-2); box-shadow: 0 0 0 4px #ddcda9;
}
.resumen-fila {
  display: grid; grid-template-columns: 7.6em 1fr auto; align-items: center; gap: 2px 12px;
  padding: 5px 0; border-bottom: 1px dashed rgba(43, 36, 24, .28);
}
.resumen-fila:last-child { border-bottom: 0; }
.resumen dt { font-size: .86rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #7a6a4f; }
.resumen dd { margin: 0; font-size: 1.12rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.resumen dd::first-letter { text-transform: uppercase; }
.resumen-cambiar {
  min-height: 44px; padding: 0 12px; border-radius: 10px; border: 2px solid #cdb98f; background: transparent;
  color: #5b4a2c; font: 700 1rem var(--fuente); cursor: pointer;
}
.resumen-cambiar:hover { background: #efe3c8; }
.pedido-espera {
  display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 0; font-size: 1.15rem; font-weight: 700; color: var(--blanco);
}
.pedido-espera svg { flex: none; width: 26px; height: 26px; margin-top: 1px; fill: none; stroke: #9fd0ff; stroke-width: 2; stroke-linecap: round; }
.boton-enviar {
  margin-top: 18px; width: 100%; max-width: 460px; min-height: 66px; background: #1faa53; color: var(--blanco);
  box-shadow: 0 10px 30px rgba(31, 170, 83, .38), inset 0 1px 0 rgba(255, 255, 255, .25); font-size: 1.25rem;
}
.boton-enviar:hover { background: #1c9a4b; }
.boton-enviar svg { width: 28px; height: 28px; fill: currentColor; }

/* después de enviar */
.pedido-tilde {
  display: grid; place-items: center; width: 74px; height: 74px; margin-bottom: 18px; border-radius: 50%;
  background: var(--verde); box-shadow: 0 0 0 8px rgba(34, 197, 94, .22), 0 10px 30px rgba(34, 197, 94, .35);
}
.pedido-tilde svg { width: 40px; height: 40px; fill: none; stroke: var(--blanco); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pedido-listo .pedido-ayuda { margin-bottom: 10px; }
.pedido-botones-listo { margin-top: 14px; }
.pedido-botones-listo .boton-enviar { margin-top: 0; width: auto; }
.enlace-pedido {
  min-height: 48px; padding: 0 4px; border: 0; background: none; color: var(--blanco); cursor: pointer;
  font: 700 1.1rem var(--fuente); text-decoration: underline; text-underline-offset: 5px;
}

/* la etiqueta atada al aro del llavero, donde se va escribiendo el pedido (solo en la compu) */
.etiqueta { position: absolute; left: 0; top: 0; z-index: 3; width: 0; height: 0; pointer-events: none; }
.etiqueta[hidden] { display: none; }
.etiqueta-hilo {
  position: absolute; left: 0; top: -1px; height: 2px; transform-origin: 0 50%;
  background: #e2d3b0; box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.etiqueta-papel {
  position: absolute; left: -18px; top: 0; width: 236px; padding: 12px 16px 12px 42px; border-radius: 8px;
  background: #f7f0e1; color: #2b2418; box-shadow: 0 16px 30px rgba(0, 0, 0, .45);
  clip-path: polygon(20px 0, 100% 0, 100% 100%, 20px 100%, 0 calc(100% - 20px), 0 20px);
  transform-origin: 18px 50%; transform: translateY(-50%) rotate(12deg);
  animation: etiqueta-hamaca 4.2s ease-in-out infinite;
}
@keyframes etiqueta-hamaca {
  0%, 100% { transform: translateY(-50%) rotate(9deg); }
  50% { transform: translateY(-50%) rotate(15deg); }
}
.etiqueta-ojal {
  position: absolute; left: 11px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%;
  background: #3a3226; box-shadow: 0 0 0 4px #ddcda9;
}
.etiqueta-titulo { margin: 0 0 4px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8a7854; }
.etiqueta-lineas { list-style: none; margin: 0; padding: 0; }
.etiqueta-lineas li {
  min-height: 1.6em; padding-top: 2px; border-bottom: 1px dashed rgba(43, 36, 24, .3);
  font-size: 1rem; font-weight: 700; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.etiqueta-sello {
  position: absolute; right: 10px; top: 8px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--verde); color: var(--blanco); font-weight: 800; opacity: 0; transform: scale(.4);
  transition: opacity .3s ease, transform .4s cubic-bezier(.3, 1.6, .5, 1);
}
.etiqueta.enviada .etiqueta-sello { opacity: 1; transform: scale(1); }

/* ------------------------------------------------------------- el presupuesto, en la cuadra */

/* va encima de la escena del inicio (que sigue dibujándose debajo): la cuadra se vacía, laten
   los puntos y el panel lleva la cuenta (armador.js) */
.armador { position: fixed; inset: 0; z-index: 34; color: var(--blanco); }
.armador[hidden] { display: none; }
.armador-velo {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(7, 21, 38, .95) 0%, rgba(7, 21, 38, .88) 28%, rgba(7, 21, 38, .3) 42%, rgba(7, 21, 38, 0) 54%);
}
.armador-efectos, .armador-puntos { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.armador-panel {
  position: absolute; z-index: 2; left: 0; top: var(--cabecera); bottom: 0; width: min(580px, 44vw);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  --margen-panel: clamp(20px, 3.2vw, 48px);
  padding: clamp(8px, 3vh, 32px) var(--margen-panel) 0;
  /* sin barra (quedaba como una raya en medio de la foto): lo que sigue se ve bajo el pie, y lo
     que se fue para arriba se esfuma antes de llegar al logo */
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18px);
  mask-image: linear-gradient(180deg, transparent 0, #000 18px);
  /* lo que se trae a la vista con el foco queda entre el borde esfumado y el pie (armador.js mide
     el pie): antes quedaba debajo del pie (12/10/2026) */
  scroll-padding: 22px 0 calc(var(--alto-pie, 120px) + 12px);
}
.armador-panel::-webkit-scrollbar { display: none; }
/* la cuadra es el inicio, que mide una pantalla (con el celular acostado, el texto del inicio
   lo estira y los equipos de abajo quedarían fuera) */
.con-presupuesto .hero { height: 100vh; height: 100svh; min-height: 0; }
/* mientras se arma el presupuesto, la cabecera solo deja el logo y WhatsApp */
.con-presupuesto .enlace-cabecera, .con-presupuesto .boton-telefonos, .con-presupuesto .seguir { visibility: hidden; }
.armador-panel .detalle-volver { margin-bottom: 16px; flex: none; }
.armador-ante { margin-bottom: 10px; }
.armador-form { flex: 1; display: flex; flex-direction: column; }
.armador-form .pedido-escenario { flex: 1; }
.armador-form .pedido-pregunta { font-size: clamp(1.65rem, 1.1rem + 1.3vw, 2.25rem); }
.armador-cuenta { flex-basis: 100%; margin: 0; font-weight: 700; color: #b8d6f2; }
.armador-cuenta[hidden] { display: none; }

/* lo que se elige: filas grandes con casilla, o con − y + */
.items { display: grid; gap: 8px; margin-top: 14px; }
.item { display: block; position: relative; cursor: pointer; }
.item > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.item-caja, .item-cantidad {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px;
  border-radius: 14px; border: 2px solid rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .06);
  color: var(--blanco); transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.item-cantidad { padding: 8px 8px 8px 16px; cursor: default; }
.item:hover .item-caja { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .75); }
.item-marca {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, .75);
}
.item-textos { display: grid; gap: 2px; flex: 1; min-width: 0; }
.item-textos strong { font-size: 1.15rem; line-height: 1.2; }
.item-textos small { font-size: .98rem; line-height: 1.3; color: #c9dcee; }
.item > input:focus-visible + .item-caja { outline: 3px solid var(--senal); outline-offset: 3px; }
.item > input:checked + .item-caja, .item-cantidad.con-valor {
  background: var(--blanco); border-color: var(--azul); color: var(--noche); box-shadow: 0 0 0 3px rgba(83, 144, 201, .45);
}
.item > input:checked + .item-caja small, .item-cantidad.con-valor small { color: var(--tinta-2); }
.item > input:checked + .item-caja .item-marca { border-color: var(--azul); background: var(--azul); }
.item > input:checked + .item-caja .item-marca::after {
  content: ""; width: 7px; height: 13px; border: solid var(--blanco); border-width: 0 3px 3px 0;
  transform: translateY(-2px) rotate(45deg);
}
.item > input:disabled + .item-caja { cursor: default; opacity: .8; }
/* pasar por la fila resalta el punto de la cuadra, y al revés */
.item.resaltado .item-caja, .item-cantidad.resaltado { border-color: var(--senal); box-shadow: 0 0 0 3px rgba(22, 165, 232, .4); }
.contador { flex: none; display: flex; align-items: center; gap: 4px; }
.contador-boton {
  width: 50px; height: 50px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7);
  background: rgba(255, 255, 255, .08); color: inherit; font: 700 1.75rem/1 var(--fuente); cursor: pointer;
}
.contador-boton:hover { background: rgba(255, 255, 255, .18); }
.contador-boton:disabled { opacity: .35; cursor: default; }
.con-valor .contador-boton { border-color: var(--azul); color: var(--azul-oscuro); background: #eef5fc; }
.con-valor .contador-boton:hover { background: #dcebf8; }
.contador output { min-width: 2.2ch; text-align: center; font-weight: 800; font-size: 1.45rem; }
/* lo que se pregunta de la cerradura (en qué puertas y cómo se abre), debajo de su fila */
.item-detalle {
  margin: -4px 0 4px; padding: 14px 14px 10px; border-radius: 0 0 14px 14px;
  background: rgba(255, 255, 255, .07); border: 2px solid rgba(83, 144, 201, .6); border-top: 0;
}
.item-detalle[hidden] { display: none; }
.item-pregunta { margin: 14px 0 8px; font-weight: 700; font-size: 1.1rem; color: #e3edf7; }
.item-detalle .item-pregunta:first-child { margin-top: 0; }
.fichas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.fichas-dos { display: grid; grid-template-columns: 1fr 1fr; }
.fichas-tres { display: grid; grid-template-columns: repeat(3, 1fr); }
.fichas-cuatro { display: grid; grid-template-columns: repeat(2, 1fr); }
.ficha { position: relative; display: block; cursor: pointer; }
.ficha input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.ficha > span {
  display: grid; align-content: center; gap: 1px; height: 100%; min-height: 54px; padding: 8px 16px;
  border-radius: 12px; border: 2px solid rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .07);
  font-size: 1.08rem; line-height: 1.2; transition: background .15s ease, border-color .15s ease;
}
.ficha small { font-size: .92rem; color: #c9dcee; }
.ficha:hover > span { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .8); }
.ficha input:focus-visible + span { outline: 3px solid var(--senal); outline-offset: 3px; }
.ficha input:checked + span { background: var(--blanco); border-color: var(--azul); color: var(--noche); box-shadow: 0 0 0 3px rgba(83, 144, 201, .45); }
.ficha input:checked + span small { color: var(--tinta-2); }
/* lo que no se ve desde la vereda: plegado, con la cuenta de lo elegido */
.mas { margin-top: 16px; border-top: 1px solid rgba(255, 255, 255, .2); }
.mas > summary {
  display: flex; align-items: center; gap: 12px; min-height: 60px; cursor: pointer; list-style: none;
  font-weight: 800; font-size: 1.15rem;
}
.mas > summary::-webkit-details-marker { display: none; }
.mas > summary::before {
  content: ""; flex: none; width: 10px; height: 10px; margin: 0 4px 3px 2px; border: solid currentColor; border-width: 0 3px 3px 0;
  transform: rotate(-45deg); transition: transform .2s ease;
}
.mas[open] > summary::before { transform: rotate(45deg); }
.mas-cuenta { margin-left: auto; font-size: 1rem; font-weight: 700; color: #9fd0ff; }
.mas-titulo { display: grid; gap: 1px; }
.mas-titulo small { font-size: .98rem; font-weight: 600; color: #c9dcee; }
/* "Hay más opciones abajo", flotando arriba del pie mientras la lista siga */
/* el renglón de arriba del pie: la cuenta y, a la derecha, "Hay más opciones abajo" (antes el
   aviso flotaba arriba del pie y en el celular tapaba la ayuda y la primera fila de la lista) */
.armador-pie-fila { flex-basis: 100%; display: flex; align-items: center; gap: 10px; min-height: 34px; }
.armador-pie-fila[hidden] { display: none; }
.armador-pie-fila .armador-cuenta { flex: 1 1 0; min-width: 0; }
.armador-mas-abajo {
  display: inline-flex; flex: none; align-items: center; gap: 6px; margin-left: auto;
  min-height: 34px; padding: 0 12px 0 15px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .4); background: rgba(31, 95, 147, .95); color: var(--blanco);
  font: 700 .98rem var(--fuente);
}
.armador-mas-abajo[hidden] { display: none; }
/* abajo de todo se apaga sin irse: su lugar queda y el pie no cambia de alto */
.armador-mas-abajo.apagado { visibility: hidden; }
/* en el presupuesto el pie no lleva la máscara del pedido de llavero (recortaría el aviso): el
   fondo va aparte y se esfuma hacia la foto */
.armador-form.desborda .pedido-pie { -webkit-mask-image: none; mask-image: none; margin-right: 0; padding-right: 0; background: none; }
.armador-form.desborda .pedido-pie::before {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: -1; pointer-events: none;
  left: calc(-1 * var(--margen-panel, 20px)); right: calc(-1 * var(--margen-panel, 20px));
  background: linear-gradient(180deg, rgba(7, 21, 38, 0) 0, var(--noche-2) 14px);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--margen-panel, 20px)), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - var(--margen-panel, 20px)), transparent);
}
.armador-mas-abajo:hover { background: var(--azul); }
.armador-mas-abajo svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; animation: abajo 1.6s ease-in-out infinite; }
@keyframes abajo { 50% { transform: translateY(3px); } }
.mas .items { margin-top: 2px; }
/* el resumen del presupuesto: cada dato arriba de su valor (la lista de equipos es larga) */
.resumen-presupuesto .resumen-fila { grid-template-columns: 1fr auto; gap: 0 12px; padding: 8px 0; }
.resumen-presupuesto dt, .resumen-presupuesto dd { grid-column: 1; }
.resumen-presupuesto .resumen-cambiar { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.resumen-presupuesto ul { margin: 0; padding-left: 1.1em; }
.resumen-presupuesto li { margin: 2px 0; }

/* lo que hace cada equipo al ponerse (efectos.js): el cono de las cámaras, el saludo del tótem
   y el timbre del videoportero. Debajo de los puntos y sin recibir toques. */
.efecto { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; will-change: transform; }
.efecto-giro { position: absolute; left: 0; top: 0; transform: rotate(var(--angulo)); }
.barre .efecto-giro { animation: barrer 7s ease-in-out infinite alternate; }
@keyframes barrer {
  from { transform: rotate(calc(var(--angulo) - 26deg)); }
  to { transform: rotate(calc(var(--angulo) + 26deg)); }
}
.efecto-cono svg {
  position: absolute; top: 0; left: calc(var(--largo, 200px) * var(--proporcion, 1) / -2);
  width: calc(var(--largo, 200px) * var(--proporcion, 1)); height: var(--largo, 200px);
  max-width: none; transform-origin: 50% 0; opacity: 0; mix-blend-mode: screen;
}
/* el tótem: la pantalla se ilumina y saluda */
.efecto-brillo {
  position: absolute; left: calc(-95px * var(--escala, 1)); top: calc(-135px * var(--escala, 1));
  width: calc(190px * var(--escala, 1)); height: calc(270px * var(--escala, 1)); border-radius: 40%;
  background: radial-gradient(closest-side, rgba(200, 236, 255, .55), rgba(120, 190, 245, .22) 55%, rgba(83, 144, 201, 0));
  mix-blend-mode: screen; opacity: 0; transition: opacity .6s ease;
}
.efecto-totem.saluda .efecto-brillo { opacity: 1; transition-duration: .25s; }
.efecto-hola {
  position: absolute; right: calc(60px * var(--escala, 1) + 18px); bottom: calc(40px * var(--escala, 1));
  width: max-content; max-width: min(300px, 60vw); padding: 11px 16px 12px; border-radius: 16px 16px 4px 16px;
  background: rgba(255, 255, 255, .97); color: var(--noche); box-shadow: 0 12px 30px rgba(3, 10, 20, .42);
  opacity: 0; transform: translateY(8px) scale(.96); transform-origin: 100% 100%;
  transition: opacity .3s ease, transform .35s ease;
}
.efecto-hola strong { display: block; font-size: 1.1rem; line-height: 1.2; }
.efecto-hola span { display: block; margin-top: 2px; font-size: .95rem; line-height: 1.3; color: #3a5068; }
.efecto-totem.saluda .efecto-hola { opacity: 1; transform: none; transition-delay: .35s; }
/* el videoportero: el timbre, dos anillos */
.efecto-timbre i {
  position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .95); opacity: 0;
}
.efecto-timbre.suena i { animation: timbre 1.1s ease-out 2; }
.efecto-timbre.suena i + i { animation-delay: .3s; }
@keyframes timbre { from { transform: scale(.8); opacity: .95; } to { transform: scale(3); opacity: 0; } }

/* los puntos donde va cada equipo: laten mientras no están; puestos, un tilde */
.armador-punto {
  position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; margin: 0;
  border: 0; background: none; color: inherit; font: inherit; cursor: pointer; will-change: transform;
  visibility: hidden; pointer-events: none;
}
.armador-puntos.visibles .armador-punto { visibility: visible; pointer-events: auto; }
.armador-puntos.visibles .armador-punto.fuera { visibility: hidden; pointer-events: none; }
.armador-punto-marca {
  position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; background: var(--blanco); color: var(--azul-oscuro);
  box-shadow: 0 0 0 5px rgba(83, 144, 201, .55), 0 4px 14px rgba(0, 0, 0, .5);
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease, translate .4s cubic-bezier(.3, 1.3, .5, 1), scale .3s ease;
}
/* puesto, el tilde se corre a un costado (armador.js calcula --dx y --dy según lo grande que se
   ve el equipo) y un hilo lo une al equipo: el equipo queda a la vista */
.armador-punto.puesto .armador-punto-marca { translate: var(--dx, 24px) var(--dy, -20px); scale: .78; }
.armador-punto-hilo {
  position: absolute; left: 0; top: -1px; width: var(--hilo, 30px); height: 2px; pointer-events: none;
  transform-origin: 0 50%; transform: rotate(var(--hilo-angulo, -0.7rad)); opacity: 0; transition: opacity .3s ease;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) var(--hilo-desde, 40%), rgba(255, 255, 255, .95) calc(var(--hilo-desde, 40%) + 8%));
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
}
.armador-punto.puesto .armador-punto-hilo { opacity: 1; transition-delay: .15s; }
/* sobre el equipo queda una zona que se toca (tocarlo de nuevo lo saca) */
.armador-punto-zona { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; }
/* el "+": dos barras */
.armador-punto-marca::before, .armador-punto-marca::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 3.4px; margin: -1.7px 0 0 -8px;
  border-radius: 2px; background: currentColor; transition: transform .25s ease;
}
.armador-punto-marca::after { transform: rotate(90deg); }
/* sin poner, late: un anillo que se abre desde la marca (con transform y opacidad, que el
   navegador anima sin repintar; antes era una sombra que se repintaba en cada cuadro) */
.armador-punto:not(.puesto) .armador-punto-zona::after {
  content: ""; position: absolute; inset: 1px; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(255, 255, 255, .9); animation: latido 2.2s ease-out infinite;
}
/* puesto: el "+" gira y se vuelve tilde (verde) */
.armador-punto.puesto .armador-punto-marca {
  background: var(--verde); color: var(--blanco); box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 4px 14px rgba(0, 0, 0, .5);
}
.armador-punto.puesto .armador-punto-marca::before { width: 9px; margin: 1px 0 0 -9px; transform: rotate(45deg); }
.armador-punto.puesto .armador-punto-marca::after { width: 17px; margin: -2px 0 0 -4px; transform: rotate(-50deg); }
.armador-punto:hover .armador-punto-marca, .armador-punto.resaltado .armador-punto-marca { transform: scale(1.14); }
.armador-punto:focus-visible { outline: none; }
.armador-punto:focus-visible .armador-punto-marca { outline: 3px solid var(--senal); outline-offset: 6px; }
/* el nombre del equipo: con el mouse encima, con el foco o recién tocado */
.armador-punto-texto {
  position: absolute; left: 30px; top: 0; transform: translateY(-50%); padding: 7px 13px; border-radius: 12px;
  white-space: nowrap; pointer-events: none; opacity: 0; translate: -6px 0;
  background: rgba(255, 255, 255, .97); color: var(--noche); font-weight: 800; font-size: 1.02rem; line-height: 1.2;
  box-shadow: 0 10px 26px rgba(3, 10, 20, .45); transition: opacity .2s ease, translate .2s ease;
}
.armador-punto-texto span { display: block; }
.armador-punto-texto small { display: block; font-weight: 700; font-size: .9rem; color: #1f5f93; }
.armador-punto.a-la-izquierda .armador-punto-texto { left: auto; right: 30px; translate: 6px 0; }
/* si no entra entero de ningún lado del punto, en renglones (el ancho lo pone armador.js) */
.armador-punto.partido .armador-punto-texto { white-space: normal; width: max-content; max-width: var(--nombre-max); }
/* puesto, el nombre acompaña al tilde */
.armador-punto.puesto .armador-punto-texto { left: calc(26px + var(--dx, 24px)); top: var(--dy, -20px); }
.armador-punto.puesto.a-la-izquierda .armador-punto-texto { left: auto; right: calc(26px - var(--dx, -24px)); }
.armador-punto:hover .armador-punto-texto, .armador-punto:focus-visible .armador-punto-texto,
.armador-punto.recien .armador-punto-texto, .armador-punto.resaltado .armador-punto-texto { opacity: 1; translate: 0 0; }
/* el anillo que se abre al tocar */
.armador-punto.recien::after {
  content: ""; position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid var(--verde); animation: punto-anillo .7s ease-out forwards; pointer-events: none;
}
@keyframes punto-anillo { from { transform: scale(1); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }

/* el hall (08/10/2026): "Entrar al hall" sobre la puerta de la cuadra. No es un equipo (lleva
   adentro): azul, con la puerta, y el nombre siempre a la vista, del lado izquierdo (a la
   derecha, más abajo, está el punto de la cerradura) */
.armador-entrar {
  position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; margin: 0;
  border: 0; background: none; color: inherit; font: inherit; cursor: pointer; will-change: transform;
  visibility: hidden; pointer-events: none;
}
.armador-puntos.visibles .armador-entrar { visibility: visible; pointer-events: auto; }
.armador-puntos.visibles .armador-entrar.fuera { visibility: hidden; pointer-events: none; }
.armador-entrar-marca {
  position: absolute; left: -23px; top: -23px; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; background: var(--azul-oscuro); color: var(--blanco);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .92), 0 6px 18px rgba(0, 0, 0, .5); transition: transform .2s ease, background .2s ease;
}
.armador-entrar-marca::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(255, 255, 255, .85); animation: latido 2.2s ease-out infinite;
}
.armador-entrar-marca svg, .armador-entrar-hall > svg:first-child {
  width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.armador-entrar-marca svg .relleno, .armador-entrar-hall svg .relleno { fill: currentColor; stroke: none; }
.armador-entrar-texto {
  position: absolute; right: 32px; top: 0; transform: translateY(-50%); padding: 8px 15px; border-radius: 999px;
  white-space: nowrap; pointer-events: none; background: rgba(255, 255, 255, .97); color: var(--noche);
  font-weight: 800; font-size: 1.05rem; line-height: 1.2; box-shadow: 0 10px 26px rgba(3, 10, 20, .45);
}
.armador-entrar:hover .armador-entrar-marca { transform: scale(1.1); background: var(--azul); }
.armador-entrar:focus-visible { outline: none; }
.armador-entrar:focus-visible .armador-entrar-marca { outline: 3px solid var(--senal); outline-offset: 6px; }
/* el mismo, en la lista de adentro del panel */
.armador-entrar-hall {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 62px; margin: 12px 0 2px; padding: 10px 16px;
  border-radius: var(--radio); border: 2px solid rgba(255, 255, 255, .6); background: rgba(31, 95, 147, .6);
  color: var(--blanco); font: inherit; text-align: left; cursor: pointer; transition: background .2s ease;
}
.armador-entrar-hall[hidden] { display: none; }
.armador-entrar-hall:hover { background: rgba(31, 95, 147, .92); }
.armador-entrar-hall > svg:first-child { width: 30px; height: 30px; flex: none; }
.armador-entrar-hall span { display: grid; gap: 1px; flex: 1; }
.armador-entrar-hall strong { font-size: 1.12rem; }
.armador-entrar-hall small { font-size: .95rem; font-weight: 600; color: #c9dcee; }
.armador-entrar-hall .flecha { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* adentro: "Darse vuelta", abajo a la derecha de la parte libre */
.armador-vuelta {
  position: absolute; z-index: 3; right: clamp(16px, 2.5vw, 36px); bottom: clamp(16px, 4vh, 40px);
  display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 22px 8px 14px; border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .78); background: rgba(7, 21, 38, .84); color: var(--blanco);
  font: inherit; text-align: left; cursor: pointer; box-shadow: 0 10px 26px rgba(0, 0, 0, .45); transition: background .2s ease;
}
.armador-vuelta[hidden] { display: none; }
.armador-vuelta:hover { background: rgba(31, 95, 147, .94); }
.armador-vuelta svg { width: 30px; height: 30px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.armador-vuelta span { display: grid; gap: 1px; }
.armador-vuelta strong { font-size: 1.1rem; }
.armador-vuelta small { font-size: .92rem; font-weight: 600; color: #c9dcee; }
/* el foco de "Darse vuelta" sigue siendo una píldora (el :focus-visible general redondea a 6 px) */
.armador-vuelta:focus-visible { border-radius: 999px; outline-offset: 4px; }
/* la pista de la primera vez en el hall, arriba en el medio de la parte libre (armador.js) */
.armador-pista-hall {
  position: absolute; z-index: 3; top: calc(var(--cabecera) + 16px); left: calc((100% + min(580px, 44vw)) / 2);
  transform: translateX(-50%); margin: 0; padding: 9px 18px; border-radius: 999px; white-space: nowrap;
  background: rgba(7, 21, 38, .8); color: var(--blanco); font-weight: 700; font-size: 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3); pointer-events: none; opacity: 0; transition: opacity .4s ease;
}
.armador-pista-hall.visible { opacity: 1; }
/* lo que se dice solo a los lectores de pantalla */
.para-lectores {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* mientras se entra, se sale o se da vuelta, el panel no se toca */
.armador.viajando-hall .armador-panel { pointer-events: none; }
@media (max-aspect-ratio: 4/5), (max-width: 760px) {
  /* en el celular, "Darse vuelta" arriba a la derecha, en la fila del "Volver" */
  .armador-vuelta { top: calc(var(--cabecera) + 6px); bottom: auto; right: 16px; min-height: 48px; padding: 4px 16px 4px 10px; gap: 8px; }
  .armador-vuelta small { display: none; }
  .armador-vuelta svg { width: 26px; height: 26px; }
  /* la pista, abajo de la franja del hall, justo arriba de la hoja: arriba tapaba el domo del
     techo (09/10/2026); abajo está el piso */
  .armador-pista-hall { top: auto; bottom: calc(min(var(--alto-armador, 52%), calc(100% - var(--cabecera) - 64px)) + 6px); left: 50%; font-size: .95rem; }
  .armador-entrar-marca { left: -21px; top: -21px; width: 42px; height: 42px; }
  .armador-entrar-texto { right: 28px; font-size: .95rem; padding: 6px 12px; }
}

.texto-chico { margin: 22px 0 0; font-size: 1.1rem; color: var(--tinta-2); }
.texto-chico a { color: var(--azul-oscuro); font-weight: 700; text-underline-offset: 4px; }

/* ------------------------------------------------------------- secciones */

.seccion { padding: clamp(64px, 9vw, 120px) 0; background: var(--blanco); }
.seccion-clara { background: var(--papel); }
.contenedor { width: min(1080px, 100% - 40px); margin: 0 auto; }
.antetitulo-oscuro { color: var(--azul-oscuro); }
h2 { margin: 0 0 18px; font-size: clamp(2rem, 1.3rem + 2vw, 3rem); line-height: 1.1; font-weight: 800; color: var(--noche); }
.texto-grande { font-size: clamp(1.2rem, 1.05rem + .45vw, 1.4rem); max-width: 46ch; color: var(--tinta-2); margin: 0 0 30px; }

.pie { background: var(--noche); color: #d6e3f0; padding: 56px 0 64px; }
.pie-grilla { display: grid; grid-template-columns: 160px 1fr; gap: 28px 48px; align-items: start; }
.pie-logo { width: 140px; height: auto; }
.lineas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lineas li { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 1.15rem; }
.lineas span { color: #9fb8d0; min-width: 15em; }
.lineas a { color: var(--blanco); font-weight: 700; }
.direccion { grid-column: 2; margin: 8px 0 0; color: #9fb8d0; }

/* ------------------------------------------------------------- las secciones de abajo (secciones.js) */

/* lo de abajo del inicio no se arma al cargar: el primer armado de la página (con la letra de
   reserva, y otra vez con la buena) calculaba el sitio entero y en un celular se llevaba medio
   segundo antes de mostrar nada. main.js lo arma de a una sección cuando la cuadra ya está, y todo
   junto antes de seguir un enlace (con lo de arriba sin armar, el enlace caía en otro lado). Si el
   JS no corre, cada sección se arma sola al acercarse a la pantalla (12/10/2026) */
main > :not(.hero), .pie { content-visibility: auto; contain-intrinsic-size: auto 800px; }

.seccion-oscura { background: var(--noche); color: #e3edf7; }
.seccion-oscura h2, .seccion-oscura h3 { color: var(--blanco); }
.seccion-oscura .texto-grande { color: #c9dcee; }
.seccion-oscura a { color: var(--blanco); }

/* lo que aparece al bajar, de a uno dentro de cada grupo */
.aparece {
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--orden, 0) * 90ms);
}
.aparece.visto { opacity: 1; transform: none; }

/* el abono: los textos a un lado y la hoja de expensas al otro */
.seccion-abono { background: linear-gradient(180deg, #eaf3fb 0%, #f5f9fd 100%); }
.abono-grilla { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.abono-textos h2 { max-width: 18ch; }
.abono-incluye { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 14px; }
.abono-incluye li { position: relative; display: grid; gap: 2px; padding-left: 44px; }
.abono-incluye li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 30px; height: 30px; border-radius: 50%; background: var(--azul);
  box-shadow: 0 4px 10px rgba(31, 95, 147, .3);
}
.abono-incluye li::after {
  content: ""; position: absolute; left: 11px; top: 8px; width: 7px; height: 13px; border: solid var(--blanco); border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.abono-incluye strong { font-size: 1.22rem; line-height: 1.3; color: var(--noche); }
.abono-incluye span { font-size: 1.1rem; line-height: 1.45; color: var(--tinta-2); }
.abono-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.enlace-oscuro { font-weight: 700; font-size: 1.12rem; color: var(--azul-oscuro); text-underline-offset: 5px; }
/* la hoja de expensas: papel, renglones grises sin montos y la línea del abono resaltada */
.expensas { margin: 0; }
.expensas-papel {
  position: relative; padding: 26px 26px 22px; border-radius: 6px; background: #fffdf8; color: #2b2418;
  box-shadow: 0 30px 60px rgba(11, 31, 51, .18), 0 2px 0 #eadfc8; transform: rotate(-1.6deg);
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(43, 36, 24, .05) 31px 32px);
}
.expensas-titulo { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 2px solid #2b2418; font-weight: 800; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; }
.expensas-papel > ul { list-style: none; margin: 0; padding: 0; }
.expensas-papel > ul > li { padding: 9px 0; border-bottom: 1px dashed rgba(43, 36, 24, .25); font-size: 1.05rem; }
.expensas-otro { display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #7a6a4f; }
.expensas-otro i, .expensas-abono > span i { flex: none; width: 70px; height: 10px; border-radius: 5px; background: rgba(43, 36, 24, .14); }
.expensas-abono {
  position: relative; margin: 4px -12px; padding: 12px !important; border-radius: 8px; border-bottom: 0 !important;
  background: linear-gradient(90deg, rgba(83, 144, 201, .16), rgba(83, 144, 201, .08)); box-shadow: inset 0 0 0 2px rgba(83, 144, 201, .55);
}
.expensas-abono > span { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.expensas-abono strong { font-size: 1.12rem; color: var(--noche); }
.expensas-abono > span i { background: rgba(31, 95, 147, .3); }
.expensas-abono ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.expensas-abono ul li { position: relative; padding-left: 24px; font-size: 1rem; font-weight: 700; color: #1f5f93; }
.expensas-abono ul li::before {
  content: ""; position: absolute; left: 4px; top: .2em; width: 6px; height: 11px; border: solid var(--verde); border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.expensas-pie { margin: 14px 0 0; font-size: 1rem; font-style: italic; color: #7a6a4f; }
/* el abono, primero en compra o comodato */
.modelo-aparte { color: var(--tinta-2) !important; }
.modelo-aparte::before { border-color: #c1cbd6 !important; }
.despues-accion { margin-top: 26px; }
/* en el presupuesto: la opción del abono, con su sello */
.opcion-destacada .opcion-caja { border-color: rgba(83, 144, 201, .9); background: rgba(83, 144, 201, .14); }
.opcion-sello {
  justify-self: start; margin-bottom: 2px; padding: 2px 10px; border-radius: 999px; background: var(--azul); color: var(--blanco);
  font-size: .85rem; font-weight: 800;
}
.opcion input:checked + .opcion-caja .opcion-sello { background: var(--azul-oscuro); }

/* las cifras */
.cifras { background: var(--noche-2); color: #e3edf7; padding: clamp(30px, 4.5vw, 52px) 0; border-top: 1px solid rgba(255, 255, 255, .07); }
.cifras-lista { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 36px; }
.cifras-lista li { display: grid; align-content: start; gap: 6px; }
.cifras strong { font-size: clamp(2.4rem, 1.6rem + 2.2vw, 3.6rem); font-weight: 800; line-height: 1; color: var(--blanco); font-variant-numeric: tabular-nums; }
.cifras span { font-size: 1.08rem; line-height: 1.35; color: #b8d6f2; max-width: 20ch; }

/* el tótem en cuatro pasos: la foto queda fija al costado y los pasos pasan */
.historia h2 .linea { display: block; }
.historia-cuerpo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 64px);
  align-items: start; margin-top: clamp(8px, 2vw, 24px);
}
.historia-escena {
  grid-column: 2; grid-row: 1; position: sticky; top: max(calc(var(--cabecera) + 20px), calc(50vh - 15vw));
  aspect-ratio: 5 / 4; max-height: calc(100vh - var(--cabecera) - 40px); border-radius: 20px; overflow: hidden; background: var(--noche-2);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08);
}
.historia-foto { position: absolute; inset: 0; overflow: hidden; }
.historia-foto img {
  position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0;
  transition: filter .8s ease;
}
/* de noche (es la historia de las tres de la mañana): la foto se oscurece un poco al empezar */
.historia-escena:not([data-paso="0"]) .historia-foto img { filter: brightness(.72) saturate(.85) hue-rotate(-6deg); }
.historia-escena::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 90px rgba(3, 10, 20, .55);
}
.historia-capa { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease; }
.historia-escena:not([data-paso="0"]) .historia-conos { opacity: 1; }
.historia-escena[data-paso="2"] .historia-marca, .historia-escena[data-paso="3"] .historia-marca,
.historia-escena[data-paso="4"] .historia-marca { opacity: 1; }
.historia-escena[data-paso="3"] .historia-llamada { opacity: 1; }
.historia-escena[data-paso="4"] .historia-habla { opacity: 1; }
/* 1. ve: los conos de las dos cámaras del tótem */
.historia-cono { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.historia-cono-giro { position: absolute; left: 0; top: 0; transform: rotate(var(--angulo)); }
.historia-cono svg {
  position: absolute; top: 0; left: calc(var(--largo, 200px) * var(--proporcion, 1) / -2);
  width: calc(var(--largo, 200px) * var(--proporcion, 1)); height: var(--largo, 200px); max-width: none;
  transform-origin: 50% 0; transform: scale(.3, .05);
  transition: transform 1s cubic-bezier(.2, .8, .2, 1);
}
.historia-escena:not([data-paso="0"]) .historia-cono svg { transform: none; }
.historia-cono + .historia-cono svg { transition-delay: .25s; }
.historia-rec {
  position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px;
  border-radius: 8px; background: rgba(7, 21, 38, .75); color: var(--blanco); font-weight: 800; font-size: .95rem;
  letter-spacing: .08em; opacity: 0; transition: opacity .4s ease;
}
.historia-rec i { width: 11px; height: 11px; border-radius: 50%; background: #ff3b30; animation: rec 1.4s steps(2, jump-none) infinite; }
@keyframes rec { 50% { opacity: .2; } }
.historia-escena:not([data-paso="0"]) .historia-rec { opacity: 1; }
/* 2. entiende: la puerta marcada */
.historia-recuadro {
  position: absolute; border: 3px solid #ffb020; border-radius: 10px;
  box-shadow: 0 0 0 4px rgba(255, 176, 32, .22), 0 0 34px rgba(255, 176, 32, .35), inset 0 0 30px rgba(255, 176, 32, .18);
  transform: scale(1.12); transition: transform .5s cubic-bezier(.2, .8, .2, 1), border-color .4s ease, box-shadow .4s ease;
}
.historia-escena[data-paso="2"] .historia-recuadro, .historia-escena[data-paso="3"] .historia-recuadro,
.historia-escena[data-paso="4"] .historia-recuadro { transform: none; }
.historia-etiqueta {
  position: absolute; left: var(--etiqueta-x, 10%); top: var(--etiqueta-y, 30%); transform: translateY(calc(-100% - 10px));
  display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: var(--etiqueta-max, 300px);
  padding: 7px 13px; border-radius: 10px; background: #ffb020; color: #2a1a00; font-weight: 800; font-size: .98rem; line-height: 1.25;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .4); transition: background .4s ease;
}
.historia-etiqueta i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #2a1a00; animation: rec 1s steps(2, jump-none) infinite; }
/* 4. interviene: se va, y la puerta queda en verde */
.historia-escena[data-paso="4"] .historia-recuadro { border-color: var(--verde); box-shadow: 0 0 0 4px rgba(34, 197, 94, .22), 0 0 30px rgba(34, 197, 94, .3); }
.historia-escena[data-paso="4"] .historia-etiqueta { background: var(--verde); color: #04260f; font-size: 0; gap: 0; }
.historia-escena[data-paso="4"] .historia-etiqueta::after { content: "Se fue · 03:03 · nadie tuvo que salir"; font-size: .98rem; }
.historia-escena[data-paso="4"] .historia-etiqueta i { display: none; }
/* 3. alguien mira: el operador de la central, como una videollamada */
.historia-llamada {
  inset: auto; right: 16px; top: 16px; width: min(46%, 320px); border-radius: 14px; overflow: hidden;
  background: #000; box-shadow: 0 16px 40px rgba(0, 0, 0, .55); border: 2px solid rgba(255, 255, 255, .85);
  transform: translateY(-10px) scale(.96); transition: opacity .5s ease, transform .5s ease;
}
.historia-escena[data-paso="3"] .historia-llamada { transform: none; }
.historia-llamada video { display: block; width: 100%; aspect-ratio: 720 / 540; object-fit: cover; background: #0b1f33; }
.historia-llamada-barra {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: rgba(7, 21, 38, .92);
  color: var(--blanco); font-weight: 700; font-size: .88rem; line-height: 1.2;
}
.historia-llamada-barra i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 8px var(--verde); }
/* 4. interviene: el tótem habla */
.historia-ondas { position: absolute; left: var(--x, 70%); top: var(--y, 50%); width: 0; height: 0; }
.historia-ondas i {
  position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 50%;
  border: 3px solid rgba(160, 220, 255, .9); opacity: 0;
}
.historia-escena[data-paso="4"] .historia-ondas i { animation: ondas 1.6s ease-out infinite; }
.historia-escena[data-paso="4"] .historia-ondas i + i { animation-delay: .8s; }
@keyframes ondas { from { transform: scale(.6); opacity: .95; } to { transform: scale(3.4); opacity: 0; } }
.historia-globo {
  /* nunca más arriba que la etiqueta de la puerta (su borde de abajo está 10 px sobre
     --etiqueta-y): en un celular de 390 × 664 el globo del paso 4 tapaba "Se fue · 03:03" */
  position: absolute; right: calc(100% - var(--x, 70%) + 46px); top: max(calc(var(--y, 50%) - 120px), calc(var(--etiqueta-y, 0px) - 2px));
  width: max-content; max-width: min(260px, 60%); padding: 12px 16px; border-radius: 16px 16px 4px 16px;
  background: rgba(255, 255, 255, .97); color: var(--noche); font-weight: 800; font-size: 1.08rem; line-height: 1.3;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
  transform: translateY(8px); transition: transform .5s ease .15s;
}
.historia-escena[data-paso="4"] .historia-globo { transform: none; }
.historia-pasos { grid-column: 1; grid-row: 1; list-style: none; margin: 0; padding: 8vh 0 22vh; }
.historia-paso {
  min-height: 64vh; display: flex; flex-direction: column; justify-content: center;
  opacity: .32; transition: opacity .45s ease;
}
.historia-paso.activo { opacity: 1; }
.historia-n {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 50%;
  border: 2px solid var(--azul); background: rgba(83, 144, 201, .16); color: var(--blanco); font-weight: 800; font-size: 1.35rem;
  transition: background .3s ease, box-shadow .3s ease;
}
.historia-paso.activo .historia-n { background: var(--azul); box-shadow: 0 0 0 6px rgba(83, 144, 201, .25); }
.historia-paso h3 { margin: 0 0 10px; font-size: clamp(1.9rem, 1.2rem + 1.8vw, 2.8rem); line-height: 1.1; }
.historia-paso p { margin: 0; max-width: 32ch; font-size: clamp(1.18rem, 1rem + .45vw, 1.4rem); line-height: 1.5; color: #d3e2f0; }
.historia-cierre { margin-top: clamp(8px, 2vw, 24px); }
.historia-remate { margin: 0 0 28px; max-width: 54ch; font-size: clamp(1.25rem, 1.05rem + .6vw, 1.6rem); line-height: 1.45; color: #d3e2f0; }
.historia-remate strong { display: block; margin-bottom: 6px; font-size: 1.25em; color: var(--blanco); }
.datos-totem { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.datos-totem li {
  display: grid; gap: 4px; padding: 16px 18px; border-radius: 14px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
}
.datos-totem strong { font-size: .92rem; letter-spacing: .05em; text-transform: uppercase; color: #9fd0ff; }
.datos-totem span { font-size: 1.12rem; font-weight: 700; line-height: 1.35; color: var(--blanco); }

/* lo que hacemos: tarjetas con un dibujo que se mueve una vez al aparecer (y con el mouse) */
.servicios { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.servicio {
  padding: 26px 24px 24px; border-radius: 18px; background: var(--papel); border: 1px solid #dde6f0;
  transition: box-shadow .25s ease, transform .25s ease;
}
.servicio:hover { box-shadow: 0 18px 40px rgba(11, 31, 51, .12); }
.servicio h3 { margin: 16px 0 8px; font-size: 1.4rem; line-height: 1.2; color: var(--noche); }
.servicio p { margin: 0; font-size: 1.12rem; line-height: 1.5; color: var(--tinta-2); }
.servicio .servicio-extra { margin-top: 10px; font-weight: 700; color: var(--azul-oscuro); }
.servicio-icono {
  width: 64px; height: 64px; padding: 6px; border-radius: 16px; overflow: visible;
  background: linear-gradient(155deg, #e8f2fb, #d3e5f5); box-shadow: inset 0 0 0 1px rgba(31, 95, 147, .12);
  fill: none; stroke: var(--azul-oscuro); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
}
.servicio-icono .relleno { fill: var(--azul-oscuro); stroke: none; }
.servicio-icono .pantalla { fill: #bcd8f0; }
.servicio-icono .led { fill: #ff3b30; stroke: none; }
.servicio-icono .timbre { fill: #e8f2fb; }
.servicio-icono * { transform-box: fill-box; }
.servicio-acceso.visto .led, .servicio-acceso:hover .led { animation: led-abre 2.4s ease .3s 1 both; }
@keyframes led-abre { 0%, 18% { fill: #ff3b30; } 22%, 70% { fill: var(--verde); } 76%, 100% { fill: #ff3b30; } }
.servicio-totem.visto .pantalla, .servicio-totem:hover .pantalla { animation: pantalla-prende 1.8s ease .3s 1; }
@keyframes pantalla-prende { 30%, 60% { fill: #7cc4f5; } }
.servicio-camaras .cabeza { transform-origin: 85% 60%; }
.servicio-camaras.visto .cabeza, .servicio-camaras:hover .cabeza { animation: camara-gira 2.6s ease-in-out .3s 1; }
@keyframes camara-gira { 30% { transform: rotate(-12deg); } 70% { transform: rotate(8deg); } }
.servicio-portero .timbre { transform-origin: 50% 50%; }
.servicio-portero.visto .timbre, .servicio-portero:hover .timbre { animation: timbre-toca 1.4s ease .3s 1; }
@keyframes timbre-toca { 20% { transform: scale(.8); fill: #7cc4f5; } 40% { transform: scale(1); } }
.servicio-cerrajeria .hoja { transform-origin: 0% 50%; }
.servicio-cerrajeria.visto .hoja, .servicio-cerrajeria:hover .hoja { animation: puerta-cierra 2s cubic-bezier(.3, 1.4, .5, 1) .3s 1; }
@keyframes puerta-cierra { 0% { transform: scaleX(.35) skewY(-6deg); } 60%, 100% { transform: none; } }
.servicio-guardia .aguja-larga { transform-origin: 50% 100%; }
.servicio-guardia .aguja-corta { transform-origin: 0% 0%; }
.servicio-guardia.visto .aguja-larga, .servicio-guardia:hover .aguja-larga { animation: aguja 2s ease-in-out .3s 1; }
@keyframes aguja { to { transform: rotate(360deg); } }

/* las tarjetas con sección propia (control de acceso, tótem, videoporteros): el título lleva a
   ella y la tarjeta entera se toca */
.servicio { position: relative; }
.servicio h3 a { color: inherit; text-decoration: none; }
.servicio h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 18px; }
.servicio h3:has(a)::after { content: " →"; color: var(--azul); }
.servicio:has(h3 a):hover { border-color: var(--azul); }
.servicio h3 a:focus-visible { outline: none; }
.servicio:has(h3 a:focus-visible) { outline: 3px solid var(--senal); outline-offset: 3px; }

/* ------------------------------------------------------------- control de accesos, videoporteros y cerraduras inteligentes */

/* lo que tenía la web vieja y esta no contaba (Pablo, 14/10/2026). Los textos a un lado y, al
   otro, un aparato que se prueba (equipos.js): el lector, el celular que suena y la cerradura */
.iconos { position: absolute; width: 0; height: 0; overflow: hidden; }
.equipo figure { margin: 0; }
.equipo-grilla { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.equipo-textos h2 { max-width: 17ch; }
.equipo-incluye { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 14px; }
.equipo-incluye li { position: relative; display: grid; gap: 2px; padding-left: 30px; }
.equipo-incluye li::before {
  content: ""; position: absolute; left: 3px; top: .5em; width: 12px; height: 12px; border-radius: 50%;
  background: var(--azul); box-shadow: 0 0 0 5px rgba(83, 144, 201, .2);
}
.equipo-incluye strong { font-size: 1.22rem; line-height: 1.3; color: var(--noche); }
.equipo-incluye span { font-size: 1.1rem; line-height: 1.45; color: var(--tinta-2); }
.seccion-oscura .equipo-incluye strong { color: var(--blanco); }
.seccion-oscura .equipo-incluye span { color: #c9dcee; }
.lector-demo svg, .cerradura-metodos svg {
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* el lector que se prueba: un terminal negro como los faciales que se instalan, los botones de
   cómo abrir y el registro de la puerta */
.lector-demo {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(18px, 3vw, 30px); align-items: start;
  padding: clamp(20px, 3vw, 30px); border-radius: 22px; background: var(--papel); border: 1px solid #dde6f0;
  box-shadow: 0 24px 60px rgba(11, 31, 51, .1);
}
.lector-equipo {
  position: relative; width: clamp(120px, 12vw, 158px); aspect-ratio: 9 / 17; border-radius: 22px;
  padding: 26% 10% 0; display: flex; flex-direction: column; align-items: center; gap: 12%;
  background: linear-gradient(160deg, #2a3442, #0c1118 62%);
  box-shadow: inset 0 0 0 2px #3a4757, inset 0 2px 0 rgba(255, 255, 255, .12), 0 18px 34px rgba(11, 31, 51, .3);
}
.lector-camaras { position: absolute; top: 8%; left: 0; right: 0; display: flex; justify-content: center; gap: 22%; }
.lector-camaras i { width: 10px; height: 10px; border-radius: 50%; background: #2d5a85; box-shadow: 0 0 0 3px #1b2633, 0 0 0 4px #3a4a5c; }
.lector-pantalla {
  position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10%;
  background: radial-gradient(120% 90% at 50% 0%, #1d3b5c, #0a1626); color: #9fd0ff;
  transition: background .3s ease, color .3s ease;
}
.lector-demo .lector-icono { width: 50%; height: auto; stroke-width: 1.5; }
.lector-texto { padding: 0 6px; font-size: clamp(.8rem, .66rem + .3vw, .95rem); font-weight: 700; line-height: 1.2; text-align: center; color: #e3edf7; }
.lector-barrido {
  position: absolute; left: 8%; right: 8%; top: 14%; height: 3px; border-radius: 2px; opacity: 0;
  background: #5cc8ff; box-shadow: 0 0 12px 3px rgba(92, 200, 255, .6);
}
.lector-equipo[data-estado="leyendo"] .lector-barrido { opacity: 1; animation: lector-barre .9s ease-in-out 1; }
@keyframes lector-barre { 50% { top: 62%; } }
.lector-equipo[data-estado="leyendo"] .lector-pantalla { color: #c4e6ff; }
.lector-equipo[data-estado="abierto"] .lector-pantalla { background: radial-gradient(120% 90% at 50% 0%, #17683f, #07301c); color: #8ff0b4; }
.lector-zona { width: 44%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 2px #3a4a5c; }
.lector-zona i { width: 40%; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 2px #3a4a5c; }
.lector-led {
  position: absolute; left: 30%; right: 30%; bottom: 6%; height: 5px; border-radius: 3px;
  background: #ff3b30; box-shadow: 0 0 10px rgba(255, 59, 48, .7); transition: background .2s ease, box-shadow .2s ease;
}
.lector-equipo[data-estado="abierto"] .lector-led { background: var(--verde); box-shadow: 0 0 14px rgba(34, 197, 94, .9); }
.lector-titulo { margin: 0 0 12px; font-size: .92rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--azul-oscuro); }
.lector-abajo { grid-column: 1 / -1; }
.lector-metodos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lector-metodos button {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border-radius: 12px;
  border: 2px solid #c9d8e8; background: var(--blanco); color: var(--noche);
  font: 700 1.08rem/1.2 var(--fuente); text-align: left; cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.lector-metodos button svg { width: 26px; height: 26px; flex: none; color: var(--azul-oscuro); }
.lector-metodos button:hover { border-color: var(--azul); }
.lector-metodos button[aria-pressed="true"] { border-color: var(--azul); background: #e6f1fb; }
.lector-metodos button:active { transform: scale(.98); }
.lector-registro { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lector-registro li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline;
  padding: 10px 12px; border-radius: 10px; background: var(--blanco); border: 1px solid #dde6f0;
  font-size: 1rem; line-height: 1.3;
}
.registro-hora { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tinta-2); }
.registro-que { font-weight: 700; color: #0f7a3f; }
.lector-registro .no-abrio .registro-que { color: #c62828; }
.lector-registro li.nuevo { animation: registro-entra .5s ease 1; }
@keyframes registro-entra { from { opacity: 0; transform: translateY(-8px); background: #e6f6ec; } }

/* el celular que suena: se atiende, se ve a quien tocó y se le abre */
.portero-demo { display: grid; justify-items: center; gap: 16px; }
.telefono {
  /* que entre entero en la pantalla de una notebook */
  width: clamp(236px, min(23vw, (100svh - 200px) * .486), 286px); aspect-ratio: 9 / 18.5; padding: 11px; border-radius: 44px;
  background: linear-gradient(160deg, #2c3847, #0e141c);
  box-shadow: inset 0 0 0 2px #445366, 0 40px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .06);
}
.telefono-pantalla { position: relative; height: 100%; border-radius: 34px; overflow: hidden; background: linear-gradient(180deg, #16304b, #0a1626); color: var(--blanco); }
.telefono-isla { position: absolute; z-index: 3; top: 10px; left: 35%; right: 35%; height: 22px; border-radius: 12px; background: #000; }
.portero-llamada, .portero-video { position: absolute; inset: 0; transition: opacity .35s ease, visibility .35s; }
.portero-demo:not([data-estado="llamando"]) .portero-llamada,
.portero-demo[data-estado="llamando"] .portero-video { opacity: 0; visibility: hidden; }
.portero-llamada { display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 24% 16px 12%; text-align: center; }
.portero-timbre {
  position: relative; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center;
  background: var(--azul); box-shadow: 0 0 0 8px rgba(83, 144, 201, .2);
}
.portero-timbre svg { width: 46px; height: 46px; fill: none; stroke: var(--blanco); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transform-origin: 50% 20%; }
.portero-timbre i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(159, 208, 255, .75); opacity: 0; }
/* suena unas veces cuando se lo ve, no para siempre */
.portero-demo.suena .portero-timbre i { animation: portero-anillo 1.8s ease-out 4; }
.portero-demo.suena .portero-timbre i + i { animation-delay: .9s; }
.portero-demo.suena .portero-timbre svg { animation: portero-campana 1.8s ease-in-out 4; }
@keyframes portero-anillo { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes portero-campana { 0%, 40%, 100% { transform: none; } 8% { transform: rotate(14deg); } 16% { transform: rotate(-12deg); } 24% { transform: rotate(8deg); } 32% { transform: rotate(-5deg); } }
.portero-quien { margin: 0; display: grid; gap: 4px; }
.portero-quien strong { font-size: 1.25rem; line-height: 1.2; }
.portero-quien span { font-size: 1rem; color: #9fb8d0; }
.portero-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 18px;
  border: 0; border-radius: 999px; background: rgba(255, 255, 255, .16); color: var(--blanco);
  font: 700 1.08rem/1 var(--fuente); cursor: pointer; transition: background .2s ease, transform .15s ease;
}
.portero-boton:active { transform: scale(.97); }
.portero-boton svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.portero-atender, .portero-abrir { background: #1faa53; box-shadow: 0 10px 24px rgba(31, 170, 83, .35); }
.portero-atender:hover, .portero-abrir:hover { background: #1c9a4b; }
.portero-atender { width: 100%; }
.portero-atender svg { fill: currentColor; stroke: none; }
.portero-hablar[aria-pressed="true"] { background: var(--azul); }
.portero-camara { position: absolute; inset: 0; width: 100%; height: 100%; }
.portero-envivo {
  position: absolute; top: 42px; left: 12px; display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; background: rgba(7, 21, 38, .72); font-size: .82rem; font-weight: 700;
}
.portero-envivo i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; }
.portero-botones { position: absolute; left: 16px; right: 16px; bottom: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.portero-botones .portero-boton { padding: 0 10px; }
/* hablando: tres barras que suben y bajan, arriba de los botones */
.portero-ondas { position: absolute; left: 50%; bottom: 92px; display: flex; gap: 5px; transform: translateX(-50%); opacity: 0; transition: opacity .2s ease; }
.portero-ondas i { width: 6px; height: 24px; border-radius: 3px; background: var(--blanco); transform: scaleY(.3); }
.portero-demo.hablando .portero-ondas { opacity: 1; }
.portero-demo.hablando .portero-ondas i { animation: portero-onda .5s ease-in-out infinite alternate; }
.portero-demo.hablando .portero-ondas i:nth-child(2) { animation-delay: .17s; }
.portero-demo.hablando .portero-ondas i:nth-child(3) { animation-delay: .34s; }
@keyframes portero-onda { to { transform: scaleY(1); } }
.portero-abierto {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  background: rgba(6, 46, 27, .84); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s;
}
.portero-demo[data-estado="abierto"] .portero-abierto { opacity: 1; visibility: visible; }
.portero-demo[data-estado="abierto"] .portero-botones, .portero-demo[data-estado="abierto"] .portero-ondas { visibility: hidden; }
.portero-abierto p { margin: 0; display: grid; justify-items: center; gap: 12px; font-size: 1.4rem; font-weight: 800; }
.portero-abierto p svg { width: 68px; height: 68px; padding: 14px; border-radius: 50%; background: var(--verde); fill: none; stroke: var(--blanco); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.portero-pie { font-size: 1rem; color: #9fb8d0; text-align: center; }

/* la cerradura inteligente: se marca el código, la luz pasa a verde y baja la manija (una vez al
   aparecer, y con el mouse encima) */
.cerradura-demo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(18px, 3vw, 32px); align-items: center; }
.cerradura-dibujo { width: 100%; max-width: 290px; height: auto; justify-self: center; border-radius: 16px; box-shadow: 0 30px 60px rgba(11, 31, 51, .22); }
.cerradura-metodos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cerradura-metodos li {
  display: flex; align-items: center; gap: 10px; padding: 9px 18px 9px 12px; border-radius: 999px;
  background: var(--blanco); border: 1px solid #dde6f0; font-size: 1.05rem; font-weight: 700; color: var(--noche);
}
.cerradura-metodos svg { width: 24px; height: 24px; flex: none; color: var(--azul-oscuro); }
.cerradura-teclas text { fill: #34465a; }
.cerradura-manija { transform-box: fill-box; transform-origin: 88% 50%; }
.cerradura-demo.visto .cerradura-teclas text:nth-child(2), .cerradura-demo:hover .cerradura-teclas text:nth-child(2) { animation: cerradura-tecla .5s ease .4s 1; }
.cerradura-demo.visto .cerradura-teclas text:nth-child(5), .cerradura-demo:hover .cerradura-teclas text:nth-child(5) { animation: cerradura-tecla .5s ease .75s 1; }
.cerradura-demo.visto .cerradura-teclas text:nth-child(9), .cerradura-demo:hover .cerradura-teclas text:nth-child(9) { animation: cerradura-tecla .5s ease 1.1s 1; }
.cerradura-demo.visto .cerradura-teclas text:nth-child(10), .cerradura-demo:hover .cerradura-teclas text:nth-child(10) { animation: cerradura-tecla .5s ease 1.45s 1; }
.cerradura-demo.visto .cerradura-led, .cerradura-demo:hover .cerradura-led { animation: cerradura-led 2.6s ease 1.9s 1; }
.cerradura-demo.visto .cerradura-aro, .cerradura-demo:hover .cerradura-aro { animation: cerradura-aro 2.6s ease 1.9s 1; }
.cerradura-demo.visto .cerradura-manija, .cerradura-demo:hover .cerradura-manija { animation: cerradura-manija 1.4s ease 2.2s 1; }
@keyframes cerradura-tecla { 20%, 60% { fill: #9fd0ff; } }
@keyframes cerradura-led { 8%, 80% { fill: var(--verde); } }
@keyframes cerradura-aro { 8%, 80% { stroke: var(--verde); } }
@keyframes cerradura-manija { 30%, 60% { transform: rotate(-16deg); } }

/* el grabador de las cámaras: cuatro cuadros en vivo del mismo edificio (la calle del inicio y el
   hall), con la hora que corre mientras se ve; tocado uno, ocupa los cuatro lugares */
.grabador { display: grid; gap: 14px; justify-items: center; }
.grabador-pantalla {
  width: 100%; max-width: 560px; padding: 10px; border-radius: 18px; background: #0b1119;
  box-shadow: 0 30px 70px rgba(11, 31, 51, .28), inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.grabador-barra {
  margin: 2px 4px 10px; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: .9rem; font-weight: 700; color: #c9dcee; font-variant-numeric: tabular-nums;
}
.grabador-barra span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.grabador-barra i { width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; animation: grabador-rec 1.6s steps(1) infinite; }
@keyframes grabador-rec { 50% { opacity: .25; } }
.grabador-cuadros { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; aspect-ratio: 16 / 10; }
.grabador-cuadro {
  position: relative; overflow: hidden; padding: 0; border: 0; border-radius: 6px;
  background: #16212e; cursor: zoom-in; font: inherit;
}
.grabador-cuadro img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  filter: saturate(.8) contrast(1.04);
}
.grabador-nombre {
  position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: 5px;
  background: rgba(7, 21, 38, .75); color: var(--blanco); font-size: .8rem; font-weight: 700;
}
.grabador-cuadro:hover .grabador-nombre { background: var(--azul-oscuro); }
.grabador-cuadro:focus-visible { outline-offset: -3px; }
.grabador-cuadros.una .grabador-cuadro { display: none; }
.grabador-cuadros.una .grabador-cuadro[aria-pressed="true"] { display: block; grid-area: 1 / 1 / 3 / 3; cursor: zoom-out; }
.grabador-cuadros.una .grabador-nombre { font-size: .95rem; padding: 4px 10px; }
.grabador-pie { font-size: 1rem; color: var(--tinta-2); text-align: center; }
/* qué parte de cada foto ve cada cámara (en la compu, la foto ancha de la calle; en el celular, la
   alta, que es la que eligió el inicio) */
.grabador-vereda img { object-position: 0% 80%; transform: scale(1.5); transform-origin: 8% 88%; }
.grabador-entrada img { object-position: 60% 70%; transform: scale(2.1); transform-origin: 63% 72%; }
.grabador-palier img { transform: scale(1.15); transform-origin: 75% 60%; }
@media (max-aspect-ratio: 4/5) {
  .grabador-vereda img { object-position: 50% 74%; transform: scale(1.2); transform-origin: 30% 74%; }
  .grabador-entrada img { object-position: 50% 58%; transform: scale(1.35); transform-origin: 55% 58%; }
}

/* una sola columna: el aparato debajo del texto */
@media (max-width: 900px) {
  .equipo-grilla { grid-template-columns: minmax(0, 1fr); }
  .lector-demo, .cerradura-demo { max-width: 600px; }
}

/* el celular, con poco texto como el resto: el título, un renglón, el aparato, lo que incluye
   (solo los títulos) y el botón. El aparato va antes de la lista: los textos se desarman en la
   grilla (display: contents) para poder ordenarlos */
@media (max-aspect-ratio: 4/5), (max-width: 760px) {
  .equipo-grilla { gap: 0; }
  .equipo-textos { display: contents; }
  .equipo-grilla > figure { order: 1; margin: 4px 0 26px; }
  .equipo-incluye { order: 2; gap: 10px; margin-bottom: 24px; }
  .equipo-textos > .boton, .equipo-textos > .abono-acciones { order: 3; }
  .equipo-textos > .boton { width: 100%; }
  .equipo-incluye span { display: none; }
  .equipo-incluye strong { font-size: 1.15rem; }
  /* el lector y los botones lado a lado; el registro, abajo a lo ancho */
  .lector-demo { gap: 18px 14px; padding: 16px; }
  .lector-equipo { width: 100px; border-radius: 18px; }
  .lector-titulo { margin-bottom: 8px; font-size: .82rem; }
  .lector-metodos { grid-template-columns: 1fr; gap: 8px; }
  .lector-metodos button { min-height: 46px; font-size: 1.02rem; padding: 0 12px; }
  .lector-metodos button svg { width: 22px; height: 22px; }
  .lector-registro li { font-size: .95rem; grid-template-columns: auto minmax(0, 1fr); }
  .lector-registro .registro-que { grid-column: 2; }
  .lector-texto { font-size: .72rem; }
  .telefono { width: 236px; }
  .cerradura-demo { grid-template-columns: 150px minmax(0, 1fr); gap: 16px; }
  .cerradura-metodos { gap: 8px; }
  .cerradura-metodos li { padding: 7px 14px 7px 10px; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lector-equipo[data-estado="leyendo"] .lector-barrido, .lector-registro li.nuevo, .portero-demo.suena .portero-timbre i,
  .portero-demo.suena .portero-timbre svg, .portero-demo.hablando .portero-ondas i, .cerradura-demo *, .grabador-barra i { animation: none !important; }
  .portero-demo.hablando .portero-ondas i { transform: scaleY(.7); }
}

/* compra o comodato */
.opciones-modelo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 30px; }
.modelo {
  position: relative; padding: 26px 26px 22px; border-radius: 18px; background: var(--blanco); border: 2px solid #dde6f0;
}
.modelo h3 { margin: 0 0 4px; font-size: 1.55rem; color: var(--noche); }
.modelo-bajada { margin: 0 0 14px; font-size: 1.15rem; color: var(--tinta-2); }
.modelo ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.modelo li { position: relative; padding-left: 30px; font-size: 1.12rem; line-height: 1.4; color: var(--tinta); }
.modelo li::before {
  content: ""; position: absolute; left: 4px; top: .25em; width: 8px; height: 14px;
  border: solid var(--azul); border-width: 0 3px 3px 0; transform: rotate(45deg);
}
.modelo-destacado { border-color: var(--azul); box-shadow: 0 16px 40px rgba(31, 95, 147, .14); }
.modelo-sello {
  position: absolute; right: 18px; top: -15px; margin: 0; padding: 4px 12px; border-radius: 999px;
  background: var(--azul); color: var(--blanco); font-weight: 800; font-size: .92rem;
}
.despues-titulo { margin: 46px 0 14px; font-size: 1.5rem; color: var(--noche); }
.despues { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 1.1rem; line-height: 1.4; }
.despues th, .despues td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid #dde6f0; }
.despues thead th { font-size: .95rem; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-2); border-bottom: 2px solid #c8d6e5; }
.despues tbody th { font-weight: 800; color: var(--noche); }
.despues tbody th::first-letter { text-transform: uppercase; }
/* la columna del abono (la primera de datos), en verde */
.despues td:nth-child(2) { color: #0f6b3d; font-weight: 700; background: rgba(34, 197, 94, .07); }
.despues thead th:nth-child(2) { color: #0f6b3d; background: rgba(34, 197, 94, .07); border-radius: 10px 10px 0 0; }

/* las preguntas */
.preguntas { margin-top: 26px; border-top: 1px solid #dde6f0; }
.preguntas details { border-bottom: 1px solid #dde6f0; }
.preguntas summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 68px; padding: 14px 4px;
  cursor: pointer; list-style: none; font-size: clamp(1.15rem, 1.05rem + .3vw, 1.3rem); font-weight: 800; color: var(--noche);
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--azul); color: var(--azul-oscuro); font-size: 1.6rem; font-weight: 700; line-height: 1;
  transition: transform .25s ease, background .2s ease;
}
.preguntas details[open] summary::after { transform: rotate(45deg); background: #e8f2fb; }
.preguntas summary:hover { color: var(--azul-oscuro); }
.preguntas details p { margin: -2px 0 20px; max-width: 64ch; font-size: 1.15rem; line-height: 1.55; color: var(--tinta-2); padding: 0 4px; }

/* las tres líneas */
.lineas-contacto { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lineas-contacto a {
  position: relative; display: grid; gap: 4px; height: 100%; padding: 22px 22px 22px 22px; border-radius: 18px;
  text-decoration: none; background: rgba(255, 255, 255, .06); border: 2px solid rgba(255, 255, 255, .16);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.lineas-contacto a:hover { background: rgba(31, 170, 83, .16); border-color: #1faa53; transform: translateY(-2px); }
.lineas-contacto strong { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); line-height: 1.15; color: var(--blanco); }
.linea-que { font-size: 1.08rem; font-weight: 800; color: #9fd0ff; }
.linea-cuando { font-size: 1.02rem; color: #c9dcee; }
.lineas-contacto li:last-child a { border-color: rgba(255, 176, 32, .55); }
.lineas-contacto li:last-child .linea-que { color: #ffcb6b; }
.contacto-local { margin: 26px 0 0; max-width: 62ch; font-size: 1.12rem; line-height: 1.55; color: #c9dcee; }
.contacto-local a { font-weight: 700; text-underline-offset: 4px; }

@media (max-width: 980px) {
  .servicios { grid-template-columns: 1fr 1fr; }
  .datos-totem { grid-template-columns: 1fr 1fr; }
}

/* el celular: la foto de la historia arriba, fija, y los pasos pasan debajo */
@media (max-aspect-ratio: 4/5), (max-width: 760px) {
  .cifras-lista { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
  .cifras span { font-size: 1rem; }
  .historia-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .historia-escena {
    grid-column: 1; grid-row: 1; z-index: 2; top: calc(var(--cabecera) + 6px); height: 42svh; min-height: 250px;
    aspect-ratio: auto; max-height: none; border-radius: 16px;
  }
  .historia-pasos { grid-row: 2; padding: 0 0 18svh; }
  .historia-paso { min-height: 52svh; justify-content: flex-start; padding-top: 28px; }
  .historia-paso h3 { font-size: 1.8rem; }
  .historia-n { width: 44px; height: 44px; font-size: 1.15rem; margin-bottom: 10px; }
  /* abajo a la derecha: arriba está la etiqueta de la puerta (en este paso el tótem no hace falta) */
  .historia-llamada { width: 46%; right: 10px; top: auto; bottom: 10px; }
  .historia-llamada-barra { font-size: .74rem; padding: 4px 7px; }
  .historia-rec { left: 10px; bottom: 10px; font-size: .8rem; padding: 4px 9px; }
  .historia-etiqueta, .historia-escena[data-paso="4"] .historia-etiqueta::after { font-size: .86rem; }
  .historia-globo { font-size: .95rem; max-width: 52%; top: max(calc(var(--y, 50%) - 96px), calc(var(--etiqueta-y, 0px) - 2px)); right: calc(100% - var(--x, 70%) + 30px); }
  .servicios, .opciones-modelo, .lineas-contacto, .datos-totem { grid-template-columns: 1fr; }
  .abono-grilla { grid-template-columns: minmax(0, 1fr); }
  .expensas-papel { transform: none; padding: 20px 18px 18px; }
  .abono-acciones .boton { width: 100%; }
  .servicio { padding: 22px 20px; }
  /* la tabla, de a una situación por tarjeta */
  .despues thead { display: none; }
  .despues, .despues tbody, .despues tr, .despues th, .despues td { display: block; }
  .despues tr { margin-bottom: 12px; border-radius: 14px; overflow: hidden; border: 1px solid #dde6f0; background: var(--blanco); }
  .despues tbody th { padding: 12px 14px 4px; border: 0; font-size: 1.15rem; }
  .despues td { padding: 6px 14px 10px; border: 0; }
  .despues td::before { content: attr(data-titulo); display: block; font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-2); font-weight: 700; }
  .despues td:nth-child(2)::before { color: #0f6b3d; }
  .preguntas summary { min-height: 60px; }
}

@media (prefers-reduced-motion: reduce) {
  .historia-cono svg, .historia-recuadro, .historia-llamada, .historia-globo { transition: none; }
  .historia-escena[data-paso="4"] .historia-ondas i, .historia-rec i, .historia-etiqueta i { animation: none; }
}

/* el celular, con poco texto (Alex, 08/10: "con tanto texto no se entiende nada"): títulos,
   datos cortos y botones. Lo largo queda para la compu (.solo-escritorio) y, donde hace falta,
   va una versión de un renglón (.solo-celular, en index.html y en los primeros planos) */
.solo-celular { display: none !important; }
@media (max-aspect-ratio: 4/5), (max-width: 760px) {
  .solo-celular { display: revert !important; }
  /* el inicio: solo el título y los dos botones (el WhatsApp queda en la cabecera) */
  .hero .antetitulo, .hero .bajada, .hero .hablar { display: none; }
  /* lo que ya se dice en otra parte, o que se entiende con el título */
  .abono-incluye span, .expensas, .historia-remate, .datos-totem, .modelo ul, .despues-titulo, .despues,
  .servicio p, #servicios .texto-grande, #contacto .texto-grande, .contacto-local { display: none; }
  .texto-grande { margin-bottom: 22px; }
  .abono-incluye { gap: 12px; }
  .abono-incluye strong { font-size: 1.15rem; }
  .historia-paso p { font-size: 1.15rem; }
  /* con un renglón por paso alcanza con menos recorrido entre uno y otro */
  .historia-paso { min-height: 40svh; }
  /* el botón, por encima de la sombra de la foto fija (antes la tapaban las tarjetas de datos) */
  .historia-cierre { position: relative; z-index: 3; margin-top: 20px; }
  /* debajo de la foto fija, un fundido del color del fondo: el texto que sube se esfuma al pasar
     por ahí, en vez de dejar asomar el final de una frase */
  .historia-escena { box-shadow: 0 30px 18px 2px var(--noche), 0 0 0 1px rgba(255, 255, 255, .08); }
  .modelo { padding: 22px 20px 18px; }
  .modelo-bajada { margin: 0; }
  /* los servicios, de a dos: el dibujo y el nombre */
  .servicios { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
  .servicio { padding: 16px 14px 18px; }
  .servicio-icono { width: 52px; height: 52px; border-radius: 14px; }
  .servicio h3 { margin: 12px 0 0; font-size: 1.1rem; }
  .detalle-cuerpo .solo-celular > :last-child { margin-bottom: 0; }
  .operador-globo span { display: none; }
  /* en el presupuesto, el nombre del equipo solo (las dos líneas se pisaban entre puntos vecinos) */
  .armador-punto-texto small { display: none; }
}

/* ------------------------------------------------------------- intro */

#intro { display: none; }
.con-intro #intro {
  display: block; position: fixed; inset: 0; z-index: 60; cursor: pointer;
}
.intro-cielo {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 42%, #2a6aa6 0%, #184a7c 38%, #0d2c4d 72%, #071526 100%);
}
.intro-cielo::after {
  /* el borde de abajo se funde con el cielo de la escena cuando sube el telón */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 26vh;
  background: linear-gradient(180deg, rgba(7, 21, 38, 0), rgba(7, 21, 38, 0));
}
.intro-logo {
  position: absolute; left: 50%; top: 50%;
  width: min(72vw, 640px);
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
}
.intro-logo svg { width: 100%; height: auto; overflow: visible; }
.intro-barrido {
  position: absolute; top: 50%; left: 0; width: 3px; height: min(52vw, 470px);
  transform: translateY(-50%);
  background: linear-gradient(180deg, rgba(22, 165, 232, 0), #bfe9ff 30%, #ffffff 50%, #bfe9ff 70%, rgba(22, 165, 232, 0));
  box-shadow: 0 0 18px 6px rgba(22, 165, 232, .55), 0 0 60px 18px rgba(22, 165, 232, .25);
  opacity: 0;
}
.intro-saltar {
  position: absolute; right: 20px; bottom: 20px;
  min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .08); color: var(--blanco); font: 600 1rem var(--fuente); cursor: pointer;
}
/* mientras corre la intro, lo de atrás espera */
.con-intro .marca { opacity: 0; }
.con-intro .hero-texto > *, .con-intro .seguir { opacity: 0; }
.con-intro .cabecera-acciones { opacity: 0; }

/* ------------------------------------------------------------- celular */

@media (max-aspect-ratio: 4/5), (max-width: 760px) {
  :root { --cabecera: 66px; }
  .solo-escritorio { display: none !important; }
  .boton-whatsapp span { display: none; }
  .boton-whatsapp { padding: 0 12px; }
  .boton-telefonos { padding: 0 13px 0 11px; font-size: 1rem; }
  .escena-foto { object-position: 55% 50%; transform-origin: 55% 50%; }
  .escena-velo {
    background:
      linear-gradient(180deg, rgba(7, 21, 38, .92) 0%, rgba(7, 21, 38, .78) 26%, rgba(7, 21, 38, .2) 44%, rgba(7, 21, 38, 0) 54%),
      linear-gradient(0deg, rgba(7, 21, 38, .94) 0%, rgba(7, 21, 38, .75) 18%, rgba(7, 21, 38, 0) 36%);
  }
  .hero-texto {
    max-width: none; justify-content: space-between;
    padding: calc(var(--cabecera) + 8px) 20px calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .antetitulo { font-size: .88rem; margin-bottom: 10px; }
  .antetitulo .solo-escritorio { display: none; }
  h1 { font-size: clamp(1.8rem, 1rem + 3.7vw, 2.4rem); }
  .bajada { font-size: 1.1rem; margin-top: 12px; }
  .acciones { flex-direction: column; gap: 10px; margin-top: auto; }
  .boton { width: 100%; min-height: 56px; font-size: 1.15rem; }
  /* el desenfoque de atrás, sobre la escena que se mueve, se recalcula en cada cuadro: en el
     celular traba. Un fondo más tapado se lee igual o mejor */
  .boton-secundario { backdrop-filter: none; background: rgba(7, 21, 38, .6); }
  .hablar { text-align: center; margin-top: 14px; font-size: 1.02rem; }
  .seguir { display: none; }
  /* las etiquetas de los equipos: chicas, el nombre y la flecha, al lado de cada equipo
     (escena.js). Lo que hace cada una lo dice su aria-label */
  .cartel-tarjeta { gap: 7px; padding: 4px 12px 4px 4px; border-radius: 999px; box-shadow: 0 8px 20px rgba(3, 10, 20, .45); }
  .mano-pista { right: 4px; top: calc(100% - 12px); width: 38px; height: 38px; }
  .mano-pista::before { left: 4px; top: -8px; width: 20px; height: 20px; }
  .cartel-icono { width: 32px; height: 32px; border-radius: 50%; box-shadow: none; }
  .cartel-icono svg { width: 21px; height: 21px; }
  .cartel-textos { display: flex; align-items: center; gap: 3px; }
  .cartel-titulo { font-size: 1.02rem; line-height: 1.1; }
  .cartel-accion span { display: none; }
  .cartel-accion svg { width: 17px; height: 17px; }
  .cartel-punto { left: -9px; top: -9px; width: 18px; height: 18px; box-shadow: 0 0 0 4px rgba(83, 144, 201, .6), 0 3px 10px rgba(0, 0, 0, .5); }
  .cartel-punto::before { inset: 5px; }
  .pista { display: none; }
  /* el primer plano: una hoja abajo, de alto limitado, para que el equipo se vea arriba. Si el
     texto no entra, se desliza adentro de la hoja (y se esfuma abajo: detalle.js pone hay-mas);
     el título y los botones quedan siempre a la vista */
  .detalle-velo { background: linear-gradient(0deg, rgba(7, 21, 38, .97) 0%, rgba(7, 21, 38, .93) 44%, rgba(7, 21, 38, .3) 58%, rgba(7, 21, 38, 0) 68%); }
  .detalle-panel {
    top: auto; width: auto; right: 0; justify-content: flex-start;
    max-height: min(56%, calc(100% - var(--cabecera) - 64px));
    padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  }
  .detalle-ante { display: none; }
  .detalle-panel h2 { flex: none; margin-bottom: 10px; font-size: clamp(1.55rem, 1.05rem + 2.4vw, 2rem); line-height: 1.12; }
  .detalle-cuerpo { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; font-size: 1.08rem; line-height: 1.45; }
  .detalle-cuerpo > :last-child { margin-bottom: 0; }
  .detalle-cuerpo.hay-mas {
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent);
  }
  .detalle-acciones { flex: none; gap: 10px; margin-top: 14px; }
  .detalle-volver { position: fixed; top: calc(var(--cabecera) + 6px); left: 16px; margin: 0; background: rgba(7, 21, 38, .78); }
  .detalle-acciones .boton { width: 100%; }
  .operador-globo { padding: 9px 14px 10px; max-width: min(250px, calc(100vw - 32px)); }
  .operador-globo strong { font-size: 1.08rem; }
  .operador-globo span { font-size: .92rem; }
  /* el pedido en el celular: una hoja que sube desde abajo (y sube más con el teclado abierto,
     formulario.js pone --teclado); arriba queda el lector con el llavero */
  .con-pedido .detalle-panel {
    width: auto; top: auto; bottom: var(--teclado, 0px); justify-content: flex-start; scroll-padding-top: 8px;
    max-height: calc(100% - var(--cabecera) - 62px - var(--teclado, 0px));
    padding: 30px 20px 0;
    background: linear-gradient(180deg, rgba(7, 21, 38, 0) 0, rgba(7, 21, 38, .94) 30px, rgba(7, 21, 38, .97) 100%);
  }
  .con-pedido .detalle-velo {
    background: linear-gradient(0deg, rgba(7, 21, 38, .96) 0%, rgba(7, 21, 38, .8) 50%, rgba(7, 21, 38, .15) 72%, rgba(7, 21, 38, 0) 80%);
  }
  .pedido-progreso { margin-bottom: 12px; font-size: 1rem; }
  .pedido-pregunta { font-size: clamp(1.5rem, 1.1rem + 2.2vw, 1.9rem); }
  .pedido-ayuda { font-size: 1.08rem; }
  .opciones { gap: 8px; margin-top: 12px; }
  .opcion-caja { min-height: 60px; padding: 9px 14px; }
  .pedido-botones { margin-top: 18px; }
  .pedido-botones .boton { width: 100%; }
  .pedido-pie { margin-top: 6px; padding-top: 12px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); gap: 8px; }
  .pedido-pie .boton-enviar { width: 100%; }
  .pedido-atras { min-height: 52px; }
  .resumen { padding: 6px 12px 4px 42px; }
  .resumen::before { left: 10px; }
  .resumen-fila { grid-template-columns: 1fr auto; gap: 0 10px; }
  .resumen dt, .resumen dd { grid-column: 1; }
  .resumen-cambiar { grid-column: 2; grid-row: 1 / span 2; }
  .boton-enviar { max-width: none; }
  .pedido-botones-listo .boton-enviar { width: 100%; }
  /* el presupuesto en el celular: una hoja que sube desde abajo; arriba queda la cuadra */
  .armador-velo {
    background: linear-gradient(0deg, rgba(7, 21, 38, .96) 0%, rgba(7, 21, 38, .9) 44%, rgba(7, 21, 38, .2) 58%, rgba(7, 21, 38, 0) 66%),
      linear-gradient(180deg, rgba(7, 21, 38, .55) 0%, rgba(7, 21, 38, 0) 16%);
  }
  .armador-panel {
    top: auto; right: 0; width: auto; bottom: var(--teclado, 0px);
    -webkit-mask-image: none; mask-image: none;
    height: min(var(--alto-armador, 52%), calc(100% - var(--cabecera) - 64px - var(--teclado, 0px)));
    padding: 26px 20px 0;
    background: linear-gradient(180deg, rgba(7, 21, 38, 0) 0, rgba(7, 21, 38, .94) 26px, rgba(7, 21, 38, .97) 100%);
  }
  /* pasada la primera pantalla ya no se tocan puntos: la hoja sube y la cuadra queda de fondo */
  .armador:not(.en-equipos) .armador-panel {
    height: min(max(var(--alto-armador, 52%), 64%), calc(100% - var(--cabecera) - 64px - var(--teclado, 0px)));
  }
  .armador-ante { display: none; }
  .armador-form .pedido-pregunta { font-size: clamp(1.45rem, 1.05rem + 2vw, 1.8rem); }
  .fichas-tres, .fichas-cuatro { grid-template-columns: 1fr 1fr; }
  .item-caja, .item-cantidad { min-height: 60px; }
  .item-textos small { font-size: .95rem; }
  .contador-boton { width: 48px; height: 48px; }
  .armador-punto-texto { font-size: .95rem; padding: 6px 11px; }
  /* el saludo del tótem, chico y arriba de la pantalla (el tótem queda contra el borde) */
  .efecto-hola { right: -14px; bottom: calc(140px * var(--escala, 1) + 22px); padding: 8px 12px 9px; }
  .efecto-hola strong { font-size: 1rem; }
  .efecto-hola span { display: none; }
  /* el pie de la hoja, compacto: la cuenta en un renglón y "Atrás" chico al lado de "Seguir" */
  .armador-form .pedido-pie { flex-wrap: wrap; gap: 8px; padding-top: 10px; }
  .armador-form .pedido-pie .boton { width: auto; flex: 1 1 auto; min-height: 58px; }
  .armador-form .pedido-pie .pedido-atras { flex: 0 0 auto; order: -1; padding: 0 18px; }
  /* en el resumen, "Enviar por WhatsApp" primero y a lo ancho; "Atrás" abajo */
  .armador-form .pedido-pie .boton-enviar { order: -2; flex-basis: 100%; }
  .armador-form .pedido-pie .boton-enviar:not([hidden]) ~ .pedido-atras { flex: 1 1 auto; min-height: 50px; }
  .armador-pie-fila { order: -2; }
  .armador-cuenta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1rem; }
  .pie-grilla { grid-template-columns: 1fr; }
  .direccion { grid-column: auto; }
  .lineas span { min-width: 0; width: 100%; }
}

/* notebooks (poca altura): el panel del presupuesto, más compacto, para que se vea más lista */
@media (min-aspect-ratio: 4/5) and (min-width: 761px) and (max-height: 820px) {
  .armador-ante { display: none; }
  .armador-panel .detalle-volver { min-height: 44px; margin-bottom: 10px; }
  .armador-form .pedido-progreso { margin-bottom: 10px; }
  .armador-form .pedido-pregunta { font-size: 1.7rem; }
  .armador-form .pedido-ayuda { font-size: 1.05rem; }
  .item-caja, .item-cantidad { min-height: 56px; padding-top: 7px; padding-bottom: 7px; }
  .items { gap: 7px; margin-top: 10px; }
  .armador-cuenta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .armador-form .pedido-pie { padding-top: 10px; padding-bottom: 14px; }
}

/* pantallas bajas (el celular acostado): el panel del presupuesto, compacto */
@media (max-height: 520px) and (min-aspect-ratio: 4/5) {
  .armador-panel { padding-top: 4px; }
  .armador-panel .detalle-volver { min-height: 40px; margin-bottom: 8px; }
  .armador-ante, .armador-form .pedido-ayuda { display: none; }
  .armador-form .pedido-progreso { margin-bottom: 6px; }
  .armador-form .pedido-pregunta { font-size: 1.35rem; margin-bottom: 4px; }
  .armador-form .pedido-pie { padding-top: 8px; padding-bottom: 10px; margin-top: 4px; }
  .armador-form .pedido-pie .boton { min-height: 50px; }
  .armador-cuenta { display: none; }
  .armador-pie-fila { min-height: 0; }
  /* "Darse vuelta" en un renglón, abajo a la izquierda (pegado al panel, sobre el piso): abajo a
     la derecha tapaba la Shabat, y tocarla daba vuelta la vista; arriba rozaba el domo */
  .armador-vuelta { left: calc(min(580px, 44vw) + 14px); right: auto; bottom: 12px; min-height: 44px; padding: 4px 16px 4px 10px; gap: 8px; }
  .armador-vuelta small { display: none; }
  .armador-vuelta svg { width: 26px; height: 26px; }
}

/* el primer plano en una pantalla baja con el diseño de la compu (un celular grande acostado,
   844 × 390): no entraba, el panel centrado se salía parejo por arriba y por abajo, y el "Volver"
   quedaba encima del logo (12/10/2026). Más compacto, arriba, y si igual no entra, se desliza */
@media (max-height: 520px) and (min-aspect-ratio: 4/5) and (min-width: 761px) {
  .detalle-panel {
    justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
    padding-top: calc(var(--cabecera) + 4px); padding-bottom: 12px;
  }
  .detalle-panel::-webkit-scrollbar { display: none; }
  .detalle-ante { display: none; }
  .detalle-panel > .detalle-volver { min-height: 40px; margin-bottom: 8px; }
  .detalle-panel h2 { margin-bottom: 8px; font-size: 1.7rem; }
  .detalle-cuerpo { font-size: 1.05rem; }
  .detalle-acciones { margin-top: 10px; gap: 8px; }
  .detalle-acciones .boton { min-height: 48px; padding: 0 20px; font-size: 1.05rem; }
}

/* lo que no se ve no se anima: escena.js y secciones.js marcan lo que quedó fuera de la vista */
.fuera-de-vista *, .fuera-de-vista *::before, .fuera-de-vista *::after { animation-play-state: paused !important; }
/* ni lo que quedó tapado: los carteles escondidos (en el presupuesto, en un primer plano) y la
   cuadra entera debajo de un primer plano. Con algo moviéndose encima (el llavero que se apoya en
   el lector), el celular recalculaba en cada cuadro los latidos que no se ven: con el primer plano
   del llavero, un 30 % del hilo principal (12/10/2026) */
.carteles:not(.visibles) *, .carteles:not(.visibles) *::before, .carteles:not(.visibles) *::after,
.con-detalle .hero *, .con-detalle .hero *::before, .con-detalle .hero *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .seguir span, .cartel-punto::after, .etiqueta-papel, .puerta-pista-punto::after,
  .armador-mas-abajo svg, .armador-punto:not(.puesto) .armador-punto-zona::after, .armador-punto.recien::after, .barre .efecto-giro,
  .efecto-timbre.suena i { animation: none; }
  /* las que faltaban (12/10/2026): el llavero que se hamaca y su latido, la mano de la pista, el
     latido de "Entrar al hall" y los dibujos de los servicios al pasar el mouse */
  .figura-llavero img, .figura-llavero::after, .pista svg, .armador-entrar-marca::after, .mano-pista, .mano-pista::before,
  .servicio-icono, .servicio-icono * { animation: none !important; }
}