/* ==========================================================================
   datimpacto — sistema de diseño
   Poppins + morado de marca. Ritmo alternado oscuro / crema.
   Un solo archivo, sin dependencias.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */

:root {
  /* Morados de marca. Tomados de outputs/one-pager y outputs/deck-ventas.
     El más oscuro de la marca es #5A2470: no se usa nada por debajo de ese. */
  --p-deep:   #5A2470;   /* base de todas las bandas oscuras */
  --p-dark:   #5A2470;
  --p-mid:    #6D2D86;
  --p-main:   #9450A9;
  --p-light:  #BC74CC;
  --p-pale:   #F1E6FA;
  --p-pale-2: #F8F1FC;

  /* Neutros */
  --cream:    #F4EFEC;
  --cream-2:  #EDE8F5;
  --white:    #FFFFFF;
  --ink:      #1A1A2E;
  --ink-soft: #5A5A72;
  --line:     #E4DAD4;

  /* Acentos del deck */
  --teal:      #15BADD;
  --teal-dk:   #0A6E83;   /* variante accesible del teal sobre fondo claro */
  --teal-pale: #E2F7FD;
  --teal-lt:   #5FD6EF;   /* teal sobre fondo oscuro */
  --orange:    #F7A81B;

  /* Sobre fondo oscuro */
  --on-dark:      #F8F3FB;
  --on-dark-soft: #DCC9E8;
  --on-dark-line: rgba(255, 255, 255, .17);

  /* Gradiente de marca. Se usa en momentos puntuales: hero y cierre. */
  --grad:   linear-gradient(135deg, #5A2470, #6D2D86, #9450A9, #BC74CC);
  --grad-h: linear-gradient(to right, #5A2470, #6D2D86, #9450A9, #BC74CC);
  /* Versión acotada al tramo oscuro, para fondos que llevan texto encima */
  --grad-bg: linear-gradient(135deg, #5A2470 0%, #63277A 45%, #7B3595 100%);

  /* Tipografía fluida */
  --t-display: clamp(2.6rem, 6.2vw, 5.1rem);
  --t-h1:      clamp(2.2rem, 5vw, 3.8rem);
  --t-h2:      clamp(1.85rem, 3.6vw, 2.9rem);
  --t-h3:      clamp(1.15rem, 1.6vw, 1.4rem);
  --t-lead:    clamp(1.05rem, 1.5vw, 1.3rem);
  --t-body:    1.0625rem;
  --t-small:   .875rem;
  --t-eyebrow: .78rem;
  --t-stat:    clamp(5rem, 12.5vw, 9.2rem);

  /* Ritmo */
  --sp-section: clamp(4.5rem, 9vw, 8rem);
  --wrap: 1180px;
  --wrap-narrow: 780px;
  --radius: 18px;
  --radius-sm: 12px;

  --shadow-sm: 0 2px 12px rgba(90, 36, 112, .07);
  --shadow-md: 0 14px 40px rgba(90, 36, 112, .12);
  --shadow-lg: 0 28px 70px rgba(90, 36, 112, .20);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- Reset -------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 90px;
}

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }

:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--p-light); color: var(--white); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--p-deep);
  color: var(--on-dark);
  padding: .9rem 1.4rem;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* --- Tipografía --------------------------------------------------------- */

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.028em;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.3; letter-spacing: -.018em; font-weight: 700; }

p { max-width: 68ch; }

strong { font-weight: 600; }

/* Los eyebrows (etiqueta pequeña sobre cada título) se retiraron: eran
   demasiado chicos para leerse y no aportaban. El HTML los conserva por si
   se quieren recuperar; para eso, borrar este bloque "display: none". */
.eyebrow { display: none; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 62ch;
}
.on-dark .lead { color: var(--on-dark-soft); }

.display { font-size: var(--t-display); }

.u-teal { color: var(--teal-dk); }
.on-dark .u-teal { color: var(--teal-lt); }

/* Subrayado de marca para una palabra dentro de un título */
.mark {
  background-image: linear-gradient(transparent 62%, rgba(21, 186, 221, .32) 62%);
  background-repeat: no-repeat;
}

/* --- Layout ------------------------------------------------------------- */

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
.wrap-narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }

/* Igual que .wrap, pero nunca se ve afectado por el corrimiento a la
   izquierda que se le aplica a `.hero .wrap` y `.site-header .wrap` en
   pantallas grandes. Se usa para bloques que deben quedar centrados en el
   viewport exactamente igual que la banda de logos (p. ej. .hero-proof). */
.wrap-plain {
  position: relative;
  z-index: 1;
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

section { padding-block: var(--sp-section); }

.band-dark {
  background: var(--p-deep);
  color: var(--on-dark);
  position: relative;
  overflow: hidden;
}
.band-dark h1, .band-dark h2, .band-dark h3 { color: var(--on-dark); }

.band-cream { background: var(--cream); }
.band-white { background: var(--white); }
.band-pale  { background: var(--p-pale-2); }

/* Trama de puntos heredada del one-pager */
.dots {
  position: absolute;
  inset: 0;
  opacity: .11;
  background-image: radial-gradient(rgba(255, 255, 255, .95) 1px, transparent 1.6px);
  background-size: 16px 16px;
  pointer-events: none;
}
.dots.has-canvas { background-image: none; opacity: 1; }
.dots canvas { position: absolute; inset: 0; display: block; }

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  opacity: .5;
}

