/* ══════════════════════════════════════════════════════════════════════════════
   Tienda del Valle · Aventura Mística
   Paleta del Manual de marca v2 y de la GUI v2 (§4). Reglas de esta hoja:
   · El oro siempre es degradado y aparece solo en tres lugares: el título,
     el botón de pago y el relleno de la campana.
   · Runa (#7FD8C8) es lo interactivo, igual que en el juego: enlaces y comandos.
   · El único movimiento que no pide el visitante vive dentro de la vitrina.
   ══════════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Cinzel Decorative'; src: url('/fuentes/cinzel-decorative-latin-900-normal.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url('/fuentes/cinzel-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url('/fuentes/cinzel-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Cinzel'; src: url('/fuentes/cinzel-latin-900-normal.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url('/fuentes/alegreya-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url('/fuentes/alegreya-sans-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url('/fuentes/alegreya-sans-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Alegreya Sans'; src: url('/fuentes/alegreya-sans-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --noche-alta: #3B3170;
  --noche: #20184A;
  --noche-honda: #0A0616;
  --estandarte: #3D3375;
  --estandarte-hondo: #140D2E;
  --trigo: #F5DEB3;
  --tinta: #E8DFC8;
  --lino: #A89B7C;
  --laton: #B8975A;
  --bronce: #6E5C45;
  --contorno: #1A100A;
  --runa: #7FD8C8;
  --bien: #8FD694;
  --mal: #E5574F;
  --aviso: #F0904A;
  --mecenas: #FFC24A;
  --oro-corona: #F2C94C; /* ORO de la GUI: cantidades de Coronas, como en el juego */
  --relumbre: #E0A84E;   /* Relumbres: el ámbar del Relicario de los Relumbres */
  --oro: linear-gradient(180deg, #FFE7A3 0%, #FFCC69 48%, #FFB12E 100%);

  --f-titulo: 'Cinzel Decorative', 'Cinzel', Georgia, serif;
  --f-rotulo: 'Cinzel', Georgia, 'Times New Roman', serif;
  --f-texto: 'Alegreya Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Escala de 1.25 sobre el cuerpo (17 px en teléfono, 18 px desde tableta) */
  --t-menos: 0.889rem;
  --t1: 1.25rem;
  --t2: 1.5625rem;
  --t3: 1.953rem;
  --t4: 2.441rem;

  --linea: 1px solid rgba(110, 92, 69, 0.55);
  --radio: 6px;
  --margen: clamp(16px, 4vw, 40px);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--noche-honda);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (min-width: 720px) { html { font-size: 18px; } }

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(180deg, var(--noche) 0, #170F38 720px, var(--noche-honda) 1500px) no-repeat,
    var(--noche-honda);
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; color: var(--trigo); line-height: 1.15; font-weight: 700; }
p { margin: 0 0 0.8em; }
ul, ol { margin: 0; }

