/* Fontes servidas daqui (auditoria premium: o CSS do Google bloqueava a 1ª pintura em ~0,9 s no 4G). font-display: swap. */
/* DM Sans · latin-ext (self-host, OFL) */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fuentes/dm-sans-latin-ext-33d679.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans · latin (self-host, OFL) */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fuentes/dm-sans-latin-b9df62.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans · latin-ext (self-host, OFL) */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fuentes/dm-sans-latin-ext-33d679.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans · latin (self-host, OFL) */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fuentes/dm-sans-latin-b9df62.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans · latin-ext (self-host, OFL) */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fuentes/dm-sans-latin-ext-33d679.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans · latin (self-host, OFL) */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fuentes/dm-sans-latin-b9df62.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* DM Sans · latin-ext (self-host, OFL) */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fuentes/dm-sans-latin-ext-33d679.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans · latin (self-host, OFL) */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fuentes/dm-sans-latin-b9df62.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces · latin-ext (self-host, OFL) */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fuentes/fraunces-latin-ext-1fba8b.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces · latin (self-host, OFL) */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fuentes/fraunces-latin-63f165.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces · latin-ext (self-host, OFL) */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fuentes/fraunces-latin-ext-1fba8b.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces · latin (self-host, OFL) */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fuentes/fraunces-latin-63f165.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces · latin-ext (self-host, OFL) */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fuentes/fraunces-latin-ext-1fba8b.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces · latin (self-host, OFL) */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fuentes/fraunces-latin-63f165.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* plataforma-manu — «premium elite», claro (Vini, 28/09/2026; alinhado à R5 do cérebro da Manu: nada de painel escuro).
   Fundo claro quente puxado para o rosado do logo do CS, tinta berinjela, roxo da marca só em ação e seleção.
   Títulos em Fraunces (a serifada já aprovada pelo Vini no «The Launch Report»; não é Didone), texto em DM Sans. */
:root {
  color-scheme: light;
  --bg: oklch(0.975 0.006 35);
  --bg-2: oklch(0.958 0.009 35);
  --surface: oklch(0.997 0.002 35);
  --surface-2: oklch(0.965 0.007 35);
  --ink: oklch(0.21 0.025 305);
  --ink-2: oklch(0.36 0.022 305);
  --muted: oklch(0.49 0.02 305);
  --line: oklch(0.915 0.008 35);
  --line-2: oklch(0.86 0.011 35);
  --brand: oklch(0.49 0.19 295);
  --brand-hover: oklch(0.44 0.19 295);
  --brand-ink: oklch(0.43 0.17 295);
  --brand-soft: oklch(0.955 0.025 295);
  --gold: oklch(0.72 0.14 75);
  --var-bg: oklch(0.962 0.026 62);       /* espaço adaptável: cobre claro */
  --var-line: oklch(0.86 0.05 60);
  --var-ink: oklch(0.44 0.1 50);
  --ok: oklch(0.44 0.1 155);  --ok-soft: oklch(0.955 0.03 155);
  --warn: oklch(0.42 0.08 70); --warn-soft: oklch(0.965 0.03 85);
  --err: oklch(0.47 0.15 25);  --err-soft: oklch(0.962 0.02 25);
  --shadow-1: 0 1px 2px oklch(0.21 0.025 305 / .05);
  --shadow-2: 0 1px 2px oklch(0.21 0.025 305 / .05), 0 4px 8px oklch(0.21 0.025 305 / .05);
  --r-sm: 8px; --r: 12px; --r-lg: 16px;
  --f-ui: 'DM Sans', -apple-system, 'Segoe UI', sans-serif;
  --f-display: 'Fraunces', Georgia, serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;
  --z-sticky: 10; --z-nav: 20; --z-sheet: 30; --z-toast: 40;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: hidden; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--f-ui); min-height: 100dvh; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--brand-ink); }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 8px; }
svg.i { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 20px;
  border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 600; font-size: 15px;
  cursor: pointer; text-decoration: none; color: var(--ink); box-shadow: var(--shadow-1);
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease); }
.btn:hover { border-color: var(--ink-2); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: default; transform: none; box-shadow: none; }
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.btn-primary:hover { background: oklch(0.3 0.03 305); border-color: oklch(0.3 0.03 305); }
.btn-brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-brand:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.btn-soft { background: var(--brand-soft); border-color: transparent; color: var(--brand-ink); box-shadow: none; }
.btn-soft:hover { border-color: var(--brand); }
.btn-on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-ink); }
.btn-block { width: 100%; }
.btn-link { background: none; border: 0; padding: 6px 2px; min-height: 0; color: var(--brand-ink); font-weight: 600; cursor: pointer; }
.btn-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- carregando ---------- */
.cargando { min-height: 100dvh; display: grid; place-items: center; }
.punto { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--brand); animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- entrar ---------- */
.entrar { min-height: 100dvh; display: grid; place-items: center; padding: 40px 20px 56px;
  background: radial-gradient(90% 60% at 50% 0%, oklch(0.955 0.025 20), transparent 70%), var(--bg); }
.entrar-caja { width: 100%; max-width: 420px; }
.entrar-logo { display: block; width: 200px; height: auto; margin: 0 auto 36px; }
.entrar h1 { font-family: var(--f-display); font-weight: 500; font-size: 40px; line-height: 1.05; letter-spacing: -0.02em; text-align: center; }
.entrar .sub { color: var(--muted); text-align: center; margin: 14px 0 30px; }
.form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-2); }
.campo { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--ink-2); }
.input { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface);
  font-size: 16px; outline: none; transition: border-color .15s, box-shadow .15s; }
.input::placeholder { color: oklch(0.56 0.015 305); }
.input:hover { border-color: oklch(0.78 0.012 35); }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in oklch, var(--brand) 14%, transparent); }
.input-codigo { font-family: var(--f-mono); font-size: 26px; letter-spacing: .5em; text-align: center; padding-left: .5em; }
.form .btn { margin-top: 14px; }
.nota { font-size: 14px; color: var(--muted); margin: 20px 4px 0; text-align: center; }
.aviso { border-radius: var(--r); padding: 12px 14px; font-size: 14px; margin-top: 14px; }
.aviso-err { background: var(--err-soft); color: var(--err); border: 1px solid oklch(0.88 0.05 25); }
.aviso-ok { background: var(--ok-soft); color: var(--ok); }
.aviso-local { background: var(--warn-soft); color: var(--warn); font-family: var(--f-mono); font-size: 12.5px; border: 1px solid oklch(0.88 0.05 85); }

