:root{
  /* Paleta Velare — "Tierra, brasa y luz" */
  --crema:#F3EDE2;
  --arena:#E2D2BC;
  --terracota:#B5613C;
  --olivo:#6E7257;
  --cafe:#4A3528;
  --carbon:#241C17;
  --oro:#C9A24B;

  --display:'Cormorant Garamond', Georgia, serif;
  --body:'Jost', system-ui, sans-serif;
}

*{ -webkit-tap-highlight-color: transparent; }
html{ scroll-behavior:smooth; scroll-padding-top:72px; }
body{
  font-family:var(--body);
  font-weight:300;
  color:var(--cafe);
  background:var(--crema);
  letter-spacing:.02em;
}
h1,h2,h3,.display-font{ font-family:var(--display); font-weight:500; letter-spacing:.01em; }

.section-pad{ padding:6rem 0; }
.eyebrow{
  font-family:var(--body); font-weight:400; font-size:.72rem;
  letter-spacing:.32em; text-transform:uppercase; color:var(--terracota);
}
.text-oro{ color:var(--oro); }

/* ---------- Navbar ---------- */
.navbar{
  background:rgba(36,28,23,.0);
  transition:background .4s ease, padding .4s ease, box-shadow .4s ease;
  padding:1rem 0;
}
.navbar.scrolled{
  background:rgba(36,28,23,.96);
  padding:.5rem 0;
  box-shadow:0 2px 24px rgba(0,0,0,.18);
}
.navbar .nav-link{
  color:var(--crema)!important;
  font-size:.82rem; letter-spacing:.16em; text-transform:uppercase;
  margin:0 .4rem; opacity:.85; transition:opacity .25s, color .25s;
}
.navbar .nav-link:hover{ opacity:1; color:var(--oro)!important; }
.navbar-brand{ display:flex; align-items:center; gap:.6rem; }
.navbar-brand .logo-mark{ height:38px; width:auto; }
.navbar-toggler{ border:none; }
.navbar-toggler:focus{ box-shadow:none; }
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23F3EDE2' stroke-width='2' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3E%3C/svg%3E");
}
@media (max-width:991px){
  .navbar-collapse{
    background:rgba(36,28,23,.98);
    margin-top:.75rem; border-radius:10px; padding:1rem 1.25rem;
  }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; color:var(--crema);
}
.hero-media{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
/* Fondo animado "brasa" — placeholder del video. Si activas el <video>, este queda como respaldo. */
.hero-fallback{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(201,162,75,.55), transparent 55%),
    radial-gradient(80% 70% at 50% 100%, rgba(181,97,60,.65), transparent 60%),
    linear-gradient(160deg, #2c211a 0%, #3a2519 45%, #6b3a22 100%);
  animation:ember 7s ease-in-out infinite alternate;
}
@keyframes ember{
  0%{ filter:brightness(.92) saturate(1); }
  100%{ filter:brightness(1.12) saturate(1.18); }
}
.hero-flame{
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:340px; max-width:60vw; height:auto; z-index:1; opacity:.85;
  animation:flicker 3.2s ease-in-out infinite;
  transform-origin:bottom center;
}
@keyframes flicker{
  0%,100%{ transform:translateX(-50%) scale(1); opacity:.82; }
  50%{ transform:translateX(-50%) scaleY(1.04) scaleX(.98); opacity:.95; }
}
.hero-overlay{ position:absolute; inset:0; background:rgba(26,18,13,.45); z-index:2; }
.hero-content{ position:relative; z-index:3; padding:1.5rem; max-width:820px; }
.hero-logo{ height:64px; margin-bottom:1.5rem; }
.hero h1{ font-size:clamp(3rem,8vw,5.5rem); line-height:1.02; margin-bottom:1rem; }
.hero .lead{
  font-weight:300; font-size:clamp(1rem,2.2vw,1.25rem);
  letter-spacing:.18em; text-transform:uppercase; opacity:.92; margin-bottom:2.25rem;
}

/* ---------- Botones ---------- */
.btn-Velare{
  background:var(--terracota); color:var(--crema);
  border:none; border-radius:2px;
  padding:.85rem 2.1rem; font-size:.8rem; letter-spacing:.2em; text-transform:uppercase;
  transition:background .3s, transform .3s, box-shadow .3s;
}
.btn-Velare:hover{
  background:var(--oro); color:var(--carbon);
  transform:translateY(-2px); box-shadow:0 10px 26px rgba(201,162,75,.32);
}

/* ---------- Sobre Nosotros ---------- */
.about{ background:var(--crema); }
.about-figure{
  background:linear-gradient(150deg, var(--arena), var(--crema));
  border:1px solid rgba(110,114,87,.2);
  border-radius:4px; padding:2.5rem; display:flex; align-items:center; justify-content:center;
}
.about-figure img{ width:100%; max-width:260px; height:auto; }
.about h2{ font-size:clamp(2.2rem,5vw,3.2rem); line-height:1.05; }
.about .values{ list-style:none; padding:0; margin-top:2rem; }
.about .values li{
  padding:.6rem 0; border-top:1px solid rgba(74,53,40,.14);
  font-size:.95rem; display:flex; gap:.8rem; align-items:baseline;
}
.about .values li span{ color:var(--terracota); font-family:var(--display); font-size:1.2rem; }

/* ---------- Catálogo ---------- */
.catalog{ background:var(--cafe); color:var(--crema); }
.catalog h2{ color:var(--crema); }
.catalog .eyebrow{ color:var(--oro); }
.product-card{
  background:rgba(243,237,226,.04);
  border:1px solid rgba(243,237,226,.12);
  border-radius:4px; overflow:hidden; height:100%;
  display:flex; flex-direction:column;
  transition:transform .35s, border-color .35s, box-shadow .35s;
}
.product-card:hover{
  transform:translateY(-6px); border-color:rgba(201,162,75,.5);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.product-img{ aspect-ratio:4/5; width:100%; display:block; object-fit:cover; background:var(--arena); }
.product-body{ padding:1.5rem; display:flex; flex-direction:column; flex-grow:1; }
.product-body h3{ font-size:1.55rem; margin-bottom:.35rem; color:var(--crema); }
.product-desc{ font-size:.88rem; opacity:.78; line-height:1.6; flex-grow:1; }
.product-price{
  font-family:var(--display); font-size:1.5rem; color:var(--oro);
  margin:1rem 0; font-weight:600;
}

/* ---------- Contacto ---------- */
.contact{ background:var(--crema); }
.contact-item{ display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.5rem; }
.contact-item .ic{
  flex-shrink:0; width:42px; height:42px; border-radius:50%;
  background:var(--olivo); color:var(--crema);
  display:flex; align-items:center; justify-content:center;
}
.contact-item h4{ font-family:var(--body); font-weight:500; font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--terracota); margin-bottom:.2rem; }
.contact-item p{ margin:0; font-size:1rem; }
.social-row a{
  width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(74,53,40,.25); color:var(--cafe);
  display:inline-flex; align-items:center; justify-content:center;
  margin-right:.6rem; transition:all .3s;
}
.social-row a:hover{ background:var(--terracota); color:var(--crema); border-color:var(--terracota); }
.map-embed{ width:100%; height:100%; min-height:320px; border:0; border-radius:4px; filter:sepia(.15) saturate(.9); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--carbon); color:rgba(243,237,226,.6); padding:2.5rem 0; text-align:center; font-size:.82rem; }
.site-footer .logo-mark{ height:40px; margin-bottom:1rem; }

/* ---------- WhatsApp flotante ---------- */
.wa-float{
  position:fixed; bottom:22px; right:22px; z-index:1050;
  width:60px; height:60px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 22px rgba(37,211,102,.45);
  animation:waPulse 2.6s infinite; transition:transform .25s;
}
.wa-float:hover{ transform:scale(1.08); }
@keyframes waPulse{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,.5); }
  70%{ box-shadow:0 0 0 16px rgba(37,211,102,0); }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; scroll-behavior:auto!important; }
}