@font-face { font-family:'Poppins'; font-style:normal; font-weight:300; font-display:swap; src:url('fonts/poppins-300.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/poppins-500.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/poppins-600.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/poppins-700.woff2') format('woff2'); }
@font-face { font-family:'Poppins'; font-style:normal; font-weight:800; font-display:swap; src:url('fonts/poppins-800.woff2') format('woff2'); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #071d44; }
a { color: #f28c28; text-decoration: none; }
a:hover { color: #ffa650; }

@keyframes rbmSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
@keyframes rbmPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

body {
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #fff;
  background: radial-gradient(120% 90% at 85% 20%, #0d3f86 0%, #0a2d63 40%, #071d44 100%);
  display: flex;
  flex-direction: column;
  position: relative;
}

.dots-bg {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0,0,0,.6) 45%, transparent 75%);
  mask-image: linear-gradient(100deg, #000 0%, rgba(0,0,0,.6) 45%, transparent 75%);
  pointer-events: none;
}

.corner-tri {
  position: absolute; top: 0; right: 0;
  width: clamp(90px, 14vw, 190px); height: clamp(90px, 14vw, 190px);
  background: #f28c28;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.corner-shine {
  position: absolute; right: 0; bottom: 0; width: 55vw; height: 70vh;
  background: linear-gradient(135deg, transparent 50%, rgba(255,255,255,.035) 50%);
  pointer-events: none;
}

header { position: relative; z-index: 2; padding: clamp(24px,4vw,48px) clamp(24px,6vw,80px); }
.brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.brand-row { display: flex; align-items: flex-end; gap: 8px; }
.brand-grupo {
  writing-mode: vertical-rl; transform: rotate(180deg);
  color: #f28c28; font-weight: 600; font-size: 11px; letter-spacing: .32em; line-height: 1; padding-bottom: 6px;
}
.brand-rbm { position: relative; font-weight: 800; font-size: clamp(46px,5vw,64px); line-height: .85; letter-spacing: -.03em; }
.brand-rbm .tri { position: absolute; top: -2px; right: -20px; width: 20px; height: 20px; background: #f28c28; clip-path: polygon(0 0,100% 0,100% 100%); }
.brand-sub { font-size: clamp(9px,.9vw,11px); letter-spacing: .34em; font-weight: 500; color: #c9d6ee; padding-left: 22px; }

main { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; padding: clamp(16px,3vw,32px) clamp(24px,6vw,80px) clamp(48px,6vw,80px); }
.main-inner { max-width: 760px; display: flex; flex-direction: column; gap: 28px; }

.badge {
  display: inline-flex; align-items: center; gap: 12px; align-self: flex-start;
  padding: 8px 16px 8px 12px; border: 1px solid rgba(242,140,40,.55); border-radius: 999px;
  background: rgba(242,140,40,.08);
}
.badge-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #f28c28;
  box-shadow: 0 0 0 4px rgba(242,140,40,.2); display: block;
  animation: rbmPulse 1.6s ease-in-out infinite;
}
.badge span { font-size: 12px; font-weight: 600; letter-spacing: .2em; color: #f7a24f; }

h1 { margin: 0; font-weight: 700; font-size: clamp(34px,5.4vw,68px); line-height: 1.06; letter-spacing: -.025em; }
h1 .accent { color: #f28c28; }

.lead { margin: 0; font-weight: 300; font-size: clamp(17px,1.6vw,21px); line-height: 1.6; color: #d4def0; max-width: 600px; }
.lead strong { font-weight: 600; color: #fff; }

.progress-wrap { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.progress-track { position: relative; height: 4px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.progress-bar {
  position: absolute; top: 0; left: 0; height: 100%; width: 30%; border-radius: 4px;
  background: linear-gradient(90deg, transparent, #f28c28, transparent);
  animation: rbmSlide 1.8s ease-in-out infinite;
}
.progress-note { font-size: 13px; color: #9fb2d6; letter-spacing: .04em; }

footer {
  position: relative; z-index: 2; display: flex; flex-direction: column; gap: 28px;
  padding: 36px clamp(24px,6vw,80px) 28px; font-size: 13px; line-height: 1.6; color: #9fb2d6;
  border-top: 1px solid rgba(255,255,255,.08); background: rgba(4,18,44,.45);
}
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.footer-top .label { font-size: 12px; font-weight: 600; letter-spacing: .2em; color: #f7a24f; }
.footer-top a { display: inline-flex; align-items: center; gap: 10px; color: #fff; font-weight: 500; font-size: 14px; }
.wa-dot { width: 8px; height: 8px; border-radius: 50%; background: #25d366; display: block; }

.units { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 24px 32px; }
.units div { display: flex; flex-direction: column; gap: 4px; }
.units strong { color: #fff; font-weight: 600; font-size: 14px; }

.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); font-size: 12px;
}

.wa-float {
  position: fixed; right: 24px; bottom: 24px; z-index: 10;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 22px 14px 18px; border-radius: 999px;
  background: #25d366; color: #fff; font-weight: 600; font-size: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transition: background .15s ease;
}
.wa-float:hover { background: #1ebe5b; color: #fff; }
.wa-float-dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; display: block; }

.bottom-bar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, #c9761f, #f28c28, #c9761f);
  z-index: 5;
}

@media (max-width: 520px) {
  .wa-float span.label-text { display: none; }
  .wa-float { padding: 14px; }
}