/* =========================================
   1. VARIABLES & RESET (PALETA BOUTIQUE)
   ========================================= */
   :root {
    /* Tonos ajustados para ser elegantes y modernos */
    --c-bg-main: #FCFBF9; /* Blanco roto muy c�lido y limpio */
    --c-bg-alt: #F4F1EA; /* Crema sutil para alternar secciones */
    
    --c-accent: #C5A880; /* Dorado mate elegante */
    --c-primary: #D29D74; /* El "p�rpura/melocot�n" suavizado a tono arcilla/terracota */
    --c-primary-dark: #A47E8A; /* El lila oscuro convertido en un malva sofisticado */
    
    --c-text-main: #4A4541; /* Gris carb�n c�lido (nunca negro puro) */
    --c-text-light: #8B857D; /* Gris suave para subt�tulos */
    --c-title: #2B2825; /* Casi negro c�lido para t�tulos */
    
    /* Fuentes */
    --font-roman: 'Cinzel', serif;
    --font-serif: 'Playfair Display', serif;
    --font-body: 'Lato', sans-serif;
    
    /* Sombras modernas (muy difuminadas) */
    --shadow-soft: 0 10px 40px rgba(0,0,0,0.04);
    --shadow-hover: 0 15px 50px rgba(43, 40, 37, 0.08);
}

