/* NODUTEX — estilos base. Estética de plano técnico: filetes de 1 px, rejilla de 12 columnas.
   Todos los colores salen de tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--blanco-tecnico);
  color: var(--grafito);
  font-family: var(--f-cuerpo);
  font-size: 1.0625rem;
  line-height: 1.6;
}
svg { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--f-titular); margin: 0; }
p { margin: 0 0 1rem; max-width: 68ch; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--cobalto); text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: color var(--t), background-color var(--t), border-color var(--t); }
a:hover { color: var(--grafito); }
:focus-visible { outline: 2px solid var(--cobalto); outline-offset: 3px; }

.saltar {
  position: absolute; left: var(--margen); top: -100px; z-index: 10;
  background: var(--grafito); color: var(--blanco-tecnico); padding: 0.75rem 1rem;
}
.saltar:focus { top: 0.75rem; color: var(--blanco-tecnico); }

.contenedor { max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
.rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--hueco); }

/* Etiqueta: mayúsculas, como rótulo de plano */
.etiqueta {
  font-family: var(--f-cuerpo); font-weight: 500; font-size: 0.8125rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--acero); margin: 0 0 0.75rem;
}
.dato { font-family: var(--f-dato); font-size: 1rem; font-weight: 500; letter-spacing: 0.01em; }
.realwear { font-family: var(--f-dato); font-size: 1em; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- Cabecera ---------- */
.cabecera { border-bottom: var(--linea); }
.cabecera .contenedor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 2rem; padding-block: 0.5rem; }
.marca { display: inline-block; line-height: 0; text-decoration: none; }
.marca img { display: block; width: 168px; min-width: 110px; height: auto; }
.nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.75rem; list-style: none; }
.nav a { color: var(--grafito); text-decoration: none; font-size: 0.9375rem; font-weight: 500; display: inline-block; padding-block: 0.5rem; border-bottom: 1px solid transparent; }
.nav a:hover { border-bottom-color: var(--acero); }
.nav a[aria-current="page"] { border-bottom-color: var(--cobalto); color: var(--cobalto); }

