/* ============================================================================
   OROVERDE JOYAS · /arma-tu-manilla
   PROPUESTA VISUAL — "EDITORIAL DE REVISTA" (doble página de joyería)
   ----------------------------------------------------------------------------
   Idea: dejar de leer el configurador como un formulario y leerlo como un
   artículo de revista. Tres herramientas, ninguna nueva en la paleta:

     1) JERARQUÍA. Los números de paso salen del texto y se van al margen
        izquierdo como folios de imprenta: serif enorme en dorado tenue. El
        título respira a su lado y el cuerpo se alinea a una sola columna.
     2) REGLAS DE IMPRENTA. Filetes dorados de 1px separan pasos, columnas y
        bloques. Un filete vertical corre por el canal entre la vista previa y
        los pasos, como el medianil de una doble página.
     3) CASILLAS MÍNIMAS. Las opciones pierden la caja: quedan como celdas
        abiertas y la selección se marca con UN SOLO TRAZO dorado bajo la
        celda. Sin rellenos, sin sombras de tarjeta, sin ruido.

   Reglas de la propuesta:
   · Solo tokens existentes de css/styles.css. No hay paleta nueva.
   · Cero cambios de DOM. Todo lo que parece un elemento nuevo (filetes,
     marcos, marcadores) es ::before/::after.
   · Cero !important: este archivo carga DESPUÉS y todos los selectores van
     prefijados con .page-manilla, así que gana por especificidad y por orden.
     Ese prefijo además blinda /como-comprar, que comparte css/manillas.css.
   · Contraste: NINGUNA opción lleva ya relleno de fondo, así que todo el texto
     en --muted (#847f75, 4.97:1) sigue midiéndose contra el fondo real #0a0a0a.
     El único panel con fondo (el resumen) se OSCURECE respecto al actual, así
     que su contraste sube, no baja. Detalle medido al pie del archivo.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0 · Tokens locales de la propuesta (derivados, no nuevos colores)
   --------------------------------------------------------------------------- */
.page-manilla {
  /* Canal izquierdo donde vive el folio (el número de paso). */
  --mn-gutter: 4.75rem;
  /* Filete de imprenta y filete de acento. Mismo dorado del sistema. */
  --mn-rule: rgba(197, 164, 101, 0.16);
  --mn-rule-mid: rgba(197, 164, 101, 0.3);
}

/* ---------------------------------------------------------------------------
   1 · Portada del artículo (hero)
   Más aire, tipografía más grande y un filete de cierre que separa la portada
   del cuerpo, igual que el corte entre titular y columnas en una revista.
   --------------------------------------------------------------------------- */
.page-manilla .mn-hero {
  padding-bottom: clamp(2.8rem, 6vh, 4.4rem);
}

/* El .eyebrow del sistema ya trae un filete a la izquierda; le añadimos el
   simétrico a la derecha para que el rótulo quede centrado de verdad.
   El hueco lo pone el gap:.8rem del propio .eyebrow; el margen negativo
   descuenta el espacio que el letter-spacing deja tras la última letra. */
.page-manilla .mn-hero .eyebrow::after {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
  margin-left: -0.3em;
}
.page-manilla .mn-hero .eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.36em;
  margin-bottom: 1.8rem;
}

.page-manilla .mn-hero h1 {
  font-size: clamp(2.6rem, 6.6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
  margin-bottom: 1.4rem;
}
.page-manilla .mn-hero p {
  max-width: 46ch;
  font-size: clamp(0.98rem, 1.05vw, 1.08rem);
  line-height: 1.78;
  color: var(--ivory-soft);
}

/* Filete de cierre de portada. Doble regla (1px + 1px separados 4px) hecha con
   un solo pseudo-elemento y un box-shadow: es el remate clásico de imprenta. */
.page-manilla .mn-hero::after {
  content: '';
  display: block;
  width: 72px;
  height: 1px;
  margin: clamp(2.6rem, 5vh, 4rem) auto 0;
  background: var(--gold);
  box-shadow: 0 5px 0 -0.5px var(--mn-rule-mid);
  opacity: 0.85;
}

/* ---------------------------------------------------------------------------
   2 · Doble página: medianil entre la vista previa y los pasos
   --------------------------------------------------------------------------- */
.page-manilla .mn-studio {
  position: relative;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  padding-bottom: clamp(4.5rem, 11vh, 8rem);
  /* 2026-08-02 INJERTO: minmax(0,1fr) y no 1fr. Con 1fr una imagen ancha puede
     estirar su columna y el filete del canal, anclado a left:50%, deja de caer
     en el medianil. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
/* Filete vertical del canal. Es un pseudo ABSOLUTO, así que no entra como ítem
   de la rejilla (si fuera estático rompería las dos columnas). Las columnas son
   1fr 1fr, luego el centro del canal cae exactamente en el 50%. */
.page-manilla .mn-studio::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: clamp(4.5rem, 11vh, 8rem);
  left: 50%;
  width: 1px;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0,
    var(--mn-rule) 8%,
    var(--mn-rule) 82%,
    transparent 100%
  );
}
@media (max-width: 900px) {
  .page-manilla .mn-studio::before { display: none; }
}

