/* ==========================================================================
   2.º Congreso de Sostenibilidad Corporativa — Pacto Global Red Paraguay
   Todo el CSS vive bajo .cg para poder inyectarlo en el child theme de
   Enfold sin colisionar con los estilos del theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Flama — tipografía de marca. Sólo existen dos pesos (Book y Extrabold),
   así que el sistema tipográfico entero se apoya en ese contraste.
   No usar 500/600/700: el navegador los sintetiza y ensucia el trazo.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Flama";
  src: url("../assets/fonts/Flama-Book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Flama";
  src: url("../assets/fonts/Flama-Extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Reset de página — SÓLO para la versión estática.
   El reset del componente vive bajo .cg y no toca el body a propósito. Pero
   suelto, el body arranca con margin: 8px y sin fondo, así que se ve el blanco
   del navegador como un marco alrededor de toda la página.
   Al portar a WordPress este bloque se descarta: el theme ya maneja html/body.
   -------------------------------------------------------------------------- */
html,
body {
  margin: 0;
  padding: 0;
  /* Espeja --deep-950, el fondo del pie: es el color que asoma en el rebote
     de scroll al final de la página, que es donde más se nota el corte. */
  background: #0E1C38;
}

/* El scroll suave vive en :root porque lo dispara la navegación por anclas,
   no un elemento del componente. Se apaga con reduced-motion más abajo. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.cg {
  /* — Paleta institucional Pacto Global — */
  --gc-blue:  #1E3250;   /* Global Compact Blue */
  --tone-1:   #4C6B8B;
  --tone-2:   #699CC6;
  --tone-3:   #AECFE6;
  --purple:   #6E417A;
  --gold:     #CCB146;
  --green:    #297D6D;
  --red:      #EC3740;

  /* — Superficies — Calibradas contra el flyer: el navy del KV es un azul
     medio luminoso, no un casi-negro. — */
  --deep-950: #0E1C38;
  --deep-900: #16294C;
  --deep-850: #1B3260;
  --deep-800: #21407A;
  --deep-700: #2B4F92;

  /* Superficie activa: la invierten las secciones claras. */
  --surface:   var(--deep-900);
  --surface-2: var(--deep-850);

  /* — Sección clara — */
  --paper:   #EEF2F7;
  --paper-2: #E2E9F2;

  /* — Azules del key visual (tomados de los SVG de círculos) — */
  --kv-cyan:  #0098DC;
  --kv-blue:  #0081BB;
  --kv-gold:  #CC9B4D;

  /* Acento de acción. Es el cian más brillante del degradé del KV, así que el
     botón principal queda atado al fondo del hero en vez de ser un parche
     blanco. La tinta va oscura, no blanca: sobre este cian el blanco da 3.2:1
     y no llega a AA para texto. */
  --accent:      #00B4F0;
  --accent-hi:   #4CCCF7;   /* hover */
  --accent-ink:  #08192B;

  /* — Tinta — */
  --ink:      #FFFFFF;
  --ink-80:   rgba(255,255,255,.80);
  --ink-60:   rgba(255,255,255,.60);
  --ink-40:   rgba(255,255,255,.40);
  --ink-16:   rgba(255,255,255,.16);
  --ink-08:   rgba(255,255,255,.08);
  --ink-04:   rgba(255,255,255,.04);

  /* La barra espectro reproduce el degradé del pie del KV y es, además, el
     índice de los cuatro ejes temáticos. */
  --spectrum: linear-gradient(90deg,
      var(--kv-gold) 0%, var(--green) 27%, var(--kv-cyan) 50%,
      var(--kv-blue) 72%, var(--purple) 100%);

  /* Grano. Ruido fractal en un SVG embebido, no una textura PNG: pesa ~400
     bytes, no suma request y al ir en el filtro escala sin pixelarse.
     La matriz pasa el ruido a luminancia (gris centrado en .5) con alfa plena;
     eso es lo que permite fundirlo en `soft-light`, que aclara y oscurece por
     igual. Un ruido con alfa variable sólo ensuciaría hacia oscuro.
     color-interpolation-filters='sRGB' no es opcional: por defecto el filtro
     trabaja en linearRGB y el gris medio sale convertido a ~187, con lo que el
     `soft-light` deja de ser neutro y lava el azul.
     stitchTiles='stitch' hace que el mosaico empalme y no se vea la grilla. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.33 .33 .33 0 0 .33 .33 .33 0 0 .33 .33 .33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E");

  /* — Métrica — */
  --wrap: 1180px;
  --gut: clamp(1.25rem, 5vw, 4rem);
  --sect-y: clamp(4.5rem, 10vw, 9rem);
  /* Escala de redondeo. Una tarjeta grande y una celda chica no llevan el
     mismo radio: con un valor único, o las chicas quedan infladas o las
     grandes quedan rectas. */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;

  --ease: cubic-bezier(.2,.7,.3,1);

  font-family: "Flama", "Roboto", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--deep-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* red de contención: nada debe generar scroll horizontal */
}

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

/* --------------------------------------------------------------------------
   Grano — ajustes comunes de la capa
   El ruido va como primera capa del propio `background` de cada superficie, no
   como pseudo-elemento: así no toca el apilado de ninguna sección (el hero y
   el cierre ya usan ::before/::after y z-index para el key visual) y no hay
   que reservar un z-index más.
   `soft-light` es lo que lo vuelve grano y no suciedad: el gris medio del
   ruido no altera el fondo, y sólo los picos claros y oscuros lo modulan.
   La lista lleva tres valores porque ninguna superficie pasa de tres capas;
   los sobrantes los descarta el navegador. No hace falta `background-size`: el
   SVG declara 200×200 y ése es su tamaño intrínseco — y además el shorthand
   `background` de cada sección lo resetearía desde acá.
   La sección clara vuelve a declarar `background` con su propio color, así que
   queda sin grano a propósito: sobre papel el ruido se lee como impresión
   sucia, no como textura.
   -------------------------------------------------------------------------- */
.cg-hero,
.cg-section,
.cg-band,
.cg-cta,
.cg-footer {
  background-blend-mode: soft-light, normal, normal;
}

/* El reset va dentro de :where() para que su especificidad sea 0 y no le gane
   a las clases del componente. Sin esto, `.cg p { margin: 0 }` pisa a
   cualquier `.cg-loquesea { margin-bottom: … }`. */
:where(.cg) :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; padding: 0; }
:where(.cg) :where(ul, ol) { list-style: none; }
:where(.cg) :where(img, svg) { max-width: 100%; display: block; }
:where(.cg) :where(img) { height: auto; }
:where(.cg) :where(a) { color: inherit; text-decoration: none; }

.cg :focus-visible {
  outline: 2px solid var(--tone-3);
  outline-offset: 3px;
  border-radius: 2px;
}

