:root{
  --refpal-blue:#17386e;
  --refpal-blue-2:#0f2852;
  --refpal-ink:#1f2b45;
  --refpal-muted:#667085;
  --refpal-line:#e6ebf3;
  --refpal-soft:#f7f9fc;
  --refpal-shadow:0 14px 34px rgba(18,35,75,.08);
}

/* =========================
   HEADER GENERAL
========================= */
.site-header{
  background:rgba(255,255,255,.96) !important;
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(230,235,243,.9) !important;
  box-shadow:0 8px 26px rgba(18,35,75,.04);
}

.site-header__inner{
  max-width:1240px !important;
  padding:12px 24px !important;
}

.site-header__logo{
  height:78px !important;
  object-fit:contain !important;
}

.site-header__nav{
  gap:20px !important;
}

.site-header__nav a{
  color:var(--refpal-ink) !important;
  font-weight:750 !important;
  font-size:15px !important;
  letter-spacing:.1px;
  padding:9px 4px;
  position:relative;
}

.site-header__nav a::after{
  content:"";
  position:absolute;
  left:4px;
  right:4px;
  bottom:2px;
  height:2px;
  background:var(--refpal-blue);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .18s ease;
}

.site-header__nav a:hover::after{
  transform:scaleX(1);
}

/* =========================
   CATÁLOGO
========================= */
body .layout{
  align-items:start !important;
  gap:28px !important;
}

body .side,
body aside.card{
  border:1px solid var(--refpal-line) !important;
  border-radius:24px !important;
  box-shadow:var(--refpal-shadow) !important;
  background:#fff !important;
}

body .side h3{
  color:var(--refpal-ink) !important;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-size:13px !important;
}

body input,
body select,
body textarea{
  border:1px solid var(--refpal-line) !important;
  border-radius:14px !important;
  background:#fff !important;
  box-shadow:none !important;
}

body input:focus,
body select:focus,
body textarea:focus{
  outline:none !important;
  border-color:#b7c8ed !important;
  box-shadow:0 0 0 4px rgba(23,56,110,.08) !important;
}

/* Cards de producto del catálogo */
body .p{
  border:1px solid var(--refpal-line) !important;
  border-radius:24px !important;
  background:#fff !important;
  overflow:hidden !important;
  box-shadow:var(--refpal-shadow) !important;
  display:flex !important;
  flex-direction:column !important;
  min-height:420px !important;
  transition:transform .18s ease, box-shadow .18s ease;
}

body .p:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 42px rgba(18,35,75,.12) !important;
}

body .p img{
  width:100% !important;
  height:230px !important;
  object-fit:contain !important;
  padding:18px !important;
  background:#f8fafc !important;
  border-bottom:1px solid var(--refpal-line) !important;
}

body .p .c{
  padding:18px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:9px !important;
  flex:1 !important;
}

body .p .name{
  color:var(--refpal-ink) !important;
  font-size:21px !important;
  line-height:1.16 !important;
  font-weight:900 !important;
  min-height:50px;
}

body .p .sku{
  color:var(--refpal-muted) !important;
  font-size:12px !important;
  text-transform:uppercase;
  letter-spacing:.04em;
}

body .p .price{
  color:var(--refpal-blue) !important;
  font-size:24px !important;
  font-weight:950 !important;
  margin-top:auto !important;
}

body .p .pill{
  margin-top:8px !important;
  width:100% !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  min-height:46px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,var(--refpal-blue),var(--refpal-blue-2)) !important;
  color:#fff !important;
  font-weight:900 !important;
  text-decoration:none !important;
  letter-spacing:.04em;
}

/* =========================
   CARRITO
========================= */
body .grid:has(#items){
  grid-template-columns:minmax(0,1fr) 360px !important;
  gap:28px !important;
  align-items:start !important;
}

body section.card:has(#items),
body aside.card:has(#waBtn){
  border:1px solid var(--refpal-line) !important;
  border-radius:26px !important;
  box-shadow:var(--refpal-shadow) !important;
  background:#fff !important;
  padding:22px !important;
}

body aside.card:has(#waBtn){
  position:sticky;
  top:116px;
}

body .item{
  border:1px solid var(--refpal-line) !important;
  border-radius:22px !important;
  padding:18px !important;
  margin-bottom:16px !important;
  background:#fff !important;
  display:grid !important;
  grid-template-columns:140px minmax(0,1fr) 190px !important;
  gap:20px !important;
  align-items:center !important;
}

body .item:first-child{
  border-top:1px solid var(--refpal-line) !important;
}

body .item__img{
  width:140px !important;
  height:140px !important;
  object-fit:contain !important;
  border-radius:18px !important;
  background:#f8fafc !important;
  border:1px solid var(--refpal-line) !important;
  padding:10px;
}

body .item__name{
  color:var(--refpal-ink) !important;
  font-size:23px !important;
  font-weight:950 !important;
  line-height:1.14 !important;
}

body .item__sku{
  margin-top:8px !important;
  color:var(--refpal-muted) !important;
  font-size:13px !important;
  letter-spacing:.04em;
  text-transform:uppercase;
}

body .item__meta{
  margin-top:10px !important;
  color:var(--refpal-muted) !important;
  font-size:15px !important;
}

body .item__side{
  align-items:flex-end !important;
  gap:12px !important;
}

body .qty{
  background:#f8fafc;
  border:1px solid var(--refpal-line);
  border-radius:999px;
  padding:6px;
}

body .qty .btn,
body .btn{
  border-radius:999px !important;
  border:1px solid var(--refpal-line) !important;
  background:#fff !important;
  color:var(--refpal-ink) !important;
  font-weight:850 !important;
}

body .qtyNum{
  min-width:34px !important;
  font-size:16px !important;
  color:var(--refpal-ink) !important;
}

body .sub{
  color:var(--refpal-blue) !important;
  font-size:20px !important;
  font-weight:950 !important;
}

body .tot{
  color:var(--refpal-blue) !important;
  font-size:38px !important;
  font-weight:950 !important;
}

body #waBtn,
body .pill:not(.small){
  background:linear-gradient(135deg,var(--refpal-blue),var(--refpal-blue-2)) !important;
  color:#fff !important;
  border-radius:999px !important;
  min-height:48px !important;
  font-weight:950 !important;
  box-shadow:0 12px 28px rgba(23,56,110,.22);
}

body #clearBtn{
  color:#8a1f1f !important;
  border-color:#ffd7d7 !important;
  background:#fffafa !important;
}

