/* ============================================================
   ALOMANCIA v1 — Estilos principales
   Estética: misterio profundo · sal cristalina · tierra ancestral
   Paleta: marfil roto, ocre dorado, siena, negro profundo
   Tipografía: Cinzel Decorative + Cormorant Garamond
   ============================================================ */

/* ─── RESET SCOPED ─────────────────────────────────────────── */
#alomancia-app *,
#alomancia-app *::before,
#alomancia-app *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ─── TOKENS ────────────────────────────────────────────────── */
#alomancia-app {
    --alo-bg-deep:      #0d0906;
    --alo-bg-dark:      #140f09;
    --alo-bg-mid:       #1e1610;
    --alo-bg-surface:   #2a1e14;

    --alo-salt:         #e8dcc8;
    --alo-salt-light:   #f5efe2;
    --alo-salt-dim:     #bfb09a;

    --alo-gold:         #c8922a;
    --alo-gold-light:   #e8b84c;
    --alo-gold-dim:     #8a6018;

    --alo-siena:        #8c4a1c;
    --alo-cream:        #f2e8d5;
    --alo-parchment:    #d9c89a;

    /* tipos */
    --alo-positivo:     #c8922a;
    --alo-neutral:      #8a9eaa;
    --alo-negativo:     #7a5a8a;
    --alo-mistico:      #3aaa9e;

    /* espaciado */
    --alo-gap-sm:       0.75rem;
    --alo-gap-md:       1.25rem;
    --alo-gap-lg:       2rem;
    --alo-gap-xl:       3rem;

    --alo-radius:       12px;
    --alo-radius-lg:    20px;

    font-family: 'Cormorant Garamond', Georgia, serif;
    color: var(--alo-salt);
    background: var(--alo-bg-deep);
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 600px;
}

/* ─── UTILITY ───────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ─── PANTALLAS ─────────────────────────────────────────────── */
.alo-screen {
    position: relative;
    width: 100%;
    min-height: 560px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--alo-gap-lg) var(--alo-gap-md);
    gap: var(--alo-gap-md);
    overflow: hidden;
}

/* ─── FONDO ─────────────────────────────────────────────────── */
.alo-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(139,74,28,0.12) 0%, transparent 55%),
                radial-gradient(ellipse at 75% 80%, rgba(200,146,42,0.08) 0%, transparent 45%),
                var(--alo-bg-deep);
    pointer-events: none;
}

.alo-bg--dark {
    background: radial-gradient(ellipse at 50% 40%, rgba(40,30,20,0.8) 0%, var(--alo-bg-deep) 100%);
}

.alo-grain-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.6;
}

/* ─── SÍMBOLO SIGIL ──────────────────────────────────────────── */
.alo-sigil {
    position: relative;
    z-index: 2;
    width: 140px;
    height: 140px;
    color: var(--alo-gold);
    animation: alo-sigil-rotate 90s linear infinite;
    filter: drop-shadow(0 0 12px rgba(200,146,42,0.3));
}

.alo-sigil__svg { width: 100%; height: 100%; }

@keyframes alo-sigil-rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ─── PARTÍCULAS DE SAL (fondo intro) ───────────────────────── */
.alo-salt-particle {
    position: absolute;
    background: var(--alo-salt-light);
    border-radius: 1px;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    animation: alo-particle-fall linear infinite;
}

.alo-salt-particle--1  { width:3px; height:2px; left:12%;  animation-duration:8s;  animation-delay:0s; }
.alo-salt-particle--2  { width:2px; height:2px; left:28%;  animation-duration:11s; animation-delay:1.5s; }
.alo-salt-particle--3  { width:4px; height:2px; left:45%;  animation-duration:7s;  animation-delay:0.8s; }
.alo-salt-particle--4  { width:2px; height:3px; left:62%;  animation-duration:13s; animation-delay:2.2s; }
.alo-salt-particle--5  { width:3px; height:2px; left:78%;  animation-duration:9s;  animation-delay:0.4s; }
.alo-salt-particle--6  { width:2px; height:2px; left:90%;  animation-duration:10s; animation-delay:3s; }
.alo-salt-particle--7  { width:3px; height:2px; left:35%;  animation-duration:12s; animation-delay:1s; }
.alo-salt-particle--8  { width:2px; height:2px; left:55%;  animation-duration:6s;  animation-delay:2s; }

@keyframes alo-particle-fall {
    0%   { top: -10px; opacity: 0;   transform: rotate(0deg);   }
    10%  { opacity: 0.6; }
    90%  { opacity: 0.3; }
    100% { top: 110%;   opacity: 0;   transform: rotate(45deg);  }
}

