/* =========================================================
   DroneSevilla — Hoja de estilos global
   Diseño cinematográfico: negro dominante, rojo de marca,
   blanco en titulares, grises en texto secundario.
   Sin frameworks. CSS puro, mobile-first, con soporte
   prefers-reduced-motion y contraste AA.
   ========================================================= */

:root{
  --bg:            #060607;
  --bg-alt:        #0d0e10;
  --bg-elevated:   #141517;
  --line:          rgba(255,255,255,.10);
  --line-strong:   rgba(255,255,255,.18);
  --red:           #e2231a;
  --red-dark:      #a4180f;
  --red-glow:      rgba(226,35,26,.35);
  --tech:          #2f8fef;   /* acento "Especializados": azul técnico, distinto del rojo audiovisual */
  --tech-dark:     #1f66b3;
  --tech-glow:     rgba(47,143,239,.35);
  --white:         #ffffff;
  --gray-1:        #c7c9cc;   /* texto secundario sobre negro, AA */
  --gray-2:        #8f9296;   /* texto terciario / metadatos */
  --gray-3:        #55585c;   /* bordes sutiles, iconografía apagada */
  --radius-sm:     6px;
  --radius-md:     14px;
  --radius-lg:     24px;
  --maxw:          1280px;
  --gutter:        clamp(20px, 5vw, 64px);
  --space-xs:      8px;
  --space-sm:      16px;
  --space-md:      32px;
  --space-lg:      64px;
  --space-xl:      112px;
  --ff-display:    "Helvetica Neue", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --ff-text:       -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --ease:          cubic-bezier(.16,.84,.44,1);
  --cookie-banner-h: 190px;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
body{
  margin:0;
  background:var(--bg);
  color:var(--white);
  font-family:var(--ff-text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img, video{ max-width:100%; height:auto; display:block; }
input[type="checkbox"], input[type="radio"]{ accent-color:var(--red); }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font:inherit; }
h1,h2,h3,h4{ font-family:var(--ff-display); font-weight:700; line-height:1.1; margin:0 0 .5em; letter-spacing:-.01em; }
p{ margin:0 0 1em; color:var(--gray-1); }
:focus-visible{ outline:3px solid var(--red); outline-offset:3px; border-radius:4px; }

.container{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--red); color:#fff;
  padding:12px 20px; z-index:1000; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Botones / CTA ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:14px 28px; border-radius:999px; font-weight:600; font-size:.95rem;
  border:1px solid transparent; cursor:pointer; transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
  white-space:nowrap; max-width:100%;
}
.btn-primary{ background:var(--red); color:#fff; }
.btn-primary:hover{ background:#ff2c20; transform:translateY(-2px); }
.btn-outline{ background:transparent; color:#fff; border-color:var(--line-strong); }
.btn-outline:hover{ border-color:#fff; transform:translateY(-2px); }
.btn-ghost{ background:rgba(255,255,255,.06); color:#fff; }
.btn-ghost:hover{ background:rgba(255,255,255,.12); }
.btn-lg{ padding:18px 36px; font-size:1.05rem; }
.btn[hidden]{ display:none; }

/* Botón destacado con un ligero "pulso" de brillo alrededor, para llamar la
   atención sobre una llamada a la acción secundaria (p.ej. "Configura tu
   proyecto paso a paso" en la portada) sin llegar a parecer un botón
   primario. Se pausa al pasar el ratón y se desactiva por completo con
   prefers-reduced-motion, igual que el resto de animaciones del sitio. */
.btn-highlight{ animation:btn-pulse-glow 2.6s ease-in-out infinite; }
.btn-highlight:hover, .btn-highlight:focus-visible{ animation-play-state:paused; }
@keyframes btn-pulse-glow{
  0%,100%{ box-shadow:0 0 0 0 rgba(226,35,26,.45); }
  50%{ box-shadow:0 0 0 9px rgba(226,35,26,0); }
}
@media (prefers-reduced-motion: reduce){ .btn-highlight{ animation:none; } }

/* Apartado "Formación" (cursos de piloto de drones con Bluedrone Formación):
   panel destacado a pantalla ancha con la foto real de las oficinas de
   Bluedrone Formación de fondo, para darle más protagonismo visual dentro
   de la home (en vez de un bloque de texto plano como el resto de
   apartados). Mismo tratamiento visual que el resto de paneles con imagen
   de fondo del sitio (degradado oscuro para que el texto se lea bien). */
.formacion-panel{
  position:relative; min-height:460px; display:flex; align-items:center; justify-content:center;
  overflow:hidden; background:#000; border-radius:var(--radius-lg); text-align:center;
}
@media (max-width:900px){ .formacion-panel{ min-height:0; padding-block:var(--space-lg); } }
.formacion-panel-media{ position:absolute; inset:0; z-index:0; }
.formacion-panel-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.formacion-panel-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,6,7,.55) 0%, rgba(6,6,7,.72) 55%, rgba(6,6,7,.93) 100%);
}
.formacion-panel-inner{ position:relative; z-index:2; max-width:760px; padding:56px 32px; margin:0 auto; }
.formacion-panel-inner p{ color:var(--gray-1); }

/* ---------- Header / Megamenú ---------- */
.site-header{
  position:sticky; top:0; z-index:200;
  background:rgba(6,6,7,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding-block:14px; gap:24px; }
.logo{ display:flex; align-items:center; gap:10px; font-family:var(--ff-display); font-weight:800; font-size:1.15rem; letter-spacing:-.02em; }
.logo img{ height:34px; width:auto; }
.logo strong{ color:var(--red); }

.main-nav{ display:none; }
@media (min-width: 1500px){
  .main-nav{ display:flex; align-items:center; gap:6px; }
  .main-nav > ul{ display:flex; align-items:center; gap:4px; }
  .main-nav > ul > li{ position:relative; }
  .nav-link{
    display:flex; align-items:center; gap:6px; padding:10px 16px; border-radius:999px;
    font-size:.92rem; font-weight:600; color:var(--gray-1); transition:color .2s, background .2s;
  }
  .nav-link{ position:relative; z-index:1; }
  .nav-link::before{
    content:""; position:absolute; inset:-4px; z-index:-1; border-radius:999px;
    background:linear-gradient(120deg, var(--red), var(--tech)); opacity:0; filter:blur(11px);
    transition:opacity .3s ease;
  }
  .nav-link:hover, .nav-link[aria-expanded="true"]{ color:#fff; background:rgba(255,255,255,.06); }
  .nav-link:hover::before, .nav-link[aria-expanded="true"]::before{ opacity:.6; }
  .nav-link.is-active{ color:#fff; }
  .nav-link.is-active::before{ opacity:.35; }
  .caret{ width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-3px; transition:transform .2s; }
  .nav-link[aria-expanded="true"] .caret{ transform:rotate(-135deg); margin-top:3px; }

  .mega{
    position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(8px);
    width:min(680px, 90vw); background:var(--bg-elevated); border:1px solid var(--line); border-top-width:3px;
    border-radius:var(--radius-md); box-shadow:0 30px 60px rgba(0,0,0,.55);
    padding:18px 22px 22px; opacity:0; visibility:hidden; transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  li.has-mega:hover .mega,
  li.has-mega:focus-within .mega,
  .mega.is-open{
    opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
  }
  .mega-cols{ display:grid; grid-template-columns:1fr 1fr; gap:4px 24px; }
  .mega a{
    position:relative; z-index:1; display:block; padding:10px 12px; border-radius:8px;
    color:var(--gray-1); font-size:.9rem; font-weight:500; transition:background .2s, color .2s;
  }
  .mega a::before{
    content:""; position:absolute; inset:-2px; z-index:-1; border-radius:8px;
    opacity:0; filter:blur(9px); transition:opacity .3s ease;
  }
  .mega a:hover::before{ opacity:.5; }
  .mega--av a::before{ background:var(--red); }
  .mega--esp a::before{ background:var(--tech); }
  .mega-head{
    display:flex; align-items:center; gap:12px; padding-bottom:14px; margin-bottom:12px; border-bottom:1px solid var(--line);
  }
  .mega-icon{
    flex:none; width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  }
  .mega-head-text strong{ display:block; color:#fff; font-size:.95rem; }
  .mega-head-text span{ display:block; color:var(--gray-2); font-size:.78rem; margin-top:2px; }

  /* Diferenciación visual entre Audiovisuales (rojo, creativo) y Especializados (azul, técnico) */
  .mega--av{ border-top-color:var(--red); }
  .mega--av .mega-icon{ background:rgba(226,35,26,.15); color:var(--red); }
  .mega--av a:hover{ background:rgba(226,35,26,.12); color:#fff; }
  .mega--esp{ border-top-color:var(--tech); }
  .mega--esp .mega-icon{ background:rgba(47,143,239,.15); color:var(--tech); }
  .mega--esp a:hover{ background:rgba(47,143,239,.12); color:#fff; }
}

.header-cta{ display:flex; align-items:center; gap:10px; }
.header-cta .btn{ padding:10px 18px; font-size:.88rem; }
.header-cta-app{ display:none; }
@media (min-width:1500px){ .header-cta-app{ display:inline-flex; } }
.phone-link{ display:none; }
@media (min-width:640px){
  .phone-link{ display:inline-flex; align-items:center; gap:8px; color:var(--gray-1); font-weight:600; font-size:.9rem; white-space:nowrap; flex:none; }
}

.nav-toggle{
  display:inline-flex; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; border-radius:10px; border:1px solid var(--line-strong); background:transparent; cursor:pointer;
}
.nav-toggle span{ display:block; height:2px; width:20px; margin-inline:auto; background:#fff; border-radius:2px; }
@media (min-width:1500px){ .nav-toggle{ display:none; } }

/* Menú móvil */
.mobile-nav{
  position:fixed; inset:0; z-index:300; background:var(--bg); transform:translateX(100%);
  transition:transform .3s var(--ease); overflow-y:auto; padding:20px var(--gutter) 60px;
}
.mobile-nav.is-open{ transform:translateX(0); }
.mobile-nav-top{ display:flex; align-items:center; justify-content:space-between; padding-block:10px 20px; }
.mobile-close{ width:42px; height:42px; border-radius:10px; border:1px solid var(--line-strong); background:transparent; color:#fff; font-size:1.4rem; cursor:pointer; }
.mobile-nav ul{ display:flex; flex-direction:column; }
.mobile-nav > .mobile-nav-list > li{ border-bottom:1px solid var(--line); }
.mobile-top-link{ display:flex; align-items:center; justify-content:space-between; padding:16px 4px; font-size:1.15rem; font-weight:700; }
.mobile-sub{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.mobile-sub.is-open{ max-height:900px; }
.mobile-sub a{ display:block; padding:12px 4px 12px 18px; color:var(--gray-1); font-size:.98rem; border-top:1px solid var(--line); }
.mobile-expand{ background:transparent; border:0; color:#fff; width:34px; height:34px; }

/* Diferenciación visual entre Audiovisuales (rojo) y Especializados (azul) en el menú móvil */
.mobile-cat-icon{ display:inline-flex; vertical-align:-5px; margin-right:9px; }
.mobile-cat-sub{ color:var(--gray-2); font-size:.8rem; margin:-8px 0 6px; padding-left:1px; }
.mobile-top-link--av .mobile-cat-icon{ color:var(--red); }
.mobile-top-link--esp .mobile-cat-icon{ color:var(--tech); }
.mobile-sub--av{ border-left:2px solid var(--red-glow); margin-left:1px; }
.mobile-sub--esp{ border-left:2px solid var(--tech-glow); margin-left:1px; }
.mobile-nav .header-cta{ margin-top:28px; flex-direction:column; align-items:stretch; }
.mobile-nav .header-cta .btn{ width:100%; }
@media (min-width:1500px){ .mobile-nav, .nav-toggle{ display:none !important; } }

/* ---------- Hero (home) ---------- */
.hero{
  position:relative; min-height:92vh; display:flex; align-items:flex-end;
  overflow:hidden; background:#000;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media video, .hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.15) 35%, rgba(6,6,7,.85) 88%, #060607 100%);
}
.hero-content{ position:relative; z-index:2; width:100%; padding-bottom:var(--space-xl); }
.hero-eyebrow{ display:inline-flex; align-items:center; gap:8px; color:var(--red); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.78rem; margin-bottom:18px; }
.hero-eyebrow::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--red); box-shadow:0 0 14px var(--red-glow); }
.hero h1{ font-size:clamp(2.4rem, 6vw, 5rem); max-width:16ch; margin-bottom:.3em; }
.hl-gradient{
  background:linear-gradient(100deg, var(--red) 0%, #ff8a3d 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--red);
}
.hero-sub{ font-size:clamp(1rem, 2vw, 1.3rem); color:var(--gray-1); max-width:46ch; margin-bottom:2em; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; }
@media (max-width:640px){
  .btn{ white-space:normal; text-align:center; line-height:1.3; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
}
.hero-scroll{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:2;
  color:var(--gray-2); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.hero-scroll::after{ content:""; width:1px; height:36px; background:linear-gradient(var(--gray-2), transparent); }

/* Fallback de vídeo (sin reproducción posible) */
.hero-fallback-note{
  position:relative; z-index:2; margin-top:18px; display:flex; align-items:center; gap:10px;
  font-size:.85rem; color:var(--gray-2);
}
.yt-fallback-btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid var(--line-strong); font-weight:600; font-size:.85rem;
}
.yt-fallback-btn:hover{ background:rgba(255,255,255,.16); }

/* Hero secundario (páginas interiores) */
.page-hero{
  position:relative; padding-block:calc(var(--space-xl) + 40px) var(--space-lg);
  background:radial-gradient(ellipse at top, #16090a 0%, var(--bg) 55%);
  border-bottom:1px solid var(--line); overflow:hidden;
}
.page-hero::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:.5;
  background:var(--page-hero-img, none) center/cover;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.55), transparent 70%);
}
.page-hero-inner{ position:relative; z-index:1; }
.breadcrumbs{ display:flex; flex-wrap:wrap; gap:6px; font-size:.82rem; color:var(--gray-2); margin-bottom:22px; }
.breadcrumbs a{ color:var(--gray-2); }
.breadcrumbs a:hover{ color:#fff; }
.breadcrumbs .sep{ opacity:.5; }
.page-hero h1{ font-size:clamp(2rem, 4.2vw, 3.4rem); max-width:22ch; }
.page-hero .lede{ font-size:1.1rem; max-width:60ch; color:var(--gray-1); }

/* ---------- Secciones genéricas ---------- */
section{ padding-block:var(--space-lg); }
.section-tight{ padding-block:var(--space-md); }
.section-head{ max-width:64ch; margin-bottom:var(--space-md); }
.section-eyebrow{ color:var(--red); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.78rem; margin-bottom:10px; display:block; }
.section-head h2{ font-size:clamp(1.7rem, 3.4vw, 2.6rem); }
.section-alt{ background:var(--bg-alt); }
.section-head.center{ margin-inline:auto; text-align:center; }

/* Grids de tarjetas */
.grid{ display:grid; gap:22px; }
.grid-2{ grid-template-columns:repeat(2, 1fr); }
.grid-3{ grid-template-columns:repeat(3, 1fr); }
.grid-4{ grid-template-columns:repeat(4, 1fr); }
@media (max-width:980px){ .grid-3, .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; } }

.card{
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-md);
  overflow:hidden; transition:transform .3s var(--ease), border-color .3s;
}
.card:hover{ transform:translateY(-6px); border-color:var(--line-strong); }
.card-media{ position:relative; aspect-ratio:4/3; background:#000; overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.card:hover .card-media img{ transform:scale(1.06); }
.card-body{ padding:20px 22px 24px; }
.card-body h3{ font-size:1.1rem; margin-bottom:8px; }
.card-body p{ font-size:.92rem; margin-bottom:0; }
.card-tag{ display:inline-block; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--red); font-weight:700; margin-bottom:8px; }

/* Servicios: dos bloques diferenciados */
.services-split{ display:grid; gap:24px; grid-template-columns:1fr 1fr; }
@media (max-width:900px){ .services-split{ grid-template-columns:1fr; } }
.split-panel{
  position:relative; border-radius:var(--radius-lg); padding:36px 30px; overflow:hidden;
  border:1px solid var(--line); min-height:340px; display:flex; flex-direction:column; justify-content:flex-end;
}
.split-panel.panel-red{ background:linear-gradient(160deg, #2a0705 0%, #0c0403 70%); }
.split-panel.panel-dark{ background:linear-gradient(160deg, #1a1b1d 0%, #0a0a0b 70%); }
.split-panel::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:.4;
  background:var(--panel-img, none) center/cover; transition:opacity .4s ease, transform .5s ease;
  transform:scale(1.02);
}
.split-panel:hover::before{ opacity:.55; transform:scale(1.06); }
.split-panel.panel-red::before{ mask-image:linear-gradient(200deg, rgba(0,0,0,.9) 10%, transparent 75%); }
.split-panel.panel-dark::before{ mask-image:linear-gradient(200deg, rgba(0,0,0,.9) 10%, transparent 75%); }
.split-panel > *{ position:relative; z-index:1; }
.split-panel h3{ font-size:1.7rem; margin-bottom:10px; }
.split-panel ul{ display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; margin:16px 0 22px; }
.split-panel li{ font-size:.86rem; color:var(--gray-1); padding-left:16px; position:relative; }
.split-panel li::before{ content:"—"; position:absolute; left:0; color:var(--red); }

/* Visor panorámico interactivo 360º real (WebGL, home) */
.pano-viewer{
  /* Visor esférico real: el <canvas> WebGL proyecta la foto equirectangular
     como si estuvieras dentro de una esfera, así que el contenedor ya no
     necesita una proporción concreta para "dejar margen de arrastre" (eso
     era cosa del visor plano antiguo). Se mantiene una relación de aspecto
     panorámica simplemente por estética. */
  position:relative; width:100%; aspect-ratio:2/1; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line); cursor:grab; touch-action:none; background:#000;
  -webkit-user-select:none; user-select:none; outline-offset:4px;
}
@media (max-width:640px){ .pano-viewer{ aspect-ratio:1/1; } }
.pano-viewer.dragging{ cursor:grabbing; }
.pano-viewer picture img{
  position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;
  user-select:none; -webkit-user-drag:none; pointer-events:none;
}
/* Solo la foto plana de respaldo (envuelta en <picture>) debe ocultarse
   cuando el visor WebGL 360º toma el relevo; la insignia animada del DJI
   Avata 360 es un <img> suelto (no va dentro de <picture>) y debe seguir
   siendo su propia regla la que controle su opacidad, no esta. */
.pano-viewer.pano-webgl-on picture img{ opacity:0; }
.pano360-canvas{
  position:absolute; top:0; left:0; width:100%; height:100%; display:block;
  opacity:0; transition:opacity .5s ease; pointer-events:none;
}
.pano-viewer.pano-webgl-on .pano360-canvas{ opacity:1; }
.pano-hint{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:2;
  background:rgba(0,0,0,.6); color:#fff; font-size:.8rem; font-weight:600;
  padding:9px 18px; border-radius:999px; display:inline-flex; align-items:center; gap:8px;
  pointer-events:none; transition:opacity .4s ease; white-space:nowrap; max-width:calc(100% - 100px);
}
.pano-hint svg{ animation:pano-swipe 1.6s ease-in-out infinite; }
@keyframes pano-swipe{ 0%,100%{ transform:translateX(-4px); } 50%{ transform:translateX(4px); } }
.pano-hint.hidden{ opacity:0; }
.pano-controls{
  /* A la izquierda a propósito: la esquina inferior derecha ya la ocupa
     la insignia del Avata 360 (y en móvil, además, el botón de WhatsApp). */
  position:absolute; left:14px; bottom:14px; z-index:3;
  display:flex; flex-direction:column; gap:6px;
}
.pano-btn{
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.55); color:#fff; font-size:1.05rem; font-weight:700; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.pano-btn:hover{ background:rgba(0,0,0,.8); transform:scale(1.06); }
.pano-btn:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* Spotlight de producto individual (p.ej. DJI Matrice 4TD en home) */
.split-panel.spotlight{ min-height:440px; padding:48px; }
.split-panel.spotlight h2{ font-size:clamp(1.9rem, 3.4vw, 2.6rem); max-width:20ch; margin-bottom:12px; }
.split-panel.spotlight p{ max-width:60ch; }
.split-panel.spotlight ul{ grid-template-columns:1fr 1fr; max-width:70ch; }
@media (max-width:640px){ .split-panel.spotlight ul{ grid-template-columns:1fr; } }

/* Vídeo de fondo: timelapse y seguimiento de obras (home) */
.video-panel{
  position:relative; min-height:560px; display:flex; align-items:center;
  overflow:hidden; background:#000; border-radius:var(--radius-lg);
}
@media (max-width:900px){ .video-panel{ min-height:0; padding-block:var(--space-lg); } }
.video-panel-media{ position:absolute; inset:0; z-index:0; }
.video-panel-media video, .video-panel-media img{ width:100%; height:100%; object-fit:cover; }
.video-panel-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(6,6,7,.92) 0%, rgba(6,6,7,.78) 40%, rgba(6,6,7,.4) 68%, rgba(6,6,7,.18) 100%);
}
@media (max-width:900px){ .video-panel-media::after{ background:linear-gradient(180deg, rgba(6,6,7,.55) 0%, rgba(6,6,7,.9) 60%, #060607 100%); } }
.video-panel-inner{
  position:relative; z-index:2; display:grid; grid-template-columns:1.15fr .85fr; gap:44px;
  align-items:center; padding:56px 48px; width:100%; min-width:0; box-sizing:border-box;
}
@media (max-width:900px){ .video-panel-inner{ grid-template-columns:1fr; padding:0 24px; } }
.video-panel-text{ min-width:0; }
.video-panel-text p{ color:var(--gray-1); max-width:54ch; margin-bottom:1.6em; }
.video-panel-photo{
  /* <figure> trae un margen por defecto del navegador (1em 40px) que nunca se
     había anulado aquí: en móvil, con la columna ya estrecha, ese margen
     lateral de 40px a cada lado dejaba la foto mucho más pequeña de lo que
     parece por el CSS del grid. */
  margin:0; position:relative; border-radius:var(--radius-md); overflow:hidden;
  border:1px solid var(--line-strong); box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.video-panel-photo picture{ display:block; height:100%; }
.video-panel-photo img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:4/3.3; }
.video-panel-photo figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:16px 18px; font-size:.82rem; color:#fff;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.88));
}

/* Vídeo propio autoalojado (vertical) dentro de una página de servicio,
   para clips reales cortos grabados en campo. */
.local-video-card{
  max-width:320px; margin:0 auto 6px; border-radius:20px; overflow:hidden;
  border:1px solid var(--line-strong); background:#000; box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.local-video-card video{ display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; background:#000; }

/* Línea de tiempo animada del procedimiento de trabajo (refuerzo visual del
   listado ya existente; un punto rojo recorre la línea entre los pasos en
   bucle). Puramente decorativa (aria-hidden), el listado con el detalle de
   cada paso sigue siendo el contenido accesible principal. */
.process-timeline{ margin:18px 0 26px; }
.pt-line{ position:relative; height:4px; background:var(--line-strong); border-radius:999px; margin:0 8px 30px; }
.pt-dot{
  position:absolute; top:50%; left:0; width:14px; height:14px; margin-top:-7px; margin-left:-7px;
  border-radius:50%; background:var(--red); box-shadow:0 0 0 5px var(--red-glow);
  animation:pt-travel 6s ease-in-out infinite;
}
@keyframes pt-travel{
  0%{ left:0%; } 45%{ left:100%; } 55%{ left:100%; } 100%{ left:0%; }
}
.pt-steps{ display:flex; justify-content:space-between; gap:10px; }
.pt-step{ flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; min-width:0; }
.pt-num{
  display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%;
  background:var(--bg-alt); border:1px solid var(--line-strong); font-weight:700; font-size:.85rem; margin-bottom:8px;
}
.pt-label{ font-size:.78rem; color:var(--gray-2); line-height:1.3; }
@media (max-width:640px){ .pt-label{ display:none; } }
@media (prefers-reduced-motion: reduce){ .pt-dot{ animation:none; left:100%; } }

/* Diagrama animado (SVG + CSS, sin peso de imagen) del patrón de vuelo en
   pasadas paralelas con solape sobre el cultivo. Ilustrativo, no aporta
   cifras ni datos: solo visualiza el procedimiento ya descrito en el texto. */
.flight-diagram{
  margin:18px 0 26px; padding:20px; border-radius:var(--radius-lg); background:#070a08; border:1px solid var(--line);
}
.flight-diagram svg{ width:100%; height:auto; display:block; }
.fd-bg{ fill:#0b1f13; }
.fd-rows rect{ fill:#123018; }
.fd-rows rect:nth-child(2n){ fill:#0e2814; }
.fd-path{ stroke:rgba(255,255,255,.16); stroke-width:2; stroke-dasharray:6 8; }
.fd-coverage{
  stroke:var(--red); stroke-width:16; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:100; stroke-dashoffset:100; opacity:0;
  animation:fd-reveal 7s linear infinite;
}
@keyframes fd-reveal{
  0%{ stroke-dashoffset:100; opacity:0; }
  8%{ opacity:.5; }
  92%{ stroke-dashoffset:0; opacity:.5; }
  100%{ stroke-dashoffset:0; opacity:0; }
}
.fd-drone{
  offset-path:path('M50,66 H750 V148 H50 V230 H750 V312 H50');
  offset-rotate:0deg; animation:fd-fly 7s linear infinite;
}
.fd-drone circle{ fill:#fff; }
.fd-drone rect{ fill:var(--red); }
@keyframes fd-fly{ from{ offset-distance:0%; } to{ offset-distance:100%; } }
.fd-caption{ margin:14px 2px 0; font-size:.82rem; color:var(--gray-2); }
@media (prefers-reduced-motion: reduce){
  .fd-coverage{ animation:none; stroke-dashoffset:0; opacity:.5; }
  .fd-drone{ animation:none; offset-distance:100%; }
}

/* Portfolio con lazy-load de YouTube */
.yt-card{ position:relative; }
.yt-card .play-btn{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.28); border:0; cursor:pointer; width:100%; height:100%;
}
.yt-card .play-btn .circle{
  width:64px; height:64px; border-radius:50%; background:var(--red); display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px var(--red-glow); transition:transform .25s var(--ease);
}
.yt-card:hover .play-btn .circle{ transform:scale(1.1); }
.yt-card .circle svg{ width:22px; height:22px; fill:#fff; margin-left:3px; }
.yt-card iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Flota */
.fleet-filter{ display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 8px; }
.fleet-filter-btn{
  display:inline-flex; align-items:center; padding:9px 18px; border-radius:999px; font-size:.85rem;
  font-weight:600; background:transparent; border:1px solid var(--line-strong); color:var(--gray-1);
  cursor:pointer; transition:all .2s var(--ease); font-family:inherit;
}
.fleet-filter-btn:hover{ border-color:#fff; color:#fff; }
.fleet-filter-btn.is-active{ background:var(--red); border-color:var(--red); color:#fff; }
.fleet-filter-btn:focus-visible{ outline:3px solid var(--red); outline-offset:2px; }
.fleet-group{ margin-top:8px; }
.fleet-group + .fleet-group{ margin-top:36px; }
.fleet-group[hidden]{ display:none; }
.fleet-subhead{
  font-size:1.05rem; font-weight:700; color:var(--gray-1); text-transform:uppercase;
  letter-spacing:.05em; margin:0 0 16px;
}
.fleet-card .card-media{ aspect-ratio:1/1; background:radial-gradient(circle at 40% 30%, #1c1d20, #060607 70%); display:flex; align-items:center; justify-content:center; }
.fleet-card .card-media img{ object-fit:contain; padding:24px; }
.fleet-card-class{ display:block; font-size:.78rem; color:var(--gray-2); margin-top:2px; }
.fleet-card-resumen{ font-size:.85rem; color:var(--gray-2); margin-top:6px; line-height:1.4; }
.badge-new{
  position:absolute; top:12px; left:12px; z-index:2; background:var(--red); color:#fff;
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:5px 11px; border-radius:999px; box-shadow:0 6px 18px var(--red-glow);
}
.fleet-specs{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 14px; }
.fleet-specs span{ font-size:.72rem; padding:5px 10px; border-radius:999px; background:rgba(255,255,255,.06); color:var(--gray-1); }

/* Bloques de servicio (páginas de Audiovisuales/Especializados) */
.service-layout{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:var(--space-lg); align-items:start; }
@media (max-width:980px){ .service-layout{ grid-template-columns:minmax(0,1fr); } }
.service-body h2{ font-size:1.5rem; margin-top:2.2em; }
.service-body h2:first-child{ margin-top:0; }
.service-body ul{ margin:0 0 1.4em; }
.service-body li{ position:relative; padding-left:22px; margin-bottom:.6em; color:var(--gray-1); }
.service-body li::before{ content:""; position:absolute; left:0; top:.5em; width:8px; height:8px; border-radius:50%; background:var(--red); }
.aside-card{
  position:sticky; top:110px; background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:26px; display:flex; flex-direction:column; gap:14px;
}
.aside-card h3{ font-size:1.05rem; }
.aside-list a{ display:block; padding:9px 0; border-bottom:1px solid var(--line); font-size:.9rem; color:var(--gray-1); }
.aside-list a:hover{ color:#fff; }
.aside-list a:last-child{ border-bottom:0; }

/* FAQ */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; text-align:left; background:transparent; border:0; color:#fff; padding:20px 4px;
  display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:1rem; cursor:pointer;
}
.faq-q .plus{ width:18px; height:18px; position:relative; flex:none; }
.faq-q .plus::before, .faq-q .plus::after{ content:""; position:absolute; background:var(--red); }
.faq-q .plus::before{ inset:8px 0; height:2px; }
.faq-q .plus::after{ inset:0 8px; width:2px; }
.faq-q[aria-expanded="true"] .plus::after{ opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s var(--ease); }
.faq-a-inner{ padding:0 4px 20px; color:var(--gray-1); font-size:.94rem; }
.faq-a.is-open{ max-height:600px; }

/* Blog */
.article-header{ max-width:78ch; margin-inline:auto; text-align:center; padding-block:var(--space-lg) var(--space-md); }
.article-meta{ display:flex; justify-content:center; gap:14px; color:var(--gray-2); font-size:.85rem; margin-bottom:16px; }
.article-cover{ border-radius:var(--radius-lg); overflow:hidden; margin-bottom:var(--space-lg); aspect-ratio:16/8; }
.article-cover img{ width:100%; height:100%; object-fit:cover; }
.article-body{ max-width:72ch; margin-inline:auto; }
.article-body h2{ font-size:1.5rem; margin-top:1.8em; }
.article-body p{ font-size:1.02rem; }
.article-related{ max-width:72ch; margin:var(--space-lg) auto 0; padding-top:var(--space-md); border-top:1px solid var(--line); }

/* Bloque foto + texto (equipo, unidad móvil...) */
.media-split{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
@media (max-width:900px){ .media-split{ grid-template-columns:1fr; } }
.media-split-gallery{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.media-card{
  border-radius:var(--radius-md); border:1px solid var(--line); overflow:hidden;
  aspect-ratio:3/4; background:#0d0e10; display:flex; align-items:center; justify-content:center;
}
.media-card img{ width:100%; height:100%; }
.media-card.cover img{ object-fit:cover; }
.media-card.contain img{ object-fit:contain; padding:16px; }
.media-split-gallery.wide .media-card{ aspect-ratio:16/11; }

/* Unidad móvil: showcase grande a todo el ancho del contenedor */
.um-showcase{ display:grid; grid-template-columns:2.2fr 1fr; gap:18px; margin-top:8px; }
.um-main{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:8/5; background:#0d0e10; }
.um-main img{ width:100%; height:100%; object-fit:contain; padding:26px; }
.um-side{ border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/5; background:#0d0e10; border:1px solid var(--line); }
.um-side img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:760px){
  .um-showcase{ grid-template-columns:1fr; }
  .um-main{ aspect-ratio:16/10; }
  /* La furgoneta con el efecto del dron (foto animada) es la protagonista de
     esta sección: en móvil se le quita casi todo el margen interior para que
     se vea notablemente más grande que antes. */
  .um-main img{ padding:6px; }
  .um-side{ aspect-ratio:16/10; }
}

/* Fleet / Trust logos strip */
.trust-strip{ display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:center; }
.trust-strip span{ font-family:var(--ff-display); font-weight:800; font-size:1rem; letter-spacing:.05em; color:var(--gray-1); }

/* Bloque de permisos/seguridad */
.trust-grid{ display:grid; gap:20px; grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .trust-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .trust-grid{ grid-template-columns:1fr; } }
.trust-item{ border:1px solid var(--line); border-radius:var(--radius-md); padding:24px; }
.trust-item .num{ color:var(--red); font-family:var(--ff-display); font-weight:800; font-size:1.6rem; display:block; margin-bottom:8px; }

/* Reseñas de clientes (Google) */
.reviews-score{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; font-size:1rem; }
.reviews-score-num{ font-family:var(--ff-display); font-weight:800; font-size:1.3rem; color:#fff; }
.reviews-score svg{ display:inline-block; vertical-align:middle; }
.reviews-score-count{ color:var(--gray-2); }
.review-card{ border:1px solid var(--line); border-radius:var(--radius-md); padding:24px; background:var(--bg-elevated); display:flex; flex-direction:column; }
.review-stars{ display:flex; gap:2px; margin-bottom:14px; }
.review-text{ font-size:.92rem; color:var(--gray-1); flex-grow:1; }
.review-author{ display:flex; flex-direction:column; margin-top:10px; }
.review-name{ font-weight:700; font-size:.92rem; }
.review-meta{ font-size:.78rem; color:var(--gray-2); }

/* Formulario de contacto */
.form-grid{ display:grid; gap:16px; grid-template-columns:1fr 1fr; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:.85rem; font-weight:600; color:var(--gray-1); }
.field input, .field textarea{
  background:var(--bg-elevated); border:1px solid var(--line-strong); border-radius:10px; color:#fff;
  padding:13px 14px; font-size:.95rem; font-family:inherit;
}
.field input:focus, .field textarea:focus{ border-color:var(--red); }
.field-check{
  /* .field (regla previa) define flex-direction:column; sin esta línea
     explícita el checkbox y su texto quedarían apilados en vertical en vez
     de ir en fila, uno al lado del otro y a la misma altura. */
  display:flex; flex-direction:row; align-items:center; gap:14px; font-size:.88rem; color:var(--gray-1);
  background:var(--bg-elevated); border:1px solid var(--line-strong); border-radius:10px;
  padding:14px 16px; margin-top:2px;
}
.field-check input{
  flex:none; width:24px; height:24px; margin:0; accent-color:var(--red); cursor:pointer;
}
.field-check label{ cursor:pointer; line-height:1.4; }
.field-check label a{ color:var(--red); text-decoration:underline; }
.contact-form > button[type="submit"]{ margin-top:22px; }
.form-note{ font-size:.78rem; color:var(--gray-2); margin-top:10px; }
#contacto-form{ scroll-margin-top:110px; }
.form-alert{
  background:rgba(226,35,26,.12); border:1px solid var(--red); color:#fff;
  border-radius:10px; padding:14px 16px; font-size:.9rem; margin-bottom:18px;
}
.form-alert[hidden]{ display:none; }
.form-success{
  background:rgba(46,196,110,.12); border:1px solid #2ec46e; color:#fff;
  border-radius:10px; padding:14px 16px; font-size:.9rem; margin-bottom:18px;
}
.field select{
  background:var(--bg-elevated); border:1px solid var(--line-strong); border-radius:10px; color:#fff;
  padding:13px 14px; font-size:.95rem; font-family:inherit;
}

/* ---------- Configurador de proyecto (asistente de 5 pasos) ---------- */
.wizard-section{ padding-block:var(--space-lg); }
.wizard-progress{
  display:flex; justify-content:space-between; gap:4px; margin-bottom:var(--space-md);
  counter-reset:none;
}
.wizard-progress li{
  display:flex; flex-direction:column; align-items:center; gap:8px; flex:1; position:relative; text-align:center;
}
.wizard-progress li::before{
  content:""; position:absolute; top:15px; left:-50%; width:100%; height:2px; background:var(--line); z-index:0;
}
.wizard-progress li:first-child::before{ display:none; }
.wizard-progress-dot{
  width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--bg-elevated); border:1px solid var(--line-strong); font-weight:700; font-size:.85rem;
  color:var(--gray-2); position:relative; z-index:1; transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.wizard-progress-label{ font-size:.72rem; color:var(--gray-2); text-transform:uppercase; letter-spacing:.04em; }
.wizard-progress li.is-active .wizard-progress-dot{ background:var(--red); border-color:var(--red); color:#fff; }
.wizard-progress li.is-active .wizard-progress-label{ color:#fff; }
.wizard-progress li.is-done .wizard-progress-dot{ background:transparent; border-color:var(--red); color:var(--red); }
.wizard-progress li.is-done::before{ background:var(--red); }
@media (max-width:640px){ .wizard-progress-label{ display:none; } }

.wizard-step-sub{ max-width:60ch; margin-bottom:26px; }
.wizard-step[hidden]{ display:none; }

.sector-cards{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; }
@media (max-width:640px){ .sector-cards{ grid-template-columns:minmax(0,1fr); } }
.sector-card{
  display:flex; flex-direction:column; gap:10px; padding:28px 24px; border-radius:var(--radius-md);
  border:1px solid var(--line-strong); background:var(--bg-elevated); cursor:pointer;
  transition:border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
.sector-card:hover{ transform:translateY(-2px); }
.sector-card-icon{ color:var(--gray-1); }
.sector-card-title{ font-weight:700; font-size:1.15rem; color:#fff; }
.sector-card-desc{ font-size:.88rem; color:var(--gray-1); }
input#sector-av:checked + .sector-card--av, input#sector-tec:checked + .sector-card--tec{
  border-color:currentColor; background:rgba(255,255,255,.05);
}
input#sector-av:checked + .sector-card--av{ color:var(--red); }
input#sector-av:checked + .sector-card--av .sector-card-title{ color:#fff; }
input#sector-tec:checked + .sector-card--tec{ color:var(--tech); }
input#sector-tec:checked + .sector-card--tec .sector-card-title{ color:#fff; }

.wizard-branch{ margin-bottom:8px; }
.wizard-branch[hidden]{ display:none; }
.check-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
@media (max-width:640px){ .check-grid{ grid-template-columns:minmax(0,1fr); } }
.check-item{
  display:flex; align-items:center; gap:10px; padding:13px 14px; border-radius:10px;
  border:1px solid var(--line); background:var(--bg-elevated); font-size:.92rem;
}
.check-item label{ flex:1; cursor:pointer; }
.check-item:has(input:checked){ border-color:var(--red); background:rgba(226,35,26,.08); }
.wizard-branch[data-branch="tecnicos"] input[type="checkbox"]{ accent-color:var(--tech); }
.wizard-branch[data-branch="tecnicos"] .check-item:has(input:checked){ border-color:var(--tech); background:rgba(47,143,239,.08); }
.check-info{
  flex:none; width:20px; height:20px; border-radius:50%; border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; font-size:.72rem; font-style:italic;
  color:var(--gray-2); font-weight:700;
}
.check-info:hover{ border-color:#fff; color:#fff; }

.chip-field{ margin-bottom:22px; }
.chip-field-label{ display:block; font-size:.85rem; font-weight:600; color:var(--gray-1); margin-bottom:10px; }
.chip-row{ display:flex; flex-wrap:wrap; gap:10px; }
.chip-input{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.chip{
  display:inline-flex; align-items:center; padding:9px 16px; border-radius:999px; font-size:.85rem;
  border:1px solid var(--line-strong); color:var(--gray-1); cursor:pointer; transition:all .2s var(--ease);
}
.chip-input:checked + .chip{ background:var(--red); border-color:var(--red); color:#fff; font-weight:600; }
.chip-input:focus-visible + .chip{ outline:3px solid var(--red); outline-offset:2px; }

.map-widget-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:28px; align-items:start; }
@media (max-width:800px){ .map-widget-row{ grid-template-columns:minmax(0,1fr); } }
.map-widget{ position:relative; }
.map-leaflet{
  width:100%; height:420px; border-radius:var(--radius-md); border:1px solid var(--line-strong);
  background:var(--bg-elevated);
}
@media (max-width:640px){ .map-leaflet{ height:320px; } }
/* El propio leaflet.css define el resto de estilos del mapa (controles de zoom,
   atribución, marcador...); aquí solo ajustamos el contenedor al resto del sitio. */
.map-hint{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:400;
  background:rgba(0,0,0,.7); color:#fff; font-size:.76rem; font-weight:600;
  padding:8px 16px; border-radius:999px; pointer-events:none; white-space:nowrap; max-width:90%;
  overflow:hidden; text-overflow:ellipsis;
}
.map-side{ display:flex; flex-direction:column; }
/* Campos de latitud/longitud: en fila cuando hay hueco, apilados si no —
   así nunca se quedan demasiado estrechos para mostrar el valor (bug corregido). */
.latlng-fields{ display:flex; flex-wrap:wrap; gap:16px; }
.latlng-fields .field{ flex:1 1 130px; min-width:120px; }

.review-box{
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:20px 22px; font-size:.88rem; color:var(--gray-1); white-space:pre-line; line-height:1.7;
}

.wizard-summary-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--red); margin-right:6px; }
.wizard-summary-list{ margin:14px 0 0; }
.wizard-summary-list > div{ display:flex; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:.86rem; }
.wizard-summary-list > div:last-child{ border-bottom:0; }
.wizard-summary-list dt{ color:var(--gray-2); }
.wizard-summary-list dd{ margin:0; color:#fff; font-weight:600; text-align:right; }

.wizard-nav{ display:flex; justify-content:space-between; gap:14px; margin-top:var(--space-md); }
@media (max-width:640px){ .wizard-nav{ flex-direction:column-reverse; } .wizard-nav .btn{ width:100%; } }

/* Footer */
.site-footer{ border-top:1px solid var(--line); background:var(--bg-alt); padding-block:var(--space-lg) var(--space-md); }
.footer-grid{ display:grid; gap:var(--space-md); grid-template-columns:1.4fr 1fr 1fr 1fr; margin-bottom:var(--space-md); }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand p{ font-size:.9rem; max-width:36ch; }
.footer-col h3{ font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gray-2); margin-bottom:14px; }
.footer-col a, .footer-col span{ display:block; font-size:.9rem; color:var(--gray-1); padding-block:6px; }
.footer-col a:hover{ color:#fff; }
.footer-social{ display:flex; gap:12px; margin-top:14px; }
.footer-social a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; }
.footer-bottom{ display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; padding-top:var(--space-md); border-top:1px solid var(--line); font-size:.8rem; color:var(--gray-2); }
.footer-bottom nav{ display:flex; flex-wrap:wrap; gap:4px 18px; }
.footer-bottom a{ color:var(--gray-2); }
.footer-bottom a:hover{ color:#fff; }

/* Cookie banner */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:400; max-width:560px; margin-inline:auto;
  background:var(--bg-elevated); border:1px solid var(--line-strong); border-radius:var(--radius-md);
  padding:20px 22px; display:none; gap:14px; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.cookie-banner.is-visible{ display:flex; }
.cookie-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cookie-banner p{ font-size:.85rem; margin-bottom:0; }

/* 404 */
.error-page{ position:relative; overflow:hidden; min-height:70vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-block:var(--space-xl); }
.error-page::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:.28;
  background:var(--page-hero-img, none) center/cover;
  mask-image:radial-gradient(ellipse at center, rgba(0,0,0,.6), transparent 72%);
}
.error-page .container{ position:relative; z-index:1; }
.error-page .code{ font-family:var(--ff-display); font-size:clamp(4rem,14vw,9rem); font-weight:800; color:var(--red); line-height:1; }

/* Utilidades */
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.text-center{ text-align:center; }
.stack{ display:flex; flex-direction:column; gap:var(--space-sm); }
.row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.divider{ height:1px; background:var(--line); border:0; margin-block:var(--space-md); }

/* ---------- Animaciones de scroll (revelado progresivo) ---------- */
.reveal{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.16,.8,.24,1), transform .7s cubic-bezier(.16,.8,.24,1);
  transition-delay:var(--reveal-delay, 0s);
}
.reveal.is-revealed{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* Micro-interacciones al pasar el ratón */
.card, .split-panel, .btn, .media-card{ transition:transform .35s ease, box-shadow .35s ease, opacity .35s ease; }
.card:hover{ box-shadow:0 22px 46px rgba(0,0,0,.4); }
.split-panel:hover{ transform:translateY(-4px); }
.btn:hover{ transform:translateY(-2px); }
@media (hover:none){
  .split-panel:hover, .btn:hover{ transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .split-panel:hover, .btn:hover{ transform:none; }
}

/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp-float{
  position:fixed; right:20px; bottom:20px; z-index:500;
  display:inline-flex; align-items:center;
  background:#25d366; color:#fff; border-radius:999px;
  padding:14px; box-shadow:0 10px 28px rgba(0,0,0,.4);
  transition:padding .3s var(--ease), box-shadow .25s ease, transform .25s ease;
}
.whatsapp-float:hover{ box-shadow:0 14px 36px rgba(0,0,0,.5); transform:translateY(-3px) scale(1.03); padding-right:20px; }
.whatsapp-float svg{ flex-shrink:0; }
.whatsapp-float-label{
  max-width:0; overflow:hidden; white-space:nowrap; font-weight:700; font-size:.92rem;
  transition:max-width .35s var(--ease), margin-left .35s var(--ease);
}
.whatsapp-float:hover .whatsapp-float-label{ max-width:140px; margin-left:10px; }
@media (max-width:640px){
  .whatsapp-float{ right:14px; bottom:14px; padding:13px; }
  .whatsapp-float:hover{ padding-right:13px; transform:none; }
  .whatsapp-float-label{ display:none; }
  body.cookie-banner-visible .whatsapp-float{ bottom:calc(var(--cookie-banner-h, 190px) + 30px); }
}
@media (prefers-reduced-motion: reduce){
  .whatsapp-float:hover{ transform:none; }
}

/* ---------- Panel diferenciador "operador certificado" (home) ---------- */
.split-panel.differentiator{ padding:44px 40px; }
.split-panel.differentiator h2{ max-width:26ch; margin-bottom:10px; }
.split-panel.differentiator > p{ max-width:70ch; }
.split-panel.differentiator .trust-grid{ grid-template-columns:repeat(3,1fr); margin-top:22px; }
@media (max-width:900px){ .split-panel.differentiator .trust-grid{ grid-template-columns:1fr; } }
.split-panel.differentiator .trust-item{ border-color:var(--line-strong); background:rgba(255,255,255,.03); }

/* ---------- Animación de "vuelo" del DJI Matrice 4TD (home) ---------- */
.spotlight-drone-wrap{
  position:absolute; right:4%; top:50%; width:38%; max-width:420px;
  transform:translateY(-50%); z-index:2; pointer-events:none;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));
}
.spotlight-drone-img{ width:100%; height:auto; animation:drone-hover 4.5s ease-in-out infinite; }
@keyframes drone-hover{
  0%, 100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-16px) rotate(-1.2deg); }
}
@media (max-width:900px){
  /* En escritorio flota superpuesta sobre el panel; en móvil no cabe
     superpuesta sin taparse con el texto, así que pasa a formar parte
     del flujo normal (arriba del todo, a modo de foto de cabecera). */
  .spotlight-drone-wrap{
    display:block; position:static; order:-1; width:64%; max-width:260px;
    margin:0 auto 20px; transform:none;
  }
}
@media (prefers-reduced-motion: reduce){ .spotlight-drone-img{ animation:none; } }

/* ---------- Insignia animada DJI Avata 360 sobre el visor panorámico (home) ---------- */
.avata-badge{ position:absolute; z-index:3; right:5%; bottom:9%; width:120px; height:120px; pointer-events:none; }
@media (max-width:640px){ .avata-badge{ width:84px; height:84px; right:4%; bottom:7%; } }
.avata-badge img{
  position:absolute; inset:14%; width:72%; height:72%; object-fit:contain;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.6));
  animation:avata-bob 3.6s ease-in-out infinite;
}
.avata-badge-ring{
  position:absolute; inset:0; border-radius:50%;
  border:2px dashed rgba(255,255,255,.55);
  animation:avata-spin 9s linear infinite;
}
.avata-badge-pill{
  position:absolute; left:50%; bottom:-10px; transform:translateX(-50%);
  background:var(--red); color:#fff; font-weight:800; font-size:.72rem;
  letter-spacing:.03em; padding:3px 10px; border-radius:999px;
  box-shadow:0 6px 16px rgba(0,0,0,.5); white-space:nowrap;
}
@media (max-width:640px){ .avata-badge-pill{ font-size:.64rem; padding:2px 8px; bottom:-8px; } }
@keyframes avata-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes avata-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-6px); } }
@media (prefers-reduced-motion: reduce){ .avata-badge img, .avata-badge-ring{ animation:none; } }

/* ---------- Cablecam: sección propia con la góndola deslizando por el cable (home) ---------- */
.cablecam-stage{
  position:relative; height:320px; border-radius:var(--radius-lg); overflow:hidden;
  background:radial-gradient(circle at 50% 25%, #1c1d20, #060607 75%);
}
.cablecam-cable{
  position:absolute; left:0; right:0; top:28%; height:3px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.4) 8%, rgba(255,255,255,.6) 50%, rgba(255,255,255,.4) 92%, transparent);
  box-shadow:0 1px 4px rgba(0,0,0,.6);
}
.cablecam-rig{
  position:absolute; top:6%; left:50%; width:min(640px, 68%); height:auto;
  filter:drop-shadow(0 24px 30px rgba(0,0,0,.55));
  animation:cablecam-glide 9s ease-in-out infinite;
}
@keyframes cablecam-glide{
  0%, 100%{ transform:translateX(-82%); }
  50%{ transform:translateX(-18%); }
}
@media (max-width:640px){
  .cablecam-stage{ height:220px; }
  .cablecam-rig{ width:80%; }
  @keyframes cablecam-glide{
    0%, 100%{ transform:translateX(-70%); }
    50%{ transform:translateX(-30%); }
  }
}
@media (prefers-reduced-motion: reduce){ .cablecam-rig{ animation:none; left:50%; transform:translateX(-50%); } }

/* ---------- Crossfade automático de fotos: seguimiento de obras (home) ---------- */
.video-panel-photo.obra-crossfade{ aspect-ratio:4/3.3; }
.obra-slide{ position:absolute; inset:0; opacity:0; animation:obra-crossfade 18s ease-in-out infinite; }
.obra-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.obra-slide:nth-child(1){ animation-delay:0s; }
.obra-slide:nth-child(2){ animation-delay:-4.5s; }
.obra-slide:nth-child(3){ animation-delay:-9s; }
.obra-slide:nth-child(4){ animation-delay:-13.5s; }
@keyframes obra-crossfade{
  0%{ opacity:0; } 3%{ opacity:1; } 22%{ opacity:1; } 28%{ opacity:0; } 100%{ opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .obra-slide{ animation:none; opacity:0; }
  .obra-slide:first-child{ opacity:1; }
}

/* ---------- Galería de trabajos (fotos subidas por FTP) ---------- */
.album-status{ color:var(--gray-2); padding:40px 0; text-align:center; }
.album-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:16px;
}
.album-item{
  position:relative; aspect-ratio:1/1; border-radius:var(--radius-md); overflow:hidden;
  border:1px solid var(--line); background:var(--bg-alt); padding:0; cursor:zoom-in;
}
.album-item img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.album-item:hover img{ transform:scale(1.08); }
.album-item::after{
  content:""; position:absolute; inset:0; opacity:0;
  background:linear-gradient(160deg, rgba(226,35,26,.25), rgba(47,143,239,.25));
  transition:opacity .3s ease; pointer-events:none;
}
.album-item:hover::after{ opacity:1; }
@media (hover:none){ .album-item:hover img{ transform:none; } .album-item:hover::after{ opacity:0; } }

.lightbox{
  position:fixed; inset:0; z-index:600; background:rgba(4,4,5,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox-img{ max-width:min(92vw, 1400px); max-height:88vh; width:auto; height:auto; border-radius:var(--radius-sm); box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lightbox-close, .lightbox-nav{
  position:absolute; background:rgba(255,255,255,.08); border:1px solid var(--line-strong); color:#fff;
  border-radius:999px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .2s ease;
}
.lightbox-close:hover, .lightbox-nav:hover{ background:rgba(255,255,255,.18); }
.lightbox-close{ top:20px; right:20px; width:44px; height:44px; font-size:1.6rem; line-height:1; }
.lightbox-nav{ top:50%; transform:translateY(-50%); width:52px; height:52px; font-size:1.1rem; }
.lightbox-prev{ left:16px; }
.lightbox-next{ right:16px; }
@media (max-width:640px){
  .lightbox-nav{ width:42px; height:42px; }
  .lightbox-prev{ left:8px; }
  .lightbox-next{ right:8px; }
  .lightbox-close{ top:12px; right:12px; }
}