/* ============================================================
   OrderFly - Landing Page
   Estilos idiomaticos (o CLAUDE.md isenta estilos das regras
   de notacao hungara e alinhamento vertical).
   Abordagem: mobile-first, tema escuro predominante.
   ============================================================ */

:root {
   --azul: #1E6BFF;
   --azul-claro: #4E8BFF;
   --azul-escuro: #071A3D;
   --azul-escuro-2: #04122B;
   --verde: #25D366;
   --verde-2: #72C901;
   --verde-wpp-esc: #1DB255;
   --branco: #FFFFFF;
   --cinza-claro: #F5F7FA;
   --cinza-escuro: #1D2735;

   --bg: var(--azul-escuro);
   --bg-2: #0B234C;
   --superficie: rgba(255, 255, 255, 0.04);
   --superficie-2: rgba(255, 255, 255, 0.07);
   --borda: rgba(255, 255, 255, 0.10);
   --texto: #E8EEF9;
   --texto-suave: #9FB0C9;

   --raio: 14px;
   --raio-sm: 10px;
   --raio-lg: 22px;
   --container: 1160px;
   --container-estreito: 780px;
   --header-h: 68px;

   --sombra: 0 18px 50px -20px rgba(0, 0, 0, 0.55);
   --transicao: 0.2s ease;

   --fonte-tit: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   --fonte-txt: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

html {
   scroll-behavior: smooth;
   scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
   margin: 0;
   font-family: var(--fonte-txt);
   font-size: 16px;
   line-height: 1.65;
   color: var(--texto);
   background: var(--bg);
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden;
}

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

a {
   color: inherit;
   text-decoration: none;
}

h1,
h2,
h3 {
   font-family: var(--fonte-tit);
   line-height: 1.2;
   margin: 0;
   font-weight: 700;
}

ul,
ol {
   margin: 0;
   padding-left: 1.2rem;
}

.lista-limpa {
   list-style: none;
   padding: 0;
   margin: 0;
}

@media (prefers-reduced-motion: reduce) {
   html {
      scroll-behavior: auto;
   }

   * {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
   }
}

/* ---------- Utilitarios de layout ---------- */

.container {
   width: 100%;
   max-width: var(--container);
   margin: 0 auto;
   padding: 0 20px;
}

.container--estreito {
   max-width: var(--container-estreito);
}

.skip-link {
   position: absolute;
   left: 12px;
   top: -60px;
   z-index: 200;
   background: var(--azul);
   color: #fff;
   padding: 10px 16px;
   border-radius: var(--raio-sm);
   transition: top var(--transicao);
}

.skip-link:focus {
   top: 12px;
}

:focus-visible {
   outline: 2px solid var(--verde-2);
   outline-offset: 3px;
   border-radius: 4px;
}

.txt-verde {
   color: var(--verde-2);
}

/* ---------- Botoes ---------- */

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   font-family: var(--fonte-tit);
   font-weight: 600;
   font-size: 0.95rem;
   line-height: 1;
   padding: 14px 24px;
   border-radius: 999px;
   border: 1px solid transparent;
   cursor: pointer;
   transition: transform var(--transicao), background var(--transicao), border-color var(--transicao);
   text-align: center;
}

.btn:hover {
   transform: translateY(-2px);
}

.btn--primary {
   background: var(--azul);
   color: #fff;
}

.btn--primary:hover {
   background: var(--azul-claro);
}

.btn--ghost {
   background: transparent;
   border-color: var(--borda);
   color: var(--texto);
}

.btn--ghost:hover {
   border-color: var(--azul-claro);
}

.btn--wpp {
   background: var(--verde);
   color: #04240f;
}

.btn--wpp:hover {
   background: var(--verde-wpp-esc);
}

.btn--sm {
   padding: 10px 18px;
   font-size: 0.85rem;
}

/* ---------- Header ---------- */

.hdr {
   position: fixed;
   inset: 0 0 auto 0;
   z-index: 100;
   height: var(--header-h);
   background: rgba(7, 26, 61, 0.72);
   backdrop-filter: blur(12px);
   border-bottom: 1px solid transparent;
   transition: background var(--transicao), border-color var(--transicao);
}