.sec-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 4.5vw, 3.75rem); }
.sec-head p { margin-top: 1.15rem; }

/* Título seguido de texto lead fuera de .sec-head (p. ej. la columna de
   texto de las bandas de cierre "Hablemos"): mismo espaciado, para que no
   queden pegados. */
h2 + .lead { margin-top: 1.15rem; }

/* --- Botones ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.7rem;
  border: 2px solid transparent;
  border-radius: 100px;
  font-size: .97rem;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: transform .22s var(--ease), background .22s var(--ease),
              color .22s var(--ease), border-color .22s var(--ease),
              box-shadow .22s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--teal);
  border-color: transparent;
  color: #08313A;
  box-shadow: 0 8px 24px rgba(21, 186, 221, .28);
}
.btn-primary:hover { background: #2ACBEC; box-shadow: 0 12px 32px rgba(21, 186, 221, .38); }

.btn-purple,
.btn-ghost,
.btn-outline {
  background: transparent;
  border-color: var(--teal);
  color: var(--teal);
}
.btn-purple:hover,
.btn-ghost:hover,
.btn-outline:hover {
  background: var(--teal);
  color: #08313A;
}

.btn-sm { padding: .68rem 1.25rem; font-size: 1rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 2.2rem;
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  color: var(--p-mid);
  border-bottom: 2px solid transparent;
  transition: gap .2s var(--ease), border-color .2s var(--ease);
}
.arrow-link::after { content: '\2192'; transition: transform .2s var(--ease); }
.arrow-link:hover { border-color: var(--teal); }
.arrow-link:hover::after { transform: translateX(4px); }
.on-dark .arrow-link { color: var(--teal-lt); }

/* --- Header ------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(140deg, rgba(90, 36, 112, .94), rgba(188, 116, 204, .94));
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--on-dark-line);
  transition: background .3s var(--ease);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 74px;
}

.logo {
  display: inline-flex;
  align-items: center;
}
.logo img {
  height: 27px;
  width: auto;
  display: block;
}

.nav { display: flex; align-items: center; gap: 2rem; }
.nav-list { display: flex; align-items: center; gap: 1.9rem; }
.nav-list > li { position: relative; }
.nav-list a {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--on-dark-soft);
  padding-block: .5rem;
  transition: color .2s var(--ease);
}
.nav-list a:hover, .nav-list a[aria-current='page'] { color: var(--on-dark); }

.has-sub > button {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--on-dark-soft);
  padding-block: .5rem;
}
.has-sub > button:hover { color: var(--on-dark); }
.has-sub > button::after {
  content: '';
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s var(--ease);
}
.has-sub[data-open='true'] > button::after { transform: rotate(-135deg) translateY(-2px); }

.subnav {
  position: absolute;
  top: calc(100% + .9rem);
  left: -1rem;
  min-width: 260px;
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: .55rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.has-sub[data-open='true'] .subnav,
.has-sub:hover .subnav { opacity: 1; visibility: visible; transform: translateY(0); }
.subnav a {
  display: block;
  padding: .7rem .9rem;
  border-radius: 8px;
  color: var(--ink);
  font-size: .92rem;
  font-weight: 500;
}
.subnav a:hover { background: var(--p-pale-2); color: var(--p-dark); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: none;
  border: 1px solid var(--on-dark-line);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  position: absolute;
  left: 50%;
  width: 20px; height: 2px;
  background: var(--on-dark);
  transform: translateX(-50%);
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span { top: 50%; margin-top: -1px; }
.nav-toggle span::before { content: ''; left: 0; transform: none; top: -6px; }
.nav-toggle span::after  { content: ''; left: 0; transform: none; top: 6px; }
.nav-toggle[aria-expanded='true'] span { background: transparent; }
.nav-toggle[aria-expanded='true'] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded='true'] span::after  { top: 0; transform: rotate(-45deg); }

/* --- Hero --------------------------------------------------------------- */

/* El hero y el cierre son los dos momentos donde entra el degradado de marca.
   El resto de las bandas oscuras van en morado sólido --p-deep. */
.hero {
  position: relative;
  padding-block: clamp(6.5rem, 13vw, 11rem) clamp(8.5rem, 14vw, 12.5rem);
  isolation: isolate;
  background: var(--grad-bg);
  overflow: hidden;
}
.hero .glow-a { width: 620px; height: 620px; background: var(--p-light); top: -240px; right: -180px; opacity: .42; }
.hero .glow-b { width: 460px; height: 460px; background: var(--teal); bottom: -260px; left: -180px; opacity: .22; }

/* Foto de fondo del hero: full-bleed, con degradado oscuro para legibilidad
   del texto claro que va encima (izquierda/abajo más oscuro, se aclara
   hacia la derecha, donde la foto respira). */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Velo plano y muy sutil: solo negro, sin degradado ni tinte de color, para
     no ensuciar el tono cálido propio de la foto. La legibilidad del título
     la da el text-shadow de .hero-inner, no este velo. */
  background: rgba(0, 0, 0, .56);
}

/* Filo de degradado completo al pie de las bandas oscuras */
.band-dark.has-edge::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--grad-h);
}

.hero-inner { position: relative; z-index: 1; max-width: 80rem; }
/* El velo sobre la foto quedó muy sutil a propósito, así que la legibilidad
   del texto claro depende de este text-shadow, no del velo. */
