/*
Theme Name: Encuadrarte Marketplace
Theme URI: https://encuadrarte.cl
Author: Agente Desarrollador IA
Author URI: https://encuadrarte.cl
Description: Tema oficial, minimalista y elegante diseñado exclusivamente para el Marketplace multivendedor de Encuadrarte. Abarca soporte total para Dokan y WooCommerce.
Version: 1.0.0
*/

/* ── RESET Y BASE ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #fafafa; font-family: 'Roboto', sans-serif; color: #333; overflow-x: hidden; }

/* ── NAVBAR ─────────────────────────────────────────── */
.ea-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: #fff; border-bottom: 1px solid #f0f0f0; transition: box-shadow 0.3s ease; }
.ea-nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.08); }
.ea-nav-inner { display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 68px; }
.ea-logo { font-family: 'Cormorant Garamond', serif; font-size: 1.45rem; font-weight: 700; color: #111; text-decoration: none; letter-spacing: 0.04em; flex-shrink: 0; }
.ea-logo:hover { color: #111; text-decoration: none; }
.ea-nav-links { display: flex; list-style: none; gap: 28px; align-items: center; margin-bottom:0;}
.ea-nav-links a { font-family: 'Roboto', sans-serif; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: #555; text-decoration: none; position: relative; padding-bottom: 4px; }
.ea-nav-links a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: #111; transition: width 0.25s ease; }
.ea-nav-links a:hover { color: #111; text-decoration:none;}
.ea-nav-links a:hover::after, .ea-nav-links li.active a::after { width: 100%; }
.ea-nav-links li.active a { color: #111; }
.ea-nav-icons { display: flex; align-items: center; gap: 16px; }
.ea-nav-icons a { color: #888; font-size: 0.88rem; text-decoration: none; transition: color 0.2s; }
.ea-nav-icons a:hover { color: #111; }

.nav-spacer { height: 68px; }

/* ── HERO Y FILTROS ──────────────────────────────────── */
.artistas-hero { background: #fff; padding: 60px 0 40px; border-bottom: 1px solid #f0f0f0; }
.artistas-hero h1 { font-family: 'Cormorant Garamond', serif; font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 300; letter-spacing: 0.04em; color: #111; margin: 0 0 10px; }
.artistas-hero p { font-family: 'Roboto', sans-serif; color: #888; font-size: 0.92rem; font-weight: 300; margin: 0; line-height: 1.6; }
.artistas-hero-meta { font-family: 'Cormorant Garamond', serif; font-size: 0.95rem; color: #bbb; font-style: italic; }

.filtros-wrap { background: #fff; padding: 20px 0; border-bottom: 1px solid #f0f0f0; position: sticky; top: 68px; z-index: 100; }
.filtros-inner { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filtro-btn { padding: 7px 18px; border: 1px solid #ddd; background: #fff; border-radius: 50px; font-family: 'Roboto', sans-serif; font-size: 0.78rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; color: #555; }
.filtro-btn:hover, .filtro-btn.activo { background: #000; color: #fff; border-color: #000; }

/* ── GRID PRINCIPAL DE ARTISTAS ────────────────────── */
.artistas-grid-wrap { padding: 40px 0 80px; }
#contador-artistas { font-family: 'Roboto', sans-serif; font-size: 0.78rem; color: #aaa; margin-bottom: 28px; }
.artistas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 32px; }

.artista-card { background: #fff; border-radius: 3px; overflow: hidden; text-align: center; padding: 36px 24px 28px; border: 1px solid #eee; transition: box-shadow 0.3s ease, transform 0.3s ease; }
.artista-card:hover { box-shadow: 0 10px 40px rgba(0,0,0,0.1); transform: translateY(-4px); }
.artista-foto-wrap { width: 110px; height: 110px; border-radius: 50%; overflow: hidden; margin: 0 auto 20px; border: 3px solid #f0f0f0; }
.artista-foto-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.artista-card:hover .artista-foto-wrap img { transform: scale(1.08); }
.artista-badge { display: inline-block; padding: 3px 12px; border-radius: 50px; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; color: #888; border: 1px solid #eee; margin-bottom: 12px; }
.artista-nombre { font-family: 'Cormorant Garamond', serif; font-size: 1.45rem; font-weight: 400; color: #111; margin: 0 0 4px; }
.artista-especialidad { font-size: 0.76rem; color: #aaa; margin: 0 0 12px; font-weight: 300; }
.artista-lema { font-family: 'Cormorant Garamond', serif; font-size: 0.95rem; font-style: italic; color: #888; margin: 0 0 18px; min-height: 44px; }
.btn-ver-tienda { display: inline-block; padding: 9px 26px; background: #000; color: #fff; border-radius: 4px; font-size: 0.76rem; font-weight: 600; text-transform: uppercase; text-decoration: none; transition: background 0.2s; }
.btn-ver-tienda:hover { background: #333; color:#fff; text-decoration:none; }

/* ── FOOTER ─────────────────────────────────────────── */
.ea-footer { background: #111; color: #aaa; padding: 60px 0 30px; }
.ea-footer h4 { font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; font-weight: 500; color: #fff; margin-bottom: 18px; }
.ea-footer p, .ea-footer a { font-family: 'Roboto', sans-serif; font-size: 0.82rem; line-height: 1.7; color: #aaa; text-decoration: none; }
.ea-footer a:hover { color: #fff; }
.ea-footer-logo { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 700; color: #fff; margin-bottom: 12px; }
.ea-footer-bottom { border-top: 1px solid #222; margin-top: 40px; padding-top: 24px; display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; }

/* ── WOOCOMMERCE & WIDGET FIXES ─────────────────────── */
.woocommerce div.product { font-family: 'Roboto', sans-serif; }
.woocommerce-products-header h1 { font-family: 'Cormorant Garamond', serif; font-size: 2.5rem; color: #111; font-weight: 400;}
ul.products li.product h2.woocommerce-loop-product__title { font-family: 'Cormorant Garamond', serif; font-size:1.3rem; color:#111; }
.button, .woocommerce a.button { background-color: #000 !important; color:#fff !important; font-family:'Roboto', sans-serif; border-radius:4px;}
.button:hover, .woocommerce a.button:hover { background-color: #333 !important;}