/* Estilos compartidos de arqonbim.com (la portada y Academy). Salieron del <style> de index.html el
   24-sep-2026 para que la página de Academy se vea igual sin copiar 500 líneas: UNA hoja para las dos. */
/* ═══════════════════════════════════════════════════════════════════════════════════════════
   PALETA OFICIAL ArqOn BIM · marca v2.0 — GRAFITO MONOCROMO (14-ago-2026)
   Los mismos hex que `arqon-pc/src/ui/marca.ts`. La web tiene que verse como el programa que
   ofrece: quien baja el instalador va a abrir esta misma marca. Los originales de la identidad
   están en `docs/branding/marca-v2/`.

   LA PALETA ES LA ESCALA DE VALORES DEL SIGNO. No es una paleta al lado del logo: son los
   mismos cinco valores con los que están dibujadas las tres losas del signo NIVELES+EXTRUSION,
   cada uno en el papel que ya cumple ahí — blanco la losa superior, gris claro la media, gris
   medio la inferior y la planta en línea, gris oscuro los cantos, grafito el fondo.

   LA REGLA: EL ACENTO ES EL CONTRASTE, NO UN COLOR. La v1.0 era verde+ámbar y tenía dos reglas
   duras (el ámbar como acento único y el ancla verde obligatoria). Las dos se retiraron con la
   v2.0: en una marca monocroma no hay acento que administrar, y el ancla existía sólo porque
   el verde #152F10 se leía negro. El grafito SE TIENE QUE leer grafito. Lo único con color en
   toda la página es nada: ni un hex fuera de la escala de grises.

   LA PÁGINA ES CLARA Y LAS PIEZAS DEL PRODUCTO SON OSCURAS (15-ago-2026). Primero la hice
   oscura entera y Oscar la frenó: «muy oscura, mucho fondo negro». Tenía razón por dos motivos
   que se ven recién con el scroll largo hecho — el grafito a pantalla completa se lee negro y
   cansa, y encima es al revés que la propia lámina del manual, que es BLANCA con el icono y
   los lockups oscuros encima. Ahora la página es papel y el grafito es la TINTA: los titulares,
   el botón de descarga, la franja del creador y las ventanas del producto.

   CÓMO CONVIVEN LOS DOS MUNDOS: `:root` define la escala CLARA. Las «islas oscuras»
   —`.ventana` y `.franja`— redeclaran los tokens de contenido en su propio ámbito, así todo lo
   que cae adentro (tablas, totales, el globo del IFC) sigue leyendo `--on`/`--filo` sin
   enterarse. Tocar un color de isla es tocar SU bloque de tokens, no cazar reglas sueltas.

   LAS FIGURAS DEL PRODUCTO ESTÁN DIBUJADAS CON DIVS, no son capturas. Es a propósito: pesan
   cero, se ven nítidas en cualquier pantalla y no se desactualizan cuando cambia la UI del
   programa. Si algún día hay capturas reales, entran en el mismo hueco `.ventana`.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  /* ── núcleo de marca ── */
  --grafito: #1E2227;       /* el fondo del icono. Acá es la TINTA y el relleno primario */
  --canto: #454B52;         /* el CANTO de las losas */
  --gris: #7A8087;          /* la losa inferior, la planta en línea, la «q» y el «BIM» */

  /* ── superficies claras · papel neutro frío, sin blanco puro de fondo ── */
  --dim: #F1F3F4;           /* el fondo de la página y del pie */
  --base: #F8F9FA;          /* las secciones que respiran: hero y cierre */
  --cont-low: #FFFFFF;      /* tarjetas y paneles: el papel que se levanta */
  --cont: #F8F9FA;
  --cont-high: #EDEFF1;

  /* ── contenido sobre claro ── */
  --hueso: var(--grafito);  /* el wordmark, que acá va en tinta */
  --acento: var(--grafito); /* relleno del botón de descarga */
  --acento-txt: var(--grafito);
  --on: #1E2227;            /* 15.0:1 sobre el fondo de página */
  --on-var: #454B52;        /*  8.3:1 */
  --on-mut: #656B72;        /*  5.1:1 · el #7A8087 del signo da 3.8:1 y no alcanza para 11 px */
  --filo: rgba(30,34,39,.10);
  --filo-fuerte: rgba(30,34,39,.20);

  /* ── la hoja del formulario oficial ── */
  --papel: #FFFFFF;
  --tinta: #1E2227;
  --tinta-mut: #656B72;
  --linea: #E3E5E7;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  background: var(--dim); color: var(--on-var);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 15px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--acento-txt); text-decoration: none; }
