/* ──────────────────────────────────────────────────────────────────────
   Develmedia · Design System Tokens (web · WordPress + Elementor)
   Fuente: Brandbook v1.1 + T3 (Mayo 2026) + summary cliente
   ──────────────────────────────────────────────────────────────────── */

/* Fuentes alojadas LOCALMENTE (public/fonts/) — sin Google Fonts en la ruta
   crítica: más rápido (sin chained request externo que bloquee el render) y
   mejor para RGPD (no se envía la IP del usuario a Google). Son fuentes variables:
   un solo woff2 por familia y subset (latin / latin-ext) cubre todos los pesos.
   font-display: swap. Para volver a Google Fonts, restaurar el @import anterior. */
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/inter-tight-latin.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;}
@font-face{font-family:'Inter Tight';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/inter-tight-latin-ext.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;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('/fonts/jetbrains-mono-latin.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;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url('/fonts/jetbrains-mono-latin-ext.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;}

:root {
  /* ── Tipografía ─────────────────────────────────────────────────── */
  --dm-font-sans: "Inter Tight", -apple-system, system-ui, sans-serif;
  --dm-font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* ── Color · paleta ─────────────────────────────────────────────── */
  --dm-ink:           #0B1220;   /* texto principal · monograma D */
  --dm-ink-2:         #1A2235;   /* texto secundario */
  --dm-paper:         #F5F4EE;   /* fondo principal · NUNCA #FFF */
  --dm-paper-2:       #EFEDE5;   /* fondo secundario */
  --dm-soft:          #ECEEF8;   /* fondo accent suave · badges */
  --dm-muted:         #6B7280;   /* texto terciario · captions */

  --dm-accent:        #3B5BFF;   /* cobalto · CTA · links · cursor */
  --dm-accent-hover:  #2944E0;   /* hover de CTAs */
  --dm-accent-deep:   #1F3DC7;   /* texto sobre soft / accent oscuro */
  --dm-accent-tint:   #F4F6FE;   /* fondo accent muy suave */

  --dm-success:       #1F8A5B;
  --dm-warning:       #C97A0E;
  --dm-error:         #B33A2E;

  /* ── Hairlines · separadores ────────────────────────────────────── */
  --dm-hairline:      rgba(11, 18, 32, 0.08);   /* separador estándar 1px */
  --dm-hairline-2:    rgba(11, 18, 32, 0.14);   /* separador énfasis */

  /* ── Espaciado · 4pt scale ──────────────────────────────────────── */
  --dm-space-1: 4px;    --dm-space-2: 8px;     --dm-space-3: 12px;
  --dm-space-4: 16px;   --dm-space-5: 24px;    --dm-space-6: 32px;
  --dm-space-7: 48px;   --dm-space-8: 64px;    --dm-space-9: 96px;
  --dm-space-10: 128px;

  /* ── Layout · grid web ──────────────────────────────────────────── */
  --dm-container: 1280px;
  --dm-gutter-lg: 24px;    /* desktop ≥1024px */
  --dm-gutter-md: 20px;    /* tablet 640-1023px */
  --dm-gutter-sm: 16px;    /* mobile <640px */
  --dm-section-lg: 120px;  /* sección desktop */
  --dm-section-md: 80px;   /* sección tablet */
  --dm-section-sm: 60px;   /* sección mobile */

  /* ── Radius ─────────────────────────────────────────────────────── */
  --dm-radius-1:  4px;    /* badges, chips, inputs pequeños */
  --dm-radius-2:  8px;    /* botones, inputs, cards pequeñas */
  --dm-radius-3:  12px;   /* cards principales */
  --dm-radius-4:  20px;   /* contenedores grandes, hero */
  --dm-radius-pill: 999px;

  /* ── Motion ─────────────────────────────────────────────────────── */
  --dm-dur-1: 120ms;   /* micro · color, opacity */
  --dm-dur-2: 200ms;   /* estándar · hover, focus */
  --dm-dur-3: 320ms;   /* transiciones layout */
  --dm-ease: cubic-bezier(.2, 0, 0, 1);   /* ease-out estándar */
  --dm-ease-emph: cubic-bezier(.3, 0, .1, 1);

  /* ── Tipografía · escala (10 niveles) ───────────────────────────── */
  /* desktop · escalar -25% en mobile */
  --dm-fs-display-xl: clamp(64px, 8vw, 120px);
  --dm-fs-display-l:  clamp(48px, 6vw, 88px);
  --dm-fs-display-m:  clamp(40px, 4.5vw, 64px);
  --dm-fs-h1:         clamp(32px, 3.2vw, 48px);
  --dm-fs-h2:         clamp(24px, 2.2vw, 32px);
  --dm-fs-h3:         20px;
  --dm-fs-lead:       18px;
  --dm-fs-body:       16px;
  --dm-fs-small:      14px;
  --dm-fs-tag:        12px;

  /* ── H1 de hero · escala fluida continua ─────────────────────────────
     Un solo valor cubre TODO el espectro (móvil pequeño → desktop grande):
     la parte fija (1rem) da un suelo cómodo en pantallas estrechas y el vw
     hace crecer el título de forma progresiva hasta el tope.

     Se usa una escala fluida en vez de saltos por media query porque los H1
     son ahora más largos (SEO) y con valores fijos por breakpoint el título
     "saltaba" de tamaño al cruzar 640px y 1280px.

     hero-h1      · páginas interiores (servicios, sobre, contacto, faqs,
                    blog, ficha de servicio)
     hero-h1-home · home, un punto por encima para mantener su jerarquía

     Referencia (ancho de viewport → tamaño):
       360px → 30/32px · 768px → 47/51px · 1280px → 68/74px · tope 70/76px */
  --dm-fs-hero-h1:      clamp(30px, 1rem + 4.1vw, 70px);
  --dm-fs-hero-h1-home: clamp(32px, 1rem + 4.5vw, 76px);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dm-dur-1: 0ms; --dm-dur-2: 0ms; --dm-dur-3: 80ms; }
}

