:root {
  --ink: #2f2e2b;
  --ink-soft: #3d3b36;
  --ivory: #f1eee6;
  --paper: #faf9f5;
  --stone: #e6e3db;
  --stone-deep: #b8b4aa;
  --muted: #5e5c55;
  --line: rgba(47,46,43,.14);
  --line-light: rgba(233,229,219,.18);
  --dark: #2b2926;
  --on-dark: #e9e5db;
  /* Palette 1 — scoped to .hero / .site-header only (do not redefine --ink) */
  --accent: #a25a18;
  --surface: #e9e6df;
  --ink-brand: #5b2a08;
  --serif: Iowan Old Style, Baskerville, "Times New Roman", serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --page-gutter: clamp(20px, 4.6vw, 88px);
  --content-max: 1320px;
  --media-max: 1320px;
  --text-max: 760px;
  --reading-max: 46ch;
  --section-space: clamp(72px, 9vw, 136px); /* ~25% tighter than 96/12/180 */
  --grid-gap: clamp(24px, 3vw, 52px);
  --ease: cubic-bezier(.2,.7,.2,1);
  --header-height: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ivory); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--ivory);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* overflow-x must stay visible so sticky .stack-panel works */
  overflow-x: visible;
}
body.menu-open, body.modal-open { overflow: hidden; }
button, input, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
::selection { background: var(--ink); color: var(--ivory); }

.skip-link { position: fixed; left: 16px; top: 16px; z-index: 1000; padding: 10px 14px; background: var(--ivory); transform: translateY(-160%); transition: transform .2s; }
.skip-link:focus { transform: none; }
:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }

/* Inline SVG icons — avoid Unicode glyphs that iOS renders as emoji */
.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 0;
}
.icon svg {
  display: block;
  width: 1em;
  height: 1em;
}
.icon--arrow svg { width: .92em; height: .92em; }
.icon--play svg { width: .78em; height: .78em; }
.icon--chevron svg { width: 18px; height: 18px; }
.icon--close svg { width: 18px; height: 18px; }

.container-wide,
.container-narrow {
  width: min(calc(100% - (2 * var(--page-gutter))), var(--content-max));
  margin-inline: auto;
}
.container-narrow { max-width: 1120px; }
.section { padding-block: var(--section-space); }
.section--dark { background: var(--dark); color: var(--on-dark); }
.section--stone { background: var(--stone); }

/* Floating pill header — Palette 1 */
.site-header {
  --accent: #a25a18;
  --surface: #e9e6df;
  --ink-brand: #5b2a08;
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 100;
  width: min(960px, calc(100% - 32px));
  transform: translateX(-50%);
  color: var(--ink-brand);
  background: transparent;
  border: 0;
  transition: transform .45s var(--ease), opacity .3s var(--ease);
}
.site-header__bar {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 60px;
  padding: 0 10px 0 28px;
  border-radius: 999px;
  background: rgba(241, 238, 230, .72);
  border: 1px solid rgba(91, 42, 8, .12);
  box-shadow: 0 10px 40px rgba(91, 42, 8, .08);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  transition: background .3s var(--ease);
}
.site-header--scrolled .site-header__bar {
  background: rgba(241, 238, 230, .9);
}
.site-header--hidden {
  transform: translate(-50%, calc(-100% - 28px));
}
.site-header .brand {
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: 14.3px; /* +10% from 13px */
  font-weight: 400; /* was 300 */
  letter-spacing: .34em; /* was .32em */
  text-transform: uppercase;
  color: var(--ink-brand);
  opacity: 1;
}
.site-header .brand:hover,
.site-header .brand:focus-visible {
  color: var(--accent);
}
.site-header .brand:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.desktop-nav {
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  gap: clamp(22px, 2.4vw, 40px);
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: .02em;
}
.desktop-nav a {
  color: var(--ink-brand);
  transition: color .25s var(--ease);
}
.desktop-nav a:hover {
  color: var(--accent);
}
.desktop-nav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}
.header-cta {
  flex: 0 0 auto;
  margin-left: auto;
  height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--ink-brand);
  color: var(--surface);
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .03em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.header-cta:hover {
  background: var(--accent);
  color: var(--surface);
}
.header-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.menu-toggle {
  display: none;
  flex: 0 0 auto;
  margin-left: auto;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-brand);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}
