@font-face{font-family:"Montserrat";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/montserrat-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/montserrat-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:800;font-display:swap;src:url("/fonts/montserrat-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/open-sans-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/open-sans-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/open-sans-latin-700-normal.woff2") format("woff2")}

/* ==========================================================================
   MI JAIME — Tema "Lanzamiento" para la app (pasajero, conductor,
   repartidor y restaurante). Misma paleta y tipografía que el video y el
   sitio jaimeapp.com.mx. Solo cambia la imagen; la funcionalidad es igual.
   ========================================================================== */
:root {
  --navy: #1b3a6b;          /* encabezado azul de la app en el video */
  --navy-deep: #252c6a;     /* "Mi Jaime" del logo */
  --navy-surface: #234a7d;
  --oro: #fec007;           /* amarillo de los botones del video */
  --oro-oscuro: #8a6500;
  --texto: #1b2559;
  --texto-suave: #4d5878;
  --fondo: #f4f7fb;
  --tarjeta: #ffffff;
  --borde: #e2e8f2;
  --verde: #2fa35f;
  --mj-verde-oscuro: #1e7f4c;
  --sombra: 0 8px 24px rgba(27, 58, 107, 0.08);
}
body { font-family: "Open Sans", system-ui, -apple-system, sans-serif; }
h1, h2, h3, .marca, .marca-header strong {
  font-family: "Montserrat", system-ui, -apple-system, sans-serif;
  letter-spacing: -0.01em;
}
h1, h2, h3 { color: var(--navy-deep); }

/* Encabezados con el degradado azul del video */
.barra-app, .barra-app-slim, .marca-header, .menu-lateral__encabezado, .boton-menu-movil {
  background: linear-gradient(120deg, var(--navy-deep) 0%, var(--navy) 100%) !important;
}

/* Botón principal verde como el de la app en el video */
.btn-primario {
  background: linear-gradient(120deg, var(--mj-verde-oscuro) 0%, var(--verde) 100%);
  color: #fff;
  box-shadow: 0 8px 18px rgba(47, 163, 95, 0.28);
}
.btn-oro {
  background: var(--oro);
  color: var(--navy-deep);
  box-shadow: 0 8px 18px rgba(254, 192, 7, 0.30);
}
.btn-secundario { background: rgba(27, 58, 107, 0.07); color: var(--navy); }
.btn { font-family: "Open Sans", system-ui, sans-serif; }

.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--verde);
  box-shadow: 0 0 0 3px rgba(47, 163, 95, 0.15);
}
.tarjeta { border-color: var(--borde); }
.chip-oro { background: rgba(254, 192, 7, 0.20); color: var(--oro-oscuro); }
.aviso-msg { background: rgba(254, 192, 7, 0.16); color: #6b4f00; }
.menu-lateral__item.activo { background: rgba(47, 163, 95, 0.12); color: var(--mj-verde-oscuro); }
.tabs-inferior a.activo, .tabs-inferior button.activo { color: var(--mj-verde-oscuro); background: rgba(47, 163, 95, 0.10); }
/* Logo sobre fondo blanco para que se vea bien en el encabezado azul */
.barra-app .marca img, .barra-app .marca svg,
.barra-app-slim .marca img, .barra-app-slim .marca svg,
.marca-header img, .marca-header svg,
.menu-lateral__encabezado .marca img, .menu-lateral__encabezado .marca svg {
  background: #fff; border-radius: 8px; padding: 3px; box-sizing: content-box;
}