/*
Theme Name: Imersão Upgrade
Theme URI: https://actmob.com/
Author: Bruno Miho
Author URI: https://actmob.com/
Description: Tema desenvolvido para projeto Imersão Upgrade.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: upgrade_tema
*/

#sobrevivencia {
  padding-top: 7.625rem;

  & .row > div {
    gap: 3.375rem;
  }

  & .content {
    & h1 {
      font: 700 3.375rem/1.2 var(--font-montserrat);
      margin-bottom: 2rem;

      & span {
        font-size: 4rem;
      }
    }

    & .subtitle,
    & .description {
      font: 400 2rem/normal var(--font-montserrat);
    }

    & .description {
      margin-bottom: 2.75rem;
    }

    & .bg_icon {
      display: flex;
      align-items: center;
      justify-content: center;

      min-width: 3.25rem;
      height: 3.25rem;

      background-color: var(--primary);

      border-radius: 50%;

      & i {
        font-size: 2rem;
        color: #404040;
        mix-blend-mode: plus-darker;
      }
    }

    & .text_imersao {
      font: 400 1rem/1.22 var(--font-montserrat);
      max-width: 466px;
    }

    & .text_imersao:nth-child(2) {
      font-size: 1.25rem;
      max-width: 100%;
    }

    & .buttons {
      max-width: 506px;

      & .info_button {
        font: 400 1rem/normal var(--font-montserrat);

        & strong {
          font-weight: 600;
        }
      }
    }
  }
}

#mercado {
  padding-top: 12.375rem;
  padding-bottom: 11.75rem;

  & > div {
    display: flex;
    flex-direction: column;
    gap: 4.5rem;
  }

  & .row:nth-child(1) > div {
    padding: 0;
    max-width: 518px;

    & p {
      max-width: 504px;
    }
  }

  & .row:nth-child(2) > div {
    padding: 0;

    & p {
      max-width: 535px;
    }
  }

  & .title_mercado {
    font: 700 2.5rem/normal var(--font-outfit);
  }

  & .text_mercado {
    font: 400 1.5rem/normal var(--font-outfit);

    & + p {
      margin-top: 2rem;
    }
  }
}

#cenarios {
  padding-bottom: 9.25rem;

  & > div {
    display: flex;
    flex-direction: column;
    gap: 7rem;
  }

  & .title_cenarios {
    font: 700 2.5rem/normal var(--font-outfit);
    max-width: 674px;

    & span {
      color: var(--primary);
    }
  }

  & .list_cenarios {
    gap: 4.25rem;

    & .card_cenarios {
      width: 305px;
      height: 305px;

      background: linear-gradient(
        180deg,
        #161616 0%,
        rgba(12, 9, 12, 0.15) 52.88%
      );
      border: 1px solid rgba(142, 136, 136, 0.31);
      border-radius: 12px;

      position: relative;

      padding: 114px 48px 30px;

      & .card_icon {
        position: absolute;
        top: -60px;
        left: 50%;
        transform: translateX(-50%);
      }

      & .card_title {
        font: 600 1.25rem/1.3 var(--font-outfit);
        text-align: center;
      }

      & .card_number {
        font: 400 1.875rem/1 var(--font-roboto-mono);
        color: #939393;
        opacity: 0.15;
      }
    }
  }
}

#marco {
  & > div > .row:nth-child(1) > div {
    text-align: center;
  }

  & h3 {
    font: 700 2.5rem/normal var(--font-outfit);
  }

  & h2 {
    font: 700 4rem/normal var(--font-outfit);
    color: var(--primary);
    margin-bottom: 68px;
  }

  & p {
    font: 400 1.5rem/normal var(--font-outfit);

    & + p {
      margin-top: 1.5rem;
    }
  }
}

#pilares {
  padding-top: 10.75rem;

  & .wrapper {
    max-width: 1200px;
    margin: 0 auto;
  }

  & .row > div {
    margin-bottom: 105px;
  }

  & .card_marco {
    max-width: 385px;

    & .marco_number {
      font: 700 8rem/1 var(--font-outfit);
      color: var(--primary);
    }

    & h3 {
      font: 700 2.5rem/normal var(--font-outfit);
    }

    & p {
      font-size: 1.25rem;
    }
  }
}

