/* ============================================================
   MOVEMENTE — CSS COMPLETO v5
   Cobre: Home, Página Produto (nativa + custom sf01-*)
   Header, Banner, Home, Produto, Rodapé — identidade Movemente
   Paleta: #2C82B5 | #0A4A85 | #E9C955 | #F95738 | #F1F1F1
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&display=swap');

/* ── VARIÁVEIS ─────────────────────────────────────────────── */
:root {
  --mv-azul:    #2C82B5;
  --mv-esc:     #0A4A85;
  --mv-amarelo: #E9C955;
  --mv-laranja: #F95738;
  --mv-off:     #F1F1F1;
  --mv-branco:  #FFFFFF;
  --mv-texto:   #1A2E44;
  --mv-suave:   #4A6580;
  --mv-borda:   rgba(44,130,181,.13);

  --font-h: 'Sora', sans-serif;
  --font-b: 'DM Sans', sans-serif;

  --r-sm:  8px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-xl:  40px;

  --sh:     0 4px 24px rgba(10,74,133,.09);
  --sh2:    0 12px 40px rgba(10,74,133,.17);
  --sh-cta: 0 6px 24px rgba(249,87,56,.38);
  --tr:     .3s cubic-bezier(.4,0,.2,1);
}

/* ── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-b);
  color: var(--mv-texto);
  background: var(--mv-branco);
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
}
img { max-width: 100%; height: auto; display: block; }
a   { text-decoration: none; color: inherit; }

/* ============================================================
   BANNER PRINCIPAL — FULL WIDTH (v3 mantido)
   ============================================================ */
#nav-main .element-banner-main,
#content-main {
  margin: 0 !important;
}
#nav-main .element-banner-main .container-12,
#content-main .container-12 {
  max-width: none;
}
#nav-main .element-banner-main .container-12 .grid-12,
#content-main .container-12 .grid-12 {
  width: 100%;
  margin: 0;
}

.element-banner-main {
/*  width: 100vw !important;*/
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  overflow: hidden !important;
  position: relative !important;
}
.banner-main-item img {
  width: 100% !important;
  max-width: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* ============================================================
   HEADER / MENU (v3 mantido)
   ============================================================ */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--mv-branco);
  box-shadow: 0 2px 16px rgba(10,74,133,.10);
}

.header-1 .container-12 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  height: 76px !important;
}

.grid-logo, .element-logo, .grid-3.grid-logo {
  flex: 0 0 auto !important;
  width: auto !important;
  float: none !important;
}

.logo img {
  height: 44px !important;
  width: auto !important;
  transition: opacity var(--tr);
}
.logo img:hover { opacity: .82; }

.element-menu-top,
.grid-9.grid-menu-top {
  flex: 1 1 auto !important;
  width: auto !important;
  float: none !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

.menu-top-list {
  display: flex !important;
  align-items: center !important;
  list-style: none !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-content: flex-end !important;
}

.menu-top-list li { position: relative; }

.menu-top-list li a {
  font-family: var(--font-h) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--mv-esc) !important;
  padding: 8px 13px !important;
  border-radius: var(--r-sm) !important;
  transition: all var(--tr) !important;
  display: block !important;
  white-space: nowrap !important;
  position: relative !important;
}

.menu-top-list li a::after {
  content: '' !important;
  position: absolute !important;
  bottom: 3px !important;
  left: 13px !important;
  right: 13px !important;
  height: 2px !important;
  background: var(--mv-azul) !important;
  border-radius: 2px !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform var(--tr) !important;
}

.menu-top-list li a:hover {
  color: var(--mv-azul) !important;
  background: rgba(44,130,181,.08) !important;
}
.menu-top-list li a:hover::after { transform: scaleX(1) !important; }

.menu-top-list li:last-child a {
  background: var(--mv-laranja) !important;
  color: var(--mv-branco) !important;
  border-radius: var(--r-xl) !important;
  padding: 9px 20px !important;
  font-weight: 700 !important;
  box-shadow: 0 3px 14px rgba(249,87,56,.30) !important;
}
.menu-top-list li:last-child a::after { display: none !important; }
.menu-top-list li:last-child a:hover {
  background: #e0472a !important;
  transform: translateY(-1px) !important;
  box-shadow: var(--sh-cta) !important;
}

.header-1 .clear { display: none !important; }

/* ============================================================
   BANNER-SHOP — wrapper
   ============================================================ */
.element-banner-main .bx-wrapper {
	max-width: none!important;
    margin: 0!important;
}
.element-banner-shop,
.banner-shop-inner {
  background: var(--mv-branco);
  padding: 0;
  margin: 0;
}

.element-banner-main .bx-wrapper .bx-controls-direction a {
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

#banner-shop {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#banner-shop > li {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================================
   SF01-CONTAINER
   ============================================================ */
.sf01-container {
  font-family: var(--font-b);
  background: var(--mv-branco);
}

/* ── TAG (label de seção) ────────────────────────────────── */
.sf01-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-h);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--mv-azul);
  margin-bottom: 14px;
}

.sf01-tag::before {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--mv-amarelo);
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── TÍTULO PADRÃO ───────────────────────────────────────── */
.sf01-title {
  font-family: var(--font-h);
  font-weight: 800;
  line-height: 1.2;
  color: var(--mv-esc);
  margin-bottom: 16px;
}

/* ── TEXTO PADRÃO ────────────────────────────────────────── */
.sf01-text {
  font-size: 16px;
  color: var(--mv-suave);
  line-height: 1.75;
  margin: 0;
}

/* ============================================================
   SEÇÃO HERO — PROBLEMA
   Fundo off-white | centralizado | padding 72px
   ============================================================ */
.sf01-hero {
  background: var(--mv-off);
  padding: 72px 32px 64px;
  text-align: center;
}

.sf01-hero .sf01-title {
  font-size: clamp(24px, 3vw, 38px);
  max-width: 680px;
  margin: 0 auto 16px;
}

.sf01-subtitle {
  font-size: 16px;
  color: var(--mv-suave);
  max-width: 580px;
  margin: 0 auto 48px;
  line-height: 1.75;
}

/* Grid 4 cards */
.sf01-hero-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1136px;
  margin: 0 auto;
}

.btn {
    border-radius: 40px;
}

.sf01-card {
  background: var(--mv-branco);
  border-radius: var(--r-md);
  padding: 22px 20px;
  box-shadow: var(--sh);
  border: 1px solid var(--mv-borda);
  text-align: left;
  transition: all var(--tr);
  position: relative;
  overflow: hidden;
}

.sf01-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mv-azul), var(--mv-amarelo));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tr);
}

.sf01-card:hover { transform: translateY(-5px); box-shadow: var(--sh2); }
.sf01-card:hover::before { transform: scaleX(1); }

.sf01-card-number {
  font-family: var(--font-h);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--mv-azul);
  background: rgba(44,130,181,.10);
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.sf01-card-text {
  font-family: var(--font-h);
  font-size: 15px;
  font-weight: 600;
  color: var(--mv-esc);
  margin: 0;
  line-height: 1.45;
}

/* ============================================================
   SEÇÃO PRODUTO
   2 colunas: imagem esquerda, texto direita
   Fundo branco | max-width 1200px centralizado
   ============================================================ */
.sf01-product {
  background: var(--mv-branco);
  padding: 80px 0;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  padding-left: 32px;
  padding-right: 32px;
}

/* Imagem */
.sf01-product-image {
  background: #edf2f7;
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 360px;
  box-shadow: var(--sh);
}

.sf01-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-lg);
  display: block;
}

/* Conteúdo texto */
.sf01-product-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sf01-product-content .sf01-title {
  font-size: clamp(26px, 3vw, 40px);
  margin-bottom: 12px;
}

.sf01-product-content .sf01-text {
  margin-bottom: 24px;
}

/* Bullets */
.sf01-list {
  list-style: none !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 28px !important;
  padding: 0 !important;
  width: 100%;
}

.sf01-list-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--mv-texto) !important;
}

.sf01-list-item > i {
  font-size: 16px !important;
  color: var(--mv-azul) !important;
  flex-shrink: 0 !important;
  width: 20px !important;
  text-align: center !important;
}

/* Botão laranja */
.sf01-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-h);
  font-size: 15px;
  font-weight: 700;
  background: var(--mv-laranja);
  color: var(--mv-branco) !important;
  border-radius: var(--r-xl);
  padding: 13px 28px;
  box-shadow: 0 4px 18px rgba(249,87,56,.35);
  transition: all var(--tr);
  margin-top: 4px;
}

.sf01-button:hover {
  background: #e0472a;
  transform: translateY(-2px);
  box-shadow: var(--sh-cta);
  color: var(--mv-branco) !important;
}

.sf01-button i {
  font-size: 13px;
  transition: transform var(--tr);
}
.sf01-button:hover i { transform: translateX(3px); }

/* ============================================================
   SEÇÃO BENEFÍCIOS
   Fundo branco | centralizado | grid 4 + galeria 3
   ============================================================ */
.sf01-benefits {
  background: var(--mv-branco);
  padding: 80px 32px;
  text-align: center;
}

.sf01-benefits .sf01-tag { color: var(--mv-azul); }

.sf01-benefits .sf01-title {
  font-size: clamp(24px, 3vw, 38px);
  max-width: 700px;
  margin: 0 auto 40px;
}

/* Grid 4 cards benefício */
.sf01-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1136px;
  margin: 0 auto;
}

.sf01-benefit-item {
  background: var(--mv-branco);
  border-radius: var(--r-md);
  padding: 26px 22px;
  box-shadow: var(--sh);
  border: 1px solid var(--mv-borda);
  text-align: left;
  transition: all var(--tr);
  position: relative;
  overflow: hidden;
}

.sf01-benefit-item::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--mv-amarelo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tr);
}

.sf01-benefit-item:hover { transform: translateY(-5px); box-shadow: var(--sh2); }
.sf01-benefit-item:hover::after { transform: scaleX(1); }

/* Ícone FA — quadrado laranja */
.sf01-benefit-item > i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--mv-laranja);
  color: var(--mv-branco);
  border-radius: var(--r-sm);
  font-size: 20px;
  margin-bottom: 16px;
  transition: transform var(--tr);
  float: none;
}

.sf01-benefit-item:hover > i { transform: scale(1.08) rotate(-4deg); }

.sf01-benefit-title {
  font-family: var(--font-h);
  font-size: 17px;
  font-weight: 700;
  color: var(--mv-esc);
  margin-bottom: 8px;
  line-height: 1.3;
}

.sf01-benefit-text {
  font-size: 14px;
  color: var(--mv-suave);
  line-height: 1.65;
  margin: 0 !important;
}

/* Galeria 3 fotos */
.sf01-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1136px;
  margin: 32px auto 0;
}

.sf01-gallery-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--r-md);
  display: block;
  transition: transform var(--tr);
}
.sf01-gallery-img:hover { transform: scale(1.025); }

