/* nav.css - Navegacion */

/* Cabecera fija: icono izquierda (pagina principal), nombre en el
   centro (negrita, con "fotografa" debajo) e icono derecha (menu).
   Los iconos se alinean arriba y el nombre cuelga un poco mas abajo,
   como en la web de referencia. */
nav {
  /* Por encima del menu overlay (z 101): con el menu abierto se siguen
     viendo el nombre y los dos iconos, y el de la izquierda permite
     volver a la pagina principal. */
  position: fixed; top: 0; left: 0; right: 0; z-index: 103;
  height: var(--nav);
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 20px var(--pad) 0;    /* iconos en los extremos, bien separados del nombre */
  background: rgba(255,255,255,.97);
  transition: background .35s ease;
}

/* AL BAJAR (body.bajado, la pone view.js con el scroll): desaparecen
   el nombre y la franja blanca; solo se arrastran los dos iconos.
   La barra deja de capturar clics para no tapar el contenido (los
   iconos los reactivan). */
body.bajado nav { background: transparent; pointer-events: none; }
body.bajado nav .nav-icon { pointer-events: auto; }
body.bajado .nav-brand { opacity: 0; pointer-events: none; }

/* EN LA PAGINA PRINCIPAL (body.inicio, la pone view.js): el nombre no
   va en la barra fija sino dentro de la pagina (ver .trabajos-cabecera
   en trabajos.css), asi que aqui se oculta el nombre de la barra y esta
   queda transparente con solo los dos iconos. Igual en escritorio y
   movil. En el resto de secciones el nombre vuelve a la barra. */
body.inicio nav { background: transparent; pointer-events: none; }
body.inicio nav .nav-icon { pointer-events: auto; }
body.inicio .nav-brand { opacity: 0; pointer-events: none; }

/* EN "ABOUT" (body.sin-marca, la pone view.js): se ocultan el nombre y
   "photographer", y la barra queda transparente con solo los dos
   iconos, igual que en la principal (peticion de Alicia: "dejamos
   lienzo en blanco").
   Aqui la franja blanca no hace falta: ABOUT no se desplaza (cabe en
   una pantalla, ver sobre.css) y su contenido empieza justo por debajo
   de los iconos, asi que nada puede pasar por detras de ellos. */
body.sin-marca nav { background: transparent; pointer-events: none; }
body.sin-marca nav .nav-icon { pointer-events: auto; }
body.sin-marca .nav-brand { opacity: 0; pointer-events: none; }

/* Iconos de home y menu: mismo tamaño, sin fondo. Grandes en
   escritorio (en movil se reducen, ver responsive.css).
   HALO BLANCO (v5.73): la barra es transparente en varios casos
   -body.bajado (al hacer scroll, en toda la web) y body.sin-marca (el
   About)-, pensada en su dia para flotar sobre las fotos del mosaico.
   En el About en movil, desde que esa seccion tambien hace scroll
   (v5.71), el texto de la presentacion o del CV pasa por detras de
   estos iconos al desplazarse y se mezclaba con ellos (aviso de
   Alicia, 10-08-2026: "que no se solape con los iconos del punto y del
   menu"). En vez de devolverle a la barra un fondo solido -rompe el
   efecto de "iconos flotando" que Alicia pidio, y que en el mosaico
   funciona bien-, se les pone el mismo halo blanco que ya llevan los
   mandos del visor de fotos (proyecto.css): quedan legibles encima de
   cualquier fondo, sea una foto o un parrafo de texto. */
.nav-icon {
  width: 60px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  color: var(--negro);
  background: none; border: none; padding: 0;
  flex-shrink: 0;
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px #fff);
  transition: opacity .2s ease;
}
/* El aclarado, SOLO CON RATON DE VERDAD (v6.0). En tactil el ":hover"
   no desaparece al levantar el dedo -se queda "pegado" hasta que tocas
   otra cosa-, asi que el punto negro se quedaba gris despues de
   pulsarlo: "hay que darle al fondo blanco de la web para que vuelva a
   ser negro; la idea es que siempre este en negro, le des o no"
   (Alicia, 13-08-2026, en tablet). Se pregunta por el TIPO DE PUNTERO,
   no por el ancho de pantalla: una tablet es ancha pero tactil, asi que
   un @media de ancho no la habria cubierto. */
@media (hover: hover) and (pointer: fine) {
  .nav-icon:hover { opacity: .55; }
}
.nav-icon svg { width: 42px; height: 42px; }

/* Nombre + subtitulo, centrados y descolgados unos px respecto a
   los iconos. Es un enlace: vuelve a la principal. */
