/* JW Limo Luxury — base system. Mobile-first: the plain rules target phones,
   media queries scale up from there. */

:root{
  --preto:#0b0b0c; --preto-2:#141416; --preto-3:#1b1b1f;
  --linha:#292930; --linha-2:#35353d;
  --branco:#f6f5f3; --cinza:#a3a2a0; --cinza-2:#6f6f76;
  --ouro:#c9a24a; --ouro-claro:#e0be6d;

  --display:"Jost","Futura","Century Gothic",-apple-system,"Segoe UI",sans-serif;
  --sans:"Inter",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* rounded corner scale */
  --r-xs:8px; --r-sm:12px; --r:18px; --r-lg:26px; --r-pill:999px;

  --wrap:1180px;
  --pad:18px;                 /* gutter, grows on bigger screens */
  --touch:48px;               /* minimum comfortable tap target */
  --head:76px;              /* one header height everywhere */
  --shadow:0 18px 40px -18px rgba(0,0,0,.75);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--preto);color:var(--branco);
  font:400 16.5px/1.66 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;           /* nothing may scroll the page sideways */
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ouro);outline-offset:3px;border-radius:var(--r-xs)}

h1,h2,h3{font-family:var(--display);font-weight:300;line-height:1.08;margin:0;letter-spacing:-.03em}
h1{font-size:clamp(1.85rem,7.4vw,4.4rem)}
h2{font-size:clamp(1.45rem,5.4vw,3rem)}
h3{font-size:1.13rem;font-weight:400;letter-spacing:-.015em}
p{margin:0 0 .85rem}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);width:100%}
section{padding:40px 0}
.center{text-align:center}
.head-gap{margin-bottom:28px}
.center .lead{margin-inline:auto}

.eyebrow{
  font:500 .71rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ouro);margin:0 0 10px;
}
.lead{color:var(--cinza);font-size:1.02rem;max-width:60ch}

/* ---------- header ---------- */
.site-header{
  position:fixed;inset:0 0 auto;z-index:60;
  border-bottom:1px solid transparent;transition:background .3s,border-color .3s;
}
.site-header.scrolled{
  background:rgba(11,11,12,.94);backdrop-filter:blur(12px);border-color:var(--linha);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--head);gap:12px}
.logo{display:flex;align-items:center;flex:0 0 auto}
.logo img{height:56px;width:auto}   /* same size on every page and breakpoint */
.foot .logo img{height:92px}

.head-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}

/* compact CTA that stays visible on phones — the booking link should never
   be buried inside a closed menu */
.nav-cta{
  min-height:38px;padding:0 15px;font-size:.68rem;letter-spacing:.1em;
}

.burger{
  position:relative;flex:0 0 auto;
  width:var(--touch);height:var(--touch);margin-right:-9px;
  background:none;border:0;cursor:pointer;border-radius:var(--r-sm);
}
.burger span{
  position:absolute;left:13px;right:13px;height:1.5px;border-radius:2px;
  background:var(--branco);transition:transform .28s ease,opacity .18s ease;
}
.burger span:nth-child(1){top:17px}
.burger span:nth-child(2){top:23px}
.burger span:nth-child(3){top:29px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Mobile sheet. Kept in the DOM and slid out of view so the open/close can be
   animated and so it never traps focus while hidden. */
.nav{
  position:fixed;inset:var(--head) 0 auto;
  display:flex;flex-direction:column;gap:2px;
  padding:12px var(--pad) 20px;
  background:rgba(11,11,12,.98);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linha);
  border-radius:0 0 var(--r-lg) var(--r-lg);
  max-height:calc(100dvh - var(--head));overflow-y:auto;
  box-shadow:var(--shadow);
  transform:translateY(-12px);opacity:0;visibility:hidden;
  transition:transform .26s ease,opacity .2s ease,visibility .26s;
}
.nav.open{transform:none;opacity:1;visibility:visible}

.nav a{
  display:flex;align-items:center;min-height:50px;
  padding:0 14px;border-radius:var(--r-sm);
  font-size:1rem;letter-spacing:.01em;color:var(--cinza);
  border-bottom:1px solid rgba(41,41,48,.6);
}
.nav a:last-of-type{border-bottom:0}
.nav a[aria-current]{color:var(--branco);background:var(--preto-3)}
.nav a[aria-current]{color:var(--ouro)}

/* phone + whatsapp pinned under the links */
.nav-foot{display:flex;gap:8px;margin-top:14px}
.nav-foot a{
  flex:1;justify-content:center;min-height:44px;border-bottom:0;
  border:1px solid var(--linha-2);border-radius:var(--r-pill);
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cinza);
}

