/* ==========================================================================
   Burgers Anormales — App (rediseño v2)
   Landing de scroll con barra de anclas + overlays a pantalla completa.
   Todos los valores salen de css/tokens.css (design system) y del .dc.html
   del rediseño. Mobile-first: la referencia es 390 × 844.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

:root { --tabs-h: 60px; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ba-black);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  overflow-x: hidden;
}

img { max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--link); text-decoration: none; }

/* Fondo de marca: textura atenuada + damero, fijos detrás de todo */
.app { position: relative; min-height: 100vh; isolation: isolate; }
.app::before {
  content: '';
  position: fixed; inset: 0; z-index: -2;
  background: url('../assets/fondo-marca.webp') center / cover no-repeat, var(--ba-black);
  opacity: .3;
}
.app::after {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  background: var(--damero);
}

/* Tipos base ------------------------------------------------------------- */
.dsp { font-family: var(--font-display); text-transform: uppercase; margin: 0; }
.tit { font-family: var(--font-display); font-size: 40px; line-height: .95; text-transform: uppercase; margin: 0; }
.tit--sm { font-size: 36px; }
.tag { font-family: var(--font-tag); font-size: 15px; color: var(--text-secondary); margin: 7px 0 0; }
.kicker { font-weight: 800; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.txt { font-size: var(--fs-sm); line-height: 1.4; color: var(--text-secondary); margin: 0; }
.txt--fuerte { color: var(--text-primary); font-size: 15px; line-height: 1.45; }
.centro { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Botones ---------------------------------------------------------------- */
.btn {
  display: block; width: 100%;
  font-family: var(--font-display); text-transform: uppercase; text-align: center;
  border-radius: 12px; padding: 15px 0; font-size: 22px; line-height: 1;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translate(2px, 2px); }
.btn--pink { background: var(--ba-pink); color: var(--text-on-accent); box-shadow: var(--shadow-hard); }
.btn--gold { background: var(--ba-gold); color: var(--text-on-accent); box-shadow: var(--shadow-hard); }
.btn--linea { border: var(--border-w) solid var(--border-hairline); color: var(--text-primary); }
.btn--xl { font-size: 34px; padding: 22px 0; border-radius: 14px; box-shadow: 5px 5px 0 var(--ba-black); }
.btn--md { font-size: 21px; padding: 16px 0; }
.btn--sm { width: auto; font-size: 17px; padding: 11px 22px; border-radius: 10px; box-shadow: 3px 3px 0 var(--ba-black); }
.btn[disabled] { opacity: .55; box-shadow: none; }
.enlace {
  display: block; width: 100%; min-height: 44px; text-align: center;
  font-weight: 800; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-muted); padding: 18px 0 8px;
}

/* Precio ----------------------------------------------------------------- */
.precio { display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--font-display); }
.precio .n { font-size: 28px; line-height: 1; }
.precio .e { font-size: 15px; }
.precio--xl .n { font-size: 44px; }
.precio--xl .e { font-size: 22px; }
.precio--lg .n { font-size: 34px; }
.precio--lg .e { font-size: 17px; }
.precio--sm .n { font-size: 22px; }
.precio--sm .e { font-size: 13px; }

