*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#080808;color:#fff;font-family:Arial,sans-serif}
body.bloqueado{overflow:hidden}

.landing{width:100%;max-width:520px;margin:auto;background:#000}
.imagen{line-height:0}
.imagen img{display:block;width:100%;height:auto}

.cta{padding:14px 12px;background:#080808;text-align:center}
.cta h2{font-size:22px;margin-bottom:5px}
.cta p{color:#bbb;margin-bottom:13px}
.cta small{display:block;margin-top:8px;color:#ccc;font-size:12px}

.boton{
width:100%;padding:17px;border:0;border-radius:11px;
background:linear-gradient(#ffd94d,#f0ae00);
color:#080808;font-size:18px;font-weight:900;cursor:pointer
}

.cta-final{padding-bottom:95px}

/* =========================
   CHECKOUT
========================= */

#overlay{
position:fixed;
inset:0;
z-index:99999;
display:none;
background:rgba(0,0,0,.88);
overflow-y:auto;
-webkit-overflow-scrolling:touch
}

.checkout{
position:relative;
width:100%;
max-width:520px;
min-height:100vh;
margin:auto;
background:#fff;
color:#111;
padding:26px 16px 70px
}

.cerrar{
position:absolute;
right:13px;
top:7px;
width:42px;
height:42px;
border:0;
background:none;
font-size:38px;
color:#555;
cursor:pointer
}

.checkout-header{text-align:center;margin:8px 0 24px}

.checkout-header .seguro{
font-size:12px;
color:#a87800;
font-weight:900
}

.checkout-header h2{
font-size:27px;
margin:8px 30px
}

.checkout-header h2 span{
font-size:27px;
color:#c68c00;
font-weight:900
}

.checkout-header p{
color:#666;
font-size:14px;
line-height:1.4
}

/* =========================
   PASOS
========================= */

.paso{
font-size:18px;
font-weight:900;
margin:22px 0 12px
}

/* =========================
   TALLAS
========================= */

.tallas{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-bottom:26px
}

.talla{
position:relative;
display:block;
padding:16px 14px;
border:2px solid #ddd;
border-radius:12px;
background:#fff;
cursor:pointer;
transition:.2s
}

.talla input{
position:absolute;
opacity:0;
pointer-events:none
}

.talla strong{
display:block;
font-size:28px;
font-weight:900;
color:#111
}

.talla span{
display:block;
margin-top:4px;
font-size:14px;
font-weight:800;
color:#333
}

.talla small{
display:block;
margin-top:5px;
font-size:12px;
color:#777
}

.talla.seleccionada{
border-color:#e1a500;
background:#fff3c7;
box-shadow:0 0 0 2px rgba(225,165,0,.18)
}

/* =========================
   PROMOCIONES
========================= */

.promociones{
display:grid;
gap:10px;
margin-bottom:28px
}

.promo{
position:relative;
display:block;
border:2px solid #ddd;
border-radius:12px;
padding:18px;
background:#fff;
cursor:pointer;
transition:.2s
}

.promo input{
position:absolute;
opacity:0;
pointer-events:none
}

.promo.seleccionada{
border-color:#e1a500;
background:#fff3c7;
box-shadow:0 0 0 2px rgba(225,165,0,.18)
}

.promo-contenido{
display:grid;
grid-template-columns:1fr auto;
gap:5px 12px;
align-items:center
}

.promo strong{
display:block;
font-size:20px
}

.promo small{
display:block;
color:#666;
margin-top:5px
}

.promo .precio{
font-size:25px;
font-weight:900;
text-align:right
}

.promo .regular{
margin-top:3px;
font-size:12px;
color:#777;
text-align:right
}

.badge{
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
background:#ffc832;
padding:4px 10px;
font-size:10px;
font-weight:900;
border-radius:0 0 7px 7px;
white-space:nowrap
}

/* =========================
   FORMULARIO
========================= */

.campo{margin-bottom:15px}

.campo label{
display:block;
font-weight:700;
margin-bottom:6px
}

.campo input,
.campo select,
.campo textarea{
width:100%;
padding:15px;
border:1px solid #ccc;
border-radius:9px;
font-size:16px;
background:#fff;
color:#111;
outline:none
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus{
border-color:#d7a31f
}

.campo textarea{
min-height:75px;
resize:vertical
}

.agencia{display:none}

/* =========================
   RESUMEN
========================= */

.resumen{
background:#eee;
border-radius:12px;
padding:18px;
margin:22px 0 16px
}

.resumen div{
display:flex;
justify-content:space-between;
gap:15px;
margin:9px 0;
font-size:15px
}

.resumen hr{
border:0;
border-top:1px solid #ccc;
margin:14px 0
}

.resumen .total{
font-size:23px;
font-weight:900
}

.verde{color:#148b35}
.rojo{color:#d71919}

.mensaje{
padding:14px;
margin-bottom:16px;
background:#fff7db;
border:1px dashed #c99714;
border-radius:10px;
text-align:center;
font-size:13px;
line-height:1.5
}

.confirmar{
width:100%;
padding:17px;
border:0;
border-radius:10px;
background:linear-gradient(#ffd84a,#eda900);
color:#090909;
font-size:18px;
font-weight:900;
cursor:pointer
}

.confirmar:disabled{
opacity:.6;
cursor:not-allowed
}

.confianza{
text-align:center;
color:#777;
font-size:12px;
margin-top:13px
}

/* =========================
   BOTÓN FIJO MOBILE
========================= */

.barra{
position:fixed;
left:0;
right:0;
bottom:0;
z-index:900;
padding:9px 12px calc(9px + env(safe-area-inset-bottom));
background:rgba(0,0,0,.95)
}

.barra button{
display:block;
width:100%;
max-width:496px;
margin:auto
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:360px){
.tallas{grid-template-columns:1fr}
}

@media(min-width:700px){
body{padding:0 15px}

.checkout{
min-height:auto;
margin:25px auto;
border-radius:16px
}

.barra{display:none}
}