/* PengBIM, web de venta.
   Tokens: un acento (naranja del casco del pingüino, 25/10; antes 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;
  --superficie: #fbfbfa;
  --hoja: #fbfbfa;
  --tinta: #18202e;
  --texto-2: #475263;
  --acento: #ad430a;
  --acento-hover: #8f3708;
  --sobre-acento: #fbf6f1;
  --error: #b42318;
  --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;
    --superficie: #1b2331;
    --hoja: #f2f3f1;
    --tinta: #e7ebf0;
    --texto-2: #a9b2bf;
    --acento: #f2a65e;
    --acento-hover: #f5b97f;
    --sobre-acento: #1a1208;
    --error: #ff9b8f;
    --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;
  --superficie: #1b2331;
  --hoja: #f2f3f1;
  --tinta: #e7ebf0;
  --texto-2: #a9b2bf;
  --acento: #f2a65e;
  --acento-hover: #f5b97f;
  --sobre-acento: #1a1208;
  --error: #ff9b8f;
  --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(--acento); color: var(--sobre-acento);
  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(--acento); 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(--acento); color: var(--sobre-acento); }
.boton-secundario { border: 1.5px solid var(--linea-fuerte); color: var(--tinta); }
@media (hover: hover) and (pointer: fine) {
  .boton-primario:hover { background: var(--acento-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) { .barra .boton-primario { display: none; } }
/* El menú pasa a la hamburguesa antes de partirse en dos líneas (entre 900 y 1100 px se partía). */
@media (max-width: 1100px) {
  .menu { 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(40px, 5vw, 64px); }
.portada .contenedor { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); 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; }








/* 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: #ad430a; }
.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; }

/* 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(--acento); border-radius: 3px;
  background: linear-gradient(var(--acento), var(--acento)) 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: #ad430a; 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(--acento);
}
/* 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(--acento); border-color: var(--acento); color: var(--sobre-acento);
}

/* 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; }






.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(--acento); }




/* 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(--acento); 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. */






.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; box-shadow: inset -2px -2px 0 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; }

/* ---------------------------------------------------------------- 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; }
}
@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; }
}

/* Páginas secundarias */
.legal a:not(.boton) { color: var(--acento); }
.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(--acento); }
.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(--acento); 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(--acento); }
.suscripcion-estado[data-tipo="error"] { color: var(--error); }
.suscripcion .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cierre .contenedor:has(.suscripcion) { align-items: start; }
/* Prompts del regalo: hoja con borde fino completo (la franja gruesa a la izquierda era un recurso genérico). */
.legal pre.prompt {
  white-space: pre-wrap; margin: 12px 0; padding: 16px 18px; border: 1px solid var(--linea-fuerte);
  background: var(--papel-2); border-radius: var(--radio); font: 500 1rem/1.55 "Figtree", sans-serif; color: var(--tinta);
}

.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(--acento); }
.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; }

.plan ul { list-style: disc; } .plan li::marker { color: var(--acento); }

.secuencia-losa figcaption { margin-top: 12px; font-size: 0.95rem; }
.secuencia-losa figure:last-child img { object-fit: cover; object-position: 50% 50%; }
@media (max-width: 640px) {
  .secuencia-losa figure:last-child img { aspect-ratio: 1100 / 452; }
}

/* ---------------------------------------------------------------- pasada de diseño (25/10)
   1. La lámina de la portada es siempre clara: sus textos llevan colores fijos (en modo oscuro
      la burbuja quedaba tinta sobre tinta, 1:1, y el pie gris claro sobre hoja clara).
   2. Tres datos bajo los botones de la portada: lo que el visitante busca antes de seguir leyendo.
   3. Precios y el formulario final en una franja de otro tono: son las dos zonas donde se decide.
   5. Las preguntas se abren con altura animada (solo navegadores que la interpolan).
   6. Enlaces del pie con 44 px de alto en pantallas táctiles. */
.seccion.banda { background: var(--papel-2); border-top: 0; }
.seccion.banda + .seccion { border-top: 0; }
.banda .plan-destacado { background: var(--superficie); }

