/*   ======================== VARIAVEIS CSS ========================  */

:root {
  /*   =================== TEXT-COLOR ===================  */
  --primary-white: #ffffff;
  --primary-gray: #4a555c;
  --primary-yellow: #ffcc00;
  --primary-pink: #e6007e;
  --primary-pink-light: #e47cb0;
  --primary-button-waths: #000000;
  --shadow-whats:
    0px 3.38px 10.02px 0px #18ff7332, 0px 6.03px 17.87px 0px #18ff733b,
    0px 11.28px 33.42px 0px #18ff7347, 0px 27px 80px 0px #18ff7363;

  /* BG-GRADIENTES-CARDS */
  --background-cards-yellow: #fac208;
  --background-cards-pink: #e50b81;
  --background-whats: #36ff5b;
  --background-border-whats: #78de87;
  --background-icon-whats: #9effb0;
  --background-whats-icon: #05931a;

  /* BG-GRADIENTES-CARDS( TOP ) */
  --background-cards-orange-top: #fb6609;
  --background-cards-orange-body: #fb9e09;
  --background-cards-yellow-top: #fb8a09;
  --background-cards-yellow-body: #fac208;
  --background-cards-black-top: #4a555c;
  --background-cards-black-body: #000000;
  --background-cards-blue-top: #69b1cb;
  --background-cards-blue-body: #3e4dba;
  --background-button-dark: #cccc;
  --darkmode-dark: #070b1d;

  /* BG-GRADIENTES */
  --background-primary: linear-gradient(
    270deg,
    #f489b5 3.49%,
    #ea005f 47.49%,
    #ea0063 94.22%
  );
  --backgorund-flash: linear-gradient(90deg, transparent, #fff, transparent);
}

/* ====================== SCROLL BAR ====================== */

.header-top.shadow-scroll {
  box-shadow: 0 4px 10px rgba(61, 60, 60, 0.8);
}

::-webkit-scrollbar {
  width: 0.6rem;
  border-radius: 0.5rem;
  background-color: var(--primary-pink);
}

::-webkit-scrollbar-thumb {
  width: 0.6rem;
  height: 5rem;
  border-radius: 0.1rem;
  background-color: var(--primary-white);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-gray);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 20px;
}

/* BUTTON DARKMODE ( EDITION ) */
.darkmode {
  background: var(--darkmode-dark);
  transition: all 0.5s ease;
}

.darkmode .header-top {
  background: var(--darkmode-dark);
}

.darkmode :is(.plans-title h2, .plans-text p) {
  color: var(--primary-white);
}

.darkmode .plans-border {
  background-color: var(--primary-white);
}

.darkmode :is(.plans, .for-whom-and) {
  background: url(none);
}

.darkmode .for-whom-and-description :is(h2, p, span) {
  color: var(--primary-white);
}

.darkmode .for-whom-and-phrase-content p {
  color: var(--primary-white);
}

.darkmode .for-whom-and-phrase-content p strong {
  color: var(--primary-pink);
}

.darkmode .footer-logo {
  filter: invert(0) brightness(1000%);
}

.darkmode .footer-copyright {
  color: var(--primary-white);
}

/* BUTTON DARKMODE ( EDITION ) */

#theme-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background: var(--primary-white);
  border-radius: 50%;
  box-shadow:
    inset 0 8px 60px rgba(0, 0, 0, 0.2),
    inset 0 8px 8px rgba(0, 0, 0, 0.2),
    inset 0 4px 4px rgba(0, 0, 0, 0.2);
  transition: 1s ease-in-out;
}

#theme-switch i {
  font-size: 1.6em;
  cursor: pointer;
  color: var(--primary-gray);
  transition: 1s;
}

#theme-switch i:last-child {
  display: none;
}

#theme-switch:hover i:first-child {
  transform: rotate(360deg) scale(1.4);
  opacity: 1;
}

.darkmode #theme-switch i:first-child {
  display: none;
}

.darkmode #theme-switch i:last-child {
  display: block;
}

#theme-switch i:first-child,
.darkmode #theme-switch i:last-child {
  transition: all 0.8s ease;
  opacity: 0.8;
}
.darkmode #theme-switch:hover i:last-child {
  transform: rotate(360deg) scale(1.2);
  opacity: 1;
}

.darkmode .confirmed-content-text :is(h2, p) {
  color: var(--primary-white);
}

.darkmode .comfirmed-rodape-text p {
  color: var(--primary-white);
}

#count {
  color: var(--primary-white);
  font-weight: 900;
  font-size: 20px;
}

/*   ======================== BASE ========================  */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 200;
}
html,
body {
  height: 100%;
  transition: all 0.6s ease;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

object,
embed,
video,
iframe,
iframe[style] {
  max-width: 100%;
  height: auto;
}

strong {
  font-weight: bold;
}

header,
section,
main,
footer {
  width: 100%;
}

.container {
  max-width: 1620px;
  margin: auto;
  padding-inline: 30px;
}

/* EFFECTS ICONS SVG */
.icon-box path {
  stroke: 10px;
}

/* SVG-ANUIMATION */
.icon-box.svg-animation path {
  stroke-dasharray: 352;
  stroke-dashoffset: 0;
}

.cards-items:hover .icon-box.svg-animation path {
  animation: animate-heart 2s ease forwards;
  stroke: var(--primary-white);
}

@keyframes animate-heart {
  0% {
    stroke-dashoffset: 0;
  }

  40% {
    stroke-dashoffset: 352;
  }

  80% {
    stroke-dashoffset: 704;
  }
  100% {
    stroke-dashoffset: 704;
  }
}

/* LOADER  - ( ! ) */
.loader-spin {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-items: center;
  background: var(--primary-pink);
  z-index: 30000;
  pointer-events: none;
}

.loader {
  width: 90px;
  height: 90px;
  border: 15px solid var(--primary-white);
  border-radius: 50%;
  border-top: 15px solid var(--primary-yellow);
  margin: 0 auto;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* LSCROLL-BLUR  - ( ! ) */
.scrollBlur {
  transition: all 0.6s ease-in;
  filter: blur(4px);
}

.scrollBlur.show {
  filter: blur(0px);
}

.autoShow {
  animation: text-apper both;
  animation-timeline: view();
  animation-range: entry 20% cover 100vh;
}

@keyframes text-apper {
  from {
    opacity: 0.8;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0px);
  }
}