/* Importa el archivo de variables CSS (colores, tamaños, etc.) */
@import url(variaveis.css);

/* Reset básico y fuente global del sitio */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Inter", "Segoe UI", Roboto, sans-serif;
}

/* Habilita el scroll suave al usar links ancla */
html {
    scroll-behavior: smooth;
}

/* ============================= */
/* Botones globales */
/* ============================= */

/* Estilos base para todos los botones */
.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    background-color: transparent;
    transition: background-color 0.4 ease;
}

/* Botón del menú mobile (icono hamburguesa) */
.btn-mobile {
    font-size: 1.5em;
}

/* Botón principal (CTA / contacto) */
.btn-default {
    text-decoration: none;
    background: linear-gradient(
        to bottom,
        #5eead4,
        #22c55e
    );

    color: #053e2a;
    border-radius: 10px;

    box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 6px 14px rgba(0, 0, 0, 0.15);

    transition: 
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.btn-default:hover {
    color: var(--white);
    transform: translateY(-1px);
    box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 10px 22px rgba(0, 0, 0, 0.22);
}

.btn-default:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ============================= */
/* Header y navegación */
/* ============================= */

/* Header fijo en la parte superior */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: white;
    padding: 20px 4%;
    z-index: 10;
}

/* Contenedor principal del navbar */
.navbar {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo del sitio */
.logo{
    width: 100px;
    height: auto;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Lista de links del menú */
#nav-links {
    background-color: var(--primary-light);
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);

    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 50px;

    position: absolute;
    top: 100%;
    left: 0;

    opacity: 0;
    transform: translateX(-30px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;

    /* Estado visible del menú */
    &.show {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}



/* Items de la lista del menú */
li {
    padding: 10px 12px;
    border-radius: 6px;
    text-align: center;

    &:hover {
        background-color: rgba(255, 255, 255, 0.08);
    }

    &:active {
        border-left: 3px solid #2f81f7;
    }
}

/* Links del menú */
li a {
    color: var(--link);
    text-decoration: none;
    font-size: 1em;
    font-weight: 600;
    transition: all 0.4 ease;

    /* Hover de los links */
    &:hover {
        color: var(--link-hover);
        border-bottom: 1px solid var(--link-hover);
    }
}

/*estilo iconos*/


#nav-links i {
  font-size: 16px;
  color: var(--secondary);
  opacity: 0.85;
}

/* Botón CTA oculto por defecto (mobile) */
.btn-default {
    display: none;
}

/* ============================= */
/* Configuración global de secciones */
/* ============================= */

/* Evita que el header fijo tape el contenido al navegar por anclas */
section {
    scroll-margin-top: 90px;
}

/* ============================= */
/* Cards */
/* ============================= */

/* Estilo base de las cards */

.cards-container {
    display: flex;
    gap: 20px;
    align-items: stretch; 
}

.card {
    flex: 1; /* todas ocupam a mesma largura */
    background-color: var(--primary-light);
    padding: 20px;

    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center;

    text-align: center;

    margin-top: 20px;
    min-height: 360px; /* ajuste fino aqui */

    border-radius: 8px;
    border: 1px solid var(--link);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    &:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.363);
        transition: all 0.3s ease;
    }

    /* Texto interno de la card */
    p {
        margin-top: 15px;
        color: var(--text-secondary);
        font-size: 1.2em;
    }
}

.diferenciais-card {
    background: linear-gradient(
        180deg,
        #ffffff,
        #c6e1fc9c
    );
}


/* Iconos de las cards */
.card-icon {
    padding: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    font-size: 2.5rem;
    color: var(--cta);
    margin-bottom: 16px;

    /* Efecto hover del icono */
    &:hover{
        transform: scale(1.1);
        transition: transform 0.3s ease;
    }
}

/* Títulos generales de secciones */
.title {
    margin-top: 50px;
    font-size: 1.5em;
    font-weight: 700;
    color: var(--text-main);
}