/* ---------- Encabezado de página (hoja de plano) ---------- */
.hoja { border-bottom: var(--linea); padding-top: clamp(2.5rem, 7vw, 5rem); }
.regla { height: 14px; width: 100%; color: var(--acero); margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.hoja h1 {
  grid-column: 1 / span 10;
  font-size: clamp(2.5rem, 1rem + 5.4vw, 6.25rem);
  font-weight: 700; line-height: 1; letter-spacing: -0.03em;
}
.hoja .entrada { grid-column: 1 / span 7; margin-top: 1.75rem; font-size: 1.1875rem; }
.hoja .acciones { grid-column: 1 / span 8; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin-top: 2.25rem; margin-bottom: 2.5rem; }
.hoja .entrada.fin { margin-bottom: 2.5rem; }
.cajetin {
  grid-column: 9 / span 4; align-self: end; display: grid; grid-template-columns: auto 1fr;
  border: var(--linea); border-bottom: 0; margin: 3rem 0 0;
}
.cajetin dt, .cajetin dd { margin: 0; padding: 0.5rem 0.75rem; border-bottom: var(--linea); }
.cajetin dt { border-right: var(--linea); margin-bottom: 0; }
.cajetin dd { font-family: var(--f-titular); font-weight: 500; font-size: 0.9375rem; }

/* ---------- Botones ---------- */
.boton {
  display: inline-block; background: var(--cobalto); color: var(--blanco-tecnico);
  border: 1px solid var(--cobalto); padding: 0.875rem 1.5rem; font: 500 1rem/1.2 var(--f-cuerpo);
  text-decoration: none; cursor: pointer; border-radius: 2px;
}
.boton:hover { background: var(--grafito); border-color: var(--grafito); color: var(--blanco-tecnico); }
.enlace { font-weight: 500; }

/* ---------- Secciones ---------- */
.seccion { padding-block: clamp(3rem, 7vw, 5.5rem); border-bottom: var(--linea); }
.seccion .rejilla { row-gap: 2rem; }
.seccion-titulo { grid-column: 1 / span 4; }
.seccion-titulo .num { font-family: var(--f-titular); font-weight: 500; font-size: 0.9375rem; color: var(--acero); display: block; margin-bottom: 0.5rem; }
.seccion-titulo h2 { font-size: clamp(1.625rem, 1.1rem + 1.9vw, 2.75rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
.seccion-cuerpo { grid-column: 5 / span 8; }
.seccion-cuerpo > * + * { margin-top: 1.5rem; }
.seccion-cuerpo--ancho { grid-column: 1 / -1; }
.seccion-cuerpo h3 { font-size: 1.25rem; font-weight: 500; margin-bottom: 0.5rem; }

.banda { background: var(--superficie-alterna); }
/* Acero sobre Superficie alterna da 4,25:1 y no cumple AA: aquí todo el texto va en Grafito */
.banda .etiqueta, .banda .seccion-titulo .num, .banda .columnas .num, .banda thead th { color: var(--grafito); }

.oscura { background: var(--grafito); color: var(--blanco-tecnico); border-bottom: 0; }
.oscura .etiqueta, .oscura .seccion-titulo .num, .oscura .secundario { color: var(--acero-claro); }
.oscura a { color: var(--cobalto-claro); }
.oscura a:hover { color: var(--blanco-tecnico); }
.oscura :focus-visible { outline-color: var(--cobalto-claro); }
.oscura .boton { background: var(--cobalto-claro); border-color: var(--cobalto-claro); color: var(--grafito); }
.oscura .boton:hover { background: var(--blanco-tecnico); border-color: var(--blanco-tecnico); color: var(--grafito); }

/* Columnas separadas por filetes verticales */
.columnas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--linea); }
.columnas--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.columnas--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.columnas > * { padding: 1.5rem 1.5rem 0.5rem 0; }
.columnas > * + * { border-left: var(--linea); padding-left: 1.5rem; }
.columnas h3 { font-size: 1.25rem; font-weight: 500; margin: 0.25rem 0 0.75rem; }
.columnas .num { font-family: var(--f-titular); font-weight: 500; color: var(--acero); font-size: 0.9375rem; display: block; }
.columnas dl { margin: 0; }
.columnas dt { font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acero); margin-top: 1rem; }
.banda .columnas dt { color: var(--grafito); }
.columnas dd { margin: 0; }

.lista-filetes { list-style: none; border-top: var(--linea); }
.lista-filetes > li { padding-block: 1.25rem; border-bottom: var(--linea); }
.lista-filetes h3 { font-size: 1.1875rem; font-weight: 500; margin-bottom: 0.375rem; }

/* Proceso numerado: es una secuencia real */
.proceso { list-style: none; counter-reset: paso; border-top: var(--linea); }
.proceso > li { counter-increment: paso; display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; padding-block: 1.125rem; border-bottom: var(--linea); }
.proceso > li::before { content: counter(paso, decimal-leading-zero); font-family: var(--f-titular); font-weight: 500; color: var(--acero); grid-row: 1 / span 2; }
.proceso h3 { font-size: 1.0625rem; font-weight: 500; margin: 0; }
.proceso p { margin: 0.25rem 0 0; }
.plazo { font-weight: 500; border-left: 2px solid var(--cobalto); padding-left: 1rem; }

.marcador {
  display: inline-block; border: 1px solid currentColor; padding: 0.25rem 0.625rem;
  font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.marcador--cobalto { color: var(--cobalto); }

.frase { font-family: var(--f-titular); font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem); line-height: 1.2; letter-spacing: -0.01em; max-width: 26ch; margin: 0; }

