/* ═══════════════════════════════════════════════════════════
   CORTEX — Visual system
   Carbon · Deep Graphite · Warm Ivory · Mineral Grey · Mineral Green · Stone
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Palette */
  --carbon:    #0B0D0C;
  --graphite:  #151816;
  --ivory:     #F1F0EA;
  --grey:      #919690;
  --green:     #667B6B;
  --stone:     #C6C3B8;

  /* Derived */
  --hairline:  rgba(241,240,234,.10);
  --hairline-2:rgba(241,240,234,.16);
  --ivory-70:  rgba(241,240,234,.70);
  --ivory-45:  rgba(241,240,234,.45);

  /* Type */
  --sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", "Roboto Mono", monospace;

  /* Rhythm */
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1360px;
  --sec-y: clamp(96px, 13vh, 200px);

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --slow: .9s;
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--carbon);
  color:var(--ivory);
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.65;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,video,canvas{ display:block; max-width:100%; }

::selection{ background:var(--green); color:var(--carbon); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--ivory); color:var(--carbon); padding:12px 20px; font-size:14px;
}
.skip:focus{ left:12px; top:12px; }

:focus-visible{ outline:1px solid var(--stone); outline-offset:4px; }

/* ── Layout ─────────────────────────────────────────────── */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.container.narrow{ max-width:960px; }

.sec{ position:relative; padding-block:var(--sec-y); }
.sec--alt{ background:var(--graphite); }
.sec + .sec:not(.sec--alt):not(.sec--lab):not(.sec--ohana):not(.sec--contact){ border-top:1px solid var(--hairline); }
.sec__head{ margin-bottom:clamp(48px,6vw,88px); max-width:900px; }
.sec__more{ margin-top:clamp(40px,5vw,64px); }

/* ── Type scale ─────────────────────────────────────────── */
.display{
  font-size:clamp(2.4rem,6.2vw,5.2rem);
  line-height:1.03;
  letter-spacing:-.03em;
  font-weight:500;
  margin:0 0 .5em;
  text-wrap:balance;
}
.h1{
  font-size:clamp(1.9rem,3.9vw,3.3rem);
  line-height:1.1;
  letter-spacing:-.025em;
  font-weight:500;
  margin:0 0 .4em;
  text-wrap:balance;
}
.lede{
  font-size:clamp(1.05rem,1.5vw,1.35rem);
  line-height:1.55;
  color:var(--ivory-70);
  max-width:62ch;
  margin:0 0 1em;
}
.lede--wide{ max-width:70ch; }

.statement{
  font-size:clamp(1.4rem,2.9vw,2.4rem);
  line-height:1.22;
  letter-spacing:-.02em;
  font-weight:400;
  color:var(--ivory);
  margin:clamp(28px,4vw,56px) 0 0;
  max-width:22ch;
  text-wrap:balance;
}
.statement--sm{ font-size:clamp(1.15rem,1.9vw,1.6rem); max-width:34ch; }
.statement + *{ margin-top:clamp(20px,2.4vw,32px); }

.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--grey);
  margin:0 0 clamp(20px,2.4vw,32px);
}
.eyebrow--ivory{ color:var(--stone); margin-bottom:12px; }

.mono{ font-family:var(--mono); font-size:12px; letter-spacing:.06em; }

p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

/* ── Links / buttons ────────────────────────────────────── */
.link-arrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:14px; letter-spacing:.02em;
  color:var(--ivory); text-decoration:none;
  padding-bottom:4px;
  border-bottom:1px solid var(--hairline-2);
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.link-arrow i{ font-style:normal; transition:transform .4s var(--ease); }
.link-arrow:hover{ border-color:var(--stone); }
.link-arrow:hover i{ transform:translateX(5px); }
.hero__cta:hover i{ transform:translateY(4px); }

.btn{
  display:inline-flex; align-items:center; gap:.7em;
  background:var(--ivory); color:var(--carbon);
  border:0; border-radius:0;
  font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:.01em;
  padding:15px 26px; cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.btn i{ font-style:normal; transition:transform .35s var(--ease); }
.btn:hover{ background:var(--stone); }
.btn:hover i{ transform:translateX(5px); }

/* ── Header ─────────────────────────────────────────────── */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.is-stuck{
  background:rgba(11,13,12,.82);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom-color:var(--hairline);
}
.hdr__inner{
  max-width:var(--maxw); margin-inline:auto; padding:20px var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  transition:padding .5s var(--ease);
}
.hdr.is-stuck .hdr__inner{ padding-block:14px; }

.wordmark{
  font-size:16px; font-weight:500; letter-spacing:.28em;
  color:var(--ivory); text-decoration:none; white-space:nowrap;
}

.nav{ display:flex; gap:clamp(18px,2.2vw,34px); }
.nav a{
  font-size:13.5px; color:var(--ivory-70); text-decoration:none;
  letter-spacing:.01em; transition:color .35s var(--ease);
}
.nav a:hover, .nav a.is-active{ color:var(--ivory); }

.hdr__right{ display:flex; align-items:center; gap:clamp(14px,1.8vw,26px); }

.lang{ display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--grey); }
.lang button{
  background:none; border:0; padding:2px; cursor:pointer;
  font:inherit; color:var(--grey); letter-spacing:inherit;
  transition:color .3s var(--ease);
}
.lang button:hover{ color:var(--ivory-70); }
.lang button.is-on{ color:var(--ivory); }

