/*
Theme Name: Alfa Carimbos
Theme URI: https://alfacarimbos.com.br
Author: Antigravity
Description: Tema personalizado para a Alfa Carimbos, focado em carimbos personalizados em Ribeirão Preto.
Version: 1.0
Text Domain: alfa-carimbos
*/

/* ══════════════════════════════════════
   TOKENS
══════════════════════════════════════ */
:root {
   --blue: #3E4095;
   --blue-d: #2e3078;
   --blue-l: #5254b0;
   --blue-pale: #EEEEF8;
   --blue-mid: #B8BAE8;
   --ink: #12131A;
   --ink-2: #1D1E2C;
   --slate: #3A3D56;
   --muted: #6B6F8E;
   --border: #E3E4F0;
   --surf: #F6F6FB;
   --white: #FFFFFF;
   --green: #1da851;

   --f-display: 'DM Serif Display', Georgia, serif;
   --f-body: 'DM Sans', system-ui, sans-serif;

   --r-sm: 6px;
   --r-md: 12px;
   --r-lg: 20px;
   --r-xl: 28px;
   --r-pill: 999px;

   --sh-sm: 0 2px 10px rgba(62, 64, 149, .09);
   --sh-md: 0 8px 32px rgba(62, 64, 149, .14);
   --sh-lg: 0 20px 60px rgba(62, 64, 149, .20);
}

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

html {
   scroll-behavior: smooth;
   font-size: 16px;
   -webkit-text-size-adjust: 100%
}

body {
   font-family: var(--f-body);
   color: var(--ink);
   background: var(--white);
   -webkit-font-smoothing: antialiased;
   overflow-x: hidden
}

/* ══ UTILS ══ */
.wrap {
   width: 100%;
   max-width: 1160px;
   margin: 0 auto;
   padding: 0 24px
}

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

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

/* ══ BUTTONS ══ */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 9px;
   font-family: var(--f-body);
   font-weight: 600;
   font-size: .95rem;
   line-height: 1;
   border: none;
   cursor: pointer;
   transition: transform .18s, box-shadow .18s, background .18s, filter .18s;
   white-space: nowrap;
   letter-spacing: -.01em
}

.btn:active {
   transform: scale(.97) !important
}

.btn-blue {
   background: var(--blue);
   color: #fff;
   padding: 15px 28px;
   border-radius: var(--r-pill);
   box-shadow: var(--sh-md)
}

.btn-blue:hover {
   background: var(--blue-l);
   box-shadow: var(--sh-lg);
   transform: translateY(-2px)
}

.btn-ghost {
   background: transparent;
   color: var(--blue);
   padding: 14px 28px;
   border-radius: var(--r-pill);
   border: 2px solid var(--blue)
}

.btn-ghost:hover {
   background: var(--blue-pale)
}

.btn-wa {
   background: var(--green);
   color: #fff;
   padding: 16px 32px;
   border-radius: var(--r-pill);
   font-size: 1rem;
   font-weight: 700;
   box-shadow: 0 8px 28px rgba(37, 211, 102, .30)
}

.btn-wa:hover {
   filter: brightness(1.07);
   transform: translateY(-2px);
   box-shadow: 0 14px 40px rgba(37, 211, 102, .40)
}

.btn-wa-sm {
   background: var(--green);
   color: #fff;
   padding: 10px 20px;
   border-radius: var(--r-pill);
   font-size: .85rem;
   font-weight: 700;
   box-shadow: 0 4px 16px rgba(37, 211, 102, .25)
}

.btn-wa-sm:hover {
   filter: brightness(1.07)
}

.btn-white {
   background: #fff;
   color: var(--blue);
   padding: 15px 28px;
   border-radius: var(--r-pill);
   font-weight: 700;
   box-shadow: 0 4px 20px rgba(0, 0, 0, .10)
}

.btn-white:hover {
   box-shadow: 0 8px 32px rgba(0, 0, 0, .16);
   transform: translateY(-2px)
}

