/* =====================================================================
   PLANET KIDS — LAYOUTS RESPONSIVE v1
   Reglas de composición por página, construidas sobre pk-design-system.css.
   ===================================================================== */

/* ================= INDEX / HUB ================= */
body.pk-index{overflow:hidden!important;}
body.pk-index .page{
  height:100dvh!important;
  min-height:100dvh!important;
  padding:var(--pk-content-top) var(--pk-page-side) var(--pk-content-bottom)!important;
  grid-template-columns:minmax(250px,350px) minmax(0,1fr)!important;
  gap:clamp(12px,1.6vw,24px)!important;
}
body.pk-index .carousel-wrap{transform:none!important;min-width:0;overflow:visible;}
body.pk-index .carousel{
  --center-w:min(430px,38vw);
  --side-w:min(190px,16vw);
  --gap-x:clamp(12px,1.4vw,22px);
  width:100%!important;
  max-width:100%!important;
}

/* Notebook / tablet horizontal: caben las 3 cards */
@media (min-width:901px) and (max-width:1199px){
  body.pk-index .page{
    grid-template-columns:260px minmax(0,1fr)!important;
    gap:14px!important;
  }
  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{
    width:min(300px,25vw)!important;
    max-height:56dvh!important;
  }
  body.pk-index .nova-wake-btn{font-size:15px!important;padding:13px 20px!important;}
  body.pk-index .carousel{
    --center-w:min(430px,42vw);
    --side-w:min(132px,12.5vw);
    --gap-x:12px;
    height:min(510px,64dvh)!important;
    min-height:360px!important;
  }
  body.pk-index .card.center{height:100%!important;}
  body.pk-index .card.left,
  body.pk-index .card.right{height:84%!important;}
  body.pk-index .arrow{width:50px!important;height:50px!important;}
}

/* Tablet vertical: card arriba, personaje debajo */
@media (orientation:portrait) and (min-width:621px) and (max-width:1100px){
  body.pk-index{overflow-y:auto!important;}
  body.pk-index .page{
    height:auto!important;
    min-height:100dvh!important;
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
  }
  body.pk-index .carousel-wrap{order:1;width:100%;min-height:0!important;}
  body.pk-index .copy{order:2;width:100%;min-height:0;}
  body.pk-index .carousel{
    --center-w:min(620px,76vw);
    --side-w:0px;
    --gap-x:0px;
    height:min(58dvh,650px)!important;
    min-height:430px!important;
  }
  body.pk-index .card.center{height:100%!important;border-radius:clamp(90px,13vw,150px)!important;}
  body.pk-index .card.left,
  body.pk-index .card.right{display:none!important;}
  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{
    width:min(210px,24vw)!important;
    max-height:19dvh!important;
  }
  body.pk-index .nova-guide{flex-direction:row!important;gap:16px!important;}
  body.pk-index .nova-assistant{width:auto!important;margin-top:0!important;}
  body.pk-index .dots{display:none!important;}
}

/* Tablet horizontal angosta: una card protagonista, personaje lateral */
@media (min-width:621px) and (max-width:900px) and (orientation:landscape){
  body.pk-index .page{
    display:grid!important;
    grid-template-columns:190px minmax(0,1fr)!important;
    padding-top:var(--pk-content-top)!important;
    gap:10px!important;
  }
  body.pk-index .copy{width:190px!important;}
  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{width:170px!important;max-height:42dvh!important;}
  body.pk-index .carousel-wrap{min-height:0!important;height:100%;}
  body.pk-index .carousel{--center-w:min(500px,66vw);--side-w:0px;--gap-x:0px;height:68dvh!important;min-height:340px!important;}
  body.pk-index .card.left,body.pk-index .card.right{display:none!important;}
}

