/* Escape to Surf: design system v1.0 (see CLAUDE.md section 4). Mobile first. */

:root{
  --ink:#0C2C3D; --ink-soft:#33586B; --muted:#5E7A89;
  --bg:#F4FAFC; --card:#FFFFFF; --line:#DCE9EE;
  --sea:#0E7DA8; --sea-deep:#0A5F80; --sea-soft:#E3F2F8;
  --coral:#F0663F; --coral-deep:#CC4A26; --coral-soft:#FDECE5;
  --lagoon:#0FA3A8; --lagoon-deep:#0B7B7F; --lagoon-soft:#E0F5F5;
  --sand:#FBF4E8; --success:#1B8A5A; --error:#C6412B; --whatsapp:#25D366;
  --radius:18px; --radius-input:12px; --radius-pill:999px;
  --shadow:0 2px 6px rgba(12,44,61,.05);
  --shadow-hover:0 12px 28px rgba(12,44,61,.13);
  --font-display:'Bricolage Grotesque',sans-serif;
  --font-body:'Plus Jakarta Sans',system-ui,sans-serif;
  --font-accent:'Caveat',cursive;
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;

  --header-h:64px;
}

/* ---------- Base ---------- */

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1rem;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%;height:auto}

h1,h2,h3{
  margin:0;
  font-family:var(--font-display);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-0.015em;
}
h3{font-weight:700}

p{margin:0 0 var(--s-3)}
p:last-child{margin-bottom:0}

a{color:var(--sea-deep)}

:focus-visible{outline:3px solid var(--sea);outline-offset:3px}

[id]{scroll-margin-top:calc(var(--header-h) + var(--s-4))}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{flex:none}

.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:var(--s-4);top:-100px;z-index:100;
  padding:var(--s-3) var(--s-4);
  background:var(--ink);color:var(--card);
  border-radius:var(--radius-pill);
  font-weight:700;text-decoration:none;
}
.skip-link:focus{top:var(--s-3)}

.container{
  width:100%;
  max-width:1160px;
  margin-inline:auto;
  padding-inline:var(--s-4);
}
.container--narrow{max-width:800px}

/* ---------- Type helpers ---------- */

.eyebrow,
.label{
  margin:0 0 var(--s-3);
  font-family:var(--font-body);
  font-size:11.5px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--sea-deep);
}
.eyebrow--light{color:var(--sea-soft)}

.section{padding-block:var(--s-7)}
.section--alt{background:var(--sand)}
.section__title{
  max-width:22ch;
  margin-bottom:var(--s-6);
  font-size:clamp(1.875rem, 1.25rem + 2.6vw, 2.75rem);
}

/* ---------- Buttons and tags ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  min-height:44px;
  padding:12px 22px;
  border:2px solid transparent;
  border-radius:var(--radius-pill);
  font-family:var(--font-body);
  font-size:1.1875rem;
  font-weight:700;
  line-height:1.25;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}

.btn--sm{padding:8px 16px;font-size:.9375rem}
.btn--lg{padding:14px 28px}

.btn--coral{background:var(--coral);color:var(--card)}
.btn--coral:hover{background:var(--coral-deep)}
.btn--coral.is-demoted{background:var(--sea)}
.btn--coral.is-demoted:hover{background:var(--sea-deep)}

.btn--sea{background:var(--sea);color:var(--card)}
.btn--sea:hover{background:var(--sea-deep)}

.btn--lagoon{background:var(--lagoon);color:var(--card)}
.btn--lagoon:hover{background:var(--lagoon-deep)}

.btn--coral-outline{background:var(--card);color:var(--coral-deep);border-color:var(--coral-deep)}
.btn--coral-outline:hover{background:var(--coral-soft)}

.btn--link{
  padding-inline:var(--s-2);
  background:none;
  color:var(--sea-deep);
  font-size:1rem;
  text-decoration:underline;
  text-underline-offset:4px;
}
.btn--link:hover{transform:none;box-shadow:none;color:var(--ink)}

.tag{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  padding:5px 12px;
  border-radius:var(--radius-pill);
  background:var(--sea-soft);
  color:var(--ink);
  font-size:.875rem;
  font-weight:700;
  line-height:1.3;
}
.tag::before{
  content:"";
  width:8px;height:8px;
  border-radius:50%;
  background:var(--accent, var(--sea));
  flex:none;
}
.tag--south{background:var(--lagoon-soft);--accent:var(--lagoon)}
.tag--east{background:var(--coral-soft);--accent:var(--coral)}
.tag--both{background:linear-gradient(90deg, var(--lagoon-soft) 50%, var(--coral-soft) 50%)}
.tag--both::before{background:linear-gradient(135deg, var(--lagoon) 50%, var(--coral) 50%)}
.tag--transition{background:var(--line);--accent:var(--muted)}
.tag--sea{background:var(--sea-soft);--accent:var(--sea)}

/* Coast accent colours, shown together with written coast names */
.coast--south,.season-result--south{--accent:var(--lagoon)}
.coast--east,.season-result--east{--accent:var(--coral)}
.pkg--custom{--accent:var(--sea)}
.season-result--both{--accent:var(--lagoon)}
.season-result--transition{--accent:var(--muted)}

