/* ==========================================================================
   Escena animada del inicio (assets/js/hero-scene.js)
   El niño saluda, el zorro da saltitos y el bocadillo muestra una frase
   en inglés con su traducción. Se queda quieta con "reducir movimiento".
   ========================================================================== */

.pl-hero-scene {
  --hs-ground: #c7d7fe;
  --hs-ground-top: #e3ecff;
  --hs-bubble: #ffffff;
  --hs-bubble-line: #e2e8f0;
  --hs-bubble-ink: #1f2937;
  --hs-bubble-es: #1d4ed8;
}

body.active .pl-hero-scene {
  --hs-ground: #3b5bb5;
  --hs-ground-top: #142446;
  --hs-bubble: #1e293b;
  --hs-bubble-line: rgba(148, 163, 184, 0.3);
  --hs-bubble-ink: #e8edf5;
  --hs-bubble-es: #93c5fd;
}

.hs-stage {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
}

.hs-stage svg {
  display: block;
  width: 100%;
  height: auto;
}

.hs-ground { fill: var(--hs-ground); }
.hs-ground-top { fill: var(--hs-ground-top); }

.hs-hint {
  margin: 4px 0 0;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--lp-muted);
}

/* Bocadillo */
.hs-bubble {
  position: absolute;
  top: 0;
  left: 50%;
  min-width: 220px;
  padding: 8px 16px;
  transform: translateX(-50%);
  border: 2px solid var(--hs-bubble-line);
  border-radius: 16px;
  background: var(--hs-bubble);
  box-shadow: 0 6px 16px -10px rgba(15, 23, 42, 0.5);
  color: var(--hs-bubble-ink);
  text-align: center;
  font-family: var(--ds-ui, 'Nunito', system-ui, sans-serif);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
}

.hs-bubble::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: calc(50% - 7px);
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  border-right: 2px solid var(--hs-bubble-line);
  border-bottom: 2px solid var(--hs-bubble-line);
  background: var(--hs-bubble);
}

.hs-es {
  display: block;
  margin-top: 2px;
  color: var(--hs-bubble-es);
  font-size: 14px;
  font-weight: 700;
}

.hs-bubble.hs-pop { animation: hs-pop 0.35s ease-out; }

@keyframes hs-pop {
  from { transform: translateX(-50%) scale(0.85); opacity: 0.3; }
  to { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* Zorro: se puede tocar */
.hs-fox { cursor: pointer; outline: none; }
.hs-fox:focus-visible .hs-bob { outline: 3px solid #f59e0b; outline-offset: 4px; }

/* Personajes */
.hs-blink { transform-box: fill-box; transform-origin: center; animation: hs-blink 5s infinite; }
.hs-scarf { transform-box: fill-box; transform-origin: 0% 50%; animation: hs-scarf 2.2s ease-in-out infinite alternate; }
.hs-head { transform-box: fill-box; transform-origin: 50% 100%; animation: hs-nod 4s ease-in-out infinite alternate; }
.hs-wave { transform-box: fill-box; transform-origin: 4% 92%; animation: hs-wave 1.1s ease-in-out infinite alternate; }
.hs-tail { transform-box: fill-box; transform-origin: 0% 100%; animation: hs-tail 1.4s ease-in-out infinite alternate; }
.hs-fox-head { transform-box: fill-box; transform-origin: 50% 95%; animation: hs-tilt 3.4s ease-in-out infinite alternate; }
.hs-ear { transform-box: fill-box; transform-origin: 30% 100%; animation: hs-ear 3.8s infinite; }
.hs-rose { transform-box: fill-box; transform-origin: 50% 100%; animation: hs-sway 3s ease-in-out infinite alternate; }
.hs-star { transform-box: fill-box; transform-origin: center; animation: hs-twinkle 2.6s ease-in-out infinite; }
.hs-bob { transform-box: fill-box; transform-origin: 50% 100%; animation: hs-bob 2.4s ease-in-out infinite; }
.hs-fox.hs-jump .hs-bob { animation: hs-jump 0.7s cubic-bezier(0.3, 0.7, 0.4, 1); }

@keyframes hs-blink { 0%, 45%, 49%, 100% { transform: scaleY(1); } 47% { transform: scaleY(0.1); } }
@keyframes hs-scarf { from { transform: rotate(-9deg) scaleX(0.9); } to { transform: rotate(6deg) scaleX(1.06); } }
@keyframes hs-nod { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes hs-wave { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
@keyframes hs-tail { from { transform: rotate(-7deg); } to { transform: rotate(9deg); } }
@keyframes hs-tilt { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }
@keyframes hs-ear { 0%, 86%, 100% { transform: rotate(0); } 90% { transform: rotate(16deg); } 94% { transform: rotate(-5deg); } }
@keyframes hs-sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes hs-twinkle { 0%, 100% { transform: scale(0.55); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes hs-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes hs-jump {
  0% { transform: translateY(0) scale(1, 1); }
  15% { transform: translateY(4px) scale(1.08, 0.9); }
  50% { transform: translateY(-46px) scale(0.96, 1.05); }
  85% { transform: translateY(0) scale(1.06, 0.94); }
  100% { transform: translateY(0); }
}

@media (max-width: 600px) {
  .hs-stage { max-width: 340px; }
  .hs-bubble { min-width: 190px; padding: 6px 12px; font-size: 15px; }
  .hs-es { font-size: 13px; }
}

/* ---------- Escena del zorro que se acerca (sección "Lo que lees, se te queda") ---------- */
.pl-keep-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
  max-width: 1040px;
  margin: 0 auto;
}

.pl-keep-scene {
  --hs-sky-a: #bfd6fe;
  --hs-sky-b: #fde9b8;
  --hs-sun: #fbbf24;
  --hs-hill-far: #c4d4fb;
  --hs-hill-near: #97b5f6;
  --hs-pill: #ffffff;
  --hs-pill-ink: #1f2937;
  min-width: 0;
}

body.active .pl-keep-scene {
  --hs-sky-a: #0a1430;
  --hs-sky-b: #22407f;
  --hs-sun: #fde68a;
  --hs-hill-far: #1d3570;
  --hs-hill-near: #142a5c;
  --hs-pill: #1e293b;
  --hs-pill-ink: #e8edf5;
}

.hs-panorama {
  position: relative;
  height: 100%;
  min-height: 260px;
  overflow: hidden;
  border-radius: var(--lp-radius, 16px);
  border: 1px solid var(--lp-line);
}

.hs-panorama svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hs-sun { fill: var(--hs-sun); opacity: 0.9; }
.hs-hill-far { fill: var(--hs-hill-far); }
.hs-hill-near { fill: var(--hs-hill-near); }

.hs-days {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-grid;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--hs-pill);
  color: var(--hs-pill-ink);
  box-shadow: 0 6px 18px -10px rgba(15, 23, 42, 0.6);
  font-family: var(--ds-ui, 'Nunito', system-ui, sans-serif);
  font-size: 16px;
  font-weight: 900;
}

.hs-days span { grid-area: 1 / 1; opacity: 0; animation: 12s infinite; }
.hs-days span:nth-child(1) { animation-name: hs-day1; }
.hs-days span:nth-child(2) { animation-name: hs-day2; }
.hs-days span:nth-child(3) { animation-name: hs-day3; }
.hs-days span:nth-child(4) { animation-name: hs-day4; }

@keyframes hs-day1 { 0%, 15% { opacity: 1; } 16%, 100% { opacity: 0; } }
@keyframes hs-day2 { 0%, 15% { opacity: 0; } 16%, 40% { opacity: 1; } 41%, 100% { opacity: 0; } }
@keyframes hs-day3 { 0%, 40% { opacity: 0; } 41%, 65% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes hs-day4 { 0%, 65% { opacity: 0; } 66%, 99% { opacity: 1; } 100% { opacity: 0; } }

.hs-page { transform-box: fill-box; transform-origin: 0% 50%; animation: hs-flip 3.6s ease-in-out infinite; }
.hs-walk { animation: hs-walk 12s ease-in-out infinite; }
.hs-hop { animation: hs-hop 12s linear infinite; }
.hs-hearts { animation: hs-hearts 12s ease-out infinite; }

@keyframes hs-flip { 0%, 70% { transform: scaleX(1); } 85%, 99% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
@keyframes hs-walk {
  0% { transform: translate(0, 0); opacity: 0; }
  4%, 10% { transform: translate(0, 0); opacity: 1; }
  16%, 35% { transform: translate(-130px, -8px); }
  41%, 60% { transform: translate(-260px, -25px); }
  66%, 92% { transform: translate(-400px, -36px); opacity: 1; }
  97% { transform: translate(-400px, -36px); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 0; }
}
@keyframes hs-hop {
  0%, 10%, 16%, 35%, 41%, 60%, 66%, 100% { transform: translateY(0); }
  13%, 38%, 63% { transform: translateY(-16px); }
}
@keyframes hs-hearts {
  0%, 68% { opacity: 0; transform: translateY(14px); }
  74% { opacity: 1; }
  90% { opacity: 1; transform: translateY(-24px); }
  96%, 100% { opacity: 0; transform: translateY(-30px); }
}

#pl-keep .pl-features-single {
  max-width: none;
  margin: 0;
}

#pl-keep .pl-feature {
  height: 100%;
}

@media (max-width: 900px) {
  .pl-keep-grid {
    grid-template-columns: 1fr;
  }

  .hs-panorama {
    min-height: 220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pl-hero-scene *,
  .pl-hero-scene *::after,
  .pl-keep-scene *,
  .pl-keep-scene *::after {
    animation: none !important;
  }

  /* Sin movimiento, la escena muestra el final: el zorro ya está al lado del niño */
  .pl-keep-scene .hs-walk { transform: translate(-400px, -36px); }
  .pl-keep-scene .hs-days span:last-child { opacity: 1; }
}

/* ---------- Hero con la escena ---------- */
.pl-hero .pl-hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.pl-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pl-hero-copy .pl-title {
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
}

.pl-hero-copy .pl-lead {
  margin-inline: auto;
}

.pl-hero-copy .pl-cta-row {
  flex-direction: column;
  width: min(100%, 340px);
}

.pl-hero-copy .pl-btn {
  width: 100%;
  justify-content: center;
}

.pl-hero-copy .pl-trust {
  justify-content: center;
}

/* ---------- Demo debajo del hero ---------- */
.pl-try-reader {
  max-width: 720px;
  margin: 0 auto;
}

#pl-try .pl-stats {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  max-width: 960px;
  margin: 36px auto 0;
  text-align: center;
}

#pl-try .pl-stats div {
  align-items: center;
}

@media (max-width: 600px) {
  #pl-try .pl-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .pl-hero .pl-hero-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ---------- Botones del hero como en el boceto elegido (concepto 3) ----------
   Más altos, sin icono, y el principal sin borde oscuro alrededor: solo el canto de abajo. */
.pl-hero-copy .pl-btn {
  min-height: 58px;
  border-radius: 14px;
  font-weight: 800;
}

.pl-hero-copy .pl-btn-primary {
  border: 0;
  border-bottom: 4px solid var(--ds-blue-dark, #1e3a8a);
  box-shadow: none;
}

.pl-hero-copy .pl-btn-ghost {
  background: var(--lp-surface, #fff);
  border-color: var(--ds-line, #e2e8f0);
}

body.active .pl-hero-copy .pl-btn-ghost {
  border-color: rgba(148, 163, 184, 0.3);
}

.pl-hero-copy .pl-lead {
  max-width: 460px;
}

/* Ventajas ("Empieza gratis"…) debajo de la demo, como pedía el boceto */
.pl-try-trust {
  justify-content: center;
  margin-top: 24px;
}