/* ---------- casca ---------- */
.app { display: grid; grid-template-columns: 1fr; min-height: 100dvh; }
.app > div, main, .detalle > *, .inicio-grid > * { min-width: 0; }
.lado { display: none; }
.topo { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); background: color-mix(in oklch, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.3) blur(12px); border-bottom: 1px solid var(--line); }
.topo img { height: 30px; width: auto; }
.chip-nicho { display: inline-flex; align-items: center; gap: 6px; max-width: 60vw; min-height: 38px; padding: 6px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line-2); font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-1);
  transition: border-color .15s; }
.chip-nicho:hover { border-color: var(--brand); }
.chip-nicho span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-nicho svg.i { width: 16px; height: 16px; color: var(--brand); }
main { padding: 24px 16px 116px; max-width: 1040px; width: 100%; margin: 0 auto; }
.nav-abajo { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav); display: grid; grid-template-columns: repeat(4, 1fr);
  background: color-mix(in oklch, var(--surface) 94%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom); }
.nav-abajo a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px 10px; font-size: 12px; font-weight: 600;
  color: var(--muted); text-decoration: none; }
.nav-abajo a[aria-current="page"] { color: var(--brand-ink); }
.nav-abajo a[aria-current="page"] svg.i { stroke-width: 2; }

@media (min-width: 920px) {
  .app { grid-template-columns: 256px 1fr; }
  .topo, .nav-abajo { display: none; }
  .lado { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100dvh; padding: 28px 18px;
    background: var(--bg-2); border-right: 1px solid var(--line); }
  .lado img { width: 164px; height: auto; margin: 0 8px 30px; }
  .lado nav { display: flex; flex-direction: column; gap: 2px; }
  .lado nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r); color: var(--ink-2);
    text-decoration: none; font-weight: 600; font-size: 15px; transition: background .15s, color .15s; }
  .lado nav a:hover { background: var(--surface); color: var(--ink); }
  .lado nav a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-2); }
  .lado nav a[aria-current="page"] svg.i { color: var(--brand); }
  .lado .pie { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
  .lado .chip-nicho { max-width: 100%; justify-content: flex-start; }
  main { padding: 56px 56px 72px; }
}

/* ---------- cabeçalho ---------- */
.cab { margin-bottom: 28px; }
.cab h1 { font-family: var(--f-display); font-weight: 500; font-size: 34px; line-height: 1.08; letter-spacing: -0.02em; }
.cab p { color: var(--muted); margin: 10px 0 0; max-width: 62ch; font-size: 16.5px; }
@media (min-width: 920px) { .cab h1 { font-size: 46px; } }
.etiqueta { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--brand-soft); color: var(--brand-ink); white-space: nowrap; }
.etiqueta svg.i { width: 14px; height: 14px; }
.etiqueta-hot { background: var(--brand-soft); color: var(--brand-ink); }
.etiqueta-gris { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.etiqueta-ok { background: var(--ok-soft); color: var(--ok); }
.banda { display: flex; gap: 10px; align-items: flex-start; background: var(--warn-soft); color: var(--warn); border: 1px solid oklch(0.88 0.05 85);
  border-radius: var(--r); padding: 12px 14px; font-size: 14.5px; margin-bottom: 20px; }

/* ---------- início ---------- */
.inicio-grid { display: grid; gap: 18px; }
@media (min-width: 760px) { .inicio-grid { grid-template-columns: 1.35fr 1fr; } }
.bloque { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-2); }
.bloque h2 { font-size: 18px; font-weight: 700; }
.bloque-365 { display: flex; flex-direction: column; gap: 16px; padding: 28px; text-decoration: none; color: var(--ink);
  background: radial-gradient(120% 90% at 100% 0%, oklch(0.95 0.035 20), transparent 60%), var(--surface); transition: border-color .2s; }
.bloque-365:hover { border-color: var(--line-2); }
.bloque-365 h2 { font-family: var(--f-display); font-weight: 500; font-size: 32px; letter-spacing: -0.02em; line-height: 1.1; }
.bloque-365 p { color: var(--ink-2); margin: 0; max-width: 46ch; }
.barra { height: 6px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--brand); border-radius: inherit; transform-origin: left; transition: transform .5s var(--ease); }
.cifras { display: flex; gap: 28px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.cifras b { color: var(--ink); font-family: var(--f-display); font-size: 26px; font-weight: 500; display: block; line-height: 1.1; }

/* ---------- 365 ---------- */
.filtros { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.buscar { position: relative; }
.buscar svg.i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.buscar .input { padding-left: 44px; min-height: 48px; box-shadow: var(--shadow-1); }
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 16px; margin: 0 -16px; }
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 920px) { .chips { margin: 0; padding: 2px 0; flex-wrap: wrap; } }
.chip { flex: none; min-height: 38px; padding: 6px 15px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface);
  font-size: 14px; font-weight: 600; cursor: pointer; color: var(--ink-2); transition: border-color .15s, background .15s, color .15s; }
.chip:hover { border-color: var(--ink-2); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 6px; overflow-x: auto; scrollbar-width: none; }
.pestanas button { border: 0; background: none; padding: 10px 12px; font-weight: 600; font-size: 14.5px; color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; transition: color .15s; }
.pestanas button:hover { color: var(--ink); }
.pestanas button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); }
.pestanas .n { font-size: 12.5px; color: var(--muted); margin-left: 5px; font-variant-numeric: tabular-nums; }
.lista { list-style: none; margin: 0; padding: 0; }
.item { display: flex; gap: 16px; align-items: flex-start; padding: 18px 10px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink);
  border-radius: 10px; transition: background .15s; }
