@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;600;700&display=swap');

@font-face {
    font-family: 'Zalando Sans';
    src: url('ZalandoSans-Regular.ttf') format('truetype'); 
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Zalando Sans';
    src: url('ZalandoSans-SemiBold.ttf') format('truetype'); 
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Zalando Sans';
    src: url('ZalandoSans-Bold.ttf') format('truetype'); 
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Zalando Sans';
    src: url('ZalandoSans-Black.ttf') format('truetype'); 
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --ora: #ED7429; --blk: #000000; --crm: #FEE8D0; --wht: #FFFFFF; --hvr: #EEEEEE;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { 
    scroll-behavior: smooth; 
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body { 
    background-color: var(--blk); 
    font-family: 'Zalando Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    font-weight: 400;
    overflow-x: hidden; 
    width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* FUENTES SECUNDARIAS ESTRICTAS */
.c-tag, .bt-s, .b-num, .b-text, .leona-txt-top, .leona-txt-bottom, 
.contact-email, .nl-input, .nl-text, .footer, .btn-pill-nav, 
.cta-txt, .s-label {
    font-family: 'JetBrains Mono', monospace;
}

/* FUENTES DE TÍTULOS PRINCIPALES ESTRICTAS (WEIGHT 700 - BOLD) */
.main-title, .s-title, .contact-title { 
    font-family: 'Zalando Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    font-weight: 700 !important; 
    -webkit-text-stroke: 0.5px currentColor; 
}

/* FUENTE DE TÍTULOS DE SERVICIOS ESTRICTA (WEIGHT 600 - SEMIBOLD) */
.s-card h3 {
    font-family: 'Zalando Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
    font-weight: 600 !important; 
    font-size: 24px; 
    line-height: 1.1; 
    margin-bottom: 15px; 
    text-transform: uppercase; 
    letter-spacing: -0.5px;
}

.m-big {
    font-family: 'Zalando Sans', sans-serif;
    font-weight: 900;
    -webkit-text-stroke: 0.5px currentColor; 
}

.parallax-fixed { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: -webkit-fill-available; background-color: var(--blk); z-index: 0; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.main-content { position: relative; z-index: 2; width: 100%; overflow: hidden; }
.bg-white { background-color: var(--wht); position: relative; width: 100%; }
.parallax-spacer { height: 250px; background: transparent; width: 100%; }
.canvas-1920 { width: 100%; max-width: 1920px; margin: 0 auto; padding: 0 120px; }

.line-hide { overflow: hidden; }
.line-hide-tall { overflow: hidden; padding-top: 15px; margin-top: -15px; padding-bottom: 10px; margin-bottom: -10px; }
.fade-right { display: inline-block; opacity: 0; transform: translateX(-50px); }
.hero .fade-right, .is-visible .fade-right { animation: slideRightFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes slideRightFade { to { opacity: 1; transform: translateX(0); } }

.fade-right-single { opacity: 0; transform: translateX(-50px); display: block; }
.is-visible .fade-right-single { animation: slideRightFade 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards; }

.main-title div:nth-child(1) span { animation-delay: 0.1s; }
.main-title div:nth-child(2) span { animation-delay: 0.3s; }
.main-title div:nth-child(3) span { animation-delay: 0.5s; }
.main-title div:nth-child(4) span { animation-delay: 0.7s; }
.s-title div:nth-child(1) span { animation-delay: 0.1s; }
.s-title div:nth-child(2) span { animation-delay: 0.3s; }
.s-title div:nth-child(3) span { animation-delay: 0.5s; }

.navbar { height: 140px; display: flex; justify-content: space-between; align-items: center; width: 100%; }
.logo img { height: 50px; }
.nav-right-group { display: flex; align-items: center; gap: 60px; }
.nav-links { display: flex; gap: 50px; }
.nav-links a { text-decoration: none; color: var(--blk); font-size: 18px; font-weight: 700; transition: 0.3s; }
.nav-links a:hover { color: var(--ora); transform: scale(1.05); }

.btn-pill-nav { background: var(--ora); color: var(--wht); padding: 12px 30px; border-radius: 30px; text-decoration: none; font-size: 16px; transition: 0.3s; white-space: nowrap; }
.btn-pill-nav:hover { background: var(--blk); }

.hero { margin-top: 60px; margin-bottom: 120px; width: 100%; min-width: 0; }
.main-title { color: var(--ora); font-size: 130px; line-height: 0.85; letter-spacing: -4px; margin-bottom: 40px; text-transform: uppercase; }
.hero-p { font-size: 24px; line-height: 1.3; color: var(--blk); max-width: 850px; margin-bottom: 60px; }
.btn-cta-lg { display: inline-flex; align-items: center; justify-content: space-between; background: var(--ora); width: 340px; height: 62px; border-radius: 31px; text-decoration: none; padding: 0 6px 0 25px; transition: 0.3s; white-space: nowrap; }
.btn-cta-lg:hover { background: var(--blk); }
.cta-txt { color: var(--wht); font-size: 18px; font-weight: 600; }
.cta-arrow { width: 52px; height: 52px; background: var(--crm); border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.cta-arrow svg { width: 28px; }

.services { padding-top: 60px; padding-bottom: 120px; width: 100%; min-width: 0; }
.s-header { display: flex; justify-content: flex-start; gap: 80px; align-items: flex-start; margin-bottom: 60px; width: 100%; }
.s-left { width: 650px; max-width: 100%; min-width: 0; }
.s-label { font-size: 16px; margin-bottom: 20px; display: block; text-transform: uppercase; }
.s-title { font-size: 110px; line-height: 0.85; letter-spacing: -3px; color: var(--blk); text-transform: uppercase; }
.s-right { width: 600px; max-width: 100%; position: relative; padding-top: 30px; min-width: 0; }
.s-line { position: absolute; top: 0; width: 100%; height: 1px; background: #D0D0D0; }
.s-right p { font-size: 20px; line-height: 1.4; color: var(--blk); text-align: right; }

.s-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; width: 100%; min-width: 0; }
.s-card { width: 100%; height: 280px; padding: 35px 30px; display: flex; flex-direction: column; transition: 0.4s; border-radius: 4px; min-width: 0; }
.s-card:hover { background: var(--hvr); }
.c-tag { font-size: 14px; margin-bottom: 15px; color: #565655; }
.s-card p { font-size: 15px; line-height: 1.3; margin-bottom: auto; }

.btn-s { display: inline-flex; align-items: center; justify-content: space-between; background: var(--ora); width: 240px; height: 42px; border-radius: 21px; text-decoration: none; padding: 0 4px 0 20px; transition: 0.3s; }
.btn-s:hover { background: var(--blk); }
.bt-s { color: var(--wht); font-size: 13px; font-weight: 600; letter-spacing: 0.5px; }
.c-s { width: 34px; height: 34px; background: var(--crm); border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.c-s svg { width: 18px; }

.parallax-title { text-align: center; width: 100%; min-width: 0; display: flex; justify-content: center; align-items: center; padding: 0 20px; }
.parallax-img { max-width: 700px; width: 100%; height: auto; object-fit: contain; }

.ganancias { padding-top: 100px; padding-bottom: 120px; width: 100%; min-width: 0; }
.text-orange { color: var(--ora) !important; }
.benefits-list { display: flex; flex-direction: column; width: 100%; min-width: 0; }
.b-item { display: flex; align-items: center; justify-content: space-between; background-color: var(--hvr); padding: 35px 50px; margin-bottom: 4px; transition: 0.4s ease; cursor: default; color: var(--blk); width: 100%; }
.b-item:hover { background-color: var(--blk); color: var(--wht); }
.b-num { font-size: 60px; font-weight: 700; line-height: 62px; width: 120px; flex-shrink: 0; }
.b-text { font-weight: 300; font-size: 24px; line-height: 28px; flex-grow: 1; padding-right: 40px; }
.b-icon { width: 60px; height: 60px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; }
.b-icon img { width: 45px; height: auto; object-fit: contain; transition: 0.4s ease; }
.b-item:hover .b-icon img { filter: invert(1) brightness(2); }

.leona-section { padding-top: 75px; padding-bottom: 150px; background-color: var(--wht); position: relative; z-index: 10; width: 100%; min-width: 0; }
.leona-container { position: relative; width: 100%; display: block; }
.leona-video-wrapper { width: 75%; max-width: 1100px; margin: 0 auto; background-color: var(--blk); position: relative; z-index: 1; }
.leona-video { width: 100%; height: auto; display: block; object-fit: cover; }

.leona-txt-top { position: absolute; top: -55px; left: 0; z-index: 2; font-size: 54px; font-weight: 700; line-height: 43px; letter-spacing: -0.54px; color: var(--ora); text-transform: uppercase; text-align: left; }
.leona-txt-bottom { position: absolute; bottom: -55px; right: 0; z-index: 2; font-size: 54px; font-weight: 700; line-height: 43px; letter-spacing: -0.54px; color: var(--ora); text-transform: uppercase; text-align: right; }

.fade-up { display: inline-block; opacity: 0; transform: translateY(100%); }
.is-visible .fade-up { animation: revealUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes revealUp { to { opacity: 1; transform: translateY(0); } }

.leona-txt-top div:nth-child(1) span { animation-delay: 0.1s; }
.leona-txt-top div:nth-child(2) span { animation-delay: 0.3s; }
.leona-txt-top div:nth-child(3) span { animation-delay: 0.5s; }
.leona-txt-bottom div:nth-child(1) span { animation-delay: 0.4s; }
.leona-txt-bottom div:nth-child(2) span { animation-delay: 0.6s; }
.leona-txt-bottom div:nth-child(3) span { animation-delay: 0.8s; }

.marquee-section { background-color: var(--blk); padding: 30px 0; width: 100%; overflow: hidden; position: relative; z-index: 10; display: flex; }
.marquee-track-text { display: flex; width: max-content; width: -webkit-max-content; animation: scroll-left-to-right 35s linear infinite; }
.marquee-group-text { display: flex; align-items: center; gap: 60px; padding-right: 60px; }
.m-big { color: var(--wht); font-size: 110px; line-height: 0.85; letter-spacing: -3px; text-transform: uppercase; white-space: nowrap; }
.m-small { font-family: 'Zalando Sans', sans-serif; color: var(--wht); font-size: 24px; font-weight: 700; line-height: 1.1; letter-spacing: -0.5px; text-transform: uppercase; white-space: nowrap; text-align: left; }

@keyframes scroll-left-to-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0%); } }

.logos-section { background-color: var(--wht); padding: 60px 0; width: 100%; overflow: hidden; position: relative; z-index: 10; }
.marquee-track-logos { display: flex; width: max-content; width: -webkit-max-content; animation: scroll-right-to-left 105s linear infinite; }
.marquee-group-logos { display: flex; align-items: center; gap: 100px; padding-right: 100px; }
.marquee-group-logos img { height: 70px; width: auto; object-fit: contain; }

@keyframes scroll-right-to-left { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } }

.contact-section { padding: 120px 0; width: 100%; min-width: 0; }
.contact-title { color: var(--blk); font-size: 110px; line-height: 0.85; letter-spacing: -3px; text-transform: uppercase; margin-bottom: 20px; }
.contact-title div:nth-child(1) span { animation-delay: 0.1s; }
.contact-title div:nth-child(2) span { animation-delay: 0.3s; }
.contact-title div:nth-child(3) span { animation-delay: 0.5s; }
.contact-email { font-size: 54px; color: var(--ora); text-decoration: none; display: block; margin-bottom: 60px; transition: 0.3s; word-wrap: break-word; }
.contact-email:hover { color: var(--blk); }

.contact-actions { display: flex; align-items: flex-start; gap: 40px; width: 100%; }
.newsletter-box { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.nl-input { width: 380px; max-width: 100%; height: 50px; background-color: #D9D9D9; border-radius: 25px; border: none; outline: none; padding: 0 25px; font-size: 16px; }
.nl-text { font-size: 18px; color: var(--blk); line-height: 1.4; }

/* OPTIMIZACIÓN ICONOS SOCIALES SVG */
.social-icons { display: flex; gap: 15px; }

.s-icon { 
    width: 40px; 
    height: 40px; 
    display: block; 
    position: relative; 
    flex-shrink: 0; 
}

.s-icon img { 
    width: 100%; 
    height: 100%; 
    display: block; 
    object-fit: contain; 
    filter: brightness(0); /* Vuelve el SVG negro */
    transition: filter 0.3s ease; 
}

.s-icon:hover img { 
    filter: brightness(1); /* Revela el naranja original del SVG */
}

.footer { background-color: var(--blk); color: #888888; padding: 80px 120px 40px 120px; position: relative; z-index: 10; font-size: 16px; width: 100%; min-width: 0; }
.footer-top { display: flex; justify-content: flex-start; gap: 250px; margin-bottom: 120px; width: 100%; }
.footer-logo img { height: 50px; filter: invert(1); }
.footer-nav { display: flex; flex-direction: column; gap: 15px; }
.footer-nav-title { color: #555555; margin-bottom: 10px; }
.footer-nav a { color: #888888; text-decoration: none; transition: 0.3s; }
.footer-nav a:hover { color: var(--wht); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.footer-links a { color: #888888; text-decoration: none; transition: 0.3s; }
.footer-links a:hover { color: var(--wht); }

@media (max-width: 1024px) {
    .canvas-1920 { padding: 0 40px !important; }
    .navbar { flex-direction: column; height: auto; padding: 30px 0; gap: 20px; }
    .nav-right-group { gap: 30px; }
    .main-title { font-size: 90px !important; }
    .s-title, .contact-title { font-size: 80px !important; }
    .s-left, .s-right { width: 100%; }
    .s-header { flex-direction: column; gap: 30px; }
    .s-right p { text-align: left; }
    .s-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-top { gap: 80px; }
}

@media (max-width: 768px) {
    .canvas-1920 { padding: 0 20px !important; }
    .navbar { flex-direction: column; align-items: flex-start; gap: 15px; padding: 20px 0; width: 100%; }
    .nav-right-group { width: 100%; flex-direction: column; gap: 15px; align-items: flex-start; }
    .nav-links { flex-wrap: wrap; justify-content: flex-start; gap: 10px; width: 100%; }
    .nav-links a { font-size: 15px !important; }
    .btn-pill-nav { width: 100%; text-align: center; }
    .main-title { font-size: 42px !important; letter-spacing: -2px !important; line-height: 1.1 !important; margin-bottom: 20px !important; word-wrap: break-word !important; word-break: break-word !important; -webkit-hyphens: auto; hyphens: auto; white-space: normal !important; width: 100%; }
    .hero-p { font-size: 18px !important; margin-bottom: 30px !important; }
    .btn-cta-lg { width: 100% !important; max-width: 100% !important; height: auto !important; padding: 10px 10px 10px 20px !important; }
    .cta-txt { font-size: 15px !important; white-space: normal !important; text-align: left !important; line-height: 1.3 !important; }
    .cta-arrow { width: 45px !important; height: 45px !important; flex-shrink: 0 !important; }
    .s-title, .contact-title { font-size: 40px !important; letter-spacing: -1px !important; line-height: 1.1 !important; word-wrap: break-word !important; word-break: break-word !important; -webkit-hyphens: auto; hyphens: auto; white-space: normal !important; width: 100%; }
    .s-grid { grid-template-columns: 1fr; width: 100%; }
    .s-card { height: auto !important; padding: 25px 20px !important; width: 100%; }
    .btn-s { width: 100% !important; }
    .parallax-title { font-size: 35px !important; line-height: 1.1 !important; width: 100%; white-space: normal !important; word-wrap: break-word !important; }
    .parallax-img { max-width: 85vw; }
    .b-item { flex-direction: column; align-items: flex-start; text-align: left; gap: 15px; padding: 30px 20px; width: 100%; }
    .b-text { padding-right: 0; font-size: 18px !important; width: 100%; }
    .b-num { width: 100%; font-size: 45px !important; line-height: 1 !important; }
    .b-icon { align-self: flex-end; margin-top: -30px; }
    .leona-section { padding-top: 50px; padding-bottom: 50px; }
    .leona-video-wrapper { width: 100%; min-height: 250px; }
    .leona-txt-top, .leona-txt-bottom { position: static !important; font-size: 24px !important; line-height: 1.3 !important; padding: 20px 0; text-align: left; display: block; width: 100%; white-space: normal !important; word-wrap: break-word !important; }
    .leona-txt-bottom { text-align: right; }
    .m-big { font-size: 45px !important; }
    .m-small { font-size: 18px !important; }
    .marquee-group-text { gap: 30px; padding-right: 30px; }
    .marquee-group-logos { gap: 40px; padding-right: 40px; }
    .marquee-group-logos img { height: 35px !important; }
    .contact-section { padding: 60px 0; width: 100%; }
    .contact-email { font-size: 24px !important; word-break: break-all !important; margin-bottom: 30px !important; width: 100%; }
    .contact-actions { flex-direction: column; gap: 25px; width: 100%; }
    .newsletter-box { width: 100%; }
    .nl-input { width: 100% !important; max-width: 100% !important; }
    .footer { padding: 50px 20px 30px 20px; width: 100%; }
    .footer-top { flex-direction: column; gap: 40px; margin-bottom: 40px; align-items: flex-start; text-align: left; width: 100%; }
    .footer-bottom { flex-direction: column; gap: 15px; text-align: left; align-items: flex-start; font-size: 14px !important; width: 100%; }
}

@media (max-width: 380px) {
    .main-title { font-size: 35px !important; }
    .s-title, .contact-title { font-size: 32px !important; }
    .parallax-title { font-size: 28px !important; }
    .contact-email { font-size: 20px !important; }
}