/* ══ TOP BAR (inside nav) ══ */
.topbar {
   background: var(--blue);
   padding: 8px 16px;
   text-align: center;
   font-size: .78rem;
   font-weight: 600;
   color: rgba(255, 255, 255, .92);
   letter-spacing: .2px
}

.topbar span {
   color: #90EE90;
   margin: 0 6px
}

.topbar a {
   color: #fff;
   text-decoration: underline;
   text-underline-offset: 2px
}

/* ══════════════════════════════════════
   NAV
══════════════════════════════════════ */
.nav {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 900;
   background: rgba(255, 255, 255, .97);
   backdrop-filter: blur(16px);
   -webkit-backdrop-filter: blur(16px);
   border-bottom: 1px solid var(--border);
   transition: transform .35s cubic-bezier(.4, 0, .2, 1);
   background: rgba(255, 255, 255, .97);
}

.nav.nav-open {
   background: transparent !important;
   backdrop-filter: none !important;
   -webkit-backdrop-filter: none !important;
   border-bottom-color: transparent !important;
}

.nav.nav-hidden:not(.nav-open) {
   transform: translateY(-100%)
}

.nav-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 70px;
   gap: 20px
}

.nav-logo {
   display: flex;
   align-items: center
}

.nav-logo img {
   height: 54px;
   width: auto;
   max-width: 200px;
   object-fit: contain
}

.nav-links {
   display: flex;
   align-items: center;
   gap: 30px;
   list-style: none;
   margin-left: auto;
   margin-right: 30px;
}

.nav-links a {
   color: var(--muted);
   font-size: .875rem;
   font-weight: 500;
   transition: color .15s
}

.nav-links a:hover {
   color: var(--blue)
}

.nav-right {
   display: flex;
   gap: 10px;
   align-items: center;
   flex-shrink: 0
}

.nav-links-mobile {
   display: none;
}

/* Botão Hamburguer (Mobile) */
.nav-toggle {
   display: none;
   flex-direction: column;
   justify-content: space-between;
   width: 26px;
   height: 18px;
   background: none;
   border: none;
   cursor: pointer;
   padding: 0;
   z-index: 1001;
}

.nav-toggle span {
   display: block;
   width: 100%;
   height: 2px;
   background: var(--ink);
   border-radius: 2px;
   transition: transform .3s, opacity .3s, background .3s;
}

/* Estado Aberto (Hambúrguer vira X) */
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media(max-width: 900px) {
   .nav-links {
      display: none;
   }

   .nav-links-mobile {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100dvh;
      background: #ffffff;
      background-image: radial-gradient(circle at 2px 2px, rgba(37,211,102,0.04) 1px, transparent 0);
      background-size: 32px 32px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 20px;
      transform: translateX(100%);
      transition: transform .4s cubic-bezier(.4, 0, .2, 1);
      z-index: 9999;
      padding: 100px 20px 40px;
      margin: 0;
      list-style: none;
      overflow-y: auto;
   }

   .nav-links-mobile a {
      font-size: 2rem;
      font-weight: 800;
      color: var(--ink);
      padding: 15px;
      width: 100%;
      text-align: center;
      display: block;
   }

   .nav-links-mobile.nav-open {
      transform: translateX(0);
   }

   .nav-toggle {
      display: flex;
   }

   .nav-inner {
      height: 60px;
   }

   .nav-open .nav-right .btn-wa {
      opacity: 0;
      pointer-events: none;
   }

   .nav-right .btn-ghost {
      display: none;
   }
}

@media(max-width: 500px) {
   .nav-logo img {
      height: 42px;
   }
   
   .nav-right .btn-wa {
      padding: 7px 14px !important;
      font-size: .75rem !important;
   }
}

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
.hero {
   padding: 130px 0 80px;
   position: relative;
   overflow: hidden;
   background: #F8F8FD
}

.hero::before {
   content: '';
   position: absolute;
   top: -200px;
   right: -150px;
   width: 600px;
   height: 600px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(62, 64, 149, .08) 0%, transparent 70%);
   pointer-events: none
}

