/* =========================================================
   PROGRAMA DE ESTÁGIO GRUPO SMART FIT 2027 — Elementor Pro
   CSS de apoio. Cole em:
   Elementor > Configurações do site > CSS personalizado
   (ou enfileire pelo tema filho).

   Contém apenas o que o Elementor não faz nativamente:
   blocos com corte diagonal (KV), carrossel, mapa, iceberg,
   listas com marcadores próprios e ajustes de fidelidade.
   Tudo o que é cor, tipografia, espaçamento e fundo continua
   editável pelos painéis do Elementor.
   ATENÇÃO: os tokens são prefixados com --sf- de propósito.
   O Elementor usa --display, --gap, --width e --content-width
   internamente nos containers; usar esses nomes quebraria o layout.
   ========================================================= */

:root{
  --sf-yellow:#FFC72C;
  --sf-yellow-deep:#F2B705;
  --sf-orange:#F1541E;
  --sf-ink:#0B0B0B;
  --sf-white:#FFFFFF;
  --sf-smoke:#F4F3F0;
  --sf-gray:#7C7C77;
  --sf-sand:#A8A8A2;

  --sf-kv-gap:10px;
  --sf-radius:32px;
  --sf-radius-sm:18px;
  /* --sf-title   -> titulos principais
     --sf-display -> titulos menores, rotulos, botoes, navegacao
     --sf-body    -> corpo de texto
     Para trocar por uma fonte de marca, altere so estas tres linhas
     (e cadastre a fonte em Elementor > Fontes personalizadas). */
  --sf-title:"Kufam","Arial Black",sans-serif;
  --sf-display:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --sf-body:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --sf-gap:clamp(18px,2.2vw,26px);
  --sf-cgap:22px;               /* gap do trilho do carrossel */
}

/* ---------------- Base ---------------- */
html{scroll-behavior:smooth}
body{overflow-x:hidden}
.sf-section [id],
.e-con[id]{scroll-margin-top:96px}
.sf-anchor{position:absolute;top:-96px}

/* Largura útil idêntica ao layout original: min(1240px, 92vw) */
.sf-section > .e-con-inner{
  width:min(var(--content-width,1240px),92vw);
  max-width:none;
  margin-inline:auto;
}

/* Reveal (entrada por scroll) */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}

/* =========================================================
   1. CABEÇALHO
   ========================================================= */
.sf-header .progress{
  position:absolute;left:0;bottom:-2px;height:3px;width:100%;
  background:var(--sf-orange);transform:scaleX(0);transform-origin:0 50%;z-index:2;
}
.sf-header .sf-progress-holder{position:static}
.sf-nav{margin-left:auto;width:auto}
.sf-nav .elementor-nav-menu a{white-space:nowrap}
.sf-logo{width:auto;flex:0 0 auto}
.logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--sf-ink)}
.logo__tag{
  background:var(--sf-ink);color:var(--sf-white);font-family:var(--sf-display);font-weight:800;
  font-size:.58rem;line-height:1;letter-spacing:.22em;padding:5px 6px 4px;border-radius:3px;
}
.logo__word{font-family:var(--sf-display);font-weight:600;font-size:1.3rem;line-height:1;letter-spacing:-.03em;white-space:nowrap}
.logo__word b{font-weight:800}
.logo--light{color:var(--sf-white)}
.logo--light .logo__tag{background:var(--sf-yellow);color:var(--sf-ink)}

@media (max-width:900px){
  .sf-header-cta{display:none}
}

/* =========================================================
   2. HERO
   ========================================================= */
.hero__reference{position:relative}
.hero__img img{width:100%;height:auto;display:block}
.hero__reference-cta{
  position:absolute;left:4.1%;bottom:7.2%;width:22.5%;height:11%;z-index:3;
}
.hero__reference-cta .elementor-button-wrapper,
.hero__reference-cta .elementor-button{width:100%;height:100%;display:block}
.hero__reference-cta .elementor-button{
  text-indent:-9999px;overflow:hidden;border:0;box-shadow:none;padding:0;
}
.hero__reference-cta .elementor-button:focus-visible{outline:4px solid var(--sf-white);outline-offset:4px;text-indent:0}
@media (max-width:680px){
  .hero__reference-cta{left:4%;bottom:6.5%;width:25%;height:13%}
}

