/* ════════════════════════════════════════════════════════════════════
   PANTALLA — la app de Ekklesia, imitada en HTML
   ════════════════════════════════════════════════════════════════════
   Los ejemplos de la portada eran gestos abstractos: dos letras y una
   flecha para «transposición». Se entendían, pero no enseñaban el
   producto. Esto es el otro extremo: un teléfono con la pantalla real
   dentro, construida con los mismos tokens que usa la app.

   Por qué HTML y no una captura:
   · Una captura pesa, se ve borrosa en pantallas densas y no se mueve.
     Aquí el ejemplo **se usa solo**: se pulsa el botón, sube el tono,
     llega el mensaje.
   · Cuando la app cambie, esto se corrige en una línea de CSS en vez de
     volver a fotografiar trece pantallas con el teléfono en la mano.

   Fidelidad: los colores salen de `lib/core/theme/brand.dart` y las
   medidas de `capturas_app_store/`. El tamaño de letra va un punto más
   grande de lo que tocaría a escala: a escala exacta el texto quedaría
   en 8 px y no se leería. Es la licencia de cualquier maqueta.
   ════════════════════════════════════════════════════════════════════ */

/* Tokens de la app (brand.dart), con prefijo para no pisar los del sitio. */
.pt{
  --a-canvas:#F3F1E9; --a-card:#FFF; --a-bone:#FDFCF8; --a-sheet:#FBFAF5;
  --a-ink:#0C0B09; --a-char:#3E3B34; --a-stone:#6B675E; --a-faint:#9A958A;
  --a-hair:#E9E5DC; --a-line:#DDD8CC;
  --a-acc:#0E9F6E; --a-deep:#0A6B4C; --a-mist:#E3F5EC; --a-soft:#7FDCB6;
  --a-noBg:#F6EAE6; --a-noFg:#A34A31;
  --a-chBg:#F3EFE4; --a-chFg:#7A6A45;
}

/* ── El cuerpo del teléfono ───────────────────────────────────── */
.pt{position:relative;width:100%;background:#15130F;padding:7px;
  border-radius:33px;
  box-shadow:0 1px 1px rgba(255,255,255,.14) inset,
             0 26px 50px -24px rgba(12,11,9,.6),
             0 4px 14px -6px rgba(12,11,9,.3)}
.pt-s{position:relative;height:396px;background:var(--a-canvas);
  border-radius:27px;overflow:hidden;display:flex;flex-direction:column;
  color:var(--a-ink);-webkit-font-smoothing:antialiased}

/* La barra de estado. El reloj marca 12:02 porque es el de las capturas
   de la App Store: si fuera la hora real, cada ejemplo mentiría a su
   manera. */
.pt-est{flex:0 0 auto;display:flex;align-items:center;
  justify-content:space-between;padding:7px 14px 3px;
  font-size:8.5px;font-weight:700;line-height:1;color:var(--a-ink)}
