/* ==============================================
   ACTIVIDADES — CSS
   Usa --page-margin de estilos.css: clamp(20px, 6vw, 120px)
   hero-title-overlay y page-title vienen de estilos.css
   ============================================== */

/* ── Contenedor con márgenes estándar ── */
.acti-container {
  width: 100%;
  max-width: min(1440px, 100%);
  margin-left: auto;
  margin-right: auto;
  padding-left:  var(--page-margin, clamp(20px, 6vw, 120px));
  padding-right: var(--page-margin, clamp(20px, 6vw, 120px));
  box-sizing: border-box;
}

/* ==============================================
   HERO — patrón estándar idéntico a otras páginas
   ============================================== */
.actividades-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding-bottom: clamp(40px, 8vw, 160px);
  padding-left: var(--page-margin, clamp(20px, 6vw, 120px));
}

.actividades-hero .hero-background {
  position: absolute;
  inset: 0;
  background-image: url('/assets/Imagenes de alta resolucion/actividades-portada.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

.actividades-hero .hero-background::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  z-index: 2;
}

/* ==============================================
   CONTENIDO PRINCIPAL
   overflow-x:hidden contiene el zigzag translateX
   ============================================== */
.actividades-main {
  background-color: #EBEBF0;
  padding: clamp(48px, 6vw, 80px) 0 clamp(64px, 8vw, 120px);
  overflow-x: hidden;
}

/* ==============================================
   TARJETAS DE ACTIVIDAD — zigzag izq/der
   Fiel al original: inset shadow + offset shadow color
   ============================================== */
.actividad-card {
  margin-bottom: clamp(48px, 6vw, 96px);
  transition: transform 0.6s ease;
}

.actividad-card:last-child { margin-bottom: 0; }

/* Desplazamiento zigzag */
.actividad-card.align-left  { transform: translateX(-8%); }
.actividad-card.align-right { transform: translateX(8%); }

/* Inner — borde + sombra inset + sombra offset de color */
.actividad-card-inner {
  border-radius: 16px;
  overflow: hidden;
  min-height: clamp(360px, 38vw, 520px);
  border: 4px solid #141414;
  background: #E0E5EB;
  transition: transform 0.6s ease, box-shadow 0.6s ease;
}

.actividad-card.align-left .actividad-card-inner {
  box-shadow:
    inset 1px 3px 0 8px #787F8C,
    8px 14px 0 var(--shadow-color),
    0 18px 28px rgba(7, 42, 64, 0.18);
}

.actividad-card.align-right .actividad-card-inner {
  box-shadow:
    inset 1px 3px 0 8px #787F8C,
    -8px 14px 0 var(--shadow-color),
    0 18px 28px rgba(7, 42, 64, 0.18);
}

/* Hover */
.actividad-card.align-left .actividad-card-inner:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 0 0 6px #142139,
    8px 18px 0 var(--shadow-color),
    0 24px 32px rgba(7, 42, 64, 0.22);
}

.actividad-card.align-right .actividad-card-inner:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 0 0 6px #142139,
    -8px 18px 0 var(--shadow-color),
    0 24px 32px rgba(7, 42, 64, 0.22);
}

/* Imagen */
.actividad-img {
  width: 100%;
  height: clamp(200px, 22vw, 340px);
  object-fit: cover;
  display: block;
}

/* Contenido — título grande + metadatos */
.actividad-content {
  padding: clamp(20px, 3vw, 32px) clamp(24px, 5vw, 80px);
  background: #E5E9EF;
  font-family: 'Switzer', sans-serif;
  font-weight: 700;
  color: #142139;
  font-size: clamp(22px, 2.8vw, 40px);
  line-height: 1.2;
}

.actividad-location {
  font-weight: 700;
  color: #142139;
  margin-bottom: 8px;
  font-size: clamp(14px, 1.4vw, 20px);
  margin-top: clamp(10px, 1.2vw, 16px);
}

.actividad-location-text {
  font-weight: 400;
  color: #142139;
}

/* ==============================================
   COLORES DE SOMBRA — 5 variantes
   ============================================== */
.actividad-card.shadow-blue  { --shadow-color: #2E4DA9; }
.actividad-card.shadow-green { --shadow-color: #2EA942; }
.actividad-card.shadow-gold  { --shadow-color: #D4C525; }
.actividad-card.shadow-red   { --shadow-color: #A9362E; }
.actividad-card.shadow-brown { --shadow-color: #8A602C; }

/* ==============================================
   RESPONSIVE — eliminar zigzag en móvil
   ============================================== */
@media (max-width: 767.98px) {
  .actividad-card.align-left,
  .actividad-card.align-right {
    transform: none !important;
  }

  .actividad-card.align-left .actividad-card-inner,
  .actividad-card.align-right .actividad-card-inner {
    box-shadow:
      inset 0 0 0 4px #787F8C,
      0 10px 0 var(--shadow-color),
      0 14px 22px rgba(7, 42, 64, 0.16);
  }

  .actividad-card.align-left .actividad-card-inner:hover,
  .actividad-card.align-right .actividad-card-inner:hover {
    box-shadow:
      inset 0 0 0 5px #142139,
      0 14px 0 var(--shadow-color),
      0 18px 28px rgba(7, 42, 64, 0.20);
  }
}