/* Utilidades de la landing que aun no estaban en css/tailwind.css.
   Se pueden borrar cuando se recompile Tailwind (npm run build-css). */
.gap-6{gap:1.5rem}
.gap-10{gap:2.5rem}
.h-20{height:5rem}
.w-20{width:5rem}
.leading-tight{line-height:1.25}
.max-w-6xl{max-width:72rem}
.mb-10{margin-bottom:2.5rem}
.mt-10{margin-top:2.5rem}
.p-5{padding:1.25rem}
.px-8{padding-left:2rem;padding-right:2rem}
.py-14{padding-top:3.5rem;padding-bottom:3.5rem}
.rounded-2xl{border-radius:1rem}
.shadow{box-shadow:0 1px 3px 0 rgb(0 0 0 / .1),0 1px 2px -1px rgb(0 0 0 / .1)}
.shadow-xl{box-shadow:0 20px 25px -5px rgb(0 0 0 / .1),0 8px 10px -6px rgb(0 0 0 / .1)}
.space-y-5>:not([hidden])~:not([hidden]){margin-top:1.25rem}
.transition-shadow{transition-property:box-shadow;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}
html{scroll-behavior:smooth}
@media (min-width:640px){
  .sm\:inline{display:inline}
  .sm\:text-base{font-size:1rem;line-height:1.5rem}
}
@media (min-width:768px){
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .md\:inline{display:inline}
  .md\:py-16{padding-top:4rem;padding-bottom:4rem}
  .md\:text-5xl{font-size:3rem;line-height:1}
  .md\:text-left{text-align:left}
  .md\:text-xl{font-size:1.25rem;line-height:1.75rem}
}

