.amazon-gold {
  --ink: #2b2016;
  --green: #5b3b18;
  --muted: #695744;
  --gold: #e7c37f;
  --line: #dacdb9;
  background: #0b0907;
}
.taller-cabecera,
.taller-portada {
  width: min(100% - 2 * clamp(20px, 5vw, 76px), 1380px);
  margin-inline: auto;
}
.taller-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 144px;
  border-bottom: 1px solid #a9824a55;
}
.taller-logo {
  display: block;
  width: clamp(116px, 10vw, 144px);
  height: auto;
  mix-blend-mode: screen;
}
.taller-etiqueta {
  color: #cbb28a;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.taller-portada {
  display: grid;
  grid-template-columns: minmax(0, .83fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(34px, 6vw, 100px);
  min-height: calc(100svh - 144px);
  padding-block: clamp(30px, 5vw, 72px);
  color: #f9f1e4;
}
.taller-texto .eyebrow { color: var(--gold); margin-bottom: 18px; }
.taller-texto h1 {
  font: 500 clamp(54px, 7.3vw, 114px)/.93 var(--serif);
  letter-spacing: -.04em;
}
.taller-texto h1 em { color: var(--gold); }
.taller-descripcion {
  margin: 24px 0 26px;
  max-width: 38ch;
  color: #d6c9b6;
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.65;
}
.taller-portada .taller-entrada {
  min-height: 50px;
  background: #e7c37f;
  color: #21150a;
  font-weight: 700;
}
.taller-portada .taller-entrada:hover { background: #f8d99f; }
.taller-portada .taller-entrada:focus-visible { outline: 2px solid #fff3d3; outline-offset: 4px; }
.taller-lianas {
  display: block;
  width: 100%;
  height: auto;
  align-self: start;
  margin-top: calc(-1 * clamp(30px, 5vw, 72px));
}
#bracelet-designer [hidden] { display: none; }
#bracelet-designer .builder-contact-note { margin-bottom: 10px; font-size: 12px; }
#bracelet-designer .woven-price { color: var(--green); }
@media (max-width: 760px) {
  .taller-cabecera { min-height: 108px; }
  .taller-logo { width: 108px; }
  .taller-portada { grid-template-columns: minmax(0, 1fr); gap: 8px; min-height: auto; padding-block-start: 0; }
  .taller-lianas { grid-row: 1; justify-self: center; max-width: min(540px, 58svh); margin-top: 0; }
  .taller-texto h1 { font-size: clamp(51px, 12vw, 77px); }
  .taller-descripcion { margin-block: 16px 20px; }
}


/* La escena también se usa como transición de entrada al taller. */
.amazon-gold {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
}
.selva {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: #11180e;
}
.selva img,
.selva-sombra {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.selva img {
  object-fit: cover;
  transform-origin: 55.5% 48%;
}
.selva-sombra {
  background: linear-gradient(90deg, #090806e8, #0908068a 42%, #0908061c 77%),
              linear-gradient(180deg, #090806c4, transparent 25%, transparent 76%, #090806ac);
}
.amazon-gold.entrando-selva .selva { position: fixed; z-index: 10; }
.taller-texto { text-shadow: 0 2px 16px #0b0907; }
.taller-entrada { text-shadow: none; }
.taller-cabecera { border-bottom-color: #e7c37f55; }
.taller-etiqueta { color: #e7cda4; text-shadow: 0 1px 8px #000; }
@media (max-width: 760px) {
  .selva-sombra {
    background: linear-gradient(90deg, #090806cd, #09080670 70%, #09080669),
                linear-gradient(180deg, #09080680, transparent 25%, transparent 85%, #090806aa);
  }
}

.selva-lianas {
  position: absolute;
  width: min(45vw, 680px);
  aspect-ratio: 720 / 470;
  background: url("assets/balines-en-lianas.svg") center / contain no-repeat;
  pointer-events: none;
}
.selva-lianas-fondo {
  top: 32%;
  left: 42%;
  width: min(21vw, 295px);
  opacity: .44;
  transform: rotate(-10deg);
  filter: brightness(.8) blur(1px);
}
.selva-lianas-dosel {
  right: -13%;
  top: -17%;
  opacity: .56;
  transform: rotate(25deg);
}
.selva .selva-marca {
  display: none;
  inset: 50% auto auto 50%;
  width: min(47vw, 282px);
  height: auto;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: drop-shadow(0 4px 22px #000);
  transform: translate(-50%, -50%);
}
.entrando-selva .selva-marca { display: block; }
.builder-charm-field > p {
  margin-top: 9px;
  color: var(--muted);
  font-size: 12px;
}
.builder-charm-options { display: flex; flex-wrap: wrap; gap: 8px; }
.builder-charm-options button {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  min-width: 74px;
  min-height: 66px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  font-size: 12px;
}
.builder-charm-options svg { width: 25px; height: 31px; }
.builder-charm-options button[aria-pressed="true"] {
  outline: 1px solid var(--green);
  background: #f5e6cd;
}
@media (max-width: 760px) {
  .selva-lianas-fondo { width: 34vw; left: 57%; top: 21%; }
  .selva-lianas-dosel { width: 56vw; right: -17%; top: -4%; }
}

.selva-marca-fondo {
  position: absolute;
  display: none;
  inset: 0;
  background: radial-gradient(ellipse min(360px, 80vw) min(330px, 52vh) at center, #0b0806f5 8%, #0b0806d9 40%, transparent 100%);
}
.entrando-selva .selva-marca-fondo { display: block; }

.selva-lianas {
  background-image: var(--liana-arte, url("assets/balines-en-lianas.svg"));
}
.selva-lianas-fondo,
.selva-lianas-ruta { --liana-arte: url("assets/lianas-balines-agrupados.svg"); }
.selva-lianas-dosel,
.selva-lianas-alta { --liana-arte: url("assets/lianas-balines-tubulares.svg"); }
.selva-lianas-dosel { right: -8%; top: -12%; transform: rotate(15deg); }
.selva-lianas-alta { width: 31vw; left: 18%; top: -11%; opacity: .48; transform: rotate(-11deg); }
.selva-lianas-ruta { display: none; }
.builder-metal-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.builder-metal-options button, .builder-tubular {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  border: 1px solid var(--line);
  padding: 7px 9px;
  font-size: 12px;
}
.builder-metal-options button[aria-pressed="true"] {
  outline: 1px solid var(--green);
  background: #f5e6cd;
}
.builder-metal-options i {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #8d785e;
  background: linear-gradient(145deg, #fff0b5, #b77d25 75%, #f8cf74);
}
[data-metal="blanco"] i { background: linear-gradient(145deg, #fff, #838b92 75%, #d8dde2); }
[data-metal="rosado"] i { background: linear-gradient(145deg, #fff1e8, #b77256 75%, #ecbfa8); }
.builder-metal-field > p { margin-top: 9px; color: var(--muted); font-size: 12px; }
[data-metal-tone="blanco"] .builder-bead-sample { filter: grayscale(1) brightness(1.11); }
[data-metal-tone="rosado"] .builder-bead-sample { filter: hue-rotate(-23deg) saturate(.75); }
.builder-tubular-sample {
  width: 27px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid #9e7850;
  background: repeating-linear-gradient(119deg, transparent 0 5px, #fff9deaa 6px 8px),
              linear-gradient(158deg, #fff4be, #ba822b 73%, #f3bc5c);
}
[data-metal-tone="blanco"] .builder-tubular-sample { filter: grayscale(1); }
[data-metal-tone="rosado"] .builder-tubular-sample { filter: hue-rotate(-25deg) saturate(.8); }
@media (max-width: 760px) {
  .selva-lianas-dosel { width: 61vw; right: -14%; top: -1%; }
  .selva-lianas-alta { width: 54vw; left: -16%; top: 26%; opacity: .32; }
}

/* Durante el recorrido cada liana entra y sale antes de que llegue la siguiente. */
.entrando-selva .selva-lianas { opacity: 0; }
.entrando-selva .selva-lianas-alta,
.entrando-selva .selva-lianas-dosel,
.entrando-selva .selva-lianas-ruta {
  width: min(54vw, 820px);
  bottom: auto;
  filter: none;
}
.entrando-selva .selva-lianas-alta { left: -6%; top: 6%; transform: rotate(15deg); }
.entrando-selva .selva-lianas-dosel { right: -7%; top: 16%; transform: rotate(-12deg); }
.entrando-selva .selva-lianas-ruta { display: block; left: -9%; top: 38%; transform: rotate(-18deg); }

@media (max-width: 760px) {
  .entrando-selva .selva-lianas-alta,
  .entrando-selva .selva-lianas-dosel,
  .entrando-selva .selva-lianas-ruta { width: 82vw; }
  .entrando-selva .selva-lianas-alta { top: 14%; left: -12%; }
  .entrando-selva .selva-lianas-dosel { top: 25%; right: -17%; }
  .entrando-selva .selva-lianas-ruta { top: 54%; left: -15%; }
}