/* Maqueta con el estilo de Mi Rodada (solo dentro de .mr). Letra Barlow vía Google Fonts. */
.mr {
  --mr-bg: #e9ece4; --mr-surface: #f7f8f3; --mr-surface-2: #e2e6dd;
  --mr-text: #101519; --mr-muted: #4f5b60; --mr-accent: #aecb3c; --mr-danger: #d0301f;
  font-family: 'Barlow Semi Condensed', system-ui, sans-serif;
  color: var(--mr-text);
}
@media (prefers-color-scheme: dark) {
  .mr { --mr-bg: #1e2529; --mr-surface: #2a3337; --mr-surface-2: #323c41; --mr-text: #edefe9; --mr-muted: #a3aca5; --mr-danger: #ff6b5c; }
}

.mr-telefono {
  position: relative; width: min(100%, 390px); height: 760px; margin: var(--e-4) auto 0;
  border-radius: 44px; overflow: hidden; background: var(--mr-bg);
  border: 10px solid #101519; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.5);
}
.mr-mapa { position: absolute; inset: 0; }

.mr-isla { position: absolute; background: var(--mr-surface); border-radius: 22px; box-shadow: 0 6px 20px rgba(16, 21, 25, 0.18); }
.mr-arriba { top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; font-weight: 600; }
.mr-arriba span { color: var(--mr-muted); font-weight: 500; }

.mr-aviso { top: 70px; left: 14px; right: 14px; display: flex; gap: 12px; align-items: center; padding: 12px;
  transform: translateY(-12px); opacity: 0; transition: transform 300ms ease, opacity 300ms ease; }
.mr-aviso.activo { transform: none; opacity: 1; }
.mr-aviso-icono { flex: none; width: 52px; height: 52px; border-radius: 14px; background: var(--mr-danger); display: grid; place-items: center; }
.mr-aviso-icono svg { width: 28px; height: 28px; }
.mr-ceja { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; color: var(--mr-muted); }
.mr-valor { font-family: 'Big Shoulders Display', 'Barlow Semi Condensed', sans-serif; font-size: 1.7rem; font-weight: 800; line-height: 1; text-transform: uppercase; }
.mr-linea { font-size: 0.9rem; color: var(--mr-muted); }

.mr-abajo { left: 14px; right: 14px; bottom: 14px; padding: 14px; display: grid; gap: 10px; }
.mr-datos { display: flex; justify-content: space-between; align-items: baseline; }
.mr-datos b { font-family: 'Big Shoulders Display', sans-serif; font-size: 1.8rem; }
.mr-datos span { color: var(--mr-muted); font-size: 0.9rem; }
.mr-botones { display: flex; gap: 10px; }
.mr-btn { flex: 1; min-height: 48px; border-radius: 999px; border: 0; font: 700 1rem 'Barlow Semi Condensed', sans-serif; cursor: pointer; }
.mr-btn-lima { background: var(--mr-accent); color: #101519; }
.mr-btn-oscuro { background: #101519; color: #f7f8f3; }

.mk-peligro { width: 22px; height: 22px; border-radius: 50%; background: var(--mr-danger, #d0301f); border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(208, 48, 31, 0.35); }
.mk-moto { width: 30px; height: 30px; border-radius: 50%; background: #101519; border: 3px solid #aecb3c; display: grid; place-items: center; }
.mk-moto::after { content: ''; border: 6px solid transparent; border-bottom: 10px solid #aecb3c; transform: translateY(-3px); }
.mr-nota { text-align: center; font-size: var(--t-chico); color: var(--tinta-suave); margin-top: var(--e-2); }