/* ============================================================
   VARIÁVEIS
============================================================ */

:root{
  --yellow: #FCBD15;
  --yellow-light: #FFD61B;
  --yellow-dark: #F7A91A;

  --green: #009869;

  --purple: #8B5CA8;
  --purple-dark: #70468D;

  --black: #111111;
  --white: #FFFFFF;
}


/* ============================================================
   RESET
============================================================ */

*{
  box-sizing: border-box;
}

html,
body{
  margin: 0;
  padding: 0;
}

html{
  min-height: 100%;
}

body{
  min-height: 100vh;

  font-family:
    "Carlito",
    Arial,
    sans-serif;

  background: #ededed;

  color: var(--black);

  overflow-x: hidden;
}


/* ============================================================
   PÁGINA BASE
   MOBILE É A BASE DO LAYOUT
============================================================ */

.home-page{
  position: relative;

  width: min(100%, 430px);

  margin: 0 auto;

  overflow: hidden;

  background: var(--yellow);

  container-type: inline-size;
}


/* ============================================================
   HERO MOBILE / BASE
============================================================ */

.home-hero{
  position: relative;

  width: 100%;

  height: 169.35cqw;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #FFC21A 0%,
      #FFD21D 58%,
      #FDC21A 100%
    );
}


/* ============================================================
   FORMAS DECORATIVAS
============================================================ */

.shape{
  position: absolute;

  pointer-events: none;

  z-index: 0;
}


/* ESQUERDA SUPERIOR */

.shape-one{
  width: 55cqw;
  height: 29cqw;

  left: -45cqw;
  top: 0;

  background:
    rgba(
      246,
      159,
      18,
      .32
    );
}


/* DIREITA */

.shape-two{
  width: 76cqw;
  height: 76cqw;

  right: -45cqw;
  top: 57cqw;

  border-radius: 50%;

  background:
    rgba(
      255,
      234,
      39,
      .36
    );
}


/* INFERIOR ESQUERDA */

.shape-three{
  width: 80cqw;
  height: 80cqw;

  left: -63cqw;
  bottom: -41cqw;

  border-radius: 50%;

  background:
    rgba(
      255,
      219,
      32,
      .32
    );
}


/* ============================================================
   LOGO PL
============================================================ */

.home-pl{
  position: absolute;

  z-index: 15;

  top: 3.5cqw;
  right: 3.3cqw;

  width: 10.8cqw;

  max-width: none;

  height: auto;

  display: block;
}


/* ============================================================
   TÍTULO
============================================================ */

.home-title{
  position: absolute;

  z-index: 15;

  top: 14.7cqw;
  left: 15.3cqw;

  margin: 0;
  padding: 0;

  font-family:
    "Anton",
    Impact,
    sans-serif;

  font-size: 9.5cqw;

  font-weight: 400;

  line-height: 1;

  letter-spacing: .05cqw;

  white-space: nowrap;

  color: #80509A;
}


/* ============================================================
   LOGO MAYRA
============================================================ */

.home-campaign-logo{
  position: absolute;

  z-index: 12;

  top: 27.5cqw;
  left: 10.5cqw;

  width: 79cqw;

  max-width: none;

  height: auto;

  display: block;
}


/* ============================================================
   FOTO MAYRA
   MOBILE ORIGINAL
============================================================ */

.home-mayra{
  position: absolute;

  z-index: 5;

  width: 86cqw;

  max-width: none;
  max-height: none;

  height: auto;

  left: 10cqw;
  right: auto;

  top: auto;
  bottom: -0.5cqw;

  display: block;

  object-fit: initial;

  pointer-events: none;
}


/* ============================================================
   ÁREA VERDE
============================================================ */

.home-actions{
  position: relative;

  z-index: 20;

  width: 100%;

  min-height: 49.73cqw;

  padding:
    5.1cqw
    6.3cqw
    3.7cqw;

  background: var(--green);
}


/* ============================================================
   CHAMADA
============================================================ */

.home-call{
  margin: 0;

  padding: 0;

  max-width: none;

  color: var(--white);

  font-family:
    "Anton",
    Impact,
    sans-serif;

  font-size: 6.1cqw;

  font-weight: 400;

  line-height: 1.15;

  letter-spacing: .02cqw;

  text-align: center;
}


/* ============================================================
   CONTAINER DOS BOTÕES
============================================================ */

