/* ============================================================
   COMPATIBILIDAD ZODIACAL — styles.css
   Estética: Cielo nocturno · art-nouveau celestial · índigo y oro
   ============================================================ */

:root {
    --bg-app:       #0b0c1a;
    --bg-card:      #11122a;
    --bg-panel:     rgba(17,18,42,0.85);
    --bg-selected:  rgba(99,102,241,0.15);
    --indigo:       #6366f1;
    --indigo-d:     #4145c0;
    --indigo-l:     #a5b4fc;
    --violet:       #a855f7;
    --gold:         #f0c040;
    --gold-d:       #9a7820;
    --rose:         #f472b6;
    --teal:         #2dd4bf;
    --amber:        #fbbf24;
    --white:        #ede8ff;
    --muted:        #b0adcc;
    --border:       rgba(99,102,241,0.2);
    --border-b:     rgba(99,102,241,0.5);
    --r:            10px;
    --r-lg:         18px;
    --tr:           0.25s ease;
    --shadow:       0 16px 56px rgba(0,0,0,0.75);
    --font-display: 'Playfair Display', serif;
    --font-label:   'Cinzel', serif;
    --font-body:    'Nunito', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

#zc-app {
    background-color: var(--bg-app);
    background-image:
        radial-gradient(ellipse 90% 50% at 50% -10%, rgba(99,102,241,0.14) 0%, transparent 65%),
        radial-gradient(ellipse 40% 40% at 85% 90%, rgba(168,85,247,0.08) 0%, transparent 55%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cg fill='%23a5b4fc' fill-opacity='0.045'%3E%3Ccircle cx='43' cy='67' r='1.3'/%3E%3Ccircle cx='120' cy='22' r='0.9'/%3E%3Ccircle cx='210' cy='140' r='1.6'/%3E%3Ccircle cx='320' cy='55' r='1.1'/%3E%3Ccircle cx='410' cy='180' r='0.8'/%3E%3Ccircle cx='70' cy='230' r='1.2'/%3E%3Ccircle cx='270' cy='310' r='1.4'/%3E%3Ccircle cx='460' cy='340' r='1'/%3E%3Ccircle cx='160' cy='400' r='1.3'/%3E%3Ccircle cx='35' cy='420' r='0.9'/%3E%3Ccircle cx='480' cy='120' r='1.1'/%3E%3Ccircle cx='380' cy='460' r='0.7'/%3E%3Ccircle cx='230' cy='480' r='1'/%3E%3Ccircle cx='90' cy='360' r='0.8'/%3E%3Ccircle cx='340' cy='240' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
    min-height: 100vh;
    width: 100%;
    color: var(--white);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    overflow-x: hidden;
}

.zc-wrap {
    max-width: 820px;
    margin: 0 auto;
    padding: 50px 20px 70px;
}

/* ── Header ─────────────────────────────────────────────── */
.zc-header { text-align: center; margin-bottom: 50px; }
.zc-header-glyph {
    font-size: 28px;
    letter-spacing: 14px;
    color: var(--indigo-l);
    opacity: 0.65;
    display: block;
    margin-bottom: 12px;
    animation: fadeIn 1.3s ease both;
}
.zc-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 5vw, 48px);
    font-weight: 700;
    color: var(--white);
    margin: 0 0 8px;
    letter-spacing: 1px;
    animation: fadeInDown 0.85s ease both;
    line-height: 1.15;
}
.zc-title em { font-style: normal; color: var(--indigo-l); }
.zc-subtitle {
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 5px;
    color: #c8c4e8;
    text-transform: uppercase;
    animation: fadeIn 1.5s ease both;
}
.zc-header-sep {
    width: 100px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--indigo), transparent);
    margin: 16px auto 0;
}

/* ── Steps ─────────────────────────────────────────────── */
.zc-step { display: none; }
.zc-step.active { display: block; animation: fadeIn 0.4s ease both; }