/* dim the page behind the open sheet */
.nav-scrim{
  position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.55);
  opacity:0;visibility:hidden;transition:opacity .26s,visibility .26s;
}
.nav-scrim.on{opacity:1;visibility:visible}
body.nav-locked{overflow:hidden}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--touch);padding:0 28px;
  border:1px solid var(--ouro);color:var(--ouro);background:none;
  font:500 .76rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  border-radius:var(--r-pill);cursor:pointer;text-align:center;
  transition:background .25s,color .25s,transform .15s;
}
.btn:active{transform:scale(.98)}
.btn-solid{background:var(--ouro);color:var(--preto)}
.btn-ghost{border-color:var(--linha-2);color:var(--cinza)}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ---------- hero ---------- */
.hero{
  min-height:auto;display:flex;align-items:center;
  padding:calc(var(--head) + 30px) 0 40px;
  /* inner-page hero: no photograph, just a soft gold wash off the top-left */
  background:
    radial-gradient(115% 75% at 12% 0%,rgba(201,162,74,.10),transparent 62%),
    var(--preto);
}
.hero h1{max-width:15ch}
.hero .lead{margin-top:14px;font-size:1rem}
.hero .btn{margin-top:22px}

/* ---------- forms ---------- */
.reserva-box{
  background:var(--preto-2);border:1px solid var(--linha);
  border-radius:var(--r-lg);padding:18px;
}
.grid-form{display:grid;grid-template-columns:1fr;gap:12px}
label{
  display:block;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cinza);margin-bottom:7px;
}
input,select,textarea{
  width:100%;min-height:var(--touch);
  background:var(--preto);border:1px solid var(--linha);color:var(--branco);
  padding:12px 14px;
  font:400 16px var(--sans);   /* 16px keeps iOS from zooming on focus */
  border-radius:var(--r-sm);
  transition:border-color .2s;
}
select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--cinza) 50%),linear-gradient(135deg,var(--cinza) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:38px;
}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--ouro)}
textarea{resize:vertical;min-height:96px;line-height:1.55}
.form-ok{color:var(--ouro);font-size:.94rem;margin-top:12px}
/* validation feedback — the quick quote form on the home page uses these too,
   which is why they live here and not only in app.css */
.err{display:block;color:#e58d7f;font-size:.84rem;margin:12px 0 0;line-height:1.45}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#8a4a40}

/* ---------- time picker (hour / minute / AM-PM) ---------- */
.timepick{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.timepick select{padding-right:30px;background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%}
.timepick .mer{
  display:flex;gap:4px;background:var(--preto);border:1px solid var(--linha);
  border-radius:var(--r-sm);padding:4px;
}
.timepick .mer label{
  flex:1;margin:0;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-xs);cursor:pointer;font-size:.78rem;letter-spacing:.06em;
  color:var(--cinza);transition:background .2s,color .2s;
}
.timepick .mer input{position:absolute;opacity:0;pointer-events:none}
.timepick .mer label:has(input:checked){background:var(--ouro);color:var(--preto);font-weight:500}

/* ---------- compact quote form (home "Get your price") ----------
   Two columns already on phones: short fields pair up so the whole form fits
   without a marathon scroll. .wide = full row on phones, half from tablet up. */
.grid-form.tight{grid-template-columns:1fr 1fr;gap:10px}
.grid-form.tight .full,
.grid-form.tight .wide{grid-column:1/-1}
.grid-form.tight label{font-size:.69rem;margin-bottom:5px}
.grid-form.tight textarea{min-height:64px}
.grid-form.tight .timepick{gap:6px}
.quote-form{margin:0}
.quote-form .btn{width:100%;margin-top:16px}
.quote-intro .lead{margin:0}
.quote-hours{
  margin:12px 0 0;font-size:.86rem;color:var(--cinza-2);
  display:flex;align-items:center;gap:8px;
}
.quote-hours::before{
  content:"";width:6px;height:6px;border-radius:var(--r-pill);
  background:var(--ouro);flex:0 0 auto;
}
@media (min-width:700px){
  .grid-form.tight{gap:12px}
  .grid-form.tight .wide{grid-column:auto}
  .quote-form .btn{width:auto;min-width:220px}
}

/* ---------- service cards ---------- */
.cards{display:grid;grid-template-columns:1fr;gap:14px}
.card{
  background:var(--preto-2);border:1px solid var(--linha);
  border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;
  transition:border-color .3s,transform .3s;
}
.ph{
  aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(135deg,var(--preto-3),var(--preto));
  display:grid;place-items:center;
  color:var(--cinza-2);font-family:var(--display);font-size:.9rem;
  letter-spacing:.18em;text-transform:uppercase;
}
.ph img{width:100%;height:100%;object-fit:cover}
.card .body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.card p{color:var(--cinza);font-size:.96rem;flex:1;margin:0}
.card .more{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ouro)}

