/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/*
 * Efectuar el efecto scramble-text a PROXIMAMENTE
 */
#scramble-text {
    /* Asegura que el texto que se animará no parpadee al cargarse */
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

.scramble-scroll {
    /* Ejemplo de tipografía, debe coincidir con tu H clamp */
    font-family: 'Manrope', sans-serif; 
    font-size: clamp(0.7715rem, 0.8765rem + -0.4664vw, 0.3167rem); /*Scroll p */
    color: #594E4E;
    font-weight: 600;
}

/* ========================================================= */
/* ESTABILIZACIÓN DE ANCHO PARA EFECTOS SCRAMBLE (TODOS)     */
/* ========================================================= */

/* Configuración Común (Aplica a todos los elementos scramble) */
#scramble-text .elementor-heading-title,      /* Bucle 1 */
#scramble-portfolio .elementor-heading-title, /* Bucle 2 */
.scramble-scroll .scramble-target,            /* Bucle 3 */
.scramble-on-hover .elementor-button-text,    /* Hover Botones */
.scramble-on-hover .elementor-heading-title   /* Hover Títulos */
{
    display: inline-block; /* Necesario para respetar el ancho */
    text-align: center;    /* Centra el texto en el espacio reservado */
    white-space: nowrap;   /* Evita saltos de línea indeseados */
    transition: color 0.3s ease; /* Suaviza cambio de color si lo hay */
}

/* --------------------------------------------------------- */
/* BUCLE 1: IDEA / PROYECTO / INICIATIVA (ID: scramble-text) */
/* Palabra más larga: "INICIATIVA!" (~11 caracteres)         */
/* --------------------------------------------------------- */
#scramble-text .elementor-heading-title {
    /* Ajusta este valor en PX hasta que "INICIATIVA!" quepa bien */
    min-width: 180px; 
}

/* --------------------------------------------------------- */
/* BUCLE 2: PORTAFOLIO / CONSTRUCCIÓN (ID: scramble-portfolio) */
/* Palabra más larga: "EN CONSTRUCCIÓN" (~15 caracteres)     */
/* --------------------------------------------------------- */
#scramble-portfolio .elementor-heading-title {
    /* Este necesita más espacio por ser textos largos */
    min-width: 260px; 
}

/* --------------------------------------------------------- */
/* BUCLE 3: DESPLÁZATE / ABAJO (Clase: .scramble-scroll)     */
/* Palabra más larga: "HACIA ABAJO" (~11 caracteres)         */
/* --------------------------------------------------------- */
.scramble-scroll .scramble-target {
    /* Define el ancho mínimo para la palabra más larga */
    min-width: 85px; 
    /* Necesario para aplicar min-width */
    display: inline-block; 
    /* Centra el texto dentro del ancho para una mejor apariencia */
    text-align: center;
    font-weight: 800;
}

/* ========================================================= */
/* AJUSTE FINAL DE ANCHO: ESPACIO MÍNIMO POR BOTÓN          */
/* (APLICA SOLO A ESCRITORIO PARA EL EFECTO SCRAMBLE)       */
/* ========================================================= */

@media only screen and (min-width: 1025px) {

    /* 0. CONFIGURACIÓN BÁSICA (Aplica a todos los botones del menú) */
    /* (Asegúrate de que esta regla existe para que el hitbox funcione) */
    .scramble-on-hover .elementor-button-text {
        display: inline-block;
        white-space: nowrap;
        /* La alineación central la haces ahora desde Elementor Pro, ¡eso es perfecto! */
    }


    /* --- CASO 1: WIDGETS LARGOS (AGENDAR LLAMADA) --- */

    /* Fija el ancho del Widget Contenedor COMPLETO (~240px) */
    .scramble-largo {
        min-width: 210px !important;
        width: 210px !important;
    }

    /* Fija el ancho del Texto Interno (210px) */
    .scramble-largo .elementor-button-text {
        min-width: 210px;
    }


    /* --- CASO 2: WIDGETS MEDIOS (PORTAFOLIO) --- */

    /* Fija el ancho del Widget Contenedor COMPLETO (~160px) */
    .scramble-medio {
        min-width: 120px !important;
        width: 120px !important;
    }

    /* Fija el ancho del Texto Interno (~130px para Portafolio) */
    .scramble-medio .elementor-button-text {
        min-width: 120px;
    }


    /* --- CASO 3: WIDGETS CORTOS (CONÓCEME, PROCESO) --- */

    /* Fija el ancho del Widget Contenedor COMPLETO (~120px) */
    .scramble-corto {
        min-width: 100px !important;
        width: 100px !important;
    }

    /* Fija el ancho del Texto Interno (~90px) */
    .scramble-corto .elementor-button-text {
        min-width: 95px;
    }
}

