/* La "sala" de Churris World: adentro de la casa del estudio, pero con el estilo del juego
   (cielo, madera, Baloo). El encabezado y el pie siguen siendo los de Mingoia Games. */
.churris {
  --cielo: #8fd3f4;
  --pasto: #7cc15a;
  --madera: #b8733a;
  --madera-oscura: #6e3f1c;
  --crema-juego: #fff4dc;
  --tinta: #3a2a1a;
  font-family: "Baloo 2", system-ui, sans-serif;
  color: var(--tinta);
  background: var(--crema-juego);
}
.churris h1, .churris h2, .churris h3 { font-family: "Baloo 2", system-ui, sans-serif; letter-spacing: 0; }
.churris h2 { font-size: clamp(1.8rem, 5vw, 2.6rem); color: var(--madera-oscura); }
.churris h3 { color: var(--madera-oscura); font-size: 1.35rem; margin-bottom: .2em; }
.churris a:not(.boton) { color: #2d6fb0; }

.churris-portada {
  background: url(/assets/img/churris-fondo.jpg) center 60% / cover;
  text-align: center;
  /* Sin margen arriba: el cartel cuelga del borde, justo debajo del encabezado. */
  padding: 0 16px clamp(56px, 10vw, 110px);
  position: relative;
  overflow: hidden;
}
.churris-portada::after { content: ""; position: absolute; inset: auto 0 0; height: 80px; background: linear-gradient(transparent, var(--crema-juego)); }
/* Se hamaca desde arriba. Arranca 8 px más arriba del borde para que, al girar, la punta de las sogas
   no se despegue del techo (a 1,2° la punta de cada soga sube o baja unos 3 px). */
.churris-portada .cartel { width: min(400px, 78%); margin: -8px auto 0; filter: drop-shadow(0 10px 18px rgb(0 0 0 / .3)); animation: hamaca 5s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes hamaca { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
.churris-portada .globo {
  position: relative; z-index: 1;
  display: inline-block; margin-top: 18px;
  background: rgb(255 255 255 / .92); border-radius: 22px; padding: 14px 22px; max-width: 560px;
  font-size: 1.15rem; font-weight: 600; box-shadow: 0 8px 20px rgb(0 0 0 / .18);
}
.churris-portada .estado { background: var(--pasto); color: #fff; margin-top: 16px; font-family: "Baloo 2", sans-serif; font-size: .95rem; }

.churris .seccion { padding: clamp(44px, 7vw, 80px) 0; }
.islas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 28px; }
@media (max-width: 820px) { .islas { grid-template-columns: repeat(2, 1fr); } }
.isla { text-align: center; }
.isla img { width: 100%; transition: transform .25s ease; }
.isla:hover img { transform: translateY(-6px) scale(1.03); }
.isla p { margin: 0; font-size: 1rem; line-height: 1.4; }
.isla.pronto img { filter: saturate(.55); opacity: .8; }
.isla .etiqueta { display: inline-block; font-size: .8rem; font-weight: 700; background: var(--madera); color: #fff; border-radius: 999px; padding: 0 10px; margin-top: 4px; }

.cosas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; text-align: left; }
@media (max-width: 760px) { .cosas { grid-template-columns: 1fr; } }
.cosa { background: #fff; border-radius: 18px; padding: 20px 22px; box-shadow: 0 4px 0 #ecd9b4; }
.cosa .icono { font-size: 1.8rem; }
.cosa p { margin: .3em 0 0; font-size: 1rem; line-height: 1.5; }

.capturas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 28px; }
@media (max-width: 760px) { .capturas { grid-template-columns: 1fr; } }
.capturas img { border-radius: 16px; border: 5px solid #fff; box-shadow: 0 6px 16px rgb(0 0 0 / .15); aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }

.padres { background: #fff; border-radius: 24px; padding: clamp(24px, 4vw, 40px); box-shadow: 0 6px 0 #ecd9b4; text-align: left; }
.padres ul { margin: .6em 0 0; padding-left: 1.2em; }
.padres li { margin: .3em 0; }

.churris .lista h2 { color: var(--madera-oscura); }
.churris .formulario input[type=email] { background: #fff; color: var(--tinta); border-color: var(--madera); }
.churris .formulario input[type=email]::placeholder { color: #9a8a74; }
.churris .aviso-form { color: #7d6a52; }
.churris .gracias { color: var(--madera-oscura); }
.churris .firma { text-align: center; font-size: 1.2rem; font-weight: 700; color: var(--madera-oscura); margin-top: 36px; }