:root {
  --bg: #090a0d;
  --surface: #121318;
  --surface-2: #191a20;
  --line: #292a31;
  --text: #f6f4ef;
  --muted: #96969e;
  --gold: #d8b25b;
  --gold-light: #f0d58f;
  --green: #25d366;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 8% 5%, #fffaf1 0, transparent 34rem),
    linear-gradient(135deg, #f8ebdc 0%, #e5d8c8 52%, #cbbfad 100%);
  background-attachment: fixed;
}

button, input, select { font: inherit; }
button, select, a { -webkit-tap-highlight-color: transparent; }

.site-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(100% - 32px, 620px);
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 0 0;
  background: transparent;
}

.brand {
  display: block;
  width: 160px;
  height: 160px;
  flex: 0 0 160px;
  overflow: hidden;
  border-radius: 12px;
  background: transparent;
}
.brand img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.country-flags {
  margin-top: 16px;
  opacity: .35;
  pointer-events: none;
}
.country-flags img {
  display: block;
  width: 240px;
  height: auto;
}

.connection {
  display: flex;
  align-items: center;
  margin-left: 2px;
}
.connection span { display: none; }
.connection i { width: 18px; height: 18px; border-radius: 50%; background: #d39b3a; box-shadow: 0 0 0 5px #d39b3a18; }
.connection.online i { background: #25d366; box-shadow: 0 0 0 5px #25d36624; }
.connection.error i { background: #e26666; box-shadow: 0 0 0 5px #e2666620; }

main { width: min(100% - 32px, 620px); margin: 0 auto; padding: 16px 0 max(36px, env(safe-area-inset-bottom)); }
.hero { padding: 0 4px 30px; text-align: center; }
.eyebrow { margin: 0 0 14px; color: #9c6b13; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.hero h1 { margin: 0; color: #222124; font: 800 clamp(36px, 11vw, 58px)/.98 "Segoe UI", sans-serif; letter-spacing: -.05em; }
.hero h1 span { color: #a96e09; }

.calculator {
  padding: 18px;
  border: 1px solid #cdbb9f;
  border-radius: 24px;
  color: #211f1c;
  background: linear-gradient(145deg, #fff9ee, #eadcca);
  box-shadow: 0 26px 60px #6c55452b;
}

.calculator-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.calculator-heading .eyebrow { margin-bottom: 7px; }
.calculator .eyebrow { color: #94620c; }
.calculator-heading h2 { margin: 0; color: #171614; font-size: 18px; }
.clear {
  padding: 8px 10px;
  border: 0;
  color: #665e53;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
}

.amounts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 12px;
}
.amounts-grid .field { min-width: 0; }
.amounts-grid label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 7px 2px;
  color: #211f1c;
  font-size: 11px;
  font-weight: 700;
}
.currency-dot {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #13151a;
  background: #d9d9db;
  font-size: 7px;
  font-weight: 900;
}
.currency-dot.cop { background: #f5d448; }
.currency-dot.ves { background: #e6ae50; }
.currency-dot.usd { background: #92c59b; }
.currency-dot.eur { background: #8fb3dc; }

.rates-summary {
  margin-bottom: 24px;
  padding: 5px 2px 18px;
  border-bottom: 1px solid #cdbb9f;
}
.rates-summary-title, .amounts-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.rates-summary-title > span, .amounts-title > span {
  color: #211f1c;
  font-size: 12px;
  font-weight: 700;
}
.rates-summary-title small, .amounts-title small {
  color: #766d62;
  font-size: 9px;
}
.rate-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rate-values > div {
  min-width: 0;
  padding: 0 10px;
  text-align: center;
}
.rate-values > div:first-child { padding-left: 0; }
.rate-values > div:last-child { padding-right: 0; }
.rate-values > div + div { border-left: 1px solid #cdbb9f; }
.rate-values span {
  display: block;
  color: #6e665c;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.rate-values strong {
  display: block;
  min-height: 25px;
  margin-top: 7px;
  color: #7d5000;
  font-size: clamp(14px, 4.2vw, 19px);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.editable {
  display: flex;
  align-items: center;
  min-height: 50px;
  padding: 0 12px;
  border: 1px solid #bcae9a;
  border-radius: 9px;
  background: #fffdf8;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.editable:focus-within {
  border-color: #a87112;
  background: #fff;
  box-shadow: 0 0 0 3px #b47b1820;
}
.editable span, .editable small {
  flex: 0 0 auto;
  color: #625a50;
  font-size: 11px;
  font-weight: 700;
}
.editable input {
  min-width: 0;
  width: 100%;
  padding: 14px 7px;
  border: 0;
  outline: 0;
  color: #111;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
}
.editable input::placeholder { color: #8d867d; }
.result-input { background: #f3e8d8; }
.calculation-note { margin: 3px 2px 0; color: #665e53; font-size: 12px; }

.colombia-clock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding: 13px 2px 11px;
  border-top: 1px solid #cdbb9f;
  border-bottom: 1px solid #cdbb9f;
  color: #211f1c;
}
.colombia-clock > span {
  flex: 0 0 auto;
  color: #7d5000;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.colombia-clock time {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

@media (min-width: 560px) {
  .amounts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 13px; background: #090a0d; }
.mode { min-height: 42px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-size: 13px; font-weight: 700; cursor: pointer; }
.mode.active { color: #17140d; background: linear-gradient(135deg, var(--gold-light), var(--gold)); box-shadow: 0 5px 18px #d8b25b25; }

.field-group { margin-top: 24px; }
.field-group > label, .result-top > span { display: block; margin-bottom: 9px; color: var(--muted); font-size: 12px; font-weight: 600; }
.money-input {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  border: 1px solid var(--line); border-radius: 15px; background: #0b0c10;
  transition: border-color .2s, box-shadow .2s;
}
.money-input:focus-within { border-color: #9b803f; box-shadow: 0 0 0 3px #d8b25b12; }
.money-input input { min-width: 0; width: 100%; padding: 17px 16px; border: 0; outline: 0; color: var(--text); background: transparent; font: 700 25px/1 "Segoe UI", sans-serif; }
.money-input input::placeholder { color: #52535a; }
select { border: 0; outline: 0; color: var(--gold-light); background: transparent; font-weight: 800; cursor: pointer; }
.money-input select { height: 54px; margin-right: 8px; padding: 0 28px 0 10px; }
select option { color: #111; background: white; }
.field-error { min-height: 17px; margin: 6px 3px 0; color: #e77a7a; font-size: 12px; }

.exchange-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 2px 0; }
.exchange-row span { height: 1px; background: var(--line); }
.swap { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #3a3424; border-radius: 50%; color: var(--gold-light); background: #16140f; cursor: pointer; transition: transform .25s, background .2s; }
.swap:hover { background: #221d12; }
.swap:active { transform: rotate(180deg); }
.swap svg, .refresh svg { width: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.result-card { min-height: 148px; padding: 18px; border: 1px solid #5b4a27; border-radius: 17px; background: linear-gradient(140deg, #231d11, #121216 70%); }
.result-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.result-top > span { margin: 0; }
.result-top select { padding: 6px; }
#result { display: block; margin-top: 19px; color: var(--gold-light); font: 800 clamp(30px, 9vw, 45px)/1 "Segoe UI", sans-serif; letter-spacing: -.035em; overflow-wrap: anywhere; }
#conversion-status { margin: 10px 0 0; color: #665e53; font-size: 12px; }

.rates-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.meta-label { display: block; color: #766d62; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.rates-meta strong { display: block; margin-top: 4px; color: #282521; font-size: 11px; font-weight: 600; }
.refresh { display: flex; align-items: center; gap: 7px; padding: 9px 11px; border: 0; color: #7d5000; background: transparent; font-size: 12px; font-weight: 700; cursor: pointer; }
.refresh.loading svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.cta { display: flex; align-items: center; gap: 15px; margin: 24px 3px 18px; padding: 8px 4px; }
.cta-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  overflow: hidden;
  border-radius: 14px;
  color: #17130b;
  background: linear-gradient(135deg, #c99425, var(--gold), #f0d58f);
  box-shadow: 0 0 16px #d8a93f80;
  animation: gold-pulse 1.8s ease-in-out infinite;
}
.cta-icon::after {
  position: absolute;
  inset: -55%;
  content: "";
  background: linear-gradient(110deg, transparent 35%, #fff8cddd 47%, #ffd65fff 50%, #fff8cddd 53%, transparent 65%);
  transform: translateX(-70%) rotate(8deg);
  animation: gold-sweep 1.6s linear infinite;
}
.cta-icon svg { position: relative; z-index: 1; width: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
@keyframes gold-sweep {
  to { transform: translateX(70%) rotate(8deg); }
}
@keyframes gold-pulse {
  0%, 100% { box-shadow: 0 0 12px #d8a93f66; }
  50% { box-shadow: 0 0 24px #ffd45fbf; }
}
.cta p, .cta h2 { margin: 0; }
.cta p { color: #665f57; font-size: 13px; }
.cta h2 { margin-top: 1px; color: #222124; font: 800 21px/1.2 "Segoe UI", sans-serif; }

.whatsapp { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 18px; border-radius: 16px; color: #07180d; background: var(--green); text-decoration: none; font-size: 14px; font-weight: 800; box-shadow: 0 15px 35px #25d36620; }
.whatsapp svg { width: 22px; fill: currentColor; }
.whatsapp.disabled { opacity: .38; filter: saturate(.4); pointer-events: none; box-shadow: none; }
.disclaimer { margin: 14px 18px 0; color: #665f57; font-size: 10px; line-height: 1.5; text-align: center; }

.welcome-modal {
  width: min(calc(100% - 36px), 390px);
  margin: auto;
  padding: 28px 24px 24px;
  border: 1px solid #d1b06e;
  border-radius: 22px;
  color: #24201a;
  background: linear-gradient(145deg, #fffaf1, #eadbc7);
  box-shadow: 0 24px 70px #251b0c59;
  text-align: center;
}
.welcome-modal::backdrop {
  background: #17110ba8;
  backdrop-filter: blur(4px);
}
.welcome-modal[open] {
  animation: modal-in .25s ease-out;
}
.welcome-modal-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
  border-radius: 50%;
  color: #2d210a;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  font-size: 24px;
  font-weight: 900;
}
.welcome-modal .eyebrow {
  margin-bottom: 9px;
}
.welcome-modal h2 {
  margin: 0;
  font: 800 22px/1.25 "Segoe UI", sans-serif;
}
.welcome-modal button {
  width: 100%;
  min-height: 48px;
  margin-top: 22px;
  border: 0;
  border-radius: 13px;
  color: #211805;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  font-weight: 800;
  cursor: pointer;
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* PWA 3D */
:root {
  --page: #efe5d5;
  --page-deep: #d8c9b2;
  --paper: #f8f1e5;
  --paper-high: #fffaf1;
  --paper-low: #dfd0ba;
  --ink: #26231f;
  --copper: #a65320;
  --gold-strong: #dba51f;
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -12%, #fffdf7 0 15rem, transparent 38rem),
    radial-gradient(circle at 8% 42%, #fff8e9a8 0 10rem, transparent 30rem),
    linear-gradient(145deg, #f5eddf 0%, var(--page) 48%, var(--page-deep) 100%);
}
body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  content: "";
  opacity: .28;
  background-image:
    linear-gradient(115deg, transparent 48%, #ffffffb0 50%, transparent 52%),
    radial-gradient(circle, #8b704c14 1px, transparent 1px);
  background-size: 100% 100%, 18px 18px;
  pointer-events: none;
}

.site-header {
  width: min(100% - 28px, 680px);
  padding-top: max(14px, env(safe-area-inset-top));
  perspective: 900px;
}
.brand {
  width: 132px;
  height: 132px;
  flex-basis: 132px;
  filter: drop-shadow(0 14px 13px #6e4a1835);
  transform: rotateX(3deg) translateZ(10px);
}
.country-flags {
  margin-top: 8px;
  opacity: .28;
  filter: drop-shadow(0 8px 7px #6e4a1830);
}
.country-flags img { width: 220px; }

main {
  width: min(100% - 14px, 680px);
  padding: 12px 0 max(30px, env(safe-area-inset-bottom));
  perspective: 1200px;
}
.hero {
  padding: 0 10px 24px;
  transform-style: preserve-3d;
}
.hero h1 {
  color: #171614;
  font-size: clamp(31px, 9vw, 48px);
  line-height: 1.02;
  text-shadow: 0 2px 0 #fff, 0 8px 16px #806a4c26;
}
.hero h1 span {
  color: #bd8611;
  background: linear-gradient(110deg, #9e6906 0%, #dba51f 30%, #fff4b0 46%, #ffd65f 50%, #fff4b0 54%, #dba51f 70%, #9e6906 100%);
  background-size: 260% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 5px #9e690638);
  animation: gold-text-sweep 1.6s linear infinite;
}
@keyframes gold-text-sweep {
  from { background-position: 130% 50%; }
  to { background-position: -130% 50%; }
}

.calculator {
  position: relative;
  padding: 24px 20px 22px;
  border: 1px solid #fffdf0;
  border-radius: 26px;
  background:
    linear-gradient(145deg, #fffaf0e8, #eee2d0e8),
    var(--paper);
  box-shadow:
    0 2px 0 #fff inset,
    0 -2px 0 #c9b89e inset,
    0 18px 0 -10px #b7a488,
    0 32px 55px #6d57383d;
  transform-style: preserve-3d;
}
.calculator::before {
  position: absolute;
  inset: 10px;
  z-index: -1;
  border-radius: 21px;
  content: "";
  background: #fff;
  filter: blur(18px);
  opacity: .34;
  transform: translateZ(-10px);
}
.calculator-heading {
  align-items: center;
  margin-bottom: 19px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ddcdb6;
}
.calculator-heading .eyebrow {
  margin-bottom: 6px;
  color: #ad5c2d;
  font-size: 10px;
  letter-spacing: .12em;
}
.calculator-heading h2 {
  font-size: clamp(20px, 5.5vw, 25px);
  letter-spacing: -.025em;
}
.clear {
  padding: 10px 12px;
  border-radius: 12px;
  color: #746c61;
  transition: transform .18s, box-shadow .18s;
}
.clear:active { transform: translateY(2px); }

.rates-summary {
  margin-bottom: 24px;
  padding: 17px 16px 16px;
  border: 1px solid #dfcba8;
  border-radius: 19px;
  background:
    linear-gradient(145deg, #f1e5d1, #fff9ee);
  box-shadow:
    7px 7px 16px #b8a58a66,
    -7px -7px 16px #fffdf3,
    0 1px 0 #fff inset;
}
.rates-summary-title { margin-bottom: 13px; }
.rates-summary-title > span {
  color: #a26845;
  font-size: 10px;
  text-transform: uppercase;
}
.rate-values > div { padding: 0 8px; }
.rate-values > div + div { border-color: #d8c7ae; }
.rate-values span {
  color: #625c54;
  font-size: 10px;
  letter-spacing: 0;
}
.rate-values strong {
  min-height: 29px;
  margin-top: 4px;
  color: #2a2723;
  font-size: clamp(19px, 6vw, 27px);
  line-height: 1;
  text-shadow: 0 2px 0 #fff;
}
.rate-values > div:nth-child(2) strong { color: #713211; }

.amounts-title { margin-bottom: 13px; }
.amounts-title > span { font-size: 12px; }
.amounts-title small { font-style: italic; opacity: .68; }
.amounts-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}
.amounts-grid .field {
  min-height: 94px;
  padding: 12px 12px 8px;
  border: 1px solid #e0cfb5;
  border-radius: 17px;
  background: linear-gradient(145deg, #fffdf8, #eee7dc);
  box-shadow:
    6px 7px 12px #b9a99266,
    -5px -5px 12px #ffffff,
    0 1px 0 #fff inset;
  transition: transform .2s, box-shadow .2s;
}
.amounts-grid .field:focus-within {
  transform: translateY(-2px) translateZ(12px);
  box-shadow:
    9px 11px 17px #a6937866,
    -5px -5px 13px #fff,
    0 0 0 2px #d7a52b70 inset;
}
.amounts-grid .field-reference-muted {
  border-color: #c9c0b3;
  background: linear-gradient(145deg, #e9e5de, #d9d2c8);
  box-shadow:
    6px 7px 12px #9f958866,
    -5px -5px 12px #faf7f1,
    0 1px 0 #fdfbf7 inset;
}
.amounts-grid .field-reference-muted label,
.amounts-grid .field-reference-muted input {
  color: #66625c;
}
.amounts-grid .field-reference-muted:focus-within {
  background: linear-gradient(145deg, #efebe4, #ddd6cc);
}
.amounts-grid label {
  margin: 0;
  color: #4c4842;
  font-size: 11px;
}
.currency-dot {
  width: 21px;
  height: 21px;
  border: 1px solid #ffffffb8;
  box-shadow: 0 2px 5px #5d4b2d30;
}
.editable,
.result-input {
  min-height: 43px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.editable:focus-within {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.editable span {
  color: #9c9ea1;
  font-size: 19px;
}
.editable input {
  padding: 9px 6px;
  color: #33312d;
  font-size: clamp(18px, 5vw, 22px);
}
.editable input::placeholder { color: #a5a7aa; }

.colombia-clock {
  margin-top: 24px;
  padding: 18px 0 12px;
  border-top: 1px solid #ddcdb6;
  border-bottom: 0;
}
.colombia-clock > span,
.meta-label {
  color: #a55c34;
  font-size: 9px;
}
.colombia-clock time {
  padding: 5px 8px;
  border-radius: 7px;
  background: #fff1b85c;
  box-shadow: 0 2px 5px #9d7b3930 inset;
}
.field-error { min-height: 0; }
#conversion-status:empty { display: none; }
.rates-meta {
  margin-top: 4px;
  padding-top: 12px;
}
.refresh {
  border-radius: 11px;
  color: #9a471a;
  font-weight: 800;
  transition: transform .18s, box-shadow .18s;
}
.refresh:hover { box-shadow: 0 5px 12px #9b672628; }
.refresh:active { transform: translateY(2px); }

.cta {
  position: relative;
  min-height: 66px;
  margin: 22px 0 14px;
  padding: 10px 14px;
  border: 1px solid #f0cd56;
  border-radius: 18px;
  background: linear-gradient(135deg, #f9e9aa, #f1dda0);
  box-shadow:
    0 2px 0 #fff7cf inset,
    0 -5px 0 #d4b14d inset,
    0 12px 20px #755b2738;
}
.cta::after {
  position: absolute;
  inset: 5px;
  border-radius: 13px;
  content: "";
  border: 1px solid #fff9cf70;
  pointer-events: none;
}
.cta-icon {
  flex: 0 0 43px;
  box-shadow: 0 6px 0 #a96d00, 0 10px 18px #b07b1e65;
}
.cta p { color: #6f6659; font-size: 12px; }
.cta h2 { font-size: 20px; }
.connection { margin-left: auto; margin-right: 8px; }
.connection i {
  width: 18px;
  height: 18px;
  border: 3px solid #9ceab9;
  box-shadow: 0 0 0 4px #25d36620, 0 5px 8px #177d3d38;
}

.whatsapp {
  min-height: 64px;
  border: 1px solid #48ed85;
  border-radius: 17px;
  color: #fff;
  background: linear-gradient(180deg, #32dc70, #1fc45d);
  font-size: clamp(15px, 4.5vw, 19px);
  text-shadow: 0 1px 1px #087b34;
  box-shadow:
    0 3px 0 #75f2a3 inset,
    0 -7px 0 #118d42 inset,
    0 14px 23px #147a3b46;
  transition: transform .18s, box-shadow .18s;
}
.whatsapp:not(.disabled):active {
  transform: translateY(4px);
  box-shadow:
    0 2px 0 #75f2a3 inset,
    0 -3px 0 #118d42 inset,
    0 7px 12px #147a3b3a;
}
.whatsapp svg { width: 28px; }
.disclaimer { color: #70685e; }

.welcome-modal {
  border-color: #fff4d7;
  background: linear-gradient(145deg, #fffaf1, #e6d5bb);
  box-shadow:
    0 2px 0 #fff inset,
    0 -5px 0 #c3a979 inset,
    0 28px 80px #251b0c78;
}
.welcome-modal button {
  box-shadow: 0 5px 0 #a87411, 0 10px 18px #76521345;
}

@media (max-width: 420px) {
  .brand {
    width: 112px;
    height: 112px;
    flex-basis: 112px;
  }
  .country-flags img { width: 190px; }
  .calculator { padding: 20px 14px; border-radius: 23px; }
  .calculator-heading { align-items: flex-end; }
  .calculator-heading h2 { font-size: 20px; }
  .calculator-heading .eyebrow { max-width: 230px; font-size: 8px; }
  .rates-summary { padding-inline: 10px; }
  .rate-values span { font-size: 8px; }
  .rate-values strong { font-size: clamp(17px, 5.6vw, 23px); }
  .amounts-grid { gap: 12px 10px; }
  .amounts-grid .field { min-height: 91px; padding-inline: 9px; }
  .amounts-grid label { font-size: 9px; }
  .editable span { font-size: 15px; }
  .editable input { font-size: 17px; }
  .colombia-clock { align-items: flex-start; }
  .colombia-clock time { max-width: 65%; font-size: 10px; }
}

@media (min-width: 700px) {
  .site-header, main { width: min(100% - 48px, 760px); }
  main { padding-top: 16px; }
  .hero { text-align: center; }
  .hero > p:last-child { margin-inline: auto; }
  .calculator { padding: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; }
  .cta-icon, .cta-icon::after, .hero h1 span { animation: none !important; }
}