/* =========================================================================
   HORIZON23 STUDIO — Site CSS (HiFi)
   Applies the design system to the lo-fi wireframe class names.
   Editorial / NASA-worm / monochrome with safelight punctuation.
   ========================================================================= */

/* ---------- Webfonts ---------------------------------------------------- */
@font-face {
  font-family: 'Syne';
  src: url('../fonts/Syne-VariableFont_wght.ttf') format('truetype-variations'),
       url('../fonts/Syne-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GS Code';
  src: url('../fonts/GoogleSansCode-VariableFont_MONO_wght.ttf') format('truetype-variations'),
       url('../fonts/GoogleSansCode-VariableFont_MONO_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GS Code';
  src: url('../fonts/GoogleSansCode-Italic-VariableFont_MONO_wght.ttf') format('truetype-variations'),
       url('../fonts/GoogleSansCode-Italic-VariableFont_MONO_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ----------------------------------------------------- */
:root {
  /* Core monochrome */
  --h23-black:       #0A0A0A;
  --h23-near-black:  #141414;
  --h23-ink:         #1A1A1A;
  --h23-graphite:    #2A2A2A;
  --h23-iron:        #3D3D3D;
  --h23-steel:       #6E6E6E;
  --h23-fog:         #9A9A9A;
  --h23-ash:         #C2C2C2;
  --h23-bone:        #DEDEDE;
  --h23-paper:       #EFEFEF;
  --h23-cream:       #F4F2EE;
  --h23-white:       #FFFFFF;

  /* Accent — Safelight */
  --h23-safelight:       #FF3B14;
  --h23-safelight-deep:  #C9290A;
  --h23-safelight-glow:  #FF6A3D;

  /* Semantic — Light is default */
  --bg:          var(--h23-cream);
  --bg-raised:   var(--h23-white);
  --bg-sunk:     var(--h23-paper);
  --bg-inverse:  var(--h23-black);

  --fg:          var(--h23-ink);
  --fg-2:        var(--h23-iron);
  --fg-3:        var(--h23-steel);
  --fg-muted:    var(--h23-fog);
  --fg-inverse:  var(--h23-white);

  --border:        rgba(26,26,26,.92);
  --border-soft:   rgba(26,26,26,.18);
  --border-faint:  rgba(26,26,26,.10);
  --border-hair:   rgba(26,26,26,.12);

  --accent:        var(--h23-safelight);
  --accent-hover:  var(--h23-safelight-deep);

  /* Fonts */
  --font-display: 'Syne', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Syne', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'GS Code', ui-monospace, Menlo, monospace;

  /* Layout */
  --container-max: 1360px;
  --gutter:        56px;
  --gutter-mobile: 24px;

  /* Motion */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-inout:  cubic-bezier(0.7, 0, 0.2, 1);
  --dur-fast:    120ms;
  --dur-base:    240ms;
}

/* ---------- Reset ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  font-feature-settings: 'ss01', 'kern';
}
img, video, svg { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
::selection { background: var(--accent); color: #fff; }

/* ---------- Container & sections -------------------------------------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (max-width: 768px) {
  .container { padding: 0 var(--gutter-mobile); }
}

.section {
  padding: 112px 0;
  position: relative;
}
.section--soft  { background: var(--bg-sunk); }
.section--dark  { background: var(--h23-black); color: var(--h23-white); }
.section--paper { background: var(--bg-raised); }

@media (max-width: 768px) {
  .section { padding: 72px 0; }
}

/* ---------- Type ------------------------------------------------------- */
.h-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 7.4vw, 112px);
  line-height: 0.94;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--fg);
  text-wrap: balance;
}
/* Modifier for long single-string display headlines (no manual <br>). */
.h-display--long {
  font-size: clamp(36px, 5.2vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.h-1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--fg);
  text-wrap: balance;
}
/* Modifier for longer h-1 titles (multi-clause sentences). */
.h-1--long {
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.h-2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--fg);
}
.h-3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.h-4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--fg);
}

.body-lg {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--fg-2);
  text-wrap: pretty;
}
.body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-2);
}
.body-sm {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-2);
}

/* Eyebrows / labels: mono uppercase tracked */
.label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: inline-block;
}
.label--accent { color: var(--accent); }
.label::before { content: "— "; opacity: .6; }

.meta-label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 6px;
  display: block;
}
.meta-value {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--fg);
  letter-spacing: -0.005em;
}

/* Dark surface inversion */
.section--dark .h-display,
.section--dark .h-1,
.section--dark .h-2,
.section--dark .h-3,
.section--dark .h-4 { color: var(--h23-white); }
.section--dark .body-lg,
.section--dark .body,
.section--dark .body-sm { color: var(--h23-bone); }
.section--dark .label { color: var(--h23-fog); }
.section--dark .label--accent { color: var(--accent); }
.section--dark .meta-label { color: var(--h23-fog); }
.section--dark .meta-value { color: var(--h23-white); }

/* The brand dot — safelight square */
.dot {
  display: inline-block;
  width: 10px; height: 10px;
  background: var(--accent);
  vertical-align: baseline;
  margin-left: 0.18em;
  transform: translateY(-0.04em);
}
.dot-sm {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--accent);
  vertical-align: middle;
}

/* ---------- Grid utilities -------------------------------------------- */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: 1fr 1fr; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }
/* Prevent grid children from overflowing their 1fr track */
.grid > * { min-width: 0; }
.grid--gap-sm { gap: 1px; }
.grid--gap-lg { gap: 32px; }
.grid--gap-xl { gap: 64px; }
@media (max-width: 900px) {
  .grid--3, .grid--4, .grid--5 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: 1fr; }
}

.flex { display: flex; }
.flex--col { flex-direction: column; }
.flex--center { align-items: center; }
.flex--between { justify-content: space-between; }
.flex--end { justify-content: flex-end; }
.flex--wrap { flex-wrap: wrap; }
.gap-sm { gap: 8px; }
.gap-md { gap: 16px; }
.gap-lg { gap: 24px; }
.gap-xl { gap: 40px; }

/* ---------- Buttons --------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  border-radius: 0;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--fg);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
  cursor: pointer;
}
.btn::after {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  background: currentColor;
}
.btn--primary {
  background: var(--h23-black);
  color: var(--h23-white);
  border-color: var(--h23-black);
}
.btn--primary::after { background: var(--accent); }
.btn--primary:hover {
  background: var(--accent);
  color: var(--h23-white);
  border-color: var(--accent);
}
.btn--primary:hover::after { background: var(--h23-white); }

.btn--secondary {
  background: transparent;
  color: var(--h23-black);
  border-color: var(--h23-black);
}
.btn--secondary::after { background: var(--accent); }
.btn--secondary:hover {
  background: var(--h23-black);
  color: var(--h23-white);
}

.btn--ghost-light {
  background: transparent;
  color: var(--h23-white);
  border-color: var(--h23-white);
}
.btn--ghost-light::after { background: var(--accent); }
.btn--ghost-light:hover {
  background: var(--h23-white);
  color: var(--h23-black);
}

.btn--lg {
  padding: 18px 28px;
  font-size: 12px;
}
.btn--block { width: 100%; }

/* ---------- Tags / chips ---------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--fg);
  border-radius: 0;
}
.cap {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--fg);
  border-radius: 0;
}

/* ---------- Header ---------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244,242,238,0.86);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border-faint);
  padding: 0 var(--gutter);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
@media (max-width: 768px) {
  .nav { padding: 0 var(--gutter-mobile); height: 64px; }
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 28px;
}
.logo__wordmark {
  /* Full official wordmark — H23 isotipo + HORIZON23 STUDIO */
  display: block;
  width: 152px;
  height: 26px;
  background: url('../assets/logo-horizon23.svg') left center / contain no-repeat;
  flex-shrink: 0;
  font-size: 0;
  color: transparent;
  text-indent: -9999px;
  overflow: hidden;
}
/* On dark surfaces, invert the black wordmark to white via filter */
.section--dark .logo__wordmark,
.footer .logo__wordmark { filter: invert(1); }
.footer .logo__wordmark { width: 180px; height: 32px; }
@media (max-width: 640px) {
  .logo__wordmark { width: 128px; height: 22px; }
  .footer .logo__wordmark { width: 152px; height: 26px; }
}

.nav__menu {
  display: flex;
  gap: 32px;
}
.nav__menu a {
  position: relative;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  padding: 26px 0;
  transition: color var(--dur-fast);
}
.nav__menu a:hover { color: var(--accent); }
.nav__menu a.active { color: var(--fg); }
.nav__menu a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 18px;
  height: 2px;
  background: var(--accent);
}

.nav__cta {
  display: flex;
  align-items: center;
  gap: 16px;
}
.nav__cta .btn {
  padding: 11px 16px;
  font-size: 10px;
}
.nav__clock {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
}

@media (max-width: 960px) {
  .nav__menu { display: none; }
  .nav__cta-text { display: none; }
  .nav__clock { display: none; }
  .nav .btn--primary { display: none; }
}

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-soft);
  border-radius: 0;
  background: transparent;
}
@media (max-width: 960px) {
  .burger { display: flex; }
}
.burger span {
  display: block;
  width: 16px;
  height: 1px;
  background: var(--fg);
}

/* ---------- Top corner strip (instrument panel) ----------------------- */
.corner-strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.corner-strip > :nth-child(2) { text-align: center; }
.corner-strip > :nth-child(3) { text-align: right; }
@media (max-width: 640px) {
  .corner-strip { grid-template-columns: 1fr 1fr; }
  .corner-strip > :nth-child(2) { display: none; }
}
.section--dark .corner-strip { border-bottom-color: rgba(255,255,255,.12); color: var(--h23-fog); }

/* ---------- Footer ---------------------------------------------------- */
.footer {
  background: var(--h23-black);
  color: var(--h23-white);
  padding: 96px 0 32px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
@media (max-width: 768px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}
.footer__tagline {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--h23-fog);
  margin-top: 18px;
  max-width: 320px;
  line-height: 1.55;
}
.footer__col h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--h23-fog);
  margin-bottom: 18px;
}
.footer__col h4::before { content: "— "; opacity: .6; }
.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__col a {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--h23-bone);
  transition: color var(--dur-fast);
}
.footer__col a:hover { color: var(--accent); }
.footer__bottom {
  padding-top: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--h23-fog);
}
.footer__bottom > :nth-child(2) { text-align: center; }
.footer__bottom > :nth-child(3) { text-align: right; }
@media (max-width: 640px) {
  .footer__bottom { grid-template-columns: 1fr; }
  .footer__bottom > * { text-align: left !important; }
}

