/* =====================================================
   VARIABLES
   ===================================================== */

:root {

  --bg: #f7e8f2;
  --bg-secondary: #eee5f7;

  --pink: #f3a9c8;
  --pink-strong: #e77eae;

  --lilac: #c8b7e8;

  --yellow: #f8df91;

  --green: #b9dcb8;

  --black: #17151a;
  --white: #fffafc;

  --shadow: 5px;

}


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

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  margin: 0;

  min-height: 100vh;

  font-family:
    "Trebuchet MS",
    Arial,
    sans-serif;

  background:
    radial-gradient(
      circle at top left,
      #fff7fb 0%,
      var(--bg) 45%,
      #eee8f8 100%
    );

  color: var(--black);

}


/* =====================================================
   APP
   ===================================================== */

.app {

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  position: relative;

  overflow: hidden;

}


/* =====================================================
   TOPBAR
   ===================================================== */

.topbar {

  width: 100%;

  padding:
    22px
    clamp(20px, 5vw, 70px);

  display: flex;

  align-items: center;

  justify-content: space-between;

  position: relative;

  z-index: 10;

}


.brand {

  border: 0;

  background: transparent;

  padding: 0;

  font-size: 15px;

  font-weight: 900;

  letter-spacing: 2px;

  color: var(--black);

  cursor: pointer;

}


.top-reset {

  border: 0;

  background: transparent;

  color: var(--black);

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 1px;

  cursor: pointer;

  text-transform: uppercase;

}


.top-reset:hover {

  color: var(--pink-strong);

}


/* =====================================================
   PANTALLAS
   ===================================================== */

.screen {

  display: none;

  flex: 1;

  width: 100%;

}


.screen.is-active {

  display: flex;

}


/* =====================================================
   HOME
   ===================================================== */

.screen-home {

  min-height: 70vh;

  align-items: center;

  justify-content: center;

  text-align: center;

  position: relative;

}


.home-content {

  width: min(700px, 90%);

  position: relative;

  z-index: 2;

}


.eyebrow {

  margin: 0 0 18px;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 2px;

  text-transform: uppercase;

}


.home-content h1 {

  margin: 0;

  font-size: clamp(42px, 8vw, 78px);

  line-height: .95;

  letter-spacing: -3px;

}


.lead {

  margin: 28px 0;

  font-size: clamp(17px, 3vw, 21px);

  line-height: 1.55;

}


.microcopy {

  margin-top: 18px;

  font-size: 12px;

  opacity: .6;

}


/* =====================================================
   BOTÓN REVELAR
   ===================================================== */

.reveal-button {

  border: 3px solid var(--black);

  background: var(--pink);

  color: var(--black);

  padding: 18px 48px;

  border-radius: 999px;

  font-size: 16px;

  font-weight: 900;

  letter-spacing: 2px;

  cursor: pointer;

  box-shadow:
    var(--shadow)
    var(--shadow)
    0
    var(--black);

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

}


.reveal-button:hover {

  transform:
    translate(
      2px,
      2px
    );

  box-shadow:
    3px
    3px
    0
    var(--black);

}


.reveal-button:active {

  transform:
    translate(
      5px,
      5px
    );

  box-shadow:
    0
    0
    0
    var(--black);

}


/* =====================================================
   DOODLES
   ===================================================== */

.doodle {

  position: absolute;

  user-select: none;

  pointer-events: none;

}


.doodle-star {

  font-size: 30px;

}


.star-one {

  top: 20%;

  left: 12%;

  animation:
    floatDoodle
    4s
    ease-in-out
    infinite;

}


.star-two {

  right: 13%;

  bottom: 22%;

  animation:
    floatDoodle
    5s
    ease-in-out
    infinite reverse;

}


.heart-one {

  right: 20%;

  top: 25%;

  font-size: 35px;

  transform: rotate(-15deg);

}