/* ---------------------------------------------------------------------------
   3 · La lámina (vista previa)
   La pieza pasa de "caja con borde" a lámina enmarcada: doble aro dorado
   dibujado con box-shadow (no ocupa layout, no puede desbordar) y una sombra
   de profundidad para que el negro deje de ser plano.
   --------------------------------------------------------------------------- */
.page-manilla .mn-preview { top: 7.5rem; }

.page-manilla .mn-stage {
  border-radius: 0;
  border-color: rgba(197, 164, 101, 0.24);
  /* aro interior + aire + aro exterior + sombra de apoyo. Todo estático: no
     provoca repintados en scroll. */
  box-shadow:
    inset 0 0 0 1px rgba(197, 164, 101, 0.07),
    0 0 0 10px rgba(0, 0, 0, 0),
    0 0 0 11px var(--mn-rule),
    0 46px 90px -60px rgba(0, 0, 0, 0.95);
}

/* Pie de foto: se compone como pie de revista, versalitas y filete corto encima. */
.page-manilla .mn-caption {
  /* 2026-08-02 INJERTO: este nodo es aria-live y cambia con CADA eleccion. Sin
     altura reservada, pasar de una linea a dos empujaba toda la columna hacia
     abajo en cada clic. */
  min-height: 3.1em;
  margin-top: 2.1rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.7;
}
.page-manilla .mn-caption::before {
  content: '';
  display: block;
  width: 26px;
  height: 1px;
  background: var(--mn-rule-mid);
  margin: 0 auto 0.9rem;
}
.page-manilla .mn-caption strong {
  color: var(--ivory-soft);
  font-weight: 500;
  letter-spacing: 0.16em;
}

/* ---------------------------------------------------------------------------
   4 · Los pasos: folio al margen + una sola columna de texto
   El número se saca del flujo (absolute) y el paso reserva el canal con
   padding-left. Así el título, el copy y los controles arrancan todos en la
   misma vertical, que es lo que da la sensación de orden.
   --------------------------------------------------------------------------- */
.page-manilla .mn-step {
  position: relative;
  border-top: 1px solid var(--mn-rule);
  padding: clamp(2.2rem, 4.5vh, 3.4rem) 0 clamp(2.2rem, 4.5vh, 3.4rem) var(--mn-gutter);
}
/* OJO: manillas.css ya quita el filete del primer paso con .mn-step:first-of-type,
   que empata en especificidad con .page-manilla .mn-step; como esta hoja carga
   después, ganaría la mía y aparecería un filete de más. Se repite aquí. */
.page-manilla .mn-step:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.page-manilla .mn-step-head {
  display: flex;
  align-items: baseline;
  gap: 0;
  margin-bottom: 0.6rem;
}

/* El folio. Dorado tenue (--gold-deep) y tamaño de titular: al ser texto
   grande (>=24px) el umbral WCAG aplicable es 3:1 y aquí medimos 4.20:1.
   Va en el margen y NO se superpone al título: dos textos encima no pueden
   garantizar contraste, y la accesibilidad manda sobre el efecto. */
.page-manilla .mn-step-n {
  position: absolute;
  left: 0;
  top: -0.1em;
  width: calc(var(--mn-gutter) - 1.1rem);
  min-width: 0;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.7rem, 3.6vw, 3.9rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--gold-deep);
  font-variant-numeric: lining-nums tabular-nums;
}
/* En el primer paso el padding-top es 0, así que el folio se alinea al título. */
.page-manilla .mn-step:first-of-type .mn-step-n { top: -0.1em; }

.page-manilla .mn-step h2 {
  font-weight: 300;
  font-size: clamp(1.55rem, 2.3vw, 2.05rem);
  line-height: 1.15;
  letter-spacing: 0.004em;
  color: var(--ivory);
}

.page-manilla .mn-step .hint {
  margin: 0 0 clamp(1.4rem, 2.4vh, 2rem) 0;   /* el canal ya lo da el paso */
  max-width: 46ch;
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   5 · Rejillas de opciones — se cuadran a mano
   El auto-fit dejaba 5 balines arriba y el nº8 huérfano abajo. Con 6 balines y
   4 punteras basta con fijar divisores exactos por tramo: 6/3 y 4/2. Nunca
   queda una fila coja. Se hace por ID porque .mn-sizes lo usan los DOS grupos
   (balines y punteras) y cada uno tiene su propio número de opciones.
   --------------------------------------------------------------------------- */
.page-manilla .mn-sizes { gap: 0; }                 /* las celdas se separan con filetes, no con aire */
.page-manilla #mn-sizes { grid-template-columns: repeat(6, 1fr); }
.page-manilla #mn-punteras { grid-template-columns: repeat(4, 1fr); }

/* Tramo intermedio: la columna de pasos se estrecha (sigue habiendo 2 columnas
   de estudio) y 6 celdas quedarían apretadas -> 3 x 2 y 2 x 2. */
@media (min-width: 901px) and (max-width: 1180px) {
  .page-manilla #mn-sizes { grid-template-columns: repeat(3, 1fr); }
  .page-manilla #mn-punteras { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .page-manilla #mn-sizes { grid-template-columns: repeat(3, 1fr); }
  .page-manilla #mn-punteras { grid-template-columns: repeat(2, 1fr); }
}

/* --- Celda de tamaño: casilla mínima, sin caja ---
   La celda pasa de flex a REJILLA de renglones fijos. Motivo: el contenido
   iba pegado abajo, y como solo tres balines llevan etiqueta ("el más
   pedido"...) y las bolitas miden distinto, los números quedaban a alturas
   distintas y la fila se leía en zigzag. Con renglones fijos —zona de bolita /
   número / precio / etiqueta— todos los números y todos los precios caen en la
   misma línea, y la etiqueta cuelga como nota al pie cuando existe.
   El orden del DOM (dot, lab, sub, tag) hace el resto sin tocar el HTML. */
.page-manilla .mn-size {
  position: relative;
  display: grid;
  grid-template-rows: 44px auto auto 1fr;
  justify-items: center;
  align-content: start;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 1rem 0.35rem 1.1rem;
  min-height: 132px;
  gap: 0;
  transition: transform 0.35s var(--ease);
}
/* La bolita se apoya en el suelo de su renglón: crece hacia arriba, así el
   número de debajo nunca se mueve. */
.page-manilla .mn-size .dot { align-self: end; }
/* "Sin punteras" no tiene bolita: su rótulo salta al renglón 2 para alinearse
   con los números de las otras casillas. */
.page-manilla #mn-punteras > .mn-size:first-child .lab { grid-row: 2; }
/* Filete base de la fila: se dibuja en el pseudo para poder engordarlo en
   dorado al seleccionar sin mover un solo píxel del layout. */
.page-manilla .mn-size::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--mn-rule);
}
/* El trazo de selección: un único subrayado dorado que crece desde el centro. */
.page-manilla .mn-size::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  transition: transform 0.5s var(--ease-out);
}
/* 2026-08-02 INJERTO: sin translateY en las celdas. La celda lleva su filete de
   seleccion como ::before DENTRO de si misma; al levantarla, el filete se
   despegaba de la linea base de la fila. El realce ahora es de color, no de
   posicion. En .mn-via y .mn-centro si se conserva el hover: su marca no es un
   filete al ras. */
.page-manilla .mn-size:hover { transform: none; border-color: transparent; }
.page-manilla .mn-size:hover .lab { color: var(--gold-bright); }
.page-manilla .mn-size:hover::after {
  background: var(--line-strong);
  transform: scaleX(0.42);
}
.page-manilla .mn-size[aria-pressed='true']::after {
  background: var(--gold);
  transform: scaleX(1);
}
.page-manilla .mn-size:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}

.page-manilla .mn-size .dot {
  margin-bottom: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  transition: box-shadow 0.35s var(--ease);
}
/* Halo finísimo en la bolita elegida: refuerza la selección con una señal que
   no es solo color de texto. */
.page-manilla .mn-size[aria-pressed='true'] .dot {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 0 0 3px rgba(197, 164, 101, 0.16);
}

.page-manilla .mn-size .lab {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ivory);
  transition: color 0.3s var(--ease);
}
.page-manilla .mn-size[aria-pressed='true'] .lab { color: var(--gold-bright); }

.page-manilla .mn-size .sub {
  margin-top: 0.5rem;
  font-size: 0.71rem;
  letter-spacing: 0.03em;
  color: var(--ivory-soft);
}
.page-manilla .mn-size .tag {
  margin-top: 0.4rem;
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  color: var(--muted);
}

/* "Sin punteras" no trae bolita ni precio: es SIEMPRE la primera casilla del
   grupo (manillas.js antepone el null a los números). Se marca por posición y
   no con :has() para no depender de soporte de navegador. Baja de cuerpo y
   pasa a sans para no competir con los números. */