/* ---------- Media placeholders --------------------------------------- */
.media {
  background: var(--h23-near-black);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 120px;
  border-radius: 0;
}
.media::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* corner crosshair marks */
    linear-gradient(#FF3B14, #FF3B14) top left / 14px 1px no-repeat,
    linear-gradient(#FF3B14, #FF3B14) top left / 1px 14px no-repeat,
    linear-gradient(#FF3B14, #FF3B14) top right / 14px 1px no-repeat,
    linear-gradient(#FF3B14, #FF3B14) top right / 1px 14px no-repeat,
    linear-gradient(#FF3B14, #FF3B14) bottom left / 14px 1px no-repeat,
    linear-gradient(#FF3B14, #FF3B14) bottom left / 1px 14px no-repeat,
    linear-gradient(#FF3B14, #FF3B14) bottom right / 14px 1px no-repeat,
    linear-gradient(#FF3B14, #FF3B14) bottom right / 1px 14px no-repeat;
  background-origin: padding-box;
  background-clip: padding-box;
  /* push crosshair 14px in from each corner */
  background-position:
    14px 14px, 14px 14px,
    calc(100% - 14px) 14px, calc(100% - 14px) 14px,
    14px calc(100% - 14px), 14px calc(100% - 14px),
    calc(100% - 14px) calc(100% - 14px), calc(100% - 14px) calc(100% - 14px);
  opacity: 0.55;
  pointer-events: none;
}
/* film-grain wash */
.media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,107,61,0.20), transparent 60%);
  pointer-events: none;
}
.media__label {
  position: relative;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--h23-fog);
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.12);
}

/* Video block */
.video-block {
  background: var(--h23-near-black);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 120px;
}
.video-block::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255,90,40,0.32), transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(140,30,8,0.45), transparent 55%);
}
.video-block__play {
  position: relative;
  z-index: 2;
  width: 88px;
  height: 88px;
  border: 1px solid var(--h23-white);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  transition: background var(--dur-base) var(--ease-out);
}
.video-block__play::after {
  content: "";
  width: 0; height: 0;
  border-left: 14px solid var(--h23-white);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 6px;
}
.video-block:hover .video-block__play { background: var(--accent); border-color: var(--accent); }
.video-block__label {
  position: absolute;
  bottom: 18px;
  left: 18px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--h23-fog);
}
.video-block__label::before { content: "▶ "; color: var(--accent); }

/* ---------- Case card ------------------------------------------------- */
.case-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  border-top: 1px solid var(--border-soft);
  padding-top: 18px;
  transition: opacity var(--dur-base);
}
.case-card__media {
  aspect-ratio: 4 / 5;
  margin-bottom: 18px;
}
.case-card__sector {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 10px;
}
.case-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.05;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.case-card__desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.5;
  text-wrap: pretty;
}
.case-card:hover .case-card__title { color: var(--accent); }
.section--soft .case-card,
.section--dark .case-card { border-top-color: var(--border-soft); }
.section--dark .case-card { border-top-color: rgba(255,255,255,.18); }
.section--dark .case-card__title { color: var(--h23-white); }
.section--dark .case-card__sector { color: var(--h23-fog); }
.section--dark .case-card__desc { color: var(--h23-bone); }

/* ---------- Phase blocks --------------------------------------------- */
.phase {
  border: 1px solid var(--border-soft);
  background: transparent;
  padding: 24px 22px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 240px;
  border-radius: 0;
  position: relative;
  transition: background var(--dur-base), color var(--dur-base);
}
.phase__num {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--fg-3);
  letter-spacing: 0.20em;
  text-transform: uppercase;
}
.phase__num::after { content: " ▸"; color: var(--accent); }
.phase__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-top: auto;
}
.phase__desc {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.5;
}
.phase--active {
  background: var(--h23-black);
  border-color: var(--h23-black);
}
.phase--active .phase__num { color: var(--accent); }
.phase--active .phase__num::after { color: var(--h23-white); }
.phase--active .phase__name { color: var(--h23-white); }
.phase--active .phase__desc { color: var(--h23-bone); }
.phase--inactive {
  opacity: 0.4;
}
.section--soft .phase { background: var(--bg-raised); }

/* Phase detail */
.phase-detail {
  display: grid;
  grid-template-columns: 80px 1.4fr 1fr;
  gap: 56px;
  padding: 72px 0;
  border-bottom: 1px solid var(--border-soft);
  align-items: start;
}
.phase-detail:last-child { border-bottom: 0; }
@media (max-width: 900px) {
  .phase-detail { grid-template-columns: 1fr; gap: 24px; padding: 48px 0; }
}
.phase-detail__num {
  font-family: var(--font-mono);
  font-size: 48px;
  font-weight: 500;
  color: var(--accent);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.phase-detail__main { display: flex; flex-direction: column; gap: 20px; }
.phase-detail__subtitle {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--fg-3);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.phase-detail__name {
  font-family: var(--font-display);
  font-size: clamp(40px, 4.4vw, 64px);
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.035em;
  text-transform: uppercase;
  line-height: 0.95;
}
.phase-detail__desc {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg-2);
  line-height: 1.55;
  text-wrap: pretty;
  max-width: 56ch;
}
.phase-detail__side {
  background: var(--bg-raised);
  padding: 24px;
  border: 1px solid var(--border-soft);
  border-radius: 0;
}
.section--soft .phase-detail__side { background: var(--bg); }
.phase-detail__side h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 16px;
}
.phase-detail__side h4::before { content: "— "; opacity: .6; }
.phase-detail__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.phase-detail__list li {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg);
  padding-left: 22px;
  position: relative;
  line-height: 1.5;
}
.phase-detail__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 1px;
  background: var(--accent);
}

/* ---------- Bento ----------------------------------------------------- */
.bento {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  height: 640px;
}
.bento > *:nth-child(1) { grid-row: 1 / 3; }
@media (max-width: 768px) {
  .bento { grid-template-columns: 1fr; grid-template-rows: auto; height: auto; }
  .bento > * { aspect-ratio: 4/3; }
  .bento > *:nth-child(1) { grid-row: auto; }
}
.bento-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.bento-row > * { aspect-ratio: 4/3; }
@media (max-width: 768px) {
  .bento-row { grid-template-columns: 1fr; }
}

/* ---------- Breadcrumb ----------------------------------------------- */
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 32px 0 0;
}
.breadcrumb a { color: var(--fg-3); transition: color var(--dur-fast); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span { margin: 0 10px; color: var(--fg-muted); }

/* ---------- Step list ------------------------------------------------ */
.step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.step__num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 500;
  border-radius: 0;
  font-size: 11px;
  letter-spacing: 0.05em;
}
.step__title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 4px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.step__desc {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.5;
}

/* ---------- Metric --------------------------------------------------- */
.metric__num {
  font-family: var(--font-display);
  font-size: clamp(56px, 7vw, 104px);
  font-weight: 700;
  color: var(--h23-white);
  line-height: 0.9;
  letter-spacing: -0.05em;
  margin-bottom: 16px;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.metric__num::after {
  content: "";
  display: inline-block;
  width: 10px; height: 10px;
  background: var(--accent);
  margin-left: 0.04em;
  transform: translateY(-0.4em);
}
.metric__desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--h23-bone);
  line-height: 1.5;
  max-width: 300px;
}

/* ---------- Quote ---------------------------------------------------- */
.quote {
  border-left: 1px solid var(--accent);
  padding: 8px 24px;
  margin: 32px 0;
}
.quote__text {
  font-family: var(--font-display);
  font-size: 22px;
  font-style: italic;
  font-weight: 500;
  color: var(--fg);
  line-height: 1.35;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.quote__author {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.20em;
}

/* ---------- Sector card --------------------------------------------- */
.sector {
  display: block;
  padding: 40px 36px 44px;
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  transition: background var(--dur-base), border-color var(--dur-base);
  border-radius: 0;
  position: relative;
}
.sector:hover {
  background: var(--h23-black);
  border-color: var(--h23-black);
  color: var(--h23-white);
}
.sector:hover .h-2 { color: var(--h23-white); }
.sector:hover .body { color: var(--h23-bone); }
.sector:hover .label { color: var(--h23-fog); }
.sector:hover .sector__link { color: var(--accent); border-bottom-color: var(--accent); }
.sector__link {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  transition: color var(--dur-fast);
}

/* ---------- Clients ------------------------------------------------- */
.clients {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--border-soft);
}
@media (max-width: 768px) {
  .clients { grid-template-columns: repeat(2, 1fr); }
}
.client-logo {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
  background: transparent;
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.client-logo:nth-child(5n) { border-right: 0; }
.client-logo:hover { color: var(--fg); background: var(--bg-raised); }
@media (max-width: 768px) {
  .client-logo { border-right: 1px solid var(--border-soft); }
  .client-logo:nth-child(2n) { border-right: 0; }
}

/* ---------- Meta grid (case header) --------------------------------- */
.meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 28px 0;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
@media (max-width: 768px) {
  .meta-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* ---------- CTA block ----------------------------------------------- */
.cta-block {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}

/* ---------- Form ---------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}
.field__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--fg);
}
.field__label .req { color: var(--accent); margin-left: 4px; }
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  border: 1px solid var(--border-soft);
  border-radius: 0;
  background: var(--bg-raised);
  color: var(--fg);
  transition: border-color var(--dur-fast);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--fg-muted); }
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--h23-black);
  box-shadow: 0 0 0 2px var(--accent);
  box-shadow: inset 0 -2px 0 0 var(--accent);
}
.field textarea { min-height: 140px; resize: vertical; }
.field__help {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ---------- Filters / chips (Trabajo) ------------------------------- */
.filters {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 56px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--border-soft);
}
.filter-group {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.filter-group__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
  min-width: 80px;
}
.filter-group__label::before { content: "— "; opacity: .6; }
.filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  border: 1px solid var(--border-soft);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: all var(--dur-fast);
}
.filter-chip:hover { border-color: var(--fg); }
.filter-chip--active {
  background: var(--h23-black);
  color: var(--h23-white);
  border-color: var(--h23-black);
}

.results-count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 40px;
}
.results-count strong { color: var(--fg); font-weight: 600; }

/* ---------- Team card ----------------------------------------------- */
.team-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--border-soft);
  padding-top: 16px;
}
.team-card__photo {
  aspect-ratio: 3/4;
  margin-bottom: 12px;
}
.team-card__name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.team-card__role {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--accent);
}
.team-card__bio {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.55;
  margin-top: 6px;
  text-wrap: pretty;
}
.section--soft .team-card { border-top-color: var(--border-soft); }

/* ---------- Rule card (3 reglas) ------------------------------------ */
.rule-card {
  border: 1px solid var(--border-soft);
  background: var(--bg-raised);
  padding: 36px 30px 32px;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 280px;
  position: relative;
}
.rule-card__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.18em;
  margin-bottom: 36px;
}
.rule-card__num::before { content: "// "; }
.rule-card__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.rule-card__desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.6;
  text-wrap: pretty;
}

/* ---------- Pain card ----------------------------------------------- */
.pain-card {
  background: var(--bg-raised);
  border: 1px solid var(--border-soft);
  padding: 32px 28px;
  border-radius: 0;
  position: relative;
}
.pain-card__icon {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--accent);
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 24px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}
.pain-card__icon::after { content: "/ DOLOR"; color: var(--fg-3); }
.pain-card__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 10px;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.pain-card__desc {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.55;
  text-wrap: pretty;
}

