/* ============================================================================
   We Ötzi · Registro de artistas — capa de página sobre el DS Bauhaus
   Requiere: /shared/css/ds/tokens.css + /shared/css/ds/components.css
   Regla: cero hex sueltos — todo color sale de var(--token). Radius 0.
   Referencia visual: Figma "Registro de artistas" (acordeón de 7 grupos:
   72-12357 / 72-12438 / 72-12519 / 105-4935 / 72-12639 / 72-12764 /
   72-12865 / 72-12993 / 114-9006 / 72-13161).
   ========================================================================== */

/* ---------- Compat: variables legacy que register.js y las hojas
     address-picker.css / instagram-import.css consumen ---------- */
body.register-page{
    --primary-red:var(--red-300);
    --primary-yellow:var(--yellow-300);
    --primary-blue:var(--blue-400);
    --red:var(--red-300);
    --yellow:var(--yellow-300);
    --blue:var(--blue-400);
    --fg:var(--text-body);
    --mono:var(--font-mono);
    --sans:var(--font-body);
    --display:var(--font-display);
    --cream:var(--neutral-100);
    --bg:var(--surface-page);
    --font-technical:var(--font-mono);
    --text-secondary:var(--text-muted);
    --ink-2:var(--neutral-400);
    /* medidas propias del registro */
    --ra-content:760px;
    --ra-gutter:var(--space-8);
}

body.register-page{
    margin:0;
    background:var(--surface-page);
    color:var(--text-body);
    font-family:var(--font-body);
    min-height:100vh;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
}

/* Nodos que sólo existen como hooks de register.js */
.ra-legacy,
.ra-legacy-progress,
.register-footer{display:none !important}

/* ============================================================
   Topbar · marca + nav de los 7 grupos
   ============================================================ */
.ra-topbar{
    position:sticky;
    top:0;
    z-index:120;
    background:var(--surface-page);
    border-bottom:var(--border-strong-width) solid var(--border-strong);
    min-height:64px;
    gap:var(--space-4);
    overflow:visible;
}
.ra-topbar .wo-topbar-brand{
    gap:var(--space-3);
    padding:0 var(--space-6) 0 var(--space-5);
    font-size:19px;
    letter-spacing:0.01em;
}
.ra-nav{
    display:flex;
    align-items:center;
    gap:var(--space-4);
    flex:1;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    padding-right:var(--space-6);
    scrollbar-width:none;
}
.ra-nav::-webkit-scrollbar{display:none}
.ra-nav-item{
    display:inline-flex;
    align-items:center;
    gap:var(--space-1);
    flex:none;
    padding:0;
    background:transparent;
    border:0;
    border-radius:var(--radius-none);
    font-family:var(--font-mono);
    font-size:11px;
    font-weight:var(--weight-regular);
    letter-spacing:0.1em;
    text-transform:uppercase;
    white-space:nowrap;
    color:var(--text-faint);
    cursor:default;
}
.ra-nav-item.is-done{color:var(--blue-400);cursor:pointer}
.ra-nav-item.is-done:hover{color:var(--blue-500)}
.ra-nav-item.is-active{color:var(--ink);font-weight:var(--weight-bold)}
/* El check sólo aparece en los grupos ya completados */
.ra-check{display:none}
.ra-nav-item.is-done .ra-check,
.ra-row-eyebrow .ra-check{
    display:inline-block;
    position:relative;
    width:9px;
    height:9px;
    margin-right:var(--space-1);
    flex:none;
}
.ra-nav-item.is-done .ra-check::before,
.ra-row-eyebrow .ra-check::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:8px;
    height:4px;
    border-left:var(--border-hairline) solid currentColor;
    border-bottom:var(--border-hairline) solid currentColor;
    transform:rotate(-45deg);
}

/* ============================================================
   Contenedor y cabecera de página
   ============================================================ */
