/* ═══════════════════════════════════════════════════════════════════════
   Palatino · landing · v10 — pivot estético OpenAI Deployment
   Editorial sénior: blanco, negro, grises neutros. Cero acento cromático.
   Tipografía protagonista, fotografía+diagrama como única decoración.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Fondos · blanco/casi-blanco + caja gris (componente PPT) */
  --bg-primary:        #FFFFFF;
  --bg-soft:           #FAFAFA;
  --bg-elevated:       #FFFFFF;
  --bg-box:            #0000000a; /* caja gris · negro 4% sobre blanco */

  /* Texto · negro tinta + grises neutros */
  --text-primary:      #0A0A0A;
  --text-secondary:    #6B6B6B;
  --text-faint:        #9C9C9C;
  --text-decor:        #D4D4D4;

  /* Bordes · grises neutros */
  --border-light:      #E5E5E5;
  --border-mute:       #F0F0F0;

  /* Tipografía · Manrope (Google Fonts) con fallbacks · Calibri nativo Windows · Inter Tight final */
  --f-display: "Manrope", "Calibri", "Inter Tight", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --f-body:    "Manrope", "Calibri", "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --f-serif:   "Source Serif 4", "Source Serif Pro", Georgia, serif;

  /* Espaciado 8px */
  --s-1:  4px;  --s-2:  8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px; --s-11: 160px;

  /* Layout */
  --container:         1280px;
  --container-narrow:  1080px;
  --container-text:     720px;
  --header-h:            56px;
  --radius-sm:            4px;
  --radius-md:            8px;
  --radius-lg:           12px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 320ms;
  --dur-slow: 720ms;
}

/* ─── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  overflow-x: clip;
}
body {
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }

::selection { background: var(--text-primary); color: var(--bg-primary); }

/* ─── A11y ───────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100px; left: var(--s-4);
  background: var(--text-primary); color: var(--bg-primary);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--radius-sm);
  z-index: 100;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-4); }

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

:focus-visible {
  outline: 2px solid var(--text-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.page { overflow-x: clip; }

/* ─── Typography primitives ──────────────────────────────────────────── */
.display {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(2.5rem, 5vw + 0.5rem, 4.75rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--text-primary);
}
.display--md { font-size: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); }

.h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.875rem, 3vw + 0.5rem, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.h3 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 0.8vw + 1rem, 1.625rem);
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--text-primary);
}

em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.lede {
  font-size: clamp(1.0625rem, 0.4vw + 0.95rem, 1.25rem);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: var(--container-text);
}

.caption {
  display: inline-block;
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ─── Buttons & links ────────────────────────────────────────────────── */
/* CTA pill negro · consistente con el header pero invertido */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 12px 24px;
  border-radius: 999px;
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--dur) var(--ease);
}
.btn svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.btn:hover svg { transform: translateX(2px); }

.btn--primary {
  background: var(--text-primary);
  color: var(--bg-primary);
}
.btn--primary:hover { background: #1F1F1F; }

.btn--lg { padding: 14px 28px; font-size: 15.5px; }

.link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-display);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-primary);
  position: relative;
}
.link svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.link--arrow:hover svg { transform: translateX(3px); }
.link::after {
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 1px; background: var(--text-primary);
  transform: scaleX(0); transform-origin: right center;
  transition: transform var(--dur) var(--ease);
}
.link:hover::after { transform: scaleX(1); transform-origin: left center; }

/* ════════════════════════════════════════════════════════════════════════
   SITE HEADER · sticky con bg al hacer scroll
   ════════════════════════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-light);
}
.site-header.is-scrolled {
  background: var(--bg-primary);
}

.nav {
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  height: 56px;
}
.nav__left {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  height: 100%;
}
.wordmark {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

/* Menú principal · items con megamenú al hover */
.nav__menu {
  display: none;
  align-items: center;
  gap: var(--s-5);
  list-style: none;
  height: 100%;
  margin: 0; padding: 0;
}
.nav__item {
  display: flex;
  align-items: center;
  height: 100%;
}
/* Hover-bridge: el item con panel extiende su área hover hacia abajo con padding,
   compensado por margin negativo para no romper el layout vertical del nav.
   Así el cursor puede transitar del trigger al panel sin perder hover. */
.nav__item:has(.nav__panel) {
  padding-bottom: 22px;
  margin-bottom: -22px;
}
.nav__trigger {
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 200ms var(--ease);
  letter-spacing: -0.005em;
}
.nav__trigger:hover,
.nav__trigger[aria-expanded="true"] {
  color: var(--text-primary);
}

/* Botones pill · derecha */
.nav__right {
  display: none;
  align-items: center;
  gap: var(--s-2);
}
.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #F0F0F0;
  color: var(--text-primary);
  font-family: var(--f-display);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap;
}
.nav-pill:hover { background: #E5E5E5; }
.nav-pill svg { width: 12px; height: 12px; flex-shrink: 0; }
.nav-pill--solid {
  background: var(--text-primary);
  color: var(--bg-primary);
}
.nav-pill--solid:hover { background: #1F1F1F; }

/* Hablemos del header: limpio, solo texto, sin fondo.
   El drawer móvil mantiene la versión solid completa para presencia. */
.nav__right .nav-pill--solid {
  background: transparent;
  color: var(--text-primary);
  padding: 8px 4px 8px 12px;
}
.nav__right .nav-pill--solid:hover {
  background: transparent;
  color: var(--text-secondary);
}

/* Burger button · solo en móvil */
.nav__burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 8px;
}
.nav__burger span {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--text-primary);
  transition: transform 200ms ease, opacity 200ms ease;
}

