/* ===== IMPORTS & RESET ===== */
@import url("https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Montserrat:wght@300;400;600;700&display=swap");
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:where(h1) {
  font-size: 32px;
  margin-block: 0.67em;
  line-height: 1.2
}
/* ===== TOKENS ===== */
:root{
  --bg:#000;
  --surface:#1b1b1d;
  --text:#f5f5f7;
  --subtext:#c4c4c6;
  --primary:#9c56f3;
  --border:#2a2a2d;
  --radius:12px;
  --transition:.28s cubic-bezier(.4,0,.2,1);
}
.btn-outline{
  background-color: #0003;
  font-size: 20px;
  font-weight: 600;
  color: var(--primary);
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid var(--primary);
  cursor: pointer;
  transition: .5s;
}
.btn-outline:hover{
  background:var(--primary);
  color: var(--text);
}
/* ===== BASE TYPO/LAYOUT ===== */
html{scroll-behavior:smooth}
body{
  font-family:"Montserrat",sans-serif;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;line-height:1.6;
}
h1 { font-size: 2.5rem; }           /* ou px, como preferir */

h1,h2,h3{font-family:"Major Mono Display",monospace;font-weight:600}
h1{font-size:clamp(2rem,4vw,3.5rem)}
h2{font-size:clamp(40px,3vw,75px);text-align:center;margin:.6em 0}
p,li{font-size:18px;color:var(--subtext)}
a{color:var(--primary);text-decoration:none}
main{width:100%;padding:0 5%}
.container{width:100%;}

/* ===== HEADER ===== */
.dropdown-menu,
.dropdown>.link-nav-bar,
.link-nav-bar>p,
.redirect-Login,
header,
nav {
    display: flex;
    display: flex
}
.dropdown-menu a,
.link-nav-bar,
.link-nav-bar>p,
.redirect-Login:hover>a>p,header {
    position: relative
}

.dropdown-menu a,
.link-nav-bar>p,
.redirect-Login {
    font-family: "Major Mono Display", monospace;
    color: #fff
}

header,
nav {
    align-items: center
}

.link-nav-bar::before,
.redirect-Login>a::before {
    position: absolute;
    transition: .5s;
    width: 0;
    content: ''
}

.dropdown-menu,
nav {
    backdrop-filter: blur(12px)
}

.btn-redirect>a,
.dropdown-menu a,
.link-nav-bar,
.redirect-Login,
.redirect-Login>a {
    text-decoration: none
}

body {
    width: 100%;
    overflow-x: hidden
}

header {
    justify-content: space-between;
    padding: 20px 5% !important;
    z-index: 9999999;
    background-color: #000
}

.logo-type img {
    width: clamp(235px, 10vw, 400px);
    pointer-events: none;
    mix-blend-mode: plus-lighter
}

nav {
    background: #ffffff05;
    gap: clamp(15px, 3vw, 100px);
    padding: 10px 30px;
    border: 1px solid #55555544;
    border-radius: 50px
}

.link-nav-bar>p,
.redirect-Login {
    align-items: center
}

.link-nav-bar>p {
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 1px;
    justify-content: center
}

nav>div>button {
    background-color: transparent;
    border: none
}

.link-nav-bar::before {
    left: 0;
    top: 99%;
    height: 2px;
    background: #fff;
    margin-top: 2px
}

.dropdown-menu a:hover::before,
.link-nav-bar:hover::before,
.process-line>img,
.tecnologis-list,
.tecnologis-list-infos {
    width: 100%
}

.redirect-Login {
    margin: 10px 15px
}

.dropdown,
.redirect-Login>a {
    align-items: center;
    display: flex;
    position: relative
}

.redirect-Login>a {
    justify-content: center;
    padding: 15px;
    font-size: 28px;
    color: #fff
}

.redirect-Login>a::before {
    background-color: #fff;
    top: 0;
    height: 100%;
    border-radius: 5px
}

.redirect-Login:hover>a::before {
    width: 100%;
    color: #000 !important;
    z-index: 9
}

.redirect-Login:hover>a>p {
    color: #000;
    text-align: center;
    z-index: 99 !important
}

.dropdown>.link-nav-bar {
    align-items: center;
    justify-content: center
}

.dropdown-menu {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    top: 100%;
    min-width: 320px;
    flex-direction: column;
    gap: 20px;
    padding: 14px 18px;
    background: #000;
    border: 1px solid #55555544;
    border-radius: 12px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s, transform .35s;
    z-index: 9999
}

.dropdown-menu a {
    font-size: 20px
}

.dropdown-menu a::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    transition: .4s
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0)
}

