:root {
  --ivory: #F8F3EC;
  --linen: #F1E8DD;
  --sand: #E7D8C7;
  --clay: #C66B43;
  --clay-d: #A8552F;
  --espresso: #3B2B24;
  --cocoa: #5E463A;
  --taupe: #8B7466;
  --line: #E4D6C6;
  --white: #FFFDF9;
  --gold: #CDA45E;
  --silver: #C5C8CC;
  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--sans); font-weight: 300; font-size: 16px; color: var(--espresso);
  background: var(--ivory); line-height: 1.65; -webkit-font-smoothing: antialiased;
}
body.lock { overflow: hidden; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.005em; line-height: 1.08; margin: 0; }
strong { font-weight: 500; }
[hidden] { display: none !important; }
.wrap { width: min(1320px, 100% - 48px); margin-inline: auto; }
.narrow { max-width: 760px; }
.center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--espresso); color: var(--ivory); padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; }
:focus-visible { outline: 1.5px solid var(--clay); outline-offset: 3px; }

.eyebrow { font-family: var(--sans); text-transform: uppercase; letter-spacing: .22em; font-size: .72rem; font-weight: 400; color: var(--clay); margin: 0 0 14px; }
.eyebrow-light { color: var(--linen); }
.lead { font-size: 1.12rem; color: var(--cocoa); max-width: 34em; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 30px;
  font-family: var(--sans); font-size: .78rem; font-weight: 400; letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none; border: 1px solid transparent; border-radius: 0; transition: background .3s, color .3s, border-color .3s; white-space: nowrap;
}
.btn-dark { background: var(--espresso); color: var(--ivory); }
.btn-dark:hover { background: var(--clay-d); }
.btn-outline { border-color: var(--espresso); color: var(--espresso); }
.btn-outline:hover { background: var(--espresso); color: var(--ivory); }
.btn-light { background: var(--ivory); color: var(--espresso); }
.btn-light:hover { background: var(--white); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-link {
  display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid currentColor; font-weight: 400; transition: color .2s, gap .2s;
}
.btn-link:hover { color: var(--clay-d); gap: 12px; }

/* Top bar + header */
.topbar { background: var(--linen); color: var(--cocoa); text-align: center; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; padding: 9px 16px; }
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(248, 243, 236, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.site-header.scrolled { border-bottom-color: var(--line); }
.hdr { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; height: 84px; width: min(1320px, 100% - 48px); margin-inline: auto; }
.logo { grid-column: 2; justify-self: center; }
.logo img { height: 34px; width: auto; }
.nav { display: flex; gap: 30px; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; }
.nav a { text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
.nav a:hover { color: var(--clay-d); }
.nav a[aria-current="page"] { border-bottom-color: var(--clay); }
.nav-left { grid-column: 1; grid-row: 1; }
.hdr-right { grid-column: 3; grid-row: 1; justify-self: end; display: flex; align-items: center; gap: 34px; }
.bag-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; padding: 8px 0;
}
.bag-count { min-width: 20px; height: 20px; border-radius: 10px; padding: 0 5px; background: var(--clay); color: var(--ivory); font-size: .68rem; letter-spacing: 0; display: inline-grid; place-items: center; }
.icon-btn { width: 42px; height: 42px; display: grid; place-items: center; font-size: 1.7rem; line-height: 1; font-weight: 300; }
.hdr .menu-btn { display: none; }

.mnav { position: fixed; inset: 0; top: 0; z-index: 39; background: var(--ivory); padding-top: 130px; overflow: auto; animation: fade .25s; }
.mnav-panel { width: min(1320px, 100% - 48px); margin-inline: auto; }
.mnav ul { list-style: none; margin: 0; padding: 0; }
.mnav-main a { display: block; font-family: var(--serif); font-size: 2.3rem; line-height: 1.25; text-decoration: none; padding: 4px 0; }
.mnav-main a[aria-current="page"] { color: var(--clay); font-style: italic; }
.mnav-sub { margin-top: 32px !important; padding-top: 24px !important; border-top: 1px solid var(--line) !important; }
.mnav-sub a { display: block; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; padding: 9px 0; }

/* Sections */
.section { padding: 110px 0; }
.section-top0 { padding-top: 10px; }
.section-tint { background: var(--linen); }
.section-flush { padding: 0; }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 44px; flex-wrap: wrap; }
.sec-head h2, .split-text h2, .care-text h2 { font-size: clamp(2.2rem, 4vw, 3.3rem); }
.sec-head .eyebrow { margin-bottom: 10px; }
.sec-head-center { flex-direction: column; align-items: center; text-align: center; }
.sec-head h2 a { text-decoration: none; }
.sec-head h2 a:hover { color: var(--clay-d); }

/* Hero */
.hero { display: grid; grid-template-columns: 1fr 1.15fr; min-height: calc(100vh - 120px); max-height: 900px; }
.hero-text { display: flex; flex-direction: column; justify-content: center; padding: 60px max(24px, calc((100vw - 1320px) / 2)) 60px max(24px, calc((100vw - 1320px) / 2)); padding-right: 64px; }
.hero h1 { font-size: clamp(3rem, 6vw, 5.6rem); line-height: .98; margin-bottom: 26px; }
.hero .lead { margin: 0 0 40px; }
.ctas { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.hero-img { position: relative; overflow: hidden; background: var(--sand); }
.hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; animation: zoomout 1.6s var(--ease) both; }

/* Category tiles */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cat-tile { text-decoration: none; display: block; }
.cat-img { aspect-ratio: 3/4; overflow: hidden; background: var(--sand); }
.cat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.cat-tile:hover .cat-img img { transform: scale(1.05); }
.cat-name { display: flex; align-items: center; justify-content: space-between; font-family: var(--serif); font-size: 1.7rem; margin-top: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); transition: color .2s; }
.cat-tile:hover .cat-name { color: var(--clay-d); }

/* Banner */
.banner { position: relative; height: min(88vh, 820px); overflow: hidden; background: var(--cocoa); }
.banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(40, 26, 20, .62) 0%, rgba(40, 26, 20, .25) 45%, rgba(40, 26, 20, 0) 70%); }
.banner-text { position: absolute; z-index: 1; left: max(24px, calc((100vw - 1320px) / 2)); top: 50%; transform: translateY(-50%); max-width: 440px; color: var(--ivory); }
.banner-text h2 { font-size: clamp(2.8rem, 5.5vw, 4.8rem); font-style: italic; margin-bottom: 16px; }
.banner-text p { margin: 0 0 30px; font-size: 1.08rem; opacity: .92; }

