/* RAEGO — catálogo digital (dentro da página Produtos), com páginas que viram como um livro.
   Visual inspirado no catálogo impresso RAEGO + DANFLOR. Tudo dentro da página é medido em --u
   (1% da largura da página): fica igual em qualquer tela e também no PDF/impressão. */

/* ---------- Seção na página Produtos ---------- */
.catalog-sec .section-head {
  margin-bottom: clamp(20px, 3vw, 32px);
}
.catalog-sec__hint {
  margin: 14px 16px 0;
  text-align: center;
  font-size: var(--t-xs);
  color: var(--muted);
}
.catalog-sec__hint .on-touch,
.catalog-sec__hint .on-mouse {
  display: none;
}
@media (hover: none) {
  .catalog-sec__hint .on-touch {
    display: inline;
  }
}
@media (hover: hover) {
  .catalog-sec__hint .on-mouse {
    display: inline;
  }
}
/* No celular, enquanto o catálogo está na tela, o botão flutuante do WhatsApp sai (cobriria a barra) */
@media (max-width: 760px) {
  body.flip-in-view .wa-float {
    display: none;
  }
}

/* ---------- Livro ---------- */
.flip {
  --pw: min(560px, calc(100vw - 32px));
  --bh: calc(var(--pw) * 1.4142);
  --bw: var(--pw);
  --r: 6px;
  position: relative;
}
.flip__stage {
  display: flex;
  justify-content: center;
  padding: 4px 0;
  overflow-x: hidden;
  overflow-x: clip;
}
.flip__book {
  position: relative;
  /* iOS: sem o clarão azul ao tocar na página nem o menu de imagem ao segurar */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  display: grid;
  justify-items: center;
  gap: 24px;
}

/* Sem JavaScript: páginas uma embaixo da outra */
.cp {
  --u: calc(var(--pw) / 100);
  position: relative;
  width: var(--pw);
  height: var(--bh);
  overflow: hidden;
  background: #fff;
  color: var(--fg);
  font-family: var(--font-body);
  font-size: calc(var(--u) * 2.7);
  line-height: 1.4;
  border-radius: var(--r);
  box-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.6);
  text-align: left;
}

/* Antes de montar o livro (o visitante ainda não chegou ao catálogo): só a capa ocupa espaço */
.flip.is-pending:not(.is-ready) .flip__book {
  height: var(--bh);
  overflow: hidden;
}
/* Antes de montar o livro só a capa aparece: as outras 19 páginas ficam fora do layout
   (calcular todas deixava a página Produtos lenta para abrir, principalmente no celular) */
.flip.is-pending:not(.is-ready) .flip__book > .cp ~ .cp {
  display: none;
}

/* Com JavaScript: folhas que giram em 3D */
.flip.is-ready .flip__book {
  display: block;
  width: var(--bw);
  height: var(--bh);
  transform: translateX(var(--shift, 0px));
  transition: transform 0.7s var(--ease);
  perspective: calc(var(--pw) * 5);
}
.flip.is-ready .flip__book::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--shL, 0px);
  width: var(--shW, 100%);
  border-radius: var(--r);
  box-shadow:
    0 30px 70px -24px rgb(0 0 0 / 0.75),
    0 2px 0 rgb(255 255 255 / 0.04);
  transition:
    left 0.7s var(--ease),
    width 0.7s var(--ease);
  pointer-events: none;
}
.leaf {
  position: absolute;
  top: 0;
  left: var(--leafL, 50%);
  width: var(--pw);
  height: var(--bh);
  transform-origin: 0 50%;
  transform-style: preserve-3d;
}
.leaf__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fff;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.leaf__face--back {
  transform: rotateY(180deg);
}
/* Safari/WebKit só esconde o verso da frente se ela tiver transformação própria */
.leaf__face--front {
  transform: rotateY(0deg);
}
.flip.is-ready .cp {
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
}
.is-spread .leaf__face--front {
  border-radius: 0 var(--r) var(--r) 0;
}
.is-spread .leaf__face--back {
  border-radius: var(--r) 0 0 var(--r);
}
.is-single .leaf__face {
  border-radius: var(--r);
}
/* Verso em branco no modo de uma página (celular) */
.leaf__face--blank {
  background: linear-gradient(90deg, #f3f6f7, #fff 40%);
}
/* Dobra do livro: sombra perto da lombada */
.is-spread .leaf__face--front::after,
.is-spread .leaf__face--back::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9%;
  pointer-events: none;
}
.is-spread .leaf__face--front::after {
  left: 0;
  background: linear-gradient(90deg, rgb(6 48 63 / 0.16), transparent);
}
.is-spread .leaf__face--back::after {
  right: 0;
  background: linear-gradient(270deg, rgb(6 48 63 / 0.16), transparent);
}
/* Sombra que acompanha a página enquanto ela vira */
.leaf__shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.leaf__face--front .leaf__shade {
  background: linear-gradient(270deg, rgb(6 48 63 / 0.5), rgb(6 48 63 / 0.12) 45%, rgb(255 255 255 / 0.18) 80%);
}
.leaf__face--back .leaf__shade {
  background: linear-gradient(90deg, rgb(6 48 63 / 0.5), rgb(6 48 63 / 0.12) 45%, rgb(255 255 255 / 0.18) 80%);
}
.flip.is-ready .flip__book {
  touch-action: pan-y pinch-zoom;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.flip.is-dragging .flip__book {
  cursor: grabbing;
}
.flip.is-ready .cp a,
.flip.is-ready .cp button {
  cursor: pointer;
}

/* Setas laterais (computador) */
.flip__side {
  display: none;
}
.flip.is-spread .flip__side {
  position: absolute;
  top: calc(var(--bh) / 2 + 4px);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 0.25);
  background: rgb(255 255 255 / 0.1);
  color: #fff;
  transform: translateY(-50%);
  transition:
    background-color 0.2s,
    opacity 0.2s,
    transform 0.3s var(--ease);
}
.flip__side .ic {
  width: 26px;
  height: 26px;
}
.flip__side--prev {
  left: max(16px, calc(50% - var(--pw) - 86px));
}
.flip__side--next {
  right: max(16px, calc(50% - var(--pw) - 86px));
}
.flip__side:disabled,
.flipbar__btn:disabled {
  opacity: 0.3;
  cursor: default;
}
@media (hover: hover) {
  .flip__side:not(:disabled):hover {
    background: rgb(255 255 255 / 0.2);
  }
  .flip__side--prev:not(:disabled):hover {
    transform: translate(-3px, -50%);
  }
  .flip__side--next:not(:disabled):hover {
    transform: translate(3px, -50%);
  }
}

