[hidden] { display: none !important; }
:root {
  --paper: #F2F4EF;
  --sheet: #FBFCFA;
  --ink: #17211B;
  --ink-2: #3A463F;
  --muted: #5E6B63;
  --line: #D5DBD3;
  --line-2: #E4E8E2;
  --signal: #FF5A1F;
  --ok: #1F8A5B;
  --wait: #B7791F;
  --err: #C2362B;
  --info: #2D5BD7;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, sans-serif;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--body); }
img { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.mut { color: var(--muted); }
.grow { flex: 1; min-width: 0; }
.one { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hint { color: var(--muted); font-size: 14px; }

/* ---------- Estructura ---------- */
.shell { min-height: 100dvh; display: grid; grid-template-columns: 1fr; }
.rail {
  position: fixed; inset: auto 0 0 0; z-index: 20;
  display: flex; justify-content: space-around;
  padding: 6px 6px calc(6px + var(--safe-b));
  background: rgba(251, 252, 250, .95); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.brand, .rail .foot, .rail a.desk { display: none; }
.rail a {
  position: relative; display: grid; justify-items: center; gap: 2px;
  padding: 6px 10px; border-radius: var(--r-sm);
  font-size: 12px; font-weight: 500; text-decoration: none; color: var(--muted);
}
.rail a svg { width: 22px; height: 22px; }
.rail a[aria-current="page"] { color: var(--ink); }
.rail a[aria-current="page"] svg { color: var(--signal); }
.rail .badge {
  position: absolute; transform: translate(12px, -4px);
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--signal); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
}
main { padding: 22px 16px calc(96px + var(--safe-b)); max-width: 1120px; width: 100%; margin: 0 auto; min-width: 0; }

@media (min-width: 960px) {
  .shell { grid-template-columns: 236px 1fr; }
  .rail {
    position: sticky; top: 0; height: 100dvh; inset: auto;
    flex-direction: column; justify-content: flex-start; gap: 2px;
    padding: 26px 14px; border-top: 0; border-right: 1px solid var(--line); background: var(--sheet);
  }
  .brand { display: flex; align-items: center; gap: 10px; margin: 0 10px 26px; font: 700 22px/1 var(--display); letter-spacing: -.02em; }
  .brand i { width: 14px; height: 14px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 5px rgba(255,90,31,.15); }
  .rail a, .rail a.desk { display: grid; grid-template-columns: 20px 1fr auto; justify-items: start; align-items: center; gap: 12px; padding: 9px 12px; font-size: 15px; }
  .rail a svg { width: 20px; height: 20px; }
  .rail a.mob { display: none; }
  .rail a[aria-current="page"] { background: var(--paper); }
  .rail .badge { position: static; transform: none; justify-self: end; }
  .rail .foot { display: grid; gap: 6px; margin-top: auto; padding: 0 10px; font-size: 13px; color: var(--muted); overflow: hidden; }
  main { padding: 36px 44px 64px; }
}

/* ---------- Tipografía ---------- */
h1, h2, h3, h4 { font-family: var(--display); margin: 0; letter-spacing: -.02em; }
.page-title { font-size: clamp(30px, 5.5vw, 42px); font-weight: 700; line-height: 1.05; font-variation-settings: "wdth" 85; }
.page-sub { color: var(--muted); margin: 6px 0 0; max-width: 64ch; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
h2.section { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 650; margin: 34px 0 12px; }
h2.section .see { margin-left: auto; font: 500 14px var(--body); color: var(--muted); text-decoration: none; }
h2.section .see:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Botones y campos ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: #26342b; }
.btn:disabled { opacity: .5; cursor: progress; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ink); }
.btn.signal { background: var(--signal); border-color: var(--signal); color: #fff; }
.btn.signal:hover { background: #ec4b12; }
.btn.danger { background: var(--err); border-color: var(--err); color: #fff; }
.btn.sm { min-height: 34px; padding: 0 13px; font-size: 14px; }
.btn svg { width: 16px; height: 16px; }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field > span { font-size: 14px; font-weight: 600; }
.field small { color: var(--muted); font-size: 13px; }
input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="datetime-local"], input[type="time"], input[type="number"], input[type="search"], input[type="url"], textarea, select {
  width: 100%; min-height: 46px; padding: 11px 13px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-sm);
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(23,33,27,.08); }
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.row2 { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .row2 { grid-template-columns: 1fr 1fr; } }
.chip { min-height: 34px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 14px; font-weight: 500; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.filters { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 34px; }

/* ---------- Superficies ---------- */
.card { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); }
.card.pad { padding: 18px 18px 12px; }
.list .li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line-2); text-decoration: none; min-width: 0; }
.list .li:first-child { border-top: 0; }
a.li:hover { background: #f5f7f3; }
.list .li:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.list .li:last-child { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.list .li.empty { color: var(--muted); display: block; }
.li .grow b { display: block; font-weight: 600; }
.li .grow .mut { font-size: 14px; }
.two-col { display: grid; gap: 0 20px; grid-template-columns: minmax(0, 1fr); }
.two-col > * { min-width: 0; }
@media (min-width: 900px) { .two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.two-col.charts { gap: 16px; margin-top: 16px; }
.notice { background: #fff8ec; border: 1px solid #f1dcb4; color: #6b4e14; border-radius: var(--r-md); padding: 12px 14px; font-size: 14px; margin-bottom: 16px; }

/* ---------- Avatar e iconos de red ---------- */
.avatar { position: relative; flex: none; width: var(--s); height: var(--s); }
.avatar img, .avatar .ph { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar .ph { display: grid; place-items: center; background: var(--line); font: 700 calc(var(--s) * .4) var(--display); color: var(--muted); }
.avatar img { z-index: 1; }
.avatar .pf { position: absolute; z-index: 2; right: -3px; bottom: -3px; width: max(14px, calc(var(--s) * .42)); height: max(14px, calc(var(--s) * .42)); border: 2px solid var(--sheet); border-radius: 5px; }
.avatar .pf svg { width: 60%; height: 60%; }
.pf { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--ink); color: #fff; flex: none; }
.pf svg { width: 13px; height: 13px; }
.pf.instagram { background: linear-gradient(135deg, #feda75, #d62976 55%, #4f5bd5); }
.pf.facebook { background: #1877F2; }
.pf.threads { background: #000; }
.app-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; }

.status { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.status.pendiente { color: var(--muted); }
.status.por_aprobar { color: var(--info); }
.status.subiendo, .status.procesando_tiktok { color: var(--wait); }
.status.borrador_enviado { color: var(--signal); }
.status.publicado { color: var(--ok); }
.status.error { color: var(--err); }

/* ---------- Resumen ---------- */
.tiles { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
.tile { display: grid; gap: 2px; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--sheet); text-decoration: none; color: var(--muted); }
.tile .n { font: 700 30px/1.1 var(--display); color: var(--line); }
.tile .t { font-weight: 600; color: var(--ink-2); }
.tile .d { font-size: 13px; }
.tile.on { border-color: transparent; color: var(--ink-2); }
.tile.on .n { color: var(--ink); }
.tile.on.k-ideas, .tile.on.k-review { background: #eef2ff; box-shadow: inset 0 0 0 1.5px var(--info); }
.tile.on.k-drafts { background: #fff3ed; box-shadow: inset 0 0 0 1.5px var(--signal); }
.tile.on.k-errors { background: #fdeeec; box-shadow: inset 0 0 0 1.5px var(--err); }
.tile:hover { border-color: var(--ink); }

.acc-kpis { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .acc-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .acc-kpis { grid-template-columns: repeat(3, 1fr); } }
.kpi-card { display: grid; grid-template-columns: 1fr auto; gap: 12px 10px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--sheet); border: 1px solid var(--line); text-decoration: none; }
.kpi-card:hover { border-color: var(--ink); }
.kc-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.kc-top b { display: block; }
.kc-top .mut { font-size: 13px; }
.kc-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.kc-main .big { font: 700 34px/1 var(--display); font-variation-settings: "wdth" 85; }
.kc-main .mut { font-size: 14px; }
.delta { font-size: 13px; font-weight: 600; color: var(--muted); }
.delta.up { color: var(--ok); }
.delta.down { color: var(--err); }
.kc-spark { align-self: end; color: var(--ink); }
.kc-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding-top: 12px; border-top: 1px solid var(--line-2); }
.kc-stats dt, .ac-stats dt { font-size: 12px; color: var(--muted); }
.kc-stats dd, .ac-stats dd { margin: 0; font-weight: 600; font-size: 17px; }

.li .when { display: grid; width: 64px; flex: none; line-height: 1.2; }
.li .when b { font: 700 18px var(--display); }
.li .when span { font-size: 12px; color: var(--muted); }
.grid-media { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px; }
.gm { display: grid; gap: 6px; text-decoration: none; min-width: 0; }
.gm .cover { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-md); overflow: hidden; background: var(--line-2); }
.gm .cover img { width: 100%; height: 100%; object-fit: cover; }
.gm-meta { display: grid; font-size: 12px; min-width: 0; }
.gm-meta .mut { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stats { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 13px; }
.stats svg { width: 13px; height: 13px; margin-left: 4px; }
.stats svg:first-child { margin-left: 0; color: var(--err); }

/* ---------- Parrilla ---------- */
.onair { display: grid; grid-template-columns: 1fr; gap: 18px; padding: 24px; border-radius: var(--r-lg); background: var(--ink); color: var(--paper); }
@media (min-width: 640px) { .onair { grid-template-columns: 1fr auto; align-items: center; } }
.onair .live { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #b9c4bc; }
.onair .live i { width: 9px; height: 9px; border-radius: 50%; background: var(--signal); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 3px rgba(255,90,31,.35); } }
.onair .clock { font: 800 clamp(68px, 15vw, 132px)/.86 var(--display); font-variation-settings: "wdth" 75; letter-spacing: -.04em; font-variant-numeric: tabular-nums; margin: 14px 0 12px; }
.onair .who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 18px; font-weight: 600; }
.onair .pf.tiktok { background: var(--paper); color: var(--ink); }
.onair .count { color: var(--signal); }
.onair .cap { color: #c9d2cb; margin: 12px 0 0; max-width: 60ch; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.onair .cap .tag { color: #9fd3b8; }
.onair.empty .clock { font-size: clamp(44px, 12vw, 80px); color: #8d998f; }
@media (prefers-reduced-motion: reduce) { .onair .live i { animation: none; } }

.vid { position: relative; flex: none; width: 112px; aspect-ratio: 9 / 16; border-radius: var(--r-md); overflow: hidden; background: #0d120f; display: block; }
.vid.lg { width: 168px; justify-self: center; }
.vid video, .vid img { width: 100%; height: 100%; object-fit: cover; background: #0d120f; }
.vid.none { display: grid; place-items: center; background: var(--line-2); color: var(--muted); font-size: 12px; text-align: center; padding: 8px; }
.vid .playic { position: absolute; inset: auto 8px 8px auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; }
.vid .playic svg { width: 14px; height: 14px; }
button.vid { border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }
button.vid video { pointer-events: none; }
button.vid .playic { inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; transition: background .15s; }
button.vid .playic svg { width: 20px; height: 20px; }
button.vid:hover .playic, button.vid:focus-visible .playic { background: var(--signal); }

.post { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.post-body { min-width: 0; display: grid; align-content: start; gap: 8px; }
.post-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.post-top .t { font: 700 20px/1 var(--display); font-variation-settings: "wdth" 80; }
.post.past .post-top .t { color: var(--muted); }
.post .why { margin: 0; font-size: 14px; color: var(--ink-2); background: #eef2ff; border-radius: var(--r-sm); padding: 8px 10px; }
.caption { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; font-size: 15px; line-height: 1.5; max-height: 220px; overflow: auto; }
.caption.empty { color: var(--muted); font-style: italic; }
.tag { color: var(--info); font-weight: 500; }
.cap-meta { font-size: 12px; margin-top: -4px; }
.post .err { color: var(--err); font-size: 14px; margin: 0; }
.tools { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 520px) { .vid { width: 92px; } .post { gap: 12px; } .tools .btn { min-height: 36px; } }

section.review, section.todo { margin-top: 24px; border-radius: var(--r-lg); padding: 18px 18px 6px; }
section.review { border: 2px solid var(--info); background: #f3f6ff; }
section.todo { border: 2px solid var(--signal); background: #fff7f3; }
.review h2, .todo h2 { font-size: 20px; margin-bottom: 4px; }
.review p.hint, .todo p.hint { margin: 0 0 6px; }
.review .post, .todo .post { border-top-color: rgba(23,33,27,.08); }
.review .caption, .todo .caption { background: #fff; }
.rev-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.day { margin-top: 28px; }
.day h3 { font: 650 15px var(--body); letter-spacing: 0; margin-bottom: 4px; }
.empty-state { padding: 40px 0; color: var(--muted); }
.empty-state strong { display: block; color: var(--ink); font-family: var(--display); font-size: 22px; margin-bottom: 6px; }

/* ---------- Métricas ---------- */
.acc-switch { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 18px; }
.acc-tab { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--sheet); cursor: pointer; font-weight: 600; white-space: nowrap; }
.acc-tab[aria-selected="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.acc-tab.app { padding-left: 14px; }
.acc-tab .app-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.tab-sep { flex: none; width: 1px; margin: 6px 2px; background: var(--line); }
h2.section .mut.sm { font: 500 13px var(--body); }
.app-tot { margin: -4px 0 12px; font-size: 14px; color: var(--muted); }
.app-tot b { color: var(--ink); font-weight: 650; }
.kpi-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .kpi-grid { grid-template-columns: repeat(4, 1fr); } }
.kpi { display: grid; gap: 2px; align-content: start; padding: 14px 16px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-md); }
.kpi .kt { font-size: 13px; color: var(--muted); }
.kpi .kv { font: 700 28px/1.15 var(--display); font-variation-settings: "wdth" 85; }
.kpi .ks { font-size: 12px; color: var(--muted); }
.ch-title { font-size: 17px; font-weight: 650; }
.ch-sub { margin: 2px 0 10px; font-size: 13px; color: var(--muted); }
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; height: 220px; overflow: visible; }
.chart.line svg { height: 200px; }
.chart .grid { stroke: var(--line-2); stroke-width: 1; }
.chart text { font: 11px var(--body); fill: var(--muted); }
.chart .bar path { fill: var(--ink-2); transition: fill .12s; }
.chart .bar.on path { fill: var(--signal); }
.chart .ln { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--sheet); pointer-events: none; }
.chart .tip { position: absolute; transform: translate(-50%, -100%); background: var(--ink); color: var(--paper); border-radius: 10px; padding: 8px 10px; font-size: 12px; line-height: 1.35; pointer-events: none; display: grid; gap: 1px; max-width: 240px; z-index: 5; white-space: normal; }
.chart .tip b { font-size: 13px; }
.chart .tip span { color: #c9d2cb; }
.chart-empty { display: grid; place-items: center; min-height: 160px; color: var(--muted); font-size: 14px; text-align: center; padding: 20px; border: 1px dashed var(--line); border-radius: var(--r-md); }
.card > .tbl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 16px 18px 10px; }
section.card { margin-top: 16px; }
.seg { display: flex; gap: 6px; }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-weight: 600; font-size: 12px; color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .r { text-align: right; white-space: nowrap; }
.tcell { display: flex; align-items: center; gap: 10px; min-width: 220px; max-width: 520px; }
.tcell > span { display: grid; min-width: 0; font-size: 13px; }
.tcell .one { font-size: 14px; color: var(--ink); }
.tthumb { width: 40px; height: 50px; border-radius: 8px; object-fit: cover; background: var(--line-2); flex: none; }
.minibar { display: inline-block; vertical-align: middle; height: 6px; width: calc(var(--w) * .5); max-width: 50px; min-width: 2px; margin-right: 8px; border-radius: 3px; background: var(--ink-2); opacity: .5; }
.icon-link { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--muted); }
.icon-link:hover { background: var(--paper); color: var(--ink); }
.icon-link svg { width: 16px; height: 16px; }

/* ---------- Cuentas ---------- */
.acc-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .acc-grid { grid-template-columns: repeat(2, 1fr); } }
.acc-card { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; display: grid; gap: 14px; }
.ac-top { display: flex; align-items: center; gap: 12px; }
.ac-top b { display: block; font-size: 17px; }
.ac-top .mut { font-size: 13px; }
.conn { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.conn.ok { background: #e6f4ec; color: var(--ok); }
.conn.warn { background: #fff3e0; color: var(--wait); }
.ac-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; padding: 12px 0; border-block: 1px solid var(--line-2); }
.ac-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.connect { display: grid; gap: 16px; }
@media (min-width: 860px) { .connect { grid-template-columns: 1fr 1fr; } }
.panel { background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; }
.panel h3 { display: flex; align-items: center; gap: 10px; font-size: 20px; margin-bottom: 6px; }
.panel p { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
.claude-link { margin-top: 16px; }
.claude-link .row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.claude-link input { flex: 1; min-width: 0; font-family: ui-monospace, monospace; font-size: 13px; }

/* ---------- Actividad ---------- */
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.evdot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); flex: none; display: inline-block; }
.ev.ok .evdot, .evdot.ok { background: var(--ok); }
.ev.bad .evdot, .evdot.bad { background: var(--err); }
.ev.claude .evdot, .evdot.claude { background: var(--signal); }
.ev.info .evdot, .evdot.info { background: var(--info); }
.ev.bad .grow { color: var(--err); }
.ev time { font-size: 13px; }
.big-links .li svg { width: 22px; height: 22px; color: var(--muted); flex: none; }

/* ---------- Ideas ---------- */
.idea { padding: 18px 0; border-top: 1px solid var(--line); }
.idea-top { display: flex; align-items: center; gap: 8px; }
.idea-top .t { font: 700 20px/1 var(--display); font-variation-settings: "wdth" 80; margin-right: 4px; }
.idea-top .acc { font-weight: 600; }
.idea .hook { font: 700 clamp(20px, 4.5vw, 26px)/1.15 var(--display); letter-spacing: -.015em; margin: 10px 0 12px; max-width: 30ch; }
.idea .frames { display: flex; gap: 10px; margin-bottom: 12px; overflow-x: auto; }
.idea .frames img { width: 132px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r-md); background: var(--line); border: 1px solid var(--line); }
.idea .why { color: var(--muted); font-size: 14px; margin: 0 0 8px; max-width: 64ch; }
.idea details { margin: 6px 0; }
.idea summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.idea .script { white-space: pre-wrap; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; margin-top: 6px; font-size: 15px; }
.idea .tools { margin-top: 12px; }

/* ---------- Subir ---------- */
.drop { position: relative; display: grid; place-items: center; text-align: center; min-height: 220px; padding: 28px; margin-bottom: 24px; border: 2px dashed var(--line); border-radius: var(--r-lg); background: var(--sheet); cursor: pointer; }
.drop:hover, .drop.over { border-color: var(--ink); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop .big { font: 700 26px/1.1 var(--display); margin-bottom: 6px; }
.drop.has { border-style: solid; border-color: var(--ink); }
.drop video { max-height: 320px; border-radius: var(--r-md); background: #000; }
.picked { display: grid; gap: 12px; justify-items: center; }
.accpick { display: grid; gap: 18px; margin-bottom: 24px; }
.accpick .group > span { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 8px; }
.accpick .opts { display: flex; flex-wrap: wrap; gap: 8px; }
.accpick label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--sheet); cursor: pointer; font-weight: 500; }
.accpick input { position: absolute; opacity: 0; pointer-events: none; }
.accpick input:checked + label { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.accpick input:focus-visible + label { outline: 3px solid var(--signal); outline-offset: 2px; }
.when { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.counter { text-align: right; color: var(--muted); font-size: 13px; margin-top: -10px; margin-bottom: 16px; }
.submit-bar { position: sticky; bottom: calc(76px + var(--safe-b)); padding: 12px 0; background: linear-gradient(to top, var(--paper) 70%, transparent); }
@media (min-width: 960px) { .submit-bar { bottom: 0; } }

/* ---------- Login ---------- */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(420px, 100%); }
.login .mark { display: flex; align-items: center; gap: 12px; margin-bottom: 40px; font: 700 26px/1 var(--display); }
.login .mark i { width: 16px; height: 16px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 6px rgba(255,90,31,.15); }
.login h1 { font-size: 40px; line-height: 1.02; font-weight: 700; font-variation-settings: "wdth" 80; margin-bottom: 10px; }
.login p { color: var(--muted); margin: 0 0 28px; }
.login .btn { width: 100%; margin-top: 8px; }
.login .err { color: var(--err); font-size: 14px; min-height: 20px; margin-top: 10px; }

/* ---------- Toasts y diálogo ---------- */
#toasts { position: fixed; left: 50%; bottom: calc(92px + var(--safe-b)); transform: translateX(-50%); z-index: 50; display: grid; gap: 8px; width: min(92vw, 420px); }
@media (min-width: 960px) { #toasts { bottom: 24px; } }
.toast { background: var(--ink); color: var(--paper); padding: 12px 16px; border-radius: var(--r-md); box-shadow: 0 10px 30px rgba(23,33,27,.25); animation: rise .2s ease-out; }
.toast.bad { background: var(--err); }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } }
dialog { border: 0; border-radius: var(--r-lg); padding: 24px; width: min(92vw, 400px); background: var(--sheet); color: var(--ink); }
dialog::backdrop { background: rgba(23,33,27,.45); }
dialog p { margin: 0 0 20px; font-size: 17px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.dialog-actions.wrap { flex-wrap: wrap; }
dialog.player { width: fit-content; max-width: 96vw; padding: 12px; background: #0d120f; }
.player video { display: block; height: min(78dvh, 760px); aspect-ratio: 9 / 16; max-width: calc(96vw - 24px); object-fit: contain; border-radius: var(--r-md); background: #000; }
.player .dialog-actions { margin-top: 10px; }
.player .btn.ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.loading { min-height: 60dvh; display: grid; place-items: center; color: var(--muted); }

/* ---------- Crear vídeo / encargos ---------- */
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.enc-strip { margin-bottom: 20px; }
section.greview + .enc-strip { margin-top: 24px; }
.enc-strip .rev-head { align-items: center; }
.enc-strip .see { font-size: 14px; color: var(--muted); }
.li.enc { align-items: flex-start; }
.li.enc .status { margin-top: 2px; }
.enc-res { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-2); }
.li.enc.error .enc-res { color: var(--err); }
.status.enc-en_cola { color: var(--muted); }
.status.enc-trabajando { color: var(--signal); }
.status.enc-listo { color: var(--ok); }
.status.enc-error { color: var(--err); }
.status.enc-cancelado { color: var(--muted); opacity: .7; }
.li.enc.trabajando .avatar::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--signal); border-right-color: transparent; animation: spin 1.1s linear infinite; z-index: 3; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .li.enc.trabajando .avatar::after { animation: none; } }
.crear { max-width: 680px; }
.crear .accpick { margin: 0; }
.accpick label .skill { font-size: 11px; font-weight: 500; opacity: .65; margin-left: 2px; }
.warn-text { color: var(--wait); }
.warn-text a { color: inherit; }
.n-pick .chip { min-width: 44px; min-height: 40px; font-weight: 600; }
.check { display: flex; align-items: center; gap: 10px; margin: 4px 0 20px; font-weight: 500; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--ink); }
.hint.center { text-align: center; margin: 8px 0 0; }
.ac-foot code, .crear code { font: 12px ui-monospace, monospace; background: var(--paper); padding: 1px 6px; border-radius: 5px; }
.crear .submit-bar { position: static; background: none; padding: 4px 0 0; }

/* ---------- Recursos ---------- */
.app-tab { padding: 0 14px; }
.app-tab .mut { font-weight: 500; font-size: 13px; }
.rec-drop { min-height: 140px; margin-bottom: 18px; }
.rec-drop .big { font-size: 21px; }
.rec-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin-top: 16px; }
.rec { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 12px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); }
.rec-thumb { position: relative; width: 96px; aspect-ratio: 9 / 16; border-radius: var(--r-md); overflow: hidden; background: var(--line-2); display: grid; place-items: center; }
.rec-thumb img, .rec-thumb video { width: 100%; height: 100%; object-fit: cover; }
.rec-thumb .playic { position: absolute; right: 6px; bottom: 6px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; }
.rec-thumb .playic svg { width: 12px; height: 12px; }
.rec-ext { font: 700 15px var(--display); color: var(--muted); }
.rec-body { display: grid; gap: 8px; align-content: start; min-width: 0; }
.rec-top { display: grid; min-width: 0; }
.rec-top .mut { font-size: 12px; }
.rec select { min-height: 36px; padding: 6px 10px; font-size: 14px; }
.rec textarea { min-height: 72px; font-size: 14px; padding: 8px 10px; }
.rec .btn { justify-self: start; }
.rec[data-tipo="logo"] .rec-thumb img, .rec[data-tipo="mascota"] .rec-thumb img { object-fit: contain; padding: 8px; }
.gap-pick { flex-wrap: wrap; } .gap-pick .chip { white-space: nowrap; min-height: 38px; }
.status.enc-esperando { color: var(--info); }
.check small { display: block; font-weight: 400; font-size: 13px; }
.check { align-items: flex-start; } .check input { margin-top: 2px; flex: none; }
.enc-prog { display: grid; gap: 5px; margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.enc-prog.wait { color: var(--muted); }
.ep-bar { display: block; height: 6px; border-radius: 3px; background: var(--line-2); overflow: hidden; max-width: 320px; }
.ep-bar i { display: block; height: 100%; background: var(--signal); border-radius: 3px; transition: width .4s ease; }
@media (max-width: 560px) { .li.enc { flex-wrap: wrap; } .li.enc .grow { flex: 1 1 calc(100% - 52px); } .li.enc .status { margin-left: 48px; } }

/* ---------- Revisión de guiones (Parrilla e Ideas) ---------- */
section.greview { margin-top: 20px; border: 2px solid var(--signal); background: #FFF4EE; border-radius: var(--r-lg); padding: 18px 18px 8px; }
section.greview h2 { font: 700 clamp(20px, 3.6vw, 24px)/1.15 var(--display); margin: 0; }
section.greview .hint { margin: 6px 0 4px; max-width: 60ch; }
.gcard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); }
section.greview .gcard { border-top-color: #F6D3C2; }
.g-frames { display: flex; gap: 8px; }
.g-frames img { width: 112px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--line); display: block; }
.g-frames.none { width: 112px; aspect-ratio: 9 / 16; border: 1px dashed var(--line); border-radius: var(--r-md); align-items: center; justify-content: center; color: var(--muted); font-size: 13px; text-align: center; padding: 8px; }
.gcard .hook { font: 700 clamp(18px, 3.4vw, 22px)/1.2 var(--display); letter-spacing: -.01em; margin: 8px 0 6px; }
.g-sum { margin: 0 0 8px; font-size: 16px; line-height: 1.45; color: var(--ink-2); max-width: 62ch; }
.gcard details { margin: 4px 0 2px; }
.gcard summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--muted); }
.gcard .script { white-space: pre-wrap; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; margin-top: 6px; font-size: 14px; }
.gcard .script.cap { color: var(--muted); }
.gcard .tools { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.gstat { font-size: 13px; font-weight: 600; color: var(--ok); }
@media (max-width: 560px) {
  .gcard { grid-template-columns: minmax(0, 1fr); }
  .g-frames a { flex: 1 1 0; max-width: 160px; }
  .g-frames img { width: 100%; }
  .g-frames.none { display: none; }
  .gcard .tools .btn { flex: 1; }
}

/* ---------- Carruseles ---------- */
.vid .nphotos { position: absolute; right: 6px; top: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 600; }
.vid .nphotos svg { width: 12px; height: 12px; }
.gallery { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; width: min(90vw, 440px); }
.gallery figure { margin: 0; flex: none; width: 100%; scroll-snap-align: center; position: relative; }
.gallery img { display: block; width: 100%; max-height: 76dvh; object-fit: contain; border-radius: var(--r-md); background: #000; }
.gallery figcaption { position: absolute; left: 10px; top: 10px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; }
.accpick label.off { opacity: .4; cursor: not-allowed; }
.check.share { margin-top: 12px; }
.tt-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#tt-hint { margin: 10px 0 0; }

/* ---------- Oficial / creadora ---------- */
.ttag { display: inline-block; vertical-align: 2px; margin: 0 8px 0 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .01em; }
.ttag.ofi { background: var(--ink); color: var(--paper); }
.ttag.cre { background: #FCE7F3; color: #9D174D; }
.acc-sub { font: 600 14px/1.2 var(--body); color: var(--muted); margin: 14px 0 8px; }

/* ---------- Crear: cuentas como tarjetas ---------- */
.accpick .acc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.accpick label.acc-card-pick { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--sheet); color: var(--ink); cursor: pointer; transition: border-color .12s, background .12s, box-shadow .12s; }
.accpick label.acc-card-pick:hover { border-color: var(--ink-2); }
.accpick input:checked + label.acc-card-pick { border-color: var(--signal); background: #FFF4EE; color: var(--ink); box-shadow: 0 0 0 3px rgba(255, 90, 31, .15); }
.acc-card-pick .ap-txt { display: grid; min-width: 0; flex: 1; line-height: 1.25; }
.acc-card-pick .ap-txt b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-card-pick .ap-txt small { color: var(--muted); font-size: 12.5px; }
.acc-card-pick .ap-check { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; transition: background .12s, border-color .12s; }
.acc-card-pick .ap-check svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.accpick input:checked + label .ap-check { background: var(--signal); border-color: var(--signal); }
.accpick input:checked + label .ap-check svg { opacity: 1; }
.accpick label.acc-card-pick.off { opacity: .4; cursor: not-allowed; }
.ap-sum { margin: 10px 0 0; font-size: 14px; }

/* ---------- Crear: fecha y hora ---------- */
.wpick { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--sheet); padding: 14px; display: grid; gap: 12px; }
.wp-row { display: flex; gap: 8px; flex-wrap: wrap; }
.wday { position: relative; display: grid; justify-items: center; gap: 2px; width: 62px; padding: 8px 0; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff; color: var(--ink); cursor: pointer; font: inherit; }
.wday small { font-size: 12px; color: var(--muted); }
.wday small::first-letter { text-transform: uppercase; }
.wday b { font: 700 20px/1 var(--display); }
.wday[aria-pressed="true"], .wday.other.on { border-color: var(--signal); background: #FFF4EE; }
.wday[aria-pressed="true"] small, .wday.other.on small { color: var(--signal); font-weight: 600; }
.wday.other { width: 78px; overflow: hidden; }
.wday.other input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.wday.other input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.wp-row.times .chip { min-height: 40px; font-variant-numeric: tabular-nums; }
.wp-row.times .chip[aria-pressed="true"] { background: #FFF4EE; border-color: var(--signal); color: var(--ink); font-weight: 700; }
.wcustom { display: inline-flex; align-items: center; gap: 2px; padding: 0 8px; min-height: 40px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-weight: 600; }
.wcustom.on { border-color: var(--signal); background: #FFF4EE; }
.wcustom select { border: 0; background: transparent; font: inherit; font-variant-numeric: tabular-nums; padding: 4px 2px; cursor: pointer; }
.wp-sum { margin: 0; font-size: 15px; }
.wp-sum.bad { color: var(--err); font-weight: 600; }
.wp-sum b::first-letter { text-transform: uppercase; }
@media (max-width: 560px) { .wday { width: calc((100% - 24px) / 4); } .wday.other { width: calc((100% - 24px) / 4); } }

/* ---------- Métricas v2 ---------- */
.mhero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 18px; padding: 22px 24px; border-radius: var(--r-lg); background: var(--ink); color: var(--paper); }
@media (min-width: 900px) { .mhero { grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.6fr); align-items: center; } }
.mh-num { display: grid; gap: 6px; align-content: center; }
.mh-l { font-size: 14px; opacity: .7; }
.mh-v { font: 800 clamp(56px, 9vw, 96px)/.95 var(--display); font-variation-settings: "wdth" 80; letter-spacing: -.02em; }
.mh-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; font-size: 14px; }
.mh-pills .mut { color: var(--paper); opacity: .6; }
.dpill { display: inline-flex; gap: 6px; align-items: baseline; padding: 5px 12px; border-radius: 999px; background: rgba(255,255,255,.1); }
.dpill b { font: 700 16px var(--display); }
.dpill.up b { color: #6EE7A8; } .dpill.down b { color: #FF8A7A; }
.mhero .chart { color: var(--paper); }
.mhero .chart .grid { stroke: rgba(255,255,255,.12); }
.mhero .chart text { fill: rgba(255,255,255,.55); }
.mhero .chart .ln { stroke: var(--signal); stroke-width: 3; }
.mhero .chart-empty { color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.2); }
.mh-share { display: grid; gap: 10px; }
.sh-row { display: grid; grid-template-columns: 28px minmax(90px, 160px) minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.sh-n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-bar { height: 10px; border-radius: 6px; background: rgba(255,255,255,.12); overflow: hidden; }
.sh-bar i { display: block; height: 100%; border-radius: 6px; background: var(--signal); }
.sh-row b { font: 700 18px var(--display); }

.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); margin-top: 16px; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.strip .st { display: grid; gap: 2px; padding: 18px 20px; border-left: 1px solid var(--line-2); }
.strip .st:first-child { border-left: 0; }
.strip .sv { font: 800 34px/1 var(--display); font-variation-settings: "wdth" 85; }
.strip .sl { font-size: 13px; color: var(--muted); }
.strip .st.na .sv { color: var(--line); }
.foot { font-size: 12.5px; margin: 8px 2px 0; }

.perf { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.pfm { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--r-md); background: var(--sheet); border: 1px solid var(--line); }
.pfm .pl { font-size: 13px; color: var(--muted); }
.pfm .pv { font: 800 30px/1.05 var(--display); font-variation-settings: "wdth" 85; }
.trd { font-size: 13px; font-weight: 700; }
.trd.up { color: var(--ok); } .trd.down { color: var(--err); } .trd.eq { color: var(--muted); font-weight: 500; }

.mgrid { display: grid; gap: 14px; margin: 22px 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .mgrid { grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.6fr); } }
.mgrid .card { margin: 0; }
.bestcard { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 16px; border-radius: var(--r-lg); background: #FFF4EE; border: 2px solid var(--signal); color: var(--ink); text-decoration: none; align-items: start; }
.bestcard img, .bc-ph { width: 120px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r-md); background: var(--line); display: block; }
.bc-body { display: grid; gap: 6px; min-width: 0; }
.bc-tag { justify-self: start; white-space: nowrap; font-size: 12px; font-weight: 700; color: #fff; background: var(--signal); padding: 3px 10px; border-radius: 999px; }
.bc-v { font: 800 44px/1 var(--display); font-variation-settings: "wdth" 80; }
.bc-v small { font: 600 15px var(--body); color: var(--muted); }
.bc-meta, .bc-worst { font-size: 13px; color: var(--muted); }
.bc-cap { font-size: 14px; line-height: 1.35; }
.bc-x { justify-self: start; font-weight: 700; color: var(--ok); font-size: 14px; }
.bc-worst { border-top: 1px solid #F6D3C2; padding-top: 8px; margin-top: 4px; }

.chart .bar.hi path { fill: var(--ink-2); }
.chart .bar.lo path { fill: #C9D0C7; }
.chart .bar.top path { fill: var(--signal); }
.chart .bar.on path { fill: var(--signal); opacity: .8; }
.chart .avg { stroke: var(--ink); stroke-dasharray: 4 4; stroke-width: 1; opacity: .5; }
.chart .avg-l { font-size: 11px; fill: var(--muted); }

.mtbl tr.top td { background: #F3FAF5; }
.topb { color: var(--ok); }
.lk { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.lkbar { display: inline-block; height: 8px; width: calc(var(--w) * .7px); max-width: 70px; min-width: 3px; border-radius: 4px; background: var(--signal); opacity: .85; }
.mtbl tr:not(.top) .lkbar { background: var(--ink-2); opacity: .35; }
.vs { font-size: 13px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.vs.up { color: var(--ok); background: #E6F4EC; } .vs.down { color: var(--err); background: #FBE9E7; } .vs.eq { color: var(--muted); }
@media (max-width: 560px) {
  .mhero { padding: 18px; }
  .strip .st { padding: 14px; border-left: 0; border-top: 1px solid var(--line-2); }
  .strip { grid-template-columns: repeat(2, 1fr); }
  .strip .st:nth-child(-n+2) { border-top: 0; }
  .strip .st:nth-child(even) { border-left: 1px solid var(--line-2); }
  .strip .sv { font-size: 28px; }
  .bestcard { grid-template-columns: 90px minmax(0, 1fr); }
  .bestcard img, .bc-ph { width: 90px; }
  .sh-row { grid-template-columns: 28px minmax(70px, 110px) minmax(0, 1fr) auto; }
}
.acc-switch { max-width: 100%; min-width: 0; scrollbar-width: none; }
.acc-switch::-webkit-scrollbar { display: none; }
#main { min-width: 0; }

/* Descartar guion con motivo */
.dpanel { margin-top: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--sheet); }
.dpanel .dp-q { margin: 0 0 10px; font-weight: 600; }
.dpanel .dp-q .mut { display: block; font-weight: 400; font-size: 14px; }
.dp-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.dp-note { width: 100%; margin-top: 10px; box-sizing: border-box; font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); resize: vertical; }
.dp-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

/* Protagonismo de la app */
.nivel-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 640px) { .nivel-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nivel { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; min-height: 44px; }
.nivel b { font-size: 15px; }
.nivel small { font-size: 13px; line-height: 1.35; color: var(--muted); }
.nivel .nv-bars { display: flex; align-items: flex-end; gap: 3px; height: 18px; margin-bottom: 4px; }
.nivel .nv-bars i { width: 6px; border-radius: 2px; background: var(--line); }
.nivel .nv-bars i:nth-child(1) { height: 6px; } .nivel .nv-bars i:nth-child(2) { height: 10px; }
.nivel .nv-bars i:nth-child(3) { height: 14px; } .nivel .nv-bars i:nth-child(4) { height: 18px; }
.nivel .nv-bars i.on { background: var(--ink-2); }
.nivel[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.nivel[aria-checked="true"] .nv-bars i.on { background: var(--signal); }

/* Cambiar hora (diálogo con el selector visual) */
dialog.whendlg { width: min(94vw, 560px); }
.wd-title { margin: 0 0 12px; font: 700 22px/1.2 var(--display); }
.wd-who { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.wd-who span { display: grid; line-height: 1.3; }
.wd-who small { color: var(--muted); font-size: 14px; }
dialog.whendlg .wpick { background: var(--paper); }
dialog.whendlg .dialog-actions { margin-top: 16px; }
dialog.whendlg .btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Guion y bocetos en cada vídeo de la parrilla */
.pguion { margin: 8px 0 4px; }
.pguion summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--muted); }
.pguion[open] summary { color: var(--ink); }
.pg-frames { display: flex; gap: 8px; margin: 10px 0 6px; overflow-x: auto; }
.pg-frames img { height: 160px; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); display: block; }
.pg-sum { margin: 6px 0; font-size: 15px; }
.pguion .script { white-space: pre-wrap; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; margin-top: 6px; font-size: 14px; max-height: 320px; overflow: auto; }
.pg-why { font-size: 14px; margin: 6px 0 0; }

/* Parrilla ordenada por cuenta */
.par-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 36px 0 6px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.par-bar .filters { margin: 0; }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--sheet); border: 1px solid var(--line); }
.seg .chip { border: 0; background: transparent; min-height: 34px; padding: 0 14px; }
.seg .chip[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(23,33,27,.15); font-weight: 700; }
.par-bar + .day h3, .par-bar + .day .lane-h { margin-top: 14px; }
.lane { margin: 10px 0 18px; }
.lane-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.lane-h b { font-size: 16px; }
.lane-h .mut { font-size: 14px; }
.ptiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ptile { display: flex; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--sheet); min-width: 0; }
.vid.sm { width: 64px; border-radius: var(--r-sm); }
.vid.sm .playic { width: 32px; height: 32px; }
button.vid.sm .playic { inset: 50% auto auto 50%; transform: translate(-50%, -50%); }
.vid.sm .playic svg { width: 14px; height: 14px; }
.vid.sm .nphotos { transform: scale(.8); transform-origin: top right; }
.vid.sm.none span { font-size: 10px; padding: 4px; }
.tile-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; text-align: left; border: 0; background: none; padding: 0; color: var(--ink); font: inherit; cursor: pointer; }
.tile-body:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; border-radius: 6px; }
.tile-when { display: flex; align-items: baseline; gap: 8px; }
.tile-when b { font: 700 20px/1 var(--display); }
.tile-when small { color: var(--muted); font-size: 13px; }
.tile-when small::first-letter { text-transform: uppercase; }
.tile-title { font-size: 15px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tile-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: auto; }
.tile-meta .fmt { font-size: 12px; font-weight: 600; color: var(--muted); }
.ptile:hover { border-color: var(--ink-2); }
.acc-sec .lane-h { margin-top: 6px; }
.rev-lane { margin-top: 14px; }
.rev-lane > .lane-h { padding-bottom: 6px; border-bottom: 1px solid var(--line); }
dialog.pdlg { width: min(94vw, 680px); max-height: 90vh; overflow: auto; }
dialog.pdlg .post { border: 0; padding: 0; }
@media (max-width: 520px) { .ptiles { grid-template-columns: 1fr; } }

/* Todos los días (rutinas) */
.chip.rep[aria-pressed="true"] { background: var(--signal); border-color: var(--signal); color: #fff; }
.rep-lead { margin: 0 0 8px; font-weight: 600; }
.li.rutina.off { opacity: .6; }

/* Análisis semanal */
.inf-card { margin: 4px 0 22px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--sheet); }
.inf-card h2 { margin: 0; font: 700 20px/1.2 var(--display); }
.inf-card.empty p { margin: 6px 0 0; }
.inf-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.inf-res { font-size: 15px; line-height: 1.55; max-width: 75ch; }
.inf-acc { margin-top: 12px; }
.inf-acc summary { cursor: pointer; font-weight: 600; }
.inf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 12px; }
.inf-c { padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); }
.inf-c p { margin: 0 0 8px; font-size: 14px; }
.inf-l { margin-top: 8px; font-size: 14px; }
.inf-l b { font-size: 13px; }
.inf-l.ok b { color: #1f8a4c; }
.inf-l.ko b { color: #c2414b; }
.inf-l ul { margin: 4px 0 0; padding-left: 18px; }

/* =========================================================
   Tema iOS 26 · Liquid Glass
   Capa final: fuente del sistema, fondo con degradado suave,
   superficies de vidrio translúcido y radios grandes.
   ========================================================= */
:root {
  --paper: #F2F3F7;
  --sheet: rgba(255, 255, 255, .62);
  --ink: #1C1C1E;
  --ink-2: #3A3A3C;
  --muted: #6E6E73;
  --line: rgba(60, 60, 67, .14);
  --line-2: rgba(60, 60, 67, .08);
  --ok: #1E9E57;
  --err: #E5372C;
  --info: #0A6CFF;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --glass: rgba(255, 255, 255, .58);
  --glass-strong: rgba(255, 255, 255, .78);
  --glass-edge: rgba(255, 255, 255, .75);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, .85) inset, 0 10px 34px rgba(17, 24, 39, .07), 0 1px 2px rgba(17, 24, 39, .05);
  --blur: blur(24px) saturate(180%);
}
body {
  background:
    radial-gradient(1100px 760px at -5% -10%, #FFE2D0 0%, rgba(255, 226, 208, 0) 60%),
    radial-gradient(1000px 720px at 105% -5%, #D9E6FF 0%, rgba(217, 230, 255, 0) 58%),
    radial-gradient(900px 700px at 50% 110%, #E3F5EA 0%, rgba(227, 245, 234, 0) 62%),
    #F2F3F7;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.01em;
}
h1, h2, h3, h4 { font-family: var(--display); letter-spacing: -.025em; }
.page-title { font-weight: 800; font-variation-settings: normal; letter-spacing: -.035em; }
.login h1 { font-variation-settings: normal; font-weight: 800; letter-spacing: -.035em; }

/* Superficies de vidrio */
.card, .kpi, .kpi-card, .tile, .ptile, .acc-tab, .inf-card, .wpick, .dpanel, .nivel, .notice,
.greview .gcard, .chart-empty, .empty-state.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
}
.card { border-radius: var(--r-lg); }
.kpi, .tile, .ptile, .kpi-card { border-radius: 22px; }
.caption, .pguion .script, .dp-note { background: rgba(255, 255, 255, .7); border-color: var(--line); border-radius: 14px; }
.notice { color: #6b4e14; background: rgba(255, 244, 222, .75); }

/* Barra de pestañas flotante (móvil) */
.rail {
  inset: auto 12px calc(10px + var(--safe-b)) 12px;
  padding: 6px; border-radius: 30px; border: 1px solid var(--glass-edge);
  background: rgba(255, 255, 255, .66);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 14px 40px rgba(17, 24, 39, .14);
}
.rail a { border-radius: 22px; padding: 7px 12px; transition: background .2s, color .2s; }
.rail a[aria-current="page"] { background: rgba(255, 255, 255, .9); box-shadow: 0 2px 10px rgba(17, 24, 39, .08); color: var(--ink); }
main { padding-bottom: calc(110px + var(--safe-b)); }

/* Barra lateral de vidrio (escritorio) */
@media (min-width: 960px) {
  .shell { grid-template-columns: 264px 1fr; }
  .rail {
    position: sticky; top: 14px; inset: auto; height: calc(100dvh - 28px); margin: 14px 0 14px 14px;
    padding: 22px 12px; border-radius: 30px; border: 1px solid var(--glass-edge);
    background: rgba(255, 255, 255, .55);
  }
  .brand { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; }
  .rail a, .rail a.desk { border-radius: 14px; padding: 9px 12px; }
  .rail a:hover { background: rgba(255, 255, 255, .55); }
  .rail .nav-group { display: block; margin: 16px 12px 6px; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
  main { padding: 40px 44px 64px; }
}
@media (max-width: 959px) { .rail .nav-group { display: none; } }

/* Botones, chips y campos */
.btn { border-radius: 999px; font-weight: 600; letter-spacing: -.01em; transition: transform .12s, background .2s, box-shadow .2s; }
.btn:active { transform: scale(.97); }
.btn:not(.ghost):not(.signal):not(.danger) { background: var(--ink); border-color: var(--ink); }
.btn.ghost { background: rgba(255, 255, 255, .6); border-color: var(--line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.btn.ghost:hover { background: rgba(255, 255, 255, .9); border-color: rgba(60, 60, 67, .22); }
.btn.signal { box-shadow: 0 6px 18px rgba(255, 90, 31, .28); }
.chip { background: rgba(255, 255, 255, .55); border-color: var(--line); transition: background .2s; }
.chip:hover { background: rgba(255, 255, 255, .9); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.seg { background: rgba(118, 118, 128, .12); border: 0; box-shadow: none; }
.seg .chip[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 3px 1px rgba(0, 0, 0, .04); }
input[type="text"], input[type="email"], input[type="password"], input[type="datetime-local"], input[type="date"], input[type="search"], textarea, select {
  background: rgba(255, 255, 255, .72); border-color: var(--line); border-radius: 14px;
}
input:focus, textarea:focus, select:focus { border-color: rgba(255, 90, 31, .6); box-shadow: 0 0 0 4px rgba(255, 90, 31, .14); }

/* Diálogos tipo hoja de iOS */
dialog {
  border-radius: 30px; background: var(--glass-strong);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-edge); box-shadow: 0 30px 80px rgba(17, 24, 39, .25);
}
dialog::backdrop { background: rgba(17, 24, 39, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.player { background: rgba(10, 10, 12, .9); }

/* Bloque "Lo próximo" */
.onair { border-radius: 30px; background: linear-gradient(140deg, #1C1C1E 0%, #2A2A31 100%); box-shadow: 0 20px 50px rgba(17, 24, 39, .22); }
.vid { border-radius: 16px; }
.vid.sm { border-radius: 12px; }
.status { border-width: 0; background: rgba(118, 118, 128, .12); }
.avatar img, .avatar .ph { border-radius: 50%; }

/* Calendario · estilo iOS */
.glassbox { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); border-radius: 28px; }
.glasspill { display: inline-flex; align-items: center; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.62); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); }
.glasspill button { all: unset; cursor: pointer; height: 32px; min-width: 32px; padding: 0 10px; display: grid; place-items: center; border-radius: 999px; font-size: 20px; line-height: 1; color: var(--ink); transition: background .15s; }
.glasspill button.hoy { font-size: 14px; font-weight: 600; }
.glasspill button:hover { background: rgba(255,255,255,.9); }
.glasspill button:focus-visible { outline: 2px solid var(--signal); }
.cal-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.cal-t .page-title .mut { color: var(--signal); font-weight: 800; }
.cal-ctl { display: flex; gap: 10px; align-items: center; }
.cal-accs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 10px; margin-bottom: 8px; scrollbar-width: none; }
.cal-accs::-webkit-scrollbar { display: none; }
.cacc { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 4px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap;
  background: rgba(255,255,255,.62); border: 1px solid var(--glass-edge); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 55%, transparent); transition: opacity .2s, box-shadow .2s; }
.cacc .avatar .pf { display: none; }
.cacc[aria-pressed="false"] { opacity: .42; box-shadow: none; }
.cacc:focus-visible { outline: 2px solid var(--signal); }
.cal-mes { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 18px; align-items: start; }
.mm-box { padding: 16px 14px 12px; position: sticky; top: 20px; }
.mm-wd, .mm-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.mm-wd span { text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); padding-bottom: 8px; }
.mm-grid { row-gap: 2px; }
.mm-d { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0 6px; border-radius: 14px; transition: background .15s; }
.mm-d .num { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; font-size: 16px; font-weight: 500; transition: background .2s, color .2s; }
.mm-d:hover .num { background: rgba(118,118,128,.12); }
.mm-d.out { opacity: .32; }
.mm-d.today .num { color: var(--signal); font-weight: 700; }
.mm-d.sel .num { background: var(--ink); color: #fff; font-weight: 700; }
.mm-d.sel.today .num { background: var(--signal); color: #fff; }
.mm-d:focus-visible .num { outline: 2px solid var(--signal); }
.mm-dots { display: flex; gap: 2px; height: 5px; }
.mm-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--c); }
.mm-legend { display: flex; justify-content: center; font-size: 12px; color: var(--muted); padding-top: 8px; }
.mm-legend .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: conic-gradient(#E4572E, #2F7DE1, #1E9E57, #C2417A, #E4572E); margin-right: 6px; vertical-align: middle; }
.agenda { padding: 18px 18px 14px; min-height: 360px; }
.ag-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 2px 4px 14px; }
.ag-h h2 { font-size: 24px; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.ag-h p { margin: 2px 0 0; font-size: 14px; }
.ag-n { min-width: 34px; height: 34px; padding: 0 10px; border-radius: 999px; display: grid; place-items: center; background: rgba(118,118,128,.12); font-weight: 700; }
.ag-list { display: flex; flex-direction: column; gap: 8px; }
.ag-ev { all: unset; cursor: pointer; display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: stretch; }
.ag-ev:focus-visible .ag-card { outline: 2px solid var(--signal); }
.ag-t { font-size: 14px; font-weight: 700; padding-top: 12px; color: var(--ink-2); }
.ag-card { display: flex; gap: 12px; align-items: center; padding: 8px 12px 8px 8px; border-radius: 18px; position: relative; overflow: hidden;
  background: color-mix(in srgb, var(--c) 9%, rgba(255,255,255,.82)); border: 1px solid rgba(255,255,255,.8); transition: transform .15s, box-shadow .2s; }
.ag-card::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--c); }
.ag-ev:hover .ag-card { box-shadow: 0 8px 24px rgba(17,24,39,.08); transform: translateY(-1px); }
.ag-th { width: 44px; height: 60px; flex: none; border-radius: 10px; overflow: hidden; background: rgba(118,118,128,.14); display: grid; place-items: center; margin-left: 6px; }
.ag-th img, .ag-th video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ag-th svg { width: 18px; height: 18px; color: var(--muted); }
.ag-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ag-acc { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.ag-acc .pf svg { width: 12px; height: 12px; }
.ag-title { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ag-st { font-size: 12.5px; color: var(--ink-2); }
.ag-ev.st-por_aprobar .ag-st, .ag-ev.st-guion .ag-st { color: var(--info); font-weight: 600; }
.ag-ev.st-error .ag-st { color: var(--err); font-weight: 600; }
.ag-ev.st-publicado .ag-card { opacity: .78; }
.ag-ev.idea .ag-card { background: transparent; border: 1.5px dashed color-mix(in srgb, var(--c) 55%, white); }
.ag-now { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--err); }
.ag-now i { height: 2px; background: var(--err); border-radius: 2px; position: relative; }
.ag-now i::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--err); }
.ag-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 48px 12px; color: var(--muted); }
.ag-empty b { color: var(--ink); font-size: 17px; }
.ag-empty .btn { margin-top: 8px; }
/* Semana: rejilla horaria */
.wk { padding: 10px 12px 12px; overflow: hidden; }
.wk-head, .wk-body { display: grid; grid-template-columns: 52px repeat(7, minmax(0, 1fr)); }
.wk-head { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.wk-dh { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; border-radius: 14px; }
.wk-dh small { font-size: 12px; color: var(--muted); font-weight: 600; }
.wk-dh b { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; font-size: 17px; }
.wk-dh.today b { background: var(--signal); color: #fff; }
.wk-dh.sel:not(.today) b { background: var(--ink); color: #fff; }
.wk-body { position: relative; margin-top: 6px; }
.wk-hours { grid-column: 1; position: relative; }
.wk-hours span { position: absolute; left: 0; transform: translateY(-50%); font-size: 11px; color: var(--muted); }
.wk-line { position: absolute; left: 52px; right: 0; height: 1px; background: var(--line-2); }
.wk-col { grid-row: 1; position: relative; border-left: 1px solid var(--line-2); }
.wk-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--err); z-index: 2; }
.wk-now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--err); }
.wk-ev { all: unset; cursor: pointer; position: absolute; right: 3px; margin-left: 3px; height: 40px; box-sizing: border-box; padding: 4px 6px 4px 8px; border-radius: 9px; font-size: 11px; line-height: 1.25; overflow: hidden; z-index: 1;
  background: color-mix(in srgb, var(--c) 18%, white); border-left: 3px solid var(--c); box-shadow: 0 1px 3px rgba(17,24,39,.08); transition: transform .12s, z-index 0s; }
.wk-ev:hover, .wk-ev:focus-visible { transform: scale(1.04); z-index: 3; outline: none; box-shadow: 0 6px 18px rgba(17,24,39,.16); }
.wk-ev b { display: block; }
.wk-ev span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.wk-ev.idea { background: rgba(255,255,255,.7); border: 1.5px dashed var(--c); }
.wk-ev.st-publicado { opacity: .7; }
.cal-sem-mob { display: none; }
.wstrip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 6px; margin-bottom: 12px; border-radius: 24px; background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); }
.ws-d { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0; border-radius: 18px; transition: background .15s; }
.ws-d small { font-size: 11px; color: var(--muted); font-weight: 600; }
.ws-d b { font-size: 18px; }
.ws-d.today b { color: var(--signal); }
.ws-d.sel { background: var(--ink); }
.ws-d.sel small, .ws-d.sel b { color: #fff; }
@media (max-width: 900px) {
  .cal-mes { grid-template-columns: 1fr; }
  .mm-box { position: static; }
  .cal-sem-desk { display: none; }
  .cal-sem-mob { display: block; }
  .cal-top { align-items: flex-start; }
  .mm-d .num { width: 38px; height: 38px; }
}

/* Portada pública · iOS 27 */
html { scroll-behavior: smooth; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lp { --lg: linear-gradient(160deg, rgba(255,255,255,.82), rgba(255,255,255,.5)); --rim: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.55), 0 18px 50px rgba(17,24,39,.09), 0 2px 6px rgba(17,24,39,.05);
  max-width: 1180px; margin: 0 auto; padding: 0 22px 40px; position: relative; }
.lp::before { content: ""; position: fixed; inset: -20vh -10vw auto; height: 90vh; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 50% at 18% 30%, rgba(255,140,90,.35), transparent 70%), radial-gradient(38% 46% at 82% 20%, rgba(90,140,255,.28), transparent 70%), radial-gradient(30% 40% at 60% 70%, rgba(120,220,170,.22), transparent 70%);
  filter: blur(20px); }
.lp-top { position: sticky; top: 12px; z-index: 20; display: flex; align-items: center; gap: 18px; margin: 12px auto 0; padding: 9px 10px 9px 18px; border-radius: 999px; max-width: 1180px;
  background: var(--lg); -webkit-backdrop-filter: blur(28px) saturate(190%); backdrop-filter: blur(28px) saturate(190%); box-shadow: var(--rim); transition: max-width .35s cubic-bezier(.2,.8,.2,1), padding .35s; }
.lp-top.tight { max-width: 760px; }
.lp-brand { display: flex; align-items: center; gap: 10px; font: 800 19px/1 var(--display); letter-spacing: -.03em; color: var(--ink); text-decoration: none; }
.lp-brand i { width: 12px; height: 12px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 5px rgba(255,90,31,.16); }
.lp-links { display: flex; gap: 20px; margin-left: auto; }
.lp-links a { color: var(--ink-2); text-decoration: none; font-size: 14.5px; font-weight: 500; }
.lp-links a:hover { color: var(--ink); }
.lp-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding: 70px 0 60px; }
.lp-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--lg); box-shadow: var(--rim); padding: 6px 12px; border-radius: 999px; margin-bottom: 22px; }
.lp-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(30,158,87,.16); }
.lp-hero h1 { font-size: clamp(38px, 5vw, 64px); line-height: 1; font-weight: 800; letter-spacing: -.05em; margin: 0 0 22px; max-width: 15ch; text-wrap: balance; }
.lp-lead { font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 44ch; margin: 0 0 28px; }
.lp-wait { display: flex; flex-wrap: wrap; gap: 8px; max-width: 470px; padding: 6px; border-radius: 999px; background: var(--lg); box-shadow: var(--rim); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.lp-wait input { flex: 1 1 200px; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 14px; min-height: 46px; font-size: 16px; outline: none; }
.lp-wait .btn { min-height: 46px; padding: 0 22px; }
.lp-msg { flex-basis: 100%; margin: 0; padding: 0 14px 6px; font-size: 14px; }
.lp-msg:empty { display: none; }
.lp-msg.ok { color: var(--ok); }
.lp-msg.bad { color: var(--err); }
.lp-note { font-size: 14px; color: var(--muted); margin: 14px 0 0 6px; }
/* Móvil de la demo */
.lp-stage { display: grid; place-items: center; }
.lp-phone { width: 320px; height: 640px; border-radius: 54px; padding: 12px; position: relative;
  background: linear-gradient(145deg, #2b2b30, #0f0f12); box-shadow: 0 0 0 2px #3a3a40, 0 50px 100px rgba(17,24,39,.3), 0 10px 30px rgba(17,24,39,.2); }
.ph-island { position: absolute; top: 22px; left: 50%; width: 96px; height: 28px; border-radius: 20px; background: #000; transform: translateX(-50%); z-index: 3; }
.ph-screen { height: 100%; border-radius: 43px; overflow: hidden; position: relative; padding: 62px 16px 86px;
  background: radial-gradient(120% 60% at 0% 0%, #FFE3D3, transparent 60%), radial-gradient(100% 60% at 100% 10%, #DCE7FF, transparent 60%), #F2F2F7; }
.ph-stage { animation: phIn .45s cubic-bezier(.2,.8,.2,1); }
@keyframes phIn { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.ph-h { font: 800 26px/1.1 var(--display); letter-spacing: -.035em; margin: 0 0 12px; }
.ph-l { font-size: 12px; font-weight: 600; color: var(--muted); margin: 14px 0 7px; }
.ph-accs { display: flex; flex-wrap: wrap; gap: 6px; }
.ph-acc { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 7px 11px; border-radius: 999px; background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px rgba(60,60,67,.12); transition: background .2s, color .2s, transform .15s; }
.ph-acc i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.ph-acc[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.ph-step { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px rgba(60,60,67,.1); }
.ph-step button { all: unset; cursor: pointer; width: 34px; height: 30px; display: grid; place-items: center; border-radius: 999px; font-size: 18px; }
.ph-step button:hover { background: rgba(118,118,128,.14); }
.ph-step b { min-width: 28px; text-align: center; font-size: 17px; }
.ph-range { -webkit-appearance: none; appearance: none; width: 100%; height: 30px; background: transparent; cursor: pointer; }
.ph-range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--signal), #FFB088); }
.ph-range::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--signal), #FFB088); }
.ph-range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 22px; margin-top: -8px; border-radius: 999px; background: rgba(255,255,255,.85); box-shadow: inset 0 1px 0 #fff, 0 2px 8px rgba(0,0,0,.2), 0 0 0 .5px rgba(0,0,0,.08); transition: transform .15s; }
.ph-range::-moz-range-thumb { width: 30px; height: 22px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.ph-range:active::-webkit-slider-thumb, .ph-range.tap::-webkit-slider-thumb { transform: scale(1.18); }
.ph-sw { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 0; padding: 10px 12px; border-radius: 16px; background: rgba(255,255,255,.65); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ph-sw.sm { padding: 0; background: none; margin: 0; }
.ph-sw input { position: absolute; opacity: 0; pointer-events: none; }
.ph-sw i { width: 46px; height: 28px; border-radius: 999px; background: rgba(120,120,128,.22); position: relative; transition: background .25s; flex: none; }
.ph-sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.18); transition: transform .3s cubic-bezier(.3,1.4,.5,1); }
.ph-sw input:checked + i { background: #34C759; }
.ph-sw input:checked + i::after { transform: translateX(18px); }
.ph-sw input:focus-visible + i { outline: 2px solid var(--signal); outline-offset: 2px; }
.ph-go { all: unset; cursor: pointer; display: block; text-align: center; margin-top: 16px; padding: 13px; border-radius: 999px; background: var(--signal); color: #fff; font-weight: 700; font-size: 15px; box-shadow: 0 8px 20px rgba(255,90,31,.32); transition: transform .15s; }
.ph-go:active, .ph-go.tap, .ph-acc.tap, .ph-g button.tap { transform: scale(.94); }
.ph-gs { display: flex; flex-direction: column; gap: 8px; }
.ph-g { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 18px; background: rgba(255,255,255,.78); box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(17,24,39,.06); }
.ph-g.in { animation: phIn .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 140ms); }
.ph-g b { font-size: 13.5px; line-height: 1.25; }
.ph-g span { font-size: 12px; line-height: 1.35; color: var(--ink-2); }
.ph-g button { all: unset; cursor: pointer; align-self: flex-start; margin-top: 4px; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: rgba(10,108,255,.12); color: var(--info); transition: background .2s, color .2s, transform .15s; }
.ph-g button.ok { background: var(--ok); color: #fff; }
.ph-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.pw-d { min-height: 250px; border-radius: 12px; padding: 5px 3px; background: rgba(255,255,255,.6); display: flex; flex-direction: column; gap: 4px; }
.pw-d small { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.pw-d.hoy small { color: var(--signal); }
.pw-c { display: block; padding: 6px 2px; border-radius: 7px; background: color-mix(in srgb, var(--c) 18%, white); border-top: 3px solid var(--c); text-align: center; animation: drop .5s cubic-bezier(.3,1.3,.5,1) both; animation-delay: calc(var(--q) * 55ms); }
.pw-c b { font-size: 9.5px; }
@keyframes drop { from { opacity: 0; transform: translateY(-14px) scale(.8); } }
.ph-toast { position: absolute; left: 14px; right: 14px; top: 56px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 22px; font-size: 13px; font-weight: 600;
  background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 1px 0 #fff, 0 12px 30px rgba(17,24,39,.16);
  transform: translateY(-140%); opacity: 0; transition: transform .6s cubic-bezier(.3,1.3,.5,1), opacity .3s; }
.ph-toast.in { transform: none; opacity: 1; }
.ph-toast i { width: 26px; height: 26px; border-radius: 8px; background: var(--signal); flex: none; }
.ph-tabs { position: absolute; left: 14px; right: 14px; bottom: 18px; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 999px;
  background: rgba(255,255,255,.7); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); box-shadow: inset 0 1px 0 #fff, 0 10px 30px rgba(17,24,39,.14); }
.ph-tabs button { all: unset; cursor: pointer; text-align: center; padding: 9px 0; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); transition: background .25s, color .25s; }
.ph-tabs button[aria-pressed="true"] { background: rgba(118,118,128,.16); color: var(--ink); }
.lp-phone :focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
/* Secciones */
.lp-sec { padding: 64px 0; }
.lp-sec h2, .lp-cta h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; letter-spacing: -.04em; margin: 0 0 10px; }
.lp-sub { color: var(--ink-2); font-size: 17px; margin: 0 0 26px; max-width: 52ch; }
.cx { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
.cx-tabs { display: flex; flex-direction: column; gap: 6px; }
.cx-tabs button { all: unset; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px; font-weight: 700; font-size: 16px; color: var(--ink-2); transition: background .25s, box-shadow .25s, color .2s; }
.cx-tabs button .num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; background: rgba(118,118,128,.14); }
.cx-tabs button[aria-selected="true"] { background: var(--lg); box-shadow: var(--rim); color: var(--ink); }
.cx-tabs button[aria-selected="true"] .num { background: var(--ink); color: #fff; }
.cx-tabs button:focus-visible { outline: 2px solid var(--signal); }
.cx-view { animation: phIn .4s cubic-bezier(.2,.8,.2,1); }
.cx-panel { padding: 24px; border-radius: 30px; background: var(--lg); box-shadow: var(--rim); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); display: flex; flex-direction: column; gap: 10px; }
.cx-t { font-size: 20px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 6px; }
.cx-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.7); }
.cx-row > svg { width: 22px; height: 22px; flex: none; }
.cx-row .grow { display: flex; flex-direction: column; }
.cx-row small, .cx-ai small, .cx-field small { color: var(--muted); font-size: 13px; }
.cx-btn { all: unset; cursor: pointer; padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700; background: var(--ink); color: #fff; transition: background .25s, transform .15s; }
.cx-btn:active { transform: scale(.95); }
.cx-btn.ok { background: var(--ok); }
.cx-btn:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.cx-note { color: var(--ink-2); font-size: 14px; margin: 6px 2px 0; }
.cx-ais { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cx-ai { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.7); }
.cx-ai.rec { box-shadow: inset 0 0 0 2px var(--signal); }
.cx-field { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 18px; background: rgba(255,255,255,.7); }
.cx-field small { flex-basis: 100%; }
.cx-field span { flex: 1; font: 13.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-2); word-break: break-all; }
.cx-field i { color: var(--signal); font-style: normal; }
.cx-rut { cursor: pointer; }
/* Bento */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 26px; }
.bx { padding: 22px; border-radius: 30px; background: var(--lg); box-shadow: var(--rim); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.bx h3 { font-size: 19px; font-weight: 800; letter-spacing: -.025em; margin: 0; }
.bx p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.bx-cal { grid-column: span 3; grid-row: span 2; }
.bx-hook { grid-column: span 3; }
.bx-niv { grid-column: span 3; }
.bx-disc { grid-column: span 2; }
.bx-rep { grid-column: span 2; }
.bx-cre { grid-column: span 2; background: linear-gradient(150deg, #1C1C1E, #2C2C34); color: #fff; }
.bx-cre p { color: rgba(255,255,255,.75); }
.bx-mm { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 14px; }
.bx-mm span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; border-radius: 14px; background: rgba(255,255,255,.5); }
.bx-mm span.on { background: var(--ink); color: #fff; }
.bx-mm b { font-size: 14px; }
.bx-mm em { display: flex; gap: 2px; height: 5px; }
.bx-mm i { width: 5px; height: 5px; border-radius: 50%; background: var(--c); }
.bx-mm span.on i { box-shadow: 0 0 0 1px #fff; }
.bx-bars { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.bx-bars div { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; }
.bx-bars i { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--signal), #FFB088); width: 0; transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.bx-bars.go i { width: var(--v); }
.bx-bars div:nth-child(2) i { transition-delay: .1s; } .bx-bars div:nth-child(3) i { transition-delay: .2s; } .bx-bars div:nth-child(4) i { transition-delay: .3s; }
.bx-nivv { font-size: 28px; font-weight: 800; letter-spacing: -.03em; color: var(--signal); }
.bx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bx-chips button { all: unset; cursor: pointer; font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px rgba(60,60,67,.12); transition: background .2s, color .2s; }
.bx-chips button[aria-pressed="true"] { background: var(--err); color: #fff; box-shadow: none; }
.bx-chips button:focus-visible { outline: 2px solid var(--signal); }
.bx-rep-b { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.bx-rep-b p { padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.65); font-size: 13.5px; }
/* FAQ y cierre */
.lp-faq { display: flex; flex-direction: column; gap: 8px; max-width: 780px; margin-top: 18px; }
.lp-faq details { border-radius: 22px; padding: 4px 20px; background: var(--lg); box-shadow: var(--rim); }
.lp-faq summary { cursor: pointer; padding: 15px 0; font-weight: 700; font-size: 16px; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--muted); transition: transform .25s; }
.lp-faq details[open] summary::after { transform: rotate(45deg); }
.lp-faq p { margin: 0 0 16px; color: var(--ink-2); line-height: 1.55; }
.lp-cta { margin: 40px 0 20px; padding: 64px 28px; border-radius: 36px; text-align: center; background: linear-gradient(150deg, #1C1C1E, #2C2C34); color: #fff; }
.lp-cta p { color: rgba(255,255,255,.7); margin: 0 0 22px; }
.lp-foot { display: flex; gap: 20px; justify-content: center; color: var(--muted); font-size: 14px; padding: 20px 0; }
.lp-foot a { color: var(--muted); }
dialog.login-dlg { width: min(440px, calc(100% - 24px)); padding: 32px 28px 24px; }
.login-dlg .mark { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; font: 800 20px/1 var(--display); letter-spacing: -.03em; }
.login-dlg .mark i { width: 12px; height: 12px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 5px rgba(255,90,31,.16); }
.login-dlg h1 { font-size: 30px; font-weight: 800; letter-spacing: -.035em; margin: 0 0 8px; }
.login-dlg p { color: var(--muted); margin: 0 0 22px; }
.login-dlg .btn.signal { width: 100%; margin-top: 8px; }
.login-dlg .err { color: var(--err); font-size: 14px; min-height: 18px; margin-top: 10px; }
.login-dlg .lp-close { position: absolute; top: 16px; right: 16px; }
@media (max-width: 980px) {
  .lp-hero { grid-template-columns: 1fr; padding: 44px 0 30px; }
  .cx { grid-template-columns: 1fr; }
  .cx-tabs { flex-direction: row; overflow-x: auto; }
  .cx-tabs button { white-space: nowrap; }
  .bento { grid-template-columns: 1fr 1fr; }
  .bx-cal, .bx-hook, .bx-niv { grid-column: span 2; grid-row: auto; }
  .bx-disc, .bx-rep, .bx-cre { grid-column: span 1; }
}
@media (max-width: 640px) {
  .lp-links { display: none; }
  .lp-top .btn { margin-left: auto; }
  .lp-top.tight { max-width: 1180px; }
  .bento { grid-template-columns: 1fr; }
  .bx-cal, .bx-hook, .bx-niv, .bx-disc, .bx-rep, .bx-cre { grid-column: auto; }
  .cx-ais { grid-template-columns: 1fr; }
  .lp-phone { transform: scale(.92); transform-origin: top center; margin-bottom: -40px; }
  .lp-lead { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lp *, .lp *::before, .lp *::after { animation: none !important; transition: none !important; }
  .bx-bars i { width: var(--v); }
}

/* Primeros pasos */
.onb-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin: 0 0 18px; color: inherit; text-decoration: none; }
.onb-card .grow { display: flex; flex-direction: column; }
.onb-ring { --p: 0; width: 48px; height: 48px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--signal) calc(var(--p) * 360deg), rgba(118,118,128,.16) 0); position: relative; }
.onb-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: rgba(255,255,255,.95); }
.onb-ring b { position: relative; font-size: 13px; }
.onb-ring.lg { width: 72px; height: 72px; }
.onb-ring.lg b { font-size: 17px; }
.onb { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; max-width: 820px; }
.onb-step { border-radius: 24px; overflow: hidden; transition: box-shadow .2s; }
.onb-h { all: unset; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 16px 18px; width: 100%; box-sizing: border-box; }
.onb-h:focus-visible { outline: 2px solid var(--signal); outline-offset: -4px; border-radius: 22px; }
.onb-h .grow { display: flex; flex-direction: column; gap: 2px; }
.onb-h b { font-size: 16px; }
.onb-h .mut { font-size: 14px; }
.onb-n { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: rgba(118,118,128,.14); }
.onb-step.done .onb-n { background: var(--ok); color: #fff; }
.onb-step.done .onb-h b { color: var(--ink-2); }
.onb-chev { font-size: 22px; color: var(--muted); transition: transform .2s; }
.onb-step.open .onb-chev { transform: rotate(90deg); }
.onb-b { padding: 0 18px 18px 64px; }
.ai-guide { display: flex; flex-direction: column; gap: 14px; }
.ai-guide .seg { align-self: flex-start; }
.ai-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; line-height: 1.5; }
.small { font-size: 13.5px; line-height: 1.5; margin: 0; }
.ai-box { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.72); border: 1px solid var(--line); }
.ai-box code { font-size: 13px; word-break: break-all; }
.ai-box pre { margin: 0; white-space: pre-wrap; font: 13.5px/1.5 var(--body); color: var(--ink-2); }
.ai-box-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
@media (max-width: 600px) { .onb-b { padding-left: 18px; } }
.bx-tipos { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding-top: 12px; }
.bx-tipos span { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.bx-tipos small { color: rgba(255,255,255,.65); }
.bx-cal .bx-mm { margin-top: 18px; }
.wk-grp { border-left: 0; padding-left: 8px; background: rgba(255,255,255,.92); }
.wk-grp::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--stripes); }
@media (min-width: 960px) {
  .rail { overflow-y: auto; scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .rail .nav-group { margin: 12px 12px 4px; }
  .rail a, .rail a.desk { padding: 7px 12px; }
  .rail .foot { margin-top: auto; }
}

/* Deslizador estilo iOS */
.ios-slider { --fill: 33.3%; position: relative; padding: 6px 0 0; }
.ios-slider input[type="range"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 30px; margin: 0; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; cursor: pointer; }
.ios-slider input::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--signal) 0 var(--fill), rgba(120,120,128,.2) var(--fill) 100%); }
.ios-slider input::-moz-range-track { height: 6px; border-radius: 6px; background: rgba(120,120,128,.2); }
.ios-slider input::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--signal); }
.ios-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; border: 0; background: #fff;
  box-shadow: 0 0.5px 0 rgba(0,0,0,.04), 0 3px 8px rgba(0,0,0,.15), 0 3px 1px rgba(0,0,0,.06); transition: transform .2s cubic-bezier(.3,1.4,.5,1); }
.ios-slider input::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 3px 1px rgba(0,0,0,.06); }
.ios-slider input:active::-webkit-slider-thumb, .ios-slider.tap input::-webkit-slider-thumb { transform: scale(1.15); }
.ios-slider input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(255,90,31,.35), 0 3px 8px rgba(0,0,0,.15); }
.ios-slider input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(255,90,31,.35); }
.ios-ticks { display: flex; justify-content: space-between; margin-top: 4px; }
.ios-ticks button { all: unset; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--muted); padding: 2px 0; transition: color .2s; }
.ios-ticks button:first-child { text-align: left; } .ios-ticks button:last-child { text-align: right; }
.ios-ticks button.on { color: var(--signal); }
.ph-screen .ios-ticks button { font-size: 10.5px; }
.ph-seg { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 12px; background: rgba(118,118,128,.14); margin-top: 12px; }
.ph-seg button { all: unset; cursor: pointer; text-align: center; padding: 6px 0; border-radius: 9px; font-size: 12.5px; font-weight: 600; transition: background .25s, box-shadow .25s; }
.ph-seg button[aria-pressed="true"] { background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04); }
.lp-phone .ph-screen { padding-top: 56px; }
.lp-phone .ph-l { margin: 11px 0 6px; }
.lp-phone .ph-sw { margin-top: 10px; }
.lp-phone .ph-go { margin-top: 12px; }
/* Bento: carruseles y reparto */
.bx-car { grid-column: span 2; }
.bx-disc, .bx-rep { grid-column: span 2; }
.bx-cre { grid-column: span 6; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.bx-cre h3 { flex-basis: 100%; }
.bx-cre p { flex: 1 1 320px; }
.bx-cre .bx-tipos { flex-direction: row; margin: 0; padding: 0; flex: 1 1 360px; }
.bx-cre .bx-tipos span { flex: 1; }
.bx-niv .bx-nivv { margin-top: 2px; }
.bx-slides { display: flex; gap: 8px; margin-top: auto; padding-top: 10px; overflow: hidden; }
.bx-slides span { flex: 0 0 104px; aspect-ratio: 3 / 4; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; justify-content: space-between; font-size: 12.5px; font-weight: 700; line-height: 1.25;
  background: linear-gradient(160deg, hsl(calc(20 + var(--n) * 25) 90% 92%), hsl(calc(20 + var(--n) * 25) 80% 82%)); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 6px 16px rgba(17,24,39,.08); }
.bx-slides b { font-size: 11px; color: var(--ink-2); }
/* Guía de Instagram en Cuentas */
details.howto { margin: 4px 0 14px; border-radius: 16px; background: rgba(255,255,255,.6); border: 1px solid var(--line); padding: 0 14px; }
details.howto summary { cursor: pointer; padding: 11px 0; font-weight: 600; font-size: 14.5px; color: var(--signal); }
details.howto ol { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
details.howto a { color: var(--info); }
@media (max-width: 980px) { .bx-car, .bx-disc, .bx-rep { grid-column: span 1; } .bx-cre { grid-column: span 2; } .bx-car { grid-column: span 2; } }
@media (max-width: 640px) { .bx-car, .bx-cre { grid-column: auto; } .bx-cre .bx-tipos { flex-direction: column; } }

/* Portada: ejemplos */
.ej-bar { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; margin: 14px 0 12px; background: var(--lg, rgba(255,255,255,.6)); box-shadow: var(--rim); }
.ej-bar button { all: unset; cursor: pointer; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-2); transition: background .25s, color .25s, box-shadow .25s; }
.ej-bar button[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: 0 4px 12px rgba(17,24,39,.18); }
.ej-bar button:focus-visible { outline: 2px solid var(--signal); }
.ej-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ej { all: unset; cursor: pointer; position: relative; aspect-ratio: 9 / 15; perspective: 1200px; animation: phIn .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 50ms); }
.ej[hidden] { display: none; }
.ej:focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; border-radius: 26px; }
.ej-face { position: absolute; inset: 0; border-radius: 26px; overflow: hidden; display: flex; flex-direction: column; padding: 14px; box-sizing: border-box;
  backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .6s cubic-bezier(.3,1.2,.4,1); }
