/* produ/assets/site.css — una hoja para las 4 landings y los 3 idiomas. */

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/assets/fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==========================================================================
   1. Tokens — DS §9 tal cual, más adiciones de plan §5
   ========================================================================== */

:root {
  /* ---- Color: marca ---- */
  --color-primary: #2A4477;
  --color-primary-deep: #16294A;
  --grad-iso-from: #5A97C5;
  --grad-iso-to: #17224F;
  --gradient-iso: linear-gradient(135deg, #5A97C5 0%, #17224F 100%);

  /* ---- Color: neutros ---- */
  --color-ink: #333333;
  --color-ink-soft: #6B6B6B;
  --color-line: #C9C9C9;
  --color-white: #FFFFFF;
  --color-bg: #FFFFFF;
  --color-bg-soft: #F5F6F8;
  --color-surface: #FFFFFF;
  --color-border: #E4E7EC;
  --color-hover: #EAF0F7;

  /* ---- Color: semánticos ---- */
  --color-success: #1E7A4D;
  --color-error: #C0392B;
  --color-warning: #B7791F;
  --color-info: #2A4477;

  /* ---- Tipografía ---- */
  --font-sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --fs-display: 3.5rem;
  --fs-h1: 2.75rem;
  --fs-h2: 2rem;
  --fs-h3: 1.5rem;
  --fs-subtitle: 1.25rem;
  --fs-body: 1rem;
  --fs-body-sm: 0.875rem;
  --fs-caption: 0.75rem;
  --fs-overline: 0.8125rem;

  /* ---- Espaciado (base 8) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Layout ---- */
  --container-max: 1600px;
  --gutter: clamp(16px, 3.333vw, 48px);

  /* ---- Radios ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- Sombras ---- */
  --shadow-sm: 0 1px 2px rgba(22, 41, 74, 0.06);
  --shadow-md: 0 4px 16px rgba(22, 41, 74, 0.08);
  --shadow-lg: 0 12px 32px rgba(22, 41, 74, 0.12);

  /* ---- Transiciones ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 200ms;

  /* ---- Plan §5 (solo estas adiciones; --gutter pisa el 24px del DS) ---- */
  --fs-stat: 6.5rem;
  --fs-stat-md: 4.5rem;
  --fs-stat-sm: 3rem;
  --gutter: 16px;
  --overlay-scrim: rgba(22, 41, 74, 0.82);

  --focus-ring: 2px solid #5A97C5;
  --focus-offset: 2px;
  --ink-on-dark: #C9D4E5;

  --header-h: 64px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-header: 320ms;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --header-h: 72px;
  }
}

@media (min-width: 1280px) {
  :root {
    --gutter: 48px;
    --header-h: 80px;
  }
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  max-width: 100%;
}

body {
  margin: 0;
  max-width: 100%;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.6;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

img {
  border: 0;
  display: block;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--color-primary-deep);
  text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

:focus:not(:focus-visible) {
  outline: none;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 1rem;
}

button {
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

[id] {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

/* ==========================================================================
   3. Primitivas de tipo
   ========================================================================== */

.disp,
.h1,
.h2,
.h3,
.lead,
.p,
.sm,
.cap,
.ov {
  margin: 0;
  overflow-wrap: break-word;
}

.disp {
  font-size: 2.125rem;
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}

.h1 {
  font-size: 1.875rem;
  font-weight: var(--fw-bold);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--color-primary);
}

.h2 {
  font-size: 1.625rem;
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-primary);
}

.h3 {
  font-size: 1.3125rem;
  font-weight: var(--fw-medium);
  line-height: 1.25;
  color: var(--color-primary);
}

.lead {
  font-size: 1.125rem;
  font-weight: var(--fw-medium);
  line-height: 1.4;
  color: var(--color-ink-soft);
  max-width: 68ch;
}

.p {
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  color: var(--color-ink);
  max-width: 68ch;
  text-wrap: pretty;
}

.sm {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  color: var(--color-ink-soft);
}

.cap {
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--color-ink-soft);
}

.ov {
  font-size: var(--fs-overline);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}

@media (min-width: 1280px) {
  .disp {
    font-size: var(--fs-display);
  }

  .h1 {
    font-size: var(--fs-h1);
  }

  .h2 {
    font-size: var(--fs-h2);
  }

  .h3 {
    font-size: var(--fs-h3);
  }

  .lead {
    font-size: var(--fs-subtitle);
  }
}

/* ==========================================================================
   4. Layout primitivos
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  min-width: 0;
}

.wrap > *,
.split > *,
.stack > *,
.row > *,
.hero-copy > *,
.contact-block > *,
.tree-leaves > * {
  min-width: 0;
}

.sec {
  padding-block: var(--space-16);
}

.sec:has(.carousel),
.sec:has(.map) {
  background: var(--color-bg-soft);
}

@media (min-width: 768px) {
  .sec {
    padding-block: var(--space-24);
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  min-width: 0;
}

.row > .stack {
  flex: 1 1 16rem;
  min-width: 0;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

.chip {
  display: inline-block;
  align-self: flex-start;
  width: fit-content;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  font-weight: var(--fw-medium);
  font-size: var(--fs-overline);
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  background: transparent;
}

/* ==========================================================================
   5. Contextos oscuro / degradado
   ========================================================================== */

.dark {
  background: var(--color-primary-deep);
  color: var(--color-white);
  --color-ink: #FFFFFF;
  --color-ink-soft: #C9D4E5;
  --color-border: rgba(255, 255, 255, 0.16);
}

.dark .disp,
.dark .h1,
.dark .h2,
.dark .h3,
.dark .ov {
  color: var(--color-white);
}

.dark .p {
  color: var(--color-white);
}

.dark .lead,
.dark .sm,
.dark .cap {
  color: var(--ink-on-dark);
}

.dark .chip {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--color-white);
}

.dark .card {
  background: var(--color-surface);
  color: #333333;
  --color-ink: #333333;
  --color-ink-soft: #6B6B6B;
  --color-border: #E4E7EC;
  box-shadow: var(--shadow-lg);
}

.dark .card .disp,
.dark .card .h1,
.dark .card .h2,
.dark .card .h3,
.dark .card .ov {
  color: var(--color-primary);
}

.dark .card .p {
  color: #333333;
}

.dark .card .lead,
.dark .card .sm,
.dark .card .cap {
  color: #6b6b6b;
}

.grad {
  /* #5A97C5 as 0% fails AA for 18px/500 and 13px chip; start at primary. */
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--grad-iso-to) 100%);
  color: var(--color-white);
}

.grad .disp,
.grad .h1,
.grad .h2,
.grad .h3,
.grad .ov {
  color: var(--color-white);
}

.grad .lead {
  color: var(--color-white);
}

.grad .sm,
.grad .cap,
.grad .p {
  color: var(--ink-on-dark);
}

.grad .chip {
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--color-white);
  background: var(--color-primary-deep);
}

/* ==========================================================================
   6. Botones — estados reposo / hover / foco / activo / disabled
   ========================================================================== */

.btn,
.btn2,
.btn3,
.btn4 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  gap: var(--space-2);
  height: 52px;
  width: max-content;
  max-width: 100%;
  padding: 0 var(--space-6);
  border-radius: var(--radius-md);
  font-weight: var(--fw-bold);
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.btn:hover,
.btn2:hover,
.btn3:hover,
.btn4:hover,
a.btn:hover,
a.btn2:hover,
a.btn3:hover,
a.btn4:hover {
  text-decoration: none;
}

.btn {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn:hover {
  background: var(--color-primary-deep);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.btn:focus-visible,
.btn2:focus-visible,
.btn3:focus-visible,
.btn4:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.btn:active:not(:disabled):not([disabled]):not(.is-loading),
.btn2:active:not(:disabled):not([disabled]):not(.is-loading),
.btn3:active:not(:disabled):not([disabled]):not(.is-loading),
.btn4:active:not(:disabled):not([disabled]):not(.is-loading) {
  transform: translateY(1px);
}

.btn:disabled,
.btn[disabled],
.btn.is-loading,
.form.is-loading .btn[type="submit"],
.form[aria-busy="true"] .btn[type="submit"] {
  background: var(--color-line);
  color: var(--color-ink-soft);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.btn2 {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.btn2:hover {
  background: var(--color-hover);
  color: var(--color-primary);
}

.btn2:disabled,
.btn2[disabled],
.btn2.is-loading {
  border-color: var(--color-line);
  color: var(--color-ink-soft);
  background: transparent;
  cursor: not-allowed;
}

.btn3 {
  background: var(--color-white);
  color: var(--color-primary-deep);
  border: 0;
}

.btn3:hover {
  background: color-mix(in srgb, var(--color-primary-deep) 8%, var(--color-white));
  color: var(--color-primary-deep);
  box-shadow: var(--shadow-sm);
}

.btn4 {
  background: transparent;
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.btn4:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
}

.btn--sm,
.btn2.btn--sm,
.btn3.btn--sm,
.btn4.btn--sm {
  height: 44px;
  font-size: 1rem;
}

/* ==========================================================================
   7. Skip link
   ========================================================================== */

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 200;
  padding: 12px 16px;
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-sm);
  clip-path: inset(50%);
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
}

.skip-link:focus,
.skip-link:focus-visible {
  clip-path: none;
  width: auto;
  height: auto;
  overflow: visible;
  color: var(--color-white);
  text-decoration: none;
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* ==========================================================================
   8. Header, logo, nav, idioma
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  background: transparent;
  border-bottom: 0;
  transition: transform 420ms var(--ease-out);
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

.site-header.is-hidden:focus-within {
  transform: none;
}

.site-header .wrap,
.site-header .nav,
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  min-height: var(--header-h);
  min-width: 0;
}

.nav {
  height: auto;
  padding-block: 0;
  border-bottom: 0;
  background: transparent;
  position: relative;
}

.site-header > .nav {
  padding-inline: var(--gutter);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-header) var(--ease-out);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
}

.site-header[data-surface="glass"]::before,
.site-header.is-menu-open::before {
  opacity: 1;
}

.site-header[data-tone="light"]::before {
  background: rgba(255, 255, 255, 0.80);
  border-bottom: 1px solid rgba(22, 41, 74, 0.08);
  box-shadow: 0 10px 30px -18px rgba(22, 41, 74, 0.25);
}

.site-header[data-tone="dark"]::before {
  background: rgba(22, 41, 74, 0.78);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}

.site-header.is-menu-open[data-tone="light"]::before {
  background: rgba(255, 255, 255, 0.97);
}

.site-header.is-menu-open[data-tone="dark"]::before {
  background: rgba(22, 41, 74, 0.96);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header[data-tone="light"][data-surface="glass"]::before,
  .site-header[data-tone="light"].is-menu-open::before {
    background: #FFFFFF;
  }

  .site-header[data-tone="dark"][data-surface="glass"]::before,
  .site-header[data-tone="dark"].is-menu-open::before {
    background: #16294A;
  }
}

.site-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -2;
  pointer-events: none;
  height: calc(var(--header-h) + 96px);
  background: linear-gradient(180deg, rgba(22, 41, 74, 0.62) 0%, rgba(22, 41, 74, 0.30) 45%, rgba(22, 41, 74, 0) 100%);
  opacity: 0;
  transition: opacity var(--dur-header) var(--ease-out);
}

.site-header[data-tone="dark"][data-surface="clear"]:not(.is-menu-open)::after {
  opacity: 1;
}

.site-header .nav::after {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 0;
  height: 1px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-header) var(--ease-out);
}

.site-header[data-tone="dark"] .nav::after {
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.22) 18%, rgba(255, 255, 255, 0.22) 82%, transparent 100%);
}

.site-header[data-tone="light"] .nav::after {
  background: linear-gradient(90deg, transparent 0%, rgba(22, 41, 74, 0.12) 18%, rgba(22, 41, 74, 0.12) 82%, transparent 100%);
}

.site-header[data-surface="clear"]:not(.is-menu-open) .nav::after {
  opacity: 1;
}

.logo {
  display: inline-grid;
  min-width: 90px;
  box-shadow: none;
  text-decoration: none;
  color: inherit;
}

.logo:hover {
  text-decoration: none;
}

.logo-img {
  grid-area: 1 / 1;
  display: block;
  width: auto;
  height: 30px;
  transition: opacity var(--dur-header) var(--ease-out);
}