.hdr.is-scrolled {
   background: rgba(4, 18, 43, 0.92);
   border-bottom-color: var(--borda);
}

.hdr__inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 100%;
}

.brand {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-family: var(--fonte-tit);
   font-weight: 700;
}

.brand__mark {
   width: 34px;
   height: 34px;
}

.brand__name {
   font-size: 1.25rem;
   letter-spacing: -0.01em;
}

.brand__name--o {
   color: #C6D2E6;
}

.brand__name--f {
   color: var(--azul-claro);
}

.nav {
   display: flex;
   align-items: center;
   gap: 26px;
}

.nav__list {
   display: flex;
   align-items: center;
   gap: 22px;
   list-style: none;
   margin: 0;
   padding: 0;
}

.nav__lnk {
   font-size: 0.9rem;
   color: var(--texto-suave);
   padding: 6px 2px;
   border-bottom: 2px solid transparent;
   transition: color var(--transicao), border-color var(--transicao);
}

.nav__lnk:hover {
   color: var(--texto);
}

.nav__lnk.is-active {
   color: #fff;
   border-bottom-color: var(--verde-2);
}

.nav-toggle {
   display: none;
   width: 42px;
   height: 42px;
   border: 1px solid var(--borda);
   border-radius: var(--raio-sm);
   background: var(--superficie);
   cursor: pointer;
   padding: 0;
}

.nav-toggle__bar {
   display: block;
   width: 18px;
   height: 2px;
   margin: 4px auto;
   background: var(--texto);
   transition: transform var(--transicao), opacity var(--transicao);
}

/* ---------- Secoes ---------- */

.sec {
   padding: 84px 0;
   position: relative;
}

.sec--claro {
   background: var(--bg-2);
}

.sec__titulo {
   font-size: clamp(1.6rem, 4vw, 2.3rem);
   max-width: 22ch;
   margin-bottom: 14px;
}

.sec__intro {
   color: var(--texto-suave);
   max-width: 62ch;
   margin: 0 0 34px;
}

.eyebrow {
   font-family: var(--fonte-tit);
   text-transform: uppercase;
   letter-spacing: 0.16em;
   font-size: 0.72rem;
   font-weight: 600;
   color: var(--azul-claro);
   margin: 0 0 12px;
}

.bloco-cta {
   margin-top: 34px;
}

/* ---------- Hero ---------- */

.sec--hero {
   padding-top: calc(var(--header-h) + 56px);
   background:
      radial-gradient(60% 50% at 80% 0%, rgba(30, 107, 255, 0.22), transparent 70%),
      radial-gradient(45% 40% at 10% 20%, rgba(94, 242, 161, 0.10), transparent 70%),
      var(--bg);
}

.hero__grid {
   display: grid;
   gap: 44px;
}

.hero__texto {
   max-width: 760px;
   margin: 0 auto;
   text-align: center;
}

.hero__titulo {
   font-size: clamp(1.9rem, 7vw, 2.6rem);
   font-weight: 800;
   line-height: 1.12;
   letter-spacing: -0.02em;
   margin-bottom: 18px;
}

/* Em telas largas o titulo cabe em uma unica linha */
@media (min-width: 1000px) {
   .hero__texto {
      max-width: 1160px;
   }

   .hero__titulo {
      white-space: nowrap;
      font-size: min(3vw, 2.55rem);
   }
}

.hero__sub {
   font-size: 1.08rem;
   color: var(--texto-suave);
   margin: 0 auto 30px;
   max-width: 540px;
}

.hero__acoes {
   display: flex;
   flex-wrap: wrap;
   gap: 14px;
   justify-content: center;
}

.hero__frase {
   margin-top: 28px;
   font-family: var(--fonte-tit);
   font-size: 1rem;
   color: var(--texto);
}

.hero__frase strong {
   color: var(--verde-2);
}

/* ---------- Secao 1: problema + comparativo (design secao1.jpg) ---------- */

.secao1 {
   margin-top: 96px;
}

