/* =========================================================
   ORKESTADOR — Landing
   Estilos generales. Los colores y tipografías se definen
   una sola vez aquí en :root para cambiarlos fácilmente.
   ========================================================= */

:root {
  /* Marca */
  --acento: #E2A50B;          /* dorado de la batuta del logo */
  --acento-claro: #E9B53A;
  --azul: #1B5FB4;            /* azul de la "k" */

  /* Fondos */
  --fondo: #141619;
  --fondo-hundido: #0F1113;
  --superficie: #1B1E22;
  --superficie-2: #17191C;

  /* Bordes */
  --borde: #2A2E34;
  --borde-fuerte: #3A3F47;

  /* Texto */
  --texto: #F4F2EC;
  --texto-2: #CFCCC4;
  --texto-suave: #A9A69E;
  --texto-tenue: #8F8C85;

  /* Estados (colores de los nodos del lienzo) */
  --morado: #8C88F2;
  --verde: #2FBF71;
  --rojo: #F07A7A;

  /* Tipografía */
  --fuente: 'Plus Jakarta Sans', system-ui, sans-serif;
  --fuente-mono: 'JetBrains Mono', ui-monospace, monospace;

  --radio: 12px;
  --ancho: 1240px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* que el atributo hidden siempre gane */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fuente);
  color: #E6E4DF;
  background: var(--fondo);
  line-height: 1.5;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--acento-claro); }