/* Tones */
.tones { display: grid; grid-template-columns: 1fr 1fr; }
.tone { position: relative; display: block; height: min(80vh, 760px); overflow: hidden; color: var(--ivory); text-decoration: none; }
.tone img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.tone:hover img { transform: scale(1.04); }
.tone::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(40, 26, 20, .55), rgba(40, 26, 20, 0) 50%); }
.tone .tone-label { position: absolute; z-index: 1; left: 40px; bottom: 36px; display: flex; flex-direction: column; gap: 6px; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; }
.tone .tone-label svg { display: none; }
.tone em { font-family: var(--serif); font-size: clamp(2.6rem, 4.5vw, 3.8rem); text-transform: none; letter-spacing: 0; font-style: italic; line-height: 1; }

/* Split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.split-img { aspect-ratio: 4/5; overflow: hidden; background: var(--sand); }
.split-img img { width: 100%; height: 100%; object-fit: cover; }
.split-text h2 { margin-bottom: 30px; }
.mini-steps { list-style: none; padding: 0; margin: 0 0 40px; }
.mini-steps li { display: flex; gap: 22px; padding: 18px 0; border-top: 1px solid var(--line); font-size: 1.05rem; color: var(--cocoa); }
.mini-steps li:last-child { border-bottom: 1px solid var(--line); }
.mini-steps span { font-family: var(--serif); font-style: italic; color: var(--clay); font-size: 1.25rem; line-height: 1.3; }

/* Steps */
.steps { list-style: none; padding: 0; margin: 0 0 50px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.steps li { padding: 10px 44px; text-align: center; border-left: 1px solid var(--line); }
.steps li:first-child { border-left: 0; }
.roman { display: block; font-family: var(--serif); font-style: italic; font-size: 2.4rem; color: var(--clay); line-height: 1; margin-bottom: 16px; }
.steps h3 { font-size: 1.8rem; margin-bottom: 10px; }
.steps p { margin: 0; color: var(--cocoa); }
.steps-big li { padding: 30px 48px 40px; }

/* Instagram */
.ig-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.ig-item { aspect-ratio: 1; overflow: hidden; background: var(--sand); }
.ig-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), opacity .3s; }
.ig-item:hover img { transform: scale(1.06); opacity: .9; }

/* Page head */
.page-head { padding: 70px 0 50px; text-align: center; }
.page-head h1 { font-size: clamp(3rem, 6vw, 5rem); margin: 10px 0 18px; }
.page-head .lead { margin: 0 auto; }
.crumbs { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); display: flex; gap: 10px; justify-content: center; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--clay-d); }
.page-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 70vh; }
.page-hero-text { display: flex; flex-direction: column; justify-content: center; padding: 60px max(24px, calc((100vw - 1320px) / 2)); padding-right: 60px; }
.page-hero-text .crumbs { justify-content: flex-start; margin-bottom: 18px; }
.page-hero h1 { font-size: clamp(3.2rem, 6.5vw, 5.6rem); margin-bottom: 20px; }
.page-hero-img { position: relative; overflow: hidden; background: var(--sand); min-height: 420px; }
.page-hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Listing */
.listing { padding: 0 0 110px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 18px 0; margin-bottom: 36px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 8px 16px; border: 1px solid var(--line); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px; transition: all .2s; background: transparent;
}
.chip:hover { border-color: var(--espresso); }
.chip.on { background: var(--espresso); color: var(--ivory); border-color: var(--espresso); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--sand); flex: none; }
.dot-dorado { background: linear-gradient(135deg, #EED39A, var(--gold)); }
.dot-plateado { background: linear-gradient(135deg, #F1F2F3, var(--silver)); }
.count { font-size: .78rem; color: var(--taupe); letter-spacing: .06em; }
.sort select {
  font: inherit; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--espresso);
  background: transparent; border: 0; border-bottom: 1px solid var(--espresso); padding: 6px 22px 6px 0; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%233B2B24'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center;
}

/* Product grid */
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px 22px; grid-auto-flow: dense; }
.loading, .empty { grid-column: 1 / -1; text-align: center; color: var(--taupe); padding: 70px 0; }
.pcard { position: relative; display: flex; flex-direction: column; }
.pmedia { position: relative; }
.pimg { position: relative; display: block; aspect-ratio: 4/5; overflow: hidden; background: var(--sand); }
.pimg img, .pimg .noimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .6s var(--ease), transform 1.2s var(--ease); }
.pimg .img-b { opacity: 0; }
@media (hover: hover) {
  .pcard:hover .pimg .img-b { opacity: 1; }
  .pcard:hover .pimg img { transform: scale(1.03); }
  .pcard:hover .quick { opacity: 1; transform: translateY(0); }
}
.tag { position: absolute; top: 14px; left: 14px; z-index: 1; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; background: var(--ivory); padding: 5px 10px; }
.tag-out { background: var(--espresso); color: var(--ivory); }
.pcard.is-out .pimg img { filter: grayscale(.4); opacity: .75; }
.quick {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2; background: rgba(248, 243, 236, .96); color: var(--espresso);
  padding: 13px 10px; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; text-align: center;
  opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s var(--ease), background .2s;
}
.quick:hover { background: var(--espresso); color: var(--ivory); }
.quick.added { background: var(--espresso); color: var(--ivory); opacity: 1; transform: none; }
.pinfo { padding-top: 16px; display: flex; flex-direction: column; gap: 3px; }
.pname { font-family: var(--serif); font-size: 1.32rem; line-height: 1.2; text-decoration: none; }
.pname:hover { color: var(--clay-d); }
.pmeta { margin: 0; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); display: flex; align-items: center; gap: 8px; }
.pprice { margin: 4px 0 0; font-size: .98rem; font-weight: 400; }
.ask { color: var(--taupe); font-weight: 300; font-size: .9rem; }
.noimg { display: grid; place-items: center; background: var(--sand); color: var(--clay); font-family: var(--serif); font-size: 1.6rem; font-style: italic; }

