:root{
  --home-max:1608px;
  --home-gutter:18px;
  --home-gap:11px;
}

#home-page{
  padding:10px 0 16px;
  background:
    radial-gradient(circle at 42% -8%,rgba(0,164,255,.14),transparent 34%),
    linear-gradient(180deg,#020812 0%,#03101b 54%,#020914 100%);
}

#home-page .container{
  width:min(calc(100% - (var(--home-gutter) * 2)),var(--home-max));
  margin-inline:auto;
}

#home-page>.hero,
#home-page>.meta-summary{margin-bottom:var(--home-gap)}

.home-bottom-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--home-gap);
  min-height:0;
}

.home-bottom-grid>section,
.home-bottom-grid>section>.container{min-width:0;height:100%}
.home-bottom-grid>section>.container{width:100%;margin:0}

.home-panel-section>.container{
  padding:10px 11px;
  border:1px solid rgba(61,167,229,.30);
  border-radius:12px;
  background:linear-gradient(145deg,rgba(5,21,35,.98),rgba(2,10,18,.99));
  box-shadow:inset 0 1px rgba(255,255,255,.045),0 10px 24px rgba(0,0,0,.22);
}

.home-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  height:30px;
  margin-bottom:7px;
}
.home-panel-title-wrap{display:flex;align-items:center;gap:8px;min-width:0}
.home-panel-title-wrap h2{margin:0;color:#f5f9fc;font-size:16px;line-height:1;font-weight:900}
.home-panel-icon{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;color:#43caff;background:rgba(67,202,255,.09);border:1px solid rgba(67,202,255,.31);font-size:11px}
.home-panel-icon--gold{color:#fbc84c;background:rgba(251,200,76,.09);border-color:rgba(251,200,76,.34)}
.home-panel-link{font-size:9px;font-weight:850;color:#49c6ff;white-space:nowrap}

@media (min-width:1101px){
  #home-page{
    display:grid;
    grid-template-rows:
      clamp(214px,14.5vw,242px)
      clamp(170px,11.2vw,188px)
      clamp(330px,21vw,350px);
    gap:var(--home-gap);
    padding:10px 18px 16px;
    min-height:0;
    overflow:visible;
  }

  #home-page>.hero,
  #home-page>.meta-summary,
  #home-page>.home-bottom-grid{
    margin:0;
    min-width:0;
    min-height:0;
  }

  #home-page>.home-bottom-grid{
    width:100%;
    height:100%;
  }

  #home-page .container{
    width:100%;
    max-width:none;
  }
}

@media (max-width:1100px){
  :root{--home-gutter:12px;--home-gap:10px}
  .home-bottom-grid{grid-template-columns:1fr;height:auto}
  .home-bottom-grid>section>.container{height:auto}
}

/* ==========================================================
   HOME ONE SCREEN — DESKTOP
   Objetivo: HOME completa en el viewport real de 1366x768
   (Chrome con barra del navegador), sin scroll de página.
   Sólo layout/escala: no toca datos, enlaces ni lógica.
   ========================================================== */
@media (min-width:1101px){
  html,
  body{height:100%;min-height:0}

  html:has(#home-page),
  body:has(#home-page){
    overflow:hidden;
  }

  /* En HOME desktop el footer no compite por alto con el dashboard.
     Las demás páginas no cambian. */
  body:has(#home-page)>.site-footer,
  body:has(#home-page) footer.site-footer{
    display:none !important;
  }

  #home-page{
    width:100%;
    height:calc(100dvh - 48px);
    min-height:0;
    max-height:calc(100dvh - 48px);
    display:grid;
    grid-template-rows:minmax(0,.92fr) minmax(0,.72fr) minmax(0,1.56fr);
    gap:8px;
    margin:0;
    padding:7px 14px 8px;
    overflow:hidden;
  }

  #home-page>.hero,
  #home-page>.meta-summary,
  #home-page>.home-bottom-grid{
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    margin:0;
    overflow:hidden;
  }

  #home-page>.home-bottom-grid{
    grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
    gap:8px;
  }

  .home-bottom-grid>section,
  .home-bottom-grid>section>.container{
    height:100%;
    min-height:0;
    overflow:hidden;
  }

  .home-panel-section>.container{
    padding:7px 9px;
    border-radius:10px;
  }

  .home-panel-header{
    height:23px;
    min-height:23px;
    margin-bottom:4px;
    gap:7px;
  }

  .home-panel-title-wrap{gap:6px}
  .home-panel-title-wrap h2{font-size:14px}
  .home-panel-icon{width:19px;height:19px;border-radius:5px;font-size:9px}
  .home-panel-link{font-size:8px}
}

/* Chrome/Windows: viewport útil especialmente bajo. */
@media (min-width:1101px) and (max-height:680px){
  #home-page{
    height:calc(100dvh - 48px);
    max-height:calc(100dvh - 48px);
    grid-template-rows:minmax(0,.88fr) minmax(0,.68fr) minmax(0,1.60fr);
    gap:7px;
    padding:6px 12px 7px;
  }
}


/* HOME DESKTOP V34 — margen lateral derecho para destacados y paneles.
   No mueve el HERO ni cambia su imagen o encuadre. No afecta mobiles. */
@media (min-width:1101px) {
  #home-page > .home-mobile-fold > section.meta-summary,
  #home-page > .home-bottom-grid {
    box-sizing: border-box !important;
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    min-width: 0 !important;
    justify-self: start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #home-page > .home-mobile-fold > .meta-summary > .container,
  #home-page > .home-mobile-fold > .meta-summary .meta-grid,
  #home-page > .home-bottom-grid > .home-panel-section,
  #home-page > .home-bottom-grid > .home-panel-section > .container {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #home-page > .home-mobile-fold > .meta-summary .meta-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  #home-page > .home-bottom-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr) !important;
  }
}