/* =============================================================
   HumanHR — styles.css (light theme: white / black / emerald)
   1. Tokens  2. Reset  3. Utilities  4. Typography  5. Components
   6. Sections  7. Effects  8. Responsive  9. Reduced motion
   ============================================================= */

/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg: #ffffff;
  --bg-2: #f3f9f7;
  --surface: #f3f9f7;
  --surface-strong: #e9f4ef;

  --ink: #0a0a0a;
  --ink-soft: rgba(10, 10, 10, 0.78);
  --ink-mute: rgba(10, 10, 10, 0.56);
  --ink-faint: rgba(10, 10, 10, 0.36);

  --on-dark: #ffffff;
  --on-dark-mute: rgba(255, 255, 255, 0.72);
  --on-dark-faint: rgba(255, 255, 255, 0.5);

  --accent: #0f6e56;
  --accent-2: #0c5a46;
  --accent-bright: #14a37f;
  --accent-soft: rgba(15, 110, 86, 0.1);
  --accent-line: rgba(15, 110, 86, 0.32);

  --line: rgba(10, 10, 10, 0.1);
  --line-soft: rgba(10, 10, 10, 0.07);

  --footer-bg: #e7e7e7;

  --display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;
  /* Section titles (h1/h2) only — h3/h4 and everything else stay on
     Inter, per request. */
  --display-heading: "Sora", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* One deliberately bolder, more "agency" accent face — used only for
     the hero graphic's center phrase, nowhere else, so it reads as a
     signature moment rather than a second body font. */
  --display-accent: "Sora", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --container: 1240px;
  --radius: 16px;
  --radius-sm: 10px;
  --nav-h: 78px;
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; text-align: justify; }
ul { list-style: none; padding: 0; }
input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  text-wrap: balance;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-weight: 700;
}
/* Section-title weight only (h1/h2) — h3/h4 stay Inter like the rest
   of the type system. */
h1, h2 { font-family: var(--display-heading); }

.hl { color: var(--accent); }

/* Wherever "HumanHR" appears written out in running text, it borrows the
   logo's own rounded, heavy-weight face instead of the body/heading font —
   so the name reads as the brand mark, not just another word in the
   sentence. Doesn't apply inside all-caps mono kickers; mixing a rounded
   display face into that uniform label would read as a mistake, not intent. */
.brand-font { font-family: var(--display); font-weight: 700; }

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =============================================================
   3. Utilities
   ============================================================= */
.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: 9999;
  padding: 0.7rem 1.1rem; background: var(--ink); color: #fff;
  border-radius: 8px; font-weight: 600; transition: top 0.3s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

.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;
}

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.5rem; }

.kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}
.kicker::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.kicker-lg { font-size: 1.1rem; font-weight: 500; }

.section-head { max-width: 640px; margin-bottom: 3rem; }
.section-head.center, .section-head.center p { max-width: 680px; margin-inline: auto; text-align: center; }
.section-head .kicker { margin-bottom: 1rem; }
.section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin-bottom: 0.9rem; }
.section-head p { color: var(--ink-mute); font-size: 1.05rem; }

section { position: relative; padding-block: clamp(4.5rem, 9vw, 8rem); }
/* A faint dot texture ties every light section back to the same "dots and
   connections" language as the map and the markers — quiet enough to sit
   behind text without competing with it. */
.section-alt { background: var(--bg-2); position: relative; }

/* Section seams — each section that meets a differently-colored neighbor
   blends straight from that neighbor's color into its own over a short
   run at the top, instead of a hard cut.
   NOT applied to the two seams touching the dark value-prop band
   (mision->value-prop, value-prop->valores): interpolating in a
   straight line between near-black and a light color always passes
   through middle gray — that's just what RGB lerp between those two
   endpoints *is*, transparency or no. Short or long, it reads as a
   dirty smudge, not a blend. A bold dark band reads better with a
   crisp edge anyway (like a pull-quote block), so those two stay flat
   color with no gradient. The remaining seams are all light<->light,
   where the interpolation never dips through gray, so the blend
   actually looks clean. Skipped entirely where two neighbors already
   share the same color (diferenciales -> testimonios). */
#nosotros.section-alt { background: linear-gradient(to bottom, var(--bg), var(--bg-2) 56px); }
#diferenciales.section-alt { background: linear-gradient(to bottom, var(--bg), var(--bg-2) 56px); }
#mision { background: linear-gradient(to bottom, var(--bg-2), var(--bg) 56px); }
#servicios { background: linear-gradient(to bottom, var(--bg-2), var(--bg) 56px); }
#contacto.contact-section { background: linear-gradient(to bottom, var(--bg-2), var(--bg) 56px); }
.section-alt::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(15, 110, 86, 0.14) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 65% at 50% 0%, #000 0%, transparent 78%);
}

