.impacto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--space-6); margin-top: var(--space-5); }
.impacto-card { display: flex; flex-direction: column; gap: var(--space-2); }
.progreso-barra { width: 100%; height: 3px; border-radius: var(--radius-full); background: rgba(255, 255, 255, .09); overflow: hidden; }
.progreso-barra-relleno { height: 100%; background: var(--rule-gold); }

/* ============================================================
   Campaña activa — sin tarjeta: la cifra recaudada es el elemento gráfico y la barra
   dorada cierra el bloque. Antes iban en `.card`, y una caja con borde alrededor de
   cada colecta las volvía un formulario, no una causa.
   ============================================================ */
.impacto-campana { display: flex; flex-direction: column; gap: var(--space-3); }
.impacto-campana h3 { font-family: var(--font-display); font-size: var(--text-xl); }
.impacto-campana > p { color: var(--color-text-muted); margin: 0; max-width: 46ch; }
.impacto-cifras {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: auto;   /* pega las cifras abajo: columnas de texto desigual se alinean */
}
.impacto-cifras strong {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--color-gold);
  line-height: 1;
}
.impacto-cifras span { color: var(--color-text-muted); font-size: var(--text-sm); }
.impacto-cifras em {
  margin-left: auto;
  font-style: normal;
  font-size: var(--text-sm);
  letter-spacing: .08em;
  color: var(--color-text-muted);
}

/* Historial — línea de tiempo sobria: la fecha manda, sin caja */
.impacto-hecho {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: var(--space-4);
  border-left: 1px solid rgba(201, 168, 76, .3);
}
.impacto-hecho-fecha {
  font-size: var(--text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.impacto-hecho h3 { font-family: var(--font-display); font-size: var(--text-lg); }
.impacto-hecho p { color: var(--color-text-muted); margin: 0; max-width: 46ch; }

/* ============================================================
   Las tres causas — sin tarjetas ni bordes: columnas separadas por una hairline
   dorada, el mismo recurso que el resto del sitio usa para dividir sin cajas.
   ============================================================ */
.causas-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-5);
}
.causa {
  position: relative;
  padding-left: var(--space-6);
}
.causa + .causa::before {
  content: '';
  position: absolute;
  inset: 6% auto 6% calc(var(--space-6) * -.5);
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(201, 168, 76, .38) 22%, rgba(201, 168, 76, .38) 78%, transparent);
}
.causa-icono {
  display: block;
  color: var(--color-gold);
  margin-bottom: var(--space-3);
}
.causa-icono svg { width: 34px; height: 34px; }
.causa h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}
.causa p { color: var(--color-text-muted); margin: 0; }

@media (max-width: 820px) {
  .causas-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .causa { padding-left: 0; padding-top: var(--space-5); }
  /* En una sola columna la hairline pasa a ser horizontal, arriba de cada bloque. */
  .causa + .causa::before {
    inset: calc(var(--space-5) * -.5) 10% auto 10%;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 168, 76, .38) 22%, rgba(201, 168, 76, .38) 78%, transparent);
  }
}

/* ============================================================
   "Why we do it": el texto que explica por qué el estudio hace esto (lo mandó la dueña).
   Escaneable a propósito: la entrada es corta (tres líneas), una frase grande corta el
   bloque y los tres temas van en columnas, cada una rematada en dorado, con la misma
   hairline que usa "What we support". Sin columnas fijas: la entrada era más alta que la
   pantalla (705 px contra 800) y al hacer scroll quedaba pisada.
   ============================================================ */
.impacto-porque-cabecera { max-width: 48ch; }
.impacto-porque-cabecera .labor-lead { margin-top: var(--space-3); }
/* La frase grande y su remate, lado a lado: así el texto de arriba no se apila. */
.impacto-porque-cita {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: var(--space-6);
  align-items: end;
  margin: var(--space-6) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-soft);
}
.impacto-porque-cita-texto {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, .95rem + 1.5vw, 1.9rem);
  line-height: 1.22;
  letter-spacing: -.015em;
  text-wrap: balance;
  max-width: 30ch;
}
.impacto-porque-cita-nota { color: var(--color-text-muted); max-width: 46ch; }
.impacto-porque-bloques {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-7);
}
.impacto-porque-bloque { position: relative; padding-left: var(--space-6); }
/* Cada tema lleva su número y su icono en dorado: es lo que guía el ojo al escanear. */
.impacto-porque-ficha {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  color: var(--color-gold);
}
.impacto-porque-numero {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1;
  opacity: .85;
}
.impacto-porque-icono svg { width: 26px; height: 26px; }
.impacto-porque-bloque + .impacto-porque-bloque::before {
  content: '';
  position: absolute;
  inset: 2% auto 2% 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(201, 168, 76, .38) 18%, rgba(201, 168, 76, .38) 82%, transparent);
}
.impacto-porque-bloque h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}
.impacto-porque-bloque p { color: var(--color-text-muted); margin: 0; }
.impacto-porque-bloque p + p { margin-top: var(--space-3); }
/* El remate de cada tema, en dorado: es la línea que se lee al escanear la columna. */
.impacto-porque-bloque .impacto-porque-remate {
  color: var(--color-gold);
  font-family: var(--font-display);
  line-height: 1.35;
}
.impacto-porque-bloque .btn-primary { margin-top: var(--space-4); }

