/* ============================================================================
   Voice Booking IA · Motion (CSS)
   Solo lo que el movimiento necesita. El diseño vive en la propia landing.

   Nada de aquí esconde contenido por defecto: los estados iniciales los pone
   GSAP en línea, y solo si `html.motion-on` existe (es decir, si el JS corrió
   y no hay movimiento reducido). Sin JS la página se ve entera.
   ========================================================================= */

/* ============================================================================
   ESCENAS DE PRODUCTO · «Así funciona por dentro»
   Cada funcionalidad es una escena con su marco de aplicación y su demo.
   El mockup manda: 60 % de la fila. Alternan lado; en móvil, captura arriba.
   ========================================================================= */
#porque .app-paso {
  grid-template-columns: 1.5fr 1fr;      /* 60 / 40 */
  gap: 64px; align-items: center;
  padding: 92px 0; min-height: 700px;
  border-top: 1px solid var(--line, #e7ded1);
}
#porque .app-paso:first-of-type { border-top: none; padding-top: 24px; min-height: 0; }
#porque .app-paso .app-txt { max-width: 42ch; }

/* La cabecera arranca en el eje izquierdo de la página —el mismo del logo y
   del titular del héroe—, no centrada: así la sección entera (cabecera,
   mockup y carril) cae sobre una única línea vertical. */
#porque .sec-head { max-width: 780px; margin-left: 0; margin-right: 0; text-align: left;
                    margin-bottom: 30px; }

/* El orden lo fija esta hoja, no el `order` de la página: si conviven, el texto
   acaba en la columna ancha y el mockup en la estrecha, justo al revés.
   Y NO se usa :nth-child, porque cuenta también la cabecera de sección y deja
   impares y pares cambiados respecto a las escenas. Se ancla a cada escena. */
#porque .app-paso[data-escena="inicio"],
#porque .app-paso[data-escena="mesas"],
#porque .app-paso[data-escena="recados"],
#porque .app-paso[data-escena="ia"]        { grid-template-columns: 1.5fr 1fr; }
#porque .app-paso[data-escena="inicio"]  .app-txt,
#porque .app-paso[data-escena="mesas"]   .app-txt,
#porque .app-paso[data-escena="recados"] .app-txt,
#porque .app-paso[data-escena="ia"]      .app-txt   { order: 2; }
#porque .app-paso[data-escena="inicio"]  .app-marco,
#porque .app-paso[data-escena="mesas"]   .app-marco,
#porque .app-paso[data-escena="recados"] .app-marco,
#porque .app-paso[data-escena="ia"]      .app-marco { order: 1; }

#porque .app-paso[data-escena="reservas"],
#porque .app-paso[data-escena="llamadas"],
#porque .app-paso[data-escena="ajustes"],
#porque .app-paso[data-escena="soporte"]   { grid-template-columns: 1fr 1.5fr; }
#porque .app-paso[data-escena="reservas"] .app-txt,
#porque .app-paso[data-escena="llamadas"] .app-txt,
#porque .app-paso[data-escena="ajustes"]  .app-txt,
#porque .app-paso[data-escena="soporte"]  .app-txt   { order: 1; }
#porque .app-paso[data-escena="reservas"] .app-marco,
#porque .app-paso[data-escena="llamadas"] .app-marco,
#porque .app-paso[data-escena="ajustes"]  .app-marco,
#porque .app-paso[data-escena="soporte"]  .app-marco { order: 2; }

/* Los items de un grid llevan min-width:auto: con una imagen ancha dentro,
   el mockup se salía de su columna y se comía el texto de al lado. */
#porque .app-paso > * { min-width: 0; }

/* El bloque de texto, con el mismo tratamiento que «El viaje de una llamada»:
   filete vertical a la izquierda y el número en recuadro sólido. */
#porque .app-txt {
  padding-left: 26px;
  border-left: 2px solid var(--terra, #D9603B);
}
#porque .app-n {
  display: inline-flex; align-items: center; gap: 9px;
  margin-bottom: 14px;
}
#porque .app-n b {
  display: inline-block; padding: 3px 9px; border-radius: 6px;
  background: var(--terra-d, #bd4d2b); color: #fff;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 13px;
  -webkit-text-stroke: 0;                 /* el outline anterior, fuera */
  letter-spacing: .02em; line-height: 1.5;
}
#porque .app-txt h3 { font-size: clamp(24px, 2.7vw, 32px); margin-bottom: 14px; }
#porque .app-txt p { font-size: 16.5px; line-height: 1.62; }
#porque .app-txt .app-tip {
  border-left: 2px solid var(--terra, #D9603B);
  padding-left: 14px; margin-top: 18px; font-size: 15.5px;
}
@media (max-width: 920px) {
  #porque .app-txt { padding-left: 18px; }
}