/* ─── Megamenú panel · full-bleed bajo el header ─── */
.nav__panel {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-light);
  box-shadow: 0 24px 48px -8px rgba(10,10,10,0.10), 0 8px 16px -4px rgba(10,10,10,0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 220ms var(--ease),
    transform 220ms var(--ease),
    visibility 0ms 220ms;
  pointer-events: none;
  z-index: 40;
}
.nav__item:hover > .nav__panel,
.nav__item:focus-within > .nav__panel,
.nav__item.is-open > .nav__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity 220ms var(--ease),
    transform 220ms var(--ease),
    visibility 0ms 0ms;
}
.nav__panel-wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-7) var(--s-7);
  display: grid;
  gap: var(--s-7);
}
/* Enlace "ver todos" oculto en megamenu — el propio trigger ahora navega al landing */
.nav__panel-top { display: none; }
.nav__panel-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: var(--s-7) var(--s-8);
}
.nav-col {
  display: flex; flex-direction: column;
}
/* Título-corto de columna (PARA EMPEZAR / PARA ESCALAR…) — protagonista del megamenu */
.nav-col__h {
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #6b6b6b);
  margin: 0 0 var(--s-5);
}
/* Subtítulo descriptivo oculto en megamenu desktop · sigue disponible en drawer móvil */
.nav__panel .nav-col__desc { display: none; }
.nav-col__desc {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.4;
  margin: 0 0 var(--s-5);
  max-width: 24ch;
}
.nav-col ul {
  display: flex; flex-direction: column;
  gap: 14px;
  margin: 0 0 var(--s-5);
  padding: 0;
  list-style: none;
}
.nav-col a {
  font-family: var(--f-display);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  line-height: 1.3;
  transition: color 200ms;
  display: block;
}
.nav-col a:hover {
  color: var(--text-secondary);
  text-decoration: none;
}
/* Descriptor del servicio bajo el nombre en submenú */
.nav-col__service { display: block; }
.nav-col__desc-inline {
  display: block;
  font-family: var(--f-body);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-secondary);
  letter-spacing: 0;
  margin-top: 4px;
  line-height: 1.35;
  text-decoration: none !important;
}
/* Solo el nombre del servicio se subraya en hover, no la descripción */
.nav-col a:hover .nav-col__service {
  text-decoration: underline;
  text-underline-offset: 4px;
}
/* Ocultar descriptores en el footer · solo aparecen en el megamenú del header */
.footer__col .nav-col__desc-inline { display: none; }
.nav-col__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: -0.005em;
  transition: color 200ms;
}
.nav-col__more:hover { color: var(--text-primary); }
.nav-col__more svg { width: 12px; height: 12px; transition: transform 200ms; }
.nav-col__more:hover svg { transform: translateX(2px); }

/* ─── Mobile drawer · pantalla completa ─── */
.nav-drawer {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  z-index: 60;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 0ms 300ms;
  overflow-y: auto;
}
.nav-drawer.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 300ms ease, visibility 0ms 0ms;
}
.nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;             /* idéntica a la nav, evita salto visual del wordmark */
  padding: 0 var(--s-5);    /* mismo gutter horizontal que la nav */
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}
.nav-drawer__close {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 0;
  color: var(--text-primary);
  cursor: pointer;
}
.nav-drawer__body {
  flex: 1;
  padding: var(--s-3) var(--s-5);
}
.nav-drawer__item {
  border-bottom: 1px solid var(--border-light);
}
.nav-drawer__item > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-5) 0;
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--text-primary);
  cursor: pointer;
}
.nav-drawer__item > summary::-webkit-details-marker { display: none; }
.nav-drawer__item > summary svg {
  flex-shrink: 0;
  transition: transform 200ms ease;
  color: var(--text-secondary);
}
.nav-drawer__item[open] > summary svg { transform: rotate(180deg); }
.nav-drawer__content {
  padding: 0 0 var(--s-5);
  display: flex; flex-direction: column;
  gap: var(--s-3);
}
/* Ocultos en drawer móvil · listado plano sin sub-cabeceras */
.nav-drawer__content .nav-col__h { display: none; }
.nav-drawer__content ul {
  display: flex; flex-direction: column;
  gap: var(--s-3);
  margin: 0 0 var(--s-4);
  padding: 0;
  list-style: none;
}
.nav-drawer__content ul:last-child { margin-bottom: 0; }
.nav-drawer__content a {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.nav-drawer__content .nav-col__more {
  margin-top: var(--s-3);
}
.nav-drawer__foot {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
}
.nav-drawer__foot .nav-pill {
  justify-content: center;
  width: 100%;
  padding: 14px 20px;
  font-size: 15px;
}

/* Body scroll-lock cuando drawer abierto */
body.is-drawer-open { overflow: hidden; }

/* ════════════════════════════════════════════════════════════════════════
   HERO · sin halos, sin atmósfera, blanco editorial
   ════════════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-5);
}

.hero__body {
  padding: var(--s-8) 0 var(--s-7);
  text-align: center;
}
.hero__body .caption { margin-bottom: var(--s-5); }
.hero__body .display {
  margin: 0 auto;
  max-width: 17ch;
}
.hero__body .lede {
  margin: var(--s-6) auto 0;
  text-align: center;
  max-width: 640px;
}
.hero__ctas {
  margin-top: var(--s-7);
  display: inline-flex;
  align-items: center;
  gap: var(--s-7);
  flex-wrap: wrap;
  justify-content: center;
}

/* Stage = solo contenedor del video. Sin halos, sin sombra dramática. */
.hero__stage {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 auto var(--s-7);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid var(--border-light);
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--bg-soft);
}

