@charset "utf-8";
/* =============================================================
RÉVEILLON UBA 2027 · Barra Grande, Piauí
theme.css — sistema visual "cordel maximalista"
ÍNDICE
01 tokens · 02 reset/base · 03 tipografia · 04 grafismo de cordel
05 nav · 06 hero · 07 seções genéricas · 08 conceito/manifesto
09 as festas · 10 destino · 11 wellness · 12 como chegar
13 ingressos · 14 faq · 15 news · 16 rodapé · 17 guia · 18 utils
============================================================= */
/* ── 01 TOKENS ───────────────────────────────────────────────── */
:root{
/* paleta amostrada dos PDFs oficiais (valores RGB do GUIA, que é o
arquivo digital — a APRESENTAÇÃO está em CMYK convertido, mais opaca) */
--areia:#FFD5A2; --areia-2:#FFE4C4; --areia-3:#FFF0DC;
--roxo:#5200B1; --roxo-esc:#37007A; --roxo-2:#6B21D6;
--magenta:#FF128E; --limao:#C7FE00;
--verde:#00C33C; --verde-esc:#006D00;
--vermelho:#D51F12; --laranja:#FF3800; --ocre:#D06E00;
--azul:#3247A0; --preto:#140C08; --branco:#FFF9F0;
/* cor de acento da seção — cada bloco redefine e tudo se ajusta */
--cor:var(--roxo);
--sobre-cor:var(--branco);
--font-serif:"Playfair Display",Georgia,"Times New Roman",serif;
--font-sans:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
--font-mono:"Space Mono",ui-monospace,"SF Mono",Menlo,monospace;
--fs-lede:clamp(1.05rem,.94rem + .55vw,1.35rem);
--fs-body:clamp(.95rem,.9rem + .25vw,1.05rem);
--fs-small:clamp(.68rem,.63rem + .2vw,.78rem);
--pad-x:clamp(1.15rem,5vw,6rem);
--pad-y:clamp(3.4rem,8vh,6.5rem);
--maxw:1240px;
--nav-h:68px;
--ease:cubic-bezier(.22,1,.36,1);
--d-quick:.28s; --d-soft:.5s; --d-breath:.85s;
color-scheme:light;
accent-color:var(--roxo);
}
/* ── 02 RESET / BASE ─────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
margin:0;background:var(--areia);color:var(--preto);
font-family:var(--font-sans);font-size:var(--fs-body);line-height:1.6;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:3px solid var(--limao);outline-offset:3px}
::selection{background:var(--limao);color:var(--preto)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* z-index:2 garante que o conteúdo sempre fique acima dos ornamentos de cordel */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x);position:relative;z-index:2}
section{padding-block:var(--pad-y);position:relative}
/* grão — dá textura de papel de cordel sobre as cores chapadas */
.grain{
position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.07;mix-blend-mode:multiply;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scrollbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:1200;
background:linear-gradient(90deg,var(--magenta),var(--limao) 45%,var(--laranja));transition:width .1s linear}
/* ── 03 TIPOGRAFIA ───────────────────────────────────────────── */
h1,h2,h3,h4{margin:0;line-height:1.02;letter-spacing:-.015em}
h1,h2{font-family:var(--font-serif);font-weight:800}
h3,h4{font-family:var(--font-sans);font-weight:800;letter-spacing:-.01em}
p{margin:0}
.h1{font-size:clamp(2.6rem,1.4rem + 5.4vw,5.6rem)}
.h2{font-size:clamp(1.9rem,1.1rem + 2.8vw,3.4rem);text-wrap:balance}
.h3{font-size:clamp(1.3rem,1rem + 1.2vw,1.9rem)}
.lede{font-size:var(--fs-lede);line-height:1.5;max-width:56ch}
.lede b,.lede strong{font-weight:700}
.eyebrow{
font-family:var(--font-mono);font-size:var(--fs-small);font-weight:700;
letter-spacing:.24em;text-transform:uppercase;color:var(--cor);
display:inline-flex;align-items:center;gap:.65rem;
}
.eyebrow::before{content:"";width:22px;height:3px;background:currentColor;flex:0 0 auto}
.mono{font-family:var(--font-mono);font-size:var(--fs-small);letter-spacing:.14em;
text-transform:uppercase;font-variant-numeric:tabular-nums}
.sec-head{margin-bottom:clamp(1.8rem,3.6vh,2.8rem)}
.eyebrow + h2,.eyebrow + .h2{margin-top:1rem}
h2 + .lede,.h2 + .lede,.h2 + .citacao{margin-top:1.2rem}
/* grifo em bloco de cor, como no material impresso */
.grifo{background:var(--limao);color:var(--preto);padding:.05em .3em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* ── 04 GRAFISMO DE CORDEL ───────────────────────────────────── */
/* Os motivos vêm de assets/svg/cordel.svg (traçados dos PDFs oficiais).
Todos usam currentColor no traço principal → recoloríveis por seção. */
.orn{position:absolute;pointer-events:none;z-index:1;color:var(--cor);
opacity:0;transition:opacity .5s var(--ease)}
/* main.js injeta o sprite e marca .sprite-ok — evita "piscar" ornamento vazio */
.sprite-ok .orn{opacity:var(--orn-op,1)}
.orn use{width:100%;height:100%}
.orn svg{width:100%;height:100%;display:block}
/* réguas / bordas repetíveis — máscara CSS: repete em qualquer largura,
não depende do sprite e escala sem perder o encaixe dos vértices */
.rule{display:block;width:100%;height:var(--rule-h,18px);position:relative;z-index:4;flex:0 0 auto;
background:currentColor;
-webkit-mask:var(--m) repeat-x left center/var(--ms);
mask:var(--m) repeat-x left center/var(--ms)}
/* losangos encostados pelas pontas — o zigue-zague do cordel */
.rule-zigue{--rule-h:18px;--ms:24px 18px;
--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='18' viewBox='0 0 24 18'%3E%3Cpath d='M12 0 24 9 12 18 0 9Z' fill='%23000'/%3E%3C/svg%3E")}
/* dentes/triângulos — a fileira vermelha acima do olho */
.rule-dentes{--rule-h:16px;--ms:22px 16px;
--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='16' viewBox='0 0 22 16'%3E%3Cpath d='M11 0c3 0 6 7 6 11 0 3-12 3-12 0C5 7 8 0 11 0Z' fill='%23000'/%3E%3C/svg%3E")}
/* onda — as linhas onduladas ocre */
.rule-onda{--rule-h:14px;--ms:36px 14px;
--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='14' viewBox='0 0 36 14'%3E%3Cpath d='M0 10c4.5 0 4.5-6 9-6s4.5 6 9 6 4.5-6 9-6 4.5 6 9 6v4H0Z' fill='%23000'/%3E%3C/svg%3E")}
/* serrilha vertical nas laterais de um bloco */
.serrilhado{position:relative}
.serrilhado::before,.serrilhado::after{
content:"";position:absolute;top:0;bottom:0;width:14px;z-index:3;
background:var(--serr,var(--roxo));
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='28' viewBox='0 0 14 28'%3E%3Cpath d='M0 0 14 7 0 14 14 21 0 28Z' fill='%23000'/%3E%3C/svg%3E") repeat-y left center/14px 28px;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='28' viewBox='0 0 14 28'%3E%3Cpath d='M0 0 14 7 0 14 14 21 0 28Z' fill='%23000'/%3E%3C/svg%3E") repeat-y left center/14px 28px;
}
.serrilhado::before{left:0}
.serrilhado::after{right:0;transform:scaleX(-1)}
/* moldura completa de cordel para blocos-herói */
.moldura{position:relative;isolation:isolate}
.moldura>.orn{z-index:2}
/* selo circular giratório (o "TRAVEL · MUSIC · EXPERIENCE" da marca) */
.selo{width:var(--s,118px);height:var(--s,118px);position:relative;flex:0 0 auto}
.selo svg{width:100%;height:100%;animation:gira 22s linear infinite}
.selo .selo-mid{position:absolute;inset:0;display:grid;place-items:center;
font-family:var(--font-sans);font-weight:800;font-size:calc(var(--s,118px)*.2);letter-spacing:.02em}
@keyframes gira{to{transform:rotate(360deg)}}
/* logotipo UBA 2027 — recriação tipográfica do lockup da marca */
.lockup{display:inline-flex;align-items:center;gap:.14em;font-family:var(--font-sans);
font-weight:800;letter-spacing:-.04em;line-height:1;font-size:var(--lk,3rem)}
.lockup .lk-uba{font-stretch:expanded}
/* o "2027" é vazado. Usa text-fill-color (e NÃO color:transparent), senão o
currentColor do contorno também vira transparente e o número some. */
.lockup .lk-ano{letter-spacing:0;
-webkit-text-stroke:.055em currentColor;
-webkit-text-fill-color:transparent}
@supports not (-webkit-text-stroke:1px red){.lockup .lk-ano{opacity:.7}}
/* ── ANIMAÇÃO DE ENTRADA ─────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(20px);
transition:opacity var(--d-breath) var(--ease),transform var(--d-breath) var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.07s}
.reveal.d2{transition-delay:.14s}
.reveal.d3{transition-delay:.21s}
.reveal.d4{transition-delay:.28s}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.reveal{opacity:1;transform:none;transition:none}
.selo svg{animation:none}
}
/* ── 05 NAV ──────────────────────────────────────────────────── */
.nav{position:fixed;inset:0 0 auto;z-index:1050;transition:background var(--d-soft) var(--ease)}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;opacity:0;
transition:opacity var(--d-soft) var(--ease);
background:repeating-linear-gradient(90deg,var(--magenta) 0 14px,var(--limao) 14px 28px)}
.nav.scrolled{background:var(--roxo)}
.nav.scrolled::after{opacity:1}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;
padding:.85rem clamp(1rem,4vw,2.2rem);transition:padding var(--d-quick) var(--ease)}
.nav-logo{display:inline-flex;align-items:center;color:var(--branco);--lk:1.5rem;flex:0 0 auto}
.nav.scrolled .nav-inner{padding-block:.6rem}
.nav-links{display:flex;align-items:center;gap:clamp(.8rem,1.8vw,1.9rem)}
.nav-links .link{color:var(--branco);font-size:.74rem;font-weight:700;letter-spacing:.14em;
text-transform:uppercase;position:relative;padding-block:.3rem}
.nav-links .link::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:3px;
background:var(--limao);transition:right var(--d-quick) var(--ease)}
.nav-links .link:hover::after,.nav-links .link:focus-visible::after{right:0}
.nav-actions{display:flex;align-items:center;gap:.6rem}
.pill{display:inline-flex;align-items:center;gap:.45rem;border-radius:999px;
padding:.5rem .95rem;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
border:2px solid var(--branco);color:var(--branco);transition:all var(--d-quick) var(--ease)}
.pill:hover{background:var(--branco);color:var(--roxo)}
.pill.cta{background:var(--limao);border-color:var(--limao);color:var(--preto)}
.pill.cta:hover{background:var(--magenta);border-color:var(--magenta);color:var(--branco)}
.pill.ic{padding:.5rem;border-radius:999px}
.pill.ic svg{width:16px;height:16px;fill:currentColor}
.nav-toggle{display:none;width:42px;height:38px;flex-direction:column;justify-content:center;gap:5px;padding:0 8px}
.nav-toggle span{display:block;height:3px;background:var(--branco);transition:transform var(--d-quick) var(--ease),opacity var(--d-quick)}
.nav.open .nav-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav.open .nav-toggle span:nth-child(2){opacity:0}
.nav.open .nav-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media (max-width:900px){
.nav-toggle{display:flex}
.nav-links{position:fixed;inset:var(--nav-h) 0 auto;flex-direction:column;align-items:stretch;
gap:0;background:var(--roxo);padding:1rem var(--pad-x) 2rem;
transform:translateY(-12px);opacity:0;pointer-events:none;
transition:opacity var(--d-quick) var(--ease),transform var(--d-quick) var(--ease);
max-height:calc(100dvh - var(--nav-h));overflow:auto;
border-bottom:6px solid var(--limao)}
.nav.open .nav-links{transform:none;opacity:1;pointer-events:auto}
.nav.open{background:var(--roxo)}
.nav-links .link{font-size:1rem;padding-block:.85rem;border-bottom:1px solid rgba(255,249,240,.2)}
.nav-actions .pill:not(.cta){display:none}
}
/* ── 06 HERO ─────────────────────────────────────────────────── */
.hero{min-height:100svh;display:grid;place-items:center;padding-block:calc(var(--nav-h) + 2rem) 3rem;
background:var(--roxo);overflow:hidden;--cor:var(--limao)}
/* A foto do herói é um ![]()
de verdade (e não background) para virar o LCP,
poder usar fetchpriority e ter srcset. */
.hero-bg{position:absolute;inset:0;overflow:hidden}
.hero-bg>img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
/* véu: escurece o suficiente para o texto ter contraste, mas o destino
continua sendo o primeiro plano — a foto tem de ser legível. */
.hero-bg::after{content:"";position:absolute;inset:0;
background:
radial-gradient(115% 80% at 50% 42%, rgba(82,0,177,.10), rgba(82,0,177,.52) 72%),
linear-gradient(180deg, rgba(20,12,8,.45), rgba(20,12,8,.10) 38%, rgba(20,12,8,.62))}
.hero-content{position:relative;z-index:3;text-align:center;color:var(--branco);
padding-inline:var(--pad-x);max-width:min(94vw,900px)}
.hero-eyebrow{color:var(--limao);justify-content:center}
.hero-mark{margin:1.4rem auto .2rem;width:min(78vw,520px);position:relative}
.hero-mark .olho{width:100%;color:var(--roxo-2)}
.hero-mark .hero-lockup{position:absolute;inset:0;display:grid;place-items:center;
--lk:clamp(2rem,7.5vw,4rem);color:var(--branco);padding-bottom:2%}
.hero h1{font-size:clamp(2.1rem,1.2rem + 4vw,4.2rem);margin-top:.3rem;text-wrap:balance}
.hero .hero-sub{font-family:var(--font-mono);font-size:clamp(.75rem,.68rem + .35vw,.95rem);
letter-spacing:.28em;text-transform:uppercase;color:var(--limao);margin-top:1.1rem}
.hero-datas{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem .9rem;margin-top:1.5rem}
.hero-datas span{font-family:var(--font-mono);font-weight:700;font-size:.8rem;letter-spacing:.1em;
border:2px solid rgba(255,249,240,.45);border-radius:999px;padding:.4rem .9rem}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:1.9rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.7rem;border-radius:999px;
font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;
border:3px solid transparent;transition:all var(--d-quick) var(--ease)}
.btn-primary{background:var(--limao);color:var(--preto);border-color:var(--limao)}
.btn-primary:hover{background:var(--magenta);border-color:var(--magenta);color:var(--branco);transform:translateY(-2px)}
.btn-ghost{border-color:currentColor}
.btn-ghost:hover{background:currentColor;color:var(--roxo);transform:translateY(-2px)}
.hero .rule{position:absolute;left:0;right:0;z-index:3}
.hero .rule.top{top:calc(var(--nav-h) - 2px)}
.hero .rule.bot{bottom:0}
/* ornamentos de canto — valem para o herói da home e o do guia */
.o-palma{width:clamp(96px,12vw,190px);aspect-ratio:1;color:var(--verde-esc);--orn-op:.92}
.o-palma.tl{top:calc(var(--nav-h) + 14px);left:0}
.o-palma.tr{top:calc(var(--nav-h) + 14px);right:0;transform:scaleX(-1)}
.o-palma.bl{bottom:16px;left:0;transform:scaleY(-1)}
.o-palma.br{bottom:16px;right:0;transform:scale(-1)}
.hero .o-guara{width:clamp(72px,8vw,124px);aspect-ratio:236/213;color:var(--laranja)}
.hero .o-guara.l{top:23%;left:3.5%}
.hero .o-guara.r{top:23%;right:3.5%;transform:scaleX(-1)}
.hero .o-bode{width:clamp(50px,5vw,84px);aspect-ratio:127/119;color:var(--preto)}
.hero .o-bode.l{bottom:19%;left:8%}
.hero .o-bode.r{bottom:19%;right:8%;transform:scaleX(-1)}
@media (max-width:900px){.hero .o-guara,.hero .o-bode{display:none}}
.hero-scroll{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);z-index:4;
color:var(--limao);font-family:var(--font-mono);font-size:.62rem;letter-spacing:.24em;
text-transform:uppercase;display:grid;justify-items:center;gap:.4rem}
.hero-scroll i{display:block;width:2px;height:26px;background:currentColor;animation:desce 1.8s var(--ease) infinite}
/* em telas curtas/estreitas o indicador colidiria com os CTAs */
@media (max-width:700px),(max-height:720px){.hero-scroll{display:none}}
@keyframes desce{0%,100%{transform:scaleY(.35);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
/* contagem regressiva */
.contagem{display:flex;gap:.5rem;justify-content:center;margin-top:1.6rem}
.contagem div{background:rgba(20,12,8,.4);border:2px solid rgba(255,249,240,.3);border-radius:14px;
padding:.5rem .8rem;min-width:64px}
.contagem b{display:block;font-family:var(--font-mono);font-size:1.35rem;font-weight:700;
line-height:1;font-variant-numeric:tabular-nums}
.contagem span{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;opacity:.8}
/* ── 07 SEÇÕES / PAINÉIS ─────────────────────────────────────── */
.painel{position:relative;overflow:hidden}
.painel-areia{background:var(--areia);--cor:var(--roxo)}
.painel-roxo{background:var(--roxo);color:var(--branco);--cor:var(--limao)}
.painel-verde{background:var(--verde-esc);color:var(--branco);--cor:var(--limao)}
.painel-preto{background:var(--preto);color:var(--branco);--cor:var(--limao)}
.painel-limao{background:var(--limao);color:var(--preto);--cor:var(--roxo)}
.painel-magenta{background:var(--magenta);color:var(--branco);--cor:var(--limao)}
/* faixa marquee de cordel entre seções */
.faixa{background:var(--cor-faixa,var(--roxo));color:var(--branco);overflow:hidden;
padding-block:.75rem;border-block:4px solid var(--preto)}
.faixa-trilho{display:flex;gap:2.4rem;width:max-content;animation:corre 34s linear infinite}
.faixa span{font-family:var(--font-sans);font-weight:800;font-size:clamp(.9rem,2.4vw,1.3rem);
letter-spacing:.02em;text-transform:uppercase;display:inline-flex;align-items:center;gap:2.4rem;white-space:nowrap}
.faixa span::after{content:"";width:14px;height:14px;background:var(--limao);
clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);flex:0 0 auto}
@keyframes corre{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.faixa-trilho{animation:none}}
/* ── 08 CONCEITO ─────────────────────────────────────────────── */
.conceito{--cor:var(--magenta)}
.conceito-grid{display:grid;gap:clamp(1.8rem,4vw,3.4rem);align-items:center;
grid-template-columns:minmax(0,1fr) minmax(0,.85fr)}
.conceito h2{color:var(--roxo)}
.conceito .lede{margin-top:1.3rem;color:var(--preto)}
.conceito-foto{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:.877;
border:5px solid var(--preto);background:var(--areia-2) center/cover no-repeat}
.pilares{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-top:2.4rem}
.pilar{background:var(--branco);border:4px solid var(--preto);border-radius:16px;padding:1.1rem 1.2rem;
box-shadow:6px 6px 0 var(--cor-pilar,var(--roxo));transition:transform var(--d-quick) var(--ease)}
.pilar:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--cor-pilar,var(--roxo))}
.pilar h4{font-size:1.05rem;margin-bottom:.35rem;color:var(--cor-pilar,var(--roxo))}
.pilar p{font-size:.9rem;line-height:1.45}
.pilar:nth-child(1){--cor-pilar:var(--magenta)}
.pilar:nth-child(2){--cor-pilar:var(--verde)}
.pilar:nth-child(3){--cor-pilar:var(--laranja)}
.pilar:nth-child(4){--cor-pilar:var(--roxo)}
@media (max-width:860px){.conceito-grid{grid-template-columns:1fr}.conceito-foto{aspect-ratio:16/10}}
/* ── 09 AS FESTAS ────────────────────────────────────────────── */
.festas{--cor:var(--limao)}
.festas-lista{display:grid;grid-auto-rows:1fr;gap:1.4rem;margin-top:2rem}
.festa{
--f:var(--roxo);
position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
border:5px solid var(--preto);border-radius:22px;overflow:hidden;background:var(--f);
color:var(--branco);transition:transform var(--d-soft) var(--ease),box-shadow var(--d-soft) var(--ease);
box-shadow:10px 10px 0 rgba(20,12,8,.55);
}
.festa:hover{transform:translate(-4px,-4px);box-shadow:16px 16px 0 rgba(20,12,8,.55)}
.festa>*{min-width:0}
/* Proporção travada: sem isso a altura de cada painel vinha do texto ao
lado, e como cada festa tem um texto de tamanho diferente os três
saíam com alturas diferentes — medido, 356, 321 e 304px. Com a
proporção fixa os três ficam iguais, e as fotos foram geradas nessa
mesma medida para preencherem sem corte. */
/* A proporção entra por um espaçador, não no próprio painel: com
aspect-ratio na caixa o navegador a trata como altura definida e ela
deixa de esticar na linha do grid — entre ~840 e 1100px o texto ficava
mais alto que a foto e sobrava uma faixa da cor do cartão embaixo.
Como ::before, a proporção vira piso e o painel volta a preencher. */
.festa-foto{position:relative;
background:var(--preto) center/cover no-repeat}
.festa-foto::before{content:"";display:block;aspect-ratio:510/356;min-height:300px}
.festa-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 45%,var(--f))}
/* ── PAINEL DE MARCA DAS FESTAS ──────────────────────────────
No lugar da foto, o logotipo de cada noite sobre a cor dela.
Os três têm diagramações bem diferentes — o Salve Simpatia é
1.83:1, o Réveillon é quadrado e o Shake é 3.75:1 — então a
regra é "contain" com folga generosa: cada um ocupa o que couber
na própria proporção, sem corte e sem deformação. */
.festa-marca{
background-color:var(--f);
background-size:contain;
background-position:center;
background-repeat:no-repeat;
/* folga extra em cima: a data fica no canto superior esquerdo e
colidia com o lettering do Salve Simpatia e do Shake */
padding:clamp(4rem,7vw,5.2rem) clamp(1.6rem,4vw,3rem) clamp(1.6rem,4vw,3rem);
background-origin:content-box;
}
.festa-marca::after{display:none} /* o degradê existia para casar foto e cor */
.festa-foto .festa-data{position:absolute;left:1.2rem;top:1.2rem;z-index:2;
font-family:var(--font-serif);font-weight:800;font-size:clamp(2rem,5vw,3.2rem);line-height:1;
color:var(--branco);text-shadow:0 3px 16px rgba(0,0,0,.6)}
.festa-corpo{padding:clamp(1.4rem,3vw,2.4rem);display:flex;flex-direction:column;gap:.85rem;justify-content:center}
.festa-nome{font-family:var(--font-serif);font-weight:800;font-size:clamp(1.9rem,1.2rem + 2.4vw,3rem);line-height:1}
.festa-tag{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
color:var(--f-ac,var(--limao))}
.festa-desc{font-size:.98rem;line-height:1.55;max-width:44ch;opacity:.95}
.festa-meta{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.3rem}
.festa-meta span{font-family:var(--font-mono);font-size:.66rem;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;border:2px solid var(--f-ac,var(--limao));color:var(--f-ac,var(--limao));
border-radius:999px;padding:.3rem .75rem}
.festa .orn{z-index:3}
.festa .o-monstera{width:120px;aspect-ratio:273/353;right:-24px;bottom:-30px;color:var(--f-ac,var(--limao));opacity:.85}
@media (max-width:820px){
.festa{grid-template-columns:1fr}
.festa-foto::before{min-height:210px}
.festa-foto::after{background:linear-gradient(180deg,transparent 40%,var(--f))}
}
/* ── 10 DESTINO ──────────────────────────────────────────────── */
.destino{--cor:var(--limao)}
.destino-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-top:2.2rem}
.dcard{border:4px solid var(--branco);border-radius:18px;overflow:hidden;position:relative;
min-height:260px;background:var(--preto) center/cover no-repeat;display:flex;align-items:flex-end;
transition:transform var(--d-quick) var(--ease)}
.dcard:hover{transform:translateY(-5px)}
.dcard::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(20,12,8,.05) 25%,rgba(20,12,8,.62) 58%,rgba(20,12,8,.94))}
.dcard-txt{position:relative;z-index:2;padding:1.1rem 1.2rem;color:var(--branco)}
.dcard h4{font-size:1.1rem;margin-bottom:.25rem}
.dcard p{font-size:.86rem;line-height:1.45;opacity:.88}
.dcard.wide{grid-column:span 2}
@media (max-width:660px){.dcard.wide{grid-column:span 1}}
/* Caiaque: a foto é vertical e o cartão é deitado, então o cover mostra
só uma faixa, e a faixa boa muda com a largura do cartão. A posição é
calculada em cqw (1% da largura do cartão; a foto cobre pela largura e
fica com 150cqw de altura): a cabeça (y≈512 de 736px → 69.57cqw) fica a
22px do topo, a menos que isso empurre o casco (y≈885 → 120.24cqw) para
além de 300px — aí o casco manda; o max() não deixa passar do fim da foto.
Vai num ::before porque cqw na própria caixa mede o container de cima
(a tela), não o cartão. O ::before herda a imagem que o main.js põe
inline e cobre o fundo original. Sem suporte a cqw, vale 72%. */
.dcard[data-bg*="caiaque"]{container-type:inline-size}
.dcard[data-bg*="caiaque"]::before{content:"";position:absolute;inset:0;
background-image:inherit;background-size:cover;background-repeat:no-repeat;
background-position:center 72%;
background-position:center max(300px - 150cqw,min(22px - 69.57cqw,300px - 120.24cqw))}
/* ── 11 WELLNESS ─────────────────────────────────────────────── */
.wellness{--cor:var(--verde)}
.wellness-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.6rem,4vw,3rem);align-items:center}
.wellness-foto{position:relative;border-radius:20px;overflow:hidden;aspect-ratio:4/5;
border:5px solid var(--preto);background:var(--areia-2) center/cover no-repeat}
@media (max-width:860px){.wellness-grid{grid-template-columns:1fr}}
/* ── 12 COMO CHEGAR ──────────────────────────────────────────── */
.chegar{--cor:var(--ocre)}
.rotas{display:grid;gap:.65rem;margin-top:2rem;counter-reset:r}
.rota{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:1rem;
background:var(--branco);border:4px solid var(--preto);border-radius:14px;padding:.9rem 1.2rem;
transition:transform var(--d-quick) var(--ease),background var(--d-quick) var(--ease)}
.rota:hover{transform:translateX(6px);background:var(--areia-2)}
.rota-ic{width:26px;height:26px;color:var(--roxo);flex:0 0 auto}
.rota-ic svg{width:100%;height:100%;fill:currentColor}
.rota-nome{font-weight:800;font-size:1rem}
.rota-nome small{display:block;font-weight:500;font-size:.76rem;opacity:.65;letter-spacing:0;text-transform:none}
.rota-t{font-family:var(--font-mono);font-weight:700;font-size:1rem;color:var(--roxo)}
.rota-km{font-family:var(--font-mono);font-size:.74rem;opacity:.6}
@media (max-width:640px){
.rota{grid-template-columns:auto 1fr;row-gap:.35rem}
.rota-t,.rota-km{grid-column:2}
}
/* ── 13 INGRESSOS ────────────────────────────────────────────── */
.ingressos{--cor:var(--magenta)}
.passes{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.2rem;margin-top:2.2rem}
.passe{--p:var(--roxo);
background:var(--branco);border:5px solid var(--preto);border-radius:20px;overflow:hidden;
display:flex;flex-direction:column;box-shadow:8px 8px 0 var(--p);
transition:transform var(--d-quick) var(--ease),box-shadow var(--d-quick) var(--ease)}
.passe:hover{transform:translate(-3px,-3px);box-shadow:12px 12px 0 var(--p)}
.passe-topo{background:var(--p);color:var(--branco);padding:1.1rem 1.2rem;position:relative}
.passe-topo h3{font-size:1.4rem}
.passe-selo{position:absolute;right:.9rem;top:.9rem;background:var(--limao);color:var(--preto);
font-family:var(--font-mono);font-size:.6rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
padding:.28rem .6rem;border-radius:999px;border:2px solid var(--preto)}
/* picote entre topo e corpo — o passe como objeto físico */
.passe-picote{height:16px;background:
radial-gradient(circle at 8px 8px, transparent 6px, var(--preto) 6px 8px, transparent 8px) repeat-x left center/20px 16px}
.passe-corpo{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.passe-linha{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
border-bottom:2px dotted rgba(20,12,8,.25);padding-bottom:.45rem}
.passe-linha dt{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;opacity:.65}
.passe-linha dd{margin:0;font-weight:700;font-size:.92rem;text-align:right}
.passe-desc{font-size:.88rem;line-height:1.5;opacity:.8;margin-top:.2rem}
.passe-cta{margin-top:auto;padding-top:.9rem}
.passe-cta .btn{width:100%;justify-content:center;background:var(--p);color:var(--branco);border-color:var(--p)}
.passe-cta .btn:hover{background:var(--preto);border-color:var(--preto)}
.passe.soon{opacity:.9}
.passe.soon .passe-corpo{align-items:center;justify-content:center;text-align:center;gap:.4rem;min-height:190px}
.passe.soon .cadeado{width:30px;height:30px;opacity:.4}
/* ── 14 FAQ ──────────────────────────────────────────────────── */
.faq{--cor:var(--roxo)}
.faq-lista{margin-top:2rem;border-top:4px solid var(--preto)}
.faq-item{border-bottom:4px solid var(--preto)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;
padding:1.15rem .4rem;text-align:left;font-weight:800;font-size:1.02rem;transition:color var(--d-quick)}
.faq-q:hover{color:var(--magenta)}
.faq-q .mark{width:22px;height:22px;flex:0 0 auto;position:relative}
.faq-q .mark::before,.faq-q .mark::after{content:"";position:absolute;inset:50% 0 auto;height:3px;
background:currentColor;transform:translateY(-50%);transition:transform var(--d-quick) var(--ease)}
.faq-q .mark::after{transform:translateY(-50%) rotate(90deg)}
.faq-q[aria-expanded="true"] .mark::after{transform:translateY(-50%) rotate(0)}
.faq-q[aria-expanded="true"]{color:var(--roxo)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--d-soft) var(--ease)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a>div{overflow:hidden}
.faq-a p{padding:0 .4rem 1.3rem;max-width:70ch;line-height:1.6}
/* ── 15 NEWSLETTER ───────────────────────────────────────────── */
.news{--cor:var(--limao);text-align:center}
.news-form{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem}
.news-form input{flex:1 1 280px;max-width:400px;padding:.9rem 1.1rem;border-radius:999px;
border:3px solid var(--preto);background:var(--branco);color:var(--preto);font:inherit}
.news-form input::placeholder{color:rgba(20,12,8,.45)}
.news-nota{margin-top:1rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;
text-transform:uppercase;opacity:.7}
.news-ok{margin-top:1rem;font-weight:700;color:var(--limao)}
/* ── 16 RODAPÉ ───────────────────────────────────────────────── */
.foot{background:var(--preto);color:var(--branco);padding-block:clamp(2.6rem,6vh,4.4rem) 1.6rem;--cor:var(--limao)}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:2rem}
.foot-marca .lockup{--lk:2rem;color:var(--branco)}
.foot-tag{margin-top:1rem;font-size:.9rem;line-height:1.55;opacity:.75;max-width:34ch}
.foot h4{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
color:var(--limao);margin-bottom:.9rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.foot a{font-size:.9rem;opacity:.8;transition:opacity var(--d-quick),color var(--d-quick)}
.foot a:hover{opacity:1;color:var(--limao)}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;
margin-top:2.6rem;padding-top:1.3rem;border-top:2px solid rgba(255,249,240,.18);
font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;opacity:.6}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}
/* ── 17 GUIA ─────────────────────────────────────────────────── */
.guia-hero{min-height:52svh;display:grid;place-items:center;text-align:center;
background:var(--roxo);color:var(--branco);--cor:var(--limao);
padding-block:calc(var(--nav-h) + 3rem) 3rem;overflow:hidden}
.guia-hero .hero-bg::after{background:linear-gradient(180deg,rgba(82,0,177,.82),rgba(82,0,177,.92))}
.guia-nav{position:sticky;top:var(--nav-h);z-index:900;background:var(--preto);
border-block:4px solid var(--limao);overflow-x:auto;-webkit-overflow-scrolling:touch}
.guia-nav ul{display:flex;gap:0;list-style:none;margin:0;padding:0;width:max-content;min-width:100%}
.guia-nav a{display:block;padding:.85rem 1.1rem;color:var(--branco);font-family:var(--font-mono);
font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
border-right:2px solid rgba(255,249,240,.15);transition:background var(--d-quick),color var(--d-quick)}
.guia-nav a:hover,.guia-nav a.on{background:var(--limao);color:var(--preto)}
.lista{display:grid;gap:.5rem;margin-top:1.8rem}
/* color explícito: o item é claro mesmo dentro de painéis escuros,
senão o nome herda o branco da seção e some no fundo creme */
.lista-item{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;
background:var(--branco);color:var(--preto);border:3px solid var(--preto);
border-radius:12px;padding:.8rem 1.05rem;
transition:transform var(--d-quick) var(--ease),background var(--d-quick)}
.lista-item:hover{transform:translateX(5px);background:var(--areia-2)}
.lista-nome{font-weight:800;font-size:.98rem;flex:1 1 190px}
.lista-at{font-family:var(--font-mono);font-size:.8rem;color:var(--roxo);font-weight:700}
.lista-tags{display:flex;gap:.35rem;flex-wrap:wrap}
.tag{font-family:var(--font-mono);font-size:.58rem;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;padding:.24rem .55rem;border-radius:999px;border:2px solid currentColor}
.tag.mar{color:var(--azul)} .tag.rest{color:var(--verde-esc)}
.tag.deli{color:var(--laranja)} .tag.bar{color:var(--magenta)}
.contatos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.9rem;margin-top:1.6rem}
.contato{background:var(--branco);color:var(--preto);border:4px solid var(--preto);
border-radius:16px;padding:1rem 1.1rem;box-shadow:5px 5px 0 var(--cor)}
.contato h4{font-size:1rem;margin-bottom:.3rem;color:var(--roxo)}
.contato a{font-family:var(--font-mono);font-size:.88rem;font-weight:700;color:var(--magenta)}
.contato p{font-size:.85rem;line-height:1.45;opacity:.7;margin-top:.25rem}
.aviso{border:4px solid var(--vermelho);background:rgba(213,31,18,.12);border-radius:16px;
padding:1.1rem 1.25rem;margin-top:1.6rem;display:flex;gap:.9rem;align-items:flex-start}
.aviso .o-estrela{position:static;width:38px;height:38px;flex:0 0 auto;color:var(--vermelho);opacity:1}
.aviso .o-estrela svg{width:100%;height:100%;display:block}
.aviso b{color:var(--vermelho)}
/* ── 17b O OLHO DA MARCA (CSS puro) ──────────────────────────
O lockup do UBA vive dentro de um olho: elipse roxa + íris magenta.
Feito em CSS para o herói nunca depender do carregamento do sprite. */
.olho-marca{position:relative;width:min(72vw,430px);aspect-ratio:640/336;margin:1.4rem auto .4rem;
background:var(--roxo-2);border-radius:50%/50%;display:grid;place-items:center;
box-shadow:0 18px 60px -20px rgba(0,0,0,.65)}
.olho-iris{position:absolute;width:42%;aspect-ratio:1;border-radius:50%;background:var(--magenta)}
.olho-marca .hero-lk{position:relative;z-index:2;--lk:clamp(1.9rem,7vw,3.6rem);color:var(--branco)}
/* cílios: fileira de dentes acima do olho */
.olho-marca::before{content:"";position:absolute;left:12%;right:12%;top:-11px;height:16px;
background:var(--vermelho);
-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='16' viewBox='0 0 22 16'%3E%3Cpath d='M11 16c3 0 6-7 6-11 0-3-12-3-12 0 0 4 3 11 6 11Z' fill='%23000'/%3E%3C/svg%3E") repeat-x center/22px 16px;
mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='16' viewBox='0 0 22 16'%3E%3Cpath d='M11 16c3 0 6-7 6-11 0-3-12-3-12 0 0 4 3 11 6 11Z' fill='%23000'/%3E%3C/svg%3E") repeat-x center/22px 16px}
/* citação em bloco */
.citacao{margin:1.8rem 0 0;padding-left:1.2rem;border-left:6px solid var(--magenta);
font-family:var(--font-serif);font-weight:700;font-style:italic;
font-size:clamp(1.15rem,.95rem + .9vw,1.6rem);line-height:1.32;max-width:34ch}
/* ── POSIÇÃO DOS ORNAMENTOS POR SEÇÃO ────────────────────────
Todos decorativos: some em telas pequenas, onde só atrapalhariam. */
.o-ramo{width:clamp(160px,20vw,320px);aspect-ratio:1377/1182;top:-3%;right:-4%;
color:var(--verde-esc);--orn-op:.9;transform:scaleX(-1)}
.o-estrela-bg{width:clamp(200px,26vw,420px);aspect-ratio:1;bottom:-8%;left:-6%;
color:var(--vermelho);--orn-op:.14}
.o-concha{width:clamp(90px,10vw,150px);aspect-ratio:134/126;top:8%;right:4%;color:var(--roxo);--orn-op:.9}
.o-carnauba{width:clamp(110px,13vw,200px);aspect-ratio:183/141;bottom:3%;left:2%;
color:var(--verde-esc);--orn-op:.8}
.o-lua{width:clamp(90px,10vw,150px);aspect-ratio:223/188;bottom:5%;left:3%;color:var(--limao);--orn-op:.85}
.o-onda{width:clamp(60px,7vw,110px);aspect-ratio:92/130;top:12%;right:6%;color:var(--ocre)}
.o-losango{width:clamp(90px,11vw,170px);aspect-ratio:120/56;bottom:6%;right:5%;color:var(--limao)}
.o-guara-news{width:clamp(110px,13vw,200px);aspect-ratio:236/213;bottom:2%;left:3%;
color:var(--laranja);--orn-op:.9}
@media (max-width:900px){
.o-ramo,.o-concha,.o-carnauba,.o-lua,.o-onda,.o-losango,.o-guara-news{display:none}
.o-estrela-bg{--orn-op:.08}
}
/* ── 17c MAPA DAS POUSADAS ───────────────────────────────────
Leaflet vendorizado em assets/vendor/leaflet (sem CDN).
Os tiles vêm do OpenStreetMap — ver nota no README sobre trocar
por Mapbox/MapTiler se o tráfego crescer. */
.barra-datas{display:flex;flex-wrap:wrap;gap:.7rem;align-items:flex-end;
background:var(--branco);border:4px solid var(--preto);border-radius:18px;
padding:1rem 1.15rem;box-shadow:6px 6px 0 var(--cor);margin-bottom:1.4rem}
.campo{display:grid;gap:.3rem;flex:1 1 150px;min-width:0}
.campo label{font-family:var(--font-mono);font-size:.6rem;font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--roxo)}
.campo input{font:inherit;font-size:.92rem;color:var(--preto);background:var(--areia-3);
border:3px solid var(--preto);border-radius:10px;padding:.55rem .7rem;width:100%;
font-family:var(--font-mono);font-weight:700}
.campo input:focus{outline:3px solid var(--magenta);outline-offset:1px}
#datas-resumo{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--preto);opacity:.65;flex:1 1 100%;margin-top:.1rem}
.mapa-wrap{position:relative;border:5px solid var(--preto);border-radius:20px;overflow:hidden;
box-shadow:8px 8px 0 var(--cor);margin-bottom:1.6rem}
#mapa-hospedagem{height:clamp(300px,52vh,480px);width:100%;background:var(--areia-2);z-index:1}
/* aquece os tiles cinzentos do OSM para o tom areia da marca */
.leaflet-tile-pane{filter:sepia(.28) saturate(1.15) hue-rotate(-8deg) brightness(1.03)}
.leaflet-container{font-family:var(--font-sans)}
.leaflet-control-attribution{font-size:9px;background:rgba(255,249,240,.86)}
.leaflet-bar a{color:var(--preto);border-bottom-color:rgba(20,12,8,.2)}
.leaflet-bar a:hover{background:var(--limao)}
/* pino: gota de cordel, sem imagem */
.pino{background:none;border:0}
.pino .pino-corpo{display:block;width:26px;height:26px;border-radius:50% 50% 50% 0;
transform:rotate(-45deg);background:var(--roxo);border:3px solid var(--preto);
box-shadow:2px 2px 0 rgba(20,12,8,.35);transition:transform .18s var(--ease),background .18s}
.pino.pino-praia .pino-corpo{background:var(--magenta)}
.pino:hover .pino-corpo,.pino.pino-hover .pino-corpo{transform:rotate(-45deg) scale(1.22);background:var(--limao)}
/* popup */
.popup-uba .leaflet-popup-content-wrapper{background:var(--branco);color:var(--preto);
border:4px solid var(--preto);border-radius:16px;box-shadow:5px 5px 0 var(--roxo)}
.popup-uba .leaflet-popup-content{margin:.85rem 1rem;display:grid;gap:.45rem}
.popup-uba .leaflet-popup-tip{background:var(--preto)}
.popup-uba a.leaflet-popup-close-button{color:var(--preto);font-size:20px;padding:6px 8px 0 0}
.popup-nome{font-size:1.02rem;font-weight:800;line-height:1.15}
.popup-tags{display:flex;gap:.3rem;flex-wrap:wrap}
.popup-ig{font-family:var(--font-mono);font-size:.78rem;font-weight:700;color:var(--roxo)}
.popup-ig:hover{text-decoration:underline}
.popup-ctas{display:flex;gap:.4rem;margin-top:.15rem}
.popup-btn{flex:1;text-align:center;font-family:var(--font-sans);font-size:.7rem;font-weight:800;
letter-spacing:.06em;text-transform:uppercase;padding:.5rem .4rem;border-radius:999px;
border:3px solid var(--preto);transition:transform var(--d-quick) var(--ease)}
.popup-btn:hover{transform:translateY(-2px)}
/* verde orgânico: o botão não representa mais uma marca, e sim a
ação de reservar — seja no site da pousada ou na Booking. */
.popup-btn.reserva{background:#4C6B3F;color:#fff}
/* itens da lista com botões de reserva */
.lista-item.is-on{background:var(--limao)}
.lista-reserva{display:flex;gap:.35rem;align-items:center;flex:0 0 auto}
.mini{font-family:var(--font-mono);font-size:.6rem;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;padding:.32rem .6rem;border-radius:999px;border:2px solid var(--preto);
transition:transform var(--d-quick) var(--ease),background var(--d-quick)}
.mini:hover{transform:translateY(-2px)}
.mini.reserva{background:#4C6B3F;color:#fff;border-color:#4C6B3F}
.mini.pin{background:transparent;color:var(--roxo);border-color:var(--roxo)}
.mini.pin:hover{background:var(--roxo);color:var(--branco)}
.lista-item:not(.tem-pino) .mini.pin{display:none}
.busca-geral{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.busca-geral .btn{flex:1 1 220px;justify-content:center}
@media (max-width:620px){
.lista-reserva{flex:1 1 100%;justify-content:flex-start;margin-top:.15rem}
.barra-datas{padding:.9rem}
}
/* ── 18 UTILS ────────────────────────────────────────────────── */
.center{text-align:center}
.stack-sm>*+*{margin-top:.8rem}
.mt-2{margin-top:2rem}
.nota-editorial{border-left:5px solid var(--magenta);padding:.5rem 0 .5rem 1rem;
font-size:.86rem;line-height:1.5;opacity:.8;margin-top:1.4rem;max-width:60ch}
/* ── ÍCONES DAS PROPRIEDADES ─────────────────────────────────
Substituem os rótulos "praia" e "restaurante". Os desenhos são os do
guia impresso: as ondas para frente-à-praia e a cúpula de servir para
restaurante.
Desenhados por máscara CSS, e não por ![]()
: assim herdam a cor do
contexto (currentColor) e funcionam igual sobre o cartão claro da
lista e sobre o painel escuro.
A legenda vem do title do próprio elemento — o balão nativo do
navegador, sem JavaScript. O aria-label repete o texto para quem usa
leitor de tela, que não recebe o title de forma confiável. */
.tag-ic{
display:inline-block;width:18px;height:18px;flex:0 0 auto;
background:currentColor;opacity:.6;vertical-align:-.25em;
transition:opacity .2s ease;
}
.lista-item:hover .tag-ic{opacity:.85}
.tag-ic:hover{opacity:1}
.ic-praia{
-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2018%2018'%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%3E%3Cpath%20d='M1.5%205.2c1.7-2.2%203.4-2.2%205%200s3.4%202.2%205%200%203.4-2.2%205%200'/%3E%3Cpath%20d='M1.5%209c1.7-2.2%203.4-2.2%205%200s3.4%202.2%205%200%203.4-2.2%205%200'/%3E%3Cpath%20d='M1.5%2012.8c1.7-2.2%203.4-2.2%205%200s3.4%202.2%205%200%203.4-2.2%205%200'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2018%2018'%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%3E%3Cpath%20d='M1.5%205.2c1.7-2.2%203.4-2.2%205%200s3.4%202.2%205%200%203.4-2.2%205%200'/%3E%3Cpath%20d='M1.5%209c1.7-2.2%203.4-2.2%205%200s3.4%202.2%205%200%203.4-2.2%205%200'/%3E%3Cpath%20d='M1.5%2012.8c1.7-2.2%203.4-2.2%205%200s3.4%202.2%205%200%203.4-2.2%205%200'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
}
.ic-rest{
-webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2018%2018'%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%3E%3Cpath%20d='M1.6%2013.4h14.8'/%3E%3Cpath%20d='M3.2%2013.4a5.8%205.8%200%200%201%2011.6%200'/%3E%3Cpath%20d='M9%207.6V6.2'/%3E%3C/g%3E%3Ccircle%20cx='9'%20cy='5.2'%20r='1.15'%20fill='%23000'/%3E%3C/svg%3E") no-repeat center/contain;
mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2018%2018'%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%3E%3Cpath%20d='M1.6%2013.4h14.8'/%3E%3Cpath%20d='M3.2%2013.4a5.8%205.8%200%200%201%2011.6%200'/%3E%3Cpath%20d='M9%207.6V6.2'/%3E%3C/g%3E%3Ccircle%20cx='9'%20cy='5.2'%20r='1.15'%20fill='%23000'/%3E%3C/svg%3E") no-repeat center/contain;
}
.lista-tags,.popup-tags{display:inline-flex;align-items:center;gap:.55rem}
/* ── FOTO DOS ESPORTES ───────────────────────────────────────
Mesma figura do wellness: uma imagem só, revezando. Substituiu o
mosaico de 8 ladrilhos, que era mais elaborado do que a seção
pedia. */
/* As fotos do kite são 9:16, muito altas: a largura da coluna manda na
altura da imagem. Em 0.835fr as duas colunas terminavam juntas; a
pedido, a foto cresceu ~15% e passa a terminar cerca de 70px abaixo
do texto. A proporção 9/16 é mantida, então ela continua inteira.
O crescimento não é linear no valor de fr: alargar a coluna da foto
estreita a do texto, que fica mais alta e reflui. Daí 1.05fr para
~15%, e não 0.96fr. */
.esportes-topo{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
gap:clamp(1.8rem,4vw,3.6rem);align-items:start;
}
/* Texto e contatos dividem a coluna da esquerda. Antes os contatos
ficavam abaixo do grid inteiro, em largura cheia, e sobrava um vazio
grande ao lado da parte de baixo da foto. */
.esportes-info{display:flex;flex-direction:column}
.esportes-topo .sec-head{margin-bottom:clamp(1.8rem,4vh,2.6rem)}
.esportes-info .contatos{margin-top:0}
.esportes-info > .h3{margin-bottom:.9rem}
.esportes-info > .h3 + .contatos{margin-bottom:clamp(1.4rem,3vh,2rem)}
/* O topo da figura acompanha o TÍTULO, não o rótulo que vem antes dele.
O deslocamento é a altura do rótulo (1rem de caixa) mais o 1rem que
theme.css já põe entre ele e o h2 — medido, 32px. */
.esportes-topo .esportes-foto{
/* O topo acompanha o TÍTULO, não o rótulo acima dele: a altura do
rótulo mais o 1rem que theme.css põe entre os dois dá 32px. */
margin-top:2rem;
}
@media (max-width:860px){
.esportes-topo .esportes-foto{margin-top:0;width:100%}
}
.esportes-foto{
position:relative;border-radius:20px;overflow:hidden;
aspect-ratio:9/16;border:5px solid var(--preto);background:var(--preto);
}
@media (max-width:860px){
.esportes-topo{grid-template-columns:1fr}
.esportes-foto{aspect-ratio:16/10}
}
/* ── LOGO DA FESTA NO LUGAR DO NOME ──────────────────────────
As três marcas têm proporções muito diferentes (Salve 1.83:1,
Réveillon 1:1, Shake 3.75:1). Limitar só a largura deixaria o
Réveillon altíssimo; só a altura deixaria o Shake larguíssimo.
Limitando as DUAS, cada uma encosta no limite que lhe cabe e as
três ficam com presença parecida.
Salve e Shake usam a variante escura: as originais são brancas e
sumiriam no creme do corpo do card. O Réveillon é colorido e vai
como está. */
.festa-nome{line-height:0}
.festa-logo{
display:block;width:auto;height:auto;
max-width:min(230px,62%);max-height:74px;
object-fit:contain;object-position:left center;
}
/* O Shake é o mais largo dos três (3.75:1) e encostava no limite de
largura, ficando com mais presença que os outros. Reduzido em dois
passos, a pedido: 230 → 196 (−15%) → 176 (−10%). */
.festa-logo[src*="shake"]{max-width:min(176px,48%)}
@media (max-width:820px){
.festa-logo{max-width:min(200px,70%);max-height:64px}
.festa-logo[src*="shake"]{max-width:min(153px,54%)}
}
/* mensagem de erro do cadastro de e-mail */
.news-erro{margin-top:1rem;font-size:.86rem;line-height:1.5;color:var(--vermelho)}
.news-erro a{text-decoration:underline;font-weight:700}