.menu-toggle span {
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform .25s var(--ease), width .25s var(--ease);
}
.menu-toggle span:last-child { width: 12px; }
.menu-toggle[aria-expanded="true"] span:first-child {
  transform: translateY(3.75px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:last-child {
  width: 18px;
  transform: translateY(-3.75px) rotate(-45deg);
}
.menu-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.mobile-menu { display: none; }

/* Hero — base tokens; stack surface owns layout/background (see STACK block) */
.hero {
  --accent: #a25a18;
  --surface: #e9e6df;
  --ink-brand: #5b2a08;
  --hero-glow: rgba(162, 90, 24, .26);
  position: relative;
  min-height: 0;
  display: block;
  overflow: visible;
  color: var(--ink-brand);
  /* Stone base + soft noise + asymmetric brown glows */
  background-color: var(--surface);
  background-image:
    radial-gradient(ellipse 720px 520px at 88% 12%, rgba(162, 90, 24, .28) 0%, transparent 72%),
    radial-gradient(ellipse 640px 480px at 8% 88%, rgba(162, 90, 24, .24) 0%, transparent 70%),
    radial-gradient(ellipse 520px 380px at 48% 42%, rgba(162, 90, 24, .14) 0%, transparent 68%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.36 0 0 0 0 0.16 0 0 0 0 0.03 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #ebe8e1 0%, var(--surface) 45%, #e4e0d7 100%);
  background-size: auto, auto, auto, 220px 220px, auto;
}
.hero::before {
  /* tiny soft pore dots */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .45;
  background-image:
    radial-gradient(circle 1.2px at 18% 32%, rgba(91, 42, 8, .12) 0%, transparent 100%),
    radial-gradient(circle 1px at 72% 58%, rgba(91, 42, 8, .10) 0%, transparent 100%),
    radial-gradient(circle 1.4px at 44% 76%, rgba(91, 42, 8, .09) 0%, transparent 100%);
}
.hero-content {
  position: relative;
  z-index: 1;
  width: min(1180px, 90vw);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.display { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -.03em; line-height: 1.2; }
.hero-title {
  max-width: min(1180px, 90vw);
  margin: 0;
  font-size: clamp(36px, 4.9vw, 74px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--ink-brand);
  text-wrap: balance;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-title {
    background-image: linear-gradient(90deg, #5b2a08 0%, rgba(91, 42, 8, .72) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}
.hero-sub {
  margin: 24px 0 0;
  max-width: 58ch;
  font-size: clamp(16px, 1.3vw, 20px);
  line-height: 1.55;
  color: var(--ink-soft);
  text-wrap: pretty;
}
.hero-cta {
  margin-top: 36px;
  border: 0;
  border-radius: 999px;
  background: var(--ink-brand);
  color: var(--surface);
  padding: 18px 32px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.hero-cta:hover {
  background: var(--accent);
  color: var(--surface);
}
.hero-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.hero-cta .icon { transition: transform .3s var(--ease); }
.hero-cta:hover .icon { transform: translate(2px, -2px); }
.hero-discover {
  position: absolute;
  left: 50%;
  bottom: 20px;
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--ink-brand);
  text-decoration: none;
}
.hero-discover__label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--ink-brand);
}
.hero-discover__btn {
  position: relative;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(91, 42, 8, .55);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-brand);
  background: transparent;
}
.hero-discover__btn::before {
  content: "";
  position: absolute;
  inset: -4px; /* 44×44 hit area around 36px circle */
}
.hero-discover__btn svg { width: 16px; height: 16px; position: relative; }
.hero-discover:hover .hero-discover__btn,
.hero-discover:focus-visible .hero-discover__btn {
  border-color: var(--accent);
  color: var(--accent);
}
.hero-discover:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header__bar,
  .header-cta,
  .hero-cta,
  .hero-cta .icon,
  .menu-toggle span {
    transition: none;
  }
}
.line-button { border: 0; border-bottom: 1px solid currentColor; background: transparent; padding: 10px 0 7px; cursor: pointer; display: inline-flex; align-items: center; gap: 34px; font-size: 13px; white-space: nowrap; }
.line-button span { transition: transform .3s var(--ease); }
.line-button:hover span { transform: translate(3px,-3px); }
.line-button--light { color: var(--ivory); }
.line-button--dark { color: var(--ink); }

.section-kicker { margin: 0; color: var(--muted); font-size: 11px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; }
.section-head { margin-bottom: clamp(37px, 5.1vw, 70px); } /* ~15% tighter */
.section-head--split { display: grid; grid-template-columns: minmax(120px, .75fr) minmax(0, 3fr); gap: var(--grid-gap); }
.display--medium { max-width: 22ch; font-size: clamp(28px, 3.2vw, 44px); }
.display--large { max-width: 22ch; font-size: clamp(28px, 3.2vw, 44px); }
.lede { max-width: 46ch; margin: 22px 0 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.light { color: var(--ivory); }
.light-muted { color: rgba(242,240,234,.68); }

/* Authority */
.authority.section { padding-block: clamp(54px, 6vw, 82px); }
.authority-intro { display: block; margin-bottom: 30px; }
.authority-intro h2 { margin: 0; max-width: 520px; color: var(--muted); font-size: 11px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; line-height: 1.4; }
.client-line { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(24px, 2vw, 36px); padding-block: 22px; border-top: 1px solid var(--line); }
.client-mark { min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.client-logo-shell { width: min(100%, 240px); height: clamp(148px, 10.5vw, 178px); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-inline: auto; }
.client-logo { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; object-position: center center; }
.client-mark strong { max-width: 260px; font-size: 14px; line-height: 1.35; font-weight: 500; }

/* VSL — base frame/poster (card chrome scoped under .vsl below) */
.video-frame { position: relative; overflow: hidden; background: #24231f; }
.vsl-media .video-frame { aspect-ratio: 16 / 9 !important; }
.video-poster { position: absolute; inset: 0; overflow: hidden; background: #282722; }
.video-poster__image { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.video-poster--image::after { content: ""; position: absolute; inset: auto 0 0; height: 25%; background: linear-gradient(180deg, transparent, rgba(17,17,15,.52)); }
.media-placeholder { position: relative; overflow: hidden; background: #c8c5bd; color: rgba(17,17,15,.55); }
.media-placeholder > span, .video-label { position: absolute; left: 18px; bottom: 16px; z-index: 2; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.video-label { color: rgba(242,240,234,.82); }
.architectural-lines { position: absolute; inset: 0; opacity: .35; background: linear-gradient(135deg,rgba(242,240,234,.05),transparent 60%), linear-gradient(90deg,transparent 49.8%,rgba(242,240,234,.08) 50%,transparent 50.2%); }
.play-button { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%,-50%); width: 64px; height: 64px; border: 1px solid rgba(242,240,234,.58); border-radius: 50%; background: rgba(17,17,15,.14); color: var(--ivory); display: grid; place-items: center; font-size: 9px; letter-spacing: .11em; text-transform: uppercase; }
.play-button:disabled { cursor: default; opacity: .82; }

/* Results */
.results-intro { margin-bottom: clamp(64px, 7vw, 100px); }
#case-prestige .video-poster__image { object-position: center 18%; }
#case-cerdanya .video-poster__image { object-position: center 20%; }
#case-unique .video-poster__image { object-position: center 17%; }

/* System */
.system-opening { display: block; margin-bottom: clamp(58px,7vw,92px); }
.system-opening .display { grid-column: auto; }
.system-layers { border-top: 1px solid var(--line); }
.system-layer { display: grid; grid-template-columns: 54px minmax(0, .95fr) minmax(340px,1.15fr); gap: var(--grid-gap); align-items: start; padding-block: clamp(52px,6vw,84px); border-bottom: 1px solid var(--line); }
.system-index { font-family: var(--serif); font-size: 28px; }
.system-content h3 { margin: 0 0 22px; font-family: var(--serif); font-weight: 400; font-size: clamp(34px,3.4vw,52px); line-height: 1.02; }
.system-content > p { max-width: 46ch; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.system-visual { min-height: 320px; max-height: 430px; overflow: hidden; background: #c5c1b7; position: relative; }
.system-visual span { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.system-visual--community { display: grid; grid-template-columns: 1.2fr .8fr; grid-template-rows: 1fr auto; gap: 1px; background: var(--ivory); }
.community-primary, .community-secondary { position: relative; display: flex; align-items: flex-end; padding: 18px; background: #bdb9af; }
.community-secondary { background: #d1cec6; }
.system-visual--flow { background: var(--paper); border: 1px solid var(--line); padding: 24px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 16px; }
.flow-stage span { display: block; color: var(--muted); margin-bottom: 8px; }
.flow-stage strong { font-family: var(--serif); font-size: clamp(22px,2vw,30px); font-weight: 400; }
.flow-rule { width: 42px; height: 1px; background: var(--line); }
.system-visual--flow > p { position: absolute; left: 24px; bottom: 18px; margin: 0; color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.system-visual--intelligence { display: grid; grid-template-columns: 1.05fr .95fr; background: var(--paper); border: 1px solid var(--line); }
.intelligence-creative { display: flex; align-items: flex-end; padding: 18px; background: #bbb7ad; }
.intelligence-signals { display: flex; flex-direction: column; }
.intelligence-signals div { flex: 1; display: grid; grid-template-columns: 40px 1fr; align-items: center; border-bottom: 1px solid var(--line); padding: 0 18px; }
.intelligence-signals div:last-child { border-bottom: 0; }
.intelligence-signals span { color: var(--muted); }
.intelligence-signals strong { font-size: 13px; font-weight: 500; }
.system-close { margin-top: clamp(58px,7vw,92px); }
.system-close > p { max-width: 860px; margin: 0; font-family: var(--serif); font-size: clamp(28px,3.1vw,44px); line-height: 1.08; }

/* Team — org chart (Element 4) — primary styles in #equipo block below */


/* Offices — primary styles scoped under #firma (Element 6) */

/* CTA + Footer — base stubs; Element 7 overrides below under .final-cta.section / .footer */
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--grid-gap); align-items: start; }

/* Modal — Palette 1 (Element final pass) */
.analysis-modal {
  --accent: #a25a18;
  --surface: #e9e6df;
  --ink-brand: #5b2a08;
  width: min(1040px, calc(100vw - 32px));
  max-height: calc(100svh - 32px);
  border: 0;
  padding: 0;
  background: var(--ivory);
  color: var(--ink-brand);
}
.analysis-modal::backdrop { background: rgba(20, 12, 6, .72); backdrop-filter: blur(4px); }
.modal-shell { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(44px,6vw,82px); padding: clamp(28px,5vw,68px); }
.modal-close {
  position: absolute;
  right: 20px;
  top: 16px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--ink-brand);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  opacity: .72;
  transition: opacity .2s var(--ease), color .2s var(--ease);
}
.modal-close .icon--close svg { width: 20px; height: 20px; }
.modal-close:hover,
.modal-close:focus-visible {
  opacity: 1;
  color: var(--accent);
}
.modal-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.modal-intro .section-kicker { color: rgba(61, 59, 54, .78); }
.modal-intro h2 {
  margin-top: 34px;
  color: var(--ink-brand);
}
.modal-intro > p:last-child { max-width: 380px; color: var(--ink-soft); }
.analysis-form { display: flex; flex-direction: column; position: relative; }
.analysis-form label {
  display: grid;
  gap: 6px;
  padding: 16px 0 11px;
  border-bottom: 1px solid rgba(91, 42, 8, .3);
  color: var(--ink-soft);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.analysis-form label:focus-within {
  border-bottom-color: var(--accent);
  box-shadow: 0 2px 0 0 var(--accent);
}
.analysis-form input,
.analysis-form textarea {
  border: 0;
  outline: 0;
  background: transparent;
  padding: 4px 0;
  color: var(--ink-brand);
  font-size: 17px;
  text-transform: none;
  letter-spacing: 0;
  resize: vertical;
}
.analysis-form input:focus-visible,
.analysis-form textarea:focus-visible {
  outline: none;
}
.progressive-field { padding: 15px 0; border-bottom: 1px solid rgba(91, 42, 8, .18); }
.progressive-field summary { display: flex; justify-content: space-between; cursor: pointer; list-style: none; font-size: 11px; color: var(--ink-soft); }
.progressive-field summary::-webkit-details-marker { display: none; }
.progressive-field summary span { color: rgba(61, 59, 54, .78); }
.progressive-field label { margin-top: 12px; border: 0; }
.form-footer { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; margin-top: 28px; }
.form-footer p { margin: 0; max-width: 420px; color: rgba(61, 59, 54, .78); font-size: 9px; }
.form-footer a { color: var(--ink-brand); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.submit-button {
  border: 0;
  border-radius: 2px;
  background: var(--ink-brand);
  color: var(--surface);
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  gap: 28px;
  letter-spacing: .06em;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.submit-button:hover,
.submit-button:focus-visible {
  background: var(--accent);
  color: var(--surface);
}
.submit-button:focus-visible {
  outline: 2px solid var(--ink-brand);
  outline-offset: 3px;
}
.form-status { margin-top: 14px; color: var(--ink-soft); font-size: 11px; }
.form-hint {
  margin: 8px 0 0;
  color: rgba(61, 59, 54, .72);
  font-size: 10px;
  letter-spacing: .02em;
  text-transform: none;
}
.analysis-form input[aria-invalid="true"] {
  color: var(--ink-brand);
}
.analysis-form label:has(input[aria-invalid="true"]) {
  border-bottom-color: rgba(162, 90, 24, .85);
}
/* Honeypot: off-screen, not display:none (bots often skip hidden fields) */
.hp-fax {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.analysis-form.is-sending .submit-button { opacity: .72; cursor: wait; }

/* Lead success toast — above nav + modal */
.lead-success {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(26, 13, 4, .35);
  opacity: 0;
  transition: opacity var(--lead-success-fade, .5s) ease-out;
  pointer-events: auto;
  cursor: pointer;
}
.lead-success.is-visible { opacity: 1; }
.lead-success.is-leaving { opacity: 0; transition-duration: var(--lead-success-out, .4s); }
.lead-success__card {
  width: min(360px, 88vw);
  padding: 28px 32px;
  background: #f1eee6;
  border: 1px solid rgba(91, 42, 8, .14);
  border-radius: 20px;
  box-shadow: 0 18px 48px rgba(26, 13, 4, .18);
  text-align: center;
  transform: translateY(8px);
  transition: transform var(--lead-success-fade, .5s) ease-out;
  cursor: pointer;
}
.lead-success.is-visible .lead-success__card { transform: none; }
.lead-success__check {
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #5b2a08;
  display: grid;
  place-items: center;
}
.lead-success__check svg {
  width: 26px;
  height: 26px;
  stroke: #f1eee6;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lead-success__check .check-path {
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: lead-check-draw .45s ease-out forwards;
  animation-delay: .12s;
}
@keyframes lead-check-draw {
  to { stroke-dashoffset: 0; }
}
.lead-success__title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: #5b2a08;
}
.lead-success__sub {
  margin: 10px 0 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
  color: rgba(61, 59, 54, .78);
}
@media (prefers-reduced-motion: reduce) {
  .lead-success,
  .lead-success__card {
    transition: opacity .2s ease;
    transform: none !important;
  }
  .lead-success__check .check-path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1180px) {
  :root { --page-gutter: clamp(32px, 5vw, 54px); --header-height: 72px; }
}

/* Pill header collapses to logo + burger under 900px */
@media (max-width: 899px) {
  .site-header {
    top: 12px;
    width: min(960px, calc(100% - 24px));
  }
  .site-header__bar {
    padding: 0 8px 0 22px;
  }
  .desktop-nav,
  .site-header__bar > .header-cta { display: none; }
  .menu-toggle { display: flex; }
  .mobile-menu {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 20px 22px 22px;
    border-radius: 24px;
    background: rgba(241, 238, 230, .86);
    border: 1px solid rgba(91, 42, 8, .12);
    box-shadow: 0 16px 48px rgba(91, 42, 8, .1);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    backdrop-filter: blur(16px) saturate(1.1);
    color: var(--ink-brand);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .24s var(--ease), transform .24s var(--ease), visibility 0s linear .24s;
  }
  .mobile-menu[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity .24s var(--ease), transform .24s var(--ease), visibility 0s linear 0s;
  }
  .mobile-menu nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .mobile-menu nav a {
    display: block;
    padding: 12px 4px;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.3;
    color: var(--ink-brand);
  }
  .mobile-menu nav a:hover,
  .mobile-menu nav a:focus-visible {
    color: var(--accent);
  }
  .mobile-menu nav a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
  }
  .header-cta--menu {
    width: 100%;
    margin: 8px 0 0;
    height: auto;
    min-height: 46px;
    padding: 14px 22px;
  }
  body.menu-open .site-header {
    z-index: 2000;
    transform: translateX(-50%) !important;
  }
  @media (prefers-reduced-motion: reduce) {
    .mobile-menu,
    .mobile-menu[aria-hidden="false"] {
      transition: none;
      transform: none;
    }
  }
}

@media (max-width: 768px) {
  :root { --page-gutter: clamp(20px,5.4vw,24px); --grid-gap: 24px; --header-height: 66px; }
  body { font-size: 16px; }
  .hero {
    --hero-glow: rgba(162, 90, 24, .20);
    /* ~30% smaller glows, ~20% lower opacity */
    background-image:
      radial-gradient(ellipse 500px 360px at 88% 12%, rgba(162, 90, 24, .22) 0%, transparent 72%),
      radial-gradient(ellipse 450px 340px at 8% 88%, rgba(162, 90, 24, .19) 0%, transparent 70%),
      radial-gradient(ellipse 360px 270px at 48% 42%, rgba(162, 90, 24, .11) 0%, transparent 68%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.36 0 0 0 0 0.16 0 0 0 0 0.03 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
      linear-gradient(180deg, #ebe8e1 0%, var(--surface) 45%, #e4e0d7 100%);
  }
  .hero-content {
    width: min(1180px, 90vw);
    top: 58%;
  }
  .hero-discover {
    bottom: 16px;
  }
  /* H1 uses base clamp(36px, 4.9vw, 74px) — no mobile size override */
  .hero-sub {
    font-size: 16px;
    margin-top: 24px;
  }
  .hero-cta {
    width: min(100%, 320px);
    justify-content: center;
    padding: 16px 24px;
    white-space: normal;
    text-align: center;
  }

  .section-head--split { grid-template-columns: 1fr; }
  .display--medium, .display--large { max-width: 22ch; font-size: clamp(28px, 3.2vw, 44px); }
  .lede { font-size: 16px; line-height: 1.7; }

  .vsl-media .video-frame { aspect-ratio: 16 / 9 !important; }
  .play-button { width: 54px; height: 54px; }


  .footer-grid { grid-template-columns: 1fr 1fr; row-gap: 34px; }

  .modal-shell { grid-template-columns: 1fr; gap: 30px; padding-top: 56px; }
  .analysis-modal { width: calc(100vw - 12px); max-height: calc(100svh - 12px); }
  .form-footer { grid-template-columns: 1fr; }
  .submit-button { width: 100%; justify-content: space-between; }
}

@media (max-width: 430px) {
  .footer-grid { grid-template-columns: 1fr; }
  .analysis-form input, .analysis-form textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .reveal { opacity: 1; transform: none; }
}


/* Results / testimonials — horizontal card grid (Element 3) */
.results.section {
  --ink-brand: #5b2a08;
  --accent: #a25a18;
  --surface: #e9e6df;
  background: var(--surface); /* stone-white after brown VSL */
  color: var(--ink-brand);
  padding-block: clamp(45px, 6.3vw, 90px); /* ~30% tighter (VSL↔Equipo junctions) */
}
.results.section.results--peek {
  position: relative;
  z-index: 2;
  margin-top: -32px;
  border-radius: 28px 28px 0 0;
  overflow: clip;
  box-shadow: 0 -12px 40px rgba(40, 18, 4, .12);
}
@media (max-width: 768px) {
  .results.section.results--peek {
    border-radius: 20px 20px 0 0;
  }
}
.results .results-intro { margin-bottom: clamp(34px, 4.25vw, 61px); } /* ~15% */
.results .results-intro .display,
.results .results-intro .display--medium { color: var(--ink-brand); }
.results .testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 40px);
  align-items: stretch; /* equal card heights; row grows when a quote expands */
  width: min(100%, 1280px);
  margin-inline: auto;
}
.results .testimonial-case {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%; /* stretch with row; height:auto so expand can grow it */
  height: auto;
  background: #fbfbfb;
  border: 1px solid rgba(91, 42, 8, .12);
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(91, 42, 8, .06);
  /* overflow visible so expanding "Leer más" never clips siblings via stretch */
  overflow: visible;
}
.results .testimonial-case__portrait {
  width: 100%;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px 4px 0 0;
  background: var(--surface);
  flex: 0 0 auto;
}
.results .testimonial-case__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.results .testimonial-case__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  padding: clamp(20px, 2vw, 32px);
  min-width: 0;
}
.results .testimonial-case__name {
  margin: 0;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink-brand);
}
.results .testimonial-case__role {
  margin: 8px 0 0;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.results .testimonial-case__meta-line {
  margin: 10px 0 0;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: .78;
}
.results .testimonial-case__video {
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--ink-brand);
  border-radius: 0;
  background: transparent;
  color: var(--ink-brand);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.results .testimonial-case__video:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--ink-brand);
  color: var(--surface);
}
.results .testimonial-case__video:disabled,
.results .testimonial-case__video[aria-disabled="true"],
.results .testimonial-case__video.is-placeholder {
  opacity: .55;
  cursor: default;
}
.results .testimonial-case__video:focus-visible,
.results .testimonial-case__toggle:focus-visible {
  outline: 1px solid var(--ink-brand);
  outline-offset: 3px;
}
.results .testimonial-case__quote-wrap {
  margin-top: 18px;
  width: 100%;
}
.results .testimonial-case__quote {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink-soft);
}
.results .testimonial-case__quote p { margin: 0; }
.results .testimonial-case__quote p + p { margin-top: 14px; }
.js-testimonial-folding .results .testimonial-case__quote-wrap.is-collapsible:not(.is-expanded) .testimonial-case__quote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}
.js-testimonial-folding .results .testimonial-case__quote-wrap.is-collapsible {
  transition: none;
}
.js-testimonial-folding .results .testimonial-case__quote-wrap.is-collapsible.is-expanded .testimonial-case__quote {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
/* Desktop linked expand (≥901): row data-expanded expands every card.
   Scoped so a stale data-expanded never unclamps mobile cards. */
@media (min-width: 901px) {
  .js-testimonial-folding .results .testimonial-grid[data-expanded="true"] .testimonial-case__quote-wrap.is-collapsible .testimonial-case__quote {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
}
@media (prefers-reduced-motion: reduce) {
  .js-testimonial-folding .results .testimonial-case__quote-wrap.is-collapsible {
    transition: none !important;
  }
}
.results .testimonial-case__toggle {
  display: none;
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-brand);
  font: 400 13px/1.3 var(--sans);
  letter-spacing: .02em;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.results .testimonial-case__toggle:hover { color: var(--accent); }
.js-testimonial-folding .results .testimonial-case__toggle:not([hidden]) {
  display: inline-flex;
  align-items: center;
  /* margin-top:auto only on desktop ≥901 — see equal-height block */
  margin-top: 14px;
}

/* Tablet/desktop mid: 2-col only above mobile (901–1024) */
@media (min-width: 901px) and (max-width: 1024px) {
  .results .testimonial-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .results .testimonial-case:last-child {
    grid-column: 1 / -1;
    max-width: calc((100% - clamp(20px, 2.4vw, 40px)) / 2);
    justify-self: center;
  }
}
/* Mobile ≤900: stacked, natural height, no equal-stretch */
@media (max-width: 900px) {
  .results .results-intro { margin-bottom: 30px; }
  .results .testimonial-grid {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .results .testimonial-case {
    min-height: 0;
    height: auto;
  }
  .results .testimonial-case:last-child {
    grid-column: auto;
    max-width: none;
    justify-self: stretch;
  }
  .results .testimonial-case__body {
    flex: 0 1 auto;
  }
  /* Collapsed: restore 6-line clamp + ellipsis (same as base) */
  .js-testimonial-folding .results .testimonial-case__quote-wrap.is-collapsible:not(.is-expanded) .testimonial-case__quote {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
  }
  /* Expanded (per-card): full text */
  .js-testimonial-folding .results .testimonial-case__quote-wrap.is-collapsible.is-expanded .testimonial-case__quote {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  /* Do not pin Leer más to the card bottom (that created empty stretch) */
  .results .testimonial-case__toggle:not([hidden]),
  .js-testimonial-folding .results .testimonial-case__toggle:not([hidden]) {
    margin-top: 14px;
  }
}

/* Testimonial video lightbox — landscape default; .is-portrait = centred popup (all viewports) */
.testimonial-video-dialog {
  position: fixed;
  width: min(1100px, 94vw);
  max-height: 90vh;
  padding: 0;
  border: 0;
  background: #111;
  color: #fff;
  overflow: visible;
}
.testimonial-video-dialog__shell {
  display: contents;
}
.testimonial-video-dialog.is-landscape {
  width: min(1100px, 94vw);
  max-height: 90vh;
  background: #111;
}
.testimonial-video-dialog.is-portrait {
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  margin: auto;
  background: transparent;
  box-shadow: none;
}
.testimonial-video-dialog::backdrop {
  background: rgba(26, 13, 4, .6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.testimonial-video-dialog__close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 4;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(26, 13, 4, .55);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.testimonial-video-dialog__close:focus-visible {
  outline: 2px solid var(--accent, #a25a18);
  outline-offset: 3px;
}
.testimonial-video-dialog__close .icon--close svg { width: 20px; height: 20px; }
.testimonial-video-dialog__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 90vh;
  background: #000;
}
.testimonial-video-dialog__frame video,
.testimonial-video-dialog__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  background: #000;
}
/* Hide "Ver vídeo" until a real source exists (mobile + default) */
.results .testimonial-case__video.is-placeholder,
.results .testimonial-case__video[hidden] {
  display: none !important;
}

/* Portrait popup — same centred card on mobile + desktop (no fullscreen takeover) */
.testimonial-video-dialog.is-portrait[open] {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh; /* fallback */
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
}
.testimonial-video-dialog.is-portrait .testimonial-video-dialog__shell {
  --tv-ring: 6px;
  --tv-radius: 20px;
  display: block;
  position: relative;
  width: min(88vw, 380px);
  max-height: 82svh;
  max-height: 82vh;
}
.testimonial-video-dialog.is-portrait .testimonial-video-dialog__frame {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  max-width: min(88vw, 380px);
  max-height: 82svh;
  max-height: 82vh;
  aspect-ratio: 9 / 16;
  border-radius: var(--tv-radius);
  overflow: hidden;
  background: var(--ivory, #f1eee6);
  box-shadow: 0 24px 64px rgba(20, 10, 4, .42);
}
/* Ivory ring like the VSL frame — no black corners */
.testimonial-video-dialog.is-portrait .testimonial-video-dialog__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--tv-ring) solid var(--ivory, #f1eee6);
  border-radius: var(--tv-radius);
  pointer-events: none;
  z-index: 3;
  box-sizing: border-box;
}
.testimonial-video-dialog.is-portrait .testimonial-video-dialog__frame video,
.testimonial-video-dialog.is-portrait .testimonial-video-dialog__frame iframe {
  object-fit: cover;
  background: #1a0d04;
}
.testimonial-video-dialog.is-portrait .testimonial-video-dialog__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
}

@media (min-width: 769px) {
  .testimonial-video-dialog.is-portrait .testimonial-video-dialog__shell {
    width: auto;
    height: min(82svh, 900px);
    height: min(82vh, 900px);
    max-width: min(88vw, 380px);
  }
  .testimonial-video-dialog.is-portrait .testimonial-video-dialog__frame {
    height: 100%;
    width: auto;
    max-width: min(88vw, 380px);
  }

}

/* Desktop ≥901: equal-height cards + pin Leer más + hidden video slot alignment */
@media (min-width: 901px) {
  .results .testimonial-case {
    min-height: 100%;
    height: auto;
  }
  .results .testimonial-case__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .results .testimonial-case__video.is-placeholder,
  .results .testimonial-case__video[hidden] {
    /* Keep layout slot so quotes align across the row; still non-interactive */
    display: inline-flex !important;
    visibility: hidden;
    pointer-events: none;
  }
  .results .testimonial-case__quote-wrap {
    width: 100%;
  }
  .results .testimonial-case__toggle:not([hidden]),
  .js-testimonial-folding .results .testimonial-case__toggle:not([hidden]) {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .testimonial-video-dialog.is-portrait .testimonial-video-dialog__shell {
    width: auto;
    max-width: min(48vw, 280px);
    height: min(82svh, 100%);
    max-height: 82svh;
  }
  .testimonial-video-dialog.is-portrait .testimonial-video-dialog__frame {
    width: auto;
    height: min(82svh, 100%);
    max-width: min(48vw, 280px);
    max-height: 82svh;
  }
}


/* Office image framing refinements */
#firma .office-photo--barcelona { object-position: 50% 50%; }
#firma .office-photo--madrid-1 { object-position: 50% 50%; }
#firma .office-photo--madrid-2 { object-position: 50% 48%; }
#firma .office-photo--madrid-3 { object-position: 50% 50%; }
@media (max-width: 760px) {
  #firma .office-photo--barcelona { object-position: 52% 50%; }
  #firma .office-photo--madrid-1 { object-position: 52% 50%; }
  #firma .office-photo--madrid-2 { object-position: 50% 44%; }
  #firma .office-photo--madrid-3 { object-position: 52% 50%; }
}


/* (Element 3) Old editorial folding CSS removed — replaced by card grid + line-clamp above. */


/* (Element 4) Old rectangular team-grid / profile-overlay CSS removed — org chart below. */

/* Authority credentials strip — compact editorial treatment */
#autoridad.authority.section {
  padding-block: clamp(40px, 4vw, 58px);
}
#autoridad .authority-intro {
  display: block;
  margin-bottom: clamp(22px, 2.2vw, 30px);
}
#autoridad .authority-intro h2 {
  margin: 0;
  max-width: 520px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.4;
}
#autoridad .client-line {
  width: min(100%, 1040px);
  margin-inline: auto;
  padding: 0;
  border: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(38px, 5vw, 76px);
  align-items: end;
}
#autoridad .client-mark {
  min-width: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  gap: 8px;
}
#autoridad .client-logo-shell {
  width: min(100%, 216px);
  height: clamp(112px, 8.2vw, 132px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
#autoridad .client-logo {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  transform-origin: center;
}
/* Optical, not merely numerical, balancing of the three supplied logo files. */
#autoridad .client-mark--prestige .client-logo { transform: scale(.98); }
#autoridad .client-mark--glollar .client-logo { transform: scale(.95); }
#autoridad .client-mark--unique .client-logo { transform: scale(.98); }
#autoridad .client-location {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 400;
}
@media (max-width: 700px) {
  /* Kept as a compact 3-across row on phone — see phone polish block */
  #autoridad .client-location { font-size: 11px; }
}


/* System — editorial visual refinement */
#sistema .system-content > p strong {
  color: var(--ink);
  font-weight: 500;
}

#sistema .system-visual--quiet {
  min-height: 300px;
  max-height: 390px;
  border: 1px solid var(--line);
  background: var(--paper);
}

#sistema .community-editorial,
#sistema .opportunity-editorial,
#sistema .intelligence-editorial {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
}

/* 01 — editorial content / recognition / distribution */
#sistema .system-visual--community {
  display: block;
  background: #c9c5bb;
}

#sistema .community-editorial {
  background:
    linear-gradient(115deg, rgba(17,17,15,.08), transparent 46%),
    linear-gradient(180deg, #cbc7bd 0%, #bcb8ae 100%);
}

#sistema .community-editorial__hero {
  position: absolute;
  inset: 11% 29% 16% 10%;
  background:
    linear-gradient(145deg, rgba(255,255,255,.18), transparent 48%),
    #a9a59b;
}

#sistema .community-editorial__hero::before,
#sistema .community-editorial__hero::after {
  content: '';
  position: absolute;
  background: rgba(242,240,234,.65);
}

#sistema .community-editorial__hero::before {
  left: 8%; right: 8%; bottom: 9%; height: 1px;
}

#sistema .community-editorial__hero::after {
  width: 28%; height: 1px; left: 8%; bottom: 15%;
}

#sistema .community-editorial__stack {
  position: absolute;
  right: 8%; top: 16%; bottom: 26%; width: 24%;
  display: grid;
  gap: 8px;
}

