/* =========================================================================
   facturaonline — Hoja principal · estilo «Verde bosque»
   Base + layout + componentes. Mobile-first, sin framework. Todos los
   valores salen de tokens.css; la guía visual está en ESTILO_REDISENO.md.
   ========================================================================= */

/* ----------------------------- Reset ligero ---------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 88px; /* los anclajes no quedan bajo la cabecera fija */
}
body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.65;
    color: var(--body);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a {
    color: var(--brand);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--t-fast), text-decoration-color var(--t-fast);
}
a:hover { color: var(--brand-700); }
h1, h2, h3, h4 {
    font-family: var(--font-display);
    color: var(--ink);
    line-height: 1.12;
    font-weight: var(--fw-heavy);
    letter-spacing: -0.02em;
    text-wrap: balance;
}
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { touch-action: manipulation; }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.88em; }
::selection { background: var(--brand-copy); color: var(--ink); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 2px; }

/* ----------------------------- Layout base ----------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--sp-8); }
.section--soft { background: var(--surface); }
.section--tight { padding-block: var(--sp-7); }
.section--tall { padding-block: var(--sp-9); }

.section-head { max-width: 52rem; margin-bottom: var(--sp-6); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: var(--fs-h2); }
.section-head p { margin-top: var(--sp-3); font-size: var(--fs-lead); color: var(--muted); }
.section-head--center p { margin-inline: auto; max-width: 46rem; }

.lead { font-size: var(--fs-lead); color: var(--muted); }
.text-brand { color: var(--brand); }
.text-accent { color: var(--brand); }

/* ------------------------------ Botones --------------------------------
   Altura mínima de 44 px (objetivo táctil). Un solo botón principal por
   bloque; el resto, contorno. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 44px;
    padding: 0.7rem 1.3rem;
    border-radius: var(--radius-pill);
    border: 1.5px solid transparent;
    font-weight: var(--fw-bold);
    font-size: var(--fs-body);
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t), color var(--t), border-color var(--t), transform var(--t-fast);
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand); color: var(--white); }
.btn--primary:hover { background: var(--brand-600); color: var(--white); }
.btn--primary:active { background: var(--brand-700); }
.btn--outline { background: var(--paper); color: var(--brand); border-color: var(--brand); }
.btn--outline:hover { background: var(--surface); color: var(--brand-700); border-color: var(--brand-700); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { color: var(--brand); }
.btn--lg { min-height: 52px; padding: 0.85rem 1.6rem; font-size: 1.0625rem; }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; pointer-events: none; }
@media (max-width: 520px) { .btn { white-space: normal; text-align: center; } }

/* La flecha que avanza: una de las pocas animaciones del sitio. */
.btn .ico-arrow { width: 18px; height: 18px; flex: none; stroke-width: 2.2; transition: transform var(--t-icon); }
.btn:hover .ico-arrow, .btn:focus-visible .ico-arrow { transform: translateX(3px); }

/* Todos los botones de llamada a la acción son el mismo botón (22/09/2026, «que haya
   continuidad»): los de contenido van siempre en grande (.btn--lg) y todos se comportan
   igual. Al pasar el ratón crecen un poco y los cruza una franja de luz lisa (sin
   degradado, ESTILO §7). El principal lleva siempre la flecha que avanza; se pinta aquí
   con una máscara para no depender de acordarse de ponerla en cada vista. */
.btn--lg {
    position: relative; overflow: hidden; isolation: isolate;
    transition: background var(--t), color var(--t), border-color var(--t), transform 300ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.btn--lg::after {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; z-index: -1; pointer-events: none;
    background: color-mix(in srgb, var(--white) 22%, transparent);
    transform: translateX(-180%) skewX(-20deg); transition: transform 700ms var(--ease-out);
}
.btn--outline.btn--lg::after { background: color-mix(in srgb, var(--brand-copy) 70%, transparent); }
.btn--lg:hover { transform: scale(1.04); box-shadow: var(--shadow-card); }
.btn--lg:hover::after { transform: translateX(360%) skewX(-20deg); }
.btn--lg:active { transform: scale(1.01); }
a.btn--primary.btn--lg::before {
    content: ""; order: 1; width: 18px; height: 18px; flex: none; background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform var(--t-icon);
}
a.btn--primary.btn--lg:hover::before, a.btn--primary.btn--lg:focus-visible::before { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .btn--lg:hover { transform: none; } .btn--lg::after { display: none; } }

/* ------------------------------- Badges ---------------------------------
   El texto siempre dice el estado: el color solo lo refuerza. */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: 1.5;
    background: var(--brand-copy);
    color: var(--brand-700);
    vertical-align: middle;
    white-space: nowrap;
}
.badge--accent { background: var(--ok-tint); color: var(--ok); }
.badge--soft { background: var(--wait-tint); color: var(--wait); }
.badge--warn { background: var(--warn-tint); color: var(--warn); }
.badge--danger { background: var(--danger-tint); color: var(--danger); }
/* «En habilitación» / «en preparación»: pastilla en blanco con contorno del color de marca. */
.badge--pending { background: var(--paper); color: var(--brand-700); box-shadow: inset 0 0 0 1.5px var(--brand); }

/* ------------------------------- Grids --------------------------------- */
.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) {
    .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* ----------------------- Hojas (tarjetas) ------------------------------
   Una tarjeta es una hoja del talonario: blanca, borde fino y esquinas de
   6 px. Solo las que son un enlace reaccionan al pasar el ratón, para no
   prometer un clic que no existe. */
.card {
    display: block;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: var(--sp-6);
    color: inherit;
    text-decoration: none;
}
a.card { transition: border-color var(--t), box-shadow var(--t), transform var(--t); }
a.card:hover, a.card--hover:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
    color: inherit;
}
.card__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.card__icon {
    flex: none;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: var(--radius);
    background: var(--brand-copy);
    color: var(--brand);
}
.card__icon svg { width: 22px; height: 22px; stroke-width: var(--icon-stroke); }
.card h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.card__head h3 { margin-bottom: 0; }
.card h3 .badge { margin-left: var(--sp-1); }
.card p { color: var(--muted); font-size: var(--fs-sm); }
.card > .badge { margin-bottom: var(--sp-3); }
.card .checklist { margin-top: var(--sp-4); }

/* Hoja: una tarjeta blanca que contiene un formulario, una tabla o la factura
   de ejemplo. Suave y redondeada, como .card. */
.hoja {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}
.hoja--grande { box-shadow: var(--shadow-sheet); }

/* ------------------------------ Checklist ------------------------------ */
.checklist { display: grid; gap: var(--sp-3); }
.checklist li { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--body); }
.checklist li::before {
    content: "";
    flex: none;
    width: 22px; height: 22px;
    margin-top: 2px;
    /* El visto bueno se dibuja con dos bordes: así toma el color del token. Sin círculo
       de fondo: todas las listas de la web usan el mismo check simple. */
    background-image: linear-gradient(var(--brand), var(--brand)), linear-gradient(var(--brand), var(--brand));
    background-size: 2px 7px, 11px 2px;
    background-position: 7px 10px, 7px 15px;
    background-repeat: no-repeat;
    transform: rotate(-45deg);
}
.list-plain { list-style: none; }

/* Pasos numerados en lista (alta): el número va en el círculo. */
.checklist--steps { counter-reset: paso; }
.checklist--steps li { counter-increment: paso; }
.checklist--steps li::before {
    content: counter(paso);
    background: var(--brand);
    background-image: none;
    color: var(--white);
    transform: none;
    display: grid; place-items: center;
    font-size: var(--fs-xs); font-weight: var(--fw-heavy);
    width: 26px; height: 26px; margin-top: 0;
}

/* --------------------------- Cabecera / nav ----------------------------
   Arriba del todo, una barra blanca a lo ancho, sin línea debajo. Al bajar, app.js
   pone `.is-flotante` y la barra se despega del borde (como en rehojo.com): se separa un poco
   de arriba y de los lados, se redondea y queda medio translúcida, con desenfoque de lo que
   pasa por debajo. **No se estrecha**: el relleno compensa el margen, así que el logo, el
   menú y los botones no se mueven de sitio. La cabecera mide siempre --nav-alto, así que el
   contenido tampoco salta. El menú va centrado en la página (rejilla 1fr auto 1fr). */
.site-header {
    --nav-alto: 80px;
    --nav-flotante-alto: 64px;
    --nav-despegue: 14px;   /* separación de la barra flotante respecto a los lados */
    --nav-despegue-arriba: 20px;   /* y respecto al borde superior; puede asomar bajo la cabecera */
    position: sticky; top: 0; z-index: var(--z-header);
    height: var(--nav-alto);
    /* Sin esto, el margen de arriba de la barra flotante colapsa hacia fuera de la
       cabecera, el sticky lo anula y la barra se queda pegada al borde. */
    display: flow-root;
    background: var(--paper);
    transition: background var(--t);
}
.site-header.is-flotante {
    background: transparent;
    /* El hueco alrededor de la barra flotante no debe tapar clics del contenido. */
    pointer-events: none;
}
.nav {
    pointer-events: auto;
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-6);
    height: var(--nav-alto);
    /* Márgenes calculados (no `auto`) para que el despegue se anime sin mover el contenido. */
    margin: 0 max(0px, (100% - var(--container)) / 2);
    padding-inline: var(--gutter);
    border-radius: 0;
    background: transparent;
    transition: height 400ms var(--ease-out), margin 400ms var(--ease-out), padding 400ms var(--ease-out),
                border-radius 400ms var(--ease-out),
                background var(--t), box-shadow 400ms var(--ease-out);
}
.is-flotante .nav {
    height: var(--nav-flotante-alto);
    margin: var(--nav-despegue-arriba) max(var(--nav-despegue), (100% - var(--container)) / 2 + var(--nav-despegue)) 0;
    padding-inline: max(var(--sp-4), var(--gutter) - var(--nav-despegue));
    border-radius: 22px;
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    box-shadow: 0 4px 14px rgba(20, 33, 27, 0.06), 0 20px 45px -12px rgba(20, 33, 27, 0.16);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .is-flotante .nav {
        background: color-mix(in srgb, var(--paper) 78%, transparent);
        -webkit-backdrop-filter: blur(16px) saturate(1.6);
        backdrop-filter: blur(16px) saturate(1.6);
    }
}

.brand-link { justify-self: start; text-decoration: none; display: inline-flex; border-radius: var(--radius-sm); }
.brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-weight: var(--fw-heavy); color: var(--ink); font-size: 1.28rem; letter-spacing: -0.02em; line-height: 1; }
.brand__mark { width: 34px; height: 34px; flex: none; }
/* Logotipo dibujado (partials/logo.php): su alto sigue al tamaño de letra de .brand. El
   viewBox es de 124 de alto (el chip con aire) para 76,9 de letra, así que 1,69em de
   caja son ~1,05em de letra. El ancho sale de la proporción y no del contenedor: la regla
   global `svg { max-width: 100% }` lo encogía en cuanto la barra iba justa. */
.brand__logotipo { display: block; height: 1.69em; width: auto; aspect-ratio: 725.1 / 124; max-width: none; flex: none; overflow: visible; }
/* El punto de «conectado» del chip late: lo anima el propio SVG (<animate> en
   partials/logo.php, igual en todos los navegadores). Con «reducir movimiento», fuera. */
@media (prefers-reduced-motion: reduce) { .brand__vivo { display: none; } }

/* El menú respira: separación que crece con la pantalla hasta 2,25 rem. */
/* El menú se centra en el hueco que queda ENTRE el logo y las acciones (la pista 1fr), no en
   la pantalla: así hay la misma distancia del logo a «Producto» que de «Contacto» a
   «Iniciar sesión». Centrado en la pantalla quedaba empujado a la derecha, porque las
   acciones ocupan el doble que el logo. */
.nav__menu { justify-self: center; display: flex; align-items: center; gap: clamp(var(--sp-1), 2.4vw - 0.5rem, 2.25rem); }
.nav__item { position: relative; }
.nav__link {
    display: inline-flex; align-items: center; gap: 0.3rem;
    min-height: 44px;
    padding: 0.45rem 0.75rem; border-radius: var(--radius-sm);
    border: 0; background: none; cursor: pointer;
    color: var(--body); font-weight: var(--fw-bold); font-size: var(--fs-sm);
    text-decoration: none;
    transition: color var(--t-fast), background var(--t-fast);
}
.nav__link:hover, .nav__item.open > .nav__link { color: var(--ink); background: var(--surface); }
.nav__link[aria-current] { color: var(--brand-700); }
.nav__link .caret { width: 15px; height: 15px; stroke-width: 2.2; opacity: .6; transition: transform var(--t), opacity var(--t); }
.nav__item.open .caret { transform: rotate(180deg); opacity: 1; }

/* Desplegable: una lista vertical y limpia bajo su botón. Icono fino, título y una línea
   de descripción; sin baldosas ni columnas. */
.nav__dropdown {
    position: absolute; top: calc(100% + 12px); left: 50%;
    width: 300px;
    display: grid; gap: 2px;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: 0 4px 14px rgba(20, 33, 27, 0.06), 0 24px 48px -16px rgba(20, 33, 27, 0.2);
    padding: var(--sp-2);
    z-index: var(--z-menu);
    opacity: 0; visibility: hidden;
    transform: translate(-50%, 6px);
    transition: opacity var(--t), transform var(--t), visibility 0s linear 220ms;
}
/* Puente invisible sobre el hueco: el ratón pasa del botón al panel sin que se cierre. */
.nav__dropdown::before { content: ""; position: absolute; inset: -14px 0 auto; height: 14px; }
.nav__item.open .nav__dropdown,
.no-js .nav__item--has-menu:hover .nav__dropdown,
.no-js .nav__item--has-menu:focus-within .nav__dropdown {
    opacity: 1; visibility: visible; transform: translate(-50%, 0);
    transition: opacity var(--t), transform var(--t), visibility 0s;
}
.nav__opcion {
    display: flex; gap: var(--sp-3); align-items: flex-start;
    padding: 0.7rem var(--sp-3); border-radius: 12px;
    color: var(--ink); text-decoration: none; line-height: 1.35;
    transition: background var(--t-fast);
}
.nav__opcion:hover, .nav__opcion[aria-current="page"] { background: var(--surface); color: var(--ink); }
.nav__ico { flex: none; display: grid; place-items: center; color: var(--muted); padding-top: 1px; transition: color var(--t-fast); }
.nav__svg { flex: none; width: 20px; height: 20px; stroke-width: var(--icon-stroke); }
.nav__opcion:hover .nav__ico, .nav__opcion[aria-current="page"] .nav__ico { color: var(--brand); }
.nav__texto { display: grid; gap: 2px; min-width: 0; }
.nav__titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-2); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.nav__opcion[aria-current="page"] .nav__titulo { color: var(--brand-700); }
.nav__desc { color: var(--muted); font-size: var(--fs-xs); }
.nav__pronto { font-size: 0.6875rem; padding: 0.1rem 0.5rem; font-weight: var(--fw-bold); }

.nav__actions { justify-self: end; display: flex; align-items: center; gap: var(--sp-3); }
.nav__actions .btn { min-height: 44px; font-size: var(--fs-sm); white-space: nowrap; }
.nav__acceder { padding-inline: 0.85rem; color: var(--body); }
/* El relleno de «Iniciar sesión» es aire invisible: se descuenta para que el hueco que se VE
   de «Contacto» al icono sea el mismo que del logo a «Producto». */
.nav__actions { margin-left: -0.85rem; }
.nav__acceder:hover { background: var(--surface); color: var(--brand-700); }
.nav__svg--btn { width: 19px; height: 19px; }
.nav__alta { padding-inline: 1.15rem 1.05rem; }

/* Hamburguesa de dos rayas que se cruzan en una X. */
.nav__toggle {
    display: none; place-items: center;
    width: 44px; height: 44px; border-radius: var(--radius-sm);
    background: none; border: 0; cursor: pointer; color: var(--ink);
}
.nav__toggle:hover { background: var(--surface); }
.nav__hamburguesa { position: relative; width: 20px; height: 12px; }
.nav__hamburguesa span {
    position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor;
    transition: transform var(--t), top var(--t);
}
.nav__hamburguesa span:first-child { top: 0; }
.nav__hamburguesa span:last-child { top: 10px; }
.nav__toggle[aria-expanded="true"] .nav__hamburguesa span:first-child { top: 5px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__hamburguesa span:last-child { top: 5px; transform: rotate(-45deg); }

/* Por debajo de ~1360 px el menú se acerca al logo e «Iniciar sesión» queda en icono (el
   texto sigue para lectores de pantalla). */
@media (max-width: 1360px) {
    .nav { grid-template-columns: auto 1fr auto; gap: var(--sp-4); }
    .nav__menu { gap: clamp(var(--sp-1), 1.6vw - 0.4rem, 1.5rem); }
    .nav__acceder span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .nav__acceder { width: 44px; padding: 0; }
    .nav__actions { margin-left: -0.75rem; }   /* el aire del icono dentro de su botón de 44 px */
}
@media (max-width: 1020px) {
    .site-header { --nav-alto: 68px; --nav-flotante-alto: 56px; --nav-despegue: 10px; --nav-despegue-arriba: 12px; }
    .nav { grid-template-columns: 1fr auto; }
    .nav__menu, .nav__acceder { display: none; }
    .nav__toggle { display: inline-grid; }
    .is-flotante .nav { border-radius: var(--radius-card); }
}
/* Móvil: la marca se encoge antes de que el botón de alta llegue a pisarla (a tamaño
   completo, logo + botón + menú no caben por debajo de ~500 px). */
@media (max-width: 540px) {
    .nav { gap: var(--sp-3); }
    .brand { font-size: 1.12rem; gap: 0.5rem; }
    .brand__mark { width: 30px; height: 30px; }
    .brand__logotipo { height: 1.38em; }   /* el dibujo es más ancho que el texto: que quepa el botón */
}
@media (max-width: 440px) {
    .nav__actions { gap: var(--sp-2); }
    .nav__actions .nav__alta { padding-inline: 0.8rem; }
    .nav__alta .ico-arrow { display: none; }
}
/* Móviles estrechos: no caben logo, botón y menú. El alta sigue en el menú y en la página. */
@media (max-width: 389px) {
    .nav__actions .nav__alta { display: none; }
}

/* Menú móvil: una tarjeta que cae bajo la barra, con la misma lista limpia del desplegable. */
.mobile-menu {
    pointer-events: auto;
    display: none;
    position: absolute; top: calc(100% + var(--sp-2)); left: var(--nav-despegue); right: var(--nav-despegue);
    max-height: calc(100dvh - var(--nav-alto) - var(--sp-6));
    overflow-y: auto; overscroll-behavior: contain;
    padding: var(--sp-2) var(--sp-3) var(--sp-5);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sheet);
}
.mobile-menu.open { display: block; animation: menu-cae var(--t) both; }
@keyframes menu-cae { from { opacity: 0; transform: translateY(-6px); } }
.mobile-menu .mm-lista { display: grid; gap: 2px; }
.mobile-menu a:not(.btn) {
    display: flex; align-items: center; gap: var(--sp-3);
    min-height: 48px; padding: var(--sp-1) var(--sp-3); border-radius: 12px;
    color: var(--ink); font-weight: var(--fw-bold); text-decoration: none;
}
.mobile-menu a:not(.btn):hover { background: var(--surface); }
.mobile-menu a[aria-current="page"] { background: var(--surface); color: var(--brand-700); }
.mobile-menu a[aria-current="page"] .nav__ico { color: var(--brand); }
.mobile-menu .nav__pronto { margin-left: auto; }
.mobile-menu .mm-group { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .08em; margin: var(--sp-4) var(--sp-3) var(--sp-1); }
.mobile-menu .mm-actions { margin-top: var(--sp-5); display: grid; gap: var(--sp-3); }

@media (prefers-reduced-motion: reduce) {
    .site-header, .nav, .nav__dropdown, .nav__hamburguesa span { transition: none; }
    .mobile-menu.open { animation: none; }
}

/* ------------------------------- Hero ---------------------------------- */
.hero { padding-block: var(--sp-8) var(--sp-8); position: relative; overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: var(--sp-8); align-items: center; }
.hero h1 { font-size: var(--fs-hero); letter-spacing: -0.02em; line-height: 1.02; }
.hero h1 em { font-style: normal; color: var(--brand); }
.hero p.lead { margin-top: var(--sp-5); max-width: 44ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
/* Dos columnas que empiezan arriba (formularios): sin centrar en vertical. */
.hero__inner--top { align-items: start; }
.hero__note { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--muted); max-width: 46ch; }
.hero__cta--centered { justify-content: center; }
/* Escena del hero de la portada: la factura sobre un panel verde muy claro y, al pie,
   cinco clientes de Open Peeps (CC0) mirando hacia el centro. Los
   dibujos acaban cortados por abajo, así que se apoyan en el borde inferior del panel. */
.hero__escena {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    padding: var(--sp-7) var(--sp-6) 0;
    background: var(--brand-copy-soft);
    border-radius: calc(var(--radius-card) + 10px);
    overflow: hidden;
}
.hero__escena > .hoja { width: min(100%, 25rem); position: relative; z-index: 1; }
/* La fila ocupa el panel de lado a lado y baja un poco más que él, para que los cuerpos
   acaben justo en su borde inferior y las esquinas redondeadas los recorten. */
.hero__gente { display: flex; align-items: flex-end; width: calc(100% + 2 * var(--sp-6)); margin: var(--sp-5) calc(-1 * var(--sp-6)) -4px; }
.hero__gente img { width: 22%; max-width: 9.5rem; height: auto; margin-inline: -1.5%; }
/* Los dos de la izquierda miran a la derecha y los tres de la derecha, volteados, a la
   izquierda: el grupo mira hacia el centro, no se va de la escena. */
.hero__gente img:nth-child(n+3) { transform: scaleX(-1); }
.hero__gente img:nth-child(3) { margin-left: auto; }
@media (max-width: 480px) {
    .hero__escena { padding: var(--sp-5) var(--sp-3) 0; }
    .hero__gente { width: calc(100% + 2 * var(--sp-3)); margin-inline: calc(-1 * var(--sp-3)); }
}
@media (max-width: 900px) {
    .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
    .hero p.lead { max-width: none; }
}

/* Hero de las páginas de producto (/verifactu, /panel, /funcionalidades): el texto a la
   izquierda y, a la derecha y a su altura, un dibujo con trazo de tinta que cuenta de qué
   va la página. Sin personajes ni maquetas de la interfaz (25/09/2026). Los dibujos son SVG
   pintados en el servidor (Producto/Views/escenas/) y se mueven con assets/js/escenas.js
   (GSAP); sin JS o con movimiento reducido se ven completos y quietos. */
/* Doble clase: .page-hero (más abajo) pondría su padding de siempre. Más alto que el resto
   de heros (el del laboratorio no lleva esta clase) y el dibujo grande, más de media
   pantalla (25/09/2026). */
.page-hero.page-hero--dibujo { padding-block: var(--sp-8); min-height: min(40rem, 80vh); display: flex; align-items: center; }
.page-hero--dibujo > .container { width: 100%; }
.page-hero--dibujo .hero__inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; }
.dibujo { margin: 0; width: 100%; max-width: 46rem; justify-self: end; }
.dibujo svg { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
    .page-hero.page-hero--dibujo { padding-block: var(--sp-7); min-height: 0; }
    .page-hero--dibujo .hero__inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
    .dibujo { justify-self: center; max-width: 30rem; }
}

/* § Escenas: las piezas del dibujo. Mismo trazo que el banco del laboratorio. */
.dibujo .dib-tinta { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.dibujo .dib-linea { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dibujo .dib-fina { stroke-width: 1.8; transition: stroke 300ms var(--ease-out), stroke-width 300ms var(--ease-out); }
.dibujo .dib-verde { fill: var(--brand); }
.dibujo .dib-verde-c { fill: var(--brand-copy); }
.dibujo .dib-tinta-f { fill: var(--ink); transition: fill 300ms var(--ease-out); }
.dibujo .dib-gris { fill: var(--line); }
.dibujo .dib-suelo { fill: var(--surface); }
.dibujo .dib-blanco { fill: none; stroke: var(--white); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* /verifactu: la cadena */
.dibujo .dib-eslabon { fill: none; stroke: var(--ink); stroke-width: 3; }

/* /panel: la pantalla con el consumo y los envíos */
.dibujo .dib-punto { fill: var(--brand-copy); }
.dibujo .dib-anillo-f { fill: none; stroke: var(--brand-copy); stroke-width: 14; }
.dibujo .dib-anillo { fill: none; stroke: var(--brand); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0.38; }
.dibujo .dib-cifra { font-family: var(--font-mono); font-weight: var(--fw-medium); font-size: 26px; fill: var(--ink); }
.dibujo .dib-cifra-eti { font-family: var(--font-sans); font-weight: var(--fw-medium); font-size: 11px; fill: var(--muted); }
.dibujo .dib-fila { fill: var(--surface); }
.dibujo .dib-ko { fill: var(--danger-tint); stroke: var(--danger); stroke-width: 2; }
.dibujo .dib-ko-x { fill: none; stroke: var(--danger); stroke-width: 2.4; stroke-linecap: round; }
/* Quieta, cada fila enseña solo su estado; escenas.js quita data-res y lo lleva él. */
.dib-envio[data-res] .dib-e-pend,
.dib-envio[data-res="ok"] .dib-e-ko,
.dib-envio[data-res="ko"] .dib-e-ok { opacity: 0; }

/* /funcionalidades: los tres verbos */
.dibujo .dib-v-flecha,
.dibujo .dib-v-tachon { stroke-dasharray: 1; stroke-dashoffset: 1; }
.dibujo .dib-v-tachon { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; }
.dibujo .dib-v-ok,
.dibujo .dib-v-lupa { opacity: 0; }
.dibujo .dib-lupa { fill: var(--paper); fill-opacity: 0.6; stroke: var(--ink); stroke-width: 2.5; }
.dibujo .dib-lupa-mango { stroke-width: 4; }
.dibujo .dib-verbo { font-family: var(--font-mono); font-weight: var(--fw-medium); font-size: 13px; fill: var(--muted); transition: fill 300ms var(--ease-out); }
.dibujo .dib-verbo.is-on { fill: var(--white); }
.dibujo .dib-h-linea.is-leida { stroke: var(--brand); stroke-width: 3; }
.dibujo .dib-h-qr.is-leido .dib-tinta-f { fill: var(--brand); }

/* La factura de la portada (hoja grande con la factura de ejemplo). */
.factura {
    padding: var(--sp-5) var(--sp-5) var(--sp-4);
    display: grid;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
}
.factura__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.factura__no { font-family: var(--font-mono); font-size: 1.05rem; font-weight: var(--fw-medium); color: var(--brand); letter-spacing: -0.01em; }
.factura__fecha { color: var(--muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.factura__emisor { color: var(--ink); font-weight: var(--fw-bold); }
.factura__lineas { display: grid; }
.factura__linea { display: flex; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-2); border-bottom: 1px solid var(--line); color: var(--body); font-variant-numeric: tabular-nums; }
.factura__linea span:last-child { font-family: var(--font-mono); font-size: 0.85em; white-space: nowrap; }
.factura__total { display: flex; justify-content: space-between; gap: var(--sp-4); font-weight: var(--fw-heavy); color: var(--ink); font-size: 1.05rem; padding-top: var(--sp-1); }
.factura__total span:last-child { font-family: var(--font-mono); font-weight: var(--fw-medium); }
.factura__pie { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-2); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.factura__qr { width: 64px; height: 64px; flex: none; color: var(--ink); }
.factura__envio { display: grid; gap: var(--sp-1); min-width: 0; }
.factura__envio b { color: var(--ink); font-size: var(--fs-sm); }
.factura__envio code { color: var(--muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.factura__ejemplo { font-size: var(--fs-xs); color: var(--muted); text-align: right; margin-top: var(--sp-2); }

/* La factura del hero se anima con hero-factura.js: primero se escribe el JSON del envío a
   la API (.factura__api, una capa encima de la factura), luego «Enviando a la AEAT…» y al
   final se descubre la factura con su registro enviado; espera y vuelta a empezar. La capa
   del JSON solo existe con .is-animada, que pone el JS: sin JS o con movimiento reducido se
   ve la factura quieta, como antes. */
.factura__cara { display: grid; gap: var(--sp-3); }
.factura__api { display: none; }
.is-animada .factura__api {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column;
    background: var(--paper); border-radius: inherit; overflow: hidden;
    opacity: 0; visibility: hidden;
    transition: opacity 450ms var(--ease-out), visibility 0s linear 450ms;
}
.is-animada.is-codigo .factura__api { opacity: 1; visibility: visible; transition: opacity 350ms var(--ease-out); }
.factura__api-barra { display: flex; gap: 6px; padding: var(--sp-3) var(--sp-4); background: var(--surface); border-bottom: 1px solid var(--line); }
.factura__api-barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.factura__api-codigo {
    margin: 0; padding: var(--sp-5); overflow: hidden;
    font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.8; color: var(--ink);
    background: none; border: 0;
}
.factura__api-codigo code { display: block; font-size: inherit; white-space: pre; background: none; padding: 0; }
.is-escribiendo .factura__api-codigo code::after {
    content: ""; display: inline-block; width: 0.55em; height: 1.1em; margin-left: 1px;
    vertical-align: -0.2em; background: var(--brand); animation: cta-json-cursor 1s steps(1) infinite;
}
.factura__api-c { color: var(--muted); }
.factura__api-k { color: var(--brand); }
.factura__api-v { color: var(--ink); }
.factura__api-estado {
    display: flex; align-items: center; gap: var(--sp-2);
    margin: auto var(--sp-5) var(--sp-5); padding: var(--sp-3) var(--sp-4);
    border-radius: 12px; background: var(--surface);
    font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--brand-700);
    opacity: 0; transform: translateY(8px);
    transition: opacity 350ms var(--ease-out), transform 350ms var(--ease-out);
}
.is-enviando .factura__api-estado { opacity: 1; transform: none; }
.factura__api-punto { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--brand); animation: factura-latido 900ms var(--ease-out) infinite; }
@keyframes factura-latido { 0% { box-shadow: 0 0 0 0 var(--brand-copy); } 100% { box-shadow: 0 0 0 10px transparent; } }
/* Al descubrirse, la factura sube un poco y la pastilla de «enviado» llega la última. */
.is-animada .factura__cara, .is-animada .factura__ejemplo { transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.is-animada.is-codigo .factura__cara, .is-animada.is-codigo .factura__ejemplo { opacity: 0; transform: translateY(10px); }
.is-animada .factura__envio .badge { transition: opacity 350ms var(--ease-out) 450ms, transform 350ms var(--ease-out) 450ms; }
.is-animada.is-codigo .factura__envio .badge { opacity: 0; transform: scale(.85); transition: none; }
@media (max-width: 520px) {
    .factura__api-codigo { padding: var(--sp-4); font-size: 0.72rem; }
    .factura__api-estado { margin: auto var(--sp-4) var(--sp-4); }
}

/* Tarjeta de código (desarrolladores): una hoja más, clara. */
.code-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--body);
}
.code-card__bar, .code-card__bar--light { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--line); }
.code-card__bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); display: inline-block; }
.code-card__body { padding: 18px 20px; line-height: 1.8; overflow-x: auto; }
.code-card .k { color: var(--brand); }
.code-card .s { color: var(--ink); }
.code-card .c { color: var(--muted); }
.code-card__out { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-top: 1px solid var(--line); font-family: var(--font-sans); }
.code-card__qr { width: 62px; height: 62px; flex: none; }
.code-card__out b { color: var(--ink); }
.code-card__out span { color: var(--muted); font-size: var(--fs-xs); }

/* ------------------------------ Pasos ----------------------------------
   El número es el del numerador del talonario: monoespaciado y en el color de marca. */
.steps { counter-reset: step; }
.step { position: relative; padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.step__num {
    font-family: var(--font-mono);
    font-weight: var(--fw-medium);
    font-size: 1rem;
    color: var(--brand);
    margin-bottom: var(--sp-3);
}
.step h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-2); }
.step p { color: var(--muted); font-size: var(--fs-sm); }

/* ============================== Portada ================================
   Las filas entre el hero y el CTA final. Todas abren igual (título y una frase,
   a la izquierda) y solo hay dos maquetas: a ancho completo o con el título fijo
   a la izquierda (.partida). Los iconos van siempre en la línea del título o como
   marca de lista, nunca en una fila propia. */

/* Garantías: cuatro columnas iguales, icono a la izquierda y una línea que concreta */
.garantias { border-block: 1px solid var(--line); background: var(--paper); }
.garantias__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.garantias__lista li {
    display: grid; grid-template-columns: auto 1fr; gap: 0.1rem var(--sp-3); align-items: center;
    /* Sin esto, las columnas más bajas que la más alta estiran sus dos filas y separan
       título y línea; así el bloque se queda junto y centrado, con el icono a media altura. */
    align-content: center;
    padding: var(--sp-5) var(--sp-5) var(--sp-5) 0;
}
.garantias__lista li + li { padding-left: var(--sp-5); border-left: 1px solid var(--line); }
.garantias__lista .ico { grid-row: span 2; width: 20px; height: 20px; color: var(--brand); stroke-width: var(--icon-stroke); }
.garantias__lista strong { color: var(--ink); font-size: var(--fs-sm); line-height: 1.3; }
.garantias__lista span { color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; }

/* Recorrido en tres pasos: una línea une los números y cada tramo enseña lo que viaja */
.recorrido { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); position: relative; }
.recorrido::before { content: ""; position: absolute; left: 16px; right: 16px; top: 15px; height: 2px; background: var(--brand-copy); }
.tramo { position: relative; display: flex; flex-direction: column; }
.tramo__n {
    width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    background: var(--brand); color: var(--white); font: var(--fw-medium) 0.8rem/1 var(--font-mono);
    box-shadow: 0 0 0 8px var(--paper); margin-bottom: var(--sp-5);
}
.tramo h3 { font-size: var(--fs-h3); }
.tramo > p { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); max-width: 38ch; }
.tramo__pieza {
    margin-top: var(--sp-5); flex: 1; min-height: 128px;
    border: 1px solid var(--line); border-radius: 14px; background: var(--paper);
    padding: var(--sp-4) 1.15rem; display: grid; align-content: start; gap: var(--sp-2);
    font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.8; color: var(--ink);
}
.tramo__pieza pre { margin: 0; font: inherit; white-space: pre-wrap; }
.tramo__pieza .c { color: var(--muted); }
.tramo__pieza .k { color: var(--brand-700); }
.tramo__qr { display: flex; gap: var(--sp-4); align-items: center; }
.tramo__qr .qr { width: 80px; height: 80px; flex: none; color: var(--ink); }
.tramo__qr > span { display: grid; }
.tramo__qr .c { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.06em; }
.tramo__fila { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }

/* Dos perfiles: pestañas en pastilla y un panel por perfil */
.pestanas {
    display: inline-flex; gap: var(--sp-1); padding: 0.3rem; margin-bottom: var(--sp-6);
    border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--paper);
}
.pestanas button {
    display: inline-flex; align-items: center; gap: var(--sp-2); padding: 0.75rem 1.2rem;
    border: 0; border-radius: var(--radius-pill); background: none; cursor: pointer;
    font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--muted);
    transition: background-color var(--t), color var(--t);
}
.pestanas button:hover { color: var(--ink); }
.pestanas button[aria-selected="true"] { background: var(--brand); color: var(--white); }
.pestanas .ico { width: 18px; height: 18px; stroke-width: var(--icon-stroke); }
.perfil {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-8); align-items: start;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card);
    box-shadow: var(--shadow-card); padding: clamp(1.5rem, 3.5vw, 3rem);
}
.perfil + .perfil { margin-top: var(--sp-5); }
/* display: grid / inline-flex ganan al atributo hidden: sin esto no se oculta nada. */
.pestanas[hidden], .perfil[hidden] { display: none; }
.perfil h3 { font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem); }
.perfil__texto > p { margin-top: var(--sp-4); }
.perfil__texto .puntos { margin-top: var(--sp-5); }
.perfil__texto > .btn, .perfil__texto > .enlace-flecha { margin-top: var(--sp-6); }
.consola { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.consola__barra {
    display: flex; justify-content: space-between; padding: 0.6rem var(--sp-4);
    border-bottom: 1px solid var(--line); font: var(--fw-medium) 0.7rem/1.2 var(--font-mono); color: var(--muted);
}
.consola__barra--resp { border-top: 1px solid var(--line); background: var(--paper); }
.consola pre { margin: 0; padding: var(--sp-4); font: var(--fw-regular) 0.72rem/1.85 var(--font-mono); color: var(--ink); overflow-x: auto; }
.consola__barra--resp + pre { background: var(--paper); }
.consola .k { color: var(--brand-700); }

/* Lista con marca de verificación: el icono acompaña al texto, no va encima */
.puntos { display: grid; gap: var(--sp-4); }
.puntos li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); font-size: var(--fs-sm); }
.puntos .ico { width: 20px; height: 20px; margin-top: 2px; color: var(--brand); stroke-width: var(--icon-stroke); }
.puntos b { color: var(--ink); }

