/* ============================================================
   STAAD HOME — Pulido UX/UI (reveals, foco, detalles)
   ============================================================ */

/* ---------- Aparicion al hacer scroll ---------- */
.reveals-ready .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
.reveals-ready .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ---------- Seleccion de texto en la marca ---------- */
::selection { background: var(--c-ink); color: var(--c-white); }

/* ---------- Foco accesible ---------- */
:focus-visible { outline: 1px solid var(--c-ink); outline-offset: 3px; }
.site-header :focus-visible,
.collection :focus-visible,
.video-band :focus-visible { outline-color: currentColor; }

/* ---------- Subrayado animado en enlaces ---------- */
.footer__col a,
.footer__bottom a,
.lux-sub a,
.product_meta a {
  position: relative;
}
.footer__col a::after,
.footer__bottom a::after,
.lux-sub a::after,
.product_meta a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease-out);
}
.footer__col a:hover::after,
.footer__bottom a:hover::after,
.lux-sub a:hover::after,
.product_meta a:hover::after {
  transform: scaleX(1);
}

/* ---------- Migas de pan (breadcrumbs) ---------- */
.woocommerce-breadcrumb,
.woocommerce nav.woocommerce-breadcrumb {
  margin-bottom: var(--space-md);
  font-size: clamp(0.5rem, 0.47rem + 0.12vw, 0.56rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.woocommerce-breadcrumb a { color: var(--c-ink-soft); transition: color var(--dur-fast) var(--ease-out); }
.woocommerce-breadcrumb a:hover { color: var(--c-ink); }

/* ---------- Estado "cargando" del boton (spinner) ---------- */
.single_add_to_cart_button.loading,
.staad-card__actions .button.loading,
a.add_to_cart_button.loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.single_add_to_cart_button.loading::after,
.staad-card__actions .button.loading::after,
a.add_to_cart_button.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  margin: -8px 0 0 -8px;
  border: 1.5px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: staad-spin .6s linear infinite;
}
@keyframes staad-spin { to { transform: rotate(360deg); } }

/* ---------- Boton volver arriba (IZQUIERDA: la derecha es de WhatsApp) ---------- */
.to-top {
  position: fixed;
  left: clamp(16px, 2.5vw, 32px);
  bottom: clamp(16px, 2.5vw, 32px);
  z-index: 80;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-ink);
  color: var(--c-white);
  border: 0;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease),
              visibility var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
body.show-to-top .to-top { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--c-accent); }
.to-top svg { display: block; }

/* ---------- Boton flotante de WhatsApp ----------
   Abajo-DERECHA (el volver-arriba paso a la izquierda). Tinta STAAD, no el
   verde de WhatsApp: mismo lenguaje que los demas CTAs de la marca.
   Hover: se INVIERTE (blanco con icono tinta) — el marron accent se veia
   como una mancha sin forma. */
.wa-float {
  position: fixed;
  right: clamp(16px, 2.5vw, 32px);
  bottom: clamp(16px, 2.5vw, 32px);
  z-index: 80;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-ink);
  color: var(--c-white);
  border-radius: 50%;
  box-shadow: 0 4px 18px rgba(23, 23, 23, .18);
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.wa-float:hover {
  background: var(--c-white);
  color: var(--c-ink);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(23, 23, 23, .22);
}
.wa-float:active { transform: translateY(0); }
.wa-float svg { display: block; }
/* Los paneles (menu, carrito, favoritos, lightbox) van por encima (z 100+) */

/* ============================================================
   Paginas de contenido (Nosotros, Contacto, Terminos...)
   ============================================================ */
.staad-page {
  width: var(--container);
  margin-inline: auto;
  padding-block: var(--space-xl) var(--space-2xl);
}
.staad-page__crumb {
  font-size: clamp(0.5rem, 0.47rem + 0.12vw, 0.56rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-bottom: var(--space-md);
}
.staad-page__crumb a { color: var(--c-ink-soft); }
.staad-page__crumb a:hover { color: var(--c-ink); }
.staad-page__crumb span { margin: 0 6px; }
.staad-page__head { margin-bottom: var(--space-lg); }
.staad-page__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--c-ink);
}
.staad-page__content { max-width: 68ch; }
.staad-page__content--wide { max-width: none; }
.staad-page__content--wide p { max-width: none; }

/* Nosotros: retrato de la fundadora al lado del texto (tops alineados arriba) */
.staad-page__article--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(36px, 5vw, 96px);
  align-items: start;
}
.staad-page__main { min-width: 0; }
.staad-page__article--split .staad-page__content { max-width: none; }
.staad-page__portrait { margin: 0; }
/* Desktop: la foto queda fija mientras se hace scroll del texto largo */
@media (min-width: 861px) {
  .staad-page__portrait {
    position: sticky;
    top: calc(var(--header-h-sm) + clamp(24px, 3vw, 48px));
    align-self: start;
  }
}
.staad-page__portrait img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--c-bg);
}
/* Espacio de foto reservado (Showroom/Servicios sin imagen destacada aun) */
.staad-page__portrait--empty img { aspect-ratio: 4 / 5; object-fit: cover; }

/* ============================================================
   PORTADA de pagina (hero) — Showroom
   La foto abre a todo el ancho con el titulo y las migas ENCIMA, igual
   que los banners del home. La cabecera va transparente sobre ella
   (body.staad-top-oscuro, ver header.css), asi que el #main no lleva el
   respiro superior de las paginas internas: la foto entra por debajo.
   ============================================================ */
/* El #main deja de estar limitado al contenedor (para que la portada llegue
   de borde a borde) y es el articulo el que recupera el ancho de lectura.
   OJO: NO usar `width:100vw` + margen negativo — 100vw incluye la barra de
   scroll y provocaba 5px de desborde horizontal. */
body.staad-con-hero #main.staad-page {
  padding-top: 0;
  width: 100%;
}
body.staad-con-hero #main.staad-page > .staad-page__article {
  width: var(--container);
  margin-inline: auto;
}

