/*
Theme Name: Despacho Theme (base)
Theme URI: https://solveadigital.com
Author: Solvea Digital
Author URI: https://solveadigital.com
Description: Tema base a medida para despacho de abogados. Construido con ACF, sin page builder. Paleta, tipografía, logo y video del hero son PLACEHOLDERS listos para sustituir — ver THEME-SETUP.md.
Version: 0.1.0
Requires PHP: 7.4
Text Domain: despacho-theme
*/

/* =========================================================================
   DESIGN TOKENS
   -------------------------------------------------------------------------
   Todo lo marcado como PLACEHOLDER debe sustituirse por la marca real del
   despacho (ver THEME-SETUP.md). El resto de valores (escalas, tiempos de
   animacion, curvas de easing) son decisiones de sistema y no dependen de
   la marca: se pueden mantener.
   ========================================================================= */

:root {
  /* --- Color: PLACEHOLDER hasta recibir la marca del despacho ------------
     Estrategia: restrained (neutros + un acento). Ancla de escena: bufete
     de abogados en Barcelona, luz de despacho/oficina, confianza y sobriedad,
     no "startup" ni "legaltech" juvenil. */
  --color-ink: #171a24;          /* PLACEHOLDER — casi negro azulado, color de autoridad (headers oscuros, texto) */
  --color-ink-soft: #2b2f3d;     /* PLACEHOLDER — variante mas clara de ink, para superficies oscuras secundarias */
  --color-stone: #f3f1ec;        /* PLACEHOLDER — fondo neutro calido (piedra, no crema/amarillento) */
  --color-stone-deep: #e7e3da;   /* PLACEHOLDER — variante mas oscura de stone, para separar secciones */
  --color-paper: #fbfaf8;        /* PLACEHOLDER — blanco casi puro para tarjetas/formularios sobre stone */
  --color-accent: #7a2e2e;       /* PLACEHOLDER — acento preciso (burdeos), solo para CTAs, enlaces, detalles */
  --color-accent-soft: #9c4b4b;  /* PLACEHOLDER — variante clara del acento, hover/estados */
  --color-line: rgba(23, 26, 36, 0.12);   /* lineas divisorias sobre fondos claros */
  --color-line-on-ink: rgba(251, 250, 248, 0.16); /* lineas divisorias sobre fondos oscuros */

  --color-text: var(--color-ink);
  --color-text-muted: #565a68;
  --color-text-on-ink: #f3f1ec;
  --color-text-on-ink-muted: #b7bac4;

  /* --- Tipografia: PLACEHOLDER — swap en THEME-SETUP.md -------------------
     Display: Newsreader (serif editorial, autoridad, no el tipico
     Playfair/cream). UI/cuerpo: IBM Plex Sans (precision, gran legibilidad
     en espanol, no generico system-ui). */
  --font-display: "Newsreader", "Iowan Old Style", "Georgia", serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;

  /* Escala tipografica (fluida, respeta el zoom/Dynamic Type del usuario) */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem);
  --text-display: clamp(2.75rem, 1.9rem + 3.6vw, 5.5rem);

  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-tighter: -0.03em;
  --tracking-normal: 0;
  --tracking-wide: 0.01em;

  /* --- Espaciado (rem, escala con el tamano de fuente del usuario) ------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3.25rem;
  --space-xl: 5.25rem;
  --space-2xl: 8.5rem;
  --space-3xl: 11rem;

  --content-max: 78rem;
  --measure: 68ch;

  /* --- Radios y sombras ---------------------------------------------------
     Sombras con offset + blur real (nunca halo de color a offset 0). */
  --radius-sm: 3px;
  --radius-md: 6px;
  --shadow-sm: 0 1px 2px rgba(23, 26, 36, 0.08), 0 1px 1px rgba(23, 26, 36, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(23, 26, 36, 0.22), 0 2px 6px rgba(23, 26, 36, 0.08);
  --shadow-lg: 0 24px 48px -16px rgba(23, 26, 36, 0.28), 0 4px 12px rgba(23, 26, 36, 0.1);

  /* --- Movimiento: curvas propias, no los easing planos de CSS ------------ */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}

/* =========================================================================
   RESET
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-stone);
  color: var(--color-text);
  font: 400 var(--text-base) / var(--leading-normal) var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure { margin: 0; }

/* Las listas dentro de contenido de usuario (entradas de blog, paginas
   legales, texto enriquecido de ACF) si necesitan viñetas/numeros: el
   reset de arriba las quita a nivel global porque casi toda la maquetacion
   del tema usa <ul>/<ol> para menus y grids, no para listas de prosa. */
.entry-content ul,
.entry-content ol {
  margin: 0 0 var(--space-sm);
  padding-left: 1.25em;
}
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li + li { margin-top: 0.4em; }
.entry-content li::marker { color: var(--color-accent); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   TIPOGRAFIA BASE
   ========================================================================= */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-ink);
  text-wrap: balance;
}
h1 { font-size: var(--text-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-tighter); }
h2 { font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
h3 { font-size: var(--text-2xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
h4 { font-size: var(--text-lg); line-height: var(--leading-snug); font-family: var(--font-body); font-weight: 600; }

p { max-width: var(--measure); }
p.lead { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-text-muted); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
}

/* Foco de teclado visible en todo el sitio */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* =========================================================================
   LAYOUT UTILIDADES
   ========================================================================= */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-sm);
}
@media (min-width: 900px) {
  .container { padding-inline: var(--space-md); }
}

.section { padding-block: var(--space-xl); }
.section--tight { padding-block: var(--space-lg); }
.section--ink { background: var(--color-ink); color: var(--color-text-on-ink); }
.section--paper { background: var(--color-paper); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -100px;
  background: var(--color-ink);
  color: var(--color-text-on-ink);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: var(--space-2xs); }