/* TOPDABA · hoja del sitio.
 *
 * Portada a HTML estático desde el prototipo React de Claude Design
 * (design_handoff_landing/LANDING_SOURCE.md). El prototipo cargaba React 18 +
 * ReactDOM + Babel standalone desde unpkg: medio megabyte de JavaScript para
 * renderizar una página de marketing. Acá el markup es estático y la única
 * interactividad (comparador, tabs, panel, canales) va en landing.js, vanilla.
 *
 * Los tokens salen de design_system/tokens/, que es la fuente de verdad. Se
 * copian con sus valores textuales en vez de encadenar 8 @import.
 *
 * Reglas del brand guide que están respetadas y conviene no romper sin leerlo:
 *   · El sitio es tema PAPER. Las secciones ink llevan la clase .ink.
 *   · El lima es acento ÚNICO, "usado con avaricia". Texto sobre lima siempre
 *     --ink-950, nunca blanco.
 *   · Border-first: profundidad con hairlines de 1px, no con sombras.
 *   · Fondos planos. El único gradiente permitido es .protect, y existe para
 *     que un texto sobreviva encima de una foto.
 *   · Sentence case. Caja alta solo en el wordmark y en eyebrows mono.
 *   · Sin emoji y sin signos de exclamación. Si es número, va en mono tabular.
 */

/* Se pide el eje wdth de Archivo además del wght: el brand guide especifica
   font-stretch 112% en display, y sin ese eje el navegador lo ignora. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..800&family=Instrument+Sans:wght@400..700&family=JetBrains+Mono:wght@400..600&display=swap");

:root{
  --ink-950:#08090B; --ink-900:#0D0F12; --ink-850:#13161A; --ink-800:#1A1E24;
  --ink-700:#242A32; --ink-600:#333B45; --ink-500:#4B5563; --ink-400:#6B7683;
  --ink-300:#98A2AE; --ink-200:#C3CAD2; --ink-100:#E2E6EA;
  --paper-000:#FFFFFF; --paper-050:#FAFAF7; --paper-100:#F3F2EC;
  --paper-200:#E8E7DE; --paper-300:#D8D7CB;
  --signal-300:#D4FF63; --signal-400:#C8FF3D; --signal-500:#B4E82E;
  --signal-600:#94C21C; --signal-700:#5F7F12;
  --lift-400:#2ED18F; --lift-500:#12A97A;
  --drop-400:#FF6369; --drop-500:#E5484D;
  --warn-400:#FFC53D;
  --info-400:#5B8CFF;
  --brand-meta:#0866FF; --brand-shopify:#95BF47;

  --font-display:"Archivo",system-ui,sans-serif;
  --font-sans:"Instrument Sans",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-15:15px;
  --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-24:24px; --fs-30:30px;
  --fs-38:38px; --fs-48:48px; --fs-60:60px; --fs-76:76px;
  --ls-mega:-.035em; --ls-display:-.025em; --ls-heading:-.015em; --ls-caps-wide:.16em;

  --space-4:8px; --space-5:12px; --space-6:16px; --space-7:20px; --space-8:24px;
  --space-9:32px; --space-10:40px; --space-11:56px; --space-12:72px; --space-13:96px;
  --gap-grid:20px; --gap-section:72px; --pad-card:20px; --pad-panel:24px;
  --content-max:1240px; --prose-max:68ch;

  --radius-sm:6px; --radius-md:10px; --radius-control:8px; --radius-button:10px;
  --radius-card:14px; --radius-panel:20px; --radius-2xl:28px; --radius-chip:999px;
  --radius-thumb:10px;

  --shadow-paper-sm:0 1px 2px rgba(13,15,18,.06);
  --shadow-paper-lg:0 24px 60px -20px rgba(13,15,18,.2);
  --shadow-raised:0 8px 24px -8px rgba(0,0,0,.65);
  --glow-signal:0 0 0 1px rgba(200,255,61,.35),0 8px 28px -12px rgba(200,255,61,.5);

  --dur-instant:80ms; --dur-fast:140ms;
  --ease-standard:cubic-bezier(.2,.8,.2,1);
  --press-scale:.985;

  /* alias semánticos · PAPER (el sitio vive acá) */
  --surface-app:var(--paper-050); --surface-card:var(--paper-000);
  --surface-raised:var(--paper-100); --surface-hover:rgba(8,9,11,.04);
  --surface-active:rgba(8,9,11,.07);
  --text-strong:var(--ink-950); --text-body:var(--ink-800); --text-muted:var(--ink-500);
  --text-link:var(--signal-700); --text-link-hover:var(--ink-950);
  --border-subtle:rgba(8,9,11,.08); --border-default:var(--paper-200);
  --border-strong:var(--paper-300);
  --ring-focus:0 0 0 2px var(--surface-app),0 0 0 4px var(--signal-600);
}

