/* LUM360 · recorridos para negocios · capa 2 de 4 · layout: base de página, contenedor, ritmo de secciones y marco del hero */

html:has(body.biz-experience) {
  overflow-x: clip;
  scroll-padding-top: calc(72px + 1rem);
}

@media (prefers-reduced-motion: reduce) {
  html:has(body.biz-experience) {
    scroll-behavior: auto;
  }
}

body.biz-experience {
  overflow-x: clip;
  color: var(--ws-ink);
  background: var(--ws-paper);
  font-family: var(--ws-font-body);
}

.biz-experience main {
  position: relative;
  z-index: var(--ws-z-base);
  display: block;
}

.biz-experience main *,
.biz-experience main *::before,
.biz-experience main *::after {
  box-sizing: border-box;
}

.biz-experience main :where(h1, h2, h3, h4) {
  min-width: 0;
  margin: 0;
  color: var(--ws-ink);
  font-family: var(--ws-font-display);
  font-weight: 500;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.biz-experience main :where(p, ul, ol, figure, fieldset, legend) {
  margin: 0;
  padding: 0;
}

.biz-experience main :where(ul, ol) {
  list-style: none;
}

.biz-experience main :where(fieldset) {
  min-width: 0;
  border: 0;
}

.biz-experience main :where(img, video, canvas, svg) {
  display: block;
  max-width: 100%;
}

.biz-experience main :where(button) {
  font: inherit;
}

.biz-experience .ws-shell {
  width: var(--ws-shell);
  max-width: 100%;
  margin-inline: auto;
}

.biz-experience .ws-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.biz-experience main :focus-visible,
.biz-experience .ws-dock :focus-visible {
  outline: 2px solid var(--ws-focus);
  outline-offset: 3px;
}

.biz-experience main ::selection {
  color: var(--ws-accent-ink);
  background: var(--ws-accent-fill, var(--ws-accent));
}

/* ==================================================================
   HERO
   Base estática: sin JS, movimiento reducido, sin WebGL o ahorro de datos.
   El hero mide lo que mide su contenido; la escena es una mejora encima.
   ================================================================== */

.biz-experience .ws-hero {
  position: relative;
  background: var(--ws-paper);
}

.biz-experience .ws-hero__stage {
  position: relative;
}

.biz-experience .ws-hero__frame {
  position: relative;
  z-index: var(--ws-z-stage-ui);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ws-space-xl);
  padding-block: calc(var(--ws-nav-h) + var(--ws-space-xl)) var(--ws-space-2xl);
}

.biz-experience .ws-hero__copy {
  display: grid;
  min-width: 0;
  gap: var(--ws-space-lg);
  align-content: start;
}

.biz-experience .ws-hero__copy h1 {
  max-width: 17ch;
  font-size: var(--ws-text-display);
  letter-spacing: -0.028em;
  line-height: 1.02;
}

.biz-experience .ws-hero__lead {
  max-width: 34rem;
  color: var(--ws-muted);
  font-size: var(--ws-text-md);
  line-height: 1.55;
}

.biz-experience .ws-hero__caption {
  display: grid;
  min-width: 0;
  gap: var(--ws-space-xs);
  align-content: start;
}

.biz-experience .ws-hero__foot {
  display: grid;
  min-width: 0;
  gap: var(--ws-space-md);
}

/* Sin escena no hay nada que saltar ni que pausar */
.biz-experience .ws-hero__cta,
.biz-experience .ws-stepper,
.biz-experience .ws-hero__tools,
.biz-experience .ws-stage--hero {
  display: none;
}

/* Sin escena el orden visual es: mensaje → etapas (pestañas) → maqueta → descripción de la etapa.
   Los únicos elementos enfocables están en el mensaje y en las pestañas, así que el orden de foco coincide. */
html:not([data-ws-hero="stage"]) .biz-experience .ws-hero__copy { order: 1; }
html:not([data-ws-hero="stage"]) .biz-experience .ws-hero__foot { order: 2; }
html:not([data-ws-hero="stage"]) .biz-experience .ws-story { order: 3; }
html:not([data-ws-hero="stage"]) .biz-experience .ws-hero__caption { order: 4; }

