/* ==========================================================================
   Alsari Capital — homepage
   Ported from the Claude Design canvas "Alsari Capital Homepage.dc.html".
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  --ink:          #07080A;
  --ink-veil:     #0A0C10;
  --paper:        #EDEBE6;
  --paper-bright: #F4F2ED;
  --gold:         #C9A96A;
  --gold-lit:     #E3C88C;
  --gold-soft:    #E6D6B2;
  --mute:         #A8ADB5;
  /* was #6E747D — only 4.25:1 on the page background, under the 4.5:1 floor,
     and the portfolio carousel dimmed it further. #9AA0A8 reads 7.60:1 and
     still sits a clear step below --mute. */
  --mute-dim:     #9AA0A8;

  --line:      rgba(168, 173, 181, 0.16);
  --line-soft: rgba(168, 173, 181, 0.10);
  --gold-line: rgba(201, 169, 106, 0.55);

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --gutter: clamp(24px, 4vw, 72px);
  --shell:  1560px;

  /* CTA watermark opacity — "symbolOpacity" prop (8.5%) x 0.75 */
  --symbol-opacity: 0.064;
}

/* ----------------------------------------------------------------- base -- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--ink);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg, canvas { display: block; }
img { max-width: 100%; }

a {
  color: var(--paper);
  text-decoration: none;
  transition: color 250ms ease;
}
a:hover { color: var(--gold); }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

::selection { background: rgba(201, 169, 106, 0.3); }

:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 400;
  padding: 14px 22px;
  background: var(--ink);
  border: 1px solid var(--gold);
  font-size: 12px;
  letter-spacing: 0.18em;
}
.skip-link:focus { left: 12px; top: 12px; }

.shell {
  max-width: var(--shell);
  margin-inline: auto;
}

/* ----------------------------------------------------------- animations -- */
@keyframes acFade  { from { opacity: 0 } to { opacity: 1 } }
@keyframes acUp    { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: translateY(0) } }
@keyframes acLine  {
  from { opacity: 0; clip-path: inset(0 0 105% 0); transform: translateY(26px) }
  to   { opacity: 1; clip-path: inset(-15% -5% -15% -2%); transform: translateY(0) }
}
@keyframes acImg   { from { opacity: 0; transform: scale(1.05) } to { opacity: 1; transform: scale(1) } }
@keyframes acPulse { 0%, 100% { opacity: 0.35 } 50% { opacity: 1 } }
@keyframes acDot   { 0% { transform: translateY(0); opacity: 0 } 30% { opacity: 1 } 100% { transform: translateY(14px); opacity: 0 } }

/* Scroll reveals. `--rv-y` / `--rv-dur` let individual blocks vary. */
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--rv-y, 20px));
  transition:
    opacity   var(--rv-dur, 900ms) var(--ease),
    transform var(--rv-dur, 900ms) var(--ease);
}
[data-reveal].is-shown {
  opacity: 1;
  transform: none;
}

[data-rule] {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1100ms var(--ease);
}
[data-rule].is-shown,
.is-shown [data-rule] { transform: scaleX(1); }

[data-grow] { height: 0; transition: height 1200ms var(--ease); }
[data-grow].is-grown { height: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
}

/* ------------------------------------------------------------- fragments -- */
.rule-gold {
  width: 18px;
  height: 1px;
  background: var(--gold);
  display: block;
  flex: none;
}
.rule-gold--wide {
  width: 54px;
  background: rgba(201, 169, 106, 0.75);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 30px;
}
.eyebrow__rule {
  width: 40px;
  height: 1px;
  background: var(--gold);
  display: block;
  flex: none;
}
.eyebrow__label {
  font-size: 11px;
  letter-spacing: 0.26em;
  color: var(--gold);
}

.h2 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 4.2vw, 70px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--paper-bright);
  text-wrap: pretty;
  --rv-y: 24px;
  --rv-dur: 1000ms;
}
.h2--xl { font-size: clamp(38px, 4.6vw, 76px); line-height: 1.05; }
.h2--sm { font-size: clamp(30px, 3.2vw, 52px); line-height: 1.1; }

.lead {
  max-width: 520px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--mute);
  text-wrap: pretty;
  --rv-y: 16px;
}
.lead--dim { color: var(--mute-dim); }

.dot,
.dot-pulse {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  display: block;
  flex: none;
}
.dot-pulse { animation: acPulse 4200ms ease-in-out infinite; }

