/* ========================= */
/* Comprometidos 2025        */
/* ========================= */

/* ─── SECTION 1: Hero ─── */

.comp-hero {
  position: relative;
  height: 560px;
  overflow: hidden;
}

.comp-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.comp-hero__overlay {
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.6;
}

.comp-hero__gradient--top {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #182E49 0%, rgba(24, 46, 73, 0) 50%);
}

.comp-hero__gradient--bottom {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #182E49 0%, rgba(24, 46, 73, 0) 50%);
}

.comp-hero__header {
  position: relative;
  z-index: 2;
}

.comp-hero__header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xs) var(--pad-page-x-mobile);
}

.comp-hero__logo img {
  display: block;
}

.comp-hero__cta-btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  height: 44px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-text-white);
  padding: 8px var(--space-xl);
  background: transparent;
  color: var(--color-text-white);
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--transition-base);
}

.comp-hero__cta-btn:hover {
  opacity: 0.7;
}

.comp-hero__cta-label {
  font-family: var(--ff-primary);
  font-size: var(--fs-xs);
  line-height: var(--lh-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-white);
}

.comp-hero__title-wrap {
  position: absolute;
  left: var(--pad-page-x-mobile);
  bottom: 80px;
  z-index: 2;
}

.comp-hero__title {
  margin: 0;
  font-family: var(--ff-primary);
  font-size: var(--fs-3xl);
  line-height: var(--lh-3xl);
  letter-spacing: -0.48px;
  color: var(--color-text-white);
}

.comp-hero__credit {
  position: absolute;
  right: var(--pad-page-x-mobile);
  bottom: 16px;
  z-index: 2;
  font-family: var(--ff-primary);
  font-size: 9px;
  line-height: 20px;
  font-weight: var(--fw-regular);
  color: var(--color-text-white);
  margin: 0;
}

.comp-hero__title--bold {
  font-weight: var(--fw-semibold);
}

.comp-hero__title--light {
  font-weight: var(--fw-light);
}

.comp-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  z-index: 2;
}

.comp-hero__scroll-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity var(--transition-base);
}

.comp-hero__scroll-btn:hover {
  opacity: 0.7;
}

@media (min-width: 768px) {
  .comp-hero__header-inner {
    padding-left: var(--pad-header-x);
    padding-right: var(--pad-header-x);
  }

  .comp-hero__title-wrap {
    left: var(--pad-page-x);
  }
}

@media (min-width: 1024px) {
  .comp-hero {
    height: clamp(600px, 60.5vw, 872px);
  }

  .comp-hero__cta-btn {
    height: 56px;
    padding: 10px var(--space-2xl);
  }

  .comp-hero__title {
    font-size: var(--fs-5xl);
    line-height: 54px;
    letter-spacing: -0.48px;
  }

  .comp-hero__title--light {
    letter-spacing: -1.04px;
  }

  .comp-hero__title-wrap {
    left: calc(max(0px, 50% - 720px) + var(--pad-header-x)); /* Tracks .container left edge + header padding = logo left edge */
    bottom: auto;
    top: 157px;
  }

  .comp-hero__credit {
    right: var(--pad-section-x-wide);
    bottom: 25px;
  }

  .comp-hero__scroll {
    left: 50%;
    transform: translateX(-50%);
    bottom: auto;
    top: calc(100% - 104px);
  }
}

/* ─── SECTION 2: Patronato Fundación Pelayo ─── */

.comp-patronato__title {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-medium);
  text-align: center;
  margin: 0;
  padding: var(--space-3xl) var(--pad-page-x-mobile) var(--space-2xl);
}

/* Single continuous grid — all 13 members flow naturally */
.comp-patronato__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  padding: 0 var(--pad-page-x-mobile) var(--space-3xl);
}

/* Member card — Figma: 237×296, pad 24/24/28, radius 16, bg #f2f7f9 */
.comp-member {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-light);
  padding: 24px 24px 28px;
  text-align: left;
  min-height: 296px;
}

.comp-member__photo {
  display: block;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-bottom: 16px;                /* Figma: 16px */
  order: 0;
}

/* Figma order: photo → name → role → desc */
.comp-member__name {
  margin: 0 0 4px 0;                  /* Figma: 4px */
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: 18px;
  line-height: 22px;
  font-weight: var(--fw-semibold);
  order: 1;
}

.comp-member__role {
  margin: 0 0 8px 0;                  /* Figma: 8px */
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  order: 2;
}

.comp-member__desc {
  margin: 0;
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--fw-regular);
  order: 3;
}