.secao1__topo {
   display: grid;
   gap: 40px;
}

.prob .eyebrow {
   color: #8AA1C6;
}

.prob__tit {
   font-size: clamp(1.7rem, 4.4vw, 2.45rem);
   font-weight: 800;
   line-height: 1.12;
   letter-spacing: -0.02em;
   margin-bottom: 22px;
   padding-bottom: 18px;
   position: relative;
}

.prob__tit::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: 0;
   width: 64px;
   height: 4px;
   border-radius: 999px;
   background: var(--azul);
}

.prob__txt {
   color: var(--texto-suave);
   max-width: 46ch;
   margin: 0 0 28px;
   font-size: 1.02rem;
}

.perdas {
   background: var(--superficie);
   border: 1px solid var(--borda);
   border-radius: var(--raio-lg);
   padding: 22px;
}

.perdas__tit {
   font-family: var(--fonte-tit);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   font-size: 0.74rem;
   color: var(--texto-suave);
   margin: 0 0 18px;
}

.perdas__lista {
   display: grid;
   gap: 18px 12px;
   grid-template-columns: repeat(2, 1fr);
}

.perdas__lista li {
   display: flex;
   flex-direction: column;
   gap: 8px;
   font-family: var(--fonte-tit);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   font-size: 0.72rem;
   color: var(--texto);
}

.perdas__ic {
   width: 30px;
   height: 30px;
   stroke: var(--verde-2);
   stroke-width: 1.7;
   stroke-linecap: round;
   stroke-linejoin: round;
}

/* ---------- Cards ---------- */

.cards {
   display: grid;
   gap: 18px;
   grid-template-columns: 1fr;
   margin-top: 8px;
}

.card {
   background: var(--superficie);
   border: 1px solid var(--borda);
   border-radius: var(--raio);
   padding: 22px;
   transition: transform var(--transicao), border-color var(--transicao);
}

.card:hover {
   transform: translateY(-3px);
   border-color: rgba(30, 107, 255, 0.5);
}

.card__ic {
   font-size: 1.5rem;
   display: block;
   margin-bottom: 10px;
}

.card__tit {
   font-size: 1.02rem;
   margin-bottom: 6px;
}

.card__txt {
   color: var(--texto-suave);
   font-size: 0.92rem;
   margin: 0;
}

/* ---------- Secao 1: comparativo Sem / Com ---------- */

.cmp {
   display: grid;
   gap: 66px;
   align-items: stretch;
   grid-auto-rows: 1fr;
   position: relative;
   padding-top: 54px;
}

.cmp__col {
   position: relative;
   border-radius: var(--raio-lg);
   padding: 26px 18px 24px;
}

.cmp__col--sem {
   background: #0b0b14;
}

.cmp__col--com {
   background: linear-gradient(180deg, #103369, #0a1f43);
   border: 1px solid rgba(30, 107, 255, 0.28);
}

.cmp__cab {
   font-family: var(--fonte-tit);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   font-size: 0.78rem;
   color: #fff;
   text-align: center;
   padding: 8px 16px;
   border-radius: 999px;
   margin: 0;
   white-space: nowrap;
   position: absolute;
   top: -48px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 2;
}

.cmp__cab--sem {
   background: #050d1f;
}

.cmp__cab--sem b {
   color: #FF6B6B;
   font-weight: 700;
}

.cmp__cab--com {
   background: var(--azul);
}

.cmp__cab--com b {
   color: #BCD5FF;
   font-weight: 700;
}

.cmp__lista {
   display: grid;
   gap: 30px;
}

.cmp__passo {
   display: grid;
   justify-items: center;
   gap: 10px;
   text-align: center;
   position: relative;
}

/* Cada passo: icone -> titulo -> tracos (segmento tracejado curto no vao ate o proximo) */
.cmp__passo:not(:last-child)::after {
   content: "";
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   bottom: -20px;
   width: 2px;
   height: 12px;
   background: repeating-linear-gradient(rgba(255, 255, 255, 0.28) 0 3px, transparent 3px 7px);
}

.cmp__ic {
   position: relative;
   width: 52px;
   height: 52px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   background: #fff;
   color: var(--azul);
   box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.45);
}

