/* Portfolio — visor fiel de imágenes originales.
   Sin frameworks. Animaciones y controles aplican SOLO a contenedores
   externos (figure, nav, barra de progreso): los JPG quedan byte-idénticos.

   Principios anti-pantalla-negra:
   - Todo es visible por defecto, incluso sin JavaScript.
   - La opacidad reducida inicial solo existe bajo .anim, clase que agrega
     JS únicamente si IntersectionObserver existe Y no hay reduced-motion.
   - scroll-behavior y la apertura del menú son CSS puro (funcionan sin JS). */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

/* 5. SMOOTH SCROLL — CSS nativo, sin dependencias */
html {
  scroll-behavior: smooth;
}

/* Sin fondos, tipografías ni decoración ajenas a los diseños */
body {
  background: #ffffff;
}

img {
  /* Reglas exigidas: ancho completo, altura proporcional, sin recortes */
  display: block;
  width: 100%;
  height: auto;
}

main {
  display: block;
}

/* Las imágenes quedan pegadas entre sí: secciones, figuras e imágenes no
   generan ningún espacio extra (margin/padding/line-height). */
.version {
  display: block;
  font-size: 0;
  line-height: 0;
}

/* Contenedor externo de cada imagen: base para anclas de navegación,
   zonas de contacto (position:relative) y animaciones de contenedor. */
.con-contacto {
  position: relative;
}

/* Escritorio y tablet horizontal (predeterminado): versión PORTAFOLIO WEB */
.version-movil {
  display: none;
}

/* Celular (cualquier orientación) y tablet en orientación vertical:
   versión PORTAFOLIO CELU + tablet 768–1023 px vertical */
@media (max-width: 767px), (max-width: 1023px) and (orientation: portrait) {
  .version-desktop {
    display: none;
  }
  .version-movil {
    display: block;
  }
}

/* ================================================================
   1 + 2. FADE IN + FADE UP, CON STAGGER
   El estado "pre-animación" (opacidad levemente reducida + 12px abajo)
   SOLO existe si JS agregó .anim: sin JS o sin IntersectionObserver las
   imágenes se ven siempre completas. El stagger se setea por JS
   (transition-delay por lote de aparición) sobre el mismo contenedor.
   ================================================================ */
.anim .reveal {
  opacity: 0.55;
  transform: translateY(12px);
  transition: opacity 650ms cubic-bezier(0.2, 0.6, 0.2, 1),
              transform 650ms cubic-bezier(0.2, 0.6, 0.2, 1);
  will-change: opacity, transform;
}

.anim .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ================================================================
   4. INDICADOR DE PROGRESO — línea fija superior de 3px.
   fixed = cero impacto en el layout, sin desplazamientos de contenido.
   Chrome moderno (animation-timeline: scroll()): CSS puro.
   Navegadores sin esa API: fallback rAF en script.js.
   ================================================================ */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1200;
  pointer-events: none;
}

.progress-bar {
  width: 100%;
  height: 100%;
  background: rgba(20, 20, 20, 0.82);
  transform: scaleX(0);
  transform-origin: 0 0;
}

@supports (animation-timeline: scroll()) {
  .progress-bar {
    animation: progreso-lineal linear;
    animation-timeline: scroll();
  }
}

@keyframes progreso-lineal {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ================================================================
   3. NAVEGACIÓN FLOTANTE — discreta, esquina superior derecha.
   Apertura/cierre suaves por CSS (checkbox), usable con teclado y tacto.
   ================================================================ */
.nav-flotante {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 1100;
  font-family: Arial, Helvetica, sans-serif;
}

/* El interruptor queda enfocable (teclado) aunque sea invisible */
.nav-toggle-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* El anillo de foco del interruptor se traslada al botón visible */
.nav-toggle-input:focus-visible + .nav-button {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.nav-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border-radius: 50%;
  background: rgba(22, 22, 22, 0.62);
  color: #ffffff;
  cursor: pointer;
  transition: background-color 200ms ease, transform 200ms ease;
}

.nav-button:hover {
  background: rgba(22, 22, 22, 0.82);
  transform: scale(1.05);
}

.ico-cerrar {
  display: none;
}

.nav-toggle-input:checked + .nav-button .ico-menu {
  display: none;
}

.nav-toggle-input:checked + .nav-button .ico-cerrar {
  display: block;
}

.nav-panel {
  position: absolute;
  top: 46px;
  right: 0;
  min-width: 168px;
  padding: 6px;
  border-radius: 10px;
  background: rgba(22, 22, 22, 0.92);
  color: #ffffff;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 220ms ease, transform 220ms ease, visibility 220ms;
}

.nav-toggle-input:checked ~ .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav-list {
  list-style: none;
}

.nav-list a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.nav-list a:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* Indicador de foco para navegación por teclado (no altera el diseño normal) */
.nav-list a:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}