@media (prefers-reduced-motion:no-preference) {
    .dropdown-menu {
        transform: translate(-50%, -10px)
    }

    .dropdown:hover .dropdown-menu {
        transform: translate(-50%, 0)
    }
}

.img-mobile-process,
.navbar-hamburguer,
.navbar-mobile-version {
    display: none
}


@media (max-width:1425px) {
    header {
        padding: 20px 3% !important;
    }

    .link-nav-bar>p,
    .redirect-Login>a {
        font-size: 18px
    }
  }

@media (max-width:1230px) {

    .img-desktop-process,
    nav {
        display: none
    }

    .navbar-hamburguer {
        display: flex;
        flex-direction: column;
        gap: 5px;
        width: 25px;
        gap: 10px;
        padding-right: 7%
    }

    .navbar-hamburguer>div {
        height: 3px;
        background-color: #fff;
        width: 50px;
        border-radius: 10px;
        cursor: pointer
    }

    .nav-bar-activate {
        position: relative;
        z-index: 9999999999999 !important
    }

    .nav-bar-activate>div:nth-child(2) {
        opacity: 0
    }

    .nav-bar-activate>div:first-child {
        position: absolute;
        transform: rotate(-45deg) !important;
        transition: .5s
    }

    .nav-bar-activate>div:nth-child(3) {
        transform: rotate(45deg) !important;
        transition: .5s;
        position: absolute
    }

    .navbar-mobile-version {
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 15px;
        position: absolute;
        background-color: #000d;
        width: 100%;
        top: 0;
        height: 100vh;
        background: #000000fa;
        transform: translateX(-100%);
        backdrop-filter: blur(12px);
        opacity: 0;
        pointer-events: none;
        transition: transform .45s, opacity .45s;
        z-index: 9999
    }

    .navbar-mobile-version.open {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto
    }

    .navbar-mobile-version a {
        font-family: "Major Mono Display", monospace;
        font-size: clamp(24px, 6vw, 40px);
        color: #fff;
        text-decoration: none;
        position: relative
    }

    .navbar-mobile-version a::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: -6px;
        width: 0;
        height: 2px;
        background: #fff;
        transition: .4s
    }

    .navbar-mobile-version a:hover::before {
        width: 100%
    }

    .redirect-Login {
        margin-left: auto
    }}

@media (max-width:768px) {
    header {
        padding: 20px 5% !important
    }
    .input-wrap input,.input-wrap button{
        font-size: 20px !important;
    }
    .navbar-mobile-version a {
        font-size: 22px
    }

    .btn-contact {
        width: 100%;
        text-align: center
    }

    .btn-redirect>a,
    .container-services>div>div>h3 {
        font-size: 22px !important;
        text-align: center !important
    }

    .logo-type img {
        max-width: 170px !important
    }

    .redirect-Login {
        display: none !important
    }

    .navbar-hamburguer {
        width: 55px !important
    }
}

@media (max-width:568px) {
    header {
        padding: 20px 5% !important
    }

    .navbar-mobile-version a {
        font-size: 20px
    }
}
/* ===== HEADER ===== */

