/* ==========================================
   CAMINHOS DO ORÁCULO
   STYLE.CSS
========================================== */


:root {

  --night: #080a16;
  --night-2: #0d1021;
  --night-3: #14182b;

  --gold: #c7a96b;
  --gold-light: #ead7aa;
  --gold-dark: #8e7542;

  --ivory: #f4f0e7;
  --cream: #e9e2d5;

  --lavender: #aaa2bd;
  --sage: #899887;

  --text: #eeeae2;
  --muted: #aaa8b2;
  --dark-text: #252331;

  --border: rgba(234, 215, 170, 0.18);

  --serif: "Cormorant Garamond", serif;
  --sans: "Montserrat", sans-serif;

}


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

* {

  margin: 0;
  padding: 0;

  box-sizing: border-box;

}


html {

  scroll-behavior: smooth;

}


body {

  background: var(--night);

  color: var(--text);

  font-family: var(--sans);

  overflow-x: hidden;

}


img {

  max-width: 100%;

  display: block;

}


button,
a {

  font-family: inherit;

}


button {

  border: 0;

  cursor: pointer;

}


a {

  color: inherit;

  text-decoration: none;

}


.container {

  width: min(
    1180px,
    calc(100% - 40px)
  );

  margin: 0 auto;

}


/* ==========================================
   ESTRELAS
========================================== */

#stars {

  position: fixed;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  opacity: .7;

}


/* ==========================================
   HEADER
========================================== */

.site-header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 1000;

  border-bottom:
    1px solid transparent;

  transition:
    background .4s ease,
    border .4s ease,
    backdrop-filter .4s ease;

}


.site-header.scrolled {

  background:
    rgba(8, 10, 22, .86);

  backdrop-filter:
    blur(18px);

  border-bottom:
    1px solid var(--border);

}


.header-inner {

  min-height: 84px;

  display: flex;

  align-items: center;

  justify-content: space-between;

}


.logo {

  display: flex;

  align-items: center;

  gap: 12px;

}


.logo img {

  width: 48px;

  height: 48px;

  border-radius: 50%;

  object-fit: cover;

}


.logo-text {

  display: flex;

  flex-direction: column;

  line-height: 1;

}


.logo-text strong {

  font-family: var(--serif);

  font-size: 23px;

  font-weight: 600;

  color: var(--gold-light);

}


.logo-text span {

  margin-top: 4px;

  font-size: 8px;

  letter-spacing: 3px;

  text-transform: uppercase;

  color: var(--muted);

}


.desktop-nav {

  display: flex;

  align-items: center;

  gap: 28px;

}


.desktop-nav > a {

  color: #d8d4cf;

  font-size: 11px;

  letter-spacing: 1px;

  text-transform: uppercase;

  transition: color .25s ease;

}


.desktop-nav > a:hover {

  color: var(--gold-light);

}


.desktop-nav .nav-cta {

  padding: 13px 18px;

  border: 1px solid var(--gold);

  color: var(--gold-light);

}


.menu-toggle {

  display: none;

  background: transparent;

  color: var(--gold-light);

}


.mobile-menu {

  display: none;

}


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

.btn {

  min-height: 52px;

  padding:
    0 25px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  font-size: 10px;

  font-weight: 600;

  letter-spacing: 1.5px;

  text-transform: uppercase;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;

}


.btn:hover {

  transform: translateY(-3px);

}


.btn svg {

  width: 16px;

}


.btn-gold {

  background:
    linear-gradient(
      135deg,
      #d9bf87,
      #a8894d
    );

  color: #16151b;

  box-shadow:
    0 10px 35px
    rgba(199,169,107,.18);

}


.btn-gold:hover {

  box-shadow:
    0 15px 45px
    rgba(199,169,107,.28);

}


.btn-outline {

  border:
    1px solid rgba(
      234,
      215,
      170,
      .35
    );

  color: var(--gold-light);

  background:
    rgba(255,255,255,.025);

}


.btn-dark {

  background: var(--night);

  color: var(--gold-light);

}


.btn-large {

  min-width: 250px;

  min-height: 58px;

}


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