@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    .preguntas { interpolate-size: allow-keywords; }
    .preguntas details::details-content {
      block-size: 0; overflow: clip;
      transition: block-size 240ms var(--curva), content-visibility 240ms allow-discrete;
    }
    .preguntas details[open]::details-content { block-size: auto; }
  }
}

@media (pointer: coarse) {
  .pie nav a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Superficies del navegador (Impeccable, craft floor): selección, cursor de texto, subrayado y
   barra de desplazamiento con la paleta, no con los colores por defecto. */
::selection { background: color-mix(in srgb, var(--acento) 24%, transparent); color: var(--tinta); }
input, select, textarea { caret-color: var(--acento); }
a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
html { scrollbar-color: var(--linea-fuerte) var(--papel); }
.plan-precio strong, .plan-precio s { font-variant-numeric: tabular-nums; }

/* Pasada con Impeccable (detector + guía Persuade), 25/10.
   1. Portada: la lámina dejaba una caja dentro de otra (la burbuja dentro de la tarjeta). Ahora la imagen
      va sola y el pedido se monta sobre su esquina, como un mensaje encima del modelo.
   2. Pasos del acero: los inactivos quedaban a 2:1 de contraste. Se leen todos; el activo se marca con
      su número lleno.
   3. Texto de "Con IA" a 62ch y el ejemplo del correo con el gris de texto secundario (4,5:1). */
.con-secuencia .acero-pasos li { opacity: 1; }
.acero-pasos li::before { background: var(--papel); }
.acero-ia { max-width: 62ch; }
.suscripcion input::placeholder { color: var(--texto-2); opacity: 1; }
li, figcaption, summary, .plan-nota { text-wrap: pretty; }

/* ---------------------------------------------------------------- web del plugin (25/10)
   La Conexión salió de la web: se vende PengBIM, la pestaña de Revit. La portada lleva el
   formulario de verdad (Impeccable, modo Persuade: la acción en su forma real, no un enlace). */

.suscripcion-corta { width: min(100%, 520px); gap: 6px; }
.fila-campos { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; }
.fila-campos .campo { display: grid; gap: 6px; }
.suscripcion-corta .acepto { font-size: 0.92rem; margin: 2px 0 8px; }
.nota-form { margin: 8px 0 0; color: var(--texto-2); font-size: 0.92rem; max-width: 52ch; }
button.boton { border: 0; cursor: pointer; }

.cota { color: var(--acento); }
.cota strong { color: var(--tinta); }

.secuencia-dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
.secuencia-dos figure:last-child img { object-fit: cover; }

.plan { display: flex; flex-direction: column; gap: 10px; padding: 28px; border: 2px solid var(--tinta); border-radius: 12px; background: var(--superficie); }
.plan ul { margin: 6px 0; padding-left: 1.2em; display: grid; gap: 8px; list-style: disc; }
.plan .boton { margin-top: 8px; align-self: flex-start; }

.barra-movil { display: none; }
@media (max-width: 900px) {
  .fila-campos { grid-template-columns: 1fr; }
  .barra-movil:not([hidden]) {
    display: block; position: fixed; inset: auto 0 0 0; z-index: var(--capa-barra);
    padding: 10px var(--margen) calc(10px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--papel) 92%, transparent);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--linea);
  }
  .barra-movil .boton { width: 100%; }
  .suscripcion-corta .boton { width: 100%; }
}
@media (max-width: 640px) {
  .secuencia-dos { grid-template-columns: 1fr; }
  .secuencia-dos figure:last-child { grid-column: auto; }
  .secuencia-dos img { height: auto; aspect-ratio: auto; }
}
.calc-plan { margin: -8px 0 16px; }
/* Regalo: casa en 4 estaciones (21/10) */
.par-estacion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 6px; }
.par-estacion figure { margin: 0; }
.par-estacion img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radio); border: 1px solid var(--linea); }
.par-estacion figcaption { margin-top: 6px; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-2); }
.copiar { margin: 0 0 18px; }