@media (min-width: 768px) {
  .comp-patronato__title {
    font-size: var(--fs-4xl);
    padding: 72px var(--pad-page-x) var(--space-2xl);
  }

  .comp-patronato__grid {
    grid-template-columns: repeat(3, minmax(0, 237px));
    justify-content: center;
    gap: 24px;
    padding: 0 var(--pad-page-x) 56px;
  }

}

@media (min-width: 1024px) {
  .comp-patronato__title {
    padding: 72px var(--pad-section-x) 80px;
  }

  .comp-patronato__grid {
    grid-template-columns: repeat(5, 237px);
    justify-content: center;
    gap: 24px;
    padding: 0 var(--pad-section-x) clamp(72px, calc(72px + 54 * (100vw - 1024px) / 416), 126px);
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Center last row: 13 items = 5+5+3, item 11 starts at col 2 */
  .comp-patronato__grid .comp-member:nth-child(11) {
    grid-column-start: 2;
  }

}

/* ─── SECTION 3: Estrategia 2025 ─── */

.comp-estrategia {
  background-color: var(--color-bg-light);
}

.comp-estrategia__inner {
  display: flex;
  flex-direction: column;
  padding: var(--space-4xl) var(--pad-page-x-mobile) var(--space-3xl);
}

.comp-estrategia__text {
  flex: 1;
}

.comp-estrategia__title {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-medium);
  margin: 0 0 var(--space-xl) 0;
}

.comp-estrategia__body {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: var(--fs-sm);
  line-height: 24px;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-body);
  font-feature-settings: 'liga' 0;
  margin: 0 0 var(--space-xl) 0;
  max-width: 631px;
}

.comp-estrategia__body--bold {
  font-weight: var(--fw-semibold);
  max-width: 631px;
}

.comp-estrategia__illustration {
  display: none;
}

.comp-estrategia__illustration-img {
  display: block;
  max-width: 468px;
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .comp-estrategia__inner {
    padding-left: var(--pad-page-x);
    padding-right: var(--pad-page-x);
  }

  .comp-estrategia__title {
    font-size: var(--fs-4xl);
    margin-bottom: 24px;                /* Figma: 24px título→body */
  }

  .comp-estrategia__body {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
    margin-bottom: 27px;                /* Figma: 27px body→body bold */
  }
}

@media (min-width: 1024px) {
  .comp-estrategia {
    height: 416px;                       /* Figma: bg azul = 416px */
    overflow: visible;
  }

  .comp-estrategia > .container {
    position: relative;
    height: 100%;
  }

  .comp-estrategia__inner {
    display: block;                      /* no flex — posicionamiento manual */
    padding: 83px 77px 78px 732px;      /* Figma: top 83, right 77, bottom 78, left = texto x */
  }

  .comp-estrategia__illustration {
    display: block;
    position: absolute;
    left: 158px;                         /* Figma: 158px del borde izquierdo del container */
    bottom: 0;                           /* pies tocan el borde inferior del bg */
  }

  .comp-estrategia__illustration-img {
    display: block;
    width: 468px;
    height: auto;
  }

  .comp-estrategia__text {
    max-width: 631px;
  }
}

/* ─── SECTION 4: Ayuda a desastres humanitarios ─── */

.comp-desastres__inner {
  padding: var(--space-3xl) var(--pad-page-x-mobile) var(--space-3xl);
}

.comp-desastres__title {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-medium);
  text-align: center;
  margin: 0 0 var(--space-xl) 0;
}

.comp-desastres__subtitle {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: var(--fs-xl);
  line-height: 1.32;
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  margin: 0 0 var(--space-md) 0;
}

.comp-desastres__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.comp-desastres__body {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: var(--fs-sm);
  line-height: 24px;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-body);
  font-feature-settings: 'liga' 0;
  margin: 0;
  max-width: 590px;
}

.comp-desastres__cards {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.comp-desastres__card {
  width: min(196px, calc(50% - var(--space-md)));
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-md);
}

.comp-desastres__card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.comp-desastres__card-logo img {
  display: block;
  max-width: 107px;
  max-height: 60px;
}

.comp-desastres__card-label {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-body);
  text-align: center;
  margin: 0;
}

@media (min-width: 768px) {
  .comp-desastres__inner {
    padding: var(--space-7xl) var(--pad-page-x) var(--space-6xl);
  }

  .comp-desastres__title {
    font-size: var(--fs-4xl);
  }

  .comp-desastres__body {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
  }
}

