/* ============================================================================
   ALTA DE NEGOCIO — /registrar-negocio, /personalizar-negocio, /comenzar y
   «Primeros pasos» (/bienvenida)
   ============================================================================
   Rediseño de septiembre de 2026. El alta pasó de un formulario de nueve
   elementos (con el picker de Google Maps dentro) a pantallas de una pregunta:
   cuenta → giro → datos mínimos, y DESPUÉS un cuestionario de cuatro toques que
   guarda cada respuesta al instante. El detalle del porqué vive en el plan del
   rediseño; aquí sólo lo que hace falta para que la hoja no se degrade:

   REGLAS
   · Nada de hex ni rgba() crudos. Los --ic-* voltean solos con data-theme; un
     rgba(108,125,255,…) no. Lo vigila SustratoVisualTests (esta hoja está en
     su barrido). Los tintes van con color-mix(in srgb, var(--token) N%, transparent).
   · Mínimo táctil 48px (--ic-touch-min). Las opciones del cuestionario 56px.
   · Sin `transition` sobre color ni background: una transición sobre un token
     se queda colgada cuando el conmutador de tema cambia --ic-* con la pestaña
     en segundo plano (medido en el banco de /seleccionar-negocio).
   · Inputs a 17px: por debajo de 16px iOS hace zoom al enfocar; 17 es lo que
     ya usaba el registro «senior-friendly» y se conserva.
   · El CTA relleno va a 19px/700: blanco sobre --ic-primary da ~3.3:1 en tema
     OSCURO, que sólo cumple AA como texto grande (≥18.66px en negrita). Es la
     misma regla que .cg-fin__cta en catalogo-global.css. No bajar de ese tamaño
     ni de ese peso sin cambiar antes el color de fondo.
   · --lc-err/--lc-ok llegan de lista-cards.css, que carga en diferido; el respaldo
     es la paleta de MudBlazor (también voltea con el tema), nunca un hex.
   · Superficies con div y clases propias, no MudCard: los componentes Mud sólo
     donde su comportamiento es el valor (campos, iconos, diálogos).
   ========================================================================== */

/* ── Iconos ─────────────────────────────────────────────────────────────── */

.alta .mud-icon-root,
.pp .mud-icon-root { font-size: 20px; }

.alta .alta__bar-back .mud-icon-root { font-size: 24px; }
.alta .alta__opt-ic .mud-icon-root { font-size: 22px; }
.alta .alta__opt-chev .mud-icon-root { font-size: 18px; }
.alta .alta__opt-check .mud-icon-root { font-size: 22px; }
.alta .alta__aside-item .mud-icon-root { font-size: 18px; }
.pp .pp__ic .mud-icon-root { font-size: 22px; }

/* ── Lienzo ─────────────────────────────────────────────────────────────── */

.alta {
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--ic-bg);
    background-image: radial-gradient(color-mix(in srgb, var(--ic-primary) 10%, transparent) 1px, transparent 1px);
    background-size: 28px 28px;
    padding:
        calc(56px + env(safe-area-inset-top, 0px) + var(--ic-space-4))
        max(var(--ic-space-4), env(safe-area-inset-right, 0px))
        max(var(--ic-space-8), env(safe-area-inset-bottom, 0px))
        max(var(--ic-space-4), env(safe-area-inset-left, 0px));
    overflow-x: clip;
    color: var(--ic-text);
}

/* Variante sin barra fija (/comenzar): el contenido se centra en vertical. */
.alta--centrado {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: max(var(--ic-space-6), env(safe-area-inset-top, 0px));
}

/* Centrado en vertical conservando el hueco de la barra fija, que es lo que
   .alta--centrado NO hace (anula el padding superior porque /comenzar no tiene barra).
   Va con modificador y no en .alta porque /comenzar y /personalizar-negocio comparten
   estas clases y no se tocan.

   El centrado se consigue con `margin:auto` en el hijo y NO con align-items:center: con
   align-items, un contenido más alto que la ventana se recorta por ARRIBA y esa parte
   queda inalcanzable (el paso de datos, en móvil, con el teclado abierto). */