#sistema .community-editorial__stack span {
  display: block;
  background: rgba(242,240,234,.58);
  border: 1px solid rgba(17,17,15,.10);
}

#sistema .community-editorial__audience {
  position: absolute;
  right: 8%; bottom: 10%; width: 25%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px 8px;
}

#sistema .community-editorial__audience span {
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(17,17,15,.38);
}

#sistema .community-editorial__audience span:nth-child(2),
#sistema .community-editorial__audience span:nth-child(5),
#sistema .community-editorial__audience span:nth-child(8) {
  background: rgba(17,17,15,.72);
}

/* 02 — interest concentrates into qualified opportunity, without a funnel */
#sistema .system-visual--flow {
  display: block;
  padding: 0;
  background: var(--paper);
}

#sistema .opportunity-editorial {
  background: linear-gradient(180deg, rgba(17,17,15,.018), transparent 62%);
}

#sistema .opportunity-editorial__property {
  position: absolute;
  left: 8%; top: 14%; bottom: 14%; width: 42%;
  background:
    linear-gradient(145deg, rgba(255,255,255,.20), transparent 45%),
    #b9b5ab;
}

#sistema .opportunity-editorial__property::after {
  content: '';
  position: absolute;
  inset: auto 8% 9% 8%;
  height: 1px;
  background: rgba(242,240,234,.68);
}

#sistema .opportunity-editorial__interest {
  position: absolute;
  left: 57%; top: 22%; right: 8%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px 13px;
}

#sistema .opportunity-editorial__interest span {
  aspect-ratio: 1;
  border: 1px solid rgba(17,17,15,.24);
  border-radius: 50%;
}

#sistema .opportunity-editorial__interest span:nth-child(3n+1) {
  background: rgba(17,17,15,.08);
}

#sistema .opportunity-editorial__qualified {
  position: absolute;
  right: 8%; bottom: 18%; width: 34%;
  display: grid;
  gap: 8px;
}

#sistema .opportunity-editorial__qualified span {
  height: 18px;
  background: rgba(17,17,15,.82);
}

#sistema .opportunity-editorial__qualified span:nth-child(2) { width: 78%; }
#sistema .opportunity-editorial__qualified span:nth-child(3) { width: 58%; }

/* 03 — creative + restrained analytical signals */
#sistema .system-visual--intelligence {
  display: block;
  background: #171715;
  border-color: rgba(17,17,15,.18);
}

#sistema .intelligence-editorial {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
}

#sistema .intelligence-editorial__creative {
  position: relative;
  margin: 8%;
  background:
    linear-gradient(160deg, rgba(242,240,234,.16), transparent 52%),
    #77756f;
}

#sistema .intelligence-editorial__creative::before,
#sistema .intelligence-editorial__creative::after {
  content: '';
  position: absolute;
  left: 9%; right: 9%;
  height: 1px;
  background: rgba(242,240,234,.62);
}

#sistema .intelligence-editorial__creative::before { bottom: 13%; }
#sistema .intelligence-editorial__creative::after { bottom: 19%; right: 42%; }

#sistema .intelligence-editorial__analysis {
  position: relative;
  margin: 10% 9% 10% 4%;
  border-left: 1px solid rgba(242,240,234,.16);
}

#sistema .intelligence-editorial__trace {
  position: absolute;
  inset: 10% 8% 37% 12%;
}

#sistema .intelligence-editorial__trace::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(165deg,
      transparent 0 19%,
      rgba(242,240,234,.18) 20% 20.7%,
      transparent 21% 38%,
      rgba(242,240,234,.28) 39% 39.7%,
      transparent 40% 61%,
      rgba(242,240,234,.56) 62% 62.8%,
      transparent 63% 100%);
}

#sistema .intelligence-editorial__trace span {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(242,240,234,.76);
}

#sistema .intelligence-editorial__trace span:nth-child(1) { left: 6%; bottom: 15%; }
#sistema .intelligence-editorial__trace span:nth-child(2) { left: 28%; bottom: 28%; }
#sistema .intelligence-editorial__trace span:nth-child(3) { left: 49%; bottom: 20%; }
#sistema .intelligence-editorial__trace span:nth-child(4) { left: 70%; bottom: 48%; }
#sistema .intelligence-editorial__trace span:nth-child(5) { right: 5%; top: 8%; }

#sistema .intelligence-editorial__signals {
  position: absolute;
  left: 12%; right: 8%; bottom: 10%;
  display: grid;
  gap: 11px;
}

#sistema .intelligence-editorial__signals span {
  display: block;
  height: 1px;
  background: rgba(242,240,234,.30);
}

#sistema .intelligence-editorial__signals span:nth-child(1) { width: 100%; }
#sistema .intelligence-editorial__signals span:nth-child(2) { width: 76%; }
#sistema .intelligence-editorial__signals span:nth-child(3) { width: 54%; }

@media (max-width: 1024px) {
  #sistema .system-visual--quiet { min-height: 280px; max-height: 350px; }
}

@media (max-width: 600px) {
  #sistema .system-content > p { line-height: 1.58; }
  #sistema .system-visual--quiet { min-height: 235px; max-height: 285px; }
  #sistema .community-editorial__hero { inset: 10% 31% 15% 7%; }
  #sistema .community-editorial__stack { right: 7%; width: 25%; }
  #sistema .community-editorial__audience { right: 7%; width: 27%; }
  #sistema .opportunity-editorial__property { left: 7%; width: 43%; }
  #sistema .opportunity-editorial__interest { left: 57%; right: 7%; gap: 8px 9px; }
  #sistema .opportunity-editorial__qualified { right: 7%; width: 34%; }
}


/* Real image assets for system section */
#sistema .system-visual--image { display:block !important; padding:0 !important; overflow:hidden; background:#cfcac1; }
#sistema .system-visual--image .system-visual__image { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }




/* Closing pass — implementation polish only */
#resultados, #equipo, #firma, #sistema { scroll-margin-top: 92px; }
@media (max-width: 1180px) { #resultados, #equipo, #firma, #sistema { scroll-margin-top: 82px; } }
@media (max-width: 768px) { #resultados, #equipo, #firma, #sistema { scroll-margin-top: 74px; } }

/* Technical resilience */
img { height: auto; }
.office-photo, .team-media img, .testimonial-case__portrait img, .system-visual__image, .video-poster__image { height: 100%; }
.section, .hero, .footer { max-width: 100%; }
.display, .lede, .team-body, .system-content > p, .testimonial-case__quote { overflow-wrap: break-word; }

/* FINAL CLOSURE — surgical responsive fixes only */
/* Authority: one compact editorial credentials block; supplied logos remain untouched. */
#autoridad.authority.section {
  padding-block: clamp(38px, 3.8vw, 54px);
}
#autoridad .authority-intro {
  width: min(100%, 1040px);
  margin: 0 auto clamp(10px, 1.15vw, 15px);
}
#autoridad .authority-intro h2 {
  max-width: none;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
}
#autoridad .client-mark { gap: 0; }
#autoridad .client-location { display: none !important; }
#autoridad .client-logo-shell,
#autoridad .client-logo { display: none !important; }
#autoridad .client-name {
  margin: 0;
  display: grid;
  gap: 6px;
  justify-items: center;
  text-align: center;
}
#autoridad .client-name__house {
  color: var(--muted);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.35;
}
#autoridad .client-name strong {
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.15;
}

/* Mobile menu open: lock page scroll (pill card stays in-flow under header) */
@media (max-width: 899px) {
  body.menu-open {
    overflow: hidden;
    overscroll-behavior: none;
  }
}

/* System: mobile shows the designed images at their real aspect ratio, without crop. */
@media (max-width: 768px) {
  #sistema .system-visual--image,
  #sistema .system-visual--quiet {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    overflow: visible;
  }
  #sistema .system-visual--image .system-visual__image {
    width: 100%;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
  }
}



/* ============================================================
   Step 5a — logo strip, VSL, Resultados, Sistema (scoped)
   ============================================================ */

/* 1) Logo strip */
#autoridad.authority.section {
  background: var(--ivory);
  padding-block: clamp(56px, 6vw, 88px);
}
#autoridad .authority-intro h2,
#autoridad .authority-intro {
  color: var(--muted);
}
#autoridad .authority-intro {
  width: 100%;
  max-width: none;
  margin: 0 0 clamp(22px, 2.2vw, 30px);
}
#autoridad .client-line {
  width: 100%;
  margin-inline: 0;
  padding-block: clamp(24px, 2.8vw, 36px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
#autoridad .client-name {
  transition: opacity .35s var(--ease);
  opacity: .78;
}
#autoridad .client-mark:hover .client-name,
#autoridad .client-mark:focus-within .client-name {
  opacity: 1;
}

/* 2) VSL — brown stone section; peeking card under hero; glass panel desktop */
.vsl.section,
.vsl.section--stone {
  --accent: #a25a18;
  --surface: #e9e6df;
  --ink-brand: #5b2a08;
  --ivory: #f1eee6;
  position: relative;
  z-index: 1;
  color: var(--surface);
  padding-block: clamp(52px, 7vw, 100px) clamp(72px, 9vw, 128px);
  border-radius: 28px 28px 0 0;
  overflow: clip;
  isolation: isolate;
  background-color: #3d2412;
  background-size: auto, auto, cover;
  background-position: center, center, center;
  background-repeat: no-repeat;
}
/* Desktop textures only — never downloaded on ≤900px */
@media (min-width: 901px) {
  .vsl.section,
  .vsl.section--stone {
    background-image:
      linear-gradient(180deg, rgba(91, 42, 8, 0) 0%, rgba(40, 18, 4, .42) 100%),
      radial-gradient(ellipse 80% 70% at 50% 40%, rgba(91, 42, 8, 0) 0%, rgba(40, 18, 4, .34) 100%),
      url("../assets/images/bg-brown-horizontal-hq.webp");
  }
}
@media (max-width: 900px) {
  .vsl.section,
  .vsl.section--stone {
    border-radius: 20px 20px 0 0;
    background-image:
      linear-gradient(180deg, rgba(91, 42, 8, 0) 0%, rgba(40, 18, 4, .42) 100%),
      radial-gradient(ellipse 80% 70% at 50% 40%, rgba(91, 42, 8, 0) 0%, rgba(40, 18, 4, .34) 100%),
      url("../assets/images/bg-brown-vertical-hq.webp");
  }
}
.vsl-layout {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 48px);
  align-items: stretch;
}
.vsl .vsl-panel {
  order: -1; /* mobile: copy above video */
}
.vsl .section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: none;
  margin: 0;
  margin-bottom: 0;
  text-align: center;
}
.vsl .section-head--split {
  display: flex;
  flex-direction: column;
  align-items: center;
  grid-template-columns: none;
}
.vsl .section-head > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}
.vsl .display,
.vsl .display--medium {
  margin: 0;
  max-width: 22em;
  color: var(--ivory);
  font-size: clamp(30px, 3.4vw, 52px);
  font-weight: 400;
  line-height: 1.12;
  text-wrap: balance;
  text-align: center;
}
.vsl .lede,
.vsl .light-muted {
  margin: 20px 0 0;
  max-width: 60ch;
  color: rgba(241, 238, 230, .82);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  text-align: center;
}
.vsl .vsl-media {
  width: 100%;
  max-width: min(960px, 100%);
  margin-inline: auto;
  margin-top: 0;
  order: 0;
}
.vsl .video-frame {
  --vf-border: 6px;
  --vf-radius: 14px;
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
  isolation: isolate;
  border-radius: var(--vf-radius);
  overflow: hidden;
  background: var(--surface, #e9e6df);
  border: 0;
  box-shadow: 0 24px 60px rgba(20, 10, 4, .35);
}
.vsl .video-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--vf-border) solid var(--surface, #e9e6df);
  border-radius: var(--vf-radius);
  pointer-events: none;
  z-index: 3;
  box-sizing: border-box;
}
@media (min-width: 1024px) {
  .vsl-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
    gap: clamp(28px, 3.5vw, 48px);
    align-items: center;
  }
  .vsl .vsl-media,
  .vsl .vsl-panel {
    order: 0;
    margin: 0;
    max-width: none;
    width: 100%;
  }
  .vsl .video-frame {
    border-width: 9px;
    border-radius: 14px;
  }
  .vsl .vsl-panel {
    background: rgba(241, 238, 230, .08);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(241, 238, 230, .22);
    border-radius: 28px;
    padding: 40px;
    box-shadow:
      inset 0 1px 0 rgba(241, 238, 230, .18),
      inset 0 -20px 40px rgba(20, 10, 4, .12);
  }
  .vsl .section-head,
  .vsl .section-head--split,
  .vsl .section-head > div {
    align-items: flex-start;
    text-align: left;
  }
  .vsl .display,
  .vsl .display--medium,
  .vsl .lede,
  .vsl .light-muted {
    text-align: left;
  }
  .vsl .display,
  .vsl .display--medium {
    max-width: 18em;
  }
}
.vsl .video-poster__image {
  object-fit: cover;
}
.vsl .vsl-shell {
  position: relative;
  width: 100%;
}
.vsl .vsl-shell.is-cinema-active {
  min-height: var(--vsl-placeholder-h, auto);
}
.vsl .vsl-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: inherit;
  background: var(--surface, #e9e6df);
  z-index: 2;
}
.vsl .vsl-player--embed {
  object-fit: unset;
}
.vsl .video-frame.is-cinema .vsl-player,
.vsl .video-frame.is-fullscreen .vsl-player {
  object-fit: contain;
}
.vsl .play-button {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  z-index: 5;
  transition: transform .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease);
}
.vsl .play-button:disabled,
.vsl .play-button[aria-disabled="true"],
.vsl .play-button.is-placeholder {
  opacity: .72;
  cursor: default;
}
.vsl .play-button[hidden],
.vsl .video-poster[hidden],
.vsl .vsl-player[hidden],
.vsl .vsl-chrome[hidden] { display: none !important; }
.vsl .video-frame:hover .play-button:not([hidden]):not(:disabled):not([aria-disabled="true"]),
.vsl .video-frame:focus-within .play-button:not([hidden]):not(:disabled):not([aria-disabled="true"]) {
  transform: translate(-50%, -50%) scale(1.04);
  background: rgba(162, 90, 24, .28);
  border-color: #fff;
}
.vsl .play-button:focus-visible,
.vsl .vsl-ctrl:focus-visible,
.vsl .vsl-cinema-close:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 3px;
}