.logo-img--on-dark {
  opacity: 0;
}

.site-header[data-tone="light"] .logo-img--on-dark {
  opacity: 0;
}

.site-header[data-tone="dark"] .logo-img--on-light {
  opacity: 0;
}

.site-header[data-tone="dark"] .logo-img--on-dark {
  opacity: 1;
}

.site-footer .logo img { display: block; height: 36px; width: auto; box-shadow: none; }

@media (min-width: 1280px) {
  .site-footer .logo img { height: 40px; }
}

.logo-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  box-shadow: none;
}

.logo-plate img,
.logo-plate .logo,
.logo-plate .logo img {
  box-shadow: none;
}

.nav-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-primary);
  overflow: hidden;
  flex: none;
}

.nav-toggle:hover {
  background: var(--color-hover);
}

.site-header[data-tone="dark"] .nav-toggle {
  color: #FFFFFF;
}

.site-header[data-tone="dark"] .nav-toggle:hover {
  background: rgba(255, 255, 255, 0.10);
}

.nav-toggle span,
.nav-toggle .cap {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.nav-panel {
  display: none;
  flex-basis: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  padding: var(--space-2) 0 var(--space-4);
  border-top: 1px solid var(--color-border);
}

.nav-panel.is-open {
  display: flex;
}

.navlinks {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-ink);
}

.navlinks li {
  margin: 0;
  padding: 0;
}

.navlinks a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  width: 100%;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
  text-decoration-color: transparent;
  transition: color 200ms var(--ease), text-decoration-color 200ms var(--ease);
}

.navlinks a:hover {
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

.navlinks a[aria-current="page"] {
  font-weight: 500;
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

.site-header[data-tone="light"] .navlinks a {
  color: #333333;
}

.site-header[data-tone="light"] .navlinks a:hover,
.site-header[data-tone="light"] .navlinks a[aria-current="page"] {
  color: #2A4477;
}

.site-header[data-tone="dark"] .navlinks a {
  color: rgba(255, 255, 255, 0.80);
}

.site-header[data-tone="dark"] .navlinks a:hover,
.site-header[data-tone="dark"] .navlinks a[aria-current="page"] {
  color: #FFFFFF;
}

.lang {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  padding: 4px;
  align-self: flex-start;
  margin-top: var(--space-2);
}

.site-header[data-tone="light"] .lang {
  color: #333333;
}

.site-header[data-tone="dark"] .lang {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.langi,
a.langi:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 5px 10px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  font-weight: var(--fw-medium);
  font-size: var(--fs-overline);
  line-height: 1;
  color: var(--color-ink-soft);
  text-decoration: none;
}

.langi:hover {
  background: var(--color-hover);
  color: var(--color-primary);
}

.langi--on,
.langi--on:hover,
.langi--on:visited {
  background: var(--color-primary);
  color: var(--color-white);
}

.site-header[data-tone="dark"] .langi,
.site-header[data-tone="dark"] .langi:visited {
  color: rgba(255, 255, 255, 0.80);
}

.site-header[data-tone="dark"] .langi:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #FFFFFF;
}

.site-header[data-tone="dark"] .langi--on,
.site-header[data-tone="dark"] .langi--on:hover,
.site-header[data-tone="dark"] .langi--on:visited {
  background: #FFFFFF;
  color: #16294A;
}

.langi[disabled],
.langi:disabled,
.langi[aria-disabled="true"] {
  opacity: 0.7;
  cursor: pointer;
}

[data-lang-help] {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: var(--color-ink-soft);
}

.site-header[data-tone="dark"] [data-lang-help] {
  color: rgba(255, 255, 255, 0.85);
}

.site-header[data-tone="dark"] {
  --focus-ring: 2px solid #FFFFFF;
}

@media (max-width: 767.98px) {
  .nav-panel.is-open {
    border-top: 1px solid var(--color-border);
    padding: 8px 0 24px;
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .site-header[data-tone="dark"] .nav-panel.is-open {
    border-top-color: rgba(255, 255, 255, 0.10);
  }

  .site-header[data-tone="light"] .nav-panel.is-open {
    border-top-color: var(--color-border);
  }

  .nav-panel .navlinks a {
    font-size: 1.25rem;
    font-weight: 500;
    min-height: 52px;
    border-bottom: 1px solid var(--color-border);
  }

  .site-header[data-tone="dark"] .nav-panel .navlinks a {
    border-bottom-color: rgba(255, 255, 255, 0.10);
  }

  .site-header[data-tone="light"] .nav-panel .navlinks a {
    border-bottom-color: var(--color-border);
  }

  .nav-panel .navlinks a:last-child {
    border-bottom: 0;
  }

  .nav-panel .lang {
    margin-top: 16px;
  }
}

@media (min-width: 768px) {
  .nav-toggle {
    display: none;
  }

  .site-header > .nav {
    gap: 28px;
  }

  .nav-panel,
  .nav-panel.is-open {
    display: flex;
    flex-basis: auto;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-8);
    padding: 0;
    border-top: 0;
  }

  .navlinks {
    flex-direction: row;
    gap: 28px;
  }

  .navlinks a {
    width: auto;
    font-size: 0.9375rem;
  }

  .lang {
    margin-top: 0;
    align-self: center;
  }

  .site-header .lang {
    margin-left: auto;
  }

  .logo-img {
    height: 32px;
  }
}

@media (min-width: 1280px) {
  .logo-img {
    height: 34px;
  }
}

/* ==========================================================================
   8b. Header inmersivo — movimiento
   ========================================================================== */

@keyframes mk-header-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@keyframes mk-hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes mk-hero-recede {
  from { opacity: 1; transform: none; }
  to { opacity: 0.25; transform: translateY(-36px); }
}

@keyframes mk-panel-in {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}

@media (prefers-reduced-motion: no-preference) {
  .site-header .logo {
    animation: mk-header-in 700ms var(--ease-out) both;
    animation-delay: 60ms;
  }

  .site-header .nav-toggle {
    animation: mk-header-in 700ms var(--ease-out) both;
    animation-delay: 120ms;
  }

  .navlinks a:nth-child(1) {
    animation: mk-header-in 700ms var(--ease-out) both;
    animation-delay: 140ms;
  }

  .navlinks a:nth-child(2) {
    animation: mk-header-in 700ms var(--ease-out) both;
    animation-delay: 200ms;
  }

  .navlinks a:nth-child(3) {
    animation: mk-header-in 700ms var(--ease-out) both;
    animation-delay: 260ms;
  }

  .navlinks a:nth-child(4) {
    animation: mk-header-in 700ms var(--ease-out) both;
    animation-delay: 320ms;
  }

  .site-header .lang {
    animation: mk-header-in 700ms var(--ease-out) both;
    animation-delay: 380ms;
  }

  .view > .hero:first-child .hero-copy > * {
    animation: mk-hero-in 900ms var(--ease-out) both;
  }

  .view > .hero:first-child .hero-copy > *:nth-child(1) {
    animation-delay: 180ms;
  }

  .view > .hero:first-child .hero-copy > *:nth-child(2) {
    animation-delay: 300ms;
  }

  .view > .hero:first-child .hero-copy > *:nth-child(3) {
    animation-delay: 420ms;
  }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 767.98px) {
  .nav-panel.is-open {
    animation: mk-panel-in 360ms var(--ease-out) both;
  }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .view > .hero:first-child .hero-copy {
      animation: mk-hero-recede linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px 70vh;
    }
  }
}

/* ==========================================================================
   9. Hero — .hero--plain oscura (Home/Servicios/ADN) y clara (Contacto)
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  padding-block: var(--space-16);
  overflow: hidden;
}

.hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  width: 100%;
  max-width: 100%;
}

.hero-copy > * {
  max-width: 100%;
}

.hero-copy .disp {
  width: 100%;
  max-width: min(30ch, 100%);
}

.hero-copy .lead {
  width: 100%;
  max-width: min(52ch, 100%);
}

.hero-copy .row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  width: min(100%, 360px);
}

.hero-copy .btn,
.hero-copy .btn2,
.hero-copy .btn3,
.hero-copy .btn4 {
  width: 100%;
  max-width: 100%;
  justify-content: center;
  align-self: stretch;
}

.hero--plain {
  background: var(--color-bg-soft);
}

.hero--plain .disp,
.hero--plain .h1 {
  color: var(--color-primary);
}

.hero--plain .lead {
  color: var(--color-ink-soft);
}

.hero--plain.dark,
.hero.dark {
  background-color: var(--color-primary-deep);
  color: var(--color-white);
}

#home-hero,
#servicios-hero,
#adn-hero,
#contacto-hero {
  isolation: isolate;
  overflow: hidden;
  background: var(--color-primary-deep);
}

#home-hero::before,
#servicios-hero::before,
#adn-hero::before,
#contacto-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: url("/assets/visual/illustrative/hero-trigo.webp") center / cover no-repeat;
  mask-image: none;
  -webkit-mask-image: none;
  transform: scale(1.01);
  transform-origin: 50% 50%;
  will-change: transform;
}

/* Servicios — terminal de contenedores vista en planta: una lectura directa de
   comercio exterior, manteniendo una zona de contraste para el bloque editorial. */
#servicios-hero::before {
  background-image: url("/assets/visual/illustrative/hero-servicios-containers.webp");
  background-position: center;
}

/* ADN — perspectiva urbana desde la calle, con el cielo como pausa visual para
   conservar la lectura del bloque editorial centrado. */
#adn-hero::before {
  background-image: url("/assets/visual/illustrative/hero-adn-city-upward.webp");
  background-position: center;
}

/* Contacto — peatones en la calle comercial: cercanía y movimiento a escala
   humana, sin repetir la arquitectura protagonista de ADN. */
#contacto-hero::before {
  background-image: url("/assets/visual/illustrative/hero-contacto-people-walking.webp");
  background-position: center;
}

#home-hero::after,
#servicios-hero::after,
#adn-hero::after,
#contacto-hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: rgba(12, 13, 12, 0.14);
}

#servicios-hero::after {
  background: linear-gradient(90deg, rgba(8, 19, 37, 0.76) 0%, rgba(8, 19, 37, 0.55) 42%, rgba(8, 19, 37, 0.18) 74%, rgba(8, 19, 37, 0.28) 100%);
}

#adn-hero::after {
  background: rgba(8, 19, 37, 0.34);
}

/* Contacto — el degradado sostiene la lectura sobre la trama de peatones y
   conserva algo más de luz en los bordes para que la escena siga presente. */
#contacto-hero::after {
  background: radial-gradient(
    ellipse 62% 70% at 50% 50%,
    rgba(8, 19, 37, 0.68) 0%,
    rgba(8, 19, 37, 0.55) 48%,
    rgba(8, 19, 37, 0.42) 100%
  );
}

#home-hero .hero-copy,
#servicios-hero .hero-copy,
#adn-hero .hero-copy,
#contacto-hero .hero-copy {
  position: relative;
  z-index: 2;
}

@keyframes mk-home-hero-push-in {
  from { transform: scale(1.01); }
  to { transform: scale(1.08); }
}

@media (prefers-reduced-motion: no-preference) {
  #home-hero::before,
  #servicios-hero::before,
  #adn-hero::before,
  #contacto-hero::before {
    animation: mk-home-hero-push-in 20s cubic-bezier(0.2, 0.65, 0.3, 1) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  #home-hero::before,
  #servicios-hero::before,
  #adn-hero::before,
  #contacto-hero::before {
    transform: scale(1.01);
    will-change: auto;
  }
}

.hero--plain.dark::before,
.hero.dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-radial-gradient(
      circle at 115% -20%,
      transparent 0 32px,
      rgba(255, 255, 255, 0.12) 32px 33px
    ),
    repeating-radial-gradient(
      circle at -20% 125%,
      transparent 0 36px,
      rgba(90, 151, 197, 0.12) 36px 37px
    );
  mask-image: radial-gradient(ellipse 85% 75% at 50% 48%, transparent 58%, #000 88%);
  -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 48%, transparent 58%, #000 88%);
}

.hero--plain.dark .disp,
.hero.dark .disp,
.hero--plain.dark .h1,
.hero.dark .h1,
.hero--plain.dark .h2,
.hero.dark .h2 {
  color: var(--color-white);
}

.hero--plain.dark .lead,
.hero.dark .lead {
  color: var(--color-white);
}