/* ---------- Cards ---------- */

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}

/* ---------- Image slots with placeholders ---------- */

.img-slot{
  position:relative;
  overflow:hidden;
  aspect-ratio:3 / 2;
  background:linear-gradient(135deg, var(--sea) 0%, var(--sea-deep) 100%);
}
.img-slot img{
  position:relative;
  width:100%;
  height:100%;
  object-fit:cover;
}
.img-slot__ph{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:var(--s-4);
  color:var(--card);
  text-align:center;
  font-size:.9375rem;
  font-weight:600;
  line-height:1.4;
}
.img-slot__ph span:first-child{
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.img-slot--coral{background:linear-gradient(135deg, var(--coral) 0%, var(--coral-deep) 100%)}
.img-slot--lagoon{background:linear-gradient(135deg, var(--lagoon) 0%, var(--lagoon-deep) 100%)}
.img-slot--sea{background:linear-gradient(135deg, var(--sea) 0%, var(--sea-deep) 100%)}
.img-slot--hero{background:linear-gradient(160deg, var(--sea) 0%, var(--ink) 100%)}
.img-slot--square{aspect-ratio:1 / 1;border-radius:var(--radius)}

/* ---------- Header ---------- */

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-3);
  min-height:var(--header-h);
}

/* Wordmark: name with a wave underline. On ink the whole logo goes white. */
.logo{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  justify-self:start;
  gap:var(--s-1);
  min-height:44px;
  color:var(--ink);
  text-decoration:none;
}
.logo__text{
  font-family:var(--font-display);
  font-size:1.0625rem;
  font-weight:800;
  letter-spacing:.04em;
  line-height:1;
  white-space:nowrap;
}
.logo__to{
  font-size:.72em;
  letter-spacing:.08em;
  vertical-align:.1em;
  margin:0 .06em;
  color:var(--sea);
}
.logo__wave{
  display:block;
  width:0;
  min-width:100%;
  height:6px;
  overflow:visible;
  color:var(--sea);
}
.logo--light,
.logo--light .logo__to,
.logo--light .logo__wave{color:var(--card)}

@media (max-width:419px){
  .btn__extra{
    position:absolute;
    width:1px;height:1px;
    overflow:hidden;clip:rect(0 0 0 0);
    white-space:nowrap;
  }
}

/* ---------- Hero ---------- */

