/* =============================================
   GRUPO SALVADOR — CSS GESTIÓN SOCIAL / FUNDACIÓN SALVADOR
   Etapa 8H: composición de la página 7 del PDF. Hero panorámico con la foto
   grupal; una hoja blanca curva que monta sobre el hero y cierra curva contra
   el footer rojo. Rojo contenido en la tarjeta de Propósito, los tres pilares
   y el botón; rosa claro como superficie secundaria (franja de Pilares y
   bloque de cierre). Blanco dominante.
   ============================================= */

.gs-fs {
  --gs-sheet-radius: 40px;
  /* Columna de contenido común a todas las secciones de la hoja. */
  --gs-fs-col: 1080px;
  /* Rosa del bloque de cierre: un punto más que --gs-red-soft para que se lea
     como bloque sobre la hoja blanca (PDF). */
  --gs-fs-pink: #f7e3e2;
}

.gs-fs-col { max-width: calc(var(--gs-fs-col) + 48px); }

/* Títulos de sección: primera línea regular, segunda en negrita (PDF).
   Interlineado 1.08: con 1 la tilde de "GESTIÓN"/"RETRIBUCIÓN" y el "¿"
   tocaban la línea vecina. */
.gs-fs-title {
  margin-bottom: 32px;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700;
  line-height: 1.08;
  text-transform: uppercase;
  color: var(--gs-red, #a61916);
}
.gs-fs-title span { display: block; font-weight: 400; }

/* ── HERO ── */
.gs-fs-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: center;
  height: clamp(480px, 36vw, 620px);
  background: var(--gs-red-hover, #8a1412);
  color: var(--gs-white);
}
/* Foto grupal panorámica (≈ 2,9:1): a 1440 el hueco es ≈ 2,8:1 y se ve casi
   entera. Las caras van del 11% al 66% del alto: el foco vertical queda arriba. */
.gs-fs-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}
/* Velo rojo más denso a la izquierda (texto) y suave sobre el grupo; la
   persona de la izquierda sigue viéndose a través del rojo, como en el PDF. */
.gs-fs-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg,
    rgba(138, 20, 18, .78) 0%,
    rgba(166, 25, 22, .62) 30%,
    rgba(166, 25, 22, .30) 56%,
    rgba(166, 25, 22, .18) 100%);
}
.gs-fs-hero__inner { width: 100%; padding-top: 16px; padding-bottom: var(--gs-sheet-radius); }
.gs-fs-hero__eyebrow {
  display: block;
  margin-bottom: 4px;
  font-size: clamp(18px, 2.3vw, 34px);
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
}
.gs-fs-hero__title {
  display: flex;
  flex-direction: column;
  font-size: clamp(44px, 5.2vw, 78px);
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.005em;
  text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .2);
}
.gs-fs-hero__sub {
  max-width: 440px;
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .94);
}

