/* ===========================================================================
   PASSEIOS DE VAN FLORIPA — Av. das Nações, 192, Canasvieiras, Florianópolis
   Spec mockup. LEAD, not signed. Nothing here is client work.

   THE SITE HAS TWO PAGES. Their pages-sitemap.xml contains the homepage and
   /contato, and nothing else — every service is an anchor on one long Wix
   scroll. For a business found by typing "transfer aeroporto Florianópolis"
   into a phone, there is nothing to rank and nothing to send anyone.

   THE LOCATION IS THE STORY. Their office is on Av. das Nações in
   Canasvieiras — the north-island neighbourhood where Argentine and
   Uruguayan holidaymakers stay, where Spanish is the working language of
   the commercial strip in season. They run airport transfers from the
   middle of the largest Spanish-speaking inbound market in southern Brazil,
   with a monolingual Portuguese site and a WhatsApp link missing its
   country code. So Spanish is a first-class locale here, not an add-on.

   PALETTE — read off their live stylesheet, NOT sampled from a logo. Their
   logo file is literally named "Logo Passeios de Van Floripa.pdf
   (cortado).png" — a cropped raster of a PDF. [CONFIRM against real
   artwork; there is almost certainly no vector asset.]

     --navy  #112F5B  primary field
     --deep  #081C36  darkest field, hero, footer
     --gold  #C29818  single accent
     --grey  #ADAFB1  their existing neutral
     --off   #F7F8FA  light content bands
     --green #128C4A  confirmation states, kept away from WhatsApp green

   CONTRAST — measured, not assumed (WCAG 2.1 AA / eMAG):
     navy  #112F5B on off #F7F8FA = 12.50:1 ✓ AAA  body + headings
     deep  #081C36 on off         = 16.07:1 ✓ AAA
     off           on navy        = 12.50:1 ✓ AAA  reversed copy
     off           on deep        = 16.07:1 ✓ AAA
     gold  #C29818 on off         =  2.53:1 ✗✗ FAILS badly on light.
     white         on gold        =  2.69:1 ✗✗ FAILS as a button label —
              so the GOLD BUTTON TAKES DEEP-NAVY TEXT (6.34:1 ✓ AA), never
              white. Gold text on a light band uses --gold-deep #7A6008
              (5.64:1 ✓ AA).
     gold          on navy        =  4.93:1 ✓ AA (only just) and
     gold          on deep        =  6.34:1 ✓ AA — gold reads on the dark
              fields. Even so, per the brief it is kept to large display
              type, filled buttons and non-text ornament, never paragraphs.
     grey  #ADAFB1 on off         =  2.07:1 ✗✗ FAILS. Secondary text on light
              uses --slate #5C6469 (5.68:1 ✓ AA). Grey is reversed-only:
              on navy 6.03:1 ✓, on deep 7.76:1 ✓.
     green #128C4A on off         =  4.05:1 ✗ FAILS (just), and
     white         on green       =  4.31:1 ✗ FAILS. Confirmation states use
              --green-deep #0E7A3F (5.10:1 on off ✓, white on it 5.42:1 ✓).
     pale  #B9C8E2 on navy        =  7.86:1 ✓ AAA  reversed secondary
                   on deep        = 10.10:1 ✓ AAA
   =========================================================================== */