/* Precio arriba y compra con Hotmart (25/10). */
.precio-portada { margin: 0 0 16px; font-weight: 600; color: var(--texto-2); }
.precio-portada strong { font: 800 2.4rem/1 "Archivo", sans-serif; font-stretch: 80%; color: var(--tinta); margin-right: 4px; }
.precio-portada span { display: inline-block; margin-left: 6px; }
.botones-compra { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }
.planes-pago { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 20px; align-items: stretch; }
.planes-pago .plan { border-width: 1.5px; border-color: var(--linea-fuerte); }
.planes-pago .plan-destacado { border: 2px solid var(--tinta); }
.planes-pago .plan .boton { margin-top: auto; }
.ahorro { font: 700 0.78rem/1.3 "Figtree", sans-serif; font-style: normal; color: var(--acento); border: 1.5px solid currentColor; border-radius: 999px; padding: 2px 8px; vertical-align: 3px; margin-left: 6px; white-space: nowrap; }
.incluye { padding: 6px 0 0 8px; }
.incluye ul { margin: 10px 0 0; padding-left: 1.2em; display: grid; gap: 8px; list-style: disc; }
.incluye li::marker { color: var(--acento); }
@media (max-width: 1000px) { .planes-pago { grid-template-columns: repeat(2, minmax(0, 1fr)); } .incluye { grid-column: 1 / -1; padding-left: 0; } }
@media (max-width: 640px) { .planes-pago { grid-template-columns: 1fr; } .botones-compra .boton { flex: 1 1 100%; } }

/* Mi cuenta y conectar Revit (25/10). */
.cuenta .entrar { margin-top: 18px; }
.boton-google { min-height: 44px; margin: 18px 0 8px; }
.estado-cuenta { min-height: 1.4em; font-weight: 600; color: var(--texto-2); }
.estado-cuenta[data-tipo="error"] { color: var(--error); }
.estado-gestion { margin: 12px 0 0; }
.estado-gestion:empty { min-height: 0; margin: 0; }
.saludo { font-size: 1.15rem; }
.saludo span { color: var(--texto-2); }
.fichas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 24px 0 8px; }
.ficha { padding: 20px 22px; border: 1.5px solid var(--linea-fuerte); border-radius: 12px; background: var(--superficie); }
.ficha h2, .cuenta h2.sub { font-size: 1.15rem; font-stretch: 80%; margin: 0 0 6px; }
.cuenta h2.sub { margin-top: 28px; }
.ficha p { margin: 0; color: var(--texto-2); }
.ficha .dato { font: 800 1.9rem/1.1 "Archivo", sans-serif; font-stretch: 78%; color: var(--tinta); margin: 4px 0 8px; }
.ficha .dato small { font: 600 1rem "Figtree", sans-serif; color: var(--texto-2); }
.equipos { list-style: disc; padding-left: 1.2em; }
.nota-cuenta { color: var(--texto-2); font-size: 0.95rem; }
.acciones-cuenta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.codigo-equipo { font: 800 2.6rem/1 "Archivo", sans-serif; font-stretch: 85%; letter-spacing: 0.06em; color: var(--tinta); margin: 10px 0 18px; }
.enlace { background: none; border: 0; padding: 0; color: var(--acento); font: inherit; text-decoration: underline; cursor: pointer; }
section.listo:not(.acero) { margin-top: 18px; padding: 18px 20px; border: 2px solid var(--acento); border-radius: 12px; }
@media (max-width: 640px) { .fichas { grid-template-columns: 1fr; } }
button.boton-secundario { border: 1.5px solid var(--linea-fuerte); background: none; color: var(--tinta); }
@media (hover: hover) and (pointer: fine) { button.boton-secundario:hover { border-color: var(--tinta); } }