/* ========================================================= */
/* CASO 2: CORREO ELECTRÓNICO (SOLUCIÓN FINAL)               */
/* ========================================================= */

/* 1. REGLA WIDGET CONTENEDOR (Fija el espacio del widget del correo para estabilidad) */
.scramble-email-large {
    /* Forzamos el ancho del Widget Contenedor completo (Ej: 600px para seguridad) */
    min-width: 1100px !important; 
    width: 1100px !important; 
}

/* 2. REGLA TEXTO INTERNO (Asegura el ancho interno del texto) */
.scramble-email-large a {
    /* Usamos un valor realista para el texto grande (550px) */
     min-width: 1100px; 
    /* Alineación al centro, ya que es un elemento destacado (ajustar si es necesario) */
    text-align: center;
}

/* ========================================================= */
/* FIX FINAL: ESTABILIZACIÓN Y ALINEACIÓN DE FOOTER          */
/* ========================================================= */

/* 1. REGLA WIDGET CONTENEDOR (Fija el espacio para que el centrado no mueva el widget) */
.scramble-footer-link {
     /* CORRECCIÓN: Usamos 100px para permitir el min-width: 85px del texto más el padding. */
     min-width: 85px !important;
     width: 85px !important;
}

/* 2. REGLA TEXTO INTERNO (Fija el ancho y la alineación del texto) */
.scramble-footer-link a,
.scramble-footer-link .elementor-heading-title {
   /* Mínimo para "Instagram" */
   min-width: 85px !important;
  text-align: right !important;
}




/* ----------------------------------------------------------------------- */
/* Estilos para el efecto Split-text con ScrollTrigger (FINAL ESTABLE Y GLOBAL) */
/* ----------------------------------------------------------------------- */

/* Elemento del título que contiene el texto */
.split-text-on-scroll .elementor-heading-title {
    position: relative; 
    overflow: hidden; 
    will-change: transform, opacity; 
}

/* ⭐️ El elemento DIV/SPAN de SplitText (La línea individual) */
.split-text-on-scroll .elementor-heading-title > div {
    /* CRÍTICO para que la animación 'top' funcione */
    position: relative !important; 
    
    /* ⭐️ CRÍTICO: Solución GLOBAL al flujo de texto. */
    white-space: normal !important; 
    
    /* ⭐️ CAMBIO CRÍTICO: Usamos inline-block globalmente para permitir el flujo natural en todos los anchos. */
    display: inline-block !important; 
    
    /* Aseguramos que el ancho no interfiera */
    width: auto !important; 
    overflow-wrap: break-word !important; 
    text-align: inherit !important;
    
    /* Limpieza de reglas */
    transform: none !important;
}

/* ----------------------------------------------------------------------- */
/* Estilos para el efecto Split-text por CARACTERES (.split-text-chars) */
/* ----------------------------------------------------------------------- */

/* Contenedor principal del texto */
.split-text-chars .elementor-heading-title,
.split-text-chars .elementor-text-editor,
.split-text-chars.elementor-widget-container { /* Añadimos el contenedor principal */
    overflow: hidden; 
    position: relative; 
    will-change: transform, opacity; 
}

