/* ═══ INTRO LOADER — Animación de dron previa a la app ═══ */
.intro{
  position:fixed;inset:0;z-index:9999;
  background:linear-gradient(135deg,var(--verde-oscuro) 0%,#051a08 100%);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  transition:opacity .8s ease,visibility .8s ease;
}
.intro.hidden{opacity:0;visibility:hidden}
/* Nace oculta en el HTML: sin JavaScript no hay animación que cerrar, así que
   el visitante ve la página directamente. IntroLoader la muestra si toca. */
.intro[hidden]{display:none}
.intro::before{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px,rgba(77,149,74,.08) 1px,transparent 0);
  background-size:30px 30px;pointer-events:none;
}

/* Franjas del manual en el intro */
.intro-franja-1{
  position:absolute;
  top:-100px;left:-200px;
  width:900px;height:250px;
  background:var(--verde-agricola);
  transform:rotate(-25deg);
  opacity:.4;
}
.intro-franja-2{
  position:absolute;
  bottom:-100px;right:-200px;
  width:900px;height:200px;
  background:var(--verde-claro);
  transform:rotate(-25deg);
  opacity:.3;
}

.intro-ground{
  position:absolute;bottom:0;left:0;right:0;
  height:30%;z-index:2;overflow:hidden;
}
.intro-ground svg{width:100%;height:100%;display:block}

.scan-line{
  position:absolute;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--verde-agricola),transparent);
  box-shadow:0 0 20px var(--verde-agricola);
  opacity:0;z-index:5;
  animation:scanMove 3s ease-in-out infinite;
}
@keyframes scanMove{
  0%{top:30%;opacity:0}
  20%{opacity:1}80%{opacity:1}
  100%{top:80%;opacity:0}
}

.drone-wrap{
  position:relative;z-index:10;
  animation:droneFly 4s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes droneFly{
  0%{transform:translateX(-100vw) translateY(20px) rotate(-5deg);opacity:0}
  20%{transform:translateX(0) translateY(20px) rotate(0deg);opacity:1}
  40%{transform:translateX(0) translateY(-15px) rotate(2deg)}
  60%{transform:translateX(0) translateY(0) rotate(-1deg)}
  80%,100%{transform:translateX(0) translateY(-10px) rotate(0deg);opacity:1}
}
.drone-icon{
  width:180px;height:180px;position:relative;
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.5));
}
.drone-shadow{
  position:absolute;bottom:-80px;left:50%;
  transform:translateX(-50%);
  width:120px;height:20px;
  background:radial-gradient(ellipse,rgba(0,0,0,.5) 0%,transparent 70%);
  filter:blur(8px);
  animation:shadowPulse 2s ease-in-out infinite;
}
@keyframes shadowPulse{
  0%,100%{transform:translateX(-50%) scale(1);opacity:.5}
  50%{transform:translateX(-50%) scale(.85);opacity:.7}
}

.propeller{position:absolute;width:50px;height:50px;animation:spin .15s linear infinite}
.propeller::before,.propeller::after{
  content:'';position:absolute;top:50%;left:50%;
  width:50px;height:5px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
  transform:translate(-50%,-50%);border-radius:50%;filter:blur(.5px);
}
.propeller::after{transform:translate(-50%,-50%) rotate(90deg)}
.propeller-tl{top:5px;left:5px}.propeller-tr{top:5px;right:5px}
.propeller-bl{bottom:5px;left:5px}.propeller-br{bottom:5px;right:5px}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

.intro-text{
  position:absolute;bottom:22%;left:50%;
  transform:translateX(-50%);
  text-align:center;z-index:10;
  opacity:0;
  animation:textFadeIn 1s ease 1.5s forwards;
}
@keyframes textFadeIn{to{opacity:1}}
.intro-eyebrow{
  font-size:0.6875rem;letter-spacing:.4em;
  text-transform:uppercase;color:var(--verde-agricola);
  font-weight:700;margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.intro-eyebrow::before,.intro-eyebrow::after{
  content:'';width:30px;height:1px;background:var(--verde-agricola);
}
/* El logotipo oficial en negativo. Antes había aquí una imitación
   tipográfica con «DIMENSIONES» en otro color; el logotipo real usa un solo
   tono para las dos palabras. */
.intro-logo{
  width:min(340px,72vw);height:auto;
  margin:0 auto;
}

.loading-bar{
  position:absolute;bottom:10%;left:50%;
  transform:translateX(-50%);
  width:220px;height:2px;
  background:rgba(77,149,74,.15);
  border-radius:2px;overflow:hidden;z-index:10;
}
.loading-bar::after{
  content:'';display:block;height:100%;width:0%;
  background:var(--verde-agricola);
  animation:loadFill 3.5s ease-out forwards;
}
@keyframes loadFill{0%{width:0%}100%{width:100%}}

.skip-intro{
  position:absolute;bottom:30px;right:30px;
  background:transparent;
  border:1px solid rgba(255,255,255,.25);
  color:rgba(255,255,255,.7);
  padding:9px 18px;border-radius:20px;
  font-size:0.6875rem;font-weight:600;letter-spacing:.1em;
  font-family:'Montserrat',sans-serif;
  cursor:pointer;z-index:10;transition:all .2s;
  opacity:0;
  animation:fadeInIntro .6s ease 1.2s forwards;
}
.skip-intro:hover{border-color:var(--verde-agricola);color:var(--verde-agricola)}
@keyframes fadeInIntro{to{opacity:1}}