/* =========================================================================
   LaCardio · Unamos nuestros latidos por Colombia
   Landing de ayuda humanitaria tras el sismo. Prefijo propio: .lc-ay-

   Ensamblada desde la biblioteca. Reusa tal cual: lc-header +
   lc-header-fundacion (la landing vive en el sitio de la Fundación),
   breadcrumb, hero (con modificador --mapa) y lc-footer. Lo propio de esta
   landing (intro, necesidades, cómo donar y cierre) vive en este archivo.

   RETÍCULA (project_tokens): desktop 12 col · margen 120 · gutter 36 →
   contenido 1200, columna 67. Los anchos van EN COLUMNAS:
     4c=376 · 6c=582 · 7c=685 · 8c=788 · 12c=1200
   Mobile 4 col · margen 24 · gutter 18 → contenido 342, columna 72.
   ========================================================================= */

/* =========================================================================
   HERO · variante --mapa
   Mismo panel de texto del hero de especialidad, pero en vez de foto a
   sangre lleva el mapa de Colombia (SVG vectorial extraído de la pieza del
   cliente). Sin degradé porque no hay foto que fundir.
   ========================================================================= */
.hero--mapa::before {
  display: none;
}

/* El mapa ocupa la columna derecha. En el DOM va DESPUÉS del panel, así que
   el flex lo coloca a la derecha sin necesidad de `order`. */
.hero--mapa .hero__media {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  align-self: stretch;
  padding: var(--lc-space-4xl) var(--page-pad-x) var(--lc-space-4xl) 0;
}

.lc-ay-mapa {
  display: block;
  width: 100%;
  /* 4c = 376px: el mapa nunca invade la columna del panel. */
  max-width: 376px;
  height: auto;
}

/* La frase de arranque ("Hoy Colombia nos necesita.") en Paragraph Bold. */
.lc-ay-hero__destacado {
  display: block;
  font-weight: var(--fw-bold);
  letter-spacing: -0.36px;
  margin-bottom: var(--lc-space-sm);
}

/* =========================================================================
   INTRO · el llamado a las empresas. Bloque de texto centrado a 8c.
   ========================================================================= */
.lc-ay-intro {
  background: linear-gradient(to bottom, var(--color-blue-50) 0%, var(--surface) 100%);
  padding: var(--lc-space-4xl) var(--page-pad-x);
}

.lc-ay-intro__inner {
  /* 12c = 1200px: el llamado ocupa el ancho completo de la retícula. */
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--lc-space-md);
  align-items: center;
}

.lc-ay-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: 14px;
  letter-spacing: 3.64px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.lc-ay-eyebrow--on-dark {
  color: var(--color-blue-100);
}

/* Es un H4 del DS, no un párrafo: el llamado es el enunciado de la página.
   Canon 2026-07-17: títulos y subtítulos siempre en --text-primary. */
.lc-ay-intro__text {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-medium);
  line-height: var(--lc-lh-h4);
  letter-spacing: -0.32px;
  color: var(--text-primary);
}

.lc-ay-intro__text strong {
  font-weight: var(--fw-bold);
  color: var(--brand-primary);
}

/* =========================================================================
   NECESIDADES · las tres categorías de donación de la pieza del cliente.
   Fila 1: Refugio (4c) + Insumos (8c) = 376 + 36 + 788 = 1200.
   Fila 2: Medicamentos a 12c.
   ========================================================================= */
.lc-ay-necesidades {
  background: linear-gradient(to bottom, var(--surface) 0%, var(--color-blue-50) 100%);
  padding: var(--lc-space-4xl) var(--page-pad-x);
}

.lc-ay-necesidades__head {
  /* 12c = 1200px: el título ocupa el ancho completo de la retícula y solo
     respeta el margen lateral de 120 que da --page-pad-x. */
  max-width: 1200px;
  margin: 0 auto var(--lc-space-2xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--lc-space-md);
  align-items: center;
}