.hero::after {
   content: '';
   position: absolute;
   bottom: -100px;
   left: -120px;
   width: 450px;
   height: 450px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(62, 64, 149, .05) 0%, transparent 70%);
   pointer-events: none
}

.hero-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: center;
   position: relative;
   z-index: 2
}

.hero-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: var(--blue-pale);
   border: 1px solid var(--blue-mid);
   color: var(--blue);
   font-size: .78rem;
   font-weight: 600;
   letter-spacing: .4px;
   padding: 6px 14px;
   border-radius: var(--r-pill);
   margin-bottom: 20px
}

.hero-eyebrow::before {
   content: '';
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--blue);
   animation: pulse-dot 1.8s infinite
}

@keyframes pulse-dot {

   0%,
   100% {
      opacity: 1
   }

   50% {
      opacity: .35
   }
}

.hero h1 {
   font-family: var(--f-display);
   font-size: clamp(2.2rem, 4.2vw, 3.4rem);
   font-weight: 400;
   line-height: 1.08;
   color: var(--ink);
   margin-bottom: 18px;
   letter-spacing: -.02em
}

.hero h1 em {
   font-style: italic;
   color: var(--blue)
}

.hero-sub {
   font-size: 1.05rem;
   color: var(--muted);
   line-height: 1.72;
   margin-bottom: 32px;
   max-width: 460px;
   font-weight: 400
}

.hero-btns {
   display: flex;
   gap: 12px;
   flex-wrap: wrap;
   margin-bottom: 40px
}

.hero-proof {
   display: flex;
   gap: 28px;
   flex-wrap: wrap
}

.proof-item {
   display: flex;
   align-items: center;
   gap: 7px;
   font-size: .82rem;
   font-weight: 500;
   color: var(--muted)
}

.proof-dot {
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: var(--blue);
   flex-shrink: 0
}

/* hero card */
.hero-card {
   background: var(--white);
   border-radius: var(--r-xl);
   box-shadow: var(--sh-lg);
   border: 1px solid var(--border);
   padding: 32px;
   position: relative
}

.card-lbl {
   font-size: .7rem;
   font-weight: 700;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--blue);
   display: block;
   margin-bottom: 18px
}

.stamp-slider {
   position: relative;
   overflow: hidden;
   border-radius: var(--r-md);
   margin-bottom: 24px;
   cursor: ew-resize;
   user-select: none;
   background: #fff;
   min-height: 200px; /* Garante que o slider apareça mesmo se o conteúdo demorar a carregar */
   box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Camada da imagem real */
.slider-overlay {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   z-index: 5;
   pointer-events: none;
   overflow: hidden;
   width: 50%;
   /* JS vai mudar isso */
}

.stamp-real-inner {
   width: 440px;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   border: none;
   border-radius: var(--r-md);
   background: transparent;
}

/* Garante que o inner tenha sempre a largura total do slider pai */
.stamp-slider .stamp-real-inner {
   width: var(--slider-width, 340px);
}

.stamp-real-inner img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   pointer-events: none;
}

/* Camada base (Vetor) */
.stamp-box {
   border-radius: var(--r-md);
   padding: 28px 20px;
   text-align: center;
   position: relative;
   background: #fff;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   min-height: 200px;
}

.stamp-box::before {
   content: '';
   position: absolute;
   inset: 7px;
   border-radius: 8px;
   pointer-events: none
}

/* Handle do Slider */
.slider-handle {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 50%;
   /* JS vai mudar isso */
   width: 2px;
   background: var(--blue);
   z-index: 10;
   pointer-events: none;
}

.handle-circle {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 38px;
   height: 38px;
   background: var(--blue);
   color: #fff;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2)
}

.stamp-name {
   font-family: var(--f-display);
   font-size: 1.15rem;
   color: var(--blue);
   letter-spacing: 2px;
   display: block
}

.stamp-occ {
   font-size: .78rem;
   font-weight: 600;
   color: var(--blue);
   letter-spacing: 1px;
   display: block;
   margin-top: 6px;
   text-transform: uppercase
}

.stamp-doc {
   font-size: .68rem;
   font-weight: 600;
   color: var(--blue);
   letter-spacing: 1.5px;
   display: block;
   margin-top: 5px
}

