/* MangoLatte — estilos compartidos */

:root {
  --ml-red: #EE1B24;
  --ml-red-dark: #B00E12;
  --ml-red-darker: #7E0A0D;
  --ml-cream: #FFFDF7;
  --ml-yellow: #FFC93C;
  --ml-yellow-dark: #C89400;
  --ml-brown: #4A2E12;
  --ml-brown-soft: #5A3A20;
  --ml-brown-light: #7A5A3A;
  --ml-tan: #8A6A4A;
  --ml-bg: #FFF6DC;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ml-red);
  font-family: 'Nunito', sans-serif;
  color: var(--ml-brown);
}

img { max-width: 100%; display: block; }

a { color: var(--ml-red-dark); }
a:hover { color: var(--ml-red-darker); }

::selection { background: var(--ml-yellow); }

h1, h2, h3 { font-family: 'Baloo 2', sans-serif; font-weight: 800; margin: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -999px; top: 0; background: #fff; color: var(--ml-red-dark);
  padding: 10px 16px; border-radius: 0 0 10px 0; z-index: 100; font-weight: 800;
}
.skip-link:focus { left: 0; }

/* Header */
.ml-header {
  position: sticky; top: 0; z-index: 50; background: var(--ml-red);
  padding: 14px 24px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.15); flex-wrap: wrap;
}
.ml-header .logo-link { display: flex; align-items: center; gap: 10px; }
.ml-header img.logo { height: 72px; width: auto; transition: transform .2s; }
.ml-header .logo-link:hover img.logo { transform: rotate(-3deg) scale(1.05); }