/* Modificadores --on / --wpp mantidos para o markup; visual e o mesmo:
   bolinha branca com icone azul nas duas colunas. */
.cmp__ic--on,
.cmp__ic--wpp {
   background: #fff;
   color: var(--azul);
}

.cmp__ic--on {
   box-shadow: 0 0 0 6px rgba(30, 107, 255, 0.12), 0 8px 20px -8px rgba(30, 107, 255, 0.45);
}

.cmp__ic svg {
   width: 25px;
   height: 25px;
}

.cmp__ic svg[fill="none"] {
   stroke: currentColor;
   stroke-width: 1.9;
   stroke-linecap: round;
   stroke-linejoin: round;
}

.cmp__ic img {
   width: 26px;
   height: 26px;
}

.cmp__badge {
   position: absolute;
   right: -4px;
   bottom: -4px;
   width: 18px;
   height: 18px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   font-size: 0.7rem;
   font-weight: 700;
   border: 2px solid var(--bg);
   line-height: 1;
}

.cmp__badge--x {
   background: #FF5A5A;
   color: #fff;
}

.cmp__badge--ok {
   background: var(--verde);
   color: #04240f;
}

.cmp__cap {
   font-size: 0.82rem;
   color: var(--texto-suave);
   max-width: 22ch;
}

.cmp__seta {
   display: none;
   place-items: center;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: #fff;
   box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.5);
   z-index: 6;
   color: var(--azul-escuro);
   align-self: center;
}

.cmp__seta svg {
   width: 20px;
   height: 20px;
   stroke: currentColor;
   stroke-width: 2.4;
   stroke-linecap: round;
   stroke-linejoin: round;
}

/* ---------- Secao 1: motor de crescimento + selos ---------- */

.motor {
   margin-top: 44px;
   display: grid;
   gap: 14px;
   align-items: center;
}

.motor__ic {
   width: 46px;
   height: 46px;
   padding: 11px;
   border-radius: 13px;
   background: var(--azul);
   stroke: #fff;
   stroke-width: 1.7;
   flex: none;
}

.motor__frase {
   font-family: var(--fonte-tit);
   font-weight: 700;
   font-size: 1.15rem;
   margin: 0;
}

.motor__assin {
   color: var(--texto-suave);
   font-size: 0.92rem;
   margin: 0;
}

.motor__marca {
   color: var(--azul-claro);
   font-family: var(--fonte-tit);
   font-weight: 700;
}

.selos {
   margin-top: 26px;
   display: grid;
   gap: 18px;
   grid-template-columns: 1fr;
   border: 1px solid var(--borda);
   border-radius: var(--raio-lg);
   padding: 22px 24px;
}

.selo {
   display: flex;
   gap: 12px;
   align-items: flex-start;
}

.selo__ic {
   width: 26px;
   height: 26px;
   flex: none;
   stroke: var(--verde-2);
   stroke-width: 1.8;
   stroke-linecap: round;
   stroke-linejoin: round;
   margin-top: 2px;
}

.selo:nth-child(odd) .selo__ic {
   stroke: var(--azul-claro);
}

.selo__txt {
   display: grid;
   gap: 2px;
}

.selo__txt strong {
   font-family: var(--fonte-tit);
   text-transform: uppercase;
   letter-spacing: 0.06em;
   font-size: 0.78rem;
}

.selo__txt span {
   color: var(--texto-suave);
   font-size: 0.85rem;
}

/* ---------- Etapas (como funciona) ---------- */

.etapas {
   display: grid;
   gap: 18px;
   grid-template-columns: 1fr;
   margin-top: 8px;
}

.etapa {
   background: var(--superficie);
   border: 1px solid var(--borda);
   border-radius: var(--raio);
   padding: 24px;
   position: relative;
}

.etapa__num {
   display: grid;
   place-items: center;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--azul), var(--verde-2));
   color: #04122B;
   font-family: var(--fonte-tit);
   font-weight: 800;
   margin-bottom: 12px;
}

