: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%),
    var(--tex-noise, none),
    linear-gradient(180deg, #ebe8e1 0%, var(--surface) 45%, #e4e0d7 100%);
  background-size: auto, auto, auto, 128px 128px, 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%),
      var(--tex-noise, none),
      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: 0; /* do NOT use 100% — Safari circular % on auto grid rows inflates cards */
  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;
  height: auto;
  min-height: 0;
  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;
  /* Explicit 6-line bound so Safari does not use unclamped intrinsic height for the grid row */
  max-height: calc(6 * 1.65em);
  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;
  max-height: none;
  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;
    max-height: none;
    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;
    max-height: calc(6 * 1.65em);
    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;
    max-height: none;
    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: 0; /* stretch via grid align-items only — avoid Safari % min-height */
    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 — routed via --tex-*; Landing v2 sets them to none */
@media (min-width: 901px) {
  .vsl.section,
  .vsl.section--stone {
    --vsl-tex: var(--tex-brown-h);
    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%),
      var(--tex-brown-h);
  }
}
@media (max-width: 900px) {
  .vsl.section,
  .vsl.section--stone {
    --vsl-tex: var(--tex-brown-v);
    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%),
      var(--tex-brown-v);
  }
}
.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: var(--tex-stone); /* was url("../assets/images/bg-stone-beige.webp") */
  }
}
@media (max-width: 900px) {
  #firma.offices.section {
    --sedes-tex: var(--tex-stone); /* was 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: var(--tex-brown-h);
  }
}
@media (max-width: 900px) {
  #firma .office-frame {
    background-image: var(--tex-brown-v);
  }
}
/* 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) + optional 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%),
    var(--tex-noise, none),
    linear-gradient(180deg, #ebe8e1 0%, #e9e6df 48%, #e4e0d7 100%);
  background-size: auto, auto, auto, 128px 128px, auto;
  background-position: 0 0;
  /* layers: TR glow, BL glow, center haze, noise (off via --tex-noise), 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: var(--tex-brown-h);
  }
}
/* 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%),
      var(--tex-noise, none),
      linear-gradient(180deg, #ebe8e1 0%, #e9e6df 48%, #e4e0d7 100%);
    background-size: auto, auto, auto, 128px 128px, 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: var(--tex-brown-v);
    --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: noise tile gated by --tex-noise (none = flat gradients only) */
  .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%),
      var(--tex-noise, none),
      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%),
      var(--tex-noise, none),
      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;
  }
}



/* ===== Landing v2 =====
   New sections for the 11-block funnel (Phase 1: structure + copy).
   Do not rewrite legacy #sistema .system-* rules above; they are unused by markup.
   ============================================================ */

/* —— Texture kill-switch ——
   All rock/stone/noise images route through these. Currently `none` (no fetch).
   Restore textures: paste the commented url() onto the matching property (one line each).
   Flat brown/stone fills below stay as soft underlays; opaque textures cover them when restored. */
:root {
  --tex-brown-h: none; /* url("../assets/images/bg-brown-horizontal-hq.webp") */
  --tex-brown-v: none; /* url("../assets/images/bg-brown-vertical-hq.webp") */
  --tex-stone: none; /* url("../assets/images/bg-stone-beige.webp") — mobile was url("../assets/images/bg-stone-beige-m.webp") */
  --tex-noise: none; /* url("../assets/images/noise-tile-hero.webp") */

  --brown-base: #3d1d08;
  --brown-deep: #2e1606;
  --brown-glow: radial-gradient(
    ellipse 72% 58% at 18% 12%,
    rgba(162, 90, 24, .22) 0%,
    rgba(162, 90, 24, .08) 40%,
    transparent 70%
  );
  /* Soft underlay when textures are none; sits under var(--tex-*) / --vsl-tex */
  --brown-fill: linear-gradient(180deg, var(--brown-base) 0%, var(--brown-deep) 100%);
  /* Brown→stone: sRGB fallback (warm mid, no muddy grey) */
  --brown-fade-to-stone: linear-gradient(
    180deg,
    #2e1606 0%,
    #7a5a42 45%,
    #e9e6df 100%
  );
}
@supports (background: linear-gradient(in oklab, red, blue)) {
  :root {
    --brown-fade-to-stone: linear-gradient(
      in oklab,
      #2e1606 0%,
      #7a5a42 45%,
      #e9e6df 100%
    );
  }
}

/* Flat brown surfaces — texture var is middle layer (none now; url when restored) */
.stack-panel.vsl > .vsl-surface,
.vsl.section,
.vsl.section--stone,
#vsl.flow-vsl .flow-vsl__surface {
  background-color: var(--brown-deep);
  background-image:
    var(--brown-glow),
    var(--vsl-tex, none),
    var(--brown-fill);
  background-size: auto, cover, auto;
  background-position: center;
  background-repeat: no-repeat;
}
@media (min-width: 901px) {
  .stack-panel.vsl > .vsl-surface,
  .vsl.section,
  .vsl.section--stone,
  #vsl.flow-vsl .flow-vsl__surface {
    --vsl-tex: var(--tex-brown-h);
  }
}
@media (max-width: 900px) {
  .stack-panel.vsl > .vsl-surface,
  .vsl.section,
  .vsl.section--stone,
  #vsl.flow-vsl .flow-vsl__surface {
    --vsl-tex: var(--tex-brown-v);
  }
}

/* Brown → stone fade (bridge + legacy VSL foot) — plain CSS, no texture */
/* Short fade (~120px): shared by #prevsl mask tail + hero→TOP 1 .stone-bridge */
.stack-panel.vsl,
.page-flow {
  --vsl-fade: 120px;
}
.stone-bridge {
  height: var(--vsl-fade, 120px);
  margin: calc(-1 * var(--vsl-fade, 120px) - 2px) 0 0;
  background: var(--brown-fade-to-stone);
  background-image: var(--brown-fade-to-stone);
}
.vsl.section::after,
.vsl.section--stone::after {
  background: var(--brown-fade-to-stone);
}
@media (max-width: 760px) {
  .stack-panel.vsl,
  .page-flow {
    --vsl-fade: 120px;
  }
  .stone-bridge {
    height: var(--vsl-fade, 120px);
    margin-top: calc(-1 * var(--vsl-fade, 120px) - 2px);
    background: var(--brown-fade-to-stone);
    background-image: var(--brown-fade-to-stone);
  }
}