.item:hover { background: var(--surface); }
.item:hover .item-t { color: var(--brand-ink); }
.item-n { font-family: var(--f-mono); font-size: 12.5px; color: var(--muted); width: 32px; flex: none; padding-top: 4px; }
.item-cuerpo { flex: 1; min-width: 0; }
.item-t { font-family: var(--f-display); font-weight: 500; font-size: 19px; line-height: 1.3; transition: color .15s; }
.item-g { color: var(--muted); font-size: 14.5px; margin: 6px 0 10px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.item-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.item-est { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; flex: none; }
.item-est svg.i { width: 18px; height: 18px; }
.estrella-on { color: var(--gold); fill: var(--gold); }
.vacio { text-align: center; padding: 56px 16px; color: var(--muted); }
.vacio b { display: block; color: var(--ink); font-family: var(--f-display); font-weight: 500; font-size: 21px; margin-bottom: 6px; }

/* ---------- guion ---------- */
.volver { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14.5px; margin-bottom: 18px; }
.volver:hover { color: var(--ink); }
.detalle { display: grid; gap: 20px; align-items: start; }
@media (min-width: 1000px) { .detalle.con-adaptado { grid-template-columns: 1fr 1fr; } }
.guion { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 22px; box-shadow: var(--shadow-2); }
@media (min-width: 700px) { .guion { padding: 32px 30px; } }
.guion h2 { font-family: var(--f-display); font-weight: 500; font-size: 30px; line-height: 1.12; letter-spacing: -0.02em; margin: 14px 0 10px; }
.guion h2 .num { font-family: var(--f-mono); font-size: .45em; color: var(--muted); vertical-align: middle; font-weight: 400; letter-spacing: 0; margin-right: 4px; }
.guion h3 { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .06em; margin: 26px 0 10px; }
.guion ol { margin: 0; padding-left: 22px; }
.guion li { margin: 0 0 12px; padding-left: 4px; }
.guion li::marker { font-family: var(--f-mono); color: var(--brand-ink); font-size: 13px; }
.como { color: var(--muted); margin: 0 0 4px; font-size: 14.5px; }
.escena { margin: 0; }
.hueco { display: inline-block; background: var(--var-bg); color: var(--var-ink); border: 1px solid var(--var-line); border-radius: 6px;
  padding: 0 7px; font-family: var(--f-mono); font-size: .82em; line-height: 1.55; white-space: nowrap; }
.hueco-yo { background: var(--brand-soft); color: var(--brand-ink); border-color: oklch(0.85 0.06 295); }
.guion h2 .hueco, .item-t .hueco { font-size: .62em; vertical-align: 3px; }
.instr { color: var(--muted); font-size: .88em; margin-left: 4px; }
.accion { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; font-weight: 600; margin: 0; }
.nota-grab { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
.nota-grab summary { cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--ink-2); min-height: 32px; }
.nota-grab summary:hover { color: var(--ink); }
.nota-grab p { color: var(--ink-2); font-size: 15px; margin: 8px 0 0; }
.acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.acciones .btn-brand { flex: 1 1 220px; }
.adaptado { border-color: oklch(0.82 0.08 295); background: linear-gradient(180deg, oklch(0.985 0.012 295), var(--surface) 140px); }
.adaptado .cab-ad { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cuota { font-size: 13px; color: var(--muted); }
.esqueleto { display: grid; gap: 12px; margin-top: 22px; }
.esqueleto i { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2));
  background-size: 200% 100%; animation: brillo 1.3s linear infinite; }
@keyframes brillo { to { background-position: -200% 0; } }

/* ---------- selector de nicho ---------- */
.hoja { position: fixed; inset: 0; z-index: var(--z-sheet); display: flex; align-items: flex-end; justify-content: center; background: oklch(0.21 0.025 305 / .32); }
.hoja-caja { background: var(--surface); width: 100%; max-width: 660px; max-height: 88dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; display: flex; flex-direction: column;
  box-shadow: 0 -2px 8px oklch(0.21 0.025 305 / .08); animation: sube .28s var(--ease); }
@media (min-width: 700px) { .hoja { align-items: center; } .hoja-caja { border-radius: var(--r-lg); max-height: 80dvh; } }
@keyframes sube { from { transform: translateY(20px); opacity: 0; } }
.hoja-cab { padding: 24px 22px 14px; border-bottom: 1px solid var(--line); }
.hoja-cab h2 { font-family: var(--f-display); font-weight: 500; font-size: 28px; letter-spacing: -0.02em; }
.hoja-cab p { color: var(--muted); margin: 6px 0 14px; font-size: 14.5px; }
.hoja-lista { overflow-y: auto; padding: 6px 22px 22px; }
.grupo h3 { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; margin: 18px 0 10px; }
.opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.opcion { min-height: 42px; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); cursor: pointer; font-size: 14.5px;
  transition: border-color .15s, background .15s; }
.opcion:hover { border-color: var(--ink-2); }
.opcion[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.hoja-pie { padding: 14px 22px; padding-bottom: max(14px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; gap: 10px; }
.hoja-pie .btn-primary { flex: 1; }

/* ---------- panel ---------- */
.metricas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-2); }
.metrica { background: var(--surface); padding: 18px 16px; }
.metrica small { color: var(--muted); font-size: 13px; font-weight: 600; display: block; }
.metrica b { font-family: var(--f-display); font-weight: 500; font-size: 30px; color: var(--ink); }
.grafico { margin-top: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-2); }
.grafico .barras { display: flex; align-items: flex-end; gap: 10px; height: 140px; margin-top: 14px; }
.grafico .barras i { flex: 1; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px 6px 0 0; }
.grafico .dias { display: flex; gap: 10px; font-size: 12px; color: var(--muted); margin-top: 6px; }
.grafico .dias span { flex: 1; text-align: center; }
.pronto { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 20px; }

.toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: var(--z-toast); background: var(--ink); color: var(--surface);
  padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow-2); animation: sube .25s var(--ease); }
@media (min-width: 920px) { .toast { bottom: 32px; } }

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

/* selector de nicho com 400+ itens */
.indice { margin-top: 12px; }
.hoja-lista .grupo h3 { position: sticky; top: 0; z-index: 1; background: var(--surface); margin: 0; padding: 14px 0 8px; }
.opcion-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; min-height: 52px;
  padding: 10px 12px; margin: 0 -12px; width: calc(100% + 24px); border: 0; border-radius: 10px; background: none; cursor: pointer; transition: background .12s; }
