/* Layout: barra superior oscura de marca, contenido en columna de 1180px, resultados en 2 columnas (filtros + lista). */
:root {
  --bg: #f1efe7;
  --surface: #ffffff;
  --surface-2: #e9e6db;
  --fg: #0d0d0d;
  --muted: #5d5a50;
  --line: #d8d4c6;
  --primary: #0b7cef;
  --primary-hover: #0866c7;
  --primary-fg: #ffffff;
  --primary-soft: #dcebfc;
  --lime: #ccff35;
  --purple: #ad49e1;
  --purple-soft: #f1e2f9;
  --good: #1d8a4e;
  --warn: #a86f00;
  --bad: #c43c3c;
  --band-bg: #0d0d0d;
  --band-2: #262626;
  --band-fg: #f1efe7;
  --band-muted: #a7a49a;
  --shadow: 0 1px 2px rgb(13 13 13 / .06), 0 8px 24px rgb(13 13 13 / .06);
  --font-display: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 14px;
  --radius-sm: 8px;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--band-bg); }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0; }
a { color: var(--primary); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.num { font-variant-numeric: tabular-nums; }

.wrap { max-width: var(--max); margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

/* Barra superior */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--band-bg); color: var(--band-fg); }
.topbar .wrap { display: flex; align-items: center; gap: 24px; min-height: 64px; flex-wrap: wrap; padding-block: 8px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--band-fg); text-decoration: none; font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em; }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--lime); color: #0d0d0d; display: grid; place-items: center; font-size: 1rem; }
.brand small { font-family: var(--font-body); font-weight: 500; font-size: .68rem; color: var(--band-muted); border: 1px solid var(--band-2); border-radius: 99px; padding: 2px 8px; letter-spacing: .02em; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.nav a { color: var(--band-muted); text-decoration: none; padding: 8px 12px; border-radius: 8px; font-weight: 500; font-size: .92rem; }
.nav a:hover { color: var(--band-fg); background: var(--band-2); }
.nav a[aria-current="page"] { color: var(--band-fg); background: var(--band-2); }
.nav a.cta { background: var(--lime); color: #0d0d0d; font-weight: 600; }

.demo-note { background: var(--purple-soft); color: var(--fg); font-size: .82rem; }
.demo-note .wrap { padding-block: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.demo-note strong { color: var(--purple); }

/* Botones */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 10px; padding: 11px 18px; font-weight: 600; cursor: pointer; text-decoration: none; font-size: .95rem; transition: background .15s, border-color .15s; }
.btn-primary { background: var(--primary); color: var(--primary-fg); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-lime { background: var(--lime); color: #0d0d0d; }
.btn-lime:hover { filter: brightness(.95); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--fg); }
.btn-ghost:hover { border-color: var(--fg); }
.btn-sm { padding: 7px 12px; font-size: .85rem; border-radius: 8px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Hero */
.hero { background: var(--band-bg); color: var(--band-fg); }
.hero .wrap { padding-block: 56px 64px; display: grid; gap: 28px; }
.eyebrow { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; color: var(--muted); }
.hero .eyebrow { color: var(--lime); }
.hero h1 { max-width: 16ch; }
.hero h1 em { font-style: normal; color: var(--lime); }
.hero .lead { color: var(--band-muted); font-size: 1.1rem; max-width: 60ch; }

.finder { background: var(--band-2); border-radius: var(--radius); padding: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 14px; align-items: end; }
.finder label { display: grid; gap: 6px; font-size: .78rem; color: var(--band-muted); font-weight: 500; }
.finder label b { color: var(--band-fg); font-family: var(--font-display); font-weight: 600; font-size: .95rem; }
.finder select { background: var(--band-bg); color: var(--band-fg); border: 1px solid #3a3a3a; border-radius: 10px; padding: 12px; width: 100%; color-scheme: dark; }
@media (max-width: 860px) { .finder { grid-template-columns: 1fr; } }

.stats { display: flex; flex-wrap: wrap; gap: 28px; color: var(--band-muted); font-size: .88rem; }
.stats b { display: block; font-family: var(--font-display); color: var(--band-fg); font-size: 1.4rem; }

/* Secciones */
.section { padding-block: 56px; }
.section-head { display: grid; gap: 8px; margin-bottom: 28px; max-width: 70ch; }
.section-head p { color: var(--muted); }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.cat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; gap: 6px; cursor: pointer; text-align: left; transition: border-color .15s; }
.cat:hover { border-color: var(--primary); }
.cat p { color: var(--muted); font-size: .88rem; }
.cat .meta { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-top: 6px; font-size: .8rem; color: var(--muted); }
.cat.soon { background: transparent; border-style: dashed; cursor: default; }
.cat.soon:hover { border-color: var(--line); }

.diff { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.diff div { display: grid; gap: 6px; border-top: 2px solid var(--fg); padding-top: 14px; }
.diff p { color: var(--muted); font-size: .92rem; }

/* Chips y sellos */
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--surface-2); color: var(--fg); white-space: nowrap; }
.chip-new { background: var(--lime); color: #0d0d0d; }
.chip-blue { background: var(--primary-soft); color: var(--primary); }
.chip-purple { background: var(--purple-soft); color: var(--purple); }
.chip-line { background: transparent; border: 1px solid var(--line); font-weight: 500; }
.lvl { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: var(--muted); }
.lvl i { display: inline-flex; gap: 2px; }
.lvl i span { width: 7px; height: 7px; border-radius: 2px; background: var(--line); }
.lvl i span.on { background: var(--primary); }
.lvl.l3 { color: var(--primary); }

/* Score */
.score { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; background: var(--band-bg); color: var(--lime); font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; flex: none; line-height: 1; }
.score small { display: block; font-size: .55rem; font-weight: 600; color: var(--band-muted); letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; font-family: var(--font-body); }
.score.none { background: var(--surface-2); color: var(--muted); font-size: .66rem; font-weight: 600; text-align: center; padding: 6px; line-height: 1.2; font-family: var(--font-body); }
.score.lg { width: 104px; height: 104px; font-size: 2.6rem; border-radius: 20px; }
.score.lg small { font-size: .62rem; }

/* Resultados */
.results-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; padding-block: 32px 120px; }
@media (max-width: 900px) { .results-layout { grid-template-columns: minmax(0, 1fr); } }
.filters { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; gap: 18px; position: sticky; top: calc(80px + env(safe-area-inset-top, 0px)); }
@media (max-width: 900px) { .filters { position: static; } }
.filters fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.filters legend { font-family: var(--font-display); font-weight: 600; font-size: .9rem; margin-bottom: 4px; padding: 0; }
.filters label { display: flex; gap: 8px; align-items: center; font-size: .88rem; cursor: pointer; }
.filters select { width: 100%; padding: 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); }
.filters input[type="checkbox"], .filters input[type="radio"] { accent-color: var(--primary); }
.filters .reset { background: none; border: 0; color: var(--primary); cursor: pointer; padding: 0; text-align: left; font-size: .85rem; font-weight: 600; }

.res-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.res-head p { color: var(--muted); font-size: .9rem; }
.res-list { display: grid; gap: 12px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: start; }
.card.unclaimed { background: transparent; border-style: dashed; }
.card h3 a { color: var(--fg); text-decoration: none; }
.card h3 a:hover { color: var(--primary); }
.card-body { display: grid; gap: 8px; min-width: 0; }
.card-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card-sub { color: var(--muted); font-size: .88rem; }
.card-facts { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: .85rem; }
.card-facts span { color: var(--muted); }
.card-facts b { color: var(--fg); font-weight: 600; }
.card-clients { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: .8rem; color: var(--muted); }
.card-side { display: grid; gap: 8px; justify-items: end; text-align: right; }
.rehire { font-size: .82rem; color: var(--muted); }
.rehire b { font-family: var(--font-display); color: var(--good); font-size: 1.05rem; }
@media (max-width: 640px) {
  .card { grid-template-columns: auto minmax(0, 1fr); }
  .card-side { grid-column: 1 / -1; justify-items: start; text-align: left; grid-auto-flow: column; justify-content: space-between; align-items: center; }
}
.empty { text-align: center; padding: 48px 16px; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); }

.cmp-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--band-bg); color: var(--band-fg); padding-bottom: env(safe-area-inset-bottom, 0px); }
.cmp-bar .wrap { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding-block: 12px; }
.cmp-bar .slots { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0; }
.cmp-bar .slot { background: var(--band-2); border-radius: 8px; padding: 6px 10px; font-size: .85rem; display: flex; gap: 8px; align-items: center; }
.cmp-bar .slot button { background: none; border: 0; color: var(--band-muted); cursor: pointer; padding: 0 2px; font-size: 1rem; line-height: 1; }
.cmp-bar .slot.empty-slot { color: var(--band-muted); border: 1px dashed #3a3a3a; background: transparent; }

/* Perfil */
.profile-head { background: var(--band-bg); color: var(--band-fg); }
.profile-head .wrap { padding-block: 32px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; }
@media (max-width: 760px) { .profile-head .wrap { grid-template-columns: 1fr; } }
.profile-head .crumbs { font-size: .82rem; color: var(--band-muted); margin-bottom: 8px; }
.profile-head .crumbs a { color: var(--band-muted); }
.profile-head p.tag { color: var(--band-muted); margin-top: 6px; max-width: 60ch; }
.profile-head .chip { background: var(--band-2); color: var(--band-fg); }
.profile-head .lvl { color: var(--band-muted); }
.profile-head .lvl.l3 { color: var(--lime); }
.profile-head .lvl i span { background: #3a3a3a; }
.profile-head .lvl i span.on { background: var(--lime); }
.profile-head .actions { display: grid; gap: 8px; }
.profile-head .rehire { color: var(--band-muted); }
.profile-head .rehire b { color: var(--lime); }

.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; padding-block: 32px 64px; align-items: start; }
@media (max-width: 900px) { .profile-grid { grid-template-columns: 1fr; } }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: grid; gap: 16px; }
.panel + .panel { margin-top: 16px; }
.panel h2 { font-size: 1.2rem; }
.panel-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.panel-head p { color: var(--muted); font-size: .85rem; }
.aside { display: grid; gap: 16px; position: sticky; top: calc(80px + env(safe-area-inset-top, 0px)); }
@media (max-width: 900px) { .aside { position: static; } }

.kv { display: grid; gap: 10px; font-size: .9rem; }
.kv div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.kv div:last-child { border-bottom: 0; padding-bottom: 0; }
.kv dt { color: var(--muted); margin: 0; }
.kv dd { margin: 0; font-weight: 600; text-align: right; }

.bars { display: grid; gap: 10px; }
.bar { display: grid; grid-template-columns: 130px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font-size: .85rem; }
.bar .track { height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.bar .fill { height: 100%; background: var(--primary); border-radius: 99px; }
.bar b { text-align: right; font-variant-numeric: tabular-nums; }

.clients { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.client { border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: grid; gap: 2px; font-size: .85rem; }
.client b { font-weight: 600; font-size: .92rem; }
.client span { color: var(--muted); }
.client .ok { color: var(--good); font-weight: 600; font-size: .75rem; }
.declared { display: flex; gap: 6px; flex-wrap: wrap; }

.review { border-top: 1px solid var(--line); padding-top: 16px; display: grid; gap: 8px; }
.review:first-of-type { border-top: 0; padding-top: 0; }
.review-top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.review-top b { font-weight: 600; }
.review-top span { color: var(--muted); font-size: .82rem; }
.review p { font-size: .94rem; max-width: 70ch; }
.review .subs { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: .78rem; color: var(--muted); }
.review .subs b { color: var(--fg); }
.stars { color: var(--primary); letter-spacing: 1px; font-size: .9rem; }
.ex-block { background: var(--surface-2); border-radius: 10px; padding: 16px; display: grid; gap: 12px; }

.reel { aspect-ratio: 16 / 9; max-width: 100%; border-radius: 12px; background: linear-gradient(135deg, var(--band-bg), var(--band-2)); display: grid; place-items: center; color: var(--band-fg); }
.reel span { width: 64px; height: 64px; border-radius: 50%; background: var(--lime); color: #0d0d0d; display: grid; place-items: center; font-size: 1.4rem; }

.unclaimed-box { border: 1px dashed var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 10px; color: var(--muted); }

/* Comparador */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table.cmp { border-collapse: collapse; width: 100%; min-width: 640px; font-size: .9rem; }
table.cmp th, table.cmp td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.cmp thead th { font-family: var(--font-display); font-size: 1rem; }
table.cmp tbody th { color: var(--muted); font-weight: 500; width: 190px; }
table.cmp tr:last-child td, table.cmp tr:last-child th { border-bottom: 0; }
table.cmp .best { color: var(--good); font-weight: 700; }

/* Metodología */
.formula { background: var(--band-bg); color: var(--band-fg); border-radius: var(--radius); padding: 24px; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .95rem; overflow-x: auto; line-height: 1.8; }
.formula .hl { color: var(--lime); }
.prose { display: grid; gap: 14px; max-width: 70ch; }
.prose p, .prose li { color: var(--muted); }
.prose ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.levels { display: grid; gap: 10px; }
.level-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr); gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; align-items: start; font-size: .9rem; }
.level-row .n { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--primary); line-height: 1; }
.level-row p { color: var(--muted); }
@media (max-width: 640px) { .level-row { grid-template-columns: 44px minmax(0, 1fr); } .level-row > :last-child { grid-column: 2; } }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }
.rules { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
.rules li { padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font-size: .92rem; }

/* Proveedores */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; counter-reset: s; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: grid; gap: 6px; counter-increment: s; font-size: .9rem; }
.step::before { content: counter(s); font-family: var(--font-display); font-weight: 800; color: var(--primary); font-size: 1.3rem; }
.step p { color: var(--muted); }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; display: grid; gap: 10px; align-content: start; }
.plan.featured { background: var(--band-bg); color: var(--band-fg); border-color: var(--band-bg); }
.plan.featured .muted, .plan.featured li { color: var(--band-muted); }
.plan .price { font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; }
.plan .price small { font-size: .85rem; font-weight: 500; }
.plan ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: .9rem; color: var(--muted); }
.muted { color: var(--muted); }
.note { font-size: .82rem; color: var(--muted); }

footer.foot { border-top: 1px solid var(--line); }
footer.foot .wrap { padding-block: 28px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: .85rem; }
.profile-head .score { background: var(--band-2); }

/* =========================================================
   Capa táctil e iOS: materiales translúcidos, hojas inferiores,
   tab bar flotante, targets de 44pt y respeto de preferencias.
   ========================================================= */
:root {
  --glass: rgb(255 255 255 / .72);
  --glass-line: rgb(13 13 13 / .08);
  --glass-shadow: 0 8px 32px rgb(13 13 13 / .14), 0 1px 2px rgb(13 13 13 / .08);
  --bar-glass: rgb(13 13 13 / .82);
  --scrim: rgb(0 0 0 / .4);
  --topbar-h: 64px;
  --tap: 44px;
  --ease-spring: cubic-bezier(.32, .72, 0, 1);
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: var(--surface); --bar-glass: var(--band-bg); }
}
@media (prefers-contrast: more) {
  :root { --line: #8a8678; --muted: #3d3b35; }
  .chip-line, .btn-ghost { border-width: 2px; }
}

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.locked, html.locked body { overflow: hidden; }
a, button, label, select, input, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
input, select, textarea { font-size: 16px; } /* evita el zoom automático de Safari al enfocar */
.glass { background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); }

/* Feedback de toque */
.btn, .pill, .cat, .cmp-btn, .chip-x, .tabbar a { transition: transform .18s var(--ease-spring), background .15s, border-color .15s; }
.btn:active:not([disabled]), .pill:active, .cmp-btn:active:not([disabled]), .chip-x:active { transform: scale(.96); }
.cat:active, .card:active { transform: scale(.985); }
.card { transition: transform .2s var(--ease-spring), border-color .15s; }
.btn { min-height: var(--tap); }
.btn-sm { min-height: 36px; }
.btn-block { width: 100%; }

/* Barra superior translúcida */
.topbar { background: var(--bar-glass); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
.nav a { min-height: var(--tap); display: inline-flex; align-items: center; }
.back, .top-cta { display: none; }
.back { align-items: center; gap: 2px; color: var(--lime); text-decoration: none; font-weight: 500; min-height: var(--tap); margin-left: -6px; padding-right: 8px; }
.back svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.top-cta { margin-left: auto; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 99px; background: var(--lime); color: #0d0d0d; font-weight: 600; font-size: .85rem; text-decoration: none; }

/* Barra de filtros rápidos (solo pantallas chicas) */
.filter-bar { display: none; }
.pill-scroll { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding-block: 10px; margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
.pill-scroll::-webkit-scrollbar { display: none; }
.pill { flex: none; scroll-snap-align: start; min-height: 36px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font-weight: 500; font-size: .88rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.pill[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.pill-strong { font-weight: 600; }
.pill .count { background: var(--primary); color: var(--primary-fg); border-radius: 99px; min-width: 20px; height: 20px; display: inline-grid; place-items: center; font-size: .72rem; padding: 0 6px; }

.large-title { font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 700; }
.field.sort { min-width: 200px; }
.active-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.chip-x { border: 0; cursor: pointer; min-height: 32px; padding: 0 12px; background: var(--primary-soft); color: var(--primary); font-size: .82rem; }
.chip-x span { font-size: 1rem; line-height: 1; }

/* Filtros: filas táctiles */
.filters .check { min-height: var(--tap); gap: 12px; }
.filters .check input { width: 20px; height: 20px; flex: none; }
.filters legend label { cursor: default; }
.filters select, .field select, .field input, .field textarea { min-height: var(--tap); }
.filters.in-sheet { position: static; border: 0; padding: 0; background: transparent; }
.filters .reset, .active-filters .reset { min-height: 32px; }

/* Tarjeta completa tocable */
.card { position: relative; }
.card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card h3 a:focus-visible { outline: none; }
.card:has(h3 a:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.card-side { position: relative; z-index: 1; }
.cmp-btn { min-height: 36px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); font-weight: 600; font-size: .82rem; cursor: pointer; white-space: nowrap; }
.cmp-btn[aria-pressed="true"] { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.cmp-btn[disabled] { opacity: .4; cursor: not-allowed; }
@media (hover: hover) { .card:hover { border-color: var(--primary); } }

/* Comparador: primera columna fija al desplazar */
table.cmp thead th:first-child, table.cmp tbody th { position: sticky; left: 0; background: var(--surface); z-index: 1; }
.cmp-bar .btn { min-height: 40px; }
.cmp-bar .slot button { min-width: 32px; min-height: 32px; }
.cmp-count { display: none; }

/* Perfil */
.profile-name { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.action-bar { display: none; }

/* Tab bar flotante (solo pantallas chicas) */
.tabbar { display: none; }
.tabbar a { position: relative; flex: 1; display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 54px; border-radius: 99px; color: var(--muted); text-decoration: none; font-size: .68rem; font-weight: 600; letter-spacing: .01em; }
.tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a[aria-current="page"] { color: var(--primary); background: var(--primary-soft); }
.tabbar .badge { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 18px; height: 18px; border-radius: 99px; background: var(--bad); color: #fff; font-size: .66rem; display: grid; place-items: center; padding: 0 5px; }

/* Hojas: diálogo centrado en escritorio, hoja inferior en teléfono */
.modal { position: fixed; inset: 0; z-index: 40; background: var(--scrim); display: grid; place-items: center; padding: 24px; animation: fade .2s ease-out; }
.sheet { background: var(--surface); color: var(--fg); border-radius: 22px; width: min(540px, 100%); max-height: min(86vh, 760px); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--glass-shadow); animation: pop .28s var(--ease-spring); outline: none; }
.sheet-grab { display: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 8px; }
.sheet-head h2 { font-size: 1.25rem; }
.sheet .x { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; flex: none; position: relative; }
.sheet .x::after { content: ""; position: absolute; inset: -6px; }
.sheet-body { padding: 8px 20px 20px; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 14px; -webkit-overflow-scrolling: touch; }
.sheet-foot { padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); display: flex; gap: 10px; align-items: center; justify-content: space-between; background: var(--surface); }
.sheet-foot .btn-primary:only-child, .sheet-foot .btn-block { flex: 1; }
.sheet-foot .btn-ghost + .btn-primary { flex: 1; }
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; font-size: .88rem; font-weight: 500; }
.field input, .field textarea, .field select { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); width: 100%; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .8rem; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.progress { font-size: .85rem; color: var(--muted); }
.steps-mini { display: flex; gap: 4px; }
.steps-mini span { flex: 1; height: 4px; border-radius: 99px; background: var(--surface-2); }
.steps-mini span.on { background: var(--primary); }
.success { background: var(--primary-soft); border-radius: 12px; padding: 14px; font-size: .92rem; }

/* Control segmentado para las calificaciones */
.rate { display: grid; gap: 8px; font-size: .92rem; }
.seg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; background: var(--surface-2); border-radius: 12px; padding: 3px; }
.seg.seg-wide { grid-template-columns: 1fr 1fr; }
.seg label { position: relative; min-height: 40px; display: grid; place-items: center; border-radius: 9px; cursor: pointer; font-weight: 600; font-size: .95rem; transition: background .15s, color .15s; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { background: var(--surface); color: var(--primary); box-shadow: 0 1px 3px rgb(13 13 13 / .15); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 1px; }

@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.96); } }
@keyframes rise { from { transform: translateY(100%); } }

@media (max-width: 900px) {
  .filters { display: none; }
  .filters.in-sheet { display: grid; }
  .filter-bar { display: block; position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)); z-index: 15; background: var(--bg); border-bottom: 1px solid var(--line); }
  .results-layout { padding-top: 20px; }
  .res-head { align-items: center; }
}