.hero-inner h1,
.hero-inner .lead,
.hero-inner .hero-rotator-text {
  text-shadow: 0 2px 20px rgba(0, 0, 0, .55), 0 1px 4px rgba(0, 0, 0, .65);
}
/* El header, el hero y la banda de logos comparten el mismo margen izquierdo
   en pantallas grandes, para que el logo, el título y "Nuestra experiencia"
   queden alineados en una sola línea vertical. */
@media (min-width: 981px) {
  .site-header .wrap,
  .hero .wrap {
    margin-inline: clamp(1.5rem, 6vw, 6rem) auto;
  }
  /* El header, a diferencia del hero, sí debe ocupar todo el ancho: el logo
     queda alineado a la izquierda con el resto (regla de arriba) pero el
     botón "Cuéntanos tu caso" debe llegar hasta la esquina superior derecha
     real de la pantalla, no quedar acotado al ancho máximo de .wrap. */
  .site-header .wrap {
    width: calc(100% - clamp(1.5rem, 6vw, 6rem) - 2.5rem);
    margin-right: 2.5rem;
  }
  /* El h1 del hero necesita más ancho real que el resto de las secciones
     para caber en 2 líneas al tamaño de letra grande que pide la marca. */
  .hero .wrap { width: min(100% - 2.5rem, 88rem); }
}
.hero h1 {
  font-size: clamp(2.4rem, 5.1vw, 4.4rem);
  line-height: 1.22;
  margin-bottom: 1.4rem;
  max-width: none;
  white-space: nowrap;
}
.hero h1 em { font-style: italic; }
.hero .lead {
  max-width: 42ch;
  font-size: clamp(1.5rem, 2.9vw, 2.1rem);
  font-weight: 600;
  line-height: 1.35;
}

/* Widget rotativo del hero: una frase a la vez, con slide vertical tipo
   odómetro cada 5s. .hero-rotator recorta (overflow hidden) la altura de
   una línea; .hero-rotator-text es lo único que se anima al cambiar. */
.hero-rotator {
  overflow: hidden;
  height: clamp(2.3rem, 3.6vw, 3rem);
  margin-top: .9rem;
}
.hero-rotator-text {
  display: inline-block;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.35rem, 2.3vw, 1.8rem);
  color: var(--cream);
  line-height: clamp(2.3rem, 3.6vw, 3rem);
}
.hero-rotator-text.is-out {
  animation: rotator-out .45s var(--ease) forwards;
}
.hero-rotator-text.is-in {
  animation: rotator-in .45s var(--ease) forwards;
}
@keyframes rotator-out {
  to { transform: translateY(-100%); opacity: 0; }
}
@keyframes rotator-in {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-rotator-text.is-out, .hero-rotator-text.is-in { animation: none; }
}

.hero .btn-row { margin-top: 2.6rem; }
.hero .btn-row .btn {
  padding: 1.15rem 2.1rem;
  font-size: 1.05rem;
}
.hero .btn-row .btn-ghost {
  background: rgba(20, 8, 30, .38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-color: rgba(255, 255, 255, .55);
  color: var(--white);
}
.hero .btn-row .btn-ghost:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: #08313A;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  gap: 1.8rem 2.6rem;
  margin-top: 2.6rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--on-dark-line);
}
.stat-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  font-size: .9rem;
  color: var(--on-dark-soft);
}
.stat-mini b {
  font-size: clamp(3rem, 6.2vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--teal-lt);
}
.stat-mini:nth-child(2) b { color: var(--on-dark); }
.stat-mini:nth-child(3) b { color: var(--p-light); }
.stat-mini:nth-child(4) b { color: var(--p-main); }

/* --- Banda de logos ----------------------------------------------------- */

.logos { padding-block: clamp(2.75rem, 5vw, 4rem); border-bottom: 1px solid var(--line); }
.logos-label {
  text-align: center;
  max-width: none;
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .5rem;
}
.logos-note {
  text-align: center;
  max-width: none;
  font-size: .85rem;
  color: var(--ink-soft);
  margin-bottom: 2rem;
}
.logos-note-lg {
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  font-weight: 700;
  color: var(--ink);
}
.logos-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 5vw, 3.75rem);
}
.logos-row img {
  height: 38px;
  width: auto;
  filter: grayscale(1);
  opacity: .55;
  transition: opacity .25s var(--ease), filter .25s var(--ease);
}
.logos-row img:hover { opacity: 1; filter: grayscale(0); }
/* Fallback textual mientras no hay archivos de logo */
.logo-text {
  display: inline-block;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.02em;
  color: var(--ink-soft);
  opacity: .62;
  transition: opacity .25s var(--ease), transform .25s var(--ease), color .25s var(--ease);
}
.logo-text:hover {
  opacity: 1;
  color: var(--p-dark);
  transform: scale(1.12);
}
.logo-placeholder {
  font-weight: 500;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 1.5px dashed var(--line);
  border-radius: 100px;
  padding: .5rem 1.1rem;
  opacity: .5;
}
.logo-placeholder:hover { transform: none; opacity: .75; }

.logo-img {
  display: block;
  height: clamp(46px, 7vw, 72px);
  width: auto;
  max-width: 220px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .65;
  transition: opacity .25s var(--ease), filter .25s var(--ease), transform .25s var(--ease);
}
.logo-img:hover {
  opacity: 1;
  filter: grayscale(0);
  transform: scale(1.08);
}

