/* ============================================================
   DYRECO · Dirección C — NAVE
   p-presupuesto.css — lo que es SOLO de «Pide presupuesto»
   ------------------------------------------------------------
   Se carga DESPUÉS de estilos.css. Los mecanismos y las
   microinteracciones (campos, botones, enlaces, reveals) son
   compartidos y viven en css/estilos.css §21–26. Aquí va la
   COMPOSICIÓN de esta página y las tres piezas que son suyas:

     1 · la MEDIDA CENTRADA (--ancho-pag): esta es la única
         página del sitio que no usa los 1720 px del contenedor
         general. Todo se lee en una sola columna de 1180 px,
         centrada. El formulario manda y el resto lo apoya.
     2 · el FORMULARIO MULTIPASO ramificado por división, con
         carril de resumen pegajoso al lado.
     3 · el TELÓN DIAGONAL (.sec--telon): la transición de
         sección propia de esta página. No es el filete de la
         Home ni el .sec--diagonal ni el .sec--cambio: es un
         panel que cubre la sección y se retira hacia arriba
         dejando pasar una línea amarilla en diagonal.
   ============================================================ */

:root {
  /* Medida de esta página. La retícula general del sitio es de 1720 px y
     asimétrica; aquí el encargo pide lo contrario (centrado y sin ruido), y
     una columna de lectura larga delante de un formulario es exactamente lo
     que hace que nadie lo rellene. Es un token propio porque lo comparten
     ocho bloques de la página, no un ancho suelto de uno. */
  --ancho-pag: 1180px;

  /* Carril del resumen. Lo bastante ancho para que quepa un correo
     electrónico completo sin partirse en tres líneas. */
  --carril: 316px;

  /* Ritmo vertical propio, más corto que el del sitio (--sec-y llega a
     176 px y encadena 352 px entre dos secciones). Aquí el encargo pide la
     página con menos ruido y el formulario como protagonista: si las cinco
     secciones de apoyo respiran como las de la Home, el formulario queda
     enterrado bajo dos pantallas de aire. Es una decisión de esta página, no
     un clamp olvidado. */
  --sec-y-pag: clamp(64px, 6.6vw, 116px);

  /* El H1 de esta página no vive en un hero de 100dvh: vive en una
     entradilla baja y centrada, así que no puede usar --fs-h1 (que llega a
     7rem y aquí dejaría el formulario fuera de pantalla). Escala propia,
     entre el H1 del sitio y el H2. */
  --fs-h1-quieto: clamp(2.25rem, 5.2vw, 4.25rem);

  /* El rojo de error YA NO se declara aquí. Nació en esta hoja porque
     estilos.css lo llevaba escrito a mano; ahora `--error` vive en tokens.css
     y redeclararlo desde una hoja de página es exactamente lo que prohíbe §29:
     el token del sistema pasaría a valer lo que diga la última página cargada.
     Mismo valor, misma pinta, una sola fuente de verdad. */
}


/* ============================================================
   1 · ENTRADILLA — la sección más baja del sitio, y centrada
   ============================================================ */

.ent {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: grid;
  align-items: center;
  min-height: clamp(360px, 52dvh, 540px);
  padding-top: calc(var(--alto-cab) + clamp(44px, 5vw, 84px));
  padding-bottom: clamp(40px, 4.5vw, 76px);
  border-bottom: 1px solid var(--linea);
}
.ent__fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.ent__foto { position: absolute; inset: 0; border-radius: 0; }
/* Scrim muy fuerte a propósito: la foto está aquí para dar temperatura, no
   para mirarse. Esta es la página con menos ruido del sitio. */
.ent__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(88% 78% at 50% 42%, rgba(14,14,16,.52) 0%, rgba(14,14,16,.90) 100%),
    linear-gradient(180deg, rgba(14,14,16,.88) 0%, rgba(14,14,16,.68) 38%, rgba(14,14,16,.95) 100%);
}

.ent__cont {
  max-width: var(--ancho-pag);
  display: grid;
  justify-items: center;
  text-align: center;
}
.ent__kicker { margin-bottom: clamp(16px, 1.8vw, 24px); }
.ent__h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-h1-quieto);
  line-height: .94;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: #fff;
  max-width: 21ch;
  text-wrap: balance;
  text-shadow: var(--sombra-texto), 0 1px 4px rgba(0,0,0,.6);
  margin-bottom: var(--pieza);
}
.ent__p {
  color: rgba(242,242,240,.92);
  /* 58ch eran 568 px y 76 caracteres reales. */
  max-width: var(--medida);
  text-shadow: 0 2px 26px rgba(0,0,0,.9);
}

.ent__senales {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(18px, 3vw, 48px);
  margin-top: clamp(26px, 3vw, 42px);
}
.senal {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding-left: clamp(18px, 3vw, 48px);
  border-left: 1px solid var(--linea-alta);
}
.senal:first-child { border-left: 0; padding-left: 0; }
.senal__d {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  line-height: 1;
  letter-spacing: .03em;
  color: var(--amarillo);
  font-variant-numeric: tabular-nums;
}
.senal__tel {
  display: inline-flex; align-items: center; min-height: 44px;
  transition: color var(--dur-ui) var(--ease);
}
.senal__tel:hover { color: var(--texto); }
.senal__l {
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--apagado);
  max-width: 30ch;
  text-shadow: 0 1px 12px rgba(0,0,0,.9);
}
.ent__baja { margin-top: clamp(14px, 1.6vw, 22px); }

/* En móvil la entradilla se comprime a propósito: cada 100 px que ocupe aquí
   son 100 px que el formulario baja, y el formulario es la página. */