.opcion-fila:hover { background: var(--surface-2); }
.opcion-fila b { display: block; font-weight: 600; font-size: 15.5px; }
.opcion-fila small { display: block; color: var(--muted); font-size: 13px; line-height: 1.4; }
.opcion-fila .marca { color: var(--brand); opacity: 0; }
.opcion-fila[aria-pressed="true"] { background: var(--brand-soft); }
.opcion-fila[aria-pressed="true"] .marca { opacity: 1; }
#libre { padding: 8px 0 4px; }
.hoja-lista .vacio { padding: 28px 8px; }
.segmento { display: inline-flex; padding: 4px; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; margin: -8px 0 20px; }
.segmento button { border: 0; background: none; min-height: 38px; padding: 6px 16px; border-radius: 999px; font-weight: 600; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.segmento button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-2); }
.fila-filtros { display: flex; gap: 10px; flex-wrap: wrap; }
.sel { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.sel select { min-height: 40px; padding: 6px 34px 6px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface);
  color: var(--ink); font-weight: 600; font-size: 14px; max-width: 70vw; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.sel select:hover { border-color: var(--ink-2); }
.hueco-largo { white-space: normal; display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.fila-filtros { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fila-filtros:has(> :only-child) { grid-template-columns: 1fr; }
.sel select { width: 100%; max-width: none; }
@media (min-width: 920px) { .fila-filtros { display: flex; } .sel select { width: auto; min-width: 220px; } }
.detalle:not(.con-adaptado) .guion { max-width: 820px; }
.guion h3 .instr { letter-spacing: 0; font-weight: 400; font-size: 13px; }

/* ---------- bienvenida / Instagram ---------- */
.bienvenida .entrar-caja { animation: sube .35s var(--ease); }
.bienvenida h1 { margin-top: 4px; }
.arroba { position: relative; }
.arroba span { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); font-weight: 600; }
.arroba .input { padding-left: 34px; }
.tarjeta-ig { display: flex; flex-direction: column; gap: 14px; }
.perfil { display: flex; align-items: center; gap: 14px; }
.avatar { width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--f-display); font-size: 24px;
  color: var(--brand-ink); background: radial-gradient(circle at 30% 20%, oklch(0.97 0.03 20), var(--brand-soft)); border: 1px solid oklch(0.87 0.05 295); }
.perfil-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.perfil-txt b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perfil-txt span { color: var(--muted); font-size: 14px; }
.perfil-num, .metricas-fila { display: flex; gap: 26px; font-size: 13px; color: var(--muted); }
.perfil-num b, .metricas-fila b { display: block; font-family: var(--f-display); font-weight: 500; font-size: 24px; color: var(--ink); line-height: 1.1; }
.perfil-bio { margin: 0; color: var(--ink-2); font-size: 15px; }
.tarjeta-ig .btn { margin-top: 4px; }
.fila-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.fila-form .arroba { flex: 1 1 220px; }
.vacio-panel h2 { font-family: var(--f-display); font-weight: 500; font-size: 26px; }
.vacio-panel p { color: var(--muted); margin: 8px 0 0; }
.panel-cab { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.titular { font-family: var(--f-display); font-size: 26px; line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
.titular b { font-weight: 600; color: var(--brand-ink); }
.titular .pct { font-family: var(--f-ui); font-size: 16px; color: var(--muted); }
.grafico-b { margin-bottom: 16px; }
.cab-graf { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.segmento.chico { margin: 0; }
.segmento.chico button { min-height: 34px; padding: 4px 12px; font-size: 13px; }
svg.linea { width: 100%; height: 140px; display: block; overflow: visible; }
svg.linea .area { fill: color-mix(in oklch, var(--brand) 10%, transparent); }
svg.linea .traco { fill: none; stroke: var(--brand); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
svg.linea .ponto { fill: var(--surface); stroke: var(--brand); stroke-width: 2; vector-effect: non-scaling-stroke; }
.grafico-b .dias { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 6px; }
.posts { list-style: none; margin: 10px 0 0; padding: 0; }
.posts li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.posts li:first-child { border-top: 0; }
.post-tipo { font-weight: 600; font-size: 14.5px; }
.post-num { color: var(--muted); font-size: 13.5px; grid-column: 1; }
.posts a { grid-row: span 2; grid-column: 2; color: var(--muted); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; }
.posts a:hover { background: var(--surface-2); color: var(--ink); }
.hoja-pie a.btn { flex: 1; }

/* ---------- premissa Apple (cérebro 24): alvos ≥ 44 px, corpo ≥ 17 px no celular, 2 famílias, 1 cor = 1 sentido ---------- */
:root { --f-mono: 'DM Sans', -apple-system, sans-serif; }
.item-n, .cuota, .guion li::marker, .input-codigo { font-variant-numeric: tabular-nums; }
.hueco { font-family: var(--f-ui); font-weight: 600; letter-spacing: 0; }
.hueco-yo { background: var(--surface-2); color: var(--ink-2); border: 1px dashed var(--ink-2); }   /* «solo tú/ella»: neutro, não é ação */
@media (max-width: 919px) {
  body { font-size: 17px; }
  .chip, .opcion, .segmento button, .segmento.chico button, .sel select { min-height: 44px; }
  .btn-link { min-height: 44px; padding: 10px 4px; }
  .nav-abajo a { min-height: 56px; }
  .chip-nicho { min-height: 44px; }
}
.toast { display: flex; align-items: center; gap: 14px; }
.toast button { background: none; border: 0; color: oklch(0.85 0.09 295); font-weight: 700; font-size: 14px; cursor: pointer; min-height: 32px; padding: 0 2px; }
.sugerido { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--r); background: var(--brand-soft); }
.sugerido span { font-size: 13.5px; color: var(--ink-2); }
.sugerido b { font-family: var(--f-display); font-weight: 500; font-size: 24px; line-height: 1.2; }

.perfil { flex-wrap: wrap; row-gap: 8px; }
.perfil .etiqueta { flex-basis: auto; }
.tarjeta-ig, .perfil-txt { min-width: 0; max-width: 100%; }
.bienvenida .tarjeta-ig { margin-top: 22px; }
.graf { position: relative; } .ponto-fim { position: absolute; right: -5px; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--surface); border: 2px solid var(--brand); }

/* ---------- folhas (bug 29/09: em janela baixa os chips quebravam em 7 linhas e o rodapé saía da tela) ----------
   A folha nunca passa da altura da janela; cabeçalho e rodapé fixos; só a lista rola; chips numa linha só. */
.hoja { padding: 12px; }
@media (max-width: 699px) { .hoja { padding: 0; } }
.hoja-caja { max-height: calc(100dvh - 24px); overflow: hidden; }
@media (max-width: 699px) { .hoja-caja { max-height: calc(100dvh - 12px); } }
.hoja-cab, .hoja-pie { flex: none; }
.hoja-lista { flex: 1 1 auto; min-height: 96px; position: relative; overscroll-behavior: contain; }
.hoja .chips.indice { flex-wrap: nowrap; overflow-x: auto; margin: 12px -22px 0; padding: 2px 22px 4px; scroll-padding: 22px; }
.hoja .chips.indice .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }
@media (max-height: 760px) {
  .hoja-cab { padding: 16px 22px 10px; }
  .hoja-cab h2 { font-size: 22px; }
  .hoja-cab p { display: none; }
  .hoja-cab .buscar { margin-top: 10px; }
  .hoja-pie { padding-top: 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
}
/* bienvenida em janela baixa: a ação principal tem de caber sem rolar */
@media (max-height: 760px) {
  .entrar { padding-top: 20px; padding-bottom: 20px; }
  .entrar-logo { width: 140px; margin-bottom: 14px; }
  .entrar h1 { font-size: 30px; }
  .entrar .sub { margin: 8px 0 16px; }
  .bienvenida .tarjeta-ig { margin-top: 12px; gap: 10px; }
  .perfil-bio { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}
[hidden] { display: none !important; }   /* .btn usa display:inline-flex, que vencia o atributo hidden */
.hoja-lista .grupo h3 { box-shadow: 0 6px 6px -6px oklch(0.21 0.025 305 / .12); }

/* ---------- 365: «El de hoy» + dois filtros em pergunta ---------- */
.hoy-card { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; margin-bottom: 8px; text-decoration: none; color: var(--ink);
  background: radial-gradient(120% 120% at 100% 0%, oklch(0.95 0.035 20), transparent 60%), var(--surface); }
.hoy-card:hover { border-color: var(--line-2); }
.hoy-eti { font-size: 13px; font-weight: 600; color: var(--brand-ink); }
.hoy-card b { font-family: var(--f-display); font-weight: 500; font-size: 22px; line-height: 1.25; }
.hoy-card .btn { align-self: flex-start; }
.sug-acc { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sug-acc .btn { align-self: auto; }
.o-elige { margin: 22px 0 10px; font-weight: 600; color: var(--ink-2); }
.pregunta { display: flex; flex-direction: column; gap: 8px; }
.preg { font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.chip .n { font-size: 12.5px; color: var(--muted); margin-left: 4px; font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .n { color: oklch(0.85 0.02 305); }
.mas-filtros summary { cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--brand-ink); min-height: 44px; display: flex; align-items: center; }
.mas-filtros .sel { margin-top: 4px; }
.vacio .btn { margin-top: 14px; }
.chip[disabled] { opacity: .45; cursor: default; }
.hueco-corto { font-size: .72em !important; vertical-align: 2px; white-space: nowrap; }

/* ---------- Início: 3 pilares · e-mail diário ---------- */
.inicio-hoy { margin-bottom: 18px; }
.hoy-titulo { color: var(--ink); text-decoration: none; }
.hoy-titulo:hover b { color: var(--brand-ink); }
.pilares { display: grid; gap: 14px; margin-bottom: 18px; }
@media (min-width: 760px) { .pilares { grid-template-columns: repeat(3, 1fr); } }
.pilar { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink); transition: border-color .15s; }
.pilar:hover { border-color: var(--line-2); }
.pilar .ic { width: 42px; height: 42px; border-radius: var(--r); display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); margin-bottom: 6px; }
.pilar b { font-family: var(--f-display); font-weight: 500; font-size: 22px; }
.pilar > span:last-child { color: var(--ink-2); font-size: 15px; }
.dica { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); }
.nav-abajo { grid-template-columns: repeat(5, 1fr); }
.nav-abajo a { font-size: 11.5px; padding-left: 2px; padding-right: 2px; }
@media (max-width: 759px) {
  .pilar { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; row-gap: 2px; align-items: center; padding: 16px 18px; }
  .pilar .ic { grid-row: span 2; margin: 0; }
  .pilar b { font-size: 19px; }
  .pilar > span:last-child { font-size: 14.5px; }
}


/* =====================================================================================================
   PASSADA PREMIUM (29/09/2026) — premissa Apple (cérebro 24). Sistema: espaço em 4/8 px, raio 8 · 12 · 16 · pílula,
   sombra em 2 degraus (tokens), 1 acento (roxo = ação/seleção), cobre = espaço a preencher, verde = feito.
   Sem dark mode: a marca da Manu é clara (R5); o `color-scheme: light` impede a página de quebrar com o sistema escuro.
   ===================================================================================================== */
:root {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --r-pill: 999px;
  --shadow-sheet: 0 -2px 8px oklch(0.21 0.025 305 / .08);
  --hl: oklch(0.93 0.07 95);              /* realce da busca: amarelo-marca-texto, como no Notas */
  --dur: .22s;
  --escala: 1;                             /* tamanho do texto do guion (A− / A+), lembrado no aparelho */
}
::selection { background: color-mix(in oklch, var(--brand) 22%, transparent); color: var(--ink); }
@media (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-pill); border: 3px solid var(--bg); }
  ::-webkit-scrollbar-track { background: transparent; }
}
.saltar { position: fixed; left: var(--s3); top: var(--s3); z-index: calc(var(--z-toast) + 1); padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--surface); font-weight: 700; text-decoration: none; transform: translateY(-160%); transition: transform var(--dur) var(--ease); }
.saltar:focus { transform: none; }
main:focus { outline: none; }

