/*
 * GARCÍA CANDO · R5.10
 * Fondo bajo la barra superior sin mover el contenido.
 * Alcance: Node, RADIX y Learn.
 * Node además mantiene la cortinilla hasta la línea que separa contenido y firma.
 */

:root{
  --gc510-header-flow:96px;
}

/* La barra compartida conserva su comportamiento flotante/persistente,
   pero sale del flujo: únicamente el fondo puede ocupar la zona superior. */
body[data-gc-page="radix"] > .gc503-global-header,
body.gc76-learn-page > .gc503-global-header,
body:not([data-gc-page]) > .gc503-global-header{
  position:fixed!important;
  top:12px!important;
  left:18px!important;
  right:18px!important;
  width:auto!important;
  margin:0!important;
  z-index:9990!important;
}

/* =========================================================
   NODE
   - Fondo/fotografía inicia en y=0 detrás de la barra.
   - El contenido conserva exactamente la compensación de la barra.
   - El share queda dentro de la cortinilla.
   - La cortinilla termina justo donde inicia la firma (border-top del footer).
   ========================================================= */
body:not([data-gc-page]) .node-shell{
  padding-top:var(--gc510-header-flow)!important;
  box-sizing:border-box!important;
}
body:not([data-gc-page]) .node-visual{
  inset:0!important;
}
body:not([data-gc-page]) .gc510-node-share{
  position:relative!important;
  z-index:5!important;
  margin-top:0!important;
  /* Mantiene el fade de 4 controles de R5.06 sobre la propia fotografía. */
  background:linear-gradient(180deg,
    rgba(4,5,5,0) 0%,
    rgba(4,5,5,.34) 33.333%,
    rgba(4,5,5,.67) 66.667%,
    #040505 100%)!important;
}
body:not([data-gc-page]) .gc510-node-signature{
  position:relative!important;
  z-index:20!important;
  background:#040505!important;
}
body:not([data-gc-page]) .gc510-node-signature .gc503-footer{
  /* Esta es la línea exacta donde termina la fotografía/cortinilla. */
  border-top:1px solid rgba(255,255,255,.12)!important;
  background:#040505!important;
}

/* =========================================================
   RADIX
   - Solo el fondo ocupa desde la parte superior.
   - El contenido conserva la misma posición visual que antes.
   ========================================================= */
body[data-gc-page="radix"] .rx-hero{
  min-height:calc(100vh - 72px + var(--gc510-header-flow))!important;
  padding-top:calc(clamp(58px,8vh,105px) + var(--gc510-header-flow))!important;
  background-color:#08080e!important;
}
body[data-gc-page="radix"]::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0 0 auto 0;
  height:calc(var(--gc510-header-flow) + 42vh);
  pointer-events:none;
  background:
    radial-gradient(circle at 83% 28%,rgba(86,24,255,.11),transparent 34%),
    #08080e;
}
body[data-gc-page="radix"] > main,
body[data-gc-page="radix"] > .gc503-global-header{
  position:relative;
}
body[data-gc-page="radix"] > .gc503-global-header{position:fixed!important}
body[data-gc-page="radix"] > main{z-index:1}

/* =========================================================
   LEARN
   - La cortinilla comienza desde y=0 detrás de la barra.
   - El contenido conserva su posición previa: se repone exactamente
     la altura retirada del flujo por la barra.
   ========================================================= */
body.gc76-learn-page .gc76-learn-hero{
  min-height:calc(62vh + var(--gc510-header-flow))!important;
  padding-top:calc(8vh + var(--gc510-header-flow))!important;
}

@media(max-width:900px){
  :root{--gc510-header-flow:92px}

  body[data-gc-page="radix"] > .gc503-global-header,
  body.gc76-learn-page > .gc503-global-header,
  body:not([data-gc-page]) > .gc503-global-header{
    top:8px!important;
    left:8px!important;
    right:8px!important;
  }

  body[data-gc-page="radix"] .rx-hero{
    min-height:auto!important;
    padding-top:calc(clamp(58px,8vh,105px) + var(--gc510-header-flow))!important;
  }

  body.gc76-learn-page .gc76-learn-hero{
    min-height:auto!important;
    padding-top:calc(60px + var(--gc510-header-flow))!important;
  }

  body:not([data-gc-page]) .node-shell{
    padding-top:var(--gc510-header-flow)!important;
  }
}