.dot-one {

  left: 22%;

  bottom: 27%;

  font-size: 25px;

}


@keyframes floatDoodle {

  0%,
  100% {
    transform:
      translateY(0)
      rotate(0deg);
  }

  50% {
    transform:
      translateY(-10px)
      rotate(8deg);
  }

}


/* =====================================================
   RESPUESTA
   ===================================================== */

.screen-answer {

  align-items: center;

  justify-content: center;

  text-align: center;

}


.answer-content {

  width: min(
    650px,
    92%
  );

  padding:
    30px
    0
    60px;

}


.thinking {

  min-height: 120px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

}


.thinking p {

  margin: 0;

  font-size: 14px;

  letter-spacing: 1px;

}


.dots {

  margin-top: 10px;

  font-size: 28px;

  letter-spacing: 6px;

}


.answer-result {

  display: flex;

  flex-direction: column;

  align-items: center;

}


.answer-label {

  margin:
    0
    0
    20px;

  font-size: 13px;

  font-weight: 800;

  letter-spacing: 2px;

}


.answer-circle {

  width: clamp(
    210px,
    42vw,
    300px
  );

  aspect-ratio: 1;

  border-radius: 50%;

  background: var(--yellow);

  border: 3px solid var(--black);

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow:
    7px
    7px
    0
    var(--black);

  transform: rotate(-2deg);

}


.answer-circle h2 {

  margin: 0;

  font-size: clamp(
    38px,
    8vw,
    65px
  );

  letter-spacing: -2px;

}


/* =====================================================
   NOTA
   ===================================================== */

.answer-note {

  margin:
    30px
    0
    25px;

  font-size: 16px;

  opacity: .75;

}


/* =====================================================
   INVITACIÓN AL ORÁCULO
   ===================================================== */

.oracle-invitation {

  width: min(
    440px,
    100%
  );

  border: 0;

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

  border-radius: 18px;

  padding:
    15px
    20px;

  display: grid;

  grid-template-columns:
    auto
    1fr
    auto;

  grid-template-rows:
    auto
    auto;

  column-gap: 10px;

  text-align: left;

  cursor: pointer;

  color: var(--black);

  transition:
    transform .2s ease,
    background .2s ease;

}


.oracle-invitation:hover {

  transform:
    translateY(-3px);

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

}


.invitation-star {

  grid-row: 1 / 3;

  align-self: center;

  font-size: 20px;

}


.oracle-invitation span:nth-child(2) {

  font-size: 14px;

  font-weight: 800;

}


.oracle-invitation small {

  margin-top: 3px;

  font-size: 11px;

  opacity: .65;

}


.invitation-arrow {

  grid-column: 3;

  grid-row: 1 / 3;

  align-self: center;

  font-size: 20px;

}


/* =====================================================
   BOTÓN OTRA PREGUNTA
   ===================================================== */

.again-button {

  margin-top: 28px;

  border: 0;

  background: transparent;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 1.5px;

  cursor: pointer;

  color: var(--black);

  text-transform: uppercase;

}


.again-button:hover {

  text-decoration: underline;

}


/* =====================================================
   ORÁCULO
   ===================================================== */

.screen-oracle {

  align-items: center;

  justify-content: center;

  text-align: center;

}


.oracle-content {

  width: min(
    700px,
    92%
  );

  padding:
    20px
    0
    60px;

}


.back-button {

  border: 0;

  background: transparent;

  font-size: 12px;

  cursor: pointer;

  margin-bottom: 35px;

  opacity: .65;

}


.back-button:hover {

  opacity: 1;

}


.oracle-content h2 {

  max-width: 600px;

  margin:
    0
    auto
    20px;

  font-size: clamp(
    32px,
    6vw,
    54px
  );

  line-height: 1.05;

  letter-spacing: -2px;

}


.oracle-main-text {

  max-width: 530px;

  margin:
    0
    auto
    30px;

  line-height: 1.6;

  font-size: 16px;

}