/* ============================ BARRA STICKY ============================== */
.barra {
  position: sticky; top: 0; z-index: 30;
  background: rgba(16, 14, 14, .95);
  backdrop-filter: blur(8px);
  border-bottom: var(--border-w) solid var(--border-hairline);
  padding-top: env(safe-area-inset-top, 0px);
}
.barra__top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 16px 10px;
}
.barra__marca { font-family: var(--font-display); font-size: 15px; text-transform: uppercase; letter-spacing: .03em; }
.barra__lugar { font-weight: 800; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.sin-red {
  display: none; align-items: center; gap: 6px;
  background: var(--surface-card); border: var(--border-w) solid var(--ba-danger);
  border-radius: 9px; padding: 4px 9px;
  font-weight: 800; font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
}
.sin-red i { width: 7px; height: 7px; border-radius: 50%; background: var(--ba-danger); }
body.offline .sin-red { display: inline-flex; }
body.offline .barra__lugar { display: none; }

/* ============================== SECCIONES =============================== */
.sec {
  padding: 26px 20px 30px; border-top: var(--border-w) solid var(--border-hairline);
  scroll-margin-top: calc(env(safe-area-inset-top, 0px) + var(--barra-h, 62px));
}
.sec--alt { background: #151212; }
.sec__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sec__cab .kicker { text-align: right; }

/* Lockup Pegasus × Black Bull (se usa en el pie) ------------------------- */
.lockup { display: flex; align-items: center; gap: 8px; background: var(--ba-bone); border-radius: 9px; padding: 7px 11px; }
.lockup img { display: block; }
.lockup .x { font-family: var(--font-display); color: var(--ba-black); font-size: 13px; }

/* INICIO (hub) -----------------------------------------------------------
   Cabe en una pantalla y ordena por lo que la gente viene a hacer: primero
   donde esta y como se pide, luego la carta (que es a lo que viene el 90%),
   y por ultimo lo opcional bajo un rotulo que lo enmarca. */
.sec--hub {
  border-top: 0;
  display: flex; flex-direction: column; gap: 13px;
  padding: 14px 20px 20px;
  height: max(440px, calc(100vh - var(--barra-h, 46px) - var(--tabs-h)));
}
/* svh = viewport con la barra del navegador desplegada: el peor caso. */
@supports (height: 100svh) {
  .sec--hub { height: max(440px, calc(100svh - var(--barra-h, 46px) - var(--tabs-h))); }
}

/* Lo primero que se lee. Sin marca y sin broma, a tamano legible. */
.hub__orienta {
  flex: none; display: flex; gap: 10px;
  background: var(--surface-card); border: var(--border-w) solid var(--border-hairline);
  border-left: 6px solid var(--ba-bone-faint); border-radius: 12px;
  padding: 11px 14px;
  font-size: 14.5px; line-height: 1.35; font-weight: 700; color: var(--text-primary);
}
.hub__tit { flex: none; font-size: clamp(30px, 9vw, 40px); line-height: .92; }
.hub__mientras {
  flex: none; margin: 2px 0 -4px;
  font-weight: 800; font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted);
}

.acceso {
  position: relative; overflow: hidden; text-align: left;
  background: var(--surface-card);
  border: var(--border-w) solid var(--border-hairline);
  border-left: 6px solid var(--marca);
  border-radius: 16px; box-shadow: var(--shadow-hard);
}
.acceso:active { transform: translate(2px, 2px); }
.acceso__t {
  display: block; font-family: var(--font-display); line-height: .95; text-transform: uppercase;
}
.acceso__s {
  display: block; font-weight: 700; font-size: 12px; line-height: 1.25;
  color: var(--text-muted); margin-top: 5px;
}

/* Acceso principal: la carta, a todo lo ancho. */
.acceso--pri {
  /* Se queda con el aire que sobre, hasta un tope: es la accion principal. */
  flex: 3 1 auto; display: flex; align-items: center; gap: 12px;
  padding: 15px 16px; min-height: 104px; max-height: 280px;
}
.acceso--pri .acceso__txt { flex: 1; position: relative; z-index: 1; }
.acceso--pri .acceso__t { font-size: 32px; }
.acceso--pri img {
  flex: none; height: 100%; max-height: 168px; width: auto; margin: -6px -6px -6px 0;
  object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .6));
}

/* Los tres secundarios: mas pequenos y en fila. */
.hub__grid {
  /* Alto contenido: en pantalla alta no deben estirarse hasta parecer columnas. */
  flex: 1 1 132px; max-height: 200px; min-height: 88px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px;
}
.acceso--sec {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  padding: 10px 11px; min-height: 92px;
}
.acceso--sec img {
  flex: 1; min-height: 0; width: 100%;
  object-fit: contain; object-position: center;
  filter: drop-shadow(0 5px 9px rgba(0, 0, 0, .55));
}
.acceso--sec .acceso__t { font-size: 19px; }
@media (max-height: 700px) { .acceso--sec img { display: none; } }
/* Movil corto: se aprieta todo un poco para no obligar a arrastrar. */
@media (max-height: 640px) {
  .sec--hub { gap: 10px; padding: 11px 18px 16px; }
  .hub__orienta { padding: 9px 12px; font-size: 13.5px; }
  .hub__tit { font-size: clamp(26px, 8vw, 34px); }
  .acceso--pri { min-height: 88px; padding: 12px 14px; }
  .acceso--pri .acceso__t { font-size: 27px; }
  .acceso--pri img { height: 72px; }
  .hub__grid { height: 92px; }
  .hub__pase { padding: 10px 12px; }
  .hub__pase .mini { height: 36px; }
}
/* Movil muy corto (SE de primera generacion y parecidos): cae el rotulo, que
   es lo unico prescindible, antes que obligar a arrastrar en la portada. */
@media (max-height: 600px) {
  .sec--hub { gap: 8px; }
  .hub__mientras { display: none; }
  .hub__grid { height: 84px; }
}

.hub__pase {
  /* Pegado abajo: lo que sobre queda por encima, no debajo del premio. */
  flex: none; margin-top: auto; display: flex; align-items: center; gap: 12px; text-align: left; width: 100%;
  background: var(--surface-card); border: var(--border-w) solid var(--ba-gold);
  border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow-hard);
}
.hub__pase:active { transform: translate(2px, 2px); }
.hub__pase .mini {
  flex: none; width: 34px; height: 42px; background: var(--ba-bone); border-radius: 5px;
  display: flex; align-items: center; justify-content: center; transform: rotate(-5deg);
  font-family: var(--font-tag); font-size: 8px; color: var(--ba-black); line-height: 1.05; text-align: center;
}
.hub__pase .t { font-family: var(--font-display); font-size: 19px; text-transform: uppercase; color: var(--ba-gold); line-height: 1; }
.hub__pase .s { font-weight: 700; font-size: 11.5px; color: var(--text-secondary); margin-top: 3px; }
.hub__pase .sellos { flex: none; display: flex; gap: 4px; }
.hub__pase .sellos i {
  display: block; width: 11px; height: 11px; border-radius: 50%;
  border: var(--border-w) solid var(--ba-ink-4);
}
.hub__pase .sellos i.on { background: var(--ba-gold); border-color: var(--ba-gold); }