.register-container{
    width:100%;
    max-width:calc(var(--ra-content) + var(--ra-gutter) * 2);
    margin:0 auto;
    padding:var(--space-12) var(--ra-gutter) var(--space-16);
    box-sizing:border-box;
    flex:1;
}
.ra-intro-eyebrow{
    margin:0 0 var(--space-3);
    font-family:var(--font-mono);
    font-size:var(--meta-m-size);
    letter-spacing:var(--meta-lead-track);
    text-transform:uppercase;
    color:var(--text-faint);
}
.ra-intro-title{
    margin:0 0 var(--space-4);
    font-family:var(--font-display);
    font-size:var(--title-xl-size);
    line-height:1.06;
    letter-spacing:var(--h1-track);
    color:var(--text-heading);
}
.ra-intro-lead{
    margin:0;
    max-width:520px;
    font-size:17px;
    line-height:1.5;
    color:var(--text-muted);
}
.ra-intro-rule{
    margin:var(--space-10) 0 0;
    border:0;
    border-top:var(--border-strong-width) solid var(--border-strong);
}

/* ============================================================
   Grupos · fila resumen (colapsado) y panel (activo)
   ============================================================ */
.ra-group{display:block}
/* El acordeon se controla con el atributo [hidden] desde register.js: cualquier
   regla de display propia lo pisaria, asi que se restituye explicitamente. */
.ra-group[hidden],.ra-row[hidden],.ra-panel[hidden]{display:none}
.ra-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:var(--space-5);
    padding:var(--space-5) 0 var(--space-4);
    border-bottom:var(--border-hairline) solid var(--border-strong);
}
.ra-row-main{min-width:0}
.ra-row-eyebrow{
    display:flex;
    align-items:center;
    margin:0 0 var(--space-2);
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--blue-400);
}
.ra-row-value{
    margin:0;
    font-family:var(--font-display);
    font-size:19px;
    line-height:1.25;
    color:var(--text-heading);
    overflow-wrap:anywhere;
}
.ra-edit{
    flex:none;
    padding:0;
    background:transparent;
    border:0;
    border-radius:var(--radius-none);
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--blue-400);
    cursor:pointer;
}
.ra-edit:hover{color:var(--blue-500);text-decoration:underline}

.ra-panel{padding:var(--space-8) 0 var(--space-4)}
.ra-eyebrow{
    margin:0 0 var(--space-3);
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--text-heading);
}
.ra-title{
    margin:0 0 var(--space-6);
    font-family:var(--font-display);
    font-size:var(--title-sm-size);
    line-height:1.15;
    letter-spacing:var(--h2-track);
    color:var(--text-heading);
}
.ra-hint{
    margin:0 0 var(--space-4);
    font-size:var(--body-s-size);
    line-height:1.5;
    color:var(--text-muted);
}
.ra-sublabel{
    margin:var(--space-6) 0 var(--space-3);
    font-size:var(--body-s-size);
    color:var(--text-muted);
}
.ra-error{
    margin:var(--space-4) 0 0;
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--status-error-fg);
}

/* ---------- Campos ---------- */
.ra-fields{
    display:grid;
    grid-template-columns:1fr;
    gap:var(--space-5) var(--space-5);
    align-items:start;
}
.ra-fields--2col{grid-template-columns:1fr 1fr}
.ra-fields--2col .ra-field:nth-child(3){grid-column:1}
.ra-fields--narrow{max-width:420px}
.ra-fields--price{grid-template-columns:minmax(0,258px) minmax(0,164px);margin-top:var(--space-6)}
.ra-field{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.ra-label{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--text-muted);
}
.form-input,
.ra-input,
.ra-textarea,
.currency-select,
.studio-location-select{
    width:100%;
    box-sizing:border-box;
    min-height:var(--control-h-lg);
    background:var(--surface-input);
    border:var(--border-hairline) solid var(--border-strong);
    border-radius:var(--radius-none);
    padding:var(--space-4);
    font-family:var(--font-body);
    font-size:var(--body-m-size);
    line-height:1.4;
    color:var(--text-heading);
}
.ra-textarea{min-height:100px;resize:vertical;line-height:var(--body-m-lh)}
.form-input::placeholder,
.ra-input::placeholder,
.ra-textarea::placeholder{color:var(--text-faint)}
.form-input:hover,
.ra-input:hover,
.ra-textarea:hover,
.currency-select:hover,
.studio-location-select:hover{background:var(--surface-input-hover)}
.form-input:focus,
.ra-input:focus,
.ra-textarea:focus,
.currency-select:focus,
.studio-location-select:focus{
    background:var(--white);
    border:var(--border-strong-width) solid var(--border-strong);
    padding:calc(var(--space-4) - 1px);
    outline:none;
}
.form-input.error,
.ra-input.error{border:var(--border-strong-width) solid var(--system-error);padding:calc(var(--space-4) - 1px)}
.currency-select,
.studio-location-select{
    appearance:none;
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2324211D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right var(--space-4) center;
    padding-right:var(--space-10);
    cursor:pointer;
}
/* Dirección: sombra dura cuando tiene foco o valor (frame 72-12764) */
.ra-input--hard:focus,
.ra-input--hard.has-value{box-shadow:var(--shadow-hard-sm)}

