/* ==========================================================================
   ENGLISH FOR ALL — Florianópolis, SC
   Spec mockup. Reference: language-school-ref-01 ("Lingua") — the bright,
   optimistic, high-energy school register: two-column hero on a soft organic
   blob, rounded benefit cards straddling the hero, a course grid with LEVEL
   CHIPS, a checklist against a dark teacher panel, a full-width dark CTA band.

   TWO DELIBERATE DEPARTURES FROM THE REFERENCE:
     1. Lingua's flag-per-language device is DROPPED. Lingua is a multi-language
        marketplace; this is a single-language school, so the grid segments by
        COURSE TYPE AND LEVEL, never by country.
     2. Lingua's "5,000+ students" capsule and its "4.9 (250+)" teacher rating
        badges are NOT carried over. There is no styling in this file for a
        rating badge or a student-count capsule, on purpose — nothing is
        verified and no number will be invented.

   ⛔ NO CHILDREN OR MINORS IN ANY IMAGE, anywhere, even though the school may
     teach young learners. This overrides the reference, whose hero and teacher
     cards are people-led. Adults, empty classrooms, materials, the city.

   ⚠ Palette PROPOSED — no website exists and Instagram is login-walled, so
     nothing was recoverable. [CONFIRM against their logo]

   ⚠ CONTRAST — doubly important here, because this site is read by people who
     do NOT yet speak English and must be relentlessly clear in Portuguese:
       · Ink #171C24 on off-white #FBFAF7 ≈ 15.6:1 — AAA
       · Ocean #1F4EA1 on white ≈ 7.9:1 — AAA for body
       · Coral #F2704E on white ≈ 3.0:1 — FAILS. Used ONLY as a button fill
         with white text on the darker end (#D4522F → white ≈ 4.6:1).
       · Sunshine #FFC24B on white ≈ 1.7:1 — NEVER text. It is a FILL with ink
         text on it (≈ 12.4:1), and nothing else.
   ========================================================================== */

:root{
  --ocean:#1F4EA1;
  --ocean-dk:#123166;
  --wash:#E8EFFA;
  --sun:#FFC24B;
  --sun-lt:#FFF4DF;
  --coral:#F2704E;
  --coral-dk:#D4522F;
  --ink:#171C24;
  --muted:#6B7480;
  --field:#FBFAF7;
  --green:#27A567;
  --wa:#25D366;
  --line:#E4E7EC;

  --g-blob:linear-gradient(135deg,var(--wash) 0%,var(--sun-lt) 100%);
  --g-cta:linear-gradient(135deg,var(--coral) 0%,var(--coral-dk) 100%);
  --g-navy:linear-gradient(135deg,var(--ocean) 0%,var(--ocean-dk) 100%);
  --g-soft:linear-gradient(180deg,#fff 0%,var(--wash) 100%);

  --sans:"Nunito Sans","Helvetica Neue",Arial,sans-serif;
  --display:"Bricolage Grotesque","Nunito Sans",Arial,sans-serif;

  --wrap:1240px;
  --gut:clamp(18px,4.4vw,52px);
  --r:18px;
  --r-sm:12px;
  --sh:0 6px 24px rgba(23,28,36,.08);
  --sh-lift:0 16px 40px rgba(23,28,36,.14);
  --ease:cubic-bezier(.22,.8,.28,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.7;   /* generous type on purpose */
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:700;line-height:1.12;
  letter-spacing:-.022em;color:var(--ink)}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--ocean);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ocean);color:#fff;padding:12px 20px}
