/* PengBIM, web de venta.
   Tokens: un acento (azul de plano), papel frío, tinta azul noche. Sistema de radios:
   botones en píldora, imágenes y cajas a 6 px. Capas: barra 10, menú móvil 20. */

@font-face {
  font-family: "Archivo";
  src: url("fuentes/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face { font-family: "Figtree"; src: url("fuentes/figtree-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fuentes/figtree-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fuentes/figtree-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fuentes/figtree-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --papel: #f3f4f2;
  --papel-2: #e9ebe8;
  --hoja: #fbfbfa;
  --tinta: #18202e;
  --texto-2: #475263;
  --azul: #2c5697;
  --azul-hover: #234780;
  --sobre-azul: #f7f9fc;
  --linea: rgba(24, 32, 46, 0.14);
  --linea-fuerte: rgba(24, 32, 46, 0.32);
  --sombra: 0 1px 2px rgba(24, 32, 46, 0.06), 0 8px 24px -12px rgba(24, 32, 46, 0.18);
  --radio: 6px;
  --ancho: 1180px;
  --margen: clamp(16px, 4vw, 40px);
  --curva: cubic-bezier(0.23, 1, 0.32, 1);
  --capa-barra: 10;
  --capa-menu: 20;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #0f141c;
    --papel-2: #151c27;
    --hoja: #f2f3f1;
    --tinta: #e7ebf0;
    --texto-2: #a9b2bf;
    --azul: #8db0ea;
    --azul-hover: #a9c4f0;
    --sobre-azul: #0f1724;
    --linea: rgba(231, 235, 240, 0.14);
    --linea-fuerte: rgba(231, 235, 240, 0.34);
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px -12px rgba(0, 0, 0, 0.55);
  }
}
:root[data-theme="dark"] {
  --papel: #0f141c;
  --papel-2: #151c27;
  --hoja: #f2f3f1;
  --tinta: #e7ebf0;
  --texto-2: #a9b2bf;
  --azul: #8db0ea;
  --azul-hover: #a9c4f0;
  --sobre-azul: #0f1724;
  --linea: rgba(231, 235, 240, 0.14);
  --linea-fuerte: rgba(231, 235, 240, 0.34);
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px -12px rgba(0, 0, 0, 0.55);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: "Figtree", system-ui, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

/* Franja sobre la barra fija en teléfonos con muesca (alto 0 en el resto). */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: var(--capa-barra); background: var(--papel); }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3 {
  font-family: "Archivo", "Figtree", sans-serif;
  font-stretch: 72%;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6.2vw, 4.9rem); }
h2 { font-size: clamp(2.05rem, 4.2vw, 3.3rem); }
h3 { font-size: 1.45rem; font-stretch: 80%; line-height: 1.12; letter-spacing: 0; }

.contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }

.saltar {
  position: absolute; left: 12px; top: -48px; padding: 10px 14px; background: var(--azul); color: var(--sobre-azul);
  border-radius: var(--radio); z-index: var(--capa-menu); text-decoration: none; font-weight: 700;
}
.saltar:focus { top: 12px; }

:focus-visible { outline: 3px solid var(--azul); outline-offset: 3px; border-radius: 4px; }

