/* ── Brand Variables ─────────────────────────────────────────────────────── */
:root {
  --green: #84bc26;
  --green-dark: #6ea020;
  --green-light: #e8f5d0;
  --brown: #885815;
  --dark: #1a1a1a;
}

* { box-sizing: border-box; }

body {
  font-family: 'Lato', sans-serif;
  overflow-x: clip;
  background: radial-gradient(circle at top left, rgba(132, 188, 38, .10), transparent 32rem),
              linear-gradient(180deg, #fff 0%, #fbfcf8 100%);
  min-height: 100vh;
}

/* ── Keyframe Animations ─────────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-14px); }
}

@keyframes floatYReverse {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(10px); }
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.7); }
}

@keyframes badgeBounce {
  0%, 100% { transform: rotate(-6deg) scale(1); }
  50%       { transform: rotate(6deg) scale(1.08); }
}

@keyframes shimmerPrice {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes shimmerBanner {
  0%   { transform: translateX(-80px); }
  100% { transform: translateX(100vw); }
}

@keyframes countdownPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.08); }
}

@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(20px, -20px) scale(1.05); }
  66%       { transform: translate(-15px, 15px) scale(0.95); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Hero Entrance Animations ────────────────────────────────────────────── */
.hero-badge    { animation: slideUp 0.6s ease-out both; }
.hero-title    { animation: slideUp 0.7s ease-out 0.1s both; }
.hero-subtitle { animation: slideUp 0.7s ease-out 0.2s both; }
.hero-features { animation: slideUp 0.7s ease-out 0.3s both; }
.hero-ctas     { animation: slideUp 0.7s ease-out 0.4s both; }
.hero-countdown { animation: slideUp 0.7s ease-out 0.55s both; }

.hero-image-wrapper { animation: slideInRight 0.9s ease-out 0.2s both; }
.floating-badge     { animation: scaleIn 0.6s cubic-bezier(0.34,1.56,0.64,1) 1s both; }
.floating-badge-2   { animation: scaleIn 0.6s cubic-bezier(0.34,1.56,0.64,1) 1.2s both; }

/* ── Ongoing Animations ──────────────────────────────────────────────────── */
.hero-img         { /* sin animación float */ }
.bg-blob-1        { animation: blobFloat 12s ease-in-out infinite; }
.bg-blob-2        { animation: blobFloat 15s ease-in-out infinite reverse; }
.pulse-dot        { animation: pulseDot 1.4s ease-in-out infinite; }
.offer-badge      { animation: badgeBounce 2.5s ease-in-out infinite; }
#cd-secs          { animation: countdownPulse 1s ease-in-out infinite; }

/* ── Scroll Reveal Base ──────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ── Header ──────────────────────────────────────────────────────────────── */
#main-header {
  transition: box-shadow 0.3s ease, padding 0.3s ease;
}
#main-header.scrolled {
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
#main-header.scrolled .header-inner {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-primary {
  background: var(--green);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(132,188,38,0.35);
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.btn-primary:hover {
  background: var(--green-dark) !important;
  box-shadow: 0 8px 30px rgba(132,188,38,0.5);
  transform: translateY(-2px);
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}
.btn-primary:hover::after {
  transform: translateX(100%);
}

.btn-outline {
  border: 2px solid var(--green);
  color: var(--green);
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.btn-outline:hover {
  background: var(--green);
  color: #fff;
  transform: translateY(-2px);
}

.btn-ver-todas {
  border: 2px solid #5d9f16;
  color: #5d9f16;
  padding-top: 10px;
  padding-bottom: 10px;
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.btn-ver-todas:hover {
  background: #5d9f16;
  color: #fff;
  transform: translateY(-2px);
}

.btn-product {
  background: var(--green);
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.btn-product:hover {
  background: var(--green-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(132,188,38,0.4);
}

.btn-white-outline {
  border: 2px solid rgba(255,255,255,0.8);
  color: #fff;
  transition: background 0.25s ease, transform 0.2s ease;
}
.btn-white-outline:hover {
  background: rgba(255,255,255,0.12);
  transform: translateY(-2px);
}

/* ── Product Cards ───────────────────────────────────────────────────────── */
.product-card {
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow 0.4s ease;
}
.product-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 24px 48px rgba(0,0,0,0.12) !important;
}
.product-card .card-img {
  transition: transform 0.7s ease;
}
.product-card:hover .card-img {
  transform: scale(1.08);
}

/* ── Price shimmer on card hover ─────────────────────────────────────────── */
.product-card:hover .price-value {
  background: linear-gradient(90deg, var(--green), #a8d64c, var(--green));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerPrice 2s linear infinite;
}

/* ── CTA Banner shimmer ──────────────────────────────────────────────────── */
.cta-banner {
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 60px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  animation: shimmerBanner 4s linear infinite;
}

/* ── Trust Cards ─────────────────────────────────────────────────────────── */
.trust-card {
  transition: transform 0.3s ease;
}
.trust-card:hover {
  transform: translateY(-8px);
}
.trust-icon-wrap {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.trust-card:hover .trust-icon-wrap {
  transform: scale(1.15) rotate(-5deg);
}

/* ── Form ────────────────────────────────────────────────────────────────── */
.form-input {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-input:focus {
  outline: none;
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px rgba(132,188,38,0.18) !important;
}

/* ── Countdown blocks ────────────────────────────────────────────────────── */
.cd-block {
  transition: transform 0.15s ease;
}
.cd-block.flip {
  transform: scaleY(0.8);
}

/* ── Stats section ───────────────────────────────────────────────────────── */
.stat-card {
  transition: transform 0.3s ease;
}
.stat-card:hover {
  transform: translateY(-6px);
}

/* hero-img-clip se reemplaza por SVG clipPath inline (ver HTML) */

/* ── Mobile optimizations ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-img { animation: none; }
  .floating-badge,
  .floating-badge-2 { display: none; }
  .bg-blob-1, .bg-blob-2 { display: none; }

  /* Carousel productos */
  #productos > .container {
    padding-left: 1rem;
    padding-right: 0;
  }
  .products-track {
    display: flex !important;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 1rem !important;
    max-width: 100% !important;
    width: 100%;
    margin: 0 !important;
    padding: 1rem 1.25rem 1.5rem;
  }
  .products-track::-webkit-scrollbar { display: none; }
  .products-track .product-card {
    flex: 0 0 80%;
    scroll-snap-align: start;
    min-width: 0;
  }
  /* Desactivar reveal dentro del carousel — evita cortes por transform en Android */
  .products-track .reveal,
  .products-track .reveal-delay-1,
  .products-track .reveal-delay-2,
  .products-track .reveal-delay-3 {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* CTA banner full width en móvil */
  .cta-banner {
    max-width: 95% !important;
  }
}

/* ── Utility ─────────────────────────────────────────────────────────────── */
.shadow-green {
  box-shadow: 0 8px 32px rgba(132,188,38,0.25);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.animate-fadeIn {
  animation: fadeIn 0.5s ease both;
}