/* ============================================================================
   PADRAO DE 24/09/2026: o que nasceu na v2 do Ipioca e vale para as SEIS homes
   de hotel. Carregado por todas elas, depois das outras folhas, para ganhar no
   desrempate. O que e especifico de uma pagina (hero, secoes proprias) NAO mora
   aqui: mora no gerador daquela pagina.

   Cada bloco diz de onde veio, porque cada um e um pedido do socio com o motivo
   registrado em docs/clientes/mme-hoteis/alteracoes-2026-09-24-ipioca-v2.md.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. TELAS GRANDES (pedido de 24/09: "em monitores maiores os elementos ficam
   pequenos e perde a sensacao boa cinematografica").
   O site inteiro foi desenhado para 1280px. Num monitor de 2560 isso deixa 640px
   de vazio de cada lado e cada foto vira miniatura. A faixa alarga e TUDO que
   tinha medida fixa cresce pelo mesmo fator, para a tela grande ver a mesma
   pagina, maior, e nao uma pagina mais vazia.
   Abaixo de 1500px a escala e 1: nada muda no desktop comum nem no celular.
--------------------------------------------------------------------------- */
:root{--wrap-max:1280px;--escala:1}
@media (min-width:1500px){:root{--wrap-max:min(1760px,90vw);--escala:1.16}}
@media (min-width:1900px){:root{--wrap-max:min(1980px,88vw);--escala:1.26}}
@media (min-width:2400px){:root{--wrap-max:min(2200px,86vw);--escala:1.4}}
.wrap{max-width:var(--wrap-max)}

@media (min-width:1500px){
  /* alturas */
  .est-a,.est-b{height:calc(420px * var(--escala))}
  .est-c,.est-d{height:calc(360px * var(--escala))}
  .est-e{height:calc(330px * var(--escala))}
  .rec-card{height:calc(340px * var(--escala))}
  .acc-foto{height:calc(330px * var(--escala))}
  .allin-foto,.mesa-foto{height:calc(520px * var(--escala))}
  /* A miniatura NAO escala, e e de proposito. Escalar a largura dela obriga a
     redefinir a grade da linha, e a grade nao e a mesma nas seis paginas: o
     Ipioca tem 5 campos na linha fechada e o Maceio Mar tem 6 (ganha o de
     capacidade). Chumbar 5 colunas jogava o sexto campo para uma segunda linha e
     embaralhava preco e capacidade, achado pelo socio em 25/09. So o vao cresce,
     porque vao nao muda contagem de coluna. */
  .acc-head{gap:calc(24px * var(--escala))}
  .acc-mais{width:calc(40px * var(--escala));height:calc(40px * var(--escala))}
  /* texto. O !important aqui NAO e preguica: as quatro homes urbanas tem um
     bloco "css-padrao-site" que ja fixa esses mesmos tamanhos com !important
     (ex.: acqua-suites.html:1239). Sem igualar a arma, em monitor grande o
     cartao crescia e a letra ficava no tamanho de 1280. Vale so dentro deste
     @media, entao abaixo de 1500px nada muda. Divida registrada: o certo, um dia,
     e tirar o !important de la. */
  .allin .lede,.recrear .sub{font-size:calc(15.5px * var(--escala))!important}
  .acc-det p,.est-card .corpo p,.est-card p,.ai-bullets p{font-size:calc(14.5px * var(--escala))!important}
  .recrear h2,.allin h2,.estrutura h2,.mesa2 h2{font-size:calc(42px * var(--escala))}
  .sec-head h2{font-size:calc(46px * var(--escala))}
  .rec-card .corpo h3,.est-card .corpo h3,.rec-card h3,.est-card h3{font-size:calc(24px * var(--escala))!important}
  .num-row b{font-size:calc(27px * var(--escala))}
  .num-row{font-size:calc(14px * var(--escala))}
  .acc-nome b{font-size:calc(19px * var(--escala))!important}
  .acc-det h3{font-size:calc(24px * var(--escala))!important}
  /* as larguras de leitura tambem eram fixas: sem escalar, o titulo maior quebra
     em duas linhas dentro de uma caixa estreita no meio de um campo enorme */
  .recrear h2{max-width:calc(600px * var(--escala))}
  .recrear .sub{max-width:calc(560px * var(--escala))}
  .allin h2,.allin .lede{max-width:calc(520px * var(--escala))}
  .sec-head h2{max-width:calc(640px * var(--escala))}
  .acc-det p{max-width:calc(460px * var(--escala))!important}
  .est-card .corpo{padding:calc(26px * var(--escala))}
  .rec-card .corpo{padding:calc(22px * var(--escala))}
  /* o cabecalho acompanha de leve: logotipo de 42px num campo de 2200 le como
     miniatura de outro site */
  .logo img{height:calc(42px * var(--escala))}
  header.is-stuck .logo img{height:calc(32px * var(--escala))}
  header nav a,.header-right .promo-link,.header-right .lang{font-size:calc(12px * var(--escala))}
  .header-right .btn{font-size:calc(12px * var(--escala));padding:calc(15px * var(--escala)) calc(26px * var(--escala))}
}

