/* =============================================================
   HOME / MENÚ — el home es el menú.
   Arriba: el logo y las redes. En el medio: el botón destacado.
   Abajo: las filas del menú, centradas, cada una con su ícono.
   Las medidas ajustables están en assets/css/tokens.css.
   ============================================================= */

/* En escritorio el home es una pantalla fija. En celular no se traba:
   si el menú no entra, se puede scrollear, y al llegar abajo el gesto
   sigue a la primera sección. */
@media (min-width: 761px) and (min-height: 620px) {
  body:has(.page--home) { overflow: hidden; }
}

/* Su foto de fondo, distinta de la del resto del sitio */
body:has(.page--home)::before { background-image: var(--fondo-home); }

.home {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* dvh = el alto que se ve de verdad; en el celular la barra del
     navegador se lleva una parte y con vh sobraba pantalla */
  min-height: 100svh;
  /* aire entre el último ítem del menú y el borde de abajo */
  padding-bottom: var(--menu-aire-abajo, 20svh);
}

/* -------------------------------------------------------------
   BARRA DE ARRIBA: logo a la izquierda, redes a la derecha
   ------------------------------------------------------------- */

.home__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--barra-y, 7.8svh) var(--barra-x, 6.7%) 0;
}

.home__barra .logo { --logo-ancho: var(--logo-home, 23vw); }

.home__redes {
  display: flex;
  align-items: center;
  gap: var(--redes-separacion, 10px);
  font-size: var(--red-tamano, 2.6vw);
}

/* Los dos SVG traen aire propio a los costados (un 17% de su ancho de
   cada lado), así que la separación que se ve es mucho mayor que el
   gap. Se descuenta ese aire para que --redes-separacion sea, de
   verdad, lo que queda entre un dibujo y el otro. */
.red + .red { margin-left: calc(var(--red-aire, 0.17em) * -2); }

.red {
  display: block;
  width: 1em;
  color: var(--negro);
  transition:
    transform var(--dur-media) var(--ease-suave),
    opacity var(--dur-media) var(--ease-suave);
}

.red svg { width: 100%; height: auto; }

.red:hover {
  transform: translateY(-2px) scale(1.06);
  opacity: 0.85;
}

/* -------------------------------------------------------------
   BOTÓN DESTACADO (Nuestros proyectos)
   ------------------------------------------------------------- */

.home__destacado {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  padding: 2svh 0;
}

.destacado {
  display: inline-block;
  padding: 0.85em 2.4em;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  font-size: var(--menu-fuente);
  font-weight: 400;
  letter-spacing: var(--menu-espaciado);
  line-height: 1;
  /* la curva acelera y desacelera: el botón crece sin tirones */
  transition:
    background-color 0.5s cubic-bezier(0.65, 0, 0.35, 1),
    border-color 0.5s cubic-bezier(0.65, 0, 0.35, 1),
    letter-spacing 0.5s cubic-bezier(0.65, 0, 0.35, 1),
    transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.destacado:hover,
.destacado:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--blanco);
  letter-spacing: 0.06em;
  transform: scale(1.03);
}

/* Al hacer clic se hunde apenas, como si se apretara */
.destacado:active {
  transform: scale(0.985);
  background: rgba(255, 255, 255, 0.2);
  transition-duration: 0.12s;
}

/* -------------------------------------------------------------
   LAS FILAS DEL MENÚ
   Cada fila cruza la pantalla, pero su contenido va centrado:
   los íconos alineados entre sí y los textos también.
   ------------------------------------------------------------- */

.menu {
  border-top: 1px solid var(--linea);
}

.banda {
  position: relative;
  display: block;
  height: var(--banda-alto);
  border-bottom: 1px solid var(--linea);
}

/* Brillo sutil que aparece al pasar el mouse por la fila */
.banda::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--banda-hover) 35%,
    var(--banda-hover) 65%,
    transparent
  );
  opacity: 0;
  transition: opacity var(--dur-media) var(--ease-suave);
  pointer-events: none;
}

.banda:hover::before,
.banda:focus-visible::before { opacity: 1; }

/* Las filas hermanas se atenúan cuando una está activa.
   La transición se habilita recién al terminar la animación de
   entrada (clase .esta-listo), para que no pelee con GSAP. */
.menu.esta-listo .banda { transition: opacity var(--dur-media) var(--ease-suave); }
.menu.esta-listo:hover .banda:not(:hover) { opacity: 0.45; }

