:root {
  --overlay: rgba(0, 0, 0, 0.25);
  --overlay-hover: rgba(0, 0, 0, 0.15);
  --accent: #e2131a;
  --speed: 260ms;
}

/* Reset básico */
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #0d0f12;
  overflow: hidden;
}

/* GRID PRINCIPAL */
.grid {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  position: relative;
}

/* CUADRO / TILE */
.tile {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  cursor: pointer;

  /* FRAME */
  border: 3px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    0 10px 30px rgba(0, 0, 0, 0.35);
}

/* FRAME hover */
.tile:hover {
  border-color: rgba(226, 19, 26, 0.55);
}

/* IMAGEN BASE (oscura + blur) */
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  filter: blur(2.8px) brightness(0.55) contrast(1.05);
  transform: scale(1.03);

  transition:
    filter var(--speed) ease,
    transform var(--speed) ease;
}

/* IMAGEN HOVER (nítida) */
.tile:hover img {
  filter: blur(0px) brightness(0.95) contrast(1.05);
  transform: scale(1.06);
}

/* OVERLAY (tinte oscuro) */
.tile .overlay {
  position: absolute;
  inset: 0;

  display: grid;
  place-content: center;
  text-align: center;
  padding: 24px;

  background: var(--overlay);
  color: white;

  transition: background var(--speed) ease;
}

.tile:hover .overlay {
  background: var(--overlay-hover);
}

/* TÍTULOS */
.tile h2 {
  margin: 0;
  font-size: clamp(1.4rem, 2.6vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 0.3px;
  text-shadow: 0 8px 22px rgba(0, 0, 0, 0.7);
}

.center-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: clamp(140px, 14vw, 260px);
  aspect-ratio: 1 / 1;

  /* Fondo tenue circular */
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);

  border-radius: 50%;
  padding: 14px;

  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);

  display: grid;
  place-items: center;
  z-index: 10;

  pointer-events: none; /* sin hover, sin click */
}



.center-logo img {
  width: 82%;
  height: 82%;
  object-fit: contain;
}

/* MOBILE — same 2x2 layout with center logo overlapping */
@media (max-width: 600px) {
  body {
    overflow: hidden; /* everything fits in one screen */
  }

  .grid {
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0px;
    padding: 0px;
    position: relative;
  }

  /* Center logo floating above tiles */
  .center-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 120px;
    aspect-ratio: 1 / 1;

    z-index: 30;
  }

  /* Tiles styling for mobile */
  .tile {
    border-radius: 0px;
    border-width: 2.5px;
  }

  .tile h2 {
    font-size: 1.05rem;
    line-height: 1.1;
    padding: 0 6px;
  }

  /* Images tuned for small screens */
  .tile img {
    filter: blur(1.8px) brightness(0.52) contrast(1.05);
    transform: scale(1.02);
  }

  /* No hover assumptions on mobile */
  .tile:hover img {
    filter: blur(1.8px) brightness(0.52) contrast(1.05);
    transform: scale(1.02);
  }

  .tile .overlay {
    background: rgba(0, 0, 0, 0.35);
  }
}