/* Enlace de texto con flecha, para acciones secundarias dentro de una sección */
.enlace-flecha { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-bold); text-decoration: none; }
.enlace-flecha .ico-arrow { width: 18px; height: 18px; stroke-width: 2.2; transition: transform var(--t-icon); }
.enlace-flecha:hover .ico-arrow, .enlace-flecha:focus-visible .ico-arrow { transform: translateX(3px); }

/* Título fijo a la izquierda mientras la lista avanza a la derecha */
.partida { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); }
.partida__fija { position: sticky; top: calc(88px + var(--sp-5)); align-self: start; display: grid; gap: var(--sp-5); justify-items: start; }
.partida__fija h2 { font-size: var(--fs-h2); }
.partida__fija p { font-size: var(--fs-lead); color: var(--muted); }

/* Ventajas: lista en dos columnas con líneas finas, icono en la línea del título */
.ventajas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-7); }
.ventajas li { padding-block: var(--sp-5); border-top: 1px solid var(--line-strong); }
.ventajas li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-strong); }
.ventajas h3 { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-h3); }
.ventajas__icono {
    flex: none; width: 36px; height: 36px; border-radius: var(--radius); display: grid; place-items: center;
    background: var(--brand-copy); color: var(--brand);
}
.ventajas__icono .ico { width: 20px; height: 20px; stroke-width: var(--icon-stroke); }
.ventajas p { margin-top: var(--sp-3); font-size: var(--fs-sm); }

/* Panel: texto y una pantalla de envíos con la primera factura desplegada.
   Va sobre la sección verde casi blanca, así que la pantalla es blanca y la fila
   desplegada NO se tiñe de verde (no se distinguiría del fondo): se separa con una
   caja gris neutra dentro de la propia pantalla. */
.panel-home { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); align-items: center; }
.panel-home h2 { font-size: var(--fs-h2); }
.envios-demo { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-sheet); overflow: hidden; }
.envios-demo__barra { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-4) 1.25rem; border-bottom: 1px solid var(--line); }
.envios-demo__barra strong { color: var(--ink); }
.envios-demo__barra span { color: var(--muted); font-size: var(--fs-xs); }
.envios-demo__fila {
    display: grid; grid-template-columns: 1.3fr 1fr 8.5rem; gap: var(--sp-4); align-items: center;
    padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--line); font-size: var(--fs-sm);
}
.envios-demo__fila:last-child { border-bottom: 0; }
.envios-demo__fila > :last-child { justify-self: end; }
.envios-demo__fila code { color: var(--ink); font-weight: var(--fw-bold); }
.envios-demo__fila--cab { padding-block: 0.6rem; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--muted); background: var(--wait-tint); }
.envios-demo__detalle {
    display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5); align-items: center;
    margin: 0 1.25rem 0.9rem; padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--wait-tint);
}
.envios-demo__fila:has(+ .envios-demo__detalle) { border-bottom: 0; }
.envios-demo__detalle + .envios-demo__fila { border-top: 1px solid var(--line); }
.envios-demo__detalle .qr { width: 56px; height: 56px; padding: 5px; border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); }
.envios-demo__detalle dl { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem var(--sp-4); font-size: var(--fs-xs); }
.envios-demo__detalle dt { color: var(--muted); }
.envios-demo__detalle dd { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink); overflow-wrap: anywhere; }

@media (max-width: 1100px) {
    .garantias__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .garantias__lista li:nth-child(3) { padding-left: 0; border-left: 0; }
    .garantias__lista li:nth-child(n+3) { border-top: 1px solid var(--line); }
    .perfil, .partida, .panel-home { grid-template-columns: minmax(0, 1fr); }
    .partida, .panel-home { gap: var(--sp-6); }
    .partida__fija { position: static; }
}
@media (max-width: 760px) {
    .recorrido { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
    .recorrido::before { left: 15px; right: auto; top: 16px; bottom: 16px; width: 2px; height: auto; }
    .tramo { padding-left: 3.25rem; }
    .tramo__n { position: absolute; left: 0; top: 0; }
    .ventajas { grid-template-columns: minmax(0, 1fr); }
    .ventajas li:nth-last-child(2) { border-bottom: 0; }
    .pestanas { display: flex; }
    .pestanas button { flex: 1; justify-content: center; padding-inline: var(--sp-2); }
}
@media (max-width: 520px) {
    .garantias__lista { grid-template-columns: minmax(0, 1fr); }
    .garantias__lista li, .garantias__lista li + li { padding-left: 0; border-left: 0; }
    .garantias__lista li + li { border-top: 1px solid var(--line); }
    .envios-demo__fila { grid-template-columns: 1fr auto; }
    .envios-demo__fila > :nth-child(2) { display: none; }
    .pestanas .ico { display: none; }
}

/* ============================ Panel de control ===========================
   Página /panel. Los cuatro apartados se eligen con baldosas (idea de rehojo.com), y la
   página cierra con las preguntas en baldosas (idea de skiper23): la respuesta corta en
   grande, la larga al pulsar. */
/* Apartados (idea de rehojo.com/fichaje-digital): a la izquierda el título y cuatro
   baldosas 2×2 que hacen de pestañas; a la derecha, tras una línea fina, el apartado
   elegido con su texto, sus etiquetas y su pantalla. */
.apartados {
    display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.75fr);
    gap: clamp(2rem, 4vw, 4rem); align-items: center;
}
.apartados__nav .section-head { margin-bottom: var(--sp-6); }
.apartados__baldosas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.apartados__baldosas[hidden] { display: none; }
.apartados__baldosas button {
    display: grid; gap: var(--sp-2); align-content: start; padding: var(--sp-4) 1.1rem;
    border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper);
    cursor: pointer; text-align: left; font-family: var(--font-sans);
    transition: background-color var(--t), border-color var(--t), box-shadow var(--t);
}
/* Baldosas blancas y neutras; la elegida se marca solo con el borde de marca y su icono en
   verde (23/09/2026: con fondo verde, halo y etiquetas verdes, todo competía). */
.apartados__baldosas button:hover { border-color: var(--line-strong); }
.apartados__baldosas button[aria-selected="true"] { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.apartados__titulo { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-bold); font-size: var(--fs-body); color: var(--ink); }
.apartados__titulo .ico { width: 20px; height: 20px; flex: none; color: var(--muted); stroke-width: var(--icon-stroke); transition: color var(--t); }
.apartados__baldosas button[aria-selected="true"] .ico { color: var(--brand); }
.apartados__resumen { font-size: var(--fs-xs); line-height: 1.45; color: var(--muted); }
.apartados__escenario { display: grid; padding-left: clamp(2rem, 4vw, 4rem); border-left: 1px solid var(--line); }
/* Con JS los cuatro comparten celda y los ocultos solo se vuelven invisibles: el
   escenario mide lo del más alto y nada salta al cambiar. */
:root:not(.no-js) .apartados__escenario > .apartado { grid-area: 1 / 1; }
:root:not(.no-js) .apartados__escenario > .apartado[hidden] { display: grid; visibility: hidden; }
.no-js .apartados__escenario { gap: var(--sp-8); }
.apartado {
    display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(1.5rem, 3vw, 2.75rem); align-items: center;
}
.apartado:not([hidden]) { animation: apartado-entra 0.35s ease; }
@keyframes apartado-entra { from { opacity: 0; transform: translateY(8px); } }
.apartado__texto { display: grid; gap: var(--sp-4); align-content: center; }
.apartado__texto h3 { font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem); }
.apartado__texto p { color: var(--body); }
.apartado__etiquetas { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.apartado__etiquetas li {
    padding: 0.3rem 0.8rem; border-radius: var(--radius-pill); background: var(--wait-tint);
    font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--body);
}
.apartado__texto .enlace-flecha { justify-self: start; }
.pantalla { min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-sheet); overflow: hidden; }
@media (max-width: 1100px) {
    .apartados { grid-template-columns: minmax(0, 1fr); }
    .apartados__baldosas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .apartados__escenario { padding: var(--sp-6) 0 0; border-left: 0; border-top: 1px solid var(--line); }
    :root:not(.no-js) .apartados__escenario > .apartado[hidden] { display: none; }
}
@media (max-width: 760px) {
    .apartados__baldosas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .apartado { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .apartado:not([hidden]) { animation: none; } }
.envios-demo__intentos { display: grid; }
/* La rechazada lleva debajo lo que contestó la AEAT, en el rojo suave de los errores */
.envios-demo__motivo {
    margin: 0 1.25rem 0.9rem; padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--danger-line); border-radius: var(--radius); background: var(--danger-tint);
    font-size: var(--fs-xs); color: var(--ink);
}
.envios-demo__motivo span { display: block; color: var(--danger); font-weight: var(--fw-bold); }
.envios-demo__fila:has(+ .envios-demo__motivo) { border-bottom: 0; }
.envios-demo__motivo + .envios-demo__fila { border-top: 1px solid var(--line); }

/* Consumo del plan: la barra de ejemplo va al 81,2 % (812 de 1.000, ver la vista) y
   el círculo que marca el aviso, al 80 %. */
.consumo { padding: var(--sp-5) 1.25rem; display: grid; gap: var(--sp-4); }
.consumo__plan { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-1) var(--sp-3); font-weight: var(--fw-bold); color: var(--ink); }
.consumo__plan span { font-weight: var(--fw-regular); color: var(--muted); font-size: var(--fs-sm); }
.consumo__cifra { color: var(--muted); font-size: var(--fs-sm); }
.consumo__cifra b { margin-right: var(--sp-2); font: var(--fw-medium) 2.4rem/1 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.consumo__cifra span { display: block; margin-top: var(--sp-2); }
.consumo__barra { position: relative; height: 10px; margin-block: var(--sp-4) var(--sp-5); border-radius: var(--radius-pill); background: var(--wait-tint); }
.consumo__lleno { position: absolute; inset: 0 auto 0 0; width: 81.2%; border-radius: inherit; background: var(--brand); }
.consumo__marca {
    position: absolute; left: 80%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%);
    border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 4px var(--brand-700), 0 1px 4px rgba(20, 33, 27, 0.2);
}
.consumo__marca i {
    position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    font: var(--fw-medium) 0.66rem/1 var(--font-mono); color: var(--muted); white-space: nowrap;
}
.consumo__aviso {
    display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start;
    padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); background: var(--wait-tint);
    font-size: var(--fs-xs); color: var(--ink);
}
.consumo__aviso .ico { width: 18px; height: 18px; color: var(--brand); stroke-width: var(--icon-stroke); }

/* Trámite del Anexo I: una secuencia real, con una línea que une los pasos */
.tramite { display: grid; padding: var(--sp-3) 1.25rem var(--sp-4); }
.tramite li {
    position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-4); align-items: center;
    padding-block: 0.8rem; font-size: var(--fs-sm); color: var(--muted);
}
.tramite li.is-hecho, .tramite li.is-actual { color: var(--ink); }
.tramite li + li::before { content: ""; position: absolute; left: 13px; top: -0.8rem; height: 1.6rem; width: 2px; background: var(--line); }
.tramite li.is-hecho + li::before { background: var(--brand-copy); }
.tramite__n {
    position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    font: var(--fw-medium) 0.75rem/1 var(--font-mono); background: var(--wait-tint); color: var(--muted);
}
.is-hecho .tramite__n { background: var(--brand); color: var(--white); }
.is-actual .tramite__n { background: var(--paper); color: var(--brand-700); box-shadow: inset 0 0 0 2px var(--brand); }

/* Clave de API: solo el prefijo, como en el portal */
.clave__fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-4) 1.25rem; border-bottom: 1px solid var(--line); }
.clave__fila code { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink); }
.clave__fila code span { color: var(--muted); letter-spacing: 0.05em; }
.clave__boton { padding: 0.45rem 0.8rem; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1.5px var(--brand); color: var(--brand-700); font-weight: var(--fw-bold); font-size: var(--fs-xs); white-space: nowrap; }
.pantalla--clave .consola { margin: var(--sp-4) 1.25rem 1.25rem; }
.pantalla--clave pre { white-space: pre-wrap; }

/* Preguntas en baldosas. Al abrir, la baldosa crece en su sitio (con View Transitions
   donde las hay, ver app.js) y la respuesta corta se encoge para dejar sitio a la larga. */
.dudas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.duda {
    position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: var(--sp-5); min-height: 12rem;
    padding: 1.4rem 1.4rem 1.5rem; border-radius: 22px; background: var(--paper);
    box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow var(--t);
}
.duda:hover { box-shadow: inset 0 0 0 1px var(--line), var(--shadow-card); }
.duda__cab {
    display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-4);
    padding: 0; border: 0; background: none; font: inherit; font-weight: var(--fw-bold); line-height: 1.35;
    color: var(--ink); text-align: left; cursor: pointer;
}
/* Toda la baldosa es el botón */
.duda__cab::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.duda__cab:focus-visible { outline: none; }
.duda__cab:focus-visible::after { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 22px; }
.duda__mas {
    flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    background: var(--brand-copy); color: var(--brand-700);
    transition: transform 350ms var(--ease-out), background-color var(--t), color var(--t);
}
.duda__mas .ico { width: 16px; height: 16px; stroke-width: 2.2; }
.duda__corta {
    align-self: end; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3);
    font: var(--fw-heavy) clamp(1.45rem, 1.2rem + 0.8vw, 1.9rem)/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--ink);
}
.duda__corta .badge { font-family: var(--font-sans); letter-spacing: 0; }
.duda__larga { display: none; }
.duda.is-abierta { box-shadow: inset 0 0 0 1.5px var(--brand), var(--shadow-sheet); }
.duda.is-abierta .duda__corta { font-size: 1.15rem; }
.duda.is-abierta .duda__mas { transform: rotate(45deg); background: var(--brand); color: var(--white); }
.duda.is-abierta .duda__larga, .no-js .duda__larga {
    display: block; padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--body);
}
.duda.is-abierta .duda__larga { animation: duda-entra 450ms 120ms both var(--ease-out); }
@keyframes duda-entra { from { opacity: 0; transform: translateY(8px); } }
.no-js .duda__mas { display: none; }
.duda:nth-child(1) { view-transition-name: duda-1; }
.duda:nth-child(2) { view-transition-name: duda-2; }
.duda:nth-child(3) { view-transition-name: duda-3; }
.duda:nth-child(4) { view-transition-name: duda-4; }
.duda:nth-child(5) { view-transition-name: duda-5; }
.duda:nth-child(6) { view-transition-name: duda-6; }
::view-transition-group(*) { animation-duration: 450ms; animation-timing-function: var(--ease-out); }

@media (max-width: 1100px) {
    .dudas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    /* Cuatro pestañas no caben en una fila: dos y dos */
    .pestanas--varias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 22px; }
}
@media (max-width: 640px) {
    .pantalla .envios-demo__detalle { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
    .dudas { grid-template-columns: minmax(0, 1fr); }
    .duda { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .duda__mas { transition: none; }
    .duda.is-abierta .duda__larga { animation: none; }
    ::view-transition-group(*) { animation: none; }
}

/* ============================== Verifactu ===============================
   Página /verifactu. Cada fila tiene su propia pieza, para que la página no sea una
   lista tras otra: la factura anotada, tu parte frente a la nuestra, el viaje de una
   factura con su pantalla, los tipos en hojas de abanico, la consola que se escribe
   sola y las preguntas en baldosas de /panel. El movimiento, en assets/js/verifactu.js;
   sin JS todo se lee quieto. */

/* La factura anotada: dos notas a cada lado y la factura en medio. El texto de las notas
   va SIEMPRE alineado a la izquierda, también en la columna izquierda: se lee mejor. */
.anotada {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem) minmax(0, 1fr); gap: var(--sp-8); align-items: center;
    padding: var(--sp-8) var(--sp-7); border-radius: calc(var(--radius-card) + 10px); background: var(--brand-copy-soft);
}
.anotada__notas { display: grid; gap: var(--sp-7); }
.anotada__notas:first-child { justify-items: end; }
.nota {
    display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); max-width: 19rem; padding: var(--sp-4) var(--sp-5);
    border-radius: 14px; outline: none; transition: background-color 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
}
.nota.is-on { background: var(--paper); box-shadow: var(--shadow-card); }
.nota:focus-visible { box-shadow: 0 0 0 2px var(--brand); }
.nota h3 { font-size: 1.15rem; line-height: 1.25; }
.nota p { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--muted); }
.anotada__pin {
    flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    background: var(--paper); color: var(--brand-700); font: var(--fw-medium) 0.75rem/1 var(--font-mono); box-shadow: inset 0 0 0 1.5px var(--brand);
    transition: background-color 400ms var(--ease-out), color 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.is-on > .anotada__pin { background: var(--brand); color: var(--white); transform: scale(1.1); }
.anotada__factura {
    position: relative; padding: 1.75rem 1.75rem 1.25rem; border-radius: 14px; background: var(--paper);
    box-shadow: var(--shadow-sheet); font-size: var(--fs-sm); rotate: -1.5deg; transition: rotate 600ms var(--ease-out);
}
.anotada__factura:hover { rotate: 0deg; }
.anotada__zona {
    position: relative; margin-inline: -0.6rem; padding: 0.45rem 0.6rem; border-radius: 10px;
    transition: background-color 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
}
.anotada__zona.is-on { background: var(--brand-copy-soft); box-shadow: inset 0 0 0 1.5px var(--brand); }
.anotada__zona > .anotada__pin { position: absolute; top: 50%; left: -2.9rem; translate: 0 -50%; }
.anotada__zona--qr > .anotada__pin { left: auto; right: -2.9rem; }
.is-on.anotada__zona > .anotada__pin { transform: scale(1.1); }
.anotada__top { display: grid; gap: var(--sp-1); }
.anotada__no { font: var(--fw-medium) 1.15rem/1 var(--font-mono); color: var(--brand); }
.anotada__fecha { font: var(--fw-regular) 0.75rem/1 var(--font-mono); color: var(--muted); }
.anotada__emisor { margin-top: var(--sp-3); font-weight: var(--fw-bold); color: var(--ink); }
.anotada__emisor span { display: block; font: var(--fw-regular) 0.74rem/1.5 var(--font-mono); color: var(--muted); }
.anotada__lineas { margin-top: var(--sp-4); border-top: 1px solid var(--line); }
.anotada__lineas div { display: flex; justify-content: space-between; gap: var(--sp-3); padding-block: 0.55rem; border-bottom: 1px solid var(--line); font-size: 0.85rem; }
.anotada__lineas span + span, .anotada__total span + span { font-family: var(--font-mono); font-size: 0.82rem; }
.anotada__total { display: flex; justify-content: space-between; padding-block: 0.75rem 0.5rem; font-weight: var(--fw-bold); color: var(--ink); }
.anotada__huella { display: flex; flex-wrap: wrap; gap: 0.2rem 0.75rem; font: var(--fw-regular) 0.7rem/1.6 var(--font-mono); color: var(--muted); }
.anotada__huella b, .anotada__zona--qr b { font-weight: var(--fw-medium); color: var(--ink); }
.anotada__zona--qr { display: flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-2); }
.anotada__zona--qr .qr { width: 60px; height: 60px; flex: none; color: var(--ink); }
.anotada__zona--qr p { font: var(--fw-regular) 0.7rem/1.7 var(--font-mono); color: var(--muted); }
.anotada__ejemplo { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); text-align: right; }
/* El sello de caucho: en la esquina de arriba, donde la factura no tiene nada */
.anotada__sello { position: absolute; top: -2.4rem; right: -2.4rem; width: 108px; height: 108px; rotate: -14deg; color: var(--brand); transition: scale 400ms var(--ease-out); }
.anotada__sello svg { width: 100%; height: 100%; overflow: visible; }
.anotada__sello.is-on { scale: 1.08; }
.anotada__sello > .anotada__pin { position: absolute; bottom: -2px; right: -10px; rotate: 14deg; }
.anotada__sello-texto { font: var(--fw-medium) 9.5px var(--font-mono); letter-spacing: 1.6px; fill: currentColor; }
@media (prefers-reduced-motion: no-preference) {
    .anotada__sello.is-espera { opacity: 0; }
    .anotada__sello.is-estampa { animation: sello-estampa 700ms cubic-bezier(.3, 1.6, .5, 1) both; }
    @keyframes sello-estampa { from { opacity: 0; scale: 1.7; } }
}

/* Tu parte y la nuestra: asimétrico a propósito, lo tuyo cabe en poco */
.reparto__titulo { max-width: 18ch; margin-bottom: var(--sp-7); font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4.2rem); line-height: 1; letter-spacing: -0.02em; }
.reparto__titulo em { font-style: normal; color: var(--brand); }
.reparto { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--sp-5); }
.parte {
    position: relative; overflow: hidden; padding: clamp(1.75rem, 3.5vw, 3rem);
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.parte h3 { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); font-size: 1.5rem; }
.parte h3 small { font: var(--fw-medium) 0.72rem/1 var(--font-mono); color: var(--muted); }
.parte b { display: block; margin-bottom: var(--sp-1); color: var(--ink); font-size: 1.05rem; }
.parte__tuyo { position: relative; z-index: 1; display: grid; gap: var(--sp-7); margin-top: var(--sp-7); max-width: 24rem; }
.parte__tuyo li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); font-size: var(--fs-sm); }
.parte--tu { padding-bottom: 13rem; }
.parte--tu img { position: absolute; right: var(--sp-5); bottom: -4px; height: 11.5rem; width: auto; }
.parte__nuestro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-7); margin-top: var(--sp-6); }
.parte__nuestro li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); padding-block: var(--sp-5); border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.parte__nuestro .ico { width: 20px; height: 20px; margin-top: 3px; color: var(--brand); stroke-width: var(--icon-stroke); }

/* El viaje de una factura: pasos a la izquierda y la pantalla que cambia con cada uno.
   El avance se ve en el aro del número, no con una barra debajo. */
.viaje { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); align-items: start; }
.viaje__pasos { display: grid; gap: var(--sp-3); }
.viaje__paso {
    display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start; width: 100%;
    padding: var(--sp-4) var(--sp-5); border: 0; border-radius: 16px; background: none; font: inherit; color: inherit;
    text-align: left; text-decoration: none; cursor: pointer; transition: background-color var(--t), box-shadow var(--t);
}
.viaje__paso:hover { background: var(--surface); }
.viaje__paso:focus { outline: none; }
.viaje__paso:focus-visible { box-shadow: 0 0 0 2px var(--brand); }
.viaje__n {
    position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
    font: var(--fw-medium) 0.8rem/1 var(--font-mono); background: var(--brand); color: var(--white); transition: background-color var(--t), color var(--t);
}
.viaje__n svg { position: absolute; left: 50%; top: 50%; width: calc(100% + 10px); max-width: none; height: calc(100% + 10px); translate: -50% -50%; rotate: -90deg; fill: none; stroke: var(--brand); stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0; }
.viaje__txt b { display: block; padding-top: 0.35rem; font: var(--fw-bold) var(--fs-h3)/1.25 var(--font-display); letter-spacing: -0.015em; color: var(--ink); transition: color var(--t); }
.viaje__txt > span { display: block; margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); }
/* Con JS: el elegido se nota y los demás se quedan en gris y cerrados. Va con :not(.no-js),
   que js-activo.js quita en el <head>, y no con una clase que ponga verifactu.js: así la
   página se pinta ya en su estado final y no da un salto al cargar. */
:root:not(.no-js) .viaje .viaje__paso[aria-selected="false"] .viaje__n { background: var(--wait-tint); color: var(--muted); }
:root:not(.no-js) .viaje .viaje__paso[aria-selected="false"] b { color: var(--muted); }
:root:not(.no-js) .viaje .viaje__paso[aria-selected="false"] .viaje__txt > span { display: none; }
:root:not(.no-js) .viaje .viaje__paso[aria-selected="true"] { background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--brand), var(--shadow-sheet); }
:root:not(.no-js) .viaje .viaje__paso[aria-selected="true"]:focus-visible { box-shadow: inset 0 0 0 1.5px var(--brand), 0 0 0 2px var(--brand); }
:root:not(.no-js) .viaje .viaje__paso[aria-selected="true"] .viaje__n svg { opacity: 1; stroke-dashoffset: var(--avance, 100); }
.viaje__pantalla {
    position: sticky; top: calc(88px + var(--sp-5)); overflow: hidden;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-sheet);
}
.viaje__pantalla .envios-demo__barra { background: var(--surface); }
.viaje__escenario { display: grid; gap: var(--sp-6); min-height: 25rem; padding: clamp(1.25rem, 3vw, 2.25rem); }
.viaje__vista { display: grid; align-content: center; gap: var(--sp-4); }
:root:not(.no-js) .viaje .viaje__vista { grid-area: 1 / 1; transition: opacity 450ms var(--ease-out), translate 450ms var(--ease-out), visibility 450ms; }
:root:not(.no-js) .viaje .viaje__vista.is-oculta { opacity: 0; translate: 0 10px; visibility: hidden; }
.viaje__codigo {
    margin: 0; padding: var(--sp-4) var(--sp-5); overflow-x: auto; border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface); font: var(--fw-regular) 0.78rem/1.9 var(--font-mono); color: var(--ink);
}
.viaje__codigo .k { color: var(--brand-700); }
.viaje__codigo .falta { color: var(--danger); text-decoration: underline wavy var(--danger); text-underline-offset: 4px; }
.viaje__aviso { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); padding: var(--sp-4); border-radius: 12px; background: var(--wait-tint); font-size: var(--fs-sm); color: var(--ink); }
.viaje__aviso .ico { width: 20px; height: 20px; margin-top: 2px; color: var(--brand); stroke-width: var(--icon-stroke); }
.viaje__aviso b { display: block; }
.viaje__aviso--error { background: var(--danger-tint); box-shadow: inset 0 0 0 1px var(--danger-line); }
.viaje__aviso--error .ico, .viaje__aviso--error b { color: var(--danger); }
.viaje__registro { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-5); align-items: center; padding: var(--sp-5); border: 1px solid var(--line); border-radius: 14px; }
.viaje__registro .qr { width: 104px; height: 104px; color: var(--ink); }
.viaje__registro dl { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem var(--sp-4); align-items: center; font-size: var(--fs-xs); }
.viaje__registro dt { color: var(--muted); }
.viaje__registro dd { font: var(--fw-regular) 0.78rem/1.4 var(--font-mono); color: var(--ink); overflow-wrap: anywhere; }
.viaje__eslabones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font: var(--fw-regular) 0.74rem/1 var(--font-mono); color: var(--muted); }
.viaje__eslabones span { padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: 8px; }
.viaje__eslabones span:last-of-type { border-color: var(--brand); background: var(--brand-copy-soft); color: var(--brand-700); }
.viaje__eslabones .ico { width: 16px; height: 16px; color: var(--brand); stroke-width: var(--icon-stroke); }
.viaje__intentos p { display: grid; grid-template-columns: 4rem 1fr auto; gap: var(--sp-4); align-items: center; padding-block: var(--sp-4); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted); }
.viaje__intentos p:last-child { border-bottom: 0; }
.viaje__intentos time { font: var(--fw-regular) 0.85rem/1 var(--font-mono); color: var(--ink); }
.viaje__envios { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; }
.viaje__envios .is-sel { background: var(--brand-copy-soft); }
.viaje__anios { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.viaje__anios span { height: 10px; border-radius: var(--radius-pill); background: var(--brand); }
.viaje__hasta { font: var(--fw-regular) 0.72rem/1 var(--font-mono); color: var(--muted); text-align: right; }

/* Tipos de factura: hojas en abanico que se enderezan al pasar el ratón */
.abanico { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-4); padding-top: var(--sp-3); }
.abanico__hoja {
    --giro: 0deg; --baja: 0px; display: flex; flex-direction: column; min-height: 17rem; padding: var(--sp-5) var(--sp-5) var(--sp-6);
    border-radius: 14px; background: var(--paper); box-shadow: var(--shadow-card); rotate: var(--giro); translate: 0 var(--baja);
    transition: rotate 500ms var(--ease-out), translate 500ms var(--ease-out), box-shadow 500ms var(--ease-out);
}
.abanico__hoja:nth-child(1) { --giro: -3deg; }
.abanico__hoja:nth-child(2) { --giro: 2deg; --baja: 12px; }
.abanico__hoja:nth-child(3) { --giro: -1.5deg; }
.abanico__hoja:nth-child(4) { --giro: 2.5deg; --baja: 10px; }
.abanico__hoja:nth-child(5) { --giro: -2deg; }
.abanico__hoja:hover { rotate: 0deg; translate: 0 -8px; box-shadow: var(--shadow-hover); }
.abanico__cod { font: var(--fw-medium) clamp(1.5rem, 1rem + 1.4vw, 2.2rem)/1 var(--font-mono); letter-spacing: -0.02em; color: var(--brand); }
.abanico__hoja h3 { margin-top: var(--sp-5); font-size: 1.1rem; }
.abanico__hoja p { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--muted); }
.abanico__rayas { display: grid; gap: 7px; margin-top: auto; padding-top: var(--sp-5); }
.abanico__rayas i { height: 5px; border-radius: 3px; background: var(--wait-tint); }
.abanico__rayas i:nth-child(2) { width: 70%; }
.abanico__rayas i:nth-child(3) { width: 45%; }
/* Debajo del abanico, en tres niveles: un subtítulo propio, las dos operaciones sobre una
   factura ya enviada (texto y, a la derecha, la factura con el estado que le queda) y una
   nota al pie sin caja con lo que no incluye. Se probaron tres tarjetas altas, una tira
   de texto y dos cajas («Además» / «No incluye»), y ninguna convenció: parecían restos. */
.despues { margin-top: var(--sp-8); }
.despues__titulo { font-size: var(--fs-h3); }
.despues__ops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-5); }
.op-doc {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center;
    padding: var(--sp-5); border-radius: var(--radius-card); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.op-doc h4 { font: var(--fw-bold) 1.05rem/1.25 var(--font-display); color: var(--ink); }
.op-doc p { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--muted); }
.op-doc__demo {
    display: grid; justify-items: start; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-radius: 12px;
    border: 1px solid var(--line); background: var(--paper); font: var(--fw-medium) 0.78rem/1 var(--font-mono); color: var(--ink);
}
.op-doc__demo .badge { font-family: var(--font-sans); }
.despues__nota { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); align-items: start; margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--muted); }
.despues__nota .ico { width: 18px; height: 18px; margin-top: 3px; color: var(--muted); stroke-width: var(--icon-stroke); }
.despues__nota b { color: var(--ink); }

/* Puerta del técnico: la petición se escribe sola y después llega la respuesta */
.tecnico { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); align-items: center; }
.tecnico h2 { font-size: var(--fs-h2); }
.tecnico__texto { margin-top: var(--sp-4); font-size: var(--fs-lead); color: var(--muted); }
.tecnico .puntos { margin-block: var(--sp-6); }
.tecnico .puntos code { font-size: 0.8rem; color: var(--ink); }
.tecnico__consola { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.tecnico__consola .consola__barra { flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); }
.tecnico__consola .consola__barra b { font-weight: var(--fw-medium); color: var(--ink); }
.tecnico__consola pre { min-height: 8.5rem; padding: var(--sp-5); font-size: 0.8rem; white-space: pre-wrap; }
.tecnico__resp { transition: opacity 400ms var(--ease-out); }
.tecnico__resp.is-espera { opacity: 0.25; }
.tecnico__cursor { display: inline-block; width: 0.55em; height: 1.1em; vertical-align: -0.2em; background: var(--brand); animation: tecnico-parpadeo 1s steps(1) infinite; }
@keyframes tecnico-parpadeo { 50% { opacity: 0; } }

@media (max-width: 1100px) {
    .anotada { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-7) var(--sp-4) var(--sp-6); }
    .anotada__factura { order: -1; width: min(100%, 26rem); margin: 0 auto var(--sp-5); rotate: 0deg; }
    .anotada__notas, .anotada__notas:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); justify-items: stretch; }
    .nota { max-width: none; }
    .anotada__zona > .anotada__pin, .anotada__zona--qr > .anotada__pin { left: auto; right: 0.5rem; }
    .anotada__sello { top: -1.5rem; right: -0.75rem; width: 92px; height: 92px; }
    /* El sello ocupa la esquina de arriba: la marca 1 baja al pie de su zona y la del
       sello pasa a su izquierda, para no salirse por el borde. */
    .anotada__zona[data-nota="1"] > .anotada__pin { top: auto; bottom: 0.45rem; translate: 0 0; }
    .anotada__sello > .anotada__pin { top: -6px; bottom: auto; right: auto; left: -10px; }
    /* Cinco hojas no llenan filas de tres ni de dos: se centran las que sobran, sin hueco */
    .abanico { display: flex; flex-wrap: wrap; justify-content: center; }
    .abanico__hoja { flex: 0 1 calc((100% - 2 * var(--sp-4)) / 3); }
}
@media (max-width: 1000px) {
    .reparto, .viaje, .tecnico, .despues__ops { grid-template-columns: minmax(0, 1fr); }
    .viaje, .tecnico { gap: var(--sp-6); }
    .viaje__pantalla { position: static; }
}
@media (max-width: 640px) {
    .anotada__notas, .anotada__notas:first-child { grid-template-columns: minmax(0, 1fr); }
    .parte__nuestro { grid-template-columns: minmax(0, 1fr); }
    .op-doc { grid-template-columns: auto minmax(0, 1fr); }
    .op-doc__demo { grid-column: 2; grid-auto-flow: column; align-items: center; justify-content: space-between; }
    .parte--tu { padding-bottom: 10.5rem; }
    .parte--tu img { height: 9.5rem; }
    .viaje__registro { grid-template-columns: minmax(0, 1fr); }
    .viaje__intentos p { grid-template-columns: 3.5rem 1fr; }
    .viaje__intentos .badge { grid-column: 2; justify-self: start; }
    .viaje__escenario { min-height: 27rem; }
    .abanico { gap: var(--sp-3); }
    .abanico__hoja { flex-basis: calc((100% - var(--sp-3)) / 2); }
    .abanico__hoja { min-height: 0; padding: var(--sp-4); }
    .abanico__hoja:nth-child(n) { --baja: 0px; }
}
@media (prefers-reduced-motion: reduce) {
    .nota, .anotada__pin, .anotada__factura, .anotada__zona, .anotada__sello, .abanico__hoja, .viaje__vista, .tecnico__resp { transition: none; }
    .tecnico__cursor { animation: none; }
}

/* =========================== Funcionalidades ============================
   Página /funcionalidades. Las tres teclas de la API con su pantalla, la clave como
   credencial colgada, lo que funciona hoy y las preguntas como en la portada. El movimiento
   va en assets/js/funcionalidades.js; sin JS todo se ve completo y quieto. */


/* Teclado: tres teclas grandes y una pantalla que enseña qué hace cada una. Son pestañas
   de verdad (role=tab); la elegida se queda hundida. Van en el orden del ciclo de una
   factura (enviar, consultar, anular), numeradas y unidas por un tramo de raya entre una
   y otra. Rectangulares con esquina suave, como los pasos de /verifactu. */
