/* FONTES POR FAMÍLIA (17/09/2026). Este @import precisa continuar sendo as
   PRIMEIRA regra do arquivo: o CSS só aceita @import antes de qualquer outra regra.

   1) Typekit do Silvio (marketing da MME): entrega a KOBENHAVN, a fonte que ele definiu
      para os RESORTS no grupo em 08/09. O kit rns6hja expõe kobenhavn em 400 e 700, cada
      um com itálico, e mais uma kobenhavn-pictos 900 que é fonte de pictograma e NÃO é
      usada aqui. Não existe kobenhavn 900 no kit: o h1 do hero pede 600 e o navegador
      resolve no 700 real, e o .mar pede itálico 300 e resolve no itálico 400 real.
   2) NEUTRA TEXT (Neutraface Text, House Industries) na REDE e nos URBANOS, definida pelo
      Silvio em 09/09 e confirmada em 17/09. Decisao do socio em 17/09: NENHUMA fonte
      substituta (a Jost saiu). Os @font-face abaixo carregam a Neutraface de verdade;
      Poppins fica na pilha so como seguranca de rede, nunca como escolha. */
@import url("https://use.typekit.net/rns6hja.css");

/* NEUTRAFACE TEXT (17/09, tarde; refeita em 18/09): arquivos em estilo/neutraface-text-*.woff2,
   gerados por ferramentas/fontes-neutraface.py a partir dos OTF que o socio forneceu. Decisao
   do socio em 18/09: os arquivos ENTRAM no git (clone do Andre e srv01 carregam a mesma fonte;
   o socio assume a responsabilidade da licenca ate a MME comprar a web da House Industries,
   e ai os OTF licenciados passam pelo mesmo script com os mesmos nomes). Pesos: 300 Light,
   400 Book, 600 Demi (o 500 cai no Demi), 700 Bold; italico so em 300 e 400.
   Duas armadilhas que o script resolve (ver docstring dele): os OTF sao CFF com acento por
   "seac" (Chrome no Windows desenhava "Suí tes"), por isso viram TrueType; e os OTF de origem
   trazem ¹²³ como um pontinho placeholder, por isso o script reconstroi os tres a partir dos
   algarismos da propria face. Nenhuma queda para Poppins em caractere nenhum. ?v= e cache. */
@font-face{font-family:"Neutraface Text";font-style:normal;font-weight:300;font-display:swap;src:url("neutraface-text-300.woff2?v=3") format("woff2")}
@font-face{font-family:"Neutraface Text";font-style:italic;font-weight:300;font-display:swap;src:url("neutraface-text-300i.woff2?v=3") format("woff2")}
@font-face{font-family:"Neutraface Text";font-style:normal;font-weight:400;font-display:swap;src:url("neutraface-text-400.woff2?v=3") format("woff2")}
@font-face{font-family:"Neutraface Text";font-style:italic;font-weight:400;font-display:swap;src:url("neutraface-text-400i.woff2?v=3") format("woff2")}
@font-face{font-family:"Neutraface Text";font-style:normal;font-weight:500 600;font-display:swap;src:url("neutraface-text-600.woff2?v=3") format("woff2")}
@font-face{font-family:"Neutraface Text";font-style:normal;font-weight:700;font-display:swap;src:url("neutraface-text-700.woff2?v=3") format("woff2")}

