/*
  Liquen, joyería de plata y piedra
  Harmony: monochromatic (silver and slate greys with a green cast, one hue family) plus ONE accent, malachite green.
  Taken from the photo shoot: grey lichen, oxidised silver, spruce needles, malachite stones.
  60  --silver     #E9EAE4  page background (dominant)
  30  --slate      #2B3331  dark bands (vitrina, footer), headings
      --lichen     #DDE1DA  secondary surfaces (cards, form)
      --ink        #1F2624  body text
      --muted      #4F5854  secondary text
  10  --malachite  #1B6B52  accent: links, prices, focus  | --malachite-deep #155C46 button fill
  Contrast (WCAG): ink on silver 12.75, muted on silver 6.08, silver on slate 10.71,
  white on malachite-deep 7.92, malachite on silver 5.30, malachite on lichen 4.85, #C9D1CB on slate 8.31.
*/
:root {
  --silver: #E9EAE4;
  --lichen: #DDE1DA;
  --slate: #2B3331;
  --ink: #1F2624;
  --muted: #4F5854;
  --malachite: #1B6B52;
  --malachite-deep: #155C46;
  --mist: #C9D1CB;
  --serif: "Gloock", Georgia, serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
  --pad: clamp(20px, 5vw, 72px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--silver); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--malachite); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.05; margin: 0; color: var(--slate); }
:focus-visible { outline: 2px solid var(--malachite); outline-offset: 3px; }
.hidden { display: none; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--slate); color: var(--silver); padding: 10px 14px; z-index: 50; }
.skip:focus { left: 8px; }

/* header */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px var(--pad); background: rgba(233, 234, 228, .92); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.top.is-scrolled { border-color: var(--mist); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--slate); font: 400 28px/1 var(--serif); }
.brand svg { width: 30px; height: 30px; fill: none; stroke: var(--slate); stroke-width: 2; }
.brand svg circle { fill: var(--malachite); stroke: none; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; }
.nav a:hover { color: var(--malachite); }
.nav .nav__etsy { border: 1.5px solid var(--slate); border-radius: 999px; padding: 9px 18px; }
.nav .nav__etsy:hover { background: var(--slate); color: var(--silver); }
.menu-btn { display: none; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 26px; border-radius: 999px; background: var(--malachite-deep); color: #fff; font: 600 16px/1 var(--sans); text-decoration: none; border: 1.5px solid var(--malachite-deep); cursor: pointer; transition: background .2s, color .2s; }
.btn:hover { background: var(--slate); border-color: var(--slate); }
.btn--ghost { background: transparent; color: var(--slate); border-color: var(--slate); }
.btn--ghost:hover { background: var(--slate); color: var(--silver); }

/* hero */
.hero { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding: clamp(40px, 6vw, 80px) var(--pad) clamp(64px, 8vw, 110px); }
.hero__place { margin: 0 0 22px; color: var(--muted); font-weight: 500; }
.hero__title { font-size: clamp(54px, 8.4vw, 132px); letter-spacing: -.02em; max-width: 9ch; }
.hero__lede { max-width: 46ch; margin: 30px 0 36px; font-size: 19px; color: var(--muted); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__arch { margin: 0; position: relative; }
.hero__arch img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 38% 50%; border-radius: 999px 999px 18px 18px; animation: rise 1.2s cubic-bezier(.2,.7,.2,1) both; }
.hero__arch figcaption { position: absolute; left: -28px; bottom: 44px; background: var(--silver); padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--slate); box-shadow: 0 10px 30px -12px rgba(43, 51, 49, .35); }
@keyframes rise { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: none; } }

