:root {
  color-scheme: light;
  --navy: #102748;
  --navy-soft: #233b5d;
  --orange: #ef6a00;
  --orange-dark: #d95700;
  --ink: #17263e;
  --muted: #536178;
  --line: #dce3ed;
  --surface: #ffffff;
  --page: #f6f8fb;
  --pale-blue: #eaf2fd;
  --pale-orange: #fff3e8;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: var(--page);
}

button, a { font: inherit; }
button { color: inherit; }

.page-shell { min-height: 100vh; overflow: hidden; }

.brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: .7rem;
  color: var(--navy);
  font-size: clamp(1.2rem, 2vw, 1.65rem);
  font-weight: 780;
  letter-spacing: -.045em;
  text-decoration: none;
}
.brand img { display: block; width: 46px; height: 46px; object-fit: contain; }
.brand strong { font-weight: 860; }

.hero-banner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  width: min(1320px, calc(100% - 3rem));
  height: clamp(180px, 16vw, 220px);
  margin: 1rem auto 0;
  overflow: hidden;
  border-radius: 28px;
  color: #fff;
  background: var(--navy);
  box-shadow: 0 16px 38px rgba(16, 39, 72, .2);
}
.hero-banner::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  background: linear-gradient(90deg, rgba(8, 24, 49, .18) 0%, rgba(8, 24, 49, .08) 40%, rgba(8, 24, 49, 0) 68%);
  pointer-events: none;
}
.hero-brand {
  position: absolute;
  z-index: 1;
  top: clamp(.75rem, 1.4vw, 1.1rem);
  left: clamp(1rem, 2.5vw, 2rem);
  gap: .55rem;
  color: #fff;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  text-shadow: 0 1px 10px rgba(5, 18, 37, .4);
}
.hero-brand img { width: 38px; height: 38px; }
.hero-image {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 52%;
}
.hero-content {
  position: absolute;
  z-index: 1;
  bottom: clamp(.7rem, 1.2vw, 1rem);
  left: clamp(1rem, 2.5vw, 2rem);
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 1.6vw, 1.1rem);
  max-width: 43%;
}
.hero-icon {
  display: grid;
  flex: 0 0 auto;
  width: clamp(3rem, 5vw, 4rem);
  height: clamp(3rem, 5vw, 4rem);
  place-items: center;
  border-radius: 16px;
  color: var(--orange);
  background: #fff3e8;
  box-shadow: 0 6px 20px rgba(5, 20, 42, .16);
}
.hero-icon svg { width: 64%; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.hero-copy { min-width: 0; }
.hero-copy h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.8rem, 3.3vw, 2.8rem);
  font-weight: 820;
  line-height: 1.02;
  letter-spacing: -.055em;
  text-shadow: 0 2px 18px rgba(5, 18, 37, .28);
}
.hero-copy h1 span { color: #ff8a16; }
.hero-copy p {
  margin: .45rem 0 0;
  color: #f5f7fb;
  font-size: clamp(.84rem, 1.3vw, 1.02rem);
  line-height: 1.4;
  text-shadow: 0 1px 12px rgba(5, 18, 37, .5);
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(275px, .85fr);
  align-items: start;
  gap: clamp(.85rem, 1.8vw, 1.5rem);
  width: min(1160px, 100%);
  margin: 0 auto;
  padding: .4rem clamp(.85rem, 2vw, 1.8rem) 1.6rem;
}

.account-card, .steps-card, .trust-card, .contact-card {
  border: 1px solid rgba(16, 39, 72, .07);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 9px 26px rgba(21, 39, 66, .075);
}
.account-card { padding: clamp(.85rem, 1.5vw, 1.15rem); }

.account-intro { display: flex; align-items: center; gap: .9rem; margin-bottom: .7rem; }
.intro-icon {
  display: grid;
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  place-items: center;
  border-radius: 17px;
  background: var(--pale-orange);
}
.intro-icon svg { width: 38px; stroke: var(--orange); stroke-linecap: round; stroke-linejoin: round; stroke-width: 3.1; }
.account-intro h2 { margin: 0; color: var(--navy); font-size: clamp(1.2rem, 2vw, 1.65rem); line-height: 1.14; letter-spacing: -.035em; }
.account-intro p { margin: .3rem 0 0; color: var(--muted); font-size: clamp(.88rem, 1.2vw, 1rem); }

.configuration-notice {
  margin: 0 0 .75rem;
  padding: .62rem .82rem;
  border: 1px solid #e9a85e;
  border-radius: 12px;
  color: #71420f;
  background: #fff7eb;
  font-size: .86rem;
  line-height: 1.4;
}
.configuration-notice[hidden] { display: none; }

.account-fields { display: grid; gap: .5rem; margin: 0; }
.account-field {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  min-height: 68px;
  padding: .62rem .72rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(100deg, #fff, #fbfcfe);
}
.account-field--clabe { min-height: 82px; border: 2px solid #ff820d; background: linear-gradient(110deg, #fff5ea, #fffaf6); }
.field-icon {
  display: grid;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 13px;
  color: var(--navy);
  background: #edf3fb;
}
.field-icon svg { width: 26px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.field-icon--accent { color: var(--orange-dark); background: #ffead7; }
.field-copy { min-width: 0; flex: 1 1 auto; }
.field-copy dt { color: var(--muted); font-size: .84rem; }
.field-copy dd { overflow-wrap: anywhere; margin: .06rem 0 0; color: var(--navy); font-size: clamp(1rem, 1.65vw, 1.23rem); font-weight: 760; line-height: 1.2; }
.field-copy dd.is-pending { color: #758093; font-size: .92rem; font-weight: 600; }
.field-copy .clabe-value { font-size: clamp(1.08rem, 2.3vw, 1.5rem); letter-spacing: .018em; }
.field-copy .clabe-value.is-pending { font-size: .92rem; letter-spacing: 0; }

.copy-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: .42rem;
  min-height: 40px;
  padding: .5rem .78rem;
  border: 1px solid #d6dfeb;
  border-radius: 12px;
  color: var(--navy);
  background: #fff;
  box-shadow: 0 2px 6px rgba(19, 40, 70, .08);
  cursor: pointer;
  font-size: .91rem;
  font-weight: 680;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.copy-button svg { width: 19px; height: 19px; flex: 0 0 auto; stroke: var(--orange); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }
.copy-button:hover:not(:disabled) { border-color: #f39b52; background: #fffaf5; box-shadow: 0 5px 12px rgba(19, 40, 70, .12); transform: translateY(-1px); }
.copy-button:active:not(:disabled) { transform: translateY(0); }
.copy-button:focus-visible, .brand:focus-visible, .contact-link:focus-visible { outline: 3px solid #2374c8; outline-offset: 3px; }
.copy-button:disabled { color: #8b94a2; background: #f4f6f8; box-shadow: none; cursor: not-allowed; }
.copy-button:disabled svg { stroke: #9aa3b0; }
.copy-button--primary { border-color: var(--orange); color: white; background: linear-gradient(105deg, #f67a04, #e95c00); box-shadow: 0 5px 12px rgba(227, 92, 0, .19); }
.copy-button--primary svg { stroke: white; }
.copy-button--primary:hover:not(:disabled) { border-color: var(--orange-dark); background: #d95700; }
.copy-button--primary:disabled { border-color: #f1c9a8; color: #8b7564; background: #f6e9de; }
.copy-button--primary:disabled svg { stroke: #a99686; }

.copy-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-top: .8rem; }
.copy-button--wide { min-height: 46px; font-size: .94rem; }
.copy-button--wide svg { width: 22px; height: 22px; }
.copy-button--navy { border-color: var(--navy); color: white; background: linear-gradient(110deg, #18375e, #0e2341); }
.copy-button--navy svg { stroke: white; }
.copy-button--navy:disabled { border-color: #9ba9bd; color: #e5eaf1; background: #7e8da2; }
.copy-button--navy:disabled svg { stroke: #e5eaf1; }
.copy-status { min-height: 1.25em; margin: .5rem .2rem 0; color: #315b38; font-size: .84rem; }

.side-column { display: grid; gap: .75rem; }
.steps-card { padding: 1.05rem 1.1rem; border-color: rgba(238, 106, 0, .14); background: linear-gradient(145deg, #fffaf4, #fff3e7); }
.steps-card h2, .contact-card h2 { margin: 0; color: var(--navy); font-size: 1.12rem; letter-spacing: -.02em; }
.steps-list { display: grid; gap: .68rem; margin: .85rem 0 0; padding: 0; list-style: none; }
.steps-list li { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: .6rem; color: var(--navy); font-size: .93rem; font-weight: 610; line-height: 1.3; }
.step-number { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: #fff; background: var(--orange); box-shadow: 0 3px 8px rgba(230, 98, 0, .2); font-size: 1rem; font-weight: 800; }
.trust-card { display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; background: linear-gradient(105deg, #edf4ff, #e8f0fb); box-shadow: none; }
.trust-icon { display: grid; flex: 0 0 auto; width: 44px; height: 44px; place-items: center; color: var(--navy); }
.trust-icon svg { width: 37px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.trust-card h2 { margin: 0; color: var(--navy); font-size: .98rem; }
.trust-card p { margin: .22rem 0 0; color: #384c68; font-size: .86rem; line-height: 1.35; }
.contact-card { padding: .9rem 1rem; }
.contact-card[hidden] { display: none; }
.contact-card p { margin: .28rem 0 .65rem; color: var(--muted); font-size: .9rem; }
.contact-links { display: flex; flex-wrap: wrap; gap: .4rem; }
.contact-link { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .6rem; border-radius: 9px; color: var(--navy); background: #f3f6fa; font-size: .84rem; font-weight: 650; text-decoration: none; }
.contact-link svg { width: 17px; height: 17px; stroke: var(--orange); stroke-width: 1.8; }

.site-footer { display: flex; justify-content: space-between; gap: 1rem; width: min(1160px, 100%); margin: 0 auto; padding: .65rem clamp(.85rem, 2vw, 1.8rem) 1.1rem; color: #637188; font-size: .8rem; }

@media (max-width: 850px) {
  .hero-banner { width: calc(100% - 2rem); height: clamp(190px, 24vw, 205px); border-radius: 22px; }
  .hero-brand { left: 1.25rem; }
  .hero-content { left: 1.25rem; max-width: 42%; }
  .hero-copy h1 { font-size: clamp(1.6rem, 3.5vw, 2.25rem); }
  .content-grid { grid-template-columns: minmax(0, 1fr); max-width: 780px; }
  .side-column { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .steps-card { grid-row: span 2; }
  .trust-card { align-items: flex-start; }
}

@media (max-width: 590px) {
  .hero-banner { height: clamp(160px, 43vw, 170px); border-radius: 18px; }
  .hero-banner::before { background: linear-gradient(90deg, rgba(8, 24, 49, .34) 0%, rgba(8, 24, 49, .18) 43%, rgba(8, 24, 49, .02) 66%); }
  .hero-brand { top: .65rem; left: .75rem; gap: .4rem; font-size: .92rem; }
  .hero-brand img { width: 32px; height: 32px; }
  .hero-image { object-position: 68% 52%; }
  .hero-content { bottom: .55rem; left: .75rem; align-items: flex-start; max-width: 43%; gap: 0; }
  .hero-icon { display: none; }
  .hero-copy h1 { max-width: 12ch; font-size: clamp(1.1rem, 4.8vw, 1.4rem); line-height: 1.04; letter-spacing: -.045em; }
  .hero-copy p { max-width: 19ch; margin-top: .25rem; font-size: clamp(.66rem, 2.8vw, .78rem); line-height: 1.16; }
  .content-grid { gap: .7rem; padding: .3rem 1rem 1.1rem; }
  .account-card { padding: .82rem; border-radius: 17px; }
  .account-intro { align-items: flex-start; gap: .65rem; margin-bottom: .75rem; }
  .intro-icon { width: 46px; height: 46px; border-radius: 13px; }
  .intro-icon svg { width: 30px; }
  .account-intro h2 { font-size: 1.12rem; }
  .account-intro p { margin-top: .25rem; font-size: .84rem; line-height: 1.3; }
  .configuration-notice { margin-bottom: .65rem; padding: .55rem .7rem; font-size: .82rem; }
  .account-fields { gap: .5rem; }
  .account-field, .account-field--clabe { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: .3rem .55rem; min-height: 0; padding: .6rem; border-radius: 12px; }
  .account-field--clabe { border-width: 1.5px; }
  .field-icon { grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 11px; }
  .field-icon svg { width: 22px; }
  .field-copy dt { font-size: .78rem; }
  .field-copy dd { font-size: .98rem; }
  .field-copy .clabe-value { font-size: clamp(1rem, 5vw, 1.2rem); letter-spacing: .01em; }
  .field-copy .clabe-value.is-pending { font-size: .88rem; }
  .copy-button { min-height: 40px; padding: .48rem .65rem; font-size: .86rem; }
  .account-field .copy-button { grid-column: 2; justify-self: start; min-height: 40px; padding: .42rem .62rem; }
  .account-field .copy-button svg { width: 18px; height: 18px; }
  .copy-actions { grid-template-columns: minmax(0, 1fr); gap: .5rem; margin-top: .65rem; }
  .copy-button--wide { min-height: 44px; }
  .side-column { grid-template-columns: minmax(0, 1fr); gap: .65rem; }
  .steps-card { grid-row: auto; padding: .85rem .9rem; border-radius: 16px; }
  .steps-card h2, .contact-card h2 { font-size: 1.04rem; }
  .steps-list { gap: .55rem; margin-top: .7rem; }
  .steps-list li { grid-template-columns: 32px minmax(0, 1fr); gap: .5rem; font-size: .88rem; }
  .step-number { width: 30px; height: 30px; font-size: .92rem; }
  .trust-card { gap: .55rem; padding: .8rem; border-radius: 15px; }
  .trust-icon { width: 38px; height: 38px; }
  .trust-icon svg { width: 33px; }
  .trust-card h2 { font-size: .92rem; }
  .trust-card p { margin-top: .18rem; font-size: .82rem; }
  .contact-card { padding: .8rem; }
  .contact-card p { margin-bottom: .55rem; font-size: .84rem; }
  .site-footer { padding: .28rem 1rem .85rem; font-size: .74rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}