/* =========================================================
   2b. KV HERO EDITÁVEL (3 blocos)
   Reconstrói o key visual com containers do Elementor: bloco amarelo
   com o texto, bloco da foto e faixa laranja com o logo. As diagonais
   saem do mesmo motor dos demais blocos (classes kv--<tipo>), então
   cor, tipografia, imagem e botão continuam editáveis nos painéis.

   Proporções medidas no KV original (1384x780):
   colunas 650 / 463 / 138, diagonais de 22° e 7°.
   ========================================================= */
.kv-hero,
.kv-hero > .e-con-inner{
  --display:grid;display:grid;
  grid-template-columns:var(--kv-hero-cols,650fr 463fr 138fr);
  gap:var(--kv-hero-gap,clamp(10px,2vw,28px));
  align-items:stretch;
}
.kv-hero > .e-con-inner{grid-column:1 / -1;width:100%;max-width:none}
.kv-hero > .kv,
.kv-hero > .e-con-inner > .kv{
  --display:flex;width:auto;min-width:0;
  min-height:var(--kv-hero-h,clamp(380px,51vw,690px));
}
/* A faixa lateral não tem conteúdo longo: só o logo, ancorado embaixo. */
.kv-hero__stripe{justify-content:flex-end}

/* Textos do KV. Tamanhos proporcionais ao original; qualquer ajuste
   feito na aba Estilo do Elementor tem prioridade sobre estas regras. */