/* Sedes / #firma — flat stone; frames flat brown */
#firma.offices.section {
  --sedes-tex: var(--tex-stone);
  background: var(--surface, #e9e6df);
}
#firma.offices.section::before {
  background-color: var(--surface, #e9e6df);
  background-image:
    linear-gradient(rgba(233, 230, 223, .45), rgba(233, 230, 223, .45)),
    var(--sedes-tex, none);
}
#firma .office-frame {
  background-color: var(--brown-base);
  background-image: var(--tex-brown-h, none);
  background-size: cover;
}
@media (max-width: 900px) {
  #firma .office-frame {
    background-image: var(--tex-brown-v, none);
  }
}

/* Hero: keep soft brown cloud gradients; kill SVG grain + noise-tile */
.stack-panel.hero > .hero-surface {
  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%),
    var(--tex-noise, none),
    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;
}
.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%),
    var(--tex-noise, none),
    linear-gradient(180deg, #ebe8e1 0%, var(--surface) 45%, #e4e0d7 100%);
  background-size: auto, auto, auto, 128px 128px, auto;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat;
}
@media (max-width: 760px) {
  .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%),
      var(--tex-noise, none),
      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;
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

#top1,
#prueba,
#vsl,
#sistema,
#ventaja,
#propietarios,
#validacion,
#cierre,
#resultados,
#equipo,
#firma,
#prevsl {
  scroll-margin-top: 92px;
}
@media (max-width: 1180px) {
  #top1, #prueba, #vsl, #sistema, #ventaja, #propietarios, #validacion, #cierre, #resultados, #equipo, #firma, #prevsl {
    scroll-margin-top: 82px;
  }
}
@media (max-width: 768px) {
  #top1, #prueba, #vsl, #sistema, #ventaja, #propietarios, #validacion, #cierre, #resultados, #equipo, #firma, #prevsl {
    scroll-margin-top: 74px;
  }
}

/* Hero rebalance — longer H1: calm type + optical centering above peek */
.stack-panel.hero > .hero-surface {
  justify-content: center;
  /* Available band = viewport − nav clearance − (peek + proof air).
     Extra bottom pad lifts the flex center slightly above geometric mid. */
  padding-top: max(
    calc(env(safe-area-inset-top, 0px) + 88px),
    clamp(72px, 10vh, 104px)
  );
  padding-bottom: calc(var(--stack-peek, 44px) + clamp(56px, 8vh, 88px));
}

.stack-panel.hero .hero-content {
  width: min(1100px, 92vw);
  max-width: 100%;
}

.stack-panel.hero .hero-title,
.hero-title {
  max-width: none;
  width: 100%;
  margin: 0;
  font-size: clamp(38px, 3.9vw, 58px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.025em;
  text-align: center;
  text-wrap: wrap;
  overflow-wrap: normal;
  word-break: normal;
}
.hero-title .hero-line {
  display: block;
}
.hero-title em {
  font-style: italic;
  font-family: var(--serif);
  font-weight: inherit;
  letter-spacing: inherit;
}
/* Keep italic L3 intact on desktop — never split "la" / "referencia…" */
@media (min-width: 901px) {
  .hero-title .hero-line:last-child,
  .hero-title .hero-line:last-child em {
    white-space: nowrap;
  }
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero-title em {
    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;
  }
}

.stack-panel.hero .hero-sub,
.hero-sub {
  margin: 28px 0 36px;
  max-width: 620px;
  font-size: clamp(17.5px, 1.15vw, 19px);
  line-height: 1.6;
}
.hero-sub strong { font-weight: 600; }

.stack-panel.hero .hero-cta,
.hero-cta {
  margin-top: 0;
}

.hero-proof {
  margin: 28px 0 0;
  max-width: 560px;
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.55;
  letter-spacing: .02em;
  color: rgba(91, 42, 8, .68);
  text-align: center;
  text-wrap: balance;
}
.hero-proof strong { font-weight: 600; color: var(--ink-brand); }

.stack-panel.hero .hero-discover {
  left: max(clamp(20px, 5vw, 88px), calc((100% - min(1180px, 90vw)) / 2));
  bottom: calc(10px + var(--stack-peek, 44px));
  opacity: .7;
  gap: 18px;
  min-height: 36px;
}
.stack-panel.hero .hero-discover__label {
  font-size: 13px;
  letter-spacing: .02em;
  padding-block: 6px;
  border-bottom-color: rgba(91, 42, 8, .22);
}
.stack-panel.hero .hero-discover__btn {
  width: 32px;
  height: 32px;
}
.stack-panel.hero .hero-discover__btn svg {
  width: 14px;
  height: 14px;
}

/* Quiet discover competes with proof at narrow desktop — hide when it would collide */
@media (max-width: 1100px) {
  .stack-panel.hero .hero-discover {
    display: none;
  }
}

@media (max-width: 900px) {
  .stack-panel.hero > .hero-surface {
    padding-top: max(
      calc(env(safe-area-inset-top, 0px) + 80px),
      clamp(72px, 11vh, 96px)
    );
    padding-bottom: calc(var(--stack-peek, 32px) + clamp(40px, 7vh, 64px));
  }
  .stack-panel.hero .hero-content {
    width: min(1180px, calc(100% - 48px)); /* 24px side gutters */
  }
  .stack-panel.hero .hero-title,
  .hero-title {
    max-width: none;
    font-size: clamp(30px, 8.2vw, 40px);
    line-height: 1.12;
    letter-spacing: -.02em;
    text-wrap: balance;
  }
  .hero-title .hero-line {
    display: inline; /* drop forced desktop breaks */
  }
  .hero-title .hero-line:last-child,
  .hero-title .hero-line:last-child em,
  .hero-title em {
    white-space: normal; /* italic may wrap naturally */
  }
  .stack-panel.hero .hero-sub,
  .hero-sub {
    margin: 22px 0 28px;
    max-width: 620px;
    font-size: 16px;
    line-height: 1.55;
  }
  .stack-panel.hero .hero-cta,
  .hero-cta {
    width: min(100%, 320px);
    justify-content: center;
    margin-top: 0;
  }
  .hero-proof {
    margin-top: 22px;
    max-width: 560px;
    font-size: 12.75px;
    letter-spacing: .015em;
  }
}

/* Pre-VSL: video-only stack panel (reuses .stack-panel.vsl texture/peek/fade) */
.stack-panel.vsl.vsl--prevsl .vsl-layout--solo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  /* Air around the video inside the content band (nav clearance stays on surface) */
  padding-block: clamp(40px, 6vh, 72px);
  box-sizing: border-box;
}
.stack-panel.vsl.vsl--prevsl .vsl-media {
  width: min(1120px, 86vw);
  max-width: min(1120px, 86vw);
  margin-inline: auto;
}
.stack-panel.vsl.vsl--prevsl .vsl-panel { display: none; }
@media (max-width: 900px) {
  .stack-panel.vsl.vsl--prevsl .vsl-layout--solo {
    padding-block: clamp(28px, 5vh, 48px);
  }
  .stack-panel.vsl.vsl--prevsl .vsl-media {
    width: min(1120px, 92vw);
    max-width: min(1120px, 92vw);
  }
}