a { color: var(--runa); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: #A9EBDF; }
:focus-visible { outline: 2px solid var(--runa); outline-offset: 3px; border-radius: 2px; }

code.comando {
  font-family: var(--f-texto);
  font-weight: 700;
  color: var(--runa);
  white-space: nowrap;
}

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.saltar {
  position: absolute; left: 12px; top: -48px; z-index: 10;
  padding: 8px 14px; background: var(--trigo); color: var(--contorno); font-weight: 700; border-radius: 4px;
}
.saltar:focus { top: 12px; }

.contenedor { max-width: 1200px; margin: 0 auto; padding: 0 var(--margen); }
.contenedor--estrecho { max-width: 760px; }

/* ── Cabecera ─────────────────────────────────────────────────────────────── */

.cabecera { border-bottom: var(--linea); }
.cabecera__dentro {
  max-width: 1200px; margin: 0 auto; padding: 12px var(--margen);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.marca {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--trigo); text-decoration: none;
  font-family: var(--f-rotulo); font-weight: 700; letter-spacing: 0.03em;
}
.marca:hover { color: #FFF0D2; }
.nav { display: flex; align-items: center; gap: 4px 20px; list-style: none; padding: 0; }
.nav__enlace {
  font: inherit; font-weight: 500; color: var(--tinta);
  background: none; border: 0; padding: 6px 0; cursor: pointer; text-decoration: none;
}
.nav__enlace:hover { color: var(--trigo); text-decoration: underline; text-decoration-color: var(--laton); }
@media (max-width: 560px) {
  .nav__extra { display: none; }
  .marca span { font-size: 0.95rem; }
}

/* ── Probador: vitrina, percha y ficha ────────────────────────────────────── */

.probador { padding: clamp(28px, 5vw, 56px) 0 clamp(56px, 8vw, 96px); }

.presentacion { max-width: 44rem; margin-bottom: clamp(22px, 3.5vw, 36px); }
.titulo-oro {
  font-family: var(--f-titulo);
  font-weight: 900;
  font-size: clamp(2.35rem, 6.4vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: 0.005em;
  color: #FFCC69;
  background: var(--oro);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.06em;
}
.presentacion__texto { margin: 12px 0 0; font-size: var(--t1); max-width: 32em; }

.probador__rejilla {
  display: grid;
  gap: clamp(20px, 3vw, 36px);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'vitrina' 'percha' 'ficha';
}
@media (min-width: 960px) {
  .probador__rejilla {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: 'vitrina percha' 'ficha percha';
    align-items: start;
  }
}

/* La vitrina: el maniquí y sus partículas, a 160 × 120 píxeles ampliados sin suavizar */
.vitrina {
  grid-area: vitrina;
  position: relative;
  aspect-ratio: 4 / 3;
  border: 2px solid var(--bronce);
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--noche);
}
.vitrina__lienzo {
  width: 100%;
  height: 100%;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
.vitrina__placa {
  position: absolute; left: 50%; top: 36%;
  transform: translate(-50%, -100%);
  margin: 0; padding: 0.05em 0.5em;
  max-width: 60%; overflow: hidden; text-overflow: ellipsis;
  background: rgba(10, 6, 22, 0.55);
  color: #FFFFFF;
  font-weight: 500;
  font-size: clamp(0.72rem, 1.7vw, 0.95rem);
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
}
.vitrina__tab {
  position: absolute; top: 5%; left: 50%;
  transform: translateX(-50%);
  display: grid; gap: 2px;
  min-width: 56%;
  padding: 4px;
  background: rgba(10, 6, 22, 0.72);
  font-size: clamp(0.7rem, 1.6vw, 0.92rem);
  line-height: 1.35;
  pointer-events: none;
}
.vitrina__tab[hidden], .vitrina__placa[hidden] { display: none; }
.tab__fila { display: block; padding: 0.1em 0.6em; background: rgba(255, 255, 255, 0.06); color: #FFFFFF; white-space: nowrap; }
.tab__fila--tuya { background: rgba(255, 255, 255, 0.16); }
.tab__insignia { color: var(--mecenas); }
.tab__titulo { color: var(--lino); }
.vitrina__pausa {
  position: absolute; right: 10px; bottom: 10px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(184, 151, 90, 0.7);
  background: rgba(10, 6, 22, 0.65);
  color: var(--trigo);
  cursor: pointer;
}
.vitrina__pausa:hover { background: rgba(10, 6, 22, 0.85); }
.vitrina__pausa-icono {
  width: 12px; height: 12px;
  background: linear-gradient(90deg, currentColor 0 34%, transparent 34% 66%, currentColor 66%);
}
.vitrina__pausa[aria-pressed='true'] .vitrina__pausa-icono {
  background: currentColor;
  clip-path: polygon(18% 0, 100% 50%, 18% 100%);
}

/* La percha: la lista para elegir */
.percha { grid-area: percha; border: 0; margin: 0; padding: 0; min-width: 0; }
.percha__leyenda {
  padding: 0; margin-bottom: 10px;
  font-family: var(--f-rotulo); font-weight: 700; font-size: var(--t1); color: var(--trigo);
}
.percha__grupo + .percha__grupo { margin-top: 20px; }
.percha__titulo { margin: 0 0 4px; font-style: italic; color: var(--lino); }
.prenda {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 11px 12px 11px 16px;
  border-top: var(--linea);
  cursor: pointer;
}
.percha__grupo .prenda:last-child { border-bottom: var(--linea); }
.prenda input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.prenda__icono svg { width: 28px; height: 28px; }
.prenda__nombre { font-family: var(--f-rotulo); font-weight: 700; color: var(--trigo); line-height: 1.25; }
.prenda__precio { font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
.prenda:hover { background: rgba(61, 51, 117, 0.28); }
.prenda:has(input:checked) { background: rgba(61, 51, 117, 0.5); }
.prenda:has(input:checked)::before {
  content: ''; position: absolute; left: 0; top: 7px; bottom: 7px;
  width: 3px; border-radius: 2px; background: var(--laton);
}
.prenda:has(input:focus-visible) { outline: 2px solid var(--runa); outline-offset: -2px; }

@media (max-width: 959px) {
  .percha__lista {
    position: relative;
    display: flex; gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--margen);
    margin: 0 calc(-1 * var(--margen));
    padding: 2px var(--margen) 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--bronce) transparent;
  }
  .percha__grupo { display: contents; }
  .percha__titulo { display: none; }
  .prenda {
    flex: 0 0 auto;
    scroll-snap-align: start;
    grid-template-columns: 24px auto;
    grid-template-rows: auto auto;
    gap: 0 10px;
    padding: 9px 14px;
    border: var(--linea);
    border-radius: var(--radio);
  }
  .percha__grupo .prenda:last-child { border-bottom: var(--linea); }
  .prenda__icono { grid-row: span 2; }
  .prenda__icono svg { width: 24px; height: 24px; }
  .prenda__nombre { font-size: 0.95rem; white-space: nowrap; }
  .prenda__precio { font-size: 0.9rem; color: var(--lino); }
  .prenda:has(input:checked) { border-color: var(--laton); }
  .prenda:has(input:checked)::before { display: none; }
}

/* La ficha: qué es, cuánto cuesta y el formulario */
.ficha { grid-area: ficha; display: grid; gap: clamp(20px, 3vw, 32px); }
@media (min-width: 640px) {
  .ficha { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: start; }
}
.ficha__nombre { font-family: var(--f-rotulo); font-size: var(--t3); }
.ficha__cita { margin: 8px 0 10px; font-style: italic; font-size: var(--t1); color: var(--lino); }
.ficha__como { max-width: 34em; }
.ficha__listas { display: grid; gap: 14px; margin: 16px 0 6px; }
.ficha__listas[hidden] { display: none; }
.ficha__listas h3 { font-family: var(--f-texto); font-size: 1rem; margin-bottom: 6px; }
.ficha__listas ul { list-style: none; padding: 0; display: grid; gap: 4px; }
.ficha__listas li { position: relative; padding-left: 1.5em; }
.ficha__listas li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.lista-si li::before { content: '✔'; color: var(--bien); }
.lista-no li::before { content: '✕'; color: var(--lino); }
.ficha__precio {
  margin: 18px 0 4px;
  font-size: var(--t4); font-weight: 700; line-height: 1;
  color: var(--trigo);
  font-variant-numeric: lining-nums;
}
.ficha__moneda { font-size: 1rem; font-weight: 500; color: var(--lino); }
.ficha__condicion { color: var(--lino); max-width: 30em; }

.compra {
  display: grid; gap: 14px; align-content: start;
  padding: clamp(16px, 2.4vw, 22px);
  border: 1px solid rgba(184, 151, 90, 0.4);
  border-radius: var(--radio);
  background: rgba(20, 13, 46, 0.72);
}
.campo { display: grid; gap: 6px; }
.campo__etiqueta { font-weight: 700; color: var(--trigo); }
.campo__entrada {
  width: 100%;
  font: inherit; font-size: 1.05rem;
  color: var(--tinta);
  background: var(--noche-honda);
  border: 1px solid var(--bronce);
  border-radius: 4px;
  padding: 10px 12px;
}
.campo__entrada:hover { border-color: var(--laton); }
.campo__entrada:focus-visible { border-color: var(--runa); outline-offset: 1px; }
.campo__entrada[aria-invalid='true'] { border-color: var(--mal); }
.campo__pista { margin: 0; font-size: var(--t-menos); color: var(--lino); }
.campo__pista[data-tono='bien'] { color: var(--bien); }
.campo__pista[data-tono='aviso'] { color: var(--aviso); }
.campo__pista[data-tono='mal'] { color: #F08A84; }
.campo__pista[hidden] { display: none; }

.casilla { display: flex; align-items: center; gap: 10px; cursor: pointer; width: fit-content; }
.casilla input { width: 18px; height: 18px; margin: 0; accent-color: var(--laton); }
.casilla:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
.campo--regalo, .si-regalo { display: none; }
.compra:has(.casilla--regalo input:checked) .campo--regalo { display: grid; }
.compra:has(.casilla--regalo input:checked) .si-regalo { display: inline; }
.compra:has(.casilla--regalo input:checked) .si-propio { display: none; }

.boton {
  display: inline-block;
  font: inherit; font-weight: 700; font-size: 1.05rem; line-height: 1.3;
  padding: 13px 18px;
  border: 0; border-radius: 4px;
  text-align: center; text-decoration: none;
  cursor: pointer;
}
.boton--oro { background: var(--oro); color: var(--contorno); }
.boton--oro:hover { filter: brightness(1.07); color: var(--contorno); }
.boton--oro:active { transform: translateY(1px); }
.boton--laton { background: transparent; color: var(--trigo); border: 1px solid var(--laton); }
.boton--laton:hover { background: rgba(184, 151, 90, 0.14); color: var(--trigo); }
.boton--texto {
  background: none; color: var(--tinta); padding-inline: 8px;
  text-decoration: underline; text-decoration-color: var(--bronce); text-underline-offset: 0.2em;
}
.boton:disabled { cursor: not-allowed; background: #2A2350; color: var(--lino); border-color: transparent; filter: none; transform: none; }
.compra__nota { margin: 0; font-size: var(--t-menos); color: var(--lino); }

/* ── Monedas: Relumbres y Coronas ─────────────────────────────────────────── */

.moneda { padding: clamp(56px, 8vw, 96px) 0; border-top: var(--linea); }
.moneda__rejilla { display: grid; gap: clamp(26px, 4vw, 52px); align-items: start; }
@media (min-width: 960px) { .moneda__rejilla { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.moneda__texto { max-width: 34rem; }
.moneda__limite strong { color: var(--trigo); }
.moneda__form { display: grid; gap: clamp(18px, 2.5vw, 28px); }
@media (min-width: 680px) { .moneda__form { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } }
/* Relumbres: ámbar, como el Relicario de los Relumbres del juego; las Coronas van en ORO */
.moneda--relumbres .bolsa__cantidad { color: var(--relumbre); }

.rarezas { width: 100%; max-width: 26rem; margin: 6px 0 16px; border-collapse: collapse; font-variant-numeric: lining-nums tabular-nums; }
.rarezas caption { text-align: left; font-weight: 700; color: var(--trigo); padding-bottom: 6px; }
.rarezas th, .rarezas td { padding: 6px 10px 6px 0; border-bottom: var(--linea); text-align: left; font-weight: 400; }
.rarezas thead th { color: var(--lino); font-size: var(--t-menos); }
.rarezas tbody th { color: var(--tinta); }
.rarezas td { text-align: right; padding-right: 0; }
.rarezas tbody td:first-of-type { color: var(--relumbre); font-weight: 700; }

.bolsas { border: 0; margin: 0; padding: 0; min-width: 0; }
.bolsa {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 14px 10px 16px;
  border-top: var(--linea);
  cursor: pointer;
}
.bolsa:last-of-type { border-bottom: var(--linea); }
.bolsa input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.bolsa__pila { display: flex; align-items: flex-end; justify-content: center; height: 56px; }
.moneda--relumbres .bolsa__pila { align-items: center; }
.bolsa__texto { display: grid; gap: 1px; min-width: 0; }
.bolsa__cantidad { font-family: var(--f-rotulo); font-weight: 700; color: var(--oro-corona); font-variant-numeric: lining-nums; }
.bolsa__detalle { font-size: var(--t-menos); color: var(--lino); }
.bolsa__sello { font-size: 0.8rem; font-style: italic; color: var(--laton); }
.bolsa__precio {
  display: grid; justify-items: end; gap: 1px;
  font-size: 1.15rem; font-weight: 700; color: var(--trigo);
  font-variant-numeric: lining-nums tabular-nums;
}
.bolsa__extra { font-size: 0.8rem; color: var(--bien); }
.bolsa:hover { background: rgba(61, 51, 117, 0.28); }
.bolsa:has(input:checked) { background: rgba(61, 51, 117, 0.5); }
.bolsa:has(input:checked)::before {
  content: ''; position: absolute; left: 0; top: 7px; bottom: 7px;
  width: 3px; border-radius: 2px; background: var(--laton);
}
.bolsa:has(input:focus-visible) { outline: 2px solid var(--runa); outline-offset: -2px; }

/* ── Campana de la Comunidad ──────────────────────────────────────────────── */

.campana {
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--estandarte-hondo);
  border-block: var(--linea);
}
.campana__rejilla { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (min-width: 760px) { .campana__rejilla { grid-template-columns: minmax(170px, 260px) minmax(0, 1fr); } }
.campana__figura { margin: 0; width: min(240px, 60vw); justify-self: center; }
.campana__texto { max-width: 38rem; }
.seccion__titulo { font-family: var(--f-rotulo); font-size: var(--t3); margin-bottom: 14px; }
.campana__cifra { font-size: var(--t1); margin-top: 4px; }
.campana__cifra strong { font-size: var(--t2); color: var(--trigo); font-variant-numeric: lining-nums; }

.aporte { display: grid; gap: 14px; justify-items: start; margin-top: 22px; }
.montos { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.montos__leyenda { padding: 0; margin-bottom: 10px; font-weight: 700; color: var(--trigo); }
.monto { position: relative; }
.monto input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.monto span {
  display: block;
  padding: 7px 16px;
  border: 1px solid var(--bronce);
  border-radius: 999px;
  font-weight: 700;
  font-variant-numeric: lining-nums;
  cursor: pointer;
}
.monto:hover span { border-color: var(--laton); }
.monto input:checked + span { border-color: var(--laton); background: rgba(184, 151, 90, 0.2); color: var(--trigo); }
.monto input:focus-visible + span { outline: 2px solid var(--runa); outline-offset: 2px; }
.monto-otro { display: none; align-items: center; gap: 6px; }
.montos:has(input[value='otro']:checked) .monto-otro { display: inline-flex; }
.monto-otro__signo { font-weight: 700; color: var(--trigo); }
.monto-otro input {
  width: 8.5rem;
  font: inherit; font-weight: 700;
  color: var(--tinta); background: var(--noche-honda);
  border: 1px solid var(--bronce); border-radius: 4px;
  padding: 6px 10px;
}

/* ── Cómo llega y preguntas ───────────────────────────────────────────────── */

.pasos { padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 6vw, 72px); }
.pasos__lista { list-style: none; padding: 0; counter-reset: paso; display: grid; gap: 30px; margin-top: 8px; }
@media (min-width: 760px) { .pasos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.pasos__lista li { counter-increment: paso; position: relative; padding-top: 54px; }
.pasos__lista li::before {
  content: counter(paso);
  position: absolute; left: 0; top: 0;
  font-family: var(--f-rotulo); font-weight: 900; font-size: 2.5rem; line-height: 1;
  color: var(--laton);
}
.pasos__lista h3 { font-size: var(--t1); margin-bottom: 6px; }
.pasos__lista p { margin: 0; max-width: 24em; }

.preguntas { padding: 0 0 clamp(64px, 9vw, 112px); }
.preguntas details { border-top: var(--linea); }
.preguntas details:last-of-type { border-bottom: var(--linea); }
.preguntas summary {
  position: relative;
  padding: 15px 36px 15px 0;
  font-weight: 700; color: var(--trigo);
  cursor: pointer; list-style: none;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after {
  content: '+';
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.4rem; font-weight: 500; color: var(--laton);
}
.preguntas details[open] summary::after { content: '−'; }
.preguntas summary:hover { color: #FFF0D2; }
.preguntas details p { margin: 0 0 18px; max-width: 40em; }

/* ── Pie ──────────────────────────────────────────────────────────────────── */

.pie { border-top: var(--linea); padding: 44px 0 52px; background: var(--noche-honda); }
.pie__rejilla { display: grid; gap: 26px; align-items: start; }
@media (min-width: 720px) { .pie__rejilla { grid-template-columns: auto minmax(0, 1fr); gap: 44px; } }
.pie__marca { display: grid; justify-items: center; gap: 12px; }
.pie__lema { margin: 0; font-family: var(--f-rotulo); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.22em; color: var(--trigo); }
.pie__texto { font-size: var(--t-menos); color: var(--lino); max-width: 46rem; }
.pie__ingles { font-size: 0.72rem; }
.pie__enlaces { list-style: none; padding: 0; margin: 14px 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }

/* ── Diálogos ─────────────────────────────────────────────────────────────── */

.dialogo {
  width: min(92vw, 31rem);
  padding: 24px;
  color: var(--tinta);
  background: var(--estandarte-hondo);
  border: 1px solid var(--laton);
  border-radius: var(--radio);
}
.dialogo::backdrop { background: rgba(10, 6, 22, 0.78); }
.dialogo[open] { animation: aparecer 140ms ease-out; }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.dialogo__titulo { font-family: var(--f-rotulo); font-size: var(--t2); margin-bottom: 16px; }
.dialogo__nota { color: var(--lino); font-size: var(--t-menos); }
.dialogo__acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 14px; margin-top: 18px; }

.resumen { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 18px; margin: 0 0 16px; }
.resumen dt { color: var(--lino); }
.resumen dd { margin: 0; color: var(--trigo); font-weight: 700; overflow-wrap: anywhere; }

.aviso { padding: 10px 12px; border: 1px solid var(--bronce); border-radius: 4px; }
.aviso--mal { border-color: var(--mal); color: #F3A19B; }
.aviso[hidden] { display: none; }

.lista-pedidos { list-style: none; padding: 0; display: grid; gap: 2px; margin-bottom: 14px; }
.lista-pedidos li { border-top: var(--linea); padding: 10px 0; }
.lista-pedidos li:last-child { border-bottom: var(--linea); }
.lista-pedidos a { font-weight: 700; }
.lista-pedidos small { display: block; color: var(--lino); font-size: var(--t-menos); }

/* ── Página de un pedido ──────────────────────────────────────────────────── */

.pagina-pedido, .pagina-aviso { padding-block: clamp(32px, 6vw, 64px) clamp(64px, 9vw, 112px); min-height: 60vh; }
.pedido__titulo { font-family: var(--f-rotulo); font-size: var(--t3); margin-bottom: 18px; overflow-wrap: anywhere; }
.sin-corte { white-space: nowrap; }
.pedido__cargando { color: var(--lino); }
.pagina-aviso__texto { font-size: var(--t1); max-width: 34em; margin-bottom: 26px; }

.estado { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; font-size: var(--t2); font-weight: 700; color: var(--trigo); }
.estado__icono {
  display: grid; place-items: center;
  width: 1.5em; height: 1.5em; flex: none;
  border-radius: 50%;
  font-size: 0.8em;
  border: 2px solid var(--bronce);
}
.estado--bien .estado__icono { border-color: var(--bien); color: var(--bien); }
.estado--aviso .estado__icono { border-color: var(--aviso); color: var(--aviso); }
.estado--mal .estado__icono { border-color: var(--mal); color: var(--mal); }

.linea { list-style: none; padding: 0; margin: 0 0 28px; }
.linea__paso { position: relative; padding: 0 0 22px 36px; }
.linea__paso::before {
  content: ''; position: absolute; left: 4px; top: 5px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--bronce); background: var(--noche-honda);
}
.linea__paso::after {
  content: ''; position: absolute; left: 10px; top: 23px; bottom: 2px;
  width: 2px; background: rgba(110, 92, 69, 0.6);
}
.linea__paso:last-child { padding-bottom: 0; }
.linea__paso:last-child::after { display: none; }
.linea__paso--hecho::before { background: var(--bien); border-color: var(--bien); }
.linea__paso--espera::before { border-color: var(--aviso); }
.linea__paso--mal::before { background: var(--mal); border-color: var(--mal); }
.linea__paso h2 { font-family: var(--f-texto); font-size: var(--t1); margin-bottom: 2px; }
.linea__paso p { margin: 0; max-width: 34em; }

.pedido__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 26px; }
.pedido__nota { color: var(--lino); font-size: var(--t-menos); max-width: 36em; }

/* ── Página legal ─────────────────────────────────────────────────────────── */

.legal { padding-block: clamp(32px, 6vw, 64px) clamp(64px, 9vw, 112px); }
.legal h1 { font-family: var(--f-rotulo); font-size: var(--t3); margin-bottom: 6px; }
.legal h2 { font-family: var(--f-rotulo); font-size: var(--t2); margin: 40px 0 10px; scroll-margin-top: 20px; }
.legal p, .legal li { max-width: 40em; line-height: 1.62; }
.legal ul { padding-left: 1.2em; margin-bottom: 0.8em; }
.legal__fecha { color: var(--lino); }
.legal__indice { margin: 24px 0 8px; padding: 14px 18px; border: var(--linea); border-radius: var(--radio); }
.legal__indice ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}