.hero {

  min-height: 100vh;

  position: relative;

  overflow: hidden;

  display: flex;

  align-items: center;

  padding:
    130px 0 70px;

  background:

    radial-gradient(
      circle at 75% 45%,
      rgba(101,91,135,.18),
      transparent 28%
    ),

    radial-gradient(
      circle at 20% 20%,
      rgba(76,101,93,.09),
      transparent 30%
    ),

    var(--night);

}


.hero::before {

  content: "";

  position: absolute;

  width: 600px;

  height: 600px;

  border-radius: 50%;

  top: 15%;

  right: -250px;

  background:
    rgba(199,169,107,.035);

  filter: blur(50px);

}


.hero-grid {

  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    1.05fr .95fr;

  align-items: center;

  gap: 70px;

}


.hero-content {

  max-width: 650px;

}


.eyebrow,
.section-kicker {

  display: inline-block;

  color: var(--gold);

  font-size: 9px;

  font-weight: 600;

  letter-spacing: 3px;

  text-transform: uppercase;

}


.hero h1 {

  margin-top: 20px;

  font-family: var(--serif);

  font-size: clamp(
    68px,
    8vw,
    120px
  );

  line-height: .78;

  font-weight: 400;

  letter-spacing: -3px;

}


.hero h1 span {

  display: block;

  color: var(--gold-light);

  font-style: italic;

}


.gold-line {

  width: 80px;

  height: 1px;

  margin: 35px 0 25px;

  background:
    linear-gradient(
      90deg,
      var(--gold),
      transparent
    );

}


.hero-slogan {

  max-width: 590px;

  color: #ddd7cc;

  font-family: var(--serif);

  font-size: 28px;

  line-height: 1.15;

}


.hero-slogan strong {

  color: var(--gold-light);

  font-weight: 500;

}


.hero-description {

  max-width: 520px;

  margin-top: 20px;

  color: var(--muted);

  font-size: 13px;

  line-height: 1.9;

}


.hero-buttons {

  margin-top: 35px;

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

}


.hero-note {

  margin-top: 25px;

  display: flex;

  align-items: center;

  gap: 8px;

  color: #777785;

  font-size: 9px;

  letter-spacing: .8px;

}


.hero-note svg {

  width: 14px;

  color: var(--gold);

}


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

.hero-art {

  min-height: 570px;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

}


.orbit {

  position: absolute;

  border:
    1px solid
    rgba(199,169,107,.18);

  border-radius: 50%;

}


.orbit-one {

  width: 470px;

  height: 470px;

  transform:
    rotate(-25deg)
    scaleY(.55);

}


.orbit-two {

  width: 390px;

  height: 390px;

  transform:
    rotate(45deg)
    scaleY(.55);

  border-color:
    rgba(170,162,189,.15);

}


.moon-halo {

  width: 280px;

  height: 280px;

  position: absolute;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(199,169,107,.12),
      transparent 65%
    );

}


.moon {

  position: relative;

  z-index: 3;

  font-family: var(--serif);

  font-size: 250px;

  line-height: 1;

  color: var(--gold-light);

  text-shadow:
    0 0 80px
    rgba(234,215,170,.22);

  transform:
    rotate(-15deg);

}


.mystic-card {

  position: absolute;

  width: 145px;

  height: 230px;

  border:
    1px solid
    rgba(234,215,170,.4);

  background:
    linear-gradient(
      145deg,
      #17182c,
      #0c0e1b
    );

  box-shadow:
    0 30px 70px
    rgba(0,0,0,.45);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

}


.card-back {

  transform:
    translate(
      120px,
      -65px
    )
    rotate(12deg);

  opacity: .55;

}


.card-front {

  z-index: 4;

  transform:
    translate(
      125px,
      90px
    )
    rotate(12deg);

}


.card-front span {

  color: var(--gold);

  font-size: 34px;

}


.card-front strong {

  margin-top: 25px;

  font-family: var(--serif);

  font-size: 22px;

  letter-spacing: 2px;

}


.card-front small {

  margin-top: 8px;

  color: var(--gold);

  font-size: 7px;

  letter-spacing: 3px;

}


.floating-symbol {

  position: absolute;

  color: var(--gold);

  opacity: .6;

  font-family: var(--serif);

}


.symbol-one {

  top: 70px;

  left: 20%;

  font-size: 28px;

}