/* Mobile: card arriba y personaje compacto abajo */
@media (max-width:620px){
  body.pk-index{overflow-y:auto!important;overflow-x:hidden!important;}
  body.pk-index .page{
    height:auto!important;
    min-height:100dvh!important;
    display:flex!important;
    flex-direction:column!important;
    padding:calc(var(--pk-content-top) + 2px) var(--pk-page-side) calc(var(--pk-content-bottom) + 8px)!important;
    gap:8px!important;
  }
  body.pk-index .carousel-wrap{order:1;width:100%;min-height:0!important;height:auto!important;}
  body.pk-index .copy{order:2;width:100%;min-height:0!important;}
  body.pk-index .carousel{
    --center-w:calc(100vw - 20px);
    --side-w:0px;
    --gap-x:0px;
    width:100%!important;
    height:min(55dvh,500px)!important;
    min-height:350px!important;
  }
  body.pk-index .card.center{
    width:var(--center-w)!important;
    height:100%!important;
    border-radius:clamp(76px,24vw,118px)!important;
  }
  body.pk-index .card.left,body.pk-index .card.right{display:none!important;}
  body.pk-index .arrow{width:44px!important;height:44px!important;font-size:29px!important;}
  body.pk-index .arrow.prev{left:12px!important;transform:translate(0,-50%)!important;}
  body.pk-index .arrow.next{left:auto!important;right:12px!important;transform:translate(0,-50%)!important;}
  body.pk-index .card-content{bottom:14px!important;left:14px!important;right:14px!important;}
  body.pk-index .card-title{font-size:clamp(30px,10vw,44px)!important;}
  body.pk-index .nova-guide{flex-direction:row!important;justify-content:center!important;gap:10px!important;}
  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{
    width:min(100px,25vw)!important;
    max-height:15dvh!important;
  }
  body.pk-index .nova-assistant{width:auto!important;margin-top:0!important;}
  body.pk-index .nova-wake-btn{font-size:14px!important;padding:12px 17px!important;}
  body.pk-index .dots{display:none!important;}
}

/* Celular horizontal bajo */
@media (max-height:520px) and (orientation:landscape){
  body.pk-index .page{
    display:grid!important;
    grid-template-columns:150px minmax(0,1fr)!important;
    padding-top:var(--pk-content-top)!important;
    padding-bottom:var(--pk-content-bottom)!important;
  }
  body.pk-index .carousel-wrap{order:2!important;}
  body.pk-index .copy{order:1!important;}
  body.pk-index .carousel{height:calc(100dvh - var(--pk-content-top) - var(--pk-content-bottom))!important;min-height:260px!important;}
  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{width:100px!important;max-height:32dvh!important;}
  body.pk-index .nova-guide{flex-direction:column!important;}
}

/* ================= CUENTOS: adopta shell compartido ================= */
body.pk-story .page{
  min-height:100dvh!important;
  padding:var(--pk-content-top) var(--pk-page-side) var(--pk-content-bottom)!important;
}

/* ================= PÁGINAS CON HEADER/FOOTER COMÚN ================= */
body.page-challenge .page,
body.page-market .page,
body.page-marketplace .page,
body.page-music .page,
body.page-vivos .page{
  min-height:100dvh;
}

/* =====================================================================
   PLANET KIDS — CHARACTER PRESENCE v2
   El personaje mantiene jerarquía visual y se integra al plano principal.
   Estas reglas pisan la primera versión sin cambiar el HTML.
   ===================================================================== */

/* Desktop compacto / notebook: personaje más presente y levemente montado */
@media (min-width:901px) and (max-width:1199px) and (orientation:landscape){
  body.pk-index .page{
    grid-template-columns:clamp(260px,27vw,340px) minmax(0,1fr)!important;
    gap:0!important;
  }
  body.pk-index .copy{
    position:relative!important;
    z-index:12!important;
    transform:translateX(clamp(8px,1.8vw,24px))!important;
  }
  body.pk-index .nova-guide{
    position:relative!important;
    z-index:12!important;
  }
  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{
    width:clamp(245px,28vw,355px)!important;
    max-height:61dvh!important;
  }
  body.pk-index .nova-assistant{
    margin-top:-30px!important;
  }
  body.pk-index .nova-wake-btn{
    font-size:clamp(15px,1.45vw,18px)!important;
    padding:14px 23px!important;
  }
}

