/*
 * AF-126.1 — Mobile Foundation + Home
 * Scope: public/user frontend only. Studio intentionally excluded.
 */

.mobile-home{display:none}

@media(max-width:760px){
  :root{
    --mobile-gap:14px;
    --mobile-radius:18px;
  }

  html{scroll-behavior:smooth}
  body:not(.studio-page){
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
  }

  body:not(.studio-page) .page{
    width:100%;
    max-width:none;
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right));
  }

  body:not(.studio-page) .site-header{
    height:58px;
    padding-left:max(14px,env(safe-area-inset-left));
    padding-right:max(14px,env(safe-area-inset-right));
    padding-top:env(safe-area-inset-top);
  }

  body:not(.studio-page) .brand{min-height:44px}
  body:not(.studio-page) .nav-toggle{
    min-width:44px;
    min-height:44px;
  }

  body:not(.studio-page) button,
  body:not(.studio-page) .button,
  body:not(.studio-page) input[type="checkbox"],
  body:not(.studio-page) input[type="radio"]{
    touch-action:manipulation;
  }

  body:not(.studio-page) .site-footer{
    padding-bottom:max(24px,env(safe-area-inset-bottom));
  }

  /* Home móvil: las órbitas desaparecen por decisión de producto. */
  body.observatory-page .chronos-observatory{display:none!important}
  body.observatory-page .mobile-home{
    display:block;
    min-height:calc(100dvh - 58px);
    padding:20px 0 max(34px,env(safe-area-inset-bottom));
  }

  .mobile-home__hero{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding:8px 2px 20px;
  }
  .mobile-home__hero .eyebrow{
    color:#7faeff;
    font-size:10px;
    letter-spacing:.16em;
    text-transform:uppercase;
  }
  .mobile-home__hero h1{
    margin:5px 0 7px;
    font-size:clamp(30px,9vw,42px);
    line-height:1;
  }
  .mobile-home__hero p{
    margin:0;
    max-width:30ch;
    color:#94a3ba;
    font-size:13px;
    line-height:1.45;
  }
  .mobile-home__account{
    flex:0 0 46px;
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border:1px solid rgba(139,182,255,.22);
    border-radius:15px;
    background:rgba(10,17,30,.82);
    color:#dfeaff;
    text-decoration:none;
    font-size:24px;
  }

  .mobile-home__section{margin-top:22px}
  .mobile-home__heading{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:12px;
    margin:0 2px 10px;
  }
  .mobile-home__heading span{
    display:block;
    color:#65758d;
    font-size:9px;
    letter-spacing:.15em;
    text-transform:uppercase;
  }
  .mobile-home__heading h2{
    margin:3px 0 0;
    font-size:21px;
  }
  .mobile-home__heading>a{
    min-height:44px;
    display:flex;
    align-items:center;
    color:#86b6ff;
    text-decoration:none;
    font-size:12px;
  }

  .mobile-continue-list{
    display:grid;
    gap:10px;
  }
  .mobile-continue-card{
    position:relative;
    display:grid;
    grid-template-columns:74px minmax(0,1fr) 28px;
    align-items:center;
    gap:12px;
    min-height:104px;
    padding:10px;
    border:1px solid rgba(117,148,194,.22);
    border-radius:var(--mobile-radius);
    background:linear-gradient(145deg,rgba(15,24,40,.94),rgba(7,12,22,.94));
    color:#f5f8ff;
    text-decoration:none;
    overflow:hidden;
    transition:transform .16s ease,border-color .16s ease;
  }
  .mobile-continue-card:active{transform:scale(.985)}
  .mobile-continue-card img,
  .mobile-continue-card__empty{
    width:74px;
    height:84px;
    border-radius:12px;
    object-fit:cover;
    background:#0b1422;
  }
  .mobile-continue-card__empty{
    display:grid;
    place-items:center;
    color:#6483ad;
  }
  .mobile-continue-card__copy{min-width:0}
  .mobile-continue-card__copy small{
    display:block;
    color:#78a9ed;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.08em;
  }
  .mobile-continue-card__copy strong{
    display:block;
    margin:3px 0 2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:15px;
  }
  .mobile-continue-card__copy>span{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#9aa9be;
    font-size:11px;
  }
  .mobile-continue-card__copy i{
    display:block;
    height:3px;
    margin-top:9px;
    border-radius:999px;
    background:rgba(255,255,255,.09);
    overflow:hidden;
  }
  .mobile-continue-card__copy i b{
    display:block;
    height:100%;
    background:linear-gradient(90deg,#5d9cff,#70d4ff);
  }
  .mobile-continue-card__copy em{
    display:block;
    margin-top:5px;
    color:#687991;
    font-size:9px;
    font-style:normal;
  }
  .mobile-continue-card__go{
    color:#6e86aa;
    font-size:28px;
    text-align:center;
  }

  .mobile-universe-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .mobile-universe-card{
    position:relative;
    min-height:205px;
    overflow:hidden;
    border:1px solid color-mix(in srgb,var(--accent) 28%,rgba(255,255,255,.12));
    border-radius:20px;
    background:#09101c;
    color:#fff;
    text-decoration:none;
    isolation:isolate;
    transition:transform .17s ease,border-color .17s ease;
  }
  .mobile-universe-card:active{transform:scale(.98)}
  .mobile-universe-card__visual{
    position:absolute;
    inset:0;
    z-index:-3;
    background-image:var(--cover);
    background-size:cover;
    background-position:center;
    transform:scale(1.02);
  }
  .mobile-universe-card__shade{
    position:absolute;
    inset:0;
    z-index:-2;
    background:
      linear-gradient(180deg,rgba(3,7,14,.06) 8%,rgba(3,7,14,.33) 49%,rgba(3,7,14,.94) 100%),
      linear-gradient(135deg,color-mix(in srgb,var(--accent) 14%,transparent),transparent 52%);
  }
  .mobile-universe-card__copy{
    position:absolute;
    inset:auto 12px 12px;
  }
  .mobile-universe-card__copy small{
    display:inline-flex;
    padding:4px 7px;
    border:1px solid color-mix(in srgb,var(--accent) 38%,rgba(255,255,255,.12));
    border-radius:999px;
    background:rgba(5,10,19,.65);
    color:#dceaff;
    font-size:9px;
    backdrop-filter:blur(8px);
  }
  .mobile-universe-card__copy strong{
    display:block;
    margin:7px 0 3px;
    font-size:16px;
    line-height:1.05;
  }
  .mobile-universe-card__copy span{
    color:#9babc0;
    font-size:9px;
  }
  .mobile-universe-card__copy i{
    display:block;
    height:3px;
    margin-top:8px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.12);
  }
  .mobile-universe-card__copy i b{
    display:block;
    height:100%;
    background:var(--accent);
    box-shadow:0 0 10px var(--accent);
  }

  .mobile-home__empty{
    display:block;
    padding:22px;
    border:1px dashed rgba(116,155,213,.35);
    border-radius:18px;
    background:rgba(8,14,25,.7);
    color:#eaf2ff;
    text-decoration:none;
  }
  .mobile-home__empty span{
    display:block;
    margin-top:4px;
    color:#7f8ea5;
    font-size:12px;
  }

  .mobile-quick-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }
  .mobile-quick-grid a{
    min-height:72px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px;
    border:1px solid rgba(107,137,182,.2);
    border-radius:16px;
    background:rgba(10,17,29,.82);
    color:#dfe8f7;
    text-decoration:none;
  }
  .mobile-quick-grid b{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#111e32;
    color:#83b4ff;
    font-size:20px;
  }
  .mobile-quick-grid span{font-size:12px;font-weight:700}

  .mobile-home__stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    margin-top:24px;
    padding:13px 0 2px;
    border-top:1px solid rgba(255,255,255,.07);
  }
  .mobile-home__stats div{text-align:center}
  .mobile-home__stats strong{display:block;font-size:18px}
  .mobile-home__stats span{
    color:#65758d;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.08em;
  }

  /* User Hub / Comunidad: base vertical cómoda sin tocar Studio. */
  body[data-page="account"] .user-hub-grid,
  body[data-page="community"] .community-grid{
    grid-template-columns:1fr!important;
  }

  /* Transiciones discretas. */
  .mobile-home__section{
    animation:cvMobileIn .28s ease both;
  }
  .mobile-home__section:nth-of-type(2){animation-delay:.035s}
  .mobile-home__section:nth-of-type(3){animation-delay:.07s}
  .mobile-home__section:nth-of-type(4){animation-delay:.105s}

  @keyframes cvMobileIn{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:none}
  }
}