/* Editorial tiles inside the grid */
.ed-tile { margin: 0; grid-column: span 2; grid-row: span 2; position: relative; overflow: hidden; background: var(--sand); min-height: 420px; }
.ed-tile.right { grid-column: 3 / span 2; }
.ed-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.ed-tile:hover img { transform: scale(1.03); }
.ed-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(40, 26, 20, .55), rgba(40, 26, 20, 0) 45%); }
.ed-cap { position: absolute; z-index: 1; left: 36px; right: 36px; bottom: 32px; color: var(--ivory); }
.ed-cap h3 { font-size: clamp(2rem, 3vw, 2.8rem); font-style: italic; margin-bottom: 6px; }
.ed-cap p { margin: 0; font-size: 1rem; opacity: .92; }

/* Cross links */
.xlinks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.xlink { text-decoration: none; }
.xlink img { aspect-ratio: 1; object-fit: cover; width: 100%; transition: opacity .3s; }
.xlink:hover img { opacity: .85; }
.xlink .xlink-label { display: block; font-family: var(--serif); font-size: 1.5rem; margin-top: 12px; }

/* Product page */
.product { padding: 40px 0 110px; }
.product .crumbs { justify-content: flex-start; margin-bottom: 28px; }
.prod-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 70px; align-items: start; }
.gallery { display: grid; grid-template-columns: 76px 1fr; gap: 14px; }
.gallery-main { aspect-ratio: 4/5; background: var(--sand); overflow: hidden; position: relative; grid-column: 2; grid-row: 1; }
.gallery-main img, .gallery-main .noimg { width: 100%; height: 100%; object-fit: cover; }
.gthumbs { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 10px; }
.gthumb { aspect-ratio: 4/5; overflow: hidden; opacity: .55; transition: opacity .2s; border: 1px solid transparent; }
.gthumb.on, .gthumb:hover { opacity: 1; }
.gthumb.on { border-color: var(--espresso); }
.gthumb img, .gthumb .noimg { width: 100%; height: 100%; object-fit: cover; font-size: .7rem; }
.prod-info { position: sticky; top: 120px; }
.prod-info h1 { font-size: clamp(2.6rem, 4vw, 3.6rem); margin: 0 0 14px; }
.prod-price { font-size: 1.3rem; margin: 0 0 6px; font-weight: 400; }
.prod-meta { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); display: flex; align-items: center; gap: 8px; margin: 0 0 26px; }
.prod-desc { color: var(--cocoa); font-size: 1.05rem; margin: 0 0 32px; padding-top: 26px; border-top: 1px solid var(--line); }
.buy { display: flex; gap: 12px; margin-bottom: 12px; }
.buy .btn { flex: 1; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--espresso); }
.qty button { width: 42px; height: 50px; font-size: 1.1rem; }
.qty span { min-width: 26px; text-align: center; font-weight: 400; }
.qty-sm { border-color: var(--line); }
.qty-sm button { width: 30px; height: 32px; font-size: .95rem; }
.prod-note { font-size: .86rem; color: var(--taupe); margin: 18px 0 30px; }
.acc details { border-top: 1px solid var(--line); }
.acc details:last-child { border-bottom: 1px solid var(--line); }
.acc summary, .faq summary { cursor: pointer; list-style: none; padding: 20px 34px 20px 0; position: relative; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 400; }
.acc summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.acc summary::after, .faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; font-weight: 300; transition: transform .25s; color: var(--clay); }
.acc details[open] summary::after, .faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.acc p, .faq p { margin: 0 0 22px; color: var(--cocoa); }

/* FAQ */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { font-family: var(--serif); font-size: 1.5rem; letter-spacing: 0; text-transform: none; padding: 24px 40px 24px 0; }
.faq p { font-size: 1.04rem; max-width: 40em; }
.faq-cta { text-align: center; margin-top: 50px; }
.faq-cta p { font-family: var(--serif); font-size: 1.6rem; font-style: italic; margin: 0 0 18px; }

/* Care */
.intro-quote { font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.4; text-align: center; font-style: italic; margin: 0 auto 90px; color: var(--cocoa); }
.care-list { display: flex; flex-direction: column; gap: 100px; }
.care-row { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.care-row-rev .care-img { order: 2; }
.care-img { aspect-ratio: 4/5; overflow: hidden; background: var(--sand); max-height: 640px; }
.care-img img { width: 100%; height: 100%; object-fit: cover; }
.care-n { display: block; font-family: var(--serif); font-style: italic; font-size: 3rem; color: var(--clay); line-height: 1; margin-bottom: 18px; }
.care-text h2 { margin-bottom: 20px; }
.care-text p { font-size: 1.1rem; color: var(--cocoa); max-width: 30em; margin: 0; }

/* Footer */
.site-footer { background: var(--linen); padding: 90px 0 36px; }
.foot-top { display: grid; grid-template-columns: 1.2fr 2fr; gap: 60px; padding-bottom: 60px; border-bottom: 1px solid var(--line); }
.foot-brand img { height: 46px; width: auto; margin-bottom: 14px; }
.foot-brand p { margin: 0; font-family: var(--serif); font-size: 1.3rem; font-style: italic; color: var(--cocoa); }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.foot-cols h4 { font-family: var(--sans); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 400; color: var(--clay); margin: 0 0 18px; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.foot-cols a { text-decoration: none; color: var(--cocoa); }
.foot-cols a:hover { color: var(--clay-d); }
.foot-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: 28px; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe); }
.foot-bottom p { margin: 0; }

.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 30; width: 54px; height: 54px; border-radius: 50%;
  background: var(--espresso); color: var(--ivory); display: grid; place-items: center; box-shadow: 0 10px 26px -10px rgba(40, 26, 20, .6); transition: background .2s, transform .2s;
}
.wa-float:hover { background: var(--clay-d); transform: scale(1.05); }