/* =============================================================
   5. Components
   ============================================================= */

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.95rem 1.7rem; border-radius: 999px; font-weight: 600; font-size: 0.95rem;
  white-space: nowrap;
  transition: transform 0.45s var(--ease-soft), box-shadow 0.45s var(--ease-soft), background 0.3s var(--ease-out), color 0.3s var(--ease-out), border-color 0.3s;
}
.btn-primary {
  background: var(--accent); color: #ffffff;
  box-shadow: 0 10px 26px rgba(15, 110, 86, 0.22);
}
.btn-primary:hover { transform: translateY(-3px); background: var(--accent-2); box-shadow: 0 18px 40px rgba(15, 110, 86, 0.3); }
.btn-primary:active { transform: translateY(-1px); transition-duration: 0.12s; }

.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--accent-line); background: var(--accent-soft); transform: translateY(-3px); }

/* The hero sits on the map, not a plain background — a thin outline button
   can get lost against it, so these get a solid card behind them instead. */
.hero-ctas .btn-ghost {
  background: rgba(255, 255, 255, 0.92); border: 1.5px solid var(--ink);
  box-shadow: 0 8px 24px rgba(10, 10, 10, 0.12);
}
.hero-ctas .btn-ghost:hover {
  background: #fff; border-color: var(--accent); box-shadow: 0 12px 30px rgba(10, 10, 10, 0.18);
}

.btn-outline-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.35); }
.btn-outline-light:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); transform: translateY(-3px); }

.btn-sm { padding: 0.7rem 1.3rem; font-size: 0.85rem; }
.btn-block { width: 100%; }

/* Nav */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 500;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  transition: background-color 0.4s var(--ease-out), backdrop-filter 0.4s var(--ease-out), border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 8px 30px rgba(10, 10, 10, 0.05);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 1rem; }
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand-lockup { height: 52px; width: auto; display: block; }
@media (max-width: 539px) { .brand-lockup { height: 40px; } }

.nav-links { display: none; align-items: center; gap: 1.3rem; }
.nav-link { position: relative; font-size: 0.86rem; font-weight: 700; color: var(--ink-soft); padding: 0.3rem 0; white-space: nowrap; }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-quick-actions { display: none; align-items: center; gap: 0.7rem; }

.nav-toggle {
  display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid var(--line); flex-shrink: 0;
}
.nav-toggle svg { width: 18px; height: 18px; }
.nav-toggle .icon-close { display: none; }
.nav-open .nav-toggle .icon-open { display: none; }
.nav-open .nav-toggle .icon-close { display: block; }

.nav-mobile {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s var(--ease-soft);
  padding: 2rem;
}
.nav-mobile[aria-hidden="false"] { clip-path: inset(0 0 0 0); }
.nav-mobile a { font-family: var(--display); font-size: 1.5rem; color: var(--ink); font-weight: 600; }
.nav-mobile .nav-mobile-divider { width: 60px; height: 1px; background: var(--line); margin-block: 0.4rem; }
.nav-mobile .btn { margin-top: 0.6rem; }

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 2rem;
}
[data-tilt] {
  --rx: 0deg; --ry: 0deg;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 0.55s var(--ease-soft), border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
[data-tilt]:hover {
  transition-duration: 0.15s;
  border-color: var(--accent-line);
  box-shadow: 0 30px 60px -24px rgba(10, 10, 10, 0.22), 0 0 0 1px var(--accent-soft);
}

/* Forms */
.field { position: relative; }
.field.full { grid-column: 1 / -1; }
.field label {
  display: block; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--ink-mute);
  margin-bottom: 0.5rem;
}
.field input, .field select, .field textarea {
  width: 100%; padding: 0.9rem 1rem; border-radius: 10px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent); background: var(--accent-soft);
}
/* Keyboard focus still gets the site's global ring (accessibility) —
   only mouse-click focus skips it, since the border/bg swap above
   already answers "where am I" for a pointer user. */
.field input:focus:not(:focus-visible), .field select:focus:not(:focus-visible), .field textarea:focus:not(:focus-visible) {
  outline: none;
}
.field textarea { resize: vertical; min-height: 120px; }
.field select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'><path d='M5 7.5L10 12.5L15 7.5' stroke='%230f6e56' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; }

.form-note { font-size: 0.82rem; color: var(--ink-faint); margin-top: 0.9rem; }