@media (min-width: 1024px) {
  .comp-desastres__inner {
    padding: 81px 80px 132px;            /* Figma: top 81, sides 80 (aligned with Colaboración image), bottom 132 */
  }

  .comp-desastres__title {
    margin-bottom: 83px;                /* Figma: 83px título→subtítulo */
  }

  .comp-desastres__content {
    flex-direction: row;
    align-items: center;
    gap: 62px;                          /* Figma: 62px texto↔tarjetas */
  }

  .comp-desastres__text {
    flex: 1 1 auto;
    max-width: 590px;
  }

  .comp-desastres__cards {
    flex-shrink: 0;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--space-md);
  }

  .comp-desastres__card {
    width: 196px;                       /* Figma: 196×196 */
    height: 196px;
  }
}

/* ─── SECTION 5: Colaboración ONG + Empleados ─── */

.comp-colaboracion__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  padding: 0 var(--pad-page-x-mobile) var(--space-3xl);
}

.comp-colaboracion__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.comp-colaboracion__image-wrap {
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}

.comp-colaboracion__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.comp-colaboracion__card-title {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: 22px;
  line-height: 1.32;
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-md) 0;
}

.comp-colaboracion__card-body {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: var(--fs-sm);
  line-height: 24px;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-body);
  font-feature-settings: 'liga' 0;
  margin: 0 0 var(--space-md) 0;
}

.comp-colaboracion__card-link {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: var(--fs-sm);
  line-height: 24px;
  font-weight: var(--fw-semibold);
  font-feature-settings: 'liga' 0;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-align: left;
  transition: opacity var(--transition-base);
  cursor: pointer;
}

.comp-colaboracion__card-link:hover {
  opacity: 0.7;
}

@media (min-width: 768px) {
  .comp-colaboracion__inner {
    gap: var(--space-4xl);
    padding-left: var(--pad-page-x);
    padding-right: var(--pad-page-x);
    padding-bottom: var(--space-6xl);
  }

  .comp-colaboracion__row {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-4xl);
  }

  /* row--reverse: HTML order already handles text-left/image-right */

  .comp-colaboracion__image-wrap {
    max-width: clamp(400px, calc(400px + 187 * (100vw - 768px) / 672), 587px);
    width: 100%;
    aspect-ratio: 587 / 350;
  }

  .comp-colaboracion__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .comp-colaboracion__text {
    flex: 1;
    max-width: 544px;
  }

  .comp-colaboracion__card-title {
    font-size: var(--fs-xl);
    line-height: 1.32;
  }

  .comp-colaboracion__card-body {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
  }

  .comp-colaboracion__card-link {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
  }
}

@media (min-width: 1024px) {
  .comp-colaboracion__inner {
    gap: 77px;                           /* Figma: 77px between rows */
    padding: 0 80px 123px;               /* Figma: sides 80, bottom 123 (top 132 comes from desastres padding-bottom) */
  }

  .comp-colaboracion__row {
    gap: 69px;                           /* Figma: Row 1 image→text 69px */
  }

  .comp-colaboracion__row--reverse {
    gap: 149px;                          /* Figma: Row 2 text→image 149px */
  }

  .comp-colaboracion__text {
    padding-top: 83px;                   /* Figma: Row 1 text offset from row top */
  }

  .comp-colaboracion__row--reverse .comp-colaboracion__text {
    padding-top: 86px;                   /* Figma: Row 2 text offset (163 − 77 = 86) */
  }
}

/* ─── SECTION 6: Reto Pelayo Vida ─── */

.comp-reto__divider,
.comp-proyectos__divider {
  border: none;
  border-top: 1.5px solid var(--color-primary);
  margin: 0;
}

.comp-reto__divider {
  margin: 0 var(--pad-page-x-mobile);
}

.comp-reto__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  padding: var(--space-4xl) var(--pad-page-x-mobile) var(--space-3xl);
}

.comp-reto__image-wrap {
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}

.comp-reto__image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.comp-reto__title {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-medium);
  margin: 0 0 var(--space-xl) 0;
}

.comp-reto__body {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: var(--fs-sm);
  line-height: 24px;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-body);
  font-feature-settings: 'liga' 0;
  margin: 0;
  max-width: 628px;
}

.comp-reto__body strong {
  font-weight: var(--fw-semibold);
}

.comp-reto__link {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin-top: var(--space-md);
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: var(--fs-sm);
  line-height: 24px;
  font-weight: var(--fw-semibold);
  font-feature-settings: 'liga' 0;
  text-align: left;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  transition: opacity var(--transition-base);
}

.comp-reto__link:hover {
  opacity: 0.7;
}

