/* ════════════════════════════════════════════════
   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; }
}

/* ════════════════════════════════════════════════
   SECCIÓN ARTÍCULOS (componentes nuevos: articulo-*)
   Capa aditiva — no modifica mundodrone-mock.css
   ════════════════════════════════════════════════ */

/* -- Filtros de categoría -- */
.articulo-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}
.articulo-filtro-btn {
  font-family: var(--fmono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--plata-a);
  opacity: 0.6;
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid rgba(0,212,255,0.18);
  background: var(--titanio-a);
  transition: opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.articulo-filtro-btn:hover {
  opacity: 0.9;
  border-color: rgba(0,212,255,0.4);
}
.articulo-filtro-btn.active {
  opacity: 1;
  color: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(0,212,255,0.15);
}

/* -- Grid de tarjetas -- */
.articulo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.articulo-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--titanio-a);
  border: 1px solid rgba(0,212,255,0.14);
  border-top: 2px solid var(--cyan-dim);
  padding: 22px;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.articulo-card:hover {
  border-color: rgba(0,212,255,0.45);
  border-top-color: var(--cyan);
  background: var(--titanio-b);
  transform: translateY(-2px);
}

.articulo-cat-tag {
  font-family: var(--fmono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--orange);
}

.articulo-card-titulo {
  font-family: var(--fhud);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
  color: var(--plata-b);
}

.articulo-card-extracto {
  font-family: var(--ftac);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--plata-a);
  opacity: 0.65;
  flex-grow: 1;
}

.articulo-card-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--fmono);
  font-size: 10.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--plata-a);
  opacity: 0.45;
  padding-top: 10px;
  border-top: 1px solid rgba(0,212,255,0.08);
}

/* -- Cuerpo de artículo individual -- */
.articulo-cuerpo {
  max-width: 760px;
  font-family: var(--ftac);
  font-size: 16px;
  line-height: 1.85;
  color: var(--plata-a);
}
.articulo-cuerpo p { margin-bottom: 18px; opacity: 0.9; }
.articulo-cuerpo h3 {
  font-family: var(--fhud);
  font-weight: 700;
  font-size: 19px;
  color: var(--cyan);
  letter-spacing: 0.5px;
  margin: 32px 0 14px;
}
.articulo-cuerpo ul, .articulo-cuerpo ol {
  margin: 0 0 18px 20px;
}
.articulo-cuerpo li { margin-bottom: 10px; opacity: 0.9; }
.articulo-cuerpo strong { color: var(--plata-b); font-weight: 700; }
.articulo-cuerpo a { color: var(--cyan); }
.articulo-cuerpo table.md-compare-table { margin: 8px 0 22px; }

@media (max-width: 640px) {
  .articulo-grid { grid-template-columns: 1fr; }
  .articulo-cuerpo { font-size: 15px; }
}

/* ════════════════════════════════════════════════
   BANNER DE COOKIES (componente nuevo: md-cookie-*)
   Capa aditiva — no modifica mundodrone-mock.css
   ════════════════════════════════════════════════ */
.md-cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  max-width: 640px;
  margin: 0 auto;
  background: var(--titanio-b);
  border: 1px solid rgba(0,212,255,0.25);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.md-cookie-text {
  font-family: var(--ftac);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--plata-a);
  opacity: 0.85;
}
.md-cookie-text a { color: var(--cyan); }
.md-cookie-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.md-cookie-btn {
  font-family: var(--fmono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 10px 18px;
  border: 1px solid rgba(0,212,255,0.3);
  background: transparent;
  color: var(--plata-a);
  cursor: pointer;
}
.md-cookie-btn-primary {
  background: var(--cyan);
  color: var(--vacio);
  border-color: var(--cyan);
  font-weight: 700;
}
.md-cookie-btn-ghost:hover { border-color: rgba(0,212,255,0.6); }

/* ════════════════════════════════════════════════
   PÁGINAS LEGALES (componente nuevo: legal-*)
   ════════════════════════════════════════════════ */
.legal-cuerpo {
  max-width: 780px;
  font-family: var(--ftac);
  font-size: 15px;
  line-height: 1.8;
  color: var(--plata-a);
}
.legal-cuerpo h3 {
  font-family: var(--fhud);
  font-weight: 700;
  font-size: 17px;
  color: var(--cyan);
  margin: 28px 0 12px;
}
.legal-cuerpo p { margin-bottom: 14px; opacity: 0.9; }
.legal-cuerpo ul { margin: 0 0 14px 20px; }
.legal-cuerpo li { margin-bottom: 8px; opacity: 0.9; }
.legal-cuerpo strong { color: var(--plata-b); }

/* ════════════════════════════════════════════════
   AVISO DE AFILIACIÓN AMAZON (footer)
   ════════════════════════════════════════════════ */
.md-affiliate-disclosure {
  font-family: var(--fmono);
  font-size: 10.5px;
  letter-spacing: 0.3px;
  color: var(--plata-a);
  opacity: 0.45;
  text-align: center;
  padding: 16px 5vw;
  border-top: 1px solid rgba(0,212,255,0.08);
}
.footer-legal-links {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 5vw 12px;
  font-family: var(--fmono);
  font-size: 10.5px;
}
.footer-legal-links a { color: var(--plata-a); opacity: 0.5; text-decoration: none; }
.footer-legal-links a:hover { opacity: 0.9; color: var(--cyan); }