/* ════════════════════════════════════════════════════════════
   KIVO · 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.
   ════════════════════════════════════════════════════════════ */

/* KIVO · overrides del case (shared: theme / layout / master-look / ref-cards / motion)
   No redefinir: zigzag genérico, DS finale, impact-facts, eyebrows, shells base. */
:root { --phone-ui-height: clamp(440px, 56vh, 600px);
}

/* Cinco superficies · 2 cols escalonadas + colores por rol + escala compacta */
.split-show-section .split-show__preview {
  --preview-scale: 0.78;
  width: calc(100% * var(--preview-scale));
  padding-bottom: 0 !important;
  height: auto;
  border-radius: var(--kivo-ui-radius, 16px);
  background: color-mix(in srgb, var(--role-color, #A1A1AA) 22%, #f5f5f4) !important;
  box-shadow:
    0 1px 2px rgba(16, 16, 18, 0.04),
    0 24px 60px -32px color-mix(in srgb, var(--role-color, #101012) 40%, transparent);
  overflow: hidden;
}

.split-show-section .split-show__preview--sm {
  aspect-ratio: 1 / 1;
}

.split-show-section .split-show__preview--md {
  aspect-ratio: 100 / 142;
}

.split-show-section .split-show__preview-media {
  inset: var(--kivo-ui-pad, 12px);
  border-radius: var(--kivo-ui-radius-inner, 11px);
  overflow: hidden;
  background: transparent;
}

.split-show-section .split-show__preview-media img {
  border-radius: 0;
  object-fit: cover;
  object-position: top center;
}

@media (min-width: 768px) {
  .split-show-section .split-show__col--right {
    margin-top: clamp(64px, 11vw, 120px);
}
}

@media (max-width: 767px) {
  .split-show-section .split-show__preview {
    --preview-scale: 0.86;
}
}

/* Hero · a sangre, sin letterbox (pisa height:720 de case-layout) */
.story-masthead + .story-media .figure-frame {
  height: auto !important;
  min-height: 0 !important;
  border-radius: 14px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.story-masthead + .story-media .figure-frame img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: unset !important;
  border-radius: 14px;
  transform: none !important; /* sin Ken Burns: evita aliasing en UI */
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Carrusel B2C · solo 2 pantallas a la vista en horizontal
   4 pasos en loop (set duplicado para scroll infinito) */
.decision__stage--flow,
.decision__stage--flow .b2c-carousel,
.decision__stage--flow .figure-block--b2c-flow {
  overflow: visible;
}

.b2c-carousel {
  margin: 0;
}

.b2c-carousel__viewport {
  overflow: hidden;
  width: 100%;
  container-type: inline-size;
  container-name: b2c-flow;
  padding-top: 8px;
  padding-bottom: 48px;
  margin-top: -8px;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 4.5%,
    #000 95.5%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 4.5%,
    #000 95.5%,
    transparent 100%
  );
}

.b2c-carousel__track {
  display: flex;
  width: max-content;
  animation: b2c-carousel-scroll 52s linear infinite;
  will-change: transform;
}

.b2c-carousel:hover .b2c-carousel__track,
.b2c-carousel:focus-within .b2c-carousel__track,
.b2c-carousel__viewport:hover .b2c-carousel__track {
  animation-play-state: paused;
}

/*
 * Altura ÚNICA de phones · carrusel B2C y Staff App
 * Misma variable, misma regla de tamaño (sin max-width que despareje)
 */
.decisions-act {
  --phone-ui-height: clamp(440px, 56vh, 600px);
}

/* Fila horizontal · gap corto entre pantallas */
.b2c-carousel__set {
  --b2c-gap: clamp(8px, 1vw, 14px);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: var(--b2c-gap);
  box-sizing: border-box;
  width: max-content;
  flex: 0 0 auto;
  padding-right: var(--b2c-gap);
}

.b2c-carousel__slide {
  width: auto;
  flex: 0 0 auto;
  min-width: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  line-height: 0;
}

.b2c-carousel__slide img {
  display: block;
  height: var(--phone-ui-height);
  width: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: top center;
  pointer-events: none;
  user-select: none;
  border: none;
  border-radius: 14px;
  background: transparent;
  box-shadow:
    0 1px 2px rgba(16, 16, 18, 0.05),
    0 12px 28px -12px rgba(16, 16, 18, 0.18),
    0 24px 44px -20px rgba(16, 16, 18, 0.1);
}

@keyframes b2c-carousel-scroll {
  from { transform: translate3d(0, 0, 0);
}
  to { transform: translate3d(-50%, 0, 0);
}
}

@media (prefers-reduced-motion: reduce) {
  .b2c-carousel__track {
    animation: none;
}
  .b2c-carousel__set[aria-hidden="true"] {
    display: none;
}
  .b2c-carousel__set {
    width: 100%;
    flex-wrap: wrap;
}
  .b2c-carousel__viewport {
    -webkit-mask-image: none;
    mask-image: none;
}
}

/* Contexto · dos columnas de texto (problema | criterios de éxito), igual
   que PRESTIO y Pivot. El diagrama del ecosistema salió de la retícula y va
   a ancho completo debajo, como el diagnóstico de Pivot. */
.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__diagram {
  margin: clamp(32px, 5vw, 48px) auto 0;
  min-width: 0;
  max-width: 46rem;
}

.story-context__frame {
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  background: transparent;
}

.story-context__frame img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 900px) {
  .story-context__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(32px, 4.5vw, 56px);
    align-items: start;
}

  .story-context__copy {
    align-self: center;
}

  .story-context__copy h2 {
    max-width: 20ch;
}
}

/* Lead de sección Decisiones (solo texto, bajo el título) */
/* 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;
}

.decisions-act > .act-head {
  margin-bottom: clamp(36px, 5.5vw, 52px);
  max-width: 44rem;
  gap: 14px;
}

/*
 * Matriz · mismo trato que un split texto | media
 * (mismas columnas, gap, tipografía y eje)
 */
.decision--roles-evidence {
  margin-top: clamp(40px, 7vh, 72px); /* ritmo = decision + decision */
  display: grid;
  gap: clamp(20px, 3vw, 28px);
  align-items: center;
  width: 100%;
  min-width: 0;
  overflow: visible;
}

.decision--roles-evidence__copy {
  min-width: 0;
  max-width: none;
  margin: 0 !important;
  padding: 0 !important;
}

/* Misma tipografía que .decision__copy en splits */
.decision--roles-evidence__copy h3 {
  margin: 0 0 0.7rem !important;
  max-width: 15ch !important;
  font-size: clamp(1.2rem, 1.4vw + 0.7rem, 1.5rem) !important;
  letter-spacing: -0.022em;
  line-height: 1.2;
  color: var(--color-ink, #101012);
}

.decision--roles-evidence__copy p {
  margin: 0 !important;
  max-width: 38ch;
  font-size: var(--text-body, 1.0625rem);
  line-height: var(--leading-body, 1.62);
  letter-spacing: -0.011em;
  color: var(--color-body, #52525B);
  text-wrap: pretty;
}

.decision--roles-evidence__copy p strong {
  color: var(--color-ink, #101012);
  font-weight: 600;
}

/* Matriz · fondo de superficie; color solo en nombres de rol.
   Mismos valores oscurecidos que .data-table-wrap (ver nota ahí). */
.role-matrix {
  --role-org: #C34E40;
  --role-cajero: #4A6FA5;
  --role-staff: #547F54;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 10px 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--color-border, #E7E5E4);
  background: var(--color-surface, #FFFFFF);
  box-shadow:
    0 1px 2px rgba(16, 16, 18, 0.04),
    0 10px 28px -16px rgba(16, 16, 18, 0.1);
  overflow: hidden;
  align-self: center;
  box-sizing: border-box;
}

.role-matrix__table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13.5px;
  background: transparent;
}

.role-matrix__table col.role-matrix__col-role {
  width: 28%;
}

.role-matrix__table col.role-matrix__col-cap {
  width: 18%;
}

.role-matrix__table th,
.role-matrix__table td {
  padding: 12px 8px;
  text-align: center;
  border-bottom: 1px solid var(--color-border, #E7E5E4);
  vertical-align: middle;
  word-wrap: break-word;
  background: transparent;
}

.role-matrix__table thead th {
  font-size: 10px;
  font-weight: 550;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-caption, #71717A);
  background: transparent;
  border-bottom: 1px solid var(--color-border, #E7E5E4);
  padding: 6px 8px 10px;
}

.role-matrix__table thead th:first-child {
  text-align: left;
  padding-left: 4px;
}

.role-matrix__table tbody th {
  text-align: left;
  padding-left: 4px;
  font-weight: 600;
  letter-spacing: -0.015em;
  white-space: normal;
  background: transparent;
}

.role-matrix__table tbody th small {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 450;
  color: var(--color-caption, #71717A);
}

/* Color solo en el nombre del rol */
.role-matrix__row--org .role-matrix__name {
  color: var(--role-org);
}

.role-matrix__row--cajero .role-matrix__name {
  color: var(--role-cajero);
}

.role-matrix__row--staff .role-matrix__name {
  color: var(--role-staff);
}

.role-matrix__table tbody td {
  background: transparent;
}

.role-matrix__table tbody tr:last-child th,
.role-matrix__table tbody tr:last-child td {
  border-bottom: 0;
}

.role-matrix__yes {
  color: var(--color-accent, #E04A1E);
  font-weight: 700;
  font-size: 14px;
}

.role-matrix__no {
  color: #C4C4C8;
  font-weight: 500;
  font-size: 13px;
}

@media (min-width: 900px) {
  /*
   * Idéntico a split “texto | media” (POS / MVP):
   * columnas 0.9 / 1.2 · gap · align center · copy con margen
   */
  .decision--roles-evidence {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr);
    column-gap: clamp(28px, 4vw, 52px);
    row-gap: 0;
    align-items: center;
}

  .decision--roles-evidence__copy {
    margin: 0 !important;
    margin-right: clamp(6px, 1.2vw, 16px) !important;
    align-self: center;
    max-width: none;
}

  .decision--roles-evidence__copy h3 {
    max-width: 15ch !important;
}

  .decision--roles-evidence__copy p {
    max-width: 38ch;
}

  .role-matrix {
    width: 100%;
    max-width: none;
    min-width: 0;
    padding: 12px 14px 14px;
    align-self: center;
}

  .role-matrix__table th,
  .role-matrix__table td {
    padding: 14px 10px;
}

  .role-matrix__table thead th {
    padding: 6px 10px 12px;
    font-size: 11px;
}

  .role-matrix__table thead th:first-child,
  .role-matrix__table tbody th {
    padding-left: 6px;
}
}

/* Staff App · shell solo en la UI; caption fuera del container */
.decision--split--staff .decision--split__media {
  width: fit-content;
  max-width: 100%;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.decision--split--staff .decision__stage {
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0;
  padding: var(--kivo-ui-pad, 12px) !important;
  border-radius: var(--kivo-ui-radius, 16px) !important;
  background: var(--kivo-ui-grad) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow: var(--kivo-ui-shadow) !important;
  overflow: visible !important;
  line-height: 0;
}

.decision--split--staff .figure-frame {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  overflow: visible !important;
  padding: 0 !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0;
  line-height: 0;
}

.decision--split--staff .figure-frame img,
.decision--split--staff .decision__stage img {
  display: block !important;
  height: var(--phone-ui-height) !important;
  width: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  margin-inline: 0;
  object-fit: contain !important;
  object-position: top center;
  border: none !important;
  border-radius: var(--kivo-ui-radius-inner, 11px) !important;
  box-shadow: none !important;
  filter: none !important;
  background: transparent !important;
}

.decision--split--staff .decision--split__caption {
  width: fit-content;
  max-width: 100%;
  margin-inline: 0;
  margin-top: 12px;
  padding: 0;
  text-align: left;
}

/* MVP carousel · shell en stage (figure usa display:contents en desktop) */
.decision--split--mvp .decision__stage--flow {
  margin: 0;
  padding: var(--kivo-ui-pad, 12px);
  border-radius: var(--kivo-ui-radius, 16px);
  background: var(--kivo-ui-grad);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: var(--kivo-ui-shadow);
}

.decision--split--mvp .b2c-carousel__viewport {
  padding-top: 4px;
  padding-bottom: 24px;
  margin-top: 0;
  border-radius: var(--kivo-ui-radius-inner, 11px);
}

.decision--split--mvp .decision--split__caption {
  margin-top: 12px;
  padding-inline: 2px;
}

/* Impact · cierre con más peso editorial */
.impact--finale .impact-head__lead {
  max-width: 46ch;
  color: var(--color-body, #52525B);
}

.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;
}
}

/* Takeaway · cierre hero KIVO · deep + #00CD66 */
.impact--finale .impact-takeaway.impact-takeaway--hero-close {
  --kivo-deep: #04140a;
  --kivo-deep-mid: #0a2414;
  --kivo-brand: #00CD66;
  padding: 0 !important;
  border: none !important;
  background: var(--kivo-deep) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 24px 56px -28px rgba(4, 20, 10, 0.55) !important;
}

.impact--finale .impact-takeaway--hero-close .impact-takeaway__copy {
  background: linear-gradient(
    180deg,
    rgba(4, 20, 10, 0.55) 0%,
    rgba(4, 20, 10, 0.92) 45%,
    var(--kivo-deep) 100%
  );
}

.impact--finale .impact-takeaway__eyebrow {
  font: 400 12px/1 var(--font-label, "Geist", system-ui, sans-serif);
  color: var(--kivo-brand);
}

.impact--finale .impact-takeaway--hero-close blockquote {
  color: #fafaf8 !important;
}

.impact--finale .impact-takeaway--hero-close blockquote em {
  color: var(--kivo-brand) !important;
}





.impact--finale .btn-takeaway--primary {
  color: #04140a;
}



.impact--finale .btn-takeaway--ghost {
  text-decoration: none;
}







@media (min-width: 768px) {
  /* Imagen izq · texto Aprendizaje der */
  

  .impact--finale .impact-takeaway--hero-close .impact-takeaway__copy {
    background: linear-gradient(
      270deg,
      var(--kivo-deep) 0%,
      var(--kivo-deep) 48%,
      rgba(5, 20, 14, 0.88) 68%,
      rgba(5, 20, 14, 0.2) 100%
    );
}

  

  .impact--finale .impact-takeaway--hero-close .impact-takeaway__visual::before {
    /* Fundido hacia el texto (derecha) */
    background: linear-gradient(
      90deg,
      transparent 40%,
      rgba(5, 20, 14, 0.45) 72%,
      var(--kivo-deep) 100%
    );
}

  
}

/* Móvil: imagen arriba, copy abajo (orden DOM) */
@media (max-width: 767px) {
  

  .impact--finale .impact-takeaway--hero-close .impact-takeaway__copy {
    background: var(--kivo-deep);
}
}