strong, b { color: var(--on); font-weight: 700; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.angosto { max-width: 720px; }

/* Entrada al hacer scroll. Discreta a propósito: 14px y opacidad, nada de rebotes. */
.js .rev { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .rev.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rev { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; }
}

/* ═══ BANNER DE AVISO (lo administra landing.json; oculto por defecto) ═══ */
#banner { display: none; background: var(--canto); padding: 9px 0; text-align: center; font-size: 13px; color: #fff; font-weight: 600; position: relative; z-index: 60; }

/* ═══ BARRA SUPERIOR ═══
   Pegada arriba y traslúcida: el botón de descarga tiene que estar a un click desde cualquier
   punto de la página, que es lo que hace la referencia. El `backdrop-filter` degrada solo en
   navegadores viejos —queda el fondo sólido del fallback— así que no necesita respaldo. */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(248,249,250,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--filo);
}
.nav .fila { display: flex; align-items: center; gap: 28px; height: 62px; }
/* ═══ EL LOCKUP «ArqOn | BIM» ═══
   Tratamiento FILETE, el recomendado del manual (`docs/branding/marca-v2/README.md`): la `q`
   y el `BIM` van un escalón de valor por debajo del resto, separados por el filete vertical.
   Es el mismo gesto que en el splash del programa, resuelto con valor y no con color.

   El signo va INLINE y en su variante NIVELES SOLA —sin la planta en línea—: a 26 px el trazo
   de 3,2 px de la planta desaparece y deja un borrón. Es la regla de tamaño mínimo del manual.
   Inline y no <img> para que sea nítido en cualquier DPI y no cueste una petición.

   Y va en la VARIANTE CLARA (`marca-fusion-claro.svg`): sobre fondo claro las tres caras de las
   losas son grafito y los cantos los grises. Con la variante oscura, la losa superior es BLANCA
   y sobre este fondo desaparece — el signo queda sin su cara principal y se lee como un borrón
   gris. Es el error que tenía la página mientras fue oscura y se dio vuelta. */
.brand { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 18px; color: var(--hueso); letter-spacing: -.15px; }
.brand svg { display: block; flex: none; }
.brand .q { color: var(--gris); }
.brand .filete { width: 1.5px; height: 14px; background: var(--gris); display: block; margin: 0 1px; }
.brand .bim { font-weight: 500; font-size: 15.5px; color: var(--gris); letter-spacing: 0; }
.brand .pc { font-size: 9.5px; font-weight: 700; color: var(--on-mut); border: 1px solid var(--filo-fuerte); border-radius: 999px; padding: 2px 8px; letter-spacing: .8px; margin-left: 3px; }
.nav .links { display: flex; gap: 22px; margin-left: auto; }
.nav .links a { color: var(--on-var); font-size: 13.5px; font-weight: 600; transition: color .15s; }
.nav .links a:hover { color: var(--on); }
.nav .btn-mini {
  background: var(--acento); color: var(--base); font-weight: 700; font-size: 13px;
  border-radius: 9px; padding: 8px 16px; white-space: nowrap; transition: filter .15s;
}
.nav .btn-mini:hover { filter: brightness(1.08); color: var(--base); }

/* ═══ HERO ═══ */
.hero { position: relative; overflow: hidden; padding: 74px 0 0; text-align: center; background: var(--base); }
/* El resplandor ámbar detrás del titular. Es el único degradé de la página y hace todo el
   trabajo de «esto no es un fondo plano» sin agregar una sola imagen. */
.hero::before {
  content: ""; position: absolute; left: 50%; top: -260px; transform: translateX(-50%);
  width: 1100px; height: 700px; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(30,34,39,.055), rgba(30,34,39,0) 70%);
}
/* Retícula tenue, desvanecida hacia abajo. Guiño al plano sin dibujar un plano. */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(30,34,39,.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(30,34,39,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 72%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 72%);
}
.hero > .wrap { position: relative; z-index: 1; }
/* LA FOTO DE LA CHARLA EN LA UMSS, DE FONDO (26-sep-2026). En blanco y negro —la marca es grafito
   monocromo: ni las banderas ni el telón meten color— y bajo un velo de papel que se espesa hacia abajo,
   así el titular y el botón se leen igual que sobre el papel liso y la foto se funde con la página antes
   de la ventana del producto. */
.hero-foto {
  position: absolute; left: 0; right: 0; top: 0; height: 760px; pointer-events: none;
  background: url("/img/umss-2026/auditorio-lleno.jpg") center 38% / cover no-repeat;
  filter: grayscale(1);
}
/* Más visible (26-sep-2026, Oscar: «un poco más visible y que no tape botones»): el velo general es más
   leve, y una elipse más clara queda SÓLO detrás del titular y los botones — la foto se ve a los lados y
   arriba, y el texto sigue sobre papel. */