.page-manilla #mn-punteras > .mn-size:first-child .lab {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   6 · Cantidad: la cifra manda
   --------------------------------------------------------------------------- */
.page-manilla .mn-qty {
  gap: 1.4rem;
  padding-bottom: 0.4rem;
}
.page-manilla .mn-qty output {
  font-size: clamp(3rem, 5vw, 4rem);
  line-height: 0.95;
  color: var(--ivory);
  min-width: 2.6ch;
}
.page-manilla .mn-qty button {
  border-color: var(--mn-rule-mid);
  color: var(--ivory-soft);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease), background 0.3s var(--ease);
}
.page-manilla .mn-qty button:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: transparent;             /* sin relleno: coherencia con el resto */
}
.page-manilla .mn-qty button:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 3px;
}
.page-manilla .mn-qty .qlab {
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  align-self: flex-end;
  padding-bottom: 0.55rem;
}

/* Deslizador: se reconstruye como una regla milimétrica dorada. Se estilan los
   dos motores (WebKit y Gecko) por separado porque no comparten pseudo. */
.page-manilla .mn-range {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 28px;                        /* zona de toque cómoda */
  margin-top: 1.4rem;
  cursor: pointer;
}
.page-manilla .mn-range::-webkit-slider-runnable-track {
  height: 1px;
  background: var(--mn-rule-mid);
}
.page-manilla .mn-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -7.5px;                  /* centra el pulgar sobre el filete */
  border-radius: 50%;
  border: 0;
  background: radial-gradient(circle at 32% 28%, #f5e2ad, #c9a24a 55%, #8c6f3d 100%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.page-manilla .mn-range::-moz-range-track {
  height: 1px;
  background: var(--mn-rule-mid);
}
.page-manilla .mn-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 0;
  background: radial-gradient(circle at 32% 28%, #f5e2ad, #c9a24a 55%, #8c6f3d 100%);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.page-manilla .mn-range:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

/* ---------------------------------------------------------------------------
   7 · Vías del centro: tres columnas de revista, no tres tarjetas
   PROBLEMA QUE RESUELVE: las tres tenían alturas distintas según el largo del
   texto. Ahora cada vía es una columna con filete superior, altura mínima
   común y la descripción anclada abajo (margin-top:auto), así que las tres
   descripciones comparten línea de base aunque una ocupe dos renglones.
   --------------------------------------------------------------------------- */
.page-manilla .mn-vias {
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  align-items: stretch;
}
.page-manilla .mn-via {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 0;
  border-top: 1px solid var(--mn-rule);
  border-radius: 0;
  background: transparent;
  padding: 1.15rem 1.25rem 1.3rem 0;
  min-height: 8.4rem;
  transition: transform 0.35s var(--ease);
}
/* Filete vertical entre columnas contiguas (el "corondel" de la revista). */
.page-manilla .mn-via + .mn-via {
  border-left: 1px solid var(--mn-rule);
  padding-left: 1.25rem;
}
/* Trazo de selección: mismo gesto que en las celdas, pero arriba, porque aquí
   el filete que estructura la fila es el superior. */
.page-manilla .mn-via::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s var(--ease-out);
}
.page-manilla .mn-via:hover { transform: translateY(-3px); }
.page-manilla .mn-via:hover::after {
  background: var(--line-strong);
  transform: scaleX(0.35);
}
.page-manilla .mn-via[aria-pressed='true'] { background: transparent; }
.page-manilla .mn-via[aria-pressed='true']::after {
  background: var(--gold);
  transform: scaleX(1);
}
.page-manilla .mn-via:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: -2px;
}
.page-manilla .mn-via .cname {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--ivory);
  margin-bottom: 0.55rem;
  transition: color 0.3s var(--ease);
}
.page-manilla .mn-via[aria-pressed='true'] .cname { color: var(--gold-bright); }
.page-manilla .mn-via .cdesc {
  margin-top: auto;                    /* ancla las 3 descripciones abajo */
  font-size: 0.76rem;
  line-height: 1.65;
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   8 · Galería de centros: la foto manda
   PROBLEMA QUE RESUELVE: 4 miniaturas apretadas y el nombre de dos líneas
   descuadraba la fila. Se pasa a 2 columnas (el doble de foto) y el nombre
   reserva SIEMPRE dos renglones, así los precios quedan a la misma altura.
   --------------------------------------------------------------------------- */
.page-manilla .mn-galeria {
  margin-top: clamp(1.8rem, 3vh, 2.6rem);
  padding-top: clamp(1.5rem, 2.6vh, 2.2rem);
  border-top: 1px solid var(--mn-rule);
}
.page-manilla .mn-galeria-lab {
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  color: var(--gold);
  margin-bottom: 1.4rem;
}
.page-manilla .mn-galeria .mn-centers {
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.1rem, 2.2vw, 1.8rem);
}
/* La vía "esmeralda" trae hoy una sola pieza: sin este tope ocuparía media
   columna y se vería desproporcionada respecto a la rejilla de 4. */
