/* ==========================================================================
Flamtech Energy · capa de marca sobre la plantilla Solario
--------------------------------------------------------------------------
PROBADO EL 2026-09-03 inyectando este archivo en telecom.flamtech-energy.com
con el navegador. El sitio se repinta completo: barra superior, botones,
iconos, tarjetas y pie. Verificado visualmente, no por computed styles.
El hallazgo que hace esto barato: Solario saca TODO su color de variables
CSS en :root, y Flamtech solo cambio una linea (--theme-color a #0057b8).
Asi que re-tematizar el sitio entero es redefinir ocho variables. No hay
que tocar los 115 KB de style.css ni pelear con !important.
COMO SE INSTALA. En cada pagina, DESPUES de style.css:
Como los componentes (header, footer, sidebar-popup) se inyectan por JS,
basta agregarlo en el de cada archivo .html de la raiz.
========================================================================== */
:root {
/* ------------------------------------------------ lo que cambia
Fuera los azules: #0057b8 que puso Flamtech, y #064e5a / #023b45 que
venian de fabrica en la plantilla. Entra el rojo del logo real. */
--theme-color: #e00000; /* el acento de todo el sitio */
--theme-color2: #1a1d21; /* era #064e5a */
--theme-color-light: rgba(224, 0, 0, 0.12);
--color-dark: #15181c; /* era #064e5a. Titulos y enlaces */
--footer-bg: #15181c; /* era #023b45 */
--footer-text-color: #b9c0c9; /* era #f5faff, demasiado azulado */
/* acentos que la plantilla usa suelto y arrastraban azul */
--color-blue: #e00000;
--color-green: #e00000;
--color-skyblue: #8a929e;
--color-red: #e00000;
/* ------------------------------------------------ lo que se conserva
El ambar funcionaba como secundario, y las tipografias son parte de la
identidad del sitio actual: Exo 2 para titulos, Roboto para cuerpo. */
--color-yellow: #fba707;
--theme-bg-light: #f7f8fa;
--body-text-color: #5a6472;
--color-gray: #e6e9ed;
}
/* --------------------------------------------------------------------------
Ajustes finos. Son pocos porque las variables hacen el trabajo.
-------------------------------------------------------------------------- */
/* El degradado de la portada venia teñido de azul */
.hero-single::before,
.cta-area::before,
.quote-area::before {
background: linear-gradient(90deg, rgba(21, 24, 28, .93) 0%, rgba(21, 24, 28, .55) 100%);
}
/* El boton flotante de WhatsApp se queda verde a proposito: es el color de
esa marca y cambiarlo lo vuelve irreconocible. */
.whatsapp-float-btn { background: #25d366; }
.whatsapp-float-btn:hover { background: #128c7e; }
/* El modal de agenda venia con verde #46c248 escrito a mano */
#calendar-icon-modal i { color: var(--theme-color); }
#modal-pais-content,
#modal-reunion-content { border-color: var(--theme-color); background: #fff; }
#modal-pais-content h4,
#modal-reunion-content h4 { color: var(--color-dark); }
.btn-pais { background: var(--theme-color); }
.btn-pais:hover { background: #b30000; }
/* --------------------------------------------------------------------------
Marcador de dato sin confirmar.
Se envuelve en cualquier cifra, telefono o afirmacion sin
validar. Se ve en pantalla, asi que no se publica por accidente.
-------------------------------------------------------------------------- */
.xv {
background: repeating-linear-gradient(45deg, #fff6d6, #fff6d6 8px, #ffefba 8px, #ffefba 16px);
border: 1px dashed #c99a00;
border-radius: 3px;
padding: 1px 5px;
color: #7a5c00 !important;
font-weight: 600;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
/* --------------------------------------------------------------------------
Agregado el 2026-09-03 tras ver las paginas renderizadas.
-------------------------------------------------------------------------- */
/* La banda de titulo de las internas se quedo azul verdoso: su degradado no
estaba en la lista de arriba. Miguel fue explicito en que no se usa el
azul oscuro, asi que va al grafito como el resto. */
.site-breadcrumb::before {
background: linear-gradient(90deg, rgba(21, 24, 28, .92), rgba(21, 24, 28, .62));
}
/* El logotipo mas seis entradas de menu mas el boton no caben en 1440 px y
el boton se caia de renglon. Se aprieta el menu en lugar de quitar una
entrada: las seis son las que el cliente tiene. */
@media (min-width: 992px) {
.offcanvas { flex-wrap: nowrap; }
.nav-link { padding-left: 10px; padding-right: 10px; font-size: .93rem; }
.nav-link::after { left: 10px; right: 10px; }
.nav-right-btn .theme-btn { padding: 11px 20px; white-space: nowrap; }
}
/* --------------------------------------------------------------------------
Agregado al montar la plantilla REAL, el 3-sep.
-------------------------------------------------------------------------- */
/* La plantilla pone text-transform:capitalize en titulos y botones. En ingles
se ve bien; en espanol NO se escriben asi: "Aprovechamos Los Recursos
Naturales Transformandolos En Energia Sostenible" esta mal escrito, y el
sitio del cliente es en espanol. Se apaga y se respeta el texto tal cual
viene escrito. */
h1, h2, h3, h4, h5, h6,
.site-title, .hero-title, .breadcrumb-title, .blog-title,
.theme-btn, .theme-btn2, .service-btn, .nav-link,
.feature-content h4, .choose-item-info h4, .content h4, .title {
text-transform: none !important;
}
/* La franja de arriba y las etiquetas de seccion SI van en mayusculas, que es
donde el recurso funciona. */
.site-title-tagline, .blog-item-etiqueta { text-transform: uppercase !important; }
/* El fondo claro de seccion que antes daba mi reimplementacion. Sustituye a
.sa-bg de la plantilla, que es la variante OSCURA. */
.seccion-clara { background: var(--theme-bg-light); position: relative; }