/* ================================
   NarvArte — estilos base
   ================================ */

/* Tipografías */
@font-face {
  font-family: "Blastine";
  src: url("./assets/fonts/Blastine.woff2") format("woff2"),
       url("./assets/fonts/Blastine.woff") format("woff");
  font-display: swap;
}

/* Paleta */
:root{
  --nv-ink: #70665a;        /* titulares, énfasis */
  --nv-earth: #a59884;      /* neutros / calmado */
  --nv-accent: #dbceac;     /* CTAs y detalles suaves */
  --nv-cream: #faf5ec;      /* fondos principales */
  --nv-white: #ffffff;
  --nv-shadow: 0 8px 24px rgba(0,0,0,.08);
  --nv-radius: 14px;
}

/* Reset + accesibilidad ligera */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
button,input,select{font:inherit}
.sr-only{position:absolute;left:-9999px}

/* Tipos */
body{
  font-family: "Open Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--nv-ink);
  background: var(--nv-cream);
  line-height: 1.6;
  font-size: 16px;
}
.display{
  font-family: "Blastine", "Open Sans", serif;
  font-weight: 400;
  letter-spacing: .2px;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.1;
  color: var(--nv-ink);
}
.title{
  font-family: "Blastine", "Open Sans", serif;
  font-size: clamp(28px, 3.5vw, 44px);
  margin: 0 0 .2rem;
}
.lead{color:#6f6559;max-width:55ch}

/* Layout helpers */
.container{
  width:min(1120px, 92vw);
  margin-inline:auto;
}
.section{
  padding: 72px 0;
  background: var(--nv-white);
}
.section.alt{
  background: var(--nv-cream);
}
.section.pattern{
  position:relative;
  overflow:hidden;
}
.section.pattern::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(15px 15px at 20% 20%, rgba(219,206,172,.15) 0 60%, transparent 61%),
    radial-gradient(12px 12px at 70% 60%, rgba(219,206,172,.12) 0 60%, transparent 61%),
    linear-gradient(transparent, transparent);
  pointer-events:none;
}

/* Header */
.nv-header{
  position:sticky; top:0; z-index:50;
  background: var(--nv-white);
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.header-inner{
  display:flex; align-items:center; gap:20px;
  padding: 14px 0;
}
.brand{
  display:flex; align-items:center; gap:10px; font-weight:700;
}
.brand .brand-mark{
  font-family:"Blastine", serif;
  font-size:28px; line-height:1;
  background: var(--nv-accent);
  color: var(--nv-ink);
  width:38px;height:38px; display:grid;place-items:center;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.06);
}
.brand .brand-text{
  font-family:"Blastine", serif; font-size:24px; letter-spacing:.3px;
}

