/* tokens.css: as cores de cada hotel moram AQUI, num lugar só, em vez de repetidas dentro
   de cada uma das 49 páginas. Pedido do sócio em 10/09/2026, depois da medição que achou
   2.152 KB de CSS embutido no site (o tema por hotel repetido 40 vezes, idêntico exceto
   pela cor). Ver ferramentas/estilo-externo.cjs (o script que aponta cada página pra cá).

   Este arquivo tem duas seções:
   1. O :root abaixo: as cores da REDE, copiadas de v3-home.html, IDÊNTICAS nas 48 páginas
      que não são de hotel (conferido em 10/09). Não regenerado por script: se a cor da rede
      mudar, edite aqui.
   2. A seção "temas por hotel", gerada por ferramentas/tema-hotel.cjs a cada run. Não
      editar essa parte à mão.

   Lei deste bloco: toda variável do :root tem valor LITERAL (hex ou rgba de números), nunca
   var() de si mesma. Em 10/09/2026 o tokeniza-cores.cjs chegou a gerar `--tinta:var(--tinta)`
   (circular, inválido em CSS) e foi ao ar: na home o corpo saía preto e o botão de busca
   transparente. Corrigido no mesmo dia, e o script passou a proteger o :root. Se aparecer
   de novo, é regressão. */
:root{
  /* componentes rgb das cores da rede, para o tema por hotel alcancar tambem o que era rgba() escrito na mao */
  --tinta-rgb:11,43,51;--tinta-2-rgb:14,54,65;--tinta-3-rgb:9,34,40;--tinta-4-rgb:8,32,38;--tinta-5-rgb:5,22,26;--tinta-6-rgb:9,36,43;--turquesa-rgb:20,157,164;--turquesa-viva-rgb:43,197,201;--turquesa-deep-rgb:12,110,116;--dourado-rgb:217,160,91;--dourado-claro-rgb:232,188,130;--areia-rgb:246,241,230;--areia-2-rgb:237,228,210;
  --tinta:#0B2B33;
  --tinta-2:#0E3641;
  --tinta-3:#092228;
  --turquesa:#149DA4;
  --turquesa-viva:#2BC5C9;
  --turquesa-deep:#0C6E74;
  --areia:#F6F1E6;
  --areia-2:#EDE4D2;
  --papel:#FFFDF8;
  --dourado:#D9A05B;
  --dourado-claro:#E8BC82;
  --grafite:#37494F;
  --linha:rgba(var(--tinta-rgb),.14);
}

/* temas por hotel: gerado por tema-hotel.cjs */
/* Tema de mmh (ferramentas/tema-hotel.cjs): redefine as cores da rede pelas cores
   deste hotel. Nao editar a mao, o script regenera. Cor 01 #124093, cor 02 #029fe3. */