.burger{ display:none; background:none; border:0; padding:8px 0 8px 8px; cursor:pointer; }
.burger span{ display:block; width:22px; height:1px; background:var(--ivory); transition:transform .4s var(--ease), opacity .3s; }
.burger span+span{ margin-top:6px; }
.burger[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

.mnav{
  position:fixed; inset:0; z-index:99;
  background:var(--carbon);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:0 var(--gutter);
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s;
}
.mnav.is-open{ opacity:1; visibility:visible; }
.mnav a{
  font-size:clamp(1.6rem,7vw,2.4rem); letter-spacing:-.02em;
  color:var(--ivory); text-decoration:none; padding:10px 0;
  border-bottom:1px solid var(--hairline);
}

/* ── Hero ───────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-block:clamp(120px,16vh,180px) clamp(28px,4vh,48px);
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:0; background:var(--carbon); }
.hero__video{
  width:100%; height:100%; object-fit:cover;
  opacity:.42; filter:grayscale(.35) contrast(1.05);
}
/* Placeholder field while no video asset is present */
.hero__media::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(102,123,107,.20), transparent 60%),
    radial-gradient(100% 80% at 12% 88%, rgba(198,195,184,.09), transparent 62%),
    linear-gradient(180deg, #101312 0%, #0B0D0C 100%);
}
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,13,12,.86) 0%, rgba(11,13,12,.30) 42%, rgba(11,13,12,.94) 100%);
}
.grid-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }

.hero__inner{ position:relative; z-index:2; }
.hero__mark{
  font-size:clamp(2.8rem,10.5vw,8.6rem);
  line-height:.9;
  font-weight:500;
  letter-spacing:.02em;
  margin:0 0 clamp(20px,2.5vw,34px);
}
.hero__tagline{
  font-size:clamp(1.3rem,3.1vw,2.5rem);
  line-height:1.15; letter-spacing:-.022em; font-weight:400;
  margin:0 0 14px; max-width:20ch;
}
.hero__disc{ color:var(--stone); margin-bottom:clamp(24px,3vw,40px); }
.hero__lede{
  font-size:clamp(1rem,1.35vw,1.2rem);
  color:var(--ivory-70); max-width:44ch; margin-bottom:clamp(28px,3.4vw,44px);
}
.hero__foot{
  position:relative; z-index:2;
  margin-top:clamp(40px,7vh,90px);
  display:flex; justify-content:space-between; gap:16px;
  color:var(--grey);
  border-top:1px solid var(--hairline);
  padding-top:16px;
}

/* ── Manifesto ──────────────────────────────────────────── */
.sec--manifesto{ padding-block:clamp(120px,20vh,240px); }
.manifesto__body{ margin-top:clamp(32px,4vw,56px); max-width:64ch; }
.manifesto__body p{
  font-size:clamp(1.05rem,1.55vw,1.35rem);
  line-height:1.5; color:var(--ivory-70);
  padding-left:22px; position:relative; margin-bottom:.85em;
}
.manifesto__body p::before{
  content:""; position:absolute; left:0; top:.72em;
  width:8px; height:1px; background:var(--green);
}
.manifesto__body p:last-child{ color:var(--ivory); }

/* ── Disciplines ────────────────────────────────────────── */
.disc{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--hairline);
}
.card{
  position:relative;
  padding:clamp(32px,3vw,48px) clamp(24px,2.4vw,40px) clamp(36px,3.4vw,52px);
  border-right:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  background:transparent;
  transition:background .6s var(--ease);
  display:flex; flex-direction:column;
}
.disc .card:first-child{ border-left:1px solid var(--hairline); }
.card:hover{ background:var(--graphite); }
.card__num{ color:var(--grey); margin-bottom:clamp(40px,5vw,72px); }
.card__title{
  font-size:13px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--stone); margin:0 0 14px;
}
.card__claim{
  font-size:clamp(1.25rem,1.9vw,1.65rem); line-height:1.2; letter-spacing:-.02em;
  margin:0 0 22px; max-width:18ch;
}
.card__tags{ color:var(--green); line-height:1.8; margin-bottom:22px; }
.card__body{ color:var(--ivory-70); font-size:.97rem; margin-bottom:18px; }
.card__note{
  color:var(--grey); font-size:.87rem; line-height:1.6;
  padding-top:16px; border-top:1px solid var(--hairline); margin-bottom:22px;
}
.card .link-arrow{ margin-top:auto; align-self:flex-start; }