/* ============================================================
   SEÇÃO PARA QUEM É
   Fundo azul escuro | centralizado | grid 3x2
   ============================================================ */
.sf01-audience {
  background: var(--mv-esc);
  padding: 80px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.sf01-audience::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(44,130,181,.35) 0%, transparent 65%);
  pointer-events: none;
}

.sf01-audience .sf01-tag {
  color: var(--mv-amarelo);
  position: relative;
  z-index: 1;
}
.sf01-audience .sf01-tag::before { background: var(--mv-amarelo); }

.sf01-audience .sf01-title {
  color: var(--mv-branco);
  font-size: clamp(24px, 3vw, 38px);
  max-width: 700px;
  margin: 0 auto 36px;
  position: relative;
  z-index: 1;
}

/* Grid 3 colunas × 2 linhas */
.sf01-audience-list {
  list-style: none !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px !important;
  max-width: 860px !important;
  margin: 0 auto 32px !important;
  padding: 0 !important;
  position: relative;
  z-index: 1;
}

.sf01-audience-item {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  border-radius: var(--r-md) !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-family: var(--font-h) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--mv-branco) !important;
  transition: all var(--tr) !important;
  cursor: default !important;
  text-align: left !important;
}

.sf01-audience-item:hover {
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(233,201,85,.40) !important;
  transform: translateY(-2px) !important;
}

/* Ícone FA — círculo azul translúcido */
.sf01-audience-item > i {
  font-size: 17px !important;
  color: var(--mv-amarelo) !important;
  width: 36px !important;
  height: 36px !important;
  background: rgba(44,130,181,.35) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Link "Ver todos os perfis" */
.sf01-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-h);
  font-size: 15px;
  font-weight: 600;
  color: var(--mv-branco) !important;
  border: 2px solid rgba(255,255,255,.42);
  border-radius: var(--r-xl);
  padding: 12px 28px;
  transition: all var(--tr);
  position: relative;
  z-index: 1;
}

.sf01-link:hover {
  background: rgba(255,255,255,.10);
  border-color: var(--mv-branco);
  color: var(--mv-branco) !important;
}

.sf01-link i { font-size: 13px; transition: transform var(--tr); }
.sf01-link:hover i { transform: translateX(3px); }

/* ============================================================
   SEÇÃO DEPOIMENTOS
   Fundo branco | centralizado | grid 3
   ============================================================ */
.sf01-testimonials {
  background: var(--mv-branco);
  padding: 80px 32px;
  text-align: center;
}

.sf01-testimonials .sf01-tag { color: var(--mv-azul); }

.sf01-testimonials .sf01-title {
  font-size: clamp(24px, 3vw, 38px);
  max-width: 700px;
  margin: 0 auto 12px;
}

.sf01-testimonials .sf01-text {
  max-width: 540px;
  margin: 0 auto 48px;
}

/* Grid 3 */
.sf01-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1136px;
  margin: 0 auto;
  text-align: left;
}

.sf01-testimonial {
  background: var(--mv-off);
  border-radius: var(--r-md);
  padding: 28px 24px;
  border: 1px solid var(--mv-borda);
  transition: all var(--tr);
}

.sf01-testimonial:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh2);
  border-color: rgba(44,130,181,.22);
}

/* Estrelas */
.sf01-stars {
  font-size: 17px;
  color: var(--mv-amarelo);
  margin-bottom: 14px !important;
  letter-spacing: 2px;
}

/* Citação */
.sf01-quote {
  font-size: 15px;
  font-style: italic;
  color: var(--mv-texto);
  line-height: 1.75;
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
}

/* Autor */
.sf01-author {
  margin: 0 !important;
  font-size: 14px;
  color: var(--mv-azul);
  font-weight: 600;
}

.sf01-author strong {
  font-family: var(--font-h);
  font-weight: 700;
  color: var(--mv-azul);
}

/* ============================================================
   SEÇÃO CTA FINAL
   Fundo gradiente azul | centralizado | 2 botões inline
   ============================================================ */
.sf01-cta {
  background: linear-gradient(130deg, var(--mv-azul) 0%, var(--mv-esc) 100%);
  padding: 80px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.sf01-cta::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 900px;
  background: radial-gradient(circle, rgba(233,201,85,.10) 0%, transparent 60%);
  pointer-events: none;
}

.sf01-cta .sf01-title {
  color: var(--mv-branco);
  font-size: clamp(26px, 3.5vw, 44px);
  max-width: 700px;
  margin: 0 auto 36px;
  position: relative;
  z-index: 1;
}

/* Container dos botões */
.sf01-cta-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* Botão primário — laranja */
.sf01-button-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-h);
  font-size: 15px;
  font-weight: 700;
  background: var(--mv-laranja);
  color: var(--mv-branco) !important;
  border-radius: var(--r-xl);
  padding: 13px 28px;
  box-shadow: 0 4px 18px rgba(249,87,56,.38);
  transition: all var(--tr);
}

.sf01-button-primary:hover {
  background: #e0472a;
  transform: translateY(-2px);
  box-shadow: var(--sh-cta);
  color: var(--mv-branco) !important;
}

.sf01-button-primary i { font-size: 15px; }

/* Botão secundário — outline branco */
.sf01-button-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-h);
  font-size: 15px;
  font-weight: 600;
  background: transparent;
  color: var(--mv-branco) !important;
  border: 2px solid rgba(255,255,255,.52);
  border-radius: var(--r-xl);
  padding: 12px 26px;
  transition: all var(--tr);
}

.sf01-button-secondary:hover {
  background: rgba(255,255,255,.12);
  border-color: var(--mv-branco);
  color: var(--mv-branco) !important;
}

/* ============================================================
   RODAPÉ (v3 com suas modificações mantidas)
   ============================================================ */
.footer-1 {
  background: var(--mv-esc) !important;
}

.title-footer,
footer h4,
footer h3 {
  font-family: var(--font-h) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: var(--mv-branco) !important;
  margin-bottom: 18px !important;
  padding-bottom: 10px !important;
  position: relative !important;
  border: none !important;
}

.title-footer::after,
footer h4::after,
footer h3::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0; left: 0 !important;
  width: 26px; height: 2px !important;
  background: var(--mv-amarelo) !important;
  border-radius: 2px !important;
}

.menu-footer-list li a,
footer ul li a {
  font-size: 14px !important;
  color: rgba(255,255,255,.60) !important;
  transition: color var(--tr), padding-left var(--tr) !important;
  display: inline-block !important;
}
.menu-footer-list li a:hover,
footer ul li a:hover {
  color: var(--mv-amarelo) !important;
}

.grid-phone a {
  color: rgba(255,255,255,.70) !important;
  font-size: 14px !important;
  display: block !important;
  margin-bottom: 6px !important;
  transition: color var(--tr) !important;
}
.grid-phone a:hover { color: var(--mv-amarelo) !important; }

.social-footer-list {
  display: flex !important;
  gap: 10px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.social-footer-item a img {
  opacity: .65 !important;
}

.social-footer-item a:hover img { opacity: 1 !important; }

.footer-2 {
  background: rgba(0,0,0,.22) !important;
  padding: 28px 32px !important;
}

/*.footer-2 .container-12 {
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 32px !important;
  align-items: flex-start !important;
}

.grid-payment-methods,
.grid-delivery-methods,
.grid-certificate {
  flex: 1 1 200px !important;
  float: none !important;
  width: auto !important;
}*/

.footer-2 h5 {
  font-family: var(--font-h) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  color: rgba(255,255,255,.42) !important;
  margin-bottom: 12px !important;
}

.payment-methods-list img,
.delivery-methods-list img {
  height: 28px !important;
  width: auto !important;
  filter: brightness(0) invert(1) !important;
  opacity: .45 !important;
}

.certificate-list img {
  height: 50px !important;
  width: auto !important;
  filter: brightness(0) invert(1) !important;
  opacity: .55 !important;
}

.footer-3 {
  font-size: 12px !important;
  color: rgba(255,255,255,.38) !important;
  margin: 0 !important;
}

#footer-main .element-name-cnpj { padding: 0; }

#footer-main .copyright {
  background: transparent;
  color: rgba(255,255,255,.38) !important;
}

.footer-1 .clear,
.footer-2 .clear,
footer .clear { display: none !important; }

/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width: 1024px) {
  .sf01-hero-cards,
  .sf01-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .sf01-audience-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .sf01-product {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .sf01-product-image {
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .header-1 .container-12 {
    height: 64px !important;
    padding: 0 20px !important;
  }
  .element-menu-top { display: none !important; }

  .sf01-hero { padding: 56px 20px 48px; }

  .sf01-hero-cards,
  .sf01-benefits-grid,
  .sf01-gallery,
  .sf01-testimonials-grid {
    grid-template-columns: 1fr;
  }

  .sf01-audience-list {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
  }

  .sf01-product,
  .sf01-benefits,
  .sf01-audience,
  .sf01-testimonials,
  .sf01-cta {
    padding-left: 20px;
    padding-right: 20px;
  }

  .sf01-cta-buttons {
    flex-direction: column;
    align-items: center;
  }

  .sf01-button-primary,
  .sf01-button-secondary {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }

  .footer-2 .container-12 {
    flex-direction: column !important;
    padding: 0 20px !important;
  }
}

@media (max-width: 480px) {
  .sf01-hero .sf01-title,
  .sf01-product-content .sf01-title,
  .sf01-benefits .sf01-title,
  .sf01-audience .sf01-title,
  .sf01-testimonials .sf01-title,
  .sf01-cta .sf01-title {
    font-size: 24px;
  }
}

.pagina-home .element-content { display: none !important; }

/* ============================================================
   PÁGINA PRODUTO — CSS
   Cobre: Home, Página Produto (nativa + custom sf01-*) da página produto
   Seções: Intro | Como funciona | Por que usar | Specs | FAQ
   ============================================================ */

/* ── WRAPPER GERAL (herdado do .sf01-container) ────────────── */
/* .sf01-container já declarado na HOME — estilos base compartilhados */

/* ============================================================
   INTRO PRODUTO
   Layout 2 colunas: imagem esq | texto dir
   Fundo: branco | max-width 1200px
   ============================================================ */
.sf01-product-intro {
  background: var(--mv-branco);
  padding: 72px 32px 64px;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

/* Imagem */
.sf01-product-intro-image {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh);
}

.sf01-product-intro-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-lg);
  display: block;
}

/* Conteúdo */
.sf01-product-intro-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.sf01-product-intro-content .sf01-title {
  font-size: clamp(28px, 3.5vw, 44px);
  margin-bottom: 16px;
  color: var(--mv-azul);
}

.sf01-product-intro-content .sf01-text {
  font-size: 16px;
  line-height: 1.8;
}

/* ============================================================
   COMO FUNCIONA
   Fundo: off-white | centralizado | grid 3 cards
   ============================================================ */
.sf01-how-it-works {
  background: var(--mv-off);
  padding: 72px 32px 64px;
  text-align: center;
    border-radius: 30px;
}