.pt-est .pila{display:flex;align-items:center;gap:3px}
.pt-est .sig{display:flex;align-items:flex-end;gap:1px;height:7px}
.pt-est .sig i{width:1.6px;background:var(--a-ink);border-radius:1px}
.pt-est .sig i:nth-child(1){height:3px}
.pt-est .sig i:nth-child(2){height:4.5px}
.pt-est .sig i:nth-child(3){height:6px}
.pt-est .sig i:nth-child(4){height:7px;background:#C9C4B8}
.pt-est .bat{width:14px;height:7.5px;border-radius:2.4px;background:var(--a-ink);
  display:grid;place-items:center;color:#fff;font-size:5px;font-weight:800;
  line-height:1}

/* ── La cabecera de la app ────────────────────────────────────── */
.pt-cab{flex:0 0 auto;display:flex;align-items:center;gap:7px;
  padding:4px 13px 7px}
.pt-ico{width:21px;height:21px;border-radius:6.5px;background:var(--a-acc);
  display:grid;place-items:center;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(10,107,76,.18),0 3px 9px -4px rgba(14,159,110,.8)}
.pt-ico span{width:12px;background:var(--a-ink);display:block;
  aspect-ratio:596/588;
  -webkit-mask:var(--mark) center/contain no-repeat;
  mask:var(--mark) center/contain no-repeat}
.pt-cab h4{font-size:13px;font-weight:800;letter-spacing:-.02em;margin:0}
.pt-cab .der{margin-left:auto;display:flex;gap:9px;color:var(--a-deep)}
.pt-cab .der svg{width:12px;height:12px}

.pt-atras{flex:0 0 auto;display:flex;align-items:center;gap:9px;
  padding:4px 13px 7px}
.pt-atras svg{width:13px;height:13px}
.pt-atras h4{font-size:13px;font-weight:800;letter-spacing:-.02em;margin:0}
.pt-atras .der{margin-left:auto;display:flex;gap:10px;color:var(--a-deep)}
.pt-atras .der svg{width:12px;height:12px}

.pt-h1{flex:0 0 auto;padding:1px 13px 0}
.pt-h1 b{display:block;font-size:17px;font-weight:800;letter-spacing:-.032em;
  line-height:1.1}
.pt-h1 s{display:block;text-decoration:none;font-size:9.5px;
  color:var(--a-stone);margin-top:2px}

/* ── El cuerpo ────────────────────────────────────────────────── */
.pt-cuerpo{flex:1;min-height:0;padding:8px 13px 46px;display:flex;
  flex-direction:column;gap:8px;position:relative}
.pt-cuerpo.sinnav{padding-bottom:12px}
/* Sin esto, un flex column reparte el hueco encogiendo las tarjetas y la
   cabecera oscura perdía su línea de datos. Lo que no cabe se sale por abajo
   y el marco del teléfono lo recorta, igual que en un móvil. */
.pt-cuerpo > *{flex:0 0 auto}
.pt-rodar{transition:transform .6s var(--swoop)}

.pt-t{background:var(--a-card);border-radius:13px;padding:9px 11px;
  box-shadow:0 1px 2px rgba(12,11,9,.045),0 7px 16px -12px rgba(12,11,9,.35)}
.pt-t.marca{border-left:3px solid var(--a-acc);border-radius:9px 13px 13px 9px}
.pt-t.ambar{border-left:3px solid #8A6A2E;border-radius:9px 13px 13px 9px}
.pt-t h5{font-size:11px;font-weight:800;letter-spacing:-.018em;margin:0 0 5px}
.pt-t .sub{font-size:8.5px;color:var(--a-stone);margin:-3px 0 6px}

/* La tarjeta oscura de cabecera (servicio / canción). */
.pt-hero{position:relative;overflow:hidden;background:var(--a-ink);
  border-radius:14px;padding:10px 12px 11px;color:#fff;
  box-shadow:0 10px 24px -16px rgba(12,11,9,.9)}
.pt-hero::after{content:"";position:absolute;right:-26px;top:-30px;width:86px;
  height:86px;border-radius:50%;border:1px solid rgba(127,220,182,.14)}
.pt-hero .mk{position:absolute;right:9px;bottom:7px;width:24px;
  aspect-ratio:596/588;background:rgba(14,159,110,.5);
  -webkit-mask:var(--mark) center/contain no-repeat;
  mask:var(--mark) center/contain no-repeat}
.pt-hero b{display:block;font-size:16px;font-weight:800;letter-spacing:-.034em;
  line-height:1.08}
.pt-hero s{display:block;text-decoration:none;font-size:9px;
  color:rgba(184,179,168,.95);margin-top:3px}
.pt-hero .meta{display:flex;gap:10px;margin-top:5px;font-size:8.5px;
  color:rgba(184,179,168,.95)}
.pt-activo{display:inline-flex;align-items:center;gap:4px;
  background:rgba(14,159,110,.2);color:var(--a-soft);border-radius:99px;
  padding:2.5px 7px;font-family:var(--mono);font-size:7px;font-weight:700;
  line-height:1;letter-spacing:.13em;margin-bottom:6px}
.pt-activo i{width:4px;height:4px;border-radius:50%;background:var(--a-acc)}

/* ── Piezas sueltas ───────────────────────────────────────────── */
.pt-ch{display:inline-flex;align-items:center;gap:4px;border-radius:99px;
  padding:3px 8px;font-size:8.5px;font-weight:700;background:var(--a-mist);
  color:var(--a-deep);white-space:nowrap}
.pt-ch.no{background:var(--a-noBg);color:var(--a-noFg)}
.pt-ch.esp{background:#EFEDE6;color:var(--a-stone)}
.pt-ch.tan{background:var(--a-chBg);color:var(--a-chFg)}
.pt-ch svg{width:8px;height:8px}
.pt-tono{display:grid;place-items:center;min-width:19px;height:19px;
  padding:0 5px;border-radius:7px;background:var(--a-mist);color:var(--a-deep);
  font-size:9px;font-weight:800;line-height:1}
.pt-tono.pleno{background:var(--a-acc);color:var(--a-ink)}

.pt-bt{display:flex;align-items:center;justify-content:center;gap:5px;
  height:27px;border-radius:10px;background:var(--a-acc);color:var(--a-ink);
  white-space:nowrap;
  font-size:10px;font-weight:800;letter-spacing:-.01em;
  transition:transform .14s var(--swoop),filter .14s}
.pt-bt.ko{background:transparent;border:1px solid var(--a-noFg);
  color:var(--a-noFg)}
.pt-bt.tan{background:transparent;border:1px solid var(--a-line);
  color:var(--a-chFg)}
.pt-bt.fina{height:23px;font-size:9px;background:transparent;
  border:1px solid var(--a-hair);color:var(--a-deep)}
.pt-bt.pulsa{transform:scale(.955);filter:brightness(.94)}
.pt-bt svg{width:10px;height:10px}
.pt-par{display:grid;grid-template-columns:1fr 1fr;gap:6px}

.pt-av{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:7px;font-weight:700;line-height:1;
  flex:0 0 auto}
.pt-av.r1{background:#F0DFDF;color:#8C4646}
.pt-av.r2{background:#E2DFF4;color:#4A3F8C}
.pt-av.r3{background:#DCEFE2;color:#2F6B45}
.pt-av.r4{background:#F2E7D8;color:#7A5A2E}

.pt-fila{display:flex;align-items:center;gap:7px;font-size:10px}
.pt-fila + .pt-fila{margin-top:6px}
.pt-fila .cr{margin-left:auto;color:var(--a-faint);font-size:10px}
.pt-fila s{text-decoration:none;color:var(--a-stone);font-size:8.5px}
.pt-fila .nn{display:grid;place-items:center;width:17px;height:17px;
  border-radius:6px;background:var(--a-mist);color:var(--a-deep);
  font-size:8.5px;font-weight:800;flex:0 0 auto}

/* ── La barra de abajo ────────────────────────────────────────── */
.pt-nav{position:absolute;left:9px;right:9px;bottom:8px;height:33px;
  display:flex;align-items:center;justify-content:space-around;
  border-radius:17px;background:rgba(251,250,245,.84);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,
             0 8px 20px -12px rgba(12,11,9,.45)}
.pt-nav i{display:grid;place-items:center;color:#8E8A80}
.pt-nav i svg{width:13px;height:13px}
.pt-nav i.hoy{background:var(--a-mist);color:var(--a-deep);border-radius:99px;
  padding:4px 9px;display:flex;gap:4px;align-items:center;
  font-size:9px;font-weight:800;font-style:normal;line-height:1}
.pt-nav .pin{position:relative}
.pt-nav .pin::after{content:"";position:absolute;right:-1px;top:-1px;width:4px;
  height:4px;border-radius:50%;background:var(--a-acc)}
.pt-fab{position:absolute;right:11px;bottom:48px;width:30px;height:30px;
  border-radius:10px;background:var(--a-acc);color:var(--a-ink);
  display:grid;place-items:center;font-size:15px;font-weight:300;
  box-shadow:0 8px 18px -8px rgba(14,159,110,.8)}

/* ── Hoja de acordes ──────────────────────────────────────────── */
.pt-sec{display:inline-block;background:var(--a-mist);color:var(--a-deep);
  font-family:var(--mono);font-size:7.5px;font-weight:600;line-height:1;
  letter-spacing:.08em;padding:3.5px 7px;border-radius:6px;margin-bottom:9px}
.pt-ly{position:relative;font-size:9px;line-height:1.3;color:var(--a-ink);
  padding-top:14px;margin:0 0 9px}
.pt-ly:last-child{margin-bottom:0}
.pt-ly span{position:relative;display:inline-block;white-space:pre}
.pt-ly i{position:absolute;top:-14px;left:0;background:var(--a-chBg);
  color:var(--a-chFg);border-radius:4px;padding:1.5px 4px;
  font-family:var(--mono);font-size:7.5px;font-weight:700;font-style:normal;
  line-height:1;transition:opacity .18s,transform .22s var(--swoop),
  background .22s,color .22s}
.pt-ly span.canta{color:var(--a-deep);font-weight:700}
.pt-ly span.canta i{background:var(--a-mist);color:var(--a-deep);
  transform:translateY(-2px)}

/* El pie del visor: mapa, semitonos y Nashville. */
/* Clavado abajo, como en la app. En el flujo, una canción de dos versos lo
   empujaba fuera de la pantalla. */
.pt-cuerpo.conpie{padding-bottom:48px}
.pt-tr{position:absolute;left:13px;right:13px;bottom:11px;z-index:2;
  display:flex;align-items:center;gap:7px;min-width:0}
/* Un velo degradado debajo: sin él, el verso siguiente se corta a cuchillo
   contra la barra y parece un error de maquetación. */
.pt-tr::before{content:"";position:absolute;left:-13px;right:-13px;bottom:-11px;
  top:-20px;z-index:-1;pointer-events:none;
  background:linear-gradient(transparent,var(--a-canvas) 60%)}
.pt-tr .pt-bt{font-size:9.5px;min-width:0}
.pt-tr .paso{display:flex;align-items:center;gap:2px;background:var(--a-card);
  border-radius:10px;padding:3px;box-shadow:0 1px 2px rgba(12,11,9,.05)}
.pt-tr .paso u{width:20px;height:20px;border-radius:7px;background:var(--a-mist);
  color:var(--a-deep);display:grid;place-items:center;text-decoration:none;
  font-size:11px;font-weight:700;transition:transform .14s,background .14s}
.pt-tr .paso u.pulsa{transform:scale(.86);background:var(--a-acc);
  color:var(--a-ink)}
.pt-tr .paso em{font-style:normal;min-width:32px;text-align:center}
.pt-tr .paso em b{display:block;font-size:11px;font-weight:800;line-height:1.1}
.pt-tr .paso em s{display:block;text-decoration:none;font-family:var(--mono);
  font-size:5.5px;line-height:1;letter-spacing:.1em;color:var(--a-faint)}

/* ── Calendario ───────────────────────────────────────────────── */
.pt-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;
  text-align:center}
.pt-cal b{font-family:var(--mono);font-size:6.5px;font-weight:500;line-height:1;
  letter-spacing:.08em;color:var(--a-faint);padding-bottom:4px}
.pt-cal span{position:relative;height:17px;display:grid;place-items:center;
  font-size:8.5px;color:var(--a-faint)}
.pt-cal span.hay{color:var(--a-ink);font-weight:700}
.pt-cal span.hay::after{content:"";position:absolute;bottom:0;width:3px;
  height:3px;border-radius:50%;background:var(--a-acc);opacity:0;
  transition:opacity .3s}
.pt-cal span.hay.on::after{opacity:1}
.pt-cal span.elegido{box-shadow:inset 0 0 0 1px var(--a-deep);border-radius:50%;
  color:var(--a-ink)}

/* ── Segmentado ───────────────────────────────────────────────── */
.pt-seg{display:flex;background:#EBE8DF;border-radius:10px;padding:2.5px}
.pt-seg u{flex:1;text-align:center;text-decoration:none;border-radius:8px;
  padding:4px 0;font-size:9px;font-weight:700;color:var(--a-stone);
  transition:background .25s,color .25s,box-shadow .25s}
.pt-seg u.hoy{background:var(--a-card);color:var(--a-deep);
  box-shadow:0 1px 3px rgba(12,11,9,.1)}

/* ── Chat ─────────────────────────────────────────────────────── */
.pt-msg{display:flex;gap:6px;align-items:flex-start;opacity:0;
  transform:translateY(8px);transition:opacity .3s,transform .34s var(--swoop)}
.pt-msg.ahi{opacity:1;transform:none}
.pt-msg .bu{background:var(--a-card);border-radius:11px;padding:6px 8px;
  font-size:9.5px;line-height:1.35;box-shadow:0 1px 2px rgba(12,11,9,.05)}
.pt-msg .qn{font-size:8.5px;font-weight:700;color:var(--a-deep);
  margin:0 0 3px 1px}
.pt-msg.yo{flex-direction:row-reverse}
.pt-msg.yo .bu{background:var(--a-mist)}
.pt-esc{display:flex;gap:3px;align-items:center;background:var(--a-card);
  border-radius:11px;padding:8px 9px;width:max-content;
  box-shadow:0 1px 2px rgba(12,11,9,.05)}
.pt-esc i{width:4px;height:4px;border-radius:50%;background:var(--a-faint);
  animation:ptpunto 1.1s infinite}
.pt-esc i:nth-child(2){animation-delay:.16s}
.pt-esc i:nth-child(3){animation-delay:.32s}
@keyframes ptpunto{0%,60%,100%{opacity:.3;transform:translateY(0)}
  30%{opacity:1;transform:translateY(-2.5px)}}
.pt-escribe{position:absolute;left:9px;right:9px;bottom:8px;display:flex;
  gap:6px;align-items:center}
.pt-escribe .cj{flex:1;height:26px;border-radius:13px;background:var(--a-bone);
  border:1px solid var(--a-hair);display:flex;align-items:center;
  padding:0 10px;font-size:9px;color:var(--a-faint)}
.pt-escribe .en{width:26px;height:26px;border-radius:9px;background:var(--a-acc);
  display:grid;place-items:center;color:var(--a-ink)}
.pt-escribe .en svg{width:11px;height:11px}
.pt-dia{display:flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:7px;letter-spacing:.14em;color:var(--a-faint)}
.pt-dia::before,.pt-dia::after{content:"";flex:1;height:1px;
  background:var(--a-hair)}

/* ── Aviso que baja ───────────────────────────────────────────── */
.pt-push{position:absolute;left:9px;right:9px;top:8px;z-index:4;display:flex;
  gap:8px;align-items:center;background:rgba(253,252,248,.93);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-radius:14px;padding:8px 10px;
  box-shadow:0 12px 28px -14px rgba(12,11,9,.55),
             0 0 0 1px rgba(233,229,220,.9);
  transform:translateY(-150%);transition:transform .52s var(--swoop)}
.pt-push.ahi{transform:none}
.pt-push .ic{width:20px;height:20px;border-radius:6px;background:var(--a-acc);
  display:grid;place-items:center;flex:0 0 auto}
.pt-push .ic span{width:11px;background:var(--a-ink);display:block;
  aspect-ratio:596/588;
  -webkit-mask:var(--mark) center/contain no-repeat;
  mask:var(--mark) center/contain no-repeat}
.pt-push b{display:block;font-size:9.5px;font-weight:800;letter-spacing:-.015em}
.pt-push s{display:block;text-decoration:none;font-size:8.5px;
  color:var(--a-stone);margin-top:1px}
.pt-push .hr{margin-left:auto;font-family:var(--mono);font-size:7px;
  color:var(--a-faint)}

/* ── Pantalla de bloqueo (recordatorios) ──────────────────────── */
.pt-s.cerrojo{background:
  radial-gradient(120% 90% at 50% 0%,#1C241F 0%,#0D110F 55%,#0A0C0B 100%)}
/* Sobre la pantalla de bloqueo la barra de estado va en claro, o desaparece. */
.pt-s.cerrojo .pt-est{color:#fff}
.pt-s.cerrojo .pt-est .sig i{background:#fff}
.pt-s.cerrojo .pt-est .sig i:nth-child(4){background:rgba(255,255,255,.35)}
.pt-s.cerrojo .pt-est .bat{background:#fff;color:#0C0B09}
.pt-reloj{text-align:center;padding:26px 0 16px;color:#fff}
.pt-reloj s{display:block;text-decoration:none;font-size:9.5px;
  color:rgba(184,179,168,.9);letter-spacing:.02em}
.pt-reloj b{display:block;font-size:40px;font-weight:300;letter-spacing:-.045em;
  line-height:1;margin-top:2px}
.pt-avisos{padding:0 11px;display:flex;flex-direction:column;gap:7px}
.pt-aviso{display:flex;gap:8px;align-items:flex-start;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:13px;padding:8px 10px;color:#fff;
  opacity:0;transform:translateY(10px) scale(.97);
  transition:opacity .4s,transform .46s var(--swoop)}
.pt-aviso.ahi{opacity:1;transform:none}
.pt-aviso .ic{width:19px;height:19px;border-radius:6px;background:var(--a-acc);
  display:grid;place-items:center;flex:0 0 auto}
.pt-aviso .ic span{width:10px;background:var(--a-ink);display:block;
  aspect-ratio:596/588;
  -webkit-mask:var(--mark) center/contain no-repeat;
  mask:var(--mark) center/contain no-repeat}
.pt-aviso b{display:block;font-size:9px;font-weight:800}
.pt-aviso s{display:block;text-decoration:none;font-size:8.5px;
  color:rgba(255,255,255,.72);margin-top:1px;line-height:1.3}
.pt-aviso .hr{margin-left:auto;font-family:var(--mono);font-size:7px;
  color:rgba(255,255,255,.5);flex:0 0 auto}

/* ── Modo en vivo ─────────────────────────────────────────────── */
.pt-s.escena{background:var(--a-bone)}
.pt-escena{flex:1;min-height:0;display:flex;flex-direction:column;
  padding:8px 14px 12px;overflow:hidden}
.pt-escena .barra{display:flex;align-items:center;gap:7px;font-size:8.5px;
  color:var(--a-stone)}
.pt-escena .barra .pg{margin-left:auto;font-family:var(--mono);font-size:7.5px;
  font-weight:600;color:var(--a-faint)}
.pt-marco-pag{flex:1;min-height:0;overflow:hidden}
.pt-paginas{height:100%;display:flex;transition:transform .6s var(--swoop)}
.pt-pagina{flex:0 0 100%;padding-top:9px}
.pt-pagina h6{font-size:16px;font-weight:800;letter-spacing:-.03em;margin:0 0 9px}
.pt-s.escena .pt-ly{font-size:12.5px;padding-top:17px;margin-bottom:14px}
.pt-s.escena .pt-ly i{top:-17px;font-size:8.5px}
.pt-puntitos{display:flex;gap:4px;justify-content:center;padding-top:6px}
.pt-puntitos i{width:4px;height:4px;border-radius:50%;background:var(--a-line);
  transition:background .3s,width .3s}
.pt-puntitos i.hoy{background:var(--a-acc);width:13px;border-radius:99px}

/* ── Hoja que sube (coberturas, compartir) ────────────────────── */
.pt-velo{position:absolute;inset:0;background:rgba(12,11,9,.38);opacity:0;
  transition:opacity .35s;pointer-events:none;z-index:5}
.pt-velo.ahi{opacity:1}
.pt-hoja{position:absolute;left:0;right:0;bottom:0;z-index:6;
  background:var(--a-bone);border-radius:18px 18px 27px 27px;
  padding:11px 13px 15px;transform:translateY(102%);
  transition:transform .46s var(--swoop);
  box-shadow:0 -14px 34px -20px rgba(12,11,9,.6)}
.pt-hoja.ahi{transform:none}
.pt-hoja .asa{width:30px;height:3px;border-radius:99px;background:var(--a-line);
  margin:0 auto 9px}
.pt-hoja h5{font-size:11px;font-weight:800;margin:0 0 7px}
.pt-opc{display:flex;align-items:center;gap:7px;background:var(--a-card);
  border-radius:10px;padding:6px 8px;font-size:9.5px;margin-bottom:5px;
  transition:background .2s,box-shadow .2s}
.pt-opc.elegida{background:var(--a-mist);box-shadow:inset 0 0 0 1px var(--a-acc)}
.pt-opc s{text-decoration:none;color:var(--a-stone);font-size:8.5px;
  margin-left:auto}

/* El texto que se comparte. */
.pt-texto{background:var(--a-card);border-radius:11px;padding:9px 10px;
  font-family:var(--mono);font-size:8px;font-weight:500;line-height:1.55;
  color:var(--a-char);white-space:pre-wrap;
  box-shadow:0 1px 2px rgba(12,11,9,.05);min-height:132px;flex:1 1 auto}

/* ── Ventana del navegador (portal de proyección) ─────────────── */
.pt.ventana{border-radius:15px;padding:0;background:#201D18}
.pt.ventana .pt-s{height:212px;border-radius:15px;background:#0A0C0B}
.pt-barraweb{flex:0 0 auto;display:flex;align-items:center;gap:5px;
  padding:8px 10px;background:#201D18}
.pt-barraweb u{width:7px;height:7px;border-radius:50%;background:#3A352C;
  text-decoration:none}
.pt-barraweb .url{margin-left:5px;flex:1;height:15px;border-radius:7px;
  background:#15130F;display:flex;align-items:center;padding:0 8px;
  font-family:var(--mono);font-size:7px;color:#7E7970;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.pt-proyecta{position:relative;flex:1;min-height:0;display:grid;
  place-items:center;text-align:center;padding:22px 20px 14px}
.pt-proyecta .lin{font-size:17px;font-weight:800;letter-spacing:-.03em;
  line-height:1.22;color:#fff;transition:opacity .35s,transform .4s var(--swoop)}
.pt-proyecta .eti{position:absolute;top:12px;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:7.5px;font-weight:600;letter-spacing:.16em;
  color:rgba(127,220,182,.75);transition:opacity .3s}

/* ── Accesibilidad ────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .pt *,.pt{transition:none!important;animation:none!important}
  .pt-msg,.pt-aviso{opacity:1;transform:none}
  .pt-push{transform:none}
}

/* ════════════════════════════════════════════════════════════════════
   EL ESCAPARATE — tres teléfonos bajo el titular
   ════════════════════════════════════════════════════════════════════
   El héroe era solo texto: una promesa grande y ningún producto hasta
   pasar una pantalla entera. Aquí va la app, en el primer golpe de vista.

   Tres y no uno porque uno solo no dice «esto tiene muchas pantallas»; y
   no cinco porque a partir de ahí es un mosaico y no se mira ninguna. El
   del centro va más grande y de frente —es el que se lee— y los de los
   lados giran y bajan, para que se entienda que están detrás.

   Se salen por abajo a propósito: el `overflow:hidden` del héroe los
   corta. Un teléfono entero flotando con aire debajo parece una foto de
   catálogo; cortado, parece que la página sigue.
   ════════════════════════════════════════════════════════════════════ */
.escaparate{position:relative;z-index:1;
  margin:clamp(14px,2.2vh,32px) auto -254px;
  display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(10px,1.8vw,26px);
  /* Decoración: no se toca ni se tabula. */
  pointer-events:none;user-select:none}

/* El resplandor de debajo, para que no parezcan pegados sobre el papel. */
.escaparate::before{content:"";position:absolute;left:50%;bottom:40px;
  width:min(900px,96%);height:320px;transform:translateX(-50%);
  background:radial-gradient(60% 60% at 50% 60%,rgba(14,159,110,.2),transparent 70%);
  filter:blur(18px);z-index:-1}

/* El ancho del hueco tiene que ser 238 × el zoom, igual que en las cartas:
   si no coinciden, el `width:100%` del teléfono sale con decimales y el
   marco queda descuadrado. */
.esc-pieza{--ez:1.06;width:calc(238px * var(--ez));flex:0 0 auto}
.esc-pieza .pt{zoom:var(--ez)}
.esc-pieza.lado{transform:translateY(46px) rotate(-4.5deg);
  filter:saturate(.88) brightness(.99)}
.esc-pieza.lado.der{transform:translateY(46px) rotate(4.5deg)}
.esc-pieza.centro{--ez:1.34;z-index:2;position:relative}

@media(max-width:1000px){
  .esc-pieza{--ez:.92}
  .esc-pieza.centro{--ez:1.12}
}
/* En una ventana baja mandan los píxeles de alto, no los de ancho: va después
   para ganarle a la regla de arriba en un portátil ancho y bajo. */
@media(max-height:860px){
  .esc-pieza{--ez:.9}
  .esc-pieza.centro{--ez:1.12}
}
@media(max-height:760px){
  .escaparate{margin-bottom:-176px}
  .esc-pieza{--ez:.8}
  .esc-pieza.centro{--ez:1}
}
/* En el móvil solo el del centro: dos más no caben y uno solo, grande, es
   justo lo que se mira en un teléfono. */
@media(max-width:720px){
  .escaparate{margin-bottom:-120px}
  .esc-pieza.lado{display:none}
  .esc-pieza.centro{--ez:1.16}
}
@media(prefers-reduced-motion:reduce){.escaparate::before{filter:none}}