.hero.dark .btn,
.hero--plain.dark .btn {
  background: var(--color-white);
  color: var(--color-primary-deep);
}

.hero.dark .btn:hover,
.hero--plain.dark .btn:hover {
  background: color-mix(in srgb, var(--color-primary-deep) 8%, var(--color-white));
  color: var(--color-primary-deep);
  box-shadow: var(--shadow-sm);
}

.hero.dark .btn2,
.hero--plain.dark .btn2 {
  background: transparent;
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.hero.dark .btn2:hover,
.hero--plain.dark .btn2:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
}

.hero-media,
.hero-scrim {
  display: none;
}

.hero--photo {
  background-color: var(--color-primary-deep);
  color: var(--color-white);
}

@media (min-width: 768px) {
  .hero {
    min-height: 520px;
    padding-block: var(--space-24);
  }

  .hero-copy .row {
    flex-direction: row;
    width: auto;
    align-items: center;
  }

  .hero-copy .btn,
  .hero-copy .btn2,
  .hero-copy .btn3,
  .hero-copy .btn4 {
    width: auto;
  }
}

@media (min-width: 1024px) {
  .hero {
    min-height: calc(100vh - 73px);
    min-height: calc(100svh - 73px);
  }
}

.view > .hero:first-child {
  padding-top: calc(var(--space-16) + var(--header-h));
  min-height: calc(420px + var(--header-h));
}

#home-hero,
#servicios-hero,
#adn-hero,
#contacto-hero {
  min-height: max(calc(420px + var(--header-h)), 100vh);
  min-height: max(calc(420px + var(--header-h)), 100svh);
}

@media (min-width: 768px) {
  .view > .hero:first-child {
    padding-top: calc(var(--space-24) + var(--header-h));
    min-height: calc(520px + var(--header-h));
  }

  #home-hero,
  #servicios-hero,
  #adn-hero,
  #contacto-hero {
    min-height: max(calc(520px + var(--header-h)), 100vh);
    min-height: max(calc(520px + var(--header-h)), 100svh);
  }
}

/* Servicios, ADN y Contacto no viven bajo #view-home, así que --home-h1 (9b)
   no les llega por herencia: se replica el mismo clamp solo en sus H1, sin
   tocar #view-home ni sus reglas. */
#servicios-hero .disp,
#adn-hero .disp,
#contacto-hero .disp {
  font-size: clamp(2.125rem, 1.5225rem + 2.4719vw, 3.5rem);
}

/* ==========================================================================
   9b. Home — escala tipográfica estandarizada (fase 12)
   ========================================================================== */

/* Tokens fluidos (390→1280px) acotados a la Home: garantizan H1 > H2 > H3 en
   todo el rango, incluido tablet. No tocan --fs-* ni las primitivas globales. */
#view-home {
  --home-h1: clamp(2.125rem, 1.5225rem + 2.4719vw, 3.5rem);
  --home-h2: clamp(2rem, 1.5618rem + 1.7978vw, 3rem);
  --home-h3: clamp(1.3125rem, 1.2303rem + 0.3371vw, 1.5rem);
}

#view-home .disp {
  font-size: var(--home-h1);
}

/* Servicios y ADN no viven bajo #view-home, así que --home-h2/--home-h3 (9b)
   no les llegan por herencia: se replican los mismos clamp solo para sus
   nextnav fotográficos, sin tocar el resto de esas vistas. */
#view-servicios .nextnav.nextnav--photo,
#view-adn .nextnav.nextnav--photo {
  --home-h2: clamp(2rem, 1.5618rem + 1.7978vw, 3rem);
  --home-h3: clamp(1.3125rem, 1.2303rem + 0.3371vw, 1.5rem);
}

#view-home .h2,
#view-servicios .nextnav.nextnav--photo .nextnav-head .h2,
#view-adn .nextnav.nextnav--photo .nextnav-head .h2 {
  font-size: var(--home-h2);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

#view-home .h3 {
  font-size: var(--home-h3);
  font-weight: var(--fw-bold);
  line-height: 1.2;
}

/* H2 del nextnav: fondo claro, mismo tono que el kicker de propuesta/cubre.
   Se replica en Servicios y ADN porque sus nextnav no viven bajo #view-home. */
#view-home .nextnav.nextnav--photo .nextnav-head .h2,
#view-servicios .nextnav.nextnav--photo .nextnav-head .h2,
#view-adn .nextnav.nextnav--photo .nextnav-head .h2 {
  color: var(--color-primary-deep);
}

/* ==========================================================================
   10. Split + pilares (Home 01) / split 4/8 (Servicios 01)
   ========================================================================== */

/* Dos secciones, una sola composición: el isotipo conecta hero y bloque de cifras. */
.home-light-flow {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFD 48%, #F3F7FB 70%, #FFFFFF 100%);
}

.home-light-flow > .sec {
  position: relative;
  z-index: 1;
  background: transparent;
}

.home-light-flow-art {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 0;
  width: auto;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: left center;
  opacity: 0.075;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 767px) {
  .home-light-flow-art {
    opacity: 0.06;
  }
}

/* Escritorio: agrandar ~15% y centrar. El tamaño depende del alto del flujo,
   no del ancho del monitor, para que la composición no cambie de escala al
   pasar de notebook a monitores grandes. */
@media (min-width: 1280px) {
  .home-light-flow-art {
    top: 50%;
    bottom: auto;
    height: 115%;
    transform: translateY(-50%);
  }
}

/* Bloque oscuro (respaldo + contacto): fondo continuo compartido por las dos
   secciones. */
.home-dark-flow {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-primary-deep);
}

.home-dark-flow > .sec {
  position: relative;
  z-index: 1;
  background: transparent;
}

#home-propuesta {
  position: relative;
  background: transparent;
}

#home-propuesta .split > .stack {
  justify-content: center;
  gap: var(--space-6);
}

/* Lead en dos líneas parejas, sin viuda corta abajo. */
#home-propuesta .lead {
  max-width: 44ch;
  text-wrap: balance;
}

/* Servicios y ADN reutilizan el título en dos niveles de Home. */
#servicios-cubre,
#servicios-broker,
#servicios-servicios,
#adn-mision,
#adn-equipo {
  --home-h2: clamp(2rem, 1.5618rem + 1.7978vw, 3rem);
}

:is(#home-propuesta, #home-cubre, #servicios-cubre, #servicios-broker, #servicios-servicios, #adn-mision, #adn-equipo) .h2 {
  display: grid;
  justify-items: start;
  gap: 0.08em;
  max-width: 16ch;
  font-size: var(--home-h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

:is(#home-propuesta, #home-cubre, #servicios-cubre, #servicios-broker, #servicios-servicios, #adn-mision, #adn-equipo, #contacto-oficinas) .h2-kicker {
  display: block;
  font-weight: var(--fw-bold);
  color: var(--color-primary-deep);
}

:is(#home-propuesta, #home-cubre, #servicios-cubre, #servicios-servicios, #adn-mision, #adn-equipo) .h2-accent {
  margin-top: 0.35em;
  font-size: 0.6em;
  font-weight: var(--fw-medium);
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: var(--color-primary);
}

:is(#home-propuesta, #home-cubre, #servicios-cubre, #servicios-broker, #servicios-servicios, #adn-mision, #adn-equipo, #contacto-oficinas) .h2-payoff {
  position: relative;
  z-index: 0;
  display: inline-block;
  color: var(--color-primary-deep);
  font-weight: var(--fw-bold);
}

:is(#home-propuesta, #home-cubre, #servicios-cubre, #servicios-broker, #servicios-servicios, #adn-mision, #adn-equipo, #contacto-oficinas) .h2-payoff::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -0.05em;
  bottom: -0.08em;
  left: -0.04em;
  height: 0.22em;
  border-radius: 60% 40% 55% 45%;
  background: linear-gradient(90deg, rgba(90, 151, 197, 0.2), rgba(42, 68, 119, 0.42));
  transform: rotate(-1.5deg) skewX(-8deg);
  transform-origin: left center;
}

:is(#adn-mision, #adn-equipo) .h2 {
  display: flex;
  align-items: baseline;
  gap: 0.2em;
  max-width: none;
  white-space: nowrap;
}

:is(#adn-mision, #adn-equipo) .h2-accent {
  margin-top: 0;
  font-size: 1em;
}

/* Servicios 01: mismo lenguaje visual de Home, con isotipo de marca de agua. */
#servicios-broker {
  position: relative;
}

#servicios-broker > .wrap {
  position: relative;
  z-index: 1;
}

.broker-intro {
  gap: var(--space-6);
}

.broker-creds {
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.broker-creds strong {
  font-weight: var(--fw-bold);
  color: var(--color-primary-deep);
}

.broker-creds-sep {
  color: var(--color-ink-soft);
  font-weight: var(--fw-medium);
  line-height: 1;
}

#servicios-broker .broker-creds .propuesta-badge {
  min-height: 0;
}

.broker-text {
  max-width: 58ch;
  text-wrap: pretty;
}

/* Gana por especificidad a .split:not(:has(.pillars)) sin tocar esa regla genérica. */
@media (min-width: 1280px) {
  #servicios-broker .split {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-16);
    align-items: center;
  }
}

.propuesta-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-2) var(--space-6);
  width: 100%;
  margin: 0;
  padding: 0;
}

.propuesta-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  max-width: 100%;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: var(--fs-body-sm);
  line-height: 1.3;
  color: var(--color-ink);
  font-weight: var(--fw-medium);
}

.propuesta-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  border: 0;
  color: var(--color-primary);
}

.propuesta-badge-icon .icon {
  width: 14px;
  height: 14px;
  color: var(--color-primary);
}

/* Desprendimiento del isotipo: pequeño remate en la esquina de .pillars, se disuelve hacia el blanco */
.pillars-flourish {
  position: absolute;
  right: -10px;
  bottom: -58px;
  width: 176px;
  height: 96px;
  pointer-events: none;
  z-index: 0;
}