/* ════════════════════════════════════════════════════════════════════════
   SOCIAL PROOF · plano, sin diferenciación cromática
   ════════════════════════════════════════════════════════════════════════ */
.social-proof {
  text-align: center;
}
.social-proof__wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-9) var(--s-5);
}
.social-proof .caption {
  display: block;
  margin: 0 auto var(--s-8);
}
.logo-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-6) var(--s-5);
  align-items: center;
  justify-items: center;
}
.logo-strip li { display: flex; align-items: center; }
.logo-placeholder {
  width: 100%;
  max-width: 150px;
  height: auto;
  filter: grayscale(100%);
  opacity: 0.65;
  transition: opacity 200ms ease;
}
.logo-placeholder:hover { opacity: 1; }

/* ════════════════════════════════════════════════════════════════════════
   SECCIONES · base editorial
   ════════════════════════════════════════════════════════════════════════ */
.section {
  margin: 0 auto;
  max-width: var(--container);
  padding: var(--s-10) var(--s-5);
}
.section__head {
  max-width: var(--container-text);
  margin: 0 auto var(--s-9);
  text-align: center;
}
.section__head .caption { margin-bottom: var(--s-4); }
.section__head .section__lede {
  margin: var(--s-5) auto 0;
  text-align: center;
}
.section__head--split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  text-align: left;
}
.section__head--split .section__lede { text-align: left; margin-top: 0; }

/* ─── El reto · números pequeños, no decorativos ──────────────────────── */
.problems {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--border-light);
}
.problem {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  padding: var(--s-7) 0;
  border-bottom: 1px solid var(--border-light);
}
.problem__n {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.10em;
  color: var(--text-faint);
}
.problem .h3 { font-weight: 500; }
.problem p { color: var(--text-secondary); max-width: 60ch; }

/* ════════════════════════════════════════════════════════════════════════
   CÓMO TRABAJAMOS · bloques alternados (no más sección dark)
   ════════════════════════════════════════════════════════════════════════ */
.approach-blocks {
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
}
.approach-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  align-items: center;
}
.approach-block__visual {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-soft);
}
.approach-block__visual svg {
  width: 100%; height: 100%;
  display: block;
}
.approach-block__text {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.approach-block__n {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.10em;
  color: var(--text-faint);
}
.approach-block__text .h3 { max-width: 16ch; }
.approach-block__text p {
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 52ch;
}

/* ════════════════════════════════════════════════════════════════════════
   CASO DESTACADO · card horizontal grande, sin KPIs gigantes
   ════════════════════════════════════════════════════════════════════════ */
.case-study {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-10) var(--s-5);
}
.case-study__head {
  max-width: var(--container-text);
  margin: 0 auto var(--s-9);
  text-align: center;
}
.case-study__head .caption { display: block; margin-bottom: var(--s-4); }
.case-study__head .h2 { max-width: 26ch; margin: 0 auto; }
.case-study__sub {
  margin-top: var(--s-4);
  font-size: clamp(0.95rem, 0.35vw + 0.85rem, 1.0625rem);
  color: var(--text-secondary);
}

.case-study__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  align-items: center;
}
.case-study__video {
  position: relative;
  width: 100%;
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid var(--border-light);
}
.case-study__video iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.case-study__text {
  display: flex; flex-direction: column;
  justify-content: center;
  gap: var(--s-4);
}
.case-study__desc {
  color: var(--text-secondary);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.6;
  max-width: 50ch;
}
.case-study__cta { align-self: flex-start; }

/* KPIs del caso · 3 cajas grises en horizontal (desktop), apiladas en mobile */
.case-kpis {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  padding: 0;
  margin: 0;
  border: 0;
}
@media (min-width: 768px) {
  .case-kpis {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-3);
  }
}
.case-kpi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  background: var(--bg-box);
  border-radius: var(--radius-md);
  padding: var(--s-5) var(--s-4);
}
.case-kpi__num {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 0.8vw + 1.2rem, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--text-primary);
}
.case-kpi__label {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.35;
}

