:root{--ink:#252b34;--blue:#008cff;--bd:#0070cc;--mute:#5a6673;--line:#e4e9ee;--soft:#f6f8fa;--ease:cubic-bezier(.2,.8,.2,1)}
html{scroll-behavior:smooth}
body{background:#fff;color:var(--ink);font:16px/1.65 Inter,"Helvetica Neue",Arial,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--ink);letter-spacing:-.035em;font-weight:700}p{color:var(--mute)}::selection{background:#bfe0ff}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.topbar{display:none}
/* cabecera */
header{background:#fffffff2;backdrop-filter:blur(10px);box-shadow:none;border-bottom:1px solid var(--line)}
.nav{min-height:76px}.brand img{width:96px;height:52px}
nav{gap:28px}nav>a{font-size:14px;font-weight:500;color:var(--mute);position:relative}
nav>a:hover,nav>a[aria-current]{color:var(--ink)}
nav>a:not(.button)::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--blue);transition:right .3s var(--ease)}
nav>a:not(.button):hover::after,nav>a[aria-current]::after{right:0}
nav>a.qw-transportos{color:var(--bd);font-weight:600}
/* botones: rectos, como el cuadro */
.button{background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:0;box-shadow:none;padding:15px 24px;min-height:48px;font-weight:600;gap:14px;transition:background .25s,border-color .25s,color .25s}
.button:hover{background:var(--bd);border-color:var(--bd);transform:none;box-shadow:none}
.button.small{padding:12px 18px;font-size:14px}.button.white{background:#fff;color:var(--bd);border-color:#fff}.button.white:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.eyebrow{display:flex;align-items:center;gap:12px;color:var(--mute);letter-spacing:.16em;font-size:12px;font-weight:600}
.eyebrow::before{content:"";width:22px;height:6px;background:var(--blue);transform:rotate(45deg) scaleX(1);flex:none;margin-right:2px}
/* ===== inicio: cuadrícula de cuadros ===== */
main>.wrap{padding-top:30px;padding-bottom:30px}
.squares{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.cuadro{position:relative;background:#fff;aspect-ratio:1;padding:clamp(20px,2.3vw,32px);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;transition:background .35s}
.cuadro.big{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.cuadro.big.tp,.cuadro.big.go{grid-row:auto;aspect-ratio:1}
.cuadro:hover{background:var(--soft)}
.n{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--mute)}
.b{display:block}
.t{font-size:clamp(19px,1.85vw,25px);line-height:1.12;margin:0 0 10px}
.p{font-size:14px;line-height:1.55;margin:0 0 14px}
.a{font-size:13px;font-weight:700;color:var(--bd);letter-spacing:.02em}.cuadro .a::after{content:"";position:absolute;inset:0}
.cuadro:hover .a{text-decoration:underline;text-underline-offset:5px}
/* la barra azul del logo como motivo */
.bar{position:absolute;right:28px;top:26px;width:46px;height:12px;background:var(--blue);transform:rotate(45deg);transform-origin:0 0;transition:transform .45s var(--ease);pointer-events:none}
.cuadro:hover .bar{transform:rotate(45deg) scaleX(1.5)}
.big .bar,.step .bar{display:none}
/* cuadro del logo */
.hero-c{justify-content:center;gap:clamp(18px,3vw,40px);padding:clamp(24px,4vw,56px)}
.qw{width:100%;height:auto;display:block;cursor:pointer;overflow:visible}
.qw .q path,.qw .w path,.qw .txt path{fill:var(--ink)}
.hero-copy h1{font-size:clamp(24px,3.1vw,40px);line-height:1.08;margin:0 0 22px;max-width:15em}.hero-copy h1 b{color:var(--bd);font-weight:700}
/* TransportOS y contacto */
.tp .route{position:absolute;left:8%;top:17%;width:84%;height:auto;overflow:visible}
.route path{fill:none;stroke:var(--blue);stroke-width:2;stroke-dasharray:3 7;animation:dash 2.4s linear infinite}.route circle{fill:var(--ink)}.route circle:last-child{fill:var(--blue)}
@keyframes dash{to{stroke-dashoffset:-20}}
.tp .t,.tp .p,

/* ===== animación del logo (misma secuencia del video) ===== */
.qw .q{transform-box:fill-box;transform-origin:50% 50%;animation:qIn .9s var(--ease) both}
.qw .w{animation:wIn .9s .9s var(--ease) both}
.qw .bar-logo{transform-box:fill-box;transform-origin:0 0;animation:barIn .8s 1.75s var(--ease) both}
.qw .l{animation:up .6s calc(2.5s + var(--i)*.07s) var(--ease) both}
.hero-copy{animation:up .8s 3s var(--ease) both}
@keyframes qIn{from{opacity:0;transform:scale(.82);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes wIn{from{opacity:0;transform:translateX(120px);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes barIn{from{opacity:0;transform:scale(.03)}30%{opacity:1}to{opacity:1;transform:scale(1)}}
@keyframes up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes slideR{from{opacity:0;transform:translateX(26px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes barPop{from{opacity:0;transform:rotate(45deg) scaleX(.03)}to{opacity:1;transform:rotate(45deg) scaleX(1)}}
/* cada cuadro repite la secuencia al entrar */
.js .squares .cuadro:not(.hero-c):not(.in) :is(.n,.t,.p,.a,.bar,.route){opacity:0}
.squares .cuadro.in .n{animation:up .5s var(--d,0ms) var(--ease) both}
.squares .cuadro.in .t{animation:slideR .7s calc(var(--d,0ms) + 160ms) var(--ease) both}
.squares .cuadro.in .bar{animation:barPop .6s calc(var(--d,0ms) + 420ms) var(--ease) both}
.squares .cuadro.in :is(.p,.a),.squares .cuadro.in .route{animation:up .6s calc(var(--d,0ms) + 520ms) var(--ease) both}
/* ===== páginas internas ===== */
.page-hero{background:#fff;padding:clamp(60px,8vw,110px) 0 clamp(40px,5vw,70px);border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(38px,6vw,80px);line-height:1.02;margin:22px 0 22px}.page-hero p{font-size:18px;max-width:560px}
.section{padding:clamp(50px,7vw,90px) 0}.pale{background:#fff;border-top:1px solid var(--line)}
.section-heading h2,.split h2,.contact-grid h2{font-size:clamp(30px,3.6vw,48px)}
.cards,.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.steps{grid-template-columns:repeat(4,1fr)}
.card,.steps article{background:#fff;border:0;border-radius:0;aspect-ratio:1;padding:0;transition:background .3s}
.card:hover,.steps article:hover{background:var(--soft);transform:none;box-shadow:none}
.card>img{display:none}
.card-body{height:100%;padding:clamp(20px,2.3vw,32px);display:flex;flex-direction:column;position:relative}
.card .number{margin-bottom:auto;color:var(--mute);font-size:11px;letter-spacing:.18em}
.card h3{font-size:clamp(20px,2vw,26px);margin-bottom:10px}.card p{font-size:14px;line-height:1.55;margin-bottom:14px}.card a{color:var(--bd);font-weight:700;font-size:13px}
.card-body::after{content:"";position:absolute;right:28px;top:26px;width:46px;height:12px;background:var(--blue);transform:rotate(45deg);transform-origin:0 0;transition:transform .45s var(--ease)}.card:hover .card-body::after{transform:rotate(45deg) scaleX(1.5)}
.steps article{padding:clamp(20px,2.3vw,32px);display:flex;flex-direction:column;justify-content:space-between}.steps span{color:var(--blue);font-size:34px;font-weight:700;margin:0}.steps h3{font-size:22px}.steps p{font-size:14px;margin:0}
.photos{padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.photos img,.photos img+img{position:static;width:100%;height:auto;aspect-ratio:1;border:0;border-radius:0;box-shadow:none;filter:grayscale(1) contrast(1.05)}
.checks{color:var(--ink)}
.contact-grid ul{color:var(--mute)}.note{background:var(--soft);border:0;border-left:3px solid var(--blue);border-radius:0}
form{border-radius:0;border:1px solid var(--line);box-shadow:none;background:#fff}
label{font-size:13px;font-weight:600;color:var(--ink)}
input,select,textarea{border:0;border-bottom:1.5px solid #b9c4cf;border-radius:0;background:var(--soft);padding:13px 14px;min-height:50px;transition:border-color .2s,background .2s}
input:hover,select:hover,textarea:hover{background:#eef2f6}
input:focus,select:focus,textarea:focus{outline:0;border-bottom-color:var(--blue);background:#fff;box-shadow:0 2px 0 var(--blue)}
input[aria-invalid=true],textarea[aria-invalid=true]{border-bottom-color:#c62828}
.err{display:block;color:#b3261e;font-size:13px;margin-top:6px}.count{display:block;text-align:right;font-size:12px;color:var(--mute);margin-top:4px;font-weight:400}
#form-status:not(:empty){padding:14px 16px;background:#e8f6ee;color:#14532d;font-weight:600}
.cta{background:var(--bd);padding:clamp(50px,6vw,80px) 0}.cta h2{color:#fff;font-size:clamp(28px,3.6vw,48px)}.cta .eyebrow{color:#d6ecff}.cta .eyebrow::before{background:#fff}
footer{background:#fff;border-top:1px solid var(--line);padding-top:50px}footer p,footer a{color:var(--mute);font-size:14px}footer a:hover{color:var(--ink)}footer h3{font-size:14px;color:var(--ink)}.footer-logo{width:100px;height:54px}
.credits{border-color:var(--line);color:var(--mute);font-size:12px;display:flex;flex-wrap:wrap;gap:6px .3em}.credits a{font-size:12px}
.js .reveal{opacity:0;transform:translateY(16px)}.reveal.in{opacity:1;transform:none;transition:opacity .6s var(--d,0ms),transform .6s var(--d,0ms)}
/* ===== responsive ===== */
@media(max-width:900px){
.squares{grid-template-columns:1fr 1fr}.cuadro.big{grid-row:auto;aspect-ratio:1}
.cards{grid-template-columns:1fr 1fr}.steps{grid-template-columns:1fr 1fr}
nav{background:#fff;border-top:1px solid var(--line);gap:2px}nav>a:not(.button){padding:14px 4px;font-size:16px;border-bottom:1px solid var(--line)}nav>a::after{display:none}.menu{width:48px;height:48px;font-size:22px;padding:0;border-radius:0}}
@media(max-width:600px){
main>.wrap{padding-left:0;padding-right:0;padding-top:0}.squares{grid-template-columns:1fr;border-left:0;border-right:0}
.cuadro,.cuadro.big{aspect-ratio:1;grid-column:auto}.p{font-size:15px}
.cards,.steps{grid-template-columns:1fr}.hero-copy .button{width:100%}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .reveal,.js .squares .cuadro :is(.n,.t,.p,.a,.bar,.route){opacity:1!important}}