.symbol-two {

  right: 10%;

  top: 28%;

  font-size: 24px;

}


.symbol-three {

  left: 15%;

  bottom: 15%;

  font-size: 35px;

}


.hero-bottom {

  position: absolute;

  bottom: 25px;

  left: 50%;

  transform: translateX(-50%);

  z-index: 3;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

}


.hero-bottom span {

  font-size: 7px;

  letter-spacing: 3px;

  color: #686978;

}


.scroll-line {

  width: 1px;

  height: 35px;

  background:
    linear-gradient(
      var(--gold),
      transparent
    );

}


/* ==========================================
   SEÇÕES
========================================== */

.section {

  position: relative;

  z-index: 2;

  padding:
    115px 0;

}


.section-dark {

  background:
    linear-gradient(
      180deg,
      #090b18,
      #0d1020
    );

}


.section-light {

  background:
    #eae5dc;

  color: var(--dark-text);

}


.section-heading {

  max-width: 700px;

  margin:
    0 auto 60px;

  text-align: center;

}


.section-heading h2 {

  margin-top: 14px;

  font-family: var(--serif);

  font-size: clamp(
    45px,
    5vw,
    70px
  );

  font-weight: 400;

  line-height: .95;

}


.section-heading h2 em {

  display: block;

  color: var(--gold);

  font-style: italic;

}


.section-heading p {

  max-width: 580px;

  margin:
    20px auto 0;

  color: var(--muted);

  font-size: 13px;

  line-height: 1.8;

}


.section-light .section-heading p {

  color: #6d6970;

}


/* ==========================================
   SERVIÇOS
========================================== */

.services-grid {

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 14px;

}


.service-card {

  position: relative;

  min-height: 340px;

  padding: 30px;

  border:
    1px solid
    var(--border);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.045),
      rgba(255,255,255,.012)
    );

  transition:
    border .3s ease,
    background .3s ease;

}


.service-card:hover {

  border-color:
    rgba(234,215,170,.42);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.07),
      rgba(255,255,255,.02)
    );

}


.service-card-wide {

  grid-column:
    span 4;

  min-height: 230px;

}


.service-icon {

  color: var(--gold);

  font-family: var(--serif);

  font-size: 38px;

}


.service-number {

  position: absolute;

  top: 28px;

  right: 28px;

  color: #484958;

  font-size: 9px;

  letter-spacing: 2px;

}


.service-card h3 {

  margin-top: 30px;

  font-family: var(--serif);

  color: var(--gold-light);

  font-size: 31px;

  font-weight: 500;

}


.service-card p {

  margin-top: 14px;

  color: var(--muted);

  font-size: 12px;

  line-height: 1.8;

}


.text-button {

  margin-top: 25px;

  padding: 0;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: transparent;

  color: var(--gold);

  font-size: 9px;

  letter-spacing: 1.5px;

  text-transform: uppercase;

}


.text-button svg {

  width: 14px;

  transition:
    transform .25s ease;

}


.text-button:hover svg {

  transform:
    translateX(5px);

}


/* ==========================================
   PLANOS
========================================== */

.plans-grid {

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 15px;

}


.plan {

  position: relative;

  padding: 38px 28px;

  background:
    rgba(255,255,255,.42);

  border:
    1px solid
    rgba(37,35,49,.09);

  transition:
    transform .3s ease,
    box-shadow .3s ease;

}


.plan:hover {

  transform:
    translateY(-7px);

  box-shadow:
    0 25px 50px
    rgba(30,28,35,.1);

}


.plan-featured {

  background:
    var(--night);

  color: white;

  border-color:
    var(--gold-dark);

  transform:
    translateY(-10px);

}


.plan-featured:hover {

  transform:
    translateY(-17px);

}


.featured-label {

  position: absolute;

  top: 0;

  right: 20px;

  padding:
    7px 10px;

  background: var(--gold);

  color: var(--night);

  font-size: 7px;

  font-weight: 700;

  letter-spacing: 1.5px;

}


.plan-symbol {

  color: var(--gold);

  font-family: var(--serif);

  font-size: 30px;

}


.plan-label {

  display: block;

  margin-top: 20px;

  color: var(--gold-dark);

  font-size: 8px;

  font-weight: 700;

  letter-spacing: 2px;

}