.ml-nav {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.ml-nav a {
  font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 14px; white-space: nowrap;
  padding: 10px 16px; border-radius: 100px; border: none; cursor: pointer; transition: all .15s;
  background: transparent; color: #FFE9CC; text-decoration: none;
}
.ml-nav a { font-size: 16px; min-height: 44px; display: inline-flex; align-items: center; }
.ml-nav a:hover { background: #FFE9A8; color: var(--ml-red-dark); }
.ml-nav a[aria-current="page"], .ml-nav summary[aria-current] { background: var(--ml-cream); color: var(--ml-red); }
.ml-nav a:focus-visible, .ml-nav summary:focus-visible, .btn:focus-visible { outline: 3px solid var(--ml-yellow); outline-offset: 2px; }
.ml-nav a.nav-cta { background: var(--ml-yellow); color: var(--ml-brown); box-shadow: 0 4px 0 var(--ml-yellow-dark); margin-left: 6px; }
.ml-nav a.nav-cta:hover { background: #FFE9A8; color: var(--ml-brown); }
.nav-drop { position: relative; }
.nav-drop summary {
  list-style: none; cursor: pointer; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 16px;
  padding: 10px 16px; border-radius: 100px; min-height: 44px; display: inline-flex; align-items: center; gap: 6px;
}
.nav-drop summary::-webkit-details-marker { display: none; }
.nav-drop summary::after { content: "▾"; font-size: 12px; }
.nav-drop summary:hover { background: #FFE9A8; color: var(--ml-red-dark); }
.nav-menu {
  position: absolute; top: 100%; left: 0; z-index: 60; min-width: 190px; margin-top: 6px; padding: 8px;
  background: var(--ml-cream); border: 3px solid var(--ml-yellow); border-radius: 20px;
  box-shadow: 0 8px 0 var(--ml-yellow-dark); display: grid; gap: 2px;
}
@media (max-width: 700px) {
  .ml-header { padding: 10px 16px; }
  .nav-menu { position: static; box-shadow: none; margin-top: 4px; }
  .nav-drop[open] { flex-basis: 100%; }
}

/* Layout */
main { max-width: 1180px; margin: 0 auto; padding: 28px 20px; }

.ml-section-header {
  display: flex; align-items: center; gap: 18px; margin-bottom: 22px; flex-wrap: wrap;
}
.ml-section-header h1 { font-size: 34px; color: var(--ml-cream); flex: 1; min-width: 260px; }
.ml-tip {
  background: var(--ml-cream); border-radius: 20px; padding: 12px 18px; display: flex;
  align-items: center; gap: 12px; max-width: 520px; box-shadow: 0 5px 0 var(--ml-red-dark);
}
.ml-tip span.emoji { font-size: 28px; }
.ml-tip span.text { color: var(--ml-brown-soft); font-weight: 700; font-size: 13.5px; line-height: 1.3; }

/* Cards / grids */
.ml-card {
  background: var(--ml-cream); border-radius: 24px; padding: 18px 12px; text-align: center;
  box-shadow: 0 6px 0 var(--ml-red-dark);
}
.ml-grid { display: grid; gap: 16px; }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 860px) {
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .grid-5, .grid-4, .grid-3, .grid-2 { grid-template-columns: repeat(2, 1fr); }
}

/* Hero */
.hero {
  background: var(--ml-cream); border-radius: 32px; padding: 36px; display: grid;
  grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; box-shadow: 0 10px 0 var(--ml-red-dark);
}
@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; padding: 24px; }
}
.hero .kicker {
  display: inline-block; background: var(--ml-yellow); color: #7A4B00; font-weight: 800;
  font-size: 14px; padding: 6px 14px; border-radius: 100px; margin-bottom: 14px;
}
.hero h1 { font-size: 52px; line-height: 1.05; color: var(--ml-red); margin: 0 0 16px 0; }
@media (max-width: 540px) { .hero h1 { font-size: 36px; } }
.hero p.lead { font-size: 19px; color: var(--ml-brown); line-height: 1.5; margin: 0 0 22px 0; font-weight: 700; }
.hero img { border-radius: 24px; box-shadow: 0 8px 0 rgba(0,0,0,0.1); width: 100%; height: auto; }

.btn {
  font-weight: 800; padding: 14px 22px; border-radius: 100px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; font-size: 16px; color: #fff;
}
.btn-youtube { background: #FF0000; box-shadow: 0 5px 0 #A80000; }
.btn-spotify { background: #1DB954; box-shadow: 0 5px 0 #128A3E; }

.stats-grid { margin-top: 24px; }
.stat-value { font-family: 'Baloo 2', sans-serif; font-size: 32px; font-weight: 800; color: var(--ml-red); }
.stat-label { font-size: 14px; font-weight: 700; color: var(--ml-brown-light); }

.about-band {
  background: var(--ml-yellow); border-radius: 28px; padding: 30px 36px; margin-top: 24px;
  display: flex; align-items: center; gap: 26px; box-shadow: 0 8px 0 var(--ml-yellow-dark); flex-wrap: wrap;
}
.about-band img { width: 120px; flex-shrink: 0; }
.about-band h2 { font-size: 22px; color: #7A4B00; margin-bottom: 6px; }
.about-band p { margin: 0; color: #5A3A00; font-weight: 700; font-size: 16px; line-height: 1.5; }

/* Number / vowel / shape cards */
.num-digit { font-family: 'Baloo 2', sans-serif; font-size: 44px; font-weight: 800; }
.num-word { font-weight: 800; color: var(--ml-brown); font-size: 15px; text-transform: uppercase; letter-spacing: 0.5px; }
.num-dots { font-size: 22px; margin-top: 6px; letter-spacing: 2px; }
.rhyme { font-size: 13px; color: var(--ml-tan); font-style: italic; margin-top: 6px; line-height: 1.3; }

.vowel-card { border-radius: 24px; padding: 24px 14px; text-align: center; box-shadow: 0 6px 0 rgba(0,0,0,0.15); color: #fff; }
.vowel-letter { font-family: 'Baloo 2', sans-serif; font-size: 56px; font-weight: 800; text-shadow: 0 3px 0 rgba(0,0,0,0.15); }
.vowel-word { font-weight: 800; font-size: 15px; margin-top: 8px; }
.vowel-card .rhyme { color: rgba(255,255,255,0.9); }

.animal-emoji { font-size: 44px; }
.animal-name { font-weight: 800; color: var(--ml-brown); font-size: 15px; margin-top: 4px; }
.animal-sound { font-size: 13px; color: var(--ml-red-dark); font-weight: 700; margin-top: 4px; }

.color-card { border-radius: 24px; padding: 26px 14px; text-align: center; box-shadow: 0 6px 0 rgba(0,0,0,0.15); }
.color-name { font-weight: 800; font-size: 18px; }
.color-card .rhyme { opacity: 0.9; }

.shape-card { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.shape-name { font-weight: 800; color: var(--ml-brown); font-size: 17px; }

/* Music / embeds */
.music-panel { border-radius: 24px; padding: 20px; }
.music-panel h2 { color: #fff; font-size: 18px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.music-panel iframe { width: 100%; height: 260px; border: 0; border-radius: 14px; }
.music-panel a.cta { display: block; text-align: center; margin-top: 12px; font-weight: 800; padding: 12px; border-radius: 100px; text-decoration: none; }

.more-platforms {
  background: var(--ml-cream); border-radius: 24px; padding: 24px 30px; margin-top: 20px;
  box-shadow: 0 6px 0 var(--ml-red-dark); display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
}
.more-platforms .label { font-weight: 800; color: var(--ml-brown); font-size: 16px; }
.pill-link { font-weight: 800; padding: 10px 18px; border-radius: 100px; text-decoration: none; font-size: 14px; color: #fff; }

/* Parents / tips */
.tip-card { background: var(--ml-cream); border-radius: 22px; padding: 22px; box-shadow: 0 6px 0 var(--ml-red-dark); }
.tip-card .emoji { font-size: 30px; margin-bottom: 8px; }
.tip-card h2 { color: var(--ml-red); font-size: 18px; margin-bottom: 6px; }
.tip-card p { color: var(--ml-brown-soft); font-size: 15px; line-height: 1.5; font-weight: 600; margin: 0; }

.printable-box {
  background: var(--ml-yellow); border-radius: 24px; padding: 22px 28px; margin-top: 20px;
  box-shadow: 0 6px 0 var(--ml-yellow-dark);
}
.printable-box h2 { color: #7A4B00; font-size: 18px; margin-bottom: 8px; }
.printable-box p { color: #5A3A00; font-weight: 700; font-size: 15px; line-height: 1.5; margin: 0; }

/* Social */
.social-card {
  background: var(--ml-cream); border-radius: 22px; padding: 22px; text-decoration: none;
  display: flex; align-items: center; gap: 14px; box-shadow: 0 6px 0 var(--ml-red-dark); transition: transform .15s;
}
.social-card:hover { transform: translateY(-2px); }
.social-card .emoji { font-size: 32px; }
.social-card .name { font-family: 'Baloo 2', sans-serif; font-weight: 800; color: var(--ml-brown); font-size: 16px; }
.social-card .handle { color: var(--ml-red-dark); font-weight: 700; font-size: 13px; }

/* Intro copy for SEO/GEO context */
.page-intro { color: var(--ml-cream); font-weight: 700; font-size: 16px; line-height: 1.5; max-width: 760px; margin: -10px 0 24px 0; }

footer.site-footer {
  text-align: center; padding: 30px 20px; color: rgba(255,253,247,0.9); font-weight: 700; font-size: 14px;
}
footer.site-footer a { color: var(--ml-cream); }

/* Home (estructura del diseño Stitch, colores oficiales) */
main.home { max-width: 1180px; margin: 24px auto; padding: 24px; background: var(--ml-cream); border-radius: 36px; box-shadow: 0 10px 0 var(--ml-red-darker); }
@media (max-width: 540px) { main.home { margin: 12px; padding: 14px; border-radius: 26px; } }
.btn { min-height: 52px; transition: transform .15s; }
.btn:hover { transform: translateY(-2px); color: inherit; }
.btn:focus-visible, .topic:focus-visible, .opt:focus-visible { outline: 3px solid var(--ml-brown); outline-offset: 3px; }

.h-hero { background: var(--ml-red); border-radius: 30px; padding: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; color: var(--ml-cream); }
@media (max-width: 800px) { .h-hero { grid-template-columns: 1fr; padding: 24px; } }
.h-hero h1 { font-size: 46px; line-height: 1.05; color: var(--ml-yellow); margin: 0 0 12px 0; }
.h-hero h1 span { color: var(--ml-cream); }
@media (max-width: 540px) { .h-hero h1 { font-size: 34px; } }
.h-hero p { font-size: 18px; font-weight: 700; line-height: 1.5; margin: 0 0 22px 0; }
.h-hero .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-yellow { background: var(--ml-yellow); color: var(--ml-brown); box-shadow: 0 5px 0 var(--ml-yellow-dark); }
.btn-cream { background: var(--ml-cream); color: var(--ml-red-dark); box-shadow: 0 5px 0 var(--ml-red-darker); }
.h-hero img { width: 100%; height: auto; border-radius: 24px; border: 4px solid var(--ml-cream); }

.block { margin-top: 40px; }
.block > h2 { font-size: 30px; color: var(--ml-red); margin-bottom: 6px; text-align: center; }
.block > p.sub { margin: 0 auto 20px; font-weight: 700; color: var(--ml-brown-soft); font-size: 16px; max-width: 62ch; text-align: center; }

.topic-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 900px) { .topic-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .topic-grid { grid-template-columns: repeat(2, 1fr); } }
.topic { --c: var(--ml-red); --bgc: #FFE3E3; background: var(--bgc); border: 3px solid var(--c); border-radius: 26px; padding: 22px 12px 18px; text-align: center; text-decoration: none; color: var(--ml-brown); display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: 0 6px 0 var(--c); transition: transform .15s; }
.topic:hover { transform: translateY(-4px); color: var(--ml-brown); }
.topic .t-emoji { font-size: 48px; line-height: 1.1; }
.topic .t-name { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 22px; }
.topic .t-desc { font-size: 14px; font-weight: 700; color: var(--ml-brown-soft); }
.topic.t-colores { --c: #2E8BD8; --bgc: #E3F1FD; }
.topic.t-numeros { --c: #E5A100; --bgc: #FFF1C2; }
.topic.t-vocales { --c: #8A4FD0; --bgc: #EFE5FB; }
.topic.t-animales { --c: #D9731A; --bgc: #FFE9D2; }
.topic.t-formas { --c: #EE1B24; --bgc: #FFE3E3; }

.quiz { background: var(--ml-red); border-radius: 30px; padding: 28px; display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: center; max-width: 760px; margin: 0 auto; color: var(--ml-cream); }
@media (max-width: 640px) { .quiz { grid-template-columns: 1fr; } }
.quiz .q-card { background: var(--ml-cream); color: var(--ml-brown); border-radius: 22px; padding: 16px; text-align: center; }
.quiz .q-card b { font-family: 'Baloo 2', sans-serif; font-size: 18px; display: block; }
.quiz .q-emoji { font-size: 84px; line-height: 1.1; }
.quiz .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt { font: inherit; font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 20px; min-height: 56px; border-radius: 100px; border: 3px solid var(--ml-cream); background: transparent; color: var(--ml-cream); cursor: pointer; }
.opt:hover { background: rgba(255,253,247,.18); }
.opt.ok { background: #1DB954; border-color: #1DB954; color: #fff; }
.opt.no { background: var(--ml-red-darker); border-color: var(--ml-red-darker); }
.quiz .q-msg { grid-column: 1 / -1; min-height: 1.4em; font-weight: 800; text-align: center; margin: 0; }
.quiz .q-next { grid-column: 1 / -1; justify-self: center; }

.follow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
@media (max-width: 800px) { .follow { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .follow { grid-template-columns: repeat(2, 1fr); } }
.follow a { border-radius: 22px; padding: 16px 8px; text-align: center; text-decoration: none; color: #fff; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 16px; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 84px; justify-content: center; }
.follow a:hover { transform: translateY(-3px); color: #fff; }
.follow .f-ico { font-size: 26px; line-height: 1; }
.f-yt { background: #FF0000; } .f-sp { background: #1DB954; } .f-ap { background: var(--ml-red-dark); } .f-pd { background: var(--ml-brown); } .f-ig { background: #C13584; } .f-tk { background: #111; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 800px) { .duo { grid-template-columns: 1fr; } }
.edu-card { background: var(--ml-yellow); border-radius: 26px; padding: 28px; box-shadow: 0 8px 0 var(--ml-yellow-dark); display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.edu-card h2 { font-size: 26px; color: #7A4B00; }
.edu-card p { margin: 0; font-weight: 700; color: #5A3A00; line-height: 1.5; }
.contact-card { background: var(--ml-cream); border: 3px solid var(--ml-yellow); border-radius: 26px; padding: 28px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.contact-card h2 { font-size: 26px; color: var(--ml-red); }
.contact-card p { margin: 0; font-weight: 700; color: var(--ml-brown-soft); line-height: 1.5; }

.stats-grid .ml-card { box-shadow: 0 6px 0 var(--ml-yellow-dark); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .topic, .follow a, .social-card { transition: none; }
}

/* Ajustes */
.nav-drop summary { color: #FFE9CC; }
.nav-drop[open] summary { background: #FFE9A8; color: var(--ml-red-dark); }
.nav-menu a { color: var(--ml-brown); }
.nav-menu a:hover { background: var(--ml-yellow); color: var(--ml-brown); }
.nav-menu a[aria-current="page"] { background: var(--ml-yellow); color: var(--ml-brown); }
[hidden] { display: none !important; }
main.home .stats-grid .ml-card { background: #FFF6DC; border: 3px solid var(--ml-yellow); }
main.home .about-band { box-shadow: 0 8px 0 var(--ml-yellow-dark); }

/* Hero animado */
.h-hero { position: relative; overflow: hidden; isolation: isolate; }
.h-hero > * { position: relative; z-index: 1; }
.hero-art { position: relative; }
.hero-art::before { content: ""; position: absolute; inset: -6%; background: radial-gradient(circle, var(--ml-yellow) 0%, rgba(255,201,60,0) 68%); z-index: -1; border-radius: 50%; }
.fx { position: absolute; z-index: 0 !important; font-size: 30px; line-height: 1; opacity: 0; pointer-events: none; user-select: none; }
.hero-hint { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-weight: 800; font-size: 14px; color: var(--ml-yellow); }
@media (prefers-reduced-motion: no-preference) {
  .hero-art picture { display: block; animation: floaty 5s ease-in-out infinite; transform-origin: 50% 80%; }
  .hero-art::before { animation: pulse 4s ease-in-out infinite; }
  .fx { animation: rise 7s linear infinite; }
  .fx:nth-of-type(1) { left: 4%;  bottom: -8%; animation-delay: 0s;   font-size: 34px; }
  .fx:nth-of-type(2) { left: 18%; bottom: -8%; animation-delay: 1.6s; }
  .fx:nth-of-type(3) { left: 36%; bottom: -8%; animation-delay: 3.1s; font-size: 26px; }
  .fx:nth-of-type(4) { left: 52%; bottom: -8%; animation-delay: .9s;  }
  .fx:nth-of-type(5) { left: 68%; bottom: -8%; animation-delay: 4.2s; font-size: 36px; }
  .fx:nth-of-type(6) { left: 82%; bottom: -8%; animation-delay: 2.4s; }
  .fx:nth-of-type(7) { left: 92%; bottom: -8%; animation-delay: 5.3s; font-size: 24px; }
  .h-hero h1 { animation: pop .8s cubic-bezier(.2,1.4,.4,1) both; }
  .h-hero p { animation: fadeup .8s .25s both; }
  .h-hero .actions { animation: fadeup .8s .45s both; }
  .h-hero .btn-yellow { animation: wiggle 3s 2s ease-in-out infinite; }
  .topic { animation: fadeup .6s both; }
  .topic:nth-child(2) { animation-delay: .08s; } .topic:nth-child(3) { animation-delay: .16s; }
  .topic:nth-child(4) { animation-delay: .24s; } .topic:nth-child(5) { animation-delay: .32s; }
  .topic:hover .t-emoji { animation: wiggle .6s ease-in-out; display: inline-block; }
  @keyframes floaty { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-14px) rotate(1.5deg); } }
  @keyframes pulse { 0%,100% { transform: scale(.94); opacity: .55; } 50% { transform: scale(1.06); opacity: .9; } }
  @keyframes rise { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: .9; } 85% { opacity: .8; } 100% { transform: translateY(-520px) rotate(25deg); opacity: 0; } }
  @keyframes pop { 0% { transform: scale(.85) translateY(14px); opacity: 0; } 100% { transform: none; opacity: 1; } }
  @keyframes fadeup { 0% { transform: translateY(16px); opacity: 0; } 100% { transform: none; opacity: 1; } }
  @keyframes wiggle { 0%,100% { transform: rotate(0); } 10% { transform: rotate(-4deg) scale(1.04); } 20% { transform: rotate(4deg) scale(1.04); } 30% { transform: rotate(0); } }
}

/* Mango bailarín */
.mango-dance { position: absolute; left: -34px; bottom: -22px; width: 150px; height: 160px; padding: 0; border: 0; background: none; cursor: pointer; z-index: 3; -webkit-tap-highlight-color: transparent; }
.mango-dance img { border: 0; border-radius: 0; width: 100%; height: auto; position: relative; z-index: 1; filter: drop-shadow(0 4px 0 rgba(74,46,18,.25)); transform-origin: 50% 100%; }
.mango-shadow { position: absolute; left: 18%; right: 18%; bottom: 0; height: 14px; border-radius: 50%; background: rgba(74,46,18,.28); }
.mango-dance:focus-visible { outline: 3px solid var(--ml-yellow); outline-offset: 4px; border-radius: 20px; }
.pop-note { position: absolute; left: 40%; top: 20%; font-size: 26px; pointer-events: none; opacity: 0; z-index: 4; animation: popnote 1.1s ease-out forwards; }
@media (max-width: 800px) { .mango-dance { left: -6px; width: 110px; height: 118px; } }
@media (prefers-reduced-motion: no-preference) {
  .mango-dance img { animation: bounce 1.5s ease-in-out infinite; }
  .mango-shadow { animation: shadow 1.5s ease-in-out infinite; }
  .mango-dance.jump img { animation: bigjump .8s ease-out 1, bounce 1.5s .8s ease-in-out infinite; }
  @keyframes bounce {
    0%,100% { transform: translateY(0) scale(1.08, .92); }
    20% { transform: translateY(0) scale(1.08, .92); }
    50% { transform: translateY(-34px) scale(.94, 1.08) rotate(-5deg); }
    80% { transform: translateY(0) scale(1.08, .92) rotate(0); }
  }
  @keyframes shadow { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(.6); opacity: .45; } }
  @keyframes bigjump { 0% { transform: scale(1.1,.85); } 35% { transform: translateY(-90px) rotate(360deg) scale(.95,1.1); } 70% { transform: translateY(0) scale(1.15,.85); } 100% { transform: none; } }
  @keyframes popnote { 0% { transform: translate(0,0) scale(.6); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.1); opacity: 0; } }
}

/* Pie con logo y plataformas */
footer.site-footer { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 20px 40px; }
.foot-logo img { height: 80px; width: auto; transition: transform .2s; }
.foot-logo:hover img { transform: rotate(-3deg) scale(1.05); }
.foot-line { margin: 0; font-weight: 700; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
footer.site-footer .foot-links a { background: rgba(255,253,247,.16); color: var(--ml-cream); text-decoration: none; font-weight: 800; padding: 10px 16px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 100px; }
footer.site-footer .foot-links a:hover { background: var(--ml-yellow); color: var(--ml-brown); }
footer.site-footer a:focus-visible { outline: 3px solid var(--ml-yellow); outline-offset: 2px; }

/* Video en el hero */
.hero-video { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: 24px; border: 4px solid var(--ml-cream); background: #111; box-shadow: 0 8px 0 rgba(0,0,0,.18); }
.hero-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 20px; }
.hero-art .hero-video { overflow: visible; }
.hero-art .mango-dance { bottom: -40px; }

/* Hero centrado con video grande */
.h-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 22px; padding: 36px 36px 52px; }
.h-hero .actions { justify-content: center; }
.h-hero p { max-width: 62ch; margin-left: auto; margin-right: auto; }
.h-hero h1 { font-size: 52px; }
.hero-art { width: 100%; max-width: 920px; }
.hero-art .mango-dance { left: -46px; bottom: -34px; width: 170px; height: 180px; }
@media (max-width: 800px) {
  .h-hero { padding: 24px 16px 44px; }
  .h-hero h1 { font-size: 36px; }
  .hero-art .mango-dance { left: -8px; bottom: -30px; width: 110px; height: 118px; }
}

/* Juego: Frutería */
main.game-main { background: linear-gradient(180deg, #BFE9E0 0%, #FFF3C9 100%); }
.game-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.game-top .back { font-weight: 800; color: var(--ml-red-dark); text-decoration: none; background: var(--ml-cream); padding: 10px 16px; border-radius: 100px; min-height: 44px; display: inline-flex; align-items: center; }
.stars { display: flex; gap: 6px; background: var(--ml-cream); padding: 6px 14px; border-radius: 100px; font-size: 30px; line-height: 1; }
.star { color: #D9C9A8; transition: transform .2s; }
.star.on { color: var(--ml-yellow); text-shadow: 0 2px 0 var(--ml-yellow-dark); transform: scale(1.15); }
.game-board { text-align: center; position: relative; }
.game-board h1 { font-size: 40px; color: var(--ml-red); }
.g-sub { font-weight: 800; color: var(--ml-brown-soft); margin: 6px 0 18px; }
.g-stage { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: center; max-width: 900px; margin: 0 auto 22px; }
@media (max-width: 700px) { .g-stage { grid-template-columns: 1fr; } .game-board h1 { font-size: 30px; } }
.guide { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.guide img { width: 120px; height: auto; }
.bubble { margin: 0; background: #fff; border: 3px solid var(--ml-brown); border-radius: 22px; padding: 12px 16px; font-weight: 800; color: var(--ml-brown); min-height: 3.4em; display: flex; align-items: center; justify-content: center; }
.crate { background: #C98F4B; border: 6px solid #8A5A24; border-radius: 22px; padding: 16px; min-height: 170px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-content: center; box-shadow: inset 0 -10px 0 rgba(0,0,0,.12), 0 8px 0 #8A5A24; }
.mg { font-size: 54px; line-height: 1; animation: drop .45s both; animation-delay: var(--d); }
@keyframes drop { 0% { transform: translateY(-40px) scale(.6); opacity: 0; } 70% { transform: translateY(4px) scale(1.1); } 100% { transform: none; opacity: 1; } }
.baskets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; max-width: 760px; margin: 0 auto; }
.basket { font: inherit; position: relative; min-height: 84px; border-radius: 20px 20px 34px 34px; border: 4px solid #8A5A24; background: repeating-linear-gradient(90deg, #E2AE6A 0 12px, #D49A52 12px 24px); cursor: pointer; box-shadow: 0 6px 0 #8A5A24; transition: transform .12s; }
.basket:hover { transform: translateY(-3px); }
.basket:focus-visible { outline: 3px solid var(--ml-red); outline-offset: 3px; }
.basket .num { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 40px; color: #fff; text-shadow: 0 3px 0 #8A5A24, 0 0 0 #000; -webkit-text-stroke: 2px #8A5A24; }
.basket.locked { filter: grayscale(.7) brightness(.9); }
.basket .lk { position: absolute; right: 6px; top: 4px; font-size: 18px; }
.basket.ok { background: #7ED58B; border-color: #2F8F5B; box-shadow: 0 6px 0 #2F8F5B; animation: jumpok .5s; }
.basket.no { animation: shake .4s; border-color: var(--ml-red-dark); }
@keyframes jumpok { 40% { transform: translateY(-14px) scale(1.08); } }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.g-actions { margin-top: 22px; display: flex; justify-content: center; }
.g-note { text-align: center; font-weight: 700; color: var(--ml-brown-soft); font-size: 14px; margin: 18px 0 0; }
.win { position: fixed; inset: 0; background: rgba(74,46,18,.65); display: grid; place-items: center; z-index: 200; padding: 16px; }
.win[hidden] { display: none; }
.win-card { background: var(--ml-cream); border: 5px solid var(--ml-yellow); border-radius: 30px; padding: 28px; max-width: 460px; text-align: center; box-shadow: 0 10px 0 var(--ml-yellow-dark); }
.win-emoji { font-size: 72px; line-height: 1; animation: floaty 2s ease-in-out infinite; }
.win-card h2 { font-size: 30px; color: var(--ml-red); margin: 8px 0; }
.win-card p { font-weight: 700; color: var(--ml-brown-soft); margin: 0 0 16px; }
.win-btns { display: flex; flex-direction: column; gap: 10px; }
.win-btns .btn { justify-content: center; }
.game-cta { background: var(--ml-yellow); border-radius: 26px; padding: 22px 26px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; box-shadow: 0 6px 0 var(--ml-yellow-dark); }
.game-cta h2 { font-size: 24px; color: #7A4B00; }
.game-cta p { margin: 4px 0 0; font-weight: 700; color: #5A3A00; }
.game-cta .btn { background: var(--ml-red); color: #fff; box-shadow: 0 5px 0 var(--ml-red-dark); }

/* Planes */
.plans-hero { text-align: center; max-width: 720px; margin: 8px auto 28px; }
.plans-hero h1 { font-size: 40px; color: var(--ml-red); }
.plans-hero p { font-weight: 700; color: var(--ml-brown-soft); font-size: 18px; margin: 10px 0 0; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; max-width: 820px; margin: 0 auto; }
@media (max-width: 700px) { .plans { grid-template-columns: 1fr; } .plans-hero h1 { font-size: 30px; } }
.plan { position: relative; background: #fff; border: 3px solid #EBDDBF; border-radius: 28px; padding: 30px 26px; display: flex; flex-direction: column; gap: 14px; }
.plan.featured { border-color: var(--ml-yellow); box-shadow: 0 12px 0 -4px var(--ml-yellow); }
.plan h2 { font-size: 28px; color: var(--ml-brown); }
.plan .for { margin: 0; color: var(--ml-brown-light); font-weight: 700; }
.plan .price { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 46px; line-height: 1; color: var(--ml-brown); }
.plan .price small { font-family: 'Nunito', sans-serif; font-size: 16px; color: var(--ml-brown-light); }
.plan .price-note { margin: -6px 0 0; color: var(--ml-brown-light); font-size: 14px; font-weight: 700; }
.plan ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-weight: 700; flex: 1; }
.plan .badge { position: absolute; top: -16px; left: 24px; background: var(--ml-red); color: #fff; font-weight: 800; font-size: 13px; padding: 6px 14px; border-radius: 100px; }
.plan .fine { margin: 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--ml-brown-light); }
.btn-ghost-red { background: transparent; border: 3px solid var(--ml-brown); color: var(--ml-brown); justify-content: center; }
.plan .btn { justify-content: center; }
main.home .trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; }
@media (max-width: 700px) { main.home .trust { grid-template-columns: 1fr; } }
main.home .trust div { background: #FFF6DC; border: 3px solid var(--ml-yellow); border-radius: 22px; padding: 18px; }
main.home .trust h3 { font-size: 18px; color: var(--ml-red); margin-bottom: 4px; }
main.home .trust p { margin: 0; font-weight: 700; color: var(--ml-brown-soft); font-size: 15px; }

/* Preguntas frecuentes */
.faq-list { display: grid; gap: 10px; max-width: 820px; margin: 0 auto; }
.faq details { background: #FFF6DC; border: 3px solid var(--ml-yellow); border-radius: 18px; padding: 2px 18px; }
.faq summary { cursor: pointer; font-weight: 800; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 14px; color: var(--ml-brown); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: 'Baloo 2', sans-serif; font-size: 24px; line-height: 1; color: var(--ml-red); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 14px; font-weight: 700; color: var(--ml-brown-soft); line-height: 1.5; }

/* Hero: video más grande y más arriba */
main.home { max-width: 1320px; }
.h-hero { gap: 14px; padding: 26px 32px 56px; }
.h-hero h1 { font-size: 44px; margin: 0; }
.h-hero p { font-size: 17px; margin: 0; }
.h-hero .actions { margin-top: 2px; }
.hero-art { max-width: 1160px; margin-top: 6px; }
@media (max-width: 800px) { .h-hero { padding: 20px 14px 44px; } .h-hero h1 { font-size: 34px; } }

/* Botón para activar el sonido del video del hero */
.unmute { position: absolute; left: 0; right: 0; top: 76px; margin: 0 auto; width: max-content; max-width: 92%; z-index: 5; font: inherit; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: 17px; min-height: 48px; padding: 0 20px; border: 0; border-radius: 100px; background: var(--ml-yellow); color: var(--ml-brown); box-shadow: 0 5px 0 var(--ml-yellow-dark); cursor: pointer; }
.unmute:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) { .unmute { animation: wiggle 2.6s 1.5s ease-in-out infinite; } }