/* ===========================================================================
   apps.css — páginas que presentan las apps en beta: musica-del-tio-ia.html y
   agenda-del-profe.html. Las apps mismas viven en musica/ y agenda/.
   =========================================================================== */

/* ===========================  MÚSICA DEL TÍO IA  ========================= */
/* Tarjeta de la portada que lleva a la app musica/. Oscura como el pizarrón. */
.musica-promo{
  position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:20px;
  margin:64px 0 10px;padding:38px 40px;border:var(--borde);border-radius:var(--radio);overflow:hidden;
  color:#fff;box-shadow:8px 8px 0 var(--limon);
  background:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/40px 40px,
    radial-gradient(120% 100% at 0% 0%,#3A2A78 0%,var(--tinta) 60%);
}
.musica-promo-ante{font-family:var(--dato);font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--limon);margin:0 0 14px}
.musica-promo h1,.musica-promo h2{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800;letter-spacing:-.04em}
.musica-promo h1 span,.musica-promo h2 span{display:inline-block;background:var(--limon);color:var(--tinta);padding:0 .14em .04em;border-radius:12px;transform:rotate(-2deg)}
.musica-promo-bajada{margin:18px 0 0;max-width:48ch;font-size:1.05rem;line-height:1.55;color:#CBC9F2}
.musica-promo-bajada b{color:#fff}
.musica-promo-lista{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0}
.musica-promo-lista li{font-family:var(--dato);font-size:.72rem;letter-spacing:.06em;padding:5px 11px;border:2px solid rgba(184,239,60,.55);border-radius:999px;color:#E9F9C9}
.musica-promo-boton{
  display:inline-flex;align-items:center;gap:9px;margin-top:24px;padding:13px 22px;border-radius:999px;
  font-family:var(--titular);font-weight:800;font-size:1.05rem;text-decoration:none;
  background:var(--limon);color:var(--tinta);border:var(--borde);box-shadow:5px 5px 0 var(--cielo);
  transition:transform .14s,box-shadow .14s,background .14s;
}
.musica-promo-boton:hover,.musica-promo-boton:focus-visible{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--cielo);background:var(--cielo)}
.musica-promo-boton:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--cielo)}
.musica-promo-reparto{position:relative;min-height:300px}
.musica-promo-reparto img{position:absolute;height:auto;display:block}
.musica-promo-bip{right:0;bottom:0;width:min(78%,330px)}
.musica-promo-nota{left:2%;bottom:-6px;width:min(34%,140px);transform:rotate(-6deg)}
.musica-promo-n{position:absolute;font-family:var(--titular);font-weight:800;line-height:1}
.musica-promo-n.n1{left:12%;top:8%;font-size:3rem;color:var(--cielo);transform:rotate(-12deg)}
.musica-promo-n.n2{right:6%;top:0;font-size:2.4rem;color:var(--chicle);transform:rotate(10deg)}
@media (max-width:760px){
  .musica-promo{grid-template-columns:1fr;padding:28px 22px 0;margin-top:48px}
  .musica-promo-reparto{min-height:230px}
  .musica-promo-bip{right:6%;width:min(58%,240px)}
  .musica-promo-nota{left:8%;width:min(28%,110px)}
}
@media (prefers-reduced-motion:reduce){.musica-promo-boton{transition:none}}


