/* ═══════════════════════════════════════════════════════════════
   KOMPAX · Hoja de estilos  (v2)
   Noir y latón. La web se ve como el producto, a propósito:
   el que la mira ya está viendo el sistema.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --noche:      #08080A;
  --carbon:     #101012;
  --carbon-alt: #15151A;
  --elevado:    #1C1C22;
  --elevado2:   #232329;

  --laton:      #C9A84C;
  --laton-luz:  #E2C47A;
  --laton-som:  #8A6F28;
  --laton-vel:  rgba(201,168,76,.11);

  --marfil:     #F8F5EE;
  --texto:      #B9B3AA;
  --tenue:      #7C766D;
  --apagado:    #4E4941;
  --linea:      rgba(255,255,255,.07);
  --linea2:     rgba(255,255,255,.12);

  --libre:      #2E7D55;
  --libre-luz:  #5FCB96;
  --reservada:  #C9A84C;
  --ocupada:    #C0392B;
  --ocupada-luz:#EE8074;
  --alerta:     #D4840A;

  --display: 'Cormorant Garamond', Georgia, serif;
  --cuerpo:  'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

  --ancho: 1180px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

/* El salto entre secciones lo controla pagina.js (función saltarA),
   con una duración fija sin importar la distancia — así un clic desde
   "Funciones en profundidad" hasta "Contacto" (son 13 secciones en
   total) no se siente como si la página "girara" pasando por todo lo
   del medio. Por eso acá scroll-behavior queda en "auto": si por lo
   que sea el JS no llega a interceptar un clic, el navegador salta
   directo y sin animación en vez de recorrer toda la página. */
html{ scroll-behavior:auto; }

/* El header queda fijo arriba (position:fixed) — sin esto, cualquier
   clic que salta a una sección (el menú, "Ver cómo funciona", "Ver
   más" de cada función, etc.) la deja tapada detrás del header: el
   navegador lleva el borde de arriba de la sección justo a y=0, y ahí
   mismo está el header encima. Con scroll-margin-top el salto se
   detiene un poco más abajo, dejando toda la sección a la vista desde
   su primera línea — funciona tanto para los enlaces #ancla comunes
   como para el salto que calcula el JS. */
section[id],
.feat-detalle{ scroll-margin-top:96px; }

body{
  background:var(--noche);
  color:var(--texto);
  font-family:var(--cuerpo);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.env{ max-width:var(--ancho); margin:0 auto; padding:0 32px; }

/* ── Tipografía ─────────────────────────────────────────────── */
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; color:var(--marfil); line-height:1.15; }
h1{ font-size:clamp(1.75rem, 4.3vw, 3.6rem); letter-spacing:-.01em; }
h2{ font-size:clamp(2rem, 4.2vw, 3.2rem); letter-spacing:-.005em; }
h3{ font-size:1.42rem; }
h4{ font-size:1.05rem; }

.rotulo{
  font-family:var(--cuerpo); font-size:.66rem; font-weight:600;
  letter-spacing:.28em; text-transform:uppercase; color:var(--laton);
  display:block; margin-bottom:1.1rem;
}
.bajada{ font-size:1.14rem; color:var(--texto); max-width:62ch; }
.chico{ font-size:.86rem; color:var(--tenue); }
em{ color:var(--laton-luz); font-style:normal; }
strong{ color:var(--marfil); font-weight:600; }

/* ── Secciones ──────────────────────────────────────────────── */
section{ padding:clamp(5rem, 11vw, 8.5rem) 0; position:relative; }
.alt{ background:var(--carbon); }
.alt2{ background:var(--carbon-alt); }
.borde-sup{ border-top:1px solid var(--linea); }

/* ── Barra superior ─────────────────────────────────────────── */
.barra{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:1.05rem 0; transition:background .35s, backdrop-filter .35s, border-color .35s;
  border-bottom:1px solid transparent;
}
.barra.pegada{
  background:rgba(8,8,10,.92); backdrop-filter:blur(14px);
  border-bottom-color:var(--linea);
}
.barra-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.marca{ display:flex; align-items:center; gap:.7rem; text-decoration:none; }
.marca img{ width:32px; height:32px; border-radius:6px; }
.marca span{
  font-family:var(--display); font-size:1.32rem; font-weight:600;
  color:var(--marfil); letter-spacing:.19em;
}
.nav{ display:flex; align-items:center; gap:1.9rem; }
.nav-link{
  color:var(--texto); text-decoration:none; font-size:.79rem;
  letter-spacing:.11em; text-transform:uppercase; font-weight:500;
  transition:color .2s; background:none; border:0; cursor:pointer;
  font-family:var(--cuerpo); display:flex; align-items:center;
}
.nav-link:hover{ color:var(--laton-luz); }
.nav-cta{ white-space:nowrap; }

/* ── Ítem con submenú (mega-menú) ──────────────────────────── */
.nav-item{ position:relative; }
.nav-drop-btn{ gap:.4rem; }
.nav-drop-btn .caret{ color:var(--tenue); transition:transform .2s, color .2s; }
.nav-item.abierto .nav-drop-btn .caret{ transform:rotate(180deg); color:var(--laton-luz); }
.nav-item.abierto .nav-drop-btn{ color:var(--laton-luz); }

.mega{
  position:absolute; top:calc(100% + 1.4rem); left:50%; transform:translateX(-50%) translateY(-8px);
  width:min(640px, 82vw); background:var(--carbon-alt); border:1px solid var(--linea2);
  border-radius:10px; box-shadow:0 30px 70px rgba(0,0,0,.55); padding:1.6rem;
  display:grid; grid-template-columns:1fr 1fr; gap:.3rem 1.8rem;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility .22s;
  z-index:120;
}
.nav-item.abierto .mega{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.mega-col-tit{
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--apagado);
  padding-bottom:.7rem; margin-bottom:.5rem; border-bottom:1px solid var(--linea);
}
.mega-item{
  display:flex; gap:.85rem; align-items:flex-start; padding:.65rem .5rem; border-radius:6px;
  text-decoration:none; transition:background .18s;
}
.mega-item:hover{ background:rgba(255,255,255,.035); }
.mega-item .ic{
  flex:none; width:30px; height:30px; border-radius:7px; display:flex; align-items:center;
  justify-content:center; background:var(--laton-vel); color:var(--laton); font-size:.95rem;
}
.mega-item .tx b{ display:block; font-size:.86rem; color:var(--marfil); font-weight:600; margin-bottom:.15rem; }
.mega-item .tx span{ display:block; font-size:.76rem; color:var(--tenue); line-height:1.5; }