/* Tablet vertical: personaje grande, cercano y montado sobre la card */
@media (orientation:portrait) and (min-width:621px) and (max-width:1100px){
  body.pk-index .page{
    position:relative!important;
    gap:0!important;
  }
  body.pk-index .carousel-wrap{
    position:relative!important;
    z-index:5!important;
  }
  body.pk-index .copy{
    position:relative!important;
    z-index:15!important;
    margin-top:clamp(-92px,-7dvh,-52px)!important;
  }
  body.pk-index .nova-guide{
    display:flex!important;
    flex-direction:row!important;
    align-items:flex-end!important;
    justify-content:center!important;
    gap:clamp(8px,2vw,20px)!important;
  }
  body.pk-index #characterHolder{
    flex:0 0 auto!important;
  }
  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{
    width:clamp(190px,29vw,310px)!important;
    max-height:27dvh!important;
    transform:translateY(-8px)!important;
  }
  body.pk-index .nova-assistant{
    width:auto!important;
    margin:0 0 clamp(14px,2.5dvh,34px) clamp(-26px,-2vw,-8px)!important;
  }
  body.pk-index .nova-wake-btn{
    font-size:clamp(16px,2vw,21px)!important;
    padding:15px 25px!important;
    min-height:52px!important;
  }
}

/* Tablet horizontal: personaje ya no se percibe como miniatura */
@media (min-width:621px) and (max-width:900px) and (orientation:landscape){
  body.pk-index .page{
    grid-template-columns:clamp(190px,29vw,235px) minmax(0,1fr)!important;
    gap:0!important;
  }
  body.pk-index .copy{
    width:auto!important;
    position:relative!important;
    z-index:15!important;
    transform:translateX(12px)!important;
  }
  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{
    width:clamp(190px,27vw,245px)!important;
    max-height:50dvh!important;
  }
  body.pk-index .nova-assistant{margin-top:-22px!important;}
  body.pk-index .nova-wake-btn{
    font-size:15px!important;
    padding:13px 19px!important;
  }
}

/* Móvil: personaje visible y parcialmente superpuesto al carrusel */
@media (max-width:620px) and (orientation:portrait){
  body.pk-index .page{
    position:relative!important;
    gap:0!important;
  }
  body.pk-index .carousel{
    height:min(51dvh,455px)!important;
    min-height:315px!important;
  }
  body.pk-index .carousel-wrap{
    position:relative!important;
    z-index:5!important;
  }
  body.pk-index .copy{
    position:relative!important;
    z-index:15!important;
    margin-top:clamp(-54px,-5.5dvh,-28px)!important;
  }
  body.pk-index .nova-guide{
    display:flex!important;
    flex-direction:row!important;
    align-items:flex-end!important;
    justify-content:center!important;
    gap:0!important;
    width:100%!important;
  }
  body.pk-index #characterHolder{
    flex:0 0 auto!important;
    position:relative!important;
    z-index:2!important;
  }
  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{
    width:clamp(132px,38vw,176px)!important;
    max-height:23dvh!important;
    transform:translate(10px,-8px)!important;
  }
  body.pk-index .nova-assistant{
    width:auto!important;
    margin:0 0 clamp(10px,1.8dvh,20px) -18px!important;
    position:relative!important;
    z-index:4!important;
  }
  body.pk-index .nova-wake-btn{
    font-size:clamp(14px,4vw,17px)!important;
    padding:13px 19px!important;
    min-height:48px!important;
    white-space:nowrap!important;
  }
}

/* Móviles bajos: conservar presencia sin empujar el footer */
@media (max-width:620px) and (orientation:portrait) and (max-height:720px){
  body.pk-index .carousel{
    height:47dvh!important;
    min-height:285px!important;
  }
  body.pk-index .copy{
    margin-top:-40px!important;
  }
  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{
    width:clamp(118px,34vw,148px)!important;
    max-height:20dvh!important;
  }
  body.pk-index .nova-wake-btn{
    min-height:44px!important;
    padding:11px 16px!important;
  }
}

/* Celular horizontal: personaje lateral con escala útil */
@media (max-height:520px) and (orientation:landscape){
  body.pk-index .page{
    grid-template-columns:clamp(160px,24vw,220px) minmax(0,1fr)!important;
    gap:0!important;
  }
  body.pk-index .copy{
    position:relative!important;
    z-index:15!important;
    transform:translateX(10px)!important;
  }
  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{
    width:clamp(130px,20vw,180px)!important;
    max-height:43dvh!important;
  }
  body.pk-index .nova-assistant{margin-top:-18px!important;}
}