/* ---------- Check list ---------------------------------------------- */
.check-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.check-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--fg);
  line-height: 1.5;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-faint);
}
.check-list li::before {
  content: "✕";
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 0.25em;
  letter-spacing: 0;
}
.section--dark .check-list li { color: var(--h23-white); border-bottom-color: rgba(255,255,255,.10); }

/* ---------- Manifesto ----------------------------------------------- */
.manifesto {
  padding: 80px 0;
  text-align: center;
}
.manifesto__quote {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--h23-white);
  max-width: 1040px;
  margin: 0 auto 32px;
  text-wrap: balance;
}
.manifesto__attribution {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--h23-fog);
}

/* =========================================================================
   MOTION / SCROLLYTELLING LAYER
   ========================================================================= */

/* Scroll-progress bar */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  z-index: 1000;
  pointer-events: none;
  will-change: transform;
  mix-blend-mode: normal;
}

/* Reveal-on-scroll primitive ------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 700ms cubic-bezier(0.2, 0.7, 0.1, 1),
    transform 700ms cubic-bezier(0.2, 0.7, 0.1, 1);
  transition-delay: calc(var(--reveal-i, 0) * 60ms);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* Hero variant — slightly slower & deeper, more cinematic on first paint */
.reveal--hero {
  transform: translate3d(0, 22px, 0);
  transition-duration: 900ms, 900ms;
  transition-delay: calc(120ms + var(--reveal-i, 0) * 70ms);
}
/* Big visual blocks: subtle scale-in instead of translate */
.video-block.reveal,
.media.reveal {
  transform: translate3d(0, 24px, 0) scale(1.012);
  transition-duration: 1000ms, 1000ms;
}
.video-block.reveal.is-visible,
.media.reveal.is-visible {
  transform: translate3d(0, 0, 0) scale(1);
}

/* Parallax helper — JS writes --parallax-y, CSS applies translateY */
[data-parallax] {
  will-change: transform;
}
[data-parallax].photo {
  background-position: center calc(50% + var(--parallax-y, 0px));
  transition: background-position 80ms linear;
}

/* Cinematic grain — barely-there noise on dark surfaces / video block.
   Pure SVG fractal noise via data URI, blended low. */
.section--dark::after,
.video-block::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1   0 0 0 0 1   0 0 0 0 1   0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  animation: grain 1200ms steps(3) infinite;
}
@keyframes grain {
  0%   { transform: translate3d(0, 0, 0); }
  33%  { transform: translate3d(-6px, 4px, 0); }
  66%  { transform: translate3d(4px, -3px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}
.section--dark { position: relative; overflow: hidden; }

/* Live indicator pulse — only on dots explicitly marked --live */
.dot--live, .dot-sm--live {
  position: relative;
}
.dot--live::after, .dot-sm--live::after {
  content: "";
  position: absolute;
  inset: -4px;
  background: var(--accent);
  opacity: 0.5;
  animation: livepulse 2200ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}
@keyframes livepulse {
  0%   { transform: scale(0.7); opacity: 0.55; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* Case card — refined hover (image zoom, label slide, title color) */
.case-card { overflow: hidden; }
.case-card .case-card__media {
  overflow: hidden;
  position: relative;
}
.case-card .case-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.35));
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
  z-index: 2;
  pointer-events: none;
}
.case-card.photo,
.case-card .case-card__media.photo,
.case-card .photo {
  transition: background-size 800ms var(--ease-out),
              filter 600ms var(--ease-out);
}
.case-card:hover .case-card__media.photo {
  background-size: 108%;
}
.case-card:hover .case-card__media::after { opacity: 1; }
.case-card .media__label {
  transition: transform 360ms var(--ease-out), background-color 240ms;
}
.case-card:hover .media__label {
  transform: translateX(6px);
}
.case-card__title { transition: color 240ms var(--ease-out), transform 360ms var(--ease-out); }
.case-card:hover .case-card__title { color: var(--accent); transform: translateX(2px); }

/* Button arrow-square nudges on hover */
.btn { transition: background var(--dur-fast) var(--ease-out),
                   color var(--dur-fast) var(--ease-out),
                   border-color var(--dur-fast) var(--ease-out); }
.btn::after { transition: transform 220ms var(--ease-out); }
.btn:hover::after { transform: translateX(4px); }

/* Nav link underline animation (replaces stamped ::after) */
.nav__menu a { position: relative; }
.nav__menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 18px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 260ms var(--ease-out);
}
.nav__menu a:hover::after,
.nav__menu a.is-near::after { transform: scaleX(0.6); }
.nav__menu a.active::after { transform: scaleX(1); }

/* Phase cards — subtle hover lift */
.phase { transition: background 320ms var(--ease-out), border-color 320ms var(--ease-out), transform 320ms var(--ease-out); }
.phase:hover {
  border-color: var(--fg);
  transform: translateY(-2px);
}

/* Sector cards — gentle hover scale */
.sector { transition: background var(--dur-base), border-color var(--dur-base), transform 360ms var(--ease-out); }
.sector:hover { transform: translateY(-3px); }

/* Logo wordmark — micro hover (whole nav logo) */
.logo { transition: opacity 220ms var(--ease-out); }
.logo:hover { opacity: 0.7; }

/* Disable everything when user prefers reduced motion */
.motion-off .reveal { opacity: 1; transform: none; }
.motion-off .scroll-progress { display: none; }
.motion-off .section--dark::after,
.motion-off .video-block::after,
.motion-off .dot--live::after,
.motion-off .dot-sm--live::after { animation: none; }

/* =========================================================================
   HERO CINEMÁTICO — scroll-bound dock
   ========================================================================= */

.hero {
  position: relative;
  height: 220vh;            /* scroll budget: ~120vh of animation + landing */
  background: var(--h23-black);
  margin-top: -72px;        /* pull up under the sticky nav */
  margin-bottom: 0;
  overflow: clip;
}
.hero__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* The reel — JS animates position + size between full-bleed and dock */
.hero__reel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
  background-color: var(--h23-near-black);
  will-change: transform, width, height, left, top;
  transition: filter 600ms var(--ease-out);
}
.hero__reel-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.35) 65%, rgba(0,0,0,0.7) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  z-index: 1;
  transition: opacity 600ms var(--ease-out);
}
.hero__reel-chip {
  position: absolute;
  top: clamp(88px, 12vh, 120px);
  left: clamp(20px, 4vw, 48px);
  z-index: 4;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  display: inline-flex;
  align-items: center;
  opacity: 0;                /* hidden during cinema; JS fades in at dock */
  transition: opacity 480ms var(--ease-out);
}
.hero__reel-label {
  position: absolute;
  bottom: clamp(20px, 3vh, 36px);
  left: clamp(20px, 4vw, 48px);
  z-index: 4;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--h23-fog);
}
.hero__reel-label::before { content: "▶ "; color: var(--accent); }
.hero__reel-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(64px, 7vw, 96px);
  height: clamp(64px, 7vw, 96px);
  border: 1px solid rgba(255,255,255,.85);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  cursor: pointer;
  transition: background 280ms var(--ease-out), border-color 280ms var(--ease-out);
}
.hero__reel-play::after {
  content: "";
  width: 0; height: 0;
  border-left: 14px solid var(--h23-white);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 6px;
  transition: border-color 280ms var(--ease-out);
}
.hero__reel-play:hover { background: var(--accent); border-color: var(--accent); }

/* Cinematic overlay (visible at progress 0 → fades by 0.45) */
.hero__cinema {
  position: absolute;
  inset: 0;
  z-index: 3;
  color: var(--h23-white);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(88px, 12vh, 120px) clamp(24px, 4vw, 56px) clamp(24px, 4vh, 56px);
  pointer-events: none;
  transition: opacity 400ms var(--ease-out);
}
.hero__cinema-top, .hero__cinema-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
}
.hero__cinema-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.hero__cinema-center {
  align-self: center;
  text-align: left;
  max-width: 1200px;
}
.hero__cinema-eyebrow {
  color: var(--accent) !important;
  margin-bottom: clamp(18px, 2.5vh, 32px);
}
.hero__cinema-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(64px, 12vw, 200px);
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--h23-white);
  margin: 0;
  text-wrap: balance;
}
.hero__cinema-sub {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1vw, 13px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin-top: clamp(20px, 3vh, 36px);
}
.hero__cinema-cue {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.hero__cinema-cue-bar {
  display: inline-block;
  width: 40px;
  height: 1px;
  background: rgba(255,255,255,0.3);
  position: relative;
  overflow: hidden;
}
.hero__cinema-cue-bar span {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: 0 50%;
  animation: cueRun 2.2s cubic-bezier(0.7,0,0.3,1) infinite;
}
@keyframes cueRun {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* Docked grid (visible after the reel anchors right) */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
}
.hero__grid-inner {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: clamp(88px, 11vh, 116px); /* clear the nav + breathing room */
  padding-bottom: clamp(40px, 6vh, 72px);
}
.hero__strip {
  margin-bottom: clamp(20px, 3vh, 40px);
  border-bottom: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.65);
  flex-shrink: 0;
}
.hero__strip > * { color: inherit !important; }
.hero__grid-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
  min-height: 0;
}
.hero__grid-text .h-display {
  font-size: clamp(40px, 4.4vw, 72px);
  line-height: 0.96;
}
.hero__grid-text .mb-xl { margin-bottom: clamp(20px, 2.6vh, 32px); }
.hero__grid-text .mb-lg { margin-bottom: clamp(14px, 1.8vh, 22px); }
.hero__grid-text .mb-md { margin-bottom: clamp(10px, 1.4vh, 16px); }
.hero__grid-text { color: var(--h23-white); }
.hero__grid-text .h-display { color: var(--h23-white); }
.hero__grid-text .body-lg { color: var(--h23-bone); }
.hero__grid-text .label,
.hero__grid-text .idx { color: rgba(255,255,255,0.65); }
.hero__grid-text .btn--secondary { color: var(--h23-white); border-color: var(--h23-white); }
.hero__grid-text .btn--secondary:hover { background: var(--h23-white); color: var(--h23-black); }
.hero__grid-text .btn--primary { background: var(--h23-white); color: var(--h23-black); border-color: var(--h23-white); }
.hero__grid-text .btn--primary:hover { background: var(--accent); border-color: var(--accent); color: var(--h23-white); }
.hero__grid-text .btn--primary::after { background: var(--accent); }
.hero__grid-text .btn--primary:hover::after { background: var(--h23-white); }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(28px, 4vh, 48px);
  border-top: 1px solid rgba(255,255,255,0.18);
}
.hero__stats > * {
  padding: 18px 18px 0 0;
  border-right: 1px solid rgba(255,255,255,0.12);
  color: var(--h23-white);
}
.hero__stats > *:nth-child(2) { padding-left: 18px; }
.hero__stats > *:last-child { border-right: 0; padding-left: 18px; padding-right: 0; }
.hero__stats .idx,
.hero__stats .body-sm { color: rgba(255,255,255,0.65); }

.hero__dock {
  width: 100%;
  aspect-ratio: 4/5;
  min-height: 360px;
  max-height: min(82vh, 720px);
  visibility: hidden;          /* invisible, only used for measurement */
}