/* Custom chrome */
.vsl .vsl-chrome {
  position: absolute;
  inset: auto 0 0;
  z-index: 6;
  padding: 0 10px 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease);
}
.vsl .video-frame.is-controls-visible .vsl-chrome,
.vsl .video-frame.is-paused .vsl-chrome,
.vsl .video-frame:hover .vsl-chrome,
.vsl .video-frame:focus-within .vsl-chrome {
  opacity: 1;
  pointer-events: auto;
}
.vsl .vsl-chrome__gradient {
  position: absolute;
  inset: auto 0 0;
  height: 96px;
  background: linear-gradient(to top, rgba(0, 0, 0, .45), transparent);
  pointer-events: none;
}
.vsl .vsl-chrome__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}
.vsl .vsl-ctrl {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f1eee6;
  cursor: pointer;
}
.vsl .vsl-ctrl svg {
  width: 18px;
  height: 18px;
  display: block;
}
.vsl .vsl-time {
  flex: 0 0 auto;
  color: #f1eee6;
  font-family: var(--sans);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  white-space: nowrap;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .45);
}
.vsl .vsl-time__sep { opacity: .55; margin: 0 3px; }
.vsl .vsl-progress {
  position: relative;
  flex: 1 1 auto;
  min-width: 48px;
  height: 40px;
  display: flex;
  align-items: center;
}
.vsl .vsl-progress__track {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255, 255, 255, .3);
  pointer-events: none;
}
.vsl .vsl-progress__buffered {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: rgba(255, 255, 255, .45);
}
.vsl .vsl-progress__played {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: #a25a18;
}
.vsl .vsl-progress__range {
  position: relative;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.vsl .vsl-progress__range::-webkit-slider-runnable-track {
  height: 2px;
  background: transparent;
}
.vsl .vsl-progress__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  margin-top: -4px;
  border-radius: 50%;
  border: 1px solid #fff;
  background: #a25a18;
}
.vsl .vsl-progress__range::-moz-range-track {
  height: 2px;
  background: transparent;
}
.vsl .vsl-progress__range::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #fff;
  background: #a25a18;
}
.vsl .vsl-vol {
  display: flex;
  align-items: center;
  gap: 2px;
}
.vsl .vsl-vol__range {
  width: 0;
  opacity: 0;
  height: 40px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: width .2s var(--ease), opacity .2s var(--ease);
}
.vsl .vsl-vol:hover .vsl-vol__range,
.vsl .vsl-vol:focus-within .vsl-vol__range {
  width: 64px;
  opacity: 1;
}
.vsl .vsl-vol__range::-webkit-slider-runnable-track {
  height: 2px;
  background: rgba(255, 255, 255, .3);
}
.vsl .vsl-vol__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 8px;
  height: 8px;
  margin-top: -3px;
  border-radius: 50%;
  background: #f1eee6;
  border: 0;
}
.vsl .vsl-chrome--embed {
  inset: 10px 10px auto auto;
  left: auto;
  bottom: auto;
  display: flex;
  gap: 4px;
  padding: 0;
  opacity: 1;
  pointer-events: auto;
  background: linear-gradient(to left, rgba(0, 0, 0, .35), transparent);
}

/* Cinema + fullscreen */
.vsl-cinema-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(20, 16, 12, .92);
}
body.vsl-cinema-lock { overflow: hidden; }
.vsl .video-frame.is-cinema {
  position: fixed;
  z-index: 1201;
  left: 50%;
  top: 50%;
  width: min(1400px, 96vw, calc(90vh * 16 / 9));
  max-height: 90vh;
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
  transform: translate(-50%, -50%);
  transition: width .25s var(--ease), max-height .25s var(--ease), border-radius .25s var(--ease);
}
.vsl .video-frame.is-fullscreen {
  background: #000;
  border-radius: 0;
}
.vsl .vsl-cinema-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 7;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: #f1eee6;
  cursor: pointer;
}
.vsl .vsl-cinema-close svg { width: 18px; height: 18px; }

@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  .vsl .vsl-vol__range { display: none; }
}
@media (max-width: 767px) {
  .vsl .vsl-ctrl--cinema { display: none; }
  .vsl .vsl-chrome--embed .vsl-ctrl--cinema { display: none; }
}
@media (max-width: 768px) {
  .vsl.section,
  .vsl.section--stone {
    padding-block: 48px 64px;
    padding-inline: 0;
  }
  .vsl .vsl-media {
    width: 100%;
    max-width: 100%;
  }
  .vsl .video-frame {
    border-radius: 12px;
    border-width: 6px;
  }
  .vsl .play-button { width: 56px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .vsl .video-frame.is-cinema,
  .vsl .vsl-chrome,
  .vsl .vsl-vol__range {
    transition: none;
  }
}

/* 3) Resultados — card grid owned by Element 3 block above */

/* 4) Sistema — asymmetric 5/7 ↔ 7/5 rows */
#sistema.system.section {
  background: var(--ivory);
  padding-block: clamp(96px, 12vw, 160px);
}
#sistema .system-opening {
  margin-bottom: clamp(48px, 6vw, 88px);
}
#sistema .system-layers {
  border-top: 0;
}
#sistema .system-layer {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "copy media";
  column-gap: clamp(36px, 5vw, 72px);
  row-gap: 0;
  align-items: start;
  padding-block: clamp(56px, 7vw, 96px);
  border-bottom: 1px solid var(--line);
}
#sistema .system-layer:first-child { border-top: 1px solid var(--line); }
#sistema .system-copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
#sistema .system-index {
  margin: 0;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
  padding-top: 0;
}
#sistema .system-content h3 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.2;
  max-width: 18ch;
}
#sistema .system-copy { gap: 10px; }
#sistema .system-content > p {
  max-width: 42ch;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}
#sistema .system-content > p strong {
  color: var(--ink);
  font-weight: 500;
}
#sistema .system-visual,
#sistema .system-visual--quiet,
#sistema .system-visual--image {
  grid-area: media;
  width: 100%;
  min-height: 0 !important;
  max-height: none !important;
  height: auto;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--stone);
  border: 0;
  padding: 0 !important;
  display: block !important;
}
#sistema .system-visual--image .system-visual__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Even rows: wide image left (7), text right (5) */
#sistema .system-layer:nth-child(even) {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "media copy";
}

@media (max-width: 1180px) {
  #sistema .system-layer,
  #sistema .system-layer:nth-child(even) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "media";
    row-gap: 14px;
  }
  #sistema .system-visual,
  #sistema .system-visual--quiet,
  #sistema .system-visual--image {
    aspect-ratio: 16 / 10;
    margin-top: 12px;
  }
}

@media (max-width: 768px) {
  #sistema .system-content h3 { font-size: clamp(26px, 7vw, 34px); max-width: none; }
  #sistema .system-visual,
  #sistema .system-visual--quiet,
  #sistema .system-visual--image {
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    height: auto !important;
  }
  #sistema .system-visual--image .system-visual__image {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    aspect-ratio: auto;
  }
}

#sistema .system-close {
  margin-top: clamp(48px, 6vw, 80px);
}
#sistema .system-close > p {
  max-width: 28ch;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.2;
  font-weight: 400;
}


/* ============================================================
   Step 5b — Equipo, Sedes, Final CTA, Footer
   ============================================================ */

/* 1) Equipo — org chart */
#equipo.team.section,
#equipo.team.section--stone {
  --surface: #e9e6df;
  --ink-brand: #5b2a08;
  --accent: #a25a18;
  --team-connector: rgba(91, 42, 8, .25);
  /* Mobile/tablet defaults; desktop (>=1024) scaled below */
  --team-leader-size: clamp(120px, 13vw, 184px);
  --team-spec-size: clamp(88px, 9.5vw, 132px);
  --team-leader-gap: clamp(48px, 8vw, 140px);
  --team-spec-gap: clamp(32px, 6vw, 96px);
  --team-row-gap: clamp(56px, 6vw, 88px);
  background: var(--surface); /* alternate: after Resultados ivory */
  color: var(--ink-brand);
  padding-block: clamp(45px, 6.3vw, 90px); /* ~30% tighter (Resultados junction) */
}
@media (min-width: 1024px) {
  #equipo.team.section,
  #equipo.team.section--stone {
    --team-leader-size: clamp(160px, 16vw, 240px);
    --team-spec-size: clamp(116px, 12vw, 176px);
    --team-leader-gap: clamp(67px, 11.2vw, 196px); /* ~1.4× */
    --team-spec-gap: clamp(45px, 8.4vw, 134px);
    --team-row-gap: clamp(78px, 8.4vw, 123px);
  }
  #equipo .team-org {
    --team-stub-h: 28px; /* ~1.4× of 20 */
    --team-drop-h: 39px; /* ~1.4× of 28 */
  }
  #equipo .team-member {
    max-width: 28ch;
  }
  #equipo .team-member__name {
    font-size: clamp(22px, 1.9vw, 30px);
  }
  #equipo .team-role {
    max-width: 28ch;
    font-size: 13.5px;
  }
}
#equipo .team-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: clamp(41px, 5.1vw, 68px); /* ~15% */
}
#equipo .team-head .section-kicker {
  margin: 0 0 14px;
  color: var(--ink-soft);
}
#equipo .team-head .display,
#equipo .team-head .display--medium {
  margin: 0;
  max-width: 18em;
  color: var(--ink-brand);
  text-wrap: balance;
}
#equipo .team-org {
  --team-stub-h: 20px;
  --team-drop-h: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
#equipo .team-org__leaders-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
}
#equipo .team-org__row {
  list-style: none;
  margin: 0;
  padding: 0;
}
#equipo .team-org__row--leaders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--team-leader-gap);
  align-items: start;
  justify-items: center;
}
#equipo .team-org__leader-join {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--team-leader-gap);
  justify-items: center;
  height: var(--team-stub-h);
  width: 100%;
}
#equipo .team-org__stub {
  width: 1px;
  height: 100%;
  background: var(--team-connector);
}
#equipo .team-org__top-bar {
  position: absolute;
  /* Centers of two equal columns with gap G: (W-G)/4 from each edge */
  left: calc((100% - var(--team-leader-gap)) / 4);
  right: calc((100% - var(--team-leader-gap)) / 4);
  bottom: 0;
  height: 1px;
  background: var(--team-connector);
}
#equipo .team-org__stem {
  width: 1px;
  height: calc(var(--team-row-gap) - var(--team-drop-h));
  margin-inline: auto;
  background: var(--team-connector);
  flex: 0 0 auto;
}
#equipo .team-org__row--specialists {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: var(--team-spec-gap);
  align-items: start;
  justify-items: center;
  width: min(100%, calc(3 * var(--team-spec-size) + 2 * var(--team-spec-gap)));
  padding-top: var(--team-drop-h);
  box-sizing: border-box;
}
/* Bus: Mateo center → Albert center (gap-aware equivalent of 100%/6) */
#equipo .team-org__row--specialists::before {
  content: "";
  position: absolute;
  top: 0;
  left: calc((100% - 2 * var(--team-spec-gap)) / 6);
  right: calc((100% - 2 * var(--team-spec-gap)) / 6);
  height: 1px;
  background: var(--team-connector);
}
#equipo .team-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
  max-width: 22ch;
}
#equipo .team-member--specialist {
  position: relative;
}
#equipo .team-member--specialist::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(-1 * var(--team-drop-h));
  width: 1px;
  height: var(--team-drop-h);
  background: var(--team-connector);
  transform: translateX(-50%);
}
#equipo .team-avatar {
  box-sizing: border-box;
  margin: 0 0 14px;
  padding: 4px;
  border: 1px solid rgba(91, 42, 8, .18);
  border-radius: 50%;
  background: var(--surface);
  overflow: hidden;
}
#equipo .team-member--leader .team-avatar {
  width: var(--team-leader-size);
  height: var(--team-leader-size);
}
#equipo .team-member--specialist .team-avatar {
  width: var(--team-spec-size);
  height: var(--team-spec-size);
}
#equipo .team-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  border-radius: 50%;
}
#equipo .team-member__name {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(18px, 1.5vw, 24px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink-brand);
}
#equipo .team-role {
  margin: 6px 0 0;
  max-width: 22ch;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

@media (max-width: 767px) {
  #equipo.team.section,
  #equipo.team.section--stone {
    --team-leader-size: 96px;
    --team-spec-size: 72px;
    --team-leader-gap: clamp(28px, 8vw, 48px);
    --team-spec-gap: clamp(16px, 4vw, 28px);
    --team-row-gap: 48px;
  }
  #equipo .team-org {
    --team-stub-h: 16px;
    --team-drop-h: 22px;
  }
  #equipo .team-member__name { font-size: 15px; }
  #equipo .team-role { font-size: 10.5px; letter-spacing: .06em; }
  #equipo .team-avatar { margin-bottom: 10px; padding: 3px; }
}