/* —— TOP 1 — Zone Rings (pinned stage + scroll track) ——
   Desktop: spacer AFTER stage adds real content height (3×seg) so sticky
   can travel; padding does NOT enlarge the sticky containing block.
   Progress through that travel drives active pillar 0→3. Mobile/RM: no pin. */
#top1.top1 {
  background: var(--stone);
  overflow: visible; /* sticky stage requires visible ancestors */
  padding-bottom: clamp(48px, 6vw, 88px); /* air before #prueba — on SECTION */
}
#top1 .container-wide {
  overflow: visible;
}
.page-flow {
  overflow: visible; /* sticky stage ancestor */
}
#top1 .section-kicker {
  text-align: center;
  margin-bottom: 18px;
}
#top1 #top1-title {
  text-align: center;
  max-width: 18em;
  margin: 0 auto clamp(48px, 5vw, 56px);
  color: var(--ink-brand);
}

/* Track content box = stage + spacer (sticky travel lives in the content box) */
.top1-track {
  --top1-seg: clamp(48vh, 55vh, 70vh);
  position: relative;
  padding-bottom: 0;
}
.top1-stage {
  position: sticky;
  top: max(96px, calc(env(safe-area-inset-top, 0px) + 88px));
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
  background: var(--stone);
  min-height: 0;
}
/* Real content height for sticky travel — NOT padding */
.top1-track__spacer {
  display: block;
  width: 100%;
  height: calc(3 * var(--top1-seg));
  pointer-events: none;
}