.alta--centrado-v { display: flex; }
.alta--centrado-v > .alta__wrap { margin: auto; }

/* ── Barra superior fija: atrás + título + progreso ─────────────────────── */

.alta__bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1300;
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) var(--ic-space-3) 0 var(--ic-space-1);
    display: flex;
    align-items: center;
    gap: var(--ic-space-1);
    background: var(--ic-chrome-bg);
    -webkit-backdrop-filter: var(--ic-chrome-blur);
    backdrop-filter: var(--ic-chrome-blur);
    border-bottom: 1px solid var(--ic-chrome-border);
}

.alta__bar-back {
    flex-shrink: 0;
    width: var(--ic-touch-min);
    height: var(--ic-touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--ic-radius-md);
    background: transparent;
    color: var(--ic-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.alta__bar-back:hover { background: var(--ic-interactive-hover); }

/* Cuando el atrás vive abajo, la flecha no se dibuja: sin este hueco el título se corría
   48px a la izquierda y saltaba de sitio al cambiar de paso. */
.alta__bar-spacer { flex-shrink: 0; width: var(--ic-touch-min); }

.alta__bar-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Progreso segmentado: un tramo por paso, como la tira de arriba del competidor,
   pero pegado a la barra y no a la tarjeta (en móvil no hay tarjeta). */
.alta__progress {
    flex: 0 1 auto;
    display: flex;
    gap: 5px;
    width: min(38vw, 160px);
}

/* A 320px el título se quedaba en ~126px y se cortaba a media palabra. El progreso cede
   primero: es una señal de avance, no información que haya que leer. */
@media (max-width: 359px) {
    .alta__progress { width: min(28vw, 96px); }
}

.alta__seg {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--ic-border);
}

.alta__seg--on { background: var(--ic-primary); }

/* ── Columna ────────────────────────────────────────────────────────────── */

.alta__wrap {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-6);
}

/* En escritorio el aside de beneficios va al lado; en móvil, debajo. */
@media (min-width: 960px) {
    .alta__wrap--con-aside {
        max-width: 860px;
        flex-direction: row;
        align-items: flex-start;
        gap: var(--ic-space-8);
    }

    .alta__wrap--con-aside .alta__main { flex: 1 1 auto; min-width: 0; max-width: 520px; }
    .alta__wrap--con-aside .alta__aside { flex: 0 0 280px; position: sticky; top: calc(56px + var(--ic-space-6)); }
}

.alta__main {
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-4);
}

/* ── Pregunta ───────────────────────────────────────────────────────────── */

.alta__eyebrow {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ic-primary);
}

.alta__title {
    margin: 0;
    font-size: 1.625rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ic-text);
    /* Schibsted a 700 compone más ancho que Inter: un nombre de negocio largo
       envuelve a tres líneas y eso está previsto, no roto. */
    overflow-wrap: anywhere;
}

.alta__sub {
    margin: 0;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--ic-muted);
}

.alta__q { display: flex; flex-direction: column; gap: var(--ic-space-2); }

/* ── Opciones (una pregunta = una lista de botones) ─────────────────────── */

.alta__options {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ic-space-2);
}