/* Nav inversion while cinema overlay is active */
body.hero-cinema-on .nav {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.hero-cinema-on .nav .logo__wordmark { filter: invert(1); }
body.hero-cinema-on .nav__menu a { color: rgba(255,255,255,0.85); }
body.hero-cinema-on .nav__menu a:hover { color: var(--h23-white); }
body.hero-cinema-on .nav__menu a.active { color: var(--h23-white); }
body.hero-cinema-on .nav__clock { color: rgba(255,255,255,0.55); }
body.hero-cinema-on .nav .btn--primary {
  background: transparent;
  color: var(--h23-white);
  border-color: rgba(255,255,255,0.45);
}
body.hero-cinema-on .nav .btn--primary:hover {
  background: var(--h23-white); color: var(--h23-black); border-color: var(--h23-white);
}
body.hero-cinema-on .burger { border-color: rgba(255,255,255,0.35); }
body.hero-cinema-on .burger span { background: var(--h23-white); }
.nav, .nav .logo__wordmark, .nav__menu a, .nav__clock, .nav .btn--primary, .burger, .burger span {
  transition: background 320ms var(--ease-out),
              color 320ms var(--ease-out),
              border-color 320ms var(--ease-out),
              filter 320ms var(--ease-out);
}

/* =========================================================================
   MOBILE — hero stack + menu + grid collapses
   ========================================================================= */

/* Stacked-hero rules — also applied when prefers-reduced-motion is on, so
   the cinematic dock doesn't trap a11y users on a poster screen. */
@media (max-width: 900px) {
  /* Hero collapses to a stack: full-bleed reel on top, content below */
  .hero {
    height: auto;
    background: var(--h23-black);
    overflow: visible;
  }
  .hero__pin {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
  }
  .hero__reel {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 460px;
    top: auto; left: auto;
  }
  .hero__cinema {
    position: absolute;
    inset: 0;
    pointer-events: none;
    padding: 84px 20px 24px;
  }
  .hero__cinema-center { align-self: end; padding-bottom: 24px; }
  .hero__cinema-title { font-size: clamp(56px, 16vw, 96px); }
  .hero__cinema-top { display: none; }
  .hero__cinema-bottom { display: none; }
  .hero__grid {
    position: relative;
    inset: auto;
    opacity: 1 !important;
    z-index: 1;
    padding: 32px 0 56px;
  }
  .hero__grid-inner { padding-top: 0; }
  .hero__strip { display: none; }
  .hero__grid-body { grid-template-columns: 1fr; gap: 32px; }
  .hero__dock { display: none; }
  .hero__stats {
    margin-top: 32px;
    grid-template-columns: 1fr;
  }
  .hero__stats > * {
    padding: 16px 0;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .hero__stats > *:last-child { border-bottom: 0; }

  body.hero-cinema-on .nav { background: transparent; }
}

/* Reduced-motion fallback: same stacked layout, no scroll-bound animation.
   Mirrors the mobile block but also hides the cinematic poster overlay so
   the actual content (headline, CTAs) is the immediate view. */
html.motion-off .hero {
  height: auto;
  background: var(--h23-black);
  overflow: visible;
  margin-top: -72px;
}
html.motion-off .hero__pin {
  position: relative;
  top: auto;
  height: auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
}
html.motion-off .hero__reel {
  position: relative;
  width: 100%;
  height: clamp(420px, 60vh, 640px);
  top: auto; left: auto;
}
html.motion-off .hero__reel-chip,
html.motion-off .hero__reel-label,
html.motion-off .hero__reel-play { opacity: 1; }
html.motion-off .hero__cinema { display: none; }
html.motion-off .hero__grid {
  position: relative;
  inset: auto;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 1;
  padding: 56px 0 72px;
}
html.motion-off .hero__grid-inner { padding-top: 0; }
html.motion-off .hero__strip { display: none; }
html.motion-off .hero__grid-body { grid-template-columns: 1fr; gap: 40px; }
html.motion-off .hero__dock { display: none; }
html.motion-off .hero__stats { margin-top: 40px; grid-template-columns: repeat(3, 1fr); }
html.motion-off .hero__stats > * {
  padding: 18px 18px 0 0;
  border-right: 1px solid rgba(255,255,255,0.12);
  border-bottom: 0;
}
html.motion-off .hero__stats > *:nth-child(2) { padding-left: 18px; }
html.motion-off .hero__stats > *:last-child { border-right: 0; padding-left: 18px; }

/* =========================================================================
   MOBILE MENU OVERLAY
   ========================================================================= */

.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: 250;
  background: var(--h23-black);
  color: var(--h23-white);
  display: flex;
  flex-direction: column;
  padding: 24px;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 320ms var(--ease-out),
              transform 320ms var(--ease-out),
              visibility 0s linear 320ms;
}
.nav-mobile.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 320ms var(--ease-out),
              transform 320ms var(--ease-out),
              visibility 0s linear 0s;
}
.nav-mobile__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0 32px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.nav-mobile__brand {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.nav-mobile__close {
  width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,0.35);
  background: transparent;
  color: var(--h23-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}
.nav-mobile__close::before,
.nav-mobile__close::after {
  content: "";
  position: absolute;
  width: 18px; height: 1px;
  background: var(--h23-white);
}
.nav-mobile__close::before { transform: rotate(45deg); }
.nav-mobile__close::after  { transform: rotate(-45deg); }

.nav-mobile__list {
  list-style: none;
  margin: 0; padding: 32px 0 0;
  display: flex;
  flex-direction: column;
}
.nav-mobile__list li {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-mobile__list a {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 22px 0;
  color: var(--h23-white);
  text-decoration: none;
  transition: color 200ms var(--ease-out), padding 220ms var(--ease-out);
}
.nav-mobile__list a:hover,
.nav-mobile__list a.active { color: var(--h23-white); padding-left: 6px; }
.nav-mobile__idx {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.45);
}
.nav-mobile__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.nav-mobile__arrow {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 14px;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 220ms, transform 220ms;
}
.nav-mobile__list a:hover .nav-mobile__arrow,
.nav-mobile__list a.active .nav-mobile__arrow {
  opacity: 1;
  transform: translateX(0);
}
.nav-mobile__sectors {
  padding: 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nav-mobile__sectors .label { color: rgba(255,255,255,0.55); margin-bottom: 12px; }
.nav-mobile__sectors a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--h23-white);
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-mobile__sectors a::after { content: "→"; color: var(--accent); }

.nav-mobile__cta {
  padding: 32px 0 24px;
}
.nav-mobile__cta .btn--block { width: 100%; }

.nav-mobile__foot {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

/* Stagger the items on open */
.nav-mobile.is-open .nav-mobile__list li,
.nav-mobile.is-open .nav-mobile__sectors a,
.nav-mobile.is-open .nav-mobile__cta,
.nav-mobile.is-open .nav-mobile__foot {
  animation: navMobileIn 480ms cubic-bezier(0.2, 0.7, 0.1, 1) both;
}
.nav-mobile.is-open .nav-mobile__list li:nth-child(1)  { animation-delay: 60ms; }
.nav-mobile.is-open .nav-mobile__list li:nth-child(2)  { animation-delay: 110ms; }
.nav-mobile.is-open .nav-mobile__list li:nth-child(3)  { animation-delay: 160ms; }
.nav-mobile.is-open .nav-mobile__list li:nth-child(4)  { animation-delay: 210ms; }
.nav-mobile.is-open .nav-mobile__list li:nth-child(5)  { animation-delay: 260ms; }
.nav-mobile.is-open .nav-mobile__sectors a:nth-child(2)  { animation-delay: 320ms; }
.nav-mobile.is-open .nav-mobile__sectors a:nth-child(3)  { animation-delay: 360ms; }
.nav-mobile.is-open .nav-mobile__cta { animation-delay: 420ms; }
.nav-mobile.is-open .nav-mobile__foot { animation-delay: 480ms; }
@keyframes navMobileIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Lock body scroll when overlay is open */
body.nav-mobile-open { overflow: hidden; }

/* =========================================================================
   MOBILE — general layout adjustments
   ========================================================================= */

@media (max-width: 768px) {
  /* Nav: trim padding, hide clock + CTA text, keep burger */
  .nav { height: 64px; }

  /* Section padding tighter */
  .section { padding: 64px 0; }
  .section--soft, .section--dark { padding: 64px 0; }

  /* Headlines balance better in narrow viewports */
  .h-display { font-size: clamp(40px, 11vw, 64px); line-height: 0.96; }
  .h-display--long { font-size: clamp(32px, 9vw, 52px); }
  .h-1 { font-size: clamp(28px, 8vw, 44px); }
  .h-1--long { font-size: clamp(24px, 7vw, 36px); }
  .h-2 { font-size: clamp(24px, 6.5vw, 36px); }

  /* Section heads: stack idx + title */
  .section-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }

  /* Grids fall to single column already; tighten gaps */
  .grid { gap: 20px; }
  .grid--gap-lg { gap: 24px; }
  .grid--gap-xl { gap: 32px; }
  .grid--5 { grid-template-columns: 1fr; }
  .grid--5.grid--gap-sm { gap: 1px; }

  /* Case-card images can be taller on mobile to feel more cinematic */
  .case-card__media { aspect-ratio: 3/4; }
  .case-card__title { font-size: 20px; }

  /* Phase blocks: full-width, slimmer */
  .phase { min-height: 200px; padding: 22px 20px; }
  .phase__name { font-size: 28px; }

  /* Sector cards */
  .sector { padding: 32px 24px; }
  .sector .h-2 { font-size: 28px; }

  /* CTA blocks center & tighten */
  .cta-block .h-display { font-size: clamp(40px, 12vw, 64px); }

  /* Phase detail collapses */
  .phase-detail { grid-template-columns: 1fr; gap: 20px; padding: 40px 0; }
  .phase-detail__num { font-size: 32px; }

  /* Filters wrap nicely */
  .filter-group { flex-direction: column; align-items: flex-start; gap: 8px; }
  .filter-group__label { min-width: 0; }

  /* Footer collapses to 2-col then 1 */
  .footer { padding: 56px 0 24px; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; }

  /* Clients grid 2x3 on mobile */
  .clients { grid-template-columns: repeat(2, 1fr); }
  .client-logo { height: 80px; font-size: 10px; }
  .client-logo:nth-child(5n) { border-right: 1px solid var(--border-soft); }
  .client-logo:nth-child(2n) { border-right: 0; }

  /* Meta grid (case header) */
  .meta-grid { grid-template-columns: 1fr 1fr; padding: 20px 0; }

  /* Forms padding */
  .field input, .field textarea, .field select { padding: 12px 14px; font-size: 16px; }

  /* Container padding */
  .container { padding: 0 20px; }

  /* Rule cards */
  .rule-card { padding: 28px 22px; min-height: auto; }
  .rule-card__num { margin-bottom: 24px; }
  .rule-card__title { font-size: 22px; }

  /* Pain cards */
  .pain-card { padding: 24px 22px; }

  /* Team cards */
  .team-card__name { font-size: 16px; }

  /* Hide top corner strip on small screens (saves vertical) */
  .corner-strip { font-size: 9px; grid-template-columns: 1fr 1fr; padding: 14px 0; gap: 12px; }
  .corner-strip > :nth-child(3) { display: none; }

  /* Page-strip slim */
  .page-strip { font-size: 9px; padding: 14px 0; }
}

@media (max-width: 480px) {
  .h-display { font-size: clamp(36px, 12vw, 56px); }
  .container { padding: 0 18px; }
  .nav { padding: 0 18px; }
}

/* ---------- Utilities ----------------------------------------------- */
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 16px; }
.mt-lg { margin-top: 24px; }
.mt-xl { margin-top: 40px; }
.mt-2xl { margin-top: 64px; }
.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 16px; }
.mb-lg { margin-bottom: 24px; }
.mb-xl { margin-bottom: 40px; }
.mb-2xl { margin-bottom: 64px; }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.max-w-md { max-width: 680px; }
.max-w-lg { max-width: 880px; }
.max-w-xl { max-width: 1120px; }
.divider {
  height: 1px;
  background: var(--border-soft);
  margin: 24px 0;
  border: none;
}

