/* ============================================
   TIPOGRAFÍAS MODERNAS - BOTÁNICA24
   ============================================ */

/* Importar Google Fonts modernas */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=swap');

/* ============================================
   TIPOGRAFÍA BASE DEL BODY
   ============================================ */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   TÍTULOS - Montserrat (más peso para modernidad)
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #222;
    line-height: 1.3em;
}

h1 {
    font-size: 36px;
    font-weight: 700;
}

h2 {
    font-size: 30px;
    font-weight: 600;
}

h3 {
    font-size: 24px;
    font-weight: 600;
}

h4 {
    font-size: 20px;
    font-weight: 600;
}

h5 {
    font-size: 16px;
    font-weight: 600;
}

h6 {
    font-size: 14px;
    font-weight: 600;
}

/* ============================================
   ELEMENTOS ESPECIALES
   ============================================ */

/* Subtítulos elegantes con Cormorant Garamond */
.sub-title,
.subtitle,
.PlayfairDisplay,
blockquote,
.section-title .sub-title {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
}

/* Textos ligeros */
.element-icon.style4 .title,
.element-icon.style5 .text,
body .MontserratLight,
.lastest-blog .blog-date .month,
.lastest-blog .blog-date .year {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
}

/* ============================================
   NAVEGACIÓN Y MENÚS
   ============================================ */
.main-menu > li > a,
.topbar-menu li > a,
.footer-menu li > a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* ============================================
   BOTONES Y LLAMADAS A LA ACCIÓN
   ============================================ */
.button,
input[type="submit"],
.single_add_to_cart_button,
.newsletter-submit {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ============================================
   PRODUCTOS
   ============================================ */
.product-item .product-name a,
.product-details-right .product-name,
.product-details-right .product_title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.product-item .price,
.product-details-right .price {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

/* ============================================
   BLOG
   ============================================ */
.blog-item .blog-title a,
.lastest-blog .blog-title a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.blog-item .entry-meta,
.lastest-blog .meta {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}

/* Contenido del blog */
.blog-item .blog-short-desc,
.page-main-content,
article p {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    line-height: 1.7;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
    font-family: 'Inter', sans-serif;
}

.footer .widget-title,
.footer .widgettitle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ============================================
   ELEMENTOS DECORATIVOS
   ============================================ */
.banner-text .title,
.block-banner-text .title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.section-title h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ============================================
   FORMULARIOS
   ============================================ */
input[type="text"],
input[type="email"],
textarea,
select {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}

label {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

/* ============================================
   TESTIMONIOS
   ============================================ */
.testimonials h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

.testimonials .text-in {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
}

/* ============================================
   AJUSTES ESPECÍFICOS PARA MEJORAR LEGIBILIDAD
   ============================================ */

/* Mejor espaciado en párrafos */
p {
    margin-bottom: 1.4em;
}

/* Enlaces más legibles */
a {
    transition: all 0.3s ease;
}

/* Mejor lectura en listas */
ul, ol {
    line-height: 1.7;
}

/* ============================================
   RESPONSIVE - Ajustes móviles
   ============================================ */
@media (max-width: 767px) {
    body {
        font-size: 14px;
    }
    
    h1 {
        font-size: 28px;
    }
    
    h2 {
        font-size: 24px;
    }
    
    h3 {
        font-size: 20px;
    }
    
    .main-menu > li > a {
        font-size: 14px;
    }
}

/* ============================================
   OPTIMIZACIÓN DE CARGA DE FUENTES
   ============================================ */
/* Usar font-display: swap para mejor rendimiento */
@font-face {
    font-family: 'Montserrat';
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant Garamond';
    font-display: swap;
}