/* /surf e /en/surf — secoes depois dos spots, v2 (2026-10-07)
 * Ideia: a pagina "mergulha" no oceano — ondulacao animada (.sx-swell) leva do areal (spots) ao mar escuro (aulas + niveis)
 * e volta a superficie (guia). Mesma paleta do hero (.bh4): abismo #061428, fundo #0b2a4c, oceano #12406f, espuma #e3ecf7, dourado #d8b55a/#f2d78f.
 * Movimento: so a ondulacao (lenta, ambiente) + reacao a hover/toque. prefers-reduced-motion desliga tudo.
 */
:root{--sx-abyss:#061428; --sx-deep:#0b2a4c; --sx-ocean:#12406f; --sx-foam:#e3ecf7; --sx-mist:#a9bdd3; --sx-g1:#d8b55a; --sx-g2:#f2d78f; --sx-ink:#07152A; --sx-line:#e6ecf3;}
#spot-filters{scroll-margin-top:72px;}
.sh .bh4__inner{padding-top:88px;}
@media (max-width:1180px){ .sh .bh4__inner{padding-top:84px;} } /* 84 = barra de navegacao (60) + folga: o kicker ficava tapado no telemovel */

.sx-wrap{max-width:1240px; margin:0 auto; padding:0 20px; position:relative;}
.sx-h{margin:0; font-family:'Bodoni Moda',Georgia,serif; font-weight:700; font-size:clamp(2rem,3.6vw,3rem); line-height:1.04; letter-spacing:-.015em; color:var(--sx-ink);}
.sx-h--light{color:#fff;}
.sx-h3{margin:0 0 8px; font-family:'Bodoni Moda',Georgia,serif; font-size:1.35rem; font-weight:700; color:var(--sx-ink);}
.sx-p{margin:14px 0 0; font-size:1.05rem; line-height:1.65; color:#526077; max-width:58ch;}
.sx-p--light{color:var(--sx-foam);}
.sx-small{margin:0; font-size:.92rem; line-height:1.6; color:#526077; max-width:60ch;}
.sx-quiet{margin:20px 0 0; font-size:.9rem; color:#64748b;}
.sx-quiet a{color:#0a3d6b; font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;}
.sx-quiet--light{color:var(--sx-mist);} .sx-quiet--light a{color:#fff;}
.sx-link{display:inline-flex; align-items:center; gap:7px; margin-top:16px; font-weight:600; color:#0a3d6b; text-decoration:none;}
.sx-link svg, .sx-guides svg, .sx-lv__cta svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s ease;}
.sx-link:hover svg, .sx-guides a:hover svg, .sx-lv__cta:hover svg{transform:translateX(4px);}

/* ── Ondulacao (transicoes) ──────────────────────────────────────────── */
.sx-swell{position:relative; height:90px; overflow:hidden; background:var(--sx-top); margin-top:-1px;}
.sx-swell svg{position:absolute; left:0; bottom:-1px; width:200%; max-width:none; height:100%; animation:sx-drift 26s linear infinite;}
.sx-swell__a path{fill:var(--sx-bot); opacity:.55;}
.sx-swell__b{animation-duration:17s !important; animation-direction:reverse !important;}
.sx-swell__b path{fill:var(--sx-bot);}
.sx-swell--in .sx-swell__a path{fill:#12406f; opacity:.9;}
.sx-swell--out .sx-swell__a path{fill:#c9dced; opacity:.6;}
@keyframes sx-drift{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ── Oceano: aulas + niveis ──────────────────────────────────────────── */
.sx-ocean{position:relative; isolation:isolate; color:#fff;
  background:radial-gradient(70% 50% at 85% 0%, rgba(18,64,111,.85) 0%, rgba(18,64,111,0) 70%), linear-gradient(180deg, var(--sx-abyss) 0%, var(--sx-deep) 55%, var(--sx-abyss) 100%);}
.sx-ocean::before{content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(143,194,242,.16) 1px, transparent 1.2px); background-size:26px 26px;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);}

.sx-learn{position:relative; padding:56px 0 96px; overflow:hidden;}
.sx-learn__photo{position:absolute; top:0; right:0; height:560px; width:62%; z-index:-1; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 35%, rgba(0,0,0,.8) 100%); mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 35%, rgba(0,0,0,.8) 100%);}
.sx-learn__photo img{width:100%; height:100%; object-fit:cover; opacity:.55; filter:saturate(.85);}
/* O widget do GetYourGuide escolhe o layout UMA vez ao carregar: abaixo de ~600 px de largura empilha as 3 aulas (1380 px de altura).
   Por isso o widget ocupa a largura toda e o texto fica por cima em duas colunas. */
.sx-learn__grid{display:grid; grid-template-columns:minmax(0,1fr); gap:36px;}
.sx-learn__copy{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:0 56px; align-items:end;}
.sx-learn__copy > .sx-h{grid-column:1; grid-row:1;}
.sx-learn__copy > .sx-p{grid-column:1; grid-row:2;}
.sx-learn__copy > .sx-ticks{grid-column:2; grid-row:1 / span 2; margin-top:0; align-self:end;}
.sx-learn__copy > .sx-quiet{grid-column:2; grid-row:3; margin-top:16px;}
.sx-ticks{margin:26px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px;}
.sx-ticks li{display:flex; align-items:flex-start; gap:12px; font-size:1rem; line-height:1.45; color:#fff;}
.sx-ticks svg{width:22px; height:22px; flex:0 0 22px; padding:4px; border-radius:50%; background:rgba(52,224,176,.16); stroke:#6ff0c9; fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}
.sx-learn__box{position:relative; padding:16px; border-radius:24px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 40px 80px -40px rgba(0,0,0,.8);}
.sx-learn__box::before{content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(135deg, rgba(242,215,143,.7), rgba(255,255,255,.05) 40%, rgba(111,240,201,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;}
.sx-learn__head{display:flex; align-items:center; gap:12px; padding:4px 6px 14px;}
.sx-learn__ico{width:42px; height:42px; flex:0 0 42px; border-radius:13px; display:grid; place-items:center; background:linear-gradient(135deg,var(--sx-g1),var(--sx-g2));}
.sx-learn__ico svg{width:21px; height:21px; fill:none; stroke:var(--sx-ink); stroke-width:2.2; stroke-linecap:round;}
.sx-learn__t{margin:0; font-weight:700; font-size:1.02rem; color:#fff;}
.sx-learn__s{margin:2px 0 0; font-size:.8rem; color:var(--sx-mist);}
.sx-learn__widget{border-radius:16px; background:#fff; min-height:150px; padding:6px; overflow:hidden;}
.sx-learn__all{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px; min-height:50px; border-radius:14px;
  background:linear-gradient(135deg,var(--sx-g1),var(--sx-g2)); color:var(--sx-ink); font-weight:700; font-size:.95rem; text-decoration:none;
  box-shadow:0 14px 30px -14px rgba(216,181,90,.9); transition:transform .2s ease, filter .2s ease;}
.sx-learn__all:hover{transform:translateY(-2px); filter:brightness(1.05);}
.sx-learn__all svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.sx-credit{position:absolute; right:14px; bottom:10px; margin:0; font-size:10px; color:rgba(255,255,255,.4);}

.sx-levels{padding:16px 0 104px;}
.sx-levels__head{max-width:640px; margin-bottom:36px;}
.sx-levels__grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px;}
.sx-lv{position:relative; isolation:isolate; overflow:hidden; display:flex; min-height:470px; border-radius:24px; border:1px solid rgba(255,255,255,.14); background:var(--sx-deep);
  box-shadow:0 30px 60px -36px rgba(0,0,0,.9); transition:transform .35s cubic-bezier(.22,1,.36,1), border-color .35s ease;}
.sx-lv__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transform:scale(1.02); transition:transform 1.2s cubic-bezier(.22,1,.36,1);}
.sx-lv::after{content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(6,20,40,.05) 0%, rgba(6,20,40,.35) 38%, rgba(6,20,40,.92) 72%, var(--sx-abyss) 100%);}
.sx-lv:hover{transform:translateY(-6px); border-color:rgba(242,215,143,.55);}
.sx-lv:hover .sx-lv__img{transform:scale(1.09);}
.sx-lv__body{margin-top:auto; width:100%; padding:22px; display:flex; flex-direction:column; gap:10px;}
.sx-lv__glyph{width:120px; height:34px; margin-bottom:4px; overflow:visible;}
.sx-lv__glyph path{fill:none; stroke-width:3; stroke-linecap:round; stroke-dasharray:420; stroke-dashoffset:0; transition:stroke-dashoffset 1.2s ease;}
.sx-lv--iniciante .sx-lv__glyph path{stroke:#34e0b0;} .sx-lv--intermedio .sx-lv__glyph path{stroke:#7cb6ff;}
.sx-lv--avancado .sx-lv__glyph path{stroke:#ff8a5c;} .sx-lv--trip .sx-lv__glyph path{stroke:var(--sx-g2);}
.sx-lv:hover .sx-lv__glyph path{animation:sx-draw 1.1s ease;}
@keyframes sx-draw{from{stroke-dashoffset:420;} to{stroke-dashoffset:0;}}
.sx-lv__rng{margin:0; font-size:.82rem; font-weight:600; color:var(--sx-g2);}
.sx-lv__t{margin:0; font-family:'Bodoni Moda',Georgia,serif; font-size:1.65rem; font-weight:700; line-height:1.05; color:#fff;}
.sx-lv__d{margin:0; font-size:.9rem; line-height:1.5; color:var(--sx-foam); min-height:2.7em;}
.sx-lv__chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:2px;}
.sx-lv__chip{padding:5px 11px; border-radius:999px; font-size:.76rem; font-weight:600; color:#fff; text-decoration:none;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:background .2s ease;}
.sx-lv__chip:hover{background:rgba(255,255,255,.24);}
.sx-lv__cta{display:inline-flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; min-height:46px; padding:0 16px; border-radius:14px;
  background:#fff; color:var(--sx-ink); font-weight:700; font-size:.9rem; text-decoration:none; transition:background .2s ease;}
.sx-lv__cta:hover{background:var(--sx-g2);}
.sx-lv--trip .sx-lv__cta{background:linear-gradient(135deg,var(--sx-g1),var(--sx-g2));}

/* ── Guia (superficie) ───────────────────────────────────────────────── */
.sx-guide{padding:40px 0 80px; background:#fff;}
.sx-guide .sx-h{margin-bottom:28px;}
.sx-guide__top{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:18px;}
.sx-panel{padding:26px; border-radius:24px; background:#f5f8fb; border:1px solid var(--sx-line);}
.sx-panel--boards{background:linear-gradient(160deg,#fbf6e8 0%,#f5f8fb 70%);}
.sx-panel--types{margin-top:18px;}
.sx-season{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:6px; align-items:end; height:150px; margin:22px 0 0; padding:0; list-style:none;}
.sx-month{display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:8px; height:100%;}
.sx-month__bar{width:100%; max-width:34px; height:var(--h); border-radius:10px 10px 4px 4px; background:#d6e2ee; transform-origin:bottom; transition:transform .3s ease;}
.sx-month.is-swell .sx-month__bar{background:linear-gradient(180deg,#12406f,#0a2a4c);}
.sx-month.is-learn .sx-month__bar{background:linear-gradient(180deg,#34e0b0,#1fa880);}
.sx-month:hover .sx-month__bar{transform:scaleY(1.06);}
.sx-month__m{font-size:.78rem; font-weight:600; color:#64748b;}
.sx-season__key{display:flex; flex-wrap:wrap; gap:8px 20px; margin:16px 0 0; padding:0; list-style:none; font-size:.84rem; color:#475569;}
.sx-season__key li{display:inline-flex; align-items:center; gap:8px;}
.sx-season__key i{width:12px; height:12px; border-radius:4px;}
.sx-season__key .is-swell i{background:#12406f;} .sx-season__key .is-learn i{background:#34e0b0;}
.sx-types{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:18px 0 0; padding:0; list-style:none;}
.sx-type h4{margin:12px 0 6px; font-size:1rem; font-weight:700; color:var(--sx-ink);}
.sx-type p{margin:0; font-size:.9rem; line-height:1.55; color:#526077;}
.sx-diag{width:100%; height:auto; aspect-ratio:200/110; border-radius:16px; background:linear-gradient(180deg,#e9f2fa 0%,#d9e8f5 100%);}
.sx-diag__sea{fill:none; stroke:#12406f; stroke-width:3; stroke-linecap:round;}
.sx-diag__lip{fill:none; stroke:#34a3e0; stroke-width:3; stroke-linecap:round;}
.sx-diag__bottom{fill:none; stroke:#c9a84c; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}
.sx-diag__sand circle{fill:#c9a84c;}
.sx-diag__land{fill:#c9dbc2; stroke:#7f9c76; stroke-width:2;}
.sx-diag__dot{fill:#c9a84c;}
.sx-guides{margin-top:36px;}
.sx-guides ul{margin:12px 0 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 32px;}
.sx-guides a{position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 0; border-bottom:1px solid var(--sx-line);
  color:var(--sx-ink); font-family:'Bodoni Moda',Georgia,serif; font-size:1.12rem; font-weight:700; text-decoration:none;}
.sx-guides a::after{content:''; position:absolute; left:0; bottom:-1px; height:2px; width:100%; background:var(--sx-g1); transform:scaleX(0); transform-origin:left; transition:transform .35s ease;}
.sx-guides a:hover::after{transform:scaleX(1);}
.sx-b2b{margin-top:26px;}

/* ── Alertas (so visual; estrutura do formulario intacta — ver watchlist Turnstile) ── */
.surf-alerts{padding:72px 20px !important; background:#f6f4ef !important; border-top:0 !important;}
.surf-alerts-inner{max-width:560px !important; padding:36px 32px; border-radius:28px; background:#fff; border:1px solid var(--sx-line); box-shadow:0 30px 60px -40px rgba(10,61,107,.45);}
.surf-alerts-eyebrow{letter-spacing:.06em !important; text-transform:none !important; font-size:.85rem !important; color:#1fa880 !important;}
.surf-alerts-title{font-size:clamp(1.7rem,3vw,2.2rem) !important; color:var(--sx-ink) !important;}

/* ── Banda final ──────────────────────────────────────────────────────── */
.sx-plan{position:relative; overflow:hidden; padding:96px 0 72px; color:#fff; background:radial-gradient(60% 140% at 85% 100%, #12406f 0%, #0b2a4c 45%, var(--sx-abyss) 100%);}
.sx-plan .sx-swell{position:absolute; left:0; right:0; top:0; height:70px; background:transparent; transform:scaleY(-1);}
.sx-swell--plan .sx-swell__a path{fill:#f6f4ef; opacity:.25;} .sx-swell--plan .sx-swell__b path{fill:#f6f4ef;}
.sx-plan__in{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:center;}
.sx-plan__h{margin:0; font-family:'Bodoni Moda',Georgia,serif; font-weight:700; font-size:clamp(2rem,3.6vw,3rem); line-height:1.04; color:#fff;}
.sx-plan__p{margin:12px 0 0; max-width:52ch; color:var(--sx-foam); line-height:1.6;}
.sx-plan__row{display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end;}
.sx-btn{display:inline-flex; align-items:center; gap:9px; min-height:52px; padding:0 22px; border-radius:999px; font-weight:700; font-size:.95rem; text-decoration:none; transition:transform .2s ease, filter .2s ease, background .2s ease;}
.sx-btn svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.sx-btn--gold{color:var(--sx-ink); background:linear-gradient(135deg,var(--sx-g1) 0%,var(--sx-g2) 100%); box-shadow:0 14px 32px -14px rgba(216,181,90,.95);}
.sx-btn--ghost{color:#fff; font-weight:600; border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.06);}
.sx-btn:hover{transform:translateY(-2px); filter:brightness(1.06);}

/* ── Perguntas frequentes: 2 colunas no ecra largo ──────────────────── */
@media (min-width:960px){
  .surf-faq{max-width:1240px !important; padding:88px 20px !important; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:56px; align-items:start;}
  .surf-faq-header{position:sticky; top:96px;}
}
.surf-faq-title{font-size:clamp(2rem,3.4vw,2.8rem) !important; color:var(--sx-ink) !important; line-height:1.05;}
.surf-faq .faq-item{border-radius:18px; border-color:var(--sx-line); transition:box-shadow .3s ease, border-color .3s ease;}
.surf-faq .faq-item.open{border-color:#c9dbee; box-shadow:0 18px 40px -28px rgba(10,61,107,.5);}
.surf-faq .faq-header{padding:20px 22px;}
.surf-faq .faq-question{font-size:1rem;}
.surf-faq .faq-chevron{width:30px; height:30px; padding:6px; border-radius:50%; background:#f2f6fa; stroke:#0a3d6b;}
.surf-faq .faq-item.open .faq-chevron{background:var(--sx-ink); stroke:#fff;}
.surf-faq .faq-answer{border-top:0; padding:0 22px 22px; font-size:.95rem;}

/* ── Responsivo ───────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .sx-levels__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sx-lv{min-height:420px;}
  .sx-plan__in{grid-template-columns:minmax(0,1fr);} .sx-plan__row{justify-content:flex-start;}
}
@media (max-width:900px){
  .sx-learn__grid{gap:28px;}
  .sx-learn__copy{grid-template-columns:minmax(0,1fr);}
  .sx-learn__copy > *{grid-column:1 !important; grid-row:auto !important;}
  .sx-learn__copy > .sx-ticks{margin-top:22px;}
  .sx-learn__photo{width:100%; height:420px; bottom:auto; -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.7) 0%, transparent 100%); mask-image:linear-gradient(180deg, rgba(0,0,0,.7) 0%, transparent 100%);}
  .sx-guide__top{grid-template-columns:minmax(0,1fr);}
  .sx-types{grid-template-columns:minmax(0,1fr); gap:18px;}
  .sx-type{display:grid; grid-template-columns:120px minmax(0,1fr); gap:0 14px; align-items:start;}
  .sx-type .sx-diag{grid-row:span 2;} .sx-type h4{margin-top:2px;}
  .sx-guides ul{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:640px){
  .sx-wrap{padding:0 16px;}
  .sx-swell{height:60px;}
  .sx-learn{padding:40px 0 72px;}
  .sx-learn__box{padding:12px; border-radius:20px;}
  .sx-levels{padding:8px 0 80px;}
  /* niveis: carrossel horizontal com encaixe */
  .sx-levels__grid{display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -16px; padding:4px 16px 12px; scrollbar-width:none;}
  .sx-levels__grid::-webkit-scrollbar{display:none;}
  .sx-lv{flex:0 0 82%; min-height:440px; scroll-snap-align:center;}
  .sx-guide{padding:28px 0 64px;}
  .sx-panel{padding:20px; border-radius:20px;}
  .sx-season{height:120px; gap:4px;}
  .sx-month__m{font-size:.7rem;}
  .surf-alerts{padding:56px 16px !important;}
  .surf-alerts-inner{padding:28px 20px;}
  .sx-plan{padding:80px 0 56px;}
  .sx-plan__row{flex-direction:column;} .sx-btn{justify-content:center;}
}
@media (prefers-reduced-motion:reduce){
  .sx-swell svg{animation:none !important;}
  .sx-lv, .sx-lv__img, .sx-learn__all, .sx-btn, .sx-guides a::after, .sx-month__bar{transition:none;}
  .sx-lv:hover, .sx-lv:hover .sx-lv__img{transform:none;}
  .sx-lv:hover .sx-lv__glyph path{animation:none;}
}

/* main tem 16px de margem ate 768px (style.css): as faixas de cor vao de ponta a ponta */
@media (max-width:768px){ .sx-swell, .sx-ocean, .sx-guide, .sx-plan, .surf-alerts{margin-left:-16px !important; margin-right:-16px !important; width:calc(100% + 32px) !important; max-width:none !important;} }

/* Creditos de fotos quase invisiveis (pedido do Ricardo, 07/10/2026). O texto fica na pagina porque as licencas CC/Pexels/Unsplash exigem atribuicao; so aparece melhor com o rato/foco. */
.sx-credit{opacity:.28 !important; font-size:9px !important; letter-spacing:0 !important; text-shadow:none !important; transition:opacity .2s ease;}
.sx-credit:hover, .sx-credit:focus-within{opacity:.75 !important;}