/* ── Base ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Raleway', system-ui, sans-serif;
  background-color: #F0FDF4;
  color: #0F172A;
  overflow-x: hidden; 
}

h1, h2, h3, h4 { font-family: 'Lora', Georgia, serif; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* subtle paper grain */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.018;
  pointer-events: none;
  z-index: 200;
}

/* ── Navbar ───────────────────────────────────── */
#navbar { transition: background 0.35s ease, box-shadow 0.35s ease; }
#navbar.scrolled {
  background: rgba(240,253,244,0.94) !important;
  backdrop-filter: blur(14px);
  box-shadow: 0 2px 24px rgba(21,128,61,0.10);
}

/* nav link underline */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1.5px;
  background: #15803D;
  transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }

/* nav links white when transparent, dark when scrolled */
#navbar:not(.scrolled) .nav-link          { color: rgba(255,255,255,0.88); }
#navbar:not(.scrolled) .nav-link:hover    { color: #fff; }
#navbar:not(.scrolled) .nav-link::after   { background: rgba(255,255,255,0.75); }
#navbar:not(.scrolled) .nav-link.nav-active { color: #fff; }
#navbar:not(.scrolled) .nav-link.nav-active::after { background: #fff; width: 100%; }

/* ── Hero ─────────────────────────────────────── */
.hero-bg {
  background:
    linear-gradient(160deg, rgba(5,20,10,0.70) 0%, rgba(21,128,61,0.22) 50%, rgba(5,20,10,0.75) 100%),
    url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=1920&q=80');
  background-size: cover;
  background-position: center 35%;
  position: relative;
}

/* organic leaf silhouettes in hero */
.hero-leaf {
  position: absolute;
  opacity: 0.07;
  pointer-events: none;
}