.tick {
  width: 1px;
  height: 16px;
  background: rgba(201, 169, 106, 0.5);
  display: block;
  margin-left: 2px;
  flex: none;
}

.tag-rule {
  width: 22px;
  height: 1px;
  background: rgba(201, 169, 106, 0.6);
  display: block;
}

.btn-ghost {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(201, 169, 106, 0.45);
  padding: 13px 22px;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--paper);
  white-space: nowrap;
  transition: background 400ms var(--ease), border-color 400ms ease, color 250ms ease;
}
.btn-ghost:hover {
  background: rgba(201, 169, 106, 0.10);
  border-color: rgba(201, 169, 106, 0.8);
  color: var(--paper);
}

.btn-solid {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  background: rgba(201, 169, 106, 0.14);
  border: 1px solid rgba(201, 169, 106, 0.5);
  padding: 21px 34px;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--paper-bright);
  transition: background 500ms var(--ease), border-color 500ms ease, color 250ms ease;
}
.btn-solid:hover {
  background: rgba(201, 169, 106, 0.26);
  border-color: var(--gold);
  color: var(--paper-bright);
}
.btn-solid .rule-gold { width: 24px; }

/* ---------------------------------------------------------------- header -- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 30px var(--gutter);
  border-bottom: 1px solid transparent;
  opacity: 0;
  animation: acFade 1000ms var(--ease) 700ms both;
  transition:
    padding         600ms var(--ease),
    background      600ms var(--ease),
    backdrop-filter 600ms ease,
    border-color    600ms ease;
}
.site-header.is-past {
  padding: 17px var(--gutter);
  background: rgba(7, 8, 10, 0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(168, 173, 181, 0.12);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}
.brand__mark { height: 30px; width: auto; opacity: 0.95; }
.brand__name {
  font-size: 13px;
  letter-spacing: 0.24em;
  font-weight: 400;
  color: var(--paper);
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 38px);
}
.nav__link {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--mute);
}
.nav__link:hover { color: var(--paper); }

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  min-width: 44px;
  min-height: 44px;
}
.nav-toggle span { height: 1px; display: block; }
.nav-toggle span:first-child { width: 24px; background: var(--paper); }
.nav-toggle span:last-child  { width: 16px; background: var(--gold); }

/* ----------------------------------------------------------- mobile menu -- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(7, 8, 10, 0.97);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(24px, 6vw, 56px);
  animation: acFade 400ms var(--ease) both;
}
.menu[hidden] { display: none; }

.menu__close {
  position: absolute;
  top: 26px;
  right: clamp(18px, 4vw, 60px);
  min-height: 44px;
  padding: 0 8px;
  color: var(--mute);
  font-size: 11px;
  letter-spacing: 0.2em;
}
.menu__close:hover { color: var(--paper); }

.menu__nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.menu__nav a {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 34px;
  color: var(--paper-bright);
  padding: 12px 0;
}

.menu__cta {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid rgba(201, 169, 106, 0.5);
  padding: 20px 24px;
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--paper-bright);
}
.menu__cta .rule-gold { width: 22px; }

/* ------------------------------------------------------------------ hero -- */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.hero__bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: acImg 1800ms var(--ease) 100ms both;
}
.hero__bg-img {
  position: absolute;
  inset: 0;
  background-image: url('../assets/hero-malaga.jpg');
  background-size: cover;
  background-position: center 42%;
}
.hero__bg-tint { position: absolute; inset: 0; }
.hero__bg-tint--x {
  background: linear-gradient(90deg,
    rgba(7, 9, 14, 0.82) 0%,
    rgba(7, 9, 14, 0.50) 32%,
    rgba(7, 9, 14, 0.06) 60%,
    rgba(7, 9, 14, 0.22) 100%);
}
.hero__bg-tint--y {
  background: linear-gradient(180deg,
    rgba(7, 9, 14, 0.70) 0%,
    rgba(7, 9, 14, 0.00) 26%,
    rgba(7, 9, 14, 0.00) 78%,
    rgba(7, 9, 14, 0.28) 100%);
}

.hero__text {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  padding: 108px var(--gutter) 0;
  will-change: transform, opacity;
}
.hero__copy {
  max-width: 900px;
  transform-origin: left center;
}
.hero__copy .eyebrow {
  gap: 20px;
  margin-bottom: 34px;
  opacity: 0;
  animation: acUp 900ms var(--ease) 520ms both;
}
.hero__copy .eyebrow__rule { width: 46px; }

.hero__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 4.4vw, 66px);
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--paper-bright);
  margin: 0 0 30px;
}
.hero__title span { display: block; opacity: 0; }
.hero__title span:nth-child(1) { animation: acLine 1200ms var(--ease) 700ms both; }
.hero__title span:nth-child(2) { animation: acLine 1200ms var(--ease) 830ms both; }
.hero__title span:nth-child(3) { animation: acLine 1200ms var(--ease) 960ms both; }

.hero__lead {
  max-width: 430px;
  font-size: 15.5px;
  line-height: 1.9;
  color: #B9BEC6;
  margin: 0 0 42px;
  text-wrap: pretty;
  opacity: 0;
  animation: acUp 1000ms var(--ease) 1150ms both;
}

.hero__cta {
  display: flex;
  align-items: center;
  opacity: 0;
  animation: acUp 1000ms var(--ease) 1350ms both;
}

/* stat panel (top right) */
.hero__stat {
  position: absolute;
  top: 15.5%;
  right: clamp(24px, 4.5vw, 78px);
  width: min(190px, 22vw);
  border: 1px solid rgba(168, 173, 181, 0.2);
  background: rgba(10, 12, 16, 0.34);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 22px 22px 18px;
  opacity: 0;
  animation: acUp 1100ms var(--ease) 1500ms both;
}
.hero__stat-kicker {
  font-size: 9.5px;
  letter-spacing: 0.24em;
  color: var(--mute);
  margin-bottom: 10px;
}
.hero__stat-value {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 44px;
  line-height: 1;
  color: var(--paper-bright);
  margin-bottom: 8px;
}
.hero__stat-label {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--mute);
  margin-bottom: 14px;
}
.hero__spark { width: 100%; height: 34px; overflow: visible; }

/* conviction card (bottom right) */
.hero__card {
  position: absolute;
  bottom: 21%;
  right: clamp(24px, 4.5vw, 78px);
  width: min(340px, 34vw);
  border: 1px solid rgba(168, 173, 181, 0.18);
  background: rgba(10, 12, 16, 0.4);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 24px 26px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  opacity: 0;
  animation: acUp 1100ms var(--ease) 1700ms both;
}
.hero__card-icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(201, 169, 106, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__card-icon svg { width: 18px; height: 18px; }
.hero__card-kicker {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: 10px;
}
.hero__card-text {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--paper);
  text-wrap: pretty;
}

/* hero footer strip */
.hero__foot {
  position: relative;
  flex: none;
  margin-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding-bottom: clamp(96px, 15vh, 150px);
  opacity: 0;
  animation: acUp 1000ms var(--ease) 1650ms both;
}
.hero__place { display: flex; flex-direction: column; gap: 8px; }
.hero__place-city,
.hero__place-coords { display: flex; align-items: center; gap: 12px; }
.hero__place-city  { font-size: 10.5px; letter-spacing: 0.24em; color: var(--paper); }
.hero__place-coords { font-size: 10.5px; letter-spacing: 0.18em; color: var(--mute); }

.hero__progress { width: min(520px, 41vw); }
.hero__progress-bar { display: flex; height: 1px; margin-bottom: 12px; }
.hero__progress-bar span { flex: 1; display: block; background: rgba(168, 173, 181, 0.22); }
.hero__progress-bar span.is-on { background: var(--gold); }

.hero__progress-steps { display: grid; grid-template-columns: repeat(4, 1fr); }
.hero__progress-steps li { display: flex; flex-direction: column; gap: 5px; }
.hero__progress-steps li span:first-child { font-size: 10px; letter-spacing: 0.14em; color: var(--mute-dim); }
.hero__progress-steps li span:last-child  { font-size: 12px; color: var(--mute-dim); }
.hero__progress-steps li.is-on span:first-child { color: var(--mute); }
.hero__progress-steps li.is-on span:last-child  { color: var(--paper); }