/* esqueleto da primeira carga: a forma da tela aparece antes dos dados (item 6) */
.esqueleto-app { max-width: 720px; margin: 0 auto; padding: 0 16px; }
.esqueleto-app > div, .esq { background: linear-gradient(90deg, var(--surface-2), var(--line), var(--surface-2)); background-size: 200% 100%;
  animation: brillo 1.3s linear infinite; border-radius: var(--r); }
.ea-topo { height: 58px; margin: 0 -16px 28px; border-radius: 0 !important; opacity: .6; }
.ea-titulo { height: 40px; width: 62%; margin-bottom: 28px; }
.ea-bloque { height: 180px; margin-bottom: 16px; border-radius: var(--r-lg) !important; }
.ea-corto { height: 96px; }

/* alvos ≥ 44 px em TODO tamanho (antes: 38-40 px no desktop) */
.chip, .opcion, .segmento button, .sel select, .chip-nicho, .btn-link { min-height: 44px; }
.segmento.chico button { min-height: 44px; }
.lado .pie .btn-link { min-height: 44px; }
.volver { min-height: 44px; padding: 0 12px 0 4px; margin-left: -4px; border-radius: var(--r-pill); }
.volver:hover { background: var(--surface-2); }
.nota-grab summary { min-height: 44px; display: flex; align-items: center; }
.hoy-titulo { display: block; padding: 6px 0; min-height: 44px; }