.page-manilla .mn-galeria .mn-centro:only-child {
  max-width: min(100%, 250px);
}

.page-manilla .mn-centro {
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 0 0.9rem;
  position: relative;
  transition: transform 0.35s var(--ease);
}
.page-manilla .mn-centro:hover { transform: translateY(-3px); }
.page-manilla .mn-centro:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}
/* La miniatura se presenta como lámina: misma luz cenital que la vista previa,
   marco de un solo trazo. Al seleccionar, el trazo se vuelve dorado. */
.page-manilla .mn-centro .thumb {
  padding: clamp(0.7rem, 1.6vw, 1.1rem);
  margin-bottom: 0.9rem;
  border: 1px solid var(--mn-rule);
  background:
    radial-gradient(72% 58% at 50% 14%, rgba(197, 164, 101, 0.1), transparent 70%),
    radial-gradient(120% 100% at 50% 34%, #100d0a 0%, #0a0806 62%, #060504 100%);
  transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.page-manilla .mn-centro:hover .thumb { border-color: var(--mn-rule-mid); }
.page-manilla .mn-centro[aria-pressed='true'] .thumb {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(197, 164, 101, 0.16);
}
.page-manilla .mn-centro .cname {
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--ivory);
  /* dos renglones reservados: con nombres de 1 y de 2 líneas la fila no baila */
  min-height: 2.5em;
  transition: color 0.3s var(--ease);
}
.page-manilla .mn-centro[aria-pressed='true'] .cname { color: var(--gold-bright); }
.page-manilla .mn-centro .cprice {
  margin-top: auto;
  padding-top: 0.35rem;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   9 · La ficha (resumen)
   Menos "tarjeta de app" y más ficha técnica de catálogo: fondo más profundo
   que la página, filete de acento arriba y guías punteadas entre concepto y
   valor, como en una carta impresa.
   --------------------------------------------------------------------------- */
.page-manilla .mn-summary {
  margin-top: clamp(2.4rem, 5vh, 3.4rem);
  border: 1px solid var(--mn-rule);
  border-top: 1px solid var(--line-strong);
  border-radius: 0;
  padding: clamp(1.5rem, 2.6vw, 2rem) clamp(1.3rem, 2.2vw, 1.9rem) clamp(1.7rem, 3vh, 2.1rem);
  /* Se OSCURECE respecto al verde actual: sube el contraste del texto --muted
     de 4.70:1 a 4.91:1 en el peor punto del degradado. */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(15, 81, 50, 0.1) 100%);
}
.page-manilla .mn-summary h3 {
  font-size: 0.64rem;
  letter-spacing: 0.28em;
  margin-bottom: 1.3rem;
}
.page-manilla .mn-summary h3::after {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--mn-rule-mid);
  margin-top: 0.85rem;
}

.page-manilla .mn-line {
  border-bottom: 0;                    /* la guía punteada sustituye al filete */
  padding: 0.55rem 0;
  font-size: 0.86rem;
  align-items: baseline;
  gap: 0.75rem;
}
.page-manilla .mn-line dt {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  color: var(--muted);
  min-width: 0;
}
/* Guía punteada: es un pseudo DENTRO del dt (el dt pasa a ser flex), por eso
   queda entre el concepto y el valor y no al final de la fila. */
.page-manilla .mn-line dt::after {
  content: '';
  flex: 1 1 1.5rem;
  min-width: 1rem;
  height: 0;
  align-self: center;                  /* centrado en la línea: no depende del baseline sintético */
  border-top: 1px dotted rgba(197, 164, 101, 0.24);
}
.page-manilla .mn-line dd {
  flex: 0 0 auto;
  color: var(--ivory);
  letter-spacing: 0.01em;
}

