/* ===========================================================================
   OCEAN RIDERS KITE SURF — Lagoa da Conceição, Florianópolis, SC
   Spec mockup. LEAD, not signed. Nothing here is client work.

   They have 14,000 Instagram followers, 522 posts and NO WEBSITE. That
   asymmetry is the whole pitch, and this build is scrupulously honest about
   it: every course, hour count, price, certification, registration and hour
   of operation renders as a bordered [CONFIRM] chip in the exact position the
   real value will occupy. The half-empty course table IS the argument.

   PALETTE IS PROPOSED — no website exists, so nothing is extracted from brand
   assets. [CONFIRM against their logo.]

     --red   #E63329  kite red — primary, CTAs, price lines
     --cyan  #12B0D8  wind cyan — level chips, condition indicators
     --sky   #F7FBFD  page base
     --deep  #0D3B4F  headlines, footer, dark bands
     --teal  #2E8C8C  lagoon/location sections
     --ink   #12181C  body text

   CONTRAST — measured, not assumed (WCAG 2.1 AA / eMAG). The brief asked for
   both accent colours to be checked rather than trusted. Both fail:
     red  #E63329 on sky  #F7FBFD =  4.14:1 ✗ FAILS body (needs 4.5)
     white         on red          =  4.31:1 ✗ FAILS as a button label
     ink  #12181C on red           =  4.15:1 ✗ also short
           -> kite red is a LARGE-TYPE and FILL colour: >=24px / >=19px bold,
              where 4.14:1 clears the 3:1 large-text threshold. Body-size red
              text uses --red-deep #B01E16 = 6.63:1 ✓ AA, and every filled
              button is --red-btn #C42219, white label at 5.85:1 ✓ AA.
     cyan #12B0D8 on sky           =  2.45:1 ✗✗ FAILS everything on light.
     ink           on cyan         =  7.01:1 ✓ AAA
           -> wind cyan is a FILL only on light grounds, and anything sitting
              on it takes INK text. Cyan-coloured text on sky uses
              --cyan-deep #0A6E88 = 5.61:1 ✓ AA.
     cyan          on deep         =  4.69:1 ✓ AA — cyan IS usable reversed.
     teal #2E8C8C on sky           =  3.85:1 ✗ FAILS body. Large type and fills
              only; body-size teal text uses --teal-deep #1F6060 = 6.96:1 ✓ AA.
     deep #0D3B4F on sky           = 11.49:1 ✓ AAA  headlines
     ink           on sky          = 17.19:1 ✓ AAA  body
     sky           on deep         = 11.49:1 ✓ AAA  reversed copy
     sky           on teal         =  3.85:1 ✗ — so reversed copy on the teal
              band uses white on --teal-deep (7.24:1 ✓ AAA) instead.

   The diagonal sweeps sit BEHIND content and never reduce text contrast.
   =========================================================================== */