.cg ::selection { background: var(--kv-cyan); color: #fff; }

/* Los anclajes del subnav aterrizaban con el título tapado por la barra
   sticky. scroll-margin lo resuelve en el destino, sin JS ni offsets. */
.cg [id] { scroll-margin-top: 5rem; }

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

.cg-skip {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -110%);
  z-index: 200;
  background: var(--ink); color: var(--gc-blue);
  padding: .65rem 1.1rem; font-weight: 800; font-size: .9rem;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: transform .18s var(--ease);
}
.cg-skip:focus { transform: translate(-50%, 0); }

.cg-wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* ==========================================================================
   Tipografía
   ========================================================================== */

.cg-eyebrow {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tone-2);
  margin-bottom: 1.1rem;
}

/* Los cortes de línea están dirigidos con <br>, así que no se usa
   text-wrap: balance — se pelean entre sí y producen líneas huérfanas. */
.cg-h2 {
  font-size: clamp(2rem, 5.4vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.018em;
}

.cg-h3 {
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.012em;
}

.cg-section :where(p) {
  font-size: clamp(.98rem, 1.35vw, 1.06rem);
  line-height: 1.65;
  color: var(--ink-80);
}

.cg-lead {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.5;
  color: var(--ink);
}

/* ==========================================================================
   Botones
   ========================================================================== */

.cg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem 1.7rem;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .015em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .2s var(--ease),
              background-position .5s var(--ease);
}
.cg-btn:hover { transform: translateY(-1px); }

/* `:where(.cg) a { color: inherit }` tiene especificidad 0, así que estas
   clases ganan sin necesidad de calificarlas. */

/* El hover barre un degradé en vez de cambiar de color plano. No se anima el
   degradé (los stops no interpolan): la imagen mide el doble del botón y lo
   que se mueve es `background-position`, que sí transiciona. La mitad derecha
   es cian pleno —el estado de reposo es idéntico al de antes— y la izquierda
   trae el color; el hover desplaza la ventana de una a la otra.
   Los stops salen del tramo claro del espectro (dorado → cian). El verde y el
   púrpura quedan afuera a propósito: con la tinta oscura del botón dan 2.5:1 y
   1.9:1, o sea que el rótulo dejaría de leerse justo al pasar el mouse. */