.top1-pillars {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.top1-pillar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 6px 18px;
  padding: 22px 0 22px 14px;
  border-top: 1px solid rgba(91, 42, 8, .12);
  border-left: 2px solid transparent;
  cursor: pointer;
  outline: none;
  transition: border-color .5s cubic-bezier(.2, .7, .2, 1);
}
.top1-pillar:last-child {
  border-bottom: 1px solid rgba(91, 42, 8, .12);
}
.top1-pillar.is-active {
  border-left-color: var(--accent, #a25a18); /* 2px copper left bar */
}
.top1-pillar:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.top1-pillar__idx {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: .04em;
  color: #6f5a4b; /* muted brown ≥AA on stone */
  padding-top: 3px;
}
.top1-pillar.is-active .top1-pillar__idx {
  color: var(--accent, #a25a18); /* copper number */
}

.top1-pillar__name {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6f5a4b; /* muted brown ≥AA (~5:1 on stone) */
}
.top1-pillar.is-active .top1-pillar__name {
  color: #3d1d08; /* full ink */
}

.top1-pillar__body {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #6f5a4b; /* full text always visible; quieter by color */
  max-width: 42ch;
}
.top1-pillar.is-active .top1-pillar__body {
  color: #3d1d08;
}
/* Client requirement: no line-clamp / ellipsis on inactive pillars */
.top1-pillar:not(.is-active) .top1-pillar__body {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Diagram sits in the sticky stage (not independently sticky) */
.top1-diagram-col {
  position: relative;
  top: auto;
  align-self: start;
  width: 100%;
}
.top1-diagram {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
  aspect-ratio: 1 / 1;
}
.top1-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.top1-ring {
  fill: none;
  stroke: rgba(162, 90, 24, .30);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 1;
  transition:
    stroke .75s cubic-bezier(.2, .7, .2, 1),
    opacity .75s cubic-bezier(.2, .7, .2, 1);
}
.top1-ring.is-lit {
  stroke: #a25a18;
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  opacity: 1;
}
.top1-ring.is-dim {
  stroke: rgba(162, 90, 24, .30);
  stroke-width: 1;
  opacity: 1;
}

.top1-zone-fill {
  fill: rgba(162, 90, 24, .03);
  transition: fill .75s cubic-bezier(.2, .7, .2, 1);
}
.top1-zone-fill.is-lit {
  fill: rgba(162, 90, 24, .08);
}

.top1-core {
  fill: #2e1606;
  transition: opacity .75s cubic-bezier(.2, .7, .2, 1);
  opacity: .72;
}
.top1-core.is-lit {
  opacity: 1;
}
.top1-core-ring {
  fill: none;
  stroke: #a25a18;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: .55;
  transition: opacity .75s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}
.top1-core.is-lit ~ .top1-core-ring,
.top1-svg:has(.top1-core.is-lit) .top1-core-ring {
  opacity: .9;
}
.top1-core-label {
  fill: #f1eee6;
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: -.02em;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.top1-core-sub {
  fill: rgba(241, 238, 230, .55);
  font-family: var(--sans);
  font-size: 7.5px;
  letter-spacing: .2em;
  text-anchor: middle;
  pointer-events: none;
}
/* Labels sit in radial gaps (slot), never on the stroke */
.top1-ring-label {
  fill: #5b2a08;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-anchor: middle;
  dominant-baseline: central;
  opacity: 0;
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}
.top1-ring-label.is-lit {
  opacity: 1;
  fill: #5b2a08;
}

/* —— Prueba rápida — ivory ledger card on stone
   Layout: hero left + three quiet stacked right (move data-hero to swap).
   Dead: .prueba-head, .prueba-motif, equal 4-col .prueba-stats row. */
#prueba.prueba {
  background: var(--stone);
  padding-block: clamp(48px, 6vw, 80px) clamp(56px, 7vw, 96px);
}
.prueba-card {
  background: var(--ivory);
  border-radius: 40px;
  padding: clamp(40px, 5vw, 64px) clamp(32px, 4.5vw, 64px) clamp(36px, 4.5vw, 56px);
  box-shadow: 0 20px 56px -28px rgba(46, 22, 6, .16);
}
.prueba-kicker {
  margin: 0 0 40px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.prueba-layout {
  --prueba-gap: 48px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  column-gap: var(--prueba-gap);
  align-items: start;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(91, 42, 8, .12);
}
/* Single vertical hairline in the column gap (equal height to stats block) */
.prueba-layout::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 36px;
  left: calc(1.05 / 2.05 * (100% - var(--prueba-gap)) + var(--prueba-gap) / 2);
  width: 1px;
  background: rgba(91, 42, 8, .12);
  pointer-events: none;
}

.prueba-stat {
  text-align: left;
}
.prueba-stat[data-hero="true"] {
  grid-column: 1;
  grid-row: 1 / span 3;
  padding-right: 12px;
}
.prueba-stat:not([data-hero="true"]) {
  grid-column: 2;
  padding: 0 0 28px;
}
.prueba-stat:not([data-hero="true"]):last-child {
  padding-bottom: 0;
}

.prueba-stat__num {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: clamp(28px, 2.8vw, 36px);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--ink-brand); /* match C-position-ladder quiet nums */
}
.prueba-stat[data-hero="true"] .prueba-stat__num {
  margin-bottom: 18px;
  font-size: clamp(64px, 7vw, 96px);
  letter-spacing: -.04em;
  color: var(--brown-deep, #2e1606); /* match ladder hero */
}
.prueba-stat__cap {
  margin: 0;
  max-width: 28ch;
  font-size: 14px; /* ≥14px desktop captions */
  line-height: 1.55;
  color: #4a4842; /* raised muted ≥AA on ivory card */
}
.prueba-stat[data-hero="true"] .prueba-stat__cap {
  max-width: 32ch;
  font-size: 15px;
  color: var(--ink-soft); /* ladder hero cap */
}

.prueba-close {
  margin: 28px 0 0;
  text-align: left;
  font-family: var(--serif);
  font-size: clamp(18px, 2vw, 24px);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.02em;
  color: var(--ink-brand); /* ladder close inherits ink */
  max-width: none;
}

/* Mobile + reduced motion: no pin, no tall track */
@media (max-width: 900px) {
  .top1-track {
    padding-bottom: 0;
  }
  .top1-track__spacer {
    display: none;
    height: 0;
  }
  .top1-stage {
    position: relative;
    top: auto;
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .top1-diagram-col {
    order: -1;
  }
  .top1-diagram {
    max-width: 340px;
  }
  .top1-pillar {
    grid-template-columns: 36px 1fr;
    padding: 18px 0 18px 12px;
  }
  .top1-pillar__body {
    font-size: 15.5px;
    max-width: none;
  }

  .prueba-card {
    border-radius: 28px;
    padding: 32px 22px 28px;
  }
  .prueba-kicker {
    margin-bottom: 28px;
  }
  .prueba-layout {
    grid-template-columns: 1fr;
    column-gap: 0;
    padding-bottom: 28px;
  }
  .prueba-layout::after {
    display: none;
  }
  .prueba-stat[data-hero="true"] {
    grid-column: 1;
    grid-row: auto;
    padding: 0 0 28px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(91, 42, 8, .12);
  }
  .prueba-stat:not([data-hero="true"]) {
    grid-column: 1;
    padding: 22px 0;
    border-bottom: 1px solid rgba(91, 42, 8, .10);
  }
  .prueba-stat:not([data-hero="true"]):last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .prueba-stat[data-hero="true"] .prueba-stat__num {
    font-size: clamp(56px, 16vw, 72px);
  }
  .prueba-stat__num {
    font-size: clamp(30px, 9vw, 36px);
  }
  .prueba-stat__cap,
  .prueba-stat[data-hero="true"] .prueba-stat__cap {
    font-size: 15px; /* ≥15px mobile captions */
    max-width: none;
    color: #4a4842;
  }
  .prueba-stat[data-hero="true"] .prueba-stat__cap {
    color: var(--ink-soft);
  }
  .prueba-close {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .top1-track {
    padding-bottom: 0;
  }
  .top1-track__spacer {
    display: none;
    height: 0;
  }
  .top1-stage {
    position: relative;
    top: auto;
  }
  .top1-pillar,
  .top1-pillar.is-active {
    transition: none !important;
  }
  .top1-pillar__name,
  .top1-pillar.is-active .top1-pillar__name {
    color: #3d1d08;
  }
  .top1-pillar__body,
  .top1-pillar.is-active .top1-pillar__body {
    color: #3d1d08;
  }
  .top1-pillar__idx,
  .top1-pillar.is-active .top1-pillar__idx {
    color: var(--accent, #a25a18);
  }
  .top1-pillar {
    border-left-color: var(--accent, #a25a18);
  }
  .top1-ring,
  .top1-zone-fill,
  .top1-ring-label,
  .top1-core,
  .top1-core-ring {
    transition: none !important;
  }
  .top1-ring,
  .top1-ring.is-lit,
  .top1-ring.is-dim {
    stroke: #a25a18;
    stroke-width: 1.25;
    vector-effect: non-scaling-stroke;
    opacity: 1;
  }
  .top1-zone-fill,
  .top1-zone-fill.is-lit {
    fill: rgba(162, 90, 24, .06);
  }
  /* All rings lit would overlap labels — only Posición */
  .top1-ring-label {
    opacity: 0 !important;
  }
  .top1-ring-label[data-ring="3"] {
    opacity: 1 !important;
    fill: #5b2a08;
  }
  .top1-core {
    opacity: 1;
  }
  .top1-core-ring {
    opacity: .9;
  }
}

/* —— Flow VSL (6-min, not sticky) ——
   Brown textured rounded section between stone (#prueba) and stone (#resultados).
   Radius token matches stack peek / panel radius (44 desktop / 32 mobile). */
#vsl.flow-vsl {
  --flow-vsl-radius: 44px;
  --vsl-fade: 0px;
  position: relative;
  z-index: 1;
  padding-block: 0;
  background: transparent;
  overflow: visible;
}
#vsl.flow-vsl .flow-vsl__surface {
  position: relative;
  isolation: isolate;
  margin-inline: clamp(12px, 2.4vw, 28px);
  border-radius: var(--flow-vsl-radius);
  overflow: hidden;
  color: var(--ivory);
  box-shadow:
    0 18px 48px rgba(40, 18, 4, .16),
    inset 0 1px 0 rgba(233, 230, 223, .16);
  --vsl-tex: var(--tex-brown-h);
  background-color: var(--brown-deep, #2e1606);
  background-image:
    var(--brown-glow),
    var(--vsl-tex, none),
    var(--brown-fill);
  background-size: auto, cover, auto;
  background-position: center;
  background-repeat: no-repeat;
  padding: clamp(48px, 7vw, 88px) 0;
}
#vsl.flow-vsl .vsl-layout {
  height: auto;
  min-height: 0;
}
#vsl.flow-vsl .vsl-panel__cta {
  display: none;
}
@media (min-width: 1024px) {
  #vsl.flow-vsl .vsl-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.38fr) minmax(0, 1fr);
    gap: clamp(28px, 3.5vw, 48px);
    align-items: center;
  }
  #vsl.flow-vsl .vsl-media,
  #vsl.flow-vsl .vsl-panel {
    order: 0;
    margin: 0;
    max-width: none;
    width: 100%;
  }
}
@media (max-width: 1023px) {
  #vsl.flow-vsl {
    --flow-vsl-radius: 32px;
  }
  #vsl.flow-vsl .vsl-panel {
    order: -1;
  }
  #vsl.flow-vsl .vsl-panel__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 14px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--ivory);
    color: var(--ink-brand);
    font-size: 14px;
    cursor: pointer;
  }
  #vsl.flow-vsl .vsl-panel__cta .icon { transition: transform .3s var(--ease); }
  #vsl.flow-vsl .vsl-panel__cta:hover .icon { transform: translate(2px, -2px); }
}
@media (max-width: 900px) {
  #vsl.flow-vsl .flow-vsl__surface {
    --vsl-tex: var(--tex-brown-v);
    margin-inline: 10px;
    padding: 40px 0 48px;
    background-image:
      var(--brown-glow),
      var(--vsl-tex, none),
      var(--brown-fill);
    background-size: auto, cover, auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  #vsl.flow-vsl .vsl-panel__cta .icon { transition: none; }
}