:root{
  --navy:#112F5B;
  --deep:#081C36;
  --gold:#C29818;
  --gold-2:#A87F10;
  --gold-deep:#7A6008;     /* gold text on light — 5.64:1 */
  --grey:#ADAFB1;
  --slate:#5C6469;         /* secondary text on light — 5.68:1 */
  --pale:#B9C8E2;          /* secondary text on dark — 7.86:1 / 10.10:1 */
  --off:#F7F8FA;
  --green:#128C4A;
  --green-deep:#0E7A3F;    /* confirmation on light — 5.10:1 */
  --line:rgba(17,47,91,.14);
  --line-d:rgba(194,152,24,.28);

  --grad-hero:linear-gradient(160deg,#081C36 0%,#112F5B 100%);
  --grad-gold:linear-gradient(135deg,#C29818 0%,#A87F10 100%);
  --grad-off:linear-gradient(180deg,#FFFFFF 0%,#F7F8FA 100%);
  --scrim:linear-gradient(0deg,rgba(8,28,54,.96) 0%,rgba(8,28,54,.72) 42%,rgba(8,28,54,.28) 70%,rgba(8,28,54,.1) 100%);

  --disp:"Barlow Condensed","Oswald","Arial Narrow",Arial,sans-serif;
  --sans:"Barlow","Inter","Helvetica Neue",Arial,system-ui,sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;

  --wrap:1300px;
  --gut:clamp(18px,4.4vw,58px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --r:4px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{margin:0;background:var(--off);color:var(--navy);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
@media (max-width:880px){body{padding-bottom:calc(62px + env(safe-area-inset-bottom,0px))}}

h1,h2,h3{font-family:var(--disp);font-weight:700;line-height:1.02;
  letter-spacing:-.005em;margin:0;text-wrap:balance;color:var(--deep);
  text-transform:uppercase}
h1{font-size:clamp(2.3rem,6.4vw,4.6rem)}
h2{font-size:clamp(1.75rem,3.8vw,3rem)}
h3{font-size:clamp(1.06rem,1.9vw,1.42rem)}
h4{font-family:var(--sans);margin:0}
p{margin:0 0 1.05em}
img{max-width:100%;display:block;height:auto}
a{color:var(--navy);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px;background:var(--deep);color:#fff;padding:12px 18px;z-index:999}
.skip:focus{left:8px;top:8px}

/* ── bands ──────────────────────────────────────────────────────────────── */
.sec{padding:clamp(50px,7vw,104px) 0}
.sec--off{background:var(--grad-off)}
.sec--navy{background:var(--navy);color:var(--off)}
.sec--deep{background:var(--grad-hero);color:var(--off)}
.sec--navy h1,.sec--navy h2,.sec--navy h3,
.sec--deep h1,.sec--deep h2,.sec--deep h3{color:#fff}
.sec--navy p,.sec--deep p{color:var(--pale)}

.eyebrow{font-family:var(--sans);font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
  font-weight:700;color:var(--gold-deep);margin:0 0 12px}
.sec--navy .eyebrow,.sec--deep .eyebrow,.hero .eyebrow{color:var(--gold)}
.lede{font-size:clamp(1rem,1.6vw,1.16rem);color:var(--slate);max-width:66ch}
.sec--navy .lede,.sec--deep .lede{color:var(--pale)}
.rule{height:2px;border:0;width:70px;background:linear-gradient(90deg,#C29818 0%,rgba(194,152,24,0) 100%);
  margin:0 0 20px}

/* ── [CONFIRM] markers ──────────────────────────────────────────────────── */
.cfm{background:#FCF0C9;color:#463605;border:1px solid #A98A1E;border-radius:3px;
  padding:.06em .4em;font-size:.88em;font-style:normal;font-family:var(--sans);
  white-space:normal}
.sec--navy .cfm,.sec--deep .cfm,.ftr .cfm,.hero .cfm,.picker .cfm{
  background:#2B3320;color:#F6E7BB;border-color:#8A7430}

.flag{border:1px solid #A98A1E;border-left-width:4px;background:#FCF0C9;color:#463605;
  padding:18px 20px;margin:22px 0;font-size:.94rem;border-radius:var(--r)}
.flag strong{color:#2C2103}
.sec--navy .flag,.sec--deep .flag{background:rgba(194,152,24,.13);color:#F0E3C0;border-color:var(--gold)}
.sec--navy .flag strong,.sec--deep .flag strong{color:#fff}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 28px;border:0;cursor:pointer;text-decoration:none;font:inherit;
  font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;border-radius:var(--r);
  background:var(--grad-gold);color:var(--deep);       /* deep on gold — 6.34:1 */
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.08);
  box-shadow:0 14px 26px -14px rgba(168,127,16,.95)}
.btn svg{transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn--navy{background:var(--navy);color:#fff}
.btn--navy:hover{box-shadow:0 14px 26px -14px rgba(17,47,91,.9)}
.btn--out{background:none;border:1.5px solid var(--navy);color:var(--navy)}
.btn--out:hover{background:rgba(17,47,91,.07);box-shadow:none}
.sec--navy .btn--out,.sec--deep .btn--out,.hero .btn--out,.ftr .btn--out{
  border-color:var(--gold);color:#fff}
.sec--navy .btn--out:hover,.sec--deep .btn--out:hover{background:rgba(194,152,24,.16)}
.btn--sm{padding:10px 17px;font-size:.65rem}
[data-unconfirmed]{opacity:.62;cursor:not-allowed;filter:grayscale(.4)}

/* ── topbar ─────────────────────────────────────────────────────────────── */
.topbar{background:var(--deep);color:var(--grey);font-size:.77rem}
.topbar__in{max-width:var(--wrap);margin:0 auto;padding:8px var(--gut);
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.topbar a{color:#fff;text-decoration:none}
.topbar a:hover{color:var(--gold)}
.topbar .tel{font-weight:700;letter-spacing:.03em}
.langs{margin-left:auto;display:flex;gap:2px;align-items:center}
.langs a{padding:3px 7px;color:#8794A6;text-decoration:none;letter-spacing:.1em;font-weight:700}
.langs a[aria-current="true"]{color:var(--gold)}
.langs i{font-style:normal;color:#2E3F55}

/* ── header ─────────────────────────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:60;background:rgba(8,28,54,.96);
  border-bottom:1px solid rgba(194,152,24,.2);transition:box-shadow .3s var(--ease)}
@supports (backdrop-filter:blur(6px)){.hdr{backdrop-filter:blur(9px)}}
.hdr.is-stuck{box-shadow:0 3px 22px -10px rgba(0,0,0,.8)}
.hdr__in{max-width:var(--wrap);margin:0 auto;padding:13px var(--gut);
  display:flex;align-items:center;gap:16px;transition:padding .3s var(--ease)}
.hdr.is-stuck .hdr__in{padding-block:8px}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff}
.mark svg{width:38px;height:38px;flex:0 0 auto}
.mark div{display:flex;flex-direction:column;line-height:1}
.mark b{font-family:var(--disp);font-size:1.2rem;letter-spacing:.02em;text-transform:uppercase}
.mark span{font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-top:5px}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(9px,1.3vw,20px)}
.nav a{color:#E7ECF3;text-decoration:none;font-size:.74rem;letter-spacing:.09em;
  text-transform:uppercase;font-weight:600;padding:6px 0;
  border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--gold);color:#fff}
.burger{display:none;margin-left:auto;background:none;border:0;padding:9px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:#fff;margin:6px 0;
  transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media (max-width:1060px){
  .burger{display:block}
  .nav{position:fixed;inset:0;background:var(--deep);flex-direction:column;
    justify-content:center;gap:20px;transform:translateY(-100%);
    transition:transform .4s var(--ease);margin:0;z-index:70}
  .nav.is-open{transform:none}
  .nav a{font-size:1.02rem;font-family:var(--disp)}
}

/* ── HERO ───────────────────────────────────────────────────────────────── */
.hero{position:relative;background:var(--deep);overflow:hidden;
  min-height:clamp(430px,64svh,660px);display:flex;align-items:center}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.hero::after{content:"";position:absolute;inset:0;background:var(--scrim)}
.hero__in{position:relative;z-index:2;padding-block:clamp(52px,8vw,110px)}
.hero h1{color:#fff;max-width:17ch}
.hero p{color:var(--pale);max-width:48ch;margin:18px 0 0;font-size:clamp(1rem,1.7vw,1.2rem)}
.hero__acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ── ROUTE PICKER — the conversion element ──────────────────────────────── */
.picker{background:#fff;border-top:4px solid var(--gold);border-radius:var(--r);
  box-shadow:0 30px 60px -34px rgba(8,28,54,.7);padding:clamp(20px,2.6vw,30px);
  position:relative;z-index:5}
.picker--float{margin-top:clamp(-70px,-5vw,-40px)}
.picker h2{font-size:clamp(1.2rem,2vw,1.6rem);margin-bottom:6px}
.picker__grid{display:grid;gap:14px;margin-top:18px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.picker__grid .full{grid-column:1/-1}
.picker__sub{display:none;gap:14px;margin-top:14px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.picker__sub.is-on{display:grid}
.picker__acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:18px}
.picker__out{margin-top:16px;background:var(--off);border:1px solid var(--line);
  border-left:4px solid var(--green-deep);border-radius:var(--r);padding:16px 18px;
  font-size:.9rem;white-space:pre-wrap;font-family:var(--mono);color:var(--navy)}
.picker__out[hidden]{display:none}

/* ── trust strip ────────────────────────────────────────────────────────── */
.trust{display:grid;gap:1px;background:rgba(194,152,24,.24);list-style:none;margin:0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.trust li{background:var(--navy);padding:26px 20px}
.trust li.is-open{background:var(--deep)}
.trust svg{width:26px;height:26px;fill:none;stroke:var(--gold);stroke-width:1.6;
  margin-bottom:13px;display:block}
.trust b{display:block;font-family:var(--disp);font-size:1.14rem;color:#fff;
  text-transform:uppercase;margin-bottom:6px;letter-spacing:.01em}
.trust span{font-size:.82rem;color:var(--pale);line-height:1.48;display:block}

/* ── route table ────────────────────────────────────────────────────────── */
.tablewrap{overflow-x:auto;margin-top:26px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff}
table.routes{width:100%;border-collapse:collapse;font-size:.92rem;min-width:660px}
table.routes caption{text-align:left;padding:16px 18px;font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:700;color:var(--slate);border-bottom:1px solid var(--line)}
table.routes th,table.routes td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line)}
table.routes thead th{background:var(--navy);color:#fff;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;border-bottom:0}
table.routes tbody th{font-weight:700;color:var(--deep);font-size:.95rem}
table.routes tbody tr:nth-child(odd) td,table.routes tbody tr:nth-child(odd) th{background:#FBFCFD}
table.routes tbody tr.is-home th{border-left:4px solid var(--gold)}
table.routes tbody tr:hover td,table.routes tbody tr:hover th{background:#F1F5FA}
table.routes td .cfm{white-space:nowrap}
.tnote{font-size:.85rem;color:var(--slate);margin-top:16px;max-width:80ch}

/* ── fleet cards ────────────────────────────────────────────────────────── */
.fleet{display:grid;gap:clamp(14px,2vw,22px);list-style:none;margin:28px 0 0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.veh{background:var(--deep);border:1px solid rgba(194,152,24,.25);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.veh:hover{transform:translateY(-4px);box-shadow:0 26px 46px -28px rgba(0,0,0,.9)}
.veh__art{background:linear-gradient(160deg,#0C2342 0%,#153A6E 100%);padding:26px 22px 10px}
.veh__art svg{width:100%;height:auto;display:block}
.veh__b{padding:20px 22px 24px;display:flex;flex-direction:column;gap:14px;flex:1}
.veh__b h3{color:#fff}
.veh__b p{font-size:.87rem;color:var(--pale);margin:0}
.spec{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.spec li{display:flex;align-items:center;gap:8px;background:rgba(194,152,24,.14);
  border:1px solid rgba(194,152,24,.34);border-radius:999px;padding:7px 13px;
  font-size:.78rem;color:#F3E7C4;font-weight:600}
.spec svg{width:16px;height:16px;fill:none;stroke:var(--gold);stroke-width:1.7;flex:0 0 auto}
.veh .btn{align-self:flex-start;margin-top:auto}

/* ── compare band ───────────────────────────────────────────────────────── */
.cmp{display:grid;gap:1px;background:var(--line);list-style:none;margin:26px 0 0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.cmp li{background:#fff;padding:24px 22px}
.cmp b{display:block;font-family:var(--disp);font-size:1.14rem;text-transform:uppercase;
  margin-bottom:8px;color:var(--deep)}
.cmp span{font-size:.88rem;color:var(--slate);line-height:1.55}
.cmp svg{width:22px;height:22px;fill:none;stroke:var(--green-deep);stroke-width:2;margin-bottom:12px}

/* ── steps / arrivals procedure ─────────────────────────────────────────── */
.how{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  list-style:none;margin:26px 0 0;padding:0;background:rgba(194,152,24,.24);counter-reset:s}
.how li{background:var(--navy);padding:26px 22px;counter-increment:s;color:var(--pale)}
.how li::before{content:"0" counter(s);display:block;font-family:var(--mono);color:var(--gold);
  font-size:.78rem;letter-spacing:.1em;margin-bottom:10px}
.how b{display:block;font-family:var(--disp);font-size:1.14rem;color:#fff;
  text-transform:uppercase;margin-bottom:7px}
.how span{font-size:.87rem;line-height:1.5;display:block}

.diagram{width:100%;height:auto;background:var(--deep);border-radius:var(--r);display:block;
  border:1px solid rgba(194,152,24,.25)}
.diagram .ln{stroke:var(--gold);stroke-width:2;fill:none}
.diagram .dash{stroke:rgba(185,200,226,.5);stroke-width:1.6;fill:none;stroke-dasharray:5 5}
.diagram .bx{fill:rgba(185,200,226,.09);stroke:rgba(194,152,24,.4);stroke-width:1.4}
.diagram .dot{fill:var(--gold)}
.diagram text{font:600 12px "Barlow",Arial,sans-serif;fill:#DCE4F0}
.diagram text.sm{font-size:10.5px;fill:#9FB0C8}

/* ── trio / split / gallery ─────────────────────────────────────────────── */
.split{display:grid;gap:clamp(26px,4vw,56px);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){.split{grid-template-columns:1fr 1fr}}
.split figure{margin:0;border-radius:var(--r);overflow:hidden}
.split img{width:100%;aspect-ratio:4/3;object-fit:cover}

.trio{display:grid;gap:clamp(14px,2vw,22px);list-style:none;margin:28px 0 0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.trio li{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.sec--navy .trio li,.sec--deep .trio li{background:rgba(255,255,255,.05);
  border-color:rgba(194,152,24,.25)}
.trio img{width:100%;aspect-ratio:16/9;object-fit:cover}
.trio div{padding:20px 22px}
.trio h3{margin-bottom:8px}
.trio p{font-size:.88rem;margin:0}

.gal{display:grid;gap:10px;list-style:none;margin:26px 0 0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(50% - 5px,220px),1fr))}
.gal figure{margin:0;position:relative;border-radius:var(--r);overflow:hidden}
.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s var(--ease)}
.gal figure:hover img{transform:scale(1.06)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;background:rgba(8,28,54,.86);
  color:#DCE4F0;font-size:.64rem;letter-spacing:.08em;padding:8px 10px;text-transform:uppercase}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq{margin-top:26px;border-top:1px solid var(--line)}
.faq__i{border-bottom:1px solid var(--line)}
.faq__h{width:100%;background:none;border:0;cursor:pointer;font:inherit;text-align:left;
  padding:19px 4px;display:flex;align-items:center;gap:14px;color:inherit}
.faq__h b{font-family:var(--disp);font-size:clamp(1.02rem,1.9vw,1.28rem);flex:1;
  text-transform:uppercase;color:var(--deep)}
.sec--navy .faq__h b,.sec--deep .faq__h b{color:#fff}
.faq__h .cx{width:14px;height:14px;flex:0 0 auto;position:relative}
.faq__h .cx::before,.faq__h .cx::after{content:"";position:absolute;background:var(--gold-deep);
  transition:transform .3s var(--ease)}
.sec--navy .faq__h .cx::before,.sec--navy .faq__h .cx::after,
.sec--deep .faq__h .cx::before,.sec--deep .faq__h .cx::after{background:var(--gold)}
.faq__h .cx::before{inset:6px 0;height:2px}
.faq__h .cx::after{inset:0 6px;width:2px}
.faq__h[aria-expanded="true"] .cx::after{transform:scaleY(0)}
.faq__p{padding:0 4px 22px;font-size:.93rem;color:var(--slate);max-width:80ch}
.sec--navy .faq__p,.sec--deep .faq__p{color:var(--pale)}
.faq__p[hidden]{display:none}

/* ── reviews (empty by instruction) ─────────────────────────────────────── */
.revs{display:grid;gap:clamp(14px,2vw,20px);list-style:none;margin:26px 0 0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.revs li{border:1px dashed #A98A1E;background:#FCF0C9;color:#463605;
  border-radius:var(--r);padding:24px;font-size:.9rem}
.revs h3{color:#2C2103;margin-bottom:8px}

/* ── forms ──────────────────────────────────────────────────────────────── */
.form{display:grid;gap:14px;max-width:660px}
.f2{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width:560px){.f2{grid-template-columns:1fr}}
label{display:block;font-size:.62rem;letter-spacing:.17em;text-transform:uppercase;
  font-weight:700;color:var(--slate);margin-bottom:6px}
.sec--navy label,.sec--deep label{color:var(--pale)}
input,select,textarea{width:100%;padding:13px 14px;font:inherit;font-size:.95rem;
  border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:var(--r);
  transition:border-color .2s,box-shadow .2s}
.sec--navy input,.sec--navy select,.sec--navy textarea,
.sec--deep input,.sec--deep select,.sec--deep textarea{
  background:rgba(255,255,255,.08);border-color:rgba(194,152,24,.3);color:#fff}
.sec--navy option,.sec--deep option{color:var(--navy)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(194,152,24,.28)}
textarea{min-height:96px;resize:vertical}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:.85rem}
.consent input{width:auto;margin-top:4px;flex:0 0 auto;accent-color:#112F5B}
.consent label{text-transform:none;letter-spacing:0;font-size:.85rem;font-weight:400;
  color:var(--slate);margin:0}
.sec--navy .consent label,.sec--deep .consent label{color:var(--pale)}
.formnote{font-size:.8rem;color:var(--slate)}
.sec--navy .formnote,.sec--deep .formnote,.picker .formnote{color:var(--slate)}
.sec--navy .formnote,.sec--deep .formnote{color:var(--pale)}

.tabs{display:inline-flex;background:var(--off);border:1px solid var(--line);
  border-radius:999px;padding:4px;gap:2px;margin-bottom:18px}
.tabs button{border:0;background:none;cursor:pointer;font:inherit;font-size:.72rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);
  padding:9px 18px;border-radius:999px;transition:background .25s,color .25s}
.tabs button[aria-selected="true"]{background:var(--navy);color:#fff}

/* ── footer ─────────────────────────────────────────────────────────────── */
.ftr{background:var(--grad-hero);color:var(--pale);padding:clamp(46px,7vw,88px) 0 30px;
  font-size:.88rem;border-top:2px solid var(--gold)}
.ftr a{color:#fff;text-decoration:none}
.ftr a:hover{color:var(--gold)}
.ftr h4{color:#fff;font-family:var(--disp);font-size:.9rem;letter-spacing:.14em;
  text-transform:uppercase;margin:0 0 14px;font-weight:700}
.ftr__grid{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:8px}
.ftr__legal{border-top:1px solid rgba(194,152,24,.26);margin-top:40px;padding-top:24px;
  font-size:.77rem;color:#8B99AC;display:grid;gap:9px}

/* ── sticky bar + WhatsApp ──────────────────────────────────────────────── */
.stick{position:fixed;left:0;right:0;bottom:0;z-index:65;display:none;
  grid-template-columns:1fr 1fr;background:var(--deep);
  padding-bottom:env(safe-area-inset-bottom,0px);
  box-shadow:0 -3px 16px -6px rgba(0,0,0,.7)}
@media (max-width:880px){.stick{display:grid}}
.stick a{display:flex;align-items:center;justify-content:center;gap:8px;height:62px;
  text-decoration:none;font-size:.71rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase}
.stick .p{background:var(--grad-gold);color:var(--deep)}
.stick .w{background:linear-gradient(135deg,#25D366 0%,#128C7E 100%);color:#fff}
.stick svg{width:20px;height:20px;fill:currentColor}

.wa{position:fixed;right:16px;bottom:16px;z-index:66;width:54px;height:54px;border-radius:50%;
  border:0;cursor:pointer;background:linear-gradient(135deg,#25D366 0%,#128C7E 100%);
  display:grid;place-items:center;box-shadow:0 10px 26px -8px rgba(0,0,0,.5);
  transition:transform .3s var(--ease)}
.wa:hover{transform:scale(1.08)}
.wa svg{width:27px;height:27px;fill:#0B2E17}
@media (max-width:880px){.wa{bottom:calc(72px + env(safe-area-inset-bottom,0px))}}

/* ── cookie banner ──────────────────────────────────────────────────────── */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--deep);color:var(--pale);
  padding:18px var(--gut);border-top:3px solid var(--gold);font-size:.89rem;
  transform:translateY(115%);transition:transform .45s var(--ease)}
.ck.is-on{transform:none}
.ck__in{max-width:1140px;margin:0 auto;display:grid;gap:14px}
.ck h4{margin:0;color:#fff;font-family:var(--disp);font-size:1.1rem;text-transform:uppercase}
.ck__opts{display:flex;flex-wrap:wrap;gap:18px;font-size:.85rem}
.ck__opts label{text-transform:none;letter-spacing:0;color:var(--pale);font-weight:400;
  display:flex;gap:8px;align-items:center;margin:0;font-size:.85rem}
.ck__opts input{width:auto;accent-color:#C29818}
.ck__btns{display:flex;flex-wrap:wrap;gap:9px}
.ck__btns .btn{padding:11px 19px;font-size:.64rem}

/* ── reveals ────────────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(18px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.rv.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;
    animation-iteration-count:1!important}
}

@media print{.hdr,.topbar,.wa,.stick,.ck{display:none}body{background:#fff;color:#000}
  .tablewrap{overflow:visible}}

/* ---------------------------------------------------- responsive tables */
/* A data table with several prose columns has a min-content width far
   wider than a phone. Without its own scroll box it widens the whole
   document and the page scrolls sideways. */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tbl-scroll>table{margin:0}

/* ------------------------------------------------- overflow guard
   Nothing may widen the document. Form controls and replaced elements
   cap at their container; flex/grid children get min-width:0 so they
   are allowed to shrink below their content width; and the header's
   right-hand cluster wraps on a phone rather than pushing the page
   sideways. */
input,select,textarea,img,svg,video,iframe{max-width:100%}
.form,.mapwrap,.split__t,.hdr__r,.head-right{min-width:0}
.form,.mapwrap,.split__t{max-width:100%}
@media (max-width:820px){
  .hdr__r,.head-right{flex-wrap:wrap;justify-content:flex-end;row-gap:.4rem}
}

/* ------------------------------------------- offcanvas-visibility-guard
   backdrop-filter on the sticky header makes the header the containing
   block for its position:fixed children, so this panel's top:0 is the
   header's top edge and not the viewport's. translateY(-100%) therefore
   leaves its bottom edge inside the screen at scroll 0. Visibility takes
   it out of the render tree while closed; the delay lets the slide finish
   before it disappears. */
@media (max-width:1060px){
  .nav{visibility:hidden;transition:transform .32s cubic-bezier(.22,.9,.3,1),
    visibility 0s linear .32s}
  .nav.is-open{visibility:visible;transition:transform .32s cubic-bezier(.22,.9,.3,1),
    visibility 0s}
}

/* ------------------------------------------- legal-header-layout
   The LGPD privacy page is generated from a shared template and uses
   .hdr__cta for its header cluster. Most stylesheets in this batch define
   .hdr__r or .head-cta instead, so on those sites the cluster had no
   layout at all - block flow, and on a long brand name it ran off the
   screen. This defines it, keeps the back-link on one line, and lets the
   row wrap before anything overflows. */
.hdr__cta,.head-cta{display:flex;align-items:center;gap:.6rem;
  flex-wrap:wrap;justify-content:flex-end;min-width:0;max-width:100%}
.hdr__cta .btn,.head-cta .btn{white-space:nowrap}
.hdr__cta .lang,.head-cta .lang{display:inline-flex;gap:.35rem;flex:0 0 auto}
@media (max-width:560px){
  .hdr__in,.head-in{flex-wrap:wrap;row-gap:.55rem}
  .hdr__in>.brand,.head-in>.brand{min-width:0;max-width:100%}
  .brand__n{white-space:normal;overflow-wrap:anywhere}
  .hdr__cta,.head-cta{width:100%;justify-content:flex-start}
}