.teclado { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-7); align-items: stretch; }
.teclado__teclas { display: grid; gap: var(--sp-4); align-content: center; }
.tecla { --fondo: 7px; position: relative; display: block; width: 100%; padding: 0 0 var(--fondo); border: 0; border-radius: 16px; background: none; font: inherit; text-align: left; cursor: pointer; }
/* El grosor de la tecla: un bloque por debajo */
.tecla::before { content: ""; position: absolute; inset: var(--fondo) 0 0; border-radius: 16px; background: var(--brand-600); opacity: 0.35; }
/* El tramo que une una tecla con la anterior, a la altura de los números. */
.tecla + .tecla::after { content: ""; position: absolute; left: calc(var(--sp-6) + 17px); bottom: 100%; width: 2px; height: var(--sp-4); background: var(--brand-600); opacity: 0.45; }
.tecla__cara {
    position: relative; display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-6); border-radius: 16px; background: var(--paper);
    transition: translate 160ms var(--ease-out), background-color var(--t);
}
.tecla__nombre { font: var(--fw-heavy) clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.tecla code { margin-left: auto; font: var(--fw-regular) 0.78rem/1 var(--font-mono); color: var(--muted); white-space: nowrap; }
.tecla__n { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: var(--fw-medium) 0.8rem/1 var(--font-mono); background: var(--wait-tint); color: var(--muted); transition: background-color var(--t), color var(--t); }
.tecla[aria-selected="true"] .tecla__n { background: var(--paper); color: var(--brand-700); }
.tecla:hover .tecla__cara { translate: 0 2px; }
.tecla:active .tecla__cara { translate: 0 var(--fondo); }
.tecla[aria-selected="true"]::before { background: var(--brand-700); opacity: 1; }
.tecla[aria-selected="true"] .tecla__cara { translate: 0 calc(var(--fondo) - 2px); background: var(--brand); }
.tecla[aria-selected="true"] .tecla__nombre { color: var(--white); }
.tecla[aria-selected="true"] code { color: var(--brand-copy); }
.tecla:focus-visible { outline: none; }
.tecla:focus-visible .tecla__cara { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--brand-700); }
.teclado__pantalla { display: flex; flex-direction: column; padding: var(--sp-6); border-radius: var(--radius-card); background: var(--paper); box-shadow: var(--shadow-sheet); }
.teclado__panel { display: grid; gap: var(--sp-5); flex: 1; align-content: start; }
.teclado__panel[hidden] { display: none; }
.teclado__que { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink); max-width: 46ch; }
.teclado__codigo { margin: 0; padding: var(--sp-5); overflow-x: auto; border-radius: 14px; background: var(--surface); font: var(--fw-regular) 0.85rem/1.8 var(--font-mono); color: var(--ink); white-space: pre; }
.teclado__codigo .c { color: var(--muted); }
.teclado__codigo .k { color: var(--brand-700); }
.teclado__pie { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--muted); text-align: right; }
.teclado__bajo {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sp-5);
    margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line-strong); font-size: var(--fs-sm); color: var(--ink);
}


/* Credencial: la clave de API colgada de un cordón. Cordón y tarjeta son UNA pieza
   (.colgante) que cuelga del mismo punto: cae, se balancea amortiguada y se queda recta,
   así el texto en reposo no gira ni se emborrona. Con el ratón se inclina hacia él. */
/* Al balancearse, la tarjeta girada asoma por el borde en móvil y la página se podía
   desplazar de lado durante la caída: se recorta solo en horizontal, en el borde de la pantalla. */
.credencial-seccion { overflow-x: clip; }
.credencial-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: center; }
.credencial-escena { display: flex; justify-content: center; }
.colgante { display: flex; flex-direction: column; align-items: center; width: 100%; transform-origin: 50% 0; rotate: var(--inclina, 0deg); transition: rotate 700ms var(--ease-out); }
.colgante.is-espera { opacity: 0; }
.colgante.is-cae { animation: colgante-cae 2.4s cubic-bezier(.25, .7, .3, 1) both; }
@keyframes colgante-cae {
    0%   { transform: translateY(-70px) rotate(-14deg); opacity: 0; }
    15%  { opacity: 1; }
    32%  { transform: translateY(0) rotate(9deg); }
    48%  { transform: translateY(0) rotate(-5deg); }
    63%  { transform: translateY(0) rotate(2.8deg); }
    77%  { transform: translateY(0) rotate(-1.3deg); }
    90%  { transform: translateY(0) rotate(0.5deg); }
    100% { transform: translateY(0) rotate(0deg); opacity: 1; }
}
.credencial__cordon { position: relative; z-index: 1; width: 22px; height: 5.5rem; margin-bottom: -0.9rem; border-radius: 0 0 6px 6px; background: var(--brand); }
.credencial__cordon::after { content: ""; position: absolute; left: 50%; bottom: -0.55rem; width: 2rem; height: 1.3rem; margin-left: -1rem; border-radius: 6px; background: var(--paper); border: 2.5px solid var(--ink); }
.credencial { display: grid; gap: var(--sp-5); width: min(100%, 27rem); padding: var(--sp-6) var(--sp-6) var(--sp-5); border-radius: 22px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-sheet); }
.credencial__cab { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-3); padding-top: var(--sp-3); font-weight: var(--fw-bold); color: var(--ink); }
.credencial__agujero { position: absolute; left: 50%; top: calc(-1 * var(--sp-4)); width: 2.4rem; height: 0.7rem; margin-left: -1.2rem; border-radius: var(--radius-pill); background: var(--surface); box-shadow: inset 0 1px 2px rgba(20, 33, 27, 0.15); }
.credencial__clave { padding: var(--sp-3) var(--sp-4); overflow: hidden; border-radius: var(--radius-sm); background: var(--surface); font: var(--fw-regular) 0.95rem/1.4 var(--font-mono); color: var(--ink); white-space: nowrap; }
.credencial__clave i { font-style: normal; letter-spacing: 1px; color: var(--muted); }
.credencial__datos { display: grid; gap: var(--sp-4); }
.credencial__datos div { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--sp-3); align-items: center; }
.credencial__datos dt { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--muted); }
.credencial__datos dd { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.credencial__datos code { font: var(--fw-regular) 0.78rem/1.4 var(--font-mono); color: var(--ink); }
.credencial__chip { padding: 0.15rem 0.6rem; border-radius: var(--radius-pill); background: var(--brand-copy-soft); color: var(--brand-700); font: var(--fw-bold) 0.75rem/1.5 var(--font-mono); }
.colgante.is-cae .credencial__chip { animation: credencial-chip 500ms var(--ease-out) both; }
.colgante.is-cae .credencial__chip:nth-child(1) { animation-delay: 1.4s; }
.colgante.is-cae .credencial__chip:nth-child(2) { animation-delay: 1.6s; }
.colgante.is-cae .credencial__chip:nth-child(3) { animation-delay: 1.8s; }
@keyframes credencial-chip { from { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); } }
.credencial__datos .credencial__medidor { flex-wrap: nowrap; }
.credencial__ritmo { flex: 1; height: 8px; overflow: hidden; border-radius: var(--radius-pill); background: var(--line); }
.credencial__ritmo i { display: block; width: 28%; height: 100%; border-radius: inherit; background: var(--brand); transition: width 1s var(--ease-out); }
.credencial__medidor small { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.credencial__medidor b { font: var(--fw-medium) 0.8rem/1 var(--font-mono); color: var(--ink); }
.credencial__pie { font-size: var(--fs-xs); color: var(--muted); text-align: right; }
.credencial-texto { display: grid; gap: var(--sp-5); }
.credencial-texto h2 { font-size: var(--fs-h2); }
.credencial-texto > p { font-size: var(--fs-lead); color: var(--muted); }

/* Lo que funciona hoy: una sola tarjeta blanca (la sección es --surface). Cada punto lleva
   su icono en la línea del título y el texto alineado bajo el título, no bajo el icono.
   Lo pendiente no se cuenta en esta página. */
.hoy-api {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-6) var(--sp-8); align-items: start;
    padding: clamp(1.75rem, 4vw, 3.5rem); border-radius: var(--radius-card); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.hoy-api__cab { display: grid; gap: var(--sp-4); justify-items: start; }
.hoy-api h2 { font-size: var(--fs-h2); }
.hoy-api__texto { font-size: var(--fs-lead); color: var(--muted); }
.hoy-api__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-7); }
.hoy-api__lista li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4); align-items: center; align-content: start; }
.hoy-api__lista b { font-size: 1.1rem; line-height: 1.3; color: var(--ink); }
.hoy-api__txt { grid-column: 2; font-size: var(--fs-sm); line-height: 1.55; color: var(--body); }
.hoy-api__lista code { font-family: var(--font-mono); font-size: 0.85em; }

@media (max-width: 1000px) {
    .credencial-fila { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
    .credencial-escena { order: 2; }
    .hoy-api { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .teclado { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
    .teclado__teclas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
    .tecla__cara { justify-content: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-2); }
    .tecla__n { width: 26px; height: 26px; font-size: 0.72rem; }
    .tecla + .tecla::after { display: none; }
    .tecla code { display: none; }
    .tecla__nombre { font-size: 1.15rem; }
    .teclado__pantalla { padding: var(--sp-5); }
    .teclado__que { font-size: var(--fs-body); }
}
@media (max-width: 560px) {
    .hoy-api__lista { grid-template-columns: minmax(0, 1fr); }
    .tecla__n { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .colgante, .colgante.is-cae, .colgante.is-cae .credencial__chip, .credencial__ritmo i,
    .tecla__cara { animation: none; transition: none; }
}

/* ============================== Laboratorio ==============================
   Página /laboratorio (Producto → Laboratorio). La mesa de pruebas a página completa, en
   tres pasos numerados en el orden en que se usa: 1 tu factura y 2 qué quieres probar, a
   la izquierda (lo que haces); 3 qué le pasa y el resultado, a la derecha (lo que pasa),
   fija al bajar. Debajo, la cadena de registros. Cada bloque es su propia tarjeta.
   Lógica en assets/js/laboratorio.js, que hace todo el movimiento; con
   prefers-reduced-motion va sin transiciones. Clases con prefijo lab- porque .hoja,
   .paso, .chip… ya existen en otros bloques. */
/* Cabecera: texto centrado y, debajo y a lo ancho, el banco de pruebas (mismo lenguaje
   que el tendedero de Precios). Sobre blanco; la mesa empieza debajo, en su franja. */
.lab-cab { overflow: hidden; padding-top: var(--sp-7); background: var(--paper); }
/* El paso de la escena a la mesa es suave: el mueble del mostrador tiene el mismo verde
   que la franja de la mesa y no hay raya entre las dos; el mostrador hace de borde. La mesa
   empieza tras un respiro, sin título propio: el de la cabecera ya la presenta. */
.lab.section { padding-top: var(--sp-8); }
.lab-cab__texto { max-width: 46rem; text-align: center; }
.lab-cab h1 { font-size: var(--fs-h1); }
.lab-cab p { margin-top: var(--sp-4); font-size: var(--fs-lead); color: var(--muted); }
.lab__pastilla { display: inline-flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); padding: 0.2rem 0.7rem; border-radius: var(--radius-pill); background: var(--brand-copy); color: var(--brand-700); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.lab__pastilla .ico { width: 15px; height: 15px; }
.lab-cab .ico, .lab .ico { stroke-width: 1.9; }

/* El banco de pruebas (SVG de la vista). Trazo de tinta de 2,5 y rellenos de la paleta,
   como el tendedero. Clases lb-* porque .hoja, .pantalla, .ticket o .linea ya existen.
   Todo el movimiento es CSS, en bucles lentos como en Precios; laboratorio.js solo pone
   .is-hierve mientras viaja la factura y .is-ko / .is-warn con el resultado, y .is-on en
   el tubo del caso elegido. */
.lab-banco { display: block; width: 100%; max-width: none; height: 370px; margin-top: var(--sp-5); }
.lab-banco .lb-tinta { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }
.lab-banco .lb-linea { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.lab-banco .lb-linea--fina { stroke-width: 1.6; }
.lab-banco .lb-linea--tirador { stroke-width: 4; }
.lab-banco .lb-trazo { stroke: var(--ink); stroke-width: 2; }
/* Pared de fondo: baldas y botes en verdes muy claros, para que no compitan con el mostrador */
.lab-banco .lb-balda { fill: var(--brand-copy); }
@media (max-width: 1100px) { .lab-banco .lb-pared { display: none; } }
.lab-banco .lb-escuadra { fill: none; stroke: var(--brand-copy); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lab-banco .lb-bote > * { fill: var(--brand-copy-soft); stroke: var(--brand-copy); stroke-width: 2.5; stroke-linejoin: round; }
.lab-banco .lb-bote .lb-tapa { fill: var(--brand-copy); }
.lab-banco .lb-verde { fill: var(--brand); }
.lab-banco .lb-verde-c { fill: var(--brand-copy); }
.lab-banco .lb-tinta-f { fill: var(--ink); }
.lab-banco .lb-mueble { fill: var(--surface); stroke: var(--ink); stroke-width: 2.5; }

/* Personas: se asoman despacio, como los vecinos de Precios */
.lab-banco .lb-persona { animation: lab-asomar 4.4s ease-in-out infinite; }
.lab-banco .lb-persona--b { animation-duration: 5.2s; animation-delay: -1.8s; }
@keyframes lab-asomar { 50% { transform: translateY(6px); } }

/* Gradilla: el tubo del caso elegido se levanta y brilla */
.lab-banco .lb-tubo { transition: transform 450ms var(--ease-out); }
.lab-banco .lb-tubo.is-on { transform: translateY(-14px); }
.lab-banco .lb-brillo { fill: none; stroke: var(--brand-copy); stroke-width: 6; opacity: 0; transition: opacity var(--t); }
.lab-banco .lb-tubo.is-on .lb-brillo { opacity: 1; }
.lab-banco .lb-liq--ok { fill: var(--brand); }
.lab-banco .lb-liq--ko { fill: var(--danger); }
.lab-banco .lb-liq--warn { fill: var(--warn); }
.lab-banco .lb-burbujita { fill: var(--paper); animation: lab-sube 2.4s ease-in infinite; }
.lab-banco .lb-tubo:nth-of-type(2) .lb-burbujita { animation-delay: -0.45s; }
.lab-banco .lb-tubo:nth-of-type(3) .lb-burbujita { animation-delay: -0.9s; }
.lab-banco .lb-tubo:nth-of-type(4) .lb-burbujita { animation-delay: -1.35s; }
.lab-banco .lb-tubo:nth-of-type(5) .lb-burbujita { animation-delay: -1.8s; }
@keyframes lab-sube { from { transform: translateY(0); opacity: 0; } 20% { opacity: 0.9; } to { transform: translateY(-26px); opacity: 0; } }

/* Matraz: el líquido toma el color del resultado y las burbujas suben (más deprisa al enviar) */
.lab-banco .lb-matraz { fill: var(--brand-copy); transition: fill 500ms; }
.lab-banco .lb-superficie { fill: var(--brand); transition: fill 500ms; animation: lab-ola 3s ease-in-out infinite; }
@keyframes lab-ola { 50% { transform: translateX(-14px); } }
.lab-banco .lb-burbuja { fill: var(--paper); stroke: var(--brand); stroke-width: 2; animation: lab-burbujea 3s ease-in infinite; }
.lab-banco .lb-burbuja:nth-of-type(2) { animation-delay: -1.1s; }
.lab-banco .lb-burbuja:nth-of-type(3) { animation-delay: -2s; }
.lab-banco .lb-burbuja:nth-of-type(4) { animation-delay: -0.5s; }
.lab-banco .lb-burbuja:nth-of-type(5) { animation-delay: -1.6s; }
@keyframes lab-burbujea { from { transform: translateY(0) scale(0.6); opacity: 0; } 15%, 85% { opacity: 1; } to { transform: translateY(-62px) scale(1); opacity: 0; } }
.lab-banco.is-hierve .lb-burbuja { animation-duration: 0.9s; }
.lab-banco.is-hierve .lb-superficie { animation-duration: 0.8s; }
.lab-banco.is-ko .lb-matraz { fill: var(--danger-tint); }
.lab-banco.is-ko .lb-superficie { fill: var(--danger); }
.lab-banco.is-ko .lb-burbuja { stroke: var(--danger); }
.lab-banco.is-warn .lb-matraz { fill: var(--warn-tint); }
.lab-banco.is-warn .lb-superficie { fill: var(--warn); }
.lab-banco.is-warn .lb-burbuja { stroke: var(--warn); }

/* La factura baja al matraz con la pinza y la máquina imprime el ticket: ciclo de 8 s */
.lab-banco .lb-factura { animation: lab-baja 8s var(--ease-out) infinite; }
@keyframes lab-baja { 0%, 10% { transform: translateY(0); opacity: 1; } 35% { transform: translateY(78px); opacity: 1; } 42%, 100% { transform: translateY(96px); opacity: 0; } }
.lab-banco .lb-pinza { animation: lab-pinza 8s var(--ease-out) infinite; }
@keyframes lab-pinza { 0%, 10% { transform: translateY(0); } 35%, 60% { transform: translateY(78px); } 90%, 100% { transform: translateY(0); } }
.lab-banco .lb-ticket { animation: lab-imprime 8s var(--ease-out) infinite; }
@keyframes lab-imprime { 0%, 45% { transform: translateY(46px); } 62%, 88% { transform: translateY(0); } 100% { transform: translateY(46px); } }

/* Pantalla de la máquina: marca, cruz o reintento, según el resultado */
.lab-banco .lb-marca { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity var(--t); }
.lab-banco .lb-marca--ok { stroke: var(--brand); }
.lab-banco .lb-marca--ko { stroke: var(--danger); }
.lab-banco .lb-marca--warn { stroke: var(--warn); }
.lab-banco:not(.is-ko):not(.is-warn) .lb-marca--ok, .lab-banco.is-ko .lb-marca--ko, .lab-banco.is-warn .lb-marca--warn { opacity: 1; }
.lab-banco .lb-luz { fill: var(--brand); animation: lab-parpadea 1.6s steps(2, jump-none) infinite; }
.lab-banco.is-ko .lb-luz { fill: var(--danger); }
.lab-banco.is-warn .lb-luz { fill: var(--warn); }
@keyframes lab-parpadea { 50% { opacity: 0.25; } }
.lab-banco .lb-planta { transform-origin: 1058px 250px; animation: lab-planta 3.6s ease-in-out infinite alternate; }
@keyframes lab-planta { to { transform: rotate(3deg); } }

.lab-rejilla { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); align-items: start; gap: var(--sp-6); }
.lab-izq, .lab-der { display: grid; gap: var(--sp-5); min-width: 0; }
.lab-der { position: sticky; top: 104px; }

/* Tarjeta de cada paso */
.lab-tarjeta { border: 1px solid var(--line); border-radius: 20px; background: var(--paper); box-shadow: var(--shadow-card); }
.lab-tarjeta__cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sp-2) var(--sp-4); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); }
.lab-tarjeta__cab h2 { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); font-size: 1.15rem; font-weight: var(--fw-bold); letter-spacing: -0.01em; }
.lab-tarjeta__cab h2 small { font-size: var(--fs-sm); font-weight: var(--fw-regular); letter-spacing: 0; color: var(--muted); }
.lab-tarjeta__cuerpo { padding: var(--sp-5); }
.lab-n { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: var(--white); font: var(--fw-medium) 0.8rem var(--font-mono); }

.lab-conmutador { display: inline-flex; padding: 3px; border-radius: var(--radius-pill); background: var(--surface); }
.lab-conmutador button { padding: 0.35rem 0.85rem; border: 0; border-radius: var(--radius-pill); background: none; color: var(--muted); font: var(--fw-bold) var(--fs-xs) var(--font-sans); cursor: pointer; transition: background var(--t), color var(--t); }
.lab-conmutador button[aria-pressed="true"] { background: var(--paper); color: var(--brand-700); box-shadow: var(--shadow-card); }

/* 1. La factura */
.lab-hoja { display: grid; gap: var(--sp-4); }
.lab-hoja[hidden], .lab-json[hidden] { display: none; }
.lab-hoja__cab { display: flex; justify-content: space-between; align-items: end; gap: var(--sp-4); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); }
.lab-num { display: grid; gap: 0.15rem; flex: 1; min-width: 0; }
.lab-rotulo { font-size: 0.72rem; font-weight: var(--fw-bold); letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.lab-num input { width: 100%; padding: 0; border: 0; background: none; font: var(--fw-medium) 1.5rem var(--font-mono); color: var(--brand); }
.lab-num input:focus-visible { outline-offset: 4px; border-radius: 4px; }
.lab-emisor { flex: none; text-align: right; font: 0.82rem/1.6 var(--font-mono); color: var(--muted); }
.lab-campo { display: grid; gap: 0.4rem; }
.lab-campo input, .lab-campo select { width: 100%; height: 46px; padding: 0 0.85rem; border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font: inherit; }
.lab-campo input:focus, .lab-campo select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-copy); }
.lab-campo--mono input { font-family: var(--font-mono); }
.lab-dos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.lab-totales { display: grid; gap: 0.35rem; padding: 0.9rem 1.1rem; border-radius: 14px; background: var(--surface); font-size: var(--fs-sm); }
.lab-totales div { display: flex; justify-content: space-between; }
.lab-totales span + span { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.lab-totales .lab-total { margin-top: 0.2rem; padding-top: 0.45rem; border-top: 1px solid var(--line); color: var(--ink); font-weight: var(--fw-bold); }
.lab-totales .lab-total span + span { font-size: 1.15rem; font-weight: var(--fw-medium); color: var(--brand); }
.lab-json { display: grid; gap: var(--sp-3); }
.lab-json textarea { min-height: 470px; padding: var(--sp-4); resize: vertical; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); font: 0.76rem/1.7 var(--font-mono); color: var(--ink); }
.lab-json textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-copy); }
.lab-json p { font-size: var(--fs-xs); color: var(--muted); }

/* 2. Qué quieres probar: cada opción dice lo que va a pasar */
.lab-opciones { display: grid; gap: 0.6rem; }
.lab-chip { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.15rem 0.8rem; width: 100%; padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); text-align: left; font: inherit; cursor: pointer; transition: border-color var(--t), background var(--t), box-shadow var(--t); }
.lab-chip i { grid-row: span 2; display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--line-strong); border-radius: 50%; transition: border-color var(--t); }
.lab-chip i::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); transform: scale(0); transition: transform 250ms var(--ease-out); }
.lab-chip b { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink); font-size: 0.95rem; font-weight: var(--fw-bold); }
.lab-chip b em { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.lab-chip[data-t="ko"] b em { background: var(--danger); }
.lab-chip[data-t="warn"] b em { background: var(--warn); }
.lab-chip span { font-size: 0.85rem; color: var(--muted); }
.lab-chip:hover { border-color: var(--brand); }
.lab-chip[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-copy-soft); box-shadow: 0 0 0 3px var(--brand-copy); }
.lab-chip[aria-pressed="true"] i { border-color: var(--brand); }
.lab-chip[aria-pressed="true"] i::after { transform: none; }

.lab-enviar { display: grid; gap: var(--sp-3); }
.lab-enviar .btn { width: 100%; }
.lab-enviar .btn:disabled { opacity: 0.65; cursor: progress; transform: none; }
.lab-aclara { display: flex; align-items: flex-start; gap: 0.45rem; font-size: var(--fs-xs); color: var(--muted); }
.lab-aclara .ico { width: 15px; height: 15px; margin-top: 2px; color: var(--brand); }
.lab-aclara code { font-family: var(--font-mono); }

/* 3. Qué le pasa: el recorrido, a lo grande */
.lab-http { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--muted); }
.lab-ruta { --lab-margen: clamp(1.2rem, 3vw, 3rem); --lab-disco: 88px; position: relative; padding: 2.2rem var(--lab-margen) 1.6rem; }
.lab-ruta__nodos { position: relative; z-index: 1; display: flex; justify-content: space-between; }
.lab-ruta__pista { position: absolute; left: calc(var(--lab-margen) + var(--lab-disco) / 2); right: calc(var(--lab-margen) + var(--lab-disco) / 2); top: calc(2.2rem + var(--lab-disco) / 2 - 1px); height: 3px; overflow: hidden; border-radius: 3px; background: var(--line); }
.lab-ruta__lleno { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: var(--brand); }
.lab-ruta__lleno.is-ko { background: var(--danger); }
.lab-ruta__lleno.is-warn { background: var(--warn); }
.lab-nodo { display: grid; justify-items: center; gap: 0.2rem; width: 130px; text-align: center; }
.lab-nodo:first-child { justify-items: start; text-align: left; }
.lab-nodo:last-child { justify-items: end; text-align: right; }
.lab-nodo__disco { position: relative; display: grid; place-items: center; width: var(--lab-disco); height: var(--lab-disco); border: 1px solid var(--line); border-radius: 24px; background: var(--paper); color: var(--brand); box-shadow: var(--shadow-card); transition: border-color var(--t), box-shadow var(--t), background var(--t); }
.lab-nodo__disco .ico { width: 34px; height: 34px; }
.lab-nodo__disco::after { content: ""; position: absolute; inset: -8px; border: 2px solid var(--brand); border-radius: 30px; opacity: 0; }
.lab-nodo.is-activo .lab-nodo__disco { border-color: var(--brand); box-shadow: 0 0 0 5px var(--brand-copy), var(--shadow-card); }
.lab-nodo.is-activo .lab-nodo__disco::after { animation: lab-onda 1.1s var(--ease-out) infinite; }
.lab-nodo.is-hecho .lab-nodo__disco { border-color: var(--ok); }
.lab-nodo.is-ko .lab-nodo__disco { border-color: var(--danger); background: var(--danger-tint); color: var(--danger); box-shadow: 0 0 0 5px var(--danger-line); }
.lab-nodo.is-warn .lab-nodo__disco { border-color: var(--warn); background: var(--warn-tint); color: var(--warn); box-shadow: 0 0 0 5px var(--warn-tint); }
@keyframes lab-onda { from { opacity: 0.7; transform: scale(0.9); } to { opacity: 0; transform: scale(1.18); } }
.lab-nodo b { margin-top: 0.55rem; color: var(--ink); font-weight: var(--fw-bold); white-space: nowrap; }
.lab-nodo small { font-size: 0.8rem; color: var(--muted); }
.lab-nodo__f { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: var(--brand); color: var(--white); font: var(--fw-bold) 1.7rem/1 var(--font-sans); }
/* La factura que viaja; el script la mueve con translateX */
.lab-paquete { position: absolute; z-index: 3; left: 0; top: calc(2.2rem + var(--lab-disco) / 2 - 34px); display: grid; align-content: start; gap: 5px; width: 54px; height: 68px; padding: 9px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--paper); box-shadow: var(--shadow-sheet); opacity: 0; pointer-events: none; }
.lab-paquete i { display: block; height: 3px; border-radius: 2px; background: var(--line); }
.lab-paquete i:first-child { width: 60%; height: 4px; background: var(--brand); }
.lab-paquete i:nth-child(3) { width: 80%; }
.lab-paquete i:nth-child(4) { width: 45%; }
.lab-paquete b { position: absolute; left: 50%; bottom: -12px; translate: -50% 0; padding: 0.12rem 0.5rem; border-radius: var(--radius-pill); background: var(--brand); color: var(--white); font: var(--fw-medium) 0.66rem var(--font-mono); white-space: nowrap; }
.lab-paquete.is-ko { border-color: var(--danger-line); }
.lab-paquete.is-ko b { background: var(--danger); }
.lab-paquete.is-warn b { background: var(--warn); }

/* Las comprobaciones, en baldosas con su dato legible */
.lab-pasos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; padding: var(--sp-4) var(--sp-5) var(--sp-5); list-style: none; border-top: 1px solid var(--line); }
.lab-paso { display: grid; align-content: start; gap: var(--sp-2); min-width: 0; padding: 0.9rem 1rem; border-radius: 14px; background: var(--surface); color: var(--muted); transition: background var(--t), color var(--t); }
.lab-paso__m { display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--paper); transition: background var(--t), border-color var(--t); }
.lab-paso__m .ico { width: 14px; height: 14px; stroke-width: 2.4; color: var(--white); opacity: 0; transform: scale(0.4); transition: opacity var(--t), transform 350ms var(--ease-out); }
.lab-paso b { color: inherit; font-size: 0.92rem; font-weight: var(--fw-bold); line-height: 1.25; }
.lab-paso small { overflow: hidden; font: 0.72rem var(--font-mono); white-space: nowrap; text-overflow: ellipsis; }
.lab-paso.is-activo { background: var(--brand-copy-soft); color: var(--ink); }
.lab-paso.is-ok { color: var(--ink); }
.lab-paso.is-activo .lab-paso__m { border-color: var(--brand); border-top-color: transparent; animation: lab-gira 0.7s linear infinite; }
.lab-paso.is-ok .lab-paso__m { border-color: var(--brand); background: var(--brand); }
.lab-paso.is-ko { background: var(--danger-tint); color: var(--danger); }
.lab-paso.is-ko .lab-paso__m { border-color: var(--danger); background: var(--danger); }
.lab-paso.is-ok .lab-paso__m .ico, .lab-paso.is-ko .lab-paso__m .ico { opacity: 1; transform: none; }
@keyframes lab-gira { to { rotate: 360deg; } }

/* El resultado */
.lab-ver[hidden] { display: none; }
.lab-ticket { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-5) var(--sp-6); }
.lab-ticket.is-nuevo { animation: lab-entra 500ms var(--ease-out); }
@keyframes lab-entra { from { opacity: 0; transform: translateY(8px); } }
.lab-ticket__datos { display: grid; align-content: start; gap: var(--sp-4); min-width: 0; }
.lab-ticket__tit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.lab-ticket__tit strong { color: var(--ink); font: var(--fw-medium) 1.3rem var(--font-mono); }
.lab-ticket__msg { max-width: 52ch; }
.lab-ticket__msg code { font-family: var(--font-mono); font-size: 0.82rem; }
.lab-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-2) 1.2rem; margin: 0; padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: 0.88rem; }
.lab-dl dt { color: var(--muted); }
.lab-dl dd { overflow: hidden; margin: 0; color: var(--ink); font-family: var(--font-mono); white-space: nowrap; text-overflow: ellipsis; }
.lab-dl dd.is-huella { font-size: 0.76rem; line-height: 1.55; white-space: normal; word-break: break-all; }
.lab-qr { display: grid; justify-items: center; gap: 0.45rem; width: 150px; text-align: center; }
.lab-qr__img { display: grid; place-items: center; width: 150px; height: 150px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }
.lab-qr__img svg { display: block; width: 100%; height: 100%; }
.lab-qr small { font-size: 0.7rem; line-height: 1.35; color: var(--muted); }
.lab-qr small b { display: block; color: var(--ink); font: var(--fw-medium) 0.76rem var(--font-mono); }
.lab-qr.is-vacio .lab-qr__img { background: var(--surface); color: var(--line-strong); }
.lab-qr.is-vacio .lab-qr__img .ico { width: 52px; height: 52px; }
.lab-codigo { max-height: 380px; margin: 0; padding: var(--sp-4); overflow: auto; border-radius: 14px; background: var(--surface); color: var(--ink); font: 0.76rem/1.7 var(--font-mono); white-space: pre-wrap; word-break: break-word; }
.lab-codigo .k { color: var(--brand-700); }
.lab-codigo .n { color: var(--warn); }

/* La cadena de registros */
.lab-cadena { margin-top: var(--sp-6); }
.lab-enlace { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0; border: 0; background: none; color: var(--brand-700); font: var(--fw-bold) var(--fs-xs) var(--font-sans); cursor: pointer; }
.lab-enlace .ico { width: 15px; height: 15px; }
.lab-enlace:hover { text-decoration: underline; }
.lab-eslabones { display: flex; align-items: stretch; overflow-x: auto; padding: 0.3rem 0.1rem 0.6rem; }
.lab-eslabon { flex: none; display: grid; gap: 0.4rem; width: 210px; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.lab-eslabon.is-rechazo { border-color: var(--danger-line); background: var(--danger-tint); }
.lab-eslabon.is-anulacion { background: var(--surface); }
.lab-eslabon.is-nuevo { animation: lab-nuevo 700ms var(--ease-out); }
@keyframes lab-nuevo { from { opacity: 0; transform: translateX(24px) scale(0.94); } 60% { box-shadow: 0 0 0 5px var(--brand-copy); } }
.lab-eslabon__num { display: flex; justify-content: space-between; align-items: center; gap: 0.4rem; }
.lab-eslabon__num b { color: var(--ink); font: var(--fw-medium) 0.88rem var(--font-mono); }
.lab-eslabon__h { color: var(--muted); font: 0.72rem var(--font-mono); }
.lab-eslabon__h em { font-style: normal; color: var(--brand-700); }
.lab-eslabon .lab-enlace { justify-self: start; padding: 0; font-size: 0.78rem; }
.lab-union { position: relative; flex: none; display: grid; place-items: center; width: 40px; color: var(--brand); }
.lab-union::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--brand-copy); }
.lab-union .ico { position: relative; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); }
.lab-union.is-suelta { color: var(--line-strong); }
.lab-union.is-suelta::before { background: var(--line); }
.lab-vacia { padding: var(--sp-3) 0; font-size: var(--fs-sm); color: var(--muted); }
.lab-aviso { display: flex; justify-content: center; align-items: center; gap: 0.45rem; margin-top: var(--sp-5); font-size: var(--fs-xs); color: var(--muted); text-align: center; }
.lab-aviso .ico { width: 16px; height: 16px; color: var(--brand); }

@media (max-width: 1100px) {
    .lab-rejilla { grid-template-columns: minmax(0, 1fr); }
    .lab-der { position: static; }
    .lab-pasos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
    .lab-banco { height: 280px; }
    .lab-hoja__cab { flex-wrap: wrap; }
    .lab-emisor { text-align: left; }
    .lab-ruta { --lab-disco: 62px; }
    .lab-nodo { width: 86px; }
    .lab-nodo small { display: none; }
    .lab-nodo b { font-size: 0.85rem; }
    .lab-nodo__disco { border-radius: 18px; }
    .lab-nodo__disco .ico { width: 26px; height: 26px; }
    .lab-nodo__f { width: 36px; height: 36px; font-size: 1.3rem; }
    .lab-dos { grid-template-columns: minmax(0, 1fr); }
    .lab-ticket { grid-template-columns: minmax(0, 1fr); }
    .lab-qr { grid-template-columns: auto 1fr; justify-self: start; align-items: center; width: auto; text-align: left; }
    .lab-qr__img { width: 116px; height: 116px; }
    .lab-tarjeta__cab h2 { white-space: nowrap; }
    .lab-tarjeta__cab h2 small { flex-basis: 100%; white-space: normal; }
    .lab-cadena .lab-tarjeta__cab h2 { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
    .lab *, .lab *::before, .lab *::after, .lab-banco * { animation: none !important; transition: none !important; }
}

/* ============================== Gestorías ===============================
   Página /gestorias. Tu cartera en carriles (una clave, un carril por cliente hasta la
   AEAT), dos mesas (certificados amontonados frente a autorizaciones en orden) y la
   puesta en marcha en un portapapeles con los pasos numerados. Las clases llevan el
   prefijo gest- porque .cartera ya es de /precios. Movimiento en assets/js/gestorias.js. */

/* Hero: la selladora. El texto centrado y, debajo, a lo ancho de toda la pantalla, una
   cinta que lleva las carpetas de una cartera de ejemplo bajo un sello colgado de un
   pórtico («Una sola clave»): cada carpeta que pasa sale marcada como enviada y entra en la
   caja de la AEAT, al borde derecho. La línea del suelo es el borde inferior del hero.
   Todo es CSS y va sincronizado:
   - La cinta avanza una carpeta (--paso: 236 px) cada --t (3,806 s, 62 px/s) y el sello
     da un golpe por --t, justo cuando una carpeta queda centrada debajo.
   - La fila se desplaza 4 pasos en 4·--t y vuelve a empezar sin salto: las carpetas se
     repiten cada 4. Por eso las marcas son fijas salvo en las carpetas 1 a 4, que se
     marcan en su golpe: al 87,5 %, 62,5 %, 37,5 % y 12,5 % del ciclo (--m1…--m4).
   - En pantallas estrechas la escena se encoge con `zoom`; en móvil se quita el personaje. */
.page-hero.page-hero--selladora { padding-bottom: 0; border-bottom: 0; overflow-x: clip; }
.selladora-hero { display: grid; justify-items: center; text-align: center; }
.page-hero--selladora .selladora-hero > p { max-width: 60ch; }
.selladora { --t: 3.806s; --paso: 236px; margin-top: var(--sp-7); }
.selladora__escena { position: relative; height: 356px; }
.selladora__escena::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.5px; background: var(--ink); }
.selladora__escena > * { position: absolute; }