/* =====================================================================
   PLANET KIDS — RESPONSIVE TUNING v3
   Ajustes finales de jerarquía visual basados en pruebas reales.
   ===================================================================== */

/* Tablet horizontal / zona 749x667: personaje y CTA con más presencia */
@media (min-width:621px) and (max-width:900px) and (orientation:landscape) and (min-height:521px){
  body.pk-index .page{
    grid-template-columns:clamp(220px,31vw,270px) minmax(0,1fr)!important;
    gap:0!important;
  }
  body.pk-index .copy{
    transform:translateX(18px)!important;
    overflow:visible!important;
  }
  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{
    width:clamp(270px,39vw,330px)!important;
    max-height:58dvh!important;
    transform:translate(12px,-4px)!important;
  }
  body.pk-index .nova-assistant{
    margin-top:-34px!important;
    transform:translateX(8px)!important;
  }
  body.pk-index .nova-wake-btn{
    font-size:clamp(17px,2.2vw,20px)!important;
    padding:16px 27px!important;
    min-height:56px!important;
  }
}

/* iPad / tablet vertical alta: card menos dominante y personaje protagonista */
@media (orientation:portrait) and (min-width:621px) and (max-width:1100px) and (min-height:900px){
  body.pk-index .page{
    gap:0!important;
  }
  body.pk-index .carousel{
    --center-w:min(700px,74vw)!important;
    height:min(48dvh,590px)!important;
    min-height:410px!important;
  }
  body.pk-index .copy{
    margin-top:clamp(-74px,-5dvh,-46px)!important;
  }
  body.pk-index .nova-guide{
    gap:clamp(4px,1.2vw,14px)!important;
    align-items:flex-end!important;
  }
  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{
    width:clamp(360px,46vw,540px)!important;
    max-height:36dvh!important;
    transform:translate(24px,4px)!important;
  }
  body.pk-index .nova-assistant{
    margin:0 0 clamp(28px,3dvh,46px) clamp(-72px,-5vw,-38px)!important;
  }
  body.pk-index .nova-wake-btn{
    font-size:clamp(19px,2.35vw,24px)!important;
    padding:17px 31px!important;
    min-height:60px!important;
  }
}

/* Móvil vertical estándar: personaje más grande y un poco más abajo */
@media (max-width:620px) and (orientation:portrait) and (min-height:721px){
  body.pk-index .copy{
    margin-top:clamp(-34px,-3dvh,-18px)!important;
  }
  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{
    width:clamp(158px,43vw,198px)!important;
    max-height:25dvh!important;
    transform:translate(12px,10px)!important;
  }
  body.pk-index .nova-assistant{
    margin:0 0 6px -18px!important;
    transform:translateY(10px)!important;
  }
  body.pk-index .nova-wake-btn{
    font-size:clamp(15px,4.2vw,18px)!important;
    padding:14px 22px!important;
    min-height:52px!important;
  }
}

/* Móvil bajo 437x667: bajar y agrandar personaje + botón sin tocar landscape */
@media (max-width:620px) and (orientation:portrait) and (max-height:720px){
  body.pk-index .carousel{
    height:43dvh!important;
    min-height:270px!important;
  }
  body.pk-index .copy{
    margin-top:2px!important;
  }
  body.pk-index .nova-guide{
    align-items:center!important;
    transform:translateY(4px)!important;
  }
  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{
    width:clamp(160px,43vw,190px)!important;
    max-height:24dvh!important;
    transform:translate(8px,8px)!important;
  }
  body.pk-index .nova-assistant{
    margin:0 0 0 -16px!important;
    transform:translateY(10px)!important;
  }
  body.pk-index .nova-wake-btn{
    font-size:clamp(15px,4.1vw,17px)!important;
    padding:13px 21px!important;
    min-height:50px!important;
  }
}

/* =====================================================================
   PLANET KIDS — RESPONSIVE TUNING v4
   Ajustes de proporción personaje/carrusel y centrado vertical.
   ===================================================================== */

/* 749 × 667 y tablets horizontales similares:
   personaje más grande, CTA algo más compacto y con aire real entre ambos. */