/* familias.css: as três FAMÍLIAS do site (17/09/2026). Pedido do sócio: separar visualmente
   a rede, os hotéis urbanos e os resorts, sem mexer no tema de cor por hotel.

   ORDEM DE CARGA. Este arquivo entra DEPOIS do estilo/tokens.css e do <style> embutido de
   cada página, e IMEDIATAMENTE ANTES do estilo/menu.css. O menu.css continua sendo a
   ÚLTIMA folha do <head> nas 49 páginas: isso é regra dura da casa e já causou incidente.
   Quem liga o <link> é ferramentas/familias-link.cjs, que também confere essa ordem.

   A COR DO HOTEL CONTINUA VENCENDO. Os blocos html[data-hotel="..."] do tokens.css são os
   únicos donos de --turquesa, --dourado, --tinta e derivados. Este arquivo NÃO redefine
   nenhum deles: só declara o que é de FAMÍLIA, com o prefixo --fam-. Quando um --fam-
   aponta para uma cor (--fam-eyebrow, por exemplo), ele aponta para a variável de tema, e
   por isso já chega resolvido na cor do hotel da página, não numa cor fixa de família.

   NADA AQUI USA var() DE SI MESMA. Em 10/09/2026 o tokeniza-cores.cjs gerou
   `--tinta:var(--tinta)` (circular, inválido em CSS) e foi ao ar. Nenhum --fam- pode
   referenciar um --fam-, nem o de mesmo nome de outro bloco.

   ETAPA 1 (17/09, esta). Cor, papel, raio e sombra continuam com o valor que a página já
   usa hoje, e nenhuma regra do site foi religada a eles: nesses quatro, nada muda na tela.
   Mudam três coisas, todas declaradas: o véu do hero dos resorts (fim do arquivo), a
   TIPOGRAFIA de cada família (--fam-fonte-titulo e --fam-fonte-texto, agora com valor
   próprio) e as regras do fim do arquivo que religam o site nessas duas variáveis.
   ETAPA 2 (do sócio). Trocar os valores por família e religar as regras do site nos
   --fam-. Só aí a diferença aparece na tela. */

/* ------------------------------------------------------------------ */
/* (a) REDE: home, a-rede, blog, contato, promoções, jurídico, 404.    */
/*     São as 9 páginas sem o atributo data-hotel no <html>.           */
/* ------------------------------------------------------------------ */
html:not([data-hotel]) {
  /* fundo claro das seções: o do <body> e o das faixas claras entre blocos escuros */
  --fam-fundo-secao: var(--areia);
  /* fundo dos cards claros sobre o fundo de seção (cartão de busca, card de unidade, card de conteúdo) */
  --fam-papel: var(--papel);
  /* opacidade do véu do hero, 0 a 1. Hoje o .hero-veil renderiza a 1 e o escurecimento
     mora nas paradas do gradiente, não aqui. Fica declarado para a etapa 2 ter um botão só. */
  --fam-veu-hero: 1;
  /* raio dos cards: o site é de canto reto (editorial), e o 50% que aparece no CSS é de ícone redondo */
  --fam-raio-card: 0;
  /* sombra dos cards claros: a mais repetida hoje nas páginas de rede, urbano e resort */
  --fam-sombra-card: 0 18px 44px rgba(var(--tinta-rgb), .12);
  /* cor do rótulo pequeno em maiúsculas (.eyebrow) quando ele está sobre fundo CLARO,
     que é o caso de .sec-head .eyebrow em todas as páginas. Sobre foto o hero tem regra
     própria por hotel no tokens.css, e ela não passa por aqui. */
  --fam-eyebrow: var(--turquesa-deep);
  /* tipografia. NEUTRA TEXT, definida pelo Silvio, carregada pelos @font-face do topo. */
  --fam-fonte-titulo: "Neutraface Text", "Neutra Text", "Poppins", sans-serif;
  --fam-fonte-texto: "Neutraface Text", "Neutra Text", "Poppins", sans-serif;
}