/* =============================================================
   6. Sections
   ============================================================= */

/* Splash */
.splash {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg);
  display: grid; place-items: center;
  transition: opacity 0.8s var(--ease-out), clip-path 1s var(--ease-soft);
  animation: splashSafety 0.01s 3.5s forwards;
}
.splash.is-out { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); }
@keyframes splashSafety { to { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); } }
.splash-mark { width: 56px; height: 56px; object-fit: contain; animation: splashPulse 1.6s ease-in-out infinite; }
@keyframes splashPulse { 0%, 100% { opacity: 0.45; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1); } }

/* Hero — dark. The signature moment is a custom radial "network" graphic
   (a stand-in for a whiteboard mind-map) instead of a photo: a pulsing
   center node with the value words cycling through, six value props
   around it, connected by traveling light beams. Stacks under the copy
   on narrow screens (a 6-node radial diagram has no legible way to sit
   *behind* text on a phone), sits beside it from 960px up. */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: calc(var(--nav-h) + 1rem);
  padding-bottom: 0.75rem;
  overflow: clip;
  isolation: isolate;
}
/* TEST — inverted palette per request: white bg, dark text, to see how
   it reads before committing either way. Revert by swapping the colors
   below back (or ask and I'll do it). */
.hero-dark { background: #fff; }

.hero-glow {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(55% 50% at 82% 42%, rgba(15, 110, 86, 0.1), transparent 70%),
    radial-gradient(90% 70% at 10% 15%, rgba(15, 110, 86, 0.05), transparent 60%);
}

.hero-grid { display: grid; gap: 3.5rem; align-items: start; }

.hero-content { max-width: 680px; }
.hero-content h1 {
  font-size: clamp(2.5rem, 5.8vw, 4.6rem);
  margin-block: 0.9rem 1rem;
  color: var(--ink);
  text-transform: uppercase;
}
.hero-content h1 .hl { color: var(--accent); }
/* "agencias" and "talentos" get a brief glow pulse a beat after the rest
   of the headline settles — reads as the two sides "connecting", tying
   back to the headline's own meaning. Triggered by JS (initTextReveals)
   adding .is-connect-glow once the word-by-word reveal has landed. */
.hero-connect-word.is-connect-glow { animation: heroConnectGlow 0.9s ease-out; }
@keyframes heroConnectGlow {
  0% { text-shadow: 0 0 0 rgba(15, 110, 86, 0); }
  35% { text-shadow: 0 0 22px rgba(15, 110, 86, 0.85), 0 0 6px rgba(15, 110, 86, 0.6); }
  100% { text-shadow: 0 0 0 rgba(15, 110, 86, 0); }
}
@media (prefers-reduced-motion: reduce) { .hero-connect-word.is-connect-glow { animation: none; } }
.hero-content .kicker { color: var(--ink); }
.hero-content .kicker::before { background: var(--accent); }
.hero-content .lede { font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: var(--ink-soft); max-width: 52ch; margin-bottom: 0.5rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 0.4rem; margin-bottom: 0.25rem; }

/* Hero graphic — the network diagram itself. Square, self-contained,
   scales as one unit so the SVG beams (drawn in a 0–600 viewBox) and the
   HTML node chips (positioned by the matching percentage) always line
   up, at any size. Nodes are fully opaque, so they naturally cover the
   segment of ray that runs underneath them — no beam ever shows through
   a card, it just visually terminates at the edge. */
.hero-graphic {
  display: none;
  position: relative;
  width: min(94vw, 460px);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}
/* 3D tilt (shares the site's existing [data-tilt] mechanism — see
   initTilt in main.js). preserve-3d on the parent plus a translateZ
   per layer (rays flat, nodes lifted, center card lifted furthest) is
   what turns the mouse-follow rotation into actual depth instead of a
   flat skew — the center card visibly "floats" above the nodes, which
   float above the connecting lines, as the whole thing tilts. */
.hero-graphic[data-tilt]:hover { border-color: transparent; box-shadow: none; }
.hero-graphic-rays { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.ray { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; opacity: 0.3; }
.ray--primary { stroke-width: 2.5; opacity: 0.5; }

/* All six travel on the exact same clock (same duration, no delay) so
   they leave the center and land on their nodes together. Institutional
   green, no glow filter — a quiet moving accent, not a neon scanner. */
.ray-pulse {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 20 300;
  animation: rayTravel 3s linear infinite;
}
.ray-pulse--primary { stroke-width: 3; stroke-dasharray: 30 300; }
@keyframes rayTravel { to { stroke-dashoffset: -320; } }
@media (prefers-reduced-motion: reduce) { .ray-pulse { animation: none; opacity: 0; } }

.hero-graphic-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) translateZ(55px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.3em;
  max-width: 72%;
  padding: 1.1rem 1.5rem;
  border-radius: 28px;
  background: var(--surface);
  border: 1px solid rgba(10, 10, 10, 0.07);
  box-shadow: 0 14px 32px rgba(10, 10, 10, 0.1);
  font-family: var(--display-accent); font-weight: 800;
  font-size: clamp(0.95rem, 3.4vw, 1.4rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--ink);
  text-align: center;
}
.hero-graphic-center-word {
  display: inline-block;
  width: 15ch;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-style: italic;
  color: var(--accent);
}
.hero-graphic-center-word.is-cycling-out { animation: wordCycleOut 0.38s ease forwards; }
.hero-graphic-center-word.is-cycling-in { animation: wordCycleIn 0.42s ease forwards; }
@keyframes wordCycleOut { to { transform: translateY(12px); opacity: 0; filter: blur(2px); } }
@keyframes wordCycleIn { from { transform: translateY(-12px); opacity: 0; filter: blur(2px); } to { transform: none; opacity: 1; filter: blur(0); } }
@media (prefers-reduced-motion: reduce) {
  .hero-graphic-center-word.is-cycling-out, .hero-graphic-center-word.is-cycling-in { animation: none; }
}

.hero-node {
  position: absolute;
  transform: translate(-50%, -50%) translateZ(22px);
  display: flex; align-items: center; justify-content: center;
  max-width: 7.6rem;
  padding: 0.65rem 1.05rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid rgba(10, 10, 10, 0.07);
  box-shadow: 0 8px 20px rgba(10, 10, 10, 0.09);
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.74rem;
  line-height: 1.25;
  color: var(--ink-soft);
  text-align: center;
  transition: transform 0.25s var(--ease-out), background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.hero-node--primary {
  font-weight: 700; font-size: 0.9rem;
  max-width: 8.6rem;
  padding: 0.8rem 1.35rem;
  background: var(--accent);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 22px rgba(10, 10, 10, 0.14);
  transform: translate(-50%, -50%) translateZ(36px);
}
@media (hover: hover) and (pointer: fine) {
  .hero-node:hover {
    transform: translate(-50%, -50%) translateZ(22px) scale(1.05);
    border-color: rgba(15, 110, 86, 0.35);
    box-shadow: 0 10px 22px rgba(10, 10, 10, 0.12);
  }
  .hero-node--primary:hover {
    transform: translate(-50%, -50%) translateZ(36px) scale(1.05);
    background: var(--accent-2);
    box-shadow: 0 12px 26px rgba(10, 10, 10, 0.16);
  }
}

.hero-node--top { left: 50%; top: 7.5%; }
.hero-node--upper-right { left: 86.83%; top: 28.83%; }
.hero-node--lower-right { left: 86.83%; top: 71.33%; }
.hero-node--bottom { left: 50%; top: 92.5%; }
.hero-node--lower-left { left: 13.17%; top: 71.33%; }
.hero-node--upper-left { left: 13.17%; top: 28.83%; }

.hero-scroll-cue {
  position: absolute; left: 1.5rem; bottom: 2.2rem;
  display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(10,10,10,0.45);
}
.hero-scroll-cue .line { width: 30px; height: 1px; background: rgba(10,10,10,0.2); position: relative; overflow: hidden; }
.hero-scroll-cue .line::after {
  content: ""; position: absolute; inset: 0; background: var(--accent-bright);
  animation: scrollCue 2.4s ease-in-out infinite;
}
@keyframes scrollCue { 0% { transform: translateX(-100%); } 50% { transform: translateX(0); } 100% { transform: translateX(100%); } }

/* Client logos ("Confían en nosotros") — a conveyor belt: the row drifts
   right, and a logo that exits past the right edge is already re-entering
   from the left, because the track is the logo set duplicated once and
   animated from -50% to 0% of its own (double) width. Works the same
   whether there's one logo or many. */
.client-logos-marquee {
  overflow: hidden; width: 100%;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.client-logos-track {
  display: flex; align-items: center; gap: 2.2rem; width: max-content;
  animation: clientMarquee 16s linear infinite;
}
@keyframes clientMarquee { from { transform: translateX(-50%); } to { transform: translateX(0%); } }
@media (prefers-reduced-motion: reduce) { .client-logos-track { animation: none; } }
.client-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.client-logo img {
  height: 68px; width: auto; border-radius: 10px;
  filter: grayscale(1) opacity(0.55);
  transition: filter 0.35s var(--ease-out);
}
.client-logo:hover img,
.client-logo:focus-visible img { filter: grayscale(0) opacity(1); }

/* Propuesta de valor — dark punch band. Two slow, blurred glow blobs drift
   behind the text so the black panel feels alive rather than a flat slab;
   the text sits in its own stacking context so it's always on top. */
.value-prop {
  background: var(--ink);
  color: #fff;
  padding-block: clamp(4rem, 8vw, 6.5rem);
  position: relative; overflow: hidden;
}
.value-prop::before, .value-prop::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none;
}
.value-prop::before {
  width: 420px; height: 420px; background: var(--accent-bright); opacity: 0.22;
  top: -160px; left: -100px;
  animation: valuePropDrift1 19s ease-in-out infinite alternate;
}
.value-prop::after {
  width: 360px; height: 360px; background: var(--accent); opacity: 0.28;
  bottom: -170px; right: -80px;
  animation: valuePropDrift2 23s ease-in-out infinite alternate;
}
@keyframes valuePropDrift1 { from { transform: translate(0, 0); } to { transform: translate(110px, 50px); } }
@keyframes valuePropDrift2 { from { transform: translate(0, 0); } to { transform: translate(-90px, -40px); } }
@media (prefers-reduced-motion: reduce) {
  .value-prop::before, .value-prop::after { animation: none; }
}
.value-prop-inner, .value-prop-inner p { max-width: 900px; margin-inline: auto; text-align: center; position: relative; z-index: 1; }
.value-prop-label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 500; color: #fff;
}
.value-prop-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.value-prop-inner p {
  font-family: var(--display); font-weight: 500; letter-spacing: -0.01em;
  font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.4; color: #fff;
  margin-top: 1.5rem;
}
.value-prop-inner strong { color: var(--accent); font-weight: 600; }
.value-prop-cta { margin-top: 2.2rem; }

/* Mission & Values */
/* A large, very faint isotipo bleeding off the edge — the one quiet
   signature touch for what's otherwise just a label and a sentence. */
#mision { position: relative; overflow: hidden; }
#mision::before {
  content: ""; position: absolute; top: 50%; right: -70px; transform: translateY(-50%);
  width: 380px; height: 380px; pointer-events: none;
  background: url("assets/brand/logo.png?v=20260729p") no-repeat center / contain;
  opacity: 0.07;
}
@media (max-width: 900px) { #mision::before { display: none; } }
.mission-block { max-width: 760px; position: relative; }
.mission-block .mission-label {
  font-family: var(--mono); font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 500; color: var(--accent); margin-bottom: 1.1rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.mission-block .mission-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.mission-block p { font-family: var(--display); font-weight: 600; font-size: clamp(1.4rem, 2.6vw, 2rem); color: var(--ink); line-height: 1.3; }

.values-label {
  font-family: var(--mono); font-size: 1.1rem; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 500; color: var(--accent); margin-bottom: 1.6rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.values-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
/* Flex, not grid — 5 cards means the last row is never a full set of
   columns, and flex-wrap + justify-content:center is what lets that
   leftover row center itself instead of hugging the left edge. */
.values-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.value-card {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  padding: 1.4rem 1.5rem; display: flex; align-items: flex-start; gap: 1rem;
  flex: 0 1 100%;
  transition: transform 0.35s var(--ease-out), border-color 0.3s ease, box-shadow 0.35s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .value-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-line);
    box-shadow: 0 18px 34px -20px rgba(10, 10, 10, 0.22);
  }
  .value-card:hover .value-icon { transform: scale(1.08) rotate(-4deg); }
}
/* Justify reads badly on this narrow a column — only a few words per
   line, so it stretches gaps into visible rivers. Left-align instead. */
.value-card p { text-align: left; }
.value-card .value-icon {
  width: 42px; height: 42px; border-radius: 12px; background: var(--accent); color: #fff;
  display: grid; place-items: center; flex-shrink: 0;
  transition: transform 0.35s var(--ease-soft);
}
.value-card .value-icon svg { width: 22px; height: 22px; }
.value-card h4 { font-size: 1.02rem; margin-bottom: 0.25rem; }
.value-card p { color: var(--ink-mute); font-size: 0.88rem; }

/* Services accordion */
.services-list { border-top: 1px solid var(--line-soft); }
.accordion-item { border-bottom: 1px solid var(--line-soft); }
.accordion-trigger {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: 1.9rem; text-align: left;
}
/* A small icon square per service — matches the same rounded-square icon
   language used on the value/differentiator cards, so this section (which
   was previously just numbers and text) reads as part of the same system. */
.trigger-icon {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 12px; background: var(--accent-soft);
  display: grid; place-items: center; transition: background 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.trigger-icon svg { width: 19px; height: 19px; color: var(--accent); }
.accordion-item.is-open .trigger-icon { background: var(--accent); transform: scale(1.05); }
.accordion-item.is-open .trigger-icon svg { color: #fff; }
.accordion-trigger .num { font-family: var(--mono); color: var(--accent); font-size: 0.85rem; }
.accordion-trigger .title-group { display: flex; align-items: baseline; gap: 1.1rem; flex: 1; }
.accordion-trigger h3 { font-size: clamp(1.15rem, 2vw, 1.55rem); color: var(--ink); }
.accordion-trigger .summary { color: var(--ink-mute); font-size: 0.92rem; display: none; }
.accordion-icon {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--line);
  display: grid; place-items: center; transition: transform 0.4s var(--ease-soft), border-color 0.3s, background 0.3s;
}
.accordion-icon svg { width: 14px; height: 14px; transition: transform 0.4s var(--ease-soft); color: var(--ink); }
.accordion-item.is-open .accordion-icon { border-color: var(--accent); background: var(--accent-soft); }
.accordion-item.is-open .accordion-icon svg { transform: rotate(180deg); color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .accordion-trigger:hover .accordion-icon { border-color: var(--accent-line); }
}
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.5s var(--ease-soft); }
.accordion-panel-inner { padding-bottom: 1.9rem; max-width: 62ch; color: var(--ink-mute); }
.accordion-panel-inner ul { display: flex; flex-direction: column; gap: 0.55rem; }
.accordion-panel-inner ul li { position: relative; padding-left: 1.5rem; font-size: 0.95rem; }
.accordion-panel-inner ul li::before {
  content: ""; position: absolute; left: 0; top: 0.5em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}

/* Differentiators */
.diff-grid { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
.diff-cta { display: flex; justify-content: center; margin-top: 2.6rem; }
.diff-card .diff-icon {
  width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft);
  display: grid; place-items: center; margin-bottom: 1.3rem;
}
.diff-card .diff-icon svg { width: 20px; height: 20px; color: var(--accent); }
.diff-card h3 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.diff-card p { color: var(--ink-mute); font-size: 0.94rem; text-align: left; }

/* About */
.about-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
.about-visual {
  position: relative; aspect-ratio: 1; border-radius: 24px;
  background: radial-gradient(circle at 30% 30%, var(--accent-soft), transparent 60%), var(--surface);
  border: 1px solid var(--line-soft);
  display: grid; place-items: center; overflow: hidden;
}
.about-visual img { width: 46%; opacity: 0.94; }
.about-visual::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 38px, rgba(10,10,10,0.025) 39px);
}
.about-text p { margin-bottom: 1.1rem; color: var(--ink-mute); }
.about-text h2 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: 1.3rem; }

