/* Veriko landing — impresión (unidad P5 del pulido, decisión P-CSS-3).
   Se carga con media="print" desde lr_head(), así que no pesa en pantalla.
   Cero hex: todo por tokens (candado tests/contract/Landing/LandingTokensTest.php).

   Dos trabajos distintos:

   1) UN ARREGLO QUE AFECTA A LAS 17 RUTAS. El sistema de reveal esconde lo que aún no ha entrado
      en el viewport (`[data-reveal]:not(.is-in){opacity:0}`, home.css) y vuelve a esconder lo que
      ya pasó (`.is-out`). Al imprimir no hay scroll ni viewport que recorrer: el navegador pinta
      el documento entero con las clases tal como estaban, así que TODO lo que no se había visto
      salía en blanco. Medido antes de esta hoja: imprimir la home desde arriba daba una primera
      página buena y el resto vacío.

   2) DISEÑO DE IMPRESIÓN para las tres páginas que la gente imprime de verdad: el aviso de
      privacidad, los términos y los precios. Ahí no basta con que se vea: hay que quitar el
      chrome de navegación, desplegar lo que en pantalla se desplaza, y traducir a papel lo que
      en pantalla es un control.

   Una nota que gobierna casi todas las decisiones de abajo: **el papel no tiene fondos**. Ni el
   PDF de Chrome headless (`--print-to-pdf` imprime sin fondos y no hay bandera para cambiarlo)
   ni la impresión normal con la casilla de gráficos desmarcada, que es como viene por defecto.
   Cualquier cosa que dependa de un `background` —una tarjeta con relleno de color y texto
   blanco, un sello verde con tinta blanca— desaparece. Por eso aquí el color viaja SIEMPRE en la
   tinta y en el borde, nunca en el relleno. */

@page {
    margin: 18mm;
}

/* ---- 1 · El arreglo: nada se imprime en blanco ---- */
[data-reveal],
[data-reveal].is-out,
[data-stagger] > *,
[data-stagger].is-out > *,
[data-reveal="clip"] > span {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    clip-path: none !important;
}

[data-draw]::before {
    width: 100% !important;
    animation: none !important;
    transition: none !important;
}

/* Las coreografías de carga, terminadas: el comprobante, sus subrayados, el sello y los tres
   beats de la respuesta de M3. En papel una animación es sólo su estado final. */
.receipt.paper,
.m1-v2 .stamp,
.receipt .ul,
.panel,
.phone,
.m3.code-card,
.m3 .cr-status,
.m3 .cr-json > span,
.m3 .cr-verdict,
.m3 .m3-color,
.m3 .m3-plain {
    animation: none !important;
    transition: none !important;
}

.receipt .ul { background-size: 100% 60%; }
.m3 .m3-color { clip-path: none; }
.m3 .m3-plain { visibility: hidden; }
.scan { display: none; }

/* ---- 2 · Fuera el chrome: nada que sólo sirva para pulsar o para ambientar ---- */
.nav,
.nav-drawer,
.nav-scrim,
.skip-link,
.foot,
.cta,
.amb,
.echo,
.m1-glow,
.sec-sep,
.carousel-arrows,
.carousel-scrollbar,
.legal-toc {
    display: none !important;
}

/* Sin relieve: en papel una sombra es una mancha gris. */
* {
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

body {
    background: transparent;
}

/* Las bandas oscuras se leen como texto normal sobre el papel. Sin esto, tinta clara sobre
   blanco: invisible. */
.hero-dark,
.sec-dark,
.sec[data-ground] {
    background: none !important;
    color: var(--color-text-primary) !important;
}

.hero-dark .d1,
.hero-dark .d2,
.hero-dark .lead,
.hero-dark .eyebrow,
.sec-dark .d2,
.sec-dark .lead,
.sec-dark .eyebrow,
.sec-dark .points li {
    color: var(--color-text-primary) !important;
}

/* La code-card es una figura, no una banda: conserva su forma (marco y monoespaciada) pero pasa
   a tinta sobre blanco, porque su paleta oscura vive entera en `background` y en colores claros
   que sobre papel no se ven. */
.code-card,
.code-card * {
    background: transparent !important;
    color: var(--color-text-primary) !important;
}

.code-card {
    border: 1px solid var(--color-border) !important;
}

.code-tabbar,
.code-panel,
.code-json,
.compare-wrap,
.plan-grid {
    overflow: visible !important;
    max-height: none !important;
}

/* El veredicto conserva su color —es la regla del proyecto: color + icono + texto— pero lo lleva
   en la tinta y en el borde, que es lo único que el papel garantiza. `print-color-adjust` deja
   además que quien sí imprime fondos vea el relleno original. */
.stamp,
.verdict,
.cr-verdict,
.compare-verdict {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.stamp {
    position: static !important;
    display: inline-flex;
    background: transparent !important;
    color: var(--color-success-text) !important;
    border: 1px solid currentColor;
}

/* Un salto de página no debe partir un título de su párrafo ni una tarjeta por la mitad. */
h1, h2, h3 {
    break-after: avoid;
    break-inside: avoid;
}

img, figure, table, .plan-card, .step, .cap {
    break-inside: avoid;
}

/* ---- 3 · Legales: el documento, y sólo el documento ---- */
/* La barra de navegación se convierte en la cabecera del papel: se queda el wordmark —texto vivo,
   la fuente canónica de la marca (P-MARCA-3)— y se va todo lo demás. Cuando P1 entregue el
   maestro, aquí es donde entra. */
body:has(.legal-page) .nav {
    display: block !important;
    position: static !important;
    background: none !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid var(--color-border) !important;
    margin-bottom: 10mm;
}

body:has(.legal-page) .nav-in {
    height: auto;
    padding: 0 0 4mm;
}

body:has(.legal-page) .nav-links,
body:has(.legal-page) .nav-right {
    display: none !important;
}

.legal-page .hero {
    background: none !important;
    padding: 0 0 8mm !important;
}

.legal-page .sec { padding: 0 !important; }
.legal-page .wrap { padding: 0 !important; max-width: none !important; }
.legal-page .legal-layout { display: block !important; }
.legal-page .legal-body { max-width: none !important; }

/* El banner de borrador SÍ se imprime: quien se lleva el documento en papel tiene que llevarse
   también la advertencia de que aún no lo ha revisado nadie de legal. Pasa a marco y tinta. */
.legal-draft {
    background: none !important;
    border: 1px solid var(--color-warning) !important;
    break-inside: avoid;
}

.legal-sec {
    break-inside: avoid;
    margin-top: 6mm;
}

/* En papel un enlace es una promesa que no se puede seguir: se escribe su destino al lado. Sólo
   en los legales, que es donde el destino importa (autoridades, correos de contacto). */
.legal-page a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 11px;
    color: var(--color-text-secondary);
    word-break: break-all;
}

/* ---- 4 · Precios: el carrusel se despliega y los controles se convierten en su resultado ---- */
.lp-pricing .plan-grid,
.lp-pricing .plan-grid[data-count="1"],
.lp-pricing .plan-grid[data-count="2"] {
    display: grid !important;
    grid-auto-flow: row !important;
    grid-template-columns: 1fr 1fr !important;
    grid-auto-columns: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    gap: 6mm !important;
}

.lp-pricing .plan-card {
    background: none !important;
    border: 1px solid var(--color-border) !important;
    break-inside: avoid;
}

/* El plan recomendado se distingue por el trazo, no por el relleno. */
.lp-pricing .plan-card.featured {
    border: 2px solid var(--color-primary) !important;
}

.lp-pricing .plan-card.featured .plan-name,
.lp-pricing .plan-card.featured .plan-amount,
.lp-pricing .plan-card.featured .plan-unit,
.lp-pricing .plan-card.featured .plan-currency,
.lp-pricing .plan-card.featured .plan-features li,
.lp-pricing .plan-card.featured .plan-features li svg {
    color: var(--color-text-primary) !important;
}

.lp-pricing .plan-badge {
    position: static !important;
    display: inline-block;
    align-self: flex-start;
    background: none !important;
    color: var(--color-primary) !important;
    border: 1px solid currentColor;
}

/* En pantalla el periodo es una pestaña y el importe cambia al pulsarla. En papel no hay nada que
   pulsar: se imprimen los dos importes, el del periodo activo y el del otro (`.plan-alt`, que el
   servidor rellena y `pricing.js` mantiene al día con la moneda elegida). Las pestañas en sí se
   quedan: dicen cuál de los dos se estaba viendo en la pantalla de la que salió este papel. */
.lp-pricing .plan-alt {
    display: block !important;
    width: 100%;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
}

.lp-pricing .seg-toggle button {
    border-bottom-width: 1px !important;
}

.lp-pricing .plans-footer,
.lp-pricing .plans-toolbar .carousel-arrows {
    display: none !important;
}

/* La comparativa se despliega entera: sin caja con desplazamiento, sin ancho mínimo por columnas
   y sin la primera columna fija, que en papel no fija nada. */
.lp-pricing .compare-wrap {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.lp-pricing table.compare {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: auto !important;
}

.lp-pricing .compare tr > th:first-child,
.lp-pricing .compare thead tr > th:first-child {
    position: static !important;
    background: none !important;
}

.lp-pricing .compare .col-feat { width: auto !important; }

.lp-pricing .compare thead th.is-featured,
.lp-pricing .compare tbody td.is-featured {
    background: none !important;
    color: var(--color-text-primary) !important;
}

.lp-pricing .compare thead th.is-featured {
    border-bottom: 2px solid var(--color-primary) !important;
}

.lp-pricing .compare thead { break-inside: avoid; }
.lp-pricing .compare tr { break-inside: avoid; }