.alta__opt {
    display: flex;
    align-items: center;
    gap: var(--ic-space-3);
    width: 100%;
    min-height: 56px;
    padding: 12px var(--ic-space-4);
    text-align: left;
    font-family: inherit;
    border: 1.5px solid var(--ic-border);
    border-radius: 14px;
    background: var(--ic-surface);
    color: var(--ic-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.alta__opt:hover { border-color: color-mix(in srgb, var(--ic-primary) 55%, var(--ic-border)); }
.alta__opt:active { transform: scale(0.995); }
/* Un solo anillo para todo lo que se puede enfocar. Antes sólo lo declaraba .alta__opt y el
   resto caía en el del navegador, que cambia de forma y color entre motores. */
.alta__opt:focus-visible,
.alta__cta:focus-visible,
.alta__ghost:focus-visible,
.alta__link:focus-visible,
.alta__bar-back:focus-visible,
.alta__back:focus-visible,
.alta__foot a:focus-visible,
.cmz-option:focus-visible,
.pp__cta:focus-visible {
    outline: 2px solid var(--ic-primary);
    outline-offset: 2px;
}

/* El titular recibe el foco al cambiar de pregunta para que el lector lo anuncie; ahí el anillo
   no aporta nada porque el usuario no ha navegado hasta él. */
.alta__title:focus { outline: none; }

/* El anillo va en la tarjeta, no en el radio escondido, que es quien recibe el foco. */
.alta__opt:has(.alta__opt-radio:focus-visible) {
    outline: 2px solid var(--ic-primary);
    outline-offset: 2px;
}

/* El radio real se esconde sin salir del árbol de foco: con `display:none` se pierde la
   navegación con flechas dentro del grupo, que es justo lo que se quiere conservar. */
.alta__opt-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
}

.alta__opt--on {
    border-color: var(--ic-primary);
    background: color-mix(in srgb, var(--ic-primary) 10%, var(--ic-surface));
}

.alta__opt:disabled { opacity: 0.6; cursor: wait; }

.alta__opt-ic {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--ic-primary) 12%, transparent);
    color: var(--ic-primary);
}

.alta__opt--on .alta__opt-ic { background: var(--ic-primary); color: var(--ic-on-primary); }

.alta__opt-tx {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.alta__opt-tt {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
}

.alta__opt-dt {
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--ic-muted);
}

.alta__opt-chev { flex-shrink: 0; color: var(--ic-text-tertiary); }

/* El giro se elige y se confirma con «Continuar», así que lleva marca de selección y no
   chevron: un chevron promete que tocar navega. */
.alta__opt-check { flex-shrink: 0; color: var(--ic-text-tertiary); }
.alta__opt--on .alta__opt-check { color: var(--ic-primary); }

/* Giro: las tres cards también son opciones, con descripción más larga. */
.alta__opt--giro { align-items: flex-start; padding-top: 14px; padding-bottom: 14px; }
.alta__opt--giro .alta__opt-ic { margin-top: 2px; }

/* ── Campos ─────────────────────────────────────────────────────────────── */

.alta__fields { display: flex; flex-direction: column; gap: var(--ic-space-1); }

.alta .alta__field { margin-bottom: var(--ic-space-3) !important; }

.alta .mud-input > input.mud-input-slot,
.alta .mud-input > textarea.mud-input-slot,
.alta .mud-input .mud-select-input { font-size: 1.0625rem; }

.alta .mud-input-label { font-size: 1.0625rem; }

.alta .mud-input-helper-text,
.alta .mud-input-helper-text .mud-input-helper-text-inner { font-size: 0.875rem; }

/* Línea discreta «México · MXN · cambiar» bajo el WhatsApp. */
.alta__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ic-space-2);
    margin: calc(-1 * var(--ic-space-1)) 0 var(--ic-space-2);
    font-size: 0.9375rem;
    color: var(--ic-muted);
}

/* El área táctil se consigue con padding vertical y no con min-height: dentro de un párrafo,
   un inline-flex de 48px inflaba toda la caja de línea y descuadraba el texto de al lado. */
.alta__link {
    display: inline;
    padding: 14px 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ic-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.alta__link:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Acciones ───────────────────────────────────────────────────────────── */

.alta__actions {
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-2);
    margin-top: var(--ic-space-2);
}

.alta__cta {
    width: 100%;
    min-height: 52px;
    padding: 0 var(--ic-space-5);
    border: none;
    border-radius: 14px;
    background: var(--ic-primary);
    color: var(--ic-on-primary);
    font-family: inherit;
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ic-space-2);
    cursor: pointer;
    box-shadow: 0 8px 24px var(--ic-brand-ring);
    -webkit-tap-highlight-color: transparent;
}

.alta__cta:hover:not(:disabled) { filter: brightness(1.06); }
.alta__cta:active:not(:disabled) { transform: translateY(1px); }
.alta__cta:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.alta__cta .mud-icon-root { color: inherit; }
.alta__cta .mud-progress-circular { color: inherit; }

