/*
Theme Name: Powergy Theme
Description: A child theme of Themify Ultra
Template: themify-ultra
Author: Caracas Creative Studio
Author URI: https://www.caracascreative.studio
*/

/* 1. VARIABLES GLOBALES */
:root {
    --primary-color: #44b549;          /* Verde de acento Powergy */
    --text-main: #000000;             /* Color de texto */
    --bg-body: #ffffff;               /* Fondo blanco */
    --font-main: 'Roboto', sans-serif; /* Fuente configurada*/
    
    /* Configuración de listas */
    --list-indent: 0em;
    --icon-spacing: -2em;
}

/* 2. OPTIMIZACIÓN DE TIPOGRAFÍA Y CUERPO */
body {
    font-family: var(--font-main) !important; 
    font-size: 0.8em;               
    line-height: 1.5;               
    text-align: justify;            
    color: var(--text-main);
    background-color: var(--bg-body);
}

/* 3. SUSTITUCIÓN DE VIÑETAS (Consolidado y Seguro) */

/* Selectores que SI llevan viñetas por defecto (Contenido puro) */
.entry-content ul, 
.module-text ul, 
.module-feature ul,
.module-service ul,
.vineta ul {
    list-style: none !important;
    padding-left: var(--list-indent) !important;
    margin-bottom: 1.5rem;
}

.entry-content ul li, 
.module-text ul li, 
.module-feature ul li,
.module-service ul li,
.vineta ul li {
    position: relative;
    margin-bottom: 0.5rem;
}

/* El símbolo ► aplicado solo a los contenedores anteriores */
.entry-content ul li::before, 
.module-text ul li::before, 
.module-feature ul li::before,
.module-service ul li::before,
.vineta ul li::before {
    content: "►";
    position: absolute;
    left: var(--icon-spacing);
    color: var(--primary-color);
    font-size: 0.75em;
    top: 0.25em;
    speak: none;
    -webkit-font-smoothing: antialiased;
}

/* 4. REGLAS DE EXCLUSIÓN CRÍTICAS (Tabs, Menús, Paginación) */
/*#main-nav li::before, 
.ui-tabs-nav li::before, 
.breadcrumb li::before, 
.module-menu li::before,
.pager li::before,
.module-slider .pager li::before {
    content: none !important;
    display: none !important;
}*/

/* Reset de márgenes para elementos que no deben tener sangría */
/*#main-nav li, 
.ui-tabs-nav li, 
.module-slider .pager li {
    margin-left: 0 !important;
    padding-left: 0 !important;
}*/

/* 5. ESTILOS DE ENLACES */
a {
    color: var(--text-main);
    font-weight: bold;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-color);
    text-decoration: none;
}

/* 6. MANTENIMIENTO DE GUIONES Y LEGIBILIDAD */
p, .guion, #guion {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word;
}
/*
h1, h2, h3, h4, h5, h6, .guion, #guion {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word;
}*/

/*HEADER MOBILE COLOR*/
#headerwrap.fixed-header, .mobile-menu-visible #headerwrap, .transparent-header #headerwrap.fixed-header {
    background-color: rgba(255, 255, 255, .8);
}


/* Clase para añadir flecha verde a elementos específicos del menú */
.menu-flecha > a::before {
    content: "→"; /* Puedes usar una flecha de texto o un código Unicode */
    display: inline-block;
    margin-right: 8px; /* Espacio entre la flecha y el texto */
    color: #4CAF50; /* El verde que estamos usando para Powergy */
    font-weight: bold;
    transition: transform 0.3s ease;
}

/* Efecto opcional: que la flecha se mueva un poco al pasar el mouse */
.menu-flecha:hover > a::before {
    transform: translateX(5px);
    color: #ccc; /* Cambia a gris al hacer hover, o el color que prefieras */
}