/* ════════════════════════════════════════════════════════════════════════
   IMPLANTACIÓN · curva refinada
   ════════════════════════════════════════════════════════════════════════ */
.deployment {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  align-items: start;
}
.deployment__chart {
  padding: var(--s-5);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
}
.deployment__chart svg { width: 100%; height: auto; }
.deployment__chart figcaption {
  margin-top: var(--s-4);
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  border-top: 1px solid var(--border-light);
  padding-top: var(--s-4);
}

.phases { display: grid; gap: 0; border-top: 1px solid var(--border-light); }
.phase {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--s-6);
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--border-light);
  align-items: start;
}
.phase__n {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.10em;
  color: var(--text-faint);
  padding-top: 4px;
  min-width: 2.5ch;
}
.phase__content { display: flex; flex-direction: column; gap: var(--s-2); }
.phase__week {
  font-family: var(--f-display);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.phase__content .h3 { font-size: clamp(1.1875rem, 0.4vw + 1.1rem, 1.4375rem); }
.phase__content p { color: var(--text-secondary); max-width: 60ch; }

/* ════════════════════════════════════════════════════════════════════════
   PROMESA · tres KPIs grandes con separadores finos
   ════════════════════════════════════════════════════════════════════════ */
.kpis {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  border-top: 1px solid var(--border-light);
  padding-top: var(--s-9);
}
.kpi {
  position: relative;
  display: flex; flex-direction: column;
  gap: var(--s-3);
}
.kpi__caption {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.kpi__num {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(3.5rem, 4vw + 1rem, 4.5rem);
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--text-primary);
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}
.kpi__num small {
  font-size: 0.45em;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-left: 6px;
  align-self: flex-start;
  margin-top: 0.3em;
}
/* prefijo (< en <8, + en 3+) · mismo tamaño que el número, color secundario */
.kpi__prefix {
  color: var(--text-secondary);
  font-weight: 500;
}
.kpi__desc {
  font-size: 15.5px;
  color: var(--text-secondary);
  line-height: 1.6;
  max-width: 38ch;
}

/* ════════════════════════════════════════════════════════════════════════
   LEAD MAGNET · grid 2 cols (texto izq + visual editorial der)
   ════════════════════════════════════════════════════════════════════════ */
.lead-magnet {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--s-10) var(--s-5);
}
.lead-magnet__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  align-items: center;
}
.lead-magnet__content {
  display: flex; flex-direction: column;
  gap: var(--s-4);
  order: 2;  /* móvil: visual primero, texto después */
}
.lead-magnet__content .caption {
  display: block;
  margin-bottom: var(--s-2);
}
.lead-magnet__content .h2 {
  max-width: 18ch;
  margin-bottom: var(--s-3);
}
.lead-magnet__content > p {
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 50ch;
}
.lead-magnet__content p.muted {
  color: var(--text-faint);
  font-style: italic;
  font-size: 14.5px;
  margin-top: var(--s-1);
}
.lead-magnet__content .link {
  margin-top: var(--s-4);
  align-self: flex-start;
}
.lead-magnet__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-soft);
  order: 1;
}
.lead-magnet__visual svg {
  width: 100%; height: 100%;
  display: block;
}

/* ════════════════════════════════════════════════════════════════════════
   FAQ · grid 2 cols (head izq + acordeón der)
   ════════════════════════════════════════════════════════════════════════ */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
}
.faq-grid__head {
  display: flex; flex-direction: column;
  gap: var(--s-4);
}
.faq-grid__head .caption {
  display: block;
  margin-bottom: var(--s-2);
}
.faq-grid__head .h2 { max-width: 14ch; }
.faq-grid__head .lede { max-width: 38ch; }

.faq { border-top: 1px solid var(--border-light); }
.faq__item { border-bottom: 1px solid var(--border-light); }
.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-7) 0;
  transition: padding var(--dur) var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__q {
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 0.4vw + 0.95rem, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--text-primary);
}
.faq__icon {
  flex-shrink: 0;
  color: var(--text-primary);
  transition: transform var(--dur) var(--ease);
}
.faq__item[open] .faq__icon { transform: rotate(180deg); }
.faq__a { overflow: hidden; padding: 0 0 var(--s-7); }
.faq__a p {
  max-width: 70ch;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.65;
}
/* Enlaces inline en cualquier contexto editorial de prosa · excluyendo botones */
.faq__a a:not(.btn),
.partner-prose a:not(.btn),
.about-prose a:not(.btn),
.about-pos a:not(.btn),
.about-principle__body a:not(.btn),
.art-prose a:not(.btn),
.pp-paragraphs a:not(.btn) {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: 500;
  transition: text-decoration-thickness 200ms var(--ease);
}
.faq__a a:not(.btn):hover,
.partner-prose a:not(.btn):hover,
.about-prose a:not(.btn):hover,
.about-pos a:not(.btn):hover,
.about-principle__body a:not(.btn):hover,
.art-prose a:not(.btn):hover,
.pp-paragraphs a:not(.btn):hover { text-decoration-thickness: 2px; }
.faq__item:hover summary { padding-inline-start: 6px; }