.hero-foto::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 620px 330px at 50% 330px,
      color-mix(in srgb, var(--base) 80%, transparent) 0%,
      color-mix(in srgb, var(--base) 55%, transparent) 70%,
      transparent 100%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--base) 45%, transparent) 0%,
      color-mix(in srgb, var(--base) 58%, transparent) 50%,
      var(--base) 92%);
}
/* TODO EL CONTENIDO VA SOBRE LA FOTO: la tarjeta del video no estaba posicionada y la foto (absoluta) la
   tapaba hasta cortarla a la mitad. */
.hero-foto { z-index: 0; }
.hero > :not(.hero-foto) { position: relative; z-index: 1; }
/* Sobre la foto, los botones claros van SÓLIDOS: translúcidos, las cabezas del público se veían a través. */
.hero .btn-play, .hero .sello { background: var(--base); }
.foto-credito { display: inline-block; margin-top: 10px; font-size: 12px; color: var(--on-mut); }
.foto-credito:hover { color: var(--acento-txt); }

/* Sello de versión: contorno en el canto de las losas, relleno translúcido. */
.sello {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 24px;
  background: rgba(30,34,39,.035); border: 1px solid var(--filo-fuerte); border-radius: 999px;
  padding: 5px 14px 5px 6px; font-size: 12.5px; color: var(--on-var); font-variant-numeric: tabular-nums;
}
.sello .punto { width: 18px; height: 18px; border-radius: 999px; background: var(--canto); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; }
.sello b { color: var(--on); }

.hero h1 {
  font-size: clamp(34px, 6vw, 62px); font-weight: 700; line-height: 1.05;
  letter-spacing: -1.6px; color: var(--on); max-width: 900px; margin: 0 auto;
}
/* El resalte del titular baja UN ESCALÓN DE VALOR en vez de subir de color — el mismo gesto
   que la «q» del lockup. Con la página oscura esto no hacía nada (el acento y la tinta eran el
   mismo blanco); acá sí se lee. A 62 px, 3.8:1 pasa de sobra para texto grande. */
.hero h1 em { color: var(--gris); font-style: normal; }
.hero .sub { color: var(--on-var); font-size: clamp(15px, 2.2vw, 18px); margin: 22px auto 0; max-width: 640px; line-height: 1.6; }

.cta { margin-top: 32px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
/* EL BOTÓN: relleno GRAFITO con el papel encima — 16.0:1, el par de máximo contraste de la
   paleta. En la página clara es la pieza más oscura después de las ventanas del producto, que
   es exactamente la jerarquía que se busca: mirás el producto, y después el botón. */
.btn {
  display: inline-flex; align-items: center; gap: 10px; background: var(--acento); color: var(--base);
  font-weight: 700; font-size: 16px; border-radius: 13px; padding: 15px 28px;
  box-shadow: 0 8px 22px rgba(30,34,39,.20); transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 12px 28px rgba(30,34,39,.28); color: var(--base); }
.btn svg { flex: none; }
.btn-fantasma {
  display: inline-flex; align-items: center; gap: 8px; color: var(--on);
  border: 1px solid var(--filo-fuerte); background: rgba(30,34,39,.03);
  font-weight: 600; font-size: 15px; border-radius: 13px; padding: 14px 22px; transition: background .15s;
}
.btn-fantasma:hover { background: rgba(30,34,39,.06); color: var(--on); }

/* GOOGLE PLAY (18-ago-2026). Deliberadamente NO es el badge oficial a cuatro colores: la CSP
   prohíbe imágenes de otro dominio (`img-src 'self' data:`) y, sobre todo, la marca v2 es
   grafito monocromo — el logo de Google metería una paleta ajena en la única página donde la
   identidad se sostiene entera. Va como los demás botones, con el ícono en trazo. */
.btn-play {
  display: inline-flex; align-items: center; gap: 11px; color: var(--on);
  border: 1px solid var(--filo-fuerte); background: rgba(30,34,39,.03);
  border-radius: 13px; padding: 11px 22px; transition: background .15s, transform .15s;
}
.btn-play:hover { background: rgba(30,34,39,.06); color: var(--on); transform: translateY(-1px); }
.btn-play svg { flex: none; }
.btn-play .txt { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.btn-play .chico { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--on-mut); }
.btn-play .grande { font-size: 15.5px; font-weight: 700; }

.meta { display: block; margin-top: 16px; color: var(--on-mut); font-size: 12.5px; font-variant-numeric: tabular-nums; }
/* Link discreto al bloque del antivirus. Lo importante es que exista y esté al lado del botón;
   el texto largo vive abajo, en #antivirus, para no tapar la figura del producto. */
.link-av { display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--on-mut); border-bottom: 1px dotted var(--on-mut); }
.link-av:hover { color: var(--acento-txt); border-color: var(--acento-txt); }