/* ⭐️ CRÍTICO: El SPAN/DIV creado por SplitText para cada CARÁCTER */
.split-text-chars .elementor-heading-title span,
.split-text-chars .elementor-text-editor span,
.split-text-chars > span { /* Selector para el caso de Editor de Texto sin formato */
    /* Debe ser inline-block para que se muevan pero fluyan como texto */
    display: inline-block !important; 
    
    /* Necesario para la animación 'x' (transform) */
    position: relative; 
    
    /* Aseguramos que el flujo de texto sea normal */
    white-space: normal !important; 
}


/* ========================================================= */
/* ESTILOS CSS REQUERIDOS PARA LA TRANSICIÓN DE COLOR  */
/* ========================================================= */

    .anim-problema .elementor-heading-title,
    .anim-flecha .elementor-heading-title,
    .anim-solucion .elementor-heading-title {
    display: inline-block; 
     will-change: color;
    position: relative; 
    /* ¡Añade o confirma que tienes esta línea para la transición de color! */
    transition: color 0.3s ease-in-out; 
}



/* ------------------------------------------- */
/* CSS para Mostrar Descripción al Hacer Hover */
/* ------------------------------------------- */

/* 1. Ocultar el texto de la descripción por defecto (sin cambios) */
.texto-descripcion {
    opacity: 0;
    transform: translateY(-10px); 
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    
    margin-top: 5px; 
    padding-bottom: 5px;
}

/* 2. Cuando se pasa el ratón sobre el ENCABEZADO (que ahora tiene la clase .servicio-con-hover), 
      mostrar el texto HERMANO adyacente (.texto-descripcion). */
.servicio-con-hover:hover + .texto-descripcion {
    /* Lo hacemos visible y lo devolvemos a su posición original */
    opacity: 1;
    transform: translateY(0); 
}

/* ------------------------------------------- */
/* 3. Media Query: ANULAR el efecto HOVER para Tableta y Móvil */
/* ------------------------------------------- */

/* Para pantallas de 1024px de ancho (Tableta) y más pequeñas: */
@media (max-width: 1024px) {
    
    /* HACER LA DESCRIPCIÓN VISIBLE SIEMPRE */
    .texto-descripcion {
        opacity: 1 !important; /* Lo hacemos visible */
        transform: translateY(0) !important; /* Lo dejamos en posición */
        visibility: visible !important; /* Aseguramos la visibilidad */
    }

    /* ELIMINAR EL EFECTO HOVER (no se necesita, pero es buena práctica) */
    .servicio-con-hover:hover + .texto-descripcion {
        opacity: 1; /* Aseguramos que no cambie */
        transform: translateY(0);
    }
}



/* ======================================= */
/* 1. DEFINICIÓN DE ANIMACIÓN PARA ESTRELLAS */
/* ======================================= */

@keyframes rotarEstrella {
  to {
    transform: rotate(360deg);
  }
}

/* ======================================= */
/* 2. ROTACIÓN FORZADA (GLOBAL - Máxima Especificidad) */
/* Selector: .CLASE_WIDGET #PATH_INTERNO */
/* ======================================= */

.estrella-rotatoria #svgContorno { display: block; }
.estrella-rotatoria #svgRellena { display: block; }

/* ESTRELLA DE CONTORNO (8s) */
.estrella-rotatoria #pathContorno {
  transform-origin: 50% 50% !important; 
  transition: none !important; 
  animation: rotarEstrella 10s linear infinite !important;
}

/* ESTRELLA RELLENA (8s) */
.estrella-rotatoria #pathRellena {
  transform-origin: 50% 50% !important;
  transition: none !important; 
  animation: rotarEstrella 10s linear infinite !important;
}

/* ======================================= */
/* 3. MEDIA QUERIES (Redundancia de seguridad) */
/* ======================================= */

@media (max-width: 1024px) {
    /* TABLET */
    .estrella-rotatoria #pathContorno { animation: rotarEstrella 10s linear infinite !important; }
    .estrella-rotatoria #pathRellena { animation: rotarEstrella 10s linear infinite !important; }
}

@media (max-width: 767px) {
    /* MÓVIL */
    .estrella-rotatoria #pathContorno { animation: rotarEstrella 10s linear infinite !important; }
    .estrella-rotatoria #pathRellena { animation: rotarEstrella 10s linear infinite !important; }
}