/* CARTA ------------------------------------------------------------------ */
.chips {
  position: sticky; z-index: 20;
  top: calc(env(safe-area-inset-top, 0px) + var(--barra-h, 82px));
  margin: 14px -20px 0; padding: 10px 20px;
  background: rgba(16, 14, 14, .95); backdrop-filter: blur(8px);
  border-top: var(--border-w) solid var(--border-hairline);
  border-bottom: var(--border-w) solid var(--border-hairline);
  display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chips button {
  flex: none; min-height: 44px; font-family: var(--font-display); font-size: 13px; text-transform: uppercase;
  background: var(--surface-card); border: var(--border-w) solid var(--border-hairline);
  color: var(--text-secondary); padding: 5px 13px; border-radius: 8px;
}
.chips button[aria-current='true'] { background: var(--ba-pink); border-color: var(--ba-pink); color: var(--text-on-accent); }

.precio-cab {
  margin-top: 14px; padding: 14px 16px; display: flex; align-items: center; gap: 14px;
  background: var(--surface-card); border: var(--border-w) solid var(--border-hairline);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-hard);
}
.precio-cab .lbl { font-weight: 800; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }
.precio-cab .sep { width: 2px; height: 38px; background: var(--border-hairline); }
.precio-cab .mas { color: var(--ba-gold); }
.precio-cab .nota { flex: 1; text-align: right; font-weight: 700; font-size: 12px; line-height: 1.3; color: var(--text-secondary); }

/* Tarjeta rica de burger */
.bcard {
  display: block; width: 100%; margin-top: 16px; text-align: left;
  background: var(--surface-card); border: var(--border-w) solid var(--border-hairline);
  border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-hard);
}
.bcard:active { transform: translate(2px, 2px); }
.foto-marco {
  position: relative; height: 196px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 78% at 50% 108%, var(--glow), transparent 62%),
    linear-gradient(180deg, #14110F 0%, #191512 100%);
}
/* Sombra de contacto: la elipse difusa bajo la burger es lo que hace que se
   apoye en algo en vez de parecer pegada encima. */
.foto-marco::before {
  content: ''; position: absolute; z-index: 1;
  left: 50%; bottom: 14px; transform: translateX(-50%) rotate(-4deg);
  width: 64%; height: 22px; border-radius: 50%;
  background: rgba(0, 0, 0, .72); filter: blur(11px);
}
.foto-marco img.foto {
  position: relative; z-index: 2; height: 100%; width: 100%;
  object-fit: contain; padding: 10px 12px 18px;
  transform: rotate(-4deg) scale(1.1);
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .5));
}
.foto-marco .placeholder {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 76%; height: 62%; padding: 10px;
  border: 3px dashed var(--marca); border-radius: 14px;
}
.foto-marco .placeholder img { max-width: 100%; max-height: 100%; object-fit: contain; }
.foto-marco .sello-foto {
  position: absolute; bottom: 10px; left: 12px;
  font-weight: 800; font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted); background: rgba(16, 14, 14, .72); padding: 4px 8px; border-radius: 6px;
}
.bcard__body { padding: 16px 18px 18px; }
.wordmark { display: block; height: 52px; object-fit: contain; object-position: left; }
.bcard__desc { font-size: 14px; line-height: 1.4; color: var(--text-secondary); margin: 10px 0 0; }
.bcard__pie {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 14px; padding-top: 13px; border-top: var(--border-w) solid var(--border-hairline);
}
.bcard__precio { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.combo-chip { font-weight: 800; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.verla {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  background: var(--marca); color: var(--text-on-accent);
  font-family: var(--font-display); font-size: 14px; text-transform: uppercase;
  padding: 9px 14px; border-radius: 9px; box-shadow: 3px 3px 0 var(--ba-black);
}
/* Logo del patron, suelto ------------------------------------------------
   Version en negativo sobre fondo oscuro: ni pastilla ni recuadro. En la
   esquina de la foto de cada burger y al pie de su tarjeta de juego. */
.logo-esq {
  position: absolute; z-index: 4; top: 13px; right: 15px;
  display: inline-flex; align-items: center; isolation: isolate;
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, .9));
}
/* Velo: cada foto tiene otra cosa detras de esa esquina (el DIN naranja caia
   sobre su propio pan dorado y se perdia). Un oscurecido muy difuminado, sin
   borde visible, para que cualquier logo se lea encima de cualquier foto. */
.logo-esq::before {
  content: ''; position: absolute; z-index: -1; inset: -26px -30px -30px -40px;
  background: radial-gradient(ellipse at 68% 45%, rgba(0, 0, 0, .66), transparent 72%);
  pointer-events: none;
}
.logo-esq img { max-height: 26px; max-width: 132px; width: auto; object-fit: contain; }

.credito { display: inline-flex; align-items: center; gap: 7px; }
.credito__by { font-family: var(--font-tag); font-size: 13px; line-height: 1; color: var(--text-muted); }
.credito img { max-height: 20px; max-width: 104px; width: auto; object-fit: contain; }

/* Pegado abajo para que los cuatro queden a la misma altura aunque el nombre
   del juego ocupe una linea o dos. */
