/* ============================================================
   METRICLY — landing pública · CSS común (X4-E, 23-oct-2026)
   Tokens del prototipo V102 (respuesta escrita de los socios 23-oct):
   tema claro, papel #FAFAF7, tinta #131313, lima #D4F54A, Inter + Archivo.
   Lo usan index.html, descubrir.html y campana.html; cada página deja en su
   <style> solo lo específico. Ruta relativa: Caddy sirve /srv/landing tal cual.
   ============================================================ */
:root{
  /* --- tokens V102 --- */
  --ink:#131313; --lime:#D4F54A; --deep:#A8C920; --olive:#5F7A00; --soft:#EEF9C8;
  --paper:#FAFAF7; --white:#FFFFFF; --sunk:#F2F2EE; --line:#E6E6E0; --grey:#6B6B66; --red:#C93D42;
  --shadow:0 1px 2px #1313130a,0 10px 30px #13131310;
  --r-pill:999px; --r-modal:22px; --r-card19:19px; --r-field:12px;
  --content:1200px;

  /* --- tipografías: Inter (cuerpo) + Archivo (logo, cifras, titulares) --- */
  --font-display:'Archivo','Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;

  /* --- nombres heredados que usan las páginas (re-tokenizados a V102) --- */
  --lima:#D4F54A; --lima-deep:#A8C920;
  --lima-glow:rgba(212,245,74,.40); --lima-12:rgba(212,245,74,.16); --lima-30:rgba(212,245,74,.38);
  --display:var(--font-display); --body:var(--font-body); --mono:var(--font-body);
  --f-display:var(--font-display); --f-body:var(--font-body); --f-mono:var(--font-body);
  --r-chip:12px; --r-btn:12px; --r-card:19px; --max:1200px;

  /* claro único (V102 no tiene oscuro); index conserva data-mode solo para el contenido */
  --base:#FAFAF7; --surface:#FFFFFF; --elevada:#FFFFFF; --elevated:#F2F2EE;
  --borde:#E6E6E0; --border:#E6E6E0; --hair:#E6E6E0;
  --apagado:#6B6B66; --muted:#6B6B66;
  --texto:#131313; --text:#131313; --texto-2:#3C3E3A;
  --riel:#ECEEE7; --acc:#131313;
  --ok-txt:#16803C; --approve:#16803C;
  --cat:#7E22CE; --category:#7E22CE; --info:#1D4ED8; --peligro:#C93D42; --danger:#C93D42;
  --dots:rgba(19,19,19,.055);
  --band:linear-gradient(180deg,#FFFFFF,#FAFAF7);
  --footword:rgba(19,19,19,.10);
  --thumb-1:#F1F2EA; --thumb-2:#E7E9DE; --thumb-txt:#131313;
  --shadow-card:var(--shadow);
  --btn-alt-bg:#131313; --btn-alt-txt:#FFFFFF;
}

/* ---------- base ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);font-size:14px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button,input,select,textarea{font-family:inherit;}
button{cursor:pointer;}
h1,h2,h3,h4,h5{font-family:var(--font-display);letter-spacing:-.035em;}
.wrap{max-width:var(--content);margin:0 auto;padding:0 24px;}
:focus-visible{outline:2px solid var(--olive);outline-offset:3px;border-radius:4px;}
::selection{background:var(--lime);color:var(--ink);}
[hidden]{display:none !important;}

/* eyebrow V102: 11px, mayúsculas, olive */
.eyebrow{
  font-family:var(--font-body);font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--olive);
}

/* ---------- logo: 4 barras lima sobre cuadro tinta + Archivo 900 ---------- */
.logo{
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  font-family:var(--font-display);font-weight:900;font-size:20px;letter-spacing:-.045em;line-height:1;
  color:var(--ink);
}
.logo .bars{
  display:inline-flex;align-items:flex-end;gap:2px;flex:none;
  width:28px;height:28px;padding:6px 5px;border-radius:8px;background:var(--ink);
}
.logo .bars i{display:block;flex:1;background:var(--lime);border-radius:1px;}
.logo .bars i:nth-child(1){height:34%;}
.logo .bars i:nth-child(2){height:56%;}
.logo .bars i:nth-child(3){height:78%;}
.logo .bars i:nth-child(4){height:100%;}
.logo .dot{color:var(--olive);}

/* ---------- barra superior (V102 .sitehead) ---------- */
.site-header,.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(250,250,247,.88);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}

