/*
Theme Name: Genesis Theme Pro
Theme URI: https://www.enelvalle.cl/Genesis
Author: En El VAlle Spa
Author URI: https://www.enelvalle.cl/
Description: Tema WordPress moderno con layout corporativo sin WooCommerce. Colores modulares y 9 Secciones.
Version: 4.0
Text Domain: genesis-theme
Tags: responsive, dark-mode, neon, artisanal
License: GPLv2 or later
*/

/* [CORRECCIÓN PRO] PREVENIR DESBORDAMIENTO HORIZONTAL EN MÓVIL */
html, body {
 overflow-x: hidden !important;
 width: 100%;
 position: relative;
 max-width: 100vw;
}

/* VARIABLES CSS GLOBALES (Se sobreescriben dinámicamente desde PHP) */
:root{ 
--color-fondo-claro:#F5F2EC; 
--color-fondo-oscuro:#000000; 
--color-acento:#32C1FF; 
--color-acento-alt:#52FFA8; 
--color-texto-secundario:#2B2B2B; 
--color-fondo-tarjeta:#D9D9D9; 
--color-alerta:#E94823; 
--fuente-global:'Inter', sans-serif; 
} 

/* ESTILOS BASE */
body{ 
background-color: var(--color-fondo-claro); 
color: var(--color-texto-secundario); 
}

/* Botones y enlaces */
.btn-primary{ 
background-color: var(--color-acento); 
color: var(--color-fondo-oscuro); 
border-radius:.75rem; padding:.75rem 1.25rem; font-weight:700; transition: all .3s ease; 
}
.btn-primary:hover{ 
background-color: var(--color-acento-alt); 
color: var(--color-fondo-oscuro); 
}
a{ 
color: var(--color-acento); 
text-decoration:none; 
transition: color .2s ease; 
}
a:hover{ color: var(--color-acento-alt); } 

/* Identidad (LA CORRECCIÓN DEL LOGO) */
.custom-logo img { max-height: 60px !important; width: auto !important; transition: max-height 0.3s ease; }
.custom-logo{ max-height:60px; width:auto; } 
.site-title{ color: var(--color-fondo-oscuro); }
.site-description{ color: var(--color-texto-secundario); }
.main-navigation a{ color: var(--color-fondo-oscuro); font-weight:500; }
.main-navigation a:hover{ color: var(--color-acento); } 

/* Menú inferior móvil */
#mobile-bottom-nav{ 
backdrop-filter: blur(5px); 
background-color: var(--color-fondo-claro); 
border-top: 1px solid var(--color-fondo-oscuro);
 max-width: 100vw; 
box-sizing: border-box;
}
#mobile-bottom-nav ul li a{ color: var(--color-fondo-oscuro); }
body.dark #mobile-bottom-nav{ 
background-color: var(--color-fondo-oscuro) !important; 
border-top-color: var(--color-acento) !important; 
color: var(--color-fondo-claro);
}

/* MODO OSCURO */
body.dark { 
background-color: var(--color-fondo-oscuro); 
color: var(--color-fondo-claro); 
}
body.dark #main-header { 
background-color: var(--color-fondo-oscuro) !important; 
border-bottom-color: var(--color-acento) !important; 
}
.dark .site-title{ color: var(--color-fondo-claro); }
.dark .site-description{ color: var(--color-acento); } 
.dark a { color: var(--color-acento) !important; } 
.dark a:hover { color: var(--color-acento-alt) !important; }
.dark .bg-white, .dark .bg-gray-50 { background-color: var(--color-fondo-oscuro) !important; }
.dark .text-gray-900 { color: var(--color-fondo-claro) !important; } 
.dark .text-gray-700, .dark .text-gray-600 { color: var(--color-acento) !important; } 
.dark .border-gray-200 { border-color: var(--color-texto-secundario) !important; }

/* === OPTIMIZACIÓN MÓVIL GLOBAL === */

/* Asegura que las imágenes no desborden en los grids */
img {
 max-width: 100%;
 height: auto;
}

/* Tipografía Responsiva Global (Safety Net) */
@media (max-width: 640px) {
 h1 { font-size: 2rem !important; line-height: 1.1; }
 h2 { font-size: 1.75rem !important; line-height: 1.2; }
 h3 { font-size: 1.25rem !important; line-height: 1.3; }
 
/* Ajuste específico para tarjetas de servicios */
 .grid h3 { 
font-size: 1rem !important; /* 16px */
 }
 
/* Ajuste de padding en contenedores generales */
 .container {
 padding-left: 1rem !important;
 padding-right: 1rem !important;
 }
}

/*ADICIONAL*/

#main-header {
 backdrop-filter: blur(12px); /* Efecto de vidrio esmerilado */
 -webkit-backdrop-filter: blur(12px);
 background-color: rgba(245, 242, 236, 0.85) !important; /* Crema con transparencia */
}

.dark #main-header {
 background-color: rgba(0, 0, 0, 0.8) !important; /* Oscuro con transparencia */
}

/* Botones de navegación más limpios */
.main-navigation ul li a {
 font-weight: 500;
 letter-spacing: -0.01em;
 padding: 0.5rem 1rem !important;
 border-radius: 8px;
 transition: background 0.3s ease;
}

.main-navigation ul li a:hover {
 background: rgba(50, 193, 255, 0.1); /* Fondo sutil al pasar el mouse */
}