.staad-hero {
  position: relative;
  width: 100%;
  /* La altura sale del ANCHO (aspect-ratio), no de la altura de la ventana:
     con `vh` el alto dependia del monitor y la caja quedaba tan panoramica
     que `object-fit:cover` se comia media foto. A 3/2 la caja queda cerca
     del 4/3 del archivo, asi que apenas recorta. El tope en px evita que
     en monitores muy anchos ocupe pantallas enteras. */
  aspect-ratio: 3 / 2;
  height: auto;
  min-height: 460px;
  /* Nunca mas alta que la pantalla: la portada entera se ve sin hacer
     scroll. `svh` (small viewport height) es el alto REAL disponible en
     movil con las barras del navegador desplegadas — `vh` se pasa de
     largo ahi. La primera linea es el respaldo para navegadores viejos. */
  max-height: min(900px, 100vh);
  max-height: min(900px, 100svh);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--c-ink);
}
.staad-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* Velo oscuro solo en la parte baja: el texto se lee sin apagar la foto */
.staad-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(0, 0, 0, .34) 0%,
              rgba(0, 0, 0, .06) 34%,
              rgba(0, 0, 0, .30) 72%,
              rgba(0, 0, 0, .58) 100%);
  pointer-events: none;
}
/* El bloque de texto sube: pegado abajo del todo quedaba casi cortado
   contra el borde de la foto. Con este respiro respira sobre la parte
   baja de la imagen, que es donde el degradado la oscurece. */
.staad-hero__inner {
  position: relative;
  z-index: 1;
  width: var(--container);
  margin: 0 auto;
  padding-bottom: clamp(56px, 11vh, 130px);
  color: var(--c-white);
}
.staad-hero__crumb {
  font-size: clamp(0.5rem, 0.47rem + 0.12vw, 0.56rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
  margin-bottom: var(--space-sm);
}
.staad-hero__crumb a { color: rgba(255, 255, 255, .78); }
.staad-hero__crumb a:hover { color: var(--c-white); }
.staad-hero__crumb span { margin: 0 6px; }
.staad-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-section-title);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--c-white);
  margin: 0;
}

/* El texto de estas paginas va a DOS COLUMNAS, para llenar el ancho que
   deja la portada. Las columnas CSS reparten la prosa solas; lo unico
   importante es que ningun parrafo se parta entre columnas. */
.staad-page__content--cols {
  max-width: none;
  margin-top: clamp(32px, 5vh, 64px);
  columns: 2;
  column-gap: clamp(36px, 5vw, 88px);
}
.staad-page__content--cols > * {
  break-inside: avoid;
  page-break-inside: avoid; /* respaldo para navegadores antiguos */
}
.staad-page__content--cols > *:first-child { margin-top: 0; }
/* Mismo cuerpo de letra que Nosotros: menudo y justificado.
   Con las DOS clases del mismo elemento (0,2,1) para ganarle a
   `.staad-page__content p` (0,1,1), que vive mas abajo en esta hoja y
   a igual especificidad se imponia por orden. */
.staad-page__content.staad-page__content--cols p,
.staad-page__content.staad-page__content--cols li {
  font-size: clamp(0.7rem, 0.67rem + 0.14vw, 0.78rem);
  line-height: 1.8;
  text-align: justify;
  hyphens: none; /* nunca partir palabras con guion */
  text-wrap: pretty;
}

@media (max-width: 860px) {
  /* En movil dos columnas obligan a leer en zigzag: una sola. */
  .staad-page__content--cols { columns: 1; }
  /* En movil el 3/2 daria una franja bajita: se vuelve a altura fija,
     tambien en svh para que no la corten las barras del navegador. */
  .staad-hero {
    aspect-ratio: auto;
    height: clamp(420px, 62vh, 620px);
    height: clamp(420px, 62svh, 620px);
    max-height: 100vh;
    max-height: 100svh;
  }
}

/* ---------- Foto APAISADA a todo el ancho (Showroom) ----------
   Una foto horizontal metida en la columna estrecha se veia diminuta; aqui ocupa
   el ancho completo del contenido, debajo del titulo. */
.staad-page__media {
  margin: 0 0 var(--space-xl);
}
.staad-page__media-img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--c-bg);
}
/* Enlace que abre la ampliacion */
.staad-zoom {
  position: relative;
  display: block;
  cursor: zoom-in;
  overflow: hidden;
}
.staad-zoom img { transition: transform var(--dur-slow) var(--ease-out); }
@media (hover: hover) {
  .staad-zoom:hover img { transform: scale(1.02); }
}
.staad-zoom__hint {
  position: absolute;
  right: clamp(12px, 1.6vw, 20px);
  bottom: clamp(12px, 1.6vw, 20px);
  padding: 8px 14px;
  background: rgba(246, 244, 241, .92);
  color: var(--c-ink);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
@media (hover: hover) {
  .staad-zoom:hover .staad-zoom__hint,
  .staad-zoom:focus-visible .staad-zoom__hint { opacity: 1; transform: translateY(0); }
}

/* ---------- Lightbox ---------- */
body.staad-zoom-open { overflow: hidden; }
.staad-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(23, 23, 23, .92);
  opacity: 0;
  transition: opacity var(--dur) var(--ease-out);
  cursor: zoom-out;
}
.staad-lightbox.is-open { opacity: 1; }
.staad-lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  transform: scale(.98);
  transition: transform var(--dur) var(--ease-out);
}
.staad-lightbox.is-open img { transform: scale(1); }
.staad-lightbox__close {
  position: absolute;
  top: clamp(10px, 2vw, 24px);
  right: clamp(10px, 2vw, 24px);
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #F6F4F1;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.staad-lightbox__close:hover { opacity: .6; }

/* Showroom: video de ambiente ocupando exactamente el hueco de la foto */
.staad-page__portrait--video video {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  background: var(--c-bg);
}

/* ============================================================
   STAAD Collective — beneficios en grid con iconos
   ============================================================ */
.collective-benefits { margin-top: clamp(56px, 8vw, 112px); }
.collective-benefits__title,
.collective-close__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--c-ink);
}
.collective-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(30px, 3.6vw, 56px) clamp(24px, 3vw, 46px);
  margin-top: var(--space-lg);
}
.collective-item__icon {
  display: inline-flex;
  color: var(--c-accent);
  margin-bottom: 15px;
}
.collective-item__title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-small);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin-bottom: 9px;
}
.collective-item__text {
  font-size: clamp(0.74rem, 0.71rem + 0.15vw, 0.83rem);
  line-height: 1.75;
  color: var(--c-ink-soft);
}
/* ---------- STAAD Collective: apertura y cierre a dos columnas ----------
   Foto a un lado y texto al otro, alineados por arriba. Tipografia menuda y
   sin justificar: en columna estrecha el justificado abre "rios" de espacio. */
.collective-intro,
.collective-close {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 72px);
  align-items: center;
}
.collective-close { grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); }
.collective-intro__media img,
.collective-close__media img {
  width: 100%;
  height: auto;
  display: block;
}
.collective-intro__media,
.collective-close__media { margin: 0; }

