/* ============================================================
   Grupo LH — Design tokens (colors · typography · spacing · base)
   Single source of truth for the WordPress theme. Edit values
   here to retheme the whole site. Fonts are loaded from
   functions.php (wp_enqueue / preconnect) for performance.
   ============================================================ */
:root {
  /* --- Brand base palette (sampled from the corporate logo) --- */
  --lh-navy:        #00308c; /* primary — the blue "H" of the logo  */
  --lh-blue:        #1657a8; /* "Limpiezas" wordmark — links         */
  --lh-blue-light:  #5c86c2; /* "Henares" wordmark — secondary       */
  --lh-cyan:        #29a9e0; /* contact icons — bright accent        */
  --lh-red:         #e1232c; /* the red "L" — accent / required      */
  --lh-ink:         #0e0e10; /* near-black chrome                    */
  --lh-white:       #ffffff;

  /* --- Premium navy depth (dramatic anchor sections) --- */
  --lh-navy-deep:   #061026;
  --lh-navy-700:    #0a1838;
  --lh-navy-600:    #0e2456;

  /* --- Neutral ramp --- */
  --lh-grey-900:    #1a1a1a;
  --lh-grey-700:    #4a4a4a;
  --lh-grey-500:    #7c7c7c;
  --lh-grey-400:    #9aa0a6;
  --lh-grey-300:    #d9dce1;
  --lh-grey-100:    #eef0f3;
  --lh-grey-50:     #f7f8fa;

  /* --- Tints --- */
  --lh-navy-tint:   #eef2f9;
  --lh-cyan-tint:   #e3f3fb;
  --lh-red-tint:    #fce8e9;

  /* --- Gradients & glows --- */
  --grad-navy:      linear-gradient(150deg, #061026 0%, #0a1838 42%, #0e2456 100%);
  --grad-navy-soft: linear-gradient(160deg, #0a1838 0%, #0e2456 100%);
  --grad-cyan-line: linear-gradient(90deg, var(--lh-cyan) 0%, var(--lh-blue) 100%);
  --glow-cyan:      radial-gradient(60% 60% at 50% 0%, rgba(41,169,224,0.22) 0%, rgba(41,169,224,0) 70%);

  /* --- Semantic aliases (prefer these) --- */
  --brand-primary:        var(--lh-navy);
  --brand-primary-hover:  #002467;
  --brand-secondary:      var(--lh-blue);
  --brand-accent:         var(--lh-red);
  --brand-accent-hover:   #c01a22;
  --brand-bright:         var(--lh-cyan);

  --text-heading:   var(--lh-grey-900);
  --text-body:      var(--lh-grey-500);
  --text-strong:    var(--lh-grey-700);
  --text-muted:     var(--lh-grey-400);
  --text-on-dark:   var(--lh-white);
  --text-link:      var(--lh-blue);
  --text-required:  var(--lh-red);

  --surface-page:     var(--lh-white);
  --surface-subtle:   var(--lh-grey-100);
  --surface-tint:     var(--lh-grey-50);
  --surface-inverse:  var(--lh-navy-deep);
  --surface-card:     var(--lh-white);

  --border-default:   var(--lh-grey-300);
  --border-strong:    var(--lh-grey-400);
  --border-inverse:   rgba(255, 255, 255, 0.16);

  --focus-ring:       var(--lh-cyan);
  --overlay-scrim:    rgba(8, 22, 48, 0.62);

  /* --- Type families --- */
  --font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Weights --- */
  --fw-light: 300; --fw-regular: 400; --fw-medium: 500;
  --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800;

  /* --- Type scale (16px base) --- */
  --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem;
  --fs-lg: 1.375rem; --fs-xl: 1.75rem; --fs-2xl: 2.25rem; --fs-3xl: 3rem;
  --fs-4xl: 4rem; --fs-5xl: 5.25rem;

  /* --- Line heights --- */
  --lh-tight: 1.1; --lh-snug: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.7;

  /* --- Letter spacing --- */
  --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.04em; --ls-caps: 0.12em;

  /* --- Spacing scale (4px grid) --- */
  --sp-0: 0; --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.5rem; --sp-8: 3rem; --sp-9: 4rem;
  --sp-10: 5rem; --sp-12: 7rem;

  /* --- Radii --- */
  --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px;
  --radius-xl: 22px; --radius-pill: 999px; --radius-circle: 50%;

  /* --- Border widths --- */
  --bw-hair: 1px; --bw-thick: 2px;

  /* --- Elevation --- */
  --shadow-xs: 0 1px 2px rgba(6, 16, 38, 0.06);
  --shadow-sm: 0 2px 6px rgba(6, 16, 38, 0.06), 0 6px 16px rgba(6, 16, 38, 0.06);
  --shadow-md: 0 4px 12px rgba(6, 16, 38, 0.07), 0 16px 36px rgba(6, 16, 38, 0.10);
  --shadow-lg: 0 10px 24px rgba(6, 16, 38, 0.10), 0 30px 64px rgba(6, 16, 38, 0.16);
  --shadow-navy: 0 24px 60px -18px rgba(6, 16, 38, 0.55);
  --shadow-focus: 0 0 0 3px rgba(41, 169, 224, 0.35);

  /* --- Layout --- */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --header-h: 76px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 380ms;
}

/* ---------- Base element styles ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.003em;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-heading);
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
  letter-spacing: -0.025em;
}

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--brand-primary); }

img { display: block; max-width: 100%; }

ul, ol { margin: 0; padding: 0; }

::selection { background: var(--lh-cyan); color: #fff; }

:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--radius-sm);
}

/* ---------- Layout helpers ---------- */
.lh-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.lh-container--wide { max-width: 1320px; }
.lh-container--narrow { max-width: 880px; }

.lh-section { padding-block: clamp(4rem, 8vw, 7.5rem); }
.lh-section--tight { padding-block: clamp(2.75rem, 5vw, 4.5rem); }

/* skip link + a11y */
.lh-skip {
  position: absolute; left: -9999px; top: 0; z-index: 10000;
  background: #0a1838; color: #fff; padding: 12px 20px;
  border-radius: 0 0 8px 0; font-family: var(--font-display);
  font-weight: 600; text-decoration: none;
}
.lh-skip:focus { left: 0; }
.lh-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }