@charset "utf-8";
/* =============================================================
   RÉVEILLON UBA 2027 · Barra Grande, Piauí
   mix.css — TERCEIRA DIREÇÃO: "MIX"

   Entra DEPOIS de sertao.css e só vale sob [data-tema="mix"].

   O QUE ELE É
   A estrutura é do Sertão — dois chãos, Poppins, canto reto, fio de
   cabelo, numeral em peso leve, muito respiro. Tudo isso vem de
   sertao.css e não é tocado aqui.
   O que este arquivo acrescenta é o que o Cordel tinha e a pele do
   Sertão desligou: a cor saturada e os bichos. Só que agora nunca
   como FUNDO — sempre como acento e como textura. É o que o slide 10
   da estratégia pede: "neon vira acento".

   OS QUATRO MECANISMOS
   1. UMA COR POR SEÇÃO. As cinco cores de cores.png percorrem a
      página. Cada seção pinta com a sua o numeral, o rótulo, o fio e
      o CTA — e nada mais. Nenhum bloco de neon chapado.
   2. ELEMENTO COMO MARCA D'ÁGUA. Os PNGs entram grandes, sangrando
      pela borda, na cor da seção, em opacidade baixa. Leem como
      textura, não como enfeite.
   3. MOLDURA NO HERÓI. O elemento 5 emoldura a foto inteira. É o
      gesto mais cordel do conjunto, mas estrutural: uma moldura, e
      não vinte bichos soltos.
   4. TOTEM COMO DIVISOR. O sol+ondas+carnaúba, vertical e simétrico,
      separa as seções — ocupando o lugar da faixa marquee removida.

   OS ELEMENTOS SÃO MÁSCARAS. Os cinco PNGs de assets/el/ são
   monocromáticos com alfa, então viram máscara CSS: qualquer um
   assume qualquer cor sem gerar arquivo novo por variação.

   ÍNDICE
   01 paleta · 02 cor por seção · 03 marca d'água · 04 herói
   05 divisor · 06 acentos · 07 contraste
   ============================================================= */

/* ── 01 PALETA ───────────────────────────────────────────────
   Amostrada de imagens/cores.png. Bate com a paleta do cordel dos
   PDFs oficiais (duas diferem em 1 unidade, arredondamento).

   Cada neon vem em dois valores. O vivo é para uso GRÁFICO e para
   texto grande; o "-t" é a versão escurecida para texto pequeno
   sobre chão claro, onde o vivo não sustenta 4.5:1. Ver seção 07. */
[data-tema="mix"]{
  --limao:#C7FE00;   --limao-t:#5C7500;
  /* -c: sobre chão escuro médio (painel-verde, #2C251D) o laranja
     vivo dá 4.19:1 e reprova; este passa em ambos os escuros */
  --laranja:#FF3800; --laranja-t:#C22A00; --laranja-c:#FF5C1A;
  --magenta:#FF118E; --magenta-t:#C1006A;
  --verde:#00C33D;   --verde-t:#007224;
  /* o roxo é o único que passa cru sobre creme (9.6:1), então
     as duas variantes dele são a mesma cor */
  --roxo:#5200B1;    --roxo-t:#5200B1;

  /* A cor da seção. ATENÇÃO: os valores por seção são LITERAIS, não
     var(). Com var() nasce um ciclo — sertao.css redefine
     --limao:var(--dourado) dentro dos painéis escuros, e aqui
     --dourado:var(--neon); o CSS não resolve e cai no padrão. */
  --neon:#FF118E;
  --neon-t:#C1006A;

  /* o dourado do Sertão sai de cena: quem acentua agora é o neon */
  --dourado:var(--neon);
  --cor:var(--neon);
}

/* ── 02 UMA COR POR SEÇÃO ────────────────────────────────────
   Cinco cores, sete seções: a sequência recomeça. A ordem foi
   escolhida para que duas seções vizinhas nunca repitam a cor. */