.home-buttons{
  width: 100%;

  max-width: none;

  margin-top: 6.4cqw;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 5.1cqw;
}


/* ============================================================
   BOTÃO BASE
============================================================ */

.home-button{
  appearance: none;

  box-sizing: border-box;

  cursor: pointer;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 100%;

  min-width: 0;
  min-height: 54px;

  margin: 0;

  padding:
    12px
    14px;

  outline: none;

  border-radius: 15px;

  font-family:
    "Carlito",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif;

  font-size: 14px;

  font-weight: 700;

  line-height: 1.05;

  text-align: center;

  text-decoration: none;

  user-select: none;

  -webkit-user-select: none;

  touch-action: manipulation;

  transition:
    all 300ms
    cubic-bezier(.23, 1, .32, 1);

  will-change: transform;
}


/* ============================================================
   BOTÃO WHATSAPP
============================================================ */

.home-button-whatsapp{
  background-color: var(--purple);

  border:
    2px solid
    var(--purple-dark);

  color: #FFFFFF;
}


/* ============================================================
   BOTÃO MATERIAL
============================================================ */

.home-button-material{
  background-color: var(--yellow);

  border:
    2px solid
    #E5A900;

  color: #111111;
}


/* ============================================================
   HOVER BOTÕES
============================================================ */

.home-button:hover{
  box-shadow:
    rgba(0, 0, 0, .25)
    0 8px 15px;

  transform:
    translateY(-2px);
}


/* ============================================================
   CLIQUE
============================================================ */

.home-button:active{
  box-shadow: none;

  transform:
    translateY(0);
}


/* ============================================================
   FOCO
============================================================ */

.home-button:focus-visible{
  outline:
    3px solid
    rgba(255, 255, 255, .8);

  outline-offset: 3px;
}


/* ============================================================
   MOBILE
   MANTÉM EXATAMENTE A COMPOSIÇÃO ORIGINAL
============================================================ */

@media (max-width: 767px){

  html,
  body{
    width: 100%;

    margin: 0;
    padding: 0;

    overflow-x: hidden;
  }


  body{
    display: block;

    min-height: 100vh;

    background: var(--green);
  }


  .home-page{
    width: 100%;

    max-width: none;

    margin: 0;

    overflow: hidden;

    box-shadow: none;

    background: var(--yellow);
  }


  /* HERO */

  .home-hero{
    position: relative;

    width: 100%;

    height: 169.35cqw;

    min-height: 0;

    overflow: hidden;
  }


  /* FORMAS */

  .shape-one{
    width: 55cqw;
    height: 29cqw;

    left: -45cqw;
    top: 0;
  }


  .shape-two{
    width: 76cqw;
    height: 76cqw;

    right: -45cqw;
    top: 57cqw;
  }


  .shape-three{
    width: 80cqw;
    height: 80cqw;

    left: -63cqw;
    bottom: -41cqw;
  }


  /* PL */

  .home-pl{
    position: absolute;

    width: 10.8cqw;

    max-width: none;

    top: 3.5cqw;
    right: 3.3cqw;

    left: auto;

    height: auto;
  }


  /* TÍTULO */

  .home-title{
    position: absolute;

    top: 14.7cqw;
    left: 15.3cqw;

    right: auto;

    margin: 0;

    font-size: 9.5cqw;

    line-height: 1;

    letter-spacing: .05cqw;

    white-space: nowrap;
  }


  /* LOGO MAYRA */

  .home-campaign-logo{
    position: absolute;

    top: 27.5cqw;
    left: 10.5cqw;

    right: auto;

    width: 79cqw;

    max-width: none;

    height: auto;
  }


  /* FOTO MAYRA */

  .home-mayra{
    position: absolute;

    width: 86cqw;

    max-width: none;
    max-height: none;

    height: auto;

    left: 10cqw;
    right: auto;

    top: auto;
    bottom: -0.5cqw;

    object-fit: initial;
  }


  /* ÁREA VERDE */

  .home-actions{
    position: relative;

    width: 100%;

    min-height: 49.73cqw;

    padding:
      5.1cqw
      6.3cqw
      3.7cqw;

    background: var(--green);
  }


  /* CHAMADA */

  .home-call{
    margin: 0;

    max-width: none;

    font-size: 6.1cqw;

    line-height: 1.15;

    letter-spacing: .02cqw;

    text-align: center;
  }


  /* BOTÕES */

  .home-buttons{
    width: 100%;

    max-width: none;

    margin-top: 6.4cqw;

    display: grid;

    grid-template-columns:
      1fr 1fr;

    gap: 5.1cqw;
  }


  .home-button{
    min-height: 54px;

    width: 100%;

    padding:
      12px
      14px;

    border-radius: 15px;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.05;

    text-align: center;
  }

}