/* Drawer */
.drawer { position: fixed; inset: 0; z-index: 70; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(40, 26, 20, .4); animation: fade .25s; }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--ivory); display: flex; flex-direction: column; animation: slide .35s var(--ease); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 26px; border-bottom: 1px solid var(--line); }
.drawer-head h3 { font-size: 1.9rem; }
.drawer-body { flex: 1; overflow: auto; padding: 4px 26px; }
.cart-empty { text-align: center; padding: 70px 0; }
.cart-empty p { font-family: var(--serif); font-size: 1.5rem; font-style: italic; margin: 0 0 24px; }
.line { display: grid; grid-template-columns: 76px 1fr auto; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); align-items: center; }
.line-img { display: block; width: 76px; aspect-ratio: 4/5; overflow: hidden; background: var(--sand); }
.line-img img, .line-img .noimg { width: 100%; height: 100%; object-fit: cover; font-size: .8rem; }
.line-name { margin: 0; font-family: var(--serif); font-size: 1.2rem; line-height: 1.2; }
.line-name a { text-decoration: none; }
.line-meta { margin: 3px 0 5px; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); }
.line-price { margin: 0; font-size: .95rem; }
.line-qty { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.link-sm { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--taupe); text-decoration: underline; }
.drawer-foot { padding: 20px 26px 24px; border-top: 1px solid var(--line); background: var(--white); }
.total-row { display: flex; justify-content: space-between; align-items: baseline; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }
.total-row strong { font-size: 1.15rem; letter-spacing: 0; text-transform: none; font-weight: 400; }
.total-note { font-size: .82rem; color: var(--taupe); margin: 4px 0 16px; }
.delivery { border: 0; padding: 0; margin: 0 0 14px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; font-size: .95rem; }
.delivery legend { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; padding: 0; margin-right: 6px; float: left; }
.delivery label { display: inline-flex; gap: 7px; align-items: center; }
.delivery input { accent-color: var(--clay); }
.field { display: block; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px; }
.field span { color: var(--taupe); text-transform: none; letter-spacing: 0; font-size: .8rem; }
.field input { display: block; width: 100%; margin-top: 8px; padding: 12px 14px; border: 1px solid var(--line); background: var(--ivory); font: inherit; font-size: .95rem; text-transform: none; letter-spacing: 0; color: var(--espresso); border-radius: 0; }
.field input:focus { outline: 1px solid var(--clay); outline-offset: -1px; }
.pay-note { font-size: .78rem; color: var(--taupe); text-align: center; margin: 12px 0 0; }

.toast {
  position: fixed; left: 50%; top: 96px; transform: translate(-50%, -10px); z-index: 80; background: var(--espresso); color: var(--ivory);
  padding: 12px 22px; font-size: .78rem; letter-spacing: .1em; opacity: 0; pointer-events: none; transition: all .3s var(--ease);
  max-width: calc(100% - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@keyframes fade { from { opacity: 0; } }
@keyframes slide { from { transform: translateX(100%); } }
@keyframes zoomout { from { transform: scale(1.08); } }

/* Responsive */
@media (max-width: 1100px) {
  .nav-left a:last-child { display: none; }
  .nav { gap: 22px; }
  .pgrid { grid-template-columns: repeat(3, 1fr); }
  .pgrid-strip > :nth-child(4) { display: none; }
  .ed-tile.right { grid-column: 2 / span 2; }
}
@media (max-width: 900px) {
  .topbar { font-size: .64rem; letter-spacing: .08em; padding: 8px 10px; }
  .hdr { height: 68px; grid-template-columns: 48px 1fr 48px; gap: 8px; width: calc(100% - 24px); }
  .nav { display: none; }
  .hdr .menu-btn { display: grid; grid-column: 1; grid-row: 1; }
  .logo img { height: 26px; }
  .hdr-right { grid-column: 3; }
  .bag-label { display: none; }
  .mnav { padding-top: 120px; }
  .section { padding: 76px 0; }
  .wrap { width: calc(100% - 32px); }
  .hero { grid-template-columns: 1fr; min-height: 0; max-height: none; }
  .hero-img { order: -1; height: 62vh; min-height: 380px; }
  .hero-text { padding: 44px 16px 56px; }
  .hero h1 { font-size: clamp(2.7rem, 11vw, 3.6rem); }
  .cat-grid { grid-template-columns: 1fr 1fr; gap: 28px 14px; }
  .cat-name { font-size: 1.35rem; }
  .banner { height: 76vh; }
  .banner::after { background: linear-gradient(0deg, rgba(40, 26, 20, .7) 0%, rgba(40, 26, 20, .15) 60%); }
  .banner-text { top: auto; bottom: 40px; transform: none; right: 16px; left: 16px; }
  .tones { grid-template-columns: 1fr 1fr; }
  .tone { height: 62vh; }
  .tone .tone-label { left: 18px; bottom: 20px; font-size: .62rem; }
  .split, .care-row { grid-template-columns: 1fr; gap: 36px; }
  .care-row-rev .care-img { order: 0; }
  .care-list { gap: 70px; }
  .intro-quote { margin-bottom: 60px; }
  .steps { grid-template-columns: 1fr; }
  .steps li { border-left: 0; border-top: 1px solid var(--line); padding: 30px 10px; }
  .steps li:first-child { border-top: 0; }
  .ig-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; }
  .page-hero { grid-template-columns: 1fr; }
  .page-hero-img { order: -1; height: 50vh; min-height: 300px; }
  .page-hero-text { padding: 40px 16px 20px; }
  .page-head { padding: 46px 0 34px; }
  .pgrid { grid-template-columns: 1fr 1fr; gap: 36px 12px; }
  .pgrid-strip > :nth-child(4) { display: flex; }
  .ed-tile, .ed-tile.right { grid-column: 1 / -1; grid-row: span 1; min-height: 0; aspect-ratio: 4/5; }
  .ed-cap { left: 20px; right: 20px; bottom: 22px; }
  .pname { font-size: 1.15rem; }
  .quick { opacity: 1; transform: none; left: auto; right: 8px; bottom: 8px; width: 38px; height: 38px; padding: 0; border-radius: 50%; font-size: 0; display: grid; place-items: center; }
  .quick::before { content: "+"; font-size: 1.4rem; font-weight: 300; line-height: 1; }
  .quick.added::before { content: "✓"; font-size: 1rem; }
  .toolbar { gap: 12px; }
  .toolbar .chips { flex-wrap: nowrap; overflow-x: auto; width: calc(100% + 32px); margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  .toolbar .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
  .toolbar-right { margin-left: 0; width: 100%; justify-content: space-between; }
  .xlinks { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .xlink .xlink-label { font-size: 1.2rem; }
  .prod-grid { grid-template-columns: 1fr; gap: 30px; }
  .gallery { grid-template-columns: 1fr; margin-inline: -16px; }
  .gallery-main { grid-column: 1; }
  .gthumbs { grid-column: 1; grid-row: 2; flex-direction: row; padding-inline: 16px; }
  .gthumb { width: 64px; }
  .prod-info { position: static; }
  .foot-top { grid-template-columns: 1fr; gap: 40px; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .toast { top: 80px; }
}
@media (max-width: 480px) {
  .tones { grid-template-columns: 1fr; }
  .tone { height: 58vh; }
  .tone .tone-label { left: 22px; bottom: 26px; font-size: .7rem; }
  .ctas { gap: 22px; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   ARENA FX: textura, dunas, 3D sutil y transiciones
   ========================================================= */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .31 0 0 0 0 .22 .2 0 0 0 -.055'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --dune-linen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath fill='%23F1E8DD' d='M0 40V26C140 12 260 6 400 14c150 9 240 24 390 22 150-2 250-24 400-26 110-1 190 8 250 16v14Z'/%3E%3C/svg%3E");
}
/* Textura de arena muy suave en los fondos (no toca las fotos) */
body, .section-tint, .site-footer, .topbar, .drawer-panel, .mnav { background-image: var(--grain); background-repeat: repeat; }
.drawer-foot { background-image: var(--grain); }

/* Dunas que separan las secciones */
.section-tint, .site-footer { position: relative; }
.section-tint::before, .site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: -39px; height: 40px; pointer-events: none;
  background: var(--dune-linen) center bottom / 100% 100% no-repeat;
}
.section-tint::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -39px; height: 40px; pointer-events: none; z-index: 1;
  background: var(--dune-linen) center bottom / 100% 100% no-repeat; transform: scaleY(-1) scaleX(-1);
}

/* Canvas de granos */
.sand-canvas { position: fixed; inset: 0; z-index: 85; pointer-events: none; }

/* Botones con volumen */
.btn { position: relative; overflow: hidden; transform: translateZ(0); transition: background .3s, color .3s, border-color .3s, transform .35s var(--ease), box-shadow .35s var(--ease); }
.btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 244, 226, .28) 48%, rgba(255, 244, 226, .05) 56%, transparent 70%), var(--grain);
  background-size: 250% 100%, auto; background-position: 120% 0, 0 0; opacity: 0; transition: background-position .9s var(--ease), opacity .3s;
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgba(59, 43, 36, .55), 0 2px 0 rgba(59, 43, 36, .04); }
  .btn:hover::after { opacity: 1; background-position: -20% 0, 0 0; }
  .btn-outline:hover::after { opacity: .6; }
}
.btn:active { transform: translateY(0) scale(.99); box-shadow: none; }

