/* =====================================================================
   BIENVENIDA POR ORIGEN — v3 "Pase de bienvenida" — 02/10/2026
   Concepto: la visita llega DESDE un trabajo nuestro. El Guía la recibe
   con un pase de embarque: DESDE (el trabajo) → HACIA (VOS, tu negocio).
   Secuencia: lo que recién viste aparece en pantalla, vuela al talón del
   pase, el pase se despliega, el sol de festudio recorre la ruta y el
   Guía escribe el mensaje.

   Sistema (respeta "Sistema de color — festudio" / styles.css):
   - El pase es la "inversión de valor" de la marca: base clara (hueso
     celeste), navy solo tipografía, celeste como color de marca, dorado
     SOLO en el sol de la ruta y filetes finos. Nunca bloques dorados.
   - Cada trabajo aporta su color en --bv-acc (versión legible sobre claro).
   - Geist (texto) · Instrument Serif itálica (voz del Guía) · JetBrains
     Mono (todo lo que es "dato de pase": códigos, campos, número).

   v3: el celular dejó de ser "la versión de compu apretada". Tiene su
   propia anatomía — Guía entero arriba, ruta, título corto, una línea,
   una prueba, un botón — y el talón se reduce a su sello (la miniatura).
   Todo con prefijo .bv- para no chocar con styles.css.
   ===================================================================== */
.bv-backdrop{
  /* Layout: Guía de pie a la izquierda + pase horizontal (cuerpo | talón); en celular, pase vertical. */
  --bv-night:#060A12;
  --bv-navy:#0B1320;
  --bv-paper:#EDF2F7;          /* hueso con sesgo celeste: el papel del pase */
  --bv-paper-2:#E2E9F1;        /* talón, un tono abajo */
  --bv-ink:#0B1320;
  --bv-ink-2:#3B4B60;
  --bv-ink-3:#6A7A8E;
  --bv-rule:rgba(11,19,32,.12);
  --bv-cel:#1873B4;            /* celeste-hondo: el que se lee sobre claro */
  --bv-cel-vivo:#4FA8E8;
  --bv-gold:#D4AF37;
  --bv-acc:#1873B4;            /* lo pisa el JS con el color del trabajo */
  --bv-sans:var(--sans,'Geist',system-ui,-apple-system,'Segoe UI',sans-serif);
  --bv-serif:var(--serif,'Instrument Serif',ui-serif,Georgia,serif);
  --bv-mono:var(--mono,'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace);
  --bv-stub:300px;

  position:fixed; inset:0; z-index:400;
  display:flex; align-items:center; justify-content:center;
  padding:32px 24px;
  background:var(--bv-night);
  font-family:var(--bv-sans); color:var(--bv-ink);
  opacity:0; transition:opacity .4s ease;
  -webkit-font-smoothing:antialiased;
}
.bv-backdrop.bv-in{ opacity:1 }
.bv-backdrop.bv-out{ opacity:0; transition-duration:.32s }
.bv-backdrop *{ box-sizing:border-box }

/* Lo que recién viste, de fondo: desenfocado y teñido */
.bv-ghost{
  position:absolute; inset:-40px; background-size:cover; background-position:center;
  filter:blur(22px) saturate(1.2) brightness(.62);
  transform:scale(1.08); opacity:0; transition:opacity 1.2s ease .5s;
}
.bv-in .bv-ghost{ opacity:1 }
.bv-veil{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(80% 70% at 50% 45%, rgba(6,10,18,.1), rgba(6,10,18,.8) 78%),
    linear-gradient(180deg, rgba(6,10,18,.2), rgba(6,10,18,.6));
}

/* ---------- Escena ---------- */
.bv-stage{
  position:relative; z-index:2; width:100%; max-width:1100px;
  display:flex; align-items:flex-end; justify-content:center;
}
.bv-guia{
  position:relative; flex:none; width:230px; margin-right:-40px; margin-bottom:-22px; z-index:3;
  pointer-events:none;
}
.bv-guia img{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.6));
  transform:translateY(60px) scale(.9); opacity:0;
  transition:transform 1s cubic-bezier(.2,1.3,.3,1), opacity .5s ease;
}
.bv-guia.bv-on img{ transform:none; opacity:1; animation:bv-float 6s ease-in-out 1s infinite }
.bv-guia::before{  /* halo del color del trabajo detrás del Guía */
  content:""; position:absolute; left:50%; top:42%; width:240px; height:240px; transform:translate(-50%,-50%);
  background:radial-gradient(circle, color-mix(in srgb, var(--bv-acc) 45%, transparent), rgba(212,175,55,.08) 45%, transparent 70%);
  filter:blur(8px); opacity:0; transition:opacity 1s ease .3s;
}
.bv-guia.bv-on::before{ opacity:1 }

