:root{
  --ink:#17110d;
  --ink-2:#241812;
  --espresso:#3b2c24;
  --coffee:#6f513b;
  --sand:#f6efe3;
  --sand-2:#efe2ce;
  --paper:#fffaf1;
  --gold:#d7aa58;
  --gold-2:#f0ca78;
  --muted:#796958;
  --line:rgba(215,170,88,.28);
  --shadow:0 24px 70px rgba(23,17,13,.20);
  --soft-shadow:0 18px 46px rgba(23,17,13,.12);
  --radius:28px;
  --font-serif:'Fraunces',Georgia,'Times New Roman',serif;
  --font-sans:'Manrope',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:var(--font-sans);
  line-height:1.6;
  overflow-x:hidden;
}
body.modal-open{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
.site-bg{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(circle at 12% 12%,rgba(215,170,88,.18),transparent 28%),
    radial-gradient(circle at 88% 22%,rgba(111,81,59,.14),transparent 32%),
    linear-gradient(90deg,rgba(23,17,13,.035) 1px,transparent 1px),
    linear-gradient(0deg,rgba(23,17,13,.026) 1px,transparent 1px),
    var(--sand);
  background-size:auto,auto,72px 72px,72px 72px,auto;
}
.site-bg:after{
  content:"";position:absolute;inset:0;opacity:.45;
  background-image:radial-gradient(rgba(23,17,13,.18) .7px,transparent .7px);
  background-size:18px 18px;
  mix-blend-mode:multiply;
}
.container{width:min(1180px,calc(100% - 36px));margin-inline:auto}
.section-pad{padding:92px 0}
.eyebrow{
  margin:0 0 14px;
  color:var(--gold);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:900;
  font-size:.72rem;
}
.section-head{text-align:center;max-width:760px;margin:0 auto 38px}
.section-head.left{text-align:left;margin:0}
.section-head h2,.final-card h2,.process h2{
  margin:0 0 16px;
  font-family:var(--font-serif);
  font-size:clamp(2.2rem,5vw,4.8rem);
  line-height:.95;
  letter-spacing:-.055em;
}
.section-head p,.final-card p,.process .section-head p{margin:0;color:var(--muted);font-size:1.05rem}
.topbar{
  position:fixed;z-index:1000;top:18px;left:50%;transform:translateX(-50%);
  width:min(1180px,calc(100% - 28px));
  min-height:72px;
  padding:12px 14px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:rgba(23,17,13,.88);
  color:var(--paper);
  border:1px solid rgba(215,170,88,.22);
  border-radius:999px;
  backdrop-filter:blur(20px);
  box-shadow:0 20px 60px rgba(23,17,13,.25);
}
.brand{display:flex;align-items:center;gap:12px;min-width:max-content}
.brand-mark{
  width:50px;height:50px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  border:1px solid rgba(215,170,88,.50);background:#211610;
}
.brand-mark img{width:100%;height:100%;object-fit:cover;transform:scale(1.35)}
.brand-copy{display:grid;line-height:1.05}.brand-copy strong{letter-spacing:.12em}.brand-copy small{color:#c9b79b;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;margin-top:3px}
.nav{display:flex;align-items:center;justify-content:center;gap:30px;font-size:.78rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.nav a{color:#d7c9b6;transition:.22s ease}.nav a:hover{color:var(--gold-2)}
.nav-cta,.float-wa{
  background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#1d120a;
  font-weight:950;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;
  padding:15px 24px;border-radius:999px;box-shadow:0 10px 24px rgba(215,170,88,.22);
}
.menu-btn{display:none;background:transparent;border:0;width:44px;height:44px;color:var(--paper);position:relative;cursor:pointer}
.menu-btn span{position:absolute;left:10px;right:10px;height:2px;background:currentColor;border-radius:99px;transition:.2s}.menu-btn span:first-child{top:16px}.menu-btn span:last-child{bottom:16px}.menu-btn.active span:first-child{top:21px;transform:rotate(45deg)}.menu-btn.active span:last-child{bottom:21px;transform:rotate(-45deg)}
.hero{min-height:100svh;padding-top:135px;padding-bottom:80px;display:grid;align-items:center;background:linear-gradient(180deg,rgba(23,17,13,.03),rgba(246,239,227,0))}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,520px);gap:54px;align-items:center}
.hero-copy h1{
  margin:0 0 22px;
  font-family:var(--font-serif);
  font-size:clamp(4rem,9vw,8rem);
  line-height:.84;
  letter-spacing:-.08em;
  max-width:780px;
}
.lead{margin:0;color:#6d5d4d;font-size:clamp(1.05rem,2vw,1.35rem);max-width:650px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:34px 0 26px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;
  min-height:52px;padding:0 24px;border-radius:999px;font-weight:950;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:linear-gradient(135deg,#21150f,#3e2c21);color:var(--paper);box-shadow:0 18px 40px rgba(23,17,13,.22)}
.btn.primary.light{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#1d120a}
.btn.ghost{background:rgba(255,250,241,.55);border:1px solid rgba(111,81,59,.22);color:var(--ink)}
.btn.ghost.dark{background:transparent;border:1px solid rgba(23,17,13,.18)}
.hero-stats{display:flex;gap:12px;flex-wrap:wrap}
.hero-stats span{padding:11px 14px;border:1px solid rgba(111,81,59,.17);border-radius:18px;background:rgba(255,250,241,.45);color:#7c6a55;font-size:.84rem}.hero-stats b{color:var(--ink)}
.hero-art{position:relative;min-height:600px;display:grid;grid-template-columns:minmax(220px,.92fr) minmax(280px,1.08fr);grid-template-rows:repeat(2,minmax(210px,1fr));gap:22px;align-items:stretch;padding:18px}.hero-art:before{
  content:"";position:absolute;inset:7% -6% 8% 4%;border-radius:42% 58% 43% 57%;
  background:radial-gradient(circle at 40% 38%,rgba(215,170,88,.32),transparent 55%),linear-gradient(145deg,#33231a,#100b08);
  filter:blur(0);box-shadow:var(--shadow);
}
.hero-card{position:relative;z-index:1;overflow:hidden;border-radius:32px;border:1px solid rgba(23,17,13,.25);background:#20150f;box-shadow:var(--shadow);min-height:0}
.hero-card img{width:100%;height:100%;object-fit:cover;filter:saturate(.98) contrast(1.02)}
.hero-card span{position:absolute;left:18px;right:18px;bottom:18px;padding:10px 12px;border-radius:999px;background:rgba(23,17,13,.70);color:var(--paper);font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.10em;backdrop-filter:blur(12px)}
.hero-card-main{grid-column:2;grid-row:1 / span 2;height:100%}.hero-card-small{height:100%}.hero-card-small.one{grid-column:1;grid-row:1}.hero-card-small.two{grid-column:1;grid-row:2}
.collections{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}.collections:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 20%,rgba(215,170,88,.16),transparent 30%),radial-gradient(circle at 85% 80%,rgba(215,170,88,.11),transparent 30%),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:auto,auto,80px 80px}.collections .container{position:relative}.collections .section-head p{color:#b7a58f}.collection-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:14px}.collection-tile{min-height:280px;border-radius:28px;overflow:hidden;position:relative;border:1px solid rgba(215,170,88,.18);background:#2a1c15;cursor:pointer;box-shadow:0 30px 80px rgba(0,0,0,.25)}.collection-tile img{width:100%;height:100%;object-fit:cover;opacity:.78;transition:.35s ease}.collection-tile:hover img{transform:scale(1.06);opacity:.95}.collection-tile:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,17,13,.05),rgba(23,17,13,.86))}.collection-tile div{position:absolute;z-index:1;left:18px;right:18px;bottom:18px}.collection-tile b{font-family:var(--font-serif);font-size:1.45rem;line-height:1;color:var(--paper);display:block}.collection-tile span{color:#d8c3a3;font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;font-weight:900}
.atelier-strip{padding:52px 0;background:var(--paper);border-block:1px solid rgba(111,81,59,.16)}.strip-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:42px;align-items:end}.strip-grid h2{margin:0;font-family:var(--font-serif);font-size:clamp(2rem,3.8vw,4.2rem);line-height:.95;letter-spacing:-.055em}.strip-grid p:last-child{color:var(--muted);font-size:1.05rem;margin:0}
.catalog{background:linear-gradient(180deg,var(--sand),#f1e3ce)}
.filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:34px}.filter-btn{border:1px solid rgba(111,81,59,.18);background:rgba(255,250,241,.66);color:#554536;padding:12px 16px;border-radius:999px;cursor:pointer;font-weight:900;font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;transition:.18s ease}.filter-btn:hover,.filter-btn.active{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:translateY(-1px)}
.products-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.product-card{background:rgba(255,250,241,.70);border:1px solid rgba(111,81,59,.17);border-radius:32px;overflow:hidden;box-shadow:var(--soft-shadow);transition:.22s ease;cursor:pointer;display:flex;flex-direction:column;min-height:100%}.product-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(215,170,88,.55)}.product-img-wrap{position:relative;aspect-ratio:4/4.6;background:#251912;overflow:hidden}.product-img-wrap img{width:100%;height:100%;object-fit:cover;transition:.4s ease}.product-card:hover .product-img-wrap img{transform:scale(1.045)}.product-badge{position:absolute;left:14px;top:14px;background:rgba(23,17,13,.78);color:var(--paper);border:1px solid rgba(215,170,88,.30);border-radius:999px;padding:8px 12px;font-size:.68rem;font-weight:900;letter-spacing:.11em;text-transform:uppercase;backdrop-filter:blur(10px)}.photo-count{position:absolute;right:14px;top:14px;background:rgba(255,250,241,.88);border-radius:999px;padding:8px 10px;font-size:.72rem;font-weight:900;color:var(--ink)}.product-body{padding:20px;display:flex;flex-direction:column;gap:12px;flex:1}.product-name{font-family:var(--font-serif);font-size:1.55rem;line-height:1.02;letter-spacing:-.04em;margin:0}.product-meta{display:flex;justify-content:space-between;gap:12px;align-items:center}.price{font-size:1.25rem;font-weight:950;color:#8a5e1d}.material{font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}.product-desc{margin:0;color:#6d5d4d;font-size:.95rem}.mini-gallery{display:flex;gap:8px;margin-top:auto}.mini-gallery img{width:44px;height:44px;border-radius:12px;object-fit:cover;border:1px solid rgba(111,81,59,.18)}.product-link{margin-top:4px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid rgba(111,81,59,.14);padding-top:14px;font-weight:950;text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;color:var(--ink)}
.process{background:var(--paper)}.process-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:50px;align-items:start}.steps{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.steps article{background:linear-gradient(180deg,#fffaf1,#f4e8d7);border:1px solid rgba(111,81,59,.16);border-radius:28px;padding:24px;box-shadow:var(--soft-shadow)}.steps span{display:block;color:var(--gold);font-family:var(--font-serif);font-size:2.2rem;line-height:1;margin-bottom:18px}.steps h3{margin:0 0 8px;font-size:1.2rem}.steps p{margin:0;color:var(--muted)}
.trust{padding-top:0;background:var(--paper)}.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.trust-grid article{background:var(--ink);color:var(--paper);border-radius:26px;padding:24px;border:1px solid rgba(215,170,88,.22)}.trust-grid b{display:block;font-family:var(--font-serif);font-size:1.25rem;margin-bottom:8px}.trust-grid span{color:#d2c2ad;font-size:.94rem}
.final-cta{background:linear-gradient(135deg,#1b120d,#3a291f);color:var(--paper);position:relative;overflow:hidden}.final-cta:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 10%,rgba(215,170,88,.20),transparent 34%),radial-gradient(circle at 80% 95%,rgba(215,170,88,.12),transparent 30%)}.final-card{position:relative;max-width:840px;text-align:center;margin:auto;background:rgba(255,250,241,.06);border:1px solid rgba(215,170,88,.25);border-radius:40px;padding:58px 28px;box-shadow:0 30px 90px rgba(0,0,0,.25)}.final-card p{color:#d7c7ae;margin-bottom:26px}.footer{background:#100a07;color:#c9bba8;padding:24px 0}.footer-grid{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:.9rem}.footer a{color:var(--gold-2);font-weight:900}
.float-wa{position:fixed;z-index:950;right:22px;bottom:22px;padding:16px 20px;background:#25d366;color:#07150c;box-shadow:0 16px 34px rgba(37,211,102,.34)}
.modal{position:fixed;inset:0;z-index:2000;background:rgba(15,10,7,.78);display:none;place-items:center;padding:20px;backdrop-filter:blur(14px)}.modal.active{display:grid}.modal-panel{width:min(1080px,100%);max-height:min(860px,92svh);overflow:auto;background:var(--paper);border-radius:34px;display:grid;grid-template-columns:1.05fr .95fr;position:relative;box-shadow:0 40px 120px rgba(0,0,0,.45);border:1px solid rgba(215,170,88,.30)}.modal-close{position:absolute;right:14px;top:14px;z-index:3;width:46px;height:46px;border-radius:50%;border:1px solid rgba(23,17,13,.12);background:rgba(255,250,241,.92);font-size:2rem;line-height:1;cursor:pointer}.modal-media{background:#21150f;min-height:620px;display:grid;grid-template-rows:1fr auto}.modal-media>img{width:100%;height:100%;object-fit:cover}.modal-thumbs{display:flex;gap:9px;padding:12px;overflow-x:auto;background:#160e0a}.modal-thumbs button{width:76px;height:76px;min-width:76px;border-radius:16px;border:2px solid transparent;background:transparent;padding:0;overflow:hidden;cursor:pointer}.modal-thumbs button.active{border-color:var(--gold)}.modal-thumbs img{width:100%;height:100%;object-fit:cover}.modal-info{padding:54px 34px 34px;display:flex;flex-direction:column;justify-content:center}.modal-info h2{font-family:var(--font-serif);font-size:clamp(2rem,4vw,4rem);line-height:.96;letter-spacing:-.055em;margin:0 0 18px}.modal-price{font-size:2rem;font-weight:950;color:#8a5e1d;margin-bottom:8px}.modal-material{margin:0 0 20px;color:var(--muted);font-weight:900;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem}.modal-info p:not(.eyebrow):not(.modal-material){color:#5f5144;font-size:1.05rem;margin:0 0 28px}.modal-actions{display:flex;gap:12px;flex-wrap:wrap}.modal-actions .btn{flex:1;min-width:190px}
.reveal{opacity:0;transform:translateY(16px);animation:reveal .7s ease forwards}.delay-1{animation-delay:.12s}.delay-2{animation-delay:.22s}@keyframes reveal{to{opacity:1;transform:none}}
@media (max-width:1000px){.hero-grid,.process-grid,.strip-grid{grid-template-columns:1fr}.hero-art{min-height:520px;max-width:640px;margin:auto;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,minmax(220px,1fr))}.collection-row{grid-template-columns:repeat(2,1fr)}.products-grid{grid-template-columns:repeat(2,1fr)}.trust-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.section-pad{padding:70px 0}.topbar{top:10px;border-radius:28px;min-height:66px}.brand-copy small{display:none}.nav-cta{display:none}.menu-btn{display:block}.nav{position:absolute;left:0;right:0;top:calc(100% + 10px);display:none;flex-direction:column;align-items:stretch;background:rgba(23,17,13,.96);border:1px solid rgba(215,170,88,.22);border-radius:28px;padding:18px}.nav.active{display:flex}.nav a{padding:14px 16px}.hero{padding-top:118px;min-height:auto}.hero-copy h1{font-size:clamp(3.4rem,18vw,5.8rem)}.hero-art{min-height:auto;grid-template-columns:1fr;grid-template-rows:auto;gap:16px;padding:12px;max-width:520px}.hero-card-main,.hero-card-small,.hero-card-small.one,.hero-card-small.two{grid-column:auto;grid-row:auto;height:220px}.collection-row,.products-grid,.steps,.trust-grid{grid-template-columns:1fr}.collection-tile{min-height:220px}.modal-panel{grid-template-columns:1fr;border-radius:26px}.modal-media{min-height:360px}.modal-info{padding:34px 22px 24px}.footer-grid{flex-direction:column;text-align:center}.float-wa{right:14px;bottom:14px;font-size:.72rem;padding:14px 16px}.hero-stats{display:none}}
@media (max-width:430px){.container{width:min(100% - 24px,1180px)}.topbar{width:calc(100% - 18px);padding:9px}.brand-mark{width:46px;height:46px}.hero-actions .btn{width:100%}.product-name{font-size:1.35rem}.hero-art{padding:10px}.hero-card-main,.hero-card-small{height:190px}.modal{padding:10px}.modal-thumbs button{width:62px;height:62px;min-width:62px}}

.product-kicker{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#9a7544;font-size:.68rem;font-weight:950;letter-spacing:.13em;text-transform:uppercase;border-bottom:1px solid rgba(111,81,59,.10);padding-bottom:8px}
.product-kicker span:last-child{color:#8c7a68;text-align:right}
.product-card:nth-child(1),.product-card:nth-child(20),.product-card:nth-child(24){box-shadow:0 26px 74px rgba(23,17,13,.18)}
.collection-tile{min-height:250px}
.filters{gap:10px;justify-content:center}
.filter-btn{white-space:nowrap}
@media (max-width:760px){.collection-row{grid-template-columns:repeat(2,minmax(0,1fr))}.collection-tile{min-height:190px}.product-kicker{font-size:.62rem}}
@media (max-width:430px){.collection-row{grid-template-columns:1fr}.collection-tile{min-height:220px}}


/* === v11 premium polish: paleta más oscura, copy comercial y material cards === */
:root{
  --ink:#110905;
  --ink-2:#1b0f09;
  --espresso:#2a160d;
  --cognac:#9b5f25;
  --copper:#b97834;
  --old-gold:#d9a34a;
  --paper:#f5ead8;
  --sand:#d9c0a0;
  --muted:#8f765e;
  --shadow:0 34px 90px rgba(0,0,0,.34);
  --soft-shadow:0 20px 55px rgba(22,10,5,.20);
}
body{background:var(--ink);color:#21150f;}
.site-bg{background:
  radial-gradient(circle at 12% 12%, rgba(217,163,74,.16), transparent 28%),
  radial-gradient(circle at 88% 4%, rgba(155,95,37,.18), transparent 24%),
  linear-gradient(135deg,#0d0704,#201008 52%,#120905);
}
.site-bg:after{opacity:.18;background-size:110px 110px;background-image:linear-gradient(rgba(217,163,74,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(217,163,74,.12) 1px,transparent 1px)}
.topbar{background:rgba(17,9,5,.92);border-color:rgba(217,163,74,.26);box-shadow:0 24px 80px rgba(0,0,0,.42)}
.brand-copy strong,.nav a{color:#fff3df}.brand-copy small{color:#c29a61}.nav-cta,.btn.primary{background:linear-gradient(135deg,#e2b25c,#a86d2d);color:#120905;box-shadow:0 16px 36px rgba(168,109,45,.28)}
.hero{background:linear-gradient(180deg,rgba(17,9,5,.88),rgba(37,20,11,.95));color:var(--paper)}
.hero:before{background:radial-gradient(circle at 20% 20%,rgba(217,163,74,.18),transparent 36%),radial-gradient(circle at 80% 80%,rgba(155,95,37,.20),transparent 34%)}
.hero-copy h1{color:#fff2dd;text-shadow:0 12px 40px rgba(0,0,0,.35)}
.lead,.hero-stats span,.section-head p{color:#d4bea1}.hero-stats span{background:rgba(245,234,216,.08);border-color:rgba(217,163,74,.18)}
.collections,.process,.trust{background:linear-gradient(180deg,#1a0e08,#24150d);color:var(--paper)}
.collections .section-head h2,.process .section-head h2,.materials .section-head h2{color:#fff2dd}.collections .section-head p,.process .section-head p,.materials .section-head p{color:#d4bea1}
.collection-tile{border-color:rgba(217,163,74,.24);box-shadow:0 28px 80px rgba(0,0,0,.35)}
.atelier-strip{background:linear-gradient(135deg,#7a3f19,#1a0d07 72%);color:var(--paper);border-color:rgba(217,163,74,.24)}
.strip-grid h2{color:#fff2dd}.strip-grid p:last-child{color:#e4c8a1}
.catalog{background:linear-gradient(180deg,#140a06,#2b170c 45%,#160b06);color:var(--paper)}
.catalog .section-head h2{color:#fff2dd}.catalog .section-head p{color:#d7bf9d}
.filter-btn{background:rgba(245,234,216,.08);border-color:rgba(217,163,74,.26);color:#ead5b5}.filter-btn:hover,.filter-btn.active{background:linear-gradient(135deg,#e2b25c,#a86d2d);color:#130904;border-color:#e2b25c}
.product-card{background:linear-gradient(180deg,#fbf0dd,#e7cfad);border-color:rgba(217,163,74,.32)}
.product-img-wrap{background:#100905}.product-name{color:#1a0d07}.product-desc{color:#5f4b38}.product-kicker{color:#996127;border-bottom-color:rgba(65,35,18,.13)}
.price{color:#8b4e16}.material{color:#806852}.product-link{color:#2b160b;border-top-color:rgba(65,35,18,.14)}
.materials{background:linear-gradient(180deg,#24150d,#110905);color:var(--paper)}
.materials-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;max-width:980px;margin:0 auto}.material-card{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:center;background:rgba(245,234,216,.08);border:1px solid rgba(217,163,74,.24);border-radius:34px;padding:18px;box-shadow:var(--shadow)}.material-card img{width:100%;height:360px;object-fit:cover;border-radius:26px}.material-card h3{font-family:var(--font-serif);font-size:clamp(2rem,4vw,3.6rem);line-height:.96;letter-spacing:-.05em;margin:0 0 14px;color:#fff2dd}.material-card p:not(.eyebrow){color:#dcc4a3;font-size:1.05rem}.material-tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.material-tags span{padding:10px 13px;border-radius:999px;background:rgba(217,163,74,.14);border:1px solid rgba(217,163,74,.25);color:#f2d39a;font-weight:900;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}.steps article{background:rgba(245,234,216,.08);border-color:rgba(217,163,74,.22)}.steps h3{color:#fff2dd}.steps p{color:#d4bea1}.trust-grid article{background:rgba(245,234,216,.07);border-color:rgba(217,163,74,.22)}
.final-cta{background:linear-gradient(135deg,#090503,#2b170c)}.footer{background:#080403}
@media (max-width:760px){.material-card{grid-template-columns:1fr}.material-card img{height:300px}}


/* ============================================================
   v12 — pulido premium: tipografía Fraunces, reveal por scroll,
   fade-in de imágenes y micro-interacciones de marca cara.
   (Bloque aditivo: no altera las reglas previas que ya funcionan)
   ============================================================ */

/* Fraunces es más ancha que Georgia: relajamos el tracking de titulares
   para que respiren y se vean editoriales, no apretados. */
body{font-feature-settings:"ss01","cv01";letter-spacing:.002em}
.hero-copy h1{letter-spacing:-.035em;line-height:.9;font-weight:500}
.section-head h2,.final-card h2,.process h2,.modal-info h2,
.strip-grid h2,.material-card h3{letter-spacing:-.022em;font-weight:500}
.product-name{letter-spacing:-.02em;font-weight:600}
.eyebrow{font-weight:700}            /* Manrope 900 no existe; 700 es su tope real */
.filter-btn,.material,.product-link,.nav,.nav-cta,.float-wa{font-weight:700}
.price,.modal-price{font-weight:800}

/* --- Reveal por scroll (antes aparecía todo de golpe al cargar) --- */
.reveal{
  animation:none;
  opacity:0;transform:translateY(30px);
  transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible{opacity:1;transform:none}
.delay-1{transition-delay:.1s}
.delay-2{transition-delay:.2s}

/* --- Fade-in suave de imágenes (solo si el JS corre; si no, se ven normal) --- */
html.js-fade .product-img-wrap img,
html.js-fade .collection-tile img,
html.js-fade .hero-card img,
html.js-fade .material-card img,
html.js-fade .modal-media>img{
  opacity:0;transition:opacity .7s ease,transform .4s ease;
}
html.js-fade .product-img-wrap img.j-loaded,
html.js-fade .collection-tile img.j-loaded,
html.js-fade .hero-card img.j-loaded,
html.js-fade .material-card img.j-loaded,
html.js-fade .modal-media>img.j-loaded{opacity:1}

/* --- Micro-interacciones de marca cara --- */
::selection{background:rgba(217,163,74,.32);color:#1a0d07}
html{scroll-behavior:smooth}
*:focus-visible{outline:2px solid var(--old-gold,#d9a34a);outline-offset:3px;border-radius:6px}

/* botón primario con un brillo sutil al pasar el cursor */
.btn.primary{position:relative;overflow:hidden}
.btn.primary::after{
  content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);transition:left .6s ease;
}
.btn.primary:hover::after{left:140%}

/* tarjetas de producto con elevación más fina y borde dorado al hover */
.product-card{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,border-color .3s ease}
.product-card:hover{transform:translateY(-7px)}
.collection-tile{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
.collection-tile:hover{transform:translateY(-5px)}

/* WhatsApp flotante con latido discreto (señala acción sin gritar) */
.float-wa{animation:wa-beat 2.6s ease-in-out infinite}
@keyframes wa-beat{0%,100%{box-shadow:0 16px 34px rgba(37,211,102,.34)}50%{box-shadow:0 16px 44px rgba(37,211,102,.55)}}

/* barra de scroll a tono con la marca (Chromium/Edge) */
*{scrollbar-width:thin;scrollbar-color:#9b5f25 transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:linear-gradient(#b97834,#7a3f19);border-radius:99px}
::-webkit-scrollbar-track{background:transparent}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none}
  .float-wa{animation:none}
  html.js-fade img{opacity:1!important}
}


/* ============================================================
   v14 — UPGRADES VISUALES "WOW"
   Intro de marca · barra de progreso · hero refinado ·
   glow ambiental · hover premium. Todo aditivo y seguro.
   ============================================================ */

/* ---------- 1. Intro de marca (preloader) ---------- */
.j-preloader{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 38%,#1d100a,#0a0503 70%);
  animation:jPreFailsafe .6s ease 3.4s forwards;   /* respaldo si el JS no corre */
}
.j-preloader.done{opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .6s ease,visibility .6s ease}
@keyframes jPreFailsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
.j-pre-inner{display:grid;justify-items:center;gap:10px;text-align:center}
.j-pre-mark{width:84px;height:84px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  border:1px solid rgba(217,163,74,.5);background:#160d07;
  box-shadow:0 0 40px rgba(217,163,74,.25);
  animation:jPreMark 1s cubic-bezier(.2,.8,.2,1) both}
.j-pre-mark img{width:100%;height:100%;object-fit:cover;transform:scale(1.35)}
.j-pre-name{font-family:var(--font-serif);font-weight:500;font-size:2.4rem;color:#fff2dd;
  letter-spacing:.04em;animation:jPreUp .8s ease .25s both}
.j-pre-sub{font-family:var(--font-sans);font-weight:700;font-size:.7rem;letter-spacing:.34em;
  text-transform:uppercase;color:#c29a61;animation:jPreUp .8s ease .4s both}
.j-pre-line{height:2px;width:0;margin-top:8px;border-radius:99px;
  background:linear-gradient(90deg,transparent,#e2b25c,transparent);
  animation:jPreLine 1s ease .55s forwards}
@keyframes jPreMark{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
@keyframes jPreUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes jPreLine{to{width:150px}}

/* ---------- 2. Barra de progreso de lectura ---------- */
.j-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:9998;
  background:linear-gradient(90deg,#9b5f25,#e2b25c,#f0ca78);
  box-shadow:0 0 14px rgba(226,178,92,.55);transition:width .12s linear}

/* ---------- 3. Hero refinado: marco limpio + tarjetas flotantes ---------- */
.hero-art:before{               /* reemplaza el "blob" antiguo por un marco premium */
  inset:2% -3% 3% 1% !important;border-radius:38px !important;
  background:linear-gradient(150deg,rgba(226,178,92,.12),rgba(20,11,6,.42)) !important;
  border:1px solid rgba(217,163,74,.22);
  box-shadow:0 50px 110px rgba(0,0,0,.55),inset 0 0 70px rgba(217,163,74,.06) !important;
}
.hero-card-main{animation:jFloat 6.5s ease-in-out infinite}
.hero-card-small.one{animation:jFloat 6.5s ease-in-out infinite .9s}
.hero-card-small.two{animation:jFloat 6.5s ease-in-out infinite 1.8s}
@keyframes jFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}

/* ---------- 4. Glow ambiental que respira (fondo) ---------- */
.site-bg:before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(40% 40% at 28% 18%,rgba(217,163,74,.10),transparent 70%),
    radial-gradient(42% 42% at 78% 72%,rgba(155,95,37,.13),transparent 70%);
  animation:jGlow 18s ease-in-out infinite alternate}
@keyframes jGlow{
  0%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(-4%,3%) scale(1.12);opacity:.8}}

/* ---------- 5. Hover premium en tarjetas de producto ---------- */
.product-card{position:relative}
.product-card::after{content:"";position:absolute;inset:0;border-radius:32px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(217,163,74,0);transition:box-shadow .35s ease}
.product-card:hover::after{box-shadow:inset 0 0 0 1px rgba(217,163,74,.55),0 0 34px rgba(217,163,74,.14)}
.product-card:hover .product-img-wrap img{transform:scale(1.085)}
.product-badge{transition:transform .35s ease}
.product-card:hover .product-badge{transform:translateY(-2px)}
.product-link span:last-child{display:inline-block;transition:transform .3s ease}
.product-card:hover .product-link span:last-child{transform:translateX(7px)}

/* ---------- 6. Detalles finos ---------- */
.collection-tile::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.12) 50%,transparent 60%);
  transform:translateX(-120%);transition:transform .7s ease}
.collection-tile:hover::before{transform:translateX(120%)}   /* destello al pasar */
.nav-cta{transition:transform .2s ease,box-shadow .2s ease}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(226,178,92,.34)}

@media (prefers-reduced-motion:reduce){
  .j-preloader{animation:none;display:none}
  .hero-card-main,.hero-card-small.one,.hero-card-small.two,.site-bg:before{animation:none}
}


/* ============================================================
   v15 — Filtros en carrusel horizontal en móvil
   (en pantallas chicas, 20+ filtros ya no se amontonan en
   varias filas: ahora es una fila que se desliza con el dedo)
   ============================================================ */
@media (max-width:760px){
  .filters{
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scroll-padding-inline:16px;
    padding:4px 16px 12px;
    scrollbar-width:none;                       /* Firefox: sin barra */
    /* degradado en los bordes para insinuar que hay más filtros al lado */
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 28px),transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 28px),transparent 100%);
  }
  .filters::-webkit-scrollbar{display:none;width:0;height:0}  /* Chrome/Safari */
  .filter-btn{flex:0 0 auto;scroll-snap-align:center}
}


/* ============================================================
   v16 — Fix del modal de producto (móvil/pantallas angostas)
   Problema: .modal-info estaba centrado verticalmente y al no caber
   el contenido se desbordaba HACIA ARRIBA, encimándose sobre la
   imagen y tapando las miniaturas. Aquí se corrige y se hacen las
   miniaturas (las demás fotos) claramente visibles.
   ============================================================ */

/* Miniaturas más legibles y obviamente tocables en todos lados */
.modal-thumbs button{border:2px solid rgba(217,163,74,.20);transition:border-color .2s ease,transform .2s ease}
.modal-thumbs button:hover{border-color:rgba(217,163,74,.5)}
.modal-thumbs button.active{border-color:#e2b25c;transform:translateY(-2px)}

@media (max-width:760px){
  /* Fix principal: el detalle fluye de arriba hacia abajo, ya no se encima */
  .modal-info{justify-content:flex-start;padding-top:26px}
  /* Imagen principal cuadrada y completa; miniaturas en fila clara debajo */
  .modal-media{display:block;min-height:0}
  .modal-media>img{height:auto;width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
  .modal-thumbs{gap:10px;padding:12px;justify-content:flex-start}
  .modal-thumbs button{width:66px;height:66px;min-width:66px}
}


/* ============================================================
   v17 — Alivio de memoria/GPU en MÓVIL (evita el crash de Safari)
   En iPhone, los desenfoques (backdrop-filter), los modos de mezcla
   y varias capas animadas a la vez saturan la memoria gráfica.
   En móvil los simplificamos; en desktop todo sigue igual.
   ============================================================ */
@media (max-width:760px){
  .topbar{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(17,9,5,.97)}
  .modal{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(10,6,4,.94)}
  .product-badge,.photo-count,.hero-card span{backdrop-filter:none;-webkit-backdrop-filter:none}
  .site-bg:before{animation:none}                 /* glow ambiental quieto */
  .site-bg:after{mix-blend-mode:normal;opacity:.10}/* sin modo de mezcla */
  .float-wa{animation:none}                        /* sin latido */
  .hero-card-main,.hero-card-small.one,.hero-card-small.two{animation:none} /* sin flotar */
  .collection-tile::before{display:none}           /* sin destello que repinta */
}