/* 3) Sedes — full-bleed light stone; brown stone borders only around photos */
#firma.offices.section {
  --surface: #e9e6df;
  --ink-brand: #5b2a08;
  --accent: #a25a18;
  --ivory: #f1eee6;
  position: relative;
  isolation: isolate;
  background: var(--surface);
  color: var(--ink-brand);
  padding-block: clamp(45px, 6.3vw, 90px); /* match Equipo / Resultados */
}
@media (min-width: 901px) {
  #firma.offices.section {
    --sedes-tex: url("../assets/images/bg-stone-beige.webp");
  }
}
@media (max-width: 900px) {
  #firma.offices.section {
    --sedes-tex: url("../assets/images/bg-stone-beige-m.webp");
  }
}
/* Full-bleed light stone + #e9e6df wash; faded at top/bottom (~120px) for seamless joins */
#firma.offices.section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: block !important;
  background-color: var(--surface);
  background-image:
    linear-gradient(rgba(233, 230, 223, .45), rgba(233, 230, 223, .45)),
    var(--sedes-tex);
  background-size: auto, cover;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, .35) 48px,
    #000 120px,
    #000 calc(100% - 120px),
    rgba(0, 0, 0, .35) calc(100% - 48px),
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, .35) 48px,
    #000 120px,
    #000 calc(100% - 120px),
    rgba(0, 0, 0, .35) calc(100% - 48px),
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
#firma.offices.section::after {
  display: none !important;
}
#firma .container-wide {
  width: min(100% - (2 * var(--page-gutter)), 1100px);
  max-width: 1100px;
  margin-inline: auto;
  position: relative;
  z-index: 1;
}
#firma .offices-heading {
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
  margin-bottom: clamp(28px, 3.6vw, 48px);
}
#firma .offices-kicker {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
}
#firma .offices-heading .display,
#firma .offices-heading .display--medium {
  margin: 0;
  color: var(--ink-brand);
  text-wrap: balance;
  text-shadow: none;
}
/* Layout wrapper only — no brown panel */
#firma .sedes-stone {
  position: relative;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  overflow: visible;
  color: var(--ink-brand);
}
#firma .sedes-stone::before,
#firma .sedes-stone::after {
  content: none;
  display: none;
}
#firma .office-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 3.5vw, 56px);
  align-items: start;
}
#firma .office-card {
  min-width: 0;
  max-width: 470px;
  width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
  box-shadow: none;
}
/* Brown stone photo frames (VSL-style padded texture border) */
#firma .office-frame {
  --frame-border: 14px;
  --frame-radius: 16px;
  --frame-inner-r: calc(var(--frame-radius) - var(--frame-border));
  position: relative;
  box-sizing: border-box;
  padding: var(--frame-border);
  background-color: #3d2412;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 0;
  border-radius: var(--frame-radius);
  overflow: hidden;
  box-shadow: 0 18px 40px -18px rgba(40, 18, 4, .45);
}
@media (min-width: 901px) {
  #firma .office-frame {
    background-image: url("../assets/images/bg-brown-horizontal-hq.webp");
  }
}
@media (max-width: 900px) {
  #firma .office-frame {
    background-image: url("../assets/images/bg-brown-vertical-hq.webp");
  }
}
/* Thin ivory line between brown border and photo */
#firma .office-frame::after {
  content: "";
  position: absolute;
  inset: var(--frame-border);
  border: 1.5px solid rgba(241, 238, 230, .55);
  border-radius: var(--frame-inner-r);
  pointer-events: none;
  z-index: 3;
  box-sizing: border-box;
}
#firma .office-media,
#firma .office-media--image,
#firma .office-gallery {
  position: relative;
  aspect-ratio: 3 / 2;
  width: 100%;
  overflow: hidden;
  border-radius: var(--frame-inner-r, 2px);
  background: #1a0d04;
}
#firma .office-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
}
#firma .office-track {
  position: absolute;
  inset: 0;
}
#firma .office-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease);
}
#firma .office-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
#firma .office-gallery::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 32%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(20, 12, 6, .72) 0%,
    rgba(20, 12, 6, .35) 55%,
    transparent 100%
  );
}
#firma .office-gallery__controls {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}
#firma .office-gallery__counter {
  color: #f1eee6;
  font-family: var(--sans);
  font-size: 11px; /* +1px */
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 1;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
}
#firma .office-gallery__arrows {
  display: flex;
  gap: 8px;
  pointer-events: auto;
}
#firma .office-gallery__arrow {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(91, 42, 8, .2);
  border-radius: 50%;
  background: rgba(241, 238, 230, .92);
  color: #5b2a08;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
#firma .office-gallery__arrow:hover {
  background: #a25a18;
  border-color: #a25a18;
  color: #f1eee6;
}
#firma .office-gallery__arrow:focus-visible {
  outline: 2px solid #f1eee6;
  outline-offset: 0;
  box-shadow: 0 0 0 4px #5b2a08;
}
#firma .office-gallery__arrow .icon {
  transform: none;
}
#firma .office-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(91, 42, 8, .18);
}
#firma .office-copy__identity {
  display: grid;
  gap: 8px;
  min-width: 0;
}
#firma .office-copy h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 400;
  line-height: 1.15;
  color: #5b2a08;
  text-shadow: none;
}
#firma .office-status {
  margin: 0;
  color: rgba(91, 42, 8, .72);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.35;
}
#firma .office-address {
  margin: 0;
  color: var(--ink-brand, #5b2a08);
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: .06em;
  line-height: 1.5;
  text-transform: uppercase;
}
#firma .office-copy a,
#firma .sedes-stone a {
  color: var(--ink-brand, #5b2a08);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s var(--ease);
}
#firma .office-copy a:hover,
#firma .office-copy a:focus-visible,
#firma .sedes-stone a:hover,
#firma .sedes-stone a:focus-visible {
  color: var(--accent, #a25a18);
}
#firma .office-copy a:focus-visible,
#firma .sedes-stone a:focus-visible {
  outline: 2px solid var(--accent, #a25a18);
  outline-offset: 3px;
}
@media (max-width: 1023px) and (min-width: 768px) {
  #firma .office-grid {
    gap: clamp(24px, 3.5vw, 40px);
  }
}
@media (max-width: 767px) {
  #firma .office-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  #firma .office-card {
    max-width: none;
  }
  #firma .office-frame {
    --frame-border: 9px;
    --frame-radius: 16px;
  }
  #firma .office-media,
  #firma .office-media--image,
  #firma .office-gallery {
    aspect-ratio: 3 / 2;
  }
  #firma .office-copy h3 {
    font-size: clamp(22px, 6vw, 28px);
  }
}
@media (prefers-reduced-motion: reduce) {
  #firma .office-slide {
    transition: none;
  }
}

/* 4) Final CTA — Palette 1 (Element 7) */
.final-cta.section {
  --accent: #a25a18;
  --surface: #e9e6df;
  --ink-brand: #5b2a08;
  background: var(--surface);
  color: var(--ink-brand);
  border-top: 1px solid rgba(91, 42, 8, .12);
  padding-block: clamp(60px, 8.5vw, 120px); /* ~25% tighter */
  text-align: center;
}
.final-cta .container-narrow {
  width: min(calc(100% - (2 * var(--page-gutter))), 760px);
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.final-cta .display,
.final-cta .display--large {
  margin: 0;
  max-width: none;
  color: var(--ink-brand);
  font-family: var(--serif);
  font-size: clamp(34px, 4vw, 60px);
  font-weight: 400;
  line-height: 1.1;
  text-wrap: balance;
}
.final-cta .lede {
  margin: 20px 0 0;
  max-width: 54ch;
  color: var(--ink-soft);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.6;
}
.final-cta .line-button,
.final-cta .line-button--dark {
  margin-top: 36px;
  border: 0;
  border-bottom: 0;
  border-radius: 2px;
  background: var(--ink-brand);
  color: var(--surface);
  padding: 18px 34px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .08em;
  gap: 16px;
  white-space: nowrap;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.final-cta .line-button:hover,
.final-cta .line-button--dark:hover,
.final-cta .line-button:focus-visible,
.final-cta .line-button--dark:focus-visible {
  background: var(--accent);
  color: var(--surface);
}
.final-cta .line-button:focus-visible,
.final-cta .line-button--dark:focus-visible {
  outline: 2px solid var(--ink-brand);
  outline-offset: 3px;
}
.final-cta .line-button span {
  transform: none;
}

/* 5) Footer — light ivory panel (recolor) */
.footer {
  --footer-bg: #f1eee6; /* swap this one line to recolor the footer */
  --accent: #a25a18;
  --ink-brand: #5b2a08;
  background: var(--footer-bg);
  color: var(--ink-brand);
  border-top: 1px solid rgba(91, 42, 8, .14);
  padding-block: clamp(40px, 5vw, 64px) clamp(52px, 6vw, 80px);
}
.footer-inner {
  display: grid;
  gap: clamp(28px, 3.5vw, 40px);
}
.footer-brand-block {
  display: grid;
  gap: 0;
  padding-bottom: clamp(20px, 2.5vw, 28px);
  border-bottom: 1px solid rgba(91, 42, 8, .18);
}
.footer .brand,
.footer .brand--footer {
  font-family: var(--sans);
  font-size: 15.4px; /* +10% from 14px */
  font-weight: 400; /* was 300 */
  letter-spacing: .40em; /* was .38em */
  text-transform: uppercase;
  color: var(--ink-brand);
  opacity: 1;
  transition: color .25s var(--ease);
}
.footer .brand:hover,
.footer .brand--footer:hover,
.footer .brand:focus-visible,
.footer .brand--footer:focus-visible {
  color: var(--ink-brand);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  opacity: 1;
}
.footer .brand:focus-visible,
.footer .brand--footer:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.footer-meta {
  display: grid;
  grid-template-columns: auto auto auto;
  justify-content: space-between;
  column-gap: clamp(32px, 5vw, 80px);
  row-gap: 28px;
  align-items: start;
  width: 100%;
}
.footer-links,
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 12px;
  letter-spacing: .08em;
}
.footer a {
  opacity: 1;
}
.footer-nav a {
  color: rgba(91, 42, 8, .82);
  width: fit-content;
  text-decoration: none;
  transition: color .25s var(--ease);
}
.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--ink-brand);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  opacity: 1;
}
.footer-nav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.footer-locations {
  display: grid;
  gap: 18px;
}
.footer-locations p,
.footer p {
  margin: 0;
  color: rgba(91, 42, 8, .82);
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: .02em;
}
.footer-locations strong {
  display: inline-block;
  margin-bottom: 2px;
  color: var(--ink-brand);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.footer-legal {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-self: end;
  text-align: right;
  color: rgba(91, 42, 8, .70);
  font-size: 11px;
  letter-spacing: .08em;
}
.footer-legal span {
  display: block;
}
.footer-legal .footer-credit {
  flex-basis: 100%;
  width: 100%;
  margin: 8px 0 0;
  max-width: 100%;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: .02em;
  color: rgba(91, 42, 8, .82); /* same muted ink as footer body; ≥4.5:1 on #f1eee6 */
}
.footer-credit a {
  color: var(--ink-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .25s var(--ease), text-decoration-thickness .25s var(--ease);
}
.footer-credit a:hover,
.footer-credit a:focus-visible {
  color: var(--accent);
  text-decoration-thickness: 2px;
}
.footer-credit a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (min-width: 769px) {
  .footer-legal .footer-credit {
    font-size: 13px;
    text-align: right;
  }
}

@media (max-width: 768px) {
  .footer-legal .footer-credit {
    text-align: left;
    font-size: 12px;
  }
  .footer-credit a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: calc((1em - 44px) / 2); /* 44px tap without shifting visual line */
  }
}

@media (max-width: 900px) {
  .footer-meta {
    grid-template-columns: 1fr 1fr;
    justify-content: stretch;
    gap: 36px 48px;
  }
  .footer-legal {
    grid-column: 1 / -1;
    justify-self: start;
    text-align: left;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(91, 42, 8, .18);
  }
}
@media (max-width: 767px) {
  .footer {
    padding-block: 48px;
  }
  .footer-inner {
    gap: 32px;
  }
  .footer-meta {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-legal {
    grid-column: auto;
    flex-direction: column;
    gap: 10px;
    padding-top: 0;
    border-top: 0;
  }
}

/* (Element 4) Old #equipo role min-height baseline hack removed — org chart owns .team-role. */


/* ============================================================
   Step 6 — Motion
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .7s cubic-bezier(.22,.61,.36,1),
    transform .7s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Hero text is static on load — no .reveal motion in .hero */

/* Stagger grouped items — max 5 steps × 80ms (do not touch reveal JS) */
#autoridad .client-mark.reveal:nth-child(1),
#equipo .team-member.reveal:nth-child(1),
.results .testimonial-case:nth-of-type(1) .reveal,
#sistema .system-layer.reveal:nth-child(1) { transition-delay: 0ms; }

#autoridad .client-mark.reveal:nth-child(2),
#equipo .team-member.reveal:nth-child(2),
.results .testimonial-case:nth-of-type(2) .reveal,
#sistema .system-layer.reveal:nth-child(2) { transition-delay: 80ms; }

#autoridad .client-mark.reveal:nth-child(3),
#equipo .team-member.reveal:nth-child(3),
.results .testimonial-case:nth-of-type(3) .reveal,
#sistema .system-layer.reveal:nth-child(3) { transition-delay: 160ms; }

#equipo .team-member.reveal:nth-child(4) { transition-delay: 240ms; }
#equipo .team-member.reveal:nth-child(5) { transition-delay: 320ms; }

#equipo .team-member.reveal:nth-child(n+6),
#autoridad .client-mark.reveal:nth-child(n+6),
#sistema .system-layer.reveal:nth-child(n+6) { transition-delay: 320ms; }

@media (hover: hover) {
  #equipo .team-media:hover img,
  .results .testimonial-case__portrait:hover img,
  #sistema .system-visual--image:hover .system-visual__image {
    transform: scale(1.02);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none !important;
    transition-delay: 0ms !important;
  }
  #equipo .team-media img,
  .results .testimonial-case__portrait img,
  #sistema .system-visual__image {
    transition: none !important;
    transform: none !important;
  }
}


/* ============================================================
   Phone polish — credentials + early mobile rhythm
   ============================================================ */
@media (max-width: 700px) {
  /* Firm names: compact 3-across text row */
  #autoridad.authority.section {
    padding-block: 28px 32px;
  }
  #autoridad .authority-intro {
    width: 100%;
    margin: 0 0 12px;
  }
  #autoridad .authority-intro h2 {
    max-width: 30ch;
    font-size: 10px;
    letter-spacing: .14em;
    line-height: 1.45;
  }
  #autoridad .client-line {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 12px 10px;
    width: 100%;
    margin: 0;
    padding-block: 18px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  #autoridad .client-mark {
    min-width: 0;
    padding: 0;
    border: 0;
    gap: 0;
    align-items: center;
    justify-content: center;
  }
  #autoridad .client-name {
    gap: 4px;
    opacity: .9;
  }
  #autoridad .client-name__house {
    display: block;
    font-size: 8px;
    letter-spacing: .1em;
    line-height: 1.3;
    max-width: none;
    white-space: normal;
  }
  #autoridad .client-name strong {
    font-size: clamp(17px, 4.8vw, 22px);
  }

  .client-line {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .client-mark {
    padding: 0;
    border-bottom: 0;
  }
}


/* ============================================================
   Final pass — Palette 1 unification (color/tone only)
   Scope: #autoridad, Resultados intro, #sistema, header scrolled already OK
   Do NOT redefine global --ink (body / borders / selection still use it).
   ============================================================ */

/* Logo strip */
#autoridad.authority.section {
  background: var(--ivory);
  color: var(--ink-brand);
}
#autoridad .authority-intro,
#autoridad .authority-intro h2 {
  color: rgba(61, 59, 54, .78); /* .72 was 4.28–4.46:1; raised for AA on ivory/surface */
}
#autoridad .client-line {
  border-top-color: rgba(91, 42, 8, .18);
  border-bottom-color: rgba(91, 42, 8, .18);
}
#autoridad .client-name__house,
#autoridad .client-location {
  color: rgba(61, 59, 54, .78);
}
#autoridad .client-name strong {
  color: var(--ink-brand);
}

/* Resultados — header only (cards untouched); stone-white after brown VSL */
.results.section {
  background: var(--surface);
}
.results .results-intro .section-kicker {
  color: rgba(61, 59, 54, .78);
}
.results .results-intro .display,
.results .results-intro .display--medium,
.results .results-intro h2 {
  color: var(--ink-brand);
}

/* Sistema */
#sistema.system.section {
  background: var(--ivory);
  color: var(--ink-brand);
}
#sistema .system-opening .display,
#sistema .system-opening .display--large,
#sistema .system-content h3,
#sistema .system-close > p {
  color: var(--ink-brand);
}
#sistema .system-index {
  color: var(--accent);
}
#sistema .system-content > p {
  color: var(--ink-soft);
}
#sistema .system-content > p strong {
  color: var(--ink-brand);
  font-weight: 500;
}
#sistema .system-layer,
#sistema .system-layer:first-child {
  border-color: rgba(91, 42, 8, .18);
}

/* ============================================================
   Mobile polish pass — phones only (≤768px). Desktop unchanged.
   ============================================================ */
