/* ============================================================
   STAAD Collective — STAAD Professional Program
   Solo carga en /staad-collective/ (ver functions.php).

   La referencia es la solicitud de RH Trade: una foto a sangre con
   el titulo encima y, despues, nada mas que crema, tinta y lineas
   finas. Sin iconos, sin cajas, sin sombras. La jerarquia la ponen
   el tamano, las mayusculas espaciadas y el aire.

   Cada seccion es una fila: el titulo a la izquierda (antetitulo en
   espanol, titulo en ingles, como en el PDF del programa) y el
   contenido a la derecha, separadas por una linea de 1px.

   UN SOLO SISTEMA. Cada color y cada letra tiene un trabajo, y nada
   aparece sin el suyo (abajo, en las variables). Si hace falta algo
   nuevo, se usa una de estas piezas; no se inventa un tono ni un
   tamano para una sola linea.
   ============================================================ */

/* La portada entra por debajo de la cabecera transparente (la pagina
   lleva body.staad-top-oscuro): el #main no deja hueco arriba.
   header.css trae `body:not(.home) #main` = (1,1,1) y ux.css lo repite
   en movil; con la clase se gana a los dos. */
body:not(.home) #main.pro {
  padding-top: 0;
  padding-bottom: 0;
  width: 100%;
  max-width: none;
  background: var(--pro-fondo);
  color: var(--pro-tinta);
}

.pro {
  /* COLOR — cuatro, y cada uno por una razon:
     fondo  el crema de la marca: es el papel. Toda la pagina, sin bandas
            de otro tono (un crema mas oscuro detras del formulario no
            decia nada que la linea de arriba no diga ya).
     tinta  lo que se lee primero y lo que se pulsa: titulos, texto
            principal, botones y la opcion elegida.
     suave  lo que acompana: antetitulos, etiquetas, texto de apoyo.
     linea  separa sin pesar. La linea en TINTA solo marca donde empieza
            un bloque (columnas, grupos del formulario, cabecera de la
            tabla) o que algo esta activo.
     Sobre foto, los mismos dos papeles: blanco (tinta) y blanco al 80%
     (suave), con un unico velo de tinta para las dos fotos. El unico
     color fuera de la paleta es el rojo del error del formulario: avisa
     de algo, por eso es distinto. */
  --pro-fondo: var(--c-bg);
  --pro-tinta: var(--c-ink);
  --pro-suave: var(--c-ink-soft);
  --pro-linea: var(--c-line);
  --pro-blanco: var(--c-white);
  --pro-blanco-suave: rgba(255, 255, 255, .8);
  --pro-velo: linear-gradient(180deg, rgba(23, 23, 23, .42) 0%, rgba(23, 23, 23, .22) 40%, rgba(23, 23, 23, .4) 100%);
  --pro-sombra-texto: 0 1px 24px rgba(23, 23, 23, .2);
  --pro-error: #a3402f;             /* el rojo del aviso, el mismo de ux.css */

  /* LETRA — dos familias y un tamano para cada papel:
     Titular (la de la marca, 400, mayusculas, .04em):
       t1     solo el nombre de la pagina (el unico h1).
       t2     todo lo demas que es titulo: cada seccion, los pilares, el
              formulario y la frase del cierre.
     Inter:
       entrada   la frase que abre cada seccion.
       texto     el cuerpo.
       pequeno   listas, columnas, tabla y notas.
       etiqueta  versalitas: antetitulos, rotulos, botones y opciones. */
  --pro-t1: clamp(2.2rem, 1.2rem + 4.4vw, 5rem);
  --pro-t2: clamp(1.3rem, 1rem + 1.2vw, 2rem);
  --pro-entrada: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem);
  --pro-texto: var(--fs-section-text);
  --pro-pequeno: var(--fs-small);
  --pro-etiqueta: var(--fs-micro);
  --pro-tracking: .04em;            /* titulares */
  /* Pesos: el del cuerpo de toda la web (350), uno para lo que tiene que
     destacar (500) y el unico del titular (400). */
  --pro-peso: 350;
  --pro-peso-fuerte: 500;
  --pro-peso-titular: 400;
  --pro-tracking-etiqueta: var(--ls-wider);
  --pro-tracking-sub: var(--ls-wide);

  --pro-ancho: min(92vw, 1240px);
  --pro-aire: clamp(64px, 9vw, 136px);
}

/* ICONOS — pocos y solo donde explican algo (pilares, formas de usar el
   beneficio, razones). Todos iguales: 28px, un trazo fino y el gris suave,
   porque acompanan al texto; nunca van en tinta ni rellenos. */
.pro-icono {
  display: block;
  flex: none;
  width: 28px;
  height: 28px;
  margin-bottom: 16px;
  color: var(--pro-suave);
  stroke-width: 1.1;
}
.pro-pilar .pro-icono { margin-bottom: 4px; }

