/* ═══════════════════════════════════════════════
   HOME.CSS — Homepage sections
   Cadenita De Carmen
═══════════════════════════════════════════════ */

/* ── HERO ── */
.hero{min-height:100vh;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 20% 40%,rgba(201,168,76,.04) 0%,transparent 60%),linear-gradient(135deg,#080808 0%,#0f0f0f 30%,#111111 60%,#080808 100%)}
.hero-bg::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900'%3E%3Cpath d='M-100 200 Q200 150 400 300 T800 250 T1200 350 T1600 200' stroke='%23c9a84c' stroke-width='1.5' fill='none' opacity='0.12'/%3E%3Cpath d='M-50 500 Q300 450 500 600 T900 520 T1300 600 T1700 480' stroke='%23c9a84c' stroke-width='1' fill='none' opacity='0.09'/%3E%3Cpath d='M200 100 Q350 300 300 500 T400 750' stroke='%23c9a84c' stroke-width='1.2' fill='none' opacity='0.08'/%3E%3C/svg%3E") center/cover no-repeat}
.hero-bg::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 70% at 50% 50%,transparent 30%,rgba(0,0,0,.6) 100%)}
.hero-content{position:relative;z-index:2;text-align:center;padding:2rem;animation:fadeUp 1.4s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

.hero-logo-ring{width:200px;height:200px;margin:0 auto 2rem;animation:fadeUp 1.4s .2s ease both}
.logo-circle-outer{width:100%;height:100%;border-radius:50%;background:rgba(8,8,8,.85);border:2px solid var(--gold);display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 40px rgba(201,168,76,.18),inset 0 0 30px rgba(201,168,76,.05);position:relative;overflow:hidden}
.logo-circle-outer::before{content:'';position:absolute;inset:4px;border-radius:50%;border:1px solid rgba(201,168,76,.3)}
.logo-brand-top,.logo-brand-bottom{font-family:var(--font-d);font-size:.62rem;letter-spacing:.38em;color:var(--gold);text-transform:uppercase}
.logo-monogram{font-family:var(--font-d);font-size:3.4rem;font-weight:600;line-height:1;color:var(--gold);font-style:italic}

.hero-eyebrow{font-size:.65rem;letter-spacing:.45em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem;animation:fadeUp 1.4s .4s ease both}
.hero-title{font-family:var(--font-d);font-size:clamp(3rem,7vw,6rem);font-weight:300;line-height:1.05;color:var(--white);margin-bottom:1.4rem;animation:fadeUp 1.4s .55s ease both}
.hero-title em{font-style:italic;color:var(--gold)}
.hero-subtitle{font-size:.8rem;letter-spacing:.15em;color:var(--muted);max-width:420px;margin:0 auto 2.5rem;line-height:1.9;animation:fadeUp 1.4s .7s ease both}
.hero-cta-group{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;animation:fadeUp 1.4s .85s ease both}

.hero-scroll{position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.6rem;color:var(--gold);font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;z-index:2;animation:fadeUp 1.4s 1.1s ease both}
.scroll-line{width:1px;height:40px;background:linear-gradient(180deg,var(--gold),transparent);animation:scrollPulse 2s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{opacity:.4}50%{opacity:1}}

/* ── MARQUEE ── */
.marquee-strip{background:var(--gold);padding:.75rem 0;overflow:hidden}
.marquee-track{display:flex;gap:3rem;animation:marquee 28s linear infinite;white-space:nowrap}
.marquee-track span{color:var(--black);font-family:var(--font-b);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;font-weight:600;flex-shrink:0}
.marquee-track .dot{color:rgba(0,0,0,.4);font-size:.5rem}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── CATEGORIES ── */
.categories{background:var(--black-2)}
.cat-card{position:relative;overflow:hidden;cursor:pointer;aspect-ratio:3/4;background:var(--black-3)}
.cat-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.25,.46,.45,.94);filter:brightness(.55) saturate(.8)}
.cat-card:hover img{transform:scale(1.08);filter:brightness(.45) saturate(.8)}
.cat-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.85) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:2rem}
.cat-card::before{content:'';position:absolute;inset:0;border:1px solid rgba(201,168,76,0);transition:var(--ease);z-index:2}
.cat-card:hover::before{border-color:rgba(201,168,76,.4)}
.cat-tag{font-size:.58rem;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);margin-bottom:.4rem}
.cat-name{font-family:var(--font-d);font-size:1.6rem;font-weight:400;color:var(--white);margin-bottom:.8rem}
.cat-link{display:inline-flex;align-items:center;gap:.5rem;color:var(--gold);font-size:.62rem;letter-spacing:.25em;text-transform:uppercase;text-decoration:none;transition:var(--ease)}
.cat-link i{transition:transform .3s ease}.cat-card:hover .cat-link i{transform:translateX(5px)}

