/* hombreonce® — portfolio styles v2 */
:root {
  --bg: #0a0a0a;
  --fg: #f5f5f5;
  --fg-soft: #b5b5b5;
  --muted: #6a6a6a;
  --line: #232323;
  --line-strong: #2e2e2e;
  --placeholder: #161616;
  --placeholder-stripe: #1c1c1c;
  --pad-x: clamp(20px, 4vw, 56px);
  --max: 1600px;
  --nav-h: 76px;
  --density-pad: 1;
}

[data-theme="light"] {
  --bg: #f4f3ee;
  --fg: #0a0a0a;
  --fg-soft: #2a2a2a;
  --muted: #8a8a8a;
  --line: #e1ddd2;
  --line-strong: #cfcabe;
  --placeholder: #ece8de;
  --placeholder-stripe: #e2ddd0;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); }
body {
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-feature-settings: "ss01", "cv11";
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.mono { font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.upper { text-transform: uppercase; letter-spacing: 0.04em; }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.divider { border-top: 0.5px solid var(--line); width: 100%; }
.muted { color: var(--muted); }

/* ---------- Floating Nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  pointer-events: none;
  padding: 22px clamp(20px, 4vw, 56px);
}
.nav-inner {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.brand {
  font-weight: 700;
  font-size: 2.5rem;
  letter-spacing: -0.025em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  color: var(--fg);
  transform-origin: left center;
  transition: font-size 0.3s ease, transform 0.3s ease;
}
.nav.scrolled .brand {
  font-size: 1rem;
}
.brand-mark { color: inherit; }
.brand .reg { font-size: 0.45em; transform: translateY(-0.85em); display: inline-block; font-weight: 500; }
.nav-center {
  display: flex;
  gap: clamp(14px, 1.6vw, 28px);
  align-items: center;
  color: var(--fg);
}
.nav-center a {
  font-size: 15px;
  font-weight: 500;
  color: inherit;
  position: relative;
  padding: 4px 0;
  letter-spacing: -0.005em;
}
.nav-center a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  border-top: 1px solid currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nav-center a:hover::after,
.nav-center a.active::after { transform: scaleX(1); }
.nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: flex-end;
  color: var(--fg);
}
.nav-right a, .nav-right button {
  font-size: 15px;
  font-weight: 500;
  color: inherit;
}
.lang-toggle {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
}
.lang-toggle span { opacity: 0.45; }
.lang-toggle span.on { opacity: 1; }
.lang-toggle .sep { opacity: 0.35; }

.nav-burger {
  display: none;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  color: inherit;
}
.nav-burger svg { width: 22px; height: 22px; }

@media (max-width: 820px) {
  .nav-center, .nav-right .lang-toggle, .nav-right a.contact-link { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-inner { grid-template-columns: 1fr auto; }
}

/* Mobile sheet menu */
.nav-sheet {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding: 24px var(--pad-x) 48px;
  transform: translateY(-100%);
  transition: transform .35s cubic-bezier(.7,.05,.2,1);
}
.nav-sheet.open { transform: translateY(0); }
.nav-sheet-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 80px; }
.nav-sheet-links { display: flex; flex-direction: column; gap: 24px; }
.nav-sheet-links a { font-size: clamp(36px, 8vw, 56px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.nav-sheet-bottom {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 32px;
  border-top: 0.5px solid var(--line);
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* ---------- Type ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.h-display {
  font-size: clamp(40px, 6.4vw, 108px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.h-xl {
  font-size: clamp(36px, 5.2vw, 88px);
  letter-spacing: -0.03em;
  line-height: 1;
}
.h-lg {
  font-size: clamp(28px, 3.4vw, 56px);
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.h-md {
  font-size: clamp(22px, 2.2vw, 32px);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.label {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 500;
}
.lede {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.45;
  max-width: 60ch;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--fg-soft);
}
.body-text {
  font-size: 16px;
  line-height: 1.55;
  max-width: 62ch;
  color: var(--fg);
  letter-spacing: -0.005em;
}
.body-text p + p { margin-top: 1em; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  background: var(--placeholder);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 70% 50%, oklch(0.55 0.22 calc(var(--hero-h, 35) + 0)) 0%, transparent 70%),
    linear-gradient(160deg, oklch(0.62 0.18 calc(var(--hero-h, 35) + 12)) 0%, oklch(0.42 0.18 var(--hero-h, 35)) 55%, oklch(0.22 0.1 calc(var(--hero-h, 35) - 8)) 100%);
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0,
    transparent 28px,
    rgba(0,0,0,0.05) 28px,
    rgba(0,0,0,0.05) 29px
  );
}
/* Hero con foto real cargada: oculta las rayas/gradiente placeholder y
   deja que la imagen cubra todo el marco a máxima calidad (sin recomprimir). */
.hero-bg.has-photo { background: #0a0a0a; }
.hero-bg.has-photo::after { display: none; }
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
  display: block;
}
.hero-bg .placeholder-note {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.7);
  font-family: "Geist Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: right;
  max-width: 30ch;
}
.hero-content {
  position: relative;
  z-index: 1;
  padding: 0 var(--pad-x) clamp(40px, 7vh, 80px);
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  color: #ffffff;
}
.hero-statement {
  font-size: clamp(22px, 4.6vw, 76px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.04;
  max-width: 22ch;
  text-wrap: balance;
}
.hero-meta {
  margin-top: clamp(24px, 4vh, 40px);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.75);
  padding-top: 24px;
  border-top: 0.5px solid rgba(255,255,255,0.25);
}
.hero-meta .city { display: inline-flex; gap: 8px; align-items: center; }
.hero-meta .city::before { content: ""; width: 6px; height: 6px; background: #ffffff; border-radius: 50%; }
@media (max-width: 720px) {
  .hero-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ---------- Section heading row ---------- */
.section-pad { padding: clamp(64px, 10vh, 120px) 0; }
.section-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  padding-bottom: clamp(40px, 6vh, 72px);
}
.section-head-row .count {
  font-size: clamp(40px, 5vw, 80px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--muted);
}
.section-head-row .lede-col { max-width: 48ch; }
@media (max-width: 720px) {
  .section-pad { padding: 56px 0; }
  .section-head-row {
    flex-direction: column;
    gap: 20px;
    padding-bottom: 36px;
  }
  .section-head-row .count { align-self: flex-start; }
}

/* ---------- Stacked project cards ---------- */
.stack {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.stack-card {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  transform-origin: center bottom;
  will-change: transform;
  transition: transform 0.4s ease;
  border-radius: 30px;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  background: var(--card-c1, #2a2a2a);
  border: 0.5px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.stack-card .card-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(170deg, var(--card-c1, #2a2a2a) 0%, var(--card-c2, #111) 100%);
}
.stack-card .card-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0, transparent 22px, rgba(255,255,255,0.025) 22px, rgba(255,255,255,0.025) 23px);
}
.stack-card .card-tag {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.65);
  background: rgba(0,0,0,0.18);
  border: 0.5px solid rgba(255,255,255,0.18);
  padding: 6px 10px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.stack-card .card-foot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: clamp(24px, 4vw, 56px);
  z-index: 2;
  color: #ffffff;
}
.stack-card .card-foot .num {
  font-size: clamp(32px, 5vw, 72px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 0.9;
}
.stack-card .card-foot .rule {
  border-top: 1px solid rgba(255,255,255,0.4);
  align-self: center;
}
.stack-card .card-foot .name {
  font-size: clamp(32px, 5vw, 72px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 0.9;
  text-align: right;
}
.stack-card .card-meta-row {
  position: absolute;
  bottom: clamp(20px, 4vw, 48px);
  left: clamp(24px, 4vw, 56px);
  right: clamp(24px, 4vw, 56px);
  z-index: 3;
  display: flex;
  justify-content: space-between;
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
  pointer-events: none;
  transform: translateY(56px);
}
.stack-card:hover .card-bg { filter: brightness(1.05); }
.stack-card:hover .card-foot .name { transform: translateX(-4px); transition: transform .3s ease; }

/* text reveal — letra por letra, gris→primario al pasar por el centro */
.text-reveal .letter {
  display: inline-block;
  opacity: 1;
  color: var(--muted);
  transition: color 0.4s ease;
}
.text-reveal .letter.visible {
  color: var(--fg);
}
.text-reveal .word { display: inline-block; white-space: nowrap; }
.text-reveal .letter.space { display: inline; }

/* image-slot inside the big project cards on the home page */
.stack-card > image-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  color: rgba(255, 255, 255, 0.72);
}
.stack-card > .card-tag,
.stack-card > .card-foot { z-index: 2; }
.stack-card:has(image-slot[data-filled]) .card-bg { display: none; }
@media (max-width: 720px) {
  .stack-card { height: 100vh; }
  .stack-card .card-foot { grid-template-columns: 1fr; gap: 8px; padding: 20px; }
  .stack-card .card-foot .rule { display: none; }
  .stack-card .card-foot .name { text-align: left; }
  .stack-card .card-meta-row { display: none; }
}

/* ---------- Blog horizontal scroll ---------- */
.blog-scroll-wrap {
  position: relative;
}
.blog-scroll {
  display: flex;
  gap: clamp(16px, 1.6vw, 24px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: max(var(--pad-x), calc((100% - var(--max)) / 2 + var(--pad-x)));
  padding-left: max(var(--pad-x), calc((100% - var(--max)) / 2 + var(--pad-x)));
  padding-right: var(--pad-x);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.blog-scroll::-webkit-scrollbar { display: none; }
.blog-card {
  flex: 0 0 calc((100% / 3) - 16px);
  min-width: 320px;
  max-width: 560px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
  cursor: pointer;
}
.blog-card .img {
  width: 100%;
  aspect-ratio: 4 / 3;
  position: relative;
  background: var(--placeholder);
  border-radius: 4px;
  overflow: hidden;
  border: 0.5px solid var(--line);
}
.blog-card .img::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0, transparent 16px, var(--placeholder-stripe) 16px, var(--placeholder-stripe) 17px);
}
.blog-card .img .read-pill {
  position: absolute;
  bottom: 16px; left: 16px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: 0.5px solid rgba(255,255,255,0.15);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-family: "Geist Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s;
}
.blog-card:hover .read-pill { opacity: 1; transform: translateY(0); }
.blog-card .img-tag {
  position: absolute; top: 12px; right: 12px;
  font-family: "Geist Mono", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  background: var(--bg);
  padding: 4px 8px;
  border-radius: 2px;
}
.blog-card .date { font-family: "Geist Mono", monospace; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.blog-card .title { font-size: clamp(18px, 1.4vw, 22px); font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; }
.blog-card.future { opacity: 0.5; cursor: default; }
.blog-scroll-tips {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px var(--pad-x) 0;
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.blog-scroll-tips button {
  width: 36px; height: 36px;
  border: 0.5px solid var(--line-strong);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  color: var(--fg);
  transition: background .2s, border-color .2s;
}
.blog-scroll-tips button:hover { background: var(--line); border-color: var(--fg-soft); }

@media (max-width: 720px) {
  .blog-card { min-width: 78vw; max-width: 78vw; }
}

/* ---------- Footer ---------- */
/* ---------- Pitch section (home — entre stack y blog) ---------- */
.pitch-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  margin-top: clamp(40px, 6vh, 72px);
  padding-top: 32px;
  border-top: 0.5px solid var(--line);
}
.pitch-areas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pitch-areas ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pitch-areas ul li {
  font-size: 17px;
  color: var(--fg);
}
.pitch-about-link {
  font-size: 15px;
  font-weight: 500;
  color: var(--fg);
  text-decoration: none;
  opacity: 0.5;
  transition: opacity 0.2s ease;
  margin-top: 4px;
}
.pitch-about-link:hover { opacity: 1; }
@media (max-width: 720px) {
  .pitch-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
}

.cta-block {
  padding: clamp(96px, 18vh, 200px) 0 clamp(48px, 8vh, 96px);
  text-align: center;
  border-top: 0.5px solid var(--line);
}
.cta-block .lead-small {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 20px;
  display: block;
}
.cta-block a.big {
  display: inline-block;
  font-size: clamp(48px, 8vw, 128px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--fg-soft);
  transition: color .25s ease;
}
.cta-block a.big:hover { color: var(--fg); }
@media (max-width: 720px) {
  .cta-block { padding: 76px 0 60px; }
  .cta-block a.big { font-size: clamp(44px, 13vw, 72px); }
}

.footer {
  border-top: 0.5px solid var(--line);
  padding: 40px 0 0;
}
.footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 64px;
  padding: 40px 0 96px;
}
.footer-cols h4 {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 16px;
  color: var(--fg);
  letter-spacing: -0.005em;
}
.footer-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.footer-cols a { font-size: 15px; color: var(--muted); transition: color .2s; }
.footer-cols a:hover { color: var(--fg); }
@media (max-width: 720px) {
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 32px 24px; padding-bottom: 64px; }
}

.footer-mega {
  width: 100%;
  overflow: hidden;
  padding-bottom: clamp(12px, 2vw, 24px);
}
.footer-mega-text {
  font-size: calc((100vw - 2 * var(--pad-x)) / 6.4);
  line-height: 0.85;
  font-weight: 700;
  letter-spacing: -0.055em;
  white-space: nowrap;
  color: var(--fg);
  margin: 0;
  display: block;
  padding: 0 var(--pad-x);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0 28px;
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  border-top: 0.5px solid var(--line);
  margin-top: 12px;
}
@media (max-width: 720px) {
  .footer-bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
}

/* ---------- Case study (kept for inner pages) ---------- */
.page { padding-top: calc(var(--nav-h) + 16px); }

.page:has(.hero) { padding-top: 0; }
.page-inner { padding-top: calc(var(--nav-h) + 32px); }
.back-link {
  font-family: "Geist Mono", monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 0 32px;
}
.back-link:hover { color: var(--fg-soft); }

.case-header { padding: 64px 0 72px; }
.case-meta-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 24px 0;
  border-top: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
  margin-top: 48px;
}
.case-meta-row .item { display: flex; flex-direction: column; gap: 6px; }
.case-meta-row .item .k { font-family: "Geist Mono", monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.case-meta-row .item .v { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
@media (max-width: 720px) {
  .case-meta-row { grid-template-columns: 1fr 1fr; }
}

.prose-section {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 64px;
  padding: 48px 0;
  border-top: 0.5px solid var(--line);
}
.prose-section h3 {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 500;
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  align-self: start;
}
.prose-section .body-text { font-size: 17px; line-height: 1.55; max-width: 65ch; }
.prose-section .body-text h4 { font-size: 22px; margin: 28px 0 10px; letter-spacing: -0.015em; }
@media (max-width: 720px) {
  .prose-section { grid-template-columns: 1fr; gap: 16px; padding: 32px 0; }
  .prose-section h3 { position: static; }
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 0.5px solid var(--line);
}
.skills-grid .cell {
  padding: 28px 24px;
  border-right: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  min-height: 140px;
}
.skills-grid .cell:nth-child(3n) { border-right: 0; }
.skills-grid .cell .name { font-size: 22px; font-weight: 500; letter-spacing: -0.015em; }
.skills-grid .cell .num { font-family: "Geist Mono", monospace; font-size: 11px; color: var(--muted); }
@media (max-width: 720px) {
  .skills-grid { grid-template-columns: 1fr 1fr; }
  .skills-grid .cell { min-height: 110px; padding: 20px; }
  .skills-grid .cell:nth-child(3n) { border-right: 0.5px solid var(--line); }
  .skills-grid .cell:nth-child(2n) { border-right: 0; }
}

/* Placeholder for case page imagery */
.ph {
  position: relative;
  background: var(--placeholder);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 16px;
  overflow: hidden;
  border: 0.5px solid var(--line);
  color: var(--muted);
  font-family: "Geist Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
}
.ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0, transparent 14px, var(--placeholder-stripe) 14px, var(--placeholder-stripe) 15px);
}
.ph > * { position: relative; z-index: 1; }
.ph .ph-tag { background: var(--bg); padding: 4px 8px; color: var(--fg); }
.ph .ph-id { background: var(--bg); padding: 4px 8px; }
.ph-hero { aspect-ratio: 16 / 9; }
.ph-tall { aspect-ratio: 4 / 5; }
.ph-square { aspect-ratio: 1 / 1; }

/* ── image-slot integration ──────────────────────────────────────────
   <image-slot> sits inside .ph / .hero-bg / .blog-card .img and fills
   it. Frame background is made transparent so the brand striped empty
   state shows through. When the slot is filled (image dropped), we hide
   the stripes and any text chips so the image owns the box. */
.ph { overflow: hidden; }
.ph image-slot,
.hero-bg image-slot,
.blog-card .img image-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}
image-slot::part(frame) { background: transparent; }
image-slot::part(ring) { display: none; }
/* The empty-state caption inside the slot inherits `color` from the
   host. Default is dark grey, which disappears on .ph (near-black) and
   on the hero gradient — so force a light tone for slots living in
   dark containers. The blog cards keep the default light background, so
   the dark caption there is fine. */
.ph image-slot,
.hero-bg image-slot { color: rgba(255, 255, 255, 0.72); }

/* Chips/labels sit on top of the empty slot, hide once the image lands */
.ph .ph-tag,
.ph .ph-id,
.blog-card .img .img-tag,
.hero-bg .placeholder-note {
  z-index: 2;
}
.ph:has(image-slot[data-filled])::before,
.blog-card .img:has(image-slot[data-filled])::before,
.hero-bg:has(image-slot[data-filled])::after { display: none; }
.ph:has(image-slot[data-filled]) .ph-tag,
.ph:has(image-slot[data-filled]) .ph-id,
.blog-card .img:has(image-slot[data-filled]) .img-tag,
.hero-bg:has(image-slot[data-filled]) .placeholder-note { display: none; }
.hero-bg:has(image-slot[data-filled]) { background: #111; }
.blog-card .img:has(image-slot[data-filled]) .read-pill { z-index: 2; }

/* ── VideoPlaceholder ─────────────────────────────────────────────────
   Same striped .ph empty-state, but the slot holds a YouTube embed.
   Used in cases where a hero needs motion (e.g. the Tibetpass hero).
   YouTube video id is persisted in localStorage. */
.video-ph { display: block; }
.video-ph.is-filled::before { display: none; }
.video-ph-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  border: 0;
}
.video-ph-empty {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.6);
  padding: 24px;
  text-align: center;
}
[data-theme="light"] .video-ph-empty { color: rgba(0, 0, 0, 0.55); }
.video-ph-empty svg { opacity: 0.55; }
.video-ph-cap {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.video-ph-sub { font-size: 11px; opacity: 0.75; }
.video-ph-form {
  display: flex;
  gap: 6px;
  width: min(420px, 80%);
  margin-top: 4px;
}
.video-ph-form input {
  flex: 1;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.35);
  color: var(--fg);
  border-radius: 6px;
  padding: 8px 10px;
  font: 12px/1.3 system-ui, -apple-system, sans-serif;
  min-width: 0;
}
[data-theme="light"] .video-ph-form input {
  border-color: rgba(0, 0, 0, 0.18);
  background: rgba(255, 255, 255, 0.7);
}
.video-ph-form input:focus { outline: 1px solid #c96442; outline-offset: 0; }
.video-ph-form button {
  appearance: none;
  border: 0;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
  background: #c96442;
  color: #fff;
  font: 12px/1 system-ui, -apple-system, sans-serif;
  font-weight: 500;
}
.video-ph-form button:hover { background: #b35637; }
.video-ph-ctl {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 8px;
  display: flex;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
  z-index: 3;
  white-space: nowrap;
}
.video-ph:hover .video-ph-ctl { opacity: 1; pointer-events: auto; }
.video-ph-ctl button {
  appearance: none;
  border: 0;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  font: 11px/1 system-ui, -apple-system, sans-serif;
  backdrop-filter: blur(6px);
}
.video-ph-ctl button:hover { background: rgba(0, 0, 0, 0.85); }
.video-ph-err {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  background: rgba(255, 255, 255, 0.92);
  color: #b3261e;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  text-align: center;
}

/* ── Branding case-study atoms ────────────────────────────────────────
   Numbered method stages, pull-quote, three-spaces card grid, takeaways
   list and skill tags. Used in the 13 Fronteras case. Kept generic so
   other cases can reuse them. */

/* Full-width block inside a case page — used to break out of the
   prose-section 2-col grid for big visual units (method grid, pull
   quote, three-spaces). Provides its own vertical rhythm. */
.case-fullblock {
  display: block;
  padding: 16px 0 48px;
}

.method-stages {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 0.5px solid var(--line);
  border-left: 0.5px solid var(--line);
}
.method-stages > li {
  padding: 32px 28px;
  border-right: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: start;
  min-height: 200px;
}
.method-stages .num {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
  padding-top: 4px;
}
.method-stages h5 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.method-stages p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
  text-wrap: pretty;
}
@media (max-width: 720px) {
  .method-stages { grid-template-columns: 1fr; }
  .method-stages > li { min-height: 0; padding: 24px 20px; }
}

/* Pull-quote — the Dave workshop quote. Centered in its full-width
   container so the serif type breathes. */
.case-quote {
  margin: 0 auto;
  padding: 64px 24px;
  border-top: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
  text-align: center;
  max-width: none;
}
.case-quote blockquote {
  font-family: var(--font-display, "Instrument Serif", serif);
  font-size: clamp(22px, 2.8vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-weight: 400;
  margin: 0 auto;
  max-width: 28ch;
  text-wrap: balance;
}
.case-quote blockquote::before {
  content: "“";
  display: block;
  font-size: 1.4em;
  line-height: 0.4;
  color: var(--muted);
  margin-bottom: 24px;
  text-align: center;
}
.case-quote figcaption {
  margin-top: 32px;
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

/* Three-spaces grid — recepción / comensales / cocina. Each card lists
   the three keywords that define its character. Lives in a
   case-fullblock so it spans the full container width. */
.three-spaces {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  border-top: 0.5px solid var(--line);
  border-left: 0.5px solid var(--line);
}
.three-spaces .space {
  padding: 32px 28px;
  border-right: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 240px;
}
.three-spaces .space-label {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.three-spaces .space-words {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-top: auto;
}
@media (max-width: 720px) {
  .three-spaces { grid-template-columns: 1fr; }
  .three-spaces .space { min-height: 0; }
}

/* Takeaways — three numbered lessons in a full-width grid. Small
   serif claim + grey matiz. Visual weight comes from the rule-divided
   columns, not the typography. */
.case-takeaways {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 0.5px solid var(--line);
  border-left: 0.5px solid var(--line);
}
.case-takeaways > li {
  padding: 32px 28px 28px;
  border-right: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 220px;
}
.case-takeaways .num {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.case-takeaways h5 {
  font-family: var(--font-display, "Instrument Serif", serif);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.case-takeaways p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
  margin-top: auto;
  text-wrap: pretty;
}
@media (max-width: 720px) {
  .case-takeaways { grid-template-columns: 1fr; }
  .case-takeaways > li { min-height: 0; }
}

/* Skill tag row — closes out a case with its discipline tags. */
.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 48px;
}
.case-tag {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 10px;
  border: 0.5px solid var(--line);
  border-radius: 999px;
}

/* Materialidad carousel — 4 image-slot placeholders, sliding track,
   floating prev/next arrows, dot indicators, mono counter. */
.mat-carousel {
  position: relative;
  overflow: hidden;
  user-select: none;
}
.mat-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1);
  touch-action: pan-y;
}
.mat-slide {
  flex: 0 0 100%;
  min-width: 0;
}
.ph-mat { aspect-ratio: 16 / 9; background: #000; }
@media (max-width: 720px) {
  /* Carousel becomes a free horizontal scroll track.
     Slide width = 280px × (3000 ÷ 1688) — same ratio as the images,
     so object-fit: cover fills the frame with zero clipping. */
  .mat-carousel {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }
  .mat-track {
    transform: none !important;
    transition: none !important;
    width: max-content;
    pointer-events: none;
    touch-action: pan-x;
  }
  .mat-slide {
    height: 280px;
    width: calc(280px * 3000 / 1688);
    flex: none;
  }
  .mat-slide .ph-mat {
    height: 280px;
    width: 100%;
    aspect-ratio: unset;
  }
}
.mat-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.2s ease, transform 0.2s ease;
  z-index: 2;
}
.mat-nav:hover { background: rgba(0, 0, 0, 0.8); }
.mat-nav.prev { left: 16px; }
.mat-nav.next { right: 16px; }
.mat-dots {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.mat-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.mat-dots .dot:hover { background: rgba(255, 255, 255, 0.65); }
.mat-dots .dot.active {
  background: #fff;
  transform: scale(1.2);
}
.mat-counter {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(0, 0, 0, 0.55);
  padding: 6px 10px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  z-index: 2;
}
.mat-counter .dim { opacity: 0.55; }

/* Other-projects grid — 3×2 placeholder cards at the end of a case.
   Each card has a tall placeholder + small meta caption. */
.other-projects {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px) clamp(16px, 2vw, 28px);
}
.other-projects .project { display: flex; flex-direction: column; gap: 16px; }
.other-projects .project .meta { display: flex; flex-direction: column; gap: 4px; }
.other-projects .project .title { font-size: 15px; font-weight: 500; letter-spacing: -0.005em; }
.other-projects .project .sub {
  font-family: "Geist Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
@media (max-width: 960px) {
  .other-projects { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .other-projects { grid-template-columns: 1fr; }
}

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 32px); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 32px); }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ---------- About areas ---------- */
.about-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  padding: 64px 0;
  border-bottom: 0.5px solid var(--line);
  align-items: end;
}
.about-hero .ph { aspect-ratio: 3 / 4; }
@media (max-width: 720px) {
  .about-hero { grid-template-columns: 1fr; gap: 32px; }
}
.areas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 0.5px solid var(--line);
}
.areas-grid .area {
  padding: 36px 32px 36px 0;
  border-bottom: 0.5px solid var(--line);
  border-right: 0.5px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.areas-grid .area:nth-child(2n) { padding: 36px 0 36px 32px; border-right: 0; }
.areas-grid .area h3 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.areas-grid .area p { font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0; max-width: 50ch; }
@media (max-width: 720px) {
  .areas-grid { grid-template-columns: 1fr; }
  .areas-grid .area, .areas-grid .area:nth-child(2n) { padding: 28px 0; border-right: 0; }
}

/* ---------- BAG list ---------- */
.product-list { border-top: 0.5px solid var(--line); }
.product-row {
  display: grid;
  grid-template-columns: 56px 1fr 280px auto;
  gap: 24px;
  align-items: center;
  padding: 32px 0;
  border-bottom: 0.5px solid var(--line);
  cursor: pointer;
  transition: padding .25s ease;
}
.product-row:hover { padding-left: 16px; padding-right: 16px; }
.product-row .num { font-family: "Geist Mono", monospace; font-size: 13px; color: var(--muted); }
.product-row .name { font-size: clamp(28px, 3vw, 44px); font-weight: 600; letter-spacing: -0.025em; }
.product-row .desc { font-size: 14px; color: var(--muted); line-height: 1.4; }
.product-row .arrow { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; transition: transform .25s ease; }
.product-row:hover .arrow { transform: translate(6px, -6px); }
@media (max-width: 720px) {
  .product-row { grid-template-columns: 36px 1fr auto; }
  .product-row .desc { display: none; }
}

/* ---------- Blog list (Blog page) ---------- */
.blog-list { border-top: 0.5px solid var(--line); }
.blog-row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 0.5px solid var(--line);
  cursor: pointer;
  transition: padding .25s ease;
}
.blog-row:hover { padding-left: 12px; padding-right: 12px; }
.blog-row .date { font-family: "Geist Mono", monospace; font-size: 12px; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.blog-row .title { font-size: clamp(20px, 2vw, 26px); font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; }
.blog-row .arrow { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; transition: transform .25s ease; }
.blog-row:hover .arrow { transform: translate(4px, -4px); }
.blog-row.future { opacity: 0.5; cursor: default; }
.blog-row.future:hover { padding-left: 0; padding-right: 0; }

/* ---------- Article ---------- */
.article-header { padding: 32px 0 32px; max-width: 880px; }
.article-body {
  max-width: 680px;
  font-size: 18px;
  line-height: 1.65;
  letter-spacing: -0.005em;
  padding: 24px 0 96px;
  color: var(--fg-soft);
}

/* Two-column article: text left, square image rail right */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 680px) minmax(300px, 440px);
  gap: clamp(40px, 5vw, 100px);
  align-items: start;
  padding: 24px 0 96px;
}
.article-layout .article-body { padding: 0; max-width: none; }
.article-rail {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 1.6vw, 28px);
}
.article-rail .ph { aspect-ratio: 1 / 1; }
@media (max-width: 960px) {
  .article-layout { grid-template-columns: 1fr; gap: 40px; }
  .article-rail {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
@media (max-width: 520px) {
  .article-rail { grid-template-columns: 1fr; }
}
.article-body h2 { font-size: 26px; margin: 56px 0 12px; letter-spacing: -0.02em; line-height: 1.15; color: var(--fg); }
.article-body p { margin: 0 0 1.2em; }
.article-body blockquote {
  margin: 32px 0;
  padding-left: 24px;
  border-left: 2px solid var(--fg);
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 500;
  color: var(--fg);
}

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- Cursor preview ---------- */
.cursor-preview {
  position: fixed;
  pointer-events: none;
  z-index: 80;
  width: 200px;
  aspect-ratio: 4 / 5;
  border: 0.5px solid var(--line-strong);
  background: var(--placeholder);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  transition: opacity .2s ease, transform .2s ease;
  font-family: "Geist Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: flex-end;
  padding: 12px;
  overflow: hidden;
  border-radius: 2px;
}
.cursor-preview::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0, transparent 12px, var(--placeholder-stripe) 12px, var(--placeholder-stripe) 13px);
}
.cursor-preview.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cursor-preview .tag { position: relative; z-index: 1; background: var(--bg); padding: 4px 8px; color: var(--fg); }
@media (hover: none), (max-width: 820px) { .cursor-preview { display: none; } }

/* ---------- Lightbox (published site only) ---------- */
body[data-published] .ph-hero:has(image-slot[data-filled]),
body[data-published] .ph-mat:has(image-slot[data-filled]),
body[data-published] .hero-bg:has(image-slot[data-filled]) { cursor: zoom-in; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 56px);
  background: rgba(0, 0, 0, 0.93);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
  cursor: zoom-out;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img {
  width: 100%;
  height: auto;
  max-width: 1500px;
  max-height: 100%;
  object-fit: contain;
  display: block;
  cursor: default;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}
.lightbox .lb-close {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0.5px solid rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background 0.2s;
}
.lightbox .lb-close:hover { background: rgba(0, 0, 0, 0.8); }

/* ---------- Intro de carga (page load animation) ----------
   Solo aplica mientras <html> tiene .intro-pending (se setea en cada carga
   real, no en la navegaci\u00f3n interna por hash). Al agregar .intro-go arrancan
   las transiciones; al terminar se quitan ambas clases y todo queda est\u00e1tico.
   Todos los efectos son ease-out, solo blur + opacity (salvo el zoom del fondo).
*/

/* 1. Velo negro: fade out 0s \u2192 0.25s */
.intro-veil {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: #0a0a0a;
  opacity: 0;
  pointer-events: none;
}
/* Estado inicial oculto (antes de .intro-go) — evita flash */
.intro-pending .hero-bg { opacity: 0; transform: scale(1.05); transform-origin: center; }
.intro-pending .nav .brand,
.intro-pending .nav-center,
.intro-pending .nav-right { opacity: 0; filter: blur(8px); }
.intro-pending .hero-word { display: inline-block; opacity: 0; filter: blur(8px); }

/* Disparo: cada elemento corre su animacion (fill 'both' = queda estatico al final).
   Animaciones via @keyframes para que el estado final mande sobre el inicial
   sin depender de la especificidad de selectores compuestos. */
.intro-go .intro-veil { animation: introVeil 0.25s ease-out both; }                 /* 1. fade desde negro */
.intro-go .hero-bg    { animation: introHeroBg 1.2s ease-out 0.25s both; }          /* 2. zoom + fade imagen */
.intro-go .nav .brand { animation: introBlurIn 0.5s ease-out 0.25s both; }          /* 3. logo */
.intro-go .nav-center,
.intro-go .nav-right  { animation: introBlurIn 0.5s ease-out 0.5s both; }           /* 4. navegacion */
.intro-go .hero-word  { animation: introBlurIn 0.5s ease-out both; }                /* 5. statement (delay inline por linea) */

@keyframes introVeil   { from { opacity: 1; } to { opacity: 0; } }
@keyframes introHeroBg { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: scale(1); } }
@keyframes introBlurIn { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0); } }

@media (prefers-reduced-motion: reduce) {
  .intro-pending .intro-veil { opacity: 0; }
  .intro-pending .hero-bg,
  .intro-pending .nav .brand,
  .intro-pending .nav-center,
  .intro-pending .nav-right,
  .intro-pending .hero-word { opacity: 1; filter: none; transform: none; }
  .intro-go .intro-veil,
  .intro-go .hero-bg,
  .intro-go .nav .brand,
  .intro-go .nav-center,
  .intro-go .nav-right,
  .intro-go .hero-word { animation: none !important; }
}

/* Estado final permanente: tras la intro, JS quita intro-pending/intro-go y
   agrega intro-done. Reglas de una sola clase (no compuestas) que fijan el
   estado visible definitivo, y evitan que la animación se repita al navegar. */
.intro-done .intro-veil { opacity: 0; }
.intro-done .hero-bg { opacity: 1; transform: none; }
.intro-done .nav .brand,
.intro-done .nav-center,
.intro-done .nav-right,
.intro-done .hero-word { opacity: 1; filter: none; }