/* Documentos Ikusa (propuestas y facturas): papel claro para imprimir, con la cabecera oscura
   de la marca, Montserrat para títulos, Helvetica para texto e IBM Plex Mono para cifras. */

.doc {
  --tinta: #15131D; --gris: #5B5966; --linea: #E4E1D8; --papel: #FFFFFF; --crema: #F6F4EE;
  --naranja: #E2603C; --azul: #3E76BB;
  position: relative;
  width: 210mm; min-height: 297mm; margin: 0 auto; background: var(--papel); color: var(--tinta);
  font: 10.5pt/1.5 "Helvetica Now Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  display: flex; flex-direction: column;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.doc .num { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }
.doc p { margin: 0 0 8px; }

.doc-cab { background: var(--tinta); color: #fff; padding: 16mm 16mm 12mm; position: relative; }
.doc-cab::after { content: ""; position: absolute; left: 16mm; bottom: 0; width: 34mm; height: 3px; background: var(--naranja); }
.doc-cab-fila { display: flex; justify-content: space-between; align-items: flex-start; gap: 10mm; }
.doc-logo { width: 46mm; height: auto; display: block; }
.doc-cab-meta { display: grid; justify-items: end; gap: 2px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9pt; color: #C9C7D1; }
.doc-tipo { color: var(--naranja); letter-spacing: .16em; text-transform: uppercase; font-weight: 600; }
.doc-titulo { font-family: Montserrat, "Helvetica Neue", Arial, sans-serif; font-weight: 300; font-size: 26pt; line-height: 1.1; letter-spacing: -.02em; margin: 12mm 0 0; max-width: 150mm; }

.doc-para { display: grid; grid-template-columns: 1fr 1fr; gap: 8mm; padding: 9mm 16mm 7mm; background: var(--crema); border-bottom: 1px solid var(--linea); }
.doc-para-3 { grid-template-columns: 1.2fr 1.2fr 1fr; }
.doc-para > div { display: grid; gap: 2px; align-content: start; }
.doc-eti { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 7.5pt; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); margin-bottom: 2px; }
.doc-para strong { font-size: 11.5pt; }
.doc-pre { white-space: pre-line; color: var(--gris); font-size: 9.5pt; }

.doc-bloque { padding: 7mm 16mm 0; break-inside: avoid; }
.doc-intro p { font-size: 11pt; color: #2B2933; }
.doc-h2 { font-family: Montserrat, "Helvetica Neue", Arial, sans-serif; font-size: 12pt; font-weight: 700; margin: 0 0 4mm; display: flex; align-items: center; gap: 3mm; }
.doc-h2::before { content: ""; width: 3mm; height: 3mm; background: var(--naranja); border-radius: 1px; }

.doc-tabla { width: 100%; border-collapse: collapse; }
.doc-tabla th { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 7.5pt; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--gris); text-align: left; padding: 0 0 2mm; border-bottom: 1.5px solid var(--tinta); }
.doc-tabla td { padding: 3mm 0; border-bottom: 1px solid var(--linea); vertical-align: top; }
.doc-tabla td + td, .doc-tabla th + th { padding-left: 4mm; }
.doc-tabla .der { text-align: right; white-space: nowrap; }
.doc-desc { color: var(--gris); font-size: 9pt; margin-top: 1mm; white-space: pre-line; }

.doc-totales { display: grid; grid-template-columns: repeat(auto-fit, minmax(50mm, 1fr)); gap: 4mm; }
.doc-total { background: var(--tinta); color: #fff; border-radius: 3mm; padding: 5mm 6mm; display: grid; gap: 1mm; position: relative; overflow: hidden; }
.doc-total::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 2mm; background: var(--naranja); }
.doc-total span:first-child { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 7.5pt; letter-spacing: .14em; text-transform: uppercase; color: #C9C7D1; }
.doc-total strong { font-size: 20pt; font-weight: 500; letter-spacing: -.02em; }
.doc-tachado { text-decoration: line-through; color: #8F8D99; font-size: 9.5pt; }
.doc-nota { font-size: 8.5pt; color: #C9C7D1; }

.doc-terminos ol { margin: 0; padding-left: 5mm; columns: 2; column-gap: 8mm; font-size: 8.5pt; color: #34323C; }
.doc-terminos li { margin-bottom: 2.5mm; break-inside: avoid; padding-left: 1mm; }
.doc-terminos li::marker { font-family: "IBM Plex Mono", ui-monospace, monospace; color: var(--naranja); }

.doc-firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 14mm; padding-top: 14mm; }
.doc-firmas > div { display: grid; gap: 1mm; font-size: 9pt; color: var(--gris); }
.doc-firmas strong { color: var(--tinta); font-size: 10pt; }
.doc-linea { height: 1px; background: var(--tinta); margin-bottom: 2mm; }

.doc-suma { display: grid; justify-items: end; gap: 2mm; }
.doc-suma > div { display: flex; justify-content: space-between; gap: 12mm; min-width: 75mm; color: var(--gris); }
.doc-suma-total { border-top: 1.5px solid var(--tinta); padding-top: 3mm; color: var(--tinta) !important; font-size: 13pt; }
.doc-suma-total strong { font-size: 18pt; font-weight: 500; }

.doc-sello { position: absolute; right: 18mm; top: 64mm; transform: rotate(-12deg); border: 2.5px solid #2B8457; color: #2B8457; font-family: Montserrat, Arial, sans-serif; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; padding: 2mm 6mm; border-radius: 2mm; font-size: 14pt; opacity: .85; }

.doc-pie { margin-top: auto; padding: 8mm 16mm 10mm; display: flex; justify-content: space-between; gap: 6mm; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 7.5pt; color: var(--gris); border-top: 1px solid var(--linea); }

@media print {
  @page { size: A4; margin: 0; }
  html, body { background: #fff !important; margin: 0; }
  .doc { margin: 0; box-shadow: none; }
  .no-imprimir { display: none !important; }
}
.doc-suma > .doc-suma-sub { border-top: .5px solid var(--gris); padding-top: 2mm; color: var(--tinta); font-weight: 600; }

/* Recibo de pago: el sello va a la izquierda del saldo (no encima del concepto). */
.doc-recibo .doc-suma { position: relative; }
.doc-recibo .doc-sello { top: auto; right: auto; left: 0; bottom: 4mm; position: absolute; }
.doc-recibo .doc-suma .doc-sello { position: absolute; }
.doc-saldada { font-family: Montserrat, Arial, sans-serif; font-size: 13pt; font-weight: 700; color: #2B8457; }

/* ================= Factura y recibo · formato Ikusa (oct-2026) =================
   Fondo tinta de la marca, título enorme con la tecla imán, tabla a la izquierda y los datos (Ikusa,
   cliente, proyecto, pago) en una columna a la derecha; total en una barra azul Ikusa; ondas finas de fondo. */
.doc.fx {
  --fx-fondo: #15131D; --fx-texto: #F1F2F5; --fx-suave: #A9A7B4; --fx-linea: rgba(255, 255, 255, .16);
  --fx-azul: #3E76BB; --fx-celeste: #719ED3; --fx-naranja: #EF6B36; --fx-rojo: #E24126; --fx-verde: #4CC38A;
  background: var(--fx-fondo); color: var(--fx-texto); overflow: hidden; padding: 14mm 15mm 10mm;
  font: 9.5pt/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.fx::before { content: ""; position: absolute; inset: 0 0 auto; height: 3mm; background: linear-gradient(90deg, var(--fx-naranja) 0 33%, var(--fx-celeste) 33% 100%); }
.fx-ondas { position: absolute; left: -12mm; bottom: -6mm; width: 150mm; color: rgba(255, 255, 255, .07); pointer-events: none; }
.fx-ondas svg { width: 100%; height: auto; display: block; }
.fx > * { position: relative; }
.fx > .fx-ondas, .fx > .fx-sello { position: absolute; }

.fx-top { display: flex; justify-content: space-between; align-items: center; gap: 8mm; }
.fx-logo { width: 46mm; height: auto; display: block; }
.fx-meta { display: flex; gap: 8mm; margin: 0; }
.fx-meta div { display: grid; gap: .5mm; text-align: right; }
.fx-meta dt { font-size: 6.8pt; letter-spacing: .16em; text-transform: uppercase; color: var(--fx-suave); }
.fx-meta dd { margin: 0; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9pt; color: #fff; }
.fx-meta div:first-child dd { color: var(--fx-naranja); font-weight: 600; }

.fx-heroe { display: flex; justify-content: space-between; align-items: center; margin: 12mm 0 10mm; }
.fx-heroe h1 { font-family: Montserrat, Arial, sans-serif; font-weight: 800; font-size: 54pt; line-height: .9; letter-spacing: -.02em; text-transform: uppercase; margin: 0; color: #fff; }
.fx-teclas { display: flex; align-items: center; gap: 5mm; }
.fx-teclas img { width: 21mm; height: auto; filter: drop-shadow(0 3mm 4mm rgba(0, 0, 0, .45)); transform: rotate(-8deg); }
.fx-pill { display: inline-block; padding: 1.6mm 3.6mm; border-radius: 99px; background: var(--fx-rojo); color: #fff; font-size: 7pt; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.fx-pill.verde { background: var(--fx-verde); color: #0E2A1D; }
.fx-pill.gris { background: #5B5966; }

.fx-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 58mm; gap: 9mm; align-items: start; }
.fx-tabla { width: 100%; border-collapse: collapse; }
.fx-tabla th { font-size: 8pt; font-weight: 700; text-align: left; padding: 0 0 2.5mm; border-bottom: 1.5px solid rgba(255, 255, 255, .7); color: #fff; }
.fx-tabla td { padding: 4mm 0; border-bottom: 1px solid var(--fx-linea); vertical-align: top; }
.fx-tabla th + th, .fx-tabla td + td { padding-left: 4mm; }
.fx-tabla .der { text-align: right; white-space: nowrap; }
.fx-tabla .cant { width: 9mm; color: var(--fx-suave); }
.fx-tabla td strong { font-size: 10pt; color: #fff; }
.fx-tabla ul { list-style: none; margin: 1.5mm 0 0; padding: 0; color: var(--fx-suave); font-size: 8.3pt; }
.fx-tabla li { padding-left: 3.5mm; position: relative; }
.fx-tabla li::before { content: "–"; position: absolute; left: 0; color: var(--fx-celeste); }
.fx-tabla .fx-desc td, .fx-tabla .fx-desc td strong { color: var(--fx-naranja); }
.fx .num { font-family: "IBM Plex Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; }

.fx-totales { display: grid; gap: 1.6mm; margin: 6mm 0 0 auto; width: 78mm; }
.fx-totales > div { display: flex; justify-content: space-between; gap: 6mm; color: var(--fx-suave); }
.fx-totales > div .num { color: #fff; }
.fx-totales > .rojo, .fx-totales > .rojo .num { color: var(--fx-naranja); }
.fx-total { margin-top: 2mm; padding: 3mm 4mm; border-radius: 1.5mm; background: var(--fx-azul); color: #fff !important; align-items: center; }
.fx-total span { font-weight: 700; font-size: 11pt; }
.fx-total small { font-size: 6.8pt; font-weight: 600; letter-spacing: .12em; margin-left: 2mm; opacity: .75; }
.fx-total strong { font-size: 15pt; font-weight: 600; }
.fx-total.verde { background: var(--fx-verde); color: #0E2A1D !important; }
.fx-total.verde .num { color: #0E2A1D !important; }
.fx-ahorro { text-align: right; color: var(--fx-naranja); font-size: 8pt; font-weight: 700; margin: 1mm 0 0; }

.fx-lado { display: grid; gap: 7mm; text-align: right; font-size: 8.3pt; color: var(--fx-suave); }
.fx-lado > div { display: grid; gap: .6mm; }
.fx-contacto strong { color: #fff; font-size: 9pt; }
.fx-pre { white-space: pre-line; }
.fx-eti { font-size: 7pt; letter-spacing: .16em; text-transform: uppercase; color: var(--fx-suave); margin-bottom: 1mm; }
.fx-bloque > strong { font-family: Montserrat, Arial, sans-serif; font-size: 11pt; font-weight: 700; color: var(--fx-celeste); line-height: 1.25; }
.fx-bloque .fx-nombre { color: var(--fx-naranja); }
.fx-pago b { color: #fff; font-weight: 700; }
.fx-pago .fx-ref { margin-top: 1mm; font-size: 7.6pt; }

.fx-nota { margin: 8mm 0 0; color: #fff; font-weight: 600; }
.fx-cierre { display: grid; grid-template-columns: minmax(0, 1fr) 70mm; gap: 10mm; align-items: end; margin-top: auto; padding-top: 10mm; }
.fx-cierre.solo { grid-template-columns: minmax(0, 1fr); justify-items: end; }
.fx-terminos .fx-eti { color: var(--fx-naranja); font-weight: 700; font-size: 8pt; letter-spacing: .04em; text-transform: none; font-family: Montserrat, Arial, sans-serif; }
.fx-terminos ol { margin: 1.5mm 0 0; padding-left: 4mm; columns: 2; column-gap: 8mm; font-size: 7.4pt; color: var(--fx-suave); }
.fx-terminos li { break-inside: avoid; margin-bottom: 1mm; }
.fx-gracias { margin: 0; text-align: right; font-family: Montserrat, Arial, sans-serif; font-size: 20pt; font-weight: 800; line-height: 1.1; color: #fff; }
.fx-pie { display: flex; justify-content: space-between; margin-top: 8mm; padding-top: 3mm; border-top: 1px solid var(--fx-linea); font-size: 6.8pt; letter-spacing: .14em; text-transform: uppercase; color: var(--fx-suave); }
.fx-sello { position: absolute; right: 70mm; top: 44mm; transform: rotate(-10deg); border: 2.5px solid var(--fx-verde); color: var(--fx-verde); font-family: Montserrat, Arial, sans-serif; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; padding: 1.5mm 5mm; border-radius: 2mm; font-size: 14pt; opacity: .9; }
@media print { .doc.fx { box-shadow: none; } }

/* --- Diagramación v2: todo en una columna ordenada (partes → tabla → pago | totales → términos → pie) --- */
.doc.fx { padding: 13mm 15mm 9mm; }
.fx-top { align-items: flex-start; }
.fx-id { display: grid; gap: 2.5mm; }
.fx-id p { margin: 0; font-size: 7.6pt; line-height: 1.45; color: var(--fx-suave); }
.fx-id p b { color: #fff; font-weight: 700; }
.fx-meta { padding-top: 1mm; }
.fx-heroe { margin: 9mm 0 7mm; }
.fx-heroe h1 { font-size: 48pt; }
.fx-teclas img { width: 18mm; }

.fx-partes { display: grid; grid-template-columns: 1fr 1fr; gap: 5mm; margin-bottom: 7mm; }
.fx-caja { display: grid; gap: .8mm; align-content: start; padding: 4mm 5mm; border-radius: 2mm; background: rgba(255, 255, 255, .045); border: 1px solid var(--fx-linea); font-size: 8.4pt; color: var(--fx-suave); }
.fx-caja .fx-eti { margin-bottom: 1mm; }
.fx-caja strong { font-family: Montserrat, Arial, sans-serif; font-size: 11pt; font-weight: 700; color: #fff; line-height: 1.25; }
.fx-caja:first-child strong { color: var(--fx-naranja); }
.fx-caja:last-child strong { color: var(--fx-celeste); }
.fx-caja span:empty { display: none; }

.fx-tabla th { border-bottom-color: rgba(255, 255, 255, .55); }
.fx-tabla td { padding: 3.2mm 0; }

.fx-resumen { display: grid; grid-template-columns: minmax(0, 1fr) 78mm; gap: 10mm; align-items: start; margin-top: 6mm; }
.fx-resumen .fx-totales { margin: 0; width: auto; }
.fx-pago { font-size: 8.3pt; color: var(--fx-suave); display: grid; gap: 1.5mm; }
.fx-pago dl { margin: 0; display: grid; gap: 1.2mm; }
.fx-pago dl div { display: grid; grid-template-columns: 26mm minmax(0, 1fr); gap: 3mm; }
.fx-pago dt { color: #fff; font-weight: 700; }
.fx-pago dd { margin: 0; overflow-wrap: anywhere; }
.fx-pago p { margin: 1mm 0 0; font-size: 7.6pt; }

.fx-terminos { margin-top: 8mm; padding-top: 5mm; border-top: 1px solid var(--fx-linea); }
.fx-terminos .fx-eti { color: var(--fx-naranja); font-weight: 700; font-size: 8pt; letter-spacing: .04em; text-transform: none; font-family: Montserrat, Arial, sans-serif; }
.fx-terminos ol { margin: 2mm 0 0; padding-left: 4mm; columns: 2; column-gap: 9mm; font-size: 7.4pt; color: var(--fx-suave); }
.fx-nota { margin: 5mm 0 0; color: #fff; font-weight: 600; font-size: 9pt; }
.fx-pie { margin-top: auto; padding-top: 4mm; align-items: baseline; }
.fx-pie .fx-gracias { font-family: Montserrat, Arial, sans-serif; font-size: 11pt; font-weight: 800; letter-spacing: 0; text-transform: none; color: #fff; text-align: left; }
.doc.fx > .fx-pie { margin-top: auto; }
.fx-ondas { left: auto; right: -20mm; bottom: -10mm; width: 130mm; }
.fx-meta { gap: 7mm; flex: none; }
.fx-meta dd { white-space: nowrap; }
.fx-id p { max-width: 95mm; }
.fx-heroe .fx-pill { font-size: 7.6pt; padding: 2mm 4.5mm; }

/* ===== Documentos «dx» (oct-2026): minimalista y tecnológico, en sintonía con la app =====
   Retícula de puntos arriba, datos en IBM Plex Mono, títulos en Montserrat, líneas finas y color solo para el estado.
   Tema «oscuro» (como la app) y «claro» (papel). */
.doc.dx {
  --dx-fondo: #0F0E14; --dx-tinta: #ECEAF2; --dx-suave: #9A97A6; --dx-tenue: #6E6B7A; --dx-linea: rgba(255, 255, 255, .09); --dx-panel: #17161F;
  --dx-naranja: #F07A4F; --dx-verde: #3DD68C; --dx-punto: rgba(255, 255, 255, .07);
  background: var(--dx-fondo); color: var(--dx-tinta); padding: 14mm 15mm 10mm; gap: 0;
  font: 9.4pt/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.doc.dx.claro {
  --dx-fondo: #FFFFFF; --dx-tinta: #121118; --dx-suave: #5F5C6B; --dx-tenue: #8D8A98; --dx-linea: #E6E5EB; --dx-panel: #F5F5F8;
  --dx-naranja: #D9512A; --dx-verde: #1F9D5C; --dx-punto: rgba(18, 17, 24, .09);
}
.doc.dx::before { content: ""; position: absolute; inset: 0 0 auto; height: 78mm; pointer-events: none;
  background-image: radial-gradient(var(--dx-punto) .9px, transparent 1.2px); background-size: 4mm 4mm;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent); }
.doc.dx > * { position: relative; }
.dx .num, .dx-eti, .dx-dato span, .dx-tabla th, .dx-estado { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; }
.dx .num { font-variant-numeric: tabular-nums; }
.dx-eti { display: block; font-size: 6.8pt; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--dx-tenue); margin-bottom: 1.6mm; }

.dx-cab { display: flex; align-items: center; justify-content: space-between; gap: 8mm; }
.dx-logo { height: 7mm; width: auto; display: block; }
.dx-estado { display: inline-flex; align-items: center; gap: 2mm; padding: 1.4mm 3mm; border-radius: 99px; font-size: 7pt; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dx-suave); border: 1px solid var(--dx-linea); background: var(--dx-panel); }
.dx-estado i { width: 1.8mm; height: 1.8mm; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 .8mm color-mix(in srgb, currentColor 22%, transparent); }
.dx-estado.naranja { color: var(--dx-naranja); border-color: color-mix(in srgb, var(--dx-naranja) 35%, transparent); }
.dx-estado.verde { color: var(--dx-verde); border-color: color-mix(in srgb, var(--dx-verde) 35%, transparent); }

.dx-titulo { display: flex; align-items: flex-end; justify-content: space-between; gap: 10mm; margin: 16mm 0 9mm; padding-bottom: 6mm; border-bottom: 1px solid var(--dx-linea); }
.dx-titulo h1 { margin: 0; font-family: Montserrat, "Helvetica Neue", Arial, sans-serif; font-weight: 300; font-size: 30pt; line-height: 1; letter-spacing: -.03em; }
.dx-datos { display: flex; gap: 7mm; }
.dx-dato { display: grid; gap: .8mm; text-align: right; }
.dx-dato span { font-size: 6.6pt; letter-spacing: .14em; text-transform: uppercase; color: var(--dx-tenue); }
.dx-dato strong { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9pt; font-weight: 500; white-space: nowrap; }
.dx-dato.fuerte strong { color: var(--dx-naranja); font-weight: 600; }

.dx-partes { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8mm; margin-bottom: 10mm; }
.dx-col { display: grid; gap: .6mm; align-content: start; font-size: 8.4pt; color: var(--dx-suave); min-width: 0; }
.dx-col strong { color: var(--dx-tinta); font-size: 9.6pt; font-weight: 600; margin-bottom: .6mm; }
.dx-col span:not(.dx-eti) { overflow-wrap: anywhere; }

.dx-tabla { width: 100%; border-collapse: collapse; margin-bottom: 8mm; }
.dx-tabla th { font-size: 6.8pt; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--dx-tenue); text-align: left; padding: 0 0 2.4mm; border-bottom: 1px solid var(--dx-tinta); }
.dx-tabla td { padding: 3.4mm 0; border-bottom: 1px solid var(--dx-linea); vertical-align: top; }
.dx-tabla td + td, .dx-tabla th + th { padding-left: 4mm; }
.dx-tabla .der { text-align: right; white-space: nowrap; }
.dx-tabla .dx-n { width: 7mm; color: var(--dx-tenue); font-size: 8pt; }
.dx-tabla td strong { font-weight: 600; font-size: 9.6pt; }
.dx-tabla ul { margin: 1.4mm 0 0; padding: 0; list-style: none; color: var(--dx-suave); font-size: 8.2pt; display: grid; gap: .5mm; }
.dx-tabla li::before { content: "—  "; color: var(--dx-tenue); }
.dx-tabla tr.dx-menos td:not(.dx-n) { color: var(--dx-naranja); }
.dx-tabla tr { break-inside: avoid; }

.dx-resumen { display: grid; grid-template-columns: 1fr 74mm; gap: 12mm; align-items: start; margin-bottom: 9mm; break-inside: avoid; }
.dx-pago dl { margin: 0; display: grid; gap: 1.6mm; }
.dx-pago dl > div { display: grid; grid-template-columns: 22mm 1fr; gap: 3mm; font-size: 8.6pt; }
.dx-pago dt { font-weight: 600; }
.dx-pago dd { margin: 0; color: var(--dx-suave); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 8pt; overflow-wrap: anywhere; }
.dx-pago p { margin: 3mm 0 0; font-size: 7.6pt; color: var(--dx-tenue); }
.dx-totales { display: grid; gap: 1.8mm; }
.dx-fila { display: flex; justify-content: space-between; gap: 6mm; font-size: 8.8pt; color: var(--dx-suave); }
.dx-fila .num { color: var(--dx-tinta); }
.dx-fila.menos, .dx-fila.menos .num { color: var(--dx-naranja); }
.dx-total { display: flex; align-items: baseline; justify-content: space-between; gap: 6mm; margin-top: 2.4mm; padding-top: 3.4mm; border-top: 1px solid var(--dx-tinta); }
.dx-total > span { font-family: Montserrat, "Helvetica Neue", Arial, sans-serif; font-weight: 600; font-size: 10pt; }
.dx-total small { margin-left: 2mm; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 7pt; font-weight: 500; letter-spacing: .1em; color: var(--dx-tenue); }
.dx-total strong { font-size: 20pt; font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.dx-total.verde strong { color: var(--dx-verde); }
.dx-ahorro { margin: 1.6mm 0 0; font-size: 7.6pt; color: var(--dx-verde); text-align: right; }

.dx-terminos { padding-top: 5mm; border-top: 1px solid var(--dx-linea); break-inside: avoid; }
.dx-terminos ol { margin: 0; padding-left: 4.5mm; display: grid; gap: .8mm; font-size: 8pt; color: var(--dx-suave); }
.dx-nota { margin: 6mm 0 0; font-size: 8.4pt; color: var(--dx-suave); }

.dx-recibido { display: grid; grid-template-columns: auto 1fr; gap: 12mm; align-items: end; padding: 7mm 8mm; margin-bottom: 9mm; border-radius: 3mm; background: var(--dx-panel); border: 1px solid var(--dx-linea); }
.dx-recibido strong { display: block; font-size: 26pt; font-weight: 500; letter-spacing: -.02em; line-height: 1; color: var(--dx-verde); }
.dx-avance { display: grid; gap: 2.6mm; }
.dx-avance-barra { display: flex; height: 2mm; border-radius: 99px; overflow: hidden; background: var(--dx-linea); }
.dx-avance-barra .antes { background: color-mix(in srgb, var(--dx-verde) 45%, transparent); }
.dx-avance-barra .este { background: var(--dx-verde); }
.dx-avance-ley { display: flex; flex-wrap: wrap; gap: 2mm 6mm; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 7.4pt; color: var(--dx-suave); }
.dx-avance-ley span { display: inline-flex; align-items: center; gap: 1.6mm; }
.dx-avance-ley i { width: 2mm; height: 2mm; border-radius: 50%; }
.dx-avance-ley i.antes { background: color-mix(in srgb, var(--dx-verde) 45%, transparent); }
.dx-avance-ley i.este { background: var(--dx-verde); }
.dx-avance-ley i.falta { background: var(--dx-linea); border: 1px solid var(--dx-tenue); }

.dx-pie { margin-top: auto; padding-top: 5mm; display: flex; justify-content: space-between; gap: 8mm; border-top: 1px solid var(--dx-linea); font-size: 7.4pt; color: var(--dx-tenue); }
.dx-pie .num { font-size: 7pt; letter-spacing: .04em; }
@media print { .doc.dx { box-shadow: none; } }
.dx-avance-ley .dx-listo { color: var(--dx-verde); font-weight: 600; }

/* Acento de marca: un solo degradado continuo del rojo de la tecla al azul del logo (el del trazo bajo el título),
   como franja solo dos veces: arriba de la hoja y la barrita del pie (y el trazo corto bajo el título). */
.doc.dx { --dx-espectro: linear-gradient(90deg, #E24126, #EF6B36 45%, #7BA0D1 75%, #3E76BB); }
.doc.dx::after { content: ""; position: absolute; inset: 0 0 auto; height: 1.6mm; background: var(--dx-espectro); }
.dx-titulo { position: relative; }
.dx-titulo::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 38mm; height: 2px; border-radius: 2px; background: var(--dx-espectro); }
.dx-pie { position: relative; }
.dx-pie > span:first-child { display: inline-flex; align-items: center; gap: 2.4mm; }
.dx-pie > span:first-child::before { content: ""; width: 9mm; height: 1.4mm; border-radius: 1mm; background: var(--dx-espectro); }

/* Tarjetas como en la app (sin recargar): De / Para / Proyecto, Pago y Totales van en tarjetas con fondo suave y
   borde fino; la tabla y los términos quedan abiertos. */
.dx-partes { gap: 4mm; }
.dx-col, .dx-pago, .dx-totales { padding: 4.6mm 5mm; border-radius: 3mm; background: var(--dx-panel); border: 1px solid var(--dx-linea); }
.dx-resumen { gap: 4mm; grid-template-columns: 1fr 80mm; align-items: stretch; }
.dx-totales { gap: 2mm; }
.dx-total { margin-top: 2mm; padding-top: 3.4mm; border-top: 1px solid var(--dx-linea); }
.dx-col .dx-eti, .dx-pago .dx-eti { margin-bottom: 2.2mm; }
.dx-titulo { margin-bottom: 8mm; }
.dx-total > span, .dx-total strong { white-space: nowrap; }
.dx-total.largo strong { font-size: 15pt; }
.dx-resumen { grid-template-columns: minmax(0, 1fr) auto; }
.dx-totales { min-width: 80mm; }
.dx-fila .num { white-space: nowrap; }

/* Resumen de servicios */
.dx-pill { display: inline-block; padding: .8mm 2.4mm; border-radius: 99px; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 6.4pt; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.dx-pill.verde { --c: var(--dx-verde); } .dx-pill.naranja { --c: var(--dx-naranja); } .dx-pill.rojo { --c: #FF6B5E; }
.dx-pill.azul { --c: #7BA0D1; } .dx-pill.ambar { --c: #E8B04B; } .dx-pill.gris { --c: var(--dx-suave); }
.doc.dx.claro .dx-pill.rojo { --c: #D23B26; } .doc.dx.claro .dx-pill.azul { --c: #3E76BB; } .doc.dx.claro .dx-pill.ambar { --c: #B7801B; }
.dx-res-sec { margin-bottom: 7mm; break-inside: auto; }
.dx-res-cab { display: flex; align-items: baseline; gap: 3mm; margin-bottom: 2.4mm; }
.dx-res-cab h2 { margin: 0; font-family: Montserrat, "Helvetica Neue", Arial, sans-serif; font-size: 11pt; font-weight: 600; }
.dx-res-cab span { font-size: 7.6pt; color: var(--dx-tenue); }
.dx-tabla.dx-res { margin-bottom: 0; }
.dx-res td { padding: 2.6mm 0; }
.dx-res-det { display: block; margin-top: .6mm; font-size: 7.8pt; color: var(--dx-suave); }
.dx-res-num { display: block; margin-top: .6mm; font-size: 6.8pt; color: var(--dx-tenue); }
.dx-res td small { display: block; font-size: 6.6pt; color: var(--dx-tenue); }
.dx-res-sub { display: flex; justify-content: flex-end; align-items: baseline; gap: 6mm; padding-top: 2.4mm; font-size: 8.6pt; color: var(--dx-suave); }
.dx-res-sub strong { color: var(--dx-tinta); font-size: 10pt; font-weight: 500; }
.dx-res-cifras { gap: 2mm; }
.dx-res-cifras > div { display: flex; justify-content: space-between; gap: 4mm; font-size: 8.4pt; }
.dx-res-cifras strong { margin: 0; font-size: 9.6pt; font-weight: 600; white-space: nowrap; }
.dx-res-cifras .verde { color: var(--dx-verde); } .dx-res-cifras .naranja { color: var(--dx-naranja); }
.dx-res-pagos > div { grid-template-columns: 22mm 1fr auto !important; }
.dx-res-pagos dt { font-weight: 500; font-size: 8pt; color: var(--dx-suave); }
.dx-res-monto { color: var(--dx-tinta) !important; text-align: right; }
.dx-resumen-doc .dx-titulo h1 { font-size: 24pt; white-space: nowrap; }
.dx-res-pagos > div { grid-template-columns: 30mm 1fr auto !important; } .dx-res-pagos dt { white-space: nowrap; }

/* ===== Propuestas formales (pf): varias páginas A4 en el lenguaje «dx» ===== */
.doc.dx.pf { --pf-naranja: #F07A4F; --pf-azul: #7BA0D1; --pf-azul2: #3E76BB; height: 297mm; min-height: 297mm; overflow: hidden; break-after: page; padding: 13mm 15mm 10mm; }
.doc.dx.pf.claro { --pf-naranja: #D9512A; --pf-azul: #3E76BB; }
.doc.dx.pf + .doc.dx.pf { margin-top: 10mm; }
@media print { .doc.dx.pf + .doc.dx.pf { margin-top: 0; } }
.pf-cab { display: flex; align-items: center; justify-content: space-between; }
.pf-pag { font-size: 8pt; letter-spacing: .12em; color: var(--dx-tenue); }
.pf-eti { display: block; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 7pt; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--dx-tenue); margin-bottom: 3mm; }
.pf-eti.naranja, .pf-portada > .pf-eti { color: var(--pf-naranja); }
.pf-trazo { display: block; width: 26mm; height: 2px; margin-top: 4mm; border-radius: 2px; background: var(--dx-espectro); }
.pf-titulo { margin: 12mm 0 7mm; }
.pf-titulo h2 { margin: 0; font-family: Montserrat, "Helvetica Neue", Arial, sans-serif; font-size: 22pt; font-weight: 600; line-height: 1.12; letter-spacing: -.02em; }
.pf-cuerpo { display: grid; gap: 5mm; align-content: start; }
.pf-bloque { display: grid; gap: 3mm; min-width: 0; }
.dx .pf-cuerpo p, .pf-portada p { margin: 0; }
.pf-texto p + p, .pf-tarjeta p + p { margin-top: 2mm; }
.pf strong { font-weight: 600; color: var(--dx-tinta); }
.pf-azul { color: var(--pf-azul) !important; }
.pf-chico { font-size: 7.6pt; color: var(--dx-tenue); margin-top: 2mm !important; }
.pf-pie-bloque { font-size: 8pt; color: var(--dx-tenue); }

/* Portada */
.pf-portada { margin-top: 34mm; display: grid; gap: 0; }
.pf-gran { margin: 0; font-family: Montserrat, "Helvetica Neue", Arial, sans-serif; font-size: 40pt; font-weight: 600; line-height: 1.04; letter-spacing: -.03em; }
.pf-lead { margin-top: 7mm !important; font-family: Montserrat, "Helvetica Neue", Arial, sans-serif; font-size: 13pt; font-weight: 500; line-height: 1.35; color: var(--dx-tinta); max-width: 150mm; }
.pf-portada .pf-texto { margin-top: 4mm; font-size: 10.5pt; line-height: 1.55; color: var(--dx-suave); max-width: 150mm; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 2mm; margin-top: 7mm; }
.pf-chip { padding: 1.4mm 3.2mm; border-radius: 99px; font-size: 8pt; font-weight: 600; border: 1px solid var(--dx-linea); color: var(--dx-suave); }
.pf-chip.c0 { color: var(--pf-naranja); border-color: color-mix(in srgb, var(--pf-naranja) 40%, transparent); background: color-mix(in srgb, var(--pf-naranja) 10%, transparent); }
.pf-chip.c1 { color: var(--pf-azul); border-color: color-mix(in srgb, var(--pf-azul) 40%, transparent); background: color-mix(in srgb, var(--pf-azul) 10%, transparent); }
.pf-portada-pie { display: grid; gap: 1mm; margin-top: 60mm; font-size: 8.6pt; color: var(--dx-suave); }

/* Tarjetas */
.pf-tarjeta { padding: 5mm; border-radius: 3mm; background: var(--dx-panel); border: 1px solid var(--dx-linea); font-size: 9pt; line-height: 1.5; color: var(--dx-suave); min-width: 0; }
.pf-tarjeta > strong { display: block; margin-bottom: 1.6mm; font-size: 10pt; }
.pf-tarjetas { display: grid; gap: 3mm; }
.pf-tarjetas.n2 { grid-template-columns: 1fr 1fr; } .pf-tarjetas.n3 { grid-template-columns: repeat(3, 1fr); }
.pf-tarjetas .pf-tarjeta > strong { color: var(--pf-azul); }
.pf-dos { grid-template-columns: 1fr 1fr; }

/* Hallazgos */
.pf-hallazgos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4mm; }
.pf-hallazgos li { display: grid; grid-template-columns: 11mm 1fr; gap: 3mm; font-size: 9.2pt; line-height: 1.5; color: var(--dx-suave); }
.pf-hallazgos li > div > strong { display: block; margin-bottom: 1mm; font-size: 10.2pt; font-family: Montserrat, "Helvetica Neue", Arial, sans-serif; }
.pf-num { display: grid; place-items: center; width: 9mm; height: 9mm; border-radius: 50%; font-family: "IBM Plex Mono", monospace; font-size: 8pt; font-weight: 600; color: var(--pf-azul); border: 1px solid color-mix(in srgb, var(--pf-azul) 45%, transparent); background: color-mix(in srgb, var(--pf-azul) 12%, transparent); }

/* Nota */
.pf-nota { padding: 4.5mm 5mm; border-radius: 3mm; font-size: 9.2pt; line-height: 1.5; color: var(--dx-tinta); border: 1px solid; }
.pf-nota.azul { background: color-mix(in srgb, var(--pf-azul) 12%, transparent); border-color: color-mix(in srgb, var(--pf-azul) 30%, transparent); }
.pf-nota.naranja { background: color-mix(in srgb, var(--pf-naranja) 12%, transparent); border-color: color-mix(in srgb, var(--pf-naranja) 32%, transparent); box-shadow: inset 3px 0 0 var(--pf-naranja); }
.pf-nota.neutro { background: var(--dx-panel); border-color: var(--dx-linea); }

/* Cifras */
.pf-cifras { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3mm; }
.pf-cifra { padding: 4mm 4.5mm; border-radius: 3mm; background: var(--dx-panel); border: 1px solid var(--dx-linea); display: grid; gap: 1mm; }
.pf-cifra strong { font-family: Montserrat, "Helvetica Neue", Arial, sans-serif; font-size: 22pt; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.pf-cifra span { font-family: "IBM Plex Mono", monospace; font-size: 6.8pt; letter-spacing: .14em; text-transform: uppercase; color: var(--dx-tenue); }
.pf-cifra.a { background: color-mix(in srgb, var(--pf-azul2) 85%, var(--dx-panel)); border-color: transparent; } .pf-cifra.a strong, .pf-cifra.a span { color: #fff; }
.pf-cifra.b { background: color-mix(in srgb, var(--pf-naranja) 88%, var(--dx-panel)); border-color: transparent; } .pf-cifra.b strong, .pf-cifra.b span { color: #fff; }

/* Checks */
.pf-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; }
.pf-checks ul, .pf-puntos { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.8mm; }
.pf-checks li { position: relative; padding-left: 5.5mm; }
.pf-checks li::before { content: "✓"; position: absolute; left: 0; color: var(--dx-verde); font-weight: 700; }
.pf-puntos li { position: relative; padding-left: 4mm; }
.pf-puntos li::before { content: ""; position: absolute; left: 0; top: .62em; width: 1.6mm; height: 1.6mm; border-radius: 50%; background: var(--dx-tenue); }

/* Barras */
.pf-barras { display: grid; gap: 3.5mm; }
.pf-barra { display: grid; grid-template-columns: 62mm 1fr; gap: 4mm; align-items: center; }
.pf-barra-nombre { display: grid; } .pf-barra-nombre strong { font-size: 10pt; } .pf-barra-nombre span { font-size: 7.6pt; color: var(--dx-tenue); }
.pf-barra-pista { display: flex; align-items: center; gap: 3mm; } .pf-barra-pista span { height: 7mm; border-radius: 1.6mm; } .pf-barra-pista b { font-family: "IBM Plex Mono", monospace; font-size: 10pt; }
.pf-barra.tu .pf-barra-nombre strong { color: var(--pf-naranja); }

/* Feed */
.pf-feed-caja { display: grid; gap: 3mm; }
.pf-feed { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4mm; }
.pf-pieza { position: relative; height: 19mm; padding: 2.6mm 3mm; border-radius: 2mm; background: color-mix(in srgb, var(--dx-fondo) 55%, var(--dx-panel)); border: 1px solid var(--dx-linea); box-shadow: inset 0 2px 0 var(--c); overflow: hidden; }
.pf-formato { display: inline-block; padding: .4mm 2mm; border-radius: 99px; font-family: "IBM Plex Mono", monospace; font-size: 5.8pt; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.pf-muestra { position: absolute; top: 0; right: 0; padding: .6mm 2mm; border-radius: 0 0 0 1.6mm; font-family: "IBM Plex Mono", monospace; font-size: 5.4pt; letter-spacing: .12em; text-transform: uppercase; color: var(--dx-fondo); background: var(--dx-tinta); }
.pf-pieza p { margin-top: 1.6mm !important; font-size: 7.6pt; line-height: 1.3; color: var(--dx-tinta); }
.pf-pieza i { display: grid; gap: 1.2mm; margin-top: 2.4mm; } .pf-pieza i b { display: block; height: 1.2mm; border-radius: 1mm; background: var(--dx-linea); } .pf-pieza i b:nth-child(2) { width: 75%; } .pf-pieza i b:nth-child(3) { width: 50%; }
.pf-leyenda { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2mm 6mm; padding: 4mm 5mm; }
.pf-leyenda > div { display: flex; align-items: center; gap: 2mm; font-size: 8.4pt; } .pf-leyenda i { width: 2.6mm; height: 2.6mm; border-radius: .6mm; flex: none; } .pf-leyenda span { flex: 1; } .pf-leyenda b { font-family: "IBM Plex Mono", monospace; color: var(--pf-azul); }

/* Pilares */
.pf-pilares { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; }
.pf-pilar { padding: 4mm 4.5mm; border-radius: 3mm; background: var(--dx-panel); border: 1px solid var(--dx-linea); display: grid; gap: 2mm; font-size: 8.6pt; color: var(--dx-suave); }
.pf-pilar-cab { display: flex; justify-content: space-between; align-items: baseline; } .pf-pilar-cab strong { font-size: 10pt; } .pf-pilar-cab b { font-family: "IBM Plex Mono", monospace; font-size: 12pt; color: var(--c); }
.pf-pilar-pista { height: 1.6mm; border-radius: 99px; background: var(--dx-linea); overflow: hidden; } .pf-pilar-pista span { display: block; height: 100%; background: var(--c); }

/* Pasos */
.pf-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3mm; counter-reset: paso; }
.pf-pasos li { position: relative; padding: 5mm 4.5mm 4.5mm; border-radius: 3mm; background: var(--dx-panel); border: 1px solid var(--dx-linea); display: grid; gap: 1.6mm; align-content: start; font-size: 8.6pt; color: var(--dx-suave); }
.pf-pasos li::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; border-radius: 3mm 3mm 0 0; background: var(--dx-espectro); }
.pf-cuando { font-family: "IBM Plex Mono", monospace; font-size: 7pt; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pf-naranja); }
.pf-pasos strong { font-size: 10.5pt; font-family: Montserrat, "Helvetica Neue", Arial, sans-serif; }

/* Fechas */
.pf-fechas { display: grid; gap: 0; padding: 1mm 5mm; }
.pf-fechas > div { display: grid; grid-template-columns: 26mm 1fr; gap: 4mm; padding: 3.2mm 0; border-top: 1px solid var(--dx-linea); } .pf-fechas > div:first-child { border-top: 0; }
.pf-fechas strong { color: var(--pf-naranja); font-size: 9pt; }

/* Inversión */
.pf-inversion { display: grid; }
.pf-linea { display: grid; grid-template-columns: 1fr auto; gap: 8mm; align-items: start; padding: 5mm 0; border-top: 1px solid var(--dx-linea); } .pf-linea:first-child { border-top: 0; padding-top: 0; }
.pf-linea > div:first-child strong { display: block; font-size: 11.5pt; font-family: Montserrat, "Helvetica Neue", Arial, sans-serif; margin-bottom: 1.4mm; }
.pf-linea > div:first-child p { font-size: 8.8pt; line-height: 1.5; color: var(--dx-suave); max-width: 120mm; }
.pf-precio { display: grid; justify-items: end; gap: 1mm; text-align: right; } .pf-precio strong { font-size: 24pt; font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.pf-precio span { font-family: "IBM Plex Mono", monospace; font-size: 6.8pt; letter-spacing: .14em; text-transform: uppercase; color: var(--dx-tenue); }

/* Cierre y aceptación */
.pf-siguiente { font-size: 9.6pt; color: var(--dx-tinta); }
.pf-aceptacion { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4mm; padding: 5mm; border-radius: 3mm; border: 1px dashed color-mix(in srgb, var(--pf-naranja) 55%, transparent); background: color-mix(in srgb, var(--pf-naranja) 7%, transparent); font-size: 8.8pt; color: var(--dx-suave); }
.pf-aceptacion > div:nth-child(2) { display: grid; gap: .6mm; } .pf-aceptacion > div:nth-child(2) strong { font-size: 10.5pt; }
.pf-aceptacion.hecha { border-style: solid; border-color: color-mix(in srgb, var(--dx-verde) 45%, transparent); background: color-mix(in srgb, var(--dx-verde) 9%, transparent); }
.pf-sello { display: grid; place-items: center; width: 10mm; height: 10mm; border-radius: 50%; font-weight: 700; color: var(--pf-naranja); background: color-mix(in srgb, var(--pf-naranja) 16%, transparent); }
.pf-aceptacion.hecha .pf-sello { color: var(--dx-verde); background: color-mix(in srgb, var(--dx-verde) 16%, transparent); }
.pf-firma { display: grid; justify-items: end; gap: .6mm; text-align: right; padding-left: 5mm; border-left: 1px solid var(--dx-linea); } .pf-firma span { font-family: "IBM Plex Mono", monospace; font-size: 6.6pt; letter-spacing: .14em; text-transform: uppercase; color: var(--dx-tenue); }
/* Bloques automáticos de la propuesta formal */
.pf-serv-linea { font-family: "IBM Plex Mono", monospace; font-size: 6.4pt; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pf-azul); }
.pf-serv { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; }
.pf-serv-item { display: grid; gap: 2mm; align-content: start; }
.pf-serv-item.opcional { border-style: dashed; }
.pf-serv-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 3mm; }
.pf-serv-nombre { font-size: 10.5pt; color: var(--dx-tinta); font-family: Montserrat, "Helvetica Neue", Arial, sans-serif; font-weight: 600; }
.pf-codigo { font-size: 6.6pt; color: var(--dx-tenue); letter-spacing: .08em; }
.pf-opc { font-size: 6.4pt; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .5mm 2mm; border-radius: 99px; border: 1px dashed var(--dx-linea); color: var(--dx-suave); }
.pf-checks-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2mm; font-size: 8.4pt; }
.pf-checks-lista li { position: relative; padding-left: 4.5mm; }
.pf-checks-lista li::before { content: "✓"; position: absolute; left: 0; color: var(--dx-verde); font-weight: 700; }
.pf-linea.opcional .pf-precio strong { color: var(--dx-suave); }
.pf-totales { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3mm; margin-top: 2mm; }
.pf-tot { padding: 3.5mm 4mm; border-radius: 3mm; background: var(--dx-panel); border: 1px solid var(--dx-linea); display: grid; gap: .6mm; }
.pf-tot span { font-family: "IBM Plex Mono", monospace; font-size: 6.6pt; letter-spacing: .14em; text-transform: uppercase; color: var(--dx-tenue); }
.pf-tot strong { font-family: Montserrat, "Helvetica Neue", Arial, sans-serif; font-size: 15pt; font-weight: 600; }
.pf-tot small { font-size: 7pt; color: var(--dx-tenue); }
.pf-tot.grande { background: color-mix(in srgb, var(--pf-azul2) 85%, var(--dx-panel)); border-color: transparent; }
.pf-tot.grande span, .pf-tot.grande strong, .pf-tot.grande small { color: #fff; }
.pf-terminos { margin: 0; padding-left: 5mm; display: grid; gap: 2.2mm; font-size: 8.2pt; line-height: 1.5; color: var(--dx-suave); }
/* Propuesta de social media: preguntas, ancla de ahorro y términos compactos */
.pf-preguntas { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm; }
.pf-pregunta { padding: 4mm; border-radius: 3mm; background: var(--dx-panel); border: 1px solid var(--dx-linea); display: grid; gap: 1.4mm; align-content: start; }
.pf-pregunta strong { font-size: 9.6pt; color: var(--dx-tinta); }
.pf-pregunta p { margin: 0; font-size: 8.6pt; line-height: 1.5; color: var(--dx-suave); }
.pf-ahorro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm; padding: 4mm; border-radius: 3mm; border: 1px dashed color-mix(in srgb, var(--dx-verde) 50%, transparent); background: color-mix(in srgb, var(--dx-verde) 7%, transparent); }
.pf-ahorro > div { display: grid; gap: .5mm; }
.pf-ahorro span { font-family: "IBM Plex Mono", monospace; font-size: 6.6pt; letter-spacing: .14em; text-transform: uppercase; color: var(--dx-tenue); }
.pf-ahorro s { font-size: 14pt; color: var(--dx-tenue); } .pf-ahorro strong { font-family: Montserrat, "Helvetica Neue", Arial, sans-serif; font-size: 14pt; font-weight: 600; }
.pf-ahorro .ok strong { color: var(--dx-verde); } .pf-ahorro small { font-size: 7pt; color: var(--dx-tenue); }
.pf-ahorro p { grid-column: 1 / -1; margin: 0; font-size: 8.2pt; color: var(--dx-suave); }
.pf-terminos { columns: 2; column-gap: 7mm; display: block; font-size: 7.6pt; }
.pf-terminos li { break-inside: avoid; margin-bottom: 1.8mm; }
.pf-antes { font-size: 10pt; color: var(--dx-tenue); }
.pf-serv.uno { grid-template-columns: 1fr; } .pf-serv.uno .pf-checks-lista { columns: 2; column-gap: 6mm; display: block; } .pf-serv.uno .pf-checks-lista li { margin-bottom: 1.2mm; }
.pf-serv-item.principal { grid-column: 1 / -1; } .pf-serv-item.principal .pf-checks-lista { columns: 2; column-gap: 6mm; display: block; } .pf-serv-item.principal .pf-checks-lista li { margin-bottom: 1.2mm; }
.pf-inversion.compacto .pf-linea { padding: 2.4mm 0; align-items: center; }
.pf-inversion.compacto .pf-linea:first-child { padding-top: 0; }
.pf-inversion.compacto .pf-linea > div:first-child strong { font-size: 10pt; margin: 0; }
.pf-inversion.compacto .pf-precio strong { font-size: 15pt; }
.pf-inversion.compacto .pf-precio { grid-auto-flow: column; align-items: baseline; gap: 2mm; }
/* Planes para elegir */
.pf-planes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3.5mm; }
.pf-plan { position: relative; display: grid; gap: 1.6mm; align-content: start; padding: 5mm 4.5mm 4.5mm; border-radius: 3mm; background: var(--dx-panel); border: 1px solid var(--dx-linea); }
.pf-plan.elegido { border-color: var(--pf-azul); box-shadow: 0 0 0 1px var(--pf-azul); }
.pf-plan-reco { position: absolute; top: -2.4mm; left: 4.5mm; padding: .6mm 2.6mm; border-radius: 99px; font-family: "IBM Plex Mono", monospace; font-size: 6.2pt; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--dx-espectro); }
.pf-plan-nombre { font-family: Montserrat, "Helvetica Neue", Arial, sans-serif; font-size: 13pt; font-weight: 600; color: var(--dx-tinta); }
.pf-plan-precio { font-family: Montserrat, "Helvetica Neue", Arial, sans-serif; font-size: 20pt; font-weight: 600; color: var(--dx-tinta); }
.pf-plan-precio small { font-size: 8pt; font-weight: 400; color: var(--dx-tenue); margin-left: 1mm; }
.pf-plan-ahorro { font-size: 7.4pt; color: var(--dx-verde); }
.pf-plan .pf-checks-lista { font-size: 8pt; margin-top: 1mm; }
.pf-plan-sel { justify-self: start; margin-top: 1mm; padding: .6mm 2.6mm; border-radius: 99px; font-size: 7pt; font-weight: 600; color: var(--pf-azul); border: 1px solid var(--pf-azul); }