/* ═══ COMUNIDAD: crema, leyenda de tres símbolos + mosaico solo de fotos ═══ */
.comunidad { background: var(--crema); }

.comunidad .titulo { color: var(--marino); }
.comunidad .acento-mano { color: var(--azul); }

.comunidad__intro {
  font-size: var(--paso-1); font-weight: 300;
  max-width: 46ch;
  margin-block: var(--esp-2) var(--esp-3);
}

/* ── Leyenda: las tres cosas que queremos ver ──
   Antes eran tarjetas de color metidas entre las fotos del mosaico. Ahora
   salen a una fila propia, sin caja ni fondo, apoyadas sobre la crema.
   Dos cosas la vuelven un bloque compuesto y no tres dibujos sueltos:
   el aire de arriba y de abajo (esp-4, más de lo que se separan entre ellas)
   y que son tres columnas iguales de punta a punta del contenedor, o sea que
   cada símbolo cae centrado justo encima de una de las tres fotos verticales
   del mosaico. La leyenda y su ejemplo comparten eje. */
.comunidad__invitaciones {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-2);
  margin-block: var(--esp-4);
}
.comunidad__invitacion {
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end;
  gap: var(--esp-1);
  text-align: center;
}
/* Los tres símbolos vienen con proporciones distintas, así que se igualan por
   ALTO y no por ancho: midiéndolos por ancho, las palmeras se comen al sol. */
.comunidad__invitacion img { height: clamp(60px, 7vw, 104px); width: auto; }
/* Los colores de las tarjetas viejas sobreviven acá, en el rótulo: cada uno
   se inclina distinto porque están escritos a mano, no compuestos. */
.comunidad__invitacion .mano {
  display: inline-block;
  font-size: var(--paso-3); line-height: 1;
}
.comunidad__invitacion:nth-child(1) .mano { color: var(--coral);  transform: rotate(-2deg); }
.comunidad__invitacion:nth-child(2) .mano { color: var(--azul);   transform: rotate(1.5deg); }
.comunidad__invitacion:nth-child(3) .mano { color: var(--marino); transform: rotate(-1deg); }

/* ── Mosaico de cinco fotos sobre 12 columnas ──
   Arriba dos apaisadas de 6 columnas y abajo tres verticales de 4: 6 + 6 y
   4 + 4 + 4, las dos filas cierran justas y nunca queda un hueco suelto.
   Las proporciones son la misma dada vuelta (5/4 arriba, 4/5 abajo), así la
   diferencia de tamaño se lee como decisión y no como sobra de una grilla
   pareja. */
.comunidad__grilla {
  list-style: none; padding: 0;
  display: grid; gap: var(--esp-2);
  grid-template-columns: repeat(12, 1fr);
  align-items: stretch;
}
.comunidad__grilla > li:nth-child(-n + 2) { grid-column: span 6; aspect-ratio: 5 / 4; }
.comunidad__grilla > li:nth-child(n + 3)  { grid-column: span 4; aspect-ratio: 4 / 5; }

/* Un solo gesto al pasar el mouse, igual para las cinco: en un mosaico, que
   una celda reaccione y la de al lado no se siente como un error. */
.comunidad__grilla > li { transition: transform var(--dur-media) var(--curva-salida); }
.comunidad__grilla > li:hover { transform: translateY(-5px) rotate(-1deg); }

.comunidad__foto img { width: 100%; height: 100%; object-fit: cover; }

/* Recortes a mano, porque el centro de la foto casi nunca es el sujeto: al de
   la toalla hay que dejarle el sombrero (recortando al medio se lo corta), la
   de las escaleras tiene a la clienta corrida a la derecha y si no la seguimos
   queda una tarjeta de puros tablones, y a las dos de cuerpo entero conviene
   bajarles el encuadre para no perderles los pies contra un fondo vacío. */
.comunidad__grilla > li:nth-child(2) img { object-position: 50% 12%; }
.comunidad__grilla > li:nth-child(3) img { object-position: 62% 50%; }
.comunidad__grilla > li:nth-child(4) img { object-position: 50% 85%; }
.comunidad__grilla > li:nth-child(5) img { object-position: 50% 75%; }

.comunidad__accion { margin-top: var(--esp-3); display: flex; }

@media (max-width: 860px) {
  /* Cinco fotos en dos columnas: la primera se estira a lo ancho como apertura
     y las otras cuatro caen de a pares. 1 + 2 + 2, otra vez sin huecos.
     Tres por fila en un teléfono dejaría cada foto en poco más de 100 px de
     ancho: no se le vería la cara a nadie ni el diseño de ninguna prenda.
     La apertura conserva su 5/4 del escritorio, así el recorte que elegimos
     para esa foto es el mismo en todos los anchos. */
  .comunidad__grilla { grid-template-columns: repeat(2, 1fr); }
  .comunidad__grilla > li:nth-child(-n + 2),
  .comunidad__grilla > li:nth-child(n + 3) { grid-column: span 1; aspect-ratio: 4 / 5; }
  /* Misma especificidad que la línea de arriba y va después, así gana sin !important */
  .comunidad__grilla > li:nth-child(1) { grid-column: span 2; aspect-ratio: 5 / 4; }

  /* Los tres símbolos a lo ancho de un teléfono quedan apretados y el rótulo
     manuscrito se parte en dos líneas. Pasan a dos columnas y el tercero se
     centra abajo, que es justo donde cae el remate: "tu bandera". */
  .comunidad__invitaciones {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--esp-3) var(--esp-2);
    max-width: 22rem;
  }
  .comunidad__invitacion:nth-child(3) { grid-column: 1 / -1; }

  .comunidad__accion .boton { width: 100%; justify-content: center; }
}