/* ---------- differentiators ---------- */
.dif{display:grid;grid-template-columns:1fr;gap:12px}
.dif div{
  border:1px solid var(--linha);border-radius:var(--r);
  padding:16px;background:var(--preto-2);
}
.dif h3{font-size:1.06rem;margin-bottom:5px}
.dif p{color:var(--cinza);font-size:.94rem;margin:0}

/* ---------- split sections ---------- */
.split{display:grid;grid-template-columns:1fr;gap:22px;align-items:center}
.split .ph{border-radius:var(--r-lg)}
.alt{background:var(--preto-2)}

/* ---------- faq ---------- */
.faq{max-width:820px;margin:0 auto;display:grid;gap:8px}
.faq details{
  border:1px solid var(--linha);border-radius:var(--r);
  background:var(--preto-2);overflow:hidden;
}
.faq details[open]{border-color:var(--linha-2)}
.faq summary{
  cursor:pointer;list-style:none;padding:14px 16px;
  font-family:var(--display);font-size:1.08rem;font-weight:400;letter-spacing:-.01em;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  min-height:var(--touch);
}
.faq summary::-webkit-details-marker{display:none}
.faq details p{color:var(--cinza);padding:0 16px 16px;margin:0;font-size:.96rem}

/* ---------- cta ---------- */
.cta{background:var(--preto-2);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}

/* ---------- footer ---------- */
footer{padding:32px 0 20px;font-size:.93rem;color:var(--cinza)}
.foot{display:grid;grid-template-columns:1fr;gap:20px}
.tagline{
  font-family:var(--display);font-weight:300;font-size:1.05rem;
  letter-spacing:.01em;color:var(--ouro);margin:0 0 .6rem;
}
footer h4{
  font:500 .68rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--branco);margin:0 0 14px;
}
footer ul{list-style:none;padding:0;margin:0;display:grid;gap:4px}
footer ul a{display:inline-flex;align-items:center;min-height:38px}
.copy{border-top:1px solid var(--linha);margin-top:24px;padding-top:16px;font-size:.8rem}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto!important}
}

/* ---------- floating whatsapp ---------- */
.zap{
  position:fixed;right:14px;bottom:14px;z-index:55;
  background:#25d366;color:#0b0b0c;
  width:54px;height:54px;border-radius:var(--r-pill);
  display:grid;place-items:center;font-size:1.3rem;
  box-shadow:0 10px 26px rgba(0,0,0,.45);
}

/* =========================================================================
   Tablet and up
   ========================================================================= */
@media (min-width:700px){
  :root{--pad:28px}
  body{font-size:17px}
  section{padding:84px 0}
  .head-gap{margin-bottom:48px}
  .grid-form{grid-template-columns:1fr 1fr}
  .grid-form .full{grid-column:1/-1}
  .cards{grid-template-columns:repeat(2,1fr);gap:22px}
  .dif{grid-template-columns:repeat(2,1fr)}
  .foot{grid-template-columns:1.4fr 1fr 1fr;gap:40px}
  .reserva-box{padding:32px}
  .card .body{padding:24px}
  .hero{min-height:82vh;padding:calc(var(--head) + 60px) 0 70px}
  .faq summary{padding:20px 24px;font-size:1.2rem}
  .faq details p{padding:0 24px 22px}
}

/* =========================================================================
   Desktop
   ========================================================================= */
@media (min-width:1000px){
  section{padding:110px 0}
  .lead{font-size:1.05rem}

  /* nav returns to a horizontal bar */
  .burger,.nav-foot,.nav-scrim{display:none}
  .nav{
    position:static;display:flex;flex-direction:row;align-items:center;
    gap:4px;padding:0;background:none;border:0;box-shadow:none;
    max-height:none;overflow:visible;border-radius:0;backdrop-filter:none;
    transform:none;opacity:1;visibility:visible;
  }
  .nav a{
    min-height:auto;padding:9px 13px;border-radius:var(--r-pill);
    font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
    border-bottom:0;
  }
  .nav-cta{min-height:42px;padding:0 22px;font-size:.72rem;letter-spacing:.13em}
  .cards{grid-template-columns:repeat(4,1fr);gap:26px}
  .dif{grid-template-columns:repeat(4,1fr);gap:24px}
  .split{grid-template-columns:1fr 1fr;gap:64px}
  .hero{min-height:90vh}
  .hero .lead{font-size:1.12rem}
  .reserva-box{padding:40px}
  .zap{right:24px;bottom:24px;width:58px;height:58px}
}