/* Testimonials */
.testimonial-carousel { display: flex; align-items: center; gap: 1rem; }
.testimonial-carousel .testimonial-viewport { flex: 1; min-width: 0; }
.testimonial-arrow {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-soft); background: #fff; color: var(--ink);
  display: grid; place-items: center;
  transition: background 0.25s var(--ease-out), border-color 0.25s var(--ease-out), color 0.25s var(--ease-out), transform 0.15s var(--ease-out);
}
.testimonial-arrow svg { width: 18px; height: 18px; }
.testimonial-arrow:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.testimonial-arrow:active { transform: scale(0.9); }
@media (max-width: 640px) {
  .testimonial-carousel { gap: 0.5rem; }
  .testimonial-arrow { width: 36px; height: 36px; }
  .testimonial-arrow svg { width: 15px; height: 15px; }
}
.testimonial-viewport { overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line-soft); background: var(--surface); }
.testimonial-track { display: flex; transition: transform 0.6s var(--ease-soft); }
.testimonial-card { flex: 0 0 100%; padding: clamp(2rem, 5vw, 3.6rem); }
.testimonial-card blockquote { font-family: var(--display); font-size: clamp(1.25rem, 2.4vw, 1.7rem); color: var(--ink); line-height: 1.35; margin-bottom: 1.6rem; }
.testimonial-meta { color: var(--ink-mute); font-size: 0.9rem; }
.testimonial-meta strong { color: var(--ink); }
.testimonial-dots { display: flex; justify-content: center; gap: 0.6rem; margin-top: 1.6rem; }
.testimonial-dots button { width: 8px; height: 8px; border-radius: 50%; background: var(--line); transition: background 0.3s, width 0.3s; }
.testimonial-dots button.is-active { background: var(--accent); width: 22px; border-radius: 5px; }