/* ---------- El pase ---------- */
.bv-wrap{ position:relative; flex:1 1 auto; min-width:0; max-width:900px; filter:drop-shadow(0 40px 60px rgba(0,0,0,.55)) drop-shadow(0 2px 2px rgba(0,0,0,.25)) }
.bv-pass{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) var(--bv-stub);
  background:var(--bv-paper); border-radius:22px; overflow:hidden;
  /* el alto máximo va en cada columna (que scrollea sola): un grid con
     max-height no achica sus filas y cortaría el contenido sin scroll */
  /* muescas del troquel arriba y abajo, alineadas con la perforación */
  -webkit-mask:
    radial-gradient(circle 13px at calc(100% - var(--bv-stub)) 0, #0000 98%, #000) top/100% 51% no-repeat,
    radial-gradient(circle 13px at calc(100% - var(--bv-stub)) 100%, #0000 98%, #000) bottom/100% 51% no-repeat;
          mask:
    radial-gradient(circle 13px at calc(100% - var(--bv-stub)) 0, #0000 98%, #000) top/100% 51% no-repeat,
    radial-gradient(circle 13px at calc(100% - var(--bv-stub)) 100%, #0000 98%, #000) bottom/100% 51% no-repeat;
  clip-path:inset(0 100% 0 0 round 22px);
  transition:clip-path 1s cubic-bezier(.7,0,.2,1);
}
.bv-pass.bv-open{ clip-path:inset(0 0 0 0 round 22px) }
.bv-pass:focus{ outline:none }

.bv-scroll{ display:contents }   /* en compu no existe: main y talón son columnas del pase */
.bv-dock{ display:none }         /* barra fija del celular */
.bv-main{
  position:relative; min-width:0; overflow-y:auto; overscroll-behavior:contain;
  padding:26px 34px 28px 40px;
  /* trama de seguridad del papel: líneas finísimas, como un pase impreso */
  background:
    repeating-linear-gradient(-32deg, rgba(24,115,180,.035) 0 1px, transparent 1px 7px),
    var(--bv-paper);
}

.bv-head{
  position:relative;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-family:var(--bv-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--bv-ink-3);
  padding-bottom:14px; border-bottom:1px solid var(--bv-rule);
}
.bv-brand{ display:flex; align-items:center; gap:10px; color:var(--bv-ink); flex:none }
.bv-brand strong{ font-family:var(--bv-sans); font-size:17px; font-weight:600; letter-spacing:-.02em; text-transform:none }
.bv-brand strong i{ font-style:normal; color:var(--bv-gold) }
/* Fecha y hora reales de la visita, a la vista (02/10: sin cartel LED en la bienvenida) */
.bv-head-meta{ display:flex; gap:16px; font-variant-numeric:tabular-nums; margin-left:auto }
.bv-head-meta b{ color:var(--bv-ink); font-weight:500 }

/* ---------- Cartel electrónico (el panel de vuelos del pase) ----------
   Vidrio oscuro encastrado en el papel claro, texto ámbar con grano de
   matriz de puntos, corriendo de derecha a izquierda. Es el único bloque
   oscuro del pase: funciona porque es un objeto, no un fondo. */
.bv-led{
  position:relative; flex:1 1 200px; min-width:0; height:30px; overflow:hidden;
  border-radius:8px; background:linear-gradient(180deg,#0A1322 0%,#060A12 100%);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.95), inset 0 0 0 1px rgba(255,255,255,.05),
    0 1px 0 rgba(255,255,255,.65);
  display:flex; align-items:center;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 26px), transparent);
          mask-image:linear-gradient(90deg, transparent, #000 26px, #000 calc(100% - 26px), transparent);
}
.bv-led::after{          /* grano de LED + reflejo del vidrio */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background:
    radial-gradient(circle at 50% 50%, transparent 46%, rgba(4,7,12,.9) 54%) 0 0/3px 3px,
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 42%);
}
.bv-led-track{
  display:flex; align-items:center; white-space:nowrap; will-change:transform;
  animation:bv-led-run var(--bv-led-dur,34s) linear infinite;
}
.bv-led:hover .bv-led-track{ animation-play-state:paused }   /* para poder leerlo */
.bv-led-track > span{
  display:inline-flex; align-items:center; gap:8px; flex:none; padding:0 16px;
  font-family:var(--bv-mono); font-size:10.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:#F2CB62; text-shadow:0 0 7px rgba(242,203,98,.5); font-variant-numeric:tabular-nums;
}
.bv-led-track > span::after{ content:"\25C6"; margin-left:16px; font-size:7px; letter-spacing:0; color:rgba(242,203,98,.32) }
.bv-led-track > span.bv-led-live{ color:#6FE3A6; text-shadow:0 0 8px rgba(111,227,166,.45) }
.bv-led-track > span.bv-led-live b{
  width:6px; height:6px; border-radius:50%; flex:none;
  background:#6FE3A6; box-shadow:0 0 8px rgba(111,227,166,.9);
  animation:bv-led-latido 1.5s ease-in-out infinite;
}
@keyframes bv-led-run{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-50%,0,0) } }
@keyframes bv-led-latido{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }

/* Ruta DESDE → HACIA */
.bv-route{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:18px; padding:20px 0 6px }
.bv-pt small{ display:block; font-family:var(--bv-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--bv-ink-3); margin-bottom:2px }
.bv-pt .bv-code{ display:block; font-family:var(--bv-mono); font-weight:600; font-size:44px; line-height:1; letter-spacing:-.03em; color:var(--bv-ink) }
.bv-pt .bv-code.bv-from{ color:var(--bv-acc) }
.bv-pt span:last-child{ display:block; font-size:13px; color:var(--bv-ink-2); margin-top:6px }
.bv-pt.bv-to{ text-align:right }
.bv-line{ position:relative; height:24px; margin-top:6px }
.bv-line::before{
  content:""; position:absolute; left:0; right:0; top:50%; border-top:1.5px dashed color-mix(in srgb, var(--bv-ink) 30%, transparent);
}
.bv-line::after{ content:""; position:absolute; right:-2px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:var(--bv-ink) }
.bv-sun{
  position:absolute; top:50%; left:0; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%;
  background:radial-gradient(circle at 40% 38%, #F3D77A, var(--bv-gold) 60%, #B8922A);
  box-shadow:0 0 0 4px rgba(212,175,55,.18), 0 0 18px rgba(212,175,55,.55);
  transition:left 1.6s cubic-bezier(.5,0,.15,1);
}
.bv-sun.bv-go{ left:100% }

/* Voz del Guía */
.bv-contenido{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0 }
.bv-hola{ font-family:var(--bv-serif); font-style:italic; font-size:21px; line-height:1.25; color:var(--bv-ink-2); margin:16px 0 4px }
.bv-title{
  font-family:var(--bv-sans); font-weight:300; font-size:clamp(28px, 3.4vw, 40px); line-height:1.06; letter-spacing:-.028em;
  color:var(--bv-ink); margin:0 0 14px; text-wrap:balance;
}
.bv-title .it{ font-family:var(--bv-serif); font-style:italic; font-weight:400; color:var(--bv-cel) }
.bv-caret{ display:inline-block; width:2px; height:.86em; margin-left:3px; vertical-align:-.06em; background:var(--bv-gold); animation:bv-blink .85s steps(1) infinite }
.bv-body{ font-size:15.5px; line-height:1.6; color:var(--bv-ink-2); max-width:58ch; margin:0 0 20px }
.bv-body strong{ color:var(--bv-ink); font-weight:600 }

/* Link callado: existe para quien quiere mirar más, nunca compite con el CTA */
.bv-quiet{
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start; margin-top:14px;
  font-family:var(--bv-mono); font-size:11.5px; letter-spacing:.04em; color:var(--bv-ink-3);
  text-decoration:none; border-bottom:1px solid var(--bv-rule); padding-bottom:2px; transition:.2s;
}
.bv-quiet:hover{ color:var(--bv-ink); border-color:var(--bv-ink-3) }

/* Campos del pase */
.bv-main{ display:flex; flex-direction:column }
.bv-main, .bv-stub{ max-height:calc(100vh - 64px); max-height:calc(100dvh - 64px); scrollbar-width:thin; scrollbar-color:rgba(11,19,32,.25) transparent }
.bv-stub > *{ flex-shrink:0 }
.bv-fields{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); margin:auto 0 0; border-top:1px solid var(--bv-rule); border-bottom:1px solid var(--bv-rule) }
.bv-fields div{ padding:12px 14px 12px 0; min-width:0 }
.bv-fields div + div{ padding-left:14px; border-left:1px solid var(--bv-rule) }
.bv-fields dt{ font-family:var(--bv-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--bv-ink-3); margin-bottom:4px }
.bv-fields dd{ margin:0; font-size:14px; font-weight:500; color:var(--bv-ink); line-height:1.3 }

/* Una sola prueba, en una línea (celular) */
.bv-prueba{
  display:flex; align-items:center; gap:9px; margin:0; padding:11px 0 0; border-top:1px solid var(--bv-rule);
  font-family:var(--bv-mono); font-size:11.5px; letter-spacing:.04em; color:var(--bv-ink-2);
}
.bv-prueba i{ width:7px; height:7px; border-radius:50%; background:var(--bv-acc); flex:none }

/* Testimonio (solo si es real) */
.bv-quote{ margin:20px 0 0; padding:0 0 0 18px; border-left:2px solid var(--bv-acc) }
.bv-quote p{ font-family:var(--bv-serif); font-style:italic; font-size:20px; line-height:1.35; color:var(--bv-ink); margin:0 0 8px }
.bv-quote footer{ display:flex; align-items:center; gap:10px; font-family:var(--bv-mono); font-size:11px; letter-spacing:.06em; color:var(--bv-ink-3); background:none; border:0; padding:0; margin:0; overflow:visible }
.bv-quote footer img{ width:28px; height:28px; border-radius:50%; object-fit:cover }
.bv-quote footer b{ color:var(--bv-ink); font-weight:600 }

/* ---------- El pedido en 1 paso, adentro del pase ---------- */
.bv-captura{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; padding-top:18px }
.bv-captura[hidden]{ display:none }
.bv-pass.bv-capturando .bv-contenido{ display:none }
.bv-pass.bv-capturando .bv-ctas,
.bv-pass.bv-capturando .bv-mini,
.bv-pass.bv-capturando .bv-dock{ display:none }
.bv-volver{
  align-self:flex-start; margin-bottom:12px; border:0; background:none; cursor:pointer; padding:4px 0;
  font-family:var(--bv-mono); font-size:11.5px; letter-spacing:.06em; color:var(--bv-ink-3); transition:color .2s;
}
.bv-volver:hover{ color:var(--bv-ink) }
.bv-captura .fe-captura{ --fc-papel:#fff }

/* ---------- Talón ---------- */
.bv-stub{
  position:relative; min-width:0; display:flex; flex-direction:column; gap:14px;
  padding:26px 26px 22px 28px; background:var(--bv-paper-2);
  border-left:2px dashed color-mix(in srgb, var(--bv-ink) 22%, transparent);
  overflow-y:auto;
}
.bv-stub::before{ content:""; position:absolute; left:0; right:0; top:0; height:5px; background:var(--bv-acc) }
.bv-stub-label{ font-family:var(--bv-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--bv-ink-3) }
.bv-thumb{
  position:relative; flex:none; border-radius:12px; overflow:hidden; aspect-ratio:4/3; max-width:100%;
  background:var(--bv-navy); box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 10px 24px -14px rgba(11,19,32,.6);
  opacity:0;
}
.bv-thumb.bv-landed{ opacity:1 }
.bv-thumb img{ display:block; width:100%; height:100%; object-fit:cover }
.bv-thumb figcaption{
  position:absolute; left:8px; bottom:8px; right:8px; display:flex; align-items:center; gap:6px;
  font-family:var(--bv-mono); font-size:10px; letter-spacing:.04em; color:#E6EEF5;
  padding:5px 8px; border-radius:7px; background:rgba(6,10,18,.62); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bv-thumb figcaption i{ width:6px; height:6px; border-radius:50%; background:var(--bv-cel-vivo); flex:none }

.bv-mini{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0; padding:10px 0; border-top:1px solid var(--bv-rule); border-bottom:1px solid var(--bv-rule) }
.bv-mini dt{ font-family:var(--bv-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--bv-ink-3); margin-bottom:3px }
.bv-mini dd{ margin:0; font-size:13px; font-weight:600; color:var(--bv-ink) }
.bv-ctas{ display:flex; flex-direction:column; gap:8px; margin-top:auto }
.bv-btn{
  display:flex; align-items:center; justify-content:center; gap:10px; text-align:center;
  padding:14px 16px; border-radius:999px; text-decoration:none; cursor:pointer;
  font-family:var(--bv-mono); font-size:12px; font-weight:600; letter-spacing:.04em;
  transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.bv-btn-main{ background:var(--bv-navy); color:#fff; border:1px solid var(--bv-navy) }
.bv-btn-main:hover{ background:var(--bv-cel); border-color:var(--bv-cel); transform:translateY(-1px); box-shadow:0 12px 26px -12px rgba(24,115,180,.7) }
.bv-btn-ghost{ background:transparent; color:var(--bv-ink); border:1px solid color-mix(in srgb, var(--bv-ink) 28%, transparent) }
.bv-btn-ghost:hover{ border-color:var(--bv-ink); transform:translateY(-1px) }
.bv-wa{
  display:flex; align-items:center; justify-content:center; gap:7px; padding:6px;
  font-family:var(--bv-mono); font-size:11px; letter-spacing:.03em; color:var(--bv-ink-2); text-decoration:none;
}
.bv-wa svg{ color:#1FA855 }
.bv-wa:hover{ color:var(--bv-ink) }

.bv-bar{ display:flex; align-items:stretch; gap:0; height:34px; margin-top:4px; opacity:.85 }
.bv-bar i{ display:block; background:var(--bv-ink); height:100% }
.bv-pass-n{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 10px; font-family:var(--bv-mono); font-size:9.5px; letter-spacing:.16em; color:var(--bv-ink-3); font-variant-numeric:tabular-nums }

.bv-close{
  position:absolute; top:12px; right:12px; z-index:5; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; border:0; cursor:pointer;
  background:color-mix(in srgb, var(--bv-paper) 88%, var(--bv-ink)); color:var(--bv-ink-2); transition:.2s;
  box-shadow:0 0 0 4px var(--bv-paper);
}
.bv-close:hover{ background:rgba(11,19,32,.12); color:var(--bv-ink) }
.bv-skip{
  position:absolute; z-index:3; left:50%; bottom:22px; transform:translateX(-50%);
  background:none; border:0; cursor:pointer; padding:10px 14px;
  font-family:var(--bv-mono); font-size:11px; letter-spacing:.08em; color:rgba(230,238,245,.55); transition:color .2s;
}
.bv-skip:hover{ color:#E6EEF5 }
.bv-close:focus-visible, .bv-btn:focus-visible, .bv-wa:focus-visible, .bv-skip:focus-visible, .bv-quiet:focus-visible, .bv-volver:focus-visible{ outline:2px solid var(--bv-cel-vivo); outline-offset:3px }

/* Revelado escalonado del contenido (tras escribir el título) */
.bv-reveal{ opacity:0; transform:translateY(8px); transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1) }
.bv-reveal.bv-show{ opacity:1; transform:none }

/* ---------- La "ventana" de lo que recién viste (intro) ---------- */
.bv-flyer{
  position:fixed; z-index:401; left:50%; top:50%; width:min(70vw, 720px); aspect-ratio:4/3; max-height:64vh;
  transform:translate(-50%,-50%) scale(.94); opacity:0;
  border-radius:16px; overflow:hidden; background:var(--bv-navy);
  box-shadow:0 50px 100px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08);
  transition:opacity .45s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.bv-flyer.bv-in{ opacity:1; transform:translate(-50%,-50%) scale(1) }
.bv-flyer img{ display:block; width:100%; height:100%; object-fit:cover }
.bv-flyer-bar{
  position:absolute; left:0; right:0; top:0; display:flex; align-items:center; gap:10px; padding:10px 14px;
  background:linear-gradient(180deg, rgba(6,10,18,.85), rgba(6,10,18,0));
  font-family:var(--bv-mono); font-size:11px; color:#C9D6E3; letter-spacing:.03em;
}
.bv-flyer-bar span{ width:8px; height:8px; border-radius:50%; background:rgba(230,238,245,.25) }
.bv-flyer-bar em{ font-style:normal; margin-left:6px; padding:3px 10px; border-radius:999px; background:rgba(230,238,245,.08) }
.bv-flyer-tag{
  position:fixed; z-index:401; left:50%; transform:translateX(-50%);
  font-family:var(--bv-serif); font-style:italic; font-size:24px; color:#E6EEF5; opacity:0; transition:opacity .4s ease;
  white-space:nowrap;
}
.bv-flyer-tag.bv-in{ opacity:1 }

body.bv-lock{ overflow:hidden }

/* ---------- Pantallas medianas: el Guía se asoma por arriba ---------- */
@media (max-width:1100px) and (min-width:721px){
  .bv-backdrop{ --bv-stub:270px }
  .bv-stage{ flex-direction:column; align-items:stretch; max-width:860px }
  .bv-guia{ width:112px; margin:0 0 -26px 26px }
  .bv-guia::before{ width:150px; height:150px }
  /* el Guía ocupa ~140px arriba: el pase no puede usar toda la altura */
  .bv-main, .bv-stub{ max-height:calc(100vh - 64px - 140px); max-height:calc(100dvh - 64px - 140px) }
}

/* =====================================================================
   CELULAR — anatomía propia
   El pase de compu entraba acá entero y quedaba largo y apretado: cinco
   ideas, tres botones, el talón completo y el Guía cortado contra el
   borde. Ahora: el Guía entero y centrado arriba del todo, una hoja que
   sube desde abajo con UNA idea, UNA prueba y UN botón, y el talón
   reducido a su sello (la miniatura de lo que acaba de ver).
   ===================================================================== */
@media (max-width:720px){
  .bv-backdrop{ padding:0; align-items:flex-end; justify-content:center }
  .bv-stage{
    flex-direction:column; align-items:center; justify-content:flex-end;
    max-width:none; width:100%; height:100%; padding:0 8px;
  }
  /* El Guía entra entero: 92px de muñeco + 20px de aire contra el borde */
  .bv-guia{
    width:92px; flex:none; margin:0 0 -20px; align-self:center; z-index:4;
    padding-top:20px;
  }
  .bv-guia::before{ width:130px; height:130px; top:50% }
  .bv-wrap{ max-width:none; width:100%; min-height:0; flex:0 0 auto; display:flex }
  .bv-pass{
    display:flex; flex-direction:column; width:100%; border-radius:22px 22px 0 0;
    /* 92 del Guía + 20 de aire: el muñeco nunca se corta */
    max-height:calc(100dvh - 112px);
    overflow:hidden;
    -webkit-mask:none; mask:none;
    clip-path:inset(100% 0 0 0 round 22px 22px 0 0);
  }
  .bv-pass.bv-open{ clip-path:inset(0 0 0 0 round 22px 22px 0 0) }
  /* flex:0 1 auto → la hoja mide lo que mide su contenido y recién
     scrollea cuando no entra. Con 1 1 auto quedaba media pantalla vacía. */
  .bv-scroll{ display:block; flex:0 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch }

  .bv-main{ overflow:visible; padding:18px 18px 18px; max-height:none; min-height:0 }

  /* Header: marca + cartel, con lugar para el sello de la izquierda */
  /* El sello ocupa una columna propia a la izquierda: las dos filas del
     header (marca y cartel) corren 64px para dejársela libre. */
  .bv-head{ gap:10px 12px; padding-left:64px; padding-bottom:11px; min-height:46px; align-content:center }
  .bv-brand{ font-size:9.5px; letter-spacing:.12em }
  .bv-brand strong{ font-size:15px }
  .bv-led{ flex:1 0 100%; height:24px; order:3 }
  .bv-led-track > span{ font-size:9px; letter-spacing:.14em; padding:0 12px }
  .bv-led-track > span::after{ margin-left:12px }

  /* El talón se reduce a su sello: la miniatura, arriba a la izquierda,
     que además es adonde vuela la ventana de "recién estabas acá". */
  .bv-stub{
    position:absolute; top:16px; left:16px; z-index:3; width:52px; padding:0; gap:0;
    background:none; border:0; overflow:visible; display:block; max-height:none;
  }
  .bv-stub::before{ display:none }
  .bv-stub > *{ display:none }
  .bv-thumb{
    display:block; width:52px; height:56px; aspect-ratio:auto; border-radius:8px;
    box-shadow:0 2px 10px -4px rgba(11,19,32,.7), 0 0 0 3px var(--bv-paper);
  }
  .bv-thumb figcaption{ display:none }

  .bv-route{ gap:10px; padding:14px 0 2px }
  .bv-pt small{ font-size:9px; letter-spacing:.14em }
  .bv-pt .bv-code{ font-size:30px }
  .bv-pt span:last-child{ font-size:11.5px; margin-top:3px }
  .bv-line{ height:18px; margin-top:4px }
  .bv-sun{ width:16px; height:16px; margin:-8px 0 0 -8px }

  .bv-hola{ font-size:17px; margin:12px 0 2px }
  .bv-title{ font-size:26px; line-height:1.08; margin:10px 0 8px }
  .bv-body{ font-size:14.5px; line-height:1.5; margin:0 0 14px; max-width:none }
  .bv-prueba{ font-size:11px }
  .bv-quiet{ margin-top:12px; font-size:11px }
  .bv-quote{ margin-top:14px }
  .bv-quote p{ font-size:17px }

  /* Un solo botón visible, siempre a mano */
  .bv-dock{
    display:flex; align-items:center; gap:10px; flex:none;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
    background:var(--bv-paper); border-top:1px solid var(--bv-rule);
    box-shadow:0 -12px 24px -16px rgba(11,19,32,.35);
  }
  .bv-dock .bv-btn-main{ flex:1; padding:16px; font-size:13px }
  .bv-dock-wa{ flex:none; width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#1FA855; color:#fff }
  .bv-dock-wa:focus-visible{ outline:2px solid var(--bv-cel-vivo); outline-offset:3px }

  .bv-captura{ padding-top:10px }
  .bv-close{ top:10px; right:10px; width:30px; height:30px; box-shadow:0 0 0 3px var(--bv-paper) }
  .bv-flyer{ width:86vw }
  .bv-flyer-tag{ font-size:19px }
  .bv-skip{ bottom:auto; top:12px; left:auto; right:46px; transform:none; font-size:10px }
}

/* Celulares bajos (SE y parecidos): se achica lo decorativo, nunca el mensaje */
@media (max-width:720px) and (max-height:700px){
  .bv-guia{ width:74px; margin-bottom:-16px; padding-top:14px }
  .bv-pass{ max-height:calc(100dvh - 88px) }
  .bv-pt .bv-code{ font-size:26px }
  .bv-title{ font-size:23px }
  .bv-hola{ font-size:15.5px }
}

@keyframes bv-float{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-10px) } }
@keyframes bv-blink{ 50%{ opacity:0 } }

/* Movimiento reducido (Windows con efectos apagados, iOS "Reducir movimiento"):
   nada vuela ni se desplaza, pero la llegada sigue siendo una secuencia de
   fundidos. Lo que sobra es el movimiento, no el momento. */
@media (prefers-reduced-motion: reduce){
  .bv-pass, .bv-pass.bv-open{ clip-path:none !important; opacity:0; transition:opacity .6s ease .15s !important }
  .bv-pass.bv-open{ opacity:1 }
  .bv-guia img{ transform:none !important; transition:opacity .8s ease .5s !important }
  .bv-guia.bv-on img{ animation:none !important }
  .bv-sun{ transition:none !important }
  .bv-reveal{ transform:none !important; transition:opacity .6s ease !important }
  .bv-caret{ animation:none !important }
  /* El cartel no corre: muestra el principio y fecha/hora vuelven al header */
  .bv-led-track, .bv-led-track > span.bv-led-live b{ animation:none !important }
  .bv-head-meta{
    position:static; width:auto; height:auto; margin:0; overflow:visible;
    clip:auto; clip-path:none; display:flex; gap:16px; font-variant-numeric:tabular-nums;
  }
}