.hero{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  min-height:clamp(560px, calc(100svh - var(--header-h)), 840px);
  padding-block:var(--s-7) calc(var(--s-8) + var(--s-5));
  color:var(--card);
}
.hero__media{
  position:absolute;
  inset:0;
  z-index:-2;
  aspect-ratio:auto;
}
/* The surfer sits in the right third of the photo; keep them in frame on narrow screens */
.hero__media img{object-position:78% center}
.hero__media .img-slot__ph{
  flex-direction:row;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:var(--s-2);
  padding-bottom:calc(var(--s-7) + var(--s-2));
  font-size:.875rem;
}
.hero__overlay{
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(12,44,61,.55);
}
.hero__content{position:relative}
.hero__title{
  max-width:15ch;
  margin-bottom:var(--s-5);
  font-size:clamp(2.5rem, 1.5rem + 4.6vw, 4.5rem);
  color:var(--card);
}
.accent{
  font-family:var(--font-accent);
  font-weight:600;
  font-size:1.15em;
  letter-spacing:0;
  color:var(--coral);
  white-space:nowrap;
}
.hero__sub{
  max-width:36em;
  margin-bottom:var(--s-6);
  font-size:1.125rem;
  color:var(--sea-soft);
}
.hero__cta .btn{width:100%}
.hero__note,
.hero__clock{
  margin:var(--s-3) 0 0;
  color:var(--sea-soft);
}
.hero__clock{margin-top:var(--s-1)}

.wave{display:block;width:100%;height:40px}
.wave--hero{
  position:absolute;
  left:0;right:0;bottom:-1px;
  fill:var(--bg);
}
.wave--footer{
  fill:var(--ink);
  background:var(--bg);
  margin-bottom:-1px;
}

/* ---------- Season picker ---------- */

.months{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:var(--s-6) var(--s-2);
  margin-top:var(--s-6);
}
.no-js .months{display:none}

.month{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  min-height:64px;
  padding:var(--s-2) 2px;
  border:1.5px solid var(--accent);
  border-radius:var(--radius-pill);
  background:var(--card);
  color:var(--ink);
  font-family:var(--font-body);
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease;
}
.month--south{--accent:var(--lagoon);background:var(--lagoon-soft)}
.month--east{--accent:var(--coral);background:var(--coral-soft)}
.month--both{
  --accent:var(--lagoon);
  background:linear-gradient(135deg, var(--lagoon-soft) 50%, var(--coral-soft) 50%);
  border-color:var(--lagoon) var(--coral) var(--coral) var(--lagoon);
}
.month--transition{--accent:var(--muted);background:var(--line);border-style:dashed}

.month__name{font-size:1rem;font-weight:700;line-height:1.2}
.month__coast{font-size:.875rem;font-weight:600;line-height:1.2;color:var(--ink-soft)}

.month:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover)}
.month[aria-pressed="true"]{
  transform:translateY(-2px);
  box-shadow:0 0 0 2px var(--ink), var(--shadow-hover);
}

.month__now{
  position:absolute;
  bottom:calc(100% + 4px);
  left:50%;
  transform:translateX(-50%);
  padding:3px 8px;
  border-radius:var(--radius-pill);
  background:var(--ink);
  color:var(--card);
  font-size:.875rem;
  font-weight:700;
  line-height:1.2;
  white-space:nowrap;
  pointer-events:none;
}
/* Keep the marker inside the grid on the first and last column */
.month:nth-child(4n+1) .month__now{left:0;transform:none}
.month:nth-child(4n) .month__now{left:auto;right:0;transform:none}

@media (min-width:560px){
  .months{grid-template-columns:repeat(6, minmax(0, 1fr))}
  .month:nth-child(4n+1) .month__now,
  .month:nth-child(4n) .month__now{left:50%;right:auto;transform:translateX(-50%)}
  .month:nth-child(6n+1) .month__now{left:0;transform:none}
  .month:nth-child(6n) .month__now{left:auto;right:0;transform:none}
}

@media (min-width:900px){
  .months{grid-template-columns:repeat(12, minmax(0, 1fr))}
  .month:nth-child(6n+1) .month__now,
  .month:nth-child(6n) .month__now{left:50%;right:auto;transform:translateX(-50%)}
  .month:first-child .month__now{left:0;transform:none}
  .month:last-child .month__now{left:auto;right:0;transform:none}
}