/* ════════════════════════════════════════════════════════════════════════
   CTA final · centrado editorial, sin atmósfera
   ════════════════════════════════════════════════════════════════════════ */
.cta-final {
  max-width: var(--container-text);
  margin: 0 auto;
  padding: var(--s-11) var(--s-5);
  text-align: center;
}
.cta-final .caption { margin-bottom: var(--s-5); }
.cta-final .display { margin: 0 auto; max-width: 20ch; }
.cta-final .lede { margin: var(--s-6) auto var(--s-8); text-align: center; max-width: 540px; }

/* ════════════════════════════════════════════════════════════════════════
   FOOTER · fondo claro coherente, sin disonancia
   ════════════════════════════════════════════════════════════════════════ */
.footer {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-top: 1px solid var(--border-light);
}
.footer a { color: inherit; }
.footer__wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-5);
}

/* Zona 1 · brand + compliance + redes sociales */
.footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-7) 0;
  border-bottom: 1px solid var(--border-light);
}
.footer__brand { display: flex; align-items: center; }
.footer__top-wordmark {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.022em;
  color: var(--text-primary);
}
.footer__compliance {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
}
/* Sello compliance · solo icono + texto, sin pill con borde */
.compliance-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}
.compliance-icon {
  width: 14px; height: 14px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* Iconos sociales · círculo con borde claro */
.footer__social {
  display: flex;
  gap: var(--s-3);
}
.footer__social a {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-light);
  border-radius: 50%;
  background: var(--bg-primary);
  color: var(--text-secondary);
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.footer__social a:hover {
  color: var(--text-primary);
  border-color: var(--text-primary);
}

/* Zona 2 · nav grid */
.footer__nav-wrap {
  position: relative;
  padding: var(--s-8) 0 var(--s-7);
  border-bottom: 1px solid var(--border-light);
}
.footer__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-7) var(--s-5);
}
.footer__col-h {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  letter-spacing: 0.02em;
  margin-bottom: var(--s-4);
}
.footer__col ul {
  display: flex; flex-direction: column;
  gap: 10px;
}
.footer__col a {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.6;
  transition: color 200ms ease;
}
.footer__col a:hover { color: var(--text-primary); }

/* Zona 3 · oficinas */
.footer__offices {
  text-align: center;
  padding: var(--s-7) 0;
  border-bottom: 1px solid var(--border-light);
}
.footer__offices-caption {
  font-family: var(--f-display);
  font-size: 12px;
  color: var(--text-faint);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.footer__offices-list {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Zona 4 · legal */
.footer__legal {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5) 0;
  font-size: 12px;
  color: var(--text-faint);
}

/* ════════════════════════════════════════════════════════════════════════
   Reveal animation · progressive enhancement
   ════════════════════════════════════════════════════════════════════════ */
.js-ready [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.js-ready [data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto !important; }
  .hero__video { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════
   Desktop (≥768px)
   ════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .nav { padding: 12px var(--s-7); }

  .hero { padding: 0 var(--s-7); }
  .hero__body { padding: var(--s-10) 0 var(--s-9); }
  .hero__stage {
    max-width: 92%;
    margin: 0 auto var(--s-9);
  }

  .social-proof__wrap { padding: var(--s-10) var(--s-7); }
  .logo-strip { grid-template-columns: repeat(5, 1fr); gap: var(--s-8); }

  .section { padding: var(--s-11) var(--s-7); }
  .section__head { margin-bottom: var(--s-10); }
  .section__head--split {
    grid-template-columns: 1.2fr 1fr;
    align-items: end;
    gap: var(--s-8);
    text-align: left;
  }

  /* El reto · 2 cols editorial */
  .problems { grid-template-columns: 1fr 1fr; column-gap: var(--s-9); }
  .problems .problem:nth-child(1),
  .problems .problem:nth-child(2) { padding-top: var(--s-7); }

  /* Cómo trabajamos · bloques alternados */
  .approach-blocks { gap: var(--s-11); }
  .approach-block {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-9);
  }
  .approach-block--reverse {
    direction: rtl;
  }
  .approach-block--reverse > * { direction: ltr; }

  /* Caso destacado · 16:9 video + texto */
  .case-study { padding: var(--s-11) var(--s-7); }
  .case-study__body {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--s-9);
  }

  /* Implantación */
  .deployment {
    grid-template-columns: 1fr 1.1fr;
    gap: var(--s-9);
  }
  .deployment__chart { position: sticky; top: calc(var(--header-h) + 16px); }

  /* Promesa KPIs · 3 cols con separadores verticales 60% altura */
  .kpis {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--s-7);
    padding-top: var(--s-10);
  }
  .kpi:not(:first-child)::before {
    content: ""; position: absolute;
    left: calc(var(--s-7) * -0.5); top: 20%; bottom: 20%;
    width: 1px; background: var(--border-light);
  }

  /* Lead magnet · grid 2 cols 1:1 con visual derecha */
  .lead-magnet { padding: var(--s-11) var(--s-7); }
  .lead-magnet__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-9);
  }
  .lead-magnet__content { order: 0; }
  .lead-magnet__visual { order: 0; }

  /* FAQ · grid 40/60 head izq + acordeón der */
  .faq-grid {
    grid-template-columns: 2fr 3fr;
    gap: var(--s-9);
    align-items: start;
  }

  /* CTA final */
  .cta-final { padding: var(--s-11) var(--s-7); }

  /* Footer */
  .footer__wrap { padding: 0 var(--s-7); }
  .footer__top {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--s-7);
  }
  .footer__compliance { flex-wrap: nowrap; }
  .footer__nav { grid-template-columns: repeat(3, 1fr); }
  .footer__legal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