@media (min-width:621px) and (max-width:900px) and (orientation:landscape) and (min-height:521px){
  body.pk-index .page{
    grid-template-columns:clamp(250px,35vw,300px) minmax(0,1fr)!important;
    align-items:center!important;
  }

  body.pk-index .copy{
    transform:translateX(12px)!important;
    overflow:visible!important;
  }

  body.pk-index .nova-guide{
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    gap:14px!important;
  }

  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{
    width:clamp(370px,52vw,440px)!important;
transform:translate(22px,-14px)!important;
    max-height:62dvh!important;
   
  }

  body.pk-index .nova-assistant{
    margin:0!important;
    transform:none!important;
  }

  body.pk-index .nova-wake-btn{
    font-size:clamp(15px,1.9vw,17px)!important;
    padding:13px 22px!important;
    min-height:50px!important;
  }
}

/* iPad / tablet vertical alta (ej. 1024 × 1366):
   todo el conjunto se centra verticalmente, el carrusel baja y el personaje
   recupera jerarquía sin quedar pegado al botón. */
@media (orientation:portrait) and (min-width:621px) and (max-width:1100px) and (min-height:900px){
  body.pk-index{
    overflow:hidden!important;
  }

  body.pk-index .page{
    height:100dvh!important;
    min-height:100dvh!important;
    justify-content:center!important;
    padding-top:calc(var(--pk-content-top) + 28px)!important;
    padding-bottom:calc(var(--pk-content-bottom) + 18px)!important;
    gap:26px!important;
  }

  body.pk-index .carousel-wrap{
    flex:0 0 auto!important;
    width:100%!important;
    transform:translateY(24px)!important;
  }

  body.pk-index .carousel{
    --center-w:min(700px,72vw)!important;
    height:min(43dvh,560px)!important;
    min-height:420px!important;
  }

  body.pk-index .copy{
    width:100%!important;
    margin-top:0!important;
    transform:translateY(28px)!important;
  }

  body.pk-index .nova-guide{
    flex-direction:row!important;
    align-items:flex-end!important;
    justify-content:center!important;
    gap:34px!important;
  }

  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{
    width:clamp(430px,53vw,590px)!important;
    max-height:39dvh!important;
    transform:none!important;
  }

  body.pk-index .nova-assistant{
    margin:0 0 54px -48px!important;
    transform:none!important;
  }

  body.pk-index .nova-wake-btn{
    font-size:clamp(18px,2vw,22px)!important;
    padding:16px 28px!important;
    min-height:58px!important;
  }
}

/* Móvil vertical estándar: más presencia del personaje y bloque centrado. */
@media (max-width:620px) and (orientation:portrait) and (min-height:721px){
  body.pk-index .page{
    justify-content:center!important;
    gap:12px!important;
  }

  body.pk-index .carousel{
    height:min(48dvh,430px)!important;
    min-height:320px!important;
  }

  body.pk-index .copy{
    margin-top:0!important;
    transform:translateY(4px)!important;
  }

  body.pk-index .nova-guide{
    gap:8px!important;
    align-items:flex-end!important;
  }

  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{
    width:clamp(182px,48vw,224px)!important;
    max-height:28dvh!important;
    transform:translate(6px,0)!important;
  }

  body.pk-index .nova-assistant{
    margin:0 0 12px -12px!important;
    transform:none!important;
  }
}

/* Móvil bajo 437 × 667:
   personaje más grande, algo más abajo y conjunto centrado verticalmente. */
@media (max-width:620px) and (orientation:portrait) and (max-height:720px){
  body.pk-index .page{
    justify-content:center!important;
    gap:8px!important;
  }

  body.pk-index .carousel{
    height:41dvh!important;
    min-height:260px!important;
  }

  body.pk-index .copy{
    margin-top:8px!important;
    transform:translateY(10px)!important;
  }

  body.pk-index .nova-guide{
    align-items:flex-end!important;
    gap:8px!important;
    transform:none!important;
  }

  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{
    width:clamp(178px,47vw,208px)!important;
    max-height:27dvh!important;
    transform:translate(4px,0)!important;
  }

  body.pk-index .nova-assistant{
    margin:0 0 10px -12px!important;
    transform:none!important;
  }

  body.pk-index .nova-wake-btn{
    font-size:clamp(14px,3.8vw,16px)!important;
    padding:12px 19px!important;
    min-height:48px!important;
  }
}

