/* ============================== */
/*   Sección COLABORACIONES       */
/* ============================== */

#colaboraciones {
  background-color: #f3f3f3;
  padding: 0;
  overflow: hidden;
}

.colab-wrapper {
  width: 100%;
  height: 100%;
  padding: 80px 60px;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ===== TITULO ===== */
.colab-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 5.8vw;
  font-weight: 900;
  color: #557948;
  line-height: 1;
  margin-bottom: 20px;

  text-shadow:
      0 6px 18px rgba(0,0,0,0.18),
      0 0 22px rgba(255, 181, 218, 0.28),
      0 0 45px rgba(255, 181, 218, 0.18);

  transition: transform 0.25s ease;
}

.colab-title:hover {
  transform: scale(1.02);
}


/* ===== SUBTITULO ===== */
.colab-sub {
  max-width: 800px;          /* ← más ancho para que respire */
  font-size: 1.25rem;        /* ← más grande */
  margin: 0 auto 50px;       /* ← centrado perfect */
  text-align: center;        /* ← centrado */
  color: #444;
  line-height: 1.7;
}


/* ===== GRID DE TEXTO ===== */
.colab-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  z-index: 2;
  position: relative;
}

.colab-grid h3 {
  font-size: 1.25rem;        /* ← un poquito más grande */
  font-weight: 600;
  margin-bottom: 10px;
}

.colab-grid p {
  font-size: 1.12rem;        /* ← más grande */
  line-height: 1.75;
  color: #333;
  margin-bottom: 18px;
}


/* ===== FOTO ABAJO DERECHA ===== */
.colab-photo {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 40%;
  height: 60%;
  background-image: url("../images/colab.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
  z-index: 1;
  opacity: 1;
}


/* ================================= */
/*     RESPONSIVE TABLET / MOBILE    */
/* ================================= */
@media (max-width: 900px) {

  .colab-wrapper {
    padding: 70px 30px 30px;      /* un poco menos de aire arriba y a los lados */
  }

  .colab-grid {
    grid-template-columns: 1fr;   /* una columna en tablet/celu */
    gap: 30px;
  }

  .colab-photo {
    width: 80%;
    height: 42%;
    opacity: 0.9;
  }

  /* Título más compacto para 600–900px */
  .colab-title {
    font-size: 7vw;               /* antes 12vw → muchísimo más chico */
    line-height: 1.05;
    text-align: center;
    margin-top: 0;
    margin-bottom: 14px;
  }

  .colab-sub {
    text-align: center;
    margin: 0 auto 28px;
    font-size: 1rem;
    line-height: 1.5;
  }
}


/* ================================= */
/*   Ajuste fuerte para celus chicos */
/* ================================= */
@media (max-width: 600px) {

  /* que la sección pueda crecer en alto */
  #colaboraciones.snap-section {
    height: auto;           /* deja de estar clavada a 100vh */
    min-height: 100vh;      /* pero al menos una pantalla */
    align-items: flex-start;
  }

  /* y que el contenido pueda scrollear si hace falta */
  #colaboraciones {
    overflow-y: auto;
  }

  .colab-wrapper {
    padding: 30px 12px 24px;  /* menos padding lateral y abajo */
  }

  /* Título mucho más chico y compacto */
  .colab-title {
    font-size: 8vw;
    margin-top: -8px;      /* sube el título más arriba */
    margin-bottom: 8px;
    text-align: center;
  }

  /* Subtítulo más compacto */
  .colab-sub {
    max-width: 100%;
    font-size: 0.9rem;
    line-height: 1.45;
    margin: 0 auto 20px;
  }

  /* Menos espacio entre bloques de texto */
  .colab-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .colab-grid h3 {
    font-size: 0.95rem;
    margin-bottom: 4px;
  }

  .colab-grid p {
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 8px;
  }

  /* Foto más chica para no robar tanto alto */
  .colab-photo {
    width: 140%;
    height: 45%;
    opacity: 0.75;
  }
}