/* ============================================================
   Gestión Integral de Riesgos — estilos de página.
   Sin estilos inline (CSP). Todo bajo .gr-page para no afectar
   el resto del sitio. Colores y tipografías del diseño (Figma).
   ============================================================ */

.gr-page { background: #fff; }

/* ---------- 1) HERO ---------- */
.gr-hero {
  position: relative;
  min-height: clamp(420px, 62vh, 640px);
  display: flex;
  align-items: flex-end;
  background-color: #0a2a47;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.gr-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8,28,52,0.86) 0%, rgba(8,28,52,0.62) 48%, rgba(8,28,52,0.28) 78%, rgba(8,28,52,0) 100%);
}
.gr-hero__inner { position: relative; z-index: 1; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem); }
.gr-hero__title {
  max-width: 640px;
  margin: 0;
  color: #fff;
  font-family: var(--font-display, Bitter), Georgia, serif;
  font-weight: 400;
  font-size: clamp(2rem, 1.2rem + 2.4vw, 2.95rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 22px rgba(5,18,38,0.9), 0 1px 4px rgba(5,18,38,0.7);
}
.gr-hero__title strong { font-weight: 700; display: block; color: inherit; }

/* ---------- PROPÓSITO (banda gris flotante entre Marco y Tarjetas) ---------- */
.gr-proposito__inner {
  margin-top: clamp(-72px, -5vw, -30px);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  position: relative;
  z-index: 2;
  background: #666666;
  border-radius: 15px;
  box-shadow: 0 8px 16px -4px rgba(0,0,0,0.08);
  padding: clamp(2.25rem, 4vw, 3.5rem) clamp(2rem, 6vw, 5rem);
}
.gr-proposito__text {
  margin: 0;
  color: #fff;
  text-align: center;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  line-height: 1.6;
}

/* ---------- 3) MARCO DE GESTIÓN DE RIESGOS ---------- */
.gr-marco { padding-block: clamp(3rem, 7vw, 6rem); }
.gr-marco__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.gr-marco__title {
  margin: 0 0 1.5rem;
  font-family: var(--font-display, Bitter), Georgia, serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.05rem);
  line-height: 1.05;
  color: #1a1a1a;
}
.gr-marco__title .gr-azul { color: #62bfd1; display: block; }
.gr-marco__text { margin: 0; color: #333; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); line-height: 1.65; }
.gr-marco__text strong { color: #14a0bb; font-weight: 700; }
.gr-marco__img {
  width: 100%;
  aspect-ratio: 710 / 410;
  border-radius: 15px;
  object-fit: cover;
  display: block;
}

/* ---------- 4) TARJETAS ---------- */
/* El fondo gris arranca a la MITAD del modal "Nuestro propósito", tanto en móvil
   como en desktop, sin mover el modal. El corte sigue el centro del modal, que
   se desplaza con el ancho (en móvil el modal es más alto y baja menos → centro
   ~108px; en desktop es más bajo y sube más → centro ~53px). El clamp reproduce
   ese centro; arriba del corte queda blanco (transparente) y gris debajo. */
.gr-cards {
  --gr-gris-corte: clamp(53px, 137px - 9.5vw, 108px);
  background: linear-gradient(to bottom, transparent var(--gr-gris-corte), #e7edf2 var(--gr-gris-corte));
  padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 7vw, 6rem);
}
.gr-cards__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 1.5rem);
}
.gr-card {
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 8px 8px rgba(0,0,0,0.08);
  padding: clamp(2.25rem, 3vw, 3rem) clamp(1.75rem, 3vw, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
}
.gr-card__icon { width: 88px; height: 88px; flex: none; }
.gr-card__icon img { width: 100%; height: 100%; display: block; }
.gr-card__title {
  margin: 0;
  font-family: var(--font-display, Bitter), Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.2;
  color: #1a1a1a;
}
.gr-card__text { margin: 0; color: #444; font-size: 1rem; line-height: 1.55; }

/* ---------- 5) CICLO METODOLÓGICO ---------- */
.gr-ciclo { padding-block: clamp(3rem, 7vw, 6rem); }
.gr-ciclo__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.gr-ciclo__title {
  margin: 0 0 1.5rem;
  font-family: var(--font-display, Bitter), Georgia, serif;
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2vw, 2.7rem);
  line-height: 1.1;
  color: #1a1a1a;
}
.gr-ciclo__title .gr-acento { color: #14a0bb; }
.gr-ciclo__text { margin: 0 0 1.25rem; color: #333; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); line-height: 1.65; }
.gr-ciclo__list { list-style: disc; margin: 0 0 1.25rem; padding-left: 1.4rem; color: #333; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); line-height: 1.6; }
.gr-ciclo__list li { margin-bottom: 1rem; padding-left: 0.35rem; }
.gr-ciclo__list li::marker { color: #1a1a1a; }
.gr-ciclo__img { width: 100%; height: auto; display: block; }

/* ---------- Placeholder de imagen (mientras llega la foto real) ---------- */
.gr-placeholder {
  display: flex; align-items: center; justify-content: center;
  background: #e7edf2; color: #8aa0b3;
  font-size: 0.95rem; letter-spacing: 0.04em;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .gr-marco__grid, .gr-ciclo__grid { grid-template-columns: 1fr; }
  .gr-cards__grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
  .gr-ciclo__img { max-width: 520px; margin-inline: auto; }
}