/* =====================================================
   TARJETA ORÁCULO
   ===================================================== */

.oracle-card {

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

  border:
    2px
    solid
    var(--black);

  border-radius: 24px;

  padding:
    30px
    clamp(
      22px,
      5vw,
      45px
    );

  box-shadow:
    6px
    6px
    0
    var(--black);

}


.oracle-card-title {

  margin-top: 0;

  font-size: 12px;

  font-weight: 900;

  letter-spacing: 2px;

}


.oracle-card > p {

  line-height: 1.6;

}


.oracle-highlight {

  padding:
    15px;

  background:
    var(--bg-secondary);

  border-radius: 15px;

}


/* =====================================================
   PAGOS
   ===================================================== */

.payment-grid {

  display: grid;

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

  gap: 15px;

  margin-top: 25px;

}


.payment-card {

  text-decoration: none;

  color: var(--black);

  border:
    2px
    solid
    var(--black);

  border-radius: 18px;

  padding:
    20px
    15px;

  display: flex;

  flex-direction: column;

  gap: 5px;

  background: var(--pink);

  transition:
    transform .2s ease;

}


.payment-card:nth-child(2) {

  background: var(--lilac);

}


.payment-card:hover {

  transform:
    translateY(-4px);

}


.payment-card span {

  font-size: 10px;

  font-weight: 800;

  text-transform: uppercase;

  letter-spacing: 1px;

}


.payment-card strong {

  font-size: 16px;

}


.payment-card small {

  font-size: 11px;

  opacity: .7;

}


/* =====================================================
   FORMULARIO
   ===================================================== */

.after-payment {

  margin-top: 30px;

}


.divider {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 20px;

  font-size: 10px;

  text-transform: uppercase;

  letter-spacing: 1px;

  opacity: .6;

}


.divider::before,
.divider::after {

  content: "";

  flex: 1;

  height: 1px;

  background: var(--black);

  opacity: .25;

}


.after-payment p {

  font-size: 13px;

  line-height: 1.5;

}


.form-button {

  display: inline-block;

  margin-top: 10px;

  padding:
    13px
    25px;

  border-radius: 999px;

  background: var(--black);

  color: white;

  text-decoration: none;

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 1px;

}


.form-button:hover {

  opacity: .8;

}


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

.footer {

  padding:
    20px
    clamp(
      20px,
      5vw,
      70px
    );

  display: flex;

  justify-content: space-between;

  gap: 20px;

  font-size: 10px;

  letter-spacing: .5px;

  opacity: .55;

}


/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (
  max-width: 600px
) {

  .topbar {

    padding:
      18px
      20px;

  }


  .top-reset {

    font-size: 10px;

  }


  .home-content h1 {

    letter-spacing: -2px;

  }


  .star-one {

    left: 6%;

  }


  .star-two {

    right: 6%;

  }


  .heart-one {

    right: 8%;

  }


  .payment-grid {

    grid-template-columns: 1fr;

  }


  .oracle-card {

    box-shadow:
      4px
      4px
      0
      var(--black);

  }


  .footer {

    flex-direction: column;

    align-items: center;

  }

}


/* =====================================================
   ANIMACIONES
   ===================================================== */

@keyframes thinkingPulse {

  0%,
  100% {
    opacity: .4;
  }

  50% {
    opacity: 1;
  }

}


.thinking-animation {

  animation:
    thinkingPulse
    .9s
    ease-in-out
    infinite;

}


@keyframes answerPop {

  0% {

    transform:
      scale(.7)
      rotate(-8deg);

    opacity: 0;

  }

  70% {

    transform:
      scale(1.05)
      rotate(-2deg);

  }

  100% {

    transform:
      scale(1)
      rotate(-2deg);

    opacity: 1;

  }

}


.answer-pop {

  animation:
    answerPop
    .7s
    ease-out
    both;

}