/* ============================================================
   SEARCH TALENT PROS — Heritage Kinetic
   Foundations + components
   ============================================================ */

/* ---- Fonts (Prumo Deck → Bodoni Moda, Basetica → Hanken Grotesk) ---- */
/* Fuentes de marca cargadas vía fonts.css (Prumo Deck + Basetica) */

:root{
  /* Surfaces */
  --paper:        #FFFFFF;
  --paper-dim:    #FFFFFF;
  --paper-low:    #FFFFFF;
  --white:        #FFFFFF;

  /* Brand */
  --red:          #DF1D2C;
  --red-deep:     #B6001C;
  --red-press:    #93000A;
  --purple:       #391C52;   /* deep purple — core / text */
  --purple-2:     #4B2C7B;   /* accent purple */
  --purple-soft:  #70518B;

  /* Tints */
  --purple-10:    rgba(57,28,82,.10);
  --purple-06:    rgba(57,28,82,.06);
  --purple-05:    rgba(57,28,82,.05);
  --purple-14:    rgba(57,28,82,.14);
  --red-08:       rgba(223,29,44,.08);
  --red-12:       rgba(223,29,44,.12);

  /* Text */
  --ink:          #25132F;   /* near-purple body ink */
  --ink-soft:     #5D3F5C;
  --ink-mute:     #8A7591;
  --on-dark:      #F6F1EC;
  --on-dark-soft: #C7B8CE;

  /* Type */
  --serif: 'Prumo Deck', Georgia, 'Times New Roman', serif;
  --sans:  'Basetica', system-ui, -apple-system, sans-serif;

  /* Radii */
  --r-sm: .5rem;
  --r:    1rem;
  --r-md: 1.5rem;
  --r-lg: 2rem;
  --r-xl: 3rem;
  --r-full: 9999px;

  /* Shadow — soft, deep-purple tinted */
  --sh-1: 0 2px 4px rgba(57,28,82,.06), 0 1px 2px rgba(57,28,82,.05);
  --sh-2: 0 8px 24px rgba(57,28,82,.10), 0 2px 6px rgba(57,28,82,.06);
  --sh-3: 0 24px 60px rgba(57,28,82,.16), 0 8px 18px rgba(57,28,82,.08);
  --sh-red: 0 10px 26px rgba(223,29,44,.30);

  /* Layout */
  --maxw: 1120px;
  --gutter: clamp(20px, 6vw, 104px);
  --ease: cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background:var(--red); color:#fff; }

/* ---- Type scale ---- */
.kicker{
  font-family:var(--sans);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--red);
  margin:0;
}
.display{
  font-family:var(--serif);
  font-weight:900;
  font-size:clamp(2.3rem, 4.8vw, 4rem);
  line-height:1.04;
  letter-spacing:-.02em;
  color:var(--purple);
  margin:0;
}
.h-xl{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(1.8rem, 3.4vw, 2.7rem);
  line-height:1.1;
  letter-spacing:-.015em;
  color:var(--purple);
  margin:0;
}
.h-lg{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.5rem, 2.6vw, 2.1rem);
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--purple);
  margin:0;
}
.h-md{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.35rem;
  line-height:1.25;
  color:var(--purple);
  margin:0;
}
.lede{
  font-size:clamp(1.02rem, 1.2vw, 1.18rem);
  line-height:1.6;
  font-weight:300;
  color:var(--ink-soft);
  margin:0;
}
.body{ font-size:1.0625rem; line-height:1.6; font-weight:300; color:var(--ink-soft); }
.em-red{ color:var(--red); }
.em-serif-i{ font-family:var(--sans); font-weight:500; font-style:normal; }

/* ---- Layout helpers ---- */
.wrap{ width:min(100% - var(--gutter)*2, var(--maxw)); margin-inline:auto; }
.wrap-wide{ width:min(100% - var(--gutter)*2, 1240px); margin-inline:auto; }
section{ position:relative; }
.section-pad{ padding-block:clamp(32px, 4.5vw, 72px); }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  font-family:var(--sans); font-weight:700; font-size:1rem; letter-spacing:.01em;
  padding:.95em 1.6em; border-radius:var(--r-full); border:1.5px solid transparent;
  transition:transform .18s var(--ease), background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  white-space:nowrap; line-height:1;
}
.btn svg{ width:1.1em; height:1.1em; }
.btn-primary{ background:var(--red); color:#fff; box-shadow:var(--sh-red); }
.btn-primary:hover{ background:var(--red-deep); transform:translateY(-2px); }
.btn-primary:active{ background:var(--red-press); transform:translateY(0); }
.btn-outline{ background:transparent; color:var(--purple); border-color:var(--purple-14); }
.btn-outline:hover{ border-color:var(--purple); background:var(--purple); color:#fff; transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--purple); }
.btn-ghost:hover{ background:var(--purple-06); }
.btn-on-dark{ background:#fff; color:var(--purple); }
.btn-on-dark:hover{ background:var(--paper); transform:translateY(-2px); }
.btn-outline-dark{ background:transparent; color:var(--on-dark); border-color:rgba(255,255,255,.28); }
.btn-outline-dark:hover{ border-color:#fff; background:rgba(255,255,255,.08); transform:translateY(-2px); }
.btn-sm{ padding:.7em 1.2em; font-size:.9rem; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.4em; font-weight:500; color:var(--red);
  font-size:.95rem; transition:gap .2s var(--ease);
}
.link-arrow svg{ width:1em; height:1em; transition:transform .2s var(--ease); }
.link-arrow:hover{ gap:.65em; }
.link-arrow:hover svg{ transform:translateX(3px); }

/* ---- Chips / tags ---- */
.chip{
  display:inline-flex; align-items:center; gap:.4em;
  padding:.4em .85em; border-radius:var(--r-full);
  background:var(--purple-06); color:var(--purple-2);
  font-weight:500; font-size:.82rem; letter-spacing:.01em;
}

/* ---- Reveal animation (progressive enhancement: visible by default) ---- */
.reveal{ opacity:1; transform:none; }
html.reveal-on .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
html.reveal-on .reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
.reveal[data-d="5"]{ transition-delay:.40s; }
@media (prefers-reduced-motion: reduce){
  html.reveal-on .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}