/* ============================================================
     Sistema visual derivado del propio albarán:
     azul de imprenta, cajas con etiqueta sobre el borde,
     y el rojo del número correlativo como único acento.
     ============================================================ */

  :root {
    --papel:      #F3F5F7;
    --campo:      #FFFFFF;
    --campo-alt:  #EAEEF2;
    --tinta:      #12283C;
    --tinta-med:  #46606F;
    --tinta-baja: #6C808F;
    --linea:      #C6D0D9;
    --linea-fina: #DDE4EA;
    --serie:      #B32B1F;
    --serie-tenue:#F5E3E0;
    --marca:      #33F200;

    --llevada:  #2F6E46;
    --cambio:   #9C6A14;
    --retirada: #A93B2C;

    --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
    --mono: "Cascadia Mono", Consolas, "SF Mono", "Roboto Mono", "Courier New", monospace;

    --paso: clamp(1.5rem, 3vw, 2.5rem);
    --radio: 3px;
  }

  /* Documento de tema único (claro). No hay variante oscura a propósito:
     es un documento comercial que se lee en pantalla y se imprime, y el
     tema oscuro dejaba ilegibles varias piezas. */

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }

  .envoltorio {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 2.5rem) 5rem;
  }

  /* --- Tipografía base --------------------------------------- */

  h1, h2, h3, h4 { text-wrap: balance; margin: 0; }

  h2 {
    font-size: clamp(1.5rem, 3vw, 2.05rem);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.015em;
  }

  h3 {
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.005em;
  }

  p { margin: 0; }

  .prosa { max-width: 66ch; display: flex; flex-direction: column; gap: 1rem; }
  .prosa strong { font-weight: 700; }

  .sutil { color: var(--tinta-med); }

  .destacado {
    font-family: var(--serif);
    font-size: clamp(1.15rem, 2.2vw, 1.4rem);
    line-height: 1.5;
    color: var(--tinta);
    max-width: 40ch;
  }

  .etiqueta {
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tinta-baja);
    font-weight: 600;
  }

  .serial {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--serie);
    font-variant-numeric: tabular-nums;
  }

  a { color: inherit; }

  /* --- Marca del autor ---------------------------------------- */

  .filo-marca {
    height: 3px;
    background: var(--marca);
    margin: 0 calc(-1 * clamp(1rem, 4vw, 2.5rem));
  }

  .barra-autor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    flex-wrap: wrap;
    padding: 1.15rem 0 0.95rem;
    border-bottom: 1px solid var(--linea-fina);
  }

  /* Un solo logotipo, el de texto negro: el fondo es siempre claro. */
  .logo-atinfor { display: block; height: 30px; width: auto; }

  .bloque-autor {
    border: 1px solid var(--linea);
    border-top: 3px solid var(--marca);
    border-radius: var(--radio);
    background: var(--campo);
    padding: clamp(1.4rem, 3vw, 2rem);
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    align-items: start;
  }

  .datos-empresa {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    font-size: 0.93rem;
  }

  .datos-empresa .fila {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    gap: 0.75rem;
    align-items: baseline;
  }

  .datos-empresa .fila > span:first-child {
    font-family: var(--mono);
    font-size: 0.63rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--tinta-baja);
    font-weight: 600;
  }

  .datos-empresa .fila > span:last-child { color: var(--tinta); }
  .datos-empresa a { text-decoration: none; border-bottom: 1px solid var(--linea); }
  .datos-empresa a:hover { border-bottom-color: var(--marca); }

  .pie-marca {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    width: 100%;
  }

  /* --- Cabecera ----------------------------------------------- */

  .cabecera {
    border-bottom: 2px solid var(--tinta);
    padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.75rem, 4vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
  }

  .cabecera-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    align-items: baseline;
    justify-content: space-between;
    border-bottom: 1px solid var(--linea);
    padding-bottom: 0.6rem;
  }

  .cabecera h1 {
    font-size: clamp(2.1rem, 6.2vw, 3.9rem);
    line-height: 1.03;
    font-weight: 700;
    letter-spacing: -0.03em;
    max-width: 16ch;
  }

  .cabecera h1 em {
    font-style: normal;
    color: var(--serie);
  }

  .entradilla {
    font-family: var(--serif);
    font-size: clamp(1.1rem, 2.1vw, 1.32rem);
    line-height: 1.55;
    color: var(--tinta-med);
    max-width: 52ch;
  }

  .tira-datos {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2.25rem;
    padding-top: 0.5rem;
  }

  .tira-datos div {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0;
  }

  .tira-datos b {
    font-size: 0.95rem;
    font-weight: 600;
  }

  /* --- Secciones y "campos" del impreso ----------------------- */

  section { padding-top: clamp(3rem, 7vw, 5rem); }

  .titulo-seccion {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    border-bottom: 1px solid var(--tinta);
    padding-bottom: 0.55rem;
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  }

  .titulo-seccion h2 { flex: 1; }

  .campo {
    position: relative;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--campo);
    padding: 1.6rem 1.5rem 1.5rem;
  }

  .campo > .etiqueta:first-child {
    position: absolute;
    top: -0.52rem;
    left: 1rem;
    background: var(--campo);
    padding: 0 0.5rem;
  }

  .campo-serial {
    position: absolute;
    top: -0.5rem;
    right: 1rem;
    background: var(--campo);
    padding: 0 0.5rem;
  }

  .rejilla {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  }

  .rejilla-2 {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }

  .campo h3 { margin-bottom: 0.45rem; }
  .campo p { color: var(--tinta-med); font-size: 0.95rem; }

  /* --- Comparativa hoy / sistema ------------------------------ */

  .comparativa {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: start;
  }

  .columna-hoy, .columna-sistema {
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .columna-hoy {
    background: var(--campo-alt);
    color: var(--tinta-med);
  }

  .columna-sistema {
    background: var(--campo);
    border-color: var(--tinta);
    border-width: 2px;
  }

  .lista-marcada {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    font-size: 0.95rem;
  }

  /* Sangría francesa con la raya colgando: el <li> se queda como bloque normal
     para que <strong>, <em> o enlaces sigan fluyendo dentro del párrafo.
     (Con display:grid cada elemento hijo se convertía en una celda y se apilaba.) */
  .lista-marcada li {
    position: relative;
    padding-left: 1.75rem;
  }

  .lista-marcada li::before {
    content: "—";
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--mono);
    color: var(--tinta-baja);
  }

  .columna-sistema .lista-marcada li::before {
    content: "→";
    color: var(--serie);
  }

  /* --- Recorrido animado (pieza central) ---------------------- */

  .recorrido {
    display: grid;
    gap: clamp(1.5rem, 4vw, 2.75rem);
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    align-items: start;
  }

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

  .movil-marco {
    position: sticky;
    top: 1.5rem;
    justify-self: center;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 9 / 17.5;
    background: #10171C;
    border: 8px solid #10171C;
    border-radius: 26px;
    box-shadow: 0 18px 40px -18px rgba(6, 18, 28, 0.55);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .movil-barra {
    flex: 0 0 auto;
    background: #10171C;
    color: #8FA3B0;
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0.85rem 0.4rem;
  }

  .movil-pantalla {
    flex: 1;
    position: relative;
    background: #F7F9FA;
    color: #12283C;
    overflow: hidden;
  }

  .pantalla {
    position: absolute;
    inset: 0;
    padding: 0.9rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
  }

  .pantalla.activa {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .pantalla-titulo {
    font-family: var(--mono);
    font-size: 0.58rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #6C808F;
    font-weight: 600;
  }

  /* piezas reutilizables dentro del móvil */

  .visor {
    flex: 1;
    border: 2px dashed #9FB0BC;
    border-radius: 6px;
    background: #E7ECEF;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    min-height: 90px;
  }

  .chapa {
    background: #4A5A66;
    color: #F2F5F7;
    font-family: var(--mono);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.12em;
    padding: 0.45rem 0.7rem;
    border-radius: 2px;
    border: 2px solid #33424C;
    box-shadow: inset 0 0 0 2px #5D6E7A;
  }

  .barrido {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--serie);
    opacity: 0.85;
    animation: barrer 2.1s ease-in-out infinite;
  }

  @keyframes barrer {
    0%, 100% { top: 12%; }
    50%      { top: 84%; }
  }

  .qr-cuadro {
    width: 78px;
    height: 78px;
    background:
      linear-gradient(90deg, #10171C 22%, transparent 22% 30%, #10171C 30% 38%, transparent 38% 52%, #10171C 52% 60%, transparent 60% 72%, #10171C 72% 80%, transparent 80%),
      linear-gradient(#10171C 18%, transparent 18% 28%, #10171C 28% 34%, transparent 34% 50%, #10171C 50% 62%, transparent 62% 70%, #10171C 70% 82%, transparent 82%),
      #F7F9FA;
    border: 4px solid #F7F9FA;
    outline: 2px solid #10171C;
  }

  .ficha {
    background: #FFFFFF;
    border: 1px solid #D3DBE1;
    border-radius: 4px;
    padding: 0.5rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  .ficha b { font-size: 0.78rem; font-weight: 700; }
  .ficha span { font-size: 0.66rem; color: #6C808F; }

  .tarea {
    border: 1px solid #D3DBE1;
    border-left: 5px solid var(--llevada);
    border-radius: 4px;
    background: #FFFFFF;
    padding: 0.5rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
  }

  .tarea.t-cambio   { border-left-color: var(--cambio); }
  .tarea.t-retirada { border-left-color: var(--retirada); }
  .tarea.t-atenuada { opacity: 0.45; }

  .tarea b { font-size: 0.74rem; font-weight: 700; }
  .tarea span { font-size: 0.63rem; color: #6C808F; }

  .tarea-tipo {
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    font-weight: 700;
    text-transform: uppercase;
  }

  .t-llevada .tarea-tipo  { color: var(--llevada); }
  .t-cambio .tarea-tipo   { color: var(--cambio); }
  .t-retirada .tarea-tipo { color: var(--retirada); }

  .boton-movil {
    background: #12283C;
    color: #FFFFFF;
    border-radius: 4px;
    text-align: center;
    padding: 0.6rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.01em;
  }

  .boton-movil.secundario {
    background: transparent;
    color: #12283C;
    border: 1.5px solid #12283C;
  }

  .aviso-push {
    background: #FFFFFF;
    border: 1px solid #C6D0D9;
    border-left: 5px solid var(--serie);
    border-radius: 6px;
    padding: 0.6rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    box-shadow: 0 8px 18px -10px rgba(6, 18, 28, 0.5);
    animation: entrar-aviso 0.5s ease both;
  }

  @keyframes entrar-aviso {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: none; }
  }

  .aviso-push b { font-size: 0.76rem; }
  .aviso-push span { font-size: 0.65rem; color: #46606F; }

  .residuos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35rem;
    flex: 1;
    align-content: start;
  }

  .residuo {
    border: 1px solid #D3DBE1;
    border-radius: 4px;
    background: #FFFFFF;
    padding: 0.4rem 0.35rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.6rem;
    text-align: center;
    line-height: 1.25;
  }

  .residuo.elegido {
    border: 2px solid #12283C;
    background: #E9EFF3;
    font-weight: 700;
  }

  .residuo svg { width: 22px; height: 22px; }

  .lienzo-firma {
    flex: 1;
    background: #FFFFFF;
    border: 1px solid #D3DBE1;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
  }

  .trazo-firma {
    fill: none;
    stroke: #12283C;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 340;
    stroke-dashoffset: 340;
  }

  .pantalla.activa .trazo-firma {
    animation: firmar 1.9s ease-out 0.35s forwards;
  }

  @keyframes firmar {
    to { stroke-dashoffset: 0; }
  }

  .sello-ok {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--llevada);
    font-weight: 700;
    font-size: 0.82rem;
  }

  .sello-ok svg { width: 20px; height: 20px; }

  .correo {
    background: #FFFFFF;
    border: 1px solid #D3DBE1;
    border-radius: 4px;
    padding: 0.55rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .correo .de { font-size: 0.6rem; color: #6C808F; font-family: var(--mono); }
  .correo .asunto { font-size: 0.74rem; font-weight: 700; }

  .adjunto {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid #D3DBE1;
    border-radius: 3px;
    padding: 0.28rem 0.4rem;
    font-family: var(--mono);
    font-size: 0.58rem;
    color: #46606F;
  }

  /* --- Lista de pasos ----------------------------------------- */

  .pasos {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--linea-fina);
  }

  .paso-btn {
    all: unset;
    cursor: pointer;
    display: grid;
    grid-template-columns: 4.4rem 1fr;
    gap: 0 1rem;
    padding: 0.95rem 0.9rem 0.95rem 0.75rem;
    border-bottom: 1px solid var(--linea-fina);
    border-left: 3px solid transparent;
    transition: background 0.2s ease, border-color 0.2s ease;
  }

  .paso-btn:hover { background: var(--campo); }

  .paso-btn:focus-visible {
    outline: 2px solid var(--serie);
    outline-offset: -2px;
  }

  .paso-btn[aria-current="true"] {
    background: var(--campo);
    border-left-color: var(--serie);
  }

  .paso-hora {
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--tinta-baja);
    font-variant-numeric: tabular-nums;
    padding-top: 0.12rem;
  }

  .paso-btn[aria-current="true"] .paso-hora { color: var(--serie); }

  .paso-texto { display: flex; flex-direction: column; gap: 0.3rem; }
  .paso-texto b { font-size: 1rem; font-weight: 700; }
  .paso-texto span { font-size: 0.92rem; color: var(--tinta-med); }

  .mandos {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-top: 1.1rem;
    flex-wrap: wrap;
  }

  .mando {
    all: unset;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--tinta);
    border: 1px solid var(--tinta);
    border-radius: var(--radio);
    padding: 0.45rem 0.9rem;
    transition: background 0.2s ease, color 0.2s ease;
  }

  .mando:hover { background: var(--tinta); color: var(--papel); }
  .mando:focus-visible { outline: 2px solid var(--serie); outline-offset: 2px; }

  .riel {
    flex: 1;
    min-width: 120px;
    height: 3px;
    background: var(--linea-fina);
    border-radius: 2px;
    overflow: hidden;
  }

  .riel-relleno {
    height: 100%;
    width: 0%;
    background: var(--serie);
    transition: width 0.3s linear;
  }

  /* --- Circuito del contenedor -------------------------------- */

  .circuito { width: 100%; height: auto; overflow: visible; }
  .circuito text { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; }
  .circuito .nodo-caja { fill: var(--campo); stroke: var(--tinta); stroke-width: 1.4; }
  .circuito .nodo-txt  { fill: var(--tinta); font-weight: 700; }
  .circuito .arco      { fill: none; stroke: var(--linea); stroke-width: 1.4; }
  .circuito .arco-act  { stroke: var(--serie); stroke-width: 1.8; stroke-dasharray: 5 4; }
  .circuito .arco-txt  { fill: var(--tinta-baja); }
  .circuito .dato      { fill: var(--serie); }

  .marco-scroll { overflow-x: auto; }

  /* --- Copias de seguridad ------------------------------------ */

  .copias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.9rem;
  }

  .copia {
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--campo);
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
  }

  .copia .n {
    font-family: var(--mono);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--serie);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .copia b { font-size: 0.9rem; }
  .copia span { font-size: 0.85rem; color: var(--tinta-med); }

  /* --- Bloque destacado a dos columnas ------------------------ */

  .bloque-marcado {
    border: 2px solid var(--tinta);
    border-radius: var(--radio);
    background: var(--campo);
    padding: clamp(1.5rem, 3.5vw, 2.25rem);
    display: grid;
    gap: 1.75rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  .insignia {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--serie-tenue);
    color: var(--serie);
    border-radius: 100px;
    padding: 0.3rem 0.8rem;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    align-self: flex-start;
  }

  .fecha-limite {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    border-left: 3px solid var(--serie);
    padding-left: 1rem;
  }

  .fecha-limite .grande {
    font-family: var(--mono);
    font-size: clamp(1.7rem, 4vw, 2.4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  /* --- Figura de la matrícula real ---------------------------- */

  .figura {
    margin: 0;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--campo);
    overflow: hidden;
  }

  .figura img {
    display: block;
    width: 100%;
    height: auto;
  }

  .figura figcaption {
    padding: 1.2rem 1.3rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

  .figura figcaption p {
    font-size: 0.95rem;
    color: var(--tinta-med);
    max-width: 72ch;
  }

  .dos-numeros {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  }

  .numero-caja {
    border-left: 3px solid var(--linea);
    padding-left: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .numero-caja.pintado { border-left-color: var(--serie); }

  .numero-caja code {
    font-family: var(--mono);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--tinta);
  }

  .numero-caja b { font-size: 0.9rem; }
  .numero-caja span { font-size: 0.88rem; color: var(--tinta-med); }

  /* --- Preguntas frecuentes ----------------------------------- */

  .faq {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--linea-fina);
  }

  .faq-item {
    display: grid;
    gap: 0.35rem;
    padding: 1.05rem 0.25rem;
    border-bottom: 1px solid var(--linea-fina);
  }

  .faq-item b { font-size: 1rem; font-weight: 700; }
  .faq-item span { font-size: 0.95rem; color: var(--tinta-med); max-width: 78ch; }

  /* --- Tabla de opcionales ------------------------------------ */

  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.93rem;
    min-width: 640px;
  }

  thead th {
    text-align: left;
    font-family: var(--mono);
    font-size: 0.64rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--tinta-baja);
    font-weight: 600;
    padding: 0 0.85rem 0.6rem;
    border-bottom: 1.5px solid var(--tinta);
  }

  tbody td {
    padding: 0.95rem 0.85rem;
    border-bottom: 1px solid var(--linea-fina);
    vertical-align: top;
    color: var(--tinta-med);
  }

  /* Cabecera de fila. La usan las tablas de datos del aviso legal y de la
     politica de privacidad, donde la primera columna es el nombre del dato
     y no una columna mas. Sin esta regla habia que repetir el mismo style
     a mano en cada celda. */
  tbody th {
    text-align: left;
    vertical-align: top;
    padding: 0.95rem 0.85rem;
    border-bottom: 1px solid var(--linea-fina);
    color: var(--tinta);
    font-weight: 700;
    width: 30%;
    min-width: 10rem;
  }

  tbody td:first-child {
    color: var(--tinta);
    font-weight: 700;
    width: 21%;
  }

  tbody tr:hover td { background: var(--campo); }

  /* --- Preguntas ----------------------------------------------- */

  .preguntas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
    counter-reset: q;
    border-top: 1px solid var(--linea-fina);
  }

  /* Misma razón que en .lista-marcada: bloque normal + número absoluto. */
  .preguntas li {
    counter-increment: q;
    position: relative;
    padding: 0.85rem 0.25rem 0.85rem 3.4rem;
    border-bottom: 1px solid var(--linea-fina);
  }

  .preguntas li::before {
    content: counter(q, decimal-leading-zero);
    position: absolute;
    left: 0.25rem;
    top: 0.95rem;
    font-family: var(--mono);
    font-size: 0.78rem;
    color: var(--serie);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  /* --- Arranque ------------------------------------------------ */

  .arranque {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    counter-reset: fase;
  }

  .fase {
    counter-increment: fase;
    border-top: 3px solid var(--tinta);
    padding-top: 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .fase::before {
    content: "Paso " counter(fase);
    font-family: var(--mono);
    font-size: 0.64rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--tinta-baja);
    font-weight: 600;
  }

  .fase b { font-size: 1rem; }
  .fase span { font-size: 0.92rem; color: var(--tinta-med); }

  /* --- Pie ------------------------------------------------------ */

  .pie {
    margin-top: clamp(3rem, 7vw, 5rem);
    border-top: 2px solid var(--tinta);
    padding-top: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.85rem;
    color: var(--tinta-baja);
  }

  .nota {
    border-left: 3px solid var(--linea);
    padding-left: 1rem;
    color: var(--tinta-med);
    font-size: 0.93rem;
    max-width: 64ch;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
  }

  /* ============================================================
     Añadidos comunes: botón de impresión, tabla de precios,
     puerta de contraseña y hoja de estilo para papel.
     ============================================================ */

  /* --- Botón flotante de impresión ---------------------------- */

  .boton-imprimir {
    position: fixed;
    right: clamp(0.85rem, 2.5vw, 1.75rem);
    bottom: clamp(0.85rem, 2.5vw, 1.75rem);
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: var(--tinta);
    color: var(--papel);
    border: none;
    border-radius: 100px;
    padding: 0.7rem 1.15rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 26px -12px rgba(6, 18, 28, 0.65);
    transition: transform 0.15s ease, box-shadow 0.2s ease;
  }

  .boton-imprimir:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -12px rgba(6, 18, 28, 0.75);
  }

  .boton-imprimir:focus-visible {
    outline: 2px solid var(--marca);
    outline-offset: 3px;
  }

  .boton-imprimir svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* --- Tabla de precios / tramos ------------------------------- */

  .tramos {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

  .tramo {
    border: 1px solid var(--linea);
    border-top: 3px solid var(--linea);
    border-radius: var(--radio);
    background: var(--campo);
    padding: 1.35rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .tramo.destacada { border-top-color: var(--serie); border-color: var(--tinta); }

  .tramo .cuando {
    font-family: var(--mono);
    font-size: 0.64rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--tinta-baja);
    font-weight: 600;
  }

  .tramo .precio {
    font-family: var(--mono);
    font-size: clamp(1.75rem, 4vw, 2.3rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }

  .tramo .precio small {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--tinta-baja);
    letter-spacing: 0;
  }

  .tramo p { font-size: 0.93rem; color: var(--tinta-med); }

  .cifra-suelta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    border-left: 3px solid var(--serie);
    padding-left: 1rem;
  }

  .cifra-suelta .grande {
    font-family: var(--mono);
    font-size: clamp(1.6rem, 3.6vw, 2.2rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }

  /* --- Puerta de contraseña ----------------------------------- */

  .puerta {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
  }

  .puerta-caja {
    width: 100%;
    max-width: 400px;
    border: 1px solid var(--linea);
    border-top: 3px solid var(--marca);
    border-radius: var(--radio);
    background: var(--campo);
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
  }

  .puerta-caja img { height: 28px; width: auto; align-self: flex-start; }
  .puerta-caja h1 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
  .puerta-caja p { font-size: 0.93rem; color: var(--tinta-med); }

  .puerta-caja input {
    font-family: var(--sans);
    font-size: 1rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio);
    background: var(--papel);
    color: var(--tinta);
    width: 100%;
  }

  .puerta-caja input:focus-visible { outline: 2px solid var(--serie); outline-offset: 1px; }

  .puerta-caja button {
    font-family: var(--mono);
    font-size: 0.74rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.7rem 1rem;
    border: none;
    border-radius: var(--radio);
    background: var(--tinta);
    color: var(--papel);
    cursor: pointer;
  }

  .puerta-error {
    font-size: 0.9rem;
    color: var(--serie);
    min-height: 1.2em;
  }

  /* ============================================================
     IMPRESIÓN / PDF
     ============================================================ */

  @media print {
    /* Tinta algo más contrastada y fondos en blanco puro para papel. */
    :root {
      --papel:      #FFFFFF;
      --campo:      #FFFFFF;
      --campo-alt:  #F2F4F6;
      --tinta:      #10222F;
      --tinta-med:  #3D5464;
      --tinta-baja: #5F7280;
      --linea:      #B9C4CD;
      --linea-fina: #D8DFE5;
      --serie:      #A32519;
      --serie-tenue:#F6E7E5;
      --marca:      #2FBF00;
    }

    @page { margin: 14mm 13mm; }

    body {
      background: #FFFFFF;
      font-size: 10.5pt;
      line-height: 1.45;
    }

    .envoltorio { max-width: none; padding: 0; }

    /* Fuera todo lo que solo sirve en pantalla. */
    .boton-imprimir,
    .movil-marco,
    .mandos,
    .filo-marca { display: none !important; }

    /* Nada pegajoso en papel. */
    .movil-marco, .barra-autor { position: static !important; }

    .recorrido { grid-template-columns: 1fr !important; }

    /* Cortes de página con criterio. */
    section { page-break-inside: auto; break-inside: auto; }

    .campo, .tramo, .copia, .fase, .faq-item, .figura,
    .numero-caja, .cifra-suelta, .bloque-marcado,
    .columna-hoy, .columna-sistema, .paso-btn, .preguntas li {
      page-break-inside: avoid;
      break-inside: avoid;
    }

    h2, h3, .titulo-seccion {
      page-break-after: avoid;
      break-after: avoid;
    }

    section { page-break-before: auto; }
    #alcance, #opcionales, #arranque, #autor { page-break-before: always; }

    thead { display: table-header-group; }
    tr, img, figure { page-break-inside: avoid; break-inside: avoid; }

    table { min-width: 0; font-size: 9.5pt; }
    .marco-scroll { overflow: visible !important; }

    /* Sombras y adornos fuera; bordes finos y limpios. */
    * { box-shadow: none !important; }

    .campo, .tramo, .copia, .figura, .bloque-marcado,
    .columna-hoy, .columna-sistema, .puerta-caja {
      border-color: var(--linea) !important;
      background: #FFFFFF !important;
    }

    a { text-decoration: none; color: inherit; }

    .figura img { max-height: 78mm; object-fit: cover; }
  }