/* =====================================================================
   Moda Sin Género — Capa de textura y ambiente
   Bienestar visual: respiración, puntillismo, capas
   ===================================================================== */

/* =====================================================================
   1. ATMÓSFERA DE FONDO — blobs radiales que respiran
   ===================================================================== */
body::before {
    content: "";
    position: fixed;
    inset: -10%;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 18%,
            color-mix(in oklab, var(--accent) 14%, transparent) 0%,
            transparent 42%),
        radial-gradient(circle at 88% 82%,
            color-mix(in oklab, var(--accent-2) 11%, transparent) 0%,
            transparent 38%),
        radial-gradient(circle at 50% 110%,
            color-mix(in oklab, var(--accent-3) 8%, transparent) 0%,
            transparent 55%);
    animation: breathe-atmosphere 28s ease-in-out infinite;
    will-change: transform, opacity;
}

@keyframes breathe-atmosphere {
    0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.85; }
    50%      { transform: scale(1.06) translate(-1%, 1%); opacity: 1; }
}

[data-theme="dark"] body::before { opacity: 0.7; }

@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
}

/* =====================================================================
   2. PUNTILLISMO — patrón de puntos orgánico
   ===================================================================== */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(circle,
            color-mix(in oklab, var(--accent) 22%, transparent) 0.8px,
            transparent 1.4px);
    background-size: 22px 22px;
    opacity: 0.35;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 0%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 0%, transparent 85%);
}

[data-theme="dark"] body::after { opacity: 0.22; }

/* =====================================================================
   3. CÍRCULOS DECORATIVOS — componentes reutilizables
   ===================================================================== */

/* Círculo grande, flotante, casi imperceptible */
.orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    filter: blur(60px);
}
.orb--accent {
    background: radial-gradient(circle,
        color-mix(in oklab, var(--accent) 30%, transparent) 0%,
        transparent 70%);
}
.orb--accent2 {
    background: radial-gradient(circle,
        color-mix(in oklab, var(--accent-2) 28%, transparent) 0%,
        transparent 70%);
}
.orb--accent3 {
    background: radial-gradient(circle,
        color-mix(in oklab, var(--accent-3) 24%, transparent) 0%,
        transparent 70%);
}

.orb--breath {
    animation: orb-breathe 18s ease-in-out infinite;
}

@keyframes orb-breathe {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50%      { transform: scale(1.15); opacity: 1; }
}

/* =====================================================================
   4. CÍRCULOS CONTENIDOS — para hero y bloques
   ===================================================================== */
.hero {
    position: relative;
    isolation: isolate;
}

.hero__orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
}
.hero__orb--1 {
    width: 240px; height: 240px;
    top: -60px; right: -40px;
    background: radial-gradient(circle,
        color-mix(in oklab, var(--accent-contrast) 55%, transparent) 0%,
        transparent 70%);
    animation: orb-breathe 16s ease-in-out infinite;
}
.hero__orb--2 {
    width: 180px; height: 180px;
    bottom: -50px; left: -30px;
    background: radial-gradient(circle,
        color-mix(in oklab, var(--accent-contrast) 40%, transparent) 0%,
        transparent 70%);
    animation: orb-breathe 22s ease-in-out infinite reverse;
}
.hero__orb--3 {
    width: 90px; height: 90px;
    top: 40%; right: 20%;
    background: radial-gradient(circle,
        color-mix(in oklab, var(--accent-contrast) 30%, transparent) 0%,
        transparent 70%);
    animation: orb-breathe 14s ease-in-out infinite;
}

.hero > *:not(.hero__orb) { position: relative; z-index: 1; }

/* =====================================================================
   5. SUPERFICIES — elevación sin bordes marcados
   ===================================================================== */

/* Reemplaza el contorno por profundidad acumulada */
.card,
.product-card,
.cart-page__summary,
.pdp__stage {
    border-color: color-mix(in oklab, var(--border) 55%, transparent);
    box-shadow:
        0 1px 0 color-mix(in oklab, var(--text) 3%, transparent),
        0 6px 20px color-mix(in oklab, var(--accent) 6%, transparent);
}

/* Acentos de bienestar en el header */
.app-header {
    background: color-mix(in oklab, var(--bg-elev) 76%, var(--accent) 10%);
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
    box-shadow: 0 6px 24px color-mix(in oklab, var(--accent) 5%, transparent);
}

/* =====================================================================
   6. BOTTOM NAV — ya rediseñada, refuerzo de profundidad
   ===================================================================== */
.app-bottomnav {
    background: color-mix(in oklab, var(--bg-elev) 82%, var(--accent) 12%);
    box-shadow:
        0 -6px 20px color-mix(in oklab, var(--accent) 6%, transparent),
        0 -1px 0 color-mix(in oklab, var(--border) 50%, transparent);
}

/* =====================================================================
   7. UTILIDADES DE CÍRCULO — para secciones específicas
   ===================================================================== */
.dot-cluster {
    position: relative;
    isolation: isolate;
}
.dot-cluster::before {
    content: "";
    position: absolute;
    inset: -40px;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(circle,
            color-mix(in oklab, var(--accent) 28%, transparent) 1px,
            transparent 1.5px);
    background-size: 16px 16px;
    mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 60%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 60%);
    opacity: 0.5;
}

/* =====================================================================
   8. BANNERS PUBLICITARIOS — espacio reservado (item 8)
   Solo estructura base. El contenido se define en Sprint 3D.
   ===================================================================== */
.ad-slot {
    display: none;
    width: 100%;
    border-radius: var(--r-lg);
    overflow: hidden;
    background:
        linear-gradient(135deg,
            color-mix(in oklab, var(--accent) 8%, var(--surface)) 0%,
            color-mix(in oklab, var(--accent-2) 6%, var(--surface)) 100%);
    border: 1px solid var(--border);
    position: relative;
    isolation: isolate;
    margin-block: var(--sp-6);
}
.ad-slot::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle,
            color-mix(in oklab, var(--accent) 22%, transparent) 1px,
            transparent 1.5px);
    background-size: 20px 20px;
    opacity: 0.4;
    pointer-events: none;
}
.ad-slot.has-content { display: block; }
.ad-slot--billboard { min-height: 96px; }
.ad-slot--square    { min-height: 260px; max-width: 340px; margin-inline: auto; }