/* ---------------------------------------------------------------------------
   2. ACOMODACOES (pedido da Giuliana: "manter layout, otimizar informacoes e
   espacos para nao ficar excesso, fundo branco").
--------------------------------------------------------------------------- */
.quartos{background:#fff}
.quartos .acc-head{padding:14px 8px 14px 0;gap:20px}
.quartos .acc-item.open .acc-panel{gap:38px}
.quartos .acc-panel{padding:6px 0 32px}
.quartos .acc-det p{margin-top:10px}
.quartos .acc-det .acts{margin-top:22px}

/* ---------------------------------------------------------------------------
   3. PROGRAMACAO: tira continua no lugar de tres cartoes soltos (referencia da
   Giuliana, 24/09).
--------------------------------------------------------------------------- */
.recrear .rec-grid{gap:0}
.recrear .rec-card{box-shadow:none}
.recrear .rec-card .veil{background:linear-gradient(180deg,rgba(var(--tinta-rgb),.02) 45%,rgba(var(--tinta-4-rgb),.82) 100%)}
.recrear .rec-card .corpo h3{margin-top:4px}

/* ---------------------------------------------------------------------------
   4. CELULAR (pedidos do socio em 24/09, 19h44 as 20h32)
--------------------------------------------------------------------------- */
@media (max-width:640px){
  /* "nao da pra ler": o veu do cartao do vizinho e um gradiente HORIZONTAL,
     forte a esquerda e quase nulo a direita. No celular o cartao vira coluna e o
     texto desce para o rodape, justamente onde o veu nao cobre. */
  .rede-card .veil{background:linear-gradient(180deg,rgba(var(--tinta-4-rgb),.12) 0%,rgba(var(--tinta-4-rgb),.58) 42%,rgba(var(--tinta-4-rgb),.92) 100%)}

  /* "aumentar foto": a tira do destino tinha 56vw de altura, uma faixa fina */
  .dest-f{height:82vw;width:calc(82vw * 1.4)}

  /* a tira de programacao continua contigua, so mais baixa */
  .recrear .rec-card{height:240px}

  /* "igual o Acqua que abre quando clica no botao": o motor de reserva nasce
     recolhido. Quem autoriza o CSS a esconder o formulario e a classe que o JS
     poe: sem JS, ele continua visivel e utilizavel. O laranja e o do menu com 8%
     a menos, que e o minimo para o texto branco passar de 3:1 (medido: 3,38:1;
     no laranja exato daria 2,89:1 e reprovaria). */
  .motor-abrir[hidden]{display:none}
  .motor-abrir{display:block;width:100%;padding:19px;border:0;background:#d57123;color:#fff;font:inherit;font-size:19px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
  /* A trava esconde SO enquanto esta fechado. Ao abrir, a regra deixa de casar e o
     cartao volta ao display que a propria pagina declarou, sem este arquivo precisar
     saber qual e. Antes eu declarava display na abertura, e isso assume que todo
     motor do site e flex: e o mesmo tipo de suposicao que quebrou duas paginas hoje.
     Achado do revisor externo (25/09), triado como latente e nao vivo. Tentei
     display:revert primeiro e estava errado: revert volta ao padrao do NAVEGADOR
     (block), nao ao que o autor declarou. */
  .tem-botao:not(.aberto) .search-card,
  .tem-botao:not(.aberto) .search-note{display:none}
  /* 'revert' e nao 'flex': abrir o motor tem que devolver o display que a PROPRIA
     pagina declarou, seja qual for. Cravar flex aqui assume que todo motor do site
     e flex, e essa suposicao e exatamente o tipo que ja quebrou duas paginas hoje.
     Achado do revisor externo em 25/09; triado como latente, nao vivo: as tres
     paginas que ganham o botao hoje declaram flex. */

  .tem-botao .s-go{width:100%}
  .tem-botao .s-field{padding:20px 22px}
}

/* ---------------------------------------------------------------------------
   5. LOOPING DE IMAGENS (componente). A caixa manda na altura e o looping
   preenche por dentro: height:100% dentro de um pai so com min-height computa
   zero e a foto some sem avisar. O primeiro quadro nasce com .is-on no HTML.
--------------------------------------------------------------------------- */
.v2-loop-caixa{position:relative}
.v2-loop{position:absolute;inset:0;overflow:hidden;box-shadow:0 30px 70px rgba(var(--tinta-rgb),.24)}
.v2-loop-f{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease}
.v2-loop-f.is-on{opacity:1}
.v2-loop .m-legenda{position:absolute;left:18px;right:18px;bottom:14px;z-index:3;margin:0;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.v2-loop::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(0deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 40%);pointer-events:none}
@media (prefers-reduced-motion:reduce){.v2-loop-f{transition:none}}

/* ---------------------------------------------------------------------------
   6. O MOTOR SOB O HERO no celular. Fora da grade da secao, o bloco perde o
   respiro do .wrap e precisa do seu proprio; a subida de 26px encosta o botao na
   borda de baixo do hero, que e o que garante ele na primeira dobra.
--------------------------------------------------------------------------- */
@media (max-width:640px){
  .ficou-vazio{display:none}
  .search.sob-o-hero{padding:0 24px;margin-top:-26px;margin-bottom:22px;position:relative;z-index:30;width:100%;max-width:none}
  .search.sob-o-hero .search-note{margin-top:12px;color:var(--grafite)}
}

/* ---------------------------------------------------------------------------
   7. GUARDA DE ESTOURO, reafirmada. As paginas tem, desde antes, uma regra
   `section,header,footer,.wrap,... {max-width:100vw}` dentro de
   `@media (max-width:820px)`, para nada furar a tela no celular. O
   `.wrap{max-width:var(--wrap-max)}` do bloco 1 vem DEPOIS e tem a mesma
   especificidade, entao anulava essa guarda sem querer. Aqui ela volta, agora
   por ultimo. Achado pela revisao das quatro urbanas em 24/09.
--------------------------------------------------------------------------- */
@media (max-width:820px){
  .wrap{max-width:100vw}
}

/* ---------------------------------------------------------------------------
   NAO e defeito, e esta escrito para ninguem "corrigir" depois: nas quatro
   urbanas a tira de cartoes usa `.rec-grid.cinco .rec-card{height:320px}`, que
   vence o `240px` do bloco 3 por especificidade. E proposital: la sao cinco
   cartoes da rede, nao os tres de programacao de um resort, e aquela altura foi
   aprovada na rodada da Giuliana de 23/09.
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   8. HERO DO PADRAO (logotipo centralizado, chamada curta, selos sem marca
   texto). Nasceu no Ipioca e foi para o outro resort: estava copiado nas duas
   paginas, e copia que muda em uma so e o comeco de duas paginas diferentes.
   Os hoteis urbanos NAO usam: eles tem o hero v6 da rodada de 23/09.
--------------------------------------------------------------------------- */
.v2-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.v2-hero-in{display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:40px}
/* o logotipo dos dois resorts e retrato: quem manda e a altura, nunca a largura */
.v2-hero-logo{height:clamp(120px,19vh,186px);width:auto;filter:drop-shadow(0 10px 40px rgba(0,0,0,.45))}
.v2-hero-frase{margin-top:26px;font-weight:600;font-size:clamp(30px,4.4vw,52px);line-height:1.1;letter-spacing:-.02em;color:#fff;text-shadow:0 2px 26px rgba(0,0,0,.4);max-width:16ch}
.v2-hero-frase em{font-style:italic;font-weight:300}
.v2-hero-selos{margin-top:26px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 0;color:rgba(255,255,255,.88);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.v2-hero-selos span+span::before{content:"";display:inline-block;width:5px;height:5px;background:var(--dourado);transform:rotate(45deg);margin:0 18px;position:relative;top:-2px}
.v2-hero-nota{margin-top:20px}
/* Onde o motor de reserva continua logo abaixo do hero (o outro resort), o
   cartao dele sobe 78px e cobria a nota do TripAdvisor. O hero abre espaco so
   nesse caso: no Ipioca o motor desceu para a 2a secao e a regra nao casa. */
.hero:has(+ .wrap.search) .v2-hero-in{padding-bottom:104px}
.v2-hero-in+.scroll-cue,.v2-hero-in~.scroll-cue{bottom:40px}
@media (min-width:1500px){
  .v2-hero-logo{height:clamp(120px,19vh,calc(186px * var(--escala)))}
  .v2-hero-frase{font-size:clamp(30px,4.4vw,calc(52px * var(--escala)))}
  .v2-hero-selos{font-size:calc(11px * var(--escala))}
}
@media (max-width:640px){
  .v2-hero-logo{height:clamp(96px,15vh,130px)}
  .v2-hero-selos{font-size:10px}
  .v2-hero-selos span+span::before{margin:0 12px}
}

/* ---------------------------------------------------------------------------
   9. ACHADOS DO SILVIO (MME), 25/09/2026. Tres defeitos que ele viu olhando a
   previa, e que sao de estrutura, nao de gosto.
--------------------------------------------------------------------------- */

/* "no rodape, tem essa barra branca. eu vi que tem algo clicavel, mas nao da
   pra ver o que e". O caminho de navegacao aparece duas vezes na pagina: no topo
   (fundo claro) e dentro do rodape (fundo escuro). A regra de fundo claro era da
   pagina inteira, e no rodape sobrava texto BRANCO sobre AREIA: 1,05:1, ilegivel.
   Sao 7 paginas com esse defeito, nao uma. No rodape o fundo sai. */
footer .migalha-pe .migalha{background:transparent;border-bottom:0}

/* "tem um quadrado a mais no lado direito do botao buscar". O cartao do motor
   tinha largura fixa de 1080px, mas os campos nao crescem para preencher: no
   Maceio Mar, a 2049px, sobravam 104px de branco depois do "Buscar" (campos
   somam 976). Os campos passam a crescer para preencher: o !important e porque a largura deles
   vem de style inline no HTML de cada pagina. Encolher a caixa nao serve, ela tem
   flex-wrap e quebraria em duas linhas. */
.search-card .s-field{flex-grow:1!important}

/* "ja no maceio mar resort, ela ta no lugar certo, so nao ta centralizada".
   Centraliza SO onde o motor fica logo abaixo do hero: no Ipioca ele vive dentro
   da 2a secao, atravessando a foto, que e o desenho aprovado da Giuliana. */
.hero + .wrap.search > .search-card{margin-inline:auto}

/* ---------------------------------------------------------------------------
   10. BOTAO INVISIVEL NO CTA DE CHEGADA. Achado pela varredura das 51 paginas
   em 25/09, depois de o socio perguntar se havia outra pagina com o mesmo
   padrao do defeito do Silvio. Havia, e pior: nao era so texto com pouco
   contraste, era texto BRANCO sobre fundo BRANCO, 1:1.

   A causa sao duas regras com !important brigando, na ordem errada: a primeira
   pinta o par de botoes de branco com texto marrom (`.chegada .btn-dourado,
   .chegada .btn-ghost-claro{background:#fff!important;color:...!important}`), e
   a segunda devolve SO a cor do texto para branco, sem desfazer o fundo. O
   resultado e um botao que existe, ocupa espaco, e nao se le.

   Sao 7 paginas, e o botao fantasma volta a ser fantasma: fundo transparente.
--------------------------------------------------------------------------- */
.chegada .btn-ghost-claro{background:transparent!important}

/* ---------------------------------------------------------------------------
   11. O LINK DE PULAR PARA O CONTEUDO, que so aparece para quem navega por
   teclado, usava `--turquesa-deep`. Esse token muda por hotel: na rede ele e
   um verde-azul que da 6:1 com branco, mas no Ipioca e um laranja medio e cai
   para 3,68:1, e em outra pagina foi medido a 2,73:1. Passa a usar a tinta,
   que e escura em todas as paletas: 14,92:1.
--------------------------------------------------------------------------- */
.pular{background:var(--tinta)}

/* ---------------------------------------------------------------------------
   12. SELETOR DE IDIOMA COM LINKS (15/10/2026). Os itens "em breve" eram <span>;
   com o TranslatePress viraram <a> para a mesma pagina no outro idioma (ver
   inc/mme-hoteis/idiomas.php). Mesmo corpo do span, com cor de link e hover
   no dourado do idioma atual.
--------------------------------------------------------------------------- */
.lang-menu a{display:block;padding:9px 16px;font-size:12px;letter-spacing:.06em;white-space:nowrap;
  color:rgba(255,255,255,.85);text-decoration:none}
.lang-menu a:hover,.lang-menu a:focus-visible{color:var(--dourado-claro)}