/* estados completos de botão: hover · active (afunda) · focus · carregando (spinner no próprio botão) · feito */
.btn:active, .chip:active, .opcion-fila:active, .item:active, .pilar:active { transform: scale(.985); }
.btn[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
.btn[aria-busy="true"]::after { content: ''; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid currentColor; border-color: color-mix(in oklch, var(--surface) 55%, transparent); border-top-color: var(--surface); animation: gira .8s linear infinite; }
.btn:not(.btn-primary):not(.btn-brand)[aria-busy="true"]::after { border-color: var(--line-2); border-top-color: var(--brand); }
.btn.feito { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }

/* barra de abas: aba ativa com forma (pílula), some ao rolar para baixo e volta ao subir (como o Instagram) */
.nav-abajo { transition: transform var(--dur) var(--ease); }
.nav-oculta .nav-abajo { transform: translateY(calc(100% + 2px)); }
.nav-abajo a { position: relative; }
.nav-abajo a svg.i { position: relative; z-index: 1; }
.nav-abajo a::before { content: ''; position: absolute; top: 5px; left: 50%; width: 52px; height: 30px; margin-left: -26px; border-radius: var(--r-pill);
  background: var(--brand-soft); opacity: 0; transform: scale(.7); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.nav-abajo a[aria-current="page"]::before { opacity: 1; transform: none; }
.nav-abajo a:active svg.i { transform: scale(.9); }
.toast { transition: bottom var(--dur) var(--ease); }
.nav-oculta .toast { bottom: calc(24px + env(safe-area-inset-bottom)); }

/* título grande que encolhe para a barra ao rolar (Ajustes do iPhone) */
.topo { min-height: 58px; }
.topo-titulo { position: absolute; left: 16px; right: 160px; font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); pointer-events: none; }
.topo img { transition: opacity var(--dur) var(--ease); }
.titulo-compacto .topo-titulo { opacity: 1; transform: none; }
.titulo-compacto .topo img { opacity: 0; }

/* transição com direção: avançar entra da direita, voltar entra da esquerda */
@keyframes entraAdelante { from { opacity: 0; transform: translateX(18px); } }
@keyframes entraAtras { from { opacity: 0; transform: translateX(-18px); } }
@keyframes entraSuave { from { opacity: 0; } }
main.entra-adelante { animation: entraAdelante .26s var(--ease); }
main.entra-atras { animation: entraAtras .26s var(--ease); }
main.entra-suave { animation: entraSuave .2s var(--ease); }

/* ---------- entrar: e-mail validado enquanto digita, código em 6 casas, reenviar com contagem ---------- */
.campo-err { color: var(--err); font-size: 14px; margin: 8px 2px 0; }
.campo-dica { color: var(--ink-2); font-size: 14px; margin: 8px 2px 0; }
.input[aria-invalid="true"] { border-color: var(--err); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px color-mix(in oklch, var(--err) 14%, transparent); }
.codigo { position: relative; }
.codigo .input-codigo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; caret-color: transparent; z-index: 1; }
.celdas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.celdas span { height: 58px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface);
  font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; transition: border-color .15s, box-shadow .15s; }
.codigo:focus-within .celdas span.activa { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in oklch, var(--brand) 14%, transparent); }
.codigo:focus-within .celdas span.activa:empty::after { content: ''; width: 2px; height: 26px; background: var(--brand); animation: pisca 1s steps(1) infinite; }
@keyframes pisca { 50% { opacity: 0; } }
.reenviar { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center; margin-top: 18px; }
.reenviar .btn-link[disabled] { color: var(--muted); cursor: default; text-decoration: none; }

/* ---------- lista: realce da busca, «seguir donde quedaste», carregamento por lotes ---------- */
mark.busca { background: var(--hl); color: inherit; border-radius: 3px; padding: 0 1px; }
.seguir { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin: 0 0 16px; min-height: 64px; border: 1px solid var(--line);
  border-radius: var(--r-lg); background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: var(--shadow-1); }