.collective-close { margin-top: clamp(48px, 7vw, 96px); }
.collective-close__title { margin-bottom: var(--space-sm); }
.collective-close p {
  font-size: clamp(0.72rem, 0.69rem + 0.14vw, 0.8rem);
  line-height: 1.8;
  color: var(--c-ink-soft);
  text-wrap: pretty;
}
.collective-close p + p { margin-top: var(--space-xs); }

@media (max-width: 860px) {
  /* En movil, una sola columna: la foto primero y el texto debajo */
  .collective-intro,
  .collective-close { grid-template-columns: 1fr; gap: var(--space-md); }
  .collective-close__media { order: -1; }
}

@media (max-width: 900px) {
  .collective-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .collective-grid { grid-template-columns: 1fr; }
}
.staad-page__portrait-cap {
  margin-top: 14px;
  font-size: clamp(0.56rem, 0.54rem + 0.1vw, 0.64rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
@media (max-width: 860px) {
  .staad-page__article--split { grid-template-columns: 1fr; gap: var(--space-lg); }
  .staad-page__portrait { max-width: 460px; margin-inline: auto; }
}

/* ---------- 404 ---------- */
.staad-404 {
  width: var(--container);
  margin-inline: auto;
  padding-block: clamp(5rem, 14vh, 10rem) var(--space-2xl);
  text-align: center;
}
.staad-404__code {
  font-size: var(--fs-micro);
  letter-spacing: .3em;
  color: var(--c-ink-soft);
  text-transform: uppercase;
}
.staad-404__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin-top: var(--space-xs);
}

/* Utilidad: aplica la serif de alto contraste a cualquier titulo */
.staad-display { font-family: var(--font-display) !important; }
.staad-404__text {
  margin: var(--space-sm) auto 0;
  max-width: 46ch;
  font-size: var(--fs-small);
  line-height: 1.9;
  color: var(--c-ink-soft);
}
.staad-404__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--space-md);
}
.staad-404__btn {
  display: inline-block;
  padding: 13px 30px;
  border: 1px solid var(--c-ink);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.staad-404__btn:hover { background: var(--c-bg-2); color: var(--c-ink); }
.staad-404__btn:active { transform: translateY(1px); }
.staad-404__btn--solid { background: var(--c-ink); color: var(--c-white); }
.staad-404__btn--solid:hover { background: var(--c-ink); opacity: .88; color: var(--c-white); }
.staad-page__content > * + * { margin-top: var(--space-sm); }
.staad-page__content p,
.staad-page__content li {
  font-size: clamp(0.78rem, 0.74rem + 0.18vw, 0.88rem);
  line-height: 1.85;
  color: var(--c-ink-soft);
  text-align: justify;
  text-wrap: pretty;
}
.staad-page__content h2 {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--c-ink);
  margin-top: var(--space-lg);
}
.staad-page__content h3 {
  font-size: var(--fs-small);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  margin-top: var(--space-md);
}
.staad-page__content a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }
.staad-page__content strong { color: var(--c-ink); font-weight: 400; }
.staad-page__content ul { padding-left: 1.2em; list-style: disc; }
.staad-page__content em { color: var(--c-ink-soft); }

/* ---------- Lead / intro de pagina ---------- */
.staad-page__lead {
  max-width: 62ch;
  margin-bottom: var(--space-xl);
  font-size: clamp(0.84rem, 0.8rem + 0.2vw, 0.94rem);
  line-height: 1.8;
  color: var(--c-ink-soft);
  text-align: justify;
  text-wrap: pretty;
}
.staad-page__lead a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   Contacto (formulario + datos)
   ============================================================ */
.contacto__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.72fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}
.contacto__form { display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 26px); }
.contacto__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 26px); }
.contacto__field { display: block; }
.contacto__lbl {
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.contacto__lbl em { font-style: normal; text-transform: none; letter-spacing: .03em; opacity: .7; }
.contacto__form input,
.contacto__form textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  background: transparent;
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--c-ink);
  border-radius: 0;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.contacto__form textarea { resize: vertical; min-height: 120px; }
.contacto__form input:focus,
.contacto__form textarea:focus { outline: none; border-color: var(--c-ink); }
.contacto__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: var(--space-2xs); }
.contacto__submit {
  padding: 14px 40px;
  background: var(--c-ink);
  color: var(--c-white);
  border: 0;
  cursor: pointer;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.contacto__submit:hover { opacity: .88; }
.contacto__submit:active { transform: translateY(1px); }
.contacto__submit:disabled { opacity: .5; cursor: default; }
.contacto__feedback { margin: 0; font-size: var(--fs-small); }
.contacto__feedback.is-ok { color: var(--c-accent); }
.contacto__feedback.is-err { color: #a3402f; }

.contacto__aside { display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 30px); }
.contacto__block { display: flex; flex-direction: column; gap: 6px; }
.contacto__block-lbl {
  font-size: var(--fs-micro);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.contacto__block-val { font-size: var(--fs-small); color: var(--c-ink); }
a.contacto__block-val { text-decoration: underline; text-underline-offset: 3px; }
.contacto__block-val--soft { color: var(--c-ink-soft); line-height: 1.7; }

@media (max-width: 820px) {
  .contacto__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .contacto__aside { order: 2; }
}
@media (max-width: 520px) {
  .contacto__row { grid-template-columns: 1fr; }
}

/* ============================================================
   FAQ (acordeones)
   ============================================================ */
.faq { max-width: 820px; }
.faq-sec { margin-top: var(--space-xl); }
.faq-sec:first-child { margin-top: 0; }
.faq-sec__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--c-ink);
  margin-bottom: var(--space-2xs);
}
.faq-item { border-bottom: 1px solid var(--c-line); }
.faq-item__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: clamp(15px, 2vw, 20px) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-small);
  letter-spacing: .01em;
  color: var(--c-ink);
  transition: color var(--dur-fast) var(--ease-out);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:hover { color: var(--c-taupe); }
.faq-item__ic { position: relative; width: 12px; height: 12px; flex: none; color: var(--c-ink); }
.faq-item__ic::before,
.faq-item__ic::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.faq-item__ic::before { top: 5px; left: 0; width: 12px; height: 1px; }
.faq-item__ic::after { top: 0; left: 5px; width: 1px; height: 12px; }
.faq-item[open] .faq-item__ic::after { opacity: 0; transform: rotate(-90deg); }
.faq-item__a { padding: 0 0 clamp(16px, 2vw, 22px); max-width: 64ch; }
.faq-item__a p { font-size: var(--fs-small); line-height: 1.9; color: var(--c-ink-soft); margin: 0; }
.faq-item__a a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Respeta a quien prefiere menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveals-ready .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Pagina Colecciones — una franja por coleccion
   ============================================================ */
