/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.13.4.1782467598
Updated: 2026-06-26 11:53:18
*/

/* BUTTONS WITH ICON */
.arrowed-button .elementor-button-content-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    gap: 16px;
    cursor: pointer;
}

/* Botones/widgets sin el wrapper del Button clásico (ej. el botón de los
   nuevos formularios "e-form", que es un <button> plano): aplicar el flex
   y el gap directamente sobre el propio .arrowed-button. */
.arrowed-button:not(:has(.elementor-button-content-wrapper)) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    gap: 16px;
    cursor: pointer;
}

.arrowed-button:hover i {
    transform: translateX(6px);
    transition: transform 0.15s ease-in-out;
}

.arrowed-button i::before {
    font-weight: 300 !important;
}

/*HEADER HOME SCROLL*/
body.home #header-top:not(.scrollheader){
    background-color: transparent !important;
}
body.home #header-top:not(.scrollheader) .elementor-nav-menu--main a.elementor-item.menu-link{
    color: #FFFFFF !important;
}
body.home #header-top:not(.scrollheader) .elementor-nav-menu--main a.elementor-item.menu-link .sub-arrow:hover svg path{
    fill: #FFFFFF !important;
}

body.home #header-top:not(.scrollheader) .elementor-nav-menu--main a.elementor-item.menu-link:hover{
    color: #FFFFFF !important;
    text-decoration: underline !important;
}

body.home #header-top:not(.scrollheader) .elementor-nav-menu--main svg{
    filter: brightness(0) saturate(100%) invert(99%) sepia(10%) saturate(0%) hue-rotate(221deg) brightness(116%) contrast(100%);
}

body.home #header-top:not(.scrollheader) .elementor-widget-theme-site-logo img{
    filter: brightness(0) saturate(100%) invert(99%) sepia(10%) saturate(0%) hue-rotate(221deg) brightness(116%) contrast(100%);
}

body.home #header-top:not(.scrollheader) span.cpel-switcher__code {
    color: #FFFFFF !important;
}

body.home #header-top:not(.scrollheader) i.cpel-switcher__icon {
    color: #FFFFFF !important;
}

body.home #header-top:not(.scrollheader) a.elementor-button {
    color: #FFFFFF !important;
    border: #FFFFFF 1px solid !important;
    background-color: transparent !important;
}

body.home #header-top:not(.scrollheader) a.elementor-button:hover {
    color: #ffffff !important;
    border: #CF9D00 1px solid !important;
    background-color: #CF9D00 !important;
}

body.home #header-top:not(.scrollheader) .elementor-menu-toggle svg {
    filter: brightness(0) saturate(100%) invert(99%) sepia(10%) saturate(0%) hue-rotate(221deg) brightness(116%) contrast(100%);
}

body.home #header-top:not(.scrollheader) .elementor-widget-icon svg path {
    fill: #FFFFFF !important;
}

/* HEADER STICKY */
#header-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #FFFFFF;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#header-top.scrollheader {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* HOME PAGE - SECTION 02 ITEMS */

.home-section-02-item {
    gap: 0;
    transition: gap 0.15s ease;

    img {
        transition: filter 0.15s ease;
    }

    > *:not(h2, img) {
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transform: translateY(8px);
        visibility: hidden;
        transition: max-height 0.15s ease, opacity 0.15s ease, transform 0.15s ease, visibility 0s linear;
    }

    > *:not(h2, img) p {
        margin-bottom: 0;
    }

    &:hover {
        gap: 36px;
    }

    &:hover img {
        filter: brightness(40%) !important;
    }

    &:hover > *:not(h2, img) {
        max-height: 300px;
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        transition-delay: 0s;
    }

    text-decoration: none !important;
}

/* SERVICE ITEM LIST */
/* Los contenedores flex de Elementor que envuelven el listado se ajustan
   al contenido y lo centran, por lo que el grid no tiene un ancho definido
   contra el que calcular las columnas (se descentra/recorta en responsive).
   Forzamos ancho completo en el contenedor y en el propio widget. */
.e-con:has(> .service-list) {
    width: 100% !important;
    align-self: stretch !important;
    justify-content: flex-start !important;
}

.service-list,
.service-list > .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* Listado de iconos responsive con CSS Grid en todos los breakpoints.
   Se usa grid (no flex) para evitar desbordes y recortes de texto. */
.service-list .elementor-icon-list-items {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 76px;
    row-gap: 25px;

    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
}

/* Cada item: impedir que fuerce el ancho de su columna (min-width:0)
   y permitir que el texto largo salte de línea en lugar de desbordar. */
.service-list .elementor-icon-list-item {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.service-list .elementor-icon-list-text {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Portátil / tablet: 2 columnas */
@media (max-width: 1366px) {
    .service-list .elementor-icon-list-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 40px;
    }
}

/* Móvil: 1 columna */
@media (max-width: 767px) {
    .service-list .elementor-icon-list-items {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
    }
}

/* MOBILE MENU */
/* Forzar que los submenús del menú vertical se desplieguen hacia abajo
   (debajo del elemento padre) en lugar de salir hacia el lateral. */
.mobile-menu .sub-menu,
.mobile-menu ul ul {
    position: static !important;
    width: 100% !important;
    min-width: 100% !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin: 0 !important;
    transform: none !important;
    box-shadow: none !important;
    border: 0 !important;
}

/* Sangría opcional para diferenciar los subelementos del padre. */
.mobile-menu .sub-menu .elementor-sub-item,
.mobile-menu .sub-menu a {
    padding-left: 20px;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    transition: none !important;

    &:first-child {
        margin-top: 15px;
    }

    &:hover {
        border-bottom: 2px solid #CF9D00;
        border-left: none !important;
        transition: none !important;
    }
}

/* Separación (gap) entre los items del menú. */
.mobile-menu .elementor-nav-menu > li,
.mobile-menu ul > li {
    margin-bottom: 12px;
}

.mobile-menu ul > li:last-child {
    margin-bottom: 0;
}


/* HOME SLIDER */
.home-carrousel .swiper-slide-bg {
    position: relative;
}
.home-carrousel .swiper-slide-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, .25);
    background-image: linear-gradient(0deg, rgba(31, 20, 15, 0) 80%, #1F140F 100%);
}

/* HOME SLIDER BUTTON - mismo efecto que .arrowed-button, para el botón del slider */
.home-carrousel .elementor-slide-button {
    display: inline-flex !important;
    align-items: center;
    gap: 16px;
}

.home-carrousel .elementor-slide-button:hover svg,
.home-carrousel .elementor-slide-button:hover i {
    transform: translateX(6px);
    transition: transform 0.15s ease-in-out;
}

.home-carrousel .elementor-slide-button i::before {
    font-weight: 300 !important;
}