/* ===== Ser-Pyy — custom.css ===== */
:root{
  --navH: 72px;
  --blue:#4864ad;      /* principal */
  --green:#16864b;     /* acento 1 */
  --orange:#ff7c23;    /* acento 2 */
  --cream:#f6f5b2;     /* fondo pastel */
  --dark:#0e0f12;
  scroll-padding-top: var(--navH);
}

html,body{background:#fff;color:#1f2833;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans";}
.bg-dark{background:var(--dark)!important;}
.bg-pastel{background:var(--cream)!important;}
.text-shadow{text-shadow:0 6px 18px rgba(0,0,0,.35)}
.fw-black{font-weight:900}
.opacity-90{opacity:.9}

/* ===== Navbar ===== */
.bg-black-60{background:rgba(0,0,0,.65)!important;backdrop-filter:saturate(140%) blur(6px)}
.navbar .nav-link{color:#fff!important}
.navbar .nav-link:hover{opacity:.85}

/* ===== Hero ===== */
.hero-serpyy{position:relative;min-height:78vh;display:grid;place-items:center;background:var(--dark);overflow:hidden}
.hero-serpyy .overlay{
  position:absolute;inset:0;
  background:
    radial-gradient(70% 60% at 50% 25%, rgba(72,100,173,.25), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.8));
  z-index:0
}
.hero-serpyy .container{position:relative;z-index:1;color:#fff}
.logo-hero{height:250px;width:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.5))}
.wave-bottom{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:120px;display:block;pointer-events:none;z-index:1}
.wave-bottom path{fill:var(--cream);filter:drop-shadow(0 -2px 8px rgba(0,0,0,.06))}
.wave-down{transform:scaleY(-1)}

/* ===== Títulos ===== */
.section-head{font-weight:900;letter-spacing:.2px;margin-bottom:1rem}
.section-head::after{
  content:"";display:block;width:120px;height:3px;margin-top:.55rem;
  background:linear-gradient(90deg,var(--blue),var(--orange))
}

/* ===== Feature cards ===== */
.feature-card{
  border:1px solid rgba(0,0,0,.06);
  border-radius:1rem;background:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.08)
}
.feature-card .icon-wrap{
  width:56px;height:56px;display:grid;place-items:center;margin-inline:auto;
  border-radius:50%;
  background: radial-gradient(60% 60% at 40% 30%, var(--orange), var(--green));
  color:#111;font-size:1.25rem
}

/* ===== Cards de producto ===== */
.card-glass{
  border:0;border-radius:1rem;overflow:hidden;background:rgba(255,255,255,.95);
  box-shadow:0 10px 26px rgba(0,0,0,.14)
}
.obj-contain{object-fit:contain;background:#fff;height:260px}
.card-title{font-weight:800}
.carousel .carousel-item img{height:260px}
a[data-fancybox]{cursor:zoom-in}

/* ===== Botones (marca) ===== */
.btn-brand{
  --bs-btn-color:#fff; --bs-btn-bg: var(--green); --bs-btn-border-color: var(--green);
  --bs-btn-hover-bg:#169c55; --bs-btn-hover-border-color:#169c55; --bs-btn-active-bg:#0f6f3e
}
.btn-outline-brand{
  --bs-btn-color: var(--blue); --bs-btn-border-color: var(--blue);
  --bs-btn-hover-bg: var(--blue); --bs-btn-hover-border-color: var(--blue); --bs-btn-hover-color:#fff
}
.btn-effect-ujarak{transition:transform .15s ease}
.btn-effect-ujarak:hover{transform:translateY(-2px)}

/* ===== RD Mailform ===== */
.rd-mailform .form-wrap{position:relative}
.rd-mailform .form-input{
  width:100%; border:1px solid #d9dbe0; background:#fff;
  height:48px; padding:0 14px; border-radius:.65rem; outline:0;
  transition: box-shadow .15s ease, border-color .15s ease
}
.rd-mailform textarea.form-input{height:130px; padding:12px 14px; resize:vertical}
.rd-mailform .form-input::placeholder{color:#8a8f98}
.rd-mailform .form-input:focus{
  border-color: var(--blue);
  box-shadow: 0 0 0 .2rem rgba(72,100,173,.18)
}
.rd-mailform .btn{height:48px; border-radius:.65rem}

/* ===== WhatsApp Fancy ===== */
.whatsapp-fancy{
  position:fixed;left:18px;bottom:18px;z-index:9999;
  display:inline-flex;align-items:center;gap:.5rem;
  background:#25D366;color:#0b2; padding:.65rem 1rem;border-radius:999px;
  font-weight:800;box-shadow:0 10px 26px rgba(0,0,0,.25);
  transform:translateZ(0);transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.whatsapp-fancy i{font-size:1.2rem}
.whatsapp-fancy:hover{transform:scale(1.04);background:linear-gradient(90deg,var(--blue),var(--orange));color:#fff}
.whatsapp-fancy span{line-height:1}

/* ===== Snackbars ===== */
.snackbars{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  width:auto;max-width:380px;padding:14px 17px;background-color:#151515;color:#fff;
  border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.25);z-index:9999;opacity:0;
  transition:opacity .3s, bottom .3s
}
.snackbars.show{opacity:1;bottom:40px}

/* ===== Utilidades ===== */
.object-cover{width:100%;height:100%;object-fit:cover}
.ratio.rounded-4 iframe{border-radius:1rem}