/* /astromambo/css/en-construccion.css
   Estilos de la pantalla "en construccion". Una sola hoja para las tres
   pantallas que todavia no existen, porque son la misma pagina con otro texto. */

.ec-caja {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    padding: 48px 28px 56px;
}

/* El mandala girando. Es el unico adorno y esta a proposito: sin nada que mire,
   una pagina que dice "todavia no" se parece demasiado a una pagina rota. */
.ec-mandala {
    width: 132px;
    height: 132px;
    margin: 0 auto 28px;
    border-radius: 50%;
    border: 2px solid var(--border);
    position: relative;
    background:
        radial-gradient(circle at center, rgba(102,126,234,0.10) 0%, transparent 62%);
    animation: ec-girar 44s linear infinite;
}

/* Los doce radios son las doce casas. No es un spinner generico. */
.ec-mandala::before,
.ec-mandala::after {
    content: '';
    position: absolute;
    inset: 16px;
    border-radius: 50%;
    border: 1px solid var(--border);
}
.ec-mandala::after { inset: 34px; border-style: dashed; }

.ec-radios {
    position: absolute;
    inset: 0;
}
.ec-radios span {
    position: absolute;
    left: 50%;
    top: 4px;
    width: 1px;
    height: 24px;
    background: var(--primary);
    opacity: 0.45;
    transform-origin: 50% 62px;
}

@keyframes ec-girar { to { transform: rotate(360deg); } }

/* Quien prefiere no ver cosas moviendose, no las ve. */
@media (prefers-reduced-motion: reduce) {
    .ec-mandala { animation: none; }
}

.ec-caja h1 {
    font-family: 'Playfair Display', serif;
    color: var(--dark);
    font-size: 2em;
    margin-bottom: 6px;
}

.ec-estado {
    display: inline-block;
    margin-bottom: 22px;
    padding: 5px 15px;
    border-radius: 999px;
    background: rgba(102, 126, 234, 0.10);
    color: var(--primary);
    font-size: 0.82em;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ec-caja p {
    color: var(--text-light);
    line-height: 1.7;
    margin-bottom: 16px;
}

.ec-que {
    text-align: left;
    background: var(--light);
    border: 1px solid var(--border);
    border-left: 3px solid var(--secondary);
    border-radius: 10px;
    padding: 18px 22px;
    margin: 26px 0 30px;
    color: var(--text);
    line-height: 1.7;
}

.ec-que strong { color: var(--dark); }

.ec-volver {
    display: inline-block;
    padding: 12px 26px;
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.25s ease, transform 0.25s ease;
}

.ec-volver:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

@media (max-width: 600px) {
    .ec-caja { padding: 32px 18px 40px; }
    .ec-caja h1 { font-size: 1.5em; }
    .ec-mandala { width: 104px; height: 104px; }
    .ec-radios span { transform-origin: 50% 48px; height: 18px; }
}