/* ═══════════════════════════════════════
   VARIABLES GLOBALES PARA HERRAMIENTAS (tools.css)
   Aplica a drones.php y comparador.php
═══════════════════════════════════════ */
:root {
  /* Drones */
  --fondo: #0b0c14; --fondo-secundario: #0f1019; --backgrounddiv: #13151f; --backgrounddiv-alt: #191b28; --backgrounddiv-hover: #1e2133;
  --border: rgba(255,255,255,0.07); --border-activo: rgba(88,101,242,0.5); --border-hover: rgba(88,101,242,0.28);
  --acento: #5865f2; --acento-claro: #7289da; 
  --nitro-rosa: #ff73fa; --nitro-naranja: #f9a62b;
  --degradado-nitro: linear-gradient(135deg, #5865f2 0%, #ff73fa 50%, #f9a62b 100%);
  --texto: #e3e5e8; --texto-suave: #96989d; --texto-apagado: #6b6d76;
  --verde: #23a55a; --verde-claro: #2dc771; --naranja: #f0b232; --rojo: #f23f42; --amarillo: #fee75c;
  --radio: 16px; --max-ancho: 1250px; --transicion: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Comparador */
  --bg-comp: #0b0c14; --card: #13151f; --card-alt: #191b28; 
  --accent: #5865f2; --nitro: #ff73fa; --nitro-glow: rgba(255,115,250,0.6);
  --oro: #fee75c;
}

body { background: var(--fondo); color: var(--texto); font-family: 'Outfit', sans-serif !important; -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden; display: flex; flex-direction: column; }
button, input, select, textarea { font-family: 'Outfit', sans-serif !important; color: var(--texto); }

/* ════ FONDO Y ANIMACIONES COMPARTIDAS ════ */
.fondo-animado { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fondo-animado svg { width: 100%; height: 100%; opacity: 0.6;}
.orbe-1 { animation: flotar 22s ease-in-out infinite alternate; }
.orbe-2 { animation: flotar 28s ease-in-out infinite alternate-reverse; }
.orbe-3 { animation: flotar 18s ease-in-out infinite alternate; }
@keyframes flotar { 0% { transform: translate(0px,0px) scale(1); } 100% { transform: translate(40px,60px) scale(1.05); } }

@keyframes spinPropeller { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes radarSweep { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes batteryPulse { 0%, 100% { opacity: 0.5; fill: var(--texto-suave); } 50% { opacity: 1; fill: var(--verde-claro); } }
@keyframes recBlink { 0%, 100% { fill: var(--rojo); opacity: 1; } 50% { fill: var(--rojo); opacity: 0.3; } }
@keyframes floatHover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ═══════════════════════════════════════
   ESTILOS EXCLUSIVOS DRONES.PHP
═══════════════════════════════════════ */
.hero { position: relative; z-index: 1; padding: 6rem 1.5rem 2rem; text-align: center; border-bottom: 1px solid var(--border); }
.hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 90% 70% at 50% 0%, rgba(88,101,242,0.11) 0%, transparent 65%); pointer-events: none; z-index: -1; }
.nitro-tag { display: inline-flex; align-items: center; gap: 8px; background: var(--backgrounddiv); border: 1px solid var(--border); padding: 0.5rem 1.2rem; border-radius: 50px; font-size: 0.85rem; font-weight: 700; color: var(--texto-suave); margin-bottom: 1rem; }
.punto-vivo { width: 8px; height: 8px; border-radius: 50%; background: var(--degradado-nitro); box-shadow: 0 0 10px rgba(88,101,242,0.6); }
.hero h1 { font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 900; letter-spacing: -1.5px; margin-bottom: 1rem; display: flex; align-items: center; justify-content: center; gap: 15px; flex-wrap: wrap;}
.hero-svg-icon { width: 45px; height: 45px; color: var(--acento); }
.hero-svg-icon path.prop { animation: spinPropeller 1.5s linear infinite; transform-origin: center; }
.texto-nitro { background: var(--degradado-nitro); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero p { font-size: 1.15rem; color: var(--texto-suave); max-width: 650px; margin: 0 auto; line-height: 1.7; }

.contenedor { position: relative; z-index: 1; max-width: var(--max-ancho); margin: 0 auto; padding: 2rem 1.5rem 3rem; flex: 1; width: 100%; }

.advanced-filters { 
    background: var(--backgrounddiv-alt); border: 1px solid var(--border); border-radius: var(--radio); 
    padding: 1.5rem; margin-bottom: 2.5rem; display: flex; flex-direction: column; gap: 1.5rem;
}
.filtros-top { width: 100%; }
.search-wrapper { position: relative; width: 100%; }
.search-wrapper svg { position: absolute; left: 1.2rem; top: 50%; transform: translateY(-50%); color: var(--acento); pointer-events: none; width: 20px; height: 20px;}
.search-wrapper input { 
    width: 100%; background: var(--fondo); border: 1px solid var(--border); color: #fff; 
    padding: 1.2rem 1.2rem 1.2rem 3rem; border-radius: 12px; font-size: 1.1rem; font-weight: 500;
    transition: var(--transicion); outline: none; height: auto;
}
.search-wrapper input:focus { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(88,101,242,0.15); }

.filtros-bottom { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.filtro-grupo { display: flex; flex-direction: column; gap: 0.5rem; }
.filtro-grupo label { font-size: 0.75rem; font-weight: 800; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 1px;}
.filtro-select { 
    background: var(--fondo); border: 1px solid var(--border); color: #fff; 
    padding: 0.9rem 1rem; border-radius: 10px; font-size: 0.95rem; outline: none; cursor: pointer; transition: 0.2s; height: auto;
} 
.filtro-select:focus { border-color: var(--acento); }

.drones-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 2rem; margin-bottom: 4rem; align-items: start;}
.drone-card {
  background: var(--backgrounddiv); border: 1px solid var(--border); border-radius: var(--radio);
  display: flex; flex-direction: column; transition: var(--transicion); position: relative; height: 100%;
}
.drone-card:hover { transform:translateY(-5px); border-color:var(--border-activo); box-shadow:0 15px 40px rgba(0,0,0,0.5); }
.d-none { display: none !important; }

.card-header { height: 240px; background: radial-gradient(circle at top, var(--backgrounddiv-hover) 0%, var(--backgrounddiv) 100%); display: flex; align-items: center; justify-content: center; padding: 2rem; border-bottom: 1px solid var(--border); cursor: pointer; position: relative;}
.card-header img { max-width: 90%; max-height: 90%; object-fit: contain; filter: drop-shadow(0 15px 15px rgba(0,0,0,0.6)); transition: var(--transicion); }
.drone-card:hover .card-header img { animation: floatHover 2s infinite ease-in-out; filter: drop-shadow(0 25px 20px rgba(0,0,0,0.8));}

.badge-top { position: absolute; top: 15px; left: 15px; right: 15px; display: flex; justify-content: space-between; pointer-events: none;}
.badge-score { display: flex; align-items: center; gap: 4px; background: rgba(0,0,0,0.7); backdrop-filter: blur(5px); padding: 6px 12px; border-radius: 50px; font-weight: 900; font-size: 1.1rem; color: var(--amarillo); border: 1px solid rgba(254,231,92,0.3); }
.badge-score span { font-size: 0.7rem; color: #fff; text-transform: uppercase;}
.badge-class { font-weight: 800; font-size: 0.8rem; padding: 6px 12px; border-radius: 50px; text-transform: uppercase;}
.clase-c0 { background: rgba(35,165,90,0.15); color: var(--verde-claro); border: 1px solid rgba(35,165,90,0.3); }
.clase-c1 { background: rgba(88,101,242,0.15); color: var(--acento-claro); border: 1px solid rgba(88,101,242,0.3); }
.clase-c2, .clase-c3 { background: rgba(240,178,50,0.15); color: var(--naranja); border: 1px solid rgba(240,178,50,0.3); }
.clase-legacy { background: rgba(242,63,66,0.15); color: var(--rojo); border: 1px solid rgba(242,63,66,0.3); }

.card-body { padding: 1.5rem; flex: 1 1 auto; display: flex; flex-direction: column; gap: 1.2rem; }
.drone-brand-year { display: flex; justify-content: space-between; font-size: 0.8rem; font-weight: 800; color: var(--texto-apagado); text-transform: uppercase; letter-spacing: 1px;}
.drone-name { font-size: clamp(1.4rem, 4vw, 1.6rem); font-weight: 900; color: #fff; line-height: 1.2; margin: 0;}
.drone-desc { font-size: 0.9rem; color: var(--texto-suave); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}

.specs-mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.spec-box { display: flex; align-items: center; gap: 10px; background: var(--backgrounddiv-alt); padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.03);}
.spec-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--acento-claro); display: flex; justify-content: center; align-items: center;}
.spec-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;}
.spec-text { display: flex; flex-direction: column; overflow: hidden;}
.spec-text-lbl { font-size: 0.65rem; font-weight: 800; color: var(--texto-apagado); text-transform: uppercase; }
.spec-text-val { font-size: 0.85rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.drone-card:hover .svg-anim-radar circle { animation: radarSweep 2s infinite linear; transform-origin: center;}
.drone-card:hover .svg-anim-rec circle.rec-dot { animation: recBlink 1.5s infinite; fill: var(--rojo); stroke: none;}
.drone-card:hover .svg-anim-battery rect.bat-fill { animation: batteryPulse 2s infinite; }

.hud-telemetry { 
    background: #06070a; border: 1px solid var(--border); border-radius: 8px; 
    padding: 10px; font-size: 0.85rem; font-weight: 700;
    color: var(--verde-claro); display: flex; justify-content: space-between; 
    box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
}
.hud-item { display: flex; flex-direction: column; align-items: center; gap: 2px;}
.hud-lbl { font-size: 0.6rem; color: var(--texto-apagado); font-weight: 800; letter-spacing: 0.5px;}

.diff-box { display: flex; align-items: center; justify-content: space-between; background: rgba(0,0,0,0.2); padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border); }
.diff-lbl { font-size: 0.75rem; font-weight: 800; color: var(--texto-suave); text-transform: uppercase;}
.diff-stars { display: flex; gap: 2px; }

.score-bars { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: flex; align-items: center; gap: 10px; }
.bar-lbl { font-size: 0.75rem; font-weight: 800; color: var(--texto-suave); width: 55px; flex-shrink: 0; }
.bar-bg { flex: 1; height: 6px; background: rgba(255,255,255,0.05); border-radius: 50px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 50px; background: var(--degradado-nitro); width: 0; transition: width 1s ease-out; }
.bar-val { font-size: 0.85rem; font-weight: 900; color: #fff; width: 25px; text-align: right; }

.pros-cons-list { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; background: var(--backgrounddiv-alt); padding: 12px; border-radius: 10px; border: 1px dashed var(--border);}
.pc-item { display: flex; align-items: flex-start; gap: 8px; color: var(--texto-suave); line-height: 1.4;}
.pc-icon { font-weight: 900; flex-shrink: 0; }
.pc-pro { color: var(--verde-claro); }
.pc-con { color: var(--rojo); }

.card-footer { 
    padding: 1.2rem; border-top: 1px solid var(--border); 
    display: flex; gap: 8px; align-items: center; justify-content: center; flex: 0 0 auto;
}
.btn { 
    flex: 1; height: 44px; display: inline-flex; justify-content: center; align-items: center; 
    border-radius: 10px; font-weight: 800; font-size: 0.9rem; text-decoration: none; 
    transition: var(--transicion); cursor: pointer; border: none; padding: 0 1rem; box-sizing: border-box; 
}
.btn-primary { background: var(--acento); color: #fff; box-shadow: 0 4px 15px rgba(88,101,242,0.2); }
.btn-primary:hover { background: var(--acento-claro); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(88,101,242,0.4); }
.btn-secondary { background: var(--backgrounddiv-alt); border: 1px solid var(--border); color: #fff; }
.btn-secondary:hover { background: var(--backgrounddiv-hover); border-color: var(--texto-suave); transform: translateY(-2px); }

.form-hangar { margin: 0; display: flex; align-items: center; }
.btn-icon-hangar {
    background: rgba(35, 165, 89, 0.1); border: 1px solid rgba(35, 165, 89, 0.3); color: var(--verde);
    width: 44px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer; transition: var(--transicion); text-decoration: none; box-sizing: border-box; flex-shrink: 0;
}
.btn-icon-hangar:hover { background: var(--verde); color: #fff; border-color: var(--verde); transform: translateY(-2px); box-shadow: 0 8px 15px rgba(35, 165, 89, 0.3); }
.btn-icon-hangar span { display: none; }

.ad-card-wrapper { 
    background: var(--backgrounddiv-alt); border: 1px dashed var(--border); border-radius: var(--radio); 
    position: relative; padding: 2rem 1rem 1rem; display: block; width: 100%; min-height: 350px; box-sizing: border-box;
}
.ad-label { position: absolute; top: 10px; left: 10px; font-size: 0.65rem; font-weight: 900; color: var(--texto-apagado); letter-spacing: 1px; z-index: 10;}

/* ═══════════════════════════════════════
   ESTILOS EXCLUSIVOS COMPARADOR.PHP
═══════════════════════════════════════ */
.hero-comp { padding: 4rem 1.5rem 2rem; text-align: center; border-bottom: 1px solid var(--border); position: relative; z-index: 1;}
.hero-comp::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at top, rgba(255,115,250,0.06) 0%, transparent 70%); z-index:-1; }
.hero-comp h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 900; margin: 0 0 1rem; line-height: 1.1;}
.hero-comp p { font-size: 1.1rem; color: var(--muted); max-width: 800px; margin: 0 auto; line-height: 1.6;}

.select-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-bottom: 3rem; position: relative; max-width: 900px; margin-left: auto; margin-right: auto;}
.select-drone { width: 100%; padding: 1.2rem; background: var(--card-alt); border: 2px solid var(--border); color: #fff; border-radius: 12px; font-family: inherit; font-size: 1.1rem; font-weight: 800; outline: none; cursor: pointer; transition: var(--transicion); text-align: center; appearance: none; box-shadow: 0 10px 30px rgba(0,0,0,0.3);}
.select-drone:focus, .select-drone:hover { border-color: var(--nitro); box-shadow: 0 0 20px rgba(255,115,250,0.2); }
.select-drone option { background: var(--card); }

.vs-icon-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 55px; height: 55px; background: var(--fondo); border: 2px solid var(--nitro); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; color: var(--nitro); box-shadow: 0 0 20px rgba(255,115,250,0.4); z-index: 10; font-size: 1.2rem;}

.grid-master { 
    display: flex; flex-direction: column; background: var(--card); 
    border: 1px solid var(--border); border-radius: var(--radio); 
    box-shadow: 0 10px 40px rgba(0,0,0,0.5); overflow: hidden;
}

.header-row { display: grid; grid-template-columns: 320px 1fr 1fr; position: sticky; top: 0; z-index: 50; background: rgba(19,21,31,0.95); backdrop-filter: blur(10px); border-bottom: 2px solid var(--border); }
.header-cell { padding: 1.5rem; text-align: center; display: flex; flex-direction: column; justify-content: flex-end; align-items: center;}
.header-cell:not(:last-child) { border-right: 1px solid var(--border); }
.header-info { text-align: left; align-items: flex-start; justify-content: flex-start; padding-top:2rem;}

.radar-wrapper { position: relative; width: 100%; max-width: 280px; margin: 0 auto; background: rgba(0,0,0,0.2); border-radius: 16px; border: 1px solid rgba(255,255,255,0.05); padding: 10px; box-shadow: inset 0 0 20px rgba(0,0,0,0.5);}
.radar-canvas { width: 100%; height: auto; display: block; overflow: visible; }
.r-lbl { font-size: 10px; font-weight: 900; fill: #fff; filter: drop-shadow(0px 3px 4px rgba(0,0,0,0.9)); text-transform: uppercase; font-family: 'Outfit', sans-serif;}
.radar-pt { cursor: crosshair; transition: r 0.2s, filter 0.2s; }
.radar-pt:hover { filter: drop-shadow(0 0 5px currentColor); }

.radar-legend { display: flex; flex-direction: column; gap: 8px; margin-top: 15px; font-size: 0.85rem; font-weight: 800; background: rgba(0,0,0,0.3); padding: 10px; border-radius: 8px;}
.legend-item { display: flex; align-items: center; gap: 8px; color: var(--texto-suave);}
.legend-color { width: 12px; height: 12px; border-radius: 3px; }

.score-box-main { background: var(--fondo); border: 2px solid var(--nitro); border-radius: 12px; padding: 1rem 1.5rem; margin: 0.5rem auto 1rem; width: fit-content; box-shadow: 0 0 20px rgba(255,115,250,0.2); position:relative; overflow:hidden;}
.score-box-main::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(88,101,242,0.2), rgba(255,115,250,0.2)); }
.score-val { font-size: 3.5rem; font-weight: 900; color: #fff; line-height: 1; text-shadow: 0 0 20px var(--nitro-glow); position:relative; z-index:2;}
.score-lbl { font-size: 0.8rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; position:relative; z-index:2; margin-top: 5px;}

.drone-img { height: 160px; object-fit: contain; margin-bottom: 1rem; filter: drop-shadow(0 15px 20px rgba(0,0,0,0.5)); transition: transform 0.4s;}
.header-cell:hover .drone-img { transform: translateY(-5px) scale(1.05); }

.clase-badge-top { display: inline-block; background: rgba(88,101,242,0.15); border: 1px solid var(--accent); color: #fff; padding: 0.3rem 1rem; border-radius: 50px; font-size: 0.75rem; font-weight: 900; margin-bottom: 0.5rem; letter-spacing: 1px;}
.d-name { font-size: 1.5rem; font-weight: 900; color: #fff; margin: 0 0 0.5rem;}
.d-price { font-size: 1.4rem; font-weight: 800; color: var(--muted); margin-bottom: 1rem;}

.action-btns { display: flex; gap: 0.5rem; width: 100%; max-width: 250px;}
.btn-buy { background: var(--accent); color: #fff; padding: 0.8rem; border-radius: 12px; font-weight: 800; text-decoration: none; flex: 1; transition: var(--transicion); font-size: 0.9rem;}
.btn-buy:hover { background: var(--acento-claro); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(88,101,242,0.4); }

.empty-card { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); height: 100%; opacity: 0.5; padding: 2rem;}

.group-title-row { background: rgba(88,101,242,0.08); padding: 1rem 1.5rem; font-size: 1rem; font-weight: 900; text-transform: uppercase; color: var(--acento-claro); letter-spacing: 1px; border-bottom: 1px solid var(--border); border-top: 1px solid var(--border); }

.spec-row { display: grid; grid-template-columns: 320px 1fr 1fr; border-bottom: 1px solid var(--border); transition: background 0.2s;}
.spec-row:hover { background: var(--card-alt); }

.spec-cell { padding: 1.2rem 1.5rem; display: flex; flex-direction: column; justify-content: center; position: relative;}
.spec-cell:not(:last-child) { border-right: 1px solid var(--border); }

.lbl-cell { font-weight: 800; color: var(--texto); font-size: 0.95rem; align-items: flex-start;}
.val-cell { font-size: 0.95rem; color: var(--texto-suave); text-align: center; align-items: center;}
.val-cell strong { color: #fff; font-size: 1.1rem; display: block; margin-bottom: 8px;}

.winner-cell { 
    background: radial-gradient(ellipse at center, rgba(35,165,90,0.15) 0%, transparent 80%); 
    box-shadow: inset 0 0 25px rgba(35,165,90,0.25); 
    position: relative; 
}
.winner-cell::before { content: '🏆'; position: absolute; top: 10px; right: 10px; font-size: 1.2rem; opacity: 0.9; animation: bounce 2s infinite; filter: drop-shadow(0 0 5px rgba(35,165,90,0.8));}
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.tooltip-trigger { position: relative; cursor: help; display: inline-flex; align-items: center; }
.hover-label { border-bottom: 1px dashed rgba(255,255,255,0.4); transition: color 0.2s, border-color 0.2s; padding-bottom: 2px; }
.tooltip-trigger:hover .hover-label { color: var(--nitro-rosa); border-color: var(--nitro-rosa); }

.tooltip-trigger::after {
    content: attr(data-info);
    position: absolute; bottom: 100%; left: 0; transform: translateY(-10px);
    width: 220px; padding: 10px 14px; background: #0b0c14; border: 1px solid var(--nitro-rosa);
    color: #fff; font-size: 0.8rem; font-weight: 500; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    z-index: 100; opacity: 0; visibility: hidden; transition: all 0.3s ease;
    pointer-events: none; text-transform: none; text-align: left; line-height: 1.4;
}
.tooltip-trigger:hover::after { opacity: 1; visibility: visible; transform: translateY(-5px); }

#radar-tooltip {
    position: fixed; background: rgba(0,0,0,0.9); border: 1px solid var(--border); color: #fff;
    padding: 8px 12px; border-radius: 8px; font-size: 0.85rem; font-weight: 800;
    pointer-events: none; opacity: 0; z-index: 9999; box-shadow: 0 10px 20px rgba(0,0,0,0.8);
    transition: opacity 0.2s; white-space: nowrap; transform: translate(-50%, -100%); margin-top:-10px;
}

.seo-landing-block { background: var(--card); border: 1px solid var(--border); border-radius: var(--radio); padding: 3rem; margin: 2rem auto 4rem; max-width: 900px; text-align: center; }
.seo-landing-block h2 { font-size: 2rem; color: #fff; font-weight: 900; margin-bottom: 1rem; }
.seo-landing-block p { color: var(--muted); line-height: 1.6; font-size: 1.1rem; }

.ad-in-feed { display: grid; grid-template-columns: 1fr; background: var(--card-alt); border-bottom: 1px solid var(--border); position: relative; min-height: 150px; padding: 1rem; align-items: center; justify-content: center; }
.ad-multiplex { margin-top: 3rem; margin-bottom: 2rem; border-radius: var(--radio); overflow: hidden; position: relative; padding-top: 1rem; }

/* ════ MEDIA QUERIES GENERALES PARA HERRAMIENTAS ════ */
@media (max-width: 960px) {
    /* Responsive drones */
    .hero { padding: 5rem 1rem 2rem; }
    .advanced-filters { padding: 1.2rem; }
    .drones-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem;}
    
    /* Responsive comparador */
    .select-row { grid-template-columns: 1fr; gap: 1.5rem; max-width: 500px;}
    .vs-icon-center { position: relative; transform: none; left: auto; top: auto; margin: -10px auto; }
    
    .header-row { display: flex; flex-direction: column; position: relative; background: transparent; border: none;} 
    .header-info { display: none; }
    .header-cell { padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radio); background: var(--card); margin-bottom: 1rem;}
    .header-cell:first-child { border-right: 1px solid var(--border); }
    
    .drone-img { height: 120px; }
    .d-name { font-size: 1.2rem; }
    .d-price { font-size: 1.2rem; }
    .score-val { font-size: 2.5rem; }
    .clase-badge-top { font-size: 0.7rem; padding: 0.3rem 0.8rem; }
    .btn-buy { padding: 0.8rem; font-size: 0.9rem; }
    
    /* Specs apiladas */
    .spec-row { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 1rem; background: rgba(0,0,0,0.2); overflow: hidden;}
    .spec-row:hover { background: rgba(0,0,0,0.2); }
    .lbl-cell { text-align: center; align-items: center; padding: 0.8rem !important; border-bottom: 1px solid rgba(255,255,255,0.05); border-right: none !important; background: var(--card-alt); font-size: 0.9rem;}
    .tooltip-trigger::after { left: 50%; transform: translateX(-50%) translateY(10px); text-align: center; bottom: 120%; }
    .tooltip-trigger:hover::after { transform: translateX(-50%) translateY(0); }
    
    .val-cell { width: 100%; border-right: none !important; padding: 1rem 0.5rem; font-size: 0.9rem;}
    .val-cell:first-of-type { border-bottom: 1px dashed rgba(255,255,255,0.05); } 
    
    .spec-row { display: grid; grid-template-columns: 1fr 1fr; }
    .lbl-cell { grid-column: 1 / -1; }
    .val-cell:first-of-type { border-bottom: none; border-right: 1px solid rgba(255,255,255,0.05) !important; }
}

@media (max-width: 600px) {
    .filtros-bottom { grid-template-columns: 1fr 1fr; }
    .card-header { height: 200px; padding: 1rem; }
    .card-body { padding: 1.2rem; gap: 1rem; }
    
    .card-footer { flex-direction: column; padding: 1.2rem; align-items: stretch;}
    .btn, .btn-icon-hangar { width: 100%; }
    .btn-icon-hangar span { display: inline-block; font-size: 0.95rem; font-weight: 800; font-family: 'Outfit'; }
}