.nav-scrim{
  position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:90;
  opacity:0; visibility:hidden; transition:opacity .22s; pointer-events:none;
}
.nav-scrim.activo{ opacity:1; visibility:visible; pointer-events:auto; }

/* ── Botón de menú (solo visible en mobile) ───────────────────── */
.boton-menu{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; padding:0; border:0; background:none; cursor:pointer;
  position:relative; z-index:120;
}
.boton-menu span{ display:block; width:22px; height:2px; background:var(--marfil); border-radius:2px; transition:transform .25s, opacity .25s; }
.boton-menu[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.boton-menu[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.boton-menu[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ── Saltar al contenido (accesibilidad) ──────────────────────── */
.saltar{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--laton); color:var(--noche); padding:.8rem 1.3rem;
  font-size:.82rem; font-weight:600; border-radius:0 0 4px 0; text-decoration:none;
}
.saltar:focus{ left:0; }

/* ── Botones ────────────────────────────────────────────────── */
.btn{
  display:inline-block; padding:.92rem 1.9rem; border-radius:3px;
  font-family:var(--cuerpo); font-size:.76rem; font-weight:600;
  letter-spacing:.15em; text-transform:uppercase; text-decoration:none;
  border:1px solid var(--laton); cursor:pointer; transition:all .25s;
  background:var(--laton); color:var(--noche);
}
.btn:hover{ background:var(--laton-luz); border-color:var(--laton-luz); transform:translateY(-1px); }
.btn-linea{ background:transparent; color:var(--laton); }
.btn-linea:hover{ background:var(--laton-vel); color:var(--laton-luz); transform:translateY(-1px); }
.btn-sm{ padding:.66rem 1.3rem; font-size:.7rem; }

/* ── Portada ────────────────────────────────────────────────── */
.portada{ padding:clamp(9rem,16vw,12rem) 0 clamp(4rem,8vw,6rem); overflow:hidden; }
.portada-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:3.6rem; align-items:center; position:relative; z-index:1; }
.portada h1{ margin-bottom:1.7rem; white-space:nowrap; }
.portada h1 .oro{
  color:var(--laton); display:block; font-style:italic; font-weight:500;
}
.portada .bajada{ margin-bottom:2.4rem; font-size:1.16rem; }
.acciones{ display:flex; gap:.9rem; flex-wrap:wrap; margin-bottom:2.6rem; }
.sellos{ display:flex; gap:1.5rem; flex-wrap:wrap; }
.sello{ display:flex; align-items:center; gap:.5rem; font-size:.78rem; color:var(--tenue); }
.sello b{ color:var(--laton-luz); font-weight:600; }

.deco{ position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none; z-index:0; }
.deco-a{ width:420px; height:420px; top:-140px; right:-120px; background:radial-gradient(circle, rgba(201,168,76,.16), transparent 70%); }
.deco-b{ width:320px; height:320px; bottom:-160px; left:-100px; background:radial-gradient(circle, rgba(201,168,76,.09), transparent 70%); }

/* ── El plano en vivo: la pieza central ─────────────────────── */
.escena{
  background:var(--carbon); border:1px solid var(--linea);
  border-radius:10px; padding:1.5rem; position:relative; overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.6);
}
.escena::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 30% 0%, rgba(201,168,76,.07), transparent 62%);
  pointer-events:none;
}
.escena-barra{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:1rem; margin-bottom:1.2rem; border-bottom:1px solid var(--linea);
}
.escena-tit{
  font-family:var(--display); font-size:1.12rem; color:var(--marfil); letter-spacing:.06em;
}
.escena-hora{ font-family:var(--display); font-size:1.35rem; color:var(--laton); font-variant-numeric:tabular-nums; }
.plano{
  display:grid; grid-template-columns:repeat(4,1fr); gap:.62rem;
}
.mesa{
  aspect-ratio:1; border-radius:6px; border:1.4px solid;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.12rem; position:relative; overflow:hidden;
  transition:border-color .7s, background .7s, box-shadow .7s;
}
.mesa.redonda{ border-radius:50%; }
.mesa .num{
  font-family:var(--display); font-size:1.5rem; font-weight:600; line-height:1;
}
.mesa .est{ font-size:.52rem; letter-spacing:.09em; text-transform:uppercase; opacity:.8; }
.mesa .cap{ position:absolute; top:5px; left:7px; font-size:.5rem; color:var(--apagado); }
.mesa .prog{ position:absolute; left:0; right:0; bottom:0; height:2.5px; background:rgba(255,255,255,.07); }
.mesa .prog i{ display:block; height:100%; width:0; transition:width 1s linear; }