.sf01-how-it-works .sf01-tag { color: var(--mv-azul); }

.sf01-how-it-works .sf01-title {
  font-size: clamp(26px, 3vw, 40px);
  max-width: 600px;
  margin: 0 auto 48px;
  color: var(--mv-azul);
}

/* Grid 3 cards de passo */
.sf01-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
}

.sf01-step-card {
  background: var(--mv-branco);
  border-radius: var(--r-md);
  padding: 32px 28px;
  box-shadow: var(--sh);
  border: 1px solid var(--mv-borda);
  text-align: left;
  transition: all var(--tr);
  position: relative;
  overflow: hidden;
}

.sf01-step-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mv-azul), var(--mv-amarelo));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tr);
}

.sf01-step-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh2);
}
.sf01-step-card:hover::before { transform: scaleX(1); }

/* Número grande e esmaecido */
.sf01-step-number {
  display: block;
  font-family: var(--font-h);
  font-size: 40px;
  font-weight: 800;
  color: rgba(44, 130, 181, .18);
  line-height: 1;
  margin-bottom: 14px;
  letter-spacing: -1px;
}

.sf01-step-title {
  font-family: var(--font-h);
  font-size: 16px;
  font-weight: 700;
  color: var(--mv-azul);
  margin-bottom: 8px;
  line-height: 1.3;
}

.sf01-step-text {
  font-size: 14px;
  color: var(--mv-suave);
  line-height: 1.65;
  margin: 0;
}

/* ============================================================
   POR QUE USAR
   Fundo: branco | centralizado | grid 2 colunas de checks
   ============================================================ */
.sf01-why-use {
  background: var(--mv-branco);
  padding: 72px 32px 64px;
  text-align: center;
}

.sf01-why-use .sf01-tag { color: var(--mv-azul); }

.sf01-why-use .sf01-title {
  font-size: clamp(26px, 3vw, 40px);
  max-width: 600px;
  margin: 0 auto 40px;
  color: var(--mv-azul);
}

/* Grid 2 colunas de itens */
.sf01-check-grid {
  list-style: none !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 16px !important;
  max-width: 860px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: left !important;
}

.sf01-check-item {
  background: var(--mv-off) !important;
  border: 1px solid var(--mv-borda) !important;
  border-radius: var(--r-md) !important;
  padding: 18px 22px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  font-family: var(--font-h) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--mv-texto) !important;
  transition: all var(--tr) !important;
  line-height: 1.45 !important;
}

.sf01-check-item:hover {
  border-color: rgba(44, 130, 181, .30) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--sh) !important;
}

.sf01-check-item > i {
  font-size: 14px !important;
  color: var(--mv-azul) !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  background: rgba(44, 130, 181, .10) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}

/* ============================================================
   ESPECIFICAÇÕES
   Fundo: off-white | texto alinhado esq | tabela limpa
   ============================================================ */
.sf01-specs {
  background: var(--mv-off);
  padding: 72px 32px 64px;
  border-radius: 30px;
}

.sf01-specs .sf01-tag { color: var(--mv-azul); }

.sf01-specs .sf01-title {
  font-size: clamp(26px, 3vw, 40px);
  color: var(--mv-azul);
  margin-bottom: 36px;
}

/* Tabela */
.sf01-specs-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--mv-branco);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--sh);
  border: 1px solid var(--mv-borda);
}

.sf01-specs-row {
  border-bottom: 1px solid var(--mv-borda);
}

.sf01-specs-row:last-child { border-bottom: none; }

.sf01-specs-label {
  font-family: var(--font-h);
  font-size: 14px;
  font-weight: 700;
  color: var(--mv-azul);
  padding: 16px 24px;
  white-space: nowrap;
  width: 35%;
  text-align: left;
  vertical-align: middle;
  background: rgba(44, 130, 181, .04);
}

.sf01-specs-value {
  font-family: var(--font-b);
  font-size: 15px;
  font-weight: 400;
  color: var(--mv-texto);
  padding: 16px 24px;
  text-align: left;
  vertical-align: middle;
}

.sf01-specs-row:hover .sf01-specs-label,
.sf01-specs-row:hover .sf01-specs-value {
  background: rgba(44, 130, 181, .04);
}

/* ============================================================
   FAQ
   Fundo: branco | centralizado | accordion <details>
   ============================================================ */
.sf01-faq {
  background: var(--mv-branco);
  padding: 72px 32px 80px;
  text-align: center;
}

.sf01-faq .sf01-tag { color: var(--mv-azul); }

.sf01-faq .sf01-title {
  font-size: clamp(26px, 3vw, 40px);
  color: var(--mv-azul);
  max-width: 600px;
  margin: 0 auto 40px;
}

/* Lista de perguntas */
.sf01-faq-list {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
    font-size: 20px;
}

/* Item accordion */
.sf01-faq-item {
  background: var(--mv-branco);
  border: 1px solid var(--mv-borda);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: all var(--tr);
}

.sf01-faq-item[open] {
  box-shadow: var(--sh);
  border-color: rgba(44, 130, 181, .25);
}

/* Summary — pergunta */
.sf01-faq-question {
  font-family: var(--font-h);
  font-size: 15px;
  font-weight: 600;
  color: var(--mv-azul);
  padding: 18px 48px 18px 20px;
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: background var(--tr);
  line-height: 1.4;
}

.sf01-faq-question::-webkit-details-marker { display: none; }

/* Ícone "+" / "−" via pseudo */
.sf01-faq-question::after {
  content: '+';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 300;
  color: var(--mv-azul);
  transition: transform var(--tr), color var(--tr);
  line-height: 1;
}

.sf01-faq-item[open] .sf01-faq-question::after {
  content: '−';
}

.sf01-faq-question:hover {
  background: rgba(44, 130, 181, .05);
}

/* Resposta */
.sf01-faq-answer {
  font-family: var(--font-b);
  font-size: 15px;
  color: var(--mv-suave);
  line-height: 1.75;
  padding: 0 20px 20px;
  margin: 0 !important;
}

/* ============================================================
   RESPONSIVO — PÁGINA PRODUTO
   ============================================================ */

@media (max-width: 1024px) {
  .sf01-product-intro {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 56px 32px 48px;
  }

  .sf01-product-intro-image {
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .sf01-product-intro,
  .sf01-how-it-works,
  .sf01-why-use,
  .sf01-specs,
  .sf01-faq {
    padding-left: 20px;
    padding-right: 20px;
  }

  .sf01-steps-grid {
    grid-template-columns: 1fr;
  }

  .sf01-check-grid {
    grid-template-columns: 1fr !important;
  }

  .sf01-specs-table {
    max-width: 100%;
  }

  .sf01-specs-label {
    width: 40%;
    padding: 14px 16px;
  }

  .sf01-specs-value {
    padding: 14px 16px;
  }

  .sf01-faq-list {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .sf01-product-intro-content .sf01-title,
  .sf01-how-it-works .sf01-title,
  .sf01-why-use .sf01-title,
  .sf01-specs .sf01-title,
  .sf01-faq .sf01-title {
    font-size: 24px;
  }
}


/* ============================================================
   PÁGINA DE PRODUTO — ELEMENTOS NATIVOS DA PLATAFORMA LQV
   Cobre: layout geral, galeria, nome/preço, variações,
   botão comprar, abas, avaliações, produtos relacionados
   Baseado nas classes reais inspecionadas da plataforma
   ============================================================ */

/* ── WRAPPER DA PÁGINA PRODUTO ───────────────────────────── */
.pagina-produto,
.product-page,
.page-produto {
  background: var(--mv-branco);
  font-family: var(--font-b);
}

/* Container principal do produto */
.element-product,
.product-detail,
.product-main,
.pagina-produto #content-main .container-12,
.pagina-fretes-e-entregas #content-main .container-12,
.painel-cliente #content-main .container-12,
.pagina-politica-de-privacidade #content-main .container-12,
.pagina-termos-de-uso #content-main .container-12,
.pagina-carrinho #content-main .container-12{
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 40px 20px !important;
}

/* ── BREADCRUMB ──────────────────────────────────────────── */
.breadcrumb,
.breadcrumbs,
.element-breadcrumb,
.trail {
  font-family: var(--font-b) !important;
  font-size: 13px !important;
  color: var(--mv-suave) !important;
  padding: 20px 32px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

.breadcrumb a,
.breadcrumbs a,
.trail a {
  color: var(--mv-azul) !important;
  transition: color var(--tr) !important;
}
.breadcrumb a:hover,
.breadcrumbs a:hover,
.trail a:hover {
  color: var(--mv-esc) !important;
}

/* Separador do breadcrumb */
.breadcrumb span,
.breadcrumb .separator,
.trail .separator {
  color: var(--mv-borda) !important;
}

/* ── GRID PRODUTO: GALERIA + INFO ────────────────────────── */
.product-detail-inner,
.product-detail .container-12 .grid-12,
.element-product .grid-12,
.pagina-produto .product-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 64px !important;
  align-items: start !important;
}

/* ── GALERIA DE IMAGENS ──────────────────────────────────── */
.product-images,
.product-gallery,
.element-product-images,
.product-detail-images,
.gallery-product {
  position: sticky !important;
  top: 96px !important;
}

/* Imagem principal */
.product-image-main,
.product-main-image,
.element-product-image,
.product-img-main,
.product-images .main-image,
.product-gallery .main {
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
  box-shadow: var(--sh) !important;
  aspect-ratio: 1 / 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.product-image-main img,
.product-main-image img,
.element-product-image img,
.product-img-main img,
.product-images .main-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  transition: transform var(--tr) !important;
}

/*.product-image-main:hover img,
.product-main-image:hover img {
  transform: scale(1.04) !important;
} */

/* Miniaturas */
.product-thumbnails,
.product-images-thumbs,
.product-gallery-thumbs,
.product-images .thumbs {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.product-thumbnails img,
.product-images-thumbs img,
.product-gallery-thumbs img,
.product-images .thumbs img {
  width: 72px !important;
  height: 72px !important;
  object-fit: contain !important;
  border-radius: var(--r-sm) !important;
  border: 2px solid var(--mv-borda) !important;
  cursor: pointer !important;
  transition: all var(--tr) !important;
}

.product-thumbnails img:hover,
.product-thumbnails img.active,
.product-images .thumbs img:hover,
.product-images .thumbs img.selected {
  border-color: var(--mv-azul) !important;
  box-shadow: 0 0 0 3px rgba(44,130,181,.18) !important;
}

/* ── INFORMAÇÕES DO PRODUTO ──────────────────────────────── */
.product-info,
.product-detail-info,
.element-product-info,
.product-content,
.pagina-produto .product-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* Nome do produto */
.product-name,
.product-title,
.element-product-name,
h1.product-name,
h1.nome-produto,
.pagina-produto h1 {
  font-family: var(--font-h) !important;
  font-size: clamp(24px, 3vw, 36px) !important;
  font-weight: 800 !important;
  color: var(--mv-esc) !important;
  line-height: 1.2 !important;
  margin-bottom: 16px !important;
}

/* SKU / Código */
.product-sku,
.product-code,
.element-product-sku,
.sku-produto {
  font-size: 12px !important;
  color: var(--mv-suave) !important;
  margin-bottom: 20px !important;
  font-family: var(--font-b) !important;
}

/* Avaliações (estrelas) inline */
.product-rating-inline,
.product-stars,
.rating-stars,
.element-rating {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 20px !important;
}

.product-rating-inline .stars,
.product-stars .stars,
.rating-stars .stars {
  color: var(--mv-amarelo) !important;
  font-size: 16px !important;
  letter-spacing: 1px !important;
}

.product-rating-inline .count,
.rating-count {
  font-size: 13px !important;
  color: var(--mv-suave) !important;
}

/* Linha separadora */
.product-info .divider,
.product-detail-info hr {
  border: none !important;
  border-top: 1px solid var(--mv-borda) !important;
  margin: 20px 0 !important;
}

/* ── PREÇO ───────────────────────────────────────────────── */
.product-price,
.element-product-price,
.preco-produto,
.price-wrapper,
.pagina-produto .price {
  margin-bottom: 24px !important;
}

/* Preço "a partir de" */
.product-price .price-from,
.price-from,
.a-partir-de {
  font-family: var(--font-b) !important;
  font-size: 13px !important;
  color: var(--mv-suave) !important;
  display: block !important;
  margin-bottom: 4px !important;
}

/* Preço principal */
.product-price .price,
.product-price .preco,
.price-main,
.preco-principal,
.element-product-price .price-value,
.pagina-produto .price-value {
  font-family: var(--font-h) !important;
  font-size: 36px !important;
  font-weight: 800 !important;
  color: var(--mv-esc) !important;
  line-height: 1 !important;
  display: block !important;
}

/* Preço riscado (original) */
.product-price .price-old,
.price-old,
.preco-antigo,
del {
  font-size: 16px !important;
  color: var(--mv-suave) !important;
  font-weight: 400 !important;
  text-decoration: line-through !important;
  opacity: .65 !important;
}

/* Badge de desconto */
.price-badge,
.discount-badge,
.badge-desconto {
  display: inline-block !important;
  background: var(--mv-laranja) !important;
  color: var(--mv-branco) !important;
  font-family: var(--font-h) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  padding: 3px 8px !important;
  border-radius: var(--r-xl) !important;
  margin-left: 10px !important;
  vertical-align: middle !important;
}

/* Parcelas */
.product-price .installments,
.product-price .parcelas,
.installment-info,
.parcelas-info {
  font-size: 14px !important;
  color: var(--mv-suave) !important;
  margin-top: 6px !important;
  display: block !important;
}

.product-price .installments strong,
.installment-info strong {
  color: var(--mv-azul) !important;
  font-weight: 700 !important;
}

/* ── VARIAÇÕES (cor, tamanho etc.) ───────────────────────── */
.product-variations,
.element-product-variations,
.product-options,
.variations-wrapper {
  margin-bottom: 24px !important;
}

.product-variations label,
.element-product-variations label,
.variation-label {
  font-family: var(--font-h) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--mv-esc) !important;
  display: block !important;
  margin-bottom: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

/* Opções de variação — botões */
.variation-options,
.product-options-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.variation-option,
.product-option-item {
  font-family: var(--font-h) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--mv-esc) !important;
  border: 2px solid var(--mv-borda) !important;
  border-radius: var(--r-sm) !important;
  padding: 8px 16px !important;
  cursor: pointer !important;
  transition: all var(--tr) !important;
  background: var(--mv-branco) !important;
}

.variation-option:hover,
.product-option-item:hover {
  border-color: var(--mv-azul) !important;
  color: var(--mv-azul) !important;
}

.variation-option.active,
.variation-option.selected,
.product-option-item.active {
  border-color: var(--mv-azul) !important;
  background: var(--mv-azul) !important;
  color: var(--mv-branco) !important;
}

/* Select de variação */
.product-variations select,
.element-product-variations select,
.variation-select {
  font-family: var(--font-b) !important;
  font-size: 15px !important;
  color: var(--mv-texto) !important;
  border: 2px solid var(--mv-borda) !important;
  border-radius: var(--r-md) !important;
  padding: 12px 16px !important;
  width: 100% !important;
  background: var(--mv-branco) !important;
  cursor: pointer !important;
  outline: none !important;
  transition: border-color var(--tr) !important;
  appearance: none !important;
}

.product-variations select:focus,
.variation-select:focus {
  border-color: var(--mv-azul) !important;
  box-shadow: 0 0 0 3px rgba(44,130,181,.15) !important;
}

/* ── QUANTIDADE ──────────────────────────────────────────── */
.product-quantity,
.element-product-quantity,
.quantity-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 24px !important;
}