/* ── STEP 1: Sign Selector ──────────────────────────────── */
.zc-selector-hint {
    text-align: center;
    font-family: var(--font-label);
    font-size: 11px;
    letter-spacing: 4px;
    color: #c8c4e8;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.zc-chosen-row {
    display: grid;
    grid-template-columns: 1fr 52px 1fr;
    gap: 12px;
    align-items: center;
    margin-bottom: 32px;
}
.zc-chosen-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 18px 14px;
    text-align: center;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: border-color var(--tr), box-shadow var(--tr);
    position: relative;
    overflow: hidden;
}
.zc-chosen-card::before {
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse at 50% 0%,rgba(99,102,241,0.12),transparent 70%);
    opacity:0;
    transition:opacity var(--tr);
}
.zc-chosen-card.filled { border-color:var(--indigo); box-shadow:0 0 24px rgba(99,102,241,0.18); }
.zc-chosen-card.filled::before { opacity:1; }
.zc-col-label { font-family:var(--font-label); font-size:9px; letter-spacing:3px; color:var(--indigo-l); text-transform:uppercase; opacity:1; }
.zc-chosen-symbol { font-size:42px; line-height:1; animation:popIn 0.35s cubic-bezier(0.34,1.56,0.64,1) both; }
.zc-chosen-name { font-family:var(--font-label); font-size:10px; letter-spacing:3px; color:var(--white); text-transform:uppercase; }
.zc-chosen-dates { font-size:12px; color:#c0bde0; }
.zc-chosen-empty { font-family:var(--font-display); font-style:italic; color:#8a87b8; opacity:1; font-size:14px; }

.zc-vs { display:flex; flex-direction:column; align-items:center; gap:6px; }
.zc-vs-line { width:1px; height:28px; background:linear-gradient(to bottom,transparent,var(--indigo),transparent); }
.zc-vs-text { font-family:var(--font-label); font-size:12px; letter-spacing:2px; color:var(--violet); font-weight:700; }

/* ── Signs Grid ─────────────────────────────────────────── */
.zc-grid-label {
    font-family:var(--font-label); font-size:10px; letter-spacing:3px;
    color:#c0bde0; text-transform:uppercase; text-align:center; margin-bottom:14px;
}
.zc-signs-grid {
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:8px;
    margin-bottom:32px;
}
.zc-sign-tile {
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--r);
    padding:12px 8px 10px;
    text-align:center;
    cursor:pointer;
    transition:all var(--tr);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    position:relative;
    user-select:none;
}
.zc-sign-tile::after {
    content:'';
    position:absolute;
    inset:0;
    border-radius:var(--r);
    background:linear-gradient(135deg,rgba(99,102,241,0.15),transparent);
    opacity:0;
    transition:opacity var(--tr);
}
.zc-sign-tile:hover { border-color:var(--indigo-l); transform:translateY(-2px); box-shadow:0 4px 16px rgba(99,102,241,0.18); }
.zc-sign-tile:hover::after { opacity:1; }

.zc-sign-tile.sel-1 {
    border-color:var(--indigo);
    background:rgba(99,102,241,0.2);
    box-shadow:0 0 0 2px rgba(99,102,241,0.4),0 4px 20px rgba(99,102,241,0.25);
}
.zc-sign-tile.sel-2 {
    border-color:var(--violet);
    background:rgba(168,85,247,0.2);
    box-shadow:0 0 0 2px rgba(168,85,247,0.4),0 4px 20px rgba(168,85,247,0.25);
}

/* Mismo signo en ambos slots: degradado índigo→violeta */
.zc-sign-tile.sel-1.sel-2 {
    border-color: var(--indigo-l);
    background: linear-gradient(135deg, rgba(99,102,241,0.22), rgba(168,85,247,0.22));
    box-shadow: 0 0 0 2px rgba(99,102,241,0.5), 0 0 0 4px rgba(168,85,247,0.25), 0 4px 24px rgba(99,102,241,0.3);
}
.zc-sign-tile.sel-1.sel-2 .zc-tile-glyph { color: var(--indigo-l); transform: scale(1.2); }
.zc-sign-tile.sel-1.sel-2 .zc-tile-name  { color: var(--indigo-l); }
.zc-tile-emoji { font-size:24px; line-height:1; }
.zc-tile-glyph { font-size:15px; color:#9896c8; line-height:1; transition:transform var(--tr),color var(--tr); }
.zc-sign-tile.sel-1 .zc-tile-glyph { color:var(--indigo-l); transform:scale(1.2); }
.zc-sign-tile.sel-2 .zc-tile-glyph { color:#c084fc; transform:scale(1.2); }
.zc-tile-name { font-family:var(--font-label); font-size:7.5px; letter-spacing:1px; color:#c0bde0; text-transform:uppercase; }
.zc-sign-tile.sel-1 .zc-tile-name { color:var(--indigo-l); }
.zc-sign-tile.sel-2 .zc-tile-name { color:#c084fc; }

/* ── Analyze Button ─────────────────────────────────────── */
.zc-btn-analyze {
    display:block;
    width:100%;
    max-width:400px;
    margin:0 auto;
    background:linear-gradient(135deg, var(--indigo-d) 0%, var(--indigo) 50%, var(--violet) 100%);
    background-size:200% 100%;
    border:none;
    border-radius:var(--r);
    color:#fff;
    font-family:var(--font-label);
    font-size:12px;
    font-weight:700;
    letter-spacing:5px;
    text-transform:uppercase;
    padding:17px 32px;
    cursor:pointer;
    transition:background-position 0.45s ease,box-shadow 0.3s ease,transform 0.15s ease;
}
.zc-btn-analyze:hover:not(:disabled) { background-position:100% 0; box-shadow:0 6px 30px rgba(99,102,241,0.5); transform:translateY(-1px); }
.zc-btn-analyze:active { transform:translateY(0); }
.zc-btn-analyze:disabled { opacity:0.3; cursor:not-allowed; }

/* ── Loading ────────────────────────────────────────────── */
.zc-loading-area { text-align:center; padding:70px 0; }
.zc-spinner {
    width:56px; height:56px;
    border-radius:50%;
    border:2.5px solid transparent;
    border-top-color:var(--indigo-l);
    border-right-color:var(--violet);
    animation:spin 1s linear infinite;
    margin:0 auto 24px;
}
.zc-loading-text { font-family:var(--font-display); font-style:italic; color:#c8c4e8; font-size:18px; letter-spacing:0.5px; }

/* ── Result ─────────────────────────────────────────────── */
.zc-result-top { text-align:center; margin-bottom:36px; }
.zc-result-pill {
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:var(--bg-panel);
    border:1px solid var(--border-b);
    border-radius:50px;
    padding:12px 24px;
    backdrop-filter:blur(8px);
    flex-wrap:wrap;
    justify-content:center;
}
.zc-res-sign { display:flex; flex-direction:column; align-items:center; gap:2px; }
.zc-res-emoji { font-size:32px; line-height:1; }
.zc-res-name { font-family:var(--font-label); font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--indigo-l); }
.zc-res-sep { font-family:var(--font-display); font-size:24px; color:var(--violet); font-style:italic; opacity:0.8; padding:0 6px; }
.zc-result-heading { font-family:var(--font-label); font-size:10px; letter-spacing:5px; color:var(--gold); text-transform:uppercase; display:block; margin-top:20px; }

.zc-trio { display:flex; flex-direction:column; gap:14px; margin-bottom:36px; }
.zc-trio-card {
    background:var(--bg-panel);
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    padding:22px 24px 20px;
    position:relative;
    overflow:hidden;
    backdrop-filter:blur(6px);
    animation:fadeInUp 0.5s ease both;
}
.zc-trio-card:nth-child(1){animation-delay:0.05s}
.zc-trio-card:nth-child(2){animation-delay:0.18s}
.zc-trio-card:nth-child(3){animation-delay:0.31s}
.zc-trio-card.c-love   { border-left:3px solid var(--rose); }
.zc-trio-card.c-friend { border-left:3px solid var(--teal); }
.zc-trio-card.c-work   { border-left:3px solid var(--amber); }
.zc-trio-card.c-love::before   { background:radial-gradient(ellipse at 0% 0%,rgba(244,114,182,0.08) 0%,transparent 55%); }
.zc-trio-card.c-friend::before { background:radial-gradient(ellipse at 0% 0%,rgba(45,212,191,0.08) 0%,transparent 55%); }
.zc-trio-card.c-work::before   { background:radial-gradient(ellipse at 0% 0%,rgba(251,191,36,0.08) 0%,transparent 55%); }
.zc-trio-card::before { content:''; position:absolute; inset:0; pointer-events:none; }

.zc-trio-head { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.zc-trio-icon { font-size:20px; flex-shrink:0; }
.zc-trio-label { font-family:var(--font-label); font-size:10px; letter-spacing:4px; text-transform:uppercase; font-weight:700; }
.c-love   .zc-trio-label { color:var(--rose); }
.c-friend .zc-trio-label { color:var(--teal); }
.c-work   .zc-trio-label { color:var(--amber); }

.zc-affinity-row { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.zc-affinity-track { flex:1; height:3px; background:rgba(255,255,255,0.07); border-radius:3px; overflow:hidden; }
.zc-affinity-fill  { height:100%; border-radius:3px; width:0%; transition:width 1.4s cubic-bezier(0.22,1,0.36,1); }
.c-love   .zc-affinity-fill { background:linear-gradient(90deg,#831843,var(--rose)); }
.c-friend .zc-affinity-fill { background:linear-gradient(90deg,#134e4a,var(--teal)); }
.c-work   .zc-affinity-fill { background:linear-gradient(90deg,#78350f,var(--amber)); }
.zc-affinity-val { font-family:var(--font-label); font-size:11px; color:#c0bde0; min-width:38px; text-align:right; }

.zc-trio-text { font-size:15px; color:rgba(237,232,255,0.90); line-height:1.75; }

.zc-btn-new {
    display:inline-flex; align-items:center; gap:8px;
    background:transparent;
    border:1px solid var(--border-b);
    border-radius:var(--r);
    color:var(--indigo-l);
    font-family:var(--font-label); font-size:10px; letter-spacing:3px; text-transform:uppercase;
    padding:12px 28px; cursor:pointer; transition:all var(--tr);
}
.zc-btn-new:hover { background:rgba(99,102,241,0.1); border-color:var(--indigo-l); }
.zc-result-actions { text-align:center; }

.zc-ornament { text-align:center; color:var(--indigo); font-size:14px; letter-spacing:10px; margin:28px 0; opacity:0.35; }

/* ── Modal ─────────────────────────────────────────────── */
.zc-modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.8); backdrop-filter:blur(5px);
    display:flex; align-items:center; justify-content:center;
    z-index:9999; opacity:0; pointer-events:none; transition:opacity 0.3s ease; padding:20px;
}
.zc-modal-overlay.active { opacity:1; pointer-events:all; }
.zc-modal {
    background:#0d0e22; border:1px solid var(--border-b); border-radius:var(--r-lg);
    padding:38px 30px; max-width:420px; width:100%; text-align:center;
    box-shadow:var(--shadow); transform:translateY(20px) scale(0.97); transition:transform 0.3s ease;
}
.zc-modal-overlay.active .zc-modal { transform:translateY(0) scale(1); }
.zc-modal-icon  { font-size:38px; display:block; margin-bottom:14px; }
.zc-modal-title { font-family:var(--font-label); font-size:12px; letter-spacing:4px; color:var(--indigo-l); text-transform:uppercase; margin:0 0 12px; }
.zc-modal-msg   { font-family:var(--font-display); font-size:17px; color:#c8c4e8; line-height:1.65; margin:0 0 28px; white-space:pre-line; }
.zc-modal-btns  { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.zc-modal-btns .zc-btn-new { font-size:9px; padding:10px 18px; }
.zc-modal-btns .zc-btn-analyze { font-size:9px; padding:10px 18px; letter-spacing:2px; width:auto; max-width:none; margin:0; }

/* ── Keyframes ─────────────────────────────────────────── */
@keyframes fadeIn    { from{opacity:0}                         to{opacity:1} }
@keyframes fadeInDown{ from{opacity:0;transform:translateY(-16px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeInUp  { from{opacity:0;transform:translateY(14px)}  to{opacity:1;transform:translateY(0)} }
@keyframes spin      { to{transform:rotate(360deg)} }
@keyframes popIn     { from{transform:scale(0.4);opacity:0}    to{transform:scale(1);opacity:1} }

/* ── Responsive ────────────────────────────────────────── */
@media(max-width:600px){
    .zc-wrap { padding:32px 14px 52px; }
    .zc-signs-grid { grid-template-columns:repeat(4,1fr); gap:6px; }
    .zc-tile-emoji { font-size:20px; }
    .zc-tile-glyph { font-size:12px; }
    .zc-tile-name  { font-size:7px; }
    .zc-chosen-row { grid-template-columns:1fr 40px 1fr; gap:8px; }
    .zc-chosen-symbol { font-size:32px; }
}
@media(max-width:380px){
    .zc-signs-grid { grid-template-columns:repeat(3,1fr); }
}