/* =====================================================================
   CASOS — la conversación, no el testimonio.

   Antes era un acordeón, después una tabla de antes/después. Las dos
   DESCRIBÍAN el producto. Esto lo MUESTRA: el agente atendiendo, con el
   texto que realmente manda. Es la prueba más barata de leer que tiene
   la página — nadie necesita que le expliquen un chat.

   Mismo formato que las otras dos escenas: la pregunta entra sola, se
   achica y le pasa la posta a la píldora .ask-pill. Las tres charlas
   rotan con el mismo motor de --p que el zseq (js/v2.js reparte el
   tramo restante entre los [data-slide]).

   Los mensajes no se revelan con scroll: se animan al encenderse la
   charla, escalonados. Una conversación tiene ritmo propio y atarla al
   dedo del visitante la vuelve un carrusel, no una charla.
   ===================================================================== */

.casos{
  position:relative;
  background:var(--ground-deep);
  height:520vh;
  overflow:clip;

  /* ---- Tramos ---- */
  --ask:  clamp(0, calc((var(--p,0) - .12) / .16), 1);
  --ask-out: clamp(0, calc((1 - var(--ask)) / .45), 1);
  --ask-in:  clamp(0, calc((var(--ask) - .70) / .30), 1);
}

.casos__pin{
  position:sticky;top:0;
  height:100svh;
  display:grid;place-items:center;
  overflow:clip;
}
.casos__pin > *{grid-area:1 / 1}

/* =====================================================================
   LA PREGUNTA — mismo relevo que en soluciones
   ===================================================================== */
.casos__ask{
  justify-self:center;
  max-width:min(92vw, 1160px);
  margin:0;
  text-align:center;
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  /* Medido: 963px a 70px, con 1160 de tope. Una línea. */
  font-size:clamp(30px, 4.9vw, 70px);
  line-height:1.0;
  letter-spacing:var(--ls-hero);
  color:var(--paper);
  text-wrap:balance;
  transform:
    translate3d(0, calc(var(--ask) * -33vh), 0)
    scale(calc(1 - var(--ask) * .74));
  transform-origin:center center;
  opacity:var(--ask-out);
  will-change:transform, opacity;
}
.casos__ask b{font-weight:inherit;color:var(--cyan-400)}

.casos__answer{
  width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;
  gap:clamp(20px, 2.6vw, 34px);
  padding:calc(var(--nav-h) + 2.4vh) 0 3vh;
  opacity:var(--ask-in);
}
.casos__pill{pointer-events:none}

/* =====================================================================
   EL ESCENARIO — un caso = teléfono + ficha, en una sola pieza

   Cada caso se lleva su charla Y su ficha adentro. Antes las charlas
   vivían en un teléfono y las fichas en otra columna: en escritorio
   funcionaba, pero apiladas en un teléfono no había forma de intercalar
   cada charla con la suya, y se veía sólo la primera de las tres.
   ===================================================================== */
.casos__stage{
  position:relative;
  width:100%;
  max-width:var(--container-max);
  margin-inline:auto;
  padding-inline:var(--container-pad);
  min-height:clamp(430px, 58vh, 560px);
}

.caso{
  position:absolute;
  inset:0 var(--container-pad);
  display:grid;
  grid-template-columns:minmax(0, 360px) minmax(0, 1fr);
  gap:clamp(28px, 5vw, 88px);
  align-items:center;
  opacity:0;visibility:hidden;
  transition:opacity 420ms var(--ease-standard),
             visibility 0s linear 420ms;
}
.caso.is-on{opacity:1;visibility:visible;transition-delay:0s}

/* =====================================================================
   EL TELÉFONO
   No es un clon de WhatsApp: es la misma gramática — barra arriba,
   burbujas con cola, hora y tildes — pero con la paleta de la marca.
   Copiarlo pixel a pixel lo haría pasar por una captura, y esto es una
   demostración de producto, no un registro real.
   ===================================================================== */
.chat{
  position:relative;
  border-radius:clamp(24px, 2.6vw, 34px);
  background:#071324;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 40px 80px rgba(0,6,20,.55);
  overflow:hidden;
  display:flex;flex-direction:column;
  height:clamp(430px, 58vh, 560px);
}