/* Los estilos de letra, una sola vez. Todo lo demas los reutiliza. */
.pro-titulo,
.pro-portada__titulo,
.pro-cierre__titulo,
.pro-pilar__grande {
  margin: 0;
  font-family: var(--font-title);
  font-weight: var(--pro-peso-titular);
  line-height: 1.12;
  letter-spacing: var(--pro-tracking);
  text-transform: uppercase;
  color: var(--pro-tinta);
}
.pro-titulo,
.pro-pilar__grande,
.pro-cierre__titulo { font-size: var(--pro-t2); }
.pro-portada__titulo { font-size: var(--pro-t1); }
.pro-portada__titulo,
.pro-cierre__titulo { color: var(--pro-blanco); text-shadow: var(--pro-sombra-texto); }

.pro-antetitulo,
.pro .pro-portada__lema,
.pro .pro-intro__nota,
.pro-pilar__sub,
.pro-num,
.pro-flujo > li,
.pro-tabla caption,
.pro-tabla thead th,
.pro-form .contacto__lbl,
.pro-form__opcion span,
.pro-firma__guia,
.pro-firma__borrar,
.pro-boton,
.pro .contacto__submit.pro-boton {
  font-family: var(--font-body);
  font-size: var(--pro-etiqueta);
  font-weight: var(--pro-peso);
  line-height: 1.6;
  letter-spacing: var(--pro-tracking-etiqueta);
  text-transform: uppercase;
  color: var(--pro-suave);
}

/* ---------- Piezas comunes ---------- */
.pro-antetitulo { margin: 0 0 14px; }
/* Subtitulo: los titulos pequenos dentro de una seccion (las columnas y los
   grupos del formulario). */
.pro-sub,
.pro-form__leyenda {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: var(--pro-pequeno);
  font-weight: var(--pro-peso-fuerte);
  letter-spacing: var(--pro-tracking-sub);
  text-transform: uppercase;
  color: var(--pro-tinta);
}
.pro-num {
  display: block;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
/* El parrafo de base va con especificidad minima (:where): asi cualquier
   estilo de arriba —una etiqueta, la entrada— le gana sin pelear. Antes
   `.pro p` se imponia a los antetitulos y les ponia el tamano del cuerpo. */
:where(.pro) p {
  max-width: none;
  margin: 0;
  font-size: var(--pro-texto);
  line-height: 1.8;
  color: var(--pro-suave);
}
:where(.pro) p + p { margin-top: 1em; }
.pro .pro-destacado,
.pro .pro-intro__grande {
  font-size: var(--pro-entrada);
  line-height: 1.65;
  color: var(--pro-tinta);
}
.pro .pro-nota,
.pro .pro-letra-pequena {
  font-size: var(--pro-pequeno);
  line-height: 1.75;
}
.pro .pro-letra-pequena strong { font-weight: var(--pro-peso-fuerte); color: var(--pro-tinta); }
.pro ul,
.pro ol { list-style: none; margin: 0; padding: 0; }

/* El boton: rectangulo en tinta. Es lo unico, junto a la opcion elegida,
   que va en negro macizo: lo que se pulsa. */
.pro-boton,
.pro .contacto__submit.pro-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 44px;
  border: 1px solid var(--pro-tinta);
  background: var(--pro-tinta);
  color: var(--pro-blanco);
  font-weight: var(--pro-peso-fuerte);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.pro-boton:hover,
.pro .contacto__submit.pro-boton:hover { background: transparent; color: var(--pro-tinta); opacity: 1; }
/* Sobre foto, el mismo boton en negativo. */
.pro-boton--claro {
  border-color: var(--pro-blanco);
  background: transparent;
  color: var(--pro-blanco);
}
.pro-boton--claro:hover { background: var(--pro-blanco); color: var(--pro-tinta); }
.pro-boton:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* ---------- Las dos fotos: portada y cierre, la misma pieza ---------- */
.pro-portada,
.pro-cierre {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--pro-tinta);
  text-align: center;
}
.pro-portada { min-height: clamp(560px, 92svh, 1000px); }
.pro-cierre { min-height: clamp(460px, 72svh, 820px); }
.pro-portada__img,
.pro-cierre__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Un solo velo: lo justo para que la cabecera y los textos blancos se lean. */
.pro-portada::after,
.pro-cierre::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pro-velo);
  pointer-events: none;
}
.pro-portada__texto,
.pro-cierre__texto {
  position: relative;
  z-index: 1;
}
.pro-portada__texto {
  width: var(--pro-ancho);
  padding-top: var(--header-h-sm);
}
.pro-cierre__texto {
  width: min(92vw, 720px);
  padding: var(--pro-aire) 0;
}
.pro-portada .pro-antetitulo,
.pro .pro-portada__lema,
.pro-cierre .pro-antetitulo,
.pro .pro-cierre p:not(.pro-antetitulo) { color: var(--pro-blanco-suave); }
.pro .pro-portada__lema { margin: 22px 0 40px; }
.pro-cierre__titulo { margin-bottom: 24px; }
.pro-cierre__titulo span { display: inline-block; }
.pro .pro-cierre p:not(.pro-antetitulo) { max-width: 56ch; margin-inline: auto; }

