/* Página temporal «En construcción» (Penpot: página En construcción) */
.construccion {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 96px 48px;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

/* Manchas de color del fondo: lila arriba a la izquierda, rosa abajo a la derecha */
.construccion::before,
.construccion::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.construccion::before {
  top: -320px;
  left: -300px;
  width: 840px;
  height: 840px;
  background: radial-gradient(closest-side, rgb(181 140 255 / 0.35), transparent);
}

.construccion::after {
  right: -300px;
  bottom: -320px;
  width: 800px;
  height: 800px;
  background: radial-gradient(closest-side, rgb(255 79 154 / 0.22), transparent);
}

[data-tema="oscuro"] .construccion::before {
  background: radial-gradient(closest-side, rgb(181 140 255 / 0.28), transparent);
}

/* Botón de tema arriba a la derecha */
.construccion__tema {
  position: absolute;
  top: 28px;
  right: 32px;
}

.construccion__contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 720px;
}

.construccion__icono {
  display: block;
  width: 96px;
  height: 96px;
  filter: drop-shadow(0 12px 24px rgb(255 79 154 / 0.3));
}

.construccion__etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgb(255 79 154 / 0.12);
  color: var(--color-rosa);
  font-size: 13px;
  font-weight: 600;
}

[data-tema="oscuro"] .construccion__etiqueta {
  background: rgb(255 79 154 / 0.18);
}

.construccion__etiqueta::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.construccion h1 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.15;
}

.construccion__texto {
  max-width: 520px;
  margin: 0;
  font-size: 19px;
  line-height: 1.5;
  color: var(--color-texto-suave);
}

.construccion__copyright {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  margin: 0;
  font-size: 13px;
  color: var(--color-texto-suave);
}

/* Móvil */
@media (max-width: 767px) {
  .construccion {
    padding: 80px 24px;
  }

  .construccion::before {
    top: -180px;
    left: -200px;
    width: 480px;
    height: 480px;
  }

  .construccion::after {
    right: -190px;
    bottom: -180px;
    width: 460px;
    height: 460px;
  }

  .construccion__tema {
    top: 16px;
    right: 16px;
  }

  .construccion__contenido {
    gap: 20px;
  }

  .construccion__icono {
    width: 80px;
    height: 80px;
  }

  .construccion h1 {
    font-size: 30px;
  }

  .construccion__texto {
    font-size: 16px;
  }

  .construccion__copyright {
    bottom: 32px;
  }
}