/* estilos comunes para todo el proyecto */
body {
    font-family: 'Nunito', sans-serif;
    background: #0f0c29;
}

/* ============================================ */
/* OPTIMIZACIÓN PARA MÓVIL - RENDIMIENTO */
/* ============================================ */
@media(max-width:768px){
  /* Desabilitar animaciones pesadas en móvil */
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  /* Desabilitar sombras pesadas */
  .app-card {
    box-shadow: none !important;
  }
  
  /* Simplificar gradientes */
  .card-rosa, .card-azul, .card-morado, .card-verde, .card-naranja, .card-cyan {
    box-shadow: none !important;
  }
  
  /* Desabilitar transform en hover (móvil no tiene hover) */
  .app-card:hover, .app-card:hover .card-emoji-wrap {
    transform: none !important;
  }
  
  /* Reducir padding en móvil */
  main {
    padding: 20px 12px 40px !important;
  }
}

/* Respetar preferencia de usuario: reduce-motion */
@media(prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* agrega aquí las reglas que compartía tu HTML original */

/* --- estilos copiados de index.html --- */
:root {
  --rojo:#ed515f; --naranja:#ec6f42; --amarillo:#f2cd3d;
  --verde:#3ac875; --azul:#2f90ee; --morado:#a568e0;
  --rosa:#f3759f; --cyan:#15c8c9;
}

/* aumentar interletraje para Fredoka One (mejor legibilidad) */
.fredoka-letters, .logo h1, .back-btn, .home-title h2, .app-card h3, .app-hero h2,
.vocal-ltr, .vocal-mini, .play-btn, .lt-up, .lt-low, .num-big, .num-word,
.num-play, .toast, .tab-btn, .operacion-display, .btn-primary {
  letter-spacing:0.04em;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Nunito',sans-serif;background:#0f0c29;min-height:100vh;overflow-x:hidden;}

/* FONDO ANIMADO */
.bg-bubbles{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden;}
.bubble{position:absolute;bottom:-100px;border-radius:50%;opacity:0.07;animation:rise linear infinite;}
@keyframes rise{0%{transform:translateY(0) scale(1);opacity:0.07;}80%{opacity:0.07;}100%{transform:translateY(-110vh) scale(1.4);opacity:0;}}

/* Reducir animaciones en dispositivos móviles */
@media(max-width:768px){
  .bubble{animation:none !important;}
}

/* HEADER */
header{position:relative;z-index:10;background:linear-gradient(90deg,#1a0533 0%,#0d1b4b 100%);padding:16px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:3px solid rgba(255,248,231,0.08);}
.logo{display:flex;align-items:center;gap:14px;}
.logo-icon{
  /* Contenedor flexible para el logo */
  width:auto;
  height:auto;
  border-radius:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  box-shadow:none;
  animation:none;
  flex-shrink:0;
}
.nav-right{display:flex;align-items:center;gap:14px;}
.logo-icon img{
  /* Logo responsivo - se adapta a todos los dispositivos */
  height:100%;
  width:auto;
  max-width:min(120px, 18vw);
  min-height:50px;
  object-fit:contain;
  display:block;
}

/* Breakpoints responsivos para logo */
/* MÓVILES PEQUEÑOS (menos de 380px) */
@media(max-width:379px){
  header{padding:8px 12px;}
  .logo-icon img{
    max-width:55px;
    min-height:45px;
  }
  .logo{gap:6px;}
}

/* MÓVILES MEDIANOS (380px - 600px) */
@media(min-width:380px) and (max-width:600px){
  header{padding:10px 16px;}
  .logo-icon img{
    max-width:75px;
    min-height:60px;
  }
  .logo h1{font-size:1.1rem;}
}

/* MÓVILES GRANDES (601px - 768px) */
@media(min-width:601px) and (max-width:768px){
  header{padding:12px 20px;}
  .logo-icon img{
    max-width:100px;
    min-height:80px;
  }
  .logo h1{font-size:1.3rem;}
}

/* TABLETS (769px - 1024px) */
@media(min-width:769px) and (max-width:1024px){
  header{padding:12px 28px;}
  .logo-icon img{
    max-width:140px;
    min-height:110px;
  }
  .logo h1{font-size:1.5rem;}
}

/* PC GRANDES (1025px+) */
@media(min-width:1025px){
  header{padding:14px 36px;}
  .logo-icon img{
    max-width:180px;
    min-height:140px;
  }
  .logo h1{font-size:1.7rem;}
}

@keyframes pulse-logo{0%,100%{box-shadow:0 0 20px rgba(255,211,42,0.5);}50%{box-shadow:0 0 36px rgba(255,211,42,0.9);}}
.logo h1{font-family:'Fredoka One',cursive;font-size:1.9rem;background:linear-gradient(90deg,#FFF8E7,var(--amarillo));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.logo p{color:rgba(255,248,231,0.55);font-size:0.78rem;font-weight:700;letter-spacing:1px;}
.back-btn{display:none;background:rgba(255,248,231,0.12);color:white;border:2px solid rgba(255,248,231,0.2);border-radius:30px;padding:10px 22px;font-family:'Fredoka One',cursive;font-size:1rem;cursor:pointer;transition:all 0.2s;}
.back-btn:hover{background:rgba(255,248,231,0.22);}
/* Hide teacher-link globally - it's now in menu */
.teacher-link{display:none;}

/* MAIN */
main{position:relative;z-index:5;padding:40px 24px 60px;max-width:1100px;margin:0 auto;}
.screen{display:none;}
.screen.active{display:block;animation:fadeIn 0.35s ease;}
@keyframes fadeIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}

/* HOME */
.home-title{text-align:center;margin-bottom:44px;}
.home-title h2{font-family:'Fredoka One',cursive;font-size:2.6rem;color:white;text-shadow:0 0 30px rgba(255,248,231,0.3);margin-bottom:8px;}
.home-title p{color:rgba(255,255,255,0.6);font-size:1.05rem;font-weight:700;}
.stars{display:flex;justify-content:center;gap:8px;margin-bottom:14px;}
.star{font-size:1.4rem;animation:twinkle 1.8s ease-in-out infinite;}
.star:nth-child(2){animation-delay:0.3s;}.star:nth-child(3){animation-delay:0.6s;}.star:nth-child(4){animation-delay:0.9s;}.star:nth-child(5){animation-delay:1.2s;}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0deg);opacity:1;}50%{transform:scale(1.3) rotate(15deg);opacity:0.7;}}

/* CARDS GRID */
.apps-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px;}
.app-card{border-radius:28px;padding:34px 20px 28px;text-align:center;cursor:pointer;position:relative;overflow:hidden;transition:transform 0.25s cubic-bezier(.175,.885,.32,1.275),box-shadow 0.25s;border:2px solid rgba(255,248,231,0.15);text-decoration:none;color:inherit;display:block;}
.app-card:hover{transform:translateY(-10px) scale(1.02);}
.app-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,248,231,0.1) 0%,transparent 60%);pointer-events:none;}
.card-rosa{background:linear-gradient(145deg,#ed4d71,#b14033);box-shadow:0 12px 40px rgba(237,77,113,0.45);}
.card-azul{background:linear-gradient(145deg,#2f90ee,#105ad4);box-shadow:0 12px 40px rgba(47,144,238,0.45);}
.card-morado{background:linear-gradient(145deg,#a568e0,#6d38ae);box-shadow:0 12px 40px rgba(165,104,224,0.45);}
.card-verde{background:linear-gradient(145deg,#1e9288,#45e07f);box-shadow:0 12px 40px rgba(69,224,127,0.4);}
.card-naranja{background:linear-gradient(145deg,#e7962f,#ed5759);box-shadow:0 12px 40px rgba(231,150,47,0.45);}
.card-cyan{background:linear-gradient(145deg,#17bff0,#1273eb);box-shadow:0 12px 40px rgba(23,191,240,0.4);}
.card-emoji-wrap{width:80px;height:80px;background:rgba(255,248,231,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:2.6rem;box-shadow:0 4px 16px rgba(0,0,0,0.2);transition:transform 0.3s;}
.app-card:hover .card-emoji-wrap{transform:rotate(-8deg) scale(1.12);}
.app-card h3{font-family:'Fredoka One',cursive;color:white;font-size:1.45rem;margin-bottom:6px;}
.app-card p{color:rgba(255,255,255,0.75);font-size:0.88rem;font-weight:700;}
.badge{position:absolute;top:14px;right:14px;background:var(--amarillo);color:#333;font-size:0.68rem;font-weight:900;padding:4px 10px;border-radius:20px;letter-spacing:0.5px;animation:badge-pop 1s ease-in-out infinite alternate;}
@keyframes badge-pop{from{transform:scale(1);}to{transform:scale(1.08);}}

/* APP HERO */
.app-hero{background:rgba(255,248,231,0.06);border:1px solid rgba(255,248,231,0.12);border-radius:24px;padding:28px 32px;display:flex;align-items:center;gap:20px;margin-bottom:36px;}
.app-hero .big-emoji{font-size:3.5rem;}
.app-hero h2{font-family:'Fredoka One',cursive;color:white;font-size:2rem;}
.app-hero p{color:rgba(255,255,255,0.6);font-weight:700;margin-top:4px;}

/* VOCALES */
.vocales-wrap{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;}
.vocal-card{width:175px;border-radius:26px;padding:30px 18px 22px;text-align:center;cursor:pointer;position:relative;overflow:hidden;transition:transform 0.25s cubic-bezier(.175,.885,.32,1.275);animation:float-card 4s ease-in-out infinite;}
.vocal-card:nth-child(2){animation-delay:0.4s;}.vocal-card:nth-child(3){animation-delay:0.8s;}.vocal-card:nth-child(4){animation-delay:1.2s;}.vocal-card:nth-child(5){animation-delay:1.6s;}
@keyframes float-card{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.vocal-card:hover{transform:scale(1.06) translateY(-4px)!important;}
.vc-a{background:linear-gradient(145deg,#f17272,#dd5f31);box-shadow:0 16px 40px rgba(241,114,114,0.5);}
.vc-e{background:linear-gradient(145deg,#f2cd3d,#e1923a);box-shadow:0 16px 40px rgba(226,146,58,0.5);}
.vc-i{background:linear-gradient(145deg,#6ca753,#25903a);box-shadow:0 16px 40px rgba(37,144,58,0.5);}
.vc-o{background:linear-gradient(145deg,#14adcb,#0f74a9);box-shadow:0 16px 40px rgba(15,116,169,0.5);}
.vc-u{background:linear-gradient(145deg,#c378f2,#7e46df);box-shadow:0 16px 40px rgba(126,70,223,0.5);}
.vocal-ltr{font-family:'Fredoka One',cursive;font-size:5rem;color:rgba(255,255,255,0.95);line-height:1;text-shadow:0 4px 10px rgba(0,0,0,0.3);margin-bottom:6px;}
.vocal-mini{font-family:'Fredoka One',cursive;font-size:1.5rem;color:rgba(255,255,255,0.6);margin-bottom:12px;}
.vocal-ej{color:rgba(255,255,255,0.9);font-weight:800;font-size:0.9rem;margin-bottom:4px;}
.vocal-emoji{font-size:2rem;}
.play-btn{margin-top:14px;background:rgba(255,248,231,0.25);border:2px solid rgba(255,248,231,0.4);border-radius:30px;padding:8px 20px;color:white;font-family:'Fredoka One',cursive;font-size:0.95rem;cursor:pointer;transition:all 0.2s;display:inline-flex;align-items:center;gap:6px;}
.play-btn:hover{background:rgba(255,248,231,0.4);transform:scale(1.05);}
audio{display:none;}
.ripple{position:absolute;border-radius:50%;background:rgba(255,248,231,0.35);transform:scale(0);animation:ripple-anim 0.6s linear;pointer-events:none;}
@keyframes ripple-anim{to{transform:scale(4);opacity:0;}}

/* ABECEDARIO */
.abc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:12px;}
.letra-tile{background:rgba(255,248,231,0.07);border:2px solid rgba(255,248,231,0.1);border-radius:18px;padding:16px 6px 12px;text-align:center;cursor:pointer;transition:all 0.2s;position:relative;overflow:hidden;}
.letra-tile:hover{background:rgba(255,248,231,0.15);transform:scale(1.08);border-color:rgba(255,248,231,0.3);}
.letra-tile.active-l{animation:pop-l 0.3s cubic-bezier(.175,.885,.32,1.275);}
@keyframes pop-l{0%{transform:scale(1);}50%{transform:scale(1.25);}100%{transform:scale(1.08);}}
.lt-up{font-family:'Fredoka One',cursive;font-size:2.2rem;color:white;display:block;line-height=1;}
.lt-low{font-family:'Fredoka One',cursive;font-size:1.1rem;color:rgba(255,255,255,0.4);display:block;margin-bottom:6px;}
.play-btn-abc{background:rgba(255,248,231,0.2);border:1px solid rgba(255,248,231,0.3);border-radius:20px;padding:4px 10px;font-size:1rem;cursor:pointer;transition:all 0.2s;margin-top:4px;display:inline-block;}
.play-btn-abc:hover{background:rgba(255,248,231,0.35);transform:scale(1.1);}
.lc0{border-color:#ff6b9d55;}.lc0 .lt-up{color:#ff6b9d;}
.lc1{border-color:#ffd32a55;}.lc1 .lt-up{color:#ffd32a;}
.lc2{border-color:#2ed57355;}.lc2 .lt-up{color:#2ed573;}
.lc3{border-color:#1e90ff55;}.lc3 .lt-up{color:#74b9ff;}

/* FOOTER */
/* centered elegant footer with white text on transparent background */
footer{
    margin:42px auto 0;        /* space above and center horizontally */
    max-width:1100px;          /* keep alignment with main content */
    color:#fff;                /* white text for elegance */
    text-align:center;         /* center contents */
    font-size:0.85rem;
    padding:16px 8px;
    /* no background, transparent by default */
    /* optionally add a subtle text-shadow for readability */
    text-shadow:0 1px 2px rgba(0,0,0,0.4);
}
footer a{color:inherit;text-decoration:underline;}

/* teacher-link styles match back-button aesthetic */
/* Teacher link removed from header - now in menu only */
.teacher-link{
    display:none;
}

/* Removed: .teacher-link and .back-btn buttons from header (now in menu only) */
/* restore some unused color classes below */
.lc4{border-color:#a55eea55;}.lc4 .lt-up{color:#a55eea;}
.lc5{border-color:#ff6b3555;}.lc5 .lt-up{color:#ff9f7f;}

/* NÚMEROS */
.num-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px;}
.num-tile{border-radius:24px;padding:24px 14px 20px;text-align:center;cursor:pointer;position:relative;overflow:hidden;transition:transform 0.25s cubic-bezier(.175,.885,.32,1.275);border:2px solid rgba(255,248,231,0.15);}
.num-tile:hover{transform:scale(1.06) rotate(-1deg);}
.ng0{background:linear-gradient(145deg,#636e72,#2d3436);box-shadow:0 12px 30px rgba(0,0,0,0.4);}
.ng1{background:linear-gradient(145deg,#fd79a8,#e84393);box-shadow:0 12px 30px rgba(232,67,147,0.5);}
.ng2{background:linear-gradient(145deg,#f39c12,#d35400);box-shadow:0 12px 30px rgba(243,156,18,0.5);}
.ng3{background:linear-gradient(145deg,#00b894,#00cec9);box-shadow:0 12px 30px rgba(0,184,148,0.5);}
.ng4{background:linear-gradient(145deg,#0984e3,#6c5ce7);box-shadow:0 12px 30px rgba(108,92,231,0.5);}
.ng5{background:linear-gradient(145deg,#e17055,#d63031);box-shadow:0 12px 30px rgba(214,48,49,0.5);}
.ng6{background:linear-gradient(145deg,#00cec9,#0984e3);box-shadow:0 12px 30px rgba(9,132,227,0.5);}
.ng7{background:linear-gradient(145deg,#a29bfe,#6c5ce7);box-shadow:0 12px 30px rgba(108,92,231,0.5);}
.ng8{background:linear-gradient(145deg,#fd79a8,#a55eea);box-shadow:0 12px 30px rgba(165,94,234,0.5);}
.ng9{background:linear-gradient(145deg,#55efc4,#00b894);box-shadow:0 12px 30px rgba(0,184,148,0.5);}
.ng10{background:linear-gradient(145deg,#ffd32a,#f0932b);box-shadow:0 12px 30px rgba(240,147,43,0.5);}
.num-big{font-family:'Fredoka One',cursive;font-size:4rem;color:white;line-height:1;text-shadow:0 4px 10px rgba(0,0,0,0.3);}
.num-word{font-family:'Fredoka One',cursive;font-size:1.1rem;color:rgba(255,255,255,0.85);margin:6px 0;}
.num-dots{font-size:1.2rem;letter-spacing:3px;min-height:30px;color:rgba(255,255,255,0.8);}
.num-play{margin-top:10px;background:rgba(255,248,231,0.2);border:none;border-radius:20px;padding:6px 16px;color:white;font-family:'Fredoka One',cursive;font-size:0.85rem;cursor:pointer;transition:background 0.2s;}
.num-play:hover{background:rgba(255,248,231,0.35);}

/* TOAST */
.toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(80px);background:linear-gradient(90deg,#ff6b35,#ff4757);color:white;padding:14px 30px;border-radius:40px;font-family:'Fredoka One',cursive;font-size:1.05rem;z-index:1000;transition:transform 0.3s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 8px 28px rgba(255,71,87,0.5);pointer-events:none;}
.toast.show{transform:translateX(-50%) translateY(0);}

/* ====== MENÚ HAMBURGUESA (VISIBLE EN TODAS LAS RESOLUCIONES) ====== */
.menu-toggle{
  display:flex;
  background:none;
  border:none;
  cursor:pointer;
  flex-direction:column;
  gap:6px;
  padding:6px;
  z-index:1001;
  transition:all 0.3s ease;
}
.menu-toggle span{
  width:28px;
  height:3px;
  background:white;
  border-radius:2px;
  transition:all 0.3s ease;
  box-shadow:0 2px 4px rgba(0,0,0,0.2);
}
.menu-toggle.active span:nth-child(1){
  transform:rotate(45deg) translate(10px, 10px);
}
.menu-toggle.active span:nth-child(2){
  opacity:0;
}
.menu-toggle.active span:nth-child(3){
  transform:rotate(-45deg) translate(7px, -7px);
}
/* cuando el menú está abierto ocultamos el icono hamburguesa para que solo quede la X interna */
.menu-toggle.active{
  display:none;
}

.mobile-menu{
  position:fixed;
  top:0;
  right:0;
  width:100%;
  max-height:100vh;
  background:#FFF8E7;
  z-index:1000;
  transform:translateX(100%);
  transition:transform 0.3s ease;
  overflow-y:auto;
  padding-top:0;
  box-shadow:-8px 0 32px rgba(0,0,0,0.15);
  /* bordes curvados en el lado izquierdo para un aspecto más suave */
  border-top-left-radius:24px;
  border-bottom-left-radius:24px;
}
.mobile-menu.active{
  transform:translateX(0);
}

.mobile-menu-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 24px;
  border-bottom:none;
  margin-bottom:0;
  background:#ffd32a;
  position:sticky;
  top:0;
  z-index:1001;
  border-radius:0;
  /* la cabecera también hereda el borde redondeado en la esquina superior izquierda */
  border-top-left-radius:24px;
}
.mobile-menu-header h2{
  font-family:'Fredoka One',cursive;
  font-size:1.1rem;
  color:#1a0533;
  margin:0;
  font-weight:900;
  letter-spacing:1px;
}
.close-btn{
  background:none;
  border:none;
  color:#1a0533;
  font-size:1.8rem;
  cursor:pointer;
  padding:0;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform 0.2s;
}
.close-btn:hover{
  transform:scale(1.2);
}

.mobile-menu-list{
  list-style:none;
  padding:0;
  margin:0;
}
.mobile-menu-list li{
  border-bottom:1px solid #f0f0f0;
}
.mobile-menu-list a{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 24px;
  color:#333;
  text-decoration:none;
  font-family:'Nunito',sans-serif;
  font-size:0.95rem;
  font-weight:600;
  transition:all 0.2s;
  border-left:3px solid transparent;
}
.mobile-menu-list a:hover{
  background:#f9f9f9;
  border-left-color:#ffd32a;
  padding-left:32px;
}

/* backdrop oscuro cuando el menú está abierto */
.menu-backdrop{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  z-index:999;
  display:none;
}
.menu-backdrop.active{
  display:block;
}

@media(max-width:600px){
  header{padding:12px 16px;}
  .logo h1{font-size:1.3rem;}
  main{padding:24px 12px 50px;}
  .vocal-card{width:145px;}
  .home-title h2{font-size:1.9rem;}
  
  .logo-icon img{
    max-height:45px;
  }
  
  /* Menú hamburguesa visible en móvil */
  .menu-toggle{
    display:flex;
  }
  
  /* nav-right contains only hamburger menu */
  .nav-right{
    gap:0;
  }
  
  /* Mobile menu optimizado */
  .mobile-menu-list a{
    font-size:0.9rem;
    padding:12px 20px;
  }
  
  /* OPTIMIZACIONES DE RENDIMIENTO PARA MÓVIL */
  /* Deshabilitar animaciones costosas */
  * {animation-duration: 0s !important;}
  
  .star{animation:none !important;}
  .app-card{animation:none !important;}
  .app-card:hover{transform:none !important;}
  .vocal-card{animation:none !important;transition:none;}
  .letra-tile{animation:none;transition:none;}
  .badge{animation:none !important;}
  
  /* Reducir box-shadow para performance */
  .app-card, .card-emoji-wrap{box-shadow:none !important;}
  
  /* Simplificar gradientes */
  header{background:#0d1b4b !important;}
}

/* TABLET (601px - 1024px) */
@media(min-width:601px) and (max-width:1024px){
  .mobile-menu{
    max-width:400px;
  }
  .mobile-menu-list a{
    font-size:1rem;
    padding:16px 24px;
  }
}

/* DESKTOP (1025px+) */
@media(min-width:1025px){
  .mobile-menu{
    max-width:320px;
  }
  .mobile-menu-header{
    padding:20px 24px;
  }
  .mobile-menu-list a{
    font-size:0.95rem;
    padding:15px 24px;
  }
}