/* Portada CLARA (el jardin zen): el texto NO va encima de la foto. Primero
   el titulo sobre el crema —donde la cabecera en tinta se lee sin velo— y
   debajo la foto entera, a lo ancho y sin nada encima: es una composicion
   (el sillon, la arena rastrillada, las piedras) y taparla con letras la
   rompia. Asi abre tambien la solicitud de RH Trade. */
.pro-portada--clara {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--pro-fondo);
}
.pro-portada--clara::after { display: none; }
.pro-portada--clara .pro-portada__texto {
  order: 0;
  width: var(--pro-ancho);
  margin: 0 auto;
  padding: calc(var(--header-h-sm) + clamp(32px, 7vh, 88px)) 0 clamp(40px, 6vh, 72px);
}
.pro-portada--clara .pro-portada__img {
  order: 1;
  position: static;
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 644;
  object-fit: cover;
}
.pro-portada--clara .pro-portada__titulo { color: var(--pro-tinta); text-shadow: none; }
.pro-portada--clara .pro-antetitulo,
.pro .pro-portada--clara .pro-portada__lema { color: var(--pro-suave); }
@media (max-width: 700px) {
  /* En vertical la foto se recorta mas alta y deja ver el sillon y la
     primera piedra. */
  .pro-portada--clara .pro-portada__img { aspect-ratio: 4 / 5; object-position: 40% 50%; }
}

/* Sin foto (si algun dia se borra de la mediateca): tinta sobre el crema. */
.pro-portada--sin-foto,
.pro-cierre--sin-foto { background: var(--pro-fondo); }
.pro-portada--sin-foto::after,
.pro-cierre--sin-foto::after { display: none; }
.pro-portada--sin-foto .pro-portada__titulo,
.pro-cierre--sin-foto .pro-cierre__titulo { color: var(--pro-tinta); text-shadow: none; }
.pro-portada--sin-foto .pro-antetitulo,
.pro .pro-portada--sin-foto .pro-portada__lema,
.pro-cierre--sin-foto .pro-antetitulo,
.pro .pro-cierre--sin-foto p:not(.pro-antetitulo) { color: var(--pro-suave); }
.pro-portada--sin-foto .pro-boton--claro { border-color: var(--pro-tinta); color: var(--pro-tinta); }

/* ---------- Apertura: una columna estrecha, centrada ---------- */
.pro-intro {
  width: min(92vw, 760px);
  margin: 0 auto;
  padding: var(--pro-aire) 0 calc(var(--pro-aire) * .7);
  text-align: center;
}
.pro-intro p + p { margin-top: 1.6em; }

/* ---------- Los tres pilares ---------- */
.pro .pro-pilares {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: var(--pro-ancho);
  margin: 0 auto;
  border-top: 1px solid var(--pro-linea);
  border-bottom: 1px solid var(--pro-linea);
}
.pro-pilar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: clamp(36px, 5vw, 64px) 16px;
  text-align: center;
}
.pro-pilar + .pro-pilar { border-left: 1px solid var(--pro-linea); }
.pro-pilar__grande { line-height: 1; }

/* ---------- Filas del programa ---------- */
.pro-fila {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(28px, 5vw, 96px);
  width: var(--pro-ancho);
  margin: 0 auto;
  padding: var(--pro-aire) 0;
  scroll-margin-top: 110px;
}
.pro-fila + .pro-fila { border-top: 1px solid var(--pro-linea); }
.pro-fila__cabeza { align-self: start; position: sticky; top: calc(var(--header-h-sm) + 24px); }
.pro-fila__cuerpo { max-width: 760px; }

/* Columnas con una linea en tinta encima: modos del beneficio, alcance,
   razones y pasos. La linea marca donde empieza cada bloque. */
.pro .pro-columnas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3.4vw, 48px) clamp(20px, 3vw, 40px);
  margin-top: clamp(36px, 5vw, 64px);
}
.pro .pro-columnas--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.pro .pro-columnas--pasos { margin-top: 0; }
.pro .pro-columnas--sin-margen,
.pro .pro-lista--corta { margin-top: 0; }
.pro-columnas > li {
  padding-top: 20px;
  border-top: 1px solid var(--pro-tinta);
}
.pro .pro-columnas p:not(.pro-antetitulo) { font-size: var(--pro-pequeno); line-height: 1.75; }

/* Listas con linea entre renglones: el showroom y la comunidad. */
.pro .pro-lista {
  margin-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--pro-linea);
}
.pro .pro-lista--dos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(20px, 3vw, 40px);
}
.pro-lista > li {
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--pro-linea);
  font-size: var(--pro-pequeno);
  line-height: 1.6;
  color: var(--pro-tinta);
}
.pro-lista .pro-num { flex: none; margin: 0; }