/* ── Scroll reveal ────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(2px);
  transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1),
              transform 0.85s cubic-bezier(0.16,1,0.3,1),
              filter 0.85s cubic-bezier(0.16,1,0.3,1);
}
.reveal.shown { opacity: 1; transform: none; filter: blur(0); }
.d1 { transition-delay: 0.10s; }
.d2 { transition-delay: 0.22s; }
.d3 { transition-delay: 0.36s; }
.d4 { transition-delay: 0.52s; }
.d5 { transition-delay: 0.70s; }

/* ── Organic blobs ────────────────────────────── */
@keyframes morph {
  0%,100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  33%      { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  66%      { border-radius: 50% 60% 30% 60% / 30% 70% 60% 40%; }
}
.blob {
  position: absolute;
  border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  animation: morph 10s ease-in-out infinite;
  pointer-events: none;
}

/* ── Wave dividers ────────────────────────────── */
.wave { line-height: 0; display: block; }

/* ── Inscription amount buttons ───────────────── */
.amt-btn {
  border: 2px solid #E2EFE7;
  color: #374151;
  transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.15s;
}
.amt-btn:hover    { border-color: #15803D; color: #15803D; }
.amt-btn.selected { border-color: #15803D; background: #15803D; color: #fff; }

/* ── Payment tabs ─────────────────────────────── */
.pay-tab {
  border-bottom: 2px solid transparent;
  color: #9CA3AF;
  transition: color 0.2s, border-color 0.2s;
}
.pay-tab.active { border-color: #15803D; color: #15803D; font-weight: 600; }
.pay-panel { display: none; }
.pay-panel.active { display: block; }

/* ── Banner submarino (#concurso) ─────────────── */
.underwater-banner .underwater-line2 {
  background: linear-gradient(100deg, #fff 30%, #bfe9ff 45%, #fff 55%, #fff 60%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: underwaterShimmer 4.5s ease-in-out infinite;
}
@keyframes underwaterShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .underwater-banner .underwater-line2 { animation: none; }
}

/* ── Prize card shimmer ───────────────────────── */
@keyframes shimmer {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.prize-card {
  /* Tonos ~33% más oscuros que el verde/teal de marca: el degradado original
     era demasiado claro para que el texto blanco encima cumpliera contraste
     AA (ver auditoría de accesibilidad). Mismo matiz, más densidad. */
  background: linear-gradient(140deg, #04402f 0%, #036446 50%, #0a4f4a 100%);
  position: relative; overflow: hidden;
}
.prize-card::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 65%);
  animation: shimmer 8s linear infinite;
}

/* ── Countdown digits ─────────────────────────── */
.cd-digit {
  font-family: 'Lora', serif;
  font-variant-numeric: tabular-nums;
  transition: transform 0.15s ease;
}
.cd-flip { transform: scale(1.08); }

/* ── Ranking card hover ───────────────────────── */
.rank-row {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.rank-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(21,128,61,0.12);
}

/* ── Light-on-dark line-height boost ─────────── */
.hero-bg p, .bg-primary p, .bg-fg p, .bg-teal-900 p,
.bg-pri-xdark p { line-height: 1.75; }

/* ── Skip link ────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 10000;
  background: #15803D;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0 0 8px 8px;
  font-family: 'Raleway', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }

/* ── Custom scrollbar ─────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #F0FDF4; }
::-webkit-scrollbar-thumb { background: #15803D; border-radius: 4px; }

/* ── Focus rings ──────────────────────────────── */
:focus-visible { outline: 2px solid #15803D; outline-offset: 3px; border-radius: 4px; }

/* ── Input focus ──────────────────────────────── */
.field:focus {
  outline: none;
  border-color: #15803D;
  box-shadow: 0 0 0 3px rgba(21,128,61,0.15);
}

/* reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, .blob, .prize-card::before, .cd-digit,
  #mob-menu, .pay-panel, .ripple-dot,
  .wave-anim-svg, .particle-container svg,
  .cursor-trail,
  .impact-stage, .scroll-progress-leaf,
  .podium-medal::after, .nav-cta-pulse, .organic-wipe,
  .mobile-cta-bar, .bases-chevron, .bases-accordion[open] > p { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; filter: none; }
  #scroll-progress { display: none; }
  .particle-container, .cursor-main, .firefly-canvas, .hero-particles-canvas,
  .scroll-progress-leaves, .pollen-canvas { display: none; }
  .organic-wipe { clip-path: none !important; }
}

/* ── Animation tokens ─────────────────────────── */
:root {
  --ease-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

/* ── Scroll progress bar ──────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: linear-gradient(90deg, #D97706, #F59E0B);
  z-index: 9999;
  width: 0%;
  pointer-events: none;
  transition: width 0.08s linear;
}

/* ── Mobile menu: entrada tipo "hoja que se despliega" ── */
#mob-menu:not(.hidden) {
  animation: menuUnfurl 0.46s var(--ease-expo) both;
  transform-origin: top center;
}

/* ── Payment panel fade-in ────────────────────── */
@keyframes panelFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pay-panel.active {
  animation: panelFadeIn 0.28s var(--ease-expo) both;
}

/* ── Button press feedback ────────────────────── */
.amt-btn:active   { transform: scale(0.95); }
.ripple-btn:active { transform: scale(0.97); }

/* ── Ripple effect ────────────────────────────── */
@keyframes rippleOut {
  from { transform: scale(0); opacity: 0.45; }
  to   { transform: scale(4.5); opacity: 0; }
}
.ripple-dot {
  position: absolute;
  border-radius: 50%;
  width: 48px; height: 48px;
  margin-top: -24px; margin-left: -24px;
  background: rgba(255, 255, 255, 0.32);
  animation: rippleOut 0.6s var(--ease-expo) forwards;
  pointer-events: none;
}

/* ── Nav active section highlight ─────────────── */
.nav-link.nav-active { color: #15803D; }
.nav-link.nav-active::after { width: 100%; }

/* ── Biodiversity carousel scrollbar ─────────── */
#bio-track::-webkit-scrollbar { display: none; }

/* ── Carta al futuro ──────────────────────────── */
.carta-section { background: #050f08; }

.carta-section h2,
.carta-section p.font-serif,
.carta-section blockquote p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  letter-spacing: 0.01em;
}

.carta-section h2 {
  font-weight: 300;
  letter-spacing: -0.02em;
}

.carta-section blockquote p {
  font-size: clamp(1.35rem, 2.8vw, 2rem);
  font-weight: 300;
  letter-spacing: 0.015em;
}

.carta-section p.font-serif {
  font-size: 1.175rem;
  font-weight: 400;
  line-height: 2.05;
}

.carta-glow {
  position: absolute;
  top: 42%; left: 50%;
  transform: translate(-50%, -50%);
  width: 960px; height: 720px;
  background: radial-gradient(ellipse at center, rgba(21,128,61,0.055) 0%, transparent 65%);
  pointer-events: none;
}

/* ── Hero floating particles ──────────────────────── */
.particle-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}

@keyframes particleDrift1 {
  0%   { transform: translateY(0) translateX(0) rotate(0deg);   opacity: 0; }
  6%   { opacity: 0.65; }
  88%  { opacity: 0.4; }
  100% { transform: translateY(-94vh) translateX(65px) rotate(220deg); opacity: 0; }
}
@keyframes particleDrift2 {
  0%   { transform: translateY(0) translateX(0) rotate(-15deg); opacity: 0; }
  6%   { opacity: 0.5; }
  88%  { opacity: 0.3; }
  100% { transform: translateY(-90vh) translateX(-58px) rotate(-255deg); opacity: 0; }
}
@keyframes particleDrift3 {
  0%   { transform: translateY(0) translateX(0) rotate(30deg);  opacity: 0; }
  6%   { opacity: 0.55; }
  50%  { transform: translateY(-46vh) translateX(32px) rotate(-18deg); }
  88%  { opacity: 0.35; }
  100% { transform: translateY(-88vh) translateX(-22px) rotate(175deg); opacity: 0; }
}

/* ── Animated waves ───────────────────────────────── */
.wave-anim-wrap {
  overflow: hidden;
  position: relative;
  line-height: 0;
  display: block;
}
.wave-anim-svg {
  position: absolute;
  top: 0; left: 0;
  width: 200%; height: 100%;
  will-change: transform;
  animation: waveSlide 14s linear infinite;
}
@keyframes waveSlide {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Word-split heading animation ─────────────────── */
.word-clip  { display: inline-block; vertical-align: bottom; }
.word-inner { display: inline-block; }

/* ── Custom cursor ────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  body, body * { cursor: none !important; }
  /* Excepción: en campos de texto se conserva el cursor nativo (I-beam)
     para que se note con claridad dónde se está escribiendo. */
  body input, body textarea, body select,
  body [contenteditable="true"] { cursor: text !important; }
}
.cursor-main {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  width: 20px; height: 26px;
  /* El pivote de rotación/escala se fija en el mismo punto que ancla el
     translate (50% 0%, la punta de la hoja en el path SVG: "M10 0...")
     para que esa punta —donde el usuario percibe que apunta— quede
     siempre pegada a la posición real del mouse, sin importar el ángulo
     de rotación. Antes el ancla estaba en 50% 80% (la base redondeada de
     la hoja, no la punta), así que el clic real caía ~22px por debajo de
     donde el usuario veía la punta apuntando — había que apuntar más
     arriba del botón para que el clic le pegara. */
  transform-origin: 50% 0%;
  transform: translate(-50%, 0%) rotate(-25deg);
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3));
  transition: transform 0.1s ease, opacity 0.15s ease;
}
.cursor-main.over-field { opacity: 0; }
@keyframes trailFade {
  0%   { opacity: 0.8;  transform: translate(-50%,-50%) scale(1)   rotate(var(--r)); }
  100% { opacity: 0;    transform: translate(-50%,-50%) scale(0.15) rotate(calc(var(--r) + 70deg)); }
}
.cursor-trail {
  position: fixed;
  pointer-events: none;
  z-index: 99998;
  border-radius: 0 100% 0 100%;
  animation: trailFade 0.5s ease forwards;
}

/* ── Spotlight en secciones oscuras ───────────────── */
.carta-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  transition: background 0.08s linear;
}

/* ── Luciérnagas canvas ───────────────────────────── */
.firefly-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ── Partículas interactivas canvas ───────────────── */
.hero-particles-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 4;
}

/* ── 3D Species card flip ─────────────────────────── */
.card-flip-wrapper { perspective: 1200px; }
.card-flip-inner {
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transition: transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 1rem;
}
.card-flip-wrapper.flipped .card-flip-inner { transform: rotateY(180deg); }
.card-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* backface-visibility:hidden solo oculta el pintado de la cara que mira
   "hacia atrás" — varios navegadores la siguen considerando clicable
   (sigue en el árbol de hit-testing). Sin esto, el clic en "Volver" puede
   caer sobre la cara frontal invisible en vez de sobre el botón visible. */
.card-flip-wrapper:not(.flipped) .card-face-back { pointer-events: none; }
.card-flip-wrapper.flipped .card-face-front { pointer-events: none; }
.card-face-front { width: 100%; }
.card-face-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  border-radius: 1rem;
  overflow: hidden;
}

