:root{
  --blue:#0A1F44;
  --gold:#C9A86A;
  --green:#25D366;
  --bg:#fdfbf7;
  --black:#111;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Poppins, sans-serif;
}

body{
  background:var(--bg);
  color:var(--blue);
  padding-top:70px;
}

a,
a:hover,
a:visited,
a:active{
  text-decoration:none!important;
  border-bottom:none!important;
  box-shadow:none!important;
  text-decoration-line:none!important;
}

.page{
  width:100%;
  overflow-x:hidden;
}

/* HEADER FIXED */
.ysi-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:70px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  z-index:1000;
  box-shadow:0 4px 20px rgba(0,0,0,.08);
}

.ysi-logo{
  font-family:Bebas Neue, sans-serif;
  font-size:1.8rem;
  letter-spacing:2px;
  color:var(--blue);
}

.ysi-logo span{
  color:var(--gold);
}

.ysi-header-right{
  display:flex;
  gap:14px;
  align-items:center;
}

.ysi-icon-btn{
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.2s;
}

.ysi-icon-btn.cart{
  background:var(--gold);
  color:var(--blue);
}

.ysi-icon-btn:hover{
  transform:scale(1.05);
}

/* NAV 50vh x 200px */
.ysi-nav,
.ysi-cart-nav{
  position:fixed;
  top:70px;
  right:0;
  width:200px;
  height:50vh;
  background:#fff;
  box-shadow:-10px 10px 30px rgba(0,0,0,.15);
  border-radius:0 0 0 18px;
  padding:18px;
  z-index:999;
  display:none;
  flex-direction:column;
  gap:6px;
  overflow-y:auto;
}

.ysi-nav.open,
.ysi-cart-nav.open{
  display:flex;
  animation:slide .25s ease;
}

@keyframes slide{
  from{transform:translateX(100%)}
  to{transform:translateX(0)}
}

.ysi-nav a{
  padding:12px 14px;
  border-radius:10px;
  color:var(--blue);
  font-weight:600;
  font-size:.85rem;
  transition:.2s;
}

.ysi-nav a:hover{
  background:var(--blue);
  color:#fff!important;
}

.nav-pro-badge{
  margin-top:10px;
  padding:10px;
  background:#f7f5f2;
  border-radius:10px;
  font-size:.7rem;
}

.cart-total-box{
  border-top:1px solid #eee;
  padding-top:10px;
  margin-top:10px;
}

/* HERO - ACTUALIZADO SEPARADO */
.hero-ysi{
  max-width:1200px;
  margin:20px auto;
  padding:20px;
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  align-items:center;
}

.hero-ysi h1{
  font-family:Bebas Neue, sans-serif;
  font-size:2.6rem;
  line-height:.9;
}

.hero-ysi h1 span{
  color:var(--gold);
}

.hero-ysi-main{
  font-size:.95rem;
  font-weight:600;
  color:var(--blue);
  line-height:1.5;
  margin:12px 0 14px;
}

.hero-separator{
  border:none;
  border-top:1px solid rgba(0,0,0,.08);
  margin:18px 0 12px;
  max-width:320px;
}

.hero-system-info{
  font-size:.72rem;
  color:#777;
  line-height:1.4;
  font-weight:400;
}

.hero-system-info::before{
  content:"SISTEMA • ";
  font-weight:800;
  font-size:.65rem;
  color:var(--gold);
  letter-spacing:1px;
}

.hero-img img{
  width:100%;
  border-radius:22px;
}

.btn-pro{
  background:var(--blue);
  color:#fff!important;
  padding:14px 26px;
  border-radius:30px;
  font-weight:800;
  display:inline-block;
  margin-top:12px;
  transition:.2s;
}

.btn-pro:hover{
  background:#000;
  transform:translateY(-2px);
}

/* CATS */
.cats-ysi{
  max-width:1200px;
  margin:10px auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  padding:0 20px;
}

.cat-ysi{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 8px 22px rgba(0,0,0,.07);
  text-align:center;
  padding-bottom:12px;
  border:2px solid transparent;
  transition:.2s;
}

.cat-ysi:hover{
  border-color:var(--gold);
  transform:translateY(-4px);
}

.cat-ysi img{
  width:100%;
  height:150px;
  object-fit:cover;
}

/* PRODUCTOS */
.sec-ysi{
  max-width:1200px;
  margin:40px auto;
  padding:0 20px;
}

.sec-ysi h2{
  font-family:Bebas Neue, sans-serif;
  font-size:2.2rem;
}

.sec-ysi h2 span{
  color:var(--gold);
}

.grid-ysi{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:14px;
}

.prod-ysi{
  background:#fff;
  border-radius:18px;
  padding:14px;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}

.prod-ysi img{
  width:100%;
  height:220px;
  object-fit:contain;
  background:#fcfaf7;
  border-radius:12px;
}