/* Tablas */
.tabla-marco { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; vertical-align: top; padding: 0.875rem 1rem 0.875rem 0; border-bottom: var(--linea); }
thead th { font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--acero); border-top: var(--linea); }
tbody th { font-family: var(--f-titular); font-weight: 500; }

/* Matriz de combinaciones del chasis */
.matriz { border-collapse: collapse; width: 100%; min-width: 30rem; table-layout: fixed; }
.matriz caption { text-align: left; caption-side: top; padding-bottom: 1rem; }
.matriz th, .matriz td { border: var(--linea); padding: 0.875rem 0.75rem; text-align: center; }
.matriz thead th { color: var(--grafito); }
.matriz tbody th { text-align: left; font-family: var(--f-cuerpo); font-weight: 500; font-size: 0.9375rem; text-transform: none; letter-spacing: 0; }
.matriz td { font-family: var(--f-titular); font-weight: 500; font-size: 1.125rem; }

/* Cajas de transparencia */
.cajas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--linea); }
.cajas > div { padding: 1.5rem 1.5rem 0.5rem 0; }
.cajas > div + div { border-left: var(--linea); padding-left: 1.5rem; }
.caja { width: 3.5rem; height: 3.5rem; margin-bottom: 1.25rem; border: 1px solid var(--grafito); }
.caja--negra { background: var(--grafito); }
.caja--gris { background: var(--acero); border-color: var(--acero); }
.caja--cristal { background: transparent; }
.cajas h3 { font-size: 1.25rem; font-weight: 500; margin-bottom: 0.25rem; }
.cajas .perfil { margin-bottom: 0.75rem; }

/* ---------- Calculadora ---------- */
.calculadora { border: var(--linea); background: var(--blanco-tecnico); }
.calculadora form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; padding: 1.5rem; border-bottom: var(--linea); }
.campo { display: flex; flex-direction: column; gap: 0.375rem; }
.campo label { font-weight: 500; font-size: 0.9375rem; }
.ayuda { font-size: 0.875rem; color: var(--acero); margin: 0; }
input[type="text"], input[type="email"], input[type="tel"], select {
  font: 400 1rem/1.4 var(--f-cuerpo); color: var(--grafito); background: var(--blanco-tecnico);
  border: 1px solid var(--acero); border-radius: 2px; padding: 0.75rem; width: 100%;
}
.calculadora input[type="text"] { font-family: var(--f-dato); font-size: 1.0625rem; }
input:focus-visible, select:focus-visible { outline: 2px solid var(--cobalto); outline-offset: 1px; border-color: var(--cobalto); }
input[aria-invalid="true"], select[aria-invalid="true"] { border: 2px solid var(--grafito); }
.error { color: var(--grafito); font-size: 0.875rem; font-weight: 500; margin: 0; }
.calculadora .acciones-form { grid-column: 1 / -1; }
.resultado { padding: 1.5rem; }
.resultado-vacio { color: var(--acero); margin: 0; }
.zonas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 1.5rem; }
.zona { border: var(--linea); padding: 0.625rem 0.75rem; font-size: 0.875rem; }
.zona + .zona { border-left: 0; }
.zona strong { display: block; font-weight: 500; }
.zona[data-activa="true"] { background: var(--grafito); color: var(--blanco-tecnico); border-color: var(--grafito); }
.cifras { display: grid; grid-template-columns: auto 1fr; gap: 0.625rem 1.5rem; margin: 0 0 1.25rem; align-items: baseline; }
.cifras dt { color: var(--acero); font-size: 0.9375rem; }
.cifras dd { margin: 0; }
.cifras .dato { font-size: 1.125rem; }
.mensaje { font-weight: 500; margin-bottom: 0.5rem; }
.aviso { max-width: none; border-top: var(--linea); padding-top: 1rem; margin-top: 1.25rem; font-size: 0.9375rem; color: var(--acero); }