@media (max-width: 700px) {
  .ent { min-height: 0; }
  .ent__p { font-size: var(--fs-sm); }
  .ent__senales { flex-direction: column; gap: 14px; margin-top: 24px; }
  .senal { border-left: 0; padding-left: 0; }
  .senal__d { font-size: 1.375rem; }
  .senal__l { max-width: 34ch; }
}


/* ============================================================
   2 · QUÉ NECESITAMOS DE TI — franja fina previa al formulario
   ============================================================ */

.req { padding-block: clamp(34px, 3.6vw, 60px); background: var(--sup); border-bottom: 1px solid var(--linea); }
.req__cont {
  max-width: var(--ancho-pag);
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: clamp(20px, 2.4vw, 32px) clamp(28px, 4vw, 64px);
  align-items: start;
}
.req__t {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.12;
  letter-spacing: .04em;
  text-transform: uppercase;
  max-width: 16ch;
}
.req__l {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
}
.req__i {
  display: grid;
  gap: 8px;
  align-content: start;
  border-top: 1px solid var(--linea-alta);
  padding-top: 14px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--apagado);
  transition: border-color 620ms var(--ease);
}
.req__i:hover { border-color: var(--amarillo); }
.req__n {
  font-family: var(--display); font-weight: 600;
  font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker);
  color: var(--amarillo);
}

@media (max-width: 900px) {
  .req__cont { grid-template-columns: 1fr; }
  .req__l { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .req__l { grid-template-columns: 1fr; }
}


/* ============================================================
   3 · EL FORMULARIO — el producto de la página
   ============================================================ */

.presu { padding-block: clamp(48px, 5vw, 84px) var(--sec-y-pag); }
.presu__int {
  width: 100%;
  max-width: var(--ancho-pag);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.presu__cab { margin-bottom: clamp(28px, 3vw, 48px); }
.presu__h2 { max-width: 18ch; }
.presu__entrada { color: var(--apagado); max-width: var(--medida); margin-top: var(--pieza); }

.presu__caja {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--carril);
  gap: clamp(20px, 2.4vw, 40px);
  align-items: start;
}

/* --- la caja del formulario --- */
.presu__form {
  position: relative;
  background: var(--sup);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: clamp(22px, 2.8vw, 48px);
}
/* Filete amarillo superior. Llevaba `transform: skewX(-30deg)` «con el corte
   diagonal del wordmark», pero sobre 2 px de alto un sesgo de 30° desplaza
   1,15 px EN TOTAL: a 3 aumentos se ve una línea recta. O se sube la franja a
   6-8 px —y entonces el amarillo deja de ser luz y pasa a ser superficie, que
   es justo lo que prohíbe la dirección (§1: «no rellena superficies grandes»)—
   o el corte se lleva a donde sí cabe. Se lleva a los EXTREMOS con `clip-path`,
   que es como se lee en los botones: la línea entra y sale en diagonal. */
.presu__form::before {
  content: "";
  position: absolute; left: 2px; right: 2px; top: -1px;
  height: 2px;
  background: var(--amarillo);
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  pointer-events: none;
}

/* --- barra de progreso --- */
.prog { margin-bottom: clamp(26px, 3vw, 40px); }
.prog__l {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.prog__b {
  display: grid;
  gap: 5px;
  justify-items: start;
  width: 100%;
  min-height: 44px;
  padding: 4px 0 12px;
  text-align: left;
}
.prog__n {
  font-family: var(--display); font-weight: 600;
  font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker);
  color: var(--apagado);
  transition: color var(--dur-ui) var(--ease);
}
.prog__t {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(.875rem, 1.05vw, 1.0625rem);
  line-height: 1.1;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--apagado);
  transition: color var(--dur-ui) var(--ease);
}
.prog__i.is-hecho .prog__n,
.prog__i.is-hecho .prog__t { color: var(--texto); }
.prog__i.is-activo .prog__n { color: var(--amarillo); }
.prog__i.is-activo .prog__t { color: var(--texto); }
.prog__b:hover .prog__t { color: var(--texto); }
/* Un paso al que todavía no se puede saltar no debe parecer pulsable — pero
   «02 DETALLES» y «03 CONTACTO» son la única señal de qué viene después, así
   que ahí sigue habiendo INFORMACIÓN que leer.
   La opacidad se quita del todo. Con `.55` el contraste caía a 2,5:1 y con
   `.78` se quedaba en 3,79:1 (medido: 11,8 px en «02» y 15,1 px en
   «Detalles»), por debajo de 4,5:1. Que sean `<button disabled>` de verdad los
   ampara técnicamente por la excepción de WCAG 1.4.3, pero si el argumento
   para dejarlos visibles es que hay algo que LEER, entonces hay que poder
   leerlo: con `--apagado` opaco quedan 7,61:1 (eran 5,79 hasta que el token
   se aclaró el 6-sep-2026; el argumento no cambia, la cifra sí).
   El estado sigue distinguiéndose sin la opacidad, que nunca fue lo que lo
   distinguía: el hecho va en blanco, el activo lleva el número en amarillo y
   el rótulo en blanco, el pendiente se queda en gris; y ni el cursor cambia ni
   el hover responde. */
.prog__b[disabled] { cursor: default; }
.prog__b[disabled]:hover .prog__t { color: var(--apagado); }

.prog__pista { position: relative; height: 2px; background: var(--linea); overflow: hidden; }
.prog__barra {
  display: block; height: 100%; width: 100%;
  background: var(--amarillo);
  transform-origin: left center;
  transform: scaleX(.3333);
  transition: transform 620ms var(--ease-suave);
}

