:root{
  --rojo:#D32F2F;
  --umana-red:#D32F2F;
  --umana-red-dark:#B91C1C;
  --umana-red-soft:#ffe2e2;

  --umana-ink:#20283A;
  --umana-ink-2:#2B3448;
  --umana-muted:#667085;
  --umana-muted-2:#8A94A6;

  --umana-lime:#D4E053;
  --umana-sage:#DDEBE4;
  --umana-lavender:#E9E2FF;
  --umana-coral:#FFD6CB;
  --umana-rose:#FFE5EC;
  --umana-peach:#FFF1E9;

  --bg:#fbfbff;
  --bg-soft:#f7fbf8;
  --card:#ffffff;
  --card-soft:rgba(255,255,255,.88);
  --text:#20283A;
  --muted:#667085;

  --umana-line:rgba(32,40,58,.08);
  --umana-line-strong:rgba(32,40,58,.14);
  --umana-shadow:0 14px 36px rgba(32,40,58,.08);
  --umana-shadow-soft:0 8px 22px rgba(32,40,58,.06);
  --umana-radius:24px;
  --umana-radius-md:18px;
  --umana-radius-sm:14px;
  --umana-site-max:1080px;
  --umana-site-wide:1224px;
}

html{
  scroll-behavior:smooth;
}

html,
body{
  min-height:100%;
}

body{
  margin:0;
  color:var(--umana-ink);
  font-family:"Avenir Next","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(233,226,255,.82), transparent 62%),
    radial-gradient(780px 420px at 92% 5%, rgba(221,235,228,.90), transparent 58%),
    radial-gradient(760px 440px at 58% 18%, rgba(255,214,203,.60), transparent 64%),
    radial-gradient(760px 440px at 5% 74%, rgba(212,224,83,.18), transparent 58%),
    linear-gradient(180deg, #fbfbff 0%, #f7fbf8 46%, #fff8f5 100%) !important;
  color:var(--umana-ink) !important;
}

::selection{
  background:rgba(211,47,47,.14);
  color:var(--umana-ink);
}

a{
  color:var(--umana-red);
  text-decoration:none;
}

a:hover{
  color:var(--umana-red-dark);
}

img{
  max-width:100%;
}

.layout{
  max-width:calc(var(--umana-site-max) + 36px);
  margin:18px auto 34px;
  padding:0 18px;
}

.content{
  position:relative;
}

.container{
  max-width:var(--umana-site-max);
  margin:0 auto;
  padding:0 18px;
}

.card,
.checkout-page-card,
.checkout-page-wizard,
.checkout-step-card,
.account-page-card,
.cart-page-card,
.pm-section-card,
.modal-card,
.um-news-drop{
  background:var(--card-soft) !important;
  color:var(--umana-ink) !important;
  border:1px solid var(--umana-line) !important;
  border-radius:var(--umana-radius-md) !important;
  box-shadow:var(--umana-shadow) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.card .body{
  padding:18px;
}

.grid{
  gap:20px;
}

.muted,
.small,
#productsSentinel,
.checkout-section-sub,
.um-hint,
.copy,
.um-news-head span{
  color:var(--umana-muted) !important;
}

.price,
.price-new,
.checkout-section-title,
.brand-title,
.um-news-head b{
  color:var(--umana-ink) !important;
}

.btn,
button.btn,
input[type="submit"].btn,
input[type="button"].btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:0 16px;
  border-radius:999px !important;
  border:1px solid rgba(32,40,58,.10) !important;
  background:rgba(255,255,255,.9) !important;
  color:var(--umana-ink) !important;
  font-weight:700;
  box-shadow:0 8px 18px rgba(32,40,58,.06);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}

.btn:hover,
button.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 12px 24px rgba(32,40,58,.08);
  border-color:rgba(32,40,58,.16) !important;
}

.btn:active,
button.btn:active{
  transform:translateY(1px);
}

.btn.primary,
.btn.btn-red,
.btn-next-pill,
.btn-account-login,
.btn-checkout-cart,
.btn-empty-primary{
  background:linear-gradient(180deg,var(--umana-red) 0%, var(--umana-red-dark) 100%) !important;
  color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 14px 28px rgba(211,47,47,.22) !important;
}

.btn.primary:hover,
.btn.btn-red:hover,
.btn-next-pill:hover,
.btn-account-login:hover,
.btn-checkout-cart:hover,
.btn-empty-primary:hover{
  box-shadow:0 18px 34px rgba(211,47,47,.26) !important;
}

.btn-empty-ghost,
.btn-account-register{
  background:rgba(255,255,255,.72) !important;
  color:var(--umana-ink) !important;
  border:1px solid var(--umana-line) !important;
}

.btn-cart-continue,
.btn-cart-backpill{
  background:linear-gradient(180deg,var(--umana-lime) 0%, #C9D747 100%) !important;
  color:var(--umana-ink) !important;
  border:1px solid var(--umana-line) !important;
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"])),
select,
textarea{
  width:100%;
  border:1px solid rgba(32,40,58,.10) !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.94) !important;
  color:var(--umana-ink) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus),
select:focus,
textarea:focus{
  outline:none;
  border-color:rgba(211,47,47,.34) !important;
  box-shadow:0 0 0 4px rgba(211,47,47,.08) !important;
}

input::placeholder,
textarea::placeholder{
  color:var(--umana-muted-2);
}

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

th,
td{
  color:var(--umana-ink);
}

thead th{
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--umana-muted);
  border-bottom:1px solid var(--umana-line);
}

tbody td{
  border-bottom:1px solid rgba(32,40,58,.06);
}

.topbar{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:99999 !important;

  background:rgba(255,255,255,.86) !important;
  border-bottom:1px solid rgba(32,40,58,.06) !important;
  box-shadow:0 10px 28px rgba(32,40,58,.06) !important;
  backdrop-filter:blur(18px) saturate(1.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.12);
}
body{
  padding-top:76px !important;
}

.topbar .inner{
  max-width:var(--umana-site-wide);
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:24px;
  min-height:76px;
}

.brand{
  color:var(--umana-ink) !important;
  gap:12px !important;
}

.brand-mark{
  display:block;
  height:54px;
  width:auto;
  max-width:280px;
  object-fit:contain;
}

.brand-copy{
  display:none !important;
}

.brand .brand-dot{
  width:26px !important;
  height:26px !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#8b82b9 !important;
  font-size:22px !important;
  border-radius:0 !important;
}

.brand .brand-dot::before{
  content:"✿";
  display:block;
  line-height:1;
  transform:rotate(-18deg);
}

.brand-title{
  letter-spacing:.2em;
  color:#1f2940 !important;
  font-size:20px !important;
  font-weight:700 !important;
}

.brand-subtitle{
  color:var(--umana-muted) !important;
  font-size:11px !important;
  margin-top:2px !important;
}

.actions{
  gap:14px !important;
}

.icon-btn,
.menu-toggle,
.nav-toggle{
  border-color:rgba(32,40,58,.08) !important;
  background:transparent !important;
  box-shadow:none !important;
}

.icon-btn svg{
  stroke:var(--umana-ink) !important;
}

.icon-btn .badge{
  background:var(--umana-red) !important;
  box-shadow:none !important;
}

.main-nav{
  background:transparent !important;
  border:0 !important;
  justify-self:center;
  gap:10px;
  padding:0 !important;
}

.main-nav a,
.main-nav .nav-dd-toggle{
  color:var(--umana-ink-2) !important;
  font-size:15px !important;
  font-weight:600 !important;
  padding:10px 14px !important;
  border-radius:999px !important;
  white-space:nowrap;
}

.main-nav a:hover,
.main-nav .nav-dd-toggle:hover,
.main-nav a.active{
  color:var(--umana-red) !important;
  background:rgba(255,255,255,.7) !important;
  box-shadow:inset 0 0 0 1px rgba(211,47,47,.10) !important;
}

.main-nav .nav-date{
  display:none !important;
}

.nav-has-caret::after{
  content:"⌄";
  margin-left:7px;
  font-size:12px;
  vertical-align:2px;
}

.search-wrap{
  position:relative;
  display:flex;
  align-items:center;
  width:320px;
  max-width:320px;
  height:50px;
  border-radius:999px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(32,40,58,.08);
  box-shadow:0 10px 24px rgba(32,40,58,.05);
  padding:0 14px;
}

.search-wrap .icon-btn{
  display:none !important;
}

.search-wrap form{
  width:100%;
}

.search-wrap input{
  width:100% !important;
  opacity:1 !important;
  pointer-events:auto !important;
  position:static !important;
  transform:none !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0 34px 0 2px !important;
}

.search-wrap::after{
  content:"";
  position:absolute;
  right:18px;
  top:50%;
  width:18px;
  height:18px;
  transform:translateY(-50%);
  border:2px solid #8f98a9;
  border-radius:999px;
  box-sizing:border-box;
}

