/**
 * Hogar y Trucos — Estilos personalizados front-end
 * ─────────────────────────────────────────────────────────
 * Proyecto:    hogarytrucos.com
 * Tema:        Divi 5
 * Tipografía:  Poppins (títulos) + Source Sans 3 (cuerpo)
 * ─────────────────────────────────────────────────────────
 *
 * ÍNDICE:
 * 1. Variables CSS del proyecto
 * 2. Tipografía global
 * 3. Header y navegación
 * 4. Hero
 * 5. Página de inicio
 * 6. Artículo individual
 * 7. Footer
 * 8. Utilidades
 * 9. Responsive
 * ─────────────────────────────────────────────────────────
 */


/* ─────────────────────────────────────────────
   1. VARIABLES CSS DEL PROYECTO
   ───────────────────────────────────────────── */


/* ─────────────────────────────────────────────
   2. TIPOGRAFÍA GLOBAL
   ───────────────────────────────────────────── */



/* ─────────────────────────────────────────────
   3. HEADER Y NAVEGACIÓN
   ───────────────────────────────────────────── */

/* Forzar columnas en la misma línea en móvil */
@media (max-width: 767px) {

    /* Fila en flex para alinear columnas */
    .header-row.et_pb_row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* Columnas al 50% sin apilarse */
    .header-row .et_pb_column {
        width: 50% !important;
        flex: 0 0 50% !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Quitar espacios internos del texto logo */
    .header-row .et_pb_column_0_tb_header .et_pb_text_inner {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Menú móvil alineado a la derecha */
    .header-row .et_pb_column_1_tb_header .et_pb_menu_inner_container {
        justify-content: flex-end !important;
    }
}

/*----color ancho del fondo----------*/

@media (max-width: 767px) {
    div.mobile_nav.opened {
        position: fixed !important;
        top: 112px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        background-color: #A8D5BA !important;
        z-index: 99999 !important;
        padding: 10px 0 !important;
    }

    div.mobile_nav.opened ul {
        width: 100% !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }

    div.mobile_nav.opened ul li a {
        color: #3D3D6B !important;
        padding: 10px 0 !important;
        display: block !important;
        white-space: normal !important;
        word-break: break-word !important;
    }
}

/* ─────────────────────────────────────────────
   4. HERO
   ───────────────────────────────────────────── */



/* ─────────────────────────────────────────────
   5. PÁGINA DE INICIO
   ───────────────────────────────────────────── */
.section-title h2 {
    display: inline-block;
    padding-bottom: 10px;
    border-bottom: 3px solid #A8D5BA;
}



/* ─────────────────────────────────────────────
   6. ARTÍCULO INDIVIDUAL
   ───────────────────────────────────────────── */
/* Sidebar */
.et_pb_widget h2,
.et_pb_widget h3 {
    font-family: var(--hyt-font-titulos) !important;
    font-size: 16px !important;
    color: #3D3D6B !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #A8D5BA !important;
}

.et_pb_widget ul li {
    font-family: var(--hyt-font-cuerpo) !important;
    font-size: 14px !important;
    color: #333333 !important;
    padding: 4px 0 !important;
    border-bottom: 0.5px solid #E3F5EB !important;
}

.et_pb_widget ul li a {
    color: #333333 !important;
}

.et_pb_widget ul li a:hover {
    color: #F4A261 !important;
}

.et_pb_widget p {
    font-family: var(--hyt-font-cuerpo) !important;
    font-size: 14px !important;
    color: #555555 !important;
    line-height: 1.6 !important;
}

/* Easy Table of Contents */
#ez-toc-container {
    margin-bottom: 40px !important;
}

/* ─────────────────────────────────────────────
   7. FOOTER
   ───────────────────────────────────────────── */



/* ─────────────────────────────────────────────
   8. UTILIDADES
   ───────────────────────────────────────────── */

/* Botón estilo hogarytrucos */
.hyt-btn {
    display: inline-block;
    background: var(--hyt-naranja);
    color: var(--hyt-blanco) !important;
    font-family: var(--hyt-font-titulos);
    font-weight: 600;
    font-size: var(--hyt-sm);
    padding: 12px 28px;
    border-radius: var(--hyt-radius-btn);
    transition: background 0.2s ease;
}

.hyt-btn:hover {
    background: #d4803e;
    color: var(--hyt-blanco) !important;
}

/* Caja de consejo (tip box) */
.hyt-tip {
    background: var(--hyt-verde-pastel);
    border-left: 3px solid var(--hyt-verde);
    border-radius: 0 var(--hyt-radius-sm) var(--hyt-radius-sm) 0;
    padding: 14px 18px;
    font-family: var(--hyt-font-cuerpo);
    font-size: var(--hyt-sm);
    color: var(--hyt-morado);
    line-height: 1.6;
    margin: 1.25rem 0;
}

/* color enlaces footer*/
.et-l--footer a {
    color: #3D3D6B !important;
}

.et-l--footer a:hover {
    color: var(--hyt-naranja) !important;
}

/* ─────────────────────────────────────────────
   9. RESPONSIVE
   ───────────────────────────────────────────── */

@media (max-width: 980px) {
    :root {
        --hyt-h1:   26px;
        --hyt-h2:   20px;
        --hyt-h3:   17px;
    }
}

@media (max-width: 767px) {
    :root {
        --hyt-h1:   24px;
        --hyt-h2:   19px;
        --hyt-h3:   16px;
        --hyt-body: 15px;
    }
}