.pillars-flourish svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.flourish-band {
  fill: none;
  stroke: url(#flourishBandFade);
  stroke-width: 28;
  stroke-linecap: round;
  filter: url(#flourishBlur);
}

.flourish-line {
  fill: none;
  stroke: url(#flourishFade);
  stroke-linecap: round;
}

.flourish-line--a {
  stroke-width: 1.5;
  opacity: 0.3;
}

.flourish-line--b {
  stroke-width: 1.25;
  opacity: 0.22;
}

@media (max-width: 479px) {
  .pillars-flourish {
    width: 132px;
    height: 72px;
    bottom: -44px;
  }
}

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
  min-width: 0;
}

.pillars {
  position: relative;
  background-color: var(--color-primary-deep);
  background-image: url("/assets/visual/brand/isotipo-fondo-pillars.svg");
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: cover;
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 24px 48px -12px rgba(22, 41, 74, 0.28),
    0 1px 2px rgba(22, 41, 74, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pillar {
  position: relative;
  display: flex;
  gap: var(--space-6);
  padding: 28px 24px;
  border-radius: var(--radius-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition:
    background-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.pillar:last-child {
  border-bottom: 0;
}

.pillar:hover {
  background-color: rgba(255, 255, 255, 0.05);
  transform: translateX(6px);
}

.pillar-marker {
  position: relative;
  flex: none;
  width: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: stretch;
}

.pillar-index {
  position: relative;
  z-index: 2;
  flex: none;
  width: 52px;
  height: 52px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  font-size: 1.25rem;
  line-height: 1;
  color: var(--color-white);
  background: rgba(90, 151, 197, 0.16);
  border: 1.5px solid rgba(90, 151, 197, 0.45);
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 12px rgba(22, 41, 74, 0.3);
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.pillar:hover .pillar-index {
  background-color: var(--color-primary);
  border-color: #5A97C5;
  box-shadow: 0 0 20px rgba(90, 151, 197, 0.5);
  transform: scale(1.06);
}

.pillar:not(:last-child) .pillar-marker::after {
  content: "";
  position: absolute;
  top: 52px;
  bottom: -32px;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(
    to bottom,
    rgba(90, 151, 197, 0.75) 0%,
    rgba(90, 151, 197, 0.25) 100%
  );
  z-index: 1;
}

.pillar .stack {
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

.pillar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.pillar .h3 {
  color: var(--color-white);
  font-weight: var(--fw-bold);
  margin: 0;
}

.pillar-phase {
  display: inline-flex;
  align-items: center;
  background: rgba(90, 151, 197, 0.16);
  color: #8EC5FC;
  border: 1px solid rgba(90, 151, 197, 0.32);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  font-size: 0.75rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .pillars {
    padding: var(--space-12) var(--space-8);
  }
}

@media (min-width: 1280px) {
  .split:has(.pillars) {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
  }

  .split:not(:has(.pillars)) {
    grid-template-columns: 4fr 8fr;
    gap: 56px;
    align-items: start;
  }

  .pillars {
    min-height: 550px;
    padding: 64px 44px;
  }
}

/* ==========================================================================
   11. Qué cubre
   ========================================================================== */

.covers {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  min-width: 0;
}

.cover {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 240px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  min-width: 0;
}

.cover-media {
  position: relative;
  flex: 1 1 auto;
  min-height: 180px;
  overflow: hidden;
}

.cover-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cover-caption {
  margin: 0;
  padding: var(--space-4);
  background: var(--color-primary-deep);
  color: var(--color-white);
  font-weight: var(--fw-medium);
  font-size: 1rem;
  line-height: 1.25;
  text-align: center;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.cover--brand {
  background-color: var(--color-primary-deep);
  background-image:
    radial-gradient(circle at 85% -10%, rgba(90, 151, 197, 0.12), transparent 46%),
    repeating-radial-gradient(
      circle at -30% 120%,
      transparent 0 22px,
      rgba(255, 255, 255, 0.12) 23px 24px
    );
}

.covers .cover:nth-child(2).cover--brand,
.covers .cover--brand:nth-child(2) {
  background-color: var(--color-primary);
}

.covers .cover:nth-child(3).cover--brand,
.covers .cover--brand:nth-child(3) {
  background-color: var(--grad-iso-to);
}

.cover--photo .cover-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

a.sm {
  color: var(--color-primary);
  font-weight: var(--fw-medium);
}

a.sm:hover {
  color: var(--color-primary-deep);
}

@media (min-width: 768px) {
  .covers {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

  .cover {
    height: 260px;
    min-height: 240px;
  }
}

@media (min-width: 1280px) {
  /* Covers left / copy right. DOM stays copy-first for mobile and reading order. */
  .split:has(> .covers) {
    grid-template-columns: 8fr 4fr;
    gap: 56px;
    align-items: center;
  }

  .split:has(> .covers) > .covers {
    grid-column: 1;
    grid-row: 1;
  }

  .split:has(> .covers) > .stack {
    grid-column: 2;
    grid-row: 1;
    justify-content: center;
    gap: var(--space-6);
  }

  .covers {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }

  .cover {
    height: 400px;
  }

  /* Mirror of the previous even-drop: odd cards drop so the last card sits up next to the copy. */
  .covers > .cover:nth-child(odd) {
    margin-top: 40px;
  }

  /* Servicios (no Home): layout invertido respecto a la regla genérica de arriba
     — copy a la izquierda, tarjetas a la derecha — solo con grid-column, sin
     tocar el DOM (mismo criterio que #servicios-servicios). El zigzag de alto
     también se espeja para que la primera card quede arriba junto a la copy. */
  #servicios-cubre .split:has(> .covers) {
    grid-template-columns: 4fr 8fr;
  }

  #servicios-cubre .split:has(> .covers) > .stack {
    grid-column: 1;
  }

  #servicios-cubre .split:has(> .covers) > .covers {
    grid-column: 2;
  }

  #servicios-cubre .covers > .cover:nth-child(odd) {
    margin-top: 0;
  }

  #servicios-cubre .covers > .cover:nth-child(even) {
    margin-top: 40px;
  }
}

/* ==========================================================================
   12. Stats
   ========================================================================== */

/* Heading + copy vs. cifras: dos grupos, no un stack de 16px. */
#home-respaldo > .wrap.stack {
  gap: var(--space-8);
}

@media (min-width: 768px) {
  #home-respaldo > .wrap.stack {
    gap: var(--space-16);
  }
}

@media (min-width: 1280px) {
  /* Respaldo necesita una columna izquierda con más presencia para que el
     bloque de apoyo no quede demasiado cerca del centro de la composición. */
  #home-respaldo .split {
    grid-template-columns: 5fr 7fr;
    align-items: center;
  }
}

/* Membresía ICBA: misma voz que el lead del bloque oscuro, no un botón. */
#home-respaldo a.icba-out {
  display: inline-flex;
  align-items: baseline;
  align-self: flex-start;
  gap: 0.3em;
  width: max-content;
  max-width: 100%;
  color: var(--color-white);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-regular);
  line-height: 1.5;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

#home-respaldo a.icba-out > span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: currentColor;
}

#home-respaldo a.icba-out:hover {
  color: var(--color-white);
  text-decoration: none;
}

#home-respaldo a.icba-out .icon {
  width: 0.8em;
  height: 0.8em;
  align-self: center;
  stroke-width: 1.75;
}

/* Nota solo para lector de pantalla en el lead de oficinas. */
.icba-out-note {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  min-width: 0;
}

.stat {
  padding-block: var(--space-6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  min-width: 0;
  text-align: center;
}

.stat:last-child {
  border-bottom: 0;
}

.stat-value {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: var(--fs-stat-sm);
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: var(--color-white);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  margin: 14px 0 0;
  color: var(--ink-on-dark);
}

@media (min-width: 768px) {
  .stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .stat {
    padding: 0 40px;
    border-bottom: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
  }

  .stat:first-child {
    border-left: 0;
  }

  .stat-value {
    font-size: var(--fs-stat-md);
  }
}

@media (min-width: 1280px) {
  .stat-value {
    font-size: var(--fs-stat);
  }
}

/* ==========================================================================
   13. Contacto + formulario
   ========================================================================== */

.contact-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
  min-width: 0;
}

/* El contacto comparte exactamente el fondo azul de respaldo. */
:is(#home-contacto, #servicios-contacto, #adn-contacto) {
  position: relative;
  isolation: isolate;
}

:is(#home-contacto, #servicios-contacto, #adn-contacto) > .wrap {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
}

.home-contacto-art-slot {
  display: none;
}

/* Servicios, ADN y Contacto no viven bajo #view-home, así que --home-h2/--home-h3 (9b)
   no les llegan por herencia: se replica el mismo clamp solo para el H2 y el
   H3 de esos contactos, sin tocar #view-home ni sus tokens. */
:is(#servicios-contacto, #adn-contacto, #contacto-form) .h2 {
  font-size: clamp(2rem, 1.5618rem + 1.7978vw, 3rem);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

:is(#servicios-contacto, #adn-contacto, #contacto-form) .h3 {
  font-size: clamp(1.3125rem, 1.2303rem + 0.3371vw, 1.5rem);
  font-weight: var(--fw-bold);
  line-height: 1.2;
}

.contact-intro {
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.contact-intro-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 38rem;
}

.contact-intro-heading .lead {
  max-width: 34rem;
}

.contact-promises {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  border-block: 1px solid rgba(255, 255, 255, 0.14);
}

.contact-promise {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  min-height: 72px;
  padding-block: var(--space-3);
}

.contact-promise + .contact-promise {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-promise .icon {
  display: block;
  width: 40px;
  height: 40px;
  padding: 10px;
  border: 1px solid rgba(142, 197, 252, 0.32);
  border-radius: 50%;
  background: rgba(90, 151, 197, 0.12);
  color: #8EC5FC;
}

.contact-promise .sm {
  max-width: 34rem;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-white);
}

.contact-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.contact-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  padding-left: var(--space-4);
  border-left: 2px solid rgba(142, 197, 252, 0.55);
}

.contact-detail .ov {
  color: #8EC5FC;
}

.contact-detail .sm {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-white);
}

.contact-detail .cap {
  color: #C9D4E5;
}

.contact-block .row:has(> .icon) {
  align-items: center;
  flex-wrap: nowrap;
}

.contact-block .row:has(> .icon) p {
  flex: 1 1 auto;
  min-width: 0;
}

.contact-block.dark a {
  color: #C9D4E5;
}

.contact-block.dark a:hover {
  color: #FFFFFF;
}

.contact-block.dark .card a {
  color: var(--color-primary);
}

.contact-block.dark .card a:hover {
  color: var(--color-primary-deep);
}

.contact-block .card,
.form.card {
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
}

.form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  min-width: 0;
}

.form .stack {
  gap: 6px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field-label {
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-sm);
  line-height: 1.5;
  color: #333333;
}

.field-control {
  width: 100%;
  height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid #6B6B6B;
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-ink);
  font-size: 1rem;
  line-height: 1.5;
}

.field-control--textarea {
  height: auto;
  min-height: 112px;
  padding: var(--space-2) var(--space-3);
  resize: vertical;
}

.field-control::placeholder {
  color: var(--color-ink-soft);
}

.field-control:hover {
  border-color: rgba(42, 68, 119, 0.5);
}

.field-control:focus,
.field-control:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-hover);
}

.field.is-error .field-control,
.field.is-error .field-control:hover,
.field.is-error .field-control:focus,
.field.is-error .field-control:focus-visible,
.check.is-error .field-control {
  border-color: var(--color-error);
  box-shadow: none;
}

select.field-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.field-error {
  display: none;
  margin: 0;
  font-size: var(--fs-caption);
  line-height: 1.4;
  color: var(--color-error);
}

.field.is-error .field-error,
.check.is-error .field-error,
.is-error > .field-error {
  display: block !important;
}

.check {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
}

.check > .field-error {
  flex-basis: 100%;
}

.check input[type="checkbox"] {
  appearance: none;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 12px 0;
  border: 1px solid #6B6B6B;
  border-radius: 4px;
  background: var(--color-white);
  cursor: pointer;
}

.check input[type="checkbox"]:hover {
  border-color: var(--color-primary);
}

.check input[type="checkbox"]:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
}

.check input[type="checkbox"]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.check.is-error input[type="checkbox"],
.field.is-error input[type="checkbox"] {
  border-color: var(--color-error);
}

.check .cap,
.check label {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 10px;
}

.form > .btn,
.form button[type="submit"],
.contact-block .form .btn,
.card .form .btn,
.form.card > .btn {
  width: 100%;
  max-width: 100%;
  justify-content: center;
  align-self: stretch;
}

/* El aviso para lectores de pantalla no se ve: el mensaje visible es
   .form-success / .form-error. Antes se mostraban los dos y el texto salía doble. */
.form [data-form-status] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.form-success,
.form-error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid currentColor;
  font-weight: var(--fw-medium);
  font-size: 1rem;
  line-height: 1.5;
}

.form-success {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 8%, #fff);
}

.form-error {
  color: var(--color-error);
  background: color-mix(in srgb, var(--color-error) 7%, #fff);
}

.form-success[hidden],
.form-error[hidden] {
  display: none;
}

.form-success::before,
.form-error::before {
  content: "";
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: var(--form-msg-icon) center / contain no-repeat;
  mask: var(--form-msg-icon) center / contain no-repeat;
}

.form-success::before {
  --form-msg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12.5 2.7 2.7L16 9.8'/%3E%3C/svg%3E");
}

.form-error::before {
  --form-msg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E");
}

.form-success .p,
.form-error .p {
  margin: 0;
}

.form.is-success .form-success,
.form.is-success [data-form-success] {
  display: flex !important;
}

.form.is-success .field,
.form.is-success .check,
.form.is-success > .btn,
.form.is-success button[type="submit"] {
  display: none;
}

.form .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 768px) {
  .contact-details {
    grid-template-columns: minmax(0, 1.4fr) minmax(10rem, 1fr);
    gap: var(--space-8);
  }

  .form .row {
    grid-template-columns: 1fr 1fr;
  }

  .form:has(> .field > [data-field="email"]) {
    grid-template-columns: 1fr 1fr;
  }

  .form:has(> .field > [data-field="email"]) > :not(.field:has([data-field="email"]), .field:has([data-field="phone"])) {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1280px) {
  .contact-block > .wrap.split,
  .contact-block > .split {
    grid-template-columns: 6fr 5fr;
    gap: 64px;
    align-items: stretch;
  }

  :is(#home-contacto, #servicios-contacto, #adn-contacto, #contacto-form) > .wrap.split {
    grid-template-columns: minmax(0, 1.1fr) minmax(480px, 0.9fr);
    align-items: center;
    gap: 72px;
  }

  .contact-intro {
    min-height: 0;
    padding: 0;
    gap: var(--space-8);
  }
}

@media (max-width: 479px) {
  .contact-promise {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: var(--space-3);
  }

  .contact-promise .icon {
    width: 36px;
    height: 36px;
    padding: 9px;
  }
}

/* ==========================================================================
   14. Árbol de servicios
   ========================================================================== */

.node {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-sm);
  line-height: 1.3;
  color: var(--color-primary);
  background: var(--color-white);
  text-align: center;
}