/* ---------- Index numerals ------------------------------------------ */
.idx {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--fg-3);
  text-transform: uppercase;
}

/* ---------- Photo helpers ------------------------------------------- */
.photo {
  background-size: cover;
  background-position: center;
  background-color: var(--h23-near-black);
}
.photo--portrait    { background-image: url('../assets/ref-bw-portrait-03.webp'); filter: grayscale(1) contrast(1.04); }
.photo--portrait-2  { background-image: url('../assets/ref-bw-portrait-01.webp'); filter: grayscale(1) contrast(1.04); }
.photo--portrait-3  { background-image: url('../assets/ref-bw-portrait-02.webp'); filter: grayscale(1) contrast(1.04); }
.photo--figure-1    { background-image: url('../assets/ref-bw-figure-01.webp'); filter: grayscale(1) contrast(1.04); }
.photo--figure-2    { background-image: url('../assets/ref-bw-figure-02.webp'); filter: grayscale(1) contrast(1.04); }
.photo--figure-3    { background-image: url('../assets/ref-bw-figure-03.webp'); filter: grayscale(1) contrast(1.04); }
.photo--figure-4    { background-image: url('../assets/ref-bw-figure-04.webp'); filter: grayscale(1) contrast(1.04); }
.photo--figure-5    { background-image: url('../assets/ref-bw-figure-05.webp'); filter: grayscale(1) contrast(1.04); }
.photo--figure-6    { background-image: url('../assets/ref-bw-figure-06.webp'); filter: grayscale(1) contrast(1.04); }
.photo--redroom-1   { background-image: url('../assets/photo-redroom-01.jpg'); }
.photo--redroom-2   { background-image: url('../assets/photo-redroom-02.jpg'); }
.photo--redroom-3   { background-image: url('../assets/photo-redroom-03.webp'); }
.photo--editorial   { background-image: url('../assets/ref-editorial-grid.jpg'); }
.photo--process     { background-image: url('../assets/ref-process-discover.jpg'); }
.photo--portrait-blur { background-image: url('../assets/ref-portrait-blur.webp'); }

/* Hide the placeholder X & label when we have a real photo */
.photo .media__label { background: rgba(0,0,0,.55); color: var(--h23-white); border-color: transparent; }

/* ---------- Page intro corner labels -------------------------------- */
.page-strip {
  padding: 18px 0;
  border-bottom: 1px solid var(--border-faint);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.page-strip > :nth-child(2) { text-align: center; }
.page-strip > :nth-child(3) { text-align: center; }
.page-strip > :nth-child(4) { text-align: right; }
@media (max-width: 640px) {
  .page-strip { grid-template-columns: 1fr 1fr; }
  .page-strip > :nth-child(3), .page-strip > :nth-child(4) { display: none; }
}

/* ---------- Section header (index + title) -------------------------- */
.section-head {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  align-items: start;
  margin-bottom: 56px;
  padding-top: 8px;
  border-top: 1px solid var(--border-soft);
  padding-top: 24px;
}
.section-head__idx {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding-top: 12px;
}
.section--dark .section-head { border-top-color: rgba(255,255,255,.18); }
.section--dark .section-head__idx { color: var(--h23-fog); }
@media (max-width: 640px) {
  .section-head { grid-template-columns: 1fr; gap: 12px; }
}

/* ---------- Misc ---------------------------------------------------- */
.eyebrow-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.eyebrow-row .hairline {
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}

/* =========================================================================
   CASE HERO — full-bleed banner for individual case pages (caso.html).
   Texto sobre el banner, layout simple. Sits below the sticky nav.
   ========================================================================= */
.caso-hero {
  position: relative;
  width: 100%;
  min-height: 640px;
  height: calc(100vh - 72px);
  max-height: 880px;
  overflow: hidden;
  background-color: var(--h23-black);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--h23-white);
  isolation: isolate;
}
.caso-hero__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 22%, rgba(0,0,0,0.0) 45%, rgba(0,0,0,0.55) 80%, rgba(0,0,0,0.85) 100%),
    radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}

/* Top overlay row */
.caso-hero__top {
  position: absolute;
  top: clamp(20px, 3.2vh, 36px);
  left: 0;
  right: 0;
  z-index: 3;
  padding: 0 clamp(24px, 5vw, 64px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.caso-hero__tags {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.caso-hero__tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(0,0,0,0.32);
  backdrop-filter: blur(4px);
}
.caso-hero__tag--accent { color: var(--accent); border-color: rgba(255,59,20,.55); }
.caso-hero__rec {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.95);
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(4px);
  display: inline-flex;
  align-items: center;
}

/* Center play button */
.caso-hero__play {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: clamp(72px, 7vw, 104px);
  height: clamp(72px, 7vw, 104px);
  border: 1px solid rgba(255,255,255,.85);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 280ms var(--ease-out), border-color 280ms var(--ease-out), transform 360ms var(--ease-out);
}
.caso-hero__play::after {
  content: "";
  width: 0; height: 0;
  border-left: 16px solid var(--h23-white);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  margin-left: 6px;
  transition: border-left-color 280ms var(--ease-out);
}
.caso-hero__play:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translate(-50%, -50%) scale(1.05);
}

/* Bottom content stack */
.caso-hero__bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: clamp(28px, 4vh, 56px) clamp(24px, 5vw, 64px) clamp(32px, 4.5vh, 64px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vh, 36px);
}
.caso-hero__content { max-width: 1280px; }
.caso-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  margin: 0 0 clamp(14px, 2vh, 22px);
}
.caso-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 5.4vw, 88px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--h23-white);
  margin: 0;
  text-wrap: balance;
}

/* Meta strip */
.caso-hero__meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255,255,255,0.22);
  padding-top: clamp(14px, 2vh, 22px);
}
.caso-hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 18px;
  border-right: 1px solid rgba(255,255,255,0.14);
}
.caso-hero__meta-item:last-child { border-right: 0; }
.caso-hero__meta-item:not(:first-child) { padding-left: 18px; }
.caso-hero__meta-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.caso-hero__meta-value {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 500;
  color: var(--h23-white);
  letter-spacing: -0.005em;
}

/* Scroll cue */
.caso-hero__cue {
  position: absolute;
  right: clamp(24px, 5vw, 64px);
  bottom: clamp(32px, 4.5vh, 64px);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  z-index: 3;
  pointer-events: none;
}
.caso-hero__cue-bar {
  display: inline-block;
  width: 40px;
  height: 1px;
  background: rgba(255,255,255,0.28);
  position: relative;
  overflow: hidden;
}
.caso-hero__cue-bar span {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform-origin: 0 50%;
  animation: cueRun 2.2s cubic-bezier(0.7,0,0.3,1) infinite;
}

/* Post-hero strip (breadcrumb + capacidades) */
.caso-caps {
  padding: clamp(28px, 4vh, 48px) 0 clamp(20px, 3vh, 36px);
  border-bottom: 1px solid var(--border-soft);
}

@media (max-width: 900px) {
  .caso-hero {
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .caso-hero__media,
  .caso-hero__vignette { position: absolute; }
  .caso-hero {
    aspect-ratio: 4 / 5;
    min-height: 560px;
  }
  .caso-hero__cue { display: none; }
  .caso-hero__meta {
    grid-template-columns: 1fr 1fr;
    gap: 14px 0;
  }
  .caso-hero__meta-item {
    border-right: 0;
    padding-left: 0 !important;
    padding-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    padding-bottom: 10px;
  }
  .caso-hero__meta-item:nth-child(odd) { padding-right: 14px; }
  .caso-hero__meta-item:nth-child(even) { padding-left: 14px !important; border-left: 1px solid rgba(255,255,255,0.12); }
  .caso-hero__meta-item:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
  .caso-hero__title { font-size: clamp(32px, 9vw, 56px); }
}

/* =========================================================================
   FEATURE CASE — visual hero treatment for the first project in "Casos
   seleccionados". Three layouts switchable via [data-trabajo-layout]:
   split (default) · overlay (cinematic) · stacked (magazine)
   ========================================================================= */
.feature-case {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid var(--border-soft);
  padding-top: clamp(24px, 3vw, 40px);
}
.feature-case__media {
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
  min-height: 320px;
  min-width: 0;
  width: 100%;
}
.feature-case__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  transition: opacity 480ms var(--ease-out);
}
.feature-case__chip {
  position: absolute;
  top: clamp(16px, 2vw, 24px);
  left: clamp(16px, 2vw, 24px);
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.95);
  padding: 6px 12px;
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(6px);
  display: inline-flex;
  align-items: center;
}
.feature-case__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(64px, 5.5vw, 84px);
  height: clamp(64px, 5.5vw, 84px);
  z-index: 3;
  border: 1px solid rgba(255,255,255,.85);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 280ms var(--ease-out), border-color 280ms var(--ease-out), transform 360ms var(--ease-out);
}
.feature-case__play::after {
  content: "";
  width: 0; height: 0;
  border-left: 13px solid var(--h23-white);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 6px;
  transition: border-left-color 280ms var(--ease-out);
}
.feature-case:hover .feature-case__play {
  background: var(--accent);
  border-color: var(--accent);
  transform: translate(-50%, -50%) scale(1.06);
}
.feature-case .media__label {
  position: absolute;
  left: clamp(16px, 2vw, 24px);
  bottom: clamp(16px, 2vw, 24px);
  z-index: 3;
}

.feature-case__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(20px, 2.5vw, 32px);
  padding: clamp(8px, 1.5vw, 16px) 0;
  min-width: 0;
}
.feature-case__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: clamp(14px, 2vh, 22px);
  border-bottom: 1px solid var(--border-soft);
}
.feature-case__meta .label { margin-bottom: 0; }
.feature-case__sector {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.feature-case__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 3.6vw, 56px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
  transition: color 240ms var(--ease-out);
}
.feature-case__desc {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 44ch;
  margin: 0;
  text-wrap: pretty;
}
.feature-case__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: clamp(14px, 2vh, 22px);
  border-top: 1px solid var(--border-soft);
}
.feature-case__cta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  transition: color 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.feature-case__tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}
.feature-case__tags span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 4px 10px;
  border: 1px solid var(--border-soft);
}