/* ---------- Barra de controles ---------- */
.flipbar {
  position: sticky;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  max-width: calc(100% - 24px);
  margin: 18px auto 0;
  padding: 6px;
  border-radius: 999px;
  background: #fff;
  color: var(--deep);
  box-shadow: 0 16px 40px -12px rgb(0 0 0 / 0.55);
}
.flipbar__btn {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 0.2s;
}
.flipbar__btn--txt {
  display: inline-flex;
  gap: 8px;
  width: auto;
  padding: 0 16px;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
}
.flipbar__btn .ic {
  width: 20px;
  height: 20px;
}
@media (hover: hover) {
  .flipbar__btn:not(:disabled):hover {
    background: var(--surface-2);
  }
}
.flipbar__btn:not(:disabled):active {
  background: var(--surface-3);
}
.flipbar__go select {
  -webkit-appearance: none;
  appearance: none;
  max-width: min(46vw, 260px);
  height: 42px;
  padding: 0 34px 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2306303f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  color: var(--deep);
  font: 600 0.8125rem/1 var(--font-ui);
  text-overflow: ellipsis;
  cursor: pointer;
}
.flipbar__count {
  min-width: 5.2em;
  font: 600 0.8125rem/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--muted);
}
.flipbar__sep {
  width: 1px;
  height: 24px;
  margin: 0 4px;
  background: var(--line);
}
@media (max-width: 560px) {
  .flipbar__btn--txt span,
  .flipbar__count {
    display: none;
  }
  .flipbar__btn--txt {
    width: 42px;
    padding: 0;
  }
}


/* ---------- Páginas ---------- */
.cp {
  --ink: #2f3e44;
  --teal: #3f8fa6;
  --sec: var(--teal);
  --sec-ink: #fff;
  --sec-text: var(--sec);
  --grad: linear-gradient(90deg, #3f8fa6, #78b6c1 48%, #5f9a3f);
  --pale-1: #e3f1f4;
  --pale-2: #e8f1e1;
}
.cp--danflor {
  --grad: linear-gradient(90deg, #a5303a, #6b3a8d 52%, #3e3f97);
  --pale-1: #ecebf6;
  --pale-2: #f5e8ea;
}
.cp__in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
  height: 100%;
  padding: calc(var(--u) * 6) calc(var(--u) * 7) calc(var(--u) * 8.5);
}
.cp__in > * {
  margin: 0;
}
.cp em {
  font-style: normal;
  color: var(--leaf);
}
.cp .ic {
  display: block;
  flex: none;
  width: 1.15em;
  height: 1.15em;
}

/* Formas decorativas (padrão da marca) */
.cp__deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.cp__deco i {
  position: absolute;
  display: block;
}
.cp__deco i:nth-child(1) {
  top: calc(var(--u) * -8);
  right: calc(var(--u) * -8);
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 30);
  border-radius: 0 0 0 100%;
  background: var(--pale-1);
}
.cp__deco i:nth-child(2) {
  top: calc(var(--u) * 24);
  right: calc(var(--u) * 3);
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
  border-radius: 50%;
  background: var(--pale-2);
}
.cp__deco i:nth-child(3) {
  bottom: calc(var(--u) * 4);
  left: calc(var(--u) * -6);
  width: calc(var(--u) * 24);
  height: calc(var(--u) * 24);
  border-radius: 0 100% 0 0;
  background: var(--pale-1);
}
.cp__deco i:nth-child(4) {
  bottom: calc(var(--u) * 30);
  left: calc(var(--u) * 3);
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  border-radius: 50%;
  background: var(--pale-2);
}
.cp--prod .cp__deco i:nth-child(1) {
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 22);
}
.cp--prod .cp__deco i:nth-child(n + 3) {
  display: none;
}

/* Rodapé em degradê com o número da página */
.cp__band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: calc(var(--u) * 2.6);
  background: var(--grad);
}
/* Contato na faixa das páginas de produto (um de cada lado do número) */
.cp__band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(var(--u) * 5);
}
.cp__band-txt {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 0.8);
  color: #fff;
  font: 700 calc(var(--u) * 1.6) / 1 var(--font-ui);
  white-space: nowrap;
}
.cp__band-txt .ic {
  width: calc(var(--u) * 1.9);
  height: calc(var(--u) * 1.9);
}
.cp__tab {
  position: absolute;
  left: 50%;
  bottom: 0;
  display: grid;
  place-items: center;
  min-width: calc(var(--u) * 7.5);
  height: calc(var(--u) * 4.6);
  padding: 0 calc(var(--u) * 1.4);
  border-radius: calc(var(--u) * 1.4) calc(var(--u) * 1.4) 0 0;
  background: #fff;
  color: var(--ink);
  font: 800 calc(var(--u) * 2.2) / 1 var(--font-ui);
  transform: translateX(-50%);
}

/* Faixa de categoria */
.cp__ribbon {
  align-self: flex-start;
  margin-left: calc(var(--u) * -7) !important;
  padding: calc(var(--u) * 1.4) calc(var(--u) * 6) calc(var(--u) * 1.4) calc(var(--u) * 7);
  border-radius: 0 calc(var(--u) * 3) calc(var(--u) * 3) 0;
  background: var(--sec);
  color: var(--sec-ink);
  font: 800 calc(var(--u) * 3.5) / 1 var(--font-ui);
  letter-spacing: -0.01em;
}
.cp__ribbon--brand {
  background: var(--grad);
  color: #fff;
}

/* ---------- Página de produto ---------- */
.cp__phead > span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--u) * 2);
  font: 500 calc(var(--u) * 2.6) / 1.1 var(--font-ui);
  color: var(--ink);
}
.cp__phead h2 {
  margin: calc(var(--u) * 0.4) 0 0;
  font: 800 calc(var(--u) * 6) / 1.02 var(--font-ui);
  letter-spacing: -0.02em;
  color: var(--sec-text);
}
/* Nota da Shopee, na mesma linha do "Linha" */
.cp__rate {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 0.6);
  font: 600 calc(var(--u) * 1.8) / 1 var(--font-ui);
  color: var(--ink);
}
.cp__rate b {
  font-weight: 800;
}
.cp__rate .ic {
  width: calc(var(--u) * 2.1);
  height: calc(var(--u) * 2.1);
  color: #f2a516;
}
/* Promessa do produto, logo abaixo do nome */
.cp__hook {
  margin-top: calc(var(--u) * -0.6) !important;
  font: 800 calc(var(--u) * 3.1) / 1.15 var(--font-ui);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cp__hook em {
  font-style: normal;
  color: var(--sec-text);
}
/* Nome comprido cabe em uma linha */
.cp__phead--long h2 {
  font-size: calc(var(--u) * 5.1);
}
.cp__desc {
  font-size: calc(var(--u) * 2.45);
  line-height: 1.45;
  color: var(--ink);
}
.cp__mid {
  /* Ocupa o espaço que sobrar na página: a foto cresce quando a tabela é curta */
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 0.92fr 1.15fr;
  gap: calc(var(--u) * 3);
  min-height: calc(var(--u) * 28);
  max-height: calc(var(--u) * 58);
}
.cp__mid > .cp__feats {
  align-self: center;
}
.cp--tight .cp__mid,
.cp--dense .cp__mid {
  min-height: calc(var(--u) * 24);
}
/* Na tela os botões ocupam uma linha a mais: a foto cede um pouco */
@media screen {
  .cp--dense .cp__mid {
    min-height: calc(var(--u) * 22.5);
  }
}
.cp--tight .cp__in {
  gap: calc(var(--u) * 1.6);
}
/* Tabela muito longa (DANFLOR): a foto cede espaço para a tabela */
.cp--tight .cp__mid {
  min-height: calc(var(--u) * 21);
}
/* Página com tabela longa: os botões sobem para a linha da faixa de categoria */
.cp--tight .cp__cta {
  position: absolute;
  top: calc(var(--u) * 6);
  right: calc(var(--u) * 5);
  height: calc(var(--u) * 6.3);
  align-items: center;
  gap: calc(var(--u) * 1);
  margin: 0 !important;
}
.cp--tight .cp__btn {
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.8);
  font-size: calc(var(--u) * 1.75);
}
.cp__feats {
  display: grid;
  gap: calc(var(--u) * 1.5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cp__feats li {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.6);
}
.cp__fic {
  display: grid;
  place-items: center;
  flex: none;
  width: calc(var(--u) * 5);
  height: calc(var(--u) * 5);
  border-radius: calc(var(--u) * 1.3);
  background: var(--sec);
  color: var(--sec-ink);
}
.cp__fic .ic {
  width: calc(var(--u) * 2.8);
  height: calc(var(--u) * 2.8);
}
.cp__ftx {
  font: 700 calc(var(--u) * 2.25) / 1.2 var(--font-ui);
  color: var(--sec-text);
}
.cp__shot {
  position: relative;
  margin: 0;
}
.cp__shot-main {
  position: absolute;
  inset: 0 0 0 12%;
}
.cp__shot-main img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Foto ambientada (ex.: na grama): preenche o quadro, com cantos arredondados */
.cp__shot--photo .cp__shot-main {
  overflow: hidden;
  border-radius: calc(var(--u) * 3);
  box-shadow: 0 calc(var(--u) * 0.8) calc(var(--u) * 2.4) rgb(6 48 63 / 0.16);
}
.cp__shot--photo .cp__shot-main img {
  object-fit: cover;
}
.cp__zoom {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40%;
  aspect-ratio: 1;
  overflow: hidden;
  border: calc(var(--u) * 0.7) solid #fff;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 calc(var(--u) * 0.8) calc(var(--u) * 2.4) rgb(6 48 63 / 0.22);
}
.cp__zoom img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cp__arrow {
  position: absolute;
  left: 26%;
  bottom: 34%;
  width: 18%;
  fill: none;
  stroke: var(--sec-text);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cp__chip {
  align-self: flex-start;
  padding: calc(var(--u) * 0.8) calc(var(--u) * 1.8);
  border-radius: 999px;
  background: #f1f6f7;
  font: 500 calc(var(--u) * 1.95) / 1.2 var(--font-ui);
  color: var(--ink);
}
.cp__chip b {
  color: var(--sec-text);
}
/* Linha da cor + aviso de foto ilustrativa */
.cp__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 1) calc(var(--u) * 2);
}
.cp__chips > * {
  margin: 0;
}
.cp__photo-note {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 0.7);
  font: 500 calc(var(--u) * 1.6) / 1.2 var(--font-ui);
  color: #5d6f76;
}
.cp__photo-note .ic {
  flex: none;
  width: calc(var(--u) * 2);
  height: calc(var(--u) * 2);
}