/* 3D en fotos: inclinación muy leve + brillo que sigue al mouse */
.cat-img, .pmedia, .split-img, .xlink, .care-img, .gallery-main { transition: transform .7s var(--ease), box-shadow .7s var(--ease); backface-visibility: hidden; }
.pmedia.is-tilting { transform: translateY(-4px); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.xlink, .ig-item, .tone, .ed-tile, .cat-img, .split-img, .care-img { position: relative; }
.is-tilting { transition: transform .12s linear, box-shadow .5s var(--ease); }
.cat-img.is-tilting, .pmedia.is-tilting, .split-img.is-tilting, .care-img.is-tilting, .gallery-main.is-tilting { box-shadow: 0 30px 50px -34px rgba(59, 43, 36, .55); }
.sheen {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease);
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 246, 228, .42), rgba(255, 246, 228, .1) 28%, transparent 55%);
  mix-blend-mode: soft-light;
}
.is-tilting > .sheen { opacity: 1; }
span.sheen { inset: 0; left: 0; top: 0; right: 0; bottom: 0; margin: 0; display: block; }
.pmedia .quick { z-index: 3; }

/* La bolsa recibe la arena */
@keyframes bagPulse { 0% { transform: scale(1); } 35% { transform: scale(1.14) rotate(-4deg); } 70% { transform: scale(.97); } 100% { transform: scale(1); } }
.bag-pulse svg { animation: bagPulse .55s var(--ease); }
.bag-pulse .bag-count { animation: bagPulse .55s .05s var(--ease); }

/* Aparición: como arena que se asienta */
.settle { opacity: 0; transform: translateY(18px); filter: blur(5px); transition: opacity .9s var(--ease), transform 1s var(--ease), filter .9s var(--ease); }
.settle.in { opacity: 1; transform: none; filter: none; }
.reveal { filter: blur(5px); transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease); }
.reveal.in { filter: none; }

/* Transición entre páginas: una duna que cubre y descubre */
.veil { position: fixed; left: 0; right: 0; top: -90px; height: calc(100vh + 180px); z-index: 95; pointer-events: none; display: flex; flex-direction: column; transform: translateY(105%); visibility: hidden; }
.veil-body { flex: 1; background-color: var(--sand); background-image: var(--grain); display: grid; place-items: center; }
.veil-body img { width: 130px; height: auto; opacity: 0; transform: translateY(8px); }
.veil-dune { display: block; width: 100%; height: 90px; flex: none; }
.veil-dune path { fill: var(--sand); }
.leave .veil { visibility: visible; animation: veilIn .42s cubic-bezier(.6, .05, .3, 1) forwards; }
.leave .veil-body img { animation: logoIn .35s .1s var(--ease) forwards; }
.arrive .veil { visibility: visible; transform: translateY(0); animation: veilOut .7s .08s cubic-bezier(.65, 0, .25, 1) forwards; }
.arrive .veil-body img { opacity: 1; transform: none; animation: logoOut .3s var(--ease) forwards; }
@keyframes veilIn { from { transform: translateY(105%); } to { transform: translateY(0); } }
@keyframes veilOut { from { transform: translateY(0); } to { transform: translateY(-105%); visibility: hidden; } }
@keyframes logoIn { to { opacity: 1; transform: none; } }
@keyframes logoOut { to { opacity: 0; transform: translateY(-8px); } }