/* Secciones ink dentro de una página paper: reencamina los alias, no los
   colores base, así los componentes de adentro no saben en qué tema están. */
.ink{
  --surface-app:var(--ink-950); --surface-card:var(--ink-850);
  --surface-raised:var(--ink-800); --surface-hover:rgba(255,255,255,.05);
  --surface-active:rgba(255,255,255,.09);
  --text-strong:#FFFFFF; --text-body:var(--ink-100); --text-muted:var(--ink-300);
  --text-link:var(--signal-400); --text-link-hover:var(--signal-300);
  --border-subtle:rgba(255,255,255,.08); --border-default:rgba(255,255,255,.14);
  --border-strong:rgba(255,255,255,.24);
  --ring-focus:0 0 0 2px var(--ink-950),0 0 0 4px var(--signal-400);
  background:var(--surface-app); color:var(--text-body);
}

/* ------------------------------------------------------------------ base -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--surface-app);color:var(--text-body);
  font-family:var(--font-sans);font-size:var(--fs-15);line-height:1.55;
  -webkit-font-smoothing:antialiased;text-wrap:pretty;overflow-x:hidden}
p{margin:0}
img{max-width:100%;display:block}
a{color:var(--text-strong);text-decoration:none}
a:hover{color:var(--signal-700)}
.ink a:hover{color:var(--signal-400)}
button{font:inherit}
::selection{background:var(--signal-400);color:var(--ink-950)}
:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:var(--content-max);margin:0 auto;padding:0 var(--space-8)}
@media (max-width:640px){.wrap{padding:0 var(--space-6)}}
.icon{width:1em;height:1em;flex:0 0 auto}

/* ------------------------------------------------------------ tipografía -- */
.display,.h1,.h2,.h3,.h4{font-family:var(--font-display);color:var(--text-strong);margin:0;font-stretch:112%}
.display{font-size:clamp(var(--fs-38),8vw,var(--fs-76));line-height:.98;letter-spacing:var(--ls-mega);font-weight:800}
.h1{font-size:clamp(var(--fs-30),5vw,var(--fs-48));line-height:1.06;letter-spacing:var(--ls-display);font-weight:700}
.h2{font-size:clamp(var(--fs-24),3.4vw,var(--fs-38));line-height:1.1;letter-spacing:var(--ls-display);font-weight:700}
.h3{font-size:var(--fs-20);line-height:1.2;letter-spacing:var(--ls-heading);font-weight:600}
.h4{font-size:var(--fs-18);line-height:1.3;letter-spacing:var(--ls-heading);font-weight:600}
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-11);letter-spacing:var(--ls-caps-wide);
  text-transform:uppercase;font-weight:500;color:var(--text-muted);margin:0}
