/* ESTILOS DEL INFORME del pre-diagnóstico.
 *
 * Viven aquí, en /public, por la MISMA razón que informe-render.js: los usan DOS
 * páginas — /prediagnostico y /informe-ejemplo — y una hoja compartida es la única
 * forma de que el informe se vea igual en ambas.
 *
 * POR QUÉ SE SACARON DE prediagnostico.astro (2026-09-16): estaban en el bloque
 * global de esa página, así que solo viajaban a ESA página. El pintor era
 * compartido pero su CSS no, y /informe-ejemplo renderizaba el informe entero SIN
 * ESTILOS — texto plano apilado. Se vio en una captura de pantalla; ni el build ni
 * los tests lo habrían detectado.
 *
 * Son globales a propósito: los pinta JavaScript en tiempo de ejecución, y el CSS
 * con ámbito de Astro no alcanza a los elementos creados por script.
 */

  /* ═══════════ "PREPARANDO TU INFORME" ═══════════ */
  .pd-preparando {
    display: flex;
    align-items: center;
    gap: 12px;
    align-self: center;
    margin-top: 10px;
    padding: 14px 22px;
    border-radius: 999px;
    border: 1px solid rgb(255 121 0 / 0.35);
    background: rgb(255 121 0 / 0.08);
    font-family: 'JetBrains Mono Variable', 'JetBrains Mono', monospace;
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-amber);
  }
  .pd-preparando span {
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 2px solid rgb(255 121 0 / 0.3);
    border-top-color: var(--color-amber);
    animation: pdGira 0.9s linear infinite;
  }
  @keyframes pdGira { to { transform: rotate(360deg); } }

  /* ═══════════════════════════════════════════════════════════════════════
     EL INFORME — REESCRITO EL 2026-09-17 (#72)
     ═══════════════════════════════════════════════════════════════════════
     Lo que había: TODO dentro de una caja gigante con marco naranja, cada sección
     rotulada con versalitas diminutas muy espaciadas, y todos los elementos con el
     mismo peso visual. El operador lo probó y el veredicto fue "cargante y poco
     legible". Tenía razón: eso es lenguaje de web, y esto no es una web — es un
     INFORME, y un informe se juzga por si se entiende sin esfuerzo.

     Lo que se aplica ahora:
       · UN FOLIO: superficie opaca propia, sin la textura de la web asomando por
         detrás, levantada de la página con sombra.
       · JERARQUÍA REAL: título de sección legible (no versalitas de 10 px) con su
         número de orden delante — el lector siempre sabe dónde está.
       · SECCIONES separadas por línea fina y aire generoso, como un documento.
       · TEXTO PARA LEER: 14-15 px, interlineado 1,6, ancho de lectura limitado.
       · EL NARANJA, RACIONADO: un acento por sección, no en cada borde.
     ═══════════════════════════════════════════════════════════════════════ */

  .pd-inf {
    /* Neutros cálidos, no grises puros: conviven con el naranja sin ensuciarlo. */
    --folio:  #191613;
    --tinta:  #F2EEE5;   /* titulares */
    --texto:  #C6C1B7;   /* cuerpo */
    --tenue:  #8E8A82;   /* apoyo, unidades, pies */
    --linea:  rgba(245, 241, 232, 0.10);
    --lectura: 64ch;

    margin-top: 34px;
    border: 1px solid rgba(245, 241, 232, 0.10);
    border-top: 2px solid rgb(255 121 0 / 0.75);
    border-radius: 4px 4px 14px 14px;
    background: var(--folio);
    box-shadow:
      0 1px 0 rgba(245, 241, 232, 0.04) inset,
      0 24px 60px -24px rgba(0, 0, 0, 0.95),
      0 2px 12px rgba(0, 0, 0, 0.5);
    counter-reset: seccion;
    overflow: hidden;
  }

  /* ── La sección: hairline arriba + aire. Es el ritmo del documento ── */
  .pd-inf-sec {
    padding: clamp(26px, 3.4vw, 34px) clamp(18px, 3.4vw, 36px);
    border-top: 1px solid var(--linea);
  }
  .pd-inf-sec:first-child { border-top: 0; }

  /* ── El título de sección: legible y numerado ── */
  .pd-inf-tag {
    counter-increment: seccion;
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 18px;
    font-family: 'Inter Variable', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--tinta);
    line-height: 1.3;
  }
  .pd-inf-tag::before {
    content: counter(seccion, decimal-leading-zero);
    font-family: 'JetBrains Mono Variable', 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-amber);
    letter-spacing: 0.08em;
    flex-shrink: 0;
  }

  /* ═══════════ CABECERA ═══════════ */
  .pd-inf-cabecera { text-align: center; padding-bottom: 26px; }
  .pd-inf-cabecera .pd-inf-tag {
    justify-content: center;
    counter-increment: none;
    font-family: 'JetBrains Mono Variable', 'JetBrains Mono', monospace;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-amber);
    margin-bottom: 14px;
  }
  .pd-inf-cabecera .pd-inf-tag::before { content: none; }
  .pd-inf-empresa {
    font-family: 'Inter Variable', 'Inter', sans-serif;
    font-size: clamp(26px, 3.4vw, 34px);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--tinta);
    line-height: 1.15;
  }
  .pd-inf-meta {
    margin-top: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 300;
    color: var(--tenue);
  }

  /* ═══════════ EL POTENCIAL ═══════════ */
  .pd-inf-score-sec {
    display: flex;
    align-items: center;
    gap: clamp(18px, 3vw, 30px);
    flex-wrap: wrap;
  }
  .pd-inf-anillo {
    position: relative;
    width: 104px;
    height: 104px;
    flex-shrink: 0;
    border-radius: 50%;
    background: conic-gradient(var(--color-amber) calc(var(--pct) * 1%), rgba(245, 241, 232, 0.09) 0);
    display: grid;
    place-items: center;
  }
  .pd-inf-anillo-in {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: var(--folio);
    display: grid;
    place-items: center;
    align-content: center;
  }
  .pd-inf-anillo-in strong {
    font-family: 'Inter Variable', 'Inter', sans-serif;
    font-size: 30px;
    font-weight: 600;
    color: var(--tinta);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .pd-inf-anillo-in span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: var(--tenue);
    margin-top: 3px;
  }
  .pd-inf-score-txt { flex: 1; min-width: 240px; }
  .pd-inf-score-txt b {
    display: block;
    font-family: 'Inter Variable', 'Inter', sans-serif;
    font-size: clamp(17px, 2vw, 21px);
    font-weight: 600;
    color: var(--tinta);
    letter-spacing: -0.015em;
    line-height: 1.25;
  }
  /* El "de dónde sale el número", en frase normal: antes iba en versalitas
     diminutas y era, literalmente, la línea menos legible del informe. */
  .pd-inf-score-txt small {
    display: block;
    margin-top: 8px;
    max-width: var(--lectura);
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 300;
    font-style: normal;
    letter-spacing: 0;
    text-transform: none;
    color: var(--texto);
    line-height: 1.6;
  }

  /* ═══════════ HERRAMIENTAS + CITA ═══════════ */
  .pd-inf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .pd-inf-chip {
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--linea);
    background: rgba(245, 241, 232, 0.03);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--texto);
  }
  .pd-inf-cita {
    margin: 0;
    padding: clamp(20px, 3vw, 26px) clamp(18px, 3.4vw, 36px);
    border-top: 1px solid var(--linea);
    border-left: 2px solid rgb(255 121 0 / 0.6);
    font-family: 'Inter', sans-serif;
    font-size: clamp(15px, 1.7vw, 17px);
    font-weight: 300;
    font-style: italic;
    color: var(--tinta);
    line-height: 1.6;
  }

  /* ═══════════ EL DINERO ═══════════ */
  .pd-inf-roi-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 300;
    color: var(--tenue);
  }
  .pd-inf-roi-big {
    margin-top: 4px;
    font-family: 'Inter Variable', 'Inter', sans-serif;
    font-size: clamp(38px, 6vw, 54px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--color-amber);
    font-variant-numeric: tabular-nums;
  }
  .pd-inf-roi-sub {
    margin-top: 14px;
    display: flex;
    gap: 34px;
    flex-wrap: wrap;
  }
  .pd-inf-roi-sub div { display: flex; flex-direction: column; gap: 2px; }
  .pd-inf-roi-sub strong {
    font-family: 'Inter Variable', 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: var(--tinta);
    font-variant-numeric: tabular-nums;
  }
  .pd-inf-roi-sub span {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 300;
    color: var(--tenue);
  }

  /* El acumulado a 3 años */
  .pd-inf-acum {
    margin-top: 26px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    align-items: end;
    height: 156px;
    padding-bottom: 26px;
    border-bottom: 1px solid var(--linea);
  }
  .pd-inf-col {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
  }
  .pd-inf-col-val {
    font-family: 'JetBrains Mono Variable', 'JetBrains Mono', monospace;
    font-size: 12px;
    color: var(--tenue);
    font-variant-numeric: tabular-nums;
  }
  .pd-inf-col.is-focus .pd-inf-col-val { color: var(--tinta); font-size: 13.5px; }
  .pd-inf-col-stack {
    width: 26px;
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
    transition: height 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .pd-inf-seg { flex: 1; min-height: 3px; }
  .pd-inf-seg-1 { background: #C45A00; }
  .pd-inf-seg-2 { background: #FF7900; }
  .pd-inf-seg-3 { background: #FFB04D; }
  .pd-inf-col-stack .pd-inf-seg:last-child { border-radius: 3px 3px 0 0; }
  .pd-inf-col-pie {
    position: absolute;
    bottom: -22px;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    color: var(--tenue);
  }

  /* Los mandos: se tocan, así que el área táctil manda sobre la estética */
  .pd-inf-mandos {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
  .pd-inf-mando label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 300;
    color: var(--tenue);
  }
  .pd-inf-mando output {
    font-family: 'JetBrains Mono Variable', 'JetBrains Mono', monospace;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-amber);
    padding: 3px 9px;
    border-radius: 6px;
    border: 1px solid rgb(255 121 0 / 0.3);
    background: rgb(255 121 0 / 0.08);
    font-variant-numeric: tabular-nums;
  }
  .pd-inf-mando input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 44px;                 /* área táctil cómoda; el carril va dentro */
    background:
      linear-gradient(
        90deg,
        var(--color-amber) 0 var(--pct, 50%),
        rgba(245, 241, 232, 0.13) var(--pct, 50%) 100%
      ) center / 100% 6px no-repeat;
    outline: none;
    cursor: pointer;
    touch-action: pan-y;
  }
  .pd-inf-mando input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #F5F1E8;
    border: 3px solid var(--folio);
    box-shadow: 0 0 0 2px var(--color-amber), 0 2px 10px rgba(0, 0, 0, 0.55);
    cursor: grab;
  }
  .pd-inf-mando input[type="range"]::-moz-range-thumb {
    width: 24px; height: 24px; border-radius: 50%;
    background: #F5F1E8; border: 3px solid var(--folio);
    box-shadow: 0 0 0 2px var(--color-amber), 0 2px 10px rgba(0, 0, 0, 0.55);
  }
  .pd-inf-formula {
    margin-top: 12px;
    max-width: var(--lectura);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 300;
    color: var(--tenue);
    line-height: 1.55;
  }

  /* ═══════════ OPORTUNIDADES ═══════════ */
  .pd-inf-op {
    border: 1px solid var(--linea);
    border-radius: 10px;
    background: rgba(245, 241, 232, 0.02);
    margin-bottom: 10px;
    overflow: hidden;
  }
  .pd-inf-op[open] { background: rgba(245, 241, 232, 0.035); }
  .pd-inf-op summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    cursor: pointer;
    list-style: none;
  }
  .pd-inf-op summary::-webkit-details-marker { display: none; }
  .pd-inf-op summary b {
    width: 24px; height: 24px; flex-shrink: 0;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgb(255 121 0 / 0.14);
    color: var(--color-amber);
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 600;
  }
  .pd-inf-op-t {
    flex: 1;
    font-family: 'Inter Variable', 'Inter', sans-serif;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--tinta);
    line-height: 1.35;
  }
  .pd-inf-op-h, .pd-inf-op-ice {
    flex-shrink: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: var(--tenue);
    font-variant-numeric: tabular-nums;
  }
  .pd-inf-op-h { color: var(--color-amber); }
  .pd-inf-op-body {
    padding: 0 16px 16px 52px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .pd-inf-op-fila { display: flex; flex-direction: column; gap: 3px; max-width: var(--lectura); }
  .pd-inf-op-fila i {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tenue);
  }
  .pd-inf-op-fila p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: var(--texto);
    line-height: 1.6;
  }

  /* ═══════════ ANTES / DESPUÉS ═══════════ */
  .pd-inf-ad {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
  .pd-inf-ad-col {
    padding: 18px;
    border-radius: 10px;
    border: 1px solid var(--linea);
    background: rgba(245, 241, 232, 0.02);
  }
  .pd-inf-ad-col b {
    display: block;
    margin-bottom: 12px;
    font-family: 'Inter Variable', 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--tinta);
  }
  .pd-inf-ad-col p {
    display: flex;
    gap: 9px;
    align-items: baseline;
    margin-bottom: 9px;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 300;
    color: var(--texto);
    line-height: 1.55;
  }
  .pd-inf-ad-col p i { font-style: normal; flex-shrink: 0; color: #8E8A82; }
  .pd-inf-ad-col.is-bien { border-color: rgba(74, 222, 128, 0.28); }
  .pd-inf-ad-col.is-bien p i { color: #4ADE80; }
  .pd-inf-proyeccion {
    margin-top: 16px;
    max-width: var(--lectura);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 300;
    font-style: italic;
    color: var(--texto);
    line-height: 1.6;
  }

  /* ═══════════ HOJA DE RUTA ═══════════ */
  .pd-inf-plan { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .pd-inf-fase {
    padding: 18px;
    border-radius: 10px;
    border: 1px solid var(--linea);
    background: rgba(245, 241, 232, 0.02);
  }
  .pd-inf-fase b {
    display: block;
    font-family: 'Inter Variable', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--tinta);
  }
  .pd-inf-fase small {
    display: block;
    margin: 3px 0 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-amber);
  }
  .pd-inf-fase p {
    margin-bottom: 7px;
    padding-left: 13px;
    position: relative;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 300;
    color: var(--texto);
    line-height: 1.55;
  }
  .pd-inf-fase p::before {
    content: '';
    position: absolute;
    left: 0; top: 9px;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: rgba(245, 241, 232, 0.3);
  }

  /* ═══════════ KPIs ═══════════ */
  .pd-inf-kpi-wrap { overflow-x: auto; }
  .pd-inf-kpis {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter', sans-serif;
    font-variant-numeric: tabular-nums;
    min-width: 460px;
  }
  .pd-inf-kpis thead th {
    padding: 0 10px 10px;
    text-align: right;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tenue);
    border-bottom: 1px solid var(--linea);
  }
  .pd-inf-kpis thead th:first-child { text-align: left; padding-left: 0; }
  .pd-inf-kpis tbody th {
    padding: 12px 10px 12px 0;
    text-align: left;
    font-size: 13.5px;
    font-weight: 400;
    color: var(--tinta);
    border-bottom: 1px solid var(--linea);
  }
  .pd-inf-kpis tbody td {
    padding: 12px 10px;
    text-align: right;
    font-size: 13.5px;
    font-weight: 300;
    color: var(--texto);
    border-bottom: 1px solid var(--linea);
  }
  .pd-inf-kpis tbody td:last-child { color: var(--color-amber); font-weight: 500; }
  .pd-inf-kpis tbody tr:last-child th,
  .pd-inf-kpis tbody tr:last-child td { border-bottom: 0; }

  /* ═══════════ ESTA SEMANA, TÚ SOLO ═══════════ */
  .pd-inf-paso {
    display: flex;
    gap: 12px;
    align-items: baseline;
    margin-bottom: 12px;
    max-width: var(--lectura);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: var(--texto);
    line-height: 1.6;
  }
  .pd-inf-paso b {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(245, 241, 232, 0.06);
    color: var(--tinta);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 600;
  }

  /* ═══════════ EL LÍMITE (pre-vende el Diagnóstico real) ═══════════ */
  .pd-inf-limite { background: rgba(255, 121, 0, 0.04); }
  .pd-inf-limite p {
    max-width: var(--lectura);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: var(--texto);
    line-height: 1.65;
  }

  /* ═══════════ EL CIERRE ═══════════ */
  .pd-inf-cta {
    padding: clamp(26px, 4vw, 36px) clamp(18px, 3.4vw, 36px);
    border-top: 1px solid var(--linea);
    text-align: center;
    background: linear-gradient(180deg, rgb(255 121 0 / 0.07), transparent 70%);
  }
  .pd-inf-cta b {
    display: block;
    font-family: 'Inter Variable', 'Inter', sans-serif;
    font-size: clamp(19px, 2.4vw, 24px);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--tinta);
    line-height: 1.25;
  }
  .pd-inf-cta p {
    margin: 8px 0 20px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: var(--tenue);
  }

  /* GARANTÍA: el verde es "no pierdes nada"; el ámbar es Praxells. Dos mensajes,
     dos colores. Va lo último antes del botón, que es donde hace falta. */
  .pd-inf-garantia {
    display: flex; align-items: center; gap: 12px;
    max-width: 560px; margin: 0 auto 20px;
    padding: 16px 22px; border-radius: 12px; text-align: left;
    border: 1.5px solid rgba(74, 222, 128, 0.5);
    background: rgba(74, 222, 128, 0.07);
    animation: pd-inf-garantia-pulse 2.2s ease-in-out infinite;
  }
  .pd-inf-garantia-tick { color: #4ADE80; font-size: 20px; font-weight: 700; flex-shrink: 0; line-height: 1; }
  .pd-inf-garantia p { margin: 0; font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 300; color: var(--texto); line-height: 1.5; }
  .pd-inf-garantia strong { color: var(--tinta); font-weight: 600; }
  @keyframes pd-inf-garantia-pulse {
    0%, 100% { border-color: rgba(74, 222, 128, 0.38); box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
    50% { border-color: rgba(74, 222, 128, 0.95); box-shadow: 0 0 30px 1px rgba(74, 222, 128, 0.45), inset 0 0 16px -6px rgba(74, 222, 128, 0.3); }
  }
  @media (prefers-reduced-motion: reduce) { .pd-inf-garantia { animation: none; } }

  .pd-inf-btn {
    display: inline-block; padding: 16px 34px; border-radius: 999px;
    background: linear-gradient(105deg, var(--color-amber-light), var(--color-amber-soft) 50%, var(--color-amber));
    color: #0A0A0A; font-family: 'Inter Variable', 'Inter', sans-serif; font-size: 15px; font-weight: 600;
    text-decoration: none; transition: transform 0.2s ease;
  }
  .pd-inf-btn:hover { transform: scale(0.96); }
  .pd-inf-pdf {
    display: block; margin: 16px auto 0; padding: 6px 10px;
    background: none; border: 0; cursor: pointer;
    font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 300; color: var(--texto);
    text-decoration: underline; text-underline-offset: 3px;
  }
  .pd-inf-pdf:hover { color: var(--tinta); }
  .pd-inf-pdf-aviso {
    margin: 8px auto 0;
    max-width: 440px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 300;
    color: var(--tenue);
    line-height: 1.5;
  }
  .pd-inf-pdf-aviso[hidden] { display: none; }

  /* ═══════════ MÓVIL ═══════════ */
  @media (max-width: 680px) {
    .pd-inf-score-sec { gap: 16px; }
    .pd-inf-anillo { width: 88px; height: 88px; }
    .pd-inf-anillo-in { width: 66px; height: 66px; }
    .pd-inf-anillo-in strong { font-size: 25px; }
    .pd-inf-mandos { grid-template-columns: 1fr; gap: 10px; }
    .pd-inf-ad, .pd-inf-plan { grid-template-columns: 1fr; }
    .pd-inf-acum { height: 132px; }
    .pd-inf-op-body { padding-left: 16px; }
    .pd-inf-mando input[type="range"]::-webkit-slider-thumb { width: 26px; height: 26px; }
    .pd-inf-mando input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; }
  }

  /* ═══════════ IMPRESIÓN (el PDF) ═══════════
     EL PDF CONSERVA LA ESTÉTICA (cambiado el 2026-09-17, #72). Antes se invertía a
     blanco "porque un informe se imprime en papel" — pero esto no se imprime: se
     guarda y se reenvía por email, y llegaba a manos del decisor como un documento
     genérico sin nada de Praxells. Ahora sale igual que en pantalla.

     La clave es `print-color-adjust: exact`: sin eso el navegador descarta fondos y
     colores al imprimir y saldría un folio blanco con letra clara — ilegible. Con
     eso, Chrome y Edge respetan el diseño aunque el usuario no marque "gráficos de
     fondo". Safari y Firefox son menos fiables; si algún cliente lo reporta, el plan
     B es generar el PDF en el servidor.

     Lo único que se quita es lo que en un PDF no sirve: navegación, chat, formularios
     y los mandos deslizantes (en papel no se mueven; las cifras ya están escritas). */
  @media print {
    @page { margin: 12mm; }

    html, body {
      background: #0A0A0A !important;
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
    }
    body::before, body::after { display: none !important; }   /* textura y viñeta fuera */

    .site-nav, .site-footer, .pd-bar, .pd-progress, .pd-chat, .pd-form, .pd-legal,
    .pd-preparando, .pd-puerta, .pd-volver, .floating-chat, .chat-panel, .sticky-cta,
    .cookie-banner, .ej-aviso, .ej-cierre,
    .pd-inf-mandos, .pd-inf-pdf, .pd-inf-pdf-aviso, .pd-inf-btn { display: none !important; }

    .pd { padding-top: 0 !important; }

    .pd-inf {
      -webkit-print-color-adjust: exact !important;
      print-color-adjust: exact !important;
      margin-top: 0;
      box-shadow: none;                 /* la sombra en PDF sale como una mancha gris */
      border-radius: 6px;
    }
    /* Cada bloque, entero en su página: partir una tabla o una oportunidad por la
       mitad es lo que hace que un PDF parezca descuidado. */
    .pd-inf-sec, .pd-inf-op, .pd-inf-fase, .pd-inf-ad-col, .pd-inf-cta { break-inside: avoid; }
    .pd-inf-op[open] .pd-inf-op-body { display: flex !important; }   /* abre las plegadas */
    .pd-inf-op:not([open]) .pd-inf-op-body { display: flex !important; }
    .pd-inf-cta p, .pd-inf-garantia { break-inside: avoid; }
    .pd-inf-garantia { animation: none; }
  }

  /* ═══════════ LAS TRES PÁGINAS DEL INFORME (2026-09-19, #72) ═══════════
     El informe se lee en tres tramos: de dónde partimos · qué se puede hacer ·
     lo que cuesta no hacerlo. El color NO es decoración: marca lo que empuja a
     la llamada (dinero, horas ganadas, garantía) y deja en gris lo que solo
     tiene que ser honesto (el aviso). */
  .pd-inf-pagina + .pd-inf-pagina {
    margin-top: 10px;
    border-top: 1px solid var(--linea);
  }
  .pd-inf-pagnum {
    margin: 0;
    padding: clamp(18px, 2.6vw, 26px) clamp(18px, 3.4vw, 36px) 0;
    font-family: 'JetBrains Mono Variable', 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgb(255 121 0 / 0.85);
  }

  /* EL AVISO — gris y sobrio: su trabajo es dar credibilidad, no competir. */
  .pd-inf-aviso {
    margin: 16px clamp(18px, 3.4vw, 36px) 0;
    padding: 16px 18px;
    border: 1px solid var(--linea);
    border-left: 3px solid #6B6760;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
  }
  .pd-inf-aviso p {
    margin: 0 0 9px;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 300;
    line-height: 1.62;
    color: #A7A29A;
  }
  .pd-inf-aviso p:last-child { margin-bottom: 0; }
  .pd-inf-aviso-t {
    font-family: 'JetBrains Mono Variable', 'JetBrains Mono', monospace;
    font-size: 10.5px !important;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8E8A82 !important;
  }
  .pd-inf-aviso b { color: #D6D1C7; font-weight: 500; }
  .pd-inf-aviso-si { color: #C9C4B8 !important; }
  .pd-inf-aviso-si strong { color: #FF9A3C; font-weight: 600; }

  /* SU FRASE — presentada, para que la lea como suya. */
  .pd-inf-cita-intro {
    margin: 24px clamp(18px, 3.4vw, 36px) 0;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.01em;
    color: #8E8A82;
  }
  .pd-inf-cita-intro + .pd-inf-cita {
    border-top: none;
    padding-top: 10px;
    color: #F5F1E8;
    font-size: clamp(16px, 1.9vw, 19px);
  }

  /* QUICK WINS — lo que gana, en verde: es el lado bueno del cambio. */
  .pd-inf-op-fila.es-gana i { color: #4ADE80; }
  .pd-inf-op-fila.es-gana p { color: #E8E4DA; }

  /* EL CAMBIO — hoy en rojo apagado, después en verde. */
  .pd-inf-ad-col.is-hoy { border-color: rgba(211, 96, 79, 0.28); }
  .pd-inf-ad-col.is-hoy p i { color: #D3604F; }

  /* LA CALCULADORA, CONTEXTUALIZADA — sin esta frase el visitante se guarda un
     PDF con cifras de ejemplo. */
  .pd-inf-roi-intro {
    margin: 16px clamp(18px, 3.4vw, 36px) 0;
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    font-weight: 300;
    line-height: 1.62;
    color: #C9C4B8;
  }

  @media print {
    /* Cada tramo, en su hoja: es lo que hace que el PDF se lea como un documento. */
    .pd-inf-pagina + .pd-inf-pagina { break-before: page; border-top: none; }
    .pd-inf-aviso, .pd-inf-cita, .pd-inf-score-sec { break-inside: avoid; }
  }