/* --- pasos --- */
.fpaso { display: grid; }
.fpaso[hidden] { display: none; }
.fpaso__t {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  margin-bottom: 10px;
}
/* El foco salta aquí al cambiar de paso, así que el anillo tiene que
   verse — pero ceñido al rótulo, no a los 660 px de la fila. */
.fpaso__t { width: fit-content; max-width: 100%; }
.fpaso__t:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 6px; }
.fpaso__n {
  font-family: var(--display); font-weight: 600;
  font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker);
  color: var(--amarillo);
  flex: none;
}
.fpaso__p { color: var(--apagado); font-size: var(--fs-sm); max-width: var(--medida-s); margin-bottom: clamp(22px, 2.4vw, 32px); }
.fpaso__nota { margin-top: clamp(20px, 2vw, 28px); font-size: var(--fs-sm); color: var(--apagado); max-width: var(--medida-s); }

/* Entrada del paso: se desliza desde el lado hacia el que se va. Es la
   microinteracción del formulario y no se parece a los reveals de scroll. */
html.js .fpaso.is-entrando { animation: fpaso-entra 520ms var(--ease) both; }
html.js .fpaso.is-entrando--atras { animation-name: fpaso-entra-atras; }
@keyframes fpaso-entra {
  from { opacity: 0; transform: translate3d(26px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes fpaso-entra-atras {
  from { opacity: 0; transform: translate3d(-26px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

/* --- grupos y rejillas de campos --- */
.grupo { border: 0; padding: 0; margin: 0 0 clamp(20px, 2.2vw, 28px); min-width: 0; }
.grupo:last-child { margin-bottom: 0; }
.grupo__l {
  display: block;
  padding: 0 0 12px;
  font-family: var(--display); font-weight: 600;
  font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--amarillo);
}
.grupo__error { margin-top: 12px; }

.rejilla2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 20px);
  margin-bottom: clamp(20px, 2.2vw, 28px);
}
.rejilla2 > .campo:only-child { grid-column: 1 / -1; }

/* Los campos de esta página se apoyan en .campo de estilos.css §26
   (etiqueta flotante + filete amarillo al enfocar). Aquí solo se añade lo
   que un formulario largo necesita y allí no existe.

   ⚠️ TODO ESTE BLOQUE VA ACOTADO A `.presu__form`. Antes no lo estaba: una
   hoja de PÁGINA reescribía el componente compartido para las ocho, y como
   `.campo` solo existe hoy en dos páginas nadie lo notaba. El día que una
   tercera página monte un formulario, hereda de rebote el `top: 62px` de esta
   —que depende de la altura de campo de ESTA— sin haberlo pedido.
   Lo que de verdad le falta al componente compartido (la guarda de
   `[hidden]`, el `option` sobre fondo oscuro, el `:disabled`) no se puede
   subir desde aquí: estilos.css es hoja común y no se toca en esta fase.
   Queda anotado como pendiente en la hoja compartida, no borrado. */
.presu__form .campo { margin-bottom: 0; }
.presu__form > .campo,
.rama > .campo { margin-bottom: clamp(20px, 2.2vw, 28px); }
.presu__form .campo__i:disabled { opacity: .5; }
.presu__form .campo__error { line-height: 1.4; }
/* `.campo__error` se declara `display:block` en estilos.css §26, y eso le gana
   al `[hidden]{display:none}` del navegador: sin esta línea el hueco del error
   suma sus 8 px de margen aunque esté vacío, en once campos. */
.presu__form .campo__error[hidden] { display: none; }
/* Con el mensaje de error en el flujo, la caja del campo crece por abajo y el
   filete amarillo de foco (`.campo::after`, bottom:0) se quedaría flotando
   bajo el texto rojo. Se reancla al borde inferior del control, que en esta
   página mide siempre los 62 px de `min-height` (ningún textarea es
   obligatorio, así que ninguno llega a este estado). */
.presu__form .campo--error::after { top: 62px; bottom: auto; }
/* Y la etiqueta flotante sigue en rojo aunque el campo tenga el foco: el
   `:focus` de estilos.css la pone amarilla y gana por especificidad, con lo
   que el campo enfocado dejaba de parecer un campo con error. */
.presu__form .campo--error .campo__i:focus + .campo__l { color: var(--error); }

/* Desplegables: la etiqueta flotante no puede depender de :placeholder-shown
   (un <select> no lo tiene), así que va siempre arriba y el campo reserva el
   sitio. El chevron se dibuja con bordes: cero iconos externos.
   ⚠️ Este bloque está DUPLICADO en p-contacto.css con el mismo significado y
   valores que ya han derivado (translateY -70 % aquí, -72 % allí, y allí un
   `:focus-within` en amarillo que aquí no existe). Unificarlo es subirlo a
   estilos.css junto al resto de `.campo*`, no renombrarlo — y eso no cabe en
   esta fase. Se acota mientras tanto para que la deriva no salga de aquí. */
.presu__form .campo--sel .campo__l { transform: translateY(-13px) scale(.8); }
.presu__form .campo--sel .campo__i {
  appearance: none; -webkit-appearance: none;
  padding-right: 46px;
  cursor: pointer;
}
.presu__form .campo--sel::before {
  content: "";
  position: absolute; right: 20px; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--amarillo);
  border-bottom: 2px solid var(--amarillo);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.presu__form .campo__i option { background: var(--sup-2); color: var(--texto); }

/* --- tarjetas de división (paso 01) --- */
.grupo--divs { margin-bottom: 0; }
.divs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}
.dcard { position: relative; display: grid; cursor: pointer; }
/* El radio sigue siendo un radio: enfocable y navegable con flechas. Solo se
   le quita la pintura, no el comportamiento. */
.dcard__i {
  position: absolute; top: 14px; left: 14px;
  width: 1px; height: 1px; opacity: 0; margin: 0;
}
.dcard__c {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: start;
  gap: 6px;
  height: 100%;
  padding: clamp(16px, 1.8vw, 24px);
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  transition: border-color var(--dur-ui) var(--ease), background var(--dur-ui) var(--ease), transform 520ms var(--ease);
}
.dcard:hover .dcard__c { border-color: var(--linea-alta); }
.dcard__i:focus-visible + .dcard__c { outline: 2px solid var(--amarillo); outline-offset: 3px; }
.dcard__i:checked + .dcard__c {
  border-color: var(--amarillo);
  background: var(--sup-2);
}
/* esquina amarilla en diagonal = marca de seleccionado (el corte del wordmark) */
.dcard__c::after {
  content: "";
  position: absolute; top: 0; right: 0;
  width: 0; height: 0;
  border-top: 26px solid var(--amarillo);
  border-left: 26px solid transparent;
  opacity: 0;
  transform: translate3d(6px, -6px, 0);
  transition: opacity var(--dur-ui) var(--ease), transform 420ms var(--ease);
}
.dcard__i:checked + .dcard__c::after { opacity: 1; transform: none; }
.dcard__n {
  font-family: var(--display); font-weight: 600;
  font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker);
  color: var(--amarillo);
}
.dcard__t {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.25rem, 1.9vw, 1.625rem);
  line-height: 1.02;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  padding-right: 26px;                 /* deja sitio a la esquina amarilla */
}
.dcard__p { font-size: var(--fs-sm); line-height: 1.5; color: var(--apagado); max-width: var(--medida-s); }
/* Grupo de división sin elegir: el error tiñe las cuatro tarjetas, que es lo
   que hay que mirar, no una etiqueta suelta. */