/* —— Flow VSL calm redesign ——
   Neutralizes brown slab + glass card for #vsl only (old rules above kept, unused).
   Neighbors: #prueba = stone field; #resultados = surface/stone → ivory here for a light band. */
#vsl.flow-vsl {
  --flow-vsl-radius: 0;
  --vsl-fade: 0px;
  background: var(--ivory);
  color: var(--ink-brand);
  padding-block: clamp(72px, 9vw, 120px);
  /* Kill legacy .vsl.section overflow:clip so no fade ghosts under the section */
  overflow: visible !important;
  /* Flat straight top edge into the section above (no radius / negative margin) */
  border-radius: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0;
}
/* Kill leftover brown→stone foot fade (.vsl.section::after + Landing --brown-fade-to-stone) */
#vsl.flow-vsl::after,
#vsl.flow-vsl.vsl.section::after,
#vsl.vsl.section::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  height: 0 !important;
  opacity: 0 !important;
}
#vsl.flow-vsl::before,
#vsl.flow-vsl.vsl.section::before {
  content: none !important;
  display: none !important;
  background: none !important;
}
#vsl.flow-vsl .flow-vsl__surface {
  margin-inline: 0 !important;
  border-radius: 0 !important;
  overflow: visible;
  isolation: auto;
  color: inherit;
  box-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
  padding: 0 !important;
}
#vsl.flow-vsl .flow-vsl__surface::after,
#vsl.flow-vsl .flow-vsl__surface::before {
  content: none !important;
  display: none !important;
  background: none !important;
}
#vsl.flow-vsl .vsl-layout,
#vsl.flow-vsl .container-wide.vsl-layout {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  width: min(calc(100% - (2 * clamp(24px, 5vw, 88px))), 1080px);
  max-width: 1080px;
  margin-inline: auto;
  gap: 0;
  height: auto;
  min-height: 0;
}
#vsl.flow-vsl .vsl-panel,
#vsl.flow-vsl .flow-vsl__copy {
  order: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  text-align: center;
}
#vsl.flow-vsl .section-head,
#vsl.flow-vsl .section-head--split {
  display: block;
  margin: 0;
}
#vsl.flow-vsl #vsl-title {
  margin: 0 auto;
  max-width: 22em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.12;
  letter-spacing: -.025em;
  text-align: center;
  text-wrap: balance;
  color: var(--ink-brand);
}
#vsl.flow-vsl .flow-vsl__lede {
  margin: 20px auto 0;
  max-width: 620px;
  font-family: var(--sans);
  font-size: clamp(16.5px, 1.15vw, 18px);
  line-height: 1.6;
  text-align: center;
  color: var(--muted);
}
#vsl.flow-vsl .vsl-media {
  order: 0;
  width: min(1040px, 100%);
  max-width: min(1040px, 100%);
  margin: clamp(36px, 4.5vw, 56px) auto 0;
}
#vsl.flow-vsl .video-frame {
  --vf-border: 3px;
  --vf-radius: 22px;
  width: 100%;
  border-radius: 22px;
  box-shadow: 0 30px 70px -30px rgba(46, 22, 6, .45);
}
#vsl.flow-vsl .video-frame::after {
  border-color: var(--ivory, #f1eee6);
  border-radius: 22px;
}
/* CTA always visible, centered under video (replaces mobile-only ivory-on-brown CTA) */
#vsl.flow-vsl .vsl-panel__cta {
  display: none !important; /* dead: replaced by .flow-vsl__cta */
}
#vsl.flow-vsl .flow-vsl__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: clamp(36px, 4vw, 44px);
}
@media (max-width: 900px) {
  #vsl.flow-vsl {
    padding-block: clamp(56px, 10vw, 80px);
  }
  #vsl.flow-vsl .flow-vsl__surface {
    margin-inline: 0 !important;
    padding: 0 !important;
  }
  #vsl.flow-vsl #vsl-title {
    font-size: clamp(26px, 7vw, 34px);
    max-width: 18em;
  }
  #vsl.flow-vsl .flow-vsl__lede {
    font-size: 15.5px;
    max-width: 36em;
  }
  #vsl.flow-vsl .vsl-media {
    width: 100%;
    max-width: 100%;
    margin-top: 32px;
  }
  #vsl.flow-vsl .video-frame {
    --vf-radius: 17px;
    border-radius: 17px;
  }
  #vsl.flow-vsl .video-frame::after {
    border-radius: 17px;
  }
  #vsl.flow-vsl .flow-vsl__cta {
    width: min(100%, 320px);
    margin-top: 32px;
    white-space: normal;
    text-align: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  #vsl.flow-vsl .reveal {
    opacity: 1;
    transform: none;
  }
}