@media(max-width:370px){
  .mobile-universe-grid{grid-template-columns:1fr}
  .mobile-universe-card{min-height:175px}
  .mobile-quick-grid{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mobile-home__section{animation:none!important}
  .mobile-continue-card,
  .mobile-universe-card{transition:none!important}
}


/* AF-126.1.1 — restaurar scroll natural en Home móvil.
   app.css bloquea el body de .observatory-page para la experiencia orbital desktop. */
@media(max-width:760px){
  html{
    overflow-x:hidden !important;
    overflow-y:auto !important;
    height:auto !important;
    min-height:100% !important;
  }

  body.observatory-page{
    overflow-x:hidden !important;
    overflow-y:auto !important;
    height:auto !important;
    min-height:100dvh !important;
    position:relative !important;
    touch-action:pan-y !important;
    overscroll-behavior-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  body.observatory-page .page{
    min-height:100dvh !important;
    overflow:visible !important;
  }

  body.observatory-page .mobile-home{
    height:auto !important;
    overflow:visible !important;
    touch-action:pan-y !important;
  }
}


/* =========================================================
   AF-126.2 — Menú móvil público
   ========================================================= */
@media(max-width:760px){
  body:not(.studio-page) .site-header nav .nav-mobile-hidden{
    display:none !important;
  }

  body:not(.studio-page) .site-header nav{
    max-height:calc(100dvh - 88px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:10px;
  }

  body:not(.studio-page) .site-header nav .user-chip{
    margin:2px 4px 7px;
    padding:9px 11px;
    font-size:11px;
  }

  body:not(.studio-page) .site-header nav a{
    min-height:44px;
    display:flex;
    align-items:center;
    padding:11px 13px;
  }

  body:not(.studio-page) .site-header nav .nav-exit{
    margin-top:5px;
    border-top:1px solid rgba(255,255,255,.07);
    color:#e4a3ad;
  }
}

/* =========================================================
   AF-126.2 — Universo móvil vertical
   ========================================================= */
.ue-back-mobile{display:none}

@media(max-width:760px){
  body.universe-engine-page .page{
    width:100% !important;
    max-width:none !important;
    padding:0 14px 46px !important;
  }

  body.universe-engine-page .site-header{
    position:sticky;
    top:0;
  }

  /* Hero compacto, visual y legible */
  body.universe-engine-page .ue-hero{
    min-height:430px !important;
    margin:12px 0 0;
    padding:76px 18px 20px !important;
    border-radius:22px !important;
    align-items:flex-end;
    background-position:center;
  }

  body.universe-engine-page .ue-hero-overlay{
    background:
      linear-gradient(180deg,rgba(2,5,12,.08) 0%,rgba(2,5,12,.18) 32%,rgba(2,5,12,.86) 76%,rgba(2,5,12,.98) 100%),
      linear-gradient(90deg,rgba(2,5,12,.38),rgba(2,5,12,.08) 64%);
  }

  body.universe-engine-page .ue-topline{
    top:16px;
    left:16px;
    right:16px;
    align-items:center;
  }

  body.universe-engine-page .ue-topline>span{display:none}
  body.universe-engine-page .ue-back-desktop{display:none}
  body.universe-engine-page .ue-back-mobile{display:inline}
  body.universe-engine-page .ue-back{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    padding:0 12px;
    border:1px solid rgba(255,255,255,.13);
    border-radius:12px;
    background:rgba(4,8,17,.52);
    backdrop-filter:blur(10px);
    font-size:12px;
  }

  body.universe-engine-page .ue-hero-copy{
    width:100%;
    max-width:none;
  }

  body.universe-engine-page .ue-hero-copy .eyebrow{
    font-size:9px;
    letter-spacing:.17em;
  }

  body.universe-engine-page .ue-universe-logo{
    width:min(72vw,320px) !important;
    max-height:104px !important;
    margin:8px 0 8px !important;
    object-position:left center;
  }

  body.universe-engine-page .ue-hero-copy h1{
    margin:7px 0 8px;
    font-size:clamp(34px,11vw,52px) !important;
    line-height:.98;
  }

  body.universe-engine-page .ue-hero-copy p{
    margin:5px 0 0;
    font-size:13px;
    line-height:1.4;
  }

  body.universe-engine-page .ue-progress{
    width:100%;
    height:5px;
    margin:14px 0 16px;
  }

  body.universe-engine-page .ue-hero-stats{
    display:none !important;
  }

  body.universe-engine-page .ue-hero-actions{
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
  }

  body.universe-engine-page .ue-hero-actions .button{
    min-height:46px;
    padding:11px 13px;
    border-radius:12px;
    font-size:12px;
  }

  body.universe-engine-page .ue-hero-actions .button:first-child{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* Navegación interna como carrusel táctil */
  body.universe-engine-page .ue-nav{
    position:sticky;
    top:58px;
    z-index:18;
    gap:5px;
    margin:10px -14px 22px;
    padding:8px 14px;
    border-radius:0;
    border-left:0;
    border-right:0;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    background:rgba(4,8,16,.92);
    backdrop-filter:blur(16px);
  }
  body.universe-engine-page .ue-nav::-webkit-scrollbar{display:none}
  body.universe-engine-page .ue-nav a{
    flex:0 0 auto;
    min-height:42px;
    display:flex;
    align-items:center;
    padding:9px 13px;
    scroll-snap-align:start;
    white-space:nowrap;
    border:1px solid rgba(255,255,255,.06);
    border-radius:999px;
    background:rgba(255,255,255,.025);
    font-size:12px;
  }
  body.universe-engine-page .ue-nav a.active{
    border-color:color-mix(in srgb,var(--blue) 32%,transparent);
    background:rgba(75,137,229,.15);
  }

  /* Secciones más compactas */
  body.universe-engine-page .ue-section{
    margin:22px 0 30px;
  }
  body.universe-engine-page .ue-section-head{
    display:flex;
    flex-direction:row;
    align-items:end;
    justify-content:space-between;
    gap:10px;
    margin-bottom:11px;
  }
  body.universe-engine-page .ue-section-head .eyebrow{
    font-size:8px;
    letter-spacing:.16em;
  }
  body.universe-engine-page .ue-section-head h2{
    margin:3px 0 0;
    font-size:23px;
  }
  body.universe-engine-page .ue-section-head>a{
    min-height:42px;
    display:flex;
    align-items:center;
    font-size:10px;
    text-align:right;
  }

  /* Continuar viendo: imagen de apoyo, no protagonista */
  body.universe-engine-page .ue-continue{
    min-height:0;
    grid-template-columns:112px minmax(0,1fr) !important;
    border-radius:18px;
  }
  body.universe-engine-page .ue-continue-art{
    min-height:172px !important;
    background-position:center;
  }
  body.universe-engine-page .ue-continue--poster .ue-continue-art{
    min-height:172px !important;
  }
  body.universe-engine-page .ue-continue--poster .ue-continue-art:before{
    inset:-10px;
    filter:blur(9px) saturate(.9) brightness(.5);
  }
  body.universe-engine-page .ue-continue-poster{
    width:82px !important;
    height:124px !important;
    max-width:none !important;
    object-fit:cover !important;
    border-radius:8px;
  }
  body.universe-engine-page .ue-continue-copy{
    min-width:0;
    padding:16px 14px !important;
  }
  body.universe-engine-page .ue-continue-copy>span{
    font-size:8px;
    line-height:1.35;
  }
  body.universe-engine-page .ue-continue-copy h3{
    margin:7px 0 6px;
    font-size:19px !important;
    line-height:1.08;
  }
  body.universe-engine-page .ue-continue-copy p{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
    margin:0;
    font-size:11px;
    line-height:1.45;
  }
  body.universe-engine-page .ue-continue-copy .title-actions{
    margin-top:10px;
  }
  body.universe-engine-page .ue-continue-copy .watch-toggle{
    min-height:42px;
    padding:8px 10px;
    font-size:10px;
  }
  body.universe-engine-page .ue-continue-copy .favorite-toggle{
    width:42px;
    min-width:42px;
    height:42px;
    padding:0;
  }

  /* Formatos: dos tarjetas por fila */
  body.universe-engine-page .ue-format-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px;
  }
  body.universe-engine-page .ue-format-card{
    min-height:116px !important;
    padding:14px !important;
    border-radius:16px !important;
  }
  body.universe-engine-page .ue-format-card span{font-size:11px}
  body.universe-engine-page .ue-format-card strong{
    margin:7px 0;
    font-size:21px;
  }
  body.universe-engine-page .ue-format-card small{
    margin-top:7px;
    font-size:9px;
  }

  /* Historial y favoritos: carrusel horizontal compacto */
  body.universe-engine-page .ue-mini-grid{
    display:flex !important;
    gap:9px;
    overflow-x:auto;
    margin-right:-14px;
    padding:1px 14px 10px 0;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  body.universe-engine-page .ue-mini-grid::-webkit-scrollbar{display:none}
  body.universe-engine-page .ue-mini-card{
    flex:0 0 min(76vw,270px);
    min-height:118px !important;
    padding:16px !important;
    border-radius:17px !important;
    scroll-snap-align:start;
  }
  body.universe-engine-page .ue-mini-card h3{
    margin:8px 0 5px;
    font-size:16px;
  }
  body.universe-engine-page .ue-mini-card p{
    font-size:11px;
  }

  /* Otros universos */
  body.universe-engine-page .ue-universe-strip{
    gap:9px;
    margin-right:-14px;
    padding-right:14px;
  }
  body.universe-engine-page .ue-universe-strip a{
    flex-basis:min(70vw,250px) !important;
    min-height:145px !important;
    padding:15px !important;
    border-radius:18px !important;
  }

  /* Catálogo: tarjeta vertical compacta y útil con el pulgar */
  body.universe-engine-page .catalog-toolbar{
    position:static;
    margin:0 0 12px;
    padding:10px;
    grid-template-columns:1fr 1fr !important;
    gap:8px;
    border-radius:16px;
  }
  body.universe-engine-page .catalog-toolbar input{
    grid-column:1/-1 !important;
    min-height:44px;
  }
  body.universe-engine-page .catalog-toolbar select{
    min-width:0;
    min-height:44px;
    font-size:11px;
  }
  body.universe-engine-page .catalog-toolbar button{
    grid-column:1/-1;
    min-height:44px;
  }

  body.universe-engine-page .catalog-grid{
    grid-template-columns:1fr !important;
    gap:10px;
  }

  body.universe-engine-page .title-card{
    display:grid !important;
    grid-template-columns:96px minmax(0,1fr);
    min-height:148px;
    border-radius:18px;
  }
  body.universe-engine-page .title-poster{
    min-height:100%;
    aspect-ratio:auto !important;
    background-position:center;
  }
  body.universe-engine-page .title-poster span{
    right:7px;
    bottom:7px;
    padding:4px 6px;
    font-size:9px;
  }
  body.universe-engine-page .title-body{
    min-width:0;
    padding:13px 12px;
  }
  body.universe-engine-page .title-meta{font-size:8px}
  body.universe-engine-page .title-body h2{
    margin:5px 0 5px;
    font-size:17px;
    line-height:1.12;
  }
  body.universe-engine-page .title-body p{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    margin:0;
    font-size:10px;
    line-height:1.4;
  }
  body.universe-engine-page .title-actions{
    margin-top:9px;
  }
  body.universe-engine-page .title-actions button{
    min-height:40px;
    padding:8px 9px;
    font-size:10px;
  }
  body.universe-engine-page .personal-row{
    display:none !important;
  }
}

@media(max-width:390px){
  body.universe-engine-page .ue-hero-actions{
    grid-template-columns:1fr;
  }
  body.universe-engine-page .ue-format-grid{
    grid-template-columns:1fr 1fr !important;
  }
  body.universe-engine-page .ue-continue{
    grid-template-columns:96px minmax(0,1fr) !important;
  }
  body.universe-engine-page .ue-continue-poster{
    width:72px !important;
    height:108px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  body.universe-engine-page .ue-nav,
  body.universe-engine-page .ue-mini-grid,
  body.universe-engine-page .ue-universe-strip{
    scroll-behavior:auto !important;
  }
}