/* Del principio al fin del proyecto: una sola linea de palabras. */
.pro .pro-flujo {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 0;
  margin: clamp(24px, 3vw, 36px) 0;
}
.pro-flujo > li { color: var(--pro-tinta); }
.pro-flujo > li + li::before {
  content: "";
  display: inline-block;
  width: clamp(12px, 1.6vw, 24px);
  height: 1px;
  margin: 0 12px;
  vertical-align: middle;
  background: var(--pro-suave);
}
.pro-flujo--puntos > li + li::before { width: 3px; height: 3px; border-radius: 50%; }
.pro .pro-flujo--puntos { margin-bottom: 0; }

/* La tabla del ejemplo: solo lineas horizontales. */
.pro-tabla {
  width: 100%;
  margin-top: clamp(40px, 5vw, 64px);
  border-collapse: collapse;
  font-size: var(--pro-pequeno);
  font-variant-numeric: tabular-nums;
}
.pro-tabla caption {
  margin-bottom: 16px;
  text-align: left;
}
.pro-tabla th,
.pro-tabla td {
  padding: 14px 12px 14px 0;
  border-bottom: 1px solid var(--pro-linea);
  text-align: right;
  font-weight: var(--pro-peso);
  color: var(--pro-tinta);
}
.pro-tabla th:first-child { text-align: left; }
.pro-tabla thead th {
  border-bottom-color: var(--pro-tinta);
  color: var(--pro-suave);
}
.pro .pro-nota { margin: 14px 0 clamp(28px, 4vw, 48px); }

/* Lo que no se cuenta a quien solo visita: una nota con su linea encima
   y el enlace al formulario, en tinta porque se pulsa. */
.pro .pro-reservado {
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: 20px;
  border-top: 1px solid var(--pro-linea);
  font-size: var(--pro-pequeno);
  line-height: 1.75;
}
.pro-reservado a {
  color: var(--pro-tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* Donde aplica el 20% y donde no: dos columnas bajo la tabla. */
.pro .pro-alcance { margin: clamp(8px, 1vw, 12px) 0 clamp(36px, 5vw, 56px); }
.pro .pro-alcance .pro-antetitulo { margin-bottom: 10px; }

/* ---------- La solicitud: centrada, una columna de lectura ----------
   Sobre el mismo crema que el resto: la separa la linea, no un fondo. */
.pro-alta {
  padding: var(--pro-aire) 0;
  border-top: 1px solid var(--pro-linea);
  scroll-margin-top: 80px;
}
.pro-alta__cabeza,
.pro-alta__estado,
.pro-form {
  width: min(92vw, 720px);
  margin-inline: auto;
}
.pro-alta__cabeza { text-align: center; }
.pro-alta__cabeza p:last-child { max-width: 52ch; margin: 18px auto 0; }
.pro-alta__estado {
  margin-top: clamp(36px, 5vw, 56px);
  padding-top: 28px;
  border-top: 1px solid var(--pro-tinta);
  text-align: center;
}
.pro-alta__estado .pro-boton { margin-top: 12px; }

.pro .pro-form { margin-top: clamp(40px, 5vw, 64px); gap: 0; }
.pro-form .contacto__field { position: relative; }
.pro-form__grupo {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.6vw, 30px);
  min-width: 0;
  margin: 0 0 clamp(40px, 5vw, 56px);
  padding: 0;
  border: 0;
}
.pro-form__leyenda {
  width: 100%;
  margin: 0 0 6px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--pro-tinta);
}
/* El legend no respeta el gap del flex en todos los navegadores: el aire
   va en el siguiente. */
.pro-form__leyenda + * { margin-top: 10px; }
/* Los campos: la linea fina en reposo y la de tinta cuando se escribe
   (eso ya lo hace el formulario del tema). */
.pro-form input:not([type="checkbox"]):not([type="radio"]),
.pro-form textarea { border-bottom-color: var(--pro-linea); color: var(--pro-tinta); }
.pro-form input:focus,
.pro-form textarea:focus { border-bottom-color: var(--pro-tinta); }
.pro-form input::placeholder,
.pro-form textarea::placeholder { color: var(--pro-suave); opacity: 1; }

/* Perfil y tipo de proyectos: opciones en fila. Linea fina en reposo,
   tinta al pasar, negro macizo la elegida. */
.pro-form__opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pro-form__opcion {
  position: relative;
  cursor: pointer;
}
.pro-form__opcion input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.pro-form__opcion span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 22px;
  border: 1px solid var(--pro-linea);
  color: var(--pro-tinta);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.pro-form__opcion:hover span { border-color: var(--pro-tinta); }
.pro-form__opcion input:checked + span { background: var(--pro-tinta); border-color: var(--pro-tinta); color: var(--pro-blanco); }
.pro-form__opcion input:focus-visible + span { outline: 1px solid var(--pro-tinta); outline-offset: 3px; }

