/* Planet Kids responsive foundation — Fase 2 */
:root{
  --pk-safe-top:max(12px, env(safe-area-inset-top));
  --pk-safe-right:max(12px, env(safe-area-inset-right));
  --pk-safe-bottom:max(10px, env(safe-area-inset-bottom));
  --pk-safe-left:max(12px, env(safe-area-inset-left));
}

html,body{min-height:100%;}
body{min-height:100dvh;}
button,a,input{touch-action:manipulation;}

/* ================= HOME / CHARACTER PICKER ================= */
body.pk-home .encounter{height:100dvh;min-height:560px;}
body.pk-home .logo{margin-top:0;top:clamp(22px,4vh,46px);}
body.pk-home .center-content{top:clamp(190px,31vh,310px);}
body.pk-home .character-img{height:min(78dvh,880px);}
body.pk-home .name-modal{padding:var(--pk-safe-top) var(--pk-safe-right) var(--pk-safe-bottom) var(--pk-safe-left);}
body.pk-home .name-card{max-height:calc(100dvh - 28px);overflow:auto;}

@media (max-width:1100px){
  body.pk-home .character-img{height:min(68dvh,700px);bottom:10%;}
  body.pk-home .nova-side .character-img{left:2%;}
  body.pk-home .kai-side .character-img{right:2%;}
  body.pk-home .name-plate{min-width:220px;font-size:clamp(42px,6vw,66px);}
}

@media (max-width:760px){
  body.pk-home html,body.pk-home{overflow:hidden;}
  body.pk-home .encounter{min-height:620px;}
  body.pk-home .logo{top:18px;font-size:clamp(36px,11vw,48px);}
  body.pk-home .center-content{top:26%;width:86vw;}
  body.pk-home .center-content h1{font-size:clamp(30px,9vw,40px);}
  body.pk-home .center-content p{font-size:clamp(15px,4.5vw,19px);}
  body.pk-home .character-img{height:min(49dvh,440px);bottom:17%;}
  body.pk-home .nova-side .character-img{left:-23%;}
  body.pk-home .kai-side .character-img{right:-23%;}
  body.pk-home .name-plate{bottom:8%;min-width:128px;padding:12px 14px;border-radius:24px;font-size:clamp(28px,10vw,42px);}
  body.pk-home .planet-one{width:50vw;left:-16%;top:12%;}
  body.pk-home .planet-two{width:50vw;right:-16%;top:13%;}
  body.pk-home .name-card{width:min(430px,92vw);padding:24px 20px;border-radius:28px;}
  body.pk-home .name-card img{height:min(150px,23dvh);}
  body.pk-home .name-card h2{font-size:clamp(23px,7vw,30px);}
}

@media (max-width:430px){
  body.pk-home .character-img{height:min(46dvh,390px);bottom:19%;}
  body.pk-home .nova-side .character-img{left:-33%;}
  body.pk-home .kai-side .character-img{right:-33%;}
  body.pk-home .center-content{top:25%;}
}

@media (max-height:720px) and (min-width:761px){
  body.pk-home .logo{top:16px;font-size:clamp(38px,5vw,62px);}
  body.pk-home .center-content{top:29%;}
  body.pk-home .character-img{height:72dvh;bottom:4%;}
  body.pk-home .name-plate{bottom:3%;padding:13px 26px;}
}

/* ================= INDEX / MAIN HUB ================= */
body.pk-index .page{min-height:100dvh;height:100dvh;}
body.pk-index .footer{bottom:max(10px,env(safe-area-inset-bottom));}
body.pk-index .welcome-box{height:min(92dvh,920px);}
body.pk-index #startAdventure{bottom:max(24px,calc(env(safe-area-inset-bottom) + 16px));}

@media (max-width:1180px){
  body.pk-index .page{grid-template-columns:minmax(270px,34vw) minmax(0,1fr);gap:12px;padding-inline:18px;}
  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{width:min(440px,34vw);max-height:61dvh;}
  body.pk-index .carousel{--center-w:min(390px,38vw);--side-w:min(180px,17vw);height:min(500px,55dvh);}
}

@media (max-width:900px){
  body.pk-index html,body.pk-index{overflow:auto;}
  body.pk-index .page{height:auto;min-height:100dvh;display:flex;flex-direction:column;padding:92px 14px 106px;gap:8px;}
  body.pk-index .copy{width:100%;display:flex;justify-content:center;}
  body.pk-index .nova-guide{gap:0;}
  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{width:min(330px,56vw);max-height:34dvh;}
  body.pk-index .nova-assistant{margin-top:-8px;}
  body.pk-index .carousel-wrap{transform:none;width:100%;min-height:460px;}
  body.pk-index .carousel{--center-w:min(520px,68vw);--side-w:min(180px,20vw);--gap-x:18px;height:460px;min-height:460px;}
  body.pk-index .card.center{height:430px;}
  body.pk-index .card.left,body.pk-index .card.right{height:370px;}
  body.pk-index .dots{bottom:88px;}
}