.nav-brand {
  display: flex; flex-direction: column; align-items: center;
  line-height: 1.3;
  margin-top: 12px;
  text-decoration: none; cursor: pointer;
  transition: opacity .35s ease;
}
/* Nombre mas pequenito y "fotografa" algo mas grande (peticion de Alicia) */
.nav-nombre {
  font-family: var(--titulo);
  font-weight: 700;             /* nombre en NEGRITA (peticion de Alicia) */
  font-size: 21px; letter-spacing: .01em;
  color: var(--negro);
}
.nav-subtitulo {
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gris);
  margin-top: 4px;
}

/* El boton de menu conserva SIEMPRE las 3 rayas horizontales, tambien
   con el menu abierto (peticion de Alicia: sin X). */

/* MENU OVERLAY: pantalla completa, translucido, con las entradas
   (works, commissions, projects, about). Tipografia
   contenida, no gigante (peticion de Alicia). */
.nav-panel {
  position: fixed; inset: 0; z-index: 101;
  /* Translucido, para que se intuya el mosaico por detras
     (peticion de Alicia) */
  background: rgba(255,255,255,.90);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .32s ease, visibility .32s;
}
.nav-panel.abierto { opacity: 1; visibility: visible; }

.nav-panel ul {
  list-style: none;
  text-align: center;
}
/* Sin recortes: el texto crece al posarse encima y no debe quedar
   cortado por los lados (antes llevaba overflow:hidden, que solo hacia
   falta para la entrada deslizante de las opciones) */
.nav-panel li { overflow: visible; }
.nav-panel a {
  display: block;
  padding: 11px 30px;
  font-family: var(--titulo);
  /* Mas pequeño que antes -era clamp(19px,2.6vw,27px)-, que a
     Alicia se le hacia muy grande */
  font-size: clamp(15px, 1.7vw, 19px);
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--negro);
  transform: translateY(24px); opacity: 0;
  transition: transform .45s ease, opacity .45s ease, color .2s ease;
}
/* El menu abierto deja el texto en su sitio; la entrada sobre la que
   se posa el raton NO se agrisa (antes si), sino que CRECE un poco,
   igual que las miniaturas de las fotos (peticion de Alicia). El
   transform-origin centrado evita que el texto se desplace al crecer. */
.nav-panel.abierto a { transform: translateY(0); opacity: 1; }
.nav-panel.abierto li:nth-child(1) a { transition-delay: .06s; }
.nav-panel.abierto li:nth-child(2) a { transition-delay: .12s; }
.nav-panel.abierto li:nth-child(3) a { transition-delay: .18s; }
.nav-panel.abierto li:nth-child(4) a { transition-delay: .24s; }
.nav-panel.abierto li:nth-child(5) a { transition-delay: .30s; }
.nav-panel.abierto a:hover,
.nav-panel.abierto a:focus-visible,
.nav-panel.abierto a:active,
.nav-panel.abierto a.active,
.nav-panel.abierto a.tocado {
  color: var(--negro);
  transform: translateY(0) scale(1.14);
}
/* LA CLASE ".tocado" (movil, la pone controller.js en el toque) NECESITA
   SU PROPIA TRANSICION RAPIDA Y SIN RETRASO: si heredara la de arriba
   -pensada para la entrada escalonada del menu, con transition-delay de
   hasta .30s segun la posicion- el crecido tardaria ese mismo retraso
   en notarse, justo lo contrario de "que se vea grande cuando clicas,
   no a posteriori" (Alicia, 12-08-2026). */
.nav-panel.abierto a.tocado {
  transition: transform .12s ease, color .12s ease;
  transition-delay: 0s;
}

/* Con el overlay abierto no se desplaza el fondo */
body.menu-abierto { overflow: hidden; }

/* Indicador de foco para navegacion con teclado */
.nav-icon:focus-visible, .nav-panel a:focus-visible {
  outline: 1px solid var(--negro);
  outline-offset: 4px;
}

/* ============================================================
   TABLET EN HORIZONTAL: EL ICONO DEL MENU, MAS PEQUEÑO (24-08-2026).
   Alicia aviso de que "se ve muy grande" y de que le pasa SOLO con la
   tablet en horizontal. Tiene explicacion: los iconos miden 60px, la
   medida de escritorio -una tablet no entra en el @media de movil, que
   va por ancho-, y en horizontal la pantalla es mucho mas baja, asi
   que ese mismo icono se come bastante mas de lo que se ve. En
   vertical hay alto de sobra y no canta, por eso ella solo lo nota en
   una de las dos.
   Se reconoce la tablet como en el resto de la web (tactil y ancha) y
   se acota a horizontal, que es lo que pidio. */
@media (hover: none) and (min-width: 769px) and (min-height: 481px) and (orientation: landscape) {
  /* Segunda pasada (25-08-2026): Alicia pidio reducirlo mas todavia
     tras ver los 46/32 del dia anterior. */
  .nav-icon { width: 40px; height: 40px; }
  .nav-icon svg { width: 26px; height: 26px; }
}