/* ════════════════════════════════════════════════
   MUNDO DRONE — Capa aditiva
   NO modifica mundodrone-mock.css. Solo añade clases
   nuevas para estados/componentes que el mock no cubre.
   ════════════════════════════════════════════════ */

/* Estado sin imagen real (regla: nunca inventar rutas de imagen) */
.card-img-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--titanio-a);
  border: 1px dashed rgba(0,212,255,0.25);
}
.card-img-noimg-label {
  color: var(--plata-a);
  opacity: 0.45;
  font-size: 11px;
  text-align: center;
  letter-spacing: 1px;
  padding: 12px;
}

/* Selects del comparador funcional (reutiliza tokens del Codex, componente nuevo) */
.md-compare-select {
  width: 100%;
  background: var(--titanio-b);
  border: 1px solid rgba(0,212,255,0.2);
  color: var(--plata-b);
  font-family: var(--ftac);
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 4px;
}

/* Tabla comparativa (componente nuevo: md-compare-table) */
.md-compare-table { width: 100%; border-collapse: collapse; font-family: var(--ftac); }
.md-compare-table th, .md-compare-table td {
  border-bottom: 1px solid rgba(0,212,255,0.1);
  padding: 10px 12px;
  text-align: left;
  color: var(--plata-a);
  font-size: 14px;
}
.md-compare-table th { font-family: var(--fmono); font-size: 11px; color: var(--cyan); letter-spacing: 1px; opacity: 0.8; }
.md-compare-table td.md-compare-label { font-family: var(--fmono); font-size: 11px; opacity: 0.5; }

@media (max-width: 720px) {
  .md-compare-table { font-size: 12px; }
  .md-compare-table th, .md-compare-table td { padding: 8px 6px; }
}

/* ════════════════════════════════════════════════
   Corrección: logo grande del hero (.nav-logo-drone-prin)
   El mock no define tamaño para el <img> interno — estado
   "reposo" quedaba gigante y descentrado. Se acota aquí,
   de forma aditiva, sin tocar mundodrone-mock.css.
   ════════════════════════════════════════════════ */
.nav-logo-drone-prin {
  font-size: 0; /* anula el font-size:40px heredado, que no aplica a un <img> */
}
.nav-logo-drone-prin img {
  display: block;
  width: clamp(160px, 26vw, 320px);
  height: auto;
  margin: 0 0 20px 0;
}
@media (max-width: 640px) {
  .hero { align-items: center; text-align: center; }
  .hero-actions { justify-content: center; }
  .nav-logo-drone-prin img {
    width: clamp(140px, 55vw, 220px);
    margin: 0 auto 16px auto;
  }
  .hero-stats { justify-content: center; }
}

/* ════════════════════════════════════════════════
   Menú hamburguesa (componente nuevo: md-hamburger)
   Regla del proyecto: max-height 0→420px + toggle de clase,
   nunca display:none puro.
   ════════════════════════════════════════════════ */
.md-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid rgba(0,212,255,0.25);
  cursor: pointer;
  padding: 0;
}
.md-hamburger span {
  display: block;
  height: 2px;
  width: 20px;
  margin: 0 auto;
  background: var(--cyan);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.md-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.md-hamburger.open span:nth-child(2) { opacity: 0; }
.md-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav { padding: 0 4vw; height: 72px; }
  .nav-links,
  .nav-cta { display: none !important; }
  .md-hamburger { display: flex; }

  .nav-links {
    display: flex !important; /* controlado por max-height, no por display */
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(8,8,8,0.97);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,212,255,0.15);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .nav-links.open { max-height: 420px; }
  .nav-links a { height: auto; line-height: 1.4; padding: 14px 6vw; border-bottom: 1px solid rgba(0,212,255,0.06); }
  .md-nav-cta-mobile { padding: 16px 6vw; }
  .md-nav-cta-mobile a.btn-nav { display: inline-block; }
}

@media (min-width: 901px) {
  .md-nav-cta-mobile { display: none; }
}