.colecciones {
  padding-top: calc(var(--header-h-sm) + var(--space-md));
  padding-bottom: var(--space-2xl);
}
.colecciones__head {
  width: var(--container);
  margin: 0 auto var(--space-lg);
}
.colecciones__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-section-title);
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--c-ink);
  margin: var(--space-2xs) 0 0;
}
.colecciones__intro {
  margin-top: var(--space-xs);
  max-width: 52ch;
  font-size: var(--fs-small);
  line-height: 1.8;
  color: var(--c-ink-soft);
  text-wrap: pretty;
}

/* 'stretch': la foto crece hasta el alto exacto de la columna de la derecha */
/* Ya no hay foto de ambiente: la franja es de ancho completo y manda el
   producto. Arriba una cabecera (nombre + enlace a la coleccion entera) y
   debajo el carrusel de piezas. */
.col-block {
  width: var(--container-wide);
  margin: 0 auto var(--space-xl);
}
.col-block__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--c-line);
}
.col-block__sub {
  margin: 8px 0 0;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
@media (max-width: 700px) {
  .col-block__head { flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
}
.col-block__media {
  display: block;
  overflow: hidden;
  min-height: 260px;
}
.col-block__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  display: block;
  transition: transform 1.1s var(--ease-out);
}
.col-block__media:hover img { transform: scale(1.03); }

.col-block__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-section-title);
  text-transform: uppercase;
  letter-spacing: -.01em;
  color: var(--c-ink);
  margin: 0;
}
.col-block__cta {
  display: inline-block;
  flex: none;
  margin-top: 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--c-line);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.col-block__cta:hover { border-bottom-color: var(--c-ink); }
.col-block__count { color: var(--c-ink-soft); }

/* Carrusel de piezas: se desliza con el dedo, sin barra visible */
.col-block__rail {
  margin-top: var(--space-md);
  display: flex;
  gap: clamp(10px, 1.4vw, 20px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}
.col-block__rail::-webkit-scrollbar { display: none; }
.col-mini {
  flex: 0 0 calc((100% - clamp(10px, 1.4vw, 20px)) / 2);
  scroll-snap-align: start;
  color: var(--c-ink);
  text-align: center;
}
.col-mini__media {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-bg);
}
.col-mini__media img {
  width: 100%;
  height: 100%;
  /* contain, no cover: son fotos de producto sobre fondo crema — la pieza
     se ve COMPLETA (sin patas ni bordes cortados) y el fondo se funde con
     el de la tarjeta. */
  object-fit: contain;
  display: block;
  transition: transform 1s var(--ease-out);
}
.col-mini:hover .col-mini__media img { transform: scale(1.04); }
.col-mini__name {
  display: block;
  margin-top: 10px;
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.4;
}
.col-mini__price {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-micro);
  color: var(--c-ink-soft);
}

@media (max-width: 900px) {
  /* Apilado: la foto recupera su proporcion, ya no hay columna que igualar */
  .col-block { grid-template-columns: 1fr; gap: var(--space-sm); }
  .col-block__media { order: -1; aspect-ratio: 16 / 9; min-height: 0; }
  .col-mini { flex-basis: calc((100% - clamp(10px, 1.4vw, 20px)) / 2); }
}

/* ============================================================
   Paginas "de pared" (Servicios y STAAD Collective)
   Solo texto, sobre el mismo microcemento de El universo STAAD.
   ============================================================ */
.staad-page--wall {
  width: auto;
  max-width: none;
  margin-inline: 0;
  padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2));
  background-color: var(--c-taupe);
  background-image: url('../img/overlay-pared-staan-home.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--c-white);
}
.staad-page--wall .staad-page__article { max-width: var(--container); margin-inline: auto; }
.staad-page--wall .staad-page__crumb,
.staad-page--wall .staad-page__crumb a { color: rgba(255, 255, 255, .62); }
.staad-page--wall .staad-page__crumb a:hover { color: var(--c-white); }
.staad-page--wall .staad-page__title,
.staad-page--wall .collective-benefits__title,
.staad-page--wall .collective-close__title { color: var(--c-white); text-shadow: 0 1px 16px rgba(0, 0, 0, .18); }
.staad-page--wall .staad-page__lead { color: rgba(255, 255, 255, .9); }
.staad-page--wall .staad-page__content,
.staad-page--wall .staad-page__content p,
.staad-page--wall .collective-item__text,
.staad-page--wall .collective-close p { color: rgba(255, 255, 255, .84); }
.staad-page--wall .collective-item__title { color: var(--c-white); }
.staad-page--wall .collective-item__icon { color: rgba(255, 255, 255, .72); }
.staad-page--wall a { color: var(--c-white); }
.staad-page--wall hr,
.staad-page--wall .staad-page__content hr { border-color: rgba(255, 255, 255, .22); }

/* En movil el fondo fijo cuesta rendimiento y se ve mal en iOS */
@media (max-width: 860px) {
  .staad-page--wall { background-attachment: scroll; }
}

/* ------------------------------------------------------------
   Paginas de pared: diagramacion
   El fondo entra por debajo de la cabecera transparente, asi que
   el aire de arriba lo pone la propia pagina, no #main.
   ------------------------------------------------------------ */
body:not(.home) #main.staad-page--wall {
  padding-top: calc(var(--header-h-sm) + clamp(48px, 7vh, 96px));
  padding-bottom: var(--space-2xl);
}

/* Titulo y entradilla: bloque de apertura ancho */
.staad-page--wall .staad-page__head { margin-bottom: var(--space-lg); }
.staad-page--wall .staad-page__lead {
  max-width: 60ch;
  font-size: var(--fs-section-text);
  line-height: 1.8;
  color: rgba(255, 255, 255, .92);
}

/* Los servicios: titulillo a la izquierda, descripcion a la derecha.
   Como el contenido viene del editor (h3 + p seguidos), lo ordenamos
   con rejilla en vez de tocar el HTML. */