.product-quantity label,
.quantity-label {
  font-family: var(--font-h) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--mv-esc) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
}

.quantity-control,
.quantity-input-wrapper {
  display: flex !important;
  align-items: center !important;
  border: 2px solid var(--mv-borda) !important;
  border-radius: var(--r-md) !important;
  overflow: hidden !important;
}

.quantity-control button,
.quantity-btn,
.qty-btn {
  width: 40px !important;
  height: 44px !important;
  background: var(--mv-off) !important;
  border: none !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--mv-azul) !important;
  cursor: pointer !important;
  transition: background var(--tr) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.quantity-control button:hover,
.quantity-btn:hover {
  background: rgba(44,130,181,.12) !important;
}

.quantity-control input,
.quantity-input,
input.qty {
  width: 56px !important;
  height: 44px !important;
  text-align: center !important;
  border: none !important;
  border-left: 1px solid var(--mv-borda) !important;
  border-right: 1px solid var(--mv-borda) !important;
  font-family: var(--font-h) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--mv-esc) !important;
  outline: none !important;
}

/* ── BOTÃO COMPRAR ───────────────────────────────────────── */
.btn-buy,
.buy-button,
.element-product .btn-comprar,
.btn-add-to-cart,
.button-buy,
.pagina-produto .comprar,
.pagina-produto input[type="submit"],
.pagina-produto button[type="submit"],
.add-to-cart-btn,
a.btn-buy,
button.btn-buy {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  font-family: var(--font-h) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  background: var(--mv-laranja) !important;
  color: var(--mv-branco) !important;
  border: none !important;
  border-radius: var(--r-xl) !important;
  padding: 16px 32px !important;
  cursor: pointer !important;
  transition: all var(--tr) !important;
  box-shadow: 0 4px 20px rgba(249,87,56,.35) !important;
  text-decoration: none !important;
  margin-bottom: 12px !important;
  letter-spacing: .3px !important;
}

.btn-buy:hover,
.buy-button:hover,
.element-product .btn-comprar:hover,
.pagina-produto .comprar:hover,
.add-to-cart-btn:hover {
  background: #e0472a !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--sh-cta) !important;
  color: var(--mv-branco) !important;
}

/* Botão secundário (Comprar agora / checkout direto) */
.btn-buy-now,
.buy-now-btn,
.pagina-produto .comprar-agora {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  font-family: var(--font-h) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  background: transparent !important;
  color: var(--mv-esc) !important;
  border: 2px solid var(--mv-borda) !important;
  border-radius: var(--r-xl) !important;
  padding: 14px 32px !important;
  cursor: pointer !important;
  transition: all var(--tr) !important;
  margin-bottom: 24px !important;
}

.btn-buy-now:hover,
.buy-now-btn:hover {
  border-color: var(--mv-esc) !important;
  color: var(--mv-esc) !important;
}

/* ── SELOS DE CONFIANÇA (abaixo do botão) ────────────────── */
.product-trust,
.trust-badges,
.security-badges,
.product-info-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 16px 0 !important;
  border-top: 1px solid var(--mv-borda) !important;
  margin-top: 8px !important;
}

.trust-badge,
.security-badge {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--font-b) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--mv-suave) !important;
}

.trust-badge i,
.security-badge i {
  color: var(--mv-azul) !important;
  font-size: 14px !important;
}

/* ── FRETE ───────────────────────────────────────────────── */
.product-shipping,
.element-product-shipping,
.shipping-calculator,
.frete-produto {
  background: var(--mv-off) !important;
  border-radius: var(--r-md) !important;
  padding: 20px !important;
  margin-bottom: 24px !important;
  border: 1px solid var(--mv-borda) !important;
}

.product-shipping label,
.shipping-calculator label,
.frete-produto label {
  font-family: var(--font-h) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--mv-esc) !important;
  display: block !important;
  margin-bottom: 10px !important;
}

.product-shipping .input-group,
.shipping-input-wrapper {
  display: flex !important;
  gap: 8px !important;
}

.product-shipping input[type="text"],
.shipping-cep-input {
  flex: 1 !important;
  font-family: var(--font-b) !important;
  font-size: 14px !important;
  border: 2px solid var(--mv-borda) !important;
  border-radius: var(--r-sm) !important;
  padding: 10px 14px !important;
  outline: none !important;
  color: var(--mv-texto) !important;
  transition: border-color var(--tr) !important;
}

.product-shipping input[type="text"]:focus,
.shipping-cep-input:focus {
  border-color: var(--mv-azul) !important;
  box-shadow: 0 0 0 3px rgba(44,130,181,.15) !important;
}

.product-shipping button,
.shipping-calc-btn {
  font-family: var(--font-h) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  background: var(--mv-azul) !important;
  color: var(--mv-branco) !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  padding: 10px 18px !important;
  cursor: pointer !important;
  transition: all var(--tr) !important;
}

.product-shipping button:hover,
.shipping-calc-btn:hover {
  background: var(--mv-esc) !important;
}

/* Resultado do frete */
.shipping-result,
.frete-resultado {
  margin-top: 12px !important;
  font-size: 14px !important;
  color: var(--mv-texto) !important;
}

/* ── ABAS (DESCRIÇÃO / COMO USAR / AVALIAÇÕES) ───────────── */
.product-tabs,
.element-product-tabs,
.tabs-produto,
.product-tabs-wrapper {
  margin-top: 64px !important;
  border-bottom: 2px solid var(--mv-borda) !important;
}

/* Lista de abas */
.product-tabs ul,
.tabs-nav,
.element-product-tabs .tabs-list {
  display: flex !important;
  list-style: none !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: none !important;
}

.product-tabs ul li a,
.tabs-nav li a,
.tab-link {
  display: block !important;
  font-family: var(--font-h) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--mv-suave) !important;
  padding: 14px 24px !important;
  border-bottom: 3px solid transparent !important;
  transition: all var(--tr) !important;
  white-space: nowrap !important;
}

.product-tabs ul li a:hover,
.tabs-nav li a:hover,
.tab-link:hover {
  color: var(--mv-azul) !important;
  border-bottom-color: rgba(44,130,181,.30) !important;
}

.product-tabs ul li a.active,
.product-tabs ul li.active a,
.tabs-nav li.active a,
.tab-link.active {
  color: var(--mv-azul) !important;
  border-bottom-color: var(--mv-azul) !important;
  font-weight: 700 !important;
}