/* scroll indicator */
.hero__indicator {
  flex: none;
  align-self: center;
  margin: 0 auto 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;
  opacity: 0;
  animation: acUp 1000ms var(--ease) 1850ms both;
}
.mouse {
  width: 26px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(201, 169, 106, 0.55);
  display: flex;
  justify-content: center;
  padding-top: 9px;
}
.mouse__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--paper-bright);
  display: block;
  animation: acDot 2600ms var(--ease) infinite;
}
.hero__indicator-label { font-size: 10.5px; letter-spacing: 0.26em; color: var(--mute); }
.chevron {
  width: 9px;
  height: 9px;
  border-right: 1px solid rgba(201, 169, 106, 0.8);
  border-bottom: 1px solid rgba(201, 169, 106, 0.8);
  transform: rotate(45deg);
  display: block;
}

/* --------------------------------------------------------------- nosotros -- */
.about {
  position: relative;
  padding: clamp(90px, 11vw, 180px) var(--gutter) clamp(60px, 7vw, 110px);
}

/* the hero photograph continues for a few hundred px into this section so the
   crop never reads as a cut; sizing/offset are computed in js/main.js */
.hero-continue {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 240px;
  pointer-events: none;
  overflow: hidden;
}
.hero-continue__img {
  position: absolute;
  inset: 0;
  background-image: url('../assets/hero-malaga.jpg');
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0) 100%);
}
.hero-continue__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 9, 14, 0.1) 0%, rgba(7, 8, 10, 0.62) 55%, var(--ink) 100%);
}

.about__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.96fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  max-width: var(--shell);
  margin-inline: auto;
}
.about__copy { padding: clamp(10px, 3vh, 40px) 0; }
.about__copy .h2 { margin-bottom: 40px; }
.about__copy .lead { margin-bottom: 26px; }
.about__copy .lead--dim { margin-bottom: 0; }

.about__media {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: clamp(320px, 52vh, 620px);
  /* aspect-ratio + min-height gives this box an automatic minimum WIDTH
     (min-height x 4/3). Without these two it overflows the grid track on
     narrow viewports and drags the whole layout viewport wider. */
  width: 100%;
  min-width: 0;
  overflow: hidden;
  margin-right: calc(-1 * var(--gutter));
  --rv-y: 24px;
  --rv-dur: 1100ms;
}
.about__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about__media-tint { position: absolute; }
.about__media-tint--x {
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 8, 10, 0.72) 0%, rgba(7, 8, 10, 0.06) 42%, rgba(7, 8, 10, 0) 100%);
}
.about__media-tint--y {
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(7, 8, 10, 0) 0%, rgba(7, 8, 10, 0.55) 100%);
}
.about__media-caption {
  position: absolute;
  bottom: 30px;
  left: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--paper);
}

/* principle cards */
.principles {
  position: relative;
  max-width: var(--shell);
  margin: clamp(64px, 8vw, 120px) auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(18px, 2vw, 32px);
}
.principle {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.014);
  padding: clamp(26px, 2.4vw, 38px) clamp(24px, 2.2vw, 34px);
  display: flex;
  flex-direction: column;
  --rv-y: 22px;
  transition:
    opacity      900ms var(--ease),
    transform    900ms var(--ease),
    border-color 600ms ease,
    background   600ms ease;
}
.principle:hover {
  border-color: rgba(201, 169, 106, 0.45);
  background: rgba(201, 169, 106, 0.04);
}
.principle__num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(201, 169, 106, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
  font-family: var(--serif);
  font-size: 15px;
  color: var(--gold);
}
.principle__value {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(30px, 2.6vw, 42px);
  line-height: 1.1;
  color: var(--paper-bright);
  margin-bottom: 12px;
}
.principle__label {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: 20px;
}
.principle__rule {
  height: 1px;
  background: var(--gold-line);
  margin-bottom: 20px;
  transition-delay: 220ms;
}
.principle__text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--mute-dim);
  text-wrap: pretty;
}

/* --------------------------------------------------------------- sectores -- */
.sectors { position: relative; height: 380vh; }

.sectors__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sectors__bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms var(--ease);
}
.sectors__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.sectors__bg-tint { position: absolute; inset: 0; }
.sectors__bg-tint--x {
  background: linear-gradient(90deg, var(--ink) 0%, rgba(7, 8, 10, 0.9) 42%, rgba(7, 8, 10, 0.62) 100%);
}
.sectors__bg-tint--y {
  background: linear-gradient(180deg, var(--ink) 0%, rgba(7, 8, 10, 0.3) 40%, var(--ink) 100%);
}

.sectors__canvas {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 62%;
  height: 72%;
  opacity: 0;
  transition: opacity 1200ms var(--ease);
  pointer-events: none;
}