/* Contact */
.contact-section { position: relative; overflow: clip; }
.contact-mesh {
  position: absolute; inset: -10% -5%; z-index: -1;
  background: radial-gradient(50% 40% at var(--mx, 30%) var(--my, 40%), rgba(15,110,86,0.12), transparent 65%);
  filter: blur(80px);
  animation: meshDrift 24s ease-in-out infinite;
}
@keyframes meshDrift { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(4%, -4%); } }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
.contact-info h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin-bottom: 1.1rem; }
.contact-info p { color: var(--ink-mute); margin-bottom: 2rem; max-width: 46ch; }
.contact-detail { display: flex; align-items: center; gap: 0.9rem; padding-block: 0.9rem; border-top: 1px solid var(--line-soft); }
.contact-detail:last-child { border-bottom: 1px solid var(--line-soft); }
.contact-detail svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.contact-detail a, .contact-detail span { color: var(--ink-soft); font-size: 0.95rem; }

.contact-form-wrap { position: relative; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: clamp(1.6rem, 3vw, 2.4rem); }
.field-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin-bottom: 1.1rem; }

.cta-form-spinner { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; }
.cta-form.is-sending .cta-form-label { opacity: 0; }
.cta-form.is-sending .cta-form-spinner { opacity: 1; }
.cta-form-spinner::after {
  content: ""; width: 18px; height: 18px; border: 1.5px solid rgba(255,255,255,0.4); border-top-color: #fff;
  border-radius: 50%; animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
[type=submit] { position: relative; }

.cta-form-error { display: none; color: #b3261e; font-size: 0.85rem; margin-top: 0.8rem; }
.cta-form-error.is-visible { display: block; }

.contact-success {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 2rem;
  background: var(--surface); border-radius: var(--radius);
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-soft);
}
.contact-success.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.contact-success svg { width: 46px; height: 46px; color: var(--accent); margin-bottom: 1rem; }
.contact-success h3 { font-size: 1.3rem; margin-bottom: 0.6rem; }
.contact-success p { color: var(--ink-mute); font-size: 0.94rem; }

/* Footer — light gray so the brand mark reads clearly against it. */
.footer {
  background: linear-gradient(to bottom, var(--bg), var(--footer-bg) 56px);
  color: rgba(10,10,10,0.72); padding-block: 3.5rem 2.5rem;
}
.footer-top { display: flex; flex-direction: column; gap: 2.2rem; margin-bottom: 2.4rem; }
.footer-tagline { color: rgba(10,10,10,0.6); font-size: 0.9rem; max-width: 34ch; }
/* The brand mark closes out the page — same exact logo/type treatment as
   the nav, placed after everything else, including the copyright line. */
.footer-brand-close { display: flex; justify-content: center; padding-top: 2.2rem; margin-top: 1.8rem; border-top: 1px solid rgba(10,10,10,0.12); }
.footer-brand-close .brand-lockup { height: 64px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.6rem; align-content: flex-start; }
.footer-links a { position: relative; color: rgba(10,10,10,0.72); font-size: 0.9rem; }
.footer-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform 0.35s var(--ease-out);
}
.footer-links a:hover { color: var(--ink); }
.footer-links a:hover::after { transform: scaleX(1); transform-origin: left; }