/* La figura del hero: asoma desde abajo y se corta contra la sección siguiente. */
.hero-figura { margin: 52px auto -80px; max-width: 900px; padding: 0 24px; position: relative; z-index: 1; }

/* ═══ VENTANAS DEL PRODUCTO (dibujadas, no capturadas) ═══
   ISLA OSCURA. Redeclara los tokens de contenido en su ámbito, así la tabla, los totales y el
   globo del IFC —que leen `--on`, `--filo`, `--acento-txt`— siguen funcionando sin cambiar una
   sola regla. Sobre la página clara, la ventana oscura es lo que hace que el producto SE VEA:
   es la única pieza con peso, y el ojo va ahí. */
.ventana {
  --on: #FFFFFF;
  --on-var: #C7CBCE;
  --on-mut: #8A9198;
  --acento: #FFFFFF;
  --acento-txt: #FFFFFF;
  --filo: rgba(255,255,255,.09);
  --filo-fuerte: rgba(255,255,255,.16);
  background: linear-gradient(180deg, #2C323A, var(--grafito));
  border: 1px solid rgba(30,34,39,.5); border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(30,34,39,.35), 0 3px 10px rgba(30,34,39,.14);
  /* La ventana del hero cuelga dentro de una sección centrada y heredaba el centrado: las
     descripciones de los ítems salían flotando en medio de la celda, que es exactamente lo
     que una planilla nunca hace. Acá se corta la herencia de una vez. */
  text-align: left;
}
.ventana .tb { display: flex; align-items: center; gap: 7px; padding: 10px 13px; background: rgba(0,0,0,.28); border-bottom: 1px solid var(--filo); }
.ventana .tb i { width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,.16); display: block; }
.ventana .tb .tt { margin-left: 9px; font-size: 11.5px; font-weight: 600; color: var(--on-mut); font-style: normal; }
.ventana .cuerpo { padding: 14px 16px 16px; }

.tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
.tabla th { text-align: left; font-size: 9.5px; letter-spacing: .9px; text-transform: uppercase; color: var(--on-mut); font-weight: 700; padding: 0 9px 8px; border-bottom: 1px solid var(--filo); }
.tabla td { padding: 8px 9px; border-bottom: 1px solid rgba(255,255,255,.05); color: var(--on-var); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .cod { color: var(--on-mut); font-variant-numeric: tabular-nums; }
.tabla .desc { color: var(--on); }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla .num.fuerte { color: var(--on); font-weight: 600; }
.tabla tr.marcada td { background: rgba(255,255,255,.07); }
.tabla tr.marcada .desc { color: var(--acento-txt); }

/* Pie de totales de la ventana de presupuesto. */
.totales { display: flex; align-items: center; gap: 18px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--filo); font-size: 12px; flex-wrap: wrap; }
.totales .et { color: var(--on-mut); }
.totales .vv { color: var(--on); font-weight: 700; font-variant-numeric: tabular-nums; }
.totales .grande { margin-left: auto; font-size: 15px; color: var(--acento-txt); }

/* ═══ SECCIONES ═══ */
section { position: relative; }
.bloque { padding: 96px 0; }
.bloque.pegado { padding-top: 130px; }  /* deja lugar a la figura del hero que asoma */
.rotulo { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; color: var(--on-var); text-transform: uppercase; margin-bottom: 14px; }
h2 { font-size: clamp(26px, 3.6vw, 40px); font-weight: 700; line-height: 1.12; letter-spacing: -.9px; color: var(--on); }
.lead { margin-top: 16px; font-size: 16px; color: var(--on-var); line-height: 1.65; max-width: 560px; }
.centrado { text-align: center; }
.centrado .lead { margin-left: auto; margin-right: auto; }

