/* ============================================================================
   SPICA HOME V6 · RESPONSIVE DE ESCENAS (r6, 30-ago) · iPhone + iPad
   Adaptacion de las 14 escenas "app viva" (css/demos/*.css) a movil y tablet.
   Carga la ULTIMA: solo overrides dentro de @media, nunca reglas globales.

   POR QUE EL CORTE ES 1080 Y NO 720
   Medido en la pagina real con el contenedor que fija el agente C (r6):
   debajo de 1081px el pin no monta, los slides quedan apilados y la caja de
   la escena (.demo) nunca pasa de 480px:
     375 -> 335   430 -> 387   540-767 -> 480 (tope .pin-slide__media 30rem)
     768 -> 332   900 -> ~390  1024 -> 443  (dos columnas, la escena va al lado
                                             de la copy y se queda con la mitad)
   Es decir: TODO el tramo por debajo de 1081px es "caja angosta", 332 a 480px,
   y una sola adaptacion compacta sirve para iPhone y para iPad. Desde 1081px
   arriba no hay ni una regla de esta hoja: el desktop aprobado no se toca.
   ========================================================================== */

/* ============================================================================
   BLOQUE 0 · 721px a 1080px · ESPEJO DE LOS @media 720 DE LAS HOJAS DE ESCENA
   r6 C34-escenas: cada css/demos/*.css trae su propio `@media (max-width:
   720px)` con la reposicion para caja angosta. Con la tablet de dos columnas
   de r6 esa caja angosta aparece TAMBIEN entre 721 y 1080px, donde aquellos
   bloques ya no aplican y la escena volvia a su geometria de escritorio
   (598px de contenido dentro de 332px de caja: crm, ops, followup, choice y
   los steps se salian entre 6 y 125px).
   Copia literal de esos bloques, sin tocar sus hojas y sin inventar valores.
   NO se copia `.demo { min-height }` ni `.demo--step-* { min-height }`: el
   alto de .demo es del agente C.
   ========================================================================== */