.etapa__tit {
   font-size: 1.05rem;
   margin-bottom: 6px;
}

.etapa__txt {
   color: var(--texto-suave);
   font-size: 0.92rem;
   margin: 0;
}

/* ---------- Demonstracao ---------- */

.demo {
   margin-top: 56px;
   text-align: center;
}

.demo__tit {
   font-size: 1.35rem;
   margin-bottom: 20px;
}

.demo__video {
   max-width: 760px;
   margin: 0 auto 22px;
}

.demo__ph {
   aspect-ratio: 16 / 9;
   border-radius: var(--raio);
   border: 1px dashed var(--borda);
   background: var(--superficie);
   display: grid;
   place-content: center;
   gap: 8px;
   color: var(--texto-suave);
}

.demo__ph span {
   font-size: 2rem;
}

/* ---------- Beneficios / publicos / quem e ---------- */

.beneficios {
   display: grid;
   gap: 10px 24px;
   grid-template-columns: 1fr;
   margin-bottom: 44px;
}

.beneficios li {
   position: relative;
   padding-left: 26px;
   color: var(--texto-suave);
}

.beneficios li::before {
   content: "\2713";
   position: absolute;
   left: 0;
   color: var(--verde-2);
   font-weight: 700;
}

.publicos {
   display: grid;
   gap: 18px;
   grid-template-columns: 1fr;
   margin-bottom: 44px;
}

.publico {
   background: var(--superficie);
   border: 1px solid var(--borda);
   border-radius: var(--raio);
   padding: 24px;
}

.publico__tit {
   font-size: 1.05rem;
   margin-bottom: 12px;
   color: var(--azul-claro);
}

.publico ul {
   display: grid;
   gap: 8px;
}

.publico li {
   font-size: 0.9rem;
   color: var(--texto-suave);
}

.quem-e__tit {
   font-size: 1.15rem;
   margin-bottom: 16px;
}