.staad-page--wall .staad-page__content {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(180px, 0.62fr) minmax(0, 1fr);
  gap: 0 clamp(28px, 4vw, 80px);
  align-items: start;
}
.staad-page--wall .staad-page__content > h3 {
  grid-column: 1;
  margin: 0;
  padding-top: clamp(18px, 2.2vw, 30px);
  border-top: 1px solid rgba(255, 255, 255, .22);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-white);
}
.staad-page--wall .staad-page__content > p {
  grid-column: 2;
  margin: 0;
  padding-top: clamp(18px, 2.2vw, 30px);
  padding-bottom: clamp(18px, 2.2vw, 30px);
  border-top: 1px solid rgba(255, 255, 255, .22);
  max-width: 62ch;
  font-size: var(--fs-small);
  line-height: 1.85;
  color: rgba(255, 255, 255, .82);
  text-align: left;
}
/* Los parrafos de entrada (los que van antes del primer h3) ocupan todo
   el ancho y no llevan la linea divisoria de la lista. */
.staad-page--wall .staad-page__content > p:not(h3 ~ p) {
  grid-column: 1 / -1;
  border-top: 0;
  padding-top: 0;
  padding-bottom: var(--space-sm);
  max-width: 62ch;
  font-size: var(--fs-section-text);
  color: rgba(255, 255, 255, .9);
}

@media (max-width: 760px) {
  .staad-page--wall .staad-page__content { grid-template-columns: 1fr; }
  .staad-page--wall .staad-page__content > h3 { grid-column: 1; padding-bottom: 8px; }
  .staad-page--wall .staad-page__content > p { grid-column: 1; border-top: 0; padding-top: 0; }
}

/* ============================================================
   Movil: menos aire arriba en TODAS las paginas internas
   La pantalla es corta y el primer contenido debe verse ya.
   (Va al final de la hoja: a igual especificidad gana el ultimo.)
   ============================================================ */
@media (max-width: 860px) {
  body:not(.home) #main,
  body:not(.home) #main.staad-page--wall,
  body:not(.home) #main.colecciones {
    padding-top: calc(var(--header-h-sm) + 6px);
  }
  .staad-page__crumb { margin-bottom: var(--space-xs); }
  .staad-page__head { margin-bottom: var(--space-sm); }
  .colecciones__head { margin-bottom: var(--space-md); }
}

/* ============================================================
   STAAD Collective: tipografia menuda y sutil
   Va al FINAL y con .staad-collective.staad-page--wall (3 clases) porque
   las reglas de "pagina de pared" (.staad-page--wall .staad-page__content
   > p:not(h3 ~ p), pensadas para Servicios) son mas especificas que un
   simple .staad-collective y ganaban el tamano de letra.
   ============================================================ */
.staad-collective.staad-page--wall .staad-page__title {
  margin-bottom: var(--space-2xs);
}
.staad-collective.staad-page--wall .staad-page__lead {
  max-width: none;
  margin-bottom: var(--space-sm);
  font-size: clamp(0.76rem, 0.72rem + 0.16vw, 0.84rem);
  line-height: 1.7;
  text-align: left;
}
/* Collective no usa el patron "h3 + p" de Servicios: su contenido son
   parrafos sueltos, asi que se anula la rejilla de dos columnas. */
.staad-collective.staad-page--wall .staad-page__content {
  display: block;
  max-width: none;
}
.staad-collective.staad-page--wall .staad-page__content > p,
.staad-collective.staad-page--wall .staad-page__content > p:not(h3 ~ p) {
  grid-column: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border-top: 0;
  font-size: clamp(0.7rem, 0.67rem + 0.14vw, 0.78rem);
  line-height: 1.8;
  color: rgba(255, 255, 255, .82);
}
.staad-collective.staad-page--wall .staad-page__content > p + p {
  margin-top: var(--space-xs);
}
.staad-collective .collective-close p {
  font-size: clamp(0.7rem, 0.67rem + 0.14vw, 0.78rem);
}
/* Los beneficios tambien mas contenidos */
.staad-collective .collective-benefits { margin-top: clamp(44px, 6vw, 88px); }
.staad-collective .collective-item__text {
  font-size: clamp(0.68rem, 0.65rem + 0.13vw, 0.76rem);
  line-height: 1.7;
}

/* ============================================================
   NOSOTROS: retrato a sangre
   Texto 40% a la izquierda, foto 50% pegada al borde DERECHO y arriba
   (sin hueco entre la barra y la foto). El 10% restante es el aire del
   medio, repartido por justify-content:space-between.
   ============================================================ */
/* OJO con la especificidad: header.css trae `body:not(.home) #main`
   (1 id + 1 clase + 1 tipo) para el respiro bajo la barra fija. Un
   `#main.staad-page--retrato` a secas NO lo gana y quedaban ~114px de
   hueco entre la barra y la foto. Con `body:not(.home)` delante si. */
body:not(.home) #main.staad-page--retrato {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-top: 0;
  padding-inline: 0;
}
#main.staad-page--retrato .staad-page__article--split {
  grid-template-columns: 40% 50%;
  justify-content: space-between;
  gap: 0;
  align-items: start;
}
/* La columna de texto recupera el margen del contenedor por la izquierda
   y se separa de la barra fija por arriba. */
#main.staad-page--retrato .staad-page__main {
  padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2));
  padding-right: clamp(20px, 3vw, 48px);
  padding-top: calc(var(--header-h-sm) + var(--space-lg));
  padding-bottom: var(--space-2xl);
}
/* La foto sube hasta el tope: sin margen ninguno, entra POR DEBAJO de la
   barra fija (como los banners del home). Arriba solo se cubre el fondo
   del estudio, no el retrato. */
#main.staad-page--retrato .staad-page__portrait {
  margin: 0;
}
#main.staad-page--retrato .staad-page__portrait img {
  width: 100%;
  height: auto;
  display: block;
}
@media (min-width: 861px) {
  /* Se queda fija pegada al borde superior mientras el texto hace scroll */
  #main.staad-page--retrato .staad-page__portrait { top: 0; }
}
/* Texto menudo y justificado, SIN partir palabras: `hyphens:none` es una
   decision de la marca (ninguna palabra cortada con guion en toda la web).
   Para que el justificado no abra "rios" de espacio, la columna se manda
   ancha (40% del viewport ~ 80 caracteres por linea, holgado de sobra). */
#main.staad-page--retrato .staad-page__content p,
#main.staad-page--retrato .staad-page__content li {
  font-size: clamp(0.7rem, 0.67rem + 0.14vw, 0.78rem);
  line-height: 1.8;
  text-align: justify;
  hyphens: none;
  text-wrap: pretty;
}
#main.staad-page--retrato .staad-page__lead {
  font-size: clamp(0.76rem, 0.72rem + 0.16vw, 0.84rem);
  text-align: justify;
  hyphens: none;
  text-wrap: pretty;
}

