/* problem.css — OWNER problem · Slide 2 · "The dexterity gap".
   Rediseño visual + interactivo: medidor de cobertura con toggle Rigid gripper ↔
   DOGMA hand y tiles de casos de uso. Usa sólo variables de css/tokens.css.
   Objetivo: cabe en 100vh (1440×900 / 1280×800) sin scroll interno. */

#slide-3 {
  height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(115% 80% at 82% -12%, rgba(58,107,255,.16), transparent 58%),
    radial-gradient(110% 75% at -8% 112%, rgba(255,59,48,.12), transparent 56%),
    var(--navy-900);
}
/* Glow ambiente que late muy sutil tras el medidor */
#slide-3::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 38% at 50% 52%, rgba(58,107,255,.10), transparent 70%);
  pointer-events: none;
}

.gap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(18px, 3.2vh, 40px);
  padding-top: clamp(20px, 3vh, 34px);
  padding-bottom: clamp(20px, 3vh, 34px);
}

/* ---------- Encabezado ---------- */
.gap__head { max-width: min(680px, 80%); }
.gap__head .eyebrow { display: block; margin-bottom: clamp(8px, 1.4vh, 14px); }
.gap__title {
  font-family: var(--font-head);
  font-size: clamp(1.7rem, 3.4vw, 3.1rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.06;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.gap__easy { color: var(--steel); }
.gap__hard {
  position: relative;
  font-size: 1.12em;
  background: linear-gradient(120deg, var(--red-soft), var(--red));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  white-space: nowrap;
}

/* ====================================================================
   CENTRO INTERACTIVO — toggle + medidor
   ==================================================================== */
.gap__stage {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "switch meter"
    "caption caption";
  align-items: center;
  column-gap: clamp(24px, 4vw, 64px);
  row-gap: clamp(10px, 1.6vh, 18px);
}

/* ---- Toggle deslizante ---- */
.gap__switch {
  grid-area: switch;
  position: relative;
  display: inline-flex;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(6, 12, 30, .6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.gap__switch-glider {
  position: absolute;
  top: 5px; left: 5px;
  width: calc(50% - 5px);
  height: calc(100% - 10px);
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(58,107,255,.30), rgba(58,107,255,.14));
  border: 1px solid rgba(111,147,255,.5);
  box-shadow: 0 6px 18px -6px rgba(58,107,255,.7);
  transition: transform .45s var(--ease), background .45s var(--ease), border-color .45s var(--ease);
}
.gap__switch.is-hand .gap__switch-glider {
  transform: translateX(100%);
  background: linear-gradient(120deg, rgba(255,59,48,.34), rgba(255,106,95,.16));
  border-color: rgba(255,106,95,.55);
  box-shadow: 0 6px 20px -6px rgba(255,59,48,.75);
}
.gap__switch-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: clamp(.5rem, 1.1vh, .72rem) clamp(.9rem, 1.5vw, 1.35rem);
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: clamp(.78rem, .95vw, .92rem);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--muted);
  white-space: nowrap;
  transition: color .35s var(--ease);
}
.gap__switch-btn.is-active { color: var(--ink); }
.gap__switch-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--steel-dim);
  transition: background .35s var(--ease), box-shadow .35s var(--ease);
}
.gap__switch-btn[data-mode="gripper"].is-active .gap__switch-dot {
  background: var(--accent-soft); box-shadow: 0 0 10px var(--accent);
}
.gap__switch-btn[data-mode="hand"].is-active .gap__switch-dot {
  background: var(--red-soft); box-shadow: 0 0 10px var(--red);
}

