.uasr-selector{
    --uasr-yellow:#F3D502;
    --uasr-purple:#A247C8;
    --uasr-purple-hover:#C06FE0;
    --uasr-black:#080808;
    --uasr-white:#fff;
    width:100%;max-width:100%;min-width:0;box-sizing:border-box;
    padding:24px;
    background:var(--uasr-yellow);
    color:var(--uasr-black);
    font-family:"Sora",Arial,sans-serif;
    overflow:hidden;
}
.uasr-selector *{box-sizing:border-box;min-width:0}
.uasr-selector button,.uasr-selector a{font:inherit}
.uasr-part{padding:42px 12px 18px;animation:uasrStepIn .3s ease both}
.uasr-part[hidden]{display:none!important}
.uasr-section-head{max-width:920px;margin:0 0 30px}
.uasr-step{margin:0 0 9px!important;color:var(--uasr-black)!important;font:800 15px/1 "Oxanium",Arial,sans-serif;letter-spacing:.14em}
.uasr-section-head h2{margin:0 0 14px!important;color:var(--uasr-black)!important;font:800 clamp(30px,3.5vw,54px)/1.03 "Oxanium",Arial,sans-serif;letter-spacing:-.025em}
.uasr-subtitle{margin:0 0 11px!important;color:var(--uasr-black)!important;font:700 clamp(18px,1.7vw,24px)/1.18 "Oxanium",Arial,sans-serif}
.uasr-lead{margin:0!important;color:rgba(8,8,8,.76)!important;font:300 15px/1.65 "Sora",Arial,sans-serif;max-width:860px}

/* Menú superior de navegación entre pasos */
.uasr-step-nav{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
    width:100%;
    padding:10px;
    border:2px solid var(--uasr-black);
    background:transparent;
}
.uasr-step-nav-button{
    appearance:none;-webkit-appearance:none;
    display:flex;align-items:center;justify-content:center;
    min-height:44px;
    padding:12px 18px;
    border:0;
    background:transparent;
    color:var(--uasr-black);
    cursor:pointer;
    text-transform:uppercase;
    letter-spacing:.08em;
    font:800 12px/1.1 "Oxanium",Arial,sans-serif;
    transition:background .2s ease,color .2s ease,opacity .2s ease;
}
.uasr-step-nav-button.is-active{
    background:var(--uasr-black);
    color:var(--uasr-white);
}
.uasr-step-nav-button[aria-disabled="true"]{opacity:.38;cursor:not-allowed}
.uasr-step-nav-button[aria-disabled="true"]::before,
.uasr-step-nav-button[aria-disabled="true"]::after{display:none!important}

.uasr-area-grid,.uasr-depth-grid,.uasr-program-grid{display:grid;width:100%;gap:18px}
.uasr-area-grid{grid-template-columns:repeat(var(--uasr-p1-d),minmax(0,1fr))}
.uasr-depth-grid{grid-template-columns:repeat(var(--uasr-p2-d),minmax(0,1fr))}
.uasr-program-grid{grid-template-columns:repeat(var(--uasr-p3-d),minmax(0,1fr))}

/* Cards: negro en reposo, fondo morado al seleccionar y borde animado en hover. */
.uasr-area-card,.uasr-depth-card,.uasr-program-card{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    width:100%;
    border:3px solid var(--uasr-black);
    background:var(--uasr-black)!important;
    color:var(--uasr-white)!important;
    text-align:left;
    border-radius:0;
    transition:transform .22s ease,box-shadow .22s ease,background-color .22s ease,color .22s ease;
}

/*
 * Trazo morado de 5px que recorre cíclicamente todo el perímetro.
 * Es un SVG muy ligero y la animación solo se ejecuta mientras existe hover.
 */
.uasr-border-runner{
    position:absolute;
    inset:0;
    z-index:20;
    display:block;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
    transition:opacity .12s ease;
}
.uasr-border-runner svg{
    display:block;
    width:100%;
    height:100%;
    overflow:hidden;
}
.uasr-border-runner rect{
    fill:none;
    stroke:var(--uasr-purple);
    stroke-width:10px; /* la mitad queda fuera del SVG: grosor visible = 5px */
    vector-effect:non-scaling-stroke;
    stroke-linecap:square;
    stroke-dasharray:10 90;
    stroke-dashoffset:25;
}
.uasr-area-card:hover .uasr-border-runner,
.uasr-depth-card:hover .uasr-border-runner,
.uasr-program-card:hover .uasr-border-runner{
    opacity:1;
}
.uasr-area-card:hover .uasr-border-runner rect,
.uasr-depth-card:hover .uasr-border-runner rect,
.uasr-program-card:hover .uasr-border-runner rect{
    animation:uasrBorderTravel 1.55s linear infinite;
}