.selladora__persona { left: 40px; top: 18px; width: 230px; height: 262px; overflow: hidden; }
.selladora__persona img { position: absolute; left: 0; top: 0; width: auto; max-width: none; height: 300px; animation: selladora-asoma 4.4s ease-in-out infinite; }
@keyframes selladora-asoma { 50% { translate: 0 -5px; } }

/* La fila: la carpeta -4 empieza a la izquierda del todo y la 4 queda medio paso antes del sello. */
.selladora__fila { left: calc(50% - var(--paso) / 2 - 86px - 4 * var(--paso)); top: 150px; display: flex; gap: calc(var(--paso) - 172px); animation: selladora-cinta calc(4 * var(--t)) linear infinite; }
@keyframes selladora-cinta { from { translate: calc(-4 * var(--paso)) 0; } to { translate: 0 0; } }
.selladora__carpeta {
    position: relative; flex: none; width: 172px; height: 104px; margin-top: 14px; box-sizing: border-box; padding: 12px;
    background: var(--brand-copy); border: 2.5px solid var(--ink); border-radius: 0 10px 8px 8px;
}
.selladora__carpeta::before { content: ""; position: absolute; left: -2.5px; top: -16px; width: 70px; height: 16px; box-sizing: border-box; background: var(--brand-copy); border: 2.5px solid var(--ink); border-bottom: 0; border-radius: 8px 8px 0 0; }
.selladora__carpeta b { display: block; font-size: 0.84rem; font-weight: var(--fw-heavy); color: var(--ink); white-space: nowrap; }
.selladora__carpeta code { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 0.625rem; color: var(--muted); }
.selladora__lineas { display: block; height: 15px; margin-top: 10px; background: linear-gradient(var(--paper), var(--paper)) 0 0 / 70% 5px no-repeat, linear-gradient(var(--paper), var(--paper)) 0 10px / 50% 5px no-repeat; }
.selladora__marca {
    position: absolute; left: 50%; bottom: 12px; width: 92px; margin-left: -46px; box-sizing: border-box; padding: 3px 0; text-align: center;
    border: 2.5px solid var(--brand); border-radius: 6px; background: var(--brand-copy-soft); color: var(--brand); rotate: -7deg;
    font-size: 0.75rem; font-weight: var(--fw-heavy); letter-spacing: 0.08em; text-transform: uppercase;
}
.selladora__marca--m1 { animation: selladora-m1 calc(4 * var(--t)) linear infinite; }
.selladora__marca--m2 { animation: selladora-m2 calc(4 * var(--t)) linear infinite; }
.selladora__marca--m3 { animation: selladora-m3 calc(4 * var(--t)) linear infinite; }
.selladora__marca--m4 { animation: selladora-m4 calc(4 * var(--t)) linear infinite; }
@keyframes selladora-m1 { 0%, 87.2% { opacity: 0; scale: 1.5; } 89.5%, 100% { opacity: 1; scale: 1; } }
@keyframes selladora-m2 { 0%, 62.2% { opacity: 0; scale: 1.5; } 64.5%, 100% { opacity: 1; scale: 1; } }
@keyframes selladora-m3 { 0%, 37.2% { opacity: 0; scale: 1.5; } 39.5%, 100% { opacity: 1; scale: 1; } }
@keyframes selladora-m4 { 0%, 12.2% { opacity: 0; scale: 1.5; } 14.5%, 100% { opacity: 1; scale: 1; } }

/* La cinta: los rodillos son un fondo de puntos que corre a la misma velocidad. */
.selladora__cinta { left: 0; right: 0; top: 268px; height: 26px; border-radius: 4px; background: radial-gradient(circle, var(--paper) 0 4px, transparent 4.5px) 0 50% / 60px 100% repeat-x, var(--ink); animation: selladora-rodillos calc(var(--t) * 60 / 236) linear infinite; }
@keyframes selladora-rodillos { to { background-position: 60px 50%, 0 0; } }
.selladora__pata { left: 23%; top: 294px; bottom: 0; width: 14px; box-sizing: border-box; background: var(--paper); border: 2.5px solid var(--ink); border-top: 0; }
.selladora__pata--b { left: 77%; }

/* El pórtico con el sello, centrado. */
.selladora__portico { left: calc(50% - 135px); top: 0; width: 270px; height: 268px; }
.selladora__portico > * { position: absolute; box-sizing: border-box; }
.selladora__viga { left: 0; top: 0; width: 270px; height: 30px; z-index: 3; display: grid; place-items: center; background: var(--brand); border: 3px solid var(--ink); border-radius: 10px; color: var(--white); font-size: 0.75rem; font-weight: var(--fw-heavy); letter-spacing: 0.14em; text-transform: uppercase; }
.selladora__poste { left: 14px; top: 20px; bottom: -8px; width: 16px; z-index: 3; background: var(--paper); border: 2.5px solid var(--ink); }
.selladora__poste--b { left: auto; right: 14px; }
.selladora__sello { left: 50%; top: 8px; width: 110px; height: 96px; margin-left: -55px; z-index: 2; transform-origin: 50% 100%; animation: selladora-golpe var(--t) cubic-bezier(.5, 0, .4, 1) infinite; }
.selladora__sello > * { position: absolute; box-sizing: border-box; }
.selladora__mango { left: 47px; top: 0; width: 16px; height: 34px; background: var(--paper); border: 2.5px solid var(--ink); border-top: 0; }
.selladora__pomo { left: 30px; top: 22px; width: 50px; height: 34px; display: grid; place-items: center; background: var(--brand); border: 2.5px solid var(--ink); border-radius: 50% 50% 10px 10px; color: var(--white); }
.selladora__pomo .ico { width: 22px; height: 22px; stroke-width: 2.4; }
.selladora__base { left: 0; right: 0; top: 54px; height: 26px; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 6px; }
.selladora__base::after { content: ""; position: absolute; left: 3.5px; right: 3.5px; top: 21.5px; height: 12px; box-sizing: border-box; background: var(--brand); border: 2.5px solid var(--ink); border-top: 0; border-radius: 0 0 5px 5px; }
@keyframes selladora-golpe { 0%, 36% { translate: 0 0; } 48% { translate: 0 54px; scale: 1 0.94; } 54% { translate: 0 54px; scale: 1 1; } 70%, 100% { translate: 0 0; } }
.selladora__chispa { left: 55px; top: 140px; width: 160px; height: 30px; z-index: 4; overflow: visible; opacity: 0; animation: selladora-chispa var(--t) ease-out infinite; }
.selladora__chispa path { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; }
@keyframes selladora-chispa { 0%, 44% { opacity: 0; scale: 0.6; } 50% { opacity: 1; scale: 1; } 66%, 100% { opacity: 0; scale: 1.3; } }

/* La caja de la AEAT, pegada al borde derecho: las carpetas entran por su boca. */
.selladora__aeat { right: -3px; top: 78px; bottom: 0; width: 193px; z-index: 5; box-sizing: border-box; padding: 26px 0 0 26px; background: var(--brand); border: 3px solid var(--ink); border-radius: 16px 0 0 0; color: var(--white); font-size: 1.375rem; font-weight: var(--fw-heavy); letter-spacing: 0.18em; }
.selladora__aeat::before { content: ""; position: absolute; left: -3px; top: 90px; width: 24px; height: 100px; background: var(--ink); border-radius: 0 8px 8px 0; }
.selladora__nota { left: calc(23% + 28px); bottom: 10px; font-size: var(--fs-xs); color: var(--muted); }

/* El `zoom` sale de --zoom-ancho (y de --zoom-alto, § Heros a la medida de la pantalla). */
.selladora__escena { zoom: var(--zoom-ancho, 1); }
@media (max-width: 1100px) { .selladora__escena { --zoom-ancho: 0.8; } }
@media (max-width: 760px) { .selladora__escena { --zoom-ancho: 0.62; } .selladora__persona { display: none; } }
@media (max-width: 480px) { .selladora__escena { --zoom-ancho: 0.5; } }
@media (prefers-reduced-motion: reduce) {
    .selladora__fila, .selladora__sello, .selladora__chispa, .selladora__cinta, .selladora__persona img { animation: none; }
    .selladora__marca--m1, .selladora__marca--m2, .selladora__marca--m3, .selladora__marca--m4 { animation: none; opacity: 0; }
    .selladora__fila { translate: calc(-4 * var(--paso)) 0; }
}

/* Tu cartera: el programa a la izquierda y un carril por cliente */
.gest-cartera { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--sp-5); }
.gest-origen {
    display: grid; align-content: center; gap: var(--sp-3); padding: var(--sp-5);
    border-radius: var(--radius-card); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.gest-origen__cab { display: flex; align-items: center; gap: var(--sp-3); }
.gest-origen__cab b { font: var(--fw-bold) 1.1rem/1.25 var(--font-display); color: var(--ink); }
.gest-origen > span { font-size: var(--fs-xs); color: var(--muted); }
.gest-origen code { justify-self: start; padding: 0.3rem 0.6rem; border-radius: 8px; background: var(--surface); font: var(--fw-regular) 0.72rem/1.4 var(--font-mono); color: var(--ink); }
/* Tabla de carriles: cabecera en una banda gris con las columnas bien marcadas, filas
   separadas por una raya fina y un carril corto (no ocupa todo lo que sobra). */
.gest-carriles {
    display: grid; grid-template-columns: auto minmax(6rem, 1fr) auto; column-gap: var(--sp-8);
    overflow: hidden; border-radius: var(--radius-card); background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-sheet);
}
/* Las filas comparten las columnas de la tabla (subgrid): así todos los carriles empiezan
   y acaban en el mismo sitio, con el mismo hueco hasta el cliente más largo y la pastilla. */
.gest-carriles__cab, .gest-carril { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; column-gap: var(--sp-8); align-items: center; padding-inline: var(--sp-6); }
.gest-carriles__cab { padding-block: var(--sp-3); background: var(--wait-tint); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink); }
/* El carril ocupa todo el hueco entre el cliente más largo y la pastilla, con la misma
   separación a cada lado (el gap). «Envío» va centrado sobre él; «AEAT» tiene el ancho
   de la pastilla de debajo, así el título cae en el centro de «Aceptada». */
.gest-carriles__cab span:nth-child(2) { text-align: center; }
.gest-carriles__cab span:last-child, .gest-carril .badge { justify-self: end; width: 6.5rem; justify-content: center; text-align: center; }
.gest-carril { padding-block: var(--sp-4); border-top: 1px solid var(--line); }
.gest-carril:nth-child(2) { border-top: 0; }
.gest-cliente { display: grid; grid-template-columns: auto 1fr; gap: 0.1rem var(--sp-3); align-items: center; }
.gest-cliente__ini { grid-row: span 2; width: 36px; height: 36px; border-radius: var(--radius); display: grid; place-items: center; background: var(--surface); font: var(--fw-bold) 0.8rem/1 var(--font-display); color: var(--brand-700); }
.gest-cliente b { font-size: var(--fs-sm); line-height: 1.2; color: var(--ink); }
.gest-cliente code { font: var(--fw-regular) 0.7rem/1.3 var(--font-mono); color: var(--muted); }
/* El carril: una raya continua por la que viaja el número de la factura */
.gest-via { position: relative; height: 2px; border-radius: 2px; background: var(--line); }
.gest-via i {
    position: absolute; top: 50%; left: 0; translate: 0 -50%; padding: 0.2rem 0.5rem; border-radius: 6px;
    background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--brand); font: var(--fw-medium) 0.66rem/1.2 var(--font-mono); font-style: normal; color: var(--brand-700); white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
    .gest-via i { animation: gest-viaja 4.8s var(--ease-out) infinite; }
    .gest-carril:nth-child(3) .gest-via i { animation-delay: 1.1s; }
    .gest-carril:nth-child(4) .gest-via i { animation-delay: 2.3s; }
    .gest-carril:nth-child(5) .gest-via i { animation-delay: 0.5s; }
    .gest-carril:nth-child(6) .gest-via i { animation-delay: 3.1s; }
}
@keyframes gest-viaja { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 55% { left: calc(100% - 5.5rem); opacity: 1; } 65%, 100% { left: calc(100% - 5.5rem); opacity: 0; } }
.gest-cartera__pie { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-7); margin-top: var(--sp-5); font-size: var(--fs-sm); color: var(--body); }
.gest-cartera__pie li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.gest-cartera__pie .ico { width: 20px; height: 20px; color: var(--brand); stroke-width: var(--icon-stroke); }

/* Dos mesas: el montón revuelto de certificados y la pila ordenada de autorizaciones */
.gest-mesas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
.gest-mesa { display: grid; gap: var(--sp-5); padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--radius-card); }
.gest-mesa--antes { box-shadow: inset 0 0 0 1px var(--line-strong); }
.gest-mesa--ahora { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-sheet); }
.gest-mesa__tit { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sp-3); }
.gest-mesa__tit h3 { font-size: 1.35rem; }
.gest-mesa__tit small { font-size: var(--fs-xs); line-height: 1.2; color: var(--muted); }
.gest-monton { position: relative; height: 16.5rem; }
.gest-doc {
    position: absolute; display: grid; gap: 0.3rem; width: min(17rem, 78%); padding: var(--sp-4);
    border-radius: 12px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow-card); font-size: var(--fs-xs); color: var(--muted);
}
.gest-doc b { font-size: var(--fs-sm); color: var(--ink); }
.gest-doc code { font: var(--fw-regular) 0.68rem/1.4 var(--font-mono); }
.gest-doc__mal { font-weight: var(--fw-bold); color: var(--danger); }
.gest-doc__firma { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.gest-monton--caos .gest-doc { transition: translate 500ms var(--ease-out); }
.gest-monton--caos .gest-doc:nth-child(1) { left: 4%; top: 6%; rotate: -9deg; }
.gest-monton--caos .gest-doc:nth-child(2) { left: 22%; top: 22%; rotate: 6deg; }
.gest-monton--caos .gest-doc:nth-child(3) { left: 8%; top: 42%; rotate: -3deg; }
.gest-monton--caos .gest-doc:nth-child(4) { left: 28%; top: 52%; rotate: 11deg; }
/* Al pasar el ratón, el montón se revuelve un poco más */
.gest-mesa--antes:hover .gest-doc:nth-child(odd) { translate: -6px 4px; }
.gest-mesa--antes:hover .gest-doc:nth-child(even) { translate: 8px -4px; }
.gest-monton--orden .gest-doc { left: 50%; }
.gest-monton--orden .gest-doc:nth-child(1) { top: 6%; translate: calc(-50% - 24px) 0; }
.gest-monton--orden .gest-doc:nth-child(2) { top: calc(6% + 22px); translate: calc(-50% - 8px) 0; }
.gest-monton--orden .gest-doc:nth-child(3) { top: calc(6% + 44px); translate: calc(-50% + 8px) 0; }
.gest-mesa__puntos { display: grid; gap: var(--sp-3); font-size: var(--fs-sm); }
.gest-mesa__puntos li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3); }
.gest-mesa__puntos .ico { width: 20px; height: 20px; margin-top: 1px; stroke-width: var(--icon-stroke); color: var(--brand); }
.gest-mesa--antes .gest-mesa__puntos .ico { color: var(--danger); }

/* Puesta en marcha: un portapapeles con los pasos numerados, que se marcan al llegar */
.gest-marcha { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); align-items: center; }
.gest-marcha h2 { font-size: var(--fs-h2); }
.gest-marcha > div > p { margin-top: var(--sp-4); font-size: var(--fs-lead); color: var(--muted); }
.gest-clip { position: relative; padding: 3.2rem clamp(1.25rem, 3vw, 2.25rem) var(--sp-6); border-radius: 22px; background: var(--paper); box-shadow: var(--shadow-sheet); }
/* La pinza del portapapeles */
.gest-clip::before { content: ""; position: absolute; top: -14px; left: 50%; width: 8rem; height: 2.2rem; margin-left: -4rem; border-radius: var(--radius); background: var(--brand); box-shadow: inset 0 -6px 0 var(--brand-700); }
.gest-clip::after { content: ""; position: absolute; top: -4px; left: 50%; width: 2.6rem; height: 0.7rem; margin-left: -1.3rem; border-radius: var(--radius-pill); background: var(--paper); }
.gest-clip li { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); padding-block: var(--sp-4); border-bottom: 1px solid var(--line); }
.gest-clip li:last-child { border-bottom: 0; }
.gest-clip__n {
    width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    background: var(--brand); color: var(--white); font: var(--fw-medium) 0.8rem/1 var(--font-mono);
    transition: background-color 350ms var(--ease-out), color 350ms var(--ease-out), scale 450ms cubic-bezier(.3, 1.6, .5, 1);
}
.gest-clip li.is-pendiente .gest-clip__n { background: var(--wait-tint); color: var(--muted); scale: 0.85; }
.gest-clip b { display: block; font-size: 1.05rem; color: var(--ink); }
.gest-clip li p { margin-top: 2px; font-size: var(--fs-sm); color: var(--body); }
.gest-clip li small { display: block; margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--muted); }

@media (max-width: 1000px) {
    .gest-cartera, .gest-marcha { grid-template-columns: minmax(0, 1fr); }
    .gest-marcha { gap: var(--sp-7); }
}
@media (max-width: 860px) { .gest-mesas { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
    .gest-carriles { grid-template-columns: minmax(0, 1fr); }
    .gest-carriles__cab { display: none; }
    .gest-carril { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-3); padding-inline: var(--sp-4); }
    .gest-carril .badge { width: auto; }
    .gest-carril:nth-child(2) { border-top: 0; }
    .gest-via { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .gest-monton--caos .gest-doc, .gest-clip__n { transition: none; }
}

/* ============================ Pymes y autónomos ============================
   Página /pymes-autonomos. Hero con la factura que sale de tu programa, la cinta (la
   factura recorre los seis pasos que hacemos nosotros hasta la AEAT), cuatro situaciones
   con la pantalla del panel, los cuatro pasos del alta, dos planes de Config\Planes y
   preguntas. Todo con prefijo pym- porque app.css ya usa .pantalla, .sello, .planes,
   .paso… Movimiento en assets/js/pymes.js. */
.pym-tile { flex: none; width: 40px; height: 40px; border-radius: var(--radius); background: var(--brand-copy); color: var(--brand); display: grid; place-items: center; }
.pym-tile .ico { width: 22px; height: 22px; stroke-width: var(--icon-stroke); }
.pym-check { flex: none; width: 24px; height: 24px; color: var(--brand); display: grid; place-items: center; }
.pym-check .ico { width: 18px; height: 18px; stroke-width: var(--icon-stroke); }

/* Hero: la calle de los oficios (23/09/2026). Texto centrado arriba y, debajo, una calle a
   todo lo ancho con el trazo de tinta y la ciudad clara del hero de /precios. Cinco
   comercios se encienden por turnos (pymes.js): su rótulo se pone verde, la persona se
   asoma, sube su factura de ejemplo y recibe el sello. La palabra del titular cambia con
   el comercio; su hueco se ajusta con transición para que el titular no salte. */
.page-hero.pym-hero { padding-block: var(--sp-6) 0; border-bottom: 0; overflow-x: clip; }
.pym-hero__texto { display: grid; justify-items: center; text-align: center; }
.page-hero.pym-hero h1 { max-width: none; font-size: clamp(2rem, .9rem + 3vw, 3.6rem); line-height: 1.08; }
.pym-hero__linea { display: block; }
/* En escritorio, «Tú emites la factura de tu taller.» cabe en una línea: el titular queda
   en dos y la calle sube. En móvil, tres líneas fijas. */
@media (min-width: 1000px) { .pym-hero__linea:not(em) { display: inline; } }
.pym-hero h1 em { font-style: normal; } /* En verde solo la palabra que rota: un resalte por titular (GUIA_REDACCION.md §5 bis). */
.pym-hero .hero__cta { margin-top: var(--sp-5); }
/* Sin entradilla: la altura que deja se la lleva la calle, para que la factura respire sobre el tejado. */
.pym-rota { position: relative; display: inline-block; height: 1.06em; vertical-align: bottom; color: var(--brand); transition: width .55s var(--ease-out); }
/* La palabra ocupa su sitio normal hasta que pymes.js fija el ancho del hueco (.is-lista);
   entonces pasa a capa para que la nueva entre sobre la vieja. Así no hay salto al cargar. */
.pym-rota > span { white-space: nowrap; transition: transform .5s var(--ease-out), opacity .4s; }
.pym-rota.is-lista > span { position: absolute; left: 0; top: 0; }
.pym-rota > .is-sale { transform: translateY(-.35em); opacity: 0; }
.pym-rota > .is-entra { transform: translateY(.35em); opacity: 0; }
.pym-rota > .pym-rota__mide { visibility: hidden; transition: none; }

.pym-calle { position: relative; height: 560px; margin-top: var(--sp-5); }
.pym-calle__ciudad span {
    position: absolute; bottom: 52px; box-sizing: border-box; border: 12px solid var(--brand-copy-soft); border-bottom: 0; border-radius: 6px 6px 0 0;
    background:
        linear-gradient(90deg, var(--brand-copy-soft) 12px, transparent 0) 0 0 / 26px 100%,
        linear-gradient(var(--brand-copy-soft) 14px, transparent 0) 0 0 / 100% 30px,
        var(--paper);
}
.pym-calle__ciudad span:nth-child(1) { left: 4%; width: 130px; height: 360px; }
.pym-calle__ciudad span:nth-child(2) { left: 17%; width: 100px; height: 390px; }
.pym-calle__ciudad span:nth-child(3) { left: 31%; width: 150px; height: 350px; }
.pym-calle__ciudad span:nth-child(4) { left: 49%; width: 110px; height: 395px; }
.pym-calle__ciudad span:nth-child(5) { left: 63%; width: 140px; height: 360px; }
.pym-calle__ciudad span:nth-child(6) { left: 79%; width: 100px; height: 385px; }
.pym-calle__ciudad span:nth-child(7) { left: 90%; width: 130px; height: 350px; }
.pym-calle__acera { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; background: var(--surface); border-top: 3px solid var(--ink); }
/* La fila se centra sola; en pantallas estrechas pymes.js la desplaza al comercio del turno. */
.pym-calle__fila { position: absolute; bottom: 52px; left: 50%; display: flex; gap: 26px; transform: translateX(calc(-1 * var(--x, 50%))); transition: transform .8s var(--ease-out); }

.pym-tienda { position: relative; flex: none; width: 236px; height: 300px; background: var(--paper); border: 3px solid var(--ink); border-bottom: 0; border-radius: 4px 4px 0 0; }
.pym-tienda::before { content: ""; position: absolute; left: -10px; right: -10px; top: -16px; height: 16px; background: var(--paper); border: 3px solid var(--ink); border-radius: 4px; }
.pym-tienda__rotulo {
    position: absolute; left: 50%; top: 14px; min-width: 150px; padding: .35rem .9rem; translate: -50% 0;
    border: 3px solid var(--ink); border-radius: 8px; background: var(--brand-copy);
    font: var(--fw-heavy) 1.05rem/1.2 var(--font-display); letter-spacing: -.01em; color: var(--ink); text-align: center; white-space: nowrap;
    transition: background .35s, color .35s;
}
.pym-tienda__ok { position: absolute; right: -12px; top: -12px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--paper); background: var(--brand); color: var(--white); display: grid; place-items: center; transform: scale(0); transition: transform .4s var(--ease-out); }
.pym-tienda__ok .ico { width: 13px; height: 13px; stroke-width: 3.4; }
.pym-tienda.is-hecha .pym-tienda__ok { transform: scale(1); }
.pym-tienda__toldo { position: absolute; left: -8px; top: 66px; width: calc(100% + 16px); max-width: none; height: 44px; transform-origin: 50% 0; transition: transform .5s var(--ease-out); }
.pym-tienda__toldo path { stroke: var(--ink); stroke-width: 3; }
.pym-tienda__toldo .is-verde { fill: var(--brand); }
.pym-tienda__toldo .is-blanco { fill: var(--paper); }
.pym-tienda__bandera { position: absolute; right: -30px; top: 66px; z-index: 2; width: 46px; height: 46px; border-radius: 50%; border: 3px solid var(--ink); background: var(--paper); display: grid; place-items: center; }
.pym-tienda__bandera::before { content: ""; position: absolute; left: -14px; top: 50%; width: 14px; height: 3px; background: var(--ink); }
.pym-tienda__bandera .ico { width: 24px; height: 24px; color: var(--ink); stroke-width: var(--icon-stroke); }
.pym-tienda__escaparate { position: absolute; left: 14px; top: 124px; width: 124px; height: 176px; overflow: hidden; border: 3px solid var(--ink); border-bottom: 0; border-radius: 6px 6px 0 0; background: var(--brand-copy-soft); transition: background .35s; }
.pym-tienda__escaparate::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: var(--paper); border-top: 3px solid var(--ink); }
/* --mira: las personas de los dos últimos comercios se voltean para mirar a los primeros. */
.pym-tienda__escaparate img { position: absolute; left: 50%; bottom: -40px; height: 190px; width: auto; max-width: none; transform: translateX(-50%) scaleX(var(--mira, 1)); }
.pym-tienda:nth-child(n + 4) .pym-tienda__escaparate img { --mira: -1; }
.pym-tienda__puerta { position: absolute; right: 14px; bottom: 0; width: 66px; height: 176px; border: 3px solid var(--ink); border-bottom: 0; border-radius: 4px 4px 0 0; background: var(--paper); }
.pym-tienda__puerta::before { content: ""; position: absolute; left: 10px; right: 10px; top: 12px; height: 58px; border: 3px solid var(--ink); border-radius: 3px; background: var(--brand-copy-soft); transition: background .35s; }
.pym-tienda__puerta::after { content: ""; position: absolute; right: 9px; top: 96px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.pym-tienda.is-activa .pym-tienda__rotulo { background: var(--brand); color: var(--white); }
.pym-tienda.is-activa .pym-tienda__escaparate, .pym-tienda.is-activa .pym-tienda__puerta::before { background: var(--brand-copy); }
.pym-tienda.is-activa .pym-tienda__toldo { transform: scaleY(1.12); }
.pym-tienda.is-activa .pym-tienda__escaparate img { animation: pym-asoma .9s var(--ease-out); }
@keyframes pym-asoma { from { transform: translate(-50%, 24px) scaleX(var(--mira, 1)); } to { transform: translate(-50%, 0) scaleX(var(--mira, 1)); } }

/* La factura que sube de cada comercio */
.pym-tienda__factura {
    position: absolute; left: 50%; bottom: calc(100% + 58px); z-index: 3; width: 228px; padding: .75rem .85rem; font-size: .72rem;
    background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sheet);
    opacity: 0; transform: translate(-50%, 24px) scale(.9); transition: opacity .35s, transform .6s var(--ease-out); pointer-events: none;
}
.pym-tienda__factura::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 58px; background: var(--ink); }
.pym-tienda__ejemplo { display: block; margin-top: .4rem; font-size: .66rem; color: var(--muted); }
.pym-tienda.is-activa .pym-tienda__factura { opacity: 1; transform: translate(-50%, 0); }
.pym-tienda__top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.pym-tienda__no { font: var(--fw-medium) .78rem var(--font-mono); color: var(--brand); white-space: nowrap; }
.pym-tienda__estado { position: relative; flex: none; width: 80px; height: 22px; }
.pym-tienda__estado .badge { position: absolute; right: 0; top: 0; transition: opacity .25s; }
.pym-tienda__estado .badge--accent { opacity: 0; }
.pym-tienda.is-aceptada .pym-tienda__estado .badge--soft { opacity: 0; }
.pym-tienda.is-aceptada .pym-tienda__estado .badge--accent { opacity: 1; }
.pym-tienda__concepto { margin-top: .35rem; font-size: .8rem; font-weight: var(--fw-bold); color: var(--ink); }
.pym-tienda__total { margin-top: .45rem; padding-top: .4rem; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-weight: var(--fw-bold); color: var(--ink); }
.pym-tienda__total span:last-child { font: var(--fw-medium) .76rem var(--font-mono); }
.pym-tienda__sello { position: absolute; right: -26px; top: -20px; width: 58px; height: 58px; max-width: none; color: var(--brand); opacity: 0; transform: scale(2) rotate(-30deg); transition: opacity .2s, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.pym-tienda__sello-fondo { fill: var(--paper); }
.pym-tienda__sello text { font: var(--fw-medium) 10.5px var(--font-mono); letter-spacing: 1.5px; fill: currentColor; }
.pym-tienda.is-aceptada .pym-tienda__sello { opacity: 1; transform: rotate(-12deg); }
@media (max-width: 700px) {
    .pym-calle { margin-top: var(--sp-6); }
    .pym-calle__ciudad span:nth-child(n + 4) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .pym-rota, .pym-rota > span, .pym-calle__fila, .pym-tienda * { transition: none; animation: none; }
}

/* La cinta: de tu programa a la AEAT. La vía pasa por los nudos de las estaciones; --y es
   su altura: relleno + etiquetas + hueco + baldosa + poste (si cambian, se cambia aquí). */
.pym-cinta {
    --y: calc(2.5rem + 30px + 1.2rem + 18px + 56px + 22px + 2px);
    position: relative; padding: 2.5rem; display: grid; grid-template-columns: 1.25fr 6fr 1.25fr; gap: 1.2rem;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-sheet);
}
.pym-cinta__via { position: absolute; left: 12%; right: 12%; top: var(--y); height: 4px; border-radius: 2px; background: var(--brand-copy); }
.pym-cinta__via i { position: absolute; inset: 0; border-radius: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-out); }
.pym-cinta__etq { height: 30px; display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--brand-700); }
.pym-cinta__etq--linea::before, .pym-cinta__etq--linea::after { content: ""; flex: 1; height: 2px; border-radius: 1px; background: var(--brand-copy); }
.pym-cinta__etq--fin { justify-content: center; }
.pym-extremo { position: relative; z-index: 1; display: grid; justify-items: center; align-content: start; gap: var(--sp-3); text-align: center; }
.pym-extremo__caja {
    margin-top: 52px; width: 100%; max-width: 170px; height: 92px; display: grid; place-items: center; align-content: center; gap: var(--sp-1);
    background: var(--paper); border: 1.5px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-card);
}
.pym-extremo__caja .ico { width: 26px; height: 26px; color: var(--brand); stroke-width: var(--icon-stroke); }
.pym-extremo__caja b { font-size: 0.9rem; color: var(--ink); }
.pym-extremo--tu .pym-extremo__caja { border-color: var(--brand); }
.pym-extremo p { font-size: var(--fs-sm); max-width: 18ch; }
.pym-extremo code { font-size: 0.72rem; color: var(--brand); }
.pym-cinta__sello {
    position: absolute; top: 26px; right: -6px; width: 74px; height: 74px; max-width: none; color: var(--brand);
    transform: rotate(-12deg); transition: opacity .25s, transform .45s cubic-bezier(.3, 1.6, .5, 1);
}
.pym-cinta__sello text { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.5px; fill: currentColor; }
.pym-estaciones { grid-column: 2; grid-row: 2; position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.6rem; }
.pym-estacion { display: grid; justify-items: center; align-content: start; text-align: center; }
.pym-estacion__tile {
    margin-top: 18px; width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center;
    background: var(--brand); border: 1.5px solid var(--brand); color: var(--white);
    transition: background .35s, color .35s, border-color .35s, transform .45s var(--ease-out);
}
.pym-estacion__tile .ico { width: 26px; height: 26px; stroke-width: var(--icon-stroke); }
.pym-estacion__poste { width: 2px; height: 22px; background: var(--brand); transition: background .35s; }
.pym-estacion__nudo { width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; background: var(--brand); border: 3px solid var(--brand); transition: border-color .35s, background .35s; }
.pym-estacion b { margin-top: 1.1rem; font-family: var(--font-display); font-size: 0.97rem; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.pym-estacion__txt { margin-top: var(--sp-2); font-size: 0.86rem; line-height: 1.45; }
.pym-ficha {
    position: absolute; z-index: 2; top: calc(var(--y) - 15px); left: 0; height: 34px; padding: 0 var(--sp-3);
    display: none; align-items: center; gap: var(--sp-2); white-space: nowrap;
    background: var(--paper); border: 1.5px solid var(--brand); border-radius: var(--radius-pill); box-shadow: var(--shadow-card);
    font-family: var(--font-mono); font-size: 0.72rem; color: var(--brand-700);
    transition: transform .7s var(--ease-out), opacity .4s; will-change: transform;
}
.pym-ficha .ico { width: 16px; height: 16px; }
.pym-cinta__vuelta { grid-column: 1 / -1; margin-top: var(--sp-4); padding-top: 1.3rem; border-top: 1px solid var(--line); display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-sm); color: var(--ink); }
.pym-cinta__vuelta b { color: var(--brand-700); }
.pym-cinta__flecha { position: relative; flex: 1; height: 2px; border-radius: 1px; background: var(--brand-copy); }
.pym-cinta__flecha::before { content: ""; position: absolute; left: -1px; top: -5px; border: 6px solid transparent; border-right: 9px solid var(--brand-copy); border-left: 0; }
/* Con JS la cinta arranca apagada y pymes.js la recorre; sin JS se ve encendida entera. */
:root:not(.no-js) .pym-cinta:not(.is-hecha) .pym-estacion:not(.is-on) .pym-estacion__tile { background: var(--paper); border-color: var(--brand-copy); color: var(--brand); }
:root:not(.no-js) .pym-cinta:not(.is-hecha) .pym-estacion:not(.is-on) .pym-estacion__poste { background: var(--brand-copy); }
:root:not(.no-js) .pym-cinta:not(.is-hecha) .pym-estacion:not(.is-on) .pym-estacion__nudo { background: var(--paper); border-color: var(--brand-copy); }
:root:not(.no-js) .pym-estacion.is-on .pym-estacion__tile { transform: translateY(-3px); }
:root:not(.no-js) .pym-cinta:not(.is-hecha) .pym-cinta__sello { opacity: 0; transform: scale(1.6) rotate(-18deg); }
:root:not(.no-js) .pym-cinta.is-hecha .pym-cinta__via i { transform: none; }
:root:not(.no-js) .pym-cinta.is-andando .pym-ficha { display: flex; }
.pym-cinta.is-hecha .pym-ficha { opacity: 0; }
@media (max-width: 1100px) {
    .pym-cinta { grid-template-columns: minmax(0, 1fr); padding: var(--sp-5); }
    .pym-cinta__via, .pym-cinta__etq, :root:not(.no-js) .pym-cinta.is-andando .pym-ficha { display: none; }
    .pym-estaciones { grid-column: 1; grid-row: auto; grid-template-columns: minmax(0, 1fr); gap: 0; }
    .pym-estacion { position: relative; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--sp-4); justify-items: start; text-align: left; padding-bottom: 1.3rem; }
    .pym-estacion::before { content: ""; position: absolute; left: 27px; top: 56px; bottom: 0; width: 2px; background: var(--brand-copy); }
    .pym-estacion__tile { margin-top: 0; grid-row: span 2; }
    .pym-estacion__poste, .pym-estacion__nudo { display: none; }
    .pym-estacion b { margin-top: var(--sp-1); white-space: normal; }
    .pym-extremo { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; column-gap: var(--sp-4); text-align: left; }
    .pym-extremo__caja { margin: 0; width: 150px; }
    .pym-cinta__sello { top: -14px; left: 110px; right: auto; width: 60px; height: 60px; }
    .pym-cinta__flecha { display: none; }
}