@media (max-width: 760px) {
  :root { --topbar-h: 52px; }
  body { font-size: 16px; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); }
  .topbar .wrap { min-height: var(--topbar-h); padding-block: 0; gap: 12px; flex-wrap: nowrap; }
  .brand { font-size: 1.15rem; }
  .brand-mark { width: 26px; height: 26px; }
  .brand small, .nav { display: none; }
  .top-cta { display: inline-flex; }
  body[data-route="profile"] .back { display: inline-flex; }
  body[data-route="profile"] .brand { display: none; }
  .demo-note .wrap { padding-block: 6px; font-size: .78rem; }

  .hero .wrap { padding-block: 32px 36px; gap: 20px; }
  .hero .lead { font-size: 1rem; }
  .finder { padding: 14px; }
  .stats { gap: 16px 24px; }
  .section { padding-block: 40px; }

  .res-head .field.sort { min-width: 0; width: 100%; }
  .res-head { display: grid; }
  .card { padding: 16px; gap: 14px; }
  .card .score { width: 56px; height: 56px; font-size: 1.35rem; }
  .card-facts { font-size: .82rem; }

  .tabbar { display: flex; position: fixed; z-index: 26; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); margin: 0 auto; max-width: 440px; border-radius: 99px; padding: 5px; gap: 2px; }
  body[data-route="profile"] .tabbar { display: none; }

  .cmp-bar { left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 82px); border-radius: 18px; padding-bottom: 0; box-shadow: var(--glass-shadow); max-width: 440px; margin: 0 auto; }
  .cmp-bar .wrap { padding: 8px 8px 8px 16px; flex-wrap: nowrap; }
  .cmp-bar .slots { display: none; }
  .cmp-count { display: block; flex: 1; font-size: .88rem; }

  .profile-head .wrap { grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding-block: 20px 24px; align-items: start; }
  .profile-head .score.lg { width: 76px; height: 76px; font-size: 1.9rem; border-radius: 18px; }
  .profile-head .actions { grid-column: 1 / -1; }
  .profile-head .actions [data-action="contact"], .profile-head .actions [data-action="review"] { display: none; }
  .profile-head .crumbs { display: none; }
  .profile-grid { padding-block: 20px 32px; }
  .panel { padding: 18px; }
  .bar { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 30px; font-size: .8rem; gap: 8px; }
  .action-bar { display: block; position: fixed; z-index: 26; left: 0; right: 0; bottom: 0; border-width: 1px 0 0; border-radius: 0; box-shadow: none; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
  .action-inner { display: grid; grid-template-columns: auto 1fr; gap: 10px; max-width: 560px; margin: 0 auto; }

  .modal { place-items: end stretch; padding: 0; padding-top: env(safe-area-inset-top, 0px); }
  .sheet { width: 100%; max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 12px); border-radius: 22px 22px 0 0; animation: rise .38s var(--ease-spring); transition: transform .3s var(--ease-spring); }
  .sheet-grab { display: grid; place-items: center; padding-top: 8px; cursor: grab; touch-action: none; }
  .sheet-grab span { width: 38px; height: 5px; border-radius: 99px; background: var(--line); }
  .sheet-head { padding-top: 8px; touch-action: none; }

  footer.foot .wrap { padding-block: 20px; }
}
@media (pointer: coarse) {
  .filters .check { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .modal, .sheet { animation: none; }
}

/* =========================================================
   Ronda de sistema: búsqueda, necesidades, jerarquía de textos
   ========================================================= */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.good { color: var(--good); }
.bad { color: var(--bad); }
.lime { color: var(--lime); }
.section-tight { padding-top: 8px; }

/* Barra de búsqueda estilo iOS */
.search { position: relative; display: flex; align-items: center; background: var(--surface-2); border-radius: 12px; min-height: 44px; padding: 0 8px 0 36px; margin-bottom: 18px; }
.search svg { position: absolute; left: 11px; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; min-height: 44px; padding: 0; -webkit-appearance: none; appearance: none; }
.search input::-webkit-search-cancel-button { display: none; }
.search:focus-within { box-shadow: 0 0 0 2px var(--primary); }
.search-clear { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--muted); color: var(--surface); font-size: 1rem; line-height: 1; cursor: pointer; flex: none; position: relative; }
.search-clear::after { content: ""; position: absolute; inset: -8px; }
.search-lg { background: var(--band-2); min-height: 56px; border-radius: 16px; padding-left: 46px; max-width: 720px; margin: 0; }
.search-lg svg { left: 16px; width: 22px; height: 22px; stroke: var(--band-muted); }
.search-lg input { color: var(--band-fg); min-height: 56px; font-size: 17px; color-scheme: dark; }
.search-lg input::placeholder { color: var(--band-muted); }
.search-lg .search-clear { background: var(--band-muted); color: var(--band-bg); }

/* Lista de necesidades (celdas tipo iOS) */
.need-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 10px; }
.need { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 14px 14px 16px; min-height: 76px; cursor: pointer; color: var(--fg); transition: transform .18s var(--ease-spring), border-color .15s; }
.need:active { transform: scale(.985); }
@media (hover: hover) { .need:hover { border-color: var(--primary); } }
.need-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; }
.need-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.need-text { display: grid; gap: 2px; min-width: 0; }
.need-text b { font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.3; }
.need-text > span { color: var(--muted); font-size: .85rem; }
.need-meta { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: .85rem; }
.need-meta svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Score con escala visible */
.score small { text-transform: none; letter-spacing: 0; font-size: .6rem; }
.score.none { font-size: .72rem; }

/* Sello de verificación en lenguaje claro */
.vbadge { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.vbadge i { font-style: normal; width: 16px; height: 16px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .62rem; background: var(--primary); color: var(--primary-fg); }
.vbadge.v1, .vbadge.v2 { color: var(--fg); }
.vbadge.v3 { color: var(--primary); }
.vbadge.v0 { color: var(--muted); }
.profile-head .vbadge { color: var(--band-fg); }
.profile-head .vbadge.v3 { color: var(--lime); }
.profile-head .vbadge.v3 i { background: var(--lime); color: #0d0d0d; }

/* Tarjeta: jerarquía nombre → quién es → prueba → qué hace → precio → clientes */
.card-body { gap: 4px; }
.card h3 { font-size: 1.1rem; }
.card-meta { color: var(--muted); font-size: .85rem; }
.card-proof { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: .82rem; color: var(--muted); margin-top: 4px; }
.card-proof b { font-family: var(--font-display); }
.card-tag { margin-top: 6px; font-size: .92rem; }
.card-price { font-size: .88rem; color: var(--muted); }
.card-price b { color: var(--fg); font-weight: 600; }
.card-clients { font-size: .82rem; color: var(--muted); margin-top: 2px; }
.card-clients span { color: var(--fg); font-weight: 500; }
.card-side { align-self: start; }

.res-head .sort { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); }
.res-head .sort select { border: 0; background: transparent; color: var(--primary); font-weight: 600; min-height: 44px; cursor: pointer; padding-right: 4px; }
.list-sep { padding: 20px 2px 4px; display: grid; gap: 4px; }
.list-sep h2 { font-size: 1.1rem; }
.list-sep p { color: var(--muted); font-size: .88rem; max-width: 60ch; }

.ref { background: var(--primary-soft); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 4px; margin-bottom: 14px; font-size: .9rem; }
.ref-title { font-family: var(--font-display); font-weight: 600; }
.ref .note { margin-top: 4px; }

.filters .check .note { font-size: .78rem; }
.filters fieldset .note { line-height: 1.4; }
.seg.seg-auto { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg.seg-auto label { font-size: .8rem; text-align: center; padding: 0 4px; min-height: 36px; }

/* Perfil con pestañas segmentadas */
.ph-main { min-width: 0; display: grid; gap: 4px; }
.ph-meta { color: var(--band-muted); }
.profile-head .card-proof { color: var(--band-muted); margin-top: 6px; }
.btn-ghost-dark { background: transparent; color: var(--band-fg); border-color: #3a3a3a; }
.btn-ghost-dark:hover { border-color: var(--band-fg); }
.profile-wrap { max-width: 860px; padding-block: 24px 64px; display: grid; gap: 16px; }
.profile-wrap .panel + .panel { margin-top: 0; }
.tab-panel { display: grid; gap: 16px; }
.seg-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px) + 8px); z-index: 10; box-shadow: 0 0 0 6px var(--bg); }
.seg-tabs button { border: 0; background: transparent; min-height: 40px; border-radius: 9px; font-weight: 600; font-size: .85rem; color: var(--fg); cursor: pointer; padding: 0 4px; }
.seg-tabs button[aria-selected="true"] { background: var(--surface); color: var(--primary); box-shadow: 0 1px 3px rgb(13 13 13 / .15); }
.lead-sm { font-size: 1.02rem; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.kv dd small { display: block; font-weight: 400; color: var(--muted); font-size: .8rem; }
.kv dd { max-width: 60%; }
.h-sm { font-size: .95rem; }
.bar small { color: var(--muted); font-weight: 400; }
.fill-alt { background: var(--purple); }
.review-who { color: var(--muted); font-size: .82rem; margin-top: -4px; }
.review-foot { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .78rem; }
.review-foot > span:first-child { font-weight: 600; }
.review-foot .subs { color: var(--muted); }
.stars-off { opacity: .25; }
.ex-block { background: var(--surface-2); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.rows li:last-child { border-bottom: 0; }
.rows li > span:first-child { display: grid; }
.rows small { color: var(--muted); font-size: .8rem; }
.td-actions { display: flex; gap: 6px; flex-wrap: wrap; }

@media (max-width: 760px) {
  .need-list { grid-template-columns: 1fr; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .need { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); min-height: 72px; padding-block: 12px; }
  .need:last-child { border-bottom: 0; }
  .need:active { transform: none; background: var(--surface-2); }
  .need-text b { font-size: .95rem; }
  .card { grid-template-columns: auto minmax(0, 1fr); }
  .card-side { grid-column: 2; justify-items: start; }
  .res-head { grid-template-columns: 1fr; gap: 4px; }
  .res-head .sort { justify-self: start; margin-left: -2px; }
  .profile-head .score.lg small { font-size: .55rem; }
  .seg-tabs button { font-size: .78rem; }
  .profile-wrap { padding-block: 16px 32px; }
  .kv div { flex-direction: column; gap: 2px; }
  .kv dd { text-align: left; max-width: none; }
}
.tabbar .badge[hidden] { display: none; }
.reset { background: none; border: 0; color: var(--primary); cursor: pointer; padding: 0 4px; font-weight: 600; font-size: .85rem; min-height: 32px; }
.ref { padding: 0; }
.ref summary { list-style: none; cursor: pointer; display: grid; gap: 2px; padding: 12px 40px 12px 16px; position: relative; min-height: 44px; }
.ref summary::-webkit-details-marker { display: none; }
.ref summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--primary); border-bottom: 2px solid var(--primary); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.ref[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.ref-sum { font-size: .88rem; }
.ref[open] .ref-sum { display: none; }
.ref > p { padding: 0 16px; }
.ref > p:last-child { padding-bottom: 14px; }
@media (max-width: 900px) {
  .chip-cat { display: none; }
  .active-filters.only-cats { display: none; }
}
@media (max-width: 760px) {
  .large-title { font-size: 1.5rem; }
  .results .search { margin-bottom: 14px; }
  .res-head { margin-bottom: 10px; }
}

/* =========================================================
   Tema claro delicado: fondo blanco, líneas de 1px casi
   transparentes, títulos livianos, botones píldora negros.
   El lima queda como acento de marca (sello, score, subrayado).
   ========================================================= */
:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f5f3;
  --surface-3: #efefec;
  --fg: #0d0d0d;
  --muted: #6b6a65;
  --line: rgb(13 13 13 / .08);
  --line-strong: rgb(13 13 13 / .15);
  --primary: #0b7cef;
  --primary-hover: #0866c7;
  --primary-soft: #eef5fe;
  --purple-soft: #f7eefc;
  --good: #198754;
  --ink: #0d0d0d;
  --ink-fg: #ffffff;
  --ink-hover: #2b2b2b;
  --topbar-bg: rgb(255 255 255 / .8);
  --glass: rgb(255 255 255 / .78);
  --glass-line: rgb(13 13 13 / .08);
  --glass-shadow: 0 10px 40px rgb(13 13 13 / .08), 0 1px 2px rgb(13 13 13 / .05);
  --shadow-hover: 0 8px 30px rgb(13 13 13 / .07);
  --radius: 20px;
  --radius-sm: 12px;
  color-scheme: light;
}

body { font-size: 15px; letter-spacing: -0.006em; }
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.03em; }
h1 { font-weight: 600; letter-spacing: -0.035em; line-height: 1.08; }
h3 { font-weight: 500; letter-spacing: -0.015em; }
.eyebrow { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: .85rem; color: var(--muted); }

/* Barra superior: blanca translúcida con línea fina */
body::before { background: var(--topbar-bg); }
.topbar { background: var(--topbar-bg); color: var(--fg); border-bottom: 1px solid var(--line); }
.brand { color: var(--fg); font-weight: 600; letter-spacing: -0.03em; }
.brand small { color: var(--muted); border-color: var(--line); }
.nav a { color: var(--muted); font-weight: 500; border-radius: 99px; padding-inline: 14px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--fg); background: var(--surface-2); }
.nav a.cta, .top-cta { background: var(--ink); color: var(--ink-fg); border-radius: 99px; }
.nav a.cta:hover { background: var(--ink-hover); color: var(--ink-fg); }
.back { color: var(--primary); }
.demo-note { background: var(--surface-2); border-bottom: 1px solid var(--line); color: var(--muted); }
.demo-note strong { color: var(--fg); font-weight: 600; }

/* Botones píldora */
.btn { border-radius: 99px; font-weight: 500; letter-spacing: -0.005em; }
.btn-primary, .btn-lime { background: var(--ink); color: var(--ink-fg); }
.btn-primary:hover, .btn-lime:hover { background: var(--ink-hover); filter: none; }
.btn-ghost, .btn-ghost-dark { background: var(--surface); color: var(--fg); border: 1px solid var(--line-strong); }
.btn-ghost:hover, .btn-ghost-dark:hover { border-color: var(--fg); }
.btn[disabled] { background: var(--surface-3); color: var(--muted); opacity: 1; }

/* Hero claro, con el subrayado lima como única marca de color */
.hero { background: var(--bg); color: var(--fg); }
.hero .wrap { padding-block: 72px 56px; gap: 24px; }
.hero .eyebrow { color: var(--muted); }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); max-width: 15ch; }
.hero h1 em { color: inherit; background: linear-gradient(transparent 68%, var(--lime) 68%, var(--lime) 92%, transparent 92%); padding-inline: 2px; }
.hero .lead { color: var(--muted); font-size: 1.12rem; max-width: 52ch; }
.search-lg { background: var(--surface); border: 1px solid var(--line-strong); box-shadow: 0 1px 2px rgb(13 13 13 / .04), 0 8px 24px rgb(13 13 13 / .05); }
.search-lg svg { stroke: var(--muted); }
.search-lg input { color: var(--fg); color-scheme: light; }
.search-lg input::placeholder { color: var(--muted); }
.search-lg .search-clear { background: var(--muted); color: var(--surface); }
.search { background: var(--surface-2); border: 1px solid transparent; }
.search:focus-within { box-shadow: none; border-color: var(--line-strong); background: var(--surface); }
.stats { color: var(--muted); border-top: 1px solid var(--line); padding-top: 24px; gap: 40px; }
.stats b { color: var(--fg); font-weight: 500; font-size: 1.6rem; letter-spacing: -0.03em; }

/* Secciones con más aire */
.section { padding-block: 72px; }
.section-tight { padding-top: 0; }
.section-head { gap: 10px; margin-bottom: 32px; }
.section-head h2, .large-title { font-weight: 600; }
.diff { gap: 32px; }
.diff div { border-top: 1px solid var(--line); padding-top: 18px; }

