/* ============================================================================
   NUEVO ASPECTO 2026 — Chrome (franja superior + pie).
   Alinea la barra persistente (.pro-strip) con el hero: navy de marca en vez de
   coral plano, botones rectangulares (nada de cápsulas 999px) y un CTA coral que
   mantiene la fuerza de la invitación. El pie ya está en navy/coral, así que solo
   se refina lo justo. Se carga la ÚLTIMA: estas reglas mandan. Aditiva y reversible.
   ============================================================================ */

/* --- Franja superior unificada a navy (enlaza con el hero navy de debajo) --- */
.pro-strip,
.pro-strip--user,
.pro-strip--invite {
  background: linear-gradient(120deg, #0b112c 0%, #16204a 72%, #221a46 100%);
}
/* El acento coral queda en el icono del rótulo y en el chip de créditos. */
.pro-strip .pro-strip-tag .ui-ico { color: #ec3f68; }

/* Botones rectangulares (~11px), coherentes con el hero. Nada de cápsulas. */
.pro-strip-links a,
.pro-strip-out {
  border-radius: 11px;
}
.pro-strip-out { color: #ffd7e0; border-color: rgba(255, 255, 255, .34); }

/* En la invitación, el primer enlace ("Inicia sesión o regístrate") es el CTA coral. */
.pro-strip--invite .pro-strip-links a:first-child {
  background: linear-gradient(135deg, #ec3f68, #c4214c);
  box-shadow: 0 6px 16px rgba(236, 63, 104, .3);
}
.pro-strip--invite .pro-strip-links a:first-child:hover {
  background: linear-gradient(135deg, #f0557a, #d0275a);
}

/* --- Cajón "Mi Ruta" y paneles: botones/enlaces rectangulares (sin cápsulas) --- */
#route-drawer a,
#route-drawer button,
.route-panel a[href],
.route-panel button,
.route-actions a, .route-actions button,
.route-cloud-actions a, .route-cloud-actions button,
.route-suggest a, .route-suggest button,
.route-suggest-actions a, .route-suggest-actions button,
.route-intelligence-card a,
.route-drawer-close,
.a11y-panel a, .a11y-panel button {
  border-radius: 11px !important;
}
.route-fab { border-radius: 14px !important; }

/* --- Pie de junio (rd-foot): marca + columnas de enlaces + barra inferior --- */
.rd-foot {
  color: #c7cde6; margin-top: 0; border-top: 1px solid rgba(236, 63, 104, .3);
  background:
    radial-gradient(circle at 86% 0%, rgba(236, 63, 104, .16), transparent 32%),
    linear-gradient(125deg, #0b112c, #0f1736 48%, #16204a);
}
.rd-foot__in { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 30px; padding: clamp(40px, 5vw, 64px) 0 clamp(24px, 3vw, 34px); }
.rd-foot__logo { display: inline-block; font-weight: 800; font-size: 22px; color: #fff; text-decoration: none; letter-spacing: -.01em; }
.rd-foot__logo b { color: var(--coral); }
.rd-foot__brand p { font-size: 13.5px; color: #9aa3c4; margin: 12px 0; max-width: 320px; line-height: 1.55; }
.rd-foot__brand small { font-size: 12.5px; color: #7c86ac; }
.rd-foot h4 { color: #fff; font-weight: 800; font-size: 13px; margin-bottom: 13px; letter-spacing: .12em; text-transform: uppercase; }
.rd-foot a { display: block; color: #aeb6d6; text-decoration: none; font-size: 13.5px; padding: 5px 0; transition: color .15s; }
.rd-foot a:hover { color: #fff; }
.rd-foot__bottom { border-top: 1px solid rgba(255, 255, 255, .1); font-size: 12.5px; color: #8c95b8; padding: 16px 0; display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between; }
@media (max-width: 920px) { .rd-foot__in { grid-template-columns: 1fr 1fr 1fr; } .rd-foot__brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .rd-foot__in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 380px) { .rd-foot__in { grid-template-columns: 1fr; } }