.alta__ghost {
    width: 100%;
    min-height: var(--ic-touch-min);
    padding: 0 var(--ic-space-4);
    border: 1px solid transparent;
    border-radius: 14px;
    background: transparent;
    color: var(--ic-muted);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.alta__ghost:hover:not(:disabled) { background: var(--ic-interactive-hover); color: var(--ic-text); }
.alta__ghost:disabled { opacity: 0.5; cursor: not-allowed; }

/* Atrás de los pasos que vuelven a otro paso de la misma página; en esos, la barra de
   arriba ya no dibuja su flecha. Discreto a propósito: compite con el CTA de al lado. */
.alta__back {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--ic-space-1);
    min-height: var(--ic-touch-min);
    padding: 0 var(--ic-space-3);
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--ic-muted);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.alta__back:hover { background: var(--ic-interactive-hover); color: var(--ic-text); }
.alta__back .mud-icon-root { color: inherit; }

.alta__note {
    margin: 0;
    text-align: center;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--ic-muted);
}

.alta__trust {
    display: flex;
    align-items: flex-start;
    gap: var(--ic-space-2);
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--ic-muted);
}

.alta__trust .mud-icon-root { flex-shrink: 0; color: var(--ic-primary); margin-top: 1px; }

/* ── Aviso de error ─────────────────────────────────────────────────────── */

.alta__error {
    display: flex;
    align-items: flex-start;
    gap: var(--ic-space-2);
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--lc-err, var(--mud-palette-error));
    background: color-mix(in srgb, var(--lc-err, var(--mud-palette-error)) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--lc-err, var(--mud-palette-error)) 35%, transparent);
}

.alta__error .mud-icon-root { flex-shrink: 0; margin-top: 1px; }

/* ── Cargando ───────────────────────────────────────────────────────────── */

.alta__loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ic-space-3);
    padding: var(--ic-space-8) 0;
    font-size: 0.9375rem;
    color: var(--ic-muted);
}

/* Bajo el botón de Google, donde el aviso va pegado a la acción y no centrado en la pantalla. */
.alta__loading--compacto { padding: var(--ic-space-2) 0; }

/* ── Pie de enlaces ─────────────────────────────────────────────────────── */

.alta__foot {
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-2);
    padding-top: var(--ic-space-4);
    border-top: 1px solid var(--ic-border);
}

.alta__foot p {
    margin: 0;
    text-align: center;
    font-size: 0.9375rem;
    color: var(--ic-muted);
}

.alta__foot a,
.alta__foot .alta__link { font-size: 0.9375rem; }

/* Los enlaces del pie son el único destino táctil de la hoja que se quedaba en la altura de
   línea (~20px). Se les da el mínimo sin romper el flujo del párrafo. */
.alta__foot a {
    display: inline-block;
    padding: 14px 0;
    color: var(--ic-primary);
    font-weight: 600;
    text-decoration: none;
}

.alta__foot a:hover { text-decoration: underline; }

/* ── Aside de beneficios (escritorio) ───────────────────────────────────── */

.alta__aside {
    background: var(--ic-surface);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-lg);
    padding: var(--ic-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-3);
}

.alta__aside-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.alta__aside-item {
    display: flex;
    align-items: flex-start;
    gap: var(--ic-space-3);
}

.alta__aside-item .mud-icon-root { flex-shrink: 0; color: var(--ic-primary); margin-top: 2px; }

.alta__aside-item strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.3;
}

.alta__aside-item span {
    display: block;
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--ic-muted);
}

.alta__aside-eta {
    margin: 0;
    padding-top: var(--ic-space-3);
    border-top: 1px solid var(--ic-border);
    font-size: 0.875rem;
    color: var(--ic-muted);
}

/* ── Resumen final del cuestionario ─────────────────────────────────────── */

.alta__summary {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ic-border);
    border-radius: 14px;
    background: var(--ic-surface);
    overflow: hidden;
}