@media (max-width:620px){
  body.pk-index .header{left:10px;right:10px;top:max(8px,env(safe-area-inset-top));height:56px;padding:0 10px;}
  body.pk-index .brand-title{font-size:16px;}
  body.pk-index .header-actions{gap:7px;}
  body.pk-index .icon-btn{width:38px;height:38px;}
  body.pk-index .icon-btn img{width:24px;height:24px;}
  body.pk-index .page{padding:78px 10px 96px;}
  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{width:min(300px,66vw);max-height:29dvh;}
  body.pk-index .nova-bubble-ai{max-width:230px;font-size:13px;padding:11px 14px;}
  body.pk-index .nova-wake-btn{font-size:15px;padding:14px 20px;}
  body.pk-index .carousel-wrap{min-height:430px;}
  body.pk-index .carousel{--center-w:86vw;--side-w:0px;--gap-x:0px;height:420px;min-height:420px;}
  body.pk-index .card.center{height:400px;border-radius:130px;}
  body.pk-index .card.left,body.pk-index .card.right{display:none;}
  body.pk-index .card-content{left:18px;right:18px;bottom:18px;}
  body.pk-index .card-title{font-size:clamp(32px,11vw,48px);}
  body.pk-index .arrow{width:46px;height:46px;font-size:30px;}
  body.pk-index .arrow.prev{left:14px;transform:translate(0,-50%);}
  body.pk-index .arrow.next{left:auto;right:14px;transform:translate(0,-50%);}
  body.pk-index .footer{left:8px;right:8px;width:auto;height:70px;padding:0 7px;gap:4px;}
  body.pk-index .tab{width:54px;height:52px;border-radius:18px;}
  body.pk-index .tab-icon{width:30px;height:30px;font-size:17px;}
  body.pk-index .tab-label{font-size:8px;}
  body.pk-index .welcome-box{width:100vw;height:100dvh;}
  body.pk-index .welcome-box video{border-radius:0;}
  body.pk-index #startAdventure{min-width:min(300px,84vw);height:58px;font-size:18px;}
}

@media (max-height:760px) and (min-width:901px){
  body.pk-index .page{padding-top:96px;padding-bottom:96px;}
  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{max-height:58dvh;width:min(430px,30vw);}
  body.pk-index .carousel{height:64dvh;min-height:360px;}
  body.pk-index .footer{height:74px;}
}

/* ================= STORY / PLANET CUENTOS ================= */
body.pk-story .page{min-height:100dvh;height:100dvh;}
body.pk-story .result-stage{padding-bottom:max(96px,calc(env(safe-area-inset-bottom) + 84px));}
body.pk-story .book-card{max-height:calc(100dvh - 190px);}
body.pk-story .start-modal{padding:max(18px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left));}

@media (max-width:1050px){
  body.pk-story .page{grid-template-columns:minmax(260px,34vw) minmax(0,1fr);gap:18px;padding-inline:18px;}
  body.pk-story #characterHolder video,
  body.pk-story #characterHolder img{width:min(390px,32vw);}
  body.pk-story .story-panel{min-height:470px;padding:22px;}
  body.pk-story .seed{font-size:13px;}
}

@media (max-width:820px){
  body.pk-story html,body.pk-story{overflow:auto;}
  body.pk-story .page{height:auto;min-height:100dvh;display:flex;flex-direction:column;padding:84px 12px 102px;gap:10px;}
  body.pk-story .left-stage{gap:4px;}
  body.pk-story h1{font-size:clamp(36px,10vw,56px);margin:8px 0 4px;}
  body.pk-story .subtitle{font-size:15px;max-width:520px;}
  body.pk-story #characterHolder video,
  body.pk-story #characterHolder img{width:min(310px,58vw);max-height:31dvh;}
  body.pk-story .story-panel{width:min(760px,100%);min-height:0;padding:18px;border-radius:28px;gap:13px;}
  body.pk-story .prompt-title{font-size:clamp(25px,7vw,36px);}
  body.pk-story #topic{height:54px;font-size:16px;}
  body.pk-story .seed-row{gap:7px;}
  body.pk-story .seed{min-height:38px;padding:0 11px;font-size:12px;}
  body.pk-story .create-btn{height:56px;font-size:18px;}
  body.pk-story .clear-btn{height:48px;}
  body.pk-story .result-stage{align-items:flex-start;padding:78px 10px 88px;overflow:auto;}
  body.pk-story .book-card{width:100%;height:auto;max-height:none;grid-template-columns:1fr;padding:14px;border-radius:28px;gap:14px;overflow:visible;}
  body.pk-story .cover{height:min(48dvh,380px);min-height:260px;border-radius:24px;}
  body.pk-story .book-content{min-height:0;}
  body.pk-story #storyText{max-height:none;overflow:visible;font-size:16px;}
  body.pk-story .book-actions{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(255,248,217,.65),#fff8d9 35%);padding:14px 0 4px;z-index:6;}
}

@media (max-width:520px){
  body.pk-story .header{left:8px;right:8px;top:max(8px,env(safe-area-inset-top));height:54px;padding:0 10px;}
  body.pk-story .brand-title{font-size:16px;}
  body.pk-story .avatar{width:38px;height:38px;}
  body.pk-story .icon-btn,body.pk-story .back{width:36px;height:36px;}
  body.pk-story .header-actions{gap:7px;}
  body.pk-story .page{padding-top:72px;padding-inline:8px;padding-bottom:88px;}
  body.pk-story .title-kicker{height:30px;font-size:11px;}
  body.pk-story h1{font-size:34px;}
  body.pk-story .subtitle{font-size:13px;}
  body.pk-story #characterHolder video,
  body.pk-story #characterHolder img{width:min(260px,64vw);max-height:26dvh;}
  body.pk-story .story-panel{padding:14px;border-radius:24px;}
  body.pk-story .ask-box{padding:8px;border-radius:24px;}
  body.pk-story #topic{height:48px;padding:0 13px;font-size:14px;}
  body.pk-story .hint{font-size:11px;}
  body.pk-story .action-row{gap:8px;}
  body.pk-story .create-btn{width:100%;flex-basis:100%;height:52px;font-size:16px;}
  body.pk-story .clear-btn{width:100%;height:44px;}
  body.pk-story .footer{left:6px;right:6px;width:auto;height:68px;padding:0 6px;gap:3px;}
  body.pk-story .tab{width:52px;height:50px;border-radius:17px;}
  body.pk-story .tab-icon{width:29px;height:29px;font-size:16px;}
  body.pk-story .tab-label{font-size:8px;}
  body.pk-story .result-stage{padding:68px 6px 78px;}
  body.pk-story .book-card{padding:10px;border-width:2px;border-radius:22px;}
  body.pk-story .cover{height:42dvh;min-height:230px;}
  body.pk-story #storyTitle{font-size:30px;}
  body.pk-story .book-actions{gap:8px;}
  body.pk-story .book-actions button,body.pk-story .book-actions a{min-height:46px;padding:0 13px;font-size:13px;}
  body.pk-story .start-card{padding:26px 18px;border-radius:28px;}
  body.pk-story .start-card h2{font-size:34px;}
}

@media (max-height:720px) and (min-width:821px){
  body.pk-story .page{padding-top:94px;padding-bottom:90px;}
  body.pk-story #characterHolder video,
  body.pk-story #characterHolder img{max-height:50dvh;width:min(360px,27vw);}
  body.pk-story .story-panel{min-height:430px;max-height:66dvh;overflow:auto;}
  body.pk-story .book-card{height:calc(100dvh - 170px);}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important;}
}

/* =====================================================================
   FASE 3 — INDEX RESPONSIVE RECONSTRUIDO
   El index deja de "encogerse" y cambia de composición según dispositivo.
   ===================================================================== */

body.pk-index{
  width:100%;
  min-width:0;
  overflow-x:hidden;
}

body.pk-index .page,
body.pk-index .copy,
body.pk-index .carousel-wrap,
body.pk-index .carousel{
  min-width:0;
}

/* Desktop y notebook: mantiene la composición original, pero evita desbordes. */
@media (min-width:1000px){
  body.pk-index .page{
    width:100%;
    max-width:1600px;
    margin:0 auto;
    grid-template-columns:minmax(250px,31%) minmax(0,69%);
    gap:clamp(10px,1.8vw,28px);
  }

  body.pk-index .copy{overflow:visible;}
  body.pk-index .carousel-wrap{
    width:100%;
    transform:none;
    overflow:visible;
  }

  body.pk-index .carousel{
    --center-w:min(46vw,620px);
    --side-w:min(18vw,245px);
    --gap-x:clamp(12px,1.5vw,24px);
    width:100%;
    max-width:100%;
  }
}