.footer-contact { display: flex; flex-direction: column; gap: 0.9rem; align-items: flex-start; }
.footer-contact a { display: inline-flex; align-items: center; gap: 0.6rem; color: rgba(10,10,10,0.85); font-size: 0.92rem; transition: color 0.2s; }
.footer-contact a:hover { color: var(--ink); }
.footer-contact svg { width: 17px; height: 17px; color: var(--accent); flex-shrink: 0; }
.footer-contact .footer-social { margin-top: 0.4rem; }

.footer-social { display: flex; gap: 0.9rem; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(10,10,10,0.18);
  display: grid; place-items: center; transition: border-color 0.3s, background 0.3s;
  color: var(--ink);
}
.footer-social a:hover { border-color: var(--accent); background: rgba(15,110,86,0.12); }
.footer-social svg { width: 16px; height: 16px; }
.footer-bottom { display: flex; flex-direction: column; gap: 0.6rem; padding-top: 1.8rem; border-top: 1px solid rgba(10,10,10,0.12); color: rgba(10,10,10,0.45); font-size: 0.82rem; }

/* =============================================================
   7. Effects
   ============================================================= */
[data-reveal] {
  opacity: 0; transform: translateY(32px);
  transition: opacity 0.8s var(--ease-soft), transform 0.8s var(--ease-soft);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }

/* Cards cascade in one after another instead of popping in all at once. */
.diff-grid > [data-reveal]:nth-child(1) { transition-delay: 0s; }
.diff-grid > [data-reveal]:nth-child(2) { transition-delay: 0.08s; }
.diff-grid > [data-reveal]:nth-child(3) { transition-delay: 0.16s; }
.diff-grid > [data-reveal]:nth-child(4) { transition-delay: 0.24s; }
.values-grid > [data-reveal]:nth-child(1) { transition-delay: 0s; }
.values-grid > [data-reveal]:nth-child(2) { transition-delay: 0.07s; }
.values-grid > [data-reveal]:nth-child(3) { transition-delay: 0.14s; }
.values-grid > [data-reveal]:nth-child(4) { transition-delay: 0.21s; }
.values-grid > [data-reveal]:nth-child(5) { transition-delay: 0.28s; }

/* Word-by-word heading reveal — each word rises out of a clipped box.
   No hidden-by-default CSS here on purpose: only the JS that runs the
   animation ever hides a word, so if the script fails, headings render
   as plain, fully visible text. */
.split-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.split-word-inner { display: inline-block; will-change: transform; }

.is-ready .hero-content { animation: heroIn 1s var(--ease-soft) both; }
@keyframes heroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Custom cursor — a precise dot plus a softly-trailing ring that grows over
   anything clickable. The native cursor is only hidden once the JS is
   actually running and has placed the pointer (see .has-custom-cursor and
   .is-visible), so nothing ever goes invisible if the script fails. */
