/* daezpro.com — 01-primitives.css
   Primitivas reutilizables: layout, tipografia, botones, checks, card, placeholder, cota, reveal/counter. */

/* --------------------------------------------------- 3. COMPONENTES: LAYOUT */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.sec{
  position:relative;
  padding-block:var(--sec-space);
}
.sec--deep{ background:var(--bg-canvas); }
.sec--dark{
  background:var(--bg-canvas);
  color:var(--text-strong);
}
.sec--dark .kicker{ color:var(--accent); } /* cobre brillante pasa AA sobre tinta */

/* Papel milimetrado sutil (opacidad ≤ .35) */
.sec--grid::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(to right,  var(--border) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px 34px);
  opacity:.5; /* sobre blanco necesita más presencia que sobre crema */
  z-index:0;
  -webkit-mask-image:linear-gradient(180deg, transparent, var(--text-strong) 12%, var(--text-strong) 88%, transparent);
          mask-image:linear-gradient(180deg, transparent, var(--text-strong) 12%, var(--text-strong) 88%, transparent);
}
.sec--grid > .wrap{ position:relative; z-index:1; }

/* ---------------------------------------------- 4. COMPONENTES: TIPOGRAFÍA */
.kicker{
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-strong);
  margin-bottom:18px;
}
.h1,.h2{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-0.03em;
  line-height:1.02;
  color:var(--text-strong);
  text-wrap:balance;
}
.h1{ font-size:clamp(44px, 6.4vw, 84px); }
.h2{ font-size:clamp(30px, 4vw, 52px); line-height:1.05; }
.sec--dark .h1,.sec--dark .h2{ color:var(--text-strong); }

.lead{
  font-size:clamp(18px, 1.4vw, 20px);
  color:var(--text-body);
  line-height:1.55;
}

/* Subrayado marcador cobre sobre 1 palabra del titular */
.mark{
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-decoration-thickness:.14em;
  text-underline-offset:.08em;
  padding-inline:.04em;
}

/* --------------------------------------------- 5. COMPONENTES: BOTONES */
.btn{
  --btn-bg:var(--text-strong);
  --btn-fg:var(--text-invert);
  --btn-bd:var(--text-strong);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  padding:14px 26px;
  border-radius:var(--r-pill);
  border:1px solid var(--btn-bd);
  background:var(--btn-bg);
  color:var(--btn-fg);
  font-family:var(--font-ui);
  font-weight:600;
  font-size:var(--fs-title);
  line-height:1;
  letter-spacing:-0.01em;
  white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--sh-md); }
.btn:active{ transform:translateY(0); }

.btn--ghost{
  --btn-bg:transparent;
  --btn-fg:var(--text-strong);
  --btn-bd:var(--border-strong);
}
.btn--ghost:hover{ --btn-bd:var(--text-strong); box-shadow:none; background:var(--bg-canvas); }

.btn--invert{
  --btn-bg:var(--surface);
  --btn-fg:var(--text-strong);
  --btn-bd:var(--border);
}
.btn--invert:hover{ box-shadow:var(--sh-lg); }

/* Ghost adaptado a fondo oscuro */
.sec--dark .btn--ghost{
  --btn-fg:var(--text-strong);
  --btn-bd:var(--border-strong);
}
.sec--dark .btn--ghost:hover{ --btn-bd:var(--text-strong); background:var(--bg-canvas); }

/* ---------------------------------------------- 6. COMPONENTES: CHECKS */
.checks{ display:grid; gap:14px; }
.checks li{
  position:relative;
  padding-left:32px;
  color:var(--text-body);
  font-size:var(--fs-title);
  line-height:1.45;
}
.checks li::before{
  content:"✓";
  position:absolute;
  left:0; top:.02em;
  width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:var(--fs-xs); font-weight:700;
  color:var(--accent-strong);
  background:var(--accent-soft);
  border-radius:50%;
}
.sec--dark .checks li{ color:var(--text-body); }
.sec--dark .checks li::before{ color:var(--accent-strong); background:var(--accent-soft); }

/* ----------------------------------------------- 7. COMPONENTES: CARD */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-sm);
}
.card--lift{ transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.card--lift:hover{ transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--border-strong); }
.sec--dark .card{
  background:var(--surface);
  border-color:var(--border);
  box-shadow:none;
}

/* ------------------------------------- 8. COMPONENTES: PLACEHOLDER (.ph) */
.ph{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-align:center;
  padding:26px;
  aspect-ratio:16/10;
  background:var(--surface-2);
  border:2px dashed var(--border);
  border-radius:var(--r-xl);
  color:var(--text-body);
  font-family:var(--font-mono);
  font-size:var(--fs-sm);
  line-height:1.55;
  letter-spacing:.01em;
}
.ph__icon{
  font-size:var(--fs-h2);
  line-height:1;
  opacity:.6;
}
.ph--dark{
  background:var(--surface-2);
  border-color:var(--border);
  color:var(--text-muted);
}

/* ------------------------------------------ 9. COMPONENTES: COTA (marginalia) */
.cota{
  position:absolute;
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-mono);
  font-size:var(--fs-xs);
  font-weight:400;
  letter-spacing:.03em;
  color:var(--text-body);
  white-space:nowrap;
  pointer-events:none;
}
/* línea de cota con remates en ambos extremos */
.cota::before{
  content:"";
  width:26px; height:7px;
  flex:0 0 auto;
  border-left:1px solid var(--border);
  border-right:1px solid var(--border);
  background:linear-gradient(var(--border),var(--border)) center/100% 1px no-repeat;
}
.cota--tl{ top:-14px;  left:-18px;  }
.cota--tr{ top:-14px;  right:-18px; flex-direction:row-reverse; }
.cota--bl{ bottom:-14px; left:-18px;  }
.cota--br{ bottom:-14px; right:-18px; flex-direction:row-reverse; }
.sec--dark .cota{ color:var(--text-muted); }
.sec--dark .cota::before{
  border-color:var(--border-strong);
  background:linear-gradient(var(--border-strong),var(--border-strong)) center/100% 1px no-repeat;
}

/* ------------------------------------------- 10. COMPONENTES: REVEAL / COUNTER */
/* Sólo se ocultan si el JS confirma soporte (clase .js en <html>): si el
   script no carga, el contenido permanece visible en lugar de desaparecer. */
.js .reveal{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  will-change:opacity, transform;
}
.reveal.is-in{ opacity:1; transform:none; }
/* retardos opcionales en cadena */
.reveal[data-delay="1"]{ transition-delay:.08s; }
.reveal[data-delay="2"]{ transition-delay:.16s; }
.reveal[data-delay="3"]{ transition-delay:.24s; }
.reveal[data-delay="4"]{ transition-delay:.32s; }

.counter{ font-variant-numeric:tabular-nums; }