/* ==========================================================================
   Capitão Beach — sistema de design
   Carregado por último: vence bootstrap e o tema antigo.
   Convenção: classes próprias usam prefixo .cb-
   ========================================================================== */

:root {
   /* --- cor ------------------------------------------------------------ */
   --agua: #38b0e5;
   /* marca, preservada */
   --agua-escura: #1b7fa8;
   /* mesma marca com contraste AA sobre branco */
   --agua-clara: #d6eefa;
   --profundo: #072a3a;
   /* azul-rio profundo: base escura */
   --profundo-2: #0d3d52;
   --tinta: #0e2430;
   --tinta-suave: #4a6572;
   --espuma: #f2f8fb;
   /* superfície clara, fria (não creme) */
   --branco: #ffffff;
   --linha: #dce7ed;
   --areia: #f2b441;
   /* promoção / desconto */
   --coral: #dc4b3e;
   /* indisponível / erro */
   --verde: #1f9d6b;
   /* confirmado / disponível */

   /* --- tipografia ----------------------------------------------------- */
   --fonte-titulo: 'Fraunces', Georgia, serif;
   --fonte-texto: 'Public Sans', system-ui, -apple-system, sans-serif;
   --fonte-dado: 'IBM Plex Mono', ui-monospace, monospace;

   /* escala de tipo */
   --t-xs: 0.75rem;
   --t-sm: 0.875rem;
   --t-base: 1rem;
   --t-md: 1.125rem;
   --t-lg: 1.375rem;
   --t-xl: 1.875rem;
   --t-2xl: 2.5rem;
   --t-3xl: 3.5rem;

   /* --- espaço, forma, profundidade ------------------------------------ */
   --e-1: 0.25rem;
   --e-2: 0.5rem;
   --e-3: 0.75rem;
   --e-4: 1rem;
   --e-5: 1.5rem;
   --e-6: 2rem;
   --e-7: 3rem;
   --e-8: 4.5rem;

   --raio: 4px;
   --raio-g: 10px;

   --sombra-1: 0 1px 2px rgba(7, 42, 58, .06), 0 2px 8px rgba(7, 42, 58, .06);
   --sombra-2: 0 2px 4px rgba(7, 42, 58, .06), 0 12px 28px rgba(7, 42, 58, .1);

   --largura: 1180px;
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
   box-sizing: border-box;
}

body {
   margin: 0;
   background: var(--branco);
   color: var(--tinta);
   font-family: var(--fonte-texto);
   font-size: var(--t-base);
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
}

img {
   max-width: 100%;
   height: auto;
   display: block;
}

a {
   color: var(--agua-escura);
   text-decoration: none;
}

a:hover {
   color: var(--profundo);
   text-decoration: underline;
}

/* foco visível e consistente — requisito de acessibilidade */
:focus-visible {
   outline: 3px solid var(--agua);
   outline-offset: 2px;
   border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {

   *,
   *::before,
   *::after {
      animation-duration: .01ms !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
   }
}

/* ==========================================================================
   Tipografia
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
.cb-titulo {
   font-family: var(--fonte-titulo);
   font-weight: 600;
   font-variation-settings: 'SOFT' 30, 'WONK' 1;
   color: var(--profundo);
   line-height: 1.15;
   letter-spacing: -0.015em;
   margin: 0 0 var(--e-3);
}

h1 {
   font-size: var(--t-3xl);
}

h2 {
   font-size: var(--t-2xl);
}

h3 {
   font-size: var(--t-xl);
}

h4 {
   font-size: var(--t-lg);
}

h5,
h6 {
   font-size: var(--t-md);
}

p {
   margin: 0 0 var(--e-4);
}

/* rótulo estrutural: diz de que seção se trata, em voz de sinalização */
.cb-eyebrow {
   font-family: var(--fonte-dado);
   font-size: var(--t-xs);
   font-weight: 500;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--agua-escura);
   display: block;
   margin-bottom: var(--e-2);
}

/* números que precisam alinhar em coluna: preço, data, diárias */
.cb-dado {
   font-family: var(--fonte-dado);
   font-variant-numeric: tabular-nums;
   font-feature-settings: 'tnum';
}

.cb-preco {
   font-family: var(--fonte-dado);
   font-variant-numeric: tabular-nums;
   font-size: var(--t-lg);
   font-weight: 600;
   color: var(--profundo);
   letter-spacing: -0.02em;
}

.cb-preco small {
   font-size: var(--t-xs);
   font-weight: 400;
   color: var(--tinta-suave);
   letter-spacing: 0;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.cb-wrap {
   width: 100%;
   max-width: var(--largura);
   margin-inline: auto;
   padding-inline: var(--e-5);
}

.cb-secao {
   padding-block: var(--e-8);
}

.cb-secao--espuma {
   background: var(--espuma);
}

.cb-secao--profunda {
   background: var(--profundo);
   color: var(--espuma);
}

.cb-secao--profunda h1,
.cb-secao--profunda h2,
.cb-secao--profunda h3,
.cb-secao--profunda h4 {
   color: var(--branco);
}

/* style.css pinta todo <p> de #171818; nos fundos escuros o texto herda a cor clara */
.cb-secao--profunda p,
.cb-heroi p,
.cb-rodape p {
   color: inherit;
}

.cb-secao--profunda .cb-eyebrow {
   color: var(--agua);
}

.cb-secao__cabeca {
   max-width: 46rem;
   margin-bottom: var(--e-6);
}

/* grade de cards reutilizável */
.cb-grade {
   display: grid;
   gap: var(--e-5);
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* ==========================================================================
   Botões
   ========================================================================== */

.cb-btn,
.btn-style-two,
.btn-style-three {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--e-2);
   font-family: var(--fonte-texto);
   font-size: var(--t-sm);
   font-weight: 600;
   letter-spacing: .01em;
   line-height: 1;
   padding: 0.875rem 1.5rem;
   border: 1px solid transparent;
   border-radius: var(--raio);
   cursor: pointer;
   text-decoration: none;
   transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.cb-btn:hover,
.btn-style-two:hover,
.btn-style-three:hover {
   text-decoration: none;
}

/* primário: ação que avança a reserva */
.cb-btn--primario,
.btn-style-three {
   background: var(--agua-escura);
   color: var(--branco);
}

.cb-btn--primario:hover,
.btn-style-three:hover {
   background: var(--profundo);
   color: var(--branco);
}

/* secundário: navegação e ações de apoio */
.cb-btn--secundario,
.btn-style-two {
   background: transparent;
   color: var(--agua-escura);
   border-color: var(--linha);
}

.cb-btn--secundario:hover,
.btn-style-two:hover {
   background: var(--espuma);
   border-color: var(--agua);
   color: var(--profundo);
}

.cb-btn--bloco {
   width: 100%;
}

.cb-btn:disabled,
.cb-btn.disabled,
.btn-style-three:disabled,
.btn-style-three.disabled {
   background: var(--linha);
   color: var(--tinta-suave);
   cursor: not-allowed;
   pointer-events: none;
}

/* estado indisponível — não é botão, é informação */
.btn-style-error,
.cb-indisponivel {
   display: inline-flex;
   align-items: center;
   gap: var(--e-2);
   padding: 0.875rem 1.5rem;
   font-size: var(--t-sm);
   font-weight: 600;
   border-radius: var(--raio);
   background: #fdeceb;
   color: var(--coral);
   border: 1px solid #f7d4d1;
}

/* ==========================================================================
   Navegação
   ========================================================================== */

.cb-nav {
   background: var(--branco);
   border-bottom: 1px solid var(--linha);
   position: sticky;
   top: 0;
   z-index: 1030;
}

.cb-nav__inner {
   display: flex;
   align-items: center;
   gap: var(--e-5);
   min-height: 76px;
}

.cb-nav__logo img {
   max-height: 46px;
   width: auto;
}

.cb-nav__links {
   display: flex;
   align-items: center;
   gap: var(--e-5);
   list-style: none;
   margin: 0 auto 0 var(--e-6);
   padding: 0;
}

.cb-nav__links a {
   color: var(--tinta);
   font-size: var(--t-sm);
   font-weight: 500;
   padding-block: var(--e-2);
   border-bottom: 2px solid transparent;
}

.cb-nav__links a:hover {
   color: var(--agua-escura);
   text-decoration: none;
   border-bottom-color: var(--agua);
}

.cb-nav__links a.is-ativo {
   color: var(--profundo);
   border-bottom-color: var(--agua);
}

/* contador do carrinho: número em mono, sempre legível */
.cb-carrinho-btn {
   display: inline-flex;
   align-items: center;
   gap: var(--e-2);
   white-space: nowrap;
}

.cb-carrinho-btn .total-count {
   font-family: var(--fonte-dado);
   font-variant-numeric: tabular-nums;
   font-size: var(--t-xs);
   font-weight: 600;
   min-width: 1.5rem;
   height: 1.5rem;
   padding-inline: .35rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: var(--agua);
   color: var(--branco);
   border-radius: 999px;
}

.cb-nav__toggle {
   display: none;
   background: none;
   border: 1px solid var(--linha);
   border-radius: var(--raio);
   padding: var(--e-2) var(--e-3);
   color: var(--tinta);
   cursor: pointer;
}

/* ==========================================================================
   Herói — o almanaque
   O calendário de preços é o elemento assinatura: a decisão real do cliente
   é "que datas", e o preço por noite já existe no sistema.
   ========================================================================== */

/* split assimétrico: painel escuro à esquerda, foto sangrando à direita */
.cb-heroi {
   background: var(--profundo);
   color: var(--espuma);
   position: relative;
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   align-items: stretch;
   min-height: 620px;
}

.cb-heroi__conteudo {
   /* alinha o texto à mesma coluna do resto do site, mas sem centralizar o bloco */
   padding: var(--e-8) var(--e-6) var(--e-8) max(var(--e-5), calc((100vw - var(--largura)) / 2 + var(--e-5)));
   display: flex;
   flex-direction: column;
   justify-content: center;
   position: relative;
   z-index: 2;
}

.cb-heroi__foto {
   position: relative;
   overflow: hidden;
}

.cb-heroi__foto img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

/* costura entre o painel e a foto, para o corte não ficar duro */
.cb-heroi__foto::before {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(90deg, var(--profundo) 0%, rgba(7, 42, 58, .35) 22%, transparent 55%);
   z-index: 1;
}

/* o painel de datas atravessa a divisa entre painel e foto */
.cb-painel--sobreposto {
   position: relative;
   z-index: 3;
   margin-right: calc(var(--e-8) * -1);
   margin-top: var(--e-5);
}

.cb-heroi h1 {
   color: var(--branco);
   margin-bottom: var(--e-4);
   max-width: 15ch;
}

.cb-heroi__texto {
   font-size: var(--t-md);
   color: #b9d3e0;
   max-width: 42ch;
   margin-bottom: var(--e-6);
}

.cb-heroi__acoes {
   display: flex;
   flex-wrap: wrap;
   gap: var(--e-3);
}

.cb-heroi .cb-btn--secundario {
   color: var(--branco);
   border-color: rgba(255, 255, 255, .35);
}

.cb-heroi .cb-btn--secundario:hover {
   background: rgba(255, 255, 255, .1);
   border-color: var(--agua);
   color: var(--branco);
}

/* painel que abriga o seletor de datas */
.cb-painel {
   background: var(--branco);
   border-radius: var(--raio-g);
   box-shadow: var(--sombra-2);
   padding: var(--e-5);
   color: var(--tinta);
}

.cb-painel__titulo {
   font-family: var(--fonte-dado);
   font-size: var(--t-xs);
   letter-spacing: .16em;
   text-transform: uppercase;
   color: var(--tinta-suave);
   margin-bottom: var(--e-3);
}

/* ==========================================================================
   Formulários
   ========================================================================== */

.cb-campo {
   margin-bottom: var(--e-4);
}

.cb-campo label,
.cb-rotulo {
   display: block;
   font-size: var(--t-sm);
   font-weight: 600;
   color: var(--tinta);
   margin-bottom: var(--e-2);
}

.form-control,
.form-select,
.cb-input {
   width: 100%;
   font-family: var(--fonte-texto);
   font-size: var(--t-base);
   color: var(--tinta);
   background: var(--branco);
   border: 1px solid var(--linha);
   border-radius: var(--raio);
   padding: 0.75rem 0.875rem;
   transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control:focus,
.form-select:focus,
.cb-input:focus {
   border-color: var(--agua);
   box-shadow: 0 0 0 3px var(--agua-clara);
   outline: none;
}

.form-control::placeholder {
   color: #90a7b3;
}

/* campos de data: números em mono para alinhar */
#datepicker,
#datainicio,
#datafinal,
#datainicial,
.check-in-out {
   font-family: var(--fonte-dado);
   font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Cards
   ========================================================================== */

.cb-card {
   background: var(--branco);
   border: 1px solid var(--linha);
   border-radius: var(--raio-g);
   overflow: hidden;
   display: flex;
   flex-direction: column;
   transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.cb-card:hover {
   box-shadow: var(--sombra-2);
   border-color: var(--agua-clara);
   transform: translateY(-2px);
}

.cb-card__midia {
   aspect-ratio: 4 / 3;
   background: var(--espuma);
   overflow: hidden;
}

.cb-card__midia img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.cb-card__corpo {
   padding: var(--e-4);
   display: flex;
   flex-direction: column;
   gap: var(--e-2);
   flex: 1;
}

.cb-card__titulo {
   font-family: var(--fonte-titulo);
   font-size: var(--t-lg);
   font-weight: 600;
   color: var(--profundo);
   margin: 0;
}

.cb-card__meta {
   font-family: var(--fonte-dado);
   font-size: var(--t-xs);
   color: var(--tinta-suave);
   letter-spacing: .04em;
}

.cb-card__rodape {
   margin-top: auto;
   padding-top: var(--e-3);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--e-3);
   border-top: 1px solid var(--linha);
}

/* selo de pacote / promoção */
.cb-selo {
   display: inline-flex;
   align-items: center;
   gap: var(--e-1);
   font-family: var(--fonte-dado);
   font-size: var(--t-xs);
   font-weight: 500;
   letter-spacing: .08em;
   text-transform: uppercase;
   padding: 0.25rem 0.5rem;
   border-radius: var(--raio);
   background: #fdf3dd;
   color: #8a5d00;
   border: 1px solid #f5e2b6;
}

.cb-selo--indisponivel {
   background: #fdeceb;
   color: var(--coral);
   border-color: #f7d4d1;
}

/* mantém o selo antigo do carrinho legível */
.badge.bg-info {
   background: #fdf3dd !important;
   color: #8a5d00 !important;
   border: 1px solid #f5e2b6;
   font-family: var(--fonte-dado);
   font-weight: 500;
   letter-spacing: .06em;
   text-transform: uppercase;
}

/* ==========================================================================
   Calendário — preço por noite (elemento assinatura)
   ========================================================================== */

.day-price {
   display: block;
   font-family: var(--fonte-dado);
   font-variant-numeric: tabular-nums;
   font-size: 10px;
   line-height: 1.1;
   font-weight: 500;
   color: var(--agua-escura);
   margin-top: 1px;
}

.start .day-price,
.end .day-price {
   color: var(--branco);
}

/* dia com desconto: a areia sinaliza oportunidade */
.day-price--promo {
   color: #8a5d00;
}

/* ==========================================================================
   Tabelas — carrinho e resumo de reserva
   ========================================================================== */

.table {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: var(--e-5);
}

.table thead td,
.table thead th {
   font-family: var(--fonte-dado);
   font-size: var(--t-xs);
   font-weight: 600;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--tinta-suave);
   border-bottom: 2px solid var(--linha);
   padding: var(--e-3);
   text-align: left;
}

.table tbody td {
   padding: var(--e-4) var(--e-3);
   border-bottom: 1px solid var(--linha);
   vertical-align: middle;
}

.table tbody tr:hover {
   background: var(--espuma);
}

/* valores e datas alinham em coluna */
.table td:nth-child(2),
.table td:nth-child(3),
.table td:nth-child(4) {
   font-family: var(--fonte-dado);
   font-variant-numeric: tabular-nums;
   font-size: var(--t-sm);
}

.total-carrinho,
.total-cart {
   font-family: var(--fonte-dado);
   font-variant-numeric: tabular-nums;
   font-size: var(--t-xl);
   font-weight: 600;
   color: var(--profundo);
}

/* ==========================================================================
   Rodapé
   ========================================================================== */

.cb-rodape {
   background: var(--profundo);
   color: #b9d3e0;
   padding-block: var(--e-7) var(--e-5);
}

.cb-rodape h5 {
   color: var(--branco);
   font-size: var(--t-md);
   margin-bottom: var(--e-3);
}

.cb-rodape a {
   color: var(--espuma);
}

.cb-rodape a:hover {
   color: var(--agua);
}

.cb-rodape__grade {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: var(--e-6);
}

.cb-social {
   display: flex;
   gap: var(--e-3);
   list-style: none;
   padding: 0;
   margin: 0 0 var(--e-3);
}

.cb-social a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   border: 1px solid rgba(255, 255, 255, .2);
   border-radius: 50%;
   color: var(--espuma);
}

.cb-social a:hover {
   background: var(--agua);
   border-color: var(--agua);
   color: var(--profundo);
}

.cb-rodape__base {
   margin-top: var(--e-6);
   padding-top: var(--e-4);
   border-top: 1px solid rgba(255, 255, 255, .12);
   display: flex;
   flex-wrap: wrap;
   gap: var(--e-4);
   align-items: center;
   font-size: var(--t-sm);
}

.cb-rodape__base ul {
   display: flex;
   flex-wrap: wrap;
   gap: var(--e-4);
   list-style: none;
   margin: 0;
   padding: 0;
}

/* ==========================================================================
   WhatsApp flutuante
   ========================================================================== */

.cb-whats {
   position: fixed;
   right: 24px;
   bottom: 24px;
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: #25d366;
   color: var(--branco);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 28px;
   box-shadow: var(--sombra-2);
   z-index: 1040;
}

.cb-whats:hover {
   color: var(--branco);
   transform: scale(1.05);
}

/* ==========================================================================
   Estado vazio
   ========================================================================== */

.cb-vazio {
   text-align: center;
   padding: var(--e-7) var(--e-5);
   background: var(--espuma);
   border: 1px dashed var(--linha);
   border-radius: var(--raio-g);
}

.cb-vazio p {
   color: var(--tinta-suave);
   max-width: 44ch;
   margin-inline: auto;
}

/* ==========================================================================
   Faixa de recursos — compacta, horizontal, sem virar cinco cards grandes
   ========================================================================== */

.cb-tira {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
   border: 1px solid var(--linha);
   border-radius: var(--raio-g);
   overflow: hidden;
   background: var(--branco);
}

.cb-tira__item {
   padding: var(--e-5) var(--e-4);
   border-right: 1px solid var(--linha);
   display: flex;
   flex-direction: column;
   gap: var(--e-2);
   text-decoration: none;
   color: inherit;
   transition: background-color .18s ease;
}

.cb-tira__item:last-child {
   border-right: 0;
}

.cb-tira__item:hover {
   background: var(--espuma);
   text-decoration: none;
   color: inherit;
}

.cb-tira__item img {
   width: 34px;
   height: 34px;
}

.cb-tira__item strong {
   font-family: var(--fonte-titulo);
   font-size: var(--t-md);
   font-weight: 600;
   color: var(--profundo);
}

.cb-tira__item span {
   font-size: var(--t-sm);
   color: var(--tinta-suave);
   line-height: 1.45;
}

/* ==========================================================================
   Números do lugar — dados, não adjetivos
   ========================================================================== */

.cb-numeros {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   gap: var(--e-5);
   margin-top: var(--e-6);
}

.cb-numeros dt {
   font-family: var(--fonte-dado);
   font-variant-numeric: tabular-nums;
   font-size: var(--t-2xl);
   font-weight: 600;
   line-height: 1;
   color: var(--agua);
   letter-spacing: -0.03em;
}

.cb-numeros dd {
   margin: var(--e-2) 0 0;
   font-size: var(--t-sm);
   color: var(--tinta-suave);
   max-width: 20ch;
}

.cb-secao--profunda .cb-numeros dd {
   color: #9fbecd;
}

/* ==========================================================================
   Preço no card de acomodação
   ========================================================================== */

.cb-card__preco {
   display: flex;
   align-items: baseline;
   gap: var(--e-1);
}

.cb-card__preco b {
   font-family: var(--fonte-dado);
   font-variant-numeric: tabular-nums;
   font-size: var(--t-lg);
   font-weight: 600;
   color: var(--profundo);
   letter-spacing: -0.02em;
}

.cb-card__preco span {
   font-size: var(--t-xs);
   color: var(--tinta-suave);
}

/* ==========================================================================
   Barra de busca por datas
   ========================================================================== */

.cb-barra-busca {
   background: var(--profundo);
   padding-block: var(--e-5);
}

.cb-barra-busca .cb-rotulo {
   color: var(--agua);
   font-family: var(--fonte-dado);
   font-size: var(--t-xs);
   letter-spacing: .14em;
   text-transform: uppercase;
}

/* ==========================================================================
   Listagem editorial de acomodações — linha horizontal, não card em grade
   ========================================================================== */

.cb-listagem {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: var(--e-6);
   align-items: center;
   padding-block: var(--e-6);
   border-bottom: 1px solid var(--linha);
}

.cb-listagem:last-child {
   border-bottom: 0;
}

.cb-listagem__midia {
   border-radius: var(--raio-g);
   overflow: hidden;
   background: var(--espuma);
}

.cb-listagem__midia img {
   width: 100%;
   aspect-ratio: 3 / 2;
   object-fit: cover;
}

.cb-listagem__info h2 {
   margin-bottom: var(--e-2);
}

.cb-listagem__acao {
   margin-top: var(--e-5);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: var(--e-4);
   padding-top: var(--e-4);
   border-top: 1px solid var(--linha);
}

.cb-preco-antigo {
   font-size: var(--t-sm);
   color: var(--tinta-suave);
   text-decoration: line-through;
   margin-right: var(--e-1);
}

/* comodidades como etiquetas, não como grade de ícones soltos */
.cb-comodidades {
   display: flex;
   flex-wrap: wrap;
   gap: var(--e-2);
   list-style: none;
   padding: 0;
   margin: var(--e-4) 0 0;
}

.cb-comodidades li {
   display: inline-flex;
   align-items: center;
   gap: var(--e-2);
   padding: 0.35rem 0.7rem;
   border: 1px solid var(--linha);
   border-radius: 999px;
   background: var(--espuma);
   font-size: var(--t-xs);
   color: var(--tinta-suave);
}

.cb-comodidades img {
   width: 16px;
   height: 16px;
   opacity: .75;
}

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 991px) {
   :root {
      --t-3xl: 2.5rem;
      --t-2xl: 2rem;
      --e-8: 3rem;
   }

   /* herói empilha: foto primeiro, conteúdo embaixo */
   .cb-heroi {
      grid-template-columns: 1fr;
      min-height: 0;
   }

   .cb-heroi__foto {
      order: -1;
      height: 260px;
   }

   .cb-heroi__foto::before {
      background: linear-gradient(180deg, rgba(7, 42, 58, .15) 0%, var(--profundo) 100%);
   }

   .cb-heroi__conteudo {
      padding: var(--e-6) var(--e-5) var(--e-7);
   }

   .cb-painel--sobreposto {
      margin-right: 0;
   }

   .cb-tira__item {
      border-right: 0;
      border-bottom: 1px solid var(--linha);
   }

   .cb-listagem {
      grid-template-columns: 1fr;
      gap: var(--e-4);
   }

   .cb-so-desktop {
      display: none;
   }

   .cb-nav__links {
      display: none;
   }

   .cb-nav__toggle {
      display: inline-flex;
   }

   .cb-nav__inner {
      justify-content: space-between;
      gap: var(--e-3);
   }
}

@media (max-width: 575px) {
   :root {
      --t-3xl: 2rem;
      --e-8: 2.5rem;
   }

   .cb-wrap {
      padding-inline: var(--e-4);
   }

   .cb-grade {
      grid-template-columns: 1fr;
   }

   /* tabela do carrinho rola dentro de si, a página nunca rola na horizontal */
   .table-responsive-cb {
      overflow-x: auto;
   }
}