.cg-btn--solid {
  background-color: var(--accent);
  background-image: linear-gradient(96deg,
      var(--gold) 0%, var(--accent-hi) 25%, var(--accent) 50%, var(--accent) 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  color: var(--accent-ink);
}
.cg-btn--solid:hover,
.cg-btn--solid:focus-visible { background-position: 0 0; color: var(--accent-ink); }

/* El fantasma lleva el mismo gesto en tinte: como el rótulo va en blanco sobre
   el fondo de la sección, acá sí entra el espectro entero, púrpura incluido. */
.cg-btn--ghost {
  border-color: var(--ink-40);
  color: var(--ink);
  background-image: linear-gradient(96deg,
      rgba(204,177,70,.20) 0%, rgba(76,204,247,.20) 28%, rgba(110,65,122,.24) 48%,
      transparent 50%, transparent 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
}
.cg-btn--ghost:hover,
.cg-btn--ghost:focus-visible { border-color: var(--ink); background-position: 0 0; }

.cg-btn--sm { padding: .6rem 1.15rem; font-size: .8rem; }
.cg-btn--lg { padding: 1.15rem 2.4rem; font-size: 1rem; }

/* Flecha en disco: da al CTA principal una señal de avance clara y lo
   distingue del secundario sin depender sólo del relleno. */
/* La flecha sale por la derecha y entra una nueva desde la izquierda. El disco
   recorta el recorrido, así que se lee como un relevo y no como un salto. */
.cg-btn--arrow { padding-right: .5rem; gap: 1rem; }
.cg-btn__arrow {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.1em; height: 2.1em;
  border-radius: 50%;
  background: var(--gc-blue);
  color: var(--ink-on-accent, #fff);
  flex-shrink: 0;
  overflow: hidden;
}
.cg-btn__arrow svg {
  grid-area: 1 / 1;
  width: 1em; height: 1em;
  transition: transform .34s var(--ease);
}
/* La segunda flecha es un clon del ::after, esperando fuera del disco. */
.cg-btn__arrow::after {
  content: "";
  grid-area: 1 / 1;
  width: 1em; height: 1em;
  background: currentColor;
  transform: translateX(-160%);
  transition: transform .34s var(--ease);
  -webkit-mask: var(--cg-arrow) center / contain no-repeat;
          mask: var(--cg-arrow) center / contain no-repeat;
}
.cg-btn--arrow:hover .cg-btn__arrow svg { transform: translateX(160%); }
.cg-btn--arrow:hover .cg-btn__arrow::after { transform: translateX(0); }

.cg { --cg-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E"); }
/* El disco navy con la flecha blanca ya contrasta contra el cian del botón en
   cualquier sección, así que no hace falta invertirlo en la sección clara. */

/* ==========================================================================
   Barra espectro — separador recurrente
   ========================================================================== */

.cg-spectrum { height: 6px; width: 100%; background: var(--spectrum); }
.cg-spectrum--bottom { position: absolute; bottom: 0; left: 0; }

/* ==========================================================================
   Nav de sección
   ========================================================================== */

.cg-subnav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(22,41,76,.86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--ink-08);
}

.cg-subnav__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: .7rem var(--gut);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.cg-subnav__brand { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.cg-subnav__ord { width: 22px; color: var(--gold); flex-shrink: 0; }
.cg-subnav__ord svg { width: 100%; height: auto; fill: currentColor; }
.cg-subnav__brandtext {
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.2;
  /* En caja alta el texto crece, así que baja un punto el cuerpo y sube el
     tracking: la versalita apretada de Flama Extrabold se empasta. */
  text-transform: uppercase;
  letter-spacing: .06em;
  max-width: 14ch;
  color: var(--ink-80);
}

.cg-subnav__links { display: flex; gap: 1.6rem; margin-left: auto; font-size: .85rem; }
.cg-subnav__links a {
  color: var(--ink-60);
  padding-block: .35rem;
  border-bottom: 1px solid transparent;
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.cg-subnav__links a:hover,
.cg-subnav__links a.is-active { color: var(--ink); border-bottom-color: var(--gold); }

/* — Botón de menú — sólo existe bajo 980px — */
.cg-subnav__toggle {
  display: none;
  align-items: center;
  gap: .55rem;
  margin-left: auto;
  padding: .5rem .2rem .5rem 0;
  background: none;
  border: 0;
  color: var(--ink-80);
  font: inherit;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
}
/* Dos barras, no tres: al abrir, la de arriba baja y gira y la de abajo sube
   y gira, formando la X. Con tres hay que esconder la del medio y el cruce
   nunca cierra parejo. */
.cg-subnav__bars {
  position: relative;
  width: 18px; height: 12px;
  flex-shrink: 0;
}
.cg-subnav__bars::before,
.cg-subnav__bars::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
  transition: transform .25s var(--ease);
}
.cg-subnav__bars::before { top: 1px; }
.cg-subnav__bars::after  { bottom: 1px; }
.cg-subnav.is-open .cg-subnav__bars::before { transform: translateY(4px) rotate(45deg); }
.cg-subnav.is-open .cg-subnav__bars::after  { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 980px) {
  .cg-subnav__inner { gap: 1rem; }
  .cg-subnav__toggle { display: inline-flex; }
  .cg-subnav__brandtext { max-width: none; }

  /* El CTA se queda en la barra: es la acción de toda la página y esconderlo
     tras el menú lo saca de vista en todo el scroll. Lo que cede espacio es la
     etiqueta del toggle, no el botón. */
  .cg-subnav__cta { order: 2; }
  .cg-subnav__toggle { order: 3; margin-left: 0; }
  .cg-subnav__brand { margin-right: auto; }

  /* La misma <ul> del desktop pasa a panel desplegable. */
  .cg-subnav__links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: .5rem var(--gut) 1.25rem;
    background: var(--deep-900);
    border-bottom: 1px solid var(--ink-08);
    font-size: 1rem;
  }
  .cg-subnav.is-open .cg-subnav__links { display: flex; }
  .cg-subnav__links li { border-bottom: 1px solid var(--ink-08); }
  .cg-subnav__links li:last-child { border-bottom: 0; }
  .cg-subnav__links a {
    display: block;
    padding-block: .85rem;
    border-bottom: 0;
    color: var(--ink-80);
  }
  .cg-subnav__links a.is-active { color: var(--ink); border-bottom: 0; }
}
@media (max-width: 700px) {
  /* Con el CTA en la barra ya no entra la etiqueta. El ícono queda solo, pero
     el botón conserva su nombre accesible por el texto oculto. */
  .cg-subnav__togglelabel {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .cg-subnav__toggle { padding-inline: .35rem; }
}
@media (max-width: 560px) { .cg-subnav__brandtext { font-size: .72rem; max-width: 14ch; } }
@media (max-width: 420px) { .cg-subnav__brandtext { display: none; } }

/* ==========================================================================
   HERO
   ========================================================================== */

.cg-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Arranca en el azul del propio arte (#1E3250 = --gc-blue) para que, cuando
     el KV no llega a cubrir todo el alto, el empalme sea invisible. */
  background:
    var(--grain),
    linear-gradient(180deg, var(--gc-blue) 0%, var(--deep-900) 62%, var(--deep-950) 100%);
  padding-block: clamp(3.5rem, 9vh, 6rem) clamp(4rem, 9vw, 7rem);
}

/* — Fondo del key visual — arte original del flyer — */
.cg-hero__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* El arte es apaisado (2035×1150) y el hero casi siempre es más alto de lo que
   esa proporción da, así que se recorta con cover. object-position lo encuadra:
   en desktop se corre a la derecha, donde está el racimo de anillos, dejando
   libre el flanco izquierdo para el titular. */
.cg-hero__kv {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 38%;
  /* Sobredimensión: le da recorrido al parallax sin que el borde del arte
     entre en cuadro. Va también en CSS —no sólo en el transform del JS— para
     que el encuadre sea el mismo con reduced-motion o sin JavaScript. */
  transform: scale(1.08);
}

/* La entrada del <img> va acá y no dentro del SVG: un SVG consumido con <img>
   no ejecuta su CSS interno de forma confiable y los haces quedaban invisibles.
   Se anima sólo la opacidad, no el transform, porque el transform del <img> lo
   maneja el parallax desde JS y una animación lo pisaría mientras corre.
   Esta capa es el estado de reposo —lo que se ve sin JS o si falla el fetch—:
   cuando el KV pasa a inline lo reemplaza la entrada haz por haz. */
@media (prefers-reduced-motion: no-preference) {
  .cg-hero__kv:not(.cg-hero__kv--live) { animation: cg-kv-in 1.5s var(--ease) backwards; }
  @keyframes cg-kv-in { from { opacity: 0; } }
}

/* --------------------------------------------------------------------------
   KV vivo — el mismo arte, pero inline
   El <img> no deja animar los haces por separado (el SVG queda congelado en su
   primer fotograma), así que main.js lo reemplaza por el SVG inline. Ahí sí
   cada haz es un <g> propio —vienen marcados con data-kv-bundle desde el
   export— y puede entrar escalonado y respirar solo.
   `object-fit` / `object-position` no existen para un SVG inline: el encuadre
   (cubrir + correrlo a 68%/38%) lo recalcula kvFrame() en main.js.
   -------------------------------------------------------------------------- */
/* `overflow: visible` no es cosmético: un <svg> recorta a su propia caja, así
   que al correr el encuadre con un transform quedaba una franja sin arte del
   lado contrario. Un <img> con object-fit no tiene ese problema porque el
   recorte lo hace el contenido, no el elemento. Con overflow visible el sobrante
   del `slice` se sigue pintando y quien recorta es .cg-hero__field. */
.cg-hero__kv--live { display: block; width: 100%; height: 100%; overflow: visible; }

@media (prefers-reduced-motion: no-preference) {
  /* Respiración ambiente. Cada haz lleva su duración, su amplitud y un desfase
     negativo propio (los setea main.js): con un solo tiempo compartido los
     seis laten al unísono y se lee como un zoom de la página entera, no como
     un campo vivo. */
  .cg-hero__kv--live [data-kv-bundle] {
    animation: cg-kv-breath var(--kv-dur, 32s) ease-in-out var(--kv-delay, 0s) infinite;
  }
  /* Fuera de cuadro no hay nada que mirar y sí seis grupos de trazos con
     degradé repintando a 60fps. El observer del hero apaga el ciclo. */
  .cg-hero__field.is-idle [data-kv-bundle] { animation-play-state: paused; }
}

@keyframes cg-kv-breath {
  0%, 100% { transform: rotate(0deg) scale(1); }
  50%      { transform: rotate(var(--kv-rot, .6deg)) scale(var(--kv-amp, 1.015)); }
}

/* Se desvanece hacia abajo y hacia la izquierda: es lo que garantiza contraste
   bajo el titular sin tener que oscurecer el arte entero. */
.cg-hero__field::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--deep-950) 2%, rgba(14,28,56,.55) 34%, transparent 68%),
    linear-gradient(to right, rgba(14,28,56,.72) 0%, transparent 52%);
}

.cg-arcs { position: absolute; inset: 0; width: 100%; height: 100%; }
.cg-arcs [data-arcs-cta] circle { fill: none; vector-effect: non-scaling-stroke; }

/* Deriva ambiental: el haz respira, muy lento. */
.cg-arcs--cta [data-arcs-cta] { animation: cg-drift 44s ease-in-out infinite reverse; transform-origin: 50% 100%; }

@keyframes cg-drift {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}

/* Los anillos del cierre van a los flancos, no al centro, así que la máscara
   se abre hacia los costados en vez de concentrarse abajo: con la radial
   anterior los aros laterales quedaban casi apagados. */
.cg-arcs--cta {
  -webkit-mask-image: radial-gradient(120% 130% at 50% 78%, #000 0%, #000 48%, rgba(0,0,0,.6) 78%, transparent 100%);
          mask-image: radial-gradient(120% 130% at 50% 78%, #000 0%, #000 48%, rgba(0,0,0,.6) 78%, transparent 100%);
}

.cg-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* Logo a la izquierda: los anillos ocupan el flanco derecho, así que esa
   columna queda libre para la marca y el titular. */
.cg-hero__eyebrow { margin-bottom: clamp(2rem, 6vh, 3.5rem); }
/* display:block es necesario — como <span> inline el width se ignora y el
   logo se dibuja a su tamaño natural (142px). */
/* Sin velo detrás: el logo queda limpio porque las cintas se trazan de modo
   que el ángulo superior derecho cae dentro del círculo interior del haz. */
/* Los dos logos institucionales son enlaces al sitio de Pacto Global: es la
   continuidad con la casa madre sin arrastrar su header, que en una página
   con una sola acción sería un menú de salidas. El realce en hover alcanza
   como señal —el logo ya se lee como marca, no hay que subrayarlo—. */
.cg-hero__logo, .cg-footer__logo {
  display: block;
  transition: opacity .25s var(--ease);
}
.cg-hero__logo:hover, .cg-footer__logo:hover { opacity: .72; }

.cg-hero__logo { width: clamp(80px, 8vw, 108px); }
.cg-footer__logo { width: fit-content; }

.cg-hero__title {
  display: flex;
  align-items: flex-start;
  /* El arte del "2°" llega hasta el borde de su caja (las reglas horizontales
     de la base), así que el hueco óptico es menor que el gap declarado: con
     20px el ordinal se tocaba con la C de CONGRESO. */
  gap: clamp(1.25rem, 3.4vw, 2.75rem);
  margin-bottom: clamp(1.3rem, 3vw, 1.9rem);
}

.cg-hero__titletext {
  font-size: clamp(2.5rem, 7.6vw, 5.6rem);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

/* El "2°" es el vector original extraído del logo del congreso. */
.cg-ord {
  flex-shrink: 0;
  width: clamp(56px, 10.5vw, 112px);
  color: var(--gold);
  margin-top: clamp(.15rem, .6vw, .5rem);
}
.cg-ord svg { width: 100%; height: auto; fill: currentColor; }

.cg-hero__claim {
  font-size: clamp(1.1rem, 3vw, 2rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--tone-2);
  margin-bottom: clamp(2.2rem, 5vw, 3.2rem);
}

.cg-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--ink-16);
  margin-bottom: clamp(2rem, 4vw, 2.6rem);
}
.cg-hero__metaitem dt {
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: .5rem;
}
.cg-hero__metaitem dd { font-size: clamp(.98rem, 1.5vw, 1.12rem); line-height: 1.4; }
.cg-hero__city { color: var(--ink-60); }

.cg-hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Aclaración del formulario: la inscripción es sólo para miembros. Va en el
   registro tipográfico de los dt del meta para que lea como letra chica. */
.cg-hero__ctanote {
  margin-top: .8rem;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.cg-hero .cg-spectrum { position: absolute; bottom: 0; left: 0; z-index: 2; }

/* En pantallas angostas el "2°" pasa arriba: en línea deja al titular sin
   ancho suficiente y "SOSTENIBILIDAD" se sale de la pantalla. */
@media (max-width: 620px) {
  .cg-hero__title { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .cg-ord { width: 52px; margin-top: 0; }
  .cg-hero__titletext { font-size: clamp(2rem, 9.6vw, 3rem); }
  .cg-hero__meta { gap: 1.4rem; }
}

/* ==========================================================================
   Secciones
   ========================================================================== */

.cg-section {
  padding-block: var(--sect-y);
  background: var(--grain), var(--surface);
  border-top: 1px solid var(--ink-08);
}
.cg-section:first-of-type { border-top: 0; }

/* --------------------------------------------------------------------------
   Sección clara
   Sólo redefine los tokens: como todo el componente referencia --ink-* y
   --surface, el resto (bordes, placeholders, hovers) se adapta solo.
   -------------------------------------------------------------------------- */
.cg-section--light {
  --surface:   var(--paper);
  --surface-2: var(--paper-2);
  --ink:    #1E3250;
  --ink-80: rgba(30,50,80,.84);
  --ink-60: rgba(30,50,80,.64);
  --ink-40: rgba(30,50,80,.44);
  --ink-16: rgba(30,50,80,.18);
  --ink-08: rgba(30,50,80,.10);
  --ink-04: rgba(30,50,80,.05);
  --tone-2: #4C6B8B;   /* el tone-2 claro no contrasta sobre papel */
  background: var(--surface);
  color: var(--ink);
  border-top: 0;
}
.cg-section--light + .cg-section { border-top: 0; }
/* El acento funciona igual sobre papel que sobre navy, así que la sección
   clara ya no necesita su propia variante: un único botón de acción en toda
   la página se lee como un sistema y no como tres botones distintos. */

/* El max-width va en el copy, no en el bloque: sobre .cg-secthead el `ch` se
   calcula con los 16px heredados (~370px) y estrangula al h2, que ya tiene
   sus cortes dirigidos con <br>. */
.cg-secthead { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.cg-secthead--center { margin-inline: auto; text-align: center; max-width: 46rem; }
.cg-secthead__note {
  margin-top: 1.1rem;
  max-width: 46ch;
  font-size: .92rem;
  color: var(--ink-60);
}
.cg-secthead--center .cg-secthead__note { margin-inline: auto; }

/* — Sección 1: intro — */
.cg-section--intro {
  background:
    var(--grain),
    radial-gradient(80% 100% at 100% 0%, rgba(105,156,198,.16) 0%, transparent 62%),
    var(--surface);
}
.cg-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
/* La columna del titular es angosta: el h2 se topea para no quebrar en 5 líneas. */
.cg-intro .cg-h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
.cg-intro__body { display: flex; flex-direction: column; gap: 1.15rem; }

/* El titular queda fijo mientras el texto y el video pasan al lado. Va en esta
   columna y no en la otra porque la derecha es la que define el alto de la
   sección: pegada ahí no tendría recorrido y el sticky no haría nada.
   Sólo desde 861px — abajo de eso la grilla pasa a una sola columna.
   El offset esquiva el subnav sticky, que mide unos 66px. */
@media (min-width: 861px) {
  .cg-intro__head {
    position: sticky;
    top: 5.5rem;
    align-self: start;
  }
}
.cg-intro__pitch { font-size: 1.06rem; font-weight: 800; color: var(--ink); padding-top: .4rem; }

@media (max-width: 860px) { .cg-intro { grid-template-columns: 1fr; } }

/* — Video resumen — carga diferida de YouTube — */
.cg-video { margin-top: 1.2rem; }
.cg-video__btn {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--deep-950);
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
.cg-video__poster {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: saturate(.7) brightness(.62);
  transition: filter .4s var(--ease), transform .6s var(--ease);
}
.cg-video__btn:hover .cg-video__poster { filter: saturate(.95) brightness(.75); transform: scale(1.02); }

.cg-video__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: clamp(52px, 8vw, 68px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--spectrum);
  transition: transform .25s var(--ease);
}
.cg-video__btn:hover .cg-video__play { transform: translate(-50%, -50%) scale(1.08); }
.cg-video__play svg { width: 45%; height: 45%; fill: var(--deep-950); }

.cg-video__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1.2rem .9rem;
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
  background: linear-gradient(transparent, rgba(7,14,25,.85));
}
.cg-video__sub { display: block; font-weight: 400; font-size: .8rem; opacity: .75; margin-top: .15rem; }

.cg-video__frame { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; border-radius: var(--r-lg); }

/* — Sección 2: formatos —
   Lista de filas anchas en vez de una grilla de cuatro celdas iguales: el
   numeral abre la fila, el icono la ancla y el texto respira en una columna
   sola. La regla superior es la única división; sin cajas ni fondos. */
.cg-formats { border-top: 1px solid var(--ink-16); }
.cg-format {
  display: grid;
  grid-template-columns: 4.5rem 44px minmax(0, 15rem) minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(1.25rem, 3vw, 2.5rem);
  row-gap: .5rem;
  padding-block: clamp(1.6rem, 3.2vw, 2.4rem);
  border-bottom: 1px solid var(--ink-08);
}
/* El numeral es el índice de lectura, no un adorno: va en el oro de marca y
   alineado ópticamente con el título, no con la caja. */
.cg-format__n {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  /* Azul del KV y no el oro de marca. El oro es un color claro: sobre el papel
     da 1.88:1, y oscurecerlo hasta que contraste lo saca de su propio tono y
     lo manda al oliva. Funciona sobre navy, no sobre papel. Este azul llega a
     3.85:1 —suficiente para texto grande, que es lo que son estos numerales a
     24-32px en peso 800— y ata la lista al arte del hero sin confundirse con
     el cian del botón, que sí es accionable. */
  color: var(--kv-blue);
}
/* Si la sección alguna vez pasa a fondo oscuro, ahí el oro sí es el correcto. */
.cg-section:not(.cg-section--light) .cg-format__n { color: var(--gold); }
.cg-format__icon {
  display: block; width: 44px;
  color: var(--tone-2);
  transition: color .25s var(--ease);
}
.cg-format__icon svg { width: 100%; height: auto; }
.cg-format:hover .cg-format__icon { color: var(--kv-cyan); }
.cg-format__title {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.012em;
  padding-top: .1rem;
}
.cg-format p { font-size: clamp(.92rem, 1.2vw, 1rem); line-height: 1.6; color: var(--ink-60); max-width: 46ch; }

/* Bajo 900px el icono pasa a compartir fila con el numeral y el texto ocupa
   el ancho completo: en dos columnas angostas el título quebraba en 4 líneas. */
@media (max-width: 900px) {
  .cg-format {
    grid-template-columns: 3rem minmax(0, 1fr);
    column-gap: 1.25rem;
  }
  .cg-format__icon { grid-column: 2; width: 38px; margin-bottom: .35rem; }
  .cg-format__n { padding-top: .15rem; }
  .cg-format__title, .cg-format p { grid-column: 2; }
}

/* — Banda de fotos de la 1.ª edición —
   Dos bloques seguidos suman sus dos paddings: con --sect-y a tope eso da
   288px entre la tira de fotos y las cifras, casi un tercio de viewport en
   blanco, y se lee como que el capítulo terminó cuando en realidad sigue.
   La banda y las cifras son el mismo tema —"la primera edición", y las cifras
   son justamente las de esas fotos—, así que el aire de sección entra una vez
   en la apertura del capítulo y adentro se acorta. El corte real está antes,
   contra el bloque del contexto, y ahí lo marca el borde superior. */
.cg-band {
  padding-block: calc(var(--sect-y) * .45) calc(var(--sect-y) * .3);
  background: var(--grain), var(--surface);
  border-top: 1px solid var(--ink-08);
}
/* La sección que sigue a la banda entra sin su aire completo: la mitad del
   hueco ya la puso la banda. */
.cg-band + .cg-section { padding-top: calc(var(--sect-y) * .3); }
/* Y el bloque anterior tampoco necesita cerrar con el aire entero, porque la
   banda ya abre con el suyo. `:has()` sin soporte deja el padding de siempre:
   queda más suelto, no roto. */
.cg-section:has(+ .cg-band) { padding-bottom: calc(var(--sect-y) * .6); }
.cg-band .cg-eyebrow { margin-bottom: 1.6rem; }
/* Altura fija en la tira, no aspect-ratio por ítem: con columnas de distinto
   ancho cada foto tomaría una altura distinta y el borde inferior queda dentado.
   Va dentro del contenedor, no a sangre: con las esquinas redondeadas, pegar
   las fotos al borde del viewport se lee como un error de recorte. */
.cg-band__strip {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(.4rem, 1vw, .75rem);
  height: clamp(200px, 26vw, 380px);
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}
.cg-band__item { margin: 0; overflow: hidden; min-width: 0; border-radius: var(--r); }
.cg-band__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Las fotos son de eventos con luz e iluminación variadas: el desaturado y
     el tinte azul las unifican y las bajan al nivel del fondo. */
  filter: saturate(.55) contrast(1.05) brightness(.78);
  transition: filter .5s var(--ease), transform .8s var(--ease);
}
.cg-band__item:hover img { filter: saturate(.9) contrast(1) brightness(.95); transform: scale(1.03); }

@media (max-width: 780px) {
  .cg-band__strip { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; height: auto; }
  .cg-band__item { aspect-ratio: 3 / 2; }
  .cg-band__item:first-child { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
}
@media (max-width: 460px) {
  .cg-band__strip { grid-template-columns: 1fr; }
  .cg-band__item, .cg-band__item:first-child { grid-column: auto; aspect-ratio: 3 / 2; }
}

/* — Cifras de la 1.ª edición — */
.cg-section--figures {
  background:
    var(--grain),
    radial-gradient(60% 90% at 80% 0%, rgba(0,152,220,.12) 0%, transparent 60%),
    var(--surface);
  border-top: 0;
}
.cg-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
}
/* Sin tarjeta: el numeral se apoya en el fondo de la sección y el eje se
   indexa con la misma regla de color que los temas. Evita el bloque de color
   pleno, que a este tamaño se lee como plantilla y además obligaba a definir
   una tinta distinta por tarjeta para mantener el contraste. */
.cg-figure {
  padding-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.cg-figure__bar {
  display: block; height: 4px; width: 100%;
  background: var(--fig);
  margin-bottom: .6rem;
  transform-origin: left;
  transition: transform .8s var(--ease);
}
.cg-figure__n {
  font-size: clamp(3.25rem, 8vw, 5.5rem);
  font-weight: 800;
  line-height: .82;
  letter-spacing: -.045em;
  /* Sin esto hereda el --ink-80 de `.cg-section p` y el numeral queda
     grisáceo, justo al revés de lo que pide una cifra destacada. */
  color: var(--ink);
  /* Cifras de ancho fijo: mientras corre el conteo, "1" y "7" ocupan lo mismo
     y el bloque no tiembla. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
/* Hereda la tinta del numeral en vez de tomar el color del eje: la "h" de "9h"
   es parte del dato, y en violeta sobre el navy quedaba en 1.85:1 — ilegible.
   El color del eje ya lo lleva la regla superior, que no tiene que leerse. */
.cg-figure__unit { font-size: .42em; letter-spacing: -.02em; margin-left: .06em; }
.cg-section--figures .cg-figure__label {
  font-size: .95rem;
  line-height: 1.4;
  color: var(--ink-60);
  max-width: 24ch;
}

@media (max-width: 900px) { .cg-figures { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 440px) { .cg-figures { grid-template-columns: 1fr; } }

/* — Sección 4: ejes temáticos — */
.cg-section--temas {
  background:
    var(--grain),
    radial-gradient(70% 90% at 12% 100%, rgba(41,125,109,.20) 0%, transparent 62%),
    var(--surface);
}
.cg-temas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3.5vw, 2.75rem); }
.cg-tema { padding-top: 1.5rem; display: flex; flex-direction: column; gap: .7rem; }
.cg-tema__bar {
  display: block; height: 4px; width: 100%;
  background: var(--tema);
  margin-bottom: .5rem;
  transform-origin: left;
  transition: transform .8s var(--ease);
}
.cg-tema__title { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 800; line-height: 1.08; letter-spacing: -.015em; }
.cg-tema p { color: var(--ink-60); max-width: 42ch; }

@media (max-width: 780px) { .cg-temas { grid-template-columns: 1fr; } }

/* — Sección 5: agenda — */
.cg-agenda { border-top: 1px solid var(--ink-16); }
.cg-slot {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding-block: clamp(1.1rem, 2.2vw, 1.6rem);
  border-bottom: 1px solid var(--ink-08);
}
.cg-slot__time {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.cg-slot__tba { font-size: .95rem; color: var(--ink-60); display: inline-flex; align-items: center; gap: .6rem; }
.cg-slot__tba::before { content: ""; width: 24px; height: 1px; background: var(--ink-16); flex-shrink: 0; }

@media (max-width: 520px) { .cg-slot { grid-template-columns: 1fr; gap: .35rem; } }

/* — Sección 6: speakers — */
.cg-section--speakers {
  background:
    var(--grain),
    radial-gradient(60% 80% at 50% 0%, rgba(110,65,122,.26) 0%, transparent 64%),
    var(--surface);
  text-align: center;
}
.cg-speakers__soon {
  max-width: 52ch;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  font-size: clamp(1.02rem, 1.6vw, 1.15rem);
  color: var(--ink-80);
}
/* La cabecera de la sección va centrada, pero las fichas no: los cargos son
   largos y de largo desigual ("Punto focal para LATAM y el Caribe" contra
   "Nexans"), y centrados dejan el bloque de texto bailando bajo cada foto. */
.cg-speakers__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2rem);
  text-align: left;
}

.cg-speaker__ph {
  margin: 0 0 clamp(.9rem, 2vw, 1.15rem);
  overflow: hidden;
  border-radius: var(--r);
  background: var(--ink-04);
}
.cg-speaker__ph img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  /* Mismo grado que la banda y el par de "Sobre Pacto Global". Acá pesa más
     que allá: las cuatro fotos vienen de fuentes distintas —dos retratos de
     estudio, una al aire libre y una contra un fondo de marca— y sin bajarles
     la saturación se leen como cuatro recortes pegados, no como una serie. */
  filter: saturate(.55) contrast(1.05) brightness(.86);
  transition: filter .5s var(--ease), transform .8s var(--ease);
}
.cg-speaker:hover .cg-speaker__ph img { filter: saturate(.95) contrast(1) brightness(1); transform: scale(1.03); }

/* Internacional o nacional. Toma el color por --sc desde el HTML, con la misma
   regla de índice cromático que usan los ejes temáticos y las cifras. */
.cg-speaker__scope {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sc, var(--ink-60));
}
.cg-speaker__scope::before {
  content: "";
  width: 18px; height: 2px;
  background: currentColor;
  flex-shrink: 0;
}

