/* ═══════════════════════════════════════════════════════
   _esoterico.css  –  Sección Esotérico
   ═══════════════════════════════════════════════════════ */

:root {
    --eso-bg:        #0d0a1a;
    --eso-purple:    #1a0d2e;
    --eso-violet:    #2d1b4e;
    --eso-gold:      #c9a84c;
    --eso-gold-light:#e8c96a;
    --eso-gold-dark: #8a6f2e;
    --eso-amethyst:  #7c3aed;
    --eso-crystal:   #a78bfa;
    --eso-white:     #f0eaf8;
    --eso-muted:     rgba(240, 234, 248, 0.6);
    --eso-card-bg:   #160d2a;
    --eso-border:    rgba(201, 168, 76, 0.25);
}

/* ── Hero ── */
.eso-hero {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: radial-gradient(ellipse at 60% 50%, #2d1b4e 0%, #120824 50%, #0d0a1a 100%);
}

/* Estrellas animadas */
.eso-stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, #fff 1px, transparent 1px),
        radial-gradient(circle, rgba(255,255,255,.6) 1px, transparent 1px),
        radial-gradient(circle, rgba(201,168,76,.5) 1px, transparent 1px);
    background-size: 150px 150px, 90px 90px, 200px 200px;
    background-position: 20px 30px, 60px 80px, 100px 10px;
    animation: esoStars 8s linear infinite;
    opacity: .7;
    pointer-events: none;
}
@keyframes esoStars {
    0%   { background-position: 20px 30px,  60px 80px,  100px 10px; }
    100% { background-position: 170px 180px, 150px 170px, 300px 210px; }
}

/* Brillo central */
.eso-hero::before {
    content: '';
    position: absolute;
    top: 50%; left: 55%;
    transform: translate(-50%, -50%);
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(124, 58, 237, 0.2) 0%, transparent 70%);
    pointer-events: none;
}

.eso-hero-content {
    position: relative;
    z-index: 2;
    max-width: var(--max-w);
    width: 100%;
    margin: 0 auto;
    padding: 80px 24px 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.eso-eyebrow {
    font-family: 'Cinzel', serif;
    font-size: 12px;
    color: var(--eso-gold);
    letter-spacing: .25em;
    text-transform: uppercase;
}

.eso-title {
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(36px, 6vw, 64px);
    color: var(--eso-white);
    line-height: 1.1;
    text-shadow: 0 0 40px rgba(124, 58, 237, 0.6);
}
.eso-title span { color: var(--eso-gold); }

.eso-subtitle {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: var(--eso-muted);
    max-width: 440px;
    line-height: 1.8;
}

.eso-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    background: linear-gradient(135deg, var(--eso-amethyst), #4c1d95);
    color: var(--eso-white);
    font-family: 'Cinzel', serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    border: 1px solid var(--eso-gold);
    border-radius: 4px;
    text-decoration: none;
    box-shadow: 0 0 20px rgba(124,58,237,.4);
    transition: all .25s;
    margin-top: 8px;
}
.eso-btn:hover {
    background: linear-gradient(135deg, #6d28d9, var(--eso-amethyst));
    box-shadow: 0 0 32px rgba(124,58,237,.65);
    transform: translateY(-2px);
}

/* Orbs decorativos */
/* Imagen principal flotante del hero */
.eso-deco {
    position: absolute;
    right: 2%;
    top: 50%;
    transform: translateY(-50%);   /* el wrapper centra; la imagen flota aparte */
    width: 52%;
    max-width: 780px;
    z-index: 2;
}
.eso-hero-img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 12px 28px rgba(124,58,237,.45));
    animation: esoFloat 4s ease-in-out infinite;
}
@keyframes esoFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-12px); }
}


/* ── Features bar ── */
.eso-features {
    background: var(--eso-purple);
    border-top:    1px solid var(--eso-border);
    border-bottom: 1px solid var(--eso-border);
}
.eso-features-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    padding: 0 24px;
}
.eso-feature {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-right: 1px solid var(--eso-border);
    color: var(--eso-white);
}
.eso-feature:last-child { border-right: none; }
.eso-feature-icon { font-size: 26px; }
.eso-feature strong { display: block; font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: .05em; color: var(--eso-gold); }
.eso-feature span   { font-size: 11px; color: var(--eso-muted); }


/* ── Sección productos ── */
.eso-section {
    background: var(--eso-bg);
    padding: 60px 0;
    min-height: 60vh;
}
.eso-container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 24px;
}
.eso-section-header {
    text-align: center;
    margin-bottom: 48px;
}
.eso-section-title {
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(20px, 3vw, 28px);
    color: var(--eso-white);
    text-shadow: 0 0 20px rgba(124,58,237,.5);
    margin-bottom: 8px;
}
.eso-section-subtitle {
    font-size: .9rem;
    color: var(--eso-muted);
    font-family: 'Cinzel', serif;
}


/* ── Grid ── */
.eso-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 24px;
}