.page-manilla .mn-total {
  margin-top: 1.4rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--mn-rule-mid);
}
.page-manilla .mn-total .tl {
  font-size: 0.66rem;
  letter-spacing: 0.26em;
  color: var(--muted);
}
.page-manilla .mn-total .tv {
  font-size: clamp(2rem, 3.2vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.01em;
}
/* Cuando no hay precio cerrado el mensaje no debe gritar: baja de cuerpo pero
   mantiene --ivory-soft, muy por encima del mínimo de contraste. */
.page-manilla .mn-total .tv.consulta {
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.6;
  text-align: right;
  max-width: 12rem;
}

/* CTA: el único elemento sólido de toda la página. En una doble página el oro
   macizo solo puede aparecer una vez, y es aquí. Texto casi negro sobre oro:
   8.67:1, el contraste más alto de la pantalla. */
.page-manilla .mn-cta {
  margin-top: 1.6rem;
  border-radius: 0;
  border-color: var(--gold-bright);
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%);
  color: #0a0a0a;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  padding: 1.15rem 1.5rem;
  transition: filter 0.3s var(--ease), transform 0.3s var(--ease);
}
.page-manilla .mn-cta:hover {
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold-bright) 100%);
  transform: translateY(-2px);
}
.page-manilla .mn-cta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.page-manilla .mn-note {
  margin-top: 1.1rem;
  font-size: 0.74rem;
  line-height: 1.7;
  max-width: 34ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------------------------
   10 · Cierre: los tres argumentos
   PROBLEMA QUE RESUELVE: eran tres textos sueltos. Ahora son tres columnas de
   revista: cada una con su filete superior, un acento dorado corto sobre el
   filete y el titular en serif. Estructura, no decoración.
   --------------------------------------------------------------------------- */
.page-manilla .mn-trust {
  border-top: 0;                       /* el filete pasa a cada columna */
  gap: clamp(1.8rem, 3.4vw, 3.2rem);
  padding-top: clamp(3rem, 7vh, 5rem);
}
.page-manilla .mn-trust > div {
  position: relative;
  border-top: 1px solid var(--mn-rule);
  padding-top: 1.6rem;
}
/* Acento de imprenta: un tramo corto de filete dorado montado sobre el fino. */
.page-manilla .mn-trust > div::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 34px;
  height: 1px;
  background: var(--gold);
}
.page-manilla .mn-trust .t {
  font-size: clamp(1.2rem, 1.9vw, 1.45rem);
  line-height: 1.25;
  color: var(--gold);
  margin-bottom: 0.7rem;
}
.page-manilla .mn-trust p {
  font-size: 0.855rem;
  line-height: 1.78;
  max-width: 34ch;
  color: var(--ivory-soft);
}

/* ---------------------------------------------------------------------------
   11 · Adaptación
   1440 / 1024 / 768 / 390 comprobados. Nada desborda: no hay anchos fijos en
   px, los aros del marco son box-shadow (no ocupan caja) y las rejillas usan
   divisores exactos del número de opciones.
   --------------------------------------------------------------------------- */

/* Canal más estrecho cuando la columna de pasos se estrecha. */
@media (max-width: 1180px) {
  .page-manilla { --mn-gutter: 4.1rem; }
}

/* Una sola columna: el estudio se apila, el canal ya no hace falta. */
@media (max-width: 900px) {
  .page-manilla .mn-preview { position: static; }
  .page-manilla .mn-summary { margin-top: clamp(2rem, 4vh, 2.8rem); }
}

/* Móvil: el folio vuelve al flujo, junto al título, y desaparece el canal. */
@media (max-width: 600px) {
  .page-manilla { --mn-gutter: 0rem; }
  .page-manilla .mn-step { padding-left: 0; }
  .page-manilla .mn-step-n {
    position: static;
    width: auto;
    font-size: 2.6rem;                 /* sigue por encima de 24px: umbral 3:1 */
  }
  .page-manilla .mn-step-head { gap: 0.75rem; }
  .page-manilla .mn-size { min-height: 122px; }
  .page-manilla .mn-qty { gap: 1rem; }
  .page-manilla .mn-total .tv.consulta { max-width: 9.5rem; }
}

/* Vías apiladas: el corondel vertical se convierte en filete horizontal. */
@media (max-width: 560px) {
  .page-manilla .mn-vias { grid-template-columns: 1fr; }
  .page-manilla .mn-via {
    min-height: 0;
    padding: 1.1rem 0 1.2rem;
  }
  .page-manilla .mn-via + .mn-via {
    border-left: 0;
    padding-left: 0;
  }
  .page-manilla .mn-via .cdesc { margin-top: 0.15rem; }
}

/* Móvil estrecho: se mantienen las DOS columnas (a 390px la foto queda en
   ~145px, más grande que las 4 miniaturas del escritorio actual) y solo se
   ajusta el aire. Una sola columna multiplicaría por dos el scroll del paso 3
   sin ganar nada: la pieza ya se lee perfectamente a ese tamaño. */
@media (max-width: 430px) {
  .page-manilla .mn-galeria .mn-centers { gap: 1rem 0.9rem; }
  .page-manilla .mn-centro .thumb { padding: 0.55rem; }
  .page-manilla .mn-centro .cname { font-size: 0.92rem; }
}