/* ------------------------------------------------------------------ */
/* (b) RESORT: Maceió Mar Resort (mmr) e Ipioca Beach Resort (ibr).    */
/*     16 páginas.                                                    */
/* ------------------------------------------------------------------ */
html[data-hotel="mmr"],
html[data-hotel="ibr"] {
  /* fundo claro das seções: o do <body> e o das faixas claras entre blocos escuros */
  --fam-fundo-secao: var(--areia);
  /* fundo dos cards claros sobre o fundo de seção (acomodação, restaurante, estrutura) */
  --fam-papel: var(--papel);
  /* opacidade do véu do hero, 0 a 1. Continua 1: o véu mais leve destes dois hotéis foi
     feito nas paradas do gradiente, no fim deste arquivo, não por opacidade do elemento. */
  --fam-veu-hero: 1;
  /* raio dos cards: canto reto, igual ao resto do site */
  --fam-raio-card: 0;
  /* sombra dos cards claros: a mesma que as páginas usam hoje */
  --fam-sombra-card: 0 18px 44px rgba(var(--tinta-rgb), .12);
  /* cor do rótulo pequeno em maiúsculas sobre fundo claro. Resolve no azul do mmr e no
     laranja do ibr, porque o --turquesa-deep já é a cor 01 de cada um no tokens.css. */
  --fam-eyebrow: var(--turquesa-deep);
  /* tipografia. KOBENHAVN, do Typekit do Silvio, que é a fonte licenciada e definitiva
     dos resorts. Poppins fica de fallback para o caso de o Typekit não responder. */
  --fam-fonte-titulo: kobenhavn, "Poppins", sans-serif;
  --fam-fonte-texto: kobenhavn, "Poppins", sans-serif;
}

/* ------------------------------------------------------------------ */
/* (c) URBANO: Maceió Mar Hotel (mmh), Acqua Suítes (aqs),             */
/*     Acqua Inn (aqi) e Acqua Prime (aqp). 24 páginas.                */
/* ------------------------------------------------------------------ */
html[data-hotel="mmh"],
html[data-hotel="aqs"],
html[data-hotel="aqi"],
html[data-hotel="aqp"] {
  /* fundo claro das seções: o do <body> e o das faixas claras entre blocos escuros */
  --fam-fundo-secao: var(--areia);
  /* fundo dos cards claros sobre o fundo de seção (apartamento, gastronomia, eventos) */
  --fam-papel: var(--papel);
  /* opacidade do véu do hero, 0 a 1. Os urbanos NÃO foram tocados nesta etapa. */
  --fam-veu-hero: 1;
  /* raio dos cards: canto reto, igual ao resto do site */
  --fam-raio-card: 0;
  /* sombra dos cards claros: a mesma que as páginas usam hoje */
  --fam-sombra-card: 0 18px 44px rgba(var(--tinta-rgb), .12);
  /* cor do rótulo pequeno em maiúsculas sobre fundo claro */
  --fam-eyebrow: var(--turquesa-deep);
  /* tipografia. Mesma da rede: NEUTRA TEXT, carregada pelos @font-face do topo. */
  --fam-fonte-titulo: "Neutraface Text", "Neutra Text", "Poppins", sans-serif;
  --fam-fonte-texto: "Neutraface Text", "Neutra Text", "Poppins", sans-serif;
}

