/* ============================================================
   construccion.css — Estilos específicos de construccion.html
   ============================================================ */

/* Página en construcción */
.construccion-hero {
  min-height: calc(100vh - 112px);
  background: linear-gradient(140deg, var(--azul-profundo) 0%, #002D8C 55%, #0039A6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 6%;
  position: relative;
  overflow: hidden;
}

/* Círculos decorativos de fondo */
.construccion-hero::before,
.construccion-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}
.construccion-hero::before {
  width: 600px;
  height: 600px;
  top: -160px;
  right: -140px;
}
.construccion-hero::after {
  width: 420px;
  height: 420px;
  bottom: -120px;
  left: -100px;
}

.construccion-inner {
  max-width: 780px;
  text-align: center;
  position: relative;
  z-index: 2;
  animation: fadeIn 0.7s ease both;
}

/* Ícono animado */
.construccion-icon {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: grid;
  place-items: center;
  margin: 0 auto 32px;
  font-size: 52px;
  animation: pulse 2.8s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1);     box-shadow: 0 0 0 0   rgba(255,255,255,0.15); }
  50%       { transform: scale(1.05); box-shadow: 0 0 0 18px rgba(255,255,255,0);    }
}

/* Badge Platino */
.construccion-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 168, 120, 0.2);
  border: 1px solid rgba(0, 168, 120, 0.45);
  color: #7fffd4;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: 999px;
  margin-bottom: 28px;
}

.construccion-badge img {
  height: 20px;
  width: auto;
  object-fit: contain;
}

.construccion-inner h1 {
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.08;
  color: #fff;
  letter-spacing: -1.5px;
  margin-bottom: 20px;
}

.construccion-inner h1 span { color: #7fffd4; }

.construccion-inner p {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.82);
  max-width: 580px;
  margin: 0 auto 40px;
  line-height: 1.65;
}

/* Tarjetas de estado */
.status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 44px;
}

.status-card {
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  padding: 22px 16px;
  backdrop-filter: blur(8px);
}

.status-card .status-icon { font-size: 28px; margin-bottom: 10px; }
.status-card h4 { color: #fff; font-size: 15px; margin-bottom: 6px; }
.status-card p  { color: rgba(255,255,255,0.65); font-size: 13px; line-height: 1.5; }

/* Barra de progreso */
.progress-wrap {
  background: rgba(255,255,255,0.12);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}

.progress-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--verde), #7fffd4);
  animation: progressLoad 1.8s ease forwards;
  width: 0;
}

@keyframes progressLoad {
  to { width: 75%; }
}

.progress-label {
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  margin-bottom: 40px;
  text-align: right;
}

/* Botones */
.construccion-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Divisor */
.construccion-divider {
  width: 60px;
  height: 3px;
  background: var(--verde);
  border-radius: 99px;
  margin: 0 auto 28px;
}

/* Footer adaptado */
.footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }

/* Contenedor Centrado */
.contenedor-centrado {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
}