/* Ivory (#vsl) → surface (#resultados): soft non-brown seam (≤48px) */
#resultados.results.section {
  background-color: var(--surface, #e9e6df);
  background-image: linear-gradient(
    180deg,
    var(--ivory, #f1eee6) 0%,
    var(--surface, #e9e6df) 48px
  );
  background-repeat: no-repeat;
  background-size: 100% 48px;
  background-position: top left;
}

/* Soft seam: previous/next stone sections sit cleanly against the rounded brown card */
#prueba.prueba {
  padding-bottom: clamp(56px, 7vw, 96px);
}

/* —— El sistema (.sys-flow-*) — connected process rows ——
   Surfaces after #validacion hide: resultados surface → sistema ivory →
   ventaja #e9e6df → propietarios ivory → equipo surface (kept). */
#sistema.sys {
  background: #f1eee6; /* ivory */
  padding-block: clamp(64px, 8vw, 104px);
  color: var(--ink-brand);
}
.sys-flow {
  width: min(100% - (2 * clamp(24px, 5vw, 88px)), 1200px);
  margin-inline: auto;
}
#sistema .section-kicker {
  margin: 0 0 36px;
  text-align: left;
}
.sys-flow__track {
  position: relative;
  padding-left: 28px; /* spine + nodes */
}
.sys-flow__spine {
  position: absolute;
  left: 4px; /* centers on 10px nodes */
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: rgba(162, 90, 24, .35);
  pointer-events: none;
}
.sys-flow__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(200px, .7fr) 1.6fr;
  column-gap: clamp(24px, 3vw, 40px);
  align-items: start;
  padding-block: clamp(36px, 4vw, 56px);
  border-top: 1px solid rgba(91, 42, 8, .12);
  /* Beat .reveal.is-visible { opacity:1 } so inactive rows can sit at .55 */
  transition:
    opacity .6s var(--ease, cubic-bezier(.2, .7, .2, 1)),
    transform .8s var(--ease, cubic-bezier(.2, .7, .2, 1));
}
.sys-flow__row:last-child {
  border-bottom: 1px solid rgba(91, 42, 8, .12);
}
#sistema .sys-flow__row.reveal.is-visible {
  opacity: .55;
}
#sistema .sys-flow__row.reveal.is-visible.is-active,
#sistema .sys-flow__row.is-active {
  opacity: 1;
}
.sys-flow__node {
  position: absolute;
  left: -28px;
  top: calc(clamp(36px, 4vw, 56px) + 10px); /* align to numeral */
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #a25a18;
  background: transparent;
  box-sizing: border-box;
  transition: background-color .6s var(--ease, cubic-bezier(.2, .7, .2, 1));
  z-index: 1;
}
.sys-flow__row.is-active .sys-flow__node {
  background: #a25a18;
}
.sys-flow__meta {
  max-width: 18em;
}
.sys-flow__num {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 4.5vw, 64px);
  line-height: 1;
  letter-spacing: -.03em;
  color: rgba(91, 42, 8, .60);
}
.sys-flow__title {
  margin: 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-brand);
  max-width: 18em;
}
.sys-flow__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 62ch;
}
.sys-flow__body > p {
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
  color: #3a3833;
}
.sys-flow__body > p strong {
  font-weight: 600;
  color: var(--ink);
}
.sys-flow__pull {
  margin: 10px 0 0;
  padding-top: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.25;
  letter-spacing: -.015em;
  color: #5b2a08;
  text-wrap: balance;
}
.sys-flow__pull::before {
  content: "";
  display: block;
  width: 40px;
  height: 1px;
  margin: 0 0 14px;
  background: #a25a18;
}
/* Reduced motion / no-IO fallback: all rows full, all nodes filled */
@media (prefers-reduced-motion: reduce) {
  #sistema .sys-flow__row {
    opacity: 1 !important;
    transition: none !important;
  }
  #sistema .sys-flow__node {
    background: #a25a18 !important;
    transition: none !important;
  }
}
#sistema.is-sys-flow-static .sys-flow__row,
#sistema.is-sys-flow-static .sys-flow__row.reveal.is-visible {
  opacity: 1;
  transition: none;
}
#sistema.is-sys-flow-static .sys-flow__node {
  background: #a25a18;
  transition: none;
}
@media (max-width: 900px) {
  .sys-flow__track {
    padding-left: 24px;
  }
  .sys-flow__spine {
    left: 4px;
  }
  .sys-flow__row {
    grid-template-columns: 1fr;
    row-gap: 20px;
    padding-block: 32px;
  }
  .sys-flow__node {
    left: -24px;
    top: calc(32px + 8px);
  }
  .sys-flow__num {
    margin-bottom: 10px;
    font-size: clamp(40px, 11vw, 52px);
  }
  .sys-flow__body {
    max-width: none;
  }
  .sys-flow__body > p {
    font-size: 16.5px;
  }
  .sys-flow__pull {
    font-size: clamp(20px, 5vw, 24px);
  }
}

