/* ========================================================= FUNDACION FEFE PALETA GLOBAL DE MARCA Aplicada a toda la plataforma Purehearts ========================================================= */ :root { --fefe-primary: #6B20A8; --fefe-primary-dark: #4B176F; --fefe-secondary: #2F6F73; --fefe-secondary-dark: #24575A; --fefe-accent: #5E7390; --fefe-lavender: #EDE2F6; --fefe-lavender-soft: #F7F2FA; --fefe-text: #26232B; --fefe-text-muted: #66616D; --fefe-border: #E5E0E8; --fefe-white-warm: #FCFAFD; --fefe-white: #FFFFFF; } /* ========================================================= BASE GLOBAL ========================================================= */ body { color: var(--fefe-text); } a { transition: color .25s ease, background-color .25s ease, border-color .25s ease; } /* ========================================================= BOTONES PRINCIPALES ========================================================= */ .theme-btn.btn-one, .fefe-color .btn-one, .donate-btn .btn-one, button[type="submit"], input[type="submit"] { border-color: var(--fefe-primary) !important; } .theme-btn.btn-one:before, .fefe-color .btn-one:before { background-color: var(--fefe-primary) !important; } /* Botón secundario: azul petróleo */ .theme-btn.btn-two { border-color: var(--fefe-secondary) !important; } .theme-btn.btn-two:before { background-color: var(--fefe-secondary) !important; } /* ========================================================= HEADER / NAVEGACION ========================================================= */ .main-menu .navigation > li.current > a, .main-menu .navigation > li:hover > a, .main-menu .navigation > li > ul > li > a:hover, .main-menu .navigation > li > ul > li > ul > li > a:hover { color: var(--fefe-primary) !important; } .main-menu .navigation > li.current > a:before, .main-menu .navigation > li:hover > a:before { background-color: var(--fefe-primary) !important; } .header-top .info-list li i, .header-top .update-news i, .header-top .info-list li span { color: var(--fefe-secondary) !important; } .header-top .info-list li a:hover { color: var(--fefe-primary) !important; } .menu-area .mobile-nav-toggler, .fefe-color .menu-area .mobile-nav-toggler { background-color: var(--fefe-primary) !important; } /* ========================================================= TITULOS Y EYEBROWS ========================================================= */ .sec-title .top-text, .sec-title.style-two .top-text { color: var(--fefe-secondary) !important; } /* ========================================================= FORMULARIOS ========================================================= */ input:focus, textarea:focus, select:focus, .donate-content .form-inner .form-group input:focus, .xs-sidebar-group .content-inner .form-inner .form-group input:focus, .xs-sidebar-group .content-inner .form-inner .form-group textarea:focus { border-color: var(--fefe-primary) !important; } .donate-content .donate-option .donate-list :checked + label { background-color: var(--fefe-primary) !important; } .donate-content .payment-option .payment-list :checked + label, .donate-content .payment-option .payment-list :checked + label:before { color: var(--fefe-primary) !important; } /* ========================================================= HERO ========================================================= */ .banner-carousel .banner-content .swiper-slide .content-box span, .banner-carousel .banner-content .othre-text span { color: var(--fefe-primary) !important; } .banner-btn { background-color: var(--fefe-secondary) !important; } .banner-btn:before { background-color: var(--fefe-primary) !important; } .banner-section .banner-thumbs-carousel .single-item .text .top-text { color: var(--fefe-secondary) !important; } .banner-section .banner-thumbs-carousel .single-item .text a, .banner-section .banner-thumbs-carousel .single-item .icon-box span { color: var(--fefe-primary) !important; } /* ========================================================= DONACIONES / CAUSAS ========================================================= */ .donate-amount .percentage-box .bar-inner, .urgent-case-section .percentage-box .bar:before { background-color: var(--fefe-secondary) !important; } .donate-amount .percentage-box .count-text, .urgent-case-section .percentage-box h5 { color: var(--fefe-secondary) !important; } .donate-amount .amount-box .icon-box, .donate-amount .amount-box .price { color: var(--fefe-primary) !important; } /* Categorías: lavanda suave */ .case-block-one .category a, .case-block-two .category a, .case-block-three .category a, .case-block-four .category a { background-color: var(--fefe-lavender) !important; border-color: var(--fefe-border) !important; color: var(--fefe-primary-dark) !important; } .case-block-one .category a:hover, .case-block-two .category a:hover, .case-block-three .category a:hover, .case-block-four .category a:hover { background-color: var(--fefe-primary) !important; border-color: var(--fefe-primary) !important; color: #fff !important; } /* Tabs */ .case-section .tab-btns li.active-btn, .case-section .tab-btns li:hover, .case-section .tab-btns li.active-btn h5, .case-section .tab-btns li:hover h5 { color: var(--fefe-primary) !important; } .case-section .tab-btns li .icon:before { background-color: var(--fefe-secondary) !important; } /* ========================================================= EVENTOS ========================================================= */ .events-block-one .inner-box .image-box h3, .events-block-two .inner-box .post-date h3 { background-color: var(--fefe-primary) !important; } .events-block-one .inner-box .inner .info li, .events-block-two .inner-box .content-box .info li { color: var(--fefe-secondary) !important; } .events-block-one .inner-box .inner .info li:before, .events-block-two .inner-box .content-box .info li:before { background-color: var(--fefe-secondary) !important; } .events-block-one .inner-box .inner h3 a:hover, .events-block-two .inner-box .content-box h3 a:hover { color: var(--fefe-primary) !important; } /* Categoría de evento */ .events-block-two .inner-box .content-box .category a { background-color: var(--fefe-lavender) !important; color: var(--fefe-primary-dark) !important; } /* ========================================================= FUNFACTS / CONTADORES ========================================================= */ .counter-block-one .inner-box .icon-box, .funfact-block-one .inner-box .icon-box { color: var(--fefe-secondary) !important; } .counter-block-one .inner-box .count-outer, .funfact-block-one .inner-box .count-outer { color: var(--fefe-primary) !important; } /* ========================================================= EQUIPO ========================================================= */ .team-block-one .inner-box .content-box .designation { color: var(--fefe-secondary) !important; } .team-block-one .inner-box .social-links { background-color: var(--fefe-primary) !important; } /* ========================================================= TESTIMONIOS ========================================================= */ .testimonial-block-one .text .icon-box { background-color: var(--fefe-primary) !important; } .testimonial-block-one .text h3 { color: var(--fefe-primary-dark) !important; } .testimonial-block-one .text .designation { color: var(--fefe-secondary) !important; } /* ========================================================= NOTICIAS / BLOG ========================================================= */ .news-block-one .post-date, .news-block-two .post-date, .blog-details-content .image-box .post-date { background-color: var(--fefe-primary) !important; } .news-block-one .category a, .news-block-two .category a, .blog-details-content .upper-box span { background-color: var(--fefe-lavender) !important; border-color: var(--fefe-border) !important; color: var(--fefe-primary-dark) !important; } .news-block-one .category a:hover, .news-block-two .category a:hover { background-color: var(--fefe-primary) !important; color: #fff !important; } .news-block-one h3 a:hover, .news-block-two h3 a:hover, .blog-post .post h5 a:hover { color: var(--fefe-primary) !important; } /* ========================================================= CONTACTO ========================================================= */ .contact-info-section .icon-box, .contact-section .contact-info-inner .info-box .single-item .text .icon-box { background-color: var(--fefe-secondary) !important; } .contact-info-section a:hover, .contact-section a:hover { color: var(--fefe-primary) !important; } /* ========================================================= FAQ / ACORDEONES ========================================================= */ .accordion-box .block .acc-btn.active { border-color: var(--fefe-primary) !important; background-color: var(--fefe-lavender-soft) !important; } .accordion-box .block .acc-btn.active h5, .accordion-box .block .acc-btn.active .icon-outer { color: var(--fefe-primary-dark) !important; } /* ========================================================= PORTFOLIO / GALERIAS ========================================================= */ .sortable-masonry .filter-tabs li.active { background-color: var(--fefe-primary) !important; } /* No convertir fotos en bloques morados */ .portfolio-section .image-box, .blog-sidebar .post-widget .post .post-thumb { background-color: transparent !important; } /* Overlays neutros */ .portfolio-block-one .overlay-box, .gallery-widget .image a, .default-sidebar .gallery-widget .image a { background-color: rgba(0,0,0,.10) !important; } /* ========================================================= TIENDA / WOOCOMMERCE ========================================================= */ .shop-block-one .inner-box .image-box .cart-btn, .product-details-content .quantity-box .cart-btn .theme-btn { background-color: var(--fefe-primary) !important; } .shop-block-one .inner-box .lower-content .price h5, .product-details-content .upper-box .price, .cart-table tbody tr .total-price { color: var(--fefe-primary-dark) !important; } /* Rating con salvia, no amarillo fuerte */ .shop-block-one .rating li, .product-details-content .rating li, .shop-details .rating li { color: var(--fefe-accent) !important; } /* ========================================================= SIDEBAR / WIDGETS ========================================================= */ .default-sidebar .search-widget .form-group button { background-color: var(--fefe-secondary) !important; } .default-sidebar .search-widget .form-group button:hover { background-color: var(--fefe-primary) !important; } .default-sidebar .category-widget a:hover { color: var(--fefe-primary) !important; } /* ========================================================= PAGINACION ========================================================= */ .pagination li a:hover, .pagination li a.current { background-color: var(--fefe-primary) !important; border-color: var(--fefe-primary) !important; } /* ========================================================= FOOTER ========================================================= */ .footer-top .title-box .icon-box, .footer-top-two .about-widget .icon-box { color: var(--fefe-secondary) !important; } .footer-top .title-box span, .footer-top-two .post-widget .post span { color: var(--fefe-accent) !important; } .footer-top a:hover, .footer-top-two a:hover, .footer-bottom a:hover { color: var(--fefe-primary) !important; } /* ========================================================= SCROLL TOP ========================================================= */ .scroll-top { color: var(--fefe-primary) !important; border-color: var(--fefe-primary) !important; } .scroll-top:hover { background-color: var(--fefe-primary) !important; color: #fff !important; } /* ========================================================= PROTECCION GLOBAL DE IMAGENES ========================================================= */ .image-box img, .image-inner img, figure img { opacity: 1; } .image-box:hover img, .image-inner:hover img { opacity: 1; } /* Nunca usar morado sólido como overlay fotográfico */ .image-box .overlay-box, .image-inner .overlay-box, .gallery-widget .image a, .portfolio-block-one .overlay-box { background-color: rgba(0,0,0,.10) !important; } /* ========================================================= FONDOS ALTERNOS ========================================================= */ .clients-section { background-color: var(--fefe-lavender-soft) !important; } /* ========================================================= ERRORES Mantener rojo semántico. ========================================================= */ .woocommerce-error, .alert-danger, .error, .error-message, [aria-invalid="true"] { /* no recolorear */ } /* ========================================================= FUNDACION FEFE PALETA GLOBAL V2 Refinamiento cromatico de TODA la plataforma ========================================================= */ /* ========================================================= VARIABLES COMPLEMENTARIAS ========================================================= */ :root { --fefe-primary: #6B20A8; --fefe-primary-dark: #4B176F; --fefe-secondary: #2F6F73; --fefe-secondary-dark: #24575A; --fefe-accent: #5E7390; --fefe-accent-soft: #EEF2F6; --fefe-lavender: #EDE2F6; --fefe-lavender-soft: #F7F2FA; --fefe-text: #26232B; --fefe-text-muted: #66616D; --fefe-border: #E5E0E8; --fefe-surface: #FCFAFD; } /* ========================================================= 1. FONDOS GENERALES ========================================================= */ body { background-color: #ffffff; color: var(--fefe-text); } /* Secciones claras alternas */ .case-section, .events-section, .news-section, .blog-section, .shop-section, .faq-section, .team-section, .testimonial-section { --fefe-section-accent: var(--fefe-primary); } /* Fondos suaves donde Purehearts usa superficies secundarias */ .bg-light, .gray-bg, .grey-bg, .light-bg, .section-light { background-color: var(--fefe-lavender-soft) !important; } /* ========================================================= 2. TITULOS DE SECCION ========================================================= */ .sec-title .top-text, .sec-title.style-two .top-text, .section-title .top-text { color: var(--fefe-secondary) !important; } .sec-title h2, .section-title h2 { color: var(--fefe-text) !important; } /* ========================================================= 3. BOTONES ========================================================= */ /* Principal */ .theme-btn.btn-one, .fefe-color .btn-one { border-color: var(--fefe-primary) !important; } .theme-btn.btn-one:before, .fefe-color .btn-one:before { background-color: var(--fefe-primary) !important; } /* Secundario */ .theme-btn.btn-two { border-color: var(--fefe-secondary) !important; } .theme-btn.btn-two:before { background-color: var(--fefe-secondary) !important; } /* Hover secundario */ .theme-btn.btn-two:hover { border-color: var(--fefe-secondary-dark) !important; } /* ========================================================= 4. CAUSAS / DONACIONES ========================================================= */ /* Progreso */ .donate-amount .percentage-box .bar-inner, .case-block-one .percentage-box .bar-inner, .case-block-two .percentage-box .bar-inner, .case-block-three .percentage-box .bar-inner, .case-block-four .percentage-box .bar-inner { background-color: var(--fefe-secondary) !important; } /* Cantidad */ .donate-amount .amount-box .price, .case-block-one .amount-box .price, .case-block-two .amount-box .price, .case-block-three .amount-box .price, .case-block-four .amount-box .price { color: var(--fefe-primary-dark) !important; } /* Iconos */ .donate-amount .amount-box .icon-box, .case-block-one .info-box li i, .case-block-two .info-box li i, .case-block-three .info-box li i, .case-block-four .info-box li i { color: var(--fefe-secondary) !important; } /* Categorias */ .case-block-one .category a, .case-block-two .category a, .case-block-three .category a, .case-block-four .category a { background-color: var(--fefe-lavender) !important; color: var(--fefe-primary-dark) !important; border-color: var(--fefe-border) !important; } .case-block-one .category a:hover, .case-block-two .category a:hover, .case-block-three .category a:hover, .case-block-four .category a:hover { background-color: var(--fefe-primary) !important; border-color: var(--fefe-primary) !important; color: #ffffff !important; } /* ========================================================= 5. EVENTOS ========================================================= */ /* Fecha: mantener como acento fuerte */ .events-block-one .inner-box .image-box h3, .events-block-two .inner-box .post-date h3 { background-color: var(--fefe-primary) !important; color: #ffffff !important; } /* Metadata */ .events-block-one .inner-box .inner .info li, .events-block-two .inner-box .content-box .info li, .event-details-content .events-info li { color: var(--fefe-secondary) !important; } /* Separadores metadata */ .events-block-one .inner-box .inner .info li:before, .events-block-two .inner-box .content-box .info li:before, .event-details-content .events-info li:before { background-color: var(--fefe-accent) !important; } /* Categorias */ .events-block-two .inner-box .content-box .category a { background-color: var(--fefe-accent-soft) !important; color: var(--fefe-secondary-dark) !important; } /* ========================================================= 6. NOTICIAS / BLOG ========================================================= */ /* Fecha */ .news-block-one .post-date, .news-block-two .post-date, .blog-details-content .image-box .post-date { background-color: var(--fefe-primary) !important; color: #ffffff !important; } /* Categoria */ .news-block-one .category a, .news-block-two .category a, .blog-details-content .upper-box span { background-color: var(--fefe-lavender) !important; color: var(--fefe-primary-dark) !important; border-color: var(--fefe-border) !important; } /* Metadata */ .news-block-one .post-info i, .news-block-two .post-info i, .blog-details-content .post-info i, .blog-sidebar .post-date { color: var(--fefe-secondary) !important; } /* ========================================================= 7. EQUIPO ========================================================= */ .team-block-one .inner-box .content-box .designation { color: var(--fefe-secondary) !important; } /* Redes siguen como CTA pequeno */ .team-block-one .inner-box .social-links { background-color: var(--fefe-primary) !important; } /* ========================================================= 8. TESTIMONIOS ========================================================= */ .testimonial-block-one .text .icon-box { background-color: var(--fefe-lavender) !important; color: var(--fefe-primary) !important; } .testimonial-block-one .text h3 { color: var(--fefe-text) !important; } .testimonial-block-one .text .designation { color: var(--fefe-secondary) !important; } /* ========================================================= 9. FUNFACTS / CONTADORES ========================================================= */ .counter-block-one .inner-box .icon-box, .funfact-block-one .inner-box .icon-box { color: var(--fefe-secondary) !important; } .counter-block-one .inner-box .count-outer, .funfact-block-one .inner-box .count-outer { color: var(--fefe-primary) !important; } /* ========================================================= 10. FAQ / ACORDEONES ========================================================= */ .accordion-box .block .acc-btn { border-color: var(--fefe-border) !important; } .accordion-box .block .acc-btn.active { background-color: var(--fefe-lavender-soft) !important; border-color: var(--fefe-primary) !important; } .accordion-box .block .acc-btn.active h5 { color: var(--fefe-primary-dark) !important; } .accordion-box .block .acc-btn.active .icon-outer { color: var(--fefe-primary) !important; border-color: var(--fefe-primary) !important; } /* ========================================================= 11. CONTACTO ========================================================= */ .contact-info-section .icon-box, .contact-section .contact-info-inner .info-box .single-item .text .icon-box { background-color: var(--fefe-secondary) !important; color: #ffffff !important; } .contact-info-section a:hover, .contact-section a:hover { color: var(--fefe-primary) !important; } /* ========================================================= 12. FORMULARIOS ========================================================= */ input, textarea, select { border-color: var(--fefe-border); } input:focus, textarea:focus, select:focus { border-color: var(--fefe-primary) !important; box-shadow: 0 0 0 3px rgba(107,32,168,.07) !important; } /* ========================================================= 13. SIDEBARS ========================================================= */ .default-sidebar .widget-title:before, .blog-sidebar .widget-title:before { background-color: var(--fefe-primary) !important; } .default-sidebar .category-widget a:hover, .blog-sidebar a:hover { color: var(--fefe-primary) !important; } .default-sidebar .search-widget .form-group button { background-color: var(--fefe-secondary) !important; } .default-sidebar .search-widget .form-group button:hover { background-color: var(--fefe-primary) !important; } /* ========================================================= 14. PORTFOLIO / GALERIA ========================================================= */ .sortable-masonry .filter-tabs li.active { background-color: var(--fefe-primary) !important; color: #ffffff !important; } /* MUY IMPORTANTE: nunca usar morado como fondo completo sobre fotografias. */ .portfolio-section .image-box, .portfolio-block-one .image-box, .gallery-widget .image, .blog-sidebar .post-widget .post .post-thumb { background-color: transparent !important; } /* ========================================================= 15. OVERLAYS DE IMAGEN ========================================================= */ .portfolio-block-one .overlay-box, .image-box .overlay-box, .image-inner .overlay-box, .gallery-widget .image a, .default-sidebar .gallery-widget .image a { background-color: rgba(0,0,0,.10) !important; } /* Hover solo ligeramente mas oscuro */ .portfolio-block-one:hover .overlay-box, .image-box:hover .overlay-box, .image-inner:hover .overlay-box { background-color: rgba(0,0,0,.16) !important; } /* ========================================================= 16. WOOCOMMERCE ========================================================= */ /* Comprar */ .shop-block-one .image-box .cart-btn, .product-details-content .quantity-box .cart-btn .theme-btn, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { background-color: var(--fefe-primary) !important; color: #ffffff !important; } /* Hover */ .shop-block-one .image-box .cart-btn:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background-color: var(--fefe-primary-dark) !important; } /* Precios */ .shop-block-one .lower-content .price h5, .product-details-content .upper-box .price, .cart-table tbody tr .total-price { color: var(--fefe-primary-dark) !important; } /* Ratings */ .shop-block-one .rating li, .product-details-content .rating li, .shop-details .rating li { color: var(--fefe-accent) !important; } /* ========================================================= 17. CHECKOUT / CART / MI CUENTA ========================================================= */ .cart-section input:focus, .checkout-page-section input:focus, .checkout-page-section textarea:focus, .myaccount-section input:focus { border-color: var(--fefe-primary) !important; } .checkout-page-section .order-summary h4:before { background-color: var(--fefe-secondary) !important; } .checkout-page-section .order-summary span, .cart-table .total-price { color: var(--fefe-primary-dark) !important; } /* ========================================================= 18. PAGINACION ========================================================= */ .pagination li a:hover, .pagination li a.current { background-color: var(--fefe-primary) !important; border-color: var(--fefe-primary) !important; color: #ffffff !important; } /* ========================================================= 19. FOOTER ========================================================= */ .footer-top .title-box .icon-box, .footer-top-two .about-widget .icon-box { color: var(--fefe-secondary) !important; } .footer-top .title-box span, .footer-top-two .post-widget .post span { color: var(--fefe-accent) !important; } .footer-top a:hover, .footer-top-two a:hover, .footer-bottom a:hover { color: var(--fefe-lavender) !important; } /* ========================================================= 20. CLIENTES / LOGOS ========================================================= */ .clients-section { background-color: var(--fefe-lavender-soft) !important; } /* ========================================================= 21. SCROLL TOP ========================================================= */ .scroll-top { background-color: #ffffff !important; border-color: var(--fefe-primary) !important; color: var(--fefe-primary) !important; } .scroll-top:hover { background-color: var(--fefe-primary) !important; color: #ffffff !important; } /* ========================================================= 22. ESTADOS DE ERROR El rojo se conserva SOLO cuando tiene significado. ========================================================= */ .woocommerce-error, .alert-danger, .error-message { /* mantener color semantico */ } /* ========================================================= FUNDACION FEFE PALETA GLOBAL V3 Correcciones visuales posteriores a auditoria HOME ========================================================= */ /* ========================================================= 1. CAUSAS - ELIMINAR FONDOS NARANJA / ROJO INVASIVOS ========================================================= */ .case-section, .recent-case-section, .case-style-two, .causes-section { background-color: var(--fefe-lavender-soft) !important; } /* Neutralizar decoraciones cálidas del theme */ .case-section:before, .case-section:after, .recent-case-section:before, .recent-case-section:after, .case-style-two:before, .case-style-two:after { background-color: transparent !important; } /* Tarjetas */ .case-block-one .inner-box, .case-block-two .inner-box, .case-block-three .inner-box, .case-block-four .inner-box { background-color: #ffffff !important; } /* Porcentajes y cantidades */ .case-block-one .count-text, .case-block-two .count-text, .case-block-three .count-text, .case-block-four .count-text, .donate-amount .percentage-box .count-text { color: var(--fefe-secondary) !important; } .case-block-one .amount-box .price, .case-block-two .amount-box .price, .case-block-three .amount-box .price, .case-block-four .amount-box .price, .donate-amount .amount-box .price { color: var(--fefe-primary-dark) !important; } /* Barras */ .case-block-one .bar-inner, .case-block-two .bar-inner, .case-block-three .bar-inner, .case-block-four .bar-inner, .donate-amount .bar-inner { background-color: var(--fefe-secondary) !important; } /* Eliminar naranja del texto encima de las fotos */ .case-block-one .image-box .count-text, .case-block-two .image-box .count-text, .case-block-three .image-box .count-text, .case-block-four .image-box .count-text { color: #ffffff !important; } /* En tarjeta con fotografía mantener contraste */ .case-block-one .image-box .donate-amount, .case-block-two .image-box .donate-amount, .case-block-three .image-box .donate-amount, .case-block-four .image-box .donate-amount { color: #ffffff !important; } /* ========================================================= 2. DECORACIONES DE FONDO DE CAUSAS Sustituir rojo/naranja por lavanda muy suave. ========================================================= */ .case-section .pattern-layer, .case-section .pattern-layer:before, .case-section .pattern-layer:after, .recent-case-section .pattern-layer, .recent-case-section .pattern-layer:before, .recent-case-section .pattern-layer:after { opacity: .18 !important; filter: grayscale(1) !important; } /* ========================================================= 3. CLIENTES / LOGOS La franja lavanda actual tiene poco contraste. ========================================================= */ .clients-section { background: #ffffff !important; border-top: 1px solid var(--fefe-border) !important; border-bottom: 1px solid var(--fefe-border) !important; } .clients-section .clients-logo-box, .clients-section .image-box, .clients-section .logo-box { opacity: .58 !important; filter: grayscale(1) !important; transition: opacity .25s ease, filter .25s ease !important; } .clients-section .clients-logo-box:hover, .clients-section .image-box:hover, .clients-section .logo-box:hover { opacity: .85 !important; filter: grayscale(.35) !important; } /* ========================================================= 4. TITULOS DECORATIVOS Eliminar líneas naranjas restantes. ========================================================= */ .sec-title .top-text:before, .sec-title .top-text:after, .sec-title.style-two .top-text:before, .sec-title.style-two .top-text:after, .section-title .top-text:before, .section-title .top-text:after { background-color: var(--fefe-accent) !important; border-color: var(--fefe-accent) !important; } .sec-title .top-text, .sec-title.style-two .top-text, .section-title .top-text { color: var(--fefe-primary) !important; } /* ========================================================= 5. TIENDA ========================================================= */ .shop-section .sec-title .top-text, .shop-section .section-title .top-text { color: var(--fefe-primary) !important; } .shop-section .sec-title .top-text:before, .shop-section .sec-title .top-text:after, .shop-section .section-title .top-text:before, .shop-section .section-title .top-text:after { background-color: var(--fefe-accent) !important; } .shop-block-one .lower-content .price h5, .shop-block-one .lower-content .price, .shop-section .price { color: var(--fefe-primary-dark) !important; } /* ========================================================= 6. CONTACTO ========================================================= */ .contact-info-section .info-box .single-item .inner .icon-box, .contact-section .contact-info-inner .info-box .single-item .text .icon-box { background-color: var(--fefe-secondary) !important; color: #ffffff !important; } .contact-info-section .info-box .single-item .inner .icon-box i, .contact-section .contact-info-inner .info-box .single-item .text .icon-box i { color: #ffffff !important; } /* ========================================================= 7. FOOTER Mejorar contraste. ========================================================= */ .main-footer, .footer-top, .footer-top-two, .footer-bottom { background-color: #232126 !important; } .footer-top h1, .footer-top h2, .footer-top h3, .footer-top h4, .footer-top h5, .footer-top h6, .footer-top-two h1, .footer-top-two h2, .footer-top-two h3, .footer-top-two h4, .footer-top-two h5, .footer-top-two h6 { color: #ffffff !important; } .footer-top p, .footer-top li, .footer-top-two p, .footer-top-two li, .footer-bottom p { color: #B8B3BD !important; } .footer-top a, .footer-top-two a, .footer-bottom a { color: #D7D1DC !important; } .footer-top a:hover, .footer-top-two a:hover, .footer-bottom a:hover { color: var(--fefe-lavender) !important; } /* Detalles secundarios */ .footer-top .title-box span, .footer-top-two .post-widget .post span { color: var(--fefe-accent) !important; } /* ========================================================= 8. SCROLL TO TOP Eliminar halo salmón / naranja heredado. ========================================================= */ .scroll-top, .scroll-to-top, .scroll-to-target { background: #ffffff !important; color: var(--fefe-primary) !important; border: 2px solid var(--fefe-lavender) !important; box-shadow: 0 8px 24px rgba(75, 23, 111, .12) !important; } .scroll-top:before, .scroll-top:after, .scroll-to-top:before, .scroll-to-top:after, .scroll-to-target:before, .scroll-to-target:after { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } .scroll-top:hover, .scroll-to-top:hover, .scroll-to-target:hover { background: var(--fefe-primary) !important; border-color: var(--fefe-primary) !important; color: #ffffff !important; } /* ========================================================= 9. PROTECCION DE FOTOGRAFIAS ========================================================= */ .case-block-one .image-box, .case-block-two .image-box, .case-block-three .image-box, .case-block-four .image-box, .news-block-one .image-box, .events-block-one .image-box { background-color: transparent !important; } .case-block-one .image-box img, .case-block-two .image-box img, .case-block-three .image-box img, .case-block-four .image-box img, .news-block-one .image-box img, .events-block-one .image-box img { opacity: 1 !important; } /* ========================================================= 10. OVERLAYS Solo negro transparente. ========================================================= */ .case-block-one .image-box .overlay-box, .case-block-two .image-box .overlay-box, .case-block-three .image-box .overlay-box, .case-block-four .image-box .overlay-box, .news-block-one .image-box .overlay-box, .events-block-one .image-box .overlay-box { background-color: rgba(0,0,0,.10) !important; } /* ========================================================= FUNDACION FEFE BANNER DE MARCAS V5 Más nitidez, menos opacidad y mejor contraste ========================================================= */ .clients-section { background: #ffffff !important; border-top: 1px solid var(--fefe-border) !important; border-bottom: 1px solid var(--fefe-border) !important; } /* Logos visibles y limpios */ .clients-section .clients-logo-box, .clients-section .image-box, .clients-section .logo-box, .clients-section .single-item, .clients-section .item { opacity: 1 !important; filter: none !important; } /* Imágenes de logos */ .clients-section img { opacity: 1 !important; filter: none !important; max-height: 72px !important; width: auto !important; object-fit: contain !important; transition: transform .25s ease, opacity .25s ease !important; } /* Hover sutil */ .clients-section .clients-logo-box:hover, .clients-section .image-box:hover, .clients-section .logo-box:hover, .clients-section .single-item:hover, .clients-section .item:hover { opacity: 1 !important; filter: none !important; } .clients-section img:hover { transform: scale(1.035) !important; opacity: 1 !important; } /* Evitar capas que apaguen los logos */ .clients-section .overlay-box, .clients-section .overlay-link, .clients-section .image-overlay { background: transparent !important; opacity: 0 !important; } /* Mejor respiración vertical */ .clients-section { padding-top: 34px !important; padding-bottom: 34px !important; } @media (max-width: 767px) { .clients-section { padding-top: 24px !important; padding-bottom: 24px !important; } .clients-section img { max-height: 56px !important; } } /* ========================================================= FUNDACION FEFE BANNER DE MARCAS V6 Correccion definitiva de contraste ========================================================= */ /* --------------------------------------------------------- FONDO REAL DE TODA LA FRANJA El theme usa varios contenedores internos. --------------------------------------------------------- */ .clients-section, .clients-section .auto-container, .clients-section .inner-container, .clients-section .clients-carousel, .clients-section .owl-stage-outer, .clients-section .owl-stage, .clients-section .owl-item, .clients-section .single-item, .clients-section .clients-logo-box, .clients-section .image-box, .clients-section .logo-box { background: #ffffff !important; background-color: #ffffff !important; } /* Eliminar posibles capas lavanda */ .clients-section::before, .clients-section::after, .clients-section .inner-container::before, .clients-section .inner-container::after, .clients-section .auto-container::before, .clients-section .auto-container::after { background: transparent !important; background-color: transparent !important; opacity: 0 !important; } /* --------------------------------------------------------- ALTURA / ESPACIADO --------------------------------------------------------- */ .clients-section { padding: 28px 0 !important; border-top: 1px solid #E5E0E8 !important; border-bottom: 1px solid #E5E0E8 !important; } /* --------------------------------------------------------- LOGOS Los archivos originales son blancos. Convertirlos a carbón/gris para que sean visibles. --------------------------------------------------------- */ .clients-section img, .clients-section .clients-logo-box img, .clients-section .image-box img, .clients-section .logo-box img, .clients-section .single-item img { opacity: .72 !important; filter: brightness(0) saturate(100%) !important; -webkit-filter: brightness(0) saturate(100%) !important; max-height: 70px !important; width: auto !important; object-fit: contain !important; transform: none !important; transition: opacity .25s ease, transform .25s ease !important; } /* --------------------------------------------------------- HOVER --------------------------------------------------------- */ .clients-section .owl-item:hover img, .clients-section .single-item:hover img, .clients-section .clients-logo-box:hover img, .clients-section .image-box:hover img, .clients-section .logo-box:hover img { opacity: .92 !important; filter: brightness(0) saturate(100%) !important; -webkit-filter: brightness(0) saturate(100%) !important; transform: scale(1.03) !important; } /* --------------------------------------------------------- ELIMINAR OVERLAYS --------------------------------------------------------- */ .clients-section .overlay-box, .clients-section .overlay-link, .clients-section .image-overlay, .clients-section a::before, .clients-section a::after { background: transparent !important; background-color: transparent !important; box-shadow: none !important; } /* --------------------------------------------------------- SEPARADORES ENTRE LOGOS --------------------------------------------------------- */ .clients-section .owl-item, .clients-section .single-item { border-color: #E5E0E8 !important; } /* --------------------------------------------------------- TABLET --------------------------------------------------------- */ @media (max-width: 1199px) { .clients-section { padding: 24px 0 !important; } .clients-section img { max-height: 62px !important; } } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media (max-width: 767px) { .clients-section { padding: 20px 0 !important; } .clients-section img { max-height: 52px !important; opacity: .76 !important; } } /* ========================================================= FUNDACION FEFE ABOUT / NOSOTROS V1 Reparacion visual del bloque superior ========================================================= */ /* ========================================================= 1. CORAZON DECORATIVO heart-7.png es el icono grande ubicado detras de las fotos. Convertir turquesa a lavanda/morado FEFE. ========================================================= */ .about-style-three .image_block_2 .image-box > .icon-box { opacity: .22 !important; z-index: 0 !important; } .about-style-three .image_block_2 .image-box > .icon-box img { opacity: 1 !important; /* Convierte el turquesa original a una tonalidad morado/lavanda manteniendo la transparencia PNG. */ filter: brightness(0) saturate(100%) invert(19%) sepia(69%) saturate(3910%) hue-rotate(268deg) brightness(76%) contrast(105%) !important; -webkit-filter: brightness(0) saturate(100%) invert(19%) sepia(69%) saturate(3910%) hue-rotate(268deg) brightness(76%) contrast(105%) !important; } /* ========================================================= 2. FOTOS Mantenerlas naturales y por encima de la decoracion. ========================================================= */ .about-style-three .image_block_2 .image-box .image-1, .about-style-three .image_block_2 .image-box .image-2 { z-index: 1 !important; } .about-style-three .image_block_2 .image-box .image img { opacity: 1 !important; filter: none !important; -webkit-filter: none !important; border-radius: 15px !important; } /* ========================================================= 3. LOGO CIRCULAR / ROTATE TEXT Mantener FEFE visible por encima de las fotos. ========================================================= */ .about-style-three .image_block_2 .image-box .rotate-text { z-index: 4 !important; } /* ========================================================= 4. BADGE DE EXPERIENCIA ========================================================= */ .about-style-three .image_block_2 .image-box .text { z-index: 5 !important; background: rgba(255,255,255,.96) !important; border: 1px solid var(--fefe-border) !important; box-shadow: 0 10px 32px rgba(38,35,43,.10) !important; } .about-style-three .image_block_2 .image-box .text h4 { color: var(--fefe-text) !important; } .about-style-three .image_block_2 .image-box .text h4 i { color: var(--fefe-primary) !important; } /* ========================================================= 5. SUBTITULO ========================================================= */ .about-style-three .sec-title .top-text { color: var(--fefe-primary) !important; } .about-style-three .sec-title .top-text:before, .about-style-three .sec-title .top-text:after { background: var(--fefe-accent) !important; border-color: var(--fefe-accent) !important; } /* ========================================================= 6. TITULO ========================================================= */ .about-style-three .sec-title h2 { color: var(--fefe-text) !important; } /* ========================================================= 7. TEXTO PRINCIPAL ========================================================= */ .about-style-three .content_block_6 .content-box .text p { color: var(--fefe-text-muted) !important; line-height: 1.75 !important; } /* ========================================================= 8. AUTOR / FUNDACION ========================================================= */ .about-style-three .content_block_6 .content-box .inner-box .author-box .icon-box { background: var(--fefe-primary) !important; color: #ffffff !important; } .about-style-three .content_block_6 .content-box .inner-box .author-box span { color: var(--fefe-primary) !important; } .about-style-three .content_block_6 .content-box .inner-box .author-box h3 { color: var(--fefe-text) !important; } /* ========================================================= 9. REDES SOCIALES Quitar colores Facebook/Twitter/Google/etc. ========================================================= */ .about-style-three .content_block_6 .content-box .inner-box .social-links li a { background: #EEF2F6 !important; border: 1px solid var(--fefe-border) !important; color: var(--fefe-secondary) !important; box-shadow: none !important; } .about-style-three .content_block_6 .content-box .inner-box .social-links li:nth-child(2) a, .about-style-three .content_block_6 .content-box .inner-box .social-links li:nth-child(3) a, .about-style-three .content_block_6 .content-box .inner-box .social-links li:last-child a { background: #EEF2F6 !important; color: var(--fefe-secondary) !important; } .about-style-three .content_block_6 .content-box .inner-box .social-links li a:hover { background: var(--fefe-primary) !important; border-color: var(--fefe-primary) !important; color: #ffffff !important; } /* ========================================================= 10. PREMIOS DEMO Los escudos actuales pertenecen al demo Purehearts. Ocultarlos mientras no haya reconocimientos reales FEFE. ========================================================= */ .about-style-three .content_block_6 .award-list { display: none !important; } /* Recuperar espacio dejado por award-list */ .about-style-three .content_block_6 .content-box .sec-title { margin-bottom: 24px !important; } /* ========================================================= 11. RESPONSIVE ========================================================= */ @media (max-width: 991px) { .about-style-three .image_block_2 .image-box > .icon-box { opacity: .15 !important; } } @media (max-width: 767px) { .about-style-three .image_block_2 .image-box > .icon-box { opacity: .12 !important; } .about-style-three .image_block_2 .image-box .text { width: auto !important; left: 20px !important; right: 20px !important; } } /* ========================================================= FUNDACION FEFE TEAM / EQUIPO V1 Reparacion de tarjetas recortadas ========================================================= */ /* --------------------------------------------------------- SECCION --------------------------------------------------------- */ .team-section { height: auto !important; min-height: 0 !important; padding-top: 76px !important; padding-bottom: 90px !important; overflow: visible !important; } /* --------------------------------------------------------- CARRUSEL Evitar recorte vertical de las tarjetas --------------------------------------------------------- */ .team-section .owl-carousel, .team-section .owl-stage-outer, .team-section .owl-stage, .team-section .owl-item { height: auto !important; min-height: 0 !important; } .team-section .owl-stage-outer { overflow: hidden !important; padding-top: 8px !important; padding-bottom: 48px !important; } .team-section .owl-stage { display: flex !important; align-items: stretch !important; } .team-section .owl-item { display: flex !important; align-items: stretch !important; } /* --------------------------------------------------------- TARJETA --------------------------------------------------------- */ .team-section .team-block-one { width: 100% !important; max-width: 300px !important; margin: 0 auto !important; padding-bottom: 26px !important; } .team-section .team-block-one .inner-box { position: relative !important; width: 100% !important; min-height: 410px !important; display: flex !important; flex-direction: column !important; background: #ffffff !important; border: 1px solid var(--fefe-border) !important; border-radius: 16px !important; overflow: visible !important; box-shadow: 0 12px 30px rgba(38,35,43,.08) !important; } /* --------------------------------------------------------- IMAGEN --------------------------------------------------------- */ .team-section .team-block-one .inner-box .image-box { position: relative !important; width: 100% !important; height: 285px !important; min-height: 285px !important; display: block !important; overflow: hidden !important; border-radius: 16px 16px 0 0 !important; background: linear-gradient( 135deg, var(--fefe-lavender-soft), #ffffff ) !important; } .team-section .team-block-one .inner-box .image-box img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; opacity: 1 !important; visibility: visible !important; filter: none !important; -webkit-filter: none !important; border-radius: 16px 16px 0 0 !important; } /* --------------------------------------------------------- CONTENIDO Dejar de depender de position:absolute. --------------------------------------------------------- */ .team-section .team-block-one .inner-box .content-box, .team-section .fluid-container .team-block-one .inner-box .content-box { position: relative !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; height: auto !important; min-height: 125px !important; padding: 20px 18px 24px !important; background: #ffffff !important; border-radius: 0 0 16px 16px !important; overflow: visible !important; box-shadow: none !important; transition: none !important; } /* Desactivar expansión gigante del hover original */ .team-section .team-block-one .inner-box:hover .content-box, .team-section .fluid-container .team-block-one .inner-box:hover .content-box { height: auto !important; background: #ffffff !important; } /* --------------------------------------------------------- INFORMACION --------------------------------------------------------- */ .team-section .team-block-one .content-box .info { margin-bottom: 0 !important; } .team-section .team-block-one .content-box .designation { color: var(--fefe-secondary) !important; font-size: 20px !important; line-height: 1.25 !important; margin-bottom: 4px !important; } .team-section .team-block-one .content-box h3, .team-section .team-block-one .content-box h3 a { color: var(--fefe-text) !important; font-size: 20px !important; line-height: 1.3 !important; } .team-section .team-block-one .content-box h3 a:hover { color: var(--fefe-primary) !important; } /* --------------------------------------------------------- ELEMENTOS QUE SOLO APARECIAN EN HOVER Ocultarlos para evitar expansión brusca. --------------------------------------------------------- */ .team-section .team-block-one .content-box .thumb-box, .team-section .team-block-one .content-box .text { display: none !important; } /* --------------------------------------------------------- REDES SOCIALES --------------------------------------------------------- */ .team-section .team-block-one .inner-box .social-links { position: absolute !important; left: 50% !important; right: auto !important; bottom: -22px !important; transform: translateX(-50%) !important; width: auto !important; min-width: 140px !important; max-width: none !important; display: flex !important; justify-content: center !important; align-items: center !important; gap: 8px !important; margin: 0 !important; padding: 8px 12px !important; background: var(--fefe-primary) !important; border-radius: 24px !important; z-index: 5 !important; } .team-section .team-block-one .inner-box .social-links li { margin: 0 !important; } .team-section .team-block-one .inner-box .social-links li:before { display: none !important; } .team-section .team-block-one .inner-box .social-links li a { width: 28px !important; height: 28px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: transparent !important; color: #ffffff !important; border-radius: 50% !important; } .team-section .team-block-one .inner-box .social-links li a:hover { background: rgba(255,255,255,.16) !important; color: #ffffff !important; } /* --------------------------------------------------------- DOTS --------------------------------------------------------- */ .team-section .owl-dots { margin-top: 22px !important; } .team-section .owl-theme .owl-dots .owl-dot span { width: 14px !important; height: 14px !important; margin: 0 6px !important; border-color: var(--fefe-border) !important; } .team-section .owl-theme .owl-dots .owl-dot span:before { width: 6px !important; height: 6px !important; left: 3px !important; top: 3px !important; background: var(--fefe-accent) !important; } .team-section .owl-theme .owl-dots .owl-dot.active span { border-color: var(--fefe-primary) !important; } .team-section .owl-theme .owl-dots .owl-dot.active span:before { background: var(--fefe-primary) !important; } /* --------------------------------------------------------- TITULO --------------------------------------------------------- */ .team-section .sec-title { margin-bottom: 38px !important; } .team-section .sec-title .top-text { color: var(--fefe-primary) !important; } .team-section .sec-title h2 { color: var(--fefe-text) !important; } /* --------------------------------------------------------- TABLET --------------------------------------------------------- */ @media (max-width: 991px) { .team-section { padding: 60px 0 72px !important; } .team-section .team-block-one { max-width: 320px !important; } } /* --------------------------------------------------------- MOBILE --------------------------------------------------------- */ @media (max-width: 767px) { .team-section { padding: 48px 0 64px !important; } .team-section .team-block-one { max-width: 300px !important; } .team-section .team-block-one .inner-box { min-height: 380px !important; } .team-section .team-block-one .inner-box .image-box { height: 260px !important; min-height: 260px !important; } } /* ========================================================= FUNDACION FEFE MARCAS + SECCION PREVIA V7 ========================================================= */ /* ========================================================= 1. CARRUSEL DE MARCAS Fondo completamente blanco ========================================================= */ .clients-section, .clients-section .auto-container, .clients-section .inner-container, .clients-section .clients-carousel, .clients-section .owl-carousel, .clients-section .owl-stage-outer, .clients-section .owl-stage, .clients-section .owl-item, .clients-section .single-item, .clients-section .clients-logo-box, .clients-section .image-box, .clients-section .logo-box { background: #ffffff !important; background-color: #ffffff !important; } /* Quitar cualquier franja/pseudo-elemento lavanda */ .clients-section::before, .clients-section::after, .clients-section .auto-container::before, .clients-section .auto-container::after, .clients-section .inner-container::before, .clients-section .inner-container::after, .clients-section .clients-carousel::before, .clients-section .clients-carousel::after { content: none !important; display: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ========================================================= 2. QUITAR SEPARADORES ENTRE LOGOS ========================================================= */ .clients-section .owl-item, .clients-section .single-item, .clients-section .clients-logo-box, .clients-section .image-box, .clients-section .logo-box { border: 0 !important; border-left: 0 !important; border-right: 0 !important; box-shadow: none !important; } .clients-section .owl-item::before, .clients-section .owl-item::after, .clients-section .single-item::before, .clients-section .single-item::after, .clients-section .clients-logo-box::before, .clients-section .clients-logo-box::after { content: none !important; display: none !important; } /* ========================================================= 3. ALTURA DEL CARRUSEL Más compacto ========================================================= */ .clients-section { padding: 20px 0 !important; border-top: 0 !important; border-bottom: 0 !important; } .clients-section .owl-stage-outer, .clients-section .owl-stage, .clients-section .owl-item { min-height: 0 !important; height: auto !important; } .clients-section img { max-height: 64px !important; } /* ========================================================= 4. SECCION ANTERIOR Reducir la franja fotografica superior ========================================================= */ /* Purehearts suele usar esta zona como bloque visual antes de clients-section. Compactamos sin ocultar la imagen. */ .clients-section + *, .clients-section { margin-top: 0 !important; } /* Sección inmediatamente anterior */ section:has(+ .clients-section) { min-height: 0 !important; height: auto !important; padding-top: 24px !important; padding-bottom: 24px !important; margin-bottom: 0 !important; } /* Si la franja anterior usa imagen/background */ section:has(+ .clients-section) .auto-container, section:has(+ .clients-section) .inner-container { min-height: 0 !important; height: auto !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* ========================================================= 5. FALLBACK PARA BLOQUES COMUNES DE PUREHEARTS ========================================================= */ .funfact-section + .clients-section, .testimonial-section + .clients-section, .video-section + .clients-section, .contribuition-section + .clients-section, .contribution-section + .clients-section { margin-top: 0 !important; } .funfact-section, .testimonial-section, .video-section, .contribution-section { --fefe-compact-before-clients: 1; } /* ========================================================= 6. DESKTOP ========================================================= */ @media (min-width: 1200px) { .clients-section { padding-top: 18px !important; padding-bottom: 18px !important; } .clients-section img { max-height: 60px !important; } section:has(+ .clients-section) { padding-top: 18px !important; padding-bottom: 18px !important; } } /* ========================================================= 7. MOBILE ========================================================= */ @media (max-width: 767px) { .clients-section { padding: 16px 0 !important; } .clients-section img { max-height: 50px !important; } section:has(+ .clients-section) { padding-top: 16px !important; padding-bottom: 16px !important; } } /* ========================================================= FUNDACION FEFE NEWSLETTER + FOOTER V1 Refinamiento global para todas las paginas ========================================================= */ /* ========================================================= 1. FRANJA NEWSLETTER ========================================================= */ .subscribe-section, .subscribe-section .inner-box { background: #ffffff !important; } .subscribe-section .inner-box { border: 1px solid var(--fefe-border) !important; border-radius: 18px !important; box-shadow: 0 14px 36px rgba(38,35,43,.08) !important; overflow: hidden !important; } /* Bloque logo */ .subscribe-section .logo-box, .subscribe-section .left-column .logo-box { background: var(--fefe-primary) !important; } /* Texto */ .subscribe-section h3, .subscribe-section h4, .subscribe-section .text { color: var(--fefe-text) !important; } /* Icono newsletter */ .subscribe-section i { color: var(--fefe-primary) !important; } /* Redes */ .subscribe-section .social-links li a { background: #EEF2F6 !important; color: var(--fefe-secondary) !important; border: 1px solid var(--fefe-border) !important; box-shadow: none !important; } .subscribe-section .social-links li a:hover { background: var(--fefe-primary) !important; border-color: var(--fefe-primary) !important; color: #ffffff !important; } /* ========================================================= 2. FOOTER PRINCIPAL ========================================================= */ .main-footer, .footer-top, .footer-top-two { background: #242127 !important; } /* Evitar degradados o capas demo */ .main-footer::before, .main-footer::after, .footer-top::before, .footer-top::after, .footer-top-two::before, .footer-top-two::after { background-color: transparent !important; } /* ========================================================= 3. TITULOS DEL FOOTER ========================================================= */ .footer-top .widget-title, .footer-top-two .widget-title, .footer-top h3, .footer-top h4, .footer-top-two h3, .footer-top-two h4 { color: #ffffff !important; font-weight: 700 !important; } .footer-top .widget-title::before, .footer-top .widget-title::after, .footer-top-two .widget-title::before, .footer-top-two .widget-title::after { background: var(--fefe-primary) !important; } /* ========================================================= 4. TEXTO ========================================================= */ .footer-top p, .footer-top li, .footer-top-two p, .footer-top-two li { color: #B9B4BE !important; } .footer-top a, .footer-top-two a { color: #D9D4DD !important; } .footer-top a:hover, .footer-top-two a:hover { color: var(--fefe-lavender) !important; } /* ========================================================= 5. ICONOS DEL FOOTER ========================================================= */ .footer-top i, .footer-top-two i { color: var(--fefe-secondary) !important; } .footer-top .icon-box, .footer-top-two .icon-box { border-color: rgba(255,255,255,.10) !important; } /* ========================================================= 6. LINKS / CHECKS ========================================================= */ .footer-top .links-list li::before, .footer-top-two .links-list li::before { color: var(--fefe-accent) !important; } .footer-top .links-list li a:hover, .footer-top-two .links-list li a:hover { color: #ffffff !important; } /* ========================================================= 7. POSTS RECIENTES ========================================================= */ .footer-top .post-widget .post h4 a, .footer-top-two .post-widget .post h4 a { color: #ffffff !important; } .footer-top .post-widget .post h4 a:hover, .footer-top-two .post-widget .post h4 a:hover { color: var(--fefe-lavender) !important; } .footer-top .post-widget .post span, .footer-top-two .post-widget .post span { color: var(--fefe-accent) !important; } /* ========================================================= 8. GALERIA FOOTER No overlays morados ========================================================= */ .footer-top .gallery-widget .image, .footer-top-two .gallery-widget .image { background: transparent !important; } .footer-top .gallery-widget .image a, .footer-top-two .gallery-widget .image a { background: rgba(0,0,0,.10) !important; } .footer-top .gallery-widget .image a:hover, .footer-top-two .gallery-widget .image a:hover { background: rgba(0,0,0,.18) !important; } /* ========================================================= 9. FOOTER BOTTOM ========================================================= */ .footer-bottom, .footer-bottom-two { background: #1D1B20 !important; border-top: 1px solid rgba(255,255,255,.08) !important; } .footer-bottom p, .footer-bottom-two p, .footer-bottom a, .footer-bottom-two a { color: #AAA4AF !important; } .footer-bottom a:hover, .footer-bottom-two a:hover { color: #ffffff !important; } /* ========================================================= 10. REDES FOOTER ========================================================= */ .footer-bottom .social-links li a, .footer-bottom-two .social-links li a { background: transparent !important; color: #BEB8C2 !important; border: 1px solid rgba(255,255,255,.10) !important; } .footer-bottom .social-links li a:hover, .footer-bottom-two .social-links li a:hover { background: var(--fefe-primary) !important; border-color: var(--fefe-primary) !important; color: #ffffff !important; } /* ========================================================= 11. COPYRIGHT ========================================================= */ .footer-bottom .copyright p a, .footer-bottom-two .copyright p a { color: var(--fefe-lavender) !important; } /* ========================================================= 12. ESPACIADO DESKTOP ========================================================= */ @media (min-width: 1200px) { .footer-top, .footer-top-two { padding-top: 74px !important; padding-bottom: 64px !important; } .footer-bottom, .footer-bottom-two { padding-top: 20px !important; padding-bottom: 20px !important; } } /* ========================================================= 13. MOBILE ========================================================= */ @media (max-width: 767px) { .footer-top, .footer-top-two { padding-top: 48px !important; padding-bottom: 42px !important; } .subscribe-section .inner-box { border-radius: 14px !important; } } /* ========================================================= FUNDACION FEFE HOME NEWS COMPACT V1 Compactar sección Noticias de la página principal ========================================================= */ body.home .news-section { padding-top: 52px !important; padding-bottom: 48px !important; min-height: 0 !important; height: auto !important; } /* Título */ body.home .news-section .sec-title { margin-bottom: 28px !important; } body.home .news-section .sec-title h2 { margin-bottom: 8px !important; } body.home .news-section .sec-title p { margin-bottom: 0 !important; } /* Cards */ body.home .news-section .news-block-one { margin-bottom: 20px !important; } body.home .news-section .news-block-one .inner-box { margin-bottom: 0 !important; } /* Contenido de cada noticia */ body.home .news-section .news-block-one .content-box { padding-top: 18px !important; padding-bottom: 18px !important; } /* Texto más contenido */ body.home .news-section .news-block-one .text { margin-bottom: 12px !important; } body.home .news-section .news-block-one .text p { margin-bottom: 10px !important; } /* Menos espacio entre metadata y enlaces */ body.home .news-section .news-block-one .info { margin-top: 10px !important; } /* Tablet */ @media (max-width: 991px) { body.home .news-section { padding-top: 44px !important; padding-bottom: 40px !important; } } /* Mobile */ @media (max-width: 767px) { body.home .news-section { padding-top: 36px !important; padding-bottom: 34px !important; } body.home .news-section .sec-title { margin-bottom: 22px !important; } } /* ========================================================= FUNDACION FEFE HOME NEWS + CLIENTS V8 Compactar noticias + limpiar cinta de marcas ========================================================= */ /* ========================================================= 1. HOME - SECCION NOTICIAS MAS COMPACTA ========================================================= */ body.home .news-section { padding-top: 42px !important; padding-bottom: 34px !important; margin-top: 0 !important; margin-bottom: 0 !important; min-height: 0 !important; } body.home .news-section .sec-title { margin-bottom: 22px !important; padding-bottom: 0 !important; } body.home .news-section .sec-title h2 { margin-bottom: 8px !important; } body.home .news-section .sec-title p { margin-bottom: 0 !important; } body.home .news-section .news-block-one, body.home .news-section .news-block-two, body.home .news-section .news-block-three { margin-bottom: 18px !important; } body.home .news-section .news-block-one .inner-box, body.home .news-section .news-block-two .inner-box, body.home .news-section .news-block-three .inner-box { margin-bottom: 0 !important; min-height: 0 !important; height: auto !important; } body.home .news-section .news-block-one .image-box, body.home .news-section .news-block-two .image-box, body.home .news-section .news-block-three .image-box { margin-bottom: 0 !important; } body.home .news-section .news-block-one .content-box, body.home .news-section .news-block-two .content-box, body.home .news-section .news-block-three .content-box, body.home .news-section .news-block-one .lower-content, body.home .news-section .news-block-two .lower-content, body.home .news-section .news-block-three .lower-content { padding-top: 14px !important; padding-bottom: 12px !important; min-height: 0 !important; } body.home .news-section .news-block-one .text, body.home .news-section .news-block-two .text, body.home .news-section .news-block-three .text { margin-bottom: 10px !important; } body.home .news-section .news-block-one .post-info, body.home .news-section .news-block-two .post-info, body.home .news-section .news-block-three .post-info, body.home .news-section .news-block-one .info, body.home .news-section .news-block-two .info, body.home .news-section .news-block-three .info { margin-top: 8px !important; margin-bottom: 0 !important; } body.home .news-section .owl-stage-outer, body.home .news-section .owl-stage, body.home .news-section .owl-item { min-height: 0 !important; height: auto !important; } @media (max-width: 991px) { body.home .news-section { padding-top: 36px !important; padding-bottom: 28px !important; } body.home .news-section .sec-title { margin-bottom: 18px !important; } } @media (max-width: 767px) { body.home .news-section { padding-top: 30px !important; padding-bottom: 24px !important; } } /* ========================================================= 2. CINTA / CARRUSEL DE MARCAS Sin franja morada y sin separadores ========================================================= */ :root { --fefe-clients-bg: #f7f7f7; } body.home .clients-section, body.home .clients-section .auto-container, body.home .clients-section .inner-container, body.home .clients-section .clients-carousel, body.home .clients-section .owl-carousel, body.home .clients-section .owl-stage-outer, body.home .clients-section .owl-stage, body.home .clients-section .owl-item, body.home .clients-section .single-item, body.home .clients-section .clients-logo-box, body.home .clients-section .logo-box, body.home .clients-section .image-box { background: var(--fefe-clients-bg) !important; background-color: var(--fefe-clients-bg) !important; } /* Eliminar franjas y decoraciones superiores/inferiores */ body.home .clients-section::before, body.home .clients-section::after, body.home .clients-section .auto-container::before, body.home .clients-section .auto-container::after, body.home .clients-section .inner-container::before, body.home .clients-section .inner-container::after, body.home .clients-section .single-item::before, body.home .clients-section .single-item::after, body.home .clients-section .logo-box::before, body.home .clients-section .logo-box::after, body.home .clients-section .image-box::before, body.home .clients-section .image-box::after { content: none !important; display: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Quitar separadores/bordes entre logos */ body.home .clients-section .owl-item, body.home .clients-section .single-item, body.home .clients-section .clients-logo-box, body.home .clients-section .logo-box, body.home .clients-section .image-box { border: none !important; border-left: none !important; border-right: none !important; box-shadow: none !important; } /* Compactar altura general de la franja */ body.home .clients-section { padding-top: 10px !important; padding-bottom: 10px !important; margin-top: 0 !important; margin-bottom: 0 !important; } body.home .clients-section .single-item, body.home .clients-section .clients-logo-box, body.home .clients-section .logo-box, body.home .clients-section .image-box { padding-top: 16px !important; padding-bottom: 16px !important; } /* Logos claros, nítidos y sin opacidad fea */ body.home .clients-section img { opacity: 1 !important; filter: none !important; mix-blend-mode: normal !important; } /* Si el theme mete hover raro, neutralizarlo */ body.home .clients-section .single-item:hover, body.home .clients-section .clients-logo-box:hover, body.home .clients-section .logo-box:hover, body.home .clients-section .image-box:hover { background: var(--fefe-clients-bg) !important; box-shadow: none !important; transform: none !important; } /* ========================================================= FUNDACION FEFE CLIENTS / MARCAS V9 Recuperar contraste de logos sobre fondo claro ========================================================= */ /* Fondo uniforme */ body.home .clients-section, body.home .clients-section .auto-container, body.home .clients-section .inner-container, body.home .clients-section .owl-carousel, body.home .clients-section .owl-stage-outer, body.home .clients-section .owl-stage, body.home .clients-section .owl-item, body.home .clients-section .single-item, body.home .clients-section .clients-logo-box, body.home .clients-section .image-box, body.home .clients-section .logo-box { background: #f7f7f7 !important; background-color: #f7f7f7 !important; } /* Logos visibles en gris carbón */ body.home .clients-section img, body.home .clients-section .single-item img, body.home .clients-section .clients-logo-box img, body.home .clients-section .image-box img, body.home .clients-section .logo-box img { opacity: .72 !important; filter: brightness(0) saturate(100%) !important; -webkit-filter: brightness(0) saturate(100%) !important; mix-blend-mode: normal !important; max-height: 60px !important; width: auto !important; object-fit: contain !important; transform: none !important; transition: opacity .25s ease, transform .25s ease !important; } /* Hover discreto */ body.home .clients-section .owl-item:hover img, body.home .clients-section .single-item:hover img, body.home .clients-section .clients-logo-box:hover img, body.home .clients-section .image-box:hover img, body.home .clients-section .logo-box:hover img { opacity: .95 !important; filter: brightness(0) saturate(100%) !important; -webkit-filter: brightness(0) saturate(100%) !important; transform: scale(1.025) !important; } /* Sin separadores */ body.home .clients-section .owl-item, body.home .clients-section .single-item, body.home .clients-section .clients-logo-box, body.home .clients-section .image-box, body.home .clients-section .logo-box { border: 0 !important; border-left: 0 !important; border-right: 0 !important; box-shadow: none !important; } /* Sin capas que vuelvan a lavar los logos */ body.home .clients-section .overlay-box, body.home .clients-section .overlay-link, body.home .clients-section .image-overlay { display: none !important; opacity: 0 !important; background: transparent !important; } /* ========================================================= FUNDACION FEFE HOME NEWS V10 Eliminar espacio sobrante DESPUES de las cards ========================================================= */ body.home .news-section { padding-bottom: 8px !important; margin-bottom: 0 !important; min-height: 0 !important; height: auto !important; overflow: visible !important; } /* Contenedores internos */ body.home .news-section > .auto-container, body.home .news-section > .fluid-container, body.home .news-section .auto-container, body.home .news-section .inner-container, body.home .news-section .row, body.home .news-section .row.clearfix { padding-bottom: 0 !important; margin-bottom: 0 !important; min-height: 0 !important; height: auto !important; } /* Carrusel / wrappers */ body.home .news-section .owl-carousel, body.home .news-section .owl-stage-outer, body.home .news-section .owl-stage, body.home .news-section .owl-item { margin-bottom: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; height: auto !important; } /* Quitar espacio residual en la última fila */ body.home .news-section .news-block-one:last-child, body.home .news-section .news-block-two:last-child, body.home .news-section .news-block-three:last-child { margin-bottom: 0 !important; } /* Si existe nav/dots vacíos, que no reserven altura */ body.home .news-section .owl-nav:empty, body.home .news-section .owl-dots:empty { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } /* También reducir dots/nav si existen */ body.home .news-section .owl-dots, body.home .news-section .owl-nav { margin-top: 10px !important; margin-bottom: 0 !important; } /* El bloque siguiente debe comenzar inmediatamente */ body.home .news-section + section, body.home .news-section + .clients-section, body.home .news-section + .contact-info-section { margin-top: 0 !important; } /* Desktop */ @media (min-width: 1200px) { body.home .news-section { padding-bottom: 4px !important; } } /* Tablet */ @media (max-width: 991px) { body.home .news-section { padding-bottom: 10px !important; } } /* Mobile */ @media (max-width: 767px) { body.home .news-section { padding-bottom: 12px !important; } } /* ========================================================= FUNDACION FEFE HOME NEWS STYLE TWO V11 Correccion definitiva de altura ========================================================= */ /* * Purehearts original: * padding: 110px 0 330px 0; * * FEFE: * la sección debe terminar poco después de las cards. */ body.home .news-style-two { position: relative !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding-top: 48px !important; padding-right: 0 !important; padding-bottom: 38px !important; padding-left: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; background-attachment: scroll !important; background-position: center center !important; overflow: hidden !important; } /* La capa blanca debe limitarse a la nueva altura real */ body.home .news-style-two::before { top: 0 !important; bottom: 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; background-color: #ffffff !important; opacity: .80 !important; pointer-events: none !important; } /* Contenedor interno */ body.home .news-style-two > .auto-container, body.home .news-style-two > .fluid-container, body.home .news-style-two .auto-container, body.home .news-style-two .inner-container { position: relative !important; z-index: 1 !important; height: auto !important; min-height: 0 !important; padding-bottom: 0 !important; margin-bottom: 0 !important; } /* Filas */ body.home .news-style-two .row, body.home .news-style-two .row.clearfix { height: auto !important; min-height: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Lista izquierda */ body.home .news-style-two .blog-post { margin-bottom: 0 !important; padding-bottom: 0 !important; } body.home .news-style-two .blog-post .post:last-child { margin-bottom: 0 !important; } /* Cards de noticias */ body.home .news-style-two .news-block-one, body.home .news-style-two .news-block-two { margin-bottom: 0 !important; } body.home .news-style-two .news-block-one .inner-box, body.home .news-style-two .news-block-two .inner-box { margin-bottom: 0 !important; } /* Título */ body.home .news-style-two .sec-title { margin-bottom: 26px !important; } /* El siguiente bloque comienza inmediatamente después */ body.home .news-style-two + section, body.home .news-style-two + .clients-section { margin-top: 0 !important; } /* Desktop grande */ @media (min-width: 1200px) { body.home .news-style-two { padding-top: 44px !important; padding-bottom: 32px !important; } } /* Tablet */ @media (max-width: 991px) { body.home .news-style-two { padding-top: 38px !important; padding-bottom: 30px !important; } } /* Mobile */ @media (max-width: 767px) { body.home .news-style-two { padding-top: 32px !important; padding-bottom: 26px !important; } } /* ========================================================= FUNDACION FEFE HOME NEWS STYLE TWO V12 EXTRA COMPACT ========================================================= */ body.home .news-style-two { padding-top: 26px !important; padding-bottom: 16px !important; margin-top: 0 !important; margin-bottom: 0 !important; height: auto !important; min-height: 0 !important; background-attachment: scroll !important; overflow: hidden !important; } /* Título más cerca del contenido */ body.home .news-style-two .sec-title { margin-top: 0 !important; margin-bottom: 16px !important; padding-top: 0 !important; padding-bottom: 0 !important; } body.home .news-style-two .sec-title h2 { margin-bottom: 6px !important; } body.home .news-style-two .sec-title p { margin-bottom: 0 !important; } /* Contenedor principal */ body.home .news-style-two > .auto-container, body.home .news-style-two .auto-container, body.home .news-style-two .inner-container { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; height: auto !important; min-height: 0 !important; } /* Filas */ body.home .news-style-two .row, body.home .news-style-two .row.clearfix { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; } /* Lista izquierda más compacta */ body.home .news-style-two .blog-post .post { margin-bottom: 14px !important; min-height: 74px !important; } body.home .news-style-two .blog-post .post:last-child { margin-bottom: 0 !important; } /* Cards */ body.home .news-style-two .news-block-one, body.home .news-style-two .news-block-two { margin-bottom: 0 !important; } body.home .news-style-two .news-block-one .inner-box, body.home .news-style-two .news-block-two .inner-box { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Reducir respiración interna de las cards */ body.home .news-style-two .news-block-one .content-box, body.home .news-style-two .news-block-two .content-box { padding-bottom: 12px !important; } body.home .news-style-two .news-block-one .content-box .text, body.home .news-style-two .news-block-two .content-box .text { margin-bottom: 10px !important; } /* Capa blanca exactamente del tamaño de la sección */ body.home .news-style-two::before { top: 0 !important; bottom: 0 !important; height: auto !important; min-height: 0 !important; } /* El siguiente bloque debe comenzar prácticamente enseguida */ body.home .news-style-two + section, body.home .news-style-two + .clients-section { margin-top: 0 !important; } /* Desktop grande */ @media (min-width: 1200px) { body.home .news-style-two { padding-top: 22px !important; padding-bottom: 12px !important; } } /* Tablet */ @media (max-width: 991px) { body.home .news-style-two { padding-top: 24px !important; padding-bottom: 18px !important; } } /* Mobile */ @media (max-width: 767px) { body.home .news-style-two { padding-top: 22px !important; padding-bottom: 18px !important; } body.home .news-style-two .sec-title { margin-bottom: 14px !important; } } /* ========================================================= FUNDACION FEFE HOME NEWS V13 Reducir altura fisica real de las cards ========================================================= */ /* Seccion compacta */ body.home .news-style-two { padding-top: 24px !important; padding-bottom: 18px !important; min-height: 0 !important; height: auto !important; } /* La fila no debe reservar altura adicional */ body.home .news-style-two .row { min-height: 0 !important; height: auto !important; margin-bottom: 0 !important; } /* ========================================================= CARDS DESKTOP El theme usa miniaturas 370x500. Limitamos fisicamente la altura del bloque. ========================================================= */ @media (min-width: 992px) { body.home .news-style-two .news-block-one .inner-box { height: 320px !important; min-height: 0 !important; overflow: hidden !important; } body.home .news-style-two .news-block-one .inner-box .image-box { width: 100% !important; height: 320px !important; min-height: 0 !important; overflow: hidden !important; } body.home .news-style-two .news-block-one .inner-box .image-box img { display: block !important; width: 100% !important; height: 320px !important; object-fit: cover !important; object-position: center center !important; } } /* El contenido blanco permanece pegado abajo */ body.home .news-style-two .news-block-one .inner-box .content-box { bottom: 0 !important; margin-bottom: 0 !important; } /* Lista izquierda compacta y equilibrada con cards */ body.home .news-style-two .blog-post .post { min-height: 68px !important; margin-bottom: 12px !important; } body.home .news-style-two .blog-post .post:last-child { margin-bottom: 0 !important; } /* Evitar el padding gigante que Purehearts introduce en responsive.css */ @media (max-width: 1199px) { body.home .news-style-two { padding-bottom: 22px !important; } } /* Tablet */ @media (min-width: 768px) and (max-width: 991px) { body.home .news-style-two .news-block-one .inner-box, body.home .news-style-two .news-block-one .inner-box .image-box, body.home .news-style-two .news-block-one .inner-box .image-box img { height: 300px !important; } } /* Mobile: dejamos que fluya mejor */ @media (max-width: 767px) { body.home .news-style-two { padding-top: 28px !important; padding-bottom: 24px !important; } body.home .news-style-two .news-block-one .inner-box { height: auto !important; } body.home .news-style-two .news-block-one .inner-box .image-box { height: 330px !important; } body.home .news-style-two .news-block-one .inner-box .image-box img { height: 330px !important; object-fit: cover !important; } } /* ========================================================= FUNDACION FEFE HOME NEWS V13 Reducir altura fisica real de las cards ========================================================= */ /* Seccion compacta */ body.home .news-style-two { padding-top: 24px !important; padding-bottom: 18px !important; min-height: 0 !important; height: auto !important; } /* La fila no debe reservar altura adicional */ body.home .news-style-two .row { min-height: 0 !important; height: auto !important; margin-bottom: 0 !important; } /* ========================================================= CARDS DESKTOP El theme usa miniaturas 370x500. Limitamos fisicamente la altura del bloque. ========================================================= */ @media (min-width: 992px) { body.home .news-style-two .news-block-one .inner-box { height: 320px !important; min-height: 0 !important; overflow: hidden !important; } body.home .news-style-two .news-block-one .inner-box .image-box { width: 100% !important; height: 320px !important; min-height: 0 !important; overflow: hidden !important; } body.home .news-style-two .news-block-one .inner-box .image-box img { display: block !important; width: 100% !important; height: 320px !important; object-fit: cover !important; object-position: center center !important; } } /* El contenido blanco permanece pegado abajo */ body.home .news-style-two .news-block-one .inner-box .content-box { bottom: 0 !important; margin-bottom: 0 !important; } /* Lista izquierda compacta y equilibrada con cards */ body.home .news-style-two .blog-post .post { min-height: 68px !important; margin-bottom: 12px !important; } body.home .news-style-two .blog-post .post:last-child { margin-bottom: 0 !important; } /* Evitar el padding gigante que Purehearts introduce en responsive.css */ @media (max-width: 1199px) { body.home .news-style-two { padding-bottom: 22px !important; } } /* Tablet */ @media (min-width: 768px) and (max-width: 991px) { body.home .news-style-two .news-block-one .inner-box, body.home .news-style-two .news-block-one .inner-box .image-box, body.home .news-style-two .news-block-one .inner-box .image-box img { height: 300px !important; } } /* Mobile: dejamos que fluya mejor */ @media (max-width: 767px) { body.home .news-style-two { padding-top: 28px !important; padding-bottom: 24px !important; } body.home .news-style-two .news-block-one .inner-box { height: auto !important; } body.home .news-style-two .news-block-one .inner-box .image-box { height: 330px !important; } body.home .news-style-two .news-block-one .inner-box .image-box img { height: 330px !important; object-fit: cover !important; } }