.conn {
  width: 1px;
  background: var(--color-line);
}

.tree {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
  width: 100%;
}

.tree .conn {
  display: none;
}

.tree-root,
.tree .tree-root.node {
  align-self: center;
  background: var(--color-white);
  color: var(--color-primary-deep);
  border-color: var(--color-white);
  font-weight: var(--fw-bold);
  font-size: 1rem;
  padding: 16px 28px;
}

.tree-leaves {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
  margin-left: 8px;
  padding-left: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.45);
}

.tree-leaves .node,
.tree-leaves > .node {
  width: 100%;
  background: var(--color-primary-deep);
  color: var(--color-white);
  border-color: var(--color-primary-deep);
}

@media (min-width: 768px) {
  .tree-leaves {
    grid-template-columns: 1fr 1fr;
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
    gap: 20px;
  }
}

@media (min-width: 1280px) {
  .tree:not(:has(.conn)) .tree-root::after {
    content: "";
    display: block;
    width: 1px;
    height: 32px;
    margin: 0 auto -4px;
    background: rgba(255, 255, 255, 0.45);
  }

  .tree-leaves {
    position: relative;
    grid-template-columns: repeat(4, 1fr);
    padding-top: 32px;
  }

  .tree-leaves::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12.5%;
    right: 12.5%;
    height: 1px;
    background: rgba(255, 255, 255, 0.45);
  }

  .tree-leaves > * {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
  }

  .tree-leaves > *::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 32px;
    background: rgba(255, 255, 255, 0.45);
  }
}

/* Servicios 02: hub "Equipo multidisciplinario" con conectores en paralelo hacia
   los 4 servicios (no es un timeline: el equipo orquesta, los servicios cuelgan
   todos del mismo hub). Por debajo de 1280px el split vuelve a 1 columna (regla
   genérica de .split), con el texto primero (orden del DOM). Desde 1280px se
   invierte visualmente (tarjeta a la izquierda, texto a la derecha) solo con
   `order`, sin tocar el DOM. */
@media (min-width: 1280px) {
  #servicios-servicios .split {
    grid-template-columns: 7fr 5fr;
    gap: var(--space-16);
    align-items: center;
  }

  #servicios-servicios .stack {
    order: 1;
  }

  #servicios-servicios .orchestra {
    padding: 64px 0;
  }
}

/* A diferencia de .pillars/.dark (de donde hereda solo la estructura), esta
   tarjeta va sin piel: sin fondo, sin isotipo, sin borde ni sombra. El diagrama
   (hub + conectores + filas) queda apoyado directo sobre el fondo claro de la
   sección. Padding sin horizontal para que el borde del hub alinee con el de
   la columna; --hub-pad-x/--orch-x (más abajo) dependen del padding del hub,
   no del de la tarjeta, así que no se ven afectados. */
#servicios-servicios .orchestra {
  min-height: auto;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 0;
  padding: var(--space-8) 0;
  background: none;
  color: var(--color-primary-deep);
  border: 0;
  box-shadow: none;
}

@media (min-width: 768px) {
  #servicios-servicios .orchestra {
    grid-template-columns: minmax(180px, 30%) 1fr;
    padding: var(--space-12) 0;
  }
}

/* Variables de alineación móvil: la línea de conexión queda atada al centro
   real del ícono del hub por cálculo, no por números sueltos. */
@media (max-width: 767px) {
  #servicios-servicios .orchestra {
    --hub-pad-x: 16px;
    --hub-icon: 44px;
    --orch-branch: 20px;
    --orch-x: calc(var(--hub-pad-x) + var(--hub-icon) / 2 - 1px);
  }
}

/* Hub: pieza de marca con contraste propio. Debe leerse como el centro que
   coordina el sistema, no como una quinta tarjeta de servicio. */
.orchestra-hub {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  min-height: 224px;
  padding: 26px 20px 24px;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 8%, rgba(142, 197, 252, 0.22), transparent 38%),
    linear-gradient(145deg, #213E6A 0%, var(--color-primary-deep) 68%);
  color: var(--color-white);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-lg);
  box-shadow:
    0 18px 38px -18px rgba(22, 41, 74, 0.7),
    0 3px 10px rgba(22, 41, 74, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.orchestra-hub::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  right: -5px;
  width: 10px;
  height: 10px;
  border: 2px solid var(--color-white);
  border-radius: 50%;
  background: #5A97C5;
  transform: translateY(-50%);
  box-shadow: 0 0 0 3px rgba(90, 151, 197, 0.2);
}

.orchestra-hub > * {
  position: relative;
  z-index: 1;
}

/* Móvil: el hub va arriba, horizontal (ícono a la izquierda, texto a la derecha). */
@media (max-width: 767px) {
  .orchestra-hub {
    display: grid;
    grid-template-columns: var(--hub-icon) 1fr;
    grid-template-rows: repeat(3, auto);
    column-gap: var(--space-3);
    row-gap: 4px;
    align-items: center;
    text-align: left;
    min-height: 0;
    padding: 16px var(--hub-pad-x);
  }

  .orchestra-hub::after {
    top: auto;
    right: auto;
    bottom: -5px;
    left: var(--orch-x);
    transform: translateX(-50%);
  }
}

.orchestra-hub-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius-pill);
  color: var(--color-white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.orchestra-hub-icon .icon {
  width: 20px;
  height: 32px;
  fill: currentColor;
  stroke: none;
}

@media (max-width: 767px) {
  .orchestra-hub-icon {
    grid-column: 1;
    grid-row: 1 / -1;
    width: var(--hub-icon);
    height: var(--hub-icon);
  }

  .orchestra-hub-icon .icon {
    width: 16px;
    height: 26px;
  }
}

.orchestra-hub-label {
  margin: 0;
  max-width: 13ch;
  color: var(--color-white);
  font-weight: var(--fw-medium);
  font-size: clamp(1.0625rem, 0.98rem + 0.28vw, 1.25rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.orchestra-hub-label strong {
  display: block;
  font-weight: var(--fw-bold);
  color: #FFFFFF;
}

.orchestra-hub-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #BFDDF5;
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.orchestra-hub-label-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  color: #8EC5FC;
}

.orchestra-hub-label-icon .icon {
  width: 14px;
  height: 14px;
}

.orchestra-hub-meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
  padding: 6px 10px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
}

.orchestra-hub-meta > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8EC5FC;
  box-shadow: 0 0 0 3px rgba(142, 197, 252, 0.13);
}

@media (max-width: 767px) {
  .orchestra-hub-eyebrow,
  .orchestra-hub-label,
  .orchestra-hub-meta {
    grid-column: 2;
    justify-self: start;
  }

  .orchestra-hub-label {
    max-width: none;
    font-size: 1rem;
  }

  .orchestra-hub-label strong {
    display: inline;
  }

  .orchestra-hub-meta {
    padding: 5px 9px;
  }
}

/* Servicios: filas en paralelo, todas colgando del mismo hub. */
.orchestra-services {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0 0 0 calc(var(--orch-x) + var(--orch-branch) + 1px);
  display: grid;
  gap: var(--space-3);
  position: relative;
  --orch-line: #5A97C5;
}

@media (min-width: 768px) {
  .orchestra-services {
    margin: 0;
    padding: 0 0 0 64px;
  }
}

.orchestra-service {
  position: relative;
  display: flex;
  align-items: center;
  justify-self: start;
  gap: var(--space-4);
  width: min(100%, 390px);
  padding: 14px 18px;
  background-color: var(--color-white);
  border: 1px solid rgba(22, 41, 74, 0.1);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.orchestra-service:hover {
  background-color: #F8FBFE;
  border-color: rgba(90, 151, 197, 0.5);
  box-shadow: var(--shadow-md);
}

@media (max-width: 767px) {
  .orchestra-service {
    padding: 12px 14px;
    gap: var(--space-3);
  }
}

.orchestra-service-icon {
  position: relative;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(90, 151, 197, 0.16);
  border: 1.5px solid rgba(90, 151, 197, 0.45);
  border-radius: var(--radius-pill);
  color: var(--color-primary-deep);
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.orchestra-service-icon .icon {
  width: 20px;
  height: 20px;
}

@media (max-width: 767px) {
  .orchestra-service-icon {
    width: 36px;
    height: 36px;
  }

  .orchestra-service-icon .icon {
    width: 18px;
    height: 18px;
  }
}

.orchestra-service:hover .orchestra-service-icon {
  background-color: var(--color-primary);
  border-color: #5A97C5;
  color: var(--color-white);
  box-shadow: 0 0 20px rgba(90, 151, 197, 0.5);
}

/* Más específica que .dark .h3 (misma especificidad, pero esta va después),
   así que el navy gana sobre el blanco genérico de .dark. */
.orchestra-service .h3 {
  margin: 0;
  color: var(--color-primary-deep);
  font-weight: var(--fw-bold);
  font-size: clamp(1rem, 0.9rem + 0.35vw, 1.25rem);
  line-height: 1.25;
}

/* Conectores: rama corta de cada fila hacia una línea vertical común (el
   "árbol" acostado). En móvil la vertical sale del borde inferior del hub, sin
   tronco horizontal; en desktop sale del borde derecho del hub. */
.orchestra-service::before {
  content: "";
  position: absolute;
  left: calc(-1 * (var(--orch-branch) + 1px));
  top: 50%;
  width: var(--orch-branch);
  height: 8px;
  transform: translateY(-50%);
  background:
    linear-gradient(var(--orch-line), var(--orch-line)) left center / 100% 2px no-repeat,
    radial-gradient(circle, #8FC1E6 50%, transparent 52%) right center / 8px 8px no-repeat;
  /* drop-shadow sigue la silueta real de las gradientes (línea + punto) en
     vez de iluminar todo el rectángulo del pseudo, como haría box-shadow.
     Intensidad baja: sobre blanco un glow fuerte se ve sucio. */
  filter: drop-shadow(0 0 6px rgba(90, 151, 197, 0.3));
}

.orchestra-service::after {
  content: "";
  position: absolute;
  left: calc(-1 * (var(--orch-branch) + 1px));
  top: calc(var(--space-3) / -2);
  bottom: calc(var(--space-3) / -2);
  width: 2px;
  background: var(--orch-line);
  box-shadow: 0 0 6px rgba(90, 151, 197, 0.3);
}

/* Móvil: la primera fila estira su línea hacia arriba hasta tocar el hub. */
.orchestra-service:first-child::after {
  top: calc(var(--space-6) * -1);
}

.orchestra-service:last-child::after {
  bottom: 50%;
}

@media (min-width: 768px) {
  .orchestra-services::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 32px;
    height: 3px;
    transform: translateY(-50%);
    background: var(--orch-line);
    box-shadow: 0 0 6px rgba(90, 151, 197, 0.3);
  }

  .orchestra-service::before {
    left: -32px;
    width: 32px;
  }

  .orchestra-service::after {
    left: -32px;
  }

  .orchestra-service:first-child::after {
    top: 50%;
  }
}

/* Señal de orquestación: los íconos de servicio se encienden en cadena. El hub
   queda estable para preservar la jerarquía y evitar que una sombra pulse. */
@media (prefers-reduced-motion: no-preference) {
  .orchestra-service-icon {
    animation: mk-orchestra-glow 6s ease-in-out infinite;
  }

  .orchestra-service:nth-child(1) .orchestra-service-icon {
    animation-delay: 0.3s;
  }

  .orchestra-service:nth-child(2) .orchestra-service-icon {
    animation-delay: 0.6s;
  }

  .orchestra-service:nth-child(3) .orchestra-service-icon {
    animation-delay: 0.9s;
  }

  .orchestra-service:nth-child(4) .orchestra-service-icon {
    animation-delay: 1.2s;
  }

  @keyframes mk-orchestra-glow {
    0%,
    100% {
      border-color: rgba(90, 151, 197, 0.45);
      box-shadow: none;
    }
    50% {
      border-color: #5A97C5;
      box-shadow: 0 0 14px rgba(90, 151, 197, 0.45);
    }
  }
}

/* ==========================================================================
   15. Paneles Misión / Visión / Cultura
   ========================================================================== */

.panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.panel {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  min-height: 260px;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.panel .h3 {
  margin-top: 12px;
}

.panel .p {
  margin-top: 10px;
  font-size: var(--fs-body-sm);
}

.panel--on,
.panel:hover,
.panel:focus-within {
  background: var(--color-primary-deep);
  color: var(--color-white);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

.panel--on .ov,
.panel:hover .ov,
.panel:focus-within .ov,
.panel--on .h3,
.panel:hover .h3,
.panel:focus-within .h3,
.panel--on .p,
.panel:hover .p,
.panel:focus-within .p {
  color: var(--color-white);
}

.panel:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

@media (min-width: 768px) {
  .panels {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ADN 01 — composición editorial alineada con Home y Servicios.
   La misión funciona como pieza principal; visión y cultura completan el
   sistema sin depender del antiguo patrón de tres tarjetas idénticas. */
.adn-mision-layout {
  display: grid;
  gap: var(--space-12);
  align-items: start;
}

.adn-mision-intro {
  gap: var(--space-6);
  max-width: 760px;
}

#adn-mision .adn-mision-intro .lead {
  max-width: 52ch;
  color: var(--color-ink-soft);
  line-height: 1.55;
  text-wrap: pretty;
}

#adn-mision .panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

#adn-mision .panel {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 260px;
  overflow: hidden;
  padding: clamp(24px, 3vw, 40px);
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(42, 68, 119, 0.14);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 40px rgba(22, 41, 74, 0.07);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    transform 320ms var(--ease-out),
    box-shadow 320ms var(--ease-out),
    border-color 320ms var(--ease-out),
    background-color 320ms var(--ease-out);
}

#adn-mision .panel::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: var(--gradient-iso);
  transform: scaleX(0.38);
  transform-origin: left center;
  transition: transform 420ms var(--ease-out);
}

#adn-mision .panel .ov {
  margin-bottom: auto;
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
}

#adn-mision .panel .h3 {
  max-width: 25ch;
  margin-top: var(--space-8);
  color: var(--color-primary-deep);
  font-size: clamp(1.35rem, 1.15rem + 0.65vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

#adn-mision .panel .p {
  max-width: 48ch;
  margin-top: var(--space-4);
  color: var(--color-ink-soft);
  font-size: 1rem;
  line-height: 1.6;
  text-wrap: pretty;
}

#adn-mision .panel--on {
  min-height: 320px;
  background:
    radial-gradient(circle at 100% 0%, rgba(90, 151, 197, 0.34), transparent 44%),
    linear-gradient(145deg, #1d3761 0%, var(--color-primary-deep) 66%);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 56px rgba(22, 41, 74, 0.24);
}

#adn-mision .panel--on::before {
  background: linear-gradient(90deg, #8ec5fc, rgba(142, 197, 252, 0));
  transform: scaleX(0.62);
}

#adn-mision .panel--on .ov {
  color: #8ec5fc;
}

#adn-mision .panel--on .h3,
#adn-mision .panel--on .p {
  color: var(--color-white);
}