/* Cinta de logos animada: .logos-viewport recorta y difumina los bordes,
   .logos-marquee es la fila que se desplaza y contiene dos copias idénticas
   de .logos-track una al lado de la otra — al mover -50% el loop es perfecto
   porque la segunda copia queda exactamente donde empezó la primera. */
.stats-compact { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.stats-compact .stat-n { font-size: clamp(4.4rem, 11vw, 8.1rem); }
.logos-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.logos-marquee {
  display: flex;
  width: max-content;
  animation: logos-scroll 70s linear infinite;
}
.logos-viewport:hover .logos-marquee { animation-play-state: paused; }
.logos-track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: clamp(1.75rem, 5vw, 3.75rem);
  padding-inline: clamp(.875rem, 2.5vw, 1.875rem);
}
@keyframes logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logos-marquee { animation: none; }
}

/* --- Recorrido (diagrama simple de progresión entre formatos) ----------- */

.fmt-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.fmt-node {
  font-size: .85rem;
  font-weight: 600;
  color: var(--p-dark);
  background: var(--p-pale-2);
  border: 1px solid var(--p-pale);
  border-radius: 100px;
  padding: .5rem 1.05rem;
}
.fmt-arrow { color: var(--p-light); font-weight: 700; }

/* --- Grids genéricos ---------------------------------------------------- */

/* minmax(Xpx,…) con un contenedor más angosto que X desborda: el min() interno
   lo evita en cualquier pantalla, incluidos los teléfonos más pequeños (320px). */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(288px, 100%), 1fr)); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr)); gap: 1.5rem; }

/* --- Tarjetas ----------------------------------------------------------- */

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 2.6vw, 2.1rem);
  box-shadow: var(--shadow-sm);
  transition: transform .28s var(--ease), box-shadow .28s var(--ease),
              border-color .28s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--p-light); }
.card h3 { margin-bottom: .7rem; }
.card p { color: var(--ink-soft); font-size: .97rem; }

.card-num {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--p-light);
  margin-bottom: 1rem;
}

/* Marca orgánica que reemplaza al número dentro de un cuadrado: una masa
   con volumen (gradiente + sombra interna) en vez del badge bordeado
   genérico. Cuatro variantes de forma/color para diferenciar tarjetas
   dentro del mismo grid sin repetir siempre la misma silueta. */
.blob-icon {
  --blob-a: var(--p-light);
  --blob-b: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  margin-bottom: 1.2rem;
  background: linear-gradient(150deg, var(--blob-a), var(--blob-b));
  border-radius: 62% 38% 55% 45% / 48% 42% 58% 52%;
  box-shadow:
    inset -6px -8px 14px rgba(0, 0, 0, .16),
    inset 5px 6px 10px rgba(255, 255, 255, .35),
    0 10px 22px -10px rgba(90, 36, 112, .45);
  transition: transform .35s var(--ease), border-radius .6s var(--ease);
}
.blob-icon svg { width: 54%; height: 54%; flex-shrink: 0; }
.card:hover .blob-icon,
.pillar:hover .blob-icon {
  transform: scale(1.08) rotate(-4deg);
  border-radius: 48% 52% 40% 60% / 55% 45% 55% 45%;
}
.blob-icon.v2 { --blob-a: var(--p-mid); --blob-b: var(--p-light); border-radius: 40% 60% 55% 45% / 55% 40% 60% 45%; }
.blob-icon.v3 { --blob-a: var(--teal); --blob-b: var(--p-main); border-radius: 55% 45% 42% 58% / 40% 55% 45% 60%; }
.blob-icon.v4 { --blob-a: var(--p-light); --blob-b: var(--p-mid); border-radius: 45% 55% 60% 40% / 60% 45% 55% 40%; }
.on-dark .blob-icon {
  box-shadow:
    inset -6px -8px 14px rgba(0, 0, 0, .3),
    inset 5px 6px 10px rgba(255, 255, 255, .28),
    0 10px 24px -8px rgba(0, 0, 0, .5);
}

.on-dark .card {
  background: rgba(255, 255, 255, .045);
  border-color: var(--on-dark-line);
  box-shadow: none;
}
.on-dark .card:hover { background: rgba(255, 255, 255, .075); border-color: var(--p-light); }
.on-dark .card p { color: var(--on-dark-soft); }

/* Tarjeta de servicio con enlace */
.card-svc { display: flex; flex-direction: column; overflow: hidden; }
.card-svc p { flex: 1; margin-bottom: 1.4rem; }

/* Foto que reemplaza al blob-icon en las tarjetas de servicio: bleed hasta
   el borde de la tarjeta (compensa el padding con márgenes negativos). */
.card-media {
  margin: calc(-1 * clamp(1.6rem, 2.6vw, 2.1rem)) calc(-1 * clamp(1.6rem, 2.6vw, 2.1rem)) 1.3rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s var(--ease);
}
.card-svc:hover .card-media img { transform: scale(1.05); }

/* Tarjetas con fondo de color (morados de marca), para diferenciarlas de
   las tarjetas blancas del resto del sitio. */
.card-tint { border-color: transparent; }
.card-tint h3 { color: var(--on-dark); }
.card-tint p { color: var(--on-dark-soft); }
.card-tint:hover { border-color: var(--teal-lt); }
.card-tint .blob-icon {
  box-shadow:
    inset -6px -8px 14px rgba(0, 0, 0, .3),
    inset 5px 6px 10px rgba(255, 255, 255, .28),
    0 10px 24px -8px rgba(0, 0, 0, .5);
}
/* Cada tarjeta usa los mismos dos colores que su propio blob-icon, para que
   fondo e ícono se sientan como una sola decisión de color. */