.lc-ay-titulo {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: 52px;
  letter-spacing: -0.4px;
  /* Canon 2026-07-17: títulos y subtítulos siempre en text-primary. */
  color: var(--text-primary);
}

.lc-ay-titulo--on-dark {
  color: var(--color-white);
}

.lc-ay-grid {
  display: grid;
  grid-template-columns: 376px 788px;
  gap: 36px;
  justify-content: center;
  /* Las dos cards de la primera fila igualan altura (stretch por defecto):
     Refugio queda del alto de Insumos aunque tenga menos chips. */
}

.lc-ay-card--ancha {
  grid-column: 1 / -1;
}

.lc-ay-card {
  /* Blancas, no --surface-soft: ese token ES blue-50, el mismo color con el
     que arranca el degradado de la sección, y las cards se perdían contra el
     fondo. El azul se traslada a los chips. */
  background: var(--surface);
  border-radius: var(--radius-xl);
  padding: var(--lc-space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--lc-space-md);
  /* Sombra de tarjetas info del DS (--shadow-info). Es la
     misma elevación de las cards de los pasos, para que la página tenga UNA
     sola altura de tarjeta. */
  box-shadow: var(--shadow-info);
}

.lc-ay-card__icono {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: var(--lc-radius-full);
  background: var(--color-blue-50);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lc-ay-card__icono svg {
  width: 28px;
  height: 28px;
}

.lc-ay-card__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  font-weight: var(--fw-medium);
  line-height: 32px;
  letter-spacing: -0.24px;
  color: var(--brand-primary);
}

/* Lista de elementos como chips: escanear > leer. Es una lista de compra. */
.lc-ay-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lc-space-sm);
}

.lc-ay-chip {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 20px;
  letter-spacing: 0.21px;
  color: var(--text-primary);
  background: var(--color-blue-50);
  border-radius: var(--lc-radius-full);
  padding: 6px var(--lc-space-md);
}

.lc-ay-nota {
  margin-top: var(--lc-space-xl);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 24px;
  letter-spacing: 0.27px;
  color: var(--text-secondary);
}

/* =========================================================================
   CÓMO DONAR · tarjeta del punto de recolección (12c) + tres pasos (4c c/u).
   No hay formulario ni contacto previo: la donación se lleva directamente al
   Torreón Docente. ⚠️ Horario y dirección exacta van con .lc-ay-pend hasta
   que el cliente los confirme.
   ========================================================================= */
.lc-ay-pasos {
  background: var(--color-blue-50);
  padding: var(--lc-space-4xl) var(--page-pad-x);
}

.lc-ay-pasos__head {
  /* 12c = 1200px, igual que el de necesidades. */
  max-width: 1200px;
  margin: 0 auto var(--lc-space-2xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--lc-space-md);
  align-items: center;
}

.lc-ay-pasos__grid {
  display: grid;
  grid-template-columns: repeat(3, 376px);
  gap: 36px;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
}

/* Sin tarjeta: los pasos son tres columnas de texto sobre el fondo de la
   sección, separadas por un filete. */
.lc-ay-paso {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--lc-space-sm);
}

/* El filete va en el CENTRO del canal (gutter 36 → -18px), no pegado al borde
   de la columna: si fuera un border-right normal quedaría rozando el texto de
   su propia columna y a 36px del texto de la siguiente. */
.lc-ay-paso:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -18px;
  width: 1px;
  background: var(--color-blue-100);
}

.lc-ay-paso__num {
  width: 40px;
  height: 40px;
  border-radius: var(--lc-radius-full);
  background: var(--brand-primary);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: var(--fs-h6);
  line-height: 40px;
  text-align: center;
  margin-bottom: var(--lc-space-sm);
}

.lc-ay-paso__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-h6);
  font-weight: var(--fw-medium);
  line-height: 28px;
  color: var(--text-primary);
}

.lc-ay-paso__texto {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 24px;
  letter-spacing: 0.27px;
  color: var(--text-secondary);
}