/* —— Ventaja / Propietarios / Validación recomposition ——
   After #validacion hide: sistema ivory → ventaja #e9e6df →
   propietarios ivory → equipo surface. Validación CSS kept unused. */
#ventaja.ventaja,
#propietarios.propietarios,
#validacion.validacion {
  padding-block: clamp(56px, 6vw, 88px);
  text-align: left;
}
.ventaja-shell,
.propietarios-shell,
.validacion-shell {
  width: min(100% - (2 * clamp(24px, 5vw, 88px)), 1200px);
  margin-inline: auto;
}

/* —— Ventaja: two-column split —— */
#ventaja.ventaja {
  background: #e9e6df; /* stone/surface alternate */
  padding-block: clamp(56px, 6vw, 88px);
}
.ventaja-split {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) 1px minmax(0, 1fr); /* ~55% / ~45% */
  gap: 0 clamp(28px, 3.5vw, 48px);
  align-items: stretch;
}
.ventaja-col--statements {
  max-width: none;
}
.ventaja-col--copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: none;
  padding-block: 8px;
}
.ventaja-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(91, 42, 8, .14);
}
.ventaja-quiet {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.35;
  letter-spacing: -.015em;
  color: #6c4021; /* muted brown ≥AA */
}
.ventaja-quiet + .ventaja-quiet {
  margin-bottom: 0;
}
.ventaja-emphasis {
  margin: clamp(36px, 4.5vw, 56px) 0 0;
  font-family: var(--serif);
  font-size: clamp(34px, 3.6vw, 52px); /* ~3 lines @1440 */
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--ink-brand);
  font-weight: 400;
  text-wrap: balance;
  text-align: left;
}
.ventaja-body {
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.ventaja-body strong {
  font-weight: 600;
  color: var(--ink);
}
.ventaja-rule {
  width: 40px;
  height: 1px;
  margin: 28px 0 22px;
  background: rgba(91, 42, 8, .18);
}
.ventaja-close {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.55;
  color: #4a4842;
}
.ventaja-close--strong {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--ink-brand);
}
.ventaja-close--strong strong {
  font-weight: 400;
}
@media (max-width: 900px) {
  .ventaja-split {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ventaja-divider {
    display: none;
  }
  .ventaja-col--statements,
  .ventaja-col--copy {
    max-width: none;
  }
  .ventaja-emphasis {
    margin-top: 28px;
    font-size: clamp(28px, 7vw, 38px);
  }
  .ventaja-body,
  .ventaja-close {
    font-size: 16.5px;
  }
  .ventaja-close--strong {
    font-size: clamp(20px, 5vw, 24px);
  }
  .ventaja-rule {
    margin: 22px 0 18px;
  }
}

/* —— Propietarios: copy + decorative rings —— */
#propietarios.propietarios {
  background: #f1eee6; /* ivory — after ventaja #e9e6df */
  overflow: hidden; /* rings bleed right */
  position: relative;
  padding-block: clamp(56px, 6vw, 88px);
}
.propietarios-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  position: relative;
  /* Copy drives height; rings sit absolute and bleed right */
  min-height: clamp(280px, 36vw, 420px);
}
.propietarios-col--copy {
  position: relative;
  z-index: 1;
  max-width: min(36em, 58%);
  padding-right: 24px;
}
#propietarios #propietarios-title {
  margin: 0 0 22px;
  max-width: 14em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.2vw, 44px); /* ~3 lines */
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--ink-brand);
  text-wrap: balance;
  text-align: left;
}
.propietarios-body {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 560px;
}
.propietarios-body--lead {
  margin-bottom: 0;
  color: #4a4842;
}
.propietarios-rule {
  width: 40px;
  height: 1px;
  margin: 22px 0 16px;
  background: var(--accent, #a25a18);
}
.propietarios-emphasis {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--ink-brand);
  max-width: 22em;
  text-wrap: balance;
}
.propietarios-emphasis strong { font-weight: 400; }
.propietarios-col--graphic {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Closer to copy — less off-edge bleed */
  right: calc(-1 * clamp(12px, 2vw, 40px) - 2%);
  width: clamp(480px, 38vw, 560px);
  height: clamp(480px, 38vw, 560px);
  margin-block: auto;
  pointer-events: none;
  z-index: 0;
  opacity: .72;
}
.propietarios-rings {
  display: block;
  width: 100%;
  height: auto;
}
/* Opacity-only reveal so .reveal’s translateY doesn’t fight vertical centering */
#propietarios .propietarios-col--graphic.reveal {
  transform: none;
  transition: opacity .7s var(--ease, cubic-bezier(.2, .7, .2, 1));
}
@media (prefers-reduced-motion: reduce) {
  #propietarios .propietarios-col--graphic.reveal {
    opacity: 1;
    transition: none;
  }
}
@media (max-width: 900px) {
  #propietarios.propietarios {
    overflow: visible;
  }
  .propietarios-split {
    min-height: 0;
  }
  .propietarios-col--copy {
    max-width: none;
    padding-right: 0;
  }
  #propietarios #propietarios-title {
    margin-bottom: 18px;
    font-size: clamp(26px, 7vw, 34px);
    max-width: none;
  }
  .propietarios-body {
    font-size: 16.5px;
    max-width: none;
  }
  .propietarios-emphasis {
    font-size: clamp(20px, 5vw, 24px);
    max-width: none;
  }
  .propietarios-col--graphic {
    display: none; /* keep calm stacked mobile; graphic is desktop presence */
  }
}