/* ============================= */
/* Sección Vantagens */
/* ============================= */

#vantagens-conteiner {
    text-align: center;
    padding: 10px 2%;
    margin-top: 10px;
}

/* div */
#vantagens-title {
    border-radius: 10px;
    margin-top: 0px;
    padding: 80px 4%;
    background-color: var(--primary-light);
    text-align: center;
}

/* conteiner flex */
#vantagens-cards-conteiner {
    display: flex;
    gap: 20px;
    align-items: center;
}

/* ============================= */
/* Sección Diferenciais */
/* ============================= */

#diferenciais-conteiner {
    text-align: center;
    padding: 20px 4%;
    margin-top: 10px;
  
}

/* div */
#diferenciais-title {
    padding: 80px 6.5%;
    background-image: linear-gradient(var(--white) ,var(--bg-soft-2) );
    text-align: center;
    border-radius: 10px;
    padding: 80px 6.5%;
    
}

/* conteiner flex */
#diferenciais-cards-conteiner {
    display: flex;
    gap: 20px;
    align-items: center;
}

/* ============================= */
/* Sección Como Funciona */
/* ============================= */

#como-funciona {
    text-align: center;
    padding: 20px 4%;
    margin-top: 10px;
}

/* div */
#como-funciona-title {
    padding: 80px 6.5%;
    border-radius: 10px;
    background-image: linear-gradient(
        var(--white),
        var(--green-soft-2)
        );

    text-align: center;
}

/* conteiner flex */
div#steps-conteiner {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

/* item flex */
.step-card {
    background: linear-gradient(
        var(--white),
        var(--green-soft-2)
    );
}

/* ===============================
   CTA LANDING (fora do iframe)
================================ */

div#cta-conteiner {
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 4rem 1.5rem;
    width: 100%;
}

/* ===============================
   CTA LANDING
================================ */

.cta-landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;

  width: 100%;
  max-width: 90vw;

  padding: 3rem 2rem;
  text-align: center;

  background: linear-gradient(
    180deg,
    rgba(240, 249, 255, 0.9),
    rgba(220, 240, 255, 0.9)
  );

  border-radius: 22px;

  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ===============================
   TEXTO
================================ */

.cta-landing h2 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #0f172a;
}

.cta-landing p {
  font-size: 1.05rem;
  color: #334155;
  max-width: 520px;
}

/* ===============================
   BOTÃO FRUTIGER AERO
================================ */

.cta-landing .cta-btn {
  max-width: 525px;
  width: 100%;
  height: 56px;

  border: none;
  border-radius: 16px;

  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;

  cursor: pointer;

  background: linear-gradient(
    to bottom,
    #5eead4 0%,
    #22c55e 55%,
    #16a34a 100%
  );

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 8px 18px rgba(0, 0, 0, 0.25);

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
}

.cta-landing .cta-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.cta-landing .cta-btn:active {
  transform: translateY(1px);
}


/* ============================= */
/* Sección delos planes */
/* ============================= */

/*titulo del modal*/
#plano-titulo {
    text-align: center;
}

/* contenedor genreal */
section#planos-conteiner{
    text-align: center;
    padding: 20px 4%;
    margin-top: 10px;
}

/* titulo */
section#planos-title {
    text-align: center;
    padding: 80px 6.5%;
    border-radius: 10px 10px 0px 0px;
    background-image: linear-gradient(var(--white)20% , var(--bg-soft-2));
}


/*contenedor del titulo del subtitulo y de la imagen (contenedor padre)*/
#plano-title-img-conteiner {
    padding: 20px;
    border-radius: 0px 0px 10px 10px;
    background: var(--bg-soft-3);
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
   
}

/*contenedor del sub-titulo que va a la derecha*/
#plano-sub-title-continer {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/*contenedor del img que va a la izquierda*/
#planos-img-conteiner {
    padding: 10px;
}


#planos-img-conteiner img {
    border-radius: 10px;
    width: 800px;
}