@media (min-width: 768px) {
  .comp-reto__inner {
    padding: var(--space-7xl) var(--pad-page-x);
  }

  .comp-reto__title {
    font-size: var(--fs-4xl);
    margin-bottom: var(--space-2xl);
  }

  .comp-reto__body {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
  }

  .comp-reto__link {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
  }
}

@media (min-width: 1024px) {
  .comp-reto__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 64px;                           /* Figma: 731 − (80+587) = 64px */
    padding: 80px;                       /* Figma: 80px all sides (divider→content and content→next divider) */
  }

  .comp-reto__title {
    font-size: var(--fs-lg);
    line-height: 40px;
    font-weight: var(--fw-medium);
  }

  .comp-reto__divider {
    margin: 0 80px;                      /* Figma: divider at left=80, width=1280 */
  }

  .comp-reto__image-wrap {
    width: 587px;
    max-width: 587px;
    aspect-ratio: 587 / 350;
    border-radius: var(--radius-md);
  }

  .comp-reto__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .comp-reto__text {
    flex: 1;
    max-width: 628px;                    /* Figma: text width 628px */
    padding-top: 12px;                   /* Figma: title at y=4141, image at y=4129 → 12px offset */
  }
}

/* ─── SECTION 7: Seguridad Vial + Proyecto con Partners ─── */

.comp-proyectos__divider {
  margin: 0 var(--pad-page-x-mobile);
}

.comp-proyectos__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-3xl) var(--pad-page-x-mobile);
}

.comp-proyectos__card {
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-primary);
  padding: var(--space-2xl) var(--space-xl);
  min-height: 280px;
}

.comp-proyectos__card-title {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: var(--fs-md);
  line-height: var(--lh-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.48px;
  text-transform: uppercase;
  margin: 0 0 var(--space-xl) 0;
}

.comp-proyectos__card-body {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: var(--fs-sm);
  line-height: 24px;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-body);
  font-feature-settings: 'liga' 0;
  margin: 0 0 var(--space-md) 0;
  max-width: 432px;
}

.comp-proyectos__card-link {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: var(--fs-sm);
  line-height: 24px;
  font-weight: var(--fw-semibold);
  font-feature-settings: 'liga' 0;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-align: left;
  transition: opacity var(--transition-base);
  cursor: pointer;
}

.comp-proyectos__card-link:hover {
  opacity: 0.7;
}

@media (min-width: 768px) {
  .comp-proyectos__inner {
    flex-direction: row;
    gap: var(--space-2xl);
    padding: var(--space-6xl) var(--pad-page-x);
  }

  .comp-proyectos__card {
    flex: 1;
    padding: clamp(32px, calc(32px + 24 * (100vw - 768px) / 672), 56px);
    min-height: clamp(280px, calc(280px + 104 * (100vw - 768px) / 672), 384px);
    max-width: 544px;
  }

  .comp-proyectos__card-title {
    font-size: var(--fs-xl);
    line-height: 36px;
    letter-spacing: -0.56px;
  }

  .comp-proyectos__card-body {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
  }

  .comp-proyectos__card-link {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
  }
}

@media (min-width: 1024px) {
  .comp-proyectos__divider {
    margin: 0 160px;                     /* Figma: divider at left=160, width=1120 */
  }

  .comp-proyectos__inner {
    padding: 80px 160px 0;               /* Figma: 80px top, 160px sides, 0 bottom (108px gap comes from aseguradora top) */
    gap: 32px;                           /* Figma: 736 − (160+544) = 32px */
  }

  .comp-proyectos__card {
    flex: 1;
    max-width: 544px;                    /* Figma: card width 544px */
    min-height: 384px;                   /* Figma: card height 384px */
    padding: 56px;                       /* Figma: inner padding 56px (216−160) */
  }

  .comp-proyectos__card-title {
    margin-bottom: 24px;                 /* Figma: title→body gap 4759−4735 = 24px */
  }
}

/* ─── SECTION 8: Actividad aseguradora ─── */

.comp-aseguradora__inner {
  padding: var(--space-3xl) var(--pad-page-x-mobile);
}

.comp-aseguradora__title {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-medium);
  margin: 0 0 var(--space-xl) 0;
}

.comp-aseguradora__body {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: var(--fs-sm);
  line-height: 24px;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-body);
  font-feature-settings: 'liga' 0;
  margin: 0 0 var(--space-3xl) 0;
  max-width: 832px;
}

.comp-aseguradora__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.comp-aseguradora__card {
  background-color: var(--color-bg-light);
  border-radius: 32px;
  padding: clamp(24px, 3.8vw, 56px);
  min-height: 280px;
}