.cg-speaker__name {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  margin-bottom: .3rem;
}
.cg-speaker__role { font-size: .9rem; line-height: 1.4; color: var(--ink-80); }
.cg-speaker__org  { font-size: .82rem; line-height: 1.4; color: var(--ink-60); margin-top: .15rem; }

/* Se queda en dos columnas hasta abajo de todo. En una sola, cuatro retratos
   a ancho completo son cuatro pantallas de scroll para leer un panel de
   cuatro nombres; a dos, la foto todavía mide ~150px y se lee sin problema. */
@media (max-width: 860px) { .cg-speakers__list { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* — Sección 7: organizaciones — */
.cg-orgs { display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3rem); }
.cg-orgs__label {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tone-2);
  margin-bottom: 1.1rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--ink-08);
}
.cg-orgs__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: clamp(.6rem, 1.4vw, 1rem); }
/* Alto explícito, no aspect-ratio: aspect-ratio no recorta, sólo propone, así
   que un logo cuadrado estiraba su celda al doble y descuadraba la fila.
   Con alto definido, el max-height del logo resuelve contra algo real. */
/* El padding vertical es mayor que el horizontal a propósito: es lo que
   equilibra ópticamente la fila. Con object-fit, un logo cuadrado se topea
   por el alto y uno apaisado por el ancho, así que achicando sólo el alto
   útil se evita que los cuadrados pesen el doble. */