@media (min-width: 60rem) {
  html:not([data-ws-hero="stage"]) .biz-experience .ws-hero__frame {
    grid-template-columns: minmax(0, 33rem) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      "copy foot"
      "copy story"
      "copy caption";
    gap: var(--ws-space-lg) var(--ws-space-2xl);
    align-items: start;
  }

  html:not([data-ws-hero="stage"]) .biz-experience .ws-hero__copy { grid-area: copy; }
  html:not([data-ws-hero="stage"]) .biz-experience .ws-story { grid-area: story; }
  html:not([data-ws-hero="stage"]) .biz-experience .ws-hero__caption { grid-area: caption; }
  html:not([data-ws-hero="stage"]) .biz-experience .ws-hero__foot { grid-area: foot; }
}

/* ------------------------------------------------------------------
   Con escena. Lo activa el script de <head> antes del primer render, así
   que no hay salto de layout. Sección alta + escenario sticky; el progreso
   se calcula sobre longitudes constantes (svh/lvh) y la barra de direcciones
   del móvil no mueve nada.
   ------------------------------------------------------------------ */

html[data-ws-hero="stage"] .biz-experience .ws-hero {
  height: 300vh;
  height: 300svh;
}

html[data-ws-hero="stage"] .biz-experience .ws-hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100lvh;
  overflow: clip;
}

html[data-ws-hero="stage"] .biz-experience .ws-stage--hero {
  display: block;
}

html[data-ws-hero="stage"] .biz-experience .ws-story {
  display: none;
}

html[data-ws-hero="stage"] .biz-experience .ws-hero__frame {
  height: 100vh;
  height: 100svh;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "main"
    "foot";
  gap: var(--ws-space-sm);
  padding-block: calc(var(--ws-nav-h) + var(--ws-space-md)) var(--ws-space-md);
  pointer-events: none;
}

html[data-ws-hero="stage"] .biz-experience .ws-hero__frame > * {
  pointer-events: auto;
}

html[data-ws-hero="stage"] .biz-experience .ws-hero__copy,
html[data-ws-hero="stage"] .biz-experience .ws-hero__caption {
  grid-area: main;
}

html[data-ws-hero="stage"] .biz-experience .ws-hero__foot {
  position: relative;
  z-index: 1;
  grid-area: foot;
  display: flex;
  min-height: var(--ws-hit);
  align-items: center;
  gap: var(--ws-space-sm);
  /* la esquina inferior derecha es del asistente del sitio */
  padding-inline-end: 5.5rem;
}

html[data-ws-hero="stage"] .biz-experience .ws-hero__tools {
  display: flex;
}

html[data-ws-hero="stage"] .biz-experience .ws-stepper {
  display: flex;
}

html[data-ws-hero="stage"] .biz-experience .ws-acts {
  display: none;
}

/* Móvil: arriba el mensaje, en medio la obra, abajo (zona del pulgar) selector y CTA */
html[data-ws-hero="stage"] .biz-experience .ws-hero__copy {
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  gap: var(--ws-space-sm);
  transition:
    opacity var(--ws-dur-long) var(--ws-ease-out),
    transform var(--ws-dur-long) var(--ws-ease-out);
}

/* tres renglones en un teléfono: deja aire para la obra sin perder presencia */
html[data-ws-hero="stage"] .biz-experience .ws-hero__copy h1 {
  max-width: none;
  font-size: clamp(1.75rem, 7.7vw, 2.7rem);
}

html[data-ws-hero="stage"] .biz-experience .ws-hero__lead {
  font-size: var(--ws-text-base);
  line-height: 1.5;
}

/* Respaldo del bloque inferior: el selector y los botones se leen aunque la obra pase por detrás */
html[data-ws-hero="stage"] .biz-experience .ws-hero__copy {
  isolation: isolate;
}

html[data-ws-hero="stage"] .biz-experience .ws-hero__copy > *,
html[data-ws-hero="stage"] .biz-experience .ws-hero__copy::before {
  grid-column: 1;
}

html[data-ws-hero="stage"] .biz-experience .ws-hero__copy::before {
  content: "";
  z-index: -1;
  grid-row: 5 / 7;
  margin: calc(var(--ws-space-xl) * -1) -1.5rem calc(var(--ws-space-2xl) * -1);
  background: linear-gradient(to top, var(--ws-scrim) 0, var(--ws-scrim) 72%, var(--ws-scrim-none) 100%);
  pointer-events: none;
}

html[data-ws-hero="stage"] .biz-experience .ws-hero__copy .ws-persona {
  grid-row: 5;
  align-self: end;
}