.card-tint.t1 { background: linear-gradient(140deg, var(--teal-dk), var(--p-mid)); }
.card-tint.t2 { background: var(--p-dark); }
.card-tint.t3 { background: linear-gradient(140deg, var(--p-mid), var(--teal-dk)); }

/* --- Pilares (metodología / tecnología / cultura) ----------------------- */

.pillar { border-top: 3px solid var(--p-light); padding-top: 1.6rem; }
.pillar:nth-child(2) { border-color: var(--teal); }
.pillar:nth-child(3) { border-color: var(--p-main); }
.pillar .card-num { color: var(--ink-soft); }
.pillar h3 { margin-bottom: .9rem; }
.pillar p { color: var(--ink-soft); font-size: .97rem; }
.on-dark .pillar p { color: var(--on-dark-soft); }

/* --- Sistema Datimpacto: texto + diagrama ------------------------------- */

.sys-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
.sys-media { position: sticky; top: 6.5rem; }
.sys-media img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
@media (max-width: 980px) {
  .sys-layout { grid-template-columns: 1fr; }
  .sys-media { position: static; order: -1; max-width: 260px; margin: 0 auto 1rem; }
}

/* --- Lista numerada grande (sistema, proceso) --------------------------- */

.steps { display: grid; gap: 1px; background: var(--on-dark-line); border-radius: var(--radius); overflow: hidden; }
.step {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  background: var(--p-deep);
  transition: background .25s var(--ease);
}
.step:hover { background: var(--p-mid); }
.step-n {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--teal);
  letter-spacing: -.04em;
  line-height: 1;
  padding-top: .2rem;
}
.step h3 { margin-bottom: .45rem; }
.step p { color: var(--on-dark-soft); font-size: .97rem; }

/* Variante clara */
.steps-light { background: var(--line); }
.steps-light .step { background: var(--white); }
.steps-light .step:hover { background: var(--p-pale-2); }
.steps-light .step-n { color: var(--p-light); }
.steps-light h3 { color: var(--ink); }
.steps-light p { color: var(--ink-soft); }

/* --- Stats -------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 2.5rem 1.5rem;
  text-align: center;
}
.stats > div {
  padding: .5rem;
  border-radius: var(--radius-sm);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.stats > div:hover {
  transform: translateY(-6px) scale(1.04);
  background: rgba(90, 36, 112, .06);
}
.on-dark .stats > div:hover { background: rgba(255, 255, 255, .06); }
.stat-n {
  display: block;
  font-size: var(--t-stat);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--p-dark);
  margin-bottom: .6rem;
  transition: color .3s var(--ease);
}
.stats > div:hover .stat-n { color: var(--p-dark); }
.on-dark .stats > div:hover .stat-n { color: var(--p-light); }
.stats .stat-n { color: var(--teal-dk); }
.on-dark .stat-n { color: var(--teal); }
.stat-l { font-size: .93rem; color: var(--ink-soft); line-height: 1.45; max-width: 22ch; margin-inline: auto; }
.on-dark .stat-l { color: var(--on-dark-soft); }

/* --- Caso destacado ----------------------------------------------------- */

.case-meta {
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--p-light);
  margin-bottom: 1.4rem;
}
.case-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 2rem 1.5rem;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--on-dark-line);
}

/* --- Testimonios -------------------------------------------------------- */

.quote {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3vw, 2.4rem);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.quote::before {
  content: '\201C';
  font-size: 3.4rem;
  line-height: .8;
  font-weight: 800;
  color: var(--p-light);
  margin-bottom: .6rem;
}
.quote blockquote { font-size: 1.05rem; line-height: 1.6; flex: 1; margin-bottom: 1.5rem; }
.quote figcaption { font-size: .88rem; color: var(--ink-soft); }
.quote figcaption b { display: block; color: var(--ink); font-weight: 600; }

/* Aviso de "cita provisional": una nota de trabajo, no un error de
   formulario, así que no lleva el tratamiento visual de alerta (fondo
   de color, mayúsculas). Vive como caption discreta bajo la cita. */
.quote { position: relative; }
.pending {
  order: 3;
  font-size: .78rem;
  font-style: italic;
  color: var(--ink-soft);
  opacity: .7;
  border-top: 1px dashed var(--line);
  padding-top: .85rem;
  margin-top: .35rem;
}

/* --- Equipo ------------------------------------------------------------- */

.person { text-align: left; }
.person img {
  width: 152px; height: 152px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1.25rem;
  border: 3px solid var(--white);
  box-shadow: var(--shadow-md);
}
.person-ph {
  width: 152px; height: 152px;
  border-radius: 50%;
  background: var(--grad);
  display: grid;
  place-items: center;
  color: var(--white);
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -.04em;
  margin-bottom: 1.25rem;
}
.person h3 { margin-bottom: .2rem; }
.person .role {
  font-size: .87rem;
  font-weight: 600;
  color: var(--p-main);
  margin-bottom: .85rem;
  letter-spacing: -.005em;
}
.person p { font-size: .95rem; color: var(--ink-soft); }

/* Muro de caras de la red: placeholders hasta tener fotos reales. */
.face-wall { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.6rem; }
.face-dot {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--grad);
  opacity: .5;
}
.face-dot.v2 { background: linear-gradient(135deg, var(--teal), var(--p-light)); }
.face-dot.v3 { background: linear-gradient(135deg, var(--p-mid), var(--orange)); }
.face-more {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--p-pale);
  color: var(--p-mid);
  font-size: .78rem;
  font-weight: 700;
}

/* --- Tabla -------------------------------------------------------------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }
table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  background: var(--white);
  font-size: .95rem;
}
th, td { padding: 1rem 1.15rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th {
  background: var(--p-deep);
  color: var(--on-dark);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 0;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--p-pale-2); }

.scope-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-right: .55rem;
  vertical-align: middle;
  color: var(--p-mid);
}
.scope-icon svg { width: 100%; height: 100%; }
td strong { color: var(--p-dark); }

/* --- Listas con check --------------------------------------------------- */

.list-check { display: grid; gap: .9rem; }
.list-check li {
  position: relative;
  padding-left: 2rem;
  color: var(--ink-soft);
}
.list-check li::before {
  content: '';
  position: absolute;
  left: 0; top: .55rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--teal);
}
.on-dark .list-check li { color: var(--on-dark-soft); }

.list-plain { display: grid; gap: .55rem; }
.list-plain li { color: var(--ink-soft); font-size: .97rem; }
.on-dark .list-plain li { color: var(--on-dark-soft); }

/* --- FAQ ---------------------------------------------------------------- */

.faq { max-width: 52rem; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  padding: 1.5rem 0;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--ink);
  transition: color .2s var(--ease);
}
.faq-q:hover { color: var(--p-mid); }
.faq-icon {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--p-pale);
  position: relative;
  margin-top: .15rem;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: var(--p-dark);
  transform: translate(-50%, -50%);
  transition: opacity .25s var(--ease);
}
.faq-icon::before { width: 11px; height: 2px; }
.faq-icon::after  { width: 2px; height: 11px; }
.faq-q[aria-expanded='true'] .faq-icon { background: var(--teal); transform: rotate(90deg); }
.faq-q[aria-expanded='true'] .faq-icon::after { opacity: 0; }

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--ease);
}
.faq-q[aria-expanded='true'] + .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { color: var(--ink-soft); padding-bottom: 1.6rem; max-width: 62ch; }

/* --- Formulario --------------------------------------------------------- */