@media (min-width: 1024px) {
  .hero__body .display { max-width: 16ch; }
  .deployment__chart { padding: var(--s-7); }
  .footer__nav { grid-template-columns: repeat(6, 1fr); }

  /* Header desktop · menú megamenú + pills · oculta burger */
  .nav__menu { display: inline-flex; }
  .nav__right { display: inline-flex; }
  .nav__burger { display: none; }
}

/* ─── Cards de referencia (galería + páginas de detalle relacionadas) ─── */
.ref-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-7) var(--s-6);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
  transition: border-color 220ms var(--ease);
  text-decoration: none;
  color: inherit;
  min-height: 280px;
}
.ref-card:hover { border-color: var(--text-primary); }
img.ref-card__logo {
  height: 44px; width: auto; max-width: 160px;
  object-fit: contain; object-position: left center;
  align-self: flex-start;
}
span.ref-card__logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 6px;
  background: var(--text-primary); color: var(--bg-primary);
  font-family: var(--f-display); font-size: 20px; font-weight: 600;
  letter-spacing: -0.02em; flex-shrink: 0;
}
.ref-card__title {
  font-family: var(--f-display); font-size: 16.5px; font-weight: 600;
  line-height: 1.35; color: var(--text-primary); letter-spacing: -0.012em;
  margin: 0;
}
.ref-card__location {
  font-family: var(--f-display); font-size: 11.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted, #6b6b6b); margin: -10px 0 0;
}
.ref-card__more {
  margin-top: auto;
  font-family: var(--f-display); font-size: 13.5px; font-weight: 500;
  color: var(--text-primary); letter-spacing: -0.005em;
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 0;
}
.ref-card__more svg { width: 13px; height: 13px; transition: transform 220ms var(--ease); }
.ref-card:hover .ref-card__more svg { transform: translateX(3px); }

/* ─── Hero interno reusable (producto, referencias detail, recursos detail) ─── */
.hero--internal { padding: var(--s-7) 0 var(--s-9); }
.hero--internal .hero__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-9);
  align-items: stretch;
  min-height: 60vh;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--s-7);
  text-align: left;
}
.hero--internal__left {
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: var(--s-5) 0;
  min-height: 100%;
}
.hero--internal__top { display: flex; flex-direction: column; gap: var(--s-3); }
.hero--internal__bottom { display: flex; flex-direction: column; gap: var(--s-5); }
.hero--internal__top .caption { margin: 0; }
.hero--internal__bottom .display { margin: 0; max-width: none; text-align: left; }
.hero--internal__bottom .lede { margin: 0; text-align: left; max-width: 42ch; }
.hero--internal__image {
  background: var(--bg-box);
  border-radius: var(--radius-md);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
}
.hero--internal__image > * { position: absolute; inset: 0; }
.hero--internal__image img,
.hero--internal__image video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero--internal__image iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 880px) {
  .hero--internal .hero__body { grid-template-columns: 1fr; gap: var(--s-7); min-height: 0; }
  .hero--internal__image { min-height: 280px; order: -1; aspect-ratio: 16/10; }
  .hero--internal__left { padding: var(--s-3) 0; gap: var(--s-7); }
}