/* Conteúdo das abas */
.product-tab-content,
.tab-content,
.element-product-tabs .tab-pane {
  padding: 40px 0 !important;
  font-family: var(--font-b) !important;
  font-size: 15px !important;
  color: var(--mv-suave) !important;
  line-height: 1.8 !important;
}

/* Títulos dentro da aba */
.product-tab-content h3,
.tab-content h3 {
  font-family: var(--font-h) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--mv-esc) !important;
  margin-bottom: 12px !important;
}

/* Parágrafos dentro da aba */
.product-tab-content p,
.tab-content p {
  margin-bottom: 14px !important;
  color: var(--mv-suave) !important;
  line-height: 1.8 !important;
}

/* Listas dentro da aba */
.product-tab-content ul,
.tab-content ul {
  padding-left: 20px !important;
  margin-bottom: 14px !important;
}

.product-tab-content ul li,
.tab-content ul li {
  margin-bottom: 6px !important;
  color: var(--mv-suave) !important;
}

/* ── CONTEÚDO CUSTOM DO BANNER-SHOP NA PÁGINA PRODUTO ────── */
/* O .sf01-container dentro do produto tem os mesmos estilos da home */
/* mas a seção intro tem layout ligeiramente diferente */

/* Wrapper geral do conteúdo custom */
.pagina-produto .element-banner-shop,
.pagina-produto .banner-shop-inner {
  background: var(--mv-branco);
  padding: 0;
  margin: 0;
}

/* Garante que o sf01-container dentro do produto ocupe toda a largura */
.pagina-produto .sf01-container {
  width: 100%;
}

/* ── AVALIAÇÕES ──────────────────────────────────────────── */
.product-reviews,
.element-product-reviews,
.reviews-section,
.avaliacoes {
  padding: 48px 0 !important;
}

.product-reviews h3,
.reviews-title {
  font-family: var(--font-h) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--mv-esc) !important;
  margin-bottom: 24px !important;
}

/* Resumo de avaliações */
.reviews-summary {
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  background: var(--mv-off) !important;
  border-radius: var(--r-md) !important;
  padding: 24px !important;
  margin-bottom: 32px !important;
  border: 1px solid var(--mv-borda) !important;
}

.reviews-score {
  font-family: var(--font-h) !important;
  font-size: 48px !important;
  font-weight: 800 !important;
  color: var(--mv-esc) !important;
  line-height: 1 !important;
}

.reviews-stars-avg {
  font-size: 20px !important;
  color: var(--mv-amarelo) !important;
  letter-spacing: 2px !important;
}

/* Card de avaliação individual */
.review-item,
.avaliacao-item {
  background: var(--mv-off) !important;
  border-radius: var(--r-md) !important;
  padding: 24px !important;
  margin-bottom: 16px !important;
  border: 1px solid var(--mv-borda) !important;
  transition: all var(--tr) !important;
}

.review-item:hover,
.avaliacao-item:hover {
  box-shadow: var(--sh) !important;
  border-color: rgba(44,130,181,.22) !important;
}

.review-item .stars,
.avaliacao-item .stars {
  color: var(--mv-amarelo) !important;
  font-size: 15px !important;
  letter-spacing: 1px !important;
  margin-bottom: 8px !important;
}

.review-item .review-author,
.review-author {
  font-family: var(--font-h) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--mv-azul) !important;
  margin-bottom: 6px !important;
}

.review-item .review-text,
.review-text {
  font-size: 14px !important;
  color: var(--mv-suave) !important;
  line-height: 1.7 !important;
}

/* ── PRODUTOS RELACIONADOS ───────────────────────────────── */
.related-products,
.element-related-products,
.produtos-relacionados,
.related-products-section {
  padding: 64px 32px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.related-products h3,
.related-products-title,
.produtos-relacionados h3 {
  font-family: var(--font-h) !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--mv-esc) !important;
  margin-bottom: 32px !important;
}

.related-products-grid,
.related-products .products-list,
.produtos-relacionados .grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
}

/* Card de produto relacionado */
.related-product-card,
.related-products .product-item,
.produtos-relacionados .product-item {
  background: var(--mv-branco) !important;
  border-radius: var(--r-md) !important;
  border: 1px solid var(--mv-borda) !important;
  box-shadow: var(--sh) !important;
  overflow: hidden !important;
  transition: all var(--tr) !important;
}

.related-product-card:hover,
.related-products .product-item:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--sh2) !important;
}

.related-product-card img,
.related-products .product-item img {
  width: 100% !important;
  aspect-ratio: 1/1 !important;
  object-fit: contain !important;
  background: var(--mv-off) !important;
  padding: 16px !important;
  transition: transform var(--tr) !important;
}

.related-product-card:hover img {
  transform: scale(1.04) !important;
}

.related-product-card .product-info,
.related-products .product-item .product-info {
  padding: 16px !important;
}

.related-product-card .product-name,
.related-products .product-item .product-name {
  font-family: var(--font-h) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--mv-esc) !important;
  margin-bottom: 8px !important;
  line-height: 1.3 !important;
}

.related-product-card .product-price,
.related-products .product-item .product-price {
  font-family: var(--font-h) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--mv-azul) !important;
  margin-bottom: 12px !important;
}

.related-product-card .btn-comprar,
.related-products .product-item .btn-comprar {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-family: var(--font-h) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  background: var(--mv-laranja) !important;
  color: var(--mv-branco) !important;
  border: none !important;
  border-radius: var(--r-xl) !important;
  padding: 10px 16px !important;
  cursor: pointer !important;
  transition: all var(--tr) !important;
}

.related-product-card .btn-comprar:hover,
.related-products .product-item .btn-comprar:hover {
  background: #e0472a !important;
  transform: translateY(-1px) !important;
}

/* ── RESPONSIVO — PÁGINA PRODUTO ─────────────────────────── */

@media (max-width: 1024px) {
  .product-detail-inner,
  .product-detail .container-12 .grid-12,
  .element-product .grid-12 {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }

  .product-images,
  .product-gallery,
  .element-product-images {
    position: static !important;
  }

  .related-products-grid,
  .related-products .products-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .element-product,
  .product-detail,
  .product-main,
  .pagina-produto .container-12 {
    padding: 32px 20px !important;
  }

  .product-tabs ul,
  .tabs-nav {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }

  .product-tabs ul li a,
  .tab-link {
    padding: 12px 16px !important;
    font-size: 13px !important;
  }

  .related-products,
  .produtos-relacionados {
    padding: 40px 20px !important;
  }

  .related-products-grid,
  .related-products .products-list {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

@media (max-width: 480px) {
  .product-name,
  h1.product-name,
  .pagina-produto h1 {
    font-size: 24px !important;
  }

  .product-price .price,
  .price-main {
    font-size: 28px !important;
  }

  .related-products-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ============================================================
   PÁGINA "COMO FUNCIONA" — CSS
   URL: /p/como-funciona
   Seções:
     1. Hero         — fundo gradiente azul escuro, título com destaque amarelo
     2. Conceito     — 2 colunas (img + texto), fundo branco
     3. Na prática   — 4 cards numerados, fundo off-white, botão CTA
   Classes: .cf-* (prefixo "como funciona")
   ============================================================ */

/* ── CONTAINER GERAL ─────────────────────────────────────── */
.cf-container {
  font-family: var(--font-b);
  background: var(--mv-branco);
}

/* ── TAG DE SEÇÃO (herdada do padrão sf01) ───────────────── */
.cf-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-h);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,.70);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r-xl);
  padding: 5px 14px;
  margin-bottom: 24px;
}

/* Tag escura (para seções claras) */
.cf-tag--dark {
  color: var(--mv-azul);
  background: rgba(44,130,181,.08);
  border-color: rgba(44,130,181,.18);
}

/* ============================================================
   1. HERO — GRADIENTE AZUL ESCURO
   Fundo: gradiente azul | título com destaque amarelo
   ============================================================ */
.cf-hero {
  background: linear-gradient(145deg, var(--mv-esc) 0%, #0d5fa0 60%, #1870b8 100%);
  padding: 96px 32px 100px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Efeito radial decorativo */
.cf-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(44,130,181,.40) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(10,74,133,.60) 0%, transparent 50%);
  pointer-events: none;
}

.cf-hero > * { position: relative; z-index: 1; }

/* Título do hero — palavra em amarelo via <span> */
.cf-hero-title {
  font-family: var(--font-h);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  color: var(--mv-branco);
  line-height: 1.15;
  max-width: 760px;
  margin: 0 auto 20px;
}

.cf-hero-title span,
.cf-hero-title em {
  color: var(--mv-amarelo);
  font-style: normal;
}

/* Subtítulo do hero */
.cf-hero-subtitle {
  font-family: var(--font-b);
  font-size: 17px;
  color: rgba(255,255,255,.78);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.75;
}

/* ============================================================
   2. SEÇÃO CONCEITO
   Layout: 2 colunas (imagem esq | texto dir) | fundo branco
   ============================================================ */
.cf-concept {
  background: var(--mv-branco);
  padding: 80px 32px;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

/* Imagem */
.cf-concept-image {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh);
  position: relative;
}

.cf-concept-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-lg);
  display: block;
  min-height: 320px;
}

/* Conteúdo texto */
.cf-concept-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Título principal do conceito */
.cf-concept-title {
  font-family: var(--font-h);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
  color: var(--mv-azul);
  line-height: 1.2;
  margin-bottom: 14px;
}

/* Texto descritivo */
.cf-concept-text {
  font-size: 16px;
  color: var(--mv-suave);
  line-height: 1.75;
  margin-bottom: 28px;
}

/* Subtítulo interno (ex: "Movimento também pode ser estratégia") */
.cf-concept-subtitle {
  font-family: var(--font-h);
  font-size: 18px;
  font-weight: 700;
  color: var(--mv-azul);
  margin-bottom: 10px;
  line-height: 1.3;
}

/* Texto abaixo do subtítulo interno */
.cf-concept-body {
  font-size: 15px;
  color: var(--mv-suave);
  line-height: 1.75;
  margin: 0;
}

/* ============================================================
   3. SEÇÃO NA PRÁTICA
   Fundo: off-white | 4 cards numerados com círculo laranja
   + botão primário + link secundário
   ============================================================ */
.cf-practice {
  background: var(--mv-off);
  padding: 80px 32px;
  text-align: center;
}

/* Tag + título */
.cf-practice .cf-tag--dark {
  margin-bottom: 14px;
}

.cf-practice-title {
  font-family: var(--font-h);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 800;
  color: var(--mv-azul);
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Grid 4 cards de passo */
.cf-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1136px;
  margin: 0 auto 48px;
}

/* Card individual */
.cf-step-card {
  background: var(--mv-branco);
  border-radius: var(--r-md);
  padding: 28px 22px 24px;
  box-shadow: var(--sh);
  border: 1px solid var(--mv-borda);
  text-align: left;
  transition: all var(--tr);
  position: relative;
  overflow: hidden;
}

