/* Estilos propios de la portada (index.html) que no conviene hacer con clases de Tailwind. */

.portada-hero {
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 229, 138, .6), transparent 38%),
    radial-gradient(circle at 92% 80%, rgba(255, 214, 226, .9), transparent 42%),
    linear-gradient(160deg, #e6dbff, #d3f4e4);
}

.portada-titulo { text-shadow: 3px 3px 0 #ffe58a; text-wrap: balance; }

.portada-entra > * { animation: portada-entra .9s cubic-bezier(.2, .9, .3, 1.2) both; }
.portada-entra > :nth-child(2) { animation-delay: .08s; }
.portada-entra > :nth-child(3) { animation-delay: .16s; }
.portada-entra > :nth-child(n+4) { animation-delay: .26s; }
@keyframes portada-entra { from { opacity: 0; transform: translateY(24px); } }

/* Marco de celular para el ejemplo en vivo */
.celular {
  width: min(340px, 100%);
  height: min(680px, 85dvh);
  border: 10px solid #6a5484;
  border-radius: 2.6rem;
  background: #6a5484;
  box-shadow: 0 30px 60px rgba(106, 84, 132, .3);
  transform: rotate(2deg);
}

/* Pétalos que caen dentro de la portada */
.portada-petalo {
  position: absolute;
  top: -30px;
  z-index: -1;
  border-radius: 60% 0 60% 0;
  pointer-events: none;
  animation: portada-cae linear infinite;
}
@keyframes portada-cae {
  to { transform: translate(var(--deriva, 0), 110dvh) rotate(540deg); opacity: .6; }
}

@media (prefers-reduced-motion: reduce) {
  .portada-entra > *, .portada-petalo, .cumple-tallo { animation: none !important; }
  .portada-petalo { display: none; }
}