#adn-mision .panel:hover {
  transform: translateY(-5px);
}

#adn-mision .panel:hover::before,
#adn-mision .panel:focus-within::before {
  transform: scaleX(1);
}

#adn-mision .panel:not(.panel--on):hover,
#adn-mision .panel:not(.panel--on):focus-within {
  background: rgba(255, 255, 255, 0.98);
  color: var(--color-ink);
  border-color: rgba(42, 68, 119, 0.3);
  box-shadow: 0 22px 48px rgba(22, 41, 74, 0.13);
}

#adn-mision .panel:not(.panel--on):hover .ov,
#adn-mision .panel:not(.panel--on):focus-within .ov {
  color: var(--color-primary);
}

#adn-mision .panel:not(.panel--on):hover .h3,
#adn-mision .panel:not(.panel--on):focus-within .h3 {
  color: var(--color-primary-deep);
}

#adn-mision .panel:not(.panel--on):hover .p,
#adn-mision .panel:not(.panel--on):focus-within .p {
  color: var(--color-ink-soft);
}

@media (min-width: 768px) {
  #adn-mision .panels {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }

  #adn-mision .panel--on {
    grid-row: span 2;
    min-height: 480px;
  }

  #adn-mision .panel:not(.panel--on) {
    min-height: 232px;
  }
}

@media (min-width: 1280px) {
  .adn-mision-layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-16);
    align-items: center;
  }

  .adn-mision-intro {
    padding-right: var(--space-8);
  }
}

@media (prefers-reduced-motion: reduce) {
  #adn-mision .panel,
  #adn-mision .panel::before {
    transition: none;
  }

  #adn-mision .panel:hover {
    transform: none;
  }
}

/* ========================================================================== 
   16. Carrusel de equipo
   ========================================================================== */

/* ADN 02 — retratos editoriales. La sección continúa el lenguaje de Home y
   Servicios: isotipo de marca de agua compartido con Misión vía .home-light-flow,
   título con gesto de marca y superficies blancas nítidas. */
#adn-equipo > .wrap {
  position: relative;
  z-index: 1;
}

#adn-equipo .carousel {
  overflow: hidden;
}

#adn-equipo .team-header {
  position: relative;
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid rgba(42, 68, 119, 0.16);
}

#adn-equipo .team-header > .stack {
  gap: var(--space-3);
  max-width: 920px;
}

#adn-equipo .team-header .lead {
  /* 62ch deja la frase fija del equipo en una línea en escritorio. */
  max-width: 62ch;
  margin-top: var(--space-2);
  color: var(--color-ink-soft);
  line-height: 1.5;
  text-wrap: balance;
}

#adn-equipo .team-header .sm:not(.person-note) {
  margin-top: var(--space-3);
  color: var(--color-primary-deep);
  font-weight: var(--fw-bold);
  letter-spacing: 0.015em;
}

#adn-equipo .person-note {
  color: var(--color-ink-soft);
}

#adn-equipo .team-controls {
  align-self: end;
  justify-content: flex-end;
  gap: var(--space-3);
}

.carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

[data-carousel-track] {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-4);
  width: 100%;
  min-width: 0;
  transition: transform var(--dur) var(--ease);
}

.person {
  flex: 0 0 calc(100% - 24px - var(--space-4));
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(42, 68, 119, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 34px rgba(22, 41, 74, 0.08);
  padding: 0 0 var(--space-6);
  transition:
    box-shadow 320ms var(--ease-out),
    transform 320ms var(--ease-out),
    border-color 320ms var(--ease-out);
}

.person:hover {
  border-color: rgba(90, 151, 197, 0.42);
  box-shadow: 0 24px 48px rgba(22, 41, 74, 0.15);
  transform: translateY(-6px);
}

.person:focus-visible,
.person:focus-within {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.person-avatar {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 0;
  display: block;
  background: var(--color-hover);
  filter: saturate(0.92) contrast(1.02);
  transition: transform 600ms var(--ease-out), filter 320ms var(--ease-out);
}

/* Template v2: el retrato y el fondo son capas independientes. Así el fondo
   queda plano, consistente y editable sin volver a intervenir cada foto. */
.person-portrait--template-v2 {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #e9eef3;
}

.person-portrait--template-v2::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: #d9e3ec;
  clip-path: polygon(67% 0, 100% 0, 100% 100%, 91% 100%);
}

.person-portrait--template-v2 .person-avatar {
  position: relative;
  z-index: 1;
  height: 100%;
  background: transparent;
}

/* Template v3: variante cromática tomada del logo del header. Conserva el
   fondo en planos sólidos para evitar el efecto de halo o cielo de la v1. */
.person-portrait--template-v3 {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #edf2f7;
}

.person-portrait--template-v3::before,
.person-portrait--template-v3::after {
  content: "";
  position: absolute;
  inset: 0;
}

.person-portrait--template-v3::before {
  z-index: 0;
  background: #5a97c5;
  clip-path: polygon(69% 0, 100% 0, 100% 100%, 93% 100%);
}

.person-portrait--template-v3::after {
  z-index: 1;
  background: #2a4477;
  clip-path: polygon(66.5% 0, 69.5% 0, 93.5% 100%, 90.5% 100%);
}

.person-portrait--template-v3 .person-avatar {
  position: relative;
  z-index: 2;
  height: 100%;
  background: transparent;
}

/* Template v4: recorte con alfa real. El fondo vive en CSS
   (--person-portrait-bg) y la sombra sigue la silueta. */
.person-portrait--template-v4 {
  --person-portrait-bg: color-mix(in srgb, var(--color-primary) 12%, var(--color-white));
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--person-portrait-bg);
}

.person-portrait--template-v4 .person-avatar {
  position: relative;
  z-index: 1;
  height: 100%;
  background: transparent;
  filter:
    saturate(0.96)
    contrast(1.02)
    drop-shadow(0 6px 8px rgba(22, 41, 74, 0.38))
    drop-shadow(0 18px 22px rgba(22, 41, 74, 0.28));
}

/* Iguala la escala visual de los retratos 3 y 4 con las cards 1 y 2.
   --fitted-sm recorta un 5 % extra sobre esa escala (0.95 × 0.95). */
.person-portrait--fitted {
  --person-avatar-scale: 0.95;
}

.person-portrait--fitted-sm {
  --person-avatar-scale: 0.9025;
}

.person-portrait--nudge-y {
  --person-avatar-shift-y: 4px;
}

.person-portrait--nudge-x {
  --person-avatar-shift-x: 12px;
}

.person-portrait--fitted .person-avatar {
  transform: scale(var(--person-avatar-scale));
  transform-origin: center bottom;
}

.person-portrait--nudge-y .person-avatar {
  top: var(--person-avatar-shift-y, 4px);
}

.person-portrait--nudge-x .person-avatar {
  left: var(--person-avatar-shift-x, 12px);
}

.person:hover .person-avatar {
  filter: saturate(1) contrast(1.03);
  transform: scale(1.025);
}

.person:hover .person-portrait--template-v4 .person-avatar {
  filter:
    saturate(1)
    contrast(1.03)
    drop-shadow(0 8px 10px rgba(22, 41, 74, 0.4))
    drop-shadow(0 22px 28px rgba(22, 41, 74, 0.32));
}

.person:hover .person-portrait--fitted .person-avatar {
  transform: scale(calc(var(--person-avatar-scale) * 1.025));
}

.person-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  background: var(--color-hover);
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  font-size: 1.5rem;
}

.person:has(.person-avatar[src]) .person-initials {
  display: none;
}

.person .h3 {
  margin: var(--space-6) var(--space-6) 0;
  color: var(--color-primary-deep);
  font-size: clamp(1.25rem, 1.1rem + 0.35vw, 1.5rem);
  font-weight: var(--fw-bold);
  line-height: 1.18;
  letter-spacing: -0.015em;
}

.person > .sm {
  min-height: 1.5em;
  margin: var(--space-2) var(--space-6) 0;
  color: var(--color-ink-soft);
  font-size: 0.9375rem;
}

.person-badge {
  display: block;
  width: 96px;
  height: auto;
  aspect-ratio: 600 / 163;
  margin: var(--space-4) var(--space-6) 0;
}

.person-note {
  font-size: var(--fs-body-sm);
  color: var(--color-ink-soft);
}

[data-carousel-prev],
[data-carousel-next] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(42, 68, 119, 0.2);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-primary);
  box-shadow: 0 6px 18px rgba(22, 41, 74, 0.08);
  transition:
    color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

[data-carousel-prev]:hover,
[data-carousel-next]:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-deep);
  color: var(--color-white);
  transform: translateY(-2px);
}

[data-carousel-prev][aria-disabled="true"],
[data-carousel-next][aria-disabled="true"] {
  opacity: 0.42;
  transform: none;
}

[data-carousel-dots] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-6);
}

.dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  position: relative;
}

.dot::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-line);
}

.dot--on::after,
.dot[aria-current="true"]::after {
  width: 24px;
  height: 6px;
  background: var(--gradient-iso);
}