html[data-ws-hero="stage"] .biz-experience .ws-hero__copy .ws-actions {
  grid-row: 6;
}

html[data-ws-hero="stage"] .biz-experience .ws-hero__caption {
  align-self: start;
  opacity: 0;
  transform: translate3d(0, 0.75rem, 0);
  visibility: hidden;
  transition:
    opacity var(--ws-dur-long) var(--ws-ease-out),
    transform var(--ws-dur-long) var(--ws-ease-out),
    visibility 0s linear var(--ws-dur-long);
}

html[data-ws-hero="stage"] .biz-experience .ws-hero:not([data-phase="intro"]) .ws-hero__copy {
  opacity: 0;
  transform: translate3d(0, -0.75rem, 0);
  pointer-events: none;
}

/* El teclado nunca enfoca algo invisible: si el foco entra al copy replegado, vuelve a verse */
html[data-ws-hero="stage"] .biz-experience .ws-hero:not([data-phase="intro"]) .ws-hero__copy:focus-within {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

html[data-ws-hero="stage"] .biz-experience .ws-hero:not([data-phase="intro"]) .ws-hero__caption {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

html[data-ws-hero="stage"] .biz-experience .ws-hero:not([data-phase="intro"]) .ws-hero__copy:focus-within + .ws-hero__caption {
  opacity: 0;
}

/* En la intro el CTA vive en el copy; después, en el muelle fijo (móvil) o bajo el rótulo (desktop) */
html[data-ws-hero="stage"] .biz-experience .ws-hero:not([data-phase="intro"]) .ws-hero__frame {
  padding-bottom: calc(var(--ws-hit) + var(--ws-space-lg) + var(--ws-space-sm));
}

/* ------------------------------------------------------------------
   Pantallas bajas. El alto útil de un teléfono con las barras del navegador
   ronda 620–760 px. En el primer pantallazo siempre caben el H1, los dos
   botones y el selector de giro; lo demás cede en orden y sigue en el DOM.
   ------------------------------------------------------------------ */

/* < 760 px de alto: el párrafo se compacta y el enlace secundario cede (la regla de etapas y el scroll llevan ahí) */
@media (max-width: 59.999rem) and (max-height: 47.5rem) {
  html[data-ws-hero="stage"] .biz-experience .ws-hero__lead {
    font-size: 0.9375rem;
    line-height: 1.45;
  }

  html[data-ws-hero="stage"] .biz-experience .ws-hero__copy .ws-link {
    display: none;
  }
}

/* < 620 px de alto: el párrafo cede su lugar a la obra */
@media (max-width: 59.999rem) and (max-height: 38.75rem) {
  html[data-ws-hero="stage"] .biz-experience .ws-hero__lead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

/* Teléfono en horizontal: dos columnas. Mensaje y botones a la izquierda, selector abajo a la derecha, la obra detrás */
@media (max-width: 59.999rem) and (orientation: landscape) and (max-height: 31.25rem) {
  html[data-ws-hero="stage"] .biz-experience .ws-hero__frame {
    gap: var(--ws-space-xs);
    padding-block: calc(var(--ws-nav-h) + var(--ws-space-xs)) var(--ws-space-xs);
  }

  html[data-ws-hero="stage"] .biz-experience .ws-hero__copy {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: var(--ws-space-lg);
  }

  html[data-ws-hero="stage"] .biz-experience .ws-hero__copy::before {
    display: none;
  }

  html[data-ws-hero="stage"] .biz-experience .ws-hero__copy .ws-kicker,
  html[data-ws-hero="stage"] .biz-experience .ws-hero__copy .ws-persona__note {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  html[data-ws-hero="stage"] .biz-experience .ws-hero__copy h1 {
    grid-row: 1;
    font-size: clamp(1.45rem, 3.5vw, 2rem);
  }

  html[data-ws-hero="stage"] .biz-experience .ws-hero__copy .ws-actions {
    grid-row: 2;
    align-self: start;
  }

  html[data-ws-hero="stage"] .biz-experience .ws-hero__copy .ws-persona {
    grid-row: 1 / 3;
    grid-column: 2;
    align-self: end;
  }

  html[data-ws-hero="stage"] .biz-experience .ws-hero__caption {
    max-width: 48%;
  }

  html[data-ws-hero="stage"] .biz-experience .ws-hero__act-name {
    font-size: 2.1rem;
  }

  html[data-ws-hero="stage"] .biz-experience .ws-hero__statement {
    max-width: 20ch;
    font-size: 1.7rem;
  }

  /* con tan poco alto, el muelle fijo y los controles comparten la última fila */
  html[data-ws-hero="stage"] .biz-experience .ws-hero:not([data-phase="intro"]) .ws-hero__frame {
    padding-bottom: var(--ws-space-md);
  }

  html[data-ws-hero="stage"] .biz-experience .ws-hero:not([data-phase="intro"]) .ws-hero__foot {
    padding-inline-start: 16.5rem;
  }
}

/* Teléfono en vertical: durante la portada las cotas no compiten con el texto; aparecen al empezar el recorrido */
@media (max-width: 59.999rem) and (orientation: portrait) {
  html[data-ws-hero="stage"] .biz-experience .ws-stage--hero .ws-stage__labels {
    transition: opacity var(--ws-dur-long) var(--ws-ease-out);
  }

  html[data-ws-hero="stage"] .biz-experience .ws-hero[data-phase="intro"] .ws-stage--hero .ws-stage__labels {
    opacity: 0;
  }
}

/* Teléfonos de hasta 400 px: los controles caben a la izquierda del asistente del sitio.
   El enlace conserva su nombre completo para lectores de pantalla. */
@media (max-width: 25rem) {
  html[data-ws-hero="stage"] .biz-experience .ws-hero__foot,
  html[data-ws-hero="stage"] .biz-experience .ws-hero__tools {
    gap: var(--ws-space-xs);
  }

  html[data-ws-hero="stage"] .biz-experience .ws-skip__rest {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Teléfonos angostos (≤ 360 px): los dos botones caben en una fila */
@media (max-width: 22.5rem) {
  .biz-experience .ws-hero__copy .ws-actions {
    gap: var(--ws-space-xs);
  }

  .biz-experience .ws-hero__copy .ws-actions .web-service-button,
  .biz-experience .ws-dock .web-service-button--primary {
    padding-inline: 0.75rem;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
  }

  .biz-experience .ws-hero__copy .ws-actions .web-service-button {
    flex: 1 1 auto;
  }

  /* el muelle se arrima al borde: no toca al asistente ni a 320 px */
  html.ws-js .biz-experience .ws-dock {
    left: max(var(--ws-space-sm), env(safe-area-inset-left));
  }
}

@media (min-width: 60rem) {
  html[data-ws-hero="stage"] .biz-experience .ws-hero {
    height: 400vh;
  }

  html[data-ws-hero="stage"] .biz-experience .ws-hero__stage {
    height: 100vh;
  }

  html[data-ws-hero="stage"] .biz-experience .ws-hero__frame {
    height: 100vh;
    grid-template-columns: minmax(0, 33rem) minmax(0, 1fr);
    grid-template-areas:
      "main ."
      "foot foot";
    padding-block: calc(var(--ws-nav-h) + var(--ws-space-lg)) var(--ws-space-lg);
  }

  html[data-ws-hero="stage"] .biz-experience .ws-hero:not([data-phase="intro"]) .ws-hero__frame {
    padding-bottom: var(--ws-space-lg);
  }

  html[data-ws-hero="stage"] .biz-experience .ws-hero__copy {
    grid-template-rows: none;
    gap: var(--ws-space-lg);
    align-content: center;
  }

  /* en escritorio la obra queda a la derecha del texto: no hace falta respaldo */
  html[data-ws-hero="stage"] .biz-experience .ws-hero__copy::before {
    display: none;
  }

  html[data-ws-hero="stage"] .biz-experience .ws-hero__copy h1 {
    font-size: var(--ws-text-display);
  }

  html[data-ws-hero="stage"] .biz-experience .ws-hero__lead {
    font-size: var(--ws-text-md);
    line-height: 1.55;
  }

  html[data-ws-hero="stage"] .biz-experience .ws-hero__copy .ws-persona,
  html[data-ws-hero="stage"] .biz-experience .ws-hero__copy .ws-actions {
    grid-row: auto;
    align-self: auto;
  }

  html[data-ws-hero="stage"] .biz-experience .ws-hero__caption {
    align-self: center;
  }

  html[data-ws-hero="stage"] .biz-experience .ws-hero__cta {
    display: flex;
  }

  html[data-ws-hero="stage"] .biz-experience .ws-acts {
    display: grid;
  }

  html[data-ws-hero="stage"] .biz-experience .ws-stepper {
    display: none;
  }

  html[data-ws-hero="stage"] .biz-experience .ws-hero__foot {
    align-items: end;
    gap: var(--ws-space-lg);
    /* el borde derecho de la regla nunca queda bajo el asistente del sitio */
    padding-inline-end: clamp(0px, (86rem - 100vw) / 2, 4.5rem);
  }
}

/* Escritorio bajo (1024×768, laptops con zoom): se aprieta el copy antes de recortar nada */
@media (min-width: 60rem) and (max-height: 50rem) {
  html[data-ws-hero="stage"] .biz-experience .ws-hero__copy {
    gap: var(--ws-space-md);
  }

  html[data-ws-hero="stage"] .biz-experience .ws-hero__copy h1 {
    font-size: clamp(2.2rem, 3vw + 1rem, 3.2rem);
  }

  html[data-ws-hero="stage"] .biz-experience .ws-hero__lead {
    font-size: var(--ws-text-base);
  }
}

@media (prefers-reduced-motion: reduce) {
  .biz-experience .ws-hero__copy,
  .biz-experience .ws-hero__caption {
    transition-duration: 0.01ms !important;
  }
}

/* El asistente del sitio (componente compartido) muestra un aviso emergente abajo a la derecha, 4.5 s
   después de cargar y durante 14 s. En pantallas angostas cae justo encima de «Solicitar proyecto» y
   WhatsApp del hero, y después sobre los controles de etapa. Mientras el hero está en pantalla
   (sections/hero.js mantiene data-ws-hero-view) se oculta solo ese aviso; el botón del asistente sigue
   igual, y el aviso vuelve a verse al pasar a la sección siguiente si su tiempo no terminó.
   Para volver al comportamiento general del sitio basta quitar esta regla. */
@media (max-width: 59.999rem) {
  html[data-ws-hero-view="in"] .biz-experience #lum360-assistant .lum-as-teaser {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
}

/* ==================================================================
   SECCIONES
   Una lámina por sección: papel, margen de página y un encabezado.
   Las que no llevan escena se calculan hasta que el visitante se acerca.
   ================================================================== */

.biz-experience .ws-section {
  position: relative;
  padding-block: clamp(4.5rem, 8vw, 8rem);
  background: var(--ws-paper);
}

.biz-experience .ws-section--tint {
  background: var(--ws-paper-2);
}

/* Sin content-visibility en esta página: GSAP mide la posición de cada sección y una sección omitida cambia de alto al dibujarse, lo que desplaza los puntos de disparo (el pin de «abierto 24 horas» empezaba 2400 px antes). */

.biz-experience .ws-head {
  display: grid;
  min-width: 0;
  max-width: 44rem;
  gap: var(--ws-space-md);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.biz-experience .ws-head h2,
.biz-experience .ws-brief__copy h2,
.biz-experience .ws-final__copy h2 {
  font-size: var(--ws-text-2xl);
  letter-spacing: -0.022em;
  line-height: 1.04;
}

.biz-experience .ws-head p {
  max-width: 38rem;
  color: var(--ws-muted);
  font-size: var(--ws-text-md);
  line-height: 1.6;
}

.biz-experience .ws-head > div {
  display: grid;
  min-width: 0;
  gap: var(--ws-space-md);
  align-content: start;
}

@media (min-width: 60rem) {
  .biz-experience .ws-head--split {
    max-width: none;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: var(--ws-space-2xl);
    align-items: end;
  }
}


/* ---------- Proceso ---------- */

.biz-experience .ws-process__track {
  position: relative;
}

.biz-experience .ws-process__steps {
  position: relative;
  display: grid;
  gap: var(--ws-space-xl);
}

.biz-experience .ws-process__steps li {
  position: relative;
  display: grid;
  min-width: 0;
  gap: var(--ws-space-xs);
  align-content: start;
  padding-inline-start: 3.25rem;
}

.biz-experience .ws-process__n {
  position: absolute;
  top: 0.2rem;
  left: 0;
}

@media (min-width: 60rem) {
  .biz-experience .ws-process__steps {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--ws-space-lg);
    padding-bottom: var(--ws-space-md);
  }

  /* el hilo baja un escalón por etapa: de la investigación al lanzamiento */
  .biz-experience .ws-process__steps li {
    padding-inline-start: 0;
    padding-top: 3.25rem;
  }

  .biz-experience .ws-process__steps li:nth-child(2) { margin-top: 1.75rem; }
  .biz-experience .ws-process__steps li:nth-child(3) { margin-top: 3.5rem; }
  .biz-experience .ws-process__steps li:nth-child(4) { margin-top: 5.25rem; }
  .biz-experience .ws-process__steps li:nth-child(5) { margin-top: 7rem; }
  .biz-experience .ws-process__steps li:nth-child(6) { margin-top: 8.75rem; }

  .biz-experience .ws-process__n {
    top: 0;
  }
}

/* ---------- Recorrido del visitante ---------- */

.biz-experience .ws-journey__figure {
  display: grid;
  min-width: 0;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--ws-space-md) var(--ws-space-lg);
}

.biz-experience .ws-journey__figure .ws-stage {
  grid-row: 1;
  grid-column: 1;
}

.biz-experience .ws-journey__steps {
  display: grid;
  min-width: 0;
  grid-row: 1;
  grid-column: 2;
  grid-template-rows: repeat(4, minmax(7.5rem, 1fr));
}

.biz-experience .ws-journey__figure figcaption {
  grid-column: 1 / -1;
}

@media (min-width: 60rem) {
  .biz-experience .ws-journey__figure {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ws-space-lg);
  }

  .biz-experience .ws-journey__figure .ws-stage {
    grid-column: 1;
  }

  /* cuatro columnas alineadas con las cuatro etapas del flujo (la primera franja es la entrada) */
  .biz-experience .ws-journey__steps {
    grid-row: 2;
    grid-column: 1;
    grid-template-rows: none;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--ws-space-lg);
    padding-inline-start: 20%;
  }
}

/* ---------- Preguntas ---------- */

.biz-experience .ws-faq__grid {
  display: grid;
  min-width: 0;
  gap: var(--ws-space-md);
}

@media (min-width: 60rem) {
  .biz-experience .ws-faq__grid {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--ws-space-2xl);
    align-items: start;
  }

  .biz-experience .ws-faq .ws-head {
    position: sticky;
    top: calc(var(--ws-nav-h) + var(--ws-space-lg));
    margin-bottom: 0;
  }
}

/* ---------- Cierre ---------- */

.biz-experience .ws-final__grid {
  display: grid;
  min-width: 0;
  gap: var(--ws-space-xl);
}

.biz-experience .ws-final__copy {
  display: grid;
  min-width: 0;
  max-width: 40rem;
  gap: var(--ws-space-md);
  justify-items: start;
}

@media (min-width: 60rem) {
  .biz-experience .ws-final__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: var(--ws-space-2xl);
    align-items: center;
  }
}

/* ==================================================================
   SECCIONES DE ESTA PÁGINA
   ================================================================== */

/* ---------- El comprador a distancia ---------- */

.biz-experience .ws-gap .ws-head > div {
  gap: var(--ws-space-md);
}

/* ---------- Pregúntale a la propiedad ---------- */

.biz-experience .ws-tours__work {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ws-space-lg);
}

