:root{
  --aloe-green:#6BA741;
  --aloe-navy:#1D3D6E;
  --aloe-gold:#C6A252;
  --aloe-gray:#EFEEEE;
  --aloe-danger:#DC3545;
}

/* ==========================
   BASE
========================== */
html, body { overflow-x: hidden; }

body.aloe{
  background: #fff;
}

/* Links */
body.aloe a{ color: var(--aloe-navy); }
body.aloe a:hover{ color: var(--aloe-green); }

/* ==========================
   BOTONES
========================== */
.btn-primary{
  background: var(--aloe-green) !important;
  border-color: var(--aloe-green) !important;
}
.btn-primary:hover{
  background: #5c933c !important;
  border-color: #5c933c !important;
}

.btn-outline-primary{
  border-color: var(--aloe-green) !important;
  color: var(--aloe-green) !important;
}
.btn-outline-primary:hover{
  background: var(--aloe-green) !important;
  color: #fff !important;
}

.btn-dark{
  background: var(--aloe-navy) !important;
  border-color: var(--aloe-navy) !important;
}
.btn-outline-dark{
  border-color: var(--aloe-navy) !important;
  color: var(--aloe-navy) !important;
}
.btn-outline-dark:hover{
  background: var(--aloe-navy) !important;
  color: #fff !important;
}

/* ==========================
   BADGES
========================== */
.badge.bg-dark{ background: var(--aloe-navy) !important; }
.badge.bg-primary{ background: var(--aloe-navy) !important; }
.badge.bg-success{ background: var(--aloe-green) !important; }
.badge.bg-warning{ background: var(--aloe-gold) !important; color:#111 !important; }
.badge.bg-danger{ background: var(--aloe-danger) !important; }

/* ==========================
   HERO
========================== */
#hero{
  background: linear-gradient(180deg, var(--aloe-gray), #fff) !important;
}

/* ==========================
   FOOTER
========================== */
footer.bg-dark{
  background: var(--aloe-navy) !important;
}

/* ==========================
   NAVBAR ALOE
========================== */
.aloe-navbar{
  background: var(--aloe-navy);
  border-bottom: 2px solid rgba(198,162,82,.35);
}

.aloe-navbar .navbar-brand span{
  color: var(--aloe-gray);
  letter-spacing: .2px;
}

.aloe-navbar .navbar-brand img{
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}

.aloe-navbar .nav-link{
  color: rgba(239,238,238,.92) !important;
  border-radius: 10px;
  padding: .5rem .65rem;
}
.aloe-navbar .nav-link:hover,
.aloe-navbar .nav-link:focus{
  color: #fff !important;
  background: rgba(198,162,82,.18);
}

/* Dropdown */
.aloe-navbar .dropdown-menu{
  border: 1px solid rgba(29,61,110,.12);
  box-shadow: 0 .75rem 1.25rem rgba(29,61,110,.12);
}
.aloe-navbar .dropdown-item:active{
  background: rgba(107,167,65,.18);
}

.aloe-navbar .navbar-toggler{
  border-color: rgba(239,238,238,.35);
}
.aloe-navbar .navbar-toggler-icon{
  filter: invert(1) grayscale(1);
}

/* Cart buttons */
#cart-desktop-btn, #cart-mobile-btn{
  color: rgba(239,238,238,.92) !important;
}
#cart-desktop-btn:hover, #cart-mobile-btn:hover{
  color: #fff !important;
}

/* Icons in dropdown */
.dropdown-item i { width: 1.25rem; text-align: center; }

/* ==========================
   CATEGORY CARDS
========================== */
.category-card{
  transition: transform .15s ease, box-shadow .15s ease;
  border: 1px solid rgba(29,61,110,.10);
}
.category-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 .75rem 1.25rem rgba(29,61,110,.12) !important;
}
.category-card .display-6{
  color: var(--aloe-gold);
}

/* ==========================
   CUBO 3D – LOGO
========================== */
.cube-scene{
  width: 240px;
  height: 240px;
  perspective: 900px;
  max-width: 100%;
  overflow: visible;
}
.cube{
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: cube-rotate 26s infinite linear;
}
.cube-face{
  position: absolute;
  width: 240px;
  height: 240px;
  background: linear-gradient(135deg, #fff, #f8f9fa);
  border-radius: 1.25rem;
  box-shadow: 0 15px 40px rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cube-face img{
  width: 65%;
  height: auto;
  opacity: .95;
}

/* Posiciones */
.cube-face.front  { transform: rotateY(0deg) translateZ(120px); }
.cube-face.back   { transform: rotateY(180deg) translateZ(120px); }
.cube-face.right  { transform: rotateY(90deg) translateZ(120px); }
.cube-face.left   { transform: rotateY(-90deg) translateZ(120px); }
.cube-face.top    { transform: rotateX(90deg) translateZ(120px); }
.cube-face.bottom { transform: rotateX(-90deg) translateZ(120px); }

@keyframes cube-rotate{
  0%   { transform: rotateX(0deg) rotateY(0deg); }
  100% { transform: rotateX(360deg) rotateY(360deg); }
}

/* Pausa al hover */
.cube-scene:hover .cube{ animation-play-state: paused; }

/* Responsive cube */
@media (max-width: 576px){
  .cube-scene{
    width: 160px !important;
    height: 160px !important;
    perspective: 700px !important;
    margin-top: 1rem;
  }
  .cube-face{
    width: 160px !important;
    height: 160px !important;
  }

  .cube-face.front  { transform: rotateY(0deg) translateZ(80px) !important; }
  .cube-face.back   { transform: rotateY(180deg) translateZ(80px) !important; }
  .cube-face.right  { transform: rotateY(90deg) translateZ(80px) !important; }
  .cube-face.left   { transform: rotateY(-90deg) translateZ(80px) !important; }
  .cube-face.top    { transform: rotateX(90deg) translateZ(80px) !important; }
  .cube-face.bottom { transform: rotateX(-90deg) translateZ(80px) !important; }

  .cube-face img{ width: 70% !important; }
}

#como-funciona .card {
  transition: transform .2s ease, box-shadow .2s ease;
}

#como-funciona .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}