@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&family=Oswald:wght@400;600&display=swap');

:root{
    --bg: #f0f2f2;
    --primary: #00a1d5;
    --secondary: #2d2f77;
    --accent: #2d2f77;
}

*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg)}
html{scroll-behavior:smooth}
ul,li{list-style:none}
h1,h2,h3{font-family:'Oswald',sans-serif;font-weight:500;color:#000}
p{font-family:'Open Sans',sans-serif;color:#111}

#x9a2b{width:100%;max-width:1400px;margin:auto;padding:0 10px}
#h4c7d{width:100%;position:fixed;top:0;left:0;background:#e5e0e0;z-index:10}
#n1e5f{width:100%;padding:10px;max-width:1400px;margin:auto;display:flex;justify-content:space-between;align-items:center}
.a3g8h{display:flex;align-items:center;gap:5px}
.a3g8h img{width:45px;height:45px;object-fit:cover}
.a3g8h:last-child p{font-size:13px;font-family:'Oswald';user-select:none;display:flex;align-items:center;gap:5px}
.b7i2j{font-size:30px;font-weight:900}
.c5k9l{display:flex;align-items:center;gap:20px;padding-left:30px;list-style:none}
.d8m3n{position:relative}
.d8m3n a{text-decoration:none;color:#666;font-family:'Open Sans';display:flex;gap:5px;align-items:center;font-size:13px;font-weight:500;padding:10px 5px}
.d8m3n a:hover{color:var(--secondary)}
.f1q6r{height:0;overflow:hidden;display:flex;flex-direction:column;position:absolute;top:100%;z-index:10}
.e4o7p:hover .f1q6r{height:fit-content;min-width:100px}
.f1q6r a{padding:10px;width:100%;display:flex;justify-content:center;align-items:center;background:#eee}
.f1q6r a:hover{background:#ddd}

#m2s8t{width:100%}
.u5v1w{width:100%;display:flex;justify-content:center;align-items:center;gap:30px;padding-top:100px;flex-wrap:wrap}
.b2c6d{font-weight:700;font-size:30px;text-transform:uppercase;color:#222;margin-bottom:25px}
.e7f1g{font-size:43px;color:var(--secondary)}
.h3i5j{font-size:17px;text-transform:uppercase;color:var(--secondary)}
.k8l2m{padding:15px;border-radius:5px;background:var(--secondary);color:#fff;font-family:'Open Sans';text-decoration:none;font-size:15px;text-transform:uppercase}
.k8l2m:hover{box-shadow:0 0 3px var(--secondary)}
.y9z4a img{width:500px;object-fit:cover;border-radius:50px;background:#fff}
.y9z4a{position:relative}

.d5e7f{width:100%;display:flex;align-items:center;justify-content:space-around;gap:30px;padding:20px;flex-wrap:wrap-reverse}
.g1h3i img{width:600px;object-fit:cover;border-radius:50px;background:#fff}
.j4k6l{font-size:20px;font-weight:600;font-family:'Open Sans';color:#555}
.m7n9o{font-size:25px;text-transform:uppercase;position:relative}
.m7n9o:before{content:'';width:150px;position:absolute;height:4px;background:var(--secondary);bottom:-10px;border-radius:2px}
.p2q4r{padding:15px;border-radius:5px;background:var(--secondary);color:#fff;text-transform:uppercase;font-family:'Open Sans';font-weight:400;text-decoration:none}

.n4o8p{width:70px!important;object-fit:cover!important;border-radius:10px!important;box-shadow:0 0 3px #0005;position:absolute;min-height:30px}
.q1r5s{top:15px;left:40px;transform:rotateZ(-25deg)}
.t6u2v{bottom:50px;right:40px}
.w3x7y{top:50px;right:40px}
.z1a9b{bottom:50px;left:80px}

.c2d4e{width:100%;display:flex;flex-direction:column;align-items:center;gap:20px;min-height:50vh;padding:20px}
.f6g8h{font-size:40px;text-transform:uppercase;text-align:center;color:var(--secondary)}
.i1j3k{background:#fff;border-radius:30px;display:flex;gap:30px;padding:10px;height:100%;flex-wrap:wrap}
.l5m7n{flex:1;display:flex;flex-direction:column;gap:30px}
.o9p1q{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.o9p1q p:first-child{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--secondary);color:#fff}
.o9p1q p{white-space:nowrap;color:#000;font-weight:700;text-transform:uppercase;margin-top:30px}
.u6v8w{margin:0 10px;width:3px;height:80%;background:#000;min-height:100px;margin:auto 30px;border-radius:50px;opacity:.5}
.r2s4t img{width:280px;object-fit:contain;height:100%}
.x3y5z{width:100%;display:flex;justify-content:center;align-items:center;padding:10px}
.a1b4c{padding:15px;border-radius:10px;background:var(--secondary);color:#fff;text-decoration:none;text-transform:uppercase;font-family:'Open Sans'}

#f8s2t p{font-size:12px;font-family:'Oswald';font-weight:400;display:flex;align-items:center;gap:10px}

/* ESTILOS PARA EL FORMULARIO DE RECARGA */
.recarga-container {
    max-width: 600px;
    margin: 50px auto;
    padding: 20px;
    font-family: 'Open Sans', sans-serif;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.recarga--title {
    text-align: center;
    font-size: 24px;
    color: var(--secondary);
    margin-bottom: 30px;
}
.recarga__item--empresa {
    display: flex;
    justify-content: space-around;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}
.recarga__item {
    flex: 1;
    min-width: 120px;
    text-align: center;
    padding: 15px;
    border: 2px solid #eee;
    border-radius: 15px;
    cursor: pointer;
    transition: 0.3s;
}
.recarga__item:hover {
    border-color: var(--primary);
    background: #f9f9f9;
}
.recarga__item h2 {
    font-size: 16px;
    margin-bottom: 10px;
}
.recarga__item--img {
    width: 60px !important;
    height: 60px !important;
    object-fit: contain !important;
    margin: 0 auto;
}
.recarga__item-active {
    border-color: var(--primary) !important;
    background: #eefbff !important;
    box-shadow: 0 0 10px rgba(0,161,213,0.3);
}
.select-container {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.select-container label {
    font-weight: 600;
    font-size: 14px;
    color: #555;
}
.form-control {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
}
.form__card {
    width: 350px;
    margin: 20px auto;
    background: linear-gradient(135deg, var(--secondary), #1a1b4d);
    border-radius: 15px;
    padding: 25px;
    color: #fff;
    position: relative;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}
.form__card--background {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
    border-radius: 15px;
}
.form__card--img {
    text-align: right;
}
.form__card--img img {
    width: 50px;
}
.form__card--number {
    display: flex;
    justify-content: space-between;
    margin: 30px 0;
    font-family: 'Courier New', Courier, monospace;
    font-size: 18px;
    letter-spacing: 2px;
}
.form__card--number-4 {
    background: rgba(255,255,255,0.2);
    padding: 5px 10px;
    border-radius: 4px;
}
.form__card--expire, .form__card--name {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 12px;
}
.form__data {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}
.form__item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.item-doble {
    display: flex;
    gap: 10px;
}
.form__subitem {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.form__subitem div {
    display: flex;
    gap: 5px;
}
.form__subitem input {
    width: 50%;
}
button[type="submit"] {
    width: 100%;
    padding: 15px;
    background: var(--secondary);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 20px;
}
button[type="submit"]:hover {
    background: #1a1b4d;
    transform: translateY(-2px);
}

@media (max-width:600px){
    .recarga-container { width: 95%; padding: 10px; }
    .form__card { width: 100%; }
    .item-doble { flex-direction: column; }
}

#f8s2t{padding:15px;width:100%;background:#fff;display:flex;justify-content:space-between;align-items:center}
#f8s2t p{font-size:12px;font-family:'Oswald';font-weight:400;display:flex;align-items:center;gap:10px}

@media (max-width:1187px){
    .u6v8w{display:none}
    .i1j3k{justify-content:center}
    .l5m7n{align-items:center;text-align:center}
    .y9z4a{text-align:center}
    .g1h3i{text-align:center}
    .h3i5j{text-align:center;justify-content:center}
}
@media (max-width:630px){
    .g1h3i img{width:90%}
    .c2d4e{padding:0;margin-top:50px;margin-bottom:50px}
    .y9z4a img{width:90%}
    .b2c6d{font-size:25px}
    .n4o8p{width:40px!important}
}
@media (max-width:560px){
    .a3g8h:last-child{display:none}
    .c5k9l{padding-left:10px;gap:10px}
    .b7i2j{font-size:20px}
    .a3g8h img{width:20px;height:20px}
    #f8s2t p{font-size:8px;font-family:'Open Sans'}
    .a1b4c{text-align:center;font-size:15px}
}