/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
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: 1.0.1
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
*/

/* ==========================================================================
   TIPOGRAFÍA PERSONALIZADA (Migration Safe)
   ========================================================================== */

/* Bungee */
@font-face {
    font-family: 'Bungee';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../uploads/elementor/google-fonts/fonts/bungee-27296dae.woff2') format('woff2');
}

@font-face {
    font-family: 'Bungee';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../../uploads/elementor/google-fonts/fonts/bungee-27296dae.woff2') format('woff2');
}

@font-face {
    font-family: 'Bungee';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../../uploads/elementor/google-fonts/fonts/bungee-27296dae.woff2') format('woff2');
}

/* Bungee Inline */
@font-face {
    font-family: 'Bungee Inline';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../uploads/elementor/google-fonts/fonts/bungeeinline-2da6e295.woff2') format('woff2');
}

@font-face {
    font-family: 'Bungee Inline';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../../uploads/elementor/google-fonts/fonts/bungeeinline-2da6e295.woff2') format('woff2');
}

/* ==========================================================================
   FONT AUDIT CLEANUP (Poppins & Fira Sans Removal)
   ========================================================================== */

/* 1. Link in Bio Widget (Remove Poppins) */
.e-link-in-bio__content {
    font-family: 'IBM Plex Mono', monospace !important;
}

/* 2. Hero Slider PRO (Fira Sans Guard) */
/* Backup in case the PHP widget hasn't updated the frontend CSS yet */
.hero-slider-pro__feature-card-title {
    font-family: 'Bungee', sans-serif !important;
}

.hero-slider-pro__feature-card-description {
    font-family: 'IBM Plex Mono', monospace !important;
}





@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../uploads/elementor/google-fonts/fonts/ibmplexmono-e2661bcc.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../uploads/elementor/google-fonts/fonts/ibmplexmono-0445e586.woff2') format('woff2');
}

:root {
    /* Mapped from Elementor Kit Export (elementor_kit_export.json) */
    --color-primary: #49C5B6;
    /* Teal */
    --color-secondary: #000000;
    --color-text-main: #242424;
    --color-accent: #FF5A00;
    /* Naranja */

    /* Custom Colors */
    --color-user-yellow: #FFCC39;
    --color-user-orange: #FC4A1A;
    --color-user-violet: #4F1570;

    /* Typography - Sincronizado con Elementor Kit */
    --font-main: 'Bungee', sans-serif;
    --font-heading: 'Bungee Inline', 'Bungee', sans-serif;
    --font-secondary: 'IBM Plex Mono', monospace;

    --color-bg-main: #ffffff;
}

/* Regla base limpia: Prioridad a las fuentes del tema */
html,
body,
h2,
h3,
h4,
h5,
h6,
.elementor-widget-heading .elementor-heading-title {
    font-family: var(--font-main);
}

h1 {
    font-family: var(--font-heading);
}

