/* Historia con el móvil fijo (portada animada). La animación vive en js/story.js;
   sin JavaScript, el móvil se ve quieto con la agenda y los textos se leen igual. */

.story { position: relative; }

/* Escenario fijo: la pista ocupa toda la historia y el escenario queda pegado dentro de ella,
   así se suelta justo cuando termina la historia. Los capítulos pasan por encima. */
.stage-track { position: absolute; inset: 0; z-index: 1; pointer-events: none; } /* encima del patrón (.story::before/::after, z 0) */
.stage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  display: flex; align-items: center; justify-content: center;
  perspective: 1600px; pointer-events: none; overflow: hidden; z-index: 0;
}
.phone-wrap::before { /* halo suave detrás del móvil (se mueve con él) */
  content: ''; position: absolute; left: 50%; top: 50%; width: 640px; height: 640px; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,107,74,0.22), rgba(199,195,230,0.12) 55%, transparent 70%);
  transform: translateZ(-120px); pointer-events: none;
}
.phone-wrap { position: relative; scale: var(--s, 1); transform: translateX(22vw); transform-style: preserve-3d; will-change: transform; }

.chapter { position: relative; z-index: 2; min-height: 100vh; min-height: 100svh; }
/* El texto queda fijo mientras su capítulo anima el móvil; luego sube y entra el siguiente. */
.chapter .pin { height: 100vh; height: 100svh; padding-top: 68px; display: flex; align-items: center; }
.chapter .copy { width: min(44%, 500px); display: grid; gap: 16px; }
.chapter[data-side="left"] .copy { margin-left: max(20px, calc((100vw - var(--max)) / 2 + 20px)); }
.chapter[data-side="right"] .copy { margin-left: auto; margin-right: max(20px, calc((100vw - var(--max)) / 2 + 20px)); }
.chapter h1 { font-size: clamp(36px, min(4.8vw, 7.5vh), 62px); font-weight: 800; letter-spacing: -0.035em; }
.chapter-hero { min-height: calc(100vh - 68px); min-height: calc(100svh - 68px); }
.chapter-hero .pin { padding-top: 0; height: calc(100vh - 68px); height: calc(100svh - 68px); }
.chapter .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--lilac-soft); color: var(--ink); font-weight: 500; font-size: 14px; }
.chapter .checks { margin-top: 4px; }
.scroll-hint { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--muted); }
.scroll-hint::before { content: ''; width: 18px; height: 28px; border: 2px solid currentColor; border-radius: 10px; background: linear-gradient(currentColor, currentColor) center 6px / 2px 6px no-repeat; animation: hint 1.6s ease-in-out infinite; }
@keyframes hint { 50% { background-position: center 13px; } }