.lc-ay-pasos__lead {
  /* El título va a 12c pero el párrafo se queda en 8c: una línea de 1200px
     es imposible de leer. */
  max-width: 788px;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 26px;
  letter-spacing: 0.27px;
  color: var(--text-secondary);
}

/* Punto de recolección · 12c, encima de los pasos.
   Es el dato más importante de la página (dónde se entrega), así que va en
   una tarjeta azul de marca y no como un renglón más de una lista. */
.lc-ay-punto {
  max-width: 1200px;
  margin: 0 auto var(--lc-space-xl);
  background: var(--brand-primary);
  color: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--lc-space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}

.lc-ay-punto__main {
  display: flex;
  /* El icono se alinea al TOPE del bloque de texto (a la altura del eyebrow),
     no al centro: con la dirección y los botones el centro lo dejaba flotando
     a media tarjeta. */
  align-items: flex-start;
  gap: var(--lc-space-lg);
}

.lc-ay-punto__icono {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: var(--lc-radius-full);
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lc-ay-punto__icono svg {
  width: 28px;
  height: 28px;
}

.lc-ay-punto__label {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: 14px;
  letter-spacing: 3.64px;
  text-transform: uppercase;
  color: var(--color-blue-100);
  margin-bottom: var(--lc-space-sm);
}

.lc-ay-punto__nombre {
  font-family: var(--font-display);
  font-size: var(--fs-h5);
  font-weight: var(--fw-medium);
  line-height: 32px;
  letter-spacing: -0.24px;
  color: var(--color-white);
}

.lc-ay-punto__dir {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 24px;
  letter-spacing: 0.27px;
  color: var(--color-blue-50);
  margin-top: var(--lc-space-xs);
}

/* Botones "cómo llegar". Reusan el átomo .lc-btn--ghost-white del base, con
   una reducción de tamaño local: son acciones de apoyo dentro de una tarjeta,
   no el CTA principal de la página. */
.lc-ay-punto__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lc-space-md);
  margin-top: var(--lc-space-lg);
}

.lc-ay-punto__acciones .lc-btn {
  gap: var(--lc-space-sm);
  font-size: var(--fs-sm);
  line-height: 20px;
  letter-spacing: 0;
  padding: 10px 18px;
}

.lc-ay-punto__acciones .lc-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Columna derecha: horario + teléfono. */
.lc-ay-punto__datos {
  flex-shrink: 0;
  padding-left: 36px;
  border-left: 1px solid rgba(255, 255, 255, 0.24);
  display: flex;
  flex-direction: column;
  gap: var(--lc-space-lg);
}

.lc-ay-punto__datos .lc-ay-dato__label {
  display: flex;
  align-items: center;
  gap: var(--lc-space-sm);
  color: var(--color-blue-100);
}

.lc-ay-punto__valor {
  font-family: var(--font-body);
  font-size: var(--fs-h6);
  font-weight: var(--fw-bold);
  line-height: 28px;
  color: var(--color-white);
}

.lc-ay-punto__valor a:hover {
  text-decoration: underline;
}

.lc-ay-dato__label {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 20px;
  color: var(--text-primary);
  margin-bottom: var(--lc-space-xs);
}

/* ⚠️ Marca visual de dato PENDIENTE. Nunca debe publicarse con esta marca
   visible: si queda alguna en pantalla, es que falta un dato del cliente.
   HOY NO ESTÁ EN USO (se retiró la del teléfono el 2026-08-12); se conserva
   como convención de la landing para el próximo dato que falte. */
/* Sobre la tarjeta navy del punto de recolección el rojo sobre azul no
   contrasta: se invierte a rojo sólido con texto blanco, conservando el
   punteado para que siga leyéndose como "pendiente". */
.lc-ay-punto .lc-ay-pend {
  background: var(--brand-accent);
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--color-white);
}

.lc-ay-pend {
  display: inline-block;
  margin: 2px 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 20px;
  letter-spacing: 0.21px;
  color: var(--brand-accent);
  border: 1px dashed var(--brand-accent);
  border-radius: var(--lc-radius-sm);
  padding: 2px var(--lc-space-sm);
}