/* Qué pasa si…: las situaciones a la izquierda y la pantalla del panel a la derecha */
.pym-casos { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.pym-casos__lista { display: grid; gap: var(--sp-3); }
.pym-caso {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.2rem var(--sp-4); align-items: center; text-align: left;
    padding: 1.15rem 1.3rem; border: 1px solid transparent; border-radius: 16px; background: none; font: inherit; color: inherit; cursor: pointer;
    transition: background var(--t), border-color var(--t), box-shadow var(--t);
}
.pym-caso:hover { background: var(--surface); }
.pym-caso .pym-tile { width: 42px; height: 42px; grid-row: span 2; align-self: start; transition: background var(--t), color var(--t); }
.pym-caso b { font-family: var(--font-display); font-size: 1.18rem; line-height: 1.25; color: var(--ink); }
.pym-caso__txt { grid-column: 2; font-size: var(--fs-sm); color: var(--body); }
/* Con JS solo se abre la elegida; sin JS se leen todas. */
:root:not(.no-js) .pym-caso[aria-selected="false"] .pym-caso__txt { display: none; }
:root:not(.no-js) .pym-caso[aria-selected="true"] { background: var(--paper); border-color: var(--brand); box-shadow: var(--shadow-card); }
:root:not(.no-js) .pym-caso[aria-selected="true"] .pym-tile { background: var(--brand); color: var(--white); }
.pym-pantalla { min-width: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-sheet); overflow: hidden; }
.pym-pantalla__barra { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-4) 1.4rem; border-bottom: 1px solid var(--line); background: var(--surface); font-size: var(--fs-sm); }
.pym-pantalla__barra strong { color: var(--ink); }
.pym-pantalla__barra span { font-size: var(--fs-xs); color: var(--muted); }
.pym-vista { padding: clamp(1.4rem, 3vw, 2.2rem); display: grid; gap: var(--sp-4); }
.pym-vista + .pym-vista { border-top: 1px solid var(--line); }
:root:not(.no-js) .pym-vista.is-oculta { display: none; }
:root:not(.no-js) .pym-vista { border-top: 0; animation: pym-aparece .45s var(--ease-out); }
.pym-vista__fila { display: flex; align-items: center; gap: var(--sp-4); padding: 0.95rem 1.1rem; border: 1px solid var(--line); border-radius: 12px; }
.pym-vista__fila time, .pym-vista__fila code { min-width: 5.5rem; font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink); }
.pym-vista__fila > span:not(.badge) { flex: 1; }
.pym-vista__fila .badge { font-size: 0.8rem; }
.pym-vista__fila--mal { border-color: var(--danger-line); background: var(--danger-tint); }
.pym-vista__fila--mal > span:not(.badge) { color: var(--danger); font-weight: var(--fw-bold); }
.pym-vista__nota { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4) 1.1rem; border-radius: 12px; background: var(--wait-tint); color: var(--ink); line-height: 1.5; }
.pym-vista__nota .ico { width: 22px; height: 22px; flex: none; margin-top: 1px; color: var(--brand); stroke-width: var(--icon-stroke); }
.pym-vista__nota--error { background: var(--paper); border: 1px solid var(--danger-line); color: var(--danger); }
.pym-vista__nota--error .ico { color: var(--danger); }
.pym-anios { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.pym-anios i { height: 12px; border-radius: 6px; background: var(--brand); }
.pym-anios__leyenda { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) { .pym-casos { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
    .pym-vista__fila { flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
    .pym-vista__fila time, .pym-vista__fila code { min-width: 0; }
}

/* Así empiezas: los cuatro pasos del alta, cada uno con su objeto */
.pym-pasos { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); }
.pym-pasos::before { content: ""; position: absolute; top: 21px; left: 22px; right: calc(25% - 22px); height: 2px; background: var(--brand-copy); }
.pym-paso { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--sp-2); }
.pym-paso__n {
    position: relative; z-index: 1; width: 44px; height: 44px; margin-bottom: var(--sp-2); border-radius: 50%; display: grid; place-items: center;
    background: var(--brand); border: 2px solid var(--brand); color: var(--white); font-family: var(--font-mono); font-weight: var(--fw-medium);
    transition: background .4s, color .4s;
}
:root:not(.no-js) .pym-pasos:not(.is-hecha) .pym-paso:not(.is-on) .pym-paso__n { background: var(--paper); color: var(--brand); }
.pym-paso h3 { font-size: var(--fs-h3); }
.pym-paso p { font-size: var(--fs-sm); }
.pym-objeto {
    margin-top: var(--sp-3); min-height: 112px; padding: 0.9rem var(--sp-4); display: grid; gap: 0.45rem; align-content: start; font-size: 0.78rem;
    background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-card);
}
.pym-objeto small { font-size: 0.72rem; color: var(--muted); }
.pym-objeto b { color: var(--ink); font-size: 0.88rem; }
.pym-objeto .badge { justify-self: start; }
.pym-objeto__fila { display: flex; justify-content: space-between; gap: var(--sp-2); padding-bottom: 0.35rem; border-bottom: 1px solid var(--line); }
.pym-objeto__fila:last-child { border-bottom: 0; }
.pym-objeto__fila span:first-child { color: var(--muted); }
.pym-objeto__fila span:last-child, .pym-objeto__fila code { color: var(--ink); font-weight: var(--fw-medium); }
.pym-objeto__rayas { display: grid; gap: 5px; }
.pym-objeto__rayas i { height: 5px; border-radius: 3px; background: var(--wait-tint); }
.pym-objeto__rayas i:nth-child(2) { width: 80%; }
.pym-objeto__rayas i:nth-child(3) { width: 60%; }
.pym-objeto__firma { display: flex; justify-content: space-between; align-items: end; }
.pym-objeto__firma svg { width: 86px; height: 30px; color: var(--brand-700); }
.pym-objeto__clave { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-2) var(--sp-3); border-radius: 8px; background: var(--surface); font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink); }
.pym-objeto__clave .ico { width: 16px; height: 16px; color: var(--brand); }
/* Lo que necesitas: dentro de una sección verde, la caja va en blanco. La persona, a la
   izquierda y mirando al texto. */
.pym-necesitas {
    position: relative; overflow: hidden; margin-top: clamp(2.5rem, 5vw, 4rem); padding: clamp(1.5rem, 3vw, 2.5rem);
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-6); align-items: end;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}
.pym-necesitas img { width: 150px; height: auto; margin-bottom: -2.6rem; }
.pym-necesitas h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-4); }
.pym-necesitas__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-6); }
.pym-necesitas__lista li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-sm); color: var(--ink); }
.pym-necesitas__lista--una { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
.pym-necesitas__pie { margin-top: var(--sp-5); padding-top: 1.3rem; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); align-items: center; font-size: var(--fs-sm); color: var(--ink); }
@media (max-width: 1000px) {
    .pym-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-7); }
    .pym-pasos::before { display: none; }
    .pym-necesitas { grid-template-columns: minmax(0, 1fr); }
    .pym-necesitas img { display: none; }
    .pym-necesitas__lista { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) { .pym-pasos { grid-template-columns: minmax(0, 1fr); } }

/* Planes: los de este público, en tarjetas como las de /precios y el destacado con borde de marca */
.pym-planes { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }

.pym-planes__enlace { margin-top: var(--sp-6); }
.pym-planes__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.pym-plan {
    padding: 1.8rem 1.6rem; display: grid; gap: var(--sp-2); align-content: start;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
    transition: transform var(--t), box-shadow var(--t);
}
.pym-plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-sheet); }
.pym-plan--destacado { border-color: var(--brand); box-shadow: var(--shadow-sheet); }
.pym-plan h3 { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); font-size: 1.15rem; }
.pym-plan h3 .badge { font-size: 0.72rem; }
.pym-plan__precio { margin-top: var(--sp-3); display: flex; align-items: baseline; gap: var(--sp-2); }
.pym-plan__precio b { font-family: var(--font-display); font-size: 3rem; font-weight: var(--fw-heavy); line-height: 1; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pym-plan__precio span { font-size: var(--fs-sm); color: var(--muted); }
.pym-plan__limite { padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); }
.pym-plan__para { margin-top: var(--sp-2); min-height: 3.2em; font-size: var(--fs-sm); color: var(--muted); }
.pym-plan .btn { margin-top: var(--sp-3); justify-self: start; }
.pym-planes__nota { margin-top: var(--sp-4); text-align: right; font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 1000px) { .pym-planes { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .pym-planes__lista { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
    .pym-vista { animation: none; }
}

/* ------------------------------ Banda final ----------------------------
   La llamada de cierre de cada página: una hoja grande con su copia. */
.cta-band {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: calc(var(--radius-card) + 6px);
    box-shadow: var(--shadow-sheet);
    padding: var(--sp-8) var(--sp-6);
    text-align: center;
}
.cta-band h2 { font-size: var(--fs-h2); max-width: 22ch; margin-inline: auto; }
.cta-band p { color: var(--muted); margin: var(--sp-3) auto 0; font-size: var(--fs-lead); max-width: 52ch; }
.cta-band .hero__cta { justify-content: center; }
@media (max-width: 520px) { .cta-band { padding: var(--sp-7) var(--sp-4); } }

/* ---------------- CTA con marquesina vertical (final de la home) ---------------- */
/* Los públicos suben en bucle a la izquierda y se desvanecen arriba y abajo con una
   máscara (sin JS). Dos pistas idénticas: al llegar la primera a -100 % la segunda ocupa
   su sitio y el salto no se ve. Se para al pasar el ratón. */
.cta-marquee {
    display: grid; grid-template-columns: 1fr 1fr; align-items: center;
    gap: var(--sp-7) var(--sp-9);
}
.cta-marquee__texto { order: 2; max-width: 36rem; }
.cta-marquee__texto h2 { font-size: var(--fs-h1); line-height: 1.08; }
.cta-marquee__texto p { color: var(--muted); margin-top: var(--sp-4); font-size: var(--fs-lead); max-width: 46ch; }
.cta-marquee__texto .hero__cta { margin-top: var(--sp-6); }
.cta-marquee__rollo {
    --gap: var(--sp-6);
    order: 1; height: clamp(22rem, 38vw, 34rem); overflow: hidden;
    display: flex; flex-direction: column; gap: var(--gap);
    -webkit-mask-image: linear-gradient(to bottom, transparent, currentColor 38%, currentColor 62%, transparent);
            mask-image: linear-gradient(to bottom, transparent, currentColor 38%, currentColor 62%, transparent);
}
.cta-marquee__pista {
    list-style: none; margin: 0; padding: 0; flex: none;
    display: flex; flex-direction: column; gap: var(--gap);
    animation: cta-marquee-sube 22s linear infinite;
}
.cta-marquee__rollo:hover .cta-marquee__pista { animation-play-state: paused; }
.cta-marquee__pista li {
    font-family: var(--font-display); font-weight: var(--fw-regular); color: var(--ink);
    font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.25rem); line-height: 1.05; letter-spacing: -0.02em;
}
@keyframes cta-marquee-sube {
    from { transform: translateY(0); }
    to   { transform: translateY(calc(-100% - var(--gap))); }
}
@media (max-width: 900px) {
    .cta-marquee { grid-template-columns: 1fr; }
    .cta-marquee__texto { order: 1; }
    .cta-marquee__rollo { order: 2; height: 18rem; }
}
@media (prefers-reduced-motion: reduce) {
    .cta-marquee__pista { animation: none; }
}

/* -------------- CTA con marquesina horizontal (final de Producto) -------------- */
/* Parcial `partials/cta_marquesina`. Texto centrado y, debajo, a todo el ancho, una fila de
   palabras que corre hacia la izquierda y se desvanece por los lados con una máscara (sin JS).
   Entre palabra y palabra, un cuadradito del color de marca, como el del logo. */
.cta-hmarquee { display: flex; flex-direction: column; gap: var(--sp-7); }
.cta-hmarquee__texto { text-align: center; }
.cta-hmarquee__texto h2 { font-size: var(--fs-h1); line-height: 1.08; max-width: 22ch; margin-inline: auto; }
.cta-hmarquee__texto p { color: var(--muted); margin: var(--sp-4) auto 0; font-size: var(--fs-lead); max-width: 52ch; }
.cta-hmarquee__texto .hero__cta { justify-content: center; margin-top: var(--sp-6); }
.cta-hmarquee__rollo {
    display: flex; overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, currentColor 25%, currentColor 75%, transparent);
            mask-image: linear-gradient(to right, transparent, currentColor 25%, currentColor 75%, transparent);
}
.cta-hmarquee__pista {
    list-style: none; margin: 0; padding: 0; flex: none; display: flex; align-items: center;
    animation: cta-hmarquee-corre 40s linear infinite;
}
.cta-hmarquee__rollo:hover .cta-hmarquee__pista { animation-play-state: paused; }
.cta-hmarquee__pista li {
    display: flex; align-items: center; white-space: nowrap;
    font-family: var(--font-display); font-weight: var(--fw-regular); color: var(--ink);
    font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4.25rem); line-height: 1.2; letter-spacing: -0.02em;
}
.cta-hmarquee__pista li::after {
    content: ""; flex: none; width: 0.22em; height: 0.22em; margin-inline: 0.7em;
    border-radius: 3px; background: var(--brand);
}
@media (max-width: 640px) {
    .cta-hmarquee__rollo {
        -webkit-mask-image: linear-gradient(to right, transparent, currentColor 12%, currentColor 88%, transparent);
                mask-image: linear-gradient(to right, transparent, currentColor 12%, currentColor 88%, transparent);
    }
}
@keyframes cta-hmarquee-corre {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
    .cta-hmarquee__pista { animation: none; }
}

/* ------------- CTA en tarjeta con avatares del equipo (final de Recursos) ------------- */
/* Parcial `partials/cta_equipo`, al final de /faq, /guias, /estado y /seguridad. Las caras
   (Open Peeps, CC0) son PNG transparentes: el verde claro del círculo (`--brand-copy`) les hace
   de fondo; el borde blanco las separa al solaparse.
   La fila que lo lleva (`.section--cta-pie`) tiene el fondo del pie y, como es lo último de la
   página, se pega a él sin hueco: la tarjeta blanca queda flotando sobre el verde (23/09/2026). */
.section--cta-pie { background: var(--brand-copy-soft); }
main:has(> .section--cta-pie:last-child) + .site-footer { margin-top: 0; }
.cta-equipo {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: calc(var(--radius-card) + 6px); box-shadow: var(--shadow-card);
    padding: var(--sp-8) var(--sp-6); text-align: center; max-width: 60rem; margin-inline: auto;
}
.cta-equipo h2 { font-size: var(--fs-h2); max-width: 24ch; margin-inline: auto; }
.cta-equipo p { color: var(--muted); margin: var(--sp-3) auto 0; font-size: var(--fs-lead); max-width: 54ch; }
.cta-equipo .hero__cta { justify-content: center; margin-top: var(--sp-6); }
.cta-equipo__gente {
    margin-top: var(--sp-6); display: flex; align-items: center; justify-content: center;
    gap: var(--sp-3); flex-wrap: wrap; color: var(--ink); font-size: var(--fs-sm); font-weight: var(--fw-medium);
}
.cta-equipo__caras { display: flex; }
.cta-equipo__caras img {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--brand-copy); border: 2px solid var(--paper);
    transition: transform var(--t);
}
.cta-equipo__caras img + img { margin-left: -12px; }
.cta-equipo__gente:hover .cta-equipo__caras img { transform: translateY(-3px); }
.cta-equipo__gente:hover .cta-equipo__caras img:nth-child(2) { transition-delay: 40ms; }
.cta-equipo__gente:hover .cta-equipo__caras img:nth-child(3) { transition-delay: 80ms; }
.cta-equipo__gente:hover .cta-equipo__caras img:nth-child(4) { transition-delay: 120ms; }
@media (max-width: 520px) { .cta-equipo { padding: var(--sp-7) var(--sp-4); } }

/* ------------- CTA con frase gigante de fondo (final de Soluciones) ------------- */
/* Parcial `partials/cta_fondo`. La frase de fondo es decorativa (aria-hidden), en
   `--surface`: un tono tan claro no se escribe sobre blanco como texto legible, solo decora. */
.section--cta-fondo { overflow: hidden; }
.cta-fondo { position: relative; padding-block: var(--sp-6); }
.cta-fondo__rollo {
    position: absolute; inset-inline: 0; top: 50%; transform: translateY(-50%);
    display: flex; overflow: hidden; pointer-events: none; user-select: none;
}
.cta-fondo__pista { display: flex; flex: none; animation: cta-hmarquee-corre 60s linear infinite; }
.cta-fondo__pista span {
    display: flex; align-items: center; white-space: nowrap;
    font-family: var(--font-display); font-weight: var(--fw-heavy); color: var(--surface);
    font-size: clamp(6rem, 3rem + 14vw, 17rem); line-height: 1; letter-spacing: -0.02em;
}
.cta-fondo__pista span::after {
    content: ""; flex: none; width: 0.14em; height: 0.14em; margin-inline: 0.35em;
    border-radius: 50%; background: currentColor;
}
.cta-fondo__texto { position: relative; text-align: center; }
.cta-fondo__texto h2 {
    margin: 0 auto; max-width: 22ch; text-wrap: balance;
    font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -0.02em;
}
.cta-fondo__lead { margin: var(--sp-5) auto 0; max-width: 44ch; color: var(--body); font-size: var(--fs-lead); }
.cta-fondo__boton { margin-top: var(--sp-6); }
.cta-fondo__nota { margin-top: var(--sp-5); color: var(--muted); font-size: var(--fs-sm); }
@media (prefers-reduced-motion: reduce) { .cta-fondo__pista { animation: none; } }

/* ---------------- CTA con el JSON de una factura (final de Precios) ---------------- */
/* Texto a la izquierda y, a la derecha, una tarjeta clara con el envío a la API que se
   escribe solo (assets/js/cta-json.js) y la respuesta con el QR. Sin fondos oscuros: el
   código va sobre papel, con las claves en el color de marca. Sin JS se ve completa. */
.cta-json {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center; gap: var(--sp-7) var(--sp-8);
}
.cta-json__texto h2 { font-size: var(--fs-h1); line-height: 1.08; max-width: 18ch; }
.cta-json__texto p { color: var(--muted); font-size: var(--fs-lead); margin-top: var(--sp-2); max-width: 44ch; }
.cta-json__texto h2 + p { margin-top: var(--sp-4); }
.cta-json__texto .hero__cta { margin-top: var(--sp-6); }
.cta-json__tarjeta {
    margin: 0; background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius-card); box-shadow: var(--shadow-sheet); overflow: hidden;
}
.cta-json__barra {
    display: flex; gap: 6px; padding: var(--sp-3) var(--sp-4);
    background: var(--surface); border-bottom: 1px solid var(--line);
}
.cta-json__barra i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.cta-json__codigo {
    margin: 0; padding: var(--sp-5); overflow-x: auto;
    font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.75; color: var(--ink);
    background: none; border: 0;
}
.cta-json__codigo code { display: block; font-size: inherit; white-space: pre; background: none; padding: 0; }
.is-animada .cta-json__codigo code::after {
    content: ""; display: inline-block; width: 0.55em; height: 1.1em; margin-left: 1px;
    vertical-align: -0.2em; background: var(--brand); animation: cta-json-cursor 1s steps(1) infinite;
}
@keyframes cta-json-cursor { 50% { opacity: 0; } }
.cta-json__c { color: var(--muted); }
.cta-json__k { color: var(--brand); }
.cta-json__v { color: var(--ink); }
.cta-json__respuesta {
    display: flex; align-items: center; gap: var(--sp-4);
    margin: 0 var(--sp-5) var(--sp-5); padding: var(--sp-4);
    border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
    transition: opacity 400ms var(--ease-out), transform 400ms var(--ease-out);
}
.is-animada .cta-json__respuesta { opacity: 0; transform: translateY(8px); }
.is-animada .cta-json__respuesta.is-visible { opacity: 1; transform: none; }
.cta-json__qr { width: 64px; height: 64px; flex: none; color: var(--ink); background: var(--paper); padding: 4px; border-radius: 6px; }
.cta-json__respuesta p { margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--body); }
.cta-json__csv { display: inline-block; margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--brand); background: none; padding: 0; }
@media (max-width: 900px) {
    .cta-json { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .cta-json__codigo { font-size: 0.75rem; padding: var(--sp-4); }
    .cta-json__respuesta { margin: 0 var(--sp-4) var(--sp-4); }
}


/* ------------------------------- FAQ -----------------------------------
   Como en rehojo.com: una lista de líneas finas, sin tarjetas, la pregunta en la
   tipografía de titulares y un «+» en un círculo verde claro que gira a «×» y se
   rellena de marca al abrir. Una pregunta abierta cada vez (app.js). */
.faq { max-width: 50rem; margin-inline: auto; }
.faq__col { border-top: 1px solid var(--line-strong); }
.faq__item { border-bottom: 1px solid var(--line-strong); }
.faq__item h3 { font: inherit; letter-spacing: normal; }
.faq__q {
    width: 100%; min-height: 56px; text-align: left; background: none; border: 0; cursor: pointer;
    padding: var(--sp-4) 0; display: flex; justify-content: space-between; gap: var(--sp-4); align-items: center;
    font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--ink); font-size: 1.0625rem; line-height: 1.35;
    transition: color var(--t-fast);
}
.faq__q:hover, .faq__item.open .faq__q { color: var(--brand-700); }
.faq__mark {
    flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
    background: var(--brand-copy); color: var(--brand-700);
    transition: transform var(--t), background-color var(--t), color var(--t);
}
.faq__mark .ico { width: 16px; height: 16px; stroke-width: 2.2; }
.faq__item.open .faq__mark { transform: rotate(45deg); background: var(--brand); color: var(--white); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height var(--t); }
.faq__a-inner { padding: 0 var(--sp-8) var(--sp-5) 0; color: var(--body); max-width: 62ch; }
.no-js .faq__a { max-height: none; }
/* A dos columnas (portada) ocupa todo el contenedor. Apiladas, solo cierra la última
   columna, para que no salgan dos líneas seguidas en mitad de la lista. */
.faq--dos { max-width: none; display: grid; gap: 0 var(--sp-8); align-items: start; }
@media (min-width: 1000px) { .faq--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 999px) { .faq--dos .faq__col + .faq__col { border-top: 0; } }
@media (max-width: 560px) { .faq__a-inner { padding-right: 0; } }
.faq-pie { margin-top: var(--sp-6); }

/* ------------- /faq: mesa de ayuda sin hero (22/09/2026) -------------
   Raíl a la izquierda (título, temas y contacto), fijo al bajar; respuestas a la derecha.
   En móvil los temas pasan a una fila de pastillas pegada bajo la cabecera. Cada pregunta
   es un <details> con su respuesta corta a la vista. Movimiento en assets/js/faq.js. */
.ayuda { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); padding-block: var(--sp-6) var(--sp-8); }
@media (min-width: 1000px) {
    .ayuda { grid-template-columns: 300px minmax(0, 1fr); gap: clamp(3rem, 5vw, 5.5rem); padding-top: var(--sp-7); }
}
/* Fijo solo si cabe entero: en pantallas bajas se quedaría cortado. */
@media (min-width: 1000px) and (min-height: 820px) {
    .ayuda__rail { position: sticky; top: calc(88px + var(--sp-5)); align-self: start; }
}
.ayuda__rail { display: flex; flex-direction: column; gap: var(--sp-5); }
.ayuda__rail h1 { font-size: var(--fs-h1); line-height: 1.05; }
.ayuda__sub { margin-top: var(--sp-3); color: var(--muted); font-size: var(--fs-sm); }

.ayuda__baldosa {
    flex: none; width: 40px; height: 40px; border-radius: var(--radius); display: grid; place-items: center;
    background: var(--brand-copy); color: var(--brand);
}
.ayuda__baldosa .ico { width: 20px; height: 20px; stroke-width: var(--icon-stroke); }

.ayuda__temas :is(ul, ol) { display: flex; flex-direction: column; gap: 2px; }
.ayuda__temas a {
    display: flex; align-items: center; gap: var(--sp-3); padding: 0.4rem 0.6rem; border-radius: 12px;
    color: var(--ink); font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: none;
    transition: background var(--t), color var(--t);
}
.ayuda__temas a:hover { background: var(--surface); }
.ayuda__temas a[aria-current="true"] { background: var(--surface); color: var(--brand-700); font-weight: var(--fw-bold); }
.ayuda__temas .ayuda__baldosa { width: 32px; height: 32px; }
.ayuda__temas .ayuda__baldosa .ico { width: 18px; height: 18px; }
.ayuda__n { margin-left: auto; font: var(--fw-medium) var(--fs-xs) var(--font-mono); color: var(--muted); }

.ayuda__persona {
    display: grid; grid-template-columns: auto 1fr; align-items: center; justify-items: start; gap: var(--sp-1) var(--sp-3);
    padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper);
}
.ayuda__persona strong { color: var(--ink); font-size: var(--fs-sm); }
.ayuda__persona > span:not(.ayuda__caras) { grid-column: 1 / -1; color: var(--muted); font-size: var(--fs-xs); }
.ayuda__persona .btn { grid-column: 1 / -1; margin-top: var(--sp-2); gap: var(--sp-2); }
.ayuda__persona .btn .ico { width: 18px; height: 18px; stroke-width: var(--icon-stroke); }
.ayuda__caras { display: flex; }
.ayuda__caras img { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-copy); border: 2px solid var(--paper); }
.ayuda__caras img + img { margin-left: -10px; }

@media (max-width: 999px) {
    /* El raíl se deshace para que la fila de temas pueda quedarse pegada durante toda la página
       (un sticky no sale de su contenedor). */
    .ayuda { gap: var(--sp-5); }
    .ayuda__rail { display: contents; }
    .ayuda__temas {
        position: sticky; top: 68px; z-index: 5; background: var(--paper);
        margin-inline: calc(var(--gutter) * -1); padding: var(--sp-3) var(--gutter);
        border-bottom: 1px solid var(--line);
    }
    .ayuda__temas :is(ul, ol) { flex-direction: row; gap: var(--sp-2); overflow-x: auto; scrollbar-width: none; }
    .ayuda__temas a { white-space: nowrap; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 0.35rem 0.85rem 0.35rem 0.4rem; }
    .ayuda__temas .ayuda__baldosa { width: 26px; height: 26px; border-radius: 50%; }
    .ayuda__temas .ayuda__baldosa .ico { width: 15px; height: 15px; }
    .ayuda__n { display: none; }
    /* En móvil el contacto ya está en el CTA final y en el botón flotante. */
    .ayuda__persona { display: none; }
}

/* Lo que más nos preguntan: la respuesta, en grande */
.rapidas h2 { font-size: var(--fs-h3); margin-bottom: var(--sp-4); }
.rapidas ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
@media (min-width: 560px) { .rapidas ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .rapidas ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rapida {
    display: flex; flex-direction: column; gap: var(--sp-1); height: 100%; padding: 1.2rem 1.25rem;
    border-radius: var(--radius-card); background: var(--surface); color: var(--body); text-decoration: none;
    transition: transform var(--t), box-shadow var(--t), background var(--t);
}
.rapida:hover { transform: translateY(-2px); background: var(--paper); box-shadow: var(--shadow-hover); color: var(--body); }
.rapida__p { color: var(--ink); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.rapida__r { font: var(--fw-heavy) 1.9rem/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
.rapida__r--larga { font-size: 1.25rem; padding-top: 0.45rem; }
.rapida__nota { margin-top: auto; padding-top: var(--sp-2); color: var(--muted); font-size: var(--fs-xs); }

/* Bloques de preguntas */
.ayuda__bloque { margin-top: var(--sp-8); scroll-margin-top: calc(88px + var(--sp-5)); }
.ayuda__cab { display: flex; align-items: center; gap: var(--sp-3); }
.ayuda__cab h2 { font-size: var(--fs-h2); }
.ayuda__texto { margin: var(--sp-2) 0 var(--sp-5); color: var(--muted); max-width: 62ch; }
.ayuda__lista { display: flex; flex-direction: column; gap: 0.6rem; }

.pregunta {
    border: 1px solid var(--line); border-radius: 16px; background: var(--paper);
    transition: box-shadow var(--t), border-color var(--t);
    scroll-margin-top: calc(88px + var(--sp-5));
}
.pregunta:hover { border-color: var(--line-strong); }
.pregunta[open] { border-color: transparent; box-shadow: var(--shadow-card); }
.pregunta summary {
    display: flex; align-items: center; gap: var(--sp-4); min-height: 60px; padding: 1rem 1.2rem;
    list-style: none; cursor: pointer; color: var(--ink); font-weight: var(--fw-bold); font-size: 1.0625rem; line-height: 1.35;
    border-radius: 16px;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary:hover { color: var(--brand-700); }
.pregunta__t { flex: 1; }
.pregunta__corta {
    flex: none; padding: 0.2rem 0.65rem; border-radius: var(--radius-pill);
    background: var(--wait-tint); color: var(--ink); font-size: var(--fs-xs); font-weight: var(--fw-bold); white-space: nowrap;
}
.pregunta__corta--pendiente { background: var(--paper); color: var(--brand-700); box-shadow: inset 0 0 0 1.5px var(--brand); }
.pregunta__mas {
    flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    background: var(--surface); color: var(--brand);
    transition: transform var(--t), background var(--t), color var(--t);
}
.pregunta__mas .ico { width: 16px; height: 16px; stroke-width: 2.2; }
.pregunta[open] .pregunta__mas { transform: rotate(45deg); background: var(--brand); color: var(--white); }
.pregunta__r { padding: 0 1.2rem 1.15rem; max-width: 72ch; }
.pregunta__r p + p { margin-top: var(--sp-3); }
.pregunta__lead { color: var(--ink); font-weight: var(--fw-bold); }
.pregunta__pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-5); margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.pregunta__pie:not(:has(> :not([hidden]))) { display: none; }
.pregunta__pie a, .pregunta__copiar {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0;
    border: 0; background: none; cursor: pointer; text-decoration: none;
    font: var(--fw-bold) var(--fs-xs) var(--font-sans); color: var(--brand-700);
}
.pregunta__pie a:hover, .pregunta__copiar:hover { text-decoration: underline; }
.pregunta__pie .ico { width: 16px; height: 16px; stroke-width: var(--icon-stroke); }
@media (max-width: 560px) {
    .pregunta summary { flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
    .pregunta__t { flex-basis: calc(100% - 42px); }
    .pregunta__mas { order: 2; }
    .pregunta__corta { order: 3; }
}

/* Glosario: sobre el verde casi blanco, cada término en blanco */
.glosario {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--sp-4);
    padding: clamp(1.25rem, 3vw, 2.25rem); border-radius: var(--radius-card); background: var(--surface);
}
.glosario div { padding: var(--sp-4) 1.1rem; border-radius: 14px; background: var(--paper); }
.glosario dt { margin-bottom: var(--sp-1); font: var(--fw-medium) var(--fs-xs) var(--font-mono); color: var(--brand-700); }
.glosario dd { font-size: var(--fs-sm); }

.ayuda__aviso { margin-top: var(--sp-7); max-width: 70ch; color: var(--muted); font-size: var(--fs-xs); }

/* ------------- /guias: guía de integración en siete pasos (23/09/2026) -------------
   Reutiliza la mesa de /faq (.ayuda, raíl y fila de pastillas en móvil); cada paso lleva
   su pieza visual. Todo con prefijo guia- porque app.css ya usa .paso, .puntos, .linea…
   Movimiento y lista guardada en assets/js/guias.js. */
.guia-num { font: var(--fw-medium) var(--fs-xs) var(--font-mono); color: var(--brand-700); border-radius: 50%; }
.ayuda__temas .guia-num { width: 28px; height: 28px; }
.ayuda__temas a[aria-current="true"] .guia-num { background: var(--brand); color: var(--white); }
@media (max-width: 999px) { .ayuda__temas .guia-num { width: 24px; height: 24px; } }

.guia-pasale {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2);
    padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper);
}
.guia-pasale strong { color: var(--ink); font-size: var(--fs-sm); }
.guia-pasale > span { color: var(--muted); font-size: var(--fs-xs); }
.guia-pasale .btn { margin-top: var(--sp-1); gap: var(--sp-2); }
.guia-pasale .ico { width: 18px; height: 18px; stroke-width: var(--icon-stroke); }
@media (max-width: 999px) { .guia-pasale { order: 5; } }

/* Antes de empezar: tres objetos dibujados, como las piezas de cada paso */
.guia-antes h2 { font-size: var(--fs-h3); }
.guia-antes__sub { margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-sm); }
.guia-kit { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); margin-top: var(--sp-5); }
@media (min-width: 720px) { .guia-kit { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.guia-kit li { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-xs); }
.guia-kit b { margin-top: var(--sp-3); color: var(--ink); font-size: var(--fs-sm); }
.guia-obj { position: relative; display: grid; place-items: center; height: 132px; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface); }
.guia-obj__win {
    width: 78%; padding: 0.55rem 0.7rem 0.7rem; border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-card);
    font: var(--fw-regular) 0.66rem/1.8 var(--font-mono); color: var(--body);
}
.guia-obj__win div { margin-bottom: var(--sp-1); }
.guia-obj__win i { display: inline-block; width: 6px; height: 6px; margin-right: 3px; border-radius: 50%; background: var(--line); }
.guia-obj__win b { font-weight: var(--fw-medium); color: var(--brand-700); }
.guia-obj__win span { padding: 0 0.45em; border-radius: var(--radius-pill); background: var(--ok-tint); color: var(--ok); }
.guia-obj__nif { position: relative; width: 68%; height: 74px; }
.guia-obj__nif > span {
    position: absolute; inset: 0; display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem;
    border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-card);
}
.guia-obj__nif > span:nth-child(1) { transform: translate(14px, -12px) rotate(4deg); opacity: 0.6; }
.guia-obj__nif > span:nth-child(2) { transform: translate(7px, -6px) rotate(2deg); opacity: 0.8; }
.guia-obj__nif u { flex: none; width: 30px; height: 36px; border-radius: 6px; background: var(--brand-copy); }
.guia-obj__nif em {
    display: flex; flex-direction: column; font: var(--fw-medium) 0.62rem var(--font-sans); font-style: normal;
    color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em;
}
.guia-obj__nif strong { margin-top: 0.15rem; font: var(--fw-medium) 0.78rem var(--font-mono); color: var(--ink); text-transform: none; letter-spacing: 0; }
.guia-obj__papel {
    display: flex; flex-direction: column; gap: 5px; width: 58%; height: 104px; margin-top: 28px; padding: 0.7rem 0.8rem;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--paper); box-shadow: var(--shadow-card);
}
.guia-obj__papel strong { font: var(--fw-medium) 0.62rem var(--font-mono); color: var(--brand-700); text-transform: uppercase; }
.guia-obj__papel i { display: block; height: 4px; border-radius: 2px; background: var(--line); }
.guia-obj__papel i:nth-of-type(2) { width: 80%; }
.guia-obj__papel i:nth-of-type(3) { width: 60%; }
.guia-obj__papel svg { width: 64px; height: 26px; margin-top: 4px; fill: none; stroke: var(--brand); stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }

/* Pasos */
.guia-paso { margin-top: var(--sp-8); scroll-margin-top: calc(88px + var(--sp-5)); }
@media (max-width: 999px) { .guia-paso { scroll-margin-top: calc(68px + 64px); } }
.guia-paso__cab { display: flex; align-items: center; gap: var(--sp-3); }
.guia-paso__cab h2 { font-size: var(--fs-h2); }
.guia-paso__n {
    flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    background: var(--brand); color: var(--white); font: var(--fw-medium) 0.95rem var(--font-mono);
}
.guia-paso__texto { margin: var(--sp-2) 0 var(--sp-5); color: var(--muted); max-width: 64ch; }
.guia-dos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5) 2.5rem; align-items: start; }
@media (min-width: 1100px) { .guia-dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.guia-puntos { display: flex; flex-direction: column; gap: 0.9rem; }
.guia-puntos li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.guia-puntos__m { flex: none; width: 26px; height: 26px; margin-top: 0.1rem; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--brand-copy); color: var(--brand); }
.guia-puntos__m .ico { width: 16px; height: 16px; stroke-width: var(--icon-stroke); }
.guia-puntos b { display: block; color: var(--ink); }
.guia-puntos li div > span { font-size: var(--fs-sm); }
.guia-paso code, .guia-check code { padding: 0.05em 0.35em; border-radius: 5px; background: var(--surface); color: var(--ink); font: var(--fw-medium) 0.85em var(--font-mono); }

