/* ==========================================================================
   PAGINAS DE COMPRA: ficha, carrito, checkout y confirmacion.  [DLUXE] RF-D31

   Se carga DESPUES de dluxe.css (que es styles.css de la demo, sin rediseñar) y solo usa sus
   tokens: --ink, --paper, --accent, --cyan (dorado), --muted, --line, --radius, --shadow.
   Reutiliza sus componentes (.button, .checkout-form, .payment-methods, .cart-line, .cart-summary,
   .quantity-control, .product-media, .section-heading, .microcopy, .empty-cart). Lo de aqui es
   solo lo que la demo no tenia: ficha, pasos, resumen, estados del pedido.

   Los nombres de clase que el JS del checkout necesita (.medio, .metodo, .btn-pagar, .aviso,
   .pago-cols, .campo-seguro...) se conservan como ganchos; su aspecto es el de la demo.
   ========================================================================== */

/* ------------------------------------------------------------------ pagina interior */

/* La cabecera de la demo es fija: el contenido arranca por debajo de ella. */
.pagina {
  padding: 128px clamp(18px, 5vw, 76px) 88px;
}

.pagina-in {
  margin: 0 auto;
  max-width: 1180px;
}

.pagina .section-heading {
  margin-bottom: 28px;
}

.tenue {
  color: var(--muted);
}

.bajo-titulo {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 4px 0 16px;
}

