/* Estilos compartidos de la landing y el panel: la marca Ingoly (Outfit, Plus Jakarta Sans, verde #2fe08a)
   llevada a un mundo de colores para niños. */
:root {
  --green: #2fe08a;
  --green-dark: #17b56a;
  --ink: #14102a;
  --navy: #100d2b;
  --navy-2: #1c1747;
  --lav: #b7b2d8;
  --text: #2a2350;
  --muted: #6b6593;
  --sky: #5cc8ff;
  --sky-2: #a5e3ff;
  --sun: #ffd23f;
  --pink: #ff5fa2;
  --purple: #8b5cf6;
  --orange: #ff8a3d;
  --red: #ff4d4d;
  --blue: #3b82f6;
  --cream: #fff9ef;
  --radius: 26px;
  --shadow: 0 10px 0 rgba(20, 16, 42, .08), 0 18px 40px rgba(20, 16, 42, .12);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--text);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); overflow-x: hidden; }
h1, h2, h3, .display { font-family: Outfit, 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-family: Outfit, sans-serif; font-weight: 800; font-size: 26px; letter-spacing: .02em; color: var(--ink); }
.logo b { color: var(--green-dark); }
.logo .kids { display: inline-flex; font-size: .8em; padding: 2px 10px 3px; border-radius: 99px; background: var(--ink); }
.logo .kids i { font-style: normal; display: inline-block; animation: hop 2.4s ease-in-out infinite; }
.logo .kids i:nth-child(1) { color: #ff6b6b; }
.logo .kids i:nth-child(2) { color: var(--sun); animation-delay: .15s; }
.logo .kids i:nth-child(3) { color: var(--green); animation-delay: .3s; }
.logo .kids i:nth-child(4) { color: #5cc8ff; animation-delay: .45s; }
.logo.on-dark { color: #f6f3ff; }
.logo.on-dark b { color: var(--green); }
.logo.on-dark .kids { background: #ffffff1a; }
@keyframes hop { 0%, 70%, 100% { transform: translateY(0); } 80% { transform: translateY(-5px); } }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 16px; padding: 14px 24px; text-decoration: none;
  font-family: Outfit, sans-serif; font-weight: 800; font-size: 18px; line-height: 1.1;
  transition: transform .15s, box-shadow .15s, filter .15s; white-space: nowrap;
}
.btn:active { transform: translateY(3px); }
.btn-green { background: var(--green); color: var(--ink); box-shadow: 0 6px 0 var(--green-dark); }
.btn-green:hover { filter: brightness(1.05); transform: translateY(-2px); box-shadow: 0 8px 0 var(--green-dark); }
.btn-sun { background: var(--sun); color: var(--ink); box-shadow: 0 6px 0 #e0a800; }
.btn-white { background: #fff; color: var(--ink); box-shadow: 0 6px 0 #0000001a; }
.btn-ghost { background: #ffffff22; color: #fff; }
.btn-pill { border-radius: 99px; padding: 10px 18px; font-size: 16px; }
.btn-danger { background: #ffe1e1; color: #c0262d; }
.btn-sm { padding: 8px 14px; font-size: 15px; border-radius: 12px; }

/* ---------- Formularios (estilo Ingoly) ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-weight: 700; font-size: 14px; color: var(--muted); }
.input {
  width: 100%; font: inherit; font-size: 17px; padding: 14px 16px; border-radius: 14px;
  border: 2px solid #e6e1f5; background: #fff; color: var(--ink); outline: none; transition: border-color .2s, box-shadow .2s;
}
.input:focus { border-color: var(--green); box-shadow: 0 0 0 4px #2fe08a33; }

/* ---------- Revelar al hacer scroll ---------- */
.reveal { opacity: 0; transform: translateY(30px) scale(.98); transition: opacity .7s, transform .7s cubic-bezier(.2, .9, .3, 1.2); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } * { animation-duration: .01s !important; } }