/* ─── Body 2-col reusable: prose + TOC sticky (recursos detail) ─── */
.art-body {
  max-width: var(--container); margin: 0 auto;
  padding: var(--s-7) var(--s-7) var(--s-9);
  display: grid; grid-template-columns: 1fr;
  gap: var(--s-7);
}
/* En responsive, el TOC aparece antes del contenido para que sea útil */
.art-body .art-toc { order: 1; }
.art-body .art-prose { order: 2; }
@media (min-width: 980px) {
  .art-body { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s-9); }
  .art-body .art-toc { order: 2; }
  .art-body .art-prose { order: 1; }
}
.art-prose { max-width: 64ch; }
.art-prose p { font-family: var(--f-display); font-size: 18px; line-height: 1.65; color: var(--text-primary); margin: 0 0 var(--s-6); }
.art-prose p.lead { font-size: 21px; line-height: 1.5; color: var(--text-primary); font-weight: 500; margin-bottom: var(--s-7); }
.art-prose h2 { font-family: var(--f-display); font-size: clamp(24px, 2.8vw, 32px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin: var(--s-9) 0 var(--s-5); scroll-margin-top: 100px; }
.art-prose h3 { font-family: var(--f-display); font-size: clamp(19px, 2.2vw, 23px); font-weight: 600; line-height: 1.3; letter-spacing: -0.012em; margin: var(--s-7) 0 var(--s-4); }
.art-prose ul { padding: 0; margin: 0 0 var(--s-6); list-style: none; }
.art-prose ul li { font-family: var(--f-display); font-size: 17px; line-height: 1.6; padding-left: 22px; position: relative; margin: 0 0 var(--s-3); }
.art-prose ul li::before { content: ""; position: absolute; left: 0; top: 12px; width: 8px; height: 1px; background: var(--text-primary); }
.art-prose blockquote { font-family: var(--f-serif); font-style: italic; font-weight: 600; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.35; color: var(--text-primary); margin: var(--s-9) 0; padding-left: var(--s-6); border-left: 2px solid var(--text-primary); max-width: 50ch; }

.art-toc { font-family: var(--f-display); }
@media (min-width: 980px) {
  .art-toc { position: sticky; top: 100px; align-self: start; max-height: calc(100vh - 120px); overflow-y: auto; }
}
.art-toc__caption { font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted, #6b6b6b); margin: 0 0 var(--s-5); padding-bottom: var(--s-3); border-bottom: 1px solid var(--border-light); }
.art-toc__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.art-toc__list a { font-size: 13.5px; line-height: 1.4; color: var(--text-muted); text-decoration: none; display: block; padding: 4px 0 4px 12px; border-left: 2px solid transparent; transition: color 180ms var(--ease), border-color 180ms var(--ease); }
.art-toc__list a:hover { color: var(--text-primary); }
.art-toc__list a.is-active { color: var(--text-primary); border-left-color: var(--text-primary); font-weight: 600; }

/* ─── Filter bar (Filtrar · Ordenar · Vista) — OpenAI-style ─── */
.filter-bar {
  display: flex; align-items: center; gap: var(--s-5);
  padding: 0 var(--s-7) var(--s-4);
  max-width: var(--container); margin: 0 auto;
  flex-wrap: wrap;
}
/* Reduce padding-top of the immediately-following grid section */
.filter-bar + .res-section { padding-top: 0 !important; }
.filter-bar__group { display: inline-flex; align-items: center; gap: var(--s-3); }
.filter-bar__group[hidden] { display: none !important; }
.filter-bar__group--right { margin-left: auto; }
.filter-bar__label {
  font-family: var(--f-display); font-size: 11.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted, #6b6b6b);
}
.filter-bar__select {
  appearance: none; -webkit-appearance: none;
  background-color: transparent;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  padding: 7px 34px 7px 14px;
  font-family: var(--f-display); font-size: 13px; font-weight: 500;
  color: var(--text-primary);
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'><path d='M4 6l4 4 4-4' fill='none' stroke='%230A0A0A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color 180ms var(--ease);
}
.filter-bar__select:hover,
.filter-bar__select:focus { border-color: var(--text-primary); outline: none; }
.filter-bar__view {
  display: inline-flex;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  overflow: hidden;
  padding: 2px;
}
.filter-bar__view-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 26px;
  border: 0; padding: 0;
  background: transparent; cursor: pointer;
  color: var(--text-muted, #6b6b6b);
  border-radius: 999px;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}
.filter-bar__view-btn:hover { color: var(--text-primary); }
.filter-bar__view-btn[aria-pressed="true"] {
  background: var(--text-primary);
  color: var(--bg-primary);
}
.filter-bar__view-btn svg { width: 14px; height: 14px; }

/* ─── List view (cuando .res-items tiene .is-list) ─── */
/* Columnas fijas: cada item alinea idéntico al de arriba */
.res-items.is-list {
  grid-template-columns: 1fr !important;
  gap: 0;
}
.res-items.is-list .res-item {
  display: grid !important;
  grid-template-columns: 160px minmax(0, 1.4fr) minmax(0, 1.8fr) 100px;
  align-items: baseline;
  gap: var(--s-6);
  min-height: 0;
  border-radius: 0;
  border-left: 0; border-right: 0; border-top: 0;
  padding: var(--s-5) var(--s-3);
  transform: none !important;
}
.res-items.is-list .res-item:hover {
  transform: none;
  border-color: var(--border-light);
  border-bottom-color: var(--text-primary);
}
.res-items.is-list .res-item__type {
  font-size: 11px;
  margin: 0;
}
.res-items.is-list .res-item__title {
  font-size: 16px;
  margin: 0;
}
.res-items.is-list .res-item__desc {
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.res-items.is-list .res-item__meta {
  font-size: 11px;
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ─── Hubs con fecha (articulos, webinars, informes, guías) ─── */
/* El tipo queda como metadata filtrable pero no visible */
.res-items--dated .res-item__type {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
/* Grid view: fecha arriba del título, "Leer más" debajo del extracto */
.res-items--dated .res-item:not(.is-list .res-item) {
  display: flex;
  flex-direction: column;
}
.res-items--dated .res-item__meta {
  order: 1;
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted, #6b6b6b);
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--s-2);
}
.res-items--dated .res-item__title { order: 2; }
.res-items--dated .res-item__desc  { order: 3; }
.res-items--dated .res-item__more {
  order: 4;
  margin-top: auto;
  padding-top: var(--s-5);
  font-family: var(--f-display);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.res-items--dated .res-item__more svg {
  width: 13px; height: 13px;
  transition: transform 220ms var(--ease);
}
.res-items--dated .res-item:hover .res-item__more svg { transform: translateX(3px); }
/* En vista lista no queremos el botón visible (filas compactas) */
.res-items--dated.is-list .res-item__more { display: none; }
/* En vista lista, fecha en primera columna */
.res-items--dated.is-list .res-item {
  grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1.6fr) !important;
  grid-template-areas: "date title desc" !important;
}
.res-items--dated.is-list .res-item__meta {
  grid-area: date;
  text-align: left;
  font-size: 13px;
  color: var(--text-primary);
}
.res-items--dated.is-list .res-item__title { grid-area: title; }
.res-items--dated.is-list .res-item__desc { grid-area: desc; }

@media (max-width: 900px) {
  .res-items.is-list .res-item {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
  }
  .res-items.is-list .res-item__desc { -webkit-line-clamp: none; overflow: visible; }
}

/* ─── Sigue explorando · cross-link compacto pre-CTA ─── */
.next-reads-section { max-width: var(--container); margin: 0 auto; padding: var(--s-9) var(--s-7) 0; }
.next-reads__caption { font-family: var(--f-display); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted, #6b6b6b); margin: 0 0 var(--s-5); }
.next-reads { display: grid; grid-template-columns: 1fr; gap: var(--s-5); }
@media (min-width: 700px) { .next-reads { grid-template-columns: 1fr 1fr 1fr; } }
.next-reads__card { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6) var(--s-5); border: 1px solid var(--border-light); border-radius: var(--radius-md); background: var(--bg-primary); text-decoration: none; color: inherit; transition: border-color 220ms var(--ease), transform 220ms var(--ease); min-height: 160px; }
.next-reads__card:hover { border-color: var(--text-primary); transform: translateY(-2px); }
.next-reads__type { font-family: var(--f-display); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted, #6b6b6b); margin: 0; }
.next-reads__title { font-family: var(--f-display); font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -0.012em; margin: 0; color: var(--text-primary); flex: 1; }
.next-reads__title em { font-family: var(--f-serif); font-style: italic; font-weight: 600; }
.next-reads__more { font-family: var(--f-display); font-size: 13px; font-weight: 500; color: var(--text-primary); display: inline-flex; align-items: center; gap: 6px; margin-top: auto; }
.next-reads__more svg { width: 13px; height: 13px; transition: transform 220ms var(--ease); }
.next-reads__card:hover .next-reads__more svg { transform: translateX(3px); }

/* ─── También en Recursos · banner de hermanos en sub-hubs ─── */
.siblings-section { max-width: var(--container); margin: 0 auto; padding: var(--s-8) var(--s-7) 0; border-top: 1px solid var(--border-light); }
.siblings-section__caption { font-family: var(--f-display); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted, #6b6b6b); margin: var(--s-7) 0 var(--s-5); }
.siblings { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 700px) { .siblings { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .siblings { grid-template-columns: repeat(4, 1fr); } }
.sibling { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-5) var(--s-5); border: 1px solid var(--border-light); border-radius: var(--radius-md); text-decoration: none; color: inherit; transition: border-color 220ms var(--ease); background: var(--bg-primary); }
.sibling:hover { border-color: var(--text-primary); }
.sibling__label { font-family: var(--f-display); font-size: 14.5px; font-weight: 500; color: var(--text-primary); margin: 0; }
.sibling__icon { width: 14px; height: 14px; flex-shrink: 0; transition: transform 220ms var(--ease); }
.sibling:hover .sibling__icon { transform: translateX(3px); }

/* ─── Alinear gutter horizontal con el nav en móvil ───────────────────
   En desktop (≥768px) el nav usa s-7 (48px) y las secciones también.
   En móvil (<768px) el nav baja a s-5 (24px); replicamos en todas las
   secciones para que el borde izquierdo/derecho del contenido coincida
   visualmente con el del nav header. */
@media (max-width: 767px) {
  .about-hero,
  .about-section,
  .res-hero,
  .res-section,
  .ct-hero,
  .ct-section,
  .ct-office,
  .ref-hero,
  .ref-grid,
  .next-reads-section,
  .siblings-section,
  .partner-hero,
  .partner-body,
  .legal-hero,
  .legal-body,
  .legal-hub-hero,
  .legal-hub-section,
  .legal-hub__entity,
  .filter-bar,
  .hero,
  .social-proof__wrap,
  .footer__wrap {
    padding-left: var(--s-5);
    padding-right: var(--s-5);
  }
  /* CTAs envueltos en <section style="padding: var(--s-10) var(--s-5)"> ya están a 24px → no hace falta */
}

/* ─── Meta-strip de productos (duración / para / formato) ─────────
   Cada bloque va en su propia card con borde. Apila en móvil. */
.pp-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
  margin-top: var(--s-5);
}
@media (max-width: 700px) {
  .pp-meta { grid-template-columns: 1fr; }
}
.pp-meta__item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-primary);
}
.pp-meta__label {
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted, #6b6b6b);
}
.pp-meta__value {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}