/* ── Method ─────────────────────────────────────────────── */
.method{ position:relative; margin-top:clamp(24px,4vw,48px); }
.method__rail{
  position:absolute; left:0; right:0; top:9px; height:1px;
  background:var(--hairline);
}
.method__fill{
  display:block; height:100%; width:0%;
  background:var(--green);
  transition:width .1s linear;
}
.method__steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:16px;
}
.method__steps li{ position:relative; padding-top:34px; }
.method__steps li::before{
  content:""; position:absolute; left:0; top:6px;
  width:7px; height:7px; border:1px solid var(--grey); background:var(--carbon);
  border-radius:50%;
  transition:background .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
}
.method__steps li.is-on::before{ background:var(--green); border-color:var(--green); transform:scale(1.25); }
.method__steps li span{ display:block; color:var(--grey); margin-bottom:6px; }
.method__steps li b{
  display:block; font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ivory-45); transition:color .5s var(--ease);
}
.method__steps li.is-on b{ color:var(--ivory); }
.method__sum{ margin-top:clamp(48px,6vw,80px); color:var(--stone); letter-spacing:.14em; }

/* ── Trio ───────────────────────────────────────────────── */
.trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,3vw,56px); }
.trio__item{ padding-top:24px; border-top:1px solid var(--hairline-2); }
.trio__item p{ color:var(--ivory-70); font-size:.97rem; max-width:36ch; }

/* ── Cortex Lab (digital → physical) ────────────────────── */
.sec--lab{
  position:relative; overflow:hidden;
  padding-block:clamp(140px,22vh,260px);
  background:var(--carbon);
}
.lab__photo{
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(180deg, rgba(11,13,12,1) 0%, rgba(11,13,12,.62) 30%, rgba(11,13,12,.82) 74%, rgba(11,13,12,1) 100%),
    radial-gradient(90% 70% at 28% 62%, rgba(198,195,184,.12), transparent 64%),
    radial-gradient(66% 58% at 80% 30%, rgba(102,123,107,.22), transparent 64%),
    linear-gradient(160deg, #12160F 0%, #0B0D0C 74%);
}
.lab__inner{ position:relative; z-index:2; }
.sec--lab .display{ letter-spacing:.06em; font-weight:500; }
.sec--lab .lede{ max-width:56ch; }

/* ── Ohana ──────────────────────────────────────────────── */
.sec--ohana{ position:relative; overflow:hidden; background:var(--graphite); }
.ohana__media{
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(180deg, rgba(21,24,22,.90) 0%, rgba(21,24,22,.52) 45%, rgba(21,24,22,.95) 100%),
    radial-gradient(80% 60% at 70% 20%, rgba(198,195,184,.34), transparent 62%),
    radial-gradient(70% 70% at 18% 82%, rgba(102,123,107,.40), transparent 64%),
    linear-gradient(200deg, #1D2119 0%, #101312 100%);
}
.ohana__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(21,24,22,.88) 0%, rgba(21,24,22,.48) 45%, rgba(21,24,22,.94) 100%),
    url("../assets/img/ohana/ohana-hero.jpg") center/cover no-repeat;
}
.ohana__inner{ position:relative; z-index:2; }
.ohana__sub{ color:var(--stone); letter-spacing:.16em; text-transform:uppercase; margin:0 0 clamp(24px,3vw,40px); }

.metrics{
  display:grid; grid-template-columns:repeat(5,1fr);
  margin:clamp(48px,6vw,88px) 0 0; padding:0;
  border-top:1px solid var(--hairline-2);
}
.metric{
  display:flex; flex-direction:column;
  padding:26px clamp(14px,1.6vw,24px) 26px 0;
  border-right:1px solid var(--hairline);
}
/* Keys on one baseline, descriptions on another */
@supports (grid-template-rows: subgrid){
  .metrics{ grid-template-rows:auto auto; }
  .metric{ display:grid; grid-template-rows:subgrid; grid-row:span 2; }
}
.metric:last-child{ border-right:0; }
.metric__k{
  font-size:clamp(.78rem,.95vw,.88rem);
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--stone);
  margin:0; line-height:1.45;
}
.metric__v{
  margin:auto 0 0;                 /* every description sits on one baseline */
  padding-top:34px;
  font-size:.92rem; line-height:1.45; color:var(--ivory-70);
}
@supports (grid-template-rows: subgrid){ .metric__v{ margin:0; align-self:start; } }
/* The one true number leads the row */
.metric:first-child .metric__k{
  font-size:clamp(1.5rem,2.6vw,2.1rem); letter-spacing:.01em; color:var(--ivory);
  line-height:1.05;
}

.sec--ohana .statement{ max-width:26ch; }
.sec--ohana .link-arrow{ margin-top:clamp(32px,4vw,48px); }