.chat__bar{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4) var(--space-4);
  background:rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.08);
  flex:0 0 auto;
}
.chat__avatar{
  width:36px;height:36px;border-radius:var(--radius-pill);
  background:var(--grad-brand, linear-gradient(135deg,#024FCE,#0CC0DF));
  display:grid;place-items:center;flex:0 0 auto;
}
.chat__avatar img{width:20px;height:auto;display:block}
.chat__who{min-width:0}
.chat__name{
  display:block;
  font-family:var(--font-body);
  font-size:var(--text-sm);font-weight:var(--fw-semibold);
  color:var(--paper);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chat__state{
  display:flex;align-items:center;gap:6px;
  font-family:var(--font-body);
  font-size:var(--text-3xs);color:var(--paper-mute);
}
.chat__state::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--green-400);flex:0 0 auto;
}

/* El cuerpo ancla abajo: una charla se lee desde el último mensaje. */
.chat__body{
  flex:1 1 auto;min-height:0;
  padding:var(--space-4);
  display:flex;flex-direction:column;justify-content:flex-end;
  gap:var(--space-2);
}

.chat__msg{
  max-width:82%;
  padding:9px 12px;
  border-radius:14px;
  font-family:var(--font-body);
  font-size:clamp(12.5px, .95vw, 14px);
  line-height:1.42;
  color:var(--paper);
  opacity:0;
  transform:translate3d(0, 10px, 0);
}
/* Sólo animan cuando su charla está en pantalla: si corrieran al cargar,
   el visitante llega a una conversación que ya pasó. */
.caso.is-on .chat__msg{
  animation:chatIn 460ms var(--ease-out-soft) both;
  animation-delay:calc(var(--i, 0) * 420ms);
}
@keyframes chatIn{ to{opacity:1;transform:none} }

.chat__msg--in{
  align-self:flex-start;
  background:rgba(255,255,255,.085);
  border-bottom-left-radius:5px;
}
.chat__msg--out{
  align-self:flex-end;
  background:rgba(12,192,223,.16);
  border:1px solid rgba(12,192,223,.24);
  border-bottom-right-radius:5px;
}

.chat__meta{
  display:block;text-align:right;
  margin-top:3px;
  font-size:var(--text-3xs);
  color:var(--paper-mute);
  letter-spacing:.02em;
}
.chat__msg--out .chat__meta{color:var(--cyan-200)}

/* Los puntitos: aparecen y se van justo antes de que llegue la
   respuesta. Es lo que hace que el agente parezca escribir y no
   contestar de golpe. */
.chat__typing{
  align-self:flex-start;
  display:flex;gap:4px;
  padding:11px 13px;
  border-radius:14px;border-bottom-left-radius:5px;
  background:rgba(255,255,255,.085);
  opacity:0;
  /* Colapsa al irse: si sólo se desvaneciera seguiría ocupando su alto
     y quedaría un hueco entre la pregunta y la respuesta. */
  overflow:hidden;
}
.caso.is-on .chat__typing{
  animation:typeCycle 1500ms var(--ease-standard) both;
  animation-delay:calc(var(--i, 0) * 420ms);
}
@keyframes typeCycle{
  0%  {opacity:0;transform:translate3d(0,10px,0);
       max-height:0;padding-top:0;padding-bottom:0}
  14% {max-height:46px;padding-top:11px;padding-bottom:11px}
  22% {opacity:1;transform:none}
  80% {opacity:1;transform:none;
       max-height:46px;padding-top:11px;padding-bottom:11px}
  100%{opacity:0;transform:none;
       max-height:0;padding-top:0;padding-bottom:0}
}
.chat__typing i{
  width:6px;height:6px;border-radius:50%;
  background:var(--paper-mute);
  animation:typeDot 1200ms infinite ease-in-out;
}
.chat__typing i:nth-child(2){animation-delay:150ms}
.chat__typing i:nth-child(3){animation-delay:300ms}
@keyframes typeDot{
  0%,60%,100%{opacity:.35;transform:translateY(0)}
  30%{opacity:1;transform:translateY(-3px)}
}

/* =====================================================================
   LA FICHA — de quién es la charla
   ===================================================================== */
.casos__info{
  display:flex;flex-direction:column;justify-content:center;
  min-width:0;
}

/* EL RUBRO — lo primero que se lee de la ficha. Antes era un ícono de
   línea y una etiqueta de 11px en gris: la vista los salteaba y no se
   sabía de qué negocio era la charla.

   Ahora es una escena de día en el estilo del hero (el frente del
   consultorio, la casa en venta, el local de comida; salen de
   tools/hero-draw.js) sobre un tinte del tono de la tarjeta, y debajo
   el rubro como etiqueta de color. Adentro de .panel, --cyan-400 ya es
   el tono de la tarjeta (data-tone): sky, park o jaca. */
.caso__scene{
  display:block;width:100%;max-width:340px;height:auto;
  aspect-ratio:320 / 150;
  border-radius:calc(var(--radius-lg) - 8px);
  background:color-mix(in srgb, var(--cyan-400) 14%, var(--white));
  margin-bottom:var(--space-5);
}
.caso__kind{
  display:inline-flex;align-items:center;gap:var(--space-2);
  align-self:flex-start;
  padding:6px 14px 6px 10px;border-radius:var(--radius-pill);
  background:color-mix(in srgb, var(--cyan-400) 12%, transparent);
  font-family:var(--font-body);
  font-size:var(--text-sm);font-weight:var(--fw-semibold);
  /* El tono puro sobre su propio tinte no llegaba a 4,5:1 (jaca: 4,3).
     Un cuarto de azul noche lo baja sin cambiarle el color. */
  color:color-mix(in srgb, var(--cyan-400) 75%, var(--blue-950));
  margin-bottom:var(--space-4);
}
.caso__kind .ico{--ico-size:18px}
.caso__name{
  font-family:var(--font-display);
  font-weight:var(--fw-bold);
  font-size:clamp(24px, 3vw, 44px);
  line-height:1.04;letter-spacing:var(--ls-hero);
  color:var(--paper);margin:0 0 var(--space-5);
  text-wrap:balance;
}
.caso__note{
  font-family:var(--font-body);
  font-size:clamp(14px, 1.1vw, 17px);
  line-height:1.55;color:var(--paper-dim);
  max-width:44ch;margin:0;
  padding-left:var(--space-4);
  border-left:2px solid var(--cyan-400);
  text-wrap:pretty;
}

/* Riel: cuántas charlas hay, en cuál va y DE QUÉ RUBRO es cada una.
   Antes eran tres guiones mudos; con el nombre abajo se ve de entrada
   que hay tres negocios distintos. La raya del activo toma el tono de
   su tarjeta, en el paso claro (sobre el suelo oscuro). */
.casos__rail{
  display:flex;gap:var(--space-6);
  justify-content:center;
}
.casos__tick{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--font-body);
  font-size:var(--text-2xs);font-weight:var(--fw-semibold);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--paper-mute);
  transition:color 300ms var(--ease-standard);
}
.casos__tick::before{
  content:"";width:100%;min-width:34px;height:3px;border-radius:2px;
  background:rgba(255,255,255,.16);
  transition:background 300ms var(--ease-standard);
}
.casos__tick:nth-child(1){--t:var(--sky-300)}
.casos__tick:nth-child(2){--t:var(--park-300)}
.casos__tick:nth-child(3){--t:var(--jaca-400)}
.casos__tick.is-on{color:var(--paper)}
.casos__tick.is-on::before{background:var(--t)}
.casos__tick.is-done::before{background:rgba(255,255,255,.4)}