.legend{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2) var(--s-5);
  margin:var(--s-5) 0 0;
  padding:0;
  list-style:none;
  color:var(--ink-soft);
}
.legend li{display:inline-flex;align-items:center;gap:var(--s-2)}
.dot{width:12px;height:12px;border-radius:50%;flex:none}
.dot--east{background:var(--coral)}
.dot--south{background:var(--lagoon)}
.dot--transition{background:var(--line);border:1.5px dashed var(--muted)}

.season-results{
  display:grid;
  gap:var(--s-5);
  margin-top:var(--s-6);
}
.season-result{
  padding:var(--s-5);
  border-top:5px solid var(--accent);
}
.js .season-result{display:none}
.js .season-result.is-active{display:block}
.js .season-result.is-entering{animation:fade-in .35s ease both}

.season-result__months{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--sea-deep);
}
.season-result .tag{margin-bottom:var(--s-3)}
.season-result__title{
  margin-bottom:var(--s-3);
  font-size:clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
}
.season-result p:not(.season-result__months){color:var(--ink-soft);max-width:60ch}
.season-result__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-3) var(--s-4);
  margin-top:var(--s-5);
}
.season-result__actions .btn--coral{width:100%}

/* Without JS all four results stack, so keep coral to one per screen */
.no-js .season-result .btn--coral{background:var(--sea)}
.no-js .season-result .btn--coral:hover{background:var(--sea-deep)}

@keyframes fade-in{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

/* ---------- How it works ---------- */

.steps{
  display:grid;
  gap:var(--s-4);
  margin:0;
  padding:0;
  list-style:none;
}
.step{padding:var(--s-5)}
.step__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  border-radius:50%;
  background:var(--sea-soft);
  color:var(--sea-deep);
  font-family:var(--font-display);
  font-size:1.25rem;
  font-weight:800;
}
.step__title{margin:var(--s-4) 0 var(--s-2);font-size:1.25rem}
.step p{color:var(--ink-soft)}

/* ---------- Grids, coasts, packages ---------- */

.grid{display:grid;gap:var(--s-5)}

.coast,.pkg{overflow:hidden;display:flex;flex-direction:column}
.coast__body,.pkg__body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  flex:1;
  padding:var(--s-5);
}
.coast__title{margin:var(--s-3) 0;font-size:1.75rem}
.coast__label{margin:var(--s-4) 0 var(--s-2)}
.places{margin:0;padding:0;list-style:none;color:var(--ink-soft)}
.places li{padding:var(--s-2) 0;border-top:1px solid var(--line)}
.places strong{display:block;color:var(--ink);font-weight:700}

.facts{margin:0;padding:0;list-style:none;color:var(--ink-soft)}
.facts li{position:relative;padding-left:var(--s-5);margin-bottom:var(--s-2)}
.facts li::before{
  content:"";
  position:absolute;
  left:2px;top:.62em;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--accent);
}

.pkg__title{margin:var(--s-3) 0 var(--s-2);font-size:1.5rem}
.pkg__desc{color:var(--ink-soft)}

.strip{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:3px;
  width:100%;
  margin:var(--s-4) 0 var(--s-3);
}
.strip__bar{height:10px;border-radius:3px;background:var(--line)}
.strip__bar.is-south{background:var(--lagoon)}
.strip__bar.is-east{background:var(--coral)}
.strip__bar.is-both{background:linear-gradient(90deg, var(--lagoon) 50%, var(--coral) 50%)}

.includes{margin:var(--s-4) 0;padding:0;list-style:none}
.includes li{display:flex;gap:10px;align-items:flex-start;margin-bottom:var(--s-2)}
.includes .icon{margin-top:4px;color:var(--accent)}