/* ------------------------------------------------------------------ */
/* ÚNICA regra religada nesta etapa: o véu do hero dos RESORTS.        */
/* ------------------------------------------------------------------ */
/* Decisão do sócio em 16/09: "tirar um pouco o degradê para prevalecer a cor; o Ipioca
   ficou feio". O véu por hotel do tokens.css empilha três gradientes, e dois deles são da
   COR DO HOTEL sobre a foto inteira: o Ipioca saía laranja de ponta a ponta e o Maceió Mar
   Resort, azul. Aqui o véu passa a ser um só gradiente, de baixo para cima, em preto
   neutro: a foto volta a ter a cor dela, e a cor do hotel fica onde foi feita para estar,
   no eyebrow, nas pílulas e no botão.

   MEDIÇÃO (Playwright, servidor local 8470, .hero-in escondido para amostrar o fundo real,
   5 pontos por linha de texto, 5 quadros do vídeo do hero, pior ponto de todos). O quadro
   do vídeo é confirmado por requestVideoFrameCallback antes do print: sem isso a medida
   varia de execução para execução, e chegou a marcar 5,51 onde o valor estável é 4,94.

   1280x900        título antes -> depois      lead antes -> depois
   ibr             3,95 -> 5,30                4,40 -> 6,14
   mmr             4,26 -> 4,94                6,26 -> 8,24

   390x844         título antes -> depois      lead antes -> depois
   ibr             2,60 -> 4,77                3,74 -> 7,45
   mmr             5,59 -> 9,14                4,13 -> 7,65

   Repare que o título REPROVAVA antes em três dos quatro casos, e o lead em dois: o véu
   antigo era pesado, mas era pesado de COR, e cor clara escurece mal.

   A base do gradiente subiu de .55 para .80 porque .55 não chegava nos 4,5:1 exigidos
   (dava 2,52 no ibr em 1280x900), e a parada foi de 60% para 100% porque o título do hero
   fica a cerca de 39% da altura, ou seja ACIMA dos 60%: com a parada em 60% nem a base 1
   passava (4,19 no ibr). A base .72 também não bastou, ficou em 4,35 no ibr e 4,34 no mmr.
   Abaixo de 1120px a foto entrega céu quase branco atrás do título (rgb(239,244,240) no
   ibr a 390px) e a base precisa de .92 para passar. O corte de 1120px é o mesmo que o site
   já usa para encolher o h1 do hero. Mesmo com base mais alta, o resultado é mais leve do
   que hoje no meio da foto, porque some a camada de cor do hotel.

   O eyebrow do hero melhorou (ibr 1,73 -> 2,34 e mmr 2,86 -> 3,86 em 1280x900) mas segue
   abaixo de 4,5: a cor dele é decisão de tema por hotel, mora no tokens.css, e o tokens
   não foi tocado nesta rodada.

   O hero destas páginas tem só .hero-veil: os outros .veil do site (allin-foto, mesa-strip,
   rec-card, est-card, rede-card, chegada) ficam fora do hero e não foram tocados. */
html[data-hotel="ibr"] .hero .hero-veil,
html[data-hotel="mmr"] .hero .hero-veil {
  background: linear-gradient(0deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 100%);
}
@media (max-width: 1120px) {
  html[data-hotel="ibr"] .hero .hero-veil,
  html[data-hotel="mmr"] .hero .hero-veil {
    background: linear-gradient(0deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, 0) 100%);
  }
}

/* ------------------------------------------------------------------ */
/* AS REGRAS QUE RELIGAM O SITE NAS DUAS VARIÁVEIS DE FONTE.          */
/* ------------------------------------------------------------------ */
/* Por que escopado por família, e não um "body{font-family:var(--fam-fonte-texto)}" solto:
   é ESPECIFICIDADE, não estilo. O <style> embutido de cada página fixa Poppins em
   seletores mais fortes que o elemento nu, e este arquivo carrega depois mas não ganha
   por posição quando perde por peso. O inventário do que fixa Poppins hoje nas 49
   páginas, com o peso de cada um:

     body                                             (0,0,1)
     .btn                                             (0,1,0)
     .f-news input / .popup input / .capta input      (0,1,1)
     .campo input, .campo select, .campo textarea     (0,1,1)
     .opcao / .cur-refazer / .filtro                  (0,1,0)  são <button>
     .mapa-real-links a                               (0,1,1)  só nas 4 localizações urbanas
     .ph-seta                                         (0,1,0)  CSS morto, nenhuma página
                                                               tem elemento com essa classe

   Com o prefixo de família, "html[data-hotel=mmr] input" pesa (0,1,2) e passa por cima
   de ".f-news input" (0,1,1); "html[data-hotel=mmr] .btn" pesa (0,2,1) e passa por cima
   de ".btn" (0,1,0). Nenhum !important foi necessário.

   textarea e .mapa-real-links a não estavam no pedido e entraram porque são exatamente
   os dois casos em que um seletor mais forte fixava Poppins e escaparia da troca: sem
   eles, o formulário de contato e a lista do mapa das localizações ficariam numa fonte e
   o resto da página em outra. */