/* =====================================================================
   PLANET KIDS — RESPONSIVE COMPOSITION v5
   Composición por bloques: personaje + CTA como una sola “companion zone”.
   Estas reglas pisan los ajustes anteriores sin cambiar el HTML.
   ===================================================================== */

/* 749 × 667 y tablets horizontales similares:
   el personaje invade levemente el plano principal, pero conserva aire
   respecto del botón. */
@media (min-width:621px) and (max-width:900px) and (orientation:landscape) and (min-height:521px){
  body.pk-index .page{
    grid-template-columns:clamp(250px,34vw,290px) minmax(0,1fr)!important;
    align-items:center!important;
    gap:0!important;
  }

  body.pk-index .copy{
    width:100%!important;
    overflow:visible!important;
    transform:translateX(18px)!important;
    z-index:20!important;
  }

  body.pk-index .nova-guide{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:18px!important;
    width:100%!important;
  }

  body.pk-index #characterHolder{
    overflow:visible!important;
  }

  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{
    width:clamp(330px,47vw,390px)!important;
    max-height:64dvh!important;
    transform:translateX(22px)!important;
  }

  body.pk-index .nova-assistant{
    margin:0!important;
    transform:translateX(8px)!important;
  }

  body.pk-index .nova-wake-btn{
    font-size:clamp(15px,1.85vw,17px)!important;
    padding:12px 20px!important;
    min-height:48px!important;
  }

  body.pk-index .carousel-wrap{
    position:relative!important;
    z-index:5!important;
  }
}

/* iPad y tablet vertical alta:
   carrusel, personaje y CTA forman un bloque único centrado verticalmente. */
@media (orientation:portrait) and (min-width:621px) and (max-width:1100px) and (min-height:900px){
  body.pk-index{
    overflow:hidden!important;
  }

  body.pk-index .page{
    height:100dvh!important;
    min-height:100dvh!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:center!important;
    gap:30px!important;
    padding-top:calc(var(--pk-content-top) + 10px)!important;
    padding-bottom:calc(var(--pk-content-bottom) + 10px)!important;
  }

  body.pk-index .carousel-wrap{
    order:1!important;
    flex:0 0 auto!important;
    width:100%!important;
    transform:none!important;
  }

  body.pk-index .carousel{
    --center-w:min(700px,72vw)!important;
    height:clamp(440px,39dvh,535px)!important;
    min-height:440px!important;
  }

  body.pk-index .copy{
    order:2!important;
    flex:0 0 auto!important;
    width:100%!important;
    margin:0!important;
    transform:none!important;
  }

  body.pk-index .nova-guide{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:clamp(18px,3vw,42px)!important;
    width:100%!important;
  }

  body.pk-index #characterHolder{
    flex:0 0 auto!important;
    overflow:visible!important;
  }

  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{
    width:clamp(360px,44vw,470px)!important;
    max-height:34dvh!important;
    transform:none!important;
  }

  body.pk-index .nova-assistant{
    margin:0!important;
    transform:translateY(28px)!important;
  }

  body.pk-index .nova-wake-btn{
    font-size:clamp(18px,2vw,22px)!important;
    padding:16px 27px!important;
    min-height:58px!important;
  }
}

/* Móvil vertical:
   bloque completo centrado, con el personaje algo más grande pero sin
   competir con el carrusel ni empujar el footer. */
@media (max-width:620px) and (orientation:portrait){
  body.pk-index .page{
    justify-content:center!important;
  }

  body.pk-index .copy{
    margin-top:6px!important;
    transform:none!important;
  }

  body.pk-index .nova-guide{
    width:100%!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
  }

  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{
    width:clamp(188px,49vw,220px)!important;
    max-height:28dvh!important;
    transform:none!important;
  }

  body.pk-index .nova-assistant{
    margin:0!important;
    transform:none!important;
  }
}

/* Móvil bajo, como 437 × 667:
   mismo criterio, con un ajuste de altura más conservador. */