/* ---------------------------------------------------------------- botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0.7em 1.35em; border-radius: 999px;
  font: 700 1rem/1.2 "Figtree", sans-serif; text-decoration: none; white-space: nowrap;
  transition: background-color 180ms var(--curva), color 180ms var(--curva), transform 160ms var(--curva), border-color 180ms var(--curva);
}
.boton:active { transform: scale(0.97); }
.boton-primario { background: var(--azul); color: var(--sobre-azul); }
.boton-secundario { border: 1.5px solid var(--linea-fuerte); color: var(--tinta); }
@media (hover: hover) and (pointer: fine) {
  .boton-primario:hover { background: var(--azul-hover); }
  .boton-secundario:hover { border-color: var(--tinta); }
}

/* ---------------------------------------------------------------- barra */
.barra {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: var(--capa-barra);
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--linea);
}
.barra .contenedor { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.marca img { width: 38px; height: 38px; border-radius: 50%; background: #fbfbfa; border: 1.5px solid var(--tinta); }
.marca span { font-family: "Archivo", sans-serif; font-stretch: 80%; font-weight: 800; font-size: 1.4rem; letter-spacing: -0.01em; }
.menu { display: flex; gap: 26px; }
.menu a { text-decoration: none; font-weight: 600; color: var(--texto-2); padding: 6px 0; }
@media (hover: hover) and (pointer: fine) { .menu a:hover { color: var(--tinta); } }
.barra .boton { min-height: 42px; padding: 0.55em 1.1em; font-size: 0.95rem; }
.abrir-menu { display: none; }

@media (max-width: 900px) {
  .menu, .barra .boton-primario { display: none; }
  .abrir-menu {
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border: 1.5px solid var(--linea-fuerte); border-radius: 999px; background: none; color: var(--tinta); cursor: pointer;
  }
  .abrir-menu span, .abrir-menu span::before, .abrir-menu span::after {
    display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative;
    transition: transform 200ms var(--curva), opacity 150ms var(--curva);
  }
  .abrir-menu span::before, .abrir-menu span::after { content: ""; position: absolute; left: 0; }
  .abrir-menu span::before { top: -6px; }
  .abrir-menu span::after { top: 6px; }
  .barra[data-abierto] .abrir-menu span { background: transparent; }
  .barra[data-abierto] .abrir-menu span::before { transform: translateY(6px) rotate(45deg); }
  .barra[data-abierto] .abrir-menu span::after { transform: translateY(-6px) rotate(-45deg); }
  .barra[data-abierto] .menu {
    display: flex; flex-direction: column; gap: 4px; position: absolute; left: 0; right: 0; top: 100%;
    padding: 12px var(--margen) 20px; background: var(--papel); border-bottom: 1px solid var(--linea); z-index: var(--capa-menu);
  }
  .barra[data-abierto] .menu a { font-size: 1.15rem; padding: 12px 0; color: var(--tinta); }
}

/* ---------------------------------------------------------------- portada */
.portada { padding: clamp(40px, 7vw, 88px) 0 clamp(56px, 8vw, 104px); }
.portada .contenedor { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.portada h1 { max-width: 11ch; }
.portada .bajada { font-size: clamp(1.1rem, 1.6vw, 1.25rem); color: var(--texto-2); max-width: 40ch; margin: 22px 0 32px; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }

.lamina {
  background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra);
  padding: clamp(14px, 2vw, 22px); color: #18202e;
}
.par { display: grid; grid-template-columns: 0.62fr 1fr; gap: clamp(10px, 1.6vw, 20px); align-items: end; }
.par figure { margin: 0; }
.par img { width: 100%; border-radius: 3px; }
.par figcaption { font-size: 0.82rem; font-weight: 600; color: #475263; margin-top: 8px; }

/* Cota: la línea de medida del plano, con el tiempo real entre el PDF y el modelo. */
.cota { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; color: #2c5697; }
.cota::before, .cota::after { content: ""; flex: 1; height: 14px; background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat; }
.cota::before { border-left: 1.5px solid currentColor; }
.cota::after { border-right: 1.5px solid currentColor; }
.cota strong { font-family: "Archivo", sans-serif; font-stretch: 75%; font-weight: 800; font-size: 1.05rem; color: #18202e; white-space: nowrap; }

/* ---------------------------------------------------------------- secciones */
.seccion { padding: clamp(64px, 9vw, 120px) 0; }
.seccion + .seccion { border-top: 1px solid var(--linea); }
.intro { max-width: 62ch; margin-bottom: clamp(32px, 5vw, 56px); }
.intro p { color: var(--texto-2); font-size: 1.15rem; margin-top: 16px; }

/* La pestaña: cinco paneles como en la cinta de Revit, con el nombre del panel abajo. */
.cinta { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 2px solid var(--tinta); }
.panel { display: flex; flex-direction: column; padding: 22px 20px 0; border-right: 1px solid var(--linea); }
.panel:last-child { border-right: 0; }
.panel ul { flex: 1; display: grid; gap: 14px; align-content: start; }
.panel li { line-height: 1.35; }
.panel li b { display: block; font-weight: 700; }
.panel li span { color: var(--texto-2); font-size: 0.93rem; }
.panel .nombre { margin-top: 22px; padding: 10px 0 12px; border-top: 1px solid var(--linea); font-size: 0.85rem; font-weight: 700; color: var(--texto-2); text-align: center; }
.panel-ia .nombre { color: var(--azul); }
@media (max-width: 1000px) {
  .cinta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel { border-bottom: 1px solid var(--linea); }
  .panel:nth-child(2n) { border-right: 0; }
  .panel-ia { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .cinta { grid-template-columns: 1fr; }
  .panel { border-right: 0; }
}

/* Función destacada: texto + imagen, en dos columnas. */
.funcion { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.funcion.invertida { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.funcion.invertida .texto { order: 2; }
.funcion .texto p { color: var(--texto-2); font-size: 1.12rem; margin-top: 18px; }
.puntos { display: grid; gap: 14px; margin-top: 26px; }
.puntos li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; line-height: 1.45; }
.puntos li::before {
  content: ""; width: 14px; height: 14px; margin-top: 4px; border: 2px solid var(--azul); border-radius: 3px;
  background: linear-gradient(var(--azul), var(--azul)) center / 6px 6px no-repeat;
}
.figura { margin: 0; }
.figura img { width: 100%; border-radius: var(--radio); border: 1px solid var(--linea); box-shadow: var(--sombra); background: var(--hoja); }
.figura figcaption { font-size: 0.9rem; color: var(--texto-2); margin-top: 12px; }
.figura-ancha { margin-top: clamp(40px, 6vw, 72px); }

/* Plano PDF: tres láminas en fila, del PDF al modelo. */
.secuencia { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: clamp(12px, 2vw, 24px); margin-top: clamp(32px, 5vw, 56px); }
.secuencia figure { margin: 0; }
/* Las tres láminas con la misma altura: los planos se recortan a su zona central, el 3D entra completo. */
.secuencia img { display: block; width: 100%; height: clamp(260px, 30vw, 420px); object-fit: cover; object-position: 50% 52%; border-radius: var(--radio); border: 1px solid var(--linea); background: #fff; }
.secuencia figure:last-child img { object-fit: contain; }
.secuencia figcaption { margin-top: 12px; font-size: 0.95rem; }
.secuencia figcaption b { display: block; font-family: "Archivo", sans-serif; font-stretch: 78%; font-weight: 800; font-size: 1.2rem; }
.secuencia figcaption span { color: var(--texto-2); }
.nota { margin-top: 28px; color: var(--texto-2); font-size: 0.98rem; max-width: 70ch; }

/* Encofrado e instalaciones: mosaico asimétrico. */
.mosaico { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(16px, 2.4vw, 28px); }
.mosaico article { display: flex; flex-direction: column; gap: 16px; }
.mosaico article:first-child { grid-row: span 2; }
.mosaico picture { display: block; }
.mosaico article:first-child picture { flex: 1; min-height: 0; }
.mosaico img { display: block; width: 100%; border-radius: var(--radio); border: 1px solid var(--linea); background: #fff; }
.mosaico article:first-child img { height: 100%; object-fit: contain; }
.mosaico h3 { margin-bottom: 6px; }
.mosaico p { color: var(--texto-2); margin: 0; }

/* Del corte al acero: una lámina con la armadura que se dibuja con el scroll y luego se gira.
   La escena queda fija (ScrollTrigger) mientras dura la secuencia; sin JS o con "reducir movimiento"
   se ve el resultado final y los cuatro pasos como lista. */
.seccion.acero { padding: 0 0 clamp(40px, 6vw, 72px); }
.acero-escena { padding: clamp(64px, 9vw, 120px) 0 28px; }
.acero-reja { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.acero-pasos { display: grid; gap: 20px; margin: 28px 0 0; padding: 0; list-style: none; }
.acero-pasos li { display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 14px; line-height: 1.45; transition: opacity 260ms var(--curva); }
.acero-pasos li::before {
  content: attr(data-n); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; border: 1.5px solid var(--linea-fuerte);
  font: 800 0.95rem/1 "Archivo", sans-serif; font-stretch: 80%;
  transition: background-color 260ms var(--curva), border-color 260ms var(--curva), color 260ms var(--curva);
}
.acero-pasos b { font-weight: 700; font-size: 1.08rem; }
.acero-pasos span { color: var(--texto-2); }
.acero-hoja {
  margin: 0; background: var(--hoja); color: #475263; border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: clamp(10px, 1.6vw, 18px);
}
.acero-lienzo { display: none; width: 100%; height: min(72svh, 680px); touch-action: pan-y; cursor: grab; border-radius: 3px; }
.js .acero-lienzo { display: block; }
.acero.girando .acero-lienzo { cursor: grabbing; }
.acero-lienzo:focus-visible { outline-offset: 4px; }
.acero-hoja figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 10px; font-size: 0.82rem; font-weight: 600; }
.acero-girar { color: #2c5697; opacity: 0; transition: opacity 400ms var(--curva); }
.acero.listo .acero-girar { opacity: 1; }
.acero-ia { margin-top: 8px; }
.acero-modelo { margin: 18px 0 0; }
.beta {
  display: inline-block; margin-left: 4px; padding: 1px 7px; border: 1.5px solid currentColor; border-radius: 999px;
  font: 700 0.72rem/1.3 "Figtree", sans-serif; font-style: normal; letter-spacing: 0.02em; vertical-align: 2px; color: var(--azul);
}
/* Durante la secuencia: el paso activo resalta y su número se llena. */
.con-secuencia .acero-escena { min-height: 100svh; display: flex; align-items: center; padding: 84px 0 20px; }
.con-secuencia .acero-escena > .contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); }
.con-secuencia .acero-pasos li { opacity: 0.38; }
.acero[data-paso="1"] .acero-pasos li[data-n="1"], .acero[data-paso="2"] .acero-pasos li[data-n="2"],
.acero[data-paso="3"] .acero-pasos li[data-n="3"], .acero[data-paso="4"] .acero-pasos li[data-n="4"],
.acero[data-paso="todos"] .acero-pasos li { opacity: 1; }
.acero[data-paso="1"] li[data-n="1"]::before, .acero[data-paso="2"] li[data-n="2"]::before,
.acero[data-paso="3"] li[data-n="3"]::before, .acero[data-paso="4"] li[data-n="4"]::before {
  background: var(--azul); border-color: var(--azul); color: var(--sobre-azul);
}

/* Página del modelo 3D (That Open): visor en una lámina clara, con su barra de vistas y los datos al lado. */
.visor-pagina { padding: clamp(36px, 6vw, 72px) 0 clamp(48px, 7vw, 88px); }
.visor-intro { max-width: 62ch; margin-bottom: clamp(20px, 3vw, 32px); }
.visor-intro h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); }
.visor-intro p { color: var(--texto-2); font-size: 1.12rem; margin-top: 14px; }
.visor-reja { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(16px, 2.4vw, 28px); align-items: start; }
.visor-hoja { background: var(--hoja); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); padding: 10px; }
.visor-barra { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 2px 10px; }
.visor-barra button {
  min-height: 40px; padding: 0.45em 0.95em; border-radius: 999px; border: 1.5px solid rgba(24, 32, 46, 0.3);
  background: none; color: #18202e; font: 600 0.92rem/1.2 "Figtree", sans-serif; cursor: pointer;
  transition: background-color 180ms var(--curva), color 180ms var(--curva), border-color 180ms var(--curva);
}
.visor-barra button[aria-pressed="true"] { background: #18202e; border-color: #18202e; color: #f3f4f2; }
.visor-barra button:active { transform: scale(0.97); }
.visor-encuadrar { margin-left: auto; }
.visor { position: relative; height: min(70svh, 640px); min-height: 360px; border-radius: 3px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 35%, #ffffff, #eceef0); touch-action: none; }
.visor canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.visor canvas:active { cursor: grabbing; }
.visor-estado { position: absolute; inset: auto 12px 12px 12px; margin: 0; padding: 10px 12px; border-radius: var(--radio);
  background: rgba(251, 251, 250, 0.92); color: #475263; font-size: 0.92rem; }
.visor-estado[data-error] { color: #8a1c1c; }
.visor-datos { border-top: 2px solid var(--tinta); padding-top: 16px; }
.visor-datos h3 { font-size: 1.2rem; margin-bottom: 10px; }
.visor-datos dl { margin: 0; display: grid; gap: 2px; }
.visor-datos dt { color: var(--texto-2); font-size: 0.85rem; margin-top: 8px; }
.visor-datos dd { margin: 0; font-weight: 600; }
.visor-vacio { color: var(--texto-2); margin: 0; }
@media (max-width: 900px) {
  .visor-reja { grid-template-columns: 1fr; }
  .visor { height: 62svh; }
}

/* Créditos */
.precios { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.tabla { border-top: 2px solid var(--tinta); }
.fila { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--linea); }
.fila b { font-weight: 700; }
.fila small { display: block; color: var(--texto-2); font-size: 0.92rem; font-weight: 500; }
.fila .cr { font-family: "Archivo", sans-serif; font-stretch: 75%; font-weight: 800; font-size: 1.55rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fila .cr small { display: inline; font-size: 0.9rem; font-family: "Figtree", sans-serif; font-weight: 600; margin-left: 4px; }
.reglas { display: grid; gap: 12px; margin-top: 28px; }
.reglas li { padding-left: 20px; position: relative; color: var(--texto-2); }
.reglas li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 50%; background: var(--azul); }
.licencia { margin-top: 32px; padding: 22px 24px; border: 1.5px solid var(--linea-fuerte); border-radius: var(--radio); }
.licencia h3 { font-size: 1.3rem; }
.licencia p { margin: 8px 0 18px; color: var(--texto-2); }

/* Calculadora de créditos: a la derecha de las reglas, bajo una regla gruesa como la tabla anterior. */
.calculadora { border-top: 2px solid var(--tinta); padding-top: 22px; }
.calculadora h3 { font-size: 1.3rem; margin-bottom: 16px; }
.calc-tareas { display: none; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.js .calc-tareas { display: flex; }
.calc-tareas button {
  min-height: 44px; padding: 0.5em 1em; border-radius: 999px; border: 1.5px solid var(--linea-fuerte);
  background: none; color: var(--tinta); font: 600 0.95rem/1.2 "Figtree", sans-serif; cursor: pointer;
  transition: background-color 180ms var(--curva), color 180ms var(--curva), border-color 180ms var(--curva);
}
.calc-tareas button[aria-checked="true"] { background: var(--tinta); border-color: var(--tinta); color: var(--papel); }
@media (hover: hover) and (pointer: fine) { .calc-tareas button[aria-checked="false"]:hover { border-color: var(--tinta); } }
.calc-tareas button:active { transform: scale(0.97); }
.calc-panel + .calc-panel { margin-top: 28px; }
.js .calc-panel { display: none; margin-top: 0; }
.js .calculadora[data-tarea="familia"] [data-panel="familia"], .js .calculadora[data-tarea="plano"] [data-panel="plano"],
.js .calculadora[data-tarea="acero"] [data-panel="acero"], .js .calculadora[data-tarea="otras"] [data-panel="otras"] { display: block; }
.calc-sin-js { font-weight: 700; margin: 0 0 8px; }
.js .calc-sin-js { display: none; }
.calc-campos { display: grid; gap: 18px; }
.calc-campo { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: baseline; }
.calc-campo label { font-weight: 600; }
.calc-campo output { font-family: "Archivo", sans-serif; font-stretch: 78%; font-weight: 800; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.calc-campo input, .calc-campo small { grid-column: 1 / -1; }
.calc-campo small { color: var(--texto-2); font-size: 0.88rem; line-height: 1.4; }
.calc-campo input[type="range"] { width: 100%; height: 28px; margin: 0; accent-color: var(--azul); cursor: pointer; }
.calc-resultado { margin: 24px 0 0; padding: 18px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.calc-panel > .calc-resultado:first-child, .calc-sin-js + .calc-resultado { margin-top: 0; }
.calc-resultado strong { font-family: "Archivo", sans-serif; font-stretch: 75%; font-weight: 800; font-size: 3rem; line-height: 1; font-variant-numeric: tabular-nums; margin: 0 4px; }
.calc-resultado span { display: block; margin-top: 8px; color: var(--texto-2); font-size: 0.95rem; }
.calc-subtitulo { margin: 22px 0 4px; font-weight: 700; font-size: 0.95rem; }
.calc-lista li { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.calc-lista span { color: var(--tinta); }
.calc-lista small { display: block; color: var(--texto-2); font-size: 0.88rem; }
.calc-lista b { font-family: "Archivo", sans-serif; font-stretch: 75%; font-weight: 800; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.calc-nota { margin: 16px 0 0; color: var(--texto-2); font-size: 0.95rem; }

/* Claude en Revit: una hoja con pedidos de ejemplo, como notas en el margen del plano. */
.pedidos { background: var(--hoja); color: #18202e; border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); padding: clamp(22px, 3vw, 36px); }
.pedidos h3 { font-size: 1.25rem; color: #2c5697; margin-bottom: 8px; }
.pedidos li { padding: 14px 0; border-bottom: 1px solid rgba(24, 32, 46, 0.14); font-size: 1.08rem; line-height: 1.45; }
.pedidos li:last-child { border-bottom: 0; padding-bottom: 0; }
.pedidos li::before { content: "«"; color: #2c5697; font-weight: 700; margin-right: 2px; }
.pedidos li::after { content: "»"; color: #2c5697; font-weight: 700; margin-left: 2px; }
.bajada-precios { margin: 16px 0 0; color: var(--texto-2); font-size: 1.15rem; }

/* Recursos gratis: tres columnas bajo una regla, sin tarjetas. */
.recursos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); border-top: 2px solid var(--tinta); padding-top: 24px; }
.recursos h3 { font-size: 1.3rem; margin-bottom: 8px; }
.recursos p { color: var(--texto-2); margin: 0; }
.recursos-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: clamp(28px, 4vw, 40px); }
.recursos-pie p { margin: 0; color: var(--texto-2); }

/* Confianza: dos columnas de párrafos cortos con su título. */
.confianza { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px) clamp(32px, 5vw, 72px); }
.confianza h3 { font-size: 1.3rem; margin-bottom: 8px; }
.confianza p { color: var(--texto-2); margin: 0; }

/* Autor */
.autor { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.autor img { width: clamp(140px, 18vw, 220px); aspect-ratio: 1; border-radius: 50%; background: #fbfbfa; border: 2px solid var(--tinta); }
.autor p { color: var(--texto-2); font-size: 1.12rem; max-width: 60ch; margin-top: 16px; }

/* Preguntas */
.preguntas { max-width: 820px; border-top: 2px solid var(--tinta); }
.preguntas details { border-bottom: 1px solid var(--linea); }
.preguntas summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 24px; gap: 16px; align-items: center;
  padding: 20px 0; font-weight: 700; font-size: 1.12rem;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: ""; width: 12px; height: 12px; justify-self: center; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg); transition: transform 200ms var(--curva);
}
.preguntas details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.preguntas details p { color: var(--texto-2); padding-bottom: 20px; margin: 0; max-width: 68ch; }

/* Cierre */
.cierre { text-align: left; }
.cierre .contenedor { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; }
.cierre p { color: var(--texto-2); font-size: 1.15rem; margin: 16px 0 0; max-width: 52ch; }

/* Pie */
.pie { border-top: 1px solid var(--linea); padding: 40px 0 56px; color: var(--texto-2); font-size: 0.93rem; }
.pie .contenedor { display: grid; grid-template-columns: 1fr auto; gap: 20px 40px; align-items: start; }
.pie nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pie nav a { text-decoration: none; font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .pie nav a:hover { color: var(--tinta); } }
.pie .aviso { grid-column: 1 / -1; font-size: 0.85rem; margin: 0; }

/* Páginas legales */
.legal { padding: clamp(48px, 7vw, 88px) 0; }
.legal .contenedor > * { max-width: 72ch; }
.legal h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.legal h2 { font-size: 1.6rem; margin: 40px 0 12px; font-stretch: 80%; }
.legal p, .legal li { color: var(--texto-2); }
.legal ul { list-style: disc; padding-left: 1.3em; margin: 0 0 1em; }
.legal li { margin-bottom: 6px; }
.legal .fecha { font-weight: 600; margin-top: 12px; }

/* ---------------------------------------------------------------- entrada de la portada
   Un solo momento de movimiento: la lámina del plano sube un poco al cargar. Siempre visible. */
@media (prefers-reduced-motion: no-preference) {
  .js .portada .lamina { animation: entra 900ms var(--curva) 120ms backwards; }
}
@keyframes entra { from { transform: translateY(16px) scale(0.985); } }

/* ---------------------------------------------------------------- móvil */
@media (max-width: 900px) {
  .portada .contenedor, .funcion, .funcion.invertida, .precios, .mosaico, .cierre .contenedor, .acero-reja { grid-template-columns: 1fr; }
  /* En el teléfono la escena fija muestra el título, el paso activo y la lámina. */
  .con-secuencia .acero-escena { align-items: flex-start; padding-top: 80px; }
  .con-secuencia .acero-reja { gap: 14px; }
  .con-secuencia .acero-pasos { margin-top: 14px; min-height: 5.6em; }
  .con-secuencia .acero-pasos li { display: none; }
  .acero[data-paso="1"] .acero-pasos li[data-n="1"], .acero[data-paso="2"] .acero-pasos li[data-n="2"],
  .acero[data-paso="3"] .acero-pasos li[data-n="3"], .acero[data-paso="4"] .acero-pasos li[data-n="4"] { display: grid; }
  .acero[data-paso="todos"] .acero-pasos li { display: grid; }
  .con-secuencia .acero-lienzo { height: calc(100svh - 80px - 20px - 15em); min-height: 260px; }
  .funcion.invertida .texto { order: 0; }
  .mosaico article:first-child { grid-row: auto; }
  .mosaico article:first-child img { height: auto; }
  .portada h1 { max-width: 14ch; }
}
@media (max-width: 640px) {
  .secuencia { grid-template-columns: 1fr 1fr; }
  .secuencia figure:last-child { grid-column: 1 / -1; }
  .secuencia img { height: 300px; }
  .secuencia figure:last-child img { height: auto; aspect-ratio: 1400 / 955; }
  .confianza, .recursos { grid-template-columns: 1fr; }
  .autor { grid-template-columns: 1fr; }
  .pie .contenedor { grid-template-columns: 1fr; }
  .acciones .boton { flex: 1 1 100%; }
}

/* Páginas secundarias */
.legal a:not(.boton) { color: var(--azul); }
.legal .fecha { color: var(--texto-2); font-size: 0.95rem; }
.barra .volver { min-height: 42px; }

/* Suscripción (acceso anticipado) */
.suscripcion { display: grid; gap: 8px; width: min(100%, 420px); }
.suscripcion label { font-weight: 600; font-size: 0.95rem; }
.suscripcion input[type="email"], .suscripcion select {
  min-height: 48px; padding: 0 14px; border: 1.5px solid var(--linea-fuerte); border-radius: var(--radio);
  background: var(--papel); color: var(--tinta); font: 500 1rem "Figtree", sans-serif; margin-bottom: 8px;
}
.suscripcion input[type="email"]:focus-visible, .suscripcion select:focus-visible { border-color: var(--azul); }
.suscripcion .acepto { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: var(--texto-2); margin: 4px 0 10px; }
.suscripcion .acepto input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--azul); flex: none; }
.suscripcion .boton { justify-self: start; }
.suscripcion-estado { margin: 4px 0 0; min-height: 1.4em; font-weight: 600; color: var(--texto-2); }
.suscripcion-estado[data-tipo="ok"] { color: var(--azul); }
.suscripcion-estado[data-tipo="error"] { color: #c0392b; }
.suscripcion .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cierre .contenedor:has(.suscripcion) { align-items: start; }
.legal pre.prompt {
  white-space: pre-wrap; margin: 12px 0; padding: 16px 18px; border-left: 3px solid var(--azul);
  background: var(--papel-2); border-radius: var(--radio); font: 500 1rem/1.55 "Figtree", sans-serif; color: var(--tinta);
}

/* Conexión Claude + Revit (19/10) */
.figura-claude { margin: 0; position: relative; }
.figura-claude img { display: block; width: 100%; height: auto; border-radius: var(--radio); border: 1.5px solid var(--tinta); }
.figura-claude figcaption { margin-top: 10px; color: var(--texto-2); font-size: 0.93rem; }
.pedido-burbuja {
  margin: 0 0 14px; padding: 14px 16px; border: 1.5px solid var(--tinta); border-radius: 14px 14px 14px 4px;
  background: var(--papel-2); font-size: 1.02rem; line-height: 1.45; max-width: 46ch;
}
.pedido-burbuja span { display: block; font-size: 0.82rem; font-weight: 700; color: var(--azul); margin-bottom: 4px; }
.pasos-claude { list-style: none; counter-reset: paso; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--tinta); }
.pasos-claude li { counter-increment: paso; padding: 22px 24px 8px 0; display: grid; gap: 8px; }
.pasos-claude li::before { content: counter(paso); font: 800 2.6rem/1 "Archivo", sans-serif; font-stretch: 75%; color: var(--azul); }
.pasos-claude b { font-size: 1.2rem; }
.pasos-claude span { color: var(--texto-2); }
.planes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: 10px; padding: 28px; border: 1.5px solid var(--linea-fuerte); border-radius: 12px; }
.plan-destacado { border: 2px solid var(--tinta); }
.plan h3 { margin: 0; }
.plan-precio { margin: 4px 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan-precio strong { font: 800 3rem/1 "Archivo", sans-serif; font-stretch: 80%; }
.plan-precio s { color: var(--texto-2); font-size: 1.2rem; }
.plan-precio span { color: var(--texto-2); }
.plan-etiqueta { margin: 0; font-weight: 700; color: var(--azul); }
.plan ul { margin: 6px 0; padding-left: 1.2em; display: grid; gap: 8px; }
.plan-nota { margin: 0; color: var(--texto-2); font-size: 0.95rem; }
.plan .boton { margin-top: auto; align-self: flex-start; }
@media (max-width: 820px) {
  .pasos-claude, .planes { grid-template-columns: 1fr; }
}
.plan ul { list-style: disc; } .plan li::marker { color: var(--azul); }
.pasos-claude li { align-content: start; }