/* Mi cuenta: correo y contraseña (25/10). */
.separador { display: flex; align-items: center; gap: 12px; width: min(100%, 420px); margin: 18px 0 10px; color: var(--texto-2); font-size: 0.95rem; }
.separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--linea-fuerte); }
.form-cuenta { display: grid; gap: 8px; width: min(100%, 420px); }
.form-cuenta label { font-weight: 600; font-size: 0.95rem; }
.form-cuenta input {
  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: 6px;
}
.form-cuenta input:focus-visible { border-color: var(--acento); outline: 2px solid var(--acento); outline-offset: 1px; }
.form-cuenta input[aria-invalid="true"] { border-color: var(--error); }
.form-cuenta .ayuda { margin: -4px 0 6px; color: var(--texto-2); font-size: 0.9rem; }
.form-cuenta .boton { justify-self: start; margin-top: 6px; }
.form-cuenta .boton:disabled { opacity: 0.7; cursor: progress; }
.form-cuenta .nota-cuenta { margin: 2px 0 0; }
.verificar { margin-top: 18px; }
.form-cuenta input.campo-codigo { width: min(100%, 240px); font: 700 1.6rem "Archivo", sans-serif; letter-spacing: 0.32em; font-variant-numeric: tabular-nums; }
.verificar .form-cuenta + .nota-cuenta { margin-top: 14px; }
.cuenta [hidden] { display: none !important; }
.sesion-iniciada { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 6px; font-weight: 600; font-size: 0.95rem; color: var(--texto-2); }
.sesion-iniciada .punto { width: 10px; height: 10px; border-radius: 50%; background: #2e9d5b; }
.ficha .ver-planes { margin-top: 14px; }
.beneficios { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.beneficios li { position: relative; padding-left: 28px; }
.beneficios li::before { content: ""; position: absolute; left: 4px; top: 0.45em; width: 12px; height: 7px; border-left: 2.5px solid var(--acento); border-bottom: 2.5px solid var(--acento); transform: rotate(-45deg); }
.legal.cuenta ul.beneficios { list-style: none; padding-left: 0; }
.panel-cuenta .acciones-cuenta + .nota-cuenta { margin-top: 14px; }

/* ---------------------------------------------------------------- movimiento y secciones nuevas (27/10)
   Pedido de Tofer: la web con todo lo nuevo (ladrillos, enchapes, unifilar, isométrico, lámina U-01,
   recorrido 3D) y animaciones "más orgánicas" (referencia: landing con scroll suave, cinta que corre,
   títulos que se encienden y una lista que se tacha). El movimiento vive en js/movimiento.js; aquí solo
   lo que necesita CSS. Con "reducir movimiento" todo queda quieto. */

/* Lenis (scroll suave): sus reglas mínimas. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* Palabras de los títulos (las arma movimiento.js). */
.palabra-caja { display: inline-block; }
.palabra { display: inline-block; will-change: transform, opacity; }
.portada h1 .palabra-caja { overflow: clip; overflow-clip-margin: 0.12em; vertical-align: top; padding-bottom: 0.06em; margin-bottom: -0.06em; }


/* Lo que ya no haces a mano: la lista se tacha (sin JS, ya viene tachada). */
.manos-reja { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.manos h2 em { font-style: normal; color: var(--acento); }
/* Filas con regla, como una lista de pendientes de obra (antes, seis tarjetas iguales). */
.tachado { display: grid; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--tinta); }
.tachado li {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 2px;
  border-bottom: 1px solid var(--linea);
}
.tachado li > span { color: var(--texto-2); }
.tachado li span span {
  color: var(--texto-2);
  /* El tachado es un fondo por línea (box-decoration-break), así sigue al texto aunque se parta en dos. */
  background: linear-gradient(var(--acento), var(--acento)) no-repeat 0 58% / 100% 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* La X se dibuja con dos trazos (no con un carácter Unicode). */
.tachado li::after {
  content: ""; flex: none; width: 14px; height: 14px; color: var(--acento);
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), currentColor calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
}
.tachado-js li > span, .tachado-js li span span { color: var(--tinta); }
.tachado-js li span span { background-size: 0% 2px; transition: color 500ms var(--curva), background-size 620ms var(--curva); }
.tachado-js li::after { opacity: 0; transform: scale(0.6); transition: opacity 300ms var(--curva) 420ms, transform 300ms var(--curva) 420ms; }
.tachado-js li.tachada span span { color: var(--texto-2); background-size: 100% 2px; }
.tachado-js li.tachada::after { opacity: 1; transform: scale(1); }

/* Dos láminas de instalaciones lado a lado, sobre hoja blanca. */
.dupla { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 28px); align-items: start; }
.dupla figure { margin: 0; }
.dupla picture, #ubicacion picture { display: block; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: clamp(8px, 1.4vw, 16px); overflow: hidden; }
.dupla img, #ubicacion img { width: 100%; height: auto; display: block; }
.dupla figcaption { display: grid; gap: 4px; margin-top: 14px; }
.dupla figcaption span { color: var(--texto-2); }

/* Recorrido. */
.acciones-recorrido { margin: 26px 0 0; }
.recorrido picture { display: block; overflow: hidden; border-radius: var(--radio); }

@media (max-width: 900px) {
  .manos-reja, .dupla { grid-template-columns: 1fr; }
}
/* Las imágenes que se abren con clip-path tienen que ser caja de bloque. */
[data-imagen] picture, .figura picture, .secuencia picture { display: block; }

/* ---------------------------------------------------------------- rediseño (27/10)
   Crítica con Impeccable: en el celular la portada no mostraba Revit, el precio iba antes que el producto
   y las 19 secciones tenían el mismo ritmo. Ahora:
   1. Portada: título, imagen y acción. En el celular la losa va justo después del título, a sangre.
   2. Tres capítulos (Estructuras, Arquitectura e instalaciones, IA) con una portadilla que también sirve de
      índice. El cierre usa la misma franja: es el final que se recuerda.
   Segunda crítica (27/10, Impeccable + design-taste): precio justo después de la portada (pedido de Tofer), un solo
   llamado "Prueba 7 días gratis", franjas en el mismo tema, cabeceras apiladas, cifras sin conteo animado.
   3. Dos momentos anchos (la losa y el terreno) y las cifras reales en un cajetín, como el rótulo de una lámina.
   4. La cinta de herramientas se desliza de lado en el celular en vez de apilar seis paneles.
   Pasada polish con el craft floor de Impeccable (27/10): sin etiqueta sobre el título, cajetín en vez de
   "número grande + rótulo chico", X dibujada en vez de un carácter, títulos de capítulo con tope de 6rem,
   color de error por modo (--error) y botón deshabilitado visible mientras se envía. */
:root { --ancho-amplio: 1440px; }
main { overflow-x: clip; }
.contenedor-ancho { width: min(100% - 2 * var(--margen), var(--ancho-amplio)); margin-inline: auto; }
.seccion + .seccion { border-top: 0; }

h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); font-stretch: 70%; }