.jcard { display: flex; flex-direction: column; }
.jcard__body { flex: 1; display: flex; flex-direction: column; }
.jcard .credito { margin-top: auto; padding-top: 10px; }

.etiqueta-lim {
  /* Por encima de la foto: al darle z-index a la pegatina, la burger de la
     DIStinta (que es ancha) se comia media etiqueta. */
  position: absolute; z-index: 3; top: 10px; right: 12px;
  background: var(--marca); color: var(--text-on-accent);
  font-weight: 900; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 6px;
}

/* Lista compacta de carta */
.sec-titulo {
  font-family: var(--font-display); font-size: 24px; text-transform: uppercase; color: var(--ba-pink);
  margin-top: 26px; padding-bottom: 6px; border-bottom: 3px solid var(--ba-pink);
}
.lista { margin-top: 4px; }
.litem {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: var(--border-w) solid var(--border-hairline);
}
.litem__n { font-weight: 900; font-size: 15px; color: var(--text-primary); letter-spacing: .01em; }
.litem__nota { font-weight: 600; font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.litem__extra { font-weight: 800; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); margin-top: 3px; }

/* PASAPORTE -------------------------------------------------------------- */
.pasos { display: grid; gap: 9px; margin-top: 16px; }
.paso {
  display: flex; gap: 12px; align-items: center;
  background: var(--surface-card); border: var(--border-w) solid var(--border-hairline);
  border-radius: 12px; padding: 12px 14px;
}
.paso--final { border-color: var(--ba-gold); }
.paso .n { flex: none; width: 20px; font-family: var(--font-display); font-size: 22px; color: var(--ba-pink); }
.paso--final .n { color: var(--ba-gold); }
.paso .t { font-size: 13.5px; line-height: 1.35; color: var(--text-primary); }
.album { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 9px; }
.cromo {
  aspect-ratio: .82; background: var(--surface-card);
  border: var(--border-w) dashed var(--marca); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; padding: 6px;
}
.cromo img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* VOTA ------------------------------------------------------------------- */
.voto-lista { display: grid; gap: 10px; margin-top: 16px; }
.voto-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--surface-card); border: var(--border-w) solid var(--border-hairline);
  border-left: 6px solid var(--marca); border-radius: 12px; padding: 12px 14px;
}
.voto-row img { height: 30px; flex: 1; min-width: 0; object-fit: contain; object-position: left; }
.voto-row .n { flex: 1; font-family: var(--font-display); font-size: 20px; text-transform: uppercase; }
.voto-row .cta {
  flex: none; background: var(--ba-pink); color: var(--text-on-accent);
  font-family: var(--font-display); font-size: 14px; text-transform: uppercase;
  padding: 9px 16px; border-radius: 9px; box-shadow: 3px 3px 0 var(--ba-black);
}
.chip-ok {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ba-success); color: var(--text-on-accent);
  font-family: var(--font-display); font-size: 14px; text-transform: uppercase;
  padding: 7px 13px; border-radius: 9px; box-shadow: 3px 3px 0 var(--ba-black);
}
.barras { display: grid; gap: 14px; margin-top: 22px; }
.barra__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.barra__cab .n { font-weight: 900; font-size: 13px; text-transform: uppercase; color: var(--text-primary); }
.barra__cab .s { font-family: var(--font-display); font-size: 19px; }
.pista { height: 16px; background: var(--surface-card); border: var(--border-w) solid var(--border-hairline); border-radius: 8px; margin-top: 5px; overflow: hidden; }
.pista i { display: block; height: 100%; background: var(--marca); transition: width var(--dur-slow) var(--ease-out); }
.barra--mia .pista { border-color: var(--ba-gold); box-shadow: 0 0 12px rgba(244, 196, 48, .35); }
.card-cierre {
  margin-top: 24px; padding: 16px; text-align: center;
  background: var(--surface-card); border: var(--border-w) solid var(--border-hairline);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-hard);
}
.vacio { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 26px 6px 10px; }
.vacio img { width: 146px; opacity: .85; filter: drop-shadow(0 0 20px rgba(247, 46, 183, .35)); }

/* JUEGA ------------------------------------------------------------------ */
.juego-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.jcard {
  background: var(--surface-card); border: var(--border-w) solid var(--border-hairline);
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-hard); text-align: left;
}
.jcard:active { transform: translate(2px, 2px); }
.jcard__hero {
  height: 88px; display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(circle at 50% 70%, var(--glow), transparent 70%), #171414;
}
.jcard__hero img { max-width: 96%; max-height: 84px; object-fit: contain; }
.jcard__body { padding: 11px 12px 13px; }
.jcard__n { font-family: var(--font-display); font-size: 18px; line-height: .98; text-transform: uppercase; }
.jcard__m { font-weight: 700; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin-top: 6px; }