.tags {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

.tags li {
   background: var(--superficie-2);
   border: 1px solid var(--borda);
   border-radius: 999px;
   padding: 8px 16px;
   font-size: 0.85rem;
   font-family: var(--fonte-tit);
   font-weight: 500;
}

/* ---------- Integracoes ---------- */

.info {
   display: grid;
   gap: 12px;
}

.info li {
   position: relative;
   padding-left: 28px;
   color: var(--texto-suave);
}

.info li::before {
   content: "\2192";
   position: absolute;
   left: 0;
   color: var(--azul-claro);
   font-weight: 700;
}

/* ---------- Sobre / valores ---------- */

.valores {
   display: grid;
   gap: 14px;
   grid-template-columns: 1fr;
   margin-bottom: 48px;
}

.valores li {
   background: var(--superficie);
   border: 1px solid var(--borda);
   border-radius: var(--raio-sm);
   padding: 16px 18px;
   display: flex;
   flex-direction: column;
   gap: 2px;
}

.valores strong {
   font-family: var(--fonte-tit);
   color: #fff;
}

.valores span {
   color: var(--texto-suave);
   font-size: 0.88rem;
}

/* ---------- FAQ ---------- */

.faq {
   max-width: 760px;
}

.faq__tit {
   font-size: 1.3rem;
   margin-bottom: 18px;
}

.faq__item {
   border-bottom: 1px solid var(--borda);
}

.faq__q {
   width: 100%;
   text-align: left;
   background: transparent;
   border: 0;
   color: var(--texto);
   font-family: var(--fonte-tit);
   font-weight: 600;
   font-size: 1rem;
   padding: 18px 40px 18px 0;
   position: relative;
   cursor: pointer;
}

.faq__q::after {
   content: "+";
   position: absolute;
   right: 6px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 1.3rem;
   color: var(--azul-claro);
   transition: transform var(--transicao);
}

.faq__q[aria-expanded="true"]::after {
   transform: translateY(-50%) rotate(45deg);
}

.faq__a {
   overflow: hidden;
   max-height: 0;
   transition: max-height var(--transicao);
}

.faq__a p {
   color: var(--texto-suave);
   font-size: 0.92rem;
   margin: 0 0 18px;
}

/* ---------- Contato ---------- */

.sec--contato {
   background:
      radial-gradient(50% 60% at 90% 10%, rgba(30, 107, 255, 0.18), transparent 70%),
      var(--bg-2);
}

.contato__grid {
   display: grid;
   gap: 28px;
   grid-template-columns: 1fr;
}

.contato__dados {
   background: var(--superficie);
   border: 1px solid var(--borda);
   border-radius: var(--raio-lg);
   padding: 28px;
   height: fit-content;
}

.contato__dados h3 {
   font-size: 1.1rem;
   margin-bottom: 16px;
}

.contato__dados ul {
   display: grid;
   gap: 14px;
   margin-bottom: 22px;
}

.contato__dados li {
   display: grid;
   gap: 2px;
}

.contato__dados li span {
   font-size: 0.75rem;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   color: var(--texto-suave);
}

.contato__dados li a {
   color: var(--azul-claro);
}

/* ---------- Formulario ---------- */

.form {
   background: var(--superficie);
   border: 1px solid var(--borda);
   border-radius: var(--raio-lg);
   padding: 28px;
}

.form__tit {
   font-size: 1.2rem;
   margin-bottom: 18px;
}

.form__hp {
   position: absolute;
   left: -9999px;
   width: 1px;
   height: 1px;
   overflow: hidden;
}

.form__linha {
   display: grid;
   gap: 16px;
   grid-template-columns: 1fr;
   margin-bottom: 16px;
}

.field {
   display: grid;
   gap: 6px;
   font-size: 0.85rem;
}

.field > span {
   color: var(--texto-suave);
}

.field input,
.field select,
.field textarea {
   width: 100%;
   font-family: var(--fonte-txt);
   font-size: 0.95rem;
   color: var(--texto);
   background: var(--azul-escuro-2);
   border: 1px solid var(--borda);
   border-radius: var(--raio-sm);
   padding: 12px 14px;
   transition: border-color var(--transicao);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
   outline: none;
   border-color: var(--azul);
}

.field textarea {
   resize: vertical;
}

.field--check {
   flex-direction: row;
   display: flex;
   gap: 10px;
   align-items: flex-start;
   margin: 4px 0 18px;
   font-size: 0.82rem;
   color: var(--texto-suave);
}

.field--check input {
   width: 18px;
   height: 18px;
   flex: none;
   margin-top: 2px;
}

.field--check a {
   color: var(--azul-claro);
}

.form__enviar {
   width: 100%;
}

.form__nota {
   text-align: center;
   font-size: 0.8rem;
   color: var(--texto-suave);
   margin: 12px 0 0;
}

.form.is-invalid .field input:invalid,
.form.is-invalid .field select:invalid,
.form.is-invalid .field textarea:invalid {
   border-color: #FF6B6B;
}

/* ---------- Rodape ---------- */

.rodape {
   background: var(--azul-escuro-2);
   border-top: 1px solid var(--borda);
   padding: 48px 0 28px;
}

.rodape__grid {
   display: grid;
   gap: 26px;
   grid-template-columns: 1fr;
}

.rodape__marca p {
   color: var(--texto-suave);
   font-size: 0.9rem;
   margin: 12px 0 0;
}

.rodape__nav,
.rodape__legal {
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.rodape__nav a,
.rodape__legal a {
   color: var(--texto-suave);
   font-size: 0.88rem;
}

.rodape__nav a:hover,
.rodape__legal a:hover {
   color: var(--texto);
}

.rodape__link-botao {
   background: none;
   border: 0;
   color: var(--texto-suave);
   font: inherit;
   font-size: 0.88rem;
   text-align: left;
   padding: 0;
   cursor: pointer;
}

.rodape__link-botao:hover {
   color: var(--texto);
}

.rodape__base {
   margin-top: 30px;
   padding-top: 20px;
   border-top: 1px solid var(--borda);
}

.rodape__base p {
   color: var(--texto-suave);
   font-size: 0.8rem;
   margin: 0;
}

/* ---------- WhatsApp flutuante ---------- */

.wpp-float {
   position: fixed;
   right: 18px;
   bottom: 18px;
   z-index: 90;
   width: 56px;
   height: 56px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   background: var(--verde);
   color: #04240f;
   box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.5);
   transition: transform var(--transicao);
}

.wpp-float:hover {
   transform: scale(1.08);
}

/* ---------- Banner de cookies ---------- */

.cookie {
   position: fixed;
   left: 12px;
   right: 12px;
   bottom: 12px;
   z-index: 120;
   background: var(--azul-escuro-2);
   border: 1px solid var(--borda);
   border-radius: var(--raio);
   padding: 18px;
   box-shadow: var(--sombra);
   display: grid;
   gap: 14px;
}

.cookie__txt {
   margin: 0;
   font-size: 0.85rem;
   color: var(--texto-suave);
}

.cookie__txt a {
   color: var(--azul-claro);
}

.cookie__acoes {
   display: flex;
   gap: 10px;
   justify-content: flex-end;
}

/* ============================================================
   BREAKPOINTS
   ============================================================ */

@media (min-width: 620px) {
   .cards--4 {
      grid-template-columns: repeat(2, 1fr);
   }

   .perdas__lista {
      grid-template-columns: repeat(4, 1fr);
   }

   .selos {
      grid-template-columns: repeat(2, 1fr);
   }

   .publicos {
      grid-template-columns: repeat(3, 1fr);
   }

   .beneficios {
      grid-template-columns: repeat(2, 1fr);
   }

   .form__linha {
      grid-template-columns: 1fr 1fr;
   }

   .valores {
      grid-template-columns: repeat(2, 1fr);
   }

   .cookie {
      left: auto;
      right: 18px;
      max-width: 420px;
   }
}

@media (min-width: 900px) {
   .etapas {
      grid-template-columns: repeat(5, 1fr);
   }

   .cards--4 {
      grid-template-columns: repeat(4, 1fr);
   }

   .secao1__topo {
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: start;
   }

   .cmp {
      grid-template-columns: 1fr 1fr;
      gap: 0;
   }

   /* Colunas coladas: some com o arredondamento do lado interno */
   .cmp__col--sem {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
   }

   .cmp__col--com {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-left: 0;
   }

   .cmp__seta {
      display: grid;
      position: absolute;
      left: 50%;
      top: 46%;
      transform: translate(-50%, -50%);
   }

   .motor {
      grid-template-columns: auto 1fr auto;
      gap: 26px;
   }

   .motor__assin {
      border-left: 1px solid var(--borda);
      padding-left: 26px;
   }

   .selos {
      grid-template-columns: repeat(4, 1fr);
   }

   .beneficios {
      grid-template-columns: repeat(3, 1fr);
   }

   .valores {
      grid-template-columns: repeat(5, 1fr);
   }

   .contato__grid {
      grid-template-columns: 0.8fr 1.2fr;
      align-items: start;
   }

   .rodape__grid {
      grid-template-columns: 1.4fr 1fr 1fr;
   }
}

/* ---------- Menu mobile ---------- */

@media (max-width: 899px) {
   .nav-toggle {
      display: block;
   }

   .nav {
      position: fixed;
      inset: var(--header-h) 0 auto 0;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      background: var(--azul-escuro-2);
      border-bottom: 1px solid var(--borda);
      padding: 12px 20px 22px;
      transform: translateY(-120%);
      transition: transform 0.28s ease;
      max-height: calc(100vh - var(--header-h));
      overflow-y: auto;
   }

   .nav.is-open {
      transform: translateY(0);
   }

   .nav__list {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
   }

   .nav__lnk {
      display: block;
      padding: 14px 0;
      border-bottom: 1px solid var(--borda);
      font-size: 1rem;
   }

   .nav__lnk.is-active {
      border-bottom-color: var(--borda);
      color: var(--verde-2);
   }

   .nav__cta {
      margin-top: 16px;
      width: 100%;
   }

   .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
      transform: translateY(6px) rotate(45deg);
   }

   .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
      opacity: 0;
   }

   .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
      transform: translateY(-6px) rotate(-45deg);
   }
}