.main-nav{margin-left:auto; display:flex; align-items:center; gap:12px}
.main-nav ul{
  display:flex; gap:18px; align-items:center;
}
.main-nav a{
  padding:8px 10px; border-radius:10px; color:#3a352e;
}
.main-nav a:hover{background:rgba(219,206,172,.35)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer}
.nav-toggle .bar{display:block;width:22px;height:2px;background:#5a5247;margin:4px 0;border-radius:2px}

.header-cta .btn-cta{white-space:nowrap}

/* Hero */
.hero{
  position:relative; min-height: 72vh;
  display:grid; place-items:center;
  overflow:hidden;
  background: var(--nv-cream);
}
.hero-media{
  position:absolute; inset:0;
  /* 👉 Usa tu imagen como fondo del hero */
  background-image: url("https://narvarte.bellux.in/images/boho1.png");
  background-size: cover;
  background-position: center center;  /* puedes ajustar: 55% center, etc. */
  filter: saturate(.95) brightness(.98);
}
.hero-overlay{
  position:absolute; inset:0;
  /* Mantiene legible el texto sobre la foto */
  background: linear-gradient(to bottom, rgba(250,245,236,.45), rgba(250,245,236,.94));
}
.hero-content{
  position:relative; text-align:center;
}
.hero .subtitle{margin:.6rem auto 1.6rem; max-width:48ch}
.hero-actions{display:flex; gap:12px; justify-content:center}
.texture{
  position:absolute; inset:auto 0 0 0; height:120px;
  background: linear-gradient(to bottom, transparent, rgba(219,206,172,.35));
  pointer-events:none;
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: .85rem 1.15rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition:.2s ease;
  font-weight:600;
}
.btn-cta{background: var(--nv-accent)}
.btn-cta:hover{filter:brightness(.95)}
.btn-primary{background: var(--nv-ink); color: var(--nv-white)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-dark{background: var(--nv-ink); color: var(--nv-white)}
.btn-outline{
  border-color: var(--nv-ink); color: var(--nv-ink); background:transparent;
}
.btn-outline:hover{background: var(--nv-accent)}
.btn-full{width:100%}

/* Cards / grids */
.grid{
  display:grid; gap:22px;
}
.products-featured{
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.style-cards{
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.blog-grid{
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card{
  background: var(--nv-white);
  border-radius: var(--nv-radius);
  overflow:hidden;
  box-shadow: var(--nv-shadow);
  border: 1px solid rgba(0,0,0,.04);
}
.card-media img{width:100%;height:260px;object-fit:cover}
.card-body{padding:16px 16px 18px}
.card-title{
  margin:.2rem 0 .2rem;
  font-weight:700; letter-spacing:.2px;
}
.card-desc{color:#6f6559; font-size:.95rem}
.card-meta{display:flex; gap:10px; align-items:center; margin:10px 0}
.card-meta .price{font-weight:700}
.card-meta .tag{
  font-size:.8rem; background: rgba(219,206,172,.45);
  padding:.2rem .55rem; border-radius:999px; color:#5a5247;
}
.card-actions{margin-top:10px}

/* Estilos y categorías */
.style-card{
  padding:18px; text-align:center; background: var(--nv-white);
  border-radius: var(--nv-radius); box-shadow: var(--nv-shadow);
  border: 1px solid rgba(0,0,0,.04);
}
.style-card h3{margin:.5rem 0 .2rem;font-weight:700}
.style-card p{color:#6f6559}
.style-icon{
  width:64px;height:64px;margin:0 auto 8px;display:grid;place-items:center;
  color: var(--nv-ink);
  background: #fff;
  border: 1px solid rgba(0,0,0,.06); border-radius: 18px;
}

/* Beneficios */
.benefits{grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))}
.benefit{padding:18px;border-radius:var(--nv-radius);background:var(--nv-white);box-shadow:var(--nv-shadow)}
.benefit h3{margin:.4rem 0}
.benefit-icon{
  width:56px;height:56px;display:grid;place-items:center;
  color: var(--nv-ink);
  background: rgba(165,152,132,.14);
  border-radius: 14px; border: 1px solid rgba(0,0,0,.06);
}

/* Shop (Marketplace) */
.shop{display:grid; grid-template-columns: 280px 1fr; gap:24px}
.filters{
  background: var(--nv-white); padding:16px; border-radius:var(--nv-radius);
  box-shadow: var(--nv-shadow); border: 1px solid rgba(0,0,0,.04);
  position: sticky; top:90px; height: fit-content;
}
.filters-title{
  margin-top:4px; font-weight:700; font-size:1.1rem;
}
.filter-group{margin:14px 0}
.filter-label{display:block; font-weight:600; margin-bottom:6px}
.filter-group label{display:block; margin:6px 0; color:#5a5247}
.shop-grid{
  display:grid; gap:22px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px){
  .shop{grid-template-columns: 1fr}
  .filters{position:relative; top:auto}
  .shop-grid{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width: 640px){
  .main-nav ul{display:none}
  .nav-toggle{display:block}
  .shop-grid{grid-template-columns: 1fr}
}
.hidden{display:none !important}

/* Blog tags */
.blog-tags{display:flex; gap:10px; margin-bottom:14px; flex-wrap:wrap}
.tag{
  border:1px solid var(--nv-ink); border-radius:999px; padding:.4rem .8rem;
  background:transparent; cursor:pointer
}
.tag.is-active{background: var(--nv-accent)}

/* Sobre nosotros */
.about{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:28px; align-items:center;
}
.about-media img{border-radius: var(--nv-radius); box-shadow: var(--nv-shadow)}
.ticks{margin:10px 0 16px; padding-left: 18px}
.ticks li{position:relative; margin:6px 0}
.ticks li::before{
  content:""; position:absolute; left:-18px; top:.6em;
  width:10px;height:10px;border-radius:999px;background: var(--nv-accent);
}

/* Newsletter */
.newsletter{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
}
.newsletter input{
  padding:.9rem 1rem; border-radius:999px; border:1px solid rgba(0,0,0,.12);
  min-width: 260px; background: var(--nv-white);
}
.newsletter .form-help{color:#6f6559}

/* Footer */
.nv-footer{
  background: var(--nv-ink); color: var(--nv-white);
  padding-top: 42px;
}
.footer-grid{
  display:grid; gap:22px; grid-template-columns: repeat(4, 1fr);
}
.brand-footer .brand-mark{background: var(--nv-white)}
.foot-copy{color:#f7efe0; margin:8px 0 14px}
.social{display:flex; gap:8px}
.social-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px;height:34px;border-radius:999px; background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
}
.nv-footer h4{margin:0 0 .6rem; font-weight:700}
.nv-footer a{color:#fff}
.nv-footer .newsletter.small input{background:#fff}
.foot-note{
  margin-top:22px; padding:14px 0; text-align:center;
  background: rgba(0,0,0,.08);
}

/* Sutilezas decorativas */
.card, .style-card, .benefit, .filters{
  background:
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(250,245,236,.6) 100%);
}