/* ======================================= */
/* CONTROLAR PROPIEDADES DE MI LOGOTIPO    */
/* ======================================= */
/* ------------------------------------------------------------------- */
/* 1. TAMAÑO POR DEFECTO (ESCRITORIO / PANTALLAS GRANDES) */
/* ------------------------------------------------------------------- */

.logo-widget-wrapper {
    /* AJUSTE CLAVE: 350px es el tamaño base. Aumenta o disminuye esto. */
    width: 100%;
    max-width: 450px; 
    margin: 0 auto;
    margin-bottom: 25px;
}

/* El SVG debe heredar el tamaño de su padre (el div con la clase) */
.logo-widget-wrapper svg {
    width: 100%;
    height: auto;
    display: block;
}


/* ------------------------------------------------------------------- */
/* 2. TAMAÑO PARA TABLET (Entre 768px y 1024px) */
/* ------------------------------------------------------------------- */
@media (max-width: 1024px) { 
    .logo-widget-wrapper {
        max-width: 250px; /* Tamaño para Tablet */
        margin-bottom: 20px; 
    }
}


/* ------------------------------------------------------------------- */
/* 3. TAMAÑO PARA MÓVIL (Pantallas pequeñas: < 768px) */
/* ------------------------------------------------------------------- */
@media (max-width: 767px) {
    .logo-widget-wrapper {
        max-width: 150px; /* Tamaño para Móvil */
        margin-bottom: 15px; 
    }
}


/* ------------------------------------------------------------------- */
/* OCULTAR EL WIDGET HTML SVG FLECHA + CAFE */
/* ------------------------------------------------------------------- */
/* 1. OCULTAR: Forzamos la opacidad a 0 con más especificidad. */
.elemento-ocultable {
    opacity: 0 !important;
    transition: opacity 0.4s ease-out;
}

/* 2. MOSTRAR: Usamos la máxima especificidad para forzar la aparición. */
/* Al anidar .elemento-ocultable dentro de una clase CSS, aumenta su peso. */
body.mostrar-contacto .elemento-ocultable {
    opacity: 1 !important;
}



/* ------------------------------------------------------------------- */
/* IMPLEMENTACION DEL MODO OSCURO AL SITIO WEB */
/* ------------------------------------------------------------------- */
/* =========================================
   REGLAS DEL MODO OSCURO (body.dark-mode) - VERSIÓN FINAL ESTABLE Y SIN ERRORES DE SINTAXIS
   ========================================= */

/* 1. Fondo principal de la página: Pasa a negro (#121212) */
body.dark-mode,
body.dark-mode .elementor-section,
body.dark-mode .elementor-container,
body.dark-mode .elementor-widget-wrap,
body.dark-mode .elementor-inner-section,
body.dark-mode #content,
body.dark-mode #page,
body.dark-mode .site-main {
    background-color: #121212 !important;
    transition: background-color 0.5s ease;
}