@media (max-width: 860px) {
  /* Movil: una sola columna, la foto primero y a sangre completa */
  #main.staad-page--retrato .staad-page__article--split {
    grid-template-columns: 1fr;
  }
  #main.staad-page--retrato .staad-page__main {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    padding-top: calc(var(--header-h-sm) + var(--space-md));
  }
  #main.staad-page--retrato .staad-page__portrait {
    max-width: none;
    margin: 0;
  }
}

/* ============================================================
   STAAD Collective: fotos a sangre (mismo patron que Nosotros)
   Intro  -> foto 50% pegada al borde IZQUIERDO y arriba + texto 40% dcha.
   Cierre -> texto 40% izquierda + foto 50% pegada al borde DERECHO.
   El 10% restante es el aire del medio (justify-content:space-between).
   Como en Nosotros, hace falta `body:not(.home)` para ganarle al
   padding-top de header.css, y las dos clases del <main> para ganarle
   al padding-inline de .staad-page--wall.
   ============================================================ */
body:not(.home) #main.staad-collective.staad-page--wall {
  padding-top: 0;
  padding-inline: 0;
}

/* --- Apertura: foto a la izquierda ---
   La apertura ES un .staad-page__article, y `.staad-page--wall
   .staad-page__article` lo limita al contenedor y lo centra: hay que
   soltarlo para que la foto llegue al borde. */
#main.staad-collective .collective-intro {
  max-width: none;
  margin-inline: 0;
  grid-template-columns: 50% 40%;
  justify-content: space-between;
  gap: 0;
  align-items: start;
}
#main.staad-collective .collective-intro__media {
  margin: 0;
}
#main.staad-collective .collective-intro__text {
  padding-top: calc(var(--header-h-sm) + var(--space-lg));
  padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2));
  padding-left: clamp(20px, 3vw, 48px);
  padding-bottom: var(--space-lg);
}

/* --- Beneficios: recuperan el ancho de lectura del contenedor --- */
#main.staad-collective .collective-benefits {
  padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2));
}

/* --- Cierre: foto a la derecha --- */
#main.staad-collective .collective-close {
  grid-template-columns: 40% 50%;
  justify-content: space-between;
  gap: 0;
  align-items: start;
}
#main.staad-collective .collective-close__media { margin: 0; }
#main.staad-collective .collective-close__text {
  padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2));
  padding-right: clamp(20px, 3vw, 48px);
  padding-block: var(--space-md) var(--space-lg);
}

/* Texto justificado, igual que Nosotros, y sin partir palabras */
#main.staad-collective .staad-page__content > p,
#main.staad-collective .staad-page__content > p:not(h3 ~ p),
#main.staad-collective .staad-page__lead,
#main.staad-collective .collective-close p {
  text-align: justify;
  hyphens: none;
  text-wrap: pretty;
}

@media (max-width: 860px) {
  /* Movil: una columna, la foto arriba y a sangre completa */
  #main.staad-collective .collective-intro,
  #main.staad-collective .collective-close {
    grid-template-columns: 1fr;
  }
  #main.staad-collective .collective-intro__text {
    padding: var(--space-md) var(--gutter) var(--space-lg);
  }
  #main.staad-collective .collective-close__text {
    padding: var(--space-md) var(--gutter) var(--space-lg);
  }
  #main.staad-collective .collective-close__media { order: -1; }
}

/* ============================================================
   STAAD Collective: ajuste fino de texto y beneficios
   ============================================================ */
/* Los parrafos habian quedado PEGADOS (margin 0) al soltar la rejilla de
   "pagina de pared": se les devuelve el aire entre uno y otro. */
#main.staad-collective .staad-page__content > p + p {
  margin-top: var(--space-sm);
}
#main.staad-collective .collective-close p + p {
  margin-top: var(--space-sm);
}

/* Las dos fotos se ESTIRAN a la altura de su columna de texto: antes la
   foto era mas alta que el texto (o al reves) y quedaba un hueco muerto.
   Con stretch + object-fit:cover las dos columnas terminan a la par. */
#main.staad-collective .collective-intro,
#main.staad-collective .collective-close {
  align-items: stretch;
}
#main.staad-collective .collective-intro__media,
#main.staad-collective .collective-close__media {
  align-self: stretch;
}
#main.staad-collective .collective-intro__media img,
#main.staad-collective .collective-close__media img {
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Beneficios: ahora viven dentro de la columna de texto del cierre, en dos
   columnas y con el icono mas discreto (antes iban a todo el ancho en 4). */
#main.staad-collective .collective-benefits {
  margin-top: var(--space-lg);
  padding-inline: 0;
}
#main.staad-collective .collective-benefits__title {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  text-shadow: none;
}
#main.staad-collective .collective-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px) clamp(18px, 2vw, 30px);
  margin-top: 0;
}
#main.staad-collective .collective-item__icon { margin-bottom: 8px; }
#main.staad-collective .collective-item__title {
  font-size: clamp(0.62rem, 0.6rem + 0.1vw, 0.68rem);
  margin-bottom: 5px;
}
#main.staad-collective .collective-item__text {
  font-size: clamp(0.64rem, 0.62rem + 0.1vw, 0.7rem);
  line-height: 1.6;
  text-align: left;
  hyphens: none;
}

@media (max-width: 860px) {
  /* Movil: la foto recupera su proporcion natural (sin estirar) */
  #main.staad-collective .collective-intro__media img,
  #main.staad-collective .collective-close__media img {
    height: auto;
    object-fit: fill;
  }
  #main.staad-collective .collective-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   REGLA DE MARCA: ninguna palabra partida con guion, en ningun
   sitio de la web. Se declara global (no solo pagina a pagina)
   para que cualquier bloque nuevo lo herede sin acordarse.
   `text-wrap: pretty` compensa: reparte mejor las ultimas lineas
   y evita palabras huerfanas, que es lo que de verdad se nota.
   ============================================================ */
body,
p, li, h1, h2, h3, h4, h5, h6,
.staad-page__content, .staad-page__lead,
.collective-item__text, .collective-close p,
.faq-item__a, .staad-acc__body {
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: break-word; /* solo si una palabra NO cabe (URLs largas) */
}
p, li, .staad-page__lead { text-wrap: pretty; }
h1, h2, h3, .staad-page__title, .staad-hero__title { text-wrap: balance; }