/* REDE: texto */
html:not([data-hotel]) body,
html:not([data-hotel]) .btn,
html:not([data-hotel]) input,
html:not([data-hotel]) select,
html:not([data-hotel]) textarea,
html:not([data-hotel]) button {
  font-family: var(--fam-fonte-texto);
}

/* REDE: título */
html:not([data-hotel]) h1,
html:not([data-hotel]) h2,
html:not([data-hotel]) h3,
html:not([data-hotel]) .hero h1,
html:not([data-hotel]) .sec-head h2 {
  font-family: var(--fam-fonte-titulo);
}

/* RESORT: texto */
html[data-hotel="mmr"] body,
html[data-hotel="mmr"] .btn,
html[data-hotel="mmr"] input,
html[data-hotel="mmr"] select,
html[data-hotel="mmr"] textarea,
html[data-hotel="mmr"] button,
html[data-hotel="ibr"] body,
html[data-hotel="ibr"] .btn,
html[data-hotel="ibr"] input,
html[data-hotel="ibr"] select,
html[data-hotel="ibr"] textarea,
html[data-hotel="ibr"] button {
  font-family: var(--fam-fonte-texto);
}

/* RESORT: título */
html[data-hotel="mmr"] h1,
html[data-hotel="mmr"] h2,
html[data-hotel="mmr"] h3,
html[data-hotel="mmr"] .hero h1,
html[data-hotel="mmr"] .sec-head h2,
html[data-hotel="ibr"] h1,
html[data-hotel="ibr"] h2,
html[data-hotel="ibr"] h3,
html[data-hotel="ibr"] .hero h1,
html[data-hotel="ibr"] .sec-head h2 {
  font-family: var(--fam-fonte-titulo);
}

/* URBANO: texto */
html[data-hotel="mmh"] body,
html[data-hotel="mmh"] .btn,
html[data-hotel="mmh"] input,
html[data-hotel="mmh"] select,
html[data-hotel="mmh"] textarea,
html[data-hotel="mmh"] button,
html[data-hotel="mmh"] .mapa-real-links a,
html[data-hotel="aqs"] body,
html[data-hotel="aqs"] .btn,
html[data-hotel="aqs"] input,
html[data-hotel="aqs"] select,
html[data-hotel="aqs"] textarea,
html[data-hotel="aqs"] button,
html[data-hotel="aqs"] .mapa-real-links a,
html[data-hotel="aqi"] body,
html[data-hotel="aqi"] .btn,
html[data-hotel="aqi"] input,
html[data-hotel="aqi"] select,
html[data-hotel="aqi"] textarea,
html[data-hotel="aqi"] button,
html[data-hotel="aqi"] .mapa-real-links a,
html[data-hotel="aqp"] body,
html[data-hotel="aqp"] .btn,
html[data-hotel="aqp"] input,
html[data-hotel="aqp"] select,
html[data-hotel="aqp"] textarea,
html[data-hotel="aqp"] button,
html[data-hotel="aqp"] .mapa-real-links a {
  font-family: var(--fam-fonte-texto);
}

/* URBANO: título */
html[data-hotel="mmh"] h1,
html[data-hotel="mmh"] h2,
html[data-hotel="mmh"] h3,
html[data-hotel="mmh"] .hero h1,
html[data-hotel="mmh"] .sec-head h2,
html[data-hotel="aqs"] h1,
html[data-hotel="aqs"] h2,
html[data-hotel="aqs"] h3,
html[data-hotel="aqs"] .hero h1,
html[data-hotel="aqs"] .sec-head h2,
html[data-hotel="aqi"] h1,
html[data-hotel="aqi"] h2,
html[data-hotel="aqi"] h3,
html[data-hotel="aqi"] .hero h1,
html[data-hotel="aqi"] .sec-head h2,
html[data-hotel="aqp"] h1,
html[data-hotel="aqp"] h2,
html[data-hotel="aqp"] h3,
html[data-hotel="aqp"] .hero h1,
html[data-hotel="aqp"] .sec-head h2 {
  font-family: var(--fam-fonte-titulo);
}