/* 2. ⭐️ REGLA CRÍTICA CORREGIDA Y SIMPLIFICADA (ESTABLE) ⭐️ */
/* Forzamos la transparencia en TODOS los elementos, EXCLUYENDO las etiquetas básicas */
body.dark-mode *:not(body):not(html):not(img):not(a):not(button) {
    background-color: transparent !important;
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* 3. Texto general: Pasa de #000000 a blanco */
body.dark-mode,
body.dark-mode p,
body.dark-mode span,
body.dark-mode .elementor-heading-title,
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3 {
    color: #ffffff !important;
    transition: color 0.5s ease;
}

/* 4. Enlaces generales: BLANCO */
body.dark-mode a,
body.dark-mode a:hover {
    color: #ffffff !important; 
}


/* 5. Contenedores con Fondo Secundario */
body.dark-mode .color-secundario,
body.dark-mode .elementor-section.color-secundario,
body.dark-mode .elementor-container.color-secundario,
body.dark-mode .color-secundario *,
body.dark-mode .elementor-section.color-secundario *,
body.dark-mode [style*="#CACAB0"],
body.dark-mode [style*="cacab0"] {
    background-color: #3A3A3A !important; 
    color: #ffffff !important; 
}

/* 6. Color Gris personalizado: Cambiar a un gris claro */
body.dark-mode .color-gris {
    color: #9E9E9E !important;
}


/* =========================================
   ⭐️ EXCEPCIONES ESPECÍFICAS ⭐️
   ========================================= */

/* 7. Botón CTA "AGENDAR LLAMADA" (.red-exception) */
body.dark-mode a.red-exception,
body.dark-mode a.red-exception,
body.dark-mode .elementor-button-wrapper a.red-exception,
body.dark-mode .elementor-button-wrapper a.red-exception * { 
    background-color: #B22222 !important; /* Fondo: Rojo de Énfasis */
    color: #FFFFFF !important; /* Texto: Blanco */
    border-color: #B22222 !important;
}

/* 8. Bloque Rojo para Contenedores Genéricos (Aseguramos que no se pierda el color) */
body.dark-mode .red-exception {
    background-color: #B22222 !important;
}

/* 9. Texto de Correo Electrónico (.red-exception) - Solo color de texto */
body.dark-mode a.red-exception[href*="mailto"],
body.dark-mode a.red-exception[href*="mailto"] > * {
    color: #B22222 !important; 
    background-color: transparent !important; 
}


/* 10. Texto Circular (En Proceso) */
body.dark-mode .circular-text,
body.dark-mode .circular-text path,
body.dark-mode .circular-text svg,
body.dark-mode .circular-text svg * {
    fill: #FFFFFF !important; 
    stroke: #FFFFFF !important; 
    color: #FFFFFF !important;
    background-color: transparent !important;
}


/* 11. Imágenes/Elementos que deben invertirse (Opcional) */
body.dark-mode img:not(.dark-mode-ignore) {
    filter: brightness(0.8) contrast(1.1);
}


/* =========================================
   ⭐️ REGLAS DEL MENÚ EMERGENTE (POP-UP) ⭐️
   ========================================= */

/* 12. Fondo del CONTENIDO INTERNO del Pop-up (Selector dialog-message) */
body.dark-mode .dialog-message {
    background-color: #121212 !important; 
    transition: background-color 0.5s ease;
}

/* 13. Fondo del Overlay (Fondo oscuro semi-transparente detrás del menú) */
body.dark-mode .dialog-lightbox-background {
    background-color: rgba(0, 0, 0, 0.7) !important; 
}


/* 14. Aseguramos el color del texto y enlaces del menú a blanco */
body.dark-mode .elementor-location-popup a,
body.dark-mode .elementor-location-popup span,
body.dark-mode .elementor-location-popup p,
body.dark-mode .elementor-location-popup .elementor-heading-title {
    color: #ffffff !important;
}

/* 15. Asegurar el color del ícono de cierre */
body.dark-mode .elementor-location-popup .dialog-close-button {
    color: #ffffff !important; 
    fill: #ffffff !important; 
}


/* =========================================
   ⭐️ AJUSTES DE ESPECIFICIDAD DEL TOGGLE ⭐️
   ========================================= */

/* Cursor: Asegura que el área que contiene el texto parezca clicable */
#dark-mode-toggle {
    cursor: pointer !important;
}

/* MODO CLARO: Aplicamos alta especificidad para conservar tipografía y color oscuro */
.lights-status-text.elementor-heading-title, 
.lights-status-text {
    font-family: 'Manrope', sans-serif !important; 
    font-weight: 600 !important; 
    font-size: clamp(0.8784rem, 0.9512rem + -0.3237vw, 0.5628rem) !important; 
    color: #333333 !important; 
    background-color: transparent !important;
    transition: color 0.5s ease, background-color 0.5s ease;
}

/* MODO OSCURO: Forzamos el texto a blanco, superando el color del modo claro */
body.dark-mode .lights-status-text.elementor-heading-title,
body.dark-mode .lights-status-text {
    color: #ffffff !important;
}