.visualmente-oculto {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Caja blanca de la demo (.checkout-confirm, .product-card): fondo blanco y linea fina. */
.compra-caja {
  background: #fff;
  border: 1px solid var(--line);
  padding: 24px;
}

.compra-caja h2 {
  font-size: 22px;
  line-height: 1.1;
  margin: 0 0 16px;
}

/* Botones que la demo no trae: el secundario sobre fondo crema. */
.button-outline {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.button-outline:hover {
  background: var(--ink);
  color: var(--paper);
}

.button[disabled],
.button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.4;
  pointer-events: none;
}

/* ------------------------------------------------------------------ avisos */

.aviso {
  background: #fff;
  border: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.5;
  padding: 14px 16px;
}

.aviso ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.aviso.malo {
  background: #fdecee;
  border-color: var(--accent);
  color: #7d0211;
}

/* «Agregado al carrito» sin JavaScript (con JS agrega tienda.js y avisa el .toast negro): tarjeta
   blanca con barra verde, no un cuadro menta fuera de la paleta. */
.aviso.bueno {
  border-left: 4px solid #1c6b3f;
  color: var(--ink);
  font-weight: 700;
}

.aviso.bueno a {
  color: #1c6b3f;
  font-weight: 900;
}

.aviso a {
  text-decoration: underline;
}

/* El aviso negro de la demo no fija ancho: con left:50% solo dispone de la mitad de la pantalla y un
   nombre largo se partia en 3 o 4 lineas en el movil. */
.toast {
  max-width: calc(100% - 32px);
  text-align: center;
  width: max-content;
}

/* ------------------------------------------------------------------ pasos de la compra */

.pasos ol {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
}

.paso {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  gap: 10px;
  text-transform: uppercase;
}

.paso:not(:last-child)::after {
  background: var(--line);
  content: "";
  height: 1px;
  margin-left: 4px;
  width: 32px;
}

.paso-marca {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  display: inline-flex;
  font-size: 12px;
  height: 26px;
  justify-content: center;
  width: 26px;
}

.paso.activo {
  color: var(--ink);
}

.paso.activo .paso-marca {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.paso.hecho .paso-marca {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* ------------------------------------------------------------------ formularios */

/* La demo estiliza label + input text/email/tel dentro de .checkout-form; aqui lo mismo para los
   demas controles y para los campos que no son <label> (los iframes de Mercado Pago). */
.campo {
  color: #34362f;
  display: grid;
  font-size: 13px;
  font-weight: 900;
  gap: 8px;
}

.campo-par {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr 1fr;
}

.campo input,
.campo select,
.compra-caja select,
.copiar input {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  min-height: 48px;
  outline: none;
  padding: 0 14px;
  width: 100%;
}

.campo input:focus,
.campo select:focus,
.copiar input:focus {
  border-color: var(--ink);
}

.campo .mal,
.campo input.mal,
.campo select.mal {
  border-color: var(--accent);
}

.campo i,
.err {
  color: var(--accent);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

/* Los campos de tarjeta que monta Mercado Pago (iframes): un marco igual al de un input. */
.campo-seguro {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  min-height: 48px;
  padding: 0 14px;
}

/* Sin alto propio el iframe de Mercado Pago mide 150px (el de cualquier iframe): el campo quedaba enorme. */
.campo-seguro iframe {
  border: 0;
  display: block;
  height: 44px;
  width: 100%;
}

.campo-seguro:focus-within {
  border-color: var(--ink);
}

/* ------------------------------------------------------------------ checkout */

.pago-cols {
  align-items: start;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
}

.pago-izq {
  display: grid;
  gap: 24px;
}

.pago-dcha {
  display: grid;
  gap: 24px;
  position: sticky;
  top: 96px;
}

.doc-comprador {
  margin-top: 18px;
}

/* La lista de medios usa el fieldset .payment-methods de la demo; cada medio es una fila. */
.medios {
  gap: 12px;
}

.medios-titulo {
  padding: 0;
}

.medios-grupo {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  margin: 6px 0 0;
  text-transform: uppercase;
}

.medio {
  background: #fff;
  border: 1px solid var(--line);
}

.medio.abierto {
  border-color: var(--ink);
}

.medio-cab {
  cursor: pointer;
  flex-wrap: wrap;   /* si no caben los logos junto al texto, bajan a su propia linea */
  padding: 14px 16px;
}

.medio-icono {
  align-items: center;
  background: var(--ink);
  color: var(--paper);
  display: inline-flex;
  flex: none;
  height: 38px;
  justify-content: center;
  width: 38px;
}

/* El texto se encoge junto al icono (base pequena) en vez de saltar de linea: al permitir que la fila
   envuelva, solo los logos deben bajar, no el nombre del medio. */
.medio-txt {
  display: grid;
  flex: 1 1 120px;
  gap: 2px;
  min-width: 0;
}

.medio-txt b {
  font-size: 14px;
}

/* Logos del medio (RF-D35), a la derecha de la fila. En pantallas chicas bajan a su propia linea. */
.medio-logos {
  align-items: center;
  display: flex;
  flex: none;
  gap: 8px;
  margin-left: auto;
}

.medio-logos img {
  display: block;
  height: 22px;
  max-width: 56px;
  object-fit: contain;
  width: auto;
}

.medio-txt small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.medio-panel {
  display: grid;
  gap: 14px;
  padding: 4px 16px 18px;
}

.medio-panel[hidden] {
  display: none;
}

.medios-nota,
.medio-ayuda {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.cifrado {
  align-items: flex-start;
  color: var(--muted);
  display: flex;
  font-size: 13px;
  gap: 8px;
  line-height: 1.5;
  margin: 0;
}

.cifrado svg {
  flex: none;
  margin-top: 2px;
}

.pe-pasos {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  padding-left: 20px;
}

/* ------------------------------------------------------------------ resumen del pedido */

.res-detalle summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  font-size: 14px;
  font-weight: 900;
  justify-content: space-between;
  list-style: none;
  padding: 6px 0 12px;
}

.res-detalle summary::-webkit-details-marker {
  display: none;
}

.res-detalle summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.res-titulo {
  align-items: center;
  display: inline-flex;
  gap: 10px;
}

/* RF-D38: la senal de que el detalle se puede ocultar: la palabra y un chevron que gira. */
.res-alterna {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
}

.res-alterna::after {
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  content: "";
  height: 6px;
  transform: translateY(2px) rotate(-135deg);   /* abierto: apunta arriba */
  transition: transform 160ms ease;
  width: 6px;
}

.res-detalle:not([open]) .res-alterna::after {
  transform: translateY(-2px) rotate(45deg);    /* cerrado: apunta abajo */
}

.res-ver,
.res-detalle:not([open]) .res-ocultar {
  display: none;
}

.res-detalle:not([open]) .res-ver {
  display: inline;
}

.res-linea {
  align-items: center;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: 48px 1fr auto;
  padding: 10px 0;
}

.res-linea img,
.res-hueco {
  background: #111;
  height: 48px;
  object-fit: cover;
  width: 48px;
}

.res-nombre {
  font-size: 14px;
  font-weight: 900;
}

.fila-res {
  align-items: baseline;
  display: flex;
  font-size: 14px;
  justify-content: space-between;
  padding: 8px 0;
}

.fila-res.total {
  border-top: 1px solid var(--line);
  font-size: 22px;
  font-weight: 950;
  margin-top: 6px;
  padding-top: 14px;
}

.gratis {
  color: #1c6b3f;
  font-weight: 900;
}

.acepto {
  align-items: flex-start;
  display: flex;
  font-size: 13px;
  gap: 10px;
  line-height: 1.5;
  margin: 16px 0 8px;
}

.acepto input {
  accent-color: var(--ink);
  flex: none;
  margin-top: 3px;
}

.acepto.mal {
  color: var(--accent);
}

.acepto a {
  text-decoration: underline;
}

.btn-pagar {
  margin-top: 14px;
}

.confianza p {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 10px;
}

.confianza .confianza-tit {
  align-items: center;
  color: var(--ink);
  display: flex;
  font-size: 13px;
  font-weight: 900;
  gap: 8px;
  margin-bottom: 6px;
}

.marcas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Cada medio es un cuadro blanco con su logo oficial (RF-D34); todos del mismo alto para que la fila se vea pareja. */
.marcas li {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  display: flex;
  height: 38px;
  justify-content: center;
  min-width: 52px;
  padding: 0 9px;
}

.marcas li img {
  display: block;
  height: 24px;
  max-width: 60px;
  object-fit: contain;
  width: auto;
}

.nota-demo {
  border: 1px dashed var(--accent);
  font-size: 13px;
  line-height: 1.5;
  padding: 12px 14px;
}

/* ------------------------------------------------------------------ carrito */

.carro {
  align-items: start;
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
}

.carro-lineas {
  display: grid;
  gap: 14px;
}

.carro .cart-line {
  background: #fff;
  grid-template-columns: 86px 1fr auto;
}

.carro .cart-line.sin {
  opacity: 0.6;
}

.carro .cart-line img {
  height: 86px;
}

.linea-nombre {
  display: block;
  font-size: 15px;
  font-weight: 900;
}

.linea-mal {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  margin-top: 4px;
}

.linea-dcha {
  display: grid;
  gap: 6px;
  justify-items: end;
  text-align: right;
}

.antes,
.price-was {
  color: var(--muted);
  text-decoration: line-through;
}

.quantity-control form,
.linea-dcha form {
  display: contents;
}

.quantity-control button[disabled] {
  cursor: not-allowed;
  opacity: 0.35;
}

.quitar {
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  text-decoration: underline;
}

.resumen .button + .button {
  margin-top: 10px;
}

/* ------------------------------------------------------------------ ficha de producto */

.migas {
  margin: 0 0 22px;
}

.migas a {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

.migas a:hover {
  color: var(--ink);
}

.ficha {
  align-items: start;
  display: grid;
  gap: clamp(24px, 5vw, 64px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.ficha-fotos .product-media {
  border: 1px solid var(--line);
}

/* RF-D41: las miniaturas van en una columna a la DERECHA de la foto grande, y reparten su alto en 4
   casillas iguales (hasta 4 fotos). Con una sola foto la columna se oculta y la foto ocupa todo.
   La columna mide 1/5 del ancho menos su parte de los huecos, asi cada casilla sale cuadrada: la foto
   grande es cuadrada (4 casillas + 3 huecos = su alto). contain: size hace que la columna tome el alto
   de la foto grande sin ensancharlo ella. */
.ficha-fotos {
  --hueco: 10px;
  display: grid;
  gap: var(--hueco);
  grid-template-columns: minmax(0, 1fr) calc((100% - 4 * var(--hueco)) / 5);
}

.ficha-fotos:has(.tiras[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}

.tiras {
  align-self: stretch;
  contain: size;
  display: grid;
  gap: var(--hueco);
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.tiras[hidden] {
  display: none;
}

.tiras button {
  background: #111;
  border: 1px solid var(--line);
  cursor: pointer;
  min-height: 0;
  padding: 0;
}

.tiras button.on {
  border-color: var(--ink);
  outline: 2px solid var(--ink);
}

.tiras img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.ficha-datos h1 {
  font-size: clamp(34px, 5vw, 56px);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 0.95;
  margin: 0 0 16px;
}

.precio-grande {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.precio-grande b {
  font-size: 32px;
}

.pct {
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  padding: 4px 8px;
}

.ficha-datos .aviso {
  margin: 16px 0 0;
}

.rotulo-talla {
  align-items: baseline;
  display: flex;
  font-size: 13px;
  font-weight: 900;
  justify-content: space-between;
  margin: 24px 0 10px;
  text-transform: uppercase;
}

.tallas,
.colores {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tallas[hidden] {
  display: none;
}

.talla,
.color-m {
  cursor: pointer;
  position: relative;
}

.talla input,
.color-m input {
  height: 1px;
  opacity: 0;
  position: absolute;
  width: 1px;
}

.talla span {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  display: inline-flex;
  font-size: 14px;
  font-weight: 900;
  justify-content: center;
  min-height: 46px;
  min-width: 52px;
  padding: 0 14px;
}

.talla input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.talla input:focus-visible + span,
.color-m input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.talla.no span {
  color: var(--muted);
  opacity: 0.45;
  text-decoration: line-through;
}

.color-m span {
  border: 1px solid var(--line);
  display: block;
  height: 36px;
  width: 36px;
}

.color-m input:checked + span {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink);
}

.color-m.no span {
  opacity: 0.35;
}

.comprar {
  display: grid;
  gap: 12px;
  grid-template-columns: 138px 1fr;
  margin-top: 26px;
}

/* DX-16: cantidad con − / +. Una caja como la del select que reemplaza; los botones se apagan en los
   limites (aria-disabled) y sin JavaScript el campo se escribe a mano. */
.cantidad-ficha {
  background: #fff;
  border: 1px solid var(--line);
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  min-height: 48px;
}

.cantidad-ficha:focus-within {
  border-color: var(--ink);
}

.cantidad-ficha button {
  background: none;
  border: 0;
  color: var(--ink);
  cursor: pointer;
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  padding: 0;
}

.cantidad-ficha button:hover {
  background: var(--ink);
  color: var(--paper);
}

.cantidad-ficha button[aria-disabled="true"],
.cantidad-ficha button:disabled {
  background: none;
  color: var(--ink);
  cursor: not-allowed;
  opacity: 0.3;
}

.cantidad-ficha input {
  -moz-appearance: textfield;
  appearance: textfield;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
  min-width: 0;
  outline: none;
  padding: 0;
  text-align: center;
  width: 100%;
}

.cantidad-ficha input::-webkit-inner-spin-button,
.cantidad-ficha input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* El icono de bolsa es el de la cabecera. */
.comprar .button svg {
  fill: none;
  flex: none;
  height: 20px;
  margin-right: 10px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
  width: 20px;
}

.comprar .button {
  white-space: nowrap;
}

/* En el movil la cantidad se achica para que «Agregar al carrito» quede en una linea; si ni asi cabe
   (pantallas de menos de 375 px), se apilan. Va despues de las reglas base de arriba. */
@media (max-width: 480px) {
  .comprar {
    grid-template-columns: 124px 1fr;
  }

  .cantidad-ficha {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
  }

  .comprar .button {
    padding: 0 14px;
  }
}

@media (max-width: 374px) {
  .comprar {
    grid-template-columns: 1fr;
  }
}

/* DX-16: sellos de confianza bajo el boton (public/marca/sellos.php); 2 o 3, siempre del mismo ancho. */
.sellos {
  display: grid;
  gap: 8px;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.sello {
  align-content: start;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 14px 8px;
  text-align: center;
}

.sello svg {
  fill: none;
  height: 24px;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
  width: 24px;
}

.sello b {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.sello span {
  font-size: 11px;
  line-height: 1.3;
  opacity: 0.72;
}

.descripcion {
  border-top: 1px solid var(--line);
  margin-top: 32px;
  padding-top: 20px;
}

.descripcion h2 {
  font-size: 13px;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.descripcion p {
  line-height: 1.6;
  margin: 0 0 8px;
}

/* ------------------------------------------------------------------ confirmacion del pedido */

.pedido-col {
  display: grid;
  gap: 20px;
  margin: 0 auto;
  max-width: 760px;
}

.marca-estado {
  align-items: center;
  display: inline-flex;
  font-size: 20px;
  font-weight: 950;
  gap: 10px;
}

.marca-estado .punto {
  background: var(--cyan);
  border-radius: 999px;
  height: 12px;
  width: 12px;
}

.marca-estado.pagado .punto,
.marca-estado.preparando .punto,
.marca-estado.enviado .punto,
.marca-estado.entregado .punto {
  background: #1c6b3f;
}

.marca-estado.rechazado .punto,
.marca-estado.expirado .punto,
.marca-estado.cancelado .punto,
.marca-estado.reembolsado .punto {
  background: var(--accent);
}

.pedido-estado {
  text-align: center;
}

.numero-pedido {
  font-size: clamp(30px, 6vw, 48px);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  margin: 6px 0 0;
}

.copiar {
  display: flex;
  gap: 8px;
}

.copiar input {
  flex: 1;
  min-width: 0;
}

.pe-caja #pe-codigo {
  font-size: 26px;
  font-weight: 950;
  letter-spacing: 0.12em;
  text-align: center;
}

.pe-donde {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.pe-donde b {
  color: var(--ink);
  display: block;
}

.pedido-envio {
  line-height: 1.7;
  margin: 0;
}

/* ------------------------------------------------------------------ ajustes de especificidad */

/* `.checkout-form label` (demo) da a TODO label peso 900 y disposicion en grilla; estos dos casos
   necesitan otra cosa. */
.checkout-form .acepto {
  color: var(--ink);
  display: flex;
  flex-direction: row;
  font-size: 13px;
  font-weight: 600;
  gap: 10px;
}

.checkout-form .medio-cab {
  color: var(--ink);
  font-weight: 700;
  gap: 12px;
}

/* `.payment-methods label` (demo) pone en FILA todo label del fieldset; los campos de los paneles
   (tarjeta, Yape) son etiqueta arriba y campo abajo, como el resto del formulario. */
.payment-methods .campo {
  align-items: stretch;
  display: grid;
  flex-direction: column;
  gap: 8px;
}

/* La lista de medios ya va dentro de una caja blanca: sin segundo marco. */
.compra-caja .payment-methods {
  border: 0;
  padding: 0;
}

.compra-caja .medios-titulo {
  display: none;
}

.empty-cart .button {
  justify-self: center;
}

/* ------------------------------------------------------------------ movil */

@media (max-width: 900px) {
  .pago-cols,
  .carro,
  .ficha {
    grid-template-columns: 1fr;
  }

  .pago-dcha {
    position: static;
  }
}

@media (max-width: 620px) {
  /* Los logos del medio bajan bajo el texto, alineados con el icono (radio + separacion = 31 px). */
  .medio-logos {
    flex-basis: 100%;
    margin-left: 0;
    padding-left: 31px;
  }

  .campo-par {
    grid-template-columns: 1fr;
  }

  .carro .cart-line {
    grid-template-columns: 72px 1fr;
  }

  .carro .cart-line img {
    height: 72px;
    width: 72px;
  }

  .linea-dcha {
    grid-column: 1 / -1;
    grid-template-columns: 1fr auto;
    justify-items: start;
    text-align: left;
  }

  .copiar {
    flex-direction: column;
  }
}

/* ------------------------------------------------------------------ texto legal */

.texto-legal {
  max-width: 760px;
}

.texto-legal p {
  line-height: 1.7;
  margin: 0 0 14px;
}

.texto-legal h3 {
  font-size: 18px;
  margin: 28px 0 8px;
}

.texto-legal .aviso {
  margin-bottom: 22px;
}

/* ------------------------------------------------------------------ libro de reclamaciones (RF-D46)
   El formulario usa las cajas y campos del checkout; aqui solo lo que este no tenia: area de texto,
   grupos de opciones y el campo trampa contra robots. */
.libro {
  max-width: 820px;
}

.libro-proveedor p {
  margin: 0 0 6px;
}

.libro-proveedor .aviso {
  margin: 10px 0;
}

.libro-form .compra-caja {
  display: grid;
  gap: 16px;
}

.libro-form .compra-caja h2 {
  margin: 0;
}

.campo textarea {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  font: inherit;
  font-weight: 400;
  min-height: 96px;
  outline: none;
  padding: 12px 14px;
  resize: vertical;
  width: 100%;
}

.campo textarea:focus {
  border-color: var(--ink);
}

.campo textarea.mal {
  border-color: var(--accent);
}

.eleccion {
  border: 0;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.eleccion legend {
  color: #34362f;
  font-size: 13px;
  font-weight: 900;
  margin-bottom: 8px;
  padding: 0;
}

/* .checkout-form label de la demo pone 900 a toda etiqueta: en una opcion larga cansa la vista. */
.eleccion label {
  align-items: flex-start;
  display: flex;
  font-size: 14px;
  font-weight: 500;
  gap: 10px;
  line-height: 1.45;
}

.eleccion input {
  accent-color: var(--ink);
  flex: none;
  margin-top: 3px;
}

.libro-form .acepto {
  margin: 0;
}

.libro-nota {
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
}

/* Campo trampa: fuera de la vista y del orden de tabulacion; una persona nunca lo llena. */
.trampa {
  height: 1px;
  left: -10000px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

/* RF-115: el aviso del Libro de Reclamaciones en el resumen del checkout. */
.aviso-libro {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  margin: 0 0 8px;
}

.aviso-libro a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
}

/* DX-35: textos legales modelo. La nota de que es un modelo va discreta, al final. */
.texto-legal ul {
  line-height: 1.7;
  margin: 0 0 14px;
  padding-left: 20px;
}

.texto-legal a {
  text-decoration: underline;
}

.texto-legal .nota-modelo {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  margin-top: 32px;
  padding-top: 14px;
}