/* ---------- Barra "descubre más": ancha, bajita, con flechas animadas ---------- */
.more-bar {
  position: absolute; left: 50%; bottom: calc(var(--ff-h) + 22px); translate: -50% 0; z-index: 5;
  width: min(760px, calc(100% - 32px)); height: 58px; border: 0; border-radius: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: clamp(10px, 3vw, 28px);
  background: linear-gradient(90deg, #ff5fa2, #ffb703, #2fe08a, #3b82f6, #a855f7, #ff5fa2); background-size: 300% 100%;
  color: #fff; font: 800 clamp(15px, 2vw, 19px) Outfit, sans-serif; text-shadow: 0 2px 0 #0003;
  box-shadow: 0 8px 0 #14102a33, 0 14px 30px #14102a33; animation: bar-flow 8s linear infinite, bar-bob 2.2s ease-in-out infinite;
  transition: transform .2s;
}
.more-bar:hover { transform: scale(1.03); }
.more-bar:active { transform: scale(.97); }
.more-bar:focus-visible { outline: 4px solid #14102a; outline-offset: 4px; }
@keyframes bar-flow { to { background-position: 300% 0; } }
@keyframes bar-bob { 50% { translate: -50% 6px; } }
.more-chevrons { display: flex; flex-direction: column; align-items: center; height: 36px; justify-content: center; }
.more-chevrons i { display: block; width: 18px; height: 18px; margin-top: -9px; border: solid #fff; border-width: 0 4px 4px 0; border-radius: 2px; transform: rotate(45deg); opacity: 0; animation: chev 1.4s ease-in-out infinite; }
.more-chevrons i:nth-child(2) { animation-delay: .18s; }
.more-chevrons i:nth-child(3) { animation-delay: .36s; }
@keyframes chev { 0% { opacity: 0; translate: 0 -6px; } 40% { opacity: 1; } 100% { opacity: 0; translate: 0 8px; } }
@media (max-width: 480px) { .more-bar { height: 52px; } .more-text { max-width: 60%; line-height: 1.1; } }

/* Al tocar la barra, el contenido "se despliega" hacia abajo */
.unfold { position: relative; }
.unfold.opened { animation: unfold .9s cubic-bezier(.2, .9, .3, 1.1); transform-origin: 50% 0; }
@keyframes unfold { from { opacity: .3; transform: perspective(900px) rotateX(-8deg) translateY(-30px); } }

/* ---------- Efectos de niños ---------- */
.bubbles span { position: absolute; bottom: -80px; border-radius: 50%; animation: bubble linear infinite;
  background: radial-gradient(circle at 30% 30%, #ffffffee 0 12%, #ffffff33 13% 55%, #ff9be655 70%, #8fe3ff66 85%, #ffffff99 100%); box-shadow: inset 0 0 8px #ffffff88; }
@keyframes bubble { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(30px, -55vh); } 100% { transform: translate(-20px, -115vh); opacity: .9; } }
.twinkles i { position: absolute; width: 14px; height: 14px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: twinkle-star 2.4s ease-in-out infinite; }
@keyframes twinkle-star { 0%, 100% { transform: scale(.3) rotate(0); opacity: .2; } 50% { transform: scale(1) rotate(90deg); opacity: 1; } }
.hero h1 .ch { display: inline-block; animation: ch-in .6s cubic-bezier(.3, 1.8, .5, 1) backwards; }
.hero h1 .ch:hover { animation: ch-jump .5s; }
.hero h1 .word { display: inline-block; white-space: nowrap; }
.hero h1 em:has(.ch) { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: inherit; animation: none; filter: none; }
.hero h1 em .ch { text-shadow: 0 4px 0 #ffffffb0; }
@keyframes ch-in { from { opacity: 0; transform: translateY(40px) scale(.4) rotate(-20deg); } }
@keyframes ch-jump { 40% { transform: translateY(-14px) rotate(-8deg) scale(1.15); } }
.jelly:hover { animation: jelly .6s; }
@keyframes jelly { 25% { transform: scale(1.12, .9); } 50% { transform: scale(.94, 1.08); } 75% { transform: scale(1.04, .97); } }
.trail { position: fixed; z-index: 90; pointer-events: none; width: 16px; height: 16px; margin: -8px 0 0 -8px; animation: trail .9s ease-out forwards;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
@keyframes trail { to { transform: translateY(30px) scale(0) rotate(180deg); opacity: 0; } }
.parents-band .shooting { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.shooting i { position: absolute; top: 10%; left: 110%; width: 120px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #fff, transparent); transform: rotate(-20deg); animation: shoot 6s linear infinite; }
.shooting i:nth-child(2) { top: 30%; animation-delay: 2s; }
.shooting i:nth-child(3) { top: 55%; animation-delay: 4.2s; }
@keyframes shoot { 0%, 70% { left: 110%; opacity: 0; } 72% { opacity: 1; } 90%, 100% { left: -20%; opacity: 0; translate: 0 40vh; } }
.section { position: relative; }
.doodle { position: absolute; z-index: -1; font-size: clamp(26px, 4vw, 46px); opacity: .55; animation: doodle 6s ease-in-out infinite; pointer-events: none; }
@keyframes doodle { 50% { transform: translateY(-16px) rotate(14deg); } }

/* ---------- Qué incluye + garantía ---------- */
.includes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.inc { background: #fff; border-radius: 24px; padding: 22px; box-shadow: var(--shadow); position: relative; overflow: hidden; transition: transform .25s; }
.inc:hover { transform: translateY(-6px) rotate(-1deg); }
.inc::before { content: ''; position: absolute; width: 110px; height: 110px; border-radius: 50%; background: var(--c); opacity: .2; right: -30px; top: -30px; transition: transform .4s; }
.inc:hover::before { transform: scale(1.6); }
.inc span { font-size: 40px; display: block; }
.inc b { display: block; font: 800 21px Outfit, sans-serif; color: var(--ink); margin: 8px 0 4px; position: relative; }
.inc p { margin: 0; color: var(--muted); line-height: 1.45; position: relative; }
@media (max-width: 860px) { .includes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .includes { grid-template-columns: 1fr; } }
.guarantee { display: flex; align-items: center; gap: 24px; margin-top: 30px; background: linear-gradient(120deg, #ecfdf3, #fff7d6); border: 3px dashed #2fe08a; border-radius: 28px; padding: 22px clamp(18px, 3vw, 34px); }
.guarantee h3 { margin: 0 0 6px; font-size: 26px; }
.guarantee p { margin: 0; color: #3d3570; line-height: 1.55; }
.guarantee a { color: var(--green-dark); font-weight: 800; }
.seal { position: relative; flex: none; width: 104px; height: 104px; border-radius: 50%; display: grid; place-content: center; text-align: center; color: #14102a; }
.seal::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, #fff 55%, transparent 56%), repeating-conic-gradient(#2fe08a 0 15deg, #ffd23f 15deg 30deg); animation: spin 14s linear infinite; }
.seal b, .seal small { position: relative; }
.seal b { font: 900 40px/1 Outfit, sans-serif; }
.seal small { font-weight: 800; }
@media (max-width: 560px) { .guarantee { flex-direction: column; text-align: center; } }

@media (prefers-reduced-motion: reduce) {
  .more-bar, .more-chevrons i, .bubbles span, .twinkles i, .hero h1 .ch, .shooting i, .doodle, .seal::before { animation: none !important; }
  .more-chevrons i { opacity: 1; }
}

/* ---------- Celular: la sección 1 cabe completa en la pantalla ---------- */
@media (max-width: 900px) {
  .hero { padding-top: calc(var(--nav-h) + 10px); padding-bottom: calc(var(--ff-h) + 84px); justify-content: flex-start; }
  .hero-inner { gap: 6px; }
  .hero .tag { padding: 5px 12px; font-size: 13px; }
  .hero h1 { font-size: clamp(30px, 9vw, 54px); margin: 8px 0; }
  .hero .lead { font-size: 15px; line-height: 1.45; margin: 0 auto; }
  .signup { flex-direction: row; margin-top: 12px; padding: 6px; }
  .signup-input { padding: 0 10px; text-align: left; font-size: 14px; }
  .signup .btn { padding: 11px 14px; font-size: 15px; }
  .small-print { font-size: 13px; margin-top: 8px; }
  .hero-stage { height: clamp(130px, 26svh, 300px); }
  .hello-bubble { font-size: 18px; padding: 6px 14px; top: -4%; }
  .more-bar { bottom: calc(var(--ff-h) + 14px); }
}
@media (max-width: 900px) and (max-height: 700px) { .hero .lead { display: none; } }
@media (max-width: 560px) {
  .more-bar { left: 12px; translate: none; width: calc(100% - 24px - 66px); animation: bar-flow 8s linear infinite, bar-bob-m 2.2s ease-in-out infinite; gap: 8px; }
  .more-bar .more-chevrons:last-child { display: none; }
  @keyframes bar-bob-m { 50% { translate: 0 5px; } }
}

/* ---------- Al entrar solo existe la sección 1; lo demás aparece al tocar la barra ---------- */
body:not(.unfolded) .unfold, body:not(.unfolded) .prefooter { display: none; }
body:not(.unfolded) { overflow: hidden; }
.hero { height: 100vh; height: 100svh; min-height: 0; }
@media (max-height: 560px) { .hero { height: auto; min-height: 100svh; } body:not(.unfolded) { overflow: auto; } }
body.unfolded .unfold { animation: unfold 1s cubic-bezier(.2, .9, .3, 1.1); transform-origin: 50% 0; }
body.unfolded .more-bar .more-text::after { content: ''; }

/* ---------- Los personajes de la landing no se desplazan: se animan en su sitio ---------- */
.hero-friends .f, .hero-friends .f:hover, .final-friends > div, .pf-peek > div,
.friend:hover, .friend.talking { animation: none !important; transform: none !important; translate: none !important; }
.hero-friends .f { transition: none; }
.mascot-svg.mood-joy { animation: none; } /* sin saltos: solo aplauden y sonríen */
.friend:hover { box-shadow: 0 0 0 4px var(--c), var(--shadow); }

/* =========================================================
   Ajuste compacto: hero, header y barra (versión 2)
   ========================================================= */
:root { --nav-h: 54px; }
.nav { padding: 6px clamp(14px, 3vw, 36px); }
.nav .logo { font-size: 21px; }
.nav .btn-pill { padding: 7px 14px; font-size: 14px; box-shadow: 0 4px 0 var(--green-dark); }
.nav .btn-white.btn-pill { box-shadow: 0 4px 0 #0000001a; }
.nav-links { gap: 20px; font-size: 14.5px; }

/* La barra va dentro del hero, debajo del contenido: ya no tapa nada */
.hero { padding: calc(var(--nav-h) + 10px) 0 calc(var(--ff-h) + 10px); justify-content: flex-start; }
.hero-inner { flex: 1; min-height: 0; align-items: center; gap: 20px; }
.hero .tag { padding: 5px 12px; font-size: 13px; }
.hero h1 { font-size: clamp(30px, 4.3vw, 58px); margin: 10px 0 8px; line-height: 1; }
.hero .lead { font-size: clamp(14.5px, 1.25vw, 17px); line-height: 1.5; max-width: 500px; margin: 0; }
.signup { margin-top: 14px; padding: 5px; border-radius: 16px; max-width: 470px; }
.signup-input { font-size: 14.5px; padding: 0 12px; }
.signup .btn { padding: 10px 16px; font-size: 15px; border-radius: 12px; box-shadow: 0 4px 0 var(--green-dark); }
.small-print { font-size: 13px; margin-top: 8px; }
.hero-stage { height: clamp(220px, 46svh, 440px); }
.hello-bubble { font-size: clamp(17px, 1.8vw, 24px); padding: 8px 16px; }
.more-bar {
  position: relative; left: auto; bottom: auto; translate: none; flex: none;
  margin: 8px auto 0; height: 42px; width: min(560px, calc(100% - 32px)); border-radius: 14px;
  font-size: clamp(13.5px, 1.4vw, 16px); box-shadow: 0 5px 0 #14102a2e, 0 10px 22px #14102a26;
  animation: bar-flow 8s linear infinite, bar-bob-s 2.2s ease-in-out infinite;
}
@keyframes bar-bob-s { 50% { translate: 0 4px; } }
.more-chevrons { height: 26px; }
.more-chevrons i { width: 12px; height: 12px; margin-top: -6px; border-width: 0 3px 3px 0; }

@media (max-width: 900px) {
  .hero { padding-bottom: calc(var(--ff-h) + 8px); }
  .hero-inner { gap: 4px; align-content: start; }
  .hero h1 { font-size: clamp(26px, 7.4vw, 44px); margin: 6px 0; }
  .hero .lead { font-size: 13.5px; }
  .signup { margin: 10px auto 0; }
  .signup-input { font-size: 13px; }
  .signup .btn { padding: 9px 12px; font-size: 13.5px; }
  .small-print { font-size: 12px; }
  .hero-stage { height: clamp(120px, 28svh, 300px); }
  .more-bar { margin-top: 6px; }
}
@media (max-width: 560px) {
  .nav .logo { font-size: 19px; }
  .more-bar { left: auto; margin-left: 12px; margin-right: auto; width: calc(100% - 24px - 62px); height: 40px; animation: bar-flow 8s linear infinite, bar-bob-s 2.2s ease-in-out infinite; }
}
@media (max-width: 900px) { .hero-stage { height: clamp(120px, 38svh, 340px); } }

/* =========================================================
   Celular (v3): la sección 1 llena la pantalla, los amigos
   van abajo y los textos son más grandes
   ========================================================= */
.hero-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
@media (max-width: 900px) {
  .hero-inner { display: flex; flex-direction: column; align-items: stretch; flex: 1; min-height: 0; gap: 0; }
  .hero-copy { flex: none; }
  .hero .tag { font-size: 14px; padding: 6px 14px; }
  .hero h1 { font-size: clamp(36px, 10.5vw, 56px); margin: 10px 0 8px; }
  .hero .lead { font-size: clamp(16px, 4.3vw, 19px); line-height: 1.45; }
  .signup { margin-top: 14px; padding: 6px; max-width: 520px; }
  .signup-input { font-size: 15px; }
  .signup .btn { font-size: 15.5px; padding: 11px 14px; }
  .small-print { font-size: 13.5px; }
  /* El escenario ocupa todo el espacio que sobra y los amigos se paran en el fondo */
  .hero-stage { flex: 1; height: auto !important; min-height: 150px; margin: 0 -16px; }
  .hill { bottom: -30px; height: 62%; }
  .hero-friends { bottom: 4%; left: 2%; right: 2%; }
  .hero-friends .f { width: 25%; }
  .hero-friends .f:nth-child(2), .hero-friends .f:nth-child(3) { width: 28%; }
  .hello-bubble { top: auto; bottom: 62%; font-size: 18px; }
}
@media (max-width: 900px) and (max-height: 700px) { .hero .lead { display: block; font-size: 14.5px; } .hero h1 { font-size: clamp(30px, 9vw, 44px); } }
@media (max-width: 900px) and (max-height: 600px) { .hero .lead { display: none; } }
/* El formulario nunca puede ser más ancho que la pantalla */
.hero-copy { min-width: 0; }
.signup-input { width: 0; min-width: 0; flex: 1 1 auto; }
.signup .btn { flex: none; }

/* =========================================================
   Celular (v4): textos más grandes y la montaña pegada al texto
   ========================================================= */
@media (max-width: 900px) {
  .hero .tag { font-size: 15px; padding: 7px 15px; }
  .hero h1 { font-size: clamp(40px, 12vw, 60px); line-height: .98; margin: 12px 0 10px; }
  .hero .lead { font-size: clamp(17px, 4.8vw, 21px); line-height: 1.45; }
  .signup { margin-top: 16px; padding: 7px; }
  .signup-input { font-size: 16px; }
  .signup .btn { font-size: 16px; padding: 12px 15px; }
  .small-print { font-size: 14.5px; margin-top: 10px; }
  /* La colina sube y ocupa casi todo el escenario: no queda hueco entre el texto y la montaña */
  .hero-stage { min-height: 170px; margin-top: 4px; }
  .hill { bottom: -40px; height: 92%; }
  .hero-friends { bottom: 6%; }
  .hero-friends .f { width: 26%; }
  .hero-friends .f:nth-child(2), .hero-friends .f:nth-child(3) { width: 30%; }
  .hello-bubble { bottom: auto; top: 2%; }
}
@media (max-width: 900px) and (max-height: 700px) { .hero h1 { font-size: clamp(32px, 9.5vw, 46px); } .hero .lead { font-size: 15px; } .small-print { font-size: 13px; } }
@media (max-width: 900px) { .hill { height: calc(100% + 16px); } }

/* Cinco amigos: Rosi se une al grupo */
.hero-friends .f { width: 22% !important; margin: 0 -1.5%; }
.hero-friends .f:nth-child(3) { width: 25% !important; z-index: 2; }
.friends { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1000px) { .friends { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .friends { grid-template-columns: repeat(2, 1fr); } }
.pf-peek { width: min(500px, 86vw); }

/* Escritorio: la imagen de la derecha no invade la columna del texto */
.hero-copy { position: relative; z-index: 3; }
@media (min-width: 901px) {
  .hill { left: 0; right: -12%; }
  .hero-friends { left: 0; right: 0; }
  .hero-stage { overflow: visible; }
}