/* ─── HEADER / TEXTO INTRO ───────────────────────────────────── */
.alo-header {
    position: relative;
    z-index: 2;
    text-align: center;
}

.alo-titulo {
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--alo-gold-light);
    text-shadow: 0 0 30px rgba(200,146,42,0.5), 0 2px 4px rgba(0,0,0,0.8);
    line-height: 1.2;
    margin-bottom: 0.4rem;
}

.alo-subtitulo {
    font-size: clamp(0.95rem, 2.5vw, 1.2rem);
    font-style: italic;
    color: var(--alo-parchment);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 300;
}

.alo-descripcion {
    position: relative;
    z-index: 2;
    max-width: 520px;
    text-align: center;
    font-size: clamp(0.95rem, 2vw, 1.08rem);
    line-height: 1.8;
    color: var(--alo-salt-dim);
    font-weight: 300;
}

/* ─── ÁREA DE PREGUNTA ───────────────────────────────────────── */
.alo-pregunta-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 460px;
}

.alo-pregunta {
    width: 100%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(200,146,42,0.25);
    border-radius: var(--alo-radius);
    color: var(--alo-salt);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1rem;
    line-height: 1.6;
    padding: 0.85rem 1rem;
    resize: none;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.alo-pregunta::placeholder { color: var(--alo-salt-dim); opacity: 0.6; }

.alo-pregunta:focus {
    border-color: rgba(200,146,42,0.6);
    box-shadow: 0 0 0 3px rgba(200,146,42,0.12);
}

/* ─── BOTONES ────────────────────────────────────────────────── */
.alo-btn {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: transparent;
    border: 1.5px solid var(--alo-gold);
    color: var(--alo-gold-light);
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(0.75rem, 2vw, 0.9rem);
    letter-spacing: 0.1em;
    padding: 0.9rem 2.2rem;
    border-radius: 50px;
    cursor: pointer;
    transition: background 0.3s, color 0.3s, box-shadow 0.3s, transform 0.2s;
    text-transform: uppercase;
}

.alo-btn:hover, .alo-btn:focus-visible {
    background: rgba(200,146,42,0.15);
    box-shadow: 0 0 20px rgba(200,146,42,0.3);
    transform: translateY(-1px);
    outline: none;
}

.alo-btn:active { transform: translateY(0); }

.alo-btn__icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.alo-btn__icon svg { width: 100%; height: 100%; }

/* ─── PANTALLA RITUAL ────────────────────────────────────────── */
.alo-mesa-wrapper {
    position: relative;
    z-index: 2;
    width: min(420px, 90vw);
}

.alo-mesa {
    position: relative;
    width: 100%;
    aspect-ratio: 4/3;
    background:
        linear-gradient(160deg, rgba(60,35,15,0.9) 0%, rgba(30,18,8,0.95) 100%);
    border-radius: var(--alo-radius-lg);
    border: 1px solid rgba(200,146,42,0.2);
    overflow: hidden;
    box-shadow:
        0 20px 60px rgba(0,0,0,0.6),
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 0 40px rgba(200,146,42,0.08);
}

/* Textura de madera con CSS */
.alo-mesa::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(
            92deg,
            transparent 0px,
            rgba(255,255,255,0.01) 1px,
            transparent 2px,
            transparent 20px
        );
    pointer-events: none;
    z-index: 1;
}

.alo-salt-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.alo-mesa__luz {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 30%, rgba(200,146,42,0.06) 0%, transparent 70%);
    z-index: 3;
    pointer-events: none;
    animation: alo-luz-pulso 3s ease-in-out infinite;
}

@keyframes alo-luz-pulso {
    0%, 100% { opacity: 0.6; }
    50%       { opacity: 1; }
}

.alo-cargando-msg {
    position: relative;
    z-index: 2;
    font-style: italic;
    color: var(--alo-parchment);
    font-size: 1rem;
    letter-spacing: 0.08em;
    text-align: center;
    animation: alo-fade-pulse 2s ease-in-out infinite;
}

@keyframes alo-fade-pulse {
    0%, 100% { opacity: 0.6; }
    50%       { opacity: 1; }
}

/* ─── PANTALLA RESULTADO ─────────────────────────────────────── */
.alo-result-salt-display {
    position: relative;
    z-index: 2;
    width: min(260px, 70vw);
    margin-bottom: 0.5rem;
}

.alo-result-salt-display canvas {
    width: 100%;
    height: auto;
    border-radius: var(--alo-radius);
    border: 1px solid rgba(200,146,42,0.2);
    background: rgba(18,12,8,0.7);
}