.plan-featured .plan-label {

  color: var(--gold);

}


.plan h3 {

  margin-top: 8px;

  font-family: var(--serif);

  font-size: 34px;

  font-weight: 500;

}


.plan p {

  min-height: 60px;

  margin-top: 12px;

  color: #77727a;

  font-size: 11px;

  line-height: 1.7;

}


.plan-featured p {

  color: #aaa8b2;

}


.price {

  margin:
    25px 0;

  font-family: var(--serif);

  font-size: 48px;

  color: var(--dark-text);

}


.plan-featured .price {

  color: var(--gold-light);

}


.price small {

  font-family: var(--sans);

  font-size: 13px;

}


.price.from {

  display: flex;

  flex-direction: column;

  font-size: 36px;

}


.price.from small {

  font-size: 8px;

  color: #77727a;

  text-transform: uppercase;

  letter-spacing: 1px;

}


.plan .btn {

  width: 100%;

}


/* ==========================================
   O QUE RECEBE
========================================== */

.receives {

  margin-top: 55px;

  padding:
    30px;

  border-top:
    1px solid
    rgba(37,35,49,.1);

}


.receives-title {

  margin-bottom: 20px;

  color: var(--dark-text);

  font-family: var(--serif);

  font-size: 27px;

}


.receives-items {

  display: flex;

  flex-wrap: wrap;

  gap: 25px;

}


.receives-items span {

  display: flex;

  align-items: center;

  gap: 8px;

  color: #625e67;

  font-size: 10px;

}


.receives-items svg {

  width: 15px;

  color: var(--gold-dark);

}


/* ==========================================
   LANÇAMENTO
========================================== */

.launch-section {

  position: relative;

  z-index: 2;

  padding:
    115px 0;

  overflow: hidden;

  text-align: center;

  background:

    radial-gradient(
      circle at center,
      rgba(116,97,139,.2),
      transparent 35%
    ),

    #0a0c19;

  border-top:
    1px solid var(--border);

  border-bottom:
    1px solid var(--border);

}


.launch-stars {

  margin-bottom: 20px;

  color: var(--gold);

  letter-spacing: 10px;

}


.launch-inner {

  max-width: 750px;

}


.launch-inner h2 {

  margin-top: 20px;

  font-family: var(--serif);

  font-size: 65px;

  font-weight: 400;

  line-height: .9;

}


.launch-inner h2 em {

  display: block;

  color: var(--gold-light);

  font-style: italic;

}


.launch-inner > p {

  margin-top: 25px;

  color: var(--muted);

  font-size: 13px;

  letter-spacing: 1px;

}


.launch-price {

  margin:
    25px 0;

  display: flex;

  flex-direction: column;

}


.launch-price span {

  color: #777785;

  font-size: 12px;

}


.launch-price strong {

  margin-top: 5px;

  color: var(--gold-light);

  font-family: var(--serif);

  font-size: 68px;

  font-weight: 500;

}


.launch-condition {

  margin-bottom: 30px;

  color: var(--muted);

  font-size: 11px;

}


.launch-condition strong {

  color: var(--gold-light);

}


.launch-inner > small {

  display: block;

  margin-top: 20px;

  color: #686978;

  font-size: 9px;

}


/* ==========================================
   PASSOS
========================================== */

.steps {

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 20px;

}


.step {

  position: relative;

  padding:
    35px 25px;

  border:
    1px solid
    var(--border);

  background:
    rgba(255,255,255,.025);

}


.step-number {

  color: #55576a;

  font-size: 8px;

  letter-spacing: 2px;

}


.step-icon {

  width: 55px;

  height: 55px;

  margin:
    25px 0;

  display: flex;

  align-items: center;

  justify-content: center;

  border:
    1px solid
    rgba(199,169,107,.35);

  color: var(--gold);

}


.step-icon svg {

  width: 20px;

}


.step h3 {

  color: var(--gold-light);

  font-family: var(--serif);

  font-size: 27px;

  font-weight: 500;

}


.step p {

  margin-top: 12px;

  color: var(--muted);

  font-size: 11px;

  line-height: 1.8;

}