/* El hover mantiene el fondo negro y únicamente añade movimiento/elevación. */
.uasr-area-card:hover,.uasr-depth-card:hover,.uasr-program-card:hover{
    border-color:var(--uasr-black)!important;
    background:var(--uasr-black)!important;
    color:var(--uasr-white)!important;
    transform:translateY(-4px);
    box-shadow:0 16px 34px rgba(0,0,0,.2);
}

/* Selección persistente: card morada completa, sin borde visible y conservando los colores de texto originales. */
.uasr-area-card.is-active,.uasr-depth-card.is-active{
    border-color:transparent!important;
    background:var(--uasr-purple)!important;
    color:var(--uasr-white)!important;
    box-shadow:0 14px 30px rgba(0,0,0,.16);
}
.uasr-area-card.is-active:hover,.uasr-depth-card.is-active:hover{
    background:var(--uasr-purple)!important;
    color:var(--uasr-white)!important;
    border-color:transparent!important;
}

.uasr-area-card{display:flex;flex-direction:column;min-height:330px;padding:24px;cursor:pointer}
button.uasr-area-card{appearance:none;-webkit-appearance:none}
.uasr-card-index{display:block;margin:0 0 20px;color:var(--uasr-yellow);font:800 13px/1 "Oxanium",Arial,sans-serif;letter-spacing:.12em}
.uasr-area-image{display:flex;align-items:center;justify-content:center;width:100%;min-height:120px;margin:0 0 24px;flex:0 0 auto}
.uasr-area-image img{display:block;width:50%;max-width:50%;height:auto;max-height:120px;object-fit:contain;object-position:center}
.uasr-area-card h3{margin:0 0 12px!important;color:var(--uasr-white)!important;font:800 21px/1.08 "Oxanium",Arial,sans-serif;overflow-wrap:normal;word-break:normal}
.uasr-card-copy{display:flex;flex:1;flex-direction:column}
.uasr-card-text,.uasr-area-card>p{margin:0!important;color:rgba(255,255,255,.75)!important;font:300 13px/1.55 "Sora",Arial,sans-serif}
.uasr-area-card.is-active h3{color:var(--uasr-white)!important}
.uasr-area-card.is-active .uasr-card-index{color:var(--uasr-yellow)!important}
.uasr-area-card.is-active .uasr-card-text,
.uasr-area-card.is-active>p{color:rgba(255,255,255,.75)!important}

.uasr-area-advisor{cursor:default}
.uasr-area-advisor:hover{background:var(--uasr-black)!important;color:var(--uasr-white)!important;border-color:var(--uasr-black)!important}
.uasr-area-advisor:hover h3{color:var(--uasr-white)!important}
.uasr-area-advisor:hover>p{color:rgba(255,255,255,.75)!important}
.uasr-area-advisor:hover .uasr-card-index{color:var(--uasr-yellow)!important}
.uasr-area-advisor .uasr-cta{margin-top:auto}

