/* ══════════════════════════════════════════
   VCA — Components
   Buttons, badges, cards, eyebrows, process steps,
   service cards, manifesto pillars, portrait, stats.
══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   EYEBROWS
══════════════════════════════════════════ */
.hero-eyebrow {
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color: var(--blue-lt);
  display:flex; align-items:center; gap:12px; margin-bottom:22px;
}
.hero-eyebrow::before { content:''; width:18px; height:1px; background: var(--blue-lt); }

.eyebrow-lt {
  font-family:var(--mono); font-size:9px; letter-spacing:.26em;
  text-transform:uppercase; color: var(--blue);
  display:inline-flex; align-items:center; gap:10px; margin-bottom:18px;
}
.eyebrow-lt::before { content:''; width:16px; height:1px; background: var(--blue); }

.manifesto-eyebrow {
  font-family:var(--mono); font-size:9px; letter-spacing:.26em;
  text-transform:uppercase; color: var(--blue-lt);
  display:inline-flex; align-items:center; gap:12px; margin-bottom:36px;
}
.manifesto-eyebrow::before, .manifesto-eyebrow::after {
  content:''; width:20px; height:1px; background: var(--blue-lt);
}

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn-primary {
  background: rgba(91, 159, 232, 0.18);
  color: var(--on-dark);
  border: 1.5px solid rgba(91, 159, 232, 0.45);
  font-family:var(--sans); font-size:.85rem; font-weight:500;
  padding:13px 28px; border-radius:8px; cursor:pointer;
  transition: all .3s; white-space:nowrap;
}
.btn-primary:hover { filter:brightness(1.08); transform:translateY(-1px); }

.btn-ghost {
  display:inline-block;
  background:transparent; color: var(--on-dark-d);
  font-family:var(--sans); font-size:.85rem; font-weight:500;
  border: 1.5px solid var(--line-dark);
  padding:12px 24px; border-radius:8px;
  text-decoration:none; cursor:pointer;
  transition: border-color .2s, color .2s;
}
.btn-ghost:hover { border-color: rgba(255, 255, 255, 0.22); color: var(--on-dark); }

.nav-btn {
  font-family:var(--sans); font-size:0.82rem; font-weight:500;
  background: rgba(91, 159, 232, 0.18);
  color: var(--on-dark);
  border: 1.5px solid rgba(91, 159, 232, 0.45);
  padding:9px 22px; border-radius:8px;
  cursor:pointer; transition:all .3s; white-space:nowrap;
}
nav.lit .nav-btn {
  background: var(--blue-lt); color: var(--ink); border-color: var(--blue-lt);
}
.nav-btn:hover { filter:brightness(1.08); transform:translateY(-1px); }

/* ══════════════════════════════════════════
   MOBILE NAV (hamburger + slide-in drawer)
   Shown only at <600px; uses the same dark-hero treatment as the desktop nav.
══════════════════════════════════════════ */
.nav-burger {
  display:none;
  background:none; border:none; padding:0;
  width:44px; height:44px;
  cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center;
  gap:5px; flex-shrink:0;
}
.nav-burger span {
  display:block; width:22px; height:1.5px;
  background: var(--on-dark);
  border-radius:1px;
  transition: transform .3s ease, opacity .25s ease;
}
.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-backdrop {
  position:fixed; inset:0;
  background: rgba(5, 9, 18, 0.6);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity:0; pointer-events:none;
  transition: opacity .3s ease;
  z-index:198;
}
.nav-backdrop.open { opacity:1; pointer-events:auto; }

.nav-mobile {
  position:fixed; top:0; right:0;
  width:88%; max-width:340px; height:100vh;
  background: rgba(13, 24, 41, 0.98);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-left: 1px solid rgba(91,159,232,0.18);
  padding: 100px 32px 40px;
  display: flex; flex-direction:column; gap: 6px;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
  z-index:199;
}
.nav-mobile.open { transform: translateX(0); }
.nav-mobile a {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 300;
  color: var(--on-dark);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-dark);
  transition: color .2s ease, padding-left .2s ease;
}
.nav-mobile a:hover { color: var(--blue-lt); padding-left: 6px; }
.nav-mobile-cta {
  margin-top: 24px;
  font-family: var(--sans); font-size: .9rem; font-weight: 500;
  background: var(--blue-lt); color: var(--ink);
  border: none; padding: 14px 24px; border-radius: 8px;
  cursor: pointer;
  transition: filter .2s, transform .2s;
}
.nav-mobile-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Nav toggle: below 768px, hide the desktop links and show the hamburger.
   Co-located here so it overrides the .nav-burger base `display:none` above
   regardless of CSS file order. */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
}

