/* ==========================================================================
   Tarjetas Beneficios - 3 cards (Explora / Oferta / Dona)
   Desktop: grid 3 columnas. Movil (<768px): carrusel 1 card + flechas.
   ========================================================================== */

.c-cards-verdes {
  max-width: 1200px;
  margin: 60px auto;
  padding: 0 20px;
}

.c-cards-verdes__track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.c-cards-verdes__card {
  border-radius: 24px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 320px;
  text-decoration: none;
}

/* Solo cuando la card tiene URL asignada se comporta como enlace */
.c-cards-verdes__card--enlazada {
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.c-cards-verdes__card--enlazada:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(11, 61, 46, 0.12);
}

.c-cards-verdes__icono {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-cards-verdes__icono img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.c-cards-verdes__titulo {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 26px;
  line-height: 1.2;
  color: var(--svf-primario, #004628);
  margin: 0;
  text-decoration: none;
}

.c-cards-verdes__texto {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: var(--svf-primario-oscuro, #1a3a2a);
  margin: 0;
  text-decoration: none;
}

/* Card oscura (tercera card, "Dona y cambia vidas") */
.c-cards-verdes__card--oscuro .c-cards-verdes__titulo,
.c-cards-verdes__card--oscuro .c-cards-verdes__icono {
  color: #ffffff;
}

.c-cards-verdes__card--oscuro .c-cards-verdes__titulo {
  color: #ffffff;
}

.c-cards-verdes__card--oscuro .c-cards-verdes__texto {
  color: var(--svf-tinte-borde, #d9e6de);
}

.c-cards-verdes__card--oscuro .c-cards-verdes__icono img {
  filter: brightness(0) invert(1);
}

/* Flechas de navegacion: ocultas en desktop, visibles solo en carrusel movil */
.c-cards-verdes__nav {
  display: none;
}

/* ==========================================================================
   Movil: carrusel de 1 card con flechas prev/next
   ========================================================================== */
@media (max-width: 767px) {
  .c-cards-verdes {
    margin: 40px auto;
    padding: 0 16px;
  }

  .c-cards-verdes__track {
    display: flex;
    overflow: hidden;
    scroll-behavior: smooth;
    gap: 0;
  }

  .c-cards-verdes__card {
    flex: 0 0 100%;
    min-width: 100%;
    min-height: 280px;
    padding: 32px 24px;
  }

  .c-cards-verdes__titulo {
    font-size: 22px;
  }

  .c-cards-verdes__texto {
    font-size: 14px;
  }

  .c-cards-verdes__nav {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
  }

  .c-cards-verdes__arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: var(--svf-tinte, #eef1ec);
    color: var(--svf-gris-marca, #9aa39c);
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .c-cards-verdes__arrow--next {
    background-color: var(--svf-primario, #004628);
    color: #ffffff;
  }

  .c-cards-verdes__arrow:disabled {
    background-color: var(--svf-tinte, #eef1ec);
    color: var(--svf-tinte-borde, #c3c9c2);
    cursor: default;
  }
}