/* ═══════════════════════════════════════════════════════════════
   boot.css — Pantalla de arranque
   ───────────────────────────────────────────────────────────────
   Arriba la marca en grande y una línea de qué es Belk. Abajo, el
   mueble base contemporáneo se arma solo, se convierte en presupuesto y se va por
   WhatsApp al cliente, con el doble tic de leído.

   LLEVA barra de carga (el usuario la pidió el 2026-08-07, después de
   haberla quitado el 06). Lo que sigue prohibido es el texto de estado
   tipo "cargando sistema": la barra sola basta. La barra avanza con el
   reloj pero se detiene en 92 % hasta que la página está lista de
   verdad — nunca finge haber terminado.

   MARCA GRANDE EN EL NAVEGADOR y más chica en el teléfono: son seis
   variables (--tile, --belk, --sol, --claim, --desc, --col) y un solo
   @media. No hay dos maquetas.

   FONDO NEGRO en web y en app: es el mismo #0D0C0B de la App Belk
   (BelkDark.bg) y el mismo negro del azulejo del logo. El único
   color propio es el celeste que YA vive en el logo; el verde y el
   celeste de los tics son los de WhatsApp y solo salen al final.

   El geometría del vuelo (mueble → miniatura del mensaje) la
   calcula js/boot-screen.js midiendo el hueco real y la escribe en
   --tx/--ty/--ts: nada de píxeles a mano.
   ═══════════════════════════════════════════════════════════ */

html.bt-lock, html.bt-lock body { overflow: hidden !important; }

#belkBoot{
  --T: 4000ms;
  --cyan:#1CA3F0;
  --ink:#F4EFE8;
  --muted:#8F8880;

  /* Tamaños de la marca. Los de aquí son los del TELÉFONO; el bloque de
     @media de más abajo los agranda en el navegador de escritorio, donde
     hay sitio de sobra y una marca chica se ve perdida. Cambiar el tamaño
     de la marca = tocar estas seis variables, nada más. */
  --tile: 72px;
  --belk: 26px;
  --sol: 10px;
  --claim: 14.5px;
  --desc: 12.5px;
  --col: 300px;
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0D0C0B;
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  opacity: 1;
  transition: opacity .34s ease;
}
#belkBoot.bt-off{ opacity: 0; pointer-events: none; }

/* Navegador de escritorio: marca grande. El alto mínimo evita agrandarla
   en una ventana ancha pero baja, donde no cabría. */
@media (min-width: 768px) and (min-height: 640px){
  #belkBoot{
    --tile: 128px;
    --belk: 46px;
    --sol: 16px;
    --claim: 20px;
    --desc: 15px;
    --col: 460px;
  }
}

.bt-in{
  width: min(var(--col), 86vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(0px, env(safe-area-inset-top)) 0 max(0px, env(safe-area-inset-bottom));
}

/* ── Marca ───────────────────────────────────────────────── */
.bt-brand{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 13px;
}
.bt-tile{
  width: var(--tile);
  height: var(--tile);
  display: block;
  border-radius: calc(var(--tile) * .223);   /* el radio del icono oficial: 114/512 */
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.32));
  user-select: none;
}
.bt-word{ display: flex; flex-direction: column; gap: 2px; }
.bt-word b{
  font-size: var(--belk);
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1;
}
.bt-word span{
  font-size: var(--sol);
  font-weight: 600;
  letter-spacing: .42em;
  line-height: 1;
  color: var(--muted);
}
.bt-rule{ width: 34px; height: 2px; border-radius: 2px; background: var(--cyan); }
/* La frase corta: qué es Belk en una línea. */
.bt-claim{
  margin: 0;
  max-width: 25ch;
  font-size: var(--claim);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  text-wrap: balance;
}
/* Y el párrafo que lo explica de verdad, para quien nunca ha oído de Belk. */
.bt-desc{
  margin: 0;
  max-width: 34ch;
  font-size: var(--desc);
  line-height: 1.5;
  color: var(--muted);
  text-wrap: balance;
}

/* ── Barra de carga ──────────────────────────────────────────
   Avanza con el reloj de la presentación, pero NO llega al final
   hasta que la página está lista de verdad: se queda esperando en
   92 % si la carga se atrasa. Nunca finge haber terminado. */
.bt-load{
  width: min(240px, 74%);
  height: 4px;
  margin-top: 6px;
  border-radius: 999px;
  background: rgba(244,239,232,.14);
  overflow: hidden;
}
.bt-load i{
  display: block;
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: var(--cyan);
  transition: width .26s linear;
}
@media (min-width: 768px) and (min-height: 640px){
  .bt-load{ width: min(320px, 74%); height: 5px; margin-top: 10px; }
}