.eyebrow-signal{color:var(--signal-700)}
.ink .eyebrow-signal{color:var(--signal-400)}
.lede{font-size:var(--fs-18);color:var(--text-muted);max-width:46ch;line-height:1.5}
.small{font-size:var(--fs-13);color:var(--text-muted)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
/* El resaltado lima del hero: una sola vez en la página. */
.mark{background:var(--signal-400);padding:0 .08em;color:var(--ink-950)}

/* --------------------------------------------------------------- botones -- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-4);
  border:1px solid transparent;border-radius:var(--radius-button);
  font-size:var(--fs-15);font-weight:600;cursor:pointer;text-decoration:none;
  height:48px;padding:0 var(--space-8);
  transition:background var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             transform var(--dur-instant) var(--ease-standard)}
.btn-sm{height:38px;padding:0 var(--space-6);font-size:var(--fs-14)}
.btn:active{transform:scale(var(--press-scale))}
.btn-primary{background:var(--signal-400);color:var(--ink-950);box-shadow:var(--glow-signal)}
.btn-primary:hover{background:var(--signal-300);color:var(--ink-950)}
.btn-primary:active{background:var(--signal-500)}
.btn-secondary{background:var(--surface-hover);color:var(--text-strong);border-color:var(--border-default)}
.btn-secondary:hover{background:var(--surface-active);color:var(--text-strong);border-color:var(--border-strong)}
.btn-ghost{background:transparent;color:var(--text-strong)}
.btn-ghost:hover{background:var(--surface-hover);color:var(--text-strong)}
.btn-ink{background:var(--ink-950);color:#fff;border-color:var(--ink-950)}
.btn-ink:hover{background:var(--ink-800);color:#fff}
.btn-block{width:100%}

.badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;
  border-radius:var(--radius-chip);font-family:var(--font-mono);font-size:var(--fs-11);
  letter-spacing:.06em;text-transform:uppercase;font-weight:500}
.badge-signal{background:var(--signal-400);color:var(--ink-950)}
.badge-warn{background:rgba(255,197,61,.16);color:var(--warn-400)}

/* ---------------------------------------------------------------- header -- */
.nav{position:sticky;top:0;z-index:30;background:rgba(250,250,247,.86);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border-default)}
.nav .wrap{display:flex;align-items:center;gap:var(--space-9);height:68px}
.logo{display:flex;align-items:center;gap:8px;font-family:var(--font-display);
  font-weight:800;font-stretch:112%;font-size:19px;letter-spacing:var(--ls-heading);
  text-transform:uppercase;color:var(--ink-950)}
.logo:hover{color:var(--ink-950)}
.logo-glyph{width:22px;height:22px;border-radius:6px;background:var(--ink-950);
  display:grid;place-items:center;flex:0 0 auto}
.logo-glyph span{width:9px;height:2px;background:var(--signal-400);box-shadow:0 4px 0 var(--signal-400)}
.nav-links{display:flex;gap:var(--space-8);font-size:var(--fs-14)}
.nav-links a{color:var(--ink-800)}
.nav-right{margin-left:auto;display:flex;gap:var(--space-4);align-items:center}
@media (max-width:900px){.nav-links{display:none}}
@media (max-width:560px){.nav-right .btn-ghost{display:none}}
.lang{display:inline-flex;border:1px solid var(--border-default);border-radius:var(--radius-chip);overflow:hidden}
.lang a{font-family:var(--font-mono);font-size:var(--fs-11);letter-spacing:var(--ls-caps-wide);
  text-transform:uppercase;padding:6px 10px;color:var(--text-muted)}
.lang a:hover{background:var(--surface-hover);color:var(--ink-950)}
.lang a[aria-current="page"]{background:var(--ink-950);color:var(--paper-050)}

/* ------------------------------------------------------------------ hero -- */
.hero{padding-top:var(--space-13)}
@media (max-width:640px){.hero{padding-top:var(--space-11)}}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);
  gap:var(--space-11);align-items:end;margin-top:22px}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:var(--space-8);align-items:start}}
.hero h1{max-width:20ch}
.hero-cta{display:flex;gap:var(--space-5);margin-top:26px;flex-wrap:wrap}