.skip:focus{left:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap--n{max-width:880px}
.sec{padding-block:clamp(50px,6.8vw,104px);position:relative}
.sec--t{padding-block:clamp(30px,4vw,56px)}
.washbg{background:var(--wash)}
.fieldbg{background:var(--field)}
.softbg{background-image:var(--g-soft)}
.navy{background-image:var(--g-navy);color:#D3DEF0}
.navy h1,.navy h2,.navy h3{color:#fff}
.navy .lede{color:#BCCBE4}

.eyebrow{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ocean);margin:0 0 14px}
.navy .eyebrow{color:var(--sun)}
.h-xl{font-size:clamp(2.2rem,5vw,3.6rem)}
.h-lg{font-size:clamp(1.85rem,3.4vw,2.8rem)}
.h-md{font-size:clamp(1.35rem,2.2vw,1.8rem)}
.lede{font-size:clamp(1.02rem,1.32vw,1.16rem);color:var(--muted);max-width:60ch}
.sec-head{max-width:62ch;margin-bottom:clamp(26px,3.4vw,46px)}
.sec-head--c{margin-inline:auto;text-align:center}
.sec-head--row{max-width:none;display:flex;flex-wrap:wrap;gap:22px;
  justify-content:space-between;align-items:flex-end}

/* ---------- [CONFIRM] ---------- */
.cfm{display:inline-block;border:1px dashed var(--coral-dk);background:rgba(242,112,78,.10);
  color:var(--coral-dk);padding:.06em .5em;border-radius:var(--r-sm);
  font-size:.85em;font-weight:800;font-style:normal}
.navy .cfm{border-color:var(--sun);background:rgba(255,194,75,.18);color:var(--sun)}
.cfm-note{border:1px dashed var(--coral-dk);background:rgba(242,112,78,.07);border-radius:var(--r-sm);
  padding:15px 18px;color:var(--coral-dk);font-size:.93rem;margin:0 0 22px}
.navy .cfm-note{border-color:var(--sun);background:rgba(255,194,75,.12);color:var(--sun)}
/* the "família" question — the single most interesting signal available, and
   genuinely ambiguous. It gets its own treatment rather than a footnote. */
.qmark{border:2px solid var(--sun);background:var(--sun-lt);border-radius:var(--r);
  padding:22px 26px;color:var(--ink)}
.qmark b{font-family:var(--display);font-size:1.1rem;display:block;margin-bottom:8px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 28px;border-radius:999px;font-size:.92rem;font-weight:800;
  background-image:var(--g-cta);color:#fff;box-shadow:var(--sh);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),filter .28s}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-lift);filter:brightness(1.05)}
.btn .ar{transition:transform .28s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.btn--blue{background-image:var(--g-navy)}
.btn--ghost{background:transparent;background-image:none;color:var(--ocean);
  border:2px solid var(--ocean);box-shadow:none}
.btn--ghost:hover{background:var(--ocean);color:#fff}
.navy .btn--ghost{color:#fff;border-color:#fff}
.navy .btn--ghost:hover{background:#fff;color:var(--ocean)}
/* sunshine is a FILL with ink text — never text on white */
.btn--sun{background-image:none;background:var(--sun);color:var(--ink)}
.btn--sun:hover{background:#F0AE33}
.btn--wa{background-image:none;background:var(--wa);color:#0A3A1C}
.btn--wa:hover{background:#1FBF5A}
.btn--sm{padding:11px 20px;font-size:.83rem}
.btn--full{width:100%}
.btn[data-unconfirmed]{background-image:none;background:var(--line);color:var(--muted);
  border:1px dashed var(--coral-dk);box-shadow:none}
.btn[data-unconfirmed]:hover{transform:none;box-shadow:none;filter:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ---------- Utility bar ---------- */
.top{background:var(--ocean-dk);color:#C6D3E8;font-size:.86rem;padding-block:9px}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.top a:hover{color:#fff}
.top__l,.top__r{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pills{display:flex;gap:5px}
.pills a{padding:3px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.3)}
.pills a.on{background:var(--sun);color:var(--ink);border-color:var(--sun);font-weight:800}

/* ---------- Sticky header ---------- */
.hdr{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.97);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  padding-block:14px;transition:padding .28s var(--ease),box-shadow .28s var(--ease)}
.hdr.is-stuck{padding-block:9px;box-shadow:var(--sh)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font-family:var(--display);font-size:1.34rem;font-weight:800;color:var(--ocean);line-height:1.05}
.brand span{color:var(--coral)}
.brand small{display:block;font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);font-weight:700}
.nav{display:flex;align-items:center;gap:19px}
.nav a{font-size:.9rem;font-weight:700;color:var(--ink);padding-block:5px;
  border-bottom:2px solid transparent;transition:.24s}
.nav a:hover{color:var(--ocean);border-bottom-color:var(--sun)}
.hdr__r{display:flex;align-items:center;gap:10px}
.burger{display:none;width:44px;height:44px;position:relative}
.burger span{position:absolute;left:11px;width:22px;height:2.5px;border-radius:2px;
  background:var(--ocean);transition:.28s var(--ease)}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px}
.burger.on span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:89;background:#fff;display:flex;flex-direction:column;
  justify-content:center;gap:0;padding:96px var(--gut) 40px;overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-12px);transition:.3s var(--ease)}
.mnav.on{opacity:1;visibility:visible;transform:none}
.mnav a{font-family:var(--display);font-size:clamp(1.5rem,6.4vw,2.1rem);color:var(--ink);
  padding-block:12px;border-bottom:1px solid var(--line)}

/* ---------- Hero — two columns, subject on the soft organic blob ---------- */
.hero{padding-block:clamp(38px,5vw,80px) clamp(70px,9vw,130px);position:relative;overflow:hidden}
.hero__g{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,60px);align-items:center}
.hero h1{font-size:clamp(2.1rem,4.6vw,3.5rem)}
.hero h1 em{font-style:normal;color:var(--ocean)}
.hero p{margin-top:18px;font-size:1.1rem;color:var(--muted);max-width:44ch}
.blob{position:relative;padding:clamp(16px,2.4vw,30px)}
.blob::before{content:"";position:absolute;inset:0;background-image:var(--g-blob);
  border-radius:58% 42% 46% 54%/48% 52% 48% 52%;
  animation:morph 18s var(--ease) infinite alternate}
@keyframes morph{
  from{border-radius:58% 42% 46% 54%/48% 52% 48% 52%;transform:rotate(0deg) scale(1)}
  to{border-radius:44% 56% 60% 40%/56% 44% 56% 44%;transform:rotate(4deg) scale(1.03)}}
.blob img{position:relative;z-index:2;width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--r);box-shadow:var(--sh-lift)}

/* ---------- Reassurance strip — rounded cards straddling the hero ---------- */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.8vw,22px);
  margin-top:calc(clamp(70px,9vw,130px) * -.55);position:relative;z-index:5}
.rcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 20px;
  box-shadow:var(--sh);transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.rcard:hover{transform:translateY(-4px);box-shadow:var(--sh-lift)}
.rcard .ic{width:44px;height:44px;border-radius:14px;background:var(--wash);
  display:grid;place-items:center;font-size:1.2rem;margin-bottom:13px}
.rcard b{display:block;font-family:var(--display);font-size:1.02rem;margin-bottom:5px}
.rcard span{font-size:.9rem;color:var(--muted)}

/* ---------- ⭐ Level check — the highest-converting section on the site ----
   Private, no signup, no email gate, no published score. Level uncertainty is
   the number-one cause of enrolment drop-off in this market: someone who cannot
   tell whether they belong in A2 or B1 closes the tab rather than guess in
   public. Removing that privately is worth more than any discount. */
.quiz{background:#fff;border:2px solid var(--wash);border-radius:var(--r);
  padding:clamp(22px,3.2vw,44px);box-shadow:var(--sh)}
.quiz__bar{display:flex;gap:6px;margin-bottom:22px}
.quiz__bar span{flex:1;height:6px;border-radius:3px;background:var(--wash);transition:background .3s var(--ease)}
.quiz__bar span.done{background:var(--ocean)}
.q{display:none}
.q.on{display:block}
.q__n{font-size:.86rem;font-weight:800;color:var(--ocean);letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:10px}
.q h3{font-size:clamp(1.2rem,2vw,1.55rem);margin-bottom:18px}
.q__opts{display:grid;gap:10px}
/* each option is a real radio in a real label — fully keyboard-operable, and
   it never traps focus */
.q__opts label{display:flex;gap:12px;align-items:flex-start;border:2px solid var(--line);
  border-radius:var(--r-sm);padding:14px 16px;cursor:pointer;transition:.2s var(--ease);font-size:1rem}
.q__opts label:hover{border-color:var(--ocean);background:var(--wash)}
.q__opts input{margin-top:5px;accent-color:var(--ocean);flex:0 0 auto}
.q__opts input:checked + span{font-weight:700;color:var(--ocean)}
.quiz__nav{display:flex;gap:10px;justify-content:space-between;margin-top:24px}
.result{display:none;text-align:center}
.result.on{display:block}
.result__lvl{display:inline-block;font-family:var(--display);font-size:clamp(2.4rem,6vw,4rem);
  font-weight:800;color:#fff;background-image:var(--g-navy);border-radius:var(--r);
  padding:14px 34px;margin-bottom:16px}
/* the level chips — a stepped scale so the system is legible at a glance.
   Every chip carries its LETTER as text: the level is never colour-only. */
.lvls{display:flex;flex-wrap:wrap;gap:6px}
.lvl{font-size:.74rem;font-weight:800;padding:5px 11px;border-radius:999px;
  border:1px solid transparent;letter-spacing:.04em}
.lvl-a1{background:#E8EFFA;color:#123166}
.lvl-a2{background:#C9DAF3;color:#123166}
.lvl-b1{background:#9DBCE8;color:#0E274F}
.lvl-b2{background:#5D8CD3;color:#fff}
.lvl-c1{background:#1F4EA1;color:#fff}
.lvl-off{background:#fff;color:var(--muted);border-color:var(--line)}

/* ---------- Course grid ---------- */
.courses{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px)}
.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 var(--ease)}
.course:hover{transform:translateY(-5px);box-shadow:var(--sh-lift)}
.course__i{aspect-ratio:16/10;overflow:hidden;background:var(--wash)}
.course__i img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.course:hover .course__i img{transform:scale(1.05)}
.course__b{padding:20px 21px 24px;display:flex;flex-direction:column;gap:11px;flex:1}
.course h3{font-size:1.14rem}
.course p{font-size:.92rem;color:var(--muted);margin:0}
.course dl{margin:0;display:grid;gap:7px;font-size:.88rem}
.course dl div{display:flex;justify-content:space-between;gap:10px;
  border-bottom:1px dashed var(--line);padding-bottom:7px}
.course dt{color:var(--muted)}
.course dd{margin:0;font-weight:700}
.course .btn{margin-top:auto}
.fmt{display:inline-block;font-size:.72rem;font-weight:800;padding:5px 11px;border-radius:999px;
  background:var(--sun-lt);color:#7A4E00;border:1px solid var(--sun)}

/* ---------- Three-step rail ---------- */
.rail{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);position:relative}
.rstep{background:#fff;border-radius:var(--r);padding:26px 24px;border:1px solid var(--line);
  position:relative;overflow:hidden}
.rstep::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;background-image:var(--g-navy)}
.rstep b{display:block;font-family:var(--display);font-size:2rem;color:var(--ocean);line-height:1;margin-bottom:12px}
.rstep h3{font-size:1.08rem;margin-bottom:6px}
.rstep p{font-size:.92rem;color:var(--muted);margin:0}

/* ---------- Teachers ----------
   ⚠ NO rating badge styling exists in this file. Lingua's "4.9 (250+)" device
   is deliberately absent — a fabricated teaching credential or rating is
   seriously damaging and trivially disprovable. */
.teachers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
.teacher{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r);overflow:hidden;transition:transform .3s var(--ease)}
.teacher:hover{transform:translateY(-4px)}
.teacher__i{aspect-ratio:1;overflow:hidden;background:var(--ocean-dk)}
.teacher__i img{width:100%;height:100%;object-fit:cover}
.teacher__b{padding:18px 20px 22px}
.teacher h3{font-size:1.1rem;color:#fff;margin-bottom:4px}
.teacher .what{font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sun);margin-bottom:10px}
.teacher p{font-size:.9rem;margin:0 0 8px;color:#BCCBE4}

/* ---------- Checklist ---------- */
.check{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.check li{display:flex;gap:12px;align-items:flex-start;font-size:1rem}
.check .tick{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--green);
  color:#fff;display:grid;place-items:center;font-size:.8rem;font-weight:800;margin-top:2px}

/* ---------- Timetable ---------- */
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.tbl{width:100%;border-collapse:collapse;font-size:.94rem;min-width:640px}
.tbl th,.tbl td{padding:13px 15px;text-align:left;border-bottom:1px solid var(--line)}
.tbl thead th{background:var(--wash);font-size:.78rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ocean-dk)}
.tbl tbody th{font-weight:800;color:var(--ink);background:var(--field)}
.price{background:#fff;border:2px solid var(--ocean);border-radius:var(--r);padding:clamp(24px,3.2vw,40px)}
.price .num{font-family:var(--display);font-size:clamp(2rem,5vw,3.2rem);color:var(--ocean);line-height:1}
.price ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:11px;font-size:.95rem}
.price li{display:flex;justify-content:space-between;gap:14px;border-bottom:1px dashed var(--line);padding-bottom:11px}
.price li:last-child{border-bottom:0}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:19px 44px 19px 0;font-family:var(--display);font-size:1.1rem;font-weight:700;
  color:var(--ink);cursor:pointer;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);
  color:var(--ocean);font-size:1.6rem;transition:transform .24s var(--ease)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq p{padding:0 0 19px;margin:0;font-size:.97rem;color:var(--muted);max-width:70ch}

/* ---------- Blog cards ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px)}
.post{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.post:hover{transform:translateY(-4px);box-shadow:var(--sh-lift)}
.post__i{aspect-ratio:16/9;overflow:hidden;background:var(--wash)}
.post__i img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.post:hover .post__i img{transform:scale(1.05)}
.post__b{padding:18px 20px 22px}
.post h3{font-size:1.05rem;margin-bottom:7px}
.post p{font-size:.9rem;color:var(--muted);margin:0}
.post .when{font-size:.8rem;color:var(--muted);margin-bottom:8px;display:block}

/* ---------- Testimonials ----------
   ⚠ NO testimonial-card styling exists in this file. Testimonials are
   PERMITTED for a school, but only real, named and consented ones — so the
   section ships as an explicit empty state rather than as invented quotes or
   stock portraits presented as students. ---------- */
.empty{border:2px dashed var(--coral-dk);background:rgba(242,112,78,.06);border-radius:var(--r);
  padding:clamp(28px,4vw,52px);text-align:center}
.empty p{color:var(--coral-dk);max-width:58ch;margin-inline:auto;font-size:.98rem}

/* ---------- Forms ---------- */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,3vw,38px);box-shadow:var(--sh)}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.field label{display:block;font-size:.84rem;font-weight:800;color:var(--ink);margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;padding:14px 15px;font:inherit;font-size:1rem;
  background:var(--field);border:2px solid var(--line);border-radius:var(--r-sm);color:var(--ink)}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ocean)}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;color:var(--muted);margin:6px 0 18px}
.consent input{margin-top:5px;accent-color:var(--ocean)}
.consent a{color:var(--ocean);text-decoration:underline}
.contactlist{list-style:none;margin:24px 0 0;padding:0}
.contactlist li{display:flex;justify-content:space-between;gap:16px;padding-block:13px;
  border-bottom:1px solid var(--line);font-size:.96rem}
.contactlist b{font-weight:800}

/* ---------- Map ---------- */
.map{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;position:relative;background:var(--wash);
  display:grid;place-items:center;text-align:center;padding:26px}
.map__grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(31,78,161,.14) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(31,78,161,.14) 1px,transparent 1px);
  background-size:36px 36px}