.sectors__head {
  position: relative;
  padding: clamp(96px, 12vh, 150px) var(--gutter) 0;
  max-width: var(--shell);
  margin-inline: auto;
  width: 100%;
}
.sectors__head .eyebrow { margin-bottom: 26px; --rv-y: 18px; }

.sectors__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 90px);
  align-items: end;
}
.sectors__intro-text {
  font-size: 15px;
  line-height: 1.85;
  color: var(--mute);
  max-width: 440px;
  margin-bottom: 12px;
  text-wrap: pretty;
}
.sectors__intro-text--gold { color: var(--gold); margin-bottom: 0; }

.sector-bars {
  display: flex;
  align-items: center;
  margin-top: clamp(34px, 5vh, 60px);
}
.sector-bars li {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}
.sector-bars__num {
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--mute-dim);
  transition: color 700ms ease;
  flex: none;
}
.sector-bars__num.is-active { color: var(--gold); }
.sector-bars__track {
  flex: 1;
  height: 1px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.sector-bars__track span {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform-origin: left;
  transform: scaleX(0);
}

.sectors__panels {
  position: relative;
  flex: 1;
  max-width: var(--shell);
  margin-inline: auto;
  width: 100%;
  padding: 0 var(--gutter);
}

.sector {
  position: absolute;
  inset: clamp(28px, 5vh, 56px) var(--gutter) clamp(56px, 8vh, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(32px, 5vw, 90px);
  align-items: start;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
}
.sector__kicker {
  font-size: 11px;
  letter-spacing: 0.28em;
  color: var(--gold);
  margin-bottom: 22px;
}
.sector__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(34px, 3.8vw, 62px);
  line-height: 1.08;
  color: var(--paper-bright);
  margin: 0 0 26px;
  text-wrap: pretty;
}
.sector__text {
  max-width: 470px;
  font-size: 15.5px;
  line-height: 1.88;
  color: var(--mute);
  margin: 0 0 32px;
  text-wrap: pretty;
}
.sector__tags { display: flex; gap: 40px; flex-wrap: wrap; }
.sector__tags li { display: flex; flex-direction: column; gap: 8px; }
.sector__tags span:last-child {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--mute-dim);
}

.sector__media { display: flex; justify-content: flex-end; }
.sector__media-frame {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
}
.sector__media-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--ease);
}
.sector__media-frame:hover img { transform: scale(1.03); }
.sector__media-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 8, 10, 0.18) 0%, rgba(7, 8, 10, 0.55) 100%);
}

/* -------------------------------------------------------------- portfolio -- */
.pf {
  position: relative;
  height: 420vh;
  background: var(--ink);
}
.pf__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pf__head {
  position: relative;
  flex: none;
  padding: clamp(84px, 11vh, 140px) var(--gutter) 0;
}
.pf__head-grid {
  max-width: var(--shell);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}
.pf__head .eyebrow { margin-bottom: 24px; --rv-y: 18px; }
.pf__intro-text {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--mute);
  max-width: 400px;
  margin-bottom: 12px;
  text-wrap: pretty;
}
.pf__intro-note { font-size: 10.5px; letter-spacing: 0.2em; color: var(--mute-dim); }

.pf__track {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.2vw, 38px);
  padding: 0 var(--gutter);
  will-change: transform;
}

/* empty slot 01 — see the note in index.html */
.pf__track-lead {
  flex: none;
  width: clamp(200px, 50vw, 760px);
}

.pf-card {
  flex: none;
  width: clamp(280px, 27vw, 400px);
  opacity: 0.5;
  will-change: opacity, transform;
}
.pf-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 46vh;
  overflow: hidden;
  margin-bottom: 20px;
}
.pf-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
.pf-card__tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 8, 10, 0.25) 0%, rgba(7, 8, 10, 0.1) 40%, rgba(7, 8, 10, 0.75) 100%);
}
.pf-card__tag {
  position: absolute;
  top: 20px;
  left: 20px;
  border: 1px solid rgba(237, 235, 230, 0.22);
  padding: 8px 14px;
  font-size: 9.5px;
  letter-spacing: 0.18em;
  color: var(--paper);
  background: rgba(7, 8, 10, 0.42);
}
/* ---- Tarjetas de dos capas (Haven, Reforma Residencial) -------------------------------------------------
   Two identical frames stacked, lights off below and lights on above. Hover
   fades the lit one in, so the villa reads as switching its lights on rather
   than as a swapped photograph. Scoped to .pf-card--haven — every other card
   is untouched.

   The stack, not the images, carries data-card-img, so the carousel depth
   scale that main.js writes inline lands on the wrapper and composes with the
   hover zoom below instead of overwriting it.
   ------------------------------------------------------------------------ */