@media (min-width: 721px) and (max-width: 1080px) {
  .demo__cluster { padding: 2.6rem 0.6rem 1.4rem; }
  .demo__cluster .dm-note { max-width: 12rem; }

  .demo--find .dm-note--ring { right: -0.2rem; }
  .demo--find .dm-note--gpt { left: -0.2rem; }

  .demo--choice .dm-note--incoming { top: -0.3rem; right: -0.2rem; }

  .demo--social .demo__cluster { padding: 1.1rem 0.7rem 1.4rem; gap: 0.6rem; }
  .demo--social .sc-reel { width: min(148px, 52vw); border-radius: 18px; }
  .demo--social .sc-cut { width: 5.1rem; }
  .demo--social .sc-cut b { font-size: 0.44rem; padding-top: 0.6rem; }
  .demo--social .sc-engage { top: 0.4rem; right: -0.2rem; width: 9.4rem; padding: 0.5rem 0.6rem 0.55rem; }
  .demo--social .sc-dm { left: -0.2rem; bottom: -0.6rem; width: 9.4rem; padding: 0.5rem 0.6rem 0.55rem; }
  .demo--social .sc-publish { right: -0.2rem; bottom: 3.2rem; }
  .demo--social .sc-reel__meta { bottom: 2.3rem; }

  .demo--crm .demo__cluster { padding: 0.9rem 0.2rem 2rem; }
  .demo--crm .crm-stack { margin: 0 0.5rem 0.55rem; }
  .demo--crm .crm-top { padding: 0.5rem 0.55rem 0.45rem; }
  .demo--crm .crm-lanes { gap: 0.3rem; }
  .demo--crm .crm-col { padding: 0.3rem; min-height: 132px; }
  .demo--crm .crm-meas--pitch { right: 2.5%; top: 18%; }
  .demo--crm .crm-meas--waste { right: 2.5%; top: 66%; }
  .demo--crm .crm-note--quote { top: 2.2rem; right: -0.1rem; }
  .demo--crm .crm-note--signed { bottom: -1.2rem; right: -0.1rem; }

  .demo--followup .demo__cluster { padding: 1.2rem 0.7rem 1.6rem; }
  .demo--followup .fu-lead { top: -0.3rem; right: -0.2rem; max-width: 11.2rem; }
  .demo--followup .fu-card { bottom: auto; top: 5.4rem; left: -0.2rem; width: 10.2rem; }
  .demo--followup .fu-phone { bottom: -1rem; right: -0.2rem; width: 8rem; }

  .demo--ops .demo__cluster { padding: 0.9rem 0.2rem 2rem; }
  .demo--ops .dm-browser__body { grid-template-columns: 34px minmax(0, 1fr); }
  .demo--ops .dm-main { padding: 0.55rem 0.5rem 0.65rem; }
  .demo--ops .dm-board { gap: 0.35rem; }
  .demo--ops .dm-col { padding: 0.35rem; min-height: 196px; }
  .demo--ops .dm-lead__row { flex-wrap: wrap; row-gap: 0.08rem; }
  .demo--ops .dm-lead__amt { margin-left: 0; }
  .demo--ops .dm-note--week { bottom: -1.2rem; right: -0.1rem; }

  .demo--strategy .demo__cluster { padding: 0.9rem 0.2rem 1.8rem; }
  .demo--strategy .st-head { padding: 0.55rem 0.65rem 0.5rem; }
  .demo--strategy .st-plan { padding: 0.3rem 0.65rem 0; gap: 0.42rem; }
  .demo--strategy .st-row__track { height: 8px; }
  .demo--strategy .st-results { margin: 0.6rem 0.65rem 0; }
  .demo--strategy .st-chart { height: 68px; }
  .demo--strategy .st-flower { width: 30px; height: 26px; top: -11px; right: -5px; }
  .demo--strategy .st-stamp { top: 12.7rem; right: 2.4rem; }
  .demo--strategy .st-note { bottom: -0.6rem; right: -0.1rem; }

  .demo--flow-growth .fg-cluster { padding: 1.6rem 0.6rem 2rem; }
  .demo--flow-growth .fg-stage__body { min-height: 21rem; padding: 1.1rem 0.8rem; }
  .demo--flow-growth .fg-adcard,
  .demo--flow-growth .fg-land { max-width: 100%; }
  .demo--flow-growth .fg-note--live { left: -0.3rem; top: 1rem; }
  .demo--flow-growth .fg-video { margin-right: 5.2rem; width: 6.2rem; height: 10.8rem; }
  .demo--flow-growth .fg-views { margin-right: 5.2rem; }
  .demo--flow-growth .fg-cmt { right: 0.2rem; }
  .demo--flow-growth .fg-thread-pos {
    width: 8.6rem;
    height: 2.9rem;
    transform: translate(4.6rem, 5.6rem) scale(0.9);
  }
  .demo--flow-growth .fg-thread-pos.is-on { transform: translate(4.6rem, 5.6rem) scale(1); }
  .demo--flow-growth .fg-thread-pos.is-on.is-center { transform: translate(0, -1.9rem) scale(1.02); }
  .demo--flow-growth .fg-payoff { margin-top: 4rem; }

  .demo--flow-systems .fs-cluster { padding: 1.8rem 0.6rem 2rem; }
  .demo--flow-systems .fs-rail { width: 1.9rem; }
  .demo--flow-systems .fs-stage__body { min-height: 19rem; }
  .demo--flow-systems .fs-cap { padding: 1.1rem 0.8rem; }
  .demo--flow-systems .fs-msg,
  .demo--flow-systems .fs-bubble--out { max-width: 100%; }
  .demo--flow-systems .fs-pipe__col { width: 3.6rem; }
  .demo--flow-systems .fs-pipe__arrow { width: 0.9rem; }
  .demo--flow-systems .fs-pipe__card { left: 1.8rem; }
  .demo--flow-systems .fs-pipe__card.is-on.is-col-2 { transform: translateX(calc(-50% + 4.5rem)) scale(1); }
  .demo--flow-systems .fs-pipe__card.is-on.is-col-3 { transform: translateX(calc(-50% + 9rem)) scale(1); }
  .demo--flow-systems .fs-thread { top: -0.5rem; right: 0.2rem; padding: 0.34rem 0.55rem; }
  .demo--flow-systems .fs-cal { width: 9.4rem; }
  .demo--flow-systems .fs-board { gap: 0.4rem; }
  .demo--flow-systems .fs-tile { padding: 0.5rem 0.65rem; }
  .demo--flow-systems .fs-note--own { left: -0.3rem; bottom: 1rem; }

  .demo--flow-strategy .fp-cluster { padding: 1.6rem 0.6rem 2.4rem; }
  .demo--flow-strategy .fp-stage { padding: 1.2rem 0.9rem 1.4rem; gap: 1.15rem; min-height: 20rem; }
  .demo--flow-strategy .fp-head { flex-wrap: wrap; }
  .demo--flow-strategy .fp-timeline__track { gap: 0.22rem; }
  .demo--flow-strategy .fp-milestone__check { display: none; }
  .demo--flow-strategy .fp-chart { flex-wrap: wrap; gap: 0.55rem; }
  .demo--flow-strategy .fp-chart__lines { width: min(9.8rem, 100%); height: 2.9rem; }
  .demo--flow-strategy .fp-chart__tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
  }
  .demo--flow-strategy .fp-loose--a { left: 1.2rem; }
  .demo--flow-strategy .fp-loose--b { right: 1.2rem; }
  .demo--flow-strategy .fp-loose--c { left: 1.8rem; }
  .demo--flow-strategy .fp-caption { right: 0.1rem; bottom: 1.2rem; min-width: 8rem; padding: 0.34rem 0.55rem; }

  .demo--step-goal .sg-stage { padding: 1.3rem 1.2rem 1.5rem; }
  .demo--step-goal .sg-card { width: min(280px, 100%); }
  .demo--step-goal .sg-target { right: -0.4rem; bottom: -0.5rem; width: 50px; height: 50px; }
  .demo--step-goal .sg-target__dot { width: 9px; height: 9px; }
  .demo--step-goal .sg-lock { left: -0.3rem; }

  .demo--step-plan .sp-stage { padding: 1.4rem 1.2rem 1.7rem; }
  .demo--step-plan .sp-card { width: 236px; }
  .demo--step-plan .sp-chip { right: -0.3rem; bottom: -0.4rem; }

  .demo--step-launch .sl-stage { padding: 1.3rem 1.2rem 1.5rem; }
  .demo--step-launch .sl-card { width: min(272px, 100%); }
  .demo--step-launch .sl-roi { left: -0.3rem; bottom: -0.4rem; }
  .demo--step-launch .sl-check { right: -0.6rem; top: -0.7rem; }
}

/* ============================================================================
   BLOQUE 1 · hasta 1080px · EL SISTEMA COMPACTO DE r6
   r6 C34-escenas: caja de 332 a 480px en todo el tramo. Objetivo: nada tapado,
   nada fuera de la caja y subir el suelo tipografico. Los bloques de 720 de
   r2/r3 encogian el texto hasta 6.7px para hacer entrar el layout de
   escritorio; aqui se reflowa de verdad y el texto sube.
   Ninguna regla usa transform: scale(). Las 14 escenas se resolvieron por
   reflow (ver informe INFORME-D).
   ========================================================================== */