.impacto-porque-firma {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-soft);
}

@media (max-width: 900px) {
  .impacto-porque-cita { grid-template-columns: 1fr; align-items: start; }
  .impacto-porque-bloques { grid-template-columns: 1fr; gap: var(--space-5); }
  /* En una sola columna la hairline pasa a ser horizontal, arriba de cada bloque. */
  .impacto-porque-bloque { padding-left: 0; padding-top: var(--space-5); }
  .impacto-porque-bloque + .impacto-porque-bloque::before {
    inset: calc(var(--space-5) * -.5) 10% auto 10%;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 168, 76, .38) 22%, rgba(201, 168, 76, .38) 78%, transparent);
  }
  .impacto-porque-cita-texto { max-width: none; }
}

/* ============================================================
   Labores sociales publicadas desde el panel.
   Cuatro plantillas —servicio (antes/después), destacada (mosaico), banda (foto a
   sangre) e historial (solo la ficha de la lista)— sobre los mismos datos: título,
   bajada, párrafos, fotos, frase destacada y cierre. Antes cada campaña era HTML
   escrito a mano, así que agregar una nueva dependía de nosotros.
   ============================================================ */
.labor-cabecera { max-width: 62ch; }
.labor-lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 46ch;
  margin: var(--space-3) 0 0;
  text-wrap: pretty;
}
.labor-texto { display: grid; gap: var(--space-4); max-width: 62ch; }
.labor-texto p { color: var(--color-text-muted); margin: 0; }

/* ---------- Diseño: servicio permanente (antes y después) ---------- */
.labor--servicio { position: relative; }
.labor--servicio::before {
  content: '';
  position: absolute;
  inset: -4% -14% auto -14%;
  height: 62%;
  background: radial-gradient(52% 58% at 20% 26%, rgba(201, 168, 76, .10), transparent 72%);
  pointer-events: none;
}
/* El halo vive detrás del contenido, no encima: sin esto taparía el texto. */
.labor--servicio > * { position: relative; }
/* Cabecera y texto en dos columnas: en una sola quedaba media pantalla vacía a la
   derecha del titular y el párrafo se estiraba fuera del largo cómodo de lectura. */
.labor-encabezado {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-6);
  align-items: start;
}
.labor-encabezado .labor-texto { padding-top: var(--space-2); }

/* La promesa del servicio: lo más luminoso de la sección. Hairlines doradas
   degradadas arriba y abajo (el recurso del sitio para separar sin cajas). */
.labor-promesa {
  position: relative;
  margin: var(--space-7) 0;
  padding: var(--space-6) var(--space-4);
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-gold-bright);
  text-shadow: 0 0 36px rgba(232, 201, 109, .3);
  text-wrap: balance;
}
.labor-promesa::before,
.labor-promesa::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 560px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 76, .8), transparent);
}
.labor-promesa::before { top: 0; }
.labor-promesa::after { bottom: 0; }

/* Pares antes/después: se arman de dos en dos, en el orden en que se subieron. */
.labor-pares { display: grid; gap: var(--space-6); margin-top: var(--space-6); }
.labor-caso { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }

/* ---------- Fotos ---------- */
.labor-foto {
  position: relative;
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}
/* 32% y no el centro: son fotos de personas y recortadas por el centro se les come la
   cara. Los pares antes/después sí van centrados, que es donde está el trabajo. */
.labor-foto img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 32%;
}
.labor-foto--antes img,
.labor-foto--despues img { object-position: center 44%; }

/* La etiqueta va sobre la piel, que puede ser muy clara: el degradado de abajo es lo
   que garantiza que se lea, no un adorno. */
.labor-foto--antes::after,
.labor-foto--despues::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 34%;
  background: linear-gradient(180deg, transparent, rgba(5, 5, 5, .78));
  pointer-events: none;
}
.labor-foto--antes figcaption,
.labor-foto--despues figcaption {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  z-index: 1;
  font-size: var(--text-xs);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}
.labor-foto--despues figcaption { color: var(--color-gold-bright); }