/* ── Hero parallax layers ─────────────────────────── */
.parallax-layer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  pointer-events: none;
  will-change: transform;
}

/* ── Colombia map ─────────────────────────────────── */
.colombia-fill { fill: rgba(74,222,128,0.18); stroke: rgba(74,222,128,0.5); stroke-width: 1.5; }
.colombia-sea  { fill: rgba(21,128,61,0.06); }

/* ── Scroll progress: vid con hojas que brotan ────── */
.scroll-progress-leaves {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 14px;
  z-index: 9999;
  pointer-events: none;
}
.scroll-progress-leaf {
  position: absolute;
  top: 1px;
  width: 8px; height: 11px;
  margin-left: -4px;
  opacity: 0;
  transform: scale(0.25) translateY(2px) rotate(-15deg);
  transform-origin: bottom center;
  transition: opacity 0.45s var(--ease-expo), transform 0.45s var(--ease-expo);
}
.scroll-progress-leaf.active { opacity: 0.85; transform: scale(1) translateY(0) rotate(0deg); }
#scroll-progress { box-shadow: 0 0 10px rgba(217,119,6,0.55); }

/* ── Visualizador de impacto en la inscripción ────── */
.impact-stage {
  opacity: 0;
  transform: scale(0.86) translateY(6px);
  transform-origin: 60px 104px;
  transition: opacity 0.5s var(--ease-expo), transform 0.5s var(--ease-expo);
}
.impact-stage.active { opacity: 1; transform: scale(1) translateY(0); }