/* --------------------------------------------- comparador antes/después -- */
/* Una tarjeta por producto, cada una un comparador independiente. En 1:1 y no
   en un panel ancho: los creativos DABA son cuadrados, así que un 3:2 miente
   sobre el formato real. Y tres a la vez muestran tres productos en vez de
   obligar a cambiar de pestaña. Fotos reales del catálogo de Midtown Concept. */
.ba{margin-top:var(--space-10);scroll-margin-top:90px}
.ba-key{display:flex;align-items:center;gap:var(--space-7);
  margin-bottom:var(--space-5);flex-wrap:wrap}
.ba-key>span{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:var(--fs-11);letter-spacing:var(--ls-caps-wide);
  text-transform:uppercase;color:var(--text-muted)}
.ba-key i{width:10px;height:10px;border-radius:3px;background:var(--paper-300);flex:0 0 auto}
.ba-key .ba-key-hi i{background:var(--signal-400)}
.ba-key .ba-key-end{margin-left:auto}
.ba-key .icon{width:14px;height:14px;color:var(--ink-500)}
@media (max-width:640px){.ba-key .ba-key-end{margin-left:0;width:100%}}

.ba-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--gap-grid)}

/* El marco es 1:1 y las fotos también, así que `cover` no recorta nada. */
.ba-panel{position:relative;aspect-ratio:1/1;border-radius:var(--radius-panel);
  overflow:hidden;background:var(--ink-900);border:1px solid var(--border-default);
  touch-action:none;user-select:none;--pos:50%}
.ba-before{position:absolute;inset:0;background:var(--paper-000)}
.ba-before img{width:100%;height:100%;object-fit:cover}
.ba-after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos));background:var(--ink-850)}
.ba-after img{width:100%;height:100%;object-fit:cover}
/* El único gradiente del sistema: protección para que el overlay se lea. */
.ba-protect{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(8,9,11,.82) 0%,rgba(8,9,11,0) 52%)}
.ba-disc{position:absolute;top:14px;right:14px;background:var(--drop-500);color:#fff;
  font-family:var(--font-mono);font-size:var(--fs-12);letter-spacing:.06em;
  padding:6px 10px;border-radius:var(--radius-sm);pointer-events:none}
/* Solo el precio dentro de la imagen. El nombre y la marca vivían acá y
   quedaban cortados por el clip: en el panel ancho del prototipo entraban, en
   una tarjeta 1:1 de ~230px la mitad revelada no alcanza y el texto se partía
   al medio. El nombre pasó al pie de la tarjeta, que se ve siempre. */
/* Anclado a la DERECHA, no a la izquierda: el overlay vive dentro de la capa
   recortada por clip-path, y con `left:16px` el precio caía justo en la mitad
   que el clip esconde. Pegado al borde derecho queda siempre en la zona
   revelada, a cualquier posición de la manija. */
.ba-meta{position:absolute;right:16px;bottom:14px;max-width:calc(100% - 32px);
  text-align:right;pointer-events:none}
.ba-price{display:flex;align-items:baseline;justify-content:flex-end;gap:8px;
  font-family:var(--font-mono)}
.ba-price b{font-size:var(--fs-20);font-weight:500;color:var(--signal-400)}
.ba-price s{font-size:var(--fs-13);color:var(--ink-300)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:36px;margin-left:-18px;
  cursor:ew-resize;z-index:8;display:grid;place-items:center;background:none;border:0;padding:0}
.ba-handle::before{content:"";position:absolute;top:0;bottom:0;left:17px;width:2px;background:var(--signal-400)}
.ba-handle>span{width:34px;height:34px;border-radius:999px;background:var(--signal-400);
  display:grid;place-items:center;box-shadow:var(--shadow-raised);color:var(--ink-950)}