/* Listas: escritorio muestra las 6 secciones, móvil solo 2 accesos */
.nav-list-movil {
  display: none;
}

@media (max-width: 767px), (max-width: 1023px) and (orientation: portrait) {
  .nav-list-escritorio {
    display: none;
  }
  .nav-list-movil {
    display: block;
  }

  .nav-button {
    width: 36px;
    height: 36px;
  }

  .nav-flotante {
    top: 10px;
    right: 10px;
  }
}

/* ================================================================
   6. CONTACTO CLICABLE — zonas transparentes en % sobre la imagen.
   Coordenadas verificadas pixel a pixel sobre los originales:
   - 8.jpg  (1920 x 1080): prefijo hz-d-
   - 2.jpg  (1080 x 1920): prefijo hz-m-
   Sin hover visible: el diseño no cambia salvo el foco por teclado.
   ================================================================ */
.hotzone {
  position: absolute;
  display: block;
  background: transparent;
  z-index: 2;
}

.hotzone[aria-disabled="true"] {
  cursor: default;
}

/* Indicador de foco solo al navegar con teclado */
.hotzone:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.95);
  outline-offset: -2px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55) inset;
}

/* --- Escritorio 8.jpg: (x px / 1920)% y (y px / 1080)% --- */
.hz-d-ig {
  left: 80.729%;
  top: 53.056%;
  width: 13.021%;   /* x 1550-1800 */
  height: 5.278%;   /* y  573- 630 */
}

.hz-d-behance {
  left: 76.823%;
  top: 63.426%;
  width: 17.188%;   /* x 1475-1805 */
  height: 5.278%;   /* y  685- 742 */
}

.hz-d-gmail {
  left: 63.281%;
  top: 73.611%;
  width: 30.469%;   /* x 1215-1800 */
  height: 5.833%;   /* y  795- 858 */
}

.hz-d-linkedin {
  left: 73.177%;
  top: 82.222%;
  width: 20.833%;   /* x 1405-1805 */
  height: 5.278%;   /* y  888- 945 */
}

/* --- Móvil 2.jpg: (x px / 1080)% y (y px / 1920)% --- */
.hz-m-ig {
  left: 81.944%;
  top: 79.688%;
  width: 15.741%;   /* x  885-1055 */
  height: 3.125%;   /* y 1530-1590 */
}

.hz-m-behance {
  left: 57.407%;
  top: 83.594%;
  width: 40.463%;   /* x  620-1057 */
  height: 2.604%;   /* y 1605-1655 */
}

.hz-m-gmail {
  left: 51.389%;
  top: 86.771%;
  width: 46.111%;   /* x  555-1053 */
  height: 3.125%;   /* y 1666-1726 */
}

.hz-m-linkedin {
  left: 55.556%;
  top: 90.000%;
  width: 42.130%;   /* x  600-1055 */
  height: 2.604%;   /* y 1728-1778 */
}

/* Accesibilidad utilitaria */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ================================================================
   MOVIMIENTO REDUCIDO: sin smooth scroll, sin transiciones ni
   animaciones — todo queda visible y estático de inmediato.
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .anim .reveal,
  .anim .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .progress-bar {
    /* El indicador avanza 1:1 con el gesto del usuario (scroll-driven),
       no tiene movimiento autónomo, así que sigue funcionando. */
  }

  .nav-button,
  .nav-panel,
  .nav-list a {
    transition: none;
  }
}