/* ============================================================
   DESKTOP
   FULL WIDTH
============================================================ */

@media (min-width: 768px){

  html,
  body{
    width: 100%;

    min-height: 100%;

    margin: 0;
    padding: 0;

    overflow-x: hidden;

    background: var(--yellow);
  }


  body{
    display: block;
  }


  /* ==========================================================
     PÁGINA FULL
  ========================================================== */

  .home-page{
    width: 100%;

    max-width: none;

    margin: 0;

    box-shadow: none;

    overflow: hidden;
  }


  /* ==========================================================
     HERO
  ========================================================== */

  .home-hero{
    position: relative;

    width: 100%;

    height:
      clamp(
        570px,
        38vw,
        730px
      );

    overflow: hidden;

    background:
      linear-gradient(
        135deg,
        #FFC21A 0%,
        #FFD21D 58%,
        #FDC21A 100%
      );
  }


  /* ==========================================================
     FORMAS
  ========================================================== */

  .shape-one{
    width: 280px;
    height: 250px;

    left: -90px;
    top: 0;
  }


  .shape-two{
    width: 720px;
    height: 720px;

    right: -400px;
    top: 110px;
  }


  .shape-three{
    width: 620px;
    height: 620px;

    left: -420px;
    bottom: -370px;
  }


  /* ==========================================================
     LOGO PL
  ========================================================== */

  .home-pl{
    width:
      clamp(
        72px,
        5vw,
        100px
      );

    max-width: none;

    top: 40px;
    right: 4.5vw;

    left: auto;
  }


  /* ==========================================================
     TÍTULO
  ========================================================== */

  .home-title{
    position: absolute;

    top: 70px;
    left: 7vw;

    right: auto;

    margin: 0;

    font-size:
      clamp(
        52px,
        4.5vw,
        82px
      );

    line-height: 1;

    letter-spacing: 0;

    white-space: nowrap;

    z-index: 15;
  }


  /* ==========================================================
     LOGO MAYRA
  ========================================================== */

  .home-campaign-logo{
    position: absolute;

    top: 175px;
    left: 6.8vw;

    right: auto;

    width:
      clamp(
        440px,
        38vw,
        690px
      );

    max-width: none;

    height: auto;

    z-index: 12;
  }


  /* ==========================================================
     FOTO MAYRA

     AQUI ESTÁ O AJUSTE QUE EVITA CORTAR A CABEÇA.
  ========================================================== */

.home-mayra{
  position: absolute;

  z-index: 5;

  /* controla pela ALTURA da hero */
  height: 96%;
  width: auto;

  /* remove limites anteriores */
  max-height: none;
  max-width: none;

  /* ancora perfeitamente na parte verde */
  bottom: 0;
  top: auto;

  /* posicionamento horizontal */
  right: 7vw;
  left: auto;

  display: block;

  object-fit: contain;

  pointer-events: none;
}

    /*
      Mantém uma pequena margem acima
      da cabeça em qualquer desktop.
    */
    max-height: 96%;

    height: auto;

    left: auto;

    right: 7vw;

    top: auto;
    bottom: 0;

    object-fit: contain;

    z-index: 5;
  }


  /* ==========================================================
     ÁREA VERDE
  ========================================================== */

  .home-actions{
    position: relative;

    width: 100%;

    min-height: 255px;

    padding:
      32px
      40px
      38px;

    background: var(--green);
  }


  /* ==========================================================
     CHAMADA
  ========================================================== */

  .home-call{
    max-width: 900px;

    margin: 0 auto;

    font-size:
      clamp(
        27px,
        2vw,
        36px
      );

    line-height: 1.12;

    text-align: center;
  }


  /* ==========================================================
     BOTÕES
  ========================================================== */

  .home-buttons{
    width:
      min(
        680px,
        90%
      );

    max-width: 680px;

    margin:
      28px
      auto
      0;

    display: grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 25px;
  }


  .home-button{
    min-height: 65px;

    padding:
      16px
      24px;

    border-radius: 15px;

    font-size: 17px;

    font-weight: 700;
  }

}