.ba-handle .icon{width:17px;height:17px}
.ba-foot{margin-top:10px}
.ba-foot .eyebrow{color:var(--text-muted)}
.ba-foot div{display:flex;align-items:baseline;gap:8px;margin-top:3px}
.ba-foot b{font-size:var(--fs-14);font-weight:500;color:var(--text-body);min-width:0}
.ba-foot span{margin-left:auto;font-family:var(--font-mono);font-size:var(--fs-11);
  color:var(--text-muted);flex:0 0 auto}

/* ---------------------------------------------------------------- marcas -- */
.brands{margin-top:var(--gap-section);border-top:1px solid var(--border-default);
  border-bottom:1px solid var(--border-default);background:var(--paper-100)}
.brands .wrap{padding-top:26px;padding-bottom:26px}
.brands-list{display:flex;flex-wrap:wrap;gap:var(--space-7) var(--space-10);margin-top:16px;align-items:center}
.brands-list span{font-family:var(--font-display);font-stretch:112%;font-weight:700;
  font-size:var(--fs-18);letter-spacing:var(--ls-heading);color:var(--ink-600)}

/* --------------------------------------------------------------- section -- */
.sec{padding-top:var(--gap-section);scroll-margin-top:90px}
.sec-head{max-width:var(--prose-max)}
.sec-head .h2{margin-top:10px}
/* auto-fit en vez de 3 columnas fijas con un breakpoint: el breakpoint en
   900px colapsaba a UNA columna cuando todavía entraban tres, y una tarjeta a
   todo el ancho con dos líneas de texto se lee como un banner, no como una
   tarjeta. Con auto-fit el navegador mete las que quepan (3 arriba de ~800px,
   2 arriba de ~530px, 1 abajo) y nunca aparece la tarjeta-banner. */
.cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--gap-grid);margin-top:36px}
.card{background:var(--surface-card);border:1px solid var(--border-default);
  border-radius:var(--radius-card);padding:var(--pad-card);box-shadow:var(--shadow-paper-sm)}
.card-top{display:flex;align-items:center;justify-content:space-between}
.card-icon{width:40px;height:40px;border-radius:var(--radius-md);background:var(--signal-400);
  display:grid;place-items:center;color:var(--ink-950)}
.card-icon .icon{width:19px;height:19px}
.card-num{font-family:var(--font-mono);font-size:var(--fs-24);color:var(--paper-300)}
.card .h3{margin-top:18px}
.card p{font-size:var(--fs-14);color:var(--text-muted);margin-top:8px}

/* -------------------------------------------------- panel de selección -- */
.split{margin-top:var(--space-9);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:var(--space-9);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:var(--space-8)}}
.picker{background:var(--ink-950);border-radius:var(--radius-panel);border:1px solid var(--ink-800);
  overflow:hidden;box-shadow:var(--shadow-paper-lg)}
.picker-head{display:flex;align-items:center;gap:14px;padding:16px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);background:var(--ink-900);flex-wrap:wrap}
.picker-head .eyebrow{color:var(--ink-400)}
.picker-count{margin-left:auto;display:flex;align-items:center;gap:12px}
.picker-count .mono{font-size:var(--fs-13);color:var(--warn-400)}
.picker-count[data-done] .mono{color:var(--signal-400)}
.meter{width:96px;height:6px;border-radius:999px;background:var(--ink-800);overflow:hidden}
.meter i{display:block;height:100%;width:0;background:var(--warn-400);
  transition:width 200ms var(--ease-standard)}
.picker-count[data-done] .meter i{background:var(--signal-400)}
.picker-row{display:flex;align-items:center;gap:20px;padding:14px 20px;
  border-bottom:1px solid rgba(255,255,255,.08);flex-wrap:wrap}
