/* H9 · «Tu plan» y los textos legales. Clases con el prefijo del área (venta__, venta-legal__); las de portal.css se leen. */
.venta { display: grid; gap: 18px; max-width: 760px; }
.venta h2 { font: italic 600 20px/1.2 var(--letra-titulo); margin: 0 0 10px; }

/* El estado, como la etiqueta de una maleta: el color dice si hay que hacer algo. */
.venta__estado {
  display: inline-block; padding: 4px 12px; border-radius: 999px; border: 1.5px solid currentColor;
  font: 600 12px/1.6 var(--letra-texto); letter-spacing: .12em; text-transform: uppercase;
}
/* El latón (#A8864F) sobre la hoja da ~3,3:1: no alcanza para letra de 12 px (AA pide 4,5:1). Letra en tinta, latón en el borde. */
.venta__estado--prueba { color: var(--tinta); border-color: var(--laton); }
.venta__estado--activa { color: var(--verde); }
.venta__estado--solo_lectura,
.venta__estado--por_borrar { color: var(--oxido); }
.venta__detalle { margin: 12px 0; line-height: 1.55; }

.venta__activar textarea { width: 100%; resize: vertical; }
.venta__listo { display: grid; gap: 10px; justify-items: start; }

.venta__almacen { width: 100%; height: 12px; }
.venta__cifra { margin: 8px 0 2px; font-family: var(--letra-codigo); font-size: 14px; }

.venta__legales { display: flex; flex-wrap: wrap; gap: 16px; }

/* Los textos legales: una hoja de lectura, con el aviso de borrador como un sello de tinta. */
.venta-legal { max-width: 720px; margin: 0 auto; padding: 24px 16px 48px; }
.venta-legal h1 { font: 500 30px/1.15 var(--letra-titulo); margin: 6px 0; }
.venta-legal__borrador {
  display: inline-block; margin: 0; padding: 6px 12px; border: 1.5px dashed var(--oxido);
  border-radius: var(--radio-chico); color: var(--oxido); font: 600 13px var(--letra-texto);
}
.venta-legal__version { margin: 0 0 8px; color: var(--gris); font-family: var(--letra-codigo); font-size: 13px; }
.venta-legal__seccion h2 { font: italic 600 20px/1.25 var(--letra-titulo); margin: 28px 0 8px; }
.venta-legal__seccion p { margin: 0 0 10px; line-height: 1.65; overflow-wrap: anywhere; }
.venta-legal__pie { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }