/* ==========================================================================
   about.css — /nosotros (copy v2). Paneles, tipografía y colores salen de brand.css;
   aquí solo la composición de cada bloque. Sin animación de fondo: el hero es estático.
   ========================================================================== */

/* ---------- 1. hero: fondo de marca con el mapa de América en trazo fino ---------- */
.ab-hero { padding-bottom: clamp(110px, 13vw, 170px); }
.ab-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.ab-hero__text { position: relative; z-index: 1; }
.ab-hero__kicker { flex-wrap: wrap; row-gap: 8px; }
.ab-hero__sep, .ab-hero__places { opacity: .75; }
.ab-hero__title { margin: 6px 0 0; }
.ab-hero__lead { margin: 30px 0 0; max-width: 30ch; font: 400 clamp(1.35rem, 2.3vw, 1.9rem)/1.3 var(--f-serif); color: var(--arcilla); }
/* el mapa interactivo tiene su bloque propio más abajo (.amap-*) */

/* ---------- 2. el punto de partida: solo tipografía ---------- */
.ab-start__title { margin: 0; max-width: 18ch; font: 400 clamp(2.4rem, 5.6vw, 5rem)/1.02 var(--f-serif); letter-spacing: -.015em; }
.ab-start__title em { font-style: italic; color: var(--terra); }
.ab-start__text { margin: 34px 0 0; max-width: 54ch; font-size: clamp(1.05rem, 1.5vw, 1.22rem); line-height: 1.6; color: var(--muted-l); }

/* ---------- 3. protagonistas + franja de datos ---------- */
.ab-step__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: end; }
.ab-step__text { margin: 0; max-width: 46ch; font-size: clamp(1.02rem, 1.4vw, 1.15rem); line-height: 1.65; color: var(--muted-d); }
.ab-facts { list-style: none; margin: clamp(48px, 7vw, 88px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-dark); }
.ab-facts li { display: grid; gap: 8px; padding: 26px 24px 4px 0; }
.ab-facts li + li { padding-left: 24px; border-left: 1px solid var(--line-dark); }
.ab-facts__big { font: 400 clamp(2.4rem, 4.6vw, 3.8rem)/1 var(--f-serif); color: var(--cian); }
.ab-facts__small { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-d); }

/* ---------- 4. misión y visión: dos columnas con aire ---------- */
.ab-purpose__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 7vw, 120px); margin-top: 18px; }
.ab-purpose__label { margin: 0 0 18px; padding-bottom: 14px; border-bottom: 1.5px solid var(--carbon); font-size: 12px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--terra); }
.ab-purpose__text { margin: 0; font: 400 clamp(1.5rem, 2.3vw, 2rem)/1.32 var(--f-serif); color: var(--carbon); }

/* ---------- 5. lo que nos une ---------- */
.ab-values__grid { list-style: none; margin: clamp(40px, 6vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 5vw, 80px); }
.ab-values__grid li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 24px 0; border-top: 1px solid var(--line-dark); }
.ab-values__n { font-size: 12px; color: var(--cian); padding-top: 5px; }
.ab-values__grid p { margin: 0; font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.6; color: var(--muted-d); }
.ab-values__grid strong { display: block; margin-bottom: 4px; font: 400 clamp(1.35rem, 2vw, 1.6rem)/1.2 var(--f-serif); color: var(--arcilla); }

/* ---------- 6. la gente detrás: 4 a 6 fotos de trabajo, fijas ---------- */
.ab-people__title { margin: 0; max-width: 26ch; font: 400 clamp(1.9rem, 3.6vw, 3.1rem)/1.12 var(--f-serif); letter-spacing: -.01em; }
.ab-people__title em { font-style: italic; color: var(--terra); }
.ab-people__text { margin: 24px 0 0; max-width: 52ch; font-size: clamp(1.02rem, 1.4vw, 1.15rem); line-height: 1.6; color: var(--muted-l); }
.ab-photos { list-style: none; margin: clamp(40px, 6vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.ab-photos li { margin: 0; border-radius: 10px; overflow: hidden; background: var(--line-light); aspect-ratio: 3 / 4; }
.ab-photos img, .ab-photos video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- 7. por qué Vindam: los 6 pilares, descripción siempre visible ---------- */
.ab-why__lead { margin: 22px 0 0; max-width: 40ch; font: 400 clamp(1.3rem, 2vw, 1.7rem)/1.3 var(--f-serif); color: var(--arcilla); }
.ab-pillars { list-style: none; margin: clamp(44px, 6vw, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-dark); }
.ab-pillars li { padding: 28px 28px 32px 0; border-bottom: 1px solid var(--line-dark); }
.ab-pillars li:not(:nth-child(3n + 1)) { padding-left: 28px; border-left: 1px solid var(--line-dark); }
.ab-pillars__n { display: block; font-size: 12px; color: var(--cian); }
.ab-pillars__t { margin: 14px 0 10px; font: 400 clamp(1.4rem, 2vw, 1.7rem)/1.15 var(--f-serif); color: var(--arcilla); }
.ab-pillars__d { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted-d); }

/* ---------- 8. clientes y respaldo ---------- */
/* clientes: cuadrícula fija con filetes; logos en silueta gris (todos parejos sobre fondo claro),
   con su color al pasar el mouse. El alto de cada logo iguala área óptica (vindam_logo_height). */
.ab-trust__text { margin: 18px 0 0; max-width: 44ch; font-size: clamp(1.02rem, 1.4vw, 1.15rem); line-height: 1.6; color: var(--muted-l); }
.ab-clients { list-style: none; margin: clamp(36px, 5vw, 60px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-light); border-left: 1px solid var(--line-light); }
.ab-clients li { display: grid; place-items: center; min-height: 112px; padding: 22px 18px; border-right: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.ab-clients img { display: block; max-width: 100%; height: auto; filter: brightness(0); opacity: .58; transition: filter .3s var(--ease), opacity .3s var(--ease); }
@media (hover: hover) { .ab-clients li:hover img { filter: none; opacity: 1; } }

/* respaldos: los logos de los aliados (archivos claros, pensados para fondo oscuro) en silueta */
.ab-backing { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 80px); align-items: center; margin-top: clamp(64px, 8vw, 110px); padding-top: clamp(40px, 5vw, 60px); border-top: 1.5px solid var(--carbon); }
.ab-backing__text { margin: 0; max-width: 40ch; font: 400 clamp(1.35rem, 2vw, 1.7rem)/1.3 var(--f-serif); color: var(--carbon); }
.ab-allies { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 24px; align-items: end; }
.ab-allies li { display: grid; gap: 12px; justify-items: start; }
.ab-allies__logo { display: flex; align-items: center; height: 40px; }
.ab-allies__logo img { display: block; height: 26px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; filter: brightness(0); opacity: .72; }
/* alto fijo por logo (el SVG de Meta no trae ancho ni alto: con solo un máximo se encogía a cero) */
.ab-allies li:nth-child(2) .ab-allies__logo img { height: 17px; }   /* Anthropic: wordmark ancho y bajo */
.ab-allies li:nth-child(3) .ab-allies__logo img { height: 24px; }   /* NIDO */
.ab-allies li:nth-child(4) .ab-allies__logo img { height: 40px; }   /* la Cámara lleva texto en tres líneas */
.ab-allies__what { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-l); }

/* el logo de Meta en la franja de datos de «Protagonistas» */
.ab-facts__logo { display: block; height: .62em; width: auto; margin: .2em 0 .18em; }

/* ---------- 9. cierre ---------- */
.ab-close .t-title { max-width: 18ch; }
.ab-close__text { margin: 24px 0 0; max-width: 44ch; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.6; color: var(--arcilla); opacity: .9; }
.ab-close .btn { margin-top: 32px; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .ab-hero__grid { grid-template-columns: minmax(0, 1fr); }
  /* el mapa se toca: va debajo del texto, no detrás */
  .ab-hero__map { margin-top: 36px; }
  .ab-step__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ab-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-pillars li:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
  .ab-pillars li:nth-child(2n) { padding-left: 24px; border-left: 1px solid var(--line-dark); }
  .ab-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ab-clients { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ab-backing { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ab-clients { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-clients li { min-height: 92px; padding: 18px 12px; }
  .ab-allies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* los países bajan a su propia línea, alineados con el texto del kicker (no con su raya) */
  .ab-hero__sep { display: none; }
  .ab-hero__places { flex-basis: 100%; padding-left: 36px; }
  .ab-facts { grid-template-columns: minmax(0, 1fr); }
  .ab-facts li, .ab-facts li + li { padding: 20px 0; border-left: 0; border-bottom: 1px solid var(--line-dark); }
  .ab-purpose__grid, .ab-values__grid, .ab-pillars { grid-template-columns: minmax(0, 1fr); }
  .ab-pillars li, .ab-pillars li:nth-child(2n) { padding: 24px 0; border-left: 0; }
  .ab-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ab-photos li:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   Mapa interactivo del hero (includes/layout/americas-map.php + about.js).
   Puntos de tierra tenues; Colombia, México y Estados Unidos en cian; arcos que los
   unen; un botón por país que abre su tarjeta con la hora local.
   ========================================================================== */
.amap-wrap { position: relative; }
.amap-stage { position: relative; }
.amap { display: block; width: 100%; height: auto; overflow: visible; }
.amap__land { fill: none; stroke: rgba(232, 227, 218, .24); stroke-width: 3.4; stroke-linecap: round; }
.amap__hot { fill: none; stroke: var(--cian); stroke-width: 3.8; stroke-linecap: round; opacity: .85; transition: opacity .35s var(--ease); }
.amap-wrap[data-active] .amap__hot { opacity: .25; }
.amap-wrap[data-active="co"] .amap__hot--co,
.amap-wrap[data-active="mx"] .amap__hot--mx,
.amap-wrap[data-active="us"] .amap__hot--us { opacity: 1; }
.amap__arc { fill: none; stroke: var(--cian); stroke-width: 1.6; stroke-linecap: round; opacity: .5; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .amap__arc { stroke-dashoffset: 1; animation: amap-draw 1.8s var(--ease) var(--d, .5s) forwards; }
@keyframes amap-draw { to { stroke-dashoffset: 0; } }

/* marcadores: 44 px de área táctil, el punto late y el nombre va al lado */
.amap-pin { position: absolute; z-index: 2; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--arcilla); cursor: pointer; display: grid; place-items: center; }
.amap-pin__dot { position: relative; width: 13px; height: 13px; border-radius: 50%; background: var(--cian); box-shadow: 0 0 0 4px rgba(5, 242, 219, .18); transition: transform .25s var(--ease); }
.amap-pin__dot::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1.5px solid var(--cian); opacity: 0; animation: amap-ping 2.6s var(--ease) infinite; }
.amap-pin--mx .amap-pin__dot::after { animation-delay: .8s; }
.amap-pin--us .amap-pin__dot::after { animation-delay: 1.6s; }
@keyframes amap-ping { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(2.3); opacity: 0; } }
.amap-pin__name { position: absolute; left: 36px; top: 50%; transform: translateY(-50%); padding: 5px 9px; border: 1px solid var(--line-dark); border-radius: 999px; background: rgba(27, 26, 23, .78); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
.amap-pin[aria-expanded="true"] .amap-pin__dot { transform: scale(1.25); }
.amap-pin[aria-expanded="true"] .amap-pin__name { background: var(--cian); border-color: var(--cian); color: var(--carbon); }
@media (hover: hover) {
  .amap-pin:hover .amap-pin__dot { transform: scale(1.2); }
  .amap-pin:hover .amap-pin__name { border-color: var(--cian); color: var(--cian); }
  .amap-pin[aria-expanded="true"]:hover .amap-pin__name { color: var(--carbon); }
}
.amap-pin:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }

/* tarjeta: en computador, sobre el Pacífico (abajo a la izquierda), donde no tapa ningún país */
.amap-card { position: absolute; z-index: 3; left: 0; bottom: 0; width: min(256px, 50%); padding: 16px 18px 18px; border: 1px solid var(--line-dark); border-radius: 18px; background: var(--carbon-2); color: var(--arcilla); box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .7); animation: amap-card-in .35s var(--ease); }
.amap-card[hidden] { display: none; }
@keyframes amap-card-in { from { opacity: 0; transform: translateY(10px); } }
.amap-card__x { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--muted-d); font: 400 22px/1 var(--f-sans); cursor: pointer; }
.amap-card__x:hover, .amap-card__x:focus-visible { color: var(--arcilla); background: var(--line-dark); outline: none; }
.amap-card__country { margin: 0 40px 10px 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cian); }
.amap-card__zones { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; }
.amap-card__time { margin: 0; font: 400 clamp(2.1rem, 3vw, 2.5rem)/1 var(--f-serif); font-variant-numeric: tabular-nums; white-space: nowrap; }
.amap-card__zones[data-n="2"] .amap-card__time { font-size: clamp(1.45rem, 2vw, 1.7rem); }
.amap-card__zone { margin: 6px 0 0; font-size: 10.5px; line-height: 1.35; color: var(--muted-d); }
.amap-card__live { display: flex; align-items: center; gap: 7px; margin: 10px 0 0; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--cian); }
.amap-card__text { margin: 12px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted-d); }
.amap-card__cta { margin-top: 12px; min-height: 44px; padding: 11px 18px; font-size: 13px; }

.amap-hint { margin: 6px 0 0; font-size: 11.5px; letter-spacing: .04em; color: var(--muted-d); }
html:not(.js) .amap-hint { display: none; }   /* sin JS no hay tarjetas que abrir */
.amap-wrap[data-active] .amap-hint { visibility: hidden; }   /* con una tarjeta abierta, la pista sobra y quedaba asomando detrás */

@media (max-width: 960px) {
  .ab-hero__map { max-width: 560px; }
  .amap-card { position: relative; left: auto; bottom: auto; width: auto; margin-top: 12px; }
}
@media (max-width: 640px) {
  .amap-pin__name { left: 30px; font-size: 9.5px; padding: 4px 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .amap__arc { animation: none; stroke-dashoffset: 0; }
  .amap-pin__dot::after { animation: none; }
  .amap-card { animation: none; }
  .amap__hot, .amap-pin__dot, .amap-pin__name { transition: none; }
}