:root {
 
  --fondo-1: #fff0f5;
  --fondo-2: #ffd9e5;
 
  --texto: #321d27;
  --suave: #805c68;
 
  --rosa: #e83e70;
  --rosa-oscuro: #c92758;
 
}
 
 
* {
 
  box-sizing:
    border-box;
 
}
 
 
html,
body {
 
  margin: 0;
 
  min-height: 100%;
 
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;
 
  color:
    var(--texto);
 
}
 
 
body {
 
  min-height:
    100svh;
 
  overflow-x:
    hidden;
 
  background:
 
    radial-gradient(
      circle at 20% 10%,
      rgba(255,255,255,.85)
      0 8%,
      transparent 25%
    ),
 
    radial-gradient(
      circle at 85% 80%,
      rgba(255,255,255,.65)
      0 7%,
      transparent 24%
    ),
 
    linear-gradient(
      145deg,
      var(--fondo-1),
      var(--fondo-2)
    );
 
}
 
 
/* ==========================
   PÁGINA
========================== */
 
.pagina {
 
  min-height:
    100svh;
 
  display:
    grid;
 
  place-items:
    center;
 
  padding:
    22px;
 
}
 
 
/* ==========================
   TARJETA
========================== */
 
.tarjeta {
 
  width:
    min(100%, 390px);
 
  padding:
    34px 24px 28px;
 
  text-align:
    center;
 
  background:
    rgba(255,255,255,.84);
 
  border:
    1px solid
    rgba(255,255,255,.95);
 
  border-radius:
    28px;
 
  box-shadow:
    0 18px 55px
    rgba(100,30,55,.16);
 
  backdrop-filter:
    blur(12px);
 
}
 
 
/* ==========================
   CORAZÓN
========================== */
 
.corazon {
 
  font-size:
    52px;
 
  line-height:
    1;
 
  margin-bottom:
    18px;
 
  animation:
    latido
    1.2s
    ease-in-out
    infinite;
 
}
 
 
/* ==========================
   TEXTO
========================== */
 
.eyebrow {
 
  margin:
    0 0 10px;
 
  color:
    var(--suave);
 
  font-size:
    14px;
 
  font-weight:
    700;
 
  letter-spacing:
    .04em;
 
}
 
 
h1 {
 
  margin:
    0;
 
  font-size:
    clamp(
      30px,
      8vw,
      42px
    );
 
  line-height:
    1.08;
 
  letter-spacing:
    -1px;
 
}
 
 
.subtitulo {
 
  margin:
    16px 0 24px;
 
  color:
    var(--suave);
 
  font-size:
    16px;
 
  line-height:
    1.45;
 
}
 
 
/* ==========================
   ZONA BOTONES
========================== */
 
.zona-botones {
 
  position:
    relative;
 
  width:
    100%;
 
  height:
    175px;
 
  display:
    flex;
 
  align-items:
    flex-start;
 
  justify-content:
    center;
 
  gap:
    14px;
 
  padding-top:
    8px;
 
}
 
 
/* ==========================
   BOTONES
========================== */
 
.boton {
 
  min-width:
    120px;
 
  min-height:
    52px;
 
  border:
    0;
 
  border-radius:
    16px;
 
  padding:
    12px 20px;
 
  font-size:
    17px;
 
  font-weight:
    800;
 
  cursor:
    pointer;
 
  -webkit-tap-highlight-color:
    transparent;
 
  touch-action:
    manipulation;
 
}
 
 
/* ==========================
   SÍ
========================== */
 
.si {
 
  position:
    relative;
 
  z-index:
    2;
 
  color:
    white;
 
  background:
    linear-gradient(
      135deg,
      var(--rosa),
      var(--rosa-oscuro)
    );
 
  box-shadow:
    0 9px 20px
    rgba(201,39,88,.28);
 
}
 
 
.si:active {
 
  transform:
    scale(.94);
 
}
 
 
.ganador {
 
  animation:
    ganador
    .65s
    ease-in-out
    2;
 
}
 
 
/* ==========================
   NO
========================== */
 
.no {
 
  z-index:
    3;
 
  color:
    #5d3a46;
 
  background:
    #ffffff;
 
  box-shadow:
    0 8px 20px
    rgba(60,20,35,.12);
 
  transform-origin:
    center;
 
}
 
 
/* ==========================
   NIVEL 1
========================== */
 
.nivel1 {
 
  animation:
    nivel1
    .25s
    ease-out;
 
}
 
 
/* ==========================
   NIVEL 2
========================== */
 
.nivel2 {
 
  animation:
    nivel2
    .32s
    cubic-bezier(.2,1.7,.4,1);
 
}
 
 
/* ==========================
   NIVEL 3
========================== */
 
.nivel3 {
 
  animation:
    nivel3
    .38s
    cubic-bezier(.15,2,.35,1);
 
}
 
 
/* ==========================
   NIVEL 4
========================== */
 
.nivel4 {
 
  animation:
    nivel4
    .43s
    cubic-bezier(.1,2.3,.3,1);
 
}
 
 
/* ==========================
   NIVEL 5
========================== */
 
.nivel5 {
 
  animation:
    nivel5
    .5s
    cubic-bezier(.1,2.5,.25,1);
 
}
 
 
/* ==========================
   FINAL BOSS
========================== */
 