/* =========================
   LOGIN / CUENTA / ADMIN
========================= */
body .panel,
body .card{
  border-color:var(--refpal-line) !important;
}

body h1,
body h2,
body h3{
  color:var(--refpal-ink);
}

body .btnPrimary,
body .btnBlue{
  background:linear-gradient(135deg,var(--refpal-blue),var(--refpal-blue-2)) !important;
  border-color:var(--refpal-blue) !important;
  color:#fff !important;
  box-shadow:0 10px 26px rgba(23,56,110,.18);
}

body .msg{
  border-radius:16px !important;
}

/* =========================
   INSTITUCIONAL / GALERÍA
========================= */
body .galleryItem{
  border-radius:24px !important;
  overflow:hidden !important;
}

body .galleryItem img{
  transition:transform .22s ease;
}

body .galleryItem:hover img{
  transform:scale(1.025);
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 980px){
  body .grid:has(#items){
    grid-template-columns:1fr !important;
  }

  body aside.card:has(#waBtn){
    position:static !important;
  }

  body .item{
    grid-template-columns:110px minmax(0,1fr) !important;
  }

  body .item__img{
    width:110px !important;
    height:110px !important;
  }

  body .item__side{
    grid-column:1 / -1 !important;
    align-items:flex-start !important;
    padding-left:130px !important;
  }
}

@media (max-width: 700px){
  .site-header__inner{
    align-items:center !important;
  }

  .site-header__logo{
    height:66px !important;
  }

  body .item{
    grid-template-columns:1fr !important;
  }

  body .item__img{
    width:100% !important;
    height:230px !important;
  }

  body .item__side{
    padding-left:0 !important;
  }

  body .p{
    min-height:auto !important;
  }
}

/* =========================
   AJUSTE FINO A2
   - menú más oscuro
   - qty del carrito horizontal y centrado
========================= */

.site-header__nav a,
.site-header__nav a:visited{
  color:#243a69 !important;
  opacity:1 !important;
  font-weight:800 !important;
}

.site-header__nav a:hover{
  color:#17386e !important;
}

.site-header__nav a[aria-current="page"],
.site-header__nav a.active{
  color:#17386e !important;
}

/* Carrito: columna lateral del item */
.item__side{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  min-width:170px !important;
  text-align:center !important;
}

/* Precio del item */
.item__side .sub{
  text-align:center !important;
  min-width:auto !important;
  width:100% !important;
}

/* Control de cantidad */
.qty{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  padding:6px 10px !important;
  border:1px solid var(--refpal-line) !important;
  border-radius:999px !important;
  background:#f8fafc !important;
  min-width:128px !important;
  margin:0 auto !important;
}

.qty .btn{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:18px !important;
  line-height:1 !important;
}

.qtyNum{
  min-width:28px !important;
  text-align:center !important;
  font-size:16px !important;
  font-weight:900 !important;
  color:#1f2b45 !important;
}

/* Quitar */
.item__side .danger,
.item__side .btn.danger{
  margin-top:2px !important;
}

/* Responsive */
@media (max-width: 980px){
  .item__side{
    align-items:flex-start !important;
    text-align:left !important;
  }

  .qty{
    margin:0 !important;
  }
}

/* =========================
   AJUSTE FINO A2
   - menú más oscuro
   - qty del carrito horizontal y centrado
========================= */

.site-header__nav a,
.site-header__nav a:visited{
  color:#243a69 !important;
  opacity:1 !important;
  font-weight:800 !important;
}

.site-header__nav a:hover{
  color:#17386e !important;
}

.site-header__nav a[aria-current="page"],
.site-header__nav a.active{
  color:#17386e !important;
}

/* Carrito: columna lateral del item */
.item__side{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  min-width:170px !important;
  text-align:center !important;
}

/* Precio del item */
.item__side .sub{
  text-align:center !important;
  min-width:auto !important;
  width:100% !important;
}

/* Control de cantidad */
.qty{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  padding:6px 10px !important;
  border:1px solid var(--refpal-line) !important;
  border-radius:999px !important;
  background:#f8fafc !important;
  min-width:128px !important;
  margin:0 auto !important;
}

.qty .btn{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:18px !important;
  line-height:1 !important;
}

.qtyNum{
  min-width:28px !important;
  text-align:center !important;
  font-size:16px !important;
  font-weight:900 !important;
  color:#1f2b45 !important;
}

/* Quitar */
.item__side .danger,
.item__side .btn.danger{
  margin-top:2px !important;
}

/* Responsive */
@media (max-width: 980px){
  .item__side{
    align-items:flex-start !important;
    text-align:left !important;
  }

  .qty{
    margin:0 !important;
  }
}