.pkg .btn{width:100%}
.plan .label{margin:var(--s-3) 0 0}
.plan__note{margin:var(--s-3) 0 0;font-size:.9375rem;color:var(--muted)}
.plan__pack{margin:var(--s-2) 0 0;color:var(--ink-soft)}
.fees{width:100%;margin:var(--s-3) 0 0;padding:0;list-style:none}
.fees li{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:var(--s-3);
  padding:var(--s-3) 0;
  border-bottom:1px solid var(--line);
}
.fees li:first-child{border-top:1px solid var(--line)}
.fees__price{
  flex-shrink:0;
  font-family:var(--font-display);
  font-size:1.125rem;
  font-weight:700;
}
.plan__credit{margin:var(--s-3) 0 var(--s-4);font-weight:600;color:var(--sea-deep)}

/* ---------- Trust ---------- */

.trust{
  display:grid;
  gap:var(--s-5);
  margin:0;
  padding:0;
  list-style:none;
}
.trust__item{display:flex;gap:var(--s-4);align-items:flex-start}
.trust__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  width:56px;height:56px;
  border-radius:50%;
  background:var(--sea-soft);
  color:var(--sea);
}
.trust__title{margin:var(--s-1) 0 var(--s-1);font-size:1.125rem}
.trust p{color:var(--ink-soft)}

/* ---------- Contact ---------- */

.contact{display:grid;gap:var(--s-6);align-items:center}
.contact__media{max-width:480px}
.contact__body > p{color:var(--ink-soft)}
.contact__options{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--s-5);
  margin-top:var(--s-5);
}
.contact__options .btn{flex:none}
.email-block .label{margin-bottom:var(--s-1)}
.email-block__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3)}
.email-link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-family:var(--font-display);
  font-size:1.375rem;
  font-weight:700;
  color:var(--sea-deep);
  text-underline-offset:4px;
  overflow-wrap:anywhere;
}
.copy-btn{
  min-height:44px;
  padding:8px 18px;
  border:0;
  border-radius:var(--radius-pill);
  background:var(--sea-soft);
  color:var(--sea-deep);
  font-family:var(--font-body);
  font-size:.9375rem;
  font-weight:700;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.copy-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-hover);background:var(--line)}
.contact__note{margin-top:var(--s-5);color:var(--ink-soft)}

/* ---------- FAQ ---------- */

.faq{
  padding:0 var(--s-5);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s-4);
  min-height:44px;
  padding:var(--s-4) 0;
  font-family:var(--font-display);
  font-size:1.1875rem;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-0.015em;
  list-style:none;
  cursor:pointer;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";
  flex:none;
  width:10px;height:10px;
  margin-right:4px;
  border-right:2.5px solid var(--sea);
  border-bottom:2.5px solid var(--sea);
  transform:rotate(45deg) translateY(-3px);
  transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq details p{padding-bottom:var(--s-4);color:var(--ink-soft)}
/* Inline link: 44px tap area without changing the line height */
.faq details p a{display:inline-block;padding-block:11px;margin-block:-11px}

.faq__more{margin-top:var(--s-5)}
.text-link{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  min-height:44px;
  color:var(--sea-deep);
  font-weight:700;
  text-underline-offset:4px;
}
.text-link:hover{color:var(--ink)}

/* ---------- Footer ---------- */

.site-footer{
  padding:var(--s-6) 0 calc(var(--s-8) + var(--s-6));
  background:var(--ink);
  color:var(--sea-soft);
}
.site-footer__inner{display:grid;gap:var(--s-4)}
.site-footer__about{max-width:44ch}
.site-footer__links{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2) var(--s-5);
  margin:0;
  padding:0;
  list-style:none;
}
.site-footer__links a{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  min-height:44px;
  color:var(--card);
  font-weight:600;
  text-underline-offset:4px;
}
.site-footer__legal{color:var(--line);font-size:1rem}
.site-footer__btn{
  min-height:44px;
  padding:0;
  border:0;
  background:none;
  color:var(--card);
  font:inherit;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:4px;
  cursor:pointer;
}
.site-footer__links [aria-current="page"]{text-decoration:none;color:var(--sea-soft)}

/* ---------- Cookie consent ---------- */