/* Hero subhead accents — white text, light cobalt underline only.
   Two phrases share this treatment: "Latin America's infrastructure" and
   "Europe's energy transition". */
.hero-sub-em {
  color: var(--on-dark);
  text-decoration: underline;
  text-decoration-color: var(--blue-lt);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ══════════════════════════════════════════
   STATS (hero + about)
══════════════════════════════════════════ */
.stat-num {
  font-family:var(--serif); font-size:34px; font-weight:300;
  color: var(--on-dark); line-height:1; display:block; margin-bottom:3px;
}
.stat-num em { font-style:normal; color: var(--blue-lt); }
.stat-lbl {
  font-family:var(--mono); font-size:8px; letter-spacing:.16em;
  text-transform:uppercase; color: var(--on-dark-m);
}

.about-stats {
  display:grid; grid-template-columns:repeat(4, 1fr);
  border: 1px solid var(--blue-line); border-radius:4px;
  overflow:hidden; margin-top:38px;
}
.astat {
  padding:20px 16px; border-right: 1px solid var(--blue-line);
  background: var(--white); transition: background .25s;
}
.astat:last-child { border-right:none; }
.astat:hover { background: var(--blue-hover); }
.astat-num {
  font-family:var(--serif); font-size:36px; font-weight:300;
  color: var(--ink-body); line-height:1; display:block; margin-bottom:4px;
}
.astat-num em { font-style:normal; color: var(--blue); }
.astat-lbl {
  font-family:var(--mono); font-size:7.5px; letter-spacing:.16em;
  text-transform:uppercase; color: var(--ink-mute);
}

/* ══════════════════════════════════════════
   PROJECT CARDS — Hero carousel
══════════════════════════════════════════ */
.pcard-arrow {
  background:none; border:none; padding:0;
  width:24px; flex-shrink:0; cursor:pointer;
  opacity:.4; transition: opacity .2s, transform .2s;
}
.pcard-arrow:hover { opacity:1; transform:scale(1.15); }

.pcard-wrap {
  position:relative; flex:1; max-width:560px;
  animation: cardFloat 8s ease-in-out infinite;
}
.pcard-wrap:hover { animation-play-state:paused; }

.pcard-snake-svg {
  position:absolute; inset:-3px;
  width:calc(100% + 6px); height:calc(100% + 6px);
  pointer-events:none; z-index:10;
  opacity:0;
  transition: opacity .4s ease, transform .4s cubic-bezier(.25,.46,.45,.94);
  overflow:visible;
}
.pcard-wrap:hover .pcard-snake-svg { opacity:1; transform:scale(1.028); }

.pcard {
  background: rgba(8, 14, 26, 0.88);
  border: 1px solid rgba(21, 96, 196, 0.38);
  border-radius:16px;
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.5);
  opacity:0; position:absolute; top:0; left:0; width:100%;
  transition: opacity .7s ease, transform .4s cubic-bezier(.25,.46,.45,.94), box-shadow .4s ease;
  transform:translateY(8px) scale(0.99);
  pointer-events:none; overflow:hidden; z-index:2;
  /* The pcard is now an <a> — neutralize default link styling. */
  display:block; color:inherit; text-decoration:none;
}
.pcard.active { cursor:pointer; }
.pcard.active { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.pcard-wrap:hover .pcard.active {
  transform:scale(1.028);
  box-shadow:
    0 36px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(91, 159, 232, 0.15);
}

.pcard-header {
  padding:22px 26px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.pcard-flag-name { display:flex; flex-direction:column; gap:5px; }
.pcard-country-row { display:flex; align-items:center; gap:10px; }
.pcard-flag { line-height:1; flex-shrink:0; display:inline-flex; }

/* ── Flag chips (inline SVG sprite — see #flag-co/#flag-de/#flag-cl/#flag-pe) ── */
.flag-chip {
  display: inline-block;
  width: 24px;
  height: 16px;
  border-radius: 2px;
  vertical-align: middle;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 1px 2px rgba(0,0,0,0.15);
}
.flag-chip-lt { box-shadow: 0 0 0 1px rgba(13,24,41,0.10), 0 1px 2px rgba(13,24,41,0.06); }
.pcard-market {
  font-family:var(--mono); font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; color:#fff; font-weight:500;
}
.pcard-title {
  font-family:var(--serif); font-size:20px; font-weight:400;
  color: rgba(255, 255, 255, 0.6); line-height:1.2;
}
.pcard-type {
  font-family:var(--mono); font-size:8px; letter-spacing:.15em;
  text-transform:uppercase;
  background: rgba(21, 96, 196, 0.2);
  border: 1px solid rgba(21, 96, 196, 0.4);
  color: var(--blue-lt);
  padding:5px 10px; border-radius:5px;
  white-space:nowrap; flex-shrink:0; margin-top:2px;
}

.pcard-metrics {
  display:grid; grid-template-columns:1fr 1fr 1fr;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.pcard-metric { padding:20px 22px; border-right: 1px solid rgba(255, 255, 255, 0.07); }
.pcard-metric:last-child { border-right:none; }
.pcard-metric-lbl {
  font-family:var(--mono); font-size:7.5px; letter-spacing:.18em;
  text-transform:uppercase; color: var(--on-dark-m); margin-bottom:7px;
}
.pcard-metric-val {
  font-family:var(--serif); font-size:32px; font-weight:300;
  color: var(--on-dark); line-height:1;
}
.pcard-metric-val em { font-style:normal; color: var(--blue-lt); font-size:16px; }

.pcard-metrics-2 {
  display:grid; grid-template-columns:1fr 1fr;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.pcard-metric-2 { padding:14px 22px; border-right: 1px solid rgba(255, 255, 255, 0.07); }
.pcard-metric-2:last-child { border-right:none; }

.pcard-risks {
  padding:16px 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.pcard-risks-lbl {
  font-family:var(--mono); font-size:7.5px; letter-spacing:.2em;
  text-transform:uppercase; color: var(--on-dark-m); margin-bottom:10px;
}
.pcard-risk-list { display:flex; flex-direction:column; gap:8px; }
.pcard-risk {
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10.5px; color: var(--on-dark-d);
}
.risk-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.risk-hi  { background: var(--risk-hi);  box-shadow: 0 0 5px rgba(224, 92, 92, .5); }
.risk-mid { background: var(--risk-mid); box-shadow: 0 0 5px rgba(212, 168, 75, .4); }
.risk-lo  { background: var(--risk-lo);  box-shadow: 0 0 5px rgba(75, 173, 120, .4); }

.pcard-footer {
  padding:16px 26px;
  display:flex; align-items:center; justify-content:flex-end; gap:16px;
}
.pcard-readmore {
  font-family:var(--sans); font-size:12px; font-weight:500;
  color: var(--blue-lt);
  text-decoration: underline; text-underline-offset:4px;
  display:inline-flex; align-items:center; gap:8px;
  transition: gap .25s ease;
  flex-shrink:0;
}
/* Animate the arrow forward when the user hovers the (now-clickable) card */
.pcard-wrap:hover .pcard.active .pcard-readmore { gap:12px; }

.pcard-nav-dots {
  display:flex; justify-content:center; gap:8px;
  margin-top:14px; align-items:center;
}
.pnav-dot {
  position:relative;
  height:2px; width:20px; border-radius:1px;
  background: rgba(255, 255, 255, 0.22);
  cursor:pointer; border:none; padding:0;
  transition: background .3s, width .3s;
}
/* Hover preview — uses the same colour as the active dot so the user sees
   "this is what you'll select" before clicking */
.pnav-dot:hover { background: var(--blue-lt); }
.pnav-dot.on { background: var(--blue-lt); width:36px; }
/* Invisible expanded hit area — keeps the slim visual but makes dots easy to click */
.pnav-dot::after {
  content:''; position:absolute; inset:-14px -6px;
}

.pcard-illustrative {
  text-align:center; margin-top:10px;
  font-family:var(--mono); font-size:7.5px; letter-spacing:.18em;
  text-transform:uppercase; color: rgba(255, 255, 255, 0.18);
}

/* ══════════════════════════════════════════
   PROCESS STEPS
══════════════════════════════════════════ */
.pstep {
  padding:46px 38px;
  border-right: 1px solid var(--blue-line);
  position:relative; overflow:hidden;
  background: var(--white); transition: background .3s;
}
.pstep:last-child { border-right:none; }
.pstep:hover { background: var(--blue-hover); }
.pstep-num {
  position:absolute; bottom:-24px; right:14px;
  font-family:var(--serif); font-size:108px; font-weight:200;
  color: rgba(21, 96, 196, 0.07); line-height:1;
  pointer-events:none; transition: color .3s;
}
.pstep:hover .pstep-num { color: rgba(21, 96, 196, 0.13); }
.pstep-icon {
  width:34px; height:34px; border-radius:7px;
  background: var(--blue-soft);
  border: 1px solid var(--blue-line);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.pstep-title {
  font-family:var(--serif); font-size:24px; font-weight:400;
  color: var(--ink-body); margin-bottom:12px;
}
.pstep-body { font-size:13.5px; color: var(--ink-soft); line-height:1.72; }

/* ══════════════════════════════════════════
   SERVICE CARDS (Practice)
══════════════════════════════════════════ */
.scard {
  background: var(--white);
  border: 1px solid var(--blue-line);
  border-radius:4px; overflow:hidden;
  transition: box-shadow .3s;
}
.scard:hover { box-shadow: 0 8px 32px rgba(21, 96, 196, 0.08); }
.scard-top {
  padding:30px 34px;
  display:grid; grid-template-columns:1fr 160px; gap:24px; align-items:start;
}
.scard-tag {
  display:inline-block; margin-bottom:12px;
  font-family:var(--mono); font-size:8px; letter-spacing:.18em;
  text-transform:uppercase; color: var(--blue);
  background: var(--blue-soft);
  padding:4px 10px; border-radius:3px;
}
.scard-name {
  font-family:var(--serif); font-size:22px; font-weight:400;
  color: var(--ink-body); margin-bottom:10px;
}
.scard-body { font-size:13px; color: var(--ink-soft); line-height:1.7; }
.scard-img {
  width:160px; height:108px; border-radius:3px;
  background: linear-gradient(135deg, var(--blue-soft) 0%, rgba(21, 96, 196, 0.02) 100%);
  border: 1px solid var(--blue-line);
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
}
.scard-img::before {
  content:''; position:absolute; inset:0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(21, 96, 196, 0.04) 0,
    rgba(21, 96, 196, 0.04) 1px,
    transparent 1px,
    transparent 9px
  );
}
.scard-img-lbl {
  font-family:var(--mono); font-size:7.5px; letter-spacing:.18em;
  text-transform:uppercase; color: rgba(21, 96, 196, 0.3);
  position:relative; z-index:1;
}
.scard-ft {
  padding:13px 34px;
  border-top: 1px solid var(--blue-line);
  display:flex; gap:16px; flex-wrap:wrap;
}
.smkt {
  font-family:var(--mono); font-size:7.5px; letter-spacing:.16em;
  text-transform:uppercase; color: var(--ink-mute);
}

/* ══════════════════════════════════════════
   MANIFESTO PILLARS + CTA
══════════════════════════════════════════ */
.manifesto-pillars {
  display:grid; grid-template-columns:1fr 1fr 1fr;
  border: 1px solid rgba(21, 96, 196, .22);
  border-radius:6px; overflow:hidden; margin-bottom:48px;
}
.manifesto-pillar {
  padding:22px 18px;
  border-right: 1px solid rgba(21, 96, 196, .15);
  background: rgba(21, 96, 196, .06);
  transition: background .25s;
}
.manifesto-pillar:last-child { border-right:none; }
.manifesto-pillar:hover { background: rgba(21, 96, 196, .1); }
.pillar-num {
  font-family:var(--serif); font-size:30px; font-weight:300;
  color: rgba(255, 255, 255, .95); line-height:1; margin-bottom:7px;
}
.pillar-num em { font-style:normal; color: var(--blue-lt); font-size:15px; margin-left:3px; }
.pillar-lbl {
  font-family:var(--mono); font-size:8px; letter-spacing:.18em;
  text-transform:uppercase; color: rgba(255, 255, 255, .3);
}
.manifesto-cta {
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color: var(--blue-lt);
  text-decoration:underline; text-underline-offset:5px;
  cursor:pointer; background:none; border:none;
}

/* ══════════════════════════════════════════
   PORTRAIT (About)
══════════════════════════════════════════ */
.portrait {
  width:100%; aspect-ratio:4/5; border-radius:4px; overflow:hidden;
  position:relative;
  background: linear-gradient(160deg, var(--blue-soft) 0%, rgba(21, 96, 196, 0.02) 100%);
  border: 1px solid var(--blue-line);
}
/* Stacked portrait images — auto-crossfade on a 5s cycle, pauses on hover.
   Click on the visible one toggles immediately and resets the cycle. */
.portrait-img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  cursor: pointer;
  transition: opacity .7s cubic-bezier(.4, 0, .2, 1);
}
.portrait-img-b { opacity: 0; pointer-events: none; }
.portrait.toggled .portrait-img-a { opacity: 0; pointer-events: none; }
.portrait.toggled .portrait-img-b { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .portrait-img { transition: none; }
}

/* Wrapper that holds the photo + the dot selector underneath.
   Becomes the grid item of .about-layout (replacing bare .portrait). */
.portrait-stage {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Dot selector — same line-shape pattern as the hero card .pnav-dot,
   adjusted for the light about section. */
.portrait-nav-dots {
  display: flex; justify-content: center; gap: 8px;
  align-items: center;
}
.portrait-nav-dot {
  position: relative;
  height: 2px; width: 22px; border-radius: 1px;
  background: rgba(13, 24, 41, 0.22);
  cursor: pointer; border: none; padding: 0;
  transition: background .3s ease, width .3s ease;
}
.portrait-nav-dot:hover { background: var(--blue); }
.portrait-nav-dot.on { background: var(--blue); width: 36px; }
/* Invisible expanded click area — keeps the dot slim but easy to tap */
.portrait-nav-dot::after {
  content:''; position: absolute; inset: -14px -6px;
}

.about-h2 {
  font-family:var(--serif); font-weight:300;
  font-size:clamp(32px, 3.2vw, 46px); line-height:1.1;
  color: var(--ink-body); margin-bottom:20px;
}
.about-h2 em { font-style:italic; color: var(--blue); }
.about-p { font-size:14px; color: var(--ink-soft); line-height:1.78; margin-bottom:16px; }

.cfa-chip {
  display:inline-flex; align-items:center; gap:10px;
  margin-top:6px; padding:10px 14px;
  background: var(--blue-soft);
  border: 1px solid var(--blue-line);
  border-radius:4px;
}
.cfa-badge {
  background: var(--blue); color: #fff;
  font-family:var(--mono); font-size:8px; letter-spacing:.14em;
  padding:3px 8px; border-radius:3px;
}
.cfa-text { font-size:12px; color: var(--ink-soft); }

/* ══════════════════════════════════════════
   PREVIEW MODE — temporary
   Remove this entire block (plus the
   .preview-ribbon element and the
   .preview-note spans in index.html) once
   the site goes live with final figures.
══════════════════════════════════════════ */
.preview-ribbon {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 250;
  height: 32px;
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  padding: 0 20px;
  background: linear-gradient(180deg, rgba(13,24,41,0.98) 0%, rgba(13,24,41,0.95) 100%);
  border-bottom: 1px solid rgba(91, 159, 232, 0.22);
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  pointer-events: none;
}
.preview-ribbon .pr-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue-lt);
  box-shadow: 0 0 8px rgba(91, 159, 232, 0.6);
  animation: prPulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
.preview-ribbon .pr-em { color: rgba(255, 255, 255, 0.88); }
@keyframes prPulse {
  0%, 100% { opacity: 0.55; box-shadow: 0 0 4px rgba(91,159,232,0.35); }
  50%      { opacity: 1;    box-shadow: 0 0 10px rgba(91,159,232,0.85); }
}
/* Push nav down so the ribbon sits cleanly above it */
nav { top: 32px; }

/* Section-level "indicative" note (sits below stat groups) */
.preview-note {
  display: block;
  margin-top: 18px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, 0.42);
}
.preview-note.pn-light { color: var(--ink-mute); }
/* Manifesto pillars carry margin-bottom: 48px which collapses with the
   note's margin-top. Pull the note up so it sits close to the pillars. */
.manifesto .preview-note {
  margin-top: -30px;
  margin-bottom: 28px;
}
.preview-note .pn-dot {
  display: inline-block;
  width: 3px; height: 3px; border-radius: 50%;
  background: currentColor; opacity: .55;
  vertical-align: middle;
  margin: 0 9px 2px;
}

@media (max-width: 600px) {
  .preview-ribbon {
    height: 28px;
    font-size: 9px;
    letter-spacing: .18em;
    padding: 0 14px;
    gap: 9px;
  }
  .preview-ribbon .pr-text-long { display: none; }
  nav { top: 28px; }
  .preview-note { font-size: 12px; margin-top: 14px; }
}