.cf-step-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mv-azul), var(--mv-amarelo));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tr);
}

.cf-step-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh2);
}
.cf-step-card:hover::after { transform: scaleX(1); }

/* Número — círculo laranja */
.cf-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--mv-laranja);
  color: var(--mv-branco);
  border-radius: 50%;
  font-family: var(--font-h);
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 18px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(249,87,56,.30);
  transition: transform var(--tr);
}

.cf-step-card:hover .cf-step-number {
  transform: scale(1.08);
}

/* Texto do passo */
.cf-step-text {
  font-family: var(--font-h);
  font-size: 15px;
  font-weight: 600;
  color: var(--mv-azul);
  line-height: 1.45;
  margin: 0;
}

/* ── BOTÕES DA SEÇÃO PRÁTICA ─────────────────────────────── */
.cf-practice-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Botão primário — laranja */
.cf-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-h);
  font-size: 15px;
  font-weight: 700;
  background: var(--mv-laranja);
  color: var(--mv-branco) !important;
  border-radius: var(--r-xl);
  padding: 13px 28px;
  box-shadow: 0 4px 18px rgba(249,87,56,.35);
  transition: all var(--tr);
  text-decoration: none;
}

.cf-btn-primary:hover {
  background: #e0472a;
  transform: translateY(-2px);
  box-shadow: var(--sh-cta);
  color: var(--mv-branco) !important;
}

.cf-btn-primary i {
  font-size: 14px;
  transition: transform var(--tr);
}
.cf-btn-primary:hover i { transform: scale(1.1); }

/* Link secundário — texto azul com seta */
.cf-btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-h);
  font-size: 14px;
  font-weight: 600;
  color: var(--mv-azul) !important;
  text-decoration: none;
  transition: all var(--tr);
}

.cf-btn-link:hover {
  color: var(--mv-esc) !important;
}

.cf-btn-link i {
  font-size: 12px;
  transition: transform var(--tr);
}
.cf-btn-link:hover i { transform: translateX(3px); }

/* ============================================================
   RESPONSIVO — COMO FUNCIONA
   ============================================================ */

@media (max-width: 1024px) {
  .cf-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .cf-hero {
    padding: 72px 20px 80px;
  }

  .cf-concept {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 60px 20px;
  }

  .cf-concept-image {
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
  }

  .cf-practice {
    padding: 60px 20px;
  }

  .cf-steps-grid {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
  }

  .cf-practice-title {
    margin-bottom: 32px;
  }
}

@media (max-width: 480px) {
  .cf-hero-title {
    font-size: 28px;
  }

  .cf-concept-title,
  .cf-practice-title {
    font-size: 24px;
  }

  .cf-steps-grid {
    max-width: 100%;
  }
}


/* ============================================================
   PÁGINA "COMO FUNCIONA" — CSS
   Página: /p/como-funciona
   Body class: .pagina-como-funciona
   HTML: classes .sf01-edu-hero | .sf01-concept | .sf01-practice
   Baseado fielmente no print de referência
   ============================================================ */

/* ── WRAPPER DA PÁGINA ───────────────────────────────────── */
.pagina-como-funciona .page-content {
  padding: 0;
}

/* Remove padding/margin padrão da plataforma nesta página */
.pagina-como-funciona #content-main,
.pagina-como-funciona .content-main-cols-1 {
  padding: 0 !important;
  max-width: none !important;
}

/* ── TAG: herda .sf01-tag, apenas override de cor por seção ─ */
.sf01-edu-hero .sf01-tag,
.sf01-practice .sf01-tag {
  color: rgba(255,255,255,.75);
}
.sf01-edu-hero .sf01-tag::before,
.sf01-practice .sf01-tag::before {
  background: var(--mv-amarelo);
}
.sf01-concept .sf01-tag,
.sf01-practice .sf01-tag { /* herdado */ }

/* ============================================================
   HERO EDUCATIVO
   Fundo: gradiente azul escuro (como no print)
   Texto centralizado, título grande com highlight amarelo
   ============================================================ */
.sf01-edu-hero {
  background: linear-gradient(145deg, var(--mv-esc) 0%, #0e5fa0 60%, #1a6fb5 100%);
  padding: 96px 32px 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Efeito de luz radial sutil no fundo */
.sf01-edu-hero::before {
  content: '';
  position: absolute;
  top: -30%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(44,130,181,.30) 0%, transparent 65%);
  pointer-events: none;
}

/* Tag da seção */
.sf01-edu-hero .sf01-tag {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,.80);
}

/* Título grande — classe extra .sf01-title-large */
.sf01-title-large {
  font-family: var(--font-h);
  font-size: clamp(32px, 5vw, 58px) !important;
  font-weight: 800;
  line-height: 1.1;
  color: var(--mv-branco);
  max-width: 820px;
  margin: 0 auto 24px;
  position: relative;
  z-index: 1;
}

/* Highlight em amarelo — <span class="sf01-highlight"> */
.sf01-highlight {
  color: var(--mv-amarelo);
  display: block; /* quebra linha como no print */
}

/* Subtítulo do hero */
.sf01-edu-hero .sf01-subtitle {
  font-size: 18px;
  color: rgba(255,255,255,.78);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.75;
  position: relative;
  z-index: 1;
}

/* ============================================================
   SEÇÃO CONCEITO
   Fundo: branco
   Layout: 2 colunas — imagem esq | texto dir
   ============================================================ */
.sf01-concept {
  background: var(--mv-branco);
  padding: 80px 32px;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

/* Imagem */
.sf01-concept-image {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh);
  background: var(--mv-off);
}

.sf01-concept-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-lg);
  display: block;
  transition: transform var(--tr);
}

.sf01-concept-image:hover img {
  transform: scale(1.025);
}

/* Conteúdo texto */
.sf01-concept-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

/* Título "O que é stimming?" */
.sf01-concept-content .sf01-title {
  font-size: clamp(26px, 3.5vw, 40px);
  color: var(--mv-azul);
  margin-bottom: 14px;
}

/* Subtítulo intermediário — "Movimento também pode ser estratégia" */
.sf01-subtitle-strong {
  font-family: var(--font-h);
  font-size: 18px;
  font-weight: 700;
  color: var(--mv-azul);
  line-height: 1.35;
  margin: 20px 0 10px;
}

/* Texto padrão — herda .sf01-text */
.sf01-concept-content .sf01-text {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 4px;
}

/* ============================================================
   SEÇÃO NA PRÁTICA
   Fundo: off-white
   Centralizado | Grid 4 cards numerados com círculo laranja
   ============================================================ */
.sf01-practice {
  background: var(--mv-off);
  padding: 80px 32px 72px;
  text-align: center;
  position: relative;
}

.sf01-practice .sf01-tag {
  color: var(--mv-azul);
}
.sf01-practice .sf01-tag::before {
  background: var(--mv-amarelo);
}

.sf01-practice .sf01-title {
  font-size: clamp(26px, 3.5vw, 40px);
  color: var(--mv-azul);
  max-width: 600px;
  margin: 0 auto 48px;
}

/* Grid 4 cards */
.sf01-practice-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1136px;
  margin: 0 auto 48px;
}

/* Card individual */
.sf01-practice-card {
  background: var(--mv-branco);
  border-radius: var(--r-md);
  padding: 32px 24px 28px;
  box-shadow: var(--sh);
  border: 1px solid var(--mv-borda);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: all var(--tr);
  position: relative;
  overflow: hidden;
}

.sf01-practice-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mv-laranja), var(--mv-amarelo));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tr);
}

.sf01-practice-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh2);
}
.sf01-practice-card:hover::after {
  transform: scaleX(1);
}

/* Número em círculo laranja */
.sf01-practice-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: var(--mv-laranja);
  color: var(--mv-branco);
  font-family: var(--font-h);
  font-size: 18px;
  font-weight: 800;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(249,87,56,.35);
  transition: transform var(--tr);
}

.sf01-practice-card:hover .sf01-practice-number {
  transform: scale(1.08);
}

/* Texto do passo */
.sf01-practice-text {
  font-family: var(--font-h);
  font-size: 15px;
  font-weight: 600;
  color: var(--mv-azul);
  line-height: 1.45;
  margin: 0;
}

/* CTA abaixo dos cards */
.sf01-practice-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Botão primário — herda .sf01-button-primary */
.sf01-practice-cta .sf01-button-primary {
  /* herda todos os estilos do global */
  font-size: 15px;
}

/* Link "Ver detalhes técnicos" — herda .sf01-link mas escuro */
.sf01-practice-cta .sf01-link {
  color: var(--mv-azul) !important;
  border-color: transparent;
  padding: 0;
  font-size: 14px;
}

.sf01-practice-cta .sf01-link:hover {
  background: transparent;
  border-color: transparent;
  color: var(--mv-esc) !important;
}

.sf01-practice-cta .sf01-link:hover i {
  transform: translateX(4px);
}

/* ============================================================
   RESPONSIVO — PÁGINA COMO FUNCIONA
   ============================================================ */