/* --- El ítem: ícono + texto, alineados y centrados en la pantalla --- */
.item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  width: var(--menu-ancho, 17.4em);
  font-size: var(--menu-fuente);
  font-weight: 400;
  letter-spacing: var(--menu-espaciado);
  line-height: 1;
  white-space: nowrap;
  transition:
    transform var(--dur-media) var(--ease-suave),
    letter-spacing var(--dur-media) var(--ease-suave);
}

.banda:hover .item,
.banda:focus-visible .item {
  transform: translate(calc(-50% + 8px), -50%);
  letter-spacing: 0.05em;
}

/* --icono-escala permite achicar o agrandar el ícono de un ítem suelto,
   sin tocar el de los demás (se declara en assets/js/data/menu.js). */
.item__icono {
  width: calc(var(--icono-tamano) * var(--icono-escala, 1));
  height: calc(var(--icono-tamano) * var(--icono-escala, 1));
  margin: 0 var(--icono-separacion, -0.5em) 0 0;
  flex: none;
  opacity: 0.9;
  transition: opacity var(--dur-media) var(--ease-suave);
}

.item__icono svg { width: 100%; height: 100%; }

.banda:hover .item__icono { opacity: 1; }

/* Estado inicial de la animación de entrada (lo libera JS con GSAP).
   Si el usuario tiene JS desactivado, el <noscript> del HTML lo revela. */
[data-intro="pendiente"] .home__barra,
[data-intro="pendiente"] .destacado,
[data-intro="pendiente"] .banda {
  opacity: 0;
}

/* =============================================================
   MOBILE — el home en pantallas angostas
   Cambia el orden de las piezas: el logo pasa al centro arriba y
   las redes bajan al pie. El menú sigue centrado, con las filas
   un poco más altas para que sean cómodas de tocar.
   Nada de esto afecta al diseño de escritorio.
   ============================================================= */

@media (max-width: 760px) {
  .home {
    position: relative;
    /* dvh mide la pantalla real del celular, sin contar la barra
       del navegador que aparece y desaparece al scrollear */
    min-height: 100svh;
    padding-bottom: var(--menu-aire-abajo-mobile, 16svh);
  }

  /* --- Arriba: el logo centrado, sin las redes --- */
  .home__barra {
    justify-content: center;
    padding: var(--barra-y-mobile, 12svh) 6vw 0;
  }

  .home__barra .logo { --logo-ancho: var(--logo-home-mobile, 56vw); }

  /* --- Las redes van al pie, centradas --- */
  .home__redes {
    position: absolute;
    left: 50%;
    bottom: var(--redes-abajo-mobile, 4svh);
    transform: translateX(-50%);
    /* 1.34em: 1em de separación más el aire que se descuenta arriba,
       para que en el celular queden igual que siempre */
    gap: var(--redes-separacion-mobile, 1.34em);
    font-size: var(--red-tamano-mobile, 9vw);
  }

  /* --- El botón destacado --- */
  .home__destacado { padding: 4svh 0; }

  .destacado {
    padding: 0.9em 2.6em;
    font-size: var(--menu-fuente-mobile, clamp(14px, 3.6vw, 20px));
  }

  /* --- Las filas del menú --- */
  .banda { height: var(--banda-alto-mobile, clamp(48px, 6svh, 68px)); }

  .item {
    width: var(--menu-ancho-mobile, 15.2em);
    font-size: var(--menu-fuente-mobile, clamp(14px, 3.6vw, 20px));
  }

  /* En pantallas táctiles no hay "pasar el mouse": el desplazamiento
     del ítem se saca para que no quede corrido al tocarlo */
  .banda:hover .item,
  .banda:focus-visible .item {
    transform: translate(-50%, -50%);
    letter-spacing: var(--menu-espaciado);
  }

  .item__icono {
    width: calc(var(--icono-tamano-mobile, 3.2em) * var(--icono-escala, 1));
    height: calc(var(--icono-tamano-mobile, 3.2em) * var(--icono-escala, 1));
  }
}

/* Pantallas muy bajas (celulares chicos en horizontal): se achica todo
   un poco para que el menú entre sin scroll */
@media (max-width: 760px) and (max-height: 680px) {
  .home__barra { padding-top: 7svh; }
  .home__barra .logo { --logo-ancho: 46vw; }
  .home__destacado { padding: 2svh 0; }
  .banda { height: clamp(42px, 5.6svh, 56px); }
}