/* Acortador JM: sistema visual compartido por la plataforma (WordPress) y su vista previa.
   Paleta: negro y blanco de base, verde para acciones, amarillo para resaltar, rojo para peligro.
   Formas: botones y chips en píldora, campos 12px, tarjetas 20px. */

:root {
  --img-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Ccircle cx='9' cy='10' r='2'/%3E%3Cpath d='m21 16-5-5-9 9'/%3E%3C/svg%3E");
  --bg: #f2f3ef;
  --surface: #ffffff;
  --surface-2: #eaede7;
  --ink: #0d100e;
  --mut: #59615b;
  --line: #dde1da;
  --field-line: #aab2a8;
  --focus: #0a7a3d;
  --field: #ffffff;

  --green: #12b45a;
  --green-hover: #0fa24f;
  --green-ink: #06130b;
  --green-text: #0a7a3d;
  --green-soft: #daf4e4;

  --yellow: #ffd23f;
  --yellow-ink: #1c1600;
  --yellow-soft: #fff3c4;

  --red: #e0322a;
  --red-text: #c12720;
  --red-soft: #fde5e3;

  --inv: #0d100e;
  --inv-ink: #f4f5f1;
  --inv-mut: #9aa29c;
  --inv-line: #262c28;

  --shadow: 0 1px 0 rgba(13, 16, 14, .04), 0 18px 40px -22px rgba(13, 16, 14, .35);
  --r-card: 20px;
  --r-ctl: 12px;
  --display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --body: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: light;
}
/* Siempre empieza en claro; el oscuro solo se activa con el interruptor. */
:root[data-theme="dark"] {
  --bg: #151a17; --surface: #1f2522; --surface-2: #2a312d; --ink: #f2f5f0; --mut: #b1bab3; --line: #37403a; --field-line: #56615a; --focus: #3ddc84; --field: #1a201c;
  --green: #22c96b; --green-hover: #3ad67e; --green-ink: #04130a; --green-text: #3ddc84; --green-soft: #173a26;
  --yellow: #ffd23f; --yellow-ink: #1c1600; --yellow-soft: #3d3210;
  --red: #c9302a; --red-text: #ff7a70; --red-soft: #45201c;
  --inv: #262d29; --inv-ink: #f2f5f0; --inv-mut: #b1bab3; --inv-line: #3d4640;
  --shadow: 0 1px 0 rgba(0, 0, 0, .35), 0 18px 40px -22px rgba(0, 0, 0, .7);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; padding: 0 16px;
  background: var(--bg); color: var(--ink);
  font: 400 15px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--green-text); }
h1, h2, h3 { margin: 0; text-wrap: balance; }
code, .mono { font-family: var(--mono); font-size: .92em; }
img, canvas, svg { max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--mut); }
.small { font-size: 13px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Logotipo: el propio dominio ---------- */
.logo {
  font-family: var(--display); font-weight: 800; font-size: 23px; letter-spacing: -.03em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.logo span, .logo .logo-b { color: var(--green-text); }
.logo .logo-a { color: var(--ink); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: 600 14px/1 var(--body); white-space: nowrap; text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .08s;
}
.btn:hover { border-color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn.primary { background: var(--green); border-color: var(--green); color: var(--green-ink); font-weight: 700; }
.btn.primary:hover { background: var(--green-hover); border-color: var(--green-hover); }
.btn.dark { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.big { min-height: 54px; padding: 0 26px; font-size: 16px; }
.btn.wide { width: 100%; }
.btn.small { min-height: 34px; padding: 0 13px; font-size: 13px; }
.btn.quiet { color: var(--mut); }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row-end { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  padding: 4px; margin: 0; border: 0; background: none; cursor: pointer; border-radius: 999px;
}
.tt-track {
  position: relative; display: block; width: 58px; height: 30px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); transition: background .2s, border-color .2s;
}
.theme-toggle:hover .tt-track { border-color: var(--ink); }
.theme-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tt-ico { position: absolute; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; color: var(--mut); transition: opacity .2s; }
.tt-ico.sun { left: 7px; }
.tt-ico.moon { right: 7px; }
.tt-knob {
  position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); display: grid; place-items: center;
  transition: transform .22s cubic-bezier(.3, .7, .4, 1);
}
.tt-knob svg { width: 14px; height: 14px; grid-area: 1 / 1; transition: opacity .15s; }
.tt-knob .sun { color: #e0a800; }
.tt-knob .moon { color: #3b4a9c; opacity: 0; }
:root[data-theme="dark"] .tt-track { background: #1f2a45; border-color: #2f3d63; }
:root[data-theme="dark"] .tt-knob { transform: translateX(28px); background: #eef1ec; }
:root[data-theme="dark"] .tt-knob .sun { opacity: 0; }
:root[data-theme="dark"] .tt-knob .moon { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .tt-knob, .tt-track { transition: none; } }
.theme-toggle.corner { position: fixed; top: 14px; right: 16px; z-index: 6; }

/* Botón Mostrar/Ocultar de las contraseñas */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 86px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--ink); font: 600 12.5px var(--body); cursor: pointer; }
.pw-eye:hover { background: var(--line); }

/* ---------- Campos ---------- */
.stack { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label, legend { font-size: 13px; font-weight: 600; color: var(--ink); }
input[type=text], input[type=email], input[type=password], input[type=search], input[type=url], select {
  width: 100%; min-height: 46px; padding: 10px 14px;
  border: 1px solid var(--field-line); border-radius: var(--r-ctl);
  background: var(--field); color: var(--ink); font: 400 15px/1.3 var(--body);
}
input[type=tel], input[type=number] { width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--field-line); border-radius: var(--r-ctl); background: var(--field); color: var(--ink); font: 400 15px/1.3 var(--body); }
input:focus, select:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
input::placeholder { color: var(--mut); opacity: .8; }
.prefixed { display: flex; border: 1px solid var(--field-line); border-radius: var(--r-ctl); background: var(--field); overflow: hidden; }
.prefixed:focus-within { outline: 2px solid var(--focus); border-color: transparent; }
.prefixed .prefix { display: flex; align-items: center; padding: 0 2px 0 14px; font: 500 14px var(--mono); color: var(--mut); white-space: nowrap; }
.prefixed input { border: 0; background: transparent; padding-left: 2px; font: 500 14px var(--mono); }
.prefixed input:focus { outline: none; }
.form-error, .alert { margin: 0; padding: 11px 14px; border-radius: var(--r-ctl); background: var(--red-soft); color: var(--red-text); font-size: 14px; font-weight: 500; }
.warn { color: var(--red-text); margin: 8px 0 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }

/* Barra grande: el gesto principal de toda la plataforma */
.bigbar {
  display: flex; gap: 8px; padding: 7px; align-items: center;
  background: var(--field); border: 1.5px solid var(--ink); border-radius: 999px;
}
.bigbar:focus-within { box-shadow: 0 0 0 4px var(--green-soft); }
.bigbar input { border: 0; background: transparent; min-height: 48px; padding: 0 16px; font-size: 16px; }
.bigbar input:focus { outline: none; }

/* ---------- Portada ---------- */
.nav {
  max-width: 1160px; margin: 0 auto; padding-block: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.nav-links { display: flex; gap: 8px; align-items: center; }
.landing { max-width: 1160px; margin: 0 auto; padding-block: 0 64px; display: flex; flex-direction: column; gap: 22px; }
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; padding-block: 44px 56px; }
.hero h1 {
  font-family: var(--display); font-weight: 800; font-size: clamp(40px, 6vw, 72px);
  line-height: .98; letter-spacing: -.045em;
}
.hero mark { background: var(--yellow); color: var(--yellow-ink); padding: 0 .12em; border-radius: 10px; -webkit-box-decoration-break: clone; box-decoration-break: clone; white-space: nowrap; }
/* Una frase por renglón en cualquier idioma; el tamaño se ajusta al ancho para que no se desordene */
.hero h1 .l { display: block; }
.hero h1 { font-size: clamp(30px, 5.6vw, 72px); }
html[lang^="en"] .hero h1 { font-size: clamp(30px, 5vw, 62px); }
/* En una sola columna: la frase más larga ocupa casi todo el ancho (ES ≈ 6.7 em, EN ≈ 9.3 em) */
@media (max-width: 900px) {
  .hero h1 { font-size: min(64px, calc((100vw - 32px) / 7)); }
  html[lang^="en"] .hero h1 { font-size: min(56px, calc((100vw - 32px) / 9.7)); }
}
.lede { font-size: 18px; color: var(--mut); max-width: 32em; margin: 22px 0 28px; }
.lede code { color: var(--ink); background: var(--surface-2); padding: 2px 7px; border-radius: 8px; }

.demo {
  background: var(--inv); color: var(--inv-ink); border-radius: 28px; padding: 26px;
  display: grid; grid-template-columns: 1fr auto; gap: 18px 22px; align-items: end;
  border: 1px solid var(--inv-line); box-shadow: var(--shadow);
}
.demo-long, .demo-short-wrap { grid-column: 1 / -1; }
.demo-k { display: block; font-size: 12px; font-weight: 600; color: var(--inv-mut); margin-bottom: 4px; }
.demo-long { font-family: var(--mono); font-size: 12.5px; color: var(--inv-mut); word-break: break-all; text-decoration: line-through; text-decoration-color: var(--red); }
.demo-short { font-family: var(--mono); font-weight: 600; font-size: clamp(24px, 3vw, 32px); color: var(--green); word-break: break-all; letter-spacing: -.02em; }
.demo-qr { width: 132px; height: 132px; border-radius: 16px; overflow: hidden; background: #fff; padding: 6px; border: 3px solid var(--yellow); }
.demo-stat { font-size: 14px; color: var(--inv-mut); }
.demo-stat strong { display: block; font-family: var(--display); font-size: 40px; line-height: 1; letter-spacing: -.03em; color: var(--inv-ink); font-variant-numeric: tabular-nums; }

.bento { display: grid; grid-template-columns: 1.25fr 1fr; grid-auto-rows: minmax(210px, auto); gap: 14px; }
.tile { border-radius: 24px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; border: 1px solid var(--line); background: var(--surface); }
.tile h2 { font-family: var(--display); font-weight: 750; font-size: 26px; line-height: 1.05; letter-spacing: -.03em; max-width: 16ch; }
.tile p { margin: 8px 0 0; max-width: 42ch; color: var(--mut); }
.tile.t-green { background: var(--green); border-color: var(--green); color: var(--green-ink); }
.tile.t-green p { color: var(--green-ink); opacity: .78; }
.tile.t-yellow { background: var(--yellow); border-color: var(--yellow); color: var(--yellow-ink); }
.tile.t-yellow p { color: var(--yellow-ink); opacity: .75; }
.tile.t-ink { background: var(--inv); border-color: var(--inv-line); color: var(--inv-ink); }
.tile.t-ink p { color: var(--inv-mut); }
.tile-big { grid-row: span 2; }
.tile-wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 40px; }
.tile-wide > div:first-child { flex: 1 1 0; }
.tile-wide .sources { flex: 1.2 1 0; }
.tile-slug { font: 600 clamp(20px, 2.4vw, 30px) var(--mono); letter-spacing: -.02em; overflow-wrap: anywhere; }
.qr-trio { display: flex; gap: 10px; flex-wrap: wrap; }
.qr-trio > div { width: 84px; height: 84px; border-radius: 14px; background: #fff; padding: 5px; border: 1px solid var(--line); }
.tile-foot { display: flex; gap: 22px; align-items: flex-end; flex-wrap: wrap; }
.green-qr { width: 150px; height: 150px; flex: none; background: #fff; border-radius: 18px; padding: 9px; box-shadow: 0 12px 30px -14px rgba(6, 19, 11, .6); }
.swap .swap-k { font: 600 13px var(--body); background: none; padding: 0 2px; opacity: .8; }
.swap { display: grid; gap: 8px; font-family: var(--mono); font-size: 14px; }
.swap span { padding: 9px 14px; border-radius: 999px; background: rgba(0, 0, 0, .12); width: fit-content; max-width: 100%; overflow-wrap: anywhere; }
.swap span.old { text-decoration: line-through; opacity: .7; }
.sources { display: grid; gap: 10px; }
.src { display: grid; grid-template-columns: 96px 1fr 40px; gap: 10px; align-items: center; font-size: 14px; }
.src i { display: block; height: 10px; border-radius: 99px; background: var(--green); }
.src b { text-align: right; font-variant-numeric: tabular-nums; }
.foot { max-width: 1160px; margin: 0 auto; padding-block: 8px 32px; color: var(--mut); font-size: 13px; }

/* ---------- Entrar / crear cuenta / avisos ---------- */
.auth, .notice-page, .go {
  max-width: 440px; margin: 0 auto; padding-block: 56px;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.auth-card {
  width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 28px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 16px;
}
.auth-card h1 { font-family: var(--display); font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.auth-card p { margin: 0; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface-2); border-radius: 999px; padding: 4px; }
.tabs a { text-align: center; padding: 9px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--mut); text-decoration: none; }
.tabs a[aria-current] { background: var(--ink); color: var(--bg); }
.pending { font-size: 14px; color: var(--yellow-ink); background: var(--yellow); padding: 12px 14px; border-radius: var(--r-ctl); }
.pending span { font-family: var(--mono); font-size: 12.5px; word-break: break-all; }
.hp { position: absolute; left: -9999px; }
.notice-page, .go { text-align: center; padding-top: 14vh; }
.notice-page h1, .go h1 { font-family: var(--display); font-size: 38px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.notice-page p, .go p { margin: 0; }
.go-dest { font-family: var(--mono); font-size: 13px; color: var(--mut); overflow-wrap: anywhere; max-width: 100%; }

/* ---------- Panel: menú lateral (computadora) y pestañas (celular) ---------- */
body.shell-page { padding: 0; }
.side {
  position: fixed; inset: 0 auto 0 0; width: 248px; z-index: 5;
  display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--line);
}
/* Arriba: logo, crear, menú y extras (se desplaza si no cabe). Abajo: el perfil, siempre fijo. */
.side-top { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 18px; padding: 22px 16px 14px; }
.side .logo { padding: 0 8px; }
.side-new { min-height: 46px; }
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.side-nav a {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 12px;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px;
}
.side-nav a:hover { background: var(--surface-2); }
.side-nav a[aria-current="page"] { background: var(--ink); color: var(--bg); }
.side-nav a[aria-current="page"] svg { color: var(--green); }
.side-extra { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.side-extra .theme-toggle { align-self: flex-start; }
.side-link { color: var(--mut); text-decoration: none; font-size: 14px; font-weight: 600; padding: 6px 8px; border-radius: 8px; }
.side-link:hover { color: var(--ink); background: var(--surface-2); }
.side-foot { flex: none; display: flex; align-items: center; gap: 6px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--surface); }
.side-user { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 14px; text-decoration: none; color: var(--ink); }
.side-user:hover { background: var(--surface-2); }
.side-user[aria-current="page"] { background: var(--surface-2); outline: 1px solid var(--field-line); }
.side-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.side-who b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-who small { color: var(--mut); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-out { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--mut); }
.side-out:hover { color: var(--red-text); background: var(--surface-2); }
@media (min-width: 1001px) and (max-height: 760px) {
  .side-top { gap: 12px; padding-top: 16px; }
  .side-nav a { min-height: 40px; }
  .side-new { min-height: 42px; }
  .quota-h { display: none; }
}
.avatar {
  flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  display: inline-grid; place-items: center; background: var(--green); color: var(--green-ink);
  font: 800 15px var(--display); overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.sm { width: 24px; height: 24px; font-size: 12px; }
.avatar.xl { width: 84px; height: 84px; font-size: 34px; }
.avatar-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.mtop, .tabbar { display: none; }

.main {
  margin-left: 248px; display: flex; flex-direction: column; gap: 20px;
  padding: 30px max(36px, calc((100vw - 248px - 1180px) / 2)) 72px;
}
.main > * { min-width: 0; }
.view { display: flex; flex-direction: column; gap: 20px; }
.page-h { font-family: var(--display); font-size: 34px; font-weight: 800; letter-spacing: -.04em; line-height: 1.05; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.sec-head .card-title { margin: 0; }
.an-filters select { max-width: 280px; }

/* Indicadores */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 16px; background: var(--surface-2); min-width: 0; }
.kpi strong { font-family: var(--display); font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 13px; color: var(--mut); }
.kpi.hl { background: var(--inv); color: var(--inv-ink); }
.kpi.hl strong { color: var(--green); }
.kpi.hl span { color: var(--inv-mut); }
.stats-slug { font-size: 20px; font-weight: 600; color: var(--green-text); }
.top-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.top-item {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center;
  padding: 8px 10px; border: 0; border-radius: 12px; background: none; color: var(--ink); cursor: pointer; text-align: left; font: inherit;
}
.top-item:hover { background: var(--surface-2); }
.top-txt { display: flex; flex-direction: column; min-width: 0; }
.top-txt .mono { font-size: 14px; font-weight: 600; color: var(--green-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-item b { font-variant-numeric: tabular-nums; }
.top-item .bd-track { grid-column: 1 / -1; height: 6px; border-radius: 99px; overflow: hidden; }
.wide-bd { grid-column: 1 / -1; }

/* Primeros pasos */
.onboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.step { background: var(--surface-2); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.step p { margin: 0; }
.step-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--yellow); color: var(--yellow-ink); font: 800 16px var(--display); margin-bottom: 4px; }

/* Menú «Más» de cada link */
.more-wrap { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 4; min-width: 220px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.menu-item { text-align: left; min-height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: 600 14px var(--body); cursor: pointer; }
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-2); }
.menu-item.danger-item { color: var(--red-text); }

/* Perfil */
.subnav { display: flex; gap: 6px; flex-wrap: wrap; position: sticky; top: 0; z-index: 3; padding: 8px 0; background: var(--bg); }
.subnav a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.subnav a:hover { border-color: var(--ink); }
.main .card { scroll-margin-top: 64px; }
.plan { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 16px 18px; border-radius: 16px; background: var(--inv); color: var(--inv-ink); margin-bottom: 16px; }
.plan > div { display: flex; flex-direction: column; }
.plan .muted { color: var(--inv-mut); margin: 0; }
.plan > p.muted { flex: 1 1 260px; }
.plan-name { font-family: var(--display); font-size: 26px; font-weight: 800; color: var(--green); letter-spacing: -.02em; }
.usage { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.use { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; }
.use span { font-size: 13px; color: var(--mut); }
.use b { font-size: 18px; font-variant-numeric: tabular-nums; }
.meter { display: block; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--green); border-radius: 99px; }
.sub-title { font-family: var(--display); font-size: 18px; font-weight: 750; margin: 24px 0 12px; }

.app { max-width: 1080px; margin: 0 auto; padding-block: 28px 72px; display: flex; flex-direction: column; gap: 20px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px; }
.h-title { font-family: var(--display); font-size: 30px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; margin-bottom: 18px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px; }
.panel h1, .panel h2 { font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: -.03em; margin-bottom: 16px; }
.more { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.utm summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--green-text); width: fit-content; }
.utm[open] summary { margin-bottom: 2px; }

.created {
  margin-top: 18px; padding: 16px 18px; border-radius: 16px; background: var(--yellow); color: var(--yellow-ink);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.created > div:first-child { display: flex; flex-direction: column; min-width: 0; }
.created .muted { color: var(--yellow-ink); opacity: .7; }
.created-link { font: 600 21px var(--mono); color: var(--yellow-ink); overflow-wrap: anywhere; letter-spacing: -.02em; }
.created .btn { background: var(--yellow-ink); border-color: var(--yellow-ink); color: var(--yellow); }
.created .btn:hover { opacity: .9; }

.list-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.list-head h2 { margin: 0; }
.list-head input { max-width: 380px; min-height: 42px; border-radius: 999px; }
.links { display: flex; flex-direction: column; }
.link-row {
  display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: 18px; align-items: center;
  padding: 18px 0; border-top: 1px solid var(--line);
}
.link-row:first-child { border-top: 0; }
.thumb {
  width: 68px; height: 68px; padding: 5px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; display: grid; place-items: center;
  font: 700 12px var(--mono); color: #333; transition: transform .12s, border-color .12s;
}
.thumb svg { width: 100%; height: 100%; display: block; }
.thumb:hover { border-color: var(--green); transform: rotate(-2deg) scale(1.04); }
.info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.l-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.l-title { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; background: var(--surface-2); color: var(--ink); border: 1px solid var(--field-line); }
.chip-danger { background: var(--red-soft); color: var(--red-text); border-color: transparent; }
.warn-text { color: var(--red-text); }
.l-short { font: 600 16px var(--mono); color: var(--green-text); text-decoration: none; width: fit-content; max-width: 100%; overflow-wrap: anywhere; letter-spacing: -.01em; }
.l-short:hover { text-decoration: underline; }
.l-dest { color: var(--mut); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.l-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--mut); }
.l-meta b { color: var(--ink); font-variant-numeric: tabular-nums; }
.l-side { display: flex; align-items: center; gap: 20px; }
.l-count { display: flex; flex-direction: column; align-items: flex-end; min-width: 70px; }
.l-count strong { font-family: var(--display); font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.l-count span { font-size: 12px; color: var(--mut); white-space: nowrap; }
.l-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 280px; }
.link-row.paused .l-short, .link-row.paused .l-count strong { color: var(--mut); }
.link-row.paused .thumb { opacity: .5; }

/* ---------- Mi cuenta, legales, vista previa ---------- */
.app.narrow { max-width: 760px; }
.card-title { font-family: var(--display); font-size: 21px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 16px; }
.danger-zone { border-color: var(--red); }
.danger-zone .card-title { color: var(--red-text); }
.form-ok { margin: 0; padding: 11px 14px; border-radius: var(--r-ctl); background: var(--green-soft); color: var(--green-text); font-size: 14px; font-weight: 600; }
textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--field-line); border-radius: var(--r-ctl); background: var(--field); color: var(--ink); font: 400 15px/1.45 var(--body); resize: vertical; }
textarea:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
.check.small { align-items: flex-start; font-size: 13px; line-height: 1.4; }
.check input[type=checkbox] { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--green); flex: none; }
.legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; font-size: 13px; }
.legal-links a { color: var(--mut); text-decoration: none; }
.legal-links a:hover { color: var(--ink); text-decoration: underline; }
.foot { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; }
.foot .legal-links { justify-content: flex-end; }
.app-foot { max-width: 1080px; margin: 0 auto; padding-block: 0 36px; }
.legal { max-width: 70ch; margin: 0 auto; padding-block: 24px 56px; }
.legal h1 { font-family: var(--display); font-size: clamp(32px, 5vw, 46px); font-weight: 800; letter-spacing: -.035em; margin-bottom: 20px; }
.legal h2 { font-family: var(--display); font-size: 20px; font-weight: 750; margin: 28px 0 6px; }
.legal p { margin: 0 0 12px; color: var(--ink); }
.mono-head { font-family: var(--mono) !important; font-size: clamp(24px, 5vw, 34px) !important; font-weight: 600 !important; letter-spacing: -.02em; overflow-wrap: anywhere; }
.go .chip { display: inline-block; }

/* ---------- Diálogos ---------- */
.dlg {
  width: min(580px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  padding: 0; border: 1px solid var(--line); border-radius: 24px;
  background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45);
  overflow: hidden;
}
.dlg[open] { display: flex; flex-direction: column; }
.dlg-body { overflow-y: auto; overscroll-behavior: contain; min-height: 0; flex: 1 1 auto; }
.dlg-head, .dlg-foot { flex: none; }
.narrow-dlg { width: min(440px, calc(100vw - 24px)); }
.dlg-title { font-family: var(--display); font-size: 22px; font-weight: 800; letter-spacing: -.03em; overflow-wrap: anywhere; }
.dlg.wide { width: min(940px, calc(100vw - 24px)); }
.dlg::backdrop { background: rgba(5, 7, 6, .6); backdrop-filter: blur(3px); }
.dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 20px 24px 0; }
.dlg-head h2 { font-family: var(--display); font-size: 22px; font-weight: 800; letter-spacing: -.03em; overflow-wrap: anywhere; }
.x { border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 22px; line-height: 1; width: 38px; height: 38px; border-radius: 999px; cursor: pointer; flex: none; }
.x:hover { border-color: var(--ink); }
.dlg .dlg-body.stack, .dlg form.dlg-body { padding: 20px 24px 24px; }
.dlg-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px 18px; border-top: 1px solid var(--line); }
.note { margin: 0; font-size: 14px; background: var(--yellow-soft); color: var(--ink); padding: 12px 14px; border-radius: var(--r-ctl); }