/* hover */
.feature-case .media.photo {
  transition: background-size 800ms var(--ease-out), filter 600ms var(--ease-out);
}
.feature-case:hover .media.photo { background-size: 106%; }
.feature-case:hover .feature-case__media::after { opacity: 0.6; }
.feature-case:hover .feature-case__title { color: var(--accent); }
.feature-case:hover .feature-case__cta { color: var(--accent); transform: translateX(3px); }
.feature-case:hover .media__label { transform: translateX(6px); }

/* ---- Layout variant: OVERLAY (cinematic full-bleed) ---- */
[data-trabajo-layout="overlay"] .feature-case {
  grid-template-columns: 1fr;
  position: relative;
  gap: 0;
  border-top: 0;
  padding-top: 0;
}
[data-trabajo-layout="overlay"] .feature-case__media {
  aspect-ratio: 21 / 9;
  min-height: 480px;
}
[data-trabajo-layout="overlay"] .feature-case__media::after {
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.0) 35%, rgba(0,0,0,0.65) 100%);
  opacity: 1;
}
[data-trabajo-layout="overlay"] .feature-case__body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 4;
  padding: clamp(28px, 4vw, 56px);
  color: var(--h23-white);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
}
[data-trabajo-layout="overlay"] .feature-case__title { color: var(--h23-white); }
[data-trabajo-layout="overlay"] .feature-case__desc { color: rgba(255,255,255,.85); max-width: 60ch; }
[data-trabajo-layout="overlay"] .feature-case__meta { border-bottom-color: rgba(255,255,255,.22); }
[data-trabajo-layout="overlay"] .feature-case__meta .label { color: var(--accent) !important; }
[data-trabajo-layout="overlay"] .feature-case__sector { color: rgba(255,255,255,.7); }
[data-trabajo-layout="overlay"] .feature-case__foot { border-top-color: rgba(255,255,255,.22); }
[data-trabajo-layout="overlay"] .feature-case__cta { color: var(--h23-white); }
[data-trabajo-layout="overlay"] .feature-case__tags span { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.22); }

/* ---- Layout variant: STACKED (magazine — media on top, text below) ---- */
[data-trabajo-layout="stacked"] .feature-case {
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.4vw, 32px);
}
[data-trabajo-layout="stacked"] .feature-case__media {
  aspect-ratio: 21 / 9;
  min-height: 380px;
}
[data-trabajo-layout="stacked"] .feature-case__body {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: end;
}
[data-trabajo-layout="stacked"] .feature-case__meta {
  grid-column: 1 / -1;
  padding-bottom: clamp(12px, 1.6vh, 18px);
}
[data-trabajo-layout="stacked"] .feature-case__foot {
  grid-column: 1 / -1;
}

/* ---- Mobile ---- */
@media (max-width: 900px) {
  .feature-case {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .feature-case__media { aspect-ratio: 4/3; min-height: 280px; }
  .feature-case__title { font-size: clamp(32px, 8vw, 44px); }
  .feature-case__foot { flex-direction: column; align-items: flex-start; }

  [data-trabajo-layout="overlay"] .feature-case__media { aspect-ratio: 4/5; min-height: 520px; }
  [data-trabajo-layout="overlay"] .feature-case__body { padding: 24px; }
  [data-trabajo-layout="stacked"] .feature-case__body { grid-template-columns: 1fr; }
  [data-trabajo-layout="stacked"] .feature-case__media { aspect-ratio: 4/3; min-height: 280px; }
}

/* =========================================================================
   MOBILE REFINEMENTS — v1 launch feedback
   Addresses: long footer, filter chips stacking vertically, homepage
   collapsing to a single column, team grid too sparse on mobile.
   These rules are intentionally appended last so they win against the
   earlier mobile overrides without modifying them.
   ========================================================================= */

/* — Footer: keep 2-up on tablet, only collapse to 1-up at very small — */
@media (max-width: 768px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding-bottom: 28px;
  }
  .footer__brand     { grid-column: 1 / -1; }   /* brand spans both columns at top */
  .footer__col--red  { grid-column: 1 / -1; }   /* Red spans both at bottom so icons get full width */
}
/* Only collapse to a single column on truly tiny screens (older iPhone SE etc.) */
@media (max-width: 360px) {
  .footer__grid { grid-template-columns: 1fr; }
  .footer__brand, .footer__col--red { grid-column: auto; }
}

/* — Filter chips on /trabajo: horizontal scroll instead of vertical stack — */
@media (max-width: 768px) {
  .filters { gap: 14px; margin-bottom: 32px; }
  .filter-group {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 6px;
    /* edge-to-edge feel: extend past container, then re-pad inside */
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    scroll-snap-type: x proximity;
  }
  .filter-group > * { flex-shrink: 0; scroll-snap-align: start; }
  .filter-chip { padding: 7px 12px; font-size: 10px; }
}

/* — Homepage process preview (5 phases): horizontal scroll-snap — */
@media (max-width: 768px) {
  [data-section="proceso"] .grid--5 {
    grid-template-columns: repeat(5, 78vw);
    grid-auto-flow: column;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    gap: 12px;
  }
  [data-section="proceso"] .grid--5 > * { scroll-snap-align: start; min-width: 0; }
  [data-section="proceso"] .phase { min-height: 220px; }
}

/* — Homepage "Soluciones por sector" cards: bento "1 + 2" on mobile.
     With 3 sector cards a plain 2-up grid leaves one alone in row 2.
     The bento promotes the first card to a full-width hero and arranges
     the remaining two side-by-side underneath. */
@media (max-width: 900px) {
  .section .grid:has(> .sector) {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .section .grid:has(> .sector) > .sector:first-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 640px) {
  .section .grid:has(> .sector) { gap: 10px; }
  .sector { padding: 22px 16px 26px; }
  .sector .h-2 { font-size: 18px; }
  .sector .body { font-size: 12px; line-height: 1.5; }
  .sector .label { font-size: 10px; }
  .sector__link { font-size: 11px; }
}

/* — Footer "Red" column: stack a primary CTA over a horizontal row of
     icon links. The base .footer__col ul rule sets flex-direction:column,
     so the !important here is the one place we deliberately override that
     to force a row. The icons distribute evenly across the column width. */
.footer__col--red ul.footer__social {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.footer__col--red ul.footer__social li {
  margin: 0;
  flex: 0 0 auto;          /* each li shrinks to its content, no fill */
}
.footer__col--red ul.footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  color: var(--h23-bone);
  transition: border-color .15s ease, color .15s ease;
}
.footer__col--red ul.footer__social a:hover,
.footer__col--red ul.footer__social a:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: none;
}
.footer__col--red ul.footer__social svg {
  width: 16px;
  height: 16px;
  display: block;
}
.footer__col--red .footer__cta-line {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.footer__col--red .footer__cta-line a {
  color: var(--h23-bone);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}
.footer__col--red .footer__cta-line a:hover {
  color: var(--accent);
}
/* On the very narrow mobile column the icons get a tighter gap so they
   fit in one row (7 icons × ~36 px = ~252 px + gaps). */
@media (max-width: 480px) {
  .footer__col--red ul.footer__social { gap: 6px; }
  .footer__col--red ul.footer__social a { width: 34px; height: 34px; }
  .footer__col--red ul.footer__social svg { width: 15px; height: 15px; }
}

/* — Estudio team grid: 2-up at tablet, 1-up only at ≤480px — */
@media (max-width: 900px) {
  .section .grid.grid--3:has(> .team-card) {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .section .grid.grid--3:has(> .team-card) {
    grid-template-columns: 1fr;
  }
}

/* — Homepage hero stats: keep 3-up but compact on the smallest screens — */
@media (max-width: 480px) {
  .hero__stats > * { padding: 12px 8px 0 0; }
  .hero__stats > *:nth-child(2),
  .hero__stats > *:last-child { padding-left: 8px; }
  .hero__stats .idx { font-size: 22px; }
  .hero__stats .h-4 { font-size: 11px; }
  .hero__stats .body-sm { font-size: 10px; line-height: 1.3; }
}

/* =========================================================================
   MOBILE REFINEMENTS — v2 launch feedback
   ========================================================================= */

/* — Feature-case card on homepage: drop the discipline pill row on mobile.
     With "PRODUCCIÓN AUDIOVISUAL / COBERTURA DE EVENTO / ANIMACIÓN 2D"
     stacked underneath the title the card became visually noisy on
     phones. The "Ver caso completo →" link still leads to the same info. */
@media (max-width: 768px) {
  .feature-case__tags { display: none; }
  .feature-case__foot { padding-bottom: 8px; }
}

/* — Project case page phases: hide inactive (OFF) phases on mobile so
     the page is shorter, and compress active ones to feel less heavy. */
@media (max-width: 768px) {
  .phase--inactive { display: none !important; }
  .phase {
    min-height: 160px;
    padding: 18px 16px 22px;
    gap: 10px;
  }
  .phase__name { font-size: 32px; line-height: 1; }
  .phase__num  { font-size: 10px; }
  .phase__desc { font-size: 13px; line-height: 1.45; }
}

/* — Page edges: match the html element to the footer so iOS Safari's
     bounce / overlaid URL bar doesn't reveal a white strip below the
     footer. (The body still has its normal section backgrounds.) — */
html { background: #0a0a0a; }


/* =========================================================================
   MOBILE APP-LIKE PASS — v3 (the "feels like a native app" overhaul)

   Scope: ≤ 900px viewports. Architecture and content are unchanged; this
   section reshapes the mobile experience so it reads as a native app
   rather than a desktop site shrunk down. Highlights:

   1. Persistent bottom tab bar (.nav-tabbar) anchored in the thumb zone
   2. Slim glass top header (logo only) instead of full nav
   3. Section content gains breathing room + soft rounded "card" feel
   4. Typography scaled up to native-app proportions (17px body, etc.)
   5. Hero treatment is full-bleed, with rounded bottom corners and a
      larger display title that bleeds into the surrounding negative space
   6. Safe-area insets honored for the home indicator + URL bar
   7. Larger touch targets (≥ 48px) + active-press scale micro-interaction
   8. Floating WhatsApp CTA raised to sit above the tab bar
   ========================================================================= */

/* ── Body padding so content always clears the tab bar ──────────────── */
@media (max-width: 900px) {
  body {
    /* 64px bar + 16px breathing room + safe-area inset for iPhone home indicator */
    padding-bottom: calc(64px + 16px + env(safe-area-inset-bottom, 0px));
    min-height: 100dvh;
  }
}

/* ── Bottom tab bar ─────────────────────────────────────────────────── */
.nav-tabbar { display: none; }

@media (max-width: 900px) {
  .nav-tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    /* glass surface — translucent dark with backdrop blur */
    background: rgba(10, 10, 10, 0.86);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
            backdrop-filter: saturate(180%) blur(18px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.32);
  }
  .nav-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    min-height: 52px;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 10px;
    transition: color .18s ease, transform .18s ease, background .18s ease;
  }
  .nav-tab:active { transform: scale(0.94); }
  .nav-tab__icon {
    display: inline-flex;
    width: 24px;
    height: 24px;
  }
  .nav-tab__icon svg { width: 100%; height: 100%; }
  .nav-tab__label {
    line-height: 1;
    font-weight: 500;
  }
  .nav-tab.is-active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);
  }
  .nav-tab.is-active .nav-tab__icon {
    color: var(--accent, #FF3B14);
  }
  /* Accent dot above the active tab — subtle app convention */
  .nav-tab.is-active::before {
    content: '';
    position: absolute;
    top: 4px;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent, #FF3B14);
  }
  .nav-tab { position: relative; }
}

