* {
     box-sizing: border-box;
     margin: 0;
     padding: 0
 }

 body {
     font-family: 'Nunito Sans', sans-serif;
     color: #1a1a1a;
     background: #fff;
     overflow-x: hidden
 }

 /* HERO */
 .hero {
     background: #0B1F38;
     min-height: 560px;
     position: relative;
     overflow: hidden;
     display:  block !important;
     grid-template-columns: 1fr 1fr;
     gap: 48px;
     align-items: center
 }

 .hbc1 {
     position: absolute;
     border-radius: 50%;
     width: 500px;
     height: 500px;
     top: -180px;
     right: -120px;
     background: radial-gradient(circle, rgba(245, 130, 31, 0.12), transparent 70%);
     pointer-events: none
 }

 .hbc2 {
     position: absolute;
     border-radius: 50%;
     width: 300px;
     height: 300px;
     bottom: -100px;
     left: 30%;
     background: radial-gradient(circle, rgba(245, 130, 31, 0.06), transparent 70%);
     pointer-events: none
 }

 .eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     margin-bottom: 24px
 }

 .eyebrow-dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: #F5821F;
     display: inline-block
 }

 .eyebrow-text {
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: #F5821F;
     font-family: 'Poppins', sans-serif
 }

 .hero h1 {
     font-family: 'Nunito', sans-serif;
     font-size: clamp(36px, 4.5vw, 56px);
     font-weight: 800;
     color: #fff;
     line-height: 1.05;
     margin-bottom: 20px
 }

 .hero h1 em {
     font-style: normal;
     color: #F5821F;
     display: block
 }

 .hero-desc {
     font-size: 16px;
     color: rgba(255, 255, 255, 0.62);
     line-height: 1.7;
     margin-bottom: 32px;
     max-width: 420px
 }

 .pills {
     display: flex;
     gap: 8px;
     flex-wrap: wrap;
     margin-bottom: 36px
 }

 .pill {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 6px 14px;
     border-radius: 100px;
     font-size: 12px;
     font-weight: 600;
     font-family: 'Poppins', sans-serif
 }

 .pill-y {
     background: rgba(31, 107, 138, 0.25);
     border: 1px solid rgba(31, 107, 138, 0.5);
     color: #5BC4E8
 }

 .pill-c {
     background: rgba(255, 149, 0, 0.2);
     border: 1px solid rgba(255, 149, 0, 0.45);
     color: #FF9500
 }

 .hero-btns {
     display: flex;
     gap: 12px;
     flex-wrap: wrap
 }

 .btn-primary {
     background: #F5821F;
     color: #fff;
     border: 2px solid #F5821F;
     padding: 13px 26px;
     border-radius: 8px;
     font-family: 'Nunito Sans', sans-serif;
     font-size: 14px;
     font-weight: 700;
     cursor: pointer;
     text-decoration: none;
     display: inline-block;
     transition: background .2s
 }

 .btn-primary:hover {
     background: #d96f18;
     border-color: #d96f18
 }

 .btn-ghost {
     background: transparent;
     color: #fff;
     border: 2px solid rgba(255, 255, 255, 0.55);
     padding: 13px 26px;
     border-radius: 8px;
     font-family: 'Nunito Sans', sans-serif;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     text-decoration: none;
     display: inline-block;
     transition: border-color .2s
 }

 .btn-ghost:hover {
     border-color: #fff
 }

 /* LOCKER VISUAL */
 .hero-right {
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
     z-index: 2
 }

 .locker-visual {
     background: rgba(255, 255, 255, 0.04);
     border: 1px solid rgba(255, 255, 255, 0.1);
     border-radius: 20px;
     padding: 32px 28px;
     width: 100%;
     max-width: 320px
 }

 .lv-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 24px
 }

 .lv-title {
     font-family: 'Nunito', sans-serif;
     font-size: 14px;
     font-weight: 700;
     color: #fff
 }

 .lv-badge {
     background: rgba(29, 158, 117, 0.2);
     border: 1px solid rgba(29, 158, 117, 0.4);
     color: #3DBFA0;
     font-size: 11px;
     font-weight: 600;
     padding: 4px 10px;
     border-radius: 20px;
     display: flex;
     align-items: center;
     gap: 5px
 }

 .lv-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: #3DBFA0;
     display: inline-block
 }

 .locker-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 8px;
     margin-bottom: 20px
 }

 .locker-unit {
     background: rgba(255, 255, 255, 0.06);
     border: 1px solid rgba(255, 255, 255, 0.08);
     border-radius: 10px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }

 .locker-unit.open {
     background: rgba(245, 130, 31, 0.15);
     border-color: rgba(245, 130, 31, 0.4)
 }

 .lu-icon {
     font-size: 20px;
     line-height: 1
 }

 .lu-label {
     font-size: 9px;
     color: rgba(255, 255, 255, 0.4);
     font-weight: 500
 }

 .locker-unit.open .lu-label {
     color: #F5821F
 }

 .lv-notify {
     background: rgba(245, 130, 31, 0.1);
     border: 1px solid rgba(245, 130, 31, 0.2);
     border-radius: 10px;
     padding: 12px 14px;
     display: flex;
     align-items: flex-start;
     gap: 10px
 }

 .lv-notify-icon {
     width: 28px;
     height: 28px;
     background: #F5821F;
     border-radius: 6px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0
 }

 .lv-notify-icon svg {
     width: 14px;
     height: 14px
 }

 .lv-notify-title {
     font-size: 12px;
     font-weight: 600;
     color: #fff;
     margin-bottom: 2px
 }

 .lv-notify-sub {
     font-size: 11px;
     color: rgba(255, 255, 255, 0.5)
 }

 /* STATS BAR */
 .stats-bar {
     background: #F5821F;
     padding: 22px 64px;
     display: flex !important;
     grid-template-columns: repeat(4, 1fr)
 }

 .stat-item {
     text-align: center;
     padding: 0 16px;
     position: relative
 }

 .stat-item+.stat-item::before {
     content: '';
     position: absolute;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
     height: 32px;
     width: 1px;
     background: rgba(255, 255, 255, 0.3)
 }

 .stat-num {
     font-family: 'Nunito', sans-serif;
     font-size: 28px;
     font-weight: 800;
     color: #fff;
     line-height: 1
 }

 .stat-lbl {
     font-size: 12px;
     color: rgba(255, 255, 255, 0.85);
     margin-top: 4px;
     font-weight: 500
 }

 /* SECTIONS */

 .sec-alt {
     background: #f7f7f5
 }

 .sec-tag {
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: #F5821F;
     margin-bottom: 10px;
     font-family: 'Poppins', sans-serif
 }

 .sec h2 {
     font-family: 'Nunito', sans-serif;
     font-size: clamp(26px, 3vw, 38px);
     font-weight: 800;
     line-height: 1.15;
     margin-bottom: 14px;
     color: #0B1F38
 }

 .sec-lead {
     font-size: 16px;
     color: #666;
     line-height: 1.7;
     max-width: 560px;
     margin-bottom: 52px
 }


 .svc-card {
     padding: 40px 36px;
     border-radius: 16px;
     position: relative;
     overflow: hidden
 }

 .svc-card.yb {
     background: #1B6B8A
 }

 .svc-card.cy {
     background: #FF9500
 }

 .svc-chip {
     display: inline-flex;
     align-items: center;
     padding: 4px 12px;
     border-radius: 20px;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     margin-bottom: 16px;
     font-family: 'Poppins', sans-serif
 }

 .svc-card.yb .svc-chip {
     background: rgba(255, 255, 255, 0.15);
     color: #fff
 }

 .svc-card.cy .svc-chip {
     background: rgba(0, 0, 0, 0.12);
     color: #5A2D00
 }

 .svc-card h3 {
     font-family: 'Nunito', sans-serif;
     font-size: 28px;
     font-weight: 800;
     margin-bottom: 10px;
     line-height: 1.1;
     color: #fff
 }

 .svc-desc {
     font-size: 14px;
     line-height: 1.65;
     margin-bottom: 28px;
     padding-bottom: 24px
 }

 .svc-card.yb .svc-desc {
     color: rgba(255, 255, 255, 0.75);
     border-bottom: 1px solid rgba(255, 255, 255, 0.15)
 }

 .svc-card.cy .svc-desc {
     color: rgba(255, 255, 255, 0.88);
     border-bottom: 1px solid rgba(0, 0, 0, 0.12)
 }

 .svc-steps {
     display: flex;
     flex-direction: column;
     gap: 10px
 }

 .svc-step {
     display: flex;
     align-items: flex-start;
     gap: 10px
 }

 .svc-step-n {
     width: 22px;
     height: 22px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 10px;
     font-weight: 700;
     flex-shrink: 0;
     margin-top: 1px
 }

 .svc-card.yb .svc-step-n {
     background: rgba(255, 255, 255, 0.2);
     color: #fff
 }

 .svc-card.cy .svc-step-n {
     background: rgba(0, 0, 0, 0.15);
     color: #5A2D00
 }

 .svc-step-text {
     font-size: 13px;
     line-height: 1.5
 }

 .svc-card.yb .svc-step-text {
     color: rgba(255, 255, 255, 0.7)
 }

 .svc-card.cy .svc-step-text {
     color: rgba(255, 255, 255, 0.88)
 }

 .svc-cta {
     display: inline-block;
     margin-top: 28px;
     padding: 11px 22px;
     border-radius: 8px;
     font-family: 'Nunito Sans', sans-serif;
     font-size: 13px;
     font-weight: 700;
     cursor: pointer;
     border: 2px solid;
     text-decoration: none;
     transition: all .15s
 }

 .svc-card.yb .svc-cta {
     background: transparent;
     color: #fff;
     border-color: rgba(255, 255, 255, 0.6)
 }

 .svc-card.yb .svc-cta:hover {
     background: #fff;
     color: #1B6B8A;
     border-color: #fff
 }

 .svc-card.cy .svc-cta {
     background: #fff;
     color: #5A2D00;
     border-color: #fff
 }

 .svc-card.cy .svc-cta:hover {
     background: rgba(255, 255, 255, 0.85)
 }

 /* BENEFICIOS */

 .ben-card {
     background: #fff;
     border: 0.5px solid #e5e5e5;
     border-radius: 14px;
     padding: 30px 26px;
     transition: border-color .2s
 }

 .ben-card:hover {
     border-color: rgba(245, 130, 31, 0.4)
 }

 .ben-icon {
     width: 48px;
     height: 48px;
     border-radius: 12px;
     background: #F5821F;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 18px
 }

 .ben-icon svg {
     width: 22px;
     height: 22px;
     stroke: #fff;
     fill: none;
     stroke-width: 2;
     stroke-linecap: round;
     stroke-linejoin: round
 }

 .ben-card h3 {
     font-family: 'Nunito', sans-serif;
     font-size: 16px;
     font-weight: 700;
     margin-bottom: 8px;
     color: #0B1F38
 }

 .ben-card p {
     font-size: 13px;
     color: #666;
     line-height: 1.65
 }

 /* CÓMO FUNCIONA */
 .how-wrap {
     position: relative
 }

 .how-line {
     position: absolute;
     top: 27px;
     left: 28px;
     right: 28px;
     height: 1px;
     background: #e5e5e5;
     z-index: 0
 }


 .how-step {
     padding: 0 20px 0 0
 }

 .how-num {
     width: 56px;
     height: 56px;
     border-radius: 50%;
     background: #0B1F38;
     color: #fff;
     font-family: 'Nunito', sans-serif;
     font-size: 20px;
     font-weight: 800;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 20px;
     border: 3px solid #f7f7f5
 }

 .how-step h3 {
     font-family: 'Nunito', sans-serif;
     font-size: 15px;
     font-weight: 700;
     margin-bottom: 8px;
     color: #0B1F38
 }

 .how-step p {
     font-size: 13px;
     color: #666;
     line-height: 1.6
 }

 .how-tags {
     display: flex;
     flex-direction: column;
     gap: 4px;
     margin-top: 10px
 }

 .how-tag {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     font-size: 11px;
     font-weight: 600
 }

 .how-tag.y {
     color: #1B6B8A
 }

 .how-tag.c {
     color: #cc7800
 }

 /* UBICACIONES */
 .loc-header {
     display: flex;
     align-items: flex-end;
     justify-content: space-between;
     gap: 16px;
     margin-bottom: 32px;
     flex-wrap: wrap
 }

 .filter-row {
     display: flex;
     gap: 8px;
     flex-wrap: wrap
 }

 .fbtn {
     padding: 7px 16px;
     border-radius: 100px;
     border: 1.5px solid #ccc;
     background: #fff;
     color: #666;
     font-family: 'Nunito Sans', sans-serif;
     font-size: 12px;
     font-weight: 600;
     cursor: pointer;
     transition: all .15s
 }

 .fbtn.on,
 .fbtn:hover {
     background: #0B1F38;
     color: #fff;
     border-color: #0B1F38
 }

 .loc-card {
     background: #fff;
     border: 0.5px solid #e5e5e5;
     border-radius: 12px;
     padding: 20px;
     display: flex;
     flex-direction: column;
     transition: all .2s
 }

 .loc-card:hover {
     border-color: #F5821F;
     transform: translateY(-2px)
 }

 .loc-name {
     font-family: 'Nunito', sans-serif;
     font-size: 13px;
     font-weight: 700;
     margin-bottom: 4px;
     color: #0B1F38
 }

 .loc-addr {
     font-size: 11px;
     color: #888;
     line-height: 1.5;
     margin-bottom: 12px
 }

 .loc-footer {
     display: flex;
     align-items: center;
     justify-content: space-between
 }

 .loc-zone {
     font-size: 10px;
     font-weight: 600;
     background: rgba(11, 31, 56, 0.08);
     color: #0B1F38;
     padding: 3px 10px;
     border-radius: 10px
 }

 .loc-status {
     display: flex;
     align-items: center;
     gap: 4px;
     font-size: 10px;
     color: #1D9E75;
     font-weight: 600
 }

 .loc-dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: #1D9E75;
     display: inline-block
 }

 .loc-btn {
     margin-top: 14px;
     width: 100%;
     padding: 9px;
     background: #0B1F38;
     color: #fff;
     border: 2px solid #0B1F38;
     border-radius: 8px;
     font-family: 'Nunito Sans', sans-serif;
     font-size: 12px;
     font-weight: 700;
     cursor: pointer;
     transition: all .15s
 }

 .loc-btn:hover {
     background: #F5821F;
     border-color: #F5821F
 }

 .loc-more {
     text-align: center;
     margin-top: 28px
 }

 /* CTA FINAL */
 .cta-final {
     background: #0B1F38;
     padding: 88px 64px;
     text-align: center;
     position: relative;
     overflow: hidden
 }

 .cta-final::before {
     content: '';
     position: absolute;
     inset: 0;
     background: radial-gradient(ellipse at 50% 0%, rgba(245, 130, 31, 0.1), transparent 60%)
 }

 .cta-final h2 {
     font-family: 'Nunito', sans-serif;
     font-size: clamp(28px, 4vw, 46px);
     font-weight: 800;
     color: #fff;
     margin-bottom: 14px;
     line-height: 1.1;
     position: relative
 }

 .cta-final h2 span {
     color: #F5821F
 }

 .cta-final>p {
     font-size: 16px;
     color: rgba(255, 255, 255, 0.6);
     margin-bottom: 40px;
     position: relative
 }

 .cta-card {
     border-radius: 14px;
     padding: 26px 24px;
     text-align: left
 }

 .cta-card.yb {
     background: rgba(27, 107, 138, 0.2);
     border: 1.5px solid rgba(27, 107, 138, 0.5)
 }

 .cta-card.cy {
     background: rgba(255, 149, 0, 0.15);
     border: 1.5px solid rgba(255, 149, 0, 0.45)
 }

 .cta-card-lbl {
     font-size: 10px;
     font-weight: 700;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     margin-bottom: 6px;
     font-family: 'Poppins', sans-serif
 }

 .cta-card.yb .cta-card-lbl {
     color: #5BC4E8
 }

 .cta-card.cy .cta-card-lbl {
     color: #FF9500
 }

 .cta-card p {
     font-size: 13px;
     color: rgba(255, 255, 255, 0.6);
     line-height: 1.55;
     margin-bottom: 16px
 }

 .cta-card-btn {
     width: 100%;
     padding: 12px;
     border: none;
     border-radius: 8px;
     font-family: 'Nunito Sans', sans-serif;
     font-size: 13px;
     font-weight: 700;
     cursor: pointer;
     transition: opacity .15s
 }

 .cta-card-btn:hover {
     opacity: .88
 }

 .cta-card.yb .cta-card-btn {
     background: #1B6B8A;
     color: #fff
 }

 .cta-card.cy .cta-card-btn {
     background: #FF9500;
     color: #fff
 }

 .btn-ghost-white {
     background: transparent;
     color: rgba(255, 255, 255, 0.7);
     border: 2px solid rgba(255, 255, 255, 0.35);
     padding: 13px 26px;
     border-radius: 8px;
     font-family: 'Nunito Sans', sans-serif;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     transition: all .2s;
     position: relative
 }

 .btn-ghost-white:hover {
     border-color: #fff;
     color: #fff
 }

 .divider {
     height: 0.5px;
     background: #e5e5e5;
     margin: 0 64px
 }