/* Los cuatro atributos, en fila. El equivalente del Fast / Ergonomic / Native / Reliable. */
.cuatro { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.cuatro .item h3 { font-size: 15px; font-weight: 700; color: var(--on); margin: 14px 0 6px; }
.cuatro .item p { font-size: 13.5px; color: var(--on-mut); line-height: 1.6; }
.cuatro .ic { width: 34px; height: 34px; border-radius: 10px; background: rgba(30,34,39,.05); border: 1px solid var(--filo); display: flex; align-items: center; justify-content: center; color: var(--gris); }

/* Fila producto: texto a un lado, ventana al otro. Se alterna con `.invertida`. */
.duo { display: grid; grid-template-columns: .82fr 1.18fr; gap: 56px; align-items: center; }
/* En las filas invertidas hay que dar vuelta TAMBIÉN las columnas, no sólo el `order`: la
   rejilla reparte por posición, así que con las columnas sin invertir la figura caía en la
   columna angosta y el texto se quedaba con el ancho grande — al revés de lo que se quiere. */
.duo.invertida { grid-template-columns: 1.18fr .82fr; }
.duo.invertida .txt { order: 2; }
.duo.invertida .fig { order: 1; }
.lista { list-style: none; margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.lista li { display: flex; gap: 10px; font-size: 14px; color: var(--on-var); line-height: 1.5; }
.lista li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 999px; background: var(--gris); }

/* Separador entre secciones de producto. */
.filo { height: 1px; background: linear-gradient(90deg, transparent, var(--filo), transparent); }

/* ═══ FIGURA IFC ═══ */
.ifc-lienzo { position: relative; background: radial-gradient(120% 120% at 30% 0%, rgba(255,255,255,.05), transparent 60%); border-radius: 10px; }
.ifc-lienzo svg { display: block; width: 100%; height: auto; }
/* El globo del objeto seleccionado. Envuelve el texto y se topa contra el borde derecho del
   lienzo: con `nowrap` la línea larga del IfcWallStandardCase se salía de la ventana, que
   recorta, y el globo aparecía mordido. */
.globo {
  position: absolute; right: 3%; top: 5%; max-width: 46%;
  background: rgba(21,24,28,.95); border: 1px solid var(--acento); border-radius: 9px;
  padding: 7px 11px; font-size: 11px; line-height: 1.45; color: var(--on-var);
  box-shadow: 0 10px 24px rgba(0,0,0,.5);
}
.globo b { display: block; color: var(--acento-txt); font-size: 11.5px; }

/* ═══ HOJA DE PAPEL (formulario B-1) ═══
   Con la página oscura era el único bloque claro y se despegaba sola. Ahora es papel sobre
   papel, así que lo que la hace leerse como HOJA es el blanco puro contra el fondo apenas gris,
   más el filo y una sombra corta: se apoya encima, no flota. */
.hoja { background: var(--papel); color: var(--tinta); border: 1px solid var(--linea); border-radius: 10px; padding: 22px 24px; box-shadow: 0 18px 40px -16px rgba(30,34,39,.20); font-size: 11.5px; }
.hoja .enc { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; border-bottom: 2px solid var(--tinta); padding-bottom: 10px; }
.hoja .enc .f { font-weight: 700; font-size: 13px; letter-spacing: .4px; }
.hoja .enc .o { color: var(--tinta-mut); font-size: 10.5px; margin-top: 3px; }
.hoja .enc .sello-h { font-size: 9.5px; font-weight: 700; letter-spacing: 1px; color: var(--tinta-mut); border: 1px solid var(--linea); border-radius: 6px; padding: 4px 8px; white-space: nowrap; }
.hoja table { width: 100%; border-collapse: collapse; margin-top: 12px; font-variant-numeric: tabular-nums; }
.hoja th { text-align: left; font-size: 9px; letter-spacing: .7px; text-transform: uppercase; color: var(--tinta-mut); padding: 6px 6px; border-bottom: 1px solid var(--linea); }
.hoja td { padding: 6px; border-bottom: 1px solid var(--linea); }
.hoja td.n { text-align: right; }
.hoja tr.tot td { border-bottom: 0; border-top: 2px solid var(--tinta); font-weight: 700; padding-top: 8px; }
.hoja .pie { margin-top: 12px; color: var(--tinta-mut); font-size: 10px; line-height: 1.6; }
.hoja b, .hoja strong { color: var(--tinta); }

/* ═══ TARJETAS ═══ */
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 36px; }
.tarjeta { background: var(--cont-low); border: 1px solid var(--filo); border-radius: 14px; padding: 20px 22px; box-shadow: 0 1px 2px rgba(30,34,39,.05); transition: border-color .18s, transform .18s, box-shadow .18s; }
.tarjeta:hover { border-color: var(--filo-fuerte); transform: translateY(-2px); box-shadow: 0 8px 20px -6px rgba(30,34,39,.14); }
.tarjeta h3 { font-size: 14.5px; font-weight: 700; color: var(--on); margin-bottom: 7px; }
.tarjeta p { font-size: 13px; color: var(--on-mut); line-height: 1.55; }

/* Fichas chicas del «y además». */
.fichas { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; justify-content: center; }
.fichas span { background: rgba(30,34,39,.035); border: 1px solid var(--filo); border-radius: 999px; padding: 8px 15px; font-size: 13px; color: var(--on-var); }