.pf-card__stack {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.pf-card__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
}
/* No real hover (touch): the villa simply stays lit. */
.pf-card__layer--on { opacity: 1; }

/* ---- selected state ------------------------------------------------------
   Swapping the upper layer alone left the active card as dim as its
   neighbours. Selected — by scroll or by cursor — it steps out of the
   carousel's depth fade and sheds most of the dark veil, so it genuinely
   brightens and pulls forward instead of merely changing picture.

   The !important is deliberate: the depth fade is written as an inline style
   by frame(), and this has to win over it. It is scoped to these two cards.
   ------------------------------------------------------------------------ */
.pf-card--dual,
.pf-card--dual .pf-card__media { transition: opacity 700ms var(--ease) !important; }
.pf-card--dual .pf-card__tint  { transition: opacity 700ms var(--ease); }

.pf-card--dual.is-lit,
.pf-card--dual.is-lit .pf-card__media { opacity: 1 !important; }
.pf-card--dual.is-lit .pf-card__tint  { opacity: 0.4; }

@media (hover: hover) and (pointer: fine) {
  .pf-card__layer--on { opacity: 0; }

  .pf-card--dual .pf-card__layer {
    transition:
      opacity   700ms var(--ease),
      transform 1200ms var(--ease);
  }

  /* Lit by either route: `.is-lit` is written by main.js on whichever card the
     carousel has brought to centre, and :hover targets the whole card wherever
     it happens to be. */
  .pf-card--dual.is-lit .pf-card__layer--on,
  .pf-card--dual:hover  .pf-card__layer--on { opacity: 1; }

  /* the cursor selects a card the same way the carousel does */
  .pf-card--dual:hover,
  .pf-card--dual:hover .pf-card__media { opacity: 1 !important; }
  .pf-card--dual:hover .pf-card__tint  { opacity: 0.4; }

  /* the camera nudge stays a cursor gesture — scrolling past should light the
     villa, not push the image around */
  .pf-card--dual:hover .pf-card__layer { transform: scale(1.015); }

  /* the only supporting accent — the existing gold label lifts a little */
  .pf-card--dual .pf-card__num { transition: color 700ms var(--ease); }
  .pf-card--dual.is-lit .pf-card__num,
  .pf-card--dual:hover  .pf-card__num { color: var(--gold-soft); }
}

@media (prefers-reduced-motion: reduce) {
  /* keep the lighting change, drop the camera move */
  .pf-card--dual .pf-card__layer,
  .pf-card--dual:hover .pf-card__layer { transform: none !important; }
}

.pf-card__num {
  font-size: 11.5px;
  letter-spacing: 0.22em;
  color: var(--gold);
  margin-bottom: 10px;
}
.pf-card__name {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(21px, 1.7vw, 27px);
  line-height: 1.15;
  color: var(--paper-bright);
  margin: 0 0 10px;
}
.pf-card__text {
  font-size: 14px;
  line-height: 1.75;
  color: var(--mute-dim);
  text-wrap: pretty;
}

.pf__foot {
  position: relative;
  flex: none;
  padding: 0 var(--gutter) clamp(34px, 5vh, 64px);
}
.pf__foot-inner {
  max-width: var(--shell);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 24px;
}
.pf__foot-label,
.pf__foot-counter { font-size: 10.5px; letter-spacing: 0.22em; flex: none; }
.pf__foot-label   { color: var(--mute-dim); }
.pf__foot-counter { color: var(--mute); }
.pf__foot-track {
  flex: 1;
  height: 1px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.pf__foot-track span {
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform-origin: left;
  transform: scaleX(0);
}

/* ------------------------------------------------------------- estrategia -- */
.approach { position: relative; padding: clamp(90px, 12vw, 170px) var(--gutter); }
.approach .eyebrow { margin-bottom: 28px; --rv-y: 18px; }

.approach__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 90px);
  align-items: end;
  margin-bottom: clamp(64px, 9vw, 120px);
}
.approach__intro .h2 { font-size: clamp(34px, 4.2vw, 68px); line-height: 1.08; }
.approach__intro-text {
  font-size: 15px;
  line-height: 1.88;
  color: var(--mute);
  max-width: 430px;
  text-wrap: pretty;
  --rv-y: 18px;
}