/* ==========================================
   SOBRE
========================================== */

.about-grid {

  display: grid;

  grid-template-columns:
    .8fr 1.2fr;

  align-items: center;

  gap: 100px;

}


.about-art {

  min-height: 500px;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

}


.about-orbit {

  width: 370px;

  height: 370px;

  position: absolute;

  border:
    1px solid
    rgba(142,117,66,.35);

  border-radius: 50%;

  transform:
    rotate(-30deg)
    scaleY(.55);

}


.about-moon {

  position: relative;

  z-index: 2;

  color: var(--gold-dark);

  font-family: var(--serif);

  font-size: 240px;

}


.about-symbol {

  position: absolute;

  right: 20%;

  top: 20%;

  color: var(--gold);

  font-size: 35px;

}


.about-content h2 {

  margin-top: 15px;

  font-family: var(--serif);

  font-size: 60px;

  font-weight: 400;

  line-height: .95;

}


.about-content h2 em {

  display: block;

  color: var(--gold-dark);

}


.about-content > p {

  margin-top: 22px;

  color: #69656d;

  font-size: 13px;

  line-height: 1.9;

}


.about-placeholder {

  margin-top: 30px;

  padding: 22px;

  display: flex;

  gap: 18px;

  border:
    1px solid
    rgba(37,35,49,.1);

}


.about-placeholder > span {

  color: var(--gold-dark);

  font-size: 25px;

}


.about-placeholder strong {

  font-family: var(--serif);

  font-size: 23px;

}


.about-placeholder p {

  margin-top: 5px;

  color: #77727a;

  font-size: 10px;

  line-height: 1.6;

}


/* ==========================================
   TAROT
========================================== */

.tarot-section {

  background:
    #0b0e1b;

}


.tarot-grid {

  display: grid;

  grid-template-columns:
    1fr 1fr;

  align-items: center;

  gap: 100px;

}


.tarot-content h2 {

  margin-top: 18px;

  font-family: var(--serif);

  font-size: 61px;

  font-weight: 400;

  line-height: .95;

}


.tarot-content h2 em {

  display: block;

  color: var(--gold-light);

}


.tarot-content p {

  margin-top: 20px;

  color: var(--muted);

  font-size: 12px;

  line-height: 1.9;

}


.text-link {

  margin-top: 30px;

  display: inline-flex;

  align-items: center;

  gap: 10px;

  color: var(--gold);

  font-size: 10px;

  letter-spacing: 1px;

  text-transform: uppercase;

}


.text-link svg {

  width: 15px;

}


.tarot-visual {

  min-height: 480px;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

}


.tarot-circle {

  width: 370px;

  height: 370px;

  position: absolute;

  border:
    1px solid
    rgba(199,169,107,.2);

  border-radius: 50%;

}


.tarot-card-visual {

  width: 220px;

  height: 340px;

  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  border:
    1px solid
    rgba(234,215,170,.4);

  background:
    linear-gradient(
      150deg,
      #191c31,
      #0c0e1b
    );

  box-shadow:
    0 35px 70px
    rgba(0,0,0,.4);

}


.tarot-card-visual::before {

  content: "";

  position: absolute;

  inset: 12px;

  border:
    1px solid
    rgba(234,215,170,.17);

}


.tarot-card-visual span {

  color: var(--gold-light);

  font-size: 70px;

}


.tarot-card-visual strong {

  margin-top: 25px;

  font-family: var(--serif);

  color: var(--gold-light);

  font-size: 28px;

  letter-spacing: 3px;

}


.tarot-card-visual small {

  margin-top: 7px;

  color: var(--gold);

  font-size: 7px;

  letter-spacing: 4px;

}


.tarot-card-visual i {

  margin-top: 40px;

  color: var(--gold);

  font-style: normal;

}


/* ==========================================
   DEPOIMENTOS
========================================== */

.testimonial-placeholder {

  max-width: 750px;

  margin: 0 auto;

  padding:
    55px 30px;

  text-align: center;

  border:
    1px solid
    rgba(37,35,49,.1);

}


.quote-symbol {

  color: var(--gold-dark);

  font-family: var(--serif);

  font-size: 80px;

  line-height: .5;

}