@media (max-width: 1024px) {
  .sf01-concept {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 60px 32px;
  }

  .sf01-concept-image {
    max-width: 540px;
    margin: 0 auto;
    width: 100%;
  }

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

@media (max-width: 768px) {
  .sf01-edu-hero {
    padding: 72px 20px 60px;
  }

  .sf01-edu-hero .sf01-subtitle {
    font-size: 16px;
  }

  .sf01-concept {
    padding: 48px 20px;
    gap: 32px;
  }

  .sf01-practice {
    padding: 60px 20px 56px;
  }

  .sf01-practice-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .sf01-practice-cta .sf01-button-primary {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .sf01-title-large {
    font-size: 32px !important;
  }

  .sf01-practice-grid {
    grid-template-columns: 1fr;
  }

  .sf01-concept-content .sf01-title {
    font-size: 26px;
  }
}


/* ============================================================
   PÁGINA "PARA QUEM É" — CSS
   URL: /p/para-quem-e
   Body: .pagina-para-quem-e
   Wrapper: .sf01-banner.sf01-banner-audience > .sf01-container
   Seções:
     1. Hero          — gradiente azul, título com destaque amarelo
     2. Perfis        — fundo branco, grid 3 cols, cards com ícone
     3. Ambientes     — fundo off-white, grid 5 itens, botão CTA
   ============================================================ */

/* ── RESET DA PLATAFORMA ─────────────────────────────────── */
.pagina-para-quem-e .page-content {
  padding: 0;
}

.pagina-para-quem-e #content-main,
.pagina-para-quem-e .content-main-cols-1 {
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* Wrapper externo do banner */
.sf01-banner-audience {
  background: var(--mv-branco);
  font-family: var(--font-b);
}

.sf01-banner-audience .sf01-container {
  background: var(--mv-branco);
  padding: 0;
}

/* ============================================================
   1. HERO — "PARA QUEM É"
   Fundo: gradiente azul escuro (mesmo padrão das demais páginas)
   Tag pill branca | Título grande | Highlight amarelo em nova linha
   ============================================================ */
.sf01-audience-hero {
  background: linear-gradient(145deg, var(--mv-esc) 0%, #0d5fa0 55%, #1870b8 100%);
  padding: 96px 32px 100px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Efeitos radiais decorativos no fundo */
.sf01-audience-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 15% 60%, rgba(44,130,181,.45) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 20%, rgba(10,74,133,.55) 0%, transparent 50%);
  pointer-events: none;
}

.sf01-audience-hero > * {
  position: relative;
  z-index: 1;
}

/* Tag "PARA QUEM É" — pill estilo cápsula sobre fundo azul */
.sf01-audience-hero .sf01-tag {
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r-xl);
  padding: 5px 16px;
  font-size: 11px;
  letter-spacing: 2.5px;
  gap: 0;
  margin-bottom: 24px;
}

/* Remove a linha decorativa ::before dentro do hero */
.sf01-audience-hero .sf01-tag::before {
  display: none;
}

/* Título grande */
.sf01-audience-hero .sf01-title-large {
  font-family: var(--font-h);
  font-size: clamp(32px, 5vw, 56px) !important;
  color: var(--mv-branco);
  line-height: 1.12;
  max-width: 890px;
  margin: 0 auto 20px;
}

/* Destaque amarelo na segunda linha */
.sf01-audience-hero .sf01-highlight {
  color: var(--mv-amarelo);
  display: block;
}

/* Subtítulo */
.sf01-audience-hero .sf01-subtitle {
  font-family: var(--font-b);
  font-size: 17px;
  color: rgba(255,255,255,.78);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.75;
}

/* ============================================================
   2. PERFIS — "QUEM SE BENEFICIA DO SF01"
   Fundo: branco | grid 3 colunas (primeira linha) + 2 (segunda)
   Cards com: ícone azul | título azul | texto cinza
   ============================================================ */
.sf01-profiles {
  background: var(--mv-branco);
  padding: 80px 32px;
  text-align: center;
}

/* Tag "PERFIS" — azul padrão */
.sf01-profiles .sf01-tag {
  color: var(--mv-azul);
  margin-bottom: 14px;
}

.sf01-profiles .sf01-tag::before {
  background: var(--mv-amarelo);
}

/* Título da seção */
.sf01-profiles .sf01-title {
  font-size: clamp(24px, 3vw, 38px);
  color: var(--mv-azul);
  max-width: 600px;
  margin: 0 auto 48px;
}

/* Grid de perfis — 3 colunas (5 cards = 3+2) */
.sf01-profiles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}

/* Card de perfil */
.sf01-profile-card {
  background: var(--mv-branco);
  border: 1px solid var(--mv-borda);
  border-radius: var(--r-md);
  padding: 28px 24px;
  text-align: left;
  box-shadow: var(--sh);
  transition: all var(--tr);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.sf01-profile-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mv-azul), var(--mv-amarelo));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tr);
}

.sf01-profile-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh2);
  border-color: rgba(44,130,181,.25);
}

.sf01-profile-card:hover::before {
  transform: scaleX(1);
}

/* Ícone Font Awesome — caixa azul claro */
.sf01-profile-card > i {
  font-size: 18px;
  color: var(--mv-azul);
  width: 44px;
  height: 44px;
  background: rgba(44,130,181,.10);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: all var(--tr);
  float: none;
}

.sf01-profile-card:hover > i {
  background: rgba(44,130,181,.18);
  transform: scale(1.05);
}

/* Título do card */
.sf01-profile-title {
  font-family: var(--font-h);
  font-size: 16px;
  font-weight: 700;
  color: var(--mv-azul);
  margin-bottom: 8px;
  line-height: 1.3;
}

/* Texto do card */
.sf01-profile-text {
  font-family: var(--font-b);
  font-size: 14px;
  color: var(--mv-suave);
  line-height: 1.65;
  margin: 0;
}

/* ============================================================
   3. AMBIENTES — "USE ONDE FIZER SENTIDO"
   Fundo: off-white | grid 5 itens compactos
   Cards menores: ícone laranja centralizado | texto abaixo
   + botão primário laranja
   ============================================================ */
.sf01-environments {
  background: var(--mv-off);
  padding: 80px 32px;
  text-align: center;
}

/* Tag "AMBIENTES" — azul padrão */
.sf01-environments .sf01-tag {
  color: var(--mv-azul);
  margin-bottom: 14px;
}

.sf01-environments .sf01-tag::before {
  background: var(--mv-amarelo);
}

/* Título */
.sf01-environments .sf01-title {
  font-size: clamp(24px, 3vw, 38px);
  color: var(--mv-azul);
  max-width: 680px;
  margin: 0 auto 48px;
}

/* Grid 5 colunas para ambientes */
.sf01-environments-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  max-width: 900px;
  margin: 0 auto 40px;
}

/* Card de ambiente — compacto, centralizado */
.sf01-environment-card {
  background: var(--mv-branco);
  border: 1px solid var(--mv-borda);
  border-radius: var(--r-md);
  padding: 24px 16px;
  text-align: center;
  box-shadow: var(--sh);
  transition: all var(--tr);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: default;
  position: relative;
  overflow: hidden;
}

.sf01-environment-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mv-laranja), var(--mv-amarelo));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--tr);
}

.sf01-environment-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh2);
  border-color: rgba(44,130,181,.22);
}

.sf01-environment-card:hover::after {
  transform: scaleX(1);
}

/* Ícone — círculo com gradiente laranja */
.sf01-environment-card > i {
  font-size: 22px;
  color: var(--mv-branco);
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, var(--mv-laranja) 0%, #e8522a 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(249,87,56,.28);
  transition: transform var(--tr);
  float: none;
}

.sf01-environment-card:hover > i {
  transform: scale(1.08) rotate(-5deg);
}

/* Texto do ambiente */
.sf01-environment-text {
  font-family: var(--font-h);
  font-size: 14px;
  font-weight: 600;
  color: var(--mv-azul);
  margin: 0;
  line-height: 1.3;
}

/* Botão "Comprar SF01" — herda .sf01-button-primary */
.sf01-environments > .sf01-button-primary {
  /* herda todos os estilos globais */
  font-size: 15px;
}

/* ============================================================
   RESPONSIVO — PARA QUEM É
   ============================================================ */

@media (max-width: 1024px) {
  .sf01-profiles-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 700px;
  }

  .sf01-environments-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 600px;
  }
}

@media (max-width: 768px) {
  .sf01-audience-hero {
    padding: 72px 20px 80px;
  }

  .sf01-audience-hero .sf01-title-large {
    font-size: clamp(28px, 7vw, 40px) !important;
  }

  .sf01-audience-hero .sf01-subtitle {
    font-size: 16px;
  }

  .sf01-profiles,
  .sf01-environments {
    padding: 60px 20px;
  }

  .sf01-profiles-grid {
    grid-template-columns: 1fr;
    max-width: 440px;
  }

  .sf01-environments-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 380px;
    gap: 12px;
  }

  .sf01-environments .sf01-title {
    margin-bottom: 32px;
  }
}

@media (max-width: 480px) {
  .sf01-audience-hero .sf01-title-large {
    font-size: 28px !important;
  }

  .sf01-profiles-grid {
    max-width: 100%;
  }

  .sf01-environments-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }
}


/* ============================================================
   PÁGINA "A MOVEMENTE" — CSS
   URL: /p/a-movemente
   Body: .pagina-a-movemente
   Wrapper: .movemente-banner.movemente-about > .movemente-container
   Prefixo de classes: .movemente-*
   Seções:
     1. Hero       — gradiente azul, título com destaque amarelo
     2. Propósito  — 2 cards lado a lado: branco (esq) + azul (dir)
     3. Valores    — fundo off-white, grid 5 cards ícone + texto
   ============================================================ */

/* ── RESET DA PLATAFORMA ─────────────────────────────────── */
.pagina-a-movemente .page-content {
  padding: 0;
}

.pagina-a-movemente #content-main,
.pagina-a-movemente .content-main-cols-1 {
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* Esconde o título e breadcrumb padrão da plataforma */
.pagina-a-movemente .element-page-title,
.pagina-a-movemente .element-breadcrumb,
.pagina-a-movemente .header-box-content {
  display: none !important;
}

/* Wrapper externo */
.movemente-banner {
  font-family: var(--font-b);
  background: var(--mv-branco);
}

.movemente-about .movemente-container {
  background: var(--mv-branco);
  padding: 0;
}

/* ── TAG — padrão visual da Movemente ───────────────────── */
.movemente-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-h);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* ── TÍTULO PADRÃO ───────────────────────────────────────── */
.movemente-title {
  font-family: var(--font-h);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 14px;
}

/* ── TEXTO PADRÃO ────────────────────────────────────────── */
.movemente-text {
  font-size: 15px;
  line-height: 1.75;
  margin: 0;
}

/* ============================================================
   1. HERO — "SOBRE A MOVEMENTE"
   Mesmo padrão das demais páginas:
   Gradiente azul | tag pill branca | título grande | highlight amarelo
   ============================================================ */
.movemente-hero {
  background: linear-gradient(145deg, var(--mv-esc) 0%, #0d5fa0 55%, #1870b8 100%);
  padding: 96px 32px 100px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Efeitos radiais decorativos */
.movemente-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 60%, rgba(44,130,181,.40) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(10,74,133,.55) 0%, transparent 50%);
  pointer-events: none;
}

.movemente-hero > * {
  position: relative;
  z-index: 1;
}

/* Tag "SOBRE A MOVEMENTE" — pill branca */
.movemente-hero .movemente-tag {
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--r-xl);
  padding: 5px 16px;
  gap: 0;
  margin-bottom: 24px;
}

/* Título grande */
.moviment-title-large {
  font-family: var(--font-h);
  font-size: clamp(32px, 5vw, 56px) !important;
  font-weight: 800;
  color: var(--mv-branco);
  line-height: 1.12;
  max-width: 820px;
  margin: 0 auto 20px;
}

/* Destaque amarelo em nova linha */
.movemente-highlight {
  color: var(--mv-amarelo);
  display: inline; /* inline neste caso — palavra única no final */
}

/* Subtítulo */
.movemente-hero .movemente-subtitle {
  font-family: var(--font-b);
  font-size: 17px;
  color: rgba(255,255,255,.78);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.75;
}

/* ============================================================
   2. PROPÓSITO E MISSÃO
   Layout: 2 cards lado a lado
   Esquerdo: fundo branco, borda, texto azul
   Direito: fundo azul escuro, texto branco
   ============================================================ */
.movemente-purpose {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 64px 32px;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Card Propósito (branco / claro) ─────────────────────── */
.movemente-purpose-card {
  background: var(--mv-branco);
  border: 1px solid var(--mv-borda);
  border-radius: var(--r-lg);
  padding: 36px 32px;
  box-shadow: var(--sh);
  transition: all var(--tr);
  position: relative;
  overflow: hidden;
}

.movemente-purpose-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mv-azul), var(--mv-amarelo));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tr);
}

