/* custom_v3.css - KKú v3 (FINAL)
   Comentarios:
   - Variables, gradientes, navbar hover, whatsapp button, preloader styles.
*/

/* Variables de color */
:root{
  --brown-dark: #4b2e21;
  --brown-muted: #7a5a4b;
  --brown-cream: #f4e9df;
  --accent-gold: #c79a3a;
  --contact-gradient-start: #f2d3a1;
  --contact-gradient-end: #d18a3b;
}

/* Tipografía */
.font-poppins { font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; }

/* Fondo crema global */
.bg-cream { background: var(--brown-cream); }

/* Botones */
.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border-radius:9999px;
  background:#4b2e21;
  color:white;
  font-weight:600;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  transition:box-shadow .2s;
}
.btn-ghost{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border-radius:9999px;
  border:1px solid #4b2e21;
  color:#4b2e21;
  font-weight:500;
}

/* Hero gradient (cacao seco) */
.hero-gradient{
  background: linear-gradient(135deg, #e8cda0 0%, #d2a679 30%, #b87333 60%, #4b2e21 100%);
}

/* Contact gradient */
.bg-contact-gradient{
  background: linear-gradient(180deg, var(--contact-gradient-start), var(--contact-gradient-end));
}

/* NAVBAR hover effect */
.nav-link{
  position:relative;
  transition: transform .25s ease, color .25s ease;
  color:var(--brown-dark);
  font-weight:500;
}
.nav-link:hover{
  transform:scale(1.08);
  color:var(--accent-gold);
  text-shadow:0 1px 0 rgba(75,46,33,0.08);
}
.nav-logo:hover{ transform:scale(1.03); transition:transform .25s ease; }

/* WHATSAPP FLOAT BUTTON - más grande (solo icono) */
#whatsappFloat{
  width:72px;
  height:72px;
  padding:0;
  background:linear-gradient(135deg,#25D366,#128C7E);
  border-radius:9999px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 30px rgba(0,0,0,0.18);
  transition:transform .16s ease, box-shadow .16s ease;
}
#whatsappFloat:hover{
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 18px 36px rgba(0,0,0,0.22);
}
#whatsappFloat .fa-whatsapp{ font-size:28px; color:white; }

/* Footer personalizado */
footer { background: linear-gradient(180deg, var(--brown-dark), #3e2a21); }

/* PRELOADER (logo + ring pulsante) */
#preloader{
  background: linear-gradient(180deg, rgba(236,210,161,0.95), rgba(209,138,59,0.95));
}
.preloader-circle{
  width:120px;
  height:120px;
  border-radius:9999px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  box-shadow:0 12px 28px rgba(75,46,33,0.16);
}
.preloader-circle::before{
  content:"";
  position:absolute;
  width:140px;
  height:140px;
  border-radius:9999px;
  background: radial-gradient(circle at center, rgba(199,154,58,0.18), transparent 40%);
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse{
  0% { transform: scale(0.9); opacity: 0.7; }
  70% { transform: scale(1.15); opacity: 0.15; }
  100% { transform: scale(1.25); opacity: 0; }
}
.preloader-logo{
  width:64px;
  height:64px;
  border-radius:12px;
  object-fit:cover;
  background:white;
  padding:6px;
}

/* Footer author links (GitHub blanco) */
.footer-author { color: 3e2a21; transition: color .2s ease; }
.footer-author:hover { color: var(--accent-gold); }

/* Utilities */
.text-brown-dark { color: var(--brown-dark); }
.text-brown-muted { color: var(--brown-muted); }


/* Placeholders de imagen */
img[alt^="Producto"], img[alt^="product-placeholder"]{ background: linear-gradient(180deg,#f5efe8,#e9d9c8); object-fit:cover; }




/* Responsive tweaks */
@media (max-width:640px){
  .height-60vh { height:48vh; }
}