.testimonial-placeholder p {

  margin-top: 25px;

  font-family: var(--serif);

  font-size: 28px;

}


.testimonial-placeholder span {

  display: block;

  margin-top: 12px;

  color: #77727a;

  font-size: 9px;

}


/* ==========================================
   BLOG
========================================== */

.blog-heading {

  text-align: left;

  margin-left: 0;

}


.blog-heading h2 em {

  display: inline;

}


.blog-grid {

  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 15px;

}


.blog-card {

  padding: 35px;

  min-height: 290px;

  border:
    1px solid
    var(--border);

  background:
    rgba(255,255,255,.025);

}


.blog-card > span {

  color: var(--gold);

  font-size: 8px;

  font-weight: 600;

  letter-spacing: 2px;

}


.blog-card h3 {

  margin-top: 25px;

  color: var(--gold-light);

  font-family: var(--serif);

  font-size: 31px;

  font-weight: 500;

  line-height: 1;

}


.blog-card p {

  margin-top: 15px;

  color: var(--muted);

  font-size: 11px;

  line-height: 1.8;

}


.blog-card a {

  margin-top: 25px;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: var(--gold);

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: 1px;

}


.blog-card svg {

  width: 13px;

}


/* ==========================================
   CTA FINAL
========================================== */

.final-cta {

  position: relative;

  z-index: 2;

  padding:
    120px 0;

  text-align: center;

  background:

    radial-gradient(
      circle at center,
      rgba(101,91,135,.2),
      transparent 35%
    ),

    #080a16;

}


.final-cta-inner {

  max-width: 700px;

}


.moon-mini {

  display: block;

  color: var(--gold);

  font-family: var(--serif);

  font-size: 55px;

}


.final-cta h2 {

  margin-top: 10px;

  font-family: var(--serif);

  font-size: 65px;

  font-weight: 400;

  line-height: .9;

}


.final-cta h2 em {

  display: block;

  color: var(--gold-light);

}


.final-cta p {

  max-width: 500px;

  margin:
    25px auto 30px;

  color: var(--muted);

  font-size: 12px;

  line-height: 1.8;

}


/* ==========================================
   WHATSAPP FLUTUANTE
========================================== */

.floating-whatsapp {

  position: fixed;

  right: 22px;

  bottom: 22px;

  z-index: 999;

  min-height: 52px;

  padding:
    0 18px;

  display: flex;

  align-items: center;

  gap: 9px;

  background:
    #1f9d62;

  color: white;

  border-radius: 30px;

  box-shadow:
    0 10px 35px
    rgba(0,0,0,.35);

  font-size: 10px;

  font-weight: 600;

  letter-spacing: .5px;

  transition:
    transform .25s ease,
    box-shadow .25s ease;

}


.floating-whatsapp:hover {

  transform:
    translateY(-4px);

  box-shadow:
    0 15px 40px
    rgba(0,0,0,.45);

}


.floating-whatsapp svg {

  width: 19px;

}


/* ==========================================
   FOOTER
========================================== */

.footer {

  position: relative;

  z-index: 2;

  background:
    #060811;

  border-top:
    1px solid var(--border);

}


.footer-grid {

  padding:
    70px 0;

  display: grid;

  grid-template-columns:
    1.6fr
    repeat(3, 1fr);

  gap: 50px;

}


.footer-logo {

  color: var(--gold-light);

  font-family: var(--serif);

  font-size: 32px;

}


.footer-logo span {

  display: block;

  color: var(--gold);

  font-style: italic;

}


.footer-brand p {

  max-width: 300px;

  margin-top: 15px;

  color: #737584;

  font-size: 10px;

  line-height: 1.8;

}


.footer-links {

  display: flex;

  flex-direction: column;

  gap: 12px;

}


.footer-links strong {

  margin-bottom: 8px;

  color: var(--gold-light);

  font-family: var(--serif);

  font-size: 20px;

  font-weight: 500;

}


.footer-links a {

  color: #777985;

  font-size: 9px;

  transition:
    color .2s ease;

}


.footer-links a:hover {

  color: var(--gold-light);

}


.footer-bottom {

  border-top:
    1px solid var(--border);

}


.footer-bottom .container {

  min-height: 65px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

}