/* vitrina */
.vitrina { background: var(--slate); color: var(--silver); padding: clamp(64px, 8vw, 120px) var(--pad); border-radius: 36px 36px 0 0; }
.vitrina h2 { color: var(--silver); font-size: clamp(44px, 6vw, 84px); }
.vitrina__head { display: grid; grid-template-columns: auto 1fr; gap: 20px 64px; align-items: end; margin-bottom: 44px; }
.vitrina__head p { max-width: 52ch; margin: 0; color: var(--mist); justify-self: end; }
.stones { display: flex; flex-wrap: wrap; gap: 12px; }
.stone { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 20px 6px 7px; border-radius: 999px; background: transparent; border: 1.5px solid rgba(201, 209, 203, .35); color: var(--silver); font: 500 15px/1 var(--sans); cursor: pointer; transition: border-color .2s, background .2s; }
.stone:hover { border-color: var(--mist); }
.stone.is-on { background: var(--silver); color: var(--slate); border-color: var(--silver); }
.stone__gem { width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff 0 6%, var(--g1) 22%, var(--g2) 100%); box-shadow: inset 0 -4px 8px rgba(0,0,0,.3), 0 0 0 3px rgba(233,234,228,.2); }
.stone__gem--all { background: conic-gradient(#3FAE7C, #B69AD6, #F2B25C, #F4F4F6, #5C7FD6, #3FAE7C); }
.stones__note { margin: 18px 0 40px; color: var(--mist); font-size: 15px; }
.shelf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 24px; }
.piece { display: flex; flex-direction: column; }
.piece[hidden] { display: none; }
.piece img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
.piece--big { grid-column: span 2; grid-row: span 2; }
.piece--big img { aspect-ratio: auto; flex: 1; min-height: 0; height: 100%; }
.piece__info { width: 100%; display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding-top: 16px; }
.piece h3 { color: var(--silver); font-size: 25px; }
.piece--big h3 { font-size: 34px; }
.piece__meta { grid-column: 1; margin: 6px 0 0; color: var(--mist); font-size: 15px; }
.piece__price { grid-column: 2; grid-row: 1; margin: 0; font: 400 22px/1.1 var(--serif); color: #9FD7BD; }
.piece__buy { grid-column: 1 / -1; width: 100%; margin-top: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 999px; border: 1.5px solid var(--silver); color: var(--silver); text-decoration: none; font-weight: 600; font-size: 15px; transition: background .2s, color .2s; }
.piece__buy::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 7h12l-1 13H7L6 7zm3 0a3 3 0 0 1 6 0' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 7h12l-1 13H7L6 7zm3 0a3 3 0 0 1 6 0' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; }
.piece__buy:hover { background: var(--silver); color: var(--slate); }

/* taller */
.taller { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding: clamp(72px, 9vw, 130px) var(--pad); }
.taller__img { margin: 0; }
.taller__img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px 18px 999px 999px; }
.taller h2 { font-size: clamp(38px, 4.6vw, 64px); margin-bottom: 28px; max-width: 16ch; }
.taller p { max-width: 58ch; color: var(--muted); font-size: 18px; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 40px 0 0; }
.facts div { border-top: 1.5px solid var(--slate); padding-top: 14px; }
.facts dt { font: 400 24px/1.1 var(--serif); color: var(--slate); }
.facts dd { margin: 6px 0 0; color: var(--muted); font-size: 15px; }