.pro-form .staad-consent { margin: 0 0 28px; font-size: var(--pro-pequeno); line-height: 1.7; color: var(--pro-suave); }
.pro-form .staad-consent input { accent-color: var(--pro-tinta); }
.pro-form .contacto__actions { flex-direction: column; align-items: stretch; gap: 16px; margin: 0; }
.pro-form .contacto__submit.pro-boton { width: 100%; min-height: 54px; }
.pro-form .contacto__feedback { text-align: center; font-size: var(--pro-pequeno); }
.pro-form .contacto__feedback.is-ok { color: var(--pro-tinta); }
/* El error es el unico color fuera de la paleta: tiene que avisar. Marca
   el campo que falta (su linea) y el grupo de opciones sin elegir. */
.pro-form .is-falta input:not([type="checkbox"]):not([type="radio"]),
.pro-form .is-falta textarea { border-bottom-color: var(--pro-error); }
.pro-form .is-falta .contacto__lbl,
.pro-form .pro-form__grupo.is-falta .pro-form__leyenda,
.pro-form .staad-consent.is-falta { color: var(--pro-error); }
.pro-form .pro-form__grupo.is-falta .pro-form__leyenda { border-bottom-color: var(--pro-error); }

/* Solo para lectores de pantalla (el tema no carga el CSS de WordPress). */
.pro .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- La firma ----------
   El mismo lenguaje que los campos: sin fondo propio, linea fina en
   reposo y tinta en cuanto hay firma. Al lado, la fecha del dia. */