.grupo--divs.campo--error .dcard__c { border-color: var(--error); }

/* --- ramas del paso 02 --- */
.rama { display: grid; }
.rama[hidden] { display: none; }
.rama__t {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 14px; margin-bottom: clamp(20px, 2.2vw, 28px);
  border-bottom: 1px solid var(--linea);
  font-family: var(--display); font-weight: 800;
  font-size: var(--fs-h4);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.rama__n {
  font-family: var(--display); font-weight: 600;
  font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker);
  color: var(--amarillo);
}
/* Sin JS se ven las cuatro ramas seguidas: necesitan aire entre ellas. */
html:not(.js) .rama + .rama { margin-top: var(--bloque); }

/* Chip de aviso en línea (rama de Maquinaria: «venta, no alquiler»).
   RENOMBRADO (ago-2026): se llamaba `.aviso` y ese nombre lo tenía cogido
   p-maquinaria.css para algo que es su OPUESTO — una sección a sangre con
   fondo, borde inferior y hasta 96 px de padding vertical, con su rejilla de
   12 columnas. De las cinco colisiones registradas en §29-H esta era la peor:
   el día que las dos hojas coincidan, o este chip se convierte en una banda de
   96 px dentro del formulario, o la sección de maquinaria se queda en 14 px de
   padding y sin fondo. Nombre con la página dentro, según §29. */
.aviso-presupuesto {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  margin-bottom: clamp(18px, 2vw, 26px);
  background: var(--am-04);
  border-left: 2px solid var(--amarillo);
  border-radius: var(--radio);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--texto);
  /* El aviso ocupaba los 667 px de la columna del formulario: 90 caracteres
     por línea. El tope va en el flex, no en el texto, para que el chip
     amarillo siga pegado a su primera línea. */
  max-width: calc(var(--medida-s) + 26px + 12px);
}
.aviso-presupuesto__x {
  flex: none; width: 14px; height: 14px; margin-top: 5px;
  background: var(--amarillo);
  transform: skewX(-30deg);
}

/* --- opciones tipo pastilla (radios) --- */
.opciones { display: flex; flex-wrap: wrap; gap: 10px; }
.op { position: relative; display: inline-grid; }
.op__i { position: absolute; top: 12px; left: 12px; width: 1px; height: 1px; opacity: 0; margin: 0; }
.op__c {
  display: inline-flex; align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  font-size: var(--fs-sm);
  line-height: 1.3;
  color: var(--apagado);
  cursor: pointer;
  transition: border-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease), background var(--dur-ui) var(--ease);
}
.op:hover .op__c { border-color: var(--linea-alta); color: var(--texto); }
.op__i:focus-visible + .op__c { outline: 2px solid var(--amarillo); outline-offset: 3px; }
.op__i:checked + .op__c {
  border-color: var(--amarillo);
  background: var(--am-10);
  color: var(--texto);
}