/* Rejillas según cuántas fotos haya. Con cinco o seis manda el mosaico (una grande que
   cruza dos renglones y el resto alrededor); con siete o más, rejilla pareja. */
.labor-mosaico { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.labor-mosaico--1 { grid-template-columns: 1fr; }
.labor-mosaico--1 .labor-foto img { aspect-ratio: 16 / 9; }
.labor-mosaico--2 { grid-template-columns: repeat(2, 1fr); }
.labor-mosaico--3 { grid-template-columns: repeat(3, 1fr); }
.labor-mosaico--4 { grid-template-columns: repeat(2, 1fr); }
.labor-mosaico--7 { grid-template-columns: repeat(3, 1fr); }
.labor-mosaico--bento { grid-template-columns: repeat(6, 1fr); }
.labor-mosaico--bento .labor-foto--grande { grid-column: span 4; grid-row: span 2; }
.labor-mosaico--bento .labor-foto--chica { grid-column: span 2; }
/* Con cinco fotos el último renglón lleva dos: se reparten el ancho en vez de dejar un
   hueco al final. */
.labor-mosaico--bento.labor-mosaico--5 .labor-foto:nth-child(n+4) { grid-column: span 3; }

/* ---------- Cuerpo, destacado y cierre ---------- */
.labor-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-6);
}
.labor-cuerpo--solo { grid-template-columns: minmax(0, 1fr); }
.labor-destacado {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.25;
  color: var(--color-gold-bright);
  border-left: 1px solid rgba(201, 168, 76, .45);
  padding-left: var(--space-5);
  margin: 0;
  text-wrap: balance;
}

.labor-cierre {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-left: var(--space-5);
  border-left: 2px solid rgba(201, 168, 76, .5);
  max-width: 74ch;
}
.labor-cierre p { color: var(--color-text-muted); margin: 0; }
.labor-cierre-titulo {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.25;
  color: var(--color-text);
  max-width: 34ch;
  text-wrap: balance;
}
.labor-firma {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--color-gold-bright);
  margin-top: var(--space-2);
  max-width: 46ch;
}
.labor-icono { display: inline-block; vertical-align: -2px; margin-left: 4px; color: var(--color-gold); }
.labor-icono svg { width: 18px; height: 18px; }

/* ---------- Contacto ---------- */
.labor-cta {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  margin-top: var(--space-7);
}
.labor-cta p { color: var(--color-text-muted); max-width: 54ch; margin: 0; }
/* El bloque que pide una acción sí lleva panel (tinte dorado suave, sin sombra) para
   que no se confunda con el texto que lo acompaña. */
.labor-cta--panel {
  gap: var(--space-3);
  margin-top: 0;
  padding: var(--space-5);
  border: 1px solid rgba(201, 168, 76, .28);
  border-radius: var(--radius-lg);
  background: rgba(201, 168, 76, .05);
}
.labor-cta--panel p { font-size: var(--text-sm); }
/* El texto y su acompañante comparten renglón: el que va solo arriba del otro no debe
   repetir el margen de la sección. */
.labor-cuerpo .labor-cta--panel { margin-top: 0; }

/* ---------- Diseño: banda (foto a sangre) ---------- */
.labor-banda { min-height: 520px; }
.labor-titulo {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: var(--space-3) 0 var(--space-3);
  text-wrap: balance;
}
/* El número manda: mismo Playfair, un escalón y medio más grande y en dorado. Se
   detecta solo en el título, así que una campaña futura sale igual. */
.labor-numero {
  font-size: 1.55em;
  line-height: .8;
  color: var(--color-gold-bright);
  margin-right: .06em;
}
.labor-banda .labor-lead { margin-inline: auto; }

/* ============================================================
   Índice de la página. En pantalla ancha va fijo al lateral derecho (zona libre que
   deja el contenedor de 1180 px); por debajo de 1400 px no hay ese hueco, así que se
   vuelve una barra pegajosa arriba con las secciones en fila.
   ============================================================ */
[data-indice] { scroll-margin-top: 96px; }