.comp-aseguradora__card-title {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: var(--fs-md);
  line-height: var(--lh-xl);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.48px;
  text-transform: uppercase;
  margin: 0 0 var(--space-lg) 0;
}

.comp-aseguradora__card-body {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: var(--fs-sm);
  line-height: 24px;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-body);
  font-feature-settings: 'liga' 0;
  margin: 0;
  max-width: 432px;
}

@media (min-width: 768px) {
  .comp-aseguradora__inner {
    padding: var(--space-6xl) var(--pad-page-x);
  }

  .comp-aseguradora__title {
    font-size: var(--fs-4xl);
  }

  .comp-aseguradora__body {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
  }

  .comp-aseguradora__cards {
    flex-direction: row;
    gap: var(--space-2xl);
  }

  .comp-aseguradora__card {
    flex: 1;
    max-width: 544px;
    min-height: clamp(280px, calc(280px + 104 * (100vw - 768px) / 672), 384px);
  }

  .comp-aseguradora__card-title {
    font-size: var(--fs-xl);
    line-height: 36px;
    letter-spacing: -0.56px;
  }

  .comp-aseguradora__card-body {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
  }
}

@media (min-width: 1024px) {
  .comp-aseguradora__inner {
    padding: 108px 160px;                /* Figma: 108px top/bottom, 160px sides */
  }

  .comp-aseguradora__title {
    margin-left: 2px;                    /* Figma: title at 162px, cards at 160px */
  }

  .comp-aseguradora__body {
    margin-bottom: 58px;                 /* Figma: body→cards gap 58px */
    margin-left: 2px;                    /* Figma: body at 162px, cards at 160px */
  }

  .comp-aseguradora__cards {
    gap: 32px;                           /* Figma: (1120 − 2×544) = 32px */
  }

  .comp-aseguradora__card {
    flex: 1;
    max-width: 544px;
    padding: 59px 56px 53px;             /* Figma: top 59, sides 56, bottom 53 */
  }
}

/* ─── SECTION 9: Voluntariado ─── */

.comp-voluntariado__header {
  text-align: center;
  padding: var(--space-3xl) var(--pad-page-x-mobile) 0;
}

.comp-voluntariado__inner {
  display: flex;
  flex-direction: column;
  padding: var(--space-2xl) var(--pad-page-x-mobile) var(--space-3xl);
}

.comp-voluntariado__illustration {
  display: none;
}

.comp-voluntariado__illustration-img {
  display: block;
  width: 100%;
  max-width: 427px;
  height: auto;
  object-fit: contain;
}

.comp-voluntariado__content {
  flex: 1;
}

.comp-voluntariado__title {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-medium);
  margin: 0 0 11px 0;
}

.comp-voluntariado__body {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: var(--fs-sm);
  line-height: 24px;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-body);
  font-feature-settings: 'liga' 0;
  margin: 0 auto;
  max-width: 879px;
}

.comp-voluntariado__cards {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
  touch-action: pan-y pinch-zoom;
  position: relative;
  overflow: hidden;
}

.comp-voluntariado__card {
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-primary);
  background-color: var(--color-bg-white);
  padding: var(--space-xl);
  min-height: 280px;
  /* All cards stack in the same grid area */
  grid-row: 1;
  grid-column: 1;
  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transform: translateX(30px);
  transition: opacity 0.4s cubic-bezier(.22,1,.36,1),
              transform 0.4s cubic-bezier(.22,1,.36,1),
              visibility 0.4s;
  pointer-events: none;
}

.comp-voluntariado__card.card--visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

.comp-voluntariado__card.card--exit-left {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-30px);
}

.comp-voluntariado__card.card--exit-right {
  opacity: 0;
  visibility: hidden;
  transform: translateX(30px);
}

.comp-voluntariado__card.card--enter-left {
  transform: translateX(-30px);
}

.comp-voluntariado__card.card--enter-right {
  transform: translateX(30px);
}

.comp-voluntariado__card-title {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: var(--fs-sm);
  line-height: 24px;
  font-weight: var(--fw-semibold);
  font-feature-settings: 'liga' 0;
  margin: 0 0 var(--space-md) 0;
}

.comp-voluntariado__card-body {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--fw-regular);
  margin: 0;
  max-width: 288px;
}