/* ============================================================
   Menos aire al ENTRAR a cualquier pagina
   El vacio de arriba no venia de un solo sitio, sino de tres que se
   sumaban: el respiro bajo la barra (ya reducido en header.css), el
   margen inferior de las migas y el del banner de tienda. Aqui se
   ajustan los dos ultimos.
   ============================================================ */
.staad-page__crumb,
.woocommerce-breadcrumb,
.woocommerce nav.woocommerce-breadcrumb {
  margin-bottom: var(--space-sm);
}
.shop-banner { margin-bottom: var(--space-md); }
.staad-page__head { margin-bottom: var(--space-md); }
/* La pagina de contenido tampoco necesita el respiro extra de arriba:
   ya lo pone el #main. */
.staad-page { padding-block: var(--space-sm) var(--space-2xl); }

/* ============================================================
   Collective: fotos STICKY de 100svh + beneficios con aire
   La foto ya no se estira a la altura del texto (quedaba larguisima):
   ocupa una pantalla y se queda fija mientras el texto pasa al lado.
   ============================================================ */
#main.staad-collective .collective-intro,
#main.staad-collective .collective-close {
  align-items: start;
}
#main.staad-collective .collective-intro__media,
#main.staad-collective .collective-close__media {
  align-self: start;
}
@media (min-width: 861px) {
  #main.staad-collective .collective-intro__media,
  #main.staad-collective .collective-close__media {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
  }
}
#main.staad-collective .collective-intro__media img,
#main.staad-collective .collective-close__media img {
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* El texto del cierre se separa del borde superior para no arrancar
   pegado a la barra */
#main.staad-collective .collective-close__text { padding-top: var(--space-lg); }

/* --- Beneficios: seccion propia, 4 columnas, con aire --- */
#main.staad-collective .collective-benefits {
  padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2));
  padding-block: clamp(56px, 9vh, 120px);
  margin-top: 0;
}
#main.staad-collective .collective-benefits__title {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid rgba(255, 255, 255, .22);
  text-shadow: none;
}
#main.staad-collective .collective-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 60px) clamp(26px, 3vw, 48px);
  margin-top: 0;
}
#main.staad-collective .collective-item__icon {
  margin-bottom: 12px;
  color: rgba(255, 255, 255, .66);
}
#main.staad-collective .collective-item__title {
  font-size: clamp(0.64rem, 0.61rem + 0.12vw, 0.72rem);
  letter-spacing: .1em;
  margin-bottom: 8px;
}
#main.staad-collective .collective-item__text {
  font-size: clamp(0.68rem, 0.65rem + 0.13vw, 0.76rem);
  line-height: 1.75;
  text-align: left;
  hyphens: none;
}

@media (max-width: 1100px) {
  #main.staad-collective .collective-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  #main.staad-collective .collective-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  /* Movil: la foto recupera su proporcion natural, sin sticky */
  #main.staad-collective .collective-intro__media,
  #main.staad-collective .collective-close__media { position: static; height: auto; }
  #main.staad-collective .collective-intro__media img,
  #main.staad-collective .collective-close__media img { height: auto; object-fit: fill; }
  #main.staad-collective .collective-close__text { padding-top: var(--space-md); }
}

/* ============================================================
   Servicios: entrada a dos columnas + texto al tamano del resto
   Los parrafos de entrada los envuelve staad_intro_dos_columnas()
   (inc/acf-fields.php) en .staad-intro-cols.
   ============================================================ */
.staad-page--wall .staad-page__content > .staad-intro-cols {
  grid-column: 1 / -1;
  columns: 2;
  column-gap: clamp(36px, 5vw, 88px);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}
.staad-page--wall .staad-intro-cols > p {
  break-inside: avoid;
  margin: 0;
  padding: 0;
  border: 0;
  max-width: none;
}
.staad-page--wall .staad-intro-cols > p + p { margin-top: var(--space-sm); }

/* Mismo cuerpo de letra que Nosotros / Collective / Showroom */
.staad-page--wall .staad-intro-cols > p,
.staad-page--wall .staad-page__content > p,
.staad-page--wall .staad-page__content > p:not(h3 ~ p) {
  font-size: clamp(0.7rem, 0.67rem + 0.14vw, 0.78rem);
  line-height: 1.8;
  text-align: justify;
  hyphens: none;
  text-wrap: pretty;
}
.staad-page--wall .staad-page__lead {
  font-size: clamp(0.76rem, 0.72rem + 0.16vw, 0.84rem);
}

@media (max-width: 860px) {
  .staad-page--wall .staad-page__content > .staad-intro-cols { columns: 1; }
}

/* ---------- Carrusel de piezas de cada coleccion ----------
   Mismas tarjetas que la tienda y mismo deslizamiento que el carrusel de
   productos relacionados (main.js le pone flechas y puntos). */
.col-block__products {
  --gap: clamp(28px, 4vw, 64px);
  display: flex !important;
  flex-wrap: nowrap;
  grid-template-columns: none !important;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.col-block__products::-webkit-scrollbar { display: none; }
.col-block__products li.product {
  flex: 0 0 calc((100% - 3 * var(--gap)) / 4);
  scroll-snap-align: start;
  margin: 0 !important;
  width: auto !important;
}
@media (max-width: 1100px) {
  .col-block__products li.product { flex-basis: calc((100% - 2 * var(--gap)) / 3); }
}
@media (max-width: 900px) {
  .col-block__products li.product { flex-basis: calc((100% - var(--gap)) / 2); }
}
@media (max-width: 560px) {
  .col-block__products li.product { flex-basis: 78%; }
}

/* El boton de WhatsApp no aparece en la portada: ahi la imagen de apertura
   manda y cualquier elemento flotante le quita fuerza. Sigue en el resto
   del sitio, que es donde de verdad se usa (fichas, colecciones, paginas). */
body.home .wa-float { display: none; }

/* ============================================================
   Pop-up de suscripcion al universo STAAD
   Formulario a la izquierda, foto a la derecha
   ============================================================ */
.staad-pop {
  position: fixed;
  inset: 0;
  z-index: 200;              /* por encima de paneles (100) y del WhatsApp (80) */
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 40px);
  opacity: 0;
  /* Sin esto la capa sigue tragandose los clics mientras se desvanece */
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out);
}
.staad-pop.is-open { opacity: 1; pointer-events: auto; }
/* CRITICO: el atributo hidden funciona poniendo display:none desde el
   navegador, y cualquier display del tema le gana. Con 'display: grid'
   arriba, cerrar el pop-up lo dejaba invisible pero ocupando la pantalla
   entera: nada del sitio se podia pulsar. */