.timeline { position: relative; }
.timeline__rail {
  position: absolute;
  top: 21px;
  left: 3%;
  right: 3%;
  height: 1px;
  background: var(--line);
}
.timeline__rail--fill {
  background: linear-gradient(90deg, rgba(201, 169, 106, 0.9), rgba(201, 169, 106, 0.45));
  transform-origin: left;
  transform: scaleX(0);
}

.timeline__steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(20px, 3vw, 56px);
}
.step__node {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(168, 173, 181, 0.26);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  margin-bottom: 30px;
  transition: border-color 800ms ease, background 800ms ease;
}
.step__node span {
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--mute-dim);
  transition: color 800ms ease;
}
.step__node.is-on { border-color: rgba(201, 169, 106, 0.85); background: rgba(201, 169, 106, 0.1); }
.step__node.is-on span { color: var(--gold-soft); }

.step__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(24px, 2.1vw, 34px);
  line-height: 1.15;
  color: var(--paper-bright);
  margin: 0 0 16px;
}
.step__text {
  font-size: 14px;
  line-height: 1.85;
  color: var(--mute-dim);
  max-width: 300px;
  text-wrap: pretty;
}
.timeline__steps [data-reveal] { --rv-y: 18px; }

/* --------------------------------------------------------- más que capital -- */
.caps {
  position: relative;
  padding: clamp(70px, 9vw, 130px) var(--gutter) clamp(90px, 12vw, 160px);
  border-top: 1px solid var(--line-soft);
}
.caps__grid {
  max-width: var(--shell);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 2.1fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}
.caps__eyebrow {
  font-size: 11px;
  letter-spacing: 0.26em;
  color: var(--gold);
  margin-bottom: 26px;
  --rv-y: 16px;
}
.caps__grid .h2 { margin-bottom: 28px; }
.caps__rule {
  display: block;
  width: 60px;
  height: 1px;
  background: rgba(201, 169, 106, 0.7);
}

.caps__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 28px 0;
}
.cap { position: relative; padding: 0 clamp(18px, 2.2vw, 36px); }
.cap__spine {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  background: var(--line);
}
.cap [data-reveal] { --rv-y: 20px; }
.cap__num { font-size: 10.5px; letter-spacing: 0.22em; color: var(--gold); margin-bottom: 24px; }
.cap__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 1.6vw, 26px);
  line-height: 1.2;
  color: var(--paper-bright);
  margin: 0 0 16px;
}
.cap__text { font-size: 14px; line-height: 1.85; color: var(--mute-dim); text-wrap: pretty; }

/* --------------------------------------------------------------- contacto -- */
.cta {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.cta__bg { position: absolute; inset: 0; }
.cta__bg-img {
  position: absolute;
  inset: -8% 0;
  background-image: url('../assets/cta-malaga.jpg');
  background-size: cover;
  background-position: center 60%;
  will-change: transform;
}
.cta__bg-tint { position: absolute; inset: 0; }
.cta__bg-tint--x {
  background: linear-gradient(90deg, rgba(7, 8, 10, 0.96) 0%, rgba(7, 8, 10, 0.86) 45%, rgba(7, 8, 10, 0.62) 100%);
}
.cta__bg-tint--y {
  background: linear-gradient(180deg, var(--ink) 0%, rgba(7, 8, 10, 0.5) 30%, rgba(7, 8, 10, 0.72) 100%);
}

.cta__symbol {
  position: absolute;
  top: 46%;
  right: 6%;
  width: min(34vw, 480px);
  opacity: var(--symbol-opacity);
  transform: translate3d(0, -50%, 0);
  will-change: transform;
}
.cta__symbol img { width: 100%; }

.cta__inner {
  position: relative;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: clamp(90px, 12vw, 150px) var(--gutter);
}
.cta__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.cta__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(38px, 5vw, 82px);
  line-height: 1.06;
  color: var(--paper-bright);
  text-wrap: pretty;
  --rv-y: 24px;
  --rv-dur: 1400ms;
}
.cta__aside {
  border-left: 1px solid rgba(201, 169, 106, 0.35);
  padding-left: clamp(24px, 3vw, 48px);
  --rv-y: 20px;
  --rv-dur: 1200ms;
}
.cta__text {
  font-size: 16px;
  line-height: 1.9;
  color: var(--mute);
  margin-bottom: 40px;
  max-width: 420px;
  text-wrap: pretty;
}