/* ── Tarjeta ── */
.eso-card {
    background: var(--eso-card-bg);
    border: 1px solid var(--eso-border);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: var(--eso-white);
    display: flex;
    flex-direction: column;
    transition: transform .25s, box-shadow .25s, border-color .25s;
    position: relative;
}
.eso-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(124,58,237,.05) 0%, transparent 60%);
    pointer-events: none;
}
.eso-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(124,58,237,.35), 0 0 0 1px rgba(201,168,76,.4);
    border-color: rgba(201,168,76,.5);
}

.eso-card-img {
    aspect-ratio: 1/1;
    background: radial-gradient(circle at center, #1e0d3a, #0d0a1a);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.eso-card-img img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 16px;
    transition: transform .35s;
}
.eso-card:hover .eso-card-img img { transform: scale(1.06); }
.eso-placeholder { font-size: 70px; }

.eso-badge-agotado {
    position: absolute;
    top: 10px; left: 10px;
    background: #7c3aed;
    color: var(--eso-white);
    font-family: 'Cinzel', serif;
    font-size: 10px;
    padding: 4px 10px;
    border-radius: 2px;
    border: 1px solid var(--eso-gold-dark);
    letter-spacing: .08em;
}

.eso-card-info {
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.eso-card-cat {
    font-family: 'Cinzel', serif;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--eso-gold);
}
.eso-card-nombre {
    font-family: 'Cinzel', serif;
    font-size: .9rem;
    font-weight: 600;
    color: var(--eso-white);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.5em;
}
.eso-card-precio {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--eso-gold-light);
    margin-top: 4px;
}
.eso-btn-ver {
    margin-top: 8px;
    width: 100%;
    background: transparent;
    color: var(--eso-crystal);
    font-family: 'Cinzel', serif;
    font-size: 12px;
    letter-spacing: .1em;
    padding: 9px;
    border: 1px solid rgba(167,139,250,.35);
    border-radius: 4px;
    cursor: pointer;
    transition: all .2s;
    text-align: center;
}
.eso-btn-ver:hover {
    background: rgba(124,58,237,.2);
    border-color: var(--eso-crystal);
    color: var(--eso-white);
}

/* ── Empty state ── */
.eso-empty {
    text-align: center;
    padding: 80px 24px;
    color: var(--eso-muted);
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
}


/* ══ NAVBAR esotérico ══ */
.esoterico-page .site-header {
    background: #0d0a1a;
    border-bottom: 1px solid var(--eso-border);
    box-shadow: 0 2px 24px rgba(124,58,237,.2);
}
.esoterico-page .logo-text strong { color: var(--eso-white); }
.esoterico-page .logo-text span   { color: var(--eso-gold); }
.esoterico-page .search-bar {
    border-color: rgba(201,168,76,.3);
    background: #160d2a;
}
.esoterico-page .search-bar input { color: var(--eso-white); }
.esoterico-page .search-bar input::placeholder { color: var(--eso-muted); }
.esoterico-page .search-bar button { background: var(--eso-amethyst); }
.esoterico-page .search-bar button:hover { background: #5b21b6; }
.esoterico-page .btn-icon       { color: rgba(240,234,248,.7); }
.esoterico-page .btn-icon:hover { background: rgba(124,58,237,.15); }
.esoterico-page .nav-toggle span { background: var(--eso-white); }

.esoterico-page .site-nav {
    background: var(--eso-purple);
    border-bottom: 1px solid var(--eso-border);
}
.esoterico-page .site-nav ul li a { color: var(--eso-muted); }
.esoterico-page .site-nav ul li a:hover,
.esoterico-page .site-nav ul li a.active {
    background: rgba(124,58,237,.2);
    color: var(--eso-white);
    border-bottom-color: var(--eso-amethyst);
}
.esoterico-page .nav-section-eso a        { color: var(--eso-gold) !important; }
.esoterico-page .nav-section-eso a:hover,
.esoterico-page .nav-section-eso a.active {
    background: var(--eso-amethyst) !important;
    color: var(--eso-white) !important;
}
.esoterico-page .nav-sep { color: rgba(240,234,248,.2); }

.esoterico-page .topbar {
    background: var(--eso-violet);
    color: var(--eso-white);
    border-bottom: 1px solid var(--eso-border);
}
.esoterico-page .topbar a { color: var(--eso-gold-light); }


/* ══ FOOTER esotérico ══ */
.esoterico-page footer {
    background: #0d0a1a;
    border-top: 1px solid var(--eso-border);
}
.esoterico-page .footer-col h4      { color: var(--eso-gold); font-family: 'Cinzel', serif; }
.esoterico-page .footer-bottom      { border-top-color: var(--eso-border); }
.esoterico-page .footer-brand .logo-text strong { color: var(--eso-white); }
.esoterico-page .footer-brand .logo-text span   { color: var(--eso-gold); }
.esoterico-page .social-btn:hover   { background: var(--eso-amethyst); }


/* ── Responsive ── */
@media (max-width: 900px) {
    .eso-hero { flex-direction: column; }
    .eso-deco {
        position: static;
        transform: none;
        width: 100%;
        max-width: 320px;
        margin: 4px auto 0;
    }
    .eso-features-inner { flex-wrap: wrap; }
    .eso-feature      { flex: 1 1 45%; border-right: none; border-bottom: 1px solid var(--eso-border); }
}
@media (max-width: 600px) {
    .eso-grid  { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .eso-title { font-size: 28px; }
}