/*
 Theme Name:   Heart and Home Solutions
 Theme URI:    https://westcreativo.com
 Description:  Default template Child for West Creativ
 Author:       Santiago Aristizábal
 Author URI:   https://westcreativo.com
 Template:     generatepress
 Version:      0.1
*/



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

    /*======== General ==========*/
    html {
        font-size: 62.5%;
    }

    /* Menu mobile */

    /* ==========================================================
   ESTILOS DEL MENÚ MÓVIL (PRINCIPALES Y SUBMENÚ) - CORREGIDO
   ========================================================== */

    /* 1. Quitar márgenes internos del contenedor principal */
    #menu-mobile .elementor-nav-menu--dropdown {
        padding: 0 !important;
        overflow: hidden !important;
    }

    /* 2. Obligar a los enlaces principales a ocupar todo el ancho Y mantener la flecha alineada */
    #menu-mobile .elementor-nav-menu--dropdown a.elementor-item {
        /* Usamos flex para que el texto y la flechita se queden en la misma línea */
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        padding: 15px 20px !important;
        box-sizing: border-box !important;
    }

    /* 3. Estilo para el elemento activo (Fondo azul, letra blanca SOLO PRINCIPALES) */
    #menu-mobile .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active,
    #menu-mobile .elementor-nav-menu--dropdown .current-menu-item>a.elementor-item {
        background-color: #23B0E6 !important;
        color: #FFFFFF !important;
        font-weight: bold !important;
    }

    /* 4. Hover (al pasar el ratón) SOLO para los enlaces principales */
    #menu-mobile .elementor-nav-menu--dropdown a.elementor-item:hover {
        background-color: #23B0E6 !important;
        color: #FFFFFF !important;
    }


    /* --- ESTILOS PARA LOS ENLACES INTERNOS (SUBMENÚ) --- */

    /* 5. Matar la línea original de Elementor SOLO en los sub-menús (recupera las líneas principales) */
    #menu-mobile .elementor-nav-menu--dropdown ul.sub-menu li {
        border: none !important;
        box-shadow: none !important;
    }

    /* 6. Fondo blanco, texto oscuro y preparar la caja para sub-items */
    #menu-mobile .elementor-nav-menu--dropdown a.elementor-sub-item {
        background-color: #FFFFFF !important;
        color: #002347 !important;
        font-weight: normal !important;

        /* Le damos más espacio a la izquierda (40px) para el efecto escalón */
        padding: 15px 20px 15px 40px !important;
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;

        /* Quitamos cualquier borde residual y habilitamos posición para la nueva línea */
        border-bottom: none !important;
        position: relative !important;
    }

    /* 7. Dibujar la línea divisoria que NO toca los bordes */
    #menu-mobile .elementor-nav-menu--dropdown a.elementor-sub-item::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 40px;
        /* Hace que la línea empiece alineada con el texto */
        right: 20px;
        /* Deja un espacio a la derecha */
        height: 1px;
        background-color: #D3D8DB !important;
        /* Color gris claro de la línea */
    }

    /* 8. Quitar la línea del último elemento del submenú para que termine limpio */
    #menu-mobile .elementor-nav-menu--dropdown li:last-child>a.elementor-sub-item::after {
        display: none !important;
    }

    /* 9. Efecto al pasar el ratón por un sub-item */
    #menu-mobile .elementor-nav-menu--dropdown a.elementor-sub-item:hover {
        color: #23B0E6 !important;
        /* El texto se vuelve azul claro */
    }


    /* HEADER */
    .box__chat-me {
        background-color: #fff;
        padding: .2rem 1rem;
        border-radius: 3.4rem;
    }

    /* TESTIMONIAL */
    .swiper-pagination-bullet {
        width: 3rem;
        height: 4px;
        border-radius: 0;
    }

    /*======== HOME ==========*/

    /* Formulario firts service */

    .frm_fields_container {
        align-items: center;
    }


    #Firts-service .frm_submit input[type="submit"],
    #Firts-service .frm_submit button {
        background-color: #59BF9D;
        color: #FFFFFF;
        border: none;

        margin: 0px;
    }


    /* Header home */
    #menu-home .elementor-item:hover,
    #menu-home .elementor-item.elementor-item-active {
        font-weight: bold;
    }

    /* Oculta el botón en todas las tarjetas con la clase tarjeta-hover */
    .tarjeta-hover-our-services .elementor-button {
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
        pointer-events: none;
    }

    /* Muestra el botón cuando pasas el cursor sobre cualquiera de esas tarjetas */
    .tarjeta-hover-our-services:hover .elementor-button {
        opacity: 1;
        pointer-events: auto;
    }

    /* Carrusel before-after */

    /* --- 0. EL ASPECT RATIO DE LAS IMÁGENES --- */
    #Carousel-before-after img {
        aspect-ratio: 3 / 4 !important;
        object-fit: cover !important;
        object-position: center !important;
        width: 100% !important;
        height: 100% !important;
        display: block;
    }

    /* 1. Contenedor principal */
    #Carousel-before-after .elementor-image-carousel-wrapper.swiper {
        perspective: 1200px !important;
        overflow-x: hidden !important;
        width: 100% !important;
        padding: 40px 0;
        /* Un poco de padding para que al escalar las imágenes no se corten arriba o abajo */
    }

    #Carousel-before-after .elementor-image-carousel.swiper-wrapper {
        transform-style: preserve-3d !important;
    }

    /* 2. ESTADO BASE */
    #Carousel-before-after .elementor-image-carousel .swiper-slide {
        transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        backface-visibility: hidden !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        opacity: 0 !important;
        transform: rotateY(0deg) translateZ(-200px) scale(0.8) !important;
    }

    /* 3. IMAGEN IZQUIERDA */
    #Carousel-before-after .elementor-image-carousel .swiper-slide-active {
        transform: rotateY(35deg) translateZ(100px) translateX(-8%) scale(0.85) !important;
        opacity: 0.55 !important;
        z-index: 5 !important;
        -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
    }

    /* 4. IMAGEN CENTRAL */
    #Carousel-before-after .elementor-image-carousel .swiper-slide-next {
        transform: scale(1) rotateY(0deg) translateZ(0px) !important;
        opacity: 1 !important;
        z-index: 10 !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
    }

    /* 5. IMAGEN DERECHA */
    #Carousel-before-after .elementor-image-carousel .swiper-slide-next+.swiper-slide {
        transform: rotateY(-35deg) translateZ(100px) translateX(8%) scale(0.85) !important;
        opacity: 0.55 !important;
        z-index: 5 !important;
        -webkit-mask-image: -webkit-radial-gradient(white, black) !important;
    }

    /* 6. LIMPIEZA */
    #Carousel-before-after .elementor-image-carousel .swiper-slide-next+.swiper-slide~.swiper-slide {
        opacity: 0 !important;
        transform: scale(0) !important;
    }

    /* Fin carrusel */




    /*======== ABOUT ==========*/
    .text__orange {
        color: #FF770D;
    }


    /* Sombra negra normal y circular lista what offer */
    #list-what-offer .elementor-icon {
        border-radius: 50%;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
        overflow: visible;
    }



    /*====== SERVICES =======*/


    /* formulario gitf_card_form  */

    #form_gitf_card_form .frm_radio,
    #form_gitf_card_form .frm_checkbox {
        margin-right: 25px !important;
        display: inline-block !important;
        margin-bottom: 10px !important;
    }

    #form_gitf_card_form .frm_radio label,
    #form_gitf_card_form .frm_checkbox label {
        padding-left: 5px !important;
    }


    /* Estilos específicos para menu-servicios */

    #menu-services .menu-item a {
        background-color: rgba(203, 203, 203, 0.14);
        transition: background-color 0.3s ease;
        position: relative;
    }

    #menu-services .menu-item a::after {
        content: "";
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        width: 30px;
        height: 30px;
        background-color: transparent;
        opacity: 1;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    #menu-services .menu-item.move a::after {
        background-image: url('https://heartandhome.atc-onlinead.com/wp-content/uploads/2026/05/icon1.svg');
    }

    #menu-services .menu-item.one a::after {
        background-image: url('https://heartandhome.atc-onlinead.com/wp-content/uploads/2026/04/Mask-Group-1.svg');
    }

    #menu-services .menu-item.post a::after {
        background-image: url('https://heartandhome.atc-onlinead.com/wp-content/uploads/2026/05/post.svg');
    }

    #menu-services .menu-item.ongoing a::after {
        background-image: url('https://heartandhome.atc-onlinead.com/wp-content/uploads/2026/05/Mask-Group.svg');
    }

    #menu-services .menu-item.commercial a::after {
        background-image: url('https://heartandhome.atc-onlinead.com/wp-content/uploads/2026/05/Mask-Group-1.svg');
    }

    #menu-services .menu-item a:hover::after,
    #menu-services .current-menu-item a::after {
        filter: brightness(0) invert(1);
    }


    /* fin menu servicios */


    /*====== GIF CARD =======*/

    .frm_style_gift-style .frm_submit input[type="submit"],
    .frm_style_gift-style .frm_submit button,
    .frm_style_gift-style .frm_button_submit {
        text-transform: none;
    }


    /*====== RESERVATION =======*/


    /* formulario reservation */


    /* 0. Limpiar cualquier borde extraño de las cajas de lista (los cuadros verdes) */
    #frm_form_5_container .frm_page_bar li.frm_rootline_single {
        border: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* 1. CÍRCULOS INACTIVOS (Fondo blanco para tapar la línea) */
    #frm_form_5_container .frm_page_bar li.frm_rootline_single input[type="button"] {
        background-color: #ffffff !important;
        /* Cambiado de transparent a blanco */
        border: 1px solid #52b794 !important;
        color: #666666 !important;
        border-radius: 50% !important;
        position: relative !important;
        /* Necesario para que funcione el z-index */
        z-index: 5 !important;
        /* Obliga a la bolita a estar por encima */
    }

    /* 2. CÍRCULO ACTIVO (El paso actual) */
    #frm_form_5_container .frm_page_bar li.frm_current_page input[type="button"] {
        background-color: #52b794 !important;
        border: 1px solid #52b794 !important;
        color: #ffffff !important;
        position: relative !important;
        z-index: 5 !important;
        /* Obliga a la bolita a estar por encima */
    }

    /* 3. LÍNEA CONECTORA (Asegurar que se quede al fondo) */
    #frm_form_5_container ul.frm_rootline_line.frm_show_lines li::before,
    #frm_form_5_container ul.frm_rootline_line.frm_show_lines li::after {
        border-top: 1px dashed #999999 !important;
        background-color: transparent !important;
        z-index: 1;
        /* Se queda por debajo de las bolitas */
    }

    /* 4. TÍTULOS PRINCIPALES */
    #frm_form_5_container .frm_page_bar .frm_rootline_title {
        color: #0B73A8;
        margin-top: 10px !important;
        font-size: 24px;
        display: block;
    }

    #frm_form_5_container .frm_page_bar li.frm_current_page .frm_rootline_title {
        font-weight: bold !important;
        /* Negrita solo en el paso actual */
    }

    /* 5. INYECCIÓN DE SUBTÍTULOS DEBAJO DE CADA PASO */

    /* Subtítulo Paso 1 */
    #frm_form_5_container .frm_page_bar li:nth-child(1) .frm_rootline_title::after {
        content: "Fill in your personal details.\A Takes less than 30 seconds";
        white-space: pre-wrap;
        display: block;
        font-size: 13px;
        color: #666666;
        font-weight: normal;
        margin-top: 8px;
        line-height: 1.4;
    }

    /* Subtítulo Paso 2 */
    #frm_form_5_container .frm_page_bar li:nth-child(2) .frm_rootline_title::after {
        content: "Tell us about the service you need.";
        display: block;
        font-size: 13px;
        color: #666666;
        font-weight: normal !important;
        margin-top: 8px;
    }

    /* Subtítulo Paso 3 */
    #frm_form_5_container .frm_page_bar li:nth-child(3) .frm_rootline_title::after {
        content: "Choose the days and times that\A work best for you.";
        white-space: pre-wrap;
        display: block;
        font-size: 13px;
        color: #666666;
        font-weight: normal !important;
        margin-top: 8px;
        line-height: 1.4 !important;
    }

    /* 6. BOTONES DEL FORMULARIO: Quitar mayúsculas forzadas */
    #frm_form_5_container .frm_submit input[type="submit"],
    #frm_form_5_container .frm_submit button,
    #frm_form_5_container .frm_button_submit {
        text-transform: none;
    }

    /* Estilo para los títulos de sección dentro del formulario y QUITAR LÍNEA */
    #frm_form_5_container .frm_section_heading h3,
    #frm_form_5_container .frm_form_fields h3,
    #frm_form_5_container .frm_form_fields h2 {
        font-size: 40px !important;
        font-weight: bold !important;
        color: #0B73A8 !important;
        text-align: center !important;
        margin-bottom: 30px !important;
        margin-top: 0px !important;
        border: none !important;
        padding-top: 0 !important;
    }

    /* Eliminar cualquier caja o línea <hr> que intente separar la sección */
    #frm_form_5_container .frm_form_field.frm_section_heading,
    #frm_form_5_container .frm_section_heading,
    #frm_form_5_container fieldset,
    #frm_form_5_container .frm_page_heading {
        border: none !important;
        box-shadow: none !important;
    }

    /* Ocultar etiquetas divisorias nativas que generan líneas grises */
    #frm_form_5_container hr,
    #frm_form_5_container .frm_section_heading hr {
        display: none !important;
    }

    /* Cambiar el color del asterisco (*) de obligatorio a negro */
    #frm_form_5_container .frm_required {
        color: #000000 !important;
    }


    /* alineación del formulario reservation */
    #form_reservation .frm_radio,
    #form_reservation .frm_checkbox {
        margin-right: 25px !important;

        margin-bottom: 40px !important;
    }

    /* --- título del campo --- */
    #form_reservation .frm_primary_label {
        font-weight: bold !important;
        margin-bottom: 15px !important;
        display: block !important;
    }

    #form_reservation .frm_checkbox:nth-child(1) {
        margin-bottom: 12px;
    }

    #form_reservation .frm_checkbox:nth-child(1) label::after {
        content: "You can unsubscribe at any time.";
        display: block;
        color: #6c757d;
        font-size: 13px;
        margin-top: 4px;
        font-weight: normal;
    }

    #form_reservation .frm_checkbox:nth-child(2) label::after {
        content: "Opt out anytime by replying STOP MKT.";
        display: block;
        color: #6c757d;
        font-size: 13px;
        margin-top: 4px;
        font-weight: normal;
    }

    /* No mostrar el button de previous */
    #frm_form_5_container button.frm_prev_page {
        display: none !important;
    }

    /* Cambiar el color del botón Continue del formulario reservation */
    #frm_form_5_container button.frm_button_submit {
        background-color: #59BF9D !important;
        border-color: #59BF9D !important;
        /* También cambia el borde para que coincida */
    }

    /* Estilos para el contenedor del botón personalizado 'Go Back And Edit' */
    #frm_form_5_container .top-back-button-container {
        text-align: center !important;
        /* Asegura que el botón esté centrado */
        margin-bottom: 25px;
    }

    /* Estilos visuales del botón 'Go Back And Edit' con ajuste óptico */
    #frm_form_5_container .custom-go-back-btn {
        background-color: #D4EFEC !important;
        color: #828282 !important;
        border: none !important;

        /* Ajuste óptico: 14px arriba, 32px derecha, 20px abajo, 32px izquierda */
        padding: 14px 32px 20px 32px !important;

        font-family: "Brandon Text", sans-serif !important;
        font-weight: bold !important;
        font-size: 18px !important;
        line-height: 18px !important;
        letter-spacing: 1px !important;

        /* Flexbox para ayudar a estabilizar el contenedor */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        cursor: pointer !important;
        text-transform: none !important;
    }

    /* Efecto al pasar el ratón */
    #frm_form_5_container .custom-go-back-btn:hover {
        background-color: #BEE0DB !important;
        /* Tono más oscuro para el hover */
        color: #666666 !important;
    }

    /* ESTILOS PARA EL CAMPO DE SUBIDA DE IMÁGENES  */

    /* 1. Asegurar que el contenedor principal sea flex */
    #frm_field_70_container {
        display: flex !important;
        flex-direction: column !important;
    }

    #frm_field_70_container .frm_primary_label {
        order: 1 !important;
        margin-bottom: 8px !important;
        width: 100% !important;
    }

    /* 2. Convertimos a flex el sub-contenedor de Formidable para reordenar lo de adentro */
    #frm_field_70_container .frm_opt_container,
    #frm_field_70_container .frm_control_group {
        order: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    /* 3. Forzamos la descripción ARRIBA (order 1) */
    #frm_desc_field_7wcwi {
        order: 1 !important;
        font-size: 16px !important;
        color: #7A8B94 !important;
        margin-top: 0 !important;
        margin-bottom: 15px !important;
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
        width: 100% !important;
    }

    /* 4. Forzamos la caja de subida ABAJO (order 2) */
    #file70_dropzone {
        order: 2 !important;
    }

    /* Estilo de la pastilla gris 0/10 */
    #frm_field_70_container .custom-file-badge {
        background-color: #EEF1F2 !important;
        color: #5C6F7C !important;
        padding: 4px 12px !important;
        border-radius: 15px !important;
        font-size: 13px !important;
        font-weight: bold !important;
    }

    /* Forzar que la caja sea delgada y acomodar márgenes */
    #file70_dropzone {
        height: 55px !important;
        min-height: 55px !important;
        border: 1px dashed #D3D8DB !important;
        border-radius: 8px !important;
        background-color: transparent !important;
        padding: 0 15px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Eliminar la caja interna punteada duplicada */
    #file70_dropzone .dz-message {
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        width: 100%;
    }

    /* Ocultar TODOS los iconos nativos */
    #file70_dropzone .dz-message>* {
        display: none !important;
    }

    /* Inyectar el icono de paisaje a la izquierda */
    #file70_dropzone .dz-message::before {
        content: "";
        display: block;
        width: 24px;
        height: 24px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2333475b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    /* Fin formulario reservation */



    /*======== Blog ==========*/

    /* posts del blog */

    /* Estilos generales para la paginación con ID post-blog */
    #post-blog .elementor-pagination .page-numbers {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 45px;
        height: 45px;
        background-color: #0B73A8;
        color: #ffffff !important;
        border-radius: 4px;
        margin: 0 4px;
        font-size: 16px;
        font-weight: 400;
        text-decoration: none;
        transition: 0.3s ease-in-out;
    }

    /* Estilo para la página actual (Activa) */
    #post-blog .elementor-pagination .page-numbers.current {
        background-color: #E97F4E;
    }

    /* Efecto Hover */
    #post-blog .elementor-pagination .page-numbers:hover:not(.next) {
        background-color: #E97F4E;
        opacity: 0.9;
    }

    /* Estilos para el texto de "NEXT >" */
    #post-blog .elementor-pagination .page-numbers.next {
        background-color: transparent;
        color: #0B73A8 !important;
        width: auto;
        padding-left: 15px;
        letter-spacing: 2px;
        font-size: 14px;
        text-transform: uppercase;
    }

    /* Ocultar botón Anterior */
    #post-blog .elementor-pagination .page-numbers.prev {
        display: none;
    }

    /* Alinear a la izquierda */
    #post-blog .elementor-pagination {
        justify-content: flex-start !important;
        text-align: left !important;
    }

    /* Limitar el extracto a 2 líneas */
    #post-blog .elementor-post__excerpt,
    #post-blog .elementor-post__excerpt p {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }




}


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

    /*======== HOME ==========*/



}


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

    /*======== HOME ==========*/

    /* Carrusel before-after */

    #Carousel-before-after img {
        aspect-ratio: 3 / 2 !important;
        object-fit: cover !important;
        object-position: center !important;
        width: 100% !important;
        height: 100% !important;
        display: block;
    }



    /* fin Carrusel before-after */



}