/* Menú superior "Animales que se asoman" */
:root { --nv-h: 92px; --nv-selva: #0b4a28; --nv-amarillo: #ffd23f; --nv-naranja: #ff8a1f; }
html { scroll-padding-top: 84px; }

.nv-header { position: sticky; top: 0; z-index: 1000; padding: 12px 20px; background: rgba(11, 74, 40, .92);
             backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 20px rgba(0,0,0,.2);
             transition: background .3s ease, padding .3s ease, box-shadow .3s ease; }
/* En la portada flota transparente sobre el video hasta que se baja */
.nv-header.nv-overlay { position: fixed; left: 0; right: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nv-header.is-scrolled { padding: 6px 20px; background: rgba(11, 74, 40, .88); box-shadow: 0 8px 20px rgba(0,0,0,.25);
                         backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

.nv-row { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.nv-logo img { display: block; width: 84px; height: auto; transition: width .3s ease; filter: drop-shadow(0 4px 10px rgba(0,0,0,.45)); }
.is-scrolled .nv-logo img { width: 56px; }

/* Cápsula con la mancha amarilla que se desliza */
.nv-pill { position: relative; display: flex; gap: 2px; background: rgba(255,255,255,.94); border-radius: 40px; padding: 6px; box-shadow: 0 10px 26px rgba(0,0,0,.25); }
.nv-blob { position: absolute; top: 6px; left: 6px; width: 0; height: calc(100% - 12px); border-radius: 30px; background: var(--nv-amarillo);
           box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); opacity: 0;
           transition: left .35s cubic-bezier(.5,1.6,.4,1), width .35s cubic-bezier(.5,1.6,.4,1), opacity .2s ease; }
.nv-blob.is-ready { opacity: 1; }
.nv-pill a { position: relative; z-index: 1; font-family: var(--font-heading); font-weight: 800; font-size: 1.12rem; color: var(--nv-selva);
             padding: 7px 16px 5px; border-radius: 30px; text-decoration: none; white-space: nowrap; }
.nv-pill a:focus-visible, .nv-cta:focus-visible, .nv-burger:focus-visible, .nv-menu a:focus-visible { outline: 3px solid var(--nv-naranja); outline-offset: 3px; }
/* El animal se asoma por debajo de la cápsula */
.nv-peek { position: absolute; left: 50%; top: 62%; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 6px 14px rgba(0,0,0,.3);
           transform: translate(-50%, -14px) scale(.3); opacity: 0; z-index: -1; pointer-events: none;
           transition: transform .35s cubic-bezier(.4,1.8,.5,1), opacity .2s ease; }
.nv-pill a:hover .nv-peek, .nv-pill a:focus-visible .nv-peek { transform: translate(-50%, 14px) scale(1); opacity: 1; }

.nv-cta { font-family: var(--font-heading); font-weight: 800; font-size: 1.15rem; color: #fff; background: var(--nv-naranja); padding: 10px 22px 8px;
          border-radius: 40px; text-decoration: none; white-space: nowrap; box-shadow: 0 5px 0 #b3520a; animation: nv-latido 2.2s ease-in-out infinite; }
.nv-cta:hover { background: #ff9a3a; }
.nv-cta.is-on { background: var(--nv-amarillo); color: var(--nv-selva); box-shadow: 0 5px 0 #b8860b; }
@keyframes nv-latido { 0%, 60%, 100% { transform: scale(1); } 10% { transform: scale(1.07); } 20% { transform: scale(1); } 30% { transform: scale(1.04); } }

/* ---------- Celular ---------- */
.nv-burger { display: none; position: relative; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--nv-amarillo);
             cursor: pointer; box-shadow: 0 4px 0 #b8860b; flex: 0 0 auto; }
.nv-burger span { position: absolute; left: 13px; right: 13px; height: 3px; background: var(--nv-selva); border-radius: 3px;
                  transition: transform .3s ease, opacity .2s ease, top .3s ease; }
.nv-burger span:nth-child(1) { top: 16px; } .nv-burger span:nth-child(2) { top: 22.5px; } .nv-burger span:nth-child(3) { top: 29px; }
.nv-open .nv-burger span:nth-child(1) { top: 22.5px; transform: rotate(45deg); }
.nv-open .nv-burger span:nth-child(2) { opacity: 0; }
.nv-open .nv-burger span:nth-child(3) { top: 22.5px; transform: rotate(-45deg); }

.nv-menu { position: fixed; inset: 0; z-index: 1001; display: flex; flex-direction: column; overflow-y: auto; padding: 92px 18px 24px;
           background: linear-gradient(rgba(6,40,20,.9), rgba(6,40,20,.84)), var(--nv-selva) url('../img/recorrido/mapa_v.jpg') center / cover;
           clip-path: circle(0 at calc(100% - 44px) 40px); transition: clip-path .55s cubic-bezier(.6,0,.2,1); }
.nv-menu[hidden] { display: none; }
.nv-open .nv-menu { clip-path: circle(150% at calc(100% - 44px) 40px); }
.nv-menu a { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.96); color: var(--nv-selva); text-decoration: none;
             font-family: var(--font-heading); font-weight: 800; font-size: 1.35rem; line-height: 1.1; border-radius: 18px; padding: 8px 14px; margin-bottom: 10px;
             opacity: 0; transform: translateX(40px); transition: opacity .3s ease, transform .45s cubic-bezier(.3,1.5,.5,1); }
.nv-menu a img { width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto; }
.nv-menu a small { display: block; font-family: var(--font-body); font-weight: 600; font-size: .8rem; color: #5d6b5d; margin-top: 2px; }
.nv-menu a[aria-current="page"] { background: var(--nv-amarillo); }
.nv-open .nv-menu a { opacity: 1; transform: none; }
.nv-menu .nv-menu-big { justify-content: center; background: var(--nv-amarillo); margin-top: auto; padding: 14px; }
.nv-menu .nv-menu-wa { justify-content: center; background: #25d366; color: #fff; font-size: 1.15rem; padding: 12px; }
body.nv-lock { overflow: hidden; }

@media (max-width: 1000px) {
    :root { --nv-h: 70px; }
    html { scroll-padding-top: 70px; }
    .nv-header, .nv-header.is-scrolled { padding: 8px 14px; }
    .nv-pill, .nv-cta { display: none; }
    .nv-burger { display: block; }
    .nv-logo img, .is-scrolled .nv-logo img { width: 54px; }
    /* el encabezado queda sobre el menú abierto para ver el logo y la X */
    .nv-open .nv-header { z-index: 1003; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
    /* los botones flotantes no deben tapar el menú abierto */
    .nv-open .wa-float { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .nv-cta { animation: none; }
    .nv-blob, .nv-peek, .nv-menu, .nv-menu a, .nv-logo img, .nv-header { transition: none; }
}