/* ---------- botones píldora (V102 .btn / .dark / .outline / .sm) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-body);font-weight:700;font-size:14px;letter-spacing:0;line-height:1.2;
  padding:13px 22px;border-radius:var(--r-pill);border:1px solid transparent;
  white-space:nowrap;text-decoration:none;
  transition:transform .18s ease,filter .18s ease,background .18s ease,border-color .18s ease;
}
.btn:hover{filter:brightness(.96);transform:translateY(-1px);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--lime);color:var(--ink);box-shadow:none;}
.btn.btn-ghost{background:var(--white);border-color:var(--line);color:var(--ink);}
.btn.btn-ghost:hover{border-color:#CFCFC8;}
.btn-alt,.btn.dark{background:var(--ink);color:#FFFFFF;}
.btn-sm{padding:9px 15px;font-size:12.5px;}
/* CTA de la barra superior en descubrir (V102 .btn.dark.sm) */
.btn-pill{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-weight:700;font-size:12.5px;
  padding:9px 16px;border-radius:var(--r-pill);border:1px solid var(--ink);
  background:var(--ink);color:#FFFFFF;white-space:nowrap;transition:filter .15s ease,transform .15s ease;
}
.btn-pill:hover{filter:brightness(1.25);transform:translateY(-1px);}

/* ---------- filtros en píldora ---------- */
.chip{
  font-family:var(--font-body);font-size:12px;font-weight:700;color:var(--grey);
  padding:8px 15px;border-radius:var(--r-pill);
  background:var(--white);border:1px solid var(--line);
  transition:background .12s ease,color .12s ease,border-color .12s ease;
}
.chip:hover{color:var(--ink);border-color:#CFCFC8;}
.chip.active{background:var(--ink);color:#FFFFFF;border-color:var(--ink);}

/* ---------- etiquetas de tipo/categoría (V102 .v99-kind) ---------- */
.tag,.tag-cat{
  font-family:var(--font-body);font-size:10px;font-weight:800;letter-spacing:.01em;
  padding:5px 9px;border-radius:var(--r-pill);white-space:nowrap;
  background:rgba(255,255,255,.93);border:1px solid #E1E5D9;color:#263A19;
}

/* ---------- tarjeta de campaña (V102 .v99-light-card) ----------
   Blanca, borde #e2e6dd, radio 13, miniatura arriba con franja de estado lima
   y el tipo arriba a la derecha. index usa .camp/.camp-thumb; descubrir usa
   .campaign-card/.thumb: comparten esta piel. */
.camp,.campaign-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:#FFFFFF;color:#151914;
  border:1px solid #E2E6DD;border-radius:13px;padding:0;
  box-shadow:0 5px 18px rgba(17,22,17,.055);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.camp:hover,.campaign-card:hover{
  transform:translateY(-3px);border-color:#CFD8C2;
  box-shadow:0 14px 30px rgba(17,22,17,.09);
}
.camp-thumb,.campaign-card .thumb{
  position:relative;border-radius:0;overflow:hidden;
  background:
    radial-gradient(circle at 88% 0%, rgba(212,245,74,.55), transparent 46%),
    repeating-linear-gradient(135deg, rgba(19,19,19,.035) 0 2px, transparent 2px 22px),
    #EEEEE8;
  color:#263A19;
}
/* franja de estado (lima = abierta) */
.camp-thumb::before,.campaign-card .thumb::before{
  content:"";position:absolute;left:0;right:0;top:0;height:5px;z-index:3;background:var(--lime);
}
.campaign-card[data-estado="cerrando"] .thumb::before{background:var(--deep);}
.campaign-card[data-estado="proxima"] .thumb::before{background:#C9CEC0;}
.cpm-pill{
  font-family:var(--font-body);font-weight:800;font-size:11px;
  background:var(--lime);color:#1B2211;padding:5px 10px;border-radius:var(--r-pill);
  white-space:nowrap;flex:none;font-variant-numeric:tabular-nums;
}
/* barra de avance (V102 .v99-track) */
.bar,.progress-rail{height:5px;border-radius:20px;background:#ECEEE7;overflow:hidden;}
.bar i,.progress-fill{display:block;height:100%;border-radius:20px;background:#A2D11C;}

/* ---------- pie (V102 .lime-footer) ---------- */
.site-footer,body > footer{
  background:radial-gradient(ellipse at 20% 10%,#F4FFD5 0%,transparent 45%),
             linear-gradient(135deg,#D4F54A 0%,#B9ED32 43%,#8DB91C 100%);
  color:var(--ink);border-top:0;
}
.site-footer .logo .dot,body > footer .logo .dot{color:var(--ink);}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
}