/*
Theme Name: Baseframe
Description: Lightweight child theme for content-focused websites.
Author: Baseframe
Template: generatepress
Version: 0.26.2
Text Domain: baseframe
*/

/* Styles are loaded from assets/css/. */

.texto-rojo-destacado { color:#c62828; font-weight:500; font-size:1.15rem; line-height:1.4; display:block; margin-bottom:20px; }

/* ==========================================================================
   0. VARIABLES GLOBALES Y TEMA MATERNAL / TIERNO
   ========================================================================== */
:root {
    --bf-ink: #0F172A;       /* Azul noche ultra oscuro (Slate 900) para un contraste limpio y legible */
    --bf-muted: #64748B;     /* Gris azulado frío (Slate 500) para textos secundarios y subtítulos */
    --bf-link: #2563EB;      /* Azul cibernético / Royal tech (Blue 600) para enlaces e interacciones */
    --bf-divider: #E2E8F0;   /* Gris frío sutil (Slate 200) para bordes y divisiones tecnológicas */
}

/* Tipografía general y fondos con calidez */
body {
    background-color: #f1f1f170 !important; /* Blanco hueso / lino muy suave */
    color: var(--bf-ink);
    font-size: 15px;
    font-family: 'Nunito', sans-serif;
}

/* Tipografía Quicksand para encabezados y menús */
.main-navigation, 
.main-navigation a, 
.footer-widgets .widget-title, 
h1, h2, h3, h4, h5, h6 {
    font-family: 'Quicksand', sans-serif;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   1. HEADER Y MENÚ SUPERIOR (Navegación limpia y acogedora)
   ========================================================================== */
.inside-header { 
    padding: 10px 20px; 
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--bf-divider);
}

.main-navigation {
    margin-bottom: 0 !important;
    background-color: transparent !important;
}

.main-navigation .main-nav ul li a {
    color: #000 !important;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    transition: color 0.2s ease;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus {
    color: #8A6F55 !important; /* Tono terracota al pasar el cursor */
    background-color: transparent !important;
}

.site-branding .main-title, .main-title { 
    font-size: 20px; 
    line-height: 1.2; 
    font-weight: 700;
}

.menu-toggle { 
    padding: 9px 12px;
    background: #a1bfe9 !important;
    color: #2C3531 !important;
    border-radius: 8px;
}

/* ==========================================================================
   2. FOOTER Y WIDGETS (Cierre visual cálido y ordenado)
   ========================================================================== */

/* Contenedor general del footer de GeneratePress */
.site-footer {
    background-color: #FFFFFF !important;
    color: var(--bf-ink) !important;
    border-top: 1px solid var(--bf-divider) !important;
    margin-top: 40px;
}

/* Estilo para los dos widgets del footer */
.footer-widgets {
    padding: 30px 0 20px;
    background-color: #FFFFFF !important;
    border-top: 1px solid var(--bf-divider);
}

/* Títulos de los widgets en el footer */
.footer-widgets .widget-title {
    font-size: 16px;
    font-weight: 700;
    color: #2C3531;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #a1bfe9; /* Sutil acento pastel */
}

/* Listas y textos dentro de los widgets del footer */
.footer-widgets p, 
.footer-widgets li, 
.footer-widgets a {
    font-family: 'Nunito', sans-serif;
    color: var(--bf-muted) !important;
    font-size: 14px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-widgets a:hover {
    color: #8A6F55 !important;
    text-decoration: underline;
}

/* Enlaces inferiores / barra de copyright del footer */
.bf-footer-links { 
    display: flex; 
    justify-content: center; 
    flex-wrap: wrap; 
    gap: 10px 20px; 
    padding: 20px 16px; 
    border-top: 1px solid var(--bf-divider); 
    background: #FAFAF7; /* Ligeramente más suave que el blanco puro */
}

.bf-footer-links a { 
    font-size: 13px; 
    color: var(--bf-muted); 
    text-decoration: none; 
}

.bf-footer-links a:hover { 
    color: #8A6F55; 
    text-decoration: underline; 
}

/* ==========================================================================
   3. TARJETAS Y CONTENEDORES GENERALES (Look Maternal)
   ========================================================================== */
.single-post .inside-article,
.bf-product,
.bf-early-item,
.category .bf-category-group,
.single-post #right-sidebar,
.single-post #left-sidebar,
.single-post .bf-related {
    background-color: #FFFFFF !important;
    border-color: #a1bfe963 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(138, 111, 85, 0.04);
}

/* Cajas de notas o destacados editoriales */
.bf-block--note {
    background-color: #F8F5F0;
    border-left: 3px solid #C4A493;
    border-radius: 0 12px 12px 0;
}

/* Bloques de categorías en páginas de categoría */
.category .bf-category-group__children a {
    background: #F8F5F0;
    border-color: #EFE8E1;
    color: #4A5650;
    border-radius: 20px;
}

.category .bf-category-group__children a:hover {
    background: #EFE8E1;
}

/* Títulos de secciones */
.bf-section__heading, 
.single-post .bf-section__heading,
.bf-home-section__title {
    color: #2C3531;
    font-weight: 700;
}

/* Paginación */
.bf-category-pagination a, 
.bf-category-pagination .current {
    background: #a1bfe9;
    color: #4A5650;
    border-radius: 8px;
}

/* ==========================================================================
   4. HERO Y SUPERPOSICIÓN (OVERLAP)
   ========================================================================== */
.hero-imagen-destacada {
    height: 450px; 
    background-size: cover;
    background-position: center center;
    position: relative;
    z-index: 1;
}

.baseframe-has-hero .site-content {
    margin-top: -120px !important;
    position: relative;
    z-index: 10;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.one-container .site-content {
    padding: 0px;
}

.bf-section-answer {
    max-width: 90%;
    margin: 0.35rem 0 2.4rem 1.2rem;
    line-height: 1.5;
    font-weight: 400;
    color: #53684c;
}

.bf-section-answer strong { font-weight: 700; color: #35462f; }
.bf-section-answer em { font-style: italic; }

/* Single-post breadcrumbs e image headline */
.single-post .bf-breadcrumbs { max-width:1200px; margin:0 auto; padding:12px 20px; font-size:13px; color:#5b6570; line-height:1.4; }
.single-post .bf-breadcrumbs a { color:inherit; text-decoration:none; }
.single-post .bf-breadcrumbs a:hover { text-decoration:underline; }
.single-post .hero-imagen-destacada { display:flex; align-items:flex-end; isolation:isolate; }
.single-post .hero-imagen-destacada::before { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,.15) 72%,rgba(0,0,0,.06)); z-index:-1; }
.single-post .bf-hero__inner { width:min(100%,1100px); margin:0 auto; padding: 40px 24px 110px; box-sizing:border-box; }
.single-post .bf-hero__title { margin:0 0 12px; font-size: clamp(20px,3vw,35px); line-height: 1.3; color:#fff; text-wrap:balance; text-align: center; text-transform: uppercase; font-weight: 800; opacity: .9; }
.single-post .bf-hero__excerpt { margin:0; font-size: clamp(15px,1.6vw,18px); color: #fff; line-height:1.5; text-align: center; text-wrap: balance; opacity: .8; }
.single-post.baseframe-has-hero .site-content { margin-top:-80px !important; }
.single-post .entry-header:empty { display:none; }
.single-post .bf-featured-near-opening { margin:24px auto 30px; max-width:700px; }
.single-post .bf-featured-near-opening img { width:100%; height:auto; display:block; border-radius: 0px; }

/* Responsive Adjustments */
@media(max-width:767px) {
    .single-post .hero-imagen-destacada { min-height: 230px; height:auto; }
    .single-post.baseframe-has-hero .site-content { margin-top:-35px !important; }
    .inside-header { padding:10px 12px; }
    .site-branding .main-title, .main-title { font-size:20px; line-height:1.2; }
    .menu-toggle { padding:9px 12px; }
    .single-post .entry-title { font-size:clamp(25px,7vw,32px); line-height:1.18; margin-bottom:16px; }
    .bf-section-answer { max-width: 100%; margin: 0.25rem 0 1.2rem 0; font-size: 1.03em; }
}


/* AREA DE GRID DE HOME */

/* ==========================================================================
   WRAPPER Y MEJORAS VISUALES PARA LA HOME (Ancho máximo: 900px)
   ========================================================================== */

/* 1. Contenedor principal centrado a 900px */
.bf-home-container {
    width: 100%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

/* 2. Sección del header de cada categoría */
.bf-home-section__header-wrap {
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--bf-divider, #F0ECE6);
}

.bf-home-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.bf-home-section__title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--bf-ink, #2C3531);
}

/* 3. Botón "Ver todo" como cápsula/pill */
.bf-home-section__more {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bf-link, #8A6F55);
    background: #a1bfe9;
    padding: 5px 12px;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.bf-home-section__more:hover {
    background: #DFC5B4;
    color: #2C3531;
}

/* 4. Caja sutil para el texto introductorio SEO */
.bf-home-section__intro {
    background: #FBF9F6;
    border-left: 3px solid #C4A493;
    padding: 10px 14px;
    border-radius: 0 10px 10px 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--bf-muted, #6B7A72);
}

.bf-home-section__intro p {
    margin: 0 0 6px;
}

.bf-home-section__intro p:last-child {
    margin-bottom: 0;
}

/* 5. Ajustes del bloque de destacados */
.bf-featured-posts-block {
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--bf-divider, #F0ECE6);
}


/* ==========================================================================
   AJUSTE DE ANCHO DEL PRIMER WIDGET DEL FOOTER
   ========================================================================== */

/* Ajustamos el grid para escritorio: primera columna más ancha (1.8fr) y las demás equilibradas (1fr) */
.footer-widgets .inside-footer-widgets,
.inside-footer-widgets {
    display: grid !important;
    grid-template-columns: 1.9fr 1fr 1fr 1fr;
    gap: 30px !important;
}

/* Aseguramos que el texto del primer widget respire bien y no se comprima */
.footer-widgets .footer-widget-1 {
    min-width: 0;
}

.footer-widgets .footer-widget-1 p {
    line-height: 1.6;
}

/* En dispositivos móviles y tablets pequeñas, vuelve a una sola columna para cuidar la lectura */
@media (max-width: 900px) {
    .footer-widgets .inside-footer-widgets,
    .inside-footer-widgets {
        grid-template-columns: 1fr;
        gap: 24px;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Navegación a categoría padre (Breadcrumb) */
.bf-category-breadcrumbs {
    margin-bottom: 8px;
}

.bf-category-breadcrumbs a {
    font-size: 13px;
    font-weight: 600;
    color: var(--bf-link, #8A6F55);
    text-decoration: none;
    transition: color 0.2s ease;
}

.bf-category-breadcrumbs a:hover {
    color: var(--bf-ink, #2C3531);
    text-decoration: underline;
}

.bf-category-eyebrow {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bf-muted, #6B7A72);
    margin: 0;
}