:root {
    --primary-blue: #15194B;
    --secondary-blue: #0994B4;
    font-size: 62.5%;
    scroll-behavior: smooth;
    /* 1rem = 10px */
}

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

.inria-sans-font{
    font-family: "Inria Sans", sans-serif;
    font-style: normal;
}

.inria-sans-regular {
  font-family: "Inria Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.inria-sans-bold {
  font-family: "Inria Sans", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.league-spartan-bold {
  font-family: "League Spartan", sans-serif;
  font-optical-sizing: auto;
  font-size: 0.3rem;
  font-weight: 800;
  font-style: normal;
}

/* Hero section - CORRIGIDO - Centralização instantânea */

.hero-section {
    position: relative;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 100vh;
    min-height: 100dvh; /* Melhor suporte mobile */
    padding: 0;
    background: url('../imgs/Prospeccao-Assertive/foto-ProspeccaoHero.png') center/cover no-repeat;
    color: #fff;
    font-family: "Inria Sans", Arial, sans-serif; /* Fallback para fonte */
}

.hero-content {
    text-align: center;
    width: 100%;
    max-width: 120rem;
    margin: 0;
    padding: 2rem;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    /* REMOVIDO position absolute que causava o problema */
    position: static;
    transform: none;
    /* Garante visibilidade imediata */
    opacity: 1;
    visibility: visible;
}

.hero-line {
    width: min(90%, 90rem);
    height: 0.4rem;
    background: rgba(255, 255, 255, 0.8);
    margin: 2.5rem auto;
    border: none;
    flex-shrink: 0;
}

.hero-content h1 {
    font-size: clamp(3.6rem, 6vw, 7.2rem);
    line-height: 1.2;
    margin-bottom: 1.5rem;
    word-wrap: break-word;
    hyphens: none;
}

.hero-content p {
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    line-height: 1.6;
    margin-bottom: 3rem;
    max-width: 90rem;
    word-wrap: break-word;
    hyphens: none;
}

.btn-primary {
    display: inline-block;
    padding: clamp(1.5rem, 2.5vw, 2.2rem) clamp(4rem, 8vw, 9rem);
    font-size: clamp(1.8rem, 2.5vw, 2.4rem);
    background-color: var(--primary-blue);
    color: #fff;
    text-decoration: none;
    border-radius: 1.2rem;
    transition: background-color 0.3s;
    margin-bottom: 2.5rem;
    width: auto;
    white-space: nowrap;
    min-width: fit-content;
}

.btn-primary:hover {
    background-color: #06215f;
    cursor: pointer;
}

/* end Hero */

/* Imagens e textos (grid) */

.grid-section{
    height: 70vh;
    max-width: 140rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.bigger-grid-section{
    height: 96vh;
    max-width: 140rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.white-bg{
    background-color: white;
    color: var(--primary-blue);
}

.blue-bgd{
    background-color: var(--primary-blue);
    color: white;
}

.grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 12rem;
    align-items: center;
}

.grid img{
    width: 100%;
    height: auto;
}

.grid div h1{
    text-align: right;
    font-size: 6rem;
    margin-bottom: 4rem;
}

.blue-bgd .grid div h1{
    text-align: left;
}

.grid div p{
    text-align: justify;
    font-size: 2.6rem;
    font-weight: 200;
}

.bigger-grid-section .grid{
    display: grid;
    grid-template-columns: 0.93fr 1fr;
    column-gap: 12rem;
    align-items: center;
}

.grid div li{
    text-align: justify;
    font-size: 2.6rem;
    font-weight: 200;
}

.banner{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 3rem;
    color: white;
    height: 20vh;
    background-color: var(--secondary-blue);
}

.banner h1{
    width: 50%;
}

/* end Imagens e textos */

/* Seção como funciona */

.information-container .dot{
    display: none;
}

.how-it-works-grid {
    display: grid;
    min-height: 96vh;
    grid-template-columns: auto 0.2rem 1fr;
    grid-template-rows: repeat(4, auto);
    column-gap: clamp(2rem, 4vw, 4rem);
    max-width: 140rem;
    margin: 0 auto;
    align-content: center;
    padding: 4rem 2rem;
}

.dots-container {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: clamp(6rem, 10vw, 10rem);
}

.how-it-works-grid>hr {
    grid-column: 2;
    grid-row: 1 / span 4;
    width: 100%;
    height: 100%;
    margin: 0;
    border: none;
    background-color: var(--secondary-blue);
    justify-self: center;
}

.information-container {
    grid-column: 3;
    display: flex;
    flex-direction: column;
    row-gap: clamp(6rem, 10vw, 10rem);
}

.information-container div{
    min-height: 9.5rem;
}

.information-container div h1{
    font-size: clamp(2.4rem, 3.5vw, 3.6rem);
    margin-bottom: 1.5rem;
    word-wrap: break-word;
    hyphens: none;
}

.information-container div p{
    font-size: clamp(1.8rem, 2.5vw, 2.6rem);
    line-height: 1.6;
    word-wrap: break-word;
    hyphens: none;
}

.dot {
    width: clamp(7rem, 9vw, 9.5rem);
    height: clamp(7rem, 9vw, 9.5rem);
    background-color: var(--secondary-blue);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 700;
    flex-shrink: 0;
}

.information-container > div:last-child {
    min-height: 13rem;
}

/* end seção como funciona */

@media (max-width: 389px) {
    :root {
        font-size: 28%;
    }
}

@media ((min-width: 390px) and (max-width: 400px)) {
    :root {
        font-size: 32%;
    }
}

@media ((min-width: 401px) and (max-width: 450px)) {
    :root {
        font-size: 37%;
    }
}

@media ((min-width: 451px) and (max-width: 780px)) {
    :root {
        font-size: 45%;
    }
}

@media ((min-width: 451px) and (max-width: 539px)) {
    :root {
        font-size: 37%;
    }
}

@media ((min-width: 540px) and (max-width: 779px)) {
    :root {
        font-size: 40%;
    }

    .grid img{
        width: 85%;
        justify-self: center;
        align-self: center;
    }
}

@media ((min-width: 780px) and (max-width: 850px)) {
    :root {
        font-size: 50%;
    }

    .grid img{
        width: 65%;
        justify-self: center;
        align-self: center;
    }
}

@media ((min-width: 851px) and (max-width: 999px)) {
    :root {
        font-size: 47%;
    }

    .grid img{
        width: 65%;
        justify-self: center;
        align-self: center;
    }
}

@media ((min-width: 1000px) and (max-width: 1199px)) {
    :root {
        font-size: 50%;
    }
    
    .grid img{
        width: 65%;
        justify-self: center;
        align-self: center;
    }
}

@media (max-width: 1199px){

    .grid{
        grid-template-columns: 0.75fr;
        align-items: center;
        justify-content: center;
    }

    .grid div h1, .blue-bgd .grid div h1{
        text-align: center;
    }

    .grid img{
        margin-bottom: 5rem;
        max-width: 50vh;
    }

    .blue-bgd .grid{
        display: flex;
        flex-direction: column-reverse;
        max-width: 75%;
        justify-content: center;
        align-items: center;
    }

    .grid-section{
        justify-content: center;
    }

    .grid-section-container{
        justify-content: center;
        align-items: center;
    }

    .bigger-grid-section .grid{
        display: flex;
        flex-direction: column;
        max-width: 75%;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }

    /* Como funciona mobile */
    .how-it-works-container hr{
        display: none;
    }

    .how-it-works-grid {
        grid-template-columns: 1fr;
        justify-items: center;
        column-gap: 0;
        row-gap: 4rem;
        padding: 2rem 1rem;
    }

    .information-container{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        row-gap: 4rem;
        width: 100%;
        max-width: 90%;
    }

    .dots-container {
        display: none;
    }

    .information-container .dot{
        display: flex;
        margin: 0 auto 2rem auto;
    }

    .information-container div h1{
        margin-bottom: 1rem;
    }

    .information-container > div:last-child {
        min-height: auto;
    }

    .information-container div:not(.dot){
        min-height: auto;
    }

    /* Hero mobile - CORRIGIDO */
    .hero-content {
        width: 95%;
        max-width: 90rem;
        padding: 2rem 1rem;
        /* Mantém centralização em mobile */
        position: static;
        transform: none;
    }
}

/* Hero responsivo em orientação landscape - CORRIGIDO */
@media (max-width: 1199px) and (orientation: landscape) {
    .hero-section {
        min-height: 100vh;
        min-height: 100dvh;
    }
    
    .hero-content {
        padding: 1rem;
        /* Mantém centralização em landscape */
        position: static;
        transform: none;
    }
    
    .hero-content h1 {
        font-size: clamp(2.4rem, 5vw, 4.8rem);
    }
    
    .hero-content p {
        font-size: clamp(1.4rem, 2.5vw, 2rem);
    }
}

@media (min-width: 1200px) and (max-width: 1600px) {

    :root {
        font-size: 45%;
    }
}

@media ((min-width : 2400px) and (max-width: 3000px)) {

    :root{
        font-size: 80%;
    }

    .grid-section {
        max-width: 180rem;
    }

    .bigger-grid-section {
        max-width: 180rem;
    }
}

@media ((min-width : 3001px)) {

    :root{
        font-size: 130%;
    }

    .grid-section {
        max-width: 140rem;
    }

    .bigger-grid-section {
        max-width: 140rem;
    }
}

.reveal{
  opacity: 0;
  transform: translateY(4rem);
  transition: opacity .7s ease-out,
              transform .7s cubic-bezier(.22,.61,.36,1);
}

.reveal.from-left  { transform: translateX(-40rem); }
.reveal.from-right { transform: translateX( 40rem); }

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

/* end imagens e textos */