.pro-firma {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(18px, 2.4vw, 26px);
  align-items: end;
}
.pro-firma__pad {
  position: relative;
  border: 1px solid var(--pro-linea);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.pro-firma__pad:hover,
.pro-firma__pad.is-firmado { border-color: var(--pro-tinta); }
.pro-firma__lienzo {
  display: block;
  width: 100%;
  height: clamp(140px, 18vw, 180px);
  touch-action: none;
  cursor: crosshair;
}
.pro-firma__guia {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  padding-top: 8px;
  border-top: 1px solid var(--pro-linea);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.pro-firma__pad.is-firmado .pro-firma__guia { opacity: 0; }
.pro-firma__borrar {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pro-firma__borrar:hover { color: var(--pro-tinta); }
.pro .pro-firma__hoy {
  padding: 10px 0;
  border-bottom: 1px solid var(--pro-linea);
  font-size: var(--pro-pequeno);
  color: var(--pro-tinta);
}
.pro .pro-firma__nota { margin: 0; }

/* ---------- Tableta ---------- */
@media (max-width: 1020px) {
  .pro-fila { grid-template-columns: 1fr; gap: 28px; }
  .pro-fila__cabeza { position: static; }
  .pro-fila__cuerpo { max-width: none; }
  .pro .pro-columnas--pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Movil ---------- */
@media (max-width: 700px) {
  .pro .pro-pilares { grid-template-columns: 1fr; }
  .pro-pilar { padding: 28px 0; }
  .pro-pilar + .pro-pilar { border-left: 0; border-top: 1px solid var(--pro-linea); }
  .pro .pro-columnas,
  .pro .pro-columnas--dos,
  .pro .pro-columnas--pasos,
  .pro .pro-lista--dos { grid-template-columns: 1fr; }
  .pro .pro-intro { text-align: left; }
  .pro .pro-portada__lema { margin-bottom: 32px; }
  .pro-form__opciones { gap: 8px; }
  .pro-form__opcion { flex: 1 1 auto; }
  .pro-form__opcion span { width: 100%; justify-content: center; padding: 0 12px; }
  .pro-firma { grid-template-columns: 1fr; }

  /* La tabla se vuelve fichas: cada escenario con sus tres cifras. */
  .pro-tabla,
  .pro-tabla tbody,
  .pro-tabla tr,
  .pro-tabla th,
  .pro-tabla td { display: block; width: 100%; }
  .pro-tabla caption { display: block; width: 100%; }
  .pro-tabla thead { display: none; }
  .pro-tabla tr { padding: 16px 0; border-bottom: 1px solid var(--pro-linea); }
  .pro-tabla th,
  .pro-tabla td { padding: 4px 0; border: 0; text-align: left; }
  .pro-tabla tbody th { margin-bottom: 6px; font-weight: var(--pro-peso-fuerte); }
  .pro-tabla td { display: flex; justify-content: space-between; gap: 16px; }
  .pro-tabla td::before {
    content: attr(data-label);
    font-size: var(--pro-etiqueta);
    letter-spacing: var(--pro-tracking-etiqueta);
    text-transform: uppercase;
    color: var(--pro-suave);
  }
}

/* ============================================================
   UNIFICADO CON EL RESTO DEL SITIO (pedido de la clienta: "se ve
   desproporcionado y sin unificacion"). La pagina deja su propio
   sistema de tamanos y usa el de STAAD HOME:
   - portada: la .staad-hero de Showroom (55vh, migas y titulo abajo
     a la izquierda, en blanco);
   - titulos en la serif de la marca (la de las portadas y las
     paginas), al tamano de titulo de seccion;
   - la frase de entrada al tamano del parrafo, no mas grande;
   - el ancho del contenedor del sitio y menos aire entre filas.
   ============================================================ */
.pro {
  --pro-t2: var(--fs-section-title);
  --pro-entrada: var(--fs-section-text);
  --pro-ancho: var(--container);
  --pro-aire: clamp(48px, 6vw, 96px);
}
.pro-titulo,
.pro-cierre__titulo,
.pro-pilar__grande {
  font-family: var(--font-display);
  letter-spacing: -.01em;
  line-height: 1.15;
}
.pro .pro-destacado,
.pro .pro-intro__grande { line-height: 1.8; }
.pro .pro-pilar { gap: 8px; padding-block: clamp(28px, 3.4vw, 44px); }

/* La portada: la frase y el acceso a la solicitud, menudos y en blanco,
   como el "Ver coleccion" de los banners del inicio. */
.pro-hero { background: var(--c-ink); }
.pro .pro-hero__lema {
  margin: 10px 0 0;
  font-size: var(--fs-micro);
  line-height: 1.6;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
.pro-hero__cta {
  display: inline-block;
  margin-top: 18px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(255, 255, 255, .7);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-white);
  transition: opacity var(--dur-fast) var(--ease-out);
}
.pro-hero__cta:hover { color: var(--c-white); opacity: .7; }

/* El cierre: la misma altura que las portadas (55vh) */
.pro-cierre { min-height: clamp(380px, 55svh, 640px); }
.pro-cierre__titulo { margin-bottom: 18px; }
/* El jardin zen es una foto clara: el velo de la portada va un punto mas
   oscuro arriba (la barra en blanco) y abajo (las migas y el titulo). */
.pro-hero::after {
  background: linear-gradient(180deg,
              rgba(0, 0, 0, .38) 0%,
              rgba(0, 0, 0, .10) 30%,
              rgba(0, 0, 0, .40) 66%,
              rgba(0, 0, 0, .66) 100%);
}

/* ============================================================
   MINIMAL (pedido de la clienta: "staad home minimal, bien
   sencillo, profesional"). Mismo lenguaje que la ficha y el pie:
   - sin iconos;
   - titulos de seccion pequenos en la serif; todo lo demas a 12px
     con renglon de 1,7, en tinta o gris;
   - lineas solo finas y grises (nada de hilos negros);
   - menos aire entre filas y la columna del titulo mas angosta;
   - los tres pilares como rotulos en una linea, no como titulares.
   ============================================================ */
.pro {
  --pro-t2: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
  --pro-entrada: 13px;
  --pro-texto: 12px;
  --pro-pequeno: 12px;
  --pro-etiqueta: 10.5px;
  --pro-aire: clamp(40px, 5vw, 72px);
}
.pro .pro-icono { display: none; }

:where(.pro) p { line-height: 1.7; }
.pro .pro-destacado,
.pro .pro-intro__grande { font-size: var(--pro-entrada); line-height: 1.7; }
.pro .pro-nota,
.pro .pro-letra-pequena,
.pro .pro-columnas p:not(.pro-antetitulo) { font-size: 12px; line-height: 1.7; }

/* Apertura: una columna corta, a la izquierda como el resto del sitio */
.pro .pro-intro {
  width: var(--pro-ancho);
  padding: var(--pro-aire) 0;
  text-align: left;
}
.pro .pro-intro p { max-width: 62ch; }

/* Pilares: rotulo en serif pequena y su linea gris debajo */
.pro .pro-pilar { align-items: flex-start; text-align: left; gap: 4px; padding: 22px 0; }
.pro .pro-pilar + .pro-pilar { border-left: 0; }
.pro .pro-pilares { column-gap: clamp(20px, 3vw, 40px); }
.pro .pro-pilar__grande { font-size: 15px; line-height: 1.3; }

/* Filas */
.pro .pro-fila {
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: clamp(24px, 4vw, 72px);
}
.pro .pro-fila__cuerpo { max-width: 680px; }
.pro .pro-antetitulo { margin-bottom: 8px; }
.pro .pro-sub,
.pro .pro-form__leyenda { font-size: 11px; letter-spacing: .08em; }

/* Solo lineas grises y finas */
.pro .pro-columnas > li { padding-top: 14px; border-top-color: var(--pro-linea); }
.pro .pro-columnas { margin-top: clamp(24px, 3vw, 40px); }
.pro .pro-tabla thead th,
.pro .pro-form__leyenda,
.pro .pro-alta__estado { border-color: var(--pro-linea); }
.pro .pro-lista > li { padding: 11px 0; font-size: 12px; }
.pro .pro-num { margin-bottom: 8px; }

/* Botones y opciones a la medida de la ficha (41px) */
.pro .pro-boton,
.pro .contacto__submit.pro-boton { min-height: 41px; padding: 0 28px; }
.pro .pro-form .contacto__submit.pro-boton { min-height: 44px; }
.pro .pro-form__opcion span { min-height: 36px; padding: 0 16px; }

/* El cierre: la frase del programa en serif pequena */
.pro .pro-cierre__titulo { font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.5rem); }
.pro .pro-cierre__texto { width: min(92vw, 560px); }

@media (max-width: 700px) {
  .pro .pro-pilares { grid-template-columns: 1fr; }
  .pro .pro-pilar { padding: 16px 0; }
  .pro .pro-pilar + .pro-pilar { border-top: 1px solid var(--pro-linea); }
}

/* ============================================================
   DIAGRAMACION EDITORIAL (pedido de la clienta: "es lo mas
   importante"). Una reticula de 12 columnas para toda la pagina (solo Collective,
   main.pro--editorial; las bodas siguen como estaban),
   con el lenguaje del pie: rotulo gris, hilo fino a todo el ancho
   y el contenido alineado siempre a la misma columna.
   - Columna 1-4: el numero de la seccion, el rotulo y el titulo.
   - Columna 6-12: el texto. Todo lo que se lee empieza en el
     mismo eje, de arriba abajo.
   - La entrada, en la serif de la marca, como el copete de una
     revista.
   - El cierre: la foto a un lado y el texto al otro, sin letras
     encima de la imagen.
   ============================================================ */
.pro--editorial { counter-reset: pro-sec; }
.pro--editorial .pro-intro,
.pro--editorial .pro-fila,
.pro--editorial .pro-alta,
.pro--editorial .pro-cierre {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2vw, 32px);
  width: var(--pro-ancho);
  margin-inline: auto;
}

/* El numero de cada seccion, sobre su rotulo */
.pro--editorial .pro-fila,
.pro--editorial .pro-alta { counter-increment: pro-sec; }
.pro--editorial .pro-fila__cabeza::before,
.pro--editorial .pro-alta__cabeza::before {
  content: counter(pro-sec, decimal-leading-zero);
  display: block;
  margin-bottom: 18px;
  font-size: var(--pro-etiqueta);
  letter-spacing: var(--pro-tracking-etiqueta);
  color: var(--pro-suave);
  font-variant-numeric: tabular-nums;
}

/* Entrada */
.pro--editorial .pro-intro { padding: var(--pro-aire) 0; }
.pro--editorial .pro-intro__rotulo { grid-column: 1 / span 4; margin: 0; }
.pro--editorial .pro-intro > p:not(.pro-intro__rotulo) { grid-column: 6 / -1; max-width: 46ch; }
.pro--editorial .pro-intro .pro-intro__grande {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.55vw, 1.5rem);
  line-height: 1.4;
  letter-spacing: -.005em;
  color: var(--pro-tinta);
}
.pro--editorial .pro-intro p + p { margin-top: 20px; }

/* Pilares: tres columnas sobre el mismo hilo, sin linea de cierre */
.pro--editorial .pro-pilares {
  column-gap: clamp(16px, 2vw, 32px);
  border-bottom: 0;
}

/* Filas: hilo a todo el ancho encima de CADA seccion */
.pro--editorial .pro-fila {
  padding: clamp(20px, 2.4vw, 32px) 0 var(--pro-aire);
  border-top: 1px solid var(--pro-linea);
}
.pro--editorial .pro-fila__cabeza { grid-column: 1 / span 4; position: static; }
.pro--editorial .pro-fila__cuerpo { grid-column: 6 / -1; max-width: none; }

/* La solicitud, en la misma reticula */
.pro--editorial .pro-alta {
  padding: clamp(20px, 2.4vw, 32px) 0 var(--pro-aire);
  border-top: 1px solid var(--pro-linea);
}
.pro--editorial .pro-alta__cabeza { grid-column: 1 / span 4; width: auto; margin: 0; text-align: left; }
.pro--editorial .pro-alta__cabeza p:last-child { max-width: 34ch; margin: 14px 0 0; }
.pro--editorial .pro-alta__estado,
.pro--editorial .pro-form { grid-column: 6 / -1; width: auto; margin: 0; }
.pro--editorial .pro-alta__estado { text-align: left; }

/* Cierre: foto (columnas 1-7) y texto (9-12), sobre el crema */
.pro--editorial .pro-cierre {
  min-height: 0;
  padding: clamp(20px, 2.4vw, 32px) 0 var(--pro-aire);
  border-top: 1px solid var(--pro-linea);
  background: transparent;
  text-align: left;
  place-items: stretch;
  overflow: visible;
}
.pro--editorial .pro-cierre::after { display: none; }
.pro--editorial .pro-cierre__img {
  position: static;
  grid-column: 1 / span 7;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.pro--editorial .pro-cierre__texto {
  grid-column: 9 / -1;
  align-self: end;
  width: auto;
  padding: 0;
}
.pro--editorial .pro-cierre--sin-foto .pro-cierre__texto { grid-column: 6 / -1; }
.pro--editorial .pro-cierre__titulo { color: var(--pro-tinta); text-shadow: none; }
.pro--editorial .pro-cierre__titulo span { display: block; }
.pro--editorial .pro-cierre .pro-antetitulo,
.pro--editorial .pro-cierre p:not(.pro-antetitulo) { color: var(--pro-suave); }
.pro--editorial .pro-cierre p:not(.pro-antetitulo) { max-width: 40ch; margin: 0; }

/* Tableta y celular: una sola columna, el mismo orden */
@media (max-width: 1020px) {
  .pro--editorial .pro-intro__rotulo,
  .pro--editorial .pro-intro > p:not(.pro-intro__rotulo),
  .pro--editorial .pro-fila__cabeza,
  .pro--editorial .pro-fila__cuerpo,
  .pro--editorial .pro-alta__cabeza,
  .pro--editorial .pro-alta__estado,
  .pro--editorial .pro-form,
  .pro--editorial .pro-cierre__img,
  .pro--editorial .pro-cierre__texto { grid-column: 1 / -1; }
  .pro--editorial .pro-fila,
  .pro--editorial .pro-alta,
  .pro--editorial .pro-intro,
  .pro--editorial .pro-cierre { row-gap: 0; }
  .pro--editorial .pro-intro__rotulo { margin-bottom: 18px; }
  .pro--editorial .pro-fila__cabeza,
  .pro--editorial .pro-alta__cabeza { margin-bottom: 24px; }
  .pro--editorial .pro-cierre__texto { margin-top: 28px; }
}

/* ---------- Documentos (RUT y certificacion bancaria) ----------
   El mismo lenguaje de los campos: una linea fina debajo, el nombre del
   archivo a la izquierda y "Adjuntar" a la derecha. El input de verdad
   queda encima, invisible, para que toda la caja abra el selector. */
.pro-form .pro-doc { position: relative; }
.pro-form .pro-doc__input {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 44px;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.pro-doc__caja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 44px;
  border-bottom: 1px solid var(--pro-linea);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.pro-doc__nombre {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  color: var(--pro-suave);
}
.pro-doc__accion {
  flex: none;
  font-size: var(--pro-etiqueta);
  letter-spacing: var(--pro-tracking-etiqueta);
  text-transform: uppercase;
  color: var(--pro-tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pro-doc:hover .pro-doc__caja,
.pro-doc__input:focus-visible + .pro-doc__caja { border-bottom-color: var(--pro-tinta); }
.pro-doc.is-cargado .pro-doc__nombre { color: var(--pro-tinta); }
.pro-form .pro-doc.is-falta .pro-doc__caja { border-bottom-color: var(--pro-error); }
.pro .pro-doc__nota { margin: 0; }

/* Lista de bodas en la reticula editorial: el formulario de alta y el
   buscador empiezan en la columna del texto, como todo lo demas. */
.pro--editorial .sb-alta-cuerpo { grid-column: 6 / -1; width: auto; margin: 0; }
@media (max-width: 1020px) {
  .pro--editorial .sb-alta-cuerpo { grid-column: 1 / -1; }
}
/* La segunda accion de la portada (buscar una lista), al lado de la primera */
.pro-hero__cta--sec { margin-left: 22px; border-bottom-color: rgba(255, 255, 255, .45); font-weight: 400; }
@media (max-width: 520px) {
  .pro-hero__cta--sec { display: table; margin-left: 0; margin-top: 12px; }
}
.pro--editorial .sb-alta-cuerpo .sb-centro { text-align: left; }

/* La entrada no se corta en tantos renglones (pedido de la clienta): la
   caja de 46ch era angosta para un parrafo largo en la serif y para la nota
   en versalitas (salia en tres renglones cortos). La entrada ocupa toda la
   columna del texto, un punto mas chica, y la nota va de corrido. */
.pro--editorial .pro-intro > p:not(.pro-intro__rotulo) { max-width: none; }
.pro--editorial .pro-intro .pro-intro__grande {
  max-width: 58ch;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem);
  line-height: 1.45;
  text-wrap: pretty;
}

/* El cierre: la foto va dentro de un marco que la recorta, para que pueda
   derivar con el scroll (parallax sutil, motion.js). El marco ocupa el
   lugar que antes tenia la foto en la reticula. */
.pro--editorial .pro-cierre__marco {
  grid-column: 1 / span 7;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.pro--editorial .pro-cierre__marco .pro-cierre__img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  will-change: transform;
}
@media (max-width: 1020px) {
  .pro--editorial .pro-cierre__marco { grid-column: 1 / -1; }
}