/* --- consentimiento --- */
.check { position: relative; margin-top: clamp(18px, 2vw, 26px); }
.check__i { position: absolute; top: 14px; left: 2px; width: 1px; height: 1px; opacity: 0; margin: 0; }
.check__l {
  display: flex; gap: 14px; align-items: flex-start;
  min-height: 44px;
  padding: 10px 0;
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--apagado);
  cursor: pointer;
  /* El consentimiento daba 93 caracteres por línea, el peor de la página. El
     tope se pone en la etiqueta ENTERA y cuenta con la caja de 22 px y su
     hueco de 14, para que el texto se quede en la medida del peldaño. */
  max-width: calc(var(--medida-s) + 22px + 14px);
}
.check__caja {
  position: relative;
  flex: none;
  width: 22px; height: 22px;
  margin-top: 2px;
  background: var(--fondo);
  border: 1px solid var(--linea-alta);
  border-radius: 2px;
  transition: background var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease);
}
.check__i:focus-visible + .check__l .check__caja { outline: 2px solid var(--amarillo); outline-offset: 3px; }
.check__i:checked + .check__l .check__caja { background: var(--amarillo); border-color: var(--amarillo); }
.check__i:checked + .check__l .check__caja::after {
  content: "";
  position: absolute; left: 7px; top: 2px;
  width: 6px; height: 12px;
  border-right: 2px solid var(--sobre-amarillo);
  border-bottom: 2px solid var(--sobre-amarillo);
  transform: rotate(45deg);
}
.check--error .check__caja { border-color: var(--error); }
.check--error .check__l { color: var(--error); }

/* --- navegación del formulario --- */
.presu__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: clamp(26px, 3vw, 40px);
  padding-top: clamp(20px, 2.2vw, 30px);
  border-top: 1px solid var(--linea);
}
.presu__atras { margin-right: auto; }
/* `.btn` es `inline-flex` en estilos.css y eso le gana al `[hidden]` del
   navegador: sin esto, «Atrás» y «Enviar» se ven en los pasos en los que el JS
   los oculta. Acotado a la barra de esta página por lo mismo que los campos:
   la guarda le falta al componente compartido, pero se arregla allí, no
   reescribiendo `.btn` para las ocho páginas desde una hoja de página. */
.presu__nav .btn[hidden] { display: none; }
.presu__aviso {
  flex: 1 1 100%;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--error);
}
.presu__aviso[hidden] { display: none; }
.presu__enviar.is-enviando { pointer-events: none; opacity: .82; }

/* --- carril de resumen --- */
.carril {
  position: sticky;
  top: calc(var(--alto-cab) + 20px);
  background: var(--sup-2);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--linea-alta);
  border-radius: var(--radio);
  padding: clamp(20px, 2vw, 28px);
  transition: border-color 620ms var(--ease);
}
.carril.is-revision { border-left-color: var(--amarillo); }
.carril__t {
  font-family: var(--display); font-weight: 600;
  font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--apagado);
  margin-bottom: 6px;
}
.carril__t-x { display: none; color: var(--amarillo); }
.carril.is-revision .carril__t-x { display: inline; }
.carril.is-revision .carril__t { color: var(--texto); }
.carril__l { margin: 0; }
.carril__f {
  display: grid;
  gap: 2px;
  padding: 12px 0;
  border-top: 1px solid var(--linea);
}
.carril__f dt {
  font-family: var(--display); font-weight: 600;
  font-size: .6875rem; letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--apagado);
}
.carril__f dd {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--texto);
  overflow-wrap: anywhere;
}
.carril__f--vacia dd { color: var(--apagado); }
.carril__nota {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--linea);
  font-size: var(--fs-micro);
  line-height: 1.5;
  color: var(--apagado);
  /* 90 caracteres por línea a 834 px, donde el carril pasa a fila entera. */
  max-width: var(--medida-xs);
}
.carril__tel {
  margin-top: 10px;
  font-family: var(--display); font-weight: 800;
  font-size: 1.25rem; letter-spacing: .03em;
}
/* El teléfono del carril es un enlace de una línea: 25 px de caja de toque.
   Se engorda con padding y se baja el subrayado lo mismo. 10 px daban 42 de
   alto en el carril estrecho —dos por debajo del mínimo— y esto es un número
   de teléfono en una página que se rellena con el pulgar: va a 14 en todos los
   anchos, no solo en los táctiles. */
.carril__tel .enlace-sub {
  padding-block: 14px;
  background-position: 0 calc(100% - 14px);
}

/* --- estado enviado --- */
.enviado {
  grid-column: 1 / -1;
  background: var(--sup);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--amarillo);
  border-radius: var(--radio);
  padding: clamp(28px, 3.4vw, 60px);
}
.enviado[hidden] { display: none; }
.enviado:focus-visible { outline: 2px solid var(--amarillo); outline-offset: 4px; }
.enviado__x {
  position: relative;
  display: block;
  width: 46px; height: 46px;
  margin-bottom: 22px;
  background: var(--amarillo);
  clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%);
}
.enviado__x::after {
  content: "";
  position: absolute; left: 17px; top: 12px;
  width: 8px; height: 17px;
  border-right: 2px solid var(--sobre-amarillo);
  border-bottom: 2px solid var(--sobre-amarillo);
  transform: rotate(45deg);
}
.enviado__t {
  font-family: var(--display); font-weight: 800;
  font-size: var(--fs-h2);
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  max-width: 16ch;
  margin-bottom: var(--pieza);
}
.enviado__p { color: var(--apagado); max-width: var(--medida); }
.enviado__l {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--gap);
  margin: clamp(24px, 2.6vw, 36px) 0 0;
}
.enviado__l .carril__f { border-top: 1px solid var(--linea); }
.enviado__botones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(24px, 2.6vw, 36px); }

/* --- sin JS: no hay pasos, hay un formulario largo y honesto --- */
html:not(.js) .prog,
html:not(.js) [data-mover],
html:not(.js) .carril,
html:not(.js) .enviado { display: none; }
html:not(.js) .fpaso + .fpaso { margin-top: var(--bloque); }
html:not(.js) .presu__caja { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 1000px) {
  .presu__caja { grid-template-columns: minmax(0, 1fr); }
  .carril { position: static; }
}
@media (max-width: 760px) {
  .divs { grid-template-columns: 1fr; }
  .rejilla2 { grid-template-columns: 1fr; }
  .enviado__l { grid-template-columns: 1fr; }
  .prog__t { font-size: .8125rem; letter-spacing: .05em; }
  .presu__nav .btn { flex: 1 1 100%; }
  .presu__atras { margin-right: 0; order: 2; }
}
@media (max-width: 420px) {
  .prog__l { gap: 6px; }
  .prog__t { font-size: .75rem; }
}