/* Tarjeta de resultado */
.alo-result-card {
    position: relative;
    z-index: 2;
    width: min(520px, 92vw);
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(200,146,42,0.2);
    border-radius: var(--alo-radius-lg);
    padding: var(--alo-gap-lg);
    text-align: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    box-shadow:
        0 12px 40px rgba(0,0,0,0.4),
        inset 0 1px 0 rgba(255,255,255,0.05);
    animation: alo-card-appear 0.6s ease forwards;
}

@keyframes alo-card-appear {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Variantes de color por tipo */
.alo-result-card--positivo { border-color: rgba(200,146,42,0.4); }
.alo-result-card--negativo { border-color: rgba(122,90,138,0.4); }
.alo-result-card--mistico  { border-color: rgba(58,170,158,0.4); }
.alo-result-card--neutral  { border-color: rgba(138,158,170,0.4); }

/* Badge */
.alo-result-badge {
    font-family: 'Cinzel Decorative', serif;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0.3rem 1rem;
    border-radius: 50px;
    background: rgba(200,146,42,0.12);
    border: 1px solid currentColor;
}
.alo-result-badge--positivo { color: var(--alo-gold-light); }
.alo-result-badge--negativo { color: #b890cc; border-color: rgba(122,90,138,0.5); background: rgba(122,90,138,0.1); }
.alo-result-badge--mistico  { color: #6eddd6; border-color: rgba(58,170,158,0.5); background: rgba(58,170,158,0.1); }
.alo-result-badge--neutral  { color: var(--alo-salt-dim); border-color: rgba(138,158,170,0.4); background: rgba(138,158,170,0.08); }

/* Icono SVG */
.alo-result-icon-wrapper {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.alo-result-icon-wrapper svg {
    width: 100%;
    height: 100%;
    color: var(--alo-gold-light);
}
.alo-result-card--negativo .alo-result-icon-wrapper svg { color: #b890cc; }
.alo-result-card--mistico  .alo-result-icon-wrapper svg { color: #6eddd6; }
.alo-result-card--neutral  .alo-result-icon-wrapper svg { color: var(--alo-salt-dim); }

/* Revelación */
.alo-result-revelacion {
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--alo-salt-dim);
    font-style: normal;
}

/* Título */
.alo-result-titulo {
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    font-weight: 700;
    color: var(--alo-gold-light);
    line-height: 1.3;
}
.alo-result-card--negativo .alo-result-titulo { color: #c8a8dc; }
.alo-result-card--mistico  .alo-result-titulo { color: #7ee8e0; }
.alo-result-card--neutral  .alo-result-titulo { color: var(--alo-salt); }

/* Subtítulo */
.alo-result-subtitulo {
    font-style: italic;
    font-size: clamp(0.9rem, 2vw, 1rem);
    color: var(--alo-parchment);
    letter-spacing: 0.06em;
    font-weight: 300;
}

/* Divisor */
.alo-result-divider {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--alo-gold-dim);
    font-size: 0.6rem;
    width: 100%;
    max-width: 260px;
}
.alo-result-divider__line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--alo-gold-dim), transparent);
}

/* Interpretación */
.alo-result-interpretacion {
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    line-height: 1.85;
    color: var(--alo-salt-dim);
    font-weight: 300;
    text-align: justify;
    max-width: 440px;
}

/* ─── PANTALLA ERROR ─────────────────────────────────────────── */
.alo-error-msg {
    z-index: 2;
    position: relative;
    text-align: center;
    color: #e08080;
    font-style: italic;
    font-size: 1rem;
    max-width: 400px;
    line-height: 1.7;
}

/* ─── SCROLLBAR ──────────────────────────────────────────────── */
#alomancia-app ::-webkit-scrollbar { width: 4px; }
#alomancia-app ::-webkit-scrollbar-track { background: transparent; }
#alomancia-app ::-webkit-scrollbar-thumb { background: var(--alo-gold-dim); border-radius: 2px; }

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 480px) {
    .alo-screen { padding: 1.5rem 1rem; gap: 1rem; }
    .alo-sigil  { width: 100px; height: 100px; }
    .alo-descripcion { font-size: 0.9rem; }
    .alo-result-card { padding: 1.25rem; }
    .alo-result-interpretacion { text-align: left; }
    .alo-btn { padding: 0.8rem 1.6rem; font-size: 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .alo-sigil,
    .alo-salt-particle,
    .alo-cargando-msg,
    .alo-mesa__luz,
    .alo-result-card { animation: none !important; opacity: 1 !important; }
}