@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

:root {
  --primary: #00bcd4;  /* turquesa */
  --secondary: #1e293b; /* gris oscuro */
  --accent: #0ea5e9;    /* azul eléctrico */
}

/* Tipografía y base */
body {
  font-family: 'Poppins', sans-serif;
  line-height: 1.5;
}

/* Tema claro opt-in */
body.light {
  background-color: #f8fafc;
  color: var(--secondary);
}

/* Header y navegación (claro) */
body.light header {
  position: sticky;
  top: 0;
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 100;
}

/* Hovers de navegación sutiles */
nav a:hover {
  color: var(--accent);
  transform: scale(1.05);
}

/* Links y botones base */
a, .btn {
  color: var(--primary);
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}

/* Botón primario moderno (para páginas claras) */
.btn-primary {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}
.btn-primary:hover { background: var(--accent); }
.btn-primary:active { transform: scale(0.97); }

/* Tarjetas (páginas claras) */
.card {
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  background-color: #fff;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}
.card img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

/* Ajustes sutiles para tarjetas de productos/categorías sin forzar fondo (respeta tema oscuro) */
.product-card, .category-card {
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}
.product-card:hover, .category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}
.product-card img, .category-card img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}
.product-card:hover img, .category-card:hover img { filter: brightness(1.05); }

/* Login (claro) */
body.light .login-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
body.light .btn-login {
  background: var(--primary);
  color: #fff;
}
body.light .btn-login:hover { background: var(--accent); }
body.light .input-group input {
  background: #fff;
  border: 1px solid #e5e7eb;
  color: var(--secondary);
}
body.light .logo h1 { color: var(--secondary); }

/* Fondo animado en modo claro (sutil y atractivo) */
body.light #bg-animated,
body.light #bg-orbs { display: block !important; }

/* ====== Aesthetic micro-animations and effects ====== */
/* Reveal-on-scroll utility */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .6s cubic-bezier(0.22,1,0.36,1); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Subtle lift on hover */
.hover-lift { transition: transform .25s ease, box-shadow .25s ease; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: 0 10px 24px rgba(0,0,0,.25); }

/* Modal pop-in animation (used by JS) */
.modal-pop-in { animation: pop .32s ease forwards; }
@keyframes pop { 0% { transform: scale(.96); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* Cart count bump */
.count-bump { animation: bump .35s ease; }
@keyframes bump { 0% { transform: scale(1); } 20% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* Skeleton shimmer (optional utility) */
.skeleton { position: relative; overflow: hidden; background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.12) 20%, rgba(255,255,255,0.06) 40%); background-size: 300% 100%; animation: shimmer 1.25s infinite linear; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ====== Contact page light overrides (ensure clear contrast) ====== */
/* Force light background and readable text on contact.html when body has .light */
body.light .content-section {
  background: #ffffff;
  color: var(--secondary);
  border: 1px solid #e5e7eb;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

body.light h2 {
  color: var(--primary);
  border-bottom: 2px solid var(--secondary);
}

body.light h3 { color: var(--accent); }

body.light .contact-card {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  color: var(--secondary);
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

body.light .contact-icon { color: var(--primary); }

body.light .btn {
  background: var(--primary);
  color: #ffffff;
}
body.light .btn:hover { background: var(--accent); }

body.light .btn-whatsapp { background: #25D366; color: #ffffff; }
body.light .btn-whatsapp:hover { background: #128C7E; }

body.light .btn-email { background: #EA4335; color: #ffffff; }
body.light .btn-email:hover { background: #D93025; }

body.light .step { background: #f8fafc; border-left: 4px solid var(--accent); }
body.light .team-member { background: #f8fafc; }

/* Footer in light mode */
body.light footer { color: var(--gray); border-top: 1px solid #e2e8f0; }

/* Header text color for light mode (fix title visibility) */
body.light header { color: #0f172a; }
body.light header .logo { color: var(--primary); }
body.light header .tagline { color: #475569; }

/* Attractive light background with subtle mesh + blobs */
body.light #bg-animated {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1000px 500px at 18% -10%, rgba(56,189,248,0.10), transparent 60%),
    radial-gradient(900px 480px at 82% 110%, rgba(139,92,246,0.08), transparent 60%),
    linear-gradient(120deg, #f7fbff, #fdf8ff, #fff7ed);
  background-size: 200% 200%, 200% 200%, 200% 200%;
  animation: moveGradient 36s ease-in-out infinite alternate;
  filter: none;
}

body.light #bg-orbs {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

body.light .orb { filter: blur(50px); opacity: 0.16; mix-blend-mode: normal; }
body.light .orb.teal   { background: radial-gradient(circle at 30% 30%, rgba(20,184,166,0.35), transparent 58%); }
body.light .orb.cyan   { background: radial-gradient(circle at 30% 30%, rgba(56,189,248,0.32), transparent 58%); }
body.light .orb.violet { background: radial-gradient(circle at 30% 30%, rgba(139,92,246,0.28), transparent 58%); }

/* Slight glass effect for cards/sections (keeps readability) */
body.light .content-section {
  background: rgba(255,255,255,0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(14,165,233,0.12);
  box-shadow: 0 8px 24px rgba(15,23,42,0.06);
}