/* Login por email con código (index.php + js/login-email.js) */
.email-login{margin-top:.25rem}
.email-divider{display:flex;align-items:center;gap:.75rem;color:#9ca3af;font-size:.875rem;margin:.25rem 0 1rem}
.email-divider::before,.email-divider::after{content:"";flex:1;height:1px;background:#e5e7eb}
.email-step[hidden],.email-msg[hidden],#email_open[hidden]{display:none}
.email-secondary-btn,.email-primary-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:1rem 1.5rem;border-radius:.75rem;font-weight:600;font-size:1.125rem;cursor:pointer;transition:all .3s}
/* Mismo contorno, sombra y hover que el botón "Entra con Google" */
.email-secondary-btn{background:#fff;border:2px solid #d1d5db;color:#374151;box-shadow:0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1)}
.email-secondary-btn:hover{transform:scale(1.05);box-shadow:0 20px 25px -5px rgb(0 0 0 / .1),0 8px 10px -6px rgb(0 0 0 / .1)}
.email-secondary-btn i{font-size:1.5rem;margin-right:.75rem;color:#7c3aed}
.email-primary-btn{border:0;color:#fff;background:linear-gradient(to right,#9333ea,#ec4899)}
.email-primary-btn:hover{box-shadow:0 10px 15px -3px rgb(0 0 0 / .15)}
.email-primary-btn:disabled,.email-secondary-btn:disabled{opacity:.6;cursor:default}
.email-step{display:flex;flex-direction:column;gap:.75rem;text-align:center}
.email-step input{width:100%;padding:.85rem 1rem;border:2px solid #d1d5db;border-radius:.75rem;font-size:1rem;text-align:center;outline:none}
.email-step input:focus{border-color:#9333ea;box-shadow:0 0 0 3px rgb(147 51 234 / .15)}
#code_input{font-size:1.75rem;letter-spacing:.5rem;font-weight:600}
.email-hint{font-size:.9rem;color:#4b5563;line-height:1.4}
.email-links{font-size:.875rem;color:#6b7280}
.email-links button{background:none;border:0;padding:0;color:#7c3aed;font-weight:600;cursor:pointer}
.email-links button:disabled{color:#9ca3af;cursor:default}
.email-msg{margin-top:.75rem;font-size:.9rem;color:#b91c1c}

/* Demo animada del móvil bajo el hero (index.php #asi-se-ve). Todo CSS, sin vídeo ni imágenes.
   El estado base es el final de la animación: con prefers-reduced-motion se ve la escena ya resuelta. */
.showcase{position:relative;overflow:hidden;color:#fff;background:linear-gradient(135deg,#3b0764 0%,#7e22ce 55%,#db2777 120%);padding:4rem 0}
.showcase::before,.showcase::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.45;pointer-events:none}
.showcase::before{width:26rem;height:26rem;background:#ec4899;top:-9rem;right:-6rem;animation:demo-drift 18s ease-in-out infinite alternate}
.showcase::after{width:22rem;height:22rem;background:#6366f1;bottom:-9rem;left:-5rem;animation:demo-drift 22s ease-in-out infinite alternate-reverse}
.showcase-inner{position:relative;z-index:1;max-width:72rem;margin:0 auto;padding:0 1rem;display:grid;gap:3rem;align-items:center}
.showcase-copy{text-align:center}
.showcase-copy h2{font-size:2rem;line-height:1.2;font-weight:700;margin-bottom:.75rem}
.showcase-copy>p{color:#f3e8ff;font-size:1.125rem;margin-bottom:1.5rem}
.showcase-points{list-style:none;padding:0;margin:0 auto;display:inline-block;text-align:left}
.showcase-points li{display:flex;gap:.75rem;align-items:flex-start;margin-bottom:1rem}
.showcase-points i{flex:none;width:2.25rem;height:2.25rem;border-radius:.75rem;background:rgb(255 255 255 / .16);display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.showcase-points strong{display:block;font-weight:600}
.showcase-points span{color:#e9d5ff;font-size:.95rem}
.phone-stage{position:relative;display:flex;justify-content:center;padding:0 1rem}
.phone{position:relative;width:272px;border-radius:2.6rem;padding:.65rem;background:#1b0b2e;box-shadow:0 0 0 2px #3a2257,0 40px 80px -20px rgb(0 0 0 / .6),0 0 90px rgb(236 72 153 / .35);animation:demo-float 6s ease-in-out infinite}
.phone::before{content:"";position:absolute;top:1.15rem;left:50%;width:5.2rem;height:1.2rem;margin-left:-2.6rem;border-radius:1rem;background:#1b0b2e;z-index:3}
.phone-screen{position:relative;height:540px;overflow:hidden;border-radius:2.1rem;background:#faf5ff;color:#1f2937;font-size:.8rem}
.demo-bar{height:3.4rem;padding:.55rem 1.4rem 0;display:flex;justify-content:space-between;font-size:.7rem;font-weight:600;color:#fff;background:linear-gradient(to right,#9333ea,#ec4899)}
.demo-head{padding:.2rem 1.1rem 1.1rem;color:#fff;background:linear-gradient(to right,#9333ea,#ec4899);border-radius:0 0 1.4rem 1.4rem}
.demo-head b{display:block;font-size:1.05rem}
.demo-head small{opacity:.85}
.demo-list{padding:.9rem .8rem;display:flex;flex-direction:column;gap:.6rem}
.demo-item{position:relative;display:flex;align-items:center;gap:.65rem;padding:.65rem;border-radius:.9rem;background:#fff;box-shadow:0 2px 8px rgb(88 28 135 / .1);animation-duration:11s;animation-iteration-count:infinite;animation-timing-function:ease-out}
.demo-item:nth-child(1){animation-name:demo-item-1}
.demo-item:nth-child(2){animation-name:demo-item-2}
.demo-item:nth-child(3){animation-name:demo-item-3}
.demo-item:nth-child(4){animation-name:demo-item-4}
.demo-emoji{flex:none;width:2.5rem;height:2.5rem;border-radius:.7rem;background:#f3e8ff;display:flex;align-items:center;justify-content:center;font-size:1.3rem}
.demo-item b{display:block;font-size:.82rem;line-height:1.2}
.demo-item small{color:#6b7280;font-size:.7rem}
.demo-tag{display:inline-block;margin-top:.25rem;padding:.12rem .5rem;border-radius:1rem;background:#dcfce7;color:#15803d;font-size:.65rem;font-weight:700;animation:demo-tag 11s ease-out infinite}
.demo-item.is-bought{animation-name:demo-item-1,demo-bought}
.demo-item.is-bought{animation-duration:11s,11s}
.demo-toast{position:absolute;left:.8rem;right:.8rem;bottom:1rem;padding:.7rem .85rem;border-radius:.9rem;background:#1b0b2e;color:#fff;font-size:.75rem;line-height:1.3;box-shadow:0 10px 25px rgb(0 0 0 / .3);animation:demo-toast 11s ease-out infinite}
.demo-chip{position:absolute;z-index:4;display:none;align-items:center;gap:.4rem;padding:.5rem .8rem;border-radius:1rem;background:#fff;color:#4c1d95;font-size:.78rem;font-weight:600;box-shadow:0 12px 30px rgb(0 0 0 / .25);animation:demo-float 5s ease-in-out infinite}
.demo-chip.is-a{right:calc(50% + 7.5rem);top:13rem}
.demo-chip.is-b{left:calc(50% + 7.5rem);bottom:7rem;animation-delay:-2.5s}
@keyframes demo-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes demo-drift{to{transform:translate(3rem,2rem) scale(1.15)}}
@keyframes demo-item-1{0%,3%{opacity:0;transform:translateY(16px)}9%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes demo-item-2{0%,10%{opacity:0;transform:translateY(16px)}16%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes demo-item-3{0%,17%{opacity:0;transform:translateY(16px)}23%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes demo-item-4{0%,24%{opacity:0;transform:translateY(16px)}30%,92%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes demo-bought{0%,45%{box-shadow:0 2px 8px rgb(88 28 135 / .1)}50%,92%{box-shadow:0 0 0 2px #22c55e,0 6px 16px rgb(34 197 94 / .25)}97%,100%{box-shadow:0 2px 8px rgb(88 28 135 / .1)}}
@keyframes demo-tag{0%,46%{opacity:0;transform:scale(.5)}52%,92%{opacity:1;transform:scale(1)}97%,100%{opacity:0;transform:scale(.8)}}
@keyframes demo-toast{0%,56%{opacity:0;transform:translateY(24px)}62%,84%{opacity:1;transform:none}90%,100%{opacity:0;transform:translateY(24px)}}
@media (min-width:768px){
  .showcase-inner{grid-template-columns:1fr 1fr}
  .showcase-copy{text-align:left}
  .showcase-copy h2{font-size:2.5rem}
  .phone-stage{order:2}
}
@media (min-width:1024px){
  .demo-chip{display:flex}
}
@media (prefers-reduced-motion:reduce){
  .showcase::before,.showcase::after,.phone,.demo-chip,.demo-item,.demo-tag,.demo-toast{animation:none !important}
}
.border-yellow-300 { border-color: #fde047; }