.seguir:hover { border-color: var(--line-2); }
.seguir .ic { width: 40px; height: 40px; border-radius: var(--r); display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); flex: none; }
.seguir small { display: block; color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.seguir b { display: block; font-weight: 600; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seguir > span:nth-child(2) { min-width: 0; flex: 1; }
.seguir .flecha { color: var(--muted); }
.lista .mas { list-style: none; height: 1px; }
.contador-lista { font-size: 13.5px; color: var(--ink-2); margin: 10px 2px 0; }

/* ---------- guion: ferramentas de leitura, teleprompter, anterior/seguinte ---------- */
.guion { font-size: calc(1em * var(--escala)); }
.guion h2 { font-size: calc(30px * var(--escala)); }
.herramientas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 18px -8px 0; padding: 6px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.herramientas button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 56px; padding: 6px 2px;
  border: 0; background: none; border-radius: var(--r); color: var(--ink-2); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.herramientas button:hover { background: var(--surface-2); color: var(--ink); }
.herramientas button[aria-pressed="true"] { color: var(--brand-ink); background: var(--brand-soft); }
.herramientas svg.i { width: 22px; height: 22px; }
.herramientas .aa { font-family: var(--f-display); font-size: 19px; line-height: 22px; height: 22px; color: inherit; }
.herramientas .aa small { font-size: 12px; }
.progreso-usados { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.progreso-usados .barra { flex: 1; max-width: 220px; }
.vecinos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0 0; }
.vecinos a { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; min-height: 64px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); color: var(--ink); text-decoration: none; min-width: 0; }
.vecinos a:hover { border-color: var(--line-2); }
.vecinos small { color: var(--ink-2); font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 4px; }
.vecinos b { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vecinos .sig { text-align: right; align-items: flex-end; }
.vecinos .sig small { flex-direction: row-reverse; }
.vista-guion { display: none; }
@media (max-width: 999px) {
  .vista-guion { display: inline-flex; flex-wrap: wrap; margin: 0 0 14px; }
  .detalle.con-adaptado[data-vista="original"] #ad, .detalle.con-adaptado[data-vista="adaptado"] > article.guion:not(.adaptado) { display: none; }
}
mark.cambio { background: color-mix(in oklch, var(--brand) 9%, transparent); color: inherit; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0 1px; }
.sin-resaltar mark.cambio { background: none; padding: 0; }
.acc-ad { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.acc-ad .btn { min-height: 44px; }
.progreso { height: 6px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; margin-top: 16px; }
.progreso i { display: block; height: 100%; width: 100%; background: var(--brand); transform-origin: left; transform: scaleX(0); transition: transform .4s linear; }
.progreso-txt { font-size: 13.5px; color: var(--ink-2); margin-top: 8px; font-variant-numeric: tabular-nums; }

/* modo lectura: some a casca, fica só o texto (Notas / Leitor do Safari) */
.leyendo .topo, .leyendo .nav-abajo, .leyendo .lado, .leyendo .volver, .leyendo .herramientas-extra { display: none !important; }
.leyendo .app { grid-template-columns: 1fr; }
.leyendo main { padding-top: 20px; }
.salir-lectura { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: var(--z-nav); display: none; }
.leyendo .salir-lectura { display: inline-flex; }

/* teleprompter: fundo escuro de propósito (texto claro sobre escuro cansa menos o olho diante da câmera) */
.tp { position: fixed; inset: 0; z-index: var(--z-sheet); background: oklch(0.17 0.02 305); color: oklch(0.97 0.005 305); display: flex; flex-direction: column; }
.tp-barra { display: flex; align-items: center; gap: 8px; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); flex-wrap: wrap;
  background: oklch(0.17 0.02 305 / .92); border-bottom: 1px solid oklch(1 0 0 / .1); position: relative; z-index: 2; }
.tp-barra button { min-width: 44px; min-height: 44px; border-radius: var(--r-pill); border: 1px solid oklch(1 0 0 / .18); background: oklch(1 0 0 / .06);
  color: inherit; font-weight: 700; font-size: 15px; cursor: pointer; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.tp-barra button[aria-pressed="true"] { background: oklch(1 0 0 / .92); color: oklch(0.17 0.02 305); }
.tp-barra .tp-vel { font-size: 13.5px; color: oklch(0.85 0.01 305); min-width: 70px; text-align: center; font-variant-numeric: tabular-nums; }
.tp-barra .espaco { flex: 1; }
.tp-texto { flex: 1; overflow-y: auto; padding: 40vh 7vw 60vh; font-size: calc(34px * var(--tp-escala, 1)); line-height: 1.45; font-weight: 600; scrollbar-width: none; }
.tp-texto::-webkit-scrollbar { display: none; }
.tp-texto h4 { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: oklch(0.72 0.02 305); margin: 1.6em 0 .4em; }
.tp-texto p { margin: 0 0 .6em; }
.tp-texto .hueco { font-size: .8em; background: oklch(1 0 0 / .12); color: inherit; border-color: oklch(1 0 0 / .3); }
.tp-guia { position: absolute; left: 0; right: 0; top: 40%; height: 0; border-top: 2px solid oklch(0.72 0.14 295 / .6); pointer-events: none; z-index: 1; }
.tp-cuenta { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--f-display); font-size: 120px; pointer-events: none; z-index: 3; }
.tp-pausa { position: absolute; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); font-size: 14px; color: oklch(0.85 0.01 305);
  background: oklch(1 0 0 / .08); padding: 8px 14px; border-radius: var(--r-pill); z-index: 2; }

/* folhas: alça para arrastar, X no canto, foco preso dentro */
.hoja-cab { position: relative; }
.hoja-cerrar { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--surface-2); color: var(--ink-2);
  display: grid; place-items: center; cursor: pointer; }
.hoja-cerrar:hover { color: var(--ink); background: var(--line); }
.hoja-cab h2 { padding-right: 52px; }
.hoja-asa { display: none; }
@media (max-width: 699px) {
  .hoja-asa { display: block; width: 40px; height: 5px; border-radius: var(--r-pill); background: var(--line-2); margin: 8px auto 0; }
  .hoja-cab { padding-top: 12px; }
  .hoja-cerrar { top: 16px; }
}
.hoja-caja { transition: transform var(--dur) var(--ease); }
.hoja.arrastando .hoja-caja { transition: none; }

/* convite discreto para instalar (uma vez só) */
.instalar { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; margin: 0 0 18px; border-radius: var(--r-lg); background: var(--brand-soft);
  border: 1px solid oklch(0.88 0.04 295); }
.instalar .ic { flex: none; color: var(--brand-ink); padding-top: 2px; }
.instalar b { display: block; font-size: 15.5px; }
.instalar p { margin: 4px 0 0; font-size: 14.5px; color: var(--ink-2); }
.instalar .fila-form { margin-top: 10px; }
.instalar .cerrar-x { margin-left: auto; flex: none; width: 44px; height: 44px; margin-top: -10px; margin-right: -10px; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; display: grid; place-items: center; }