/* ===========================  AGENDA DEL PROFE (BETA)  =================== */
/* Tarjeta de la portada que lleva a la app agenda/. Clara, como papel de post-it. */
.agenda-promo{
  position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:20px;
  margin:34px 0 10px;padding:38px 40px;border:var(--borde);border-radius:var(--radio);overflow:hidden;
  color:var(--tinta);box-shadow:8px 8px 0 var(--chicle);
  background:
    linear-gradient(rgba(27,26,58,.06) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,rgba(27,26,58,.06) 1px,transparent 1px) 0 0/40px 40px,
    #F3ECDD;
}
.agenda-promo-ante{font-family:var(--dato);font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:#C2185B;margin:0 0 14px}
.agenda-promo h1,.agenda-promo h2{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800;letter-spacing:-.04em}
.agenda-promo h1 span,.agenda-promo h2 span{display:inline-block;background:var(--chicle);color:#fff;padding:0 .14em .04em;border-radius:12px;border:3px solid var(--tinta);transform:rotate(-2deg)}
.agenda-promo-beta{
  display:inline-block;vertical-align:.5em;margin-left:.2em;padding:3px 10px;border:3px solid var(--tinta);border-radius:8px;
  background:var(--limon);font-style:normal;font-size:.32em;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:3px 3px 0 var(--tinta);transform:rotate(8deg);
}
.agenda-promo-bajada{margin:18px 0 0;max-width:50ch;font-size:1.05rem;line-height:1.55;color:#3B3960}
.agenda-promo-bajada b{color:var(--tinta)}
.agenda-promo-lista{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0}
.agenda-promo-lista li{font-family:var(--dato);font-size:.72rem;letter-spacing:.06em;padding:5px 11px;border:2px solid var(--tinta);border-radius:999px;background:#FBF8F1}
.agenda-promo-botones{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:24px}
.agenda-promo-boton{
  display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:999px;
  font-family:var(--titular);font-weight:800;font-size:1.05rem;text-decoration:none;
  background:var(--chicle);color:#fff;border:var(--borde);box-shadow:5px 5px 0 var(--tinta);
  transition:transform .14s,box-shadow .14s;
}
.agenda-promo-boton:hover,.agenda-promo-boton:focus-visible{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--tinta)}
.agenda-promo-boton:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--tinta)}
.agenda-promo-compartir{
  display:inline-flex;align-items:center;padding:11px 18px;border-radius:999px;border:var(--borde);background:#fff;
  font-weight:700;color:var(--tinta);text-decoration:none;
}
.agenda-promo-compartir:hover,.agenda-promo-compartir:focus-visible{background:var(--limon)}
.agenda-promo-nota{margin:18px 0 0;max-width:52ch;font-size:.88rem;line-height:1.5;color:var(--tenue)}
.agenda-promo-nota a{color:#C2185B;font-weight:700}
.agenda-promo-arte{position:relative;min-height:320px}
.agenda-promo-bip{position:absolute;right:0;bottom:-8px;width:min(62%,250px);height:auto;display:block}
.agenda-postit{
  position:absolute;width:118px;min-height:110px;padding:14px 11px;border:2px solid var(--tinta);box-shadow:4px 5px 0 rgba(27,26,58,.85);
  font-family:var(--titular);font-weight:800;font-size:.95rem;line-height:1.12;letter-spacing:-.02em;
}
.agenda-postit.p1{left:4%;top:4%;background:#F7DF7E;transform:rotate(-7deg)}
.agenda-postit.p2{left:42%;top:0;background:#F7BFD9;transform:rotate(6deg)}
.agenda-postit.p3{left:10%;top:46%;background:#BFE5CF;transform:rotate(4deg)}
@media (max-width:760px){
  .agenda-promo{grid-template-columns:1fr;padding:28px 22px 0;margin-top:28px}
  .agenda-promo-arte{min-height:250px}
  .agenda-promo-bip{right:4%;width:min(46%,200px)}
  .agenda-postit{width:104px;min-height:96px;font-size:.85rem}
  .agenda-postit.p2{left:34%}
  .agenda-postit.p3{left:4%;top:50%}
}
@media (prefers-reduced-motion:reduce){.agenda-promo-boton{transition:none}}


/* ===========================  PARTES COMUNES DE LAS DOS PÁGINAS  ========== */
.app-hero{margin-top:34px}
.app-hero h1{margin:0;line-height:1.05}
.app-beta{display:inline-block;padding:1px 8px;border-radius:6px;background:var(--chicle);color:#fff;letter-spacing:.12em}
.app-aparte{margin:10px 0 0;font-size:.82rem;opacity:.75}
.musica-promo-corchi{right:8%;bottom:-10px;width:min(62%,250px)}
.musica-promo-n.n3{right:2%;bottom:30%;font-size:2.6rem;color:var(--limon);transform:rotate(-8deg)}
.agenda-promo-pita{position:absolute;right:2%;bottom:-8px;width:min(48%,200px);height:auto;display:block}
@media (max-width:760px){
  .musica-promo-corchi{right:24%;width:min(46%,190px)}
  .agenda-promo-pita{width:min(38%,150px)}
}

/* El personaje cuenta la app, como globo de diálogo. */
.app-cuenta{display:grid;grid-template-columns:minmax(120px,200px) minmax(0,1fr);gap:26px;align-items:center;margin:56px 0 0}
.app-cuenta img{width:100%;height:auto;filter:drop-shadow(0 6px 0 rgba(27,26,58,.18))}
.app-globo{position:relative;padding:22px 26px;border:var(--borde);border-radius:22px;background:#fff;box-shadow:6px 6px 0 var(--tinta)}
.app-globo::before{
  content:"";position:absolute;left:-17px;top:50%;width:28px;height:28px;background:#fff;
  border-left:var(--borde);border-bottom:var(--borde);transform:translateY(-50%) rotate(45deg);
}
.app-quien{margin:0;font-family:var(--dato);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--azul)}
.app-globo h2{font-family:var(--titular);font-weight:800;font-size:clamp(1.4rem,3vw,1.9rem);letter-spacing:-.03em;margin:6px 0 10px}
.app-globo p{margin:0 0 10px;line-height:1.6;max-width:64ch}
.app-globo p:last-child{margin-bottom:0}
@media (max-width:640px){
  .app-cuenta{grid-template-columns:1fr;gap:14px}
  .app-cuenta img{width:130px;margin:0 auto}
  .app-globo::before{left:50%;top:-17px;transform:translateX(-50%) rotate(135deg)}
}

/* Lo que trae: tarjetas de colores (en la agenda, como post-its). */
.app-trae{margin:56px 0 0}
.app-trae h2,.app-pasos-caja h2{font-family:var(--titular);font-weight:800;font-size:clamp(1.6rem,3.6vw,2.2rem);letter-spacing:-.03em;margin:0 0 18px}
.app-tarjetas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.app-tarjetas li{--c:#E8FBB5;padding:16px 18px;border:2px solid var(--tinta);border-radius:14px;background:var(--c);line-height:1.5;font-size:.94rem;box-shadow:4px 4px 0 var(--tinta)}
.app-tarjetas li b{display:block;font-family:var(--titular);font-weight:800;font-size:1.1rem;letter-spacing:-.02em;margin-bottom:4px}
.app-tarjetas li[data-color="cielo"]{--c:#C9F3F8}
.app-tarjetas li[data-color="chicle"]{--c:#FFD3E8}
.app-tarjetas li[data-color="papaya"]{--c:#FFD9C6}
.app-tarjetas li[data-color="uva"]{--c:#E4D9FF}
.app-postits{grid-template-columns:repeat(4,minmax(0,1fr))}
.app-postits li{border-radius:3px 3px 14px 3px}
.app-postits li:nth-child(odd){transform:rotate(-1.2deg)}
.app-postits li:nth-child(even){transform:rotate(1.2deg)}
@media (max-width:1000px){.app-tarjetas,.app-postits{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.app-tarjetas,.app-postits{grid-template-columns:1fr}}

/* Pasos */
.app-pasos-caja{margin:56px 0 0}
.app-pasos{list-style:none;counter-reset:paso;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 14px;padding:0}
.app-pasos li{counter-increment:paso;position:relative;padding:16px 16px 16px 62px;border:2px solid var(--tinta);border-radius:14px;background:#fff;line-height:1.45;font-size:.95rem}
.app-pasos li::before{
  content:counter(paso);position:absolute;left:14px;top:14px;width:34px;height:34px;display:grid;place-items:center;
  border:2px solid var(--tinta);border-radius:50%;background:var(--limon);font-family:var(--titular);font-weight:800;
}
@media (max-width:760px){.app-pasos{grid-template-columns:1fr}}
.app-enlace{font-weight:700;color:var(--azul)}

/* Beta: invitación a mandar ideas */
.app-beta-caja{
  display:flex;align-items:center;gap:20px 26px;flex-wrap:wrap;margin:56px 0 36px;padding:24px 28px;
  border:var(--borde);border-radius:var(--radio);background:#FFF6D6;box-shadow:8px 8px 0 var(--chicle);
}
.app-beta-caja > div{flex:1 1 360px}
.app-beta-caja h2{font-family:var(--titular);font-weight:800;font-size:clamp(1.4rem,3vw,1.9rem);letter-spacing:-.03em;margin:0 0 6px}
.app-beta-caja p{margin:0;line-height:1.55}
.app-sello{
  margin:0;padding:8px 16px;border:var(--borde);border-radius:12px;background:var(--limon);
  font-family:var(--titular);font-weight:800;font-size:1.4rem;letter-spacing:.06em;text-transform:uppercase;transform:rotate(-6deg);
}
.app-beta-botones{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:16px}
.app-boton{
  display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:999px;border:var(--borde);
  background:var(--chicle);color:#fff;font-family:var(--titular);font-weight:800;text-decoration:none;box-shadow:4px 4px 0 var(--tinta);
}
.app-boton:hover,.app-boton:focus-visible{background:var(--tinta)}

/* Gancho: planificaciones gratis dentro de la agenda */
.app-gancho{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px 24px;align-items:center;margin:34px 0 0;padding:22px 26px;
  border:var(--borde);border-radius:var(--radio);background:var(--limon);box-shadow:8px 8px 0 var(--tinta);
}
.app-gancho h2{font-family:var(--titular);font-weight:800;font-size:clamp(1.3rem,2.8vw,1.75rem);letter-spacing:-.03em;line-height:1.15;margin:0 0 6px}
.app-gancho p{margin:0;line-height:1.5}
.app-gancho-sello{
  margin:0;display:grid;place-items:center;width:96px;aspect-ratio:1;border-radius:50%;border:3px dashed var(--tinta);background:#fff;
  font-family:var(--titular);font-weight:800;font-size:.95rem;line-height:1.05;text-align:center;text-transform:uppercase;transform:rotate(-10deg);
}
@media (max-width:760px){.app-gancho{grid-template-columns:1fr}.app-gancho-sello{width:80px}}

/* La sorpresa: una caja de regalo con signo de pregunta */
.app-sorpresa{
  display:grid;grid-template-columns:150px minmax(0,1fr);gap:26px;align-items:center;margin:56px 0 0;padding:26px 30px;
  border:var(--borde);border-radius:var(--radio);background:var(--tinta);color:#fff;box-shadow:8px 8px 0 var(--chicle);
}
.app-sorpresa h2{font-family:var(--titular);font-weight:800;font-size:clamp(1.5rem,3.2vw,2.1rem);letter-spacing:-.03em;margin:4px 0 8px}
.app-sorpresa p{margin:0 0 16px;color:#C9D4F0;line-height:1.6;max-width:62ch}
.app-sorpresa .app-quien{color:var(--limon);margin:0}
.app-sorpresa .app-boton{background:var(--limon);color:var(--tinta);box-shadow:4px 4px 0 var(--cielo)}
.app-regalo{position:relative;width:130px;height:130px;margin:0 auto}
.app-regalo-caja{position:absolute;left:12px;right:12px;bottom:0;height:82px;border:3px solid #fff;border-radius:8px;
  background:linear-gradient(90deg,transparent 44%,var(--limon) 44% 56%,transparent 56%),var(--chicle)}
.app-regalo-tapa{position:absolute;left:4px;right:4px;top:22px;height:30px;border:3px solid #fff;border-radius:8px;transform:rotate(-8deg);transform-origin:left bottom;
  background:linear-gradient(90deg,transparent 44%,var(--limon) 44% 56%,transparent 56%),var(--chicle)}
.app-regalo-signo{position:absolute;left:50%;top:-14px;transform:translateX(-50%) rotate(8deg);font-family:var(--titular);font-weight:800;font-size:2.6rem;color:var(--cielo)}
@media (max-width:640px){.app-sorpresa{grid-template-columns:1fr;padding:24px 20px}.app-regalo{width:110px;height:110px}}