[data-carousel-status] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 768px) {
  .person {
    flex-basis: calc((100% - var(--space-4)) / 2);
  }
}

@media (min-width: 1280px) {
  #adn-equipo .team-header {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    gap: var(--space-16);
    align-items: end;
  }

  .person {
    /* 30% más chicas que el 3-up anterior. El carrusel mide cuántas entran. */
    flex-basis: calc((100% - 2 * var(--space-4)) * 0.7 / 3);
    padding-bottom: 17px;
  }

  .person:hover {
    transform: translateY(-4px);
  }

  .person .h3 {
    margin: 17px 17px 0;
    font-size: clamp(1.125rem, 1.05rem + 0.2vw, 1.3125rem);
  }

  .person > .sm {
    margin-right: 17px;
    margin-left: 17px;
  }

  .person-badge {
    width: 80px;
    margin: 11px 17px 0;
  }
}

@media (max-width: 767px) {
  #adn-equipo .team-header {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
  }

  #adn-equipo .team-controls {
    justify-content: flex-start;
  }

  .person .h3,
  .person > .sm,
  .person-badge {
    margin-right: var(--space-4);
    margin-left: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .person,
  .person-avatar,
  [data-carousel-prev],
  [data-carousel-next] {
    transition: none;
  }

  .person:hover,
  .person:hover .person-avatar {
    transform: none;
  }
}

/* ==========================================================================
   17. Mapa + HQ
   ========================================================================== */

.presence-layout {
  display: grid;
  grid-template-areas:
    "intro"
    "stats"
    "map"
    "hq";
  gap: var(--space-8);
  align-items: start;
}

.presence-intro {
  grid-area: intro;
  gap: var(--space-6);
  max-width: 42rem;
}

/* Mismo formato de título en dos niveles que ADN (kicker + accent + payoff),
   con tamaño propio para que cada línea entre sin cortar en la columna de 400px. */
.presence-intro .h2 {
  display: grid;
  justify-items: start;
  gap: 0.08em;
  max-width: none;
  font-size: clamp(1.75rem, 1.4rem + 1vw, 1.95rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.presence-intro .h2-accent {
  margin-top: 0;
  font-size: 1em;
  font-weight: var(--fw-medium);
  color: var(--color-primary);
}

.presence-intro .lead {
  max-width: 38rem;
  color: var(--color-ink-soft);
  line-height: 1.55;
  text-wrap: pretty;
}

/* El color del lead gana a `a`; el enlace ICBA recupera el primario. */
.presence-intro .lead a {
  position: relative;
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

.presence-intro .lead a:hover {
  color: var(--color-primary-deep);
  text-decoration-color: currentColor;
}

.presence-stats {
  grid-area: stats;
  display: grid;
  gap: 0;
  border-block: 1px solid var(--color-border);
}

.presence-stat {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  padding-block: var(--space-4);
}

.presence-stat + .presence-stat {
  border-top: 1px solid var(--color-border);
}

.presence-stat-icon {
  display: grid;
  place-items: center;
  width: 52px;
  aspect-ratio: 1;
  border: 1.5px solid var(--color-primary);
  border-radius: 50%;
  color: var(--color-primary);
  background: var(--color-white);
}

.presence-stat-icon--filled {
  border-color: transparent;
  color: var(--color-white);
  background: var(--gradient-iso);
}

.presence-stat p {
  display: grid;
  gap: 3px;
  margin: 0;
}

.presence-stat strong {
  color: var(--color-primary-deep);
  font-size: clamp(2rem, 1.4rem + 1.5vw, 3rem);
  font-weight: var(--fw-medium);
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.presence-stat p span {
  color: var(--color-ink-soft);
  font-size: var(--fs-body-sm);
  line-height: 1.35;
  text-wrap: balance;
}

.map {
  grid-area: map;
  position: relative;
  aspect-ratio: 829.8 / 492;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 29% 72%, rgba(90, 151, 197, 0.12), transparent 26%),
    linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
  border: 1px solid var(--color-border);
  box-shadow: 0 16px 38px -30px rgba(22, 41, 74, 0.34);
  min-width: 0;
}

.map-canvas {
  position: absolute;
  inset: 0;
}

.map-canvas > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  display: block;
}

.map-marker {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(22px, 1.8vw, 27px);
  aspect-ratio: 1;
  border: 2px solid var(--color-white);
  border-radius: 50%;
  background: var(--gradient-iso);
  box-shadow:
    0 0 0 2px rgba(42, 68, 119, 0.2),
    0 4px 12px rgba(22, 41, 74, 0.24);
  transform: translate(-50%, -50%);
  color: var(--color-white);
  font-size: 0.625rem;
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: 0.04em;
}

.map-marker::after {
  content: attr(data-country);
}

.map-marker--ar {
  left: 33.5%;
  top: 83.5%;
}

.map-marker--uy {
  left: 37.2%;
  top: 79%;
}

.map-marker--py {
  left: 34%;
  top: 72.5%;
}

.map-marker--br {
  left: 40.5%;
  top: 66.5%;
}

.map-marker--cl {
  left: 31.6%;
  top: 77.4%;
}

.map-marker--pe {
  left: 29.9%;
  top: 64.1%;
}

.map-marker--bo {
  left: 32.8%;
  top: 66.7%;
}

.map-marker--ec {
  left: 29.7%;
  top: 58.6%;
}

.map-marker--ve {
  left: 32.9%;
  top: 53.1%;
}

.map-marker--mx {
  left: 23.6%;
  top: 42.7%;
}

.map-marker--pa {
  left: 29%;
  top: 52.3%;
}

.map-legend {
  position: absolute;
  right: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  max-width: calc(100% - 24px);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 8px 12px;
  border: 1px solid rgba(42, 68, 119, 0.12);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 20px rgba(22, 41, 74, 0.08);
  color: var(--color-primary-deep);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  backdrop-filter: blur(6px);
}

.map-legend-swatch {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--gradient-iso);
}

.hq-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  width: 100%;
}

.presence-hq {
  grid-area: hq;
  align-self: end;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: start;
  gap: var(--space-4);
}

.presence-hq-heading .h3 {
  margin-block: var(--space-1) 0;
}

.presence-hq p {
  margin-block: 0;
}

.presence-hq p + p {
  margin-top: var(--space-2);
}

.presence-hq-details {
  display: grid;
  gap: var(--space-1);
}

.presence-hq-details address {
  font-style: normal;
}

.presence-hq-details p {
  white-space: nowrap;
}

@media (max-width: 479px) {
  .presence-hq {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .presence-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .presence-stat {
    padding-inline: var(--space-4);
  }

  .presence-stat:first-child {
    padding-left: 0;
  }

  .presence-stat + .presence-stat {
    border-top: 0;
    border-left: 1px solid var(--color-border);
  }
}

@media (min-width: 992px) {
  .presence-layout {
    grid-template-columns: minmax(340px, 400px) minmax(0, 1fr);
    /* Los espacios exteriores centran la columna completa junto al mapa. */
    grid-template-rows: 1fr auto var(--space-6) auto var(--space-6) auto 1fr;
    grid-template-areas:
      ". map"
      "intro map"
      ". map"
      "stats map"
      ". map"
      "hq map"
      ". map";
    column-gap: clamp(40px, 4vw, 64px);
    row-gap: 0;
    justify-content: center;
  }

  .presence-intro {
    display: flex;
    max-width: 400px;
    padding-top: var(--space-2);
  }

  .presence-intro .lead {
    max-width: 38rem;
  }

  .presence-layout .map {
    align-self: stretch;
    /* Altura propia: el texto breve no recorta el mundo ni los marcadores. */
    width: 100%;
    aspect-ratio: 3 / 2;
    min-height: 0;
  }

  .presence-layout .map-canvas {
    inset: auto 0;
    top: 50%;
    aspect-ratio: 829.8 / 492;
    transform: translateY(-50%);
  }

  .presence-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-self: start;
  }

  .presence-stat {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .presence-stat:first-child {
    padding-left: 0;
  }

  .presence-stat + .presence-stat {
    border-top: 0;
    border-left: 1px solid var(--color-border);
  }

  .presence-stat-icon {
    width: 44px;
  }

  .presence-stat strong {
    font-size: clamp(2rem, 2.4vw, 2.5rem);
  }

  .presence-hq {
    align-self: end;
    padding: var(--space-6);
  }
}

.row:has(> .map),
.split:has(> .map) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

@media (min-width: 992px) {
  .row:has(> .map),
  .split:has(> .map) {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--space-8);
  }
}

@media (min-width: 1280px) {
  .row:has(> .map),
  .split:has(> .map) {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 40px;
  }
}

@media (min-width: 1440px) {
  .row:has(> .map),
  .split:has(> .map) {
    grid-template-columns: minmax(0, 980px) 320px;
    justify-content: center;
    gap: var(--space-12);
  }
}

@media (max-width: 479px) {
  .map-legend {
    right: 10px;
    bottom: 10px;
    max-width: calc(100% - 20px);
    padding: 6px 9px;
    font-size: 0.6875rem;
  }

  .map-marker {
    width: 18px;
    font-size: 0.5625rem;
  }

  .map-marker--ar {
    left: 33.5%;
    top: 83.5%;
  }

  .map-marker--uy {
    left: 37.2%;
    top: 79%;
  }

  .map-marker--py {
    left: 34%;
    top: 72.5%;
  }

  .map-marker--br {
    left: 40.5%;
    top: 66.5%;
  }
}

/* ==========================================================================
   18. Nextnav
   ========================================================================== */

.nextnav {
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-16);
}

.nextnav .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.nextcard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  flex: 1;
  min-width: min(100%, 16rem);
}

.nextcard .stack {
  flex: 1 1 auto;
  min-width: min(100%, 12rem);
}

.nextcard .h3 {
  font-weight: var(--fw-bold);
}

.nextcard .btn2 {
  flex: none;
}

@media (min-width: 768px) {
  .nextnav {
    padding-block: 56px;
  }

  .nextnav .row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1280px) {
  .nextcard {
    flex-direction: row;
    align-items: center;
  }
}

/* 18b. Nextnav fotográfico (Home) — fase 11 */

.nextnav.nextnav--photo {
  background: var(--color-bg-soft);
  border-top: none;
  padding-block: var(--space-16);
}

.nextnav.nextnav--photo .wrap.stack {
  gap: var(--space-8);
}

.nextnav.nextnav--photo .nextnav-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.nextnav.nextnav--photo .nextnav-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.nextnav.nextnav--photo .nextcard--photo {
  display: grid;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  align-items: stretch;
  justify-content: stretch;
  gap: 0;
  flex: none;
  min-width: 0;
  min-height: 380px;
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-primary-deep);
  box-shadow: var(--shadow-md);
  transition: box-shadow 600ms var(--ease-out);
}

.nextnav.nextnav--photo .nextcard--photo:not(.nextcard--team) {
  min-height: 480px;
}

.nextnav.nextnav--photo .nextcard-media {
  grid-area: 1 / 1;
  position: relative;
  z-index: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border-radius: inherit;
}

.nextnav.nextnav--photo .nextcard-media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.nextnav.nextnav--photo .nextcard--photo:not(.nextcard--team) .nextcard-media > img {
  object-position: 50% 30%;
}

.nextnav.nextnav--photo .nextcard-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(22,41,74,.94) 0%, rgba(22,41,74,.78) 55%, rgba(22,41,74,.2) 100%);
}

.nextnav.nextnav--photo .nextcard--photo:not(.nextcard--team) .nextcard-media::after {
  background: linear-gradient(to top, rgba(22,41,74,.5) 0%, rgba(22,41,74,.15) 100%);
}

.nextnav.nextnav--photo .nextcard-media--map {
  background: var(--gradient-iso);
}

.nextnav.nextnav--photo .nextcard-map {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 50%;
  max-width: none;
  object-fit: contain;
  object-position: center;
  opacity: 0.5;
}

.nextnav.nextnav--photo .nextcard-faces {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: var(--space-6);
}

.nextnav.nextnav--photo .nextcard-faces > * + * {
  margin-left: -14px;
}