/* Carousel nav */
.comp-voluntariado__nav {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.comp-voluntariado__nav-btns {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.comp-voluntariado__dots {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* Shared carousel button */
.carousel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity var(--transition-base);
}

.carousel-btn:hover {
  opacity: 0.7;
}

.carousel-btn img {
  display: block;
}

/* Shared dot */
.dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-bg-light);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.dot:hover {
  transform: scale(1.4);
}

.dot--active {
  background-color: var(--color-primary);
  transform: scale(1.25);
}

@media (min-width: 768px) {
  .comp-voluntariado__header {
    padding: var(--space-6xl) var(--pad-page-x) 0;
  }

  .comp-voluntariado__inner {
    padding: var(--space-2xl) var(--pad-page-x) var(--space-6xl);
  }

  .comp-voluntariado__title {
    font-size: var(--fs-4xl);
  }

  .comp-voluntariado__body {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
  }

  .comp-voluntariado__cards {
    gap: var(--space-2xl);
  }

  .comp-voluntariado__card {
    min-height: 368px;
    padding: var(--space-2xl);
  }

  .comp-voluntariado__card-title {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
  }

  .comp-voluntariado__card-body {
    font-size: var(--fs-xs);
    line-height: var(--lh-sm);
  }
}

@media (min-width: 1024px) {
  .comp-voluntariado__header {
    padding: var(--space-6xl) var(--pad-section-x-wide) 0;
  }

  .comp-voluntariado__inner {
    flex-direction: row;
    align-items: flex-start;
    padding: 65px var(--pad-section-x-wide) var(--space-6xl) 80px; /* Figma: 65px top (body→cards gap) */
  }

  .comp-voluntariado__illustration {
    display: block;
    flex-shrink: 0;
    margin-right: 37px;                  /* Figma: cards at x=544, illustration ends at x=507 */
  }

  .comp-voluntariado__cards {
    grid-template-columns: 1fr 1fr;      /* Figma: 2 cards per page */
    gap: 32px;                           /* Figma: 32px between cards */
  }

  .comp-voluntariado__card {
    min-height: 368px;                   /* Figma: card height 368px */
    padding: 32px;                       /* Figma: 32px inner padding */
  }
}

/* ─── SECTION 9: Sostenibilidad y economía circular ─── */

.comp-sostenibilidad__header {
  text-align: center;
  padding: var(--space-3xl) var(--pad-page-x-mobile) 0;
}

.comp-sostenibilidad__title {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-medium);
  margin: 0 0 var(--space-xl) 0;
}

.comp-sostenibilidad__intro {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: var(--fs-sm);
  line-height: 24px;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-body);
  font-feature-settings: 'liga' 0;
  margin: 0 auto;
  max-width: 1006px;
}

.comp-sostenibilidad__inner {
  display: flex;
  flex-direction: column;
  padding: var(--space-2xl) var(--pad-page-x-mobile) 0;
}

.comp-sostenibilidad__text {
  flex: 1;
}

.comp-sostenibilidad__subtitle {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: 22px;
  line-height: 32px;
  font-weight: var(--fw-medium);
  margin: 0 0 var(--space-xl) 0;
}

.comp-sostenibilidad__body {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: var(--fs-sm);
  line-height: 24px;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-body);
  font-feature-settings: 'liga' 0;
  margin: 0 0 var(--space-3xl) 0;
  max-width: 628px;
}

.comp-sostenibilidad__illustration {
  display: none;
}

.comp-sostenibilidad__illustration-img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  object-fit: contain;
}

.comp-sostenibilidad__divider {
  border: none;
  border-top: 1.5px solid var(--color-primary);
  margin: var(--space-3xl) var(--pad-page-x-mobile) 0;
}

@media (min-width: 768px) {
  .comp-sostenibilidad__header {
    padding: var(--space-6xl) var(--pad-page-x) 0;
  }

  .comp-sostenibilidad__title {
    font-size: var(--fs-4xl);
  }

  .comp-sostenibilidad__intro {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
  }

  .comp-sostenibilidad__inner {
    padding: var(--space-2xl) var(--pad-page-x) 0;
  }

  .comp-sostenibilidad__subtitle {
    font-size: var(--fs-lg);
    line-height: 40px;
  }

  .comp-sostenibilidad__body {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
  }

  .comp-sostenibilidad__divider {
    margin: var(--space-3xl) var(--pad-page-x) 0;
  }
}

@media (min-width: 1024px) {
  .comp-sostenibilidad__header {
    padding: var(--space-6xl) var(--pad-section-x-wide) 0;
  }

  .comp-sostenibilidad__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-4xl);
    padding: var(--space-2xl) clamp(40px, calc(40px + 40 * (100vw - 1024px) / 416), 80px) 0;
  }

  .comp-sostenibilidad__illustration {
    display: block;
    flex-shrink: 0;
  }

  .comp-sostenibilidad__divider {
    margin: var(--space-3xl) clamp(80px, calc(80px + 80 * (100vw - 1024px) / 416), 160px) 0;
  }
}

