/* =============================================
   COMUNIDADES DEL Comunidades
   Prefijo cc- en todas las clases para evitar
   colisiones con estilos.css o Bootstrap.
   ============================================= */

/* ─────────────────────────────────────────────
   HERO COLLAGE
   Nota: la sección usa .cc-collage (no termina
   en "-hero") para evitar el selector global
   [class$="-hero"] que define el fondo en
   estilos.css y sobreescribiría height.
───────────────────────────────────────────── */
.cc-collage {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

/* ── DESKTOP  ≥992px
   c1  c2  c3
   tt  tt  c4
   c5  c6  c7
*/
.cc-collage-grid {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:
    "c1 c2 c3"
    "tt tt c4"
    "c5 c6 c7";
  gap: 0;
}

/* Celdas de imagen */
.cc-cel {
  overflow: hidden;
  position: relative;
  padding: 0;
}
.cc-cel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cc-c1 { grid-area: c1; }
.cc-c2 { grid-area: c2; }
.cc-c3 { grid-area: c3; }
.cc-c4 { grid-area: c4; }
.cc-c5 { grid-area: c5; }
.cc-c6 { grid-area: c6; }
.cc-c7 { grid-area: c7; }

/* Celda del título */
.cc-titulo-cel {
  grid-area: tt;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ECF1F8;
  padding: 0;
}

.cc-titulo-cel h1 {
  display: inline-block;
  background: #F7AD3E;
  padding: clamp(12px, 2vw, 24px) clamp(32px, 5vw, 98px);
  border: 4px solid #142139;
  box-shadow: 8px 8px 0 #142139;
  border-radius: 0 24px 0 24px;
  font-size: clamp(26px, 4.5vw, 80px);
  font-weight: 700;
  color: #142139;
  text-align: center;
  line-height: 1.2;
  margin: 0;
  font-family: 'Switzer', sans-serif;
  text-shadow: none;
}

/* ─────────────────────────────────────────────
   LISTA DE COMUNIDADES
   Usa container-xl igual que index.html
   para que los márgenes sean idénticos al
   resto del sitio (.section-with-margins →
   container-xl).
   El padding vertical lo controlamos aquí;
   el horizontal lo hereda Bootstrap de
   container-xl.
───────────────────────────────────────────── */
.cc-lista {
  background: #f8f9fa;
  padding-top:    clamp(56px, 8vw, 112px);
  padding-bottom: clamp(56px, 8vw, 112px);
}

.cc-item {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: clamp(60px, 8vw, 96px);
}
.cc-item:last-child { margin-bottom: 0; }

/* Tarjeta imagen */
.cc-card {
  flex: 0 0 clamp(260px, 34vw, 488px);
  height: clamp(200px, 24vw, 368px);
  border-radius: 10px;
  overflow: visible;
  background: #092C44;
  border: 3px solid #092C44;
  box-shadow: 8px 8px 0 #092C44;
  position: relative;
}
.cc-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* Texto de la comunidad */
.cc-info {
  flex: 1;
  padding-left: clamp(28px, 6vw, 114px);
}

.cc-nombre {
  font-family: 'Switzer', sans-serif;
  font-size: clamp(20px, 2.8vw, 40px);
  font-weight: 600;
  color: #142139;
  margin: 0 0 clamp(16px, 2.5vw, 32px) 0;
  line-height: 1.2;
}

.cc-texto {
  display: block;
  font-family: 'Switzer', sans-serif;
  font-size: clamp(15px, 1.6vw, 24px);
  color: #2D3139;
  line-height: 1.5;
  margin: 0;
  text-align: left;
  max-width: 65ch;
}

/* Botón "Ver más" anclado en la esquina inferior-derecha de .cc-card */
.cc-btn {
  display: inline-flex;
  align-items: center;
  gap: clamp(8px, 1vw, 16px);
  background: #F7AD3E;
  color: #142139;
  padding: clamp(6px, 0.6vw, 8px) clamp(20px, 2.5vw, 40px);
  border: 3px solid #092C44;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(15px, 1.8vw, 28px);
  box-shadow: 8px 8px 0 #092C44;
  position: absolute;
  bottom: clamp(-12px, -1.2vw, -16px);
  right:  clamp(-16px, -2vw,  -32px);
  z-index: 10;
  white-space: nowrap;
  transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.cc-btn:hover {
  background: #e69e36;
  color: #142139;
  transform: translateY(-2px);
  box-shadow: 7px 7px 0 #092C44;
  text-decoration: none;
}

/* Animación de entrada */
@keyframes cc-fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cc-item               { animation: cc-fadeUp 0.6s ease-out both; }
.cc-item:nth-child(2)  { animation-delay: 0.10s; }
.cc-item:nth-child(3)  { animation-delay: 0.20s; }
.cc-item:nth-child(4)  { animation-delay: 0.30s; }
.cc-item:nth-child(5)  { animation-delay: 0.40s; }
.cc-item:nth-child(6)  { animation-delay: 0.50s; }


/* ══════════════════════════════════════════════
   RESPONSIVE — COLLAGE
   ══════════════════════════════════════════════

   DESKTOP ≥992px — altura fija 100vh, 3×3.

   TABLET + MÓVIL <992px:
   Las imágenes NO tienen altura fija; usan
   aspect-ratio para mostrarse completas sin
   recortes. Se muestran solo 4 imágenes:

     [ c1 | c2 ]
     [ TÍTULO  ]
     [ c3 | c4 ]

   c5, c6, c7 se ocultan para que el collage
   no sea demasiado largo en pantallas pequeñas.
══════════════════════════════════════════════ */

@media (max-width: 991.98px) {
  /* Altura auto — crece según el contenido */
  .cc-collage {
    height: auto;
  }

  .cc-collage-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "c1 c2"
      "tt tt"
      "c3 c4";
    height: auto;
  }

  /* Las celdas de imagen usan aspect-ratio en lugar de
     altura fija para que la imagen se vea completa */
  .cc-cel {
    aspect-ratio: 4 / 3;
    min-height: unset;
  }

  /* Título: altura automática con padding generoso */
  .cc-titulo-cel {
    min-height: unset;
    padding: clamp(24px, 5vw, 48px) clamp(16px, 5vw, 40px);
    justify-content: center;
  }

  .cc-titulo-cel h1 {
    font-size: clamp(20px, 5vw, 40px);
  }

  /* Ocultar las imágenes que sobran */
  .cc-c5, .cc-c6, .cc-c7 { display: none; }
  /* c3 y c4 reasignadas como imágenes de la fila inferior */
  .cc-c3 { grid-area: c3; }
  .cc-c4 { grid-area: c4; }
}


/* ══════════════════════════════════════════════
   RESPONSIVE — LISTA
══════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  .cc-item {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: clamp(56px, 10vw, 80px);
  }
  .cc-card {
    flex: none;
    width: 100%;
    height: clamp(200px, 45vw, 340px);
    box-shadow: 4px 4px 0 #092C44;
  }
  .cc-btn {
    box-shadow: 4px 4px 0 #092C44;
    bottom: -12px;
    right:  -12px;
    font-size: clamp(13px, 2.5vw, 20px);
    padding: 6px 18px;
  }
  .cc-info {
    padding-left: 0;
    padding-top: clamp(28px, 5vw, 48px);
  }
  .cc-texto { max-width: 100%; }
}

@media (max-width: 575.98px) {
  .cc-nombre { text-align: center; }
  .cc-texto  { text-align: center; }
  .cc-info   { display: flex; flex-direction: column; align-items: center; }
}