.biz-experience .ws-tours__panels {
  min-width: 0;
}

@media (min-width: 60rem) {
  .biz-experience .ws-tours__work {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas:
      "tabs tabs"
      "pano panels";
    gap: var(--ws-space-lg) var(--ws-space-2xl);
    align-items: start;
  }

  .biz-experience .ws-tours__tabs { grid-area: tabs; }
  .biz-experience .ws-pano { grid-area: pano; }
  .biz-experience .ws-tours__panels { grid-area: panels; padding-top: var(--ws-space-sm); }
}

/* ---------- Perfiles ---------- */

.biz-experience .ws-profiles__work {
  display: grid;
  min-width: 0;
  gap: var(--ws-space-lg);
}

.biz-experience .ws-profiles__panels {
  min-width: 0;
}

/* Sin JS no hay pestañas: los cuatro perfiles se leen uno tras otro a todo el ancho */
html:not(.ws-js) .biz-experience .ws-profiles__work {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 60rem) {
  .biz-experience .ws-profiles__work {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--ws-space-2xl);
    align-items: start;
  }
}

/* ---------- Recorridos reales ---------- */

.biz-experience .ws-showcase__panels {
  min-width: 0;
}

.biz-experience .ws-tour {
  display: grid;
  min-width: 0;
  gap: var(--ws-space-lg);
  margin-top: var(--ws-space-xl);
}

