/*
 Theme Name: Kargon Child
 Theme URI: https://importadex.do
 Description: Child theme de Kargon. Aquí vive todo el CSS y las plantillas propias de Importadex — el tema padre "kargon" nunca se edita directamente (ver CLAUDE.md, regla dura #1).
 Author: Importadex
 Author URI: https://importadex.do
 Template: kargon
 Version: 1.0.0
 Text Domain: kargon-child
*/

/* Migrado desde Apariencia > Personalizar > "Opciones del Tema" (Redux) del
   tema padre "kargon" (theme_mods.kargon_theme_options.site_css). Estaba
   atado al slug "kargon" y no se aplicaría solo con activar este child
   theme, así que vive aquí ahora. Mismas reglas, sin cambios de
   comportamiento. */

/* Tokens de color, iguales a $primary_color/$secondary_color del SCSS del padre
   y a los valores hardcodeados que ya usaba js/main.js del padre para el
   indicador de scroll (ver js/scroll-progress.js) — mismos colores, ahora en
   un solo lugar reutilizable. */
:root {
    --primary-color: #e97e26;
    --secondary-color: #22729f;
}

/* Migrado desde Apariencia > Personalizar > "CSS Adicional" (el panel nativo
   de WordPress, custom_css post_name="kargon", post ID 20972) del tema padre.
   Este es un post distinto al de "Opciones del Tema" de arriba, y también
   está atado al slug del tema activo — sin esta migración, todas estas
   reglas dejarían de aplicarse en cuanto este child theme se active.
   Contenido copiado tal cual el 2026-07-28, sin cambios de comportamiento. */

/* 1. Atacar la etiqueta exacta H1 y la clase DISPLAY-1 */
h1.display-1,
.wl-banner-carousel-area h1,
.wl-banner-carousel-area .display-1 {
    text-shadow: 4px 4px 20px rgba(0, 0, 0, 1), 0px 0px 10px rgba(0, 0, 0, 0.8) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
}

/* 2. Forzar la viñeta oscura a la izquierda (Ajustada a la clase 'item') */
.wl-banner-carousel-area .item::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 60% !important;
    height: 100% !important;
    background: linear-gradient(to right, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%) !important;
    z-index: 1 !important;
    display: block !important;
    opacity: 1 !important;
}

/* 3. Asegurar que el texto y el logo floten por encima de la viñeta */
.wl-banner-carousel-area .container,
.wl-banner-carousel-area .banner-content {
    position: relative !important;
    z-index: 2 !important;
}

/* Color del menú principal */
.main-menu ul li a,
.navbar-nav li a,
.site-header .menu li a,
.header-area .menu li a {
    color: #1f2d3d !important;
    font-weight: 600;
}

/* Color al pasar el mouse */
.main-menu ul li a:hover,
.navbar-nav li a:hover,
.site-header .menu li a:hover,
.header-area .menu li a:hover {
    color: #f58220 !important;
}

/* Menú activo */
.main-menu ul li.current-menu-item > a,
.navbar-nav li.current-menu-item > a,
.site-header .menu li.current-menu-item > a,
.header-area .menu li.current-menu-item > a {
    color: #f58220 !important;
}
/* Menú blanco en páginas internas, solo en desktop y sin scroll */
@media (min-width: 992px) {
    body:not(.home) header:not(.scrollHeader) .navbar-nav > li > a {
        color: #ffffff !important;
    }
}
.lowercase-email {
    text-transform: lowercase !important;
}

.main-menu ul li.menu-sin-activo.current-menu-item > a,
.navbar-nav li.menu-sin-activo.current-menu-item > a,
.site-header .menu li.menu-sin-activo.current-menu-item > a,
.header-area .menu li.menu-sin-activo.current-menu-item > a {
    color: #1F3A5F !important; /* color oscuro normal */
}

.main-menu ul li.menu-sin-activo.current-menu-item > a:hover,
.navbar-nav li.menu-sin-activo.current-menu-item > a:hover,
.site-header .menu li.menu-sin-activo.current-menu-item > a:hover,
.header-area .menu li.menu-sin-activo.current-menu-item > a:hover {
    color: #F28C28 !important; /* naranja solo al pasar el mouse */
}

/* Fix: evita que "Almacenamiento" y otras palabras largas se corten en las tarjetas de servicio del home.
   Incluye h4 además de h5: kargon_child_fix_home_heading_hierarchy() cambia esa etiqueta de h5 a h4
   en wl-service-v1, y esta regla dejó de aplicar hasta agregar h4 aquí también. */
.card-style04 .card-content h4,
.card-style04 .card-content h5 {
	    overflow-wrap: break-word;
	    word-break: break-word;
}

/* Fix: contenedor Elementor vacío (sin contenido real) entre el formulario de
   contacto y el mapa de la home, id elementor-element-0158f00. A resoluciones
   de pantalla anchas se estira (probablemente por align-items:stretch en su
   fila flex) y deja un hueco en blanco antes del footer. */
.elementor-element-0158f00 {
    display: none !important;
}


/* Mensaje de éxito Contact Form 7 - Importadex */
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 .wpcf7-response-output.wpcf7-mail-sent-ok,
.wpcf7-mail-sent-ok {
    background-color: #E97E26 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border: 2px solid #E97E26 !important;
    border-radius: 6px !important;
    padding: 14px 18px !important;
}

/* 1. Resaltar el Título con sombra profunda */
body .wl-banner-carousel-area .item h2,
body .wl-banner-carousel-area .banner-title {
    text-shadow: 2px 2px 15px rgba(0, 0, 0, 1), 0px 0px 8px rgba(0, 0, 0, 0.8) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}

/* 2. Crear una viñeta oscura sutil a la izquierda para el texto y logo */
body .wl-banner-carousel-area .item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 40%, rgba(0,0,0,0) 70%) !important;
    z-index: 1;
    pointer-events: none;
}

/* 3. Asegurar que el contenido esté por encima de la viñeta */
body .wl-banner-carousel-area .item .banner-content {
    position: relative;
    z-index: 2 !important;
}