/* 24/09/2026, print do socio no celular (Ipioca): as tres pilulas do hero viravam tres barras de largura
   quase inteira, 119px de altura antes do titulo. Menores, cabem em duas linhas e voltam a ser etiqueta. */
@media (max-width:640px){
  .hero-pills{gap:6px;margin-bottom:16px}
  .hero-pills .pill{font-size:9.5px;letter-spacing:.16em;padding:6px 9px}
}

/* 24/09/2026, print do socio no celular (Ipioca, "O resort em numeros"): cinco numeros empilhados
   num por linha viravam uma coluna de ar. Em duas colunas, o bloco cabe numa tela e le como ficha. */
@media (max-width:640px){
  .num-row{display:grid;grid-template-columns:1fr 1fr;gap:20px 14px;align-items:start;text-align:left;margin-top:30px}
  .num-row span{display:flex;flex-direction:column;align-items:flex-start;gap:2px;line-height:1.3}
  .num-row b{font-size:24px;margin:0}
  .num-row .dia{display:none}
}

/* ==================== CELULAR, rodada de 24/09/2026 (INICIO) ====================
   Pedido do socio: "cuidado para nao tirar algo util, deixa de uma forma que se eu nao gostar a gente
   volta ao que era". Por isso tudo desta rodada vive entre estas duas marcas, so em telas de ate 640px,
   e nada e removido do HTML: apagar o bloco inteiro devolve o site exatamente ao que era.
   Home primeiro (vitrine de hoteis); tipografia e alvos de toque valem para todas as paginas. */
@media (max-width:640px){
  /* 1. tipografia: nada abaixo de 12px numa tela de 412 */
  /* !important de proposito: este bloco e opt-in e reversivel, e cada pagina traz regras inline mais
     especificas (.hero .eyebrow, .vb-ph .pill) que venceriam o tamanho minimo de leitura */
  body .eyebrow,body .sec-head .eyebrow,body .cabeca .eyebrow{font-size:12px!important}
  body .pill,body .hero-pills .pill,body .vb-ph .pill{font-size:12px!important}
  body figcaption,body .galeria-trilho figcaption{font-size:12px!important}
  body .b-bairro{font-size:12px!important}
  body .lz-card small,body .card-est small,body .acc-nome small,body .cartao small,body .b-nota{font-size:12px!important}
  body .amen2 span,body .chips span{font-size:12px!important}
  /* 2. alvos de toque: 40px de altura nos links de texto que o dedo mais procura */
  .porta-interna a,.galeria-todas,.vb-conhecer,.acc-mais a,.sem-acts a{display:inline-flex;align-items:center;min-height:40px}
  /* 3. vitrine de hoteis da home, compacta: o mesmo card, com menos ar; nada sai */
  .vh-b .vb-row{margin-bottom:22px}
  .vh-b .vb-ph{min-height:200px}
  .vh-b .vb-body{padding:22px 20px 20px}
  .vh-b .vb-body .logo-card{height:40px;margin-bottom:8px}
  .vh-b .vb-body h3{font-size:24px;margin-top:8px}
  .vh-b .vb-body .b-nota{margin-top:8px}
  .vh-b .vb-body p{margin-top:8px;font-size:14px;line-height:1.55}
  .vh-b .vb-body .amen2{margin-top:12px;gap:6px 14px}
  .vh-b .vb-body .amen2 span{white-space:normal}
  .vh-b .vb-foot{margin-top:16px;padding-top:14px;flex-wrap:wrap;gap:10px 14px}
  .vh-b .vb-foot .preco{flex:1 1 100%}
}
/* ==================== CELULAR, rodada de 24/09/2026 (FIM) ==================== */