/*liena azul que no se hace algo ahi*/
#plano-sub-title-continer::before {
  content: "";
  width: 56px;
  height: 4px;
  background: linear-gradient(to right, #2563eb, #38bdf8);
  border-radius: 999px;
}

/*estilos del paragrafo dentro del sub-title-conteiner*/
#plano-sub-title-continer p {
  font-size: clamp(1.15rem, 2vw, 1.3rem);
  line-height: 1.85;
  color: #1e293b;
  max-width: 560px;
  font-weight: 500;
}


/* contenedor cards */
section#planos-cards-conteiner {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 50px;
}


.plano-card {
    flex: none;
    width: 100%;
    max-width: 460px;
}

/*card destacada*/ 
#card-recomendada {
    position: relative;
    background: linear-gradient(
        180deg,
        #f8fbff 0%,
        #ffffff 60%
    );

    border: 2px solid #60a5fa;
    box-shadow:
        0 20px 40px rgba(59, 130, 246, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Cinta sutil superior */
#card-recomendada::before {
  content: "Mais Popular";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);

  background: linear-gradient(
    to right,
    #2563eb,
    #38bdf8
  );
  color: #ffffff;

  padding: 13px 28px;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 999px;

  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.35);
}

/* icono destacado*/
#card-recomendada .card-icon {
  
  color: #2563eb;

  background: linear-gradient(
     at top,
    #e0f2fe,
    #bfdbfe
  );

  padding: 18px;
  border-radius: 50%;
  margin-bottom: 16px;
}

/* lista de ventajas */
ul.plano-list {
    list-style: none;
    margin: 20px;
    padding-left: 1.8rem;
}

/* itens de ventajas */
.plano-list li {
  position: relative;
}

/* emojis (check verde) */

.plano-list li.vantagem::before {
  content: "\f058";
  font: var(--fa-font-solid);
  color: #22c55e;
  position: absolute;
  left: -1.6rem;
}

/* emojis (engranaje) */
.plano-list li.diferencial::before {
  content: "\f013";
  font: var(--fa-font-solid);
  color: #3b82f6;
  position: absolute;
  left: -1.6rem;
}

/* div para que el boton quede centralixado */
div.btn-plano-div{
  display: flex;
  justify-content: center;
  width: 100%;
}


/* estilos para el boton azul (f-a) */
.btn-plano {
    display: block;
    max-width: 450px;
    width: 100%;
    text-decoration: none;
    color: var(--white);

    background: linear-gradient(
      to bottom,
      #7fb8ff 0%,
      #4f8edc 50%,
      #2f6fbf 100%
    );
    border-radius: 999px;

    box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 4px 10px rgba(0,0,0,0.2);

    cursor: pointer;

    transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
}

.btn-plano:hover {
    color: var(--white);
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 6px 14px rgba(0,0,0,0.25);
}

.btn-plano:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ============================= */
/* FOOTER*/
/* ============================= */
footer {
    background-color: var(--footer-bg);
    padding: 5rem;
}

/* div general*/
div#footer-conteiner {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/* div de las columnas de los <ul>*/
div.footer-columns {
    display: flex;
    justify-content: space-evenly;
    gap: 50px;
}

/* imagens de la empresa */
footer img {
    max-width: 150px;
    width: 100%;
    margin: 10px;
}

/* links para el sitio web*/
#site {
    text-decoration: none;
    color: var(--footer-text);
    font-size: 1.5em;
     
    &:hover {
        border-bottom: 1px solid var(--link-hover);
    }
}

/* <li> - <a> estilos*/
.links-footer{
    color: var(--footer-muted);
}

/* texto */
footer p {
    color: var(--footer-muted);
}

/* lista */
footer ul {
    list-style: none;
    color: var(--footer-muted);
}
/* elementos de la lista */
footer li {
    margin: 10px;
}

/* titulo */
.li-title {
    color: var(--footer-text);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 10px;
}