/* Superficies: blancas, borde de 1px, sin sombra; la sombra solo aparece al pasar el mouse */
.need, .card, .panel, .filters, .plan, .step, .level-row, .rules li, .client, .table-wrap, .cat {
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; background: var(--surface);
}
@media (hover: hover) {
  .need:hover, .card:hover, .cat:hover { border-color: var(--line-strong); box-shadow: var(--shadow-hover); }
}
.need-icon { background: var(--surface-2); color: var(--fg); border-radius: 14px; }
.need-icon svg, .tabbar svg { stroke-width: 1.5; }
.need-text b { font-weight: 500; letter-spacing: -0.015em; }
.card { padding: 22px; gap: 20px; }
.card h3 { font-weight: 500; font-size: 1.12rem; }
.card.unclaimed { background: var(--surface); border-style: dashed; }
.panel { padding: 24px; }
.panel h2 { font-weight: 500; font-size: 1.15rem; letter-spacing: -0.02em; }

/* Score: el único bloque oscuro, más chico y redondeado */
.score { border-radius: 16px; font-weight: 600; letter-spacing: -0.03em; }
.score.lg { border-radius: 22px; }
.score.none { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.profile-head .score { background: var(--band-bg); }

/* Chips y píldoras livianos */
.chip { font-weight: 500; background: var(--surface-2); }
.chip-line { border: 1px solid var(--line-strong); background: transparent; }
.chip-x { background: var(--primary-soft); }
.pill { border: 1px solid var(--line-strong); font-weight: 500; }
.pill[aria-pressed="true"] { background: var(--ink); color: var(--ink-fg); border-color: var(--ink); }
.pill .count { background: var(--primary); }
.cmp-btn { border: 1px solid var(--line-strong); font-weight: 500; }
.vbadge { font-weight: 500; }
.card-proof b, .rehire b { font-weight: 600; }

/* Barra de filtros y comparador translúcidos */
.filter-bar { background: var(--topbar-bg); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border-bottom: 1px solid var(--line); }
.cmp-bar { background: var(--glass); color: var(--fg); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border-top: 1px solid var(--line); }
.cmp-bar .slot { background: var(--surface-2); color: var(--fg); border: 1px solid var(--line); }
.cmp-bar .slot button { color: var(--muted); }
.cmp-bar .slot.empty-slot { color: var(--muted); border: 1px dashed var(--line-strong); }

/* Perfil claro */
.profile-head { background: var(--bg); color: var(--fg); border-bottom: 1px solid var(--line); }
.profile-head .wrap { padding-block: 40px; }
.profile-name { font-weight: 600; }
.ph-meta, .profile-head .card-proof, .profile-head .rehire { color: var(--muted); }
.profile-head .vbadge { color: var(--fg); }
.profile-head .vbadge.v3 { color: var(--primary); }
.profile-head .vbadge.v3 i { background: var(--primary); color: var(--primary-fg); }
.lime { color: var(--good); }
.profile-head .chip { background: var(--surface-2); color: var(--fg); }
.seg-tabs { box-shadow: 0 0 0 6px var(--bg); }

/* Controles segmentados estilo iOS */
.seg { background: var(--surface-3); border-radius: 12px; }
.seg label:has(input:checked), .seg-tabs button[aria-selected="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 2px rgb(13 13 13 / .08), 0 0 0 .5px rgb(13 13 13 / .06); }
.seg-tabs button { font-weight: 500; }

/* Formularios */
.field input, .field textarea, .field select, .filters select { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; }
.field input:focus, .field textarea:focus, .field select:focus, .filters select:focus { outline: none; border-color: var(--fg); }
.filters legend, .filters legend label { font-weight: 500; }
.filters input[type="checkbox"] { accent-color: var(--ink); }

/* Metodología y planes más livianos */
.formula { background: var(--surface-2); color: var(--fg); border: 1px solid var(--line); }
.formula .hl { color: var(--primary); }
.plan.featured { background: var(--ink); color: var(--ink-fg); border-color: var(--ink); }
.ref { background: var(--surface-2); border: 1px solid var(--line); }
.ref summary::after { border-color: var(--muted); }
.ex-block { background: var(--surface-2); }
.success { background: var(--surface-2); border: 1px solid var(--line); }
.sheet { border-radius: 24px; }
.sheet .x { background: var(--surface-2); }
.list-sep h2 { font-weight: 500; }
.bar .fill { background: var(--ink); }
.bar .fill-alt { background: var(--primary); }
.bar .track { height: 6px; background: var(--surface-3); }
table.cmp thead th { font-weight: 500; }
table.cmp .best { color: var(--good); }
.tabbar a[aria-current="page"] { color: var(--fg); background: var(--surface-3); }
footer.foot { background: var(--surface-2); }

@media (max-width: 760px) {
  .hero .wrap { padding-block: 40px 32px; }
  .hero h1 { font-size: 2.2rem; }
  .section { padding-block: 48px; }
  .card { padding: 18px; gap: 14px; }
  .need-list { border: 1px solid var(--line); border-radius: var(--radius); }
  .need { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
  .need:last-child { border-bottom: 0; }
  .profile-head .wrap { padding-block: 24px; }
  .stats { gap: 16px 28px; }
  .stats b { font-size: 1.35rem; }
  .cmp-bar { border: 1px solid var(--line); }
}
.search.search-lg { background: var(--surface); border-color: var(--line-strong); }

/* =========================================================
   Efectos: degradé con grano por categoría al pasar el mouse,
   etiqueta "○ categoría", flecha en círculo y entrada escalonada.
   ========================================================= */
:root {
  --card-bg: #f4f3f1;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --g1: #ad49e1; --g2: #0b7cef; --g3: #f25c9a;
}
/* Paletas por categoría, armadas con los colores de Iter */
[data-cat="ia"]          { --g1: #7b5cf0; --g2: #ad49e1; --g3: #f0679e; }
[data-cat="software"]    { --g1: #1f4fd6; --g2: #0b7cef; --g3: #43c6e8; }
[data-cat="performance"] { --g1: #0b7cef; --g2: #26b07a; --g3: #b8ec3a; }
[data-cat="web"]         { --g1: #3a6df0; --g2: #6fb6ff; --g3: #a6e65a; }
[data-cat="redes"]       { --g1: #ad49e1; --g2: #f25c9a; --g3: #ff9a52; }
[data-cat="audiovisual"] { --g1: #6a3fd1; --g2: #e5374d; --g3: #ff7a3d; }

.fx-card, .cover { position: relative; isolation: isolate; overflow: hidden; }
.fx-card::before, .cover::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background:
    var(--noise),
    linear-gradient(to top, rgb(13 13 13 / .28), transparent 55%),
    radial-gradient(70% 90% at 8% 100%, var(--g3) 0%, transparent 62%),
    radial-gradient(80% 80% at 95% 5%, var(--g1) 0%, transparent 60%),
    linear-gradient(150deg, var(--g1), var(--g2) 55%, var(--g3));
  background-size: 180px 180px, 100% 100%, 160% 160%, 160% 160%, 100% 100%;
  background-position: 0 0, 0 0, 0% 100%, 100% 0%, 0 0;
  background-blend-mode: soft-light, normal, normal, normal, normal;
  opacity: 0; transition: opacity .45s var(--ease-spring);
  animation: drift 9s ease-in-out infinite alternate; animation-play-state: paused;
}
@keyframes drift {
  to { background-position: 40px 30px, 0 0, 35% 60%, 60% 35%, 0 0; }
}

/* Tarjetas en gris cálido, como la referencia */
.need.fx-card, .card.fx-card { background: var(--card-bg); border-color: rgb(13 13 13 / .05); }
.card.fx-card.unclaimed { background: transparent; border-color: var(--line-strong); }

.fx-card { transition: transform .35s var(--ease-spring), box-shadow .35s, border-color .35s, color .35s; }
.fx-card * { transition: color .35s, background-color .35s, border-color .35s, opacity .35s, transform .35s var(--ease-spring); }

/* Estado activo: degradé visible y texto en blanco (se redefinen los tokens dentro de la tarjeta) */
.fx-on,
.fx-card.is-fx {
  --fg: #ffffff; --muted: rgb(255 255 255 / .82); --primary: #ffffff; --good: #ffffff; --bad: #ffffff;
  --line: rgb(255 255 255 / .28); --line-strong: rgb(255 255 255 / .45);
  --surface: rgb(255 255 255 / .16); --surface-2: rgb(255 255 255 / .18); --surface-3: rgb(255 255 255 / .2);
  --primary-soft: rgb(255 255 255 / .22); --ink: #ffffff; --ink-fg: #0d0d0d; --ink-hover: #f1efe7;
  color: #fff; border-color: transparent;
}
.fx-on::before, .fx-card.is-fx::before { opacity: 1; animation-play-state: running; }
@media (hover: hover) {
  .fx-card:hover, .fx-card:focus-visible, .fx-card:has(h3 a:focus-visible) {
    --fg: #ffffff; --muted: rgb(255 255 255 / .82); --primary: #ffffff; --good: #ffffff; --bad: #ffffff;
    --line: rgb(255 255 255 / .28); --line-strong: rgb(255 255 255 / .45);
    --surface: rgb(255 255 255 / .16); --surface-2: rgb(255 255 255 / .18); --surface-3: rgb(255 255 255 / .2);
    --primary-soft: rgb(255 255 255 / .22);
    color: #fff; border-color: transparent; box-shadow: 0 18px 50px -18px color-mix(in srgb, var(--g1) 55%, transparent);
    transform: translateY(-3px);
  }
  .fx-card:hover::before, .fx-card:focus-visible::before, .fx-card:has(h3 a:focus-visible)::before { opacity: 1; animation-play-state: running; }
  .fx-card:hover .fx-arrow, .fx-card:focus-visible .fx-arrow, .fx-card:has(h3 a:focus-visible) .fx-arrow { opacity: 1; transform: none; }
  .fx-card:hover .need-icon { transform: scale(1.06); }
}
@media (hover: none) {
  .fx-card:active::before { opacity: 1; }
  .fx-card:active { --fg: #fff; --muted: rgb(255 255 255 / .82); --primary: #fff; --good: #fff; color: #fff; }
}
.fx-card .vbadge i { transition: none; }
.fx-card:hover .vbadge i, .fx-on .vbadge i { background: #fff; color: #0d0d0d; }
.fx-card:hover .chip-new, .fx-on .chip-new { background: var(--lime); color: #0d0d0d; }
.fx-card:hover .cmp-btn[aria-pressed="true"] { background: #fff; color: #0d0d0d; }

/* Etiqueta "○ categoría" */
.fx-label { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--muted); font-weight: 450; letter-spacing: -0.005em; }
.fx-label i { width: 9px; height: 9px; border-radius: 50%; border: 1.2px solid currentColor; flex: none; }

/* Flecha en círculo blanco */
.fx-arrow { position: absolute; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #0d0d0d; display: grid; place-items: center; opacity: 0; transform: scale(.7) rotate(-20deg); pointer-events: none; box-shadow: 0 4px 14px rgb(13 13 13 / .14); }
.fx-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card .fx-arrow { right: 16px; bottom: 16px; }
.need .fx-arrow { right: 14px; top: 14px; }

/* Resultados: la etiqueta encabeza el bloque */
.card .fx-label { margin-bottom: 2px; }

/* Inicio: tarjetas altas como la referencia (escritorio) */
@media (min-width: 761px) {
  .need-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .need {
    grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; align-items: start; justify-items: start;
    min-height: 280px; padding: 22px 24px 24px; gap: 0; border-radius: 22px;
  }
  .need .fx-label { grid-row: 1; }
  .need .need-icon { grid-row: 2; align-self: center; justify-self: center; width: 64px; height: 64px; border-radius: 20px; background: rgb(255 255 255 / .65); }
  .need .need-icon svg { width: 30px; height: 30px; }
  .need .need-text { grid-row: 3; gap: 4px; }
  .need .need-text b { font-family: var(--font-body); font-weight: 500; font-size: 1.08rem; letter-spacing: -0.015em; }
  .need .need-meta { display: none; }
  .fx-card:hover .need-icon { background: rgb(255 255 255 / .2); color: #fff; }
}
@media (max-width: 760px) {
  .need .fx-label, .need .fx-arrow { display: none; }
  .need.fx-card { background: var(--surface); border: 0; border-bottom: 1px solid var(--line); }
  .need .need-icon { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: linear-gradient(150deg, var(--g1), var(--g2) 55%, var(--g3)); }
  .need .need-icon::after { content: ""; position: absolute; inset: 0; background: var(--noise); background-size: 120px; mix-blend-mode: soft-light; }
  .card .fx-arrow { display: none; }
}

/* Perfil: portada con el degradé de su categoría, siempre activa */
.profile-head { border-bottom: 0; }
.profile-head .wrap { display: block; padding-block: 24px 8px; }
.profile-head .cover { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 28px; align-items: end; padding: 36px; border-radius: 28px; min-height: 260px; }
.profile-head .cover::before { opacity: 1; animation-play-state: running; animation-duration: 14s; }
.cover .ph-main { gap: 6px; }
.cover .ph-meta, .cover .card-proof, .cover .rehire, .cover .vbadge, .cover .vbadge.v3 { color: rgb(255 255 255 / .9); }
.cover .btn-lime { background: #fff; color: #0d0d0d; }
.cover .btn-ghost-dark { background: rgb(255 255 255 / .14); color: #fff; border-color: rgb(255 255 255 / .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cover .score { background: rgb(13 13 13 / .85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cover .score.none { background: rgb(255 255 255 / .2); color: #fff; border-color: rgb(255 255 255 / .3); }
.cover .lime { color: var(--lime); }
@media (max-width: 760px) {
  .profile-head .cover { grid-template-columns: auto minmax(0, 1fr); padding: 22px; gap: 16px; min-height: 0; border-radius: 22px; align-items: start; }
  .profile-head .cover .actions { grid-column: 1 / -1; }
}

/* Entrada escalonada al cambiar de pantalla */
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } }
#app.enter .need, #app.enter .card, #app.enter .panel, #app.enter .cover, #app.enter .hero .wrap > *, #app.enter .section-head, #app.enter .level-row, #app.enter .plan, #app.enter .step {
  animation: rise-in .6s var(--ease-spring) both; animation-delay: calc(var(--i, 0) * 45ms);
}
#app.enter .hero .wrap > :nth-child(2) { --i: 1; }
#app.enter .hero .wrap > :nth-child(3) { --i: 2; }
#app.enter .hero .wrap > :nth-child(4) { --i: 3; }
#app.enter .hero .wrap > :nth-child(5) { --i: 4; }

/* Barras del score que crecen al aparecer */
@keyframes grow { from { width: 0; } }
.bar .fill { animation: grow .9s var(--ease-spring) both; }

/* Barra superior: la línea aparece recién al hacer scroll, como en iOS */
.topbar { border-bottom-color: transparent; transition: border-color .25s, background .25s; }
body.scrolled .topbar { border-bottom-color: var(--line); }

/* Botones: microinteracción */
.btn-primary, .btn-lime, .nav a.cta, .top-cta { transition: transform .2s var(--ease-spring), background .2s, box-shadow .2s; }
@media (hover: hover) {
  .btn-primary:hover, .btn-lime:hover, .nav a.cta:hover { box-shadow: 0 6px 18px -6px rgb(13 13 13 / .35); transform: translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-card::before, .cover::before { animation: none; }
  #app.enter * { animation: none !important; }
  .bar .fill { animation: none; }
  .fx-card:hover { transform: none; }
}
.chip.chip-new { background: var(--lime); color: #0d0d0d; font-weight: 600; }
.notice { border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 16px 18px; display: grid; gap: 4px; background: var(--surface); }
.notice b { font-weight: 600; }
.notice p { color: var(--muted); font-size: .9rem; }
.selectable { user-select: all; -webkit-user-select: all; }
.claim { background: var(--surface-2); }
.claim .btn { justify-self: start; }
.cover .actions a.btn { text-decoration: none; }
.cover .ph-main { text-shadow: 0 1px 14px rgb(13 13 13 / .28); }
.cover::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(90deg, rgb(13 13 13 / .18), transparent 60%); pointer-events: none; }

/* =========================================================
   Logos, monogramas y fichas de influencers
   ========================================================= */
[data-cat="influencers"] { --g1: #f2547f; --g2: #ff8a4c; --g3: #ffd23f; }
[data-cat="branding"]    { --g1: #e8541f; --g2: #f2547f; --g3: #ad49e1; }

.card-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.card-id > div { min-width: 0; display: grid; gap: 1px; }
.avatar { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; overflow: hidden; background: #fff; border: 1px solid rgb(13 13 13 / .08); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-wide img { object-fit: contain; padding: 5px; }
.avatar-mono { position: relative; isolation: isolate; color: #fff; font-family: var(--font-display); font-weight: 600; font-size: .95rem; letter-spacing: -0.02em; border: 0;
  background: linear-gradient(150deg, var(--g1), var(--g2) 55%, var(--g3)); }
.avatar-mono::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--noise); background-size: 120px; mix-blend-mode: soft-light; opacity: .8; }
.fx-card:hover .avatar { border-color: rgb(255 255 255 / .5); }

.cover-logo { display: inline-grid; place-items: center; height: 56px; min-width: 56px; padding: 0; margin-bottom: 10px; border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 4px 16px rgb(13 13 13 / .15); text-shadow: none; }
.cover-logo img { height: 100%; width: auto; display: block; }
.cover-logo.is-wide { padding: 8px 14px; }
.cover-logo.is-wide img { height: 100%; max-width: 180px; object-fit: contain; }

/* Influencers: datos de audiencia en la tarjeta */
.inf-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.inf-pill { display: inline-flex; gap: 4px; align-items: baseline; font-size: .8rem; padding: 4px 10px; border-radius: 99px; background: rgb(255 255 255 / .7); border: 1px solid var(--line); color: var(--fg); }
.inf-pill b { font-weight: 600; }
.inf-pill .num { color: var(--muted); }
.inf-size { background: var(--ink); color: var(--ink-fg); border-color: var(--ink); font-weight: 500; }
.fx-card:hover .inf-pill { background: rgb(255 255 255 / .18); }
.fx-card:hover .inf-size { background: #fff; color: #0d0d0d; }
.card-aud { font-size: .82rem; color: var(--muted); }

.inf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.inf-grid > div { background: var(--surface-2); border-radius: 14px; padding: 14px; display: grid; gap: 4px; }
.inf-grid span { font-size: .8rem; }
.inf-grid b { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.03em; }
.metric-src { display: flex; gap: 8px; align-items: flex-start; font-size: .85rem; color: var(--muted); }
.metric-src i { font-style: normal; flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 700; background: var(--warn); color: #fff; margin-top: 1px; }
.metric-src.ok i { background: var(--good); }
.table-wrap.plain { border: 0; border-radius: 0; }
.inf-table { min-width: 420px; }
.rows li > b { font-weight: 600; }
.seg.seg-auto { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Inicio: 7 necesidades → la primera ocupa dos columnas para que no quede una sola */
@media (min-width: 761px) {
  .need-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .need:first-child { grid-column: span 2; }
}
@media (min-width: 1100px) {
  .need-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .inf-grid b { font-size: 1.2rem; }
  .inf-grid > div { padding: 10px; }
  .seg-tabs button { font-size: .72rem; }
  .cover-logo { height: 48px; min-width: 48px; }
}
.ph-main .cover-logo { justify-self: start; width: auto; }
.seg-tabs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.cover .vbadge i, .profile-head .cover .vbadge.v3 i { background: #fff; color: #0d0d0d; }

/* =========================================================
   Tarjeta de proveedor v2: logo protagonista, score como accesorio
   ========================================================= */
.card.pcard { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 20px 22px 16px; }
.pc-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.avatar.avatar-lg { width: 56px; height: 56px; border-radius: 15px; }
.avatar-lg.avatar-mono { font-size: 1.15rem; }
.pc-id { display: grid; gap: 2px; min-width: 0; }
.pc-id .fx-label { font-size: .76rem; }
.pcard h3 { display: flex; align-items: center; gap: 6px; font-size: 1.15rem; font-weight: 500; letter-spacing: -0.02em; min-width: 0; }
.pcard h3 a { color: var(--fg); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .card-meta { font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Sello de verificado junto al nombre, como en iOS */
.vtick { flex: none; width: 18px; height: 18px; color: var(--primary); display: inline-grid; }
.vtick svg { width: 100%; height: 100%; fill: currentColor; }
.vtick .ck { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fx-card:hover .vtick .ck { stroke: #0d0d0d; }

/* Score como accesorio de la derecha: chico, legible, con su palabra */
.spill { display: grid; justify-items: end; gap: 2px; text-align: right; }
.spill-n { display: inline-flex; align-items: baseline; gap: 1px; background: #0d0d0d; color: var(--lime); border-radius: 99px; padding: 4px 10px 4px 11px; line-height: 1.1; }
.spill-n b { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.02em; }
.spill-n small { font-size: .66rem; color: rgb(241 239 231 / .6); }
.spill-w { font-size: .74rem; color: var(--muted); }
.spill-none span { font-size: .74rem; color: var(--muted); border: 1px dashed var(--line-strong); border-radius: 99px; padding: 4px 10px; }

.pc-tag { font-size: .93rem; color: var(--fg); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 72ch; }

/* Franja de datos clave */
.pc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pstat { display: grid; gap: 2px; padding: 10px 12px 10px 0; min-width: 0; }
.pstat + .pstat { padding-left: 12px; border-left: 1px solid var(--line); }
.pstat span { font-size: .74rem; color: var(--muted); }
.pstat b { font-weight: 500; font-size: .95rem; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pstat b small { font-size: .74rem; color: var(--muted); font-weight: 400; }

.pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; z-index: 1; }
.pc-clients { font-size: .8rem; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-k { color: var(--fg); font-weight: 500; }
.pcard .cmp-btn { flex: none; min-height: 32px; font-size: .8rem; }
.pcard .fx-arrow { display: none; }
.card.pcard.unclaimed { border-style: dashed; }

@media (max-width: 760px) {
  .card.pcard { padding: 16px; gap: 12px; }
  .avatar.avatar-lg { width: 48px; height: 48px; border-radius: 13px; }
  .pc-head { gap: 12px; align-items: start; }
  .pcard h3 { font-size: 1.02rem; }
  .spill-w { display: none; }
  .pstat { padding-right: 8px; }
  .pstat + .pstat { padding-left: 10px; }
  .pstat b { font-size: .88rem; }
  .pc-clients { display: none; }
  .pc-foot { justify-content: flex-end; margin-top: -4px; }
}
.pstat span { font-size: inherit; color: inherit; }
.pstat > span { font-size: .74rem; color: var(--muted); }
@media (max-width: 760px) {
  .pcard .card-meta { white-space: normal; }
  .pstat > span { font-size: .7rem; }
  .pstat b { white-space: normal; font-size: .86rem; line-height: 1.25; }
  .pstat b small { display: block; font-size: .7rem; }
  .pc-foot { margin-top: -2px; }
}

/* =========================================================
   Mejoras 1 a 15: guardar, respuesta, pedido, propuestas,
   guardados, seguimiento, rankings, índice y panel
   ========================================================= */
.wrap.narrow { max-width: 860px; }
.resp { font-size: .78rem; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.resp::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.resp.fast::before { background: var(--good); }
.resp.slow::before { background: var(--warn); }

.save-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; min-width: 32px; padding: 0 8px; justify-content: center; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); cursor: pointer; font-size: .82rem; font-weight: 500; position: relative; z-index: 1; }
.save-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.save-btn[aria-pressed="true"] svg { fill: currentColor; }
.save-btn[aria-pressed="true"] { color: var(--primary); border-color: transparent; background: var(--primary-soft); }
.save-btn::after { content: ""; position: absolute; inset: -6px; }
.save-lg { height: 44px; padding: 0 16px; background: rgb(255 255 255 / .14); color: #fff; border-color: rgb(255 255 255 / .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.save-lg[aria-pressed="true"] { background: #fff; color: #0d0d0d; }
.pc-foot .save-btn { margin-left: auto; }

.pedido-cta { margin-top: 18px; display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 22px 24px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface-2); }
.pedido-cta h3 { font-size: 1.1rem; }
.pedido-cta p { color: var(--muted); max-width: 56ch; }
.pedido-strip { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 14px; border-radius: 14px; border: 1px dashed var(--line-strong); color: var(--fg); text-decoration: none; font-size: .88rem; }
.pedido-strip:hover { border-color: var(--fg); }
.pedido-strip span:last-child { font-size: 1.3rem; color: var(--muted); }

/* Perfil: precio pagado, casos, referencia, aliados */
.paid-n { font-family: var(--font-display); font-size: 1.6rem; font-weight: 500; letter-spacing: -0.03em; }
.paid-n small { font-family: var(--font-body); font-size: .85rem; color: var(--muted); font-weight: 400; }
.paid-bar { position: relative; height: 8px; border-radius: 99px; background: var(--surface-3); }
.paid-bar span { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, var(--primary), var(--purple)); opacity: .8; }
.paid-bar i { position: absolute; top: -4px; width: 4px; height: 16px; border-radius: 2px; background: var(--fg); transform: translateX(-50%); }
.cases { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.cases li { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); }
.cases b { font-weight: 500; font-size: 1.02rem; letter-spacing: -0.01em; }
.cases span { color: var(--muted); font-size: .88rem; }
.cases small { font-size: .78rem; font-weight: 500; }
.ref-panel { display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--surface-2); }
.ref-panel p { max-width: 54ch; margin-top: 4px; }
.minis { display: grid; gap: 8px; }
.mini { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); text-decoration: none; color: var(--fg); background: var(--surface); }
.mini:hover { border-color: var(--line-strong); }
.mini .avatar { width: 38px; height: 38px; border-radius: 11px; font-size: .8rem; }
.mini-t { display: grid; min-width: 0; }
.mini-t b { font-weight: 500; }
.mini-t small { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-s { background: #0d0d0d; color: var(--lime); border-radius: 99px; padding: 2px 9px; font-size: .82rem; font-weight: 600; }
.pick { display: grid; gap: 8px; }
.pick label { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-strong); cursor: pointer; }
.pick label:has(input:checked) { border-color: var(--fg); box-shadow: inset 0 0 0 1px var(--fg); }
.pick input { accent-color: var(--ink); }
.pick span { display: grid; }
.pick small { color: var(--muted); font-size: .8rem; }

/* Pedido guiado */
.form.grouped { gap: 22px; }
.form.grouped fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.form.grouped legend, .form.grouped legend label { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; padding: 0; margin-bottom: 6px; }
.form.grouped textarea, .form.grouped input[type="email"] { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--surface); width: 100%; }
.pick-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.pick-grid input { position: absolute; opacity: 0; pointer-events: none; }
.pick-grid label { position: relative; }
.pick-ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex: none; background: linear-gradient(150deg, var(--g1), var(--g2) 55%, var(--g3)); }
.pick-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pick-grid b { font-weight: 500; font-size: .92rem; }
.seg.seg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg.seg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.brief-card { padding: 16px 18px; border-radius: var(--radius); background: var(--surface-2); display: grid; gap: 6px; margin-bottom: 18px; }
.prop-h { display: flex; gap: 10px; align-items: center; }
.prop-h > span { display: grid; gap: 4px; justify-items: start; }
.prop-h .spill { justify-items: start; }
.prop-table td small { display: block; margin-top: 2px; }

/* Guardados y seguimiento */
.share-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.saved-list { display: grid; gap: 12px; }
.saved-item, .follow { display: grid; gap: 10px; padding: 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card-bg); }
.saved-item .mini, .follow .mini { border: 0; padding: 0; background: transparent; }
.saved-item textarea { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); width: 100%; resize: vertical; }
.vote-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .85rem; }
.vote-row .save-btn { margin-left: auto; }
.vote { min-height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--surface); cursor: pointer; font-size: .82rem; }
.vote.on { background: var(--ink); color: var(--ink-fg); border-color: var(--ink); }
.follow { margin-bottom: 12px; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .88rem; color: var(--muted); }
.timeline li { display: flex; gap: 8px; align-items: center; }
.timeline li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--line-strong); flex: none; }
.timeline li.done { color: var(--fg); }
.timeline li.done::before { background: var(--good); border-color: var(--good); }
.guide { padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 6px; font-size: .88rem; }
.guide ul { margin: 0; padding-left: 18px; color: var(--muted); }

/* Rankings e índice */
.rank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.rank { padding: 20px; border-radius: 22px; background: var(--card-bg); border: 1px solid rgb(13 13 13 / .05); display: grid; gap: 12px; align-content: start; }
.rank ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rank li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; gap: 6px; position: relative; z-index: 1; }
.rank-n { font-family: var(--font-display); font-weight: 600; color: var(--muted); }
.rank .btn { justify-self: start; position: relative; z-index: 1; }
.idx { display: grid; }
.idx small { color: var(--muted); font-size: .78rem; }
.idx-table { min-width: 520px; }

/* Panel del proveedor */
.panel-top { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; }
.panel-top > div { flex: 1; min-width: 220px; }
.dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.dash .panel { margin: 0; }
.span-2 { grid-column: 1 / -1; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kpis > div { background: var(--surface-2); border-radius: 14px; padding: 14px; display: grid; gap: 4px; }
.kpis span { font-size: .78rem; }
.kpis b { font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; letter-spacing: -0.03em; }
.todo { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.todo li { display: grid; gap: 2px; padding: 10px 12px 10px 34px; position: relative; border-radius: 12px; border: 1px solid var(--line); }
.todo li::before { content: ""; position: absolute; left: 12px; top: 14px; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.todo b { font-weight: 500; }
.todo small { color: var(--muted); font-size: .8rem; }
.ai-sum { display: grid; gap: 8px; padding: 14px 16px; border-radius: 14px; background: var(--surface-2); font-size: .9rem; }
.ai-sum .chip { justify-self: start; }
.meter { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--good); border-radius: 99px; }
.st { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.st.ok { color: var(--good); font-weight: 500; }
.st.wait { color: var(--warn); }
.brief { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); }
.brief:first-of-type { border-top: 0; padding-top: 0; }
.brief-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.brief-top b { font-weight: 500; }
.brief-ago { margin-left: auto; font-size: .78rem; }
.brief .btn { justify-self: start; }
.buyer-ok { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; font-weight: 500; color: var(--good); }
.buyer-ok i { font-style: normal; width: 15px; height: 15px; border-radius: 50%; background: var(--good); color: #fff; display: grid; place-items: center; font-size: .6rem; }
.brief-sent { font-size: .85rem; font-weight: 500; }
.seal-prev { padding: 20px; border-radius: 14px; background: var(--surface-2); display: grid; place-items: center; }
.seal { display: inline-flex; gap: 10px; align-items: center; padding: 8px 14px 8px 8px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 8px rgb(13 13 13 / .06); }
.seal-l { width: 32px; height: 32px; border-radius: 9px; background: var(--lime); color: #0d0d0d; display: grid; place-items: center; font-weight: 700; }
.seal span:last-child { display: grid; line-height: 1.2; }
.seal small { color: var(--muted); font-size: .72rem; }
.code { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-family: ui-monospace, Menlo, monospace; font-size: .8rem; white-space: pre-wrap; word-break: break-all; user-select: all; -webkit-user-select: all; }
.scan { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.scan li { color: var(--muted); display: flex; gap: 10px; align-items: center; }
.scan li::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.scan li.on { color: var(--fg); }
.scan li.on::before { background: var(--good); border-color: var(--good); }
.auto-prev { display: flex; gap: 12px; align-items: center; }
.auto-prev > div { display: grid; }
.auto-prev small { color: var(--muted); }
.hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.steps-plain .step::before { content: none; }
footer.foot a { color: inherit; }

@media (max-width: 860px) {
  .dash { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .seg.seg-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pedido-cta { padding: 18px; }
  .pc-foot .save-btn { margin-left: 0; }
  .pc-foot { gap: 8px; }
  .tabbar a span { font-size: .62rem; }
  .rank-grid { grid-template-columns: 1fr; }
  .profile-head .cover .actions { display: flex; gap: 8px; flex-wrap: wrap; }
}
.paid-legend { display: flex; gap: 16px; font-size: .78rem; color: var(--muted); }
.paid-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lg-range { width: 16px; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--primary), var(--purple)); }
.lg-mark { width: 3px; height: 12px; border-radius: 2px; background: var(--fg); }

/* =========================================================
   Búsqueda simple: sugerencias, retomar, recomendados,
   "Más filtros", guardar como único gesto
   ========================================================= */
.suggest { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; max-width: 760px; font-size: .85rem; color: var(--muted); }
.pill.pill-sm { min-height: 32px; font-size: .82rem; padding: 0 12px; background: var(--surface); }
.pill.pill-sm:hover { border-color: var(--fg); }
.resume { display: flex; gap: 10px; flex-wrap: wrap; }
.resume-item { display: grid; gap: 1px; text-align: left; padding: 12px 16px; min-width: 220px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); text-decoration: none; cursor: pointer; transition: border-color .15s, transform .2s var(--ease-spring); }
.resume-item:hover { border-color: var(--fg); }
.resume-item:active { transform: scale(.98); }
.resume-item span { font-size: .75rem; }
.resume-item b { font-weight: 500; }
.resume-item small { color: var(--muted); font-size: .78rem; }
.understood { font-size: .82rem; color: var(--muted); margin: -8px 0 10px; }

.recs { display: grid; gap: 12px; margin-bottom: 8px; }
.recs-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.recs-head h2 { font-size: 1.15rem; font-weight: 500; }
.recs-head span { font-size: .82rem; }
.rec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rec { padding: 18px; border-radius: 22px; background: var(--card-bg); border: 1px solid rgb(13 13 13 / .05); display: grid; gap: 10px; align-content: start; }
.rec-why { justify-self: start; font-size: .75rem; font-weight: 600; padding: 4px 10px; border-radius: 99px; background: var(--lime); color: #0d0d0d; }
.rec-id { display: flex; gap: 12px; align-items: center; min-width: 0; }
.rec-id > div { min-width: 0; display: grid; gap: 1px; }
.rec h3 { display: flex; gap: 6px; align-items: center; font-size: 1.05rem; font-weight: 500; letter-spacing: -0.02em; }
.rec h3 a { color: var(--fg); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.rec .card-meta { font-size: .82rem; color: var(--muted); }
.rec-val { font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; letter-spacing: -0.02em; }
.rec .pc-tag { font-size: .86rem; color: var(--muted); }
.rec-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; position: relative; z-index: 1; }
.rec-foot .spill { justify-items: start; text-align: left; }
.rec-foot .spill-w { display: none; }
.rec .fx-arrow { display: none; }
@media (hover: hover) { .rec:hover { transform: translateY(-3px); } }

.more-filters { border-top: 1px solid var(--line); padding-top: 14px; }
.more-filters > summary { list-style: none; cursor: pointer; font-family: var(--font-display); font-weight: 500; font-size: .95rem; display: flex; justify-content: space-between; align-items: center; min-height: 32px; }
.more-filters > summary::-webkit-details-marker { display: none; }
.more-filters > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s; margin-right: 4px; }
.more-filters[open] > summary::after { transform: rotate(-135deg); }
.more-body { display: grid; gap: 18px; margin-top: 14px; }

.save-txt { padding: 0 12px; }
.empty-sug { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 4px 0 8px; }
.empty { display: grid; gap: 10px; justify-items: center; }
.cmp-bar .slot .avatar { width: 22px; height: 22px; border-radius: 6px; font-size: .6rem; }
.cmp-bar .slot { gap: 6px; }

@media (max-width: 900px) {
  .rec-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .suggest { gap: 6px; }
  .suggest > span { width: 100%; }
  .resume-item { min-width: 0; flex: 1 1 100%; }
  .rec { padding: 16px; }
}
.res-list + .pedido-strip { margin-top: 16px; }
@media (max-width: 900px) { .active-filters.from-text .chip-cat { display: inline-flex; } }

/* =========================================================
   Marca: "Avalens", con la o como círculo verde con tilde
   ========================================================= */
.brand { gap: 0; }
.wordmark { display: inline-flex; align-items: baseline; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.04em; line-height: 1; color: var(--fg); }
.wm-v { display: inline-grid; place-items: center; width: .74em; height: .74em; margin: 0 .03em 0 .05em; border-radius: .2em; background: var(--lime); transform: translateY(.04em); align-self: baseline; }
.wm-v svg { width: 78%; height: 78%; fill: none; stroke: #0d0d0d; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.brand:hover .wm-v { transform: translateY(.04em) rotate(-6deg); transition: transform .3s var(--ease-spring); }
@media (max-width: 760px) { .wordmark { font-size: 1.35rem; } }
.wordmark { align-items: baseline; }
.wm-v { width: .6em; height: .6em; margin: 0 .035em 0 .04em; border-radius: .16em; transform: none; vertical-align: baseline; }
.wm-v svg { width: 82%; height: 82%; stroke-width: 3.6; }
.brand:hover .wm-v { transform: rotate(-6deg); }
/* v = tilde blanco caligráfico sobre el badge lima */
.wm-v { width: .66em; height: .66em; border-radius: .17em; margin: 0 .04em; transform: translateY(.02em); }
.wm-v svg { width: 86%; height: 86%; overflow: visible; }
.wm-v svg path { fill: #fff; stroke: rgb(13 13 13 / .22); stroke-width: .7; stroke-linejoin: round; paint-order: stroke; filter: drop-shadow(0 .5px .5px rgb(13 13 13 / .18)); }
.brand:hover .wm-v { transform: translateY(.02em) rotate(-6deg); }
/* tilde negro: mejor contraste sobre el lima */
.wm-v svg path { fill: #0d0d0d; stroke: none; filter: none; }
/* Marca: la v es el sello de verificado (bordes ondulados, tilde negro) */
.wm-v.wm-seal { width: .78em; height: .78em; background: none; border-radius: 0; margin: 0 .015em; transform: translateY(.1em); }
.wm-seal svg { width: 100%; height: 100%; }
.seal-bg { fill: var(--lime); }
.seal-ck { fill: #0d0d0d; stroke: none; }
.brand:hover .wm-seal { transform: translateY(.1em) rotate(-12deg); transition: transform .4s var(--ease-spring); }
.seal-l { background: none !important; width: 34px !important; height: 34px !important; }
.seal-l svg { width: 100%; height: 100%; }
.wm-v.wm-seal svg path.seal-bg, .seal-l svg path.seal-bg { fill: var(--lime); stroke: none; filter: none; }
.wm-v.wm-seal svg path.seal-ck, .seal-l svg path.seal-ck { fill: #0d0d0d; stroke: none; filter: none; }

/* =========================================================
   Alta de proveedor e invitaciones por WhatsApp
   ========================================================= */
.onb { display: grid; gap: 20px; }
.stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stepper li { display: grid; gap: 6px; justify-items: center; text-align: center; font-size: .8rem; color: var(--muted); position: relative; }
.stepper li::before { content: ""; position: absolute; top: 14px; left: calc(-50% + 18px); right: calc(50% + 18px); height: 2px; background: var(--line); }
.stepper li:first-child::before { display: none; }
.stepper li.done::before, .stepper li.on::before { background: var(--ink); }
.stepper .num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: .82rem; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--muted); position: relative; z-index: 1; }
.stepper li.on .num { background: var(--ink); color: var(--ink-fg); border-color: var(--ink); }
.stepper li.done .num { background: var(--lime); color: #0d0d0d; border-color: var(--lime); }
.stepper li.on b { color: var(--fg); }
.stepper b { font-weight: 500; }
.onb-card { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 28px; display: grid; gap: 16px; }
.onb-card .large-title { font-size: clamp(1.5rem, 3vw, 1.9rem); }
.onb .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.onb-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; }
.onb-nav .btn-primary { flex: 1; max-width: 320px; margin-left: auto; }
.link-btn { background: none; border: 0; padding: 4px 0; color: var(--primary); font-weight: 500; cursor: pointer; text-align: left; min-height: 36px; }
.alt-verify { border-top: 1px solid var(--line); padding-top: 14px; display: grid; gap: 8px; }
.code-in { font-size: 1.6rem !important; letter-spacing: .5em; text-align: center; font-variant-numeric: tabular-nums; }
.clients-ed { display: grid; gap: 8px; }
.client-row { display: grid; grid-template-columns: 1fr 1fr 1.2fr 1.2fr 36px; gap: 6px; align-items: center; }
.client-row input { min-height: 44px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); min-width: 0; width: 100%; }
.row-x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--muted); font-size: 1.1rem; cursor: pointer; }
.queue { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.q-item { border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: grid; gap: 10px; background: var(--card-bg); }
.q-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.q-top > span:first-child { display: grid; }
.q-top b { font-weight: 500; }
.q-top small { color: var(--muted); font-size: .8rem; }
.q-msg summary { cursor: pointer; font-size: .82rem; color: var(--muted); min-height: 28px; }
.q-msg .code { margin: 6px 0 8px; font-family: var(--font-body); font-size: .85rem; user-select: text; -webkit-user-select: text; }
.q-act { display: flex; gap: 8px; flex-wrap: wrap; }
.btn-wa { background: #25d366; color: #0d0d0d; border: 0; font-weight: 600; }
.btn-wa:hover { background: #1fbe5b; }
.btn-wa svg { width: 18px; height: 18px; fill: #0d0d0d; }
.onb-done { justify-items: center; text-align: center; }
.onb-done p { max-width: 46ch; color: var(--muted); }
.onb-done .rows { width: 100%; max-width: 420px; text-align: left; }
.done-seal { width: 72px; height: 72px; display: block; animation: pop .5s var(--ease-spring); }
.done-seal svg { width: 100%; height: 100%; }
.done-seal .seal-bg { fill: var(--lime); }
.done-seal .seal-ck { fill: #0d0d0d; }
.cr-head { display: flex; gap: 14px; align-items: center; }
.cr-head .eyebrow { margin-bottom: 2px; }
.cr-pros { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; }
.cr-pros li::before { content: "✓"; color: var(--good); font-weight: 700; margin-right: 8px; }
.cr-mail { min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-strong); width: 100%; }
@media (max-width: 760px) {
  .onb-card { padding: 20px; border-radius: 20px; }
  .stepper b { font-size: .7rem; }
  .client-row { grid-template-columns: 1fr 1fr 36px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; }
  .client-row input:nth-child(3), .client-row input:nth-child(4) { grid-column: span 1; }
  .client-row .row-x { grid-row: 1; grid-column: 3; }
  .onb .two { grid-template-columns: 1fr; }
  .onb-nav { position: sticky; bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); background: var(--surface); padding-top: 8px; }
}
/* Flujos enfocados: sin barra de pestañas mientras se completa el alta o una reseña */
body[data-route="sumarme"] .tabbar, body[data-route="resena"] .tabbar { display: none; }
body[data-route="resena"] .top-cta, body[data-route="resena"] .nav a.cta { display: none; }
body[data-route="sumarme"], body[data-route="resena"] { padding-bottom: env(safe-area-inset-bottom, 0px); }
@media (max-width: 760px) {
  body[data-route="sumarme"] .onb-nav { bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); }
  .top-cta { background: transparent; color: var(--fg); border: 1px solid var(--line-strong); }
}

/* Avisos del buscador: "Mostrando resultados para…" */
.search-note { font-size: .86rem; margin: -8px 0 10px; line-height: 1.45; }
.search-note b { font-weight: 600; font-style: italic; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--primary); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* =========================================================
   Ficha de proveedor (pf-*): identidad primero, score como accesorio,
   franja de datos, contacto fijo (barra en móvil, tarjeta lateral en escritorio).
   ========================================================= */
.is-ssr[data-route="profile"] .brand { display: flex; }
.pf-head .wrap { padding-block: 20px 0; }
.pf-cover { position: relative; isolation: isolate; border-radius: 28px; padding: 32px; min-height: 230px; display: grid; align-content: end; overflow: hidden; color: #fff; }
.pf-cover::before { opacity: 1; animation-play-state: running; animation-duration: 14s; }
/* contraste: una capa oscura leve sobre el degradé (no lo apaga) */
.pf-cover::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgb(13 13 13 / .04) 0%, rgb(13 13 13 / .22) 100%), linear-gradient(90deg, rgb(13 13 13 / .14), transparent 65%); }
.pf-id { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: end; }
.pf-logo { width: 88px; height: 88px; border-radius: 22px; background: #fff; display: grid; place-items: center; overflow: hidden; flex: none; box-shadow: 0 8px 24px rgb(13 13 13 / .18); border: 0; }
.pf-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-logo.is-fit img { object-fit: contain; padding: 10px; }
.pf-logo.is-wide { width: auto; min-width: 88px; max-width: 220px; padding: 12px 18px; }
.pf-logo.is-wide img { width: auto; max-width: 100%; height: 100%; object-fit: contain; }
.pf-logo.avatar-mono { font-size: 2rem; }
.pf-title { display: grid; gap: 4px; min-width: 0; text-shadow: 0 1px 12px rgb(13 13 13 / .22); }
.pf-title .fx-label { color: rgb(255 255 255 / .92); }
.pf-title h1 { font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1.02; letter-spacing: -0.035em; color: #fff; margin: 2px 0; overflow-wrap: anywhere; }
.pf-meta, .pf-handle { color: rgb(255 255 255 / .94); font-size: 1rem; margin: 0; }
.pf-handle { font-weight: 500; }
.pf-verify { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0; padding: 5px 11px 5px 6px; border-radius: 99px; font-size: .8rem; font-weight: 500; color: #fff; background: rgb(13 13 13 / .22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); text-shadow: none; }
.pf-verify i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #0d0d0d; display: grid; place-items: center; font-size: .66rem; font-weight: 700; }
.pf-verify.v0 { padding-left: 11px; }
.pf-acc { align-self: start; }
.pf-score { display: grid; justify-items: center; gap: 2px; min-width: 92px; padding: 12px 14px 10px; border: 0; border-radius: 20px; background: rgb(13 13 13 / .84); color: #fff; cursor: pointer; font: inherit; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .2s var(--ease-spring), background .2s; }
.pf-score:hover { transform: translateY(-2px); background: #0d0d0d; }
.pf-score:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.pf-score-n { display: inline-flex; align-items: baseline; gap: 1px; }
.pf-score-n b { font-family: var(--font-display); font-size: 2.1rem; font-weight: 600; letter-spacing: -0.04em; color: var(--lime); line-height: 1; }
.pf-score-n small { font-size: .75rem; color: rgb(255 255 255 / .7); }
.pf-score-w { font-size: .76rem; color: rgb(255 255 255 / .88); display: inline-flex; gap: 4px; align-items: center; }
.pf-score-w i { font-style: normal; opacity: .7; }
.pf-noscore { display: inline-block; padding: 8px 14px; border-radius: 99px; font-size: .82rem; font-weight: 500; color: #fff; background: rgb(255 255 255 / .2); border: 1px solid rgb(255 255 255 / .4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* popover "cómo se arma el score" */
.pf-pop { width: min(460px, calc(100vw - 32px)); border: 0; border-radius: 24px; padding: 22px; background: var(--surface); color: var(--fg); box-shadow: 0 24px 80px rgb(13 13 13 / .28); }
.pf-pop::backdrop { background: rgb(13 13 13 / .32); }
.pf-pop-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.pf-pop-head h2 { font-size: 1.15rem; margin: 0; }
.pf-pop-x { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--surface-3); font-size: 1.1rem; cursor: pointer; }
.pf-pop .bar { grid-template-columns: 150px minmax(0, 1fr) 32px; }
.pf-pop-notes { list-style: none; padding: 0; margin: 16px 0 10px; display: grid; gap: 6px; font-size: .85rem; }
.pf-pop .muted { font-size: .82rem; }
/* franja de datos */
.pf-stats { margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.pf-stats div { display: flex; flex-direction: column-reverse; gap: 2px; padding: 14px 16px; border-radius: 18px; background: var(--card-bg); border: 1px solid rgb(13 13 13 / .04); }
.pf-stats dt { font-size: .78rem; color: var(--muted); margin: 0; }
.pf-stats dd { margin: 0; font-family: var(--font-display); font-size: 1.4rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.pf-stats dd small { font-size: .8rem; color: var(--muted); font-weight: 500; }
/* dos columnas en escritorio */
.pf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; padding-top: 20px; }
.pf-main { min-width: 0; }
.pf-main .panel { scroll-margin-top: 130px; }
.pf-side { position: sticky; top: calc(var(--topbar-h) + 20px); }
.pf-sidecard { display: grid; gap: 12px; padding: 20px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 40px rgb(13 13 13 / .06); }
.pf-side-top { display: flex; gap: 12px; align-items: center; }
.pf-side-top > div { display: grid; min-width: 0; }
.pf-side-top b { font-weight: 600; }
.pf-side-top small { color: var(--muted); font-size: .8rem; }
.pf-logo.sm { width: 48px; height: 48px; min-width: 48px; border-radius: 14px; box-shadow: none; border: 1px solid var(--line); font-size: 1.05rem; }
.pf-logo.sm.is-wide { width: 72px; padding: 6px 8px; }
.pf-side-facts { list-style: none; padding: 0; margin: 0; }
.pf-side-facts li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.pf-side-facts li span { color: var(--muted); }
.pf-side-facts li b { font-weight: 600; }
.pf-side .btn { text-decoration: none; min-height: 46px; }
.save-wide svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.save-wide[aria-pressed="true"] svg { fill: currentColor; }
.pf-side-link { justify-self: center; font-size: .84rem; color: var(--fg); }
.pf-side-note { font-size: .75rem; color: var(--muted); text-align: center; margin: 0; }
/* índice de secciones con la sección actual marcada */
.pf-toc { margin-bottom: 12px; }
.pf-toc a { transition: background .2s, color .2s, border-color .2s; }
.pf-toc a[aria-current="true"] { background: var(--ink); color: var(--ink-fg); border-color: var(--ink); }
/* contenido */
.pf-tagline { font-family: var(--font-display); font-size: 1.3rem; line-height: 1.4; letter-spacing: -0.015em; max-width: 46ch; }
.pf-answer { font-size: .95rem; color: var(--muted); line-height: 1.6; }
.pf-invited { font-size: .85rem; }
.price-viz { padding: 4px 0 6px; }
.pv-track { position: relative; height: 10px; border-radius: 99px; background: var(--surface-3); margin: 14px 0 12px; }
.pv-band { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: var(--primary); opacity: .4; }
.pv-mark { position: absolute; top: -6px; width: 4px; height: 22px; border-radius: 2px; background: var(--ink); transform: translateX(-50%); }
.pv-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .86rem; align-items: center; }
.pv-legend b { font-weight: 600; }
.pv-dot { display: inline-block; width: 4px; height: 12px; border-radius: 2px; background: var(--ink); margin-right: 7px; vertical-align: -1px; }
.pv-sw { display: inline-block; width: 16px; height: 8px; border-radius: 99px; background: var(--primary); opacity: .4; margin-right: 7px; }
/* reseñas */
.rv-sum { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 18px 20px; border-radius: 18px; background: var(--surface-2); }
.rv-avg { display: grid; justify-items: start; gap: 2px; }
.rv-avg > b { font-family: var(--font-display); font-size: 2.6rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.rv-avg > span:last-child { font-size: .76rem; color: var(--muted); max-width: 16ch; }
.rv-dist { display: grid; gap: 4px; }
.rv-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 18px; gap: 8px; align-items: center; font-size: .78rem; color: var(--muted); }
.rv-row .track { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.rv-row .fill { height: 100%; background: #f5a524; border-radius: 99px; }
.rv-row b { font-weight: 500; text-align: right; }
.rv-re { display: grid; justify-items: center; text-align: center; }
.rv-re b { font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; color: var(--good); letter-spacing: -0.03em; }
.rv-re span { font-size: .76rem; color: var(--muted); max-width: 12ch; }
.stars { color: #f5a524; letter-spacing: 1px; }
.stars .stars-off { color: var(--line-strong); opacity: 1; }
.review-top { flex-wrap: nowrap; align-items: center; }
.review-top time { color: var(--muted); font-size: .8rem; flex: none; }
.rv-who { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; min-width: 0; }
.subdots { list-style: none; padding: 0; margin: 2px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 18px; font-size: .76rem; color: var(--muted); }
.subdots li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dots { display: inline-block; width: 54px; height: 6px; border-radius: 99px; flex: none; background: linear-gradient(90deg, var(--ink) calc(var(--v) * 20%), var(--surface-3) 0); }
.mini-ns { font-size: .78rem; }
/* barra de acción fija en móvil */
.pf-bar { display: none; }
@media (max-width: 960px) {
  .pf-layout { grid-template-columns: minmax(0, 1fr); }
  .pf-side { display: none; }
  .is-ssr[data-route="profile"] .tabbar { display: none !important; }
  .is-ssr[data-route="profile"] main { padding-bottom: 96px; }
  .pf-bar { display: flex; gap: 8px; position: fixed; z-index: 40; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 6px; border-radius: 99px; background: rgb(255 255 255 / .86); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); border: 1px solid rgb(13 13 13 / .08); box-shadow: 0 10px 40px rgb(13 13 13 / .16); }
  .pf-bar .btn { flex: 1; min-height: 50px; text-decoration: none; font-size: 1rem; }
  .pf-bar .btn small { font-weight: 400; opacity: .75; font-size: .8rem; margin-left: 4px; }
  .pf-bar-save { position: relative; width: 50px; height: 50px; min-width: 50px; padding: 0; border-radius: 50%; background: var(--surface); }
  .pf-bar-save svg { width: 20px; height: 20px; }
  .pf-bar-back { display: grid; place-items: center; width: 50px; height: 50px; min-width: 50px; border-radius: 50%; background: var(--surface); color: var(--fg); -webkit-tap-highlight-color: transparent; }
  .pf-bar-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .pf-bar-back:active, .pf-bar-save:active { transform: scale(.94); }
}
@media (max-width: 640px) {
  .pf-head .wrap { padding-top: 12px; }
  .pf-cover { padding: 20px; border-radius: 24px; min-height: 0; }
  .pf-id { grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; align-items: start; }
  .pf-title { grid-column: 1 / -1; grid-row: 2; }
  .pf-acc { grid-column: 2; grid-row: 1; justify-self: end; }
  .pf-logo { width: 64px; height: 64px; border-radius: 18px; }
  .pf-logo.is-wide { height: 64px; max-width: 170px; padding: 10px 14px; }
  .pf-logo.avatar-mono { font-size: 1.45rem; }
  .pf-score { min-width: 80px; padding: 10px 12px 8px; border-radius: 18px; }
  .pf-score-n b { font-size: 1.8rem; }
  .pf-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(132px, 42%); grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .pf-stats::-webkit-scrollbar { display: none; }
  .pf-stats div { scroll-snap-align: start; padding: 12px 14px; }
  .pf-stats dd { font-size: 1.25rem; }
  .pf-tagline { font-size: 1.15rem; }
  .rv-sum { grid-template-columns: auto minmax(0, 1fr); gap: 14px 18px; padding: 16px; }
  .rv-re { grid-column: 1 / -1; display: flex; gap: 8px; align-items: baseline; justify-content: flex-start; text-align: left; }
  .rv-re span { max-width: none; }
  .pf-pop { margin: auto auto 0; width: 100%; max-width: none; border-radius: 24px 24px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
  .pf-pop .bar { grid-template-columns: 120px minmax(0, 1fr) 28px; }
}
.pf-logo.avatar-mono { background: linear-gradient(135deg, var(--g1), var(--g2) 55%, var(--g3)); color: #fff; border: 2px solid rgb(255 255 255 / .85); font-family: var(--font-display); font-weight: 600; }
.pf-logo.sm.avatar-mono { border: 0; }
.review-top .stars { color: #f5a524; }
.review-top .stars .stars-off { color: var(--line-strong); }
@media (min-width: 641px) { .pf-id { align-items: center; } .pf-acc { align-self: start; } }
@media (max-width: 640px) { .pf-stats { margin-inline: 0; padding: 0 0 4px; scroll-padding-inline: 0; } }
/* acciones bajo la franja (ficha de la app); en móvil las toma la barra inferior */
.pf-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; align-items: center; }
.pf-actions .btn { min-height: 44px; }
.pf-head .seg-tabs { margin-top: 0; }
@media (max-width: 760px) { .pf-actions .btn { display: none; } .pf-actions { margin-top: 8px; justify-content: flex-end; } }

/* ---------- Influencers: publicaciones, calidad de audiencia, campaña ---------- */
.posts { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.post { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 18px; padding: 14px; display: grid; align-content: space-between; color: #fff; }
.post::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(13 13 13 / 0) 40%, rgb(13 13 13 / .45)); }
.post:nth-child(3n+2) { --g1: #7b5cf0; --g2: #f0679e; --g3: #ffb347; }
.post:nth-child(3n) { --g1: #1f4fd6; --g2: #ad49e1; --g3: #f2547f; }
.post-net { font-size: .74rem; font-weight: 500; opacity: .92; }
.post b { font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.2; letter-spacing: -0.015em; align-self: end; }
.post-views { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 600; margin-top: 6px; }
.post-views svg { width: 14px; height: 14px; fill: currentColor; }
.aud-q { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.aud-k { display: grid; gap: 2px; align-content: start; padding: 14px 16px; border-radius: 16px; background: var(--surface-2); position: relative; }
.aud-k b { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.03em; }
.aud-k span { font-size: .78rem; color: var(--muted); }
.aud-k.muted-k b { font-size: 1.1rem; color: var(--muted); }
.spark { width: 100%; max-width: 120px; height: 30px; color: var(--good); margin-top: 6px; }
.aud-note { font-size: .84rem; margin-top: -4px; }
.eng-rows .eng { display: grid; justify-items: end; text-align: right; }
.eng-rows .eng b { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; }
.eng-rows .eng small { max-width: 26ch; }
.bad { color: var(--bad, #c0392b); }
.aud-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.camp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); border-radius: 99px; font: inherit; font-weight: 500; cursor: pointer; }
.camp-btn[aria-pressed="true"] { background: var(--lime); border-color: var(--lime); color: #0d0d0d; }
.camp-sm { height: 32px; padding: 0 12px; font-size: .8rem; flex: none; }
.pf-side .camp-btn { min-height: 46px; }
.pf-bar-camp { flex: none; height: 50px; padding: 0 14px; font-size: .88rem; }
.camp-toast { position: fixed; z-index: 60; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: #0d0d0d; color: #fff; padding: 12px 18px; border-radius: 99px; font-size: .88rem; box-shadow: 0 10px 30px rgb(13 13 13 / .25); transition: opacity .25s, transform .25s var(--ease-spring); white-space: nowrap; }
.camp-toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.camp-toast a { color: var(--lime); margin-left: 8px; font-weight: 600; }
.camp-pill { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px; padding: 9px 16px; border-radius: 99px; background: var(--lime); color: #0d0d0d; text-decoration: none; font-size: .88rem; }
.camp-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.camp-totals div { display: grid; padding: 16px; border-radius: 18px; background: var(--card-bg); }
.camp-totals b { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; letter-spacing: -0.03em; }
.camp-totals span { font-size: .8rem; color: var(--muted); }
.camp-rows li { flex-wrap: wrap; }
.camp-who { display: flex !important; gap: 12px; align-items: center; min-width: 0; }
.camp-who > span { display: grid; min-width: 0; }
.camp-who a { color: var(--fg); }
.camp-ctl { display: flex; gap: 12px; align-items: center; }
.camp-ctl select { max-width: 280px; }
.camp-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.camp-cta .btn { text-decoration: none; }
.field-sm { display: grid; gap: 4px; font-size: .8rem; color: var(--muted); margin-bottom: 8px; }
.field-sm select, .field-sm input { font: inherit; font-size: .92rem; color: var(--fg); min-height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); }
@media (max-width: 640px) {
  .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aud-q { grid-template-columns: 1fr 1fr; }
  .aud-cols { grid-template-columns: 1fr; gap: 8px; }
  .camp-totals { grid-template-columns: 1fr 1fr; }
  .camp-ctl { width: 100%; justify-content: space-between; }
  .camp-ctl select { flex: 1; max-width: none; }
}
.post { --g1: #f2547f; --g2: #ff8a4c; --g3: #ffd23f; background: linear-gradient(160deg, var(--g1), var(--g2) 60%, var(--g3)); }
@media (max-width: 640px) { .pf-bar-camp { padding: 0 12px; font-size: .82rem; } }
.camp-ctl select { font: inherit; font-size: .9rem; min-height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); }

/* Textura granulada en los fondos de color (vuelve el grano sobre el degradé).
   La capa de contraste se aplica en modo soft-light, así oscurece apenas sin tapar la textura. */
.pf-cover::after {
  background: var(--noise), var(--noise), linear-gradient(90deg, rgb(13 13 13 / .45), transparent 70%), linear-gradient(180deg, transparent 35%, rgb(13 13 13 / .35));
  background-size: 180px 180px, 120px 120px, 100% 100%, 100% 100%;
  mix-blend-mode: soft-light; opacity: 1;
}
.post {
  background: var(--noise), linear-gradient(160deg, var(--g1), var(--g2) 60%, var(--g3));
  background-size: 160px 160px, 100% 100%;
  background-blend-mode: soft-light, normal;
}
.post::after { background: var(--noise), linear-gradient(180deg, rgb(13 13 13 / 0) 45%, rgb(13 13 13 / .4)); background-size: 120px 120px, 100% 100%; background-blend-mode: soft-light, normal; }
.pf-logo.avatar-mono { background: var(--noise), linear-gradient(135deg, var(--g1), var(--g2) 55%, var(--g3)); background-size: 120px 120px, 100% 100%; background-blend-mode: soft-light, normal; }
/* ajuste: grano visible sin lavar el color (overlay conserva la saturación) */
.pf-cover::after {
  background: var(--noise), linear-gradient(90deg, rgb(13 13 13 / .5), transparent 70%), linear-gradient(180deg, transparent 30%, rgb(13 13 13 / .45));
  background-size: 160px 160px, 100% 100%, 100% 100%;
  mix-blend-mode: overlay; opacity: .9;
}
.post { background: var(--noise), linear-gradient(160deg, var(--g1), var(--g2) 60%, var(--g3)); background-size: 160px 160px, 100% 100%; background-blend-mode: overlay, normal; }
.post::after { background: linear-gradient(180deg, rgb(13 13 13 / 0) 45%, rgb(13 13 13 / .35)); }
.pf-logo.avatar-mono { background-blend-mode: overlay, normal; }
/* textura como en las tarjetas originales: grano soft-light dentro del degradé, colores plenos */
.pf-cover::before {
  background:
    var(--noise), var(--noise),
    linear-gradient(to top, rgb(13 13 13 / .28), transparent 55%),
    radial-gradient(70% 90% at 8% 100%, var(--g3) 0%, transparent 62%),
    radial-gradient(80% 80% at 95% 5%, var(--g1) 0%, transparent 60%),
    linear-gradient(150deg, var(--g1), var(--g2) 55%, var(--g3));
  background-size: 180px 180px, 110px 110px, 100% 100%, 160% 160%, 160% 160%, 100% 100%;
  background-position: 0 0, 30px 20px, 0 0, 0% 100%, 100% 0%, 0 0;
  background-blend-mode: soft-light, soft-light, normal, normal, normal, normal;
}
.pf-cover::after { background: linear-gradient(90deg, rgb(13 13 13 / .16), transparent 65%); mix-blend-mode: normal; opacity: 1; }
.post {
  background: var(--noise), var(--noise), linear-gradient(to top, rgb(13 13 13 / .3), transparent 50%), radial-gradient(80% 70% at 10% 100%, var(--g3), transparent 65%), linear-gradient(160deg, var(--g1), var(--g2) 60%, var(--g3));
  background-size: 160px 160px, 100px 100px, 100% 100%, 150% 150%, 100% 100%;
  background-blend-mode: soft-light, soft-light, normal, normal, normal;
}
.post::after { background: none; }
.pf-logo.avatar-mono { background: var(--noise), linear-gradient(135deg, var(--g1), var(--g2) 55%, var(--g3)); background-size: 120px 120px, 100% 100%; background-blend-mode: soft-light, normal; }

/* =========================================================
   Proyectos: tablero anónimo, publicación y postulaciones
   ========================================================= */
.pj-head { display: flex; justify-content: space-between; gap: 20px; align-items: end; flex-wrap: wrap; }
.pj-head > div:first-child { max-width: 640px; }
.pj-ctas, .pj-band-ctas { display: flex; gap: 8px; flex-wrap: wrap; }
.pj-ctas .btn, .pj-band-ctas .btn { text-decoration: none; }
.pj-steps { list-style: none; padding: 0; margin: 0 0 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pj-steps li { display: grid; gap: 2px; padding: 14px 16px; border-radius: 16px; background: var(--card-bg); }
.pj-steps b { font-weight: 600; font-size: .92rem; }
.pj-steps span { font-size: .82rem; color: var(--muted); }
.pj-filters { margin-bottom: 16px; align-items: center; }
.pill-select { font: inherit; font-size: .85rem; min-height: 36px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); flex: none; }
.pj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.pj-grid.one { grid-template-columns: minmax(0, 520px); }
.pj-card { display: grid; gap: 12px; align-content: start; padding: 20px; border-radius: 22px; background: var(--card-bg); border: 1px solid rgb(13 13 13 / .05); }
.pj-top { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; }
.pj-card h3 { font-size: 1.1rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; }
.pj-card h3 a { color: inherit; text-decoration: none; }
.pj-card h3 a::after { content: ""; position: absolute; inset: 0; }
.pj-card .btn, .pj-card .pj-foot a { position: relative; z-index: 1; text-decoration: none; }
.pj-buyer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: .86rem; color: var(--muted); }
.pj-buyer svg, .pj-hero-b svg, .pj-anon svg, .note svg, .eyebrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; flex: none; }
.pj-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .82rem; }
.pj-note { margin-top: 16px; }
.pj-band { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding: 28px; border-radius: 24px; background: var(--card-bg); border: 1px solid rgb(13 13 13 / .05); }
.pj-band > div:first-child { max-width: 620px; display: grid; gap: 6px; }
.pj-band h2 { font-size: 1.5rem; }
.pj-band p { color: var(--muted); }
.back-link { display: inline-block; margin-bottom: 12px; font-size: .9rem; color: var(--fg); text-decoration: none; }
.pj-hero { border-radius: 26px; padding: 28px; display: grid; gap: 10px; color: #fff; margin-bottom: 16px; }
.pj-hero::before { opacity: 1; animation-play-state: running; animation-duration: 14s; }
.pj-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(90deg, rgb(13 13 13 / .16), transparent 65%); pointer-events: none; }
.pj-hero h1 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); line-height: 1.1; letter-spacing: -0.03em; color: #fff; max-width: 26ch; }
.pj-hero .fx-label { color: rgb(255 255 255 / .92); }
.pj-hero-b { display: flex; gap: 8px; align-items: center; color: rgb(255 255 255 / .94); }
.pj-hero-k { display: flex; flex-wrap: wrap; gap: 6px; }
.pj-hero-k span { padding: 6px 12px; border-radius: 99px; background: rgb(13 13 13 / .24); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: .84rem; }
.pj-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.pj-main { display: grid; gap: 16px; min-width: 0; }
.pj-main .panel + .panel { margin-top: 0; }
.pj-side { display: grid; gap: 12px; position: sticky; top: calc(var(--topbar-h) + 16px); }
.pj-side .panel + .panel { margin-top: 0; }
.pj-anon { display: flex; gap: 8px; align-items: center; font-size: 1.02rem; }
.pj-mine { margin-bottom: 16px; }
.form-err { color: var(--bad, #c0392b); font-size: .88rem; background: rgb(192 57 43 / .07); border-radius: 12px; padding: 10px 12px; }
.pj-stepper { margin: 0 0 20px; }
.pj-review .pj-card { box-shadow: 0 10px 40px rgb(13 13 13 / .08); }
/* postulaciones del lado de la empresa */
.pj-sec { margin-top: 24px; display: grid; gap: 10px; }
.pj-sec > h2 { font-size: 1.2rem; }
.pj-recs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pj-app { display: grid; gap: 10px; padding: 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.pj-app.rec { background: var(--card-bg); border-color: rgb(13 13 13 / .05); align-content: start; }
.pj-app.is-chosen { box-shadow: 0 0 0 2px var(--good) inset; }
.pj-app-top { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.pj-app:not(.rec) .pj-app-top { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.pj-rank { width: 26px; height: 26px; border-radius: 50%; background: var(--lime); color: #0d0d0d; display: grid; place-items: center; font-size: .82rem; font-weight: 700; }
.pj-app-id { min-width: 0; }
.pj-app-id h3 { font-size: 1rem; font-weight: 600; display: flex; gap: 4px; align-items: center; }
.pj-app-id h3 a { color: var(--fg); text-decoration: none; }
.pj-app-id .card-meta { font-size: .78rem; }
.pj-fit { display: grid; justify-items: center; line-height: 1; padding: 6px 8px; border-radius: 12px; border: 1px solid var(--line-strong); }
.pj-fit b { font-family: var(--font-display); font-size: 1.05rem; }
.pj-fit small { font-size: .62rem; color: var(--muted); margin-top: 2px; }
.pj-offer { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; font-size: .9rem; }
.pj-offer b { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; }
.pj-msg { font-size: .9rem; color: var(--fg); line-height: 1.5; }
.pj-why { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pj-why li { font-size: .76rem; padding: 4px 9px; border-radius: 99px; background: var(--surface-3); color: var(--fg); }
.pj-why li.warn { background: rgb(240 140 0 / .12); color: #8a4b00; }
.sheet .pj-why { display: grid; gap: 6px; margin-top: 10px; }
.sheet .pj-why li { border-radius: 10px; }
.pj-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pj-actions .btn { text-decoration: none; }
.pj-chosen { margin-bottom: 8px; border-color: var(--good); }
.pj-out summary { cursor: pointer; font-weight: 500; }
@media (max-width: 960px) {
  .pj-cols { grid-template-columns: minmax(0, 1fr); }
  .pj-side { position: static; }
  .pj-recs { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .pj-steps { grid-template-columns: minmax(0, 1fr); }
  .pj-grid { grid-template-columns: minmax(0, 1fr); }
  .pj-band { padding: 20px; }
  .pj-hero { padding: 20px; border-radius: 22px; }
  .pj-app-top, .pj-app:not(.rec) .pj-app-top { grid-template-columns: auto minmax(0, 1fr) auto; }
  .pj-app-top .pj-rank { grid-row: 1; }
  .pj-app-top .spill, .pj-app-top .score-pill { display: none; }
}
.pj-app.rec .pj-app-top { grid-template-columns: auto auto minmax(0, 1fr); }
.pj-badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .8rem; }
.pj-badges .pj-fit { display: inline-flex; gap: 4px; align-items: baseline; padding: 4px 10px; border-radius: 99px; }
.pj-badges .pj-fit small { margin: 0; }
@media (max-width: 640px) { .pj-app-top .pj-fit { display: none; } .pj-badges .pj-fit { display: inline-flex; } }
.pj-buyer { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 4px 8px; }
.pj-buyer svg { margin-top: 2px; }
.pj-buyer .buyer-ok { grid-column: 2; }
.pj-facts { list-style: none; padding: 12px 0 0; margin: 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px; font-size: .84rem; }
.pj-facts li { padding: 5px 10px; border-radius: 99px; background: var(--surface); border: 1px solid rgb(13 13 13 / .06); }
.pj-facts b { font-weight: 600; }
.pj-card:hover .pj-facts li { background: rgb(255 255 255 / .2); border-color: rgb(255 255 255 / .3); }
/* Corrección: la animación del encabezado de la ficha mueve solo la textura y las luces;
   los degradés de tamaño completo quedan fijos y sin repetir (antes se desplazaban y aparecían franjas en los bordes). */
.pf-cover::before {
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  animation-name: drift-pf;
}
@keyframes drift-pf {
  to { background-position: 40px 30px, 60px 45px, 0 0, 35% 60%, 60% 35%, 0 0; }
}
.fx-card::before, .cover::before { background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat; }
.pf-cover.cover::before { background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat; animation-name: drift-pf; }
/* acceso a publicar un proyecto, debajo del buscador del inicio */
.hero-publish { display: inline-flex; align-items: center; gap: 10px; margin: 18px auto 0; padding: 10px 16px 10px 10px; border-radius: 99px; background: var(--card-bg); border: 1px solid rgb(13 13 13 / .06); color: var(--fg); text-decoration: none; font-size: .9rem; max-width: 100%; text-align: left; transition: transform .2s var(--ease-spring), border-color .2s; }
.hero-publish:hover { transform: translateY(-1px); border-color: var(--line-strong); }
.hero-publish b { font-weight: 600; }
.hp-ico { width: 30px; height: 30px; border-radius: 50%; background: var(--lime); display: grid; place-items: center; flex: none; }
.hp-ico svg { width: 16px; height: 16px; fill: none; stroke: #0d0d0d; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-center .hero-publish { justify-self: center; }
@media (max-width: 640px) { .hero-publish { font-size: .84rem; border-radius: 18px; } }

/* ---------- Contratación dentro de Avalens: mensajes, propuesta y reputación ---------- */
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-via i { background: var(--lime) !important; color: #0d0d0d !important; }
.via-ava { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 500; color: var(--fg); background: rgb(204 255 53 / .35); padding: 3px 9px 3px 4px; border-radius: 99px; white-space: nowrap; vertical-align: 1px; }
.via-ava i { font-style: normal; width: 16px; height: 16px; border-radius: 50%; background: var(--lime); color: #0d0d0d; display: grid; place-items: center; font-size: .6rem; font-weight: 700; }
.via-ava.sm { font-size: .72rem; padding: 2px 8px 2px 3px; }
.pc-clients .via-ava { margin-right: 6px; }
.chat-note { font-size: .82rem; color: var(--muted); background: var(--surface-2); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; display: flex; gap: 8px; align-items: flex-start; }
.chat-note svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; flex: none; margin-top: 1px; }
.chat-note.ok { color: var(--good); background: rgb(25 135 84 / .08); }
.chat { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; max-height: 46vh; overflow-y: auto; }
.msg { max-width: 82%; padding: 9px 12px; border-radius: 16px; font-size: .92rem; line-height: 1.45; }
.msg .who { display: block; font-size: .72rem; color: var(--muted); margin-bottom: 2px; }
.msg .who em { font-style: normal; opacity: .8; }
.msg.me { justify-self: end; background: var(--ink); color: var(--ink-fg); border-bottom-right-radius: 6px; }
.msg.me .who { color: rgb(255 255 255 / .7); }
.msg.them { justify-self: start; background: var(--surface-2); border-bottom-left-radius: 6px; }
.msg.sys { justify-self: center; max-width: 92%; text-align: center; font-size: .78rem; color: var(--muted); background: none; padding: 2px 8px; }
mark.masked { background: rgb(240 140 0 / .2); color: inherit; border-radius: 4px; padding: 0 3px; letter-spacing: 1px; }
.chat-form { display: flex; gap: 8px; width: 100%; }
.chat-form input { flex: 1; min-width: 0; font: inherit; min-height: 46px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--surface); }
.pj-flow { list-style: none; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pj-flow li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: .8rem; }
.pj-flow li span { color: var(--muted); font-size: .74rem; }
.pj-flow li.on { background: var(--lime); }
.pj-pending { font-size: .84rem; font-weight: 500; color: #8a4b00; background: rgb(240 140 0 / .12); padding: 5px 10px; border-radius: 99px; }
.pj-deal { display: grid; gap: 10px; }
.pj-deal.ok { border-color: var(--good); }
.pj-contact { background: var(--surface); border-radius: 12px; padding: 10px 14px; }
.pj-assigned { color: var(--good); }
.pj-card.is-hired { opacity: .78; }
.pj-as { margin-top: 12px; }
@media (max-width: 640px) { .pj-flow { grid-template-columns: 1fr; } }

/* ---------- Contactar: registro, chat seguro de Avalens o WhatsApp ---------- */
.ct-ch { display: grid; gap: 8px; border: 0; padding: 0; margin: 4px 0 0; }
.ct-ch legend { font-size: .9rem; font-weight: 500; margin-bottom: 6px; }
.ct-opt { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px; border-radius: 16px; border: 1.5px solid var(--line-strong); cursor: pointer; transition: border-color .2s, background .2s; }
.ct-opt:has(input:checked) { border-color: var(--ink); background: var(--surface-2); }
.ct-opt input { accent-color: var(--ink); width: 18px; height: 18px; margin: 0; }
.ct-opt b { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.ct-opt small { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; line-height: 1.4; }
.ct-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.ct-ico svg { width: 22px; height: 22px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ct-safe { background: var(--lime); }
.ct-safe svg { stroke: #0d0d0d; }
.ct-wa { background: #25d366; }
.ct-wa svg { stroke: #fff; }
.safe-tag { font-style: normal; font-size: .68rem; font-weight: 600; padding: 2px 7px; border-radius: 99px; background: var(--ink); color: var(--lime); letter-spacing: .02em; }
.ct-preview { display: flex; gap: 10px; align-items: flex-start; font-size: .86rem; padding: 12px 14px; border-radius: 14px; background: #e7f9ee; color: #10391f; }
.ct-preview svg { width: 18px; height: 18px; flex: none; fill: none; stroke: #1a9b4b; stroke-width: 1.8; margin-top: 1px; }
.wa-msg { background: #e7f9ee; border-left-color: #25d366; font-size: .9rem; }
.chat-note.safe { background: rgb(204 255 53 / .3); color: var(--fg); }
.chat-note.safe svg { stroke: var(--fg); }
.cq-rows li { align-items: flex-start; }
.cq-rows small { display: block; color: var(--muted); margin-top: 3px; }
.cq-meta { display: grid; justify-items: end; gap: 4px; text-align: right; flex: none; }
.cq-ch { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 500; padding: 3px 9px 3px 6px; border-radius: 99px; }
.cq-ch svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.cq-ch.chat { background: rgb(204 255 53 / .4); color: #0d0d0d; }
.cq-ch.whatsapp { background: #e7f9ee; color: #10391f; }
.pj-assigned-chip { background: var(--good) !important; color: #fff; font-weight: 600; }

/* ---------- Alta de proveedor ---------- */
.ptype { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ptype legend { font-weight: 500; font-size: .92rem; margin-bottom: 8px; }
.ptype-opt { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border-radius: 16px; border: 1.5px solid var(--line-strong); cursor: pointer; transition: border-color .2s, background .2s; }
.ptype-opt:has(input:checked) { border-color: var(--ink); background: var(--surface-2); }
.ptype-opt input { accent-color: var(--ink); margin-top: 2px; width: 18px; height: 18px; flex: none; }
.ptype-opt b { display: block; font-weight: 600; font-size: .95rem; }
.ptype-opt small { color: var(--muted); font-size: .8rem; line-height: 1.35; }
.cat-pick { border: 0; padding: 0; margin: 0; }
.cat-pick legend { font-size: .9rem; font-weight: 500; margin-bottom: 8px; }
.cat-pick legend small { color: var(--muted); font-weight: 400; }
.pill-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.pill-check { cursor: pointer; }
.pill-check input { position: absolute; opacity: 0; pointer-events: none; }
.pill-check.on { background: var(--ink); color: var(--ink-fg); border-color: var(--ink); }
.pill-check:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.scan-res { padding: 14px 16px; border-radius: 16px; background: var(--surface-2); margin-bottom: 14px; font-size: .9rem; display: grid; gap: 6px; }
.scan-res ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.scan-res li { color: var(--muted); }
.scan-res li.ok { color: var(--good); font-weight: 500; }
.scan-res small { color: var(--muted); }
.onb-checks li.ok b { color: var(--good); }
.onb-card .form-err { margin: 4px 0 8px; }
@media (max-width: 480px) { .ptype { grid-template-columns: 1fr; } }
.onb-checks li.ok::before { content: "✓"; background: var(--good); border-color: var(--good); color: #fff; font-size: .55rem; font-weight: 700; display: grid; place-items: center; line-height: 1; }

/* =========================================================
   Buscador: brillo que sigue al cursor, voz y Modo IA
   ========================================================= */
.search-fx { position: relative; --glow: 0; --mx: 50%; --my: 50%; }
/* anillo de color en el borde, centrado en el cursor */
.search-fx::before { content: ""; position: absolute; inset: -2px; z-index: 2; border-radius: inherit; padding: 2px; pointer-events: none;
  background: radial-gradient(180px circle at var(--mx) var(--my), #ccff35, #0b7cef 32%, #ad49e1 52%, rgb(240 103 158 / .6) 62%, transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: var(--glow); transition: opacity .25s; }
/* halo suave por detrás */
.search-fx::after { content: ""; position: absolute; inset: -10px; z-index: -1; border-radius: inherit; pointer-events: none; filter: blur(16px);
  background: radial-gradient(160px circle at var(--mx) var(--my), rgb(204 255 53 / .55), rgb(11 124 239 / .35) 40%, rgb(173 73 225 / .25) 60%, transparent 75%);
  opacity: calc(var(--glow) * .9); transition: opacity .25s; }
.search-fx > * { position: relative; z-index: 1; }
.search-fx > svg { position: absolute; }
.sb-mic, .sb-ai { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: none; color: var(--fg); font: inherit; cursor: pointer; }
.sb-mic { width: 40px; height: 40px; border-radius: 50%; }
.sb-mic svg, .sb-ai svg { position: static; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sb-mic:hover { background: var(--surface-3); }
.sb-ai { position: relative; isolation: isolate; height: 40px; padding: 0 14px 0 11px; border-radius: 99px; background: var(--surface-3); font-size: .9rem; font-weight: 500; margin-left: 4px; white-space: nowrap; --mx: 50%; --my: 50%; }
/* el brillo del Modo IA: color detrás del botón que persigue al cursor */
.sb-ai::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px;
  background: radial-gradient(70px circle at var(--mx) var(--my), #ccff35, #0b7cef 45%, #ad49e1 70%, transparent 85%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .25s; }
.sb-ai::after { content: ""; position: absolute; inset: -6px; z-index: -2; border-radius: inherit; filter: blur(10px);
  background: radial-gradient(60px circle at var(--mx) var(--my), rgb(204 255 53 / .9), rgb(11 124 239 / .6) 45%, rgb(173 73 225 / .45) 70%, transparent 85%);
  opacity: 0; transition: opacity .25s; }
.sb-ai:hover::before, .sb-ai:focus-visible::before, .sb-ai[aria-pressed="true"]::before { opacity: 1; }
.sb-ai:hover::after, .sb-ai:focus-visible::after { opacity: .85; }
.sb-ai[aria-pressed="true"] { background: var(--ink); color: var(--ink-fg); }
.sb-ai[aria-pressed="true"]::before { background: conic-gradient(from 0deg, #ccff35, #0b7cef, #ad49e1, #f0679e, #ccff35); }
.search-lg .sb-mic { color: var(--fg); }
/* escuchando */
.search-fx.listening .sb-mic { background: #e5374d; color: #fff; animation: sb-pulse 1.2s ease-in-out infinite; }
.search-fx.listening { --glow: 1 !important; }
@keyframes sb-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgb(229 55 77 / .45); } 50% { box-shadow: 0 0 0 8px rgb(229 55 77 / 0); } }
.sb-hint { font-size: .84rem; color: var(--muted); margin: 8px 0 0; text-align: center; }
@media (max-width: 560px) {
  .sb-ai span { display: none; }
  .sb-ai { width: 40px; padding: 0; }
  .sb-mic { width: 36px; }
}
@media (prefers-reduced-motion: reduce) { .search-fx::before, .search-fx::after { display: none; } .search-fx.listening .sb-mic { animation: none; } }

/* ---------- comentario del Modo IA ---------- */
.ai-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: -6px 0 12px; font-size: .88rem; color: var(--fg); line-height: 1.5; }
.ai-badge { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; background: linear-gradient(90deg, #0b7cef, #ad49e1); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ai-badge svg { width: 15px; height: 15px; fill: #ad49e1; align-self: center; }

/* ---------- a prueba de desbordes ---------- */
/* nada puede generar scroll horizontal en la página (clip no rompe los elementos fijos al hacer scroll) */
html, body { overflow-x: clip; }
/* los grupos de campos no se achican por defecto por debajo de su contenido: en la columna de filtros sí deben */
.filters, .filters > *, .filters fieldset, .filters label, .filters select, .filters input:not([type="checkbox"]):not([type="radio"]) { min-width: 0; max-width: 100%; }
.filters .seg { display: flex; flex-wrap: wrap; width: 100%; }
.filters .seg label { flex: 1 1 auto; min-width: 0; padding: 0 8px; text-align: center; font-size: .82rem; }
.filters .field-sm { display: grid; grid-template-columns: minmax(0, 1fr); }
.filters .field-sm select, .filters .field-sm input { width: 100%; }
/* el brillo del buscador es para mouse: en pantallas táctiles no hace falta */
@media (hover: none) { .search-fx::before, .search-fx::after, .sb-ai::after { display: none; } }
.search-fx::after { inset: -6px; }
/* ningún contenido de una columna o del encabezado puede ensanchar la página */
.results, .results-layout > *, .hero .wrap > *, .wrap > * { min-width: 0; }
.hero .wrap { max-width: 100%; }
.rec-id h3 { display: block; overflow-wrap: anywhere; white-space: normal; }
.rec-id h3 .vtick { display: inline-flex; vertical-align: -2px; margin-left: 4px; }
.rec-id .card-meta { white-space: normal; overflow-wrap: anywhere; }

/* ---------- micrófono con el brillo (reemplaza al botón "Modo IA") ---------- */
.sb-mic.sb-glow { position: relative; isolation: isolate; width: 42px; height: 42px; background: var(--surface-3); --mx: 50%; --my: 50%; }
.sb-mic.sb-glow::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px;
  background: radial-gradient(60px circle at var(--mx) var(--my), #ccff35, #0b7cef 45%, #ad49e1 70%, transparent 85%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .25s; }
.sb-mic.sb-glow::after { content: ""; position: absolute; inset: -6px; z-index: -2; border-radius: inherit; filter: blur(10px);
  background: radial-gradient(50px circle at var(--mx) var(--my), rgb(204 255 53 / .9), rgb(11 124 239 / .6) 45%, rgb(173 73 225 / .45) 70%, transparent 85%);
  opacity: 0; transition: opacity .25s; }
.sb-mic.sb-glow:hover::before, .sb-mic.sb-glow:focus-visible::before { opacity: 1; }
.sb-mic.sb-glow:hover::after, .sb-mic.sb-glow:focus-visible::after { opacity: .85; }
.search-fx.listening .sb-mic.sb-glow { background: #e5374d; color: #fff; }
.search-fx.listening .sb-mic.sb-glow::before { opacity: 1; background: conic-gradient(from 0deg, #ccff35, #0b7cef, #ad49e1, #f0679e, #ccff35); }
@media (hover: none) { .sb-mic.sb-glow::after { display: none; } }

/* ---------- transición entre páginas: solo el sello verificado, con las barras fijas ---------- */
/* la barra superior y la inferior (mobile) quedan visibles; solo se funde el contenido */
html.ava-entering body > :not(.ava-tr):not(.topbar):not(.tabbar) { opacity: 0; animation: tr-safety 0s linear 2s forwards; }
@keyframes tr-safety { to { opacity: 1; } }
.ava-tr { position: fixed; inset: 0; z-index: 19; display: grid; place-items: center; background: var(--bg, #fff); opacity: 0; pointer-events: none; transition: opacity .18s ease; }
.ava-tr.show, .ava-tr.in { opacity: 1; pointer-events: auto; }
.ava-tr.out { opacity: 0; transition: opacity .32s ease; pointer-events: none; }
.ava-tr-seal { position: relative; width: 56px; height: 56px; animation: tr-seal .7s cubic-bezier(.2, .9, .3, 1.25) both; }
.ava-tr-seal svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; animation: tr-spin 1.6s cubic-bezier(.45, .05, .35, 1) .7s infinite; }
.ava-tr-seal .seal-bg { fill: var(--lime); }
.ava-tr-seal .seal-ck { fill: #0d0d0d; }
.ava-tr-seal .tr-ck { transform-box: fill-box; transform-origin: 30% 70%; animation: tr-ck .5s cubic-bezier(.2, .9, .3, 1.4) .25s both; }
/* fondo verde que late detrás del sello */
.ava-tr-seal::before { content: ""; position: absolute; inset: -55%; border-radius: 50%; background: radial-gradient(circle, rgb(204 255 53 / .55), rgb(204 255 53 / 0) 62%); animation: tr-glow 1.3s ease-out .2s infinite; }
@keyframes tr-seal { 0% { opacity: 0; transform: scale(.3) rotate(-120deg); } 65% { opacity: 1; transform: scale(1.1) rotate(8deg); } 100% { opacity: 1; transform: none; } }
@keyframes tr-spin { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(-12deg) scale(1.05); } }
@keyframes tr-ck { from { opacity: 0; transform: scale(0) rotate(-20deg); } to { opacity: 1; transform: none; } }
@keyframes tr-glow { 0% { transform: scale(.55); opacity: .95; } 100% { transform: scale(1.45); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ava-tr-seal, .ava-tr-seal svg, .ava-tr-seal::before, .ava-tr-seal .tr-ck { animation: none; } }

/* ---------- barra superior: línea inferior con leve luminiscencia verde al bajar ---------- */
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: linear-gradient(90deg, rgb(150 215 0 / 0), rgb(150 215 0 / .85) 18%, rgb(170 235 20 / 1) 50%, rgb(150 215 0 / .85) 82%, rgb(150 215 0 / 0));
  box-shadow: 0 0 10px 1px rgb(204 255 53 / .55), 0 4px 18px rgb(204 255 53 / .35); }
body.scrolled .topbar::after { opacity: 1; }
body.scrolled .topbar { border-bottom-color: transparent; }
@media (prefers-reduced-transparency: reduce) { .topbar::after { box-shadow: none; } }
@media (max-width: 400px) { .pf-bar { gap: 6px; } .pf-bar .btn small { display: none; } .pf-bar-camp { padding: 0 10px; } .pf-bar-back, .pf-bar-save { width: 46px; min-width: 46px; height: 46px; align-self: center; } .pf-bar .btn { min-width: 0; padding-inline: 12px; } }

/* ---------- resultados: cabecera simple (buscador → atajos → IA → cantidad + orden) ---------- */
.srch-pills { display: none; }
@media (max-width: 900px) {
  .srch-pills { display: flex; padding-block: 0 2px; margin-top: -4px; margin-bottom: 12px; }
  .srch-pills .pill { min-height: 38px; padding-inline: 14px; font-size: .9rem; }
}
.ai-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 12px; font-size: .88rem; line-height: 1.4; }
.ai-bar .ai-badge { margin-right: 2px; }
.ai-bar .chip-x { min-height: 32px; }
.ai-bar .reset { min-height: 32px; }
.ai-text { color: var(--fg); }
.ai-sub { flex-basis: 100%; margin: 0; font-size: .82rem; color: var(--muted); }
.res-head.compact { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 12px; }
.res-head.compact .large-title { font-size: 1.15rem; letter-spacing: -.01em; margin: 0; }
.res-head.compact .sort { margin: 0; justify-self: auto; }
.res-head.compact .sort span { display: none; }
.res-head.compact .sort select { min-height: 36px; font-size: .9rem; text-align: right; }
@media (max-width: 760px) { .res-head.compact { margin-bottom: 10px; } }
/* "¿Cuánto cuesta?" cerrado y en una sola línea */
.ref summary { display: flex; align-items: center; gap: 8px; padding: 10px 40px 10px 14px; min-height: 44px; }
.ref-title { font-size: .92rem; }
.ref-sum { font-size: .84rem; color: var(--muted); }
.ref-sum::before { content: "· "; }
.res-sub { margin: -6px 0 12px; font-size: .85rem; }
@media (max-width: 900px) { .results .srch-pills { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; } }

/* =========================================================
   Navegación mobile (10 mejoras)
   ========================================================= */
/* 1. Sin zoom al escribir en iPhone: los campos de texto van a 16 px en pantallas táctiles */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; }
}
/* 3. Transición nativa entre páginas: las barras quedan quietas y el contenido se funde */
@view-transition { navigation: auto; }
.topbar { view-transition-name: ava-top; }
.tabbar { view-transition-name: ava-tab; }
.pf-bar { view-transition-name: ava-pfbar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* 4. Barra de abajo que se esconde al bajar y vuelve al subir */
@media (max-width: 900px) {
  .tabbar { transition: transform .32s var(--ease-spring, cubic-bezier(.2, .9, .3, 1)), opacity .2s; }
  body.tb-hide .tabbar { transform: translateY(calc(100% + 24px + env(safe-area-inset-bottom, 0px))); opacity: 0; pointer-events: none; }
}
/* 5. "Filtros" flotante al recorrer los resultados */
.fab-filters { display: none; }
@media (max-width: 900px) {
  .fab-filters { display: inline-flex; align-items: center; gap: 8px; position: fixed; z-index: 27; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
    min-height: 46px; padding: 0 20px; border: 0; border-radius: 99px; background: var(--ink, #0d0d0d); color: #fff; font: inherit; font-weight: 600; font-size: .95rem; box-shadow: 0 10px 30px rgb(13 13 13 / .25); transition: transform .3s var(--ease-spring, ease), opacity .2s, bottom .32s var(--ease-spring, ease); }
  .fab-filters svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .fab-filters .count { background: var(--lime); color: #0d0d0d; border-radius: 99px; min-width: 22px; height: 22px; display: inline-grid; place-items: center; font-size: .78rem; padding: 0 6px; }
  body.fab-on .fab-filters { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
  body.tb-hide .fab-filters { bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); }
  html.locked .fab-filters { opacity: 0; pointer-events: none; }
}
/* 6. Hoja de filtros: se arrastra desde cualquier parte, el fondo acompaña y el botón de resultados queda fijo */
@media (max-width: 760px) {
  .sheet-grab { padding-block: 10px 6px; cursor: grab; touch-action: none; }
  .sheet-head { touch-action: none; }
  .modal { transition: background-color .2s; }
  .sheet-foot .btn-primary { flex: 1; min-height: 50px; }
}
/* 7. Áreas de toque de al menos 44 px sin agrandar el diseño */
@media (pointer: coarse) {
  .chip-x, .reset, .link-btn, .pill, .pf-toc a, .crumbs a, .tabbar a { position: relative; }
  .chip-x::after, .reset::after, .link-btn::after, .pf-toc a::after, .crumbs a::after { content: ""; position: absolute; inset: -7px -4px; }
  .pill { min-height: 40px; }
  .pill::after { content: ""; position: absolute; inset: -4px 0; }
  .sort select { min-height: 44px !important; }
}
/* 8. Respuesta al tocar: tarjetas y botones se hunden apenas */
* { -webkit-tap-highlight-color: transparent; }
.card, .rec, .need, .fx-card, .rank, .pill, .chip-x, .btn, .tabbar a, .pf-bar-save, .pf-bar-back { transition: transform .16s var(--ease-spring, ease), background-color .15s, box-shadow .15s; }
@media (pointer: coarse) {
  .card:active, .rec:active, .need:active, .fx-card:active, .rank:active { transform: scale(.985); }
  .pill:active, .chip-x:active, .btn:active, .tabbar a:active { transform: scale(.95); }
}
/* 10. Ficha: el título de cada sección no queda tapado por la barra y el índice */
.pf-main .panel, .pf-main [id] { scroll-margin-top: calc(var(--topbar-h) + 72px); }

/* =========================================================
   Menos es más: resultados y filtros
   ========================================================= */
/* tarjeta: un solo renglón de datos clave en lugar de la grilla y la lista de clientes */
.pc-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 10px 0 0; font-size: .88rem; color: var(--muted); }
.pc-facts .num { color: var(--fg); font-weight: 500; }
.pc-facts .num small { font-weight: 400; color: var(--muted); }
.pc-facts i { font-style: normal; color: var(--line-strong, #c8c8c8); }
.pcard .pc-foot { border-top: 0; padding-top: 0; margin-top: 10px; min-height: 0; }
.pcard .pc-clients:empty { display: none; }
.pcard .pc-foot:has(.pc-clients:empty) { justify-content: flex-end; }
.pcard .fx-label { display: none; }
/* filtros de escritorio: sin caja, sin textos de ayuda, scroll propio */
@media (min-width: 901px) {
  .results-layout { grid-template-columns: 232px minmax(0, 1fr); gap: 40px; }
  .filters:not(.in-sheet) { background: none; border: 0; padding: 4px 0 24px; gap: 22px; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
  .filters:not(.in-sheet) > .reset { justify-self: start; padding-left: 0; }
}
.filters .note, .filters .check .note { display: none; }
.filters legend { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.filters .check { min-height: 34px; }
/* =========================================================
   Menos es más: home
   ========================================================= */
.top-more { text-align: center; margin-top: 14px; font-weight: 600; width: 100%; justify-self: center; grid-column: 1 / -1; }
.top-more a { color: var(--primary); text-decoration: none; }
.section-tight .updated { text-align: center; margin-top: 6px; width: 100%; justify-self: center; grid-column: 1 / -1; }
@media (max-width: 760px) {
  .hero-center .wrap { padding-block: 8px 4px; }
  .hero-center .lead { font-size: 1rem; margin-bottom: 18px; }
  .suggest-wrap .suggest { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; justify-content: flex-start; }
  .suggest-wrap .suggest::-webkit-scrollbar { display: none; }
  .suggest-wrap .suggest .pill { flex: none; }
  /* servicios: grilla de 2 con ícono y título, sin descripción */
  .section-needs .need-list { grid-template-columns: 1fr 1fr; gap: 10px; background: none; border: 0; border-radius: 0; overflow: visible; }
  .section-needs .need { grid-template-columns: 1fr; align-content: start; gap: 10px; min-height: 0; padding: 14px; border: 1px solid var(--line); border-radius: 18px; box-shadow: none; }
  .section-needs .need:last-child { border-bottom: 1px solid var(--line); }
  .section-needs .need-text b { font-size: .92rem; line-height: 1.25; display: block; }
  .section-needs .need-text b .chip-new { display: none; }
  .section-needs .need-text > span, .section-needs .need-meta, .section-needs .fx-label, .section-needs .fx-arrow { display: none; }
  .section-needs .need-icon { width: 38px; height: 38px; border-radius: 11px; }
  /* top: los 3 primeros */
  .top-list li:nth-child(n + 4) { display: none; }
  /* lo que ya se entiende o se repite, fuera en mobile */
  .home-how, .home-closing { display: none; }
  .pj-band .btn-ghost { display: none; }
}
/* recomendados: la razón (verde) va junto al score */
.rec-badges { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: nowrap; }
.rec-badges .rec-why { justify-self: auto; white-space: nowrap; }
/* Recomendados arriba; después la lista completa con su cantidad y el orden */
.recs + .res-head { margin-top: 28px; }
.res-n { font-size: .8em; font-weight: 500; color: var(--muted); margin-left: 4px; }
.res-head.compact .large-title { white-space: nowrap; min-width: 0; }
.res-head.compact .sort { flex: none; }
.res-head.compact .sort select { width: auto; padding-left: 0; }
/* datos de la tarjeta: separados por espacio, sin puntos sueltos al cortar línea */
.pc-facts { gap: 4px 16px; }
.pc-facts i { display: none; }

/* ---------- "Datos": solo con cuenta ---------- */
html:not(.ava-acct) .nav-acct { display: none !important; }
.data-gate { display: none; }
html:not(.ava-acct) .data-gate { display: block; padding-block: 48px 96px; }
html:not(.ava-acct) body[data-route="data"] main > :not(.data-gate) { display: none !important; }
.gate-card { text-align: center; display: grid; justify-items: center; gap: 14px; padding: 36px 24px; border-radius: 24px; background: var(--card-bg, var(--surface)); border: 1px solid var(--line); }
.gate-card h1 { font-size: clamp(1.5rem, 4vw, 2rem); margin: 0; }
.gate-card p { color: var(--muted); max-width: 46ch; margin: 0; }
.gate-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--lime); color: #0d0d0d; }
.gate-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.gate-ctas { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 6px; }
@media (max-width: 520px) { .gate-ctas { flex-direction: column; width: 100%; } .gate-ctas .btn { width: 100%; } }

/* ---------- Alta: clientes (empresa + sitio o red) ---------- */
.cl-add { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; margin-top: 4px; }
.cl-add .btn { grid-column: 1 / -1; min-height: 48px; }
@media (max-width: 640px) { .cl-add { grid-template-columns: 1fr; } }
.cl-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.cl-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 12px; align-items: center; padding: 10px 10px 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card-bg, var(--surface)); }
.cl-ini { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--lime); color: #0d0d0d; font-weight: 700; }
.cl-txt { display: grid; min-width: 0; }
.cl-txt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-txt small { color: var(--muted); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-list .row-x { width: 40px; height: 40px; }
.onb-card > .link-btn { justify-self: start; }
/* reseña del cliente: empresa fija arriba, nombre y rol */
.cr-co { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--surface-2, var(--surface)); border: 1px solid var(--line); }
.cr-co svg { width: 26px; height: 26px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cr-co span { display: grid; }
.cr-co small { color: var(--muted); font-size: .8rem; }
.cr-who { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cr-who .field:nth-child(3) { grid-column: 1 / -1; }
@media (max-width: 640px) { .cr-who { grid-template-columns: 1fr; } }
.cl-site-in { margin-top: 4px; min-height: 36px; padding: 6px 10px; border-radius: 10px; border: 1px dashed var(--line-strong, #c8c8c8); background: var(--surface); width: 100%; font-size: .88rem; }
.cl-add > .field:first-child, .cl-add .cl-hint { grid-column: 1 / -1; }
.cl-add .cl-hint { margin: -4px 0 0; }
/* redes: Instagram, TikTok y LinkedIn, cada una con su campo (solo el nombre de la cuenta) */
.cl-add > .field { grid-column: 1 / -1; }
.cl-nets { grid-column: 1 / -1; border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.cl-nets legend { padding: 0; margin-bottom: 6px; font-weight: 500; font-size: .92rem; }
.cl-net { display: flex; align-items: center; min-height: 48px; min-width: 0; border: 1px solid var(--line-strong, #d6d6d6); border-radius: 12px; background: var(--surface); overflow: hidden; cursor: text; }
.cl-net:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.cl-net-n { flex: none; align-self: stretch; display: grid; place-items: center; padding: 0 10px; font-size: .84rem; font-weight: 600; background: var(--surface-2, transparent); border-right: 1px solid var(--line); }
.cl-net .cl-at { padding-left: 10px; color: var(--muted); }
.cl-net input { flex: 1; min-width: 0; width: 100%; border: 0 !important; box-shadow: none !important; background: transparent; padding: 0 10px 0 2px; min-height: 46px; outline: none; font: inherit; }
@media (max-width: 640px) { .cl-nets { grid-template-columns: 1fr; } .cl-net-n { width: 92px; place-items: center start; } }

/* ---------- sesión activa: botón de cuenta en la barra y "Mi cuenta" ---------- */
.acct-btn { display: none; }
html.ava-acct .acct-btn { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--lime); color: #0d0d0d; font-weight: 700; text-decoration: none; margin-left: 10px; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px rgb(13 13 13 / .12); }
html.ava-acct .acct-btn:hover { transform: scale(1.05); }
@media (max-width: 900px) { html.ava-acct .acct-btn { display: none; } }
/* "Ingresar" en la barra de escritorio cuando no hay sesión */
.nav-login { display: none; }
@media (min-width: 901px) { html:not(.ava-acct) .nav-login { display: inline-flex; align-items: center; padding: 0 12px; min-height: 38px; color: var(--fg); font-weight: 600; text-decoration: none; } html:not(.ava-acct) .nav-login:hover { text-decoration: underline; } }
/* pestaña Perfil (a la derecha, como en las apps): ícono e "Ingresar" sin sesión; inicial y "Perfil" con sesión */
.tab-acct .t-pf, .tab-acct .tab-ini { display: none; }
html.ava-acct .tab-acct .t-in, html.ava-acct .tab-acct .tab-ico { display: none; }
html.ava-acct .tab-acct .t-pf { display: inline; }
html.ava-acct .tab-acct .tab-ini { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--lime); color: #0d0d0d; font-size: .72rem; font-weight: 700; }
.tab-acct .tab-ico { display: grid; place-items: center; }
.tab-acct .tab-ico svg { width: 24px; height: 24px; }
.acct-head { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.acct-head .large-title { margin: 0; }
.acct-head p { margin: 4px 0 0; }
.acct-av { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: #0d0d0d; font-weight: 700; font-size: 1.4rem; flex: none; }
.acct-ok { color: var(--good, #1a7f37); font-weight: 600; }
.acct-sec { margin-bottom: 28px; }
.acct-sec h2 { font-size: 1.15rem; margin: 0 0 12px; }
.acct-sec-h { display: flex; align-items: baseline; gap: 8px; }
.acct-empty { padding: 18px; border: 1px dashed var(--line-strong, #d6d6d6); border-radius: 16px; display: grid; gap: 10px; justify-items: start; }
.acct-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.acct-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--card-bg, var(--surface)); }
.acct-row-t { display: grid; gap: 6px; min-width: 0; }
.acct-row-top { display: flex; justify-content: space-between; gap: 10px; }
.acct-prev { margin: 0; color: var(--muted); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.acct-meta .chip { font-size: .75rem; }
.acct-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.acct-links { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.acct-links li + li { border-top: 1px solid var(--line); }
.acct-links a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; min-height: 52px; color: var(--fg); text-decoration: none; }
.acct-links a:hover { background: var(--surface-2, transparent); }
.acct-links a::after { content: "›"; color: var(--muted); margin-left: 8px; }
.acct-links a span:first-child { font-weight: 500; }
.acct-links a .muted { margin-left: auto; font-size: .85rem; }
.acct-out { color: var(--bad, #c62828); }
.nav .nav-login { display: none; }
@media (min-width: 901px) {
  html:not(.ava-acct) .nav .nav-login { display: inline-flex; color: var(--fg); font-weight: 600; }
  .topbar .wrap { flex-wrap: nowrap; }
}
html.ava-acct .nav .nav-login { display: none !important; }
@media (min-width: 901px) {
  html.ava-acct .topbar .acct-btn { grid-row: 1; grid-column: 3; justify-self: end; align-self: center; margin-left: 0; }
  html.ava-acct .topbar .top-cta { grid-row: 1; grid-column: 3; justify-self: end; margin-right: 50px; }
}
.top-cta, .nav a.cta { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1100px) { .nav a { padding-inline: 10px; } }
@media (min-width: 901px) and (max-width: 1040px) { html.ava-acct .nav a[href*="metodologia"] { display: none; } }

/* =========================================================
   Ficha simple: reseña destacada, garantía de respuesta y subsecciones
   ========================================================= */
.pf-hl { margin: 0 0 12px; padding: 16px 18px; border-radius: 18px; background: var(--card-bg, var(--surface)); border: 1px solid var(--line); }
.pf-hl blockquote { margin: 0 0 8px; font-size: 1.02rem; line-height: 1.5; }
.pf-hl figcaption { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .85rem; color: var(--muted); }
.pf-guar { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 12px 14px; border-radius: 14px; background: rgb(204 255 53 / .22); font-size: .9rem; line-height: 1.45; }
.pf-guar-i { font-size: 1.1rem; line-height: 1.2; }
.pf-sub { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.pf-sub .h-sm { margin-top: 0; }
.h-xs { font-size: .85rem; color: var(--muted); font-weight: 600; margin: 10px 0 6px; }
.pf-more > summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 6px; min-height: 40px; }
.pf-more > summary::-webkit-details-marker { display: none; }
.pf-more > summary::after { content: "›"; margin-left: auto; transition: transform .2s; color: var(--muted); }
.pf-more[open] > summary::after { transform: rotate(90deg); }
.pf-more small { color: var(--muted); font-weight: 400; }
.pc-resp { font-size: .82rem; color: var(--muted); margin: 6px 0 0; }
/* Pedir presupuesto: sumar proveedores parecidos y opción de proyecto abierto */
.ct-more { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.ct-more legend { font-weight: 600; font-size: .92rem; margin-bottom: 6px; padding: 0; }
.ct-more legend small { color: var(--muted); font-weight: 400; }
.ct-alt { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; }
.ct-alt:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.ct-alt input { width: 20px; height: 20px; accent-color: var(--primary); }
.ct-alt .avatar { width: 34px; height: 34px; font-size: .75rem; }
.ct-alt span { display: grid; min-width: 0; }
.ct-alt small { color: var(--muted); font-size: .8rem; }
.ct-open { font-size: .88rem; color: var(--muted); margin: 4px 0 0; }

/* =========================================================
   Mensajes: avisos + conversaciones
   ========================================================= */
.msgs .large-title { margin-bottom: 20px; }
.nf-list, .th-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nf { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card-bg, var(--surface)); }
.nf.is-new { border-color: var(--lime); box-shadow: inset 3px 0 0 var(--lime); }
.nf p { margin: 2px 0 8px; font-size: .92rem; line-height: 1.4; }
.nf-act { display: flex; gap: 6px; flex-wrap: wrap; }
.nf-t { font-size: .78rem; white-space: nowrap; }
.th { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card-bg, var(--surface)); text-align: left; font: inherit; color: var(--fg); cursor: pointer; }
.th:hover { border-color: var(--line-strong, #ccc); }
.th-t { display: grid; gap: 2px; min-width: 0; }
.th-top { display: flex; justify-content: space-between; gap: 8px; }
.th-top .muted { font-size: .78rem; white-space: nowrap; }
.th-ctx { color: var(--muted); font-size: .78rem; }
.th-prev { color: var(--muted); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th.is-unread .th-prev { color: var(--fg); font-weight: 600; }
.th-dot { min-width: 22px; height: 22px; border-radius: 99px; background: var(--bad, #e5374d); color: #fff; font-size: .75rem; font-weight: 700; display: grid; place-items: center; padding: 0 6px; }
.msgs-demo { margin-top: 18px; }
/* preferencias de avisos */
.acct-note { font-size: .88rem; margin: -4px 0 10px; }
.acct-toggles li { padding: 0; }
.tg { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; min-height: 56px; cursor: pointer; }
.tg span { display: grid; }
.tg small { color: var(--muted); font-size: .82rem; }
.tg input { appearance: none; -webkit-appearance: none; width: 46px; height: 28px; border-radius: 99px; background: var(--line-strong, #ccc); position: relative; flex: none; cursor: pointer; transition: background .2s; }
.tg input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .2s var(--ease-spring, ease); }
.tg input:checked { background: var(--good, #1a7f37); }
.tg input:checked::after { transform: translateX(18px); }
.acct-wa { margin: 0 16px 14px; width: calc(100% - 32px); min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-strong, #d6d6d6); border-radius: 12px; background: var(--surface); }

/* =========================================================
   Listas de guardados y búsquedas con alerta
   ========================================================= */
.ls-tabs { margin-bottom: 14px; }
.ls-tabs .pill .num { color: var(--muted); font-weight: 500; margin-left: 4px; }
.ls-pick { display: grid; gap: 8px; }
.ls-opt { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; }
.ls-opt:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.ls-opt input { width: 20px; height: 20px; accent-color: var(--primary); }
.ls-opt span { display: grid; }
.ls-opt small { color: var(--muted); font-size: .8rem; }
.ls-new { display: flex; gap: 8px; margin-top: 10px; }
.ls-new input { flex: 1; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-strong, #d6d6d6); border-radius: 12px; background: var(--surface); }
.saved-item .td-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.ss-btn { display: inline-flex; align-items: center; gap: 6px; margin: -4px 0 12px; padding: 0 12px; min-height: 36px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--fg); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.ss-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ss-btn[aria-pressed="true"] { background: var(--ink, #0d0d0d); color: #fff; border-color: transparent; }
.ss-row { display: flex; align-items: center; }
.ss-go { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; min-height: 52px; background: none; border: 0; font: inherit; color: var(--fg); text-align: left; cursor: pointer; min-width: 0; }
.ss-go > span:first-child { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-new { color: var(--good, #1a7f37); }
.ss-row .row-x { margin-right: 10px; }
.toast-link { color: var(--lime) !important; font-weight: 600; padding: 0; min-height: 0; }

/* =========================================================
   Alta en 2 pasos y panel con avance y resumen semanal
   ========================================================= */
.is-hidden { display: none !important; }
.two.one { grid-template-columns: 1fr; }
.pf-checks li { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.pf-checks li > span { display: grid; }
.pf-checks .btn { flex: none; }
.wk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.wk-grid > div { display: grid; gap: 2px; padding: 14px; border-radius: 14px; background: var(--surface-2, var(--surface)); border: 1px solid var(--line); }
.wk-grid b { font-size: 1.6rem; font-family: var(--font-display); line-height: 1.1; }
.wk-grid span { color: var(--muted); font-size: .82rem; line-height: 1.35; }
.wk-next { margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: rgb(204 255 53 / .22); font-size: .9rem; }
@media (max-width: 640px) { .wk-grid { grid-template-columns: 1fr; } .wk-grid > div { grid-template-columns: auto 1fr; align-items: baseline; gap: 10px; } }
/* cabecera de resultados: el título se corta en líneas y nunca pisa al selector de orden */
.res-head.compact { align-items: flex-start; }
.res-head.compact .large-title { white-space: normal; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; line-height: 1.25; padding-top: 6px; }
.res-head.compact .sort { flex: 0 0 auto; position: static; display: flex; align-items: center; }
.res-head.compact .sort select { width: auto !important; max-width: 150px; flex: none; position: static; }