/* =========================================================
  ESTILOS GENERALES - NAV  */
.site_nav{position: absolute;top: 0;width: 100%;}
.nav_container{display: flex;justify-content: space-between;align-items: center;}
.nav_brand img{width: 8em;}
.nav_principal{display: flex;list-style: none;padding: 0;margin: 0;}
.nav_principal li{margin-right: 1em;}
.nav_principal a{text-decoration: none;}
#menu_principal{width: 100%;}
.nav_principal a{color: var(--paper);font-weight: bolder;transition: all 0.25s;}
.nav_principal a:hover{color: var(--brand);}
.nav_principal span{box-shadow: var(--shadow);}
/* El clon parte oculto "arriba" */
.site_nav--clone{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  transform: translateY(-110%);
  transition: transform 240ms ease;
  will-change: transform;
}
/* Cuando se activa, baja y ocupa el lugar */
.site_nav--clone.is-visible{transform: translateY(0);}
#site_nav_clone{background-color: rgb(232 232 232 / 90%);box-shadow: 0 12px 25px rgba(0,0,0,0.20);width: 100vw;}
.nav_principal--clone a{color: var(--fuente);}

.floating-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.3s ease;
  z-index: 9998;
  background-color: var(--coal);
}
.floating-box.active {
  transform: translateY(0);
  opacity: 1;
}
.floating-box_nav{list-style: none;display: flex;gap: 2em;justify-content: center;align-items: center;flex-wrap: wrap;padding: 0 0.5em;}
.floating-box_nav a{text-decoration: none;color: var(--paper);}
.floating-box_nav a.active {
  color: var(--brand);
}
/* =========================================================
  RESPONSIVE: MÓVILES / TABLET (≤ 959px) */
@media (max-width:959px){
  .nav_principal{margin-top: 1em;}
  .nav_container{padding: 1em 5%;flex-wrap: wrap;}
  .floating-box_nav{font-size: 60%;}
}

/* =========================================================
  RESPONSIVE: ESCRITORIO (≥ 960px) */
@media (min-width:960px){
  .nav_principal{justify-content: end;}
  .nav_container{padding: 1em 5%;}
  .floating-box_nav{font-size: 80%;}
  .nav_container .elemento_escritorio{position: relative;z-index: 9;}
  .nav_container .nav_principal{position: relative;z-index: 9;}
}