/* Las escenas de la landing (doc 93).
 *
 * Una escena es un celular al lado de un panel de CadaMes, y una serie de
 * pasos. Todo lo que se mueve se mueve por CSS: el JS sólo pone y saca la
 * clase `.v` (visible) y algunas clases de estado. Por eso acá está casi todo
 * el comportamiento visible y allá casi nada.
 *
 * Dos reglas que no son estética:
 *  · Los dos marcos reservan su alto antes de animar (`min-height`), para que
 *    al aparecer un paso la página no salte. Es el CLS 0 que pide el doc 93 §5.
 *  · Con `prefers-reduced-motion` no se apaga la escena: se muestra quieta en
 *    su resultado. Una escena que no se mueve sigue contando lo mismo; una que
 *    marea, no la mira nadie. */

.esc{border:1px solid var(--borde);border-radius:16px;background:#fff;padding:16px 14px 14px;box-shadow:0 10px 30px rgba(11,58,49,.07)}
.escTop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.escT{font-family:Sora,Inter,sans-serif;font-size:16px;color:var(--verde);margin:0;flex:1 1 auto;min-width:0}
.escPuntos{display:flex;gap:6px;align-items:center}
.escPuntos button{width:19px;height:19px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%}
.escPuntos button::before{content:"";width:8px;height:8px;border-radius:50%;background:#CBD5DC;transition:background .2s,transform .2s}
.escPuntos button[aria-current="true"]::before{background:var(--esm);transform:scale(1.25)}
.escPuntos button:focus-visible,.escDeNuevo:focus-visible,.escTab:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.escDeNuevo{background:#EEF3F8;border:1px solid #D7E2EB;color:var(--azul);font-family:Sora,Inter,sans-serif;font-size:12.5px;font-weight:700;border-radius:100px;padding:6px 13px;cursor:pointer}
.escDeNuevo:hover{background:#E3ECF4}

.escCuerpo{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:18px;align-items:start}
.escRotulo{font-size:14.5px;line-height:1.45;color:#41545F;margin-top:12px;min-height:2.9em}
.escRotulo b{color:var(--verde)}

/* ── El celular ── */
.cel{background:#1E2A32;border-radius:26px;padding:7px;box-shadow:0 14px 40px rgba(0,0,0,.18);max-width:300px;width:100%;margin:0 auto}
.celIn{border-radius:20px;overflow:hidden;background:#ECE5DD;min-height:318px;display:flex;flex-direction:column}
.celBarra{background:#075E54;color:#fff;padding:9px 12px;display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;font-family:'Segoe UI',system-ui,sans-serif}
.celBarra small{display:block;font-weight:400;font-size:10px;opacity:.85}
.celAv{width:24px;height:24px;border-radius:50%;background:#0B7568;display:flex;align-items:center;justify-content:center;font-size:11px;flex:0 0 auto}
.celChat{padding:11px 10px;display:flex;flex-direction:column;gap:7px;flex:1}
/* El celular tiene tres pantallas y muestra una: el chat, el calendario y la
   pantalla apagada con el reloj. Cuál se ve lo dice `data-pant`, que el motor
   cambia por paso. */
.celPant{display:none;flex-direction:column;flex:1}
.cel[data-pant="wa"] .celPant.wa,
.cel[data-pant="cal"] .celPant.cal,
.cel[data-pant="off"] .celPant.off{display:flex}

/* Burbujas: aparecen con un fade+slide corto, como cuando llega un mensaje. */
.bb{max-width:88%;background:#fff;border-radius:4px 13px 13px 13px;padding:8px 10px;font-size:12.5px;line-height:1.42;box-shadow:0 1px 3px rgba(0,0,0,.12);opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease;display:none}
.bb.mia{margin-left:auto;background:#DCF8C6;border-radius:13px 4px 13px 13px}
.bb.v{display:block}
.bb.v.a{opacity:1;transform:none}
.bb b{color:#0B3A31}
.bb .tick{color:#34B7F1;font-size:11px;margin-left:4px}
.bb .marca{display:inline-block;background:#E7F6EE;color:#0A6137;font-size:9.5px;font-weight:700;border-radius:100px;padding:1px 6px;margin-bottom:3px}
.celHora{align-self:center;background:rgba(255,255,255,.75);color:#5C6B76;font-size:10.5px;border-radius:100px;padding:2px 10px}
.celNegro{background:#0C1418;color:#fff;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.celNegro b{font-size:29px;font-weight:300;letter-spacing:1px}
.celNegro small{font-size:11.5px;opacity:.7}

/* "escribiendo…" — los tres puntitos, 600 ms antes de cada respuesta. */
.escribiendo{background:#fff;border-radius:4px 13px 13px 13px;padding:9px 11px;box-shadow:0 1px 3px rgba(0,0,0,.12);display:flex;gap:3px;width:-moz-fit-content;width:fit-content}
.escribiendo i{width:5px;height:5px;border-radius:50%;background:#9BA8B2;animation:escPunto 1s infinite}
.escribiendo i:nth-child(2){animation-delay:.15s}
.escribiendo i:nth-child(3){animation-delay:.3s}
@keyframes escPunto{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* Un comprobante o un ticket: un dibujo, no una foto. */
.papel{background:#fff;border-radius:6px;padding:7px;width:104px}
.papel svg{display:block;width:100%;height:auto}
.papelPie{font-size:10px;color:var(--gris);margin-top:3px}
.audio{display:flex;align-items:center;gap:7px;min-width:150px}
.audio .play{width:19px;height:19px;border-radius:50%;background:var(--ok);color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;flex:0 0 auto}
.audio .onda{display:flex;align-items:center;gap:2px;flex:1;height:16px}
.audio .onda i{flex:1;background:#B6C2CB;border-radius:1px}
.audio small{color:var(--gris);font-size:10.5px}

/* Google Calendar: la vista día, con el evento que aparece resaltado. */
.celCal{background:#fff}
.calBarra{background:#F1F3F4;color:#3C4043;padding:9px 12px;font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:7px;border-bottom:1px solid #E0E3E6;font-family:'Segoe UI',system-ui,sans-serif}
.calBarra small{font-weight:400;color:#5F6368;font-size:11px}
.calDia{padding:6px 10px 10px;font-size:11px;color:#5F6368;flex:1}
.calFila{display:grid;grid-template-columns:38px 1fr;gap:6px;align-items:start;min-height:33px;border-top:1px solid #EDEFF1;padding-top:3px}
.calFila:first-child{border-top:0}
.calEv{background:#1A73E8;color:#fff;border-radius:5px;padding:5px 8px;font-size:11px;line-height:1.3;opacity:0;transform:scale(.96);transition:opacity .25s,transform .25s}
.calEv.v{opacity:1;transform:none}
.calEv.destello{animation:calDestello .4s ease}
@keyframes calDestello{0%{box-shadow:0 0 0 0 rgba(26,115,232,.55)}100%{box-shadow:0 0 0 10px rgba(26,115,232,0)}}
.calEv b{display:block;font-weight:700}

/* ── El panel de CadaMes ── */
.pan{border:1px solid var(--borde);border-radius:13px;background:#fff;padding:12px;min-height:318px;font-size:13px}
.panTit{font-family:Sora,Inter,sans-serif;font-size:13px;color:var(--verde);font-weight:700;display:flex;align-items:center;gap:7px;margin-bottom:10px}
.panTit em{font-style:normal;font-size:11px;color:var(--gris);font-weight:400;margin-left:auto}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.kpi{background:var(--crema);border-radius:9px;padding:7px 6px;text-align:center}
.kpi b{display:block;font-size:clamp(12px,2.6vw,15.5px);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--verde)}
.kpi small{font-size:9.5px;color:var(--gris)}
.panFilas{margin-top:10px;display:flex;flex-direction:column;gap:5px}
.fila{display:flex;align-items:center;gap:8px;border:1px solid var(--borde);border-radius:8px;padding:6px 9px;font-size:12px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s,background .3s,border-color .3s;display:none}
.fila.v{display:flex}
.fila.v.a{opacity:1;transform:none}
.fila .nom{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fila .pl{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--gris)}
.fila .chip{font-size:10.5px;font-weight:700;border-radius:100px;padding:2px 8px;white-space:nowrap}
.fila.debe{background:#FDF6E7;border-color:#F0DFB4}
.fila.debe .chip{background:#F6E6BD;color:#7A5709}   /* medido: #8A6410 daba 4.34:1 */
.fila.pago{background:#EAF9F2;border-color:#BCE7D3}
.fila.pago .chip{background:#CDEEDD;color:#0B6B41}
.fila.roja{background:#FBF1F0;border-color:#F1CFCB}
.fila.roja .chip{background:#F5D9D5;color:#9B2F24}
.fila .por{font-size:11px;color:var(--gris);display:block;white-space:normal}
.tarj{background:var(--crema);border-radius:10px;padding:9px 11px;margin-top:10px;font-size:12.5px;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;display:none}
.tarj.v{display:block}
.tarj.v.a{opacity:1;transform:none}
.tarj b{color:var(--verde)}
.tarj.aviso{background:#EAF9F2;border:1px solid #BCE7D3}
.panNota{font-size:11px;color:var(--gris);margin-top:9px}
/* Un bloque entero que aparece o desaparece con el paso (una lista, una ficha,
   un renglón de la línea de tiempo). Va como clase y no como regla general
   sobre [data-desde] para no pisar lo que se anima con opacidad. */
.paso:not(.v){display:none}

/* Barras: el camino del embudo y los motivos de pérdida. */
.barras{display:flex;flex-direction:column;gap:7px;margin-top:10px}
.barra{font-size:11.5px}
.barra .et{display:flex;justify-content:space-between;gap:8px;color:#41545F;margin-bottom:3px}
.barra .et b{font-variant-numeric:tabular-nums}
.barra .via{display:block;background:#E7ECEF;border-radius:5px;height:11px;overflow:hidden}
.barra .via i{display:block;height:100%;width:0;background:var(--azul);border-radius:5px;transition:width .55s cubic-bezier(.2,.7,.3,1)}
.barra.roja .via i{background:var(--rojo)}
.barra.gris .via i{background:#9BA8B2}
.destacado{background:#EAF9F2;border:1px solid #BCE7D3;border-radius:10px;padding:10px;text-align:center;margin-top:10px;opacity:0;transition:opacity .3s;display:none}
.destacado.v{display:block}
.destacado.v.a{opacity:1}
.destacado b{display:block;font-size:19px;color:var(--verde);font-variant-numeric:tabular-nums}
.destacado small{font-size:11px;color:var(--gris)}

/* Una ficha: cabecera, línea de tiempo, botón. */
.ficha .fnom{font-family:Sora,Inter,sans-serif;font-size:14px;color:var(--verde);font-weight:700}
.ficha .forigen{font-size:11px;color:var(--gris);margin-top:2px}
.linea{border-left:2px solid var(--borde);margin:10px 0 0 5px;padding-left:11px;display:flex;flex-direction:column;gap:7px}
.linea div{font-size:11.5px;color:#41545F;position:relative}
.linea div::before{content:"";position:absolute;left:-16px;top:5px;width:6px;height:6px;border-radius:50%;background:#CBD5DC}
.linea em{font-style:italic;color:var(--gris)}
.botonFalso{display:inline-flex;align-items:center;gap:6px;background:#EEF3F8;border:1px solid #D7E2EB;color:var(--azul);border-radius:100px;padding:6px 13px;font-size:12px;font-weight:700;margin-top:10px;transition:background .3s,color .3s,border-color .3s}
.botonFalso.pulsado{background:var(--esm);border-color:var(--esm);color:#fff}

/* ── La tira: el selector de escenas ── */
.escTira{margin-top:20px}
.escTabs{display:flex;gap:7px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.escTab{flex:0 0 auto;border:2px solid var(--borde);background:#fff;border-radius:100px;padding:8px 15px;font-size:13px;font-weight:700;color:#41545F;cursor:pointer;font-family:Sora,Inter,sans-serif;white-space:nowrap}
.escTab[aria-selected="true"]{background:var(--verde);border-color:var(--verde);color:#fff}
.escHint{font-size:12.5px;color:var(--gris);margin-top:9px;display:flex;align-items:center;gap:6px}
.escHint i{font-style:normal;font-size:16px;animation:escDedo 1.2s ease infinite}
@keyframes escDedo{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.escPanel{margin-top:12px}
.escPanel[hidden]{display:none}
.escPanel.entrando{animation:escFade .2s ease}
@keyframes escFade{from{opacity:0}to{opacity:1}}

/* Una escena sin celular (el Embudo): el panel ocupa el ancho, centrado. */
.escSinCelular .escCuerpo{grid-template-columns:minmax(0,1fr)}
.escSinCelular .pan{max-width:560px;margin:0 auto}

/* La pantalla Hoy de la sección 7: el panel solo, sin controles. Los números
   cuentan al entrar en vista y ahí se quedan. */
.escSoloPanel{border:0;background:none;box-shadow:none;padding:0;max-width:540px}
.escSoloPanel .escTop{display:none}
.escSoloPanel .escCuerpo{grid-template-columns:1fr}
.escSoloPanel .pan{min-height:0;box-shadow:0 12px 36px rgba(11,58,49,.12)}

/* El hero: la misma escena, sólo el celular. */
.escChica .pan,.escChica .escTop,.escChica .escPuntos{display:none}
.escChica{border:0;background:none;box-shadow:none;padding:0;max-width:300px}
.escChica .escCuerpo{grid-template-columns:1fr}
.escChica .escRotulo{font-size:13px;text-align:center;min-height:2.6em;margin-top:9px}
/* El celular del hero muestra tres pasos, no cinco: con el alto de la escena
   grande se comía media pantalla de un teléfono antes del botón. */
.escChica .celIn{min-height:236px}

/* ── Celular angosto ── */
@media(max-width:700px){
  .escCuerpo{grid-template-columns:1fr;gap:14px}
  .cel{max-width:300px}
  .pan{min-height:0}
  .escT{flex:1 1 100%}
}
@media(max-width:380px){
  .esc{padding:13px 10px 11px}
  .escTab{padding:7px 12px;font-size:12.5px}
}

/* ── Sin movimiento: la escena queda en su resultado ── */
@media(prefers-reduced-motion:reduce){
  .bb,.fila,.tarj,.destacado,.calEv,.barra .via i,.escPanel.entrando{transition:none;animation:none}
  .escribiendo i,.escHint i{animation:none}
}