.nextnav.nextnav--photo .nextcard-faces img {
  width: 56px;
  height: 56px;
  max-width: none;
  flex-shrink: 0;
  object-fit: cover;
  /* Los recortes del template v2 traen alfa real, así que el fondo plano va en
     CSS con la misma mezcla que las person-cards de ADN. Sin esto el navy de la
     card se transparenta detrás de la persona. */
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-white));
  border: 3px solid var(--color-primary-deep);
  border-radius: var(--radius-pill);
}

.nextnav.nextnav--photo .nextcard-faces-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border: 3px solid rgba(255,255,255,.28);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.14);
  color: var(--color-white);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  line-height: 1;
}

/* Caras del equipo sobre una card fotográfica (sin mapa): el borde azul se
   pierde contra la foto, así que van con aro claro y sombra para separarlas. */
.nextnav.nextnav--photo .nextcard--photo:not(.nextcard--team) .nextcard-faces img {
  border-color: rgba(255,255,255,.92);
  box-shadow: 0 6px 18px rgba(12,24,45,.38);
}

.nextnav.nextnav--photo .nextcard--photo:not(.nextcard--team) .nextcard-faces-more {
  border-color: rgba(255,255,255,.6);
  background: rgba(12,24,45,.42);
  box-shadow: 0 6px 18px rgba(12,24,45,.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.nextnav.nextnav--photo .nextcard-body {
  grid-area: 1 / 1;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-self: end;
  gap: var(--space-3);
  padding: var(--space-6);
  color: var(--color-white);
}

.nextnav.nextnav--photo .nextcard--photo:not(.nextcard--team) .nextcard-body {
  padding-top: calc(var(--space-24) + var(--space-6));
  background: linear-gradient(to top, rgba(22,41,74,.94) 0%, rgba(22,41,74,.88) calc(100% - var(--space-24)), rgba(22,41,74,.5) calc(100% - var(--space-12)), rgba(22,41,74,0) 100%);
}

.nextnav.nextnav--photo .nextcard-kicker {
  margin: 0;
  font-size: var(--fs-overline);
  font-weight: var(--fw-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-on-dark);
}

.nextnav.nextnav--photo .nextcard-title {
  margin: 0;
  max-width: 22ch;
  color: var(--color-white);
  font-size: var(--home-h3);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  text-wrap: balance;
}

.nextnav.nextnav--photo .nextcard-text {
  margin: 0;
  max-width: 44ch;
  color: var(--ink-on-dark);
  font-size: var(--fs-body);
}

.nextnav.nextnav--photo .nextcard-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nextnav.nextnav--photo .nextcard-tags li {
  padding: 4px 12px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.08);
  color: var(--color-white);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  list-style: none;
}

.nextnav.nextnav--photo .nextcard-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  border-radius: var(--radius-lg);
  color: var(--color-white);
  font-weight: var(--fw-bold);
  text-decoration: none;
}

.nextnav.nextnav--photo .nextcard-link:hover,
.nextnav.nextnav--photo .nextcard-link:focus-visible {
  color: var(--color-white);
  text-decoration: none;
}

.nextnav.nextnav--photo .nextcard-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-primary);
}

.nextnav.nextnav--photo .nextcard-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.nextnav.nextnav--photo .nextcard-link:focus-visible {
  outline: none;
}

.nextnav.nextnav--photo .nextcard-link:focus-visible::after {
  outline: var(--focus-ring);
  outline-offset: 4px;
  border-radius: inherit;
}

.nextnav.nextnav--photo .nextcard--photo:has(.nextcard-link:focus-visible) {
  overflow: visible;
}

@media (min-width: 768px) {
  .nextnav.nextnav--photo {
    padding-block: var(--space-24);
  }

  .nextnav.nextnav--photo .nextnav-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .nextnav.nextnav--photo .nextcard--photo {
    min-height: clamp(460px, 38vw, 560px);
  }

  .nextnav.nextnav--photo .nextcard--photo:not(.nextcard--team) {
    min-height: clamp(460px, 38vw, 560px);
  }
}

@media (min-width: 1280px) {
  .nextnav.nextnav--photo .nextcard--photo {
    display: grid;
    align-items: stretch;
  }

  .nextnav.nextnav--photo .nextcard-body {
    padding: var(--space-8);
  }

  .nextnav.nextnav--photo .nextcard--photo:not(.nextcard--team) .nextcard-body {
    padding-top: calc(var(--space-24) + var(--space-8));
  }

  .nextnav.nextnav--photo .nextcard-faces {
    padding: var(--space-8);
  }

  .nextnav.nextnav--photo .nextcard-faces img,
  .nextnav.nextnav--photo .nextcard-faces-more {
    width: 64px;
    height: 64px;
  }

  .nextnav.nextnav--photo .nextcard-arrow {
    width: 44px;
    height: 44px;
  }
}

@media (hover: hover) {
  .nextnav.nextnav--photo .nextcard--photo:hover,
  .nextnav.nextnav--photo .nextcard--photo:has(.nextcard-link:focus-visible) {
    box-shadow: var(--shadow-lg);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .nextnav.nextnav--photo .nextcard--photo {
    transition:
      transform 600ms var(--ease-out),
      box-shadow 600ms var(--ease-out);
  }

  .nextnav.nextnav--photo .nextcard-media > img,
  .nextnav.nextnav--photo .nextcard-map,
  .nextnav.nextnav--photo .nextcard-arrow,
  .nextnav.nextnav--photo .nextcard-faces > * + * {
    transition: transform 600ms var(--ease-out), margin-left 600ms var(--ease-out);
  }

  .nextnav.nextnav--photo .nextcard--photo:hover,
  .nextnav.nextnav--photo .nextcard--photo:has(.nextcard-link:focus-visible) {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }

  .nextnav.nextnav--photo .nextcard--photo:hover .nextcard-media > img:not(.nextcard-map),
  .nextnav.nextnav--photo .nextcard--photo:has(.nextcard-link:focus-visible) .nextcard-media > img:not(.nextcard-map) {
    transform: scale(1.05);
  }

  .nextnav.nextnav--photo .nextcard--photo:hover .nextcard-map,
  .nextnav.nextnav--photo .nextcard--photo:has(.nextcard-link:focus-visible) .nextcard-map {
    transform: scale(1.03);
  }

  .nextnav.nextnav--photo .nextcard--photo:hover .nextcard-faces > * + *,
  .nextnav.nextnav--photo .nextcard--photo:has(.nextcard-link:focus-visible) .nextcard-faces > * + * {
    margin-left: -6px;
  }

  .nextnav.nextnav--photo .nextcard--photo:hover .nextcard-arrow,
  .nextnav.nextnav--photo .nextcard--photo:has(.nextcard-link:focus-visible) .nextcard-arrow {
    transform: translateX(4px);
  }

  .nextnav.nextnav--photo .nextcard--photo:hover .nextcard-link,
  .nextnav.nextnav--photo .nextcard-link:focus-visible {
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nextnav.nextnav--photo .nextcard--photo {
    transform: none;
    transition: box-shadow 600ms var(--ease-out);
  }

  .nextnav.nextnav--photo .nextcard-media img,
  .nextnav.nextnav--photo .nextcard-map,
  .nextnav.nextnav--photo .nextcard-arrow {
    transform: none;
    transition: none;
  }

  .nextnav.nextnav--photo .nextcard-faces > * + * {
    transition: none;
  }
}

/* ==========================================================================
   19. Footer + crédito
   ========================================================================== */

.site-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--space-16) 0 var(--space-8);
}

/* Brillo superior derecho + hairline de borde superior, en una sola capa
   para dejar el ::after libre para la marca de agua. */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(142, 197, 252, 0.45), transparent) top / 100% 1px no-repeat,
    radial-gradient(640px circle at 88% 0%, rgba(90, 151, 197, 0.16), transparent 65%) top right / 100% 100% no-repeat;
}

/* Isotipo como marca de agua, lado derecho, más alto que el footer y
   recortado por el overflow:hidden del contenedor. Sin espejar. */
.site-footer::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -16%;
  bottom: -16%;
  right: 0;
  width: clamp(160px, 42vw, 460px);
  background-image: url("/assets/visual/brand/isotipo-white-grad.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: auto 100%;
  opacity: 0.07;
  pointer-events: none;
}

.site-footer .wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.footer-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.site-footer a:not(.btn4) {
  color: var(--ink-on-dark);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.site-footer a:not(.btn4):hover {
  color: var(--color-white);
  text-decoration-line: underline;
}

.site-footer .cap {
  color: var(--ink-on-dark);
}

/* Títulos de columna: overline celeste + barrita de acento */
.site-footer .ov {
  color: #8EC5FC;
  font-weight: var(--fw-bold);
}

.site-footer .ov::after {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  margin-top: 8px;
  background: #8EC5FC;
  border-radius: 1px;
}

/* Columna marca: logo (alto vía regla suelta) + frase */
.footer-tagline {
  margin: 0;
  font-size: 1.125rem;
  font-weight: var(--fw-medium);
  line-height: 1.5;
  color: var(--color-white);
  max-width: 19ch;
  text-wrap: balance;
}

/* Columna navegación */
.footer-navlist {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.site-footer .footer-navlist a {
  width: fit-content;
  color: var(--color-white);
  font-size: 1rem;
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.site-footer .footer-navlist a:hover {
  color: var(--color-white);
}

/* Columna oficina: dirección + CTA */
.footer-address {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-on-dark);
}

.site-footer .footer-address a {
  color: var(--color-white);
  font-weight: var(--fw-medium);
  text-decoration: none;
}

.site-footer .footer-address a:hover {
  text-decoration: underline;
}

/* Columna síguenos: botón circular */
.site-footer a.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-pill);
  color: var(--color-white);
  text-decoration: none;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.site-footer a.footer-social-link:hover,
.site-footer a.footer-social-link:focus-visible {
  background: var(--color-white);
  color: var(--color-primary-deep);
  text-decoration: none;
  transform: translateY(-2px);
}

/* Barra inferior */
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom .cap,
.footer-bottom .credit {
  font-size: 0.8125rem;
  line-height: 1.4;
}

.site-footer .footer-bottom .credit {
  color: rgba(201, 212, 229, 0.7);
}

.site-footer .footer-bottom .credit a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.site-footer .footer-bottom .credit a:hover {
  color: var(--color-white);
}

@media (min-width: 768px) {
  .footer-main {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-8);
    row-gap: var(--space-12);
  }

  .footer-bottom {
    display: grid;
    /* Dos piezas de información, dos extremos: evita una columna central
       vacía que desplazaba el crédito a mitad de la franja. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-4);
    padding-top: var(--space-4);
  }

  .footer-bottom .cap:first-child {
    justify-self: start;
  }

  .footer-bottom .credit {
    justify-self: center;
    text-align: center;
  }

  .footer-bottom .cap:last-child {
    justify-self: end;
    width: 100%;
    text-align: right;
  }
}

@media (min-width: 1280px) {
  .site-footer {
    padding-top: var(--space-24);
  }

  .footer-main {
    grid-template-columns: 2fr 1fr 1.4fr 1fr;
    row-gap: var(--space-8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer a:not(.btn4),
  .site-footer .footer-navlist a,
  .site-footer a.footer-social-link {
    transition: none;
  }

  .site-footer a.footer-social-link:hover,
  .site-footer a.footer-social-link:focus-visible {
    transform: none;
  }
}

/* ==========================================================================
   20. Iconos + vistas
   ========================================================================== */

.icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn .icon,
.btn2 .icon,
.btn3 .icon,
.btn4 .icon,
.nav-toggle .icon {
  width: 20px;
  height: 20px;
}

.view {
  display: block;
}

.view.is-active {
  display: block;
}

.view[hidden] {
  display: none !important;
}

/* ==========================================================================
   21. Movimiento reducido — sin translateY, sin fundidos, carrusel instantáneo
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .btn,
  .btn2,
  .btn3,
  .btn4,
  .panel,
  .person,
  .pillar,
  .pillar-index,
  [data-carousel-track] {
    transition: none;
  }

  .btn:active,
  .btn2:active,
  .btn3:active,
  .btn4:active,
  .person:hover,
  .person:focus-visible,
  .pillar:hover,
  .pillar:hover .pillar-index {
    transform: none;
  }

  .person:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--color-primary);
  }

  .site-header,
  .site-header::before,
  .site-header::after,
  .site-header .nav::after,
  .logo-img,
  .navlinks a {
    transition: none;
  }

  .site-header.is-hidden {
    transform: none;
  }
}