/* 24/09/2026, pedido do socio, secao "Tres orlas" da home: numeros maiores com um icone cada, e o logo
   de cada hotel sob o losango da sua orla, no lugar da frase. */
.why .stats-row{align-items:center;gap:36px;font-size:16px}
.why .stats-row b{font-size:40px;margin-right:10px}
.why .stats-row .st-ic{width:28px;height:28px;flex:none;stroke:var(--dourado-claro);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-right:12px;vertical-align:middle}
.why .stats-row span{display:inline-flex;align-items:center}
.orla-svg .orla-logo image{transition:opacity .25s ease}
.orla-svg .orla-logo:hover image{opacity:.75}
@media (max-width:640px){
  .why .stats-row{gap:16px}
  .why .stats-row b{font-size:32px}
}

/* 24/09/2026: a costa em pe no celular (a orla-svg some abaixo de 640px, e o socio quis ver a orla) */
.orla-v{display:none}
@media (max-width:640px){
  .orla-v{display:block;list-style:none;margin:30px 0 0;padding:4px 0 4px 28px;border-left:2px solid rgba(255,255,255,.55)}
  .orla-v li{position:relative;padding:0 0 26px}
  .orla-v li:last-child{padding-bottom:0}
  .orla-v-dia{position:absolute;left:-35px;top:5px;width:11px;height:11px;background:var(--dourado-claro);transform:rotate(45deg)}
  .orla-v b{display:block;font-size:13px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:#fff;
    text-shadow:0 1px 8px rgba(var(--tinta-3-rgb),.9)}
  .orla-v-logos{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px}
  .orla-v-logos a{display:inline-flex;align-items:center;min-height:44px}
  .orla-v-logos img{height:48px;width:auto;filter:drop-shadow(0 2px 8px rgba(var(--tinta-3-rgb),.8))}
}

/* ==================== CELULAR, rodada 2 de 24/09/2026 (INICIO) ====================
   Mesma regra da rodada 1: tudo aqui vale so ate 640px e nada sai do HTML. Apagar o bloco inteiro
   devolve o site ao que era. Escrito a partir da medicao de tres agentes nas 49 paginas.

   1. CARDS DE ESTRUTURA E LAZER EM DUAS COLUNAS. Eram 10 cards de 340px empilhados (Maceio Mar
      Hotel: 4.130px numa secao so). O texto fica em overlay sobre a foto, entao em coluna estreita
      ele derramava: a descricao passa a duas linhas com reticencia e o veu sobe. Medido: MMH 4.130
      -> 1.976, Ipioca 2.873 -> 1.509, estrutura do Prime 3.883 -> 2.133, sem texto saindo do card.
   2. ACOMODACOES: a foto de cada categoria tinha 380px fixos e o video 180. Medido no Maceio Mar
      Resort: 8.554 -> 7.224.
   3. FONTES: nada abaixo de 12px (a rodada 1 cobriu os rotulos; aqui entram os `small` de card que
      cada pagina define com classe propria).
   4. ALVOS DE TOQUE: 40px nos links de "voltar", mapa, contato e pe de card. Link dentro de
      paragrafo NAO entra: esticar linha de texto corrida quebra a leitura. */