/* Prefijos dentro del campo */
.price-input-row,
.instagram-input-row,
.password-input-row,
.ra-inline-add{
    display:flex;
    align-items:center;
    gap:0;
    position:relative;
}
.price-prefix,
.instagram-prefix{
    position:absolute;
    left:var(--space-4);
    font-family:var(--font-body);
    font-size:var(--body-m-size);
    color:var(--text-heading);
    pointer-events:none;
}
.price-input-row .form-input,
.instagram-input-row .form-input{padding-left:var(--space-8)}
.price-input-row .form-input:focus,
.instagram-input-row .form-input:focus{padding-left:calc(var(--space-8) - 1px)}
.price-input{appearance:textfield;-moz-appearance:textfield}
.price-input::-webkit-outer-spin-button,
.price-input::-webkit-inner-spin-button{appearance:none;margin:0}

.password-toggle{
    position:absolute;
    right:var(--space-3);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:var(--control-h-sm);
    height:var(--control-h-sm);
    background:transparent;
    border:0;
    border-radius:var(--radius-none);
    color:var(--text-muted);
    cursor:pointer;
}
.password-toggle:hover{color:var(--text-heading)}
.password-strength{margin-top:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2)}
.password-strength-track{height:4px;background:var(--neutral-200)}
.password-strength-fill{height:100%;width:0;background:var(--neutral-500);transition:width var(--duration-fast) var(--ease-standard)}
.password-feedback,
.password-match-hint{font-family:var(--font-mono);font-size:11px;letter-spacing:0.06em;color:var(--text-muted)}
.password-rules{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-4)}
.password-rules li{font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;color:var(--text-faint)}
.password-rules li.is-ok{color:var(--system-success)}

.ra-inline-add{margin-top:var(--space-2);gap:var(--space-2)}
.ra-add-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:none;
    width:var(--control-h-lg);
    height:var(--control-h-lg);
    background:var(--surface-card);
    border:var(--border-strong-width) solid var(--border-strong);
    border-radius:var(--radius-none);
    color:var(--text-heading);
    cursor:pointer;
}
.ra-add-btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-hard-sm)}
.ra-add-btn:active{transform:none;box-shadow:none}
.custom-style-wrapper{margin-top:var(--space-4);max-width:420px}

/* ---------- Chips (estilos / experiencia / links) ---------- */
.styles-grid,
.experience-options,
.link-toggles{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.styles-grid{margin-bottom:var(--space-3)}
.style-option,
.experience-option,
.link-toggle,
.ra-more-styles{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:var(--control-h-sm);
    padding:9px 15px;
    background:var(--surface-card);
    color:var(--text-heading);
    border:var(--border-hairline) solid var(--border-strong);
    border-radius:var(--radius-none);
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    white-space:nowrap;
    cursor:pointer;
    transition:transform var(--duration-press),box-shadow var(--duration-press);
}
.style-option:hover,
.experience-option:hover,
.link-toggle:hover,
.ra-more-styles:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-hard-sm)}
.style-option:active,
.experience-option:active,
.link-toggle:active,
.ra-more-styles:active{transform:none;box-shadow:none}
/* Selección múltiple (estilos) = amarillo · selección única (experiencia) = azul claro */
.style-option.selected{
    background:var(--yellow-300);
    border-width:var(--border-strong-width);
    padding:8px 14px;
}
.experience-option.selected{
    background:var(--blue-100);
    border-width:var(--border-strong-width);
    padding:8px 14px;
}
.style-option.is-extra{display:none}
.styles-grid.is-expanded .style-option.is-extra{display:inline-flex}
.style-option.is-extra.selected{display:inline-flex}
/* Chip "ver más estilos" — azul, texto blanco; cierra la misma fila
   de chips como último item del grid (Figma 72-12519) */
