/* Hoja de impresión de la documentación legal de Digital Strings.
   Único origen del aspecto de los PDFs: assets/docs/*.pdf se generan desde estas
   mismas páginas con scripts/build-doc-pdfs.mjs. Si cambia el PDF, cambia acá.
   Enlazada con media="print" desde las cuatro páginas de documentación. */

@page {
  size: letter;
  /* 0.6in y no 0.75in: con 0.75 el area util es 912px por pagina y la garantia medía
     1804px, apenas 20px de holgura sobre dos paginas. Cualquier bloque que no se puede
     partir empujaba una tercera. Con 0.6 el area sube a 941px y el texto, al ser mas
     ancho, ocupa menos alto. */
  margin: 0.6in;
}

@media print {
  /* Fuera todo lo que es navegación o interacción: en papel no sirve. */
  .global-nav,
  nav.global-nav,
  footer.footer,
  .contact-modal,
  .ds-wa-bubble,
  .ds-wa-panel,
  .ds-sched-modal,
  .breadcrumbs,
  .page-actions,
  .page-doc-download,
  .page-section--related,
  .whatsapp-widget,
  .whatsapp-bubble,
  #ds-cookie-banner,
  .cookie-consent,
  .scheduler,
  script,
  noscript {
    display: none !important;
  }

  html, body {
    background: #fff !important;
    color: #1a1a1a !important;
    /* 9.5pt: con 10pt la garantia derramaba unos 275 caracteres a una tercera pagina.
       Sigue siendo tamano de lectura comoda para un documento legal. */
    font-size: 9.5pt;
    line-height: 1.32;
  }

  .page-shell,
  .page-surface,
  .page-hero,
  .page-section {
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* El encabezado se llevaba 249px de los 1824 utiles de dos paginas. Se comprime sin
     tocar contenido: el texto es el mismo, ocupa menos. */
  .page-hero { padding-bottom: 2pt !important; }
  .page-hero-copy { margin: 0 !important; }

  .page-eyebrow {
    font-size: 7.5pt;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #555 !important;
  }

  .page-title {
    font-size: 16pt;
    line-height: 1.1;
    margin: 0 0 3pt !important;
    color: #111431 !important;
  }

  .page-lead {
    font-size: 9.5pt;
    line-height: 1.35;
    color: #333 !important;
    margin-bottom: 3pt !important;
  }

  .page-doc-meta {
    font-size: 8pt;
    color: #666 !important;
    margin-bottom: 4pt !important;
  }
  /* La meta del contacto es una pila de spans; en papel va en una linea corrida.
     Mismo contenido, un tercio del alto. */
  #contacto .page-doc-meta,
  #contact .page-doc-meta {
    display: block !important;
    font-size: 9pt;
    color: #1a1a1a !important;
  }
  #contacto .page-doc-meta > span,
  #contact .page-doc-meta > span {
    display: inline !important;
  }
  #contacto .page-doc-meta > span + span::before,
  #contact .page-doc-meta > span + span::before {
    content: " · ";
    color: #888;
  }
  /* El pie repite NIT y direccion, asi que la seccion no necesita separarse tanto. */
  #contacto, #contact { margin-bottom: 2pt !important; }
  #contacto p, #contact p { font-size: 9pt; margin: 0 !important; }

  .page-section { margin-bottom: 3pt !important; }

  h2 {
    font-size: 11pt;
    margin: 5pt 0 2pt !important;
    color: #111431 !important;
    /* Un título al pie de página sin su contenido se lee como error de armado. */
    page-break-after: avoid;
    break-after: avoid;
  }

  h3 { font-size: 10.5pt; page-break-after: avoid; break-after: avoid; }

  p { margin: 0 0 3pt !important; orphans: 2; widows: 2; }

  /* En pantalla cada viñeta es una tarjeta con padding, borde y radio, separadas por
     0.85rem de gap. En papel eso es puro aire: era lo que inflaba el documento a 4
     páginas, no la cantidad de texto. Se aplanan a lista corriente. */
  .page-doc-list {
    display: block !important;
    gap: 0 !important;
    margin: 0 0 5pt !important;
    padding-left: 12pt !important;
  }
  .page-doc-list > li {
    display: list-item !important;
    grid-template-columns: none !important;
    margin: 0 0 2pt !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    color: #1a1a1a !important;
    line-height: 1.35 !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  /* El marcador vuelve a ser una viñeta de texto, no un círculo de 1.75rem. */
  .page-doc-list > li::before {
    display: inline !important;
    width: auto !important;
    height: auto !important;
    margin: 0 4pt 0 0 !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 0 !important;
    color: #444 !important;
    font-size: 9pt !important;
    line-height: inherit !important;
  }
  .page-doc-list--steps > li { grid-template-columns: none !important; }
  .page-doc-list--steps > li::before { content: counter(step) "." !important; font-weight: 700; }
  /* El titulillo de cada viñeta en su propia línea gasta un renglón por item. */
  .page-doc-list > li strong { display: inline !important; margin: 0 4pt 0 0 !important; }

  .page-doc-callout,
  .page-doc-spec,
  .page-doc-summary {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .page-doc-callout {
    border: 0.5pt solid #bbb !important;
    background: #f7f7f7 !important;
    padding: 6pt 8pt !important;
    margin: 6pt 0 !important;
    font-size: 9pt;
  }

  .page-doc-spec,
  .page-doc-summary {
    width: 100%;
    border-collapse: collapse;
    font-size: 8.5pt;
    margin: 3pt 0 5pt !important;
  }

  .page-doc-spec th, .page-doc-spec td,
  .page-doc-summary th, .page-doc-summary td {
    border: 0.5pt solid #bbb !important;
    padding: 2pt 4pt !important;
    line-height: 1.25 !important;
    text-align: left;
    vertical-align: top;
    background: none !important;
  }

  .page-doc-spec th,
  .page-doc-summary th {
    background: #eee !important;
    font-size: 8pt;
    text-transform: uppercase;
    letter-spacing: .05em;
  }

  .page-doc-nota-resumen {
    font-size: 8pt;
    font-style: italic;
    color: #444 !important;
    margin: 2pt 0 4pt !important;
  }

  a { color: #111431 !important; text-decoration: none; }

  /* El sitio centra el texto de estas paginas. En un documento legal impreso el texto
     centrado es justamente lo que lo hacia ver descuidado: se alinea a la izquierda. */
  main, main *,
  .page-section, .page-section *,
  .page-hero-copy, .page-lead, .page-doc-meta,
  .page-doc-list, .page-doc-list > li,
  .page-doc-callout, .page-doc-callout p {
    text-align: left !important;
  }
  .page-title, .page-eyebrow { text-align: left !important; }

  /* Contraste legible: la nota legal salia en violeta claro sobre gris. */
  .page-doc-callout,
  .page-doc-callout p,
  .page-doc-callout strong,
  .page-doc-list > li,
  .page-lead {
    color: #1a1a1a !important;
  }

  /* Adornos de pantalla que en papel solo ensucian. */
  .page-hero::before, .page-hero::after,
  .page-surface::before, .page-surface::after,
  .page-section::before, .page-section::after,
  .page-section-head::after {
    display: none !important;
    background: none !important;
  }
  .page-section-head { border: none !important; }

  /* Pie de página propio: el del sitio se oculta arriba. */
  .print-footer {
    display: block !important;
    margin-top: 10pt;
    padding-top: 5pt;
    border-top: 0.5pt solid #bbb;
    font-size: 7.5pt;
    color: #666 !important;
  }
}

/* En pantalla el pie de impresión no existe. */
.print-footer { display: none; }