:root{
  --red:#E63329;
  --red-btn:#C42219;       /* filled button — white label 5.85:1 */
  --red-deep:#B01E16;      /* body-size red text on light — 6.63:1 */
  --red-warm:#FF8A5B;
  --cyan:#12B0D8;
  --cyan-deep:#0A6E88;     /* body-size cyan text on light — 5.61:1 */
  --sky:#F7FBFD;
  --deep:#0D3B4F;
  --teal:#2E8C8C;
  --teal-deep:#1F6060;
  --ink:#12181C;
  --ink-soft:#4A555B;
  --line:rgba(18,24,28,.15);

  --grad-hero:linear-gradient(200deg,rgba(13,59,79,.25) 0%,rgba(13,59,79,.88) 100%);
  --grad-price:linear-gradient(135deg,#E63329 0%,#FF8A5B 100%);
  --grad-sweep:linear-gradient(28deg,#12B0D8 0%,rgba(247,251,253,0) 62%);
  --grad-lagoon:linear-gradient(28deg,#2E8C8C 0%,rgba(247,251,253,0) 70%);
  --grad-deep:linear-gradient(200deg,#0D3B4F 0%,#12B0D8 220%);

  --wrap:1260px;
  --gut:clamp(18px,4.5vw,56px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --r:10px;
}

*,*::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(--sky);color:var(--ink);
  font-family:"Barlow","Inter","Helvetica Neue",Arial,system-ui,sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
@media (max-width:768px){body{padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}}

/* wide geometric, tight uppercase headlines */
h1,h2,h3,h4{font-family:"Barlow Condensed","Barlow",Arial,sans-serif;font-weight:700;
  line-height:1.02;letter-spacing:.005em;text-transform:uppercase;margin:0;text-wrap:balance;
  color:var(--deep)}
h1{font-size:clamp(2.4rem,6.4vw,4.8rem)}
h2{font-size:clamp(1.85rem,4.2vw,3.1rem)}
h3{font-size:clamp(1.06rem,1.9vw,1.35rem)}
p{margin:0 0 1.05em}
img{max-width:100%;display:block;height:auto}
a{color:var(--cyan-deep);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--red-btn);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}

.eyebrow{font-family:"Barlow",Arial,sans-serif;font-size:.68rem;letter-spacing:.28em;
  text-transform:uppercase;font-weight:700;color:var(--red-deep);margin:0 0 14px}
.sec--deep .eyebrow,.sec--teal .eyebrow{color:#8FE0F2}
.lede{font-size:clamp(1rem,1.6vw,1.2rem);color:var(--ink-soft);max-width:66ch}
.sec--deep .lede,.sec--teal .lede{color:#CFE3E9}
.sec{position:relative;padding:clamp(52px,7.5vw,108px) 0;overflow:hidden}
/* the diagonal sweep — behind content, never over text */
.sec--sweep::before{content:"";position:absolute;inset:-30% -10% auto -10%;height:120%;
  background:var(--grad-sweep);opacity:.14;pointer-events:none;z-index:0}
.sec--lagoon::before{content:"";position:absolute;inset:-30% -10% auto -10%;height:120%;
  background:var(--grad-lagoon);opacity:.18;pointer-events:none;z-index:0}
.sec > *{position:relative;z-index:1}
.sec--deep{background:var(--grad-deep);color:var(--sky)}
.sec--deep h2,.sec--deep h3{color:#fff}
.sec--teal{background:var(--teal-deep);color:var(--sky)}   /* teal-deep: white 7.24:1 */
.sec--teal h2,.sec--teal h3{color:#fff}
.rule{height:4px;width:62px;border:0;background:var(--grad-price);margin:0 0 18px;border-radius:2px}
.sec--deep .rule,.sec--teal .rule{background:linear-gradient(135deg,#12B0D8 0%,#8FE0F2 100%)}

/* very large numerals — wind, hours, level, price are display objects */
.num{font-family:"Barlow Condensed","Barlow",Arial,sans-serif;font-weight:700;line-height:.92;
  letter-spacing:-.01em;font-size:clamp(2.2rem,5vw,3.6rem);color:var(--deep)}
.sec--deep .num,.sec--teal .num{color:#fff}

/* ── [CONFIRM] markers — bordered chips, in the exact slot the value goes ── */
.cfm{background:#FFF3D2;color:#54410A;border:1px solid #C9A22C;border-radius:4px;
  padding:.08em .44em;font-size:.88em;font-style:normal;font-family:"Barlow",Arial,sans-serif}
.sec--deep .cfm,.sec--teal .cfm{background:#33402F;color:#F6E7BC;border-color:#8E7A32}
/* the blank slot: a bordered box where a real number will sit */
.slot{display:inline-flex;align-items:center;justify-content:center;min-width:86px;
  border:2px dashed #C9A22C;background:#FFF8E6;color:#54410A;border-radius:6px;
  padding:8px 14px;font-family:"Barlow",Arial,sans-serif;font-size:.8rem;font-weight:700;
  letter-spacing:.04em}
.sec--deep .slot,.sec--teal .slot{border-color:#8E7A32;background:rgba(255,255,255,.08);color:#F6E7BC}

.flag{border:1px solid var(--red-deep);border-left-width:4px;background:#FDEDEB;
  padding:18px 20px;margin:24px 0;font-size:.94rem;color:#5A150F;border-radius:var(--r)}
.flag strong{color:#3A0A06}
.flag--cyan{border-color:var(--cyan-deep);background:#E6F4F9;color:#0A3140}
.flag--cyan strong{color:#052029}
.sec--deep .flag,.sec--teal .flag{background:rgba(255,255,255,.09);color:#D5E4EA;border-color:#8FE0F2}
.sec--deep .flag strong,.sec--teal .flag strong{color:#fff}

/* =========================== TOPBAR ====================================== */
.topbar{background:var(--deep);color:#B9CCD4;font-size:.78rem}
.topbar__in{max-width:var(--wrap);margin:0 auto;padding:9px var(--gut);
  display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
.topbar a{color:#E4EEF2;text-decoration:none}
.topbar a:hover{color:#8FE0F2}
.windchip{display:inline-flex;gap:8px;align-items:center}
.windchip svg{width:17px;height:17px;fill:#8FE0F2}
.langs{margin-left:auto;display:flex;gap:3px;align-items:center}
.langs a{padding:3px 6px;color:#8FA3AC;text-decoration:none;letter-spacing:.1em}
.langs a[aria-current="true"]{color:#8FE0F2;font-weight:700}
.langs i{font-style:normal;color:#37505C}

/* =========================== HEADER ====================================== */
.hdr{position:sticky;top:0;z-index:60;background:rgba(247,251,253,.97);
  border-bottom:1px solid var(--line);transition:box-shadow .3s var(--ease)}
@supports (backdrop-filter:blur(6px)){.hdr{backdrop-filter:blur(8px)}}
.hdr.is-stuck{box-shadow:0 2px 18px -8px rgba(13,59,79,.4)}
.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:9px}
.mark{display:flex;flex-direction:column;line-height:1.02;text-decoration:none;color:var(--deep)}
.mark b{font-family:"Barlow Condensed",Arial,sans-serif;font-size:1.36rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase}
.mark span{font-family:"Barlow",Arial,sans-serif;font-size:.54rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:5px}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(10px,1.6vw,24px)}
.nav a{color:var(--ink);text-decoration:none;font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover{border-bottom-color:var(--red);color:var(--red-deep)}
.burger{display:none;margin-left:auto;background:none;border:0;padding:9px;cursor:pointer}
.burger span{display:block;width:24px;height:2px;background:var(--deep);margin:5px 0;border-radius:2px;
  transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1000px){
  .burger{display:block}
  .nav{position:fixed;inset:0;background:var(--sky);flex-direction:column;
    justify-content:center;gap:22px;transform:translateY(-100%);
    transition:transform .4s var(--ease);margin:0;z-index:70}
  .nav.is-open{transform:none}
  .nav a{font-size:1.16rem}
}

/* =========================== BUTTONS ===================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border:0;cursor:pointer;text-decoration:none;font:inherit;
  font-family:"Barlow",Arial,sans-serif;font-size:.8rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;border-radius:var(--r);
  background:var(--red-btn);color:#fff;         /* 5.85:1, not raw kite red */
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.16);
  box-shadow:0 14px 28px -14px rgba(196,34,25,.9)}
.btn svg{transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
/* cyan fill always takes INK text — white on cyan is 2.55:1 */
.btn--cyan{background:var(--cyan);color:var(--ink)}
.btn--out{background:none;border:1.5px solid var(--deep);color:var(--deep)}
.btn--out:hover{border-color:var(--red-btn);color:var(--red-deep);
  background:rgba(230,51,41,.07);box-shadow:none}
.sec--deep .btn--out,.sec--teal .btn--out,.hero .btn--out{border-color:rgba(255,255,255,.65);color:#fff}
.btn--sm{padding:11px 19px;font-size:.68rem}
[data-unconfirmed]{opacity:.62;cursor:not-allowed;filter:grayscale(.4)}

/* =========================== HERO ======================================== */
.hero{position:relative;min-height:86svh;display:flex;align-items:flex-end;
  background:var(--deep);overflow:hidden;padding-bottom:clamp(96px,13vw,150px)}
.hero__img{position:absolute;inset:-6% 0 0;width:100%;height:112%;object-fit:cover;will-change:transform}
.hero__scrim{position:absolute;inset:0;background:var(--grad-hero)}
/* the kite silhouette is DRAWN — there is no kite photograph in the library,
   and a drawn canopy is honest where a stock surf shot would not be */
.kite{position:absolute;top:12%;right:14%;width:min(24vw,220px);z-index:2;
  animation:drift 26s ease-in-out infinite alternate;pointer-events:none}
.kite svg{width:100%;height:auto;display:block}
.kite .canopy{fill:rgba(230,51,41,.9);stroke:#fff;stroke-width:1.6}
.kite .lines{stroke:rgba(255,255,255,.55);stroke-width:1.1;fill:none}
@keyframes drift{
  from{transform:translate3d(0,0,0) rotate(-4deg)}
  to{transform:translate3d(-9vw,5vh,0) rotate(6deg)}
}
.hero__in{position:relative;z-index:3;width:100%;max-width:var(--wrap);margin:0 auto;
  padding:0 var(--gut)}
.hero h1{color:#fff;max-width:16ch}
.hero__sub{font-family:"Barlow",Arial,sans-serif;color:#D5E4EA;font-size:clamp(1rem,1.8vw,1.24rem);
  margin:18px 0 28px;max-width:52ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}

/* =========================== STAT STRIP ================================== */
/* Four bordered blanks. These are the four numbers a prospective student
   wants, and none of them exists anywhere public today. */
.stats{position:relative;z-index:5;max-width:var(--wrap);margin:clamp(-118px,-11vw,-80px) auto 0;
  padding-inline:var(--gut)}
.stats__in{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 26px 58px -32px rgba(13,59,79,.55);
  display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  overflow:hidden;background:var(--line)}
.stats__in > div{background:#fff;padding:24px 20px;text-align:center}
.stats__in .slot{margin-bottom:10px}
.stats__in span{display:block;font-family:"Barlow",Arial,sans-serif;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);line-height:1.4}

/* =========================== PROGRESSION RAIL ============================ */
.prog{display:grid;gap:2px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  list-style:none;margin:26px 0 0;padding:0;background:var(--line)}
.prog li{background:#fff;padding:22px 18px;display:grid;gap:9px;align-content:start;
  border-top:4px solid var(--cyan)}
.prog li:last-child{border-top-color:var(--red)}
.prog b{font-family:"Barlow Condensed",Arial,sans-serif;font-size:1.2rem;text-transform:uppercase;
  letter-spacing:.04em;color:var(--deep)}
.prog span{font-size:.85rem;color:var(--ink-soft);line-height:1.45}

/* =========================== COURSE CARDS ================================ */
.courses{display:grid;gap:clamp(14px,2vw,22px);list-style:none;margin:26px 0 0;padding:0;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr))}
@media (max-width:640px){
  .courses{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px}
  .courses li{flex:0 0 82vw;scroll-snap-align:start}
}
.course{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s}
.course:hover{transform:translateY(-4px);box-shadow:0 20px 40px -24px rgba(13,59,79,.5)}
.course figure{margin:0;aspect-ratio:16/10;overflow:hidden}
.course img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.course:hover img{transform:scale(1.05)}
.course__b{padding:18px;display:flex;flex-direction:column;gap:11px;flex:1}
.course__b h3{font-size:1.1rem}
.chipset{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.chipset li{font-family:"Barlow",Arial,sans-serif;font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;padding:5px 10px;border-radius:999px;
  background:rgba(18,176,216,.18);color:#0A3140}
.priceline{margin-top:auto;border-top:1px solid var(--line);padding-top:13px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.priceline .from{font-family:"Barlow",Arial,sans-serif;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);font-weight:700}
.course .btn{align-self:flex-start}

/* =========================== STEPS ======================================= */
.steps{display:grid;gap:2px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  list-style:none;margin:26px 0 0;padding:0;background:rgba(255,255,255,.2);counter-reset:s}
.steps li{background:rgba(13,59,79,.55);padding:26px 22px;counter-increment:s}
.steps li::before{content:"0" counter(s);display:block;font-family:"Barlow Condensed",Arial,sans-serif;
  font-size:1.9rem;font-weight:700;color:#8FE0F2;line-height:1;margin-bottom:10px}
.steps b{display:block;font-family:"Barlow Condensed",Arial,sans-serif;font-size:1.1rem;
  text-transform:uppercase;letter-spacing:.04em;color:#fff;margin-bottom:7px}
.steps span{font-size:.88rem;color:#CFE3E9;line-height:1.5}

/* =========================== INCLUSION CHIPS ============================= */
.incl{display:flex;flex-wrap:wrap;gap:9px;list-style:none;margin:24px 0 0;padding:0}
.incl li{display:flex;gap:9px;align-items:center;border:1px dashed #C9A22C;background:#FFF8E6;
  color:#54410A;border-radius:999px;padding:10px 16px;font-size:.84rem;font-weight:700;
  font-family:"Barlow",Arial,sans-serif}
.incl li svg{width:15px;height:15px;fill:#C9A22C;flex:0 0 auto}
.incl li.is-key{border-style:solid;border-color:var(--red-deep);background:#FDEDEB;color:#5A150F}
.incl li.is-key svg{fill:var(--red-deep)}

/* =========================== SAFETY BLOCK ================================ */
.safety{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:2px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));background:rgba(255,255,255,.2)}
.safety li{background:rgba(13,59,79,.6);padding:24px 22px;display:grid;gap:10px;align-content:start;
  border-left:4px solid var(--red)}
.safety b{font-family:"Barlow Condensed",Arial,sans-serif;font-size:1.12rem;text-transform:uppercase;
  letter-spacing:.04em;color:#fff}
.safety span{font-size:.88rem;color:#CFE3E9;line-height:1.5}

/* =========================== SEASON RAIL ================================= */
.season{display:grid;gap:2px;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));
  list-style:none;margin:26px 0 0;padding:0;background:var(--line)}
.season li{background:#fff;padding:16px 10px;text-align:center}
.season b{display:block;font-family:"Barlow Condensed",Arial,sans-serif;font-size:1rem;
  text-transform:uppercase;letter-spacing:.08em;color:var(--deep);margin-bottom:9px}
.season .slot{min-width:0;width:100%;font-size:.66rem;padding:7px 4px}

/* =========================== CONFIGURATOR ================================ */
.config{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,3vw,30px);box-shadow:0 24px 54px -32px rgba(13,59,79,.5)}
.config h3{margin-bottom:16px}
.config__grid{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:820px){.config__grid{grid-template-columns:1.4fr 1fr .8fr auto;align-items:end}}
.config .btn{width:100%}
@media (min-width:820px){.config .btn{width:auto}}
.config__out{margin:16px 0 0;padding:14px 16px;border-radius:8px;background:#E6F4F9;
  color:#0A3140;font-size:.9rem;min-height:1.4em}

/* =========================== SPLITS / GRIDS ============================== */
.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}

.places{display:grid;gap:clamp(12px,1.8vw,20px);list-style:none;margin:26px 0 0;padding:0;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.places li{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.places img{width:100%;aspect-ratio:3/2;object-fit:cover}
.places div{padding:18px}
.places h3{font-size:1.02rem;margin-bottom:7px}
.places p{font-size:.87rem;color:var(--ink-soft);margin:0}

.gal{display:grid;gap:clamp(8px,1.4vw,14px);grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
  margin-top:24px}
.gal a{position:relative;display:block;border-radius:var(--r);overflow:hidden;aspect-ratio:1/1}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.gal a:hover img{transform:scale(1.07)}

/* =========================== FAQ ========================================= */
.faq{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--line)}
.faq li{border-bottom:1px solid var(--line)}
.faq button{width:100%;background:none;border:0;padding:20px 40px 20px 0;font:inherit;
  font-family:"Barlow Condensed",Arial,sans-serif;font-size:1.16rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;text-align:left;cursor:pointer;
  color:var(--deep);position:relative}
.faq button::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);
  font-family:"Barlow",Arial,sans-serif;font-size:1.4rem;color:var(--red-deep)}
.faq button[aria-expanded="true"]::after{content:"–"}
.faq .a{padding:0 0 20px;font-size:.94rem;color:var(--ink-soft);max-width:72ch}
.faq .a[hidden]{display:none}

/* =========================== FORMS ======================================= */
label{display:block;font-family:"Barlow",Arial,sans-serif;font-size:.63rem;letter-spacing:.16em;
  text-transform:uppercase;font-weight:700;color:var(--ink-soft);margin-bottom:6px}
.sec--deep label,.sec--teal label{color:#A6C2CC}
input,select,textarea{width:100%;padding:13px 14px;font:inherit;font-size:.95rem;
  border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:8px;
  transition:border-color .22s,box-shadow .22s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(18,176,216,.26)}
.form{display:grid;gap:14px;max-width:640px}
.f2{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width:560px){.f2{grid-template-columns:1fr}}
textarea{min-height:104px;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:#C42219}
.consent label{text-transform:none;letter-spacing:0;font-size:.85rem;font-weight:400;
  color:var(--ink-soft);margin:0}
.sec--deep .consent label,.sec--teal .consent label{color:#CFE3E9}
.formnote{font-size:.79rem;color:var(--ink-soft)}
.sec--deep .formnote,.sec--teal .formnote{color:#A6C2CC}

/* =========================== CTA BAND ==================================== */
.ctaband{background:var(--red-btn);color:#fff;padding:clamp(48px,7vw,90px) var(--gut);text-align:center}
.ctaband h2{color:#fff;max-width:20ch;margin:0 auto 18px}
.ctaband p{color:#FFE0DC;max-width:52ch;margin:0 auto 24px}
.ctaband .btn{background:#fff;color:var(--red-btn)}
.ctaband .btn--out{border-color:rgba(255,255,255,.7);color:#fff;background:none}

/* =========================== FOOTER ====================================== */
.ftr{background:var(--deep);color:#A6C2CC;padding:clamp(46px,7vw,88px) 0 30px;font-size:.9rem}
.ftr a{color:#E4EEF2;text-decoration:none}
.ftr a:hover{color:#8FE0F2}
.ftr h4{color:#fff;font-family:"Barlow",Arial,sans-serif;font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;margin:0 0 14px;font-weight:700}
.ftr__grid{display:grid;gap:34px;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(255,255,255,.14);margin-top:40px;padding-top:24px;
  font-size:.78rem;color:#7B95A0;display:grid;gap:9px}

/* =========================== STICKY / 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,.5)}
@media (max-width:768px){.stick{display:grid}}
.stick a,.stick button{display:flex;align-items:center;justify-content:center;gap:9px;height:58px;
  border:0;background:none;color:#fff;font:inherit;font-family:"Barlow",Arial,sans-serif;
  font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;text-decoration:none}
.stick .p{background:var(--red-btn)}
.stick .wa-btn{background:linear-gradient(135deg,#25D366 0%,#128C7E 100%)}
.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 24px -8px rgba(0,0,0,.4);
  transition:transform .3s var(--ease)}
.wa:hover{transform:scale(1.07)}
.wa svg{width:27px;height:27px;fill:#0B2E17}
@media (max-width:768px){.wa{bottom:calc(68px + env(safe-area-inset-bottom,0px))}}

/* =========================== COOKIE BANNER =============================== */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--deep);color:#BCD2DA;
  padding:18px var(--gut);border-top:3px solid var(--red);font-size:.9rem;
  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-size:1rem}
.ck__opts{display:flex;flex-wrap:wrap;gap:18px;font-size:.86rem}
.ck__opts label{text-transform:none;letter-spacing:0;color:#BCD2DA;font-weight:400;
  display:flex;gap:8px;align-items:center;margin:0;font-size:.86rem}
.ck__opts input{width:auto;accent-color:#12B0D8}
.ck__btns{display:flex;flex-wrap:wrap;gap:9px}
.ck__btns .btn{padding:12px 20px;font-size:.68rem}
.ck .btn--out{border-color:rgba(255,255,255,.6);color:#fff}

/* =========================== REVEALS ===================================== */
/* diagonal wipe on entry — the signature motion */
.rv{opacity:0;transform:translate3d(-14px,16px,0);
  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}
  .kite{animation:none;transform:none}
  .hero__img{inset:0;height:100%}
  .courses{scroll-snap-type:none}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;
    animation-iteration-count:1!important}
}

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

/* ---------------------------------------------------- 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:1000px){
  .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}
}