.ra-more-styles{
    background:var(--blue-300);
    border-color:var(--blue-300);
    color:var(--white);
}
.ra-more-styles:hover{background:var(--blue-500);border-color:var(--blue-500)}
.ra-more-styles[hidden]{display:none}
/* Toggles de links: activos en ink */
.link-toggle.is-active{
    background:var(--action-primary);
    border-color:var(--action-primary);
    color:var(--white);
}
.ra-field[data-link-field][hidden]{display:none}

/* ---------- Modalidad de trabajo ----------
   3 tarjetas: Un estudio / Independiente / Ambos (Figma 72-12764 y 422-2873) */
.work-type-options{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:var(--space-5);
    margin-bottom:var(--space-6);
}
.work-type-option{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:var(--space-2);
    padding:var(--space-6);
    min-height:88px;
    background:var(--surface-card);
    border:var(--border-strong-width) solid var(--border-strong);
    border-radius:var(--radius-none);
    text-align:left;
    cursor:pointer;
    transition:transform var(--duration-press),box-shadow var(--duration-press);
}
.work-type-option:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-hard-sm)}
.work-type-option:active{transform:none;box-shadow:none}
.work-type-kicker{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--text-muted);
}
.work-type-label{
    font-family:var(--font-display);
    font-size:22px;
    line-height:1.15;
    color:var(--text-heading);
}
/* Tarjeta seleccionada: ink + sombra dura de estado (Figma 422-2873) */
.work-type-option.selected{
    background:var(--action-primary);
    border-color:var(--action-primary);
    box-shadow:var(--shadow-hard-sm);
}
.work-type-option.selected .work-type-kicker{color:var(--text-on-dark)}
.work-type-option.selected .work-type-label{color:var(--white)}

.studio-name-wrapper,
.studio-location-select-wrapper,
.address-picker-wrapper{margin-top:var(--space-5);max-width:420px}
.studio-autocomplete-wrapper{position:relative}
.studio-suggestions{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    z-index:40;
    display:none;
    background:var(--surface-card);
    border:var(--border-strong-width) solid var(--border-strong);
    border-top:0;
    max-height:240px;
    overflow:auto;
}
/* Abierto lleva sombra dura junto con el input (combo del Figma 422-2873) */
.studio-suggestions.is-open,
.studio-suggestions.visible{display:block;box-shadow:var(--shadow-hard-sm)}
.studio-suggestion-item{
    padding:var(--space-3) var(--space-4);
    cursor:pointer;
    border-bottom:var(--border-hairline) solid var(--border-subtle);
}
.studio-suggestion-item:last-child{border-bottom:0}
.studio-suggestion-item:hover,
.studio-suggestion-item.is-active{background:var(--surface-input-hover)}
/* Ítem del typeahead: cuadrado rojo + nombre mono caps, dirección debajo
   en sans muted (Figma 422-2873) */
.studio-suggestion-name{
    display:flex;
    align-items:center;
    gap:var(--space-3);
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--text-heading);
}
.studio-suggestion-name::before{
    content:"";
    flex:none;
    width:10px;
    height:10px;
    background:var(--red-300);
}
.studio-suggestion-address{
    display:block;
    margin-top:var(--space-1);
    padding-left:calc(10px + var(--space-3));
    font-family:var(--font-body);
    font-size:var(--body-s-size);
    line-height:1.4;
    color:var(--text-muted);
}
/* Fila "Crear": cuadrado amarillo con plus */
.studio-suggestion-new .studio-suggestion-name::before{
    content:"+";
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:14px;
    height:14px;
    background:var(--yellow-300);
    color:var(--text-heading);
    font-size:12px;
    font-weight:var(--weight-bold);
    line-height:1;
}
.studio-address-preview{margin-top:var(--space-2)}
.address-details{margin-top:var(--space-3);font-size:var(--body-s-size);color:var(--text-muted)}
.address-details summary{cursor:pointer;font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase}