/* ── Tilt 3D en tarjetas de biodiversidad ──────────── */
.card-face-front { will-change: transform; }

/* ── Badge IUCN con arco de nivel de amenaza ───────────────────────
   El arco SVG blanco representa la "zona de amenaza ocupada":
   EN ≈ 75% del arco lleno  →  el peligro casi rodea la especie.
   LC ≈ 20% del arco lleno  →  hay mucho margen de seguridad.
   El glow pulse en EN/VU refuerza la urgencia visual.
──────────────────────────────────────────────────────────────────── */
.iucn-badge {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Raleway', system-ui, sans-serif;
  font-weight: 900;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: #fff;
  z-index: 10;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.iucn-badge > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.iucn-badge > span {
  position: relative;
  z-index: 1;
  line-height: 1;
  text-align: center;
}

@keyframes iucn-glow-en {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(212,0,43,0.2)); }
  50%       { filter: drop-shadow(0 0 8px rgba(212,0,43,1)) drop-shadow(0 0 14px rgba(212,0,43,0.6)); }
}
@keyframes iucn-glow-vu {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(224,112,0,0.2)); }
  50%       { filter: drop-shadow(0 0 7px rgba(224,112,0,0.95)) drop-shadow(0 0 12px rgba(224,112,0,0.5)); }
}
.iucn-pulse-en { animation: iucn-glow-en 2s ease-in-out infinite; }
.iucn-pulse-vu { animation: iucn-glow-vu 2.7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .iucn-pulse-en, .iucn-pulse-vu { animation: none; }
}

/* ── Polen ambiental en Biodiversidad ─────────────── */
.pollen-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ── Medallas del podio: brillo periódico asíncrono ── */
.podium-medal { position: relative; overflow: hidden; }
.podium-medal::after {
  content: '';
  position: absolute;
  top: -60%; left: -60%;
  width: 45%; height: 220%;
  background: linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.75) 50%, transparent 100%);
  transform: rotate(8deg);
  animation: medalShine 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes medalShine {
  0%, 78% { left: -60%; opacity: 0; }
  84%     { opacity: 1; }
  96%     { left: 135%; opacity: 1; }
  100%    { left: 135%; opacity: 0; }
}

/* ── CTA del navbar: pulso periódico sutil ────────── */
@keyframes ctaPulse {
  0%, 95% { box-shadow: 0 0 0 0 rgba(217,119,6,0); }
  97%     { box-shadow: 0 0 0 5px rgba(217,119,6,0.22); }
  100%    { box-shadow: 0 0 0 12px rgba(217,119,6,0); }
}
.nav-cta-pulse { animation: ctaPulse 9s ease-out infinite; }

/* ── Acordeón: bases del concurso ─────────────────── */
.bases-accordion summary { list-style: none; }
.bases-accordion summary::-webkit-details-marker { display: none; }
.bases-chevron { transition: transform 0.3s var(--ease-expo); }
.bases-accordion[open] .bases-chevron { transform: rotate(180deg); }
@keyframes basesContentIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bases-accordion[open] > p {
  animation: basesContentIn 0.3s var(--ease-expo) both;
}