@media (max-width:620px) and (orientation:portrait) and (max-height:720px){
  body.pk-index .page{
    justify-content:center!important;
    gap:10px!important;
  }

  body.pk-index .carousel{
    height:40dvh!important;
    min-height:255px!important;
  }

  body.pk-index .copy{
    margin-top:8px!important;
  }

  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{
    width:clamp(184px,48vw,210px)!important;
    max-height:27dvh!important;
  }

  body.pk-index .nova-wake-btn{
    font-size:clamp(14px,3.8vw,16px)!important;
    padding:12px 18px!important;
    min-height:47px!important;
  }
}


/* =====================================================================
   PLANET KIDS — MARKETPLACE + CHALLENGES MOBILE FIX v1
   ===================================================================== */

/* MARKETPLACE — tablet y teléfono */
@media (max-width:860px){
  body.page-market.page-marketplace{
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  body.page-market.page-marketplace .market-page{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:100dvh!important;
    padding:calc(var(--pk-content-top) + 8px) 10px calc(var(--pk-content-bottom) + 18px)!important;
  }

  body.page-market.page-marketplace .market-shell{
    width:100%!important;
    max-width:none!important;
    height:calc(100dvh - var(--pk-content-top) - var(--pk-content-bottom) - 24px)!important;
    min-height:620px!important;
    margin:0!important;
    padding:12px!important;
    border-radius:24px!important;
    gap:10px!important;
  }

  body.page-market.page-marketplace .market-top{
    padding:2px 2px 6px!important;
  }

  body.page-market.page-marketplace .market-top h2{
    font-size:clamp(24px,7vw,32px)!important;
  }

  body.page-market.page-marketplace .market-top p{
    font-size:12px!important;
    line-height:1.3!important;
  }

  body.page-market.page-marketplace .chips{
    width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    padding:2px 0 8px!important;
    gap:8px!important;
  }

  body.page-market.page-marketplace .chip{
    min-height:40px!important;
    padding:0 14px!important;
    font-size:12px!important;
  }

  body.page-market.page-marketplace .market-scroll{
    margin-top:0!important;
    padding-right:2px!important;
    overflow-x:hidden!important;
  }

  body.page-market.page-marketplace .grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  body.page-market.page-marketplace .card{
    min-width:0!important;
    min-height:250px!important;
  }

  body.page-market.page-marketplace .card .img{
    height:150px!important;
  }
}

@media (max-width:620px){
  body.page-market.page-marketplace .market-page{
    padding-left:8px!important;
    padding-right:8px!important;
  }

  body.page-market.page-marketplace .market-shell{
    min-height:640px!important;
    padding:10px!important;
    border-radius:22px!important;
  }

  body.page-market.page-marketplace .grid{
    grid-template-columns:1fr!important;
  }

  body.page-market.page-marketplace .card{
    min-height:270px!important;
  }

  body.page-market.page-marketplace .card .img{
    height:170px!important;
  }

  body.page-market.page-marketplace .sheet{
    left:8px!important;
    right:8px!important;
    bottom:8px!important;
    top:auto!important;
    transform:none!important;
    width:auto!important;
    max-height:calc(100dvh - 24px)!important;
    overflow:auto!important;
  }

  body.page-market.page-marketplace .sheet .row{
    grid-template-columns:1fr!important;
  }

  body.page-market.page-marketplace .sheet .ph{
    width:100%!important;
    height:220px!important;
  }
}

/* CHALLENGES — el reel ocupa realmente el ancho del teléfono */
@media (max-width:860px){
  body.page-challenge{
    overflow:hidden!important;
    background:#000!important;
  }

  body.page-challenge .challenge-page{
    width:100vw!important;
    height:100dvh!important;
    min-height:100dvh!important;
    padding:0!important;
    margin:0!important;
  }

  body.page-challenge .stage,
  body.page-challenge .tablet-wrap,
  body.page-challenge .tablet-frame,
  body.page-challenge .tablet-screen{
    width:100vw!important;
    max-width:none!important;
    height:100dvh!important;
    min-height:100dvh!important;
    margin:0!important;
    transform:none!important;
  }

  body.page-challenge .tablet-frame{
    aspect-ratio:auto!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
  }

  body.page-challenge .tablet-screen video{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
  }

  body.page-challenge .videoInfo{
    left:16px!important;
    right:82px!important;
    bottom:calc(var(--pk-footer-h) + 28px)!important;
  }

  body.page-challenge .actions{
    right:14px!important;
    bottom:calc(var(--pk-footer-h) + 66px)!important;
  }

  body.page-challenge .muteBtn{
    right:14px!important;
    bottom:calc(var(--pk-footer-h) + 360px)!important;
  }
}

@media (max-width:620px){
  body.page-challenge .videoInfo{
    left:12px!important;
    right:74px!important;
    bottom:94px!important;
    padding:11px!important;
  }

  body.page-challenge .user{font-size:16px!important;}
  body.page-challenge .line{font-size:12px!important;}
  body.page-challenge .actions{right:10px!important;bottom:126px!important;}
  body.page-challenge .btn,
  body.page-challenge .muteBtn{
    width:46px!important;
    height:46px!important;
    border-radius:16px!important;
    font-size:20px!important;
  }
}

/* PERSONAJE MÁS GRANDE — NOTEBOOK Y MONITOR */
@media (min-width:1200px) and (orientation:landscape){

  body.pk-index #characterHolder{
    overflow:visible!important;
  }

  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{
     width:clamp(560px,46vw,660px)!important;
      max-height:84dvh!important;
      transform:translateY(-18px)!important;
  }
}