/* ---- Lectura grande + barra ---- */
.gap__meter { grid-area: meter; min-width: 0; }
.gap__num {
  display: flex;
  align-items: baseline;
  gap: .15rem;
  font-family: var(--font-head);
  line-height: .9;
  margin-bottom: clamp(8px, 1.4vh, 14px);
}
.gap__num span {
  font-size: clamp(3rem, 7vw, 5.6rem);
  font-weight: 700;
  letter-spacing: -.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.gap__num i {
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  font-weight: 600;
  font-style: normal;
  color: var(--accent-soft);
  transition: color .4s var(--ease);
}
.gap__stage .gap__switch.is-hand ~ .gap__meter .gap__num i,
.gap.is-hand .gap__num i { color: var(--red-soft); }
.gap__num-sub {
  margin-left: clamp(.6rem, 1.4vw, 1.2rem);
  align-self: center;
  font-family: var(--font-body);
  font-size: clamp(.74rem, .95vw, .9rem);
  font-weight: 400;
  color: var(--muted);
  letter-spacing: .01em;
}

.gap__bar {
  position: relative;
  height: clamp(20px, 2.6vh, 28px);
  border-radius: 999px;
  background: rgba(138,152,189,.12);
  border: 1px solid var(--line);
  overflow: visible;
}
.gap__bar-fill {
  position: absolute;
  inset: 0;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
  box-shadow: 0 0 22px -2px rgba(58,107,255,.6);
  transition: width .85s var(--ease), background .5s var(--ease), box-shadow .5s var(--ease);
}
.gap.is-hand .gap__bar-fill {
  background: linear-gradient(90deg, var(--accent) 0 38%, var(--red) 78%, var(--red-soft));
  box-shadow: 0 0 26px -2px rgba(255,59,48,.55);
}
/* Línea-techo: el límite del gripper (40%) */
.gap__bar-ceiling {
  position: absolute;
  top: -6px; bottom: -6px;
  left: 40%;
  width: 2px;
  background: repeating-linear-gradient(var(--steel) 0 4px, transparent 4px 8px);
  opacity: .8;
}
.gap__bar-tag {
  position: absolute;
  top: calc(100% + 9px);
  font-size: clamp(.66rem, .82vw, .76rem);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.gap__bar-tag--auto { left: 0; color: var(--accent-soft); }
.gap__bar-tag--gap {
  left: 40%;
  padding-left: 10px;
  color: var(--red-soft);
  transition: color .4s var(--ease), opacity .4s var(--ease);
}
.gap.is-hand .gap__bar-tag--gap { color: var(--steel); }

.gap__caption {
  grid-area: caption;
  /* Aire extra: separa la frase de la barra y de sus etiquetas inferiores */
  margin-top: clamp(20px, 3.4vh, 40px);
  max-width: 70ch;
  font-size: clamp(.86rem, 1.05vw, 1.02rem);
  line-height: 1.5;
  color: var(--muted);
}
.gap__caption strong { color: var(--ink); font-weight: 600; }

/* ====================================================================
   TILES DE CASOS DE USO
   ==================================================================== */
.gap__cases-title {
  font-family: var(--font-head);
  font-size: clamp(.7rem, .85vw, .78rem);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-soft);
  margin-bottom: clamp(10px, 1.6vh, 16px);
}
.gap__cases-title span {
  color: var(--steel-dim);
  letter-spacing: .04em;
  text-transform: none;
  font-weight: 400;
}
.gap__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1vw, 16px);
}
.gap__tile {
  position: relative;
  height: clamp(130px, 19vh, 168px);
  padding: clamp(12px, 1.3vw, 18px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--glass);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  overflow: hidden;
  cursor: default;
  outline: none;
  transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.gap__tile-icon {
  display: inline-flex;
  width: clamp(34px, 3vw, 44px);
  height: clamp(34px, 3vw, 44px);
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(58,107,255,.12);
  color: var(--accent-soft);
  transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.gap__tile-icon svg { width: 56%; height: 56%; }
.gap__tile-name {
  display: block;
  margin-top: clamp(10px, 1.4vh, 16px);
  font-family: var(--font-head);
  font-size: clamp(.82rem, 1vw, .98rem);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -.01em;
  transition: transform .35s var(--ease);
}
/* Descripción: oculta abajo, sube al hover/focus */
.gap__tile-desc {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(12px, 1.3vw, 18px);
  padding-top: clamp(20px, 2.4vh, 30px);
  font-size: clamp(.7rem, .82vw, .8rem);
  line-height: 1.35;
  color: var(--steel);
  background: linear-gradient(to top, rgba(6,12,30,.96) 55%, transparent);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  pointer-events: none;
}
.gap__tile:hover,
.gap__tile:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(111,147,255,.55);
  background: rgba(15,31,85,.6);
  box-shadow: 0 22px 40px -22px rgba(58,107,255,.8), 0 0 0 1px rgba(111,147,255,.18) inset;
}
.gap__tile:hover .gap__tile-icon,
.gap__tile:focus-visible .gap__tile-icon {
  transform: scale(1.08) rotate(-4deg);
  background: linear-gradient(135deg, var(--accent), rgba(255,59,48,.85));
  border-color: transparent;
  color: #fff;
}
.gap__tile:hover .gap__tile-name,
.gap__tile:focus-visible .gap__tile-name { transform: translateY(-2px); }
.gap__tile:hover .gap__tile-desc,
.gap__tile:focus-visible .gap__tile-desc { opacity: 1; transform: none; }

/* ---------- Entrada (cosmética) ----------------------------------------
   IMPORTANTE: el contenido es VISIBLE POR DEFECTO. La animación sólo se
   reproduce cuando el JS añade .in al entrar en vista. Si el JS no corre o
   falla, NADA queda oculto. */
[data-reveal].in { animation: gap-rise .7s var(--ease) both; }
@keyframes gap-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
/* Entrada escalonada de tiles (sólo al revelar) */
.gap__cases.in .gap__tile {
  animation: gap-tile-in .55s var(--ease) both;
  animation-delay: calc(var(--i) * 70ms + 150ms);
}
@keyframes gap-tile-in {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  #slide-3 { height: auto; min-height: 100vh; }
  .gap__stage {
    grid-template-columns: 1fr;
    grid-template-areas: "switch" "meter" "caption";
  }
  .gap__switch { justify-self: start; }   /* el toggle no se estira... */
  .gap__meter, .gap__caption { width: 100%; } /* ...pero el medidor/barra sí ocupan todo */
  .gap__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .gap { padding-top: 72px; }
  .gap__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gap__num-sub { display: none; }
  /* Etiquetas de la barra: una a cada extremo para que NO se encimen en móvil */
  .gap__bar-tag { font-size: .58rem; letter-spacing: .02em; }
  .gap__bar-tag--auto { left: 0; }
  .gap__bar-tag--gap { left: auto; right: 0; padding-left: 0; text-align: right; }
  .gap__caption { margin-top: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal].in, .gap__cases.in .gap__tile { animation: none; }
  .gap__tile, .gap__bar-fill, .gap__switch-glider { transition: none; }
}