/* Portada (28/10/2026, pedido de Tofer: "que apenas se entre se vea el precio y todas las funciones"):
   a la izquierda el título, el precio y el botón; a la derecha las seis especialidades, cada una con una
   imagen real de Revit y sus herramientas en una línea. Estructuras manda: ocupa dos filas y dos columnas. */
.portada { padding: clamp(24px, 3.5vw, 48px) 0 clamp(56px, 8vw, 104px); }
.portada .portada-reja {
  display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 13fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
.portada h1 {
  max-width: 16ch; margin: 0 0 20px; font-size: clamp(2.4rem, 3.7vw, 3.5rem);
  font-stretch: 64%; line-height: 0.95; letter-spacing: -0.012em;
}
.portada .bajada { margin: 0 0 28px; font-size: 1.08rem; max-width: 44ch; }
.portada .precio-portada strong { font-size: clamp(2.6rem, 3.4vw, 3.1rem); }
.portada .precio-portada span { display: block; margin: 6px 0 0; max-width: 34ch; }
.portada .requisitos { margin: 14px 0 0; color: var(--texto-2); font-size: 0.9rem; }

.especialidades {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px;
  grid-template-areas: "est est arq" "est est ins" "top met ia";
}
.pieza { display: flex; flex-direction: column; min-width: 0; color: inherit; text-decoration: none; }
.pieza-est { grid-area: est; } .pieza-arq { grid-area: arq; } .pieza-ins { grid-area: ins; }
.pieza-top { grid-area: top; } .pieza-met { grid-area: met; } .pieza-ia { grid-area: ia; }
.pieza picture {
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden;
  border: 1px solid var(--linea); border-radius: var(--radio); background: var(--hoja);
}
.pieza-est picture { flex: 1; aspect-ratio: auto; min-height: 220px; }
.pieza img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--curva); }
.pieza-nombre {
  margin-top: 10px; font: 800 1.12rem/1.1 "Archivo", sans-serif; font-stretch: 75%; color: var(--tinta);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  transition: text-decoration-color 0.2s var(--curva);
}
.pieza-est .pieza-nombre { font-size: 1.4rem; }
.pieza-lista { margin-top: 3px; color: var(--texto-2); font-size: 0.84rem; line-height: 1.35; }
@media (hover: hover) and (pointer: fine) {
  .pieza:hover img { transform: scale(1.04); }
  .pieza:hover .pieza-nombre { text-decoration-color: var(--acento); }
}
.pieza:focus-visible { outline: 2px solid var(--acento); outline-offset: 4px; border-radius: var(--radio); }