.form-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
  box-shadow: var(--shadow-lg);
}
.form-card .lead { color: var(--ink); }
.field { margin-bottom: 1.2rem; }
.field label {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  margin-bottom: .45rem;
  color: var(--ink);
}
.field input, .field textarea {
  width: 100%;
  padding: .85rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--p-pale-2);
  /* Color explícito: si no, hereda el color claro de .band-dark cuando el
     form-card vive dentro de una banda oscura, y el texto queda invisible
     sobre este fondo casi blanco. */
  color: var(--ink);
  /* 16px mínimo: por debajo de eso, iOS Safari hace zoom automático al enfocar */
  font-size: 1rem;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--teal);
  background: var(--white);
}
.field textarea { resize: vertical; min-height: 118px; }
.field-error {
  display: none;
  font-size: .82rem;
  color: #C0392B;
  margin-top: .35rem;
}
.field-hint {
  display: block;
  font-size: .82rem;
  color: var(--ink-soft);
  margin-top: .35rem;
}
.field[data-invalid='true'] input,
.field[data-invalid='true'] textarea { border-color: #C0392B; }
.field[data-invalid='true'] .field-error { display: block; }

.field-check {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  flex-wrap: wrap;
}
.field-check input { width: auto; margin-top: .2rem; accent-color: var(--teal); }
.field-check label {
  display: inline;
  font-size: .87rem;
  font-weight: 400;
  margin-bottom: 0;
  color: var(--ink-soft);
  flex: 1;
}
.field-check label a { color: var(--ink); font-weight: 600; }
.field-check .field-error { flex-basis: 100%; }
.field-check[data-invalid='true'] input { outline: 1.5px solid #C0392B; outline-offset: 2px; }

.hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

.form-note { font-size: .87rem; color: var(--ink-soft); margin-top: 1rem; }
.form-ok {
  display: none;
  background: var(--p-pale-2);
  border: 1px solid var(--p-pale);
  color: var(--p-dark);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  font-size: .95rem;
  margin-bottom: 1.2rem;
}
.form-ok[data-visible='true'] { display: block; }

/* Banda de cierre: el segundo momento del degradado de marca */
.cta-band { background: var(--grad-bg); }

.cta-split {
  display: grid;
  grid-template-columns: 1fr minmax(340px, 480px);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

/* --- Prose (guías) ------------------------------------------------------ */

.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(1.55rem, 2.6vw, 2.05rem); margin-top: 3.25rem; margin-bottom: 1.05rem; }
.prose h3 { margin-top: 2.1rem; margin-bottom: .65rem; }
.prose p { margin-bottom: 1.15rem; color: var(--ink-soft); }
.prose > p:first-of-type { color: var(--ink); }
.prose ul, .prose ol { margin-bottom: 1.5rem; display: grid; gap: .7rem; }
.prose ul li { position: relative; padding-left: 1.5rem; color: var(--ink-soft); }
.prose ul li::before {
  content: '';
  position: absolute; left: 0; top: .62rem;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--p-light);
}
.prose ol { counter-reset: n; }
.prose ol li { position: relative; padding-left: 2.2rem; color: var(--ink-soft); counter-increment: n; }
.prose ol li::before {
  content: counter(n);
  position: absolute; left: 0; top: 0;
  font-weight: 700; color: var(--teal-dk); font-size: .95rem;
}
.prose a:not(.btn) { color: var(--p-mid); border-bottom: 1.5px solid var(--p-light); font-weight: 500; }
.prose a:not(.btn):hover { border-color: var(--teal); color: var(--p-dark); }
.prose .table-scroll { margin-bottom: 1.75rem; }

.definition {
  background: var(--p-pale-2);
  border-left: 4px solid var(--teal);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1.6rem 1.8rem;
  margin-bottom: 1.75rem;
}
.definition p { color: var(--ink); font-size: 1.06rem; margin-bottom: 0; }

.callout {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.75rem;
}
.callout p:last-child { margin-bottom: 0; }

.toc {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1.5rem 1.7rem;
  margin-bottom: 2.5rem;
}
.toc h2 {
  font-size: .8rem !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 .9rem !important;
}
.toc ol { margin: 0; gap: .5rem; }
.toc ol li::before { color: var(--p-light); }
.toc a { color: var(--ink); border: 0; font-weight: 500; }
.toc a:hover { color: var(--p-mid); }

/* --- Page header (páginas internas) ------------------------------------- */

.page-head {
  padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(3rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
  background: var(--grad-bg);
}
.page-head .glow-a { width: 520px; height: 520px; background: var(--p-light); top: -260px; right: -140px; opacity: .34; }
.page-head-inner { position: relative; z-index: 1; }
.page-head h1 { max-width: 20ch; margin-bottom: 1.4rem; }

.crumbs { font-size: .84rem; color: var(--on-dark-soft); margin-bottom: 1.5rem; }
.crumbs a:hover { color: var(--teal-lt); }
.crumbs span { opacity: .5; margin-inline: .45rem; }

/* --- Caso (ficha en /casos) --------------------------------------------- */

.case {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.8rem, 3.4vw, 2.75rem);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.75rem;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.case h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); margin-bottom: .55rem; }
.case .case-meta { color: var(--p-main); }
.case h3 {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 1.75rem 0 .6rem;
  font-weight: 700;
}
.case p { color: var(--ink-soft); }
.case-nums {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: auto;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}
.case-nums-label {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-soft);
  margin-bottom: .9rem;
}
.case-nums-items {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: clamp(.9rem, 3vw, 2.2rem);
  text-align: center;
}
.case-nums-items > div { flex: 1 1 0; min-width: 0; max-width: none; transition: color .2s var(--ease); }
.case-nums .stat-l { margin-inline: auto; }
.case-nums .stat-n {
  display: inline-block;
  max-width: 100%;
  font-size: clamp(1.15rem, 2.6vw, 2.75rem);
  color: var(--teal-dk);
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.case-nums-items > div:hover .stat-n { color: var(--p-dark); }

.network-box {
  background: linear-gradient(140deg, var(--p-dark), var(--p-light));
  border-radius: var(--radius);
  padding: clamp(1.9rem, 3.6vw, 2.75rem);
  margin-top: 2.5rem;
  color: var(--on-dark);
}
.network-box h3 { color: var(--on-dark); }
.network-box p.lead { max-width: none; margin-top: .75rem; color: var(--on-dark-soft); }
.network-tags { display: flex; flex-wrap: nowrap; gap: .5rem; margin-top: 1.5rem; overflow-x: auto; padding-bottom: .2rem; }
.network-tag {
  display: inline-block;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: clamp(.66rem, 1.5vw, .82rem);
  font-weight: 600;
  color: var(--on-dark);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 999px;
  padding: .45rem .85rem;
}

.case-tag {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--ink);
  border-radius: 3px;
  padding: .3rem .7rem;
  margin-bottom: .9rem;
}

/* --- Mapa de experiencia (LATAM y Caribe) -------------------------------- */
/* Contorno geográfico real (derivado de un mapa base de dominio público),
   con puntos solo en los países donde tenemos proyectos documentados. */

.map-card {
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.75rem, 3.4vw, 2.75rem);
}
.map-card h3, .map-card h4 { color: var(--ink); }

.experience-map-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 2.5rem;
  align-items: center;
}

.experience-map-viewport {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin-inline: auto;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--cream);
  touch-action: none;
  cursor: grab;
}
.experience-map-viewport[data-panning="true"] { cursor: grabbing; }

.experience-map-canvas {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-inline: auto;
  height: 100%;
  width: auto;
  aspect-ratio: 638.93 / 798.82;
  transform-origin: 0 0;
  will-change: transform;
}
.experience-map-canvas img { display: block; width: 100%; height: 100%; pointer-events: none; user-select: none; }