/* =========================================================
   INDEX — AJUSTE FINAL DE PERSONAJE Y BOTÓN REALTIME
   ========================================================= */

/* Evita el flash del botón durante el arranque automático desde el video. */
body.pk-index .nova-wake-btn.pk-initial-suppressed{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(8px) scale(.96)!important;
}

/* Mayor presencia visual sin usar scale(), que las animaciones sobrescriben. */
body.pk-index #characterHolder img,
body.pk-index #characterHolder video{
  width:min(680px,48vw)!important;
  max-height:88dvh!important;
}

@media (min-width:1200px) and (orientation:landscape){
  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{
    width:clamp(650px,53vw,790px)!important;
    max-height:90dvh!important;
    transform:translateY(-18px)!important;
  }
}

@media (max-width:760px){
  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{
    width:min(600px,82vw)!important;
    max-height:64dvh!important;
  }
}

/* =========================================================
   INDEX — ESCENARIO FIJO DEL PERSONAJE
   El personaje y el botón son elementos hermanos, pero comparten
   .nova-guide. Se reserva una fila estable para el botón para que
   mostrarlo/ocultarlo nunca desplace al personaje.
   ========================================================= */
body.pk-index .nova-guide{
  position:relative!important;
  display:grid!important;
  grid-template-rows:minmax(0,1fr) 74px!important;
  align-items:stretch!important;
  justify-items:center!important;
  gap:0!important;
  width:100%!important;
  height:calc(100dvh - 112px)!important;
  min-height:520px!important;
  margin:0!important;
}

body.pk-index #characterHolder{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
  transform:none!important;
  animation:none!important;
}

body.pk-index #characterHolder #mainCharacter,
body.pk-index #characterHolder #mainCharacter.character-speaking,
body.pk-index #characterHolder #mainCharacter.character-listening{
  position:relative!important;
  width:clamp(650px,53vw,790px)!important;
  height:auto!important;
  max-height:calc(100dvh - 170px)!important;
  object-fit:contain!important;
  transform:none!important;
  animation:none!important;
  transition:none!important;
  will-change:auto!important;
}

body.pk-index .nova-assistant{
  position:relative!important;
  width:100%!important;
  height:74px!important;
  min-height:74px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  z-index:50!important;
}

@media (max-width:760px){
  body.pk-index .nova-guide{
    grid-template-rows:minmax(0,1fr) 66px!important;
    height:calc(100dvh - 96px)!important;
    min-height:430px!important;
  }

  body.pk-index #characterHolder #mainCharacter,
  body.pk-index #characterHolder #mainCharacter.character-speaking,
  body.pk-index #characterHolder #mainCharacter.character-listening{
    width:min(600px,82vw)!important;
    max-height:calc(100dvh - 145px)!important;
  }

  body.pk-index .nova-assistant{
    height:66px!important;
    min-height:66px!important;
  }
}