/* ==========================================================================
   MARCA — Walkiverso
   Paleta compartida (azul noche, celeste, verde pantano, blanco y negro),
   tipografías Cormorant Garamond + EB Garamond, botones píldora, papel frío
   y fotos reales de las piezas. Se carga al final: pisa lo genérico.
   ========================================================================== */

:root {
  --c-0: #010818;
  --c-1: #030f2e;
  --c-2: #061a4a;
  --c-3: #0a2463;
  --c-4: #1d3f9e;
  --c-5: #3b5a9a;
  --c-6: #7f9cc9;
  --c-7: #a9c3e6;
  --c-8: #dbe8f6;
  --c-9: #ffffff;
  --ink-soft: #b4c6e0;
  --night: #021a62;
  --celeste: #92d2f5;
  --pantano: #cce1da;
  --glow-green: var(--celeste);
  --glow-teal: var(--pantano);
  --glow-amber: #e8f6ff;

  --display: 'Cormorant Garamond', Georgia, serif;
  --serif: 'EB Garamond', Georgia, serif;
  --fell: 'Cormorant Garamond', Georgia, serif;
  --sans: 'EB Garamond', Georgia, serif;
  --paper: linear-gradient(170deg, #f5f8fc, #e4ebf4 70%, #d6e0ec);
  --paper-ink: #021a62;
  --paper-soft: #3b5a9a;
}

html { background: #010818; }
body { font-weight: 500; }

/* Títulos: Cormorant con peso, como en la identidad compartida */
h1, h2, h3,
.forest__title h1, .place__head h2, .pv__name, .order__title, .cart__head h2,
.map__name, .next-place__name, .chapter h3, .page__inner h3, .pv__related h2 {
  font-family: var(--display);
  font-weight: 600;
}
.lore__lead, .book__intro, .pv__awake, .discovery__awake { font-family: var(--display); font-weight: 500; }
.pv__price, .cart__row strong, .sum__row--total, .cart-item__total, .cabinet__orders strong { font-family: var(--display); font-weight: 600; }
.intro__phrase { font-family: var(--display); font-weight: 600; }
.forest__title p, .place__head p, .whisper, .map__sub, .shelf__end, .world-foot__line, .lore__myth { font-style: italic; }

/* Logo */
.nav__brand { padding: 6px 0; }
.nav__logo { display: block; height: 26px; width: auto; opacity: .92; transition: opacity .4s; }
.nav__brand:hover .nav__logo { opacity: 1; }
@media (max-width: 760px) { .nav__logo { height: 22px; } }

/* Botones píldora: blancos sobre la noche, celestes al pasar el mouse */
.seal-btn {
  border-radius: 999px;
  background: #fff;
  color: var(--night);
  border: 1px solid #fff;
  font-weight: 700;
}
.seal-btn::before, .seal-btn::after { display: none; }
.seal-btn:hover:not(:disabled) { background: var(--celeste); border-color: var(--celeste); color: var(--night); box-shadow: 0 0 34px rgba(146, 210, 245, .35); }
.seal-btn.is-done { background: transparent; color: var(--celeste); border-color: rgba(146, 210, 245, .5); }
.qty { border-radius: 999px; overflow: hidden; border-color: rgba(146, 210, 245, .35); }
.tag span { border-radius: 999px; }
.nav__count { background: var(--c-5); color: #fff; }
.nav__cart.has-items .nav__count { background: var(--celeste); color: var(--night); box-shadow: 0 0 12px rgba(146, 210, 245, .55); }

/* Papel frío (libro, carta, checkout, etiquetas) */
.book__left, .leaf-page__face, .book-swipe__page, .letter, .parchment { background: var(--paper); color: var(--paper-ink); }
.leaf-page__back { background: linear-gradient(190deg, #f5f8fc, #e4ebf4 70%, #d6e0ec); }
.book::before { background: linear-gradient(135deg, #0a2463, #021a62); box-shadow: 0 50px 90px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(146, 210, 245, .2); }
.book__stack { box-shadow: 3px 3px 0 #b9c7d9, 6px 6px 0 #9fb0c7; }
.page__inner h3 { color: var(--paper-ink); }
.page__inner p { color: #0e2160; }
.page__inner p::first-letter { color: var(--c-4); font-family: var(--display); }
.page__num { color: var(--paper-soft); }
.page__inner--secret h3 { color: var(--c-4); }
.page__inner--secret h3::before { content: '✶ '; }

.letter label span, .field > span { color: var(--paper-soft); }
.letter input, .letter textarea, .field input, .field textarea { color: var(--paper-ink); border-color: rgba(2, 26, 98, .28); font-family: var(--serif); }
.letter input:focus, .letter textarea:focus, .field input:focus, .field textarea:focus { border-color: var(--paper-ink); }
.letter textarea { background-image: repeating-linear-gradient(transparent 0 calc(2.2rem - 1px), rgba(2, 26, 98, .18) calc(2.2rem - 1px) 2.2rem); }
.letter__lead, .letter__sent { color: var(--paper-soft); }
.letter__seal circle, .seal circle { fill: var(--night); stroke: #010c33; }
.letter__seal path, .seal path { stroke: var(--celeste); }
.field input::placeholder { color: rgba(2, 26, 98, .3); }
.field__err { color: #a01c2c; }
.field.is-err input, .field.is-err textarea { border-color: #a01c2c; }
.parchment .seal-btn, .letter .seal-btn { background: var(--night); color: #fff; border-color: var(--night); }
.parchment .seal-btn:hover, .letter .seal-btn:hover { background: var(--c-4); border-color: var(--c-4); color: #fff; }
.co__steps li { color: #7f93b8; border-color: rgba(2, 26, 98, .15); }
.co__steps li.is-current { color: var(--paper-ink); border-color: var(--paper-ink); }
.co__steps li.is-done { color: var(--paper-soft); border-color: var(--paper-soft); }
.opt { border-color: rgba(2, 26, 98, .2); background: rgba(255, 255, 255, .45); border-radius: 14px; }
.opt::before { border-color: var(--paper-soft); }
.opt:has(input:checked) { border-color: var(--paper-ink); background: rgba(255, 255, 255, .75); }
.opt:has(input:checked)::before { background: var(--paper-ink); box-shadow: inset 0 0 0 3px #e4ebf4; }
.opt__box b { color: var(--paper-ink); }
.opt__box small, .co__note, .opt__price { color: var(--paper-soft); }
.co__nav { border-color: rgba(2, 26, 98, .15); }
.co__nav .link-btn { color: var(--paper-ink); border-color: rgba(2, 26, 98, .3); }
.co__summary, .order__box, .order__next { border-radius: 18px; border-color: rgba(146, 210, 245, .22); background: rgba(3, 15, 46, .55); }
.parchment, .letter { border-radius: 18px; }
.cart { background: linear-gradient(180deg, #061a4a, #020b26); border-left-color: rgba(146, 210, 245, .2); }

.object--shelf .object__tag { background: #eef3f9; color: var(--paper-ink); border-radius: 4px; }
.object--shelf .object__num, .object--shelf .object__price { color: var(--paper-soft); }
.object--shelf .object__name { color: var(--paper-ink); }
.object--shelf .object__tag::before { background: var(--c-6); }
.object--shelf .object__state { color: var(--c-4); }
.drawer__label { background: #eef3f9; color: var(--paper-ink); border-color: var(--c-6); }
.object__price s, .pv__price s { opacity: .55; margin-right: 6px; font-size: .85em; }

/* ---------- Fotos reales de las piezas ---------- */

.photo {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 999px 999px 22px 22px;
  overflow: hidden;
  background: #061233;
  border: 1px solid rgba(146, 210, 245, .22);
  box-shadow: 0 34px 60px rgba(0, 0, 0, .55);
  transition: border-color .8s, box-shadow .8s;
}
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 1s ease, transform 1.6s var(--ease-organic), filter 1s; }
.photo__alt { opacity: 0; }
.photo::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 50px 12px rgba(1, 8, 24, .55); pointer-events: none; }
.photo__light { position: absolute; inset: 0; background: radial-gradient(circle at 50% 28%, rgba(146, 210, 245, .28), transparent 62%); opacity: 0; transition: opacity 1s; z-index: 1; pointer-events: none; }
.is-near .photo { border-color: rgba(146, 210, 245, .6); box-shadow: 0 34px 60px rgba(0, 0, 0, .55), 0 0 40px rgba(146, 210, 245, .25); }
.is-near .photo__alt { opacity: 1; }
.is-near .photo__main { transform: scale(1.05); }
.is-near .photo__light, .is-peeking .photo__light { opacity: 1; }
.object.is-soldout .photo img { filter: grayscale(.7) brightness(.7); }
.object--shelf.object--photo { width: 78%; margin-bottom: 8px; }
.object--table.object--photo .object__art { rotate: 0deg; }
.object--table .object__name { font-family: var(--display); font-weight: 600; font-size: 1.4rem; }

/* Ficha: galería */
.pv__stage:has(.pv__gallery) { height: auto; flex-direction: column; gap: 18px; }
.pv__stage:has(.pv__gallery) .pv__creature { height: auto; }
.pv__stage:has(.pv__gallery) .pv__whisper { bottom: auto; top: 40%; }
.pv__stage:has(.pv__gallery) .pv__awake { position: static; }
.pv__gallery {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  border-radius: 999px 999px 26px 26px;
  overflow: hidden;
  border: 1px solid rgba(146, 210, 245, .3);
  box-shadow: 0 50px 90px rgba(0, 0, 0, .6), 0 0 80px rgba(146, 210, 245, .12);
}
.pv__photo { width: 100%; height: 100%; object-fit: cover; filter: brightness(.22) blur(6px); transform: scale(1.06); transition: filter 1.9s ease, transform 2.6s var(--ease-organic), opacity .22s; }
.is-awake .pv__photo { filter: none; transform: none; }
.pv__photo.is-swapping { opacity: 0; }
.pv__thumbs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; position: relative; z-index: 2; }
.pv__thumb { width: 58px; height: 58px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(146, 210, 245, .25); opacity: .55; transition: opacity .4s, border-color .4s, box-shadow .4s; }
.pv__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pv__thumb:hover, .pv__thumb.is-on { opacity: 1; border-color: var(--celeste); box-shadow: 0 0 14px rgba(146, 210, 245, .45); }

/* Miniaturas */
.cart-item__art { border-radius: 999px 999px 10px 10px; }
.cart-item__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.drawer__photo { width: 70%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 1px solid rgba(146, 210, 245, .35); box-shadow: 0 0 30px rgba(146, 210, 245, .25); }
.drawer__photo img { width: 100%; height: 100%; object-fit: cover; }
.order__photo { display: block; width: 130px; height: 130px; border-radius: 999px 999px 16px 16px; overflow: hidden; border: 1px solid rgba(146, 210, 245, .35); }
.order__photo img { width: 100%; height: 100%; object-fit: cover; }

/* Pie: redes */
.world-foot__social { display: flex; justify-content: center; gap: 28px; margin-top: 46px; }
.world-foot__social a { color: var(--c-7); text-decoration: none; font-size: 13px; letter-spacing: .3em; text-transform: uppercase; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.world-foot__social a:hover { color: #fff; border-color: var(--celeste); }

/* El bosque de Musgoluz brilla de noche: luz fría */
.forest__flood { background: radial-gradient(circle at var(--ox, 50%) var(--oy, 62%), rgba(232, 246, 255, .92) 0%, rgba(146, 210, 245, .6) 16%, rgba(6, 26, 74, .92) 52%, #03102f 100%); }
.forest__interior { background: #03102f; }
.portal__disc { background: radial-gradient(circle, #ffffff 0%, #e8f6ff 14%, #92d2f5 32%, #0a2463 58%, #03102f 72%); box-shadow: 0 0 60px 20px rgba(146, 210, 245, .3); }
.portal__swirl { background: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, .45) 0deg 3deg, transparent 3deg 17deg); }
.portal__swirl--b { background: repeating-conic-gradient(from 10deg, rgba(204, 225, 218, .4) 0deg 2deg, transparent 2deg 24deg); }
.portal__core { background: #ffffff; }
.intro__glow { background: radial-gradient(circle at 50% 55%, rgba(146, 210, 245, .25), rgba(29, 63, 158, .1) 30%, transparent 62%); }
.intro__dark { background: radial-gradient(ellipse at 50% 56%, #061a4a 0%, #020b26 55%, #01061a 100%); }
.forest__sky { background: radial-gradient(ellipse 80% 70% at 54% 26%, #0a2463 0%, #041445 42%, #010818 100%); }
.forest { background: #010818; }
.wisp i { background: #ffffff; }
.candle { background: linear-gradient(90deg, #b9c7d9, #ffffff 40%, #b9c7d9); }

/* UI pequeña con EB Garamond: un poco más de cuerpo */
.nav__sound, .nav__map, .nav__cart, .intro__sound, .link-btn, .seal-btn, .kicker,
.object__num, .pv__num, .pv__label, .pv__facts dt, .cart__row, .sum__row, .tag, .forest__hint,
.next-place__label, .map__foot button, .discovery__close, .cabinet__count, .book__hint, .shelf__swipe,
.cart-item__num, .cart-item__remove, .pv__stock, .object__state, .pv__back, .field > span, .co__steps li, .world-foot__name {
  font-family: var(--sans);
  font-weight: 600;
  font-size-adjust: 0.5;
}

/* Indicador de lugar: píldora legible sobre cualquier contenido */
.nav__where { padding: 7px 14px; border-radius: 999px; background: rgba(1, 8, 24, .72); border: 1px solid rgba(146, 210, 245, .15); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 760px) { .nav__where { left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); } }