/* ── HOJA BLANCA ── */
/* El wrap pinta detrás de las esquinas inferiores el rojo del footer. */
.gs-fs-sheet-wrap {
  position: relative;
  z-index: 1;
  margin-top: calc(-1 * var(--gs-sheet-radius));
  background: linear-gradient(to bottom,
    transparent calc(100% - var(--gs-sheet-radius)),
    var(--gs-red, #a61916) 0);
}
.gs-fs-sheet {
  display: flow-root;
  padding: 72px 0 104px;
  border-radius: var(--gs-sheet-radius);
  background: var(--gs-white);
}

/* ── PROPÓSITO INSTITUCIONAL ── */
/* Una sola tarjeta: bloque rojo arriba, foto abajo con las esquinas
   inferiores redondeadas (PDF). */
.gs-fs-proposito__card {
  max-width: var(--gs-fs-col);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 32px;
  background: var(--gs-red, #a61916);
}
.gs-fs-proposito__text {
  padding: 56px 72px 52px;
  background: radial-gradient(circle at 6% 10%, rgba(255, 255, 255, .10), transparent 42%);
  color: var(--gs-white);
}
.gs-fs-proposito__title {
  margin-bottom: 24px;
  font-size: clamp(30px, 3.4vw, 48px);
  font-weight: 700;
  line-height: 1.04;
  text-transform: uppercase;
}
.gs-fs-proposito__title span { display: block; font-weight: 400; }
.gs-fs-proposito__text p {
  max-width: 820px;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .95);
}
.gs-fs-proposito__text p + p { margin-top: 16px; }
/* 3:2 nativo de la foto: en escritorio no se recorta nada. Las manos ocupan
   del 34% al 74% del ancho y del 35% al 73% del alto. */
.gs-fs-proposito__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 54% 55%;
}

/* ── PILARES ── */
/* Franja rosa a todo el ancho de la hoja (PDF). */
.gs-fs-pilares {
  margin-top: 88px;
  padding: 72px 0 80px;
  background: var(--gs-red-soft, #fbeeed);
}
.gs-fs-pilares__list { list-style: none; display: flex; flex-direction: column; gap: 20px; }
/* Bloque horizontal: título | descripción. */
.gs-fs-pilar {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 16px 44px;
  align-items: center;
  min-height: 132px;
  padding: 32px 52px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 4% 12%, rgba(255, 255, 255, .09), transparent 40%),
    var(--gs-red, #a61916);
  color: var(--gs-white);
}
.gs-fs-pilar__title { font-size: 22px; font-weight: 700; line-height: 1.2; }
.gs-fs-pilar__desc { font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .94); }

/* ── NUESTRO COMPROMISO ── */
.gs-fs-compromiso { padding: 88px 0 24px; }
.gs-fs-compromiso__body { max-width: 860px; }
.gs-fs-compromiso__body p { font-size: 17px; line-height: 1.75; color: #333; }
.gs-fs-compromiso__body p + p { margin-top: 20px; }
/* La frase de cierre del párrafo 1 va aparte en el PDF: aquí, destacada con
   el dorado como acento (filete decorativo, no texto). */
.gs-fs-compromiso__body .gs-fs-compromiso__lema {
  margin: 28px 0;
  padding-left: 22px;
  border-left: 4px solid var(--gs-gold, #c9980e);
  font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--gs-red, #a61916);
}

/* ── ¿CÓMO APORTAR? ── */
.gs-fs-aportar { padding-top: 72px; }
.gs-fs-aportar__box {
  padding: 48px 64px 52px;
  border-radius: 32px;
  background: var(--gs-fs-pink);
}
.gs-fs-aportar__intro { max-width: 860px; font-size: 17.5px; font-weight: 500; line-height: 1.6; color: #2b2b2b; }
.gs-fs-aportar__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 860px;
  margin-top: 24px;
}
.gs-fs-aportar__list li {
  position: relative;
  padding-left: 22px;
  font-size: 16.5px;
  line-height: 1.6;
  color: #333;
}
.gs-fs-aportar__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gs-red, #a61916);
}
.gs-fs-aportar__list strong { font-weight: 700; color: var(--gs-red, #a61916); }
.gs-fs-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 52px;
  margin: 36px auto 0;
  padding: 14px 36px;
  border-radius: 12px;
  background: var(--gs-red, #a61916);
  color: var(--gs-white);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .2s;
}
.gs-fs-btn:hover { background: var(--gs-red-hover, #8a1412); }
.gs-fs-btn:focus-visible { outline: 3px solid var(--gs-red, #a61916); outline-offset: 3px; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .gs-fs-proposito__text { padding: 48px 48px 44px; }
  .gs-fs-pilar { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 12px 32px; padding: 28px 36px; }
  .gs-fs-aportar__box { padding: 40px 44px 44px; }
}
@media (max-width: 900px) {
  .gs-fs { --gs-sheet-radius: 28px; }
  /* Móvil: se reorganiza. La foto grupal va arriba en 16:10 (entran completas
     las tres personas del centro) y el texto debajo, sobre el rojo oscuro en
     el que se funde la foto. */
  .gs-fs-hero { display: block; height: auto; }
  .gs-fs-hero__bg {
    position: relative;
    inset: auto;
    height: auto;
    aspect-ratio: 16 / 10;
    object-position: 50% 30%;
  }
  .gs-fs-hero::before {
    inset: 0 0 auto 0;
    height: auto;
    aspect-ratio: 16 / 10;
    background: linear-gradient(180deg,
      rgba(166, 25, 22, .18) 0%,
      rgba(166, 25, 22, .26) 55%,
      rgba(138, 20, 18, 1) 100%);
  }
  .gs-fs-hero__inner { margin-top: -28px; padding-top: 0; padding-bottom: calc(var(--gs-sheet-radius) + 36px); }
}
@media (max-width: 700px) {
  .gs-fs-sheet { padding: 40px 0 80px; }
  .gs-fs-title { margin-bottom: 24px; }
  .gs-fs-proposito__card { border-radius: 24px; }
  .gs-fs-proposito__text { padding: 34px 24px 32px; }
  .gs-fs-proposito__text p { font-size: 16px; }
  .gs-fs-proposito__img { aspect-ratio: 4 / 3; }
  .gs-fs-pilares { margin-top: 56px; padding: 52px 0 56px; }
  .gs-fs-pilares__list { gap: 14px; }
  /* Pilares apilados: título arriba, descripción abajo. */
  .gs-fs-pilar { grid-template-columns: 1fr; gap: 8px; min-height: 0; padding: 24px 24px 26px; border-radius: 20px; }
  .gs-fs-pilar__title { font-size: 19px; }
  .gs-fs-pilar__desc { font-size: 15.5px; }
  .gs-fs-compromiso { padding-top: 56px; }
  .gs-fs-compromiso__body p { font-size: 16px; }
  .gs-fs-aportar { padding-top: 56px; }
  .gs-fs-aportar__box { padding: 30px 22px 30px; border-radius: 24px; }
  .gs-fs-aportar__intro { font-size: 16.5px; }
  .gs-fs-aportar__list li { font-size: 15.5px; }
  .gs-fs-btn { width: 100%; padding: 14px 20px; letter-spacing: .08em; }
}