.alta__summary li {
    display: flex;
    justify-content: space-between;
    gap: var(--ic-space-3);
    padding: 12px var(--ic-space-4);
    font-size: 0.9375rem;
    border-top: 1px solid var(--ic-border);
}

.alta__summary li:first-child { border-top: none; }
.alta__summary li span:first-child { color: var(--ic-muted); }
.alta__summary li span:last-child { font-weight: 600; text-align: right; }

/* ── Marca chica en el encabezado de /comenzar y /bienvenida ────────────── */

.alta__brand {
    display: flex;
    align-items: center;
    gap: var(--ic-space-3);
}

.alta__brand img {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
}

.alta__brand h1 {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    /* Aquí es donde entra el nombre del negocio: una sola palabra larga desbordaba en horizontal
       porque la fila es space-between y nadie declaraba min-width. */
    overflow-wrap: anywhere;
}

.alta__brand { min-width: 0; }
.alta__brand > div { min-width: 0; }

/* FocusOnNavigate enfoca el h1 al cargar para anunciarlo al lector de pantalla; el foco
   programático es correcto, pero el anillo visible sobra en un título no interactivo. */
.alta__brand h1:focus { outline: none; }

.alta__brand p {
    margin: 2px 0 0;
    font-size: 0.9375rem;
    color: var(--ic-muted);
}

/* ── /comenzar: decisión crear / unirse ─────────────────────────────────── */

.cmz-options {
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-3);
}

.cmz-option {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 72px;
    padding: var(--ic-space-4);
    text-align: left;
    border: 1.5px solid var(--ic-border);
    border-radius: 14px;
    background: var(--ic-surface);
    color: var(--ic-text);
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.cmz-option:hover { border-color: color-mix(in srgb, var(--ic-primary) 55%, var(--ic-border)); }
.cmz-option:active { transform: scale(0.995); }

.cmz-option__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--ic-primary) 12%, transparent);
    color: var(--ic-primary);
}

.cmz-option__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cmz-option__title { font-size: 1.0625rem; font-weight: 600; }
.cmz-option__desc { font-size: 0.875rem; line-height: 1.35; color: var(--ic-muted); }
.cmz-option__chev { flex-shrink: 0; color: var(--ic-text-tertiary); }

/* ============================================================================
   PRIMEROS PASOS — /bienvenida (dentro del chrome de la app)
   ========================================================================== */

.pp {
    width: 100%;
    max-width: 720px;
    overflow-x: clip;
    margin: 0 auto;
    padding: var(--ic-space-4) 0 var(--ic-space-8);
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-5);
    color: var(--ic-text);
}

.pp__head {
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-2);
}

.pp__head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ic-space-3);
}

.pp__progress {
    display: flex;
    align-items: center;
    gap: var(--ic-space-3);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ic-muted);
}

.pp__bar {
    flex: 1 1 auto;
    height: 6px;
    border-radius: 3px;
    background: var(--ic-border);
    overflow: hidden;
}

.pp__bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--ic-primary);
}

.pp__list {
    display: flex;
    flex-direction: column;
    gap: var(--ic-space-3);
}

.pp__item {
    display: flex;
    align-items: center;
    gap: var(--ic-space-3);
    padding: var(--ic-space-4);
    border: 1px solid var(--ic-border);
    border-radius: 14px;
    background: var(--ic-surface);
}

.pp__item--hero {
    flex-direction: column;
    align-items: stretch;
    gap: var(--ic-space-4);
    border: 1.5px solid var(--ic-primary);
    background: color-mix(in srgb, var(--ic-primary) 8%, var(--ic-surface));
}

.pp__item--done { opacity: 0.72; }

.pp__row {
    display: flex;
    align-items: center;
    gap: var(--ic-space-3);
}

.pp__ic {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--ic-primary) 12%, transparent);
    color: var(--ic-primary);
}

.pp__item--done .pp__ic { background: color-mix(in srgb, var(--lc-ok, var(--mud-palette-success)) 16%, transparent); color: var(--lc-ok, var(--mud-palette-success)); }
.pp__item--hero .pp__ic { background: var(--ic-primary); color: var(--ic-on-primary); }