/* Notebook baja: compacta verticalmente sin cambiar el concepto. */
@media (min-width:1000px) and (max-height:760px){
  body.pk-index .page{
    padding-top:92px;
    padding-bottom:88px;
  }

  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{
    width:min(330px,25vw);
    max-height:48dvh;
  }

  body.pk-index .nova-assistant{margin-top:-12px;}

  body.pk-index .carousel{
    height:min(510px,68dvh);
    min-height:350px;
  }

  body.pk-index .card.center{height:100%;}
  body.pk-index .card.left,
  body.pk-index .card.right{height:84%;}
}

/* Tablet horizontal y vertical: dos bloques claros, sin tarjetas laterales. */
@media (min-width:700px) and (max-width:999px){
  body.pk-index html,
  body.pk-index{overflow:hidden;}

  body.pk-index .page{
    height:100dvh;
    min-height:640px;
    display:grid;
    grid-template-columns:minmax(190px,30%) minmax(0,70%);
    grid-template-rows:1fr;
    align-items:center;
    gap:12px;
    padding:88px 16px 92px;
    overflow:hidden;
  }

  body.pk-index .copy{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  body.pk-index .nova-guide{
    width:100%;
    height:auto;
    gap:4px;
  }

  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{
    width:min(270px,27vw);
    max-width:100%;
    max-height:45dvh;
  }

  body.pk-index .nova-assistant{
    margin-top:-6px;
    width:100%;
  }

  body.pk-index .nova-wake-btn{
    max-width:100%;
    padding:14px 18px;
    font-size:clamp(13px,1.7vw,17px);
    white-space:nowrap;
  }

  body.pk-index .carousel-wrap{
    width:100%;
    height:100%;
    min-height:0;
    transform:none;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  body.pk-index .carousel{
    --center-w:min(62vw,560px);
    --side-w:0px;
    --gap-x:0px;
    width:100%;
    height:min(66dvh,650px);
    min-height:420px;
    max-width:100%;
    overflow:visible;
  }

  body.pk-index .card.center{
    width:min(100%,var(--center-w));
    height:100%;
    border-radius:clamp(90px,12vw,150px);
  }

  body.pk-index .card.left,
  body.pk-index .card.right{display:none!important;}

  body.pk-index .arrow.prev{
    left:18px;
    transform:translate(0,-50%);
  }

  body.pk-index .arrow.next{
    left:auto;
    right:18px;
    transform:translate(0,-50%);
  }

  body.pk-index .dots{display:none;}

  body.pk-index .footer{
    left:16px;
    right:16px;
    width:auto;
    height:72px;
    padding:0 18px;
  }
}

/* Celular vertical: interfaz propia. Personaje arriba, card completa al centro. */
@media (max-width:699px) and (orientation:portrait){
  body.pk-index html,
  body.pk-index{
    width:100%;
    height:100%;
    overflow:hidden!important;
  }

  body.pk-index .page{
    width:100%;
    height:100dvh;
    min-height:560px;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto minmax(0,1fr)!important;
    align-items:start;
    gap:4px;
    padding:max(70px,calc(env(safe-area-inset-top) + 62px)) 10px max(82px,calc(env(safe-area-inset-bottom) + 72px));
    overflow:hidden;
  }

  body.pk-index .header{
    left:8px;
    right:8px;
    top:max(7px,env(safe-area-inset-top));
    height:52px;
    padding:0 9px;
  }

  body.pk-index .avatar{width:36px;height:36px;}
  body.pk-index .brand{gap:7px;}
  body.pk-index .brand-title{font-size:14px;white-space:nowrap;}
  body.pk-index .header-actions{gap:5px;}
  body.pk-index .icon-btn{width:34px;height:34px;font-size:16px;}
  body.pk-index .icon-btn img{width:21px;height:21px;}

  body.pk-index .copy{
    width:100%;
    height:auto;
    min-height:0;
    display:block;
    overflow:visible;
  }

  body.pk-index .copy > div{width:100%;}

  body.pk-index .nova-guide{
    width:100%;
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    justify-content:center;
    column-gap:8px;
    margin:0;
  }

  body.pk-index #characterHolder{
    display:flex;
    align-items:center;
    justify-content:flex-end;
  }

  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{
    width:min(84px,22vw);
    height:auto;
    max-height:15dvh;
    animation:none;
  }

  body.pk-index .nova-assistant{
    width:auto;
    min-width:0;
    margin:0;
    align-items:flex-start;
  }

  body.pk-index .nova-wake-btn{
    width:auto;
    max-width:100%;
    padding:11px 14px;
    font-size:clamp(12px,3.6vw,15px);
    white-space:nowrap;
    animation:none;
  }

  body.pk-index .carousel-wrap{
    width:100%;
    height:100%;
    min-height:0!important;
    transform:none!important;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  body.pk-index .carousel{
    --center-w:100%;
    --side-w:0px;
    --gap-x:0px;
    width:100%!important;
    max-width:100%!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden;
  }

  body.pk-index .card.center{
    width:100%!important;
    height:100%!important;
    max-height:none;
    border-radius:clamp(62px,18vw,100px);
    transform:translate(-50%,-50%)!important;
  }

  body.pk-index .card.left,
  body.pk-index .card.right,
  body.pk-index .card.hidden{display:none!important;}

  body.pk-index .card img{
    padding:3px;
    object-fit:cover;
  }

  body.pk-index .card-content{
    left:12px;
    right:12px;
    bottom:14px;
  }

  body.pk-index .card-title{
    font-size:clamp(30px,10vw,46px);
  }

  body.pk-index .arrow{
    width:42px;
    height:42px;
    font-size:28px;
  }

  body.pk-index .arrow.prev{
    left:8px!important;
    transform:translate(0,-50%)!important;
  }

  body.pk-index .arrow.next{
    left:auto!important;
    right:8px!important;
    transform:translate(0,-50%)!important;
  }

  body.pk-index .dots{display:none;}

  body.pk-index .footer{
    left:6px;
    right:6px;
    bottom:max(5px,env(safe-area-inset-bottom));
    width:auto;
    height:66px;
    padding:0 5px;
    gap:2px;
  }

  body.pk-index .tab{
    width:clamp(48px,17vw,62px);
    height:50px;
    border-radius:17px;
  }

  body.pk-index .tab-icon{width:28px;height:28px;font-size:16px;}
  body.pk-index .tab-label{font-size:7.5px;}

  body.pk-index .planet-one{width:180px;left:-74px;bottom:12vh;}
  body.pk-index .planet-two{width:150px;right:-55px;top:13vh;}
}

/* Celulares muy bajos: reduce el encabezado del personaje para dar aire a la card. */
@media (max-width:699px) and (orientation:portrait) and (max-height:700px){
  body.pk-index .page{
    padding-top:max(65px,calc(env(safe-area-inset-top) + 58px));
    padding-bottom:max(76px,calc(env(safe-area-inset-bottom) + 68px));
    gap:2px;
  }

  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{
    width:min(66px,18vw);
    max-height:11dvh;
  }

  body.pk-index .nova-wake-btn{
    padding:9px 12px;
    font-size:12px;
  }

  body.pk-index .card-title{font-size:clamp(27px,9vw,39px);}
}

/* Celular horizontal: personaje lateral compacto y card protagonista. */
@media (max-width:999px) and (orientation:landscape) and (max-height:620px){
  body.pk-index html,
  body.pk-index{overflow:hidden!important;}

  body.pk-index .page{
    height:100dvh;
    min-height:0;
    display:grid!important;
    grid-template-columns:minmax(120px,23%) minmax(0,77%)!important;
    grid-template-rows:1fr!important;
    gap:8px;
    padding:64px 10px 70px;
    overflow:hidden;
  }

  body.pk-index .header{top:6px;height:48px;}
  body.pk-index .footer{height:56px;bottom:5px;}
  body.pk-index .tab{height:44px;}

  body.pk-index .copy,
  body.pk-index .copy > div,
  body.pk-index .nova-guide{height:100%;}

  body.pk-index .nova-guide{justify-content:center;gap:0;}

  body.pk-index #characterHolder img,
  body.pk-index #characterHolder video{
    width:min(145px,17vw);
    max-height:34dvh;
  }

  body.pk-index .nova-wake-btn{
    padding:9px 12px;
    font-size:11px;
    white-space:nowrap;
  }

  body.pk-index .carousel-wrap,
  body.pk-index .carousel{
    width:100%;
    height:100%!important;
    min-height:0!important;
    transform:none;
    overflow:hidden;
  }

  body.pk-index .carousel{--center-w:100%;--side-w:0px;--gap-x:0px;}
  body.pk-index .card.center{width:100%;height:100%;border-radius:80px;}
  body.pk-index .card.left,
  body.pk-index .card.right{display:none!important;}
  body.pk-index .dots{display:none;}
}