.biz-experience .ws-tour[hidden] {
  display: none;
}

.biz-experience .ws-showcase__cta {
  display: grid;
  min-width: 0;
  gap: var(--ws-space-md);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: var(--ws-space-lg);
  border-top: var(--ws-hairline) solid var(--ws-rule);
}

@media (min-width: 60rem) {
  .biz-experience .ws-tour {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--ws-space-2xl);
    align-items: center;
  }

  .biz-experience .ws-showcase__cta {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

/* ---------- Un activo tuyo ---------- */

.biz-experience .ws-own__note {
  display: grid;
  min-width: 0;
  max-width: 44rem;
  gap: var(--ws-space-xs);
  margin-top: var(--ws-space-lg);
  justify-items: start;
}

/* ---------- Recursos ---------- */

.biz-experience .ws-resources__list {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ws-space-md);
}

@media (min-width: 48rem) {
  .biz-experience .ws-resources__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ws-space-lg);
  }
}

/* ==================================================================
   SECCIONES DE ESTA PÁGINA
   ================================================================== */

.biz-experience .biz-reasons {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ws-space-md);
  perspective: 1200px;
}

@media (min-width: 40rem) {
  .biz-experience .biz-reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ws-space-lg); }
}

@media (min-width: 72rem) {
  .biz-experience .biz-reasons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Abierto las 24 horas */
.biz-experience .biz-open__stage {
  display: grid;
  min-width: 0;
  gap: var(--ws-space-lg);
}

@media (min-width: 60rem) {
  .biz-experience .biz-open__stage {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--ws-space-2xl);
    align-items: center;
  }
}