.cg-orgs__row li {
  display: block;
  height: clamp(64px, 5.8vw, 84px);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.cg-orgs__row--lg { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.cg-orgs__row--lg li { height: clamp(88px, 8.2vw, 118px); }

/* Los logos llegan en proporciones muy distintas: cuadrados, apaisados 6:1,
   verticales. La caja manda y el logo se encaja dentro con object-fit.
   No usar max-height en %: el navegador lo resuelve contra una altura que
   considera indefinida, no aplica el tope y el logo se desborda — con el
   overflow del contenedor eso terminaba recortando la mitad de las marcas. */
/* Posicionamiento absoluto con los cuatro lados fijados: así la caja del logo
   queda completamente determinada y no depende de que el navegador resuelva un
   porcentaje contra una altura que considera indefinida. Ese era el motivo por
   el que los logos cuadrados se desbordaban y el overflow los decapitaba.
   El inset vertical es mayor que el horizontal a propósito: con object-fit un
   logo cuadrado se topea por el alto y uno apaisado por el ancho, así que
   recortar sólo el alto útil evita que los cuadrados pesen el doble. */
.cg-orgs__row li img {
  display: block;
  width: 100%;
  height: 100%;
  /* El respiro va como padding de la propia imagen, no de la celda: con
     box-sizing: border-box el object-fit encaja el dibujo dentro del área ya
     descontada. El inset vertical es mayor que el horizontal a propósito —
     un logo cuadrado se topea por el alto y uno apaisado por el ancho, así
     que recortar sólo el alto útil evita que los cuadrados pesen el doble. */
  padding: clamp(.6rem, 1.3vw, 1rem) clamp(.55rem, 1.2vw, .85rem);
  object-fit: contain;
  object-position: center;
  filter: saturate(.9);
  opacity: .88;
  transition: opacity .25s var(--ease), filter .25s var(--ease);
}
.cg-orgs__row li:hover img { opacity: 1; filter: none; }

/* Algunos logos llegaron en JPG con fondo blanco. Sobre la sección clara,
   multiply hace desaparecer ese blanco sin tener que recortarlos. */
.cg-orgs__row li img.is-multiply { mix-blend-mode: multiply; }

.cg-orgs__row li.is-empty { border: 1px dashed var(--ink-16); background: var(--ink-04); }

/* — Sección 8: sobre —
   Única sección que sale de la caja. La foto llega al borde del viewport y el
   texto se alinea con la retícula, así que la página tiene un quiebre de ritmo
   en vez de nueve bloques centrados iguales. */
.cg-section--about {
  /* Plana se leía como un bloque sin terminar; el resto de las secciones
     oscuras tienen su acento radial. */
  background:
    var(--grain),
    radial-gradient(75% 85% at 88% 15%, rgba(0,152,220,.16) 0%, transparent 60%),
    var(--deep-850);
}

/* Columna angosta para la etiqueta y ancha para el contenido; el par de fotos
   cruza las dos. La asimetría es lo que saca a la sección del bloque
   simétrico de "foto a un lado, texto al otro". */
.cg-about {
  display: grid;
  grid-template-columns: minmax(0, .28fr) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 5vw, 4.5rem);
  row-gap: clamp(2.75rem, 7vw, 5rem);
  align-items: start;
}

/* Es el título real de la sección, pero puesto en el cuerpo de una etiqueta:
   quien manda visualmente es la declaración, no el rótulo. */
.cg-about__label {
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tone-2);
  max-width: 16ch;
  padding-top: .5rem;
}