/* Tabela de referências (como no catálogo impresso) */
.cp__tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  box-shadow: 0 0 0 1px #c9dade;
  font-size: calc(var(--u) * 2);
}
.cp__tbl th {
  padding: calc(var(--u) * 0.95) calc(var(--u) * 1.1);
  color: #fff;
  font: 800 calc(var(--u) * 1.75) / 1.1 var(--font-ui);
  letter-spacing: 0.03em;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
}
.cp__tbl .th-bit {
  background: #345058;
}
.cp__tbl .th-cor {
  background: #6fb0bd;
}
.cp__tbl .th-ref {
  background: #5c9b3d;
}
.cp__tbl .th-size {
  background: #2f3e44;
  text-transform: none;
}
.cp__tbl .th-size--alt {
  background: var(--teal);
}
.cp--danflor .cp__tbl .th-bit {
  background: #3e3f97;
}
.cp--danflor .cp__tbl .th-cor {
  background: #a5303a;
}
.cp--danflor .cp__tbl .th-ref {
  background: #2f3e44;
}
.cp--danflor .cp__tbl .th-size {
  background: #3e3f97;
}
.cp--danflor .cp__tbl .th-size--alt {
  background: #a5303a;
}
.cp__tbl td {
  padding: calc(var(--u) * 0.8) calc(var(--u) * 1.1);
  border-bottom: 1px solid #dbe6e9;
  color: var(--ink);
  text-align: center;
  vertical-align: middle;
}
.cp__tbl tbody tr:nth-child(even) td {
  background: #f5f9fa;
}
.cp__tbl .td-bit {
  font: 700 calc(var(--u) * 1.9) / 1.2 var(--font-ui);
  white-space: nowrap;
}
.cp__tbl .td-code {
  font: 600 calc(var(--u) * 1.95) / 1.2 var(--font-ui);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.cp__tbl .td-none {
  color: #a3b3b8;
}
.cp__tbl--dense td {
  padding: calc(var(--u) * 0.5) calc(var(--u) * 1);
  font-size: calc(var(--u) * 1.85);
}
.cp__tbl--dense .td-bit,
.cp__tbl--dense .td-code {
  font-size: calc(var(--u) * 1.8);
}
.cp__tbl--xdense td,
.cp__tbl--xdense .td-bit,
.cp__tbl--xdense .td-code {
  padding-block: calc(var(--u) * 0.32);
  line-height: 1.1;
}
.sw {
  display: inline-block;
  width: calc(var(--u) * 2.3);
  height: calc(var(--u) * 2.3);
  margin-right: calc(var(--u) * 0.8);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.18);
  vertical-align: middle;
}
.sw--duo {
  background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%);
}
/* Coluna de cores: a largura do bloco é a do maior nome da tabela (medida pelo catalogo.js) */
.cp__tbl .cor {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 0.8);
  width: var(--cor-w, auto);
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}
.cp__tbl .cor .sw {
  flex: none;
  margin: 0;
}