/* —— Validación: slim horizontal band —— */
#validacion.validacion {
  background: var(--ivory);
  padding-block: 0; /* height comes from the band */
}
.validacion-shell {
  border-top: 1px solid rgba(91, 42, 8, .14);
  border-bottom: 1px solid rgba(91, 42, 8, .14);
  padding-block: clamp(28px, 3.5vw, 40px);
  min-height: 0;
  /* Band target ~220–260px including soon line */
  max-height: none;
}
.validacion-row {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
#validacion #validacion-title {
  margin: 0;
  max-width: 10em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--ink-brand);
  text-wrap: balance;
  text-align: left;
}
.validacion-lede {
  margin: 0;
  max-width: 520px;
  justify-self: end;
  font-size: clamp(17px, 1.15vw, 18px);
  line-height: 1.65;
  color: var(--ink-soft);
  text-wrap: balance;
}
.validacion-lede strong {
  font-weight: 600;
  color: var(--ink);
}
.validacion-soon {
  margin: 18px 0 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #4a4842;
  text-align: left; /* under the H2 column */
}
/* Kept in markup (hidden) for future press logos — do not paint */
.validacion-press[hidden] {
  display: none !important;
}
.validacion-press {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  max-width: 1040px;
  margin-inline: auto;
}
.validacion-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(233, 230, 223, .45);
}
.validacion-slot span {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #4a4842;
  text-align: center;
}
@media (max-width: 900px) {
  .validacion-shell {
    padding-block: 36px;
  }
  .validacion-row {
    grid-template-columns: 1fr;
    gap: 16px;
    min-height: 0;
  }
  #validacion #validacion-title {
    font-size: clamp(28px, 7.5vw, 36px);
    max-width: none;
  }
  .validacion-lede {
    justify-self: start;
    max-width: none;
    font-size: clamp(15.5px, 3.8vw, 16px);
  }
  .validacion-soon {
    margin-top: 20px;
  }
  .validacion-press {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .validacion-slot { min-height: 72px; border-radius: 14px; }
}

/* —— Cierre — quieter last word —— */
#cierre.final-cta {
  text-align: center;
  padding-block: clamp(72px, 8vw, 112px) clamp(64px, 7vw, 96px);
  position: relative;
}
/* Soften radial glow so the surface stays calm */
#cierre.final-cta::before {
  background: radial-gradient(58% 40% at 50% 55%, rgba(162, 90, 24, .06) 0%, transparent 80%);
  opacity: 1;
}
#cierre.final-cta::after {
  opacity: .28;
}
#cierre .container-narrow {
  max-width: 720px;
}
#cierre #cta-title,
#cierre .display,
#cierre .display--large {
  margin: 0 auto;
  max-width: 20em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 52px);
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--ink-brand);
  text-wrap: balance;
}
.cierre-tagline {
  margin: 20px auto 0;
  max-width: 30em;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.4;
  letter-spacing: -.01em;
  color: #6f5a4b; /* muted brown */
  text-wrap: balance;
}
.cierre-tagline strong {
  font-weight: 400;
  font-style: italic;
  color: inherit;
}
#cierre .lede {
  margin: 28px auto 0;
  max-width: 560px;
  font-family: var(--sans);
  font-size: clamp(17px, 1.15vw, 18px);
  line-height: 1.65;
  color: var(--ink-soft);
  text-wrap: balance;
}
#cierre .lede strong {
  font-weight: 600;
  color: var(--ink);
}
.cierre-question {
  margin: 32px auto 0;
  max-width: 22em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--ink-brand);
  text-wrap: balance;
}
.cierre-question strong {
  font-weight: 400;
  color: inherit;
}
#cierre .line-button,
#cierre .line-button--dark {
  margin-top: 36px;
}
.cierre-note {
  margin: 16px auto 0;
  max-width: 460px;
  font-size: clamp(13.5px, 1vw, 14px);
  line-height: 1.55;
  color: #4a4842;
  text-wrap: balance;
}
/* Mobile only — desktop (>=901px) rules above stay untouched */
@media (max-width: 900px) {
  #cierre.final-cta {
    padding-block: 56px 52px;
  }
  #cierre.final-cta::before {
    background: radial-gradient(58% 40% at 50% 55%, rgba(162, 90, 24, .04) 0%, transparent 80%);
  }
  #cierre.final-cta::after {
    opacity: .18;
  }
  #cierre .container-narrow {
    width: 100%;
    max-width: 34em;
    padding-inline: clamp(28px, 9vw, 44px);
    box-sizing: border-box;
  }
  #cierre #cta-title,
  #cierre .display,
  #cierre .display--large {
    margin: 0 auto;
    max-width: 17em;
    font-size: clamp(25px, 6.4vw, 30px);
    line-height: 1.16;
    letter-spacing: -.02em;
    text-wrap: balance;
  }
  .cierre-tagline {
    margin: 14px auto 0;
    max-width: 26em;
    font-size: 15.5px;
    line-height: 1.5;
    color: #7a6556;
    text-wrap: balance;
  }
  #cierre .lede {
    margin: 22px auto 0;
    max-width: 27em;
    font-size: 15px;
    line-height: 1.65;
    color: #5f5148;
    text-wrap: balance;
  }
  #cierre .lede strong {
    font-weight: 600;
    color: #5f5148; /* same as paragraph — no extra contrast */
  }
  .cierre-question {
    margin: 28px auto 0;
    max-width: 18em;
    font-size: 20px;
    line-height: 1.3;
    color: var(--ink-brand);
    text-wrap: balance;
  }
  #cierre .line-button,
  #cierre .line-button--dark {
    margin-top: 30px;
    width: auto;
    min-width: 240px;
    max-width: 280px;
    padding: 14px 26px;
    font-size: 12.5px;
    white-space: normal;
    justify-content: center;
  }
  .cierre-note {
    margin: 14px auto 0;
    max-width: 24em;
    font-size: 12px;
    line-height: 1.5;
    text-wrap: balance;
  }
}

/* Bridge now lands on #top1 (stone), not #resultados */
.page-flow #top1.top1 {
  margin-top: -2px;
}

/* —— Resultados header: centered like #top1 / #vsl —— */
#resultados .results-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 42em;
  margin-inline: auto;
  margin-bottom: clamp(40px, 5vw, 64px);
}
#resultados .results-intro .section-kicker {
  margin-bottom: 16px;
}
#resultados .results-intro .display,
#resultados .results-intro .display--medium,
#resultados .results-intro h2 {
  max-width: 18em;
  margin-inline: auto;
  text-wrap: balance;
}
#resultados .results-intro .lede {
  margin: 18px auto 0;
  max-width: 40ch;
  text-align: center;
}
@media (max-width: 900px) {
  #resultados .results-intro {
    margin-bottom: 32px;
  }
  #resultados .results-intro .lede {
    max-width: none;
  }
}

/* —— Equipo bottom air into #firma —— */
#equipo.team.section,
#equipo.team.section--stone {
  padding-bottom: clamp(56px, 6vw, 88px);
}