/* Giros */
.biz-experience .biz-giros__work,
.biz-experience .biz-features__work {
  display: grid;
  min-width: 0;
  gap: var(--ws-space-lg);
}

.biz-experience .biz-giros__panels,
.biz-experience .biz-features__panels,
.biz-experience .biz-features__stage {
  min-width: 0;
}

@media (min-width: 60rem) {
  .biz-experience .biz-giros__work {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: var(--ws-space-2xl);
    align-items: start;
  }

  .biz-experience .biz-features__work {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-template-areas:
      "tabs stage"
      "tabs panels";
    column-gap: var(--ws-space-2xl);
    align-items: start;
  }

  .biz-experience .biz-features__work > [role="tablist"] { grid-area: tabs; }
  .biz-experience .biz-features__stage { grid-area: stage; }
  .biz-experience .biz-features__panels { grid-area: panels; padding-top: var(--ws-space-md); }
}

html:not(.ws-js) .biz-experience .biz-giros__work,
html:not(.ws-js) .biz-experience .biz-features__work {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: none;
}

/* Caso */
.biz-experience .biz-case__grid {
  display: grid;
  min-width: 0;
  gap: var(--ws-space-lg);
}

@media (min-width: 60rem) {
  .biz-experience .biz-case__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: var(--ws-space-2xl);
    align-items: center;
  }

  .biz-experience .biz-case__grid .ws-head { margin-bottom: 0; }
}

/* Tour de un negocio dentro de las pestañas */
.biz-experience .ws-tour { display: grid; min-width: 0; gap: var(--ws-space-lg); margin-top: var(--ws-space-xl); }
.biz-experience .ws-tour[hidden] { display: none; }
.biz-experience .ws-showcase__panels { min-width: 0; }
.biz-experience .ws-showcase__cta { display: grid; min-width: 0; gap: var(--ws-space-md); margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: var(--ws-space-lg); border-top: var(--ws-hairline) solid var(--ws-rule); }

@media (min-width: 60rem) {
  .biz-experience .ws-tour { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--ws-space-2xl); align-items: center; }
  .biz-experience .ws-showcase__cta { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}

.biz-experience .ws-own__note { display: grid; min-width: 0; max-width: 44rem; gap: var(--ws-space-xs); margin-top: var(--ws-space-lg); justify-items: start; }
.biz-experience .ws-resources__list { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); gap: var(--ws-space-md); }

@media (min-width: 48rem) {
  .biz-experience .ws-resources__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ws-space-lg); }
}

html:not(.ws-js) .biz-experience .biz-giros__panels .ws-panel + .ws-panel { margin-top: var(--ws-space-xl); }