/* =====================================================================
   DEGRADACIONES
   Cinco viewports de pin en un teléfono es scroll secuestrado: los tres
   casos se despliegan, cada charla con su ficha debajo.
   ===================================================================== */
@media (max-width:900px){
  .casos{height:auto;padding-block:var(--space-16);overflow:visible}
  .casos__pin{position:static;height:auto;display:block;overflow:visible;
    padding-inline:var(--container-pad)}
  .casos__pin > *{grid-area:auto}

  .casos__ask{
    transform:none;opacity:1;text-align:left;
    font-size:clamp(28px, 8vw, 46px);max-width:none;
    margin-bottom:var(--space-10);
  }
  .casos__pill{display:none}
  .casos__answer{height:auto;opacity:1;display:block;padding:0}

  .casos__stage{
    position:static;min-height:0;padding-inline:0;
    display:flex;flex-direction:column;gap:var(--space-16);
  }
  /* Más específico que .caso a secas para ganarle a .caso.is-on, que
     es la que gobierna la visibilidad en escritorio. */
  .caso,
  .caso.is-on{
    position:static;inset:auto;
    display:flex;flex-direction:column;gap:var(--space-6);
    opacity:1;visibility:visible;transition:none;
  }
  /* En columna la ficha va ARRIBA del chat: primero se ve de qué
     rubro es (la escena y la etiqueta) y después la charla. Abajo, el
     rubro recién aparecía después de leer toda la conversación. */
  .casos__info{order:-1}
  .chat{height:auto;min-height:0}
  .chat__body{min-height:320px}
  .caso .chat__msg{opacity:1;transform:none;animation:none}
  .chat__typing{display:none}
  .casos__rail{display:none}
}

@media (prefers-reduced-motion: reduce){
  .casos{height:auto;padding-block:var(--space-16);overflow:visible}
  .casos__pin{position:static;height:auto;display:block;overflow:visible;
    padding-inline:var(--container-pad)}
  .casos__pin > *{grid-area:auto}
  .casos__ask{transform:none;opacity:1;font-size:clamp(28px,5vw,52px);
    margin-bottom:var(--space-10)}
  .casos__pill{display:none}
  .casos__answer{height:auto;opacity:1;display:block;padding:0}
  .casos__stage{position:static;min-height:0;padding-inline:0;
    display:flex;flex-direction:column;gap:var(--space-16)}
  .caso,
  .caso.is-on{position:static;inset:auto;opacity:1;visibility:visible;
    transition:none}
  .chat{height:auto}
  .caso .chat__msg{animation:none;opacity:1;transform:none}
  .chat__typing{display:none}
  .casos__rail{display:none}
}