.uasr-cta{display:inline-flex;align-items:center;justify-content:center;width:max-content;max-width:100%;padding:12px 18px;margin-top:20px;background:var(--uasr-purple)!important;color:#fff!important;text-decoration:none!important;text-transform:uppercase;font:700 12px/1 "Oxanium",Arial,sans-serif;letter-spacing:.05em;border:0;transition:background .2s ease,transform .2s ease}
.uasr-cta:hover{background:var(--uasr-purple-hover)!important;color:#fff!important;transform:translateY(-2px)}

.uasr-depth-card{display:flex;flex-direction:column;min-height:205px;padding:24px;cursor:pointer;appearance:none;-webkit-appearance:none}
.uasr-depth-card h3{margin:0 0 9px!important;color:var(--uasr-white)!important;font:800 22px/1.08 "Oxanium",Arial,sans-serif}
.uasr-depth-card h4{margin:0 0 16px!important;color:var(--uasr-yellow)!important;font:700 16px/1.1 "Oxanium",Arial,sans-serif}
.uasr-depth-card p{margin:0!important;color:rgba(255,255,255,.72)!important;font:300 13px/1.55 "Sora",Arial,sans-serif}
.uasr-depth-card:hover h3{color:var(--uasr-white)!important}
.uasr-depth-card:hover h4{color:var(--uasr-yellow)!important}
.uasr-depth-card:hover p{color:rgba(255,255,255,.72)!important}
.uasr-depth-card.is-active h3{color:var(--uasr-white)!important}
.uasr-depth-card.is-active h4{color:var(--uasr-yellow)!important}
.uasr-depth-card.is-active p{color:rgba(255,255,255,.72)!important}

/* Parte 3 */
.uasr-program-card{display:flex;flex-direction:column;min-height:265px;padding:0;background:var(--uasr-black)!important}
.uasr-program-image{
    display:block;
    width:100%!important;
    max-width:100%!important;
    height:160px;
    margin:0!important;
    object-fit:cover;
    flex:0 0 auto;
}
.uasr-program-body{display:flex;flex:1;flex-direction:column;padding:22px 24px 24px}
.uasr-category{display:block;margin:0 0 13px;color:var(--uasr-yellow);font:700 12px/1.1 "Oxanium",Arial,sans-serif;text-transform:uppercase;letter-spacing:.07em}
.uasr-program-card h3{margin:0 0 12px!important;color:var(--uasr-white)!important;font:800 24px/1.08 "Oxanium",Arial,sans-serif}
.uasr-program-card p{margin:0 0 22px!important;color:rgba(255,255,255,.75)!important;font:300 13px/1.58 "Sora",Arial,sans-serif;flex:1}
.uasr-program-card .uasr-cta{margin-top:auto}
.uasr-program-card:hover .uasr-category{color:var(--uasr-yellow)!important}
.uasr-program-card:hover h3{color:var(--uasr-white)!important}
.uasr-program-card:hover p{color:rgba(255,255,255,.75)!important}

@keyframes uasrBorderTravel{to{stroke-dashoffset:-75}}
@keyframes uasrStepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (min-width:768px) and (max-width:980px){
    .uasr-area-grid{grid-template-columns:repeat(var(--uasr-p1-t),minmax(0,1fr))}
    .uasr-depth-grid{grid-template-columns:repeat(var(--uasr-p2-t),minmax(0,1fr))}
    .uasr-program-grid{grid-template-columns:repeat(var(--uasr-p3-t),minmax(0,1fr))}
    .uasr-selector{padding:20px}
    .uasr-part{padding:34px 8px 14px}
    .uasr-area-card{min-height:310px}
}
@media (max-width:767px){
    .uasr-selector{padding:14px}
    .uasr-step-nav{display:grid;grid-template-columns:1fr;gap:6px;overflow:visible;padding:7px}
    .uasr-step-nav-button{width:100%;min-width:0;min-height:44px;padding:11px 14px;font-size:11px;white-space:normal;text-align:center}
    .uasr-area-grid{grid-template-columns:repeat(var(--uasr-p1-m),minmax(0,1fr))}
    .uasr-depth-grid{grid-template-columns:repeat(var(--uasr-p2-m),minmax(0,1fr))}
    .uasr-program-grid{grid-template-columns:repeat(var(--uasr-p3-m),minmax(0,1fr))}
    .uasr-part{padding:28px 4px 10px}
    .uasr-section-head{margin-bottom:22px}
    .uasr-area-card,.uasr-depth-card{min-height:auto;padding:20px}
    .uasr-program-card{min-height:auto}
    .uasr-program-body{padding:20px}
    .uasr-card-index{margin-bottom:22px}
    .uasr-area-image{min-height:130px}
    .uasr-area-image img{width:50%;max-width:50%;max-height:130px}
    .uasr-program-image{height:150px}
    .uasr-cta{width:100%}
    .uasr-area-card:hover,.uasr-depth-card:hover,.uasr-program-card:hover{transform:none}
}
@media (max-width:480px){
    .uasr-selector{padding:10px}
    .uasr-part{padding:24px 0 8px}
    .uasr-area-grid,.uasr-depth-grid,.uasr-program-grid{grid-template-columns:1fr}
    .uasr-area-grid,.uasr-depth-grid,.uasr-program-grid{gap:14px}
    .uasr-section-head h2{font-size:clamp(28px,9vw,38px)}
    .uasr-section-head{margin-bottom:20px}
    .uasr-area-card,.uasr-depth-card{padding:18px}
    .uasr-program-body{padding:18px}
}
@media (prefers-reduced-motion:reduce){
    .uasr-part{animation:none}
    .uasr-area-card,.uasr-depth-card,.uasr-program-card,.uasr-cta{transition:none}
    .uasr-area-card:hover .uasr-border-runner rect,
    .uasr-depth-card:hover .uasr-border-runner rect,
    .uasr-program-card:hover .uasr-border-runner rect{animation:none}
    .uasr-border-runner rect{stroke-dasharray:100 0;stroke-dashoffset:0}
}