@media (max-width: 768px) {
  /* 1) Team chart — roles wrap between words only (no mid-word hyphens) */
  #equipo.team.section,
  #equipo.team.section--stone {
    --team-spec-gap: 6px;
    --team-leader-gap: clamp(20px, 6vw, 36px);
  }
  #equipo .team-org__row--specialists {
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--team-spec-gap);
    justify-items: stretch;
  }
  #equipo .team-org__row--leaders {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: stretch;
  }
  #equipo .team-org__leader-join {
    width: 100%;
  }
  #equipo .team-member {
    min-width: 0;
    max-width: none;
    width: 100%;
  }
  #equipo .team-role {
    max-width: 100%;
    width: 100%;
    font-size: 10px;
    letter-spacing: .02em;
    line-height: 1.35;
    text-align: center;
    text-wrap: balance;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    -webkit-hyphens: none;
  }
  #equipo .team-member__name {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    -webkit-hyphens: none;
  }

  /* 2) Touch targets ≥44×44 without changing visual weight much */
  .menu-toggle {
    width: 44px;
    height: 44px;
  }
  .results .testimonial-case__toggle:not([hidden]),
  .js-testimonial-folding .results .testimonial-case__toggle:not([hidden]) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 12px 4px;
    margin-top: 2px; /* was 14px visual; padding supplies the rest */
    box-sizing: border-box;
  }
  .mobile-menu nav a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-block: 10px;
    font-size: 16px; /* already ≥12; keep readable */
  }
  .footer-nav a,
  .footer-legal span {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  #firma .office-gallery__arrow {
    width: 44px;
    height: 44px;
  }

  /* 3) Minimum readable text ≥12px (uppercase micro-labels may stay 10.5–12) */
  .section-kicker,
  #firma .offices-kicker,
  #firma .office-status,
  .footer-locations strong,
  .footer-legal,
  .results .testimonial-case__meta-line {
    font-size: 12px;
  }
  .results .testimonial-case__video {
    font-size: 12px;
    min-height: 44px;
    padding: 12px 16px;
    box-sizing: border-box;
  }

  /* 4) Testimonial cards — shorter media, tighter body */
  .results .testimonial-case__portrait {
    aspect-ratio: 4 / 3;
  }
  .results .testimonial-case__portrait img {
    object-fit: cover;
    object-position: center top;
  }
  .results .testimonial-case__body {
    padding: 16px 16px 18px;
  }

  /* 5) VSL — full width, ≤16px side margin, keep 16:9 */
  .vsl.section,
  .vsl.section--stone {
    padding-inline: 16px;
  }
  .vsl .container-wide {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
  .vsl .vsl-media {
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
  }
  .vsl .video-frame {
    aspect-ratio: 16 / 9 !important;
    width: 100%;
  }

  /* Guard: no horizontal overflow on small phones */
  .section,
  .hero,
  .footer,
  .container-wide,
  .container-narrow {
    max-width: 100%;
  }
  #equipo .team-org,
  #equipo .team-org__row--specialists,
  #equipo .team-org__leaders-block {
    max-width: 100%;
    overflow-x: clip;
  }
}

/* ============================================================
   Base polish — subtle warm section glows + soft edge blends
   Pseudo-elements only; static (no motion). Hero glow unchanged.
   ============================================================ */
.vsl.section,
.vsl.section--stone,
.results.section,
#equipo.team.section,
#equipo.team.section--stone,
#firma.offices.section,
.final-cta.section,
.footer {
  position: relative;
  overflow: clip;
  isolation: isolate;
}

/* Brown VSL → stone-white blend under peeking Resultados card */
.vsl.section::after,
.vsl.section--stone::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(180deg, rgba(91, 42, 8, 0) 0%, rgba(233, 230, 223, .9) 100%);
  opacity: 1;
}
/* Disable old warm glow on brown VSL (texture + shading carry the tone) */
.vsl.section::before,
.vsl.section--stone::before {
  display: none !important;
}
.results.section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 80px;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(180deg, rgba(233, 230, 223, .55) 0%, transparent 100%);
  opacity: 1;
}
#equipo.team.section::after,
#equipo.team.section--stone::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 120px;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(180deg, var(--ivory) 0%, transparent 100%);
  opacity: .5;
}
/* #firma::after stays unused; texture lives on ::before */
.final-cta.section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100px;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(180deg, var(--ivory) 0%, transparent 100%);
  opacity: .45;
}

/* Warm glows — same radial recipe as hero, lower opacity, asymmetric */
.vsl.section::before,
.vsl.section--stone::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  /* centered low, behind video — opacity ~.10 */
  background: radial-gradient(70% 45% at 50% 72%, rgba(162, 90, 24, .10) 0%, transparent 80%);
}
.results.section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  /* top-right, partially off-canvas — opacity ~.08 */
  background: radial-gradient(55% 50% at 92% 8%, rgba(162, 90, 24, .08) 0%, transparent 75%);
}
#equipo.team.section::before,
#equipo.team.section--stone::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  /* left side, mid height — opacity ~.08 */
  background: radial-gradient(50% 55% at 0% 48%, rgba(162, 90, 24, .08) 0%, transparent 75%);
}
/* #firma::before is the light-stone texture layer (see Sedes block above) */
.final-cta.section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  /* centered behind heading/CTA — opacity ~.14 */
  background: radial-gradient(58% 40% at 50% 55%, rgba(162, 90, 24, .14) 0%, transparent 80%);
}
.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  /* very light top wash — opacity ~.05 */
  background: radial-gradient(60% 35% at 50% 0%, rgba(162, 90, 24, .05) 0%, transparent 70%);
}

@media (max-width: 768px) {
  /* Gentler spacing than desktop (~15–20% off original, not the full 30%) */
  .vsl.section,
  .vsl.section--stone,
  .results.section,
  #equipo.team.section,
  #equipo.team.section--stone {
    padding-block: clamp(54px, 7.5vw, 108px);
  }
  #firma.offices.section {
    padding-block: clamp(45px, 6.3vw, 90px);
  }
  .final-cta.section {
    padding-block: clamp(68px, 9.5vw, 136px);
  }

  /* Glow: ~30% smaller ellipses, ~20% lower opacity */
  .vsl.section::before,
  .vsl.section--stone::before {
    background: radial-gradient(49% 32% at 50% 72%, rgba(162, 90, 24, .08) 0%, transparent 80%);
  }
  .results.section::before {
    background: radial-gradient(38% 35% at 92% 8%, rgba(162, 90, 24, .064) 0%, transparent 75%);
  }
  #equipo.team.section::before,
  #equipo.team.section--stone::before {
    background: radial-gradient(35% 38% at 0% 48%, rgba(162, 90, 24, .064) 0%, transparent 75%);
  }
  .final-cta.section::before {
    background: radial-gradient(40% 28% at 50% 55%, rgba(162, 90, 24, .112) 0%, transparent 80%);
  }
  .footer::before {
    background: radial-gradient(42% 25% at 50% 0%, rgba(162, 90, 24, .04) 0%, transparent 70%);
  }

  .vsl.section::after,
  .vsl.section--stone::after,
  .results.section::after,
  #equipo.team.section::after,
  #equipo.team.section--stone::after,
  #firma.offices.section::after,
  .final-cta.section::after {
    height: 80px;
  }
}


/* ============================================================
   Casa Caoba–style stacked scroll (ported from cc26-stack / 5067-*.js)
   Our classes/tokens only. overflow:hidden ONLY on .stack-surface.
   ============================================================ */
.stack {
  overflow-anchor: none;
  display: block;
  width: 100%;
  max-width: 100%;
}
.stack {
  --stack-peek: 44px; /* Casa Caoba desktop peek (= next-panel radius) */
}
@media (max-width: 760px) {
  .stack {
    --stack-peek: 32px;
  }
}
.stack-panel {
  position: sticky;
  top: var(--pin, 0px);
  z-index: var(--layer, 1);
}
/* Hero peek: VSL top strip visible at scroll 0 */
.stack-panel.vsl {
  margin-top: calc(-1 * var(--stack-peek, 44px));
}
.stack-surface {
  position: relative;
  isolation: isolate;
}
.stack-panel > .stack-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Match surface radius so the covered dim does not square-cut pale wedges */
  border-radius: inherit;
  background: #1a0d04;
  opacity: calc(var(--covered, 0) * .10);
  pointer-events: none;
  z-index: 5;
}

/* VSL sliding panel: rounded top while rising; --r flattens to 0 when locked (top≈0) */
.stack-panel.vsl {
  border-radius: 0;
}
.stack-panel.vsl > .stack-surface {
  border-radius: var(--r, 44px) var(--r, 44px) 0 0;
  overflow: hidden;
  box-shadow:
    0 -10px 32px rgba(40, 18, 4, .15),
    inset 0 1px 0 rgba(233, 230, 223, .19);
}