.prod-ysi h4{
  font-size:.85rem;
  min-height:38px;
  margin:8px 0 4px;
  color:var(--blue);
}

.price-ysi{
  font-weight:800;
}

.stock-ysi{
  font-size:.65rem;
  font-weight:800;
  padding:4px 8px;
  border-radius:10px;
  display:inline-block;
  margin:5px 0;
}

.stock-ysi.ok{background:#e6f9e6;color:#1a8a1a}
.stock-ysi.low{background:#fff3cd;color:#8a6d00}
.stock-ysi.bad{background:#ffe0e0;color:#a00}

.btn-add{
  width:100%;
  background:var(--blue);
  color:#fff;
  border:none;
  padding:12px;
  border-radius:30px;
  font-weight:800;
  cursor:pointer;
  margin-top:6px;
  transition:.2s;
}

.btn-add:hover{
  background:var(--gold);
  color:var(--blue)!important;
}

.btn-add.green{
  background:var(--green);
  color:#fff;
}

.btn-add:disabled{
  background:#ccc;
}

/* MAPA */
.mapa-ysi{
  max-width:1200px;
  margin:50px auto;
  background:#fff;
  border-radius:22px;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
}

.mapa-frame iframe{
  border:0;
  display:block;
}

.mapa-info{
  padding:28px;
}

.mapa-info h3{
  font-family:Bebas Neue, sans-serif;
  font-size:2rem;
}

.mapa-btns{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:16px;
}

.btn-dark,
.btn-whats{
  padding:14px;
  border-radius:30px;
  text-align:center;
  font-weight:800;
  color:#fff!important;
  transition:.2s;
}

.btn-dark{background:#111}
.btn-dark:hover{background:#000;transform:translateY(-2px)}
.btn-whats{background:var(--green)}
.btn-whats:hover{background:#128C7E;transform:translateY(-2px)}

/* TESTIMONIOS + RECLUTA */
.testi-wrap{
  max-width:1200px;
  margin:50px auto;
  padding:0 20px;
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}

.testi-box{
  background:#fff;
  border-radius:18px;
  padding:20px;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}

.testi{
  border-left:3px solid var(--gold);
  padding-left:10px;
  margin:12px 0;
}

.testi p{
  font-size:.85rem;
  opacity:.8;
}

.recluta-ysi{
  max-width:900px;
  margin:60px auto;
  background:linear-gradient(135deg,var(--blue),#162e5c);
  color:#fff;
  border-radius:24px;
  padding:34px 24px;
  text-align:center;
}

.recluta-ysi h2{
  font-family:Bebas Neue, sans-serif;
  font-size:2.4rem;
}

.recluta-ysi h2 span{
  color:var(--gold);
}

.recluta-ysi input,
.recluta-ysi select{
  width:100%;
  padding:14px;
  border-radius:12px;
  border:none;
  margin:8px 0;
  color:#111;
}

.recluta-btn{
  width:100%;
  background:var(--gold);
  color:var(--blue);
  padding:14px;
  border:none;
  border-radius:30px;
  font-weight:800;
  margin-top:10px;
  cursor:pointer;
}

/* FOOTER */
.yare-footer{
  background:var(--black);
  color:#fff;
  padding:45px 20px 20px;
}

.footer-brand{
  text-align:center;
  margin-bottom:30px;
}
.footer-brand h2{
  font-family:Bebas Neue, sans-serif;
  font-size:2.4rem;
  letter-spacing:3px;
  line-height:1;
  color:#fff;
  margin:0;
}
.footer-brand p{
  font-size:.85rem;
  color:var(--gold);
  font-weight:600;
  margin-top:6px;
  letter-spacing:.6px;
}

.footer-grid{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:30px;
  text-align:center;
}

.yare-footer-title{
  font-weight:800;
  margin-bottom:8px;
}

.yare-footer-redes{
  display:flex;
  gap:10px;
  justify-content:center;
  margin:12px 0;
}

.yare-footer-redes a{
  width:40px;
  height:40px;
  background:rgba(255,255,255,.08);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  transition:.2s;
  text-decoration:none!important;
}

.yare-footer-redes a.facebook:hover{background:#1877F2!important;transform:scale(1.1)}
.yare-footer-redes a.instagram:hover{background:#E1306C!important;transform:scale(1.1)}
.yare-footer-redes a.whatsapp:hover{background:var(--green)!important;transform:scale(1.1)}

.yare-footer-redes a.tiktok:hover{
  background:#000!important;
  color:#fff!important;
  transform:scale(1.12);
  box-shadow: 2px 2px 0 #00f2ea, -2px -2px 0 #ff0050;
  border:1px solid #fff;
}
.yare-footer-redes a.tiktok:hover i{
  text-shadow: 1.2px 0 0 #00f2ea, -1.2px 0 0 #ff0050;
}

.yare-footer-bottom{
  max-width:1100px;
  margin:30px auto 0;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center;
  font-size:.72rem;
  color:rgba(255,255,255,.5);
}

.yare-footer-bottom a,
.yare-embudo a,
.footer-legal a{
  color:#fff!important;
  text-decoration:none!important;
}

.yare-footer-bottom a:hover,
.yare-embudo a:hover,
.footer-legal a:hover{
  color:var(--gold)!important;
}

.footer-separator{
  border:none;
  border-top:1px solid rgba(255,255,255,.08);
  margin:16px auto;
  max-width:320px;
}

.yare-embudo{
  font-size:.78rem;
  font-weight:600;
  color:rgba(255,255,255,.9);
  line-height:1.4;
}

.footer-legal{
  font-size:.68rem;
  color:rgba(255,255,255,.45);
  line-height:1.5;
}

/* FLOTANTE YSI */
.ysi-float{
  position:fixed;
  left:20px;
  bottom:20px;
  background:#fff;
  color:var(--blue);
  padding:10px 14px 10px 10px;
  border-radius:50px;
  display:flex;
  align-items:center;
  gap:10px;
  box-shadow:0 10px 25px rgba(0,0,0,.2);
  z-index:998;
  transition:.3s;
  font-weight:800;
  font-size:.85rem;
  border:2px solid var(--green);
}

.ysi-float img{
  width:36px;
  height:36px;
  border-radius:50%;
  object-fit:cover;
}

.float-avatar{
  position:relative;
}

.dot{
  width:8px;
  height:8px;
  background:var(--green);
  border-radius:50%;
  position:absolute;
  bottom:2px;
  right:2px;
  border:2px solid #fff;
}

.ysi-float.hide{
  transform:translateY(150px);
  opacity:0;
}

/* CARRITO UPDATE */
.cart-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}
.close-x{
  width:30px;
  height:30px;
  border-radius:50%;
  border:none;
  background:#f1f1f1;
  cursor:pointer;
}
.close-x:hover{background:#111;color:#fff}
.cart-pay-methods{
  background:#f8f7f5;
  border-radius:12px;
  padding:10px;
  margin:10px 0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.pay-title{
  font-weight:800;
  font-size:.75rem;
  margin-bottom:4px;
}
.cart-pay-methods label{
  font-size:.78rem;
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border-radius:8px;
  cursor:pointer;
  transition:.2s;
  border:1px solid transparent;
}
.cart-pay-methods label:has(input:checked){
  background:#fff;
  border-color:var(--blue);
  font-weight:700;
}
.btn-add.ghost{
  background:transparent;
  color:var(--blue);
  border:1.5px solid #ddd;
}
.btn-add.ghost:hover{
  border-color:var(--blue);
  background:#fff;
}
.cart-note{
  font-size:.65rem;
  color:#888;
  text-align:center;
  margin-top:8px;
}

/* MODAL DEMO - NUEVO */
.modal-demo{
  position:fixed;
  inset:0;
  z-index:99999;
  background:rgba(0,0,0,.85);
  backdrop-filter:blur(6px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.modal-demo.active{display:flex}
.modal-demo-box{
  background:#fff;
  max-width:520px;
  width:100%;
  border-radius:20px;
  border:3px solid #111;
  padding:28px 22px 22px;
  position:relative;
  animation:pop .3s ease;
  font-family:Poppins, sans-serif;
  color:#111;
}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.modal-demo-close{
  position:absolute;
  right:14px;
  top:8px;
  background:none;
  border:none;
  font-size:30px;
  cursor:pointer;
  color:#111;
}
.modal-demo-texto{
  background:#FFF0F5;
  border:2px dashed #E11D48;
  padding:12px;
  border-radius:12px;
  font-size:.9rem;
  margin:14px 0;
  color:#111;
  white-space:pre-line;
}
.btn-demo{cursor:pointer!important}
#clientName{
  width:100%;
  padding:10px;
  border-radius:10px;
  border:1px solid #ddd;
  margin:8px 0;
  font-size:.8rem;
}
#demoEntendido{
  width:100%;
  padding:12px;
  border-radius:100px;
  background:#111;
  color:#fff;
  font-weight:900;
  border:none;
  cursor:pointer;
  margin-top:12px;
  transition:.2s;
}
#demoEntendido:hover{filter:brightness(1.15)}

/* DESKTOP */
@media(min-width:768px){
  .hero-ysi{grid-template-columns:1.2fr .8fr}
  .hero-ysi h1{font-size:3.3rem}
  .cats-ysi{grid-template-columns:repeat(4,1fr)}
  .grid-ysi{grid-template-columns:repeat(3,1fr)}
  .mapa-ysi{grid-template-columns:1fr 1fr}
  .testi-wrap{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}

@media(min-width:1100px){
  .hero-ysi,.cats-ysi,.sec-ysi,.mapa-ysi,.testi-wrap{padding-left:0;padding-right:0}
}