.mesa.e-libre{ border-color:var(--libre); background:#0F1E18; color:var(--libre-luz); }
.mesa.e-res{   border-color:var(--reservada); background:#231A08; color:var(--laton-luz); box-shadow:0 0 18px rgba(201,168,76,.14); }
.mesa.e-ocu{   border-color:var(--ocupada); background:#220A08; color:var(--ocupada-luz); }
.mesa.e-ven{   border-color:var(--ocupada-luz); background:#2B0C09; color:var(--ocupada-luz); box-shadow:0 0 22px rgba(192,57,43,.3); }

.escena-pie{
  display:flex; gap:1.5rem; margin-top:1.2rem; padding-top:1rem;
  border-top:1px solid var(--linea); flex-wrap:wrap;
}
.dato .n{ font-family:var(--display); font-size:1.6rem; line-height:1; }
.dato .l{ font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:var(--apagado); }
.dato.v .n{ color:var(--libre-luz); }
.dato.o .n{ color:var(--laton); }
.dato.r .n{ color:var(--ocupada-luz); }

/* ── Barra de confianza ────────────────────────────────────── */
.confianza{ padding:3.4rem 0 3.6rem; }
.confianza-texto{
  text-align:center; font-size:.78rem; letter-spacing:.05em; color:var(--tenue);
  margin-bottom:2.2rem;
}
.marquesina{
  overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquesina-pista{ display:flex; gap:2.6rem; width:max-content; animation:desfile 34s linear infinite; }
.marquesina:hover .marquesina-pista{ animation-play-state:paused; }
@keyframes desfile{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.chip-tipo{
  flex:none; display:flex; align-items:center; gap:.55rem; padding:.7rem 1.3rem;
  border:1px solid var(--linea); border-radius:30px; color:var(--tenue);
  font-size:.78rem; letter-spacing:.04em; white-space:nowrap; background:var(--carbon);
}
.chip-tipo i{ width:6px; height:6px; border-radius:50%; background:var(--laton-som); display:block; }

/* ── El problema ────────────────────────────────────────────── */
.escenas{ display:grid; grid-template-columns:repeat(3,1fr); gap:2.2rem; margin-top:3.4rem; }
.esc{
  padding:2rem 1.8rem; background:var(--carbon-alt);
  border:1px solid var(--linea); border-radius:8px;
  border-top:2px solid var(--ocupada);
}
.esc .hora{
  font-family:var(--display); font-size:1.9rem; color:var(--laton);
  line-height:1; margin-bottom:.9rem; font-variant-numeric:tabular-nums;
}
.esc h3{ font-size:1.16rem; margin-bottom:.7rem; }
.esc p{ font-size:.96rem; color:var(--texto); line-height:1.75; }

/* ── Beneficios (Cómo te ayudamos) ─────────────────────────── */
.beneficios-lista{ display:flex; flex-direction:column; gap:1.5rem; }
.beneficio{ display:flex; gap:1.1rem; align-items:flex-start; }
.beneficio .check{
  flex:none; width:26px; height:26px; border-radius:50%; background:var(--laton-vel);
  border:1px solid rgba(201,168,76,.4); display:flex; align-items:center; justify-content:center;
  color:var(--laton-luz); font-size:.8rem; margin-top:.15rem;
}
.beneficio h3{ font-size:1.08rem; margin-bottom:.35rem; }
.beneficio p{ font-size:.94rem; color:var(--texto); line-height:1.7; }

/* ── Bloques de contenido con media ─────────────────────────── */
/* La columna de la foto/video (1.22fr) es un poco más ancha que la
   del texto (1fr) — así la imagen se ve más grande sin achicar la
   lectura. Si querés que se vea AÚN más grande, subí el 1.22 acá
   (y en la línea ".duo.invertido" de acá abajo, para que quede
   igual de grande en las secciones "invertidas"). Si la querés del
   mismo tamaño que el texto, volvé los dos a 1fr 1fr. */
.duo{ display:grid; grid-template-columns:1fr 1.22fr; gap:4.5rem; align-items:center; }
.duo.invertido{ grid-template-columns:1.22fr 1fr; }
.duo.invertido .txt{ order:2; }
.lista{ list-style:none; margin-top:1.8rem; }
.lista li{
  padding:.72rem 0 .72rem 1.7rem; position:relative;
  border-bottom:1px solid var(--linea); font-size:.96rem;
}
.lista li:last-child{ border-bottom:none; }
.lista li::before{
  content:''; position:absolute; left:0; top:1.28rem;
  width:6px; height:6px; background:var(--laton); border-radius:50%;
}
.ver-mas{
  display:inline-flex; align-items:center; gap:.5rem; margin-top:1.7rem;
  color:var(--laton); text-decoration:none; font-size:.82rem; letter-spacing:.07em;
  text-transform:uppercase; font-weight:600; transition:gap .2s, color .2s;
}
.ver-mas:hover{ gap:.8rem; color:var(--laton-luz); }
.ver-mas svg{ display:block; }

/* ── Contenedor de foto o video ─────────────────────────────── */
.medio{
  background:var(--carbon); border:1px solid var(--linea); border-radius:9px;
  overflow:hidden; position:relative; box-shadow:0 22px 60px rgba(0,0,0,.5);
}
/* height:auto es necesario para que el navegador respete el
   width/height reales de la foto (puestos en el <img> por pagina.js)
   como PROPORCIÓN y no como tamaño fijo — sin esto, una foto angosta
   (como las verticales de "App Móvil") intenta ocupar 1024px de alto
   igual que mide en su archivo original, mucho más de lo que le
   corresponde a su ancho ya achicado. */
.medio img, .medio video{ width:100%; height:auto; display:block; }
.medio iframe{ width:100%; aspect-ratio:16/9; display:block; border:0; }
.medio-pie{
  padding:.8rem 1.1rem; font-size:.76rem; color:var(--tenue);
  border-top:1px solid var(--linea); background:var(--noche);
}

/* Foto del teléfono (pestaña "App Móvil") y foto de las 5 pantallas
   (su "en profundidad"): las dos son fotos angostas y altas — a lo
   ancho de toda la columna quedaban demasiado grandes al lado del
   texto. Se achica el CARTEL completo (marco + sombra + foto), no
   solo la imagen suelta, para que el marco se vea proporcional y no
   una caja grande con una foto chica flotando adentro. */
[data-medio="aplicacion"]{ max-width:78%; margin:0 auto; }
[data-medio="movil5"]{ max-width:64%; margin:0 auto; }
@media (max-width:940px){
  /* Acá el ".duo" pasa a una sola columna (foto y texto apilados, ya
     no lado a lado) — la foto vuelve a tener toda la fila para ella
     sola, así que el achique es más suave que en escritorio. */
  [data-medio="aplicacion"]{ max-width:64%; }
  [data-medio="movil5"]{ max-width:52%; }
}
@media (max-width:640px){
  [data-medio="aplicacion"]{ max-width:72%; }
  [data-medio="movil5"]{ max-width:60%; }
}

/* ── Funciones en profundidad (a donde bajan los "Ver...") ──────
   Un bloque editorial por función, uno debajo del otro, separados
   por una línea fina — sin cajas, para que se lea como una nota
   larga y no como otra grilla de tarjetas más. */
.feat-detalle{ padding:3.4rem 0; border-bottom:1px solid var(--linea); }
.feat-detalle:first-child{ padding-top:.5rem; }
.feat-detalle:last-child{ border-bottom:none; padding-bottom:.5rem; }
.feat-detalle .txt{ position:relative; }
.feat-detalle .rotulo{ margin-bottom:1rem; }
.feat-detalle h3{ font-size:clamp(1.5rem, 2.6vw, 1.95rem); margin-bottom:1.25rem; }
.feat-detalle p{ font-size:1rem; color:var(--texto); line-height:1.85; margin-bottom:1.1rem; }
.feat-detalle .medio{ box-shadow:0 30px 80px rgba(0,0,0,.6); }

/* Foto todavía más grande, solo para UNA sección puntual: se activa
   agregando  fotoGrande: true  dentro del bloque "detalle" de esa
   función en configuracion.js (ver COMO-PUBLICAR.txt). */
.feat-detalle.foto-grande .duo{ grid-template-columns:1fr 1.55fr; }
.feat-detalle.foto-grande .duo.invertido{ grid-template-columns:1.55fr 1fr; }
@media (max-width:940px){
  .feat-detalle.foto-grande .duo,
  .feat-detalle.foto-grande .duo.invertido{ grid-template-columns:1fr; }
}

/* Numeral fantasma detrás del rótulo — detalle editorial, discreto */
.fd-numero{
  display:block; font-family:var(--display); font-weight:600; line-height:1;
  font-size:3.6rem; color:rgba(201,168,76,.16); margin-bottom:.3rem;
}
@supports (-webkit-text-stroke: 1px rgba(0,0,0,0)){
  .fd-numero{ color:transparent; -webkit-text-stroke:1px rgba(201,168,76,.4); }
}

/* Frase destacada — la misma idea del bloque, dicha en una línea */
.fd-destacado{
  margin:1.7rem 0 0; padding-left:1.35rem; border-left:2px solid var(--laton);
  font-family:var(--display); font-size:1.2rem; font-style:italic;
  color:var(--marfil); line-height:1.55;
}

/* Texto justificado (parejo de los dos lados, como una columna de
   diario) en vez de alineado solo a la izquierda. La última línea de
   cada párrafo queda corta y a la izquierda, como es normal — eso no
   se puede evitar (ni conviene) con texto justificado.
   Si en algún párrafo puntual NO lo querés justificado, agregále la
   clase  sin-justificar  en el html de ese párrafo. */
.bajada,
.esc p,
.beneficio p,
.feat-detalle p,
.metrica p,
.paso p,
.plan .det,
.pie-desc,
.legal p{
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
}
.sin-justificar{ text-align:left; hyphens:none; -webkit-hyphens:none; }

.fd-acciones{ display:flex; align-items:center; gap:1.8rem; flex-wrap:wrap; margin-top:2.1rem; }
.fd-volver{
  font-size:.82rem; letter-spacing:.03em; color:var(--tenue); text-decoration:none;
  border-bottom:1px solid transparent; transition:color .2s, border-color .2s;
}
.fd-volver:hover{ color:var(--laton-luz); border-color:var(--laton-luz); }

/* ── El teléfono ────────────────────────────────────────────── */
.tel{
  width:280px; margin:0 auto; background:var(--noche);
  border:9px solid #1E1E24; border-radius:34px; padding:1.1rem .85rem;
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.tel-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.9rem; }
.tel-marca{ font-family:var(--display); font-size:1rem; color:var(--marfil); letter-spacing:.2em; }
.tel-hora{ font-size:.62rem; color:var(--laton); letter-spacing:.1em; }
.tel-datos{ display:flex; justify-content:space-between; margin-bottom:.9rem; }
.tel-datos .d{ text-align:center; flex:1; }
.tel-datos .n{ font-family:var(--display); font-size:1.3rem; line-height:1; }
.tel-datos .l{ font-size:.44rem; letter-spacing:.1em; text-transform:uppercase; color:var(--apagado); }
.tel-plano{ display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; }
.tel-plano .mesa .num{ font-size:1.06rem; }
.tel-plano .mesa .est{ font-size:.42rem; }
.tel-nav{
  display:flex; justify-content:space-around; margin-top:1rem; padding-top:.75rem;
  border-top:1px solid var(--linea);
}
.tel-nav i{ font-size:.46rem; letter-spacing:.07em; text-transform:uppercase; color:var(--apagado); font-style:normal; }
.tel-nav i.on{ color:var(--laton); }

/* ── Escena: Mozo con el teléfono (ilustración propia) ───────── */
.esc-mozo{ position:relative; display:flex; justify-content:center; padding:1rem 0 0; }
.esc-mozo .figura{ position:relative; }
.esc-mozo svg{ display:block; }
.esc-mozo .globo{
  position:absolute; top:-6px; left:calc(50% + 76px); background:var(--carbon-alt);
  border:1px solid var(--linea2); border-radius:8px; padding:.7rem .9rem; width:190px;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.esc-mozo .globo::before{
  content:''; position:absolute; left:-7px; top:20px; width:12px; height:12px;
  background:var(--carbon-alt); border-left:1px solid var(--linea2); border-bottom:1px solid var(--linea2);
  transform:rotate(45deg);
}
.esc-mozo .globo .k{ font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--laton); display:block; margin-bottom:.3rem; }
.esc-mozo .globo .v{ font-size:.82rem; color:var(--marfil); line-height:1.4; }
.esc-mozo .globo .v b{ color:var(--libre-luz); }

/* ── Escena: Mostrador con la PC (ilustración propia) ─────────── */
.esc-mostrador{ position:relative; }
.esc-mostrador .desk{
  position:relative; background:linear-gradient(180deg, #1B1712, #0D0B08);
  border:1px solid var(--linea2); border-radius:10px; padding:1.6rem 1.6rem 0;
  box-shadow:0 30px 80px rgba(0,0,0,.6); overflow:hidden;
}
.esc-mostrador .monitor{
  background:var(--noche); border:1px solid var(--linea2); border-radius:8px 8px 3px 3px;
  padding:.9rem; margin:0 auto;
}
.esc-mostrador .monitor-plano{ display:grid; grid-template-columns:repeat(4,1fr); gap:.4rem; }
.esc-mostrador .monitor-plano .mesa{ }
.esc-mostrador .monitor-plano .mesa .num{ font-size:1rem; }
.esc-mostrador .monitor-plano .mesa .est{ font-size:.4rem; }
.esc-mostrador .pie-desk{
  height:26px; background:linear-gradient(180deg, #24201A, #12100C); margin:0 -1.6rem;
  border-top:1px solid var(--linea2); margin-top:1.1rem; position:relative;
}
.esc-mostrador .persona{ position:absolute; bottom:0; left:50%; transform:translateX(-50%) translateY(35%); }

/* ── Escena: Reserva confirmada (ilustración propia) ───────────── */
.esc-reservas{ position:relative; }
.esc-reservas .ticket{
  background:linear-gradient(180deg, #1B1712, #0D0B08); border:1px solid var(--linea2);
  border-radius:10px; padding:1.2rem 1.3rem; box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.esc-reservas .ticket-head{ display:flex; align-items:center; gap:.7rem; padding-bottom:.9rem; margin-bottom:.7rem; border-bottom:1px dashed var(--linea2); }
.esc-reservas .chk{
  width:30px; height:30px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  background:rgba(201,168,76,.12); border:1px solid var(--laton); color:var(--laton-luz); font-size:1rem;
}
.esc-reservas .tt{ display:block; font-size:.86rem; color:var(--marfil); }
.esc-reservas .ts{ display:block; font-size:.62rem; color:var(--apagado); margin-top:.15rem; letter-spacing:.04em; }
.esc-reservas .ticket-row{ display:flex; justify-content:space-between; font-size:.66rem; color:var(--apagado); padding:.35rem 0; }
.esc-reservas .ticket-row b{ color:var(--marfil); font-weight:500; }
.esc-reservas .ticket-row b.ok{ color:var(--libre-luz); }
.esc-reservas .ticket-foot{ margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--linea); font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:var(--laton); }

/* ── Escena: Campaña enviada (ilustración propia) ──────────────── */
.esc-campanias{ position:relative; display:flex; justify-content:center; padding:.6rem 0 0; }
.esc-campanias .envio{ text-align:center; }
.esc-campanias .sobre{ position:relative; display:inline-block; }
.esc-campanias .destinatarios{ display:flex; justify-content:center; gap:.4rem; margin:1.1rem 0 .9rem; }
.esc-campanias .destinatarios .pnt{ width:9px; height:9px; border-radius:50%; background:rgba(201,168,76,.22); border:1px solid var(--laton); display:inline-block; }
.esc-campanias .destinatarios .pnt:nth-child(2n){ background:rgba(201,168,76,.4); }
.esc-campanias .envio-pie .k{ font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--laton); display:block; margin-bottom:.25rem; }
.esc-campanias .envio-pie .v{ font-size:.78rem; color:var(--marfil); }

/* ── Escena: Dueño con la notebook (ilustración propia) ────────── */
.esc-dueno{ position:relative; }
.esc-dueno .laptop{
  background:linear-gradient(180deg, #17140F, #0B0A08); border:1px solid var(--linea2);
  border-radius:10px; padding:1.4rem; box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.esc-dueno .laptop-pantalla{ background:var(--noche); border:1px solid var(--linea2); border-radius:6px; padding:1.1rem 1.1rem .3rem; }
.esc-dueno .laptop-kpis{ display:flex; gap:.8rem; margin-bottom:1rem; }
.esc-dueno .laptop-kpis div{ flex:1; background:rgba(255,255,255,.03); border:1px solid var(--linea); border-radius:5px; padding:.55rem; text-align:center; }
.esc-dueno .laptop-kpis .n{ font-family:var(--display); font-size:1.2rem; color:var(--laton); line-height:1; }
.esc-dueno .laptop-kpis .l{ font-size:.42rem; letter-spacing:.08em; text-transform:uppercase; color:var(--apagado); margin-top:.2rem; display:block; }
.esc-dueno .laptop-base{
  height:14px; background:linear-gradient(180deg, #201C16, #0E0C09); margin:0 -.3rem;
  border-radius:0 0 10px 10px; border-top:2px solid #2C271D;
}

/* ── Estadísticas (gráfico de barras) ──────────────────────────── */
.grafico{
  background:var(--carbon); border:1px solid var(--linea); border-radius:9px; padding:1.8rem;
}
.barras{ display:flex; align-items:flex-end; gap:.6rem; height:170px; margin-bottom:.9rem; }
.barras .b{ flex:1; background:linear-gradient(180deg, var(--laton), var(--laton-som)); border-radius:2px 2px 0 0; transition:height 1.1s cubic-bezier(.2,.8,.3,1); height:0; }
.barras-lbl{ display:flex; gap:.6rem; }
.barras-lbl span{ flex:1; text-align:center; font-size:.6rem; color:var(--apagado); letter-spacing:.05em; }

/* ── Pestañas de funciones ─────────────────────────────────── */
.tabs-pills{
  display:flex; gap:.6rem; flex-wrap:wrap; margin-top:3rem; margin-bottom:3.2rem;
}
.pill{
  background:var(--carbon-alt); border:1px solid var(--linea); color:var(--texto);
  font-family:var(--cuerpo); font-size:.78rem; font-weight:500; letter-spacing:.02em;
  padding:.7rem 1.25rem; border-radius:30px; cursor:pointer; transition:all .2s; white-space:nowrap;
}
.pill:hover{ border-color:rgba(201,168,76,.4); color:var(--marfil); }
.pill.activa{ background:var(--laton); border-color:var(--laton); color:var(--noche); font-weight:600; }
.tab-panel{ display:none; }
.tab-panel.activo{ display:grid; }

/* ── Métricas ───────────────────────────────────────────────── */
.metricas-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6px; background:var(--linea); margin-top:3.2rem; border:1px solid var(--linea); }
.metrica{ background:var(--carbon); padding:2.1rem 1.7rem; transition:background .3s; }
.metrica:hover{ background:var(--elevado); }
.metrica .ic{
  width:38px; height:38px; border-radius:8px; background:var(--laton-vel); color:var(--laton-luz);
  display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:1.1rem;
  margin-bottom:1rem;
}
.metrica h3{ font-size:1.04rem; margin-bottom:.5rem; }
.metrica p{ font-size:.88rem; color:var(--texto); line-height:1.7; }

.destacadas{
  display:flex; margin-top:3.6rem; border:1px solid var(--linea); border-radius:10px; overflow:hidden;
  background:var(--carbon-alt);
}
.destacada{ flex:1; text-align:center; padding:2.4rem 1.4rem; border-left:1px solid var(--linea); }
.destacada:first-child{ border-left:0; }
.destacada .val{ font-family:var(--display); font-size:clamp(2.2rem,4vw,3.1rem); color:var(--laton); line-height:1; }
.destacada p{ font-size:.85rem; color:var(--tenue); margin-top:.7rem; line-height:1.6; }

/* ── Instalación / conexión remota ─────────────────────────── */
.pasos{ display:flex; flex-direction:column; gap:2rem; }
.paso{ position:relative; padding-left:3.6rem; }
.paso .n{
  position:absolute; top:-.3rem; left:0; font-family:var(--display);
  font-size:2.6rem; color:var(--laton-som); line-height:1; opacity:.55;
}
.paso h3{ font-size:1.1rem; margin-bottom:.5rem; }
.paso p{ font-size:.94rem; color:var(--texto); line-height:1.68; }

.conexion{
  background:var(--carbon); border:1px solid var(--linea); border-radius:10px;
  padding:2.6rem 1.6rem; display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 22px 60px rgba(0,0,0,.5);
}
.conexion-nodo{ display:flex; flex-direction:column; align-items:center; gap:.7rem; flex:none; }
.conexion-nodo span{ font-size:.66rem; letter-spacing:.06em; color:var(--tenue); text-align:center; max-width:80px; }
.conexion-candado{ display:flex; flex-direction:column; align-items:center; gap:.5rem; flex:none; }
.conexion-candado span{ font-size:.6rem; letter-spacing:.05em; color:var(--laton-luz); text-align:center; max-width:80px; }
.conexion-linea{ flex:1; height:1px; background:repeating-linear-gradient(90deg, var(--linea2) 0 6px, transparent 6px 12px); position:relative; margin:0 .6rem; min-width:24px; }
.pulso{
  position:absolute; top:50%; left:0; width:6px; height:6px; border-radius:50%;
  background:var(--laton-luz); transform:translateY(-50%); box-shadow:0 0 10px var(--laton-luz);
  animation:viajar 2.2s linear infinite;
}
@keyframes viajar{ 0%{ left:0; opacity:0; } 10%{ opacity:1; } 90%{ opacity:1; } 100%{ left:100%; opacity:0; } }

/* ── Precios ────────────────────────────────────────────────── */
.planes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem; margin-top:3.4rem; align-items:stretch; }
.plan{
  background:var(--carbon); border:1px solid var(--linea);
  border-radius:9px; padding:2.4rem 2rem; position:relative; display:flex; flex-direction:column;
}
.plan.destacado{ border-color:rgba(201,168,76,.4); background:linear-gradient(160deg, #16130C, var(--carbon)); }
.plan-cinta{
  position:absolute; top:-1px; right:1.6rem; background:var(--laton); color:var(--noche);
  font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.3rem .7rem; border-radius:0 0 4px 4px;
}
.plan h3{ font-size:1.42rem; margin-bottom:.4rem; }

/* El monto de cada plan se lee en dos tiempos: arriba, grande, el pago
   inicial (lo único que antes se veía con claridad); abajo, en su
   propia línea separada por un filete punteado, el abono mensual —
   antes los dos números venían pegados en un solo texto ("490 + 39")
   y no quedaba claro cuál era cuál ni qué pagabas una vez y qué pagabas
   todos los meses. */
.monto{ margin:1.1rem 0 .3rem; }
.monto .monto-linea{ display:flex; align-items:baseline; gap:.4rem; }
.monto .mon{ font-size:1rem; color:var(--tenue); }
.monto .val{ font-family:var(--display); font-size:3.1rem; color:var(--laton); line-height:1; font-weight:600; }
.monto > .uni{ display:block; font-size:.76rem; color:var(--tenue); letter-spacing:.08em; margin-top:.2rem; }
.monto-mensual{
  display:flex; align-items:baseline; gap:.4rem; margin-top:.85rem; padding-top:.75rem;
  border-top:1px dashed var(--linea);
}
.monto-mensual .mas{ color:var(--tenue); font-size:.9rem; }
.monto-mensual .val-mensual{ font-family:var(--display); font-size:1.32rem; color:var(--laton-luz); font-weight:600; line-height:1; }
.monto-mensual .uni-mes{ font-size:.76rem; color:var(--tenue); letter-spacing:.04em; }
.plan .det{ font-size:.9rem; color:var(--texto); margin-bottom:1.4rem; line-height:1.7; margin-top:1.2rem; }
.plan .lista{ flex:1; }
.plan .lista li{ font-size:.87rem; padding:.55rem 0 .55rem 1.5rem; }
.plan .lista li::before{ top:1.08rem; width:5px; height:5px; }
.plan-adicional{
  margin-top:1.8rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  background:var(--carbon-alt); border:1px solid var(--linea); border-radius:9px; padding:1.6rem 2rem;
}
.plan-adicional h4{ font-size:1.02rem; margin-bottom:.3rem; }
.plan-adicional p{ font-size:.86rem; color:var(--tenue); max-width:44ch; }
/* La tarjeta de "computadora adicional" es un monto simple (un solo
   pago, sin abono aparte), así que conserva el renglón único de
   siempre: mon + val + uni en una sola línea, en vez del formato de
   dos pisos de las tarjetas de planes. */
.plan-adicional .monto{ display:flex; align-items:baseline; gap:.4rem; margin:0; flex:none; }
.plan-adicional .monto .val{ font-size:2.1rem; }
.plan-adicional .monto .uni{ display:inline; margin-top:0; }

/* Qué cubre el abono mensual — un panel compartido debajo de las 3
   tarjetas de planes (no hace falta repetirlo tres veces, es lo mismo
   para Básico, Pro y Premium). */
.abono-incluye{
  margin-top:2.2rem; padding:2rem 2.2rem; border-radius:9px;
  border:1px solid rgba(201,168,76,.28); background:var(--laton-vel);
}
.abono-incluye h4{
  font-family:var(--display); font-size:1.22rem; color:var(--laton-luz);
  text-align:center; margin-bottom:1.3rem; font-weight:600;
}
.abono-incluye .abono-lista{
  display:grid; grid-template-columns:1fr 1fr; gap:.2rem 2.4rem;
  max-width:820px; margin:0 auto;
}
.abono-incluye .abono-lista li{ border-bottom:none; padding:.5rem 0 .5rem 1.5rem; font-size:.88rem; }
.abono-incluye .abono-lista li::before{ top:1.05rem; }

.nota-precio{
  margin-top:2.6rem; padding:1.5rem 1.9rem; text-align:center;
  border:1px solid rgba(201,168,76,.28); border-radius:6px; background:var(--laton-vel);
  color:var(--laton-luz); font-family:var(--display); font-size:1.24rem;
}

/* ── Testimonios (carrusel) ────────────────────────────────── */
.testi-carrusel{ display:flex; align-items:center; gap:1.2rem; max-width:800px; margin:0 auto; }
.testi-viewport{ flex:1; overflow:hidden; }
.testi-pista{ display:flex; transition:transform .5s cubic-bezier(.2,.8,.3,1); }
.testi-card{ flex:none; width:100%; text-align:center; padding:0 1rem; }
.testi-estrellas{ color:var(--laton); font-size:1rem; letter-spacing:.2em; margin-bottom:1.3rem; }
.testi-card blockquote{
  font-family:var(--display); font-size:clamp(1.35rem,2.6vw,1.85rem);
  color:var(--marfil); line-height:1.5; font-style:italic; margin-bottom:1.5rem;
}
.testi-card cite{ font-style:normal; font-size:.84rem; color:var(--tenue); letter-spacing:.04em; }
.testi-card cite b{ color:var(--laton-luz); font-weight:600; }
.testi-flecha{
  flex:none; width:42px; height:42px; border-radius:50%; border:1px solid var(--linea2);
  background:var(--carbon-alt); color:var(--laton); font-size:1.4rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .2s;
}
.testi-flecha:hover{ background:var(--laton); color:var(--noche); border-color:var(--laton); }
.testi-puntos{ display:flex; justify-content:center; gap:.5rem; margin-top:2rem; }
.testi-puntos button{
  width:7px; height:7px; border-radius:50%; border:0; background:var(--apagado); cursor:pointer; padding:0;
  transition:background .2s, transform .2s;
}
.testi-puntos button.activo{ background:var(--laton); transform:scale(1.3); }

/* ── Más soluciones ─────────────────────────────────────────── */
.soluciones-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; }
.sol-card{
  display:flex; align-items:center; gap:1rem; padding:1.5rem 1.4rem;
  background:var(--carbon-alt); border:1px solid var(--linea); border-radius:8px;
  text-decoration:none; transition:all .22s;
}
.sol-card:hover{ border-color:rgba(201,168,76,.4); transform:translateY(-2px); background:var(--elevado); }
.sol-card .ic{
  flex:none; width:40px; height:40px; border-radius:9px; background:var(--laton-vel); color:var(--laton);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.sol-card span.tit{ font-size:.94rem; color:var(--marfil); font-weight:500; }

/* ── CTA final ──────────────────────────────────────────────── */
.cta-final{ background:radial-gradient(ellipse at 50% 0%, rgba(201,168,76,.09), transparent 70%), var(--carbon); }
.cta-final-caja{ text-align:center; max-width:640px; margin:0 auto; }
.cta-final-caja h2{ margin-bottom:1rem; }
.cta-final-caja .bajada{ margin:0 auto 2.2rem; }

/* ── Contacto ───────────────────────────────────────────────── */
.contacto-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4.5rem; align-items:start; }
.campo{ margin-bottom:1.3rem; }
.campo label{
  display:block; font-size:.66rem; letter-spacing:.17em; text-transform:uppercase;
  color:var(--laton); margin-bottom:.5rem;
}
.campo input, .campo textarea{
  width:100%; background:var(--noche); border:1px solid var(--linea);
  border-radius:3px; padding:.85rem 1rem; color:var(--marfil);
  font-family:var(--cuerpo); font-size:.95rem; transition:border-color .2s;
}
.campo input:focus, .campo textarea:focus{ outline:none; border-color:var(--laton); }
.campo textarea{ min-height:110px; resize:vertical; }
.datos-contacto{ list-style:none; }
.datos-contacto li{ padding:1.05rem 0; border-bottom:1px solid var(--linea); }
.datos-contacto .k{ font-size:.63rem; letter-spacing:.17em; text-transform:uppercase; color:var(--apagado); display:block; margin-bottom:.25rem; }
.datos-contacto .v{ font-size:1.02rem; color:var(--marfil); text-decoration:none; }
.datos-contacto a.v:hover{ color:var(--laton-luz); }

/* ── Pie ────────────────────────────────────────────────────── */
footer{ padding:4.5rem 0 0; border-top:1px solid var(--linea); background:var(--noche); }
.pie-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:3rem; padding-bottom:3rem; }
.pie-marca .marca{ margin-bottom:1rem; }
.pie-desc{ font-size:.86rem; color:var(--tenue); line-height:1.75; max-width:38ch; }
.pie-col h4{ font-size:.68rem; letter-spacing:.17em; text-transform:uppercase; color:var(--laton); margin-bottom:1.2rem; font-family:var(--cuerpo); font-weight:600; }
.pie-col ul{ list-style:none; display:flex; flex-direction:column; gap:.75rem; }
.pie-col a{ color:var(--texto); text-decoration:none; font-size:.86rem; transition:color .2s; }
.pie-col a:hover{ color:var(--laton-luz); }
.pie-linea{
  display:flex; justify-content:space-between; align-items:center; gap:2rem; flex-wrap:wrap;
  padding:1.6rem 0; border-top:1px solid var(--linea);
}
.pie-lema{ font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--apagado); }

/* ── Página legal simple (términos / privacidad) ───────────── */
.legal{ max-width:760px; margin:0 auto; padding:clamp(8rem,14vw,10rem) 32px 6rem; }
.legal h1{ font-size:clamp(2rem,4vw,2.8rem); margin-bottom:.6rem; }
.legal .actualizado{ font-size:.82rem; color:var(--tenue); margin-bottom:3rem; display:block; }
.legal h2{ font-size:1.3rem; margin:2.6rem 0 1rem; }
.legal p, .legal li{ font-size:.98rem; color:var(--texto); line-height:1.85; }
.legal ul{ margin:0 0 1rem 1.3rem; }
.legal a{ color:var(--laton); }
.legal .volver{ display:inline-block; margin-bottom:2.5rem; }

/* ── Aparición al desplazar ─────────────────────────────────── */
.rev{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.8,.3,1), transform .8s cubic-bezier(.2,.8,.3,1); }
.rev.visible{ opacity:1; transform:none; }

/* ── Responsive ─────────────────────────────────────────────── */
/* xl / lg */
@media (max-width:1180px){
  .env{ padding:0 26px; }
}
@media (max-width:1024px){
  .metricas-grid{ grid-template-columns:repeat(2,1fr); }
  .soluciones-grid{ grid-template-columns:repeat(2,1fr); }
  .planes{ grid-template-columns:1fr 1fr; }
  .plan.destacado{ grid-column:span 2; }
}
/* md */
@media (max-width:940px){
  .portada-grid, .duo, .contacto-grid{ grid-template-columns:1fr; gap:3rem; }
  .duo.invertido{ grid-template-columns:1fr; }
  .duo.invertido .txt{ order:0; }
  /* Con el ".duo" apilado en una sola columna, el bloque de texto pasa
     a ocupar todo el ancho del contenedor (antes lo compartía con la
     foto) — sin este límite, los párrafos en tablet quedan con
     renglones larguísimos, más difíciles de leer. 64ch es el mismo
     ancho de lectura cómodo que ya se usa en ".bajada" y en las
     secciones legales. */
  .duo .txt, .duo.invertido .txt{ max-width:64ch; }
  .escenas{ grid-template-columns:1fr; gap:1.6rem; }
  .planes{ grid-template-columns:1fr; }
  .plan.destacado{ grid-column:auto; order:-1; }
  .pie-grid{ grid-template-columns:1fr 1fr; }
  .pie-marca{ grid-column:span 2; margin-bottom:1rem; }

  .boton-menu{ display:flex; }
  .nav{
    position:fixed; top:0; right:0; height:100vh; width:min(84vw,340px);
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    gap:.3rem; padding:6.5rem 1.6rem 2rem; background:var(--carbon);
    border-left:1px solid var(--linea); transform:translateX(100%);
    transition:transform .3s ease; overflow-y:auto; z-index:110;
  }
  .nav.abierto{ transform:translateX(0); box-shadow:-30px 0 60px rgba(0,0,0,.5); }
  .nav-link{ font-size:.92rem; padding:.85rem 0; width:100%; }
  .nav-link.nav-cta{ margin-top:.8rem; justify-content:center; padding:.85rem 1.3rem; }
  .nav-item{ width:100%; }
  .nav-drop-btn{ width:100%; justify-content:space-between; padding:.85rem 0; }

  .mega{
    position:static; transform:none; width:100%; box-shadow:none; border:0; background:none;
    padding:.2rem 0 .4rem 1rem; border-radius:0; grid-template-columns:1fr;
    max-height:0; overflow:hidden; opacity:1; visibility:visible; pointer-events:auto;
    transition:max-height .28s ease;
  }
  /* Bug real (no introducido por los cambios de esta vuelta, ya estaba
     antes): al abrir "Soluciones" en el menú mobile, la regla de más
     arriba ".nav-item.abierto .mega" (pensada para escritorio, donde
     el submenú es una tarjeta flotante centrada) pisaba el
     "transform:none" de acá arriba — por tener más clases en el
     selector, gana sin importar el orden en el archivo. Eso dejaba el
     submenú corrido con el mismo translateX(-50%) del escritorio,
     tapado a medias por el borde izquierdo de la pantalla (se veían
     los textos cortados: "Sectores" en vez de "Plano y Sectores",
     etc). Repetir acá "transform:none" con el mismo selector de más
     peso lo soluciona. */
  .nav-item.abierto .mega{ max-height:900px; transform:none; }
  .mega-col-tit{ margin-top:.5rem; }
  .mega-item .tx span{ display:none; }
}
/* sm */
@media (max-width:640px){
  .env{ padding:0 20px; }
  .plano{ grid-template-columns:repeat(3,1fr); }
  .escena-pie{ gap:1.1rem; }
  .metricas-grid{ grid-template-columns:1fr; }
  .soluciones-grid{ grid-template-columns:1fr; }
  .destacadas{ flex-direction:column; }
  .destacada{ border-left:0; border-top:1px solid var(--linea); }
  .destacada:first-child{ border-top:0; }
  .conexion{ flex-direction:column; gap:1.4rem; padding:2rem 1.4rem; }
  .conexion-linea{ width:2px; height:34px; flex:none; }
  .pie-grid{ grid-template-columns:1fr; }
  .pie-marca{ grid-column:auto; }
  .plan-adicional{ flex-direction:column; align-items:flex-start; }
  .abono-incluye{ padding:1.6rem 1.4rem; }
  .abono-incluye .abono-lista{ grid-template-columns:1fr; }

  /* La página tiene 13 secciones — en desktop el padding grande entre
     cada una se nota bien porque hay ancho de sobra, pero en un
     teléfono ese mismo espacio (el mínimo del clamp) hace que la
     página se sienta eterna de puro scroll vacío. Se achica solo el
     mínimo, el máximo (el clamp de arriba) no cambia para pantallas
     grandes. */
  section{ padding:3.4rem 0; }
  .portada{ padding:6.6rem 0 3rem; }
  .confianza{ padding:2.2rem 0 2.4rem; }
  .feat-detalle{ padding:2.4rem 0; }
  .legal{ padding:6.5rem 20px 4rem; }

  /* El título de portada viene con "white-space:nowrap" para que cada
     renglón (el texto normal y el renglón dorado en cursiva) no se
     parta solo — pensado para el texto por defecto. Si el usuario
     carga un título propio más largo, en un teléfono angosto ese
     nowrap lo puede cortar contra el borde de la pantalla en vez de
     bajar de renglón. Acá, en mobile, se permite el ajuste normal
     como red de seguridad — en desktop hay ancho de sobra y esto no
     se nota. */
  .portada h1{ white-space:normal; }

  /* iOS hace zoom automático al tocar un campo de texto si su letra
     mide menos de 16px — con el .95rem (~15px) de antes, cada vez que
     alguien tocaba el formulario de contacto en un iPhone la pantalla
     saltaba de golpe. 1rem = 16px, el mínimo para que eso no pase. */
  .campo input, .campo textarea{ font-size:1rem; }

  /* El teléfono ilustrado (solo aparece si no hay foto propia cargada
     en "App Móvil") tenía un ancho fijo de 280px — en un teléfono real
     angosto (320-360px) eso deja casi sin margen a los costados. */
  .tel{ width:min(280px, 78vw); }

  /* La ilustración del mozo (solo aparece si no hay foto propia
     cargada en "Lista de Espera") ubica el globo de texto al costado
     de la figura con un cálculo pensado para el ancho de escritorio;
     en una columna angosta de mobile ese globo se sale del contenedor.
     Acá se apila debajo, centrado, en vez de al costado. */
  .esc-mozo{ flex-direction:column; align-items:center; gap:1rem; }
  .esc-mozo .globo{ position:static; width:100%; max-width:260px; }
  .esc-mozo .globo::before{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition-duration:.01ms!important; }
  .rev{ opacity:1; transform:none; }
}

::selection{ background:var(--laton); color:var(--noche); }
:focus-visible{ outline:2px solid var(--laton); outline-offset:3px; }

/* ═══════════════════════════════════════════════════════════════
   LIGHTBOX · agrandar fotos con un click (usado por lightbox.js)
   ═══════════════════════════════════════════════════════════════ */

/* Cursor de "lupa" sobre cualquier foto agrandable */
.kx-clickeable{
  cursor: zoom-in;
  transition: opacity .2s ease, filter .2s ease;
}
.kx-clickeable:hover{
  opacity: .88;
}

/* El visor de pantalla completa */
.kx-lightbox{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background: rgba(8,8,10,.94); /* var(--noche) con transparencia */
  cursor: zoom-out;
  animation: kx-aparecer .18s ease;
}
.kx-lightbox.activo{
  display: flex;
}
.kx-lightbox-img{
  max-width: 100%;
  max-height: 92vh;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  cursor: default;
}
.kx-lightbox-cerrar{
  position: absolute;
  top: 18px;
  right: 22px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--linea2);
  background: var(--carbon);
  color: var(--marfil);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .2s ease, color .2s ease;
}
.kx-lightbox-cerrar:hover{
  border-color: var(--laton);
  color: var(--laton);
}

@keyframes kx-aparecer{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

@media (max-width: 640px){
  .kx-lightbox-cerrar{
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
  }
}