.movemente-purpose-card:hover {
  box-shadow: var(--sh2);
  transform: translateY(-3px);
}
.movemente-purpose-card:hover::before { transform: scaleX(1); }

/* Tag do card propósito */
.movemente-purpose-card .movemente-tag {
  color: var(--mv-azul);
  background: rgba(44,130,181,.08);
  border: 1px solid rgba(44,130,181,.18);
  border-radius: var(--r-xl);
  padding: 4px 12px;
  gap: 0;
  font-size: 10px;
}

/* Título do propósito */
.movemente-purpose-card .movemente-title {
  font-size: clamp(20px, 2.5vw, 26px);
  color: var(--mv-esc);
  margin-bottom: 14px;
  line-height: 1.25;
}

/* Texto do propósito */
.movemente-purpose-card .movemente-text {
  color: var(--mv-suave);
}

/* ── Card Missão (azul escuro) ───────────────────────────── */
.movemente-mission-card {
  background: var(--mv-esc);
  border-radius: var(--r-lg);
  padding: 36px 32px;
  box-shadow: var(--sh);
  transition: all var(--tr);
  position: relative;
  overflow: hidden;
}

/* Efeito radial sutil no card missão */
.movemente-mission-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 90% 10%, rgba(44,130,181,.40) 0%, transparent 60%);
  pointer-events: none;
}

.movemente-mission-card > * { position: relative; z-index: 1; }

.movemente-mission-card:hover {
  box-shadow: var(--sh2);
  transform: translateY(-3px);
}

/* Tag do card missão */
.movemente-mission-card .movemente-tag {
  color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: var(--r-xl);
  padding: 4px 12px;
  gap: 0;
  font-size: 10px;
}

/* Título da missão */
.movemente-mission-card .movemente-title {
  font-size: clamp(20px, 2.5vw, 26px);
  color: var(--mv-branco);
  margin-bottom: 14px;
  line-height: 1.25;
}

/* Texto da missão */
.movemente-mission-card .movemente-text {
  color: rgba(255,255,255,.75);
}

/* ============================================================
   3. VALORES — "O QUE NOS GUIA"
   Fundo: off-white | centralizado
   Grid 5 cards: ícone azul claro + texto azul
   ============================================================ */
.movemente-values {
  background: var(--mv-off);
  padding: 80px 32px;
  text-align: center;
}

/* Tag "VALORES" */
.movemente-values .movemente-tag {
  color: var(--mv-azul);
  background: rgba(44,130,181,.08);
  border: 1px solid rgba(44,130,181,.18);
  border-radius: var(--r-xl);
  padding: 4px 14px;
  gap: 0;
  margin-bottom: 14px;
}

/* Título */
.movemente-values .movemente-title {
  font-size: clamp(26px, 3vw, 38px);
  color: var(--mv-azul);
  max-width: 600px;
  margin: 0 auto 48px;
}

/* Grid 5 colunas */
.movemente-values-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}

/* Card de valor */
.movemente-value-card {
  background: var(--mv-branco);
  border: 1px solid var(--mv-borda);
  border-radius: var(--r-md);
  padding: 28px 16px 22px;
  text-align: center;
  box-shadow: var(--sh);
  transition: all var(--tr);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
  cursor: default;
}

.movemente-value-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mv-azul), var(--mv-amarelo));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--tr);
}

.movemente-value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh2);
  border-color: rgba(44,130,181,.22);
}

.movemente-value-card:hover::after {
  transform: scaleX(1);
}

/* Ícone Font Awesome — círculo/caixa azul claro */
.movemente-value-card > i {
  font-size: 20px;
  color: var(--mv-azul);
  width: 48px;
  height: 48px;
  background: rgba(44,130,181,.10);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--tr);
  float: none;
}

.movemente-value-card:hover > i {
  background: rgba(44,130,181,.18);
  transform: scale(1.08);
}

/* Texto do valor */
.movemente-value-text {
  font-family: var(--font-h);
  font-size: 14px;
  font-weight: 700;
  color: var(--mv-azul);
  margin: 0;
  line-height: 1.35;
}

/* ============================================================
   RESPONSIVO — A MOVEMENTE
   ============================================================ */

@media (max-width: 1024px) {
  .movemente-values-grid {
    grid-template-columns: repeat(3, 1fr);
    max-width: 700px;
  }
}

@media (max-width: 768px) {
  .movemente-hero {
    padding: 72px 20px 80px;
  }

  .moviment-title-large {
    font-size: clamp(28px, 7vw, 40px) !important;
  }

  .movemente-purpose {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 48px 20px;
  }

  .movemente-purpose-card,
  .movemente-mission-card {
    padding: 28px 24px;
  }

  .movemente-values {
    padding: 60px 20px;
  }

  .movemente-values-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 440px;
  }

  .movemente-values .movemente-title {
    margin-bottom: 32px;
  }
}

@media (max-width: 480px) {
  .moviment-title-large {
    font-size: 28px !important;
  }

  .movemente-values-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }

  .movemente-purpose-card .movemente-title,
  .movemente-mission-card .movemente-title {
    font-size: 20px;
  }
}

body:not(.pagina-home):not(.pagina-categoria):not(.pagina-marca):not(.pagina-busca):not(.pagina-tag) #content-main,
body:not(.pagina-home):not(.pagina-categoria):not(.pagina-marca):not(.pagina-busca):not(.pagina-tag) #content-main > .container-12 {
    width: 100%!important;
}

#footer-main {
    margin-top: 0px!important;
}

.element-product-detail .wrapper-product-price {
    display: grid;
}

.content-main-cols-1 .element-product-detail .wrapper-product-price .product-price {
    width: 100%!important;
    padding: 0!important;
}

.element-product-detail .wrapper-product-price .product-price .product-new-price .product-big-price {
    font-weight: bold;
}

.element-product-detail .product-thumbnails .product-thumbnails-list a, .element-product-detail .product-thumbnails .product-thumbnails-list div {
    height: 54px;
    padding: 0 !important;
    width: 54px;
    border-radius: 10px!important;
}

.element-product-detail {
    margin-bottom: 0;
}

.wrapper-product-combination .product-combination-list .product-combination-item label {
    border: 2px solid #ccc;
    border-radius: 10px;
    padding: 8px;
}

.header-box-content,
.element-breadcrumb,
.box-shipping,
.wrapper-btn-actions,
.product-sharing,
#product-rating,
.product-category,
.wrapper-product-parcels,
.shopping-cart-total-price-wrapper
 {display:none!important;}

/*ajustes nos icones das formas de envio*/

div.icon-delivery-transportadora-jadlog-\.package.lazyload { 
    background-position: center -646px; 
}

#header-main .element-shopping-cart .link-shopping-cart .icon-shopping-cart {
    position: unset;
}

#header-main .element-shopping-cart .link-shopping-cart {
    background: transparent;
    color: #0a4a85;
    padding: 0;
}

#header-main .element-shopping-cart .link-shopping-cart .shopping-cart-total-products-wrapper {
    display: block;
    font-size: 0;
}

.shopping-cart-total-products {
    display: block;
    width: 20px;
    height: 20px;
    background: var(--btn-detail-color);
    color: white;
    text-align: center;
    border-radius: 100%;
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 12px;
}

span[class^="icon"].icon-shopping-cart {
    font-size: 30px;
}

div.icon-delivery-transportadora-jadlog-\.com.lazyload { 
    background-position: center -825px; 
}

div.icon-delivery-transportadora-latam-cargo-efacil.lazyload{ 
    background-position: center -863px; 
}

div.icon-delivery-transportadora-azul-cargo-express-expresso.lazyload{ 
    background-position: center -72px; 
}

div.icon-delivery-transportadora-azul-cargo-express-e-commerce.lazyload{ 
    background-position: center -684px; 
}

div.icon-delivery-mini-envios.lazyload{ 
    background-position: center -900px; 
}

div.icon-delivery-transportadora-buslog-rodoviario.lazyload{ 
    background-position: center -684px; 
}

div.icon-delivery-transportadora-jadlog-\.package-centralizado.lazyload{ 
    background-position: center -109px; 
}

div.icon-delivery-transportadora-loggi-express.lazyload{ 
    background-position: center -684px; 
}

div.icon-delivery-transportadora-loggi-coleta.lazyload{ 
    background-position: center -684px; 
}

div.icon-delivery-transportadora-jet-standard.lazyload{ 
    background-position: center -684px; 
}

div.icon-delivery-transportadora-loggi-loggi-ponto.lazyload{ 
    background-position: center -684px; 
}

div.icon-delivery-transportadora-total-express-standard.lazyload{ 
    background-position: center -684px; 
}

.wrapper-product-combination .product-combination-list .product-combination-item.product-combination-active {
    border-color: transparent;
}

.wrapper-product-combination .product-combination-list.error {
    border-radius: 15px;
}

.wrapper-product-combination .product-combination-list {
    width: auto;
}

.box-cart-final {
    border-radius: 20px;
}

#cart-final .box-cart-final-right {
    background: var(--mv-off);
    border-radius: 20px;
}

.box-order-summary .box-order-summary-content .list-order-summary li .final-product-image .final-product-amount {
    background: var(--btn-detail-color);
    min-width: 18px;
}

#cart-final input[type="email"], #cart-final input[type="number"], #cart-final input[type="password"], #cart-final input[type="tel"], #cart-final input[type="url"], #cart-final input[type="text"], #cart-final input[type="search"], #cart-final input[type="creditcard"], #cart-final input[type="cpf"], #cart-final select {
    padding: 7px 10px!important;
}

.box-cart-final .box-cart-edit,
.list-shipping .list-shipping-item {
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="url"], input[type="text"], input[type="search"], input[type="creditcard"], input[type="cpf"], select, textarea, 
.list-payment .list-payment-item {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

#cart-products-table .cart-products-list .cart-products-list-item > div.cart-item-amount-holder .cart-item-decrement, 
#cart-products-table .cart-products-list .cart-products-list-item > div.cart-item-amount-holder .cart-item-increment {
    border-radius: 100%;
}

span[class^="icon"].icon-minus, span[class^="icon"].icon-plus {
    height: 18px;
    line-height: 18px;
    width: 18px;
}

#cart-products-table .cart-products-header, .label-block {
    font-weight: bold;
}

#footer-main .element-delivery-methods .delivery-methods-list .delivery-methods-item,
#footer-main .element-payment-methods .payment-methods-list .payment-methods-item {
    background: white;
    border: 0;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

body:not(.pagina-home):not(.pagina-categoria):not(.pagina-marca):not(.pagina-busca):not(.pagina-tag) #content-main {
    padding: 0!important;
}

.element-product-detail .wrapper-product-price .product-price .product-parcelled-price, .element-product-detail .wrapper-product-price .product-price .product-price-off {
    font-size: 14px;
}


/*FIM*/