/* ---------- El móvil ---------- */
.ion { width: 1em; height: 1em; fill: currentColor; flex: none; vertical-align: -0.12em; }
.phone {
  position: relative; width: 300px; height: 620px; border-radius: 48px; padding: 11px;
  background: linear-gradient(145deg, #2c3152, #12152B 60%, #262b4a);
  box-shadow: 0 0 0 2px #3b4158 inset, 0 50px 90px -30px rgba(15,25,60,0.55), 0 20px 40px -20px rgba(15,25,60,0.4);
}
.phone::after { /* botones laterales */
  content: ''; position: absolute; right: -3px; top: 150px; width: 3px; height: 70px; border-radius: 2px; background: #2a2f45;
  box-shadow: -303px -20px 0 #2a2f45, -303px 50px 0 #2a2f45;
}
.phone-notch { position: absolute; z-index: 5; top: 20px; left: 50%; translate: -50% 0; width: 86px; height: 24px; border-radius: 14px; background: #05060b; }
.screen {
  position: relative; width: 100%; height: 100%; border-radius: 38px; overflow: hidden; background: var(--paper);
  font-size: 12px; line-height: 1.35; color: var(--ink);
}
.status { position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: 40px; display: flex; justify-content: space-between; align-items: center; padding: 6px 26px 0; font-weight: 700; font-size: 12px; }
.status-icons { display: flex; gap: 3px; align-items: flex-end; }
.status-icons i { width: 4px; background: currentColor; border-radius: 1px; }
.status-icons i:nth-child(1) { height: 5px; } .status-icons i:nth-child(2) { height: 7px; } .status-icons i:nth-child(3) { height: 9px; }
.scr { position: absolute; inset: 0; padding: 44px 14px 0; background: var(--paper); display: flex; flex-direction: column; gap: 10px; }
.scr:not([data-screen="agenda"]) { opacity: 0; visibility: hidden; }

.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; font-weight: 800; font-size: 12px; flex: none; }
.ion.back { font-size: 19px; color: var(--ink); }
.tabbar { margin-top: auto; margin-inline: -14px; display: flex; justify-content: space-around; padding: 8px 4px 16px; border-top: 1px solid var(--line); font-size: 8.5px; font-weight: 600; color: #A3A1AF; background: var(--paper); }
.tabbar span { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.tabbar .ion { font-size: 19px; }
.tabbar .on { color: var(--blue); }

/* Agenda */
.a-head { display: flex; justify-content: space-between; align-items: center; }
.a-head small { color: var(--muted); font-size: 11px; display: block; }
.a-head b { font-size: 21px; font-weight: 800; color: var(--blue); letter-spacing: -0.02em; }
.a-chips { display: flex; gap: 6px; }
.a-chips span { display: inline-flex; align-items: center; gap: 5px; background: var(--blue-soft); color: var(--muted); border-radius: 12px; padding: 4px 9px; font-size: 10.5px; }
.a-chips .ion { color: var(--blue); font-size: 12px; }
.a-chips b { color: var(--blue); }
.a-days { display: flex; gap: 6px; }
.a-days span { flex: 1; border: 1px solid var(--line); border-radius: 10px; text-align: center; padding: 5px 0; font-weight: 700; font-size: 14px; }
.a-days small { display: block; font-size: 9.5px; font-weight: 600; color: var(--muted); }
.a-days .on { background: var(--blue); color: #fff; border-color: var(--blue); }
.a-days .on small { color: rgba(255,255,255,0.8); }
.a-time { position: relative; margin-top: 8px; }
.a-row { height: 32px; position: relative; }
.a-row em { position: absolute; top: -7px; left: 0; width: 56px; font-style: normal; font-weight: 700; font-size: 10px; }
.a-row::after { content: ''; position: absolute; top: 0; left: 58px; right: 0; height: 1px; background: var(--line); }
.a-row.half em { font-weight: 500; color: #A3A8BA; }
.a-row.half::after { background: #F1F3F8; }
.appt { position: absolute; left: 62px; right: 0; border-radius: 8px; padding: 4px 9px; background: var(--blue); color: #fff; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.appt b { font-size: 11px; }
.appt span { font-size: 9.5px; opacity: 0.85; line-height: 1.3; }
.appt.done { background: var(--blue-soft); color: var(--ink); }
.appt.run { background: var(--red); color: var(--ink); }
.appt-new { box-shadow: 0 8px 18px -8px rgba(27,31,59,0.7); }

/* Reserva */
.b-head { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.b-service { display: flex; gap: 10px; align-items: center; border: 1.5px solid var(--blue); background: var(--blue-soft); border-radius: 12px; padding: 8px; }
.b-service small { display: block; color: var(--muted); }
.thumb { width: 38px; height: 38px; border-radius: 9px; flex: none; background: var(--lilac) url('/img/patron-lineas-oscuras.png') 0 0 / 60px 60px; }
.thumb.t2 { background-color: var(--coral-soft); }
.thumb.t3 { background-color: var(--lilac-soft); }
.b-month { font-weight: 800; font-size: 14px; }
.b-cal { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px 0; text-align: center; font-weight: 600; font-size: 11px; }
.b-cal em { font-style: normal; color: var(--muted); font-size: 10px; }
.b-cal span { position: relative; z-index: 1; height: 24px; line-height: 24px; }
.b-cal .past, .b-cal .off { color: #C3C7D4; }
.b-pick { position: absolute; z-index: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--blue); left: calc(100% / 7 * 2 + (100% / 7 - 26px) / 2); top: 54px; }
.b-cal .d15 { color: var(--ink); }
.b-label { font-weight: 700; font-size: 12px; }
.b-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.b-slots span { border: 1.5px solid var(--line); border-radius: 9px; text-align: center; padding: 6px 0; font-weight: 600; font-size: 11px; }
.b-slots .taken { color: #C3C7D4; text-decoration: line-through; }
.b-btn { margin-top: 4px; background: var(--red); color: var(--ink); border-radius: 10px; text-align: center; padding: 11px; font-weight: 700; font-size: 13px; }
.b-ok { position: absolute; z-index: 3; inset: 0; background: rgba(255,255,255,0.97); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 30px; opacity: 0; visibility: hidden; }
.b-ok b { font-size: 19px; color: var(--blue); }
.b-ok span { font-weight: 700; font-size: 14px; }
.b-ok small { color: var(--muted); font-size: 11px; max-width: 190px; }
.check { width: 62px; height: 62px; border-radius: 50%; background: #2E8B57; position: relative; margin-bottom: 6px; }
.check::after { content: ''; position: absolute; left: 22px; top: 15px; width: 14px; height: 26px; border-right: 4px solid #fff; border-bottom: 4px solid #fff; rotate: 45deg; }

/* Pantalla bloqueada */
.scr-lock { background: radial-gradient(120% 80% at 30% 10%, #3A3F6E, #1B1F3B 45%, #12152B 100%); color: #fff; padding-top: 60px; }
.scr-lock .status { color: #fff; }
.l-clock { text-align: center; margin-bottom: 16px; }
.l-clock b { display: block; font-size: 62px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.l-clock span { font-size: 13px; opacity: 0.85; }
.push { display: flex; gap: 9px; align-items: flex-start; background: rgba(255,255,255,0.9); color: var(--ink); border-radius: 16px; padding: 10px; backdrop-filter: blur(10px); box-shadow: 0 10px 24px -12px rgba(0,0,0,0.5); }
.push img { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.push small { display: block; color: var(--muted); font-size: 10px; }
.push b { display: block; font-size: 12.5px; }
.push span { font-size: 11px; color: #3F4356; }

/* QR */
.q-card { border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; overflow: hidden; }
.q-brand { display: flex; align-items: center; gap: 6px; font-weight: 800; color: var(--blue); font-size: 12px; }
.q-brand img { width: 20px; height: 20px; border-radius: 6px; }
.q-name { font-size: 18px; font-weight: 800; margin-top: 4px; }
.q-card small { color: var(--muted); font-size: 11px; }
.q-box { position: relative; margin: 10px 0 8px; padding: 10px; border: 2px solid var(--blue); border-radius: 14px; overflow: hidden; }
.qr-svg { display: block; width: 150px; height: 150px; fill: var(--ink); }
.q-scan { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--red); box-shadow: 0 0 14px 3px rgba(255,107,74,0.6); opacity: 0; }
.q-code { font-size: 18px; letter-spacing: 2px; color: var(--blue); margin-bottom: 12px; }
.q-stripe { align-self: stretch; margin: 0 -16px; height: 6px; background: var(--red); }
.q-btn { background: var(--red); color: var(--ink); border-radius: 10px; text-align: center; padding: 11px; font-weight: 700; font-size: 13px; }

/* Chat */
.c-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-inline: -14px; padding-inline: 14px; }
.c-head small { display: block; color: #2E8B57; font-size: 10.5px; font-weight: 600; }
.c-list { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; padding-bottom: 8px; }
.msg { max-width: 78%; padding: 8px 11px; border-radius: 15px; font-size: 12px; }
.msg.in { align-self: flex-start; background: var(--lilac); border-bottom-left-radius: 4px; }
.msg.out { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 4px; }
.msg.photo { padding: 4px 4px 7px; display: grid; gap: 5px; }
.msg.photo img { width: 140px; height: 100px; object-fit: cover; border-radius: 12px; }
.typing { align-self: flex-start; display: flex; gap: 4px; background: #F0F2F7; padding: 10px 12px; border-radius: 15px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #9AA0B4; animation: typing 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
.c-input { display: flex; align-items: center; gap: 8px; margin: 0 -14px; padding: 10px 14px 20px; border-top: 1px solid var(--line); color: #9AA0B4; }
.c-input span { flex: 1; display: flex; justify-content: space-between; align-items: center; background: #F4F6FA; border-radius: 18px; padding: 8px 12px; }
.c-input span .ion { font-size: 16px; color: #9AA0B4; }
.send { width: 34px; height: 34px; border-radius: 50%; background: var(--blue); flex: none; display: grid; place-items: center; color: #fff; font-size: 15px; }

/* Inicio del cliente (mismo diseño que la app) */
.h-head { display: flex; align-items: center; justify-content: space-between; }
.h-head small { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 10.5px; }
.h-head small .ion { color: var(--blue); font-size: 11px; }
.h-head b { display: flex; align-items: center; gap: 3px; font-size: 15px; font-weight: 600; margin-top: 1px; }
.h-head b .ion { font-size: 13px; }
.h-banner { position: relative; height: 104px; border-radius: 14px; overflow: hidden; background: var(--red) url('/img/patron-coral.png') 0 0 / 120px 120px repeat; padding: 12px 14px; display: flex; flex-direction: column; justify-content: space-between; }
.h-banner::before, .h-banner::after { content: ''; position: absolute; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: var(--paper); }
.h-banner::before { left: -7px; } .h-banner::after { right: -7px; }
.h-banner b { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 15px; line-height: 1.1; letter-spacing: -0.03em; max-width: 60%; color: var(--ink); }
.h-book { align-self: flex-start; background: var(--blue); color: #fff; font-weight: 600; font-size: 11px; padding: 6px 10px; border-radius: 7px; }
.h-title { font-weight: 600; font-size: 14px; margin-top: 2px; }
.h-svc { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 7px; }
.h-svc .thumb { width: 56px; height: 56px; border-radius: 9px; }
.h-svc b { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 2px; }
.h-svc small { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 10.5px; }
.h-svc small .ion { color: #8A90A6; font-size: 11px; }
.h-works { display: flex; gap: 6px; overflow: hidden; margin-right: -14px; }
.h-works span { width: 104px; height: 78px; flex: none; border-radius: 10px; display: grid; place-items: center; font-size: 26px; }
.h-works .w1 { background: var(--lilac); } .h-works .w2 { background: var(--coral-soft); } .h-works .w3 { background: var(--lilac-soft); }

/* Elementos flotantes alrededor del móvil */
.fl { position: absolute; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 16px; padding: 11px 15px; box-shadow: 0 20px 44px -18px rgba(20,30,60,0.45); font-size: 13px; line-height: 1.35; color: var(--muted); white-space: nowrap; opacity: 0; visibility: hidden; transform: translateZ(60px); }
.fl b { display: block; color: var(--ink); font-size: 14px; }
.fl .dot { width: 34px; height: 34px; border-radius: 11px; flex: none; }
.dot.blue { background: var(--blue) radial-gradient(circle at 50% 50%, #fff 0 4px, transparent 5px); }
.dot.red { background: var(--red) radial-gradient(circle at 50% 50%, #fff 0 4px, transparent 5px); }
.fl-new { left: -96px; top: 120px; }
.fl.intro { animation: fl-in .8s cubic-bezier(.34,1.56,.64,1) 1s backwards; }
.fl-remind.intro { animation-delay: 1.2s; }
@keyframes fl-in { from { translate: 0 30px; scale: .85; filter: opacity(0); } }
.fl-remind { right: -70px; bottom: 110px; }
.fl-wa { right: -145px; top: 64px; display: block; background: #DCF8C6; color: #1B1D29; font-size: 14px; padding: 10px 14px 12px; border-radius: 14px 14px 14px 4px; }
.fl-wa small { display: block; font-size: 11px; color: #5B7A4A; font-weight: 600; margin-bottom: 2px; }
.fl-wa .strike { position: absolute; left: 10px; right: 10px; top: 55%; height: 3px; background: var(--red); border-radius: 2px; transform-origin: left; transform: scaleX(0); }
.fl-scan { right: -70px; bottom: 60px; }

/* ---------- Teléfonos y tabletas pequeñas ---------- */
@media (max-width: 899px) {
  .stage { align-items: flex-start; padding-top: 84px; }
  .phone-wrap { transform: none; transform-origin: top center; }
  .fl { display: none; }
  .chapter { min-height: 100svh; }
  .chapter .checks { display: none; }
  .chapter .pin { align-items: flex-end; padding-bottom: 4svh; }
  .chapter-hero { min-height: calc(100svh - 68px); }
  /* Con la animación activa, todas las tarjetas viven en el mismo sitio (abajo) y sólo se funden
     una con otra: nunca suben tapando el móvil ni dejan tramos vacíos. */
  .story-on .chapter .pin { position: fixed; z-index: 3; left: 0; right: 0; top: auto; bottom: 3svh; height: auto; padding: 0; display: block; pointer-events: none; }
  .story-on .chapter .copy { pointer-events: auto; }
  .chapter .copy, .chapter[data-side] .copy {
    width: auto; margin: 0 16px; padding: 22px 20px; border-radius: 22px; gap: 12px;
    background: rgba(255,255,255,0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 24px 60px -24px rgba(20,30,60,0.35); border: 1px solid rgba(227,230,239,0.8);
  }
  .chapter h1 { font-size: clamp(30px, 8vw, 40px); }
  .chapter h2 { font-size: clamp(24px, 6.4vw, 30px); }
  .chapter .lead { font-size: 15px; line-height: 1.5; }
  .chapter .chips, .chapter-hero .lead { display: none; }
  .chapter-hero h1 { font-size: clamp(28px, 7.6vw, 36px); }
  .chapter .actions { flex-wrap: nowrap; }
  .chapter .actions .btn { flex: 1; min-height: 46px; padding: 0 12px; font-size: 15px; white-space: nowrap; }
  .chapter .actions .btn svg { display: none; }
  .scroll-hint { margin-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint::before, .typing i { animation: none; }
}

/* ---------- Fondo por capítulo ----------
   story.js anima estas variables al pasar de un capítulo a otro. El patrón de los banners de la app va
   encima como dos capas (trazos claros para fondos oscuros, oscuros para claros). Sin JavaScript se queda
   el fondo Tinta de la portada con el texto claro. */
.story {
  --bg: #1B1F3B; --bg2: #12152B; --fg: #F6F4EF; --fg-muted: rgba(246,244,239,0.8); --kick: rgba(246,244,239,0.7);
  --em: #FF6B4A; --mark: transparent; --pat-light: 1; --pat-dark: 0;
  background: radial-gradient(110% 80% at 75% 30%, var(--bg) 0%, var(--bg2) 100%);
}
.story::before, .story::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-size: 240px 240px; }
.story::before { background-image: url('/img/patron-lineas-claras.png'); opacity: var(--pat-light); }
.story::after { background-image: url('/img/patron-lineas-oscuras.png'); opacity: var(--pat-dark); }
.story .copy { color: var(--fg); }
.story .lead, .story .scroll-hint { color: var(--fg-muted); }
.story .kicker { color: var(--kick); }
/* Palabra destacada: coral sobre fondos oscuros; sobre claros, subrayado coral (coral no se usa como texto). */
.story .chapter h1 em, .story .chapter h2 em { font-style: normal; color: var(--em); background: linear-gradient(transparent 64%, var(--mark) 64%, var(--mark) 92%, transparent 92%); }
@media (min-width: 900px) {
  .chapter-hero .btn-ghost { color: var(--paper); border-color: rgba(246,244,239,0.5); }
  .chapter-hero .chip { background: rgba(246,244,239,0.12); color: var(--paper); }
}
@media (max-width: 899px) {
  /* En teléfonos el texto va en tarjetas claras: siempre en oscuro. */
  .story .chapter .copy { --fg: var(--ink); --fg-muted: var(--muted); --kick: var(--muted); --em: var(--ink); --mark: var(--coral); }
}