.picker-row:last-child{border-bottom:0}
.picker-name{min-width:0;flex:1}
.picker-name b{display:block;font-size:var(--fs-15);font-weight:500;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.picker-name span{font-family:var(--font-mono);font-size:var(--fs-11);color:var(--ink-400);margin-top:3px;display:block}
.picker-thumbs{display:flex;gap:8px}
.picker-thumb{width:46px;height:58px;padding:0;cursor:pointer;position:relative;
  border-radius:var(--radius-thumb);background:var(--ink-850);
  border:1.5px solid rgba(255,255,255,.08);
  font-family:var(--font-mono);font-size:var(--fs-11);color:var(--ink-500);
  transition:all var(--dur-fast) var(--ease-standard)}
.picker-thumb:hover{border-color:rgba(255,255,255,.24)}
.picker-thumb[aria-pressed="true"]{background:var(--ink-700);border-color:var(--signal-400);
  color:var(--signal-400);box-shadow:var(--glow-signal)}
.picker-thumb i{position:absolute;right:-6px;top:-6px;width:18px;height:18px;border-radius:999px;
  background:var(--signal-400);display:none;place-items:center;color:var(--ink-950)}
.picker-thumb i .icon{width:12px;height:12px}
.picker-thumb[aria-pressed="true"] i{display:grid}
.picker-state{width:128px;text-align:right;font-family:var(--font-mono);font-size:var(--fs-11);
  letter-spacing:.06em;text-transform:uppercase;color:var(--drop-400)}
.picker-row[data-picked] .picker-state{color:var(--lift-400)}
.picker-try{font-size:var(--fs-13);color:var(--ink-500);margin-top:14px;font-family:var(--font-mono)}

/* --------------------------------------------------------------- avisos -- */
.alerts{margin-top:var(--gap-section);padding:76px 0}
.alerts-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:var(--space-11);align-items:start;margin-top:10px}
@media (max-width:900px){.alerts-grid{grid-template-columns:1fr;gap:var(--space-9)}}
.alerts h2{max-width:22ch}
.ch-list{display:flex;flex-direction:column;gap:10px;margin-top:26px}
.ch{display:flex;align-items:center;gap:14px;text-align:left;cursor:pointer;
  padding:14px 16px;border-radius:var(--radius-card);background:transparent;
  border:1px solid var(--border-subtle);color:inherit;
  transition:all var(--dur-fast) var(--ease-standard)}
.ch:hover{border-color:var(--border-default)}
.ch[aria-selected="true"]{background:var(--surface-hover);border-color:var(--border-strong)}
.ch-ico{width:36px;height:36px;border-radius:var(--radius-md);background:var(--ink-850);
  display:grid;place-items:center;flex:0 0 auto}
.ch-ico .icon{width:18px;height:18px}
.ch-txt{min-width:0}
.ch-txt b{display:block;font-size:var(--fs-15);font-weight:600;color:var(--text-strong)}
.ch-txt span{display:block;font-size:var(--fs-13);color:var(--ink-400);margin-top:2px}
.ch-check{margin-left:auto;color:var(--signal-400);display:none}
.ch[aria-selected="true"] .ch-check{display:block}
.notif{background:var(--ink-900);border:1px solid var(--border-default);
  border-radius:var(--radius-panel);padding:var(--pad-panel);box-shadow:var(--shadow-raised)}
.notif-head{display:flex;align-items:center;gap:10px;padding-bottom:14px;
  border-bottom:1px solid var(--border-subtle)}
.notif-head .eyebrow{color:var(--ink-400)}
.notif-head .badge{margin-left:auto}
.notif-big{display:flex;align-items:baseline;gap:10px;margin-top:18px}
.notif-big b{font-family:var(--font-mono);font-size:var(--fs-38);color:var(--warn-400);
  letter-spacing:-.02em;font-weight:500}
.notif-big span{font-size:var(--fs-16);color:var(--text-strong);font-weight:500}
.notif-list{display:flex;flex-direction:column;gap:9px;margin-top:18px}
.notif-list div{display:flex;align-items:center;gap:10px;font-size:var(--fs-14);color:var(--ink-100)}
.notif-list i{width:6px;height:6px;border-radius:999px;background:var(--drop-400);flex:0 0 auto}
.notif-list span{margin-left:auto;font-family:var(--font-mono);font-size:var(--fs-11);color:var(--ink-400)}
.notif-more{font-family:var(--font-mono);font-size:var(--fs-12);color:var(--ink-500);margin-top:2px}
.notif .btn{margin-top:22px}

