/* =======================================================================
   "Pedirla toma un mensaje." — una sola pantalla fija que va pasando de un paso al siguiente
   (solo index-pedir.html). Escritorio: palabras a la izquierda y marco a la derecha.
   Celular: marco arriba y las tres palabras debajo, con la misma idea.
   Con movimiento reducido: los tres pasos uno debajo del otro, todo visible.
   ======================================================================= */
.ped2{ --ease:cubic-bezier(.2,.8,.2,1); }
.ped2 .ped__head{ margin-bottom:32px; }
.ped2__duda{ margin:48px 0 0; }
.ped2__duda--sticky{ display:none; }
.ped2__duda .pill{ color:#111; font-size:14px; }
@media (min-width:769px){ .ped2__duda .pill{ font-size:16px; } }

/* ---------- Escenas (el contenido que cambia dentro del marco) ---------- */
.ped2__chs{ display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:12px; width:100%; height:100%; }
.ped2__ch{ display:block; overflow:hidden; background:#1a1a1c; }
.ped2__ch img{ width:100%; height:100%; object-fit:cover; transform:scale(1.9); transform-origin:var(--or,50% 50%); }
.ped2__chat{ width:100%; height:100%; justify-content:flex-start; overflow:hidden; }
.ped2__caja{ display:block; width:100%; height:100%; object-fit:cover; }
.chat__typing{ align-self:flex-start; display:flex; gap:5px; padding:12px 14px; background:#fdfdfd; }
.chat__typing i{ width:6px; height:6px; background:#9a9aa0; }
.chat__typing.is-in i{ animation:ped2dot 1s ease-in-out infinite; }
.chat__typing.is-in i:nth-child(2){ animation-delay:.15s; }
.chat__typing.is-in i:nth-child(3){ animation-delay:.3s; }
@keyframes ped2dot{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

/* ---------- Movimiento reducido: tres pasos apilados, todo visible ---------- */
.ped2__track{ display:none; }
.ped2__stack{ display:grid; gap:56px; }
.ped2__mvis{ position:relative; aspect-ratio:4/5; overflow:hidden; background:#e9e9ec; margin-bottom:24px; }
.ped2__mw{ margin:0 0 10px; font-family:var(--serif); font-weight:500; font-size:48px; line-height:1; letter-spacing:-.01em; color:#111; }
.ped2__mf{ margin:0; max-width:34ch; font-size:16px; line-height:1.5; color:var(--steel); }
@media (prefers-reduced-motion:reduce){
  .chat__typing{ display:none; }
  .chat__b{ opacity:1; transform:none; }
}

/* ======================= PANTALLA FIJA (celular primero, luego escritorio) ======================= */
@media (prefers-reduced-motion:no-preference){
  .ped2__stack{ display:none; }
  .ped2__track{ display:block; height:300vh; height:300svh; }
  .ped2__sticky{ position:sticky; top:calc(80px + var(--franja-h,0px)); }   /* su alto es siempre el mismo: el cálculo del paso no se mueve */
  .ped2__duda--stack{ display:none; }
  .ped2__duda--sticky{ display:block; margin:14px 0 0; }
  #como-pedir.ped2{ padding-bottom:48px; }
  .ped2__stage{ display:flex; flex-direction:column; gap:20px; }
  .ped2__fw{ order:-1; position:relative; margin-bottom:12px; }
  .ped2__frame{ position:relative; width:100%; height:clamp(360px,44svh,390px); overflow:hidden; background:#e9e9ec; }
  .ped2__scene{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s .3s; }
  .ped2__scene.is-on{ opacity:1; visibility:visible; transition:opacity .3s ease .3s, visibility 0s .3s; }
  .ped2__scene .ped2__chat{ position:absolute; inset:0; padding:16px; gap:8px; }
  .ped2__scene .chat__b{ font-size:12px; line-height:1.35; padding:7px 10px 5px; max-width:90%; }
  .ped2__scene .chat__h{ margin-top:2px; }
  /* Raya fina que se llena con el avance del scroll (celular: horizontal, debajo del marco) */
  .ped2__bar{ position:absolute; left:0; right:0; bottom:-12px; height:2px; background:rgba(15,16,18,.12); }
  .ped2__bar i{ display:block; width:100%; height:100%; background:#111; transform:scaleX(var(--p, 0)); transform-origin:left; }

  .ped2__list{ display:grid; align-content:start; gap:6px; min-height:222px; }   /* alto reservado: el enlace de abajo no salta entre pasos */
  .ped2__w{ margin:0; font-family:var(--serif); font-weight:500; font-size:40px; line-height:1.05; letter-spacing:-.01em; color:rgba(15,16,18,.25); transition:color .4s ease; }
  .ped2__it.is-on .ped2__w{ color:#111; }
  /* La frase del paso activo aparece debajo de su palabra; las demás no se ven */
  .ped2__fr{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
  .ped2__it.is-on .ped2__fr{ grid-template-rows:1fr; }
  .ped2__fr > div{ min-height:0; overflow:hidden; }
  .ped2__fr p{ margin:8px 0 6px; max-width:420px; font-size:15px; line-height:1.5; color:var(--steel); opacity:0; transform:translateY(12px); transition:opacity .2s ease, transform .2s ease; }
  .ped2__it.is-on .ped2__fr p{ opacity:1; transform:none; transition:opacity .5s ease .1s, transform .5s var(--ease) .1s; }

  /* Animaciones de cada escena: empiezan justo después de que la anterior se desvanece (300 ms) */
  .ped2__scene{ --d0:.3s; }
  .ped2__ch{ opacity:0; transform:translateY(-24px); transition:opacity 0s .35s, transform 0s .35s; }
  .is-on .ped2__ch{ opacity:1; transform:none;
    transition:opacity .7s var(--ease) calc(var(--d0) + var(--k, 0) * .15s), transform .7s var(--ease) calc(var(--d0) + var(--k, 0) * .15s); }
  .chat__b, .chat__typing{ opacity:0; transform:translateY(12px); transition:opacity .2s ease, transform .2s ease; }
  .chat__b.is-in, .chat__typing.is-in{ opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease; }
  .ped2__caja{ transform:scale(1.08); transition:transform 0s .35s; }
  .is-on .ped2__caja{ transform:none; transition:transform 1.4s var(--ease) var(--d0); }
}

/* ---------- Escritorio ---------- */
@media (min-width:769px) and (prefers-reduced-motion:no-preference){
  #como-pedir.ped2{ padding-bottom:48px; }
  .ped2 .h2{ font-size:64px; }
  .ped2 .ped__head{ margin-bottom:48px; }
  .ped2__sticky{ top:calc(96px + var(--franja-h,0px)); }
  .ped2__stage{ --gap:48px; display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); align-items:center; height:520px; }
  .ped2__fw{ order:0; margin-bottom:0; }
  .ped2__duda--sticky{ margin-top:8px; }
  .ped2__list{ gap:12px; min-height:0; }
  .ped2__w{ font-size:clamp(48px,6vw,72px); }
  .ped2__fr p{ margin:10px 0 0; font-size:18px; }
  .ped2__frame{ max-width:560px; height:520px; margin-left:auto; }
  .ped2__scene .ped2__chat{ padding:28px; gap:12px; }
  .ped2__scene .chat__b{ font-size:15px; line-height:1.4; padding:10px 12px 8px; }
  .ped2__scene .chat__h{ margin-top:4px; }
  /* Raya vertical junto al marco */
  .ped2__bar{ top:0; bottom:0; left:calc(var(--gap) / -2); right:auto; width:2px; height:auto; }
  .ped2__bar i{ transform:scaleY(var(--p, 0)); transform-origin:top; }
}
@media (min-width:1100px) and (prefers-reduced-motion:no-preference){
  .ped2__stage{ --gap:96px; grid-template-columns:minmax(0,1fr) 560px; }
}

/* En WhatsApp lo que va entre asteriscos sale en negrita */
.chat__b strong{ font-weight:600; }
/* El "escribiendo..." y la respuesta comparten el mismo lugar: el chat no se mueve cuando aparece la burbuja blanca */
.chat__slot{ display:grid; align-self:flex-start; max-width:100%; }
.chat__slot > *{ grid-area:1/1; align-self:start; justify-self:start; }