@import url("https://fonts.googleapis.com/css2?family=Syne:wght@500..800&family=Inter:wght@400..700&family=Caveat:wght@600&display=swap");

/* munditrip — component styles. Every colour, step and radius is a token. */
.mt { font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
.mt *, .mt *::before, .mt *::after { box-sizing: border-box; }

/* Buttons */
.mt-btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); height:44px; padding:0 var(--space-5); border-radius:var(--radius-pill); border:0; font:650 15px/20px var(--font-sans); cursor:pointer; white-space:nowrap; text-decoration:none; }
.mt-btn:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.mt-btn--primary { background:var(--primary); color:var(--on-primary); }
.mt-btn--accent { background:var(--accent); color:var(--on-accent); }
.mt-btn--secondary { background:var(--surface); color:var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.mt-btn--quiet { background:var(--surface-alt); color:var(--ink); }
.mt-btn--block { width:100%; height:52px; font-size:16px; }
.mt-btn--sm { height:36px; padding:0 var(--space-4); font-size:14px; }

/* Chips */
.mt-chip { display:inline-flex; align-items:center; gap:var(--space-1); height:32px; padding:0 var(--space-3); border-radius:var(--radius-pill); font:650 13px/18px var(--font-sans); white-space:nowrap; }
.mt-chip--accent { background:var(--accent); color:var(--on-accent); }
.mt-chip--soft { background:var(--primary-soft); color:var(--ink); }
.mt-chip--ink { background:var(--ink); color:var(--bg); height:24px; padding:0 var(--space-2); font-size:12px; }
.mt-chip--outline { background:var(--surface); color:var(--ink-muted); box-shadow: inset 0 0 0 1px var(--line); height:26px; font-size:12px; }

/* Type helpers */
.mt-display { font-family:var(--font-display); letter-spacing:-0.02em; margin:0; }
.mt-script { font-family:var(--font-script); font-weight:600; color:var(--link); }
.mt-muted { color:var(--ink-muted); }

/* Hero — "Próximo viaje" */
.mt-hero { position:relative; overflow:hidden; background:var(--primary); color:var(--on-primary); border-radius:var(--radius-lg); padding:var(--space-6); }
.mt-hero::after { content:""; position:absolute; width:180px; height:180px; right:-48px; top:-56px; border-radius:var(--radius-pill); background:var(--on-primary); opacity:.08; }
.mt-hero__eyebrow { font:500 13px/18px var(--font-sans); opacity:.85; }
.mt-hero__title { font:700 30px/34px var(--font-display); letter-spacing:-0.02em; margin:var(--space-2) 0 var(--space-1); }
.mt-hero__meta { font:500 13px/18px var(--font-sans); opacity:.85; }
.mt-hero__row { display:flex; align-items:center; justify-content:space-between; margin-top:var(--space-5); }
.mt-hero__link { font:650 15px/20px var(--font-sans); color:var(--on-primary); }

/* Trip list row */
.mt-row { display:flex; align-items:center; gap:var(--space-3); background:var(--surface); border-radius:var(--radius-md); padding:var(--space-3); box-shadow:var(--shadow-card); }
.mt-row__badge { width:44px; height:44px; flex:none; border-radius:var(--radius-sm); background:var(--accent); color:var(--on-accent); display:grid; place-items:center; font:700 17px/1 var(--font-display); }
.mt-row__body { flex:1; min-width:0; }
.mt-row__title { font:650 17px/22px var(--font-display); }

/* City card — itinerary */
.mt-city { --c: var(--city-1); --cs: var(--city-1-soft); background:var(--surface); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card); }
.mt-city--2 { --c: var(--city-2); --cs: var(--city-2-soft); }
.mt-city--3 { --c: var(--city-3); --cs: var(--city-3-soft); }
.mt-city__head { background:var(--cs); padding:var(--space-4); display:flex; justify-content:space-between; align-items:flex-start; gap:var(--space-2); }
.mt-city__name { font:700 19px/24px var(--font-display); letter-spacing:-0.01em; margin:0; color:var(--ink); }
.mt-city__meta { font:500 13px/18px var(--font-sans); color:var(--ink); margin-top:2px; }
.mt-city__country { color:var(--c); font-weight:700; }
.mt-city__nights { height:24px; padding:0 var(--space-2); border-radius:var(--radius-pill); background:var(--surface); color:var(--c); font:650 12px/24px var(--font-sans); box-shadow: inset 0 0 0 1px var(--c); white-space:nowrap; }
.mt-city__body { padding:var(--space-3) var(--space-4); font:400 15px/22px var(--font-sans); display:flex; gap:var(--space-2); align-items:center; }
.mt-city__actions { display:flex; flex-wrap:wrap; gap:var(--space-2); padding:0 var(--space-4) var(--space-4); }
.mt-dot { width:14px; height:14px; border-radius:var(--radius-pill); background:var(--bg); box-shadow: inset 0 0 0 2.5px var(--c, var(--city-1)); }

/* Tip */
.mt-tip { display:flex; gap:var(--space-3); align-items:center; background:var(--accent-soft); border-radius:var(--radius-md); padding:var(--space-4); font:400 14px/20px var(--font-sans); color:var(--ink); }
.mt-tip .mt-script { font-size:24px; line-height:1; }

/* Tab bar */
.mt-tabs { display:flex; justify-content:space-around; background:var(--surface); border-top:1px solid var(--line); padding:var(--space-2) var(--space-2) var(--space-3); }
.mt-tab { display:flex; flex-direction:column; align-items:center; gap:var(--space-1); font:650 11px/14px var(--font-sans); color:var(--ink-muted); min-width:64px; }
.mt-tab__icon { width:52px; height:30px; border-radius:var(--radius-pill); display:grid; place-items:center; }
.mt-tab__icon svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.mt-tab--on { color:var(--ink); }
.mt-tab--on .mt-tab__icon { background:var(--accent); color:var(--on-accent); }

/* FAB */
.mt-fab { width:56px; height:56px; border-radius:var(--radius-pill); background:var(--primary); color:var(--accent); display:grid; place-items:center; font:500 30px/1 var(--font-sans); box-shadow:var(--shadow-fab); }

/* Avatar */
.mt-avatar { width:40px; height:40px; border-radius:var(--radius-pill); background:var(--accent); color:var(--on-accent); display:grid; place-items:center; font:700 16px/1 var(--font-display); }
.mt-avatar--sm { width:28px; height:28px; font-size:12px; }
.mt-iconbtn { width:40px; height:40px; border-radius:var(--radius-pill); background:var(--surface-alt); color:var(--ink); display:grid; place-items:center; }
.mt-iconbtn svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* Phone frame used by the screen previews */
.mt-phone { width:360px; background:var(--bg); border-radius:36px; box-shadow: 0 0 0 8px var(--ink); overflow:hidden; position:relative; }
.mt-screen { padding:var(--space-5); display:flex; flex-direction:column; gap:var(--space-4); }
.mt-section { font:700 18px/24px var(--font-display); letter-spacing:-0.01em; margin:var(--space-2) 0 0; }
.mt-wordmark { font:700 19px/1 var(--font-display); letter-spacing:-0.03em; color:var(--ink); }