/* ============================================================
   RVA Uniformes — estilos públicos (mobile-first)
   Paleta: naranja #FF6600 · negro #0a0a0a · blanco
   ============================================================ */
:root{
  --or:#FF6600; --or-d:#E55A00; --or-l:#FFF1E6;
  --bk:#0a0a0a; --bk2:#171717; --bk3:#2a2a2a;
  --tx:#222; --mut:#6b6b6b; --ln:#e7e7e7; --bg:#f6f6f7; --wh:#fff;
  --ok:#0a8a3c; --er:#c62828; --r:12px;
  --sh:0 2px 10px rgba(0,0,0,.07); --sh2:0 10px 30px rgba(0,0,0,.14);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--tx);background:var(--bg);line-height:1.55;font-size:16px}
img{max-width:100%;display:block}
a{color:var(--or-d);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;color:var(--bk);margin:0 0 .5em}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 18px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--mut)}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border:2px solid var(--or);background:var(--or);color:#fff;border-radius:999px;font-weight:700;font-size:15px;cursor:pointer;transition:.2s;text-decoration:none!important;line-height:1.2;font-family:inherit}
.btn:hover{background:var(--or-d);border-color:var(--or-d);transform:translateY(-1px)}
.btn-dark{background:var(--bk);border-color:var(--bk)}.btn-dark:hover{background:var(--bk3);border-color:var(--bk3)}
.btn-line{background:transparent;color:var(--or)}.btn-line:hover{background:var(--or);color:#fff}
.btn-white{background:#fff;border-color:#fff;color:var(--bk)}.btn-white:hover{background:var(--or-l);border-color:var(--or-l)}
.btn-block{width:100%}.btn-sm{padding:8px 16px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ---------- Topbar + Header ---------- */
.topbar{background:var(--bk);color:#cfcfcf;font-size:13px}
.topbar .container{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:7px;padding-bottom:7px}
.topbar a{color:#cfcfcf}.topbar a:hover{color:var(--or);text-decoration:none}
.topbar .tb-r{display:flex;gap:18px;flex-wrap:wrap}
.topbar .tb-slogan{letter-spacing:.14em;text-transform:uppercase;font-size:11px;color:#9a9a9a}
.site-header{background:var(--bk2);position:sticky;top:0;z-index:100;border-bottom:3px solid var(--or);box-shadow:0 4px 18px rgba(0,0,0,.25)}
.header-inner{display:flex;align-items:center;gap:18px;min-height:68px}
.brand img{height:46px;width:auto}
.main-nav{display:flex;gap:4px;margin-left:10px}
.main-nav a{color:#e9e9e9;padding:9px 14px;border-radius:8px;font-weight:600;font-size:15px}
.main-nav a:hover,.main-nav a.on{background:rgba(255,102,0,.16);color:#fff;text-decoration:none}
.main-nav a.on{color:var(--or)}
.search{flex:1;max-width:340px;margin-left:auto;position:relative}
.search input{width:100%;padding:10px 14px 10px 40px;border-radius:999px;border:1px solid var(--bk3);background:var(--bk);color:#fff;font-size:14px;font-family:inherit}
.search input::placeholder{color:#8d8d8d}
.search input:focus{outline:none;border-color:var(--or)}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#8d8d8d}
.cart-btn{position:relative;display:inline-flex;align-items:center;gap:8px;background:var(--or);color:#fff;padding:10px 16px;border-radius:999px;font-weight:700;font-size:14px}
.cart-btn:hover{background:var(--or-d);text-decoration:none}
.cart-btn .n{position:absolute;top:-7px;right:-5px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:#fff;color:var(--or-d);font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:800;border:2px solid var(--bk2)}
.burger{display:none;background:none;border:0;color:#fff;padding:8px;cursor:pointer}

/* ---------- Hero ---------- */
.hero{background:radial-gradient(900px 400px at 85% 0%,rgba(255,102,0,.35),transparent 60%),linear-gradient(135deg,#050505,#1c1c1c);color:#fff;position:relative;overflow:hidden}
.hero .container{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;padding-top:54px;padding-bottom:54px}
.hero h1{color:#fff;font-size:clamp(28px,4.6vw,48px);letter-spacing:-.02em}
.hero h1 span{color:var(--or)}
.hero p{color:#d6d6d6;font-size:clamp(15px,2vw,18px);max-width:520px;margin:0 0 24px}
.hero .tag{display:inline-block;letter-spacing:.2em;text-transform:uppercase;font-size:12px;color:var(--or);font-weight:700;margin-bottom:14px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero .art{display:flex;justify-content:center}
.hero .art img{width:min(100%,460px);filter:drop-shadow(0 10px 40px rgba(255,102,0,.25))}

/* ---------- Beneficios ---------- */
.features{background:#fff;border-bottom:1px solid var(--ln)}
.features .container{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.feature{display:flex;gap:12px;align-items:center;padding:18px 14px;border-right:1px solid var(--ln)}
.feature:last-child{border-right:0}
.feature .ic{flex:none;width:42px;height:42px;border-radius:50%;background:var(--or-l);color:var(--or-d);display:flex;align-items:center;justify-content:center}
.feature b{display:block;font-size:14px;color:var(--bk)}.feature small{color:var(--mut);font-size:12.5px;line-height:1.3;display:block}

/* ---------- Secciones ---------- */
main.container{padding-top:32px;padding-bottom:56px}
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.sec-head h2{margin:0;font-size:clamp(21px,3vw,28px)}
.sec-head h2::after{content:"";display:block;width:54px;height:4px;background:var(--or);border-radius:2px;margin-top:8px}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:22px;scrollbar-width:thin}
.chip{flex:none;padding:9px 18px;border-radius:999px;background:#fff;border:1px solid var(--ln);color:var(--tx);font-weight:600;font-size:14px;white-space:nowrap}
.chip:hover{border-color:var(--or);color:var(--or-d);text-decoration:none}
.chip.on{background:var(--bk);border-color:var(--bk);color:#fff}

/* ---------- Grilla de productos ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pcard{background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);display:flex;flex-direction:column;transition:.25s;position:relative;color:inherit}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--sh2);text-decoration:none}
.pimg{aspect-ratio:1/1;background:#efefef url('../img/favicon.png') center/38% no-repeat;position:relative;overflow:hidden}
.pimg img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.pcard:hover .pimg img{transform:scale(1.06)}
.pbadge{position:absolute;top:10px;left:10px;background:var(--bk);color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;letter-spacing:.04em}
.pbadge.out{background:var(--er)}
.pbody{padding:14px 15px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.pcat{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);font-weight:600}
.pname{font-weight:700;color:var(--bk);font-size:15.5px;line-height:1.3;min-height:2.6em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pprice{font-size:21px;font-weight:800;color:var(--or-d);margin-top:auto;padding-top:6px}
.pcard .btn{margin-top:10px}
.empty{grid-column:1/-1;text-align:center;background:#fff;border-radius:var(--r);padding:56px 20px;color:var(--mut)}

.pager{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:30px}
.pager a,.pager span{min-width:42px;padding:9px 14px;text-align:center;border-radius:10px;background:#fff;border:1px solid var(--ln);color:var(--tx);font-weight:600}
.pager span.on{background:var(--or);border-color:var(--or);color:#fff}
.pager a:hover{border-color:var(--or);text-decoration:none}

/* ---------- Banner corporativo ---------- */
.cta-band{background:linear-gradient(120deg,var(--or),#ff8a3d);color:#fff;border-radius:16px;padding:30px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:40px}
.cta-band h3{color:#fff;font-size:clamp(20px,3vw,26px);margin:0 0 4px}.cta-band p{margin:0;opacity:.95}

/* ---------- Breadcrumb ---------- */
.crumbs{font-size:13.5px;color:var(--mut);margin-bottom:18px}.crumbs a{color:var(--mut)}.crumbs a:hover{color:var(--or-d)}

/* ---------- Ficha de producto ---------- */
.pd{display:grid;grid-template-columns:1.05fr 1fr;gap:34px;background:#fff;padding:26px;border-radius:16px;box-shadow:var(--sh)}
.gal-main{aspect-ratio:1/1;background:#efefef url('../img/favicon.png') center/30% no-repeat;border-radius:14px;overflow:hidden}
.gal-main img{width:100%;height:100%;object-fit:cover}
.gal-th{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px}
.gal-th button{padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;background:#efefef;cursor:pointer;aspect-ratio:1/1}
.gal-th button.on,.gal-th button:hover{border-color:var(--or)}
.gal-th img{width:100%;height:100%;object-fit:cover}
.pd h1{font-size:clamp(23px,3.4vw,32px)}
.pd .price{font-size:clamp(28px,4vw,38px);font-weight:800;color:var(--or-d);margin:6px 0 14px}
.pd .desc{color:#444;margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--ln)}
.opt{margin-bottom:18px}.opt>label,.opt>.lb{display:block;font-weight:700;margin-bottom:8px;color:var(--bk)}
.opt .sel{font-weight:500;color:var(--mut)}
.sizes{display:flex;flex-wrap:wrap;gap:8px}
.size{min-width:50px;padding:10px 14px;border:2px solid var(--ln);border-radius:10px;background:#fff;font-weight:700;cursor:pointer;font-family:inherit;font-size:15px;transition:.15s}
.size:hover:not(:disabled){border-color:var(--or)}
.size.on{background:var(--bk);border-color:var(--bk);color:#fff}
.size:disabled,.size.na{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.sw{width:42px;height:42px;border-radius:50%;border:2px solid var(--ln);cursor:pointer;padding:0;position:relative;box-shadow:inset 0 0 0 3px #fff;transition:.15s}
.sw:hover:not(:disabled){transform:scale(1.08)}
.sw.on{border-color:var(--or);box-shadow:inset 0 0 0 3px #fff,0 0 0 2px var(--or)}
.sw:disabled,.sw.na{opacity:.3;cursor:not-allowed}
.sw.na::after,.sw:disabled::after{content:"";position:absolute;left:50%;top:6px;bottom:6px;width:2px;background:#888;transform:rotate(45deg)}
.stock-msg{font-size:14px;font-weight:600;margin:6px 0 16px;min-height:22px}
.stock-msg.ok{color:var(--ok)}.stock-msg.low{color:#b26a00}.stock-msg.no{color:var(--er)}
.qty-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.qty{display:inline-flex;border:2px solid var(--ln);border-radius:999px;overflow:hidden}
.qty button{width:42px;border:0;background:#fff;font-size:20px;cursor:pointer}.qty button:hover{background:var(--or-l)}
.qty input{width:54px;text-align:center;border:0;font-size:16px;font-weight:700;-moz-appearance:textfield;font-family:inherit}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.buy{display:flex;gap:12px;flex-wrap:wrap}.buy .btn{flex:1;min-width:170px;padding:15px 22px}
.perks{display:grid;gap:8px;margin-top:20px;padding:16px;background:var(--or-l);border-radius:12px;font-size:14px}
.perks div{display:flex;gap:10px;align-items:center}.perks svg{color:var(--or-d);flex:none}

/* ---------- Alertas / formularios ---------- */
.alert{padding:13px 16px;border-radius:10px;margin-bottom:18px;font-weight:600;border-left:4px solid}
.alert.ok{background:#e8f6ee;color:var(--ok);border-color:var(--ok)}
.alert.er{background:#fdecec;color:var(--er);border-color:var(--er)}
.alert ul{margin:6px 0 0 18px;padding:0;font-weight:500}
.box{background:#fff;border-radius:var(--r);padding:24px;box-shadow:var(--sh)}
.box h2{font-size:19px;padding-bottom:10px;border-bottom:2px solid var(--or);margin-bottom:16px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f-g{margin-bottom:14px}
.f-g label{display:block;font-weight:600;font-size:13.5px;margin-bottom:5px}
.f-g input,.f-g select,.f-g textarea{width:100%;padding:12px 13px;border:1px solid #d6d6d6;border-radius:10px;font-size:16px;font-family:inherit;background:#fff;color:var(--tx)}
.f-g input:focus,.f-g select:focus,.f-g textarea:focus{outline:none;border-color:var(--or);box-shadow:0 0 0 3px rgba(255,102,0,.15)}
.f-g textarea{min-height:90px;resize:vertical}

/* ---------- Pasos ---------- */
.steps{display:flex;gap:8px;margin-bottom:24px;font-size:13.5px;font-weight:700;flex-wrap:wrap}
.steps span{display:flex;align-items:center;gap:8px;color:#9a9a9a}
.steps span i{font-style:normal;width:26px;height:26px;border-radius:50%;background:#ddd;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.steps span.on{color:var(--bk)}.steps span.on i{background:var(--or)}
.steps span:not(:last-child)::after{content:"›";margin-left:6px;color:#bbb}

/* ---------- Carrito / checkout ---------- */
.two{display:grid;grid-template-columns:1fr 370px;gap:24px;align-items:start}
.citem{display:grid;grid-template-columns:84px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--ln);align-items:center}
.citem:last-child{border:0}
.citem .th{width:84px;height:84px;border-radius:10px;background:#efefef url('../img/favicon.png') center/50% no-repeat;overflow:hidden}
.citem .th img{width:100%;height:100%;object-fit:cover}
.citem .nm{font-weight:700;color:var(--bk)}.citem .vr{font-size:13.5px;color:var(--mut)}
.citem .pr{font-weight:800;color:var(--or-d);text-align:right}
.citem .ctr{display:flex;gap:10px;align-items:center;margin-top:8px;flex-wrap:wrap}
.citem .qty button{width:34px;height:34px;font-size:18px}.citem .qty input{width:42px;font-size:15px}
.link-del{background:none;border:0;color:var(--er);font-size:13px;cursor:pointer;padding:4px;font-family:inherit}
.link-del:hover{text-decoration:underline}
.sum{position:sticky;top:96px}
.sum .row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:15px}
.sum .row.tot{border-top:2px solid var(--ln);margin-top:8px;padding-top:14px;font-size:20px;font-weight:800;color:var(--bk)}
.sum .free{color:var(--ok);font-weight:700}
.sum .hint{background:var(--or-l);padding:11px 13px;border-radius:10px;font-size:13.5px;margin:10px 0}
.sum .btn+.btn{margin-top:10px}
.sum .mini{padding:10px;background:#f7f7f7;border-radius:8px;margin-bottom:8px;font-size:13.5px}
.pay-note{display:flex;gap:8px;align-items:center;justify-content:center;font-size:12.5px;color:var(--mut);margin-top:14px}
.state{max-width:560px;margin:30px auto;text-align:center}
.state .big{font-size:60px;line-height:1;margin-bottom:8px}
.state .det{background:#f6f6f6;border-radius:10px;padding:14px;margin:18px 0;text-align:left}
.state .det div{display:flex;justify-content:space-between;gap:10px;padding:5px 0}

/* ---------- Seguimiento ---------- */
.trk{display:flex;margin:22px 0 8px}
.trk div{flex:1;text-align:center;font-size:12.5px;color:#aaa;position:relative}
.trk div::before{content:"";position:absolute;top:15px;left:-50%;width:100%;height:3px;background:#ddd;z-index:0}
.trk div:first-child::before{display:none}
.trk i{position:relative;z-index:1;font-style:normal;width:32px;height:32px;border-radius:50%;background:#ddd;margin:0 auto 6px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.trk div.on{color:var(--bk);font-weight:700}.trk div.on i,.trk div.on::before{background:var(--or)}
.hist{border-left:3px solid var(--or);padding:4px 0 4px 14px;margin-bottom:14px}.hist small{color:var(--mut)}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}.tbl td{padding:10px 0;border-bottom:1px solid var(--ln)}

/* ---------- Footer ---------- */
.site-footer{background:var(--bk);color:#bdbdbd;margin-top:20px;border-top:4px solid var(--or)}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding:46px 18px 30px}
.site-footer h4{color:#fff;margin:0 0 14px;font-size:15px;letter-spacing:.06em;text-transform:uppercase}
.site-footer a{color:#bdbdbd;display:block;padding:4px 0;font-size:14.5px}.site-footer a:hover{color:var(--or);text-decoration:none}
.site-footer p{margin:0 0 10px;font-size:14.5px}
.f-logo{height:70px;width:auto;margin-bottom:12px}
.f-bottom{border-top:1px solid #222;padding:16px 18px;font-size:13px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:#8a8a8a}
.wa{position:fixed;right:16px;bottom:16px;z-index:90;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.3);transition:.2s}
.wa:hover{transform:scale(1.08);text-decoration:none}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1024px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .search{max-width:220px}
  .f-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .topbar .tb-slogan{display:none}
  .burger{display:inline-flex;margin-left:auto;order:3}
  .header-inner{flex-wrap:wrap;gap:10px;padding-top:10px;padding-bottom:10px}
  .brand img{height:40px}
  .cart-btn{order:2;margin-left:auto}
  .burger{margin-left:0}
  .search{order:5;max-width:none;width:100%;flex:1 1 100%;margin:0}
  .main-nav{order:6;display:none;flex:1 1 100%;flex-direction:column;margin:0;padding:6px 0;border-top:1px solid var(--bk3)}
  .main-nav.open{display:flex}
  .main-nav a{padding:12px 6px;border-radius:0;border-bottom:1px solid #262626}
  .hero .container{grid-template-columns:1fr;padding-top:34px;padding-bottom:34px;text-align:center}
  .hero p{margin-left:auto;margin-right:auto}.hero .cta{justify-content:center}
  .hero .art{order:-1}.hero .art img{width:min(70%,280px)}
  .features .container{grid-template-columns:1fr 1fr}
  .feature:nth-child(2){border-right:0}.feature:nth-child(-n+2){border-bottom:1px solid var(--ln)}
  .pd{grid-template-columns:1fr;padding:16px;gap:22px}
  .two{grid-template-columns:1fr}.sum{position:static}
  .cta-band{text-align:center;justify-content:center}
}
@media (max-width:640px){
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .pbody{padding:11px 11px 13px}.pname{font-size:14px}.pprice{font-size:18px}
  .pcard .btn{padding:10px 12px;font-size:13px}
  .topbar .tb-r a:nth-child(2){display:none}
  .f-row{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr;padding-top:32px}
  .box{padding:18px}
  .citem{grid-template-columns:70px 1fr}.citem .th{width:70px;height:70px}
  .citem .pr{grid-column:2;text-align:left}
  .gal-th{grid-template-columns:repeat(4,1fr)}
  .buy .btn{min-width:100%}
  .f-bottom{flex-direction:column;text-align:center}
  main.container{padding-top:22px}
}
@media (max-width:380px){
  .grid{grid-template-columns:1fr 1fr;gap:10px}
  .container{padding:0 12px}
  .cart-btn span.t{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}