/* marco tipo aplicación: envuelve la figura, no va dentro,
   para no desplazar las coordenadas en % de los overlays */
.app-marco {
  min-width: 0; max-width: 100%;
  border-radius: 16px; overflow: hidden; background: #fff;
  border: 1px solid rgba(21,17,13,.12);
  box-shadow: 0 34px 80px rgba(18,53,40,.18), 0 3px 10px rgba(21,17,13,.05);
}
.app-barra {
  display: flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 14px;
  background: #F2EDE4; border-bottom: 1px solid rgba(21,17,13,.07);
}
.app-barra i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.app-barra i:nth-child(1) { background: #E0705A; }
.app-barra i:nth-child(2) { background: #E3B357; }
.app-barra i:nth-child(3) { background: #7FB08A; }
.app-barra span {
  margin-left: 10px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: #8b8073; font-weight: 600;
}
#porque .app-shot { border: none; border-radius: 0; box-shadow: none; margin: 0; }
#porque .app-shot img { border-radius: 0; }

/* Aquí había un margen negativo para que el mockup mordiera el margen del wrap.
   Fuera: el contenido de la página entera comparte un único eje izquierdo y
   sacar de él la captura se veía descuadrado. El ancho lo da el contenedor. */
@media (max-width: 920px) {
  /* en móvil no se alterna: captura arriba, texto debajo, siempre */
  #porque .app-paso, #porque .app-paso:nth-child(even) { grid-template-columns: 1fr; gap: 22px; padding: 46px 0; min-height: 0; }
  #porque .app-paso .app-marco { margin: 0; order: -1; }
  #porque .app-paso .app-txt { order: 1; max-width: none; }
  .app-barra { height: 30px; }
  .app-barra span { font-size: 9.5px; }
}

/* La figura solo tiene que llenar el marco. El ancho, la alternancia y el
   margen negativo los gobierna el bloque de ESCENAS de arriba, sobre
   `.app-marco`. Aquí había reglas antiguas que aplicaban ese margen a la
   `.app-shot`: la sacaban fuera del marco —que recorta— y dejaban el mockup
   cortado con un hueco blanco en las escenas pares a partir de 1240 px. */
#porque .app-shot { width: 100%; justify-self: stretch; margin: 0; }

/* ---------- microinteracciones (CSS puro, sin JS) ---------- */
.btn { transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s, background-color .22s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.97); }

.feat, .plan, .app-shot, .ds-foto { transition: transform .26s cubic-bezier(.2,.7,.2,1), box-shadow .26s; }
.feat:hover, .plan:hover { transform: translateY(-4px); }

.app-shot { will-change: transform; }
.app-shot:hover { transform: translateY(-3px) scale(1.006); }

/* enlaces con subrayado que crece */
.app-txt a:not(.btn), .ds-txt a:not(.btn) {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1.5px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .3s cubic-bezier(.2,.7,.2,1);
}
.app-txt a:not(.btn):hover, .ds-txt a:not(.btn):hover { background-size: 100% 1.5px; }

/* ---------- cabecera al hacer scroll ---------- */
nav { transition: padding .28s ease, background-color .28s ease, box-shadow .28s ease; }
nav.nav-compacto {
  background: rgba(251,248,243,.88);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  box-shadow: 0 1px 0 rgba(21,17,13,.06);
}
nav.nav-compacto .nav-in { height: 62px; }

/* ---------- capa de demo sobre las capturas ---------- */
/* El contenedor de la captura pasa a ser el sistema de coordenadas.
   Ojo: nada de overflow:hidden aquí, o las tarjetas flotantes se cortan. */
.demo-capa { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.demo-capa > * { position: absolute; }

/* La capa escala CON la captura, no con el viewport.
   La captura es de 1440 px de ancho y se pinta a ~690: una tarjeta con texto
   de 13px encima se ve como un cartel pegado y rompe la ilusión de interfaz.
   Con unidades de contenedor el overlay conserva la proporción del panel. */
.app-shot, .ds-foto, [data-shot] { container-type: inline-size; }
/* La declaración base de .demo-card va más abajo en este mismo fichero, así que
   estos overrides necesitan más especificidad para ganarle. */
.demo-capa { font-size: max(8px, 1.25cqw); }
/* Blindaje: la landing ya tiene SU propia `.demo-card` (la tarjeta grande de
   la sección de la demo, en columna y centrada) y su hoja inline se carga
   después que esta. Sin esto, el overlay heredaba `flex-direction:column` y
   `text-align:center` y se rompía. Se fija aquí, para el sistema entero, en
   vez de parchearlo con estilos en línea en cada demo. */
.demo-capa .demo-card {
  font-size: 1em; padding: .8em 1em; border-radius: .85em; gap: .65em;
  flex-direction: row; align-items: center; text-align: left;
  width: auto; max-width: none; box-shadow: 0 .8em 2.2em rgba(21,17,13,.13);
}
.demo-capa .demo-card .sub { font-size: .92em; }
.demo-capa .demo-drop { font-size: .95em; padding: .38em; border-radius: .75em; min-width: 11em; }
.demo-capa .demo-drop span { padding: .5em .72em; border-radius: .5em; }
.demo-capa .demo-wave { height: 1.2em; gap: .19em; }
.demo-capa .demo-wave i { width: .19em; }
.demo-capa .status-dot { width: .6em; height: .6em; }
.demo-capa .demo-cursor { width: 1.7em; height: 1.7em; }
.demo-capa .demo-click { width: 2.6em; height: 2.6em; margin: -1.3em 0 0 -1.3em; }

/* cursor simulado */
.demo-cursor {
  width: 22px; height: 22px; margin: -3px 0 0 -3px; z-index: 6;
  opacity: 0; pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(21,17,13,.35));
}
.demo-cursor svg { display: block; width: 100%; height: 100%; }

/* onda de click */
.demo-click {
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 2px solid var(--terra, #D9603B); opacity: 0; z-index: 5;
}

/* tarjeta flotante tipo interfaz */
.demo-card {
  background: #fff; border: 1px solid rgba(21,17,13,.10); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(21,17,13,.10), 0 2px 6px rgba(21,17,13,.05);
  padding: 11px 14px; font-size: 13.5px; line-height: 1.35; color: var(--ink, #15110D);
  display: flex; align-items: center; gap: 9px; white-space: nowrap; z-index: 4;
}
.demo-card b { font-weight: 600; }
.demo-card .sub { color: var(--mut, #6e6457); font-size: 12.5px; }
.demo-card .ok { color: #2F8F57; font-weight: 700; }

/* punto de estado */
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #2F8F57; flex: none; }
.status-dot.calling { background: var(--terra, #D9603B); }

/* onda de voz: barras, sin canvas */
.demo-wave { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 16px; }
.demo-wave i {
  display: block; width: 2.5px; height: 100%; border-radius: 2px;
  background: var(--terra, #D9603B); transform: scaleY(.3); transform-origin: bottom;
}
html.motion-on .demo-wave.sonando i { animation: vbWave .9s ease-in-out infinite; }
.demo-wave i:nth-child(2){animation-delay:.09s} .demo-wave i:nth-child(3){animation-delay:.18s}
.demo-wave i:nth-child(4){animation-delay:.05s} .demo-wave i:nth-child(5){animation-delay:.23s}
.demo-wave i:nth-child(6){animation-delay:.13s} .demo-wave i:nth-child(7){animation-delay:.3s}
.demo-wave i:nth-child(8){animation-delay:.02s} .demo-wave i:nth-child(9){animation-delay:.17s}
@keyframes vbWave { 0%,100%{transform:scaleY(.28)} 50%{transform:scaleY(1)} }

/* desplegable simulado */
.demo-drop {
  background: #fff; border: 1px solid rgba(21,17,13,.12); border-radius: 10px;
  box-shadow: 0 14px 34px rgba(21,17,13,.14); padding: 5px; min-width: 150px;
  font-size: 13px; opacity: 0; transform-origin: top center; z-index: 5;
}
.demo-drop span { display: block; padding: 7px 10px; border-radius: 7px; color: var(--ink,#15110D); }
.demo-drop span.sel { background: rgba(217,96,59,.12); color: var(--terra,#D9603B); font-weight: 600; }

/* la captura necesita ser el origen de coordenadas */
.app-shot, .ds-foto, [data-shot] { position: relative; }

/* ---------- sticky storytelling ---------- */
.story-pasos { list-style: none; margin: 0; padding: 0; }
.story-paso {
  padding: 20px 0 20px 22px; border-left: 2px solid var(--line, #e7ded1);
  transition: opacity .4s ease, border-color .4s ease;
  opacity: 1;                                   /* por defecto: TODO legible */
}
html.motion-on .story-paso { opacity: .38; }
html.motion-on .story-paso.activo { opacity: 1; border-left-color: var(--terra, #D9603B); }
.story-paso .n {
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 14px;
  color: transparent; -webkit-text-stroke: 1.2px var(--terra, #D9603B);
  display: block; margin-bottom: 6px;
}
.story-paso h3 { font-size: 20px; margin-bottom: 5px; line-height: 1.25; }
.story-paso p { font-size: 15px; color: var(--mut, #6e6457); line-height: 1.55; }

/* Escena fuera del viewport: se congelan también las animaciones CSS en bucle
   (la onda de voz, los pulsos). No se ocultan, solo dejan de consumir CPU. */
.fuera-de-vista,
.fuera-de-vista *,
.fuera-de-vista *::before,
.fuera-de-vista *::after { animation-play-state: paused !important; }

/* ---------- movimiento reducido: todo quieto y visible ---------- */
@media (prefers-reduced-motion: reduce) {
  .demo-capa, .demo-cursor, .demo-click { display: none !important; }
  .demo-wave i { animation: none !important; transform: scaleY(.6) !important; }
  html.motion-on .story-paso { opacity: 1 !important; }
  .btn, .feat, .plan, .app-shot, .ds-foto, nav { transition: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ---------- móvil: menos capas y nada de cursores ---------- */
@media (max-width: 860px) {
  .demo-cursor, .demo-click, .demo-drop { display: none !important; }
  .demo-card { font-size: 12.5px; padding: 9px 11px; }
  .app-shot:hover { transform: none; }
}

/* ============================================================================
   BLOQUE: #dashboard · «El viaje de una llamada»  (lo pinta /js/story.js)
   ---------------------------------------------------------------------------
   Estado por defecto = TODO visible y en flujo normal: cinco pasos, cada uno
   con su captura y su nota. El modo escenario (producto fijo a la izquierda,
   pasos avanzando a la derecha) solo existe si story.js pone `.story-lista`
   en la sección Y el ancho es >= 1040px. Cualquier `opacity:0` o
   `position:absolute` que esconda contenido vive dentro de ese doble candado.
   Sin JS, con GSAP caído o con movimiento reducido no se esconde nada.
   ========================================================================= */

/* 0 · el atenuado global de .story-paso solo vale dentro del escenario ----- */
html.motion-on #dashboard:not(.story-lista) .story-paso { opacity: 1; }
@media (max-width: 1039.98px) { html.motion-on .story-paso { opacity: 1; } }

/* 1 · lista base: móvil, sin JS y movimiento reducido --------------------- */
#dashboard .kicker { color: var(--terra-d, #bd4d2b); }   /* 4,65:1 sobre crema */
#dashboard .story-in { display: block; }
#dashboard .story-visual { display: none; } /* duplicado visual: solo escenario */
#dashboard .story-pasos { max-width: 760px; }
#dashboard .story-paso { padding: 26px 0 32px 24px; }
#dashboard .story-paso:first-child { padding-top: 6px; }
#dashboard .story-paso .n {
  color: var(--terra-d, #bd4d2b); -webkit-text-stroke: 0;
  font-size: 13px; letter-spacing: .1em; margin-bottom: 8px;
}
#dashboard .story-paso h3 { font-size: clamp(21px, 2.5vw, 25px); margin-bottom: 9px; }
#dashboard .story-paso p { font-size: 16px; line-height: 1.62; max-width: 46em; }

/* la captura de cada paso: es la que se ve en móvil y sin JS */
.paso-vis { margin: 20px 0 0; }
.paso-shot {
  border: 1px solid var(--line, #e7ded1); border-radius: 12px; overflow: hidden;
  background: #fff; box-shadow: 0 12px 30px rgba(21,17,13,.08);
}
.paso-shot img { display: block; width: 100%; height: auto; }
.paso-vis figcaption {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 13px; font-size: 14px; line-height: 1.45; color: var(--ink, #15110D);
}
.paso-vis figcaption .sub { color: var(--mut, #6e6457); }
.paso-vis figcaption .ok { color: #23724A; font-weight: 700; }  /* 5,8:1 sobre crema */
.paso-vis figcaption .status-dot { margin-right: -2px; }
#dashboard .story-cierre {
  max-width: 720px; margin: 46px 0 0; font-size: 17px; line-height: 1.62;
  color: var(--mut, #6e6457); border-top: 1px solid var(--line, #e7ded1); padding-top: 26px;
}
#dashboard .story-cierre b { color: var(--ink, #15110D); font-weight: 600; }

/* 2 · MODO ESCENARIO — solo con JS (.story-lista) y a partir de 1040px ---- */
@media (min-width: 1040px) {
  /* Ojo: las reglas base van con #dashboard, así que estas necesitan el id
     también o pierden por especificidad. */
  #dashboard.story-lista .story-in {
    display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: 56px; align-items: start;
  }
  /* container-type: las tarjetas se miden contra el MARCO, no contra la
     ventana. Si no, encima de una captura de 700px parecen carteles. */
  /* el marco se centra con el texto del paso, sin pegarse nunca a la cabecera */
  #dashboard.story-lista .story-visual {
    display: block; position: sticky; container-type: inline-size;
    top: clamp(96px, calc(50vh - 230px), 240px);
  }
  #dashboard.story-lista .paso-vis { display: none; }

  #dashboard.story-lista .story-pasos { max-width: none; }
  #dashboard.story-lista .story-paso {
    min-height: 54vh; display: flex; flex-direction: column; justify-content: center;
    padding: 22px 0 22px 26px;
  }
  #dashboard.story-lista .story-paso:first-child { min-height: 42vh; padding-top: 22px; }
  #dashboard.story-lista .story-paso:last-child  { min-height: 46vh; }
  /* atenuado legible: tinta al 60% sobre crema = 4,8:1 */
  html.motion-on #dashboard.story-lista .story-paso { opacity: .6; }
  html.motion-on #dashboard.story-lista .story-paso.activo { opacity: 1; border-left-color: var(--terra-d, #bd4d2b); }
  #dashboard.story-lista .story-paso p { color: var(--ink, #15110D); }
  /* verde sobre beige = 11:1; el terra sobre beige se quedaba en 4,1:1 */
  #dashboard.story-lista .story-paso .n {
    display: inline-block; padding: 3px 9px; border-radius: 6px;
    background: #f1e9dc; color: var(--green, #123528);
    align-self: flex-start; margin-bottom: 10px;
    transition: background-color .4s ease, color .4s ease;
  }
  #dashboard.story-lista .story-paso.activo .n { background: var(--terra-d, #bd4d2b); color: #fff; }

  /* --- el marco del producto --- */
  .story-marco {
    border: 1px solid var(--line, #e7ded1); border-radius: 16px; overflow: hidden;
    background: #fff; box-shadow: 0 30px 64px rgba(21,17,13,.14), 0 4px 14px rgba(21,17,13,.05);
    will-change: transform;
  }
  .story-barra {
    display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px;
    background: #f4efe5; border-bottom: 1px solid var(--line, #e7ded1);
  }
  .story-barra i { width: 9px; height: 9px; border-radius: 50%; background: #d8cfc0; }
  .story-barra span {
    margin-left: 12px; font-size: 12px; font-weight: 600; letter-spacing: .04em;
    color: var(--mut, #6e6457); text-transform: uppercase;
  }
  .story-pantalla { position: relative; aspect-ratio: 1440 / 820; overflow: hidden; background: #123528; }

  .story-esc { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
  .story-esc.on { opacity: 1; }
  .story-esc .lienzo { position: absolute; left: 0; width: 100%; top: var(--y, 0); }
  .story-esc img { display: block; width: 100%; height: auto; }

  /* marcas dibujadas sobre la captura (coordenadas en % de la captura) */
  .story-mk {
    position: absolute; box-sizing: border-box; border-radius: 10px;
    left: var(--x); top: var(--t); width: var(--w); height: var(--h);
    opacity: 0; transform: scale(.965);
    transition: opacity .45s ease .12s, transform .5s cubic-bezier(.2,.7,.2,1) .12s;
  }
  .story-esc.on .story-mk { opacity: 1; transform: none; }
  .story-mk-ocu  { border: 2px dashed rgba(189,77,43,.5); }
  .story-mk-lib  { border: 2px solid #2F8F57; background: rgba(47,143,87,.10); }
  .story-mk-pick { border: 2.5px solid var(--terra-d, #bd4d2b); background: rgba(217,96,59,.10); box-shadow: 0 0 0 5px rgba(217,96,59,.12); }
  .story-mk-fila { border: 2.5px solid var(--terra-d, #bd4d2b); background: rgba(217,96,59,.10); border-radius: 8px; }
  .story-mk b {
    position: absolute; background: var(--terra-d, #bd4d2b); color: #fff;
    font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .04em;
    padding: 3px 9px; border-radius: 6px; white-space: nowrap; line-height: 1.5;
  }
  .story-mk-pick b { left: 50%; top: calc(100% + 6px); transform: translateX(-50%); }
  .story-mk-fila b { left: calc(100% + 12px); top: 50%; transform: translateY(-50%); }

  /* --- tarjetas flotantes (las crea story.js) — nada las recorta ---
     Ojo: NO se usa la clase .demo-card. La landing tiene su propia .demo-card
     (la tarjeta grande de la demo: en columna y centrada) y su hoja va después
     de esta, así que heredarla rompía la tarjeta. Se define entera aquí. */
  .story-flota { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
  .story-flota .story-card {
    position: absolute; opacity: 0; z-index: 4;
    display: flex; flex-direction: row; align-items: flex-start; text-align: left;
    width: auto; max-width: none;
    background: #fff; border: 1px solid rgba(21,17,13,.10);
    box-shadow: 0 .85em 2.4em rgba(21,17,13,.14), 0 .15em .5em rgba(21,17,13,.06);
    color: var(--ink, #15110D); line-height: 1.35;
    font-family: 'Inter', sans-serif; font-weight: 400;
    font-size: max(10.5px, 1.62cqw);              /* proporcional al marco */
    padding: .82em 1.05em; border-radius: .9em; gap: .7em; white-space: nowrap;
  }
  .story-card b { font-weight: 600; }
  .story-card .sub { color: var(--mut, #6e6457); }
  .story-card .story-txt { display: flex; flex-direction: column; gap: .18em; }
  .story-card .story-txt b { font-size: 1em; line-height: 1.3; }
  .story-card .sub { font-size: .88em; }
  .story-card .ok { color: #23724A; font-size: 1.1em; line-height: 1.2; }  /* 5,8:1 sobre blanco */
  .story-card .status-dot { width: .62em; height: .62em; margin-top: .3em; }
  .story-card .story-chips { display: flex; gap: .35em; margin-top: .25em; }
  .story-card .story-chips i {
    font-style: normal; background: #f3ede2; border-radius: .45em;
    padding: .22em .6em; font-size: .86em; font-weight: 600; color: var(--ink, #15110D);
  }
  .story-card .demo-wave { margin-left: .2em; align-self: center; height: 1.15em; gap: .18em; }
  .story-card .demo-wave i { width: .18em; }
  /* Las tarjetas caen sobre la barra lateral o sobre el hueco vacío del panel,
     nunca sobre el título ni sobre los datos. Hasta 1240px van DENTRO del
     marco: por debajo de ese ancho el wrap no deja margen a los lados y una
     tarjeta desbordada quedaría pegada al borde de la ventana. */
  .story-c1 { left: 1.5%; top: 20%; }
  .story-c2 { right: 1.5%; top: 43%; }
  .story-c3 { left: 20%; bottom: 12%; }
  .story-c4 { right: 1.5%; bottom: 16%; }
  .story-c5 { left: 1.5%; bottom: 31%; }
}

/* de 1240px en adelante sí hay margen: las tarjetas se salen del marco */
@media (min-width: 1240px) {
  .story-c1, .story-c5 { left: -5%; }
  .story-c2, .story-c4 { right: -5%; }
}

/* pantallas grandes: el panel gana ancho comiéndose parte del margen del wrap
   (mismo recurso que la sección «Por dentro»), que es lo que hace que la
   captura se lea de verdad. */
@media (min-width: 1280px) {
  #dashboard.story-lista .story-in { gap: 70px; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  #dashboard.story-lista .story-paso { padding-left: 30px; }
}
/* El tirón hacia fuera solo desde 1400px: por debajo, el margen que queda a
   los lados del wrap es menor que el tirón y las tarjetas se pegaban al borde
   de la ventana. */
@media (min-width: 1400px) {
  #dashboard.story-lista .story-visual { margin-left: calc(-1 * min(5vw, 84px)); }
}

/* movimiento reducido: ni escenario ni marcas ni tarjetas; la lista entera */
@media (prefers-reduced-motion: reduce) {
  .story-visual { display: none !important; }
  .paso-vis { display: block !important; }
  #dashboard .story-in { display: block !important; }
}

/* ============================================================================
   POR DENTRO · escenario pegajoso (>=1040px)
   El diseño no cambia: cambia el recorrido. El mockup se queda quieto a la
   izquierda y se releva de captura mientras los ocho textos siguen bajando.
   Todo lo de aquí lo activa /js/porque-sticky.js creando .pd-wrap; sin JS la
   sección se ve tal cual estaba, fila a fila.
   ========================================================================= */
.pd-wrap {
  display: grid;
  /* El escenario manda: la captura es el argumento de la sección y con 1.5fr
     se quedaba en 638 px dentro de una ventana de 1710. El texto no pierde
     nada: ya iba topado a 42ch. */
  grid-template-columns: 1.8fr 1fr;
  gap: 48px;
  align-items: start;
  /* Solo el aire justo bajo la cabecera: con los 92 px de antes el mockup
     quedaba descolgado de su propio titular. */
  padding-top: 26px;
}
.pd-wrap > * { min-width: 0; }

/* La columna izquierda es lo único que se queda pegado. La sección entera no
   se fija: al acabar el bloque 08, el escenario se despega solo y la página
   sigue hacia la sección siguiente sin superponerse. */
.pd-stage { position: sticky; top: 96px; align-self: start; }

/* El contenedor exterior del mockup. Su alto lo pone el JS según la captura
   activa y viaja con transición: el borde de arriba nunca se mueve. */
.pd-stack {
  position: relative;
  transition: height .42s cubic-bezier(.22,.61,.36,1);
}

/* Cada escena, apilada en el mismo sitio. Solo cambia el contenido. */
#porque .pd-stack .app-paso[data-escena] {
  position: absolute; inset: 0;
  display: block;
  padding: 0; margin: 0; gap: 0;
  border-top: 0; min-height: 0;
  opacity: 0; visibility: hidden;
  transform: translateY(7px) scale(.986);
  transition: opacity .34s ease,
              transform .42s cubic-bezier(.22,.61,.36,1),
              visibility 0s linear .42s;
}
#porque .pd-stack .app-paso[data-escena].on {
  opacity: 1; visibility: visible;
  transform: none;
  transition: opacity .38s ease,
              transform .42s cubic-bezier(.22,.61,.36,1),
              visibility 0s linear 0s;
}

/* El marco se recorta contra el alto del escenario (ya tiene overflow:hidden
   y su radio), así que una captura muy alta se asoma como una ventana de la
   aplicación en vez de encoger o deformarse. */
#porque .pd-stack .app-paso[data-escena] .app-marco { max-height: 100%; }

/* El mockup NO muerde el margen: arranca en el mismo eje vertical que el logo,
   el titular del héroe y la cabecera de esta sección. Con el contenedor a
   1400 px ya tiene tamaño de sobra, y sacarlo del wrap rompía la única línea
   que ordena la página entera. */
#porque .pd-stack .app-paso[data-escena] .app-marco { margin-left: 0; margin-right: 0; }

/* Carril derecho · los ocho apartados, con el mismo ritmo, el mismo filete y
   el mismo separador que tenían como filas. */
#porque .pd-rail .pd-step[data-escena] {
  display: flex; flex-direction: column; justify-content: center;
  grid-template-columns: none;
  padding: 92px 0; min-height: 700px;
  border-top: 1px solid var(--line, #e7ded1);
}
#porque .pd-rail .pd-step[data-escena]:first-child {
  border-top: none; padding-top: 0;
}
#porque .pd-rail .pd-step[data-escena] .app-txt { order: 0; }

/* Movimiento reducido: el relevo es instantáneo, sin desvanecidos. */
@media (prefers-reduced-motion: reduce) {
  .pd-stack,
  #porque .pd-stack .app-paso[data-escena] { transition: none; }
  #porque .pd-stack .app-paso[data-escena] { transform: none; }
}