/* ----------------------------------------------------------------- footer -- */
.site-footer {
  position: relative;
  background: var(--ink);
  border-top: 1px solid rgba(168, 173, 181, 0.12);
  padding: clamp(60px, 7vw, 96px) var(--gutter) 44px;
}
.site-footer__grid {
  max-width: var(--shell);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
}
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}
.site-footer__brand img { height: 40px; width: auto; }
.site-footer__brand span {
  font-size: 14px;
  letter-spacing: 0.24em;
  color: var(--paper);
  white-space: nowrap;
}
.site-footer__claim {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.5;
  color: var(--mute);
  max-width: 340px;
}
.site-footer__head {
  font-size: 10.5px;
  letter-spacing: 0.24em;
  color: var(--gold);
  margin-bottom: 24px;
}
.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
  color: var(--mute);
}
.site-footer__col a { color: var(--mute); width: fit-content; }
.site-footer__col a:hover { color: var(--paper); }
.site-footer__col .is-dim { color: var(--mute-dim); }

.site-footer__bar {
  max-width: var(--shell);
  margin: clamp(48px, 6vw, 80px) auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--mute-dim);
}
.site-footer__bar span:first-child { letter-spacing: 0.08em; }
.site-footer__bar span:last-child  { letter-spacing: 0.18em; }

/* ============================================================ breakpoints ==
   Width-driven rules live here. Height-driven ones (short viewports) and the
   hero photo framing maths are handled in js/main.js.
   ========================================================================== */

@media (max-width: 1179px) {
  .hero__card { bottom: 7%; width: 300px; }
}

@media (max-width: 1099px) {
  [data-pf-intro] { display: none; }
}

@media (max-width: 1023px) {
  .nav { display: none; }
  .nav-toggle { display: flex; }
}

@media (max-width: 999px) {
  .hero__card { display: none; }
}

@media (max-width: 899px) {
  [data-grid2] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-sector-media] { display: none !important; }
  .about__media { margin-right: 0; }
  .caps__list { gap: 28px 0; }
}

@media (max-width: 759px) {
  .sectors { height: 300vh; }
  .pf      { height: 260vh; }
  .pf-card { width: 78vw; }
  .hero__stat { display: none; }
  .hero__progress { width: 100%; }
  .site-footer__bar { flex-direction: column; gap: 12px; }
}

/* ======================================================= reduced motion ==
   The pinned chapters are scroll-driven, so with motion off they would hide
   3 of 4 sectors and 4 of 5 portfolio cards. Un-pin them and lay everything
   out statically instead.
   ========================================================================== */
.no-motion [data-reveal] { opacity: 1; transform: none; }
.no-motion [data-rule]   { transform: scaleX(1); }
.no-motion [data-grow]   { height: 100%; }
.no-motion .hero__indicator { display: none !important; }

.no-motion .sectors,
.no-motion .pf { height: auto; }

.no-motion .sectors__pin,
.no-motion .pf__pin {
  position: static;
  height: auto;
  overflow: visible;
}

.no-motion .sectors__bg { opacity: 1; }
.no-motion .sectors__canvas { display: none; }

.no-motion .sectors__panels {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 8vw, 110px);
  padding-block: clamp(56px, 8vw, 110px);
}
.no-motion .sector {
  position: static;
  inset: auto !important;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto;
}

.no-motion .pf__track {
  flex-wrap: wrap;
  justify-content: flex-start;
  row-gap: clamp(40px, 5vw, 64px);
  padding-block: clamp(48px, 6vw, 80px);
  transform: none !important;
}
.no-motion .pf-card {
  opacity: 1 !important;
  transform: none !important;
}
.no-motion .pf-card__media { max-height: none; }
.no-motion .pf__foot { display: none; }

.no-motion .timeline__rail--fill { transform: scaleX(1); }
.no-motion .step__node { border-color: rgba(201, 169, 106, 0.85); background: rgba(201, 169, 106, 0.1); }
.no-motion .step__node span { color: var(--gold-soft); }