a:hover { color: #F5CE6E; }
h1, h2, h3 { color: var(--texto); margin: 0; }
p { margin: 0; }

/* ---------- Utilidades de layout ---------- */
.contenedor { max-width: var(--ancho); margin: 0 auto; }
.seccion { padding: 112px 24px; }
.seccion--hundida { background: var(--fondo-hundido); border-block: 1px solid #23272C; }
.pila { display: flex; flex-direction: column; gap: 20px; }

/* Bloque de texto + imagen lado a lado */
.dividido { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.dividido > .texto { flex: 1 1 380px; display: flex; flex-direction: column; gap: 22px; }
.dividido > .visual { flex: 1.4 1 520px; min-width: 0; }
.dividido--invertido { flex-wrap: wrap-reverse; }

/* Encabezado de sección con texto a la derecha */
.encabezado {
  display: flex; flex-wrap: wrap; gap: 24px;
  justify-content: space-between; align-items: flex-end;
  margin-bottom: 56px;
}
.encabezado > div { max-width: 660px; display: flex; flex-direction: column; gap: 16px; }
.encabezado > p { max-width: 430px; }

/* ---------- Tipografía ---------- */
.etiqueta {
  font-family: var(--fuente-mono);
  font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--acento-claro);
}
.titulo-xl {
  font-weight: 800; letter-spacing: -.035em; line-height: 1;
  font-size: clamp(42px, 6.2vw, 84px);
}
.titulo {
  font-weight: 800; letter-spacing: -.03em; line-height: 1.05;
  font-size: clamp(32px, 3.8vw, 52px);
}
.titulo-sm {
  font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  font-size: clamp(28px, 3vw, 40px);
}
.resaltado { color: var(--acento); }
.parrafo { font-size: 17px; line-height: 1.6; color: var(--texto-suave); }
.parrafo-sm { font-size: 15px; line-height: 1.55; color: var(--texto-tenue); }
.mono { font-family: var(--fuente-mono); }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 10px;
  font: inherit; font-weight: 600; font-size: 16px;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
}
.boton--primario { background: var(--acento); color: #17130A; }
.boton--primario:hover { background: #F0B726; color: #17130A; }
.boton--contorno { background: transparent; color: #E6E4DF; border-color: var(--borde-fuerte); }
.boton--contorno:hover { border-color: #5A606A; color: #fff; }
.boton-mini {
  min-width: 44px; height: 36px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--borde-fuerte); background: transparent; color: var(--texto-2);
  font: inherit; font-size: 12.5px; cursor: pointer;
}
.boton-mini:hover { border-color: #5A606A; color: #fff; }

/* ---------- Navegación ---------- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(20, 22, 25, .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid #262A30;
}
.nav__interior {
  max-width: var(--ancho); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav__logo img { height: 34px; width: auto; }
.nav__enlaces { display: flex; gap: 28px; font-size: 15px; }
.nav__enlaces a { color: #B9B6AE; text-decoration: none; }
.nav__enlaces a:hover { color: var(--texto); }

/* ---------- Hero ---------- */
.hero {
  padding: 88px 24px 0;
  background-image:
    linear-gradient(#1C1F23 1px, transparent 1px),
    linear-gradient(90deg, #1C1F23 1px, transparent 1px);
  background-size: 28px 28px;
}
.hero__texto {
  max-width: 1020px; margin: 0 auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
}
.hero__texto .parrafo { max-width: 700px; }
.pastilla {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid #3A3220; background: #1E1B14;
  font-family: var(--fuente-mono); font-size: 12.5px; letter-spacing: .04em;
  color: var(--acento-claro);
}
.punto { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); }
.acciones { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.hero__captura { max-width: var(--ancho); margin: 64px auto 0; position: relative; }
.hero__captura .ventana { border-bottom: none; border-radius: 14px 14px 0 0; }
.bitacora-flotante {
  position: absolute; right: -12px; bottom: 48px; width: 370px;
  background: var(--fondo-hundido); border: 1px solid #30353C; border-radius: 12px;
  padding: 16px 18px; box-shadow: 0 24px 60px rgba(0,0,0,.6);
  font-family: var(--fuente-mono); font-size: 11.5px; line-height: 1.75; color: var(--texto-tenue);
}
.bitacora-flotante .t { color: #5B8DD6; margin-right: 8px; }
.bitacora-flotante .ok { color: var(--verde); }

/* ---------- Capturas en marco de ventana ---------- */
.ventana {
  border: 1px solid #30353C; border-radius: var(--radio); overflow: hidden;
  background: #202328; box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
.ventana__barra {
  display: flex; align-items: center; gap: 8px; padding: 11px 16px;
  background: #1A1D21; border-bottom: 1px solid #30353C;
  font-family: var(--fuente-mono); font-size: 12px; color: #7D7A73;
}
.ventana__barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--borde-fuerte); }
.ventana__barra span { margin-left: 12px; }

/* Marco de teléfono */
.telefono {
  width: 250px; padding: 9px; border-radius: 36px;
  background: #0A0B0D; border: 1px solid var(--borde-fuerte);
  box-shadow: 0 30px 60px rgba(0,0,0,.55);
}
.telefono img { border-radius: 28px; width: 100%; }

/* ---------- Cómo funciona (4 pasos) ---------- */
.pasos { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.pasos::before {
  content: ""; position: absolute; left: 28px; right: 28px; top: 27px;
  height: 2px; background: #2E3238;
}
.paso { position: relative; display: flex; flex-direction: column; gap: 18px; }
.paso__icono {
  width: 56px; height: 56px; border-radius: 14px; background: var(--fondo);
  border: 2px solid currentColor; display: flex; align-items: center; justify-content: center;
}
.paso__icono svg { width: 24px; height: 24px; }
.paso__tarjeta {
  flex: 1; background: var(--superficie); border: 1px solid var(--borde);
  border-radius: 14px; padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px;
}
.paso__num { font-family: var(--fuente-mono); font-size: 12.5px; color: var(--texto-tenue); }
.paso h3 { font-size: 21px; font-weight: 700; }
.c-morado { color: #A9A6F6; }
.c-azul { color: #6FA9EA; }
.c-verde { color: #4FD18C; }
.c-dorado { color: var(--acento-claro); }

/* ---------- Recorrido ---------- */
.separador {
  display: flex; align-items: center; gap: 14px; margin: 16px 0 28px;
  font-family: var(--fuente-mono); font-size: 12.5px; letter-spacing: .08em; color: var(--texto-tenue);
}
.separador span { padding: 5px 10px; border: 1px solid var(--borde-fuerte); border-radius: 6px; color: var(--texto-2); }
.separador::after { content: ""; flex: 1; height: 1px; background: var(--borde); }
.rejilla-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; }
.rejilla-3 + .separador { margin-top: 64px; }
.etapa { display: flex; flex-direction: column; gap: 16px; }
.etapa--centrada { align-items: center; }
.etapa__imagen {
  border: 1px solid #30353C; border-radius: var(--radio); overflow: hidden;
  aspect-ratio: 16 / 10; background: #202326;
}
.etapa__imagen img { width: 100%; height: 100%; object-fit: cover; object-position: right top; }
.etapa__texto { display: flex; gap: 14px; align-items: baseline; max-width: 340px; }
.etapa__num { font-weight: 800; font-size: 28px; color: var(--acento); line-height: 1; }
.etapa__texto h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }

/* ---------- Leyenda de nodos ---------- */
.nodos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nodo {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; font-size: 14.5px;
}
.nodo i { flex: none; border: 2.5px solid; width: 22px; height: 15px; }
.nodo .n-inicio { width: 18px; height: 18px; border-radius: 50%; border-color: #D9D7D2; }
.nodo .n-auto { width: 14px; height: 20px; border-color: var(--morado); }
.nodo .n-cond { border-color: #9C7BEA; }
.nodo .n-tarea { border-color: #3DD17F; border-radius: 4px; }
.nodo .n-mem { border-color: #F2C21B; border-radius: 6px 2px 2px 2px; }
.nodo .n-conv { border-color: var(--rojo); transform: skewX(-12deg); }

/* ---------- Lista con palomitas ---------- */
.lista-check { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; color: var(--texto-2); }
.lista-check li { display: flex; gap: 12px; align-items: flex-start; }
.lista-check svg { flex: none; width: 20px; height: 20px; margin-top: 2px; }

/* ---------- Correo de notificación (recreado) ---------- */
.correo {
  width: 100%; max-width: 560px; margin: 0 auto; background: #fff; color: #23262B;
  border-radius: 12px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.5);
  font-family: Helvetica, Arial, sans-serif;
}
.correo__cabecera { background: #15202E; padding: 20px 26px; display: flex; align-items: baseline; gap: 12px; }
.correo__cabecera b { color: #fff; font-size: 19px; }
.correo__cabecera span { color: #B7C3D3; font-size: 13px; }
.correo__franja { background: #1F6FC0; color: #fff; padding: 11px 26px; font-size: 13px; }
.correo__cuerpo { padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 16px; font-size: 14px; }
.correo__datos {
  background: #F4F6F8; border-radius: 8px; padding: 14px 16px;
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px 14px;
}
.correo__datos dt { color: #6A717B; font-weight: 600; }
.correo__datos dd { margin: 0; word-break: break-all; }
.correo__estado { background: #FFF1D6; color: #8A5A00; padding: 2px 8px; border-radius: 4px; font-size: 12.5px; font-weight: 600; }

/* ---------- Capturas con pie ---------- */
.figura { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.figura figcaption { font-size: 15px; color: var(--texto-suave); line-height: 1.55; }
.figura figcaption strong { color: var(--texto); }
.rejilla-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; margin-top: 28px; }

/* ---------- Módulos ---------- */
.modulos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px; background: var(--borde); border: 1px solid var(--borde); border-radius: 14px; overflow: hidden;
}
.modulo { background: var(--superficie-2); padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 12px; }
.modulo__icono {
  width: 40px; height: 40px; border-radius: 10px; background: #221F17; border: 1px solid #3A3220;
  display: flex; align-items: center; justify-content: center;
}
.modulo__icono svg { width: 20px; height: 20px; }
.modulo h3 { font-size: 17px; font-weight: 700; }
.modulo p { font-size: 14.5px; line-height: 1.55; color: #9A978F; }

/* ---------- Gobierno ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 7px 12px; border: 1px solid var(--borde-fuerte); border-radius: 6px;
  font-family: var(--fuente-mono); font-size: 13px; background: var(--superficie); color: var(--texto-2);
}
.apiladas { display: flex; flex-direction: column; }
.apiladas .ventana:last-child { width: 78%; align-self: flex-end; margin-top: -90px; }

/* ---------- Web y móvil ---------- */
.web-movil { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-end; }
.web-movil > .web { flex: 1 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.web-movil > .movil { flex: 0 1 300px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.mini-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.mini-tarjeta { padding: 16px 18px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; }
.mini-tarjeta b { display: block; font-size: 15px; color: var(--texto); }
.mini-tarjeta span { display: block; font-size: 13.5px; color: var(--texto-tenue); margin-top: 4px; line-height: 1.5; }

/* =========================================================
   TIENDA DEL APK
   ========================================================= */
.tienda { display: flex; flex-direction: column; gap: 96px; }

.descarga { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.descarga > .texto { flex: 1 1 440px; display: flex; flex-direction: column; gap: 22px; }
.descarga .pastilla { align-self: flex-start; }

.tarjeta-app {
  flex: 1 1 420px; max-width: 520px; margin: 0 auto;
  background: var(--superficie-2); border: 1px solid #30353C; border-top: 3px solid var(--acento);
  border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
.tarjeta-app__cabecera { display: flex; gap: 16px; align-items: center; }
.tarjeta-app__cabecera img { width: 64px; height: 64px; border-radius: 16px; border: 1px solid #2E3238; }
.tarjeta-app__nombre { font-weight: 700; font-size: 22px; color: var(--texto); }
.tarjeta-app__paquete { font-family: var(--fuente-mono); font-size: 12.5px; color: var(--texto-tenue); }
.insignia-verde {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
  background: #12291D; color: #4FD18C; font-size: 12px; font-weight: 600;
}
.datos-app { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--borde); border-radius: 10px; }
.datos-app > div { padding: 12px 14px; }
.datos-app > div + div { border-left: 1px solid var(--borde); }
.datos-app small { display: block; font-size: 11px; letter-spacing: .08em; color: var(--texto-tenue); }
.datos-app strong { display: block; font-size: 16px; color: var(--texto); margin-top: 4px; }
.hash-caja {
  background: var(--fondo-hundido); border: 1px solid var(--borde); border-radius: 10px;
  padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start;
}
.hash-caja > div { flex: 1; min-width: 0; }
.hash-caja small { display: block; font-size: 11px; letter-spacing: .08em; color: var(--texto-tenue); margin-bottom: 6px; }
.hash-caja code { font-family: var(--fuente-mono); font-size: 12.5px; line-height: 1.6; color: var(--texto-2); word-break: break-all; }
.descarga-fila { display: flex; gap: 16px; align-items: center; }
.boton-descarga {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px 20px; border-radius: 12px; background: var(--acento); color: #17130A; text-decoration: none;
}
.boton-descarga:hover { background: #F0B726; color: #17130A; }
.boton-descarga b { display: block; font-size: 16.5px; }
.boton-descarga small { display: block; font-size: 12.5px; opacity: .8; }
.qr { flex: none; text-align: center; font-size: 11px; color: var(--texto-tenue); }
.qr__lienzo { width: 96px; height: 96px; padding: 6px; background: #fff; border-radius: 8px; margin-bottom: 4px; }
.qr__lienzo img, .qr__lienzo canvas { width: 100% !important; height: 100% !important; }

/* Mensajes de estado de la tienda (cargando / error) */
.aviso {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: 10px;
  border: 1px solid #2A3A52; background: #121A26; color: #B7C3D3; font-size: 14.5px; line-height: 1.55;
}
.aviso--error { border-color: #5A2A2A; background: #261414; color: #F0B9B9; }
.aviso svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }

/* Mientras no carga versiones.txt, el botón de descarga queda deshabilitado */
body:not(.tienda-lista) .boton-descarga { opacity: .45; pointer-events: none; }

/* Guía de instalación */
.guia { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.guia li {
  background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 12px;
  padding: 22px 20px; display: flex; flex-direction: column; gap: 10px;
}
.guia__num {
  width: 32px; height: 32px; border-radius: 8px; background: #26292E; color: var(--acento-claro);
  font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.guia li:first-child .guia__num { background: var(--acento); color: #17130A; }
.guia strong { font-size: 16px; color: var(--texto); }
.guia span { font-size: 14px; line-height: 1.55; color: #9A978F; }

/* Historial de versiones */
.historial__cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }
.buscador {
  display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 46px; flex: 0 1 320px; min-width: 260px;
  border: 1px solid var(--borde-fuerte); border-radius: 10px; background: var(--superficie-2);
}
.buscador input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; color: var(--texto); font: inherit; font-size: 14.5px; }
.tabla-caja { position: relative; border: 1px solid var(--borde); border-radius: 14px; overflow-x: auto; background: var(--superficie-2); }
.tabla { width: 100%; min-width: 780px; border-collapse: collapse; font-size: 14.5px; }
.tabla th {
  text-align: left; padding: 14px 20px; font-weight: 500; font-size: 11.5px; letter-spacing: .08em;
  color: var(--texto-tenue); border-bottom: 1px solid var(--borde);
}
.tabla td { padding: 14px 20px; border-bottom: 1px solid #22262B; color: var(--texto-2); white-space: nowrap; }
.tabla tr:last-child td { border-bottom: none; }
.tabla .col-version { font-weight: 700; color: var(--texto); }
.tabla .col-paquete { font-family: var(--fuente-mono); font-size: 12.5px; color: #9A978F; }
.tabla .col-accion { text-align: right; }
.hash-corto {
  font-family: var(--fuente-mono); font-size: 12px; padding: 5px 8px; border-radius: 6px;
  background: var(--fondo-hundido); border: 1px solid var(--borde); margin-right: 8px;
}
.insignia-actual { margin-left: 10px; padding: 3px 8px; border-radius: 6px; background: #1E1B14; border: 1px solid #3A3220; color: var(--acento-claro); font-size: 12px; font-weight: 600; }
.insignia-historica { padding: 5px 10px; border-radius: 999px; background: #22262B; color: var(--texto-tenue); font-size: 12.5px; }
.enlace-apk {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px;
  border: 1px solid var(--acento); color: var(--texto); text-decoration: none; font-weight: 600; font-size: 13.5px;
}
.tabla-vacia { padding: 28px 20px; text-align: center; color: var(--texto-tenue); }

/* Verificación SHA-256 */
.terminal { flex: 1 1 460px; min-width: 0; background: #0A0B0D; border: 1px solid #30353C; border-radius: 14px; overflow: hidden; }
.terminal__pestanas { display: flex; gap: 4px; padding: 8px 8px 0; border-bottom: 1px solid #23272C; }
.terminal__pestanas button {
  font: inherit; font-size: 13.5px; min-height: 40px; padding: 0 16px; border: none;
  border-radius: 8px 8px 0 0; background: transparent; color: var(--texto-tenue); cursor: pointer;
}
.terminal__pestanas button[aria-selected="true"] { background: var(--superficie); color: var(--texto); box-shadow: inset 0 -2px 0 var(--acento); }
.terminal__comando { padding: 22px 20px; display: flex; gap: 12px; align-items: center; }
.terminal__comando code { flex: 1; min-width: 0; font-family: var(--fuente-mono); font-size: 13.5px; color: #E6E4DF; overflow-x: auto; white-space: nowrap; }

/* ---------- Demo y pie ---------- */
.demo {
  border-radius: 20px; background: #1A1D21; border: 1px solid #30353C;
  padding: clamp(40px, 6vw, 80px); display: flex; flex-wrap: wrap; gap: 48px; align-items: center; justify-content: space-between;
}
.demo > .texto { flex: 1 1 460px; display: flex; flex-direction: column; gap: 20px; }
.formulario { position: relative; flex: 1 1 360px; max-width: 440px; display: flex; flex-direction: column; gap: 14px; }
.formulario label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: #B9B6AE; }
.formulario input {
  font: inherit; font-size: 15px; padding: 13px 14px; border-radius: 8px;
  border: 1px solid var(--borde-fuerte); background: #121417; color: var(--texto);
}
/* Estados del formulario de demo */
.formulario input[aria-invalid="true"] { border-color: #E06A6A; }
.campo-error { font-size: 13px; color: #F0A3A3; }
.formulario button:disabled { opacity: .6; cursor: wait; }
.formulario__estado { padding: 12px 14px; border-radius: 8px; font-size: 14.5px; line-height: 1.5; }
.formulario__estado--exito { background: #12291D; border: 1px solid #1F5A3A; color: #8FE3B4; }
.formulario__estado--error { background: #261414; border: 1px solid #5A2A2A; color: #F0B9B9; }
/* Campo trampa para bots: fuera de la vista pero presente en el HTML */
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pie { border-top: 1px solid #23272C; padding: 40px 24px; }
.pie__interior { max-width: var(--ancho); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.pie img { height: 28px; width: auto; }
.pie nav { display: flex; flex-wrap: wrap; gap: 28px; font-size: 14px; }
.pie nav a { color: var(--texto-tenue); text-decoration: none; }
.pie small { color: #6F6C66; font-size: 13px; }

.solo-lectores { position: absolute; top: 0; left: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* =========================================================
   RESPONSIVO
   ========================================================= */

/* ---------- Tablet (≤ 1024 px) ---------- */
@media (max-width: 1024px) {
  .seccion { padding: 88px 32px; }
  .hero { padding: 72px 32px 0; }
  .nav__enlaces { gap: 20px; font-size: 14px; }
  .bitacora-flotante { display: none; }
  /* Texto e imagen uno debajo del otro, con la imagen a todo el ancho */
  .dividido, .descarga { gap: 40px; }
  .dividido > .texto, .dividido > .visual,
  .descarga > .texto, .tarjeta-app { flex-basis: 100%; }
  .tarjeta-app { max-width: 560px; }
  .encabezado { margin-bottom: 40px; }
  .encabezado > p { max-width: 640px; }
  .web-movil > .web { flex-basis: 100%; }
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos::before { display: none; }
  .terminal { flex-basis: 100%; }
}

/* ---------- Tablet vertical (≤ 860 px) ---------- */
@media (max-width: 860px) {
  .nav__enlaces { display: none; }
  .rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .telefono { width: 100%; max-width: 230px; padding: 7px; border-radius: 30px; }
  .telefono img { border-radius: 24px; }
  .etapa__texto { gap: 10px; }
  .etapa__num { font-size: 22px; }
  .rejilla-2 { grid-template-columns: 1fr; }
  .modulos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .apiladas .ventana:last-child { width: 100%; margin-top: 18px; }
}

/* ---------- Celular (≤ 640 px) ---------- */
@media (max-width: 640px) {
  .seccion { padding: 64px 18px; }
  .hero { padding: 48px 18px 0; }
  .hero__texto { gap: 20px; }
  .hero__captura { margin-top: 40px; }
  .nav__interior { padding: 12px 18px; }
  .nav__logo img { height: 28px; }
  .nav .boton { min-height: 42px; padding: 0 14px; font-size: 14px; }
  .acciones { width: 100%; flex-direction: column; }
  .acciones .boton { width: 100%; }
  .parrafo { font-size: 16px; }

  .pasos, .rejilla-3, .modulos, .nodos, .guia { grid-template-columns: 1fr; }
  .rejilla-3 + .separador { margin-top: 48px; }
  .telefono { width: 240px; max-width: 240px; padding: 9px; border-radius: 36px; }
  /* Pasos: ícono a la izquierda de la tarjeta */
  .paso { flex-direction: row; align-items: flex-start; gap: 14px; }
  .paso__icono { flex: none; width: 48px; height: 48px; }
  .web-movil > .movil .telefono { width: 240px !important; }
  .mini-tarjetas { grid-template-columns: 1fr !important; }

  .correo__cabecera, .correo__franja, .correo__cuerpo { padding-left: 18px; padding-right: 18px; }
  .correo__datos { grid-template-columns: 1fr; gap: 2px; }
  .correo__datos dd { margin-bottom: 8px; }

  /* Tienda */
  .tienda { gap: 64px; }
  .tarjeta-app { padding: 20px; }
  .datos-app { grid-template-columns: 1fr 1fr; }
  .datos-app > div:last-child { grid-column: 1 / -1; border-left: none; border-top: 1px solid var(--borde); }
  .descarga-fila { flex-direction: column; align-items: stretch; }
  .qr { display: none; }
  .buscador { flex: 1 1 100%; min-width: 0; }
  .terminal__pestanas button { padding: 0 12px; }

  /* Historial: cada versión como tarjeta en lugar de tabla */
  .tabla-caja { overflow: visible; background: transparent; border: none; }
  .tabla { min-width: 0; }
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr {
    background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 12px;
    padding: 6px 16px; margin-bottom: 12px;
  }
  .tabla td {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid #22262B; white-space: normal; text-align: right;
  }
  .tabla td::before {
    content: attr(data-label); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--texto-tenue); text-align: left;
  }
  .tabla td.col-accion { border-bottom: none; justify-content: flex-end; }
  .tabla td.col-accion::before { content: none; }
  .tabla .col-paquete { word-break: break-all; }

  .demo { padding: 28px 20px; gap: 32px; }
  .formulario { max-width: none; }
  .pie__interior { flex-direction: column; align-items: flex-start; }
}