.staad-pop[hidden] { display: none !important; }
.staad-pop__fondo {
  position: absolute;
  inset: 0;
  background: rgba(23, 23, 23, .55);
}
.staad-pop__caja {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;   /* mitad y mitad, como se pidio */
  width: min(980px, 100%);
  max-height: min(700px, 92svh);
  background: var(--c-bg);
  overflow: hidden;
  transform: translateY(12px) scale(.98);
  transition: transform var(--dur) var(--ease-out);
}
.staad-pop.is-open .staad-pop__caja { transform: none; }

.staad-pop__foto { overflow: hidden; }
.staad-pop__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.staad-pop__cuerpo {
  display: flex;
  align-items: center;
  padding: clamp(24px, 3.4vw, 46px);
  overflow-y: auto;
}
.staad-pop__cuerpo > div { width: 100%; }

.staad-pop__x {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(246, 244, 241, .9);
  border: 0;
  color: var(--c-ink);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.staad-pop__x:hover { background: var(--c-bg); }

.staad-pop__eyebrow {
  margin: 0 0 10px;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-taupe-txt, #6E665D);
}
.staad-pop__titulo {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.55rem, 1.1rem + 1.6vw, 2.35rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
/* La regla corta bajo el titular. Va como ::after y no como un <hr>: es
   puntuacion visual, no contenido, y asi no la lee un lector de pantalla. */
.staad-pop__titulo::after {
  content: "";
  display: block;
  width: 84px;
  height: 1px;
  margin: clamp(16px, 2vw, 26px) 0 clamp(14px, 1.8vw, 22px);
  background: var(--c-line);
}
.staad-pop__texto {
  margin: 0 0 var(--space-sm);
  max-width: 42ch;
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--c-ink-soft);
}

.staad-pop__label {
  display: block;
  margin: 0 0 8px;
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.staad-pop__campos label + input + label { margin-top: 4px; }
.staad-pop__input {
  width: 100%;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--c-line);
  background: transparent;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--c-ink);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.staad-pop__input:focus { outline: none; border-color: var(--c-ink); }

.staad-pop__error {
  margin: 0 0 12px;
  font-size: var(--fs-micro);
  color: var(--c-accent, #9B2C2C);
}

.staad-pop__enviar {
  width: 100%;
  padding: 15px 24px;
  border: 0;
  background: var(--c-ink);
  color: var(--c-white);
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.staad-pop__enviar:hover { opacity: .88; color: var(--c-white); }
.staad-pop__enviar:active { transform: translateY(1px); }
.staad-pop__enviar--link { display: block; }

/* El monograma entre dos filetes, cerrando la tarjeta. Los filetes son
   ::before/::after del propio parrafo: un solo elemento en el HTML. */
.staad-pop__sello {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: clamp(20px, 2.6vw, 30px) 0 clamp(14px, 1.8vw, 20px);
}
.staad-pop__sello::before,
.staad-pop__sello::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-line);
}
.staad-pop__sello img {
  display: block;
  width: 24px;
  height: auto;
  opacity: .8;
}
/* La despedida no es letra pequena de condiciones: es la firma de la marca.
   Va centrada y en la serif, como el titular. */
.staad-pop__nota {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  line-height: 1.7;
  text-align: center;
  text-wrap: balance;
  color: var(--c-ink-soft);
}

/* El codigo, protagonista del paso final */
/* Con el pop-up abierto no se hace scroll detras */
body.staad-pop-abierto { overflow: hidden; }

/* En movil la foto pasa arriba y ocupa una franja. El order la sube: en el
   HTML va despues del formulario —a proposito, para que en el escritorio
   quede a la derecha y para que un lector de pantalla no empiece por una
   imagen decorativa—, y aqui se recoloca. */
@media (max-width: 720px) {
  .staad-pop__caja {
    grid-template-columns: 1fr;
    /* La franja de foto se queda en 22svh: con mas, la despedida caia fuera
       de la tarjeta en un movil normal y habia que adivinar que estaba ahi
       abajo. La foto acompana; el formulario es a lo que se viene. */
    grid-template-rows: 22svh auto;
    max-height: 92svh;
  }
  .staad-pop__foto { order: -1; }
  .staad-pop__cuerpo { padding: var(--space-sm); }
  /* En una pantalla de movil la tarjeta entera no cabe holgada, y la
     despedida se quedaba cortada por abajo. Se recorta el aire, no el
     contenido: el titular baja un punto y los huecos se aprietan. */
  .staad-pop__titulo { font-size: clamp(1.35rem, 1.1rem + 1.6vw, 1.7rem); }
  .staad-pop__titulo::after { margin: 14px 0 12px; }
  .staad-pop__texto { margin-bottom: 18px; }
  .staad-pop__input { margin-bottom: 14px; }
  .staad-pop__sello { margin: 18px 0 12px; }
}

/* Moviles cortos (un Android de 740 px de alto, por ejemplo): ahi no basta
   con apretar, hay que dar un paso mas. Se sigue recortando aire y no
   contenido — la despedida cabe entera, que es lo que se pidio. */
@media (max-width: 720px) and (max-height: 780px) {
  .staad-pop__caja { grid-template-rows: 15svh auto; }
  .staad-pop__titulo::after { margin: 10px 0 9px; }
  .staad-pop__texto { margin-bottom: 13px; }
  .staad-pop__input { margin-bottom: 10px; padding: 11px 14px; }
  .staad-pop__sello { margin: 12px 0 9px; }
}

/* Sin movimiento para quien lo pide desactivado */
@media (prefers-reduced-motion: reduce) {
  .staad-pop, .staad-pop__caja { transition: none; }
  .staad-pop__caja { transform: none; }
}

/* La foto de Nosotros es VERTICAL: llena su columna a lo alto en vez de
   quedarse pequena como la apaisada. (Aqui hubo un espejo por CSS: era una
   mala lectura de "voltear la foto" — se retiro.) */
.staad-nosotros .staad-page__portrait img {
  width: 100%;
  height: auto;
  display: block;
}

/* Con el pie a la vista, el WhatsApp se aparta para no tapar los creditos.
   Se va hacia abajo en vez de desaparecer de golpe. */
.wa-float {
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
body.wa-oculto .wa-float {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}