/* ==========================================================================
   TOKENS + BASE — se carga en TODO el sitio, antes que cualquier otra hoja.

   Única fuente de verdad del sistema visual: color, tipografía, espaciado,
   radios y movimiento. El resto de hojas (components, home-nueva,
   proyecto-single, proyectos-archive, case-study-process) solo consumen
   estas variables: si hay que cambiar el acento, un radio o una curva de
   animación, se cambia AQUÍ y se propaga a toda la web.

   Sustituye a tokens-base.css (que arrastraba el sistema anterior: Inter +
   Cascadia Code, azul #007EFF, header/footer antiguos ya sin uso).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FUENTES — servidas desde el propio tema (sin Google Fonts).
   Tres familias, cada una con un papel:
     Bricolage Grotesque → titulares
     Space Mono          → texto, etiquetas, navegación, botones
     Instrument Serif    → acento itálico dentro de los titulares
   -------------------------------------------------------------------------- */
@font-face { font-family: 'Bricolage Grotesque'; src: url('../fonts/Bricolage-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('../fonts/Bricolage-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('../fonts/Bricolage-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Bricolage Grotesque'; src: url('../fonts/Bricolage-800.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('../fonts/SpaceMono-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('../fonts/SpaceMono-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('../fonts/InstrumentSerif-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('../fonts/InstrumentSerif-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

/* --------------------------------------------------------------------------
   2. TOKENS
   "html:root" y no ":root": GeneratePress imprime su propio :root (con
   --base-2, --contrast, --accent…) DESPUÉS de esta hoja. Con un poco más de
   especificidad ganamos siempre, sin !important.
   -------------------------------------------------------------------------- */
html:root {
  /* ---- Color ---- */
  --c-bg: #141414;
  --c-surface: rgba(255, 255, 255, .03);        /* tarjetas */
  --c-surface-hover: rgba(255, 255, 255, .06);
  --c-line: rgba(255, 255, 255, .12);           /* separadores y bordes */
  --c-line-soft: rgba(255, 255, 255, .06);
  --c-line-strong: rgba(255, 255, 255, .28);    /* bordes de botón ghost */

  --c-text: #ffffff;
  --c-text-muted: rgba(255, 255, 255, .72);     /* párrafos */
  --c-text-subtle: rgba(255, 255, 255, .55);    /* metadatos, etiquetas */

  /* UN solo acento en toda la web: botones, hovers, kickers, foco, enlaces. */
  --c-accent: #5DC4B3;
  --c-accent-hover: #8AD8CB;
  --c-accent-ink: #141414;                      /* texto sobre fondo acento */
  --c-accent-tint: rgba(93, 196, 179, .08);
  --c-accent-line: rgba(93, 196, 179, .35);

  /* Azules = solo ATMÓSFERA (degradados y fondo de "Cómo trabajo"),
     nunca elementos interactivos. */
  --c-navy: #14395F;
  --c-glow: #0053A9;

  /* Semántico: puntos de dolor en el "Puente UX" del caso de estudio. */
  --c-warn: #FF6B6B;

  /* ---- Tipografía ---- */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
  --font-serif: 'Instrument Serif', Georgia, serif;

  --fs-label: 12px;          /* etiquetas en mono mayúsculas (kickers, metadatos) */
  --ls-label: .16em;
  --fs-small: 13px;
  --fs-body: 16px;
  --lh-body: 1.6;
  --fs-h3: clamp(22px, 2.4vw, 34px);
  --fs-h2: clamp(36px, 5vw, 72px);        /* títulos de sección */
  --fs-h1: clamp(44px, 7vw, 96px);        /* título de página interior */
  --fs-display: clamp(36px, 6vw, 100px);  /* frases grandes: CTA, "Sobre mí", "Cómo trabajo" */
  --ls-display: -.03em;

  /* ---- Espaciado y layout ---- */
  --gutter: 34px;
  --container: 1620px;
  --container-text: 1320px;               /* caso de estudio (lectura) */
  --space-section: clamp(60px, 10vw, 130px);
  --nav-h: 60px;

  /* ---- Radios ---- */
  --r-sm: 8px;      /* etiquetas, imágenes pequeñas */
  --r-md: 16px;     /* tarjetas, imágenes */
  --r-lg: 24px;     /* tarjetas grandes, imágenes destacadas */
  --r-pill: 999px;  /* botones, chips */

  /* ---- Movimiento ----
     Una curva principal (salida suave, sin rebote) y cuatro duraciones.
     Cualquier transición nueva debería usar estas variables. */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: .25s;     /* color, opacidad, hovers pequeños */
  --dur-base: .5s;      /* desplazamientos en hover, tarjetas */
  --dur-slow: .9s;      /* apariciones al hacer scroll */
  --dur-reveal: 1.1s;   /* títulos con máscara, imagen del hero */

  /* ---- Variables de GeneratePress ----
     GP pinta fondos, texto y enlaces con estas variables (body, contenedores,
     .site-info…). Redefinirlas es lo que antes se hacía con decenas de
     reglas "background: … !important" repartidas por varias hojas. */
  --contrast: var(--c-text);
  --contrast-2: var(--c-text-muted);
  --contrast-3: var(--c-text-subtle);
  --base: #1c1c1c;
  --base-2: var(--c-bg);
  --base-3: var(--c-bg);
  --accent: var(--c-accent);
}

@media (max-width: 900px) {
  html:root { --gutter: 20px; }
}

/* --------------------------------------------------------------------------
   3. BASE
   "html body" (2 elementos) gana a los selectores de 1 elemento de
   GeneratePress, que se imprimen después de esta hoja.
   -------------------------------------------------------------------------- */
html body {
  margin: 0;
  padding-top: var(--nav-h);   /* hueco para la nav fija (la home lo anula) */
  overflow-x: hidden;
  background-color: var(--c-bg);
  color: var(--c-text-muted);
  font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 780px) {
  html body { padding-top: 82px; }
}

html body :is(button, input, select, textarea) { font-family: inherit; }

html body :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--ls-display);
  color: var(--c-text);
}

/* Enlaces: sin subrayado por defecto (nav, botones, tarjetas)… */
html body a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}
/* …salvo en texto corrido (páginas legales, campos de texto del caso). */
html body :is(.entry-content, .pg-prose) :is(p, li) a {
  color: var(--c-accent);
  text-decoration: underline;
  text-underline-offset: .2em;
}
html body :is(.entry-content, .pg-prose) :is(p, li) a:hover { color: var(--c-accent-hover); }

::selection { background: var(--c-accent); color: var(--c-accent-ink); }

/* Foco de teclado: con el cursor personalizado, es la única señal de dónde
   está quien navega con teclado. Mismo anillo en toda la web. */
html body :is(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   4. NEUTRALIZAR GENERATEPRESS
   El header y el footer de GP se quitan por PHP (inc/setup.php). Aquí solo
   lo que queda: contenedores con fondo propio y la imagen destacada / título
   automáticos que GP añade por encima de nuestros heros.
   -------------------------------------------------------------------------- */
html body :is(.site, .site-content, .content-area, #primary, #main, .inside-article, .entry-content, .one-container .container, .separate-containers .inside-article) {
  background-color: transparent;
}

html body :is(.featured-image, .page-header-image, .page-header-image-single),
html body article.page > .inside-article > .entry-header,
html body.single-proyecto .entry-header,
html body > .site-footer:empty {
  display: none;
}

/* GP deja un botón con fondo al hacer hover/focus */
html body :is(button, [type=button], [type=submit]):is(:hover, :focus) { background-color: transparent; }

/* --------------------------------------------------------------------------
   5. EFECTO MAGNÉTICO (data-mag) — lo mueve cursor.js; esta transición
   amortigua la vuelta a reposo cuando el cursor se aleja.
   -------------------------------------------------------------------------- */
[data-mag] {
  transition: transform var(--dur-base) var(--ease-out);
  will-change: transform;
}

/* --------------------------------------------------------------------------
   6. CURSOR PERSONALIZADO (cursor.js) — solo con ratón.
   -------------------------------------------------------------------------- */
@media (pointer: fine) {
  body.pg-custom-cursor-enabled,
  body.pg-custom-cursor-enabled * {
    cursor: none !important; /* tiene que ganar a cualquier cursor:pointer */
  }

  .pg-cursor,
  .pg-cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
    pointer-events: none;
    opacity: 0;
  }

  .pg-cursor {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: var(--r-pill);
    mix-blend-mode: difference;
    transition:
      width var(--dur-fast) var(--ease-out),
      height var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) ease,
      opacity var(--dur-fast) ease;
  }

  .pg-cursor-label {
    opacity: 0;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    color: var(--c-text);
    white-space: nowrap;
    transition: opacity var(--dur-fast) ease;
  }

  .pg-cursor-dot {
    width: 7px;
    height: 7px;
    border-radius: var(--r-pill);
    background: var(--c-text);
    transition: opacity var(--dur-fast) ease, background-color var(--dur-fast) ease;
  }

  body.pg-custom-cursor-enabled .pg-cursor,
  body.pg-custom-cursor-enabled .pg-cursor-dot { opacity: 1; }

  body.pg-cursor-hover .pg-cursor {
    width: 58px;
    height: 58px;
    border-color: var(--c-accent);
  }
  body.pg-cursor-hover .pg-cursor-dot { background: var(--c-accent); }

  /* Objetivo con data-cursor: el anillo crece y muestra su texto */
  body.pg-cursor-labeled .pg-cursor {
    width: auto;
    min-width: 58px;
    height: 58px;
    padding: 0 14px;
  }
  body.pg-cursor-labeled .pg-cursor-label { opacity: 1; }
}

/* --------------------------------------------------------------------------
   7. MOVIMIENTO REDUCIDO — red de seguridad global. Cada componente puede
   afinar lo suyo, pero nada debería animarse de forma prolongada aquí.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}