.impacto-indice {
  position: fixed;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  z-index: 40;
  width: 96px;
  /* La lista crece con cada labor nueva: en una pantalla baja se desplaza en lugar de
     saltarse el borde de arriba o de abajo. */
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
  font-size: var(--text-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: right;
}
.impacto-indice::-webkit-scrollbar { display: none; }
.impacto-indice-titulo { color: var(--color-text-muted); letter-spacing: .18em; opacity: .65; }
.impacto-indice-item {
  color: var(--color-text-muted);
  line-height: 1.35;
  transition: color var(--duration-base) var(--ease-out);
}
.impacto-indice-corto { display: none; }
.impacto-indice-item:hover { color: var(--color-text); }
.impacto-indice-item.activo { color: var(--color-gold-bright); }
.impacto-indice-punto {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: 2px;
  background: currentColor;
  opacity: .5;
  transition: opacity var(--duration-base) var(--ease-out);
}
.impacto-indice-item.activo .impacto-indice-punto,
.impacto-indice-item:hover .impacto-indice-punto { opacity: 1; }
/* Lleno = en curso, hueco = hecho. Es la única diferencia entre las dos, así que el
   punto tiene que verse: es lo que se entiende de un vistazo. */
.impacto-indice-item[data-estado='hecho'] .impacto-indice-punto,
.impacto-indice-leyenda .impacto-indice-punto.hecho {
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
  opacity: .7;
}
.impacto-indice-leyenda {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  color: var(--color-text-muted);
  font-size: .625rem;
  letter-spacing: .06em;
  opacity: .6;
}
.impacto-indice-leyenda .impacto-indice-punto { margin: 0 2px 0 0; }

@media (max-width: 1399px) {
  [data-indice] { scroll-margin-top: 118px; }
  .impacto-indice {
    position: sticky;
    top: 69px;   /* la altura del header pegajoso: si no, la barra se le monta encima */
    right: auto;
    transform: none;
    width: auto;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: var(--space-2) 12px;
    overflow-x: auto;
    background: rgba(5, 5, 5, .94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border);
    letter-spacing: .07em;
    text-align: left;
    scrollbar-width: none;
  }
  .impacto-indice::-webkit-scrollbar { display: none; }
  .impacto-indice-titulo,
  .impacto-indice-leyenda { display: none; }
  /* En la barra angosta cada entrada se acorta: con las etiquetas largas solo caben
     dos y media y las demás quedaban escondidas tras el scroll horizontal. */
  .impacto-indice-largo { display: none; }
  .impacto-indice-corto { display: inline; }
  /* Apretado a propósito: con cuatro o cinco secciones entran todas en un teléfono y
     no hay que arrastrar la barra. Si algún día son más, la barra ya scrollea sola. */
  .impacto-indice-item {
    flex: 0 0 auto;
    padding: 6px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    letter-spacing: .04em;
    white-space: nowrap;
  }
  .impacto-indice-item.activo { border-color: rgba(201, 168, 76, .55); }
}

@media (max-width: 900px) {
  .labor-encabezado { grid-template-columns: 1fr; gap: var(--space-5); }
  .labor-encabezado .labor-texto { padding-top: 0; }
  .labor-cuerpo { grid-template-columns: 1fr; gap: var(--space-5); }
  .labor-destacado { font-size: var(--text-xl); }
}

@media (max-width: 820px) {
  /* El header mide 65 px en el teléfono, no 69: sin esto queda una franja por la que
     se ve pasar el contenido entre el header y la barra. */
  .impacto-indice { top: 65px; }
  .labor-banda { min-height: 420px; }
  .labor-promesa { font-size: var(--text-2xl); padding: var(--space-5) 0; }
  /* Antes y después siguen lado a lado: la comparación es el punto de la sección. */
  .labor-caso { gap: var(--space-2); }
  .labor-foto--antes figcaption,
  .labor-foto--despues figcaption { left: var(--space-2); bottom: var(--space-2); font-size: .6875rem; letter-spacing: .1em; }
  .labor-mosaico,
  .labor-mosaico--bento { grid-template-columns: repeat(2, 1fr); }
  .labor-mosaico--1 { grid-template-columns: 1fr; }
  .labor-mosaico--bento .labor-foto--grande { grid-column: span 2; grid-row: auto; }
  .labor-mosaico--bento .labor-foto--grande img { aspect-ratio: 3 / 2; }
  .labor-mosaico--bento .labor-foto--chica,
  .labor-mosaico--bento.labor-mosaico--5 .labor-foto:nth-child(n+4) { grid-column: span 1; }
  /* Con seis fotos quedan cinco chicas: la última va sola y cierra el mosaico a todo
     lo ancho. Con cinco fotos son cuatro y no hace falta. */
  .labor-mosaico--bento.labor-mosaico--6 .labor-foto--chica:last-child { grid-column: span 2; }
  .labor-mosaico--3 .labor-foto:last-child { grid-column: span 2; }
  .labor-cierre-titulo { font-size: var(--text-xl); }
  .labor-firma { font-size: var(--text-lg); }
}
/* La tira del índice en el teléfono: cada sección es un objetivo táctil (medía 30 px). */
@media (max-width: 1399px) {
  .impacto-indice-item { min-height: 34px; }
}