/* =========================================================================
   Layout-reference touches
   ========================================================================= */

/* two-tone headline: second line in gold */
.gold{color:var(--ouro);display:block}

/* button with a trailing arrow */

/* wider eyebrow tracking, closer to the reference */
.eyebrow{letter-spacing:.26em}

/* asymmetric section head: title left, supporting text right */
.head-split{display:grid;gap:14px;margin-bottom:26px}
.head-split h2{margin:0}
.head-split .lead{margin:0}

/* gold icon badge on service cards */
.card-icon{
  width:38px;height:38px;border-radius:var(--r-sm);
  display:grid;place-items:center;
  background:rgba(201,162,74,.1);border:1px solid rgba(201,162,74,.3);
  color:var(--ouro);font-size:1.05rem;margin-bottom:2px;
}

@media (min-width:700px){
  .head-split{grid-template-columns:1.1fr 1fr;gap:36px;align-items:end;margin-bottom:36px}
}

/* =========================================================================
   Hero — vehicle as the background, copy anchored low
   ========================================================================= */
.hero-bg{
  position:relative;isolation:isolate;
  display:flex;align-items:flex-end;
  min-height:76vh;min-height:76dvh;
  /* generous top padding is what pushes the copy down and leaves the car clear */
  padding:calc(var(--head) + 120px) 0 30px;
  overflow:hidden;
}

.hero-bg::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url("../img/hero-car.jpg") center 38%/cover no-repeat;
}

/* Dark only where it has to be: a thin cap under the fixed header, and a lift
   from the bottom for the copy. The middle stays clear so the car reads. */
.hero-bg::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,
    rgba(11,11,12,.88) 0%,
    rgba(11,11,12,.34) 16%,
    rgba(11,11,12,.10) 38%,
    rgba(11,11,12,.62) 68%,
    rgba(11,11,12,.94) 88%,
    var(--preto) 100%);
}

.hero-bg .wrap{position:relative}
.hero-copy{min-width:0}
.hero-bg h1{
  max-width:13ch;
  font-size:clamp(1.75rem,6.8vw,4.2rem);
  text-shadow:0 2px 22px rgba(0,0,0,.6);
}
.hero-bg .lead{
  margin:10px 0 0;max-width:30ch;font-size:1.02rem;
  color:#dcdad6;text-shadow:0 1px 12px rgba(0,0,0,.65);
}

.hero-cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.hero-cta .btn{flex:1 1 auto;min-width:138px;min-height:44px;padding:0 20px}

/* credentials get their own strip so they stop competing with the photograph */
.trust-strip{background:var(--preto-2);border-bottom:1px solid var(--linha)}
.trust-strip ul{
  list-style:none;margin:0;padding:11px 0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:7px 15px;
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cinza-2);
}
.trust-strip li{display:flex;align-items:center;gap:7px}
.trust-strip li+li::before{
  content:"";width:3px;height:3px;border-radius:var(--r-pill);
  background:var(--ouro);opacity:.75;
}

@media (min-width:700px){
  .hero-bg{
    min-height:78vh;min-height:78dvh;
    padding:calc(var(--head) + 150px) 0 44px;
  }
  .hero-bg .lead{font-size:1rem;margin-top:12px}
  .hero-cta{gap:10px;margin-top:22px}
  .hero-cta .btn{flex:0 0 auto;min-height:46px;padding:0 26px}
  .trust-strip ul{padding:13px 0;font-size:.76rem;gap:8px 22px}
}

@media (min-width:1000px){
  .hero-bg{min-height:84vh;min-height:84dvh;padding:calc(var(--head) + 200px) 0 64px}
  /* wide screens: shift the frame right so the car clears the copy column */
  .hero-bg::before{background-position:70% 42%}
  .hero-bg::after{
    background:
      linear-gradient(90deg,
        rgba(11,11,12,.92) 0%,
        rgba(11,11,12,.68) 34%,
        rgba(11,11,12,.18) 60%,
        transparent 80%),
      linear-gradient(180deg,
        rgba(11,11,12,.72) 0%,transparent 20%,
        transparent 62%,rgba(11,11,12,.9) 92%,var(--preto) 100%);
  }
  .hero-bg .lead{font-size:1.05rem;max-width:34ch}
}