/* ============================================================
   4 · PLAZOS — línea de tiempo horizontal con contadores
   ------------------------------------------------------------
   RENOMBRADO (ago-2026): `.hito` estaba cogido también por p-empresa.css,
   donde es un ítem de línea de tiempo con punto sobre un eje; aquí es un
   paso con filete `::before` y cuña amarilla `::after`. Los dos son del
   mismo nivel (ítem), así que un choque desmaquetaría sin descolocar la
   estructura — pero es la misma bomba de `sec--cortina` y se desactiva
   igual, con la regla de §29: el nombre lleva su página dentro.

   ⚠️ La hoja de impresión compartida (estilos.css §28) protege `.hito`
   con `break-inside: avoid` por su nombre viejo. Al renombrar, esa
   protección deja de alcanzar a esta página, así que se repone aquí
   abajo. Sin esto un plazo se parte entre dos A4.
   ============================================================ */

.plazos { padding-block: var(--sec-y-pag); }
.plazos .cont { max-width: var(--ancho-pag); }
.plazos__l {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}
.hito-presupuesto { position: relative; padding-top: 34px; }
.hito-presupuesto::before {
  content: "";
  position: absolute; left: 0; right: calc(var(--gap) * -1); top: 0;
  height: 1px; background: var(--linea);
}
.hito-presupuesto:last-child::before { right: 0; }
.hito-presupuesto::after {
  content: "";
  position: absolute; left: 0; top: -4px;
  width: 10px; height: 9px;
  background: var(--amarillo);
  transform: skewX(-30deg);
  transition: transform 520ms var(--ease);
}
.hito-presupuesto:hover::after { transform: skewX(-30deg) translateX(6px); }
.hito-presupuesto__d {
  display: block;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.125rem, 3.6vw, 3.25rem);
  line-height: .95;
  letter-spacing: var(--ls-display);
  color: var(--amarillo);
  font-variant-numeric: tabular-nums;
  margin-bottom: 14px;
}
.hito-presupuesto__t {
  font-family: var(--display); font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.1;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.hito-presupuesto__p { font-size: var(--fs-sm); line-height: 1.6; color: var(--apagado); max-width: 32ch; }

/* La protección de impresión que §28 le daba a `.hito`, repuesta con el
   nombre nuevo. */
@media print {
  .hito-presupuesto { break-inside: avoid; }
}

@media (max-width: 900px) {
  .plazos__l { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px var(--gap); }
  .hito-presupuesto:nth-child(2)::before { right: 0; }
}
@media (max-width: 520px) {
  .plazos__l { grid-template-columns: 1fr; gap: 30px; }
  .hito-presupuesto::before { right: 0; }
}


/* ============================================================
   5 · ASESORAMIENTO — banda a sangre con parallax de DOS capas
   ------------------------------------------------------------
   El fondo va lento (data-parallax="0.16") y el contenido rápido y
   en sentido contrario (data-parallax="-0.07"). A diferencia de la
   banda equivalente de la Home, aquí la composición es CENTRADA:
   intro estrecha arriba y los cuatro puntos en una fila debajo.
   ============================================================ */

.aseso {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: 72dvh;
  display: grid;
  align-items: center;
  padding-block: var(--sec-y-pag);
  border-block: 1px solid var(--linea);
}
.aseso__fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.aseso__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 66% at 50% 46%, rgba(14,14,16,.46) 0%, rgba(14,14,16,.88) 100%),
    linear-gradient(180deg, rgba(14,14,16,.82) 0%, rgba(14,14,16,.60) 34%, rgba(14,14,16,.90) 100%);
}
.aseso__cont {
  max-width: var(--ancho-pag);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(36px, 4.4vw, 68px);
}
.aseso__intro { max-width: 62ch; }
.aseso__h2 { margin-inline: auto; max-width: 22ch; color: #fff; text-shadow: 0 2px 40px rgba(0,0,0,.7); }
.aseso__p {
  color: rgba(242,242,240,.92);
  max-width: var(--medida);
  margin-inline: auto;
  margin-top: var(--pieza);
  text-shadow: 0 2px 26px rgba(0,0,0,.9);
}
.aseso__puntos {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  text-align: left;
}

@media (max-width: 900px) {
  .aseso { min-height: 0; }
  .aseso__puntos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--gap); }
  .aseso__scrim {
    background: linear-gradient(180deg, rgba(14,14,16,.88) 0%, rgba(14,14,16,.93) 52%, rgba(14,14,16,.96) 100%);
  }
}
@media (max-width: 520px) {
  .aseso__puntos { grid-template-columns: 1fr; }
}


/* ============================================================
   6 · PRUEBA SOCIAL — 3 piezas: dos citas y el mostrador
   ============================================================ */

.prueba { padding-block: var(--sec-y-pag); }
.prueba .cont { max-width: var(--ancho-pag); }
.prueba__l {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  align-items: stretch;
}
.prueba__foto { min-height: 240px; }
.prueba__foto img { transition: transform var(--dur-hover) var(--ease); }
.prueba__foto:hover img { transform: scale(1.05); }