/* ── Top nav: slim glass header (logo + burger only) on mobile ─────── */
@media (max-width: 900px) {
  .nav {
    height: 56px;
    background: rgba(10, 10, 10, 0.78);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
            backdrop-filter: saturate(180%) blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: sticky;
    top: 0;
    z-index: 50;
  }
  .nav .logo__wordmark { font-size: 13px; letter-spacing: 0.04em; }
  .nav__clock { display: none; }
  .nav .btn--primary { display: none; }
  .burger {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px;
  }
  .burger:active { transform: scale(0.92); }
}

/* ── Section rhythm: more app-like vertical breathing room ─────────── */
@media (max-width: 900px) {
  .section {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  .section + .section { padding-top: 24px; }
  .container { padding-left: 18px; padding-right: 18px; }
  .section-head { gap: 8px; margin-bottom: 24px; }
  .section-head__idx {
    font-size: 11px;
    margin-bottom: 6px;
  }
}

/* ── Typography: bump base to 17px and rescale headings for mobile ─── */
@media (max-width: 900px) {
  body { font-size: 17px; line-height: 1.55; }
  .body, .body-lg, p { font-size: 16px; line-height: 1.55; }
  .body-lg { font-size: 17px; }
  .body-sm { font-size: 13px; }
  .h-1 { font-size: clamp(28px, 7.5vw, 34px); line-height: 1.08; letter-spacing: -0.01em; }
  .h-2 { font-size: clamp(22px, 5.8vw, 26px); line-height: 1.15; }
  .h-3 { font-size: 20px; line-height: 1.2; }
  .h-4 { font-size: 14px; }
  .h-display {
    font-size: clamp(36px, 11vw, 52px);
    line-height: 1.02;
    letter-spacing: -0.015em;
  }
  .label { font-size: 11px; }
  .idx   { font-size: 13px; }
}

/* ── Buttons: bigger touch targets, app-y rounding ─────────────────── */
@media (max-width: 900px) {
  .btn {
    min-height: 48px;
    padding: 14px 22px;
    border-radius: 14px;
    font-size: 14px;
    letter-spacing: 0.04em;
  }
  .btn:active { transform: scale(0.97); }
  .btn--lg { min-height: 56px; padding: 18px 26px; font-size: 15px; border-radius: 16px; }
}

/* ── Hero: full-bleed, rounded bottom, larger title ────────────────── */
@media (max-width: 900px) {
  .hero { padding: 0; min-height: auto; }
  .hero__pin {
    height: auto;
    min-height: 88svh;     /* small viewport unit — survives Safari bars */
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    overflow: hidden;
  }
  .hero__reel { border-radius: 0 0 24px 24px; }
  .hero__reel-chip {
    top: 16px; left: 16px;
    font-size: 10px;
    padding: 6px 10px;
    border-radius: 999px;
  }
  .hero__reel-label {
    bottom: 16px; left: 16px;
    font-size: 10px;
  }
  .hero__reel-play {
    width: 72px;
    height: 72px;
    border-width: 1.5px;
  }
  .hero__cinema-center { padding: 0 22px; }
  .hero__cinema-title {
    font-size: clamp(36px, 12vw, 56px) !important;
    line-height: 1.02;
    letter-spacing: -0.02em;
  }
  .hero__cinema-sub { font-size: 14px; }
  .hero__cinema-eyebrow { font-size: 11px; }
  .hero__cinema-tag { font-size: 9px; }
  /* Soft scrim at the bottom of every hero so the radius edge looks lifted */
  .hero__pin::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 80px;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.35));
  }
}

/* ── Cards: feature-case + case-card get a soft surface ────────────── */
@media (max-width: 900px) {
  .feature-case {
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    overflow: hidden;
    padding: 0;
    transition: transform .18s ease;
  }
  .feature-case:active { transform: scale(0.985); }
  .feature-case__media {
    border-radius: 20px 20px 0 0;
    aspect-ratio: 4/5;
    min-height: 0;
  }
  .feature-case__body {
    padding: 22px 20px 24px !important;
  }
  .feature-case__title {
    font-size: clamp(26px, 7vw, 32px) !important;
    line-height: 1.1;
    margin: 8px 0 12px;
  }
  .feature-case__desc { font-size: 14px; line-height: 1.5; }
  .feature-case__cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--accent, #FF3B14);
    color: #fff;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-family: var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 6px;
  }

  .case-card {
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    overflow: hidden;
    padding: 0;
    transition: transform .18s ease;
  }
  .case-card:active { transform: scale(0.985); }
  .case-card__media {
    border-radius: 18px 18px 0 0;
    aspect-ratio: 4/3;
  }
  .case-card__sector,
  .case-card__title,
  .case-card__desc {
    padding-left: 16px;
    padding-right: 16px;
  }
  .case-card__sector { padding-top: 14px; font-size: 11px; }
  .case-card__title  { font-size: 18px; line-height: 1.2; margin: 6px 0 6px; }
  .case-card__desc   { font-size: 13px; line-height: 1.5; padding-bottom: 18px; }

  /* Two-up case grid stacks to single column with rhythm */
  .section .grid.grid--2 { grid-template-columns: 1fr; gap: 16px; }
}