/* ---------------------------------------------------------------------------
   12 · Movimiento reducido
   Se apagan TODAS las transiciones y desplazamientos de esta capa, pero NO el
   estado: el subrayado de la opción elegida sigue visible (scaleX(1)), solo
   deja de animarse. Apagar el transform aquí borraría la selección.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .page-manilla .mn-size,
  .page-manilla .mn-size::after,
  .page-manilla .mn-size .dot,
  .page-manilla .mn-size .lab,
  .page-manilla .mn-via,
  .page-manilla .mn-via::after,
  .page-manilla .mn-via .cname,
  .page-manilla .mn-centro,
  .page-manilla .mn-centro .thumb,
  .page-manilla .mn-centro .cname,
  .page-manilla .mn-qty button,
  .page-manilla .mn-cta {
    transition: none;
  }
  .page-manilla .mn-size:hover,
  .page-manilla .mn-via:hover,
  .page-manilla .mn-centro:hover,
  .page-manilla .mn-cta:hover {
    transform: none;
  }
  /* El hover no debe insinuar movimiento: se marca solo con el filete. */
  .page-manilla .mn-size:hover::after { transform: scaleX(0.42); }
  .page-manilla .mn-via:hover::after { transform: scaleX(0.35); }
  .page-manilla .mn-size[aria-pressed='true']::after,
  .page-manilla .mn-via[aria-pressed='true']::after { transform: scaleX(1); }
}

/* ============================================================================
   CONTRASTES MEDIDOS (calculados sobre el color compuesto real, no el token)
   ----------------------------------------------------------------------------
   · --muted #847f75 sobre el fondo de página #0a0a0a ............... 4.97:1  AA
     (celdas .sub/.tag, .hint, .mn-caption, .cprice, .mn-note, .qlab:
      ninguna opción lleva ya relleno, así que el fondo real es la página)
   · --muted sobre el resumen, punto más claro del degradado #0b1110 . 4.91:1  AA
     (antes 4.70:1 con el verde plano: esta propuesta MEJORA el peor caso)
   · --ivory-soft rgba(245,241,232,.82) -> #cbc7c0 sobre #0a0a0a .... 14.6:1  AAA
   · --ivory #f0ebe1 sobre #0a0a0a ................................. 16.9:1  AAA
   · --gold #c5a465 sobre #0a0a0a .................................. 8.67:1  AAA
   · --gold-bright #e0c089 sobre #0a0a0a ........................... 11.4:1  AAA
   · #0a0a0a sobre el CTA de oro (peor extremo #c5a465) ............. 8.67:1  AAA
   · --gold-deep #8c6f3d sobre #0a0a0a (folio) ..................... 4.20:1
     Texto grande: 43px mín. (clamp 2.7rem) y 41.6px en móvil, por encima de
     los 24px de "large-scale text" -> el umbral WCAG que aplica es 3:1. Pasa
     con margen. Es el ÚNICO elemento de la página por debajo de 4.5:1 y es,
     por definición, decorativo-numérico (el paso también está en el <h2>).
   ============================================================================ */

/* ============================================================================
   INJERTOS DEL PANEL DE JUECES — 2026-08-02
   Ideas que venian de las propuestas que NO ganaron y que aqui hacian falta.
   ========================================================================= */

/* --- De "Atelier": tono propio para el texto secundario DENTRO del resumen ---
   dt, .tl y .mn-note van en --muted (#847f75). Sobre el negro de la pagina dan
   4.97:1, pero el resumen tiene su propio fondo con un velo esmeralda y ahi
   caian a ~4.7:1, al filo del minimo. Este tono sube el margen sin cambiar el
   caracter del gris. */
