:root {
  color-scheme: light;
  --ink: #171d22;
  --navy: #182631;
  --navy-soft: #243642;
  --muted: #59666e;
  --paper: #f3f4f2;
  --white: #fff;
  --red: #d9273e;
  --blue: #4267a8;
  --line: #d8dddf;
  --font: "DM Sans", Arial, sans-serif;
  --display: "Manrope", "DM Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; color: var(--ink); font: 16px/1.65 var(--font); }
body, button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.wrap { width: min(1200px, calc(100% - 64px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 30; top: 12px; left: 12px; padding: 10px 14px; color: var(--ink); background: white; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid #78a8ff; outline-offset: 4px; }

.site-header { position: sticky; top: 0; z-index: 10; color: white; background: #111b24; box-shadow: 0 5px 20px #0b111833; animation: header-enter .65s cubic-bezier(.2,.7,.2,1) both; }
.nav-wrap { width: min(1380px, calc(100% - 64px)); min-height: 86px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 22px; }
.brand { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 12px; font-size: 10px; line-height: 1.25; letter-spacing: .13em; }
.brand span strong { font-size: 12px; letter-spacing: .15em; }
.brand img { display: block; width: 56px; height: 56px; object-fit: contain; border-radius: 50%; }
.main-nav { display: flex; align-items: center; gap: clamp(11px, 1.35vw, 20px); font-size: 11px; font-weight: 600; }
.main-nav > a:not(.nav-cta) { opacity: .86; transition: opacity .2s ease; }
.main-nav > a:not(.nav-cta):hover { opacity: 1; }
.main-nav > a:not(.nav-cta) { position: relative; }
.main-nav > a:not(.nav-cta)::after { position: absolute; right: 0; bottom: 3px; left: 0; height: 1px; content: ""; background: #ff7583; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.main-nav > a:not(.nav-cta):hover::after { transform: scaleX(1); }
.nav-cta { padding: 11px 16px; color: white; background: var(--red); transition: background .2s, transform .2s; }
.nav-cta:hover { background: #bd1e34; transform: translateY(-1px); }
.menu-toggle { display: none; }

.hero { min-height: 560px; height: min(760px, 88svh); position: relative; display: flex; align-items: center; overflow: hidden; color: white; background: #273743; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 53%; }
.hero-photo { animation: hero-photo-enter 1.2s cubic-bezier(.2,.7,.2,1) both, hero-photo-drift 24s 1.2s ease-in-out infinite alternate; }
.hero::after { position: absolute; inset: 0; content: ""; pointer-events: none; background: linear-gradient(90deg, #101820e8 0%, #101820a3 41%, #10182020 76%), linear-gradient(0deg, #1018204c, transparent 35%); }
.hero-shade { position: absolute; left: max(32px, calc((100vw - 1320px)/2)); top: 50%; z-index: 1; width: 4px; height: 104px; background: var(--red); transform: translateY(-4%); }
.hero-content { position: relative; z-index: 2; padding-top: 82px; padding-left: 34px; }
.hero-content .eyebrow { animation: rise-in .7s .12s both; }
.hero h1 { animation: rise-in .8s .24s both; }
.hero-content .button { animation: rise-in .7s .4s both; }
.eyebrow { margin: 0 0 15px; color: var(--red); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.hero .eyebrow { color: #ffffffc9; }
.hero h1 { position: relative; width: fit-content; max-width: 850px; margin: 0 0 44px; padding-bottom: 18px; font: 800 clamp(48px, 7.2vw, 92px)/.99 var(--display); letter-spacing: -.065em; }
.hero h1::after { position: absolute; bottom: 0; left: 0; width: 84px; height: 4px; content: ""; background: var(--red); transform: scaleX(0); transform-origin: left; animation: title-rule .65s .62s ease-out forwards; }
.hero h1 span { color: #ffffffd9; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: space-between; gap: 36px; padding: 13px 18px; font-size: 13px; font-weight: 700; transition: transform .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-red { color: white; background: var(--red); }
.button-red:hover { background: #bd1e34; }

.section { padding-block: 112px; }
.intro { display: grid; grid-template-columns: .55fr 1.7fr .75fr; gap: 34px; align-items: center; }
.section-kicker { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; color: #8b969c; font-size: 12px; }
.section-kicker span:first-child { color: var(--red); font-weight: 700; }
.intro-copy { max-width: 690px; }
.intro h2, .why h2, .services h2, .team h2, .gallery h2, .contact h2 { margin: 0 0 22px; font: 700 clamp(34px, 4vw, 52px)/1.1 var(--display); letter-spacing: -.05em; }
.intro h2, .why h2, .services h2, .team h2, .gallery h2, .contact h2, .contact-info h2 { position: relative; width: fit-content; max-width: 100%; padding-bottom: 16px; }
.intro h2::after, .why h2::after, .services h2::after, .team h2::after, .gallery h2::after, .contact h2::after, .contact-info h2::after { position: absolute; bottom: 0; left: 0; width: 58px; height: 3px; content: ""; background: var(--red); transform: scaleX(.3); transform-origin: left; transition: transform .7s cubic-bezier(.2,.7,.2,1), width .7s ease; }
.reveal.is-visible h2::after { width: 78px; transform: scaleX(1); }
.intro-copy > p:last-child { max-width: 650px; margin: 0; color: #4c5961; font-size: 18px; line-height: 1.85; }
.intro-mark { width: min(100%, 230px); justify-self: end; display: grid; place-items: center; }
.intro-mark img { display: block; width: 100%; height: auto; object-fit: contain; }

.why { display: grid; grid-template-columns: 1.04fr .96fr; padding: 0; color: white; background: var(--navy); }
.why-image { position: relative; min-height: 570px; overflow: hidden; background: #243642; }
.why-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-slot { background-color: #263641; background-image: repeating-linear-gradient(135deg, transparent 0 34px, #ffffff0a 35px 36px, transparent 37px 70px); }
.why-copy { align-self: center; padding: 90px clamp(40px, 8vw, 130px) 80px clamp(48px, 7vw, 110px); }
.why-copy .eyebrow, .contact-heading .eyebrow { color: #ff7583; }
.why h2 { margin-bottom: 42px; font-size: clamp(36px, 4vw, 54px); }
.reason { display: grid; grid-template-columns: 46px 1fr; gap: 17px; align-items: center; padding: 19px 0; border-top: 1px solid #ffffff30; }
.reason-icon { width: 42px; height: 42px; display: grid; place-items: center; color: #ff7583; border: 1px solid #ffffff32; border-radius: 50%; }
.reason-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.reason p { margin: 0; color: #d0d6da; line-height: 1.65; }
.reason strong { color: white; font-size: 13px; letter-spacing: .1em; }

.services { display: grid; grid-template-columns: .8fr 1.2fr; gap: 10%; align-items: start; }
.services-heading { position: sticky; top: 110px; }
.services-heading h2 { max-width: 360px; }
.service-item { display: grid; grid-template-columns: 30px 52px 1fr; gap: 18px; align-items: center; min-height: 118px; padding: 22px; border: 1px solid var(--line); background: white; transition: border-color .2s ease, transform .2s ease; }
.service-item + .service-item { margin-top: 12px; }
.service-item:hover { border-color: var(--red); transform: translateX(6px); }
.service-number { color: var(--red); font-size: 11px; font-weight: 700; }
.service-icon { width: 48px; height: 48px; display: grid; place-items: center; color: var(--blue); background: #f0f3f8; border-radius: 50%; }
.service-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.45; }
.service-item p { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.55; }

.team { padding-top: 24px; padding-bottom: 108px; background: #e9edef; }
.team-inner { display: grid; grid-template-columns: 1fr 1.12fr; gap: 8%; align-items: center; }
.team-copy { padding-block: 24px; }
.team-copy h3 { margin: 30px 0 15px; color: var(--navy); font: 700 19px/1.3 var(--display); }
.fleet-list { display: grid; gap: 15px; margin: 28px 0 0; padding: 0; list-style: none; }
.fleet-list li { position: relative; padding-left: 25px; color: #46535b; line-height: 1.6; opacity: 0; transform: translateX(-12px); transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
.fleet-list li::before { position: absolute; top: .7em; left: 2px; width: 8px; height: 8px; content: ""; background: var(--red); border-radius: 50%; box-shadow: 0 0 0 4px #d9273e1a; }
.team.is-visible .fleet-list li { opacity: 1; transform: translateX(0); }
.team.is-visible .fleet-list li:nth-child(2) { transition-delay: .12s; }
.team.is-visible .fleet-list li:nth-child(3) { transition-delay: .24s; }
.team-inner > img { display: block; width: 100%; height: 420px; object-fit: cover; object-position: center 55%; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.team-inner > img:hover { transform: scale(1.025); }
.team-rule { height: 1px; margin-bottom: 34px; background: var(--line); }
.team h2 { margin: 0; }

.gallery { padding-block: 88px; background: var(--paper); }
.gallery-head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 32px; }
.gallery-head h2 { margin: 0; }
.gallery-head > span { color: #aab3b7; font: 800 30px var(--display); }
.gallery-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; grid-template-rows: repeat(2, 205px); gap: 14px; }
.gallery-photo { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; background: #dfe3e3; transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .55s ease; }
.gallery-photo:hover { z-index: 1; transform: scale(1.035); filter: saturate(1.08) contrast(1.03); }
.gallery-photo:first-child { grid-row: span 2; }

.contact { color: white; background: var(--navy); }
.contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 12%; align-items: center; }
.contact h2 { font-size: clamp(42px, 5vw, 64px); }
.contact-phone { max-width: 420px; margin: 28px 0 0; color: #c6cdd1; line-height: 1.8; }
.contact-row { display: flex; justify-content: space-between; gap: 20px; padding: 17px 0; border-bottom: 1px solid #ffffff2a; font-size: 14px; }
.contact-row span { color: #b9c2c8; }
.contact-row strong { text-align: right; }
.button-whatsapp { color: white; background: #18885a; }
.button-whatsapp:hover { background: #116e48; }
.button-whatsapp svg { width: 21px; height: 21px; flex: 0 0 auto; fill: currentColor; }
.contact-form { display: grid; gap: 10px; padding: 28px; color: var(--ink); background: white; }
.form-trap { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.contact-form label { margin-top: 4px; font-size: 13px; font-weight: 600; }
.contact-form input, .contact-form textarea { width: 100%; min-width: 0; min-height: 48px; padding: 13px 14px; border: 1px solid #c8d0d3; border-radius: 2px; color: var(--ink); background: #fff; font: inherit; font-size: 15px; }
.contact-form textarea { min-height: 132px; resize: vertical; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #7b878e; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--blue); outline: 2px solid #4267a833; outline-offset: 1px; }
.form-submit { width: 100%; margin-top: 8px; border: 0; cursor: pointer; font: inherit; }
.form-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.form-note[data-state="success"] { color: #167344; }
.form-note[data-state="error"] { color: #a51e30; }
.contact-info { background: #fff; }
.contact-info-inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: 12%; align-items: start; }
.contact-info h2 { max-width: 480px; margin: 0; font: 700 clamp(32px, 4vw, 48px)/1.12 var(--display); letter-spacing: -.05em; }
.contact-info-details { border-top: 1px solid var(--line); }
.contact-info .contact-row { color: var(--ink); border-bottom: 1px solid var(--line); }
.contact-info .contact-row span { flex: 0 0 90px; color: var(--muted); }
.contact-info .contact-row strong { max-width: 390px; text-align: left; }
.directions-link { display: inline-flex; align-items: center; gap: 9px; padding: 15px 0; color: var(--red); font-size: 13px; font-weight: 700; }
.directions-link:hover { text-decoration: underline; }
.location-map { display: block; width: 100%; height: 300px; margin-top: 18px; border: 0; filter: saturate(.82); }

.footer { color: #aab2b7; background: #0d141a; }
.footer-main { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 36px; padding-block: 40px; border-bottom: 1px solid #ffffff20; font-size: 12px; }
.footer-brand { display: flex; align-items: center; gap: 13px; color: white; font-weight: 700; }
.footer img { width: 46px; height: 46px; object-fit: contain; border-radius: 50%; }
.footer nav, .footer-contact { display: grid; gap: 8px; }
.footer nav { grid-template-columns: 1fr 1fr; }
.footer a { color: white; font-size: 12px; }
.footer a:hover { color: #ff7583; }
.footer-bottom { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 11px; }

.floating-actions { position: fixed; z-index: 20; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 12px; visibility: visible; opacity: 1; transform: translateY(0); transition: opacity .32s ease, transform .32s cubic-bezier(.2,.7,.2,1), visibility 0s; }
.floating-actions[hidden] { display: none; }
.floating-actions.is-hidden { visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .32s ease, transform .32s cubic-bezier(.2,.7,.2,1), visibility 0s linear .34s; }
.back-to-top, .whatsapp-float { width: 54px; height: 54px; display: grid; place-items: center; border: 0; border-radius: 50%; color: white; box-shadow: 0 5px 18px #11182035; cursor: pointer; }
.back-to-top { background: var(--navy); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px) scale(.9); transition: opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1), visibility 0s linear .3s, background .2s ease; }
.back-to-top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition-delay: 0s; }
.back-to-top:hover { transform: translateY(-2px); background: #2b3b46; }
.back-to-top svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.whatsapp-float { width: 62px; height: 62px; display: grid; place-items: center; background: #20b866; border: 3px solid white; transition: transform .2s ease, background .2s ease; }
.whatsapp-float:hover { transform: translateY(-2px); background: #116e48; }
.whatsapp-float svg { width: 31px; height: 31px; fill: currentColor; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.why .reason { opacity: 0; transform: translateX(18px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
.why.is-visible .reason { opacity: 1; transform: translateX(0); }
.why.is-visible .reason:nth-of-type(2) { transition-delay: .1s; }
.why.is-visible .reason:nth-of-type(3) { transition-delay: .2s; }
.why.is-visible .reason:nth-of-type(4) { transition-delay: .3s; }
.service-item { opacity: 0; transform: translateY(16px); }
.services.is-visible .service-item { animation: rise-in .6s cubic-bezier(.2,.7,.2,1) both; }
.services.is-visible .service-item:nth-child(2) { animation-delay: .12s; }
.services.is-visible .service-item:nth-child(3) { animation-delay: .24s; }

.button-red, .button-whatsapp, .nav-cta { position: relative; overflow: hidden; }
.button-red::after, .button-whatsapp::after, .nav-cta::after { position: absolute; inset: 0 auto 0 -120%; width: 55%; content: ""; background: linear-gradient(100deg, transparent, #ffffff35, transparent); transform: skewX(-18deg); transition: left .6s ease; }
.button-red:hover::after, .button-whatsapp:hover::after, .nav-cta:hover::after { left: 140%; }

@keyframes rise-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes header-enter { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes title-rule { to { transform: scaleX(1); } }
@keyframes hero-photo-enter { from { opacity: .65; transform: scale(1.07); } to { opacity: 1; transform: scale(1); } }
@keyframes hero-photo-drift { from { transform: scale(1); } to { transform: scale(1.035); } }
@keyframes float-pulse { 0%, 100% { box-shadow: 0 5px 18px #11182035, 0 0 0 0 #20b86635; } 50% { box-shadow: 0 7px 22px #11182045, 0 0 0 9px #20b86600; } }

@media (max-width: 1080px) {
  .nav-wrap { min-height: 76px; }
  .menu-toggle { z-index: 12; display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; transition: background .25s ease, transform .25s ease; }
  .menu-toggle:hover, .menu-toggle[aria-expanded="true"] { background: #ffffff12; }
  .menu-toggle span { width: 24px; height: 2px; background: white; transition: transform .3s ease, width .3s ease, opacity .2s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .main-nav { position: absolute; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; max-height: min(74svh, 620px); overflow-y: auto; padding: 10px 32px 22px; border-top: 2px solid var(--red); border-radius: 0 0 14px 14px; background: #111b24; font-size: 14px; box-shadow: 0 14px 22px #10182033; visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-14px) scale(.985); transform-origin: top center; transition: opacity .28s ease, transform .35s cubic-bezier(.2,.7,.2,1), visibility .35s; }
  .main-nav.open { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
  .main-nav > a { display: block; padding: 12px 0; border-bottom: 1px solid #ffffff20; opacity: 0; transform: translateX(-12px); transition: opacity .28s ease, transform .32s cubic-bezier(.2,.7,.2,1), color .2s ease, padding .2s ease; }
  .main-nav.open > a { opacity: 1; transform: translateX(0); }
  .main-nav.open > a:nth-child(1) { transition-delay: .04s; }
  .main-nav.open > a:nth-child(2) { transition-delay: .08s; }
  .main-nav.open > a:nth-child(3) { transition-delay: .12s; }
  .main-nav.open > a:nth-child(4) { transition-delay: .16s; }
  .main-nav.open > a:nth-child(5) { transition-delay: .20s; }
  .main-nav.open > a:nth-child(6) { transition-delay: .24s; }
  .main-nav.open > a:nth-child(7) { transition-delay: .28s; }
  .main-nav > a:not(.nav-cta):hover { padding-left: 8px; color: #ff7583; }
  .main-nav .nav-cta { margin-top: 12px; padding: 12px 18px; border: 1px solid #ffffff65; text-align: center; box-shadow: inset 3px 0 0 #ffffff35; }
  .why-copy { padding-inline: 52px; }
  .main-nav { max-height: calc(100svh - 76px); overflow-y: auto; }
}

@media (max-width: 820px) {
  .why { grid-template-columns: 1fr; }
  .why-image { min-height: 360px; }
  .why-copy { padding: 56px clamp(28px, 8vw, 72px); }
  .services { grid-template-columns: 1fr; gap: 24px; }
  .services-heading { position: static; }
  .contact-inner, .contact-info-inner { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 700px) {
  html { scroll-padding-top: 72px; }
  .wrap, .nav-wrap { width: calc(100% - 40px); }
  .nav-wrap { min-height: 72px; }
  .brand img { width: 48px; height: 48px; }
  .main-nav { padding-inline: 20px; }
  .hero { height: clamp(500px, 78svh, 680px); min-height: 0; }
  .hero::after { background: linear-gradient(90deg, #101820d9, #10182072 75%), linear-gradient(0deg, #10182070, transparent 55%); }
  .hero-shade { left: 20px; height: 82px; }
  .hero-content { padding-top: 56px; padding-left: 24px; }
  .hero h1 { font-size: clamp(40px, 10vw, 62px); }
  .section { padding-block: 76px; }
  .intro { grid-template-columns: 1fr; gap: 22px; }
  .section-kicker { flex-direction: row; }
  .intro-mark { width: 112px; justify-self: end; margin-top: 4px; }
  .intro-copy > p:last-child { font-size: 16px; }
  .why { grid-template-columns: 1fr; }
  .why-image { min-height: 300px; }
  .why-copy { padding: 58px 24px 64px; }
  .why h2 { margin-bottom: 28px; }
  .services { grid-template-columns: 1fr; gap: 24px; }
  .services-heading { position: static; }
  .service-item { grid-template-columns: 24px 44px 1fr; gap: 12px; min-height: 100px; padding: 16px 12px; }
  .service-icon { width: 40px; height: 40px; }
  .service-icon svg { width: 23px; height: 23px; }
  .service-item p { font-size: 14px; }
  .team { padding-top: 0; padding-bottom: 76px; }
  .gallery { padding-block: 68px; }
  .gallery-head { align-items: start; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; grid-template-rows: 220px; gap: 10px; }
  .gallery-photo:first-child { grid-column: span 2; grid-row: auto; }
  .contact-inner, .contact-info-inner { grid-template-columns: 1fr; gap: 34px; }
  .contact h2 { font-size: 48px; }
  .contact-row { font-size: 12px; }
  .contact-form { gap: 9px; padding: 22px 18px; }
  .contact-form input, .contact-form textarea { min-height: 48px; font-size: 16px; }
  .contact-form textarea { min-height: 130px; }
  .button-whatsapp { width: 100%; justify-content: center; }
  .contact-info .contact-row { align-items: start; }
  .contact-info .contact-row span { flex-basis: 74px; }
  .team-inner { grid-template-columns: 1fr; gap: 22px; }
  .team-inner > img { height: 280px; }
  .footer-main { grid-template-columns: 1fr; gap: 22px; padding-block: 30px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 15px; }
  .footer-inner > span, .footer a { font-size: 11px; }
  .location-map { height: 240px; }
  .floating-actions { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
  .back-to-top { width: 48px; height: 48px; }
  .whatsapp-float { width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .reveal { opacity: 1; transform: none; }
  .floating-actions, .floating-actions.is-hidden { transition: none; }
}

/* Fondos de sección: alternan tonos de la identidad sin perder limpieza. */
body { background: #fff; }
.site-header { border-bottom: 1px solid #ffffff19; }
.site-header::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; content: ""; background: linear-gradient(90deg, var(--red) 0 15%, #4267a8 15% 21%, transparent 21%); }
.brand img { padding: 3px; background: #080d11; box-shadow: 0 0 0 1px #ffffff33, 0 7px 20px #0005; }
.main-nav { gap: clamp(12px, 1.25vw, 20px); }
.nav-cta { box-shadow: 0 8px 20px #d9273e35; }

.intro.section.wrap { position: relative; isolation: isolate; width: 100%; max-width: none; padding-inline: max(32px, calc((100vw - 1200px)/2)); overflow: hidden; background: linear-gradient(112deg, #f8f9f8 0%, #eef2f3 100%); border-top: 1px solid #e5e9ea; border-bottom: 1px solid #e0e5e7; }
.intro.section.wrap::after { position: absolute; z-index: -1; top: -140px; right: 5%; width: 430px; height: 430px; content: ""; border: 1px solid #4267a81b; border-radius: 50%; box-shadow: 0 0 0 30px #4267a808, 0 0 0 76px #d9273e08; pointer-events: none; }
.why { background: linear-gradient(115deg, #172631 0%, #203440 60%, #192832 100%); }
.services { background: linear-gradient(115deg, #f4f6f5 0%, #e9eef0 100%); }
.team { background: linear-gradient(112deg, #16232d 0%, #1d303c 60%, #253c49 100%); }
.gallery { background: linear-gradient(135deg, #f8f9f8 0%, #edf1f2 52%, #f4f5f3 100%); }
.contact { background: linear-gradient(118deg, #111c25 0%, #1a2b36 56%, #14212a 100%); }
.contact-info { background: linear-gradient(135deg, #e9eef0 0%, #f7f8f6 54%, #e7ecee 100%); }
.footer { background: linear-gradient(115deg, #0c1319 0%, #121e27 64%, #0c141a 100%); }

.hero { min-height: 620px; height: min(790px, 90svh); background: #17232c; }
.hero-photo { object-position: center 57%; }
.hero::after { background: linear-gradient(90deg, #0d151def 0%, #101820bd 42%, #10182028 78%), linear-gradient(0deg, #0d151d80, transparent 50%); }
.hero::before { position: absolute; z-index: 1; top: 15%; right: 8%; width: min(34vw, 450px); aspect-ratio: 1; content: ""; border: 1px solid #ffffff23; border-radius: 50%; box-shadow: 0 0 0 28px #ffffff08, 0 0 0 72px #ffffff06; pointer-events: none; }
.hero-content { padding-top: 50px; }
.hero-content .eyebrow { display: flex; align-items: center; gap: 12px; letter-spacing: .24em; }
.hero-content .eyebrow::before { width: 30px; height: 2px; content: ""; background: var(--red); }
.hero h1 { max-width: 760px; margin-bottom: 38px; text-shadow: 0 8px 28px #0005; }
.hero h1 span { color: #d9e1e6; }
.hero .button-red { min-width: 220px; box-shadow: 0 12px 28px #d9273e38; }

.section h2 { text-wrap: balance; }
.section-kicker span:first-child { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #d9273e55; border-radius: 50%; }
.intro-copy { position: relative; }
.intro-copy::before { position: absolute; top: -28px; left: -28px; width: 56px; height: 1px; content: ""; background: var(--red); }
.intro-copy > p:last-child { max-width: 620px; }
.intro-mark { position: relative; min-height: 220px; padding: 28px; overflow: hidden; border: 1px solid #e1e5e7; background: linear-gradient(145deg, #f7f8f8, #fff 62%); }
.intro-mark::before { position: absolute; right: -40px; bottom: -74px; width: 170px; height: 170px; content: ""; border: 1px solid #d9273e38; border-radius: 50%; box-shadow: 0 0 0 18px #d9273e08, 0 0 0 40px #4267a80a; }
.intro-mark img { position: relative; z-index: 1; max-height: 142px; }

.why { position: relative; }
.why-image::after { position: absolute; inset: 20px; content: ""; border: 1px solid #ffffff45; pointer-events: none; }
.why-copy { position: relative; }
.why-copy::after { position: absolute; top: 30px; right: 34px; width: 78px; height: 78px; content: ""; border-top: 1px solid #ffffff29; border-right: 1px solid #ffffff29; }
.why h2::after, .contact h2::after { background: #f04a5e; }
.reason { transition: background .25s ease, padding .25s ease, opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
.reason:hover { padding-inline: 10px; background: #ffffff09; }
.reason-icon { background: #ffffff08; transition: color .25s ease, background .25s ease, transform .25s ease; }
.reason:hover .reason-icon { color: white; background: var(--red); transform: rotate(-7deg); }

.services { position: relative; width: 100%; padding: 112px max(32px, calc((100vw - 1200px)/2)); background: linear-gradient(115deg, #f4f6f5 0%, #e9eef0 100%); }
.services::before { position: absolute; top: 0; right: 0; width: 24%; height: 100%; content: ""; opacity: .45; background: repeating-linear-gradient(135deg, transparent 0 32px, #d1d9dd45 33px 34px, transparent 35px 68px); clip-path: polygon(35% 0, 100% 0, 100% 100%, 0 100%); pointer-events: none; }
.services-heading, .service-list { position: relative; z-index: 1; }
.services-heading .eyebrow { display: flex; align-items: center; gap: 10px; }
.services-heading .eyebrow::before { width: 26px; height: 2px; content: ""; background: var(--red); }
.services-heading h2 { max-width: 390px; }
.service-item { position: relative; overflow: hidden; border: 1px solid #d7dfe2; box-shadow: 0 8px 24px #192a3508; }
.service-item::after { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; content: ""; background: var(--red); transform: scaleY(0); transform-origin: bottom; transition: transform .25s ease; }
.service-item:hover { border-color: #c9d2d6; transform: translateX(5px); box-shadow: 0 14px 28px #192a3513; }
.service-item:hover::after { transform: scaleY(1); }
.service-number { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #d9273e50; border-radius: 50%; }
.service-icon { transition: transform .25s ease, color .25s ease, background .25s ease; }
.service-item:hover .service-icon { color: white; background: var(--navy); transform: rotate(-5deg); }

.team { position: relative; padding-block: 100px; overflow: hidden; color: white; background: linear-gradient(112deg, #16232d 0%, #1d303c 60%, #253c49 100%); }
.team::before { position: absolute; top: -150px; left: -115px; width: 390px; height: 390px; content: ""; border: 1px solid #ffffff17; border-radius: 50%; box-shadow: 0 0 0 32px #ffffff06, 0 0 0 78px #ffffff05; }
.team-inner { position: relative; z-index: 1; }
.team-rule { max-width: 440px; background: linear-gradient(90deg, var(--red), #ffffff32 58%, transparent); }
.team-copy .eyebrow { color: #ff7583; }
.team h2 { color: white; }
.team h2::after { background: var(--red); }
.fleet-list li { color: #d2d9dd; }
.team-inner > img { border: 1px solid #ffffff35; box-shadow: 16px 16px 0 -1px #d9273e; }

.gallery { position: relative; isolation: isolate; overflow: hidden; padding-block: 112px; background: linear-gradient(135deg, #f8f9f8 0%, #edf1f2 52%, #f4f5f3 100%); }
.gallery::before { position: absolute; z-index: -1; top: 0; right: -8%; width: 54%; height: 100%; content: ""; opacity: .5; background: repeating-linear-gradient(135deg, transparent 0 58px, #d7dde022 59px 61px, transparent 62px 118px); transform: skewX(-12deg); }
.gallery::after { position: absolute; z-index: -1; right: 0; bottom: 0; left: 0; height: 1px; content: ""; background: linear-gradient(90deg, transparent, #cfd5d8, transparent); }
.gallery-head { align-items: center; }
.gallery-head > span { display: grid; width: 64px; height: 64px; place-items: center; border: 1px solid #cfd7da; border-radius: 50%; color: var(--navy); font: 800 19px var(--display); }
.gallery-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 205px; gap: 18px; }
.gallery-photo { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; background: #dfe3e3; outline: 1px solid #ffffff; outline-offset: -6px; box-shadow: 0 8px 24px #16232d14; transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .55s ease; }
.gallery-photo:hover { z-index: 1; transform: scale(1.035); filter: saturate(1.08) contrast(1.03); box-shadow: 0 18px 36px #16232d28; }
.gallery-photo:first-child { grid-column: span 2; grid-row: span 2; }
.gallery-placeholder { position: relative; display: grid; min-width: 0; margin: 0; place-content: center; justify-items: center; gap: 10px; overflow: hidden; color: #68757c; border: 1px dashed #b8c2c7; background: linear-gradient(145deg, #ffffffc9, #e8edefa8); box-shadow: 0 8px 24px #16232d08; transition: border-color .25s ease, background .25s ease, transform .25s ease; }
.gallery-placeholder::before { position: absolute; inset: 10px; content: ""; border: 1px solid #ffffffc7; pointer-events: none; }
.gallery-placeholder span { display: grid; width: 42px; height: 42px; place-items: center; color: var(--red); border: 1px solid #d9273e55; border-radius: 50%; font-size: 25px; line-height: 1; transition: transform .25s ease, background .25s ease, color .25s ease; }
.gallery-placeholder figcaption { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.gallery-placeholder:hover { border-color: var(--red); background: linear-gradient(145deg, #fff, #e5eaec); transform: translateY(-3px); }
.gallery-placeholder:hover span { color: white; background: var(--red); transform: rotate(90deg); }

.contact { position: relative; overflow: hidden; color: white; background: linear-gradient(118deg, #111c25 0%, #1a2b36 56%, #14212a 100%); }
.contact::before { position: absolute; top: -160px; right: -130px; width: 520px; height: 520px; content: ""; border: 1px solid #ffffff13; border-radius: 50%; box-shadow: 0 0 0 35px #ffffff05, 0 0 0 85px #ffffff04; pointer-events: none; }
.contact-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 12%; align-items: center; }
.contact h2 { font-size: clamp(42px, 5vw, 64px); }
.contact-phone { max-width: 420px; margin: 28px 0 0; padding-left: 14px; color: #c6cdd1; border-left: 2px solid var(--red); line-height: 1.8; }
.contact-row { display: flex; justify-content: space-between; gap: 20px; padding: 17px 0; border-bottom: 1px solid #ffffff2a; font-size: 14px; }
.contact-row span { color: #b9c2c8; }
.contact-row strong { text-align: right; }
.button-whatsapp { color: white; background: #18885a; box-shadow: 0 10px 24px #071c143d; }
.button-whatsapp:hover { background: #116e48; }
.button-whatsapp svg { width: 21px; height: 21px; flex: 0 0 auto; fill: currentColor; }
.contact-form { position: relative; display: grid; gap: 10px; padding: 28px; color: var(--ink); background: white; box-shadow: 0 22px 55px #0a111b35; }
.contact-form::before { position: absolute; top: 0; right: 0; width: 54px; height: 4px; content: ""; background: var(--red); }
.form-trap { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.contact-form label { margin-top: 4px; font-size: 13px; font-weight: 600; }
.contact-form input, .contact-form textarea { width: 100%; min-width: 0; min-height: 48px; padding: 13px 14px; border: 1px solid #c8d0d3; border-radius: 2px; color: var(--ink); background: #fff; font: inherit; font-size: 15px; }
.contact-form textarea { min-height: 132px; resize: vertical; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #7b878e; }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--blue); outline: 2px solid #4267a833; outline-offset: 1px; }
.form-submit { width: 100%; margin-top: 8px; border: 0; cursor: pointer; font: inherit; transition: background .2s ease, transform .2s ease, opacity .2s ease; }
.form-submit:disabled { opacity: .65; cursor: wait; }
.form-note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.form-note[data-state="success"] { color: #167344; }
.form-note[data-state="error"] { color: #a51e30; }

.contact-info { background: linear-gradient(135deg, #e9eef0 0%, #f7f8f6 54%, #e7ecee 100%); }
.contact-info-inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: 12%; align-items: start; }
.contact-info h2 { max-width: 480px; margin: 0; font: 700 clamp(32px, 4vw, 48px)/1.12 var(--display); letter-spacing: -.05em; }
.contact-info-details { padding: 8px 22px 22px; border: 1px solid var(--line); background: #fbfcfc; box-shadow: 0 12px 34px #14232d0a; }
.contact-info .contact-row { color: var(--ink); border-bottom: 1px solid var(--line); }
.contact-info .contact-row span { flex: 0 0 90px; color: var(--muted); }
.contact-info .contact-row strong { max-width: 390px; text-align: left; }
.directions-link { display: inline-flex; align-items: center; gap: 9px; padding: 15px 4px; color: var(--red); font-size: 13px; font-weight: 700; }
.directions-link:hover { text-decoration: underline; }
.location-map { display: block; width: 100%; height: 300px; margin-top: 18px; border: 1px solid #d2dadd; filter: saturate(.82); box-shadow: 0 8px 20px #14232d12; }

.footer { position: relative; color: #aab2b7; background: linear-gradient(115deg, #0c1319 0%, #121e27 64%, #0c141a 100%); }
.footer::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; content: ""; background: linear-gradient(90deg, var(--red), #4267a8 42%, transparent 80%); }
.footer-main { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 36px; padding-block: 48px; border-bottom: 1px solid #ffffff20; font-size: 12px; }
.footer-brand { display: flex; align-items: center; gap: 13px; color: white; font-weight: 700; }
.footer img { width: 46px; height: 46px; padding: 2px; object-fit: contain; border-radius: 50%; background: #05080a; }
.footer nav, .footer-contact { display: grid; gap: 8px; }
.footer nav { grid-template-columns: 1fr 1fr; }
.footer a { color: white; font-size: 12px; transition: color .2s ease, transform .2s ease; }
.footer a:hover { color: #ff7583; transform: translateX(3px); }
.footer-bottom { min-height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 11px; }

.floating-actions { position: fixed; z-index: 20; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 12px; visibility: visible; opacity: 1; transform: translateY(0); transition: opacity .32s ease, transform .32s cubic-bezier(.2,.7,.2,1), visibility 0s; }
.floating-actions[hidden] { display: none; }
.floating-actions.is-hidden { visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .32s ease, transform .32s cubic-bezier(.2,.7,.2,1), visibility 0s linear .34s; }
.back-to-top, .whatsapp-float { width: 54px; height: 54px; display: grid; place-items: center; border: 0; border-radius: 50%; color: white; box-shadow: 0 5px 18px #11182035; cursor: pointer; }
.back-to-top { background: var(--navy); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px) scale(.9); transition: opacity .25s ease, transform .3s cubic-bezier(.2,.7,.2,1), visibility 0s linear .3s, background .2s ease; }
.back-to-top.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition-delay: 0s; }
.back-to-top:hover { transform: translateY(-2px); background: #2b3b46; }
.back-to-top svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.whatsapp-float { width: 62px; height: 62px; display: grid; place-items: center; background: #20b866; border: 3px solid white; transition: transform .2s ease, background .2s ease; }
.whatsapp-float:hover { transform: translateY(-2px); background: #116e48; }
.whatsapp-float svg { width: 31px; height: 31px; fill: currentColor; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.why .reason { opacity: 0; transform: translateX(18px); transition: background .25s ease, padding .25s ease, opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
.why.is-visible .reason { opacity: 1; transform: translateX(0); }
.why.is-visible .reason:nth-of-type(2) { transition-delay: .1s; }
.why.is-visible .reason:nth-of-type(3) { transition-delay: .2s; }
.why.is-visible .reason:nth-of-type(4) { transition-delay: .3s; }
.reason:hover { padding-inline: 10px; background: #ffffff09; }
.reason-icon { transition: color .25s ease, background .25s ease, transform .25s ease; }
.reason:hover .reason-icon { color: white; background: var(--red); transform: rotate(-7deg); }

.service-item { opacity: 0; transform: translateY(16px); }
.services.is-visible .service-item { animation: rise-in .6s cubic-bezier(.2,.7,.2,1) both; }
.services.is-visible .service-item:nth-child(2) { animation-delay: .12s; }
.services.is-visible .service-item:nth-child(3) { animation-delay: .24s; }
.service-item { position: relative; overflow: hidden; border-color: #d7dfe2; box-shadow: 0 8px 24px #192a3508; }
.service-item::after { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; content: ""; background: var(--red); transform: scaleY(0); transform-origin: bottom; transition: transform .25s ease; }
.service-item:hover { border-color: #c9d2d6; transform: translateX(5px); box-shadow: 0 14px 28px #192a3513; }
.service-item:hover::after { transform: scaleY(1); }
.service-number { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #d9273e50; border-radius: 50%; }
.service-icon { transition: transform .25s ease, color .25s ease, background .25s ease; }
.service-item:hover .service-icon { color: white; background: var(--navy); transform: rotate(-5deg); }

.button-red, .button-whatsapp, .nav-cta { position: relative; overflow: hidden; }
.button-red::after, .button-whatsapp::after, .nav-cta::after { position: absolute; inset: 0 auto 0 -120%; width: 55%; content: ""; background: linear-gradient(100deg, transparent, #ffffff35, transparent); transform: skewX(-18deg); transition: left .6s ease; }
.button-red:hover::after, .button-whatsapp:hover::after, .nav-cta:hover::after { left: 140%; }

@keyframes rise-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes header-enter { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes title-rule { to { transform: scaleX(1); } }
@keyframes hero-photo-enter { from { opacity: .65; transform: scale(1.07); } to { opacity: 1; transform: scale(1); } }
@keyframes hero-photo-drift { from { transform: scale(1); } to { transform: scale(1.035); } }
@keyframes float-pulse { 0%, 100% { box-shadow: 0 5px 18px #11182035, 0 0 0 0 #20b86635; } 50% { box-shadow: 0 7px 22px #11182045, 0 0 0 9px #20b86600; } }

@media (max-width: 1080px) {
  .nav-wrap { min-height: 76px; }
  .menu-toggle { z-index: 12; display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; transition: background .25s ease, transform .25s ease; }
  .menu-toggle:hover, .menu-toggle[aria-expanded="true"] { background: #ffffff12; }
  .menu-toggle span { width: 24px; height: 2px; background: white; transition: transform .3s ease, width .3s ease, opacity .2s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .main-nav { position: absolute; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; max-height: min(74svh, 620px); overflow-y: auto; padding: 10px 32px 22px; border-top: 2px solid var(--red); border-radius: 0 0 14px 14px; background: #111b24; font-size: 14px; box-shadow: 0 14px 22px #10182033; visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-14px) scale(.985); transform-origin: top center; transition: opacity .28s ease, transform .35s cubic-bezier(.2,.7,.2,1), visibility .35s; }
  .main-nav.open { visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
  .main-nav > a { display: block; padding: 12px 0; border-bottom: 1px solid #ffffff20; opacity: 0; transform: translateX(-12px); transition: opacity .28s ease, transform .32s cubic-bezier(.2,.7,.2,1), color .2s ease, padding .2s ease; }
  .main-nav.open > a { opacity: 1; transform: translateX(0); }
  .main-nav.open > a:nth-child(1) { transition-delay: .04s; }
  .main-nav.open > a:nth-child(2) { transition-delay: .08s; }
  .main-nav.open > a:nth-child(3) { transition-delay: .12s; }
  .main-nav.open > a:nth-child(4) { transition-delay: .16s; }
  .main-nav.open > a:nth-child(5) { transition-delay: .20s; }
  .main-nav.open > a:nth-child(6) { transition-delay: .24s; }
  .main-nav.open > a:nth-child(7) { transition-delay: .28s; }
  .main-nav > a:not(.nav-cta):hover { padding-left: 8px; color: #ff7583; }
  .main-nav .nav-cta { margin-top: 12px; padding: 12px 18px; border: 1px solid #ffffff65; text-align: center; box-shadow: inset 3px 0 0 #ffffff35; }
  .why-copy { padding-inline: 52px; }
  .main-nav { max-height: calc(100svh - 76px); overflow-y: auto; }
}

@media (max-width: 820px) {
  .why { grid-template-columns: 1fr; }
  .why-image { min-height: 360px; }
  .why-copy { padding: 56px clamp(28px, 8vw, 72px); }
  .services { grid-template-columns: 1fr; gap: 24px; }
  .services-heading { position: static; }
  .contact-inner, .contact-info-inner { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 700px) {
  html { scroll-padding-top: 72px; }
  .wrap, .nav-wrap { width: calc(100% - 40px); }
  .nav-wrap { min-height: 72px; }
  .brand img { width: 48px; height: 48px; }
  .main-nav { padding-inline: 20px; }
  .hero { height: clamp(520px, 82svh, 700px); min-height: 0; }
  .hero::after { background: linear-gradient(90deg, #101820d9, #10182072 75%), linear-gradient(0deg, #10182070, transparent 55%); }
  .hero::before { top: 17%; right: -25%; width: 68vw; opacity: .65; }
  .hero-shade { left: 20px; height: 82px; }
  .hero-content { padding-top: 56px; padding-left: 22px; }
  .hero h1 { font-size: clamp(40px, 10vw, 62px); }
  .section { padding-block: 76px; }
  .intro { grid-template-columns: 1fr; gap: 22px; padding-block: 82px; }
  .intro.section.wrap { padding-inline: 20px; }
  .section-kicker { flex-direction: row; }
  .intro-copy::before { left: 0; top: -18px; }
  .intro-mark { width: 112px; min-height: 130px; justify-self: end; margin-top: 4px; padding: 16px; }
  .intro-mark img { max-height: 100px; }
  .intro-copy > p:last-child { font-size: 16px; }
  .why { grid-template-columns: 1fr; }
  .why-image { min-height: 300px; }
  .why-copy { padding: 58px 24px 64px; }
  .why h2 { margin-bottom: 28px; }
  .services { grid-template-columns: 1fr; gap: 24px; padding: 78px 20px; }
  .services::before { width: 48%; opacity: .28; }
  .services-heading { position: static; }
  .service-item { grid-template-columns: 24px 44px 1fr; gap: 12px; min-height: 100px; padding: 16px 12px; }
  .service-icon { width: 40px; height: 40px; }
  .service-icon svg { width: 23px; height: 23px; }
  .service-item p { font-size: 14px; }
  .team { padding-block: 66px; }
  .team-inner { grid-template-columns: 1fr; gap: 22px; }
  .team-inner > img { height: 280px; box-shadow: 9px 9px 0 -1px #d9273e; }
  .gallery { padding-block: 72px; }
  .gallery-head { align-items: start; }
  .gallery-head > span { width: 48px; height: 48px; font-size: 15px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; gap: 11px; }
  .gallery-photo:first-child { grid-column: span 2; grid-row: auto; }
  .gallery-photo { outline-offset: -4px; }
  .gallery-placeholder::before { inset: 6px; }
  .gallery-placeholder figcaption { font-size: 9px; letter-spacing: .06em; }
  .gallery-placeholder span { width: 36px; height: 36px; }
  .contact-inner, .contact-info-inner { grid-template-columns: 1fr; gap: 34px; }
  .contact h2 { font-size: 48px; }
  .contact-row { font-size: 12px; }
  .contact-form { gap: 9px; padding: 22px 18px; }
  .contact-form input, .contact-form textarea { min-height: 48px; font-size: 16px; }
  .contact-form textarea { min-height: 130px; }
  .button-whatsapp { width: 100%; justify-content: center; }
  .contact-info .contact-row { align-items: start; }
  .contact-info .contact-row span { flex-basis: 74px; }
  .contact-info-details { padding: 8px 14px 14px; }
  .footer-main { grid-template-columns: 1fr; gap: 22px; padding-block: 30px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; justify-content: center; padding-block: 15px; }
  .footer-inner > span, .footer a { font-size: 11px; }
  .location-map { height: 240px; }
  .floating-actions { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
  .back-to-top { width: 48px; height: 48px; }
  .whatsapp-float { width: 56px; height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .reveal { opacity: 1; transform: none; }
  .floating-actions, .floating-actions.is-hidden { transition: none; }
  .hero::before, .gallery-photo, .gallery-placeholder, .service-item, .reason, .footer a { transition: none !important; }
}

/* Correcciones visuales solicitadas */
.hero-picture { position: absolute; z-index: 0; inset: 0; display: block; }
.hero-photo { position: absolute; z-index: 0; inset: 0; }
.hero::after { z-index: 1; }
.hero-shade { z-index: 2; }
.hero-content { z-index: 3; }
.hero::before,
.intro.section.wrap::after,
.intro-mark::before { content: none !important; display: none !important; }

.services { gap: clamp(32px, 6vw, 88px); }
.services-heading { padding: 30px 28px 34px; border-left: 3px solid var(--red); background: linear-gradient(145deg, #fff, #f8f9f8); box-shadow: 0 14px 32px #18263112; }
.services-heading h2 { margin-bottom: 0; }
.service-list { display: grid; gap: 14px; }
.service-item { min-height: 112px; margin: 0 !important; padding: 20px 24px; border-radius: 3px; background: linear-gradient(110deg, #fff 0%, #fff 75%, #f6f8f8 100%); box-shadow: 0 10px 24px #1826310d; }
.service-item::before { position: absolute; top: 0; right: 0; width: 56px; height: 56px; content: ""; border-top: 1px solid #4267a82b; border-right: 1px solid #4267a82b; }
.service-item:hover { transform: translateX(7px); box-shadow: 0 16px 30px #18263118; }
.service-number { width: 34px; height: 34px; color: var(--red); background: #fff; }
.service-icon { width: 52px; height: 52px; background: #eef2f6; }
.service-item p { font-size: 16px; line-height: 1.6; }
.services.is-visible .service-item:nth-child(4) { animation-delay: .36s; }
.services.is-visible .service-item:nth-child(5) { animation-delay: .48s; }
/* Mantiene las tarjetas visibles también si JavaScript no está disponible. */
.service-item { opacity: 1; transform: none; }

@media (max-width: 820px) {
  .services-heading { position: relative; top: auto; }
}

@media (max-width: 700px) {
  .hero-photo { object-position: center 52%; }
  .services { gap: 28px; }
  .services-heading { padding: 24px 20px 28px; }
  .service-item { grid-template-columns: 30px 44px minmax(0, 1fr); gap: 12px; min-height: 96px; padding: 16px 13px; }
  .service-icon { width: 42px; height: 42px; }
  .service-item p { font-size: 14px; }
}
