/* ==========================================================================
   Comfy — Landing Page Corporativa
   Escopo: tudo abaixo de .cfy-corp  (namespace proprio, nao colide com .cmfy-*)
   Unidade: px (o tema usa html{font-size:62.5%}, entao rem seria ambiguo)

   TOKENS MEDIDOS NO SITE EM PRODUCAO (www.comfy.com.br, 12/08/2026):
     .cmfy-btn          -> radius 999px | pad 14px 26px | 14px/600 | ls .2px
                           bg #1f3a3a | border 1px solid #1f3a3a | Manrope
     .cmfy-card-outer   -> radius 24px | bg #fff | sem borda
                           shadow 0 4px 24px rgba(31,58,58,.06)
     .cmfy-slider-block -> radius 14px | border 1px #ece6d8
     .cmfy-chip         -> radius 999px
   Tipografia: Manrope em tudo (o serif Fraunces foi removido a pedido).
   ========================================================================== */

.cfy-corp {
  /* --- cores (herda do tema, fallback = valor medido em producao) --- */
  --c-primary:    #1f3a3a;                        /* teal dos botoes/CTA */
  --c-deep:       var(--cmfy-primary, #163a43);   /* teal das secoes escuras */
  --c-wine:       var(--cmfy-logo, #6b1f2e);
  --c-gold:       var(--cmfy-gold, #c9785b);
  --c-sage:       var(--cmfy-sage, #7fa08c);
  --c-ink:        var(--cmfy-foreground, #2e3438);
  --c-bg:         var(--cmfy-background, #faf8f4);
  --c-cream:      var(--cmfy-cream, #f3eee7);
  --c-border:     var(--cmfy-border, #e7e2da);
  --c-white:      #fff;
  --c-muted:      #6b7472;

  /* --- tipografia: Manrope em tudo --- */
  --f-sans: var(--cmfy-font-sans, "Manrope", ui-sans-serif, system-ui, sans-serif);

  /* --- forma (do design system) --- */
  --r-lg:   24px;   /* cards grandes, imagens, blocos de destaque */
  --r-md:   14px;   /* cards de produto, inputs, blocos menores */
  --r-pill: 999px;  /* botoes e chips */

  --shadow-card: 0 4px 24px rgba(31, 58, 58, .06);
  --shadow-card-hover: 0 12px 34px rgba(31, 58, 58, .12);

  /* --- layout --- */
  --w-container: 1280px;
  --pad-x: 24px;
  --sec-y: 96px;

  /* ============ reset defensivo contra o Luma/tema ============ */
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.cfy-corp *,
.cfy-corp *::before,
.cfy-corp *::after { box-sizing: border-box; }

/* ESPECIFICIDADE DO RESET — nao troque o :where() por uma lista normal.
   `.cfy-corp p` seria 0,1,1 e venceria `.cfy-corp__lead` (0,1,0): a margem
   aparece no editor e some no navegador. Foi o que deixou todos os textos
   "lead" colados nos h2.
   Com :where() o reset fica 0,1,0 — ainda vence os seletores de tipo do Luma
   (`p { margin: 0 0 1rem }` = 0,0,1) e empata com as classes utilitarias, que
   por virem depois ganham. Bonus: as regras dentro de @media continuam com a
   mesma especificidade da base e nao precisam de prefixo.
   O mesmo vale para o reset de <button> logo abaixo: sem :where() ele apagava
   a borda e o fundo das setas do carrossel. */
.cfy-corp :where(h1, h2, h3, h4, p, ul, ol, figure, dl) { margin: 0; padding: 0; }
.cfy-corp :where(ul, ol) { list-style: none; }
.cfy-corp img { max-width: 100%; height: auto; display: block; border: 0; }
.cfy-corp :where(button) { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.cfy-corp summary::-webkit-details-marker { display: none; }
.cfy-corp :focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; border-radius: 2px; }

/* Atenção: o Luma declara a:visited/a:hover com especificidade 0,2,0. Por isso
   este reset também usa 0,2,0 — e todas as regras de cor de botão/link abaixo
   precisam de 0,2,0 ou mais, senão o tema vence e o texto some no fundo. */
.cfy-corp a { color: inherit; text-decoration: none; }
.cfy-corp a:hover, .cfy-corp a:visited, .cfy-corp a:focus { color: inherit; text-decoration: none; }

/* ============ estruturas base ============ */
.cfy-corp__wrap {
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.cfy-corp__sec { padding-block: var(--sec-y); }
.cfy-corp__sec--cream { background: var(--c-cream); }
.cfy-corp__sec--dark  { background: var(--c-deep); color: #eef2f0; }
.cfy-corp__sec--wine  { background: var(--c-wine); color: #f7f0f1; }
.cfy-corp__sec--tight { padding-block: 64px; }

.cfy-corp__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--c-gold);
  margin-bottom: 18px;
}
.cfy-corp__sec--dark .cfy-corp__eyebrow,
.cfy-corp__sec--wine .cfy-corp__eyebrow { color: var(--c-sage); }

/* Manrope em corpo de display: precisa de peso maior e tracking negativo,
   senão o titulo fica leve e largo demais (o serif segurava isso sozinho). */
.cfy-corp__h {
  font-family: var(--f-sans);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -.025em;
  color: var(--c-deep);
  font-size: clamp(28px, 3.6vw, 42px);
  max-width: 21ch;
}
.cfy-corp__sec--dark .cfy-corp__h,
.cfy-corp__sec--wine .cfy-corp__h { color: #fff; }

.cfy-corp__lead {
  margin-top: 20px;
  font-size: 16px;
  color: var(--c-muted);
  max-width: 62ch;
}
.cfy-corp__sec--dark .cfy-corp__lead,
.cfy-corp__sec--wine .cfy-corp__lead { color: rgba(255,255,255,.72); }

/* ============ botoes — pill, espelhando .cmfy-btn ============ */
.cfy-corp__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px;
  font-size: 14px; font-weight: 600; letter-spacing: .2px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.cfy-corp__btn:active { transform: translateY(1px); }

.cfy-corp .cfy-corp__btn--primary,
.cfy-corp .cfy-corp__btn--primary:visited { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.cfy-corp .cfy-corp__btn--primary:hover,
.cfy-corp .cfy-corp__btn--primary:focus { background: #16302f; border-color: #16302f; color: #fff; }

.cfy-corp .cfy-corp__btn--ghost,
.cfy-corp .cfy-corp__btn--ghost:visited { background: transparent; color: var(--c-primary); border-color: #d4d0c8; }
.cfy-corp .cfy-corp__btn--ghost:hover,
.cfy-corp .cfy-corp__btn--ghost:focus { background: var(--c-white); border-color: var(--c-primary); color: var(--c-primary); }

.cfy-corp .cfy-corp__sec--dark .cfy-corp__btn--ghost,
.cfy-corp .cfy-corp__sec--dark .cfy-corp__btn--ghost:visited,
.cfy-corp .cfy-corp__sec--wine .cfy-corp__btn--ghost,
.cfy-corp .cfy-corp__sec--wine .cfy-corp__btn--ghost:visited { color: #fff; border-color: rgba(255,255,255,.42); }
.cfy-corp .cfy-corp__sec--dark .cfy-corp__btn--ghost:hover,
.cfy-corp .cfy-corp__sec--wine .cfy-corp__btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; }

.cfy-corp .cfy-corp__btn--light,
.cfy-corp .cfy-corp__btn--light:visited { background: #fff; border-color: #fff; color: var(--c-wine); }
.cfy-corp .cfy-corp__btn--light:hover,
.cfy-corp .cfy-corp__btn--light:focus { background: var(--c-cream); border-color: var(--c-cream); color: var(--c-wine); }

.cfy-corp__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.cfy-corp .cfy-corp__link,
.cfy-corp .cfy-corp__link:visited {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .2px; color: var(--c-primary);
}
.cfy-corp .cfy-corp__link:hover { color: var(--c-gold); }
.cfy-corp__link svg { transition: transform .18s ease; }
.cfy-corp__link:hover svg { transform: translateX(4px); }

/* ============ 1. HERO ============ */
.cfy-corp__hero { background: var(--c-bg); overflow: hidden; }
.cfy-corp__hero-grid {
  display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: center;
  padding-block: 50px 88px;
}
.cfy-corp__hero-title {
  font-family: var(--f-sans); font-weight: 700;
  font-size: clamp(32px, 4.4vw, 52px); line-height: 1.08;
  letter-spacing: -.032em; color: var(--c-deep); max-width: 16ch;
}
.cfy-corp__hero-sub { margin-top: 22px; font-size: 17px; color: var(--c-muted); max-width: 46ch; }
.cfy-corp__hero-media { position: relative; }
/* 16:9 = proporcao nativa do arquivo. Nao trocar por 4:3 sem recortar a foto
   antes: object-fit cover cortaria ~25% da largura e comeria a cadeira. */
.cfy-corp__hero-media img {
  aspect-ratio: 16 / 9; object-fit: cover; width: 100%;
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
}

/* ============ 3. VANTAGENS — CARROSSEL ============ */
/* Dois modos no mesmo markup:
   - .is-swiper  -> o Swiper do tema assumiu; ele controla largura e transform
   - sem a classe -> scroll-snap nativo (preview standalone, JS off, tema sem Swiper)
   O resultado visual e o mesmo: 3 / 2 / 1 cards por vez. */
/* --slides e --slide-gap espelham os data-cfy-slides / data-cfy-gap da
   marcacao, que alimentam o Swiper. Mudou um, muda o outro — senao o modo
   com Swiper e o modo scroll-snap divergem na mesma pagina. */
.cfy-corp__carousel {
  margin-top: 48px; position: relative;
  --slides: 3; --slide-gap: 28px;
}
/* Sem titulo acima, o carrossel de vantagens encosta direto no padding da
   secao — os 48px de margem viravam vao morto no topo. */
#vantagens .cfy-corp__carousel { margin-top: 0; }

/* Secao mais baixa que as outras: sem h2 e sem lead, sobrou so a faixa de
   itens, e os 96px padrao viravam ar. Redefine a variavel em vez de escrever
   `padding-block` direto — assim continua passando pela mesma regra
   (.cfy-corp__sec) e nao cria uma segunda fonte de verdade para o espacamento.
   Vale em todos os breakpoints: abaixo de 768px as demais secoes caem para
   56px e esta fica em 60px. */
#vantagens { --sec-y: 60px; }
.cfy-corp__carousel--logos { --slides: 5; --slide-gap: 40px; margin-top: 32px; }

/* Regra unica de largura de slide: serve a qualquer carrossel da pagina. */
.cfy-corp__carousel-track > * {
  flex: 0 0 calc((100% - (var(--slides) - 1) * var(--slide-gap)) / var(--slides));
  scroll-snap-align: start;
  min-width: 0;
}
.cfy-corp__carousel.is-swiper .cfy-corp__carousel-track > * { flex: 0 0 auto; }

.cfy-corp__carousel-viewport { overflow: hidden; }

.cfy-corp__carousel-track {
  display: flex;
  gap: var(--slide-gap, 28px);
  /* modo scroll-snap */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.cfy-corp__carousel-track::-webkit-scrollbar { display: none; }

/* Quando o Swiper inicializa ele passa a mandar em largura/transform.
   Desligar o scroll nativo aqui e obrigatorio, senao os dois brigam. */
.cfy-corp__carousel.is-swiper .cfy-corp__carousel-track {
  overflow: visible;
  scroll-snap-type: none;
  gap: 0;                 /* o Swiper usa spaceBetween, nao gap */
  padding-bottom: 0;
  /* O Swiper aplica `transition-duration` inline no wrapper, mas quem declara
     `transition-property: transform` e o CSS dele — que NAO carrega nesta
     pagina (mesmo motivo do bloco de avaliacoes). Sem esta linha o transform
     troca sem animar e o marquee fica parado, mesmo com autoplay.running=true.
     O timing linear evita que ele acelere e freie a cada slide. */
  transition-property: transform;
  transition-timing-function: linear;
}
.cfy-corp__carousel.is-swiper .cfy-corp__carousel-track > * {
  transition-property: transform;
}

/* --- o card, agora sem fundo --- */
/* Slide reduzido a [icone][titulo]: uma linha so, alinhados pelo centro.
   Sem o <p>, `align-items: center` e o que mantem o icone na mesma altura
   do titulo quando ele quebra em duas linhas. */
.cfy-corp__perk {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.cfy-corp__perk svg {
  flex: 0 0 40px; width: 40px; height: 40px; color: var(--c-gold);
}
/* QUEBRA EM DUAS LINHAS
   `text-wrap: balance` so distribui melhor as linhas que JA quebram — nao
   forca uma quantidade de linhas. Quem forca a quebra e o max-width.
   Larguras medidas em producao, Manrope 700 / 19px, em uma linha:
     Sem pedido mínimo             174px   <- o mais curto
     Garantia de até 5 anos        196px
     Emissão de laudo NR-17        207px
     Desconto progressivo por valor 274px  (melhor quebra: 86 / 185)
     Parcelamento em 12x sem juros  276px  (123 / 149)
     Atendimento humano consultivo  288px  (115 / 170)
   190px e o unico valor util: abaixo de 185 o "Desconto progressivo por
   valor" vira 3 linhas (a maior metade dele mede 185px); acima de 174 o
   "Sem pedido mínimo" nao quebra. Como 185 > 174, NAO existe max-width que
   deixe os seis em duas linhas — so mudando o texto do mais curto.
   O limite de 190px vale em qualquer breakpoint (o slide mais estreito, a
   390px de viewport, ainda oferece 294px), entao a quebra e sempre igual. */
.cfy-corp__perk h3 {
  font-size: 19px; font-weight: 700; letter-spacing: -.02em;
  line-height: 1.25; color: var(--c-deep);
  max-width: 190px;
  text-wrap: balance;
}

/* ============ 4. FORMULÁRIO EM EVIDÊNCIA ============ */
/* Fundo escuro para dar destaque ao formulário — foi pedido "em evidência",
   e cartão branco sobre teal é o maior contraste disponível na paleta. */
.cfy-corp__lead-sec { background: var(--c-deep); color: #eef2f0; }
.cfy-corp__lead-sec .cfy-corp__h { color: #fff; }
.cfy-corp__lead-sec .cfy-corp__eyebrow { color: var(--c-sage); }
.cfy-corp__lead-sec .cfy-corp__lead { color: rgba(255,255,255,.72); }
.cfy-corp__lead-grid {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: start;
}

/* ============ LOGOS DE CLIENTES ============ */
.cfy-corp__logos-title {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.005em;
  color: var(--c-deep);
  text-align: center;
  margin-bottom: 4px;
}
.cfy-corp__logo {
  display: grid; place-items: center;
  height: 56px;
}
/* As marcas tem proporcoes diferentes — de 3,6:1 (Delipe) a 5,1:1
   (Petrobras). Limitando altura E largura, cada marca ocupa area optica
   parecida: as mais largas ficam mais baixas. Alturas diferentes entre as
   logos sao intencionais. */
.cfy-corp__logo img {
  max-height: 44px; max-width: 100%;
  width: auto; height: auto; object-fit: contain;
}

/* --- coluna esquerda: discurso + selos --- */
.cfy-corp__lead-sec .cfy-corp__h em { font-style: normal; color: var(--c-gold); }

.cfy-corp__seals {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-top: 40px;
}
.cfy-corp__seal {
  background: var(--c-white); border-radius: var(--r-md);
  padding: 16px 10px 14px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
/* Os selos sao 120x60 com transparencia. Altura fixa e object-fit: contain
   deixam os quatro alinhados mesmo com proporcoes internas diferentes —
   o BIFMA e puro texto largo, o TUV e quase quadrado. */
.cfy-corp__seal-mark {
  width: 100%; height: 44px; display: grid; place-items: center;
}
.cfy-corp__seal-mark img {
  width: auto; height: 100%; max-width: 100%; object-fit: contain;
}
.cfy-corp__seal strong {
  font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--c-deep);
}
.cfy-corp__seal span:not(.cfy-corp__seal-mark) {
  font-size: 11px; color: var(--c-muted); letter-spacing: .01em;
}
.cfy-corp__seals-note {
  margin-top: 16px; font-size: 12px; line-height: 1.6;
  color: rgba(255,255,255,.55); max-width: 52ch;
}

/* --- coluna direita: titulo e aviso dentro do cartao --- */
.cfy-corp__formslot-title {
  font-size: 22px; font-weight: 700; letter-spacing: -.02em;
  color: var(--c-wine); margin-bottom: 8px;
}
.cfy-corp__formslot-sub {
  font-size: 14.5px; color: var(--c-muted); line-height: 1.55; margin-bottom: 24px;
}
.cfy-corp__formslot-privacy {
  display: flex; align-items: center; gap: 12px; margin-top: 20px;
  font-size: 12.5px; line-height: 1.5; color: var(--c-muted);
}
.cfy-corp__formslot-privacy svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--c-wine); }
/* Só o cartão branco que emoldura o formulário. A estilização dos campos,
   labels e botão é responsabilidade do bloco CMS "form-corporativo" (#cbf-form),
   que traz o CSS próprio dele — não duplicar aqui, senão vira disputa de
   especificidade a cada atualização do bloco.
   O cartão fica porque o bloco NÃO traz fundo: a raiz dele é transparente, e
   sem isto o formulário cairia direto sobre o teal escuro da seção. */
.cfy-corp__formslot {
  background: var(--c-white); border-radius: var(--r-lg);
  box-shadow: 0 10px 40px rgba(31, 58, 58, .1);
  padding: 34px 36px 36px;
}
/* ============ 3. AMBIENTES ============ */
.cfy-corp__rooms { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.cfy-corp__room {
  background: var(--c-white);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease;
}
.cfy-corp__room:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }
.cfy-corp__room img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.cfy-corp__room-body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.cfy-corp__room h3 {
  font-size: 19px; font-weight: 600; letter-spacing: -.015em;
  color: var(--c-deep); margin-bottom: 10px;
}
.cfy-corp__room p { font-size: 13.5px; color: var(--c-muted); line-height: 1.65; margin-bottom: 18px; }
.cfy-corp__room .cfy-corp__link { margin-top: auto; }

/* ============ 7. NR-1 / NR-17 ============ */
.cfy-corp__norm { display: grid; gap: 14px; margin-top: 30px; }
.cfy-corp__norm article {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-md); padding: 20px 22px;
  display: grid; grid-template-columns: 68px 1fr; gap: 18px; align-items: start;
}
.cfy-corp__norm span {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-sage); color: #122c2b;
  border-radius: var(--r-pill); padding: 5px 0;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
}
.cfy-corp__norm p { font-size: 13.5px; color: rgba(255,255,255,.74); line-height: 1.65; }
.cfy-corp__disclaimer {
  margin-top: 22px; font-size: 12px; line-height: 1.6;
  color: rgba(255,255,255,.5); max-width: 60ch;
}
.cfy-corp__sec--dark .cfy-corp__lead strong { color: #fff; font-weight: 700; }

/* ============ 15. CTA FINAL ============ */
.cfy-corp__final { text-align: center; }
.cfy-corp__final .cfy-corp__h { max-width: none; }
.cfy-corp__final .cfy-corp__lead { max-width: none; }
.cfy-corp__final .cfy-corp__actions { justify-content: center; }

/* ============ 6/8. SPLIT (imagem + texto) ============ */
.cfy-corp__split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.cfy-corp__split-media img {
  aspect-ratio: 4 / 3; object-fit: cover; width: 100%;
  border-radius: var(--r-lg); box-shadow: var(--shadow-card);
}

/* ============ 10. FAIXA CTA ============ */
.cfy-corp__band { position: relative; overflow: hidden; }
.cfy-corp__band::after {
  content: ""; position: absolute; right: -140px; bottom: -180px;
  width: 420px; height: 420px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%;
}
.cfy-corp__band > * { position: relative; z-index: 1; }

/* Conteudo centralizado na faixa.
   O `*` aqui vale 0,1,0 — mesma especificidade de .cfy-corp__h (max-width:21ch)
   e .cfy-corp__lead (max-width:62ch). Ganha por vir depois no arquivo; se um
   dia estas regras subirem, o max-width volta a valer. Nao troque a ordem. */
.cfy-corp__band .cfy-corp__wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cfy-corp__band * { max-width: unset; }

/* ============ 11. FAQ ============ */
.cfy-corp__faq { display: grid; grid-template-columns: 340px 1fr; gap: 64px; align-items: start; }
.cfy-corp__faq-list {
  background: var(--c-white); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); padding: 6px 28px;
}
.cfy-corp__faq-item { border-bottom: 1px solid var(--c-border); }
.cfy-corp__faq-item:last-child { border-bottom: 0; }
.cfy-corp__faq-item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-size: 14.5px; font-weight: 600; letter-spacing: -.005em; color: var(--c-deep);
}
.cfy-corp__faq-item > summary:hover { color: var(--c-gold); }
.cfy-corp__faq-ico { flex: 0 0 auto; transition: transform .28s ease; color: var(--c-muted); }
.cfy-corp__faq-item[open] .cfy-corp__faq-ico { transform: rotate(180deg); }
.cfy-corp__faq-a { padding: 0 40px 22px 0; font-size: 14px; color: var(--c-muted); line-height: 1.72; }

/* ABRE/FECHA ANIMADO — sem uma linha de JS.
   `::details-content` e a caixa que o navegador cria em volta de tudo que nao
   e o <summary>. Animar a altura dela so e possivel por causa de duas coisas:
     interpolate-size: allow-keywords  -> libera transicao ATE a palavra `auto`
                                          (sem isso `auto` nao interpola e nao
                                          ha como animar sem medir por JS)
     transition-behavior: allow-discrete -> mantem o conteudo renderizado
                                          durante o fechamento; sem isso ele
                                          some no primeiro quadro e a animacao
                                          fecha em cima do vazio
   Navegador sem `::details-content` ignora as tres regras e o acordeao volta a
   abrir instantaneamente — que e o comportamento de hoje. Falha segura.
   A duracao e o easing acompanham o giro da seta acima: os dois terminam
   juntos e a leitura e de um gesto so.
   Curva medida (percentual do percurso ja andado): 21% em 50ms, 57% em 100ms,
   80% em 150ms, 92% em 200ms. Evitei cubic-bezier(.32,.72,0,1), que faz 53%
   nos primeiros 50ms e da a impressao de salto em vez de abertura. */
.cfy-corp__faq-item { interpolate-size: allow-keywords; }
.cfy-corp__faq-item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .28s ease, content-visibility .28s allow-discrete;
}
.cfy-corp__faq-item[open]::details-content { block-size: auto; }

@media (prefers-reduced-motion: reduce) {
  .cfy-corp__faq-ico { transition: none; }
  .cfy-corp__faq-item::details-content { transition: none; }
}

/* ============ AVALIAÇÕES DA LOJA (bloco Premier_StoreReview) ============
   O template entrega so o slider. O Tailwind dele nao e compilado nesta
   pagina: `p-7`, `bg-primary-foreground/[0.05]` e `text-primary-foreground/*`
   nao resolvem — o cartao chegaria sem fundo, sem padding e com o cinza
   padrao do Luma. Por isso o visual e nosso.
   Estilizamos por ESTRUTURA (figure > div > blockquote > figcaption) e nao
   pelas classes utilitarias: se o modulo recompilar o Tailwind com outros
   nomes, isto continua valendo. As estrelas tem fill inline (#FED353) e
   nao dependem de nada. */
/* O CSS DO SWIPER NAO CARREGA NESTA PAGINA. Conferido no navegador: zero
   regras para .swiper, .swiper-wrapper e .swiper-slide em /corporativo — o
   bundle e montado por pagina e o do modulo ficou de fora. Sem isto o wrapper
   fica display:block, os 26 slides empilham na vertical e a secao vai a
   ~9.800px de altura. O Swiper aplica o transform normalmente; o que falta e
   so o flex. Abaixo esta o minimo do CSS do proprio Swiper, escopado.
   (Os nossos carrosseis nao sofrem disso porque ja declaram o flex.) */
.cfy-corp__reviews .swiper {
  margin-top: 44px; position: relative; overflow: hidden; z-index: 1;
}
.cfy-corp__reviews .swiper-wrapper {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: stretch;
  box-sizing: content-box; transition-property: transform;
}
.cfy-corp__reviews .swiper-slide {
  position: relative; flex-shrink: 0; height: auto;
  transition-property: transform;
}

.cfy-corp__reviews figure {
  display: flex; flex-direction: column; height: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-lg);
  padding: 28px; margin: 0;
}
/* A classe utilitaria `.border` do bundle declara
   `border-color:#dee2e6 !important` — conferido no navegador. Contra
   !important nao existe especificidade que resolva; a unica saida e responder
   com !important. E o unico da folha inteira, e esta aqui documentado para
   nao virar precedente: se aparecer outro, o certo e olhar o bundle, nao
   empilhar !important. */
.cfy-corp .cfy-corp__reviews figure { border-color: rgba(255,255,255,.12) !important; }
.cfy-corp__reviews figure > div:first-child { display: flex; align-items: center; gap: 4px; }
.cfy-corp__reviews figure svg { width: 16px; height: 16px; }
.cfy-corp__reviews figure > div:nth-child(2) { margin-top: 20px; flex: 1; }

.cfy-corp__reviews .swiper p {
  font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.7); margin: 0;
}
.cfy-corp__reviews .swiper blockquote {
  font-size: 15px; line-height: 1.7; color: rgba(255,255,255,.92); margin: 4px 0 0;
}
.cfy-corp__reviews .swiper blockquote + p { margin-top: 18px; }

/* LINE CLAMP nas duas respostas
   O cartao tem duas perguntas fixas; a segunda ("O que mais gostou?") e onde
   o cliente escreve solto e o texto estoura. Sem limite, um depoimento longo
   define a altura de TODOS os cartoes — o Swiper iguala pelo maior.
   1a resposta = 2 linhas, 2a resposta = 5 linhas.
   `display: -webkit-box` e obrigatorio para o clamp funcionar; nao troque por
   block. `line-clamp` sem prefixo vai junto porque ja e padrao — se um dia o
   prefixado sair do Chrome, a regra continua valendo.
   Sem suporte, as duas propriedades sao ignoradas e o texto aparece inteiro:
   falha segura, nunca corta escondendo conteudo sem reticencias. */
.cfy-corp__reviews .swiper blockquote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cfy-corp__reviews .swiper blockquote:nth-of-type(1) { -webkit-line-clamp: 2; line-clamp: 2; }
.cfy-corp__reviews .swiper blockquote:nth-of-type(2) { -webkit-line-clamp: 5; line-clamp: 5; }

.cfy-corp__reviews figcaption {
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 18px; margin-top: 22px;
}
.cfy-corp__reviews figcaption p:first-child { font-size: 15px; font-weight: 600; color: #fff; }
.cfy-corp__reviews figcaption p:last-child { margin-top: 3px; font-size: 12.5px; color: rgba(255,255,255,.6); }

/* ============ reveal on scroll (progressive enhancement) ============ */
.cfy-corp[data-anim="on"] .cfy-corp__reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease;
}
.cfy-corp[data-anim="on"] .cfy-corp__reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .cfy-corp *, .cfy-corp *::before, .cfy-corp *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
  .cfy-corp[data-anim="on"] .cfy-corp__reveal { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   RESPONSIVO — breakpoints alinhados ao tema (1024 / 768 / 640)
   ========================================================================== */
@media (max-width: 1024px) {
  .cfy-corp { --sec-y: 72px; }
  .cfy-corp__hero-grid { gap: 40px; padding-block: 64px; }
  .cfy-corp__carousel { --slides: 2; --slide-gap: 24px; }
  .cfy-corp__carousel--logos { --slides: 4; --slide-gap: 32px; }
  .cfy-corp__lead-grid { grid-template-columns: 1fr; gap: 36px; }
  .cfy-corp__seals { grid-template-columns: repeat(4, 1fr); }
  .cfy-corp__rooms { grid-template-columns: repeat(2, 1fr); }
  .cfy-corp__faq { grid-template-columns: 1fr; gap: 32px; }
  .cfy-corp__split { gap: 40px; }
}

@media (max-width: 768px) {
  .cfy-corp { --sec-y: 56px; --pad-x: 20px; --r-lg: 18px; }
  .cfy-corp__hero-grid { grid-template-columns: 1fr; padding-block: 48px; gap: 36px; }
  .cfy-corp__hero-media { order: -1; }
  .cfy-corp__split { grid-template-columns: 1fr; }
  .cfy-corp__rooms { grid-template-columns: 1fr; }
  .cfy-corp__faq-list { padding: 6px 22px; }
  .cfy-corp__formslot { padding: 26px 24px 28px; }
  .cfy-corp__seals { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .cfy-corp__norm article { grid-template-columns: 1fr; gap: 12px; }
  .cfy-corp__norm span { justify-self: start; padding: 5px 18px; }
}

@media (max-width: 640px) {
  .cfy-corp__carousel { --slides: 1; --slide-gap: 20px; }
  .cfy-corp__carousel--logos { --slides: 3; --slide-gap: 24px; }
  .cfy-corp__actions .cfy-corp__btn { width: 100%; }
  .cfy-corp__faq-a { padding-right: 0; }
}

/* ==========================================================================
   11. WHATSAPP DIRETO
   --------------------------------------------------------------------------
   O Chatwoot foi retirado do <head> desta pagina, entao o canto inferior
   direito esta livre e este botao ocupa o lugar dele. Se o widget voltar,
   os dois se sobrepoem — nesse caso empilhar em bottom:98px / right:22px
   (20 da base + 64 de altura do Chatwoot + 14 de respiro; o right compensa
   a diferenca de 4px entre os diametros e alinha os centros).
   ========================================================================== */
.cfy-wa {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147482000;          /* acima de qualquer coisa do tema */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  transition: transform .18s ease, background-color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
/* especificidade dobrada: o a:visited do Luma e 0,2,0 e apagaria o icone */
.cfy-wa, .cfy-wa:visited, .cfy-wa:hover, .cfy-wa:focus { color: #fff; text-decoration: none; }
.cfy-wa:hover { background: #1EBE5A; transform: scale(1.06); }
.cfy-wa:focus-visible { outline: 3px solid #0b3d24; outline-offset: 3px; }
.cfy-wa svg { width: 32px; height: 32px; fill: currentColor; display: block; }

@media (prefers-reduced-motion: reduce) {
  .cfy-wa { transition: none; }
  .cfy-wa:hover { transform: none; }
}

@media (max-width: 768px) {
  .cfy-wa { right: 16px; bottom: 16px; width: 56px; height: 56px; }
  .cfy-wa svg { width: 29px; height: 29px; }
}

@media print { .cfy-wa { display: none; } }

/* ==========================================================================
   12. TOPBAR DO TEMA — replica minima do CSS do Swiper
   --------------------------------------------------------------------------
   Esta pagina NAO carrega o CSS do Swiper. Confirmado em producao: o bundle
   da home (5ecde26f....min.css) traz .swiper/.swiper-wrapper/.swiper-slide;
   o bundle desta pagina (bd041b18....min.css) nao traz nenhuma dessas regras.
   Resultado: o Swiper da .cmfy-topbar inicializa (tem as classes
   swiper-container-initialized) mas o wrapper fica display:block e os 5
   slides empilham na vertical — topbar com 170px em vez de ~35px.

   O certo e o layout desta pagina carregar o CSS do Swiper. Enquanto isso,
   abaixo esta so o necessario, com escopo em .cmfy-topbar para nao encostar
   nos carrosseis desta pagina (que ja funcionam).

   Valores conferidos contra a home, onde a topbar funciona:
     wrapper  display:flex  box-sizing:content-box  transition-property:transform
     slide    flex-shrink:0  width:100%  position:relative
     fade     transition-property:opacity  (o Swiper escreve opacity inline)
   ========================================================================== */
.cmfy-topbar .swiper {
  position: relative;
  overflow: hidden;
  z-index: 1;
  padding: 0;
  list-style: none;
}
.cmfy-topbar .swiper-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  height: 100%;
  box-sizing: content-box;
  transition-property: transform;
}
.cmfy-topbar .swiper-slide {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  transition-property: transform;
}
/* effect: fade — os slides se sobrepoem e o Swiper anima a opacidade */
.cmfy-topbar .swiper-container-fade .swiper-slide { pointer-events: none; transition-property: opacity; }
.cmfy-topbar .swiper-container-fade .swiper-slide-active { pointer-events: auto; }

/* ==========================================================================
   13. BREADCRUMB DO TEMA — oculto nesta pagina
   --------------------------------------------------------------------------
   `.breadcrumbs` e do tema, nao nosso. Esconder daqui e seguro porque este
   arquivo so carrega em /corporativo, e vence por ordem de origem: o <link>
   fica no corpo da pagina CMS, depois de todos os CSS do <head>.
   ATENCAO: o bloco carrega microdata de BreadcrumbList (itemtype). Escondido,
   vira dado estruturado sem conteudo visivel — ver nota no chat.
   ========================================================================== */
.breadcrumbs { display: none; }