:root {
  --module-width: 42.8rem;
}


.body {
  font-size: 1.6rem;
  display: grid;
  place-items: center;
  animation: gradient 10s ease infinite;
  background-size: 200% 200%;
}




.main {
  /*background: #FFFFFF;
  box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.8);
  border-radius: 5px;*/
  padding: 4.8rem 6.4rem 6.4rem;
  max-width: var(--module-width);
  max-width: 42.8rem;
}

}

.screen01, #scr1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.screen01 h1{
  color: #d20688 !important;
  font-size: 2.4rem !important;
  line-height: 2.9rem;
  text-align: center;
}

.screen01 p {
  margin: 1.4rem 0 2rem !important;
  font-size: 1.5rem !important;
}

.screen01 svg {
  cursor: pointer;
}

.screen02 {
  display: flex;
  flex-direction: column;
  align-items: center;

}

.screen02 h3 {
  color: #1eb152 !important;
    font-size: 2.4rem !important;
  line-height: 2.9rem;
  width: 29.7rem;
  text-align: center;
}

.screen02 .cookie-response {
  width: 29.3rem;
  margin: 1.7rem 0;
  padding: 1rem !important;
  background: #dd016b;
  box-shadow: 2px 2px 2px rgba(85, 85, 85, 0.5);
  animation: going-up 3s;

}

.screen02 p {
  font-family: 'Dancing Script', cursive;
  font-size: 2.4rem !important;
  line-height: 2.9rem !important;
  text-align: center;
  color: #FFFFFF !important;
}

.screen02 svg {
  width: 30rem;
  height: 20rem;
  margin-bottom: 1.7rem;
}

.screen02 button {
  border: none;
  padding: 1rem;
  width: 19rem;
  height: 4rem;
  background: #FF9500;
  border-radius: .4rem;
  font-weight: 700;
  font-size: 1rem;
  color: #FFFFFF;
  transition: background .2s;
  cursor: pointer;
}

.screen02 button.fc-btn--download {
  background: #0091ae;
  color: #FFFFFF;
  transition: background .2s;
  cursor: pointer;
}


.screen02 button:hover {
  background: #da830a;
}

.hide {
  display: none;
}

.shake:hover {
  animation: shaker .5s;
  animation-iteration-count: infinite;
}


/* ANIMATIONS */

@keyframes shaker {
  0%{transform: translate(1px, 1px) rotate(0deg);}
  10%{transform: translate(-1px, -2px) rotate(-1deg);}
  20%{transform: translate(-2px, 0px) rotate(1deg);}
  30%{transform: translate(2px, 2px) rotate(0deg);}
  40%{transform: translate(1px, -1px) rotate(1deg);}
  50%{transform: translate(-1px, 2px) rotate(-1deg);}
  60%{transform: translate(-2px, 1px) rotate(0deg);}
  70%{transform: translate(2px, 1px) rotate(-1deg);}
  80%{transform: translate(-1px, -1px) rotate(1deg);}
  90%{transform: translate(1px, 2px) rotate(0deg);}
  100%{transform: translate(1px, -2px) rotate(2deg);}
}

@keyframes going-up {
  0% {
    transform: translateY(150px) scale( 0.1, 0.1 );
  }

  100% {
    transform: scale( 1, 1 ) translateY(0px);
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%
  }
  100% {
    background-position: 0% 50%;
  }
}


/* ===============================
   Fortune Cookie – Filters Panel
   =============================== */

.fc-filters {
  display: flex;
  gap: 1.2rem;
  padding: 1.6rem 2rem;
  margin-bottom: 2.4rem;
  background: rgba(255, 255, 255, 0.92);
  border-radius: .8rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  backdrop-filter: blur(6px);

  /* Centrado independiente del .main */
  max-width: var(--module-width);
  width: calc(100% - 3rem);
  margin-left: auto;
  margin-right: auto;
}

/* Responsive stack */
@media (max-width: 520px) {
  .fc-filters {
    flex-direction: column;
  }
}

/* Select base */
.fc-filters select {
  flex: 1;
  appearance: none;
  border: 1px solid #d6d6e7;
  border-radius: .6rem;
  padding: 1.2rem 1.4rem;
  font-size: 1.4rem;
  font-family: 'DM Sans', sans-serif;
  color: #34355B;
  background-color: #fff;
  cursor: pointer;
  transition: all .2s ease;

  /* Flecha custom */
  background-image:
    linear-gradient(45deg, transparent 50%, #666 50%),
    linear-gradient(135deg, #666 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

/* Hover */
.fc-filters select:hover {
  border-color: #BB00FF;
}

/* Focus */
.fc-filters select:focus {
  outline: none;
  border-color: #190361;
  box-shadow: 0 0 0 2px rgba(25, 3, 97, 0.15);
}

/* Disabled (por si luego lo usas) */
.fc-filters select:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* Placeholder option */
.fc-filters select option[value=""] {
  color: #999;
}

@media only screen and (max-width: 750px) {
.main {
    padding: 1rem;
    max-width: 100%;
}
  
  .screen02 {
    width: 300px;
}
  
  .screen02 .cookie-response {
    width: 130%;
  }
  
  .screen02 svg {
    width: 25rem;
  }
  
  .screen02 h3 {
    padding: 0 20px;
    line-height: 2.9rem !important;
    width: 130%;
}
  
  
  
  /*Boton Compartir*/
  .fc-actions{
  display:flex;
    gap: 20px;
  justify-content:center;
  margin-top: 1rem;
}

.fc-btn{
  border: none;
  padding: 1.2rem 1.4rem;
  border-radius: .6rem;
  font-weight: 800;
  font-size: 1.4rem;
  cursor: pointer;
  transition: transform .08s ease, opacity .2s ease;
}

.fc-btn:active{ transform: scale(.98); }
.fc-btn:hover{ opacity: .92; }

.fc-btn--download{
  background: #FF9500;
  color: #fff;
}

@media (max-width: 520px){
  .fc-btn{ width: 100%; max-width: 280px; }
}