/* ── Projects ───────────────────────────────────────────── */
.projects{ border-top:1px solid var(--hairline); }
.prj{
  display:grid; grid-template-columns:minmax(180px,300px) 1fr;
  gap:clamp(24px,4vw,64px);
  align-items:center;
  padding:clamp(28px,3vw,44px) 0;
  border-bottom:1px solid var(--hairline);
  text-decoration:none; color:inherit;
  transition:padding-left .55s var(--ease);
}
.prj:hover{ padding-left:14px; }
/* Placeholder fields — replace each background with background-image:url(...) */
.prj__media{
  aspect-ratio:16/10; background:var(--graphite);
  filter:saturate(.85) brightness(.95);
  transition:filter .6s var(--ease);
  --grid:
    repeating-linear-gradient(0deg, rgba(241,240,234,.055) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(241,240,234,.055) 0 1px, transparent 1px 26px);
}
.prj:hover .prj__media{ filter:saturate(1) brightness(1.08); }
.prj__media--ohana{ background:
  var(--grid),
  radial-gradient(85% 85% at 32% 32%, rgba(102,123,107,.62), transparent 66%),
  linear-gradient(150deg,#22271E,#0E100F); }
.prj__media--digital{ background:
  var(--grid),
  radial-gradient(75% 75% at 70% 34%, rgba(198,195,184,.34), transparent 64%),
  linear-gradient(150deg,#1D211F,#0E100F); }
.prj__media--chain{ background:
  var(--grid),
  radial-gradient(75% 75% at 46% 60%, rgba(145,150,144,.38), transparent 62%),
  linear-gradient(150deg,#181C1B,#0E100F); }
.prj__t{
  font-size:clamp(1.15rem,1.8vw,1.55rem); font-weight:500; letter-spacing:-.015em;
  margin:0 0 10px;
}
.prj__t span:last-child{ color:var(--ivory-45); font-weight:400; }
.prj__tags{ color:var(--green); margin-bottom:14px; }
.prj__note{ color:var(--grey); font-size:.85rem; margin-bottom:14px; }

/* ── Portfolio ──────────────────────────────────────────── */
.pf{
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--hairline);
  border-left:1px solid var(--hairline);
}
.pf__item{
  position:relative;
  grid-column:span 1;
  padding:clamp(28px,2.8vw,42px) clamp(22px,2.2vw,36px) clamp(32px,3vw,44px);
  border-right:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  background:transparent;
  transition:background .6s var(--ease);
  display:flex; flex-direction:column;
}
.pf__item:hover{ background:var(--graphite); }
.pf__item--wide{ grid-column:span 2; }

.pf__meta{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:clamp(26px,3vw,44px);
}
.pf__disc{ color:var(--grey); }
.pf__status{
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--green); border:1px solid var(--hairline-2); padding:3px 9px; white-space:nowrap;
}
.pf__status--own{ color:var(--stone); }
.pf__status--nda{ color:var(--grey); }

.pf__t{
  font-size:clamp(1.2rem,1.9vw,1.6rem); font-weight:500; letter-spacing:-.02em;
  margin:0 0 6px; line-height:1.1;
}
.pf__s{ color:var(--stone); font-size:.95rem; margin:0 0 18px; letter-spacing:-.005em; }
.pf__b{ color:var(--ivory-70); font-size:.97rem; margin:0 0 20px; max-width:56ch; }
.pf__item--wide .pf__b{ max-width:62ch; }
.pf__tags{
  color:var(--green); line-height:1.75; margin:0;
  padding-top:16px; border-top:1px solid var(--hairline); margin-top:auto;
}

@media (max-width:1000px){
  .pf{ grid-template-columns:repeat(2,1fr); }
  .pf__item--wide{ grid-column:span 2; }
}
@media (max-width:680px){
  .pf{ grid-template-columns:1fr; }
  .pf__item--wide{ grid-column:span 1; }
  .pf__meta{ margin-bottom:22px; }
}


/* ── Media de las tarjetas de proyecto ──────────────────── */
.pf__media{
  position:relative;
  margin:0 0 clamp(22px,2.4vw,32px);
  border:1px solid var(--hairline);
  background:var(--graphite);
  overflow:hidden;
  transition:border-color .6s var(--ease);
}
.pf__item:hover .pf__media{ border-color:var(--hairline-2); }

/* Ilustraciones — La Cumbre (earthship) y Cíclica (espiral) */
.pf__media--draw{
  aspect-ratio:16/10;
  display:grid; place-items:center;
  padding:5% 4%;
  color:var(--green);
  background:
    repeating-linear-gradient(0deg, rgba(241,240,234,.045) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(241,240,234,.045) 0 1px, transparent 1px 24px),
    linear-gradient(150deg,#191E1A,#0E100F);
}
.pf__media--draw .mk{
  grid-area:1/1; width:100%; height:100%;
  opacity:.86;
  transition:opacity .6s var(--ease), transform .9s var(--ease);
}
.pf__item:hover .pf__media--draw .mk{ opacity:1; }
.mk--spiral{ color:var(--stone); }
.pf__item:hover .mk--spiral{ transform:rotate(-7deg) scale(1.02); }
@media (prefers-reduced-motion: reduce){ .pf__item:hover .mk--spiral{ transform:none; } }

/* Ohana — tres fotos de Instagram */
.pf__media--shots{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  height:clamp(148px,16vw,228px);
  background:var(--hairline);
}
.pf__shot{
  display:block;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  filter:saturate(.88) brightness(.92);
  transition:filter .7s var(--ease);
}
.pf__item:hover .pf__shot{ filter:saturate(1) brightness(1.05); }
.pf__shot--1{ background-image:url("../assets/img/ohana/ohana-01.jpg"), linear-gradient(150deg,#242A20,#0E100F); }
.pf__shot--2{ background-image:url("../assets/img/ohana/ohana-02.jpg"), linear-gradient(150deg,#1D231D,#0E100F); }
.pf__shot--3{ background-image:url("../assets/img/ohana/ohana-03.jpg"), linear-gradient(150deg,#20251F,#0E100F); }

/* Shift — logotipo */
.pf__media--logo{
  aspect-ratio:16/10;
  display:grid; place-items:center;
  padding:13% 15%;
  background:
    repeating-linear-gradient(0deg, rgba(241,240,234,.045) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(241,240,234,.045) 0 1px, transparent 1px 24px),
    linear-gradient(150deg,#1B201E,#0E100F);
}
.pf__logofb{
  grid-area:1/1;
  font-size:clamp(1rem,1.8vw,1.4rem); font-weight:400;
  letter-spacing:.36em; text-indent:.36em;
  color:var(--ivory-45);
}
.pf__logo{
  grid-area:1/1; width:100%; height:100%;
  object-fit:contain;
  filter:brightness(0) invert(1);
  opacity:.88;
  transition:opacity .6s var(--ease);
}
.pf__item:hover .pf__logo{ opacity:1; }

@media (max-width:680px){
  .pf__media--shots{ height:clamp(130px,34vw,190px); }
}

.pf__medialink{
  display:block; text-decoration:none; color:inherit;
  outline-offset:3px;
}
.pf__link{
  display:inline-flex; align-items:baseline; gap:8px;
  margin:0 0 20px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey); text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:3px;
  transition:color .4s var(--ease), border-color .4s var(--ease);
}
.pf__link i{ font-style:normal; color:var(--green); transition:transform .4s var(--ease); }
.pf__link:hover{ color:var(--ivory); border-bottom-color:var(--hairline-2); }
.pf__link:hover i{ transform:translate(3px,-3px); }
:root[data-theme="light"] .pf__link{ color:rgba(11,13,12,.5); }
:root[data-theme="light"] .pf__link i{ color:#4C6153; }
:root[data-theme="light"] .pf__link:hover{ color:#0B0D0C; border-bottom-color:rgba(11,13,12,.18); }

/* ── Ohana — tira de Instagram ──────────────────────────── */
.ohana__strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  margin-top:clamp(36px,4.6vw,60px);
  background:var(--hairline-2);
  border:1px solid var(--hairline-2);
}
.ohana__ph{
  margin:0; aspect-ratio:4/5;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  filter:saturate(.9) brightness(.9);
  transition:filter .7s var(--ease);
}
.ohana__ph:hover{ filter:saturate(1) brightness(1.06); }
.ohana__ph--1{ background-image:url("../assets/img/ohana/ohana-01.jpg"), linear-gradient(160deg,#252C22,#101312); }
.ohana__ph--2{ background-image:url("../assets/img/ohana/ohana-02.jpg"), linear-gradient(160deg,#1C221C,#101312); }
.ohana__ph--3{ background-image:url("../assets/img/ohana/ohana-03.jpg"), linear-gradient(160deg,#222820,#101312); }
.ohana__ph--4{ background-image:url("../assets/img/ohana/ohana-04.jpg"), linear-gradient(160deg,#191F1B,#101312); }
.ohana__ig{
  display:inline-flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin-top:16px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--grey); text-decoration:none;
  transition:color .4s var(--ease);
}
.ohana__ig i{ font-style:normal; color:var(--green); transition:color .4s var(--ease); }
.ohana__ig:hover{ color:var(--stone); }
.ohana__ig:hover i{ color:var(--ivory); }
@media (max-width:680px){
  .ohana__strip{ grid-template-columns:repeat(2,1fr); }
}

/* Salida del Lab */
.lab__out{
  margin-top:clamp(34px,4.5vw,56px);
  padding-top:20px; border-top:1px solid var(--hairline);
}
.lab__out .eyebrow{ margin-bottom:12px; }
.lab__out ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px 10px;
}
.lab__out a{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--stone); text-decoration:none;
  border:1px solid var(--hairline-2); padding:6px 12px;
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.lab__out a:hover{ border-color:var(--green); color:var(--ivory); }

/* ── Why ────────────────────────────────────────────────── */
.sec--why{ padding-block:clamp(120px,18vh,220px); }
.why__axis{
  margin:clamp(36px,5vw,64px) 0;
  color:var(--stone); font-size:clamp(12px,1.3vw,15px); letter-spacing:.24em;
  padding-block:20px; border-block:1px solid var(--hairline);
}

/* ── About ──────────────────────────────────────────────── */
.about{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,110px); align-items:start; }
.about__r p{ color:var(--ivory-70); }
.about__r .statement{ color:var(--ivory); }
.mission{ margin:clamp(32px,4vw,52px) 0; padding-top:22px; border-top:1px solid var(--hairline-2); }
.mission__b{ font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--ivory) !important; letter-spacing:-.01em; max-width:34ch; }

/* ── Insights ───────────────────────────────────────────── */
.topics{ list-style:none; margin:0 0 clamp(56px,7vw,96px); padding:0; border-top:1px solid var(--hairline); }
.topics li{
  display:grid; grid-template-columns:220px 1fr; gap:24px;
  padding:20px 0; border-bottom:1px solid var(--hairline);
}
.topics b{ font-size:13px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--stone); }
.topics span{ color:var(--grey); }

.posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); }
.post{
  background:var(--carbon); padding:clamp(26px,2.6vw,38px);
  text-decoration:none; color:inherit;
  display:flex; flex-direction:column; min-height:210px;
  transition:background .5s var(--ease);
}
.post:hover{ background:var(--graphite); }
.post__meta{ color:var(--grey); margin-bottom:auto; }
.post__t{ font-size:1.1rem; font-weight:400; letter-spacing:-.01em; margin:32px 0 18px; color:var(--ivory-70); }
.post .link-arrow{ align-self:flex-start; }

/* ── Contact ────────────────────────────────────────────── */
.sec--contact{ position:relative; overflow:hidden; background:var(--graphite); padding-block:clamp(120px,18vh,220px); }
.contact__inner{ position:relative; z-index:2; }
.form{
  display:grid; grid-template-columns:1fr 1fr; gap:22px clamp(20px,2.5vw,32px);
  margin-top:clamp(48px,6vw,80px);
}
.field{ display:flex; flex-direction:column; gap:8px; }
.field--full{ grid-column:1/-1; }
.field label{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); }
.field input, .field textarea{
  background:transparent; border:0; border-bottom:1px solid var(--hairline-2);
  color:var(--ivory); font-family:var(--sans); font-size:1rem; padding:10px 0;
  border-radius:0; resize:vertical;
  transition:border-color .4s var(--ease);
}
.field input:focus, .field textarea:focus{ outline:none; border-bottom-color:var(--stone); }
.field input:invalid:not(:placeholder-shown){ border-bottom-color:rgba(200,120,100,.6); }
.form__foot{ flex-direction:row; align-items:center; gap:20px; flex-wrap:wrap; margin-top:14px; }
.form__status{ color:var(--green); }
.contact__loc{ margin-top:clamp(48px,6vw,80px); color:var(--grey); letter-spacing:.16em; }

/* ── Footer ─────────────────────────────────────────────── */
.ftr{ border-top:1px solid var(--hairline); padding-top:clamp(56px,7vw,96px); padding-bottom:36px; }
.ftr__inner{
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:clamp(32px,5vw,80px);
  padding-bottom:clamp(48px,6vw,80px);
}
.ftr__mark{ font-size:15px; font-weight:500; letter-spacing:.28em; margin:0 0 14px; }
.ftr__tag{ color:var(--ivory-70); margin:0 0 6px; max-width:30ch; }
.ftr__disc{ color:var(--grey); }
.ftr__nav, .ftr__social{ display:flex; flex-direction:column; gap:10px; }
.ftr__nav a, .ftr__social a{ font-size:14px; color:var(--ivory-70); text-decoration:none; transition:color .35s var(--ease); }
.ftr__nav a:hover, .ftr__social a:hover{ color:var(--ivory); }
.ftr__legal{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding-top:24px; border-top:1px solid var(--hairline); color:var(--grey);
}
.ftr__legal p{ margin:0; }
.ftr__links a{ color:var(--grey); text-decoration:none; }
.ftr__links a:hover{ color:var(--ivory-70); }

/* ── Reveal on scroll ───────────────────────────────────── */
[data-reveal]{
  opacity:0; transform:translateY(18px);
  transition:opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
  transition-delay:var(--d,0ms);
}
[data-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  .hero__video{ display:none; }
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:1080px){
  .disc{ grid-template-columns:1fr 1fr; }
  .disc .card:nth-child(3){ grid-column:1/-1; border-left:1px solid var(--hairline); }
  .disc .card:nth-child(odd){ border-left:1px solid var(--hairline); }
  .metrics{ grid-template-columns:repeat(2,1fr); }
  .metric{ border-bottom:1px solid var(--hairline); }
  .posts{ grid-template-columns:1fr 1fr; }
  .ftr__inner{ grid-template-columns:1fr 1fr; }
}

@media (max-width:860px){
  .nav{ display:none; }
  .hdr__cta{ display:none; }
  .burger{ display:block; }
  .about{ grid-template-columns:1fr; }
  .trio{ grid-template-columns:1fr; }
  .trio__item{ padding-top:18px; }
  .prj{ grid-template-columns:1fr; }
  .prj__media{ aspect-ratio:16/9; }
  .method__steps{ grid-template-columns:1fr; gap:0; }
  .method__steps li{ padding:16px 0 16px 28px; border-bottom:1px solid var(--hairline); }
  .method__steps li::before{ top:22px; }
  .method__steps li span{ display:inline; margin-right:10px; }
  .method__steps li b{ display:inline; }
  .method__rail{ display:none; }
  .form{ grid-template-columns:1fr; }
  .topics li{ grid-template-columns:1fr; gap:6px; }
}

@media (max-width:620px){
  .disc{ grid-template-columns:1fr; }
  .disc .card{ border-left:1px solid var(--hairline) !important; }
  .metrics{ grid-template-columns:1fr; }
  .metric{ border-right:0; padding-right:0; }
  .posts{ grid-template-columns:1fr; }
  .ftr__inner{ grid-template-columns:1fr; }
  .hero__foot{ flex-direction:column; gap:6px; }
}

/* ═══════════════════════════════════════════════════════════
   THEME SWITCH — Light (Ivory) mode
   Se activa con [data-theme="light"] en <html>. El modo oscuro
   sigue siendo el default; esto solo redefine tokens y los pocos
   valores hardcodeados (degradados, veils, retículas).
   ═══════════════════════════════════════════════════════════ */

/* Selector de tema en el header — mismo lenguaje visual que EN / ES */
.theme{
  display:flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  color:var(--grey);
}
.theme button{
  background:none; border:0; padding:2px; cursor:pointer;
  color:var(--grey); line-height:0;
  transition:color .3s var(--ease);
}
.theme button:hover{ color:var(--ivory-70); }
.theme button.is-on{ color:var(--ivory); }
.theme svg{
  display:block; width:16px; height:16px;
  stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

:root[data-theme="light"]{
  --carbon:    #FFFFFF;   /* fondo */
  --graphite:  #F2F1EC;   /* fondo alterno */
  --ivory:     #0B0D0C;   /* texto */
  --grey:      #6B706B;
  --green:     #4C6153;
  --stone:     #7A776C;

  --hairline:  rgba(11,13,12,.12);
  --hairline-2:rgba(11,13,12,.20);
  --ivory-70:  rgba(11,13,12,.72);
  --ivory-45:  rgba(11,13,12,.50);
}

:root[data-theme="light"] ::selection{ background:var(--green); color:#FFF; }
:root[data-theme="light"] .skip{ background:var(--ivory); color:#FFF; }

:root[data-theme="light"] .hdr.is-stuck{
  background:rgba(255,255,255,.84);
}

:root[data-theme="light"] .hero__video{
  opacity:.30; filter:grayscale(.35) contrast(1.02);
}
:root[data-theme="light"] .hero__media::before{
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(102,123,107,.16), transparent 60%),
    radial-gradient(100% 80% at 12% 88%, rgba(122,119,108,.10), transparent 62%),
    linear-gradient(180deg, #F7F6F2 0%, #FFFFFF 100%);
}
:root[data-theme="light"] .hero__veil{
  background:
    linear-gradient(180deg, rgba(255,255,255,.84) 0%, rgba(255,255,255,.26) 42%, rgba(255,255,255,.92) 100%);
}

:root[data-theme="light"] .lab__photo{
  background:
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.58) 30%, rgba(255,255,255,.80) 74%, rgba(255,255,255,1) 100%),
    radial-gradient(90% 70% at 28% 62%, rgba(122,119,108,.14), transparent 64%),
    radial-gradient(66% 58% at 80% 30%, rgba(102,123,107,.20), transparent 64%),
    linear-gradient(160deg, #F3F5EF 0%, #FFFFFF 74%);
}

:root[data-theme="light"] .ohana__media{
  background:
    linear-gradient(180deg, rgba(242,241,236,.90) 0%, rgba(242,241,236,.50) 45%, rgba(242,241,236,.94) 100%),
    radial-gradient(80% 60% at 70% 20%, rgba(122,119,108,.26), transparent 62%),
    radial-gradient(70% 70% at 18% 82%, rgba(76,97,83,.30), transparent 64%),
    linear-gradient(200deg, #E8EBE1 0%, #F5F4EF 100%);
}

:root[data-theme="light"] .ohana__media::after{
  background:
    linear-gradient(180deg, rgba(242,241,236,.90) 0%, rgba(242,241,236,.52) 45%, rgba(242,241,236,.94) 100%),
    url("../assets/img/ohana/ohana-hero.jpg") center/cover no-repeat;
}
:root[data-theme="light"] .prj__media{
  filter:saturate(.9) brightness(1);
  --grid:
    repeating-linear-gradient(0deg, rgba(11,13,12,.07) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(11,13,12,.07) 0 1px, transparent 1px 26px);
}
:root[data-theme="light"] .prj:hover .prj__media{ filter:saturate(1) brightness(.98); }
:root[data-theme="light"] .prj__media--ohana{ background:
  var(--grid),
  radial-gradient(85% 85% at 32% 32%, rgba(102,123,107,.42), transparent 66%),
  linear-gradient(150deg,#E9EDE2,#FAFAF7); }
:root[data-theme="light"] .prj__media--digital{ background:
  var(--grid),
  radial-gradient(75% 75% at 70% 34%, rgba(122,119,108,.28), transparent 64%),
  linear-gradient(150deg,#EEEDE7,#FAFAF7); }
:root[data-theme="light"] .prj__media--chain{ background:
  var(--grid),
  radial-gradient(75% 75% at 46% 60%, rgba(107,112,107,.26), transparent 62%),
  linear-gradient(150deg,#EDEDEB,#FAFAF7); }

:root[data-theme="light"] .pf__media--draw{
  color:#4C6153;
  background:
    repeating-linear-gradient(0deg, rgba(11,13,12,.06) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(11,13,12,.06) 0 1px, transparent 1px 24px),
    linear-gradient(150deg,#F1F3ED,#FAFAF7);
}
:root[data-theme="light"] .mk--spiral{ color:#7A776C; }
:root[data-theme="light"] .pf__media--logo{
  background:
    repeating-linear-gradient(0deg, rgba(11,13,12,.06) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(11,13,12,.06) 0 1px, transparent 1px 24px),
    linear-gradient(150deg,#F0F1EC,#FAFAF7);
}
:root[data-theme="light"] .pf__logo{ filter:brightness(0); opacity:.82; }
:root[data-theme="light"] .pf__logofb{ color:rgba(11,13,12,.42); }
:root[data-theme="light"] .pf__shot{ filter:saturate(.94) brightness(1); }
:root[data-theme="light"] .pf__item:hover .pf__shot{ filter:saturate(1) brightness(1.02); }
:root[data-theme="light"] .pf__shot--1{ background-image:url("../assets/img/ohana/ohana-01.jpg"), linear-gradient(150deg,#E7EBE1,#FAFAF7); }
:root[data-theme="light"] .pf__shot--2{ background-image:url("../assets/img/ohana/ohana-02.jpg"), linear-gradient(150deg,#EDEDE7,#FAFAF7); }
:root[data-theme="light"] .pf__shot--3{ background-image:url("../assets/img/ohana/ohana-03.jpg"), linear-gradient(150deg,#E9EDE4,#FAFAF7); }
:root[data-theme="light"] .ohana__ph{ filter:saturate(.94) brightness(1); }
:root[data-theme="light"] .ohana__ph:hover{ filter:saturate(1) brightness(1.03); }
:root[data-theme="light"] .ohana__ph--1{ background-image:url("../assets/img/ohana/ohana-01.jpg"), linear-gradient(160deg,#E6EBE0,#F5F4EF); }
:root[data-theme="light"] .ohana__ph--2{ background-image:url("../assets/img/ohana/ohana-02.jpg"), linear-gradient(160deg,#ECECE6,#F5F4EF); }
:root[data-theme="light"] .ohana__ph--3{ background-image:url("../assets/img/ohana/ohana-03.jpg"), linear-gradient(160deg,#E8EDE3,#F5F4EF); }
:root[data-theme="light"] .ohana__ph--4{ background-image:url("../assets/img/ohana/ohana-04.jpg"), linear-gradient(160deg,#EAEAE4,#F5F4EF); }
:root[data-theme="light"] .ohana__ig{ color:rgba(11,13,12,.5); }
:root[data-theme="light"] .ohana__ig i{ color:#4C6153; }
:root[data-theme="light"] .ohana__ig:hover{ color:rgba(11,13,12,.75); }
:root[data-theme="light"] .ohana__ig:hover i{ color:#0B0D0C; }

:root[data-theme="light"] .field input:invalid:not(:placeholder-shown){
  border-bottom-color:rgba(170,70,50,.7);
}


/* ── Lockup CORTEX / bajada ─────────────────────────────────
   El bloque se ajusta al ancho de CORTEX y la bajada reparte
   sus letras de borde a borde: mismo comienzo, mismo final.   */
.hero__mark, .ftr__mark, .lab__mark{ display:inline-block; }

.mark-e{
  display:flex; justify-content:space-between;
  width:100%;
  font-size:.245em; font-weight:400; line-height:1;
  color:var(--ivory-70);
  margin-top:.36em;
}
.mark-e i{ font-style:normal; }
.mark-e .sp{ flex:0 0 .9em; }          /* respiro entre ENTERPRISE y LAB */

.ftr__mark .mark-e{ font-size:.40em; color:var(--ivory-45); margin-top:.55em; }
.lab__mark .mark-e{ font-size:.30em; margin-top:.42em; }

.wordmark__e{
  display:inline-flex; gap:.30em;
  margin-left:.85em;
  font-size:10px; font-weight:400;
  color:var(--ivory-45);
  vertical-align:.08em;
}
.wordmark__e i{ font-style:normal; }
@media (max-width:720px){ .wordmark__e{ display:none; } }