/* short landscape phones: the hero must not swallow the screen */
@media (max-height:560px){
  .hero-bg{min-height:auto;padding:calc(var(--head) + 60px) 0 26px}
}

/* =========================================================================
   Availability — pick a day, tap an hour
   Phones: day strip + one day's hours. Tablet up: all seven side by side.
   ========================================================================= */
.wkcal{
  background:var(--preto-2);border:1px solid var(--linha);
  border-radius:var(--r);overflow:hidden;
}

.wk-bar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 11px;border-bottom:1px solid var(--linha);background:var(--preto-3);
}
.wk-nav{display:flex;align-items:center;gap:5px;min-width:0}
.wk-nav button{
  width:32px;height:32px;flex:0 0 auto;
  background:none;border:1px solid var(--linha-2);color:var(--cinza);
  border-radius:var(--r-pill);cursor:pointer;font-size:1rem;line-height:1;
}
.wk-nav strong{
  font-family:var(--display);font-size:.98rem;font-weight:500;letter-spacing:-.01em;
  margin-left:4px;white-space:nowrap;
}
.wk-today{
  background:none;border:1px solid var(--linha-2);color:var(--cinza);
  border-radius:var(--r-pill);padding:7px 13px;cursor:pointer;
  font:500 .62rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;
}

/* ---- day strip ---- */
.days{
  display:flex;gap:6px;padding:10px;
  overflow-x:auto;overscroll-behavior-x:contain;
  border-bottom:1px solid var(--linha);scrollbar-width:none;
  scroll-padding:10px;
  /* fades whichever edge still hides days — set by JS on scroll */
  -webkit-mask-image:none;mask-image:none;
  transition:-webkit-mask-image .2s,mask-image .2s;
}
.days::-webkit-scrollbar{display:none}
.days.more-r{
  -webkit-mask-image:linear-gradient(to right,#000 82%,transparent 100%);
          mask-image:linear-gradient(to right,#000 82%,transparent 100%);
}
.days.more-l{
  -webkit-mask-image:linear-gradient(to left,#000 82%,transparent 100%);
          mask-image:linear-gradient(to left,#000 82%,transparent 100%);
}
.days.more-l.more-r{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 9%,#000 91%,transparent 100%);
}
.day{
  /* never grow: the strip must overflow so it can be dragged */
  flex:0 0 auto;min-width:68px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:9px 6px;cursor:pointer;
  background:none;border:1px solid var(--linha);border-radius:var(--r-sm);
  color:var(--cinza);transition:all .2s;
}
.day .dow{font-size:.63rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cinza-2)}
.day .num{font-family:var(--display);font-size:1.15rem;font-weight:400;line-height:1.05}
.day .tag{font-size:.61rem;letter-spacing:.02em;color:var(--ouro);white-space:nowrap}
.day[aria-pressed="true"]{background:var(--ouro);border-color:var(--ouro);color:var(--preto)}
.day[aria-pressed="true"] .dow,
.day[aria-pressed="true"] .tag{color:var(--preto);opacity:.8}
.day:disabled{opacity:.4;cursor:not-allowed}
.day:disabled .tag{color:var(--cinza-2)}
/* a day already behind us is dimmer still, and reads "Past", not "Full" */
.day.gone{opacity:.26}

/* ---- one day's hours ---- */
.pane{display:none;padding:14px 11px 16px}
.pane.on{display:block}
.pane-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:0 0 11px;font-size:.88rem;color:var(--cinza);
}
.pane-head b{font-weight:500;color:var(--ouro);font-size:.77rem;white-space:nowrap}

.hours{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.hr{
  display:flex;align-items:center;justify-content:center;
  min-height:42px;padding:0 6px;border-radius:var(--r-sm);
  font-size:.86rem;letter-spacing:.01em;
  border:1px solid var(--linha);color:var(--cinza-2);
  transition:background .18s,color .18s,border-color .18s;
}
.hr.free{
  border-color:rgba(201,162,74,.55);color:var(--ouro);
  background:rgba(201,162,74,.06);cursor:pointer;
}
.hr.free:focus-visible{background:var(--ouro);color:var(--preto);border-color:var(--ouro)}
.hr.busy,.hr.past{opacity:.4;text-decoration:line-through}

.none{margin:0;font-size:.9rem;color:var(--cinza)}
.none a{color:var(--ouro);text-decoration:underline;text-underline-offset:3px}

/* ---- tablet and up: the whole week at once ---- */
@media (min-width:700px){
  .wkcal{border-radius:var(--r-lg)}
  .wk-bar{padding:11px 14px}
  .wk-nav strong{font-size:1.1rem}

  .days{
    display:grid;grid-template-columns:repeat(7,1fr);gap:0;
    padding:0;overflow:visible;
    -webkit-mask-image:none!important;mask-image:none!important;
  }
  .day{
    border:0;border-left:1px solid var(--linha);border-radius:0;
    min-width:0;flex:1;padding:11px 4px;cursor:default;
  }
  .day:first-child{border-left:0}
  /* the whole week is visible, so the strip is a header, not a switch */
  .day[aria-pressed="true"]{background:none;color:var(--cinza)}
  .day[aria-pressed="true"] .dow{color:var(--cinza-2);opacity:1}
  .day[aria-pressed="true"] .tag{color:var(--ouro);opacity:1}
  .day .num{font-size:1.25rem;color:var(--branco)}
  .day:disabled{opacity:.45}

  .panes{display:grid;grid-template-columns:repeat(7,1fr)}
  .pane{
    display:block;padding:9px 5px 12px;
    border-left:1px solid var(--linha);
  }
  .pane:first-child{border-left:0}
  .pane-head{display:none}          /* the day header above already says it */
  .hours{grid-template-columns:1fr;gap:5px}
  .hr{min-height:34px;font-size:.77rem}
  .none{padding:0 4px;font-size:.77rem;text-align:center}
}

.sched-legend{
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:11px;
  font-size:.71rem;color:var(--cinza-2);
}
.sched-legend b{display:inline-flex;align-items:center;gap:5px;font-weight:400}
.sched-legend i{width:9px;height:9px;border-radius:3px;border:1px solid;display:inline-block}
.sched-legend .k-open i{border-color:rgba(201,162,74,.55);background:rgba(201,162,74,.2)}
.sched-legend .k-busy i{border-color:var(--linha);opacity:.5}

@media (min-width:700px){
  .sched-legend{justify-content:flex-start;gap:16px;font-size:.75rem}
}

/* Hover effects only where a pointer exists. On touch screens a
   :hover sticks after the tap and the element stays lit. */
@media (hover:hover) and (pointer:fine){
  .nav a:hover{color:var(--branco);background:var(--preto-3)}
  .hr.free:hover{background:var(--ouro);color:var(--preto);border-color:var(--ouro)}
  .nav-foot a:hover{border-color:var(--ouro);color:var(--ouro);background:none}
  .btn:hover{background:var(--ouro);color:var(--preto)}
  .btn-solid:hover{background:var(--ouro-claro);color:var(--preto)}
  .btn-ghost:hover{background:transparent;border-color:var(--cinza);color:var(--branco)}
  .card:hover{border-color:var(--ouro);transform:translateY(-3px)}
  footer a:hover{color:var(--ouro)}
  .wk-nav button:hover{border-color:var(--ouro);color:var(--ouro)}
  .wk-today:hover{border-color:var(--ouro);color:var(--ouro)}
}

/* =========================================================================
   Touch interaction
   Without a pointer there is no hover to preview an action, so every tappable
   thing has to answer the finger immediately.
   ========================================================================= */

/* kill the grey flash Android paints over links, we draw our own feedback */
a,button,input,select,textarea,summary,label,.tile,.card,.day,.hr{
  -webkit-tap-highlight-color:transparent;
}

/* pressed states — these fire on touch and on mouse alike */
.btn:active{transform:scale(.97)}
.card:active{border-color:var(--ouro);transform:scale(.99)}
.nav a:active{background:var(--preto-3);color:var(--branco)}
.nav-foot a:active,.wk-nav button:active,.wk-today:active{
  border-color:var(--ouro);color:var(--ouro);
}
.day:active:not(:disabled){transform:scale(.96)}
.hr.free:active{background:var(--ouro);color:var(--preto);border-color:var(--ouro);transform:scale(.96)}
.burger:active span{background:var(--ouro)}
.faq summary:active{background:var(--preto-3)}
footer a:active{color:var(--ouro)}

/* anchors must clear the fixed header when jumped to */
html{scroll-behavior:smooth}
[id]{scroll-margin-top:calc(var(--head) + 14px)}

/* the FAQ answer slides instead of snapping */
.faq details p{
  animation:reveal-answer .26s ease;
}
@keyframes reveal-answer{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}
.faq summary{transition:background .18s}
.faq summary::after{transition:transform .22s ease}
.faq details[open] summary::after{transform:rotate(180deg)}

/* day panes fade in when switched */
.pane.on{animation:reveal-answer .22s ease}

/* back to top — appears once the hero is behind you */
.to-top{
  position:fixed;right:14px;bottom:78px;z-index:54;
  width:44px;height:44px;border-radius:var(--r-pill);
  display:grid;place-items:center;
  background:var(--preto-2);border:1px solid var(--linha-2);color:var(--cinza);
  cursor:pointer;font-size:1.1rem;line-height:1;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .25s,visibility .25s,transform .25s;
}
.to-top.on{opacity:1;visibility:visible;transform:none}
.to-top:active{border-color:var(--ouro);color:var(--ouro);transform:scale(.94)}

/* horizontal day strip gets momentum scrolling and snaps to a card */
.days{-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.day{scroll-snap-align:center}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .faq details p,.pane.on{animation:none}
  .btn:active,.card:active,.day:active,.hr.free:active,.to-top:active{transform:none}
}

@media (min-width:700px){
  .to-top{right:24px;bottom:24px;width:46px;height:46px}
  .days{scroll-snap-type:none}
}

/* =========================================================================
   Icons - one 24px SVG set, drawn as CSS masks so every glyph takes its
   colour from the text around it and renders identically on every platform.
   The old Unicode dingbats fell back to a different font per OS and broke
   alignment; these do not.
   ========================================================================= */
:root{
  --i-arrow-r:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h15M13 6l6 6-6 6'/></svg>");
  --i-arrow-u:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20V5M6 11l6-6 6 6'/></svg>");
  --i-chev-l:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 5l-7 7 7 7'/></svg>");
  --i-chev-r:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 5l7 7-7 7'/></svg>");
  --i-whatsapp:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.96-.94 1.16-.17.2-.35.22-.64.08-.3-.15-1.25-.46-2.39-1.47-.88-.79-1.48-1.76-1.65-2.06-.17-.3-.02-.46.13-.6.13-.14.3-.35.45-.53.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.61-.92-2.2-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.47 0 1.46 1.07 2.87 1.22 3.07.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.69.63.71.22 1.36.19 1.87.12.57-.09 1.76-.72 2-1.41.25-.69.25-1.28.18-1.41-.07-.12-.27-.2-.57-.35z'/><path d='M12 2a10 10 0 00-8.53 15.24L2 22.5l5.4-1.42A10 10 0 1012 2zm0 18.2a8.16 8.16 0 01-4.16-1.14l-.3-.18-3.2.84.85-3.12-.19-.32A8.2 8.2 0 1112 20.2z'/></svg>");
  --i-briefcase:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='7.5' width='19' height='13' rx='2.2'/><path d='M8.5 7.5V5.8A1.8 1.8 0 0110.3 4h3.4a1.8 1.8 0 011.8 1.8v1.7M2.5 12.5h19'/></svg>");
  --i-rings:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='15.2' r='4.6'/><circle cx='15.4' cy='15.2' r='4.6'/><path d='M12.2 3.4l2 2.4-2 2.4-2-2.4z'/></svg>");
  --i-clock:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 6.6V12l3.6 2.1'/></svg>");
  --i-nav:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M21.2 2.8L2.8 10.4l8.1 2.7 2.7 8.1z'/></svg>");
  --i-phone:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M21.5 16.9v2.8a2 2 0 01-2.2 2 19.6 19.6 0 01-8.5-3 19.3 19.3 0 01-6-6 19.6 19.6 0 01-3-8.6A2 2 0 013.8 2h2.8a2 2 0 012 1.7c.1.9.3 1.8.6 2.7a2 2 0 01-.5 2.1L7.6 9.7a16 16 0 006 6l1.2-1.1a2 2 0 012.1-.5c.9.3 1.8.5 2.7.6a2 2 0 011.9 2.2z'/></svg>");
  --i-mail:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><rect x='2.5' y='4.5' width='19' height='15' rx='2.2'/><path d='M3 6.5l9 6.4 9-6.4'/></svg>");
  --i-pin:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21.5s7-5.6 7-10.6a7 7 0 10-14 0c0 5 7 10.6 7 10.6z'/><circle cx='12' cy='10.7' r='2.6'/></svg>");
  --i-dot:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6'><circle cx='12' cy='12' r='4.8'/></svg>");
  --i-plus:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
  --i-close:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'><path d='M6 6l12 12M18 6L6 18'/></svg>");
  --i-minus:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'><path d='M5 12h14'/></svg>");
}

/* base: a mask painted with the current text colour */
.ic,
.btn-arrow::after,
.card .more::after,
.to-top::before,
.faq summary::after,
.wk-nav button::before,
.cal-head button::before,
.zap::before,
.foot a[data-cfg="phone"]::before,
.foot a[data-cfg="email"]::before,
.foot a[data-wa]::before{
  content:"";display:inline-block;flex:0 0 auto;
  background-color:currentColor;
  -webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;
}

.ic-briefcase{-webkit-mask-image:var(--i-briefcase);mask-image:var(--i-briefcase)}
.ic-rings{-webkit-mask-image:var(--i-rings);mask-image:var(--i-rings)}
.ic-clock{-webkit-mask-image:var(--i-clock);mask-image:var(--i-clock)}
.ic-nav{-webkit-mask-image:var(--i-nav);mask-image:var(--i-nav)}
.ic-pin{-webkit-mask-image:var(--i-pin);mask-image:var(--i-pin)}
.ic-dot{-webkit-mask-image:var(--i-dot);mask-image:var(--i-dot)}

/* service card badge */
.card-icon{font-size:0}
.card-icon .ic{width:20px;height:20px}

/* "Details" arrow - slides on hover */
.card .more{display:inline-flex;align-items:center;gap:8px}
.card .more::after{width:16px;height:16px;-webkit-mask-image:var(--i-arrow-r);mask-image:var(--i-arrow-r);transition:transform .25s}
.card:hover .more::after{transform:translateX(4px)}

/* button arrow */
.btn-arrow::after{width:17px;height:17px;margin-left:10px;-webkit-mask-image:var(--i-arrow-r);mask-image:var(--i-arrow-r);transition:transform .25s}
.btn-arrow:hover::after{transform:translateX(3px)}

/* floating whatsapp */
.zap{font-size:0}
.zap::before{width:30px;height:30px;-webkit-mask-image:var(--i-whatsapp);mask-image:var(--i-whatsapp)}

/* back to top */
.to-top{font-size:0;display:grid;place-items:center}
.to-top::before{width:19px;height:19px;-webkit-mask-image:var(--i-arrow-u);mask-image:var(--i-arrow-u)}

/* faq toggle: a plus that turns into a minus */
.faq summary::after{width:17px;height:17px;background-color:var(--ouro);-webkit-mask-image:var(--i-plus);mask-image:var(--i-plus);transition:transform .25s}
.faq details[open] summary::after{-webkit-mask-image:var(--i-minus);mask-image:var(--i-minus);transform:rotate(180deg)}

/* week / month arrows */
.wk-nav button,.cal-head button{font-size:0;display:grid;place-items:center}
.wk-nav button::before,.cal-head button::before{
  width:16px;height:16px;
  -webkit-mask-image:var(--i-chev-l);mask-image:var(--i-chev-l);
}
.wk-nav button[data-wk="1"]::before,.cal-head button#nextMonth::before{
  -webkit-mask-image:var(--i-chev-r);mask-image:var(--i-chev-r);
}

/* footer contact list */
.foot a[data-cfg="phone"],.foot a[data-cfg="email"],.foot a[data-wa]{display:inline-flex;align-items:center;gap:9px}
.foot a[data-cfg="phone"]::before,.foot a[data-cfg="email"]::before,.foot a[data-wa]::before{
  width:15px;height:15px;opacity:.72;
}
.foot a[data-cfg="phone"]::before{-webkit-mask-image:var(--i-phone);mask-image:var(--i-phone)}
.foot a[data-cfg="email"]::before{-webkit-mask-image:var(--i-mail);mask-image:var(--i-mail)}
.foot a[data-wa]::before{-webkit-mask-image:var(--i-whatsapp);mask-image:var(--i-whatsapp)}

/* =========================================================================
   Phones only: hero, section heads and footer read centred.
   Everything from 700px up keeps the left-aligned editorial layout.
   ========================================================================= */
@media (max-width:699px){

  /* ---- hero (home photo hero and the inner-page heroes) ---- */
  .hero,.hero-copy{text-align:center}
  .hero h1,.hero .lead,.hero-bg h1,.hero-bg .lead{margin-left:auto;margin-right:auto}
  .hero-cta{justify-content:center}

  /* ---- section heads and the text column of split sections ---- */
  .head-split,.split > div{text-align:center}
  .head-split .lead,.split > div .lead{margin-left:auto;margin-right:auto}
  .quote-hours{justify-content:center}

  /* the quote form itself stays left-aligned: labels above fields */
  .split > form,.reserva-box{text-align:left}

  /* ---- footer ---- */
  .foot{justify-items:center;text-align:center}
  .foot .logo{justify-content:center}
  .foot .logo img{margin-left:auto;margin-right:auto}
  footer ul{justify-items:center}
}