.kv-hero__title .elementor-heading-title{
  font-family:var(--sf-title);font-weight:900;text-transform:uppercase;
  font-size:clamp(28px,3.7vw,51px);line-height:1.08;letter-spacing:-.02em;color:var(--sf-ink);
}
.kv-hero__sub .elementor-heading-title,
.kv-hero__sub{
  font-family:var(--sf-display);font-weight:600;text-transform:uppercase;
  font-size:clamp(16px,2.24vw,31px);line-height:1.22;color:var(--sf-ink);
}
.kv-hero__sub b,.kv-hero__sub strong{font-weight:900}
.kv-hero__badge .elementor-heading-title{
  display:inline-block;background:var(--sf-orange);color:var(--sf-white);
  font-family:var(--sf-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(14px,2.1vw,29px);line-height:1;letter-spacing:.02em;
  padding:.42em .72em;border-radius:4px;
}
.kv-hero__cta .elementor-button{
  background:transparent;color:var(--sf-ink);padding:0;border:0;box-shadow:none;
  font-family:var(--sf-title);font-weight:900;text-transform:uppercase;
  font-size:clamp(17px,2.17vw,30px);letter-spacing:-.01em;
}
.kv-hero__cta .elementor-button:hover{color:var(--sf-orange);background:transparent}
.kv-hero__logo img{width:auto;max-width:100%;height:auto}

/* No celular o KV vira a composição vertical do layout original: foto no
   topo com a base inclinada, bloco amarelo entrando por baixo com o topo
   na mesma inclinação e o botão laranja ocupando a largura toda. A faixa
   lateral sai de cena — o logo já aparece no cabeçalho da página. */
@media (max-width:1024px){
  .kv-hero,
  .kv-hero > .e-con-inner{
    grid-template-columns:1fr;
    gap:var(--kv-hero-gap-m,20px);
  }
  .kv-hero > .kv,
  .kv-hero > .e-con-inner > .kv{margin-left:0!important;min-height:auto}
  .kv-hero .kv.kv-hero__photo{order:-1;min-height:clamp(210px,52vw,330px)}
  .kv-hero .kv.kv-hero__panel{min-height:clamp(300px,64vw,430px)}
  .kv-hero .kv.kv-hero__stripe{display:none}
  .kv-hero__cta .elementor-button{
    width:100%;justify-content:center;background:var(--sf-orange);color:var(--sf-white);
    padding:.85em 1em;border-radius:8px;font-size:clamp(15px,4.4vw,20px);
  }
  .kv-hero__cta .elementor-button:hover{background:var(--sf-ink);color:var(--sf-white)}
}

/* =========================================================
   3. BLOCOS DO KV (corte diagonal)
   O clip-path é gerado em JS a partir do atributo data-kv.
   ========================================================= */
.kv{position:relative;--kv-dx:0px;--kv-dy:0px}
.kv > .e-con-inner{width:100%}
.panel__in{height:100%}
[data-kv="right-in"] > .panel__in,
[data-kv="right-out"] > .panel__in{padding-right:calc(var(--kv-dx) + clamp(18px,1.8vw,30px))}
[data-kv="left-in"] > .panel__in,
[data-kv="left-out"] > .panel__in{padding-left:calc(var(--kv-dx) + clamp(18px,1.8vw,30px))}

/* pares vizinhos encostam com o filete branco do KV.
   O par usa grid (igual ao layout original) para que o calc(100% + dx)
   do segundo bloco seja calculado sobre a coluna, e nao sobre o par inteiro. */
.pair--kv{--display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.pair--kv > *{--display:flex;width:auto;min-width:0}
/* a margem negativa ja alarga o bloco em dx, porque o item de grid
   estica ate a borda direita da coluna. Definir width aqui faria a
   coluna crescer junto e desequilibraria o par. */
.pair--kv > .kv + .kv{margin-left:calc(-1 * var(--pair-kv-dx,0px))}

/* Variante editável: usada quando a proporção entre os dois blocos deve
   obedecer à largura configurada no próprio container do Elementor. */
.pair--kv.pair--adjustable{--display:flex;grid-template-columns:none}
.pair--kv.pair--adjustable > .kv{
  width:var(--width,50%);flex:0 0 var(--width,50%);min-width:0;
}
.pair--kv.pair--adjustable > .kv + .kv{
  margin-left:calc(-1 * var(--pair-kv-dx,0px));
  width:calc(var(--width,50%) + var(--pair-kv-dx,0px));
  flex-basis:calc(var(--width,50%) + var(--pair-kv-dx,0px));
}
@media (max-width:1024px){
  .pair--kv{grid-template-columns:1fr}
  .pair--kv > .kv + .kv{margin-left:0}
  .pair--kv.pair--adjustable > .kv,
  .pair--kv.pair--adjustable > .kv + .kv{
    width:var(--width,100%);flex-basis:var(--width,100%);margin-left:0;
  }
}

/* Áreas de imagem com corte diagonal. A imagem é configurada no Fundo do container.
   O JS move apenas a posição do fundo para um parallax suave; o bloco não se desloca. */
.sf-photo{position:relative;overflow:hidden}
.sf-photo--placeholder{background-color:#0E1224}
.sf-photo--parallax{
  --sf-photo-parallax-y:0px;
  background-position:50% calc(50% + var(--sf-photo-parallax-y))!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  will-change:background-position;
}

/* Zoom no scroll. A camada ::before herda a imagem de fundo do próprio
   bloco e é ela que cresce, então o conteúdo (textos, botões) fica parado
   e o recorte diagonal continua valendo. Também funciona em bloco com
   widget de imagem, desde que o widget tenha a classe sf-photo__img. */
.sf-photo--zoom{--sf-photo-zoom:1;position:relative;overflow:hidden}
.sf-photo--zoom::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:inherit;background-position:inherit;
  background-size:cover;background-repeat:no-repeat;
  transform:scale(var(--sf-photo-zoom));transform-origin:50% 50%;
  will-change:transform;
}
.sf-photo--zoom > *{position:relative;z-index:1}
.sf-photo--zoom .sf-photo__img img{
  transform:scale(var(--sf-photo-zoom));transform-origin:50% 50%;
  will-change:transform;
}
/* O bloco sem imagem de fundo não precisa da camada extra. */
.sf-photo--zoom.sf-photo--placeholder::before{background-image:none}

/* Vídeo com o botão play amarelo pulsante do layout original */
.sf-video{position:relative;width:100%;min-width:0}
.sf-video .sf-video-embed{position:absolute;inset:0;width:100%;height:100%;max-width:none;z-index:2}
.sf-video .sf-video-embed .elementor-widget-container,
.sf-video .elementor-wrapper,
.sf-video .elementor-video,
.sf-video iframe{width:100%;height:100%;min-width:0;max-width:none}
.sf-video iframe{display:block}
.sf-video .elementor-custom-embed-image-overlay{width:100%;height:100%;min-height:inherit;background-size:cover}
.sf-video .elementor-custom-embed-play{z-index:3}
.sf-video .elementor-custom-embed-play i,
.sf-video .elementor-custom-embed-play svg{
  width:82px;height:82px;line-height:82px;border-radius:999px;
  background:var(--sf-yellow);color:var(--sf-ink);fill:var(--sf-ink);
  display:grid;place-items:center;text-shadow:none;opacity:1;
  transition:transform .22s ease,background-color .22s ease;
}
.sf-video .elementor-custom-embed-play::after{
  content:"";position:absolute;inset:50% auto auto 50%;width:102px;height:102px;
  transform:translate(-50%,-50%);border-radius:999px;border:2px solid var(--sf-yellow);
  opacity:.6;animation:sf-ring 2.4s ease-out infinite;pointer-events:none;
}
@keyframes sf-ring{0%{transform:translate(-50%,-50%) scale(.9);opacity:.6}70%{transform:translate(-50%,-50%) scale(1.25);opacity:0}100%{opacity:0}}
.sf-video .elementor-custom-embed-play:hover i{transform:scale(1.07);background:var(--sf-white)}
.sf-video .photo__note{position:absolute;left:16px;bottom:16px;z-index:4}

/* =========================================================
   4. TEXTOS E LISTAS
   ========================================================= */
.quote{border-left:6px solid var(--sf-yellow);padding-left:16px}

.from-list ul{margin:0;padding:0;list-style:none}
.from-list li{padding:8px 0 8px 24px;position:relative;border-bottom:1px solid rgba(11,11,11,.08)}
.from-list li::before{content:"";position:absolute;left:0;top:16px;width:9px;height:9px;background:var(--sf-orange);border-radius:2px}

.req ul{margin:0;padding:0;list-style:none}
.req li{position:relative;padding:13px 0 13px 36px;border-bottom:1px solid rgba(255,255,255,.14)}
.req li strong{color:var(--sf-white)}
.req li::before{content:"";position:absolute;left:0;top:20px;width:18px;height:4px;background:var(--sf-yellow);border-radius:2px}

.shout__title em,.panel__shout em{font-style:normal;color:var(--sf-yellow)}

/* =========================================================
   5. CARROSSEL
   ========================================================= */
.carousel__track{
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  flex-wrap:nowrap;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-block:8px 6px;
}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track > .e-con{
  scroll-snap-align:start;
  flex:0 0 calc((100% - var(--sf-cgap) * 2) / 3);
  width:auto;
}
.carousel__track.is-dragging{cursor:grabbing;scroll-snap-type:none}
.carousel__ctrl{display:flex;gap:10px}
.carousel__ctrl button{
  width:46px;height:46px;padding:0;border-radius:999px;cursor:pointer;border:2px solid currentColor;
  background:transparent;color:inherit;display:grid;place-items:center;line-height:0;font-size:0;transition:.2s;
  appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;box-shadow:none;
}
.carousel__ctrl button svg{display:block;width:21px;height:21px;margin:auto;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.carousel__ctrl button:focus,
.carousel__ctrl button:active{background:transparent;color:inherit;border-color:currentColor;box-shadow:none;outline:none}
.carousel__ctrl button:focus-visible{
  background:transparent;color:inherit;border-color:currentColor;box-shadow:none;
  outline:2px solid currentColor;outline-offset:3px;
}
.carousel__ctrl button:hover:not(:disabled),
.carousel__ctrl button:hover:not(:disabled):focus,
.carousel__ctrl button:hover:not(:disabled):active{background:var(--sf-yellow);color:var(--sf-ink);border-color:var(--sf-yellow)}
.carousel__ctrl button:disabled{opacity:.25;cursor:default}
.carousel__bar{height:3px;background:rgba(128,128,128,.25);margin-top:16px;border-radius:2px;overflow:hidden}
.carousel__bar i{display:block;height:100%;background:var(--sf-yellow);transform-origin:0 50%;transform:scaleX(.1);transition:transform .25s ease}
.section--dark .carousel__ctrl button,
.section--dark .carousel__head{color:var(--sf-white)}


/* Carrossel das marcas: 4 cartões visíveis por página e 2 no mobile.
   O JS avança uma largura inteira do track, então também navega em grupos 4/2. */
.carousel--brands .carousel__track > .e-con{
  flex-basis:calc((100% - var(--sf-cgap) * 3) / 4);
}
@media (max-width:1024px){
  .carousel--brands .carousel__track > .e-con{
    flex-basis:calc((100% - var(--sf-cgap) * 3) / 4);
  }
}
@media (max-width:767px){
  .carousel--brands .carousel__track > .e-con{
    flex-basis:calc((100% - var(--sf-cgap)) / 2);
  }
}

.brand{transition:background-color .2s ease,color .2s ease,transform .2s ease}
.brand:hover{background:var(--sf-yellow)!important;transform:translateY(-4px)}
.brand:hover .brand__name{color:var(--sf-ink)!important}
.brand__logo img{max-height:44px;width:auto;object-fit:contain}
.brand__logo:not(:has(img)){display:none}
.card{transition:transform .22s ease}
.card:hover{transform:translateY(-5px)}

@media (max-width:1024px){
  .carousel__track > .e-con{flex-basis:calc((100% - var(--sf-cgap)) / 2)}
}
@media (max-width:680px){
  .carousel__track > .e-con{flex-basis:100%}
  .carousel__ctrl button{width:42px;height:42px}
}

/* =========================================================
   6. ICEBERG
   ========================================================= */
.iceberg-wrap{width:100%}
.iceberg{display:block;width:100%;max-width:440px;height:auto;margin-inline:auto}
.ice-tip{font-family:var(--sf-display);font-weight:900;font-size:22px;fill:var(--sf-ink);letter-spacing:-.35px}
.ice-sub{font-family:var(--sf-display);font-weight:800;font-size:19px;fill:rgba(255,255,255,.94);letter-spacing:-.15px}
.ice-sub2{font-family:var(--sf-display);font-weight:700;font-size:9px;fill:rgba(255,255,255,.68);letter-spacing:1.25px}
.ice-facet{transform-box:fill-box;transform-origin:center}
.ice-ridge{stroke:rgba(255,255,255,.24);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ice-line{stroke:#fff;stroke-width:2;stroke-dasharray:10 8;opacity:.55;animation:sf-drift 9s linear infinite}
@keyframes sf-drift{to{stroke-dashoffset:-72}}
.berg{animation:sf-bob 8s ease-in-out infinite}
@keyframes sf-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.berg__under{opacity:0;transform:translateY(28px);transition:opacity 1.1s ease .2s,transform 1.1s cubic-bezier(.19,1,.22,1) .2s}
.iceberg-holder.is-in .berg__under{opacity:1;transform:none}
.bubbles circle{fill:rgba(255,255,255,.4);animation:sf-rise 6s ease-in infinite}
.bubbles circle:nth-child(2){animation-delay:1.6s}
.bubbles circle:nth-child(3){animation-delay:2.9s}
.bubbles circle:nth-child(4){animation-delay:4.2s}
@keyframes sf-rise{0%{transform:translateY(0);opacity:0}20%{opacity:.55}100%{transform:translateY(-120px);opacity:0}}
@media (max-width:1024px){.iceberg{max-width:340px}}

/* =========================================================
   7. BIG NUMBERS
   ========================================================= */
.numbers__grid{--display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.numbers__grid > .elementor-widget{--display:flex;width:auto}
.sf-counter .elementor-counter-title{margin-top:6px}
@media (max-width:680px){.numbers__grid{grid-template-columns:repeat(2,1fr)}}

/* =========================================================
   8. MAPA
   ========================================================= */
#mapa{width:100%;max-width:500px;max-height:470px;height:auto;display:block;margin:auto}
.map__outline{fill:rgba(255,199,44,.06);stroke:rgba(255,199,44,.5);stroke-width:1.6;stroke-linejoin:round}
.map-pin{cursor:pointer;transition:opacity .25s ease}
.map-pin circle{transition:r .16s ease,opacity .16s ease}
.map-pin:hover circle.map-pin__core,
.map-pin.is-active circle.map-pin__core{r:9}
.map-pin.is-active circle:first-child{opacity:.28}
.map-pin text{font-family:var(--sf-display);font-weight:700;font-size:9.5px;fill:rgba(255,255,255,.62)}
.map-pin:hover text,.map-pin.is-active text{fill:#fff}
/* Os outros estados da mesma fase acendem junto com o apontado, e os
   estados das demais fases recuam sem sumir do mapa. */
.map-pin.is-phase circle:first-child{opacity:.2}
.map-pin.is-phase circle.map-pin__core{r:7.5}
.map-pin.is-phase text{fill:rgba(255,255,255,.9)}
.map-pin.is-dim{opacity:.34}
.map-pin.is-dim:hover,.map-pin.is-dim:focus{opacity:1}

.map-info__content{
  width:100%;display:flex;flex-direction:column;justify-content:center;
  opacity:1;transform:translateY(0);filter:blur(0);
  transition:opacity .36s cubic-bezier(.22,1,.36,1),transform .36s cubic-bezier(.22,1,.36,1),filter .36s ease;
}
.map-info__content.is-changing{opacity:0;transform:translateY(4px);filter:blur(1.5px)}
.map-info__top{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:8px}
.map-info__phase{
  margin:0;font-family:var(--sf-title);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.35rem,4.8vw,4rem);line-height:.9;letter-spacing:-.04em;color:var(--sf-ink);
}
.map-info__count{
  background:var(--sf-yellow);color:var(--sf-ink);border-radius:999px;padding:7px 12px;
  font-family:var(--sf-display);font-weight:800;font-size:.68rem;text-transform:uppercase;
  letter-spacing:.06em;white-space:nowrap;
}
.map-info__region{
  margin:8px 0 20px;color:var(--sf-ink);font-size:1.02rem;font-family:var(--sf-display);
  font-weight:800;text-transform:uppercase;letter-spacing:.04em;
}

/* Cronograma da fase: mesmo par rótulo/valor dos cartões de fase. */
.map-info__schedule{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
  margin:0 0 22px;padding:0;list-style:none;
}
.map-info__schedule > *{
  display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:12px;
  background:var(--sf-ink);color:var(--sf-white);
}
.map-info__schedule span{
  font-family:var(--sf-display);font-weight:800;font-size:.6rem;text-transform:uppercase;
  letter-spacing:.12em;color:var(--sf-yellow);
}
.map-info__schedule strong{font-family:var(--sf-display);font-weight:800;font-size:.95rem;line-height:1.15}

/* Lista de estados da fase. .map-info__cities continua valendo para
   páginas publicadas antes desta atualização. */
.map-info__states ul,
.map-info__cities ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:0;padding:0;list-style:none}
.map-info__states li,
.map-info__cities li{
  position:relative;padding:11px 12px 11px 31px;border-radius:11px;background:var(--sf-smoke);
  font-size:.79rem;font-weight:700;line-height:1.2;
  transition:background-color .2s ease,color .2s ease;
}
.map-info__states li::before,
.map-info__cities li::before{content:"";position:absolute;left:12px;top:50%;width:7px;height:7px;border:2px solid var(--sf-gray);border-radius:50%;transform:translateY(-50%)}
/* O estado apontado no mapa aparece marcado dentro da lista da fase. */
.map-info__states li.is-current{background:var(--sf-yellow);color:var(--sf-ink)}
.map-info__states li.is-current::before{border-color:var(--sf-ink);background:var(--sf-ink)}
.map-info__selected{margin:26px 0 0;padding-top:20px;border-top:1px solid rgba(11,11,11,.1);color:var(--sf-gray);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.map-info__cta{margin-top:22px}
@media (max-width:1024px){
  .map-info__states ul,
  .map-info__cities ul{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .map-info__states ul,
  .map-info__cities ul{grid-template-columns:1fr}
  .map-info__schedule{grid-template-columns:1fr}
}

/* =========================================================
   9. FASES
   ========================================================= */
.phases{--display:grid;grid-template-columns:repeat(4,1fr)}
.phases > .e-con{--display:flex;width:auto;transition:transform .18s ease,box-shadow .18s ease}
.phases > .e-con:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(11,11,11,.08)}
.phase[data-fase]{cursor:pointer}
/* Fase apontada no mapa (ou no próprio cartão). */
.phase.is-active{box-shadow:0 0 0 2px var(--sf-yellow) inset,0 16px 40px rgba(11,11,11,.08)}
.phase__head{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.phase__num{width:30px;height:30px;border-radius:999px;background:var(--sf-ink);color:#fff;display:grid;place-items:center;font-family:var(--sf-display);font-weight:800;font-size:.9rem}
.phase__label{font-family:var(--sf-display);font-weight:800;text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;color:var(--sf-ink)}
.phase__status{margin-left:auto;background:var(--sf-orange);color:#fff;font-family:var(--sf-display);font-weight:800;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:5px}

/* Nome da região da fase e os estados que entram nela. */
.phase__region{
  margin:2px 0 10px;font-family:var(--sf-title);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1;letter-spacing:-.03em;color:var(--sf-ink);
}
.phase__states{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px;padding:0;list-style:none}
.phase__states li{
  font-family:var(--sf-display);font-weight:800;font-size:.63rem;text-transform:uppercase;
  letter-spacing:.08em;padding:5px 8px;border-radius:6px;
  background:rgba(11,11,11,.06);color:var(--sf-ink);white-space:nowrap;
}
.phase__states li abbr{text-decoration:none;border:0;margin-left:3px;opacity:.5;font-size:.92em}
.section--dark .phase__states li,
.phase--open .phase__states li{background:rgba(11,11,11,.1)}
.phase__dates{
  margin:auto 0 0;padding-top:18px;border-top:1px solid rgba(11,11,11,.14);
  display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 14px;align-items:baseline;
  font-size:.82rem;color:var(--sf-gray);
}
.phase .phase__dates{margin-top:auto}
.phase__dates span{white-space:nowrap;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--sf-gray)}
.phase__dates strong{color:var(--sf-ink);font-weight:800;text-align:right}
.phase--open .phase__dates,.phase--open .phase__dates span{color:rgba(11,11,11,.62)}
.phase .elementor-widget-html:last-child{margin-top:auto}

/* Fallback: grade e cartões montados dentro de um único widget HTML,
   sem containers do Elementor. Não interfere no build por containers. */
.phases:not(.e-con){display:grid;gap:var(--sf-gap)}
.phases > .phase:not(.e-con){
  display:flex;flex-direction:column;min-height:100%;
  padding:clamp(20px,2.2vw,28px);border-radius:var(--sf-radius-sm);
  background:var(--sf-smoke);font-family:var(--sf-body);
}
.phases > .phase--open:not(.e-con){background:var(--sf-yellow)}

@media (max-width:1180px){.phases{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.phases{grid-template-columns:1fr}.phases > .e-con{min-height:160px}}

/* =========================================================
   10. BENEFÍCIOS
   ========================================================= */
.benefits{--display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.benefits > .elementor-widget{--display:flex;width:auto}
.ben .elementor-icon-box-wrapper{align-items:center}
.ben .elementor-icon{box-shadow:none}
@media (max-width:1024px){.benefits{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.benefits{grid-template-columns:1fr}}

/* =========================================================
   11. ETAPAS
   ========================================================= */
.steps{--display:grid;grid-template-columns:repeat(3,1fr)}
.steps > .e-con{--display:flex;width:auto}
.step__num .elementor-heading-title{
  color:transparent;-webkit-text-stroke:2px var(--sf-yellow);
}
@media (max-width:900px){.steps{grid-template-columns:1fr}}

/* =========================================================
   12. DEPOIMENTOS
   ========================================================= */
.testimonials__grid{--display:grid;grid-template-columns:repeat(3,1fr)}
.testimonials__grid > .e-con{--display:flex;width:auto}
.testimonial__photo img{
  width:78px;height:78px;border-radius:50%;object-fit:cover;
  background:linear-gradient(145deg,var(--sf-yellow),#F6E3A5);
}
.testimonial__photo:not(:has(img))::before{
  content:"FOTO";display:grid;place-items:center;width:78px;height:78px;border-radius:50%;
  background:linear-gradient(145deg,var(--sf-yellow),#F6E3A5);
  font-family:var(--sf-display);font-size:.62rem;font-weight:800;letter-spacing:.12em;color:rgba(11,11,11,.55);
}
.testimonial blockquote{margin:0}
.testimonial__person{margin:auto 0 0;display:flex;flex-direction:column;gap:2px}
.testimonial__person strong{font-family:var(--sf-display);font-size:.87rem;text-transform:uppercase;color:var(--sf-ink)}
.testimonial__person span{font-size:.76rem;color:#777771}
.testimonial .elementor-widget-html:last-child{margin-top:auto}
@media (max-width:900px){.testimonials__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.testimonials__grid{grid-template-columns:1fr}}

/* =========================================================
   13. FAQ — Accordion atual do Elementor (Nested Accordion)
   ========================================================= */
.faq .e-n-accordion{border-top:2px solid rgba(11,11,11,.12)}
.faq .e-n-accordion-item{border-bottom:2px solid rgba(11,11,11,.12)}
.faq .e-n-accordion-item-title{
  padding:20px 8px 20px 0!important;background:transparent!important;border:0!important;
  color:#0B0B0B;transition:color .2s ease;box-shadow:none!important;
}
.faq .e-n-accordion-item-title:hover{color:#0B0B0B}
.faq .e-n-accordion-item[open] > .e-n-accordion-item-title{color:#F1541E}
.faq .e-n-accordion-item-title-text{
  margin:0;font-family:var(--sf-display);font-size:17.3px;font-weight:700;line-height:1.35;color:inherit;
}
.faq .e-n-accordion-item-title-icon{color:inherit;flex:0 0 auto}
.faq .e-n-accordion-item-title-icon svg,
.faq .e-n-accordion-item-title-icon i{color:inherit;fill:currentColor}
.faq .faq__panel{padding:0 44px 22px 0}
.faq .faq__answer,
.faq .faq__answer p{font-family:var(--sf-body);font-size:16px;font-weight:400;line-height:1.6;color:#3A3A38}
.faq .faq__answer p:last-child{margin-bottom:0}
@media (max-width:767px){
  .faq .e-n-accordion-item-title{padding:18px 4px 18px 0!important}
  .faq .faq__panel{padding-right:22px;padding-bottom:20px}
  .faq .e-n-accordion-item-title-text{font-size:16px}
}

/* =========================================================
   14. RODAPÉ
   ========================================================= */
.footer__line{margin:0;font-size:.82rem;color:rgba(255,255,255,.55)}
.footer__nav--legal{display:flex;gap:18px;justify-content:flex-end}
.footer__nav--legal a{font-size:.8rem;text-decoration:none;color:rgba(255,255,255,.7)}
.footer__nav--legal a:hover{color:var(--sf-yellow)}
@media (max-width:767px){
  .footer__right{align-items:flex-start}
  .footer__nav--legal{justify-content:flex-start}
}

/* =========================================================
   15. ACESSIBILIDADE / MOVIMENTO REDUZIDO
   ========================================================= */
:focus-visible{outline:3px solid var(--sf-orange);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .berg__under{opacity:1;transform:none}
  .berg,.ice-line,.bubbles circle,.sf-video .elementor-custom-embed-play::after{animation:none}
}