/* Efix Soporte v3 - styles */
html { scroll-behavior: smooth; }
.navlink { color: rgb(71 85 105); }
.navlink:hover { color: rgb(30 58 138); }
.btn { display:inline-flex; align-items:center; justify-content:center; border-radius:1rem; padding:.7rem 1rem; font-weight:600; border:1px solid transparent; }
.btn--primary { background:#2a83f0; color:#fff; box-shadow:0 10px 30px rgba(42,131,240,.35); }
.btn--primary:hover { filter:brightness(0.98); transform:translateY(-1px); }
.btn--light { background:#fff; border-color:rgb(226 232 240); color:rgb(30 41 59); }
.btn--light:hover { background:rgb(248 250 252); }
.section { padding: 4rem 0; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 1rem; }
.h2 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); font-weight: 800; }
.muted { color: rgb(100 116 139); }
.card { background:#fff; border:1px solid rgb(241 245 249); border-radius:1.25rem; padding:1.2rem; box-shadow: 0 8px 30px rgba(0,0,0,.04); }
.card__title { font-weight:700; margin-top:.6rem; }
.card__text { color: rgb(100 116 139); font-size:.95rem; margin-top:.2rem; }
.stat { background:#fff; border:1px solid rgb(241 245 249); border-radius:1rem; padding:.9rem; text-align:center; }
.stat__num { font-weight:800; font-size:1.6rem; color:#1b3c68; }
.stat__label { font-size:.8rem; color: rgb(100 116 139); }

.badge{ display:inline-block; background:rgb(241 245 249); color:rgb(30 41 59); padding:.2rem .6rem; border-radius:.6rem; font-size:.75rem; font-weight:700; }
.badge--pro{ background: #e0edff; color:#1b3c68; }
.plan__price{ font-weight:800; font-size:1.6rem; margin:.5rem 0; }

/* HERO CAROUSEL */
.hero-track{ position:absolute; inset:0; display:flex; height:100%; width:100%; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.hero-slide{ position:relative; flex: 0 0 100%; height:100%; }
.hero-slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-ribbon{ position:absolute; top:1rem; left:50%; transform:translateX(-50%); background:rgba(255,255,255,.7); backdrop-filter: blur(8px); border:1px solid rgba(255,255,255,.5); border-radius:1rem; padding:.6rem .9rem; box-shadow:0 8px 30px rgba(0,0,0,.12); display:flex; flex-direction:column; align-items:center; gap:.25rem; }
.hero-controls{ position:absolute; bottom:1rem; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:.75rem; }
.hero-btn{ width:38px; height:38px; border-radius:.8rem; border:1px solid rgb(226 232 240); background:rgba(255,255,255,.85); backdrop-filter: blur(6px); font-size:1.2rem; font-weight:700; }
.hero-dots{ display:flex; gap:.4rem; }
.hero-dot{ width:9px; height:9px; border-radius:999px; background:rgba(255,255,255,.7); border:1px solid rgba(0,0,0,.15); }
.hero-dot.active{ background:#2a83f0; border-color:#2a83f0; }

/* Slider */
.slider{ display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.5rem; }
.slider::-webkit-scrollbar{ height:8px; }
.slider::-webkit-scrollbar-thumb{ background:rgba(27,60,104,.3); border-radius:999px; }
.slide{ min-width: 280px; max-width: 420px; aspect-ratio: 16/10; position:relative; scroll-snap-align:start; border-radius:1.25rem; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.08); border:1px solid rgb(241 245 249); background:#000; }
.slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.94; }
.slide span{ position:absolute; left:.7rem; bottom:.6rem; background:rgba(255,255,255,.92); padding:.2rem .5rem; border-radius:.6rem; font-size:.75rem; font-weight:700; color:#1b3c68; }

/* Small animations */
[data-animate]{ opacity:0; transform: translateY(12px); transition: all .6s cubic-bezier(.2,.8,.2,1); }
.animate-in{ opacity:1 !important; transform: none !important; }
.ctrl{ padding:.4rem .6rem; border:1px solid rgb(226 232 240); border-radius:.8rem; background:#fff; font-weight:600; }
.ctrl:hover{ background:rgb(248 250 252); }

/* Inputs */
.inp{ width:100%; border:1px solid rgb(226 232 240); border-radius:.9rem; padding:.65rem .9rem; outline: none; }
.inp:focus{ box-shadow: 0 0 0 4px rgba(42,131,240,.15); border-color:#2a83f0; }
.lbl{ display:block; font-size:.8rem; color: rgb(71 85 105); margin-bottom:.35rem; }

/* Quotes */
.quote{ background:#fff; border:1px solid rgb(241 245 249); border-radius:1rem; padding:1rem; box-shadow:0 8px 30px rgba(0,0,0,.04); }
.quote__by{ font-size:.85rem; color:rgb(100 116 139); margin-top:.4rem; }

/* Icons via CSS masks */
.icon{ width:36px; height:36px; background:linear-gradient(135deg,#2a83f0,#1b3c68); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:contain; mask-size:contain; }
.i-menu{ display:inline-block; width:20px; height:20px; background:currentColor; -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'><path d=\'M3 6h18v2H3V6Zm0 5h18v2H3v-2Zm0 5h18v2H3v-2Z\'/></svg>'); }
.i-pc{ -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'><path d=\'M4 5h16v10H4V5Zm-1 12h18v2H3v-2Z\'/></svg>'); }
.i-printer{ -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'><path d=\'M6 9V3h12v6H6Zm12 2h2a2 2 0 0 1 2 2v5h-4v3H6v-3H2v-5a2 2 0 0 1 2-2h2v3h12v-3Z\'/></svg>'); }
.i-network{ -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'><path d=\'M12 3a4 4 0 1 1-3.87 3H3v2h5.13A4 4 0 0 1 12 15a4 4 0 0 1-3.87-3H3v2h5.13A4 4 0 1 1 12 3Z\'/></svg>'); }
.i-shield{ -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'><path d=\'M12 2 4 5v6c0 5 3.4 9.6 8 11c4.6-1.4 8-6 8-11V5l-8-3Z\'/></svg>'); }
.i-cloud{ -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'><path d=\'M6 19h13a4 4 0 0 0 0-8h-.3A6 6 0 0 0 6 9a5 5 0 0 0 0 10Z\'/></svg>'); }
.i-rental{ -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 24 24\'><path d=\'M5 6h14v10H5V6Zm-2 12h18v2H3v-2Z\'/></svg>'); }

/* Botón flotante WhatsApp */
.wa-float{ position:fixed; right:1rem; bottom:1rem; z-index:60; display:grid; place-items:center;
  width:3.25rem; height:3.25rem; background:#25D366; color:#fff; border-radius:9999px;
  box-shadow:0 10px 15px rgba(0,0,0,.15), 0 4px 6px rgba(0,0,0,.1); transition:transform .15s ease, box-shadow .15s ease; }
.wa-float:hover{ transform:translateY(-2px); box-shadow:0 12px 18px rgba(0,0,0,.18), 0 6px 8px rgba(0,0,0,.12); }
.navlink--active{ color:#0ea5e9; font-weight:600; position:relative; }
.navlink--active::after{ content:""; position:absolute; left:0; right:0; bottom:-.35rem; height:2px; background:#0ea5e9; border-radius:2px; }
