@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  font: 16px/1.5 'DM Sans', system-ui, sans-serif;
  color: #14283b;
  background: #edf2f4;
  --navy: #071c2d;
  --muted: #4c6273;
  --line: #d5e0e5;
  --turquoise: #087b70;
  --coral: #f75a50;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
a { color: inherit; text-underline-offset: .22em; }
a:hover { text-decoration-thickness: .13em; }
:focus-visible { outline: 3px solid #128d80; outline-offset: 3px; }
.wrap { width: min(1120px, calc(100% - 52px)); margin-inline: auto; }
.skip { position: absolute; inset: 12px auto auto 12px; transform: translateY(-150%); padding: 10px; background: white; z-index: 2; }
.skip:focus { transform: none; }
.masthead { background: var(--navy); color: white; overflow: hidden; }
.mastbar { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid #304453; }
.brand { display: flex; align-items: center; min-height: 44px; }
.brand img { width: 123px; height: auto; display: block; }
nav { display: flex; gap: clamp(16px, 4vw, 38px); }
nav a { font-size: .9rem; font-weight: 600; text-decoration: none; color: #e0e9ed; }
.hero { min-height: 282px; padding-block: 38px 52px; position: relative; isolation: isolate; display: flex; align-items: center; }
.hero h1 { margin: 0; font-family: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif; font-size: clamp(3.5rem, 8vw, 6.5rem); line-height: .88; letter-spacing: -.035em; text-transform: uppercase; font-weight: 800; }
.hero h1 span { color: var(--coral); }
.hero p { margin: 19px 0 0; color: #c8d9e2; font-size: clamp(.94rem, 2vw, 1.12rem); }
.hero-deco { position: absolute; z-index: -1; inset: 18px -14px 0 53%; opacity: .75; background: radial-gradient(circle at 68% 62%, transparent 30%, #49657266 30.3%, transparent 30.7%, transparent 46%, #49657266 46.3%, transparent 46.7%, transparent 61%, #49657266 61.3%, transparent 61.7%), repeating-linear-gradient(135deg, transparent 0 31px, #5a798722 32px 33px); mask-image: linear-gradient(90deg, transparent, black 65%); }
.dashboard { display: grid; grid-template-columns: 1.08fr 1fr; gap: 18px; margin-block: 24px 18px; align-items: start; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: clamp(18px, 3vw, 30px); min-width: 0; }
h2 { font-size: clamp(1.35rem, 2.5vw, 1.66rem); margin: 0 0 18px; font-weight: 700; line-height: 1.17; letter-spacing: -.035em; }
#configuracion, #planes { scroll-margin-top: 16px; }
label { font-size: .85rem; display: block; font-weight: 700; }
input, select { font: inherit; font-size: 1rem; color: #14283b; background: #f8fafb; border: 1px solid #aebfc8; border-radius: 8px; display: block; width: 100%; height: 44px; padding: 7px 10px; margin-top: 5px; font-variant-numeric: tabular-nums; }
input:invalid { border-color: #a32027; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 13px; margin-block: 14px; }
.fields > label { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.hint { margin: 8px 0 0; color: var(--muted); font-size: .83rem; }
.advanced { margin-top: 17px; padding-top: 12px; border-top: 1px solid var(--line); }
summary { color: #08675e; font-weight: 700; font-size: .89rem; cursor: pointer; min-height: 34px; }
.error { color: #98252b; margin: 10px 0 0; font-weight: 600; }
.results { background: #f7fbfc; }
.headline-result { display: flex; flex-direction: column; margin: 10px 0 20px; }
.headline-result strong { font-size: clamp(2.1rem, 5.6vw, 4.25rem); line-height: 1.03; color: #08675e; font-family: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif; font-weight: 800; font-variant-numeric: tabular-nums; }
.headline-result span { font-size: .98rem; color: var(--muted); }
.usage-bar { display: flex; height: 8px; border-radius: 9px; overflow: hidden; background: var(--line); }
.usage-bar span { width: 0; }
#gnss-bar { width: 99%; background: var(--turquoise); }
#live-bar { width: 1%; background: var(--coral); }
.result-list { margin: 14px 0 18px; }
.result-list div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); padding-block: 8px; }
.result-list dt { color: #354e61; }
.result-list dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.dot { display: inline-block; width: .48em; height: .48em; margin-right: .55em; border-radius: 50%; vertical-align: .13em; }
.dot.gnss { background: var(--turquoise); }
.dot.live { background: var(--coral); }
.transfer { background: #e4f2ee; padding: 13px 15px; border-radius: 10px; }
.transfer[data-state="late"] { background: #f9ebe3; }
.transfer > span { color: #354f56; font-size: .86rem; font-weight: 600; }
.transfer strong { display: block; color: #153b3a; font-size: clamp(1.3rem, 4vw, 1.8rem); line-height: 1.2; }
.transfer p { margin: 4px 0 0; font-size: .82rem; }
.plans { margin-bottom: 20px; }
.plans-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 22px; flex-wrap: wrap; }
.plans-heading h2 { margin-bottom: 0; }
.plans-heading span { font-size: .86rem; color: var(--muted); }
.table-wrap { margin-top: 13px; }
table { width: 100%; border-collapse: collapse; }
thead th { text-align: left; color: #3f596b; font-size: .77rem; }
thead th, td, tbody th { padding: 10px 10px 10px 0; border-bottom: 1px solid var(--line); }
tbody th { text-align: left; font-size: .91rem; }
td { font-weight: 700; font-size: .89rem; font-variant-numeric: tabular-nums; }
td, th { vertical-align: top; }
.plan-detail { display: block; color: var(--muted); max-width: 42ch; font-size: .78rem; font-weight: 400; margin-top: 3px; }
.plan-source { color: #08675e; font-size: .76rem; font-weight: 600; }
.quote .fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.footer { display: flex; justify-content: space-between; gap: 10px; padding-block: 4px 26px; color: var(--muted); font-size: .85rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 775px) {
  .dashboard { grid-template-columns: 1fr; }
  .hero { min-height: 0; }
}
@media (max-width: 560px) {
  .wrap { width: calc(100% - 26px); }
  .mastbar { min-height: 62px; }
  .brand img { width: 98px; }
  .hero { padding-block: 33px 36px; }
  .hero-deco { inset-inline-start: 34%; opacity: .45; }
  .dashboard { margin-block: 13px; gap: 13px; }
  .panel { border-radius: 12px; }
  .fields { gap: 12px 10px; }
  table, tbody { display: block; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px 0 12px; border-bottom: 1px solid var(--line); }
  tbody th { grid-column: 1 / -1; }
  tbody th, td { border: none; padding: 0; overflow-wrap: anywhere; }
  td::before { display: block; content: attr(data-label); font-size: .72rem; font-weight: 500; color: var(--muted); margin-bottom: 2px; }
  .quote .fields { grid-template-columns: 1fr; }
}