.cg-about__lead { display: flex; flex-direction: column; align-items: flex-start; }

/* La declaración es el elemento de diseño de la sección, no un párrafo más:
   por eso va en el peso de titular y a un cuerpo intermedio entre el h2 y el
   texto corrido. */
.cg-about__statement {
  font-size: clamp(1.45rem, 3vw, 2.35rem);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.018em;
  color: var(--ink);
  /* Medida ancha a propósito: la declaración tiene que resolverse en tres o
     cuatro líneas. Topeada corta caía en cinco y dejaba de leerse como un
     bloque para parecer una lista. */
  max-width: 32ch;
}
.cg-section--about .cg-about__note {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-size: clamp(1rem, 1.35vw, 1.08rem);
  line-height: 1.65;
  color: var(--ink-60);
  max-width: 52ch;
}
.cg-about__lead .cg-btn { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }

/* Par de fotos a todo el ancho. Anchos distintos a propósito: dos columnas
   iguales se leen como una grilla de galería, no como una composición. */
.cg-about__media {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(.5rem, 1.2vw, .9rem);
}
.cg-about__media figure { margin: 0; overflow: hidden; border-radius: var(--r); }
.cg-about__media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1.02;
  object-fit: cover;
  /* Desaturadas como la banda de la 1.ª edición, para que las fotos de la
     página se lean como un mismo conjunto y no como stock suelto. */
  filter: saturate(.55) contrast(1.05) brightness(.86);
  transition: filter .5s var(--ease), transform .8s var(--ease);
}
.cg-about__media figure:hover img { filter: saturate(.9) contrast(1) brightness(1); transform: scale(1.03); }

