/* ══════════════════════════════════════════════════════
   ASYMMETRY — SHARED BASE
   Fonts, design tokens, reset, buttons, navbar, footer and the
   responsive breakpoints. Every page links this; page-specific rules
   stay in that page's inline <style>.
   NOTE: url() below resolves against THIS FILE, not the page, so the
   font paths are root-relative. Same reason article pages under
   /magazine/ use root-relative asset paths.
   ══════════════════════════════════════════════════════ */

/* ── FONTS ─────────────────────────────────────────── */
@font-face { font-family:'Arteks'; src:url('/asymmetry/fonts/Arteks%20Regular.otf') format('opentype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Arteks'; src:url('/asymmetry/fonts/Arteks%20Bold.otf') format('opentype'); font-weight:700; font-display:swap; }
@font-face { font-family:'DM Sans'; src:url('/asymmetry/fonts/DMSans-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'DM Sans'; src:url('/asymmetry/fonts/DMSans-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'DM Mono'; src:url('/asymmetry/fonts/DMMono-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }

/* ── RESET ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--f-body); color:var(--text); background:var(--cream); overflow-x:hidden; }
img { display:block; max-width:100%; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }

/* ── TOKENS ─────────────────────────────────────────── */
:root {
  /* Palette — sourced from Figma 6634-4691 (Figma name in comment) */
  --purple:      #6254C3;  /* MORADO  */
  --navy:        #29334C;  /* AZUL    */
  --cream:       #F7F6F4;  /* BLANCO  */
  --text:        #1C1B19;  /* NEGRO   */
  --lavender:    #EDEBF5;  /* LAVANDA */
  --beige:       #D9CBB8;  /* ARENA   */
  --lt-purple:   #ADA6D1;  /* LILA    */
  --gray:        #D9DAD9;  /* GRIS    */

  /* Interaction states — not in the static frame, applied manually */
  --beige-dark:  #BBAB9B;  /* ARENA  hover/focus */
  --beige-darker:#AC9D8F;  /* ARENA  active — derived, 8% below --beige-dark */
  --cream-dark:  #DCD9D4;  /* BLANCO hover/focus */
  --cream-darker:#CAC8C3;  /* BLANCO active — derived, 8% below --cream-dark */
  --purple-dark: #4E439C;  /* MORADO hover/active — navbar CTA, unused in the hero */

  /* Legacy aliases — no Figma equivalent, kept so existing markup resolves.
     Remove once the body sections are rebuilt. */
  --services-bg: var(--lavender);
  --results-bg:  #BDBFCD;

  /* Eyebrow block rhythm — one value for all six section eyebrows.
     --eyebrow-rule-gap puts the baseline 11.0px above the rule; it was
     6/8/9px and a fluid % depending on the section. */
  --eyebrow-rule-gap:  6px;
  --eyebrow-title-gap: 10px;

  --f-head: 'Arteks', Georgia, serif;
  --f-body: 'DM Sans', system-ui, sans-serif;
  --f-mono: 'DM Mono', 'Courier New', monospace;
  --radius: 12px;
  --sec-v:  96px;

  /* Typography scale — fluid via clamp() */
  --fs-h1:      clamp(2.5rem, 5.5vw, 4.625rem);   /* 74px — Figma headline */
  --fs-h2:      clamp(2rem, 5vw, 3.5rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.5rem);
  --fs-body-lg: clamp(1.0625rem, 1.5vw, 1.25rem);
  --fs-body:    clamp(1rem, 1.1vw, 1.0625rem);
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.78125rem;

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

/* ── CONTAINER ─────────────────────────────────────── */
.container { width:100%; max-width:1280px; margin:0 auto; padding:0 80px; }

/* ── FADE-UP ────────────────────────────────────────── */
.fade-up { opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.fade-up.visible { opacity:1; transform:none; }

/* ── BUTTONS ────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 26px; border-radius:8px;
  font-family:var(--f-body); font-size:14px; font-weight:400;
  cursor:pointer; white-space:nowrap;
  transition:opacity .2s, transform .15s;
}
.btn:hover { transform:translateY(-1px); opacity:.9; }
.btn-dark   { background:var(--text); color:var(--cream); }
.btn-cream  { background:var(--cream); color:var(--navy); }
.btn-purple { background:var(--purple); color:#F7F6F2; }

/* ══════════════════════════════════════════════════════
   NAVBAR  ·  container/layout/navbar  (Figma 6634:4849, 1440×73)
══════════════════════════════════════════════════════ */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  /* carried over: same translucency + blur as the previous navbar */
  background:rgba(247,246,243,.65);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  border-bottom:1px solid rgba(0,0,0,.06);
  transition:box-shadow .3s;
}
.navbar.scrolled { box-shadow:0 8px 32px rgba(0,0,0,.08); }

.nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:73px;                 /* Figma frame height */
  padding:0 65px 0 71px;       /* Figma */
}
/* Logo swap, ported from main. Two layers cross-fade on .scrolled; the
   isotipo is absolutely positioned so the anchor keeps the wordmark's
   184px width in both states and the nav never reflows mid-transition. */
.nav-logo { position:relative; display:flex; align-items:center; }
.nav-logo img { width:184px; height:auto; display:block; }  /* Figma 184×30.834 */
.nav-logo__wordmark,
.nav-logo__isotype { transition:opacity .3s ease, transform .3s ease; }
.nav-logo__wordmark { opacity:1; transform:scale(1); }
.nav-logo__isotype {
  position:absolute; left:0; top:0; height:100%; width:auto;
  opacity:0; transform:scale(.85);
  color:var(--navy);   /* navy paths follow `color`, as in .hero-isotype */
}
.nav-logo__isotype .isotype-accent { fill:var(--purple); }
.navbar.scrolled .nav-logo__wordmark { opacity:0; transform:scale(.95); pointer-events:none; }
.navbar.scrolled .nav-logo__isotype  { opacity:1; transform:scale(1); }
/* Reduced motion: the swap still happens, it just cuts instead of fading. */
@media (prefers-reduced-motion: reduce) {
  .nav-logo__wordmark, .nav-logo__isotype { transition:none; }
}

/* gap 44, not the frame's 69 — 4 x 69 = 276px of gaps exceeded the five
   labels combined (368.61) and pushed the desktop floor to 1244px. */
.nav-links { display:flex; align-items:center; gap:44px; }
.nav-links a {
  font-family:var(--f-body); font-size:16px; font-weight:400;
  line-height:20px; color:var(--text);
  /* Flex items floor at min-content, which for "Perfil ASYMMETRY" is just
     "ASYMMETRY" — so below ~1196px the label broke onto a second line and
     grew the bar into the logo. nowrap raises that floor to the full label,
     making the shortfall overflow visibly instead of silently reflowing. */
  white-space:nowrap;
  /* no hover state — none defined in the frame */
}
/* "Nosotros" is styled as the active item in the frame — static, no scroll-spy */
.nav-links a.is-active { font-weight:700; color:var(--purple); }

.nav-actions { display:flex; align-items:center; justify-content:flex-end; gap:54px; }

/* Language selector — visual only; no EN/ES switching wired up */
.nav-lang {
  display:flex; align-items:center; gap:6px;
  font-family:var(--f-body); font-size:16px; font-weight:400;
  line-height:20px; color:var(--text);
}
/* Sized to DM Sans's cap height, not its em box: sCapHeight is 700/1000,
   so .7em = 11.2px at 16px and the globe matches the height of the "ES"
   rather than overshooting it the way a 1em icon would. */
.nav-lang img { width:.7em; height:.7em; display:block; }

.btn-nav {
  display:inline-flex; align-items:center; justify-content:center;
  width:144px; height:41px; padding:10px 12px;   /* Figma */
  background-color:var(--purple); color:var(--cream);
  font-family:var(--f-body); font-size:16px; font-weight:400; line-height:20px;
  border-radius:5px; white-space:nowrap;
  transition:background-color .2s ease;
}
.btn-nav:hover, .btn-nav:focus-visible, .btn-nav:active
  { background-color:var(--purple-dark); }

@media (prefers-reduced-motion: reduce) { .btn-nav { transition:none; } }

.hamburger { display:none; flex-direction:column; gap:5px; padding:8px; }
.hamburger span {
  display:block; width:22px; height:2px;
  background:var(--text); border-radius:2px;
  transition:transform .3s, opacity .3s;
}
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display:none; position:fixed; inset:0;
  background:var(--cream); z-index:999;
  flex-direction:column; align-items:center;
  justify-content:center; gap:36px;
}
.mobile-menu.open { display:flex; }
.mobile-menu a:not(.btn) {
  font-family:var(--f-body); font-size:clamp(1.5rem, 5vw, 2rem); font-weight:500;
  color:var(--text); line-height:1.4; letter-spacing:-0.01em;
}
.mobile-menu a:not(.btn):hover { color:var(--purple); }
.mobile-menu .btn {
  background:var(--purple); color:#ffffff;
  font-family:var(--f-body); font-weight:500;
  font-size:1rem; padding:14px 32px;
  border-radius:12px; margin-top:16px;
  transition:transform .2s ease, box-shadow .2s ease;
}
.mobile-menu .btn:hover {
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(98,84,195,.3);
  opacity:1;
}

/* Section eyebrow rules. The line is a stroked path with pathLength="1"
   so one dash value draws it; the dot is a separate circle that fades in
   as the line lands. Both take their paint from the svg's `color`. */
.eyebrow-line { fill:none; stroke:currentColor; stroke-width:1; }
.eyebrow-dot  { fill:currentColor; transform-box:fill-box; transform-origin:center; }

@media (prefers-reduced-motion: no-preference) {
  /* Hidden states live inside no-preference, so `reduce` renders the
     finished mark with no animation to cancel. */
  .fade-up .eyebrow-line { stroke-dasharray:1; stroke-dashoffset:1; }
  .fade-up .eyebrow-dot  { opacity:0; }
  .fade-up.visible .eyebrow-line { animation:isotype-draw 900ms ease-out both; }
  .fade-up.visible .eyebrow-dot  { animation:eyebrow-dot-in 250ms ease-out both 900ms; }
}
/* These two carry .fade-up only to be picked up by the observer; they sit
   in absolutely positioned layouts, so fade-up's own translate would slide
   them out of register with the static text beside them. */
.footer-rule.fade-up { opacity:1; transform:none; }

@keyframes eyebrow-dot-in { from { opacity:0; transform:scale(.4); }
                            to   { opacity:1; transform:scale(1); } }

@keyframes isotype-draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }

/* ══════════════════════════════════════════════════════
   FOOTER  ·  section/footer  (Figma 6634:4696, 1440×458)
══════════════════════════════════════════════════════ */
.footer {
  background:var(--cream);
  margin-top:clamp(96px, 12.15vw, 175px);   /* CTA bottom 9107 -> footer 9282 */
}
.footer-top { position:relative; height:376px; }

.footer-logo {
  position:absolute; left:3.4722%; top:26px;   /* 50 / 1440 */
  width:29.9306%;                              /* 431 / 1440 */
  height:auto; display:block;
}
/* 502px rule + terminal dot - Figma 6634:4697 */
.footer-rule {
  position:absolute; left:0; top:117px;
  width:34.8611%;                              /* 502 / 1440 */
  height:5.333px; display:block;
}
.footer-rule { color:var(--purple); }

.footer-social {
  position:absolute; left:9.4553%; top:158px;  /* 136.155 / 1440 */
  display:flex; align-items:center; gap:41px;  /* uniform in the frame */
}
.footer-social a { display:block; transition:opacity .2s ease; }
.footer-social a:hover { opacity:.6; }
.footer-social img { display:block; width:auto; }
.ft-tiktok { height:44px; }     .ft-instagram { height:33.13px; }
.ft-fb     { height:43.82px; }  .ft-x         { height:43.82px; }

.footer-tagline {
  position:absolute; left:3.4722%; top:228px;
  max-width:34.8611%;
  font-family:var(--f-body); font-size:var(--fs-body);
  font-weight:400; line-height:24px; color:var(--text); margin:0;
}

/* Contact card - Figma 6634:4713 */
.footer-card {
  position:absolute; left:50.7639%; top:0;     /* 731 / 1440 */
  width:45.7639%; height:233px;                /* 659 / 1440 */
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:41px;
  background:var(--purple); border-radius:5px;
}
.footer-card-head {
  display:flex; align-items:center; justify-content:space-between;
  width:89.2261%; padding:0 16px;              /* 588 / 659 */
}
.footer-card-head h2 {
  font-family:var(--f-head); font-size:var(--fs-h2);   /* 58px in Figma */
  font-weight:700; line-height:66px;
  color:var(--cream); margin:0; white-space:nowrap;
}
.footer-card-btn {
  display:flex; align-items:center; justify-content:center;
  width:143px; height:54px;
  background:var(--cream); border:1px solid var(--text); border-radius:5px;
  transition:opacity .2s ease;
}
.footer-card-btn:hover { opacity:.85; }
.footer-card-btn img { width:37px; height:36px; display:block; }
.footer-card-rule { width:91.3506%; height:1px; background:var(--cream); }  /* 602 / 659 */
.footer-card-mail {
  display:flex; align-items:center; gap:29px;
  font-family:var(--f-body); font-size:var(--fs-h3);   /* 24px in Figma */
  font-weight:400; line-height:24px;
  color:var(--lavender); opacity:.69;
  transition:opacity .2s ease;
}
.footer-card-mail:hover { opacity:1; }
.footer-card-mail img { width:27px; height:22px; display:block; }

/* Bottom bar - Figma 6634:4701 */
.footer-bottom {
  background:var(--text);
  height:82px; padding:10px 52px;
  display:flex; align-items:center;
}
.footer-bottom-inner {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; height:52px; padding:0 79px;
  border:1px solid var(--cream);
  font-family:var(--f-body); font-size:var(--fs-body);
  font-weight:400; line-height:24px; color:var(--cream);
  white-space:nowrap;
}
.footer-legal { display:flex; align-items:center; gap:48px; }
.footer-legal a { color:var(--cream); text-decoration:underline; transition:opacity .2s ease; }
.footer-legal a:hover { opacity:.7; }

@media (max-width:860px) {
  .footer { margin-top:64px; }
  .footer-top {
    height:auto; padding:48px 24px;
    display:flex; flex-direction:column; gap:32px;
  }
  .footer-logo, .footer-rule, .footer-social,
  .footer-tagline, .footer-card { position:static; }
  .footer-logo { width:70%; max-width:280px; }
  .footer-rule { width:100%; }
  .footer-tagline { max-width:none; }
  .footer-card { width:100%; height:auto; padding:32px 20px; gap:28px; }
  .footer-card-head { width:100%; flex-direction:column; gap:20px; padding:0; }
  .footer-card-head h2 { font-size:36px; line-height:1.2; }
  .footer-card-rule { width:100%; }
  .footer-card-mail { font-size:18px; gap:16px; }
  .footer-bottom { height:auto; padding:24px; }
  .footer-bottom-inner {
    flex-direction:column; gap:16px; height:auto;
    padding:20px 24px; white-space:normal; text-align:center;
  }
  .footer-legal { flex-wrap:wrap; justify-content:center; gap:20px; }
}

/* ══════════════════════════════════════════════════════
   WA FLOAT
══════════════════════════════════════════════════════ */
.wa-float {
  position:fixed; bottom:28px; right:28px; z-index:900;
  width:56px; height:56px; background:var(--purple);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(98,84,195,.42);
  transition:transform .2s, box-shadow .2s;
}
.wa-float:hover { transform:scale(1.08); box-shadow:0 12px 32px rgba(98,84,195,.52); }
.wa-float svg { width:28px; height:28px; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
/* Measured, not rounded: content is 960.34px (logo 184 + links 544.61 +
   actions 231.73); with 136px padding the groups touch at 1096.34, and a
   24px minimum gutter between each pair puts the floor at 1144.34. */
@media (max-width:1144px) {
  .container  { padding:0 56px; }
  .nav-inner  { padding:0 56px; }
  .nav-links  { display:none; }
  .nav-actions .btn-nav { display:none; }
  .hamburger  { display:flex; }
}

@media (max-width:900px) {
  .container  { padding:0 36px; }
  .nav-inner  { padding:0 36px; }
}

@media (max-width:540px) {
  :root { --sec-v:64px; }
  .container  { padding:0 22px; }
  .nav-inner  { padding:0 22px; }
  .wa-float { bottom:20px; right:20px; }
}