:root { --sand:#f4efe3; --paper:#fbf8f0; --ink:#18323f; --muted:#6f756f; --blue:#197b88; --red:#df482f; --sun:#f2b743; --line:rgba(24,50,63,.17); --shadow:0 24px 60px rgba(40,44,36,.10); --sans:'Avenir Next','Segoe UI',system-ui,sans-serif; --serif:'Iowan Old Style','Palatino Linotype',Georgia,serif; --mono:'SFMono-Regular',Consolas,monospace; }
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body { margin:0; background:var(--sand); color:var(--ink); font-family:var(--sans); -webkit-font-smoothing:antialiased }
button,input { font:inherit }
button,a { -webkit-tap-highlight-color:transparent }
.noise { position:fixed; inset:0; pointer-events:none; z-index:20; opacity:.07; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); mix-blend-mode:multiply }
.site-header { width:min(1280px,calc(100% - 64px)); margin:0 auto; height:92px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; z-index:3 }
.brand { color:var(--ink); text-decoration:none; display:flex; align-items:center; gap:12px; font-weight:700; font-size:19px; letter-spacing:-.04em }
.brand-logo { width:50px; height:50px; object-fit:contain }
.destination { font-family:var(--mono); text-transform:uppercase; font-size:11px; letter-spacing:.06em; display:flex; gap:9px; align-items:center }
.destination i { width:7px; height:7px; background:var(--red); border-radius:50%; box-shadow:0 0 0 5px rgba(223,72,47,.12) }
main { overflow:hidden }
.hero { width:min(1280px,calc(100% - 64px)); min-height:680px; margin:auto; display:grid; grid-template-columns:.92fr 1.08fr; align-items:center; position:relative }
.hero-copy { padding:80px 0 100px; position:relative; z-index:2 }
.hero-copy,.route-art { min-width:0 }
.eyebrow { margin:0 0 24px; font-family:var(--mono); color:var(--red); text-transform:uppercase; font-size:11px; font-weight:500; letter-spacing:.1em }
h1,h2,p { margin-top:0 }
h1 { font-size:clamp(55px,6.3vw,96px); line-height:.93; letter-spacing:-.065em; margin-bottom:32px; font-weight:600; max-width:760px }
h1 em { font-family:var(--serif); font-weight:500; color:var(--blue) }
.intro { max-width:550px; font-size:clamp(17px,1.5vw,21px); line-height:1.65; color:#4f5e60; margin-bottom:38px }
.text-link { color:var(--ink); font-weight:700; text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:5px; font-size:14px }
.text-link span { display:inline-block; margin-left:8px; transition:transform .2s }
.text-link:hover span { transform:translateY(4px) }
.route-art { height:590px; position:relative }
.route-art::before,.route-art::after { content:''; position:absolute; border-radius:50%; border:1px solid rgba(24,50,63,.08); width:430px; height:430px; top:60px; right:15px }
.route-art::after { width:330px; height:330px; top:110px; right:65px }
.route-art svg { width:100%; height:100%; position:relative; z-index:1; overflow:visible }
.route-shadow { fill:none; stroke:rgba(24,50,63,.08); stroke-width:20; stroke-linecap:round }
.route { fill:none; stroke:var(--blue); stroke-width:4; stroke-linecap:round; stroke-dasharray:2 13; animation:dash 16s linear infinite }
@keyframes dash { to { stroke-dashoffset:-240 } }
.start { fill:var(--red); stroke:var(--sand); stroke-width:6 }
.plane path { fill:var(--ink) }
.sun { position:absolute; width:82px; height:82px; border-radius:50%; background:var(--sun); top:89px; right:93px; opacity:.9 }
.start-label,.end-label { position:absolute; z-index:2; font-family:var(--mono); text-transform:uppercase; font-size:10px; letter-spacing:.08em }
.start-label { bottom:74px; left:2px; transform:rotate(-6deg) }
.end-label { top:58px; right:38px }
.board { background:var(--ink); color:var(--sand); padding:100px max(32px,calc((100vw - 1280px)/2)); min-height:520px }
.board-heading { display:flex; justify-content:space-between; gap:30px; align-items:end; margin-bottom:52px }
.board .eyebrow { color:var(--sun); margin-bottom:18px }
h2 { font-size:clamp(38px,4.4vw,67px); line-height:1; letter-spacing:-.05em; margin-bottom:0; font-weight:600 }
.primary { border:0; background:var(--red); color:white; min-height:54px; padding:0 25px; border-radius:100px; font-weight:700; cursor:pointer; transition:transform .18s,background .18s; box-shadow:0 8px 28px rgba(223,72,47,.18) }
.primary:hover { background:#c93a24; transform:translateY(-2px) }
.primary:active { transform:translateY(0) }
.ride-list { border-top:1px solid rgba(244,239,227,.22) }
.ride-card { display:grid; grid-template-columns:100px 135px 1fr auto; gap:34px; align-items:center; min-height:142px; border-bottom:1px solid rgba(244,239,227,.22); padding:22px 4px; animation:arrive .45s ease both }
@keyframes arrive { from { opacity:0; transform:translateY(12px) } }
.date-block { width:68px; height:82px; border:1px solid rgba(244,239,227,.25); border-radius:40px 40px 8px 8px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:var(--mono); line-height:1.2 }
.date-block .day,.date-block .month { text-transform:uppercase; font-size:9px; letter-spacing:.1em; color:#b7bab2 }
.date-number { font-size:25px; font-weight:500 }
.ride-time .time { font-size:29px; letter-spacing:-.04em; display:block }
.ride-time small { font-family:var(--mono); font-size:9px; letter-spacing:.1em; color:#a7afa9 }
.ride-person { display:flex; flex-direction:column; gap:6px; min-width:0 }
.ride-person strong { font-size:19px }
.ride-person span { color:#b9beb9; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ride-person b { color:var(--sand); font-weight:500 }
.ride-actions { display:flex; align-items:center; gap:16px }
.whatsapp { color:var(--sand); border:1px solid rgba(244,239,227,.35); border-radius:100px; padding:12px 18px; font-size:13px; font-weight:700; text-decoration:none; white-space:nowrap; transition:background .2s,color .2s }
.whatsapp:hover { background:var(--sand); color:var(--ink) }
.wa-icon { color:#54c886; margin-right:6px; font-size:17px }
.remove { border:0; padding:4px; background:transparent; color:#9ea7a3; font-size:11px; text-decoration:underline; cursor:pointer }
.status { min-height:0 }
.status:not(:empty) { border:1px dashed rgba(244,239,227,.3); padding:54px 25px; text-align:center; color:#bcc2bd; margin-top:10px }
.status button { background:none; border:0; color:var(--sun); text-decoration:underline; cursor:pointer }
.how-it-works { width:min(1280px,calc(100% - 64px)); padding:120px 0 140px; margin:auto }
.how-it-works>h2 { max-width:640px }
.how-it-works ol { list-style:none; margin:80px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(35px,6vw,100px) }
.how-it-works li { border-top:1px solid var(--line); padding-top:20px; display:grid; grid-template-columns:36px 1fr; gap:10px }
.how-it-works li>span { font-family:var(--mono); color:var(--red); font-size:10px; padding-top:4px }
.how-it-works strong { font-size:17px }
.how-it-works li p { grid-column:2; color:var(--muted); line-height:1.65; font-size:14px }
footer { background:var(--red); color:white; padding:70px max(32px,calc((100vw - 1280px)/2)); display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:25px }
.footer-mark { font-size:clamp(45px,6vw,80px); font-weight:700; letter-spacing:-.07em; grid-row:span 2 }
footer p { margin:0; line-height:1.5; justify-self:end; text-align:right; max-width:450px }
footer .safety { font-size:11px; opacity:.8 }
dialog { width:min(650px,calc(100% - 28px)); max-height:calc(100vh - 28px); border:0; padding:0; background:var(--paper); color:var(--ink); box-shadow:var(--shadow) }
dialog::backdrop { background:rgba(12,31,39,.7); backdrop-filter:blur(4px) }
dialog[open] { animation:dialog-in .24s ease both }
@keyframes dialog-in { from { opacity:0; transform:translateY(18px) scale(.98) } }
#ride-form { padding:54px; position:relative }
.close { position:absolute; right:23px; top:18px; border:0; background:transparent; font-size:31px; font-weight:300; cursor:pointer; color:var(--ink) }
#ride-form h2 { font-size:clamp(35px,4vw,51px); max-width:500px; margin-bottom:14px }
.form-intro { color:var(--muted); font-size:14px; margin-bottom:32px }
.form-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px }
.form-row .field { min-width:0 }
.field { margin-bottom:21px }
.field label { display:block; font-size:12px; font-weight:700; margin-bottom:8px }
.field input { width:100%; height:51px; border:1px solid var(--line); background:white; color:var(--ink); border-radius:5px; padding:0 14px; outline:0 }
.field input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(25,123,136,.1) }
.field small { color:var(--muted); font-size:10px; display:block; margin-top:6px }
.consent { display:flex; gap:11px; align-items:flex-start; color:var(--muted); font-size:11px; line-height:1.5; cursor:pointer }
.consent input { accent-color:var(--blue); margin-top:2px }
.form-error { color:#ba2d1c; font-size:12px; min-height:20px; margin:14px 0 4px }
.submit { width:100%; display:flex; justify-content:space-between; align-items:center; padding:0 23px; border-radius:5px }
@media (max-width:820px) {
  .site-header,.hero,.how-it-works { width:min(100% - 38px,650px) }
  .site-header { height:74px }
  .brand-logo { width:42px; height:42px }
  .destination { font-size:8px }
  .destination i { display:none }
  .destination span { display:none }
  .hero { display:flex; flex-direction:column; min-height:0; align-items:stretch }
  .hero-copy { padding:70px 0 5px }
  .hero-copy,.intro { width:100%; max-width:100%; overflow-wrap:anywhere }
  h1 { font-size:clamp(47px,13vw,60px); max-width:100% }
  h1 em { display:block; white-space:nowrap; font-size:.93em }
  .intro { font-size:16px }
  .route-art { width:100%; height:390px; margin:-35px 0 0 }
  .route-art svg { overflow:hidden }
  .route-art::before { width:280px; height:280px; top:55px; right:15px }
  .route-art::after { width:210px; height:210px; top:90px; right:50px }
  .sun { width:58px; height:58px; top:76px; right:60px }
  .end-label { top:50px }
  .start-label { bottom:38px }
  .board { padding:76px 19px }
  .board-heading { align-items:flex-start; flex-direction:column; margin-bottom:36px }
  .ride-card { grid-template-columns:64px 1fr auto; gap:16px; min-height:130px; position:relative }
  .date-block { width:58px; height:72px }
  .ride-time { align-self:end }
  .ride-time .time { font-size:23px }
  .ride-person { grid-column:2/4; grid-row:1; align-self:end }
  .ride-actions { grid-column:3; grid-row:2; align-self:start }
  .whatsapp { padding:10px 12px; font-size:11px }
  .remove { position:absolute; right:0; bottom:2px; transform:translateY(100%) }
  .how-it-works { padding:90px 0 110px }
  .how-it-works ol { grid-template-columns:1fr; margin-top:55px; gap:38px }
  footer { grid-template-columns:1fr; padding:55px 20px }
  .footer-mark { grid-row:auto }
  footer p { justify-self:start; text-align:left }
  #ride-form { padding:45px 23px 28px }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important } }