* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", Arial, sans-serif; background: #eaf3ff; color: #1d2f45; }
a { color: inherit; text-decoration: none; }
.topbar { height: 48px; background: #061727; color: white; display: flex; align-items: center; padding: 0 18px; gap: 24px; position: sticky; top: 0; z-index: 10; }
.brand, .footer-logo { font-weight: 800; font-size: 22px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.play { width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 13px solid #2bb7ff; display: inline-block; }
.nav { margin-left: auto; display: flex; gap: 22px; font-size: 14px; }
.menu-btn { display: none; margin-left: auto; background: none; border: 0; color: white; font-size: 25px; }
.hero { min-height: 245px; padding: 38px 16px 0; position: relative; overflow: hidden; background: linear-gradient(120deg, #55a9ff, #174f93); }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.22), transparent 30%), linear-gradient(135deg, transparent 35%, rgba(255,255,255,.13)); }
.hero h1 { position: relative; text-align: center; color: white; font-size: clamp(25px, 4vw, 38px); font-weight: 300; letter-spacing: 14px; margin: 0 0 34px; }
.steps { position: relative; max-width: 970px; margin: auto; display: grid; grid-template-columns: 1fr 1fr; background: rgba(255,255,255,.18); backdrop-filter: blur(3px); }
.step { color: rgba(255,255,255,.75); padding: 24px; display: flex; align-items: center; justify-content: center; gap: 14px; border-bottom: 4px solid transparent; }
.step span { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; color: white; }
.step.active { background: rgba(255,255,255,.23); border-bottom-color: #32c26b; color: white; }
.step.active span { background: white; color: #285a91; }
.step.done { background: rgba(58,190,105,.78); color: white; }
.step.done span { background: #48d56f; color: white; }
.checkout { max-width: 970px; margin: -28px auto 56px; padding: 0 16px; display: grid; grid-template-columns: 1.35fr .95fr; gap: 20px; position: relative; }
.card { background: white; border-radius: 5px; padding: 25px; box-shadow: 0 6px 22px rgba(0,0,0,.12); }
.panel { display: none; }
.active-panel { display: block; }
h2 { color: #0a4c84; margin: 0 0 20px; font-size: 22px; }
h3 { text-transform: uppercase; letter-spacing: 2px; color: #9aa7b8; font-size: 15px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 16px; }
input, select { width: 100%; height: 48px; border: 1px solid #c9cfd8; border-radius: 3px; padding: 0 14px; font-size: 14px; color: #333; background: white; }
.search-field { display: flex; }
.search-field input { border-right: 0; border-radius: 3px 0 0 3px; }
.search-field button { width: 48px; border: 1px solid #c9cfd8; background: white; border-radius: 0 3px 3px 0; font-size: 20px; }
.gender { border: 1px solid #c9cfd8; border-radius: 3px; display: flex; gap: 10px; align-items: center; padding: 6px 10px 8px; margin: 0; color: #777; font-size: 13px; }
.gender legend { padding: 0 6px; color: #9aa0aa; font-size: 12px; }
.gender input, .check input { width: auto; height: auto; }
.phone-row { display: grid; grid-template-columns: 1fr .8fr 1fr; gap: 16px; }
hr { border: 0; border-top: 1px solid #e4e7ec; margin: 24px 0; }
.next-btn, .pay-btn, .back-btn, .back-link { width: 100%; height: 52px; border-radius: 8px; font-size: 15px; cursor: pointer; margin-top: 10px; }
.next-btn { border: 0; background: #6d80d8; color: white; }
.pay-btn { border: 0; background: #55c777; color: white; font-weight: 700; }
.back-btn, .back-link { border: 1px solid #9aa7c2; background: white; color: #6b7aa5; display: grid; place-items: center; }
.tag { background: #6d80d8; color: white; padding: 6px 12px; font-size: 12px; font-weight: 700; }
.summary-card p { font-size: 14px; line-height: 1.5; }
.line { display: flex; justify-content: space-between; gap: 12px; color: #23506f; font-size: 14px; margin: 20px 0 10px; }
.summary-card small { color: #777; }
.total { margin-top: 22px; background: #6d80d8; color: white; border-radius: 6px; padding: 16px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 6px 14px rgba(109,128,216,.35); }
.total span { display: block; font-weight: 700; }
.total small { color: white; opacity: .85; }
.notice { background: #eaf3ff; border-left: 5px solid #0a67ad; color: #1f5682; padding: 12px 14px; font-size: 13px; margin-bottom: 20px; }
.fake-card { width: min(360px, 100%); height: 210px; margin: 10px auto 28px; background: linear-gradient(135deg, #9199a3, #737b85); border-radius: 12px; padding: 34px 24px; color: white; box-shadow: 0 14px 25px rgba(0,0,0,.18); }
.chip { width: 42px; height: 32px; border-radius: 6px; background: linear-gradient(135deg, #fff3bd, #d8bd71); margin-bottom: 30px; }
.card-numbers { font-size: 24px; letter-spacing: 3px; margin-bottom: 24px; }
.card-bottom { display: flex; justify-content: space-between; font-size: 13px; opacity: .95; }
.check { display: flex; gap: 8px; align-items: center; color: #53657c; font-size: 13px; }
.footer { background: #061727; color: white; text-align: center; padding: 34px 16px 50px; }
.footer p, .footer a { display: block; color: #c9d1dc; font-size: 14px; margin: 9px 0; }
.footer h4 { color: #28aef0; margin: 22px 0 10px; }
@media (max-width: 760px) {
  .nav { display: none; position: absolute; top: 48px; left: 0; right: 0; background: #061727; padding: 16px; flex-direction: column; }
  .nav.open { display: flex; }
  .menu-btn { display: block; }
  .hero h1 { letter-spacing: 7px; }
  .steps, .checkout, .grid-2, .grid-3, .phone-row { grid-template-columns: 1fr; }
  .step { justify-content: flex-start; }
  .checkout { margin-top: -18px; }
}
.header-mobile{
    background:#061727;   /* Azul */
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:sticky;
    top:0;
    z-index:1000;
}

.hamburger-button{
    position:absolute;
    left:18px;
    display:flex;
    align-items:center;
    height:100%;
    cursor:pointer;
}

.hamburger-slices-container{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.hamburger-slice{
    width:22px;
    height:2px;
    background:#fff;
    border-radius:2px;
}

.logo img{
    display:block;
    height:32px;
    width:auto;
}
.checkout{
    max-width:1200px;
    width:100%;
    margin:40px auto;
    padding:0 20px;
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:30px;
    align-items:start;
}
.card{
    background:#fff;
    border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
    padding:32px;
}

.form-card{
    width:100%;
}

.summary-card{
    position:sticky;
    top:90px;
}
.hero{
    background:#061727;
    padding:45px 20px;
}

.hero h1{
    max-width:1200px;
    margin:auto;
}
.steps{
    max-width:1200px;
    margin:30px auto 0;
}
@media (max-width:991px){

    .checkout{
        grid-template-columns:1fr;
        gap:20px;
        padding:0 16px;
    }

    .summary-card{
        position:static;
    }

}
.contenedor-ancho-sitio{
    background:linear-gradient(135deg,#061727,#061727);
    color:#fff;
    padding:35px 70px 20px;
    margin-top:40px;
}

.footer-top{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:260px 1fr;
    gap:45px;
}

.footer-logo-contact__wrapper .logo img{
    width:201px;
    height:auto;
    margin-bottom:25px;
}

.contact-list{
    margin-bottom:18px;
}

.contact-list__title,
.category__title{
    color:#061727;
    font-weight:700;
    text-transform:uppercase;
    margin-bottom:12px;
}

.contact-list__title{
    color:#fff;
    text-transform:none;
}

.item{
    display:flex;
    align-items:center;
    gap:8px;
    margin:7px 0;
}

.item a,
.category__list-wrapper a,
.category__title a{
    color:#fff;
    text-decoration:none;
    font-size:15px;
}

.footer-link-list__wrapper{
    display:block;
}

.link-list__column{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:35px;
}

.link-list__row{
    display:block;
}

.category__list-wrapper ul{
    list-style:none;
    padding:0;
    margin:0;
}

.category__list-wrapper li{
    margin-bottom:9px;
}

.redes-sociales-grid{
    display:flex;
    gap:14px;
    align-items:center;
    margin-bottom:25px;
}

.red-social-item{
    color:#fff;
    font-size:18px;
    text-decoration:none;
}

.afip-qr-image{
    width:57px;
    height:auto;
}

.footer-bottom{
    max-width:1200px;
    margin:30px auto 0;
    padding-top:15px;
    border-top:1px solid rgba(255,255,255,.15);
    font-size:12px;
    color:rgba(255,255,255,.75);
}
.checkout{
    max-width:1280px;
    width:100%;
    margin:35px auto;
    padding:0 40px;
    display:grid;
    grid-template-columns:minmax(0, 1fr) 340px;
    gap:35px;
    align-items:start;
}
@media(max-width:900px){
    .footer-top{
        grid-template-columns:1fr;
    }

    .link-list__column{
        grid-template-columns:1fr 1fr;
    }

    .contenedor-ancho-sitio{
        padding:30px 20px;
    }

    .checkout{
        grid-template-columns:1fr;
        padding:0 16px;
    }
}
/* ===== TELÉFONO ===== */

.phone-row{
    display:grid;
    grid-template-columns: 1.2fr .8fr 1.5fr;
    gap:16px;
    margin-bottom:16px;
    align-items:center;
}

.phone-row select,
.phone-row input{
    width:100%;
    min-width:0;
    height:48px;
    padding:0 14px;
    border:1px solid #c9cfd8;
    border-radius:3px;
    background:#fff;
    color:#333;
    font-size:14px;
    font-family:inherit;
    outline:none;
    box-sizing:border-box;
    transition:border-color .2s;
}

.phone-row select:focus,
.phone-row input:focus{
    border-color:#0066cc;
}

.phone-row input::placeholder{
    color:#999;
}

/* Responsive */

@media (max-width:760px){

    .phone-row{
        grid-template-columns:1fr;
        gap:12px;
    }

}
.card-brand{
    text-align:right;
    font-size:22px;
    font-weight:bold;
    letter-spacing:2px;
    margin-bottom:18px;
}

.card-bottom{
    display:flex;
    justify-content:space-between;
    margin-top:30px;
}

.card-bottom small{
    opacity:.7;
    display:block;
    font-size:11px;
}

.card-bottom span{
    font-size:15px;
    font-weight:bold;
}

.card-numbers{
    font-size:26px;
    letter-spacing:3px;
    font-family:monospace;
}
/* ===== BOTÓN SIGUIENTE ===== */

.next-btn{
    width:100%;
    height:52px;
    border:none;
    border-radius:8px;
    background:#bfc5cf;
    color:#fff;
    font-size:16px;
    font-weight:600;
    cursor:not-allowed;
    transition:.3s;
}

.next-btn:disabled{
    background:#bfc5cf;
    color:#fff;
    cursor:not-allowed;
}

.next-btn.enabled{
    background:#32c26b;
    color:#fff;
    cursor:pointer;
}

.next-btn.enabled:hover{
    background:#29a95a;
}

/* ===== BOTÓN PAGAR ===== */

.pay-btn:disabled{
    background:#bfc5cf;
    cursor:not-allowed;
}

.pay-btn.enabled{
    background:#32c26b;
}

.pay-btn.enabled:hover{
    background:#29a95a;
}
.payment-methods{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    margin:18px 0;
    flex-wrap:wrap;
}

.payment-methods img{
    height:28px;
    width:auto;
    object-fit:contain;
    filter:grayscale(0);
}
.payment-methods{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    margin:18px 0;
    flex-wrap:wrap;
}

.payment-methods img{
    height:28px;
    width:auto;
    object-fit:contain;
    filter:grayscale(0);
}
.cards-grid{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
    margin:18px 0 22px;
}

.cards-grid img{
    height:26px;
    width:auto;
    object-fit:contain;
    transition:.2s;
}

.cards-grid img:hover{
    transform:scale(1.05);
}
.pay-btn {
  background: #bdbdbd;
  color: #fff;
  cursor: not-allowed;
  opacity: 1;
}

.pay-btn.enabled {
  background: #00a651;
  cursor: pointer;
}

.pay-btn.enabled:hover {
  background: #008f45;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins,sans-serif;
}

body{
background:#06152d;
color:#fff;
}

header{
background:#06152d;
padding:15px 40px;
display:flex;
justify-content:space-between;
align-items:center;
position:sticky;
top:0;
z-index:999;
}

.logo{
font-size:30px;
font-weight:bold;
}

.logo span{
color:#06152d;
}

nav a{
color:white;
text-decoration:none;
margin-left:30px;
font-weight:500;
transition:.3s;
}

nav a:hover{
color:#061727;
}

.banner img{
width:100%;
display:block;
}

.hero{
padding:60px 20px;
text-align:center;
}

.hero h1{
font-size:55px;
margin-bottom:20px;
}

.hero p{
font-size:22px;
}

.cards{

max-width:1400px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:35px;
padding:60px 40px;
}

.card{

background:rgba(255,255,255,.08);
padding:35px;
border-radius:20px;
text-align:center;
transition:.3s;

}

.card:hover{
transform:translateY(-10px);
background:rgba(255,255,255,.15);
}

.icon{
font-size:65px;
margin-bottom:20px;
}

.card h2{

margin-bottom:15px;

}

.card p{

font-size:15px;
line-height:26px;
margin-bottom:25px;

}

button{

background:white;
color:#061727;
border:none;
padding:13px 35px;
border-radius:30px;
cursor:pointer;
font-weight:bold;
transition:.3s;

}

button:hover{

background:#ffe500;
color:#061727;

}

footer{

background:#061727;
padding:30px;
text-align:center;
margin-top:50px;

}
.hero{
    padding:60px 20px;
    text-align:center;
    background:linear-gradient(#061727,#061727);
    color:#fff;
}

.hero h1{
    font-size:52px;
    font-weight:700;
}

.hero p{
    margin-top:20px;
    font-size:22px;
}

.accesos{
    position:relative;

    background-image:url("img/PUBLI.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    min-height:650px;
    padding:120px 30px;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:80px;
    flex-wrap:wrap;

    overflow:hidden;
}

.accesos::before{
    content:"";
    position:absolute;
    inset:0;

    /* Azul Telecentro semitransparente */
    background:rgba(0, 125, 210, 0.45);

    /* También podés probar:
       background:rgba(6,21,45,.55);
    */

    z-index:1;
}

.acceso{
    position:relative;
    z-index:2;
}

.tarjeta{
    width:360px;
    background:#fff;
    border-radius:24px;
    padding:15px;
    box-shadow:0 15px 35px rgba(6,21,45,.30);
    transition:.3s;
}

.tarjeta:hover{
    transform:translateY(-8px);
}

.tarjeta img{
    width:100%;
    height:170px;       /* Cambiá este valor si la querés más alta o más baja */
    object-fit:cover;
    display:block;
    border-radius:18px;
}

.acceso span{
    display:block;
    margin-top:18px;
    font-size:24px;
    font-weight:700;
    color:#fff;
    text-shadow:0 3px 12px rgba(6,21,45,.90);
}

@media(max-width:900px){

    .accesos{
        flex-direction:column;
        min-height:auto;
        padding:80px 20px;
        gap:40px;
    }

    .tarjeta{
        width:100%;
        max-width:360px;
    }

    .acceso span{
        font-size:20px;
    }

}
/* ===========================================
   RESPONSIVE FINAL - AGREGAR AL FINAL DEL CSS
=========================================== */

html{
    overflow-x:hidden;
}

body{
    overflow-x:hidden;
}

/* Imágenes */
img{
    max-width:100%;
    height:auto;
    display:block;
}

/* Banner */
.banner{
    width:100%;
}

.banner img{
    width:100%;
    height:auto;
}

/* Contenedor principal */
.contenedor-ancho-sitio,
.checkout,
.hero,
.footer-top,
.steps,
.cards{
    width:100%;
    max-width:1400px;
    margin-left:auto;
    margin-right:auto;
}

/* =========================
      TABLET
========================= */

@media (max-width:991px){

.hero h1{
    font-size:38px !important;
    line-height:1.3;
}

.hero p{
    font-size:18px !important;
}

.accesos{
    padding:70px 20px !important;
    gap:40px !important;
}

.tarjeta{
    width:100% !important;
    max-width:420px;
}

.checkout{
    grid-template-columns:1fr !important;
    padding:20px !important;
}

.summary-card{
    position:relative !important;
    top:auto !important;
}

.footer-top{
    grid-template-columns:1fr !important;
}

.link-list__column{
    grid-template-columns:1fr 1fr !important;
    gap:25px;
}

}

/* =========================
      CELULAR
========================= */

@media (max-width:768px){

header,
.header-mobile{
    padding:15px;
}

.logo img{
    width:130px;
}

.hero{
    padding:45px 15px !important;
}

.hero h1{
    font-size:28px !important;
    letter-spacing:1px !important;
}

.hero p{
    font-size:16px !important;
}

.accesos{
    flex-direction:column;
    align-items:center;
    gap:35px !important;
    padding:60px 15px !important;
}

.tarjeta{
    width:100% !important;
    padding:12px;
}

.acceso{
    width:100%;
    max-width:420px;
}

.acceso span{
    font-size:20px !important;
}

.checkout{
    padding:15px !important;
}

.card{
    padding:20px !important;
}

.grid-2,
.grid-3,
.phone-row{
    grid-template-columns:1fr !important;
}

.steps{
    grid-template-columns:1fr !important;
}

.step{
    justify-content:flex-start;
}

input,
select,
button{
    font-size:16px;
}

.fake-card{
    width:100%;
    max-width:340px;
    height:auto;
}

.footer-top{
    gap:25px;
}

.link-list__column{
    grid-template-columns:1fr !important;
}

.footer-bottom{
    font-size:12px;
    text-align:center;
}

}

/* =========================
    CELULARES MUY PEQUEÑOS
========================= */

@media (max-width:480px){

.hero h1{
    font-size:22px !important;
}

.hero p{
    font-size:15px !important;
}

.acceso span{
    font-size:18px !important;
}

.card{
    padding:16px !important;
}

.logo img{
    width:120px;
}

}