/* ============================================================
   NAVEGACIÓN  ·  menú fijo que adopta la paleta de cada sección
   ============================================================ */

.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:100;
  height:calc(var(--alto-nav) + var(--seguro-arriba));
  padding-top:var(--seguro-arriba);
  display:flex;
  align-items:center;
  background:var(--nav-fondo, #ffffff);
  color:var(--nav-texto, #111111);
  border-bottom:2px solid var(--nav-acento, #ff0a57);
  transition:background var(--transicion), color var(--transicion), border-color var(--transicion);
}

.nav__inner{
  width:100%;
  max-width:var(--ancho-max);
  margin-inline:auto;
  padding-inline:calc(24px + var(--seguro-izq)) calc(24px + var(--seguro-der));
  display:flex;
  align-items:center;
  gap:20px;
}

/* --- logo: hace las veces del botón de INICIO --- */
.nav__logo{
  display:flex; align-items:center;
  flex:0 0 auto;
  height:60px;
  padding:6px 17px;
  border-radius:999px;
  border:1.5px solid transparent;
  transition:all var(--transicion);
}
.nav__logo:hover,
.nav__logo:focus-visible{
  border-color:var(--nav-acento, currentColor);
  transform:translateY(-1px);
}
.nav__logo:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }

/* cuando el INICIO es la sección en pantalla */
.nav__logo.activo{
  background:var(--nav-acento, #fff);
  border-color:var(--nav-acento, #fff);
}
.nav__logo.activo img{ filter:var(--nav-logo-filtro-activo, none); }

/* --- el logo se comprime y da paso al corazón roto --- */
.nav__logo{ position:relative; }

.nav__logo img.nav__logo-marca,
.nav__logo img.nav__logo-corazon{
  height:100%; width:auto;
  transition:transform .38s cubic-bezier(.34,1.56,.64,1), opacity .24s ease;
}

.nav__logo img.nav__logo-corazon{
  position:absolute;
  top:50%; left:50%;
  height:78%;
  opacity:0;
  transform:translate(-50%,-50%) scale(.35) rotate(-18deg);
  pointer-events:none;
}

/* al pasar el cursor: la marca se aplasta y se va, entra el corazón */
.nav__logo:hover .nav__logo-marca,
.nav__logo:focus-visible .nav__logo-marca{
  transform:scale(1.1, .62);        /* comprimido */
  opacity:0;
}
.nav__logo:hover .nav__logo-corazon,
.nav__logo:focus-visible .nav__logo-corazon{
  opacity:1;
  transform:translate(-50%,-50%) scale(1) rotate(0deg);
}

/* latido mientras el cursor sigue encima */
.nav__logo:hover .nav__logo-corazon{ animation:latido 1.1s ease-in-out .38s infinite; }
@keyframes latido{
  0%,100%{ transform:translate(-50%,-50%) scale(1); }
  28%    { transform:translate(-50%,-50%) scale(1.13); }
  52%    { transform:translate(-50%,-50%) scale(.99); }
}

@media (prefers-reduced-motion: reduce){
  .nav__logo:hover .nav__logo-corazon{ animation:none; }
}

/* en táctil no hay hover: el corazón nunca aparece */
@media (hover: none){
  .nav__logo-corazon{ display:none; }
  .nav__logo:hover .nav__logo-marca{ transform:none; opacity:1; }
}
/* el logo se recolorea según la sección activa.
   Sin transición: interpolar un filtro deja el logo lavado a medio camino. */
.nav__logo img{
  height:100%; width:auto;
  filter:var(--nav-logo-filtro, none);
}

/* --- botones --- */
.nav__menu{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto;
  flex-wrap:nowrap;
}

.nav__btn{
  position:relative;
  padding:9px 16px;
  border-radius:999px;
  font-family:var(--fuente-display);
  font-size:15px;
  font-weight:400;
  letter-spacing:.06em;
  white-space:nowrap;
  color:currentColor;
  border:1.5px solid transparent;
  transition:all var(--transicion);
}

.nav__btn:hover,
.nav__btn:focus-visible{
  border-color:currentColor;
  transform:translateY(-1px);
}
.nav__btn:focus-visible{ outline:2px solid currentColor; outline-offset:3px; }

/* botón de la sección en pantalla: usa la paleta de esa sección */
.nav__btn.activo{
  background:var(--btn-fondo);
  color:var(--btn-texto);
  border-color:var(--btn-fondo);
}


/* --- barra de progreso de lectura --- */
.progreso{
  position:fixed; top:var(--alto-nav); left:0;
  height:3px; width:0;
  background:var(--nav-acento, #ff0a57);
  z-index:101;
  transition:background var(--transicion);
}

/* ----------------  MÓVIL  ----------------
   El diseño no cambia: la misma fila de botones, que se
   desliza de lado cuando no caben. Sin menú hamburguesa. */
@media (max-width: 860px){

  .nav__inner{ gap:10px; padding-inline:14px; }

  .nav__logo{
    height:50px;
    padding:5px 11px;
  }

  .nav__menu{
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    scroll-snap-type:x proximity;
    mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 18px), transparent 100%);
    padding-inline:2px 6px;
  }
  .nav__menu::-webkit-scrollbar{ display:none; }

  .nav__btn{
    flex:0 0 auto;
    scroll-snap-align:end;
    padding:11px 14px;
    font-size:14px;
    min-height:40px;
    display:flex; align-items:center;
  }
}

@media (max-width: 500px){
  /* En celular los CINCO botones caben sin deslizar: medido en
     iPhone SE (375px), 14 Pro (393px) y 15 Pro Max (430px).
     Que se lean todos de una es el argumento del portafolio. */
  .nav__inner{ gap:5px; padding-inline:8px; }

  .nav__logo{ height:40px; padding:4px 6px; }

  .nav__menu{
    gap:4px;
    mask-image:none;          /* ya no hay nada que deslizar */
    padding-inline:0;
  }

  .nav__btn{
    padding:9px 7px;
    font-size:12px;
    letter-spacing:0;
    min-height:40px;          /* cómodo para el dedo */
  }
}