body {
    background-color: var(--color-bg-main);
    color: var(--color-text-main);
    font-family: var(--font-main);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* Permitir que Elementor maneje los anchos */
.site-header,
.site-footer {
    width: 100%;
}

.site-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Resets básicos para que no interfieran con Elementor */
.site-branding .site-title a {
    text-decoration: none;
    color: inherit;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   EFECTOS ESPECIALES (Arcade Style)
   ========================================================================== */

/* Fondo Animado en Loop (Efecto Videojuego) */
#agencia-cpt-bg-01 {
    animation: agenciaScrollBg 90s linear infinite !important;
    transform: translateZ(0);
    backface-visibility: hidden;
}

@keyframes agenciaScrollBg {
    from {
        background-position: 0 0;
    }

    to {
        background-position: -3840px 0;
    }
}

/* ==========================================================================
   WPO & CLS FIXES (Critical Layout Stability)
   ========================================================================== */

/* 1. Pre-render placeholders for Hero Slider (CLS Fix: 0.432 -> 0.05) */
.elementor-widget-agencia_atomico_hero_slider {
    min-height: 500px;
    /* Default height to prevent jump */
    background: #000;
    contain: layout;
}

@media (max-width: 767px) {
    .elementor-widget-agencia_atomico_hero_slider {
        min-height: 400px;
        /* Mobile height */
    }
}

/* 2. Main Logo Placeholder dimensions */
header .site-branding img,
header .elementor-widget-image img {
    aspect-ratio: auto 768 / 326;
    /* Match Logo_Megadruid dimensions from report */
    width: 100%;
    max-width: 319px;
    /* Real display size from report */
    height: auto;
}

/* 3. Pre-load critical visibility */
.hero-slider-pro .embla__container {
    display: flex;
    opacity: 0;
    animation: fadeInLCP 0.3s ease forwards;
    animation-delay: 0.1s;
}

@keyframes fadeInLCP {
    to {
        opacity: 1;
    }
}

/* End of custom styles */

/* ==========================================================================
   LAYOUT FIXES (Migrated from layout-patch.css)
   ========================================================================== */

/* 1. Global Reset & Overflow Control */
html,
body {
    overflow-x: hidden;
    /* Prevent horizontal scroll */
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0;
}

/* 2. Structural Containers Full Width */
/* 2. Structural Containers Full Width (Updated v17) */
.site,
.site-header,
.site-main,
.page-content,
.site-content,
.site-footer,
.elementor-section-wrap,
#page,
#content,
#primary,
#main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block;
}

/* 2.1 Service Single Page Specifics (Transparencia Total) */
.service-single-page .container,
.site-footer .container,
.site-header-container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 2.2 Footer Boxed Reset */
.site-footer .elementor-section.elementor-section-boxed>.elementor-container {
    max-width: 100% !important;
}

/* 3. Elementor Stretched Sections Fix */
/* Ensures sections stretch to full width even if JS calculation fails */
.elementor-section.elementor-section-stretched {
    width: 100vw !important;
    min-width: 100vw !important;
    left: 50% !important;
    margin-left: -50vw !important;
    max-width: 100vw !important;
}

.elementor-section.elementor-section-stretched>.elementor-container {
    max-width: 100%;
    width: 100%;
}

/* 4. Malukot Widget Resets */
.elementor-widget-agencia_atomico_hero_slider,
.elementor-widget-agencia_atomico_testimonios {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

/* 5. Animation/Visibility Failsafes */
/* Ensures content is visible even if Elementor animations fail to trigger */
.agencia-hero-slider .hero-text-col,
.agencia-hero-slider .elementor-invisible {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* ==========================================================================
   FOOTER "HECHO CON AMOR" MOBILE FIX
   ========================================================================== */
.site-footer .elementor-widget-text-editor,
.site-footer .elementor-heading-title,
.site-footer .elementor-icon-list-item,
.footer-credit-text {
    /* Permitir que el texto fluya naturalmente */
    white-space: normal !important;
    word-wrap: break-word;
}

/* Identificar el contenedor del corazón y permitir wrap */
.site-footer i.fa-heart,
.site-footer i.eicon-heart,
.site-footer svg.e-font-icon-svg {
    display: inline-block;
    vertical-align: middle;
    margin: 0 4px;
    color: #ff0000;
    /* Asegurar rojo */
    animation: footerHeartBeat 1.5s infinite;
}

/* Animación de Latido Suave */
@keyframes footerHeartBeat {
    0% {
        transform: scale(1);
    }

    14% {
        transform: scale(1.15);
    }

    28% {
        transform: scale(1);
    }

    42% {
        transform: scale(1.15);
    }

    70% {
        transform: scale(1);
    }
}

@media (max-width: 767px) {

    /* En móvil, asegurar que el contenedor sea flex con wrap si es necesario, 
       o bloque normal centrado */
    .site-footer .elementor-column-wrap .elementor-widget-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    /* Si es un widget de texto específico */
    .site-footer .elementor-widget-heading,
    .site-footer .elementor-widget-text-editor {
        width: 100%;
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Padding Global para Secciones Críticas */
    #nosotros,
    .nosotros-section,
    .agencia-testimonio-carousel {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}