.consent{
  position:fixed;
  left:var(--s-4);
  right:var(--s-4);
  bottom:calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  z-index:70;
  max-width:560px;
  margin-inline:auto;
  padding:var(--s-5);
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-hover);
}
.consent p{color:var(--ink-soft)}
.consent strong{color:var(--ink)}
.consent__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-4)}
.consent__actions .btn{flex:1 1 auto}
.consent-open .wa-float{opacity:0;visibility:hidden}

/* ---------- Legal pages ---------- */

.legal{padding-block:var(--s-7) var(--s-8)}
.legal__title{margin-bottom:var(--s-3);font-size:clamp(2.25rem, 1.5rem + 3.5vw, 3.5rem)}
.legal__updated{margin-bottom:var(--s-6);color:var(--muted)}
.legal h2{margin:var(--s-6) 0 var(--s-3);font-size:1.5rem}
.legal p,.legal li{color:var(--ink-soft)}
.legal strong{color:var(--ink)}
.legal ul{margin:0 0 var(--s-3);padding-left:1.25em}
.legal li{margin-bottom:var(--s-2)}
.legal a{display:inline-block;padding-block:11px;margin-block:-11px;text-underline-offset:4px}

/* ---------- Floating WhatsApp ---------- */

.wa-float{
  position:fixed;
  right:var(--s-4);
  bottom:calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  z-index:60;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  min-width:56px;
  height:56px;
  padding:0 20px 0 16px;
  border-radius:var(--radius-pill);
  background:var(--whatsapp);
  color:var(--ink);
  font-weight:700;
  text-decoration:none;
  box-shadow:var(--shadow-hover);
  transition:transform .2s ease, opacity .2s ease, visibility 0s linear 0s;
}
.wa-float .icon{color:var(--card)}
.wa-float:hover{transform:translateY(-2px)}
.wa-float.is-tucked{
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:transform .2s ease, opacity .2s ease, visibility 0s linear .2s;
}
@media (max-width:399px){
  .wa-float{width:56px;padding:0}
  .wa-float__text{display:none}
}

/* ---------- 404 page ---------- */

.not-found{
  display:flex;
  align-items:center;
  min-height:60svh;
  padding-block:var(--s-8);
}
.not-found__title{
  max-width:16ch;
  margin-bottom:var(--s-4);
  font-size:clamp(2.25rem, 1.5rem + 3.5vw, 3.5rem);
}
.not-found__text{max-width:36em;margin-bottom:var(--s-6);color:var(--ink-soft)}
.not-found__actions{display:flex;flex-wrap:wrap;gap:var(--s-3)}
.not-found__actions .btn{width:100%}
.site-footer--short{padding-bottom:var(--s-7)}

/* ---------- Tablet: 768px ---------- */

@media (min-width:768px){
  .container{padding-inline:var(--s-5)}
  .section{padding-block:var(--s-8)}
  .wave{height:64px}

  .hero__cta .btn,
  .not-found__actions .btn{width:auto}
  .season-result{padding:var(--s-6)}
  .season-result__actions .btn--coral{width:auto}

  .steps{grid-template-columns:repeat(3, 1fr)}
  .grid--2{grid-template-columns:repeat(2, 1fr)}
  .plan{display:grid;grid-template-columns:1fr 1fr}
  .plan .pkg__media{aspect-ratio:auto;height:100%}
  .trust{grid-template-columns:repeat(3, 1fr)}
  .trust__item{flex-direction:column}

  .contact{grid-template-columns:5fr 7fr;gap:var(--s-7)}
}

/* ---------- Desktop: 1100px and up ---------- */

@media (min-width:1100px){
  .container{padding-inline:var(--s-6)}
  .plan{grid-template-columns:5fr 6fr}
  .plan .btn{width:auto}
  .contact__options{flex-direction:row;align-items:flex-end;gap:var(--s-6)}
  .wave{height:80px}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
  .btn:hover,.card:hover,.month:hover,.month[aria-pressed="true"],
  .copy-btn:hover,.wa-float:hover,.wa-float.is-tucked{transform:none}
}