.footer-bottom span {

  color: #5d5f6c;

  font-size: 8px;

}


/* ==========================================
   RESPONSIVO
========================================== */

@media (
  max-width: 1000px
) {

  .desktop-nav {

    display: none;

  }


  .menu-toggle {

    display: block;

  }


  .mobile-menu {

    padding:
      15px 20px 25px;

    flex-direction: column;

    gap: 15px;

    background:
      rgba(8,10,22,.97);

    border-top:
      1px solid var(--border);

  }


  .mobile-menu.open {

    display: flex;

  }


  .mobile-menu a {

    padding: 10px 0;

    color: var(--gold-light);

    font-size: 10px;

    text-transform: uppercase;

    letter-spacing: 1.5px;

  }


  .hero-grid {

    grid-template-columns: 1fr;

    text-align: center;

  }


  .hero-content {

    margin: 0 auto;

  }


  .gold-line {

    margin:
      30px auto 25px;

  }


  .hero-buttons {

    justify-content: center;

  }


  .hero-note {

    justify-content: center;

  }


  .hero-art {

    min-height: 450px;

  }


  .services-grid {

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

  }


  .service-card-wide {

    grid-column:
      span 2;

  }


  .plans-grid {

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

  }


  .steps {

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

  }


  .about-grid {

    grid-template-columns: 1fr;

    gap: 30px;

  }


  .about-art {

    min-height: 350px;

  }


  .tarot-grid {

    grid-template-columns: 1fr;

    gap: 40px;

  }


  .blog-grid {

    grid-template-columns: 1fr;

  }


  .footer-grid {

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

  }

}


@media (
  max-width: 600px
) {

  .container {

    width:
      min(
        100% - 28px,
        1180px
      );

  }


  .header-inner {

    min-height: 72px;

  }


  .logo img {

    width: 42px;

    height: 42px;

  }


  .logo-text strong {

    font-size: 20px;

  }


  .hero {

    padding:
      110px 0 60px;

  }


  .hero h1 {

    font-size: 67px;

    letter-spacing: -2px;

  }


  .hero-slogan {

    font-size: 24px;

  }


  .hero-buttons {

    flex-direction: column;

  }


  .hero-buttons .btn {

    width: 100%;

  }


  .hero-art {

    min-height: 390px;

  }


  .orbit-one {

    width: 320px;

    height: 320px;

  }


  .orbit-two {

    width: 270px;

    height: 270px;

  }


  .moon {

    font-size: 180px;

  }


  .mystic-card {

    width: 110px;

    height: 175px;

  }


  .card-front {

    transform:
      translate(
        75px,
        65px
      )
      rotate(12deg);

  }


  .card-back {

    transform:
      translate(
        70px,
        -45px
      )
      rotate(12deg);

  }


  .section {

    padding:
      80px 0;

  }


  .section-heading {

    margin-bottom: 40px;

  }


  .section-heading h2 {

    font-size: 49px;

  }


  .services-grid {

    grid-template-columns: 1fr;

  }


  .service-card-wide {

    grid-column:
      span 1;

  }


  .plans-grid {

    grid-template-columns: 1fr;

  }


  .plan-featured {

    transform: none;

  }


  .plan-featured:hover {

    transform:
      translateY(-7px);

  }


  .steps {

    grid-template-columns: 1fr;

  }


  .about-content h2,
  .tarot-content h2 {

    font-size: 49px;

  }


  .launch-inner h2,
  .final-cta h2 {

    font-size: 51px;

  }


  .launch-price strong {

    font-size: 58px;

  }


  .tarot-visual {

    min-height: 380px;

  }


  .tarot-circle {

    width: 290px;

    height: 290px;

  }


  .tarot-card-visual {

    width: 180px;

    height: 280px;

  }


  .footer-grid {

    grid-template-columns: 1fr;

    gap: 35px;

  }


  .footer-bottom .container {

    padding:
      20px 0;

    flex-direction: column;

    align-items: flex-start;

  }


  .floating-whatsapp {

    right: 14px;

    bottom: 14px;

    width: 52px;

    height: 52px;

    min-height: 52px;

    padding: 0;

    justify-content: center;

    border-radius: 50%;

  }


  .floating-whatsapp span {

    display: none;

  }

}