/* Variantes de estilo de Lovely Gio. Se eligen en el panel → Ajustes → Estilo,
   o se prueban con ?tema=mistica (ver THEMES en app/views.php).
   El tema por omisión (maximalista) vive en tienda.css. */

/* ============ 2. NOCHE MÍSTICA: oscuro, dorado y rosa neón, estrellas ============ */
[data-theme="mistica"] {
  --accent: #ff5fb2;
  --accent-deep: #ff2e95;
  --accent-soft: #ffa6d6;
  --accent-2: #b48cff;
  --accent-3: #e8c46b;
  --accent-4: #7fe0d0;
  --accent-5: #5b3f8c;
  --danger: #ff5577;
  --ink: #f6eafe;
  --muted: #b9a5cf;
  --on-accent: #1a0b2e;
  --bg: #140823;
  --bg-image: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.7), transparent), radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,.5), transparent), radial-gradient(1.5px 1.5px at 40% 60%, rgba(232,196,107,.6), transparent);
  --bg-size: 180px 180px;
  --surface: #1f0f36;
  --surface-2: #2a1647;
  --surface-3: #351c58;
  --field-bg: #170a29;
  --line: rgba(232, 196, 107, .55);
  --bw: 1px;
  --bw-sm: 1px;
  --shadow: 0 0 0 1px rgba(232,196,107,.15), 0 14px 40px rgba(0,0,0,.45);
  --shadow-sm: 0 8px 24px rgba(0,0,0,.35);
  --shadow-hover: 0 0 30px rgba(255, 95, 178, .45);
  --shadow-panel: 0 0 0 1px rgba(232,196,107,.25), 0 20px 50px rgba(0,0,0,.5);
  --shadow-img: 0 0 60px rgba(180, 140, 255, .35);
  --radius: 18px;
  --radius-lg: 24px;
  --radius-sm: 12px;
  --tilt: 0deg;
  --lift: translateY(-4px);
  --f-display: 'Cormorant Garamond', Georgia, serif;
  --display-style: italic;
  --display-weight: 600;
  --nav-case: uppercase;
  --nav-spacing: .12em;
  --announce-bg: linear-gradient(90deg, #2a1647, #4a1d5e, #2a1647);
  --announce-ink: #e8c46b;
  --header-bg: rgba(20, 8, 35, .85);
  --hero-bg: radial-gradient(ellipse at 70% 30%, #4a1d6e 0%, #1f0b36 55%, #120620 100%);
  --hero-ink: #f6eafe;
  --hero-title-shadow: 0 0 30px rgba(255, 95, 178, .5);
  --hero-dots: radial-gradient(1px 1px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 80% 40%, #fff, transparent), radial-gradient(1.5px 1.5px at 30% 70%, #e8c46b, transparent), radial-gradient(1px 1px at 60% 10%, #fff, transparent);
  --hero-em: #e8c46b;
  --band-bg: #2a1647;
  --band-ink: #f6eafe;
  --footer-bg: #0c0416;
  --footer-ink: #e9dcf7;
  --footer-head: #e8c46b;
  --logo-ink: #f6eafe;
  --bead: #ff5fb2;
  --marquee-bg: transparent;
  --marquee-ink: #e8c46b;
  --marquee-tilt: 0deg;
}
[data-theme="mistica"] .dots { background-size: 220px 220px; opacity: .9; }
[data-theme="mistica"] .btn { border-color: transparent; background: linear-gradient(135deg, #ff5fb2, #b48cff); box-shadow: 0 8px 26px rgba(255,95,178,.35); }
[data-theme="mistica"] .btn:hover { transform: translateY(-2px); box-shadow: 0 0 34px rgba(255,95,178,.6); }
[data-theme="mistica"] .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--accent-3); box-shadow: none; }
[data-theme="mistica"] .btn-ghost:hover { background: rgba(232,196,107,.12); }
[data-theme="mistica"] .sticker { box-shadow: none; background: transparent; border-color: var(--accent-3); color: var(--accent-3); letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; }
[data-theme="mistica"] .arch { border: 1px solid var(--accent-3); outline: 1px solid rgba(232,196,107,.35); outline-offset: 8px; }
[data-theme="mistica"] .spin-badge { background: #1a0b2e; border-color: var(--accent-3); }
[data-theme="mistica"] .spin-badge text { fill: var(--accent-3); }
[data-theme="mistica"] .float-heart { text-shadow: 0 0 14px currentColor; }
[data-theme="mistica"] .big-marquee { border-color: rgba(232,196,107,.35); }
[data-theme="mistica"] .tile-gold, [data-theme="mistica"] .tile-mint, [data-theme="mistica"] .tile-lilac { color: #1a0b2e; }
[data-theme="mistica"] .cat-tile { border-color: rgba(232,196,107,.4); }
[data-theme="mistica"] .title-deco::after { background: linear-gradient(90deg, var(--accent-3), transparent); height: 1px; width: 160px; margin-top: 12px; }
[data-theme="mistica"] .perk-ico { background: transparent; color: var(--accent-3); border-color: var(--accent-3); }
[data-theme="mistica"] .about-logo { box-shadow: 0 0 0 8px #1f0f36, 0 0 0 9px var(--accent-3), 0 0 60px rgba(255,95,178,.4); border-color: var(--accent-3); }
[data-theme="mistica"] .chip.on { background: var(--accent-3); color: #1a0b2e; }
[data-theme="mistica"] .co-step legend { background: var(--surface); }
[data-theme="mistica"] .bag-count { color: #1a0b2e; }
[data-theme="mistica"] .wa-float { border: 0; }

/* ============ 3. DULCE Y2K: chicle pastel, holográfico, todo redondito ============ */
[data-theme="dulce"] {
  --accent: #ff6fb5;
  --accent-deep: #f04a9c;
  --accent-soft: #ffb8dc;
  --accent-2: #8f7bff;
  --accent-3: #fff07a;
  --accent-4: #a8f0e0;
  --accent-5: #cfe3ff;
  --danger: #ff5c8a;
  --ink: #5a3a7a;
  --muted: #9a84b3;
  --on-accent: #fff;
  --bg: #fff6fb;
  --bg-image: radial-gradient(circle at 10px 10px, #ffe1f1 4px, transparent 4.5px), radial-gradient(circle at 30px 30px, #e3edff 4px, transparent 4.5px);
  --bg-size: 40px 40px;
  --surface: #fff;
  --surface-2: #f3eeff;
  --surface-3: #ffe6f3;
  --field-bg: #fffafd;
  --line: #f2c6e0;
  --bw: 3px;
  --bw-sm: 2px;
  --shadow: 0 8px 0 #f6d3e8;
  --shadow-sm: 0 5px 0 #f6d3e8;
  --shadow-hover: 0 12px 0 #d9ccff;
  --shadow-panel: 0 10px 0 #d9ccff;
  --shadow-img: 0 14px 0 #cfe3ff;
  --radius: 30px;
  --radius-lg: 40px;
  --radius-sm: 22px;
  --tilt: -4deg;
  --lift: translateY(-5px);
  --f-display: 'Fredoka', 'Outfit', sans-serif;
  --f-body: 'Nunito', 'Outfit', sans-serif;
  --display-style: normal;
  --display-weight: 700;
  --title-spacing: 0;
  --announce-bg: linear-gradient(90deg, #ffb8dc, #cfe3ff, #d9ccff, #ffb8dc);
  --announce-ink: #5a3a7a;
  --header-bg: rgba(255, 246, 251, .9);
  --hero-bg: linear-gradient(120deg, #ffc6e4 0%, #e0d4ff 35%, #c9ecff 65%, #ffd9ef 100%);
  --hero-ink: #5a3a7a;
  --hero-title-shadow: 3px 3px 0 #fff, 6px 6px 0 #ffb8dc;
  --hero-dots: radial-gradient(circle, rgba(255,255,255,.7) 3px, transparent 3.5px);
  --hero-em: #ff6fb5;
  --band-bg: #d9ccff;
  --band-ink: #5a3a7a;
  --footer-bg: #ffd1e8;
  --footer-ink: #5a3a7a;
  --footer-head: #8f7bff;
  --logo-ink: #5a3a7a;
  --bead: #ff6fb5;
  --marquee-bg: #fff07a;
  --marquee-ink: #ff6fb5;
  --marquee-tilt: 2deg;
}
[data-theme="dulce"] .hero { background-size: 300% 300%; animation: holo 14s ease infinite; }
@keyframes holo { 50% { background-position: 100% 50%; } }
[data-theme="dulce"] .btn { border-color: #fff; box-shadow: 0 6px 0 #f04a9c; }
[data-theme="dulce"] .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #f04a9c; }
[data-theme="dulce"] .btn-ghost { box-shadow: 0 6px 0 #d9ccff; border-color: #d9ccff; }
[data-theme="dulce"] .arch { border: 6px solid #fff; border-radius: 999px; }
[data-theme="dulce"] .arch-2 { border-radius: 999px; }
[data-theme="dulce"] .sticker { border-color: #fff; box-shadow: 0 4px 0 rgba(90,58,122,.15); }
[data-theme="dulce"] .spin-badge { border-color: #fff; background: #fff07a; }
[data-theme="dulce"] .float-heart { text-shadow: none; color: #fff; }
[data-theme="dulce"] .fh-3 { color: #ff6fb5; }
[data-theme="dulce"] .big-marquee span { -webkit-text-stroke: 0; }
[data-theme="dulce"] .cat-tile { border-color: #fff; }
[data-theme="dulce"] .tile-pink { background-color: #ffb8dc; color: #5a3a7a; }
[data-theme="dulce"] .tile-purple { background-color: #d9ccff; color: #5a3a7a; }
[data-theme="dulce"] .tile-red { background-color: #ffcfd9; color: #5a3a7a; }
[data-theme="dulce"] .card { border-color: #fff; }
[data-theme="dulce"] .card-img { border: 0; }
[data-theme="dulce"] .title-deco::after { background: radial-gradient(circle, #ff6fb5 5px, transparent 5.5px) 0 0 / 16px 12px repeat-x, radial-gradient(circle, #8f7bff 5px, transparent 5.5px) 8px 0 / 16px 12px repeat-x; }
[data-theme="dulce"] .band::before, [data-theme="dulce"] .band::after { height: 20px; background: radial-gradient(circle at 10px 0, var(--band-bg) 10px, transparent 10.5px) 0 0 / 20px 20px repeat-x; transform: none; }
[data-theme="dulce"] .band::before { top: -19px; transform: rotate(180deg); }
[data-theme="dulce"] .band::after { bottom: -19px; }
[data-theme="dulce"] .band { border: 0; }
[data-theme="dulce"] .perk-ico { border-color: #fff; background: #fff; color: #ff6fb5; }
[data-theme="dulce"] .about-logo { box-shadow: 0 0 0 10px #ffb8dc, 0 0 0 20px #d9ccff; border-color: #fff; }
[data-theme="dulce"] .site-header { border-bottom-style: dashed; }
[data-theme="dulce"] .footer-bottom { border-top-color: rgba(90,58,122,.2); }
[data-theme="dulce"] .footer-logo .beads, [data-theme="dulce"] .footer-logo .charm, [data-theme="dulce"] .footer-logo .charm-eye { stroke: #ff6fb5; }

/* ============ 4. BOUTIQUE ELEGANTE: crema, blush y malva, líneas finas ============ */
[data-theme="boutique"] {
  --accent: #b5657a;
  --accent-deep: #964d61;
  --accent-soft: #e7b9c4;
  --accent-2: #6d4c5c;
  --accent-3: #ead7c3;
  --accent-4: #dde5da;
  --accent-5: #efdfe3;
  --danger: #b33a4f;
  --ink: #3b2a31;
  --muted: #8b7680;
  --on-accent: #fff;
  --bg: #fbf7f3;
  --bg-image: none;
  --bg-size: auto;
  --surface: #fff;
  --surface-2: #f6efea;
  --surface-3: #f3e6e6;
  --field-bg: #fff;
  --line: #e6d8d0;
  --bw: 1px;
  --bw-sm: 1px;
  --shadow: none;
  --shadow-sm: none;
  --shadow-hover: 0 18px 40px rgba(59, 42, 49, .08);
  --shadow-panel: 0 18px 40px rgba(59, 42, 49, .06);
  --shadow-img: none;
  --radius: 4px;
  --radius-lg: 4px;
  --radius-sm: 2px;
  --radius-btn: 0;
  --tilt: 0deg;
  --lift: translateY(-3px);
  --f-display: 'Playfair Display', Georgia, serif;
  --f-body: 'Jost', 'Outfit', sans-serif;
  --display-style: normal;
  --display-weight: 500;
  --title-spacing: 0;
  --nav-case: uppercase;
  --nav-spacing: .16em;
  --announce-bg: #3b2a31;
  --announce-ink: #f3e6e6;
  --header-bg: rgba(251, 247, 243, .95);
  --hero-bg: linear-gradient(180deg, #f6ebe6 0%, #fbf7f3 100%);
  --hero-ink: #3b2a31;
  --hero-title-shadow: none;
  --hero-dots: none;
  --hero-em: #b5657a;
  --band-bg: #f3e6e6;
  --band-ink: #3b2a31;
  --footer-bg: #3b2a31;
  --footer-ink: #f1e6e9;
  --footer-head: #e7b9c4;
  --logo-ink: #3b2a31;
  --bead: #b5657a;
  --marquee-bg: transparent;
  --marquee-ink: #b5657a;
  --marquee-tilt: 0deg;
}
[data-theme="boutique"] .announce { font-weight: 400; letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; }
[data-theme="boutique"] .main-nav a { font-weight: 500; font-size: .82rem; }
[data-theme="boutique"] .main-nav a:hover { background: none; color: var(--accent); }
[data-theme="boutique"] .main-nav.open a { font-size: 1.35rem; padding: 10px 0; }
[data-theme="boutique"] .main-nav.open .nav-social a { font-size: 1rem; padding: 0; }
[data-theme="boutique"] .btn { border-color: var(--ink); background: var(--ink); font-weight: 500; font-size: .85rem; padding: 14px 28px; }
[data-theme="boutique"] .btn:hover { background: var(--accent); border-color: var(--accent); transform: none; }
[data-theme="boutique"] .btn-ghost { background: transparent; color: var(--ink); }
[data-theme="boutique"] .btn-ghost:hover { background: var(--ink); color: #fff; }
[data-theme="boutique"] .sticker { background: none !important; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; color: var(--accent) !important; padding: 0 0 4px; letter-spacing: .2em; text-transform: uppercase; font-weight: 500; font-size: .72rem; box-shadow: none; }
[data-theme="boutique"] .hero h1 { font-size: clamp(2.4rem, 6.4vw, 4.6rem); }
[data-theme="boutique"] .hero h1, [data-theme="boutique"] .page-hero h1 { font-style: normal; }
[data-theme="boutique"] .arch { border: 0; box-shadow: none; }
[data-theme="boutique"] .arch-0 { transform: none; } [data-theme="boutique"] .arch-1 { transform: none; } [data-theme="boutique"] .arch-2 { transform: none; border-radius: 999px 999px 0 0; }
[data-theme="boutique"] .spin-badge { background: #fff; border-color: var(--line); }
[data-theme="boutique"] .spin-badge text { fill: var(--accent); font-weight: 500; }
[data-theme="boutique"] .float-heart { display: none; }
[data-theme="boutique"] .big-marquee { border-color: var(--line); }
[data-theme="boutique"] .big-marquee b { color: var(--accent-soft); }
[data-theme="boutique"] .title-deco::after { background: var(--accent); height: 1px; width: 60px; margin-top: 14px; }
[data-theme="boutique"] .cat-tile { border: 0; min-height: 220px; }
[data-theme="boutique"] .cat-tile:hover { transform: none; }
[data-theme="boutique"] .cat-deco { display: none; }
[data-theme="boutique"] .card { border: 0; padding: 0 0 8px; background: transparent; }
[data-theme="boutique"] .card-img { border: 0; }
[data-theme="boutique"] .card h3 { font-weight: 400; text-align: center; }
[data-theme="boutique"] .card .price { justify-content: center; }
[data-theme="boutique"] .price strong { font-family: var(--f-body); font-weight: 500; color: var(--ink); font-size: 1rem; }
[data-theme="boutique"] .card-add { background: transparent; border-color: var(--ink); text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; font-weight: 500; }
[data-theme="boutique"] .card-add:hover { background: var(--ink); }
[data-theme="boutique"] .burst { clip-path: none; transform: none; width: auto; height: auto; padding: 4px 10px; background: var(--accent); color: #fff; font-weight: 500; }
[data-theme="boutique"] .band::before, [data-theme="boutique"] .band::after { display: none; }
[data-theme="boutique"] .band { border-color: var(--line); }
[data-theme="boutique"] .perk-ico { background: transparent; border-color: var(--accent); color: var(--accent); }
[data-theme="boutique"] .about-teaser { border: 0; border-radius: 0; background: var(--surface-3); }
[data-theme="boutique"] .about-logo { box-shadow: none; border: 1px solid var(--line); }
[data-theme="boutique"] .site-footer .wave, [data-theme="boutique"] .hero-wave { display: none; }
[data-theme="boutique"] .chip.on { background: var(--ink); }
[data-theme="boutique"] .icon-btn, [data-theme="boutique"] .menu-btn { border: 0; background: transparent; }
[data-theme="boutique"] .bag-btn { background: transparent; color: var(--ink); }
[data-theme="boutique"] .bag-count { background: var(--accent); color: #fff; border: 0; }
[data-theme="boutique"] .wa-float { border: 0; box-shadow: 0 8px 20px rgba(0,0,0,.15); }
[data-theme="boutique"] .gallery-main { border: 0; }

/* ============ 5. BOHEMIA ENERGÉTICA: terracota, salvia y arena, formas orgánicas ============ */
[data-theme="boho"] {
  --accent: #c8553d;
  --accent-deep: #a8432e;
  --accent-soft: #f0a58f;
  --accent-2: #7a4b8c;
  --accent-3: #e9b949;
  --accent-4: #a7b98a;
  --accent-5: #e8cfc0;
  --danger: #b8352a;
  --ink: #3e2a20;
  --muted: #8a6f5f;
  --on-accent: #fff8f0;
  --bg: #f6ecdf;
  --bg-image: radial-gradient(circle at 50% 50%, rgba(200, 85, 61, .05) 0 30%, transparent 31%);
  --bg-size: 60px 60px;
  --surface: #fffaf3;
  --surface-2: #efe3d1;
  --surface-3: #f1d9c9;
  --field-bg: #fffaf3;
  --line: #3e2a20;
  --bw: 2px;
  --bw-sm: 1.5px;
  --shadow: 5px 5px 0 #e9b949;
  --shadow-sm: 3px 3px 0 #e9b949;
  --shadow-hover: 8px 8px 0 #a7b98a;
  --shadow-panel: 7px 7px 0 #a7b98a;
  --shadow-img: 12px 12px 0 #a7b98a;
  --radius: 28px 8px 28px 8px;
  --radius-lg: 120px 120px 24px 24px;
  --radius-sm: 18px 6px 18px 6px;
  --tilt: -2deg;
  --f-display: 'Fraunces', Georgia, serif;
  --display-style: normal;
  --display-weight: 600;
  --announce-bg: #3e2a20;
  --announce-ink: #e9b949;
  --header-bg: rgba(246, 236, 223, .94);
  --hero-bg: linear-gradient(160deg, #c8553d 0%, #d97b4f 50%, #e9b949 100%);
  --hero-ink: #fff8f0;
  --hero-title-shadow: 3px 3px 0 rgba(62, 42, 32, .35);
  --hero-dots: radial-gradient(circle at 50% 50%, rgba(255, 248, 240, .14) 0 22%, transparent 23%);
  --hero-em: #3e2a20;
  --band-bg: #7a4b8c;
  --band-ink: #fff8f0;
  --footer-bg: #3e2a20;
  --footer-ink: #f6ecdf;
  --footer-head: #e9b949;
  --logo-ink: #3e2a20;
  --bead: #c8553d;
  --marquee-bg: #a7b98a;
  --marquee-ink: #3e2a20;
  --marquee-tilt: 0deg;
}
[data-theme="boho"] .dots { background-size: 90px 90px; }
[data-theme="boho"] .arch { border-width: 3px; }
[data-theme="boho"] .arch-0 { border-radius: 60% 40% 55% 45% / 50% 45% 55% 50%; }
[data-theme="boho"] .arch-1 { border-radius: 45% 55% 40% 60% / 55% 40% 60% 45%; }
[data-theme="boho"] .arch-2 { border-radius: 50% 50% 45% 55% / 40% 60% 40% 60%; }
[data-theme="boho"] .spin-badge { background: #a7b98a; }
[data-theme="boho"] .float-heart { color: #fff8f0; }
[data-theme="boho"] .fh-3 { color: #7a4b8c; }
[data-theme="boho"] .title-deco::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='12'%3E%3Cpath d='M0 6 Q6 0 12 6 T24 6' fill='none' stroke='%23c8553d' stroke-width='2'/%3E%3C/svg%3E") repeat-x; }
[data-theme="boho"] .tile-pink { background-color: #c8553d; }
[data-theme="boho"] .tile-purple { background-color: #7a4b8c; }
[data-theme="boho"] .tile-red { background-color: #a8432e; }
[data-theme="boho"] .band::before, [data-theme="boho"] .band::after { height: 16px; background: radial-gradient(circle at 12px 16px, var(--band-bg) 12px, transparent 12.5px) 0 0 / 24px 16px repeat-x; transform: none; }
[data-theme="boho"] .band::before { top: -16px; }
[data-theme="boho"] .band::after { bottom: -16px; transform: rotate(180deg); }
[data-theme="boho"] .about-logo { box-shadow: 0 0 0 10px #a7b98a, 0 0 0 12px var(--line); }
[data-theme="boho"] .about-teaser { border-radius: 40px 12px 40px 12px; }
[data-theme="boho"] .sticker { box-shadow: 2px 2px 0 var(--line); }