html[data-hotel="mmh"]{
  /* acao: botao, link, destaque. Era o turquesa da rede.
     O --turquesa e a versao LEGIVEL da cor (escurecida quando a cor pura nao passa como
     texto sobre fundo claro); a cor pura vive no --turquesa-puro, para fundo e botao. */
  --turquesa:#124093;
  --turquesa-puro:#124093;
  --turquesa-deep:#103881;
  --turquesa-viva:#466aab;
  /* acento sobre fundo escuro: eyebrow, fio, borda. Era o dourado da rede. */
  --dourado:#029fe3;
  --dourado-claro:#30b0e8;
  /* fundo escuro: a propria cor do hotel escurecida com preto. Era a tinta da rede. */
  --tinta:#051229;
  --tinta-2:#061735;
  --tinta-3:#040d1d;
  --linha:rgba(5,18,41,.14);
  /* Os componentes rgb das mesmas cores. Sem eles, tudo que o CSS escrevia como
     rgba(11,43,51,.5) e que o tokeniza-cores.cjs converteu para rgba(var(--tinta-rgb),.5)
     continuaria resolvendo para a cor da REDE, e o hotel so mudaria pela metade. Foi
     exatamente o defeito que o socio achou no Ipioca em 10/09: pagina laranja com um bloco
     de fundo azul-petroleo no meio. */
  --tinta-rgb:5,18,41;
  --tinta-2-rgb:6,23,53;
  --tinta-3-rgb:4,14,32;
  --tinta-4-rgb:4,13,29;
  --tinta-5-rgb:2,8,19;
  --tinta-6-rgb:4,13,31;
  --turquesa-rgb:18,64,147;
  --turquesa-viva-rgb:70,106,171;
  --turquesa-deep-rgb:16,56,129;
  --dourado-rgb:2,159,227;
  --dourado-claro-rgb:48,176,232;

}
html[data-hotel="mmh"] .btn-turquesa{background:#124093;color:#fff;box-shadow:0 14px 34px rgba(18,64,147,.35)}
/* Tres estilos traziam a cor da rede chumbada, sem passar por variavel: o menu quando fixa
   no topo, as pilulas do hero e a sombra deles. Achado pelo socio em 10/09, olhando o
   Ipioca: a pagina inteira laranja e o menu fixo ainda verde-petroleo.
   Rodada 4 (18/09, so quem tem fundoMarca): o header deixa de ficar transparente sobre o
   hero e passa a ter o MESMO fundo claro que header.is-stuck ja tinha antes (so que agora
   e' fundoMarca, nao mais a tinta escura); os dois estados (parado no topo e grudado no
   scroll) ficam iguais. O botao dentro do header/rodape (mesma classe .btn-turquesa dos
   botoes do corpo da pagina) ganha uma cor PROPRIA aqui: sobre fundo laranja, o botao
   laranja padrao ficaria invisivel (mesma cor do fundo), entao vira texto-marca (escuro)
   com texto branco (17,2:1), so dentro de header/rodape; o resto da pagina continua com o
   botao padrao (fundo laranja puro, texto escuro), sem mudanca. */
html[data-hotel="mmh"] header.is-stuck{background:rgba(5,18,41,.92);box-shadow:0 10px 40px rgba(3,10,22,.45)}

html[data-hotel="mmh"] .pill{background:rgba(5,18,41,.72);color:#fff}
html[data-hotel="mmh"] .pill.gold{background:#029fe3;color:#040d1d}
/* O eyebrow do hero fica sobre foto, e a cor 02 sozinha some no ceu claro (o socio leu
   "O BOUTIQUE DA REDE MME" e nao conseguiu, em 10/09). Ganha corpo e sombra propria. */
html[data-hotel="mmh"] .hero .eyebrow{color:#8dd4f2;text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 18px rgba(3,10,22,.8)}
html[data-hotel="mmh"] .hero .hero-veil{background:
  linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 34%,rgba(0,0,0,.30) 68%,rgba(0,0,0,.62) 100%),
  linear-gradient(180deg,rgba(18,64,147,.62) 0%,rgba(18,64,147,.16) 38%,rgba(18,64,147,.30) 62%,rgba(18,64,147,.78) 100%),
  linear-gradient(100deg,rgba(18,64,147,.66) 0%,rgba(18,64,147,0) 58%)}
/* Tema de aqs (ferramentas/tema-hotel.cjs): redefine as cores da rede pelas cores
   deste hotel. Nao editar a mao, o script regenera. Cor 01 #1a4277, cor 02 #a9c6e2. */
html[data-hotel="aqs"]{
  /* acao: botao, link, destaque. Era o turquesa da rede.
     O --turquesa e a versao LEGIVEL da cor (escurecida quando a cor pura nao passa como
     texto sobre fundo claro); a cor pura vive no --turquesa-puro, para fundo e botao. */
  --turquesa:#1a4277;
  --turquesa-puro:#1a4277;
  --turquesa-deep:#173a69;
  --turquesa-viva:#4c6c95;
  /* acento sobre fundo escuro: eyebrow, fio, borda. Era o dourado da rede. */
  --dourado:#a9c6e2;
  --dourado-claro:#b8d0e7;
  /* fundo escuro: a propria cor do hotel escurecida com preto. Era a tinta da rede. */
  --tinta:#071221;
  --tinta-2:#09182b;
  --tinta-3:#050d18;
  --linha:rgba(7,18,33,.14);
  /* Os componentes rgb das mesmas cores. Sem eles, tudo que o CSS escrevia como
     rgba(11,43,51,.5) e que o tokeniza-cores.cjs converteu para rgba(var(--tinta-rgb),.5)
     continuaria resolvendo para a cor da REDE, e o hotel so mudaria pela metade. Foi
     exatamente o defeito que o socio achou no Ipioca em 10/09: pagina laranja com um bloco
     de fundo azul-petroleo no meio. */
  --tinta-rgb:7,18,33;
  --tinta-2-rgb:9,24,43;
  --tinta-3-rgb:6,15,26;
  --tinta-4-rgb:5,13,24;
  --tinta-5-rgb:3,9,15;
  --tinta-6-rgb:5,14,25;
  --turquesa-rgb:26,66,119;
  --turquesa-viva-rgb:76,108,149;
  --turquesa-deep-rgb:23,58,105;
  --dourado-rgb:169,198,226;
  --dourado-claro-rgb:184,208,231;

}
html[data-hotel="aqs"] .btn-turquesa{background:#1a4277;color:#fff;box-shadow:0 14px 34px rgba(26,66,119,.35)}
/* Tres estilos traziam a cor da rede chumbada, sem passar por variavel: o menu quando fixa
   no topo, as pilulas do hero e a sombra deles. Achado pelo socio em 10/09, olhando o
   Ipioca: a pagina inteira laranja e o menu fixo ainda verde-petroleo.
   Rodada 4 (18/09, so quem tem fundoMarca): o header deixa de ficar transparente sobre o
   hero e passa a ter o MESMO fundo claro que header.is-stuck ja tinha antes (so que agora
   e' fundoMarca, nao mais a tinta escura); os dois estados (parado no topo e grudado no
   scroll) ficam iguais. O botao dentro do header/rodape (mesma classe .btn-turquesa dos
   botoes do corpo da pagina) ganha uma cor PROPRIA aqui: sobre fundo laranja, o botao
   laranja padrao ficaria invisivel (mesma cor do fundo), entao vira texto-marca (escuro)
   com texto branco (17,2:1), so dentro de header/rodape; o resto da pagina continua com o
   botao padrao (fundo laranja puro, texto escuro), sem mudanca. */
html[data-hotel="aqs"] header.is-stuck{background:rgba(7,18,33,.92);box-shadow:0 10px 40px rgba(4,10,18,.45)}

html[data-hotel="aqs"] .pill{background:rgba(7,18,33,.72);color:#fff}
html[data-hotel="aqs"] .pill.gold{background:#a9c6e2;color:#050d18}
/* O eyebrow do hero fica sobre foto, e a cor 02 sozinha some no ceu claro (o socio leu
   "O BOUTIQUE DA REDE MME" e nao conseguiu, em 10/09). Ganha corpo e sombra propria. */
html[data-hotel="aqs"] .hero .eyebrow{color:#bfd4e9;text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 18px rgba(4,10,18,.8)}
html[data-hotel="aqs"] .hero .hero-veil{background:
  linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 34%,rgba(0,0,0,.30) 68%,rgba(0,0,0,.62) 100%),
  linear-gradient(180deg,rgba(26,66,119,.62) 0%,rgba(26,66,119,.16) 38%,rgba(26,66,119,.30) 62%,rgba(26,66,119,.78) 100%),
  linear-gradient(100deg,rgba(26,66,119,.66) 0%,rgba(26,66,119,0) 58%)}
/* Tema de aqi (ferramentas/tema-hotel.cjs): redefine as cores da rede pelas cores
   deste hotel. Nao editar a mao, o script regenera. Cor 01 #312783, cor 02 #6fc5c7. */
html[data-hotel="aqi"]{
  /* acao: botao, link, destaque. Era o turquesa da rede.
     O --turquesa e a versao LEGIVEL da cor (escurecida quando a cor pura nao passa como
     texto sobre fundo claro); a cor pura vive no --turquesa-puro, para fundo e botao. */
  --turquesa:#312783;
  --turquesa-puro:#312783;
  --turquesa-deep:#2b2273;
  --turquesa-viva:#5e579e;
  /* acento sobre fundo escuro: eyebrow, fio, borda. Era o dourado da rede. */
  --dourado:#6fc5c7;
  --dourado-claro:#89cfd1;
  /* fundo escuro: a propria cor do hotel escurecida com preto. Era a tinta da rede. */
  --tinta:#0e0b25;
  --tinta-2:#120e2f;
  --tinta-3:#0a081a;
  --linha:rgba(14,11,37,.14);
  /* Os componentes rgb das mesmas cores. Sem eles, tudo que o CSS escrevia como
     rgba(11,43,51,.5) e que o tokeniza-cores.cjs converteu para rgba(var(--tinta-rgb),.5)
     continuaria resolvendo para a cor da REDE, e o hotel so mudaria pela metade. Foi
     exatamente o defeito que o socio achou no Ipioca em 10/09: pagina laranja com um bloco
     de fundo azul-petroleo no meio. */
  --tinta-rgb:14,11,37;
  --tinta-2-rgb:18,14,47;
  --tinta-3-rgb:11,9,29;
  --tinta-4-rgb:10,8,26;
  --tinta-5-rgb:6,5,17;
  --tinta-6-rgb:10,8,28;
  --turquesa-rgb:49,39,131;
  --turquesa-viva-rgb:94,87,158;
  --turquesa-deep-rgb:43,34,115;
  --dourado-rgb:111,197,199;
  --dourado-claro-rgb:137,207,209;

}
html[data-hotel="aqi"] .btn-turquesa{background:#312783;color:#fff;box-shadow:0 14px 34px rgba(49,39,131,.35)}
/* Tres estilos traziam a cor da rede chumbada, sem passar por variavel: o menu quando fixa
   no topo, as pilulas do hero e a sombra deles. Achado pelo socio em 10/09, olhando o
   Ipioca: a pagina inteira laranja e o menu fixo ainda verde-petroleo.
   Rodada 4 (18/09, so quem tem fundoMarca): o header deixa de ficar transparente sobre o
   hero e passa a ter o MESMO fundo claro que header.is-stuck ja tinha antes (so que agora
   e' fundoMarca, nao mais a tinta escura); os dois estados (parado no topo e grudado no
   scroll) ficam iguais. O botao dentro do header/rodape (mesma classe .btn-turquesa dos
   botoes do corpo da pagina) ganha uma cor PROPRIA aqui: sobre fundo laranja, o botao
   laranja padrao ficaria invisivel (mesma cor do fundo), entao vira texto-marca (escuro)
   com texto branco (17,2:1), so dentro de header/rodape; o resto da pagina continua com o
   botao padrao (fundo laranja puro, texto escuro), sem mudanca. */
html[data-hotel="aqi"] header.is-stuck{background:rgba(14,11,37,.92);box-shadow:0 10px 40px rgba(7,6,20,.45)}

html[data-hotel="aqi"] .pill{background:rgba(14,11,37,.72);color:#fff}
html[data-hotel="aqi"] .pill.gold{background:#6fc5c7;color:#0a081a}
/* O eyebrow do hero fica sobre foto, e a cor 02 sozinha some no ceu claro (o socio leu
   "O BOUTIQUE DA REDE MME" e nao conseguiu, em 10/09). Ganha corpo e sombra propria. */
html[data-hotel="aqi"] .hero .eyebrow{color:#93d4d5;text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 18px rgba(7,6,20,.8)}
html[data-hotel="aqi"] .hero .hero-veil{background:
  linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 34%,rgba(0,0,0,.30) 68%,rgba(0,0,0,.62) 100%),
  linear-gradient(180deg,rgba(49,39,131,.62) 0%,rgba(49,39,131,.16) 38%,rgba(49,39,131,.30) 62%,rgba(49,39,131,.78) 100%),
  linear-gradient(100deg,rgba(49,39,131,.66) 0%,rgba(49,39,131,0) 58%)}
/* Tema de aqp (ferramentas/tema-hotel.cjs): redefine as cores da rede pelas cores
   deste hotel. Nao editar a mao, o script regenera. Cor 01 #72c1a4, cor 02 #2d2c7e. */
html[data-hotel="aqp"]{
  /* acao: botao, link, destaque. Era o turquesa da rede.
     O --turquesa e a versao LEGIVEL da cor (escurecida quando a cor pura nao passa como
     texto sobre fundo claro); a cor pura vive no --turquesa-puro, para fundo e botao. */
  --turquesa:#4a7d6b;
  --turquesa-puro:#72c1a4;
  --turquesa-deep:#64aa90;
  --turquesa-viva:#91cfb8;
  /* acento sobre fundo escuro: eyebrow, fio, borda. Era o dourado da rede. */
  --dourado:#2d2c7e;
  --dourado-claro:#535295;
  /* fundo escuro: a propria cor do hotel escurecida com preto. Era a tinta da rede. */
  --tinta:#20362e;
  --tinta-2:#29453b;
  --tinta-3:#172721;
  --linha:rgba(32,54,46,.14);
  /* Os componentes rgb das mesmas cores. Sem eles, tudo que o CSS escrevia como
     rgba(11,43,51,.5) e que o tokeniza-cores.cjs converteu para rgba(var(--tinta-rgb),.5)
     continuaria resolvendo para a cor da REDE, e o hotel so mudaria pela metade. Foi
     exatamente o defeito que o socio achou no Ipioca em 10/09: pagina laranja com um bloco
     de fundo azul-petroleo no meio. */
  --tinta-rgb:32,54,46;
  --tinta-2-rgb:41,69,59;
  --tinta-3-rgb:25,42,36;
  --tinta-4-rgb:23,39,33;
  --tinta-5-rgb:15,25,21;
  --tinta-6-rgb:24,41,34;
  --turquesa-rgb:114,193,164;
  --turquesa-viva-rgb:145,207,184;
  --turquesa-deep-rgb:100,170,144;
  --dourado-rgb:45,44,126;
  --dourado-claro-rgb:83,82,149;

}
html[data-hotel="aqp"] .btn-turquesa{background:#72c1a4;color:#12251d;box-shadow:0 14px 34px rgba(114,193,164,.35)}
/* Tres estilos traziam a cor da rede chumbada, sem passar por variavel: o menu quando fixa
   no topo, as pilulas do hero e a sombra deles. Achado pelo socio em 10/09, olhando o
   Ipioca: a pagina inteira laranja e o menu fixo ainda verde-petroleo.
   Rodada 4 (18/09, so quem tem fundoMarca): o header deixa de ficar transparente sobre o
   hero e passa a ter o MESMO fundo claro que header.is-stuck ja tinha antes (so que agora
   e' fundoMarca, nao mais a tinta escura); os dois estados (parado no topo e grudado no
   scroll) ficam iguais. O botao dentro do header/rodape (mesma classe .btn-turquesa dos
   botoes do corpo da pagina) ganha uma cor PROPRIA aqui: sobre fundo laranja, o botao
   laranja padrao ficaria invisivel (mesma cor do fundo), entao vira texto-marca (escuro)
   com texto branco (17,2:1), so dentro de header/rodape; o resto da pagina continua com o
   botao padrao (fundo laranja puro, texto escuro), sem mudanca. */
html[data-hotel="aqp"] header.is-stuck{background:rgba(32,54,46,.92);box-shadow:0 10px 40px rgba(17,29,25,.45)}

html[data-hotel="aqp"] .pill{background:rgba(32,54,46,.72);color:#fff}
html[data-hotel="aqp"] .pill.gold{background:#2d2c7e;color:#fff}
/* O eyebrow do hero fica sobre foto, e a cor 02 sozinha some no ceu claro (o socio leu
   "O BOUTIQUE DA REDE MME" e nao conseguiu, em 10/09). Ganha corpo e sombra propria. */
html[data-hotel="aqp"] .hero .eyebrow{color:#ffffff;text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 18px rgba(17,29,25,.8)}
html[data-hotel="aqp"] .hero .hero-veil{background:
  linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 34%,rgba(0,0,0,.30) 68%,rgba(0,0,0,.62) 100%),
  linear-gradient(180deg,rgba(114,193,164,.62) 0%,rgba(114,193,164,.16) 38%,rgba(114,193,164,.30) 62%,rgba(114,193,164,.78) 100%),
  linear-gradient(100deg,rgba(114,193,164,.66) 0%,rgba(114,193,164,0) 58%)}
/* Tema de ibr (ferramentas/tema-hotel.cjs): redefine as cores da rede pelas cores
   deste hotel. Nao editar a mao, o script regenera. Cor 01 #e77b26, cor 02 #d0c9b7. */
html[data-hotel="ibr"]{
  /* acao: botao, link, destaque. Era o turquesa da rede.
     O --turquesa e a versao LEGIVEL da cor (escurecida quando a cor pura nao passa como
     texto sobre fundo claro); a cor pura vive no --turquesa-puro, para fundo e botao. */
  --turquesa:#ad5c1d;
  --turquesa-puro:#e77b26;
  --turquesa-deep:#cb6c21;
  --turquesa-viva:#f6ccab;
  /* acento sobre fundo escuro: eyebrow, fio, borda. Nos outros cinco hoteis e' so
     mistura(c1,BRANCO,.22); aqui e' clareada ate passar 4.6:1 contra --tinta
     E --tinta-2 (legivelSobreEscuro() acima), porque nas rodadas 1/2 de 18/09 o FUNDO ficou
     mais claro (satEscuro/lumEscuro) mas este acento nao mudava de valor: --turquesa-viva
     caiu para 3,76:1 e 3,08:1 contra os novos --tinta/--tinta-2 (era folgado contra o fundo
     quase-preto antigo). Rodada 3 (18/09): clareado ate 4.6:1 nos dois,
     mesma matiz do #e77b26. acentoEscuroAlvo=4.6, nao 4.5: e' o minimo WCAG (4.5) mais uma
     folga deliberada, porque o grid de busca de 0.05 em 0.05 pode pousar rente ao piso (a
     rodada 2 aceitou --tinta-2 a 4,71:1 sem querer; aqui a folga e' escolhida de proposito
     pra nao repetir margem apertada). Medido em
     docs/clientes/mme-hoteis/alteracoes-2026-09-18-ipioca-laranja.md. */
  --dourado:#d0c9b7;
  --dourado-claro:#d8d3c4;
  /* fundo escuro: a propria cor do hotel escurecida com preto (mistura RGB linear), com a
     saturacao substituida por satEscuro=0.68 e a luminosidade deslocada por lumEscuro=
     0.27 (H intacto, ver misturaEscura() em ferramentas/tema-hotel.cjs). Historico:
     17/09 pediu satEscuro=0.20 (fundo lia como marrom saturado, corrigido para quase-preto
     neutro). 18/09 rodada 1: satEscuro subiu para 0.68, mas so mexer na saturacao
     ainda lia como CHOCOLATE (luminosidade original baixa demais). 18/09 rodada 2 (decisao do
     socio, vendo a prova): lumEscuro=0.27 sobe a luminosidade do --tinta (ancora
     p=0.72) mantendo a matiz do #e77b26; os outros tons do Ipioca deslocam pelo mesmo
     valor, preservando a diferenca relativa entre eles. Fundo le como laranja queimado.
     Contraste conferido em
     docs/clientes/mme-hoteis/alteracoes-2026-09-18-ipioca-laranja.md. */
  --tinta:#743e16;
  --tinta-2:#86491a;
  --tinta-3:#623613;
  --linha:rgba(116,62,22,.14);
  /* Os componentes rgb das mesmas cores. Sem eles, tudo que o CSS escrevia como
     rgba(11,43,51,.5) e que o tokeniza-cores.cjs converteu para rgba(var(--tinta-rgb),.5)
     continuaria resolvendo para a cor da REDE, e o hotel so mudaria pela metade. Foi
     exatamente o defeito que o socio achou no Ipioca em 10/09: pagina laranja com um bloco
     de fundo azul-petroleo no meio. */
  --tinta-rgb:116,62,22;
  --tinta-2-rgb:134,73,26;
  --tinta-3-rgb:102,56,19;
  --tinta-4-rgb:98,54,19;
  --tinta-5-rgb:82,45,16;
  --tinta-6-rgb:100,55,19;
  --turquesa-rgb:231,123,38;
  --turquesa-viva-rgb:246,204,171;
  --turquesa-deep-rgb:203,108,33;
  --dourado-rgb:208,201,183;
  --dourado-claro-rgb:216,211,196;
  /* rodada 4 (18/09): fundo claro da marca para as secoes que eram escuras (destino,
     allin, recrear, chegada, mesa, rodape, header), e o texto escuro que vai por cima.
     Nao existe nos outros cinco hoteis. Ver
     docs/clientes/mme-hoteis/alteracoes-2026-09-18-ipioca-laranja.md, rodada 4. */
  --fundo-marca:#e77b26;
  --fundo-marca-2:#eb8f47;
  --fundo-marca-rgb:231,123,38;
  --fundo-marca-2-rgb:235,143,71;
  --texto-marca:#2b1608;
  --texto-marca-rgb:43,22,8;
}
html[data-hotel="ibr"] .btn-turquesa{background:#e77b26;color:#2b1608;box-shadow:0 14px 34px rgba(231,123,38,.35)}
/* Tres estilos traziam a cor da rede chumbada, sem passar por variavel: o menu quando fixa
   no topo, as pilulas do hero e a sombra deles. Achado pelo socio em 10/09, olhando o
   Ipioca: a pagina inteira laranja e o menu fixo ainda verde-petroleo.
   Rodada 4 (18/09, so quem tem fundoMarca): o header deixa de ficar transparente sobre o
   hero e passa a ter o MESMO fundo claro que header.is-stuck ja tinha antes (so que agora
   e' fundoMarca, nao mais a tinta escura); os dois estados (parado no topo e grudado no
   scroll) ficam iguais. O botao dentro do header/rodape (mesma classe .btn-turquesa dos
   botoes do corpo da pagina) ganha uma cor PROPRIA aqui: sobre fundo laranja, o botao
   laranja padrao ficaria invisivel (mesma cor do fundo), entao vira texto-marca (escuro)
   com texto branco (17,2:1), so dentro de header/rodape; o resto da pagina continua com o
   botao padrao (fundo laranja puro, texto escuro), sem mudanca. */
html[data-hotel="ibr"] header.is-stuck{background:rgba(231,123,38,.92);box-shadow:0 10px 40px rgba(87,46,17,.45)}
html[data-hotel="ibr"] header{background:#e77b26}
html[data-hotel="ibr"] header .btn-turquesa,html[data-hotel="ibr"] footer .btn-turquesa{background:#2b1608;color:#fff;box-shadow:0 14px 34px rgba(0,0,0,.25)}
html[data-hotel="ibr"] header .btn-turquesa:hover,html[data-hotel="ibr"] footer .btn-turquesa:hover{background:#743e16}
/* rodada 6 (18/09, socio, depois de ver a rodada 5): o header volta a ser TRANSPARENTE sobre o
   hero, com texto branco, como no Maceio Mar Resort; so ao rolar (.is-stuck) ele fica laranja,
   e o texto continua BRANCO. Decisao do socio contra a regua: branco sobre #e77b26 mede
   2.89:1 (minimo 4,5), mas o olho separa pela diferenca de croma, e o escuro sobre o laranja
   "fica ruim de leitura". Registrado em docs/clientes/mme-hoteis/alteracoes-2026-09-18-ipioca-laranja.md.
   Mega-menu (painel de Hoteis) tambem no laranja, com texto branco: o painel do menu.css e
   verde-petroleo da rede, hardcoded, e ficava horrivel sob o header laranja. */
html[data-hotel="ibr"] header{background:transparent;padding:18px 0}
html[data-hotel="ibr"] header.is-stuck{padding:8px 0}
html[data-hotel="ibr"] header .logo-hotel img{height:64px}
html[data-hotel="ibr"] header.is-stuck .logo-hotel img{height:48px}
html[data-hotel="ibr"] header nav a,html[data-hotel="ibr"] header .lang,html[data-hotel="ibr"] header .promo-link{font-weight:700;font-size:13px;letter-spacing:.1em;opacity:1;color:#fff}
html[data-hotel="ibr"] header nav a::after{background:#fff}
html[data-hotel="ibr"] header .burger i{background:#fff}
html[data-hotel="ibr"] .mega-panel{background:rgba(231,123,38,.97);box-shadow:0 30px 70px rgba(0,0,0,.25)}
html[data-hotel="ibr"] .mega-panel .mega-col>small,html[data-hotel="ibr"] .mega-panel .sub-extra small{color:rgba(255,255,255,.75)}
html[data-hotel="ibr"] .mega-panel .mega-nome,html[data-hotel="ibr"] .mega-hotel.atual .mega-nome{color:#fff}
html[data-hotel="ibr"] .mega-secs a{color:rgba(255,255,255,.8)}
html[data-hotel="ibr"] .mega-panel a:hover,html[data-hotel="ibr"] .mega-secs a:hover{color:#fff;text-decoration:underline}
html[data-hotel="ibr"] .mega-panel .mega-col+.mega-col,html[data-hotel="ibr"] .mega-hotel,html[data-hotel="ibr"] .mega-panel .sub-extra,html[data-hotel="ibr"] .mega-rede{border-color:rgba(255,255,255,.28)}
html[data-hotel="ibr"] .mega-rede a{color:rgba(255,255,255,.85)}
html[data-hotel="ibr"] header.nav-open nav{background:rgba(231,123,38,.97)}
html[data-hotel="ibr"] header .btn-turquesa{background:#fff;color:#2b1608;box-shadow:0 14px 34px rgba(0,0,0,.18)}
html[data-hotel="ibr"] header .btn-turquesa:hover{background:#2b1608;color:#fff}
html[data-hotel="ibr"] .pill{background:rgba(116,62,22,.72);color:#fff}
html[data-hotel="ibr"] .pill.gold{background:#d0c9b7;color:#623613}
/* O eyebrow do hero fica sobre foto, e a cor 02 sozinha some no ceu claro (o socio leu
   "O BOUTIQUE DA REDE MME" e nao conseguiu, em 10/09). Ganha corpo e sombra propria. */
html[data-hotel="ibr"] .hero .eyebrow{color:#dcd7c9;text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 18px rgba(87,46,17,.8)}
html[data-hotel="ibr"] .hero .hero-veil{background:
  linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 34%,rgba(0,0,0,.30) 68%,rgba(0,0,0,.62) 100%),
  linear-gradient(180deg,rgba(231,123,38,.62) 0%,rgba(231,123,38,.16) 38%,rgba(231,123,38,.30) 62%,rgba(231,123,38,.78) 100%),
  linear-gradient(100deg,rgba(231,123,38,.66) 0%,rgba(231,123,38,0) 58%)}
/* Tema de mmr (ferramentas/tema-hotel.cjs): redefine as cores da rede pelas cores
   deste hotel. Nao editar a mao, o script regenera. Cor 01 #42738f, cor 02 #d0c9b7. */
html[data-hotel="mmr"]{
  /* acao: botao, link, destaque. Era o turquesa da rede.
     O --turquesa e a versao LEGIVEL da cor (escurecida quando a cor pura nao passa como
     texto sobre fundo claro); a cor pura vive no --turquesa-puro, para fundo e botao. */
  --turquesa:#42738f;
  --turquesa-puro:#42738f;
  --turquesa-deep:#3a657e;
  --turquesa-viva:#6c92a8;
  /* acento sobre fundo escuro: eyebrow, fio, borda. Era o dourado da rede. */
  --dourado:#d0c9b7;
  --dourado-claro:#d8d3c4;
  /* fundo escuro: a propria cor do hotel escurecida com preto. Era a tinta da rede. */
  --tinta:#122028;
  --tinta-2:#182933;
  --tinta-3:#0d171d;
  --linha:rgba(18,32,40,.14);
  /* Os componentes rgb das mesmas cores. Sem eles, tudo que o CSS escrevia como
     rgba(11,43,51,.5) e que o tokeniza-cores.cjs converteu para rgba(var(--tinta-rgb),.5)
     continuaria resolvendo para a cor da REDE, e o hotel so mudaria pela metade. Foi
     exatamente o defeito que o socio achou no Ipioca em 10/09: pagina laranja com um bloco
     de fundo azul-petroleo no meio. */
  --tinta-rgb:18,32,40;
  --tinta-2-rgb:24,41,51;
  --tinta-3-rgb:15,25,31;
  --tinta-4-rgb:13,23,29;
  --tinta-5-rgb:9,15,19;
  --tinta-6-rgb:14,24,30;
  --turquesa-rgb:66,115,143;
  --turquesa-viva-rgb:108,146,168;
  --turquesa-deep-rgb:58,101,126;
  --dourado-rgb:208,201,183;
  --dourado-claro-rgb:216,211,196;

}
html[data-hotel="mmr"] .btn-turquesa{background:#42738f;color:#fff;box-shadow:0 14px 34px rgba(66,115,143,.35)}
/* Tres estilos traziam a cor da rede chumbada, sem passar por variavel: o menu quando fixa
   no topo, as pilulas do hero e a sombra deles. Achado pelo socio em 10/09, olhando o
   Ipioca: a pagina inteira laranja e o menu fixo ainda verde-petroleo.
   Rodada 4 (18/09, so quem tem fundoMarca): o header deixa de ficar transparente sobre o
   hero e passa a ter o MESMO fundo claro que header.is-stuck ja tinha antes (so que agora
   e' fundoMarca, nao mais a tinta escura); os dois estados (parado no topo e grudado no
   scroll) ficam iguais. O botao dentro do header/rodape (mesma classe .btn-turquesa dos
   botoes do corpo da pagina) ganha uma cor PROPRIA aqui: sobre fundo laranja, o botao
   laranja padrao ficaria invisivel (mesma cor do fundo), entao vira texto-marca (escuro)
   com texto branco (17,2:1), so dentro de header/rodape; o resto da pagina continua com o
   botao padrao (fundo laranja puro, texto escuro), sem mudanca. */
html[data-hotel="mmr"] header.is-stuck{background:rgba(18,32,40,.92);box-shadow:0 10px 40px rgba(10,17,21,.45)}

html[data-hotel="mmr"] .pill{background:rgba(18,32,40,.72);color:#fff}
html[data-hotel="mmr"] .pill.gold{background:#d0c9b7;color:#0d171d}
/* O eyebrow do hero fica sobre foto, e a cor 02 sozinha some no ceu claro (o socio leu
   "O BOUTIQUE DA REDE MME" e nao conseguiu, em 10/09). Ganha corpo e sombra propria. */
html[data-hotel="mmr"] .hero .eyebrow{color:#dcd7c9;text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 18px rgba(10,17,21,.8)}
html[data-hotel="mmr"] .hero .hero-veil{background:
  linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 34%,rgba(0,0,0,.30) 68%,rgba(0,0,0,.62) 100%),
  linear-gradient(180deg,rgba(66,115,143,.62) 0%,rgba(66,115,143,.16) 38%,rgba(66,115,143,.30) 62%,rgba(66,115,143,.78) 100%),
  linear-gradient(100deg,rgba(66,115,143,.66) 0%,rgba(66,115,143,0) 58%)}
/* fim temas por hotel */

/* conserto funcional 16/09 (ferramentas/rodape-e-css.cjs) */
/* Rodapé: dois nomes longos quebravam em duas linhas na coluna Resorts. */
.f-col a.f-nowrap,
.f-col a[href="/maceio-mar-resort"],
.f-col a[href="https://turistandoemmaceio.com.br"]{white-space:nowrap}

/* Acqua Prime: a cor 01 do hotel é um azul-marinho escuro, e o botão dourado ficava com
   texto tinta sobre ela (1,09:1). O em dourado do fecho, sobre a tinta, dava 2,23:1.
   Legibilidade agora; o redesenho da paleta é decisão do sócio, depois. */
html[data-hotel="aqp"] .btn-dourado{color:#fff}
html[data-hotel="aqp"] .chegada h2 em{color:#fff}
html[data-hotel="aqp"] .est-card small,
html[data-hotel="aqp"] .rec-card small,
html[data-hotel="aqp"] .lz-card small{color:#c9cbe6}
/* fim conserto funcional 16/09 */

/* regressao 16/09: o cartao proativo do Asksuite (#titlediv, "Como posso ajudar?") nasce
   ao lado do avatar e cobre o BUSCAR da barra de reserva no desktop, o RESERVAR AGORA dos
   fechos no celular e a linha legal do rodape. O cartao e DOM da pagina (nao iframe), entao
   some por CSS; a bolha (.infochat_floatmain / #infochat_float) continua clicavel. */
#titlediv.infochat_cnt,
#titlediv.infochat_custom_message,
#infochat_close_message{display:none !important}

/* placeholder de foto (ferramentas/sem-foto.cjs): o card com foto-a-receber-liso.svg fica
   sobre BEGE CLARO, e o rotulo em maiusculas (o <small> na cor do hotel) sumia. Sobre esse
   fundo o rotulo vai de tinta. Achado do socio em 16/09 (MMH: NA BEIRA DA PISCINA, PARA
   MANTER O RITMO, ATRAVESSANDO A RUA, NA ORLA A PE; AQP: RESTAURANTE). O !important e para
   vencer os ajustes por hotel (html[data-hotel=...] .est-card small e irmaos). */
.sem-foto ~ * small,
.sem-foto ~ * .kicker,
.sem-foto ~ * .eyebrow,
.sem-foto ~ small,
.sem-foto ~ .kicker,
.sem-foto ~ .eyebrow,
.sem-foto small,
.sem-foto .kicker,
.sem-foto .eyebrow{color:var(--tinta) !important;opacity:1}
/* excecao do card de estrutura (.lz-card): ali o .corpo e ancorado no RODAPE do card, ou
   seja, em cima do veu, e nao sobre o bege do placeholder. Duas coisas quebravam nesses
   cards e as duas foram medidas em 17/09, nos 21 cards `lz-card` com placeholder do site:
   1) o veu a .72 do `veil-forte` sobre bege claro deixava o rodape do card claro, com o
      titulo BRANCO por cima; aqui o veu fecha mais, e o card passa a ler igual ao card com
      foto (que e o que a lei do socio pede: o placeholder ocupa o lugar da foto);
   2) com o rodape escuro, o rotulo de tinta da regra acima sumia (1,1:1 a 2,8:1), entao
      nesses cards ele volta a ser o dourado dos cards com foto. */
.lz-card .sem-foto ~ .veil{background:linear-gradient(180deg,rgba(var(--tinta-rgb),.06) 24%,rgba(var(--tinta-4-rgb),.90) 60%,rgba(var(--tinta-4-rgb),.98) 100%)}
.lz-card .sem-foto ~ .corpo small,
.lz-card .sem-foto ~ .corpo .kicker,
.lz-card .sem-foto ~ .corpo .eyebrow{color:var(--dourado-claro) !important}
/* o Acqua Prime ja tem excecao propria logo acima (o --dourado-claro dele e escuro demais
   para rotulo sobre veu). Ela precisa do !important aqui para nao perder para a regra do
   placeholder. */
html[data-hotel="aqp"] .lz-card .sem-foto ~ .corpo small{color:#c9cbe6 !important}
/* no celular o card fica quase quadrado e o icone de camera do SVG cruzava o rotulo e o
   titulo (MMH m-08). Versao mobile do placeholder: mesma moldura tracejada, camera pela
   metade e no terco de cima. O !important vence o style inline da tag. */
@media (max-width:640px){
  .sem-foto[style*="foto-a-receber-liso.svg"]{background-image:url("../assets/fotos/foto-a-receber-liso-mobile.svg") !important}
}
/* os cards de grade nunca sao largos (quatro por fileira no desktop), entao ali o placeholder
   pequeno vale em qualquer largura: no 1280 a camera grande cruzava o rotulo igual. */
.porta-card .sem-foto[style*="foto-a-receber-liso.svg"],
.est-card .sem-foto[style*="foto-a-receber-liso.svg"],
.lz-card .sem-foto[style*="foto-a-receber-liso.svg"],
.rec-card .sem-foto[style*="foto-a-receber-liso.svg"]{background-image:url("../assets/fotos/foto-a-receber-liso-mobile.svg") !important}

/* residuo 16/09: a bolha do Asksuite (.infochat_floatmain, 68px, fixa em bottom:10 right:21)
   cruzava o fim da assinatura "Site por GREEKy" do rodape em 1280x900 (25px de sobreposicao
   medidos no navegador) e encostava nas linhas de estatistica dos heros de servico. Duas
   medidas e nenhuma esconde a bolha: ela sobe 24px, e a assinatura recua o bastante para sair
   de baixo dela (subir sozinho nao resolvia, a bolha e mais alta que a linha do rodape).
   As duas valem so acima de 640px: no celular o rodape se reempilha e a bolha tambem cruza a
   assinatura, mas ali subir 24px nao resolve nada e so muda o lugar da sobreposicao. */
@media (min-width:641px){
  .infochat_floatmain,
  #infochat_float{bottom:34px !important}
  footer .f-bottom .f-assina{margin-right:64px}
}

/* celular (390x844, 17/09): medido no navegador com a pagina no fim da rolagem, a bolha ocupa
   a faixa fixa 766-834 e a ultima linha do rodape terminava em 800, ou seja, a assinatura
   "Site por GREEKy" corria por baixo da bolha (34px de sobreposicao vertical na home, no Acqua
   Prime e no Ipioca). No celular subir a bolha nao resolve, so muda de vitima: acima dela esta
   a barra de reserva do hero, que no 390 termina colada no rodape da tela. Entao duas medidas
   com o mesmo efeito de folga e nenhuma esconde a bolha:
   1) o rodape ganha base: padding-bottom no .f-bottom empurra a ultima linha para cima do
      alcance da bolha (a pagina cresce, e no fim da rolagem a linha sobe o mesmo tanto);
   2) a bolha encolhe de 68px para 56px, ancorada no canto (transform-origin no canto inferior
      direito, entao ela nao se desloca, so ocupa menos). Isso tambem devolve a quina da barra
      de reserva do hero, que a bolha grande cobria.
   A janela do chat aberto e outro no (iframe#botchatbotaskuite dentro de div#chatbot), fora
   de #chatbotmobile: encolher a bolha nao encolhe a conversa. */
@media (max-width:640px){
  #chatbotmobile .infochat_floatmain{transform:scale(.82);transform-origin:100% 100%}
  footer .f-bottom{padding-bottom:48px}
}