/* ═══ PANELES DE LECTURA LARGA (móvil, antivirus, instalación) ═══ */
.panel { background: var(--cont-low); border: 1px solid var(--filo); border-radius: 16px; padding: 26px 28px; box-shadow: 0 1px 2px rgba(30,34,39,.05); }
.panel + .panel { margin-top: 16px; }
.panel h3 { font-size: 17px; font-weight: 700; color: var(--on); margin-bottom: 10px; }
.panel p { font-size: 14px; color: var(--on-var); line-height: 1.7; }
.panel p + p { margin-top: 10px; }
.panel .nota { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--filo); font-size: 12.5px; color: var(--on-mut); line-height: 1.65; }

/* El aviso del antivirus: filo grafito, sin rojo — no hay nada roto. */
.panel.aviso { border-left: 4px solid var(--acento); }
.panel.aviso h3 { color: var(--acento-txt); display: flex; align-items: center; gap: 9px; }

/* Pasos numerados. El número va en el canto de las losas con blanco encima: se lee como una
   cota del plano, no como un botón. */
.pasos { list-style: none; display: flex; flex-direction: column; gap: 18px; margin-top: 6px; }
.pasos li { display: flex; gap: 14px; align-items: flex-start; }
.pasos .n { flex: none; width: 28px; height: 28px; border-radius: 999px; background: var(--canto); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.pasos .txt { font-size: 14px; color: var(--on-var); line-height: 1.65; }
.pasos .clave { background: rgba(30,34,39,.06); border: 1px solid var(--filo); border-radius: 6px; padding: 1px 7px; font-weight: 700; color: var(--acento-txt); white-space: nowrap; }

/* Novedades (lo enciende app.js si version.json trae notas). */
.notas pre { white-space: pre-wrap; font-family: inherit; font-size: 13.5px; color: var(--on-var); line-height: 1.75; }

/* Huella SHA-256 (oculta desde el 3-ago-2026; el estilo queda para restaurarla). */
.huella { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--filo); }
.huella .rot { font-size: 11px; font-weight: 700; letter-spacing: .6px; color: var(--on-mut); }
.huella code { display: block; margin-top: 6px; font-family: Consolas, monospace; font-size: 11px; color: var(--on); background: rgba(30,34,39,.05); border: 1px solid var(--filo); border-radius: 8px; padding: 9px 11px; word-break: break-all; line-height: 1.5; }

/* ═══ FRANJA DEL CREADOR ═══
   LA OTRA ISLA OSCURA: grafito macizo de borde a borde. Sobre la página clara ya no es «un
   escalón más de gris» sino el contrapunto que corta la página antes del cierre — y es donde
   la tinta de la marca aparece a tamaño grande.
   Redeclara `--base` porque la píldora del celular pinta su texto con ese token: acá lo que
   hay detrás del contenido es grafito, no papel. */