.map>div{position:relative;z-index:2}

/* ---------- Footer ---------- */
.ftr{background:var(--ink);color:#A3ABB6;padding-block:clamp(44px,5.6vw,84px) 0}
.ftr h4{font-size:.78rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sun);margin-bottom:16px}
.ftr__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:clamp(22px,3vw,44px)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:.92rem}
.ftr a:hover{color:#fff}
.ftr .brand{color:#fff;display:block;margin-bottom:14px}
.ftr .brand span{color:var(--sun)}
.ftr .brand small{color:#A3ABB6}
.ftr__bot{margin-top:clamp(28px,3.6vw,50px);border-top:1px solid rgba(255,255,255,.14);
  padding-block:20px 28px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  align-items:center;font-size:.84rem;color:#7C8592}

/* ---------- Sticky mobile bar + floating WhatsApp ---------- */
.wa{position:fixed;right:18px;bottom:18px;z-index:80;width:58px;height:58px;border-radius:50%;
  background:var(--wa);display:grid;place-items:center;box-shadow:0 10px 26px rgba(37,211,102,.42);
  transition:transform .26s var(--ease)}
.wa:hover{transform:scale(1.07)}
.wa svg{width:29px;height:29px;fill:#0A3A1C}
.wa[data-unconfirmed]{background:var(--line)}
.wa[data-unconfirmed] svg{fill:var(--muted)}
.wa__cfm{position:absolute;right:66px;top:50%;transform:translateY(-50%);white-space:nowrap;
  background:var(--ink);color:#fff;font-size:.72rem;font-weight:800;padding:6px 11px;border-radius:var(--r-sm)}
.mbar{display:none}

/* ---------- LGPD ---------- */
.ck{position:fixed;left:0;right:0;bottom:0;z-index:95;background:#fff;
  border-top:3px solid var(--ocean);padding:20px var(--gut);
  transform:translateY(112%);transition:transform .36s var(--ease)}
.ck.on{transform:none}
.ck__in{max-width:var(--wrap);margin-inline:auto;display:grid;grid-template-columns:1.5fr 1fr;
  gap:22px;align-items:center}
.ck p{font-size:.9rem;margin:0;color:var(--muted)}
.ck a{color:var(--ocean);text-decoration:underline}
.ck__opts{display:flex;flex-wrap:wrap;gap:16px;margin-top:11px;font-size:.88rem}
.ck__opts label{display:flex;gap:8px;align-items:center}
.ck__opts input{accent-color:var(--ocean)}
.ck__btns{display:flex;flex-wrap:wrap;gap:9px;justify-content:flex-end}

/* ---------- Reveal ---------- */
[data-rv]{opacity:0;transform:translateY(18px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
[data-rv].in{opacity:1;transform:none}

/* ---------- Legal ---------- */
.legal{max-width:860px;margin-inline:auto;padding-block:clamp(44px,6vw,88px)}
.legal h2{margin:32px 0 12px;font-size:1.55rem}
.legal h3{margin:22px 0 10px;font-size:1.18rem}
.legal ul{padding-left:20px;display:grid;gap:8px;margin-bottom:18px}
.legal table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.92rem}
.legal th,.legal td{border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top}
.legal th{background:var(--wash);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ocean-dk);font-weight:800}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .nav{display:none}
  .burger{display:block}
  .hero__g{grid-template-columns:1fr;gap:34px}
  .strip{grid-template-columns:repeat(2,1fr);margin-top:-40px}
  .courses,.teachers,.posts,.rail{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .ck__in{grid-template-columns:1fr}
  .ck__btns{justify-content:flex-start}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .sec-head--row{flex-direction:column;align-items:flex-start}
}
@media (max-width:600px){
  body{padding-bottom:64px}
  .wa{bottom:78px;width:52px;height:52px}
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:0;position:fixed;left:0;right:0;bottom:0;
    z-index:82;padding-bottom:env(safe-area-inset-bottom);background:#fff;border-top:1px solid var(--line)}
  .mbar .btn{border-radius:0;box-shadow:none;padding:17px 8px}
  .mbar .btn:hover{transform:none}
  .strip,.courses,.teachers,.posts,.rail,.fr,.ftr__grid{grid-template-columns:1fr}
  .top__in{justify-content:center;text-align:center}
}

/* ---------- Reduced motion — the blob and the card animations stop ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-rv]{opacity:1;transform:none}
  .blob::before{animation:none}
}

/* ---------------------------------------------------- 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}
}

/* ------------------------------------------- header-cta-wrap-guard
   At phone width this CTA wrapped onto a second line, grew the header's
   right-hand cluster to three rows and pushed it over the brand. The same action
   is in the sticky bar at the bottom of the screen, so it comes out of
   the header here. Brand, language switcher and burger keep the row. */
@media (max-width:560px){
  .hdr__r .btn{display:none}
}

/* ------------------------------------------- legal-header-wrap
   The LGPD privacy page uses .hdr__cta where the rest of the site uses
   .hdr__r, so the phone guard above does not reach it. Its CTA is
   "Voltar ao site" - with no nav and no burger on that page, it is the
   only explicit way back - so the row wraps and the brand shrinks rather
   than the link being hidden. */
@media (max-width:560px){
  .hdr__in,.head-in{flex-wrap:wrap;row-gap:.5rem}
  .hdr__cta,.head-cta{min-width:0;flex-wrap:wrap;justify-content:flex-end}
  .brand{min-width:0}
  .brand__n{white-space:normal;overflow-wrap:anywhere}
}

/* ------------------------------------------- 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}
}