/* ---------- Novedades ---------- */
.newsletter-topics{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--space-5);
}
.newsletter-topic{
    display:flex;
    align-items:flex-start;
    gap:var(--space-3);
    padding:var(--space-5);
    background:var(--surface-card);
    border:var(--border-hairline) solid var(--border-strong);
    border-radius:var(--radius-none);
    cursor:pointer;
    transition:transform var(--duration-press),box-shadow var(--duration-press);
}
.newsletter-topic:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-hard-sm)}
.newsletter-topic-input{
    appearance:none;
    flex:none;
    width:24px;
    height:24px;
    margin:0;
    background:var(--surface-card);
    border:var(--border-strong-width) solid var(--border-strong);
    border-radius:var(--radius-none);
    cursor:pointer;
    display:grid;
    place-content:center;
}
.newsletter-topic-input:checked{background:var(--yellow-300);border-color:var(--yellow-300)}
.newsletter-topic-input:checked::before{
    content:"";
    width:11px;
    height:6px;
    border-left:var(--border-strong-width) solid var(--white);
    border-bottom:var(--border-strong-width) solid var(--white);
    transform:rotate(-45deg) translate(1px,-1px);
}
.newsletter-topic-body{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}
.newsletter-topic-title{font-size:15px;font-weight:var(--weight-medium);color:var(--text-heading)}
.newsletter-topic-sub{
    font-family:var(--font-mono);
    font-size:10px;
    letter-spacing:0.06em;
    line-height:1.5;
    color:var(--text-faint);
}

/* ---------- Revisión ---------- */
.summary-card{margin-bottom:var(--space-8)}
.summary-row{
    display:grid;
    grid-template-columns:170px minmax(0,1fr) auto;
    align-items:baseline;
    gap:var(--space-4);
    padding:var(--space-4) 0;
    border-bottom:var(--border-hairline) solid var(--border-subtle);
}
.summary-label{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--text-faint);
}
.summary-value{
    min-width:0;
    font-size:var(--body-m-size);
    line-height:1.45;
    color:var(--text-heading);
    overflow-wrap:anywhere;
}
.summary-empty{color:var(--text-faint)}
.terms-container{margin-bottom:var(--space-6)}
.terms-checkbox-wrapper{
    display:flex;
    align-items:flex-start;
    gap:var(--space-3);
    cursor:pointer;
    font-size:var(--body-m-size);
    color:var(--text-heading);
}
.terms-checkbox{
    appearance:none;
    flex:none;
    width:24px;
    height:24px;
    margin:0;
    background:var(--surface-card);
    border:var(--border-strong-width) solid var(--border-strong);
    border-radius:var(--radius-none);
    cursor:pointer;
    display:grid;
    place-content:center;
}
.terms-checkbox:checked{background:var(--yellow-300);border-color:var(--yellow-300)}
.terms-checkbox:checked::before{
    content:"";
    width:11px;
    height:6px;
    border-left:var(--border-strong-width) solid var(--white);
    border-bottom:var(--border-strong-width) solid var(--white);
    transform:rotate(-45deg) translate(1px,-1px);
}
.terms-text{line-height:1.5}
.terms-link{color:var(--text-link)}