/* PATROCINADORES --------------------------------------------------------- */
.patro-lista { display: grid; gap: 12px; margin-top: 16px; }
.patro {
  background: var(--surface-card); border: var(--border-w) solid var(--border-hairline);
  border-radius: var(--radius-lg); padding: 14px; box-shadow: var(--shadow-hard);
}
.patro__cab { display: flex; align-items: center; gap: 12px; }
.pastilla {
  flex: none; width: 74px; height: 44px; border-radius: 9px; padding: 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ba-bone);
}
.pastilla--oscura { background: var(--ba-black); border: var(--border-w) solid var(--ba-ink-4); }
/* Logotipo apaisado: en la pastilla cuadrada se quedaba en una tira ilegible. */
.pastilla--ancha { width: 124px; }
.banda .pastilla.pastilla--ancha { width: 112px; }
.pastilla img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Lockup dentro de la pastilla: la altura la manda la caja, no el archivo.
   Pegasus es apaisado y el emblema de Black Bull cuadrado. */
.pastilla .lk-p { max-height: 62%; }
.pastilla .lk-b { max-height: 100%; }
.patro__n { font-family: var(--font-display); font-size: 19px; text-transform: uppercase; line-height: 1; }
.patro__s { font-weight: 700; font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }
.patro__txt { font-size: 13.5px; line-height: 1.4; color: var(--text-secondary); margin: 11px 0 0; }
.patro__acc { display: flex; gap: 8px; margin-top: 11px; }
.patro__acc a, .patro__acc button {
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--surface-raised); color: var(--text-primary);
  font-weight: 800; font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 8px;
}

/* SOMOS (manifiesto) ----------------------------------------------------- */
.somos-cita {
  margin: 16px 0 0; padding: 12px 0 12px 15px;
  border-left: 5px solid var(--ba-pink);
  font-family: var(--font-tag); font-size: 19px; line-height: 1.25; color: var(--text-primary);
}
.somos-cierre {
  margin: 18px 0 0; font-family: var(--font-display); font-size: 26px;
  text-transform: uppercase; color: var(--ba-gold);
}

/* PIE -------------------------------------------------------------------- */
.pie {
  padding: 24px 20px calc(env(safe-area-inset-bottom, 0px) + var(--tabs-h) + 26px);
  border-top: var(--border-w) solid var(--border-hairline);
  background: #0D0B0B; text-align: center;
}
.pie .lockup { display: inline-flex; }
.redes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 9px; }
.redes a {
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--surface-card); border: var(--border-w) solid var(--border-hairline);
  border-radius: 9px; padding: 0 13px;
  font-weight: 800; font-size: 12px; color: var(--text-primary);
}
.pie__linea { font-weight: 700; font-size: 11.5px; color: var(--text-muted); margin-top: 12px; line-height: 1.4; }

/* ===================== BARRA DE NAVEGACION (ABAJO) ======================
   Fija, siempre visible y en la zona del pulgar. Sustituye a las anclas de
   arriba: llegar a cualquier seccion es un toque, no medio kilometro de
   scroll. Con un overlay abierto desaparece: alli manda el propio overlay. */