/* 1. La línea del alta */
.guia-linea { display: grid; grid-template-columns: minmax(0, 1fr); }
.guia-linea li { position: relative; padding: 0 0 1.3rem 3.2rem; }
.guia-linea li::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: var(--line); }
.guia-linea li:last-child::before { display: none; }
.guia-linea__hito {
    position: absolute; left: 0; top: 0; z-index: 1; width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center; background: var(--paper); border: 2px solid var(--brand); color: var(--brand);
}
.guia-linea li:last-child .guia-linea__hito { background: var(--brand); color: var(--white); }
.guia-linea__hito .ico { width: 18px; height: 18px; stroke-width: var(--icon-stroke); }
.guia-linea b { display: block; color: var(--ink); font-size: var(--fs-sm); }
.guia-linea li > span:not(.guia-linea__hito) { display: block; margin-top: 0.2rem; color: var(--muted); font-size: var(--fs-xs); }
@media (min-width: 760px) {
    .guia-linea { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .guia-linea li { padding: 0 1.1rem 0 0; }
    .guia-linea li::before { left: 18px; right: 0; top: 17px; bottom: auto; width: auto; height: 2px; }
    .guia-linea__hito { position: relative; margin-bottom: 0.8rem; }
}

/* 2. La pantalla del panel (dibujo) */
.guia-pantalla { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); box-shadow: var(--shadow-sheet); font-size: var(--fs-sm); }
.guia-pantalla__barra { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--line); color: var(--muted); }
.guia-pantalla__barra i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.guia-pantalla__barra span { margin-left: 0.6rem; font: var(--fw-regular) 0.7rem var(--font-mono); }
.guia-pantalla__cuerpo { display: grid; grid-template-columns: 150px minmax(0, 1fr); }
.guia-pantalla__menu { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.8rem 0.6rem; border-right: 1px solid var(--line); font-size: var(--fs-xs); }
.guia-pantalla__menu span { padding: 0.4rem 0.6rem; border-radius: var(--radius-sm); }
.guia-pantalla__menu .guia-pantalla__sel { background: var(--surface); color: var(--brand-700); font-weight: var(--fw-bold); }
.guia-pantalla__main { display: flex; flex-direction: column; gap: var(--sp-4); padding: 1.2rem; }
.guia-pantalla__aviso { padding: 0.6rem 0.8rem; border-radius: var(--radius); background: var(--warn-tint); color: var(--warn); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.guia-pantalla__campo { display: flex; flex-direction: column; gap: 0.35rem; }
.guia-pantalla__campo > span { color: var(--ink); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.guia-pantalla__campo div { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.75rem; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--ink); font: var(--fw-medium) 0.8rem var(--font-mono); }
.guia-pantalla__campo em { margin-left: auto; color: var(--muted); font: var(--fw-regular) var(--fs-xs) var(--font-sans); font-style: normal; }
.guia-pantalla__doc { padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-radius: 12px; color: var(--body); font: var(--fw-regular) 0.74rem/1.7 var(--font-mono); overflow-wrap: anywhere; }
.guia-pantalla__doc b { color: var(--brand-700); font-weight: var(--fw-medium); }
.guia-pantalla__doc mark { padding: 0 0.2em; border-radius: 4px; background: var(--brand-copy); color: var(--brand-700); }
@media (max-width: 520px) { .guia-pantalla__cuerpo { grid-template-columns: minmax(0, 1fr); } .guia-pantalla__menu { display: none; } }

/* 3. Petición y respuesta */
.guia-codigo { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); box-shadow: var(--shadow-card); }
.guia-codigo__tabs { display: flex; align-items: center; gap: 0.3rem; padding: var(--sp-2); border-bottom: 1px solid var(--line); background: var(--surface); }
.guia-codigo__tabs button { padding: 0.45rem 0.8rem; border: 0; border-radius: var(--radius-pill); background: none; color: var(--muted); font: var(--fw-bold) var(--fs-xs) var(--font-sans); cursor: pointer; }
.guia-codigo__tabs button[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-card); }
.guia-codigo__tabs[hidden], .guia-codigo [role="tabpanel"][hidden], .guia-pasale .btn[hidden] { display: none; }
.guia-codigo__ej { margin-left: auto; padding-right: 0.4rem; color: var(--muted); font-size: 0.72rem; }
.guia-codigo pre { margin: 0; padding: 1.1rem 1.2rem; overflow-x: auto; color: var(--ink); font: var(--fw-regular) 0.8rem/1.75 var(--font-mono); }
.guia-codigo [role="tabpanel"] + [role="tabpanel"] { border-top: 1px solid var(--line); }
.guia-codigo .k { color: var(--brand-700); }
.guia-codigo__ruta { display: block; margin-bottom: 0.4rem; color: var(--muted); }
.guia-codigo__ok { padding: 0 0.5em; border-radius: var(--radius-pill); background: var(--ok-tint); color: var(--ok); font-weight: var(--fw-medium); }
.guia-codigo__aviso { margin-top: 0.8rem; color: var(--muted); font-size: var(--fs-xs); }
.guia-guarda { margin-top: 1.4rem; }
.guia-guarda h3 { margin-bottom: 0.7rem; font-size: 1.05rem; }
.guia-guarda dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 0.6rem; margin: 0; }
.guia-guarda div { padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.guia-guarda dt { color: var(--brand-700); font: var(--fw-medium) 0.78rem var(--font-mono); }
.guia-guarda dd { margin: 0.25rem 0 0; font-size: var(--fs-xs); }

/* 4. La factura anotada */
.guia-factura { max-width: 440px; padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); box-shadow: var(--shadow-sheet); font-size: var(--fs-xs); }
.guia-factura__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--sp-4); }
.guia-factura__no { color: var(--brand); font: var(--fw-medium) 0.95rem var(--font-mono); }
.guia-factura__lin { display: flex; justify-content: space-between; padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
.guia-factura__tot { display: flex; justify-content: space-between; padding-top: 0.7rem; color: var(--ink); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.guia-factura__pie { display: flex; align-items: center; gap: var(--sp-4); margin-top: 1.3rem; padding: 0.9rem; border-radius: 12px; box-shadow: inset 0 0 0 2px var(--brand); }
.guia-factura__pie b { display: flex; align-items: center; color: var(--ink); font: var(--fw-medium) 0.8rem var(--font-mono); letter-spacing: 0.02em; }
.guia-factura__pie > div > span { display: block; margin-top: 0.15rem; color: var(--muted); }
.guia-factura__pie .guia-factura__csv { display: flex; align-items: center; margin-top: 0.4rem; color: var(--ink); }
.guia-pin {
    flex: none; width: 22px; height: 22px; margin-right: 0.4rem; border-radius: 50%; display: inline-grid; place-items: center;
    background: var(--brand); color: var(--white); font: var(--fw-medium) 0.66rem var(--font-mono); box-shadow: 0 0 0 3px var(--paper);
}
.guia-qr { flex: none; width: 74px; height: 74px; display: grid; grid-template-columns: repeat(9, 1fr); gap: 1px; }
.guia-qr i { border-radius: 1px; background: var(--ink); }
.guia-qr .guia-qr__b { background: transparent; }
.guia-notas { display: flex; flex-direction: column; gap: var(--sp-4); }
.guia-nota { display: flex; gap: 0.8rem; align-items: flex-start; }
.guia-nota__n { flex: none; width: 24px; height: 24px; margin-top: 0.1rem; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--white); font: var(--fw-medium) 0.72rem var(--font-mono); }
.guia-nota__n .ico { width: 14px; height: 14px; stroke-width: 2.2; }
.guia-nota b { display: block; color: var(--ink); font-size: var(--fs-sm); }
.guia-nota div > span { font-size: var(--fs-sm); }

/* 5. Corregir sin borrar */
.guia-ops { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
@media (min-width: 760px) { .guia-ops { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.guia-op { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.3rem; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); }
.guia-op__cab { display: flex; align-items: center; gap: 0.7rem; }
.guia-op__b { width: 36px; height: 36px; border-radius: var(--radius); display: grid; place-items: center; background: var(--brand-copy); color: var(--brand); }
.guia-op__b .ico { width: 20px; height: 20px; stroke-width: var(--icon-stroke); }
.guia-op h3 { font-size: 1.1rem; }
.guia-op p { font-size: var(--fs-sm); }
.guia-op code { font-size: 0.75em; }
.guia-op .guia-op__cuando { margin-top: auto; padding-top: 0.6rem; border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-xs); }

/* 6. Cuando algo sale mal */
.guia-situ { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-card); }
.guia-situ__f { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; padding: var(--sp-4) 1.2rem; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.guia-situ__f:first-child { border-top: 0; }
.guia-situ__cab { padding-block: 0.7rem; background: var(--surface); color: var(--ink); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.guia-situ__f b { color: var(--ink); }
.guia-situ__tu { color: var(--muted); }
.guia-est { display: table; margin-bottom: 0.35rem; padding: 0.15rem 0.6rem; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.guia-est--err { background: var(--danger-tint); color: var(--danger); }
.guia-est--ok { background: var(--ok-tint); color: var(--ok); }
.guia-est--cola { background: var(--wait-tint); color: var(--wait); }
@media (max-width: 760px) {
    .guia-situ__f { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
    .guia-situ__cab { display: none; }
    .guia-situ__f > div::before { content: attr(data-l); display: block; color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
}

/* 7. Lista antes del primer envío real (se guarda en el navegador) */
.guia-check { padding: clamp(1.2rem, 3vw, 2rem); border-radius: var(--radius-card); background: var(--surface); }
.guia-check__cab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.guia-check__barra { flex: 1; min-width: 160px; height: 8px; overflow: hidden; border-radius: var(--radius-pill); background: var(--wait-tint); }
.guia-check__barra i { display: block; width: 0; height: 100%; border-radius: var(--radius-pill); background: var(--brand); transition: width var(--t); }
.guia-check__n { color: var(--ink); font: var(--fw-medium) var(--fs-xs) var(--font-mono); }
.guia-check ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.guia-check label { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.9rem 1rem; border: 1px solid transparent; border-radius: var(--radius-lg); background: var(--paper); cursor: pointer; transition: border-color var(--t); }
.guia-check label:hover { border-color: var(--line-strong); }
.guia-check input {
    appearance: none; flex: none; width: 22px; height: 22px; margin: 0.1rem 0 0; display: grid; place-items: center;
    border: 1.5px solid var(--line-strong); border-radius: 7px; background: var(--paper); cursor: pointer;
}
.guia-check input:checked { border-color: var(--brand); background: var(--brand); }
.guia-check input:checked::after { content: ""; width: 10px; height: 6px; border: 2px solid var(--white); border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); }
.guia-check input:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.guia-check b { display: block; color: var(--ink); font-size: var(--fs-sm); }
.guia-check label span { color: var(--muted); font-size: var(--fs-xs); }
.guia-check input:checked ~ div b { text-decoration: line-through; text-decoration-color: var(--line-strong); }
.guia-check__fin { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-top: var(--sp-4); font-size: var(--fs-sm); }

/* ------------- /estado: sin semáforo (23/09/2026) -------------
   No hay monitorización real, así que no se pinta ningún «Operativo». Mismo esqueleto que
   /faq y /guias; el protagonista es el selector «Si algo falla», que rompe en rojo liso (nunca
   discontinuo) la pieza del recorrido que falla. Prefijo estado- en todo. Comportamiento en
   assets/js/estado.js. */
.estado-bloque { scroll-margin-top: calc(88px + var(--sp-5)); }
.estado-bloque + .estado-bloque { margin-top: var(--sp-8); }
@media (max-width: 999px) { .estado-bloque { scroll-margin-top: calc(68px + 64px); } }

.estado-buzon {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2);
    padding: var(--sp-5) 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper);
}
.estado-buzon strong { color: var(--ink); font-size: var(--fs-sm); }
.estado-buzon > span { color: var(--muted); font-size: var(--fs-xs); }
.estado-buzon__mail {
    display: flex; align-items: center; gap: var(--sp-2); width: 100%; margin-top: var(--sp-1);
    padding: 0.3rem 0.3rem 0.3rem 0.75rem; border-radius: var(--radius-pill); background: var(--surface);
}
.estado-buzon__mail span { flex: 1; min-width: 0; color: var(--ink); font: var(--fw-medium) 0.7rem var(--font-mono); overflow-wrap: anywhere; user-select: all; }
.estado-buzon__mail button {
    flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; display: grid; place-items: center;
    background: var(--paper); color: var(--brand-700); box-shadow: var(--shadow-card); cursor: pointer;
}
.estado-buzon__mail button[hidden] { display: none; }
.estado-buzon__mail .ico { width: 16px; height: 16px; stroke-width: var(--icon-stroke); }
@media (max-width: 999px) { .estado-buzon { order: 5; } }

/* Si algo falla: casos a la izquierda, recorrido a la derecha, resultado debajo */
.estado-sim { padding: clamp(1.1rem, 2.5vw, 1.8rem); border-radius: var(--radius-card); background: var(--surface); }
.estado-sim__mesa { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
@media (min-width: 1100px) { .estado-sim__mesa { grid-template-columns: 290px minmax(0, 1fr); align-items: start; } }
.estado-sim__lead { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 0.7rem; color: var(--ink); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.estado-sim__lead .ico { width: 18px; height: 18px; color: var(--brand); stroke-width: var(--icon-stroke); }
.estado-sim__lead span { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-regular); }
.estado-sim__casos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; }
@media (min-width: 600px) and (max-width: 1099px) { .estado-sim__casos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.estado-caso {
    display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.7rem 0.85rem; text-align: left;
    border: 1.5px solid var(--line); border-radius: var(--radius-lg); background: var(--paper);
    color: var(--ink); font: var(--fw-bold) var(--fs-sm) var(--font-sans); cursor: pointer;
    transition: border-color var(--t), background var(--t), transform var(--t), box-shadow var(--t);
}
.estado-caso:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: var(--shadow-card); }
.estado-caso__punto { flex: none; width: 20px; height: 20px; border: 2px solid var(--line-strong); border-radius: 50%; display: grid; place-items: center; transition: border-color var(--t); }
.estado-caso__punto::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); transform: scale(0); transition: transform var(--t); }
.estado-caso .ico { width: 18px; height: 18px; color: var(--muted); stroke-width: var(--icon-stroke); }
.estado-caso__txt { flex: 1; }
.estado-caso[aria-checked="true"] { border-color: var(--brand); background: var(--brand-copy-soft); }
.estado-caso[aria-checked="true"] .estado-caso__punto { border-color: var(--brand); }
.estado-caso[aria-checked="true"] .estado-caso__punto::after { transform: scale(1); }
.estado-caso[aria-checked="true"] .ico { color: var(--brand); }

.estado-visor__cab { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.7rem; }
.estado-visor__cab[hidden] { display: none; }
.estado-visor__t { color: var(--ink); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.estado-visor__t span { color: var(--danger); }
.estado-visor__pasa { flex: none; display: flex; align-items: center; gap: 0.3rem; white-space: nowrap; color: var(--muted); font: var(--fw-medium) var(--fs-xs) var(--font-mono); }
.estado-visor__pasa button {
    width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center;
    background: var(--paper); color: var(--ink); cursor: pointer;
}
.estado-visor__pasa button:hover { border-color: var(--brand); color: var(--brand); }
.estado-visor__pasa .ico { width: 16px; height: 16px; stroke-width: var(--icon-stroke); }

.estado-ruta { position: relative; padding: 1.6rem 1rem 1.2rem; border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow-card); }
.estado-ruta__fila { display: grid; grid-template-columns: auto minmax(24px, 1fr) auto minmax(24px, 1fr) auto; align-items: center; }
.estado-nodo { display: flex; flex-direction: column; align-items: center; gap: 0.45rem; min-width: 0; text-align: center; }
.estado-nodo__caja {
    width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center;
    background: var(--brand-copy); color: var(--brand); transition: background var(--t), color var(--t), box-shadow var(--t);
}
.estado-nodo__caja .ico { width: 28px; height: 28px; stroke-width: var(--icon-stroke); }
.estado-nodo--nuestro .estado-nodo__caja { background: var(--brand); color: var(--white); }
.estado-nodo b { color: var(--ink); font-size: var(--fs-xs); line-height: 1.25; }
.estado-nodo small { display: block; color: var(--muted); font-size: 0.72rem; font-weight: var(--fw-regular); }
.estado-tramo { position: relative; height: 4px; margin: 0 0.6rem 2.4rem; overflow: hidden; border-radius: 4px; background: var(--brand-copy); transition: background var(--t); }
.estado-tramo i { position: absolute; top: 0; left: -30%; width: 30%; height: 100%; border-radius: 4px; background: var(--brand); animation: estado-viaja 1.8s var(--ease-out) infinite; }
@keyframes estado-viaja { to { left: 100%; } }
.estado-ruta__panel { display: flex; flex-direction: column; align-items: center; margin-top: 0.4rem; }
.estado-ruta__rama { width: 4px; height: 26px; border-radius: 4px; background: var(--brand-copy); transition: background var(--t); }
.estado-ruta__panel .estado-nodo { flex-direction: row; gap: 0.6rem; text-align: left; }
.estado-ruta__panel .estado-nodo__caja { width: 44px; height: 44px; border-radius: var(--radius-lg); }
.estado-ruta__panel .estado-nodo__caja .ico { width: 22px; height: 22px; }
/* Piezas rotas: rojo liso, nunca líneas discontinuas (ESTILO_REDISENO.md) */
.estado-nodo.es-roto .estado-nodo__caja { background: var(--danger-tint); color: var(--danger); box-shadow: 0 0 0 2px var(--danger-line); }
.estado-tramo.es-roto, .estado-ruta__rama.es-roto { background: var(--danger-line); }
.estado-tramo.es-roto i { display: none; }
.estado-tramo.es-lento i { animation-duration: 3.6s; background: var(--wait); }
.estado-corte {
    position: absolute; z-index: 2; display: none; width: 26px; height: 26px; border-radius: 50%; place-items: center;
    background: var(--danger); color: var(--white); box-shadow: 0 0 0 3px var(--paper); transform: translate(-50%, -50%);
}
.estado-corte.es-visible { display: grid; }
.estado-corte .ico { width: 14px; height: 14px; stroke-width: 2.4; }
@media (max-width: 560px) {
    .estado-nodo__caja { width: 48px; height: 48px; border-radius: var(--radius-lg); }
    .estado-nodo__caja .ico { width: 22px; height: 22px; }
    .estado-nodo small { display: none; }
    .estado-tramo { margin: 0 0.3rem 1.6rem; }
}

.estado-res { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.8rem; margin-top: var(--sp-4); }
@media (min-width: 860px) { .estado-res { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.estado-res[hidden] { display: none; }
.estado-res__caso { grid-column: 1 / -1; color: var(--ink); font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.estado-sim.es-activo .estado-res__caso { display: none; }
.estado-res > div { display: flex; flex-direction: column; gap: 0.35rem; padding: var(--sp-4) 1.1rem; border-radius: var(--radius-lg); background: var(--paper); font-size: var(--fs-sm); }
.estado-res h3 { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.estado-res .estado-res__tu { box-shadow: inset 0 0 0 1.5px var(--brand); }
@keyframes estado-entra { from { opacity: 0.25; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.es-cambia { animation: estado-entra 0.35s var(--ease-out); }
.estado-sim__nota { display: flex; gap: var(--sp-2); align-items: flex-start; margin-top: var(--sp-4); color: var(--muted); font-size: var(--fs-xs); }
.estado-sim__nota .ico { width: 16px; height: 16px; margin-top: 0.1rem; color: var(--brand); stroke-width: var(--icon-stroke); }

.estado-pill { display: inline-flex; align-self: flex-start; justify-self: start; align-items: center; padding: 0.15rem 0.6rem; border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.estado-pill--err { background: var(--danger-tint); color: var(--danger); }
.estado-pill--ok { background: var(--ok-tint); color: var(--ok); }
.estado-pill--cola { background: var(--wait-tint); color: var(--wait); }

/* ¿Llegó tu factura? */
.estado-dos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5) 2.5rem; align-items: start; }
@media (min-width: 1100px) { .estado-dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.estado-estados { display: flex; flex-direction: column; gap: 0.9rem; }
.estado-estados li { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 0.8rem; align-items: start; font-size: var(--fs-sm); }
.estado-estados .estado-pill { margin-top: 0.15rem; }
.estado-estados b { display: block; color: var(--ink); }
.estado-formas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0.6rem; margin-top: 1.4rem; }
.estado-formas > div { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-lg); font-size: var(--fs-xs); }
.estado-formas b { color: var(--ink); font-size: var(--fs-sm); }
.estado-formas code, .estado-envios code { padding: 0.05em 0.35em; border-radius: 5px; background: var(--surface); color: var(--ink); font: var(--fw-medium) 0.85em var(--font-mono); }
.estado-envios { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); box-shadow: var(--shadow-sheet); font-size: var(--fs-sm); }
.estado-envios__barra { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: var(--fs-xs); }
.estado-envios__barra strong { color: var(--ink); font-size: var(--fs-sm); }
.estado-envios__fila { display: grid; grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 0.9fr); gap: 0.8rem; align-items: center; padding: 0.75rem 1.1rem; border-top: 1px solid var(--line); }
.estado-envios__barra + .estado-envios__fila { border-top: 0; }
.estado-envios__fila code { padding: 0; background: none; font-size: 0.78rem; }
.estado-envios__fila small { display: block; margin-top: 0.1rem; color: var(--muted); font-size: 0.72rem; }
.estado-envios__hora { color: var(--muted); font: var(--fw-regular) 0.72rem var(--font-mono); text-align: right; }

/* Avísanos */
.estado-aviso { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5) 2.5rem; align-items: start; }
@media (min-width: 1100px) { .estado-aviso { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.estado-datos { display: flex; flex-direction: column; gap: 0.7rem; }
.estado-datos li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-sm); }
.estado-datos__n { flex: none; width: 26px; height: 26px; margin-top: 0.05rem; border-radius: 50%; display: grid; place-items: center; background: var(--brand-copy); color: var(--brand-700); font: var(--fw-medium) 0.72rem var(--font-mono); }
.estado-datos b { display: block; color: var(--ink); }
.estado-plantilla { padding: var(--sp-4); border-radius: var(--radius-card); background: var(--surface); }
.estado-plantilla__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.7rem; }
.estado-plantilla__cab strong { color: var(--ink); font-size: var(--fs-sm); }
.estado-plantilla__cab .btn[hidden] { display: none; }
.estado-plantilla pre { margin: 0; padding: var(--sp-4) 1.1rem; border-radius: var(--radius-lg); background: var(--paper); color: var(--ink); font: var(--fw-regular) 0.78rem/1.8 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.estado-plantilla em { padding: 0 0.25em; border-radius: 4px; background: var(--brand-copy); color: var(--brand-700); font-style: normal; }
.estado-plantilla__pie { margin-top: 0.8rem; color: var(--muted); font-size: var(--fs-xs); }
.estado-plantilla__pie span { color: var(--ink); font: var(--fw-medium) 0.78rem var(--font-mono); user-select: all; }

/* ------------- /seguridad: solo lo que hay hoy (23/09/2026) -------------
   Mismo esqueleto que /faq, /guias y /estado (el buzón del raíl reutiliza .estado-buzon).
   La pieza protagonista es la cadena: al alterar la factura del medio se rompe en rojo liso
   desde ahí. Prefijo seg- en todo. Comportamiento en assets/js/seguridad.js. */
.seg-bloque { scroll-margin-top: calc(88px + var(--sp-5)); }
.seg-bloque + .seg-bloque { margin-top: var(--sp-8); }
@media (max-width: 999px) { .seg-bloque { scroll-margin-top: calc(68px + 64px); } }
.seg-bloque h3 { letter-spacing: -0.01em; }

/* Los cuatro controles de cada petición */
.seg-controles { display: grid; grid-template-columns: minmax(0, 1fr); }
.seg-control { position: relative; padding: 0 1.2rem 1.4rem 3.4rem; }
.seg-control::before { content: ""; position: absolute; left: 19px; top: 40px; bottom: 0; width: 2px; background: var(--line); }
.seg-control:last-child::before { display: none; }
.seg-control__n {
    position: absolute; left: 0; top: 0; z-index: 1; width: 40px; height: 40px; border-radius: 12px;
    display: grid; place-items: center; background: var(--brand-copy); color: var(--brand);
}
.seg-control:last-child .seg-control__n { background: var(--brand); color: var(--white); }
.seg-control__n .ico { width: 20px; height: 20px; stroke-width: var(--icon-stroke); }
.seg-control b { display: block; color: var(--ink); font-size: var(--fs-sm); }
.seg-control__txt { display: block; margin-top: 0.2rem; color: var(--muted); font-size: var(--fs-xs); }
.seg-control em { display: inline-block; margin-top: var(--sp-2); padding: 0.1rem 0.55rem; border-radius: var(--radius-pill); background: var(--danger-tint); color: var(--danger); font: var(--fw-medium) 0.7rem var(--font-mono); font-style: normal; }
@media (min-width: 900px) {
    .seg-controles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .seg-control { padding: 0 1.2rem 0 0; }
    .seg-control::before { left: 40px; right: 0; top: 19px; bottom: auto; width: auto; height: 2px; }
    .seg-control__n { position: relative; margin-bottom: 0.9rem; }
}

/* La cadena */
.seg-cadena { padding: clamp(1.1rem, 2.5vw, 1.8rem); border-radius: var(--radius-card); background: var(--surface); }
.seg-cadena__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); margin-bottom: 1.2rem; }
.seg-cadena__cab[hidden] { display: none; }
.seg-cadena__lead { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.seg-cadena__lead .ico { width: 18px; height: 18px; color: var(--brand); stroke-width: var(--icon-stroke); }
.seg-cadena__lead span { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-regular); }
.seg-cadena__cab .btn { gap: var(--sp-2); }
.seg-cadena__cab .btn .ico { width: 18px; height: 18px; stroke-width: var(--icon-stroke); }
.seg-cadena__cab .btn > span:not([data-alterar-txt]) { display: grid; }
.seg-cadena__ico-deshacer, .es-rota .seg-cadena__ico-editar { display: none !important; }
.es-rota .seg-cadena__ico-deshacer { display: grid !important; }
.seg-eslabones { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.8rem; }
@media (min-width: 900px) { .seg-eslabones { grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, 1fr); gap: 0; } }
.seg-registro {
    display: flex; flex-direction: column; gap: 0.45rem; padding: var(--sp-4) 1.1rem;
    border: 2px solid transparent; border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow-card);
    font-size: var(--fs-xs); transition: border-color var(--t);
}
.seg-registro__top { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); }
.seg-registro__no { color: var(--brand); font: var(--fw-medium) 0.82rem var(--font-mono); }
.seg-registro__imp { color: var(--ink); font: var(--fw-medium) 0.82rem var(--font-mono); transition: color var(--t); }
.seg-registro dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.2rem 0.6rem; margin: 0; }
.seg-registro dt { color: var(--muted); }
.seg-registro dd { margin: 0; color: var(--ink); font: var(--fw-regular) 0.72rem var(--font-mono); overflow-wrap: anywhere; }
.seg-registro__estado {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.1rem 0.55rem;
    border-radius: var(--radius-pill); background: var(--ok-tint); color: var(--ok); font-size: 0.72rem; font-weight: var(--fw-bold);
    transition: background var(--t), color var(--t);
}
.seg-registro__estado > span:not([data-estado]) { display: grid; }
.seg-registro__estado .ico { width: 13px; height: 13px; stroke-width: 2.4; }
.seg-registro__no-ico { display: none !important; }
.seg-union { display: grid; place-items: center; color: var(--brand); }
.seg-union .ico { width: 22px; height: 22px; stroke-width: var(--icon-stroke); transition: color var(--t); }
@media (max-width: 899px) { .seg-union .ico { transform: rotate(90deg); } }
/* Cadena rota: rojo liso desde la factura alterada */
.es-rota .seg-registro--medio { border-color: var(--danger); }
.es-rota .seg-registro--medio .seg-registro__imp { color: var(--danger); }
.es-rota .seg-registro--siguiente { border-color: var(--danger-line); }
.es-rota :is(.seg-registro--medio, .seg-registro--siguiente) .seg-registro__estado { background: var(--danger-tint); color: var(--danger); }
.es-rota :is(.seg-registro--medio, .seg-registro--siguiente) .seg-registro__si { display: none !important; }
.es-rota :is(.seg-registro--medio, .seg-registro--siguiente) .seg-registro__no-ico { display: grid !important; }
.es-rota .seg-union--siguiente { color: var(--danger); }
.seg-cadena__res { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: var(--sp-4); padding: 0.9rem var(--sp-4); border-radius: var(--radius-lg); background: var(--paper); font-size: var(--fs-sm); }
.seg-cadena__res .ico { flex: none; width: 20px; height: 20px; margin-top: 0.1rem; color: var(--brand); stroke-width: var(--icon-stroke); }
.seg-cadena__res b { color: var(--ink); }
.seg-cadena__rota, .es-rota .seg-cadena__entera { display: none; }
.es-rota .seg-cadena__rota { display: inline; }
.es-rota .seg-cadena__res .ico { color: var(--danger); }
.seg-cadena__nota { margin-top: 0.8rem; color: var(--muted); font-size: var(--fs-xs); }

/* Tus datos */
.seg-datos { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
@media (min-width: 760px) { .seg-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.seg-dato { display: flex; gap: 0.9rem; align-items: flex-start; padding: 1.2rem 1.3rem; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); }
.seg-dato h3 { margin-bottom: 0.25rem; font-size: 1.05rem; }
.seg-dato p { font-size: var(--fs-sm); }
.seg-dato small { display: block; margin-top: var(--sp-2); color: var(--muted); font-size: var(--fs-xs); }
.seg-dato small a { color: var(--brand-700); font-weight: var(--fw-bold); }

/* Para tu equipo de seguridad */
.seg-equipo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5) 2.5rem; align-items: start; }
@media (min-width: 1100px) { .seg-equipo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.seg-pide { display: flex; flex-direction: column; gap: 0.7rem; }
.seg-pide li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-sm); }
.seg-pide__m { flex: none; width: 26px; height: 26px; margin-top: 0.1rem; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--brand-copy); color: var(--brand); }
.seg-pide__m .ico { width: 16px; height: 16px; stroke-width: var(--icon-stroke); }
.seg-pide b { display: block; color: var(--ink); }
.seg-legales { padding: 1.2rem; border-radius: var(--radius-card); background: var(--surface); }
.seg-legales h3 { margin-bottom: 0.7rem; font-size: 1rem; }
.seg-legales a {
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.8rem 0.9rem;
    border-radius: var(--radius-lg); background: var(--paper); color: var(--muted); font-size: var(--fs-xs); text-decoration: none;
    transition: box-shadow var(--t);
}
.seg-legales a + a { margin-top: var(--sp-2); }
.seg-legales a:hover { box-shadow: var(--shadow-card); }
.seg-legales b { display: block; color: var(--ink); font-size: var(--fs-sm); }
.seg-legales .ico { flex: none; width: 18px; height: 18px; color: var(--brand); stroke-width: var(--icon-stroke); }

/* ------------- /legal: los cuatro textos legales (23/09/2026) -------------
   Mismo esqueleto que /faq, /guias, /estado y /seguridad (.ayuda, raíl fijo y fila de
   pastillas en móvil; el buzón reutiliza .estado-buzon). El índice es largo (hasta 18
   apartados), así que va compacto y numerado, y el raíl se desplaza por dentro si no cabe.
   Cada pieza (ficha, tratamientos, derechos, autoridad, aviso) la pinta
   Legal/Views/partials/bloques.php. */
@media (min-width: 1000px) {
    .legal .ayuda__rail {
        position: sticky; top: calc(88px + var(--sp-5)); align-self: start;
        max-height: calc(100vh - 88px - var(--sp-5) * 2); overflow-y: auto; scrollbar-width: thin;
        padding-right: var(--sp-2);
    }
}
.legal__fecha { margin-top: var(--sp-3); color: var(--muted); font: var(--fw-medium) var(--fs-xs) var(--font-mono); }
.legal__indice a { padding-block: 0.3rem; font-size: var(--fs-xs); }
.legal__n {
    flex: none; width: 24px; height: 24px; border-radius: var(--radius-sm); display: grid; place-items: center;
    background: var(--surface); color: var(--muted); font: var(--fw-medium) 0.72rem var(--font-mono);
    transition: background var(--t), color var(--t);
}
.legal__indice a[aria-current="true"] .legal__n { background: var(--brand); color: var(--white); }
@media (max-width: 999px) {
    .legal__indice a { padding: 0.3rem 0.85rem 0.3rem 0.35rem; }
    .legal__n { width: 22px; height: 22px; border-radius: 50%; }
}

.legal__cuerpo { min-width: 0; max-width: 820px; }
.legal-apartado { scroll-margin-top: calc(88px + var(--sp-5)); }
@media (max-width: 999px) { .legal-apartado { scroll-margin-top: 140px; } }
.legal-apartado + .legal-apartado { margin-top: var(--sp-7); padding-top: var(--sp-7); border-top: 1px solid var(--line); }
.legal-apartado h2 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem); line-height: 1.2; }
.legal-apartado__n { color: var(--brand); font-family: var(--font-mono); font-size: 0.8em; }
.legal-apartado h3 { margin-top: var(--sp-5); font-size: 1.05rem; }
.legal-apartado > p, .legal-apartado > h3 + p { margin-top: var(--sp-3); color: var(--body); max-width: 72ch; }
.legal-apartado a:not(.btn) { overflow-wrap: anywhere; }

.legal-lista { margin-top: var(--sp-3); display: grid; gap: var(--sp-2); max-width: 72ch; }
.legal-lista li { position: relative; padding-left: var(--sp-5); color: var(--body); }
.legal-lista li::before { content: ""; position: absolute; left: 4px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }

.legal-pasos { margin-top: var(--sp-4); display: grid; gap: var(--sp-3); max-width: 72ch; }
.legal-pasos li { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--body); }
.legal-pasos__n {
    flex: none; width: 28px; height: 28px; margin-top: -0.1rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--brand-copy); color: var(--brand-700); font: var(--fw-medium) var(--fs-xs) var(--font-mono);
}

.legal-aviso {
    display: flex; gap: var(--sp-3); align-items: flex-start; margin-top: var(--sp-5); padding: 1rem 1.15rem;
    border-radius: var(--radius-card); background: var(--surface); max-width: 72ch;
}
.legal-aviso .ico { flex: none; width: 20px; height: 20px; margin-top: 0.15rem; color: var(--brand); stroke-width: var(--icon-stroke); }
.legal-aviso p { color: var(--ink); }

/* Datos identificativos: una tarjeta con etiqueta e icono a la izquierda. */
.legal-ficha {
    margin-top: var(--sp-5); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper);
    box-shadow: var(--shadow-card); overflow: hidden;
}
.legal-ficha > div { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); gap: var(--sp-4); padding: 0.85rem 1.15rem; }
.legal-ficha > div + div { border-top: 1px solid var(--line); }
.legal-ficha dt { display: flex; align-items: center; gap: var(--sp-2); color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.legal-ficha dt .ico { flex: none; width: 18px; height: 18px; color: var(--brand); stroke-width: var(--icon-stroke); }
.legal-ficha dd { color: var(--ink); overflow-wrap: anywhere; }
.legal-ficha__mono { font-family: var(--font-mono); }
@media (max-width: 560px) { .legal-ficha > div { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); } }