/* ── PRODUCT CARDS ── */
.products{background:var(--black)}
.product-card{background:var(--black-3);border:1px solid rgba(201,168,76,.08);transition:var(--ease);position:relative;overflow:hidden;cursor:pointer;text-decoration:none;display:block;color:inherit}
.product-card:hover{border-color:rgba(201,168,76,.3);transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 30px rgba(201,168,76,.07)}
.product-img-wrap{aspect-ratio:1;overflow:hidden;background:var(--black-4);position:relative}
.product-img-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.25,.46,.45,.94);filter:brightness(.92)}
.product-card:hover .product-img-wrap img{transform:scale(1.06)}
.product-badge{position:absolute;top:.8rem;left:.8rem;background:var(--gold);color:var(--black);font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;padding:.3rem .7rem;font-weight:600}
.product-actions{position:absolute;top:.8rem;right:.8rem;display:flex;flex-direction:column;gap:.5rem;transform:translateX(60px);transition:var(--ease)}
.product-card:hover .product-actions{transform:translateX(0)}
.action-btn{width:36px;height:36px;background:rgba(8,8,8,.9);border:1px solid rgba(201,168,76,.3);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:.9rem;cursor:pointer;transition:var(--ease);text-decoration:none}
.action-btn:hover{background:var(--gold);color:var(--black)}
.product-info{padding:1.4rem}
.product-category{font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:.35rem}
.product-name{font-family:var(--font-d);font-size:1.15rem;font-weight:400;color:var(--white);margin-bottom:.6rem;line-height:1.3}
.product-price{font-family:var(--font-d);font-size:1.1rem;color:var(--gold);font-weight:500}
.product-price-old{font-size:.8rem;color:var(--muted);text-decoration:line-through;margin-left:.5rem;font-family:var(--font-b)}
.product-add-btn{width:100%;background:transparent;border:1px solid rgba(201,168,76,.25);color:var(--gold);font-family:var(--font-b);font-size:.62rem;letter-spacing:.25em;text-transform:uppercase;padding:.7rem;cursor:pointer;transition:var(--ease);margin-top:1rem}
.product-add-btn:hover{background:var(--gold);color:var(--black)}

/* ── STATS STRIP ── */
.story-strip{background:var(--black-2);border-top:1px solid rgba(201,168,76,.1);border-bottom:1px solid rgba(201,168,76,.1)}
.story-stat{text-align:center;padding:3rem 1rem;border-right:1px solid rgba(201,168,76,.1)}
.story-stat:last-child{border-right:none}
.stat-number{font-family:var(--font-d);font-size:3.5rem;font-weight:300;color:var(--gold);line-height:1;margin-bottom:.5rem}
.stat-label{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}

/* ── FEATURES ── */
.features{background:var(--black)}
.feature-item{text-align:center;padding:2.5rem 1.5rem}
.feature-icon{width:60px;height:60px;border:1px solid rgba(201,168,76,.3);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;color:var(--gold);font-size:1.4rem;transition:var(--ease)}
.feature-item:hover .feature-icon{background:rgba(201,168,76,.08);border-color:var(--gold);box-shadow:0 0 20px rgba(201,168,76,.15)}
.feature-title{font-family:var(--font-d);font-size:1.1rem;font-weight:400;color:var(--white);margin-bottom:.6rem}
.feature-desc{font-size:.72rem;line-height:1.85;color:var(--muted);letter-spacing:.04em}

/* ── TESTIMONIALS ── */
.testimonials{background:var(--black-2)}
.testimonial-card{background:var(--black-3);border:1px solid rgba(201,168,76,.1);padding:2.5rem;height:100%;transition:var(--ease)}
.testimonial-card:hover{border-color:rgba(201,168,76,.3)}
.stars{color:var(--gold);font-size:.75rem;letter-spacing:.1em;margin-bottom:1.2rem}
.testimonial-text{font-family:var(--font-d);font-size:1.1rem;font-weight:300;font-style:italic;color:var(--white);line-height:1.7;margin-bottom:1.5rem}
.testimonial-author{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.testimonial-location{font-size:.6rem;color:var(--muted);letter-spacing:.1em}

/* ── NEWSLETTER ── */
.newsletter{background:var(--black-3);border-top:1px solid rgba(201,168,76,.12);border-bottom:1px solid rgba(201,168,76,.12)}
.newsletter-form{display:flex;max-width:480px;width:100%;border:1px solid rgba(201,168,76,.3)}
.newsletter-input{flex:1;background:transparent;border:none;padding:.95rem 1.4rem;color:var(--white);font-family:var(--font-b);font-size:.75rem;letter-spacing:.08em;outline:none}
.newsletter-input::placeholder{color:var(--muted)}
.newsletter-btn{background:var(--gold);border:none;color:var(--black);padding:.95rem 1.8rem;font-family:var(--font-b);font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;font-weight:600;cursor:pointer;transition:var(--ease);white-space:nowrap}
.newsletter-btn:hover{background:var(--gold-bright)}

@media(max-width:768px){
  .hero-logo-ring{width:160px;height:160px}
  .logo-monogram{font-size:2.6rem}
  .story-stat{border-right:none;border-bottom:1px solid rgba(201,168,76,.1)}
  .newsletter-form{flex-direction:column}
}

/* ── Fix: product card images use padding-top square trick ── */
.product-img-wrap {
  width: 100%;
  padding-top: 100%;
  position: relative;
  overflow: hidden;
  background: var(--black-4);
}
.product-img-wrap img {
  position: absolute;
  inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.25,.46,.45,.94);
  filter: brightness(.92);
}
.product-card:hover .product-img-wrap img { transform: scale(1.06); }
/* Badge and actions stay absolutely positioned inside img-wrap */
.product-badge,
.product-actions { z-index: 2; }