#seu_upgrade {
  padding-bottom: 11.5rem;

  & > div {
    display: flex;
    flex-direction: column;
    gap: 54px;
  }

  & .row:nth-child(1) > div {
    text-align: center;
  }

  & h3 {
    font: 700 2.5rem/normal var(--font-outfit);
  }

  & h2 {
    font: 700 4rem/normal var(--font-outfit);
    color: var(--primary);
  }

  & .card_palestrante {
    position: relative;
    max-width: max-content;

    & .info_palestrante {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: end;
      align-items: center;
      gap: 42px;
      padding: 0 26px 42px;
      text-align: center;
    }

    & .info_palestrante:nth-child(2) {
      padding: 0 20px 42px;
    }

    & .palestrante {
      font: 700 34px/normal var(--font-outfit);
      text-transform: uppercase;
      text-shadow: 0px 5px 5.1px rgba(0, 0, 0, 0.7);
    }

    & .especialidade {
      font: 700 1.25rem/normal var(--font-outfit);
    }

    & p {
      font: 400 1rem/normal var(--font-outfit);
    }
  }
}

#valores {
  & > div {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }

  & .title_valores {
    font: 400 1.875rem/normal var(--font-outfit);
    text-align: center;
    max-width: 657px;
    margin: 0 auto;
  }

  & .card_ingresso {
    background: #0c090c66;
    box-shadow: 0px 0px 10px #1e1e1e;
    border-radius: 0.75rem;
    position: relative;

    display: flex;
    flex-direction: column;
    gap: 2.75rem;

    padding: 40px 32px 32px;
    text-align: center;

    max-width: 423px;

    & .title_ingresso {
      font: 700 1.25rem/1.3 var(--font-outfit);
      text-transform: uppercase;
    }

    & .ingresso_valor {
      font: 700 80px/1.3 var(--font-outfit);

      & span:nth-child(1) {
        font-weight: 400;
      }

      & .badge_economia {
        font: 400 20px/1.3 var(--font-outfit);
        color: var(--primary);
        margin-bottom: 1rem;
      }

      & span {
        font-size: 50px;
      }

      & .button {
        width: 100%;
      }
    }

    & .beneficios {
      & > .title_beneficios {
        font: 500 13px/normal var(--font-outfit);
        color: #2c2c2c;
        text-transform: uppercase;
        display: block;
        margin-bottom: 1.375rem;
      }

      & > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;

        & + div {
          margin-top: 26px;
        }

        & .bg_icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 1.25rem;
          height: 1.25rem;
          background-color: var(--primary);
          border-radius: 50%;
        }

        & p {
          font: 400 18px/1.3 var(--font-outfit);
          max-width: 262px;
        }
      }
    }

    &.card_ingresso--destaque {
      max-width: 461px;

      &::before {
        content: "";

        background: url(/wp-content/uploads/2026/03/icon_caminho_mais_inteligente.png);

        width: 138px;
        height: 141px;

        position: absolute;
        top: -25px;
        right: -15px;
      }

      & .title_ingresso {
        font-size: 1.875rem;
      }

      & .beneficios {
        & > div {
          & p {
            max-width: 344px;
          }
        }
      }
    }
  }

  & .evento_info {
    padding-top: 6.375rem;
    padding-bottom: 7.625rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;

    & p {
      font: 500 2.5rem/normal var(--font-montserrat);
    }

    & .evento_data {
      color: var(--primary);
    }

    & .evento_horario {
      border: 2px solid var(--white);
      border-radius: 20px;
      padding: 14px 20px;
    }

    & .evento_local {
      font: 500 1.25rem/normal var(--font-montserrat);
      letter-spacing: 17%;
      margin-bottom: 0;
    }

    & .evento_palestrantes {
      & p {
        font: 700 1.5rem/normal var(--font-montserrat);
        letter-spacing: 17%;
      }
    }
  }
}