@media (max-width: 1080px) {

  /* --------------------------------------------------------------------------
     r6 C34-escenas · COMPARTIDO: la raiz de cada escena no puede ensanchar la
     pista del grid de .demo. Sin `min-width: 0` el track se dimensiona al
     min-content de la escena y el 100% del hijo resuelve contra ESE ancho, no
     contra la caja: asi es como .sl-stage salia 10px a 375px y 50px a 1024px.
     ------------------------------------------------------------------------ */
  .demo > .demo__cluster,
  .demo > .sg-stage,
  .demo > .sp-stage,
  .demo > .sl-stage,
  .demo > .fg-cluster,
  .demo > .fs-cluster,
  .demo > .fp-cluster { min-width: 0; max-width: 100%; }

  /* --------------------------------------------------------------------------
     r6 C34-escenas · COMPARTIDO: primitivas de demos.css que usan todas.
     El label de progreso es el narrador de cada escena y estaba en 9.9px;
     sube a 11.5px y la pastilla se ensancha para que ningun paso se parta.
     ------------------------------------------------------------------------ */
  .demo .dm-progress {
    width: min(21rem, 100%);
    padding: 0.6rem 0.8rem 0.65rem;
  }
  .demo .dm-progress__text { font-size: 0.72rem; }

  /* las notas flotantes nunca pueden salirse de la caja de la escena */
  .demo .demo__cluster .dm-note { max-width: min(17rem, 100%); }
  .demo .dm-note__copy b { font-size: 0.84rem; }
  .demo .dm-note__copy small { font-size: 0.74rem; }
  .demo .dm-note__icon { width: 32px; height: 32px; }
  .demo .dm-note__icon svg { width: 17px; height: 17px; }

  /* burbujas, chips y chrome de telefono: el cuerpo de lectura */
  .demo .dm-bubble { font-size: 0.82rem; }
  .demo .dm-chip { font-size: 0.66rem; }
  .demo .dm-phone__id b { font-size: 0.86rem; }
  .demo .dm-phone__id small { font-size: 0.64rem; }

  /* --------------------------------------------------------------------------
     r6 C34-escenas · 01 FIND
     Diagnostico: el avatar absoluto del negocio se comia "summitroofing.com"
     y la tarjeta solo usaba el 86% del ancho. Decision: reflow, sin scale.
     La tarjeta pasa a ancho completo, la fila SPONSORED reserva el hueco del
     avatar y las dos notas se pegan al borde de la caja (antes salian -0.2rem).
     ------------------------------------------------------------------------ */
  .demo--find .df-browser { width: min(340px, 100%); }
  .demo--find .df-search { font-size: 0.84rem; }
  /* la fila del resultado crece al subir el texto: sube el tope del reveal */
  .demo--find .df-row--ad.is-on { max-height: 200px; }
  .demo--find .df-result__meta { padding-right: 2.1rem; } /* hueco del avatar */
  .demo--find .df-spons { font-size: 0.62rem; }
  .demo--find .df-result__meta small { font-size: 0.68rem; }
  .demo--find .df-result__id b { font-size: 0.92rem; }
  .demo--find .df-stars svg { width: 12px; height: 12px; }
  .demo--find .df-stars small { font-size: 0.74rem; }
  .demo--find .df-call { font-size: 0.8rem; padding: 0.45rem 0.9rem; }
  .demo--find .df-pill { font-size: 0.64rem; }
  .demo--find .dm-note--ring { right: 0; }
  .demo--find .dm-note--gpt { left: 0; max-width: min(17rem, 100%); }

  /* --------------------------------------------------------------------------
     r6 C34-escenas · 02 CHOICE
     La mini web vive dentro de un telefono de 300px que NO se encoge en la
     caja angosta: su tipografia ya esta a paridad con el desktop aprobado.
     Diagnostico: la nota "Incoming call" salia 0.2rem fuera de la caja y el
     cromo de las resenas era lo mas chico de las 14 escenas (8.8 y 9.0px).
     El scroll del sitio corre con offsets FIJOS (-186px y -260px en
     choice.css), asi que subir tipografia ahi mueve lo que revela cada
     scroll: se probo en A/B en el harness (docs-r6/shots-d/live/
     choice-ab-*) y a +1.8 y +2.2px el encuadre de los dos beats queda
     igual (la banda de la foto, las cards, PATIENT REVIEWS y la resena 1
     en el primero; las dos resenas sobre "Call now" en el segundo).
     Ese margen es el techo: mas grande si desplazaria el encuadre y ya
     obligaria a tocar choice.css. Ver informe.
     ------------------------------------------------------------------------ */
  .demo--choice .dm-note--incoming { top: 0; right: 0; }
  .demo--choice .dmc-reviews__tag { font-size: 0.66rem; }
  .demo--choice .dmc-review__name { font-size: 0.7rem; }
  .demo--choice .dmc-call__label { font-size: 0.8rem; }

  /* --------------------------------------------------------------------------
     r6 C34-escenas · 03 SOCIAL
     Diagnostico: los dos paneles flotantes (metricas y DM) median 150px, se
     salian 3px por cada lado y tapaban el reel entero (handle, sitio y caption
     quemado quedaban debajo). Decision: REFLOW a dos columnas, reel a la
     izquierda y los paneles apilados a la derecha; cero solape y la escena
     baja de 380 a ~330px de alto. Nada de scale.
     El video real (social-reel.mp4) no se toca: sigue con playsinline, muted,
     su poster y su object-fit dentro del reel; solo cambia el ancho del marco.
     ------------------------------------------------------------------------ */
  .demo--social .demo__cluster {
    width: 100%;
    /* el reel arranca en 150px (el minimo para que la pastilla de sitio y el
       caption quemado se lean) y crece con la caja: 150px a 375, ~190px en la
       columna de tablet */
    grid-template-columns: minmax(150px, 34%) minmax(0, 1fr);
    /* la fila de cortes se reserva aunque los clips salgan en el beat 2: sin
       esto la escena encoge 58px a mitad del guion y, con los slides apilados
       (sin pin debajo de 1081), ese salto empuja la pagina. Las filas 2 y 3
       reservan igual el alto compuesto de los dos paneles (161 y 124px
       medidos a 375px), que son los que mandan cuando el reel es angosto. */
    grid-template-rows: minmax(3.1rem, auto) minmax(10.1rem, auto) minmax(7.8rem, auto);
    justify-items: stretch;
    align-items: center;
    column-gap: 0.7rem;
    row-gap: 0.6rem;
    padding: 0.9rem 0.4rem 1.1rem;
  }
  .demo--social .sc-cuts { grid-column: 1 / -1; grid-row: 1; }
  .demo--social .sc-cut { width: 5.4rem; }
  .demo--social .sc-cut b { font-size: 0.56rem; padding-top: 0.7rem; }
  .demo--social .sc-reel {
    grid-column: 1;
    grid-row: 2 / span 2;
    width: 100%;
    justify-self: center;
  }
  .demo--social .sc-engage,
  .demo--social .sc-dm {
    position: static;
    width: auto;
    align-self: center;
    padding: 0.6rem 0.7rem 0.65rem;
  }
  .demo--social .sc-engage { grid-column: 2; grid-row: 2; }
  .demo--social .sc-dm { grid-column: 2; grid-row: 3; }
  /* el ring de publicar ya no cabe al costado del reel (128-140px) y abajo
     cruzaba el handle y el caption quemado: sube al aire de la parte alta del
     video, donde no hay ni una linea de texto. */
  .demo--social .sc-publish { right: 0.3rem; top: 1.9rem; bottom: auto; }
  .demo--social .sc-publish__label { font-size: 0.62rem; }
  /* el caption quemado pasa a dos lineas en un reel de 128-140px y se comia
     la fila de handle + sitio: la meta sube por encima de la banda */
  .demo--social .sc-reel__meta { bottom: 5rem; }
  .demo--social .sc-reel__handle { font-size: 0.6rem; }
  /* 0.6rem es el tope: a 150px de reel "Newport Beach, CA" entra en la
     pastilla sin recortarse (medido 119px sobre 134px utiles) */
  .demo--social .sc-reel__place { font-size: 0.6rem; }
  .demo--social .sc-reel__caption-text { font-size: 0.62rem; }
  .demo--social .sc-views__label { font-size: 0.6rem; }
  .demo--social .sc-dm__label { font-size: 0.6rem; }
  .demo--social .sc-engage .dm-bubble--in,
  .demo--social .sc-dm .dm-bubble--in { font-size: 0.74rem; }

  /* --------------------------------------------------------------------------
     r6 C34-escenas · 04 CRM (Roof Intelligent)
     Diagnostico: 4 carriles en una caja de 330px daban columnas de 70px,
     encabezados a 6.7px y la tarjeta partida en tres lineas. Decision: REFLOW
     a 2x2. Cada carril pasa a ~150px, los encabezados suben de 6.7 a 10.9px y
     el nombre del lead a 12.2px. El vuelo de la tarjeta entre carriles lo
     calcula crm.js midiendo rects en vivo (hopStart), asi que la diagonal del
     2x2 funciona sin tocar una linea de coreografia.
     ------------------------------------------------------------------------ */
  .demo--crm .demo__cluster { padding: 0.8rem 0.1rem 1.7rem; }
  .demo--crm .crm-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
  .demo--crm .crm-col { min-height: 92px; padding: 0.4rem; }
  .demo--crm .crm-col__head { font-size: 0.68rem; letter-spacing: 0.05em; }
  .demo--crm .crm-count { font-size: 0.62rem; min-width: 17px; height: 17px; }
  .demo--crm .crm-card__row b {
    font-size: 0.76rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .demo--crm .crm-card small {
    font-size: 0.62rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .demo--crm .crm-tag { font-size: 0.6rem; padding: 0.14rem 0.4rem; letter-spacing: 0.03em; }
  .demo--crm .crm-btn { font-size: 0.68rem; padding: 0.3rem 0.6rem; }
  .demo--crm .crm-strip small { font-size: 0.6rem; letter-spacing: 0.05em; }
  .demo--crm .crm-tab { font-size: 0.64rem; padding: 0.22rem 0.55rem; }
  .demo--crm .crm-title b { font-size: 0.84rem; }
  .demo--crm .crm-title small { font-size: 0.62rem; }
  .demo--crm .crm-browser__url { font-size: 0.66rem; }
  .demo--crm .crm-note--quote { top: 1.8rem; right: 0; }
  .demo--crm .crm-note--signed { bottom: -0.9rem; right: 0; }

  /* --------------------------------------------------------------------------
     r6 C34-escenas · 05 FOLLOWUP
     Diagnostico: la peor de las 14. Las tres tarjetas flotantes (lead,
     escalera y telefono de noche) tapaban el 100% de la conversacion; el texto
     del SMS quedaba debajo del mini telefono y las tres se salian de la caja.
     Decision: REFLOW a pila narrativa (lead arriba, conversacion, escalera con
     el calendario abajo), que es el orden real del DOM y de los beats.
     El mini telefono de noche se retira en caja angosta: repite el mismo
     desenlace que ya cuenta el calendario ("Booked · Tue 9:00 am") y un
     telefono dibujado dentro de un telefono real no se lee. Sin scale.
     Los [hidden] reservan su hueco (display + visibility) para que la pila no
     salte cuando cada tarjeta entra en su beat.
     ------------------------------------------------------------------------ */
  .demo--followup .demo__cluster {
    /* la pila no crece mas alla del ancho de lectura del telefono */
    width: min(23rem, 100%);
    justify-items: center;
    row-gap: 0.7rem;
    padding: 0.9rem 0.4rem 1.2rem;
    /* la escalera entra en el beat 3 y base.css la esconde con
       `[hidden] { display: none !important }`: su fila se reserva desde el
       frame 1 (9.9rem = alto compuesto medido) para que la pila no de un
       salto de 157px a mitad del guion */
    grid-template-rows: auto auto minmax(9.9rem, auto);
  }
  /* la conversacion cabe en 3 burbujas: 300px de pantalla eran aire muerto
     y hacian de la pila una escena de 707px de alto */
  .demo--followup .dm-phone__screen { min-height: 232px; }
  .demo--followup .fu-lead {
    position: static;
    top: auto;
    right: auto;
    max-width: 100%;
    width: 100%;
  }
  .demo--followup .fu-lead[hidden] { display: flex; visibility: hidden; }
  .demo--followup .fu-lead__copy b { font-size: 0.86rem; }
  .demo--followup .fu-lead__copy small { font-size: 0.68rem; }
  .demo--followup .fu-card {
    position: static;
    top: auto;
    bottom: auto;
    left: auto;
    width: 100%;
  }
  .demo--followup .fu-card[hidden] { display: grid; visibility: hidden; }
  .demo--followup .fu-step b { font-size: 0.78rem; }
  .demo--followup .fu-cal { height: 3.3rem; }
  .demo--followup .fu-cal__face--front span { font-size: 0.7rem; }
  .demo--followup .fu-cal__face--back b { font-size: 0.82rem; }
  .demo--followup .fu-cal__face--back small { font-size: 0.68rem; }
  .demo--followup .fu-stamp { font-size: 0.64rem; }
  .demo--followup .fu-delivered { font-size: 0.62rem; }
  /* el mini telefono de noche sale en caja angosta (ver nota de arriba) */
  .demo--followup .fu-phone { display: none; }

  /* --------------------------------------------------------------------------
     r6 C34-escenas · 06 OPS (custom software)
     Diagnostico: el rail de iconos se comia 34 de los 330px y las 3 columnas
     quedaban en 91px con encabezados de 7.4px y todos los textos con "...".
     Decision: REFLOW. Fuera el rail (es cromo accesorio, no cuenta nada del
     guion), columnas ponderadas (SCHEDULED es la etiqueta larga) y los textos
     de la tarjeta envuelven en vez de truncarse. Nada de scale; el drag y el
     vuelo de la card los mide ops.js en vivo y siguen igual.
     ------------------------------------------------------------------------ */
  .demo--ops .demo__cluster { padding: 0.8rem 0.1rem 1.7rem; }
  .demo--ops .dm-browser__body { grid-template-columns: minmax(0, 1fr); }
  .demo--ops .dm-side { display: none; }
  .demo--ops .dm-main { padding: 0.55rem 0.5rem 0.7rem; }
  /* reparto medido: SCHEDULED necesita ancho para su etiqueta larga y DONE
     para sus dos pills; NEW es la que menos pide. */
  .demo--ops .dm-board { grid-template-columns: 1fr 1.08fr 1.06fr; gap: 0.4rem; }
  .demo--ops .dm-col { padding: 0.4rem; min-height: 176px; }
  .demo--ops .dm-col__head { font-size: 0.64rem; letter-spacing: 0.04em; }
  .demo--ops .dm-count { font-size: 0.62rem; min-width: 17px; height: 17px; }
  .demo--ops .dm-lead__row b { flex: 1 1 100%; font-size: 0.74rem; }
  .demo--ops .dm-lead__amt { margin-left: 0; font-size: 0.68rem; }
  .demo--ops .dm-lead small {
    font-size: 0.64rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .demo--ops .dm-done { font-size: 0.64rem; align-items: flex-start; line-height: 1.25; }
  /* "Gutter install" y "Roof tune-up" perdian media palabra con el ellipsis */
  .demo--ops .dm-done b { white-space: normal; overflow: visible; text-overflow: clip; }
  .demo--ops .dm-slot { font-size: 0.62rem; }
  .demo--ops .dm-ops-title b { font-size: 0.82rem; }
  .demo--ops .dm-ops-title small { font-size: 0.62rem; }
  .demo--ops .dm-browser__url { font-size: 0.66rem; }
  .demo--ops .dm-stat small { font-size: 0.62rem; }
  .demo--ops .dm-stat__row span { font-size: 0.66rem; }
  .demo--ops .dm-note--week { bottom: -0.9rem; right: 0; }

  /* --------------------------------------------------------------------------
     r6 C34-escenas · 07 STRATEGY
     Diagnostico: el documento entra bien, pero la columna de nombres estaba en
     5.2rem con texto de 8.6px y las etiquetas del ruler en 7.7px. Decision:
     ensanchar la columna de nombres a 6.3rem y subir tipografia; el planner
     sigue alineado porque ruler, filas y banda comparten --st-cols.
     ------------------------------------------------------------------------ */
  .demo--strategy { --st-cols: 16px 6.3rem minmax(0, 1fr); }
  .demo--strategy .st-doc__file { font-size: 0.64rem; }
  .demo--strategy .st-doc__saved { font-size: 0.62rem; }
  .demo--strategy .st-head__copy b { font-size: 0.84rem; }
  /* al subir de 7.4 a 9.6px el subtitulo ya no cabe en una linea: envuelve
     en vez de truncarse ("LAGUNA COAST INTERIORS · LAGUNA BEACH, CA" entero) */
  .demo--strategy .st-head__copy small {
    font-size: 0.6rem;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.3;
  }
  .demo--strategy .st-approve { font-size: 0.66rem; }
  .demo--strategy .st-approve__done { font-size: 0.72rem; }
  .demo--strategy .st-row__name { font-size: 0.66rem; }
  .demo--strategy .st-ruler__lab { font-size: 0.6rem; }
  .demo--strategy .st-stamp { font-size: 0.6rem; }
  .demo--strategy .st-results__lab { font-size: 0.62rem; }
  .demo--strategy .st-rank { font-size: 0.62rem; }
  .demo--strategy .st-note { bottom: -0.5rem; right: 0; }

  /* --------------------------------------------------------------------------
     r6 C34-escenas · FLOW GROWTH (specialty 01)
     El escenario entra sin recortes; lo que fallaba era el cromo chico y la
     nota "Live" saliendose 0.3rem. Solo tamanos y tope.
     ------------------------------------------------------------------------ */
  .demo--flow-growth .fg-stage__url { font-size: 0.66rem; }
  .demo--flow-growth .fg-ad__id small { font-size: 0.64rem; }
  .demo--flow-growth .fg-reach { font-size: 0.66rem; }
  .demo--flow-growth .fg-form__label { font-size: 0.62rem; }
  .demo--flow-growth .fg-video__handle { font-size: 0.58rem; }
  .demo--flow-growth .fg-payoff__copy small { font-size: 0.64rem; }
  .demo--flow-growth .fg-thread__face small { font-size: 0.64rem; }
  .demo--flow-growth .fg-cmt__bubble { font-size: 0.68rem; padding: 0.28rem 0.42rem; }
  .demo--flow-growth .fg-note--live { left: 0; }

  /* --------------------------------------------------------------------------
     r6 C34-escenas · FLOW SYSTEMS (specialty 02)
     La nota "Runs on your server" se salia 5px por la izquierda y tapaba la
     esquina de la app. Se pega al borde y sube el cromo del stage.
     ------------------------------------------------------------------------ */
  .demo--flow-systems .fs-stage__url { font-size: 0.66rem; }
  .demo--flow-systems .fs-cal__head { font-size: 0.62rem; }
  .demo--flow-systems .fs-cal__day { font-size: 0.64rem; }
  .demo--flow-systems .fs-cal__slot { font-size: 0.66rem; }
  .demo--flow-systems .fs-pipe__colhead small { font-size: 0.6rem; }
  .demo--flow-systems .fs-pipe__count { font-size: 0.58rem; }
  .demo--flow-systems .fs-thread small { font-size: 0.6rem; }
  .demo--flow-systems .fs-tile { font-size: 0.74rem; }
  .demo--flow-systems .fs-pipe__card { font-size: 0.7rem; }
  .demo--flow-systems .fs-note--own { left: 0; bottom: 0.6rem; }

  /* --------------------------------------------------------------------------
     r6 C34-escenas · FLOW STRATEGY (specialty 03)
     Los hitos estaban en 7.4px y la caption del final rozaba el borde.
     ------------------------------------------------------------------------ */
  .demo--flow-strategy .fp-head__title { font-size: 0.8rem; }
  .demo--flow-strategy .fp-head__tag { font-size: 0.62rem; }
  .demo--flow-strategy .fp-quarter { font-size: 0.62rem; }
  .demo--flow-strategy .fp-milestone { font-size: 0.6rem; padding: 0.28rem 0.42rem; }
  .demo--flow-strategy .fp-tag { font-size: 0.64rem; }
  .demo--flow-strategy .fp-loose { font-size: 0.64rem; }
  /* el chart envuelve (lineas arriba, tags abajo): si las lineas se quedan en
     9.8rem la mitad derecha del documento queda vacia. Al ocupar la fila
     entera la curva vuelve a leerse como una curva de 12 meses. */
  .demo--flow-strategy .fp-chart__lines { width: 100%; }
  .demo--flow-strategy .fp-caption { right: 0; bottom: 1.2rem; }
  .demo--flow-strategy .fp-caption__line { font-size: 0.62rem; }

  /* --------------------------------------------------------------------------
     r6 C34-escenas · STEPS (goal / plan / launch)
     Las tres tarjetas ya entran a paridad de desktop (la caja mide 252-343px
     y la tarjeta 236-280px). Solo se levanta el cromo mono que estaba en
     8-9px. La sp-card conserva su ancho fijo en px: sus caras de flip son
     absolutas y un % la colapsa a 0 (bug documentado en step-plan.css).
     ------------------------------------------------------------------------ */
  .demo--step-goal .sg-stage,
  .demo--step-plan .sp-stage,
  .demo--step-launch .sl-stage {
    width: 100%;
    /* 0.7rem = 11.2px: sigue tapando el vuelo maximo de los badges (0.6rem)
       y le devuelve 16px de ancho a la tarjeta. En la columna de 252px de
       tablet ese margen es la diferencia entre entrar y partirse. */
    padding-inline: 0.7rem;
  }
  /* el cluster sigue siendo shrink-to-fit (los badges se anclan a la TARJETA,
     no al stage: si se estira, target y lock se despegan de la tarjeta), pero
     ahora topa en el ancho del stage: en la columna angosta de tablet la caja
     baja a 252px y la tarjeta de 272-292px se salia */
  .demo--step-goal .sg-cluster,
  .demo--step-plan .sp-cluster,
  .demo--step-launch .sl-cluster { min-width: 0; max-width: 100%; }
  .demo--step-plan .sp-card { max-width: 100%; }
  .demo--step-goal .sg-id small { font-size: 0.64rem; }
  .demo--step-goal .sg-timer__t { font-size: 0.66rem; }
  .demo--step-goal .sg-notes__label { font-size: 0.64rem; }
  .demo--step-goal .sg-note__text { font-size: 0.7rem; }
  .demo--step-plan .sp-doc__meta { font-size: 0.62rem; }
  .demo--step-plan .sp-stat__label { font-size: 0.6rem; }
  .demo--step-plan .sp-live__label { font-size: 0.64rem; }
  /* la fila de la campana era la pieza rigida de la tarjeta: su min-content
     (230px) no dejaba encoger la card en la columna de 252px de tablet.
     "Spring Promo · Newport Beach" pasa a envolver en dos lineas en vez de
     truncarse con puntos suspensivos: no se pierde ni una palabra del copy. */
  .demo--step-launch .sl-card > * { min-width: 0; }
  .demo--step-launch .sl-camp__name {
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.25;
  }
  .demo--step-launch .sl-status { font-size: 0.66rem; }
  .demo--step-launch .sl-total__label { font-size: 0.62rem; }

  /* --------------------------------------------------------------------------
     r6 C34-escenas · BILLBOARD (TV del footer)
     La escena entera escala en cqw (el TV es su propio container), asi que en
     caja angosta los muebles caian a 6.2px. Se les pone un piso en px con
     max(): en cuanto el TV crece manda otra vez el valor en cqw y el desktop
     no cambia (a 760px de TV, 1.9cqw = 14.4px).
     ------------------------------------------------------------------------ */
  .demo--billboard .bb-bug,
  .demo--billboard .bb-year,
  .demo--billboard .bb-count { font-size: max(1.9cqw, 9.5px); }
  .demo--billboard .bb-studio { font-size: max(2.9cqw, 11.5px); }
}

/* ============================================================================
   BLOQUE 1B · 1081px a 1362px · LAS TRES ESCENAS DE STEPS EN CAJA ANGOSTA
   r7 C35. El BLOQUE 1 de arriba resolvio estas tres escenas para caja angosta,
   pero solo hasta 1080px. Resulta que la caja angosta vuelve a aparecer JUSTO
   encima de ese corte: de 1081px a 1362px las tarjetas de .steps siguen siendo
   tres en fila con el padding de escritorio, y su ancho de contenido (249.8px
   a 1081, 283.7px en el iPad Pro 11 de 1194, 334.1px a 1362) queda por debajo del
   min-content que piden step-plan (334.4px) y step-launch (333.4px) con el
   padding-inline de escritorio de sus stages (2.2rem). Ahi viven TODOS los iPad
   apaisados (mini 6 = 1133, Air 11 = 1180, Pro 11 = 1194) y cualquier ventana
   de escritorio estrecha.

   Es el MISMO trato del BLOQUE 1, copiado literal y sin valores nuevos: solo la
   geometria (padding del stage, min-width/max-width de los cluster y la fila
   rigida de la campana). NO se copian sus subidas de tipografia: en esta banda
   la caja es de 229 a 334px y el cromo mono de escritorio se lee sin recortes
   (medido). Asi la escala tipografica de las escenas no cambia en ningun ancho.

   POR QUE EL CORTE DE ARRIBA ES 1362px, MEDIDO UNO A UNO
   Debajo de 1564px el shell de 88rem no llega a su tope, asi que el ancho de
   CONTENIDO de la tarjeta es (0.9W - 44.8)/3 - 57.6 de padding - 2 de borde.
   Igualandolo al min-content de step-plan (264 de sp-card + 2.2rem x2 de
   padding del stage = 334.4px) sale W = 1363.05px. Barrido de 1352 a 1368 en
   un control identico sin estas reglas, desborde de la escena 2 respecto del
   contenido de su tarjeta:
     1352 +3.30   1356 +2.10   1358 +1.51   1360 +0.90   1362 +0.30   1363 ya limpio
   O sea que el ultimo ancho que falla NO es 1356 (ese era el ultimo por encima
   del umbral de 2px del barrido de la ronda) sino 1362. Se corta ahi y ni un
   pixel mas arriba: probado contra el control, un corte mas alto movia pixeles
   entre 1363 y 1366, donde la pagina ya se ve bien. Con el corte en 1362 la
   paridad es exacta, 0.00px, de 1364 en adelante (1366, 1400, 1440 y 1920).
   ========================================================================== */
@media (min-width: 1081px) and (max-width: 1362px) {

  /* la raiz de cada escena no puede ensanchar la pista del grid de .demo */
  .demo > .sg-stage,
  .demo > .sp-stage,
  .demo > .sl-stage { min-width: 0; max-width: 100%; }

  /* 0.7rem = 11.2px: sigue tapando el vuelo maximo de los badges (0.6rem) y le
     devuelve 16px de ancho a la tarjeta interna. En la columna de 252px de
     1081px ese margen es la diferencia entre entrar y partirse. */
  .demo--step-goal .sg-stage,
  .demo--step-plan .sp-stage,
  .demo--step-launch .sl-stage {
    width: 100%;
    padding-inline: 0.7rem;
  }

  /* el cluster sigue siendo shrink-to-fit (los badges se anclan a la TARJETA,
     no al stage: si se estira, target y lock se despegan de la tarjeta), pero
     ahora topa en el ancho del stage */
  .demo--step-goal .sg-cluster,
  .demo--step-plan .sp-cluster,
  .demo--step-launch .sl-cluster { min-width: 0; max-width: 100%; }

  /* los dos unicos badges que vuelan 0.9rem (14.4px) se pasaban 3.2px de la
     caja de la escena en cuanto el stage baja a 0.7rem de padding. Vuelan
     0.7rem, que es EXACTAMENTE lo que ya vuelan sp-chip, sl-roi y sg-lock en
     la hoja base: quedan al ras del padding, sin salirse ni un pixel, y sin
     inventar un valor nuevo ni cambiar su tamano. Se mueven 2.4px. */
  .demo--step-goal .sg-target { right: -0.7rem; }
  .demo--step-launch .sl-check { right: -0.7rem; }

  /* la sp-card conserva su ancho fijo en px (sus caras de flip son absolutas y
     un % la colapsa a 0, bug documentado en step-plan.css); el tope relativo se
     le pone con max-width, que no toca el width usado cuando si cabe */
  .demo--step-plan .sp-card { max-width: 100%; }

  /* la fila de la campana era la pieza rigida de la tarjeta: su min-content
     (230px) no dejaba encoger la card. "Spring Promo · Newport Beach" envuelve
     en dos lineas en vez de truncarse: no se pierde ni una palabra del copy. */
  .demo--step-launch .sl-card > * { min-width: 0; }
  .demo--step-launch .sl-camp__name {
    min-width: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.25;
  }
}

/* ============================================================================
   BLOQUE 2 · hasta 430px · iPHONE
   r6 C34-escenas: ajuste fino sobre el sistema compacto. Todo lo de arriba
   sigue vigente; aqui solo lo que a 375-430px queda al limite.
   ========================================================================== */
@media (max-width: 430px) {

  /* r6 C34-escenas · social: los cortes ceden 8px para no forzar una segunda
     fila a 375px (3 clips + 2 gaps sobre 322px utiles) */
  .demo--social .sc-cut { width: 4.9rem; }

  /* r6 C34-escenas · crm: a 375px el carril mide 150px; la etiqueta larga
     ("QUOTE SENT") entra justa, se le quita tracking en vez de tamano */
  .demo--crm .crm-col__head { letter-spacing: 0.03em; }

  /* r6 C34-escenas · ops: idem, SCHEDULED es la etiqueta critica */
  .demo--ops .dm-col__head { letter-spacing: 0.02em; }
}

/* ============================================================================
   BLOQUE 3 · hasta 374px · iPHONE SE DE PRIMERA GENERACION Y SIMILARES
   r6 C34-escenas: fuera de los escalones que pidio Cesar (375, 390, 430), pero
   el agente C lo dejo apuntado en su contrato: a 320px de ventana el shell da
   280px y `.dm-phone` mide 300px fijos, asi que el telefono, la tarjeta de
   find y los paneles de social se pasaban entre 17 y 32px (clipeados, sin
   scroll horizontal). Aqui se les devuelve el ancho: padding minimo, el
   telefono pasa a fluido y los hijos de cada cluster pueden encoger por
   debajo de su min-content.
   Se limita a <=374 para no rozar los tres anchos aprobados.
   ========================================================================== */
@media (max-width: 374px) {
  .demo .demo__cluster { padding-inline: 0.2rem; }
  /* sin esto el min-content del hijo ensancha la pista del grid del cluster */
  .demo .demo__cluster > *,
  .demo .sc-engage > *,
  .demo .sc-dm > *,
  .demo .sc-comment > * { min-width: 0; }
  /* red de seguridad: solo actua si una palabra sola no cabe */
  .demo .dm-bubble { overflow-wrap: break-word; }
  .demo .dm-phone { width: min(300px, 100%); }
  .demo--find .df-browser { width: 100%; }
  /* con 280px de caja el carril de crm baja a ~125px: el titulo de la app y
     el nombre del lead dejan de truncarse y envuelven */
  .demo--crm .crm-title b { font-size: 0.78rem; white-space: normal; overflow: visible; text-overflow: clip; }
  .demo--crm .crm-card__row b { white-space: normal; overflow: visible; text-overflow: clip; }
  /* a 320px el reparto en dos columnas deja el reel en 112px y ahi ya no
     conviven el pill PUBLISHED, el handle, la pastilla de sitio a dos lineas
     y la banda del caption. Por debajo de 375 la escena vuelve a apilarse:
     reel de 200px centrado arriba y los dos paneles a ancho completo abajo,
     que es la unica forma de que todo se lea a esa anchura. Cuesta alto, y a
     320px es el intercambio correcto. */
  .demo--social .demo__cluster {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(2.8rem, auto) auto minmax(6.4rem, auto) minmax(5.6rem, auto);
    column-gap: 0;
  }
  .demo--social .sc-reel {
    grid-column: 1;
    grid-row: 2;
    width: min(200px, 100%);
    justify-self: center;
  }
  .demo--social .sc-engage { grid-column: 1; grid-row: 3; }
  .demo--social .sc-dm { grid-column: 1; grid-row: 4; }
  .demo--social .sc-cut { width: 4.4rem; }
  .demo--social .sc-comment .dm-bubble--in,
  .demo--social .sc-dm .dm-bubble--in { max-width: 100%; }
}