/* ------------------------------------------------------------------ cta -- */
.cta-band{padding-top:var(--gap-section)}
.cta-box{background:var(--signal-400);border-radius:var(--radius-2xl);padding:56px 48px;
  display:flex;align-items:center;gap:32px;flex-wrap:wrap}
@media (max-width:640px){.cta-box{padding:36px 24px}}
.cta-box>div{flex:1;min-width:280px}
.cta-box h2{color:var(--ink-950);font-weight:800}
.cta-box p{font-size:var(--fs-16);color:rgba(8,9,11,.72);margin-top:10px;max-width:46ch}

/* --------------------------------------------------------------- footer -- */
.foot{margin-top:var(--gap-section);border-top:1px solid var(--border-default);
  padding:40px 0}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:var(--gap-grid)}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr;gap:var(--space-8)}}
.foot-grid p{font-size:var(--fs-13);color:var(--text-muted);margin-top:12px;max-width:32ch}
.foot-col .eyebrow{margin-bottom:12px}
.foot-col div{display:flex;flex-direction:column;gap:8px;font-size:var(--fs-14)}
.foot-bottom{margin-top:32px;display:flex;justify-content:space-between;gap:var(--space-6);
  flex-wrap:wrap;font-size:var(--fs-12);color:var(--text-muted)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ------------------------------------------- previews de Meta (reales) -- */
/* Capturas del previsualizador de Meta Ads con anuncios reales de Midtown
   Concept MX: mismo producto, mismo placement, antes y después. Se muestran a
   tamaño nativo (~240px) o menos: son screenshots a 1x y escalarlos los ensucia. */
.prev-grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,2fr);
  gap:var(--space-9);align-items:start;margin-top:32px}
@media (max-width:900px){.prev-grid{grid-template-columns:1fr;gap:var(--space-8)}}
.prev-intro{font-size:var(--fs-15);color:var(--text-muted);line-height:1.55;max-width:34ch}
.prev-tabs{display:flex;flex-direction:column;gap:8px;margin-top:22px}
@media (max-width:900px){.prev-tabs{flex-direction:row;flex-wrap:wrap}}
.prev-tab{text-align:left;cursor:pointer;padding:11px 16px;border-radius:var(--radius-card);
  background:transparent;color:var(--ink-800);border:1px solid var(--border-default);
  transition:all var(--dur-fast) var(--ease-standard)}
.prev-tab:hover{border-color:var(--border-strong)}
.prev-tab[aria-selected="true"]{background:var(--ink-950);color:#fff;border-color:var(--ink-950)}
.prev-tab b{display:block;font-size:var(--fs-14);font-weight:600}
.prev-tab span{display:block;font-size:var(--fs-12);margin-top:2px;opacity:.72}
.prev-shots{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-grid)}
@media (max-width:520px){.prev-shots{grid-template-columns:1fr}}
.prev-shot{min-width:0}
.prev-label{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.prev-label i{width:10px;height:10px;border-radius:3px;background:var(--paper-300);flex:0 0 auto}
.prev-shot-hi .prev-label i{background:var(--signal-400)}
.prev-shot-hi .prev-label .eyebrow{color:var(--signal-700)}
.prev-frame{border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--border-default);
  background:var(--paper-000);box-shadow:var(--shadow-paper-sm);max-width:280px}
.prev-shot-hi .prev-frame{border-color:var(--ink-950);box-shadow:var(--shadow-paper-lg)}
.prev-frame img{width:100%;height:auto}
.prev-note{font-family:var(--font-mono);font-size:var(--fs-12);color:var(--text-muted);margin-top:18px}