/* Tratamientos de la política de privacidad: una tarjeta por tratamiento. */
.legal-tratamientos { margin-top: var(--sp-5); display: grid; gap: var(--sp-4); }
.legal-trat { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); overflow: hidden; }
.legal-apartado .legal-trat h3 { margin: 0; padding: 0.9rem 1.15rem; background: var(--surface); font-size: 1.05rem; }
.legal-trat dl > div { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: var(--sp-4); padding: 0.75rem 1.15rem; }
.legal-trat dl > div + div { border-top: 1px solid var(--line); }
.legal-trat dt { color: var(--brand-700); font-size: var(--fs-xs); font-weight: var(--fw-bold); padding-top: 0.15rem; }
.legal-trat dd { color: var(--body); font-size: var(--fs-sm); }
@media (max-width: 560px) { .legal-trat dl > div { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); } }

/* Derechos: rejilla de tarjetas en verde casi blanco. */
.legal-derechos { margin-top: var(--sp-5); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
@media (min-width: 640px) { .legal-derechos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.legal-derechos li {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); align-items: center;
    padding: 1rem 1.1rem; border-radius: var(--radius-card); background: var(--surface);
}
.legal-derechos__ico { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-copy); color: var(--brand); }
.legal-derechos__ico .ico { width: 15px; height: 15px; stroke-width: 2.2; }
.legal-derechos b { color: var(--ink); }
.legal-derechos li > span:last-child { grid-column: 2; color: var(--muted); font-size: var(--fs-sm); }

/* Autoridad de control. */
.legal-autoridad {
    display: flex; gap: var(--sp-4); align-items: flex-start; margin-top: var(--sp-5); padding: 1.1rem 1.2rem;
    border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); box-shadow: var(--shadow-card); max-width: 520px;
}
.legal-autoridad > div { display: flex; flex-direction: column; gap: 0.15rem; }
.legal-autoridad b { color: var(--ink); }
.legal-autoridad span:not(.ayuda__baldosa) { color: var(--muted); font-size: var(--fs-sm); }
.legal-autoridad a { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: var(--sp-1); font-weight: var(--fw-medium); }
.legal-autoridad a .ico { width: 16px; height: 16px; stroke-width: var(--icon-stroke); }

/* Tabla de cookies: la de comparativas (.cmp), con el nombre en monoespaciada. */
.legal-tabla { margin-top: var(--sp-5); }
.legal-tabla td code { color: var(--brand-700); white-space: nowrap; }

/* Cierre: los otros textos legales. */
.legal-otros { margin-top: var(--sp-8); padding: var(--sp-5); border-radius: var(--radius-card); background: var(--surface); }
.legal-otros h2 { font-size: var(--fs-h3); }
.legal-otros ul { margin-top: var(--sp-4); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
@media (min-width: 720px) { .legal-otros ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.legal-otros a {
    display: flex; gap: var(--sp-3); align-items: flex-start; height: 100%; padding: 1rem;
    border-radius: var(--radius-lg); background: var(--paper); color: var(--muted); font-size: var(--fs-xs); text-decoration: none;
    transition: transform var(--t), box-shadow var(--t);
}
.legal-otros a:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); color: var(--muted); }
.legal-otros b { display: block; margin-bottom: 0.15rem; color: var(--ink); font-size: var(--fs-sm); }

/* ------------------------------ Precios -------------------------------- */
/* Planes que se abren (Precios/Views/index.php).
   Inspirado en «ExpandOnHover» (skiper-ui 52). Los cuatro planes se leen siempre
   enteros; el señalado (ratón o foco) se ensancha y descubre a su derecha «Encaja si»
   y el coste por factura. En reposo está abierto el recomendado. La columna base mide
   siempre una unidad fija (--u), así que al abrirse no se recoloca nada: solo se
   descubre la segunda columna. Todas las filas (nombre, para quién, precio, límite,
   lista y botón) tienen la misma altura en los cuatro planes. */
/* Hero centrado y, debajo, la escena a lo ancho de toda la pantalla. */
.page-hero.page-hero--precios { padding-bottom: 0; overflow-x: clip; }
.precios-hero { display: grid; justify-items: center; text-align: center; }
.page-hero--precios .precios-hero h1 { max-width: none; }
.page-hero--precios .precios-hero > p { max-width: 62ch; }

/* Hero: el tendedero. Dos vecinos asomados a sus balcones, a los lados de la pantalla, y
   entre ellos una cuerda de poleas con una camiseta por plan (de Config\Planes, en su
   orden y de menor a mayor talla) y un calcetín de adorno. Todo es CSS:
   - La ropa va y viene 24 px en 8 s, como si alguien tirase de la cuerda, y las poleas
     giran lo que corresponde (24 px sobre un radio de 13 ≈ 106°, ida y vuelta); cada
     prenda además se balancea a su ritmo y los vecinos se asoman un poco.
   - Los edificios se dibujan en px sobre una caja de 290 px de ancho pegada al borde; el
     de la derecha es el mismo, reflejado con scaleX(-1) (y con él el personaje, que así
     mira hacia la cuerda). La cuerda y la ropa ocupan el hueco entre las dos poleas.
   - En pantallas estrechas la escena entera se encoge con `zoom`; en móvil se quitan los
     edificios y el calcetín y queda solo la cuerda con las camisetas. */
.tendedero { margin-top: var(--sp-6); }
.tendedero__escena { position: relative; height: 340px; }

/* Ciudad de fondo: bloques muy claros con ventanas blancas. Las ventanas son el blanco
   que dejan dos rayados en verde claro (columnas y pisos); el borde hace de margen. */
.tendedero__ciudad span {
    position: absolute; bottom: 0; box-sizing: border-box; border: 12px solid var(--brand-copy-soft); border-bottom: 0; border-radius: 6px 6px 0 0;
    background:
        linear-gradient(90deg, var(--brand-copy-soft) 12px, transparent 0) 0 0 / 26px 100%,
        linear-gradient(var(--brand-copy-soft) 14px, transparent 0) 0 0 / 100% 30px,
        var(--paper);
}
.tendedero__ciudad span:nth-child(1) { left: 22%; width: 120px; height: 150px; }
.tendedero__ciudad span:nth-child(2) { left: 32.4%; width: 90px; height: 110px; }
.tendedero__ciudad span:nth-child(3) { left: 41.2%; width: 150px; height: 170px; }
.tendedero__ciudad span:nth-child(4) { left: 54.4%; width: 110px; height: 130px; }
.tendedero__ciudad span:nth-child(5) { left: 64.7%; width: 140px; height: 160px; }
.tendedero__ciudad span:nth-child(6) { left: 74.3%; width: 90px; height: 115px; }

/* Edificio: coordenadas en px dentro de su caja de 290 px. */
.edificio { position: absolute; top: 0; bottom: 0; left: 0; width: 290px; }
.edificio--der { left: auto; right: 0; transform: scaleX(-1); }
.edificio > * { position: absolute; box-sizing: border-box; }
.edificio__fachada { inset: 0; background: var(--surface); border: 2.5px solid var(--ink); border-left: 0; border-bottom: 0; }
.edificio__ladrillos {
    left: 58px; top: 40px; width: 30px; height: 11px; border-radius: 3px; background: var(--brand-copy); opacity: 0.7;
    box-shadow: 182px 20px 0 var(--brand-copy), 6px 222px 0 var(--brand-copy), 178px 252px 0 var(--brand-copy), 102px -10px 0 var(--brand-copy), 196px 210px 0 var(--brand-copy);
}
.edificio__cornisa { left: -8px; top: -8px; width: 306px; height: 16px; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 4px; }
.edificio__contraventana { left: 50px; top: 58px; width: 40px; height: 170px; border: 2.5px solid var(--ink); border-radius: 6px; background: repeating-linear-gradient(var(--brand) 0 10px, var(--brand-600) 10px 13px); }
.edificio__contraventana--b { left: 242px; }
.edificio__ventana { left: 90px; top: 50px; width: 152px; height: 180px; border: 3px solid var(--ink); border-radius: 76px 76px 6px 6px; background: var(--brand-copy); overflow: hidden; }
.edificio__ventana img { position: absolute; left: 50%; top: -8px; width: auto; max-width: none; height: 250px; translate: -50% 0; animation: asoma 4.2s ease-in-out infinite; }
.edificio--der .edificio__ventana img { animation-duration: 5s; animation-delay: -1.5s; }
@keyframes asoma { 50% { transform: translateY(-6px); } }
.edificio__barandilla { left: 68px; top: 176px; width: 196px; height: 7px; border-radius: 4px; background: var(--ink); }
.edificio__barandilla::after { content: ""; position: absolute; left: 8px; top: 4px; width: 192px; height: 44px; background: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 16px); }
.edificio__losa { left: 60px; top: 222px; width: 212px; height: 14px; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 4px; }
.edificio__losa::before, .edificio__losa::after { content: ""; position: absolute; left: 18px; top: 9px; width: 16px; height: 18px; box-sizing: border-box; background: var(--paper); border: 2.5px solid var(--ink); border-top: 0; border-radius: 0 0 8px 8px; }
.edificio__losa::after { left: 174px; }
.edificio__jardinera { left: 130px; top: 238px; width: 66px; height: 40px; transform-origin: 50% 100%; animation: planta 3.6s ease-in-out infinite alternate; }
.edificio__jardinera span { position: absolute; box-sizing: border-box; border: 2px solid var(--ink); border-radius: 50% 50% 50% 0; }
.edificio__jardinera span:nth-child(1) { left: 4px; top: 10px; width: 20px; height: 20px; background: var(--brand); rotate: -30deg; }
.edificio__jardinera span:nth-child(2) { left: 20px; top: 0; width: 22px; height: 22px; background: var(--brand-copy); rotate: 10deg; }
.edificio__jardinera span:nth-child(3) { left: 40px; top: 8px; width: 20px; height: 20px; background: var(--brand); rotate: 60deg; }
.edificio__jardinera span:nth-child(4) { left: 28px; top: 14px; width: 16px; height: 16px; background: var(--paper); }
@keyframes planta { from { rotate: -2deg; } to { rotate: 2deg; } }
.edificio__maceta { left: 128px; top: 264px; width: 70px; height: 22px; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 3px 3px 8px 8px; }
.edificio__bajo { left: 104px; top: 286px; width: 124px; bottom: -3px; background: var(--paper); border: 2.5px solid var(--ink); border-radius: 8px 8px 0 0; }
.edificio__bajo::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2.5px; margin-left: -1px; background: var(--ink); }
.edificio__bajo::after { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 2.5px; background: var(--ink); }
.edificio__soporte { left: 276px; top: 114px; width: 16px; height: 8px; border-radius: 2px; background: var(--ink); }
.edificio__polea { left: 274px; top: 102px; width: 32px; height: 32px; overflow: visible; animation: polea 8s ease-in-out infinite; }
.edificio__polea circle { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
.edificio__polea path { stroke: var(--ink); stroke-width: 2; }
.edificio__polea .edificio__eje { fill: var(--ink); stroke: none; }
@keyframes polea { 50% { rotate: 106deg; } }

/* La cuerda (ida y vuelta) y la ropa, entre las dos poleas. */
.tendedero__cuerda, .tendedero__ropa { position: absolute; left: 290px; right: 290px; top: 0; }
.tendedero__cuerda { width: calc(100% - 580px); height: 180px; overflow: visible; }
.tendedero__cuerda path { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tendedero__cuerda .tendedero__vuelta { stroke-width: 1.5; opacity: 0.4; }
.tendedero__ropa { display: flex; justify-content: space-evenly; align-items: flex-start; animation: tira 8s ease-in-out infinite; }
@keyframes tira { 0%, 100% { translate: -24px 0; } 50% { translate: 24px 0; } }

/* Cada prenda cuelga de la cuerda: su margen superior sigue la comba. */
.prenda { position: relative; flex: none; transform-origin: 50% 0; animation: columpio 3.1s ease-in-out infinite alternate; }
.prenda:nth-child(1) { margin-top: 109px; animation-duration: 2.9s; animation-delay: -0.4s; }
.prenda:nth-child(2) { margin-top: 115px; animation-duration: 2.3s; animation-delay: -1.1s; }
.prenda:nth-child(3) { margin-top: 119px; animation-duration: 3.4s; animation-delay: -1.8s; }
.prenda:nth-child(4) { margin-top: 118px; animation-delay: -0.9s; }
.prenda:nth-child(5) { margin-top: 110px; animation-duration: 3.7s; animation-delay: -2.6s; }
@keyframes columpio { from { rotate: -3deg; } to { rotate: 3deg; } }
.prenda--t1 { width: 138px; height: 131px; --precio: 2.1rem; }
.prenda--t2 { width: 158px; height: 150px; --precio: 2.4rem; }
.prenda--t3, .prenda--t4 { width: 184px; height: 175px; --precio: 2.6rem; }
.prenda--calcetin { width: 44px; height: 80px; }
.prenda__dibujo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.prenda__dibujo path { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.prenda--t2 .prenda__dibujo path, .prenda--calcetin .prenda__dibujo path { fill: var(--brand-copy); }
.prenda--destacada .prenda__dibujo path { fill: var(--brand); }
.prenda__dibujo .prenda__cuello { fill: none; stroke-width: 2; opacity: 0.5; }
.prenda__dibujo .prenda__raya { fill: none; stroke: var(--brand); stroke-width: 4; }
.prenda__texto { position: absolute; left: 20%; right: 20%; top: 40%; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; color: var(--ink); }
.prenda--destacada .prenda__texto { color: var(--white); }
.prenda__plan { font-size: 0.8125rem; font-weight: var(--fw-bold); letter-spacing: 0.01em; }
.prenda__precio { font-family: var(--font-display); font-size: var(--precio); font-weight: var(--fw-heavy); letter-spacing: -0.02em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.prenda__precio--texto { font-size: 1.375rem; }
.prenda__pinza { position: absolute; left: 30%; top: -10px; width: 8px; height: 20px; margin-left: -4px; box-sizing: border-box; background: var(--brand); border: 2px solid var(--ink); border-radius: 3px; }
.prenda__pinza--b { left: 70%; }
.prenda--calcetin .prenda__pinza { left: 36%; }

/* El `zoom` sale de --zoom-ancho (y de --zoom-alto, § Heros a la medida de la pantalla). */
.tendedero__escena { zoom: var(--zoom-ancho, 1); }
@media (max-width: 1300px) { .tendedero__escena { --zoom-ancho: 0.8; } }
@media (max-width: 1100px) { .tendedero__escena { --zoom-ancho: 0.68; } }
@media (max-width: 900px) { .tendedero__escena { --zoom-ancho: 0.56; } }
@media (max-width: 700px) {
    .tendedero__escena { --zoom-ancho: 0.46; }
    .edificio, .prenda--calcetin { display: none; }
    .tendedero__cuerda, .tendedero__ropa { left: 0; right: 0; }
    .tendedero__cuerda { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .tendedero__ropa, .prenda, .edificio__polea, .edificio__ventana img, .edificio__jardinera { animation: none; }
}
.calcula-seccion { scroll-margin-top: calc(88px + var(--sp-4)); }
.planes { --abre: 1.8; container-type: inline-size; display: flex; gap: var(--sp-3); align-items: stretch; }
.planx {
    --u: calc((100cqw - 3 * var(--sp-3)) / (3 + var(--abre)));
    flex: 1 1 0; min-width: 0; display: flex; overflow: hidden;
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    transition: flex-grow 650ms var(--ease-out), box-shadow var(--t);
}
.planx--destacado { border-color: var(--brand); }
.planx__base { flex: none; width: var(--u); padding: var(--sp-6) var(--sp-5); display: grid; grid-template-rows: auto auto auto auto 1fr auto; }
.planx h3 { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); height: 1.75rem; font-size: var(--fs-h3); white-space: nowrap; }
.planx h3 .badge { font-size: 0.72rem; }
.planx__para { margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planx__precio { margin-top: var(--sp-5); height: 2.8rem; display: flex; align-items: baseline; gap: var(--sp-1); }
.planx__precio b { font-family: var(--font-display); font-size: 2.8rem; font-weight: var(--fw-heavy); color: var(--ink); letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.planx__precio span { color: var(--muted); font-size: var(--fs-sm); }
.planx__limite { margin-top: var(--sp-3); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); white-space: nowrap; }
.planx__lista { padding-block: var(--sp-5) var(--sp-6); display: grid; gap: var(--sp-3); align-content: start; font-size: var(--fs-sm); color: var(--body); }
.planx__lista li { display: grid; grid-template-columns: 20px 1fr; gap: var(--sp-3); align-items: start; line-height: 1.4; }
.planx__lista .ico { width: 18px; height: 18px; color: var(--brand); stroke-width: var(--icon-stroke); }
.planx__lista small { display: block; font-size: var(--fs-xs); color: var(--muted); }

.planx__mas {
    flex: none; width: calc(var(--u) * (var(--abre) - 1)); margin-block: var(--sp-6); padding: 0 var(--sp-5);
    border-left: 1px solid var(--line);
    display: grid; grid-template-rows: 1.75rem auto 1fr; gap: var(--sp-3);
    opacity: 0; translate: -0.75rem 0;
    transition: opacity 250ms var(--ease-out), translate 650ms var(--ease-out);
}
.planx__encaja { display: flex; align-items: center; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); }
.planx__texto { font-size: var(--fs-sm); color: var(--body); line-height: 1.55; }
.planx__dato { align-self: end; display: grid; gap: 2px; padding: var(--sp-4); border-radius: 14px; background: var(--surface); }
.planx__dato span, .planx__dato small { font-size: var(--fs-xs); color: var(--muted); }
.planx__dato b { font-family: var(--font-display); font-size: 1.6rem; font-weight: var(--fw-heavy); color: var(--ink); letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }

.planes:not(:has(.planx:hover, .planx:focus-within)) .planx--destacado,
.planx:hover, .planx:focus-within { flex-grow: var(--abre); box-shadow: var(--shadow-sheet); }
.planes:not(:has(.planx:hover, .planx:focus-within)) .planx--destacado .planx__mas,
.planx:hover .planx__mas, .planx:focus-within .planx__mas { opacity: 1; translate: 0 0; transition-delay: 120ms, 0ms; }
.planes__nota { margin-top: var(--sp-5); text-align: center; font-size: var(--fs-sm); color: var(--muted); }

@media (max-width: 1100px) {
    .planes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .planx { flex-direction: column; }
    .planx__base, .planx__mas { width: auto; }
    .planx__mas { opacity: 1; translate: none; margin: 0 var(--sp-5) var(--sp-5); padding: var(--sp-4) 0 0; border-left: 0; border-top: 1px solid var(--line); grid-template-rows: auto; }
    .planx__base { padding-bottom: var(--sp-5); }
    .planx__para, .planx__limite { white-space: normal; }
}
@media (max-width: 640px) { .planes { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .planx, .planx__mas { transition: none; } }

/* ------------------------------ Calculadora ------------------------------
   Texto a la izquierda, centrado en altura con la tarjeta. Los tramos son botones:
   al pulsar uno, la barra se desliza hasta él (assets/js/precios.js). */
.calcula-fila { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); align-items: center; }
.calcula-fila__texto { display: grid; gap: var(--sp-4); }
.calcula-fila__texto h2 { font-size: var(--fs-h2); }
.calcula-fila__texto p { font-size: var(--fs-lead); color: var(--muted); max-width: 40ch; }
.calcula { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--sp-6); display: grid; gap: var(--sp-5); }
.calcula__cab { display: flex; justify-content: space-between; align-items: baseline; }
.calcula__cab label { font-weight: var(--fw-bold); color: var(--ink); font-size: var(--fs-sm); }
.calcula__cifra { font-family: var(--font-display); font-size: 2rem; font-weight: var(--fw-heavy); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1; }
.calcula input[type="range"] { width: 100%; accent-color: var(--brand); height: 28px; margin: calc(-1 * var(--sp-2)) 0; cursor: pointer; }
.calcula__resultado { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); padding: var(--sp-5); border-radius: 14px; background: var(--surface); }
.calcula__resultado div { display: grid; gap: 2px; }
.calcula__resultado div + div { padding-left: var(--sp-4); border-left: 1px solid var(--line-strong); }
.calcula__resultado span { font-size: var(--fs-xs); color: var(--muted); }
.calcula__resultado b { font-family: var(--font-display); font-size: 1.6rem; font-weight: var(--fw-heavy); letter-spacing: -0.02em; color: var(--ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
.calcula__resultado p { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--muted); }
.calcula__tramos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.calcula__tramos button {
    display: grid; gap: 2px; align-content: center; min-height: 64px; padding: var(--sp-3) var(--sp-4); text-align: left;
    border-radius: var(--radius-sm); border: 1.5px solid var(--line-strong); background: var(--paper); cursor: pointer;
    font: inherit; font-size: var(--fs-xs); color: var(--muted);
    transition: border-color var(--t), background-color var(--t), color var(--t);
}
.calcula__tramos b { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); font-variant-numeric: tabular-nums; }
.calcula__tramos button:hover { border-color: var(--muted); }
.calcula__tramos button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-copy-soft); color: var(--brand-700); }
.calcula__tramos button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-copy); border-color: var(--brand); }
@media (max-width: 1020px) { .calcula-fila { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); } }
@media (max-width: 560px) { .calcula { padding: var(--sp-5); } .calcula__resultado { padding: var(--sp-4); } .calcula__resultado b { font-size: 1.2rem; } .calcula__tramos { grid-template-columns: minmax(0, 1fr); } .calcula__tramos button { min-height: 52px; } }

.puntos--precios { gap: var(--sp-5); }
.puntos--precios li { font-size: var(--fs-body); color: var(--muted); }
table.cmp .cmp__destacado { background: var(--brand-copy-soft); }

/* ------------------------------ Gestorías ------------------------------
   Texto y puntos a la izquierda; a la derecha, una cartera de ejemplo: la misma
   integración enviando por cuatro clientes. Lo pendiente, en una línea debajo. */
.gestorias { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: center; }
.gestorias__texto { display: grid; gap: var(--sp-5); justify-items: start; }
.gestorias__texto h2 { font-size: var(--fs-h2); max-width: 20ch; }
.gestorias__texto > p { font-size: var(--fs-lead); color: var(--muted); max-width: 46ch; }
.gestorias .puntos { margin-block: var(--sp-2); }
.cartera { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-sheet); overflow: hidden; }
.cartera__cab { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); }
.cartera__titulo { font-weight: var(--fw-bold); color: var(--ink); }
.cartera__clave { font-family: var(--font-mono); font-size: 0.75rem; padding: 0.3rem 0.6rem; border-radius: var(--radius-pill); background: var(--surface); color: var(--body); }
.cartera__lista li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--sp-5); align-items: center; padding: var(--sp-4) var(--sp-5); }
.cartera__lista li + li { border-top: 1px solid var(--line); }
.cartera__cli { display: grid; gap: 2px; min-width: 0; }
.cartera__cli b { color: var(--ink); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartera__cli code { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); }
.cartera__num { display: grid; justify-items: end; font-family: var(--font-display); font-weight: var(--fw-heavy); font-size: 1.15rem; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.cartera__num small { font-family: var(--font-sans); font-weight: var(--fw-regular); font-size: var(--fs-xs); color: var(--muted); }
.cartera__pie { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); background: var(--surface); font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 1020px) { .gestorias { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); } }
@media (max-width: 480px) { .cartera__lista li { grid-template-columns: minmax(0, 1fr) auto; } .cartera__lista .badge { display: none; } }

/* Tablas */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--paper); }
table.cmp { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 560px; font-variant-numeric: tabular-nums; }
table.cmp th, table.cmp td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.cmp thead th { background: var(--surface); color: var(--ink); font-weight: var(--fw-bold); border-bottom: 1px solid var(--line); }
table.cmp tbody tr:last-child td { border-bottom: 0; }
table.cmp td:first-child { color: var(--ink); font-weight: var(--fw-medium); }
table.cmp td .yes { color: var(--ink); font-weight: var(--fw-bold); }
table.cmp td .no { color: var(--muted); }
.table-wrap--flush { border: 0; border-radius: 0; }
/* Móvil: la tabla se desliza de lado. Para que se note, la primera columna (qué se compara)
   se queda fija y una sombra en el borde derecho avisa de que queda tabla por ver; la tapa
   un degradado del color del fondo que viaja con el contenido (`local`) al llegar al final. */
@media (max-width: 640px) {
    .table-wrap {
        background:
            linear-gradient(to left, var(--paper) 40%, transparent) right center / 32px 100% no-repeat local,
            radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--ink) 16%, transparent), transparent) right center / 14px 100% no-repeat scroll,
            var(--paper);
    }
    table.cmp th, table.cmp td { padding-inline: 0.75rem; }
    table.cmp th:first-child, table.cmp td:first-child { position: sticky; left: 0; z-index: 1; background: var(--paper); box-shadow: 1px 0 0 var(--line); }
    table.cmp thead th:first-child { background: var(--surface); }
}
/* Tabla de ejemplo dentro de una hoja: cabe sin barra de desplazamiento. */
.hoja table.cmp { min-width: 0; }
.hoja table.cmp th, .hoja table.cmp td { padding-inline: 0.8rem; }

/* ------------------------------ Texto largo ----------------------------- */
.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--fs-h2); margin-top: var(--sp-7); margin-bottom: var(--sp-3); }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-h3); margin-top: var(--sp-6); margin-bottom: var(--sp-2); }
.prose p, .prose li { color: var(--body); }
.prose p { margin-top: var(--sp-3); }
.prose ul { margin-top: var(--sp-3); display: grid; gap: var(--sp-2); }
.prose ul li { padding-left: var(--sp-5); position: relative; }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.prose strong { color: var(--ink); }

/* ---------------------------- Cabecera interior ------------------------- */
.page-hero { background: var(--paper); border-bottom: 1px solid var(--line); padding-block: var(--sp-7) var(--sp-7); }
.page-hero h1 { font-size: var(--fs-h1); max-width: 22ch; letter-spacing: -0.02em; }
.page-hero p { margin-top: var(--sp-4); font-size: var(--fs-lead); color: var(--muted); max-width: 60ch; }

/* ------------------------------ Formularios ----------------------------- */
.form-row { display: grid; align-content: start; gap: var(--sp-2); margin-bottom: var(--sp-5); }
/* Ayuda que solo se ve mientras escribes en el campo (el NIF de /alta). Oculta sigue
   valiendo para el lector de pantalla: aria-describedby lee también lo que no se ve. */
.form-row:not(:focus-within) > .form-note--al-foco { display: none; }
.form-row label { font-weight: var(--fw-bold); color: var(--ink); font-size: var(--fs-sm); }
.form-row .req { color: var(--brand); font-weight: var(--fw-bold); margin-left: 2px; }
.form-row .opt { color: var(--muted); font-weight: var(--fw-regular); margin-left: var(--sp-1); }
.input, .textarea, .select {
    width: 100%; min-height: 48px; padding: 0.7rem 0.9rem;
    border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
    background: var(--paper); font-size: 1rem;
    transition: border-color var(--t), box-shadow var(--t);
}
.input:hover, .textarea:hover, .select:hover { border-color: var(--muted); }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-copy); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--danger); }
.input[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--danger-tint); }
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: 1; }
.textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; }
.form-note { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.form-error { color: var(--danger); font-weight: var(--fw-bold); display: flex; gap: var(--sp-1); align-items: flex-start; }
.form-error::before { content: "!"; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--danger); color: var(--white); font-size: 11px; font-weight: var(--fw-heavy); display: grid; place-items: center; margin-top: 1px; }
.form-legend { font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--sp-4); }
.hp-field { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.alert { padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-sm); margin-bottom: var(--sp-5); font-size: var(--fs-sm); border: 1px solid transparent; }
.alert:focus { outline: 2px solid currentColor; outline-offset: 2px; }
.alert--ok { background: var(--ok-tint); color: var(--ok); border-color: var(--ok); font-weight: var(--fw-bold); }
.alert--err { background: var(--danger-tint); color: var(--danger); border-color: var(--danger-line); }
.alert--err ul { margin-top: var(--sp-2); display: grid; gap: var(--sp-1); }
.alert--err a { color: var(--danger); font-weight: var(--fw-bold); }

/* Aviso de honestidad («en habilitación», IVA…): caja gris suave. */
.notice {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--body);
    border-radius: var(--radius-sm);
    padding: var(--sp-4) var(--sp-5);
    font-size: var(--fs-sm);
    max-width: 52rem;
}
.notice.center { margin-inline: auto; }
.notice strong, .notice b { color: var(--ink); }

/* ------------------------------ Pie ------------------------------------ */
/* Pie: mezcla de referencias (ver footer.php). Marca con sellos y contacto a la izquierda,
   enlaces a la derecha, fila de utilidades, barra legal y la marca en grande de cierre. */
.site-footer { background: var(--brand-copy-soft); color: var(--body); padding-top: var(--sp-8); margin-top: var(--sp-8); overflow: hidden; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2.8fr); gap: var(--sp-7) var(--sp-6); }
.footer-marca { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.footer-about { color: var(--body); font-size: var(--fs-sm); max-width: 36ch; }
/* Sellos de caucho: tinta verde sobre el pie, texto dando la vuelta y el icono en una
   baldosa redonda. Cada uno va un poco ladeado, como estampado a mano; se endereza al pasar. */
.footer-sellos { list-style: none; margin: var(--sp-2) 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 84px)); gap: var(--sp-3); }
.sello { transform: rotate(var(--giro, 0deg)); transition: transform var(--t-entrada) var(--ease-spring); }
.sello:nth-child(1) { --giro: -8deg; }
.sello:nth-child(2) { --giro: 6deg; }
.sello:nth-child(3) { --giro: -3deg; }
.sello:hover { transform: rotate(0deg) scale(1.06); }
.sello > svg { display: block; width: 100%; height: auto; overflow: visible; }
.sello__aro { fill: none; stroke: var(--brand); stroke-width: 1.6; }
.sello__aro--fino { fill: var(--brand-copy); stroke: none; }
.sello text { fill: var(--brand-700); font-family: var(--font-mono); font-size: 8.6px; font-weight: var(--fw-bold); text-transform: uppercase; }
.sello__icono { color: var(--brand-700); stroke-width: var(--icon-stroke); }
.footer-fin { display: flex; align-items: center; gap: var(--sp-5); }
.footer-redes { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--sp-2); }
.footer-redes a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); color: var(--brand-700); transition: border-color var(--t), color var(--t); }
.footer-redes a:hover, .footer-redes a:focus-visible { border-color: var(--brand); color: var(--brand); }
.footer-redes svg { width: 20px; height: 20px; stroke-width: var(--icon-stroke); }
.footer-ayuda { color: var(--muted); font-size: var(--fs-sm); }
.footer-ayuda a { color: var(--brand-700); font-weight: var(--fw-bold); }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-6); }
.footer-col h2 { font-family: var(--font-sans); color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--sp-3); }
.footer-col a { display: block; color: var(--ink); font-size: var(--fs-sm); padding: 0.4rem 0; text-decoration: none; transition: color var(--t-fast); }
.footer-col a:hover { color: var(--brand); }
.footer-util { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: center; margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.footer-estado { display: inline-flex; align-items: center; gap: var(--sp-2); color: var(--body); font-size: var(--fs-sm); font-weight: var(--fw-bold); text-decoration: none; transition: color var(--t-fast); }
.footer-estado:hover { color: var(--brand-700); }
.footer-estado svg { width: 18px; height: 18px; color: var(--brand); stroke-width: var(--icon-stroke); }
.footer-acceso { display: flex; align-items: center; gap: var(--sp-5); }
.footer-login { color: var(--ink); font-weight: var(--fw-bold); font-size: var(--fs-sm); text-decoration: none; }
.footer-login:hover { color: var(--brand); }
.footer-acceso .btn svg { width: 18px; height: 18px; stroke-width: var(--icon-stroke); }
.footer-bottom { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); justify-content: space-between; align-items: center; margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); }
.footer-bottom nav { display: flex; gap: var(--sp-2) var(--sp-4); flex-wrap: wrap; }
.footer-bottom a { color: var(--muted); padding-block: var(--sp-1); }
.footer-bottom a:hover { color: var(--brand); }
/* La marca en grande: verde claro sobre el verde del pie, cortada por abajo (se ve la
   parte alta de las letras). Sube un poco al entrar, ligada al scroll y sin JS. */
.footer-rotulo { margin-top: var(--sp-3); overflow: hidden; }
.footer-rotulo svg { display: block; width: 100%; height: auto; color: var(--brand-copy); }
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .footer-rotulo svg { animation: rotulo-sube linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    }
}
@keyframes rotulo-sube { from { transform: translateY(35%); } }
@media (max-width: 1100px) { .footer-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
    .footer-acceso { width: 100%; justify-content: space-between; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ----------------- Sistema de cookies (23/09/2026, COOKIES.md) -----------------
   Aviso en tarjeta abajo a la izquierda (a la derecha va el botón de contacto flotante),
   y panel de preferencias en un <dialog>. Lo mueve assets/js/cookies.js. */
.cookie {
    position: fixed; left: var(--sp-4); bottom: var(--sp-4); z-index: var(--z-cookie);
    width: min(440px, calc(100% - 2 * var(--sp-4)));
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3) var(--sp-3);
    padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius-card);
    background: var(--paper); box-shadow: var(--shadow-pop);
    animation: cookie-entra 0.5s var(--ease-out) both;
}
.cookie[hidden] { display: none; }
@keyframes cookie-entra { from { opacity: 0; transform: translateY(16px); } }
.cookie__ico {
    flex: none; width: 40px; height: 40px; border-radius: var(--radius); display: grid; place-items: center;
    background: var(--brand-copy); color: var(--brand);
}
.cookie__ico .ico { width: 22px; height: 22px; stroke-width: var(--icon-stroke); }
.cookie__texto strong { display: block; color: var(--ink); }
.cookie__texto p { margin-top: 0.15rem; font-size: var(--fs-sm); color: var(--body); }
.cookie .cookie__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: var(--sp-2); flex-wrap: wrap; }
@media (max-width: 560px) {
    .cookie { left: 50%; translate: -50% 0; bottom: var(--sp-3); }
    .cookie .cookie__actions .btn { flex: 1 1 auto; }
}

/* Panel de preferencias */
/* margin: auto lo pone el navegador a <dialog>, pero el reset global lo anula: sin él sale arriba a la izquierda. */
.cookies-panel, .bienvenida {
    margin: auto; max-height: calc(100dvh - 2rem); overflow: auto; padding: 0;
    border: 0; border-radius: 22px; background: var(--paper); color: var(--body); box-shadow: var(--shadow-pop);
}
.cookies-panel::backdrop, .bienvenida::backdrop { background: var(--veil); backdrop-filter: blur(3px); }
.cookies-panel[open], .bienvenida[open] { animation: dialogo-entra 0.45s var(--ease-out) both; }
.cookies-panel[open]::backdrop, .bienvenida[open]::backdrop { animation: velo-entra 0.3s ease-out both; }
@keyframes dialogo-entra { from { opacity: 0; transform: translateY(14px) scale(0.97); } }
@keyframes velo-entra { from { opacity: 0; } }