@media (max-width: 900px) {
  .section-tint::before, .site-footer::before { top: -23px; height: 24px; }
  .section-tint::after { bottom: -23px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .settle, .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .veil { display: none !important; }
  .btn::after, .sheen { display: none; }
}

/* Confianza */
.trust-band { padding: 34px 0; background-color: var(--linen); background-image: var(--grain); }
.trust-band-plain { border-top: 0; }
.trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.trust li { display: flex; align-items: center; gap: 14px; justify-content: center; }
.trust svg { color: var(--clay); flex: none; }
.trust strong { display: block; font-weight: 400; font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; }
.trust span { display: block; font-size: .88rem; color: var(--taupe); }

/* Reseñas */
.reviews { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; }
.review { margin: 0; scroll-snap-align: start; background: var(--white); background-image: var(--grain); border: 1px solid var(--line); padding: 36px 32px 30px; display: flex; flex-direction: column; gap: 18px; }
.stars { color: var(--clay); letter-spacing: .2em; font-size: .9rem; }
.stars-off { color: var(--sand); }
.review blockquote { margin: 0; font-family: var(--serif); font-size: 1.4rem; line-height: 1.35; font-style: italic; flex: 1; }
.review figcaption { font-size: .82rem; color: var(--cocoa); }
.review figcaption strong { font-weight: 500; }
.review-prod { display: block; margin-top: 4px; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--taupe); }
@media (max-width: 900px) {
  .trust { grid-template-columns: 1fr 1fr; gap: 22px 14px; }
  .trust li { justify-content: flex-start; align-items: flex-start; gap: 10px; }
  .trust svg { width: 22px; height: 22px; }
  .trust strong { letter-spacing: .08em; font-size: .7rem; }
  .trust span { font-size: .82rem; }
  .reviews { grid-auto-columns: 85%; }
}

.reviews[data-n="1"] { display: block; max-width: 820px; margin: 0 auto; }
.reviews[data-n="1"] .review { background: none; border: 0; padding: 10px 0 0; text-align: center; align-items: center; gap: 22px; }
.reviews[data-n="1"] .review blockquote { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.3; }
.reviews[data-n="1"] .review blockquote::before { content: "\201C"; display: block; font-size: 4.5rem; line-height: .6; color: var(--clay); font-style: normal; margin-bottom: 18px; opacity: .8; }
.reviews[data-n="1"] .review figcaption { font-size: .9rem; }
.reviews[data-n="2"] { grid-auto-columns: calc((100% - 24px) / 2); max-width: 1000px; margin: 0 auto; }
@media (max-width: 900px) { .reviews[data-n="2"] { grid-auto-columns: 85%; } }


/* =========================================================
   TRANSICIONES SUAVES: dunas en los cortes, curvas en las fotos
   ========================================================= */
:root {
  --w-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath d='M0 48V30C140 14 270 6 410 14c150 9 240 26 390 24 150-2 250-26 400-28 110-1 190 8 240 16v22Z'/%3E%3C/svg%3E");
  --w-bot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 48' preserveAspectRatio='none'%3E%3Cpath transform='translate%280 48%29 scale%281 -1%29' d='M0 48V30C140 14 270 6 410 14c150 9 240 26 390 24 150-2 250-26 400-28 110-1 190 8 240 16v22Z'/%3E%3C/svg%3E");
  --w-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 1000' preserveAspectRatio='none'%3E%3Cpath d='M48 0H22C10 110 4 230 14 370c10 140 26 240 22 390-3 110-16 170-14 240H48Z'/%3E%3C/svg%3E");
  --w-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 1000' preserveAspectRatio='none'%3E%3Cpath transform='translate%2848 0%29 scale%28-1 1%29' d='M48 0H22C10 110 4 230 14 370c10 140 26 240 22 390-3 110-16 170-14 240H48Z'/%3E%3C/svg%3E");
  --wh: 48px;
  --r: 22px;
}
/* Utilidades de borde ondulado (máscaras) */
.dune-y {
  -webkit-mask: var(--w-top) top / 100% var(--wh) no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--wh) + 2px) no-repeat, var(--w-bot) bottom / 100% var(--wh) no-repeat;
          mask: var(--w-top) top / 100% var(--wh) no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--wh) + 2px) no-repeat, var(--w-bot) bottom / 100% var(--wh) no-repeat;
}
.dune-b {
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--wh) + 1px) no-repeat, var(--w-bot) bottom / 100% var(--wh) no-repeat;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--wh) + 1px) no-repeat, var(--w-bot) bottom / 100% var(--wh) no-repeat;
}

/* Aviso superior: termina en una duna en vez de un corte */
.topbar { position: relative; z-index: 41; }
.topbar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 16' preserveAspectRatio='none'%3E%3Cpath fill='%23F1E8DD' d='M0 0h1440v6c-160 8-300 10-460 6-170-4-260-10-420-8C390 6 220 12 0 6Z'/%3E%3C/svg%3E") center top / 100% 100% no-repeat; }
/* Encabezado: sombra difuminada en vez de línea */
.site-header { border-bottom: 0; transition: box-shadow .4s var(--ease); }
.site-header.scrolled { box-shadow: 0 14px 28px -24px rgba(59, 43, 36, .35); }

/* Portada: la foto entra con curvas (borde izquierdo y superior) */
.hero-img { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M70 52C180 22 300 14 440 34S740 76 1000 26V1000H34C14 880 52 760 40 610S8 330 22 190C28 120 40 74 70 52Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M70 52C180 22 300 14 440 34S740 76 1000 26V1000H34C14 880 52 760 40 610S8 330 22 190C28 120 40 74 70 52Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.page-hero-img { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M70 52C180 22 300 14 440 34S740 76 1000 26V958C840 990 680 944 500 962S170 994 60 962C20 940 50 800 40 640S8 330 22 190C28 120 40 74 70 52Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M70 52C180 22 300 14 440 34S740 76 1000 26V958C840 990 680 944 500 962S170 994 60 962C20 940 50 800 40 640S8 330 22 190C28 120 40 74 70 52Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

/* Franja de confianza con dunas arriba y abajo */
.trust-band { position: relative; z-index: 2; }
.trust-band::before, .trust-band::after { content: ""; position: absolute; left: 0; right: 0; height: 40px; pointer-events: none; background: var(--dune-linen) center bottom / 100% 100% no-repeat; }
.trust-band::before { top: -39px; }
.trust-band::after { bottom: -39px; transform: scale(-1, -1); }

/* Banner y tonos: fotos a todo el ancho con bordes de duna */
.banner { background: transparent; }
.banner {
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--wh) + 1px) no-repeat, var(--w-bot) bottom / 100% var(--wh) no-repeat;
          mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--wh) + 1px) no-repeat, var(--w-bot) bottom / 100% var(--wh) no-repeat;
}
.section-tint::after { z-index: 3; }
.tones { -webkit-mask: var(--w-top) top / 100% var(--wh) no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--wh) + 2px) no-repeat, var(--w-bot) bottom / 100% var(--wh) no-repeat;
          mask: var(--w-top) top / 100% var(--wh) no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--wh) + 2px) no-repeat, var(--w-bot) bottom / 100% var(--wh) no-repeat; gap: 6px; }