/* Panel 1 — hero surface */
.stack-panel.hero > .hero-surface {
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  height: 100vh;
  height: 100svh;
  max-height: 100vh;
  max-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Center content in the visible area above the peek strip */
  padding-top: clamp(140px, calc((57svh - var(--stack-peek, 44px) * 0.5) - 165px), 480px);
  padding-bottom: calc(112px + var(--stack-peek, 44px));
  overflow: hidden;
  /* Stone white + soft brown cloud patches (in-frame) + SVG noise + vertical stone gradient */
  background-color: var(--surface, #e9e6df);
  background-image:
    radial-gradient(ellipse 980px 720px at 94% 2%, rgba(162, 90, 24, .40) 0%, rgba(162, 90, 24, .20) 38%, rgba(162, 90, 24, 0) 74%),
    radial-gradient(ellipse 980px 700px at 4% 100%, rgba(162, 90, 24, .36) 0%, rgba(162, 90, 24, .18) 40%, rgba(162, 90, 24, 0) 74%),
    radial-gradient(ellipse 760px 420px at 50% 62%, rgba(162, 90, 24, .07) 0%, rgba(162, 90, 24, 0) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.36 0 0 0 0 0.16 0 0 0 0 0.03 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #ebe8e1 0%, #e9e6df 48%, #e4e0d7 100%);
  background-size: auto, auto, auto, 220px 220px, auto;
  background-position: 0 0;
  /* layers: TR glow, BL glow, center haze, SVG noise tile, vertical stone gradient */
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat;
  color: var(--ink-brand, #5b2a08);
}
.stack-panel.hero {
  /* neutralize old .hero layout + background (class "hero" remains for tokens) */
  min-height: 0;
  display: block;
  overflow: visible;
  background: transparent !important;
  background-image: none !important;
}
.stack-panel.hero::before { display: none !important; }

.stack-panel.hero .hero-content {
  position: relative;
  left: auto;
  top: auto;
  z-index: 6;
  width: min(1180px, 90vw);
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
/* Stable hero: no lift parallax — fade via --covered (scroll-direct, no time smoothing).
   Multiplier 1.85 so opacity ≤ .5 before the brown card bisects a text line. */
.stack-panel.hero .hero-content[data-stack-lift],
[data-stack-lift] {
  position: relative;
  z-index: 6;
  opacity: max(0, calc(1 - var(--covered, 0) * 1.85));
  transform: translateY(calc(var(--covered, 0) * -18px));
  will-change: opacity, transform;
  pointer-events: auto;
}
.stack-panel.hero .hero-title {
  color: var(--ink-brand, #5b2a08);
}
.stack-panel.hero .hero-discover {
  position: absolute;
  left: max(6.4%, calc((100% - 1760px) / 2));
  bottom: calc(24px + var(--stack-peek, 44px));
  z-index: 2;
  transform: none;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  min-height: 44px;
  margin: 0;
  color: var(--ink-brand, #5b2a08);
  text-decoration: none;
}
.stack-panel.hero .hero-discover__label {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .025em;
  color: var(--ink-brand, #5b2a08);
  border-bottom: 1px solid rgba(91, 42, 8, .3);
  padding-block: 9px;
}
.stack-panel.hero .hero-discover__btn {
  position: relative;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(91, 42, 8, .5);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-brand, #5b2a08);
  background: transparent;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.stack-panel.hero .hero-discover__btn::before {
  content: "";
  position: absolute;
  inset: -3px; /* ≥44px hit */
}
.stack-panel.hero .hero-discover__btn svg {
  width: 16px;
  height: 16px;
  position: relative;
  transition: transform .3s ease;
}
.stack-panel.hero .hero-discover:hover .hero-discover__btn {
  border-color: var(--ink-brand, #5b2a08);
  color: var(--ink-brand, #5b2a08);
}
.stack-panel.hero .hero-discover:hover .hero-discover__btn svg {
  transform: translateY(3px);
}
.stack-panel.hero .hero-discover:focus-visible {
  outline: 2px solid var(--accent, #a25a18);
  outline-offset: 4px;
  border-radius: 8px;
}

/* Panel 2 — brown VSL
   One continuous texture through the fade tail (--vsl-fade).
   Soft mid-panel shading lives on ::before and ends before the fade. */
.stack-panel.vsl {
  --vsl-fade: 220px;
  background: transparent;
  color: var(--surface, #e9e6df);
  border-radius: 0;
  overflow: visible;
  padding: 0;
}
.stack-panel.vsl > .vsl-surface {
  box-sizing: border-box;
  /* Content viewport + fade tail in one surface (same texture, one cover) */
  height: calc(100svh + var(--vsl-fade));
  min-height: calc(100svh + var(--vsl-fade));
  max-height: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 112px 3.6% 0;
  background-color: #3d2412;
  background-image: var(--vsl-tex);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Dissolve the SAME texture into stone-white over the tail */
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 calc(100% - var(--vsl-fade)),
    rgba(0, 0, 0, .97) calc(100% - var(--vsl-fade) + var(--vsl-fade) * .06),
    rgba(0, 0, 0, .88) calc(100% - var(--vsl-fade) + var(--vsl-fade) * .14),
    rgba(0, 0, 0, .72) calc(100% - var(--vsl-fade) + var(--vsl-fade) * .24),
    rgba(0, 0, 0, .52) calc(100% - var(--vsl-fade) + var(--vsl-fade) * .36),
    rgba(0, 0, 0, .32) calc(100% - var(--vsl-fade) + var(--vsl-fade) * .50),
    rgba(0, 0, 0, .16) calc(100% - var(--vsl-fade) + var(--vsl-fade) * .64),
    rgba(0, 0, 0, .06) calc(100% - var(--vsl-fade) + var(--vsl-fade) * .80),
    rgba(0, 0, 0, .015) calc(100% - var(--vsl-fade) + var(--vsl-fade) * .92),
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 calc(100% - var(--vsl-fade)),
    rgba(0, 0, 0, .97) calc(100% - var(--vsl-fade) + var(--vsl-fade) * .06),
    rgba(0, 0, 0, .88) calc(100% - var(--vsl-fade) + var(--vsl-fade) * .14),
    rgba(0, 0, 0, .72) calc(100% - var(--vsl-fade) + var(--vsl-fade) * .24),
    rgba(0, 0, 0, .52) calc(100% - var(--vsl-fade) + var(--vsl-fade) * .36),
    rgba(0, 0, 0, .32) calc(100% - var(--vsl-fade) + var(--vsl-fade) * .50),
    rgba(0, 0, 0, .16) calc(100% - var(--vsl-fade) + var(--vsl-fade) * .64),
    rgba(0, 0, 0, .06) calc(100% - var(--vsl-fade) + var(--vsl-fade) * .80),
    rgba(0, 0, 0, .015) calc(100% - var(--vsl-fade) + var(--vsl-fade) * .92),
    transparent 100%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* Desktop brown horizontal — isolated so mobile never fetches it */
@media (min-width: 901px) {
  .stack-panel.vsl > .vsl-surface {
    --vsl-tex: url("../assets/images/bg-brown-horizontal-hq.webp");
  }
}
/* Soft shading only over the content band — eased to 0 before the fade tail */
.stack-panel.vsl > .vsl-surface::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100svh;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(
      180deg,
      rgba(40, 18, 4, 0) 0%,
      rgba(40, 18, 4, .10) 28%,
      rgba(40, 18, 4, .18) 48%,
      rgba(40, 18, 4, .12) 68%,
      rgba(40, 18, 4, .04) 84%,
      rgba(40, 18, 4, 0) 100%
    ),
    radial-gradient(ellipse 80% 55% at 50% 36%, rgba(40, 18, 4, 0) 0%, rgba(40, 18, 4, .16) 70%, rgba(40, 18, 4, 0) 100%);
}
.stack-panel.vsl .vsl-layout {
  width: min(100%, 1600px);
  margin-inline: auto;
  margin-bottom: auto;
  padding-bottom: 48px;
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  max-height: calc(100svh - 160px);
  min-height: 0;
  display: flex;
  align-items: center;
  align-self: center;
  height: calc(100svh - 160px);
}
.stack-panel.vsl .display,
.stack-panel.vsl .display--medium {
  color: var(--ivory, #f1eee6);
}
.stack-panel.vsl .lede,
.stack-panel.vsl .light-muted {
  color: rgba(241, 238, 230, .84);
}
.stack-panel.vsl .vsl-media {
  width: min(100%, calc((100svh - 160px) * 16 / 9));
  max-width: 100%;
  justify-self: stretch;
}
.stack-panel.vsl .video-frame {
  --vf-border: 9px;
  --vf-radius: 14px;
  width: 100%;
  max-width: min(100%, calc((100svh - 160px) * 16 / 9));
  max-height: calc(100svh - 160px);
  aspect-ratio: 16 / 9;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  border-radius: var(--vf-radius);
  box-shadow: 0 40px 110px -30px rgba(0, 0, 0, .75);
  background: var(--surface, #e9e6df);
}
/* Ivory border overlay — covers video black corners */
.stack-panel.vsl .video-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--vf-border) solid var(--surface, #e9e6df);
  border-radius: var(--vf-radius);
  pointer-events: none;
  z-index: 3;
  box-sizing: border-box;
}
.stack-panel.vsl .video-frame .video-poster,
.stack-panel.vsl .video-frame .vsl-player {
  position: absolute;
  inset: var(--vf-border);
  width: auto;
  height: auto;
  border-radius: calc(var(--vf-radius) - var(--vf-border));
  overflow: hidden;
  background: var(--surface, #e9e6df);
}
.stack-panel.vsl .video-frame .video-poster__image {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  max-width: none;
  object-fit: cover;
  border-radius: inherit;
}
.stack-panel.vsl .video-frame .vsl-player {
  inset: calc(var(--vf-border) - 1px);
  width: calc(100% - 2 * var(--vf-border) + 2px);
  height: calc(100% - 2 * var(--vf-border) + 2px);
  object-fit: cover;
  background: var(--surface, #e9e6df);
  border-radius: calc(var(--vf-radius) - var(--vf-border) + 1px);
}
.stack-panel.vsl .vsl-panel {
  background: rgba(241, 238, 230, .08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(241, 238, 230, .22);
  border-radius: 28px;
  padding: clamp(20px, 2.4vw, 40px);
  max-height: calc(100svh - 160px);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(241, 238, 230, .18),
    inset 0 -20px 40px rgba(20, 10, 4, .12);
}
.stack-panel.vsl .vsl-panel .display,
.stack-panel.vsl .vsl-panel .display--medium {
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2.35rem);
  line-height: 1.15;
}
.stack-panel.vsl .vsl-panel .lede {
  font-size: clamp(0.92rem, 0.85rem + 0.35vw, 1.125rem);
  line-height: 1.45;
}

/* Kill old VSL section padding/radius/glow conflicts inside stack */
.stack-panel.vsl.section,
.stack-panel.vsl {
  padding-block: 0;
  border-radius: 0 !important;
  overflow: visible;
}
.stack-panel.vsl::before,
.stack-panel.vsl::after {
  display: none !important;
  border-radius: 0 !important;
}

/* Page flow after VSL — static, no sticky stack, no rounded flyer */
.page-flow {
  --vsl-fade: 220px;
  position: relative;
  /* Below VSL (layer 2) so the mask fade paints over this white backing */
  z-index: 1;
  background: var(--surface, #e9e6df);
  color: var(--ink-brand, #5b2a08);
}
/* White backing only — sits under the VSL mask fade (same texture, no 2nd image) */
.stone-bridge {
  display: block;
  width: 100%;
  height: var(--vsl-fade, 220px);
  margin: calc(-1 * var(--vsl-fade, 220px) - 2px) 0 0;
  padding: 0;
  pointer-events: none;
  background: var(--surface, #e9e6df);
  background-image: none;
  position: relative;
  z-index: 0;
}
.page-flow .results.section {
  background: transparent;
  margin-top: -2px; /* sub-pixel overlap with bridge end */
  border-radius: 0;
  box-shadow: none;
  position: relative;
}
.page-flow .results.section::after {
  display: none !important;
}
/* Warm glow fades in below the bridge — no brightness step at the seam */
.page-flow .results.section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(55% 50% at 92% 8%, rgba(162, 90, 24, .08) 0%, transparent 75%);
  opacity: 1;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    transparent 8px,
    rgba(0, 0, 0, .15) 36px,
    rgba(0, 0, 0, .45) 72px,
    rgba(0, 0, 0, .75) 110px,
    #000 160px,
    #000 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    transparent 8px,
    rgba(0, 0, 0, .15) 36px,
    rgba(0, 0, 0, .45) 72px,
    rgba(0, 0, 0, .75) 110px,
    #000 160px,
    #000 100%
  );
}

/* Desktop ≥901: side-by-side; card height = video frame height; pair centred under nav.
   ROOT CAUSE of prior break: base .vsl-layout has height: calc(100svh - 160px) and
   default align-content: stretch, so a single grid row grew to fill the panel (~840px).
   align-items: stretch then made the card fill that tall row while the video kept
   aspect-ratio (~570px) at the top of its cell.
   FIX: grid-template-rows/auto-rows: auto + align-content: center → row height =
   video only; pair stays vertically centred in the free band. */
@media (min-width: 901px) {
  .stack-panel.vsl .vsl-layout {
    display: grid;
    grid-template-columns: 1.28fr 1fr;
    grid-template-rows: auto; /* row sized by content (video), not 1fr */
    grid-auto-rows: auto;
    gap: 2.6%;
    /* Keep layout box height from base (100svh - 160px) for vertical room,
       but centre the auto-height row inside it — do NOT stretch the row. */
    align-content: center;
    align-items: stretch; /* card matches the auto row (= video outer height) */
    justify-content: stretch;
  }
  .stack-panel.vsl .vsl-media,
  .stack-panel.vsl .vsl-panel {
    order: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: 0;
    flex-grow: 0;
  }
  .stack-panel.vsl .vsl-media {
    /* Aspect-ratio video defines row height; don’t stretch the frame itself */
    align-self: start;
    display: block;
    height: auto;
  }
  .stack-panel.vsl .vsl-media .vsl-shell,
  .stack-panel.vsl .vsl-media .video-frame {
    width: 100%;
    height: auto;
  }
  .stack-panel.vsl .vsl-panel {
    align-self: stretch; /* fill the video-sized row only */
    /* height:0 + min-height:100% → card does not enlarge the row beyond the video;
       it still paints at the stretched row height */
    height: 0;
    min-height: 100%;
    max-height: none;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    padding: clamp(40px, 3vw, 48px);
    overflow: hidden;
    /* width / background / border / radius / blur unchanged from base .vsl-panel */
  }
  .stack-panel.vsl .vsl-panel .section-head,
  .stack-panel.vsl .vsl-panel .section-head--split,
  .stack-panel.vsl .vsl-panel .section-head > div {
    align-items: flex-start;
    text-align: left;
    width: 100%;
    margin: 0;
    flex: 0 0 auto;
  }
  .stack-panel.vsl .vsl-panel .display,
  .stack-panel.vsl .vsl-panel .display--medium {
    margin: 0;
    max-width: 22ch;
    font-size: clamp(28px, 2.2vw, 40px); /* slightly softer floor so narrow desktops fit */
    line-height: 1.15;
    text-align: left;
  }
  .stack-panel.vsl .vsl-panel .lede,
  .stack-panel.vsl .vsl-panel .light-muted {
    margin: 18px 0 0;
    max-width: 46ch;
    font-size: clamp(15px, 1.1vw, 19px);
    line-height: 1.45;
    text-align: left;
  }
  .stack-panel.vsl .section-head,
  .stack-panel.vsl .section-head--split,
  .stack-panel.vsl .section-head > div {
    align-items: flex-start;
    text-align: left;
  }
  .stack-panel.vsl .display,
  .stack-panel.vsl .display--medium,
  .stack-panel.vsl .lede,
  .stack-panel.vsl .light-muted {
    text-align: left;
  }
}

/* Stack / strip card chrome only on true mobile (≤900). Desktop 901–1023 stays side-by-side. */
@media (max-width: 900px) {
  .stack-panel.vsl .video-frame {
    --vf-border: 6px;
  }
}

@media (max-width: 760px) {
  .stack-panel.vsl,
  .page-flow {
    --vsl-fade: 170px;
  }
  .stack-panel.vsl > .stack-surface {
    border-radius: var(--r, 32px) var(--r, 32px) 0 0;
  }
  .stone-bridge {
    height: var(--vsl-fade, 170px);
    margin-top: calc(-1 * var(--vsl-fade, 170px) - 2px);
    background: var(--surface, #e9e6df);
    background-image: none;
  }
  .stack-panel.hero > .hero-surface {
    min-height: 100vh;
    min-height: 100svh;
    height: 100vh;
    height: 100svh;
    max-height: 100vh;
    max-height: 100svh;
    padding-top: max(clamp(110px, calc((56svh - var(--stack-peek, 32px) * 0.5) - 150px), 340px), calc(env(safe-area-inset-top) + 72px));
    padding-bottom: calc(104px + var(--stack-peek, 32px));
    background-image:
      radial-gradient(ellipse 640px 480px at 98% 0%, rgba(162, 90, 24, .34) 0%, rgba(162, 90, 24, .17) 38%, rgba(162, 90, 24, 0) 74%),
      radial-gradient(ellipse 640px 460px at 2% 100%, rgba(162, 90, 24, .31) 0%, rgba(162, 90, 24, .15) 40%, rgba(162, 90, 24, 0) 74%),
      radial-gradient(ellipse 500px 280px at 50% 62%, rgba(162, 90, 24, .06) 0%, rgba(162, 90, 24, 0) 70%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.36 0 0 0 0 0.16 0 0 0 0 0.03 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
      linear-gradient(180deg, #ebe8e1 0%, #e9e6df 48%, #e4e0d7 100%);
    background-size: auto, auto, auto, 220px 220px, auto;
    background-position: 0 0;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat;
  }
  .stack-panel.hero .hero-discover {
    left: max(24px, calc((100% - 500px) / 2));
    bottom: calc(16px + var(--stack-peek, 32px));
    gap: 20px;
  }
  .stack-panel.hero .hero-discover__label { font-size: 11px; }
  .stack-panel.vsl > .vsl-surface {
    height: calc(100svh + var(--vsl-fade));
    min-height: calc(100svh + var(--vsl-fade));
    max-height: none;
    background-image: var(--vsl-tex);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .stack-panel.vsl .vsl-layout,
  .stack-panel.vsl .vsl-panel {
    max-height: none;
    overflow: visible;
    height: auto;
  }
  .stack-panel.vsl .vsl-media,
  .stack-panel.vsl .video-frame {
    width: 100%;
    max-width: 100%;
    max-height: none;
  }
}

/* VSL mobile CTA — hidden on desktop; shown only ≤900 */
.stack-panel.vsl .vsl-panel__cta {
  display: none;
}

/* VSL mobile — video + card optically centred in the free band under the nav
   Desktop ≥901 unchanged: no card, no CTA, existing typography. */
@media (max-width: 900px) {
  .stack-panel.vsl > .vsl-surface {
    --vsl-tex: url("../assets/images/bg-brown-vertical-hq.webp");
    --vsl-nav-top: 12px;
    --vsl-nav-h: 60px;
    --vsl-nav-gap: 32px; /* ≥32px under nav pill */
    --vsl-nav-clearance: calc(
      max(var(--vsl-nav-top), env(safe-area-inset-top, 0px))
      + var(--vsl-nav-h)
      + var(--vsl-nav-gap)
    );
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Free band = 100svh − clearance − fade pad; centre the group in it */
    justify-content: center;
    box-sizing: border-box;
    padding: var(--vsl-nav-clearance) 24px var(--vsl-fade, 170px);
  }
  .stack-panel.vsl .vsl-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 28px; /* video → card */
    margin-block: 0;
    padding-bottom: 0;
    max-height: none;
    height: auto;
    min-height: 0;
    flex: 0 0 auto;
    /* Optical centre: ~3% of viewport above true centre */
    transform: translateY(-3svh);
  }
  /* Visual order matches DOM: video then card (overrides ≤1023 text-first) */
  .stack-panel.vsl .vsl-media {
    order: -1;
    width: 100%;
    max-width: 100%;
    margin: 0;
    flex: 0 0 auto;
  }
  .stack-panel.vsl .video-frame {
    width: 100%;
    max-width: 100%;
  }
  /* Rounded glassy card — same width as video; no backdrop-filter */
  .stack-panel.vsl .vsl-panel {
    order: 0;
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 100%;
    margin: 0;
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 26px 24px 24px;
    border-radius: 28px;
    background:
      linear-gradient(180deg, rgba(241, 238, 230, .13) 0%, rgba(241, 238, 230, .06) 100%),
      rgba(26, 13, 4, .30);
    border: 1px solid rgba(241, 238, 230, .20);
    box-shadow:
      inset 0 1px 0 rgba(241, 238, 230, .14),
      0 18px 40px -20px rgba(10, 4, 0, .55);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    overflow: hidden;
  }
  /* Kill prior floating scrim */
  .stack-panel.vsl .vsl-panel::before {
    display: none !important;
    content: none !important;
  }
  .stack-panel.vsl .vsl-panel .section-head,
  .stack-panel.vsl .vsl-panel .section-head--split,
  .stack-panel.vsl .vsl-panel .section-head > div {
    align-items: flex-start;
    text-align: left;
    width: 100%;
    max-width: none;
    margin: 0;
  }
  .stack-panel.vsl .vsl-panel .display,
  .stack-panel.vsl .vsl-panel .display--medium {
    margin: 0;
    max-width: none;
    font-family: var(--serif);
    font-size: clamp(24px, 6.8vw, 29px);
    font-weight: 400;
    line-height: 1.16;
    letter-spacing: -0.01em;
    color: #f6f2ea;
    text-align: left;
    text-wrap: balance;
    text-shadow: none;
  }
  .stack-panel.vsl .vsl-panel .lede,
  .stack-panel.vsl .vsl-panel .light-muted {
    margin: 14px 0 0;
    max-width: 34ch;
    font-family: var(--serif);
    font-size: 17px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.55;
    color: rgba(246, 242, 234, .88);
    text-align: left;
    text-wrap: pretty;
    text-shadow: none;
  }
  /* Mobile CTA — same data-open-analysis as hero */
  .stack-panel.vsl .vsl-panel__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    margin: 20px 0 0;
    padding: 20px 0 0;
    min-height: 48px;
    border: 0;
    border-top: 1px solid rgba(241, 238, 230, .18);
    border-radius: 0;
    background: transparent;
    color: #f6f2ea;
    font-family: var(--serif);
    font-size: 16px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }
  .stack-panel.vsl .vsl-panel__cta .icon--arrow {
    margin-left: auto;
    flex-shrink: 0;
  }
  .stack-panel.vsl .vsl-panel__cta .icon--arrow svg {
    width: 18px;
    height: 18px;
  }
  .stack-panel.vsl .vsl-panel__cta:hover,
  .stack-panel.vsl .vsl-panel__cta:focus-visible {
    color: #fff;
  }
  .stack-panel.vsl .vsl-panel__cta:focus-visible {
    outline: 1px solid rgba(241, 238, 230, .7);
    outline-offset: 4px;
  }
}

/* Short phones: compact sizes + 24px min under nav; grow panel if needed */
@media (max-width: 900px) and (max-height: 700px) {
  .stack-panel.vsl > .vsl-surface {
    --vsl-nav-gap: 24px; /* minimum on short screens */
    height: auto;
    min-height: calc(100svh + var(--vsl-fade, 170px));
    max-height: none;
    justify-content: center;
  }
  .stack-panel.vsl .vsl-layout {
    gap: 20px;
    padding-bottom: 0;
    /* Smaller optical nudge so bottom ≤ ~1.3× top */
    transform: translateY(-2svh);
  }
  .stack-panel.vsl .vsl-panel {
    padding: 18px 20px 18px;
    border-radius: 24px;
  }
  .stack-panel.vsl .vsl-panel .display,
  .stack-panel.vsl .vsl-panel .display--medium {
    font-size: clamp(22px, 5.8vw, 24px);
    line-height: 1.16;
  }
  .stack-panel.vsl .vsl-panel .lede,
  .stack-panel.vsl .vsl-panel .light-muted {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.55;
  }
  .stack-panel.vsl .vsl-panel__cta {
    margin-top: 16px;
    padding-top: 16px;
    min-height: 44px;
    font-size: 15px;
  }
  .stack-panel.vsl .vsl-media,
  .stack-panel.vsl .video-frame {
    max-height: min(34svh, calc((100vw - 48px) * 9 / 16));
    width: 100%;
  }
}

/* Landscape phones — panel may grow; pack from the top */
@media (max-width: 900px) and (max-height: 499px) {
  .stack-panel.vsl > .vsl-surface {
    height: auto;
    min-height: 100svh;
    max-height: none;
    justify-content: flex-start;
    padding: var(--vsl-nav-clearance, 104px) 24px 28px;
  }
  .stack-panel.vsl .vsl-layout {
    gap: 16px;
    padding-bottom: 16px;
    max-height: none;
    transform: none;
  }
  .stack-panel.vsl .vsl-panel {
    padding: 16px 18px;
    border-radius: 22px;
  }
  .stack-panel.vsl .vsl-media,
  .stack-panel.vsl .video-frame {
    max-height: none;
  }
}

/* Desktop ≥901: CTA never visible; panel never gets the mobile card chrome */
@media (min-width: 901px) {
  .stack-panel.vsl .vsl-panel__cta {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stack-panel {
    position: relative;
    top: auto;
  }
  .stack-panel.hero .hero-content[data-stack-lift],
  [data-stack-lift] {
    opacity: 1 !important;
    transform: none !important;
  }
  .stack-panel > .stack-surface::after { display: none; }
  /* No JS radius animation — keep full rounded top on VSL */
  .stack-panel.vsl > .stack-surface {
    border-radius: 44px 44px 0 0;
  }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .stack-panel.vsl > .stack-surface {
    border-radius: 32px 32px 0 0;
  }
}

/* ============================================================
   Equipo — list + detail card (replaces org chart markup)
   ============================================================ */
#equipo .team-card {
  --team-card-radius: 28px;
  --team-row-radius: 18px;
  max-width: 1100px;
  margin-inline: auto;
  border-radius: var(--team-card-radius);
  border: 1px solid rgba(91, 42, 8, .14);
  background: rgba(241, 238, 230, .55);
  box-shadow: 0 20px 60px -30px rgba(40, 18, 4, .25);
  padding: clamp(28px, 3vw, 36px);
  color: var(--ink-brand, #5b2a08);
}
/* No-JS: stack every member's detail under its row */
#equipo .team-card:not(.is-enhanced) .team-card__member {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-block: 16px;
  border-bottom: 1px solid rgba(91, 42, 8, .10);
}
#equipo .team-card:not(.is-enhanced) .team-card__member:last-child {
  border-bottom: 0;
}
#equipo .team-card:not(.is-enhanced) .team-card__tab {
  pointer-events: none;
}
#equipo .team-card:not(.is-enhanced) .team-card__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* —— Shared tab / row —— */
#equipo .team-card__tab {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 76px;
  margin: 0;
  padding: 10px 14px 10px 10px;
  border: 0;
  border-radius: var(--team-row-radius);
  background: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: background .2s var(--ease, ease);
}
#equipo .team-card__tab:hover {
  background: rgba(91, 42, 8, .06);
}
#equipo .team-card__tab:focus {
  outline: none;
}
#equipo .team-card__tab:focus-visible {
  outline: 2px solid var(--accent, #a25a18);
  outline-offset: 2px;
}
#equipo .team-card__panel:focus {
  outline: none;
}
#equipo .team-card__panel:focus-visible {
  outline: 2px solid var(--accent, #a25a18);
  outline-offset: 2px;
}
#equipo .team-card__thumb {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface, #e9e6df);
  box-shadow:
    0 0 0 2px var(--ivory, #f1eee6),
    0 0 0 3px rgba(91, 42, 8, .2);
}
#equipo .team-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}
#equipo .team-card__tab-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#equipo .team-card__tab-name {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.15;
  color: var(--ink-brand, #5b2a08);
}
#equipo .team-card__tab-role {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--ink-soft, #3d3b36);
}
#equipo .team-card__arrow {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(91, 42, 8, .22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-brand, #5b2a08);
  transition: transform .22s var(--ease, ease), background .2s var(--ease, ease), border-color .2s var(--ease, ease), color .2s var(--ease, ease);
}
#equipo .team-card__arrow svg {
  width: 14px;
  height: 14px;
}
#equipo .team-card__member.is-active .team-card__tab {
  background: var(--ink-brand, #5b2a08);
  color: var(--ivory, #f1eee6);
}
#equipo .team-card__member.is-active .team-card__tab:hover {
  background: var(--ink-brand, #5b2a08);
}
#equipo .team-card__member.is-active .team-card__tab-name {
  color: var(--ivory, #f1eee6);
}
#equipo .team-card__member.is-active .team-card__tab-role {
  color: rgba(241, 238, 230, .78);
}
#equipo .team-card__member.is-active .team-card__thumb {
  box-shadow:
    0 0 0 2px var(--ivory, #f1eee6),
    0 0 0 3px rgba(241, 238, 230, .35);
}
#equipo .team-card__member.is-active .team-card__arrow {
  background: var(--ivory, #f1eee6);
  border-color: var(--ivory, #f1eee6);
  color: var(--ink-brand, #5b2a08);
  transform: rotate(90deg);
}

/* —— Detail panel —— */
#equipo .team-card__panel {
  color: var(--ink-brand, #5b2a08);
}
#equipo .team-card__photo {
  margin: 0;
  width: clamp(180px, 18vw, 220px);
  height: clamp(180px, 18vw, 220px);
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  box-shadow:
    0 0 0 3px var(--ivory, #f1eee6),
    0 18px 40px -18px rgba(40, 18, 4, .35);
  background: var(--surface, #e9e6df);
}
#equipo .team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}
#equipo .team-card__name {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 400;
  line-height: 1.1;
  color: var(--ink-brand, #5b2a08);
}
#equipo .team-card__role {
  margin: 10px 0 0;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft, #3d3b36);
}
#equipo .team-card__intro {
  margin: 18px 0 0;
  font-family: var(--serif);
  font-size: clamp(17px, 1.35vw, 20px);
  font-style: italic;
  line-height: 1.45;
  color: var(--ink-brand, #5b2a08);
  max-width: 36ch;
}
#equipo .team-card__rule {
  margin: 22px 0;
  height: 1px;
  background: rgba(91, 42, 8, .14);
  position: relative;
  max-width: 100%;
}
#equipo .team-card__rule::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 1px;
  background: var(--accent, #a25a18);
}
#equipo .team-card__bio {
  margin: 0;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-soft, #3d3b36);
  max-width: 48ch;
}
#equipo .team-card__bio strong {
  color: var(--ink-brand, #5b2a08);
  font-weight: 600;
}

/* —— Desktop tabs (>=900px) —— */
@media (min-width: 900px) {
  #equipo .team-card.is-enhanced.is-desktop {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: 32px;
    align-items: start;
    position: relative;
  }
  #equipo .team-card.is-enhanced.is-desktop::before {
    content: "";
    position: absolute;
    top: clamp(28px, 3vw, 36px);
    bottom: clamp(28px, 3vw, 36px);
    left: calc(40% + 2px);
    width: 1px;
    background: rgba(91, 42, 8, .12);
    pointer-events: none;
  }
  #equipo .team-card.is-enhanced.is-desktop .team-card__member {
    display: contents;
  }
  #equipo .team-card.is-enhanced.is-desktop .team-card__tab {
    grid-column: 1;
  }
  #equipo .team-card.is-enhanced.is-desktop .team-card__panel {
    grid-column: 2;
    grid-row: 1 / span 5;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-height: 420px;
    padding-left: 8px;
  }
  #equipo .team-card.is-enhanced.is-desktop .team-card__panel[hidden] {
    display: none !important;
  }
  #equipo .team-card.is-enhanced.is-desktop .team-card__panel.is-active {
    display: flex;
    animation: team-detail-in .22s var(--ease, ease) both;
  }
  #equipo .team-card.is-enhanced.is-desktop .team-card__photo {
    margin-bottom: 28px;
  }
}

/* —— Mobile accordion (<900px) —— */
@media (max-width: 899px) {
  #equipo .team-card {
    padding: 20px;
    border-radius: 22px;
  }
  #equipo .team-card.is-enhanced.is-mobile {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  #equipo .team-card.is-enhanced.is-mobile .team-card__member {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  /* Open row + panel: slight gap so copy reads as belonging to the dark row */
  #equipo .team-card.is-enhanced.is-mobile .team-card__member.is-active {
    gap: 12px;
  }
  #equipo .team-card.is-enhanced.is-mobile .team-card__tab {
    min-height: 64px;
    gap: 12px;
  }
  #equipo .team-card.is-enhanced.is-mobile .team-card__thumb {
    flex-basis: 56px;
    width: 56px;
    height: 56px;
  }
  #equipo .team-card.is-enhanced.is-mobile .team-card__tab-name {
    font-size: 20px;
  }
  #equipo .team-card.is-enhanced.is-mobile .team-card__panel {
    overflow: hidden;
    /* Align copy with row text column: tab pad-left 10 + thumb 56 + gap 12 */
    padding: 0 14px 0 78px;
  }
  #equipo .team-card.is-enhanced.is-mobile .team-card__panel[hidden] {
    display: none !important;
  }
  #equipo .team-card.is-enhanced.is-mobile .team-card__panel.is-active {
    display: block;
    padding-top: 16px;
    padding-bottom: 20px;
    animation: team-detail-in .22s var(--ease, ease) both;
  }
  /* Hide duplicates — row button already shows photo / name / role */
  #equipo .team-card.is-enhanced.is-mobile .team-card__photo,
  #equipo .team-card.is-enhanced.is-mobile .team-card__name,
  #equipo .team-card.is-enhanced.is-mobile .team-card__role {
    display: none !important;
  }
  #equipo .team-card.is-enhanced.is-mobile .team-card__intro {
    margin-top: 0;
    font-size: 16px;
  }
  #equipo .team-card.is-enhanced.is-mobile .team-card__rule {
    margin: 16px 0;
  }
  #equipo .team-card.is-enhanced.is-mobile .team-card__bio {
    font-size: 15.5px;
  }
  #equipo .team-card.is-enhanced.is-mobile .team-card__member.is-active .team-card__arrow {
    transform: rotate(90deg);
  }
  /* Tap / active: no resting focus ring; keyboard keeps :focus-visible */
  #equipo .team-card.is-enhanced.is-mobile .team-card__tab:focus:not(:focus-visible),
  #equipo .team-card.is-enhanced.is-mobile .team-card__panel:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
  }
}