/* Caixa de destaque (gradiente da marca) */
.cp__callout {
  display: grid;
  gap: calc(var(--u) * 0.7);
  padding: calc(var(--u) * 1.6) calc(var(--u) * 2.4);
  border-radius: calc(var(--u) * 2.4) 0 calc(var(--u) * 2.4) calc(var(--u) * 2.4);
  background: var(--grad);
  color: #fff;
  font: 600 calc(var(--u) * 1.85) / 1.35 var(--font-ui);
}
.cp__callout span {
  display: flex;
  gap: calc(var(--u) * 1);
  align-items: flex-start;
}
.cp__callout .ic {
  width: calc(var(--u) * 2.4);
  height: calc(var(--u) * 2.4);
  margin-top: calc(var(--u) * 0.1);
}
.cp__cta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 1.4);
  margin-top: auto !important;
}
.cp__btn {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 1.1);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 2.4);
  border: 1.5px solid #c9dade;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: 700 calc(var(--u) * 1.95) / 1 var(--font-ui);
  text-decoration: none;
  transition:
    background-color 0.2s,
    border-color 0.2s;
}
.cp__btn .ic {
  width: calc(var(--u) * 2.5);
  height: calc(var(--u) * 2.5);
}
.cp__btn--wa {
  border-color: transparent;
  background: var(--wa);
  color: #fff;
}
.cp__btn--primary {
  border-color: transparent;
  background: var(--teal);
  color: #fff;
}
@media (hover: hover) {
  .cp__btn:hover {
    border-color: var(--teal);
  }
  .cp__btn--wa:hover {
    background: #116b38;
  }
  .cp__btn--primary:hover {
    background: var(--water-ink);
  }
}
.cp__print-only {
  display: none;
}

/* ---------- Mosaico de fotos (capa, por que nos escolher, sobre nós) ---------- */
.cp__collage {
  position: relative;
}
.cp__collage .tile {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: #e9f0f2;
}
.cp__collage .tile img,
.cp__area-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cp__collage .q {
  position: absolute;
  display: block;
}
.cp__collage--cover {
  position: absolute;
  top: calc(var(--u) * 4);
  left: calc(var(--u) * 4);
  right: calc(var(--u) * 4);
  height: calc(var(--u) * 86);
  z-index: 1;
}
.cp__collage--cover .tile--1 {
  top: 0;
  left: 17%;
  width: 44%;
  height: 19%;
  border-radius: 0 0 0 calc(var(--u) * 6);
}
.cp__collage--cover .tile--2 {
  top: 21%;
  left: 0;
  width: 61%;
  height: 46%;
  border-radius: calc(var(--u) * 6) 0 0 calc(var(--u) * 1);
}
.cp__collage--cover .tile--3 {
  top: 16%;
  left: 63%;
  width: 37%;
  height: 51%;
  border-radius: 0 calc(var(--u) * 6) 0 0;
}
.cp__collage--cover .tile--4 {
  top: 69%;
  left: 15%;
  width: 46%;
  height: 24%;
  border-radius: 0 0 calc(var(--u) * 6) calc(var(--u) * 6);
}
.cp__collage--cover .tile--5 {
  top: 69%;
  left: 63%;
  width: 37%;
  height: 31%;
  border-radius: 0 0 calc(var(--u) * 6) 0;
}
.cp__collage--cover .q--1 {
  top: 0;
  left: 63%;
  width: 16%;
  height: 14%;
  border-radius: 0 0 0 100%;
  background: #5c9b3d;
}
.cp__collage--cover .q--2 {
  top: 69%;
  left: 0;
  width: 13%;
  height: 12%;
  border-radius: 100% 0 0 0;
  background: var(--teal);
}
.cp__collage--cover .q--3 {
  top: 95%;
  left: 48%;
  width: 13%;
  height: 12%;
  border-radius: 0 0 0 100%;
  background: #2f3e44;
}
.cp__collage--why,
.cp__collage--about {
  flex: 1;
  min-height: calc(var(--u) * 30);
  margin-top: auto !important;
}
.cp__collage--why .tile--1,
.cp__collage--about .tile--1 {
  top: 0;
  left: 18%;
  width: 40%;
  height: 34%;
  border-radius: 0 calc(var(--u) * 5) 0 0;
}
.cp__collage--why .tile--2,
.cp__collage--about .tile--2 {
  top: 36%;
  left: 0;
  width: 35%;
  height: 64%;
  border-radius: calc(var(--u) * 5) 0 0 calc(var(--u) * 5);
}
.cp__collage--why .tile--3,
.cp__collage--about .tile--3 {
  top: 36%;
  left: 37%;
  width: 37%;
  height: 64%;
  border-radius: 0 0 calc(var(--u) * 5) 0;
}
.cp__collage--why .tile--4,
.cp__collage--about .tile--4 {
  top: 0;
  left: 60%;
  width: 40%;
  height: 34%;
  border-radius: 0 0 calc(var(--u) * 5) 0;
}
.cp__collage--why .q--1,
.cp__collage--about .q--1 {
  top: 36%;
  left: 76%;
  width: 18%;
  height: 26%;
  border-radius: 0 0 0 100%;
  background: #5c9b3d;
}
.cp__collage--why .q--2,
.cp__collage--about .q--2 {
  top: 66%;
  left: 76%;
  width: 14%;
  height: 20%;
  border-radius: 0 100% 0 0;
  background: var(--teal);
}