.cookies-panel { width: min(560px, calc(100% - 2rem)); }
.cookies-panel__form { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); }
.cookies-panel__cab { display: flex; align-items: center; gap: var(--sp-3); }
.cookies-panel__cab h2 { flex: 1; font-size: var(--fs-h3); }
.cookies-panel__cerrar, .bienvenida__cerrar {
    flex: none; width: 36px; height: 36px; border: 0; border-radius: 50%; display: grid; place-items: center;
    background: var(--surface); color: var(--ink); cursor: pointer; transition: background var(--t), transform var(--t);
}
.cookies-panel__cerrar:hover, .bienvenida__cerrar:hover { background: var(--brand-copy); transform: rotate(90deg); }
.cookies-panel__cerrar .ico, .bienvenida__cerrar .ico { width: 18px; height: 18px; stroke-width: var(--icon-stroke); }
.cookies-panel__texto { font-size: var(--fs-sm); }
.cookies-panel__cats { display: grid; gap: var(--sp-2); }
.cookies-cat { padding: 1rem 1.1rem; border-radius: var(--radius-card); background: var(--surface); }
.cookies-cat__cab { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.cookies-cat__cab strong { color: var(--ink); }
.cookies-cat p { margin-top: 0.3rem; font-size: var(--fs-sm); color: var(--muted); }
.cookies-panel__acciones { display: flex; justify-content: flex-end; gap: var(--sp-2); flex-wrap: wrap; }

/* Interruptor (solo aparece cuando haya categorías opcionales) */
.interruptor { position: relative; display: inline-flex; flex: none; cursor: pointer; }
.interruptor input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.interruptor__pista {
    width: 44px; height: 26px; border-radius: var(--radius-pill); background: var(--line-strong);
    position: relative; transition: background var(--t);
}
.interruptor__pista::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
    background: var(--white); box-shadow: var(--shadow-card); transition: translate var(--t);
}
.interruptor input:checked + .interruptor__pista { background: var(--brand); }
.interruptor input:checked + .interruptor__pista::after { translate: 18px 0; }
.interruptor input:focus-visible + .interruptor__pista { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Enlace del pie que reabre el panel: parece un enlace más de la barra legal. */
.footer-cookies {
    padding: var(--sp-1) 0; border: 0; background: none; color: var(--muted);
    font: inherit; cursor: pointer; transition: color var(--t);
}
.footer-cookies:hover { color: var(--brand); }
.no-js .footer-cookies { display: none; }

/* ----------------- Pop-up de bienvenida (23/09/2026, COOKIES.md) -----------------
   Formato de oferta, adaptado del de rehojo.com (propuesta D): tres bandas. Arriba el
   sello de marca en verde casi blanco, con una etiqueta de precio que cae girada; en medio
   el titular con la oferta en verde, el botón a todo el ancho y la salida discreta; abajo,
   la tira de garantías. Siempre sobre claro: Rehojo usa un panel oscuro y aquí no hay. */
.bienvenida { width: min(470px, calc(100% - 2rem)); border-radius: 24px; }
.bienvenida > form { position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 1; }
.bienvenida__cerrar { background: var(--paper); box-shadow: var(--shadow-card); }

.bienvenida__sello {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
    padding: 1.35rem 4.2rem 1.35rem 1.75rem; background: var(--surface);
}
.bienvenida__sello .brand { pointer-events: none; }
.bienvenida__etiqueta {
    position: relative; flex: none; display: inline-flex; flex-direction: column; align-items: flex-start;
    padding: 0.5rem 0.9rem 0.5rem 1.6rem; border-radius: 10px 14px 14px 10px;
    background: var(--brand); color: var(--white); rotate: 6deg; box-shadow: var(--shadow-card);
}
/* El agujero de la etiqueta: del color del fondo de la banda. */
.bienvenida__etiqueta::before {
    content: ""; position: absolute; left: 0.55rem; top: 50%; width: 8px; height: 8px; margin-top: -4px;
    border-radius: 50%; background: var(--surface);
}
/* Sin opacidad: blanco sobre --brand da 5,3:1 y, rebajado al 85 %, bajaba de 4,5:1 (axe). */
.bienvenida__etiqueta small { font-size: 0.66rem; font-weight: var(--fw-medium); letter-spacing: 0.08em; text-transform: uppercase; }
.bienvenida__etiqueta b { font: var(--fw-medium) 1.35rem/1.1 var(--font-mono); }

.bienvenida__cuerpo { padding: var(--sp-5) 1.75rem 0; }
.bienvenida__cuerpo h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.2rem); line-height: 1.1; letter-spacing: -0.02em; }
.bienvenida__cuerpo h2 em { font-style: normal; color: var(--brand); }
.bienvenida__cuerpo p { margin-top: var(--sp-3); color: var(--muted); max-width: 40ch; }

.bienvenida__acciones { display: grid; gap: var(--sp-1); padding: var(--sp-5) 1.75rem 1.25rem; }
.bienvenida__cta { width: 100%; box-shadow: var(--shadow-cta); }
.bienvenida__otra { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--sp-1) var(--sp-5); padding-top: var(--sp-2); font-size: var(--fs-sm); }
.bienvenida__otra a { padding: 0.35rem 0.1rem; font-weight: var(--fw-medium); }
.bienvenida__otra form { display: contents; }
.bienvenida__otra button {
    padding: 0.35rem 0.1rem; border: 0; background: none; color: var(--muted);
    font: inherit; font-weight: var(--fw-medium); cursor: pointer;
}
.bienvenida__otra button:hover { color: var(--ink); }

.bienvenida__garantias {
    display: grid; gap: 0.6rem; margin: 0; padding: var(--sp-4) 1.75rem var(--sp-3);
    border-top: 1px solid var(--line); background: var(--brand-copy-soft);
}
.bienvenida__garantias li { display: flex; align-items: center; gap: 0.6rem; color: var(--ink); font-size: var(--fs-sm); }
.bienvenida__garantias .ico { flex: none; width: 20px; height: 20px; color: var(--brand); stroke-width: var(--icon-stroke); }
.bienvenida__nota { padding: 0 1.75rem 1.2rem; background: var(--brand-copy-soft); color: var(--muted); font-size: var(--fs-xs); }

.bienvenida[open] .bienvenida__etiqueta { animation: bv-etiqueta 0.7s var(--ease-spring, var(--ease-out)) 0.35s both; }
.bienvenida[open] .bienvenida__garantias li { animation: bv-fila 0.4s var(--ease-out) both; }
.bienvenida[open] .bienvenida__garantias li:nth-child(1) { animation-delay: 0.5s; }
.bienvenida[open] .bienvenida__garantias li:nth-child(2) { animation-delay: 0.6s; }
.bienvenida[open] .bienvenida__garantias li:nth-child(3) { animation-delay: 0.7s; }
.bienvenida[open] .bienvenida__cta { animation: bv-latido 1.4s ease-in-out 1.2s 2; }
@keyframes bv-etiqueta { from { opacity: 0; transform: translateY(-30px) rotate(-20deg); } }
@keyframes bv-fila { from { opacity: 0; transform: translateX(-10px); } }
@keyframes bv-latido { 50% { transform: scale(1.03); } }

@media (max-width: 560px) {
    /* En móvil, hoja desde abajo. */
    .bienvenida { width: 100%; max-width: none; margin: auto 0 0; border-radius: 24px 24px 0 0; }
    .bienvenida__sello { padding: 1.1rem 3.8rem 1.1rem 1.25rem; }
    .bienvenida__sello .brand__logotipo { display: none; }
    .bienvenida__cuerpo, .bienvenida__acciones, .bienvenida__garantias, .bienvenida__nota { padding-inline: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .cookie, .cookies-panel[open], .bienvenida[open], .cookies-panel[open]::backdrop, .bienvenida[open]::backdrop,
    .bienvenida[open] .bienvenida__etiqueta, .bienvenida[open] .bienvenida__garantias li, .bienvenida[open] .bienvenida__cta { animation: none; }
    .cookies-panel__cerrar:hover, .bienvenida__cerrar:hover { transform: none; }
}

/* ---------------------- Botón de contacto flotante --------------------
   Fijo abajo a la derecha en todas las páginas menos /contacto. Queda por debajo
   del banner de cookies (--z-flotante < --z-cookie) para no tapar sus botones.
   En reposo es un círculo con el icono; al pasar el ratón (o con el foco) se abre y dice
   «Contacta con nosotros». El texto está siempre en el HTML, así que sigue siendo el
   nombre del enlace. Crece con max-width, pero el botón va fijo y no mueve nada. */
.contacto-flotante {
    position: fixed; right: var(--sp-5); bottom: var(--sp-5); z-index: var(--z-flotante);
    width: auto; min-width: 52px; height: 52px; padding: 0 16px; gap: 0;
    box-shadow: var(--shadow-pop);
}
.contacto-flotante > span {
    display: block; max-width: 0; overflow: hidden; opacity: 0; white-space: nowrap;
    transition: max-width 450ms var(--ease-out), opacity var(--t), margin 450ms var(--ease-out);
}
.contacto-flotante:hover, .contacto-flotante:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.contacto-flotante:hover > span, .contacto-flotante:focus-visible > span { max-width: 14rem; opacity: 1; margin-left: var(--sp-2); }
.contacto-flotante__svg { flex: none; width: 20px; height: 20px; stroke-width: var(--icon-stroke); }
@media (max-width: 520px) {
    .contacto-flotante { right: var(--sp-4); bottom: var(--sp-4); }
}
@media print { .contacto-flotante { display: none; } }

/* ------------------------------ Utilidades -----------------------------
   Existen para que NINGUNA vista necesite un style="" inline (regla de oro nº 3
   de CLAUDE.md). Si al escribir una plantilla te falta una, añádela aquí con un
   nombre que diga para qué sirve. */
.center { text-align: center; }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.stack > * + * { margin-top: var(--sp-4); }
.text-muted-sm { color: var(--muted); font-size: var(--fs-sm); }
.title-hero    { font-size: var(--fs-hero); letter-spacing: -0.02em; }
.title-section { font-size: var(--fs-h2); }
.lead--centered { margin-inline: auto; max-width: 48ch; }
.card--flush { padding: 0; overflow: hidden; }
.card--roomy { padding: var(--sp-6); }
.card__body  { padding: var(--sp-5); }
@media (max-width: 520px) { .card--roomy { padding: var(--sp-5) var(--sp-4); } }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link { position: absolute; left: -9999px; top: var(--sp-3); }
.skip-link:focus { left: var(--sp-4); background: var(--paper); color: var(--brand); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); z-index: var(--z-skip); box-shadow: var(--shadow-pop); }

/* ------------------------------ Contacto ------------------------------
   Hero y formulario en una sola pieza (Contacto/Views/index.php): a la izquierda el
   titular, los temas y el correo directo; a la derecha la hoja del formulario con el
   logo en la cabecera, iconos en los campos y el perfil en pastillas. */
.contacto { padding-top: var(--sp-7); }
.contacto__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 36rem); gap: var(--sp-8); align-items: start; }
.contacto__intro { padding-top: var(--sp-4); }
.contacto__titulo { font-size: var(--fs-hero); letter-spacing: -0.02em; line-height: 1.02; max-width: 12ch; text-wrap: balance; }
.contacto__texto { margin-top: var(--sp-5); font-size: var(--fs-lead); color: var(--muted); max-width: 46ch; }
/* Subtítulo del bloque, sin versalitas: la web no usa antetítulos (ESTILO_REDISENO.md §7). */
.contacto__subtitulo { margin-top: var(--sp-7); font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--ink); }

.temas { margin-top: var(--sp-4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-6); max-width: 40rem; }
.tema { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }
.tema b { display: block; color: var(--ink); font-weight: var(--fw-bold); font-size: var(--fs-body); margin-bottom: 2px; }
.tema__icono { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: var(--radius); background: var(--brand-copy); color: var(--brand); }
.tema__icono .ico { width: 20px; height: 20px; stroke-width: var(--icon-stroke); }

/* Los pasos de /alta: la misma pieza que los temas de Contacto, pero en una columna
   porque son tres y van en orden. */
.temas--pasos { grid-template-columns: minmax(0, 1fr); padding-left: 0; list-style: none; }
.contacto__atajos { margin-top: var(--sp-7); display: grid; gap: var(--sp-3); max-width: 40rem; }
.contacto__directo--alta .btn { flex: none; margin-left: auto; }
@media (max-width: 520px) { .contacto__directo--alta { flex-wrap: wrap; } .contacto__directo--alta .btn { margin-left: 0; } }
.contacto__directo { display: flex; gap: var(--sp-3); align-items: center; max-width: 40rem; padding: var(--sp-4) var(--sp-5); border-radius: var(--radius-card); background: var(--surface); }
.contacto__directo p { font-size: var(--fs-sm); color: var(--muted); }
.contacto__directo b { display: block; color: var(--ink); font-weight: var(--fw-bold); }
.contacto__directo a { font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.contacto__directo .tema__icono { background: var(--paper); }

.contacto__hoja { padding: var(--sp-6); }
.contacto__cabecera { display: flex; gap: var(--sp-4); align-items: center; padding-bottom: var(--sp-5); margin-bottom: var(--sp-5); border-bottom: 1px solid var(--line); }
.contacto__cabecera .brand__mark { width: 48px; height: 48px; }
.contacto__cabecera h2 { font-size: var(--fs-h3); letter-spacing: -0.02em; }
.contacto__cabecera p { margin-top: 2px; display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-sm); color: var(--muted); }
.contacto__cabecera p .ico { width: 16px; height: 16px; flex: none; color: var(--brand); stroke-width: var(--icon-stroke); }

.form-par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-4); }

/* Campo con icono delante: el icono es decoración, la etiqueta sigue siendo el <label>. */
.campo { position: relative; display: block; }
.campo > .ico { position: absolute; left: 0.85rem; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--muted); stroke-width: var(--icon-stroke); pointer-events: none; transition: color var(--t); }
.campo > .input, .campo > .textarea, .campo > .select { padding-left: 2.6rem; }
.campo--area > .ico { top: 0.95rem; translate: none; }
.campo:focus-within > .ico { color: var(--brand); }

/* Perfil: radios de verdad, pintados como pastillas. Se puede dejar sin marcar. */
.perfiles { border: 0; padding: 0; margin: 0 0 var(--sp-5); min-width: 0; }
.perfiles legend { padding: 0; margin-bottom: var(--sp-2); font-weight: var(--fw-bold); color: var(--ink); font-size: var(--fs-sm); }
.perfiles__opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.perfil-op { position: relative; display: flex; gap: var(--sp-2); align-items: center; min-height: 48px; padding: 0.55rem 0.8rem; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--body); cursor: pointer; transition: border-color var(--t), background-color var(--t), color var(--t); }
.perfil-op input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.perfil-op .ico { width: 18px; height: 18px; flex: none; color: var(--muted); stroke-width: var(--icon-stroke); transition: color var(--t); }
.perfil-op:hover { border-color: var(--muted); }
.perfil-op:has(input:checked) { border-color: var(--brand); background: var(--brand-copy-soft); color: var(--brand-700); }
.perfil-op:has(input:checked) .ico { color: var(--brand); }
.perfil-op:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--brand-copy); border-color: var(--brand); }

@media (max-width: 1020px) {
    .contacto__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
    .contacto__intro { padding-top: 0; }
    .contacto__subtitulo, .contacto__directo { margin-top: var(--sp-6); }
}
@media (max-width: 560px) {
    .contacto { padding-top: var(--sp-5); }
    .temas, .form-par { grid-template-columns: minmax(0, 1fr); }
    .contacto__hoja { padding: var(--sp-5); }
}

/* ------------------ Multitud caminando (pie de Contacto) ------------------
   Personajes de Open Peeps que cruzan por detrás del formulario y pisan justo el
   borde superior del pie. El canvas lo dibuja assets/js/multitud.js; aquí solo se
   reserva el sitio. La sección deja hueco abajo para que se vean asomar. */
.multitud-host { position: relative; overflow: hidden; padding-bottom: 14.5rem; }
.multitud-host > .container { position: relative; z-index: 1; }
.multitud { position: absolute; inset: auto 0 0 0; width: 100%; height: 23rem; pointer-events: none; }
/* El pie lleva margen arriba y raya discontinua en todas las páginas; aquí se quitan
   las dos para que los personajes pisen directamente el fondo del pie. */
body:has(.multitud-host) .site-footer { margin-top: 0; border-top: 0; }
@media (max-width: 1020px) { .multitud-host { padding-bottom: 9.5rem; } .multitud { height: 15.5rem; } }

/* ------------------ Fotos reales en verde (fondos de sección) ------------------
   Foto real detrás del titular de una sección. El webp va en gris a propósito: el color
   lo pone el «screen» con --brand-copy (lo negro pasa a ese verde, lo blanco se queda
   blanco), así cambia con tokens.css como todo lo demás. Se desvanece hacia abajo y va
   al 60 % para que el texto se lea bien. Como mucho ocupa 44rem de alto: en una sección
   muy larga, estirada a toda la altura, la foto quedaba enorme y casi no se veía. Cada foto va en dos tamaños (1920 y 2880 px)
   para que en pantallas retina no se vea blanda; la elige el modificador.
   Probado y descartado (23/09/2026): teñirla con «multiply» al 40–50 % (el texto gris
   encima dejaba de leerse) y subirla al 70 % desvaneciendo más tarde (no convenció). */
.con-foto { position: relative; isolation: isolate; overflow: hidden; }
.con-foto::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: min(100%, 44rem); z-index: -1; pointer-events: none;
    background: linear-gradient(var(--brand-copy), var(--brand-copy)), var(--foto) center 40% / cover;
    background-blend-mode: screen;
    opacity: 0.6;
    -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
            mask-image: linear-gradient(to bottom, #000 30%, transparent 95%);
}
/* Home, «Cada envío, registrado y a tu alcance» */
.con-foto--equipo  { --foto: image-set(url("/assets/img/fondos/equipo-1920.webp") 1x, url("/assets/img/fondos/equipo-2880.webp") 2x); }
/* Producto › Verifactu, preguntas frecuentes */
.con-foto--reunion { --foto: image-set(url("/assets/img/fondos/reunion-1920.webp") 1x, url("/assets/img/fondos/reunion-2880.webp") 2x); }
/* Precios, «¿Qué plan te encaja?» */
.con-foto--pizarra { --foto: image-set(url("/assets/img/fondos/pizarra-1920.webp") 1x, url("/assets/img/fondos/pizarra-2880.webp") 2x); }
/* Producto › Verifactu, «Tú facturas. Del resto nos encargamos nosotros.» */
.con-foto--oficina { --foto: image-set(url("/assets/img/fondos/oficina-1920.webp") 1x, url("/assets/img/fondos/oficina-2880.webp") 2x); }
/* Producto › Funcionalidades, «Lo que funciona hoy» */
.con-foto--pantalla { --foto: image-set(url("/assets/img/fondos/pantalla-1920.webp") 1x, url("/assets/img/fondos/pantalla-2880.webp") 2x); }
/* Soluciones › Gestorías, «Así se pone en marcha» */
.con-foto--despacho { --foto: image-set(url("/assets/img/fondos/despacho-1920.webp") 1x, url("/assets/img/fondos/despacho-2880.webp") 2x); }
/* Producto › Panel de control, preguntas sobre el panel */
.con-foto--portatiles { --foto: image-set(url("/assets/img/fondos/portatiles-1920.webp") 1x, url("/assets/img/fondos/portatiles-2880.webp") 2x); }
/* Recursos: el CTA final de cada página (Preguntas, Guías, Estado y Seguridad), con una foto distinta */
.con-foto--recepcion { --foto: image-set(url("/assets/img/fondos/recepcion-1920.webp") 1x, url("/assets/img/fondos/recepcion-2880.webp") 2x); }
.con-foto--estudio { --foto: image-set(url("/assets/img/fondos/estudio-1920.webp") 1x, url("/assets/img/fondos/estudio-2880.webp") 2x); }
.con-foto--servidores { --foto: image-set(url("/assets/img/fondos/servidores-1920.webp") 1x, url("/assets/img/fondos/servidores-2880.webp") 2x); }
.con-foto--manos { --foto: image-set(url("/assets/img/fondos/manos-1920.webp") 1x, url("/assets/img/fondos/manos-2880.webp") 2x); }
/* Soluciones › Pymes y autónomos, preguntas frecuentes */
.con-foto--mostrador { --foto: image-set(url("/assets/img/fondos/mostrador-1920.webp") 1x, url("/assets/img/fondos/mostrador-2880.webp") 2x); }

/* --------------------------- Página 404 (.nf) ---------------------------
   Un «404» enorme en el color de marca que se desvanece hacia abajo, con el titular
   montado encima de la parte que se desvanece, y dos botones con icono. El
   desvanecido es una máscara de opacidad (negro = visible), no un degradado de
   color: la tinta sigue siendo --brand liso. */
.nf { min-height: 68vh; display: flex; align-items: center; padding-block: var(--sp-8); }
.nf > .container { width: 100%; }
.nf__code {
    font-family: var(--font-display);
    font-weight: var(--fw-heavy);
    font-size: clamp(7.5rem, 26vw, 15rem);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--brand);
    font-variant-numeric: tabular-nums;
    user-select: none;
    -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 85%);
            mask-image: linear-gradient(to bottom, black 20%, transparent 85%);
}
.nf__title { margin-top: -0.7em; font-size: var(--fs-h2); position: relative; }
.nf__text { margin: var(--sp-3) auto 0; max-width: 44ch; color: var(--body); font-size: var(--fs-lead); }
.nf__actions { margin-top: var(--sp-6); display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
@media (max-width: 520px) { .nf__actions .btn { width: 100%; } }

/* ------------------------- Movimiento de entrada -------------------------
   Inspirado en acctual.com. Cuatro efectos, todos de una sola vez y sin bucles:
   1. La factura de la portada sube girada 6° y se asienta con un muelle.
   2. Las baldosas de icono de las tarjetas «saltan» al entrar en pantalla: vienen de
      más abajo, al 75 % y transparentes. app.js les pone .aparece solo si están por
      debajo de la pantalla al cargar (lo ya visible no parpadea) y .is-visible al llegar.
   3. La franja de garantías se desliza un poco en horizontal al hacer scroll (app.js).
   4. El icono de una tarjeta crece y se ladea al pasar el ratón por ella.
   Con prefers-reduced-motion no se anima nada (el JS ni marca y el bloque de abajo corta
   las transiciones y la animación de la factura). */
@supports (transition-timing-function: linear(0, 1)) {
    .factura { animation: factura-entra var(--t-entrada) var(--ease-spring) both; }
    .aparece {
        opacity: 0;
        transform: translateY(50px) scale(.75);
        transition: opacity 400ms var(--ease-out), transform var(--t-entrada) var(--ease-spring);
        transition-delay: var(--retraso, 0ms);
    }
    .aparece.is-visible { opacity: 1; transform: none; }
    /* Solo el dibujo, no la baldosa ni la tarjeta: no promete un clic. */
    .card__icon svg { transition: transform 600ms var(--ease-spring); }
    .card:hover .card__icon svg { transform: scale(1.2) rotate(12deg); }
}
@keyframes factura-entra {
    from { transform: translateY(50px) rotate(6deg); }
}

/* ------------------------------- Acceso --------------------------------
   Pantalla /acceder (Acceso/Views/index.php, assets/js/acceso.js). Dos columnas a toda
   la ventana: a la izquierda el logo, el formulario y el pie; a la derecha solo dibujo
   (un personaje de Open Peeps, volteado para mirar al formulario) sobre verde muy claro.
   La derecha no lleva ningún texto a propósito: toda la información va a la izquierda
   para que la vista no salte de un lado a otro. En móvil la escena queda como una franja
   arriba. Ver DESARROLLO.md § «Acceso». */
.acceso { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); background: var(--paper); }
.acceso__col { display: flex; flex-direction: column; padding: var(--sp-6) clamp(1.25rem, 5vw, 4.5rem) var(--sp-5); }
.acceso__top { display: flex; align-items: center; gap: var(--sp-4); }
.acceso__volver { margin-left: auto; font-size: var(--fs-sm); color: var(--muted); text-decoration: none; }
.acceso__volver:hover { color: var(--brand); }
.acceso__caja { width: 100%; max-width: 26.25rem; margin: auto; padding-block: var(--sp-7); }
.acceso__panel { animation: acceso-entra 0.35s cubic-bezier(.2, .8, .2, 1); }
@keyframes acceso-entra { from { opacity: 0; translate: 0 8px; } }
.acceso h1 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.5rem); line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); font-family: var(--font-display); font-weight: var(--fw-heavy); text-wrap: balance; }
.acceso__sub { margin-top: var(--sp-3); font-size: 1.03rem; line-height: 1.55; color: var(--muted); }
.acceso__sub b { color: var(--ink); font-weight: 650; overflow-wrap: anywhere; }
.acceso__form { margin-top: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-4); }
.acceso__campo { display: flex; flex-direction: column; gap: 0.45rem; }
.acceso__campo label, .acceso__etiqueta { font-size: var(--fs-sm); font-weight: 650; color: var(--ink); }
.acceso__input { width: 100%; height: 3.25rem; padding: 0 var(--sp-4); font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line-strong); border-radius: 12px; transition: border-color 0.15s, box-shadow 0.15s; }
.acceso__input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-copy); }
.acceso__input[aria-invalid="true"] { border-color: var(--danger); }
.acceso__clave { position: relative; }
.acceso__clave .acceso__input { padding-right: 3.25rem; }
.acceso__ver { position: absolute; right: 6px; top: 6px; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.acceso__ver:hover { color: var(--ink); background: var(--surface); }
.acceso__ver .ico { width: 20px; height: 20px; stroke-width: 2; }
.acceso__btn { height: 3.25rem; border: 0; border-radius: var(--radius-pill); background: var(--brand); color: var(--white); font: inherit; font-size: 1.03rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; transition: background 0.15s; }
.acceso__btn:hover { background: var(--brand-600); }
.acceso__btn[disabled] { opacity: 0.75; cursor: wait; }
.acceso__btn.is-cargando::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--white) 40%, transparent); border-top-color: var(--white); animation: acceso-gira 0.7s linear infinite; }
@keyframes acceso-gira { to { rotate: 360deg; } }
.acceso__enlaces { display: flex; flex-wrap: wrap; gap: 0.4rem var(--sp-5); font-size: 0.92rem; }
.acceso__enlace { padding: 0; border: 0; background: none; font: inherit; font-weight: 650; color: var(--brand); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.acceso__enlace:hover { color: var(--brand-700); }
.acceso__enlace[aria-disabled="true"] { color: var(--muted); font-weight: 500; text-decoration: none; cursor: default; }
.acceso__o { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--muted); }
.acceso__o::before, .acceso__o::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.acceso__form > .acceso__enlace { align-self: center; }
.acceso__pista, .acceso__error { display: flex; gap: 0.6rem; align-items: flex-start; padding: var(--sp-3) var(--sp-4); border-radius: 12px; font-size: var(--fs-sm); line-height: 1.5; }
.acceso__pista { background: var(--brand-copy-soft); color: var(--body); }
.acceso__pista .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; stroke-width: 2; color: var(--brand); }
.acceso__error { background: var(--danger-tint); color: var(--danger); font-weight: 550; }
.acceso__pista[hidden], .acceso__error[hidden] { display: none; }
.acceso__caja .acceso__error:not(form .acceso__error) { margin-top: var(--sp-5); }
.acceso__nota { font-size: var(--fs-xs); color: var(--muted); }
.acceso__pie { margin-top: auto; font-size: var(--fs-sm); color: var(--muted); }
.acceso__pie a { color: var(--brand); font-weight: 650; }

/* Casillas del código: seis, en monoespaciada; tiemblan si el código no vale. */
.acceso__codigo { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-2); }
.acceso__digito { width: 100%; height: 3.9rem; text-align: center; font-family: var(--font-mono); font-size: 1.6rem; font-weight: 600; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line-strong); border-radius: 12px; caret-color: var(--brand); transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; }
.acceso__digito:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-copy); }
.acceso__digito.is-lleno { background: var(--brand-copy-soft); border-color: var(--brand); }
.acceso__codigo.is-mal { animation: acceso-tiembla 0.4s; }
.acceso__codigo.is-mal .acceso__digito { border-color: var(--danger); background: var(--danger-tint); }
@keyframes acceso-tiembla { 20%, 60% { translate: -6px 0; } 40%, 80% { translate: 6px 0; } }

.acceso__hecho { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.acceso__hecho .acceso__sub { margin-top: 0; }
.acceso__tick { width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--white); animation: acceso-pop 0.5s cubic-bezier(.3, 1.6, .5, 1); }
.acceso__tick .ico { width: 30px; height: 30px; stroke-width: 3; }
@keyframes acceso-pop { from { opacity: 0; scale: 0.3; } }
.acceso__barra { width: 100%; height: 6px; border-radius: 3px; background: var(--brand-copy); overflow: hidden; }
.acceso__barra i { display: block; width: 0; height: 100%; background: var(--brand); animation: acceso-llena 1s ease-in-out forwards; }
@keyframes acceso-llena { to { width: 100%; } }

/* La escena: solo dibujo. El sobre y el check los enciende el script (is-visible / is-hecho). */
.acceso__escena { position: relative; overflow: hidden; background: var(--brand-copy-soft); border-left: 1.5px solid var(--brand-copy); }
.acceso__disco { position: absolute; left: 50%; bottom: -12%; width: min(74%, 36rem); aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: var(--brand-copy); }
.acceso__persona { position: absolute; left: 50%; bottom: -2px; width: auto; max-width: none; height: min(66%, 34rem); translate: -50% 0; scale: -1 1; animation: acceso-respira 6s ease-in-out infinite; }
@keyframes acceso-respira { 50% { transform: translateY(-6px); } }
.acceso__icono {
    position: absolute; left: calc(50% - min(12vw, 10rem) - 5.25rem); top: 30%; width: 5.25rem; height: 5.25rem; display: grid; place-items: center;
    border-radius: 24px; background: var(--paper); border: 2.5px solid var(--ink); color: var(--brand); box-shadow: var(--shadow-pop);
    opacity: 0; transform: translateY(-24px) rotate(-8deg) scale(0.8); transition: opacity 0.45s, transform 0.6s cubic-bezier(.2, 1.4, .4, 1);
}
.acceso__icono.is-visible { opacity: 1; transform: rotate(-6deg); }
.acceso__icono .ico { width: 40px; height: 40px; stroke-width: 2; }
.acceso__ok { display: none; }
.acceso__icono.is-hecho { background: var(--brand); color: var(--white); }
.acceso__icono.is-hecho .acceso__ok { display: block; stroke-width: 2.6; }
.acceso__icono.is-hecho .acceso__sobre { display: none; }
.acceso__suelo { position: absolute; left: 0; right: 0; bottom: 0; height: 2.5px; background: var(--ink); }

@media (max-width: 900px) {
    .acceso { grid-template-columns: minmax(0, 1fr); }
    .acceso__escena { order: -1; height: 11.5rem; border-left: 0; border-bottom: 1.5px solid var(--brand-copy); }
    .acceso__disco { width: 16rem; bottom: -7rem; }
    .acceso__persona { height: 11.5rem; }
    .acceso__icono { left: calc(50% - 8.5rem); top: 1.5rem; width: 3.6rem; height: 3.6rem; border-radius: 16px; }
    .acceso__icono .ico { width: 28px; height: 28px; }
    .acceso__caja { padding-block: var(--sp-6); }
}
@media (prefers-reduced-motion: reduce) {
    .acceso__persona { animation: none; }
}

/* ------------------------- Movimiento reducido ------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
}

/* =========================== Portada: hablamos ===========================
   La pieza de /contacto (Contacto/Views/partials/bloque.php) al final de la portada, sin la
   multitud: misma rejilla, mismos temas y misma hoja, para que haya continuidad. */
.contacto--portada { padding-top: var(--sp-8); }
.contacto--portada .contacto__titulo { font-size: var(--fs-h1); }
#hablamos { scroll-margin-top: 80px; }

/* =========================== reCAPTCHA (contacto) ===========================
   La casilla «No soy un robot» (Google la dibuja en un iframe de 304 × 78 px). En móviles
   muy estrechos se escala para que no saque la página de ancho. */
.recaptcha { margin-bottom: var(--sp-4); }
.recaptcha__casilla { min-height: 78px; }
.recaptcha__error:empty { display: none; }
@media (max-width: 360px) { .recaptcha__casilla { transform: scale(0.88); transform-origin: 0 0; } }

/* ----------------------- Heros a la medida de la pantalla ----------------------- */
/* Regla (25/09/2026): el hero entero (titular, botones y su animación) se ve al entrar,
   sin bajar, en cualquier ventana de 600 px de alto o más; el portátil de 1366×768 con el
   navegador abierto deja unos 630. Las escenas medían en px fijos y solo se encogían por
   el ancho, así que en pantallas bajas la animación quedaba por debajo del pliegue.
   - Las escenas de piezas HTML (calle de pymes, selladora, tendedero, factura de la
     portada) se encogen con `zoom` por escalones de alto, y se quedan con el menor entre
     ese y el de ancho que ya tenían: `min(--zoom-ancho, --zoom-alto)`. Donde el navegador
     no entiende `min()` en `zoom`, se queda solo el de ancho, como antes.
   - Los dibujos SVG (laboratorio, producto) no necesitan escalones: su alto se limita
     con `svh` y el SVG se escala solo.
   - En ventanas bajas se recorta el aire del hero (márgenes), nunca el texto.
   La portada en móvil queda fuera a propósito: el titular manda y la factura va debajo.
   Los números salen de medir con Playwright; para revisarlos, DESARROLLO.md § Heros a la medida de la pantalla. */
@supports (zoom: min(1, 0.5)) {
    .pym-calle, .selladora__escena, .tendedero__escena, .hero__escena { zoom: min(var(--zoom-ancho, 1), var(--zoom-alto, 1)); }
}
@media (max-height: 800px) {
    .page-hero.pym-hero, .page-hero.page-hero--selladora, .page-hero.page-hero--precios { padding-top: var(--sp-5); }
    .pym-hero .hero__cta { margin-top: var(--sp-4); }
    .pym-calle { margin-top: var(--sp-3); }
    .selladora { margin-top: var(--sp-5); }
    .selladora__escena { --zoom-alto: 0.86; }
    .tendedero { margin-top: var(--sp-4); }
    .lab-cab { padding-top: var(--sp-5); }
    .lab-banco { margin-top: var(--sp-3); }
}
@media (max-height: 720px) {
    .selladora__escena { --zoom-alto: 0.7; }
    .tendedero__escena { --zoom-alto: 0.86; }
}
@media (max-height: 660px) {
    .selladora__escena { --zoom-alto: 0.53; }
    .tendedero__escena { --zoom-alto: 0.69; }
}
/* Calle de pymes: aquí la acera y el alféizar de las tiendas pueden quedar bajo el borde de
   la ventana; lo que se ve entero son las personas, los toldos y la factura. Así el dibujo
   se encoge mucho menos. Cada escalón vale para el alto más bajo de su tramo (medido a
   390, 1024, 1366 y 1920 de ancho). */
@media (max-height: 850px) { .pym-calle { --zoom-alto: 0.95; } }
@media (max-height: 800px) { .pym-calle { --zoom-alto: 0.94; } }
@media (max-height: 760px) { .pym-calle { --zoom-alto: 0.86; } }
@media (max-height: 720px) { .pym-calle { --zoom-alto: 0.8; } }
@media (max-height: 690px) { .pym-calle { --zoom-alto: 0.74; } }
@media (max-height: 660px) { .pym-calle { --zoom-alto: 0.7; } }
@media (max-height: 640px) { .pym-calle { --zoom-alto: 0.68; } }
@media (max-height: 630px) { .pym-calle { --zoom-alto: 0.66; } }
@media (max-height: 620px) { .pym-calle { --zoom-alto: 0.61; } }
@media (max-height: 600px) { .pym-calle { --zoom-alto: 0.57; } }
/* Móvil bajo: la selladora ya va al 50 % por el ancho; un paso más y menos margen. */
@media (max-width: 480px) and (max-height: 660px) {
    .selladora { margin-top: var(--sp-3); }
    .selladora__escena { --zoom-alto: 0.42; }
}
/* El banco del laboratorio (`slice`): con menos alto, el dibujo se escala con él. */
.lab-banco { height: clamp(220px, 100svh - 360px, 370px); }
@media (min-width: 901px) {
    /* Portada: la factura y la gente, a la altura del texto. */
    @media (max-height: 800px) { .hero { padding-top: var(--sp-6); } }
    @media (max-height: 720px) { .hero__escena { --zoom-alto: 0.9; } }
    @media (max-height: 660px) { .hero__escena { --zoom-alto: 0.8; } }
    @media (max-height: 620px) { .hero__escena { --zoom-alto: 0.76; } }
    /* Producto: menos aire y el dibujo, como mucho, lo que quede de pantalla. */
    @media (max-height: 800px) { .page-hero.page-hero--dibujo { padding-block: var(--sp-6); min-height: 0; } }
    .dibujo svg { max-height: calc(100svh - 80px - 2 * var(--sp-6)); }
}
/* Producto en móvil: el dibujo va debajo del texto; en teléfonos bajos, menos aire y el
   dibujo algo más pequeño para que asome entero. */
@media (max-width: 900px) and (max-height: 700px) {
    .page-hero.page-hero--dibujo { padding-block: var(--sp-5); }
    .page-hero--dibujo .hero__inner { gap: var(--sp-4); }
    .dibujo svg { max-height: 11rem; }
}