.page-manilla { --mn-ink-2: #a09a8f; }
.page-manilla .mn-summary .mn-line dt,
.page-manilla .mn-total .tl,
.page-manilla .mn-note { color: var(--mn-ink-2); }

/* --- Guardas explicitas ---
   El JS oculta filas y la galeria con el atributo [hidden]. Esta hoja redeclara
   display en muchos sitios; hoy no colisiona, pero basta un display:flex futuro
   sobre .mn-line para que [hidden] deje de funcionar y aparezca una fila que
   deberia estar oculta. Se blinda. */
.page-manilla .mn-summary .mn-line[hidden] { display: none; }
.page-manilla #mn-galeria[hidden] { display: none; }

/* --- De "Atelier": testigo circular de la via elegida ---
   La via seleccionada se marcaba SOLO con un filete dorado de 1px arriba. Es
   poca senal para el estado mas importante del paso 3, y quien no distinga bien
   el dorado se queda sin pista. Ahora hay ademas un circulo que se rellena. */
/* El testigo va ARRIBA del titulo, no a su izquierda: en columnas estrechas el
   punto quedaba pegado a la primera letra. Encima ademas respeta la retícula
   editorial (todo alineado al mismo margen izquierdo). */
.page-manilla .mn-via { position: relative; padding-top: 2.6rem; }
.page-manilla .mn-via::after {
  content: '';
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.page-manilla .mn-via[aria-pressed="true"]::after {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(197, 164, 101, 0.16);
}
@media (prefers-reduced-motion: reduce) {
  .page-manilla .mn-via::after { transition: none; }
}

/* --- De "Atelier": regla graduada en el deslizador ---
   El deslizador era un hilo liso: no daba ninguna referencia de donde cae tu
   eleccion dentro del rango 4-24. Las marcas se pintan en el PROPIO carril
   (no en un pseudo del contenedor, que no podria alinearse con el recorrido).
   Van cada 4 balines. El calc(100% - 16px) descuenta el ancho del pulgar: sin
   el, la ultima marca cae fuera del recorrido util y engaña. */
.page-manilla .mn-range::-webkit-slider-runnable-track {
  background-image:
    linear-gradient(90deg, var(--mn-rule-mid) 0 100%),
    repeating-linear-gradient(90deg,
      var(--line-strong) 0 1px,
      transparent 1px calc((100% - 16px) / 5));
  background-size: 100% 1px, calc(100% - 16px) 7px;
  background-position: left center, 8px calc(50% + 5px);
  background-repeat: no-repeat, no-repeat;
  background-color: transparent;
}
.page-manilla .mn-range::-moz-range-track {
  background-image:
    linear-gradient(90deg, var(--mn-rule-mid) 0 100%),
    repeating-linear-gradient(90deg,
      var(--line-strong) 0 1px,
      transparent 1px calc((100% - 16px) / 5));
  background-size: 100% 1px, calc(100% - 16px) 7px;
  background-position: left center, 8px calc(50% + 5px);
  background-repeat: no-repeat, no-repeat;
  background-color: transparent;
}
.page-manilla .mn-range { margin-bottom: 1.4rem; }

/* 🔴 REGRESION QUE INTRODUJO EL INJERTO DE minmax() — corregida 2026-08-02
   manillas.css baja el estudio a UNA columna con `@media (max-width:900px){
   .mn-studio{grid-template-columns:1fr} }`. Ese selector tiene especificidad
   (0,1,0); el injerto de arriba usa `.page-manilla .mn-studio` = (0,2,0) y GANA
   aunque este fuera de la media query — el @media no aporta especificidad.
   Resultado medido: a 390px el panel de pasos quedaba en 156px de ancho dentro
   de una segunda columna, y las celdas de balin se salian 12px de la pantalla.
   Se vuelve a bajar a una columna, ahora sí con el mismo prefijo. */
@media (max-width: 900px) {
  .page-manilla .mn-studio { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================================
   EL BALIN DEL SELECTOR ES EL BALIN REAL — 2026-08-02 (peticion de Daniel)
   Hasta ahora el punto de los pasos 1 y 4 era un circulo pintado con
   radial-gradient: una bolita lisa que no se parecia a la pieza. Ahora se usa
   el MISMO recorte que se dibuja en la manilla (assets/images/manillas/balin.png,
   oro 18k con talla diamantada), asi que lo que eliges es literalmente lo que ves
   montado en la vista previa.

   No hace falta tocar el JS: el ancho y el alto los sigue poniendo el en linea
   segun la escala de cada numero; aqui solo se cambia el relleno.

   El png tiene la pieza casi a sangre (contenido 252x248 sobre lienzo de 256), asi
   que `contain` la deja del tamano pedido sin recortarla. Se quita el
   border-radius: la forma la da el alfa del propio recorte, no la caja. */
.page-manilla .mn-size .dot {
  background: url('../assets/images/manillas/balin.png') center / contain no-repeat;
  border-radius: 0;
  /* la sombra de caja delataba el cuadrado; el volumen ya lo trae la foto */
  box-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
.page-manilla .mn-size[aria-pressed="true"] .dot {
  /* OJO: una regla anterior marca la seleccion con un aro dorado hecho de
     box-shadow (0 0 0 3px). Con la bolita pintada eso era un anillo; con el
     recorte real, que ya no es circular, se dibujaba un CUADRADO alrededor del
     balin. Se anula aqui y el realce pasa a ser luz sobre la propia pieza. */
  box-shadow: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6)) brightness(1.08);
}

/* Mismo arreglo que en manillas.css, aqui con el prefijo .page-manilla para que
   gane a la regla premium de 2 columnas (ver el gotcha documentado alla). */
.page-manilla .mn-galeria .mn-centers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-manilla .mn-centro { min-width: 0; }