.search-wrap::before{
  content:"";
  position:absolute;
  right:13px;
  top:30px;
  width:9px;
  height:2px;
  background:#8f98a9;
  transform:rotate(45deg);
  border-radius:2px;
}

.freebar{
  background:rgba(255,255,255,.72) !important;
  border:1px solid rgba(32,40,58,.08) !important;
  box-shadow:var(--umana-shadow-soft) !important;
}

.freebar .pill{
  background:rgba(212,224,83,.26) !important;
  color:#61710c !important;
  box-shadow:none !important;
}

.freebar .track{
  background:rgba(32,40,58,.08) !important;
}

.freebar .prog{
  background:linear-gradient(90deg,#D4E053 0%, #d7b96e 100%) !important;
}

.prod-card,
.grid > .card{
  overflow:hidden;
}

.prod-card .img{
  background:
    radial-gradient(circle at 50% 0%, rgba(233,226,255,.58), transparent 52%),
    linear-gradient(180deg,#ffffff 0%, #fbfbff 100%) !important;
  border-bottom:1px solid rgba(32,40,58,.06) !important;
}

.prod-card .img img{
  filter:drop-shadow(0 16px 22px rgba(32,40,58,.08));
}

.prod-title{
  color:var(--umana-ink) !important;
  line-height:1.25;
}

.price-line{
  display:flex;
  align-items:flex-end;
  gap:10px;
}

.price-old{
  color:var(--umana-muted) !important;
}

.price-new,
.price{
  font-family:Inter, "Avenir Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight:750;
  font-size:1.12rem;
  line-height:1.15;
  letter-spacing:-.012em;
  color:#C83A36;
  font-variant-numeric:tabular-nums;
}

.badge-chip{
  border:1px solid rgba(32,40,58,.08) !important;
  box-shadow:none !important;
}

.badge-featured{
  background:rgba(255,214,203,.5) !important;
  color:#8d4a2e !important;
  border-color:rgba(255,214,203,.7) !important;
}

.badge-category{
  background:rgba(221,235,228,.7) !important;
  color:#3b5d52 !important;
  border-color:rgba(188,213,201,.9) !important;
}

.price-sticker{
  background:linear-gradient(180deg,#f8fbdd 0%, #dfe89a 100%) !important;
  color:#4c5213 !important;
  border:1px solid rgba(133,147,46,.18) !important;
  box-shadow:0 12px 18px rgba(100,109,27,.12) !important;
}

.news-wrap.open .um-news-drop{
  display:block;
}

.um-news-item:hover{
  background:rgba(255,255,255,.9) !important;
  border-color:rgba(211,47,47,.10) !important;
  box-shadow:0 14px 24px rgba(32,40,58,.08) !important;
}

.checkout-page-head h1,
.cart-page-head h1,
.account-page-head h1,
h1,
h2,
h3{
  color:var(--umana-ink);
}

.wiz-steps li{
  background:rgba(255,255,255,.66) !important;
  border:1px solid rgba(32,40,58,.08) !important;
  color:var(--umana-muted) !important;
}

.wiz-steps li.active{
  background:rgba(255,255,255,.95) !important;
  color:var(--umana-ink) !important;
  box-shadow:var(--umana-shadow-soft) !important;
}

.wiz-steps li::before{
  background:rgba(212,224,83,.3) !important;
  color:var(--umana-ink) !important;
}

.wiz-steps li.active::before{
  background:var(--umana-red) !important;
  color:#fff !important;
}

.checkout-summary-topbar,
.checkout-benefits,
#coupon_box{
  background:rgba(255,255,255,.78) !important;
  border:1px solid rgba(32,40,58,.08) !important;
  border-radius:18px !important;
  box-shadow:none !important;
}

.um-field.invalid input,
.um-field.invalid select,
.um-field.invalid textarea{
  border-color:rgba(211,47,47,.34) !important;
  box-shadow:0 0 0 4px rgba(211,47,47,.08) !important;
}

.modal-back{
  background:rgba(32,40,58,.24) !important;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.cart-empty-card,
.account-page-card,
.checkout-page-card,
.card.cart-wrap{
  overflow:hidden;
}

.qty-step,
.um-ship-speed-card,
.pm-card{
  border-color:rgba(32,40,58,.10) !important;
  background:rgba(255,255,255,.88) !important;
  box-shadow:none !important;
}

.um-ship-speed-card[data-speed="normal"] .um-ship-speed-badge,
.pm-badge{
  background:rgba(212,224,83,.26) !important;
  color:#61710c !important;
}

.row-canceled{
  opacity:.7;
}
/* Botón Comprar en cards de producto — lima UMANA */
.prod-actions .btn-buy{
  background:linear-gradient(180deg,#DDE85B 0%, var(--umana-lime) 100%) !important;
  color:var(--umana-ink) !important;
  border-color:rgba(150,165,35,.18) !important;
  box-shadow:
    0 12px 22px rgba(212,224,83,.28),
    inset 0 1px 0 rgba(255,255,255,.42) !important;
  font-weight:800;
}

.prod-actions .btn-buy:hover{
  background:linear-gradient(180deg,#E4EE68 0%, #C9D747 100%) !important;
  color:var(--umana-ink) !important;
  box-shadow:
    0 16px 28px rgba(212,224,83,.34),
    inset 0 1px 0 rgba(255,255,255,.46) !important;
}
@media (max-width:900px){
  .topbar .inner{
    grid-template-columns:auto auto;
  }

  .main-nav{
    display:none !important;
    grid-column:1 / -1;
    justify-self:stretch;
  }

  .main-nav.open{
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:12px !important;
    background:rgba(255,255,255,.92) !important;
    border-radius:22px;
    box-shadow:0 16px 34px rgba(32,40,58,.12);
  }

  .layout{
    margin:12px auto 28px;
    padding:0 14px;
  }

  .container{
    padding:0 14px;
  }

  .actions{
    grid-column:1 / -1;
    justify-content:flex-end;
  }

  .search-wrap{
    width:100%;
    max-width:none;
  }
@media (max-width:900px){
  body{
    padding-top:132px !important;
  }
}

@media (max-width:640px){
  body{
    padding-top:124px !important;
  }
}

@media (max-width:640px){
  .topbar .inner{
    gap:14px;
  }

  .brand-title{
    font-size:16px !important;
    letter-spacing:.16em !important;
  }

  .brand-mark{
    height:46px;
  }

  .search-wrap{
    height:46px;
    padding:0 12px;
  }

  .search-wrap .icon-btn{
    display:inline-flex !important;
  }

  .card .body{
    padding:15px;
  }

  .btn,
  button.btn,
  .btn.primary,
  .btn-next-pill,
  .btn-checkout-cart,
  .btn-account-login{
    width:100%;
  }

  .prod-actions{
    flex-wrap:wrap;
  }

  .prod-actions input[type="number"]{
    min-width:84px;
  }
/* =========================================================
   HEADER · LOGO REAL IGUAL FOOTER
   ========================================================= */

header.topbar .store-brand-real{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  flex:0 0 auto !important;
  text-decoration:none !important;
  line-height:0 !important;
}

header.topbar .header-brand-image{
  width:56px !important;
  height:56px !important;
  max-width:none !important;
  display:block !important;
  object-fit:contain !important;
  border-radius:18px !important;
  background:transparent !important;
  box-shadow:0 10px 22px rgba(32,40,58,.08) !important;
}

/* Apagar cualquier logo viejo dibujado por CSS */
header.topbar .nav-brand-icon,
header.topbar .nav-brand-icon::before,
header.topbar .nav-brand-icon::after,
header.topbar .brand-landing-img,
header.topbar .brand-landing-icon,
header.topbar .brand-u,
header.topbar .brand-dot-real,
header.topbar .brand-mark,
header.topbar .brand-copy,
header.topbar .brand .brand-dot{
  display:none !important;
  content:none !important;
}

header.topbar.um-collapsed .header-brand-image{
  width:48px !important;
  height:48px !important;
  border-radius:16px !important;
}

@media (max-width:640px){
  header.topbar .header-brand-image{
    width:48px !important;
    height:48px !important;
    border-radius:16px !important;
  }
}

/* =========================================================
   HEADER · color igual footer arriba + glass lima al scrollear
   ========================================================= */
header.topbar{
  transition:
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    backdrop-filter .22s ease,
    -webkit-backdrop-filter .22s ease !important;
}

header.topbar:not(.um-collapsed){
  background:#D4E053 !important;
  border-bottom:1px solid rgba(150,165,35,.24) !important;
  box-shadow:
    0 18px 42px rgba(32,40,58,.08),
    0 14px 34px rgba(212,224,83,.18) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

header.topbar.um-collapsed{
  background:rgba(212,224,83,.62) !important;
  border-bottom:1px solid rgba(150,165,35,.22) !important;
  box-shadow:
    0 10px 28px rgba(32,40,58,.06),
    0 12px 34px rgba(212,224,83,.18) !important;
  backdrop-filter:blur(18px) saturate(1.18) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.18) !important;
}