@media (max-width: 720px) {
  .cg-about { grid-template-columns: 1fr; row-gap: clamp(2rem, 7vw, 2.75rem); }
  .cg-about__label { max-width: none; padding-top: 0; }
  .cg-about__media { grid-template-columns: 1fr; }
  .cg-about__media img { aspect-ratio: 4 / 3; }
}
/* — Preguntas frecuentes —
   Usa <details>/<summary> nativo: accesible y operable por teclado sin JS. */
.cg-faq__list { display: flex; flex-direction: column; gap: .6rem; }

.cg-qa {
  border: 1px solid var(--ink-16);
  border-radius: var(--r);
  overflow: hidden;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.cg-qa[open] { background: var(--surface-2); border-color: transparent; }

.cg-qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1rem, 2vw, 1.4rem) clamp(1.1rem, 2.4vw, 1.7rem);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: 800;
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
}
.cg-qa summary::-webkit-details-marker { display: none; }

/* El signo se dibuja con dos barras y la vertical se colapsa al abrir. */
.cg-qa summary::after {
  content: "";
  width: 14px; height: 14px;
  flex-shrink: 0;
  background:
    linear-gradient(var(--ink-60) 0 0) center/100% 1.5px no-repeat,
    linear-gradient(var(--ink-60) 0 0) center/1.5px 100% no-repeat;
  transition: transform .3s var(--ease);
}
/* Se colapsa la barra vertical para pasar de "+" a "−". El giro es de 180°,
   no de 90°: con 90° la horizontal que queda vuelve a verse vertical. */
.cg-qa[open] summary::after { transform: rotate(180deg); background-size: 100% 1.5px, 0 100%; }

.cg-qa__body { padding: 0 clamp(1.1rem, 2.4vw, 1.7rem) clamp(1.1rem, 2.2vw, 1.5rem); }
.cg-section--faq .cg-qa__body p { max-width: 62ch; color: var(--ink-60); }

/* ==========================================================================
   CTA final
   ========================================================================== */