.nivel6 {
 
  animation:
    finalBoss
    .6s
    cubic-bezier(.05,2.8,.2,1);
 
}
 
 
/* ==========================
   ANIMACIONES
========================== */
 
@keyframes nivel1 {
 
  0% {
    transform:
      scale(1);
  }
 
  50% {
    transform:
      scale(.9)
      rotate(-5deg);
  }
 
  100% {
    transform:
      scale(1);
  }
 
}
 
 
@keyframes nivel2 {
 
  0% {
    transform:
      scale(1)
      rotate(0);
  }
 
  30% {
    transform:
      scale(.82)
      rotate(-12deg);
  }
 
  65% {
    transform:
      scale(1.1)
      rotate(10deg);
  }
 
  100% {
    transform:
      scale(1)
      rotate(0);
  }
 
}
 
 
@keyframes nivel3 {
 
  0% {
    transform:
      scale(1);
  }
 
  20% {
    transform:
      scale(.75)
      rotate(-18deg);
  }
 
  45% {
    transform:
      scale(1.15)
      rotate(20deg);
  }
 
  70% {
    transform:
      scale(.85)
      rotate(-15deg);
  }
 
  100% {
    transform:
      scale(1)
      rotate(0);
  }
 
}
 
 
@keyframes nivel4 {
 
  0% {
    transform:
      scale(1)
      rotate(0);
  }
 
  15% {
    transform:
      scale(.65)
      rotate(-25deg);
  }
 
  35% {
    transform:
      scale(1.25)
      rotate(25deg);
  }
 
  55% {
    transform:
      scale(.72)
      rotate(-22deg);
  }
 
  75% {
    transform:
      scale(1.18)
      rotate(18deg);
  }
 
  100% {
    transform:
      scale(1)
      rotate(0);
  }
 
}
 
 
/* ==========================
   NIVEL 5
========================== */
 
@keyframes nivel5 {
 
  0% {
    transform:
      scale(1)
      rotate(0);
  }
 
  15% {
    transform:
      scale(.55)
      rotate(-30deg);
  }
 
  30% {
    transform:
      scale(1.3)
      rotate(30deg);
  }
 
  45% {
    transform:
      scale(.65)
      rotate(-28deg);
  }
 
  60% {
    transform:
      scale(1.25)
      rotate(24deg);
  }
 
  75% {
    transform:
      scale(.8)
      rotate(-18deg);
  }
 
  100% {
    transform:
      scale(1)
      rotate(0);
  }
 
}
 
 
/* ==========================
   FINAL BOSS
========================== */
 
@keyframes finalBoss {
 
  0% {
 
    transform:
      scale(1)
      rotate(0);
  }
 
  10% {
 
    transform:
      scale(.45)
      rotate(-35deg);
  }
 
  25% {
 
    transform:
      scale(1.4)
      rotate(35deg);
  }
 
  40% {
 
    transform:
      scale(.55)
      rotate(-30deg);
  }
 
  55% {
 
    transform:
      scale(1.35)
      rotate(28deg);
  }
 
  70% {
 
    transform:
      scale(.65)
      rotate(-22deg);
  }
 
  85% {
 
    transform:
      scale(1.2)
      rotate(15deg);
  }
 
  100% {
 
    transform:
      scale(1)
      rotate(0);
  }
 
}
 
 
/* ==========================
   MENSAJE
========================== */
 
.mensaje {
 
  min-height:
    48px;
 
  margin:
    4px 0 0;
 
  color:
    var(--rosa-oscuro);
 
  font-size:
    14px;
 
  font-weight:
    700;
 
  line-height:
    1.35;
 
}
 
 
/* ==========================
   CONTADOR
========================== */
 
.contador {
 
  min-height:
    20px;
 
  margin-top:
    7px;
 
  color:
    #a47785;
 
  font-size:
    11px;
 
  font-weight:
    600;
 
}
 
 
/* ==========================
   CORAZONES FINALES
========================== */
 
.corazon-volador {
 
  position:
    fixed;
 
  bottom:
    -40px;
 
  z-index:
    20;
 
  pointer-events:
    none;
 
  animation:
    subir
    2.5s
    ease-out
    forwards;
 
}
 
 
@keyframes subir {
 
  0% {
 
    opacity:
      0;
 
    transform:
      translateY(0)
      rotate(0)
      scale(.7);
 
  }
 
  15% {
 
    opacity:
      1;
 
  }
 
  100% {
 
    opacity:
      0;
 
    transform:
      translateY(-105svh)
      rotate(35deg)
      scale(1.3);
 
  }
 
}
 
 
/* ==========================
   LATIDO
========================== */
 
@keyframes latido {
 
  0%,
  100% {
 
    transform:
      scale(1);
 
  }
 
  50% {
 
    transform:
      scale(1.12);
 
  }
 
}
 
 
/* ==========================
   RESPONSIVE
========================== */
 
@media (max-width: 340px) {
 
  .pagina {
 
    padding:
      14px;
 
  }
 
  .tarjeta {
 
    padding:
      30px 18px 25px;
 
  }
 
  .boton {
 
    min-width:
      108px;
 
  }
 
}
 
 
/* ==========================
   REDUCIR MOVIMIENTO
========================== */
 
@media (prefers-reduced-motion: reduce) {
 
  *,
  *::before,
  *::after {
 
    animation-duration:
      .01ms !important;
 
    animation-iteration-count:
      1 !important;
 
  }
 
}