/* ── Reset mínimo ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--dm-font-sans);
  font-size: var(--dm-fs-body);
  line-height: 1.5;
  color: var(--dm-ink);
  background: var(--dm-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Type utilities ───────────────────────────────────────────────── */
.dm-display-xl { font-size: var(--dm-fs-display-xl); font-weight: 600; letter-spacing: -.04em;  line-height: 1.02; }
.dm-display-l  { font-size: var(--dm-fs-display-l);  font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.dm-display-m  { font-size: var(--dm-fs-display-m);  font-weight: 600; letter-spacing: -.03em;  line-height: 1.08; }
.dm-h1         { font-size: var(--dm-fs-h1);         font-weight: 600; letter-spacing: -.025em; line-height: 1.1;  }
.dm-h2         { font-size: var(--dm-fs-h2);         font-weight: 600; letter-spacing: -.02em;  line-height: 1.15; }
.dm-h3         { font-size: var(--dm-fs-h3);         font-weight: 500; letter-spacing: -.015em; line-height: 1.3;  }
.dm-lead       { font-size: var(--dm-fs-lead);       font-weight: 400; line-height: 1.55; color: var(--dm-ink-2); }
.dm-body       { font-size: var(--dm-fs-body);       font-weight: 400; line-height: 1.55; }
.dm-small      { font-size: var(--dm-fs-small);      font-weight: 400; line-height: 1.5;  color: var(--dm-ink-2); }
.dm-tag {
  font-family: var(--dm-font-mono); font-size: var(--dm-fs-tag);
  font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  line-height: 1;
}

.dm-italic-gesture { font-style: italic; color: var(--dm-accent); }

.dm-eyebrow {
  font-family: var(--dm-font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .14em; color: var(--dm-accent); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
}
.dm-eyebrow::before {
  content: ""; display: inline-block; width: 2px; height: 14px;
  background: var(--dm-accent);   /* cursor | como gesto · sustituye dots */
}

/* ── Cursor · separador propio ────────────────────────────────────── */
.dm-cursor {
  display: inline-block; width: 2px; height: 1em;
  background: var(--dm-accent); vertical-align: -2px;
  margin: 0 .35em;
}

/* ── Botones ──────────────────────────────────────────────────────── */
.dm-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-radius: var(--dm-radius-2);
  font-family: var(--dm-font-sans); font-size: 15px;
  font-weight: 500; line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dm-dur-2) var(--dm-ease),
              color var(--dm-dur-2) var(--dm-ease),
              border-color var(--dm-dur-2) var(--dm-ease),
              transform var(--dm-dur-2) var(--dm-ease);
}
.dm-btn--primary   { background: var(--dm-accent); color: #fff; }
.dm-btn--primary:hover   { background: var(--dm-accent-hover); color: #fff; }
.dm-btn--secondary { background: transparent; color: var(--dm-ink); border-color: var(--dm-ink); }
.dm-btn--secondary:hover { background: var(--dm-ink); color: var(--dm-paper); }
.dm-btn--ghost     { background: transparent; color: var(--dm-accent); padding-left: 0; padding-right: 0; }
.dm-btn--ghost:hover     { color: var(--dm-accent-hover); }

/* ── Card · hover translateY(-3px) ───────────────────────────────── */
.dm-card {
  background: var(--dm-paper);
  border: 1px solid var(--dm-hairline);
  border-radius: var(--dm-radius-3);
  padding: var(--dm-space-5);
  transition: transform var(--dm-dur-2) var(--dm-ease),
              border-color var(--dm-dur-2) var(--dm-ease);
}
.dm-card--hover:hover { transform: translateY(-3px); border-color: var(--dm-hairline-2); }

/* ── Badge ────────────────────────────────────────────────────────── */
.dm-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--dm-soft);
  color: var(--dm-accent-deep);
  border-radius: var(--dm-radius-pill);
  font-family: var(--dm-font-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
}
.dm-badge::before {
  content: ""; width: 2px; height: 10px;
  background: var(--dm-accent);   /* cursor en lugar de dot */
}

/* ── Separador 1px ink/8 ──────────────────────────────────────────── */
.dm-hr { border: none; height: 1px; background: var(--dm-hairline); margin: 0; }

/* ── Container · grid base ────────────────────────────────────────── */
.dm-container {
  width: 100%; max-width: var(--dm-container);
  margin-inline: auto;
  padding-inline: var(--dm-gutter-lg);
}
@media (max-width: 1023px) { .dm-container { padding-inline: var(--dm-gutter-md); } }
@media (max-width: 639px)  { .dm-container { padding-inline: var(--dm-gutter-sm); } }

.dm-section { padding-block: var(--dm-section-lg); }
@media (max-width: 1023px) { .dm-section { padding-block: var(--dm-section-md); } }
@media (max-width: 639px)  { .dm-section { padding-block: var(--dm-section-sm); } }

/* ── Focus ring (accesibilidad) ───────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--dm-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Link ─────────────────────────────────────────────────────────── */
a { color: var(--dm-accent); text-decoration: none; }
a:hover { color: var(--dm-accent-hover); }