.prueba__marcas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(20px, 2.6vw, 40px);
  margin-top: clamp(30px, 3.2vw, 48px);
  padding-top: clamp(22px, 2.4vw, 32px);
  border-top: 1px solid var(--linea);
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-kicker);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--apagado);
}
.prueba__marcas li { transition: color var(--dur-ui) var(--ease); }
.prueba__marcas li:hover { color: var(--texto); }

@media (max-width: 900px) {
  .prueba__l { grid-template-columns: 1fr; }
  .prueba__foto { aspect-ratio: 16 / 9; min-height: 0; }
}


/* ============================================================
   7 · FAQ — columna única y centrada (la Home la parte 4+7)
   ============================================================ */

.faqp { padding-block: var(--sec-y-pag); }
.faqp .cont { max-width: var(--ancho-pag); }
.faqp .faq__cont { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.faqp .faq__cabecera {
  position: static;
  grid-column: auto;
  display: grid;
  justify-items: center;
  text-align: center;
  margin-bottom: var(--bloque);
}
.faqp .faq__cabecera .h2 { max-width: 24ch; }
.faqp .faq__lista { grid-column: auto; width: 100%; max-width: 820px; }


/* ============================================================
   8 · TODO DESDE UN MISMO PROVEEDOR — enlazado a las 4 divisiones
   ------------------------------------------------------------
   RENOMBRADO (ago-2026): era `.cruce*` y ese nombre estaba cogido por
   cuatro hojas con cuatro implementaciones distintas — y en una de
   ellas (rotulación) designa otro nivel del DOM: allí `.cruce` es el
   <ul> y la sección es `.rot-cruce`. Mezclar dos de esas hojas no da
   error en consola: gana la última que cargue y la otra desaparece.
   Se aplica la regla que escribe §29 de estilos.css tal cual —«si el
   componente es SUYO, el nombre lleva su página dentro»— y el ejemplo
   que la propia §29 pone es literalmente `.cruce-ferreteria`.
   Lo ideal sería subir un `cruce` canónico a la hoja compartida (se
   repite en 4 de 8 páginas), pero estilos.css no se toca en esta fase:
   esto saca a presupuesto de la colisión sin tocar a nadie más.
   ============================================================ */

.cruce-presupuesto { padding-block: var(--sec-y-pag); }
.cruce-presupuesto .cont { max-width: var(--ancho-pag); }
.cruce-presupuesto__l {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}
.cruce-presupuesto__c {
  display: grid;
  align-content: start;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
  transition: border-color 620ms var(--ease);
}
.cruce-presupuesto__c:hover { border-color: var(--amarillo); }
.cruce-presupuesto__n {
  font-family: var(--display); font-weight: 600;
  font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker);
  color: var(--amarillo);
}
.cruce-presupuesto__t {
  font-family: var(--display); font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1.04;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  transition: color var(--dur-ui) var(--ease);
}
.cruce-presupuesto__c:hover .cruce-presupuesto__t { color: var(--amarillo); }
.cruce-presupuesto__p { font-size: var(--fs-sm); line-height: 1.55; color: var(--apagado); }
.cruce-presupuesto__f {
  width: 30px; height: 1px;
  margin-top: 8px;
  background: var(--amarillo);
  transition: width var(--dur-ui) var(--ease);
}
.cruce-presupuesto__c:hover .cruce-presupuesto__f { width: 58px; }
/* Sin tope ocupaba los 1.100 px del contenedor: 77 caracteres por línea. */
.cruce-presupuesto__pie { margin-top: clamp(28px, 3vw, 44px); font-size: var(--fs-sm); color: var(--apagado); max-width: var(--medida-s); }

@media (max-width: 900px) {
  .cruce-presupuesto__l { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px var(--gap); }
}
@media (max-width: 480px) {
  .cruce-presupuesto__l { grid-template-columns: 1fr; }
}


/* ============================================================
   8 bis · ENLACES DE TEXTO EN TÁCTIL — zona de toque de 44 px
   ------------------------------------------------------------
   Los enlaces dentro de un párrafo miden lo que mide la línea (18 px)
   y con el dedo eso es una diana imposible. Se les da altura con
   `padding-block`, que agranda la caja de toque sin mover el texto, y
   se baja el subrayado el mismo tanto para que siga pegado a la
   palabra en vez de flotar 14 px por debajo.

   ⚠️ DOS CORRECCIONES sobre la versión anterior:

   1 · El corte estaba en `max-width: 900px`, así que NO entraba entre
       901 y 1024 px — que es justo el móvil APAISADO (915, 926, 932) y
       el iPad horizontal. Ahí los seis enlaces volvían a medir 18 px de
       alto: el ancho más táctil de todos era el único sin caja de
       toque. Se cubre por las dos vías: el ancho hasta 1024 y, sobre
       todo, `pointer: coarse`, que es el criterio de verdad — lo que
       manda no es lo ancha que sea la ventana sino que se toque con el
       dedo. Un portátil táctil de 1440 también entra.
   2 · 13 px de `padding` sobre una caja de 16 px dan 42, no 44. Con 14
       la caja llega a 44 clavados. (El del carril se arregla arriba,
       en §3, y ahí va a 14 en todos los anchos.)
   ============================================================ */

@media (max-width: 1024px), (pointer: coarse) {
  .fpaso__nota,
  .cruce-presupuesto__pie { line-height: 2.5; }
  /* `.check__t` va en la lista aunque hoy su enlace a /privacidad sea un
     `.enlace-pendiente` sin href (no navega, no se toca): al volcar a Odoo
     vuelve a ser un enlace de verdad y ese día ya tiene su caja de toque. */
  .fpaso__nota .enlace-sub,
  .cruce-presupuesto__pie .enlace-sub,
  .check__t .enlace-sub {
    padding-block: 14px;
    background-position: 0 calc(100% - 14px);
  }
}


