/* ════════════════════════════════════════════════════════════
   PRESTIO · COMPONENTES Y OVERRIDES
   ════════════════════════════════════════════════════════════
   Lo exclusivo de este case y sus ajustes sobre los componentes
   compartidos. Carga DESPUÉS de todas las hojas de shared/, por eso puede
   sobrescribirlas. Enlazada en esa posición exacta en index.html.
   ════════════════════════════════════════════════════════════ */

/* PRESTIO brand #2C635C · shells pastel atenuados (~12–25% tinta) */
  :root {
    --case-accent: #2C635C;
    --case-ui-grad: linear-gradient(
      148deg,
      #EBF0EF 0%,
      #D6E1E0 38%,
      #C2D2D0 68%,
      #F0F4F3 100%
    );
    --case-spotlight-radial: rgba(90, 154, 144, 0.22);
    --case-spotlight-wash: rgba(44, 99, 92, 0.32);
    --case-spotlight-wash-mid: rgba(44, 99, 92, 0.16);
  }

/* PRESTIO · cierre con tinte de marca #2C635C */
  .impact--finale .impact-takeaway.impact-takeaway--hero-close {
    --takeaway-deep: #0c1413;
    --takeaway-em: #6BA89E;
}

  /* Problema + objetivos · layout tipo app case */
  .story-context__grid {
    display: grid;
    gap: clamp(28px, 4vw, 40px);
    align-items: start;
}
  .story-context__copy h2 {
    margin: 0 0 1rem;
}
  .story-context__copy p {
    margin: 0 0 1rem;
    max-width: 42ch;
}
  .story-context__copy p:last-child { margin-bottom: 0;
}
  .story-context__copy .surface-list { margin-top: 0.5rem;
}
  @media (min-width: 900px) {
    .story-context__grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      column-gap: clamp(32px, 4.5vw, 56px);
}
  }

  /* Scoped: ".story-section p" (0,1,1) le ganaba a ".act-head__lead"
     (0,1,0) y el lead del acto salía a tamaño de cuerpo. */
  .act-head .act-head__lead {
    margin: 0;
    max-width: 48ch;
    font-size: 16px;
    line-height: 1.55;
    letter-spacing: -0.011em;
    color: var(--color-body, #52525B);
    text-wrap: pretty;
}

  /* Ritmo del head de Decisiones · igual al master (KIVO) */
  .decisions-act > .act-head {
    margin-bottom: clamp(36px, 5.5vw, 52px);
    max-width: 44rem;
    gap: 14px;
}

  /* Impacto · misma medida de lead y grid de 3 (no 2 + huérfana) que el master */
  .impact--finale .impact-head__lead {
    max-width: 46ch;
}

  .impact--finale .impact-grid {
    grid-template-columns: 1fr;
}

  @media (min-width: 768px) {
    .impact--finale .impact-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
}
  }

  /* Decisiones · tabs (01) · caja al ratio real del screenshot (iPhone ~9:19.5),
     64% del ancho (dos recortes de 20% acumulados), misma proporción. */
  .decisions-act .split-show__preview {
    padding-bottom: 0;
    aspect-ratio: 390 / 844;
    height: auto;
    max-width: 64%;
    margin-inline: auto;
}

  /* Mapa de módulos · SVG ya trae su propio fondo/estilo (transparente) —
     sin shell blanco + pastel detrás, que se nota al no ser una captura opaca. */
  .decisions-act .decision__stage > .figure-block.figure-block--secondary > .figure-frame {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}
  .decisions-act .decision__stage > .figure-block.figure-block--secondary > .figure-frame img {
    background: transparent;
}

  /* Mapa de módulos · 30% más chico, centrado */
  .decisions-act .decision__stage > .figure-block.figure-block--secondary {
    max-width: 70%;
    margin-inline: auto;
}

  /* Decisión 02 · video del switch de tarjeta, 30% más chico y centrado
     (mismo criterio que el mapa de módulos) */
  .decisions-act .decision__stage--spotlight {
    max-width: 70%;
    margin-inline: auto;
}

  /* mismo tratamiento que las imágenes dentro de figure-frame (las reglas
     compartidas son ".figure-frame img") */
  .decisions-act .decision__stage--spotlight .figure-frame video {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    background: transparent;
}

  /* Control de pausa del video — requisito de accesibilidad para contenido
     en loop automático (WCAG 2.2.2): siempre visible, no depende de hover. */
  .decisions-act .decision__stage--spotlight .figure-frame {
    position: relative;
}
  .decision-video__toggle {
    position: absolute;
    right: 14px;
    bottom: 14px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(16, 16, 18, 0.55);
    color: #fff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    cursor: pointer;
    transition: background 150ms ease, transform 150ms ease;
}
  .decision-video__toggle:hover { background: rgba(16, 16, 18, 0.72);
}
  .decision-video__toggle:active { transform: scale(0.94);
}
  .decision-video__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px;
}
  .decision-video__toggle .icon-play { display: none;
}
  .decision-video__toggle.is-paused .icon-play { display: block;
}
  .decision-video__toggle.is-paused .icon-pause { display: none;
}

  /* Decisión 03 · collage Comercios + Movimientos, 2 pantallas lado a lado.
     Antes se forzaba aspect-ratio 1/1.618 + object-fit:cover sobre capturas
     de 786×1704 (1:2.168), para evitar un shell mucho más alto que ancho
     frente a las capturas de escritorio de Kivo/Pivot. Pero ese recorte solo
     dejaba visible 1.618/2.168 = 74.6%: se comía el 25% inferior de ambas
     pantallas, incluida la tab bar — el elemento que sostiene la decisión 01.
     El motivo del recorte tampoco se sostiene: dos phones lado a lado ya
     forman un bloque de ~1588×1704, es decir 1:1.07, casi cuadrado. Se
     muestran completas. */
  .figure-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(10px, 1.6vw, 16px);
    align-items: start;
}
  .figure-pair .figure-frame {
    width: auto;
}
  .figure-pair .figure-frame img {
    width: 100%;
    height: auto;
    max-height: none;
}

  /* Variante de una sola captura. La decisión 03 llevaba un par, pero su
     segunda imagen era el mismo archivo que ya usa el inventario de
     superficies (surface-movimientos.png): repetido al mismo tamaño y con el
     mismo encuadre no se lee como recuperación de un motivo, sino como
     copiar-pegar. Comercios sí tiene captura propia para la calle
     (map-comercios.png), así que la decisión se queda con esa sola y el
     argumento de movimientos lo sostiene la lista de la izquierda.
     Media columna centrada: un phone a ancho completo se vuelve una torre. */
  .figure-pair--single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 50%;
    margin-inline: auto;
}