/* ─── SECTION 10: Premio Pelayo para Juristas ─── */

.comp-premio__inner {
  padding: var(--space-3xl) var(--pad-page-x-mobile);
}

.comp-premio__title {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-medium);
  margin: 0 0 var(--space-xl) 0;
  max-width: 928px;
}

.comp-premio__subtitle {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: 22px;
  line-height: 32px;
  font-weight: var(--fw-medium);
  margin: 0 0 var(--space-3xl) 0;
  max-width: 1120px;
}

.comp-premio__columns {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  margin-bottom: var(--space-3xl);
}

.comp-premio__body {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: var(--fs-sm);
  line-height: 24px;
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-body);
  font-feature-settings: 'liga' 0;
  margin: 0;
  max-width: 588px;
}

.comp-premio__columns .comp-premio__body:last-child {
  max-width: 631px;
}

.comp-premio__carousel {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  position: relative;
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
}

.comp-premio__slide {
  width: 100%;
  /* All slides stack in the same grid cell */
  grid-row: 1;
  grid-column: 1;
  /* Hidden by default — JS adds card--visible */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.comp-premio__slide.card--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.comp-premio__image-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  /* 1283×640 original ratio */
  width: 100%;
  max-width: 1283px;
  aspect-ratio: 1283 / 640;
}

.comp-premio__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius-2xl);
}

.comp-premio__footer {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  max-width: 1283px;
  margin-top: var(--space-md);
}

/* Overlay arrows — positioned over the image */
.comp-premio__arrow {
  position: absolute;
  /* ~45% centers on the 1283/640 image area above the caption */
  top: 45%;
  transform: translateY(-50%);
  z-index: 2;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 40px;
  height: 40px;
  opacity: 0.85;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.comp-premio__arrow:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}

.comp-premio__arrow--prev {
  left: 24px;
}
.comp-premio__arrow--prev img {
  transform: rotate(90deg);
}

.comp-premio__arrow--next {
  right: 24px;
}
.comp-premio__arrow--next img {
  transform: rotate(-90deg);
}

.comp-premio__arrow img {
  display: block;
  width: 40px;
  height: 40px;
}

.comp-premio__caption {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--fw-medium);
  opacity: 0.5;
  margin: 0;
  flex: 1;
  max-width: 928px;
}

.comp-premio__dots {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-md);
  max-width: 1283px;
  margin-top: var(--space-xs);
}

@media (min-width: 768px) {
  .comp-premio__inner {
    padding: var(--space-6xl) var(--pad-page-x);
  }

  .comp-premio__title {
    font-size: var(--fs-4xl);
    margin-bottom: 24px;
  }

  .comp-premio__subtitle {
    font-size: var(--fs-lg);
    line-height: var(--lh-2xl);
    margin-bottom: 16px;
  }

  .comp-premio__columns {
    flex-direction: row;
    gap: clamp(32px, calc(32px + 32 * (100vw - 768px) / 672), 64px);
    margin-bottom: clamp(40px, calc(40px + 60 * (100vw - 768px) / 672), 100px);
  }

  .comp-premio__body {
    font-size: var(--fs-base);
    line-height: var(--lh-base);
  }

  /* TSX: second column has letterSpacing: -0.4px */
  .comp-premio__columns .comp-premio__body + .comp-premio__body {
    letter-spacing: -0.4px;
  }

  .comp-premio__image-wrap {
    aspect-ratio: 1283 / 640;
    height: auto;
  }
}

@media (min-width: 1024px) {
  .comp-premio__inner {
    padding: var(--space-6xl) var(--pad-section-x-wide);
  }

  .comp-premio__image-wrap {
    aspect-ratio: 1283 / 640;
    height: auto;
    border-radius: 32px;
  }

  .comp-premio__image {
    border-radius: 32px;
  }
}

/* ─── SECTION 10: Reconocimientos ─── */

.comp-reconocimientos {
  background-color: var(--color-bg-light);
}

.comp-reconocimientos__inner {
  padding: var(--space-3xl) var(--pad-page-x-mobile);
}

.comp-reconocimientos__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-3xl);
}

.comp-reconocimientos__title {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  margin: 0;
}

.comp-reconocimientos__nav-btns {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.comp-reconocimientos__carousel {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: var(--space-2xl);
  margin-bottom: var(--space-xl);
  overflow: hidden;
  touch-action: pan-y pinch-zoom;
  position: relative;
}

.comp-reconocimientos__card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-white);
  padding: var(--space-2xl);
  min-height: 400px;
  /* All cards stack in the same grid cell */
  grid-row: 1;
  grid-column: 1;
  /* Hidden by default */
  opacity: 0;
  visibility: hidden;
  transform: translateX(30px);
  transition: opacity 0.4s cubic-bezier(.22,1,.36,1),
              transform 0.4s cubic-bezier(.22,1,.36,1),
              visibility 0.4s;
  pointer-events: none;
}