.has-custom-cursor, .has-custom-cursor a, .has-custom-cursor button {
  cursor: none;
}
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none;
  z-index: 900; opacity: 0; transition: opacity 0.2s var(--ease-out);
}
.cursor-dot.is-visible, .cursor-ring.is-visible { opacity: 1; }
.cursor-dot { width: 6px; height: 6px; background: var(--accent); }
.cursor-ring {
  width: 34px; height: 34px; border: 1.5px solid rgba(15, 110, 86, 0.45);
  transition: opacity 0.2s var(--ease-out), width 0.25s var(--ease-out), height 0.25s var(--ease-out), border-color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.cursor-ring.is-hovering {
  width: 54px; height: 54px; border-color: var(--accent); background: rgba(15, 110, 86, 0.08);
}
@media (max-width: 900px) {
  .has-custom-cursor, .cursor-dot, .cursor-ring { display: none !important; cursor: auto !important; }
}

/* =============================================================
   8. Responsive
   ============================================================= */
@media (min-width: 540px) {
  .diff-grid { grid-template-columns: repeat(2, 1fr); }
  .value-card { flex-basis: calc(50% - 0.5rem); }
}

@media (min-width: 720px) {
  .container { padding-inline: 2.2rem; }
  .accordion-trigger .summary { display: block; }
  .field-grid.two-col { grid-template-columns: 1fr 1fr; }
  .footer-top { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
}

@media (min-width: 960px) {
  .diff-grid { grid-template-columns: repeat(4, 1fr); }
  .value-card { flex-basis: calc(33.333% - 0.667rem); }
  .about-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 0.85fr 1.15fr; }
  .hero-content { max-width: 620px; }
  .hero-grid { grid-template-columns: 1fr 1fr; column-gap: 2rem; row-gap: 0.5rem; }
  .hero-ctas { grid-column: 1 / -1; }
  .hero-graphic { display: block; width: 100%; max-width: 480px; margin-inline-start: auto; }
  .hero-node { max-width: none; white-space: nowrap; font-size: 0.86rem; padding: 0.75rem 1.3rem; }
  .hero-node--primary { max-width: none; font-size: 1.05rem; padding: 0.95rem 1.6rem; }
  .hero-graphic-center { max-width: 60%; padding: 1.2rem 1.6rem; }
}

/* Nav gets its own (wider) breakpoint — seven links need more room than
   the standard 960px step before they stop cramping against the CTAs. */
@media (min-width: 1280px) {
  .nav-links { display: flex; }
  .nav-quick-actions { display: flex; }
  .nav-toggle { display: none; }
}


/* =============================================================
   9. Reduced motion — only intrusive effects gated
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .splash-mark { animation: none; }
  .hero-scroll-cue .line::after { animation: none; }
  .is-ready .hero-content { animation: none; }
  /* Tilt, hover, reveals, count-up stay ON, just shorter/slower via JS or a longer duration here */
}