/* ── Escenario ───────────────────────────────────────────── */
.bt-stage{
  position: relative;
  width: 100%;
  height: 272px;
  margin-top: 26px;
}
.bt-stage::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:224px;
  height:224px;
  margin-left:-112px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(28,163,240,.12) 0,rgba(28,163,240,.035) 45%,transparent 70%);
  opacity:0;
}

/* Mueble de catálogo en perspectiva, centrado sin transform (el vuelo usa el suyo
   propio y no debe pelearse con el centrado). */
.bt-mob{
  position: absolute;
  top: 4px;
  left: 50%;
  margin-left: -126px;
  width: 252px;
  height: 214px;
  transform-origin: 0 0;
  z-index: 2;
  overflow: visible;
  filter: drop-shadow(0 16px 14px rgba(0,0,0,.42));
}
.bt-cab-shadow{ fill:rgba(0,0,0,.56); }
.bt-cab-back{ fill:#151616; stroke:rgba(244,239,232,.18); stroke-width:1; }
.bt-cab-piece{ transform-box:fill-box; transform-origin:center; }
.bt-cab-piece path{ vector-effect:non-scaling-stroke; stroke-linejoin:round; }
.bt-cab-frame{ fill:#E4E0D9; stroke:#FAF8F4; stroke-width:1; }
.bt-cab-side{ fill:#806E5D; stroke:#BDAE9C; stroke-width:1; }
.bt-cab-top{ fill:#555957; stroke:#929793; stroke-width:1; }
.bt-cab-top-edge{ fill:#272A29; stroke:#777B78; stroke-width:1; }
.bt-cab-door{ fill:#AA9277; stroke:#D2C2AF; stroke-width:1; }
.bt-cab-drawer{ fill:#ECE8E1; stroke:#FAF8F4; stroke-width:1; }
.bt-cab-plinth{ fill:#555653; stroke:#858681; stroke-width:1; }
.bt-cab-feet{ fill:#292B2A; stroke:#6A6D6A; stroke-width:1; }
.bt-cab-details{ fill:none; stroke-linecap:round; stroke-linejoin:round; opacity:0; }
.bt-cab-handle{ stroke:#252827; stroke-width:2; }
.bt-cab-edge{ stroke:rgba(255,255,255,.45); stroke-width:.8; }
.bt-cab-grain{ stroke:rgba(38,31,25,.22); stroke-width:.8; }
.bt-cab-accent{ fill:none; stroke:var(--cyan); stroke-width:1.6; stroke-linecap:round; opacity:0; }

/* El mensaje de WhatsApp */
.bt-bub{
  position: absolute;
  /* Con la columna ancha del escritorio, un mensaje de 460 px se ve
     absurdo: se limita y se centra. `medir()` lee su offsetLeft real,
     así que el vuelo del mueble sigue encajando. */
  left: 0; right: 0; margin: 0 auto; max-width: 322px;
  bottom: 80px;
  z-index: 1;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 9px;
  padding: 8px 8px 6px;
  border-radius: 10px 10px 10px 2px;
  background: #DCF8C6;
  color: #111B21;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.8);
  opacity: 0;
}
.bt-slot{
  position: relative;
  height: 56px;
  border-radius: 5px;
  background: #FFFFFF;
  border: 1px solid rgba(17,27,33,.14);
  overflow: hidden;
}
.bt-mini{ position: absolute; inset: 3px 5px; width:46px; height:50px; opacity:0; overflow:visible; }
.bt-mini .bt-cab-shadow{ fill:rgba(17,27,33,.12); }
.bt-mini .bt-cab-back{ fill:#263238; stroke:#526168; }
.bt-mini .bt-cab-frame{ fill:#D9DDDE; stroke:#6C777C; }
.bt-mini .bt-cab-side,.bt-mini .bt-cab-door{ fill:#9B8269; stroke:#5E5144; }
.bt-mini .bt-cab-top{ fill:#555C5D; stroke:#303839; }
.bt-mini .bt-cab-top-edge,.bt-mini .bt-cab-plinth,.bt-mini .bt-cab-feet{ fill:#344044; stroke:#243034; }
.bt-mini .bt-cab-drawer{ fill:#F6F7F7; stroke:#6C777C; }
.bt-mini .bt-cab-details,.bt-mini .bt-cab-accent{ opacity:1; }
.bt-mini .bt-cab-handle,.bt-mini .bt-cab-edge{ stroke:#344044; }
.bt-mini .bt-cab-grain{ stroke:rgba(52,40,31,.3); }
.bt-mini .bt-cab-accent{ stroke:#1CA3F0; }
.bt-meta{ display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; }
.bt-t1{ font-size: 11px; font-weight: 600; line-height: 1.15; }
.bt-t2{ font-size: 16px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.bt-foot{ display: flex; align-items: center; gap: 4px; }
.bt-hour{ font-size: 9px; color: rgba(17,27,33,.5); }
.bt-tick{ width: 15px; height: 9px; opacity: 0; }
.bt-wa{
  position: absolute;
  right: -6px; top: -13px;
  width: 27px; height: 27px;
  z-index: 3;
  opacity: 0;
  transform: scale(.5);
}

/* ── Saltar ──────────────────────────────────────────────── */
.bt-skip{
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: 16px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  color: #9C948B;
  font: inherit;
  font-size: 12px;
  padding: 6px 13px;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  animation: bt-fade .4s ease 1s forwards;
}
.bt-skip:hover{ background: rgba(255,255,255,.07); color: var(--ink); }

/* ── Coreografía — un solo reloj (--T) ───────────────────── */
.bt-run .bt-brand{ animation: bt-brandIn var(--T) ease-out both; }
.bt-run .bt-stage::before{ animation:bt-auraIn var(--T) ease-out both; }
.bt-run .bt-mob{ animation: bt-fly var(--T) cubic-bezier(.5,0,.2,1) both; }
.bt-run .bt-bub{ animation: bt-bubIn var(--T) cubic-bezier(.2,.8,.3,1) both; }
.bt-run .bt-mini{ animation: bt-miniIn var(--T) linear both; }
.bt-run .bt-wa{ animation: bt-waIn var(--T) cubic-bezier(.2,1.4,.4,1) both; }
.bt-run .bt-tick{ animation: bt-tickIn var(--T) linear both; }
/* Las piezas NO cuelgan del reloj general: cada una entra con su propio
   desfase (--d), que reparte js/boot-screen.js. Terminan sobre 1,2 s,
   bastante antes de que el mueble empiece a viajar (40 % de --T). */
.bt-run .bt-mob .bt-cab-piece{ animation:bt-pIn 380ms cubic-bezier(.16,.82,.28,1) var(--d,0ms) both; }
.bt-run .bt-mob .bt-cab-details{ animation:bt-detailIn 260ms ease-out 980ms both; }
.bt-run .bt-mob .bt-cab-accent{ animation:bt-detailIn 220ms ease-out 1120ms both; }

@keyframes bt-fade{ to{ opacity: 1; } }
@keyframes bt-brandIn{
  0%{ opacity: 0; transform: translateY(9px); }
  9%{ opacity: 1; transform: none; }
  100%{ opacity: 1; transform: none; }
}
@keyframes bt-auraIn{
  0%{ opacity:0; transform:scale(.82); }
  12%,44%{ opacity:1; transform:none; }
  62%,100%{ opacity:0; transform:scale(1.08); }
}
/* Cada pieza entra desde su lado (--ox/--oy los pone el JS). */
@keyframes bt-pIn{
  from{ opacity: 0; transform: translate(var(--ox,0px), var(--oy,0px)) scale(.94); }
  to{ opacity: 1; transform: none; }
}
@keyframes bt-detailIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes bt-fly{
  0%, 40%{ transform: none; opacity: 1; }
  56%{ transform: translate(var(--tx,0), var(--ty,0)) scale(var(--ts,.3)); opacity: 1; }
  60%, 100%{ transform: translate(var(--tx,0), var(--ty,0)) scale(var(--ts,.3)); opacity: 0; }
}
@keyframes bt-bubIn{
  0%, 44%{ opacity: 0; transform: translateY(16px) scale(.92); }
  58%, 100%{ opacity: 1; transform: none; }
}
@keyframes bt-miniIn{
  0%, 57%{ opacity: 0; }
  61%, 100%{ opacity: 1; }
}
@keyframes bt-waIn{
  0%, 60%{ opacity: 0; transform: scale(.5); }
  70%, 100%{ opacity: 1; transform: none; }
}
@keyframes bt-tickIn{
  0%, 74%{ opacity: 0; }
  80%, 100%{ opacity: 1; }
}

/* Sin animación: se muestra el cuadro final (mensaje enviado y leído). */
@media (prefers-reduced-motion: reduce){
  #belkBoot{ transition-duration: .01ms; }
  .bt-skip{ animation-duration: .01ms; animation-delay: 0s; opacity: 1; }
  .bt-run .bt-brand,
  .bt-run .bt-stage::before,
  .bt-run .bt-mob,
  .bt-run .bt-bub,
  .bt-run .bt-mini,
  .bt-run .bt-wa,
  .bt-run .bt-tick,
  .bt-run .bt-mob .bt-cab-piece,
  .bt-run .bt-mob .bt-cab-details,
  .bt-run .bt-mob .bt-cab-accent{ animation:none; }
  .bt-mob{ opacity: 0; }
  .bt-mob .bt-cab-details,.bt-mob .bt-cab-accent{ opacity:1; }
  .bt-bub, .bt-mini, .bt-wa, .bt-tick{ opacity: 1; transform: none; }
}