/* Cuba Despierta · Naturaleza (views/naturaleza.php). Se carga solo en /descubre-cuba/naturaleza.
   Paleta de site.css más un verde de hoja y el crema del papel del cuaderno.
   Animaciones comunes de redesign.css (kenburns, fadeup, lineup, data-reveal). Vuelo y filtros: js/naturaleza.js. */
.nz { --leaf: #2f7a52; --leaf-light: #6cc59a; --paper: #f6f3ea; --tape: rgba(240,222,150,.75); }

/* ---------- Zunzuncito dibujado ---------- */
.nb-svg { display: block; width: 100%; height: auto; overflow: visible; }
.nb-body { fill: #3d9c6c; }
.nb-tail { fill: #2b6e4e; }
.nb-head, .nb-throat { fill: #e3392d; }
.nb-eye { fill: #111; }
.nb-beak { fill: #1d1d1d; }
.nb-wing { fill: rgba(205,235,220,.78); transform-box: fill-box; transform-origin: 30% 100%; }
.nb-wing-b { fill: rgba(170,215,195,.6); }
html.js .nb-wing { animation: nz-flap .07s linear infinite alternate; }
html.js .nb-wing-b { animation-delay: -.035s; }
@keyframes nz-flap { from { transform: scaleY(1) rotate(-6deg); } to { transform: scaleY(.15) rotate(8deg); } }

/* ---------- 1. Cabecera ---------- */
.nh { position: relative; display: flex; align-items: flex-end; min-height: min(100svh, 900px); padding: calc(var(--hdr-h) + 4rem) 0 5rem; background: var(--ink-950); color: #fff; overflow: hidden; isolation: isolate; }
.nh-media { position: absolute; inset: 0; z-index: -2; }
.nh-media img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 45%; transform-origin: 55% 45%; filter: saturate(1.05); }
html.js .nh-media img { animation: kenburns 26s var(--ease-out) both, hx-drift 46s ease-in-out 26s infinite alternate; }
.nh::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10,18,14,.93) 0%, rgba(10,18,14,.7) 42%, rgba(10,18,14,.1) 80%), linear-gradient(to top, rgba(10,18,14,.9) 0%, rgba(10,18,14,0) 50%); }
@media (max-width: 767px) { .nh::before { background: linear-gradient(to top, rgba(10,18,14,.96) 0%, rgba(10,18,14,.72) 55%, rgba(10,18,14,.5) 100%); } }
.nh-in { position: relative; width: 100%; }
.nh-kicker { margin-top: 1.8rem; display: flex; align-items: center; gap: .9rem; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.nh-kicker .hx-line { background: var(--leaf-light); }
.nh-title { margin-top: 1.2rem; font-size: clamp(2.8rem, .9rem + 6.8vw, 6.8rem); font-weight: 800; line-height: .92; letter-spacing: -.035em; text-transform: uppercase; }
.nh-title .serif { color: var(--leaf-light); font-size: 1.08em; text-transform: none; }
.nh-lead { margin-top: 1.4rem; max-width: 34rem; font-size: clamp(1rem, .95rem + .35vw, 1.2rem); line-height: 1.65; color: #e0e0e0; }
.nh-ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .8rem; }
/* El colibrí: JS mueve --bx/--by hacia el puntero; sin ratón se queda suspendido y oscila */
.nh-bird { position: absolute; left: 0; top: 0; z-index: 1; width: clamp(90px, 10vw, 150px); pointer-events: none; translate: var(--bx, 68vw) var(--by, 30vh); transform: scaleX(var(--face, 1)); filter: drop-shadow(0 12px 14px rgba(0,0,0,.45)); }
html.js .nh-bird .nb-svg { animation: nz-hover 2.6s ease-in-out infinite; }
@keyframes nz-hover { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(3deg); } }
@media (max-width: 767px) { .nh-bird { --bx: 60vw; --by: 16vh; width: 80px; } }

/* ---------- 2. Guía de campo ---------- */
.ng { padding-block: clamp(4rem, 3rem + 4vw, 7rem); scroll-margin-top: var(--hdr-h); }
.ng-tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
html:not(.js) .ng-tabs { display: none; }
.ng-tab { padding: .6rem 1rem; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); font: inherit; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; }
.ng-tab:hover { border-color: var(--leaf); color: var(--leaf); }
.ng-tab.is-active { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.ng-tab:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; }
.ng-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 640px) { .ng-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ng-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ng-item[hidden] { display: none; }
html.js .ng-item.is-shown { animation: fadeup .55s var(--ease-out) both; animation-delay: calc(var(--n, 0) * 70ms); }
/* La ficha: cartulina crema con cabecera tipo etiqueta de colección */
.ng-card { position: relative; display: flex; flex-direction: column; height: 100%; padding: 1.6rem 1.5rem 1.3rem; background: var(--paper); border: 1px solid #e2dccb; box-shadow: 0 20px 34px -28px rgba(0,0,0,.5); transition: transform .5s var(--ease-out), box-shadow .5s; }
.ng-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: repeating-linear-gradient(90deg, var(--leaf) 0 18px, transparent 18px 24px); }
.ng-card:hover { transform: translateY(-5px) rotate(-.4deg); box-shadow: 0 30px 44px -28px rgba(0,0,0,.55); }
.ng-head { padding-bottom: 1rem; border-bottom: 1px dashed #cfc7b2; }
.ng-no { font-size: 10.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--leaf); }
.ng-n { margin-top: .4rem; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.8rem, 1.5rem + 1vw, 2.3rem); line-height: 1; color: var(--ink); }
.ng-ci { margin-top: .3rem; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--muted); }
.ng-dl { margin: 1rem 0 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: .8rem; }
.ng-dl dt { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ng-dl dd { margin: .2rem 0 0; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.ng-dato { margin-top: 1rem; font-size: 14.5px; line-height: 1.6; color: #3d3d3d; }
.ng-foot { margin-top: auto; padding-top: 1.1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.ng-sello { padding: .3rem .6rem; border: 1.5px solid var(--leaf); color: var(--leaf); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; transform: rotate(-2deg); }
.ng-go { display: inline-flex; align-items: center; gap: .35rem; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-dark); text-decoration: none; }
.ng-go svg { transition: transform .45s var(--ease-out); }
.ng-go:hover svg { transform: translateX(5px); }

/* ---------- 3. A tamaño real ---------- */
.nr { padding-block: clamp(4rem, 3rem + 4vw, 7rem); background: #12201a; color: #fff; scroll-margin-top: var(--hdr-h); }
.nr .kicker-light { color: var(--leaf-light); }
.nr .h-display .serif { color: var(--leaf-light); }
.nr-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .nr-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; } }
.nr-p { margin-top: 1rem; max-width: 30rem; font-size: 16px; line-height: 1.7; color: #d6e2db; }
.nr-note { margin-top: .8rem; font-size: 13px; color: #9fb3a8; }
.nr-fig { margin: 0; justify-self: center; }
.nr-stage { position: relative; width: 9cm; max-width: 100%; padding: 3.8cm .5cm .3cm; background: var(--paper); box-shadow: 0 30px 50px -30px rgba(0,0,0,.8); }
.nr-bird { position: absolute; left: .5cm; top: .3cm; width: 5.5cm; }
.nr-ruler { position: relative; width: 8cm; height: 1.2cm; background:
    linear-gradient(90deg, #1b1b1b 1px, transparent 1px) 0 0 / 1cm 100% repeat-x,
    linear-gradient(90deg, #1b1b1b 1px, transparent 1px) 0 0 / .5cm 60% repeat-x,
    linear-gradient(90deg, #6b6b6b 1px, transparent 1px) 0 0 / .1cm 30% repeat-x,
    #f1d98f; border-top: 1px solid #1b1b1b; }
.nr-ruler span { position: absolute; bottom: .1cm; left: calc(var(--cm) * 1cm); translate: -50% 0; font-size: 11px; font-weight: 800; color: #1b1b1b; }
.nr-ruler span:first-child { translate: 2px 0; }
.nr-cap { margin-top: 1rem; font-size: 13px; color: #9fb3a8; text-align: center; }
html.js .nr-fig.is-in .nr-bird { animation: nz-land 1.4s var(--ease-out) both; }
@keyframes nz-land { from { transform: translate(3cm, -1.5cm) rotate(-10deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- 4. Notas de campo ---------- */
.np { padding-block: clamp(4rem, 3rem + 4vw, 7rem); }
.np-count { font-size: 14px; color: var(--muted); }
.np-count b { font-size: 1.6rem; font-weight: 900; color: var(--ink); }
.np-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem 2rem; }
@media (min-width: 760px) { .np-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .np-list.is-solo { grid-template-columns: minmax(0, 1fr); } }
.np-card { display: flex; flex-direction: column; gap: 1.3rem; color: var(--ink); text-decoration: none; }
.np-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; }
.np-photo { position: relative; display: block; padding: 12px 12px 40px; background: #fff; box-shadow: 0 24px 40px -26px rgba(0,0,0,.55); transform: rotate(var(--tilt, 0deg)); transition: transform .7s var(--ease-out); }
.np-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.np-tape { position: absolute; top: -12px; left: 50%; width: 110px; height: 28px; translate: -50% 0; rotate: -4deg; background: var(--tape); box-shadow: 0 2px 4px rgba(0,0,0,.12); }
.np-card:hover .np-photo { transform: rotate(0) translateY(-6px); }
.np-body { display: flex; flex-direction: column; gap: .6rem; }
.np-cap { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--leaf); }
.np-t { font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); font-weight: 800; line-height: 1.2; text-transform: uppercase; transition: color .3s; }
.np-card:hover .np-t { color: var(--leaf); }
.np-d { font-size: 15px; line-height: 1.6; color: var(--muted); }
.np-go { display: inline-flex; align-items: center; gap: .4rem; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-dark); }
.np-go svg { transition: transform .45s var(--ease-out); }
.np-card:hover .np-go svg { transform: translateX(5px); }
@media (min-width: 900px) {
  .np-list.is-solo .np-card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
  .np-list.is-solo .np-t { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem); line-height: 1.02; }
}
.np-empty { padding: 2rem; border: 1px dashed var(--line-strong); color: var(--muted); }

/* ---------- 5. Sigue descubriendo ---------- */
.nx { padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); border-top: 1px solid var(--line); }
.nx ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
@media (min-width: 560px) { .nx ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .nx ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .nx ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.nx a { display: flex; align-items: center; gap: .9rem; height: 100%; padding: 1rem 1.1rem; background: #fff; border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color .3s, transform .5s var(--ease-out); }
.nx-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; background: var(--soft); color: var(--brand-dark); transition: background-color .35s, color .35s, transform .5s var(--ease-out); }
.nx-txt { display: flex; flex: 1; flex-direction: column; gap: .15rem; min-width: 0; }
.nx-n { font-size: 14.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.nx-c { font-size: 12px; color: var(--muted); }
.nx a > svg { color: var(--brand); transition: transform .45s var(--ease-out); }
.nx a:hover { border-color: var(--ink); transform: translateY(-3px); }
.nx a:hover .nx-ico { background: var(--brand); color: #fff; transform: rotate(-8deg); }
.nx a:hover > svg { transform: translateX(5px); }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .nb-wing, html.js .nh-bird .nb-svg, html.js .ng-item.is-shown, html.js .nr-fig.is-in .nr-bird { animation: none; }
  .ng-card, .np-photo, .nx a { transition: none; }
}

/* ---------- Archivo (views/_cat_archivo.php): páginas del cuaderno con cinta ---------- */
.arc.is-naturaleza { --arc-card: var(--paper); --arc-accent: var(--leaf); --arc-rot: -1.2deg; }
.arc.is-naturaleza .arc-card { position: relative; overflow: visible; box-shadow: 0 16px 26px -22px rgba(0,0,0,.5); }
.arc.is-naturaleza .arc-card::before { content: ""; position: absolute; z-index: 1; top: -9px; left: 50%; width: 70px; height: 20px; translate: -50% 0; rotate: -3deg; background: var(--tape); }