/* ---------- Acciones ---------- */
.ra-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    align-items:center;
    gap:var(--space-4);
    margin-top:var(--space-8);
}
.ra-actions--split{justify-content:space-between}
/* Helper del gate junto al CONTINUAR deshabilitado (Figma 422-2873) */
.ra-gate-hint{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.12em;
    text-transform:uppercase;
    text-align:right;
    color:var(--text-muted);
}
.ra-gate-hint[hidden]{display:none}
.ra-continue{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-3);
    padding:var(--space-4) var(--space-6);
    min-height:var(--control-h-md);
    background:var(--action-primary);
    color:var(--white);
    border:var(--border-strong-width) solid var(--action-primary);
    border-radius:var(--radius-none);
    font-family:var(--font-body);
    font-size:var(--button-m-size);
    font-weight:var(--weight-bold);
    letter-spacing:var(--button-m-track);
    text-transform:uppercase;
    text-decoration:none;
    white-space:nowrap;
    cursor:pointer;
    transition:transform var(--duration-press),box-shadow var(--duration-press),background var(--duration-press);
}
a.ra-continue:hover{color:var(--white);text-decoration:none}
.ra-continue:hover{background:var(--action-primary-hover);border-color:var(--action-primary-hover);transform:translate(-2px,-2px);box-shadow:var(--shadow-hard-sm)}
.ra-continue:active{transform:none;box-shadow:none}
.ra-continue:disabled{
    background:var(--neutral-300);
    border-color:var(--neutral-300);
    color:var(--white);
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}
.ra-ghost{
    padding:var(--space-4) var(--space-5);
    background:transparent;
    border:var(--border-hairline) solid var(--border-strong);
    border-radius:var(--radius-none);
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--text-heading);
    cursor:pointer;
}
.ra-ghost:hover{background:var(--surface-input-hover)}

/* ============================================================
   Pantallas de guardado y éxito
   ============================================================ */
.ra-screen{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:var(--space-5);
    min-height:60vh;
    padding:var(--space-16) 0;
    text-align:center;
}
.ra-screen[hidden]{display:none}
.saving-loader{
    width:110px;
    height:110px;
    border:6px solid var(--sand-250);
    border-right-color:var(--blue-400);
    border-radius:var(--radius-circle);
    animation:om-spin var(--duration-spin-slow) linear infinite;
}
.ra-screen-brand{
    display:flex;
    align-items:center;
    gap:var(--space-4);
    margin:var(--space-4) 0 0;
    font-family:var(--font-display);
    font-size:var(--title-lg-size);
    letter-spacing:0.01em;
    color:var(--text-heading);
}
.ra-screen-brand .wo-marks{gap:var(--space-2)}
.ra-screen-brand .wo-mark-square,
.ra-screen-brand .wo-mark-circle{width:20px;height:20px}
.ra-screen-brand .wo-mark-triangle{border-left-width:11px;border-right-width:11px;border-bottom-width:20px}
.saving-copy-carousel{
    position:relative;
    height:20px;
    width:100%;
    max-width:420px;
}
.saving-copy-item{
    position:absolute;
    inset:0;
    display:block;
    opacity:0;
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--text-muted);
    animation:ra-saving-copy 15s linear infinite;
}
.saving-copy-item:nth-child(1){animation-delay:0s}
.saving-copy-item:nth-child(2){animation-delay:3s}
.saving-copy-item:nth-child(3){animation-delay:6s}
.saving-copy-item:nth-child(4){animation-delay:9s}
.saving-copy-item:nth-child(5){animation-delay:12s}
@keyframes ra-saving-copy{
    0%{opacity:0}
    2%{opacity:1}
    18%{opacity:1}
    20%{opacity:0}
    100%{opacity:0}
}
.ra-success-marks{gap:var(--space-3);margin-bottom:var(--space-2)}
.ra-success-title{
    margin:0;
    max-width:760px;
    font-family:var(--font-display);
    font-size:var(--title-lg-size);
    line-height:1.1;
    letter-spacing:var(--h1-track);
    color:var(--text-heading);
}
.ra-success-sub{
    margin:0;
    max-width:460px;
    font-size:17px;
    line-height:1.5;
    color:var(--text-muted);
}

/* ============================================================
   Estados de error compartidos
   ============================================================ */
@keyframes shake{
    0%,100%{transform:translateX(0)}
    20%{transform:translateX(-6px)}
    40%{transform:translateX(6px)}
    60%{transform:translateX(-4px)}
    80%{transform:translateX(4px)}
}
.newsletter-topics.has-error .newsletter-topic{border-color:var(--system-error)}
.newsletter-error{
    margin:var(--space-3) 0 0;
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--status-error-fg);
}