body {
    background-color: var(--c-bg-main);
    color: var(--c-text-main);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

/* Reset Astra Fixes */
.main-layout-modern { width: 100%; overflow: hidden; }
.ast-container, .site-content { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
.container-pro { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 800px; margin: 0 auto; padding: 0 24px; }
.text-center { text-align: center; }
.relative-z { position: relative; z-index: 10; height: 100%; }
.mb-60 { margin-bottom: 60px; }
.mt-20 { margin-top: 20px; }

/* Tipograf�a Global */
.title-roman-dark { font-family: var(--font-roman); color: var(--c-title); font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 500; margin-bottom: 15px; }
.lg-text { font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1.1; }
#ast-desktop-header {
    background: #d9c4a1;
}

#content > div > div > section.section-categories-modern { background: #d9c4a1; }
.site-header .main-header-menu .menu-item > .menu-link,
.site-header .main-header-menu .menu-item > a {
    color: #000000 !important;
    font-weight: 500; /* Opcional: le da un poco m�s de grosor para que se lea mejor */
}

/* Efecto Hover: Cambia a tu color terracota/dorado al pasar el rat�n */
.site-header .main-header-menu .menu-item:hover > .menu-link,
.site-header .main-header-menu .menu-item:hover > a {
    color: var(--c-primary) !important;
    font-weight: 200; 
}

/* =========================================
   2. HEADER CENTRADO WOOCOMMERCE
   ========================================= */
.site-header {
    background: #FFFFFF;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.site-header .ast-main-header-bar-content, 
.site-header .main-header-bar-wrap {
    max-width: 1240px !important;
    margin: 0 auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* =========================================
   3. HERO SLIDER (ESTILO EDITORIAL)
   ========================================= */
.hero-modern-container {
    position: relative;
    height: 80vh; /* Ocupa el 80% de la pantalla */
    min-height: 600px;
    background-color: var(--c-title);
    display: flex;
    align-items: center;
}

.hero-slide {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0; z-index: 1;
    transition: opacity 1.5s ease-in-out; /* Transici�n muy suave */
}

/* Gradiente lateral para leer bien el texto sin oscurecer toda la foto */
.slide-overlay-gradient {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%);
}

.slide-content-left {
    height: 100%; display: flex; flex-direction: column; justify-content: center;
    max-width: 600px; color: #fff;
}

.slide-subtitle-modern { font-family: var(--font-body); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 4px; color: var(--c-accent); margin-bottom: 15px; display: block; }
.slide-title-modern { font-family: var(--font-roman); font-size: clamp(3rem, 6vw, 4.5rem); line-height: 1.05; margin-bottom: 20px; color: #fff; font-weight: 400; }
.slide-desc-modern { font-family: var(--font-serif); font-size: 1.2rem; font-style: italic; color: rgba(255,255,255,0.8); margin-bottom: 40px; line-height: 1.5; }

/* Botones Modernos */
.btn-modern {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 16px 36px; font-family: var(--font-body); font-size: 0.85rem;
    text-transform: uppercase; letter-spacing: 2px; text-decoration: none;
    transition: all 0.4s ease; cursor: pointer; border-radius: 2px;
}
.btn-primary-outline { border: 1px solid #fff; color: #fff; background: transparent; width: fit-content; }
.btn-primary-outline:hover { background: #fff; color: var(--c-title); }
.btn-solid-accent { background: var(--c-primary); color: #fff; border: 1px solid var(--c-primary); width: fit-content;}
.btn-solid-accent:hover { background: transparent; color: var(--c-primary); }

/* Flechas Minimalistas */
.slider-controls { position: absolute; bottom: 40px; right: 40px; z-index: 20; display: flex; gap: 10px; }
.slider-arrow-modern {
    width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3);
    background: transparent; color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: 0.3s;
}
.slider-arrow-modern:hover { background: #fff; color: var(--c-title); border-color: #fff; }

/* =========================================
   4. CATEGOR�AS (CLEAN GRID)
   ========================================= */
.section-categories-modern { padding: 80px 0 40px; background: var(--c-bg-main); }
.cat-grid-modern { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }

.cat-item-modern { text-align: center; text-decoration: none; group; display: block; }
.cat-img-wrapper {
    width: 100px; height: 100px; margin: 0 auto 15px;
    border-radius: 50%; overflow: hidden;
    background: var(--c-bg-alt); transition: transform 0.4s ease;
}
.cat-img-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: 0.4s; }
.cat-item-modern:hover .cat-img-wrapper { transform: translateY(-5px); }
.cat-item-modern:hover img { transform: scale(1.1); }
.cat-title-modern { font-family: var(--font-roman); font-size: 0.8rem; color: var(--c-title); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }

/* =========================================
   5. INTRODUCCI�N BOUTIQUE
   ========================================= */
.section-intro-boutique { padding: 60px 0 100px; background: var(--c-bg-main); }
.logo-intro-modern { max-width: 220px; margin: 0 auto 20px; display: block; }
.subtitle-serif-gold { font-family: var(--font-serif); font-size: 1.8rem; color: var(--c-accent); font-style: italic; font-weight: 400; margin: 0; }
.separator-line { width: 40px; height: 1px; background: var(--c-accent); margin: 25px auto; }
.text-lead-modern { font-size: 1.1rem; color: var(--c-text-main); line-height: 1.8; }

/* =========================================
   6. PRODUCTOS WOOCOMMERCE (TIPO REVISTA)
   ========================================= */
.section-products-modern { padding: 80px 0; background: var(--c-bg-alt); }
.section-header-modern { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; }
.link-discover { font-family: var(--font-body); font-size: 0.85rem; color: var(--c-primary); text-transform: uppercase; letter-spacing: 1px; font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: 5px; }
.link-discover:hover { color: var(--c-title); }

.grid-products-modern { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 30px; }

.product-card-boutique { background: #fff; border-radius: 4px; transition: all 0.4s ease; box-shadow: var(--shadow-soft); display: flex; flex-direction: column; overflow: hidden;}
.product-card-boutique:hover { box-shadow: var(--shadow-hover); transform: translateY(-5px); }

.img-wrapper-boutique { position: relative; overflow: hidden; aspect-ratio: 4/5; /* Proporci�n de moda/vertical */ background: #f9f9f9; }
.img-wrapper-boutique img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.product-card-boutique:hover .img-wrapper-boutique img { transform: scale(1.05); }

.badge-sale { position: absolute; top: 15px; left: 15px; background: var(--c-primary-dark); color: #fff; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; padding: 4px 12px; border-radius: 2px; z-index: 2; }

/* Bot�n de a�adir deslizable desde abajo */
.add-to-cart-overlay { position: absolute; bottom: -60px; left: 0; width: 100%; padding: 0 15px 15px; transition: bottom 0.3s ease; z-index: 10; }
.product-card-boutique:hover .add-to-cart-overlay { bottom: 0; }
.btn-add-modern { display: block; width: 100%; background: rgba(255,255,255,0.95); color: var(--c-title); text-align: center; padding: 12px 0; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; text-decoration: none; border: 1px solid #eee; transition: 0.3s; }
.btn-add-modern:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

.info-boutique { padding: 25px 20px; text-align: center; display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; }
.cat-label-modern { font-size: 0.7rem; color: var(--c-text-light); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; display: block; }
.product-title-modern { font-family: var(--font-roman); font-size: 1.1rem; font-weight: 500; margin: 0 0 10px; line-height: 1.3; }
.product-title-modern a { color: var(--c-title); text-decoration: none; }
.price-modern { font-family: var(--font-body); font-size: 1.1rem; color: var(--c-primary); font-weight: 600; }

/* =========================================
   7. SECCI�N SPLIT (EDITORIAL)
   ========================================= */
.section-split-editorial { padding: 100px 0; background: #fff; }
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split-img-box { background: var(--c-bg-alt); padding: 40px; border-radius: 4px; text-align: center; height: 100%; display: flex; align-items: center; justify-content: center; }
.split-img-box img { max-width: 100%; height: auto; mix-blend-mode: multiply; /* Para quitar fondos blancos si la imagen los tiene */ }

.label-accent { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; color: var(--c-accent); font-weight: 700; display: block; margin-bottom: 15px; }
.desc-editorial { font-size: 1.1rem; color: var(--c-text-main); line-height: 1.8; margin-bottom: 30px; }
.list-editorial { list-style: none; padding: 0; margin: 0 0 30px; }
.list-editorial li { margin-bottom: 15px; display: flex; align-items: center; gap: 10px; color: var(--c-title); }
.list-editorial li span { color: var(--c-primary); font-size: 1.2rem; }

/* =========================================
   8. PROCESO (LIMPIO Y ESPACIOSO)
   ========================================= */
.section-process-modern { padding: 80px 0; background: var(--c-bg-alt); }
.grid-process-modern { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.process-item-modern { text-align: center; padding: 20px; }
.icon-circle { width: 80px; height: 80px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 20px; box-shadow: var(--shadow-soft); color: var(--c-primary); }
.process-title { font-family: var(--font-roman); font-size: 1.2rem; color: var(--c-title); margin-bottom: 15px; }
.process-desc { color: var(--c-text-main); font-size: 0.95rem; }

/* =========================================
   9. FAQ (ACORDE�N MINIMALISTA)
   ========================================= */
.section-faq-modern { padding: 100px 0; background: #fff; }
.faq-accordion { border-top: 1px solid #EAEAEA; }
.faq-block { border-bottom: 1px solid #EAEAEA; }
.faq-btn {
    width: 100%; background: none; border: none; padding: 25px 0; text-align: left;
    font-family: var(--font-roman); font-size: 1.1rem; color: var(--c-title);
    cursor: pointer; display: flex; justify-content: space-between; align-items: center;
    transition: color 0.3s;
}
.faq-btn:hover { color: var(--c-primary); }
.faq-icon-svg { position: relative; width: 16px; height: 16px; }
.faq-icon-svg::before, .faq-icon-svg::after { content: ''; position: absolute; background: var(--c-accent); transition: 0.3s; }
.faq-icon-svg::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq-icon-svg::after { top: 0; left: 7px; width: 2px; height: 16px; }
.faq-block.active .faq-icon-svg::after { transform: rotate(90deg); opacity: 0; }
.faq-block.active .faq-btn { color: var(--c-primary); }

.faq-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; }
.faq-content p { padding-bottom: 25px; margin: 0; color: var(--c-text-main); line-height: 1.7; }

/* =========================================
   10. RESPONSIVE DESIGN (M�VIL)
   ========================================= */
@media (max-width: 992px) {
    .split-grid { grid-template-columns: 1fr; gap: 40px; }
    .cat-grid-modern { grid-template-columns: repeat(3, 1fr); }
    .slide-content-left { max-width: 100%; text-align: center; align-items: center; }
    .slide-overlay-gradient { background: rgba(0,0,0,0.5); }
    .slider-controls { bottom: 20px; right: 50%; transform: translateX(50%); }
}

@media (max-width: 768px) {
    .cat-grid-modern { display: flex; overflow-x: auto; padding-bottom: 20px; scroll-snap-type: x mandatory; justify-content: flex-start; }
    .cat-item-modern { flex: 0 0 120px; scroll-snap-align: start; }
    .grid-process-modern { grid-template-columns: 1fr; }
    .hero-modern-container { height: 70vh; }
    .section-header-modern { flex-direction: column; align-items: flex-start; gap: 15px; }
}

/* =========================================
   11. ARREGLOS WOOCOMMERCE TIENDA (TUS AJUSTES MEJORADOS)
   ========================================= */
.archive.woocommerce .ast-container,
.archive.woocommerce .site-content {
    max-width: 1240px !important; margin: 0 auto !important; padding: 0 24px !important; box-sizing: border-box;
}

@media (min-width: 922px) {
    .archive.woocommerce #secondary { width: 25% !important; padding-right: 30px; border-right: 1px solid #EAEAEA; }
    .archive.woocommerce #primary { width: 75% !important; padding-left: 30px; }
}

.widget-title { font-family: var(--font-roman); font-size: 1.2rem; color: var(--c-title); margin-bottom: 20px; border-bottom: none; display: block; }