.pp__tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.pp__tt {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
}

.pp__item--hero .pp__tt { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.pp__item--done .pp__tt { text-decoration: line-through; text-decoration-color: var(--ic-text-tertiary); }

.pp__dt {
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--ic-muted);
}

.pp__cta {
    flex-shrink: 0;
    min-height: var(--ic-touch-min);
    padding: 0 var(--ic-space-4);
    border: 1px solid var(--ic-border);
    border-radius: 12px;
    background: transparent;
    color: var(--ic-primary);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.pp__cta:hover:not(:disabled) { background: var(--ic-interactive-hover); }
.pp__cta:disabled { opacity: 0.5; cursor: not-allowed; }

.pp__item--hero .pp__cta {
    width: 100%;
    min-height: 52px;
    border: none;
    border-radius: 14px;
    background: var(--ic-primary);
    color: var(--ic-on-primary);
    font-size: 1.1875rem;
    box-shadow: 0 8px 24px var(--ic-brand-ring);
}

.pp__item--hero .pp__cta:hover:not(:disabled) { background: var(--ic-primary); filter: brightness(1.06); }

.pp__listo {
    display: flex;
    align-items: center;
    gap: var(--ic-space-3);
    padding: var(--ic-space-5);
    border-radius: 14px;
    border: 1.5px solid color-mix(in srgb, var(--lc-ok, var(--mud-palette-success)) 45%, transparent);
    background: color-mix(in srgb, var(--lc-ok, var(--mud-palette-success)) 10%, var(--ic-surface));
}

/* Mismo patrón que .pp__item--done: tinte del token, no relleno sólido. Con relleno, el blanco
   sobre el verde claro del tema oscuro daba 2.0:1, por debajo del 3:1 que pide un elemento
   gráfico — y esta es la pantalla de cierre del alta, con el tema oscuro por defecto. */
.pp__listo .pp__ic {
    background: color-mix(in srgb, var(--lc-ok, var(--mud-palette-success)) 20%, transparent);
    color: var(--lc-ok, var(--mud-palette-success));
}

/* ── «No tienes que hacerlo solo» ─────────────────────────────────────────────
   La oferta de sesión de arranque, al pie de la lista de primeros pasos. Va
   discreta a propósito: compite con el paso héroe, y si grita más que él
   convierte la página en un embudo a WhatsApp en vez de una lista de arranque. */
.pp__ayuda {
    display: flex;
    align-items: center;
    gap: var(--ic-space-3);
    margin-top: var(--ic-space-4);
    padding: var(--ic-space-4);
    border-radius: 14px;
    border: 1px dashed var(--ic-border);
    background: transparent;
}

.pp__ayuda-tx {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.pp__ayuda-tt {
    font-size: var(--ic-text-md);
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--ic-text);
}

.pp__ayuda-dt {
    font-size: var(--ic-text-xs);
    color: var(--ic-muted);
}

.pp__ayuda-cta {
    flex-shrink: 0;
    min-height: var(--ic-touch-min);
    padding: 0 var(--ic-space-4);
    border-radius: 10px;
    border: 1px solid var(--ic-border);
    background: var(--ic-surface);
    color: var(--ic-text);
    font-size: var(--ic-text-sm);
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
}

.pp__ayuda-cta:hover { background: var(--ic-interactive-hover); }

.pp__ayuda-cta:focus-visible {
    outline: 2px solid var(--ic-primary);
    outline-offset: 2px;
}

/* En móvil el CTA de cada fila baja a su propia línea: 390px no dan para
   icono + dos líneas de texto + botón. */
@media (max-width: 599px) {
    .pp__item:not(.pp__item--hero) { flex-wrap: wrap; }
    .pp__item:not(.pp__item--hero) .pp__cta { flex: 1 1 100%; margin-left: 56px; }
}

@media (max-width: 599px) {
    .pp__ayuda { flex-wrap: wrap; }
    .pp__ayuda-cta { flex: 1 1 100%; }
}