@media (max-width:640px){
  /* 1. UM CARD POR LINHA, com a foto mais baixa (24/09, correcao do socio: duas colunas espremiam o
     titulo em tres linhas e cortavam o texto; "so reduzir a visao da imagem para ficar agradavel").
     De 340 para 210px de altura: o titulo cabe numa linha, a descricao em duas com reticencia.
     Medido no Maceio Mar Hotel: a secao cai de 4.130 para 2.794px. */
  .est-grid,.lz-grid{grid-template-columns:1fr!important;gap:14px}
  .est-card,.lz-card{grid-column:span 1!important;height:210px}
  .est-card .corpo,.lz-card .corpo{padding:16px}
  .est-card h3,.lz-card h3{font-size:19px;line-height:1.15}
  .est-card .corpo p,.lz-card .corpo p{font-size:13.5px;line-height:1.45;margin-top:6px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .est-card .veil,.lz-card .veil{background:linear-gradient(transparent,rgba(6,22,28,.9) 46%)}
  /* RESORTS: card alto (24/09, correcao do socio: "o dos resorts poderiam ficar grandes, acho que
     encurtou as partes bonitas, da estrutura que e o maior destaque deles"). Ipioca e Maceio Mar
     Resort voltam aos 340px originais, com a descricao em tres linhas; os quatro urbanos seguem em
     210px. Uma linha por card continua valendo na rede inteira. */
  html[data-hotel="ibr"] .est-card,html[data-hotel="ibr"] .lz-card,
  html[data-hotel="mmr"] .est-card,html[data-hotel="mmr"] .lz-card{height:340px}
  html[data-hotel="ibr"] .est-card .corpo p,html[data-hotel="ibr"] .lz-card .corpo p,
  html[data-hotel="mmr"] .est-card .corpo p,html[data-hotel="mmr"] .lz-card .corpo p{-webkit-line-clamp:3}
  html[data-hotel="ibr"] .est-card .veil,html[data-hotel="ibr"] .lz-card .veil,
  html[data-hotel="mmr"] .est-card .veil,html[data-hotel="mmr"] .lz-card .veil{background:linear-gradient(transparent,rgba(6,22,28,.88) 62%)}
  /* 2 */
  .cat-foto{height:240px;min-height:0}
  .cat-vid{height:130px}
  /* 3: `body` na frente para vencer as regras inline de cada pagina */
  body .rec-card .corpo small,body .est-card .corpo small,body .lz-card .corpo small,
  body .pt-card .pt-corpo small,body .ponto-corpo small,body .rede-card .rede-body small,
  body .casa-card .casa-corpo small,body .porta-card .corpo small,body .qv3-card .corpo small,
  body .cat-painel .cat-num,body .c-linhas a small,body .acc-switch small,body .qv2-in small,
  body .benef-card span,body .scroll-cue small,body .crumbs a,body .hero-v3-chip,
  body .migalha-pe .migalha b,body .migalha-pe .migalha a{font-size:12px!important}
  /* 4 */
  .volta a,.mapa-real .mapa-real-links a,.c-linhas a,.canais a,
  .h-card .h-foot,.of-card .of-foot,.post-foot .seta,.d-body .ler{min-height:40px;display:inline-flex;align-items:center}
  /* o fechamento deste @media estava AQUI, e as seis regras de acomodacoes abaixo
     ficavam fora dele, valendo em qualquer largura: no desktop a linha fechada do
     acordeao quebrava em tres linhas. O fechamento passou para depois delas (24/09, rodada 3). */
  /* 5. ACOMODACOES: a miniatura do quarto volta na linha fechada do acordeao (24/09, pedido do socio).
     Ela ja existia (`.acc-thumb`, 110x74 no desktop) e era escondida abaixo de 640px; aqui volta a
     72x54 como primeira coluna, e vale para as seis homes de hotel, que usam a mesma classe. */
  .acc-thumb{display:block!important;width:72px;height:54px}
  .acc-head{grid-template-columns:72px minmax(0,1fr) 40px;gap:10px 12px}
  .acc-thumb{grid-column:1;grid-row:1 / span 2;align-self:center}
  .acc-nome{grid-column:2;grid-row:1}
  .acc-head .acc-m2{grid-column:2;grid-row:2}
  .acc-mais{grid-column:3;grid-row:1 / span 2}
/* ==================== CELULAR, rodada 2 de 24/09/2026 (FIM) ==================== */
}