/* HackGranada · toque andaluz
   Paleta verdiblanca (bandera de Andalucía) + rojo granada en los botones. */
:root {
  --color-yellow-300: #8ee6b1;
  --color-yellow-400: #4fcf86;
  --color-yellow-500: #2bb769;
  --verde-andalucia: #0b8a3e;
}

/* Titulares con efecto glitch en verde y blanco (antes rojo y amarillo) */
.glitch::before { text-shadow: -2px 0 var(--verde-andalucia) !important; }
.glitch::after  { text-shadow: -2px 0 #ffffff !important; }

/* Franja fina verdiblanca (bandera de Andalucía) bajo la barra de navegación */
nav.fixed::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 6px;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--verde-andalucia) 0 33.3%, #fff 33.3% 66.6%, var(--verde-andalucia) 66.6%);
}

/* Portada: la Alhambra de noche. Velo más ligero a la derecha para que luzca la foto. */
section.min-h-screen.flex.items-center .bg-black\/70 {
  background: linear-gradient(90deg, rgb(0 0 0 / .78) 0%, rgb(0 0 0 / .55) 55%, rgb(0 0 0 / .35) 100%);
}
section.min-h-screen.flex.items-center img.object-cover {
  object-position: 50% 40%;
}
/* Aire entre las tarjetas de la portada y "¿Qué es HackGranada?" (en móvil quedaban pegadas) */
section.min-h-screen.flex.items-center {
  padding-bottom: 4rem;
}

/* Móviles pequeños (≤ 400px): que la portada no se salga por la derecha */
@media (max-width: 400px) {
  section.min-h-screen.flex.items-center > .max-w-7xl { width: 100%; min-width: 0; }
  section.min-h-screen.flex.items-center .grid > * { min-width: 0; }
  section.min-h-screen.flex.items-center .grid.grid-cols-4 { gap: .4rem; }
  section.min-h-screen.flex.items-center .grid.grid-cols-4 > div { padding: .65rem .15rem; }
  section.min-h-screen.flex.items-center .grid.grid-cols-4 .text-3xl { font-size: 1.45rem; line-height: 1.9rem; }
  section.min-h-screen.flex.items-center .grid.grid-cols-4 .text-sm { font-size: .68rem; }
  section.min-h-screen.flex.items-center .grid.grid-cols-2 { gap: .6rem; }
  section.min-h-screen.flex.items-center .grid.grid-cols-2 > div { padding: 1rem .8rem; overflow-wrap: anywhere; hyphens: auto; }
}

/* Lacería nazarí muy sutil de fondo en las secciones claras */
#about, #speakers, #collaboration {
  background-image: url(images/alicatado-bg.svg);
  background-size: 60px 60px;
}