/* Mi panel: eixo com valores, números que contam */
.grafico-b .ejes { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-2); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.metricas-fila b, .titular b { font-variant-numeric: tabular-nums; }

/* toast: um padrão só — acima da barra, 4 s (6 s com «Deshacer»), botão com 44 px */
.toast { bottom: calc(84px + env(safe-area-inset-bottom)); max-width: calc(100vw - 32px); padding: 6px 8px 6px 18px; min-height: 48px; }
.toast button { min-height: 44px; padding: 0 12px; border-radius: var(--r-pill); }
.toast button:hover { background: oklch(1 0 0 / .08); }

@media (prefers-reduced-motion: reduce) {
  main.entra-adelante, main.entra-atras, main.entra-suave { animation: none; }
  .nav-abajo, .topo-titulo, .hoja-caja { transition: none; }
  .esqueleto-app > div, .esq, .esqueleto i { animation: none; }
}

@media (min-width: 1000px) { .solo-movil { display: none !important; } }

main.entrar { max-width: none; width: 100%; margin: 0; }
.ea-marca { height: 58px; display: flex; align-items: center; margin: 0 -16px 28px; padding: 0 16px; border-bottom: 1px solid var(--line); }
.esqueleto-app > .ea-marca { background: none; animation: none; border-radius: 0; }
.ea-marca img { height: 30px; width: auto; }

/* ---------- olhos frescos (29/09): espaços com frase natural + «¿Qué pongo aquí?» ---------- */
.hueco { white-space: normal; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
button.hueco { font: inherit; font-family: var(--f-ui); font-weight: 600; font-size: .86em; line-height: 1.5; cursor: pointer; margin: 0 1px;
  padding: 0 7px; border-radius: 6px; text-align: left; display: inline; min-height: 0; }
button.hueco::after { content: ' ?'; opacity: .55; font-weight: 700; }
button.hueco:hover { filter: brightness(.97); border-color: var(--var-ink); }
button.hueco-yo { background: var(--surface-2); color: var(--ink-2); border: 1px dashed var(--ink-2); }
button.hueco[aria-expanded="true"] { outline: 2px solid var(--brand); outline-offset: 1px; }
.guion h2 button.hueco { font-size: .6em; vertical-align: 4px; }
.que-pongo { display: flex; flex-direction: column; gap: 4px; margin: 8px 0 14px; padding: 12px 14px; border-radius: var(--r); background: var(--var-bg);
  border: 1px solid var(--var-line); color: var(--ink); font-size: 15px; line-height: 1.5; animation: sube .2s var(--ease); }
.que-pongo b { font-size: 14px; color: var(--var-ink); }
.guion li .que-pongo { margin-left: 0; }

/* barra do guion fora dos artigos: vale nas duas abas (Original / Para …) e age sobre a versão que está na tela */
.barra-guion { margin: 0 0 16px; }
.barra-guion .herramientas { margin: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 4px; box-shadow: var(--shadow-1); }
.herramientas button { text-align: center; line-height: 1.2; }
.herramientas.cuatro { grid-template-columns: repeat(4, 1fr); }
.acciones-guion { margin-top: 18px; }
.acciones-guion .acciones { margin-top: 0; }
.version-nota { font-size: 15px; color: var(--ink-2); margin: 8px 0 0; }
.enlace-compartir { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.enlace-compartir input { flex: 1; min-width: 0; }
.cuenta { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.cuenta .btn { justify-content: flex-start; }
.aviso-primero { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; margin: 0 0 14px; border-radius: var(--r); background: var(--brand-soft);
  color: var(--ink); font-size: 15px; }
.aviso-primero svg.i { color: var(--brand-ink); margin-top: 2px; }
.buscando { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 15px; margin-top: 12px; }
.buscando .punto { width: 18px; height: 18px; }
.offline-lista { list-style: none; padding: 0; margin: 18px 0 0; text-align: left; display: grid; gap: 8px; }
.offline-lista a { display: block; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); text-decoration: none; min-height: 44px; font-weight: 600; }
/* anterior/seguinte: título em até 2 linhas dentro do card (antes vazava e se sobrepunha a 390 px) */
.vecinos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.vecinos b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.vecinos b .hueco { font-size: .82em; }
/* texto secundário ≥ 15 px no celular (antes 12,5-13,5 px) */
@media (max-width: 919px) {
  .instr, .cuota, .dica, .campo-dica, .contador-lista, .progreso-txt, .nota, .como, .seguir small, .perfil-txt span, .posts .post-num { font-size: 15px; }
  .guion h3 .instr { font-size: 15px; }
}
.nota-grab summary { list-style: none; display: flex; align-items: center; gap: 8px; }
.nota-grab summary::-webkit-details-marker { display: none; }
.nota-grab summary::before { content: '›'; font-size: 20px; line-height: 1; transition: transform .15s; color: var(--brand-ink); }
.nota-grab[open] summary::before { transform: rotate(90deg); }

.vista-guion.multi { display: inline-flex; flex-wrap: wrap; margin: 0 0 14px; }

/* espaço é alvo dentro de texto corrido (exceção WCAG 2.5.8); a área de toque cresce para ~44 px sem mexer na linha */
button.hueco { position: relative; }
button.hueco::before { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 44px; margin-top: -22px; }

.tp-grupo { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tp-pausa { background: oklch(0.17 0.02 305 / .92); border: 1px solid oklch(1 0 0 / .15); }

/* aviso do teleprompter: logo abaixo da barra, fora da área de leitura, e some em 2 s */
.tp-pausa { position: static; transform: none; align-self: center; margin: 8px auto 0; flex: none; }
.tp-pausa[hidden] { display: block !important; visibility: hidden; }   /* guarda o lugar: o texto não pula quando o aviso some */
/* nota discreta do método (30/09): ao lado do «Adaptar», sem competir com ele */
.cuota.metodo { margin: 6px 0 0; display: flex; gap: 6px; align-items: center; color: var(--muted); }
.cuota.metodo svg.i { width: 15px; height: 15px; flex: none; }