/* =========================================================================
   CIERRE · banda roja con la frase de cierre de la pieza + corazón.
   ========================================================================= */
.lc-ay-cierre {
  background: var(--brand-accent);
  padding: var(--lc-space-4xl) var(--page-pad-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lc-space-xl);
  text-align: center;
}

.lc-ay-cierre__frase {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-medium);
  line-height: 44px;
  letter-spacing: -0.36px;
  color: var(--color-white);
  /* 7c = 685px */
  max-width: 685px;
}

.lc-ay-cierre__corazon {
  width: 72px;
  height: auto;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1199px) {
  .lc-ay-intro,
  .lc-ay-necesidades,
  .lc-ay-pasos,
  .lc-ay-cierre {
    padding-left: 60px;
    padding-right: 60px;
  }

  .lc-ay-grid,
  .lc-ay-pasos__grid {
    grid-template-columns: 1fr 1fr;
  }

  .lc-ay-paso:nth-child(2)::after {
    display: none;
  }

  .lc-ay-grid .lc-ay-card--ancha,
  .lc-ay-pasos__grid .lc-ay-paso:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 991px) {
  /* Mobile: margen lateral 24 (retícula de 4 col). */
  .lc-ay-intro,
  .lc-ay-necesidades,
  .lc-ay-pasos,
  .lc-ay-cierre {
    padding-left: 24px;
    padding-right: 24px;
    padding-top: var(--lc-space-2xl);
    padding-bottom: var(--lc-space-2xl);
  }

  /* Escala mobile de títulos — UNA sola regla por landing mientras el
     canónico no traiga escala mobile (ver project_ds_hallazgos #6):
     Fira Sans Medium 32/40, ls -1% (-0.32px). */
  .lc-ay-titulo,
  .lc-ay-cierre__frase {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.32px;
  }

  /* El llamado baja de H4 (32/41) a H5 (24/32): a 342px el H4 ocupa media
     pantalla. Hardcodeado porque el canónico no trae escala mobile
     (ver project_ds_hallazgos #6). */
  .lc-ay-intro__text {
    font-size: var(--fs-h5);
    line-height: 32px;
  }

  .lc-ay-grid,
  .lc-ay-pasos__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  /* Apilados: no hay canal donde vivir, el filete se cambia por separación. */
  .lc-ay-paso::after {
    display: none;
  }

  .lc-ay-pasos__grid {
    gap: var(--lc-space-lg);
  }

  /* La tarjeta del punto de recolección se apila: dirección arriba, horario
     abajo, con un filete en vez del borde lateral. */
  .lc-ay-punto {
    flex-direction: column;
    align-items: stretch;
    gap: var(--lc-space-lg);
    padding: var(--lc-space-lg);
  }

  /* El icono pasa arriba: en 342px no queda ancho para icono + nombre largo. */
  .lc-ay-punto__main {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--lc-space-md);
  }

  .lc-ay-punto__datos {
    padding-left: 0;
    padding-top: var(--lc-space-lg);
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.24);
  }

  .lc-ay-punto__acciones .lc-btn {
    width: 100%;
  }

  /* El mapa se apila ARRIBA del panel, como la foto en el hero estándar.
     En el DOM va después del panel (para quedar a la derecha en desktop),
     así que en mobile se reordena con `order`. */
  .hero--mapa .hero__media {
    order: -1;
    align-self: auto;
    /* padding-top deja aire bajo el breadcrumb flotante */
    padding: 48px 24px 0;
  }

  /* Los degradés de fundido del hero estándar existen para fundir una FOTO
     con el panel azul. Aquí no hay foto: el mapa vive sobre el mismo navy. */
  .hero--mapa .hero__media::before,
  .hero--mapa .hero__media::after {
    display: none;
  }

  .lc-ay-mapa {
    max-width: 220px;
    margin: 0 auto;
  }
}