.ej-front { background: radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,.85), transparent 60%), linear-gradient(165deg, var(--a), var(--b)); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 18px 40px rgba(17,24,39,.14); }
.ej-back { transform: rotateY(180deg); background: rgba(255,255,255,.9); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 0 0 2px var(--b), 0 18px 40px rgba(17,24,39,.14); gap: 8px; }
.ej.flip .ej-front { transform: rotateY(-180deg); }
.ej.flip .ej-back { transform: rotateY(0); }
.ej:hover .ej-front { transform: translateY(-4px); }
.ej.flip:hover .ej-front { transform: rotateY(-180deg); }
.ej-top { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink); }
.ej-top svg { width: 14px; height: 14px; }
.ej-top b { font-weight: 700; }
.ej-top em { margin-left: auto; font-style: normal; font-weight: 700; font-size: 11px; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.6); }
.ej-prog { height: 3px; border-radius: 3px; background: rgba(255,255,255,.5); margin-top: 10px; overflow: hidden; }
.ej-prog i { display: block; height: 100%; width: 30%; background: #fff; border-radius: 3px; animation: prog 6s linear infinite; animation-delay: calc(var(--i) * -0.8s); }
@keyframes prog { from { width: 0; } to { width: 100%; } }
.ej-dots { display: flex; gap: 4px; justify-content: center; margin-top: 10px; }
.ej-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55); }
.ej-dots i.on { background: #fff; width: 16px; border-radius: 3px; }
.ej-hook { margin: auto 0; font: 800 clamp(19px, 1.7vw, 23px)/1.12 var(--display); letter-spacing: -.03em; color: var(--ink); text-wrap: balance;
  background: rgba(255,255,255,.72); padding: 12px 12px; border-radius: 16px; box-shadow: 0 6px 18px rgba(17,24,39,.08); }
.ej-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); margin-top: auto; }
.ej-foot span:last-child { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.ej-bt { font-size: 14px; color: var(--ink); margin-bottom: 2px; }
.ej-row { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--a) 55%, white); font-size: 12.5px; line-height: 1.35; color: var(--ink-2); }
.ej-row em { font-style: normal; font-weight: 700; font-size: 11px; color: var(--ink); }
.ej-back .ej-foot { margin-top: auto; }
/* Antes y con Parrilla */
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; }
.vs-col { padding: 26px; border-radius: 30px; background: var(--lg); box-shadow: var(--rim); }
.vs-col h3 { font-size: 20px; font-weight: 800; letter-spacing: -.025em; margin: 0 0 14px; }
.vs-col ul { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vs-col li { padding: 10px 14px; border-radius: 14px; background: rgba(255,255,255,.65); font-size: 15px; }
.vs-col:not(.on) li { color: var(--ink-2); text-decoration: line-through; text-decoration-color: rgba(229,55,44,.55); }
.vs-col.on { background: linear-gradient(150deg, #1C1C1E, #2C2C34); color: #fff; }
.vs-col.on li { background: rgba(255,255,255,.1); }
.vs-col.on p { color: rgba(255,255,255,.75); margin: 0; }
@media (max-width: 980px) { .ej-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .vs { grid-template-columns: 1fr; } .ej-bar { border-radius: 22px; } .ej-hook { font-size: 18px; } }
@media (prefers-reduced-motion: reduce) { .ej-face { transition: none; } }

/* Portada: contenido real */
.rx-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.rx { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rx-phone { position: relative; aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; background: #111; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 24px 50px rgba(17,24,39,.22); isolation: isolate; }
.rx-track { display: flex; height: 100%; transition: transform .6s cubic-bezier(.3,1,.4,1); touch-action: pan-y; cursor: grab; }
.rx-s { flex: 0 0 100%; height: 100%; margin: 0; position: relative; overflow: hidden; }
.rx-s img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; user-select: none; }
.rx-s.m { background: radial-gradient(90% 60% at 50% 40%, #FFF6EC, #F6D9C1); }
.rx-s.m img { object-fit: contain; padding: 30% 14% 34%; box-sizing: border-box; }
.rx-s.c { background: linear-gradient(180deg, #F4EFE8, #E8DED2); }
.rx-s.c img { object-fit: contain; object-position: center 70%; padding: 34% 18% 0; box-sizing: border-box; filter: drop-shadow(0 12px 24px rgba(0,0,0,.18)); }
.rx-s figcaption { position: absolute; left: 10px; right: 10px; top: 16%; text-align: center; font: 800 clamp(13px, 1.15vw, 16px)/1.18 var(--display); letter-spacing: -.01em; color: #111; }
.rx-s.p figcaption { top: 13%; padding: 0 6px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 0 12px rgba(0,0,0,.35); }
.rx-s.m figcaption, .rx-s.c figcaption { background: #fff; padding: 8px 10px; border-radius: 10px; box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.rx-top { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: center; z-index: 2; }
.rx-dots { display: flex; gap: 4px; padding: 4px 7px; border-radius: 999px; background: rgba(0,0,0,.28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.rx-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.5); transition: width .3s, background .3s; }
.rx-dots i.on { width: 14px; border-radius: 3px; background: #fff; }
.rx-bars { display: flex; gap: 3px; width: 100%; }
.rx-bars i { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(0,0,0,.18); overflow: hidden; }
.rx-bars i b { display: block; height: 100%; width: 0; background: rgba(0,0,0,.65); }
.rx-bars i.done b { width: 100%; }
.rx-bars i.on b { animation: rxbar 2.6s linear forwards; }
@keyframes rxbar { to { width: 100%; } }
.rx-rail { position: absolute; right: 8px; bottom: 74px; display: flex; flex-direction: column; gap: 12px; z-index: 2; color: #fff; }
.rx-rail span { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; font-weight: 700; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.rx-rail svg { width: 22px; height: 22px; }
.rx-bottom { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 10px 10px; z-index: 2; display: flex; flex-direction: column; gap: 2px; font-size: 11px; line-height: 1.3; color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,.6)); }
.rx-bottom span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; opacity: .92; }
.rx-nav { all: unset; cursor: pointer; position: absolute; top: 45%; z-index: 3; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; font-size: 20px; color: #111;
  background: rgba(255,255,255,.75); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .2s; }
.rx-nav.prev { left: 8px; } .rx-nav.next { right: 8px; }
.rx-phone:hover .rx-nav, .rx-nav:focus-visible { opacity: 1; }
.rx-nav:focus-visible { outline: 2px solid var(--signal); }
.rx-meta { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; }
.rx-acc { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.rx-acc svg { width: 14px; height: 14px; }
.rx-acc em { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: rgba(118,118,128,.14); }
.rx-views { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.rx-views b { font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); margin-right: 2px; }
.rx-meta ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.rx-meta li { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); padding-left: 14px; position: relative; }
.rx-meta li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--signal); }
@media (max-width: 1100px) { .rx-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 230px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 14px; margin-inline: -4px; } .rx { scroll-snap-align: start; } .rx-s figcaption { font-size: 15px; } }
/* Demo: agenda del día */
.ph-ws { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 12px; }
.ph-ws span { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 0; border-radius: 12px; }
.ph-ws small { font-size: 10px; color: var(--muted); font-weight: 600; }
.ph-ws b { font-size: 14px; }
.ph-ws em { display: flex; gap: 2px; height: 4px; }
.ph-ws em i { width: 4px; height: 4px; border-radius: 50%; background: var(--signal); }
.ph-ws span.on { background: var(--ink); }
.ph-ws span.on small, .ph-ws span.on b { color: #fff; }
.ph-ag { display: flex; flex-direction: column; gap: 7px; }
.pa-ev { display: grid; grid-template-columns: 38px 1fr; gap: 6px; align-items: center; animation: drop .55s cubic-bezier(.3,1.3,.5,1) both; animation-delay: calc(var(--q) * 90ms); }
.pa-t { font-size: 11px; font-weight: 700; color: var(--ink-2); }
.pa-card { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 14px; background: rgba(255,255,255,.85); box-shadow: inset 3px 0 0 var(--c), 0 3px 10px rgba(17,24,39,.06); min-width: 0; }
.pa-card img { width: 34px; height: 46px; border-radius: 8px; object-fit: cover; flex: none; background: #F3E6DA; }
.pa-card > span { display: flex; flex-direction: column; min-width: 0; }
.pa-card small { font-size: 10px; color: var(--muted); font-weight: 600; }
.pa-card b { font-size: 11.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-card em { font-style: normal; font-size: 10px; font-weight: 700; color: var(--info); }
.pa-card em.ok { color: var(--ok); }
.ph-toast img { width: 28px; height: 28px; border-radius: 8px; flex: none; }
/* Lo que te quitas de encima */
.vs2 { margin-top: 24px; border-radius: 32px; padding: 10px; background: var(--lg); box-shadow: var(--rim); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
.vs2-h, .vs2-r { display: grid; grid-template-columns: 1fr 44px 1.2fr; align-items: center; gap: 8px; }
.vs2-h { padding: 12px 16px 8px; font-size: 13px; font-weight: 700; color: var(--muted); }
.vs2-h span:last-child { grid-column: 3; }
.vs2-r { padding: 6px; border-radius: 20px; transition: background .2s; }
.vs2-r:hover { background: rgba(255,255,255,.6); }
.vs2-a { padding: 12px 14px; border-radius: 14px; font-size: 15px; color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(229,55,44,.5); }
.vs2-arrow { height: 2px; background: linear-gradient(90deg, rgba(60,60,67,.15), var(--signal)); border-radius: 2px; position: relative; }
.vs2-arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left-color: var(--signal); border-right: 0; }
.vs2-b { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; font-size: 15px; font-weight: 600; color: #fff; background: linear-gradient(150deg, #1C1C1E, #2C2C34); }
.vs2-b i { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; background: #34C759; color: #fff; }
.vs2-f { text-align: center; padding: 16px 12px 10px; font-weight: 700; font-size: 16px; }
@media (max-width: 640px) {
  .vs2-h { display: none; }
  .vs2-r { grid-template-columns: 1fr; gap: 4px; padding: 8px 4px; }
  .vs2-arrow { display: none; }
}

/* Subir contenido */
.up-seg { margin-bottom: 14px; }
.up-ths { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.up-th { position: relative; width: 84px; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: #111; }
.up-th img, .up-th video { width: 100%; height: 100%; object-fit: cover; }
.up-th b { position: absolute; left: 6px; top: 6px; font-size: 11px; color: #fff; background: rgba(0,0,0,.5); border-radius: 999px; padding: 1px 6px; }
.up-th button { all: unset; cursor: pointer; position: absolute; right: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.6); color: #fff; font-size: 15px; }
.up-add { width: 84px; aspect-ratio: 9 / 16; border-radius: 12px; display: grid; place-items: center; border: 1.5px dashed var(--line); font-size: 13px; font-weight: 600; color: var(--muted); }
.up-quien { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.up-quien button { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.6); border: 1.5px solid var(--line); transition: border-color .2s, background .2s; }
.up-quien button[aria-pressed="true"] { border-color: var(--signal); background: rgba(255,255,255,.92); box-shadow: 0 0 0 4px rgba(255,90,31,.1); }
.up-quien button:focus-visible { outline: 2px solid var(--signal); }
.up-quien small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.up-check { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.6); border: 1px solid var(--line); margin: 6px 0 14px; cursor: pointer; }
.up-check span { display: flex; flex-direction: column; }
.up-check small { color: var(--muted); }
@media (max-width: 600px) { .up-quien { grid-template-columns: 1fr; } }
/* Series */
.serie-box { margin-top: 10px; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.6); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.serie-box .hint { margin: 0; }
.serie-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.li.serie.off { opacity: .55; }
/* Tipo de cuenta */
.tipo-seg { margin: 10px 0 2px; align-self: flex-start; }
.tipo-seg .chip { font-size: 13px; }
/* Skills */
.sk-drop { margin-bottom: 18px; }
.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.sk-card { padding: 18px; display: flex; flex-direction: column; gap: 10px; border-radius: 24px; }
.sk-h { display: flex; gap: 12px; align-items: center; }
.sk-h .grow { display: flex; flex-direction: column; }
.sk-h b { font-size: 16px; }
.sk-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,90,31,.1); color: var(--signal); flex: none; }
.sk-ic svg { width: 20px; height: 20px; }
.sk-d { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sk-accs { display: flex; flex-wrap: wrap; gap: 6px; }
.chip.sm { font-size: 12.5px; padding: 5px 10px; min-height: 0; }
.chip.sm .pf svg { width: 12px; height: 12px; }
.sk-ver summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--signal); }
.sk-ver pre { max-height: 280px; overflow: auto; white-space: pre-wrap; font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background: rgba(255,255,255,.7); padding: 12px; border-radius: 12px; border: 1px solid var(--line); }
.sk-foot { display: flex; justify-content: flex-end; }
.sk-para { display: flex; flex-direction: column; gap: 6px; }
.sk-para .mut { font-size: 12.5px; font-weight: 600; }
.sk-para .seg { align-self: flex-start; flex-wrap: wrap; }
.sk-para .chip { font-size: 12.5px; }
.sk-all { align-self: flex-start; }
.sk-card.new { box-shadow: 0 0 0 2px var(--signal), var(--glass-shadow); }
.up-group { padding: 14px; border-radius: 20px; border: 1px solid var(--line); background: rgba(255,255,255,.5); margin-bottom: 10px; display: flex; flex-direction: column; gap: 10px; }
.up-group.on { border-color: rgba(255,90,31,.45); background: rgba(255,255,255,.8); }
.up-gh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.up-gh .mut { margin-right: auto; font-size: 13px; }
.up-ths { justify-content: flex-start; margin-bottom: 10px; }
.up-drop { min-height: 120px; }
.up-addg { margin-bottom: 14px; }
.gap-pick { flex-wrap: wrap; }

/* Acceso */
dialog.login-dlg { width: min(440px, calc(100% - 24px)); padding: 0; }
.login-dlg .login-card { padding: 30px 28px 22px; display: flex; flex-direction: column; gap: 4px; position: relative; }
.auth-tabs { align-self: flex-start; margin-bottom: 14px; }
.field.pass .pass-in { position: relative; display: block; }
.field.pass input { width: 100%; padding-right: 48px; box-sizing: border-box; }
.eye { all: unset; cursor: pointer; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--muted); }
.eye:hover { background: rgba(118,118,128,.12); color: var(--ink); }
.eye:focus-visible { outline: 2px solid var(--signal); }
.eye svg { width: 20px; height: 20px; }
.linkbtn { all: unset; cursor: pointer; align-self: flex-start; font-size: 14px; font-weight: 600; color: var(--info); margin: 2px 0 8px; }
.linkbtn:focus-visible { outline: 2px solid var(--signal); border-radius: 4px; }
.login-dlg .okmsg { color: var(--ok); font-size: 14px; }
.login-dlg .okmsg:empty, .login-dlg .err:empty { display: none; }
.lp-top .lp-reg { margin-left: 0; }
.plan-pill { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; border-radius: 999px; font-size: 14px; color: var(--ink); text-decoration: none; background: rgba(255,255,255,.7); border: 1px solid var(--line); }
.plan-pill:hover { background: #fff; }
/* Planes */
.pl { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.pl-toggle { display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(118,118,128,.14); }
.pl-toggle button { all: unset; cursor: pointer; padding: 9px 20px; border-radius: 999px; font-weight: 600; font-size: 15px; transition: background .25s, box-shadow .25s; }
.pl-toggle button[aria-pressed="true"] { background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04); }
.pl-toggle em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--ok); margin-left: 4px; }
.pl-toggle button:focus-visible { outline: 2px solid var(--signal); }
.pl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 1040px; }
.pl-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; border-radius: 30px; text-align: left;
  background: linear-gradient(160deg, rgba(255,255,255,.85), rgba(255,255,255,.55)); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255,255,255,.6), 0 18px 50px rgba(17,24,39,.08); }
.pl-card.top { background: linear-gradient(160deg, #1C1C1E, #2C2C34); color: #fff; box-shadow: 0 24px 60px rgba(17,24,39,.25); }
.pl-card.on { outline: 2px solid var(--signal); }
.pl-badge { position: absolute; top: 18px; right: 18px; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--signal); color: #fff; }
.pl-card h3 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.pl-para { margin: 0; font-size: 14px; color: var(--muted); }
.pl-card.top .pl-para, .pl-card.top .pl-fact { color: rgba(255,255,255,.7); }
.pl-precio { display: flex; align-items: baseline; gap: 4px; margin-top: 6px; }
.pl-precio b { font-size: 46px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.pl-precio span { font-size: 15px; color: var(--muted); }
.pl-card.top .pl-precio span { color: rgba(255,255,255,.7); }
.pl-fact { margin: 0; font-size: 13px; color: var(--muted); min-height: 18px; }
.pl-card ul { list-style: none; margin: 8px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.pl-card li { font-size: 14.5px; padding-left: 26px; position: relative; line-height: 1.4; }
.pl-card li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: rgba(30,158,87,.14); color: var(--ok); }
.pl-card.top li::before { background: rgba(52,199,89,.25); color: #6EE79A; }
.pl-go { width: 100%; justify-content: center; }
.pl-card.top .pl-go.btn.signal { box-shadow: 0 8px 24px rgba(255,90,31,.4); }
@media (max-width: 860px) { .pl-grid { grid-template-columns: 1fr; max-width: 440px; } }
/* Bienvenida */
.ob { min-height: 100dvh; max-width: 1160px; margin: 0 auto; padding: 18px 22px 40px; display: flex; flex-direction: column; }
.ob-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ob-dots { display: flex; gap: 6px; }
.ob-dots i { width: 8px; height: 8px; border-radius: 999px; background: rgba(118,118,128,.25); transition: width .35s cubic-bezier(.3,1.3,.5,1), background .3s; }
.ob-dots i.done { background: rgba(255,90,31,.45); }
.ob-dots i.on { width: 26px; background: var(--signal); }
.ob-step { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 40px 0; animation: phIn .5s cubic-bezier(.2,.8,.2,1); }
.ob-text h1 { font-size: clamp(32px, 4.2vw, 52px); font-weight: 800; letter-spacing: -.045em; line-height: 1.04; margin: 0 0 18px; text-wrap: balance; }
.ob-d { font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 46ch; margin: 0 0 16px; }
.ob-ej { font-size: 15px; line-height: 1.5; color: var(--ink); max-width: 46ch; margin: 0 0 28px; padding: 12px 16px; border-radius: 16px; background: rgba(255,90,31,.08); border-left: 3px solid var(--signal); }
.ob-nav { display: flex; gap: 10px; }
.ob-nav .btn { min-width: 130px; justify-content: center; }
.ob-vis { display: grid; place-items: center; min-height: 420px; }
.ob-plans { flex: 1; padding: 36px 0; text-align: center; animation: phIn .5s cubic-bezier(.2,.8,.2,1); }
.ob-plans h1 { font-size: clamp(32px, 4vw, 48px); font-weight: 800; letter-spacing: -.04em; margin: 0 0 10px; }
.ob-plans .ob-d { margin: 0 auto 26px; }
.ob-back { margin-top: 22px; }
.obv { width: min(440px, 100%); }
.obv img { display: block; width: 100%; height: 100%; object-fit: cover; }
.obv-intro { position: relative; height: 400px; }
.obv-phone { position: absolute; width: 180px; aspect-ratio: 9/16; border-radius: 26px; overflow: hidden; background: #F3E6DA; box-shadow: 0 24px 60px rgba(17,24,39,.22); left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(-2deg); z-index: 2; animation: phIn .6s both; }
.obv-phone.b { transform: translate(-115%,-44%) rotate(-10deg); z-index: 1; animation-delay: .1s; }
.obv-phone.c { transform: translate(15%,-46%) rotate(9deg); z-index: 1; animation-delay: .2s; }
.obv-phone.b img, .obv-phone.c img { object-fit: contain; padding: 30% 12%; box-sizing: border-box; }
.obv-phone span { position: absolute; left: 8px; right: 8px; top: 12%; text-align: center; font-weight: 800; font-size: 13px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.obv-phone.b span, .obv-phone.c span { color: #111; text-shadow: none; background: #fff; border-radius: 8px; padding: 5px; }
.obv-list { display: flex; flex-direction: column; gap: 10px; }
.obv-row { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 20px; background: rgba(255,255,255,.85); box-shadow: 0 10px 30px rgba(17,24,39,.08); animation: phIn .5s both; animation-delay: calc(var(--i) * 120ms); }
.obv-row svg { width: 24px; height: 24px; }
.obv-row .grow { display: flex; flex-direction: column; }
.obv-row small { color: var(--muted); }
.obv-row em { font-style: normal; font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 999px; background: var(--ink); color: #fff; }
.obv-row em.ok { background: rgba(30,158,87,.14); color: var(--ok); }
.obv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.obv-grid span { aspect-ratio: 3/4; border-radius: 18px; overflow: hidden; background: #F3E6DA; box-shadow: 0 10px 24px rgba(17,24,39,.1); animation: phIn .5s both; animation-delay: calc(var(--i) * 80ms); }
.obv-card, .obv-chat, .obv-post { padding: 22px; border-radius: 28px; background: rgba(255,255,255,.9); box-shadow: 0 24px 60px rgba(17,24,39,.12); display: flex; flex-direction: column; gap: 12px; }
.obv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.obv-chips span { font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 999px; background: rgba(118,118,128,.12); }
.obv-bar { height: 6px; border-radius: 6px; background: rgba(118,118,128,.2); overflow: hidden; }
.obv-bar i { display: block; height: 100%; background: var(--signal); }
.obv-sw { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(118,118,128,.08); font-weight: 600; font-size: 14px; }
.obv-sw i { width: 46px; height: 28px; border-radius: 999px; background: #34C759; position: relative; }
.obv-sw i::after { content: ""; position: absolute; right: 2px; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.obv-chat p { margin: 0; padding: 10px 14px; border-radius: 18px; font-size: 14.5px; max-width: 85%; animation: phIn .5s both; }
.obv-chat .me { align-self: flex-end; background: var(--info); color: #fff; }
.obv-chat .ai { align-self: flex-start; background: rgba(118,118,128,.12); }
.obv-chat .ai:nth-child(2) { animation-delay: .5s; } .obv-chat .ai:nth-child(3) { animation-delay: 1s; } .obv-chat .ai:nth-child(4) { animation-delay: 1.6s; }
.obv-chat .ok { background: rgba(30,158,87,.14); color: var(--ok); font-weight: 700; }
.obv-prog { display: block; height: 4px; margin-top: 6px; border-radius: 4px; background: rgba(118,118,128,.25); overflow: hidden; }
.obv-prog i { display: block; height: 100%; width: 60%; background: var(--signal); animation: prog 3s ease-in-out infinite; }
.obv-post { flex-direction: row; align-items: stretch; }
.obv-post > img { width: 120px; height: auto; aspect-ratio: 9/16; border-radius: 16px; flex: none; }
.obv-post > div { display: flex; flex-direction: column; gap: 6px; }
.obv-post small { color: var(--muted); }
.obv-btns { display: flex; gap: 6px; margin: 6px 0; }
.obv-btns span { font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 999px; background: rgba(118,118,128,.12); }
.obv-btns .ok { background: var(--signal); color: #fff; }
.obv-bars { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 28px; background: rgba(255,255,255,.9); box-shadow: 0 24px 60px rgba(17,24,39,.12); }
.obv-bars div { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: center; font-weight: 600; font-size: 14px; }
.obv-bars i { height: 14px; border-radius: 7px; background: linear-gradient(90deg, var(--signal), #FFB088); width: var(--v); animation: grow 1s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 120ms); }
@keyframes grow { from { width: 0; } }
@media (max-width: 860px) {
  .ob-step { grid-template-columns: 1fr; gap: 20px; padding: 24px 0; }
  .ob-vis { min-height: 0; order: -1; }
  .obv-intro { height: 300px; }
  .obv-phone { width: 140px; }
}
@media (prefers-reduced-motion: reduce) { .ob *, .ob *::before { animation: none !important; transition: none !important; } }
.pl-oferta { margin: -8px 0 0; font-size: 14px; font-weight: 600; color: var(--muted); }
.pl-oferta.on { color: var(--ok); padding: 8px 14px; border-radius: 999px; background: rgba(30,158,87,.1); }
.pl-precio { flex-wrap: wrap; }
.pl-precio s { font-size: 18px; font-weight: 600; color: var(--muted); margin-right: 4px; text-decoration-color: var(--err); }
.pl-card.top .pl-precio s { color: rgba(255,255,255,.55); }
.pl-dto { font-style: normal; font-size: 12.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: rgba(30,158,87,.14); color: var(--ok); margin-left: 6px; vertical-align: middle; letter-spacing: 0; }
.pl-card.top .pl-dto { background: rgba(52,199,89,.25); color: #6EE79A; }
.pl-fact b { color: var(--ok); }
.pl-card.top .pl-fact b { color: #6EE79A; }
.pl-precio b { font-size: 42px; }

/* ── Reseñas ── */
.res-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 18px; }
.res-card { margin: 0; padding: 20px; border-radius: 22px; background: var(--card, #fff); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.res-card blockquote { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.res-card figcaption { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.res-card figcaption b { display: block; font-size: 14px; }
.res-card figcaption small { display: block; color: var(--muted); font-size: 13px; }
.res-av { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--signal) 14%, #fff); color: var(--signal); font-weight: 700; flex: none; }
.stars { display: inline-flex; gap: 1px; font-size: 15px; letter-spacing: 0; }
.stars i { font-style: normal; color: var(--line); }
.stars i.on { color: #F5A623; }
.res-empty { grid-column: 1 / -1; padding: 26px; border-radius: 22px; border: 1.5px dashed var(--line); text-align: center; display: grid; gap: 6px; color: var(--muted); }
.res-empty b { color: var(--ink); font-size: 17px; }
.res-li .grow { display: flex; flex-direction: column; gap: 3px; }
.resdlg { border: 0; border-radius: 24px; padding: 24px; width: min(520px, 94vw); }
.resdlg::backdrop { background: rgb(0 0 0 / .35); backdrop-filter: blur(4px); }
.resdlg h3 { margin: 0 0 4px; }
.res-pick { display: flex; gap: 4px; margin: 14px 0; }
.res-pick button { border: 0; background: none; font-size: 32px; line-height: 1; cursor: pointer; color: var(--line); padding: 2px; transition: transform .12s; }
.res-pick button.on { color: #F5A623; }
.res-pick button:hover { transform: scale(1.12); }
.resdlg textarea { min-height: 110px; }

/* ── Footer ── */
.lp-foot { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 28px; justify-content: stretch; text-align: left; padding: 48px 0 28px; margin-top: 40px; border-top: 1px solid var(--line); font-size: 14px; }
.lp-foot-brand p { margin: 10px 0 0; max-width: 30ch; color: var(--muted); }
.lp-foot-col { display: flex; flex-direction: column; gap: 9px; }
.lp-foot-col b { color: var(--ink); font-size: 13px; margin-bottom: 2px; }
.lp-foot-col a { color: var(--muted); text-decoration: none; }
.lp-foot-col a:hover { color: var(--ink); }
.lp-fine { grid-column: 1 / -1; margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
@media (max-width: 720px) { .lp-foot { grid-template-columns: 1fr 1fr; } .lp-foot-brand { grid-column: 1 / -1; } }

/* ── Editar skills ── */
.sk-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sk-foot .grow { flex: 1; }
.sk-pend { display: grid; gap: 3px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--signal) 9%, transparent); font-size: 13.5px; }
.sk-pend b { font-size: 12.5px; color: var(--signal); }
.skdlg { border: 0; border-radius: 24px; padding: 22px; width: min(900px, 96vw); max-height: 92vh; }
.skdlg::backdrop { background: rgb(0 0 0 / .35); backdrop-filter: blur(4px); }
.skdlg h3 { margin: 0 0 4px; }
.skdlg form { display: flex; flex-direction: column; gap: 12px; }
.sk-editor { width: 100%; min-height: 58vh; resize: vertical; font: 13px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: #FBFBFA; color: var(--ink); tab-size: 2; }
.skdlg textarea[name=cambio] { min-height: 130px; }
.skdlg .dialog-actions { display: flex; align-items: center; gap: 8px; }
.skdlg .dialog-actions .grow { flex: 1; }

/* ── Quitar / rehacer publicación ── */
.rhdlg { border: 0; border-radius: 24px; padding: 22px; width: min(540px, 95vw); max-height: 92vh; }
.rhdlg::backdrop { background: rgb(0 0 0 / .35); backdrop-filter: blur(4px); }
.rhdlg form { display: flex; flex-direction: column; gap: 12px; }
.rhdlg h3 { margin: 0; }
.rhdlg .rh-dl { align-self: flex-start; display: inline-flex; gap: 6px; align-items: center; }
.rhdlg .rh-dl svg { width: 16px; height: 16px; transform: rotate(180deg); }
.rh-modos { display: grid; gap: 8px; }
.rh-modo { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 16px; cursor: pointer; }
.rh-modo:has(input:checked) { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 6%, transparent); }
.rh-modo input { margin-top: 3px; accent-color: var(--signal); }
.rh-modo b { display: block; font-size: 15px; }
.rh-modo small { display: block; color: var(--muted); font-size: 13px; }
.rh-mas { display: grid; gap: 10px; }
.rh-mas .dp-q { margin: 4px 0 0; }
.rhdlg .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ----- Mi cuenta ----- */
.rail .foot .foot-me { display: grid; gap: 1px; text-decoration: none; color: inherit; min-width: 0; padding: 6px 0; }
.rail .foot .foot-me b { color: var(--ink); font-size: 14px; }
.rail .foot .foot-me span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail .foot .foot-me:hover b { text-decoration: underline; }
.me-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.me-card { padding: 20px; display: grid; gap: 12px; }
.me-h { font-size: 15px; margin: 0; }
.me-list .me-h { padding: 16px 16px 4px; }
.me-form { display: grid; gap: 12px; }
.me-form label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.me-form input { font: inherit; font-size: 15px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.me-form input:disabled { background: transparent; color: var(--muted); }
.me-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.me-plan { display: flex; align-items: baseline; gap: 10px; }
.me-plan b { font-size: 24px; }
.me-uso { display: flex; justify-content: space-between; font-size: 14px; }
.me-bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.me-bar i { display: block; height: 100%; background: var(--ink); border-radius: 4px; }
.me-card .btn { justify-self: start; }
.me-list .li svg { width: 16px; height: 16px; opacity: .5; }
.card.list button.li { width: 100%; font: inherit; text-align: left; background: none; border: 0; border-radius: 0; color: inherit; cursor: pointer; box-shadow: none; justify-content: flex-start; }
.card.list button.li:hover { background: rgba(0,0,0,.03); }
.me-list .li b { display: block; }

.onb-how { margin: 0 0 14px; padding-left: 18px; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.onb-how li::marker { color: var(--muted); }

.me-avisos { display: grid; gap: 10px; }
#me-push .onb-how { margin: 0; }

/* Tokens: ocultos sin ser campo de contraseña (así el navegador no mete tu correo y contraseña guardados) */
.secret { -webkit-text-security: disc; text-security: disc; font-family: inherit; }
.app-sel { width: 100%; font: inherit; }
.app-nueva { margin-top: 8px; }

/* Elegir páginas de Facebook */
#fb-pick:empty { display: none; }
#fb-pick { display: grid; gap: 8px; margin-bottom: 16px; }
.fb-lead { margin: 0 0 2px; font-weight: 600; font-size: 14px; }
.fb-page { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; flex-wrap: wrap; }
.fb-page.on { opacity: .6; }
.fb-chk { display: flex; align-items: center; gap: 10px; flex: 1 1 220px; min-width: 0; cursor: pointer; }
.fb-chk img, .fb-ph { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; display: grid; place-items: center; background: #1877F2; color: #fff; }
.fb-ph svg { width: 18px; height: 18px; }
.fb-chk b { display: block; font-size: 14px; }
.fb-chk small { color: var(--muted); font-size: 12.5px; }
.fb-app { flex: 0 1 200px; }
.fb-app .app-sel { padding: 8px 10px; border-radius: 10px; }

/* Packs de repeticiones diarias */
.sec-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sec-acts { display: flex; align-items: center; gap: 8px; }
.rpack { background: var(--sheet, #fff); border-radius: 22px; box-shadow: 0 1px 0 rgb(0 0 0 / .04), 0 8px 24px -12px rgb(20 20 40 / .18); margin-bottom: 14px; overflow: hidden; border: 1px solid var(--line); }
.rpack.off { opacity: .72; }
.rpack-h { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: linear-gradient(90deg, rgb(255 90 31 / .08), transparent 70%); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.rpack-h b { display: block; font-size: 16px; }
.rpack-h .mut { font-size: 13px; }
.rpack-av { display: flex; }
.rpack-av .avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--sheet, #fff); border-radius: 50%; }
.rpack-av .avatar:first-child { margin-left: 0; }
.rpack .list .li { border-radius: 0; }
.rutina .rsel { width: 18px; height: 18px; flex: none; accent-color: var(--signal, #FF5A1F); }
.rutina .r-idea { font-size: 12.5px; }
.rut-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rut-accs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; max-height: 240px; overflow: auto; }
.rut-acc { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; font-size: 14px; }
.rut-acc:has(input:checked) { border-color: var(--ink); background: rgb(0 0 0 / .03); }
.rut-acc.off { opacity: .45; cursor: not-allowed; }
.rut-acc small { display: block; color: var(--muted); font-size: 12px; }
.rut-acc input { accent-color: var(--ink); }
.rut-form select, .rut-form input[type=time], .rut-form textarea, .rut-form input[name=pack_nuevo] { width: 100%; }
.rut-form input[name=pack_nuevo] { margin-top: 8px; }

/* ----- Parrilla visual: fila de lo próximo y rejilla de fichas ----- */
.next-strip { border-radius: var(--r-lg); background: var(--ink); color: var(--paper); padding: 20px 0 20px 22px; overflow: hidden; }
.next-strip.empty { padding: 22px; }
.next-strip.empty p { margin: 8px 0 0; color: #b9c4bc; }
.next-strip.empty a { color: var(--signal); }
.ns-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-right: 22px; margin-bottom: 16px; }
.ns-head .live { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #b9c4bc; }
.ns-head .live i { width: 9px; height: 9px; border-radius: 50%; background: var(--signal); animation: pulse 2s ease-in-out infinite; }
.ns-when { font: 800 clamp(24px, 3.4vw, 32px)/1 var(--display); letter-spacing: -.02em; }
.ns-count { color: var(--signal); font-weight: 600; }
.ns-side { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ns-total { color: #8d998f; font-size: 14px; margin-right: 4px; }
.ns-arrow { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .18); background: rgb(255 255 255 / .06); color: var(--paper); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding-bottom: 3px; }
.ns-arrow:hover { background: rgb(255 255 255 / .14); }
.ns-row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 22px 4px 2px; scrollbar-width: none; }
.ns-row::-webkit-scrollbar { display: none; }
.ns-row > * { scroll-snap-align: start; flex: none; }
.ns-row .pc { width: 172px; }
.ns-row .pc.big { width: 220px; }
.ns-row .pc.big .pc-media { box-shadow: 0 0 0 3px var(--signal); }
.ns-row .pc-info { color: var(--paper); }
.ns-row .pc-acc small, .ns-row .pc-title { color: #c9d2cb; }
.ns-more { width: 120px; aspect-ratio: 9 / 16; border-radius: 16px; border: 1px dashed rgb(255 255 255 / .3); background: transparent; color: var(--paper); font: 700 26px var(--display); display: grid; place-content: center; gap: 4px; cursor: pointer; }
.ns-more small { font: 500 13px var(--body); color: #b9c4bc; }

.pc { display: grid; gap: 8px; align-content: start; min-width: 0; }
.pc-media { position: relative; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #0d120f; isolation: isolate; transition: transform .18s ease, box-shadow .18s ease; }
.pc:hover .pc-media { transform: translateY(-3px); box-shadow: 0 14px 28px -14px rgb(0 0 0 / .5); }
.pc-media .vid.poster { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.vid.poster .playic { inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; opacity: 0; transition: opacity .15s; }
.pc:hover .vid.poster .playic, .vid.poster:focus-visible .playic { opacity: 1; }
.vid.poster .nphotos { display: none; }
.pc-blank { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; text-align: center; font: 700 15px/1.25 var(--display); color: #fff;
  background: radial-gradient(120% 80% at 20% 0%, color-mix(in srgb, var(--app) 80%, #fff 20%), var(--app) 45%, color-mix(in srgb, var(--app) 45%, #000 55%)); }
.pc-blank span { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
.pc-time, .pc-fmt, .pc-st { position: absolute; z-index: 2; pointer-events: none; }
.pc-time { left: 8px; top: 8px; padding: 4px 9px; border-radius: 999px; background: rgb(255 255 255 / .94); color: #111; font: 800 14px/1 var(--display); letter-spacing: -.01em; box-shadow: 0 2px 8px rgb(0 0 0 / .18); }
.pc.big .pc-time { font-size: 17px; padding: 5px 11px; background: var(--signal); color: #fff; }
.pc-fmt { right: 8px; top: 8px; display: inline-flex; align-items: center; gap: 3px; padding: 4px 7px; border-radius: 999px; background: rgb(0 0 0 / .55); color: #fff; font-size: 11.5px; font-weight: 700; backdrop-filter: blur(4px); }
.pc-fmt svg { width: 12px; height: 12px; }
.pc-st { left: 8px; bottom: 8px; font-size: 11px; padding: 3px 8px; }
.pc-info { display: grid; gap: 4px; padding: 0 2px; text-align: left; background: none; border: 0; color: var(--ink); font: inherit; cursor: pointer; min-width: 0; }
.pc-acc { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pc-acc b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-acc small { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.pc-title { font-size: 13px; line-height: 1.3; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-info:hover .pc-title { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.ns-row .pc-info:hover .pc-title { color: var(--paper); }
.pc.st-error .pc-media { box-shadow: 0 0 0 2px var(--err, #e5484d); }

.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 14px; margin: 10px 0 26px; }
@media (max-width: 520px) { .pgrid { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; } .ns-row .pc { width: 142px; } .ns-row .pc.big { width: 176px; } .ns-total { display: none; } }
.day-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; position: sticky; top: 0; z-index: 3; padding: 12px 0 8px; margin: 10px 0 0; background: linear-gradient(var(--paper) 75%, transparent); }
.day-h > span:first-child { font: 800 24px/1 var(--display); letter-spacing: -.02em; }
.day-h .mut { font-size: 14px; font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .ns-head .live i { animation: none; } .pc-media { transition: none; } .pc:hover .pc-media { transform: none; } }

.rut-accs { overflow-x: hidden; }
.rut-acc { min-width: 0; }
.rut-acc > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rut-acc small { overflow: hidden; text-overflow: ellipsis; }
.rut-acc .avatar { flex: none; }

/* Recursos ordenados por marca/app */
.rec-apps { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; }
.rec-app { flex: none; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; row-gap: 2px; text-align: left; min-width: 150px; padding: 12px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--sheet); cursor: pointer; font: inherit; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.rec-app b { font-size: 16px; }
.rec-app-n { grid-column: 2; color: var(--muted); font-size: 12.5px; }
.rec-app:hover { border-color: var(--ink-2, #999); }
.rec-app.on { border-color: var(--app); box-shadow: 0 0 0 2px var(--app) inset, 0 8px 20px -14px var(--app); background: color-mix(in srgb, var(--app) 7%, var(--sheet)); }
.rec-sub { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 16px; padding: 10px; border-radius: 16px; background: rgb(0 0 0 / .03); }
.rec-sub .acc-tab { background: var(--sheet); }
.rec-folder { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); }
.rec-folder svg { width: 15px; height: 15px; }

.r-avs { display: flex; flex: none; }
.r-avs .avatar { margin-left: -10px; box-shadow: 0 0 0 2px var(--sheet, #fff); border-radius: 50%; }
.r-avs .avatar:first-child { margin-left: 0; }
.r-redes { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 2px; }
.r-red { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 2px 8px 2px 3px; border-radius: 999px; background: rgb(0 0 0 / .05); }
.r-red .pf { width: 18px; height: 18px; border-radius: 50%; }
.r-red .pf svg { width: 11px; height: 11px; }
.ac-top .grow .ttag + .mut { display: block; margin-top: 4px; }

/* Repeticiones diarias: cada una como ficha clara */
.rut-list { display: grid; gap: 10px; padding: 12px; }
.rut-list.solo { padding: 0; }
.rut { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; background: var(--sheet); border: 1px solid var(--line); }
.rut.off { opacity: .6; }
.rut-main { flex: 1; min-width: 0; display: grid; gap: 8px; }
.rut-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rut-app { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.rut-what { font: 700 18px/1.2 var(--display); letter-spacing: -.01em; }
.rut-head .status { margin-left: auto; }
.rut-hours { display: flex; gap: 6px; flex-wrap: wrap; }
.rut-h { padding: 3px 10px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 700; }
.rut-where { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rut-lbl { font-size: 12.5px; color: var(--muted); margin-right: 2px; }
.rut-acc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: rgb(0 0 0 / .05); font-size: 13px; font-weight: 600; }
.rut-acc-chip .pf { width: 20px; height: 20px; border-radius: 50%; }
.rut-acc-chip .pf svg { width: 11px; height: 11px; }
.rut-meta { margin: 0; font-size: 13px; }
.rut-acts { display: flex; flex-direction: column; gap: 6px; flex: none; }
.rut-acts .btn { justify-content: center; }
@media (max-width: 640px) { .rut { flex-direction: column; } .rut-acts { flex-direction: row; } .rut-head .status { margin-left: 0; } }
.rut .rsel { margin-top: 4px; }

/* ----- Lo próximo por horas y fichas agrupadas ----- */
.next2 { border-radius: var(--r-lg); background: var(--sheet); border: 1px solid var(--line); padding: 20px 0 18px 20px; box-shadow: 0 10px 30px -22px rgb(0 0 0 / .35); }
.next2.empty { padding: 22px; } .next2.empty p { margin: 6px 0 0; } .next2 a { color: var(--signal); }
.n2-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-right: 20px; margin-bottom: 14px; }
.n2-head h2 { margin: 0; font: 800 26px/1.1 var(--display); letter-spacing: -.02em; }
.n2-head p { margin: 4px 0 0; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.n2-head p b { color: var(--ink); }
.n2-head .count { color: var(--signal); font-weight: 600; }
.n2-head .live i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--signal); animation: pulse 2s ease-in-out infinite; }
.n2-side { display: flex; align-items: center; gap: 8px; }
.n2-side .mut { font-size: 13.5px; margin-right: 4px; }
.next2 .ns-arrow { border-color: var(--line); background: var(--paper); color: var(--ink); }
.next2 .ns-arrow:hover { background: var(--line); }
.n2-row { gap: 0; padding: 0 20px 4px 0; align-items: flex-start; }
.slot { position: relative; padding: 0 16px 0 0; margin-right: 16px; border-right: 1px dashed var(--line); }
.slot:last-child { border-right: 0; }
.slot-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.slot-h b { font: 800 22px/1 var(--display); letter-spacing: -.02em; }
.slot-h span { color: var(--muted); font-size: 13px; }
.slot.first .slot-h b { color: var(--signal); }
.slot-cards { display: flex; gap: 12px; }
.slot-cards .gc { width: 150px; }
.slot.first .gc-media { box-shadow: 0 0 0 2px var(--signal); }

.gc { display: grid; gap: 8px; align-content: start; min-width: 0; }
.gc-media { position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #0d120f; isolation: isolate; transition: transform .18s ease, box-shadow .18s ease; }
.gc:hover .gc-media { transform: translateY(-3px); box-shadow: 0 14px 28px -14px rgb(0 0 0 / .5); }
.gc-media .vid.poster { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.gc:hover .vid.poster .playic { opacity: 1; }
.gc-info { display: grid; gap: 6px; padding: 0 2px; text-align: left; background: none; border: 0; color: var(--ink); font: inherit; cursor: pointer; min-width: 0; }
.gc-title { font-size: 13.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gc-info:hover .gc-title { text-decoration: underline; text-underline-offset: 2px; }
.gc-accs { display: flex; flex-wrap: wrap; gap: 4px; }
.gc-acc { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 2px 7px 2px 2px; border-radius: 999px; background: rgb(0 0 0 / .05); font-size: 11.5px; font-weight: 600; color: var(--ink); }
.gc-acc > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 92px; }
.gc-acc .pf { width: 17px; height: 17px; border-radius: 50%; }
.gc-acc .pf svg { width: 10px; height: 10px; }
.gc.st-error .gc-media { box-shadow: 0 0 0 2px var(--err, #e5484d); }
.pgrid .gc { width: auto; }
@media (max-width: 520px) { .slot-cards .gc { width: 128px; } }
@media (prefers-reduced-motion: reduce) { .gc-media { transition: none; } .gc:hover .gc-media { transform: none; } }

/* Lo próximo en móvil: franjas apiladas, fichas en 2 columnas, nada cortado */
@media (max-width: 620px) {
  .next2 { padding: 18px 16px 16px; }
  .n2-head { padding-right: 0; }
  .n2-head h2 { font-size: 24px; }
  .n2-side .ns-arrow { display: none; }
  .n2-row { display: grid; overflow: visible; padding: 0; scroll-snap-type: none; gap: 0; }
  .slot { margin: 0; padding: 14px 0; border-right: 0; border-top: 1px dashed var(--line); }
  .slot:first-child { border-top: 0; padding-top: 0; }
  .slot.more { display: none; }
  .slot-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .slot-cards .gc { width: auto; min-width: 0; }
}

/* Skills agrupadas por app */
.sk-app { margin: 0 0 28px; }
.sk-app-h { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 2px solid color-mix(in srgb, var(--app) 30%, transparent); }
.sk-app-h h2 { margin: 0; font: 800 22px/1.1 var(--display); letter-spacing: -.02em; }
.sk-app-h .mut { font-size: 13px; }
.sk-app-dot { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--app); color: #fff; font: 800 18px/1 var(--display); flex: none; }
.sk-app .sk-ic { background: color-mix(in srgb, var(--app) 13%, transparent); color: var(--app); }
.sk-app .sk-card { border-top: 4px solid var(--app); }
.sk-appsel { flex: none; max-width: 120px; font-size: 12.5px; padding: 5px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }

/* Tarjeta de skill ordenada */
.sk-app .sk-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.sk-app .sk-card { background: var(--sheet); border: 1px solid var(--line); border-top: 4px solid var(--app); border-radius: 20px; padding: 18px; gap: 14px; box-shadow: 0 10px 30px -24px rgb(0 0 0 / .4); }
.sk-card .sk-d { -webkit-line-clamp: 2; font-size: 13.5px; }
.sk-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sk-opts label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.sk-sel { width: 100%; font-family: inherit; font-weight: 600; font-size: 13.5px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); }
.sk-use { display: grid; gap: 10px; padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--app) 6%, var(--paper)); }
.sk-use-h { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.sk-plat { display: grid; grid-template-columns: 92px 1fr; gap: 8px; align-items: start; }
.sk-plat-n { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); padding-top: 4px; }
.sk-plat-n .pf { width: 18px; height: 18px; border-radius: 50%; }
.sk-plat-n .pf svg { width: 10px; height: 10px; }
.sk-acc { font-family: inherit; font-weight: 600; font-size: 12.5px; line-height: 1; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--sheet); color: var(--ink); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-acc[aria-pressed="true"] { background: var(--app); border-color: var(--app); color: #fff; }
.sk-card .sk-foot { padding-top: 12px; border-top: 1px solid var(--line); }
.linkbtn.danger { color: var(--err, #d4373c); }
@media (max-width: 520px) { .sk-app .sk-grid { grid-template-columns: 1fr; } .sk-plat { grid-template-columns: 1fr; gap: 4px; } }

/* Informe semanal visual */
.inf2 { margin: 4px 0 24px; padding: 22px; border-radius: var(--r-lg); background: var(--sheet); border: 1px solid var(--line); box-shadow: 0 10px 30px -24px rgb(0 0 0 / .4); display: grid; gap: 16px; }
.inf2-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.inf2-k { font-size: 13px; font-weight: 600; color: var(--signal); }
.inf2-h h2 { margin: 2px 0 0; font: 800 26px/1.1 var(--display); letter-spacing: -.02em; }
.inf2-intro { margin: 0; color: var(--ink-2, var(--muted)); font-size: 15px; max-width: 75ch; }
.inf-n { font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.inf2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.inf2-it { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 14px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); border-left: 4px solid #9AA59D; }
.inf2-it.up { border-left-color: #1f8a4c; } .inf2-it.down { border-left-color: #c2414b; }
.inf2-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; background: rgb(0 0 0 / .05); }
.inf2-it.up .inf2-ic { background: #e3f4ea; color: #1f8a4c; } .inf2-it.down .inf2-ic { background: #fbe5e7; color: #c2414b; }
.inf2-it b { display: block; font-size: 14.5px; line-height: 1.3; margin-bottom: 4px; }
.inf2-it p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2, var(--muted)); }
.inf2-acc { padding: 16px; border-radius: 16px; background: color-mix(in srgb, var(--signal) 7%, var(--paper)); display: grid; gap: 8px; }
.inf2-acc-h { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; margin-bottom: 4px; }
.inf2-acc-h b { font-size: 16px; }
.inf2-bar { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: rgb(0 0 0 / .08); overflow: hidden; }
.inf2-bar i { display: block; height: 100%; background: var(--signal); border-radius: 99px; transition: width .3s; }
.inf2-todo { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 12px; background: var(--sheet); cursor: pointer; font-size: 14px; line-height: 1.45; }
.inf2-todo input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--signal); }
.inf2-todo.done span { text-decoration: line-through; opacity: .55; }
.inf2-nota { margin: 0; font-size: 12.5px; color: var(--muted); }
.inf2-pc { display: grid; gap: 10px; }
.inf2-pc-t { font-size: 16px; }
.inf2-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.inf2-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.inf2-tab[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.inf2-c { padding: 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); }
.inf2-cif { margin: 0 0 6px; font-size: 14px; }
.inf2-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 16px; }

/* Renovar Meta */
.meta-renew { margin: 0 0 22px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--sheet); border: 1px solid var(--line); display: grid; gap: 12px; }
.meta-renew.urge { border-color: #f0b4a0; background: color-mix(in srgb, var(--signal) 6%, var(--sheet)); }
.mr-h { display: flex; gap: 14px; align-items: flex-start; }
.mr-h h2 { margin: 0; font: 800 20px/1.2 var(--display); }
.mr-h p { margin: 4px 0 0; }
.mr-ic { display: flex; flex: none; } .mr-ic .pf { width: 32px; height: 32px; border-radius: 50%; } .mr-ic .pf + .pf { margin-left: -8px; }
.mr-form { display: flex; gap: 10px; flex-wrap: wrap; }
.mr-form input { flex: 1; min-width: 220px; }
.perm-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.perm-list code { font-size: 12px; padding: 2px 6px; border-radius: 6px; background: rgb(0 0 0 / .06); }
.mr-list { display: flex; flex-wrap: wrap; gap: 6px; }
.mr-acc { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; }
.mr-acc .pf { width: 18px; height: 18px; border-radius: 50%; } .mr-acc .pf svg { width: 10px; height: 10px; }
.mr-acc i { font-style: normal; font-weight: 500; color: var(--muted); }
.mr-acc[data-st="go"] { opacity: .6; } .mr-acc[data-st="ok"] { border-color: #1f8a4c; background: #e3f4ea; } .mr-acc[data-st="ko"] { border-color: #c2414b; background: #fbe5e7; }
.mr-steps { display: grid; gap: 14px; margin-top: 10px; }
.mr-steps section { padding: 12px 14px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
.mr-steps h4 { margin: 0 0 6px; font-size: 14.5px; }
.mr-steps ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; line-height: 1.5; }
.mr-steps code { font-size: 12px; padding: 1px 5px; border-radius: 5px; background: rgb(0 0 0 / .06); }

/* Fichas: que nada tape el texto de arriba del vídeo */
.gc-media .pc-fmt { top: auto; bottom: 8px; right: 8px; }
.gc-media .pc-st { bottom: 8px; left: 8px; max-width: calc(100% - 60px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-media .pc-time { top: auto; bottom: 8px; left: 8px; }
.gc-title { -webkit-line-clamp: 3; }

/* Marca: el icono de Parrilla en vez del punto */
.brand i, .lp-brand i { width: 28px; height: 28px; border-radius: 8px; background: url(/icon.svg) center/cover no-repeat; box-shadow: 0 4px 10px -4px rgba(242,68,14,.55); }

/* ===== Portada estilo Postiz, con la marca de Parrilla ===== */
.lp2-hero { text-align: center; padding: 72px 0 40px; display: flex; flex-direction: column; align-items: center; }
.lp2-hero .lp-badge { margin-bottom: 18px; }
.lp2-hero h1 { font-family: var(--display); font-size: clamp(40px, 6.2vw, 78px); line-height: 1.02; font-weight: 800; letter-spacing: -.05em; margin: 0 auto 22px; max-width: 16ch; text-wrap: balance; }
.lp2-rot { position: relative; display: inline-block; color: var(--signal); white-space: nowrap; }
#lp-rot { display: inline-block; transition: opacity .25s, transform .25s; }
#lp-rot.out { opacity: 0; transform: translateY(.25em); }
.lp2-ul { position: absolute; left: -2%; right: -2%; bottom: -.18em; width: 104%; height: .32em; overflow: visible; }
.lp2-ul path { fill: none; stroke: var(--signal); stroke-width: 6; stroke-linecap: round; opacity: .85; }
.lp2-lead { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.55; color: var(--ink-2); max-width: 56ch; margin: 0 auto 28px; }
.lp2-wait { margin: 0 auto; width: 100%; }
.lp2-paths { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 18px 0 0; }
.lp2-path { display: grid; gap: 2px; text-align: left; padding: 12px 18px; border-radius: 18px; border: 1.5px dashed color-mix(in srgb, var(--signal) 45%, transparent); text-decoration: none; color: var(--ink); background: color-mix(in srgb, var(--signal) 4%, transparent); transition: background .15s, border-color .15s; }
.lp2-path:hover { background: color-mix(in srgb, var(--signal) 10%, transparent); border-style: solid; }
.lp2-path b { font-size: 15px; } .lp2-path small { color: var(--muted); font-size: 13px; }
.lp2-nets { display: flex; align-items: center; gap: 10px; margin: 26px 0 0; color: var(--muted); font-size: 14px; }
.lp2-net { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.lp2-net svg { width: 18px; height: 18px; }
.lp2-net.tiktok { background: #111; } .lp2-net.instagram { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); } .lp2-net.threads { background: #000; } .lp2-net.facebook { background: #1877F2; }
.lp2-shot { position: relative; width: 100%; max-width: 1120px; margin: 48px auto 0; padding-bottom: 40px; }
.lp2-browser { border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 40px 90px -40px rgba(17,24,39,.45), 0 0 0 1px rgba(17,24,39,.08); transform: perspective(1600px) rotateX(4deg); transform-origin: top center; }
.lp2-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #F4F4F6; border-bottom: 1px solid rgba(17,24,39,.06); }
.lp2-bar i { width: 10px; height: 10px; border-radius: 50%; background: #E0E0E5; } .lp2-bar i:first-child { background: #FF6157; } .lp2-bar i:nth-child(2) { background: #FFC12F; } .lp2-bar i:nth-child(3) { background: #2ACB42; }
.lp2-bar span { margin: 0 auto; font-size: 12px; color: var(--muted); padding: 3px 14px; border-radius: 8px; background: #fff; }
.lp2-browser img { width: 100%; height: auto; }
.lp2-phone { position: absolute; right: -10px; bottom: -30px; transform: scale(.78); transform-origin: bottom right; text-align: left; }
.lp2-k { display: inline-block; font-size: 13px; font-weight: 700; color: var(--signal); margin-bottom: 8px; }
.lp2-cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.lp2-card { padding: 22px; border-radius: 24px; background: var(--lg); box-shadow: var(--rim); }
.lp2-card h3 { margin: 12px 0 6px; font: 800 19px/1.2 var(--display); letter-spacing: -.02em; }
.lp2-card p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.lp2-emo { width: 46px; height: 46px; display: grid; place-items: center; font-size: 24px; border-radius: 14px; background: color-mix(in srgb, var(--signal) 10%, #fff); }
.lp2-ais { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.lp2-ai { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 18px; border-radius: 22px; background: var(--lg); box-shadow: var(--rim); }
.lp2-ai:first-child { box-shadow: 0 0 0 2px var(--signal), var(--rim); }
.lp2-mono { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--ink); color: #fff; font: 800 16px/1 var(--display); }
.lp2-ai:first-child .lp2-mono { background: var(--signal); }
.lp2-ai h3 { margin: 2px 0 4px; font-size: 16.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lp2-ai h3 em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--signal); background: color-mix(in srgb, var(--signal) 12%, #fff); padding: 2px 8px; border-radius: 99px; }
.lp2-ai p { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.lp2-rows h2 { margin-bottom: 30px; }
.lp2-row { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: center; padding: 34px 0; }
.lp2-row.alt { grid-template-columns: 1.15fr .85fr; }
.lp2-row.alt .lp2-txt { order: 2; }
.lp2-txt h3 { margin: 0 0 10px; font: 800 clamp(24px, 2.6vw, 32px)/1.1 var(--display); letter-spacing: -.035em; }
.lp2-txt p { margin: 0 0 14px; color: var(--ink-2); font-size: 16.5px; line-height: 1.55; max-width: 46ch; }
.lp2-txt ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.lp2-txt li { display: flex; gap: 10px; font-size: 15px; }
.lp2-txt li::before { content: "✓"; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: var(--signal); }
.lp2-media img { width: 100%; height: auto; border-radius: 20px; box-shadow: 0 30px 70px -36px rgba(17,24,39,.45), 0 0 0 1px rgba(17,24,39,.07); background: #fff; }
.lp2-box { padding: 26px; border-radius: 26px; background: var(--lg); box-shadow: var(--rim); min-height: 240px; display: grid; align-content: center; gap: 14px; }
.lp2-netgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.lp2-netc { display: grid; justify-items: start; gap: 8px; padding: 20px; border-radius: 22px; background: var(--lg); box-shadow: var(--rim); }
.lp2-netc .lp2-net { width: 44px; height: 44px; border-radius: 13px; } .lp2-netc .lp2-net svg { width: 22px; height: 22px; }
.lp2-netc b { font-size: 17px; } .lp2-netc span { color: var(--ink-2); font-size: 14px; }
#lp-resenas .res-grid { display: block; columns: 3 280px; column-gap: 14px; }
#lp-resenas .res-card { break-inside: avoid; margin: 0 0 14px; }
.lp2-cta { position: relative; overflow: hidden; background: radial-gradient(120% 140% at 0% 0%, #FF7A3D 0%, #F2440E 55%, #C7330A 100%); }
.lp2-cta h2 { max-width: 20ch; margin-left: auto; margin-right: auto; }
.lp2-cta p { color: rgba(255,255,255,.85); }
.lp2-cta .btn.signal { background: #fff; color: #C7330A; }
.lp2-cta-ic { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 18px; box-shadow: 0 0 0 4px rgba(255,255,255,.25); }
.lp2-doodle { position: absolute; right: 8%; bottom: 18%; width: 120px; }
.lp2-doodle path { fill: none; stroke: rgba(255,255,255,.7); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) {
  .lp2-cards3, .lp2-netgrid { grid-template-columns: 1fr 1fr; }
  .lp2-row, .lp2-row.alt { grid-template-columns: 1fr; gap: 22px; }
  .lp2-row.alt .lp2-txt { order: 0; }
  .lp2-phone { display: none; }
  .lp2-browser { transform: none; }
}
@media (max-width: 560px) {
  .lp2-hero { padding-top: 44px; }
  .lp2-cards3, .lp2-netgrid { grid-template-columns: 1fr; }
  .lp2-paths { flex-direction: column; width: 100%; }
  .lp2-doodle { display: none; }
}
@media (prefers-reduced-motion: reduce) { #lp-rot { transition: none; } }

/* ===== Portada v3: estilo iOS de cristal, botones 3D y movimiento al hacer scroll ===== */
.lp3 { overflow-x: clip; }
.lp3 .lp-top { max-width: 1180px; transition: background .3s, box-shadow .3s; }
.lp3 .lp-top.tight { max-width: 1180px; }
.lp3 .lp-top.solid { background: rgba(255,255,255,.86); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 10px 30px -12px rgba(17,24,39,.22), 0 0 0 1px rgba(17,24,39,.05); }
/* Botones 3D */
.lp3 .btn:not(.pl-go) { border-radius: 999px; transition: transform .12s, box-shadow .12s, filter .15s; }
.lp3 .btn.signal:not(.pl-go) { background: linear-gradient(180deg, #FF8A55 0%, #FF5A1F 55%, #EE4510 100%); border: 0; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(150,40,0,.25), 0 4px 0 #C7380A, 0 10px 22px -8px rgba(242,68,14,.7); }
.lp3 .btn.signal:not(.pl-go):hover { filter: brightness(1.05); }
.lp3 .btn.signal:not(.pl-go):active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 0 #C7380A, 0 4px 10px -6px rgba(242,68,14,.7); }
.lp3 .btn.ghost:not(.pl-go) { background: linear-gradient(180deg, #fff, #F1F2F5); border: 0; box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(17,24,39,.08), 0 3px 0 rgba(17,24,39,.08), 0 8px 18px -10px rgba(17,24,39,.3); }
.lp3 .btn.ghost:not(.pl-go):active { transform: translateY(2px); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(17,24,39,.08), 0 1px 0 rgba(17,24,39,.08); }
/* Aparecer */
.lp3 [data-rev] { opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--d, 0) * 90ms); }
.lp3 [data-rev].in { opacity: 1; transform: none; }
.lp3 .sec-h { text-align: center; max-width: 720px; margin: 0 auto 34px; }
.lp3 .sec-h .lp-sub { margin: 8px auto 0; }
.lp3 .lp-sec h2 { font-family: var(--display); text-wrap: balance; }
/* Hero */
.h3 { text-align: center; padding: 70px 0 10px; display: flex; flex-direction: column; align-items: center; }
.h3 h1 { font-family: var(--display); font-size: clamp(42px, 6.6vw, 84px); line-height: 1; font-weight: 800; letter-spacing: -.055em; margin: 6px auto 20px; max-width: 14ch; }
.h3-lead { font-size: clamp(17px, 1.8vw, 21px); color: var(--ink-2); max-width: 46ch; margin: 0 auto 26px; line-height: 1.5; }
.h3-wait { margin: 0 auto; width: 100%; }
.h3-stage { width: 100%; max-width: 1080px; margin: 52px auto 0; perspective: 1800px; }
/* Panel simulado */
.mk { position: relative; border-radius: 26px; background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px rgba(17,24,39,.06), 0 50px 100px -40px rgba(17,24,39,.45); text-align: left; transform: rotateX(8deg); transform-origin: 50% 0; transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.h3-stage.in .mk { transform: rotateX(0); }
.mk-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid rgba(17,24,39,.06); }
.mk-bar i { width: 11px; height: 11px; border-radius: 50%; background: #FF6157; } .mk-bar i:nth-child(2) { background: #FFC12F; } .mk-bar i:nth-child(3) { background: #2ACB42; }
.mk-bar span { margin: 0 auto; font-size: 12px; color: var(--muted); background: rgba(17,24,39,.05); padding: 4px 16px; border-radius: 8px; }
.mk-body { display: grid; grid-template-columns: 190px 1fr; min-height: 430px; }
.mk-side { display: flex; flex-direction: column; gap: 4px; padding: 18px 12px; border-right: 1px solid rgba(17,24,39,.06); }
.mk-brand { display: flex; align-items: center; gap: 8px; font: 800 17px/1 var(--display); letter-spacing: -.03em; margin: 0 6px 14px; }
.mk-brand img { width: 26px; height: 26px; border-radius: 7px; }
.mk-side span { font-size: 13.5px; color: var(--ink-2); padding: 8px 10px; border-radius: 10px; }
.mk-side span.on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 2px 8px -4px rgba(17,24,39,.25); }
.mk-main { padding: 22px 24px; min-width: 0; }
.mk-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.mk-h > div > b { display: block; font: 800 22px/1.1 var(--display); letter-spacing: -.03em; }
.mk-h small { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.mk-h small i { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px rgba(255,90,31,.2); }
.mk-pill { font-size: 12px; color: var(--muted); }
.mk-slots { display: flex; gap: 0; overflow: hidden; }
.mk-slot { padding-right: 16px; margin-right: 16px; border-right: 1px dashed rgba(17,24,39,.12); flex: none; }
.mk-slot:last-child { border: 0; }
.mk-slot p { margin: 0 0 10px; font-size: 12px; color: var(--muted); } .mk-slot p b { font: 800 17px/1 var(--display); color: var(--ink); margin-right: 4px; }
.mk-slot.first p b { color: var(--signal); }
.mk-cards { display: flex; gap: 10px; }
.mk-card { width: 132px; display: grid; gap: 6px; }
.mk-slot.first .sim { box-shadow: 0 0 0 2px var(--signal); }
.mk-ct { font-size: 12px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mk-acc { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); }
.mk-acc svg { width: 11px; height: 11px; }
.mk-toast { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 16px; font-size: 13px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 18px 40px -16px rgba(17,24,39,.4), 0 0 0 1px rgba(17,24,39,.05); animation: mkf 6s ease-in-out infinite; }
.mk-toast img { width: 30px; height: 30px; border-radius: 8px; }
.mk-toast.t1 { right: -24px; top: 96px; } .mk-toast.t2 { left: -28px; bottom: 60px; animation-delay: -3s; }
.mk-ok { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #E3F4EA; color: #1F8A4C; } .mk-ok svg { width: 16px; height: 16px; }
@keyframes mkf { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
/* Miniaturas simuladas */
.sim { position: relative; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; background: linear-gradient(160deg, var(--c1), var(--c2)); display: flex; align-items: center; justify-content: center; padding: 10px; }
.sim::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 50% at 50% 0%, rgba(255,255,255,.35), transparent 70%); }
.sim-t { position: relative; z-index: 1; color: #fff; font: 800 13px/1.15 var(--display); text-align: center; letter-spacing: -.01em; text-shadow: 0 2px 10px rgba(0,0,0,.25); }
.sim.big .sim-t { font-size: 19px; }
.sim-play { position: absolute; z-index: 1; right: 7px; bottom: 7px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.35); color: #fff; } .sim-play svg { width: 11px; height: 11px; }
.sim-dots { position: absolute; z-index: 1; bottom: 8px; left: 0; right: 0; display: flex; justify-content: center; gap: 3px; } .sim-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.5); } .sim-dots i.on { background: #fff; }
/* Cintas de redes */
.mqs { width: 100vw; margin: 46px calc(50% - 50vw) 0; display: grid; gap: 6px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.mq { overflow: hidden; }
.mq-in { display: flex; width: max-content; animation: mq 38s linear infinite; }
.mq.rev .mq-in { animation-direction: reverse; animation-duration: 46s; }
.mq-g { display: flex; align-items: center; flex: none; }
.mq-it { display: inline-flex; align-items: center; gap: 12px; padding: 0 22px; font: 800 clamp(26px, 4vw, 46px)/1.25 var(--display); letter-spacing: -.04em; color: var(--signal); white-space: nowrap; }
.mq-it svg { width: .8em; height: .8em; }
.mq.rev .mq-it { color: transparent; -webkit-text-stroke: 1.4px color-mix(in srgb, var(--signal) 70%, transparent); }
.mq-sep { font-style: normal; color: color-mix(in srgb, var(--signal) 45%, transparent); font-size: 20px; }
@keyframes mq { to { transform: translateX(-50%); } }
/* Para quién */
.who3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding-top: 50px; }
.who3-c { display: flex; gap: 14px; padding: 6px 26px; border-left: 1px solid var(--line); }
.who3-c:first-child { border-left: 0; padding-left: 0; }
.who3-ic { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: var(--signal); background: color-mix(in srgb, var(--signal) 9%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--signal) 18%, transparent); }
.who3-ic svg { width: 22px; height: 22px; }
.who3-c h3 { margin: 2px 0 4px; font: 700 17px/1.2 var(--display); }
.who3-c p { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
/* Puerta giratoria */
.ring-wrap { width: 100vw; margin: 0 calc(50% - 50vw); height: 600px; perspective: 1500px; display: grid; place-items: center; cursor: grab; touch-action: pan-y; user-select: none; overflow: hidden; }
.ring-wrap:active { cursor: grabbing; }
.ring { --a: 0deg; --r: 560px; position: relative; width: 210px; height: 470px; transform-style: preserve-3d; transform: translateZ(calc(var(--r) * -1)) rotateY(var(--a)); }
.ring-it { position: absolute; inset: 0; margin: 0; transform: rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--r)); backface-visibility: hidden; display: grid; gap: 10px; align-content: start; }
.ring-ph { position: relative; aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; background: #111; box-shadow: 0 0 0 6px #111, 0 30px 60px -24px rgba(17,24,39,.55); }
.ring-ph img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ring-ph .sim { position: absolute; inset: 0; border-radius: 0; padding: 22px; }
.ring-cap { position: absolute; left: 12px; right: 12px; top: 26%; color: #fff; font: 800 16px/1.2 var(--display); text-align: center; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.ring-top { position: absolute; top: 12px; left: 12px; font-size: 11px; font-weight: 700; color: #fff; padding: 4px 9px; border-radius: 99px; background: rgba(0,0,0,.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ring-it figcaption { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 0 4px; }
.ring-acc { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; } .ring-acc svg { width: 13px; height: 13px; }
.ring-it figcaption b { color: var(--signal); font-size: 13px; }
.ring-it figcaption b::after { content: " vistas"; color: var(--muted); font-weight: 500; }
/* Hub de IAs */
.hub { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto auto; gap: 14px; max-width: 980px; margin: 0 auto; position: relative; }
.hub-c { grid-column: 2; grid-row: 2; display: grid; justify-items: center; align-content: center; gap: 6px; padding: 22px; border-radius: 30px; position: relative;
  background: radial-gradient(70% 70% at 50% 40%, rgba(255,122,61,.18), transparent 70%); }
.hub-c::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 1.5px dashed color-mix(in srgb, var(--signal) 40%, transparent); animation: hubspin 30s linear infinite; }
.hub-c img { width: 76px; height: 76px; border-radius: 20px; box-shadow: 0 0 0 8px rgba(255,90,31,.12), 0 16px 34px -12px rgba(242,68,14,.6); position: relative; animation: hubp 3s ease-in-out infinite; }
.hub-c b { font: 800 18px/1 var(--display); position: relative; } .hub-c small { color: var(--muted); font-size: 12px; position: relative; }
@keyframes hubspin { to { transform: rotate(360deg); } } @keyframes hubp { 50% { box-shadow: 0 0 0 14px rgba(255,90,31,.08), 0 16px 34px -12px rgba(242,68,14,.6); } }
.hub-ai { display: grid; gap: 3px; padding: 16px 18px; border-radius: 22px; background: var(--lg); box-shadow: var(--rim); transition: transform .25s, box-shadow .25s; }
.hub-ai:hover { transform: translateY(-4px); }
.hub-ai b { font: 800 18px/1.1 var(--display); letter-spacing: -.02em; }
.hub-ai small { font-size: 11.5px; font-weight: 700; color: var(--signal); }
.hub-ai span { font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.hub-ai:nth-of-type(1) { grid-column: 1; grid-row: 1; } .hub-ai:nth-of-type(2) { grid-column: 2; grid-row: 1; } .hub-ai:nth-of-type(3) { grid-column: 3; grid-row: 1; }
.hub-ai:nth-of-type(4) { grid-column: 1; grid-row: 2; } .hub-ai:nth-of-type(5) { grid-column: 3; grid-row: 2; } .hub-ai:nth-of-type(6) { grid-column: 2; grid-row: 3; }
.hub-ai:nth-of-type(1) { box-shadow: 0 0 0 2px var(--signal), var(--rim); }
/* Qué hace: escaparate fijo + pasos */
.q3-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }
.q3-stage { position: sticky; top: 110px; height: 440px; border-radius: 30px; background: var(--lg); box-shadow: var(--rim); overflow: hidden; }
.q3-v { position: absolute; inset: 0; display: grid; place-items: center; padding: 34px; opacity: 0; transform: translateY(20px) scale(.97); transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.q3-v.on { opacity: 1; transform: none; pointer-events: auto; }
.q3-v > * { width: 100%; max-width: 440px; }
.q3-steps { display: grid; }
.q3-s { min-height: 52vh; display: flex; flex-direction: column; justify-content: center; opacity: .3; transition: opacity .4s; }
.q3-s.on { opacity: 1; }
.q3-s h3 { margin: 0 0 8px; font: 800 clamp(26px, 2.8vw, 36px)/1.05 var(--display); letter-spacing: -.04em; }
.q3-s p { margin: 0 0 14px; font-size: 17px; color: var(--ink-2); line-height: 1.5; max-width: 34ch; }
.q3-s ul { margin: 0; padding: 0; list-style: none; display: flex; gap: 8px; flex-wrap: wrap; }
.q3-s li { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; padding: 6px 12px 6px 8px; border-radius: 99px; background: color-mix(in srgb, var(--signal) 9%, #fff); }
.q3-s li svg, .stg-sk li svg { width: 15px; height: 15px; color: var(--signal); }
.q3-mob { display: none; }
.stg-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; } .stg-h b { font: 800 20px/1 var(--display); } .stg-h span { font-size: 12.5px; color: var(--muted); }
.stg-car { position: relative; height: 300px; }
.stg-car span { position: absolute; left: 50%; top: 50%; width: 170px; aspect-ratio: 4 / 5; padding: 16px; border-radius: 18px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; color: #fff; font: 800 17px/1.15 var(--display);
  background: linear-gradient(160deg, #FF8A55, #F2440E); box-shadow: 0 20px 40px -18px rgba(17,24,39,.5); transform: translate(calc(-50% + (var(--n) - 1.5) * 64px), -50%) rotate(calc((var(--n) - 1.5) * 6deg)); }
.stg-car span:nth-child(2) { background: linear-gradient(160deg, #2C2C34, #111); } .stg-car span:nth-child(3) { background: linear-gradient(160deg, #8EC5FF, #3D7BE6); } .stg-car span:nth-child(4) { background: linear-gradient(160deg, #B8E6C9, #2F9A60); }
.stg-car b { font-size: 11px; opacity: .8; }
.stg-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #fff; margin-bottom: 8px; font-size: 13.5px; box-shadow: 0 0 0 1px rgba(17,24,39,.05); }
.stg-row i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-style: normal; font-weight: 800; background: #EEE; }
.stg-row.up i { background: #E3F4EA; color: #1F8A4C; } .stg-row.down i { background: #FBE5E7; color: #C2414B; }
.stg-row em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--signal); }
.stg-inf .bx-bars { margin-top: 12px; }
.stg-sk { padding: 18px; border-radius: 20px; background: #fff; border-top: 4px solid var(--signal); box-shadow: 0 0 0 1px rgba(17,24,39,.05), 0 20px 40px -24px rgba(17,24,39,.4); }
.stg-skh { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; } .stg-skh b { display: block; } .stg-skh small { color: var(--muted); font-size: 12.5px; }
.stg-skd { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--signal); color: #fff; font: 800 18px/1 var(--display); }
.stg-sk ul { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 8px; } .stg-sk li { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.stg-skc { display: inline-block; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 99px; background: #F1F2F5; }
/* Empezar en 3 pasos */
.con3-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; }
.con3-row::before { content: ""; position: absolute; left: 16%; right: 16%; top: 34px; border-top: 2px dashed color-mix(in srgb, var(--signal) 40%, transparent); }
.con3-c { position: relative; display: grid; justify-items: center; text-align: center; gap: 8px; padding: 0 20px 24px; border-radius: 28px; background: var(--lg); box-shadow: var(--rim); margin-top: 34px; }
.con3-n { width: 64px; height: 64px; margin-top: -32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 800 26px/1 var(--display);
  background: linear-gradient(180deg, #FF8A55, #F2440E); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 4px 0 #C7380A, 0 12px 24px -10px rgba(242,68,14,.7); }
.con3-c h3 { margin: 8px 0 0; font: 800 20px/1.15 var(--display); letter-spacing: -.02em; }
.con3-c p { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.5; max-width: 28ch; }
.con3-v { margin-top: 10px; min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.con3-net { position: relative; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 1px rgba(17,24,39,.07), 0 8px 16px -10px rgba(17,24,39,.35); }
.con3-net svg { width: 20px; height: 20px; }
.con3-net i { position: absolute; right: -5px; top: -5px; width: 18px; height: 18px; border-radius: 50%; background: #1F8A4C; color: #fff; display: grid; place-items: center; transform: scale(0); transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.con3-net i svg { width: 11px; height: 11px; }
.con3-c.in .con3-net i { transform: scale(1); } .con3-c.in .con3-net:nth-child(2) i { transition-delay: .15s; } .con3-c.in .con3-net:nth-child(3) i { transition-delay: .3s; } .con3-c.in .con3-net:nth-child(4) i { transition-delay: .45s; }
.con3-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(17,24,39,.07); font-size: 13px; }
.con3-link svg { width: 16px; height: 16px; color: var(--signal); } .con3-link code i { color: var(--signal); font-style: normal; }
.con3-link b { font-size: 12px; color: #fff; background: var(--ink); padding: 5px 10px; border-radius: 9px; }
.con3-rut { display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(17,24,39,.07); text-align: left; }
.con3-rut > svg { width: 20px; height: 20px; color: var(--signal); } .con3-rut b { display: block; font-size: 13.5px; } .con3-rut small { font-size: 12px; color: var(--muted); }
.con3-sw { width: 40px; height: 24px; border-radius: 99px; background: #D8DAE0; position: relative; transition: background .3s .4s; }
.con3-sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform .3s .4s; }
.con3-c.in .con3-sw { background: #34C759; } .con3-c.in .con3-sw::after { transform: translateX(16px); }
.lp3 #lp-faq .lp-faq { margin: 0 auto; }
.lp3 .lp2-cta { margin-top: 30px; }
@media (max-width: 900px) {
  .mk-body { grid-template-columns: 1fr; } .mk-side { display: none; }
  .mk-toast.t1 { right: 8px; top: -18px; } .mk-toast.t2 { left: 8px; bottom: -18px; }
  .who3 { grid-template-columns: 1fr; gap: 18px; } .who3-c, .who3-c:first-child { border: 0; padding: 0; }
  .hub { grid-template-columns: 1fr 1fr; } .hub > * { grid-column: auto !important; grid-row: auto !important; } .hub-c { grid-column: 1 / -1 !important; order: -1; }
  .q3-grid { grid-template-columns: 1fr; } .q3-stage { display: none; } .q3-s { min-height: 0; opacity: 1; padding: 22px 0; }
  .q3-mob { display: block; margin-top: 18px; padding: 22px; border-radius: 24px; background: var(--lg); box-shadow: var(--rim); }
  .con3-row { grid-template-columns: 1fr; gap: 40px; } .con3-row::before { display: none; }
  .ring-wrap { height: 520px; } .ring { --r: 380px; width: 180px; height: 400px; }
}
@media (max-width: 560px) {
  .h3 { padding-top: 40px; } .mk-cards .mk-card:nth-child(2) { display: none; } .mk-card { width: 110px; }
  .hub { grid-template-columns: 1fr; }
  .ring { --r: 300px; width: 160px; height: 360px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp3 [data-rev] { opacity: 1; transform: none; transition: none; }
  .mq-in, .mk-toast, .hub-c::before, .hub-c img { animation: none; }
  .mk { transform: none; }
}
.hub-ai { align-self: center; }
.mk-toast.t1 { top: 150px; }
.stg-car span { width: 150px; transform: translate(calc(-50% + (var(--n) - 1.5) * 92px), -50%) rotate(calc((var(--n) - 1.5) * 5deg)); font-size: 15px; }

/* ===== Portada v4 · identidad visual de Parrilla =====
   Brasa #FF5A1F (acción) · Ascua #FFB37A (luz) · Carbón #17211B (texto y fondos oscuros) · Ceniza #F5F3EF (papel) · Humo #7A8B80 (secundario)
   Tipos: Bricolage Grotesque (titulares) + Inter (texto) */
.lp4 { --brasa: #FF5A1F; --ascua: #FFB37A; --carbon: #17211B; --ceniza: #F5F3EF; --humo: #7A8B80; --signal: var(--brasa);
  --display: "Bricolage Grotesque", "Inter", system-ui, sans-serif; max-width: 1360px; }
.lp4 h1, .lp4 h2, .lp4 h3, .lp4 .lp-brand { font-family: var(--display); }
.lp4 .lp-top { max-width: 1360px; }
.lp4 .h3 h1 { font-size: clamp(46px, 7vw, 104px); max-width: 13ch; }
.lp4 .h3-stage { max-width: 1240px; }
.lp4 .lp-sec h2 { font-size: clamp(34px, 4.2vw, 60px); letter-spacing: -.045em; line-height: 1.02; }
/* Miniaturas con imagen */
.lp4 .sim { background: #222; padding: 0; }
.lp4 .sim img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp4 .sim::after { background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.55)); z-index: 0; }
.lp4 .sim-t { position: absolute; left: 8px; right: 8px; bottom: 26px; font-size: 11.5px; text-align: left; }
.lp4 .mk-card { width: 150px; }
/* Cintas de borde a borde, naranja macizo */
.lp4 .mqs { -webkit-mask-image: none; mask-image: none; margin-top: 70px; gap: 0; border-block: 1px solid color-mix(in srgb, var(--brasa) 18%, transparent); padding: 10px 0; }
.lp4 .mq-it { color: var(--brasa); -webkit-text-stroke: 0; font-size: clamp(30px, 4.6vw, 64px); }
.lp4 .mq.rev .mq-it { color: var(--brasa); -webkit-text-stroke: 0; opacity: 1; }
.lp4 .mq-sep { color: var(--ascua); font-size: 26px; }
.lp4 .mq-in { animation-duration: 55s; } .lp4 .mq.rev .mq-in { animation-duration: 62s; }
/* Muro de ejemplos */
.wall { width: 100vw; margin: 10px calc(50% - 50vw) 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; padding: 40px max(22px, calc(50vw - 680px)) 60px; overflow: hidden; }
.wall-col { display: grid; gap: 22px; align-content: start; will-change: transform; }
.wall-col:nth-child(2), .wall-col:nth-child(4) { margin-top: 70px; }
.wall-it { margin: 0; display: grid; gap: 10px; }
.wall-ph { position: relative; aspect-ratio: 9 / 16; border-radius: 26px; overflow: hidden; background: #111; box-shadow: 0 0 0 5px #111, 0 30px 60px -28px rgba(23,33,27,.6); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.wall-it:hover .wall-ph { transform: translateY(-6px) rotate(-1deg); }
.wall-ph img { width: 100%; height: 100%; object-fit: cover; }
.wall-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.45)); }
.wall-cap { position: absolute; z-index: 1; left: 14px; right: 14px; top: 22%; color: #fff; font: 800 clamp(15px, 1.3vw, 19px)/1.15 var(--display); text-align: center; text-shadow: 0 2px 14px rgba(0,0,0,.7); }
.wall-k { position: absolute; z-index: 1; top: 12px; left: 12px; font-size: 11px; font-weight: 700; color: #fff; padding: 4px 9px; border-radius: 99px; background: rgba(0,0,0,.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.wall-it figcaption { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 0 4px; }
.wall-it figcaption b { color: var(--brasa); } .wall-it figcaption b::after { content: " vistas"; color: var(--muted); font-weight: 500; }
/* Sección oscura con órbita 3D */
.dark4 { width: 100vw; margin: 60px calc(50% - 50vw); background: radial-gradient(60% 80% at 75% 50%, #2A3A30 0%, var(--carbon) 60%); color: #fff; overflow: hidden; }
.dark4-in { max-width: 1360px; margin: 0 auto; padding: 90px 22px; display: grid; grid-template-columns: .85fr 1.15fr; gap: 40px; align-items: center; }
.dark4-txt h2 { color: #fff; font-size: clamp(34px, 4.2vw, 60px); letter-spacing: -.045em; line-height: 1.02; margin: 0 0 16px; }
.dark4-txt p { color: rgba(255,255,255,.72); font-size: 18px; line-height: 1.55; max-width: 40ch; margin: 0 0 20px; }
.dark4-txt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dark4-txt li { display: flex; gap: 10px; align-items: center; font-size: 15.5px; color: rgba(255,255,255,.9); }
.dark4-txt li svg { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--brasa); color: #fff; }
.orb { height: 560px; perspective: 1200px; display: grid; place-items: center; }
.orb-scene { position: relative; width: 460px; height: 460px; transform-style: preserve-3d; transform: rotateX(-10deg); }
.orb-core { position: absolute; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #FFB37A, #FF5A1F 45%, #B8320A 100%); box-shadow: 0 0 80px 10px rgba(255,90,31,.45), inset -12px -16px 30px rgba(0,0,0,.35), inset 10px 12px 24px rgba(255,255,255,.35); animation: core 4s ease-in-out infinite; }
.orb-core img { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 8px 20px rgba(0,0,0,.35); }
.orb-glow { position: absolute; inset: -60px; border-radius: 50%; background: radial-gradient(circle, rgba(255,122,61,.3), transparent 65%); }
@keyframes core { 50% { transform: scale(1.04); box-shadow: 0 0 110px 16px rgba(255,90,31,.5), inset -12px -16px 30px rgba(0,0,0,.35), inset 10px 12px 24px rgba(255,255,255,.35); } }
.orb-plane { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateZ(var(--tilt)) rotateX(72deg); }
.orb-ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(255,179,122,.35); transform-style: preserve-3d; animation: orbspin var(--dur) linear infinite; }
.orb-plane:nth-child(3) .orb-ring { inset: -40px; } .orb-plane:nth-child(4) .orb-ring { inset: 30px; }
@keyframes orbspin { to { transform: rotateZ(360deg); } }
.orb-p { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateZ(var(--ang)) translateX(var(--rad, 230px)); }
.orb-plane:nth-child(3) .orb-p { --rad: 270px; } .orb-plane:nth-child(4) .orb-p { --rad: 200px; }
.orb-face { transform-style: preserve-3d; animation: orbface var(--dur) linear infinite; }
@keyframes orbface { from { transform: rotateZ(calc(var(--ang) * -1)) rotateX(-72deg) rotateZ(calc(var(--tilt) * -1)); } to { transform: rotateZ(calc(var(--ang) * -1 - 360deg)) rotateX(-72deg) rotateZ(calc(var(--tilt) * -1)); } }
.orb-pill { position: absolute; transform: translate(-50%, -50%); display: inline-grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; padding: 8px 14px 8px 8px; border-radius: 16px; white-space: nowrap;
  background: rgba(255,255,255,.1); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 1px rgba(255,255,255,.12), 0 12px 30px rgba(0,0,0,.35); color: #fff; }
.orb-pill i { grid-row: span 2; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font: 800 15px/1 var(--display); font-style: normal; background: #fff; color: var(--carbon); }
.orb-pill b { font: 700 15px/1.1 var(--display); } .orb-pill small { font-size: 11px; color: var(--ascua); }
/* Bento con imágenes */
.bt-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.bt { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 24px; border-radius: 30px; min-height: 340px; background: var(--lg); box-shadow: var(--rim); overflow: hidden;
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out, opacity .7s, box-shadow .3s; }
.bt.in { transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.bt:hover { box-shadow: var(--rim), 0 30px 60px -30px rgba(23,33,27,.35); }
.bt-cal { grid-column: span 4; } .bt-niv { grid-column: span 2; } .bt-car, .bt-inf, .bt-sk { grid-column: span 2; }
.bt-txt h3 { margin: 4px 0 4px; font-size: clamp(22px, 2vw, 28px); letter-spacing: -.035em; line-height: 1.05; } .bt-txt p { margin: 0; color: var(--ink-2); font-size: 15px; }
.bt-vis { flex: 1; display: grid; place-items: center; min-height: 0; }
.bt-cal .bt-vis { place-items: stretch; }
.bt-cal .bt-vis > div { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.bt-cal .bt-vis span { position: relative; aspect-ratio: 1; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(23,33,27,.06); padding: 6px; overflow: hidden; }
.bt-cal .bt-vis span b { position: relative; z-index: 1; font-size: 12px; color: var(--ink-2); }
.bt-cal .bt-vis span img { position: absolute; right: 6px; bottom: 6px; width: 42%; aspect-ratio: 9 / 16; height: auto; object-fit: cover; border-radius: 6px; box-shadow: 0 0 0 2px var(--c), 0 6px 12px -6px rgba(0,0,0,.4); }
.bt-cal .bt-vis span.today { background: var(--carbon); } .bt-cal .bt-vis span.today b { color: #fff; }
.bt-niv .bt-vis > div { width: 100%; }
.bt-car .bt-vis > div { position: relative; width: 100%; height: 220px; }
.bt-car .bt-vis span { position: absolute; left: 50%; top: 50%; width: 112px; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 30px -14px rgba(0,0,0,.5); transform: translate(calc(-50% + (var(--n) - 1.5) * 52px), -50%) rotate(calc((var(--n) - 1.5) * 7deg)); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.bt-car:hover .bt-vis span { transform: translate(calc(-50% + (var(--n) - 1.5) * 70px), -52%) rotate(calc((var(--n) - 1.5) * 9deg)); }
.bt-car .bt-vis span img { width: 100%; height: 100%; object-fit: cover; }
.bt-car .bt-vis span b { position: absolute; top: 8px; right: 8px; font-size: 10px; color: #fff; background: rgba(0,0,0,.4); padding: 2px 6px; border-radius: 99px; }
.bt-inf .bt-vis > div { width: 100%; }
.bt-sk .bt-vis > div { width: 100%; padding: 16px; border-radius: 18px; background: #fff; border-top: 4px solid var(--brasa); box-shadow: 0 0 0 1px rgba(23,33,27,.05); }
.bt-sk .stg-skh img { width: 40px; height: 40px; border-radius: 12px; object-fit: cover; }
.bt-sk ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .bt-sk li { display: flex; gap: 8px; align-items: center; font-size: 14px; } .bt-sk li svg { width: 15px; height: 15px; color: var(--brasa); }
/* Empezar: pasos tipo historias */
.st4-box { display: grid; grid-template-columns: .9fr 1.1fr; gap: 0; border-radius: 34px; overflow: hidden; background: var(--lg); box-shadow: var(--rim); min-height: 440px; }
.st4-list { list-style: none; margin: 0; padding: 26px; display: grid; gap: 10px; align-content: center; }
.st4-s { position: relative; width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; text-align: left; padding: 18px; border-radius: 22px; border: 0; background: transparent; cursor: pointer; font: inherit; color: var(--ink); overflow: hidden; transition: background .3s; }
.st4-s.on { background: #fff; box-shadow: 0 10px 30px -18px rgba(23,33,27,.35), 0 0 0 1px rgba(23,33,27,.05); }
.st4-n { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font: 800 20px/1 var(--display); color: var(--ink-2); background: rgba(23,33,27,.06); transition: all .3s; }
.st4-s.on .st4-n { color: #fff; background: linear-gradient(180deg, #FF8A55, #F2440E); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 3px 0 #C7380A, 0 10px 20px -8px rgba(242,68,14,.7); }
.st4-t b { display: block; font: 700 19px/1.2 var(--display); } .st4-t small { display: block; margin-top: 3px; font-size: 14px; color: var(--muted); line-height: 1.45; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s, opacity .4s; }
.st4-s.on .st4-t small { max-height: 80px; opacity: 1; }
.st4-bar { position: absolute; left: 18px; right: 18px; bottom: 8px; height: 3px; border-radius: 3px; background: rgba(23,33,27,.07); overflow: hidden; opacity: 0; }
.st4-s.on .st4-bar { opacity: 1; } .st4-bar i { display: block; height: 100%; width: 0; background: var(--brasa); }
.st4-s.run .st4-bar i { animation: stbar 4.5s linear forwards; } @keyframes stbar { to { width: 100%; } }
.st4-vis { position: relative; background: radial-gradient(90% 90% at 70% 30%, #FFE4D3, #FFF6F0 60%); }
.st4-v { position: absolute; inset: 0; display: grid; place-items: center; padding: 30px; opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .45s, transform .5s cubic-bezier(.2,.8,.2,1); }
.st4-v.on { opacity: 1; transform: none; }
.st4-v > div { width: 100%; max-width: 420px; display: grid; gap: 10px; }
.pv-row { display: grid; grid-template-columns: auto auto 1fr auto; gap: 10px; align-items: center; padding: 12px; border-radius: 16px; background: #fff; box-shadow: 0 10px 24px -16px rgba(23,33,27,.4), 0 0 0 1px rgba(23,33,27,.04); }
.st4-v.on .pv-row { animation: pvin .5s calc(var(--n) * .12s) both cubic-bezier(.2,.8,.2,1); } @keyframes pvin { from { opacity: 0; transform: translateX(20px); } }
.pv-row > img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.pv-net { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--carbon); color: #fff; } .pv-net svg { width: 13px; height: 13px; }
.pv-row b { display: block; font-size: 14.5px; } .pv-row small { font-size: 12.5px; color: var(--muted); }
.pv-ok { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #1F8A4C; background: #E3F4EA; padding: 4px 9px 4px 6px; border-radius: 99px; } .pv-ok svg { width: 13px; height: 13px; }
.pv-rut .pv-row { grid-template-columns: auto 1fr auto; }
.pv-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--brasa) 12%, #fff); color: var(--brasa); } .pv-ic svg { width: 19px; height: 19px; }
.con3-sw.on { background: #34C759; } .con3-sw.on::after { transform: translateX(16px); }
.pv-chat { padding: 20px; border-radius: 22px; background: #fff; box-shadow: 0 20px 40px -22px rgba(23,33,27,.45); }
.pv-ct b { display: block; font: 700 17px/1.2 var(--display); } .pv-ct small { color: var(--muted); font-size: 12.5px; }
.pv-in { display: grid; gap: 4px; font-size: 12px; color: var(--muted); } .pv-in code { font-size: 13px; color: var(--ink); padding: 9px 12px; border-radius: 12px; background: #F4F4F6; } .pv-in code i { color: var(--brasa); font-style: normal; }
.pv-btn { justify-self: end; font-size: 13px; font-weight: 700; color: #fff; padding: 8px 16px; border-radius: 99px; background: var(--carbon); }
.pv-msg { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--brasa) 9%, #fff); font-size: 13.5px; } .pv-msg img { width: 28px; height: 28px; border-radius: 8px; }
.st4-v.on .pv-msg { animation: pvin .5s .5s both; }
@media (max-width: 1000px) {
  .dark4-in { grid-template-columns: 1fr; padding: 70px 22px; } .orb { height: 460px; } .orb-scene { transform: rotateX(-10deg) scale(.8); }
  .bt-grid { grid-template-columns: 1fr 1fr; } .bt-grid > .bt { grid-column: span 1; } .bt-grid > .bt-cal { grid-column: 1 / -1; }
  .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wall-col:nth-child(n+4) { display: none; }
  .st4-box { grid-template-columns: 1fr; } .st4-vis { min-height: 380px; }
}
@media (max-width: 600px) {
  .orb-scene { transform: rotateX(-10deg) scale(.62); } .orb { height: 360px; }
  .bt-grid { grid-template-columns: 1fr; }
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .wall-col { gap: 12px; } .wall-col:nth-child(n+3) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .orb-ring, .orb-face, .orb-core { animation: none; } .lp4 .mq-in { animation: none; } }
/* Lo que va de borde a borde no se recorta dentro del contenedor */
.lp3, .lp4 { overflow-x: visible; }
html:has(.lp4), body:has(.lp4) { overflow-x: clip; }
.bt-cal .bt-vis span { aspect-ratio: 1.35; }
.bt-cal .bt-vis span img { width: 30%; }
.bt-niv .bx-nivv { font-size: clamp(34px, 3vw, 46px); }

/* ===== Portada v5 ===== */
.mk-av { width: 15px; height: 15px; border-radius: 50%; }
.mk-me { margin-top: auto; display: flex !important; align-items: center; gap: 8px; font-size: 12.5px !important; color: var(--muted) !important; }
.mk-me img { width: 26px; height: 26px; border-radius: 50%; }
.mk-side { min-height: 100%; }
/* Cielo: el fondo pasa poco a poco del papel a la noche y vuelve */
.sky5 { width: 100vw; margin: 40px calc(50% - 50vw); position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, var(--ceniza) 0%, #F3D9CB 6%, #5A3A4A 18%, #1E2233 34%, #141A22 55%, #1D2A2A 76%, #4B3B3F 90%, var(--ceniza) 100%); }
.sky5::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 35% at 70% 50%, rgba(255,90,31,.28), transparent 70%), radial-gradient(35% 30% at 20% 60%, rgba(91,108,255,.22), transparent 70%); animation: skyhue 14s ease-in-out infinite alternate; }
@keyframes skyhue { 0% { filter: hue-rotate(0deg); opacity: .9; } 100% { filter: hue-rotate(-40deg); opacity: 1; } }
.sky5-in { position: relative; max-width: 1360px; margin: 0 auto; padding: 220px 22px 220px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 30px; align-items: center; }
/* Planeta */
.plnt { position: relative; width: min(600px, 100%); aspect-ratio: 1; margin: 0 auto; }
.plnt-stars { position: absolute; inset: -20%; background-image: radial-gradient(1.5px 1.5px at 12% 20%, #fff, transparent), radial-gradient(1px 1px at 30% 70%, #fff, transparent), radial-gradient(1.5px 1.5px at 80% 30%, #fff, transparent), radial-gradient(1px 1px at 65% 85%, #fff, transparent), radial-gradient(1px 1px at 90% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 45% 15%, #fff, transparent), radial-gradient(1px 1px at 20% 90%, #fff, transparent); opacity: .7; animation: twk 4s ease-in-out infinite alternate; }
@keyframes twk { to { opacity: .35; } }
.plnt-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.plnt-rings path { fill: none; stroke: rgba(255,179,122,.45); stroke-width: 1.6; }
.plnt-rings.back { z-index: 1; } .plnt-rings.back path { stroke: rgba(255,179,122,.2); }
.plnt-rings.front { z-index: 4; }
.plnt-sphere { position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; z-index: 3; overflow: hidden;
  background: radial-gradient(circle at 32% 28%, #FFD2A8 0%, #FF8A55 22%, #FF5A1F 48%, #B3300A 78%, #5E1A06 100%);
  box-shadow: 0 0 90px 20px rgba(255,90,31,.45), 0 0 220px 60px rgba(255,90,31,.18); display: grid; place-items: center; }
.plnt-surf { position: absolute; inset: -10% -60%; background: repeating-linear-gradient(172deg, rgba(255,255,255,0) 0 14px, rgba(255,255,255,.09) 14px 22px, rgba(120,30,0,.12) 22px 34px); animation: surf 18s linear infinite; mix-blend-mode: soft-light; }
@keyframes surf { to { transform: translateX(40%); } }
.plnt-shade { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 75% 80%, rgba(0,0,0,.45), transparent 55%); }
.plnt-sphere img { position: relative; width: 34%; border-radius: 22%; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.plnt-sat { position: absolute; left: 50%; top: 50%; display: inline-grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; padding: 8px 14px 8px 8px; border-radius: 16px; white-space: nowrap; will-change: transform;
  background: rgba(255,255,255,.12); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 1px rgba(255,255,255,.14), 0 14px 30px rgba(0,0,0,.4); color: #fff; }
.plnt-sat i { grid-row: span 2; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font: 800 15px/1 var(--display); font-style: normal; background: #fff; color: var(--carbon); }
.plnt-sat b { font: 700 15px/1.1 var(--display); } .plnt-sat small { font-size: 11px; color: var(--ascua); }
/* Qué hace (como antes, más vistoso) */
.q5 .q3-stage { height: 480px; background: radial-gradient(90% 90% at 30% 20%, #FFE4D3 0%, #FFF6F0 55%, #fff 100%); box-shadow: var(--rim), 0 40px 80px -50px rgba(242,68,14,.45); }
.q5-dots { position: absolute; z-index: 2; top: 18px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.q5-dots i { width: 22px; height: 4px; border-radius: 4px; background: rgba(23,33,27,.12); transition: background .3s, width .3s; }
.q5-dots i.on { width: 40px; background: var(--brasa); }
.q5 .q3-v { transform: translateY(24px) scale(.96) rotateX(6deg); }
.q5 .q3-v.on { transform: none; }
.q5-n { display: block; font: 800 64px/1 var(--display); color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--brasa) 45%, transparent); margin-bottom: 6px; }
.q5 .q3-s.on .q5-n { color: var(--brasa); -webkit-text-stroke: 0; }
.stg-avs { display: flex; } .stg-avs img { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; margin-left: -8px; }
.stg-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.stg-grid span { position: relative; aspect-ratio: 1; border-radius: 10px; background: #fff; padding: 5px; overflow: hidden; box-shadow: 0 0 0 1px rgba(23,33,27,.05); }
.stg-grid span b { position: relative; z-index: 1; font-size: 11px; color: var(--ink-2); }
.stg-grid span img { position: absolute; right: 4px; bottom: 4px; width: 46%; aspect-ratio: 9 / 16; height: auto; object-fit: cover; border-radius: 5px; box-shadow: 0 4px 10px -4px rgba(0,0,0,.4); }
.stg-grid span.today { background: var(--carbon); } .stg-grid span.today b { color: #fff; }
.stg-tag { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.stg-niv .bx-nivv { display: block; font: 800 52px/1 var(--display); color: var(--brasa); margin: 8px 0 14px; }
.stg-car2 { position: relative; height: 320px; }
.stg-car2 span { position: absolute; left: 50%; top: 50%; width: 150px; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; box-shadow: 0 22px 40px -18px rgba(0,0,0,.5); transform: translate(calc(-50% + (var(--n) - 1.5) * 86px), -50%) rotate(calc((var(--n) - 1.5) * 6deg)); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.q3-v.on .stg-car2 span { animation: fan .8s calc(var(--n) * .08s) both cubic-bezier(.2,.8,.2,1); }
@keyframes fan { from { transform: translate(-50%, -50%) rotate(0); } }
.stg-car2 span img { width: 100%; height: 100%; object-fit: cover; }
.stg-car2 span b { position: absolute; top: 8px; right: 8px; font-size: 10px; color: #fff; background: rgba(0,0,0,.4); padding: 2px 7px; border-radius: 99px; }
.stg-skh img { width: 40px; height: 40px; border-radius: 50%; }
/* Listo en 5 minutos: esquema animado */
.fl { position: relative; display: grid; grid-template-columns: 220px 1fr 190px 1fr 280px; align-items: center; min-height: 380px; padding: 30px; border-radius: 34px; background: var(--lg); box-shadow: var(--rim); }
.fl-lines { position: absolute; inset: 10px 30px; width: calc(100% - 60px); height: calc(100% - 20px); z-index: 0; }
.fl-p { fill: none; stroke: color-mix(in srgb, var(--brasa) 25%, transparent); stroke-width: 2; stroke-dasharray: 6 8; }
.fl.go .fl-p { animation: flow 1.4s linear infinite; stroke: color-mix(in srgb, var(--brasa) 60%, transparent); }
@keyframes flow { to { stroke-dashoffset: -28; } }
.fl-col { position: relative; z-index: 1; display: grid; gap: 10px; }
.fl-a { grid-column: 1; } .fl-hub { grid-column: 3; } .fl-c { grid-column: 5; }
.fl-k { font-size: 12.5px; font-weight: 800; color: var(--brasa); }
.fl-net { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #fff; box-shadow: 0 10px 22px -16px rgba(23,33,27,.4), 0 0 0 1px rgba(23,33,27,.05); font-size: 14px; opacity: .4; transform: none; transition: opacity .4s, transform .4s; transition-delay: calc(var(--n) * .18s); }
.fl-net svg { width: 18px; height: 18px; }
.fl.go .fl-net { opacity: 1; transform: none; }
.fl-ok { margin-left: auto; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #1F8A4C; color: #fff; transform: scale(0); transition: transform .35s cubic-bezier(.3,1.6,.5,1); transition-delay: calc(.3s + var(--n, 0) * .18s); }
.fl-ok svg { width: 12px; height: 12px; }
.fl.go .fl-ok { transform: scale(1); }
.fl-hub { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; text-align: center; }
.fl-hub img { width: 96px; height: 96px; border-radius: 26px; box-shadow: 0 0 0 10px rgba(255,90,31,.1), 0 20px 40px -14px rgba(242,68,14,.6); transform: scale(.85); transition: transform .5s cubic-bezier(.3,1.6,.5,1) 1s; }
.fl.go .fl-hub img { transform: scale(1); }
.fl-hub > b { font: 800 22px/1 var(--display); }
.fl-ai { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; padding: 6px 12px; border-radius: 99px; background: var(--carbon); color: #fff; opacity: 0; transform: translateY(8px); transition: all .4s 1.5s; }
.fl-ai svg { width: 14px; height: 14px; color: var(--ascua); }
.fl.go .fl-ai { opacity: 1; transform: none; }
.fl-rut, .fl-out { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; background: #fff; box-shadow: 0 10px 22px -16px rgba(23,33,27,.4), 0 0 0 1px rgba(23,33,27,.05); opacity: .4; transition: opacity .4s 2.1s; }
.fl.go .fl-rut { opacity: 1; }
.fl-rut > svg { width: 22px; height: 22px; color: var(--brasa); flex: none; }
.fl-rut b, .fl-out b { display: block; font-size: 14px; } .fl-rut small, .fl-out small { font-size: 12px; color: var(--muted); }
.fl-rut .con3-sw { margin-left: auto; flex: none; }
.fl-out { transition: opacity .4s 2.9s, transform .5s 2.9s cubic-bezier(.3,1.6,.5,1); transform: translateY(10px) scale(.96); }
.fl.go .fl-out { opacity: 1; transform: none; }
.fl-out img { width: 38px; height: 64px; object-fit: cover; border-radius: 8px; }
.fl-out .fl-ok { transition-delay: 3.2s; }
@media (max-width: 1000px) {
  .sky5-in { grid-template-columns: 1fr; padding: 160px 22px; }
  .fl { grid-template-columns: 1fr; gap: 22px; } .fl-a, .fl-hub, .fl-c { grid-column: auto; } .fl-lines { display: none; }
  .q5-n { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) { .sky5::before, .plnt-surf, .plnt-stars, .fl.go .fl-p { animation: none; } }
.fl-lines { inset: 0; width: 100%; height: 100%; }
.fl { grid-template-columns: 210px 1fr 200px 1fr 290px; }

/* ===== Informe semanal v3 ===== */
.inf3 { margin: 4px 0 26px; padding: 26px; border-radius: 28px; background: var(--sheet); border: 1px solid var(--line); box-shadow: 0 16px 40px -30px rgba(17,24,39,.45); display: grid; gap: 20px; }
.inf3-h { display: flex; justify-content: space-between; align-items: flex-end; }
.inf3-h h2 { margin: 2px 0 0; font: 800 30px/1 var(--display); letter-spacing: -.03em; }
.inf3-when { font-size: 13px; color: var(--muted); padding: 5px 10px; border-radius: 99px; background: rgba(0,0,0,.04); }
.inf3-intro { margin: 0; font-size: 16px; line-height: 1.55; max-width: 80ch; color: var(--ink-2); }
.inf3-grid { columns: 3 260px; column-gap: 14px; }
.inf3-it { break-inside: avoid; margin: 0 0 14px; display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 16px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); position: relative; overflow: hidden; animation: inf3in .5s calc(var(--n) * 60ms) both cubic-bezier(.2,.8,.2,1); }
.inf3-it::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #9AA59D; }
.inf3-it.up::before { background: #1F8A4C; } .inf3-it.down::before { background: #C2414B; }
@keyframes inf3in { from { opacity: 0; transform: translateY(10px); } }
.inf3-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; background: rgba(0,0,0,.05); }
.inf3-it.up .inf3-ic { background: #E3F4EA; color: #1F8A4C; } .inf3-it.down .inf3-ic { background: #FBE5E7; color: #C2414B; }
.inf3-it b { display: block; font-size: 15px; line-height: 1.3; margin-bottom: 4px; }
.inf3-it p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
/* Qué tienes que hacer */
.inf3-acc { padding: 18px; border-radius: 22px; background: linear-gradient(135deg, color-mix(in srgb, var(--signal) 10%, var(--paper)), var(--paper)); border: 1px solid color-mix(in srgb, var(--signal) 18%, transparent); display: grid; gap: 12px; }
.inf3-acc.all { background: linear-gradient(135deg, #E3F4EA, var(--paper)); border-color: #BFE3CD; }
.inf3-acc-h { display: flex; gap: 14px; align-items: center; }
.inf3-acc-h b { display: block; font: 800 18px/1.2 var(--display); } .inf3-acc-h small { color: var(--muted); font-size: 13.5px; }
.inf3-ring { --p: 0; flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--signal) calc(var(--p) * 1%), rgba(0,0,0,.08) 0); position: relative; transition: background .4s; }
.inf3-acc.all .inf3-ring { background: conic-gradient(#1F8A4C 100%, transparent 0); animation: pop .6s cubic-bezier(.3,1.6,.5,1); }
.inf3-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--sheet); }
.inf3-ring b { position: relative; font-size: 13px; }
@keyframes pop { 40% { transform: scale(1.15); } }
.inf3-todos { display: grid; gap: 8px; }
.inf3-todo { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 12px 14px; border-radius: 14px; background: var(--sheet); border: 1px solid var(--line); cursor: pointer; font-size: 14px; line-height: 1.45; transition: transform .2s, box-shadow .2s, opacity .3s; animation: inf3in .45s calc(var(--k) * 70ms) both; }
.inf3-todo:hover { transform: translateX(3px); box-shadow: 0 8px 20px -14px rgba(0,0,0,.4); }
.inf3-todo input { position: absolute; opacity: 0; pointer-events: none; }
.inf3-chk { width: 24px; height: 24px; border-radius: 8px; border: 2px solid color-mix(in srgb, var(--signal) 55%, transparent); display: grid; place-items: center; color: transparent; transition: all .25s; }
.inf3-chk svg { width: 15px; height: 15px; transform: scale(0); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.inf3-todo input:checked + .inf3-chk { background: var(--signal); border-color: var(--signal); color: #fff; } .inf3-todo input:checked + .inf3-chk svg { transform: scale(1); }
.inf3-todo input:focus-visible + .inf3-chk { outline: 3px solid var(--signal); outline-offset: 2px; }
.inf3-todo.done { opacity: .6; } .inf3-todo.done .inf3-tt { text-decoration: line-through; }
.inf3-todo.ticking { animation: tick .5s forwards; } @keyframes tick { 30% { transform: scale(1.02); background: #E3F4EA; } 100% { opacity: 0; transform: translateX(30px); } }
.inf3-donebox summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--muted); padding: 4px 2px; }
.inf3-donebox[open] summary { margin-bottom: 8px; }
/* Por cuenta */
.inf3-pc { display: grid; gap: 12px; }
.inf3-pc-h b { display: block; font: 800 20px/1.1 var(--display); } .inf3-pc-h small { color: var(--muted); font-size: 13px; }
.inf3-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.inf3-tab { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px 5px 5px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer; transition: all .2s; }
.inf3-tab:hover { border-color: var(--ink-2); }
.inf3-tab[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.inf3-c { padding: 18px; border-radius: 22px; background: var(--paper); border: 1px solid var(--line); display: grid; gap: 14px; animation: inf3in .4s both; }
.inf3-c-h { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.inf3-c-h b { font: 800 18px/1.1 var(--display); }
.inf3-cif { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.inf3-apply { flex: none; } .inf3-apply svg { width: 15px; height: 15px; }
.inf3-skh { margin: -4px 0 0; font-size: 13px; color: var(--muted); padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--signal) 6%, transparent); }
.inf3-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.inf3-col { padding: 14px; border-radius: 16px; background: var(--sheet); border: 1px solid var(--line); border-top: 4px solid #9AA59D; }
.inf3-col h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 14px; }
.inf3-col h4 i { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-style: normal; font-weight: 800; color: #fff; background: #9AA59D; }
.inf3-col h4 span { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 600; }
.inf3-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.inf3-col li { font-size: 13.5px; line-height: 1.45; padding-left: 12px; position: relative; } .inf3-col li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .35; }
.inf3-col.ok { border-top-color: #1F8A4C; } .inf3-col.ok h4 { color: #1F8A4C; } .inf3-col.ok h4 i { background: #1F8A4C; }
.inf3-col.ko { border-top-color: #C2414B; } .inf3-col.ko h4 { color: #C2414B; } .inf3-col.ko h4 i { background: #C2414B; }
.inf3-col.ko2 { border-top-color: #8E5A5E; } .inf3-col.ko2 h4 { color: #8E5A5E; } .inf3-col.ko2 h4 i { background: #8E5A5E; }
.inf3-col.add { border-top-color: var(--signal); } .inf3-col.add h4 { color: var(--signal); } .inf3-col.add h4 i { background: var(--signal); }
.inf3-col.ad { border-top-color: #2D5BD7; } .inf3-col.ad h4 { color: #2D5BD7; } .inf3-col.ad h4 i { background: #2D5BD7; }
/* Selector de cuentas de Métricas: agrupado por app, todo a la vista */
.acc-switch2 { display: grid; gap: 10px; margin: 0 0 18px; padding: 14px; border-radius: 22px; background: var(--sheet); border: 1px solid var(--line); }
.as2-g { display: grid; grid-template-columns: 120px 1fr; gap: 10px; align-items: start; }
.as2-g + .as2-g { padding-top: 10px; border-top: 1px solid var(--line-2, var(--line)); }
.as2-app { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; padding-top: 9px; }
.as2-list { display: flex; flex-wrap: wrap; gap: 6px; }
.as2-list .acc-tab { min-height: 36px; padding: 0 12px 0 5px; font-size: 13.5px; }
.as2-list .acc-tab.app { padding: 0 14px; }
@media (max-width: 640px) { .as2-g { grid-template-columns: 1fr; gap: 6px; } .as2-app { padding-top: 0; } .inf3 { padding: 18px; } }
@media (prefers-reduced-motion: reduce) { .inf3-it, .inf3-todo, .inf3-c { animation: none; } }
/* Historial de skills */
.skh-list { display: grid; gap: 0; max-height: 60vh; overflow: auto; margin: 6px 0 12px; position: relative; }
.skh-v { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 12px 4px 12px 0; }
.skh-v + .skh-v { border-top: 1px solid var(--line); }
.skh-dot { width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; background: var(--line); box-shadow: 0 0 0 4px var(--sheet); }
.skh-v.cur .skh-dot { background: var(--signal); }
.skh-v b { display: block; font-size: 14.5px; } .skh-v small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.45; margin-top: 2px; }
.skh-tag { font-size: 12px; font-weight: 700; color: var(--signal); background: color-mix(in srgb, var(--signal) 10%, transparent); padding: 4px 10px; border-radius: 99px; }
.skh-v details summary { cursor: pointer; font-size: 12.5px; color: var(--signal); font-weight: 600; margin-top: 6px; }
.skh-v pre { max-height: 240px; overflow: auto; white-space: pre-wrap; font: 12px/1.5 ui-monospace, Menlo, monospace; background: var(--paper); padding: 10px; border-radius: 10px; }
/* Lo último publicado */
.grid-media:has(.gm2) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 14px; }
.gm2 { display: grid; gap: 6px; text-decoration: none; color: var(--ink); min-width: 0; align-content: start; }
.gm2-cover { position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #0d120f; transition: transform .2s; }
.gm2:hover .gm2-cover { transform: translateY(-2px); }
.gm2-cover img { width: 100%; height: 100%; object-fit: cover; }
.gm2-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 22%, transparent 70%, rgba(0,0,0,.55)); pointer-events: none; }
.gm2-blank { position: absolute; inset: 0; display: grid; place-items: center; padding: 10px; text-align: center; color: #fff; font-size: 12px; font-weight: 600; }
.gm2-day { position: absolute; z-index: 1; top: 7px; left: 7px; font-size: 11px; font-weight: 700; color: #fff; }
.gm2-stats { position: absolute; z-index: 1; left: 7px; right: 7px; bottom: 7px; display: flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 700; color: #fff; }
.gm2-stats svg { width: 12px; height: 12px; margin-right: -4px; }
.gm2-cap { font-size: 12.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gm2-accs { display: flex; flex-wrap: wrap; gap: 4px; }

/* Precios en la portada: como estaban */
.lp4 #lp-precios { --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif; }
/* Sección de IAs sin degradado: sobre el fondo de la página */
.sky5 { background: none; color: var(--ink); margin: 20px calc(50% - 50vw); }
.sky5::before { display: none; }
.sky5-in { padding: 90px 22px; }
.sky5 .dark4-txt h2 { color: var(--ink); }
.sky5 .dark4-txt p { color: var(--ink-2); }
.sky5 .dark4-txt li { color: var(--ink); }
.plnt-stars { display: none; }
.plnt-rings path { stroke: rgba(255,90,31,.45); }
.plnt-rings.back path { stroke: rgba(255,90,31,.18); }
.plnt-sphere { box-shadow: 0 30px 70px -20px rgba(242,68,14,.55), 0 0 120px 30px rgba(255,90,31,.15); }
.plnt-sat { background: rgba(255,255,255,.85); color: var(--ink); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(23,33,27,.06), 0 14px 30px -12px rgba(23,33,27,.35); }
.plnt-sat i { background: var(--carbon); color: #fff; }
.plnt-sat small { color: var(--signal); }

/* ===== Demo táctil del panel ===== */
.dm { position: relative; }
.dm-hint { position: absolute; right: 16px; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--signal); background: color-mix(in srgb, var(--signal) 10%, #fff); padding: 3px 10px; border-radius: 99px; animation: hintp 2s ease-in-out infinite; }
@keyframes hintp { 50% { box-shadow: 0 0 0 5px rgba(255,90,31,.12); } }
.dm .mk-body { height: 470px; min-height: 0; }
.dm-nav { display: flex; align-items: center; gap: 9px; width: 100%; font: inherit; font-size: 13.5px; color: var(--ink-2); padding: 8px 10px; border-radius: 10px; border: 0; background: none; cursor: pointer; text-align: left; transition: background .15s; }
.dm-nav svg { width: 16px; height: 16px; flex: none; }
.dm-nav:hover { background: rgba(23,33,27,.05); }
.dm-nav[aria-pressed="true"] { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 2px 8px -4px rgba(17,24,39,.25); }
.dm-nav[aria-pressed="true"] svg { color: var(--signal); }
.dm-badge { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: var(--signal); border-radius: 99px; padding: 1px 7px; }
.dm-main { overflow: auto; position: relative; scrollbar-width: thin; }
.dm-view { animation: dmv .35s cubic-bezier(.2,.8,.2,1); }
@keyframes dmv { from { opacity: 0; transform: translateY(8px); } }
.dm-h { margin-bottom: 14px; } .dm-h b { display: block; font: 800 22px/1.1 var(--display); letter-spacing: -.03em; } .dm-h small { color: var(--muted); font-size: 12.5px; }
.dm-scroll { overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; } .dm-scroll::-webkit-scrollbar { display: none; }
.dm-card { border: 0; background: none; padding: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; position: relative; }
.dm-card .sim { transition: transform .2s, box-shadow .2s; } .dm-card:hover .sim { transform: translateY(-3px); box-shadow: 0 12px 24px -12px rgba(0,0,0,.5); }
.dm-st { position: absolute; top: 7px; left: 7px; z-index: 2; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--signal); padding: 2px 8px; border-radius: 99px; }
.dm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; } .dm-kpis.three { grid-template-columns: repeat(3, 1fr); }
.dm-kpi { display: grid; gap: 2px; text-align: left; padding: 12px; border-radius: 14px; border: 0; background: #fff; box-shadow: 0 0 0 1px rgba(23,33,27,.06); font: inherit; color: inherit; cursor: pointer; transition: transform .15s; }
.dm-kpi:hover { transform: translateY(-2px); } .dm-kpi b { font: 800 22px/1 var(--display); } .dm-kpi small { font-size: 11.5px; color: var(--muted); } .dm-kpi em, .dm-f .up { font-style: normal; color: #1F8A4C; font-weight: 700; }
.dm-accs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dm-acc { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 4px 10px; align-items: center; padding: 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(23,33,27,.06); }
.dm-acc > img { width: 34px; height: 34px; border-radius: 50%; } .dm-acc b { font-size: 13px; display: block; } .dm-acc small { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); } .dm-acc small svg { width: 11px; height: 11px; }
.dm-f { text-align: right; } .dm-f b { font: 800 17px/1 var(--display); }
.dm-spark { grid-column: 1 / -1; width: 100%; height: 30px; } .dm-spark polyline { fill: none; stroke: var(--signal); stroke-width: 2; }
.dm-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.dm-dow { font-size: 11px; color: var(--muted); text-align: center; }
.dm-day { aspect-ratio: 1.5; border-radius: 10px; border: 0; background: #fff; box-shadow: 0 0 0 1px rgba(23,33,27,.05); display: grid; place-items: center; gap: 2px; padding: 4px; cursor: pointer; font: inherit; color: inherit; }
.dm-day b { font-size: 12px; } .dm-day span { display: flex; gap: 2px; height: 5px; } .dm-day i { width: 5px; height: 5px; border-radius: 50%; }
.dm-day.on { background: var(--carbon); color: #fff; }
.dm-agenda { margin-top: 12px; display: grid; gap: 6px; } .dm-agenda > b { font-size: 13px; }
.dm-ag { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; border: 0; background: #fff; box-shadow: 0 0 0 1px rgba(23,33,27,.05); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.dm-ag > span:first-child { font: 800 13px/1 var(--display); color: var(--signal); width: 40px; } .dm-ag img { width: 24px; height: 40px; object-fit: cover; border-radius: 6px; } .dm-ag b { display: block; font-size: 12.5px; } .dm-ag small { font-size: 11px; color: var(--muted); }
.dm-l { margin: 12px 0 6px; font-size: 12px; font-weight: 700; color: var(--muted); } .dm-l b { color: var(--signal); }
.dm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 4px; border-radius: 99px; border: 1px solid rgba(23,33,27,.1); background: #fff; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; color: inherit; }
.dm-chip img { width: 24px; height: 24px; border-radius: 50%; } .dm-chip[aria-pressed="true"] { background: var(--carbon); color: #fff; border-color: var(--carbon); }
.dm-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: rgba(23,33,27,.06); } .dm-seg.four { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; }
.dm-seg button { border: 0; background: none; padding: 7px 14px; border-radius: 9px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--ink-2); }
.dm-seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 6px -2px rgba(0,0,0,.2); }
.dm-step { display: inline-flex; align-items: center; gap: 14px; } .dm-step button { width: 32px; height: 32px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 0 0 1px rgba(23,33,27,.1); font-size: 18px; cursor: pointer; } .dm-step b { font: 800 22px/1 var(--display); min-width: 18px; text-align: center; }
.dm-go { display: block; width: 100%; margin-top: 16px; padding: 12px; border-radius: 14px; border: 0; color: #fff; font: inherit; font-weight: 700; cursor: pointer; background: linear-gradient(180deg, #FF8A55, #F2440E); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 0 #C7380A; }
.dm-go:active { transform: translateY(2px); box-shadow: 0 1px 0 #C7380A; }
.dm-gs { display: grid; gap: 8px; }
.dm-g { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(23,33,27,.06); transition: opacity .3s; }
.dm-g > img { width: 34px; height: 34px; border-radius: 50%; } .dm-g b { display: block; font-size: 13.5px; } .dm-g small { font-size: 11.5px; color: var(--muted); }
.dm-g.descartada { opacity: .5; } .dm-g.aprobada { box-shadow: 0 0 0 1.5px #1F8A4C; }
.dm-ok, .dm-no { flex: none; border: 0; border-radius: 99px; padding: 7px 14px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.dm-ok { background: var(--signal); color: #fff; } .dm-no { background: rgba(23,33,27,.07); color: var(--ink); }
.dm-res { flex: none; font-size: 12px; font-weight: 700; color: #1F8A4C; }
.dm-chart { height: 150px; padding: 8px 0; } .dm-chart svg { width: 100%; height: 100%; }
.dm-top { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dm-tp { display: flex; gap: 8px; align-items: center; padding: 6px; border-radius: 12px; border: 0; background: #fff; box-shadow: 0 0 0 1px rgba(23,33,27,.05); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.dm-tp img { width: 28px; height: 48px; object-fit: cover; border-radius: 6px; } .dm-tp b { display: block; font-size: 13px; } .dm-tp small { font-size: 10.5px; color: var(--muted); }
.dm-sheet { position: absolute; inset: 0; z-index: 10; border-radius: 26px; background: rgba(23,33,27,.35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: grid; place-items: center; opacity: 0; transition: opacity .25s; }
.dm-sheet.in { opacity: 1; }
.dm-sh-in { position: relative; display: grid; grid-template-columns: 180px 1fr; gap: 20px; width: min(560px, 92%); padding: 20px; border-radius: 24px; background: #fff; box-shadow: 0 40px 80px -30px rgba(0,0,0,.5); transform: translateY(16px) scale(.97); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.dm-sheet.in .dm-sh-in { transform: none; }
.dm-sh-ph .sim { border-radius: 16px; } .dm-sh-ph .sim-t { font-size: 14px; }
.dm-sh-txt { display: flex; flex-direction: column; gap: 8px; } .dm-sh-txt > b { font: 800 19px/1.15 var(--display); } .dm-sh-txt p { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.dm-sh-acc { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); } .dm-sh-acc img { width: 26px; height: 26px; border-radius: 50%; }
.dm-sh-when { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; } .dm-sh-when svg { width: 15px; height: 15px; color: var(--signal); }
.dm-sh-btns { margin-top: auto; display: flex; gap: 8px; align-items: center; }
.dm-x { position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(23,33,27,.06); font-size: 18px; cursor: pointer; }
.dm-toast { position: absolute; z-index: 11; left: 50%; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 9px; border-radius: 14px; font-size: 13px; font-weight: 600; background: var(--carbon); color: #fff; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; white-space: nowrap; }
.dm-toast img { width: 24px; height: 24px; border-radius: 7px; }
.dm-toast.in { animation: dmt 3s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes dmt { 10%, 85% { transform: translate(-50%, 0); opacity: 1; } 100% { transform: translate(-50%, 10px); opacity: 0; } }
.dm-tabs { display: none; }
@media (max-width: 900px) {
  .dm .mk-body { height: 520px; }
  .dm-tabs { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid rgba(23,33,27,.06); }
  .dm-tabs button { display: grid; justify-items: center; gap: 2px; padding: 8px 0 10px; border: 0; background: none; font: inherit; font-size: 10.5px; color: var(--muted); cursor: pointer; }
  .dm-tabs svg { width: 19px; height: 19px; } .dm-tabs button[aria-pressed="true"] { color: var(--signal); font-weight: 700; }
  .dm-kpis { grid-template-columns: 1fr 1fr; } .dm-accs { grid-template-columns: 1fr; } .dm-top { grid-template-columns: 1fr 1fr; }
  .dm-sh-in { grid-template-columns: 110px 1fr; }
  .dm-hint { display: none; }
}

/* ===== Informe: los puntos como comandas de cocina ===== */
.inf3-grid { columns: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px 16px; align-items: start; padding-top: 18px; position: relative; }
.inf3-grid::before { content: ""; position: absolute; left: -8px; right: -8px; top: 0; height: 12px; border-radius: 6px; background: linear-gradient(180deg, #D9DCE0, #B9BEC4); box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(0,0,0,.12); }
.inf3-it { display: block; margin: 0; padding: 18px 18px 22px; border: 0; border-radius: 0; background: #FFFDF8; font-family: ui-monospace, "SF Mono", Menlo, monospace; color: #2B2B2B;
  box-shadow: 0 10px 22px -12px rgba(0,0,0,.35); transform: rotate(calc((var(--n) % 3 - 1) * .8deg)); transform-origin: top center;
  -webkit-mask: radial-gradient(circle 6px at 50% 100%, #0000 98%, #000) 50% 100% / 14px 100% repeat-x; mask: radial-gradient(circle 6px at 50% 100%, #0000 98%, #000) 50% 100% / 14px 100% repeat-x;
  animation: comanda .55s calc(var(--n) * 90ms) both cubic-bezier(.3,1.4,.5,1); transition: transform .25s; }
.inf3-it:hover { transform: rotate(0) translateY(-3px); }
@keyframes comanda { from { opacity: 0; transform: translateY(-24px) rotate(0); } }
.inf3-it::before { content: "COMANDA #" counter(cmd, decimal-leading-zero); counter-increment: cmd; position: static; display: block; width: auto; inset: auto; background: none; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #8A8A8A; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1.5px dashed #CFCAC0; }
.inf3-grid { counter-reset: cmd; }
.inf3-it::after { content: ""; position: absolute; top: -6px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #9AA0A6 60%); box-shadow: 0 2px 3px rgba(0,0,0,.3); }
.inf3-it { position: relative; overflow: visible; }
.inf3-ic { position: absolute; top: 12px; right: 14px; width: auto; height: auto; padding: 3px 8px; border-radius: 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; background: #EEE; }
.inf3-it.up .inf3-ic { background: #1F8A4C; color: #fff; } .inf3-it.down .inf3-ic { background: #C2414B; color: #fff; }
.inf3-it.up .inf3-ic::after { content: " MARCHANDO"; } .inf3-it.down .inf3-ic::after { content: " DEVUELTO"; } .inf3-it.eq .inf3-ic::after { content: " NOTA"; }
.inf3-it b { font-family: inherit; font-size: 14px; line-height: 1.35; text-transform: uppercase; letter-spacing: .01em; margin-bottom: 8px; }
.inf3-it p { font-family: inherit; font-size: 12.5px; line-height: 1.6; color: #4A4A4A; }
.inf3-it .inf-n { color: #111; background: #FFE8A3; padding: 0 3px; }
@media (prefers-reduced-motion: reduce) { .inf3-it { animation: none; transform: none; } }

/* Precios como antes: su tipografía y sus botones de siempre */
.lp4 #lp-precios { --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif; }
.lp4 #lp-precios .sec-h h2 { font-family: "Bricolage Grotesque", "Inter", system-ui, sans-serif; }
/* Sección de IAs sin degradado: fondo de la página, planeta sobre claro */
.sky5 { background: none; color: var(--ink); margin: 40px calc(50% - 50vw); }
.sky5::before { display: none; }
.sky5-in { padding: 70px 22px; }
.sky5 .dark4-txt h2 { color: var(--ink); }
.sky5 .dark4-txt p { color: var(--ink-2); }
.sky5 .dark4-txt li { color: var(--ink); }
.pl-stars { display: none; }
.pl-rings path { stroke: rgba(242,68,14,.35); }
.pl-rings.back path { stroke: rgba(242,68,14,.14); }
.pl-sphere { box-shadow: 0 0 70px 10px rgba(255,90,31,.28), 0 30px 60px -20px rgba(150,40,0,.45); }
.pl-sat { background: rgba(255,255,255,.88); color: var(--ink); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(23,33,27,.07), 0 14px 30px -12px rgba(23,33,27,.35); }
.pl-sat i { background: var(--carbon); color: #fff; }
.pl-sat small { color: var(--signal); }


/* Métricas: etiqueta de las tarjetas de rendimiento (antes .pl, chocaba con los precios) */
.pfm { align-content: start; min-height: 0; }
.pfm .pfl { font-size: 13px; color: var(--muted); line-height: 1.3; }
.pfm .pv { margin-top: 6px; }
.pfm .trd { font-size: 12.5px; }
.tacc { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--ink); }
.tacc .av { width: 18px; height: 18px; }
.mh-mini { margin-top: 14px; color: #fff; opacity: .95; }
.mh-mini svg text { fill: rgba(255,255,255,.6); }

/* ===== Demo: Métricas (vista por defecto) ===== */
.dm .mk-body { height: 640px; }
.dm-mh { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.dm-mh b { display: block; font: 800 24px/1.1 var(--display); letter-spacing: -.03em; }
.dm-mh small { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.dm-live { width: 8px; height: 8px; border-radius: 50%; background: #1F8A4C; box-shadow: 0 0 0 0 rgba(31,138,76,.5); animation: dmlive 1.8s infinite; }
@keyframes dmlive { 70% { box-shadow: 0 0 0 7px rgba(31,138,76,0); } }
.dm-accbar { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 10px; margin: 0 -2px; }
.dm-accbar::-webkit-scrollbar { display: none; }
.dm-ab { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 4px 13px 4px 4px; border-radius: 99px; border: 0; background: #fff; box-shadow: 0 0 0 1px rgba(23,33,27,.08); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer; transition: background .2s, color .2s, transform .15s; }
.dm-ab:hover { transform: translateY(-1px); }
.dm-ab[aria-pressed="true"] { background: var(--carbon); color: #fff; box-shadow: 0 6px 14px -8px rgba(23,33,27,.6); }
.dm-abav { position: relative; width: 26px; height: 26px; flex: none; }
.dm-abav img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.dm-abav i { position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; border-radius: 50%; background: #111; color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 1.5px #fff; }
.dm-abav i svg { width: 8px; height: 8px; }
.dm-abav.all { display: grid; place-items: center; border-radius: 50%; background: var(--signal); color: #fff; }
.dm-abav.all svg { width: 14px; height: 14px; }
.dm-hero { display: grid; grid-template-columns: minmax(200px, .8fr) 1.6fr; gap: 18px; padding: 18px 20px; border-radius: 20px; background: var(--carbon); color: #fff; box-shadow: 0 20px 40px -24px rgba(23,33,27,.7); }
.dm-hn { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dm-hn > small { font-size: 12px; color: rgba(255,255,255,.6); }
.dm-hn > b { font: 800 46px/1 var(--display); letter-spacing: -.04em; }
.dm-pill { align-self: flex-start; font-size: 12px; font-weight: 700; color: #7EE2A8; background: rgba(126,226,168,.12); padding: 3px 10px; border-radius: 99px; }
.dm-hp { margin: 4px 0 0; font-size: 12.5px; color: rgba(255,255,255,.6); }
.dm-share { display: grid; gap: 6px; margin-top: 8px; }
.dm-share span { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; font-size: 11.5px; }
.dm-share img { width: 18px; height: 18px; border-radius: 50%; }
.dm-share i { height: 6px; border-radius: 3px; background: rgba(255,255,255,.08); position: relative; overflow: hidden; }
.dm-share i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--c); border-radius: 3px; animation: dmgrow .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes dmgrow { from { width: 0; } }
.dm-hc { position: relative; min-width: 0; }
.dm-hc-l { position: absolute; right: 0; bottom: -2px; font-size: 10.5px; color: rgba(255,255,255,.4); }
.dm-lc { position: relative; height: 170px; touch-action: pan-y; cursor: crosshair; }
.dm-lc svg { width: 100%; height: 100%; overflow: visible; }
.dm-lc .gl { stroke: rgba(255,255,255,.08); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dm-lc .ln { fill: none; stroke: #FF5A1F; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: dmdraw 1.1s .1s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes dmdraw { to { stroke-dashoffset: 0; } }
.dm-cross { position: absolute; top: 0; bottom: 0; left: calc(var(--x, 1) * 100%); width: 1px; background: rgba(255,255,255,.25); opacity: 0; transition: opacity .2s; }
.dm-dot { position: absolute; left: calc(var(--x, 1) * 100%); top: calc(var(--y, .1) * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #FF5A1F; box-shadow: 0 0 0 4px rgba(255,90,31,.25), 0 0 0 2px var(--carbon) inset; opacity: 0; transition: opacity .2s; }
.dm-tip { position: absolute; left: clamp(40px, calc(var(--x, 1) * 100%), calc(100% - 50px)); top: calc(var(--y, .1) * 100% - 52px); transform: translateX(-50%); display: grid; padding: 6px 10px; border-radius: 10px; background: #fff; color: var(--ink); box-shadow: 0 10px 24px -10px rgba(0,0,0,.6); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s; }
.dm-tip b { font: 800 15px/1.1 var(--display); } .dm-tip small { font-size: 10.5px; color: var(--muted); }
.dm-lc.on .dm-cross, .dm-lc.on .dm-dot, .dm-lc.on .dm-tip { opacity: 1; }
.dm-kp4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.dm-k { position: relative; display: grid; gap: 2px; padding: 12px 14px 8px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(23,33,27,.06); overflow: hidden; animation: dmv .45s calc(var(--n) * 70ms) both cubic-bezier(.2,.8,.2,1); }
.dm-k small { font-size: 11.5px; color: var(--muted); }
.dm-k b { font: 800 24px/1.05 var(--display); letter-spacing: -.03em; }
.dm-k b.bump { animation: dmbump .6s; }
@keyframes dmbump { 30% { color: var(--signal); transform: translateY(-2px); } }
.dm-k em { font-style: normal; font-size: 11.5px; font-weight: 700; } .dm-k em.up, .dm-ret + .dm-vs.up { color: #1F8A4C; } .dm-k em.down { color: #C2414B; }
.dm-mini { width: 100%; height: 26px; margin-top: 2px; } .dm-mini polyline { fill: none; stroke: var(--signal); stroke-width: 2; vector-effect: non-scaling-stroke; opacity: .7; }
.dm-two { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; margin-bottom: 10px; }
.dm-box, .dm-inf { padding: 14px 16px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px rgba(23,33,27,.06); min-width: 0; }
.dm-bh { margin-bottom: 10px; } .dm-bh b { display: block; font-size: 14px; } .dm-bh small { font-size: 11.5px; color: var(--muted); }
.dm-bars { position: relative; display: flex; align-items: flex-end; gap: 5px; height: 150px; padding-top: 10px; }
.dm-bar { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; border: 0; padding: 0; background: none; cursor: pointer; }
.dm-bar i { width: 100%; height: var(--h); border-radius: 5px 5px 2px 2px; background: #3C4A41; transform-origin: bottom; animation: dmbar .7s cubic-bezier(.2,.8,.2,1) both; transition: filter .15s; }
.dm-bar.low i { background: #C9CFCB; } .dm-bar.best i { background: linear-gradient(180deg, #FF8A55, #F2440E); }
.dm-bar:nth-child(n) i { animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes dmbar { from { transform: scaleY(0); } }
.dm-bar:hover i, .dm-bar:focus-visible i { filter: brightness(1.15); }
.dm-btip { position: absolute; z-index: 3; bottom: calc(var(--h) + 8px); left: 50%; transform: translate(-50%, 4px); display: grid; grid-template-columns: 22px auto; grid-template-rows: auto auto; column-gap: 7px; align-items: center; padding: 6px 9px 6px 6px; border-radius: 10px; background: var(--carbon); color: #fff; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.dm-btip img { grid-row: 1 / 3; width: 22px; height: 36px; border-radius: 4px; object-fit: cover; }
.dm-btip b { font-size: 13px; text-align: left; } .dm-btip small { font-size: 10px; color: rgba(255,255,255,.65); }
.dm-bar:hover .dm-btip, .dm-bar:focus-visible .dm-btip { opacity: 1; transform: translate(-50%, 0); }
.dm-bar:first-child .dm-btip, .dm-bar:nth-child(2) .dm-btip { left: 0; transform: translate(0, 4px); } .dm-bar:first-child:hover .dm-btip, .dm-bar:nth-child(2):hover .dm-btip { transform: none; }
.dm-bar:nth-last-child(2) .dm-btip, .dm-bar:nth-last-child(3) .dm-btip { left: auto; right: 0; transform: translate(0, 4px); } .dm-bar:nth-last-child(2):hover .dm-btip, .dm-bar:nth-last-child(3):hover .dm-btip { transform: none; }
.dm-avg { position: absolute; left: 0; right: 0; bottom: var(--h); border-top: 1.5px dashed rgba(23,33,27,.35); pointer-events: none; }
.dm-avg em { position: absolute; right: 0; top: -17px; font-style: normal; font-size: 10px; font-weight: 700; color: var(--muted); background: #fff; padding: 0 4px; }
.dm-pl { display: grid; gap: 9px; }
.dm-pl > div { display: grid; grid-template-columns: 120px 1fr 44px; align-items: center; gap: 8px; font-size: 12px; }
.dm-pl span { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dm-pl span svg { width: 13px; height: 13px; flex: none; }
.dm-pl i { height: 9px; border-radius: 5px; background: rgba(23,33,27,.06); position: relative; overflow: hidden; }
.dm-pl i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 5px; background: linear-gradient(90deg, #FFB37A, #FF5A1F); animation: dmgrow .9s cubic-bezier(.2,.8,.2,1) both; }
.dm-pl b { text-align: right; font-size: 12.5px; }
.dm-fmt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 14px; }
.dm-fmt span { display: grid; gap: 1px; padding: 8px 10px; border-radius: 12px; background: var(--ceniza, #F5F3EF); }
.dm-fmt b { font: 800 17px/1 var(--display); } .dm-fmt small { font-size: 10.5px; color: var(--muted); line-height: 1.25; }
.dm-hm { display: grid; grid-template-columns: 16px repeat(6, 1fr); gap: 4px; align-items: center; }
.dm-hmh, .dm-hmd { font-size: 10px; color: var(--muted); text-align: center; }
.dm-hmc { aspect-ratio: 1.6; border: 0; border-radius: 6px; cursor: pointer; background: rgba(255,90,31,var(--a)); transition: transform .15s, box-shadow .15s; }
.dm-hmc:hover { transform: scale(1.08); }
.dm-hmc.on { box-shadow: 0 0 0 2px var(--carbon); }
.dm-hmx { margin: 10px 0 0; font-size: 12px; color: var(--ink-2); } .dm-hmx em { font-style: normal; font-weight: 700; color: var(--signal); }
.dm-tops { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.dm-tc { position: relative; aspect-ratio: 9 / 15; border: 0; padding: 0; border-radius: 12px; overflow: hidden; cursor: pointer; background: #ddd; transition: transform .2s; }
.dm-tc:hover { transform: translateY(-3px); }
.dm-tc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dm-tc::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.75)); }
.dm-tcn { position: absolute; z-index: 1; top: 6px; left: 6px; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: var(--ink); font-size: 11px; font-weight: 800; display: grid; place-items: center; }
.dm-tc:first-child .dm-tcn { background: var(--signal); color: #fff; }
.dm-tcb { position: absolute; z-index: 1; left: 7px; right: 7px; bottom: 6px; display: grid; text-align: left; color: #fff; }
.dm-tcb b { font: 800 14px/1.1 var(--display); } .dm-tcb small { font-size: 9.5px; opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-inf { margin-bottom: 4px; }
.dm-infg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dm-ii { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; column-gap: 8px; padding: 10px; border-radius: 12px; background: var(--ceniza, #F5F3EF); animation: dmv .45s calc(var(--n) * 90ms) both; }
.dm-ii i { grid-row: 1 / 3; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-style: normal; font-weight: 800; background: #E8E5DF; }
.dm-ii.up i { background: #DDF3E6; color: #1F8A4C; } .dm-ii.down i { background: #F8E1E3; color: #C2414B; }
.dm-ii b { font-size: 12.5px; line-height: 1.25; } .dm-ii small { font-size: 11px; color: var(--muted); line-height: 1.35; }
.dm-todo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(23,33,27,.06); }
.dm-ring { --p: 0; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--signal) calc(var(--p) * 1%), rgba(23,33,27,.08) 0); transition: --p .5s; position: relative; }
.dm-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff; }
.dm-ring b { position: relative; font-size: 12.5px; }
.dm-tl { display: grid; gap: 4px; }
.dm-ti { display: flex; align-items: center; gap: 9px; border: 0; background: none; padding: 4px 0; font: inherit; font-size: 12.5px; color: var(--ink); text-align: left; cursor: pointer; }
.dm-ti i { flex: none; width: 18px; height: 18px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgba(23,33,27,.25); display: grid; place-items: center; transition: background .2s, box-shadow .2s; }
.dm-ti i svg { width: 12px; height: 12px; color: #fff; }
.dm-ti.ok { color: var(--muted); text-decoration: line-through; } .dm-ti.ok i { background: #1F8A4C; box-shadow: none; animation: dmpop .35s; }
@keyframes dmpop { 50% { transform: scale(1.25); } }
.dm-apply { display: inline-flex; align-items: center; gap: 6px; } .dm-apply svg { width: 14px; height: 14px; } .dm-apply:disabled { background: #DDF3E6; color: #1F8A4C; cursor: default; }
.dm-ms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.dm-ms span { display: grid; padding: 8px; border-radius: 10px; background: var(--ceniza, #F5F3EF); } .dm-ms b { font: 800 16px/1.1 var(--display); } .dm-ms small { font-size: 10px; color: var(--muted); }
.dm-ret { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; font-size: 12px; }
.dm-ret i { height: 8px; border-radius: 4px; background: rgba(23,33,27,.08); position: relative; overflow: hidden; } .dm-ret i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); background: var(--signal); border-radius: 4px; animation: dmgrow .8s both; }
.dm-vs { margin: 0; font-size: 12.5px; font-weight: 700; } .dm-vs.up { color: #1F8A4C; } .dm-vs.down { color: #C2414B; }
@media (max-width: 900px) {
  .dm .mk-body { height: 620px; }
  .dm-hero { grid-template-columns: 1fr; gap: 10px; padding: 16px; } .dm-hn > b { font-size: 38px; } .dm-share { display: none; }
  .dm-lc { height: 120px; }
  .dm-kp4 { grid-template-columns: 1fr 1fr; } .dm-two { grid-template-columns: 1fr; } .dm-infg { grid-template-columns: 1fr; }
  .dm-todo { grid-template-columns: auto 1fr; } .dm-apply { grid-column: 1 / -1; justify-content: center; }
  .dm-pl > div { grid-template-columns: 96px 1fr 40px; }
  .dm-ms { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .dm-lc .ln { animation: none; stroke-dashoffset: 0; } .dm-k, .dm-ii, .dm-bar i { animation: none; } }
.dm-hmc { aspect-ratio: auto; height: 24px; }
.dm-tops { align-items: start; } .dm-tc { aspect-ratio: 9 / 13; }

/* Recursos: describir con IA */
.rec-ai { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rec-ai .btn svg, .rec-btns .btn svg { width: 15px; height: 15px; margin-right: 4px; vertical-align: -3px; }
.rec-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.rec-key ol { margin: 8px 0 6px; padding-left: 20px; display: grid; gap: 4px; }
.rec-key code { background: rgba(0,0,0,.06); padding: 1px 6px; border-radius: 6px; }
.rec-key small { color: var(--muted); }

/* ── Análisis semanal · iOS 27 ─────────────────────────────── */
.i27 { --g: rgba(255,255,255,.72); --gl: rgba(255,255,255,.9); --sep: rgba(60,60,67,.12); --c-up:#30B15A; --c-down:#FF3B30; --c-eq:#8E8E93; --c-blue:#0A84FF; --c-orange:#FF9500; --c-purple:#AF52DE;
  position: relative; margin: 8px 0 28px; padding: 22px 18px 20px; border-radius: 34px; display: grid; gap: 14px; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.35)); border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 30px 60px -40px rgba(30,30,60,.35); backdrop-filter: blur(30px) saturate(1.6); -webkit-backdrop-filter: blur(30px) saturate(1.6); }
.i27::before { content: ""; position: absolute; inset: -40% -20% auto; height: 340px; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 60% at 20% 40%, rgba(255,149,0,.22), transparent 70%), radial-gradient(40% 60% at 75% 30%, rgba(175,82,222,.18), transparent 70%), radial-gradient(35% 50% at 55% 70%, rgba(10,132,255,.14), transparent 70%); filter: blur(10px); }
.i27-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 0 4px; }
.i27-k { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--body); color: var(--signal); }
.i27-k svg { width: 15px; height: 15px; }
.i27-h h2 { margin: 6px 0 0; font: 800 34px/1.02 var(--display); letter-spacing: -.035em; color: var(--ink); }
.i27-h p { margin: 4px 0 0; font: 500 15px/1.2 var(--body); color: var(--muted); }
.i27-pill { flex: none; padding: 7px 12px; border-radius: 99px; background: var(--g); border: .5px solid var(--sep); font: 600 12px/1 var(--body); color: var(--muted); box-shadow: 0 1px 0 #fff inset; }
.i27-hero { padding: 18px 18px 16px; border-radius: 26px; background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.66)); border: .5px solid rgba(255,255,255,.95); box-shadow: 0 1px 0 #fff inset, 0 12px 30px -22px rgba(255,90,31,.5); }
.i27-hero.empty { margin-top: 6px; }
.i27-lead { margin: 0; font: 650 19px/1.32 var(--display); letter-spacing: -.015em; color: var(--ink); text-wrap: pretty; }
.i27-lead b, .i27-lead strong { font-weight: 750; }
.i27-sub { margin: 8px 0 0; font: 400 15px/1.45 var(--body); color: #3A3A3C; text-wrap: pretty; }
.i27-sec { margin: 10px 6px -4px; font: 700 20px/1.1 var(--display); letter-spacing: -.02em; color: var(--ink); }
.i27-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.i27-it { --t: var(--c-eq); display: flex; gap: 12px; align-items: flex-start; padding: 14px 15px; border-radius: 22px; background: var(--gl); border: .5px solid rgba(255,255,255,.95);
  box-shadow: 0 1px 0 #fff inset, 0 8px 22px -18px rgba(0,0,0,.35); position: relative; overflow: hidden; }
.i27-it::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--t) 12%, transparent), transparent 55%); pointer-events: none; }
.i27-it.up { --t: var(--c-up); } .i27-it.down { --t: var(--c-down); } .i27-it.eq { --t: var(--c-eq); }
.i27-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--t); box-shadow: 0 6px 14px -6px var(--t); }
.i27-ic svg { width: 18px; height: 18px; }
.i27-it > div > b { display: block; font: 650 15px/1.3 var(--body); color: var(--ink); }
.i27-it p { margin: 3px 0 0; font: 400 14px/1.42 var(--body); color: #48484A; }
.i27-list { border-radius: 22px; background: var(--gl); border: .5px solid rgba(255,255,255,.95); box-shadow: 0 1px 0 #fff inset, 0 8px 22px -20px rgba(0,0,0,.35); overflow: hidden; }
.i27-remh { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.i27-remh b { display: block; font: 700 17px/1.2 var(--display); letter-spacing: -.01em; }
.i27-remh small { display: block; margin-top: 2px; font: 400 13px/1.3 var(--body); color: var(--muted); }
.i27-ring { --p: 0; flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(var(--c-blue) calc(var(--p) * 1%), rgba(120,120,128,.16) 0); transition: --p .5s; }
.i27-ring b { width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; font: 700 15px/1 var(--display) !important; color: var(--c-blue); }
.i27-rem.all .i27-ring { background: conic-gradient(var(--c-up) 100%, transparent 0); }
.i27-rem.all .i27-ring b { color: var(--c-up); }
.i27-todo { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; cursor: pointer; position: relative; }
.i27-todo::before { content: ""; position: absolute; top: 0; left: 52px; right: 0; border-top: .5px solid var(--sep); }
.i27-todo input { position: absolute; opacity: 0; pointer-events: none; }
.i27-chk { flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; border: 1.6px solid #C7C7CC; display: grid; place-items: center; color: transparent; transition: background .25s, border-color .25s, transform .25s; }
.i27-chk svg { width: 14px; height: 14px; }
.i27-todo input:focus-visible + .i27-chk { outline: 3px solid color-mix(in srgb, var(--c-blue) 40%, transparent); outline-offset: 2px; }
.i27-todo.done .i27-chk, .i27-todo.ticking .i27-chk { background: var(--c-blue); border-color: var(--c-blue); color: #fff; }
.i27-todo.ticking .i27-chk { transform: scale(1.12); }
.i27-todo.unticking .i27-chk { background: transparent; border-color: #C7C7CC; color: transparent; }
.i27-tt > b { display: block; font: 600 15px/1.32 var(--body); color: var(--ink); }
.i27-tt > span { display: block; margin-top: 2px; font: 400 14px/1.4 var(--body); color: #48484A; }
.i27-todo.done .i27-tt, .i27-todo.ticking .i27-tt { opacity: .5; }
.i27-todo.done .i27-tt > b { text-decoration: line-through; text-decoration-color: rgba(60,60,67,.35); }
.i27-done summary { list-style: none; cursor: pointer; padding: 12px 16px; border-top: .5px solid var(--sep); font: 600 14px/1 var(--body); color: var(--c-blue); display: flex; align-items: center; gap: 8px; }
.i27-done summary::-webkit-details-marker { display: none; }
.i27-done summary span { padding: 3px 8px; border-radius: 99px; background: color-mix(in srgb, var(--c-blue) 12%, transparent); font-size: 12px; }
.i27-note { margin: 0; display: flex; gap: 10px; padding: 12px 14px; border-radius: 18px; background: rgba(120,120,128,.08); font: 400 13.5px/1.45 var(--body); color: #48484A; }
.i27-note svg { flex: none; width: 18px; height: 18px; color: var(--muted); margin-top: 1px; }
.i27-seg { display: flex; gap: 6px; overflow-x: auto; padding: 4px; margin: 0 -2px; border-radius: 99px; background: rgba(120,120,128,.12); scrollbar-width: none; }
.i27-seg::-webkit-scrollbar { display: none; }
.i27-seg button { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 6px; border: 0; border-radius: 99px; background: transparent; font: 600 13.5px/1 var(--body); color: #3A3A3C; cursor: pointer; transition: background .2s, box-shadow .2s; }
.i27-seg button .avatar { --s: 24px; }
.i27-seg button .avatar .pf { display: none; }
.i27-seg button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 3px 10px -4px rgba(0,0,0,.25), 0 0 0 .5px rgba(0,0,0,.04); }
.i27-acc { display: grid; gap: 12px; padding: 16px; border-radius: 28px; background: rgba(255,255,255,.5); border: .5px solid rgba(255,255,255,.95); }
.i27-acch { display: flex; align-items: center; gap: 12px; }
.i27-acch b { display: block; font: 750 20px/1.1 var(--display); letter-spacing: -.02em; }
.i27-acch span { display: block; margin-top: 3px; font: 500 13px/1.2 var(--body); color: var(--muted); }
.i27-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.i27-stats > span { padding: 7px 11px; border-radius: 12px; background: var(--gl); border: .5px solid var(--sep); font: 600 13px/1.2 var(--body); color: var(--ink); font-variant-numeric: tabular-nums; }
.i27-kind { --t: var(--c-eq); }
.i27-kind.ok { --t: var(--c-up); } .i27-kind.ko { --t: var(--c-down); } .i27-kind.rm { --t: var(--c-orange); } .i27-kind.add { --t: var(--c-blue); } .i27-kind.ad { --t: var(--c-purple); }
.i27-kh { display: flex; align-items: center; gap: 10px; padding: 12px 16px 6px; font: 700 15px/1 var(--display); color: var(--ink); }
.i27-kh em { margin-left: auto; font: 600 13px/1 var(--body); font-style: normal; color: var(--muted); }
.i27-kic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--t); color: #fff; }
.i27-kic svg { width: 15px; height: 15px; }
.i27-row { position: relative; padding: 9px 16px 9px 52px; font: 400 14.5px/1.42 var(--body); color: #2C2C2E; }
.i27-row::before { content: ""; position: absolute; left: 27px; top: 16px; width: 6px; height: 6px; border-radius: 50%; background: var(--t); }
.i27-row + .i27-row::after { content: ""; position: absolute; top: 0; left: 52px; right: 0; border-top: .5px solid var(--sep); }
.i27-row:last-child { padding-bottom: 14px; }
.i27-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 52px; border: 0; border-radius: 99px; cursor: pointer; text-decoration: none;
  background: linear-gradient(180deg, #FF7A45, var(--signal)); color: #fff; font: 650 16px/1 var(--body); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 12px 24px -12px rgba(255,90,31,.7); transition: transform .15s; }
.i27-cta:active { transform: scale(.98); }
.i27-cta svg { width: 18px; height: 18px; }
.i27-cta.on { background: color-mix(in srgb, var(--c-up) 14%, #fff); color: var(--c-up); box-shadow: none; cursor: default; }
.i27-cta.ghost { background: var(--gl); color: var(--c-blue); box-shadow: 0 0 0 .5px var(--sep); }
.i27-foot { margin: -2px 8px 0; text-align: center; font: 400 12.5px/1.45 var(--body); color: var(--muted); text-wrap: pretty; }
@media (max-width: 560px) { .i27 { padding: 18px 8px 10px; margin-inline: -6px; border-radius: 30px; } .i27-it { padding: 13px 13px; gap: 11px; } .i27-acc { padding: 14px 10px; } .i27-lead { font-size: 18px; } .i27-h h2 { font-size: 30px; } .i27-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .i27 * { transition: none !important; } }
.i27 .inf-n { font-weight: 700; color: inherit; background: none; padding: 0; }
.i27-it > div > b .inf-n, .i27-tt > b .inf-n { font-weight: inherit; }

/* Precio fundador y prueba gratis */
.pl-fundbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; margin: 2px auto 14px; padding: 10px 16px; max-width: 640px; border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,90,31,.12), rgba(255,149,0,.10)); border: .5px solid rgba(255,90,31,.25); font: 500 14px/1.35 var(--body); color: var(--ink); text-align: center; }
.pl-fundbar > b { padding: 3px 10px; border-radius: 99px; background: var(--signal); color: #fff; font: 700 12px/1.3 var(--body); }
.pl-fund { margin: -4px 0 8px; font: 500 13px/1.3 var(--body); color: var(--signal); }
.pl-fund b { font-weight: 750; }
.me-fund { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 99px; background: rgba(255,90,31,.12); color: var(--signal); font: 650 12px/1.4 var(--body); }
.pass-hint { display: block; margin-top: 6px; font-size: 13px; }

/* Login oficial de Meta en Cuentas */
.meta-login{display:flex;flex-direction:column;gap:8px;margin:4px 0 14px}
.meta-login .btn{align-self:flex-start}
/* Pantalla de ajustes de TikTok antes de publicar */
.tt-dlg{max-width:560px;width:calc(100% - 24px);border:0;border-radius:22px;padding:22px}
.tt-dlg::backdrop{background:rgba(10,14,12,.45)}
.tt-f{display:flex;flex-direction:column;gap:14px}
.tt-h{display:flex;align-items:center;gap:12px}
.tt-h img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.tt-h div{display:flex;flex-direction:column}
.tt-prev{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:start}
.tt-prev .vid{width:120px}
.tt-prev textarea{width:100%;font:inherit;resize:vertical}
.tt-fs{border:1px solid var(--line,#e6e8ec);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;margin:0}
.tt-fs legend{font-weight:700;padding:0 4px}
.tt-ck,.tt-sw{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.tt-ck span,.tt-sw span{display:flex;flex-direction:column;gap:2px}
.tt-ck.off{opacity:.55;cursor:default}
.tt-com{display:flex;flex-direction:column;gap:8px;padding-left:28px}
.tt-decl{font-size:14px}
.tt-note:empty{display:none}

/* YouTube */
.pf.youtube { background: #FF0033; }
.yt-aj { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.yt-r { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.yt-r label { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.drive-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; }
.drive-btn svg { width: 16px; height: 16px; }