.stamp-city {
   font-size: .72rem;
   font-weight: 600;
   color: var(--blue);
   letter-spacing: 1px;
   display: block;
   margin-top: 6px
}

.card-footer {
   display: flex;
   justify-content: space-between;
   align-items: center
}

.tag-blue {
   background: var(--blue-pale);
   color: var(--blue);
   padding: 5px 12px;
   border-radius: var(--r-pill);
   font-size: .73rem;
   font-weight: 700
}

.tag-green {
   display: flex;
   align-items: center;
   gap: 6px;
   font-size: .78rem;
   font-weight: 600;
   color: #16A34A
}

.tag-green::before {
   content: '';
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: #16A34A;
   animation: pulse-dot 1.6s infinite
}

.float-chip {
   position: absolute;
   background: #fff;
   border-radius: var(--r-md);
   padding: 9px 13px;
   box-shadow: 0 8px 28px rgba(0, 0, 0, .11);
   border: 1px solid var(--border);
   display: flex;
   align-items: center;
   gap: 8px
}

.wa-message-container {
   width: 100%;
   height: 100%;
   display: flex;
   flex-direction: column;
   position: relative;
   background-color: #efeae2; /* Fundo clássico do WhatsApp */
   overflow: hidden;
}

/* Padrão de fundo do WhatsApp em CSS puro (bolinhas/doodles sutis) */
.wa-message-container::before {
   content: "";
   position: absolute;
   inset: 0;
   background-image: 
     radial-gradient(#000 0.5px, transparent 0.5px),
     radial-gradient(#000 0.5px, transparent 0.5px);
   background-size: 20px 20px;
   background-position: 0 0, 10px 10px;
   opacity: 0.03;
   pointer-events: none;
}

.wa-chat-body {
   flex: 1;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 20px;
   z-index: 2;
   position: relative;
}

.wa-message {
   max-width: 85%;
   padding: 6px 7px 8px 9px;
   border-radius: 7.5px;
   font-size: 13.5px;
   line-height: 19px;
   position: relative;
   box-shadow: 0 1px 0.5px rgba(0,0,0,0.13);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wa-message.received {
   background: #fff;
   align-self: flex-start;
   border-top-left-radius: 0;
   margin-left: 10px;
   color: #111b21;
}

/* Rabicho realista do WhatsApp - Pure CSS */
.wa-message.received::before {
   content: "";
   position: absolute;
   top: 0;
   left: -8px;
   width: 12px;
   height: 12px;
   background-color: #fff;
   clip-path: polygon(100% 0, 0 0, 100% 100%);
}

.wa-message p {
   margin: 0;
   padding-right: 40px; /* Espaço para o horário */
}

.wa-time {
   position: absolute;
   bottom: 3px;
   right: 7px;
   font-size: 11px;
   color: #667781;
   display: flex;
   align-items: center;
   line-height: normal;
}


.chip1 {
   top: -14px;
   right: -18px
}

.chip2 {
   bottom: -14px;
   left: -18px
}

.chip-ico {
   width: 30px;
   height: 30px;
   background: var(--blue-pale);
   border-radius: var(--r-sm);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: .85rem;
   flex-shrink: 0
}

.chip-txt strong {
   font-size: .77rem;
   font-weight: 700;
   display: block;
   color: var(--ink)
}

.chip-txt span {
   font-size: .68rem;
   color: var(--muted)
}

@media(max-width:900px) {
   .hero {
      padding: 88px 0 60px
   }

   .hero-grid {
      grid-template-columns: 1fr
   }

   .hero-card {
      display: none
   }
}

/* ══════════════════════════════════════
   STATS
══════════════════════════════════════ */
.statsbar {
   background: var(--blue)
}

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

.stat {
   text-align: center;
   padding: 22px 16px;
   border-right: 1px solid rgba(255, 255, 255, .12)
}

.stat:last-child {
   border-right: none
}

.stat-n {
   font-family: var(--f-display);
   font-size: 2.2rem;
   font-style: italic;
   color: #fff;
   display: block;
   line-height: 1
}

.stat-l {
   font-size: .73rem;
   font-weight: 500;
   color: rgba(255, 255, 255, .6);
   display: block;
   margin-top: 4px;
   letter-spacing: .3px
}

@media(max-width:600px) {
   .stats-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .stat:nth-child(2) {
      border-right: none
   }

   .stat:nth-child(3) {
      border-right: 1px solid rgba(255, 255, 255, .12)
   }
}

/* ══════════════════════════════════════
   SECTION BASE
══════════════════════════════════════ */
.sec {
   padding: 88px 0
}

.sec-sm {
   padding: 64px 0
}

.sec-dark {
   background: var(--ink-2)
}

.sec-surf {
   background: var(--surf)
}

.eyebrow {
   font-size: .72rem;
   font-weight: 700;
   letter-spacing: 2.5px;
   text-transform: uppercase;
   color: var(--blue);
   display: block;
   margin-bottom: 10px
}

.eyebrow.light {
   color: var(--blue-mid)
}

.sec-h {
   font-family: var(--f-display);
   font-size: clamp(1.9rem, 3.5vw, 2.8rem);
   font-weight: 400;
   line-height: 1.12;
   color: var(--ink);
   letter-spacing: -.02em
}

.sec-h.light {
   color: #fff
}

.sec-h em {
   font-style: italic;
   color: var(--blue)
}

.sec-h.light em {
   color: var(--blue-mid)
}

.sec-p {
   font-size: .97rem;
   color: var(--muted);
   line-height: 1.72;
   max-width: 520px;
   margin-top: 10px;
   font-weight: 400
}

.sec-p.light {
   color: rgba(255, 255, 255, .55)
}

.hdr {
   margin-bottom: 52px
}

.hdr.center {
   text-align: center
}

.hdr.center .sec-p {
   margin: 10px auto 0
}

/* ══════════════════════════════════════
   NICHOS
══════════════════════════════════════ */
.nichos-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
   gap: 12px;
   max-width: 900px;
   margin: 0 auto
}

.nicho {
   background: var(--white);
   border: 1.5px solid var(--border);
   border-radius: var(--r-lg);
   padding: 22px 16px;
   text-align: center;
   cursor: pointer;
   transition: border-color .2s, transform .2s, box-shadow .2s;
   position: relative;
   overflow: hidden
}

.nicho::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: var(--blue);
   transform: scaleX(0);
   transition: transform .3s;
   transform-origin: left
}

.nicho:hover {
   border-color: var(--blue-mid);
   transform: translateY(-4px);
   box-shadow: var(--sh-md)
}

.nicho:hover::after {
   transform: scaleX(1)
}

.nicho-ico {
   font-size: 1.8rem;
   display: block;
   margin-bottom: 10px
}

.nicho-name {
   font-size: .82rem;
   font-weight: 600;
   color: var(--ink);
   display: block;
   line-height: 1.3
}

.nicho-key {
   font-size: .7rem;
   color: var(--muted);
   display: block;
   margin-top: 4px
}

/* ══════════════════════════════════════
   BENEFÍCIOS
══════════════════════════════════════ */
.ben-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 22px
}

.ben-card {
   background: var(--white);
   border: 1px solid var(--border);
   border-radius: var(--r-lg);
   padding: 30px 26px;
   position: relative;
   overflow: hidden;
   transition: box-shadow .22s, transform .22s
}

.ben-card::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background: var(--blue);
   transform: scaleX(0);
   transition: transform .3s;
   transform-origin: left
}

.ben-card:hover {
   box-shadow: var(--sh-md);
   transform: translateY(-4px)
}

.ben-card:hover::before {
   transform: scaleX(1)
}

.ben-ico {
   width: 50px;
   height: 50px;
   background: var(--blue-pale);
   border-radius: var(--r-md);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.35rem;
   margin-bottom: 18px
}

.ben-h {
   font-size: 1rem;
   font-weight: 700;
   color: var(--ink);
   margin-bottom: 8px
}

.ben-p {
   font-size: .87rem;
   color: var(--muted);
   line-height: 1.65
}

/* ══════════════════════════════════════
   PRODUTOS
══════════════════════════════════════ */
.prod-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
   gap: 20px
}

.prod-card {
   background: var(--white);
   border: 1px solid var(--border);
   border-radius: var(--r-lg);
   overflow: hidden;
   transition: box-shadow .25s, transform .25s;
   display: flex;
   flex-direction: column
}

.prod-card:hover {
   box-shadow: var(--sh-lg);
   transform: translateY(-5px)
}

.prod-thumb {
   width: 100%;
   aspect-ratio: 16/9;
   display: block;
   background: var(--blue-pale);
   overflow: hidden;
   position: relative
}

.prod-thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .35s
}

.prod-card:hover .prod-thumb img {
   transform: scale(1.04)
}

.prod-body {
   padding: 20px;
   display: flex;
   flex-direction: column;
   flex: 1
}

.prod-name {
   font-size: .95rem;
   font-weight: 700;
   color: var(--ink);
   margin-bottom: 6px;
   line-height: 1.3
}

.prod-desc {
   font-size: .82rem;
   color: var(--muted);
   line-height: 1.6;
   margin-bottom: 16px;
   flex: 1
}

.btn-prod {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   background: var(--blue);
   color: #fff;
   padding: 10px 16px;
   border-radius: var(--r-pill);
   font-size: .82rem;
   font-weight: 700;
   border: none;
   cursor: pointer;
   width: 100%;
   transition: background .18s, transform .15s;
   text-decoration: none;
   letter-spacing: .01em
}

.btn-prod:hover {
   background: var(--blue-l);
   transform: scale(1.02)
}

.btn-prod svg {
   flex-shrink: 0
}

/* ══════════════════════════════════════
   COMO FUNCIONA
══════════════════════════════════════ */
.steps {
   display: grid;
   grid-template-columns: 1fr 48px 1fr 48px 1fr;
   align-items: start;
   max-width: 780px;
   margin: 0 auto
}

.step {
   text-align: center;
   padding: 0 12px
}

.step-arr {
   display: flex;
   align-items: flex-start;
   justify-content: center;
   padding-top: 24px;
   color: rgba(255, 255, 255, .2)
}

.step-n {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background: var(--blue);
   color: #fff;
   font-family: var(--f-display);
   font-size: 1.4rem;
   font-style: italic;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 16px;
   box-shadow: 0 8px 24px rgba(62, 64, 149, .35)
}

.step-h {
   font-size: .95rem;
   font-weight: 700;
   color: #fff;
   margin-bottom: 7px
}

.step-p {
   font-size: .83rem;
   color: rgba(255, 255, 255, .5);
   line-height: 1.62
}

@media(max-width:640px) {
   .steps {
      grid-template-columns: 1fr;
      max-width: 300px;
      gap: 28px
   }

   .step-arr {
      display: none
   }
}

/* ══════════════════════════════════════
   DEPOIMENTOS
══════════════════════════════════════ */
.dep-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 18px
}

.dep-card {
   background: var(--white);
   border: 1px solid var(--border);
   border-radius: var(--r-lg);
   padding: 26px;
   transition: box-shadow .22s
}

.dep-card:hover {
   box-shadow: var(--sh-md)
}

.dep-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 14px
}

.dep-aut {
   display: flex;
   align-items: center;
   gap: 10px
}

.dep-av {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: var(--blue);
   color: #fff;
   font-weight: 700;
   font-size: .82rem;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0
}

.dep-nm {
   font-size: .88rem;
   font-weight: 700;
   color: var(--ink);
   display: block
}

.dep-role {
   font-size: .74rem;
   color: var(--muted);
   display: block
}

.dep-src {
   display: flex;
   align-items: center;
   gap: 4px;
   font-size: .68rem;
   color: var(--muted);
   font-weight: 600
}

.gg {
   width: 15px;
   height: 15px;
   background: #4285F4;
   border-radius: 50%;
   color: #fff;
   font-size: .55rem;
   font-weight: 800;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0
}

.dep-stars {
   color: #F59E0B;
   font-size: .95rem;
   letter-spacing: 1px;
   margin-bottom: 10px
}

.dep-txt {
   font-size: .88rem;
   color: var(--muted);
   line-height: 1.65
}

.dep-v {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   font-size: .7rem;
   font-weight: 600;
   color: #16A34A;
   margin-top: 12px
}

/* ══════════════════════════════════════
   CTA BANNER
══════════════════════════════════════ */
.cta-box {
   background: var(--blue);
   border-radius: var(--r-xl);
   padding: 64px 52px;
   text-align: center;
   position: relative;
   overflow: hidden
}

.cta-box::before,
.cta-box::after {
   content: '';
   position: absolute;
   border-radius: 50%;
   pointer-events: none
}

.cta-box::before {
   width: 320px;
   height: 320px;
   top: -80px;
   right: -80px;
   background: rgba(255, 255, 255, .06)
}

.cta-box::after {
   width: 240px;
   height: 240px;
   bottom: -60px;
   left: -50px;
   background: rgba(255, 255, 255, .04)
}

.cta-box h2 {
   font-family: var(--f-display);
   font-size: clamp(1.9rem, 4vw, 2.8rem);
   font-weight: 400;
   font-style: italic;
   color: #fff;
   margin-bottom: 12px;
   position: relative;
   z-index: 2;
   letter-spacing: -.02em
}

.cta-box p {
   color: rgba(255, 255, 255, .72);
   font-size: 1.02rem;
   max-width: 440px;
   margin: 0 auto 30px;
   line-height: 1.68;
   position: relative;
   z-index: 2
}

.cta-btns {
   display: flex;
   justify-content: center;
   gap: 12px;
   flex-wrap: wrap;
   position: relative;
   z-index: 2
}

@media(max-width:580px) {
   .cta-box {
      padding: 40px 22px
   }
}

/* ══════════════════════════════════════
   CONTATO
══════════════════════════════════════ */
.contact-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: start
}

.ci-list {
   margin-top: 30px;
   display: flex;
   flex-direction: column;
   gap: 18px
}

.ci-row {
   display: flex;
   gap: 13px;
   align-items: flex-start
}

.ci-ico {
   width: 42px;
   height: 42px;
   background: var(--blue-pale);
   border-radius: var(--r-md);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.05rem;
   flex-shrink: 0
}

.ci-body {
   font-size: .88rem;
   line-height: 1.62
}

.ci-lbl {
   font-weight: 700;
   color: var(--ink);
   display: block;
   margin-bottom: 2px
}

.ci-val {
   color: var(--muted)
}

.ci-val a {
   color: var(--blue)
}

.ci-val a:hover {
   text-decoration: underline
}

.form-wrap {
   background: var(--white);
   border: 1px solid var(--border);
   border-radius: var(--r-xl);
   padding: 36px;
   box-shadow: var(--sh-sm)
}

.form-ttl {
   font-family: var(--f-display);
   font-size: 1.25rem;
   font-weight: 400;
   margin-bottom: 22px;
   padding-bottom: 18px;
   border-bottom: 1px solid var(--border);
   color: var(--ink)
}

.f2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 12px
}

.fg {
   margin-bottom: 12px
}

.fg label {
   display: block;
   font-size: .73rem;
   font-weight: 700;
   letter-spacing: .5px;
   text-transform: uppercase;
   color: var(--muted);
   margin-bottom: 5px
}

.fg input,
.fg select,
.fg textarea {
   width: 100%;
   font-family: var(--f-body);
   font-size: .9rem;
   color: var(--ink);
   background: var(--surf);
   border: 1.5px solid var(--border);
   border-radius: var(--r-md);
   padding: 11px 14px;
   outline: none;
   transition: border-color .18s, box-shadow .18s;
   appearance: none;
   -webkit-appearance: none
}

.fg input:focus,
.fg select:focus,
.fg textarea:focus {
   border-color: var(--blue);
   box-shadow: 0 0 0 3px rgba(62, 64, 149, .10)
}