/* ===== HERO ===== */
.hero{padding:14rem 1rem 12rem;text-align:center;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,#6b3fa057,transparent 70%);background-size:cover;background-repeat:no-repeat;}
.hero h1{font-size:96px;font-weight:900;letter-spacing:-4px;line-height:1.1;}
.hero h1 span{display:block;font-size:32px;color:#b4b4c2;}
.hero p{max-width:600px;margin:.9rem auto 2.5rem;}
h1.seo-title{font-size:96px;font-weight:900;letter-spacing:-4px;line-height:1.1;text-align:center;}
.seo-title .letters{display:flex;justify-content:center;}
.seo-title .letter{font-size:120px;display:inline-block;min-width:.8em;transition:transform .25s cubic-bezier(.68,-.55,.27,1.55);}
.seo-title .letter.done{transform:scale(1.3);}
.seo-title .subtitle{display:block;margin-top:10px;font-size:32px;font-weight:300;color:var(--text);}
.float-img{position:absolute;width:90px; z-index: 9999 ;pointer-events:none;animation:float 6s ease-in-out infinite alternate;opacity:.9;}
.img1{top:25%; left:4%; width: 75px;}
.img2{top:28%; right:6%; animation-duration:8s; width: 75px;}
.img3{bottom:15%; left:70%; transform:translateX(-50%); width: 75px;}
.img4{top:5%; left:40%; transform:translateX(-50%);}
.img5{bottom:20%; left:15%; transform:translateX(-50%); width: 130px;}
/* ===== HERO ===== */
[data-reveal].reveal-visible{opacity:1 !important;transform:none !important;transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1);}

/* ===== WHAT-IS-SEO ===== */
.block{margin:5rem 0}
.what-is-seo{text-align:center}
.what-is-seo p{font-size:clamp(20px,3.5vw,28px)}

/* ===== STATS BAR ===== */
.stats-bar{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  border:1px solid var(--border);margin:2.5rem 0 1rem;
}
.stat{
  padding:2rem;border-right:1px solid var(--border);
  display:flex;flex-direction:column;gap:.5rem;text-align:center
}
.stat:last-child{border-right:none}
.stat .number{font-size:3rem;font-weight:800}
.stat.highlight{background:var(--primary);color:#000}

/* ===== IMPACTOS ===== */
.impactos{margin-top:120px}
.container-impactos{
  display:flex;justify-content:space-between;position:relative;gap: 10px;
}
.info-paymant{
  color: #aaa;
}
.container-impactos::before{
  content:'';position:absolute;top:50%;left:0;width:100%;height:2px;
  background:var(--primary);
}
.impactos-item{
  background:#181818;border:1px solid var(--primary);border-radius:5px;
  padding:20px;width:350px;z-index:1;text-align:center;
}
.impactos-item h3{
  font-size:20px;font-family:"Montserrat",sans-serif;
  text-transform:uppercase;color:var(--primary);font-weight:bold
}
.impactos-item img{height:50px}

/* ===== PLANS / PRICING ===== */
.plans-grid{
  display:flex;flex-wrap:wrap;justify-content:center;gap:2.5rem;
}
.plan{
  width:100%;max-width:350px;
  background:linear-gradient(#222 0%,#222 60%,#121212 100%);
  border:2px solid var(--primary);border-radius:var(--radius);
  padding:15px;display:flex;flex-direction:column;align-items:center;
  transition:transform .35s;
}
.plan:hover{transform:translateY(-8px)}
.plan.featured{transform:scale(1.03)}
.plan .badge{
  background:var(--primary);color:#fff;
  text-transform:uppercase;font-size:16px;font-weight:700;
  border-radius:5px;padding:.25rem .75rem;margin-bottom:1.25rem
}
.plan .price{font-size:38px;font-weight:800;color:var(--primary);margin-bottom:.25rem}
.plan .desc{font-size:1rem;margin-bottom:1.25rem}
.plan ul{list-style:none;width:90%;text-align:left;margin:1.5rem 0 2rem}
.plan ul li{position:relative;padding-left:1.75rem;margin-bottom:.9rem}
.plan ul li::before{
  content:"✔";position:absolute;left:0;color:var(--primary);font-size:.9rem
}
.plan a{
  width:100%;padding:.8rem 2rem;border:none;border-radius:5px;
  background:linear-gradient(90deg,var(--primary) 0%,#6b3fa0 100%);
  font-size: 20px;
  color:#fff;font-weight:700;text-transform:uppercase;cursor:pointer;
  transition:opacity .3s;margin-top:auto;
  text-align: center;
}
.plan a:hover{opacity:.85}

/* ===== MOBILE MENU (ativado via JS) ===== */
.mobile-menu-icon{display:none}
.mobile-nav{display:none}
.mobile-nav.show{display:flex}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-thumb{background:var(--surface);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--primary)}

.formulario-container{
  background-image: linear-gradient(90deg,#aa380f,#ff5414);
  height: 600px;
  width: 100%;
  height: 600px;
    width: 111.5%;
    margin-left: -6%;
    border-radius: 300px 00px 0px 0px;
}
/* ===== MOBILE BREAKPOINT ===== */
@media(max-width:768px){
  .img3,.img4{
    width: 50px;
  }
  .img2{
    width: 75px !important;
    height: 75px !important;
    top:10%
  }
  .img1{
    top:18%;
    width: 75px !important;
    height: 75px !important;
  }

  .img4{
    top:5%
  }
  .img5{
    width: 50px;
    left: 10%;
    bottom:14% !important;
  }
  nav,.redirect-Login{display:none}
  .mobile-menu-icon{
    display:flex;flex-direction:column;gap:5px;cursor:pointer
  }
  .plan{
    max-width: 100%;
  }
  .container-impactos{
    align-items: center;gap: 10px;
  }
  .mobile-menu-icon span{
    width:25px;height:3px;background:#fff;border-radius:2px;transition:.3s;
  }
  .hero{padding:13rem 1rem 14rem}
  .container-impactos,.stats-bar{flex-direction:column !important;display:flex !important;}
  .container-impactos::before{width:2px;height:100%;left:50%;top:0;}
  /*header*/
  header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  nav {
    display: none;
  }

  .redirect-Login {
    display: none;
  }
  .contact-section{
    flex-direction: column;
  }
  .contact-heading{
    font-size: 24px !important;
    text-align: center !important;
  }
  .contact-text{
    font-size: 20px !important;
    text-align: center !important;
  }
  .mobile-menu-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 25px;
    height: 20px;
    cursor: pointer;
  }

  .mobile-menu-icon span {
    height: 3px;
    background: #fff;
    border-radius: 2px;
    transition: 0.3s ease;
  }

  .mobile-nav {
    display: none;
    position: absolute;
    top: 70px;
    right: 20px;
    background-color: #ffffff08;
    backdrop-filter: blur(12px);
    border: 1px solid #55555544;
    border-radius: 10px;
    padding: 15px 20px;
    flex-direction: column;
    gap: 10px;
    z-index: 999;
    animation: fadeIn 0.3s ease-in-out;
  }

  .mobile-nav a {
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    color: white;
    font-family: "Major Mono Display", monospace;
  }

  .mobile-nav.show {
    display: flex;
  }
  .seo-title .subtitle{
    font-size: 20px;
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.contact-section {
    margin: 130px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    padding: 4rem 3rem;
    border-radius: 2rem;
    color: #fff;
    background: linear-gradient(135deg, var(--primary) 0, #301a4b 100%);
    position: relative;
    overflow: hidden
}

.contact-heading {
    font-size: clamp(38px, 6vw, 48px);
    margin: 0 0 .5rem;
    line-height: 1.2;
    color: #fff;
    text-align: start;
}

.contact-text {
    font-size: 28px;
    opacity: .9;
    color: #fff
}

.contact-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 80%, rgba(255, 255, 255, .12) 0 1px, transparent 1px), radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .08) 0 1px, transparent 1px);
    background-size: 18px 18px;
    mix-blend-mode: overlay;
    pointer-events: none
}

.contact-form {
    flex: 1;
    display: flex;
    justify-content: flex-end
}

.input-wrap {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 100%;
    max-width: 28rem;
    padding: .5rem;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .12)
}

.input-wrap input {
    flex: 1;
    border: none;
    padding: .9rem 1.25rem;
    border-radius: 999px;
    outline: 0;
    background-color: #000;
    color: #fff;
    font-size: 28px
}

.input-wrap button {
    border: none;
    padding: 20px;
    border-radius: 999px;
    font-size: 28px;
    background: #111;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: background .3s
}

.input-wrap button:hover {
    background: #fff;
    color: #000;
    box-shadow: 0 0 5px 0 #111
}
.site-footer {
    background: #fff;
    color: #fff;
    width: 100%;
    font-family: Montserrat, sans-serif !important;
    padding: 60px 5% 30px;
    border-top: 2px solid #fff
}

.footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px
}