/* Estados del importador IG (entrada alterna ?source=instagram) */
.ig-step-status{
    margin-top:var(--space-4);
    font-family:var(--font-mono);
    font-size:12px;
    letter-spacing:0.06em;
    color:var(--text-muted);
}
.ig-step-status.is-success{color:var(--success-fg)}
.ig-step-status.is-error{color:var(--status-error-fg)}
.ig-step-summary{margin-top:var(--space-3);font-size:var(--body-s-size);color:var(--text-body)}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1024px){
    .register-container{padding:var(--space-10) var(--space-6) var(--space-12)}
    .ra-nav{gap:var(--space-3)}
    .ra-nav-item{font-size:10px;letter-spacing:0.08em}
    .ra-intro-title{font-size:var(--title-lg-size)}
}

@media (max-width:768px){
    body.register-page{--ra-gutter:var(--space-5)}
    .register-container{padding:var(--space-8) var(--space-5) var(--space-12)}
    .ra-topbar{flex-direction:column;align-items:stretch;gap:0;min-height:0}
    .ra-topbar .wo-topbar-brand{padding:var(--space-4) var(--space-5);font-size:17px}
    .ra-nav{
        gap:var(--space-4);
        padding:0 var(--space-5) var(--space-3);
        border-top:var(--border-hairline) solid var(--border-subtle);
        padding-top:var(--space-3);
    }
    .ra-intro-title{font-size:var(--title-md-size)}
    .ra-intro-lead{font-size:15px}
    .ra-title{font-size:var(--h3-size)}
    .ra-fields--2col{grid-template-columns:1fr}
    .ra-fields--price{grid-template-columns:1fr}
    .ra-fields--narrow{max-width:none}
    .work-type-options{grid-template-columns:1fr}
    .newsletter-topics{grid-template-columns:1fr}
    .studio-name-wrapper,
    .studio-location-select-wrapper,
    .address-picker-wrapper,
    .custom-style-wrapper{max-width:none}
    .ra-actions{margin-top:var(--space-6)}
    .ra-gate-hint{width:100%;text-align:left}
    .ra-continue{width:100%;min-height:var(--control-h-lg)}
    .ra-actions--split{flex-direction:column;align-items:stretch}
    .ra-ghost{width:100%}
    .summary-row{grid-template-columns:1fr auto;gap:var(--space-1) var(--space-4)}
    .summary-label{grid-column:1/-1}
}

@media (max-width:600px){
    .ra-intro-title{font-size:var(--title-sm-size)}
    .ra-panel{padding:var(--space-6) 0 var(--space-2)}
    .ra-row{padding:var(--space-4) 0 var(--space-3)}
    .ra-row-value{font-size:17px}
    .ra-success-title{font-size:var(--title-md-size)}
    .ra-screen-brand{font-size:var(--title-md-size)}
    .saving-loader{width:88px;height:88px;border-width:5px}
}

@media (max-width:480px){
    .register-container{padding:var(--space-6) var(--space-4) var(--space-10)}
    body.register-page{--ra-gutter:var(--space-4)}
    .styles-grid,
    .experience-options,
    .link-toggles{gap:var(--space-2)}
    .style-option,
    .experience-option,
    .link-toggle,
    .ra-more-styles{font-size:11px;padding:8px 12px}
    .style-option.selected,
    .experience-option.selected{padding:7px 11px}
    .ra-intro-title{font-size:26px}
    .ra-title{font-size:21px}
    .newsletter-topic{padding:var(--space-4)}
}

/* ---------- Disponibilidad en vivo (email / nombre artistico / instagram) ----------
   Avisos de duplicado en el paso + chips de sugerencias de nombre libre. */
.ra-unique-msg{margin:var(--space-2) 0 0;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--system-error)}
.ra-unique-msg--warn{color:var(--text-muted)}
.ra-unique-msg a{color:inherit;text-decoration:underline}
.ra-username-suggestions{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-2)}
.ra-suggestion-chip{border:1px solid var(--border-strong);background:var(--surface-card);padding:var(--space-1) var(--space-3);font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-heading);cursor:pointer;border-radius:0;transition:transform .12s ease,box-shadow .12s ease}
.ra-suggestion-chip:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-hard-sm)}
.ra-suggestion-chip:active{transform:translate(0,0);box-shadow:none}