@charset "UTF-8"; /*====================================================================================== Brandgineers — main.css (optimizado) Eliminados: ~93 selectores no usados en Index.html Conservados: solo lo que referencia el HTML actual Fuentes: movidas al como — eliminados @import bloqueantes ======================================================================================*/ /* ============================================================ VARIABLES ============================================================ */ :root { --body: #fff; --black: #000; --white: #fff; --theme: #1D194C; --header: #000000; --text: #000000; --border: #000000; --bg: #F2F2F2; --bg2: #0F172A; --box-shadow: 0px 1px 14px 0px rgba(0,0,0,0.13); } /* ============================================================ REDUCED MOTION — WCAG 2.1 ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================================ FOCUS VISIBLE — WCAG 2.2 ============================================================ */ .kb-nav a:focus, .kb-nav button:focus { outline: 2px solid var(--theme); outline-offset: 3px; border-radius: 2px; } /* ============================================================ BASE ============================================================ */ body { font-family: "Inter", sans-serif; font-size: 16px; font-weight: 400; line-height: 28px; color: var(--text); background-color: var(--bg); padding: 0; margin: 0; overflow-x: hidden; } @media (max-width: 575px) { body { font-size: 14px; } } ul { padding: 0; margin: 0; list-style: none; } button { border: none; background-color: transparent; padding: 0; } input:focus { color: var(--white); outline: none; } input { color: var(--white); } h1, h2, h3, h4, h5, h6 { font-family: "Unbounded", sans-serif; margin: 0; padding: 0; color: var(--header); transition: all 0.4s ease-in-out; } h1 { font-size: 130px; font-weight: 700; line-height: 111%; text-transform: capitalize; } @media (max-width: 1199px) { h1 { font-size: 120px; } } @media (max-width: 991px) { h1 { font-size: 80px; } } @media (max-width: 767px) { h1 { font-size: 55px; } } @media (max-width: 575px) { h1 { font-size: 44px; } } @media (max-width: 470px) { h1 { font-size: 40px; } } h2 { font-size: 66px; font-weight: 700; line-height: 111%; } @media (max-width: 1600px) { h2 { font-size: 50px; } } @media (max-width: 1399px) { h2 { font-size: 44px; } } @media (max-width: 1199px) { h2 { font-size: 40px; } } @media (max-width: 991px) { h2 { font-size: 36px; } } @media (max-width: 767px) { h2 { font-size: 30px; } } @media (max-width: 575px) { h2 { font-size: 25px; } } @media (max-width: 470px) { h2 { font-size: 25px; } } h3 { font-size: 28px; font-weight: 600; line-height: 150%; text-transform: capitalize; } @media (max-width: 575px) { h3 { font-size: 20px; } } h4 { font-size: 20px; font-weight: 600; line-height: 150%; text-transform: capitalize; } h5 { font-size: 18px; font-weight: 600; text-transform: capitalize; } h6 { font-size: 16px; font-weight: 600; text-transform: capitalize; } a { text-decoration: none; outline: none !important; cursor: pointer; color: var(--header); transition: all 0.4s ease-in-out; } p { margin: 0; transition: all 0.4s ease-in-out; } span { margin: 0; } /* ============================================================ BOTÓN PRINCIPAL ============================================================ */ .theme-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; -webkit-appearance: none; appearance: none; outline: none !important; border: none; font-weight: 700; font-size: 16px; color: var(--white); padding: 16px 40px 14px; transition: 0.5s ease-in-out; text-transform: capitalize; overflow: hidden; gap: 5px; text-align: center; background-color: var(--theme); z-index: 1; border-radius: 0; min-height: 44px; /* touch target WCAG */ } .theme-btn i { margin-left: 5px; } .theme-btn::before { content: ""; background-color: var(--header); position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; clip-path: circle(0% at 50% 50%); transition: all cubic-bezier(0,0.96,0.58,1.1) 0.8s; z-index: -1; } .theme-btn:hover::before { clip-path: circle(100% at 50% 50%); transition: all cubic-bezier(0,0.96,0.58,1.1) 4s; transition-delay: 200ms; } .theme-btn::after { content: ""; background-color: rgba(11,13,23,0.3); position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; clip-path: circle(0% at 50% 50%); transition: all cubic-bezier(0,0.96,0.58,1.1) 0.8s; z-index: -1; } .theme-btn:hover::after { clip-path: circle(100% at 50% 50%); transition: all cubic-bezier(0,0.96,0.58,1.1) 4s; } .theme-btn:hover { color: var(--white); } /* ============================================================ MEAN MENU (menú móvil) ============================================================ */ .mean-container a.meanmenu-reveal { display: none !important; } .mean-container .mean-nav { background: none; margin-top: 0; } .mean-container .mean-bar { padding: 0; min-height: auto; background: none; } .mean-container .mean-nav > ul { padding: 0; margin: 0; width: 100%; list-style-type: none; display: block !important; } .mean-container .mean-nav ul li a { display: block; width: 100%; padding: 10px 0; color: var(--black); font-size: 16px; font-weight: 500; line-height: 2; text-transform: capitalize; border-bottom: 1px solid rgba(0,0,0,0.2) !important; min-height: 44px; /* touch target */ } .mean-container .mean-nav ul li a:hover { color: var(--theme); } .mean-container .mean-nav ul li .submenu li a { border-bottom: none !important; font-size: 14px; padding: 6px 0; color: var(--header); } .mean-container .mean-nav ul li a:last-child { border-bottom: 0; } .mean-container .mean-nav ul li a.mean-expand { margin-top: 5px; padding: 0 !important; } .mean-container .mean-nav ul li > a > i { display: none; } .mean-container .mean-nav ul li > a.mean-expand i { display: inline-block; font-size: 18px; } .mean-container .mean-nav > ul > li:first-child > a { border-top: 0; } .mean-container .mean-nav ul li a.mean-expand.mean-clicked i { transform: rotate(45deg); transition: all 0.4s ease-in-out; } /* ============================================================ PRELOADER ============================================================ */ .preloader { align-items: center; cursor: default; display: flex; height: 100%; justify-content: center; position: fixed; left: 0; top: 0; width: 100%; z-index: 9999999; background: var(--white); transition: opacity 0.4s ease-out, visibility 0.4s; } .preloader.loaded { opacity: 0; visibility: hidden; } .preloader .animation-preloader { z-index: 1000; } .preloader .animation-preloader .spinner { animation: spinner 1s infinite linear; border-radius: 50%; border: 3px solid rgba(0,0,0,0.2); border-top-color: var(--theme); height: 9em; margin: 0 auto 3.5em; width: 9em; } @media (max-width: 767px) { .preloader .animation-preloader .spinner { width: 7.5em; height: 7.5em; margin: 0 auto 1.5em; } } .preloader .animation-preloader .txt-loading { font: 700 5em "Unbounded", sans-serif; text-align: center; user-select: none; } @media (max-width: 767px) { .preloader .animation-preloader .txt-loading { font-size: 2.5em; } } .preloader .animation-preloader .txt-loading .letters-loading { color: var(--theme); position: relative; } .preloader .animation-preloader .txt-loading .letters-loading:nth-child(2)::before { animation-delay: 0.2s; } .preloader .animation-preloader .txt-loading .letters-loading:nth-child(3)::before { animation-delay: 0.4s; } .preloader .animation-preloader .txt-loading .letters-loading:nth-child(4)::before { animation-delay: 0.6s; } .preloader .animation-preloader .txt-loading .letters-loading:nth-child(5)::before { animation-delay: 0.8s; } .preloader .animation-preloader .txt-loading .letters-loading:nth-child(6)::before { animation-delay: 1.0s; } .preloader .animation-preloader .txt-loading .letters-loading:nth-child(7)::before { animation-delay: 1.2s; } .preloader .animation-preloader .txt-loading .letters-loading:nth-child(8)::before { animation-delay: 1.4s; } .preloader .animation-preloader .txt-loading .letters-loading::before { animation: letters-loading 4s infinite; color: var(--header); content: attr(data-text-preloader); left: 0; opacity: 0; font-family: "Unbounded", sans-serif; position: absolute; top: -3px; transform: rotateY(-90deg); } .preloader p { font-size: 16px; font-weight: 500; text-transform: uppercase; letter-spacing: 8px; color: var(--theme); } .preloader .loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; font-size: 0; z-index: 1; pointer-events: none; } .preloader .loader .row { height: 100%; } .preloader .loader .loader-section { padding: 0; } .preloader .loader .loader-section .bg { background-color: var(--white); height: 100%; left: 0; width: 100%; transition: all 800ms cubic-bezier(0.77,0,0.175,1); } .preloader.loaded .animation-preloader { opacity: 0; transition: 0.3s ease-out; } .preloader.loaded .loader-section .bg { width: 0; transition: 0.7s 0.3s all cubic-bezier(0.1,0.1,0.1,1); } /* ============================================================ BACK TO TOP ============================================================ */ .back-to-top { background-color: var(--white); width: 50px; height: 50px; line-height: 40px; border-radius: 100px; color: var(--header); font-size: 16px; position: fixed; display: inline-flex; align-items: center; justify-content: center; z-index: 9999; right: 30px; bottom: 30px; transition: all 0.4s ease-in-out; opacity: 0; visibility: hidden; transform: translateY(20px); box-shadow: var(--box-shadow); } @media (max-width: 575px) { .back-to-top { display: none; } } .back-to-top:hover { background-color: var(--theme); color: var(--white); } .back-to-top.show { opacity: 1; visibility: visible; transform: translate(0); } /* ============================================================ CURSOR PERSONALIZADO ============================================================ */ .cursor-outer { margin-inline-start: -12px; margin-top: -12px; width: 30px; height: 30px; border: 1px solid var(--theme); background-color: var(--theme); box-sizing: border-box; z-index: 10000000; opacity: 0.34; transition: all 0.4s ease-out; } .cursor-outer.cursor-hover { opacity: 0.14; } .cursor-outer.cursor-big { opacity: 0; } .mouseCursor { position: fixed; top: 0; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; pointer-events: none; border-radius: 50%; transform: translateZ(0); visibility: hidden; text-align: center; } .mouseCursor.cursor-big { width: 20px; height: 20px; margin-inline-start: -12px; margin-top: -12px; } .cursor-inner { margin-inline-start: -3px; margin-top: -3px; width: 10px; height: 10px; z-index: 10000001; background-color: var(--theme); opacity: 1; transition: all 0.24s ease-out; } .cursor-inner span { color: var(--text); line-height: 60px; opacity: 0; text-transform: uppercase; letter-spacing: 1px; font-size: 12px; } .cursor-inner.cursor-big span { opacity: 1; } .cursor-inner.cursor-hover { margin-inline-start: -10px; margin-top: -10px; width: 30px; height: 30px; background-color: var(--theme); border: 1px solid #686363; opacity: 0; } /* ============================================================ OFFCANVAS ============================================================ */ .offcanvas__info { background: var(--white); border-left: 2px solid var(--theme); position: fixed; right: 0; top: 0; width: 450px; height: 100%; transform: translateX(calc(100% + 80px)); transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out; z-index: 9999999; overflow-y: scroll; overscroll-behavior-y: contain; scrollbar-width: none; } .offcanvas__info::-webkit-scrollbar { display: none; } .offcanvas__info.info-open { opacity: 1; transform: translateX(0); } .offcanvas__wrapper { position: relative; height: 100%; padding: 30px; } .offcanvas__wrapper .offcanvas__content .text { color: var(--black); } .offcanvas__wrapper .offcanvas__content .offcanvas__close { width: 45px; height: 45px; line-height: 45px; text-align: center; border-radius: 50%; background-color: var(--theme); position: relative; z-index: 9; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .offcanvas__wrapper .offcanvas__content .offcanvas__close i { color: var(--white); } .offcanvas__wrapper .offcanvas__content .offcanvas__contact { margin-top: 20px; } @media (max-width:575px) { .offcanvas__wrapper .offcanvas__content .offcanvas__contact { display: none; } } .offcanvas__wrapper .offcanvas__content .offcanvas__contact h4 { margin-bottom: 20px; } .offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li { font-size: 20px; font-weight: 600; text-transform: capitalize; } @media (max-width:575px) { .offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li { font-size: 14px; } } .offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li:not(:last-child) { margin-bottom: 30px; } @media (max-width:575px) { .offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li:not(:last-child) { margin-bottom: 20px; } } .offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li a { color: var(--black); } .offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li .offcanvas__contact-icon { margin-right: 20px; } .offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li .offcanvas__contact-icon i { color: var(--theme); } .offcanvas__wrapper .offcanvas__content .offcanvas__contact .social-icon { margin-top: 30px; gap: 10px; } .offcanvas__wrapper .offcanvas__content .offcanvas__contact .social-icon a { width: 45px; height: 45px; line-height: 45px; border-radius: 100%; text-align: center; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: #000; transition: all 0.4s ease-in-out; border: 1px solid var(--border); } .offcanvas__wrapper .offcanvas__content .offcanvas__contact .social-icon a:hover { background-color: var(--theme); color: var(--white); } .offcanvas__overlay { position: fixed; height: 100%; width: 100%; background: #151515; z-index: 900; top: 0; opacity: 0; visibility: hidden; right: 0; } .offcanvas__overlay.overlay-open { opacity: 0.8; visibility: visible; } @media (max-width:450px) { .offcanvas__info { width: 300px; } } @media (max-width:575px) { .offcanvas__wrapper { padding: 20px; } } /* ============================================================ HEADER ============================================================ */ .header-main { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; } .header-main .main-menu ul { margin-bottom: 0; } .header-main .main-menu ul li { position: relative; list-style: none; display: inline-block; margin-inline-end: 50px; } @media (max-width:1199px) { .header-main .main-menu ul li { margin-inline-end: 30px; } } .header-main .main-menu ul li:last-child { margin-inline-end: 0; } .header-main .main-menu ul li a { display: inline-block; font-size: 16px; font-weight: 600; color: var(--header); padding: 20px 0; text-align: left; position: relative; text-transform: capitalize; transition: all 0.4s ease-in-out; } .header-main .main-menu ul li a i { margin-left: 4px; font-size: 14px; } .header-main .main-menu ul li a:hover { color: var(--theme); } .header-main .main-menu ul li .submenu { position: absolute; top: 115%; inset-inline-start: 0; min-width: 260px; padding: 20px 0; z-index: 99999; visibility: hidden; opacity: 0; transform-origin: top center; color: var(--header); transform: translateY(-10px); transition: all 0.4s ease-in-out; border-top: 6px solid var(--theme); background-color: var(--white); box-shadow: 0 4px 10px rgba(0,0,0,0.1); border-radius: 8px; } .header-main .main-menu ul li .submenu li { display: block; width: 100%; margin: 0; } .header-main .main-menu ul li .submenu li a { position: relative; z-index: 11; font-size: 16px; font-weight: 500; letter-spacing: -0.34px; color: var(--header); line-height: 38px; padding: 0 22px 0 32px; width: 100%; display: flex; align-items: center; justify-content: space-between; } .header-main .main-menu ul li .submenu li a::before { content: ""; position: absolute; width: 0; height: 2px; background: var(--theme); left: 14px; bottom: 18px; transition: all 0.4s ease-in-out; } .header-main .main-menu ul li .submenu li a:hover { color: var(--theme); } .header-main .main-menu ul li .submenu li:last-child a { border: none; } .header-main .main-menu ul li .submenu li .submenu { inset-inline-start: 100%; top: 0; visibility: hidden; opacity: 0; } .header-main .main-menu ul li .submenu li:hover > a { color: var(--theme) !important; margin-left: 10px; } .header-main .main-menu ul li .submenu li:hover > a::before { width: 10px; } .header-main .main-menu ul li .submenu li:hover > .submenu { transform: translateY(0); visibility: visible; opacity: 1; } .header-main .main-menu ul li:hover > a { color: var(--theme); } .header-main .main-menu ul li:hover > .submenu { visibility: visible; opacity: 1; transform: translateY(0); } .header-main .header-right { position: relative; z-index: 999; display: flex; align-items: center; gap: 100px; } @media (max-width:1399px) { .header-main .header-right { gap: 20px; } } @media (max-width:1399px) { .header-main .header-right .header-button { display: none; } } /* Hamburger — touch target mínimo 44×44px WCAG 2.5.5 */ .sidebar__toggle { cursor: pointer; font-size: 20px; color: var(--header); min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 8px; background: transparent; border: none; border-radius: 4px; transition: background-color 0.2s ease; } .sidebar__toggle:hover { background-color: rgba(29,25,76,0.06); } .header-1 { position: absolute; width: 100%; left: 0; right: 0; z-index: 999; top: 0; background-color: var(--white); } .header-1.header-3 { border-bottom: 1px solid var(--header); background: #fff; } .sticky { position: fixed !important; top: 0 !important; left: 0; width: 100%; z-index: 99999; transition: all 0.9s; background-color: var(--white); animation: 500ms ease-in-out 0s normal none 1 running fadeInDown; box-shadow: rgba(149,157,165,0.2) 0px 8px 24px; } /* ============================================================ SECCIÓN TÍTULOS ============================================================ */ .section-title { position: relative; z-index: 99; margin-bottom: 30px; } @media (max-width:767px) { .section-title { margin-bottom: 0; } .section-title br { display: none; } } .section-title .sub-title-2 { font-size: 16px; font-weight: 500; color: var(--header); display: inline-block; border-radius: 100px; line-height: 1; margin-bottom: 20px; font-family: "Inter",sans-serif; text-transform: uppercase; position: relative; padding-left: 20px; } @media (max-width:470px) { .section-title .sub-title-2 { font-size: 14px; } } .section-title .sub-title-2::before { position: absolute; content: ""; top: 2px; left: 0; width: 14px; border-radius: 50px; height: 14px; background-color: var(--theme); } .section-title h2 { color: var(--theme); text-transform: uppercase; margin-bottom: 20px; } @media (max-width:1399px) { .section-title h2 { margin-bottom: 10px; } .section-title h2 br { display: none; } } .section-title .stroke-fill { font-size: 66px; font-weight: 700; -webkit-text-stroke-width: 2.22px; -webkit-text-stroke-color: #000; color: transparent; text-transform: uppercase; font-family: "Unbounded",sans-serif; margin-left: 280px; margin-top: 20px; background: linear-gradient(90deg,var(--theme) 0%,var(--theme) 50%,transparent 50%); background-size: 200% 100%; background-position: 100% 0; background-clip: text; -webkit-background-clip: text; animation: text-fill 3s ease-in-out infinite; display: block; } @media (max-width:1600px) { .section-title .stroke-fill { font-size: 50px; margin-left: 230px; } } @media (max-width:1399px) { .section-title .stroke-fill { font-size: 50px; margin-left: 0; } } @media (max-width:991px) { .section-title .stroke-fill { font-size: 40px; } } @media (max-width:767px) { .section-title .stroke-fill { font-size: 30px; } } @media (max-width:575px) { .section-title .stroke-fill { font-size: 25px; -webkit-text-stroke-width: 1.1px; margin-top: -6px; display: inline-block; } } .section-title-2 { position: relative; z-index: 99; margin-bottom: 30px; } @media (max-width:767px) { .section-title-2 { margin-bottom: 0; } .section-title-2 br { display: none; } } .section-title-2 .sub-title { font-size: 16px; font-weight: 500; color: var(--header); display: inline-block; border-radius: 100px; line-height: 1; margin-bottom: 20px; font-family: "Inter",sans-serif; text-transform: uppercase; position: relative; padding-left: 20px; } .section-title-2 .sub-title::before { position: absolute; content: ""; top: 2px; left: 0; width: 14px; border-radius: 50px; height: 14px; background-color: var(--theme); } .section-title-2 h2 { font-size: 46px; font-weight: 500; font-family: "Inter",sans-serif; } @media (max-width:1399px) { .section-title-2 h2 { font-size: 35px; } .section-title-2 h2 br { display: none; } } @media (max-width:991px) { .section-title-2 h2 { font-size: 30px; } } @media (max-width:767px) { .section-title-2 h2 { font-size: 25px; } } @media (max-width:575px) { .section-title-2 h2 { font-size: 20px; line-height: 150%; } } .section-title-2 h2 span { color: rgba(0,0,0,0.5); } /* ============================================================ LAYOUTS HELPERS ============================================================ */ .section-bg { background-color: var(--bg); } .theme-bg { background-color: var(--theme); } .section-padding { padding: 120px 0; } @media (max-width:1199px) { .section-padding { padding: 100px 0; } } @media (max-width:991px) { .section-padding { padding: 80px 0; } } .bg-cover { background-repeat: no-repeat; background-size: cover; position: relative; background-position: center; } .fix { overflow: hidden; } .p-relative { position: relative; z-index: 99; } .mt-30 { margin-top: 30px; } .mb-30 { margin-bottom: 30px; } /* ============================================================ HERO ============================================================ */ .hero-1 { padding: 200px 0 0; position: relative; } @media (max-width:1399px) { .hero-1 { padding: 180px 0 0; } } @media (max-width:991px) { .hero-1 { padding: 140px 0 0; } } .hero-1 .icon { background-color: #F2F2F2; border-radius: 100px; width: 202px; height: 202px; line-height: 202px; position: absolute; left: 50%; transform: translateX(-50%); top: 37.5%; z-index: 999; text-align: center; display: inline-flex; align-items: center; justify-content: center; } @media (max-width:1600px) { .hero-1 .icon { top: 42%; } } @media (max-width:1399px) { .hero-1 .icon { display: none; } } .hero-1 .hero-content h1 { color: var(--theme); text-transform: uppercase; line-height: 80%; } .hero-1 .hero-content .tp-letter-span { display: inline-block; } .hero-1 .hero-content .stroke-fill { color: transparent; -webkit-text-stroke-width: 4px; -webkit-text-stroke-color: var(--header); font-size: 130px; font-weight: 700; font-family: "Unbounded",sans-serif; text-transform: uppercase; margin-left: 170px; background: linear-gradient(90deg,var(--theme) 0%,var(--theme) 50%,transparent 50%); background-size: 200% 100%; background-position: 100% 0; background-clip: text; -webkit-background-clip: text; animation: text-fill 7s ease-in-out infinite; } @media (max-width:1399px) { .hero-1 .hero-content .stroke-fill { margin-left: 32px; font-size: 120px; -webkit-text-stroke-width: 1px; } } @media (max-width:991px) { .hero-1 .hero-content .stroke-fill { margin-left: 32px; font-size: 80px; -webkit-text-stroke-width: 1px; } } @media (max-width:575px) { .hero-1 .hero-content .stroke-fill { margin-left: 0; font-size: 36px; -webkit-text-stroke-width: 1px; } } @media (max-width:470px) { .hero-1 .hero-content .stroke-fill { margin-left: 0; font-size: 34px; -webkit-text-stroke-width: 1.5px; } } .hero-1 .hero-content .hero-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 50px; } @media (max-width:1399px) { .hero-1 .hero-content .hero-bottom { margin-top: 30px; flex-wrap: wrap; gap: 30px; } } @media (max-width:575px) { .hero-1 .hero-content .hero-bottom { flex-direction: column; align-items: flex-start; gap: 16px; } } .hero-1 .hero-content .hero-bottom h3 { font-family: "Inter",sans-serif; font-size: 24px; font-weight: 500; } @media (max-width:1399px) { .hero-1 .hero-content .hero-bottom h3 { font-size: 20px; } } .hero-1 .hero-content .hero-bottom p { font-size: 24px; font-weight: 500; max-width: 399px; color: var(--header); text-align: right; } @media (max-width:1399px) { .hero-1 .hero-content .hero-bottom p { font-size: 20px; text-align: left; } } @media (max-width:575px) { .hero-1 .hero-content .hero-bottom p { font-size: 16px; text-align: left; max-width: 100%; } } .hero-1 .hero-content .hero-bottom p b { color: rgba(0,0,0,0.6); font-weight: 500; } .hero-1 .hero-bottom-image { margin-top: 150px; } @media (max-width:1399px) { .hero-1 .hero-bottom-image { margin-top: 30px; } } .hero-1 .hero-bottom-image .hero-image img { width: 100%; height: 100%; } /* ============================================================ ABOUT ============================================================ */ .about-wrapper { margin-top: 60px; } @media (max-width:1399px) { .about-wrapper { margin-top: 30px; } } .about-wrapper .about-image { overflow: hidden; } .about-wrapper .about-image img { width: 100%; height: 100%; } .about-wrapper .about-image.style-2 { margin-top: 120px; transform: rotate(-15deg); margin-right: 20px; } @media (max-width:1399px) { .about-wrapper .about-image.style-2 { margin-right: 0; transform: rotate(0); margin-top: 0; } } .about-wrapper .about-image.style-3 { margin-top: 120px; transform: rotate(15deg); margin-left: 20px; } @media (max-width:1399px) { .about-wrapper .about-image.style-3 { margin-left: 0; transform: rotate(0); margin-top: 0; } } /* ============================================================ SERVICIOS ============================================================ */ .service-card-item { padding: 10px 0; transition: all 0.4s ease-in-out; margin-bottom: 20px; position: relative; } @media (max-width:575px) { .service-card-item { margin-bottom: 10px; } } @media (max-width:1399px) { .service-card-item.style-top { margin-top: 30px; } } .service-card-item::before { position: absolute; content: ""; inset: 0; opacity: 0; transform: scale(1,0.3); background: #1D194C url(../../assets/img/home-1/dot-shape.png); transition: all 500ms ease; } .service-card-item .service-content { display: flex; align-items: center; gap: 20px; justify-content: center; } .service-card-item .service-content span { font-weight: 700; margin-top: 20px; opacity: 0; transition: all 0.4s ease-in-out; visibility: hidden; font-family: "Unbounded",sans-serif; } @media (max-width:1399px) { .service-card-item .service-content span { margin-top: 0; } } .service-card-item .service-content h3 { font-size: 48px; font-weight: 700; text-transform: uppercase; } @media (max-width:1199px) { .service-card-item .service-content h3 { font-size: 26px; } } @media (max-width:575px) { .service-card-item .service-content h3 { font-size: 24px; } } .service-card-item .service-content h3 a { color: rgba(0,0,0,0.3); } .service-card-item .service-content h3 a:hover { color: var(--white); } .service-card-item .hover-image { width: 266px; height: 294px; position: absolute; border-radius: 30px; top: 50%; left: 0; transform: translateY(-50%) rotate(10deg); background-size: cover; background-repeat: no-repeat; background-position-x: 75%; opacity: 0; transition: transform 0.3s ease-out, opacity 0.3s ease-out; margin: -200px 0 0 -50px; overflow: hidden; pointer-events: none; z-index: 99; visibility: hidden; will-change: transform; } @media (max-width:991px) { .service-card-item .hover-image { display: none !important; } } .service-card-item:hover::before { opacity: 1; transform: scale(1,1); } .service-card-item:hover .service-content span { color: var(--white); opacity: 1; visibility: visible; z-index: 999; } .service-card-item:hover .service-content h3 { position: relative; z-index: 999; } .service-card-item:hover .service-content h3 a { color: var(--white); } .service-card-item:hover .hover-image { opacity: 1; visibility: visible; z-index: 9999; } .service-section { position: relative; } @media (max-width:1399px) { .service-section { margin-bottom: -100px; } } @media (max-width:991px) { .service-section { margin-bottom: -80px; } } .service-section .shape { position: absolute; bottom: 0; top: 0; left: 190px; right: 190px; } .service-section .shape img { width: 100%; height: 100%; } @media (max-width:1399px) { .service-section .shape { display: none; } } /* ============================================================ MARQUEE ============================================================ */ .marque-section { margin-top: 120px; } @media (max-width:1399px) { .marque-section { margin-top: 100px; } } @media (max-width:991px) { .marque-section { margin-top: 80px; } } .marque-section .marquee { position: relative; --duration: 30s; --gap: 0px; display: flex; overflow: hidden; user-select: none; gap: 0; line-height: 190px; } .marque-section .marquee .marquee-group { flex-shrink: 0; display: flex; align-items: center; justify-content: space-around; gap: 30px; min-width: 100%; animation: scroll var(--duration) linear infinite; } .marque-section .marquee .text { color: rgba(0,0,0,0.5); font-size: 100px; font-weight: 500; text-transform: uppercase; font-family: "Unbounded",sans-serif; display: flex; align-items: center; gap: 50px; transition: all 0.4s ease-in-out; } .marque-section .marquee .text:hover { color: var(--theme); } @media (max-width:1399px) { .marque-section .marquee .text { gap: 30px; font-size: 60px; line-height: 45px; } } @media (max-width:575px) { .marque-section .marquee .text { gap: 20px; font-size: 50px; } } /* ============================================================ PROYECTOS ============================================================ */ .project-wrapper .project-card-item { background-color: var(--white); padding: 24px; margin-bottom: 80px; } @media (max-width:1399px) { .project-wrapper .project-card-item { margin-bottom: 30px; } } .project-wrapper .project-card-item .project-image { position: relative; overflow: hidden; } .project-wrapper .project-card-item .project-image .icon { background-color: var(--white); color: var(--theme); font-size: 40px; text-align: center; border-radius: 100px; width: 117px; height: 117px; line-height: 117px; left: 50%; transform: translate(-50%,-50%); top: -50%; transition: all 0.4s ease-in-out; position: absolute; opacity: 0; visibility: hidden; display: inline-flex; align-items: center; justify-content: center; } .project-wrapper .project-card-item .project-image img { width: 100%; height: 100%; display: inline-block; transition: all 500ms ease; } .project-wrapper .project-card-item .project-image img:first-child { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; transform: translateX(50%) scaleX(2); opacity: 0; filter: blur(10px); } .project-wrapper .project-card-item .product-list { padding: 30px 0 0; display: flex; align-items: center; justify-content: space-between; } @media (max-width:1399px) { .project-wrapper .project-card-item .product-list { flex-wrap: wrap; gap: 10px; } } .project-wrapper .project-card-item .product-list li { color: var(--header); font-size: 20px; font-weight: 400; font-family: "Unbounded",sans-serif; transition: all 0.4s ease-in-out; } @media (max-width:1399px) { .project-wrapper .project-card-item .product-list li { font-size: 16px; } } @media (max-width:575px) { .project-wrapper .project-card-item .product-list li { font-size: 15px; } } .project-wrapper .project-card-item .product-list li span { font-family: "Inter",sans-serif; font-size: 16px; color: rgba(0,0,0,0.7); } .project-wrapper .project-card-item .product-list li:hover { color: var(--theme); } .project-wrapper .project-card-item:hover .project-image .icon { top: 50%; visibility: visible; opacity: 1; z-index: 999; } .project-wrapper .project-card-item:hover .project-image img:first-child { transform: translateX(0) scaleX(1); opacity: 1; filter: blur(0); } .project-wrapper .project-card-item:hover .project-image img:nth-child(2) { transform: translateX(-50%) scaleX(2); opacity: 0; filter: blur(10px); } @media (max-width:1399px) { .project-section { margin-bottom: -80px; } } @media (max-width:991px) { .project-section { margin-bottom: -80px; } } /* ============================================================ EXCELENCIA (AWARD) ============================================================ */ .award-card-wrapper { position: relative; } .award-card-wrapper::before { position: absolute; content: ""; inset: 0; opacity: 0; transform: scale(1,0.3); background-color: var(--theme); transition: all 500ms ease; } .award-card-wrapper .award-card-item { display: flex; align-items: center; justify-content: space-between; padding: 25px 0; transition: all 0.4s ease-in-out; border-bottom: 1px solid var(--theme); } @media (max-width:1399px) { .award-card-wrapper .award-card-item { flex-wrap: wrap; gap: 20px; } } .award-card-wrapper .award-card-item span { font-size: 18px; font-weight: 400; color: var(--header); } @media (max-width:1399px) { .award-card-wrapper .award-card-item span { font-size: 16px; } } .award-card-wrapper .award-card-item p { font-size: 22px; font-weight: 400; color: var(--header); } @media (max-width:1399px) { .award-card-wrapper .award-card-item p { font-size: 18px; } } .award-card-wrapper:hover .award-card-item { position: relative; z-index: 999; } .award-card-wrapper:hover .award-card-item span { color: var(--white); position: relative; z-index: 999; } .award-card-wrapper:hover .award-card-item p { color: var(--white); position: relative; z-index: 999; } .award-card-wrapper:hover::before { opacity: 1; transform: scale(1,1); } .award-section .award-top { margin-bottom: 48px; } @media (max-width:1399px) { .award-section .award-top { margin-bottom: 30px; } } /* ============================================================ TESTIMONIALES Fix: transform:none en 768–1399px (solapamiento) ============================================================ */ .testimonial-top-item { display: flex; align-items: start; justify-content: space-between; margin-bottom: 250px; } @media (max-width:1399px) { .testimonial-top-item { margin-bottom: 30px; flex-wrap: wrap; gap: 30px; } } .testimonial-top-item .testimonial-main-box { position: relative; z-index: 9; } .testimonial-top-item .testimonial-main-box .testimonial-box-item { background-color: var(--white); transform: rotate(9.11deg); padding: 35px 30px; margin-top: 40px; max-width: 325px; } @media (max-width:1399px) { .testimonial-top-item .testimonial-main-box .testimonial-box-item { padding: 25px; margin-top: 0; transform: none; /* fix solapamiento */ } } @media (max-width:767px) { .testimonial-top-item .testimonial-main-box .testimonial-box-item { max-width: initial; } } /* Tarjetas fantasma decorativas — solo desktop */ .testimonial-top-item .testimonial-main-box .testimonial-box-item.style-2 { opacity: .2; position: absolute; top: -70px; left: -115px; margin-top: 0; z-index: -1; transform: rotate(23.46deg); } @media (max-width:1600px) { .testimonial-top-item .testimonial-main-box .testimonial-box-item.style-2 { left: -40px; } } @media (max-width:1399px) { .testimonial-top-item .testimonial-main-box .testimonial-box-item.style-2, .testimonial-top-item .testimonial-main-box .testimonial-box-item.style-3, .testimonial-top-item .testimonial-main-box .testimonial-box-item.style-4, .testimonial-top-item .testimonial-main-box .testimonial-box-item.style-5 { display: none; } } .testimonial-top-item .testimonial-main-box .testimonial-box-item.style-3 { opacity: .2; position: absolute; top: -70px; left: -115px; margin-top: 0; z-index: -1; transform: rotate(-28.18deg); } .testimonial-top-item .testimonial-main-box .testimonial-box-item.style-4 { opacity: .2; position: absolute; top: -40px; right: -121px; margin-top: 0; z-index: -1; transform: rotate(-10.188deg); } .testimonial-top-item .testimonial-main-box .testimonial-box-item.style-5 { opacity: .2; position: absolute; top: -50px; right: -100px; margin-top: 0; z-index: -1; transform: rotate(14.76deg); } .testimonial-top-item .testimonial-main-box .testimonial-box-item .star { color: var(--theme); } .testimonial-top-item .testimonial-main-box .testimonial-box-item p { color: #000; font-size: 18px; font-weight: 400; } @media (max-width:1399px) { .testimonial-top-item .testimonial-main-box .testimonial-box-item p { font-size: 16px; } } .testimonial-top-item .testimonial-main-box .testimonial-box-item p span { color: rgba(0,0,0,0.6); } .testimonial-top-item .testimonial-main-box .testimonial-box-item .client-item { display: flex; align-items: center; gap: 10px; margin-top: 50px; } .testimonial-top-item .testimonial-main-box .testimonial-box-item .client-item .content h3 { font-size: 16px; font-weight: 600; text-transform: capitalize; } .testimonial-top-item .testimonial-main-box .testimonial-box-item .client-item .content span { color: var(--header); } /* blockquote reset para uso semántico */ blockquote.testimonial-box-item { margin: 0; border: none; } .testimonial-section { position: relative; } .testimonial-section .section-title { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } @media (max-width:1399px) { .testimonial-section .section-title { position: initial; top: initial; left: initial; transform: initial; } } @media (max-width:767px) { .testimonial-section .section-title { margin-bottom: 30px !important; } } /* ============================================================ FOOTER ============================================================ */ .footer-widget-wrapper { padding: 80px 0; } @media (max-width:575px) { .footer-widget-wrapper { padding: 60px 0; } } .footer-widget-wrapper .footer-text h2 { color: var(--white); font-size: 146px; font-weight: 700; text-transform: uppercase; } @media (max-width:1600px) { .footer-widget-wrapper .footer-text h2 { font-size: 166px; } } @media (max-width:1399px) { .footer-widget-wrapper .footer-text h2 { font-size: 60px; } } @media (max-width:991px) { .footer-widget-wrapper .footer-text h2 { font-size: 50px; } } @media (max-width:767px) { .footer-widget-wrapper .footer-text h2 { font-size: 45px; } } @media (max-width:575px) { .footer-widget-wrapper .footer-text h2 { font-size: 40px; } } .footer-widget-wrapper .footer-text .icon-item { display: flex; align-items: center; gap: 15px; justify-content: end; } @media (max-width:1399px) { .footer-widget-wrapper .footer-text .icon-item { justify-content: start; flex-wrap: wrap; } } .footer-widget-wrapper .footer-text .icon-item .icon { background-color: var(--white); text-align: center; border-radius: 100px; width: 180px; height: 180px; line-height: 180px; display: inline-flex; align-items: center; justify-content: center; } @media (max-width:1399px) { .footer-widget-wrapper .footer-text .icon-item .icon { width: 100px; height: 100px; line-height: 100px; } .footer-widget-wrapper .footer-text .icon-item .icon img { width: 55px; } } @media (max-width:575px) { .footer-widget-wrapper .footer-text .icon-item .icon { width: 75px; height: 75px; line-height: 75px; } .footer-widget-wrapper .footer-text .icon-item .icon img { width: 40px; } } .footer-widget-wrapper .footer-text .icon-item span { font-size: 180px; text-transform: uppercase; font-weight: 700; color: transparent; -webkit-text-stroke-width: 2.22px; -webkit-text-stroke-color: var(--white); } @media (max-width:1399px) { .footer-widget-wrapper .footer-text .icon-item span { font-size: 90px; } } @media (max-width:991px) { .footer-widget-wrapper .footer-text .icon-item span { font-size: 70px; } } @media (max-width:767px) { .footer-widget-wrapper .footer-text .icon-item span { font-size: 60px; } } @media (max-width:575px) { .footer-widget-wrapper .footer-text .icon-item span { font-size: 50px; } } .footer-widget-wrapper .footer-bottom-item { display: flex; align-items: start; justify-content: space-between; margin-top: 90px; margin-bottom: 80px; } @media (max-width:1399px) { .footer-widget-wrapper .footer-bottom-item { gap: 30px; flex-wrap: wrap; margin-top: 30px; margin-bottom: 30px; } } .footer-widget-wrapper .footer-bottom-item .footer-left span { color: var(--white); font-size: 18px; font-weight: 400; display: inline-block; margin-bottom: 10px; } @media (max-width:575px) { .footer-widget-wrapper .footer-bottom-item .footer-left span { font-size: 16px; } } .footer-widget-wrapper .footer-bottom-item .footer-left .list li { display: flex; align-items: center; gap: 78px; font-size: 24px; font-weight: 500; color: var(--white); border-bottom: 1px solid var(--white); padding-bottom: 15px; margin-bottom: 15px; min-height: 44px; } .footer-widget-wrapper .footer-bottom-item .footer-left .list li a { color: var(--white); } .footer-widget-wrapper .footer-bottom-item .footer-right { display: flex; align-items: start; gap: 85px; } @media (max-width:1399px) { .footer-widget-wrapper .footer-bottom-item .footer-right { gap: 30px; flex-wrap: wrap; } } .footer-widget-wrapper .footer-bottom-item .footer-right .single-footer-widget .widget-title { margin-bottom: 24px; } .footer-widget-wrapper .footer-bottom-item .footer-right .single-footer-widget .widget-title h3 { font-weight: 500; color: var(--white); font-size: 20px; } .footer-widget-wrapper .footer-bottom-item .footer-right .single-footer-widget .list-item li { font-size: 18px; font-weight: 500; transition: all 0.4s ease-in-out; min-height: 36px; } @media (max-width:1399px) { .footer-widget-wrapper .footer-bottom-item .footer-right .single-footer-widget .list-item li { font-size: 16px; } } .footer-widget-wrapper .footer-bottom-item .footer-right .single-footer-widget .list-item li:not(:last-child) { margin-bottom: 12px; } .footer-widget-wrapper .footer-bottom-item .footer-right .single-footer-widget .list-item li a { color: var(--white); } .footer-widget-wrapper .footer-wrapper { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--white); padding-bottom: 20px; margin-bottom: 80px; } @media (max-width:1399px) { .footer-widget-wrapper .footer-wrapper { gap: 30px; flex-wrap: wrap; margin-bottom: 30px; } } .footer-widget-wrapper .footer-wrapper p { color: var(--white); font-size: 18px; font-weight: 500; } .footer-widget-wrapper .contact-btn { background-color: var(--white); font-size: 61px; font-weight: 500; color: var(--header); width: 100%; text-transform: uppercase; padding: 30px 0; display: inline-flex; align-items: center; justify-content: center; font-family: "Unbounded",sans-serif; transition: all 0.4s ease-in-out; min-height: 80px; } @media (max-width:1399px) { .footer-widget-wrapper .contact-btn { font-size: 50px; } } @media (max-width:991px) { .footer-widget-wrapper .contact-btn { font-size: 40px; } } @media (max-width:767px) { .footer-widget-wrapper .contact-btn { font-size: 30px; } } .footer-widget-wrapper .contact-btn i { margin-left: 10px; } .footer-widget-wrapper .contact-btn:hover { background-color: var(--header); color: var(--white); border-radius: 100px; } /* ============================================================ SCROLLBAR ============================================================ */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { box-shadow: inset 0 0 5px var(--bg); border-radius: 5px; } ::-webkit-scrollbar-thumb { background: var(--theme); border-radius: 10px; } /* ============================================================ KEYFRAMES ============================================================ */ @keyframes spinner { to { transform: rotateZ(360deg); } } @keyframes letters-loading { 0%,75%,100% { opacity: 0; transform: rotateY(-90deg); } 25%,50% { opacity: 1; transform: rotateY(0deg); } } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-100% - var(--gap))); } } @keyframes text-fill { 0% { background-position: 100% 0; -webkit-text-stroke-color: #000; } 50% { background-position: 0% 0; -webkit-text-stroke-color: transparent; } 100% { background-position: 100% 0; -webkit-text-stroke-color: #000; } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }