/* Styles with responsiveness and modern animations (see analysis above) */
:root{--bg:#0b0f0d;--card:rgba(255,255,255,.06);--card-stroke:rgba(255,255,255,.12);--tx:#eaf7ef;--muted:#b7c8be;--brand:#2ab673;--brand-2:#76e3a1;--danger:#ff4d6d;--shadow:0 10px 30px rgba(0,0,0,.25);--radius:20px;--speed:1}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;background:radial-gradient(1200px 600px at 10% -10%,rgba(42,182,115,.15),transparent),radial-gradient(800px 500px at 90% 10%,rgba(118,227,161,.15),transparent),var(--bg);color:var(--tx);line-height:1.6}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:clamp(16px,2vw,24px)}
.site-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);background:linear-gradient(180deg,rgba(11,15,13,.7),rgba(11,15,13,.4));border-bottom:1px solid var(--card-stroke)}
.header-inner{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--tx);text-decoration:none;font-weight:800;letter-spacing:.5px}
.brand-name{background:linear-gradient(120deg,var(--brand-2),#d3ffe7,var(--brand-2));background-size:200% 200%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer calc(6s/var(--speed)) linear infinite;position:relative}
.brand-name::after{content:"";position:absolute;left:-4px;right:-4px;bottom:-4px;height:2px;background:linear-gradient(90deg,transparent,var(--brand-2),transparent);filter:blur(1px);opacity:.6;animation:underline-pulse calc(3s/var(--speed)) ease-in-out infinite}
.nav{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap}
.nav a{color:var(--muted);text-decoration:none;padding:6px 8px;border-radius:10px}
.nav a:hover{color:var(--tx);background:rgba(255,255,255,.04)}
.social{display:flex;gap:10px;align-items:center}
.social a{display:inline-flex;padding:6px;border-radius:10px;border:1px solid var(--card-stroke);background:var(--card)}
.social a:hover{border-color:var(--brand-2)}
.btn-primary,.btn-outline,.btn-ghost{padding:12px 16px;border-radius:14px;border:1px solid transparent;cursor:pointer;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:8px;justify-content:center}
.btn-primary{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#05250f;box-shadow:var(--shadow);transform:translateZ(0)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-outline{border-color:var(--card-stroke);color:var(--tx);background:transparent}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(20px,3vw,40px);align-items:center;min-height:min(80vh,720px)}
.hero-content .badge{display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid var(--brand-2);color:var(--brand-2);font-weight:700;font-size:.9rem}
.hero h1{font-size:clamp(2.2rem,5vw,3.6rem);margin:16px 0 8px}
.grad{background:linear-gradient(90deg,var(--brand-2),#d3ffe7);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:var(--muted);max-width:58ch}
.cta-row{display:flex;gap:12px;margin:18px 0 8px;flex-wrap:wrap}
.value-prop{margin:12px 0 0;padding-left:20px;color:var(--muted)}
.hero-media{position:relative;perspective:1000px}
.hero-media img{animation:floaty calc(8s/var(--speed)) ease-in-out infinite;will-change:transform;transition:transform .3s ease}
.hero-media[data-tilt] img{transform:rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateZ(0)}
.section{padding:clamp(24px,5vw,56px) 0}
.section.alt{background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.toolbar{display:grid;grid-template-columns:1fr 180px 180px;gap:10px}
@media (max-width:720px){.toolbar{grid-template-columns:1fr}}
.toolbar input,.toolbar select{background:var(--card);border:1px solid var(--card-stroke);color:var(--tx);padding:12px 14px;border-radius:12px;outline:none}
.toolbar select option{background-color:#1a221e;color:var(--tx)}
.toolbar select{appearance:none;background-image:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02))}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:768px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.grid{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--card-stroke);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease;opacity:0;transform:translateY(12px)}
.card.reveal-in{opacity:1;transform:translateY(0);transition:transform .5s ease,opacity .5s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.card .media{aspect-ratio:4/3;background:#0f1411;display:flex;align-items:center;justify-content:center;overflow:hidden}
.card .media img{transition:transform .4s ease}
.card:hover .media img{transform:scale(1.05) rotate(.4deg)}
.card .body{padding:14px}
.card h3{margin:6px 0 4px;font-size:1.05rem}
.price{font-weight:800;letter-spacing:.2px}
.cat{color:var(--muted);font-size:.9rem}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--brand-2)}
.actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.btn-small{padding:10px 12px;border-radius:12px;border:1px solid var(--card-stroke);background:transparent;color:var(--tx);cursor:pointer}
.btn-small.buy{border-color:transparent;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#05250f;font-weight:800}
.cart-sticky{position:sticky;bottom:12px;display:flex;gap:10px;align-items:center;justify-content:flex-end;padding-top:10px}
.site-footer{border-top:1px solid var(--card-stroke);background:rgba(255,255,255,.02)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer-copy{color:var(--muted)}
.footer-badges{display:flex;align-items:center;gap:8px;color:var(--muted)}
.footer-social{display:flex;gap:12px;align-items:center}
#cartDrawer{position:fixed;inset:0;pointer-events:none}
.drawer{position:absolute;right:0;top:0;height:100%;width:min(420px,100%);background:var(--bg);border-left:1px solid var(--card-stroke);box-shadow:var(--shadow);transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--card-stroke)}
.drawer-body{padding:16px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.drawer-foot{border-top:1px solid var(--card-stroke);padding:16px;display:grid;gap:12px}
.drawer .full{width:100%}
.backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35);opacity:0;transition:opacity .25s ease}
#cartDrawer.open{pointer-events:auto}
#cartDrawer.open .drawer{transform:translateX(0)}
#cartDrawer.open .backdrop{opacity:1}
.cart-item{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;background:var(--card);border:1px solid var(--card-stroke);border-radius:14px;padding:10px}
.cart-item h4{margin:0;font-size:1rem}
.cart-item .muted{color:var(--muted);font-size:.9rem}
.qty{display:inline-flex;align-items:center;gap:6px}
.qty button{width:28px;height:28px;border-radius:8px;border:1px solid var(--card-stroke);background:transparent;color:var(--tx);cursor:pointer}
.remove{background:transparent;border:1px solid var(--card-stroke);color:var(--danger);border-radius:10px;padding:6px 8px;cursor:pointer}
.whatsapp-fab{position:fixed;right:16px;bottom:16px;width:56px;height:56px;border-radius:50%;box-shadow:var(--shadow);display:grid;place-items:center;background:#1f2b24;border:1px solid var(--card-stroke);z-index:60}
.whatsapp-fab img{width:40px;height:40px}
.small{font-size:.95rem;color:var(--muted)}
.steps{display:grid;gap:8px;counter-reset:s}
.steps li{list-style:none;position:relative;padding-left:36px}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;width:26px;height:26px;display:grid;place-items:center;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#05250f;font-weight:800}
.badge{box-shadow:var(--shadow)}
[data-reveal]{opacity:.001;transform:translateY(12px);transition:transform .6s ease,opacity .6s ease}
.revealed{opacity:1!important;transform:translateY(0)!important}
.shine{position:relative;background:linear-gradient(90deg,#fff,#d3ffe7,#fff);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% 100%;animation:shimmer calc(10s/var(--speed)) linear infinite}
.shine::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--brand-2),transparent);filter:blur(.5px);animation:underline-pulse calc(4s/var(--speed)) ease-in-out infinite}
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes underline-pulse{0%,100%{opacity:.3;transform:scaleX(.9)}50%{opacity:.8;transform:scaleX(1)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){:root{--speed:0}.hero-media img,.shine,.brand-name{animation:none}[data-reveal]{opacity:1;transform:none}}
@media (max-width:960px){.hero{grid-template-columns:1fr;text-align:center}.hero-media{order:-1}.nav{margin-left:0}}
@media (max-width:420px){.brand-name::after{display:none}}


/* === High-contrast brand color override === */
:root{ --brand-contrast:#ffffff; } /* contrasts on dark body */
.brand-name{
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--brand-contrast) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.45), 0 0 10px rgba(118,227,161,.25);
}
@media (prefers-color-scheme: light){
  :root{ --brand-contrast:#0b0f0d; } /* contrasts on light body */
}



/* === Responsive reinforcement for brand contrast === */
@media (max-width: 960px){
  .brand-name{ color: var(--brand-contrast) !important; text-shadow: 0 1px 0 rgba(0,0,0,.45), 0 0 10px rgba(118,227,161,.25); }
}
@media (max-width: 720px){
  .brand-name{ color: var(--brand-contrast) !important; text-shadow: 0 1px 0 rgba(0,0,0,.45), 0 0 10px rgba(118,227,161,.25); }
}
@media (max-width: 420px){
  .brand-name{ color: var(--brand-contrast) !important; text-shadow: 0 1px 0 rgba(0,0,0,.45), 0 0 10px rgba(118,227,161,.25); }
}


/* === COLITAZ brand high-contrast (desktop & mobile) === */
:root{ --brand-contrast:#ffffff; } /* dark body default */
@media (prefers-color-scheme: light){
  :root{ --brand-contrast:#0b0f0d; } /* light body */
}
.brand-name{
  color: var(--brand-contrast) !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  text-shadow:
    0 1px 0 rgba(0,0,0,.55),
    0 0 8px rgba(0,0,0,.25);
}
/* Keep contrast at all widths */
@media (max-width: 960px){ .brand-name{ color: var(--brand-contrast) !important; } }
@media (max-width: 720px){ .brand-name{ color: var(--brand-contrast) !important; } }
@media (max-width: 420px){ .brand-name{ color: var(--brand-contrast) !important; } }

/* Header scrolled: increase opacity for better contrast with text */
.site-header.scrolled{
  background: linear-gradient(180deg, rgba(11,15,13,.9), rgba(11,15,13,.75));
  border-bottom-color: rgba(255,255,255,.16);
}
@media (prefers-color-scheme: light){
  .site-header.scrolled{
    background: linear-gradient(180deg, rgba(247,251,248,.95), rgba(247,251,248,.85));
    border-bottom-color: rgba(0,0,0,.16);
  }
}



/* === Continuous motion for brand name COLITAZ (desktop & mobile) === */
.brand-name{ position:relative; white-space:nowrap; }
.brand-name span{ display:inline-block; transform-origin: bottom; animation: brand-wave 1.6s ease-in-out infinite; will-change: transform; }
/* moving soft glow behind text (subtle; keeps contrast) */
.brand-name::before{
  content:""; position:absolute; inset:-6px -8px; z-index:-1; pointer-events:none;
  background: radial-gradient(120px 14px at var(--x,0%) 90%, rgba(118,227,161,.25), transparent 60%);
  filter: blur(6px);
  animation: brand-glow 4s linear infinite;
}
@media (prefers-color-scheme: light){
  .brand-name::before{ background: radial-gradient(120px 14px at var(--x,0%) 90%, rgba(42,182,115,.18), transparent 60%); }
}
@keyframes brand-wave{
  0%{ transform: translateY(0) rotate(0deg) }
  25%{ transform: translateY(-3px) rotate(-2deg) }
  50%{ transform: translateY(0) rotate(0.6deg) }
  75%{ transform: translateY(3px) rotate(2deg) }
  100%{ transform: translateY(0) rotate(0deg) }
}
@keyframes brand-glow{
  0%{ --x: 0% }
  50%{ --x: 100% }
  100%{ --x: 0% }
}
/* Accessibility: stop motion if user prefers reduced motion */
@media (prefers-reduced-motion: reduce){
  .brand-name span{ animation: none !important }
  .brand-name::before{ animation: none !important }
}



/* ===== Hero Slider ===== */
.hero-slider{ position:relative; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); background:#0f1411; border:1px solid var(--card-stroke) }
.hero-slider .slides{ display:flex; width:100%; height:100%; transform: translateX(0%); transition: transform .6s ease }
.hero-slider .slide{ min-width:100%; aspect-ratio: 4/3; display:grid; place-items:center; overflow:hidden }
.hero-slider img{ width:100%; height:100%; object-fit:cover; transform: scale(1.02); transition: transform 1s ease }
.hero-slider .slide.is-active img{ transform: scale(1.05) }
.slider-nav{ position:absolute; top:50%; transform: translateY(-50%); width:40px; height:40px; border-radius:50%; border:1px solid var(--card-stroke); background:rgba(0,0,0,.35); color:var(--tx); display:grid; place-items:center; cursor:pointer; backdrop-filter: blur(6px) }
.slider-nav:hover{ background:rgba(0,0,0,.5) }
.slider-nav.prev{ left:10px } .slider-nav.next{ right:10px }
.slider-dots{ position:absolute; left:0; right:0; bottom:8px; display:flex; gap:8px; justify-content:center; align-items:center }
.slider-dots button{ width:8px; height:8px; border-radius:999px; border:1px solid var(--card-stroke); background:rgba(255,255,255,.35); cursor:pointer }
.slider-dots button[aria-selected="true"]{ background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-color: transparent; width:16px }
.hero-slider .seal{ position:absolute; left:10px; bottom:10px; background:rgba(42,182,115,.15); border:1px solid var(--brand-2); padding:10px 12px; border-radius:12px; font-size:.9rem; backdrop-filter: blur(8px) }

@media (max-width: 960px){ .hero-slider .slide{ aspect-ratio: 16/10 } }
@media (max-width: 520px){ .hero-slider .slide{ aspect-ratio: 1/1 } .slider-nav{ width:36px; height:36px } }



/* === Warm hover animation for 'Comprar' button === */
:root{ --warm-1:#ffb385; --warm-2:#ffd89f; }
.btn-small.buy{
  position:relative; overflow:hidden; transition: transform .18s ease, box-shadow .18s ease, background .3s ease;
}
.btn-small.buy::after{
  content:""; position:absolute; inset:-2px;
  background: radial-gradient(60px 60px at var(--mx,50%) var(--my,50%), rgba(255,184,108,.35), transparent 60%);
  opacity:0; transition: opacity .25s ease;
  pointer-events:none; filter: blur(6px);
}
.btn-small.buy:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(255, 184, 108, .25);
  background: linear-gradient(90deg, var(--warm-1), var(--warm-2));
  color:#2b1700;
}
.btn-small.buy:hover::after{ opacity:1; }

/* subtle shimmer sweep on hover */
.btn-small.buy:hover{
  background-size: 200% 100%;
  animation: buy-shimmer 1.2s ease forwards;
}
@keyframes buy-shimmer{
  0%{ background-position: 0% 50% }
  100%{ background-position: 100% 50% }
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .btn-small.buy{ transition: none }
  .btn-small.buy:hover{ animation: none }
}



/* === Warm hover animation for Hero primary button === */
:root{ --warm-1:#ffb385; --warm-2:#ffd89f; }
.btn-primary.warm{
  position:relative; overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, background .3s ease;
}
.btn-primary.warm::after{
  content:""; position:absolute; inset:-2px;
  background: radial-gradient(80px 80px at var(--mx,50%) var(--my,50%), rgba(255,184,108,.35), transparent 60%);
  opacity:0; transition: opacity .25s ease;
  pointer-events:none; filter: blur(8px);
}
.btn-primary.warm:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(255, 184, 108, .25);
  background: linear-gradient(90deg, var(--warm-1), var(--warm-2));
  color:#2b1700;
}
.btn-primary.warm:hover::after{ opacity:1 }

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .btn-primary.warm{ transition: none }
}