/* ============================================================
   8 quater · UN TELÉFONO NO SE PARTE
   ------------------------------------------------------------
   Medido con `getClientRects().length` sobre cada `<a href="tel:">`:
   en la nota del paso 01 el número se partía en dos líneas a 360, 375,
   390 y 393 px de ancho — se leía «971 270» al final de una línea y
   «687» al principio de la siguiente. Y no es solo que se lea mal: la
   zona de toque se parte en dos trozos, uno de 51 px y otro de 24, o
   sea uno de los dos por debajo del mínimo táctil. A 320 no pasaba
   porque el texto rompe en otro sitio, y de 430 en adelante tampoco:
   es un accidente de anchura, así que la guarda va sin media query.

   Va acotado a las piezas de ESTA página. La regla honesta es de
   sitio (`a[href^="tel:"] { white-space: nowrap }` junto a `.enlace-sub`
   en estilos.css §26, y el mismo defecto está medido en el pie de
   rotulación), pero la hoja compartida no se toca en esta fase y
   parchear `.cab__tel` o `.pie__tel` desde aquí sería reescribir para
   las ocho páginas un componente que no es mío.
   ============================================================ */

.fpaso__nota a[href^="tel:"],
.senal__tel,
.carril__tel .enlace-sub { white-space: nowrap; }


/* ============================================================
   8 ter · ENLACES DE TEXTO: SUBRAYADO EN REPOSO
   ------------------------------------------------------------
   Esto se arreglaba aquí porque `estilos.css` era hoja compartida y
   había otras páginas en vuelo. Ya no: el subrayado en reposo vive en
   `estilos.css` §26 y lo tienen las ocho páginas, con las DOS capas
   (1 px en `currentColor` siempre + el filete amarillo de 2 px que se
   dibuja). El parche de aquí sobraba y encima aplanaba la
   microinteracción, porque sustituía el degradado por uno solo.

   Queda el ajuste de área táctil, que sí es de esta página (§8 bis).
   ============================================================ */


/* ============================================================
   9 · TELÓN DIAGONAL — la transición de sección de ESTA página
   ------------------------------------------------------------
   Un panel del color de la superficie elevada cubre la sección y se
   RETIRA HACIA ARRIBA al entrar, con el borde inferior inclinado y
   un filo amarillo que barre el bloque de abajo arriba.

   No se parece a las otras tres del repertorio (§25 de estilos.css):
   el filete de la Home DIBUJA una línea, .sec--diagonal MONTA una
   sección sobre otra y .sec--cambio cambia el fondo. Este descubre.

   ⚠️ El estado por defecto es RETIRADO, y cubrir solo pasa cuando el
   JS **arma** la sección (`.is-armado`), lo que hace únicamente
   mientras está fuera de pantalla. Si p-presupuesto.js no carga,
   nadie arma nada y no hay panel que tape: el fallo es siempre hacia
   ver el contenido.

   Por qué no se cuelga del sellado de 2.500 ms como el filete de la
   Home: ese sellado es una red de seguridad de CARGA, y una sección
   que está a 4.000 px de scroll ya está sellada antes de que nadie
   llegue a ella, así que la transición no se vería nunca. Armando
   desde el JS se consigue lo mismo (nada tapado por un fallo) y la
   pieza funciona en toda la página. Ver js/p-presupuesto.js §1.
   ============================================================ */

.sec--telon { position: relative; isolation: isolate; overflow: clip; }
.sec--telon::after {
  content: "";
  position: absolute;
  left: -10%; right: -10%; top: 0;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(180deg, var(--sup-2) 0%, var(--sup) 62%, var(--fondo) 100%);
  border-bottom: 2px solid var(--amarillo);
  /* retirado del todo: el sesgo baja el borde derecho ~60 px, así que el
     desplazamiento se pasa de largo con 10vw para que no asome */
  transform: translate3d(0, calc(-100% - 10vw), 0) skewY(-2.1deg);
  transition: transform 1150ms var(--ease-suave);
}
/* Armar es INSTANTÁNEO: el panel se coloca cuando la sección todavía está
   fuera de pantalla, y animar ese viaje se vería como una cortina cayendo si
   alguien va rodando deprisa. La animación es solo la de retirarse. */
.sec--telon.is-armado::after {
  transform: translate3d(0, 0, 0) skewY(-2.1deg);
  transition: none;
}
.sec--telon.is-armado.is-abierto::after {
  transform: translate3d(0, calc(-100% - 10vw), 0) skewY(-2.1deg);
  transition: transform 1150ms var(--ease-suave);
}


/* ============================================================
   10 · PREFERS-REDUCED-MOTION
   Todo lo de esta página queda visible y quieto.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  /* El telón no se descuelga: la sección está y ya. El JS tampoco arma nada
     en este modo; esto es el cinturón. */
  .sec--telon.is-armado::after,
  .sec--telon.is-armado.is-abierto::after {
    transform: translate3d(0, calc(-100% - 10vw), 0) skewY(-2.1deg);
  }

  /* El paso del formulario aparece, no se desliza. */
  html.js .fpaso.is-entrando,
  html.js .fpaso.is-entrando--atras { animation: none; }

  /* La barra de progreso salta a su valor. */
  .prog__barra { transition: none; }

  .aseso .media--banda { position: absolute; top: 0; height: 100%; transform: none !important; }
  .prueba__foto:hover img { transform: none !important; }
}