/* ---------- Formulario de contacto ---------- */
.formulario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.formulario .ancho { grid-column: 1 / -1; }
.formulario .campo.ancho { border-top: var(--linea); padding-top: 1rem; }
.formulario fieldset { border: 0; border-top: var(--linea); margin: 0; padding: 1rem 0 0; min-width: 0; }
.formulario legend { padding: 0 0.5rem 0 0; font-weight: 500; font-size: 0.9375rem; float: left; width: 100%; }
.opciones { clear: both; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding-top: 0.75rem; }
.opciones label { display: inline-flex; gap: 0.5rem; align-items: center; padding-block: 0.25rem; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--cobalto); width: 1.125rem; height: 1.125rem; margin: 0; }
.consentimiento { display: flex; gap: 0.75rem; align-items: flex-start; }
.consentimiento input { margin-top: 0.25rem; flex: none; }
.privacidad { font-size: 0.9375rem; border-top: var(--linea); padding-top: 1rem; }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.estado-envio { border: 1px solid var(--grafito); padding: 1rem 1.25rem; font-weight: 500; }
.opcional { font-weight: 400; color: var(--acero); }
.nota-boton { font-size: 0.9375rem; color: var(--acero); margin-top: 0.75rem; }

/* ---------- Pie ---------- */
.pie { background: var(--grafito); color: var(--blanco-tecnico); padding-block: 3.5rem 2.5rem; }
.pie .rejilla { row-gap: 2rem; }
.pie .marca { grid-column: 1 / span 4; align-self: start; margin-top: -1rem; }
.pie-datos { grid-column: 5 / span 4; font-size: 0.9375rem; color: var(--acero-claro); }
.pie-datos p { margin: 0; }
.pie-datos .razon { color: var(--blanco-tecnico); font-weight: 500; }
.pie nav { grid-column: 9 / span 4; }
.pie nav ul { list-style: none; display: grid; gap: 0.25rem; }
.pie a { color: var(--blanco-tecnico); text-decoration: none; font-size: 0.9375rem; display: inline-block; padding-block: 0.25rem; }
.pie a:hover { color: var(--cobalto-claro); text-decoration: underline; }
.pie :focus-visible { outline-color: var(--cobalto-claro); }


/* ================= Rediseño v4: plano técnico en movimiento ================= */

/* Planos técnicos SVG */
.plano path { vector-effect: non-scaling-stroke; }
.plano .costura { stroke-dasharray: 4 4; }
.plano .cota { stroke: var(--acero); stroke-width: 1; }

/* Cabecera sobre fondo Grafito (portada) */
.cabecera--oscura { background: var(--grafito); border-bottom-color: var(--grafito); }
.cabecera--oscura .nav a { color: var(--blanco-tecnico); }
.cabecera--oscura .nav a:hover { border-bottom-color: var(--acero-claro); }
.cabecera--oscura :focus-visible { outline-color: var(--cobalto-claro); }

/* Héroe de portada */
.hoja--portada { border-bottom: 0; padding-top: clamp(1.5rem, 4vw, 3rem); }
.hoja--portada .regla { color: var(--acero); }
.hoja--portada h1 { grid-column: 1 / span 9; font-size: clamp(2.5rem, 0.6rem + 5vw, 5.75rem); line-height: 0.98; letter-spacing: -0.035em; }
.hoja--portada .entrada { grid-column: 1 / span 6; color: var(--acero-claro); }
.hoja--portada .acciones { grid-column: 1 / span 7; }
.hoja--portada .plano-hero { grid-column: 10 / span 3; grid-row: 1 / span 3; align-self: center; justify-self: end; width: 100%; max-width: 20rem; color: var(--acero-claro); }
.hoja--portada .cajetin { border-color: var(--acero); }
.hoja--portada .cajetin dt, .hoja--portada .cajetin dd { border-color: var(--acero); }