.cg-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(5rem, 12vw, 9rem) clamp(5.5rem, 12vw, 9.5rem);
  text-align: center;
  background:
    var(--grain),
    radial-gradient(90% 120% at 50% 115%, var(--deep-700) 0%, transparent 62%),
    linear-gradient(180deg, var(--deep-900) 0%, var(--deep-850) 60%, var(--deep-800) 100%);
}
.cg-cta__field { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.cg-cta__inner { position: relative; z-index: 1; }

/* Panel del cierre. Va traslúcido y no opaco: los anillos siguen leyéndose por
   detrás, así que el bloque gana peso sin tapar el gesto del key visual. */
.cg-cta__panel {
  position: relative;
  /* Sin max-width propio: el panel llena el contenedor de página, así sus
     cantos caen sobre la misma columna que los titulares de las demás
     secciones en vez de flotar como una caja de ancho arbitrario. */
  padding: clamp(2.75rem, 6vw, 4.25rem) clamp(1.5rem, 4vw, 2.75rem) clamp(2.5rem, 5vw, 3.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--ink-16);
  background: rgba(14, 28, 56, .52);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  overflow: hidden;
}
/* El espectro remata el canto superior: reusa el mismo recurso que separa las
   secciones, así el panel queda atado al sistema y no parece una caja suelta. */
.cg-cta__panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--spectrum);
}

@media (prefers-reduced-transparency: reduce) {
  .cg-cta__panel { background: var(--deep-950); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.cg-cta__title {
  /* Topeado por debajo del hero: el corte con <br> tiene que entrar en el
     ancho del panel, ya descontado su padding. */
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.025em;
  text-transform: uppercase;
}
.cg-cta__sub { max-width: 46ch; font-size: clamp(1rem, 1.7vw, 1.15rem); line-height: 1.55; color: var(--ink-80); }
.cg-cta .cg-btn { margin-top: .6rem; }
/* La bajada explica qué es el Pacto Global; esta línea es la que pide la
   acción. Va en negrita y a tinta plena —como en el documento— para que no se
   pierda entre la bajada y el botón. */
.cg-cta__ask {
  max-width: 46ch;
  margin-top: clamp(.85rem, 2vw, 1.15rem);
  font-size: clamp(1rem, 1.7vw, 1.12rem);
  font-weight: 800;
  line-height: 1.45;
  color: var(--ink);
}

.cg-cta__meta { margin-top: .5rem; font-size: .85rem; letter-spacing: .04em; color: var(--ink-60); }

/* ==========================================================================
   Pie
   Cierra la página sobre el tono más oscuro de la escala, para que el CTA
   quede como último bloque luminoso y el pie se lea como zócalo.
   ========================================================================== */

.cg-footer {
  background: var(--grain), var(--deep-950);
  padding-block: clamp(3rem, 7vw, 5rem) 0;
  color: var(--ink-80);
}
.cg-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.cg-footer__brand img { width: clamp(72px, 7vw, 92px); height: auto; }
.cg-footer__org {
  margin-top: 1.1rem;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--ink-60);
  max-width: 26ch;
}
.cg-footer__label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tone-2);
  margin-bottom: 1.1rem;
}
.cg-footer__col ul { display: flex; flex-direction: column; gap: .55rem; }
.cg-footer__col :where(p) {
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ink-60);
}
.cg-footer__col p + p { margin-top: .8rem; }
.cg-footer__col a {
  font-size: .92rem;
  color: var(--ink-80);
  transition: color .18s var(--ease);
}
.cg-footer__col a:hover { color: var(--ink); }
.cg-footer__link { border-bottom: 1px solid var(--ink-16); padding-bottom: 1px; }

.cg-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem clamp(1.5rem, 4vw, 3rem);
  padding-block: 1.4rem clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--ink-08);
}
.cg-footer__legal p {
  font-size: .76rem;
  line-height: 1.5;
  color: var(--ink-40);
}
.cg-footer__legal p:last-child { max-width: 58ch; }

@media (max-width: 860px) {
  .cg-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cg-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .cg-footer__inner { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Marcadores de contenido pendiente (sólo desarrollo)
   Se apagan agregando la clase .cg--prod al contenedor .cg
   ========================================================================== */

.cg [data-pending] { position: relative; }
.cg [data-pending]::after {
  content: "Pendiente: " attr(data-pending);
  position: absolute;
  top: -.5rem; left: 0;
  transform: translateY(-100%);
  z-index: 20;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.3;
  text-align: left;
  text-transform: none;
  padding: .3rem .55rem;
  border-radius: 2px;
  background: var(--gold);
  color: #2B2409;
  max-width: 34ch;
  pointer-events: none;
}
.cg--prod [data-pending]::after { content: none; }

/* Secciones apagadas por devolución del cliente: llevan [hidden] en el HTML.
   El refuerzo evita que cualquier display de una regla más específica
   (grid/flex de la propia sección) vuelva a mostrarlas. */
.cg [hidden] { display: none !important; }

/* ==========================================================================
   Animación
   ========================================================================== */

/* Variantes de entrada. El valor lo asigna js/main.js según el tipo de
   contenido: cuando todo entra con el mismo fade+desplazamiento, la página
   entera se lee como una plantilla animada. */
.cg [data-reveal] {
  opacity: 0;
  transition: opacity .7s var(--ease), transform .7s var(--ease),
              clip-path .9s var(--ease);
}
.cg [data-reveal].is-in { opacity: 1; transform: none; }

/* Cuerpo de texto y bloques utilitarios: desplazamiento corto. */
.cg [data-reveal="up"] { transform: translateY(18px); }

/* Titulares: recorrido más largo y arranque desde más abajo, para que el
   bloque tipográfico "asiente" en vez de aparecer. */
.cg [data-reveal="rise"] { transform: translateY(34px); }

/* Fotos: se descubren de abajo hacia arriba en vez de fundirse. El fundido
   sobre una imagen se lee como carga lenta; el barrido, como intención. */
.cg [data-reveal="mask"] {
  opacity: 1;
  clip-path: inset(0 0 100% 0);
}
.cg [data-reveal="mask"].is-in { clip-path: inset(0 0 0 0); }

/* Las reglas de color se trazan solas: es el mismo gesto en temas y cifras. */
.cg-tema[data-reveal] .cg-tema__bar,
.cg-figure[data-reveal] .cg-figure__bar { transform: scaleX(0); }
.cg-tema[data-reveal].is-in .cg-tema__bar,
.cg-figure[data-reveal].is-in .cg-figure__bar { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .cg *, .cg *::before, .cg *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .cg [data-reveal] { opacity: 1; transform: none; clip-path: none; }
  .cg-tema[data-reveal] .cg-tema__bar,
  .cg-figure[data-reveal] .cg-figure__bar { transform: scaleX(1); }
  .cg-ring { opacity: 1; }
}