.franja { --base: var(--grafito); background: var(--grafito); color: #fff; }
.franja .fila { display: flex; align-items: center; gap: 22px; padding: 34px 0; flex-wrap: wrap; }
.franja .quien { font-size: 19px; font-weight: 700; color: #fff; }
.franja .rol { font-size: 13.5px; color: rgba(255,255,255,.86); margin-top: 3px; max-width: 460px; line-height: 1.55; }
.franja .acciones { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
/* Relleno blanco sobre el gris de la franja: el contacto directo es la acción principal. */
.franja .cel { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--base); border-radius: 999px; padding: 10px 18px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.franja .grupo { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.6); border-radius: 999px; padding: 9px 17px; font-size: 14px; font-weight: 700; }
.franja .grupo:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ═══ VER Y ENTRAR — el video y la comunidad ═══════════════════════════════════════════
   EL VIDEO NO SE INCRUSTA, SE ENLAZA. La cabecera manda `default-src 'self'` sin `frame-src`,
   así que un <iframe> de TikTok queda bloqueado por el navegador — y abrirle la mano pediría
   admitir marcos Y scripts de terceros en toda la página, que es un precio alto por un
   reproductor. El póster está DIBUJADO acá, con el mismo isotipo del encabezado: pesa cero, se
   ve nítido en cualquier pantalla y no depende de que TikTok responda.  (18-ago-2026) */
.ver-hero { display: flex; align-items: center; gap: 22px; text-align: left;
  max-width: 772px; margin: 30px auto 0; padding: 18px 22px; border-radius: 20px;
  background: var(--cont-low); border: 1px solid var(--filo); box-shadow: 0 10px 30px -14px rgba(30,34,39,.22); }
.ver-hero .ver-txt { min-width: 0; }
.ver-hero .rotulo { margin-bottom: 6px; }
.ver-hero h3 { font-size: 18px; font-weight: 700; color: var(--on); margin-bottom: 6px; }
.ver-hero p { font-size: 13.5px; color: var(--on-mut); line-height: 1.6; }
.ver-hero .acciones { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
@media (max-width: 720px) {
  .ver-hero { flex-direction: column; text-align: center; gap: 16px; }
  .ver-hero .acciones { justify-content: center; }
  .ver-hero p { font-size: 13px; }
  .poster.chico { width: 152px; }
  .poster.chico .play { width: 48px; height: 48px; }
}

/* El póster chico del encabezado: la misma pieza, en 116 px. */
.poster.chico { flex: none; width: 116px; }
.poster.chico .marca { top: 13%; }
.poster.chico .play { width: 42px; height: 42px; }
.poster.chico .pie { padding: 9px 10px; }
.poster.chico .quien { font-size: 11.5px; }

/* El póster: proporción 9:16, como se ve en el teléfono. */
.poster { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden;
  background: var(--grafito); border: 1px solid var(--filo-fuerte); box-shadow: 0 18px 40px -14px rgba(30,34,39,.42);
  transition: transform .18s, box-shadow .18s; }
.poster:hover { transform: translateY(-3px); box-shadow: 0 24px 52px -14px rgba(30,34,39,.5); }
/* La trama isométrica de la marca, en CSS: tres juegos de líneas a 0°, 60° y −60°. */
.poster .trama { position: absolute; inset: 0; opacity: .16;
  background:
    repeating-linear-gradient(0deg,   #7A8087 0 1px, transparent 1px 26px),
    repeating-linear-gradient(60deg,  #7A8087 0 1px, transparent 1px 26px),
    repeating-linear-gradient(-60deg, #7A8087 0 1px, transparent 1px 26px); }
.poster .marca { position: absolute; left: 0; right: 0; top: 17%; display: flex; justify-content: center; }
.poster .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 999px; background: #fff; color: var(--grafito);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: transform .18s; }
.poster:hover .play { transform: translate(-50%, -50%) scale(1.08); }
.poster .pie { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px;
  background: linear-gradient(transparent, rgba(20,23,26,.92) 55%); }
.poster .quien { display: block; color: #fff; font-size: 14.5px; font-weight: 700; }
.poster .que { display: block; color: rgba(255,255,255,.78); font-size: 12px; margin-top: 2px; }
.poster .chapa { position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  padding: 5px 11px; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em; }

/* Los dos botones grandes de la derecha. */
.ver .acciones { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; align-items: flex-start; }
.btn-red { display: inline-flex; align-items: center; gap: 11px; border-radius: 13px; padding: 10px 15px;
  font-weight: 700; font-size: 14px; border: 1.5px solid var(--filo-fuerte); background: var(--cont-low);
  color: var(--on); transition: transform .18s, border-color .18s, box-shadow .18s; }
.btn-red:hover { transform: translateY(-2px); border-color: var(--grafito); color: var(--on);
  box-shadow: 0 10px 24px -8px rgba(30,34,39,.28); }
.btn-red .ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center;
  justify-content: center; background: var(--grafito); color: #fff; }
.btn-red .txt { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.btn-red .chico { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--on-mut); }
.btn-red.wa .ic { background: #1FA855; }

/* ═══ CIERRE + PIE ═══ */
.cierre { padding: 90px 0; text-align: center; background: var(--base); border-top: 1px solid var(--filo); }
footer { border-top: 1px solid var(--filo); padding: 44px 0 34px; background: var(--dim); }
.pie-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.pie-cols h4 { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--on-mut); margin-bottom: 12px; }
.pie-cols ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pie-cols a { color: var(--on-var); font-size: 13.5px; }
.pie-cols a:hover { color: var(--acento-txt); }
.pie-marca .brand { margin-bottom: 12px; }
.pie-marca p { font-size: 12.5px; color: var(--on-mut); line-height: 1.6; max-width: 280px; }
.pie-legal { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--filo); color: var(--on-mut); font-size: 12px; line-height: 1.8; }

/* ═══ PORTADA DEL EVENTO · UMSS (18-sep-2026) ═══
   Una charla dada con ArqOn, dentro del inicio y no en una página aparte (Oscar: «no crees la
   web, sólo integralo a arqonbim.com»). La foto grande con el título encima sobre un degradado
   de grafito —el texto blanco necesita fondo oscuro en CUALQUIER recorte de la foto—, debajo
   fecha, hora y lugar, y tres fotos más. Es la única pieza con color de la página, a propósito:
   lo que se muestra acá es la sala llena, no el producto. El expositor está a la derecha de la
   toma, por eso el encuadre se corre hacia ese lado en pantallas angostas. */
.evento { padding: 0 0 96px; }
.ev-tarjeta { background: var(--cont-low); border: 1px solid var(--filo); border-radius: 20px; overflow: hidden; box-shadow: 0 18px 40px rgba(30,34,39,.08); }
.ev-portada { position: relative; background: var(--grafito); }
.ev-portada img { display: block; width: 100%; height: clamp(360px, 52vw, 560px); object-fit: cover; object-position: 62% 40%; }
.ev-portada::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(30,34,39,0) 32%, rgba(30,34,39,.55) 60%, rgba(30,34,39,.94) 100%); }
.ev-texto { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 0 36px 32px; }
.ev-etiqueta { display: inline-block; margin-bottom: 14px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px;
  padding: 4px 13px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.ev-texto h2 { color: #fff; max-width: 760px; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.ev-texto p { margin-top: 10px; color: rgba(255,255,255,.9); font-size: 16px; max-width: 600px; }
.ev-datos { display: grid; grid-template-columns: 1fr 1fr 2fr; border-bottom: 1px solid var(--filo); }
.ev-dato { padding: 20px 24px; }
.ev-dato + .ev-dato { border-left: 1px solid var(--filo); }
.ev-dato .et { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--on-mut); }
.ev-dato .va { margin-top: 3px; font-size: 16px; font-weight: 700; color: var(--on); line-height: 1.35; font-variant-numeric: tabular-nums; }
.ev-dato .ex { margin-top: 2px; font-size: 13px; color: var(--on-var); }
.ev-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 18px; }
.ev-fotos figure { margin: 0; }
.ev-fotos a { display: block; overflow: hidden; border-radius: 12px; }
.ev-fotos img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .35s ease; }
.ev-fotos a:hover img { transform: scale(1.03); }
.ev-fotos figcaption { margin-top: 8px; font-size: 12.5px; color: var(--on-mut); }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 900px) {
  /* `.duo.invertida` también, si no gana por especificidad y la fila sigue en dos columnas. */
  .duo, .duo.invertida { grid-template-columns: 1fr; gap: 32px; }
  .duo.invertida .txt, .duo.invertida .fig { order: initial; }
  .lead { max-width: none; }
  .cuatro { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .pie-cols { grid-template-columns: 1fr 1fr; gap: 26px; }
  .bloque { padding: 72px 0; }
  .bloque.pegado { padding-top: 110px; }
  .evento { padding-bottom: 72px; }
}
@media (max-width: 720px) {
  .nav .links { display: none; }
  .nav .fila { gap: 12px; }
  .nav .btn-mini { margin-left: auto; }
  .hero { padding-top: 54px; }
  .hero-figura { margin: 40px auto -60px; padding: 0 16px; }
  .franja .acciones { margin-left: 0; width: 100%; }
  .panel { padding: 22px 20px; }
  /* Las tablas dibujadas sueltan las columnas opcionales antes que encogerse ilegibles. */
  .op { display: none; }
  /* El globo del IFC va absoluto sobre el modelo, y a este ancho se salía de la ventana —que
     recorta por `overflow:hidden`, así que quedaba cortado a la mitad. Acá baja al flujo,
     debajo del dibujo, y puede envolver el texto en varias líneas. */
  .globo { position: static; margin-top: 12px; white-space: normal; }
  .tabla { font-size: 11px; }
  .tabla td, .tabla th { padding-left: 6px; padding-right: 6px; }
  .hoja { padding: 16px 14px; font-size: 10.5px; }
  .ev-portada img { height: 420px; object-position: 78% 40%; }
  .ev-texto { padding: 0 20px 24px; }
  .ev-datos { grid-template-columns: 1fr 1fr; }
  .ev-dato { padding: 16px 18px; }
  .ev-dato.lugar { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--filo); }
  .ev-fotos { grid-template-columns: 1fr; padding: 14px; }
}
@media (max-width: 460px) {
  .cuatro { grid-template-columns: 1fr; }
  .pie-cols { grid-template-columns: 1fr; }
  .btn, .btn-fantasma { width: 100%; justify-content: center; }
}

/* ═══ LA PUERTA A ACADEMY (24-sep-2026) ═══ Una tarjeta ancha en la portada, donde estaba la charla. */
.academia-puerta {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: var(--grafito); color: #fff; border-radius: 20px; padding: 26px 30px;
  box-shadow: 0 18px 40px rgba(30,34,39,.10); transition: transform .2s ease;
}
.academia-puerta:hover { transform: translateY(-2px); color: #fff; }
.academia-puerta .ap-sello { font-size: 11px; font-weight: 800; letter-spacing: 1.6px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px; padding: 5px 12px; }
.academia-puerta .ap-tx { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 4px; }
.academia-puerta .ap-t { font-size: 20px; font-weight: 700; color: #fff; }
.academia-puerta .ap-s { font-size: 14px; color: rgba(255,255,255,.84); line-height: 1.55; }
.academia-puerta .ap-ir { font-weight: 700; font-size: 14px; white-space: nowrap; background: #fff; color: var(--grafito); border-radius: 10px; padding: 10px 16px; }