/* Chasis: versión estática completa por defecto */
.chasis-cuerpo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); margin-top: 3rem; align-items: start; }
.chasis-figura { margin: 0; border: var(--linea); background: var(--blanco-tecnico); padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.chasis-figura .marcador { align-self: flex-start; margin: 0; }
.plano-chasis { width: 100%; max-height: 50vh; color: var(--grafito); }
.chasis:not(.chasis--anim) .sup:not(.sup-a), .chasis:not(.chasis--anim) .inf:not(.inf-1) { display: none; }
.chasis-lectura { display: flex; align-items: baseline; gap: 1rem; border-top: var(--linea); padding-top: 0.75rem; }
.chasis-codigo { font-size: 2rem; line-height: 1; min-width: 3ch; }
.chasis-codigos { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--linea); border-left: var(--linea); }
.chasis-codigos li { font-family: var(--f-dato); font-size: 1rem; text-align: center; padding: 0.375rem 0; border-right: var(--linea); border-bottom: var(--linea); }
.chasis-codigos li.activo { background: var(--grafito); color: var(--blanco-tecnico); }
.chasis-figura figcaption { font-size: 0.875rem; color: var(--acero); }
.chasis-pasos { list-style: none; border-top: var(--linea); }
.chasis-pasos > li { padding: 1.5rem 0 1.5rem 1.25rem; border-bottom: var(--linea); border-left: 2px solid transparent; }
.chasis-pasos .num { font-family: var(--f-titular); font-weight: 500; color: var(--acero); font-size: 0.9375rem; }
.chasis-pasos h3 { font-size: clamp(1.375rem, 1rem + 1.2vw, 2rem); font-weight: 500; margin: 0.25rem 0 0.75rem; letter-spacing: -0.01em; }
.chasis-pasos > li > * + * { margin-top: 0.75rem; }

/* Chasis animado: solo cuando chasis.js lo activa (JS disponible y sin "reducir movimiento") */
.chasis--anim .sup, .chasis--anim .inf { opacity: 0; transition: opacity 300ms ease; }
.chasis--anim [data-sup="a"] .sup-a, .chasis--anim [data-sup="b"] .sup-b,
.chasis--anim [data-sup="c"] .sup-c, .chasis--anim [data-sup="d"] .sup-d,
.chasis--anim [data-inf="1"] .inf-1, .chasis--anim [data-inf="2"] .inf-2,
.chasis--anim [data-inf="3"] .inf-3 { opacity: 1; }
.chasis--anim .chasis-pasos > li.activo { border-left-color: var(--cobalto); }
@supports (position: sticky) {
  .chasis--anim .chasis-figura { position: sticky; top: 1.25rem; }
  .chasis--anim .chasis-pasos > li { min-height: 78vh; }
}

/* Índice tipográfico de familias */
.familias { list-style: none; border-top: var(--linea); }
.familia { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.5rem; border-bottom: var(--linea); padding-block: 1rem; }
.familia-enlace { color: var(--grafito); text-decoration: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 2rem; }
.familia-enlace::after { content: ""; position: absolute; inset: 0; }
.familia-nombre { font-family: var(--f-titular); font-weight: 700; font-size: clamp(2.25rem, 0.9rem + 5.4vw, 6rem); line-height: 1; letter-spacing: -0.035em; }
.familia-desc { color: var(--acero); max-width: 30ch; }
.familia .plano-familia { width: clamp(4.5rem, 9vw, 8rem); height: auto; color: var(--grafito); }
.familia-enlace:hover .familia-nombre { color: var(--cobalto); }
.nota-planos { font-size: 0.875rem; color: var(--acero); }
/* Solo con puntero fino el plano aparece al pasar o enfocar; en táctil se ve siempre */
@media (hover: hover) and (pointer: fine) {
  .familia .plano-familia { opacity: 0; transition: opacity 200ms ease; }
  .familia:hover .plano-familia, .familia:focus-within .plano-familia { opacity: 1; }
}

