:root { --royal: #0748b8; --royal-dark: #062b78; --red: #e02233; --ink: #10274a; --header-height: 132px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); font-family: 'Manrope', sans-serif; }
.site-header { position: fixed; z-index: 20; inset: 0 0 auto; height: var(--header-height); display: flex; align-items: center; gap: clamp(1.25rem, 3.4vw, 4.5rem); padding: 13px clamp(1.25rem, 5vw, 6.5rem); background: #fff; transition: box-shadow .3s, height .35s ease, padding .35s ease; }
.site-header.scrolled { height: 92px; padding-block: 8px; box-shadow: 0 5px 22px rgba(7, 38, 97, .17); }
.brand { flex: 0 0 auto; display: grid; place-items: center; }
.brand img { display: block; width: clamp(230px, 20vw, 300px); height: auto; transition: width .35s ease; }
.site-header.scrolled .brand img { width: clamp(165px, 14vw, 205px); }
.main-nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.9rem); margin-left: auto; }
.main-nav a { position: relative; padding: .65rem 0; color: #15345e; text-decoration: none; text-transform: uppercase; font-size: clamp(.95rem, 1.15vw, 1.15rem); font-weight: 800; letter-spacing: .07em; }
.main-nav a::after { content: ''; position: absolute; left: 0; bottom: .25rem; width: 0; height: 2px; border-radius: 2px; background: var(--red); transition: width .25s; }
.main-nav a:hover::after, .main-nav .active::after { width: 100%; }
.contact-button { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; border: 0; border-radius: 5px; padding: .68rem 1rem; color: #fff; background: linear-gradient(115deg, #073b9c, #0c66e4); box-shadow: 0 8px 17px rgba(4, 57, 151, .23); text-decoration: none; font-size: .75rem; font-weight: 800; letter-spacing: .025em; text-transform: uppercase; transition: transform .2s, box-shadow .2s; }
.contact-button:hover { transform: translateY(-2px); box-shadow: 0 11px 22px rgba(4, 57, 151, .32); }
.contact-button img { width: 21px; height: 21px; object-fit: contain; filter: brightness(0) invert(1); }
.header-contact { min-width: 174px; padding: .55rem .85rem; }
.header-contact span { display: grid; line-height: 1.2; text-align: left; }
.header-contact strong { font-size: .75rem; }.header-contact small { margin-top: .16rem; font-size: .66rem; letter-spacing: .02em; font-weight: 600; }
.hero { position: relative; height: 100svh; min-height: 630px; overflow: hidden; background: var(--royal-dark); }
.slide { position: absolute; inset: 0; display: grid; align-items: center; padding: calc(var(--header-height) + clamp(2rem, 6vh, 5rem)) clamp(1.25rem, 10vw, 12rem) 4rem; opacity: 0; pointer-events: none; transition: opacity .8s ease; background-image: linear-gradient(90deg, rgba(255,255,255,.99) 0%, rgba(255,255,255,.94) 35%, rgba(255,255,255,.31) 60%, rgba(7,29,72,.12) 100%), var(--image); background-position: center, 72% center; background-size: cover; }
.slide::before { content:''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 0 70%, rgba(14, 74, 179, .28)); }
.slide.is-active { opacity: 1; pointer-events: auto; }
.hero-copy { position: relative; z-index: 1; max-width: 580px; animation: rise .8s both; }
.is-active .hero-copy { animation-delay: .15s; }
.eyebrow { display: flex; align-items: center; gap: .65rem; margin: 0 0 1.15rem; color: var(--red); font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow::before { width: 35px; height: 3px; content: ''; background: var(--red); }
h1 { max-width: 560px; margin: 0; color: #092a5b; font-size: clamp(2.3rem, 4.5vw, 4.85rem); font-weight: 800; letter-spacing: -.06em; line-height: 1.04; }
h1 em { color: var(--red); font-style: normal; }
.hero-text { max-width: 500px; margin: 1.45rem 0 2rem; color: #3e5573; font-size: clamp(.92rem, 1.2vw, 1.07rem); font-weight: 500; line-height: 1.78; }
.hero-button { padding: .9rem 1.28rem; }.hero-button img { width: 22px; height: 22px; }
.image-credit { position: absolute; z-index: 2; right: 2rem; bottom: 1.4rem; color: rgba(255,255,255,.75); font-size: .6rem; letter-spacing: .06em; }
.slider-controls { position: absolute; z-index: 5; right: clamp(1.25rem, 5vw, 6rem); bottom: 2rem; display: flex; align-items: center; gap: 1rem; }
.arrow { display: grid; width: 39px; height: 39px; place-items: center; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; color: #fff; background: rgba(4,44,116,.53); cursor: pointer; font-size: 1.1rem; transition: background .2s; }.arrow:hover { background: var(--red); }
.slider-dots { display: flex; gap: .55rem; }.dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 8px; background: rgba(255,255,255,.62); cursor: pointer; transition: width .25s, background .25s; }.dot.is-active { width: 28px; background: var(--red); }
.services-section { padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 10vw, 12rem); background: #f7f9fd; scroll-margin-top: var(--header-height); }
.section-intro { max-width: 780px; margin: 0 auto clamp(3rem, 6vw, 5.5rem); text-align: center; }
.section-intro .eyebrow { justify-content: center; }.section-intro h2 { margin: 0; color: #082b60; font-size: clamp(2.5rem, 5vw, 4.6rem); font-weight: 800; letter-spacing: -.06em; line-height: 1; text-transform: uppercase; }
.section-intro > p:last-child { margin: 1.5rem auto 0; color: #526884; font-size: clamp(.96rem, 1.25vw, 1.1rem); font-weight: 500; line-height: 1.8; }
.service-list { display: grid; gap: clamp(1.5rem, 4vw, 3rem); max-width: 1180px; margin: auto; }
.service-card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 18px 50px rgba(12, 47, 103, .09); }
.service-card.reverse .service-image { order: 2; }.service-card.reverse .service-content { order: 1; }
.service-image { min-height: 0; overflow: hidden; }.service-image img, .service-image video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }.service-card:hover .service-image img, .service-card:hover .service-image video { transform: scale(1.05); }
.service-content { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.8rem, 3vw, 3.1rem) clamp(2rem, 3.5vw, 4rem); }.service-number { margin: 0 0 .55rem; color: var(--red); font-size: .74rem; font-weight: 800; letter-spacing: .15em; }
.service-content h3 { margin: 0; color: #092d63; font-size: clamp(1.75rem, 2.6vw, 2.6rem); font-weight: 800; letter-spacing: -.05em; line-height: 1.08; }.service-content > p:not(.service-number) { margin: .8rem 0 1.1rem; color: #536983; font-size: .9rem; font-weight: 500; line-height: 1.62; }
.service-content ul { display: grid; gap: .42rem; margin: 0; padding: 0; list-style: none; }.service-content li { display: flex; align-items: center; gap: .65rem; color: #173963; font-size: .78rem; font-weight: 700; }.service-content li::before { flex: 0 0 auto; width: 8px; height: 8px; content: ''; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(224,34,51,.1); }
.gallery-section { padding: clamp(5rem, 9vw, 8rem) clamp(1.25rem, 10vw, 12rem); background: #fff; }.gallery-heading { max-width: 1180px; margin: 0 auto 2.3rem; }.gallery-heading h2 { margin: 0; color: #082b60; font-size: clamp(2.5rem, 5vw, 4.6rem); font-weight: 800; letter-spacing: -.06em; line-height: 1; text-transform: uppercase; }.gallery-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: clamp(.8rem, 1.8vw, 1.5rem); max-width: 1180px; margin: auto; }.gallery-item { height: clamp(330px, 34vw, 460px); margin: 0; overflow: hidden; border-radius: 9px; background: #0b2d61; }.gallery-item img, .gallery-item video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }.gallery-item:hover img, .gallery-item:hover video { transform: scale(1.045); }
.hiring-section { position: relative; isolation: isolate; overflow: hidden; padding: clamp(5rem, 9vw, 8rem) clamp(1.25rem, 10vw, 12rem); background: linear-gradient(rgba(196, 19, 39, .88), rgba(190, 14, 35, .9)), url('../images/hero-traslado-aereo.jpg') center / cover; }
.hiring-section::after { position: absolute; z-index: -1; inset: 0; content: ''; background: linear-gradient(110deg, rgba(91, 5, 18, .26), transparent 65%); }
.hiring-inner { max-width: 1180px; margin: auto; }.hiring-heading { max-width: 650px; }.hiring-heading .eyebrow { color: rgba(255,255,255,.88); }.hiring-heading .eyebrow::before { background: #fff; }.hiring-heading h2 { margin: 0; color: #fff; font-size: clamp(2.4rem, 4.8vw, 4.5rem); font-weight: 800; letter-spacing: -.06em; line-height: 1.05; text-transform: uppercase; }
.timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 3vw, 3rem); margin: clamp(3.3rem, 7vw, 5.5rem) 0 0; padding: 0; list-style: none; }.timeline::before { position: absolute; top: 28px; right: 6%; left: 6%; height: 1px; content: ''; background: rgba(255,255,255,.65); }.timeline-item { position: relative; padding-top: 4.4rem; color: #fff; }.timeline-item::before { position: absolute; top: 19px; left: 0; width: 19px; height: 19px; content: ''; border: 5px solid rgba(255,255,255,.6); border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px rgba(255,255,255,.16); }.timeline-step { color: rgba(255,255,255,.78); font-size: .68rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }.timeline-item h3 { margin: .65rem 0 .7rem; font-size: clamp(1.1rem, 1.55vw, 1.38rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }.timeline-item p { margin: 0; color: rgba(255,255,255,.9); font-size: .83rem; font-weight: 500; line-height: 1.72; }
.about-section { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr); background: #fff; scroll-margin-top: var(--header-height); }.about-copy { padding: clamp(5rem, 8vw, 8rem) clamp(1.25rem, 8vw, 10rem); }.about-copy h2 { margin: 0; color: #082b60; font-size: clamp(2.5rem, 5vw, 4.6rem); font-weight: 800; letter-spacing: -.06em; line-height: 1; text-transform: uppercase; }.about-copy .about-lead { margin: 1.5rem 0 1rem; color: #163c75; font-size: clamp(1.05rem, 1.55vw, 1.3rem); font-weight: 700; line-height: 1.55; }.about-copy > p:not(.eyebrow):not(.about-lead) { margin: .85rem 0 0; color: #5b6e87; font-size: .9rem; font-weight: 500; line-height: 1.75; }.about-experience { display: grid; gap: .3rem; margin: 2rem 0; padding: 1rem 0 1rem 1.15rem; border-left: 4px solid var(--red); }.about-experience strong { color: var(--red); font-size: clamp(1.35rem, 2.1vw, 1.75rem); font-weight: 800; letter-spacing: -.04em; text-transform: uppercase; }.about-experience span { color: #536a87; font-size: .78rem; font-weight: 700; }.about-copy h3 { margin: 0 0 1rem; color: #0b3369; font-size: 1rem; font-weight: 800; text-transform: uppercase; }.about-list { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }.about-list li { position: relative; padding-left: 1.2rem; color: #314f76; font-size: .8rem; font-weight: 600; line-height: 1.5; }.about-list li::before { position: absolute; top: .42rem; left: 0; width: 7px; height: 7px; content: ''; border-radius: 50%; background: var(--red); }.about-image { min-height: 100%; overflow: hidden; background: #0d3267; }.about-image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.site-footer { color: #d8e5ff; background: #061c48; scroll-margin-top: var(--header-height); }.footer-main { display: grid; grid-template-columns: 1.35fr .7fr .95fr 1.1fr; gap: clamp(2.3rem, 5vw, 6rem); max-width: 1440px; margin: auto; padding: clamp(4rem, 7vw, 6.7rem) clamp(1.25rem, 8vw, 9rem); }.footer-brand > a:first-child > img { display: block; width: min(245px, 100%); height: auto; padding: .55rem; border-radius: 4px; background: #fff; }.footer-brand p { max-width: 340px; margin: 1.3rem 0 1.5rem; color: #aebfda; font-size: .83rem; font-weight: 500; line-height: 1.75; }.footer-contact { font-size: .68rem; }.footer-column { display: grid; align-content: start; gap: .85rem; }.footer-column h2 { margin: 0 0 .5rem; color: #fff; font-size: .86rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }.footer-column > a { color: #b2c4df; font-size: .78rem; font-weight: 600; text-decoration: none; transition: color .2s; }.footer-column > a:hover { color: #fff; }.footer-call p { margin: 0; color: #aebfda; font-size: .8rem; font-weight: 500; line-height: 1.65; }.footer-phone { margin-top: .25rem; color: #fff; font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 800; letter-spacing: -.04em; text-decoration: none; }.footer-whatsapp { display: inline-flex; align-items: center; gap: .45rem; margin-top: .25rem; color: #fff; font-size: .73rem; font-weight: 700; text-decoration: none; }.footer-whatsapp img { width: 18px; height: 18px; object-fit: contain; filter: brightness(0) invert(1); }.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; padding: 1.25rem clamp(1.25rem, 8vw, 9rem); border-top: 1px solid rgba(255,255,255,.13); color: #90a7cb; font-size: .65rem; font-weight: 600; letter-spacing: .035em; }
.floating-whatsapp { position: fixed; z-index: 30; right: clamp(1rem, 2vw, 2rem); bottom: clamp(1rem, 2vw, 2rem); display: inline-flex; align-items: center; gap: .65rem; padding: .78rem 1.1rem .78rem .85rem; border-radius: 999px; color: #fff; background: #20b960; box-shadow: 0 12px 28px rgba(4, 45, 23, .3); font-size: .76rem; font-weight: 800; letter-spacing: .02em; text-decoration: none; transition: transform .2s ease, background .2s ease; }.floating-whatsapp:hover { transform: translateY(-3px); background: #13984b; }.floating-whatsapp img { width: 25px; height: 25px; object-fit: contain; }
.anchor-section { min-height: 1px; scroll-margin-top: var(--header-height); }
.menu-toggle { display: none; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (max-width: 840px) { :root { --header-height: 82px; }.site-header, .site-header.scrolled { height: var(--header-height); padding: 10px 1.2rem; gap: 1rem; }.brand img, .site-header.scrolled .brand img { width: 140px; }.menu-toggle { display: grid; order: 3; gap: 4px; width: 34px; padding: 8px 0; border: 0; background: transparent; cursor: pointer; }.menu-toggle span { height: 2px; background: var(--royal-dark); }.main-nav { position: absolute; top: 100%; right: 1rem; display: none; width: min(250px, calc(100vw - 2rem)); padding: 1rem 1.4rem; border-radius: 0 0 7px 7px; background: #fff; box-shadow: 0 12px 25px rgba(7,38,97,.16); }.main-nav a { font-size: .9rem; }.main-nav.open { display: grid; gap: .3rem; }.header-contact { min-width: auto; margin-left: auto; }.header-contact small { display: none; }.header-contact strong { font-size: .68rem; }.slide { padding: calc(var(--header-height) + 4rem) 1.4rem 7rem; background-image: linear-gradient(90deg, rgba(255,255,255,.97), rgba(255,255,255,.82) 58%, rgba(255,255,255,.24)), var(--image); background-position: center, 66% center; }.image-credit { right: 1rem; }.slider-controls { right: 1.4rem; bottom: 1.5rem; }.services-section { padding-inline: 1.2rem; }.service-card, .service-card.reverse { grid-template-columns: 1fr; }.service-card.reverse .service-image, .service-card.reverse .service-content { order: initial; }.service-image { min-height: 270px; }.service-content { padding: 2rem 1.6rem 2.4rem; }.gallery-section { padding-inline: 1.2rem; }.gallery-grid { grid-template-columns: 1fr; }.gallery-item { height: min(100vw, 460px); }.hiring-section { padding-inline: 1.5rem; }.timeline { grid-template-columns: 1fr; gap: 2rem; margin-top: 3rem; padding-left: 2rem; }.timeline::before { top: 1.65rem; bottom: 1.65rem; left: 8px; width: 1px; height: auto; }.timeline-item { padding: 0; }.timeline-item::before { top: .1rem; left: -2rem; }.timeline-step { display: block; margin-bottom: .35rem; }.about-section { grid-template-columns: 1fr; }.about-copy { padding: 5rem 1.5rem; }.about-image { min-height: 440px; }.about-image img { max-height: 600px; }.footer-main { grid-template-columns: repeat(2, 1fr); padding: 4rem 1.5rem; }.footer-brand { grid-column: 1 / -1; }.footer-bottom { flex-direction: column; padding: 1.2rem 1.5rem; } }
@media (max-width: 480px) { .header-contact { padding: .55rem .65rem; }.header-contact img { width: 18px; }.hero { min-height: 600px; } h1 { font-size: 2.45rem; }.hero-text { line-height: 1.65; }.image-credit { display: none; }.floating-whatsapp { right: .85rem; bottom: .85rem; padding: .72rem .92rem .72rem .78rem; } }