/* ---------- Capa ---------- */
.cp--cover {
  background: #fff;
}
.cp--cover .cp__deco i:nth-child(4) {
  display: none;
}
.cp__cover-txt {
  position: absolute;
  left: calc(var(--u) * 7);
  right: calc(var(--u) * 6);
  bottom: calc(var(--u) * 6);
  z-index: 2;
}
.cp__edition {
  display: inline-block;
  margin-bottom: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 0.7) calc(var(--u) * 1.8);
  border-radius: 999px;
  background: #e8f1e1;
  color: #3f6e2a;
  font: 700 calc(var(--u) * 1.7) / 1 var(--font-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cp__cover-title {
  margin: 0 0 calc(var(--u) * 2.6);
  color: var(--ink);
  line-height: 0.95;
}
.cp__cover-title span {
  display: block;
  font: 400 calc(var(--u) * 5.6) / 1.05 var(--font-ui);
}
.cp__cover-title strong {
  display: block;
  font: 800 calc(var(--u) * 10.5) / 1 var(--font-ui);
  letter-spacing: -0.03em;
}
.cp__brands {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--u) * 4);
}
.cp__brand {
  display: grid;
  gap: calc(var(--u) * 0.6);
}
.cp__brand span {
  font: 400 calc(var(--u) * 2) / 1 var(--font-ui);
  color: var(--teal);
}
.cp__brand b {
  font-weight: 700;
  color: #3d7a22;
}
.cp__logo {
  display: block;
  width: auto;
}
.cp__logo--cover {
  height: calc(var(--u) * 9);
}
.cp__logo--danflor.cp__logo--cover {
  height: calc(var(--u) * 12);
}

/* ---------- Por que nos escolher ---------- */
.cp__h1 {
  font: 800 calc(var(--u) * 5.4) / 1.1 var(--font-ui);
  color: var(--ink);
  text-align: center;
}
.cp__bullets {
  display: grid;
  gap: calc(var(--u) * 0.9);
  padding-left: calc(var(--u) * 3);
  color: var(--ink);
  font: 600 calc(var(--u) * 2.15) / 1.35 var(--font-ui);
}
.cp__bullets b {
  color: var(--teal);
}
.cp__bullets strong {
  font-weight: 800;
  color: var(--leaf-ink, #2f6f0e);
}
.cp__callout--warranty {
  align-self: flex-end;
  max-width: 82%;
  margin-right: calc(var(--u) * -7) !important;
  border-radius: calc(var(--u) * 3) 0 0 calc(var(--u) * 3);
  font-size: calc(var(--u) * 1.8);
  text-align: right;
}
.cp__callout--warranty span {
  display: block;
}
.cp__callout--warranty small {
  font-size: calc(var(--u) * 1.6);
  opacity: 0.9;
}

/* ---------- Sumário ---------- */
.cp__toc-band {
  position: absolute;
  top: calc(var(--u) * 16);
  bottom: calc(var(--u) * 18);
  left: 0;
  width: calc(var(--u) * 15.5);
  background: var(--teal);
}
.cp__toc-word {
  position: absolute;
  top: calc(var(--u) * 8);
  right: calc(var(--u) * 4);
  color: var(--teal);
  font: 800 calc(var(--u) * 14) / 1 var(--font-ui);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.cp__toc {
  position: relative;
  display: grid;
  gap: calc(var(--u) * 1.1);
  max-width: 72%;
  margin: calc(var(--u) * 11) 0 0 !important;
  padding: 0;
  list-style: none;
}
.cp__toc a {
  color: var(--teal);
  text-decoration: none;
}
.cp__toc > li > a {
  display: grid;
  grid-template-columns: calc(var(--u) * 8.5) 1fr;
  align-items: baseline;
  font: 500 calc(var(--u) * 3.6) / 1.15 var(--font-ui);
}
.cp__toc > li > a b {
  color: #fff;
  font: 800 calc(var(--u) * 2) / 1 var(--font-ui);
}
.cp__toc ul {
  margin: calc(var(--u) * 0.4) 0 0;
  padding: 0 0 0 calc(var(--u) * 8.5);
  list-style: none;
}
.cp__toc ul a {
  font: 400 calc(var(--u) * 2) / 1.45 var(--font-ui);
}
@media (hover: hover) {
  .cp__toc a:hover {
    text-decoration: underline;
  }
}
.cp__hint {
  display: flex;
  gap: calc(var(--u) * 1);
  align-items: center;
  margin-top: auto !important;
  max-width: 70%;
  padding: calc(var(--u) * 1.2) calc(var(--u) * 2);
  border-radius: calc(var(--u) * 2);
  background: var(--teal);
  color: #fff;
  font: 600 calc(var(--u) * 1.8) / 1.2 var(--font-ui);
}

/* ---------- Aberturas: Área RAEGO e Área DANFLOR ---------- */
.cp__area-photo {
  position: absolute;
  inset: 0 0 auto;
  height: 74%;
  margin: 0;
}
.cp__area-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgb(255 255 255 / 0.8) 82%, #fff);
}
.cp__area-txt {
  position: absolute;
  left: calc(var(--u) * 10);
  right: calc(var(--u) * 10);
  bottom: calc(var(--u) * 14);
  display: grid;
  justify-items: center;
  gap: calc(var(--u) * 1.4);
  text-align: center;
}
.cp__area-kicker {
  font: 800 calc(var(--u) * 4) / 1 var(--font-ui);
  color: #5c9b3d;
}
.cp--danflor .cp__area-kicker {
  color: #3e3f97;
}
.cp__logo--area {
  width: 78%;
  height: auto;
}
.cp__tagline {
  font: 400 calc(var(--u) * 3.6) / 1.1 var(--font-ui);
  color: var(--teal);
}
.cp__tagline b {
  font-weight: 700;
  color: #3d7a22;
}

/* ---------- Sobre nós ---------- */
.cp__about {
  font-size: calc(var(--u) * 2.45);
  line-height: 1.5;
  color: var(--ink);
  text-align: center;
}
.cp__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 1.8) 0;
  border-block: 1px solid #d5e4e8;
  list-style: none;
  text-align: center;
}
.cp__stats strong {
  display: block;
  font: 800 calc(var(--u) * 4.2) / 1 var(--font-ui);
  color: var(--teal);
}
.cp__stats span {
  display: block;
  margin-top: calc(var(--u) * 0.6);
  font-size: calc(var(--u) * 1.85);
  color: var(--muted);
}

/* ---------- Como comprar ---------- */
.cp--buy .cp__in {
  justify-content: space-between;
}
.cp__steps {
  display: grid;
  gap: calc(var(--u) * 1.8);
  padding: 0;
  list-style: none;
}
.cp__steps li {
  display: grid;
  grid-template-columns: calc(var(--u) * 5.4) 1fr;
  gap: calc(var(--u) * 2);
  align-items: center;
}
.cp__steps b {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 5.4);
  height: calc(var(--u) * 5.4);
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font: 800 calc(var(--u) * 2.5) / 1 var(--font-ui);
}
.cp__steps strong {
  display: block;
  font: 700 calc(var(--u) * 2.4) / 1.2 var(--font-ui);
  color: var(--ink);
}
.cp__steps span {
  display: block;
  margin-top: calc(var(--u) * 0.3);
  font-size: calc(var(--u) * 2.15);
  color: var(--muted);
}
.cp__qr-box {
  display: grid;
  grid-template-columns: calc(var(--u) * 19) 1fr;
  gap: calc(var(--u) * 3);
  align-items: center;
  padding: calc(var(--u) * 2.4);
  border-radius: calc(var(--u) * 2.4);
  background: #eef6f8;
}
.cp__qr {
  padding: calc(var(--u) * 1.3);
  border-radius: calc(var(--u) * 1.3);
  background: #fff;
}
.cp__qr svg {
  display: block;
  width: 100%;
  height: auto;
}
.cp__qr-box strong {
  display: block;
  font: 800 calc(var(--u) * 2.8) / 1.15 var(--font-ui);
  color: var(--ink);
}
.cp__qr-box span {
  display: block;
  margin-top: calc(var(--u) * 0.5);
  font-size: calc(var(--u) * 2);
  color: var(--muted);
}
.cp__qr-box .cp__big {
  font: 800 calc(var(--u) * 3.4) / 1.1 var(--font-ui);
  color: var(--wa);
}
.cp__qr-box .cp__btn {
  margin-top: calc(var(--u) * 1.4);
}
.cp__resell {
  display: grid;
  gap: calc(var(--u) * 0.8);
  justify-items: start;
  padding: calc(var(--u) * 2.4);
  border-radius: calc(var(--u) * 2.4);
  background: #e8f1e1;
}
.cp__resell strong {
  font: 800 calc(var(--u) * 3) / 1.1 var(--font-ui);
  color: #3f6e2a;
}
.cp__resell span {
  font-size: calc(var(--u) * 2.15);
  color: var(--ink);
}

/* ---------- Anotações ---------- */
.cp__lines {
  flex: 1;
  background: repeating-linear-gradient(180deg, transparent 0 calc(var(--u) * 5.4), #d5e4e8 calc(var(--u) * 5.4) calc(var(--u) * 5.55));
}

/* ---------- Contracapa ---------- */
.cp--back {
  background:
    radial-gradient(circle at 20% 30%, rgb(255 255 255 / 0.7), transparent 40%),
    radial-gradient(circle at 80% 70%, rgb(255 255 255 / 0.6), transparent 45%),
    #f1f4f3;
}
.cp__back {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: calc(var(--u) * 5);
  height: 100%;
  padding: calc(var(--u) * 8) calc(var(--u) * 5) calc(var(--u) * 6);
}
.cp__back-qr {
  display: grid;
  justify-items: center;
  gap: calc(var(--u) * 1.2);
  margin: 0 auto auto;
  padding-top: calc(var(--u) * 20);
  color: var(--ink);
  font: 700 calc(var(--u) * 2.4) / 1 var(--font-ui);
}
.cp__back-qr .cp__qr {
  width: calc(var(--u) * 22);
}
.cp__back-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: calc(var(--u) * 3);
  align-items: end;
}
.cp__contact {
  display: grid;
  justify-items: center;
  gap: calc(var(--u) * 0.4);
  color: var(--ink);
  font: 600 calc(var(--u) * 1.65) / 1.3 var(--font-ui);
  text-align: center;
}
.cp__logo--back {
  height: calc(var(--u) * 7);
  margin-bottom: calc(var(--u) * 1.2);
}
.cp__logo--danflor.cp__logo--back {
  height: calc(var(--u) * 6.4);
}
.cp__made {
  display: grid;
  justify-items: center;
  gap: calc(var(--u) * 0.4);
  color: var(--ink);
  font: 400 calc(var(--u) * 1.5) / 1.2 var(--font-ui);
  text-align: center;
}
.cp__made strong {
  margin-top: calc(var(--u) * 0.6);
  font-weight: 700;
  font-size: calc(var(--u) * 1.6);
}
.cp__flag {
  position: relative;
  display: block;
  width: calc(var(--u) * 13);
  height: calc(var(--u) * 9);
  border-radius: calc(var(--u) * 0.6);
  background: #009b3a;
}
.cp__flag::before {
  content: '';
  position: absolute;
  inset: 12% 8%;
  background: #fedf00;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.cp__flag i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #002776;
  transform: translate(-50%, -50%);
}
.cp__rights {
  margin: 0;
  color: var(--muted);
  font: 500 calc(var(--u) * 1.6) / 1.3 var(--font-ui);
  text-align: center;
}


/* ---------- Ajustes do livro sobre o fundo claro da seção ---------- */
.flip.is-ready .flip__book::before {
  box-shadow:
    0 30px 60px -28px rgb(6 48 63 / 0.55),
    0 0 0 1px rgb(6 48 63 / 0.06);
}
.cp {
  box-shadow:
    0 24px 50px -28px rgb(6 48 63 / 0.5),
    0 0 0 1px rgb(6 48 63 / 0.06);
}
.flip.is-spread .flip__side {
  border-color: var(--line);
  background: #fff;
  color: var(--deep);
  box-shadow: 0 10px 24px -12px rgb(6 48 63 / 0.45);
}
@media (hover: hover) {
  .flip.is-spread .flip__side:not(:disabled):hover {
    background: var(--surface-3);
  }
}
.flipbar {
  box-shadow:
    0 14px 34px -14px rgb(6 48 63 / 0.5),
    0 0 0 1px rgb(6 48 63 / 0.06);
}

/* ---------- Tela cheia ---------- */
.flip:fullscreen {
  display: grid;
  align-content: center;
  background: var(--surface-2);
}
.flip:-webkit-full-screen {
  display: grid;
  align-content: center;
  background: var(--surface-2);
}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .flip.is-ready .flip__book,
  .flip.is-ready .flip__book::before {
    transition: none;
  }
}

/* ---------- Impressão / PDF: uma página do catálogo por folha A4 ----------
   Versão para gráfica (com 3 mm de sangria): abra /produtos-raego/?sangria=1 e imprima (Salvar como PDF). */
@media print {
  @page {
    size: A4 portrait;
    margin: 0;
  }
  @page sangria {
    size: 216mm 303mm;
    margin: 0;
  }
  html,
  body {
    background: #fff !important;
  }
  .skip,
  .progress,
  .header,
  .mnav,
  .footer,
  .wa-float,
  .cookie,
  .toast,
  .catalog-sec > .container,
  .catalog-sec__hint,
  .flipbar,
  .flip__side,
  .leaf__shade,
  .leaf__face--blank,
  .cp__web,
  main > :not(.catalog-sec) {
    display: none !important;
  }
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  .cp__print-only {
    display: block;
  }
  .cp__band .cp__print-only {
    display: inline-flex;
  }
  .catalog-sec {
    padding: 0 !important;
    background: none !important;
  }
  .flip {
    --pw: 210mm !important;
    --bh: 297mm !important;
  }
  .flip__stage {
    display: block;
    padding: 0;
    overflow: visible;
  }
  .flip__book,
  .flip.is-ready .flip__book {
    display: block;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    transform: none !important;
    perspective: none !important;
  }
  .flip__book::before {
    display: none !important;
  }
  /* Impressão antes de o livro ser montado: todas as páginas entram */
  .flip.is-pending .flip__book > .cp ~ .cp {
    display: block !important;
  }
  .leaf,
  .leaf__face {
    position: static !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    visibility: visible !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
  .leaf__face::after {
    display: none !important;
  }
  .cp,
  .flip.is-ready .cp {
    width: 210mm !important;
    height: 297mm !important;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    break-after: page;
    page-break-after: always;
    break-inside: avoid;
  }

  /* Sangria: cada página ganha 3 mm em volta; o que encosta na borda continua até o fim do papel */
  html.sangria .cp,
  html.sangria .flip.is-ready .cp {
    page: sangria;
    margin: 3mm !important;
    overflow: hidden;
  overflow: clip;
    overflow-clip-margin: 3mm;
  }
  html.sangria .cp--back {
    box-shadow: 0 0 0 3mm #f1f4f3;
  }
  html.sangria .cp__band {
    left: -3mm;
    right: -3mm;
    bottom: -3mm;
    height: calc(var(--u) * 2.6 + 3mm);
  }
  html.sangria .cp__tab {
    bottom: 3mm;
  }
  html.sangria .cp__ribbon {
    margin-left: calc(var(--u) * -7 - 3mm) !important;
    padding-left: calc(var(--u) * 7 + 3mm);
  }
  html.sangria .cp__toc-band {
    left: -3mm;
    width: calc(var(--u) * 15.5 + 3mm);
  }
  html.sangria .cp__area-photo {
    inset: -3mm -3mm auto;
    height: calc(74% + 3mm);
  }
}

/* iOS dá zoom (e não volta) ao tocar em campos com letra menor que 16 px */
@supports (-webkit-touch-callout: none) {
  .flipbar__go select {
    font-size: 16px;
  }
}