/* Fases */
.fases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--linea); }
.fase { padding: 1.5rem 1.5rem 1.5rem 0; min-width: 0; }
.fase + .fase { border-left: var(--linea); padding-left: 1.5rem; padding-right: 0; }
.fase > h3 { font-size: clamp(1.375rem, 1rem + 1vw, 1.75rem); font-weight: 500; }
.fase-cifra { margin: 0.5rem 0 0; font-weight: 500; }
.fase-cifra.dato { font-size: 1.375rem; }
.barra { height: 8px; border: 1px solid var(--acero); margin: 1rem 0 1.25rem; overflow: clip; }
.barra span { display: block; height: 100%; background: var(--cobalto); transform-origin: left center; }
.barra--abierta { border-style: dashed; }
@keyframes llenar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .barra span { animation: llenar linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  }
}
.proceso--continua { counter-reset: paso 5; }

/* Preguntas frecuentes */
.faq { border-top: var(--linea); }
.faq details { border-bottom: var(--linea); }
.faq summary { cursor: pointer; list-style: none; position: relative; padding: 1.25rem 2.5rem 1.25rem 0; font-family: var(--f-titular); font-weight: 500; font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0.25rem; top: 1.125rem; font-size: 1.5rem; line-height: 1; color: var(--cobalto); }
.faq details[open] summary::after { content: "\2212"; }
.faq-respuesta { padding-bottom: 1.25rem; }

/* Fichas de familia en Portafolio */
.familia-ficha .plano-familia { width: 6.5rem; height: auto; color: var(--grafito); margin-bottom: 1rem; }

/* Retícula fotográfica: lista para fotos reales; no se publica sin ellas (ver LEEME) */
.reticula-foto { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--hueco); }
.reticula-foto figure { margin: 0; }
.reticula-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reticula-foto .ancha { grid-column: span 8; } .reticula-foto .angosta { grid-column: span 4; }

/* ---------- Adaptación ---------- */
@media (max-width: 860px) {
  .hoja h1, .hoja .entrada, .hoja .acciones, .cajetin,
  .seccion-titulo, .seccion-cuerpo, .seccion-cuerpo--ancho,
  .pie .marca, .pie-datos, .pie nav { grid-column: 1 / -1; }
  .cajetin { margin-top: 2.5rem; max-width: 22rem; }
  .columnas, .columnas--2, .columnas--4, .cajas { grid-template-columns: 1fr; }
  .columnas > * + *, .cajas > div + div { border-left: 0; padding-left: 0; border-top: var(--linea); }
  .columnas > *, .cajas > div { padding-right: 0; padding-bottom: 1.5rem; }
}
@media (max-width: 860px) {
  .hoja--portada h1, .hoja--portada .entrada, .hoja--portada .acciones { grid-column: 1 / -1; }
  .hoja--portada .plano-hero { display: none; }
  .chasis-cuerpo, .fases { grid-template-columns: minmax(0, 1fr); }
  .fase + .fase { border-left: 0; border-top: var(--linea); padding-left: 0; }
  .fase { padding-right: 0; }
  .chasis--anim .chasis-figura { top: 0; z-index: 2; padding: 0.75rem; gap: 0.5rem; }
  .chasis--anim .plano-chasis { max-height: 30vh; }
  .chasis--anim .chasis-codigos, .chasis--anim .chasis-figura figcaption { display: none; }
  .chasis--anim .chasis-pasos > li { min-height: 60vh; }
}
@media (max-width: 600px) {
  .calculadora form, .formulario { grid-template-columns: 1fr; }
  .familia { gap: 1rem; }
  .calculadora form, .resultado { padding: 1.25rem; }
  .zonas { grid-template-columns: 1fr; }
  .zona + .zona { border-left: var(--linea); border-top: 0; }
  .cifras { grid-template-columns: 1fr; gap: 0.125rem; }
  .cifras dd { margin-bottom: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}