.comp-reconocimientos__card.card--visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

.comp-reconocimientos__card.card--exit-left {
  opacity: 0;
  visibility: hidden;
  transform: translateX(-30px);
}

.comp-reconocimientos__card.card--exit-right {
  opacity: 0;
  visibility: hidden;
  transform: translateX(30px);
}

.comp-reconocimientos__card.card--enter-left {
  transform: translateX(-30px);
}

.comp-reconocimientos__card.card--enter-right {
  transform: translateX(30px);
}

.comp-reconocimientos__card-icons {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-xl);
}

.comp-reconocimientos__badge {
  display: block;
  height: 88px;
  width: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.comp-reconocimientos__badge--wide {
  height: auto;
  max-width: 195px;
}

/* Card body text — same as default */
.comp-reconocimientos__card--naranja .comp-reconocimientos__card-body {
  color: var(--color-primary);
}

.comp-reconocimientos__card-title {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: var(--fs-sm);
  line-height: 24px;
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  margin: 0 0 var(--space-xs) 0;
}

.comp-reconocimientos__card-body {
  color: var(--color-primary);
  font-family: var(--ff-primary);
  font-size: 14px;
  line-height: 18px;
  font-weight: var(--fw-regular);
  margin: 0 0 8px 0;
  max-width: 480px;
}

.comp-reconocimientos__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-md);
}

/* Dots on light bg — inactive should be white */
.comp-reconocimientos__dots .dot {
  background-color: var(--color-bg-white);
}

.comp-reconocimientos__dots .dot--active {
  background-color: var(--color-primary);
}

@media (min-width: 768px) {
  .comp-reconocimientos__inner {
    padding: var(--space-7xl) var(--pad-page-x);
  }

  .comp-reconocimientos__title {
    font-size: var(--fs-4xl);
    line-height: var(--lh-tight);
    letter-spacing: 0;
  }

  .comp-reconocimientos__carousel {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    margin-bottom: var(--space-xl);
  }

  .comp-reconocimientos__card {
    padding: var(--space-2xl);
    min-height: 512px;
  }

  .comp-reconocimientos__badge {
    height: 88px;
  }

  .comp-reconocimientos__card-title {
    font-size: var(--fs-lg);
    line-height: 30px;
    letter-spacing: 0;
  }

  .comp-reconocimientos__card-body {
    font-size: 16px;
    line-height: 20px;
  }

  .comp-reconocimientos__card--naranja .comp-reconocimientos__card-body {
    color: var(--color-primary);
  }
}

@media (min-width: 1024px) {
  .comp-reconocimientos__inner {
    padding: clamp(80px, calc(80px + 84 * (100vw - 1024px) / 416), 164px) var(--pad-section-x-wide) var(--space-7xl);
  }

  .comp-reconocimientos__card {
    min-height: 512px;
  }
}

/* ─── Tablet ─── */
@media (max-width: 1023px) {

  .comp-premio__image-wrap {
    height: auto;
    aspect-ratio: 1283 / 640;
  }
}

/* ─── Mobile ─── */
@media (max-width: 767px) {
  .comp-voluntariado__card {
    min-height: 220px;
  }

  .comp-reconocimientos__card {
    min-height: 300px;
  }

  .comp-proyectos__card {
    min-height: auto;
  }

  .comp-premio__footer {
    flex-direction: column;
  }
}

/* ─── Accordion / Toggle states (for JS phase) ─── */
/* Accordions default to closed; .is-open is toggled via JS */

[data-toggle] .accordion__content,
[data-accordion] .accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  opacity: 0;
}

[data-toggle].is-open .accordion__content,
[data-accordion].is-open .accordion__content {
  max-height: 2000px;
  opacity: 1;
}

[data-toggle] .accordion__icon,
[data-accordion] .accordion__icon {
  transition: transform 0.3s ease;
}

[data-toggle].is-open .accordion__icon,
[data-accordion].is-open .accordion__icon {
  transform: rotate(180deg);
}

/* ─── Carousel states (for JS phase) ─── */
/* Carousel containers will use overflow:hidden + translateX in JS */

[data-carousel] {
  position: relative;
  overflow: hidden;
}

/* Active dot state updates handled via JS adding/removing .dot--active */