#velha_gestao {
  padding-top: 6.625rem;
  padding-bottom: 5.875rem;

  & > div {
    display: flex;
    flex-direction: column;
    gap: 100px;
  }

  & .title_gestao {
    font: 700 2.5rem/normal var(--font-montserrat);
    text-transform: uppercase;
    text-align: center;
    position: relative;

    &::before {
      content: "?";
      font-size: 300px;
      line-height: 1;
      color: var(--primary);
      position: absolute;
      top: -100px;
      left: 50%;
      transform: translateX(-50%);
      z-index: -1;
      opacity: 0.17;
    }

    & span {
      color: var(--primary);
    }
  }

  & .row:nth-child(2) {
    & p {
      font: 500 1.5rem/1.3 var(--font-montserrat);
      text-align: center;

      & + p {
        margin-top: 1.5rem;
      }
    }

    & div > strong {
      display: block;
      font-size: 2.125rem;
      line-height: 1.3;
      text-transform: uppercase;
      text-align: center;
    }
  }

  & .row:nth-child(3) {
    & .button {
      max-width: 395px;
      margin: 0 auto;
      font-size: 24px;
    }
  }

  & .logo_rodape > img {
    display: block;
    max-width: 220px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  #sobrevivencia {
    text-align: center;
    padding-top: 3.5rem;

    & .content {
      & .buttons {
        margin: 0 auto;
      }
    }
  }

  #mercado {
    padding-top: 6rem;
    padding-bottom: 5.5rem;

    text-align: center;

    & > div {
      gap: 2.5rem;
    }
  }

  #cenarios {
    padding-bottom: 4.5rem;

    & .title_cenarios {
      font: 700 2.5rem/normal var(--font-outfit);
      max-width: 674px;
    }
  }

  #seu_upgrade {
    padding-bottom: 5.5rem;

    & .card_palestrante {
      & .palestrante {
        font-size: 1.75rem;
      }

      & .especialidade {
        font-size: 1rem;
      }

      & p {
        font-size: 0.875rem;
      }
    }
  }

  #valores {
    & .card_ingresso {
      margin: 0 auto;
    }

    & .evento_info {
      padding-top: 3rem;
      padding-bottom: 3.5rem;
    }
  }

  #velha_gestao {
    padding-top: 3rem;
    padding-bottom: 2.5rem;
  }
}

@media (max-width: 576px) {
  #sobrevivencia {
    & .content {
      & h1 {
        font-size: 2rem; /*2.5*/

        & span {
          font-size: 2.5rem; /*3.5*/
        }
      }
    }
  }

  #mercado {
    & .title_mercado {
      font: 700 2rem/normal var(--font-outfit);
    }

    & .text_mercado {
      font: 400 1.25rem/normal var(--font-outfit);

      & + p {
        margin-top: 1.5rem;
      }
    }
  }

  #cenarios {
    & .title_cenarios {
      font-size: 2rem;
    }
  }

  #marco {
    & h3 {
      font-size: 2rem;
    }

    & h2 {
      font-size: 3rem;
    }

    & p {
      font-size: 1.25rem;
    }
  }

  #seu_upgrade {
    & h3 {
      font-size: 2rem;
    }

    & h2 {
      font-size: 3rem;
    }

    & .card_palestrante {
      width: 100%;
      margin: 0 auto;

      & .palestrante {
        font-size: 34px;
      }

      & .especialidade {
        font-size: 1.25rem;
      }

      & p {
        font-size: 1rem;
      }
    }
  }

  #valores {
    & .evento_info {
      & p {
        font-size: 2rem;
      }

      & .evento_local {
        font-size: 1rem;
      }
    }
  }

  #velha_gestao {
    & .title_gestao {
      font-size: 1.75rem;

      &::before {
        font-size: 200px;
        top: -60px;
      }
    }

    & .row:nth-child(2) {
      & p {
        font-size: 1.25rem;
      }

      & div > strong {
        font-size: 2rem;
      }
    }
  }
}

@media (max-width: 500px) {
  #sobrevivencia {
    & .content {
      & h1 {
        font-size: 1rem;

        & span {
          font-size: 1rem;
        }
      }

      & .subtitle,
      & .description {
        font: 400 1.25rem/normal var(--font-montserrat);
      }

      & .text_imersao:nth-child(2) {
        font-size: 1rem;
      }

      & .buttons {
        max-width: 300px;
      }
    }
  }

  #cenarios {
    & .title_cenarios {
      font-size: 1.5rem;
    }
  }

  #valores {
    & .evento_info {
      & p {
        font-size: 1.25rem;
      }

      & .evento_local {
        font-size: 1.25rem;
        text-align: center;
      }

      & .evento_palestrantes {
        & p {
          font-size: 1rem;
        }
      }
    }
  }
}