[data-tema="mix"] .conceito   {--neon:#FF118E; --neon-t:#C1006A}
[data-tema="mix"] .festas     {--neon:#C7FE00;   --neon-t:#5C7500}
[data-tema="mix"] .destino    {--neon:#00C33D;   --neon-t:#007224}
[data-tema="mix"] .wellness   {--neon:#FF3800; --neon-t:#C22A00}
[data-tema="mix"] .chegar     {--neon:#5200B1;    --neon-t:#5200B1}
[data-tema="mix"] .faq        {--neon:#FF118E; --neon-t:#C1006A}
[data-tema="mix"] .news       {--neon:#C7FE00;   --neon-t:#5C7500}

/* NOTA: a numeração de seção foi removida do site na v2.0, a pedido.
   Esta regra fica preparada — se um dia o numeral voltar, ele já nasce
   na cor da seção. Hoje ela não pinta nada, porque não há ::before com
   content. Quem carrega a cor são o rótulo, o fio e a marca d'água. */
[data-tema="mix"] section.painel .sec-head::before{color:var(--neon);opacity:1}

/* o rótulo é texto pequeno: sobre chão claro usa a versão escurecida,
   sobre chão escuro o vivo volta */
[data-tema="mix"] .eyebrow{color:var(--neon-t)}
[data-tema="mix"] .painel-roxo .eyebrow,
[data-tema="mix"] .painel-preto .eyebrow,
[data-tema="mix"] .painel-verde .eyebrow,
[data-tema="mix"] .painel-magenta .eyebrow,
[data-tema="mix"] .foot .eyebrow{color:var(--neon)}

/* fio de fim de seção na cor da seção, em vez do cinza herdado */
[data-tema="mix"] section.painel > .wrap::after{
  border-top-color:var(--neon);opacity:.5;
}

/* ── 03 MARCA D'ÁGUA ─────────────────────────────────────────
   O elemento entra grande e sangrando pela borda. A opacidade é
   baixa de propósito: ele é chão, não figura. Sobre painel escuro
   precisa de um pouco mais para sobreviver. */
[data-tema="mix"] .painel{position:relative;overflow:hidden}
[data-tema="mix"] .painel::after{
  content:"";position:absolute;pointer-events:none;z-index:0;
  width:clamp(280px,34vw,520px);aspect-ratio:900/1171;
  /* pixel fixo, não %: a porcentagem resolve contra a altura da seção,
     e numa seção longa o deslocamento decepava o elemento no topo */
  top:-38px;right:-7%;
  background:var(--neon);opacity:.13;
  -webkit-mask:var(--el,url("../assets/el/ramo.png")) no-repeat center/contain;
          mask:var(--el,url("../assets/el/ramo.png")) no-repeat center/contain;
}
[data-tema="mix"] .painel-roxo::after,
[data-tema="mix"] .painel-preto::after,
[data-tema="mix"] .painel-verde::after,
[data-tema="mix"] .painel-magenta::after{opacity:.17}

/* um elemento diferente por seção, e lados alternados para a página
   não criar uma coluna de marcas d'água à direita */
/* À esquerda e na altura do texto. Medido: o bloco de texto ocupa
   y=362 a y=1065 da seção (centro 714) e o elemento tem 637px de
   altura, então top=395 centra um no outro. */
[data-tema="mix"] .conceito::after{--el:url("../assets/el/ramo.png");
  right:auto;left:-7%;top:395px;transform:scaleX(-1)}
/* Mesmo respiro acima da primeira festa e abaixo da terceira. Os -28px
   corrigem a assimetria da própria arte: o sol fica no alto do PNG e o
   pedestal embaixo, então centrar a caixa deixa a mancha visível 28px
   baixa demais (medido: centro dos cards 2852, centro do sol 2880). */
[data-tema="mix"] .festas::after  {--el:url("../assets/el/sol.png");aspect-ratio:473/662;
  top:calc(50% - 28px);bottom:auto;left:auto;right:-6%;
  /* o translateY continua no transform: sem ele a centralização se perde */
  transform:translateY(-50%) scaleX(-1)}
[data-tema="mix"] .destino::after {--el:url("../assets/el/palma.png");aspect-ratio:900/1097;
  right:auto;left:-7%;transform:scaleX(-1)}
[data-tema="mix"] .wellness::after{display:none}   /* sem elemento, a pedido */
[data-tema="mix"] .chegar::after  {--el:url("../assets/el/sol.png");aspect-ratio:473/662;top:34px}
[data-tema="mix"] .faq::after     {--el:url("../assets/el/palma.png");aspect-ratio:900/1097;
  right:auto;left:-7%;transform:scaleX(-1)}
[data-tema="mix"] .news::after    {display:none}

/* O GUIA — sem regra própria, as sete seções caíam todas no mesmo ramo
   na mesma posição. Aqui cada uma ganha o seu elemento, a sua cor e o
   seu lado, com o mesmo rodízio da home. */
[data-tema="mix"] #barragrande{--neon:#FF118E; --neon-t:#C1006A}
[data-tema="mix"] #barragrande::after{--el:url("../assets/el/palma.png");aspect-ratio:900/1097}

[data-tema="mix"] #hospedagem{--neon:#C7FE00; --neon-t:#5C7500}
/* o sol tem a coroa no alto da arte e precisa descer mais que os
   outros elementos para ela não encostar na borda da seção */
/* o topo do sol acompanha o título "Pousadas e hotéis", que começa a
   196px do início da seção — medido */
[data-tema="mix"] #hospedagem::after{--el:url("../assets/el/sol.png");aspect-ratio:473/662;
  right:auto;left:-6%;top:196px;transform:scaleX(-1)}

[data-tema="mix"] #comer{--neon:#FF5C1A; --neon-t:#C22A00}
/* medido: com a opacidade padrão (.17) o @ da lista cai para 4.33:1
   sobre o ramo — a coluna de @ é alinhada à direita e passa bem por
   cima dele. A .10 volta a 4.79:1. */
[data-tema="mix"] #comer::after{--el:url("../assets/el/ramo.png");opacity:.10;top:190px}

[data-tema="mix"] #praia{--neon:#00C33D; --neon-t:#007224}
/* o totem é bem mais estreito que os outros elementos: na largura
   padrão ele sumia. Ganha corpo e opacidade próprios. */
/* top:50% + translateY(-50%) dá espaçamento igual em cima e embaixo
   sem depender da altura da seção */
[data-tema="mix"] #praia::after{--el:url("../assets/el/totem.png");aspect-ratio:296/720;
  width:clamp(190px,21vw,320px);right:auto;left:2%;
  top:50%;transform:translateY(-50%);opacity:.22}

[data-tema="mix"] #roles{--neon:#C7FE00; --neon-t:#5C7500}
/* "Para além da festa, o paraíso" em amarelo — o limão da paleta, que
   é também a cor da seção. */
[data-tema="mix"] #roles .sec-head h2{color:#C7FE00}
[data-tema="mix"] #roles::after{--el:url("../assets/el/palma.png");aspect-ratio:900/1097;
  transform:scaleX(-1);right:-9%}

[data-tema="mix"] #esportes{--neon:#5200B1; --neon-t:#5200B1}
[data-tema="mix"] #esportes::after{display:none}   /* sem elemento, a pedido */

[data-tema="mix"] #concierge{--neon:#FF118E; --neon-t:#C1006A}
[data-tema="mix"] #concierge::after{--el:url("../assets/el/ramo.png");transform:scaleX(-1);
  right:auto;left:-8%;top:90px}

/* o conteúdo sobe acima da marca d'água */
[data-tema="mix"] .painel > .wrap{position:relative;z-index:1}

/* ── 04 HERÓI: A MOLDURA ─────────────────────────────────────
   O elemento 5 emoldura a foto. mask-size:100% 100% estica o
   desenho para caber — como os motivos dele são repetidos ao longo
   das bordas, esticar lê como escala, não como deformação. */
/* ATENÇÃO: sertao.css redefine --limao:var(--creme) DENTRO de .hero,
   e essa declaração local vence a global. Por isso a moldura e o CTA
   do herói usam --neon-hero, um token próprio que ninguém sombreia. */
[data-tema="mix"] .hero{--neon-hero:#C7FE00}   /* amarelo/limão de cores.png */
/* moldura2 é horizontal (2200x1200), na proporção do herói: os motivos
   ficam em escala natural. A anterior era retrato e esticava. */
/* A MOLDURA DO HERÓI FOI REMOVIDA a pedido.
   O arquivo assets/el/moldura3-limao.png continua no repositório: se
   ela voltar, era um ::after no .hero com border-image, e o histórico
   do git tem a regra inteira (commit "moldura passa a border-image").

   Ficou registrado o que se aprendeu ali, caso sirva para outro
   grafismo de borda: máscara não escala uma moldura, porque a faixa
   decorada ocupa só os 3% externos da arte e qualquer aumento de
   mask-size a empurra para fora do recorte antes de engrossá-la.
   border-image separa escala (border-width) de recorte (inset). */

[data-tema="mix"] .hero-content{padding-inline:clamp(2rem,6vw,5rem)}
[data-tema="mix"] .hero .hero-sub{color:var(--neon-hero)}
[data-tema="mix"] .hero .eyebrow{color:var(--neon-hero)}
/* No guia o rótulo fica acima da marca SERTÃO, sobre foto: em branco,
   e não na cor da seção. O herói do guia não é .painel, então antes ele
   caía no --neon-t padrão (magenta escuro) e ficava apagado ali. */
[data-tema="mix"] .guia-hero .eyebrow{color:var(--creme-2)}
[data-tema="mix"] .hero .btn-primary{
  background:var(--neon-hero);border-color:var(--neon-hero);color:var(--preto-rede);
}
[data-tema="mix"] .btn-primary:hover{
  background:var(--creme-2);border-color:var(--creme-2);
}
/* no celular a moldura fecha demais sobre o texto. A espessura dela já
   é tratada por --moldura-esp acima; aqui fica só o respiro do texto. */
@media (max-width:700px){
  [data-tema="mix"] .hero-content{padding-inline:1.6rem}
}

/* ── 05 DIVISOR: O TOTEM ─────────────────────────────────────
   Ocupa o lugar da faixa marquee. Fica entre seções, centrado. */
[data-tema="mix"] .faixa{
  background:var(--creme);border-block:0;
  padding-block:clamp(1.6rem,4vh,2.6rem);
  display:grid;place-items:center;overflow:visible;
}
[data-tema="mix"] .faixa-trilho{display:none}
[data-tema="mix"] .faixa::before{
  content:"";display:block;
  width:clamp(34px,4vw,52px);aspect-ratio:296/720;
  background:var(--roxo);
  -webkit-mask:url("../assets/el/totem.png") no-repeat center/contain;
          mask:url("../assets/el/totem.png") no-repeat center/contain;
}

/* ── 06 ACENTOS ──────────────────────────────────────────────
   Onde o Sertão usava dourado, entra a cor da seção. */
/* o grifo do Sertão é dourado fixo; aqui segue a cor da seção */
[data-tema="mix"] .grifo{box-shadow:inset 0 -.32em 0 color-mix(in srgb, var(--neon) 34%, transparent)}
[data-tema="mix"] .pilar::before{color:var(--neon-t)}
[data-tema="mix"] .pilar h4{color:inherit}
[data-tema="mix"] .numero b{color:var(--neon)}
/* UMA COR POR FESTA. Os cards trazem --f-ac inline, e estilo inline
   vence folha — então em vez de !important o mix consulta primeiro a
   sua própria variável. Segue a lógica do slide 08 da estratégia:
   a Salve é solar, o Réveillon é o fogo, e a Shake é a neon. */
[data-tema="mix"] .festa:nth-of-type(1){--f-mix:#C7FE00; --f-mix-t:#5C7500}
[data-tema="mix"] .festa:nth-of-type(2){--f-mix:#FF3800; --f-mix-t:#C22A00}
[data-tema="mix"] .festa:nth-of-type(3){--f-mix:#FF118E; --f-mix-t:#C1006A}
/* a barra do topo usa a cor viva; o card é claro, então o texto da tag
   usa a escurecida */
[data-tema="mix"] .festa::before{background:var(--f-mix,var(--neon))}
[data-tema="mix"] .festa-tag{color:var(--f-mix-t,var(--neon-t))}
/* A DATA NÃO LEVA A COR DA FESTA. Ela fica sobre a foto, e medido em
   cor escura dava 1.06 a 1.64:1 nas três — ilegível. Segue creme com
   sombra, como no Sertão; quem carrega a cor são a barra do topo e a
   tag, que vivem sobre o cartão claro. */
[data-tema="mix"] .rota-ic,[data-tema="mix"] .rota-t{color:var(--neon-t)}
[data-tema="mix"] .faq-q:hover,
[data-tema="mix"] .faq-q[aria-expanded="true"]{color:var(--neon-t)}
/* os @ do guia em alaranjado. Sobre chão claro o laranja vivo dá 4.2:1
   e reprova em AA para texto pequeno, então ali entra a versão
   escurecida; sobre os painéis escuros o vivo volta. */
[data-tema="mix"] .lista-at{color:var(--laranja-t)}
[data-tema="mix"] .painel-roxo .lista-at,
[data-tema="mix"] .painel-preto .lista-at,
[data-tema="mix"] .painel-verde .lista-at,
[data-tema="mix"] .painel-magenta .lista-at{color:var(--laranja-c)}
[data-tema="mix"] .campo label{color:var(--magenta-t)}
[data-tema="mix"] .news-ok{color:var(--limao)}
/* Botão do e-mail no azulado da paleta. Precisa ser explícito: o
   .btn-primary herdado pinta com var(--dourado), que aqui aponta para
   --neon; mas --dourado é declarado no escopo raiz do tema, e ali
   --neon ainda é o magenta padrão — por isso o botão saía rosa mesmo
   com a seção definida como limão. Medido: 9.62:1 com texto creme. */
[data-tema="mix"] .news .btn-primary{
  background:#5200B1;border-color:#5200B1;color:var(--creme-2);
}
[data-tema="mix"] .news .btn-primary:hover{
  background:var(--creme-2);border-color:var(--creme-2);color:#5200B1;
}
[data-tema="mix"] .nav-links .link::after{background:var(--limao)}
[data-tema="mix"] .pill.cta{background:var(--limao);border-color:var(--limao);color:var(--preto-rede)}
[data-tema="mix"] .pill.cta:hover{background:var(--creme-2);border-color:var(--creme-2)}
[data-tema="mix"] .scrollbar{background:var(--limao)}
[data-tema="mix"] ::selection{background:var(--limao);color:var(--preto-rede)}
[data-tema="mix"] :focus-visible{outline-color:var(--magenta)}
[data-tema="mix"] .foot h4{color:var(--limao)}
[data-tema="mix"] .foot a:hover{color:var(--limao)}
[data-tema="mix"] .guia-nav a:hover,
[data-tema="mix"] .guia-nav a.on{color:var(--limao)}
/* Os pinos distinguem quem fica de frente para a praia de quem não
   fica — magenta para os de dentro da vila, verde para os de praia.
   O azulado pedido ficou só no botão "no mapa", logo abaixo. */
[data-tema="mix"] .pino .pino-corpo{background:var(--magenta)}
[data-tema="mix"] .pino.pino-praia .pino-corpo{background:var(--verde)}
[data-tema="mix"] .pino:hover .pino-corpo,
[data-tema="mix"] .pino.pino-hover .pino-corpo{background:var(--limao)}
[data-tema="mix"] .popup-ig{color:var(--laranja-t)}
/* botão "no mapa" em amarelado. O limão da paleta lê como verde-limão,
   não como amarelo — então aqui entra o dourado, que já é vocabulário
   do projeto e é inequivocamente amarelado. Medido: 6.68:1 sobre o
   painel da hospedagem. */
[data-tema="mix"] .mini.pin{color:#E0A03A;border-color:#E0A03A}
[data-tema="mix"] .mini.pin:hover{background:#E0A03A;color:var(--preto-rede)}
[data-tema="mix"] .leaflet-bar a:hover{background:var(--roxo);color:var(--creme-2)}
[data-tema="mix"] .lista-item.is-on{background:rgba(255,17,142,.09)}

/* ── 07 CONTRASTE ────────────────────────────────────────────
   Medido, não estimado. Sobre o creme #F2E8D5:
     limão   #C7FE00 →  1.3:1   inutilizável para texto
     verde   #00C33D →  2.3:1   idem
     magenta #FF118E →  3.4:1   passa só como texto GRANDE
     laranja #FF3800 →  4.2:1   quase
     roxo    #5200B1 →  9.6:1   único que passa cru
   Por isso todo texto pequeno sobre chão claro usa a variante "-t",
   escurecida até cruzar 4.5:1. O neon vivo fica para numeral, fio,
   marca d'água, moldura e superfícies escuras — onde ele brilha e
   não atrapalha ninguém. */

/* busca de voos: assume a cor da seção */
[data-tema="mix"] .barra-voos .campo label{color:var(--neon-t)}
[data-tema="mix"] .barra-voos select:focus{border-bottom-color:var(--neon)}
[data-tema="mix"] .mini.voo{color:var(--neon-t);border-color:var(--neon-t)}
[data-tema="mix"] .mini.voo:hover{background:var(--neon-t);color:var(--creme-2)}