.tabs {
  position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: rgba(16, 14, 14, .97);
  backdrop-filter: blur(10px);
  border-top: var(--border-w) solid var(--border-hairline);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabs button {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: var(--tabs-h); padding: 8px 1px;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0;
  text-transform: uppercase; color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.tabs button svg {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.tabs button[aria-current='true'] { color: var(--ba-pink); }
.tabs button[aria-current='true']::before {
  content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 34px; height: 3px; background: var(--ba-pink); border-radius: 0 0 3px 3px;
}
.tabs button:active { transform: translateY(1px); }
body.ov-abierto .tabs { display: none; }

/* ============================== OVERLAYS ================================ */
.ov {
  position: fixed; inset: 0; z-index: 60;
  background: var(--ba-black);
  overflow-y: auto; overscroll-behavior: contain;
  animation: ovIn var(--dur-med) var(--ease-out);
}
.ov--plano { display: flex; flex-direction: column; overflow: hidden; }
@keyframes ovIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.volver {
  position: absolute; z-index: 3; min-height: 44px; display: inline-flex; align-items: center;
  top: calc(env(safe-area-inset-top, 0px) + 14px); left: 14px;
  background: rgba(16, 14, 14, .72); border-radius: 9px; padding: 8px 15px;
  font-family: var(--font-display); font-size: 14px; text-transform: uppercase; color: var(--text-primary);
}
.cerrar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface-card); border: var(--border-w) solid var(--border-hairline);
  display: flex; align-items: center; justify-content: center;
}

/* Detalle de burger */
.det-foto {
  position: relative; height: 324px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(115% 74% at 50% 100%, var(--glow), transparent 60%),
    linear-gradient(180deg, #14110F 0%, #191512 100%);
}
.det-foto::before {
  content: ''; position: absolute; z-index: 1;
  left: 50%; bottom: 62px; transform: translateX(-50%) rotate(-2.5deg);
  width: 58%; height: 26px; border-radius: 50%;
  background: rgba(0, 0, 0, .7); filter: blur(13px);
}
.det-foto::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(transparent, var(--ba-black)); }
.det-foto .placeholder { position: relative; display: flex; align-items: center; justify-content: center; width: 74%; height: 56%; padding: 14px; border: 3px dashed var(--marca); border-radius: 16px; }
.det-foto .placeholder img { max-width: 100%; max-height: 100%; object-fit: contain; }
.det-foto img.foto {
  position: relative; z-index: 2; width: 100%; height: 100%;
  object-fit: contain; padding: 14px 18px 56px;
  transform: rotate(-2.5deg) scale(1.06);
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .55));
}
.det-foto .sello-foto { position: absolute; bottom: 12px; left: 16px; font-weight: 800; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); background: rgba(16,14,14,.72); padding: 5px 9px; border-radius: 6px; z-index: 2; }
.det-body { position: relative; padding: 0 20px calc(env(safe-area-inset-bottom, 0px) + 26px); margin-top: -26px; }
.det-body .wordmark { height: 74px; }
.det-precio { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.det-combo { background: var(--surface-card); border: var(--border-w) solid var(--border-hairline); border-radius: 10px; padding: 8px 12px; }
.det-combo .t { font-weight: 900; font-size: 12.5px; color: var(--text-primary); letter-spacing: .02em; }
.det-combo .s { font-weight: 700; font-size: 10.5px; color: var(--text-muted); margin-top: 1px; }
.ing { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.ing span {
  background: var(--surface-card); border: var(--border-w) solid var(--border-hairline);
  border-left: 4px solid var(--marca); border-radius: 8px; padding: 6px 10px;
  font-weight: 700; font-size: 12.5px; color: var(--text-primary);
}
.banda {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  margin-top: 16px; padding: 12px 14px;
  background: var(--surface-card); border: var(--border-w) solid var(--marca);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-hard);
}
.banda .pastilla { width: 64px; height: 40px; padding: 5px; border-radius: 8px; }
.banda__k { font-weight: 800; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.banda__t { font-family: var(--font-display); font-size: 17px; text-transform: uppercase; line-height: 1.05; margin-top: 2px; }
.claim {
  margin: 9px 2px 0; font-family: var(--font-tag); font-size: 14.5px; line-height: 1.3;
  color: var(--marca); text-align: center;
}
.det-acc { display: flex; gap: 10px; margin-top: 10px; }
.det-acc__pase {
  flex: 1; display: flex; align-items: center; gap: 9px; text-align: left;
  background: var(--surface-card); border: var(--border-w) solid var(--ba-gold); border-radius: 12px; padding: 11px 12px;
}
.det-acc__pase .mini {
  flex: none; width: 26px; height: 32px; background: var(--ba-bone); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-tag); font-size: 7px; color: var(--ba-black); line-height: 1; transform: rotate(-5deg);
}
.det-acc__juego {
  flex: none; width: 118px; text-align: left;
  background: var(--surface-card); border: var(--border-w) solid var(--border-hairline); border-radius: 12px; padding: 11px 12px;
}
.det-acc .t { font-family: var(--font-display); font-size: 14px; text-transform: uppercase; line-height: 1; }
.det-acc .s { font-weight: 700; font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
.det-acc__pase .t { color: var(--ba-gold); }

/* Historia de marca */
.his-hero {
  position: relative; height: 44vh; min-height: 300px; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(circle at 50% 62%, var(--glow), transparent 68%), #171414;
}
.his-hero::before { content: ''; position: absolute; inset: 0; background: repeating-conic-gradient(rgba(255,255,255,.03) 0% 25%, transparent 0% 50%) 50% / 40px 40px; }
.his-hero > img { position: relative; max-width: 90%; max-height: 86%; object-fit: contain; }
.his-hero .marca-pos {
  position: absolute; z-index: 2; top: calc(env(safe-area-inset-top, 0px) + 12px); left: 50%; transform: translateX(-50%);
  background: var(--ba-bone); border-radius: 11px; padding: 9px 16px; box-shadow: 3px 3px 0 var(--ba-black);
  display: flex; align-items: center;
}
.his-hero .marca-pos--oscura { background: var(--ba-black); border: var(--border-w) solid var(--ba-ink-4); }
.his-hero .marca-pos img { height: 30px; display: block; }
.his-body {
  padding: 22px 22px calc(env(safe-area-inset-bottom, 0px) + 26px);
  background: linear-gradient(var(--ba-black), #151212);
  display: flex; flex-direction: column; min-height: 46vh;
}
.his-body .kicker { color: var(--marca); font-size: 11px; letter-spacing: .08em; }
.his-body .tit { font-size: 38px; margin-top: 7px; }
.his-prop { margin-top: 16px; background: var(--surface-card); border: var(--border-w) solid var(--border-hairline); border-radius: 12px; padding: 13px 15px; }
.his-prop p { font-size: 13.5px; line-height: 1.4; color: var(--text-secondary); margin: 0; }
.his-acc { margin-top: auto; padding-top: 20px; display: flex; gap: 10px; }
.his-acc .btn { font-size: 20px; }
.his-acc .btn--linea { flex: none; width: 112px; font-size: 16px; }

/* Foto compuesta en estudio ---------------------------------------------
   Ya trae fondo, sombra de contacto y resplandor dentro de la propia imagen,
   asi que el marco se limita a encuadrarla a sangre: ni pegatina girada, ni
   glow del CSS, ni elipse debajo. El encuadre vertical va al 53%, que es
   donde queda centrada la burger dentro del cuadrado. */
.marco--plana { background: #14110F; }
.foto-marco.marco--plana::before,
.det-foto.marco--plana::before { display: none; }
.marco--plana img.foto {
  padding: 0; transform: none;
  object-fit: cover; object-position: 50% 53%;
  filter: none;
}
/* Con recorte bastaban 196px. A sangre hace falta mas alto o se corta el pan:
   la burger ocupa el 80% del cuadrado y hay que dejarla entera. */
.bcard .foto-marco.marco--plana { height: 300px; }
.det-foto.marco--plana { height: 380px; }

/* La foto trae su propio fondo oscuro (bordes en rgb 9-34) y la tarjeta era
   mas clara (34,30,30): se veia un escalon duro justo donde acaba la imagen,
   como si hubiera dos fondos apilados. La tarjeta se oscurece hasta el tono de
   la foto y el ultimo tramo de imagen se funde con ella. */
.bcard--plana { background: #121010; }
.foto-marco.marco--plana::after {
  content: ''; position: absolute; z-index: 3; inset: auto 0 0 0;
  height: 64px; background: linear-gradient(transparent, #121010);
  pointer-events: none;
}
/* El cuerpo del detalle subia 26px para montarse sobre el recorte, que era
   transparente por abajo. Con la foto a sangre eso metia el wordmark dentro
   de la imagen: aqui la foto acaba donde acaba. */
.det--plana .det-body { margin-top: 8px; }
.det-foto.marco--plana::after { height: 96px; }

/* ============================ JUEGO (overlay) =========================== */
.jg { background: var(--ba-black); }
.jg__top {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) 20px 0;
}
.jg__mid { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 24px; text-align: center; }
.jg__aro { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; }
.jg__aro::before { content: ''; position: absolute; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient(circle, var(--glow), transparent 66%); }
.jg__aro img { position: relative; max-width: 88%; max-height: 250px; object-fit: contain; }
.jg__n { font-family: var(--font-display); font-size: 52px; line-height: .92; text-transform: uppercase; margin: 14px 0 0; }
.jg__verbo { font-size: 16px; line-height: 1.4; color: var(--text-primary); margin: 12px 0 0; max-width: 290px; }
.jg__mejor {
  margin-top: 18px; display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface-card); border: var(--border-w) solid var(--border-hairline);
  border-radius: 12px; padding: 10px 16px;
}
.jg__mejor .l { font-weight: 800; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
.jg__mejor .v { font-family: var(--font-display); font-size: 24px; line-height: 1; }
.jg__pie { flex: none; padding: 0 22px calc(env(safe-area-inset-bottom, 0px) + 26px); }
.jg__pie .nota { margin-top: 11px; text-align: center; font-weight: 700; font-size: 12.5px; color: var(--text-muted); }

/* Jugando: HUD + lienzo */
.hud {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px 14px;
  background: rgba(16, 14, 14, .9); border-bottom: var(--border-w) solid var(--border-hairline);
}
.hud__vidas { display: flex; gap: 5px; }
.hud__score { font-family: var(--font-display); font-size: 30px; line-height: 1; }
.hud__der { display: flex; align-items: center; gap: 8px; }
.hud__son {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--surface-card); border: var(--border-w) solid var(--border-hairline);
  color: var(--text-secondary); display: flex; align-items: center; justify-content: center;
}
.hud__mult {
  background: var(--ba-pink); color: var(--text-on-accent);
  font-family: var(--font-display); font-size: 15px; padding: 5px 10px; border-radius: 8px;
  transition: opacity var(--dur-fast) linear;
}
.hud__mult--off { opacity: 0; }
.lienzo { flex: 1; position: relative; min-height: 0; background: radial-gradient(circle at 50% 78%, rgba(249,74,74,.18), transparent 62%); }
.lienzo canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.tuto {
  /* algo más arriba: a 9% se comía la llamada a la acción que pinta el juego */
  position: absolute; z-index: 4; bottom: 17%; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  animation: baPulse 1.1s ease-in-out infinite; pointer-events: none;
}
.tuto__txt {
  background: var(--ba-bone); color: var(--ba-black);
  font-family: var(--font-display); font-size: 15px; text-transform: uppercase;
  padding: 7px 14px; border-radius: 9px; box-shadow: 3px 3px 0 var(--ba-black);
}
.jg__salir { flex: none; padding: 16px 20px calc(env(safe-area-inset-bottom, 0px) + 18px); text-align: center; border-top: var(--border-w) solid var(--border-hairline); }
.jg__salir button { font-weight: 800; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); }
@keyframes baPulse { 0%, 100% { transform: translateX(-50%) scale(1); opacity: .9; } 50% { transform: translateX(-50%) scale(1.12); opacity: 1; } }

/* Resultado */
.res { padding: calc(env(safe-area-inset-top, 0px) + 30px) 22px calc(env(safe-area-inset-bottom, 0px) + 30px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.res__tag { font-family: var(--font-tag); font-size: 17px; color: var(--ba-gold); margin: 0; }
.res__lbl { font-weight: 800; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-top: 14px; }
.res__score { font-family: var(--font-display); font-size: 88px; line-height: .95; text-shadow: 0 0 36px rgba(247, 46, 183, .5); margin: 0; }
.res__nueva { margin-top: 8px; background: var(--ba-gold); color: var(--text-on-accent); font-family: var(--font-display); font-size: 16px; text-transform: uppercase; padding: 7px 16px; border-radius: 9px; box-shadow: 3px 3px 0 var(--ba-black); }
.res__antes { font-weight: 700; font-size: 12.5px; color: var(--text-muted); margin-top: 8px; }
.res__acc { width: 100%; display: flex; gap: 10px; margin-top: 26px; }
.res__acc .btn { flex: 1; }
.endcard {
  width: 100%; margin-top: 22px; padding: 16px; text-align: left;
  background: var(--surface-card); border: var(--border-w) solid var(--border-hairline);
  border-top: 5px solid var(--marca); border-radius: var(--radius-lg); box-shadow: var(--shadow-hard);
}
.endcard__cab { display: flex; align-items: center; gap: 12px; }
.endcard__txt { font-size: 13.5px; line-height: 1.4; color: var(--text-secondary); margin: 11px 0 0; }
.coleccion { width: 100%; margin-top: 16px; text-align: left; }
.coleccion__tira { display: flex; gap: 8px; margin-top: 9px; }
.coleccion__tira button {
  flex: 1; aspect-ratio: 1.35; background: var(--surface-card);
  border: var(--border-w) solid var(--marca); border-radius: 10px; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
}
.coleccion__tira img { max-width: 94%; max-height: 94%; object-fit: contain; }

/* ============================== ESTADOS ================================= */
.estado {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 36px; text-align: center;
}
.estado img.mascota { width: 172px; filter: drop-shadow(0 0 24px rgba(247, 46, 183, .4)); }
.estado--error img.mascota { transform: rotate(-8deg); }
.estado--offline img.mascota { width: 180px; filter: grayscale(.6) drop-shadow(0 0 22px rgba(249, 74, 74, .3)); }
.estado .tit { font-size: 44px; line-height: .94; margin-top: 18px; }
.estado p { font-size: 15px; line-height: 1.45; color: var(--text-primary); margin: 14px 0 0; }
.estado .btn { margin-top: 28px; }
.estado .nota { margin-top: 13px; font-family: var(--font-tag); font-size: 14px; color: var(--text-muted); }
.badge-red {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-card); border: var(--border-w) solid var(--ba-danger); border-radius: 9px;
  padding: 7px 13px; font-weight: 800; font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
}
.badge-red i { width: 8px; height: 8px; border-radius: 50%; background: var(--ba-danger); }

/* Carga: skeletons de color */
.skel { padding: 22px 20px 0; }
.skel .l, .skel .box, .skel .foto {
  border-radius: 8px;
  background: linear-gradient(90deg, var(--surface-card) 0%, #332C2C 40%, var(--surface-card) 80%);
  background-size: 260px 100%; animation: baShim 1.1s linear infinite;
}
.skel .l { height: 13px; margin-top: 8px; }
.skel .box { height: 66px; margin-top: 16px; border-radius: 14px; border: var(--border-w) solid var(--border-hairline); }
.skel .tarjeta { margin-top: 16px; border: var(--border-w) solid var(--border-hairline); border-radius: 16px; overflow: hidden; }
.skel .foto { height: 196px; border-radius: 0; }
.skel .cuerpo { padding: 16px 18px 18px; }
.cargando-pie { padding: 18px 20px calc(env(safe-area-inset-bottom, 0px) + 22px); text-align: center; font-family: var(--font-display); font-size: 20px; text-transform: uppercase; }
@keyframes baShim { 0% { background-position: -260px 0; } 100% { background-position: 260px 0; } }
@keyframes baSpin { to { transform: rotate(360deg); } }
.spinner { width: 17px; height: 17px; border: 3px solid var(--border-hairline); border-top-color: var(--ba-pink); border-radius: 50%; animation: baSpin .8s linear infinite; }

/* Con un overlay abierto, la landing no hace scroll por detrás ---------- */
body.ov-abierto { overflow: hidden; }

/* Toast ------------------------------------------------------------------ */
#toast-root { position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); z-index: 90; display: flex; justify-content: center; pointer-events: none; }
body:not(.ov-abierto) #toast-root { bottom: calc(env(safe-area-inset-bottom, 0px) + var(--tabs-h) + 16px); }
.toast {
  background: var(--ba-bone); color: var(--ba-black);
  font-weight: 800; font-size: 13.5px; padding: 11px 18px; border-radius: 10px;
  box-shadow: var(--shadow-hard); max-width: 86%; text-align: center;
}

/* Índice de revisión (no se enlaza desde la app) ------------------------- */
.dev-lista { display: grid; gap: 8px; margin-top: 14px; }
.dev-lista button {
  text-align: left; background: var(--surface-card); border: var(--border-w) solid var(--border-hairline);
  border-radius: 10px; padding: 12px 14px; font-weight: 800; font-size: 13px; color: var(--text-primary);
}

/* Pantallas grandes: la app se queda en columna de móvil centrada -------- */
@media (min-width: 620px) {
  .app__col, .ov { max-width: 430px; margin: 0 auto; }
  .ov { inset: 0; left: 50%; transform: translateX(-50%); }
  .barra { max-width: 430px; margin: 0 auto; }
  .tabs { max-width: 430px; left: 50%; right: auto; transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ov { animation: none; }
}