.map-zoom-controls {
  position: absolute;
  top: .7rem;
  right: .7rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.map-zoom-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.map-zoom-btn:hover { background: var(--p-pale-2); border-color: var(--p-light); }
.map-zoom-reset { font-size: .85rem; }

.map-pin {
  position: absolute;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  margin-top: -12px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.map-pin::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--p-dark);
  border: 2px solid var(--white);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.map-pin:hover::before,
.map-pin:focus-visible::before,
.map-pin[aria-pressed="true"]::before {
  background: var(--teal-dk);
  transform: scale(1.5);
}
.map-pin:focus-visible { outline: 2px solid var(--p-dark); outline-offset: 3px; border-radius: 50%; }

/* Tooltip con el nombre del país al pasar el cursor o enfocar con teclado.
   Solo es un indicador visual: el panel de proyectos no cambia hasta el click. */
.map-pin::after {
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  background: var(--ink);
  color: var(--white);
  padding: .12rem .34rem;
  border-radius: 4px;
  font-size: .4rem;
  font-weight: 600;
  line-height: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s var(--ease), transform .15s var(--ease), visibility .15s;
  z-index: 5;
}
.map-pin:hover::after,
.map-pin:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.map-info-panel {
  border-left: 3px solid var(--p-dark);
  padding-left: 1.5rem;
  min-height: 180px;
  max-height: 420px;
  display: flex;
  flex-direction: column;
}
.map-info-panel h3 { margin-bottom: 1.4rem; }
.map-info-panel p { color: var(--ink-soft); }
.map-info-hint { color: var(--ink-soft); font-style: italic; }
.map-projects {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: .5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--p-light) transparent;
}
.map-projects::-webkit-scrollbar { width: 6px; }
.map-projects::-webkit-scrollbar-thumb { background: var(--p-light); border-radius: 3px; }
.map-project { padding-block: .85rem; border-top: 1px solid var(--line); }
.map-project:first-child { border-top: 0; padding-top: 0; }
.map-tag {
  display: inline-block;
  font-size: clamp(.66rem, 1.5vw, .78rem);
  font-weight: 700;
  color: #fff;
  background: var(--grad);
  border: none;
  border-radius: 999px;
  padding: .3rem .75rem;
  margin-bottom: .5rem;
}
.map-project h4 { font-size: .98rem; margin-bottom: .3rem; }
.map-project p { font-size: .93rem; margin: 0; }
.map-project .arrow-link { margin-top: .5rem; font-size: .88rem; }

@media (max-width: 760px) {
  .experience-map-grid { grid-template-columns: 1fr; }
  .map-info-panel { border-left: 0; padding-left: 0; border-top: 3px solid var(--p-dark); padding-top: 1.5rem; min-height: 0; max-height: 320px; }
}

.case.map-highlight { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-pale); }

/* --- Footer ------------------------------------------------------------- */

.site-footer { background: linear-gradient(140deg, var(--p-dark), var(--p-light)); color: var(--on-dark-soft); padding-block: clamp(3.5rem, 6vw, 5rem) 2.25rem; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--on-dark-line);
}
.footer-brand p { font-size: .93rem; margin-top: 1rem; max-width: 34ch; }
.footer-grid h4 {
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dark);
  margin-bottom: 1.1rem;
  font-weight: 700;
}
.footer-grid ul { display: grid; }
.footer-grid a {
  display: inline-block;
  padding-block: .55rem;
  font-size: .93rem;
  transition: color .2s var(--ease);
}
.footer-grid a:hover { color: var(--teal-lt); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2rem;
  font-size: .86rem;
}

/* --- Animación de entrada ----------------------------------------------- */

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal[data-visible='true'] { opacity: 1; transform: none; }

/* Parallax suave de los fondos de las bandas oscuras. El JS escribe
   --parallax en cada .glow/.dots visible; queda en 0 hasta entonces. */
.glow, .dots { transform: translateY(calc(var(--parallax, 0) * 1px)); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; transition-delay: 0s !important; }
  .glow, .dots { transform: none !important; }
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.25rem; }
  .cta-split { grid-template-columns: 1fr; }
  /* Por debajo del punto donde el hero tiene ancho de sobra (981px), el
     salto de línea fijo del h1 puede no caber: se deja envolver libremente. */
  .hero h1 { white-space: normal; }
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed;
    inset: 74px 0 auto;
    background: linear-gradient(160deg, var(--p-dark), var(--p-mid));
    border-bottom: 1px solid var(--on-dark-line);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.25rem 1.25rem 2rem;
    max-height: calc(100dvh - 74px);
    overflow-y: auto;
    transform: translateY(-14px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .nav[data-open='true'] { opacity: 1; visibility: visible; transform: none; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { border-bottom: 1px solid var(--on-dark-line); }
  .nav-list a { display: block; width: 100%; padding: 1rem 0; font-size: 1.02rem; }
  .has-sub > button {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding: 1rem 0;
    font-size: 1.02rem;
  }
  .subnav {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: transparent;
    padding: 0 0 .75rem 1rem;
    display: none;
  }
  .has-sub[data-open='true'] .subnav { display: block; }
  .has-sub:hover .subnav { display: none; }
  .has-sub[data-open='true'] .subnav { display: block; }
  .subnav a { color: var(--on-dark-soft); padding: .55rem 0; }
  .subnav a:hover { background: none; color: var(--teal); }
  .nav .btn { margin-top: 1.25rem; width: 100%; }

  .step { grid-template-columns: 1fr; gap: .5rem; }
  .step-n { font-size: 1.25rem; }
}

@media (max-width: 620px) {
  :root { --sp-section: 3.75rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .btn-row .btn { width: 100%; }
  .hero h1 { max-width: none; white-space: normal; }
  p { max-width: none; }
}

@media print {
  .site-header, .nav-toggle, .btn, .site-footer { display: none; }
  body { background: #fff; color: #000; }
}