/* ---------- Editor de QR ---------- */
.qr-editor { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 26px; padding: 20px 24px; align-items: start; }
.qr-preview {
  position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: var(--surface-2); border-radius: var(--r-card); padding: 16px;
}
.qr-preview canvas { width: 100%; max-width: 300px; height: auto; border-radius: 14px; box-shadow: var(--shadow); }
.qr-preview p { margin: 0; overflow-wrap: anywhere; text-align: center; }
.qr-controls { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 9px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn {
  min-height: 34px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 13px var(--body);
}
.chip-btn:hover { border-color: var(--ink); }
.chip-btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.colors { display: flex; flex-wrap: wrap; gap: 12px 18px; }
.color-field { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.color-field .hex { width: 92px; min-height: 38px; padding: 6px 10px; font: 500 13px var(--mono); text-transform: lowercase; }
.field.grow { flex: 1 1 200px; flex-direction: row; align-items: center; gap: 8px; }
.field.grow input { flex: 1; }
.colors label, .inline-color, .check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
input[type=color] { width: 44px; height: 36px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.frame-opts { display: flex; gap: 12px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.frame-opts #qr-frame-text { min-width: 140px; }
.pill-select { width: auto; min-height: 42px; border-radius: 999px; padding: 0 36px 0 16px; font-size: 14px; font-weight: 600;  max-width: 100%; min-width: 0; text-overflow: ellipsis; }
.qr-controls .btn-row + .muted { margin: 8px 0 0; }

.logo-grid { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; }
.logo-item { position: relative; }
.logo-tile {
  width: 66px; height: 66px; padding: 7px; border-radius: 14px; cursor: pointer; display: grid; place-items: center;
  border: 1px solid var(--line); background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 12px 12px;
  color: var(--mut); font: 600 12px/1.2 var(--body); text-align: center;
}
.logo-tile img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.logo-tile:hover { border-color: var(--ink); }
.logo-tile[aria-pressed="true"] { outline: 3px solid var(--green); outline-offset: 1px; border-color: var(--green); }
.logo-none { background: var(--surface); }
.logo-add { background: var(--surface); border: 1.5px solid var(--field-line); color: var(--ink); }
.logo-del {
  position: absolute; top: -8px; right: -8px; min-width: 22px; height: 22px; padding: 0; border-radius: 99px;
  border: 1px solid var(--line); background: var(--surface); color: var(--mut); font: 700 14px/1 var(--body);
  cursor: pointer; opacity: 0; transition: opacity .15s;
}
.logo-item:hover .logo-del, .logo-del:focus-visible, .logo-del.armed { opacity: 1; }
.logo-del.armed { background: var(--red); border-color: var(--red); color: #fff; font-size: 11px; padding: 0 7px; right: -14px; z-index: 1; }
@media (hover: none) { .logo-del { opacity: 1; } }
.logo-size { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

/* ---------- Estadísticas ---------- */
.stats-body { display: flex; flex-direction: column; gap: 16px; }
.stats-body h3 { font-size: 13px; font-weight: 700; color: var(--mut); }
.stats-head { display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-end; }
.stat-big { display: flex; flex-direction: column; }
.stat-big strong { font-family: var(--display); font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stat-big:nth-child(2) strong { color: var(--green-text); }
.stat-big span { color: var(--mut); font-size: 13px; }
.stats-dest { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: none; }
.chart { position: relative; margin: 0; background: var(--surface-2); border-radius: 16px; padding: 14px 14px 10px; }
.chart-tip { margin-top: 8px; font-size: 13px; color: var(--ink); font-weight: 600; min-height: 1.4em; }
.chart-max { position: absolute; top: 10px; left: 14px; font-size: 11px; color: var(--mut); }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 150px; padding-top: 22px; border-bottom: 1px solid var(--line); }
.bar { flex: 1; min-width: 0; padding: 0; border: 0; background: var(--green); border-radius: 4px 4px 0 0; cursor: pointer; }
.bars.dense { gap: 1px; }
.bars.dense .bar { border-radius: 2px 2px 0 0; }
.bar.zero { background: var(--line); }
.bar.peak { background: var(--yellow); }
.axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--mut); margin-top: 6px; }
.breakdowns { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px; }
.breakdowns.two { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.breakdown { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bd-row { display: flex; flex-direction: column; gap: 5px; }
.bd-top { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.bd-top span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-top b { font-variant-numeric: tabular-nums; }
.bd-track { height: 8px; border-radius: 99px; overflow: hidden; }
.bd-track { background: var(--surface-2); display: block; }
.bd-fill { display: block; height: 100%; background: var(--green); border-radius: 99px; }
.bd-fill.qr { background: var(--yellow); }
.recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.recent li { display: flex; gap: 14px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; flex-wrap: wrap; }
.recent li .mono { color: var(--mut); min-width: 130px; font-size: 13px; }

/* ---------- Aviso flotante ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  z-index: 20; max-width: calc(100vw - 32px);
  background: var(--ink); color: var(--bg); padding: 12px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 600; box-shadow: var(--shadow);
}
.toast { cursor: pointer; }
.toast.error { background: var(--red); color: #fff; }

/* ---------- Pantallas angostas ---------- */
@media (max-width: 1000px) {
  .side { display: none; }
  .main { margin-left: 0; padding: 18px 16px calc(96px + env(safe-area-inset-bottom, 0px)); }
  .mtop {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    position: sticky; top: 0; z-index: 5; padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top, 0px));
    background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
  }
  .mtop-r { display: flex; align-items: center; gap: 8px; }
  .mtop-out { color: var(--mut); font-size: 14px; font-weight: 600; text-decoration: none; padding: 10px 6px; }
  .tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 6;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); background: var(--surface); border-top: 1px solid var(--line);
  }
  .tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; border-radius: 12px; color: var(--mut); text-decoration: none; font-size: 11.5px; font-weight: 600; }
  .tabbar a[aria-current="page"] { color: var(--ink); background: var(--surface-2); }
  .tabbar a[aria-current="page"] svg { color: var(--green-text); }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  .page-h { font-size: 28px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .onboard { grid-template-columns: 1fr; }
  .subnav { top: 57px; overflow-x: auto; flex-wrap: nowrap; margin: 0 -16px; padding: 8px 16px; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 34px; padding-block: 24px 32px; }
  .bento { grid-template-columns: 1fr; }
  .tile-big { grid-row: auto; }
  .tile-wide { flex-direction: column; align-items: stretch; gap: 18px; }
  .qr-editor { grid-template-columns: 1fr; }
  .qr-preview { position: static; }
  .breakdowns { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .grid-2, .grid-3, .more { grid-template-columns: 1fr; }
  .btn.small, .chip-btn, .x, .pill-select { min-height: 44px; }
  .theme-toggle { padding: 7px 4px; }
  .x { width: 44px; height: 44px; }
  .tabs a { padding: 12px; }
  .logo-del { min-width: 30px; height: 30px; top: -10px; right: -10px; }
  .nav-links .nav-login { display: none; }
  .nav-links .btn { padding: 0 16px; }
  .qr-preview canvas { max-width: 220px; }
  .page-head .btn-row, .an-filters { width: 100%; }
  .an-filters select { flex: 1 1 100%; width: 100%; max-width: 100%; }
  .an-filters .btn { flex: 1 1 100%; }
  .main, .view, .card { min-width: 0; max-width: 100%; }
  .kpi strong { font-size: 26px; }
  .menu { right: auto; left: 0; }
  .bigbar { flex-direction: column; align-items: stretch; border-radius: 22px; }
  .bigbar .btn { width: 100%; }
  .link-row { grid-template-columns: 58px minmax(0, 1fr); align-items: start; gap: 14px; }
  .thumb { width: 58px; height: 58px; }
  .l-side { grid-column: 1 / -1; flex-direction: column; align-items: stretch; gap: 12px; }
  .l-count { flex-direction: row; align-items: baseline; gap: 8px; }
  .l-actions { justify-content: flex-start; max-width: none; }
  .tile-foot { flex-direction: column; align-items: flex-start; }
  .card, .panel { padding: 20px 16px; }
  .h-title { font-size: 26px; }
  .dlg-foot { flex-direction: column-reverse; align-items: stretch; }
  .demo { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .thumb:hover { transform: none; }
}
.utm { margin-top: 14px; }
#create-error { margin-top: 14px; }

/* Consumo del mes en el menú */
.quota { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--surface-2); color: var(--ink); text-decoration: none; }
a.quota:hover { outline: 1px solid var(--field-line); }
.quota-h { font-size: 11.5px; color: var(--mut); font-weight: 600; }
.quota-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; font-size: 13px; }
.quota-row b { font-variant-numeric: tabular-nums; }
.quota-row .meter { grid-column: 1 / -1; height: 6px; }
.quota.master { background: var(--inv); color: var(--inv-ink); flex-direction: row; justify-content: space-between; align-items: center; font-size: 13px; }
.quota.master span { color: var(--green); font-weight: 700; }
.plan.master .plan-name { color: var(--yellow); }
.plan-line { margin: 14px 4px 0; font-size: 14px; color: var(--mut); }
.verify-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; padding: 14px 18px; border-radius: 16px; background: var(--yellow); color: var(--yellow-ink); }
.verify-bar p { margin: 0; flex: 1 1 320px; font-size: 14px; }
.verify-bar .btn.dark { background: var(--yellow-ink); border-color: var(--yellow-ink); color: var(--yellow); }
.social { display: flex; flex-direction: column; gap: 10px; }
/* Botones «Continuar con…»: los colores de cada marca, del mismo alto y con el logo alineado a la vista */
.social-btn { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 20px; border-radius: 14px; border: 1px solid transparent; font: 600 16px/1 var(--body); letter-spacing: -.01em; text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.social-btn svg { flex: none; width: 20px; height: 20px; }
.social-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .55); }
.social-btn:active { transform: translateY(0); box-shadow: none; }
.social-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.social-btn.apple { background: #000; color: #fff; border-color: #000; }
.social-btn.apple svg { width: 19px; height: 22px; margin-top: -3px; }
.social-btn.google { background: #fff; color: #1f1f1f; border-color: #dadce0; }
.social-btn.facebook { background: #1877f2; color: #fff; border-color: #1877f2; }
:root[data-theme="dark"] .social-btn.apple { background: #fff; border-color: #fff; color: #000; }
:root[data-theme="dark"] .social-btn.apple:hover { background: #f2f2f2; }
:root[data-theme="dark"] .social-btn.google { background: #131314; color: #e3e3e3; border-color: #8e918f; }
.gis-btn { display: flex; justify-content: center; min-height: 44px; }
.social-legal { margin: 2px 2px 0; }
@media (prefers-reduced-motion: reduce) { .social-btn, .social-btn:hover { transition: none; transform: none; } }
.or { display: flex; align-items: center; gap: 12px; color: var(--mut); font-size: 13px; margin: 2px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.code-input { font: 600 24px var(--mono) !important; letter-spacing: .2em; text-align: center; }
.twofa { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; align-items: start; }
.twofa-qr { background: #fff; border-radius: 14px; padding: 8px; width: 200px; height: 200px; }
.twofa-secret { font: 600 15px var(--mono); letter-spacing: .08em; overflow-wrap: anywhere; background: var(--surface-2); padding: 8px 12px; border-radius: 10px; }
.backup-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; font: 600 15px var(--mono); list-style: none; margin: 0; padding: 14px 18px; background: var(--surface-2); border-radius: 14px; }
.warn-bar { background: var(--inv); color: var(--inv-ink); }
.warn-bar .btn.dark { background: var(--green); border-color: var(--green); color: var(--green-ink); }
@media (max-width: 680px) { .twofa { grid-template-columns: 1fr; } .twofa-qr { margin: 0 auto; } }
.chip-ok { background: var(--green-soft); color: var(--green-text); border-color: transparent; }
.card-title .chip { vertical-align: middle; margin-left: 6px; }
.side-link[aria-current="page"] { color: var(--ink); background: var(--surface-2); }
a.kpi { text-decoration: none; color: inherit; }
a.kpi:hover { outline: 1px solid var(--field-line); }
.kpis:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.user-list { display: flex; flex-direction: column; }
.user-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 10px 18px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.user-row:first-child { border-top: 0; }
.user-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.user-id .mono { overflow-wrap: anywhere; color: var(--mut); }
.user-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.user-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.pager { margin-top: 14px; }
@media (max-width: 900px) { .user-row { grid-template-columns: 1fr; } .user-acts { justify-content: flex-start; } }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.plan-card { border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.plan-card.current { border-color: var(--green); box-shadow: 0 0 0 1px var(--green) inset; }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.plan-top b { font-family: var(--display); font-size: 20px; }
.plan-card ul { margin: 10px 0 0; padding-left: 18px; color: var(--mut); font-size: 14px; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--mut); cursor: pointer; }
.legal-links .linkish:hover { color: var(--ink); text-decoration: underline; }
.cookie-bar { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 30; max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; padding: 16px 18px; border-radius: 18px;
  background: var(--inv); color: var(--inv-ink); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .6); }
.cookie-bar p { margin: 0; flex: 1 1 320px; font-size: 14px; }
.cookie-bar a { color: var(--green); }
.cookie-bar .btn { min-height: 44px; }
.cookie-bar .btn.ghost { color: var(--inv-ink); border-color: var(--inv-line); }
@media (max-width: 1000px) { .shell-page .cookie-bar { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } }
.faq { max-width: 820px; width: 100%; margin: 24px auto 0; display: flex; flex-direction: column; gap: 10px; }
.faq h2 { font-family: var(--display); font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -.035em; margin-bottom: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 0 18px; }
.faq summary { cursor: pointer; list-style: none; padding: 16px 0; font-weight: 650; font-size: 16px; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 700 20px var(--display); color: var(--green-text); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 16px; color: var(--mut); }
.wa-tile { background: var(--surface); }
.wa-demo { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.wa-bubble { background: #d9fdd3; color: #0b1b12; padding: 12px 16px; border-radius: 16px 16px 16px 4px; font-size: 15px; max-width: 34ch; box-shadow: 0 6px 18px -10px rgba(0,0,0,.35); }
.wa-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.seg { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 4px; gap: 4px; width: fit-content; }
.seg label { position: relative; padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg label:has(input:checked) { background: var(--ink); color: var(--bg); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Teléfono: país y número en un solo campo */
.phone-field { display: flex; align-items: stretch; border: 1px solid var(--field-line); border-radius: var(--r-ctl); background: var(--field); min-height: 48px; }
.phone-field:focus-within { outline: 2px solid var(--focus); border-color: transparent; }
.cc-pick { position: relative; flex: none; display: flex; align-items: center; gap: 6px; padding: 0 10px 0 14px; border-right: 1px solid var(--line); font: 600 15px var(--body); color: var(--ink); white-space: nowrap; border-radius: var(--r-ctl) 0 0 var(--r-ctl); }
.cc-pick:hover { background: var(--surface-2); }
.cc-caret { color: var(--mut); }
.cc-pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; font-size: 16px; }
.phone-field input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 16px; padding-left: 12px; }
.phone-field input:focus { outline: none; }
.wa-phone { position: sticky; top: 24px; }
.wa-screen { border-radius: 30px; overflow: hidden; border: 8px solid var(--ink); background: #efeae2; min-height: 360px; display: flex; flex-direction: column; }
.wa-top { display: flex; align-items: center; gap: 10px; padding: 14px; background: #075e54; color: #fff; font-size: 15px; }
.wa-avatar { width: 32px; height: 32px; border-radius: 50%; background: #d9fdd3; }
.wa-chat { flex: 1; padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; }
.wa-bubble.out { align-self: flex-end; background: #d9fdd3; color: #0b1b12; padding: 10px 14px; border-radius: 14px 14px 4px 14px; max-width: 90%; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14.5px; box-shadow: 0 1px 1px rgba(0,0,0,.12); }
.wa-phone.sms .wa-top { background: #f2f2f7; color: #111; }
.wa-phone.sms .wa-screen { background: #fff; }
.wa-phone.sms .wa-bubble.out { background: #0a84ff; color: #fff; border-radius: 18px 18px 4px 18px; }
.wa-full { margin-top: 10px; color: var(--mut); overflow-wrap: anywhere; }
@media (max-width: 1000px) { .wa-grid { grid-template-columns: 1fr; } .wa-phone { position: static; max-width: 360px; } }
@media (max-width: 1000px) { .tabbar { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; } .tabbar a { font-size: 10.5px; min-width: 0; } .tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
.scan { margin: 0; font-size: 13.5px; font-weight: 650; padding: 6px 12px; border-radius: 999px; background: var(--surface); }
.scan.ok { color: var(--green-text); }
.scan.bad { color: var(--red-text); background: var(--red-soft); }
.palette { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin-top: 12px; }
.small-select { min-height: 36px; font-size: 13px; padding: 0 30px 0 12px; }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatch { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--field-line); cursor: pointer; padding: 0; }
.swatch:hover { transform: scale(1.08); }
.logo-pos { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: center; margin-top: 12px; }
.color-field .hex { width: 130px; }
.frame-opts { align-items: flex-end; }
.brand-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-bottom: 14px; }
.bcolor { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 14px; }
.bcolor .sw { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--field-line); grid-row: span 2; }
.bcolor b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcolor small { font: 500 11.5px/1.45 var(--mono); color: var(--mut); grid-column: 2; }
.bcolor .x { width: 32px; height: 32px; font-size: 16px; grid-row: span 2; }
.color-add { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 46px auto; gap: 10px; align-items: end; }
.color-preview { width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--field-line); background: repeating-conic-gradient(var(--surface-2) 0 25%, var(--surface) 0 50%) 0 0 / 12px 12px; }
.brand-fonts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.bfont { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; }
.bfont span { font-size: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bfont small { color: var(--mut); white-space: nowrap; }
@media (max-width: 900px) { .color-add { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .color-add { grid-template-columns: 1fr; } }
.bcolor small { white-space: pre-line; }
.date-input { min-height: 38px; padding: 4px 10px; border: 1px solid var(--field-line); border-radius: 999px; background: var(--field); color: var(--ink); font: 500 13px var(--body); }
.kpis:has(> :nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 680px) { .kpis:has(> :nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Planes ---------- */
.plans-page { max-width: 1160px; margin: 0 auto; padding-block: 12px 56px; display: flex; flex-direction: column; gap: 28px; }
.plans-hero { text-align: center; max-width: 720px; margin: 0 auto; }
.plans-hero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 5vw, 56px); letter-spacing: -.04em; line-height: 1.02; }
.plans-hero .lede { margin: 16px auto 0; }
.eyebrow { margin: 0 0 10px; font-weight: 700; font-size: 14px; color: var(--green-text); text-transform: uppercase; letter-spacing: .06em; }
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; align-items: stretch; }
.price-card { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.price-card.featured { border: 2px solid var(--green); box-shadow: var(--shadow); }
.price-card.current { outline: 3px solid var(--yellow); }
.price-card.tour-card { background: var(--inv); color: var(--inv-ink); border-color: var(--inv-line); }
.price-card.tour-card .muted { color: var(--inv-mut); }
.price-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.price-top h2 { font-family: var(--display); font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.chip-hl { background: var(--yellow); color: var(--yellow-ink); border-color: transparent; }
.price { margin: 0; }
.price b { font-family: var(--display); font-size: 42px; letter-spacing: -.03em; }
.price span { color: var(--mut); }
.feats { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; flex: 1; font-size: 14.5px; }
.feats li { padding-left: 24px; position: relative; }
.feats li::before { content: "✓"; position: absolute; left: 0; color: var(--green-text); font-weight: 800; }
.transfer { display: flex; flex-direction: column; gap: 10px; }
.transfer summary { list-style: none; cursor: pointer; }
.transfer summary::-webkit-details-marker { display: none; }
.transfer dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 10px 0 0; padding: 12px 14px; background: var(--surface-2); border-radius: 14px; font-size: 14px; }
.transfer dt { color: var(--mut); }
.transfer dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.plans-foot { text-align: center; }
.tour-bar { background: var(--inv); color: var(--inv-ink); }
.tour-bar .btn.dark { background: var(--yellow); border-color: var(--yellow); color: var(--yellow-ink); }
.lang { display: inline-flex; background: var(--surface-2); border-radius: 999px; padding: 3px; }
.lang a { padding: 6px 10px; border-radius: 999px; font: 700 12px var(--body); color: var(--mut); text-decoration: none; }
.lang a[aria-current] { background: var(--ink); color: var(--bg); }

/* ---------- Tour guiado ---------- */
.tour-focus { position: relative; z-index: 40; box-shadow: 0 0 0 4px var(--yellow), 0 0 0 9999px rgba(5, 7, 6, .6) !important; border-radius: 14px; transition: box-shadow .2s; }
.tour-pop { position: fixed; z-index: 60; width: min(360px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); border-radius: 18px; padding: 18px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .55); border: 1px solid var(--line); }
.tour-pop h3 { font-family: var(--display); font-size: 20px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 8px; }
.tour-pop p { margin: 0 0 14px; font-size: 14.5px; color: var(--mut); }
.tour-step { font: 700 12px var(--body); color: var(--green-text); text-transform: uppercase; letter-spacing: .06em; }
.tour-acts { display: flex; gap: 8px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.tour-acts .btn-row { margin-left: auto; }
/* Celular: la nota es una tarjeta abajo (o arriba cuando señala la barra de abajo) */
.tour-pop.sheet, .tour-pop.sheet-top { left: 12px !important; right: 12px; width: auto; max-height: 46vh; overflow: auto; }
.tour-pop.sheet { top: auto !important; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
dialog .tour-pop.sheet { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
.tour-pop.sheet-top { top: 12px !important; bottom: auto; }
/* Paso «da clic aquí»: el elemento del menú late y lleva una mano */
.tour-point { animation: ajm-point 1.3s ease-in-out infinite; }
.tour-point::after { content: "👆"; position: absolute; right: 10px; top: 50%; margin-top: -13px; font-size: 20px; line-height: 26px; animation: ajm-tap 1.3s ease-in-out infinite; pointer-events: none; }
.tabbar .tour-point::after { right: auto; left: 50%; top: -30px; margin: 0 0 0 -10px; }
@keyframes ajm-point { 50% { box-shadow: 0 0 0 8px var(--yellow), 0 0 0 9999px rgba(5, 7, 6, .6); } }
@keyframes ajm-tap { 50% { transform: translateY(-5px); } }
.tour-pop.is-nav h3::before { content: "👆 "; }
.avatar .avatar2d { position: static; width: 100%; height: 100%; animation: none; }
@media (prefers-reduced-motion: reduce) { .tour-focus { transition: none; } .tour-point, .tour-point::after { animation: none; } }

/* ---------- Sitio público: encabezado, portada y pie ---------- */
.site-head { position: sticky; top: 0; z-index: 10; margin: 0 -16px; padding: 0 16px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.site-head-in { max-width: 1160px; margin: 0 auto; padding-block: 12px; display: flex; align-items: center; gap: 22px; }
.site-nav { display: flex; gap: 4px; }
.site-nav a, .site-nav-m a { padding: 10px 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; }
.site-nav a:hover { background: var(--surface-2); }
.site-acts { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.site-nav-m { display: none; }
.trust { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--mut); }
.trust li::before { content: "✓ "; color: var(--green-text); font-weight: 800; }
.hero-art { position: relative; min-height: 460px; }
.mock-phone { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: 240px; border-radius: 34px; background: var(--ink); padding: 12px; box-shadow: var(--shadow); animation: ajm-float 6s ease-in-out infinite; }
.phone-top { height: 16px; display: grid; place-items: center; }
.phone-top span { width: 60px; height: 6px; border-radius: 99px; background: #2a302c; }
.phone-card { background: #fff; color: #0d100e; border-radius: 24px; padding: 16px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.phone-card .demo-k { color: #59615b; margin: 0; }
.phone-card .demo-short { color: #0a7a3d; font-size: clamp(13px, 4vw, 18px); white-space: nowrap; word-break: normal; }
.phone-card .demo-qr { width: 162px; height: 162px; border-width: 3px; }
.mini-bars { display: flex; align-items: flex-end; gap: 5px; height: 50px; width: 100%; }
.mini-bars i { flex: 1; background: #12b45a; border-radius: 4px 4px 0 0; }
.mini-bars i.peak { background: #ffd23f; }
.float-chip { position: absolute; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow); animation: ajm-float 5s ease-in-out infinite; }
.float-chip.c1 { top: 40px; right: 0; color: var(--green-text); }
.float-chip.c2 { bottom: 190px; left: 0; animation-delay: -2s; }
.float-chip.c3 { top: 190px; right: -6px; background: #d9fdd3; color: #0b1b12; border-color: transparent; animation-delay: -1s; }
.avatar2d { position: absolute; width: 148px; height: auto; animation: ajm-float 7s ease-in-out infinite; }
.avatar2d.a1 { left: 0; top: 30px; animation-delay: -1.5s; }
.avatar2d.a2 { right: 0; bottom: 0; width: 168px; animation-delay: -3s; }
.avatar2d.a3 { left: 36px; bottom: 0; animation-delay: -4.5s; }
.avatar2d .av-eyes { transform-origin: 70px 68px; animation: ajm-blink 5s infinite; }
.avatar2d .av-wave { transform-origin: 104px 128px; animation: ajm-wave 2.4s ease-in-out infinite; }
.avatar2d .av-arm { transform-origin: 100px 132px; animation: ajm-lift 3.2s ease-in-out infinite; }
/* Personajes con pose (viewBox 180×180): brazo que saluda o señala, confeti que brilla */
.avatar2d.ch .ch-wave { transform-origin: 118px 138px; animation: ajm-wave 2.4s ease-in-out infinite; }
.avatar2d.ch .ch-lift { transform-origin: 118px 138px; animation: ajm-lift 3.2s ease-in-out infinite; }
.avatar2d.ch .ch-hop { animation: ajm-cheer 1.6s ease-in-out infinite; }
.avatar2d.ch .ch-confetti { animation: ajm-twinkle 1.6s ease-in-out infinite; }
@keyframes ajm-cheer { 50% { transform: translateY(-4px); } }
@keyframes ajm-twinkle { 50% { opacity: .35; } }
.step-top { display: flex; align-items: flex-end; justify-content: space-between; height: 92px; margin: -14px -8px 0 0; }
.step-top .avatar2d { position: static; width: 104px; animation: none; }
img.avatar2d.pic { height: auto; aspect-ratio: 1; object-fit: contain; }
.step-top img.avatar2d.pic { width: 112px; margin-bottom: -6px; }
.avatar img.avatar2d.pic { object-fit: cover; object-position: 50% 12%; transform: scale(1.5); transform-origin: 50% 0; }
@keyframes ajm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.mock-phone { animation-name: ajm-float-x; }
@keyframes ajm-float-x { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -10px); } }
@keyframes ajm-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes ajm-wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(10deg); } }
@keyframes ajm-lift { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-6deg); } }
.who { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.who span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: 14px; }
.how h2, .pricing h2, .faq h2 { font-family: var(--display); font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -.035em; text-align: center; margin-bottom: 18px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.steps li { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.steps h3 { font-family: var(--display); font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.steps p { margin: 0; color: var(--mut); }
.sec-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.sec-badges span { padding: 10px 14px; border-radius: 999px; background: var(--surface-2); font-weight: 600; font-size: 14px; }
.pricing .price-card h3 { font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -.03em; }
.price-note { margin-top: 14px; }
.cta-band { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 28px; border-radius: 28px; background: var(--inv); color: var(--inv-ink); border: 1px solid var(--inv-line); }
.cta-band > div:nth-child(2) { flex: 1 1 320px; }
.cta-band h2 { font-family: var(--display); font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -.03em; }
.cta-band p { margin: 8px 0 0; color: var(--inv-mut); }
.cta-avatars { display: flex; }
.cta-avatars .avatar2d { position: static; width: 104px; }
.site-foot { max-width: 1160px; margin: 24px auto 0; padding-block: 28px; border-top: 1px solid var(--line); }
.site-foot-in { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 24px; }
.site-foot nav { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.site-foot nav a, .site-foot .linkish { color: var(--mut); text-decoration: none; text-align: left; }
.site-foot nav a:hover { color: var(--ink); }
.sf-brand p { margin: 8px 0 0; max-width: 36ch; }
.sf-copy { margin: 20px 0 0; }
@media (max-width: 900px) {
  .site-nav { display: none; }
  .site-nav-m { display: flex; gap: 2px; overflow-x: auto; max-width: 1160px; margin: 0 auto; padding-bottom: 8px; }
  .site-nav-m a { font-size: 14px; padding: 8px 10px; white-space: nowrap; }
  .steps { grid-template-columns: 1fr; }
  .site-foot-in { grid-template-columns: 1fr 1fr; }
  .hero-art { min-height: 440px; }
}
@media (max-width: 680px) {
  .site-acts .site-login { display: none; }
  .site-acts .lang { display: none; }
  .site-head-in { gap: 10px; }
  .hero-art { min-height: 400px; }
  .mock-phone { width: 210px; }
  .avatar2d { width: 112px; }
  .avatar2d.a2 { width: 124px; }
  .float-chip { font-size: 12.5px; padding: 6px 10px; }
  .site-foot-in { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .mock-phone, .float-chip, .avatar2d, .avatar2d .av-eyes, .avatar2d .av-wave, .avatar2d .av-arm, .avatar2d .ch-wave, .avatar2d .ch-lift, .avatar2d .ch-hop, .avatar2d .ch-confetti { animation: none !important; }
}
.support-hero { display: grid; grid-template-columns: 1fr 250px; gap: 24px; align-items: center; padding-block: 24px 8px; }
.support-hero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 5vw, 56px); letter-spacing: -.04em; line-height: 1.02; }
.support-art .avatar2d { position: static; width: 240px; }
.support-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: start; }
.faq.compact { margin: 0; }
.faq.compact details { border-radius: 12px; }
.center { text-align: center; }
@media (max-width: 900px) { .support-hero, .support-grid { grid-template-columns: 1fr; } .support-art { display: none; } }
.plans-note { max-width: 720px; margin: 0 auto; text-align: center; }
.verify-note { background: var(--yellow-soft); color: var(--ink); border-radius: 14px; padding: 12px 16px; font-size: 14px; }
.verify-note a { font-weight: 600; margin-left: 4px; }
@media (max-width: 600px) {
  .page-plans .nav { gap: 10px; }
  .page-plans .nav-links { gap: 6px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
  .page-plans .nav-links .btn.ghost { display: none; } /* «Mi perfil» sigue en el pie de la página */
  .page-plans .nav-links .btn { padding-inline: 12px; }
}
.site-nav-m .lang { margin-left: auto; flex: none; }
@media (max-width: 680px) { .site-nav-m a { padding: 8px 8px; } }
@media (max-width: 440px) { .site-nav-m .nm-product { display: none; } .site-nav-m a { padding: 8px 6px; font-size: 13.5px; } }
.price-card.tour-card .btn.dark { background: var(--inv-ink); border-color: var(--inv-ink); color: var(--inv); }
@media (max-width: 900px) { .site-acts .site-login, .site-acts .lang { display: none; } }
.gis-btn { min-height: 44px; display: flex; justify-content: center; }
.logo { display: inline-flex; align-items: center; }
.logo .logo-mark { width: 1.15em; height: 1.15em; flex: none; margin-right: .32em; border-radius: 26%; }
/* Clicky guiña al pasar el mouse sobre el logo */
.logo-mark .lm-open { opacity: 0; }
.logo-mark .lm-spark { transform-box: fill-box; transform-origin: center; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .logo:hover .logo-mark .lm-open { animation: lm-open .9s both; }
  .logo:hover .logo-mark .lm-wink { animation: lm-wink .9s both; }
  .logo:hover .logo-mark .lm-spark { animation: lm-spark .9s cubic-bezier(.34, 1.56, .64, 1) both; }
}
@keyframes lm-open { 0%, 5% { opacity: 0; } 10%, 50% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes lm-wink { 0%, 5% { opacity: 1; } 10%, 50% { opacity: 0; } 55%, 100% { opacity: 1; } }
@keyframes lm-spark { 0%, 50% { transform: scale(1) rotate(0); } 72% { transform: scale(1.45) rotate(45deg); } 100% { transform: scale(1) rotate(90deg); } }
@media (max-width: 440px) {
  .site-head .logo { font-size: 20px; }
  .site-acts { gap: 4px; }
  .site-acts .btn { padding-inline: 12px; font-size: 14px; }
  .theme-toggle { padding: 7px 2px; }
  .tt-track { width: 50px; height: 28px; }
  .tt-knob { width: 22px; height: 22px; }
  :root[data-theme="dark"] .tt-knob { transform: translateX(22px); }
  .tt-ico.sun { left: 6px; } .tt-ico.moon { right: 6px; }
}
.tour-focus { scroll-margin-top: 20px; }
.tour-pop.docked { padding: 16px; }
.tour-pop.docked h3 { font-size: 18px; }
.tour-pop.docked p { font-size: 13.5px; }
.tour-pop.docked .tour-acts { flex-direction: column; align-items: stretch; }
.tour-pop.docked .tour-acts .btn-row { margin-left: 0; justify-content: space-between; }
.tour-pop.docked .tour-acts > a { order: 2; text-align: center; }

/* Las notas del tour contrastan con el tema: oscuras en el modo claro y claras en el modo oscuro. */
.tour-pop { --surface: #121614; --surface-2: #1a1f1c; --ink: #f4f5f1; --mut: #b7bfb8; --line: #333b36; --green-text: #3ddc84; --focus: #3ddc84; background: #121614; color: #f4f5f1; border-color: #121614; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .7); }
:root[data-theme="dark"] .tour-pop { --surface: #ffffff; --surface-2: #eaede7; --ink: #0d100e; --mut: #4d544f; --line: #d3d8d0; --green-text: #0a7a3d; --focus: #0a7a3d; background: #ffffff; color: #0d100e; border-color: #ffffff; }
.tour-pop a { color: var(--green-text); }
.tour-area { border-radius: 14px; }
.tour-area.tour-focus { padding: 4px 12px 10px; margin: 0 -12px; background: var(--surface); }
/* Interruptor de tema bien visible: pista amarilla (día) o índigo (noche) */
.tt-track { background: #ffe7a0; border: 1.5px solid #e0a800; }
.tt-ico { color: #7a6200; }
.theme-toggle:hover .tt-track { border-color: #b38600; }
:root[data-theme="dark"] .tt-track { background: #3b4a9c; border-color: #8c9cf0; }
:root[data-theme="dark"] .tt-ico { color: #dfe4ff; }
:root[data-theme="dark"] .theme-toggle:hover .tt-track { border-color: #c3ccff; }
.side .theme-toggle { gap: 10px; padding: 6px 12px 6px 4px; border-radius: 999px; }
.side .theme-toggle::after { content: "Tema claro"; font: 600 13px var(--body); color: var(--ink); }
:root[data-theme="dark"] .side .theme-toggle::after { content: "Tema oscuro"; }
.side .theme-toggle:hover { background: var(--surface-2); }
.btn.danger-ghost { color: var(--red-text); border-color: var(--red-soft); background: transparent; }
.btn.danger-ghost:hover { border-color: var(--red-text); }
.user-del { position: relative; }
.user-del summary { list-style: none; }
.user-del summary::-webkit-details-marker { display: none; }
.user-del[open] summary { background: var(--red-soft); }
.user-del-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; padding: 12px; border: 1px solid var(--red-soft); border-radius: 12px; background: var(--surface); max-width: 420px; }
.user-del-form p { margin: 0; flex-basis: 100%; color: var(--mut); }
.user-del-form input { flex: 1 1 160px; min-height: 38px; }

/* ---------- Analíticas: tablero ---------- */
#an-body.loading { opacity: .55; transition: opacity .15s; pointer-events: none; }
.dash-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; }
.fchip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 8px 0 14px; border-radius: 999px; border: 1px solid var(--green); background: var(--green-soft); color: var(--ink); font: 600 13px var(--body); cursor: pointer; }
.fchip b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface); font-size: 15px; line-height: 1; }
.fchip:hover b { background: var(--red-soft); color: var(--red-text); }
.dash-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dash-kpi { position: relative; overflow: hidden; padding-bottom: 42px; }
.dash-kpi .delta { position: absolute; top: 14px; right: 14px; font: 700 12px var(--body); padding: 3px 8px; border-radius: 999px; background: var(--surface-2); color: var(--mut); }
.dash-kpi .delta.up { background: var(--green-soft); color: var(--green-text); }
.dash-kpi .delta.down { background: var(--red-soft); color: var(--red-text); }
.kpi.hl .delta { background: rgba(255, 255, 255, .14); color: #fff; }
.kpi.hl .delta.up { color: #7ff0ae; } .kpi.hl .delta.down { color: #ffb0a8; }
.dash-kpi .spark { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 36px; }
.dash { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.dash-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; min-width: 0; }
.dash-wide { grid-column: span 2; }
.dash-wide2 { grid-column: span 2; }
.dash-insights { grid-row: span 1; }
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.dash-head h3 { margin: 0; font: 700 15px var(--body); }
.dash-ctrls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.legend { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 12.5px var(--body); cursor: pointer; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
.legend.off { opacity: .45; text-decoration: line-through; }
.seg-mini { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-2); }
.seg-mini button { border: 0; background: none; min-height: 26px; padding: 0 11px; border-radius: 999px; font: 600 12.5px var(--body); color: var(--mut); cursor: pointer; }
.seg-mini button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.chart.trend { margin: 0; background: none; padding: 0; }
.trend-wrap { position: relative; }
.trend-svg { display: block; width: 100%; height: auto; overflow: visible; }
.trend-svg .grid { stroke: var(--line); stroke-opacity: .7; }
.trend-svg .axis-t { fill: var(--mut); font: 500 11px var(--body); }
.trend-svg .guide { stroke: var(--ink); stroke-opacity: .25; }
.trend-svg .dot-c { fill: var(--surface); stroke: var(--green); stroke-width: 3; }
.trend-svg .dot-q { fill: var(--surface); stroke: var(--yellow); stroke-width: 3; }
.trend-svg .hit { cursor: crosshair; }
.trend-tip { position: absolute; top: 0; pointer-events: none; background: var(--inv); color: var(--inv-ink); border-radius: 10px; padding: 8px 10px; font: 500 12.5px var(--body); display: flex; flex-direction: column; gap: 2px; box-shadow: var(--shadow); white-space: nowrap; }
.trend-tip .tc::before, .trend-tip .tq::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; background: var(--green); }
.trend-tip .tq::before { background: var(--yellow); }
.donut-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.donut { width: 132px; height: 132px; flex: none; }
.donut .seg { transition: opacity .15s; }
.donut .seg.dim { opacity: .25; }
.donut-n { font: 800 22px var(--display); fill: var(--ink); }
.donut-s { font: 500 11px var(--body); fill: var(--mut); }
.dash-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 150px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lg-row { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; width: 100%; border: 0; background: none; padding: 6px 8px; border-radius: 10px; color: var(--ink); font: 500 13px var(--body); cursor: pointer; text-align: left; }
.lg-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-row i { width: 10px; height: 10px; border-radius: 3px; }
.lg-row:hover, .bd-btn:hover { background: var(--surface-2); }
.lg-row.active, .bd-btn.active { background: var(--green-soft); outline: 1.5px solid var(--green); }
.dash-bars { display: flex; flex-direction: column; gap: 2px; }
.bd-btn { display: block; width: 100%; border: 0; background: none; padding: 7px 8px; border-radius: 10px; color: var(--ink); cursor: pointer; text-align: left; font: inherit; }
.heat { display: grid; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 3px; align-items: center; }
.heat-h { font: 500 10px var(--body); color: var(--mut); white-space: nowrap; overflow: visible; }
.heat-d { font: 600 11px var(--body); color: var(--mut); }
.heat-c { aspect-ratio: 1; border-radius: 4px; background: color-mix(in srgb, var(--green) calc(var(--a) * 100%), var(--surface-2)); cursor: pointer; }
.heat-c.best { outline: 2px solid var(--yellow); outline-offset: 1px; }
.heat-info { margin: 10px 0 0; min-height: 1.4em; }
.insights { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.insights li { display: flex; gap: 12px; align-items: center; }
.ins-i { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--surface-2); font-size: 19px; }
.insights b { display: block; font: 800 17px var(--display); letter-spacing: -.01em; }
.dash .breakdown h3 { display: none; }
.dash-card .recent { margin: 0; }
@media (max-width: 1100px) { .dash { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dash-wide, .dash-wide2 { grid-column: 1 / -1; } }
@media (max-width: 700px) {
  .dash { grid-template-columns: 1fr; }
  .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .heat { gap: 2px; grid-template-columns: 28px repeat(24, minmax(0, 1fr)); }
  .heat-h { font-size: 8.5px; }
}
@media (max-width: 700px) {
  #an-body .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #an-body .dash-kpi { padding: 14px 14px 40px; }
  #an-body .dash-kpi .delta { position: static; align-self: flex-start; order: -1; margin-bottom: 2px; }
  #an-body .dash-kpi strong { font-size: 26px; }
}
@media (max-width: 680px) { .kpis:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Pantallas muy angostas (320 px): encabezado aún más compacto */
@media (max-width: 350px) { .site-head .logo { font-size: 18px; } .site-acts .btn { padding-inline: 10px; font-size: 13px; } .site-acts { gap: 2px; } }

/* Aviso de fase BETA al contratar */
.beta-dlg .dlg-body { padding: 26px; display: flex; flex-direction: column; gap: 12px; text-align: center; align-items: stretch; }
.beta-dlg h2 { font-family: var(--display); font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.beta-dlg p { margin: 0 0 6px; color: var(--mut); font-size: 16px; }
.beta-badge { align-self: center; padding: 4px 12px; border-radius: 999px; background: var(--yellow); color: var(--yellow-ink); font: 800 12px/1.4 var(--display); letter-spacing: .08em; }
.beta-dlg .btn { white-space: normal; height: auto; min-height: 48px; line-height: 1.3; padding-block: 12px; text-align: center; }

/* ---------- Link en bio: editor (/app/bio) ---------- */
.bio-lede { margin: -6px 0 14px; max-width: 60ch; }
.bio-live { display: grid; grid-template-columns: 1fr auto; gap: 14px 18px; align-items: center; margin-bottom: 16px; }
.bio-live-url { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bio-live-url a { font-weight: 600; font-size: 17px; color: var(--green-text); overflow-wrap: anywhere; }
.bio-live-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.bio-kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.bio-kpis div { background: var(--surface-2); border-radius: 14px; padding: 12px 14px; }
.bio-kpis dt { font-size: 12.5px; color: var(--mut); }
.bio-kpis dd { margin: 2px 0 0; font: 800 24px/1.1 var(--display); }
.bio-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.bio-form { gap: 16px; }
.bio-form .card { display: flex; flex-direction: column; gap: 14px; }
.bio-form .card-title { margin-bottom: 0; }
/* Cada sección del editor se abre y se cierra (una a la vez); cerrada muestra un resumen de lo elegido */
.bio-form .bio-sec { display: block; padding: 0; transition: border-color .2s; }
.bio-sec-sum { list-style: none; display: flex; align-items: center; gap: 12px; padding: 18px 22px 18px 26px; cursor: pointer; border-radius: var(--r-card); -webkit-user-select: none; user-select: none; }
.bio-sec-sum::-webkit-details-marker { display: none; }
.bio-sec-sum .card-title { flex: 1; min-width: 0; margin: 0; font-size: 19px; }
.bio-sec-sum::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2359615b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .25s; }
:root[data-theme="dark"] .bio-sec-sum::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b1bab3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.bio-sec[open] > .bio-sec-sum::after { transform: rotate(180deg); }
.bio-sec:not([open]):hover { border-color: var(--field-line); }
.bio-sec-sum:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.sec-meta { flex: 0 1 auto; min-width: 0; max-width: 48%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--mut); }
.bio-sec[open] .sec-meta { display: none; }
.bio-sec-body { display: flex; flex-direction: column; gap: 14px; padding: 2px 26px 26px; }
@media (prefers-reduced-motion: no-preference) { .bio-sec[open] > .bio-sec-body { animation: sec-in .25s ease-out; } }
@keyframes sec-in { from { opacity: 0; translate: 0 -6px; } }
@media (max-width: 560px) { .bio-sec-sum { padding: 16px 16px 16px 18px; } .bio-sec-body { padding: 2px 18px 20px; } .sec-meta { display: none; } }
.bio-handle { display: flex; align-items: stretch; border: 1px solid var(--field-line); border-radius: var(--r-ctl); background: var(--field); overflow: hidden; }
.bio-handle span { display: flex; align-items: center; padding: 0 4px 0 12px; color: var(--mut); font-family: var(--mono); font-size: 14px; white-space: nowrap; max-width: 62%; overflow: hidden; text-overflow: ellipsis; direction: rtl; }
.bio-handle input { border: 0; border-radius: 0; flex: 1 1 auto; min-width: 0; padding-left: 0; font-family: var(--mono); }
.bio-handle:focus-within { outline: 2px solid var(--focus); outline-offset: 1px; }
.bio-handle input:focus-visible { outline: none; }
.bio-btns { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bio-btn { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); }
.bio-btn.bad { border-color: var(--red); }
.bio-btn-fields { flex: 1 1 auto; display: grid; gap: 8px; min-width: 0; }
.bio-btn-acts { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.bio-btn-acts .btn.icon { width: 38px; height: 38px; padding: 0; justify-content: center; }
.form-error-inline { color: var(--red-text); font-weight: 600; }
.bio-themes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bio-theme { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 8px; border: 1px solid var(--line); border-radius: 16px; cursor: pointer; font-weight: 600; font-size: 14px; text-align: center; }
.bio-theme input { position: absolute; opacity: 0; pointer-events: none; }
.bio-theme:has(input:checked) { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.bio-theme:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.bio-swatch { width: 100%; max-width: 88px; aspect-ratio: 3 / 4; border-radius: 12px; display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 10px; border: 1px solid var(--line); }
.bio-swatch i { height: 9px; border-radius: 99px; }
.t-claro .bio-swatch { background: #f2f3ef; } .t-claro .bio-swatch i { background: #fff; border: 1px solid #dde1da; }
.t-oscuro .bio-swatch { background: #151a17; } .t-oscuro .bio-swatch i { background: #2f3732; }
.t-verde .bio-swatch { background: #12b45a; } .t-verde .bio-swatch i { background: #0d100e; }
.t-marca .bio-swatch { background: conic-gradient(#ffd23f 0 25%, #12b45a 0 50%, #0d100e 0 75%, #f2f3ef 0); } .t-marca .bio-swatch i { background: rgba(255, 255, 255, .85); }
.bio-save { position: sticky; bottom: 12px; }
.bio-preview { position: sticky; top: 20px; }
.bio-phone { border: 10px solid #0d100e; border-radius: 38px; overflow: hidden; aspect-ratio: 9 / 18.5; background: #0d100e; box-shadow: var(--shadow); }
.bio-prev-label { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--mut); }
.bio-prev-label .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
/* La vista previa usa las mismas clases que la página pública, en tamaño de teléfono */
.bio-screen { height: 100%; overflow-y: auto; overscroll-behavior: contain; background: var(--b-bg) center / cover no-repeat; color: var(--b-ink); padding: 0 14px; scrollbar-width: none; }
.bio-screen::-webkit-scrollbar { display: none; }
.bio-screen .bio-page { min-height: 100%; padding: 30px 0 16px; gap: 16px; }
.bio-screen .bio-avatar { width: 72px; height: 72px; font-size: 30px; overflow: hidden; }
.bio-screen .bio-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bio-screen .bio-head h1 { font-size: 21px; overflow-wrap: anywhere; }
.bio-screen .bio-head p { font-size: 13.5px; overflow-wrap: anywhere; }
.bio-screen.has-bg .bio-head p, .bio-screen.has-bg .bio-foot { color: var(--b-ink); }
.bio-screen .bio-social { gap: 2px; }
.bio-screen .bio-social a { width: 34px; height: 34px; }
.bio-screen .bio-social svg { width: 18px; height: 18px; }
.bio-screen .bio-links { gap: 9px; }
.bio-screen .bio-links a { min-height: 44px; padding: 10px 16px; font-size: 13.5px; cursor: default; }
.bio-screen .bio-links a:hover { transform: none; box-shadow: none; }
.bio-screen .bio-foot { padding-top: 14px; }
.bio-screen .bio-foot .logo, .bio-screen .bio-foot .logo * { color: var(--b-ink) !important; font-size: 14px; }
.bio-prev-open, .bio-prev-close { display: none; }
/* Tableta: la vista previa sigue al lado, más chica, para ver cada cambio al momento */
@media (max-width: 1100px) and (min-width: 861px) { .bio-grid { grid-template-columns: minmax(0, 1fr) 250px; } .bio-preview { top: 84px; } .bio-phone { border-width: 8px; border-radius: 32px; } .bio-save { background: color-mix(in srgb, var(--bg) 88%, transparent); padding: 8px; border-radius: 999px; backdrop-filter: blur(6px); } }
@media (max-width: 860px) {
  .bio-grid { grid-template-columns: minmax(0, 1fr); }
  /* La vista previa se abre encima con «Vista previa» (siempre a la mano junto a Guardar) */
  .bio-preview { display: none; }
  .bio-preview.open { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; position: fixed; inset: 0; z-index: 60; padding: 16px; background: rgba(5, 7, 6, .72); }
  .bio-preview.open .bio-prev-label { color: #f2f5f0; margin: 0; }
  .bio-preview.open .bio-phone { height: min(76vh, 680px); aspect-ratio: 9 / 18.5; width: auto; max-width: 100%; }
  .bio-prev-open, .bio-preview.open .bio-prev-close { display: inline-flex; }
  .bio-save { background: color-mix(in srgb, var(--bg) 88%, transparent); padding: 8px; border-radius: 999px; backdrop-filter: blur(6px); }
  body.bio-prev-on { overflow: hidden; }
}
@media (max-width: 600px) {
  .bio-live { grid-template-columns: 1fr; }
  .bio-kpis dd { font-size: 20px; }
  .bio-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bio-btn { flex-direction: column; align-items: stretch; }
  .bio-btn-acts { justify-content: flex-start; }
  .bio-save { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); flex-wrap: nowrap; }
  .bio-save .btn { flex: 1 1 0; padding-inline: 12px; }
}

/* ---------- Link en bio: página pública (/@usuario) ---------- */
body.page-bio { background: var(--b-bg); color: var(--b-ink); padding: 0 16px; min-height: 100vh; }
.bio-page { max-width: 560px; margin: 0 auto; padding: 48px 0 28px; display: flex; flex-direction: column; align-items: center; gap: 22px; min-height: 100vh; }
.bio-head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.bio-avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--b-btn); color: var(--b-btn-ink); font: 800 40px var(--display); box-shadow: 0 0 0 4px var(--b-bg), 0 0 0 5px var(--b-line); }
.bio-head h1 { font-family: var(--display); font-weight: 800; font-size: clamp(24px, 6vw, 30px); letter-spacing: -.03em; color: var(--b-title, var(--b-ink)); }
.bio-head p { margin: 0; color: var(--b-mut); font-size: 16px; max-width: 42ch; }
.bio-social { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.bio-social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--b-ink); transition: transform .15s; }
.bio-social a:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--b-ink) 10%, transparent); }
.bio-links { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 12px; }
.bio-links a { display: flex; align-items: center; justify-content: center; min-height: 58px; padding: 14px 22px; border-radius: 999px; background: var(--b-btn); color: var(--b-btn-ink); border: 1.5px solid var(--b-line); font: 700 16px/1.25 var(--body); text-align: center; text-decoration: none; overflow-wrap: anywhere; transition: transform .15s, box-shadow .15s; }
.bio-links a:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .45); }
.bio-links a:focus-visible, .bio-social a:focus-visible { outline: 3px solid var(--b-ink); outline-offset: 3px; }
.bio-empty { text-align: center; color: var(--b-mut); }
.bio-foot { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bio-foot .logo { color: var(--b-ink); font-size: 17px; opacity: .85; }
.bio-foot a { color: var(--b-mut); text-decoration: none; }
.bio-report { font-size: 12.5px; }
.page-bio.is-preview .bio-page { padding-top: 28px; }
@media (prefers-reduced-motion: reduce) { .bio-links a, .bio-social a { transition: none; } }
@media (max-width: 380px) { .tabbar { padding-inline: 2px; } .tabbar a { font-size: 9.5px; letter-spacing: -.01em; } }
.bio-foot .logo, .bio-foot .logo * { color: var(--b-ink) !important; }
/* Link en bio: imagen de fondo propia */
body.page-bio.has-bg { background: var(--b-bg); }
body.page-bio.has-bg::before { content: ""; position: fixed; inset: 0; z-index: 0; background-image: linear-gradient(color-mix(in srgb, var(--b-bg) 58%, transparent), color-mix(in srgb, var(--b-bg) 58%, transparent)), var(--b-img); background-size: cover; background-position: center; pointer-events: none; }
.page-bio.has-bg .bio-page { position: relative; z-index: 1; }
.page-bio.has-bg .bio-head p, .page-bio.has-bg .bio-foot a { color: var(--b-ink); }
.bio-bg { display: flex; gap: 14px; align-items: flex-start; padding-top: 6px; border-top: 1px solid var(--line); }
.bio-bg-thumb { position: relative; flex: none; width: 84px; aspect-ratio: 9 / 16; border-radius: 12px; background: var(--surface-2) center / cover no-repeat; border: 1px solid var(--field-line); display: grid; place-items: center; align-content: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--mut); text-align: center; }
.bio-bg-thumb::before, .card-thumb::before { content: ""; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--img-ico) center / contain no-repeat; mask: var(--img-ico) center / contain no-repeat; opacity: .8; }
.bio-bg-thumb.has::before, .card-thumb.has::before { display: none; }
.bio-bg-thumb.has { border-color: var(--line); }
.bio-bg-thumb.has span { display: none; }
/* La X quita la imagen elegida (la nueva o la ya guardada) */
.thumb-x { position: absolute; top: -8px; right: -8px; z-index: 1; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 2px solid var(--surface); background: var(--ink); color: var(--bg); display: grid; place-items: center; cursor: pointer; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .5); }
.thumb-x svg { width: 12px; height: 12px; }
.thumb-x:hover { background: var(--red); color: #fff; }
.thumb-x:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bio-bg-thumb:not(.has) .thumb-x { display: none; }
.bio-bg-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bio-bg-body p { margin: 0; }
.bio-bg-acts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bio-bg-acts label.btn { cursor: pointer; }
.bio-bg-acts:has(input[type=file]:focus-visible) label.btn { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Botón para compartir la página */
.bio-page { position: relative; }
.bio-share { position: absolute; top: 14px; right: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--b-ink) 18%, transparent); background: color-mix(in srgb, var(--b-bg) 70%, transparent); color: var(--b-ink); cursor: pointer; backdrop-filter: blur(8px); z-index: 2; }
.bio-share:hover { background: color-mix(in srgb, var(--b-ink) 12%, var(--b-bg)); }
.bio-share:focus-visible { outline: 3px solid var(--b-ink); outline-offset: 3px; }
.bio-share-ok { position: absolute; top: 46px; right: 0; white-space: nowrap; padding: 6px 12px; border-radius: 999px; background: var(--b-ink); color: var(--b-bg); font: 600 12.5px var(--body); }

/* Computadora: la página dentro de un «teléfono» al centro, con un fondo coqueto alrededor */
@media (min-width: 700px) {
  /* Cada estilo tiene su fondo alrededor del teléfono: base, tres manchas de color y puntitos */
  body.page-bio { --base: linear-gradient(135deg, #e2f6ea 0%, #f6f4e2 48%, #ffe9cf 100%); --g1: rgba(18, 180, 90, .45); --g2: rgba(255, 210, 63, .7); --g3: rgba(255, 138, 122, .45); --dot: rgba(13, 16, 14, .1); }
  body.page-bio.bio-oscuro { --base: radial-gradient(120% 90% at 50% 0%, #1c2420 0%, #0a0d0b 70%); --g1: rgba(34, 201, 107, .38); --g2: rgba(255, 210, 63, .28); --g3: rgba(80, 120, 255, .22); --dot: rgba(255, 255, 255, .12); }
  body.page-bio.bio-verde { --base: linear-gradient(160deg, #05401f 0%, #0a6b35 55%, #064d26 100%); --g1: rgba(255, 210, 63, .55); --g2: rgba(200, 255, 220, .45); --g3: rgba(13, 16, 14, .35); --dot: rgba(255, 255, 255, .18); }
  body.page-bio.bio-marca, body.page-bio.bio-propio { --base: linear-gradient(150deg, color-mix(in srgb, var(--b-btn) 30%, var(--b-bg)) 0%, var(--b-bg) 100%); --g1: color-mix(in srgb, var(--b-btn) 60%, transparent); --g2: rgba(255, 210, 63, .4); --g3: color-mix(in srgb, var(--b-btn) 35%, #fff); --dot: color-mix(in srgb, var(--b-ink) 14%, transparent); }
  body.page-bio { padding: 36px 16px; background: var(--base); background-attachment: fixed; overflow-x: hidden; }
  body.page-bio::before {
    content: ""; position: fixed; inset: -12%; z-index: 0; pointer-events: none;
    background:
      radial-gradient(30% 38% at 16% 22%, var(--g1), transparent 70%),
      radial-gradient(28% 36% at 84% 76%, var(--g2), transparent 70%),
      radial-gradient(22% 28% at 82% 16%, var(--g3), transparent 70%),
      radial-gradient(26% 30% at 20% 86%, var(--g2), transparent 70%);
    filter: blur(28px); animation: bio-drift 22s ease-in-out infinite alternate;
  }
  body.page-bio.has-bg { background: #0d100e; --dot: rgba(255, 255, 255, .14); }
  body.page-bio.has-bg::before { background: var(--b-img) center / cover no-repeat; filter: blur(42px) saturate(1.3) brightness(.78); transform: scale(1.08); animation: none; }
  body.page-bio::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(var(--dot) 1px, transparent 1.3px) 0 0 / 18px 18px; -webkit-mask-image: radial-gradient(ellipse at center, transparent 32%, #000 78%); mask-image: radial-gradient(ellipse at center, transparent 32%, #000 78%); }
  body.page-bio .bio-page {
    z-index: 1; max-width: 430px; min-height: calc(100vh - 72px); padding: 48px 26px 22px; border-radius: 42px;
    background: var(--b-bg); overflow: hidden; isolation: isolate;
    box-shadow: 0 50px 100px -30px rgba(0, 0, 0, .6), 0 0 0 1px color-mix(in srgb, var(--b-ink) 12%, transparent), inset 0 0 0 1px rgba(255, 255, 255, .06);
  }
  body.page-bio.has-bg .bio-page { background: linear-gradient(color-mix(in srgb, var(--b-bg) 58%, transparent), color-mix(in srgb, var(--b-bg) 58%, transparent)), var(--b-img) center / cover no-repeat; }
  body.page-bio .bio-share { top: 16px; right: 16px; }
  body.page-bio .bio-share-ok { top: 48px; right: 0; }
}
@keyframes bio-drift { 0% { transform: translate(0, 0) rotate(0); } 100% { transform: translate(3%, -2%) rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { body.page-bio::before { animation: none; } }

/* Nivel del fondo en computadora: Sobrio, Suave o Vivo */
@media (min-width: 700px) {
  body.page-bio.desk-suave::before { animation: none; }
  body.page-bio.desk-suave::after { display: none; }
  body.page-bio.desk-sobrio { background: linear-gradient(180deg, color-mix(in srgb, var(--b-bg) 90%, var(--b-ink)) 0%, color-mix(in srgb, var(--b-bg) 80%, var(--b-ink)) 100%); background-attachment: fixed; }
  body.page-bio.desk-sobrio::before, body.page-bio.desk-sobrio::after { display: none; }
  body.page-bio.desk-sobrio .bio-page { box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .45), 0 0 0 1px color-mix(in srgb, var(--b-ink) 10%, transparent); }
  /* Con imagen de fondo: Sobrio la apaga, Vivo le sube el color */
  body.page-bio.has-bg.desk-sobrio { background: #0d100e; }
  body.page-bio.has-bg.desk-sobrio::before { display: block; filter: blur(48px) saturate(.8) brightness(.55); }
  body.page-bio.has-bg.desk-vivo::before { filter: blur(36px) saturate(1.6) brightness(.9); }
}
.bio-desk { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.bio-desk legend { margin-bottom: 10px; }
.bio-desks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bio-desk-opt { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; cursor: pointer; font-size: 14px; }
.bio-desk-opt small { font-size: 12px; line-height: 1.35; }
.bio-desk-opt input { position: absolute; opacity: 0; pointer-events: none; }
.bio-desk-opt:has(input:checked) { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.bio-desk-opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.bio-desk-sw { height: 54px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 4px; overflow: hidden; }
.bio-desk-sw i { width: 22px; height: 36px; border-radius: 6px; background: #fff; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5); }
.d-sobrio .bio-desk-sw { background: linear-gradient(180deg, #e6e8e3, #d3d7d0); }
.d-suave .bio-desk-sw { background: radial-gradient(60% 80% at 15% 25%, rgba(18, 180, 90, .45), transparent 70%), radial-gradient(60% 80% at 85% 80%, rgba(255, 210, 63, .7), transparent 70%), linear-gradient(135deg, #e2f6ea, #ffe9cf); }
.d-vivo .bio-desk-sw { background: radial-gradient(rgba(13, 16, 14, .18) 1px, transparent 1.3px) 0 0 / 8px 8px, radial-gradient(60% 80% at 15% 25%, rgba(18, 180, 90, .8), transparent 70%), radial-gradient(60% 80% at 85% 80%, rgba(255, 210, 63, .95), transparent 70%), radial-gradient(50% 60% at 85% 15%, rgba(255, 138, 122, .8), transparent 70%), linear-gradient(135deg, #c9f0d8, #ffe0b8); }
.bio-delete { margin-top: 18px; display: flex; justify-content: center; }
.danger-title { color: var(--red-text); }
.bio-delete .btn { color: var(--red-text); }
@media (max-width: 600px) { .bio-desks { grid-template-columns: 1fr; } .bio-desk-opt { flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; } .bio-desk-sw { width: 64px; height: 44px; margin: 0; } .bio-desk-opt small { flex-basis: 100%; } }

/* Interruptor encendido/apagado de cada link (misma idea que la pila de tema) */
.link-switch { display: inline-flex; align-items: center; gap: 8px; padding: 6px 4px; border: 0; background: none; cursor: pointer; color: var(--mut); font: 600 12.5px var(--body); white-space: nowrap; }
.link-switch .ls-track { position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--field-line); transition: background .18s, border-color .18s; flex: none; }
.link-switch .ls-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .18s; }
.link-switch.on { color: var(--green-text); }
.link-switch.on .ls-track { background: var(--green); border-color: var(--green); }
.link-switch.on .ls-knob { transform: translateX(18px); }
.link-switch:disabled { opacity: .6; cursor: progress; }
.link-switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .link-switch .ls-track, .link-switch .ls-knob { transition: none; } }
.list-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.list-tools .pill-select { min-height: 38px; }
.active-meter { margin: 0 0 8px; padding: 10px 14px; border-radius: 14px; background: var(--surface-2); font-size: 14px; color: var(--mut); }
.active-meter b { color: var(--ink); }
.active-meter.full { background: var(--yellow-soft); color: var(--ink); }
/* Aviso de cupo lleno */
.limit-opts { display: grid; gap: 10px; }
.limit-opt { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; cursor: pointer; font: inherit; }
.limit-opt b { font-size: 15.5px; }
.limit-opt span { color: var(--mut); font-size: 13.5px; }
.limit-opt:hover { border-color: var(--green); }
#limit-buy { background: var(--green-soft); border-color: transparent; }
@media (max-width: 760px) { .l-side { flex-wrap: wrap; gap: 10px 14px; } }
@media (max-width: 600px) { .list-tools { width: 100%; flex-wrap: nowrap; } .list-tools .pill-select { flex: 1 1 0; min-width: 0; } }
.more-btn { width: 38px; padding: 0; justify-content: center; }
@media (max-width: 1000px) { .more-btn { width: 44px; } }

/* Imagen propia para el fondo en computadora: nítida; Sobrio la oscurece, Suave un poco, Vivo tal cual */
@media (min-width: 700px) {
  body.page-bio.has-desk { --desk-dim: .18; background: #0d100e; }
  body.page-bio.has-desk.desk-sobrio { --desk-dim: .5; }
  body.page-bio.has-desk.desk-vivo { --desk-dim: 0; }
  body.page-bio.has-desk::before, body.page-bio.has-desk.desk-sobrio::before {
    display: block; inset: 0; transform: none; filter: none; animation: none;
    background: linear-gradient(rgba(0, 0, 0, var(--desk-dim)), rgba(0, 0, 0, var(--desk-dim))), var(--b-desk) center / cover no-repeat;
  }
  body.page-bio.has-desk::after { display: none; }
  body.page-bio.has-desk.desk-vivo::after { display: block; --dot: rgba(255, 255, 255, .16); }
}
.bio-bg.wide .bio-bg-thumb { width: 132px; aspect-ratio: 16 / 10; }
.bio-desk .bio-bg { margin-top: 6px; }

/* Portada: tarjeta de Link en bio con un teléfono de muestra */
.tile.t-mint { background: linear-gradient(135deg, #e2f6ea 0%, #f6f4e2 55%, #ffe9cf 100%); border-color: transparent; color: #0d100e; }
.tile.t-mint p { color: #3c443e; }
:root[data-theme="dark"] .tile.t-mint { background: linear-gradient(135deg, #16382a 0%, #2a2c1d 55%, #3a2a1c 100%); color: #f2f5f0; }
:root[data-theme="dark"] .tile.t-mint p { color: #c9d1ca; }
.tile-kicker { display: inline-block; margin-bottom: 10px; padding: 4px 12px; border-radius: 999px; background: #0d100e; color: #fff; font: 700 12px/1.4 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.tile-bio-url { display: inline-block; margin-top: 14px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .7); color: #0a7a3d; font-weight: 600; }
:root[data-theme="dark"] .tile-bio-url { background: rgba(0, 0, 0, .3); color: #3ddc84; }
.bio-mini { flex: 0 0 auto; width: 250px; margin: -8px 0; padding: 9px; border-radius: 36px; background: #0d100e; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, .55); transform: rotate(3deg); }
.bio-mini-screen { border-radius: 28px; background: #12b45a; padding: 26px 16px 22px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #06130b; }
.bm-av { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #0d100e; color: #fff; font: 800 24px var(--display); box-shadow: 0 0 0 3px #12b45a, 0 0 0 4px #0d100e; }
.bm-name { font: 800 17px var(--display); letter-spacing: -.02em; margin-top: 4px; }
.bm-text { font-size: 12.5px; opacity: .8; }
.bm-social { display: flex; gap: 10px; margin: 2px 0 4px; }
.bm-social svg { width: 17px; height: 17px; }
.bm-btn { width: 100%; padding: 10px 12px; border-radius: 999px; background: #0d100e; color: #fff; font: 700 12.5px var(--body); text-align: center; }
@media (max-width: 900px) { .bio-mini { width: min(250px, 100%); margin: 6px auto 0; transform: none; } }
@media (prefers-reduced-motion: no-preference) { .bio-tile:hover .bio-mini { transform: rotate(0deg) translateY(-4px); transition: transform .3s; } }

/* La vista previa del editor es la página tal cual se ve en el celular del cliente */
.bio-screen .bio-page { position: relative; background: none; box-shadow: none; border-radius: 0; max-width: none; overflow: visible; }
.bio-screen .bio-share { top: 10px; right: 0; width: 34px; height: 34px; cursor: default; }
.bio-screen .bio-share svg { width: 15px; height: 15px; }

/* Link en bio: diseño de botones y letra (sirve para la página y la vista previa) */
.bs-recta .bio-links a { border-radius: 4px; }
.bs-redonda .bio-links a { border-radius: 16px; }
.bf-contorno .bio-links a { background: transparent; color: var(--b-oc); border: 2px solid var(--b-oc); }
.bf-vidrio .bio-links a { background: color-mix(in srgb, var(--b-btn) 30%, transparent); color: var(--b-ink); border: 1px solid color-mix(in srgb, #fff 50%, transparent); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }
.bsh-suave .bio-links a { box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .5); }
.bsh-marcada .bio-links a { box-shadow: 4px 4px 0 var(--b-ink); }
.bsh-marcada .bio-links a:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--b-ink); }
[class*="bft-"]:not(.bft-clickly) .bio-head h1, [class*="bft-"]:not(.bft-clickly) .bio-head p, [class*="bft-"]:not(.bft-clickly) .bio-links a { font-family: var(--b-font); }
.bft-clasica .bio-head h1 { font-weight: 700; letter-spacing: -.01em; }
.bft-maquina .bio-head h1 { letter-spacing: -.03em; }
.soc-abajo .bio-social { order: 3; }
.soc-abajo .bio-foot { order: 4; }
/* Editor: «Botones y letra» */
.bio-design .bd-group { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.bio-design legend { font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.bd-row { display: flex; flex-wrap: wrap; gap: 8px; }
.bd-opt { position: relative; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; font-size: 14px; font-weight: 600; background: var(--surface); }
.bd-opt input, .bd-sw input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.bd-opt:has(input:checked), .bd-sw:has(input[type=radio]:checked) { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.bd-opt:has(input:focus-visible), .bd-sw:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.bd-sample { width: 46px; height: 22px; background: var(--ink); border-radius: 999px; flex: none; }
.shp-recta .bd-sample { border-radius: 3px; } .shp-redonda .bd-sample { border-radius: 8px; }
.fil-contorno .bd-sample { background: transparent; border: 2px solid var(--ink); } .fil-vidrio .bd-sample { background: linear-gradient(135deg, rgba(18, 180, 90, .35), rgba(255, 210, 63, .35)); border: 1px solid var(--field-line); }
.shd-sin .bd-sample { background: var(--ink); }
.shd-suave .bd-sample { background: var(--ink); box-shadow: 0 7px 12px -5px color-mix(in srgb, var(--green) 70%, transparent); }
.shd-marcada .bd-sample { background: var(--ink); box-shadow: 3px 3px 0 var(--green); }
.spos-arriba .bd-sample, .spos-abajo .bd-sample { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(var(--ink) 0 0) 50% 20% / 70% 3px no-repeat, linear-gradient(var(--green) 0 0) 50% 55% / 80% 5px no-repeat, linear-gradient(var(--green) 0 0) 50% 80% / 80% 5px no-repeat, var(--surface-2); }
.spos-abajo .bd-sample { background: linear-gradient(var(--green) 0 0) 50% 25% / 80% 5px no-repeat, linear-gradient(var(--green) 0 0) 50% 50% / 80% 5px no-repeat, linear-gradient(var(--ink) 0 0) 50% 82% / 70% 3px no-repeat, var(--surface-2); }
.bd-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.bd-sw { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border-radius: 14px; border: 1px solid transparent; cursor: pointer; width: 64px; }
.bd-sw > span { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--field-line); }
.bd-sw.auto > span { background: conic-gradient(#12b45a 0 25%, #0d100e 0 50%, #fff 0 75%, #ffd23f 0); }
.bd-sw small { font-size: 11.5px; color: var(--mut); }
.bd-sw.own input[type=color] { width: 34px; height: 34px; padding: 0; border: 1px solid var(--field-line); border-radius: 50%; overflow: hidden; background: none; cursor: pointer; }
.bd-sw.own input[type=color]::-webkit-color-swatch-wrapper { padding: 0; } .bd-sw.own input[type=color]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.bd-row.fonts .bd-opt { flex-direction: column; gap: 2px; padding: 8px 14px; min-width: 86px; }
.bd-font { font-size: 22px; line-height: 1.1; font-weight: 700; }
.bio-design .bd-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; }
.bio-design .bd-row > .bd-opt { flex: 0 0 auto; width: auto; display: inline-flex; }
.bio-design .bd-row.fonts > .bd-opt { display: inline-flex; flex-direction: column; }

/* ---------- Portada: páginas de ejemplo del Link en bio (giran y se van armando) ---------- */
.bio-stage { position: relative; width: 380px; height: 520px; flex: none; perspective: 1400px; margin: -6px 0 -10px; }
.bs-profile { position: absolute; inset: 0; pointer-events: none; }
.bs-profile:not(.is-on):not(.is-out) { visibility: hidden; }
.bs-profile::before { content: ""; position: absolute; left: 70px; top: 80px; width: 290px; height: 290px; border-radius: 50%; background: var(--blob); }
.bs-inmo { --pbg: #f4efe6; --pink: #1f2a3a; --btn: #1f2a3a; --btn-ink: #fff; --rad: 12px; --sh: 0 8px 16px -8px rgba(31, 42, 58, .5); --font: Georgia, "Times New Roman", serif; --card: #fff; --card-ink: #1f2a3a; --cbtn: #1f2a3a; --cbtn-ink: #fff; --bub: #d9c7a3; --bub-ink: #1f2a3a; --blob: #e8dcc6; }
.bs-agencia { --pbg: #151517; --pink: #fff; --btn: #d7f25c; --btn-ink: #111; --rad: 999px; --sh: none; --font: var(--display); --card: #d7f25c; --card-ink: #111; --cbtn: #111; --cbtn-ink: #d7f25c; --bub: #d7f25c; --bub-ink: #111; --blob: #c9d6ff; }
.bs-resto { --pbg: #fbeee2; --pink: #4a1c10; --btn: #c2452d; --btn-ink: #fff; --rad: 999px; --sh: 3px 3px 0 #5a1d12; --font: var(--display); --card: #fff8f1; --card-ink: #4a1c10; --cbtn: #c2452d; --cbtn-ink: #fff; --bub: #f4b393; --bub-ink: #4a1c10; --blob: #f6d2bb; }
.bs-pastel { --pbg: #fff0f3; --pink: #8e1b4f; --btn: #fff; --btn-ink: #c2185b; --rad: 16px; --sh: 0 10px 20px -10px rgba(194, 24, 91, .45); --font: Georgia, "Times New Roman", serif; --card: #fff; --card-ink: #8e1b4f; --cbtn: #c2185b; --cbtn-ink: #fff; --bub: #f8bbd0; --bub-ink: #8e1b4f; --blob: #fbd3de; }
.bs-musico { --pbg: #1b1410; --pink: #fff; --btn: rgba(255, 255, 255, .14); --btn-ink: #fff; --btnborder: 1px solid rgba(255, 255, 255, .4); --rad: 12px; --sh: none; --font: var(--display); --card: #ffb347; --card-ink: #1b1410; --cbtn: #1b1410; --cbtn-ink: #ffb347; --bub: #ffb347; --bub-ink: #1b1410; --blob: #f5c98f; }
.bs-influ { --pbg: #fff3ec; --pink: #7a3b2e; --btn: #ff8a65; --btn-ink: #fff; --rad: 999px; --sh: 0 8px 18px -8px rgba(255, 138, 101, .7); --font: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif; --card: #fff; --card-ink: #7a3b2e; --cbtn: #ff8a65; --cbtn-ink: #fff; --bub: #ffccbc; --bub-ink: #7a3b2e; --blob: #ffd8c8; }
.bs-phone { position: absolute; left: 104px; top: 8px; width: 212px; height: 424px; border-radius: 32px; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 7px; padding-bottom: 16px; background: var(--pbg); color: var(--pink); border: 7px solid #0d100e; transform: rotate(-4deg); box-shadow: 0 34px 60px -26px rgba(0, 0, 0, .55); }
.bs-hero { position: relative; width: 100%; height: 196px; flex: none; overflow: hidden; }
.bs-hero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.bs-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 46%; background: linear-gradient(transparent, var(--pbg)); }
.bs-name { position: relative; font: 800 18px/1.1 var(--font); letter-spacing: -.02em; margin-top: -30px; text-align: center; padding: 0 10px; }
.bs-text { font-size: 11.5px; opacity: .8; text-align: center; padding: 0 10px; }
.bs-btn { width: calc(100% - 28px); padding: 9px 10px; border-radius: var(--rad); background: var(--btn); color: var(--btn-ink); font: 700 11.5px/1.2 var(--body); text-align: center; box-shadow: var(--sh); border: var(--btnborder, 0); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.bs-card { position: absolute; left: 0; top: 318px; width: 164px; padding: 11px; border-radius: 20px; background: var(--card); color: var(--card-ink); transform: rotate(6deg); box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .6); display: flex; flex-direction: column; gap: 2px; }
.bs-card-art { height: 92px; border-radius: 12px; overflow: hidden; margin-bottom: 6px; display: block; }
.bs-card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-card b { font: 800 13.5px/1.15 var(--font); }
.bs-card small { font-size: 11px; opacity: .8; }
.bs-card-btn { margin-top: 7px; align-self: flex-start; display: inline-flex; align-items: center; padding: 7px 13px; border-radius: 999px; background: var(--cbtn); color: var(--cbtn-ink); font: 700 11.5px var(--body); }
.bs-bubbles { position: absolute; right: 0; top: 214px; display: flex; flex-direction: column; gap: 10px; }
.bs-bubble { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--bub); color: var(--bub-ink); box-shadow: 0 12px 22px -12px rgba(0, 0, 0, .5); }
.bs-bubble svg { width: 21px; height: 21px; }
.bs-dots { position: absolute; bottom: 0; left: 50%; translate: -50% 0; display: flex; gap: 6px; pointer-events: auto; }
.bs-dot { width: 22px; height: 22px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.bs-dot::before { content: ""; width: 9px; height: 9px; border-radius: 99px; background: rgba(13, 16, 14, .28); transition: width .25s; }
.bs-dot.on::before { width: 24px; background: #0d100e; }
.bs-dot:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
:root[data-theme="dark"] .bs-dot::before { background: rgba(255, 255, 255, .35); } :root[data-theme="dark"] .bs-dot.on::before { background: #fff; }
/* Movimiento: el teléfono gira y cada elemento aparece en secuencia */
.bs-profile.is-on .bs-phone { animation: bs-turn-in .8s cubic-bezier(.2, .8, .2, 1) both; }
.bs-profile.is-out .bs-phone { animation: bs-turn-out .55s ease-in both; }
.bs-profile.is-out .bs-card, .bs-profile.is-out .bs-bubble, .bs-profile.is-out::before { animation: bs-fade-out .35s ease-in both; }
.bs-profile.is-on::before { animation: bs-blob .9s cubic-bezier(.2, .9, .3, 1.2) both; }
.bs-profile.is-on [style*="--d"] { animation: bs-gen .55s cubic-bezier(.2, .9, .3, 1.35) both; animation-delay: calc(.25s + var(--d) * .09s); }
.bs-profile.is-on .bs-bubble { animation: bs-gen .55s cubic-bezier(.2, .9, .3, 1.35) both, bs-bob 4.5s ease-in-out infinite; animation-delay: calc(.25s + var(--d) * .09s), calc(1.4s + var(--d) * .25s); }
@keyframes bs-zoom { from { scale: 1.12; } to { scale: 1; } }
.bs-profile.is-on .bs-hero img { animation: bs-zoom 1.6s ease-out both; }
@keyframes bs-turn-in { from { opacity: 0; transform: rotate(var(--tilt, -4deg)) rotateY(-100deg) scale(.85); } to { opacity: 1; transform: rotate(var(--tilt, -4deg)) rotateY(0) scale(1); } }
@keyframes bs-turn-out { to { opacity: 0; transform: rotate(var(--tilt, -4deg)) rotateY(100deg) scale(.85); } }
@keyframes bs-gen { from { opacity: 0; translate: 0 14px; scale: .6; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes bs-fade-out { to { opacity: 0; scale: .8; } }
@keyframes bs-blob { from { scale: 0; } to { scale: 1; } }
@keyframes bs-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes bs-steam { 0%, 100% { opacity: .2; transform: translateY(4px); } 50% { opacity: .9; transform: translateY(-3px); } }
@keyframes bs-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bio-stage *, .bio-stage *::before, .bs-profile::before { animation: none !important; } }
@media (max-width: 900px) { .bio-stage { margin: 8px auto 0; } }
@media (max-width: 520px) { .bio-stage { zoom: .82; } }
@media (max-width: 380px) { .bio-stage { zoom: .74; } }

/* ---------- Portada: cada ejemplo con su propio acomodo, tarjeta y color de fondo ---------- */
.bio-tile[data-show] { background-image: none; background-color: var(--tile-bg); color: var(--tile-ink); transition: background-color .6s ease, color .6s ease; }
.bio-tile[data-show] p { color: inherit; opacity: .86; }
.bio-tile[data-show] .tile-kicker { background: var(--tile-ink); color: var(--tile-bg); }
.bio-tile[data-show] .tile-bio-url { background: color-mix(in srgb, var(--tile-ink) 12%, transparent); color: var(--tile-ink); }
.bio-tile[data-show] .bs-dot::before { background: color-mix(in srgb, var(--tile-ink) 35%, transparent); }
.bio-tile[data-show] .bs-dot.on::before { background: var(--tile-ink); }
.bio-tile[data-show="inmo"] { --tile-bg: #efe6d6; --tile-ink: #1f2a3a; }
.bio-tile[data-show="agencia"] { --tile-bg: #2f5bff; --tile-ink: #ffffff; }
.bio-tile[data-show="resto"] { --tile-bg: #c2452d; --tile-ink: #ffffff; }
.bio-tile[data-show="pastel"] { --tile-bg: #f9d5df; --tile-ink: #6b1238; }
.bio-tile[data-show="musico"] { --tile-bg: #231a14; --tile-ink: #ffffff; }
.bio-tile[data-show="influ"] { --tile-bg: #ffb199; --tile-ink: #3b1a12; }
.bio-tile[data-show] .bs-use { background: var(--tile-ink); color: var(--tile-bg); border-color: var(--tile-ink); transition: background-color .6s ease, color .6s ease; }
/* En tema oscuro la tarjeta toma la versión profunda del color de cada ejemplo y todo el texto va claro */
:root[data-theme="dark"] .bio-tile[data-show] { background-image: none; background-color: var(--tile-bg); color: var(--tile-ink); }
:root[data-theme="dark"] .bio-tile[data-show] p { color: inherit; }
:root[data-theme="dark"] .bio-tile[data-show] .tile-bio-url { background: color-mix(in srgb, var(--tile-ink) 14%, transparent); color: var(--tile-ink); }
:root[data-theme="dark"] .bio-tile[data-show="inmo"] { --tile-bg: #28231b; --tile-ink: #f1e6d2; }
:root[data-theme="dark"] .bio-tile[data-show="agencia"] { --tile-bg: #18286e; --tile-ink: #ffffff; }
:root[data-theme="dark"] .bio-tile[data-show="resto"] { --tile-bg: #4a1a10; --tile-ink: #ffdccd; }
:root[data-theme="dark"] .bio-tile[data-show="pastel"] { --tile-bg: #43142b; --tile-ink: #fbd3de; }
:root[data-theme="dark"] .bio-tile[data-show="musico"] { --tile-bg: #231a14; --tile-ink: #ffd9a8; }
:root[data-theme="dark"] .bio-tile[data-show="influ"] { --tile-bg: #45211a; --tile-ink: #ffcab8; }
.bs-phone { transform: rotate(var(--tilt, -4deg)); }
.bs-agencia, .bs-pastel, .bs-influ { --tilt: 4deg; }
.bs-agencia { --blob: rgba(255, 255, 255, .16); } .bs-resto { --blob: rgba(255, 255, 255, .14); } .bs-musico { --blob: rgba(255, 179, 71, .22); }
.bs-agencia::before, .bs-influ::before { border-radius: 60px; rotate: 12deg; }
.bs-pastel::before { border-radius: 42% 58% 55% 45% / 50% 40% 60% 50%; }
/* Del lado contrario: tarjeta a la derecha y redes a la izquierda */
.bs-agencia .bs-bubbles, .bs-pastel .bs-bubbles, .bs-influ .bs-bubbles { right: auto; left: 18px; }
.bs-agencia .bs-phone, .bs-pastel .bs-phone, .bs-influ .bs-phone { left: 84px; }
/* Acomodo «full»: foto a pantalla completa y nombre gigante */
.lay-full .bs-phone, .lay-player .bs-phone { justify-content: flex-end; padding-bottom: 18px; }
.lay-full .bs-hero, .lay-player .bs-hero { position: absolute; inset: 0; height: 100%; }
.lay-full .bs-hero::after { inset: 0; height: 100%; background: linear-gradient(rgba(0, 0, 0, .05) 20%, rgba(10, 10, 12, .88) 72%); }
.lay-full .bs-name { margin: 0; font: 900 46px/.9 var(--display); letter-spacing: -.04em; color: #d7f25c; }
.lay-full .bs-text, .lay-player .bs-text { position: relative; color: #fff; }
.lay-full .bs-btn, .lay-player .bs-btn { position: relative; }
.bs-pair { position: relative; display: flex; gap: 6px; width: calc(100% - 28px); }
.bs-pair .bs-btn { flex: 1 1 0; width: auto; padding-inline: 4px; }
.lay-full .bs-btn + .bs-btn { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .7); }
.lay-full .bs-pair .bs-btn:first-child { background: var(--btn); color: var(--btn-ink); border: 0; }
/* Acomodo «player»: foto de fondo con degradado cálido */
.lay-player .bs-hero::after { inset: 0; height: 100%; background: linear-gradient(rgba(27, 20, 16, 0) 28%, rgba(27, 20, 16, .96) 70%); }
.lay-player .bs-name { margin: 0; font-size: 26px; color: #fff; }
/* Acomodo «inset»: foto enmarcada */
.lay-inset .bs-hero { width: calc(100% - 20px); height: 168px; margin: 10px 10px 0; border-radius: 20px; }
.lay-inset .bs-hero::after { display: none; }
.lay-inset .bs-name { margin-top: 8px; font-size: 20px; }
/* Acomodo «avatar»: foto de perfil redonda */
.lay-avatar .bs-phone { background: radial-gradient(rgba(194, 24, 91, .12) 1.2px, transparent 1.6px) 0 0 / 14px 14px, var(--pbg); padding-top: 34px; }
.lay-avatar .bs-hero { display: none; }
.bs-av { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 4px #fff, 0 12px 24px -10px rgba(142, 27, 79, .55); }
.bs-av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.lay-avatar .bs-name { margin-top: 12px; font-size: 24px; font-style: italic; }
/* Acomodo «tabs»: pestañas Links | Tienda */
.lay-tabs .bs-hero { height: 168px; }
.bs-tabs { position: relative; display: flex; padding: 3px; border-radius: 999px; background: rgba(122, 59, 46, .1); }
.bs-tabs i { font: 700 11px var(--body); font-style: normal; padding: 5px 16px; border-radius: 999px; }
.bs-tabs i.on { background: var(--btn); color: var(--btn-ink); }
/* Tarjetas flotantes */
.card-stats .bs-card { left: auto; right: 0; top: 36px; width: 150px; transform: rotate(-6deg); }
.card-stats .bs-card-art { height: 70px; }
.bs-big { font: 900 30px/1 var(--display) !important; letter-spacing: -.03em; }
.bs-bars { display: flex; align-items: flex-end; gap: 4px; height: 38px; margin-top: 6px; }
.bs-bars i { flex: 1; background: var(--cbtn); border-radius: 4px 4px 0 0; }
.card-stats .bs-bubbles { top: 300px; }
.card-menu .bs-card { width: 172px; top: 268px; }
.card-menu .bs-card-art { height: 54px; }
.bs-row { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; padding: 4px 0; border-bottom: 1px solid rgba(74, 28, 16, .16); }
.bs-row em { font-style: normal; font-weight: 800; }
.card-duo .bs-card { background: none; box-shadow: none; padding: 0; flex-direction: row; gap: 10px; width: 250px; left: auto; right: 6px; top: 332px; transform: none; }
.bs-mini { width: 118px; background: #fff; border-radius: 18px; padding: 7px 7px 9px; box-shadow: 0 18px 30px -18px rgba(142, 27, 79, .6); display: flex; flex-direction: column; gap: 2px; color: var(--card-ink); }
.bs-mini:first-child { rotate: -7deg; } .bs-mini:last-child { rotate: 6deg; margin-top: 18px; }
.bs-mini-img { height: 84px; border-radius: 12px; overflow: hidden; margin-bottom: 4px; display: block; }
.bs-mini-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; display: block; }
.bs-mini b { font: 700 12px var(--font); } .bs-mini em { font-style: normal; font-weight: 800; font-size: 12px; color: #c2185b; }
.card-player .bs-card { left: 0; right: auto; top: 44px; width: 196px; transform: rotate(-6deg); }
.bs-pl-top { display: flex; gap: 9px; align-items: center; }
.bs-pl-top > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.bs-pl-img { width: 50px; height: 50px; border-radius: 10px; overflow: hidden; flex: none; }
.bs-pl-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-progress { height: 4px; border-radius: 4px; background: rgba(27, 20, 16, .22); margin: 10px 0 8px; overflow: hidden; display: block; }
.bs-progress i { display: block; height: 100%; width: 38%; background: var(--cbtn); }
.bs-profile.is-on .bs-progress i { animation: bs-progress 4.8s linear both; }
@keyframes bs-progress { from { width: 8%; } to { width: 72%; } }
.bs-pl-ctrl { display: flex; justify-content: center; align-items: center; gap: 18px; font-size: 13px; }
.bs-pl-ctrl i { font-style: normal; opacity: .75; }
.bs-pl-play { width: 36px; height: 36px; border-radius: 50%; background: var(--cbtn); color: var(--cbtn-ink); display: grid; place-items: center; }
.card-player .bs-bubbles { top: 250px; }
.card-strip .bs-card { left: auto; right: 0; top: 330px; width: 200px; transform: rotate(-5deg); }
.bs-strip { display: flex; gap: 6px; margin: 7px 0 2px; }
.bs-strip > span { flex: 1; height: 66px; border-radius: 10px; overflow: hidden; }
.bs-strip img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(2.1); }
.card-strip .bs-bubbles { top: 130px; }

/* ---------- Link en bio: acomodos, destacados, botones en par y textura ---------- */
.bio-page { --bleed: 0px; --padt: 48px; }
body.page-bio .bio-page { --bleed: 16px; }
.bio-screen .bio-page { --bleed: 14px; --padt: 30px; }
@media (min-width: 700px) { body.page-bio .bio-page { --bleed: 26px; } }
.bio-cover { position: relative; overflow: hidden; align-self: stretch; flex: none; }
.bio-cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }
.bio-head { position: relative; z-index: 1; }
/* Portada: foto grande arriba que se funde con el fondo */
.lay-portada .bio-cover { margin: calc(-1 * var(--padt)) calc(-1 * var(--bleed)) -84px; height: 360px; }
.lay-portada .bio-cover::after { content: ""; position: absolute; inset: auto 0 0; height: 58%; background: linear-gradient(transparent, var(--b-bg)); }
.bio-screen.lay-portada .bio-cover { height: 250px; margin-bottom: -64px; }
/* Foto completa: la foto cubre la página y el nombre va en grande */
.lay-completa .bio-cover { position: absolute; top: 0; height: calc(38vh + 250px); left: calc(-1 * var(--bleed)); right: calc(-1 * var(--bleed)); z-index: 0; margin: 0; }
.lay-completa .bio-cover img { width: 100%; height: 100%; object-fit: cover; }
.lay-completa .bio-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .04) 18%, color-mix(in srgb, var(--b-bg) 55%, transparent) 42%, var(--b-bg) 64%); }
.lay-completa .bio-head { margin-top: 38vh; }
body.page-bio.lay-completa { overflow-x: clip; }
@media (min-width: 700px) { body.page-bio.lay-completa .bio-head { margin-top: 300px; } body.page-bio.lay-completa .bio-cover { height: 580px; } body.page-bio.lay-completa .bio-page { overflow: hidden; } }
.bio-screen.lay-completa .bio-cover { height: 420px; }
.bio-screen.lay-completa .bio-head { margin-top: 210px; }
.lay-completa .bio-head h1 { font-size: clamp(34px, 11vw, 50px); line-height: .95; letter-spacing: -.045em; text-transform: uppercase; }
.bio-screen.lay-completa .bio-head h1 { font-size: 32px; }
.lay-completa .bio-social, .lay-completa .bio-links, .lay-completa .bio-cards, .lay-completa .bio-tabs, .lay-completa .bio-foot { position: relative; z-index: 1; }
/* Enmarcada: foto en un marco redondeado */
.lay-enmarcada .bio-cover { aspect-ratio: 4 / 3.3; border-radius: 26px; margin-top: 10px; box-shadow: 0 18px 36px -20px rgba(0, 0, 0, .55); }
.bs-recta.lay-enmarcada .bio-cover { border-radius: 6px; }
/* Botones en par (medio ancho) */
.bio-links { flex-direction: row; flex-wrap: wrap; }
.bio-links li { width: 100%; }
.bio-links li.half { width: calc(50% - 6px); }
.bio-links li.half a { padding-inline: 10px; }
.bio-screen .bio-links li.half { width: calc(50% - 4.5px); }
/* Pestañas Links | Destacados */
.bio-tabs { display: flex; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--b-ink) 9%, transparent); }
.bio-tabs button { border: 0; background: none; padding: 8px 20px; border-radius: 999px; font: 700 14px var(--b-font, var(--body)); color: var(--b-ink); cursor: pointer; }
.bio-tabs button[aria-selected="true"] { background: var(--b-btn); color: var(--b-btn-ink); }
.bio-tabs button:focus-visible { outline: 3px solid var(--b-ink); outline-offset: 2px; }
.bio-screen .bio-tabs button { padding: 6px 14px; font-size: 12px; }
/* Destacados: tarjetas con foto, título, detalle y botón */
.bio-cards { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.bio-cards.one { grid-template-columns: 1fr; }
.bio-cards[hidden] { display: none; }
.bio-cards-h { grid-column: 1 / -1; margin: 4px 0 0; font: 800 16px var(--b-font, var(--display)); color: var(--b-ink); }
.bio-card { display: flex; flex-direction: column; gap: 3px; padding: 8px 8px 11px; border-radius: 20px; background: var(--b-card, color-mix(in srgb, var(--b-ink) 7%, var(--b-bg))); color: var(--b-ink); border: 1px solid color-mix(in srgb, var(--b-ink) 10%, transparent); text-decoration: none; transition: transform .15s; }
.bio-card:hover { transform: translateY(-2px); }
.bio-card-img { display: block; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; margin-bottom: 5px; }
.bio-cards.one .bio-card-img { aspect-ratio: 16 / 9; }
.bio-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bio-card b { font: 700 14.5px/1.2 var(--b-font, var(--body)); padding: 0 3px; }
.bio-card small { color: var(--b-mut); font-size: 12.5px; padding: 0 3px; }
.bio-card-btn { align-self: flex-start; margin: 7px 3px 0; padding: 7px 13px; border-radius: 999px; background: var(--b-btn); color: var(--b-btn-ink); font: 700 12.5px var(--body); }
.bs-recta .bio-card, .bs-recta .bio-card-btn, .bs-recta .bio-card-img { border-radius: 5px; }
.bs-redonda .bio-card-btn { border-radius: 10px; }
.bsh-suave .bio-card { box-shadow: 0 14px 28px -16px rgba(0, 0, 0, .5); }
.bsh-marcada .bio-card { box-shadow: 4px 4px 0 var(--b-ink); border-color: var(--b-ink); }
.bio-screen .bio-cards { gap: 8px; }
.bio-screen .bio-card { padding: 6px 6px 8px; border-radius: 14px; }
.bio-screen .bio-card b { font-size: 12px; } .bio-screen .bio-card small { font-size: 10.5px; }
.bio-screen .bio-card-btn { font-size: 10.5px; padding: 5px 10px; }
/* Textura de puntitos */
body.page-bio.tex-dots, .bio-screen.tex-dots { background-image: radial-gradient(color-mix(in srgb, var(--b-ink) 16%, transparent) 1.2px, transparent 1.7px); background-size: 16px 16px; }
@media (min-width: 700px) {
  body.page-bio.tex-dots:not(.has-bg) { background: var(--base); background-attachment: fixed; }
  body.page-bio.tex-dots:not(.has-bg) .bio-page { background-image: radial-gradient(color-mix(in srgb, var(--b-ink) 16%, transparent) 1.2px, transparent 1.7px); background-size: 16px 16px; }
}
/* Editor: acomodos, medio ancho y destacados */
.bio-lays { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.bio-lay { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 10px 6px; border: 1px solid var(--line); border-radius: 16px; cursor: pointer; font-weight: 600; font-size: 13px; text-align: center; background: var(--surface); }
.bio-lay input { position: absolute; opacity: 0; pointer-events: none; }
.bio-lay:has(input:checked) { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.bio-lay:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.lay-sk { position: relative; width: 52px; height: 86px; border-radius: 10px; border: 1.5px solid var(--field-line); background: var(--surface-2); overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 6px; }
.lay-sk i { display: block; flex: none; }
.lay-sk .a { width: 18px; height: 18px; border-radius: 50%; background: var(--green); }
.lay-sk .b { width: 60%; height: 4px; border-radius: 3px; background: var(--ink); opacity: .7; }
.lay-sk .c { width: 100%; height: 8px; border-radius: 6px; background: var(--green); opacity: .55; }
.sk-portada .lay-sk .a { width: calc(100% + 12px); height: 34px; border-radius: 0; margin: -7px -6px 0; background: linear-gradient(135deg, #f0b27a, #7a4b2a); }
.sk-completa .lay-sk { justify-content: flex-end; background: linear-gradient(170deg, #f0b27a, #6b3f22 70%); }
.sk-completa .lay-sk .a { display: none; } .sk-completa .lay-sk .b { background: #fff; }
.sk-enmarcada .lay-sk .a { width: 100%; height: 28px; border-radius: 6px; background: linear-gradient(135deg, #f0b27a, #7a4b2a); }
.half-chk { font-size: 13px; margin-right: 4px; }
.bio-card-ed { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.bio-card-ed.bad { border-color: var(--red); }
.card-thumb-wrap { position: relative; flex: none; align-self: flex-start; }
.card-thumb { width: 84px; aspect-ratio: 4 / 3; border-radius: 12px; border: 1px solid var(--field-line); background: var(--surface-2) center / cover no-repeat; display: grid; place-items: center; align-content: center; gap: 2px; font-size: 12px; font-weight: 600; color: var(--mut); cursor: pointer; }
.card-thumb::before { width: 18px; height: 18px; }
.card-thumb.has { border-color: var(--line); } .card-thumb.has span { display: none; }
.card-thumb:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.card-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.card-opts { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; margin-bottom: 12px; }
.card-opts .field { flex: 1 1 200px; margin: 0; }
#bio-cards-ed { margin-bottom: 12px; }
#bio-cards-ed:empty { display: none; }
@media (max-width: 640px) {
  .bio-lays { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bio-card-ed { flex-wrap: wrap; }
  .bio-card-ed .bio-btn-fields { flex-basis: calc(100% - 96px); }
  .bio-card-ed .bio-btn-acts { width: 100%; justify-content: flex-start; }
  .card-2 { grid-template-columns: 1fr; }
}

/* Estilo Personalizado, diseños listos y play en destacados de música o video */
.t-propio .bio-swatch { background: var(--sw-bg, #fff0f3); } .t-propio .bio-swatch i { background: var(--sw-btn, #fff); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sw-ink, #8e1b4f) 18%, transparent); }
.bio-themes { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bio-custom { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.bio-custom[hidden] { display: none; }
.bio-custom label { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; text-align: center; }
.bio-custom input[type=color] { width: 46px; height: 46px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: none; cursor: pointer; }
.bio-custom input[type=color]::-webkit-color-swatch-wrapper { padding: 3px; } .bio-custom input[type=color]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.bio-tpls { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.bio-tpl { display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; background: none; font: 600 12.5px var(--body); color: var(--ink); cursor: pointer; text-align: center; }
.bio-tpl-art { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; aspect-ratio: 3 / 4.4; border-radius: 14px; overflow: hidden; padding: 8px; isolation: isolate; background: var(--t-bg) center / cover; border: 1px solid var(--line); transition: transform .15s, box-shadow .15s; }
.bio-tpl-art img { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 58%; object-fit: cover; }
.bio-tpl-art::before { content: ""; position: absolute; left: 0; right: 0; top: 30%; height: 30%; background: linear-gradient(transparent, var(--t-bg)); z-index: 1; }
.bio-tpl-art i { position: relative; z-index: 2; display: block; height: 9px; border-radius: 99px; background: var(--t-btn); }
.bio-tpl:hover .bio-tpl-art, .bio-tpl:focus-visible .bio-tpl-art { transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .5); }
.bio-tpl[aria-pressed="true"] .bio-tpl-art { box-shadow: 0 0 0 3px var(--green); }
.bio-tpl-note { margin: 10px 0 0; }
.bk-tpl-card > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.bk-tpl-card > summary::-webkit-details-marker { display: none; }
.bk-tpl-card > summary .card-title { margin: 0; }
.bk-tpl-card > summary .card-title::after { content: " ›"; color: var(--mut); }
.bk-tpl-card[open] > summary .card-title::after { content: " ⌄"; }
.bk-tpl-card form { margin-top: 12px; }
.bk-tpls .bio-tpl small { font-weight: 500; font-size: 11.5px; }
.bk-tpls .bio-tpl:has(input:checked) .bio-tpl-art { box-shadow: 0 0 0 3px var(--green); }
.bk-tpls .bio-tpl:has(input:focus-visible) .bio-tpl-art { outline: 2px solid var(--ink); outline-offset: 3px; }
.bk-tpls .bio-tpl-art img { height: 70%; }
.bk-tpls .bio-tpl-art::before { top: 45%; height: 25%; }
.bio-social a { background: color-mix(in srgb, var(--b-card, var(--b-bg)) 70%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--b-ink) 9%, transparent); }
.bio-card-img { position: relative; }
.bio-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--b-btn); color: var(--b-btn-ink); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .6); }
.bio-screen .bio-play { width: 32px; height: 32px; }
@media (max-width: 640px) {
  .bio-themes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bio-custom { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bio-tpls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.bs-use-wrap { margin: 16px 0 0; }
.bs-use { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.bs-use-name { opacity: .75; font-weight: 600; }
.bs-use-name::before { content: "· "; }
.bio-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; }
.bio-pages-h { font-weight: 700; font-size: 14px; margin-right: 4px; }
.bio-page-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 600 14px var(--body); text-decoration: none; cursor: pointer; }
.bio-page-chip.on { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.bio-page-chip.add { color: var(--mut); }
.bio-page-chip.add:hover { color: var(--ink); border-color: var(--ink); }
.bio-sample { position: absolute; left: 50%; top: 42px; translate: -50% 0; z-index: 3; padding: 4px 10px; border-radius: 999px; background: rgba(13, 16, 14, .72); color: #fff; font: 700 10.5px var(--body); white-space: nowrap; }
.bio-cover { position: relative; }
.twofa-bar { position: relative; padding-right: 52px; }
.bar-x { position: absolute; top: 50%; right: 10px; translate: 0 -50%; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: inherit; opacity: .75; cursor: pointer; }
.bar-x:hover { opacity: 1; background: color-mix(in srgb, currentColor 14%, transparent); }
.bar-x:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; opacity: 1; }
.bio-2fa { border: 2px solid var(--yellow); margin-bottom: 18px; }
@media (max-width: 600px) { .twofa-bar .bar-x { top: 10px; translate: none; } }
.legal-toc { margin: 0 0 26px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.legal-toc b { display: block; margin-bottom: 6px; font-size: 14px; }
.legal-toc ol { margin: 0; padding-left: 20px; columns: 2 220px; column-gap: 28px; font-size: 14px; line-height: 1.8; }
.legal-toc a { color: var(--ink); }
.legal h2 { scroll-margin-top: 20px; }
.legal-other { margin-top: 28px; color: var(--mut); }
.plans-legal { text-align: center; margin: 18px auto 0; }
.bio-legal { font-size: 12px; color: var(--b-mut); }
.bio-legal a { color: inherit; text-decoration: none; }
.bio-legal a:hover { text-decoration: underline; }
.tpl-cover { display: flex; gap: 14px; align-items: center; margin-top: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; }
.tpl-cover[hidden] { display: none; }
.bio-screen .bio-cover { cursor: pointer; }
.bio-cover.empty { background: color-mix(in srgb, var(--b-ink) 8%, var(--b-bg)); border: 0; display: grid; place-items: center; }
.bio-cover-empty { position: relative; z-index: 3; display: grid; justify-items: center; gap: 6px; max-width: 70%; text-align: center; font: 700 12px var(--body); color: var(--b-ink); }
.bio-cover-empty[hidden] { display: none; }
.lay-completa .bio-cover.empty { place-items: start center; padding-top: 70px; }

/* Estilos del marco del QR, con miniatura */
.frame-styles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 4px; flex: 1 1 100%; width: 100%; }
@media (max-width: 700px) { .frame-styles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.frame-styles .frame-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-radius: 14px; font-size: 12.5px; height: auto; }
.frame-styles .frame-chip:not([aria-pressed="true"]) svg { color: var(--green-deep, #0b7a55); }
:root[data-theme="dark"] .frame-styles .frame-chip:not([aria-pressed="true"]) svg { color: var(--green); }
.frame-chip .tb { fill: var(--surface, #fff); }
.frame-chip[aria-pressed="true"] .tb { fill: none; }

/* Botón con aspecto de enlace (dentro de un texto) */
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--green-text, var(--link, inherit)); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.linklike:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.inline-form { margin-top: 10px; }

/* Precio en pesos: «IVA incluido» debajo del precio */
.price-iva { display: block; font-size: 12.5px; font-weight: 600; opacity: .7; margin-top: 2px; }

/* ---------- Clicky: mascota y asistente de ayuda (assets/clicky.js) ---------- */
.clicky { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 55; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; }
.clicky > * { pointer-events: auto; }
.clicky-fab { width: 72px; height: 72px; padding: 0; border: 0; border-radius: 19px; background: none; box-shadow: 0 14px 28px -12px rgba(0, 0, 0, .5); cursor: pointer; display: grid; place-items: center; transition: transform .2s; }
.clicky-fab:hover { transform: translateY(-2px) rotate(-3deg); }
.clicky-fab:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.clicky-fab svg { display: block; width: 100%; height: 100%; }
.clicky-bubble { cursor: pointer; }
.clicky.is-hop .clicky-fab { animation: clicky-hop .6s cubic-bezier(.3, 1.6, .5, 1); }
.clicky.is-hop .ck-sp { animation: clicky-spark .6s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes clicky-hop { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-14px) scale(1.04, .96); } 70% { transform: translateY(0) scale(1.05, .92); } 100% { transform: none; } }
@keyframes clicky-spark { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(45deg) scale(1.4); } 100% { transform: rotate(90deg) scale(1); } }
.clicky-bubble { max-width: 240px; background: var(--ink); color: var(--bg); font: 600 14px/1.4 var(--body); padding: 10px 14px; border-radius: 16px 16px 4px 16px; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .5); animation: clicky-in .25s ease-out; }
@keyframes clicky-in { from { opacity: 0; transform: translateY(6px) scale(.96); } }
.clicky-panel { width: min(360px, calc(100vw - 24px)); height: min(560px, calc(100vh - 140px)); display: flex; flex-direction: column; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .55); overflow: hidden; animation: clicky-in .22s ease-out; }
.clicky-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; border-bottom: 1px solid var(--line); }
.clicky-head svg { flex: none; }
.clicky-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.clicky-who b { font: 800 17px/1.2 var(--display); letter-spacing: -.01em; }
.clicky-who small { color: var(--mut); font-size: 12.5px; }
.clicky-x { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; }
.clicky-x:focus-visible, .clicky-send:focus-visible, .clicky-chip:focus-visible, .clicky-support:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.clicky-list { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.clicky-msg { display: flex; flex-direction: column; gap: 8px; max-width: 88%; }
.clicky-msg.is-user { align-self: flex-end; align-items: flex-end; }
.clicky-text { padding: 10px 13px; border-radius: 16px 16px 16px 4px; background: var(--surface-2); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.is-user .clicky-text { border-radius: 16px 16px 4px 16px; background: var(--green); color: var(--green-ink, #04130a); }
.clicky-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.clicky-chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 7px 12px; font: 600 13px var(--body); cursor: pointer; }
.clicky-chip:hover { border-color: var(--green); }
.clicky-support { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 8px 14px; background: #25d366; color: #06130b; font: 700 13.5px var(--body); text-decoration: none; }
.clicky-support::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 20.5l1.3-4.2A8.5 8.5 0 1 1 8 19.3z' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 20.5l1.3-4.2A8.5 8.5 0 1 1 8 19.3z' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.clicky-typing .clicky-text { display: flex; gap: 4px; padding: 13px 14px; }
.clicky-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--mut); animation: clicky-dot 1s infinite ease-in-out; }
.clicky-typing i:nth-child(2) { animation-delay: .15s; } .clicky-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes clicky-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.clicky-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.clicky-form input { flex: 1; min-width: 0; height: 42px; border: 1px solid var(--field-line); border-radius: 999px; padding: 0 16px; background: var(--field, var(--surface)); color: var(--ink); font: 400 14.5px var(--body); }
.clicky-form input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.clicky-send { flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--green); color: var(--green-ink, #04130a); display: grid; place-items: center; cursor: pointer; }
/* Lo que Clicky señala al llevarte a una sección */
.clicky-hl { position: relative; z-index: 1; animation: clicky-hl 1.4s ease-out 3; }
@keyframes clicky-hl { 0% { box-shadow: 0 0 0 0 rgba(18, 180, 90, .7); } 100% { box-shadow: 0 0 0 16px rgba(18, 180, 90, 0); } }
/* Tour: Clicky acompaña cada nota; mientras tanto, el botón de la esquina se esconde */
.tour-clicky { float: left; margin: 0 12px 4px 0; }
.tour-clicky svg { display: block; border-radius: 13px; }
body:has(.tour-pop) .clicky { display: none; }
/* En el Link en bio el botón de Clicky no tapa «Guardar y publicar» */
@media (max-width: 860px) { body:has(.bio-save) .clicky { bottom: calc(150px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 1000px) { .clicky { right: 12px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } .clicky-fab { width: 60px; height: 60px; border-radius: 16px; } .clicky-panel { height: min(520px, calc(100vh - 200px)); } }
@media (prefers-reduced-motion: reduce) { .clicky.is-hop .clicky-fab, .clicky.is-hop .ck-sp, .clicky-hl, .clicky-bubble, .clicky-panel, .clicky-typing i { animation: none; } .clicky-hl { outline: 3px solid var(--green); outline-offset: 4px; } }
@media print { .clicky { display: none; } }

/* ---------- Reservas: panel (/app/reservas) ---------- */
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-wrap { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.span2 { grid-column: 1 / -1; }
.chip.ok { background: var(--green-soft); color: var(--green-text); border-color: transparent; }
.switch { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch > span[aria-hidden] { width: 44px; height: 26px; border-radius: 99px; background: var(--field-line); transition: background .15s; position: relative; }
.switch > span[aria-hidden]::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; }
.switch input:checked + span[aria-hidden] { background: var(--green); }
.switch input:checked + span[aria-hidden]::after { transform: translateX(18px); }
.switch input:focus-visible + span[aria-hidden] { outline: 3px solid var(--focus); outline-offset: 2px; }
.switch-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; }
.bk-head-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.bk-tabs { display: flex; gap: 4px; overflow-x: auto; margin: 6px 0 18px; padding: 4px; background: var(--surface-2); border-radius: 999px; scrollbar-width: none; }
.bk-tabs::-webkit-scrollbar { display: none; }
.bk-tabs a { flex: none; padding: 10px 16px; border-radius: 999px; color: var(--mut); font-weight: 650; font-size: 14.5px; text-decoration: none; white-space: nowrap; }
.bk-tabs a[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.bk-panel { display: flex; flex-direction: column; gap: 16px; }
.bk-panel[hidden] { display: none; }
.bk-setup .card-title { margin-bottom: 10px; }
.bk-steps { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; counter-reset: s; }
.bk-steps li { counter-increment: s; }
.bk-steps a { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14.5px; }
.bk-steps a::before { content: counter(s); flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-size: 13px; }
.bk-steps li.ok a { color: var(--mut); }
.bk-steps li.ok a::before { content: "✓"; background: var(--green); color: var(--green-ink); }
.bk-agenda { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.bk-cal-card, .bk-day-card { padding: 20px; }
.bk-cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.bk-cal-head .card-title { flex: 1; margin: 0; text-align: center; font-size: 18px; min-width: 130px; }
.bk-cal-head select { max-width: 190px; }
.bk-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.bk-wh { text-align: center; font-size: 12px; font-weight: 700; color: var(--mut); padding: 4px 0; }
.bk-cell { position: relative; min-height: 58px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 6px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font: inherit; color: var(--ink); cursor: pointer; text-align: left; }
.bk-cell.empty { border: 0; background: none; cursor: default; }
.bk-cell b { font-size: 14px; font-weight: 650; }
.bk-cell small { font-size: 11px; font-weight: 700; color: var(--mut); }
.bk-cell:hover { border-color: var(--ink); }
.bk-cell.past { opacity: .55; }
.bk-cell.today b { background: var(--ink); color: var(--bg); border-radius: 99px; padding: 0 7px; }
.bk-cell.sel { border: 2px solid var(--green); padding: 5px; }
.bk-cell.blocked { background: repeating-linear-gradient(135deg, var(--surface-2) 0 6px, var(--surface) 6px 12px); }
.bk-dots { display: flex; gap: 3px; flex-wrap: wrap; }
.bk-dots i, .bk-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.bk-dots i.c, .bk-dot.c { background: var(--green); }
.bk-dots i.p, .bk-dot.p { background: var(--yellow); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.bk-dot.x { background: repeating-linear-gradient(135deg, var(--field-line) 0 2px, transparent 2px 4px); border: 1px solid var(--field-line); }
.bk-legend { display: flex; align-items: center; gap: 6px 16px; flex-wrap: wrap; margin: 12px 0 0; }
.bk-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bk-dot { flex: none; }
.bk-day-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.bk-day-head .card-title { margin: 0; font-size: 17px; }
.bk-day-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.bk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bk-none { padding: 14px 0; }
.bk-row-btn { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
button.bk-row-btn:hover { border-color: var(--ink); }
.bk-row-time { flex: none; min-width: 58px; font: 700 14px var(--mono); }
.bk-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bk-row-main b { font-weight: 650; }
.bk-row-main small { color: var(--mut); overflow: hidden; text-overflow: ellipsis; }
.st-cancelada .bk-row-btn, .st-rechazada .bk-row-btn, .st-expirada .bk-row-btn { opacity: .55; }
.chip.st-confirmada, .chip.st-completada { background: var(--green-soft); color: var(--green-text); border-color: transparent; }
.chip.st-pendiente, .chip.st-por_pagar { background: var(--yellow-soft); color: var(--yellow-ink); border-color: transparent; }
.chip.st-cancelada, .chip.st-rechazada, .chip.st-expirada { background: var(--red-soft); color: var(--red-text); border-color: transparent; }
.bk-busy .bk-row-btn { background: repeating-linear-gradient(135deg, var(--surface-2) 0 8px, var(--surface) 8px 16px); cursor: default; }
.bk-dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; }
.bk-dl dt { color: var(--mut); font-size: 14px; }
.bk-dl dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bk-dl dd span { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bk-dlg-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.bk-m-free { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.bk-m-free .chip { cursor: pointer; text-transform: none; font-size: 13px; letter-spacing: 0; padding: 5px 10px; }
.bk-items-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 6px; }
.bk-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.bk-item { padding: 18px; }
.bk-item-head { display: flex; gap: 14px; align-items: flex-start; }
.bk-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.bk-item-name { font-weight: 650; font-size: 16px; }
.bk-item-acts { display: flex; gap: 6px; align-items: center; }
.bk-item-acts .btn.icon { width: 38px; height: 38px; padding: 0; justify-content: center; }
.bk-kinds { display: flex; gap: 6px; flex-wrap: wrap; }
.bk-kind { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--field-line); border-radius: 99px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.bk-kind:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.bk-kind input { accent-color: var(--green); }
.bk-item-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin-top: 14px; }
.bk-item-grid .field { margin: 0; }
.bk-lead { display: grid; grid-template-columns: 90px 1fr; gap: 8px; }
/* Cada campo lleva las clases de los tipos en que aplica (only-cita, only-pedido, only-producto) */
.bk-item.kind-cita [class*="only-"]:not(.only-cita), .bk-item.kind-pedido [class*="only-"]:not(.only-pedido), .bk-item.kind-producto [class*="only-"]:not(.only-producto) { display: none; }
.it-dep-f[hidden] { display: none; }
.bk-groups, .bk-branches { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bk-groups li { display: flex; gap: 6px; align-items: center; }
.bk-groups li input[type="text"] { flex: 1; }
.bk-groups .btn.icon, .bk-branches .btn.icon { width: 38px; height: 38px; padding: 0; justify-content: center; }
.bk-branch { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 14px; }
.bk-branch-f { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bk-srv { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; }
.bk-srv[hidden], .st-week[hidden] { display: none; }
.card-thumb.round { width: 72px; aspect-ratio: 1; border-radius: 50%; }
.bk-week { display: flex; flex-direction: column; gap: 8px; }
.st-week { margin-top: 10px; padding: 12px; border-radius: 14px; background: var(--surface-2); }
.bk-wd { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.bk-wd:last-child { border-bottom: 0; }
.bk-wd-name { font-weight: 650; padding-top: 8px; }
.bk-ranges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bk-range { display: inline-flex; gap: 6px; align-items: center; }
.bk-range input { width: 118px; }
.bk-range .btn.icon { width: 32px; height: 32px; padding: 0; justify-content: center; }
.bk-closed { display: none; padding-top: 8px; }
.bk-wd.closed .bk-range, .bk-wd.closed [data-range-add] { display: none; }
.bk-wd.closed .bk-closed { display: inline; }
.bk-zero { border-color: var(--green); background: linear-gradient(135deg, var(--green-soft), var(--surface) 70%); }
.bk-pay-head { display: flex; gap: 14px; align-items: flex-start; }
.bk-pay-t { margin: 0 0 2px; font: 700 17px var(--display); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bk-pay-head p { margin: 0; }
.bk-pay-body { margin: 14px 0 0 58px; display: flex; flex-direction: column; gap: 10px; }
.bk-pay:not(:has(.bk-pay-head input:checked)) .bk-pay-body { opacity: .6; }
.bk-help summary { cursor: pointer; font-weight: 600; color: var(--green-text); }
.bk-help ol { margin: 8px 0 0; padding-left: 20px; color: var(--mut); font-size: 14px; }
.bk-page-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.bk-share { position: sticky; top: 16px; }
.bk-url a { font-size: 15px; overflow-wrap: anywhere; }
.bk-code { width: 100%; font-size: 12.5px; resize: vertical; }
.bk-prev-card .bio-phone { max-width: 300px; margin: 10px auto 0; }
.bk-prev { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.bk-how { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.bk-accept { align-items: flex-start; }
@media (max-width: 1100px) { .bk-agenda, .bk-page-grid { grid-template-columns: 1fr; } .bk-share { position: static; } }
@media (max-width: 640px) {
  .bk-item-grid, .bk-branch-f, .grid-2 { grid-template-columns: 1fr; }
  .bk-item-head { flex-wrap: wrap; }
  .bk-item-acts { width: 100%; justify-content: flex-end; }
  .bk-wd { grid-template-columns: 1fr; gap: 4px; }
  .bk-wd-name { padding-top: 0; }
  .bk-pay-body { margin-left: 0; }
  .bk-cell { min-height: 48px; padding: 4px; }
  .bk-cal-card, .bk-day-card, .bk-item { padding: 14px; }
}

/* Avisos emergentes de la app */
.ntf-stack { position: fixed; top: 16px; right: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; width: min(360px, calc(100vw - 32px)); }
.ntf { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 44px 14px 16px; border-radius: 16px; background: var(--inv); color: var(--inv-ink); text-decoration: none; box-shadow: var(--shadow); animation: ntf-in .35s cubic-bezier(.2, .8, .2, 1.2); border-left: 5px solid var(--green); }
.ntf b { font-weight: 700; }
.ntf span { color: var(--inv-mut); font-size: 14px; }
.ntf.out { opacity: 0; transform: translateX(20px); transition: .35s; }
.ntf-x { position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--inv-mut); cursor: pointer; font-size: 14px; }
@keyframes ntf-in { from { opacity: 0; transform: translateY(-10px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .ntf { animation: none; } }

/* ---------- Reservas: página pública (/reservas/<nombre>) ---------- */
body.page-book { background: var(--b-bg); color: var(--b-ink); padding: 0 16px; min-height: 100vh; }
.bk-page { max-width: 720px; margin: 0 auto; padding: 28px 0 32px; display: flex; flex-direction: column; gap: 22px; }
.page-book [class*="bft-"]:not(.bft-clickly) h1, .page-book:not(.bft-clickly) .bk-page h1, .page-book:not(.bft-clickly) .bk-group-h, .page-book:not(.bft-clickly) .bk-card h3 { font-family: var(--b-font, var(--display)); }
.bk-draft { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--yellow); color: var(--yellow-ink); font-weight: 650; text-align: center; }
.bk-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.bk-cover { width: calc(100% + 32px); margin: -28px -16px 0; height: 220px; overflow: hidden; border-radius: 0 0 28px 28px; }
.bk-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-hero.has-cover .bk-avatar { margin-top: -54px; border: 4px solid var(--b-bg); }
.bk-avatar { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--b-btn); color: var(--b-btn-ink); font: 800 34px var(--display); }
.bk-hero h1 { margin: 4px 0 0; font: 800 clamp(28px, 6vw, 40px)/1.05 var(--display); letter-spacing: -.02em; color: var(--b-title); overflow-wrap: anywhere; }
.bk-lede { margin: 0; max-width: 520px; color: var(--b-mut); font-size: 16px; }
.bk-wa { display: inline-flex; gap: 8px; align-items: center; margin-top: 4px; padding: 9px 16px; border-radius: 99px; border: 1.5px solid currentColor; color: var(--b-ink); text-decoration: none; font-weight: 650; font-size: 14.5px; }
.bk-wa svg { width: 18px; height: 18px; }
.bk-chips { position: sticky; top: 0; z-index: 3; display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px; margin: 0 -16px; background: color-mix(in srgb, var(--b-bg) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); scrollbar-width: none; }
.bk-chips a { flex: none; padding: 8px 14px; border-radius: 99px; border: 1.5px solid color-mix(in srgb, var(--b-ink) 22%, transparent); color: var(--b-ink); text-decoration: none; font-weight: 650; font-size: 14px; }
.bk-chips a[aria-current] { background: var(--b-ink); color: var(--b-bg); border-color: var(--b-ink); }
.bk-group { scroll-margin-top: 64px; }
.bk-group[hidden], .bk-card[hidden], .bk-pick[hidden], .bk-pickwrap[hidden] { display: none; }
.bk-group-h { margin: 0 0 12px; font: 800 22px/1.15 var(--display); letter-spacing: -.01em; color: var(--b-title); display: flex; align-items: center; gap: 10px; }
.bk-num { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--b-cta); color: var(--b-cta-ink); font: 800 15px var(--body); }
.bk-step-title { margin-bottom: -8px; }
.bk-locked { opacity: .5; filter: grayscale(.4); }
.bk-shake { animation: bk-shake .5s; }
@keyframes bk-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.bk-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.bk-picks-staff { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.bk-pick { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 12px; border-radius: 18px; border: 2px solid transparent; background: var(--b-card); color: var(--b-ink); font: inherit; cursor: pointer; box-shadow: 0 8px 20px -16px rgba(0, 0, 0, .5); transition: transform .15s, border-color .15s; }
.bk-pick-br { align-items: flex-start; text-align: left; }
.bk-pick:hover { transform: translateY(-2px); }
.bk-pick[aria-pressed="true"] { border-color: var(--b-cta); box-shadow: 0 0 0 3px color-mix(in srgb, var(--b-cta) 25%, transparent); }
.bk-pick b { font-weight: 700; font-size: 15.5px; }
.bk-pick small { color: var(--b-mut); font-size: 13px; }
.bk-face { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--b-btn); color: var(--b-btn-ink); font: 800 24px var(--display); margin-bottom: 4px; }
.bk-face.any { background: color-mix(in srgb, var(--b-ink) 10%, transparent); color: var(--b-ink); }
.bk-br-links { margin: 8px 0 0; display: flex; gap: 14px; }
.bk-br-links a { color: var(--b-ink); font-weight: 650; }
.bk-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.bk-card { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--b-card); color: var(--b-ink); box-shadow: 0 12px 28px -20px rgba(0, 0, 0, .55); }
.bk-card-img { aspect-ratio: 16 / 10; overflow: hidden; }
.bk-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.bk-card:hover .bk-card-img img { transform: scale(1.04); }
.bk-card-body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; }
.bk-card h3 { margin: 0; font: 750 18px/1.2 var(--display); }
.bk-desc { margin: 0; color: var(--b-mut); font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bk-meta { margin: 0; display: flex; gap: 6px; flex-wrap: wrap; }
.bk-meta:empty { display: none; }
.bk-meta span { font-size: 12.5px; font-weight: 650; padding: 3px 9px; border-radius: 99px; background: color-mix(in srgb, var(--b-ink) 8%, transparent); }
.bk-card-foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bk-price { font: 800 17px var(--body); }
.bk-go, .bk-submit { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 20px; border-radius: 999px; border: 1.5px solid var(--b-cta); background: var(--b-cta); color: var(--b-cta-ink); font: 700 15.5px var(--body); cursor: pointer; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.bk-go:hover, .bk-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .5); }
.bk-go:focus-visible, .bk-submit:focus-visible, .bk-pick:focus-visible, .bk-slot:focus-visible, .bk-day:focus-visible { outline: 3px solid var(--b-ink); outline-offset: 2px; }
.bs-recta .bk-go, .bs-recta .bk-submit, .bs-recta .bk-slot { border-radius: 4px; }
.bs-redonda .bk-go, .bs-redonda .bk-submit, .bs-redonda .bk-slot { border-radius: 14px; }
.bf-contorno .bk-go, .bf-contorno .bk-submit { background: transparent; color: var(--b-oc); border: 2px solid var(--b-oc); }
.bf-vidrio .bk-go, .bf-vidrio .bk-submit { background: color-mix(in srgb, var(--b-btn) 30%, transparent); color: var(--b-ink); border: 1px solid color-mix(in srgb, #fff 50%, transparent); }
.bsh-suave .bk-go, .bsh-suave .bk-submit { box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .45); }
.bsh-marcada .bk-go, .bsh-marcada .bk-submit { box-shadow: 3px 3px 0 var(--b-ink); }
.bk-submit:disabled { opacity: .6; cursor: wait; transform: none; }
.bk-none { text-align: center; color: var(--b-mut); }
.bk-foot { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; margin-top: 12px; }
.bk-foot .logo { color: var(--b-ink); }
.bk-legal { margin: 0; max-width: 560px; font-size: 12.5px; line-height: 1.5; color: var(--b-mut); }
.bk-legal a, .page-book .bio-legal a { color: var(--b-ink); }
.bk-policy { width: 100%; max-width: 560px; text-align: left; padding: 12px 16px; border-radius: 16px; background: color-mix(in srgb, var(--b-ink) 6%, transparent); }
.bk-policy summary { cursor: pointer; font-weight: 700; }
.bk-policy p { margin: 8px 0 0; font-size: 14px; }
/* Hoja de reserva: abajo en el celular, al centro en la computadora */
.bk-sheet { border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 560px; max-height: 92vh; border-radius: 24px 24px 0 0; background: var(--b-bg); color: var(--b-ink); box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .5); }
.bk-sheet::backdrop { background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.bk-sheet[open] { animation: bk-up .32s cubic-bezier(.2, .8, .2, 1); }
@keyframes bk-up { from { transform: translateY(40px); opacity: 0; } }
@media (min-width: 700px) { .bk-sheet { margin: auto; border-radius: 24px; } }
@media (prefers-reduced-motion: reduce) { .bk-sheet[open] { animation: none; } }
.bk-sheet-in { padding: 18px 20px calc(22px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 12px; }
.bk-sheet-top { display: flex; align-items: center; gap: 8px; }
.bk-sheet-top h2 { flex: 1; margin: 0; font: 800 21px/1.15 var(--display); color: var(--b-title); }
.bk-back, .bk-x, .bk-nav { width: 40px; height: 40px; flex: none; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--b-ink) 8%, transparent); color: var(--b-ink); font: 700 20px var(--body); cursor: pointer; }
.bk-x { font-size: 16px; }
.bk-nav:disabled { opacity: .3; cursor: default; }
.bk-sum { margin: -4px 0 0; color: var(--b-mut); font-size: 14px; }
.bk-step { display: flex; flex-direction: column; gap: 10px; }
.bk-step[hidden] { display: none; }
.bk-step-h { margin: 4px 0 0; font: 700 16px var(--body); }
.bk-mhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bk-mhead b { font: 700 17px var(--body); }
.bk-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.bk-month .bk-wh { color: var(--b-mut); }
.bk-day { aspect-ratio: 1; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--b-cta) 12%, transparent); color: var(--b-ink); font: 700 15px var(--body); cursor: pointer; }
.bk-day:hover:not(:disabled) { background: var(--b-cta); color: var(--b-cta-ink); }
.bk-day:disabled { background: none; color: color-mix(in srgb, var(--b-ink) 32%, transparent); font-weight: 500; cursor: default; }
.bk-day.today { box-shadow: inset 0 0 0 2px var(--b-ink); }
.bk-hint { margin: 0; color: var(--b-mut); font-size: 14px; }
.bk-slots { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; }
.bk-slot-h { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--b-mut); }
.bk-slot-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.bk-slot { min-height: 46px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--b-ink) 25%, transparent); background: var(--b-card); color: var(--b-ink); font: 700 15px var(--mono); cursor: pointer; }
.bk-slot:hover { background: var(--b-cta); color: var(--b-cta-ink); border-color: var(--b-cta); }
.bk-field { display: flex; flex-direction: column; gap: 5px; }
.bk-field label { font-weight: 650; font-size: 14px; }
.bk-field input, .bk-field textarea { font: 16px var(--body); padding: 12px 14px; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--b-ink) 22%, transparent); background: var(--b-card); color: var(--b-ink); }
.bk-field input:focus, .bk-field textarea:focus { outline: 3px solid color-mix(in srgb, var(--b-btn) 45%, transparent); border-color: var(--b-ink); }
.bk-qty-f[hidden], .bk-methods[hidden] { display: none; }
.bk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bk-methods { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.bk-methods legend { font-weight: 650; font-size: 14px; margin-bottom: 6px; }
.bk-method { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1.5px solid color-mix(in srgb, var(--b-ink) 18%, transparent); cursor: pointer; }
.bk-method:has(input:checked) { border-color: var(--b-ink); background: color-mix(in srgb, var(--b-cta) 7%, transparent); }
.bk-method input { margin-top: 3px; accent-color: var(--b-btn); }
.bk-method span { display: flex; flex-direction: column; }
.bk-method small { color: var(--b-mut); }
.bk-total { display: flex; flex-direction: column; gap: 2px; }
.bk-total:empty { display: none; }
.bk-trow { display: flex; justify-content: space-between; font-size: 16px; }
.bk-total small { color: var(--b-mut); }
.bk-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--b-mut); }
.bk-check input { margin-top: 3px; accent-color: var(--b-btn); }
.bk-check a { color: var(--b-ink); }
.bk-err { margin: 0; padding: 10px 14px; border-radius: 12px; background: #fde5e3; color: #9b1c15; font-weight: 600; }
.bk-done { align-items: center; text-align: center; padding: 12px 0; }
.bk-done-ico { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: var(--b-cta); color: var(--b-cta-ink); animation: bk-pop .45s cubic-bezier(.2, .8, .2, 1.4); }
@keyframes bk-pop { from { transform: scale(.4); opacity: 0; } }
.bk-done .bk-step-h { font: 800 24px var(--display); }
.bk-done p { margin: 0; color: var(--b-mut); }
/* Incrustada en otro sitio: sin márgenes grandes y la hoja dentro de la página */
body.page-book.is-embed { background: transparent; padding: 0 12px; min-height: 0; }
.is-embed .bk-page { padding-top: 12px; }
.is-embed .bk-cover { margin-top: -12px; border-radius: 0 0 22px 22px; }
.is-embed .bk-chips { position: static; }
.is-embed.bk-open .bk-page { display: none; }
.is-embed .bk-sheet { position: static; margin: 0 auto; max-height: none; border-radius: 22px; box-shadow: none; }
/* Reserva de una persona */
.bk-manage { max-width: 560px; }
.bk-biz { margin: 0; text-align: center; }
.bk-biz a { color: var(--b-title); font: 800 22px var(--display); text-decoration: none; }
.bk-alert { margin: 0; padding: 12px 16px; border-radius: 14px; font-weight: 650; }
.bk-alert.ok { background: #daf4e4; color: #0a5c2e; }
.bk-alert.err { background: #fde5e3; color: #9b1c15; }
.bk-ticket { background: var(--b-card); border-radius: 24px; padding: 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .6); }
.bk-ticket h1 { margin: 0; font: 800 26px/1.1 var(--display); color: var(--b-title); }
.bk-status { align-self: flex-start; padding: 5px 12px; border-radius: 99px; font-weight: 700; font-size: 13px; }
.bk-status.ok { background: #daf4e4; color: #0a5c2e; }
.bk-status.wait { background: #fff3c4; color: #5c4700; }
.bk-status.off { background: #fde5e3; color: #9b1c15; }
.bk-ticket dl { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.bk-ticket dl div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; }
.bk-ticket dt { color: var(--b-mut); font-size: 14px; }
.bk-ticket dd { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.bk-ticket dd a { color: var(--b-ink); }
.bk-paynote { padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--b-btn) 10%, transparent); display: flex; flex-direction: column; gap: 8px; }
.bk-paynote p { margin: 0; }
.bk-acts { display: flex; flex-direction: column; gap: 8px; }
.bk-acts form { display: contents; }
/* Reservas: botones del encabezado, información del negocio, extras y cambio de cita */
.bk-hero-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.bk-info { width: 100%; }
.bk-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.bk-info-card { padding: 14px 16px; border-radius: 18px; background: var(--b-card); color: var(--b-ink); border: 1px solid color-mix(in srgb, var(--b-ink) 10%, transparent); }
.bk-info-card h3 { margin: 0 0 8px; font: 800 16px var(--display); color: var(--b-title); }
.bk-info-card p { margin: 0 0 8px; font-size: 14.5px; }
.bk-hours { margin: 0; display: grid; gap: 4px; font-size: 14.5px; }
.bk-hours-h { margin: 12px 0 6px; font-size: 14.5px; }
.bk-hours-h:first-of-type { margin-top: 0; }
.bk-hours div { display: flex; justify-content: space-between; gap: 12px; }
.bk-hours dt { color: var(--b-mut); }
.bk-hours dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.bk-hours .today dt, .bk-hours .today dd { color: var(--b-ink); font-weight: 750; }
.bk-info-links { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.bk-info-links a, .bk-info-card a { color: var(--b-ink); font-weight: 700; }
.bk-socials { display: flex; justify-content: center; gap: 10px; margin: 14px 0 0; }
.bk-socials a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--b-ink); border: 1.5px solid color-mix(in srgb, var(--b-ink) 22%, transparent); }
.bk-extras-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; }
.bk-extra input { accent-color: var(--b-btn); }
.bk-cancel.bk-move summary { color: var(--b-ink); }
.bk-mv-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.bk-mv-day { font: 700 13.5px var(--body); text-transform: capitalize; }
.bk-slot[aria-pressed="true"] { background: var(--b-cta); color: var(--b-cta-ink); border-color: var(--b-cta); }
.bk-direct summary { cursor: pointer; list-style: none; }
.bk-direct summary::-webkit-details-marker { display: none; }
.bk-direct summary .card-title::after { content: " ›"; color: var(--mut); }
.bk-direct[open] summary .card-title::after { content: " ⌄"; }
.bk-direct-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bk-direct-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bk-direct-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bk-info-form h3 { margin: 6px 0 0; font: 800 16px var(--display); }
.bk-btn2 { display: flex; justify-content: center; align-items: center; min-height: 46px; padding: 10px 18px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--b-ink) 28%, transparent); color: var(--b-ink); font-weight: 700; text-decoration: none; }
.bk-cancel summary { cursor: pointer; color: #b3261e; font-weight: 650; }
.bk-cancel-f { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.bk-cancel-f input { font: 16px var(--body); padding: 10px 12px; border-radius: 12px; border: 1.5px solid color-mix(in srgb, var(--b-ink) 22%, transparent); background: var(--b-bg); color: var(--b-ink); }
.bk-danger { min-height: 44px; border-radius: 999px; border: 0; background: #b3261e; color: #fff; font: 700 15px var(--body); cursor: pointer; }
@media (max-width: 480px) { .bk-grid { grid-template-columns: 1fr; } .bk-cover { height: 170px; } .bk-ticket dl div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Portada: Reservas (animación del recorrido: sucursal → barbero → servicio → hora → confirmada) ---------- */
.tile.bk-tile { background: linear-gradient(135deg, #fff3c4 0%, #fdf7e6 55%, #e2f6ea 100%); border-color: transparent; color: #0d100e; }
.tile.bk-tile p, .tile.bk-tile .bk-perks { color: #3c443e; }
:root[data-theme="dark"] .tile.bk-tile { background: linear-gradient(135deg, #3a3316 0%, #26261b 55%, #16382a 100%); color: #f2f5f0; }
:root[data-theme="dark"] .tile.bk-tile p, :root[data-theme="dark"] .tile.bk-tile .bk-perks { color: #c9d1ca; }
.bk-perks { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; font-size: 15px; }
.bk-perks li { display: flex; gap: 8px; align-items: flex-start; }
.bk-perks li::before { content: "✓"; color: var(--green-text); font-weight: 800; }
.bkd { position: relative; flex: 0 0 auto; width: 340px; max-width: 100%; margin: 0 auto; padding: 8px 20px 0; }
.bkd-phone { position: relative; background: #fff; color: #0d100e; border: 7px solid #0d100e; border-radius: 30px; padding: 16px 14px 18px; display: flex; flex-direction: column; gap: 7px; box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .55); transform: rotate(-2deg); }
.bkd-biz { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.bkd-biz b { font: 800 15px var(--display); }
.bkd-logo { width: 28px; height: 28px; border-radius: 8px; background: #12b45a; color: #0d100e; display: grid; place-items: center; font: 800 11px var(--display); }
.bkd-h { display: flex; align-items: center; gap: 6px; font: 700 11px var(--body); color: #59615b; text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; }
.bkd-h i { font-style: normal; width: 16px; height: 16px; border-radius: 50%; background: #0d100e; color: #fff; display: grid; place-items: center; font-size: 10px; }
.bkd-row { display: flex; gap: 6px; }
.bkd-br { flex: 1; padding: 7px 8px; border-radius: 10px; border: 1.5px solid #dde1da; font: 600 12px var(--body); text-align: center; }
.bkd-face { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #eaede7; font: 800 13px var(--display); border: 2px solid transparent; }
.bkd-svc { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 12px; border: 1.5px solid #dde1da; }
.bkd-svc b { font: 700 13px var(--body); }
.bkd-svc small { font-size: 11px; color: #59615b; }
.bkd-slots span { flex: 1; padding: 6px 0; border-radius: 999px; border: 1.5px solid #dde1da; font: 700 11px var(--mono); text-align: center; }
.bkd-ok { margin-top: 4px; padding: 9px; border-radius: 999px; background: #12b45a; color: #04130a; font: 800 13px var(--body); text-align: center; opacity: 0; transform: translateY(6px) scale(.96); }
.bkd-chips { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 8px; margin-top: 18px; }
.bkd-chip.c2 { grid-column: 1 / -1; justify-self: center; }
@media (max-width: 420px) { .bkd-chips { grid-template-columns: auto; } .bkd-chip { justify-self: center; } }
.bkd-chip { padding: 7px 12px; border-radius: 999px; background: #0d100e; color: #fff; font: 700 12px var(--body); white-space: nowrap; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(8px) scale(.9); }
.bkd-chip.c1 { background: #fff; color: #0d100e; border: 1.5px solid #dde1da; }
.bkd-chip.c3 { background: #ffd23f; color: #1c1600; }
/* Elegidos: se marcan uno tras otro y el ciclo vuelve a empezar */
.bkd .pk1 { animation: bkd-p1 9s infinite; }
.bkd .pk2 { animation: bkd-p2 9s infinite; }
.bkd .pk3 { animation: bkd-p3 9s infinite; }
.bkd .pk4 { animation: bkd-p4 9s infinite; }
.bkd-ok { animation: bkd-ok 9s infinite; }
.bkd-chip.c1 { animation: bkd-c1 9s infinite; }
.bkd-chip.c2 { animation: bkd-c2 9s infinite; }
.bkd-chip.c3 { animation: bkd-c3 9s infinite; }
@keyframes bkd-p1 { 0%, 7% { background: #fff; color: #0d100e; border-color: #dde1da; } 10%, 93% { background: #0d100e; color: #fff; border-color: #0d100e; } 100% { background: #fff; color: #0d100e; border-color: #dde1da; } }
@keyframes bkd-p2 { 0%, 18% { border-color: transparent; background: #eaede7; } 21%, 93% { border-color: #12b45a; background: #daf4e4; } 100% { border-color: transparent; background: #eaede7; } }
@keyframes bkd-p3 { 0%, 29% { border-color: #dde1da; background: #fff; } 32%, 93% { border-color: #0d100e; background: #f2f3ef; } 100% { border-color: #dde1da; background: #fff; } }
@keyframes bkd-p4 { 0%, 40% { background: #fff; color: #0d100e; border-color: #dde1da; } 43%, 93% { background: #12b45a; color: #04130a; border-color: #12b45a; } 100% { background: #fff; color: #0d100e; border-color: #dde1da; } }
@keyframes bkd-ok { 0%, 50% { opacity: 0; transform: translateY(6px) scale(.96); } 54%, 93% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px) scale(.96); } }
@keyframes bkd-c1 { 0%, 58% { opacity: 0; transform: translateY(8px) scale(.9); } 62%, 93% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes bkd-c2 { 0%, 65% { opacity: 0; transform: translateY(8px) scale(.9); } 69%, 93% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes bkd-c3 { 0%, 72% { opacity: 0; transform: translateY(8px) scale(.9); } 76%, 93% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .bkd .pk1, .bkd .pk2, .bkd .pk3, .bkd .pk4, .bkd-ok, .bkd-chip { animation: none !important; }
  .bkd .pk1 { background: #0d100e; color: #fff; border-color: #0d100e; }
  .bkd .pk2 { border-color: #12b45a; background: #daf4e4; }
  .bkd .pk3 { border-color: #0d100e; background: #f2f3ef; }
  .bkd .pk4 { background: #12b45a; color: #04130a; border-color: #12b45a; }
  .bkd-ok, .bkd-chip { opacity: 1; transform: none; }
}
@media (max-width: 560px) { .bkd { width: 100%; padding: 8px 10px 0; } }
:root[data-theme="dark"] .tile.bk-tile .tile-kicker { background: #ffd23f; color: #1c1600; }

/* ---------- Reservas: configuración por pasos con vista previa ---------- */
.bk-wsteps { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 16px; padding-bottom: 4px; scrollbar-width: thin; counter-reset: w; }
.bk-wsteps a { flex: 1 0 auto; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--mut); text-decoration: none; font-weight: 650; font-size: 13.5px; white-space: nowrap; }
.bk-wsteps a i { font-style: normal; flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink); font-size: 12.5px; }
.bk-wsteps a.ok i { background: var(--green); color: var(--green-ink); }
.bk-wsteps a[aria-current] { border-color: var(--ink); color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.bk-wsteps a[aria-current] i { background: var(--ink); color: var(--bg); }
.bk-wgrid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
.bk-wmain { min-width: 0; }
.bk-whead { margin: 0 0 14px; }
.bk-wnum { font: 700 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.bk-whead h2 { margin: 4px 0 6px; font: 800 clamp(24px, 3.2vw, 32px)/1.1 var(--display); letter-spacing: -.02em; }
.bk-whead p { margin: 0; max-width: 62ch; }
.bk-wfoot { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; background: linear-gradient(transparent, var(--bg) 30%); }
.bk-wprev { position: sticky; top: 16px; }
.bk-wprev-in { display: flex; flex-direction: column; gap: 10px; }
.bk-wprev-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bk-wprev .bio-phone { width: 100%; max-width: 320px; margin: 0 auto; }
.bk-wprev-x, .bk-wprev-open { display: none; }
.bk-wprev.loading .bio-phone { opacity: .6; transition: opacity .2s; }
/* Paso 1: tipos de negocio */
.bk-biz-tools { display: flex; flex-direction: column; gap: 10px; }
.bk-biz-tools input[type="search"] { width: 100%; }
.bk-chips-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.bk-chips-row .chip { cursor: pointer; font-size: 12px; padding: 6px 12px; text-transform: none; letter-spacing: 0; }
.bk-chips-row .chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.bk-biz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.bk-biz { display: flex; flex-direction: column; gap: 4px; cursor: pointer; font-size: 13.5px; text-align: center; }
.bk-biz-art { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--t-bg, var(--surface-2)); border: 1px solid var(--line); }
.bk-biz-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bk-biz-art b { font-size: 38px; line-height: 1; }
.bk-biz-art::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 9px; height: 7px; border-radius: 99px; background: var(--t-btn, var(--ink)); opacity: .9; }
.bk-biz-otro .bk-biz-art { background: var(--surface); border-style: dashed; }
.bk-biz-otro .bk-biz-art::after { display: none; }
.bk-biz-name { font-weight: 700; color: var(--ink); line-height: 1.2; }
.bk-biz small { font-size: 11.5px; }
.bk-biz:hover .bk-biz-art { transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .5); }
.bk-biz:has(input:checked) .bk-biz-art { box-shadow: 0 0 0 3px var(--green); }
.bk-biz:has(input:focus-visible) .bk-biz-art { outline: 2px solid var(--ink); outline-offset: 3px; }
/* Paso 2 y 3: opciones grandes */
.bk-places { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.bk-place { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--surface); cursor: pointer; }
.bk-place input { position: absolute; opacity: 0; pointer-events: none; }
.bk-place:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.bk-place:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.bk-branches { list-style: none; margin: 0; padding: 0; }
.bk-team-group .card-title { margin: 0; }
/* Paso 4: quién hace qué */
.bk-who-h { margin: 8px 0 0; font: 700 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mut); }
.bk-who-row { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.bk-refs { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-refs label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1.5px solid var(--line); border-radius: 999px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.bk-refs label:has(input:checked) { border-color: var(--green); background: var(--green-soft); }
.bk-refs input { accent-color: var(--green); }
/* Paso 5 y 6 */
.bk-time-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.bk-sdur { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.bk-own { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.bk-own:first-of-type { border-top: 0; }
.bk-fit { padding: 12px 16px; border-radius: 14px; background: var(--red-soft); color: var(--red-text); }
.bk-fit ul { margin: 6px 0 0; padding-left: 18px; }
.bk-fit li { margin: 3px 0; color: var(--ink); }
.bk-payrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.bk-payrow .muted { grid-column: 2; grid-row: 1; }
.bk-payrow select, .bk-payrow .py-dep { grid-column: 1 / -1; }
.bk-share-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1100px) {
  .bk-wgrid { grid-template-columns: minmax(0, 1fr); }
  .bk-wprev { display: none; }
  .bk-wprev.open { display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; z-index: 60; padding: 16px; background: rgba(5, 7, 6, .72); }
  .bk-wprev.open .bk-wprev-in { width: 100%; max-width: 380px; align-items: stretch; }
  .bk-wprev.open .bk-wprev-head, .bk-wprev.open p { color: #f2f5f0; }
  .bk-wprev.open .bio-phone { height: min(74vh, 680px); aspect-ratio: 9 / 18.5; width: auto; max-width: 100%; }
  .bk-wprev.open .bk-wprev-x { display: inline-flex; margin-left: auto; }
  .bk-wprev-open { display: inline-flex; position: fixed; right: 16px; bottom: 84px; z-index: 30; box-shadow: var(--shadow); }
  body.bk-prev-on { overflow: hidden; }
}
@media (max-width: 600px) {
  .bk-biz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bk-biz-art b { font-size: 30px; }
  .bk-wfoot .btn.big { padding-inline: 16px; }
}
.bk-warn { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #ffd23f 22%, transparent); }