/* ── Barra flotante "Inscríbete Ahora" (móvil) ─────── */
.mobile-cta-bar {
  background: linear-gradient(to top, rgba(240,253,244,0.97) 55%, rgba(240,253,244,0));
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.32s var(--ease-expo), visibility 0s linear 0.32s;
}
.mobile-cta-bar.shown {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.32s var(--ease-expo), visibility 0s linear 0s;
}

/* ── Wipe orgánico: Hero → Nosotros ────────────────── */
.organic-wipe {
  clip-path: ellipse(94% 82% at 50% 48%);
  transition: clip-path 1.2s var(--ease-expo);
  will-change: clip-path;
}
.organic-wipe.opened { clip-path: ellipse(150% 150% at 50% 50%); }

/* ── Menú móvil: se "despliega" como una hoja ─────── */
@keyframes menuUnfurl {
  0%   { opacity: 0; clip-path: polygon(50% 0%, 54% 8%, 50% 18%, 46% 8%); transform: scaleY(0.9); }
  55%  { opacity: 1; }
  100% { opacity: 1; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transform: scaleY(1); }
}

/* ── Mapa satélite Leaflet: "Dónde Estamos" ─────────
   - Filtro oscuro sobre los tiles Esri para coincidir con la
     paleta oscura (#03141c) del contenedor.
   - Marcador personalizado con punto ámbar y anillos pulsantes.
─────────────────────────────────────────────────────── */
#mapa-sanandres { position: relative; }

/* Capa de tiles levemente oscurecida / saturada */
#mapa-sanandres .leaflet-tile-pane {
  filter: saturate(1.18) brightness(0.82) contrast(1.06);
}

/* Controles de zoom estilizados */
#mapa-sanandres .leaflet-control-zoom {
  border: none !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5) !important;
  border-radius: 10px !important;
  overflow: hidden;
}
#mapa-sanandres .leaflet-control-zoom a {
  background: rgba(3,20,28,0.88) !important;
  color: rgba(255,255,255,0.65) !important;
  border-color: rgba(255,255,255,0.08) !important;
  font-size: 16px !important;
  font-weight: 300 !important;
  line-height: 28px !important;
  width: 28px !important;
  height: 28px !important;
}
#mapa-sanandres .leaflet-control-zoom a:hover {
  background: rgba(6,37,52,0.96) !important;
  color: #D97706 !important;
}

/* Ocultar atribución nativa (usamos la del footer) */
#mapa-sanandres .leaflet-control-attribution { display: none !important; }

/* ── Marcador personalizado ── */
.lf-marker-wrap {
  position: relative;
  width: 20px;
  height: 20px;
}
.lf-dot {
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #D97706;
  box-shadow: 0 0 0 2px rgba(217,119,6,0.35), 0 0 10px rgba(217,119,6,0.7);
  z-index: 2;
}
.lf-ring {
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid rgba(217,119,6,0.6);
  z-index: 1;
  animation: lf-ring-pulse 2.4s ease-out infinite;
}
.lf-ring-2 {
  border-color: rgba(217,119,6,0.35);
  animation-delay: 1.2s;
}
@keyframes lf-ring-pulse {
  0%   { width: 10px; height: 10px; opacity: 0.9; }
  100% { width: 44px; height: 44px; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lf-ring { animation: none; width: 28px; height: 28px; opacity: 0.4; }
}

/* Label flotante sobre el marcador */
.lf-label {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: rgba(3,20,28,0.90);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(217,119,6,0.30);
  border-radius: 8px;
  padding: 5px 10px;
  font-family: 'Raleway', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.06em;
  pointer-events: none;
  line-height: 1.4;
  text-align: center;
}
.lf-label span {
  display: block;
  font-size: 8.5px;
  font-weight: 400;
  color: rgba(217,119,6,0.80);
  letter-spacing: 0.08em;
  margin-top: 1px;
}
/* ── UICN árbol: layout alternado izquierda / derecha ─────────── */
.uicn-tree-grid {
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}
.uicn-tree-grid > * {
  min-width: 0;
  width: calc(50% - 1.75rem);   /* ~46% del contenedor */
}
.uicn-tree-grid > *:nth-child(odd)  { align-self: flex-start; }
.uicn-tree-grid > *:nth-child(even) { align-self: flex-end;   }

@media (max-width: 640px) {
  .uicn-tree-grid > * {
    width: 100%;
    align-self: stretch !important;
  }
}

/* Pequeña punta del tooltip */
.lf-label::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(217,119,6,0.35);
}