/* ── Sector cards: get rounded card surfaces in the bento ──────────── */
@media (max-width: 900px) {
  .sector {
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 18px;
    padding: 20px 18px 22px;
    transition: transform .18s ease, border-color .18s ease;
  }
  .sector:active {
    transform: scale(0.985);
    border-color: rgba(255, 59, 20, 0.4);
  }
  .sector .label {
    display: inline-block;
    background: rgba(255, 59, 20, 0.08);
    color: var(--accent, #FF3B14);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px;
    margin-bottom: 12px;
  }
  .sector .h-2 { font-size: 22px !important; margin-bottom: 8px; }
  .sector .body { font-size: 13px !important; line-height: 1.5 !important; }
  .sector__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    color: var(--accent, #FF3B14);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
}

/* ── Phase cards on /proceso & /caso: card-ify the horizontal scroll ─ */
@media (max-width: 768px) {
  .phase {
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
  }
}

/* ── CTA blocks: rounded-card on dark sections ─────────────────────── */
@media (max-width: 900px) {
  .cta-block {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    padding: 32px 22px 36px;
    text-align: center;
  }
  .cta-block .h-display { font-size: clamp(34px, 10vw, 48px); }
}

/* ── Clients strip: tighter & more app-card-y ──────────────────────── */
@media (max-width: 900px) {
  .clients {
    /* Light backdrop on mobile too — black logos need this to stay visible.
       Mirrors the desktop treatment so partner logos read the same way
       on every viewport. */
    background: var(--bg-raised, #f7f4ee);
    border-radius: 0;
    padding: 18px 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    gap: 6px;
  }
  .client-logo { font-size: 13px; color: var(--fg, #0a0a0a); }
  .client-logo img {
    /* Slightly less aggressive desaturation on mobile so coloured logos
       still feel branded. */
    filter: grayscale(0.6) opacity(0.92);
  }
}

/* ── Floating WhatsApp CTA: lift above the bottom tab bar ──────────── */
@media (max-width: 900px) {
  .wa-cta {
    /* tab bar is 64px + safe-area, plus 16px breathing room */
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
    width: 52px !important;
    height: 52px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}

/* ── Hide top nav burger label/aux on mobile — leave just glyph ────── */
@media (max-width: 900px) {
  .nav__cta-text { display: none; }
}

/* ── Footer adjustments to feel app-like (extra padding above tab bar) ─ */
@media (max-width: 900px) {
  .footer {
    border-radius: 24px 24px 0 0;
    background: #0a0a0a;
    margin-top: 24px;
  }
  .footer .container { padding-top: 36px; padding-bottom: 28px; }
  .footer__brand .logo__wordmark { font-size: 18px; }
  .footer__tagline { font-size: 13px; line-height: 1.5; }
  .footer__col h4 { font-size: 11px; letter-spacing: 0.12em; }
  .footer__col ul a { font-size: 14px; }
}

/* ── Forms (contacto): app-style large fields ──────────────────────── */
@media (max-width: 900px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  select,
  textarea {
    min-height: 52px;
    font-size: 16px;     /* prevents iOS zoom on focus */
    border-radius: 14px;
    padding: 14px 16px;
  }
  textarea { min-height: 120px; padding: 14px 16px; }
  label { font-size: 13px; }
}

/* ── Mobile menu overlay (hamburger) — leaves room for the tab bar ── */
@media (max-width: 900px) {
  .nav-mobile {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Reduced motion: kill the press-scale transforms ───────────────── */
@media (prefers-reduced-motion: reduce) {
  .nav-tab,
  .btn,
  .feature-case,
  .case-card,
  .sector,
  .burger {
    transition: none;
  }
  .nav-tab:active,
  .btn:active,
  .feature-case:active,
  .case-card:active,
  .sector:active,
  .burger:active {
    transform: none;
  }
}


/* =========================================================================
   MOBILE APP-LIKE PASS — v4 (brand-aligned refinements)

   Post-v3 feedback corrections:
   • Brand is angular / structural — kill ALL the rounded corners
   • Top header + tab bar were translucent → bleed light content behind
     them; force solid black for clarity everywhere
   • Sector cards inherited dark-on-dark text from the base rules (which
     only flipped on hover); force light text on mobile so the card
     content is readable
   • /trabajo filter chips were horizontally scrolling, which hid the
     TIPO chips past the right edge; wrap to multiple lines instead
   • Sector bento alignment: column flex + auto-margin pushes the
     "Ver soluciones →" link to the bottom of each card regardless of
     body text length
   ========================================================================= */

/* — Strip all rounded corners on mobile (brand is structural/angular) — */
@media (max-width: 900px) {
  .feature-case,
  .feature-case__media,
  .feature-case__cta,
  .case-card,
  .case-card__media,
  .sector,
  .sector .label,
  .cta-block,
  .clients,
  .footer,
  .phase,
  .hero__pin,
  .hero__reel,
  .btn,
  .burger,
  .nav-tab,
  .nav-mobile,
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  select,
  textarea {
    border-radius: 0 !important;
  }
  .nav-tab.is-active::before { border-radius: 0 !important; }
}

/* — Top header: solid black, light logo/burger so they're always crisp — */
@media (max-width: 900px) {
  .nav {
    background: #0a0a0a !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  /* Force the logo wordmark to render light regardless of the page's
     hero-cinema state — the nav is always dark on mobile now. */
  .nav .logo__wordmark { filter: invert(1) !important; }
  .burger {
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
  }
  .burger span { background: #ffffff !important; }
}

/* — Bottom tab bar: solid black to remove the gray "bleed-through" look ─ */
@media (max-width: 900px) {
  .nav-tabbar {
    background: #0a0a0a !important;
    -webkit-backdrop-filter: none !important;
            backdrop-filter: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  /* Active tab: square highlight, sharp accent stripe at the top */
  .nav-tab.is-active {
    background: rgba(255, 255, 255, 0.04);
  }
  .nav-tab.is-active::before {
    width: 24px;
    height: 2px;
    background: var(--accent, #FF3B14);
  }
}

/* — Sector cards on mobile: legible light text on the dark surface — */
@media (max-width: 900px) {
  .sector {
    color: #ffffff;
    display: flex;
    flex-direction: column;
  }
  .sector .h-2  { color: #ffffff !important; }
  .sector .body { color: rgba(255, 255, 255, 0.74) !important; }
  /* Label chip: ghost outline instead of solid pill, square corners */
  .sector .label {
    display: inline-block;
    background: transparent !important;
    color: var(--accent, #FF3B14) !important;
    border: 1px solid rgba(255, 59, 20, 0.45) !important;
    padding: 4px 10px !important;
    width: max-content;
    margin-bottom: 14px;
  }
  .sector__link {
    color: var(--accent, #FF3B14) !important;
    margin-top: auto;   /* push CTA to the bottom of every card */
    padding-top: 16px;
  }
  /* Make all sector cards in the bento equal height */
  .section .grid:has(> .sector) {
    align-items: stretch;
  }
}

/* — Feature-case "Ver caso →" CTA: square pill back to flat link ────── */
@media (max-width: 900px) {
  .feature-case__cta {
    background: transparent !important;
    color: var(--accent, #FF3B14) !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--accent, #FF3B14);
    border-radius: 0 !important;
    margin-top: 8px;
  }
}

/* — Filter chips on /trabajo: wrap to multiple lines (discoverable!) — */
@media (max-width: 768px) {
  .filter-group {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    scroll-snap-type: none !important;
    column-gap: 8px;
    row-gap: 8px;
    align-items: center;
  }
  .filter-group > * {
    flex-shrink: 0;
    scroll-snap-align: none;
  }
  .filter-chip {
    padding: 8px 14px !important;
    font-size: 11px !important;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
  .filter-group__label {
    margin-right: 4px;
  }
}

/* — Eliminate the soft hero scrim radius artefact now that corners are 0 — */
@media (max-width: 900px) {
  .hero__pin::after { display: none; }
}


/* =========================================================================
   GALLERY CAPTIONS — overlay text on bento images (v6)
   The figcaption sits at the bottom of each .gallery-tile, behind a dark
   scrim, only when the CMS has supplied a caption for that frame.
   ========================================================================= */
.gallery-tile { position: relative; overflow: hidden; }
.gallery-tile__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 18px 18px 16px;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.04em;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
  pointer-events: none;
  z-index: 2;
}
@media (max-width: 768px) {
  .gallery-tile__caption { font-size: 11px; padding: 14px 14px 12px; }
}


/* =========================================================================
   MISSION PARTNERS — logo support (v6)
   When the CMS has uploaded logos (PNG / sanitised SVG), they render as
   <img> inside .client-logo cells. Keep them visually consistent: max
   height, contain fit, slight desaturation so coloured logos read
   monochrome on the page. The legacy text-only client roll still works
   as a fallback when the partners list is empty.
   ========================================================================= */
.client-logo img {
  max-width: 80%;
  max-height: 56%;
  object-fit: contain;
  filter: grayscale(1) opacity(0.78);
  transition: filter 200ms ease, transform 200ms ease;
}
.client-logo:hover img {
  filter: grayscale(0) opacity(1);
  transform: scale(1.04);
}
.client-logo__text {
  /* Used when a partner has a name but no logo uploaded yet */
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
a.client-logo { text-decoration: none; }


/* =========================================================================
   PROJECT HOVER → SLIGHT ZOOM (v6)

   The previous .feature-case / .case-card hover effect was a slow 800 ms
   background-size jump from 100 → 106-108% combined with a dark gradient
   overlay fade-in. Read as "image shrinks + space fills with animation".
   Replace with a tight, clean 350 ms scale-up to 1.03 on the cover image
   (background or video), drop the gradient overlay, keep the title color
   shift. Subtle, premium, app-like.
   ========================================================================= */

/* Override the old slow bg-size transition + the dark gradient overlay */
.case-card .case-card__media::after,
.feature-case__media::after {
  display: none !important;
}

/* Crisp, fast zoom on the image bg + any inline video */
.case-card .case-card__media.photo,
.feature-case__media.photo {
  transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1),
              background-size 0s !important;   /* kill the old bg-size animation */
  background-size: cover !important;           /* ensure baseline */
  transform-origin: center;
  will-change: transform;
}
.case-card .case-card__media video,
.feature-case__media video {
  transition: transform 350ms cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
  will-change: transform;
}

.case-card:hover .case-card__media.photo,
.case-card:hover .case-card__media video,
.feature-case:hover .feature-case__media.photo,
.feature-case:hover .feature-case__media video {
  transform: scale(1.03) !important;
}

/* Cancel the original bg-size hover so it doesn't fight the transform */
.case-card:hover .case-card__media.photo  { background-size: cover !important; }
.feature-case:hover .media.photo          { background-size: cover !important; }

/* Calm down the title nudge — keep color change, drop the slide */
.case-card:hover .case-card__title,
.feature-case:hover .feature-case__title { transform: none; }
.case-card:hover .media__label,
.feature-case:hover .media__label        { transform: none; }


/* =========================================================================
   DESKTOP SECTORES → CTA BUTTONS (v6)

   Promote the mobile button pattern to desktop. The 3 sector boxes
   become a vertical stack of wide CTA rows: index + title + arrow.
   Centered, capped at 920 px so they don't span an entire 1440 px screen.
   Mobile rules (≤ 900 px) above still own that breakpoint.
   ========================================================================= */
@media (min-width: 901px) {
  .section .grid:has(> .sector) {
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
  }

  .sector {
    position: relative;
    display: block;
    padding: 32px 96px 32px 36px;
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    transition: background .22s ease, border-color .22s ease;
  }
  .sector:hover {
    background: #161616 !important;
    border-color: rgba(255, 59, 20, 0.55) !important;
    color: #ffffff !important;
  }

  /* Drop the long description, mirror the mobile button look */
  .sector .body { display: none !important; }

  .sector .label {
    display: block;
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.45) !important;
    padding: 0 !important;
    margin: 0 0 10px !important;
    font-size: 11px !important;
    letter-spacing: 0.18em;
  }

  .sector .h-2 {
    font-size: clamp(28px, 3vw, 36px) !important;
    line-height: 1.05 !important;
    color: #ffffff !important;
    margin: 0 !important;
  }

  /* Replace "Ver soluciones →" with a chevron chip on the right */
  .sector__link {
    position: absolute !important;
    right: 32px;
    top: 50%;
    transform: translateY(-50%) !important;
    font-size: 0 !important;
    color: transparent !important;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-bottom-color: rgba(255, 255, 255, 0.22) !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .22s ease, background .22s ease;
  }
  .sector__link::before {
    content: '→';
    font-size: 22px;
    font-family: var(--font-mono);
    color: var(--accent, #FF3B14);
    line-height: 1;
    transition: transform .22s ease;
  }
  .sector:hover .sector__link {
    border-color: var(--accent, #FF3B14) !important;
    background: rgba(255, 59, 20, 0.08);
  }
  .sector:hover .sector__link::before {
    transform: translateX(3px);
  }
}


/* =========================================================================
   DESKTOP NAV → DARK GLASS (v5)

   The dark mobile header tested well; promote the same glass treatment to
   desktop. Default header now uses translucent dark with backdrop blur on
   every viewport. The hero-cinema-on rules below still flip it fully
   transparent during the homepage's cinematic intro state — that path is
   preserved.
   ========================================================================= */
.nav {
  background: rgba(10, 10, 10, 0.72) !important;
  -webkit-backdrop-filter: saturate(180%) blur(16px) !important;
          backdrop-filter: saturate(180%) blur(16px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.nav .logo__wordmark { filter: invert(1); }
.nav__menu a       { color: rgba(255, 255, 255, 0.78); }
.nav__menu a:hover { color: var(--accent); }
.nav__menu a.active { color: #ffffff; }
.nav__clock { color: rgba(255, 255, 255, 0.55); }
.nav .btn--primary {
  background: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.45);
}
.nav .btn--primary:hover {
  background: #ffffff;
  color: #0a0a0a;
  border-color: #ffffff;
}
.burger { border-color: rgba(255, 255, 255, 0.35); }
.burger span { background: #ffffff; }

/* Keep the hero-cinema "fully transparent" override during the homepage
   cinematic intro — the glass underneath returns once the user scrolls. */
body.hero-cinema-on .nav {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  border-bottom-color: transparent !important;
}


/* =========================================================================
   MOBILE SECTORES → CTA-STYLE BUTTONS (v5)

   The descriptive sector cards were too text-heavy and unaligned on mobile.
   Convert them into clean CTA buttons: index eyebrow + title + arrow,
   stacked in a single column, full-bleed tap target. Body copy lives on
   the destination /corporativo, /inmobiliarias, /marcas-consumo pages.
   ========================================================================= */
@media (max-width: 900px) {
  /* Force single-column stack (override the v1 bento) */
  .section .grid:has(> .sector) {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .section .grid:has(> .sector) > .sector:first-child {
    grid-column: auto !important;
  }

  /* Each sector becomes a button-like row */
  .sector {
    position: relative;
    padding: 22px 56px 22px 20px !important;  /* room for the arrow on the right */
    background: #111;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: block !important;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
  }
  .sector:active {
    transform: scale(0.985);
    background: #161616;
    border-color: rgba(255, 59, 20, 0.55);
  }

  /* Hide the long description on mobile — destination page carries it */
  .sector .body { display: none !important; }

  /* Index eyebrow: small, dim label above the title */
  .sector .label {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.45) !important;
    padding: 0 !important;
    margin: 0 0 6px !important;
    font-size: 10px !important;
    letter-spacing: 0.18em;
  }

  /* Title is the primary affordance */
  .sector .h-2 {
    font-size: 22px !important;
    line-height: 1.1 !important;
    color: #ffffff !important;
    margin: 0 !important;
  }

  /* Original text "Ver soluciones →" gets visually replaced by an
     absolutely-positioned arrow on the right edge of the card. Keep the
     element for accessibility (screen readers still read it) but show
     only a clean chevron glyph. */
  .sector__link {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;             /* hide the "Ver soluciones" text */
    color: transparent !important;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
  }
  .sector__link::before {
    content: '→';
    font-size: 18px;
    color: var(--accent, #FF3B14);
    font-family: var(--font-mono);
    line-height: 1;
  }
  .sector:active .sector__link {
    border-color: var(--accent, #FF3B14);
  }
}