/* Las cifras de la losa, ahora en su sección. */
#losa .cota { margin-top: clamp(28px, 4vw, 44px); }
#losa .cajetin { margin: 16px 0 24px; }

/* Cajetín: las cifras medidas en las pruebas como el rótulo de una lámina, celda por celda. */
.cajetin {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0;
  border-top: 2px solid var(--tinta); border-left: 1px solid var(--linea-fuerte);
}
.cajetin div {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: 10px 14px 12px;
  border-right: 1px solid var(--linea-fuerte); border-bottom: 1px solid var(--linea-fuerte);
}
.cajetin dt { color: var(--texto-2); font-size: 0.85rem; line-height: 1.35; }
.cajetin dd {
  margin: 0; font-family: "Archivo", sans-serif; font-stretch: 75%; font-weight: 800;
  font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums;
}

/* Celular y tableta: título, precio y botón; enseguida las seis especialidades en tres columnas, para que
   quepan todas en la primera pantalla; la presentación va después. */
@media (max-width: 900px) {
  .portada .portada-reja { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .portada-texto { display: contents; }
  .portada h1 { order: 1; max-width: 16ch; margin-bottom: 16px; }
  .portada .accion-portada { order: 2; }
  .especialidades {
    order: 3; margin-top: 28px; grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "est arq ins" "top met ia"; gap: 16px 10px;
  }
  .pieza picture, .pieza-est picture { flex: none; aspect-ratio: 4 / 3; min-height: 0; }
  .pieza-nombre, .pieza-est .pieza-nombre { margin-top: 7px; font-size: 1rem; }
  .portada .bajada { order: 4; margin: 28px 0 0; }
}
@media (max-width: 600px) {
  .pieza-lista { display: none; }
}

/* Capítulos y cierre: franja del segundo tono de papel, con regla gruesa arriba como el borde de una lámina.
   Mismo tema que el resto de la página (antes era una franja invertida; design-taste pide un solo tema). */
.capitulo, .cierre { background: var(--papel-2); border-top: 2px solid var(--tinta); }
.capitulo { padding: clamp(72px, 11vw, 144px) 0 clamp(32px, 4vw, 48px); }
.capitulo-titulo {
  font-size: clamp(3.1rem, 9vw, 6rem); font-stretch: 62%; line-height: 0.9; letter-spacing: -0.015em; max-width: 13ch;
}
.capitulo-titulo .palabra-caja { overflow: clip; overflow-clip-margin: 0.1em; vertical-align: top; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.capitulo-indice {
  display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: clamp(40px, 6vw, 72px); padding-top: 16px;
  border-top: 1px solid var(--linea-fuerte);
}
.capitulo-indice a {
  display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 600; color: var(--tinta);
  transition: color 180ms var(--curva);
}
@media (hover: hover) and (pointer: fine) { .capitulo-indice a:hover { color: var(--acento); } }

.cierre { padding: clamp(72px, 11vw, 144px) 0; }
.cierre h2 { font-size: clamp(2.4rem, 5.4vw, 4.4rem); font-stretch: 64%; line-height: 0.96; }
.cierre p { color: var(--texto-2); }
.cierre-texto img { width: 88px; height: 88px; margin-bottom: 20px; border-radius: 50%; background: #fbfbfa; border: 2px solid var(--tinta); }
.cierre-compra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* Cabecera apilada: título y luego su texto (el título a un lado y el texto al otro era un patrón genérico). */
.cabecera { display: grid; gap: 16px; max-width: 70ch; margin-bottom: clamp(32px, 5vw, 56px); }
.cabecera p { color: var(--texto-2); font-size: 1.12rem; margin: 0; }
.cabecera .puntos { margin-top: 8px; }

/* Pago con Paddle y aviso al volver del checkout. */
.nota-pago { margin: clamp(24px, 3vw, 32px) 0 0; color: var(--texto-2); max-width: 70ch; }
.aviso-compra { margin: 18px 0 0; padding: 14px 18px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: var(--superficie); font-weight: 600; max-width: 62ch; }
.gestion-plan { margin-top: 28px; }
.gestion-plan .confirmar p { font-weight: 600; margin: 0; }
.plan-precio span { flex-basis: 100%; }

/* Áreas táctiles de 44 px: el logo y los deslizadores de la calculadora. */
.marca { min-height: 44px; }
.calc-campo input[type="range"] { height: 44px; }

/* Momentos anchos: la losa y el terreno. */
.secuencia-losa { margin-top: 0; }
.secuencia-losa img { height: clamp(240px, 34vw, 540px); }
.figura-panorama picture { display: block; overflow: hidden; border-radius: var(--radio); }
.figura-panorama img { aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 42%; border: 0; box-shadow: none; }
#terreno .nota { margin-top: 20px; }

/* Pie de figura como rótulo de lámina: nombre en Archivo y la explicación debajo. */
.figura figcaption b, .secuencia figcaption b, .dupla figcaption b {
  display: block; font-family: "Archivo", sans-serif; font-stretch: 78%; font-weight: 800; font-size: 1.2rem; color: var(--tinta);
}
.figura figcaption span { display: block; color: var(--texto-2); }

/* Encofrado: dos láminas de distinto tamaño. */
.mosaico { align-items: start; }
.mosaico .figura img { box-shadow: none; }

/* Circuitos eléctricos, bajo el unifilar y el isométrico. */
.funcion.circuitos { margin-top: clamp(48px, 7vw, 88px); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.circuitos h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-stretch: 70%; }

/* Cajetín del metrado de ladrillos y enchapes. */
#ladrillos .cajetin { margin-top: clamp(40px, 6vw, 72px); }
#ladrillos .cajetin dd { font-size: clamp(1.6rem, 2.6vw, 2rem); }

/* Botón mientras se envía el formulario. */
button.boton:disabled { opacity: 0.62; cursor: progress; transform: none; }

/* Barra de compra del celular: en tableta no se estira a todo el ancho. */
@media (min-width: 600px) and (max-width: 900px) {
  .barra-movil .boton { width: auto; min-width: 320px; margin-inline: auto; display: flex; }
}

/* Autor dentro de "Pensado para proyectos reales". */
.autor { margin-top: clamp(56px, 8vw, 104px); padding-top: clamp(32px, 5vw, 56px); border-top: 1px solid var(--linea); }
.autor h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }

/* Boletín gratis (cuando la venta está abierta). */
.boletin { margin-top: clamp(28px, 4vw, 44px); }
.boletin .nota-form { margin-top: 0; }

@media (max-width: 900px) {
  .cabecera, .funcion.circuitos { grid-template-columns: minmax(0, 1fr); }
  .figura-panorama img { aspect-ratio: 4 / 3; }
}
@media (max-width: 640px) {
  .capitulo-indice { gap: 0 20px; }
}