.container-franquia {width:100%;max-width: 1596px;margin: 0 auto;}
.top {height: 120px;padding-top: 23px;}
.bottom {height: auto;padding-top: 23px;padding-bottom: 30px;}
.top-30 {padding-top: 30px;}
.left-30 {padding-left: 30px;}
.col-3.text-start.left-30 {padding-left: 30px;}
.top-40 {padding-top: 40px;}
.top-15 {padding-top: 15px;}
.col-6.text-start.font-color-white.left-30 {padding-left: 30px;}
.right-30 {padding-right: 30px;}
.col-6.text-end.right-30 {padding-right: 30px;}
.bottom-15 {padding-bottom: 15px;}
.bottom-30 {padding-bottom: 30px;}
.padding-30 {padding: 30px;}
.padding-40 {padding: 40px;}
.seja-franqueado {display: block;background: #9C1F1E;color: #ffffff;border-radius: 15px;border: 0px;padding: 10px;font-size: 16px;font-weight: bold;}
.menu:last-child {padding: 0px;}
.form-franquia {height: auto;background: url('../imagens/hero_form_lateral.webp');background-size: cover;padding-bottom: 60px;}
.form-franquia-rodape {height: auto;background: url('../imagens/hero_form_rodape.webp');background-size: cover;padding-bottom: 40px;}
.padding-15 {padding: 15px;}
.border-radius-15 {border-radius:15px;}
.center-title {text-align: center;}
.ico-position {margin: 0 auto;display: block;margin-top: -86px;}
.botao-enviar {color:#ffffff;font-size: 1.2vw;height: 50px;border: 0px;}
.borda-cinza {border: solid 1px #CFC5C5;}
/*cores*/
.bg-preto {background: #000000;}
.bg-red {background: #9C1F1E;}
.bg-branco {background: #ffffff;}
.cinza {color:#353535;}
.box-cinza, .box-cinza-claro, .box-modelos, .box-dourado {background: #373737;border-radius: 1vw;color: #ffffff;padding: 40px;}
.box-cinza-claro {background: #585B58;}
.box-dourado {background: #B5A890;min-width:346px;max-width: 346px;display: inline-block;margin-right: 10px;}
.box-modelos {padding: 0px;}

button.accordion-button, button.accordion-button {background:#585B58 !important;color: #ffffff !important;font-size: 1vw;}
.accordion-body, .accordion-body.lato-regular.size-24 {background:#585B58;color: #ffffff;font-size: 1vw;}
.accordion-item {margin: 10px 0px 10px 0px;border-radius: 15px !important;}
button.accordion-button.lato-bold.size-32.collapsed {border-radius: 15px;font-size: 1.3vw;font-weight: 500;}
button.accordion-button.collapsed {border-radius: 15px !important;}
.accordion-body.lato-regular.size-24 {border-radius: 0px 0px 15px 15px;}
.accordion-item:first-of-type>.accordion-header .accordion-button {border-radius: 15px 15px 0px 0px;}
.accordion-body {border-radius: 0px 0px 15px 15px;}
.accordion-button:not(.collapsed) {border-radius: 15px 15px 0px 0px !important;}
button.accordion-button.lato-bold.size-32.collapsed {border-radius: 15px 15px 15px 15px !important;}
button.accordion-button.lato-bold {font-size: 1.2vw;font-weight: 400;}
.foto-marca {background:url('../imagens/foto-marca.webp');background-size:contain;background-repeat: no-repeat;background-position-x: center;}
.botao-entender {display: inline-block;padding: 15px 40px;border-radius: 15px;}
.border-radius-bottom-15 {border-radius: 0px 0px 15px 15px;}
.border-radius-top-15 {border-radius: 15px 15px 0px 0px;}
.font-color-white {color: #ffffff;}
.font-color-dourado {color:#353535;line-height:2.5vw;}
.form-franqueado {min-width: 540px;}

.row-cols-4 {padding-left:30px;padding-right:30px;}
.row-cols-2 {padding-left:30px;padding-right:30px;}
.row-cols-3 {padding-left:30px;padding-right:30px;}
.container-fluid.form-franquia-rodape {padding-bottom: 0px;}
.col.text-end.bottom-0 {margin-top: 20px;}
.container-franquia.size-50.center-title.top-15.bottom-15.lato-regular {padding-bottom: 36px;}
.container.mt-4 {padding: 0px;}
/* links */
a {text-decoration: none !important;}
.font-color-white a {color:#ffffff;}
.menu a {display: inline-block;padding: 10px 30px;}

a.beneficios {text-decoration: none;color:#9C1F1E;font-weight:bold;}

/* form*/
input {height: 40px;padding:5px 10px;border-radius: 10px;border:  1px solid #CFC5C5;font-family: arial;font-size: 16px;width: 100%;}
.campo div {padding: 10px 0px;}
.checkbox-form {border:  1px solid #CFC5C5;width: 30px;height: 30px;}
:root, [data-bs-theme=light] {
    --bs-blue: #0d6efd;
}
.p-3.box-cinza.bloco-pilar {min-height: stretch;}
.row.row-cols-2.bloco-beneficio {padding: 0px;}
.row.foto-marca-joao {display: none;}

@media (max-width: 1820px) {
	.box-dourado.center-title img {width: 55%;}
	.box-dourado.center-title {min-width: 320px;}
}

@media (max-width: 1600px) {
.col.text-end.bottom-0 img {max-height: 686px;}
}

@media (max-width: 1530px) {
.size-13 {font-size:0.9vw !important;}
.col-6.text-start.font-color-white.left-30.size-14 {font-size: 1vw;}
span.size-40.font-color-dourado.lato-bold {font-size: 1.7vw;}
.box-dourado.center-title {min-width: 295px;padding: 30px;}
}

@media (max-width: 1110px) {
.size-13 {font-size:1.0vw !important;}
}

@media (max-width: 1359px) {
	.container-fluid.bg-preto.mobile-top {height: 140px;}
	.col-3.text-start.left-30 {width: 100%;}
	.col-3.text-start.left-30 img {display: block;margin: 0 auto;}
	.container-franquia.top img {max-width: 145px;}
	.col-9.text-end.font-color-white.menu.lato-regular {width: 100%;}
	.col-9.text-end.font-color-white.menu.lato-regular {text-align: center !important;}
	.menu a {font-size: 16px;padding: 10px;}
	.form-franquia {height: auto;background: url('../imagens/home-header-mobile.webp');padding-bottom: 30px;background-size: auto;background-repeat: no-repeat;background-position: 	right 0px;background-color: #000000;}
	.col-4.mobile-form {width: 100%;}
	.size-42.lato-regular.form-franqueado {font-size: 30px;}
	.title-mobile div {width: 400px;color: #ffffff;}
	.size-42.lato-regular.form-franqueado.title-mobile {min-width: 400px;}
	.top-30.left-30 {padding-left: 15px;}
	.col.nossoss-pilares div.p-3.box-cinza {height: stretch;}
	.p-3.box-cinza-claro.center-title.padding-40.lato-bold {height: stretch;}
	.padding-30.texto-um-franqueado {padding: 10px;}
	.accordion-body.lato-regular.size-24 {font-size: 16px;}
	button.accordion-button.lato-bold {font-size: 19px;}
	.col-6.text-end.right-30 {width: 100%;text-align: center !important;border-right: 0px !important;}
	.col-6.text-start.font-color-white.left-30.size-14 {text-align: center !important;width: 100%;padding-top: 20px;font-size: 12px;}
	.col-6.text-end.right-30 img {width: 148px;}
	.acordo {font-size: 14px;}
	span.lato-semibold.size-15 {font-size: 15px;}
	span.lato-semibold.color-red.size-19 {font-size: 19px;}
	.size-30.lato-regular.top-15.bottom-15 {font-size: 19px;}
	.size-42.lato-bold.form-title {font-size: 26px;}
	input.form-control.form-control-lg {font-size: 16px;}
}
@media (max-width: 1040px) {
	body {overflow-x: hidden;}
	.padding-30.texto-um-franqueado span.size-24 {font-size: 16px;}
	.form-franquia {background-position-x: 	-180px;background-size: 120%;}
	.lato-regular.padding-40 span.size-50 {font-size: 24px;}
	.lato-regular.padding-40 span.size-40 {font-size: 19px;}
	.p-3.box-cinza-claro.uma-marca div {padding: 20px;}
	.container-franquia.top-30.bottom-30.um-franqueado-2 {padding-bottom: 0px;}
	.row.row-cols-3.modelos-de-negocio {display: block;}
	.row.row-cols-3.modelos-de-negocio div {margin: 0 auto;padding-bottom: 15px;}
	.box-modelos.center-title.lato-regular.padding-40 {min-width: 360px;}
	.col.modelo-negocio {width: 360px;}
	.row.top-30.modelo-regra-negocio {padding-top: 0px;}
	.box-modelos.center-title.lato-regular.padding-40 span.size-26 {font-size: 16px;}
	.box-modelos.center-title.lato-regular.padding-40 span.size-30 {font-size: 16px;}
	.col.bloco-beneficio-1 {width: 100%;}
	.col.bloco-beneficio-2 {width: 100%;}
	.no-line-beneficio {display: none;}	
	.center-title.botton-taxa {width: fit-content;margin: 0 auto;}
	.center-title.botton-taxa a {padding: 0px 15px;font-size: 16px;}
	span.size-15.lato-regular.cinza-claro em {text-align: center;display: block;font-size: 12px;padding-top: 10px;}
	span.size-30.lato-regular.bloco-beneficio-texto {font-size: 16px;}
	.box-dourado.center-title {min-width: 214px;}
	.col.left-30.franqueado-rodape {width: 60%;}
	.col.text-end.bottom-0.joaoappolinario {width: 40%;}
}
@media (max-width: 910px) {
	.form-franquia {background-position-x: 	-100px;background-size: 120%;}
	.col.nossoss-pilares {width: 100%;margin-bottom: 60px;}
	img.ico-position {width: 70px;margin-top: -54px;}
	.lato-regular.padding-40.nossos-pilares-texto {padding: 10px;}
	.container-franquia.top-30.bottom-30.lato-regular.center-title {padding: 0px;}
	.col.nossoss-pilares:nth-child(3) {margin-bottom: 20px;}
	.padding-30.texto-um-franqueado span.size-60 {font-size: 19px;}
	.container-franquia.top-30.bottom-30.lato-regular.center-title.um-franqueado-botton {padding-top: 20px;}
	.col.um-franqueado {width: 50%;margin-bottom: 20px;}
	.container-franquia.top-30.bottom-30 {padding-top: 0px;}
	.container-franquia.bottom-15.ser-franqueado {padding-bottom: 0px;}
	.container-franquia.size-50.center-title.top-15.bottom-15.lato-regular {padding-bottom: 0px;}
	.container-franquia.top-30.bottom-15.lato-regular.center-title.um-franqueado-botton {padding-top: 10px;}
	.col.multicategorias {width: 216px;padding-bottom: 18px;}
	.row.row-cols-5.multicategorias.center-title div {margin: 0 auto;}
	span.size-26.lato-bold.font-color-white.multicategorias {font-size: 15px;}
	.box-dourado.center-title {min-width: 160px;margin-right: 10px !important;}
	.col.text-end.bottom-0.joaoappolinario {display: none;}
	.col.left-30.franqueado-rodape {width: 100%;}
	span.size-42.lato-bold.franqueado {font-size: 22px;}
	.no-line-franqueado {display: none;}
	span.size-32.lato-regular.texto-franqueado {font-size: 16px;}
	.top-40.form-franqueado-2 {padding-bottom: 30px;}
	img.proximo {width: 125px;}
	.box-cinza.border-radius-15.padding-15.campo {padding: 20px;}

}

@media (max-width: 800px) {
	.lato-regular.padding-40 span.size-50 {font-size: 19px;}
	.lato-regular.padding-40 span.size-40 {font-size: 16px;}
	.p-3.box-cinza-claro.uma-marca div {padding: 10px;}
	span.size-32.nossos-pilares-texto-descricao {font-size: 16px;}
	span.size-24.modelos-negocio {font-size: 13px;}
	span.size-40.modelos-negocio {font-size: 16px;}
	.container-franquia.top-30.bottom-30.lato-regular.center-title.modelos-negocio {padding-top: 15px;}
	span.size-50.lato-bold.modelos-negocio {font-size: 18px;}
	.container-franquia.size-50.center-title.lato-regular {font-size: 19px;}
	
	
}

@media (max-width: 780px) {
	.col.mobile-tradicao {width: 50%;margin-bottom: 20px;}
	.size-32.lato-regular.mobile-tradicao {font-size: 20px;}
	.container-franquia.size-50.center-title.top-15.bottom-15.lato-regular {font-size: 19px;}
	.col.foto-marca {display: none;}
	.row.row-cols-2 div {width: 100%;margin: 0 auto;}
	.row.foto-marca-joao {display: block;text-align: center;}
	.row.foto-marca-joao img  {width: 50%;min-width: 300px;}
	.ico-uma-marca {width: 50px;}
	.line-marca {display: none;}
	.padding-30.texto-um-franqueado span.size-50 {font-size: 16px;}
	.padding-30.texto-um-franqueado span.size-40 {font-size: 16px;}
	.container-franquia.top-30.bottom-30.lato-regular.center-title a {font-size: 16px;}
	.box-modelos.center-title.lato-regular.padding-40 span.size-60 {font-size: 19px;}
	.box-modelos.center-title.lato-regular.padding-40 span.size-32 {font-size: 16px;}
	span.size-40.font-color-dourado.lato-bold {font-size: 15px;}
	.container-fluid.top-30.bottom-30 {padding-bottom: 0px;}
	.container-fluid.top-30 {padding-top: 0px;}
	.container-franquia.bottom-30 { padding-bottom: 0px;}
	
}
@media (max-width: 710px) {
	.size-42.lato-regular.form-franqueado.title-mobile {font-size: 23px;}
	.form-franqueado {width: 100%;min-width: 100%;}
	.container-franquia.size-50.center-title.top-15.bottom-15.lato-bold {font-size: 21px;}
	.container-franquia.size-50.top-15.bottom-15.lato-bold.faq {font-size: 19px;}
	.bg-red.font-color-white.size-32.botao-entender.lato-semibold a {font-size: 16px;}
}
@media (max-width: 670px) {
		.col.multicategorias {width: 206px;padding-bottom: 18px;}
}

@media (max-width: 600px) {
	.form-franquia {background: url('../imagens/transp.png');background-color: #000000;}
	.size-42.lato-regular.form-franqueado.title-mobile {width: 100%;}
	.size-30.lato-regular.top-15.bottom-15 {width: 100%;font-size: 16px;}
	.col.um-franqueado {width: 100%;margin-bottom: 20px;}
}

@media (max-width: 568px) {
	.container-fluid.bg-preto.mobile-top {height: 190px;}
	.size-32.lato-regular.mobile-tradicao {font-size: 16px;}
	.lato-regular.padding-40.nossos-pilares-texto {padding: 0px;}
	.size-42.lato-regular.form-franqueado.title-mobile {min-width: 100%;}
	.row.row-cols-4.mobile-tradicao {padding: 0px 10px;}
	.col.mobile-tradicao {padding: 6px;}
	.row.row-cols-2.marca-franquia {padding: 0px 10px;}
}

@media (max-width: 468px) {
	img.img-mobile-tradicao {width: 45px;}
	.size-32.lato-regular.mobile-tradicao {font-size: 14px;}
	.p-3.box-cinza.mobile-tradicao {min-height: stretch;}
	.col.modelo-negocio {width: 280px;}
	.box-modelos.center-title.lato-regular.padding-40 {min-width: 280px;}
	.container-fluid.form-franquia-rodape {padding: 0px;}
	.col-9.text-end.font-color-white.menu.lato-regular {padding-left: 10px;}
	.row.row-cols-3.nossoss-pilares {padding: 0px;}
	.row.row-cols-4.franqueados {padding: 0px 10px;}
	.col.um-franqueado {padding: 0px;}
	.col.modelo-negocio {padding: 0px;}
	.col.bloco-beneficio-1 span.size-50 {font-size: 21px;}
	.col.bloco-beneficio-1 {padding: 10px;}
	.col.bloco-beneficio-2 {padding: 10px;}
	.container-franquia.top-30.bottom-30 {padding-bottom: 15px;}
}
/* ===== Header 2026: hover vermelho + menu recolhivel (hamburguer) ===== */
.container-fluid.bg-preto.mobile-top { position: relative; }
.menu .menu-links { display: inline; }
.menu a { position: relative; text-decoration: none; transition: color .25s ease; }
.menu a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px;
  height: 2px; background: #9C1F1E; transform: scaleX(0); transform-origin: left center;
  transition: transform .28s ease; pointer-events: none;
}
.menu a:hover::after, .menu a:focus-visible::after { transform: scaleX(1); }
.menu a:hover { color: #f1f1f1; }

.menu-toggle { display: none; background: transparent; border: 0; width: 46px; height: 40px; padding: 8px; cursor: pointer; vertical-align: middle; }
.menu-toggle span { display: block; height: 2px; width: 100%; margin: 5px 0; background: #fff; border-radius: 2px; transition: transform .3s ease, opacity .2s ease; }
.menu.open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu.open .menu-toggle span:nth-child(2) { opacity: 0; }
.menu.open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .container-fluid.bg-preto.mobile-top { height: auto !important; }
  .container-franquia.top { height: auto; padding: 12px 0; }
  .container-franquia.top .row { align-items: center; }
  .container-franquia.top img { width: 100%; max-width: 130px; }
  .col-9.text-end.font-color-white.menu.lato-regular { width: auto; text-align: right !important; padding-left: 0; }
  .menu-toggle { display: inline-block; }
  .menu .menu-links {
    display: block; position: absolute; top: 100%; left: 0; right: 0;
    background: #000; border-top: 2px solid #9C1F1E;
    max-height: 0; overflow: hidden; transition: max-height .35s ease; z-index: 60;
  }
  .menu.open .menu-links { max-height: 340px; }
  .menu .menu-links a { display: block; text-align: center; padding: 15px 10px; font-size: 17px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .menu .menu-links a::after { display: none; }
}

/* ============================================================
   FORM MULTI-ETAPAS + HERO ESCURO (Polishop) — iteração form 1
   ============================================================ */
:root { --pl-red:#E2241B; --pl-red-dark:#b81a13; --pl-ink:#15171c; }

/* Hero: overlay escuro no lado do texto/form, fachada visível à direita */
.container-fluid.form-franquia { position: relative; }
.container-fluid.form-franquia::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: linear-gradient(90deg, rgba(9,10,12,.94) 0%, rgba(9,10,12,.86) 36%, rgba(9,10,12,.45) 58%, rgba(9,10,12,0) 82%);
}
.container-fluid.form-franquia > * { position: relative; z-index: 1; }
.form-franquia .form-franqueado,
.form-franquia .size-30.lato-regular { color:#fff; }
.form-franquia .size-30.lato-regular b { color:#fff; }

/* Card do formulário (escuro) */
.fform .fcard {
  background: var(--pl-ink);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 26px 24px;
  max-width: 520px;
  box-shadow: 0 24px 50px -20px rgba(0,0,0,.6);
  color: #fff;
}
.fcard__title { font-size: 1.7rem; font-weight: 700; margin-bottom: 16px; line-height: 1.1; }

/* Campos */
.fform .field { margin-bottom: 14px; }
.fform .field-row { display: flex; gap: 12px; }
.fform .field-row .field { flex: 1; }
.fform label { display: block; font-size: .82rem; color: #b9bcc4; margin-bottom: 6px; font-weight: 500; }
.fform input[type=text], .fform input[type=email], .fform input[type=tel], .fform .fselect {
  width: 100%; background: #0f1115; border: 1px solid #2a2e37; color: #fff;
  border-radius: 10px; padding: 13px 14px; font-size: 1rem; outline: none;
  transition: border-color .2s, box-shadow .2s; font-family: inherit;
}
.fform input::placeholder { color: #6b7080; }
.fform input:focus, .fform .fselect:focus {
  border-color: var(--pl-red); box-shadow: 0 0 0 3px rgba(226,36,27,.18);
}

/* Selects com seta custom */
.fform .fselect {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b9bcc4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;
}
.fform .fselect option { background:#1d2026; color:#fff; }

/* Erros */
.fform .err { display: none; color: #ff6b6b; font-size: .78rem; margin-top: 5px; }
.fform .field.has-error .err { display: block; }
.fform .field.has-error input, .fform .field.has-error .fselect, .fform input.is-error, .fform .fselect.is-error { border-color: #ff5b5b; }

/* Passos (um por vez) */
.fform .fstep { display: none; }
.fform .fstep.is-active { display: block; animation: fstepIn .3s ease; }
@keyframes fstepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Topo / voltar */
.fform__top { min-height: 0; }
.btn-back { background: none; border: 0; color: #b9bcc4; font-size: .9rem; cursor: pointer; padding: 2px 0 8px; }
.btn-back:hover { color: #fff; }

/* Rodapé do form: dots + botão */
.fform__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; gap: 14px; }
.dots { display: flex; gap: 8px; }
.dots span { width: 9px; height: 9px; border-radius: 50%; background: #3a3f4a; transition: background .25s, transform .25s; }
.dots span.is-on { background: var(--pl-red); transform: scale(1.18); }
.btn-next {
  display: inline-flex; align-items: center; gap: 10px; margin-left: auto;
  background: var(--pl-red); color: #fff; border: 0; border-radius: 12px;
  padding: 13px 26px; font-weight: 700; font-size: 1rem; cursor: pointer; letter-spacing: .02em;
  transition: background .2s, transform .15s, box-shadow .2s;
}
.btn-next:hover { background: var(--pl-red-dark); transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(226,36,27,.7); }
.btn-next:disabled { opacity: .6; cursor: default; }
.btn-next .ic svg { width: 20px; height: 20px; display: block; }

/* Consentimento + mensagem */
.form-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .82rem; color: #b9bcc4; margin-top: 8px; cursor: pointer; }
.form-consent input { margin-top: 3px; accent-color: var(--pl-red); width: 18px; height: 18px; flex: none; }
.form-msg { margin-top: 12px; font-size: .9rem; min-height: 1.1em; color: #cfd2d9; }
.form-msg.is-error { color: #ff6b6b; }

/* CTA do rodapé (rola pro form) */
.btn-cta-rodape { display: inline-block; background: var(--pl-red); color: #fff; border-radius: 12px; padding: 14px 32px; font-weight: 700; text-decoration: none; transition: background .2s, transform .15s; }
.btn-cta-rodape:hover { background: var(--pl-red-dark); transform: translateY(-1px); color: #fff; }

/* hover do menu na cor da marca (unificado) */
.menu a::after { background: var(--pl-red); }

@media (max-width: 768px) {
  .fform .fcard { max-width: 100%; padding: 22px 18px; }
  .fform .field-row { flex-direction: column; gap: 0; }
  .container-fluid.form-franquia::before { background: linear-gradient(180deg, rgba(9,10,12,.86), rgba(9,10,12,.92)); }
}

/* Animação dos botões (seta desliza no hover) + polimento */
.btn-next .ic { transition: transform .2s ease; }
.btn-next:hover .ic { transform: translateX(5px); }
.btn-next:active { transform: translateY(0) scale(.98); }
.btn-cta-rodape { position: relative; }
.btn-cta-rodape::after { content: "→"; display: inline-block; margin-left: 10px; transition: transform .2s ease; }
.btn-cta-rodape:hover::after { transform: translateX(5px); }
.btn-back { transition: color .2s, transform .2s; }
.btn-back:hover { transform: translateX(-3px); }
/* foco visível por teclado (acessibilidade) */
.btn-next:focus-visible, .btn-cta-rodape:focus-visible { outline: 3px solid rgba(226,36,27,.45); outline-offset: 2px; }

/* ===== Modal do formulário (CTA abre o form em pop-up, igual Decor) ===== */
.fmodal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(6,7,9,.74); opacity: 0; transition: opacity .3s ease; overflow-y: auto; }
.fmodal.is-open { opacity: 1; }
.fmodal__panel { position: relative; width: 100%; max-width: 520px; transform: translateY(14px) scale(.98); transition: transform .3s ease; margin: auto; }
.fmodal.is-open .fmodal__panel { transform: none; }
.fmodal__close { position: absolute; top: -14px; right: -6px; background: rgba(255,255,255,.12); color: #fff; border: 0; width: 40px; height: 40px; border-radius: 50%; font-size: 1.6rem; line-height: 1; cursor: pointer; z-index: 3; transition: background .2s, transform .2s; }
.fmodal__close:hover { background: rgba(255,255,255,.24); transform: rotate(90deg); }
.fmodal__body .title-mobile { display: none; }      /* esconde o título do hero dentro do modal */
.fmodal__body .top-30 { padding: 0 !important; }
.fmodal__body .left-30 { margin-left: 0 !important; }
.fmodal__body .fcard { max-width: 100%; }
body.modal-open { overflow: hidden; }
@media (max-width: 768px) { .fmodal__close { top: 6px; right: 6px; } }

/* ===== Hero responsivo: fachada visível no mobile/tablet (não mais preto puro) ===== */
@media (max-width: 1359px) {
  .container-fluid.form-franquia, .form-franquia {
    background-image: url('../imagens/hero_form_lateral.webp') !important;
    background-size: cover !important;
    background-position: 70% center !important;
    background-repeat: no-repeat !important;
    background-color: #0a0b0c !important;
  }
  /* overlay mais escuro no topo (atrás do título) e mais leve embaixo (fachada aparece) */
  .container-fluid.form-franquia::before {
    background: linear-gradient(180deg, rgba(9,10,12,.92) 0%, rgba(9,10,12,.80) 45%, rgba(9,10,12,.55) 100%) !important;
  }
}

/* ===== Form: altura travada entre passos (sem pulo/quebra na página) ===== */
.fform .fstep { min-height: 300px; }
@media (max-width: 768px) { .fform .fstep { min-height: 315px; } }

/* ===== Consentimento: checkbox alinhado com a 1a linha do texto ===== */
.fform .form-consent { align-items: flex-start; gap: 10px; }
.fform .form-consent input { width: 18px; height: 18px; flex: 0 0 18px; margin: 2px 0 0; }
.fform .form-consent span { line-height: 1.4; }

/* ===== Hero desktop: painel escuro recortado na diagonal + traço vermelho gradiente ===== */
@media (min-width: 1360px) {
  .container-fluid.form-franquia { overflow: hidden; }
  /* painel escuro à esquerda, recortado na diagonal (não invade a fachada) */
  .container-fluid.form-franquia::before {
    background: linear-gradient(115deg, #0a0b0d 0%, #121419 55%, #16181d 100%) !important;
    clip-path: polygon(0 0, 46.0% 0, 44.6% 100%, 0 100%);
  }
  /* traço diagonal vermelho (gradiente claro -> escuro) na emenda */
  .container-fluid.form-franquia::after {
    content: ""; position: absolute; top: -6%; bottom: -6%; left: 0; right: 0;
    z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, #ff6a60 0%, #e2241b 52%, #7a1009 100%);
    clip-path: polygon(45.3% 0, 46.7% 0, 45.3% 100%, 43.9% 100%);
    filter: drop-shadow(0 0 16px rgba(226,36,27,.55));
  }
  .container-fluid.form-franquia > * { z-index: 3 !important; }
}

/* ===== Form do rodapé (2ª instância) ===== */
.fcard__sub { color: #c4c7cf; font-size: .98rem; line-height: 1.45; margin: -4px 0 16px; font-weight: 300; }
.fcard--rodape { max-width: 520px; }
/* overlay da seção rodapé p/ o card escuro se destacar sobre a foto */
.container-fluid.form-franquia-rodape { position: relative; }
.container-fluid.form-franquia-rodape::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(9,10,12,.88) 0%, rgba(9,10,12,.6) 42%, rgba(9,10,12,.18) 72%, rgba(9,10,12,0) 100%);
}
.container-fluid.form-franquia-rodape > * { position: relative; z-index: 1; }
@media (max-width: 768px) {
  .container-fluid.form-franquia-rodape::before { background: linear-gradient(180deg, rgba(9,10,12,.8), rgba(9,10,12,.92)); }
  .fcard--rodape { max-width: 100%; }
}

/* ===== Hero: respiro + hierarquia (declutter inspirado na Decor, mantendo vermelho/preto) ===== */
.form-franquia .form-franqueado {
  font-size: 1.95rem; line-height: 1.3; letter-spacing: -0.005em;
  max-width: 560px; margin-bottom: 14px; font-weight: 400;
}
.form-franquia .form-franqueado b { font-weight: 800; color: #fff; }
.form-franquia .size-30.lato-regular {
  font-size: 1.08rem; line-height: 1.55; color: #b6b9c2; font-weight: 300; max-width: 500px;
}
.form-franquia .size-30.lato-regular.top-15.bottom-15 { margin: 2px 0 34px !important; padding: 0 !important; }
.form-franquia .size-30.lato-regular b { color: #fff; font-weight: 600; }

/* Form: mais respiro entre os campos e no card */
.fform .fcard { padding: 28px 26px; }
.fform .fcard__title { margin-bottom: 5px; line-height: 1.15; }
.fform .field { margin-bottom: 18px; }
.fform .field-row { gap: 14px; }

/* ===== Altura travada do form (atualizada p/ o novo espaçamento) ===== */
.fform .fstep { min-height: 310px; }
@media (max-width: 768px) { .fform .fstep { min-height: 335px; } }

/* ===== Faixa de números / prova social (estilo Decor, identidade Polishop) ===== */
.stats-band{
  background: linear-gradient(180deg,#1b1d22 0%,#141519 100%);
  border-top: 2px solid #e2241b; border-bottom: 2px solid #e2241b;
  padding: 36px 20px;
}
.stats-band__inner{
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center;
}
.stats-band .stat{ text-align: center; padding: 6px 26px; position: relative; }
.stats-band .stat + .stat::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:66px;
  background: linear-gradient(180deg, transparent, rgba(226,36,27,.5), transparent);
}
.stats-band .stat__num{
  font-weight: 800; font-size: clamp(2.1rem, 4vw, 3rem); line-height: 1.02;
  color: #fa3b34; letter-spacing: -0.01em; margin-bottom: 10px;
}
.stats-band .stat__desc{ color: #d7d9de; font-size: 1.02rem; line-height: 1.35; font-weight: 300; }
@media (max-width: 768px){
  .stats-band{ padding: 26px 18px; }
  .stats-band__inner{ grid-template-columns: 1fr; gap: 24px; }
  .stats-band .stat{ padding: 16px 10px; }
  .stats-band .stat + .stat::before{
    left:50%; top:0; transform:translateX(-50%); width:70px; height:1px;
    background: linear-gradient(90deg, transparent, rgba(226,36,27,.5), transparent);
  }
}

/* ===== Respiro: faixa de números um pouco mais alta ===== */
.stats-band{ padding: 46px 20px; }
.stats-band .stat__num{ margin-bottom: 12px; }
.stats-band .stat__desc{ font-size: 1.06rem; }

/* ===== Seção "tradição": mais espaço e fluidez (estilo Decor, tema escuro) ===== */
.sec-tradicao{ max-width: 1300px !important; margin: 0 auto !important; padding-top: 120px !important; padding-bottom: 104px !important; }
.sec-tradicao .container-franquia.size-50.center-title.top-15.bottom-15.lato-regular{
  font-size: clamp(1.8rem, 2.6vw, 2.3rem) !important;
  line-height: 1.25; text-align: left !important; max-width: 100% !important; padding: 0 0 56px 20px !important;
}
.sec-tradicao .row-cols-4{ padding-left: 6px !important; padding-right: 6px !important; }
.sec-tradicao .col{ padding: 14px !important; }
.sec-tradicao .box-cinza{
  padding: 30px 26px !important; min-height: 236px; border-radius: 16px !important;
  display: flex; flex-direction: column; gap: 6px;
}
.sec-tradicao .box-cinza .bottom-15{ margin-bottom: 8px; padding-bottom: 0 !important; }
.sec-tradicao .img-mobile-tradicao{ width: 56px !important; }
.sec-tradicao .size-32.lato-regular.mobile-tradicao{ font-size: 1.2rem !important; line-height: 1.4 !important; }
@media (max-width: 780px){
  .sec-tradicao{ padding-top: 56px !important; padding-bottom: 52px !important; }
  .sec-tradicao .container-franquia.size-50.center-title.top-15.bottom-15.lato-regular{ padding-bottom: 28px !important; }
  /* 1 coluna empilhada, cards "cheios" tipo quadradinho da Decor */
  .sec-tradicao .row-cols-4{ padding-left: 16px !important; padding-right: 16px !important; }
  .sec-tradicao .col{ width: 100% !important; margin-bottom: 16px !important; padding: 0 !important; }
  .sec-tradicao .col:last-child{ margin-bottom: 0 !important; }
  .sec-tradicao .box-cinza{ padding: 28px 24px !important; min-height: 200px; gap: 10px; }
  .sec-tradicao .img-mobile-tradicao{ width: 44px !important; }
  .sec-tradicao .size-32.lato-regular.mobile-tradicao{ font-size: 1.02rem !important; }
}

/* ===== Animações da seção "tradição" ===== */
/* Hover só em desktop / dispositivos com ponteiro fino (não dispara em toque) */
@media (hover: hover) and (pointer: fine){
  .sec-tradicao .box-cinza{
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
    will-change: transform;
  }
  .sec-tradicao .img-mobile-tradicao{ transition: transform .25s ease; }
  .sec-tradicao .box-cinza:hover{
    transform: translateY(-6px);
    background-color: #404244 !important;
    box-shadow: 0 16px 34px -14px rgba(0,0,0,.6);
  }
  .sec-tradicao .box-cinza:hover .img-mobile-tradicao{ transform: scale(1.07) rotate(-2deg); }
}
/* Fade-in de entrada (leve) — só ativa quando o JS adiciona .anim-ready */
.sec-tradicao.anim-ready .col{ opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.sec-tradicao.anim-ready .col.is-in{ opacity: 1; transform: none; }
.sec-tradicao.anim-ready .col:nth-child(2){ transition-delay: .07s; }
.sec-tradicao.anim-ready .col:nth-child(3){ transition-delay: .14s; }
.sec-tradicao.anim-ready .col:nth-child(4){ transition-delay: .21s; }

/* ===== Lâmina "Uma marca" = .fundador da Decor: medidas replicadas 1:1 ===== */
.sec-fundador{ padding-top: 112px !important; padding-bottom: 124px !important; }
.sec-fundador .container-franquia{ max-width: 1240px !important; margin: 0 auto !important; padding: 0 32px !important; }
.sec-fundador .marca-franquia{ display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 56px !important; align-items: stretch !important; padding: 0 !important; margin: 0 !important; }
.sec-fundador .marca-franquia > .col{ flex: none !important; width: auto !important; max-width: none !important; padding: 0 !important; }
/* card */
.sec-fundador .uma-marca{ background: #353535 !important; border-radius: 18px !important; padding: 0 !important; height: 100%; }
.sec-fundador .uma-marca > .padding-40{ padding: 52px 46px !important; display: flex; flex-direction: column; justify-content: center; height: 100%; }
/* ícone (gem) */
.sec-fundador .ico-uma-marca{ display: block !important; width: 52px !important; height: 52px !important; margin: 0 0 24px !important; }
/* título */
.sec-fundador .umarca__title{ font-size: clamp(1.6rem, 2.2vw, 2rem) !important; line-height: 1.18 !important; font-weight: 700 !important; color: #fff !important; margin: 0 0 18px !important; }
/* texto */
.sec-fundador .umarca__text{ font-size: 1.125rem !important; line-height: 1.62 !important; font-weight: 300 !important; color: #b6b6b6 !important; margin: 0 !important; max-width: 440px; }
.sec-fundador .umarca__text b{ color: #fff; font-weight: 600; }
/* coluna da foto (direita) */
.sec-fundador .foto-marca{ display: block !important; background: url('../imagens/foto-marca.webp') center/contain no-repeat !important; min-height: 560px; }
/* mobile: empilha */
@media (max-width: 900px){
  .sec-fundador{ padding-top: 60px !important; padding-bottom: 64px !important; }
  .sec-fundador .marca-franquia{ grid-template-columns: 1fr !important; gap: 30px !important; }
  .sec-fundador .uma-marca > .padding-40{ padding: 34px 26px !important; }
  .sec-fundador .foto-marca{ min-height: 320px; }
}

/* Mobile: card (texto) antes da foto na lâmina "Uma marca" */
@media (max-width: 900px){
  /* sem reorder: ordem natural do DOM (imagem antes do texto) = igual ao mobile da Decor */
}

/* ===== Unifica a cor de TODOS os cards no #353535 (igual à Decor) ===== */
.box-cinza{ background: #353535; }
.box-cinza-claro{ background: #353535; }

/* ===== Correções mobile da lâmina "Uma marca" (ref: mobile da Decor) =====
   - padding lateral ~20px (Decor) em vez de 12+32
   - mostra só a foto-joao em largura cheia; esconde o bg duplicado
   - remove min-width:300 que estourava o grid e empurrava o card pra direita */
@media (max-width: 900px){
  .sec-fundador{ padding-left: 0 !important; padding-right: 0 !important; }
  .sec-fundador .container-franquia{ padding-left: 20px !important; padding-right: 20px !important; }
  .sec-fundador .foto-marca{ display: none !important; }
  .sec-fundador .foto-marca-joao{ display: block !important; text-align: center; margin: 0 !important; padding: 0 !important; }
  .sec-fundador .foto-marca-joao img{ width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: auto; border-radius: 18px; }
}

/* ===== Banner de consentimento (LGPD) - tema Polishop ===== */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:9999;padding:16px;display:flex;justify-content:flex-start;pointer-events:none}
.consent:not(.is-visible){display:none!important} /* nao intercepta toques no form quando escondido */
.consent__card{pointer-events:auto;width:100%;max-width:920px;background:#1b1d22;color:#f3f3f3;
  border:1px solid rgba(226,36,27,.35);border-top:3px solid #E2241B;border-radius:16px;
  box-shadow:0 18px 50px -12px rgba(0,0,0,.6);padding:18px 22px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  transform:translateY(18px);opacity:0;transition:transform .4s ease,opacity .4s ease}
.consent.is-visible .consent__card{transform:translateY(0);opacity:1}
.consent__text{flex:1 1 320px;min-width:260px}
.consent__title{display:block;color:#ff6a60;font-size:1.02rem;margin-bottom:4px}
.consent__text p{font-size:.9rem;font-weight:300;line-height:1.5;color:#cfd2d9;margin:0}
.consent__text a{color:#ff6a60;text-decoration:underline}
.consent__actions{display:flex;gap:10px;flex:0 0 auto}
.consent__btn{font-family:inherit;font-weight:600;font-size:.95rem;cursor:pointer;border-radius:10px;padding:11px 22px;transition:all .2s ease;border:1px solid transparent}
.consent__btn--ghost{background:transparent;color:#cfcfcf;border-color:rgba(255,255,255,.25)}
.consent__btn--ghost:hover{border-color:#fff;color:#fff}
.consent__btn--accept{background:#E2241B;color:#fff}
.consent__btn--accept:hover{background:#c01b13;transform:translateY(-1px)}
@media (max-width:560px){.consent__card{padding:16px;gap:14px}.consent__actions{flex:1 1 100%}.consent__btn{flex:1}}
@media (prefers-reduced-motion:reduce){.consent__card{transition:none}}


/* ============================================================
   LÂMINA "TRADIÇÃO" (1ª lâmina pós-contadores) — formato igual
   ao .pilares da Decor. Troca o grid do Bootstrap (row-cols-4)
   por CSS Grid, e impede que os cards fiquem "pequenos/alongados".
   ------------------------------------------------------------
   [VIEW 1] DESKTOP  (> 900px) ...... 4 colunas
   [VIEW 2] TABLET   (<= 900px) ..... 2 colunas
   [VIEW 3] MOBILE   (<= 520px) ..... 1 coluna (um embaixo do outro)
   ============================================================ */

/* [VIEW 1] DESKTOP — 4 colunas, cards com "caixa" cheia */
.sec-tradicao .row.row-cols-4.mobile-tradicao{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:20px !important;
  padding-left:0 !important; padding-right:0 !important;
}
.sec-tradicao .row.row-cols-4.mobile-tradicao > .col{
  width:auto !important; max-width:none !important; flex:none !important;
  margin:0 !important; padding:0 !important;
}
/* card mantém altura (não achata nem alonga, igual Decor) */
.sec-tradicao .box-cinza{
  min-height:236px !important; height:100% !important;
  justify-content:flex-start;
}

/* [VIEW 2] TABLET <=900px — 2 colunas (igual Decor) */
@media (max-width:900px){
  .sec-tradicao .row.row-cols-4.mobile-tradicao{
    grid-template-columns:repeat(2,1fr) !important;
    padding-left:16px !important; padding-right:16px !important;
  }
}

/* [VIEW 3] MOBILE <=520px — 1 coluna empilhada (igual mobile da Decor) */
@media (max-width:520px){
  .sec-tradicao .row.row-cols-4.mobile-tradicao{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
  .sec-tradicao .box-cinza{ min-height:200px !important; }
}


/* ============================================================
   PILARES DE CRESCIMENTO — mesmo formato do .crescimento/.gcard
   da Decor, mas com o ícone na cor da Polishop (vermelho).
   PNGs ico-pilar-1/2/3 recoloridos (#b5a890 -> #E2241B);
   originais em imagens/_gold_bak.
   ------------------------------------------------------------
   [VIEW 1] DESKTOP (> 900px) ... 3 colunas, badge no canto sup. esq.
   [VIEW 2] MOBILE  (<= 900px) .. 1 coluna (um embaixo do outro)
   ============================================================ */

/* [VIEW 1] grid de 3 colunas (substitui o row-cols-3 do Bootstrap) */
.row.row-cols-3.nossoss-pilares{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:24px !important;
  padding-left:0 !important; padding-right:0 !important;
  margin-left:0 !important; margin-right:0 !important;
}
.row.row-cols-3.nossoss-pilares > .col{
  width:auto !important; max-width:none !important; flex:none !important;
  margin:0 !important; padding:0 !important;
}
/* card (igual .gcard da Decor) */
.nossoss-pilares .bloco-pilar{
  position:relative !important;
  background:#353535 !important;
  border-radius:16px !important;
  padding:34px 28px 30px !important;
  min-height:200px !important; height:100%;
  display:flex; flex-direction:column;
}
/* badge do ícone: canto superior esquerdo sobreposto (igual Decor) */
.nossoss-pilares .ico-position{
  position:absolute !important;
  top:-24px !important; left:28px !important;
  width:54px !important; height:54px !important;
  margin:0 !important;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.5));
}
/* texto desce abaixo do badge */
.nossoss-pilares .nossos-pilares-texto{
  padding:0 !important; margin-top:18px !important;
}
.nossoss-pilares .nossos-pilares-texto .size-40{ display:inline-block; margin-bottom:6px; }
.nossoss-pilares .nossos-pilares-texto-descricao{ color:#b6b6b6; font-weight:300; line-height:1.55; }

/* [VIEW 2] MOBILE <=900px — 1 coluna empilhada (igual mobile da Decor) */
@media (max-width:900px){
  .row.row-cols-3.nossoss-pilares{
    grid-template-columns:1fr !important;
    gap:44px !important;
    padding-left:16px !important; padding-right:16px !important;
  }
  .nossoss-pilares .bloco-pilar{ min-height:0 !important; }
  .nossoss-pilares .ico-position{ width:52px !important; height:52px !important; top:-22px !important; left:24px !important; }
  .nossoss-pilares .nossos-pilares-texto{ margin-top:16px !important; }
}


/* ============================================================
   CORREÇÃO PILARES: no HTML só o 1º card tem a classe
   .bloco-pilar; os outros dois são só .box-cinza. Por isso só
   o 1º badge ancorava certo. Aqui o card + position:relative
   passam a valer para os TRÊS cards da seção.
   ============================================================ */
.nossoss-pilares .box-cinza{
  position:relative !important;
  background:#353535 !important;
  border-radius:16px !important;
  padding:34px 28px 30px !important;
  min-height:200px !important; height:100% !important;
  display:flex !important; flex-direction:column !important;
}
@media (max-width:900px){
  .nossoss-pilares .box-cinza{ min-height:0 !important; }
}


/* ============================================================
   PILARES — tipografia/tamanhos alinhados com a Decor.
   Referência Decor: .gcard__t 1.18rem/700 | .gcard__p .95rem/300
   | badge 54px | .btn-gold-pill 1.15rem.
   As .size-40/.size-32 da Pola são em vw (escalam demais);
   aqui fixamos em rem só dentro da seção.
   ============================================================ */

/* título do card -> 1.18rem (igual .gcard__t) */
.nossoss-pilares .nossos-pilares-texto .size-40{
  font-size:1.18rem !important; font-weight:700 !important; line-height:1.25 !important;
}
/* descrição do card -> .95rem (igual .gcard__p) */
.nossoss-pilares .nossos-pilares-texto-descricao{
  font-size:.95rem !important; font-weight:300 !important; line-height:1.55 !important; color:#b6b6b6 !important;
}
/* badge igual Decor (54px) */
.nossoss-pilares .ico-position{ width:54px !important; height:54px !important; }

/* CTAs vermelhos (QUERO ENTENDER MAIS / QUERO SER FRANQUEADO):
   tamanho alinhado ao .btn-gold-pill da Decor (1.15rem). Vale
   para os 3 botões vermelhos -> ficam consistentes entre si. */
.botao-entender{
  font-size:1.05rem !important;
  padding:16px 44px !important;
  border-radius:12px !important;
}
@media (max-width:768px){
  .botao-entender{ font-size:1rem !important; padding:14px 34px !important; }
}


/* ════════════════════════════════════════════════════════════
   PILARES DE CRESCIMENTO — REESCRITA CONSOLIDADA (espelha o
   .crescimento / .gcard da Decor). Este bloco GOVERNA a seção
   e supera os patches anteriores de .nossoss-pilares acima.
   Ícones recoloridos para #9C1F1E.
   ──────────────────────────────────────────────────────────
   [DESKTOP] container ~1200px centralizado (cards param de
             ocupar a tela toda) | 3 colunas | badge no canto
   [MOBILE <=900px] 1 coluna empilhada | botão com respiro
   ════════════════════════════════════════════════════════════ */

/* grid limitado e centralizado (como o .container ~1200px da Decor) */
.row.row-cols-3.nossoss-pilares{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:24px !important;
  max-width:1200px !important;
  margin:0 auto !important;
  padding:0 24px !important;
}
.row.row-cols-3.nossoss-pilares > .col{
  width:auto !important; max-width:none !important; flex:none !important;
  margin:0 !important; padding:0 !important;
}

/* card (igual .gcard) */
.nossoss-pilares .box-cinza{
  position:relative !important;
  background:#353535 !important;
  border-radius:16px !important;
  padding:34px 28px 30px !important;
  min-height:200px !important; height:100% !important;
  display:flex !important; flex-direction:column !important;
}

/* badge: canto superior esquerdo, círculo #837366 */
.nossoss-pilares .ico-position{
  position:absolute !important; top:-24px !important; left:28px !important;
  width:54px !important; height:54px !important; margin:0 !important;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.5));
}

/* tipografia (fixa em rem, igual Decor) */
.nossoss-pilares .nossos-pilares-texto{ padding:0 !important; margin-top:18px !important; }
.nossoss-pilares .nossos-pilares-texto .size-40{
  font-size:1.18rem !important; font-weight:700 !important; line-height:1.25 !important;
  display:inline-block; margin-bottom:6px;
}
.nossoss-pilares .nossos-pilares-texto-descricao{
  font-size:.95rem !important; font-weight:300 !important; line-height:1.55 !important; color:#b6b6b6 !important;
}

/* CTA vermelho (alinhado ao botão da Decor) */
.botao-entender{ font-size:1.05rem !important; padding:16px 44px !important; border-radius:12px !important; }

/* MOBILE <=900px */
@media (max-width:900px){
  .row.row-cols-3.nossoss-pilares{
    grid-template-columns:1fr !important; gap:40px !important;
    max-width:520px !important; padding:0 20px !important;
  }
  .nossoss-pilares .box-cinza{ min-height:0 !important; }
  .nossoss-pilares .ico-position{ width:52px !important; height:52px !important; top:-22px !important; left:24px !important; }
  .nossoss-pilares .nossos-pilares-texto{ margin-top:16px !important; }
  /* botão não colado: respiro acima e abaixo no mobile */
  .botao-entender{ margin-top:28px !important; margin-bottom:14px !important; font-size:1rem !important; padding:14px 34px !important; }
}


/* ════════════════════════════════════════════════════════════
   ALINHAMENTO DE LARGURA (desktop) — todas as lâminas no mesmo
   "trilho" de conteúdo (1240px / padding lateral 32px), igual a
   Decor que alinha tudo no mesmo .container.
   Antes: tradição=1300 (sem padding) | pilares=1200 | fundador=1240
   -> bordas desalinhadas. Agora as três batem.
   (min-width:901 p/ não afetar o empilhamento mobile)
   ════════════════════════════════════════════════════════════ */
@media (min-width:901px){
  /* lâmina "tradição" (4 cards) -> mesma caixa do fundador */
  .sec-tradicao{ max-width:1240px !important; }
  .sec-tradicao .row.row-cols-4.mobile-tradicao{
    padding-left:32px !important; padding-right:32px !important;
  }
  /* título da tradição alinhado à borda dos cards */
  .sec-tradicao .container-franquia.size-50.center-title.top-15.bottom-15.lato-regular{
    padding-left:32px !important;
  }
  /* lâmina "pilares de crescimento" (3 cards) -> mesmo trilho */
  .row.row-cols-3.nossoss-pilares{
    max-width:1240px !important;
    padding-left:32px !important; padding-right:32px !important;
  }
}


/* ════════════════════════════════════════════════════════════
   LÂMINA "TRADIÇÃO" — REPLICA 1:1 do .pilares/.pcard da Decor
   (desktop E mobile). Supera os patches/regras antigas acima.
   Decor: 4col -> 2col(<=900) -> 1col(<=520); card NÃO encolhe
   no mobile (min-height 236, padding 34/26/36, ícone 50px,
   gap 22, texto .98rem).
   ════════════════════════════════════════════════════════════ */
.sec-tradicao{ max-width:1240px !important; margin:0 auto !important; }

/* grid (= .pilares__grid) */
.sec-tradicao .row.row-cols-4.mobile-tradicao{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:20px !important;
  padding:0 32px !important;            /* desktop: alinhado ao fundador */
}
.sec-tradicao .row.row-cols-4.mobile-tradicao > .col{
  width:auto !important; max-width:none !important; flex:none !important;
  margin:0 !important; padding:0 !important;
}

/* card (= .pcard) — mesmo em qualquer largura */
.sec-tradicao .box-cinza{
  background:#353535 !important; color:#fff !important;
  border-radius:18px !important;
  padding:34px 26px 36px !important;
  min-height:236px !important; height:100% !important;
  display:flex !important; flex-direction:column !important;
  gap:22px !important; justify-content:flex-start !important;
}
.sec-tradicao .box-cinza .bottom-15{ margin:0 !important; padding:0 !important; }
/* ícone (= .pcard__ic 50px) */
.sec-tradicao .img-mobile-tradicao{ width:50px !important; height:auto !important; }
/* texto (= .pcard__txt .98rem) */
.sec-tradicao .size-32.lato-regular.mobile-tradicao{
  font-size:.98rem !important; font-weight:400 !important; line-height:1.4 !important;
}

/* TABLET <=900 -> 2 colunas (igual Decor) */
@media (max-width:900px){
  .sec-tradicao .row.row-cols-4.mobile-tradicao{
    grid-template-columns:repeat(2,1fr) !important; gap:20px !important; padding:0 20px !important;
  }
}
/* MOBILE <=520 -> 1 coluna, respiro lateral 20px (igual Decor) */
@media (max-width:520px){
  .sec-tradicao .row.row-cols-4.mobile-tradicao{
    grid-template-columns:1fr !important; gap:20px !important; padding:0 20px !important;
  }
}


/* ════════════════════════════════════════════════════════════
   LÂMINA "FUNDADOR" (Uma marca) — REPLICA 1:1 do .fundador/
   .fcard2/.stack da Decor. Supera as regras antigas de
   .sec-fundador acima.
   Decor: título clamp(1.4–1.78) | texto 1rem/430 | mobile a
   imagem vai pra cima com max 380px centralizada.
   ════════════════════════════════════════════════════════════ */

/* título (= .fcard2__title) */
.sec-fundador .umarca__title{
  font-size:clamp(1.4rem,2.2vw,1.78rem) !important;
  line-height:1.18 !important; font-weight:700 !important; margin:0 0 18px !important;
}
/* texto (= .fcard2__text) */
.sec-fundador .umarca__text{
  font-size:1rem !important; line-height:1.62 !important; font-weight:300 !important;
  color:#b6b6b6 !important; max-width:430px !important;
}
/* badge gem (= .fcard2__gem 52px) */
.sec-fundador .ico-uma-marca{ width:52px !important; height:52px !important; margin:0 0 24px !important; }

/* MOBILE <=900: imagem em cima, max 380px centralizada (= .stack no mobile) */
@media (max-width:900px){
  .sec-fundador .marca-franquia{ gap:36px !important; }
  .sec-fundador .foto-marca-joao img{
    max-width:380px !important; width:100% !important; margin:0 auto !important;
  }
}


/* ════════════════════════════════════════════════════════════
   TÍTULO "Nossos pilares de crescimento" — mesmo tamanho do
   título da tradição (estava travado em 19px no mobile por uma
   regra antiga; .size-50 cru = 2.6vw, sem piso). !important
   p/ vencer a trava @media(<=780).
   ════════════════════════════════════════════════════════════ */
.titulo-pilares{
  font-size:clamp(1.8rem, 2.6vw, 2.3rem) !important;
  line-height:1.25 !important;
  text-align:left !important;
}


/* ════════════════════════════════════════════════════════════
   ANIMAÇÕES + MODAL DO FORM (espelha o app.js/styles.css da Decor)
   1) hover/press dos botões  2) scroll-reveal (fade-in)
   3) modal do formulário (#franqueadoForm teleportado no clique do CTA)
   ════════════════════════════════════════════════════════════ */
:root{ --pl-ease: cubic-bezier(.22,.61,.36,1); }

/* ---- 1) BOTÕES ---- */
/* CTA vermelho (QUERO ENTENDER MAIS / QUERO SER FRANQUEADO) */
.botao-entender{
  transition: transform .18s var(--pl-ease), box-shadow .25s var(--pl-ease), background-color .2s var(--pl-ease);
  cursor:pointer; will-change:transform;
}
.botao-entender:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(226,36,27,.6); }
.botao-entender:active{ transform:translateY(0); box-shadow:0 8px 18px -10px rgba(226,36,27,.5); }
.botao-entender a{ display:block; }

/* botão "PRÓXIMO/FINALIZAR" do form */
.btn-next{ transition: transform .18s var(--pl-ease), box-shadow .25s var(--pl-ease), filter .2s var(--pl-ease); }
.btn-next:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -10px rgba(226,36,27,.5); filter:brightness(1.04); }
.btn-next:active{ transform:translateY(0); }
.btn-next .ic{ transition: transform .2s var(--pl-ease); }
.btn-next:hover .ic{ transform:translateX(3px); }

/* links do menu (header) */
.menu-links a{ transition: opacity .2s var(--pl-ease), color .2s var(--pl-ease); }
.menu-links a:hover{ opacity:.7; }

/* ---- 2) SCROLL REVEAL (igual .reveal da Decor) ---- */
.reveal{
  opacity:0; transform:translateY(20px);
  transition: opacity .6s var(--pl-ease), transform .6s var(--pl-ease);
  will-change:opacity,transform;
}
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none; }
}

/* ---- 3) MODAL DO FORMULÁRIO ---- */
.pl-fmodal{ position:fixed; inset:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:20px; }
.pl-fmodal[hidden]{ display:none !important; }            /* hidden vence o display:flex */
.pl-fmodal__backdrop{
  position:absolute; inset:0; background:rgba(8,8,10,.8);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .35s var(--pl-ease);
}
.pl-fmodal.is-open .pl-fmodal__backdrop{ opacity:1; }
.pl-fmodal__dialog{
  position:relative; z-index:1; width:100%; max-width:520px; max-height:92vh; overflow:auto;
  transform:scale(.92); opacity:0;
  transition: transform .38s var(--pl-ease), opacity .38s var(--pl-ease);
}
.pl-fmodal.is-open .pl-fmodal__dialog{ transform:scale(1); opacity:1; }
.pl-fmodal__close{
  position:absolute; top:12px; right:14px; z-index:3; width:40px; height:40px;
  border:none; border-radius:50%; background:rgba(0,0,0,.42); color:#fff;
  font-size:1.7rem; line-height:1; cursor:pointer; transition:background .2s var(--pl-ease);
}
.pl-fmodal__close:hover{ background:rgba(0,0,0,.65); }
/* dentro do modal: só o card do form, sem o headline do hero, sem padding do wrapper */
.pl-fmodal__body{ width:100%; }
.pl-fmodal .title-mobile{ display:none !important; }
.pl-fmodal #franqueadoForm{ width:100%; margin:0; }
.pl-fmodal #franqueadoForm .top-30.left-30{ padding:0 !important; }
.pl-fmodal .fcard{ width:100%; max-width:none; margin:0; }
@media (prefers-reduced-motion:reduce){
  .pl-fmodal__dialog, .pl-fmodal__backdrop{ transition:none; }
}


/* ════════════════════════════════════════════════════════════
   TÍTULOS DE SEÇÃO — presença igual à Decor (.sec-title:
   clamp(1.8rem,3vw,2.6rem)/strong 700 Poppins). Em Lato usamos
   900 (black) no negrito pra ter o mesmo peso, e cor clara.
   ════════════════════════════════════════════════════════════ */
.titulo-pilares{
  font-size:clamp(1.9rem, 3vw, 2.7rem) !important;
  line-height:1.18 !important;
  text-align:left !important;
  color:#f4f4f5 !important;
  font-weight:400 !important;
  letter-spacing:-.01em !important;
}
.titulo-pilares b{ font-weight:900 !important; color:#ffffff !important; }

/* mesma presença no título da tradição (consistência da página) */
.sec-tradicao .container-franquia.size-50.center-title.top-15.bottom-15.lato-regular{
  font-size:clamp(1.9rem, 3vw, 2.7rem) !important;
  line-height:1.18 !important;
  color:#f4f4f5 !important;
}
.sec-tradicao .container-franquia.size-50 b{ font-weight:900 !important; color:#ffffff !important; }

/* ════════════════════════════════════════════════════════════
   SEÇÃO "POR QUE SER FRANQUEADO" — 4 diferenciais (dark/vermelho)
   Substitui as 8 caixas antigas. Mesmo trilho 1240/32 das outras
   lâminas; cards no padrão dark com número em vermelho da marca.
   ════════════════════════════════════════════════════════════ */
.ser-franqueado{ max-width:1240px !important; margin:0 auto !important; padding:0 32px !important; }
.ser-franqueado .titulo-pilares{ margin-bottom:0 !important; }
.franq-sub{
  font-size:1.02rem; font-weight:300; line-height:1.5; color:#b6b6b6;
  max-width:580px; margin:8px 0 34px; text-align:left;
}
.ser-franqueado .franq-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.franq-card{
  background:#353535; border-radius:16px; padding:30px 26px;
  display:flex; flex-direction:column; gap:6px; min-height:172px; justify-content:center;
  transition:transform .18s var(--pl-ease), box-shadow .25s var(--pl-ease);
}
.franq-card:hover{ transform:translateY(-3px); box-shadow:0 18px 38px -16px rgba(0,0,0,.6); }
.franq-card__label{ font-size:.95rem; font-weight:400; color:#cfcfcf; }
.franq-card__num{ font-size:2.5rem; font-weight:900; line-height:1.04; color:#E2241B; letter-spacing:-.01em; }
.franq-card__sub{ font-size:.82rem; font-weight:300; color:#8c8c8c; }

@media (max-width:900px){
  .ser-franqueado{ padding:0 20px !important; }
  .ser-franqueado .franq-grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .franq-card{ min-height:148px; padding:24px 20px; }
  .franq-card__num{ font-size:2.1rem; }
}
@media (max-width:480px){
  .ser-franqueado .franq-grid{ grid-template-columns:1fr; }
}


/* ════════════════════════════════════════════════════════════
   AJUSTES FINOS (3): alinhamento do título de crescimento,
   gradiente no número da seção "Por que ser franqueado", e
   respiro vertical entre lâminas (ritmo da Decor ~110px).
   ════════════════════════════════════════════════════════════ */

/* 1) título de "pilares de crescimento" no MESMO trilho (1240/32)
      dos cards (estava num container de 1596 -> puxado pra esquerda) */
.titulo-crescimento{
  max-width:1240px !important;
  margin-left:auto !important; margin-right:auto !important;
  padding-left:32px !important; padding-right:32px !important;
}
@media (max-width:900px){
  .titulo-crescimento{ max-width:520px !important; padding-left:20px !important; padding-right:20px !important; }
}

/* 2) gradiente vermelho no número (mesma técnica do statbar da Decor:
      linear-gradient + background-clip:text) */
.franq-card__num{
  background:linear-gradient(180deg, #F5402F 0%, #C01B13 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* 3) respiro entre lâminas (Decor: ~110px topo/baixo por seção) */
.ser-franqueado{ padding:clamp(64px, 9vw, 100px) 32px !important; }
.pl-lamina-top{ padding-top:clamp(60px, 8vw, 90px) !important; }
@media (max-width:900px){
  .ser-franqueado{ padding:56px 20px !important; }
  .pl-lamina-top{ padding-top:52px !important; }
}


/* ════════════════════════════════════════════════════════════
   RESPIRO ANTES DA SEÇÃO "PILARES DE CRESCIMENTO"
   (separa da lâmina "Uma marca"/fundador acima). Aplicado como
   padding-top no próprio título -> não depende de editar HTML e
   não sofre margin-collapse. Ritmo Decor (~entre-seções).
   ════════════════════════════════════════════════════════════ */
.titulo-crescimento{ padding-top: clamp(64px, 8vw, 100px) !important; }
@media (max-width:900px){
  .titulo-crescimento{ padding-top: 48px !important; }
}


/* ════════════════════════════════════════════════════════════
   "POR QUE SER FRANQUEADO" — tratamento mais visual (skill design)
   - ícone quieto no topo (não badge, pra não competir com os pilares)
   - linha "vs mercado" nos 2 cards-chave = a tese da lâmina
   - nota de compliance (modelo ilustrativo)
   ════════════════════════════════════════════════════════════ */
.ser-franqueado .franq-card{ justify-content:flex-start !important; gap:7px; }

.franq-card__ic{ display:block; width:26px; height:26px; margin-bottom:12px; color:#E2241B; }
.franq-card__ic svg{ width:100%; height:100%; display:block; }

.franq-card__vs{
  margin-top:8px; padding-top:10px;
  border-top:1px solid rgba(255,255,255,.09);
  font-size:.8rem; font-weight:300; line-height:1.4; color:#8c8c8c;
}
.franq-card__vs b{ color:#b6b6b6; font-weight:400; }

.franq-note{
  font-size:.74rem; font-weight:300; color:#6f6f6f;
  margin:16px 0 0; text-align:left;
}


/* ════════════════════════════════════════════════════════════
   "POR QUE SER FRANQUEADO" — HARMONIZAÇÃO com a lâmina dos
   pilares (mesma família visual):
   - ícone vira BADGE circular vermelho sobreposto no canto sup.
     esquerdo (igual .ico-position dos pilares), glifo branco
   - label com mais presença (ecoa o título branco dos pilares)
   - tons de cinza iguais aos da lâmina de cima (#b6b6b6)
   ════════════════════════════════════════════════════════════ */

/* respiro p/ os badges que "sobem" acima dos cards */
.ser-franqueado .franq-grid{ margin-top:30px; }

/* card no mesmo padrão dos pilares (relativo, padding, min-height) */
.ser-franqueado .franq-card{
  position:relative !important;
  padding:42px 28px 30px !important;
  min-height:200px !important;
  justify-content:flex-start !important;
  gap:7px;
}

/* ÍCONE = badge circular vermelho no canto (igual aos pilares) */
.franq-card__ic{
  position:absolute !important; top:-24px; left:28px;
  width:54px; height:54px; margin:0;
  display:flex; align-items:center; justify-content:center;
  background:#9C1F1E; border-radius:50%;
  box-shadow:0 12px 24px rgba(0,0,0,.5);
  color:#fff;
}
.franq-card__ic svg{ width:26px; height:26px; display:block; }

/* label com mais presença, ecoando o título branco dos pilares */
.ser-franqueado .franq-card__label{ font-size:1rem; font-weight:500; color:#ececec; }
/* tons mutados iguais aos da lâmina dos pilares */
.ser-franqueado .franq-card__sub{ color:#b6b6b6; }
.ser-franqueado .franq-card__vs{ color:#9a9a9a; }
.ser-franqueado .franq-card__vs b{ color:#cacaca; }

/* MOBILE: badge menor + gap de linha maior p/ os badges não
   colidirem com a linha de cima (igual os pilares no mobile) */
@media (max-width:900px){
  .ser-franqueado .franq-grid{ gap:40px 14px !important; margin-top:40px; }
  .ser-franqueado .franq-card{ padding:40px 22px 26px !important; }
  .franq-card__ic{ width:50px; height:50px; top:-22px; left:24px; }
  .franq-card__ic svg{ width:24px; height:24px; }
}
@media (max-width:480px){
  .ser-franqueado .franq-grid{ gap:40px !important; }
}


/* badge: sombra estava pesada demais (círculo CSS sólido) -> suave */
.franq-card__ic{ box-shadow:0 4px 10px rgba(0,0,0,.22) !important; }


/* ============================================================
   MODELOS DE NEGOCIO -- redesign do painel de specs
   ============================================================ */
.modelos-de-negocio.mdl-grid{ display:grid !important; grid-template-columns:repeat(3,1fr); gap:24px; max-width:1240px; margin:0 auto; padding:0 32px; }
.modelos-de-negocio.mdl-grid > .col{ padding:0 !important; margin:0 !important; max-width:none !important; flex:none !important; width:auto !important; background:transparent !important; }
.mdl-card{ background:#353535; border-radius:16px; overflow:hidden; height:100%; display:flex; flex-direction:column; text-align:left; }
.mdl-card__photo{ line-height:0; }
.mdl-card__photo img{ width:100%; height:auto; display:block; }
.mdl-card__body{ padding:24px 26px 26px; display:flex; flex-direction:column; }
.mdl-hero__item{ margin-top:16px; }
.mdl-hero__item:first-child{ margin-top:0; }
.mdl-label{ display:block; font-size:.82rem; font-weight:400; color:#9a9a9a; }
.mdl-big{ display:block; margin-top:3px; color:#fff; line-height:1.05; }
.mdl-cur{ font-size:.62rem; font-weight:600; color:#cfcfcf; vertical-align:super; margin-right:1px; }
.mdl-num{ font-size:2.15rem; font-weight:800; letter-spacing:-.01em; }
.mdl-unit{ font-size:1.05rem; font-weight:600; }
.mdl-big--accent .mdl-num, .mdl-big--accent .mdl-unit{ background:linear-gradient(180deg,#F5402F,#C01B13); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.mdl-specs{ list-style:none; margin:20px 0 0; padding:18px 0 0; border-top:1px solid rgba(255,255,255,.09); }
.mdl-specs li{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:8px 0; }
.mdl-specs li + li{ border-top:1px solid rgba(255,255,255,.06); }
.mdl-spec-k{ font-size:.86rem; color:#9a9a9a; }
.mdl-spec-v{ font-size:.95rem; font-weight:600; color:#e8e8e8; text-align:right; }
.mdl-offer{ max-width:780px; margin:14px auto 0; text-align:center; padding:0 20px; }
.mdl-offer__note{ font-size:.78rem; color:#7a7a7a; margin:0 0 24px; }
.mdl-offer__box{ display:inline-flex; flex-direction:column; align-items:center; gap:7px; background:rgba(226,36,27,.08); border:1px solid rgba(226,36,27,.38); border-radius:14px; padding:20px 34px; }
.mdl-offer__big{ font-size:1.4rem; font-weight:800; color:#fff; line-height:1.25; }
.mdl-offer__big b{ color:#E2241B; }
.mdl-offer__tag{ font-size:.82rem; font-weight:700; color:#E2241B; text-transform:uppercase; letter-spacing:.05em; }
.mdl-offer__trust{ font-size:1.02rem; color:#b6b6b6; margin:24px 0 0; }
@media (max-width:900px){ .modelos-de-negocio.mdl-grid{ grid-template-columns:1fr; gap:26px; max-width:520px; padding:0 20px; } }


/* MODELOS -- rodape: icone no box da oferta + faixa de confianca (reuso sol/multi da Decor) */
.mdl-offer__box{ display:flex !important; flex-direction:row !important; align-items:center; gap:18px; text-align:left; max-width:620px; margin:0 auto; padding:22px 30px; }
.mdl-offer__ic{ flex:0 0 auto; width:46px; height:46px; border-radius:50%; background:#9C1F1E; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 4px 10px rgba(0,0,0,.22); }
.mdl-offer__ic svg{ width:24px; height:24px; display:block; }
.mdl-offer__txt{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.mdl-offer__box .mdl-offer__big, .mdl-offer__box .mdl-offer__tag{ text-align:left; }
.mdl-trust{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-wrap:wrap; justify-content:center; gap:14px 32px; }
.mdl-trust li{ display:inline-flex; align-items:center; gap:9px; font-size:1rem; color:#c9c9c9; }
.mdl-trust__ic{ flex:0 0 auto; width:22px; height:22px; color:#E2241B; display:inline-flex; }
.mdl-trust__ic svg{ width:100%; height:100%; display:block; }
@media (max-width:600px){ .mdl-offer__box{ flex-direction:column !important; text-align:center; gap:12px; } .mdl-offer__box .mdl-offer__big, .mdl-offer__box .mdl-offer__tag{ text-align:center; } .mdl-trust{ gap:12px 22px; font-size:.95rem; } }


/* MODELOS oferta -- tirar a cara de "alerta/erro" e estilizar (callout elevado) */
.mdl-offer__box{
  background:linear-gradient(135deg,#3a3236 0%,#29262a 100%) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  box-shadow:0 20px 46px -20px rgba(0,0,0,.7) !important;
  border-radius:18px !important;
  padding:24px 32px !important;
  gap:20px;
}
.mdl-offer__ic{ width:50px !important; height:50px !important; background:linear-gradient(145deg,#b3221b,#7c1711) !important; box-shadow:0 6px 16px -4px rgba(176,27,19,.5) !important; }
.mdl-offer__ic svg{ width:26px !important; height:26px !important; }
.mdl-offer__big{ font-size:1.32rem !important; font-weight:700 !important; color:#f3f3f3 !important; }
.mdl-offer__big b{ font-weight:800; background:linear-gradient(180deg,#F5402F,#C01B13); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.mdl-offer__tag{
  display:inline-flex !important; align-items:center; gap:7px; align-self:flex-start;
  background:rgba(226,36,27,.13) !important; color:#ff6f63 !important;
  font-size:.7rem !important; font-weight:700 !important; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 12px !important; border-radius:999px !important; margin-top:4px;
}
.mdl-offer__tag::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:0 0 auto; }
@media (max-width:600px){ .mdl-offer__tag{ align-self:center; } }


/* MULTICATEGORIAS -- cards clicaveis + hover + respiro entre laminas */
#nossos-produtos{ padding-top:clamp(64px,8vw,110px) !important; }
.cat-link{ display:block; height:100%; text-decoration:none; color:inherit; cursor:pointer; }
.multicategorias .border-radius-15{ overflow:hidden; transition:transform .28s ease, box-shadow .28s ease; will-change:transform; }
.multicategorias .border-radius-15 img{ display:block; transition:transform .45s ease; }
.cat-link:hover .border-radius-15{ transform:translateY(-6px); box-shadow:0 18px 40px -16px rgba(0,0,0,.55); }
.cat-link:hover .border-radius-15 img{ transform:scale(1.06); }
.cat-link:focus-visible .border-radius-15{ outline:2px solid #E2241B; outline-offset:3px; }
@media (max-width:600px){ #nossos-produtos{ padding-top:48px !important; } }


/* MODELOS -- 2 modelos (SMART, PLUS): grid 2-up centralizado */
.modelos-de-negocio.mdl-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); max-width:860px; }
@media (max-width:900px){ .modelos-de-negocio.mdl-grid{ grid-template-columns:1fr; max-width:420px; } }


/* MEGA restaurado -- volta grid 3-up */
.modelos-de-negocio.mdl-grid{ grid-template-columns:repeat(3,1fr); max-width:1240px; }
@media (max-width:900px){ .modelos-de-negocio.mdl-grid{ grid-template-columns:1fr; max-width:520px; } }


/* BENEFICIOS -- marquee infinito (fade + drag) na paleta Polishop */
.benef-marquee{ position:relative; overflow:hidden; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; padding:10px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); }
.benef-marquee.is-drag{ cursor:grabbing; }
.benef-marquee img{ pointer-events:none; -webkit-user-drag:none; }
.benef-track{ display:flex; width:max-content; gap:22px; align-items:stretch; will-change:transform; }
.benef-track .box-dourado{ margin-right:0 !important; background:linear-gradient(150deg,#34343a 0%,#29292d 100%) !important; color:#fff !important;
  border:1px solid rgba(255,255,255,.06); box-shadow:0 20px 44px -24px rgba(0,0,0,.72); }
.benef-track .box-dourado .font-color-dourado{ color:#f3f3f3 !important; }
.benef-track .box-dourado img{ filter:brightness(0) invert(1); }


/* === Benefícios + multicategorias: ajustes (feedback João) === */
/* cards de benefício no vermelho da marca (.bg-red #9C1F1E), sem sombra */
.benef-track .box-dourado{ background:#9C1F1E !important; box-shadow:none !important; border:none !important; }
/* título dos cards alinhado à página: tamanho/entrelinha moderados, branco */
.benef-track .box-dourado .font-color-dourado{ color:#fff !important; line-height:1.25 !important; font-size:clamp(1.1rem,1.5vw,1.5rem) !important; }
/* separar a seção de benefícios da seção de cima */
.row.row-cols-2.bloco-beneficio{ margin-top:clamp(64px,9vw,130px); }
/* multicategorias: 2 por linha no mobile (em vez de 1 verticalizada) */
@media (max-width:600px){
  .row.row-cols-5.multicategorias{ margin-left:0; margin-right:0; justify-content:center; gap:14px; }
  .row.row-cols-5.multicategorias > .col.multicategorias{ width:46% !important; max-width:46%; margin:0 !important; padding:0 !important; }
}


/* === Benefícios: fidelidade ao Decor (tipografia responsiva + hierarquia + respiro lateral + cards alongados) === */

/* layout: coluna de texto estreita + carrossel largo, respiro nas laterais e gap maior */
.row.row-cols-2.bloco-beneficio{
  margin:clamp(64px,9vw,130px) auto 0 !important; max-width:1480px;
  padding-left:clamp(20px,4vw,56px) !important; padding-right:clamp(20px,4vw,56px) !important;
  align-items:center; column-gap:clamp(32px,5vw,72px);
}
.row.row-cols-2.bloco-beneficio > .col{ padding-left:0 !important; padding-right:0 !important; }
.bloco-beneficio-1{ flex:0 0 460px !important; max-width:460px !important; min-width:0; }
.bloco-beneficio-2{ flex:1 1 0 !important; max-width:none !important; min-width:0 !important; }
.bloco-beneficio-2 .container{ max-width:none !important; width:100% !important; padding:0 !important; margin:0 !important; }

/* tipografia da coluna de texto: menor, com teto em rem, hierarquia clara titulo>paragrafo */
.bloco-beneficio-1 span.size-50{ display:inline-block; font-size:clamp(1.7rem,2.2vw,2.25rem) !important; line-height:1.14 !important; margin-bottom:8px; }
.bloco-beneficio-texto{ font-size:clamp(.96rem,1.05vw,1.05rem) !important; line-height:1.55 !important; color:#c7c7c7 !important; font-weight:400 !important; }
.bloco-beneficio-texto b{ color:#fff !important; }
.bloco-beneficio-1 .size-15, .bloco-beneficio-1 em{ font-size:clamp(.76rem,.85vw,.86rem) !important; }

/* botao menor e compacto (proporcoes Decor) */
.bloco-beneficio-1 .botton-taxa{ display:block; width:fit-content; max-width:100%; padding:13px 26px !important; border-radius:12px !important; border-width:2px !important; }
.bloco-beneficio-1 .botton-taxa a.size-24{ font-size:clamp(.8rem,.95vw,.92rem) !important; letter-spacing:.02em; }
.bloco-beneficio-1 .botton-taxa a img{ width:18px !important; height:auto; margin-right:6px; vertical-align:middle; }

/* cards alongados na vertical (286x384 como o Decor), sem divisoria, icone fixo */
.benef-track .box-dourado{
  width:286px !important; min-width:286px !important; max-width:286px !important; height:384px !important;
  border-radius:22px !important; padding:32px 26px !important;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
}
.benef-track .box-dourado br{ display:none; }
.benef-track .box-dourado img[src*='div-beneficio']{ display:none; }
.benef-track .box-dourado img[src*='beneficio-']{ width:104px !important; height:104px !important; object-fit:contain; }
.benef-track .box-dourado .font-color-dourado{ font-size:clamp(1.15rem,1.3vw,1.45rem) !important; }

/* responsivo */
@media (max-width:1040px){
  .bloco-beneficio-1, .bloco-beneficio-2{ flex:0 0 100% !important; max-width:100% !important; }
  .row.row-cols-2.bloco-beneficio{ row-gap:30px; }
}
@media (max-width:600px){
  .bloco-beneficio-1 span.size-50{ font-size:clamp(1.5rem,7vw,2rem) !important; }
  .benef-track .box-dourado{ width:228px !important; min-width:228px !important; max-width:228px !important; height:326px !important; padding:26px 20px !important; gap:20px; }
  .benef-track .box-dourado img[src*='beneficio-']{ width:88px !important; height:88px !important; }
  .benef-track .box-dourado .font-color-dourado{ font-size:1.18rem !important; }
}


/* multicategorias mobile: etiquetas com altura igual -> todos os cards do mesmo tamanho */
@media (max-width:600px){
  .col.multicategorias .bg-red.border-radius-bottom-15{
    display:flex; align-items:center; justify-content:center; text-align:center; min-height:74px;
  }
  .col.multicategorias .bg-red.border-radius-bottom-15 .multicategorias{ line-height:1.2; }
}


/* === Padrao de largura lateral das secoes (1240/32, como modelos/fundador/tradicao) === */

/* MULTICATEGORIAS: mesma caixa do resto da pagina + 3 em cima / 2 embaixo no desktop */
.row.row-cols-5.multicategorias{
  max-width:1240px !important; margin-left:auto !important; margin-right:auto !important;
  padding:0 32px !important; display:flex; flex-wrap:wrap; justify-content:center; gap:24px;
}
.row.row-cols-5.multicategorias > .col.multicategorias{ margin:0 !important; padding:0 !important; }
@media (min-width:901px){
  .row.row-cols-5.multicategorias > .col.multicategorias{ flex:0 0 31% !important; width:31% !important; max-width:31% !important; }
}
@media (max-width:900px){
  .row.row-cols-5.multicategorias{ padding:0 20px !important; gap:14px; }
  .row.row-cols-5.multicategorias > .col.multicategorias{ flex:0 0 46% !important; width:46% !important; max-width:46% !important; }
}

/* BENEFICIOS: mesma largura/padding padrao (1240/32) e cards um pouco menores (mais perto do Decor) */
.row.row-cols-2.bloco-beneficio{ max-width:1240px !important; padding:0 32px !important; }
.bloco-beneficio-1{ flex:0 0 430px !important; max-width:430px !important; }
.benef-track .box-dourado{ width:268px !important; min-width:268px !important; max-width:268px !important; height:360px !important; }
.benef-track .box-dourado img[src*='beneficio-']{ width:96px !important; height:96px !important; }
@media (max-width:600px){
  .benef-track .box-dourado{ width:216px !important; min-width:216px !important; max-width:216px !important; height:300px !important; }
  .benef-track .box-dourado img[src*='beneficio-']{ width:82px !important; height:82px !important; }
}


/* === Beneficios: animacao no botao + titulo com mais destaque + cards mais finos === */

/* botao: brilho continuo passando + hover (preenche vermelho, sobe, seta desliza) */
.bloco-beneficio-1 .botton-taxa{ position:relative; overflow:hidden; transition:background-color .25s ease, box-shadow .25s ease, transform .2s ease; }
.bloco-beneficio-1 .botton-taxa::after{ content:""; position:absolute; top:0; left:-60%; width:42%; height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.20),transparent); transform:skewX(-18deg); animation:benefShine 3.4s ease-in-out infinite; pointer-events:none; }
@keyframes benefShine{ 0%{ left:-60%; } 55%,100%{ left:135%; } }
.bloco-beneficio-1 .botton-taxa:hover{ background:#9C1F1E !important; transform:translateY(-2px); box-shadow:0 12px 28px -12px rgba(156,31,30,.7); }
.bloco-beneficio-1 .botton-taxa a, .bloco-beneficio-1 .botton-taxa a.size-24{ position:relative; z-index:1; transition:color .25s ease; }
.bloco-beneficio-1 .botton-taxa:hover a, .bloco-beneficio-1 .botton-taxa:hover a.size-24{ color:#fff !important; }
.bloco-beneficio-1 .botton-taxa a img{ transition:transform .25s ease; }
.bloco-beneficio-1 .botton-taxa:hover a img{ transform:translateX(-4px); }
@media (prefers-reduced-motion:reduce){ .bloco-beneficio-1 .botton-taxa::after{ animation:none; } }

/* titulo com mais destaque: maior, branco puro, barra de acento vermelha */
.bloco-beneficio-1 span.size-50{ font-size:clamp(1.9rem,2.5vw,2.6rem) !important; color:#fff !important; line-height:1.1 !important; letter-spacing:-.01em; }
.bloco-beneficio-1 span.size-50::before{ content:""; display:block; width:56px; height:4px; border-radius:3px; background:linear-gradient(90deg,#E2241B,#9C1F1E); margin-bottom:16px; }

/* cards um pouco mais finos */
.benef-track .box-dourado{ width:246px !important; min-width:246px !important; max-width:246px !important; }
@media (max-width:600px){
  .benef-track .box-dourado{ width:202px !important; min-width:202px !important; max-width:202px !important; }
}


/* === CORRECAO MOBILE beneficios (reafirma empilhamento/tamanhos por ultimo -> vence desktop) === */
@media (max-width:1040px){
  .row.row-cols-2.bloco-beneficio{ padding-left:20px !important; padding-right:20px !important; column-gap:0; }
  .bloco-beneficio-1, .bloco-beneficio-2{ flex:0 0 100% !important; max-width:100% !important; min-width:0 !important; }
  .no-line-beneficio{ display:inline !important; }
}
@media (max-width:600px){
  .bloco-beneficio-1 span.size-50{ font-size:clamp(1.5rem,6.4vw,2rem) !important; }
}


/* === FIX mobile: matar overflow horizontal (conserta o modal cortado + "X") === */
html, body{ overflow-x:clip; }
.pl-fmodal__dialog{ max-width:min(520px, calc(100vw - 28px)); }
@media (max-width:600px){
  .pl-fmodal{ padding:14px; }
  .pl-fmodal__close{ top:10px; right:10px; }
  .bloco-beneficio-1 span.size-50{ overflow-wrap:break-word; max-width:100%; }
}


/* === Normalizar respiro entre lâminas: tirar o excesso do topo dos benefícios no desktop === */
.row.row-cols-2.bloco-beneficio{ margin-top:0 !important; }       /* desktop: wrappers ja dao ~60px como nas outras secoes */
@media (max-width:1040px){
  .row.row-cols-2.bloco-beneficio{ margin-top:clamp(36px,7vw,56px) !important; }  /* mobile: top-30 zerado, precisa do respiro */
}


/* numeros grandes dos cards "Por que ser franqueado" em branco forte (mantem peso 900) */
.ser-franqueado .franq-card__num{ color:#fff !important; }


/* fix: o __num e' texto com gradiente (text-fill-color:transparent) -> sobrescrever o fill, nao so o color */
.ser-franqueado .franq-card__num{
  background:none !important;
  -webkit-background-clip:border-box !important; background-clip:border-box !important;
  -webkit-text-fill-color:#fff !important; color:#fff !important;
}


/* alinhar valores dos cards: reservar 2 linhas no __num -> "Isenta"/demais alinham com "No produto" e as legendas batem */
@media (min-width:600px){
  .ser-franqueado .franq-card__num{ min-height:2.1em; }
}


/* === FAQ estilo Decor: pills escuros + pergunta aberta em vermelho + margem lateral padrao + afastamento vertical === */

/* caixa do FAQ: largura/padding padrao (1240/32) + afastar das secoes de cima e de baixo */
.container-franquia:has(> #accordionExample){
  max-width:1240px !important;
  margin-top:clamp(56px,8vw,104px) !important; margin-bottom:clamp(56px,8vw,104px) !important;
  margin-left:auto !important; margin-right:auto !important;
  padding-left:32px !important; padding-right:32px !important;
}
.container-franquia:has(> #accordionExample) > .row{ margin-left:0 !important; margin-right:0 !important; }

/* itens: pills escuros, arredondados, com respiro entre eles */
#accordionExample .accordion-item{ background:transparent !important; border:none !important; margin:0 0 12px !important; border-radius:16px !important; overflow:hidden; }
#accordionExample .accordion-item:last-child{ margin-bottom:0 !important; }

/* pergunta (botao) */
#accordionExample .accordion-button{
  background:#2b2b30 !important; color:#fff !important; font-weight:700 !important;
  font-size:clamp(1rem,1.15vw,1.18rem) !important; border-radius:16px !important;
  padding:20px 22px !important; box-shadow:none !important;
}
#accordionExample .accordion-button:not(.collapsed){ color:#E2241B !important; border-radius:16px 16px 0 0 !important; }
#accordionExample .accordion-button:focus{ box-shadow:none !important; outline:none; }

/* resposta (corpo) */
#accordionExample .accordion-body{
  background:#2b2b30 !important; color:#c9c9c9 !important;
  font-size:clamp(.95rem,1.02vw,1.04rem) !important; line-height:1.6 !important;
  border-radius:0 0 16px 16px !important; padding:2px 22px 22px !important;
}

/* chevron branco (vermelho quando aberto) */
#accordionExample .accordion-button::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l5 6 5-6'/%3E%3C/svg%3E") !important;
}
#accordionExample .accordion-button:not(.collapsed)::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23E2241B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 5l5 6 5-6'/%3E%3C/svg%3E") !important;
}




/* === FAQ: lupa em badge vermelho + box arredondada com fundo (estilo Decor) === */

/* box do FAQ: fundo + cantos arredondados + respiro interno (mantem largura/centralizacao/afastamento vertical) */
.container-franquia:has(> #accordionExample){
  max-width:1240px !important;
  margin:clamp(56px,8vw,104px) auto !important;
  padding:clamp(28px,4vw,56px) clamp(22px,3.2vw,48px) !important;
  background:#1c1d22 !important;
  border:1px solid rgba(255,255,255,.06) !important;
  border-radius:28px !important;
}

/* titulo com a lupa: badge vermelho circular + alinhamento vertical */
.container-franquia.faq{ display:flex; align-items:center; gap:14px; }
.container-franquia.faq .faq-badge{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:clamp(46px,3.6vw,60px); height:clamp(46px,3.6vw,60px);
  background:#9C1F1E; border-radius:50%;
}
.container-franquia.faq .faq-badge svg{ width:52%; height:52%; display:block; }

/* mobile: box com menos padding e cantos menores */
@media (max-width:600px){
  .container-franquia:has(> #accordionExample){ padding:20px 14px !important; border-radius:20px !important; }
  .container-franquia.faq .faq-badge{ width:42px; height:42px; }
}


/* === FAQ: animacao ao abrir + transicoes suaves === */
#accordionExample .accordion-collapse.collapsing{ transition:height .35s ease; }
#accordionExample .accordion-button{ transition:color .25s ease, background-color .25s ease, border-radius .25s ease; }
#accordionExample .accordion-button::after{ transition:transform .3s ease; }
@keyframes faqReveal{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
#accordionExample .accordion-collapse.show .accordion-body{ animation:faqReveal .35s ease both; }
@media (prefers-reduced-motion:reduce){
  #accordionExample .accordion-collapse.show .accordion-body{ animation:none; }
  #accordionExample .accordion-button,
  #accordionExample .accordion-button::after{ transition:none; }
}


/* === Hero: traco vermelho no TOPO (espelha o border-top vermelho da faixa de numeros, que fica colado na base da hero) === */
.container-fluid.form-franquia{ border-top:2px solid #e2241b; }

/* === Lamina final (CTA Apolinario): emoldurar com faixa vermelha em cima e embaixo (igual a da faixa de numeros) === */
.container-fluid.form-franquia-rodape{ border-top:2px solid #e2241b; border-bottom:2px solid #e2241b; }

/* === Lamina final: centralizar o form verticalmente contra a foto do Apolinario === */
@media (min-width:768px){
  .form-franquia-rodape .franqueado-rodape{ display:flex; flex-direction:column; justify-content:center; }
  .form-franquia-rodape .franqueado-rodape .top-40{ padding-top:0 !important; }
}


/* ============================================================
   PADRONIZACAO DO ESPACO VERTICAL ENTRE LAMINAS
   --lam = respiro externo (gap entre laminas ~= 2x --lam)
   --lam-in = gap interno pequeno (titulo -> cards da mesma lamina)
   ============================================================ */
:root{ --lam:54px; --lam-in:18px; }
@media (max-width:780px){ :root{ --lam:34px; --lam-in:14px; } }

/* NUMEROS (stats-band) */
body > .container-fluid.stats-band{ padding-top:var(--lam)!important; padding-bottom:var(--lam)!important; }
/* TRADICAO (espaco mora no inner .sec-tradicao) */
body > .container-fluid:has(.sec-tradicao){ padding-top:var(--lam)!important; padding-bottom:var(--lam)!important; }
body > .container-fluid:has(.sec-tradicao) .sec-tradicao{ padding-top:0!important; padding-bottom:0!important; }
/* FUNDADOR */
body > .container-fluid.sec-fundador{ padding-top:var(--lam)!important; padding-bottom:var(--lam)!important; }
/* PILARES (titulo + cards) -> externo no titulo(topo) e nos cards(base); interno pequeno */
body > .container-fluid:has(.titulo-crescimento){ padding-top:var(--lam)!important; padding-bottom:var(--lam-in)!important; }
body > .container-fluid:has(.nossoss-pilares){ padding-top:0!important; padding-bottom:var(--lam)!important; }
/* POR-QUE SER FRANQUEADO */
body > .container-fluid:has(.ser-franqueado){ padding-top:var(--lam)!important; padding-bottom:var(--lam)!important; }
/* MODELOS (titulo + cards) */
body > .container-fluid.pl-lamina-top{ padding-top:var(--lam)!important; padding-bottom:var(--lam-in)!important; }
body > .container-fluid:has(.modelos-de-negocio){ padding-top:0!important; padding-bottom:var(--lam)!important; }
/* MULTICATEGORIAS */
body > .container-fluid:has(.multicategorias){ padding-top:var(--lam)!important; padding-bottom:var(--lam)!important; }
/* BENEFICIOS */
body > .container-fluid:has(.bloco-beneficio){ padding-top:var(--lam)!important; padding-bottom:var(--lam)!important; }
/* FAQ (box) -> respiro como margem externa da box */
.container-franquia:has(> #accordionExample){ margin-top:var(--lam)!important; margin-bottom:var(--lam)!important; }


/* --- correcao: zera os espacadores verticais INTERNOS de borda que somavam ao --lam externo --- */
/* wrapper .container-franquia direto de cada lamina de conteudo (remove .top-30/.bottom-30/.bottom-15 e o pt100/pb100 do .ser-franqueado) */
body > .container-fluid:has(.ser-franqueado) > .container-franquia,
body > .container-fluid:has(.multicategorias) > .container-franquia,
body > .container-fluid:has(.bloco-beneficio) > .container-franquia,
body > .container-fluid:has(.modelos-de-negocio) > .container-franquia,
body > .container-fluid:has(.nossoss-pilares) > .container-franquia{
  padding-top:0!important; padding-bottom:0!important;
}
/* multicategorias: zera tambem o pt grande do titulo (110) */
body > .container-fluid:has(.multicategorias) .center-title{ padding-top:0!important; }
/* beneficios: o wrapper interno e' .container-franquia.top-30.bottom-30 (caso nao seja filho direto) */
body > .container-fluid:has(.bloco-beneficio) .container-franquia.top-30.bottom-30{ padding-top:0!important; padding-bottom:0!important; }


/* --- ajuste fino: restaura respiro interno titulo->cards na lamina PILARES (estava colando) --- */
body > .container-fluid:has(.nossoss-pilares) > .container-franquia{ padding-top:24px!important; }