@keyframes team-detail-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #equipo .team-card__arrow,
  #equipo .team-card__tab {
    transition: none !important;
  }
  #equipo .team-card.is-enhanced .team-card__panel.is-active,
  #equipo .team-card.is-reduced-motion .team-card__panel.is-active {
    animation: none !important;
  }
}

@media (max-width: 360px) {
  #equipo .team-card {
    padding: 14px;
  }
  #equipo .team-card__tab-role {
    font-size: 10.5px;
    letter-spacing: .06em;
  }
}

/* ============================================================
   Mobile optimization pass 2026-10-28 — ≤900px / coarse pointer only.
   Desktop ≥901px declarations above are unchanged.
   ============================================================ */
@media (max-width: 900px) {
  :root {
    --page-gutter: clamp(20px, 5.5vw, 24px);
    --section-space: clamp(56px, 12vw, 88px);
  }

  html {
    background-attachment: scroll;
  }

  body {
    font-size: 16px;
    /* Keep overflow-x visible — sticky stack panels require it */
  }

  /* Fallback metrics — system fonts only (no webfont files) */
  body {
    font-family: "Helvetica Neue", Helvetica, Arial, ui-sans-serif, sans-serif;
  }

  .display,
  .display--medium,
  .display--large {
    text-wrap: balance;
  }
  .lede,
  .section p {
    text-wrap: pretty;
  }

  /* Nav pill — solid/translucent stand-in for backdrop-filter */
  .site-header {
    top: max(12px, env(safe-area-inset-top, 0px));
    width: min(960px, calc(100% - 24px));
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
  .site-header__bar {
    background: rgba(241, 238, 230, .94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 6px 20px rgba(91, 42, 8, .08);
  }
  .site-header--scrolled .site-header__bar {
    background: rgba(241, 238, 230, .97);
  }
  .mobile-menu {
    background: rgba(241, 238, 230, .97);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 10px 28px rgba(91, 42, 8, .1);
  }
  .menu-toggle {
    width: 44px;
    height: 44px;
  }

  /* Hero: pre-rendered noise tile instead of feTurbulence SVG */
  .stack-panel.hero > .hero-surface {
    background-image:
      radial-gradient(ellipse 640px 480px at 98% 0%, rgba(162, 90, 24, .34) 0%, rgba(162, 90, 24, .17) 38%, rgba(162, 90, 24, 0) 74%),
      radial-gradient(ellipse 640px 460px at 2% 100%, rgba(162, 90, 24, .31) 0%, rgba(162, 90, 24, .15) 40%, rgba(162, 90, 24, 0) 74%),
      radial-gradient(ellipse 500px 280px at 50% 62%, rgba(162, 90, 24, .06) 0%, rgba(162, 90, 24, 0) 70%),
      url("../assets/images/noise-tile-hero.webp"),
      linear-gradient(180deg, #ebe8e1 0%, #e9e6df 48%, #e4e0d7 100%);
    background-size: auto, auto, auto, 128px 128px, auto;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat;
    min-height: 100dvh;
    height: 100dvh;
    max-height: 100dvh;
  }
  .hero {
    background-image:
      radial-gradient(ellipse 720px 520px at 88% 12%, rgba(162, 90, 24, .28) 0%, transparent 72%),
      radial-gradient(ellipse 640px 480px at 8% 88%, rgba(162, 90, 24, .24) 0%, transparent 70%),
      radial-gradient(ellipse 520px 380px at 48% 42%, rgba(162, 90, 24, .14) 0%, transparent 68%),
      url("../assets/images/noise-tile-hero.webp"),
      linear-gradient(180deg, #ebe8e1 0%, var(--surface) 45%, #e4e0d7 100%);
    background-size: auto, auto, auto, 128px 128px, auto;
  }

  /* No continuous compositor promotion when not animating */
  .stack-panel.hero .hero-content[data-stack-lift],
  [data-stack-lift] {
    will-change: auto;
  }

  /* VSL locked panel — dvh avoids toolbar jump/gap */
  .stack-panel.vsl > .vsl-surface {
    height: calc(100dvh + var(--vsl-fade, 170px));
    min-height: calc(100dvh + var(--vsl-fade, 170px));
  }
  .stack-panel.vsl > .vsl-surface::before {
    height: 100dvh;
  }
  body.vsl-cinema-lock .stack-panel.vsl > .vsl-surface,
  body.vsl-cinema-lock {
    min-height: 100dvh;
  }

  /* Popups / dialogs — drop expensive blurs */
  .analysis-modal::backdrop {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(20, 12, 6, .78);
  }
  .testimonial-video-dialog {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(20, 12, 6, .82);
  }
  .testimonial-video-dialog__frame {
    box-shadow: 0 12px 32px rgba(20, 10, 4, .35);
  }

  /* Single light shadow on office frames */
  #firma .office-frame {
    box-shadow: 0 10px 24px -12px rgba(40, 18, 4, .4);
  }

  /* Tap targets */
  .header-cta--menu,
  .mobile-menu a,
  .testimonial-case__video,
  .office-gallery__arrow,
  .hero-cta,
  .line-button,
  .submit-button {
    min-height: 44px;
  }
  .mobile-menu a {
    display: flex;
    align-items: center;
    padding-block: 12px;
  }

  /* Form inputs already 16px in older MQ; reinforce */
  .analysis-form input,
  .analysis-form textarea {
    font-size: 16px;
  }

  /* Landscape phones — locked panels stay usable */
  @media (orientation: landscape) and (max-height: 500px) {
    .stack-panel.hero > .hero-surface {
      padding-top: max(64px, env(safe-area-inset-top, 0px) + 48px);
      padding-bottom: calc(48px + var(--stack-peek, 32px));
    }
    .stack-panel.vsl > .vsl-surface {
      padding-top: max(48px, env(safe-area-inset-top, 0px) + 40px);
    }
  }

  /* Bottom safe area for final content / footer */
  .footer,
  .final-cta.section {
    padding-bottom: calc(clamp(48px, 10vw, 72px) + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .stack-panel.hero .hero-content[data-stack-lift],
  [data-stack-lift] {
    transform: none;
    opacity: 1;
  }
  html {
    scroll-behavior: auto;
  }
}