.tone:first-child {
  -webkit-mask: linear-gradient(#000 0 0) left / calc(100% - 30px + 1px) 100% no-repeat, var(--w-right) right / 30px 100% no-repeat;
          mask: linear-gradient(#000 0 0) left / calc(100% - 30px + 1px) 100% no-repeat, var(--w-right) right / 30px 100% no-repeat;
}
.tone:last-child {
  -webkit-mask: var(--w-left) left / 30px 100% no-repeat, linear-gradient(#000 0 0) right / calc(100% - 30px + 1px) 100% no-repeat;
          mask: var(--w-left) left / 30px 100% no-repeat, linear-gradient(#000 0 0) right / calc(100% - 30px + 1px) 100% no-repeat;
}

/* Fotos dentro del contenido: esquinas suaves */
.cat-img, .pmedia, .pimg, .ed-tile, .split-img, .care-img, .gallery-main, .gthumb, .ig-item, .xlink img, .line-img, .review { border-radius: var(--r); }
.pmedia { overflow: hidden; }
.gthumb, .line-img { border-radius: 12px; }
.ig-item { border-radius: 16px; }
.sheen { border-radius: inherit; }
.cat-img, .split-img, .care-img, .gallery-main, .ed-tile, .ig-item, .xlink img { overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(#fff, #000); }

/* Botones, etiquetas y campos con curvas */
.btn, .chip, .quick, .tag, .toast, .qty, .bag-count { border-radius: 999px; }
.field input { border-radius: 14px; }
.drawer-panel { border-radius: 24px 0 0 24px; }
.quick { left: 14px; right: 14px; bottom: 14px; }

@media (max-width: 900px) {
  :root { --wh: 28px; --r: 16px; }
  .hero-img, .page-hero-img {
    -webkit-mask: var(--w-top) top / 100% var(--wh) no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--wh) + 2px) no-repeat, var(--w-bot) bottom / 100% var(--wh) no-repeat;
            mask: var(--w-top) top / 100% var(--wh) no-repeat, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--wh) + 2px) no-repeat, var(--w-bot) bottom / 100% var(--wh) no-repeat;
  }
  .trust-band::before { top: -23px; height: 24px; }
  .trust-band::after { bottom: -23px; height: 24px; }
  .gallery { margin-inline: 0; }
  .gthumbs { padding-inline: 0; }
  .drawer-panel { border-radius: 0; }
}
@media (max-width: 480px) {
  .tones { gap: 4px; }
  .tone:first-child {
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 22px + 1px) no-repeat, var(--w-bot) bottom / 100% 22px no-repeat;
            mask: linear-gradient(#000 0 0) top / 100% calc(100% - 22px + 1px) no-repeat, var(--w-bot) bottom / 100% 22px no-repeat;
  }
  .tone:last-child {
    -webkit-mask: var(--w-top) top / 100% 22px no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - 22px + 1px) no-repeat;
            mask: var(--w-top) top / 100% 22px no-repeat, linear-gradient(#000 0 0) bottom / 100% calc(100% - 22px + 1px) no-repeat;
  }
}

/* Dunas con la misma textura que las secciones (sin franjas más claras) */
.section-tint::before, .site-footer::before, .trust-band::before,
.section-tint::after, .trust-band::after, .topbar::after {
  background: var(--grain), linear-gradient(var(--linen), var(--linen));
  transform: none;
}
.section-tint::before, .site-footer::before, .trust-band::before {
  -webkit-mask: var(--w-top) center / 100% 100% no-repeat; mask: var(--w-top) center / 100% 100% no-repeat;
}
.section-tint::after, .trust-band::after, .topbar::after {
  -webkit-mask: var(--w-bot) center / 100% 100% no-repeat; mask: var(--w-bot) center / 100% 100% no-repeat;
}
/* Si dos secciones del mismo color se tocan, no hace falta duna entre ellas */
.trust-band + .section-tint::before { display: none; }
.trust-band:has(+ .section-tint)::after { display: none; }
main:has(> .section-tint:last-child) + .site-footer::before { display: none; }
main > .section-tint:last-child::after { display: none; }

/* =========================================================
   FOTOS: bordes delicados (difuminado suave, sin ondas)
   ========================================================= */
:root { --r: 12px; --fade: 64px; }
/* Portadas: la foto se funde muy suave con el fondo, sin silueta ondulada */
.hero-img, .page-hero-img {
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 var(--fade)), linear-gradient(180deg, transparent 0, #000 28px);
  -webkit-mask-composite: source-in;
          mask: linear-gradient(90deg, transparent 0, #000 var(--fade)), linear-gradient(180deg, transparent 0, #000 28px);
          mask-composite: intersect;
}
.page-hero-img {
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 var(--fade)), linear-gradient(180deg, transparent 0, #000 28px, #000 calc(100% - 40px), transparent 100%);
  -webkit-mask-composite: source-in;
          mask: linear-gradient(90deg, transparent 0, #000 var(--fade)), linear-gradient(180deg, transparent 0, #000 28px, #000 calc(100% - 40px), transparent 100%);
          mask-composite: intersect;
}
/* Fotos a lo ancho: apenas se difuminan arriba y abajo */
.banner {
  -webkit-mask: linear-gradient(180deg, #000 0, #000 calc(100% - 44px), transparent 100%);
          mask: linear-gradient(180deg, #000 0, #000 calc(100% - 44px), transparent 100%);
}
.tones {
  gap: 0;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
          mask: linear-gradient(180deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.tone:first-child { -webkit-mask: linear-gradient(90deg, #000 calc(100% - 14px), transparent 100%); mask: linear-gradient(90deg, #000 calc(100% - 14px), transparent 100%); }
.tone:last-child { -webkit-mask: linear-gradient(90deg, transparent 0, #000 14px); mask: linear-gradient(90deg, transparent 0, #000 14px); }
@media (max-width: 900px) {
  :root { --r: 10px; }
  .hero-img, .page-hero-img {
    -webkit-mask: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 36px), transparent 100%);
            mask: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 36px), transparent 100%);
  }
}
@media (max-width: 480px) {
  .tone:first-child { -webkit-mask: linear-gradient(180deg, #000 calc(100% - 14px), transparent 100%); mask: linear-gradient(180deg, #000 calc(100% - 14px), transparent 100%); }
  .tone:last-child { -webkit-mask: linear-gradient(180deg, transparent 0, #000 14px); mask: linear-gradient(180deg, transparent 0, #000 14px); }
}
/* Portada: también se difumina abajo, antes de la franja beige */
.hero-img {
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 var(--fade)), linear-gradient(180deg, transparent 0, #000 28px, #000 calc(100% - 96px), transparent 100%);
  -webkit-mask-composite: source-in;
          mask: linear-gradient(90deg, transparent 0, #000 var(--fade)), linear-gradient(180deg, transparent 0, #000 28px, #000 calc(100% - 96px), transparent 100%);
          mask-composite: intersect;
}
/* Banner: arriba se funde con el beige de la sección anterior, sin onda sobre la foto */
.section-tint:has(+ .banner)::after { display: none; }
.banner::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 70px; z-index: 1; pointer-events: none; background: linear-gradient(180deg, var(--linen), rgba(241, 232, 221, 0)); }
@media (max-width: 900px) {
  .hero-img {
    -webkit-mask: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 60px), transparent 100%);
            mask: linear-gradient(180deg, transparent 0, #000 22px, #000 calc(100% - 60px), transparent 100%);
  }
}

/* =========================================================
   FOTOS RECTAS: sin máscaras, difuminados ni esquinas redondeadas
   ========================================================= */
.hero-img, .page-hero-img, .banner, .tones, .tone:first-child, .tone:last-child { -webkit-mask: none !important; mask: none !important; }
.banner::before { display: none; }
.tones { gap: 0; }
.cat-img, .pmedia, .pimg, .ed-tile, .split-img, .care-img, .gallery-main, .gthumb, .ig-item, .xlink img, .line-img { border-radius: 0 !important; -webkit-mask-image: none !important; }
/* Que ninguna duna de sección pise una foto */
.hero { padding-bottom: 40px; }
@media (max-width: 900px) { .hero { padding-bottom: 0; } }

/* Reseñas: una a la vez, con flechas sutiles */
.rev-slider { position: relative; max-width: 980px; margin: 0 auto; display: flex; align-items: center; gap: 18px; }
.reviews, .reviews[data-n] { display: flex; grid-auto-flow: unset; flex: 1; min-width: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 0; max-width: none; margin: 0; padding: 0; }
.reviews::-webkit-scrollbar { display: none; }
.reviews .review { flex: 0 0 100%; scroll-snap-align: center; background: none; border: 0; padding: 10px 40px 0; text-align: center; align-items: center; gap: 22px; }
.reviews .review blockquote { font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.32; max-width: 760px; }
.reviews .review blockquote::before { content: "\201C"; display: block; font-size: 4.5rem; line-height: .6; color: var(--clay); font-style: normal; margin-bottom: 18px; opacity: .8; }
.reviews .review figcaption { font-size: .9rem; }
.rev-arrow {
  flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(59, 43, 36, .18); color: rgba(59, 43, 36, .55); background: transparent;
  transition: color .3s, border-color .3s, background .3s, transform .3s var(--ease);
}
.rev-arrow:hover { color: var(--clay-d); border-color: var(--clay); background: rgba(255, 253, 249, .6); }
.rev-prev:hover { transform: translateX(-2px); }
.rev-next:hover { transform: translateX(2px); }
.rev-dots { display: flex; justify-content: center; gap: 10px; margin-top: 30px; }
.rev-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sand); transition: background .3s, transform .3s; }
.rev-dot.on { background: var(--clay); transform: scale(1.25); }
@media (max-width: 900px) {
  .rev-slider { gap: 6px; }
  .rev-arrow { width: 36px; height: 36px; }
  .reviews .review { padding: 6px 4px 0; }
}

/* Instagram: últimas 3 publicaciones */
.ig-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 1080px; margin: 0 auto; }
.ig-grid .ig-item { aspect-ratio: 4 / 5; position: relative; }
.ig-badge { position: absolute; top: 12px; right: 12px; z-index: 3; color: var(--ivory); filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35)); }
@media (max-width: 900px) { .ig-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; } }

/* Reseñas: fila de tarjetas (vista anterior) con flechas sutiles */
.rev-row { max-width: none; gap: 16px; }
.rev-row .reviews { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.rev-row .reviews .review {
  flex: none; scroll-snap-align: start; background: var(--white); background-image: var(--grain); border: 1px solid var(--line);
  padding: 36px 32px 30px; text-align: left; align-items: stretch; gap: 18px; display: flex; flex-direction: column;
}
.rev-row .reviews .review blockquote { font-size: 1.4rem; line-height: 1.35; max-width: none; }
.rev-row .reviews .review blockquote::before { content: none; }
.rev-row .reviews .review figcaption { font-size: .82rem; }
.rev-arrow[disabled] { opacity: .3; cursor: default; pointer-events: none; }
@media (max-width: 900px) {
  .rev-row { gap: 6px; }
  .rev-row .reviews { grid-auto-columns: 85%; gap: 14px; }
  .rev-row .reviews .review { padding: 28px 22px 24px; }
}
@media (max-width: 900px) {
  .rev-row { flex-wrap: wrap; justify-content: center; gap: 18px 14px; }
  .rev-row .reviews { flex: 0 0 100%; order: 0; }
  .rev-row .rev-prev, .rev-row .rev-next { order: 1; }
}
/* Textos centrados: el párrafo también se centra */
.center .lead, .sec-head-center .lead { margin-left: auto; margin-right: auto; }
.center .lead { margin-bottom: 30px; }
.narrow.center > h2 { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 16px; }