/* encargos */
.encargos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); padding: clamp(72px, 9vw, 120px) var(--pad); background: var(--lichen); }
.encargos h2 { font-size: clamp(38px, 4.6vw, 64px); margin-bottom: 20px; }
.encargos__intro > p { max-width: 50ch; color: var(--muted); font-size: 18px; }
.steps { list-style: none; counter-reset: s; margin: 34px 0; padding: 0; display: grid; gap: 18px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center; color: var(--muted); }
.steps p { margin: 0; }
.steps li::before { content: counter(s); width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--malachite); color: var(--malachite); display: grid; place-items: center; font: 400 20px/1 var(--serif); }
.steps strong { color: var(--slate); }
.encargos__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 18px; }
.form { background: var(--silver); border-radius: 24px; padding: clamp(24px, 3.5vw, 44px); display: grid; gap: 20px; align-self: start; }
.form label { display: grid; gap: 8px; font-weight: 600; font-size: 15px; color: var(--slate); }
.form .opt { font-weight: 400; color: var(--muted); }
.form input:not([type=radio]), .form select, .form textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid #B9C1BB; border-radius: 12px; background: #fff; font: 400 16px/1.4 var(--sans); color: var(--ink); }
.form textarea { resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--malachite); box-shadow: 0 0 0 3px rgba(27, 107, 82, .2); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pick { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pick legend { font-weight: 600; font-size: 15px; color: var(--slate); margin-bottom: 10px; padding: 0; }
.pick label { display: block; }
.pick input { position: absolute; opacity: 0; }
.pick span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid #B9C1BB; font-weight: 500; cursor: pointer; }
.pick input:checked + span { background: var(--slate); border-color: var(--slate); color: var(--silver); }
.pick input:focus-visible + span { outline: 2px solid var(--malachite); outline-offset: 2px; }
.form .btn { justify-self: start; }
.form__ok { margin: 0; padding: 16px 18px; border-radius: 12px; background: var(--malachite-deep); color: #fff; }

/* cuidados */
.cuidados { padding: clamp(72px, 9vw, 120px) var(--pad); display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; }
.cuidados h2 { font-size: clamp(38px, 4.6vw, 64px); max-width: 10ch; }
.faq details { border-bottom: 1.5px solid var(--mist); padding: 22px 0; }
.faq details:first-child { border-top: 1.5px solid var(--mist); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 20px; font: 400 23px/1.25 var(--serif); color: var(--slate); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); font-size: 26px; line-height: 1; color: var(--malachite); transition: transform .25s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 14px 0 0; max-width: 60ch; color: var(--muted); }

/* footer */
.foot { background: var(--slate); color: var(--mist); padding: 56px var(--pad) 36px; display: grid; grid-template-columns: 1fr auto; gap: 28px; }
.foot__name { font: 400 44px/1 var(--serif); color: var(--silver); margin: 0 0 10px; }
.foot p { margin: 0; }
.foot__links { display: flex; flex-wrap: wrap; gap: 24px; align-items: end; }
.foot__links a { color: var(--silver); }
.foot__credit { grid-column: 1 / -1; font-size: 14px; padding-top: 24px; border-top: 1px solid rgba(201, 209, 203, .25); }

/* responsive */
@media (max-width: 1080px) {
  .shelf { grid-template-columns: repeat(2, 1fr); }
  .vitrina__head { grid-template-columns: 1fr; }
  .vitrina__head p { justify-self: start; }
}
@media (max-width: 860px) {
  .menu-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--slate); background: transparent; color: var(--slate); font: 600 15px/1 var(--sans); cursor: pointer; }
  .nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--silver); padding: 8px var(--pad) 24px; border-bottom: 1px solid var(--mist); display: none; }
  .nav.is-open { display: flex; }
  .nav a { padding: 14px 0; font-size: 18px; border-bottom: 1px solid var(--lichen); }
  .nav .nav__etsy { margin-top: 14px; text-align: center; border-bottom: 1.5px solid var(--slate); }
  .hero, .taller, .encargos, .cuidados { grid-template-columns: 1fr; }
  .hero__arch { max-width: 440px; }
  .hero__arch figcaption { left: 12px; }
  .facts { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .shelf { grid-template-columns: 1fr 1fr; gap: 28px 14px; }
  .piece--big { grid-column: 1 / -1; grid-row: auto; }
  .piece--big img { aspect-ratio: 4 / 3; height: auto; flex: none; }
  .piece h3 { font-size: 20px; }
  .piece__info { display: flex; flex-direction: column; flex: 1; }
  .piece__price { margin: 6px 0 14px; font-size: 19px; }
  .piece__buy { margin-top: auto; font-size: 14px; }
  .form__row { grid-template-columns: 1fr; }
  .stone { padding-right: 14px; font-size: 14px; min-height: 46px; }
  .stone__gem { width: 32px; height: 32px; }
  .foot { grid-template-columns: 1fr; }
  .vitrina { border-radius: 24px 24px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}