.fg textarea {
   resize: vertical;
   min-height: 96px
}

.fg select option {
   background: var(--white)
}

@media(max-width:900px) {
   .contact-grid {
      grid-template-columns: 1fr;
      gap: 44px
   }

   .f2 {
      grid-template-columns: 1fr
   }
}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
footer {
   background: var(--ink-2);
   padding: 52px 0 28px
}

.ft-top {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 40px;
   margin-bottom: 40px;
   flex-wrap: wrap
}

footer .ft-brand img, 
.ft-brand img {
   height: 56px !important;
   width: auto !important;
   margin-bottom: 12px;
   filter: none !important;
   -webkit-filter: none !important;
   opacity: 1 !important;
}

.ft-brand p {
   color: rgba(255, 255, 255, .4);
   font-size: .82rem;
   max-width: 220px;
   line-height: 1.6
}

.ft-col h4 {
   font-size: .72rem;
   font-weight: 700;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   color: rgba(255, 255, 255, .35);
   margin-bottom: 14px
}

.ft-col ul {
   list-style: none;
   display: flex;
   flex-direction: column;
   gap: 10px
}

.ft-col a {
   color: rgba(255, 255, 255, .6);
   font-size: .85rem;
   transition: color .15s
}

.ft-col a:hover {
   color: #fff
}

.ft-col p {
   color: rgba(255, 255, 255, .5);
   font-size: .83rem;
   line-height: 1.65
}

.ft-wa {
   display: inline-flex;
   align-items: center;
   gap: 7px;
   background: var(--green);
   color: #fff;
   padding: 9px 18px;
   border-radius: var(--r-pill);
   font-size: .82rem;
   font-weight: 700;
   margin-top: 12px;
   text-decoration: none;
   transition: filter .18s
}

.ft-wa:hover {
   filter: brightness(1.1)
}

.ft-bot {
   border-top: 1px solid rgba(255, 255, 255, .07);
   padding-top: 22px;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   gap: 12px
}

.ft-bot p,
.ft-bot a {
   color: rgba(255, 255, 255, .28);
   font-size: .75rem
}

.ft-bot a:hover {
   color: rgba(255, 255, 255, .6)
}

.ft-links {
   display: flex;
   gap: 16px
}

/* ══════════════════════════════════════
   WA FLOAT
══════════════════════════════════════ */
.wa-float {
   position: fixed;
   bottom: 26px;
   right: 26px;
   z-index: 800;
   width: 62px;
   height: 62px;
   background: var(--green);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 6px 24px rgba(37, 211, 102, .42);
   text-decoration: none;
   animation: wapulse 2.6s infinite;
   transition: transform .2s
}

.wa-float:hover {
   transform: scale(1.1)
}

.wa-float svg {
   width: 30px;
   height: 30px;
   fill: #fff
}

@keyframes wapulse {

   0%,
   100% {
      box-shadow: 0 6px 24px rgba(37, 211, 102, .42), 0 0 0 0 rgba(37, 211, 102, .3)
   }

   60% {
      box-shadow: 0 6px 24px rgba(37, 211, 102, .42), 0 0 0 16px rgba(37, 211, 102, 0)
   }
}

/* ══════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════ */
@keyframes fadeUp {
   from {
      opacity: 0;
      transform: translateY(20px)
   }

   to {
      opacity: 1;
      transform: none
   }
}

.hero-eyebrow,
.hero h1,
.hero-sub,
.hero-btns,
.hero-proof {
   opacity: 0;
   animation: fadeUp .6s forwards
}

.hero-eyebrow {
   animation-delay: .05s
}

.hero h1 {
   animation-delay: .18s
}

.hero-sub {
   animation-delay: .30s
}

.hero-btns {
   animation-delay: .42s
}

.hero-proof {
   animation-delay: .52s
}

.hero-card {
   opacity: 0;
   animation: fadeUp .7s .28s forwards
}

.reveal {
   opacity: 0;
   transform: translateY(22px);
   transition: opacity .6s, transform .6s
}

.reveal.on {
   opacity: 1;
   transform: none
}