/* --- Base --- */
*{ box-sizing:border-box; }
html, body{ height:100%; }
body{
  margin:0;
  background: url('images/background.jpg') center/cover no-repeat;
  color:#fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

/* --- HERO: título enorme pegado arriba --- */
.site-header{ margin:0; padding:0; }
.site-header h1{
  margin:0;
  padding-top: clamp(12px, 2vw, 24px);
  padding-bottom: clamp(8px, 1vw, 16px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: .78;
  text-align: center;
  font-size: clamp(60px, 8vw, 90px);
}

/* --- Contenedor centrado (estilo referencia) --- */
.wrap{
  width: min(1200px, 100%);
  margin-inline: auto;
  padding: clamp(8px, 2vw, 24px);
}

/* --- Grid de portadas --- */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-1 * ((100vw - 100%) / 2));
}

@media (max-width: 800px) {
  .grid {
    grid-template-columns: 1fr;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-1 * ((100vw - 100%) / 2));
  }
}

/* Tarjetas con borde sutil y sombra */
.card{
  display:block;
  position:relative;
  overflow:hidden;
  border-radius: 5px;
  outline: 1px solid rgba(255,255,255,.06);
  box-shadow: 0 8px 22px rgba(0,0,0,.45), 0 1px 0 rgba(255,255,255,.04) inset;
  transform: translateZ(0);
  transition: transform .12s ease, box-shadow .12s ease, outline-color .12s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.06) inset;
  outline-color: rgba(255,255,255,.1);
}
.card img{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

/* Enlaces blancos y sin subrayado en todos los estados */
a,
a:visited,
a:hover,
a:active {
  color: #fff;
  text-decoration: none;
}

/* Si tienes enlaces dentro del título, asegura herencia correcta */
.site-header h1 a {
  color: inherit;       /* usa el color del H1 (blanco) */
  text-decoration: none;
}

/* Accesibilidad: mantiene indicador de foco con teclado (opcional pero recomendado) */
a:focus-visible {
  outline: 2px solid #888;
  outline-offset: 2px;
}

/* Enlaces del header: blancos y sin subrayado, azul al hover */
.site-header a {
  color: #fff;
  text-decoration: none;
  transition: color .15s ease;
}
.site-header a:visited {
  color: #fff;
}
.site-header a:is(:hover, :focus-visible) {
  color: #1e40ff; /* azul: cambia el hex si quieres otro tono */
}