.footer-col {
    flex: 1 1 240px
}

.footer-logo img {
    width: 300px;
    height: auto;
    border-radius: 8px;
    filter: grayscale(1) contrast(120%) invert(1);
    margin-bottom: 18px
}

.footer-title {
    font-size: 38px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 12px;
    color: #000;
    font-family: Montserrat, sans-serif;
}

.footer-text {
    line-height: 1.6;
    font-size: 26px;
    color: #000;
    max-width: 600px
}

.btn-contact,
.sitemap a {
    font-size: 28px;
    text-decoration: none;
    color: #000
}

.sitemap {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.sitemap a:hover {
    text-decoration: underline
}

.btn-contact {
    display: inline-block;
    margin: 10px 0 22px;
    padding: 12px 28px;
    background: #fff;
    font-weight: 600;
    border-radius: 6px;
    transition: .25s;
    filter: invert()
}

.btn-contact:hover {
    background: #000;
    color: #fff;
    outline: #fff solid 2px
}

.social-list {
    list-style: none;
    display: flex;
    gap: 16px;
    padding: 0;
    margin: 0
}

.social-list img {
    width: 58px;
    transition: transform .2s
}

.social-list a:hover img {
    transform: scale(1.1)
}

.footer-bottom {
    margin-top: 50px;
    border-top: 1px solid #333;
    padding-top: 25px;
    font-size: .875rem;
    text-align: center
}

.footer-bottom>p {
    font-size: 32px;
    color: #000
}
section h1, article h1, nav h1, aside h1 {
  font-size: 1.5rem;   /* ou clamp(), var(--step-3) etc. */
  line-height: 1.2;
}
:where(h1) {
  font-size: 32px;
  margin-block: 0.67em;
  line-height: 1.2
}