/* =========================================================
   Mundo Drone - páginas de rutas rápidas
   Archivo: /assets/css/pages/quick-routes.css
   Prefijo: mdqr-
   ========================================================= */

.mdqr-page {
  width: min(100%, 1760px);
  margin: 0 auto;
  padding: clamp(48px, 6vw, 90px) clamp(18px, 4.5vw, 86px);
}

.mdqr-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 212, 255, 0.18);
  background:
    radial-gradient(ellipse at 22% 20%, rgba(0, 212, 255, 0.12), transparent 42%),
    linear-gradient(135deg, rgba(17, 21, 26, 0.84), rgba(5, 7, 10, 0.94));
  padding: clamp(34px, 5vw, 72px);
  margin-bottom: clamp(34px, 5vw, 64px);
}

.mdqr-breadcrumb {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  font-family: var(--fmono, 'Share Tech Mono', monospace);
  color: rgba(200, 208, 216, .48);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.mdqr-breadcrumb a { color: var(--cyan, #00d4ff); text-decoration: none; }

.mdqr-kicker {
  font-family: var(--fmono, 'Share Tech Mono', monospace);
  color: var(--cyan, #00d4ff);
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.mdqr-title {
  font-family: var(--fhud, 'Orbitron', sans-serif);
  color: var(--plata-b, #e8edf2);
  font-size: clamp(34px, 5vw, 72px);
  line-height: 0.96;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-shadow: 0 5px 0 #000, 0 0 22px rgba(255,255,255,.14);
  max-width: 1120px;
}

.mdqr-lead {
  max-width: 980px;
  margin-top: 24px;
  font-family: var(--ftac, 'Rajdhani', sans-serif);
  color: rgba(200, 208, 216, 0.74);
  font-size: clamp(18px, 1.4vw, 23px);
  line-height: 1.55;
}

.mdqr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.mdqr-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 clamp(34px, 5vw, 60px);
}

.mdqr-toc a {
  font-family: var(--fmono, 'Share Tech Mono', monospace);
  color: rgba(232, 237, 242, .76);
  border: 1px solid rgba(0, 212, 255, .18);
  background: rgba(0, 212, 255, .04);
  padding: 10px 12px;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1.4px;
}

.mdqr-section {
  margin-bottom: clamp(44px, 6vw, 76px);
}

.mdqr-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 26px;
  border-bottom: 1px solid rgba(0, 212, 255, 0.12);
  padding-bottom: 18px;
}

.mdqr-section-title {
  font-family: var(--fhud, 'Orbitron', sans-serif);
  color: var(--plata-b, #e8edf2);
  font-size: clamp(26px, 3vw, 44px);
  line-height: 1;
  text-transform: uppercase;
}

.mdqr-small {
  font-family: var(--fmono, 'Share Tech Mono', monospace);
  color: rgba(200, 208, 216, 0.48);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.mdqr-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 22px;
}

.mdqr-grid--two { grid-template-columns: repeat(2, minmax(280px, 1fr)); }
.mdqr-grid--four { grid-template-columns: repeat(4, minmax(220px, 1fr)); }

.mdqr-panel,
.mdqr-step,
.mdqr-note,
.mdqr-definition {
  border: 1px solid rgba(0, 212, 255, 0.16);
  background: rgba(17, 21, 26, 0.72);
  padding: 24px;
}

.mdqr-panel--accent {
  border-color: rgba(255, 122, 0, 0.34);
  background: rgba(255, 122, 0, 0.045);
}

.mdqr-panel-title,
.mdqr-step-title,
.mdqr-note-title,
.mdqr-definition-title {
  font-family: var(--fhud, 'Orbitron', sans-serif);
  color: var(--plata-b, #e8edf2);
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.mdqr-panel-text,
.mdqr-step-text,
.mdqr-note-text,
.mdqr-definition-text,
.mdqr-copy,
.mdqr-list li {
  font-family: var(--ftac, 'Rajdhani', sans-serif);
  color: rgba(200, 208, 216, 0.72);
  font-size: 17px;
  line-height: 1.55;
}

.mdqr-copy { max-width: 1050px; margin-bottom: 18px; }

.mdqr-list {
  margin: 0;
  padding-left: 18px;
}

.mdqr-list li + li { margin-top: 8px; }

.mdqr-ranking {
  counter-reset: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 16px;
}

.mdqr-rank-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  border: 1px solid rgba(0, 212, 255, 0.16);
  background: rgba(17, 21, 26, 0.72);
  padding: 18px;
  text-decoration: none;
}

.mdqr-rank-card:hover { border-color: rgba(0, 212, 255, .48); }

.mdqr-rank-num {
  font-family: var(--fhud, 'Orbitron', sans-serif);
  color: var(--orange, #ff7a00);
  font-size: 22px;
  font-weight: 900;
}

.mdqr-rank-name {
  font-family: var(--fhud, 'Orbitron', sans-serif);
  color: var(--plata-b, #e8edf2);
  font-size: 18px;
  text-transform: uppercase;
}

.mdqr-rank-meta {
  display: block;
  margin-top: 4px;
  font-family: var(--fmono, 'Share Tech Mono', monospace);
  color: rgba(200, 208, 216, 0.48);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.mdqr-rank-score {
  font-family: var(--fhud, 'Orbitron', sans-serif);
  color: var(--cyan, #00d4ff);
  font-size: 24px;
  font-weight: 900;
}

.mdqr-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 28px;
}

.mdqr-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 16px;
}

.mdqr-step-num {
  font-family: var(--fhud, 'Orbitron', sans-serif);
  color: var(--cyan, #00d4ff);
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 10px;
}

.mdqr-alert {
  margin-top: 24px;
  border-left: 3px solid var(--orange, #ff7a00);
  background: rgba(255, 122, 0, 0.06);
  padding: 18px 20px;
  color: rgba(232, 237, 242, 0.78);
  font-family: var(--ftac, 'Rajdhani', sans-serif);
  font-size: 16px;
  line-height: 1.45;
}

.mdqr-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid rgba(0, 212, 255, .12);
  background: rgba(17, 21, 26, .62);
}

.mdqr-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
}

.mdqr-table th,
.mdqr-table td {
  border-bottom: 1px solid rgba(0, 212, 255, .08);
  padding: 14px 16px;
  text-align: left;
}

.mdqr-table th {
  font-family: var(--fmono, 'Share Tech Mono', monospace);
  color: var(--cyan, #00d4ff);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.mdqr-table td,
.mdqr-table a {
  font-family: var(--ftac, 'Rajdhani', sans-serif);
  color: rgba(232, 237, 242, .75);
  font-size: 16px;
  text-decoration: none;
}

.mdqr-table a { color: var(--plata-b, #e8edf2); font-weight: 700; }

.mdqr-faq {
  display: grid;
  gap: 12px;
}

.mdqr-faq-item {
  border: 1px solid rgba(0, 212, 255, .16);
  background: rgba(17, 21, 26, .72);
  padding: 18px 20px;
}

.mdqr-faq-item summary {
  cursor: pointer;
  font-family: var(--fhud, 'Orbitron', sans-serif);
  color: var(--plata-b, #e8edf2);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 16px;
}

.mdqr-faq-item p {
  margin-top: 12px;
  font-family: var(--ftac, 'Rajdhani', sans-serif);
  color: rgba(200, 208, 216, .72);
  font-size: 16px;
  line-height: 1.5;
}

.mdqr-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.mdqr-badge {
  font-family: var(--fmono, 'Share Tech Mono', monospace);
  color: var(--cyan, #00d4ff);
  border: 1px solid rgba(0, 212, 255, .22);
  background: rgba(0, 212, 255, .06);
  padding: 7px 10px;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

@media (max-width: 1180px) {
  .mdqr-grid,
  .mdqr-grid--two,
  .mdqr-grid--four,
  .mdqr-card-grid,
  .mdqr-flow,
  .mdqr-ranking {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }
}

@media (max-width: 760px) {
  .mdqr-page { padding: 38px 18px; }
  .mdqr-hero { padding: 28px 20px; }
  .mdqr-grid,
  .mdqr-grid--two,
  .mdqr-grid--four,
  .mdqr-card-grid,
  .mdqr-flow,
  .mdqr-ranking { grid-template-columns: 1fr; }
  .mdqr-section-head { align-items: flex-start; flex-direction: column; }
  .mdqr-rank-card { grid-template-columns: auto 1fr; }
  .mdqr-rank-score { grid-column: 1 / -1; }
}