/* Ajuste de identidad visual MSI: azul, gris estructural y naranja de énfasis. */
:root{--msi-blue:#1976D2;--msi-charcoal:#263238;--msi-orange:#FF7043;--msi-orange-soft:#FFF0EB}
.msi-legal-footer{background:var(--msi-charcoal)!important}
.msi-contact-kicker{color:#ffb0a9!important}
/* Desarrollo de red: ajustes exclusivos del explorador interactivo. */
body:has(#console-nav) .shell .tag{color:#14736c}
@media(min-width:821px){body:has(#console-nav) .console-body{height:370px;min-height:370px}body:has(#console-nav) .console-preview{height:100%;min-height:0}body:has(#console-nav) .console-preview img{object-position:center 47%}}
body:has(#console-nav) .variable{border-color:#dce9e8;background:#fff;transition:background .26s ease,transform .26s cubic-bezier(.2,.8,.2,1),box-shadow .26s ease,border-color .26s ease}
body:has(#console-nav) .variable:before{top:0;left:0;width:0;height:3px;background:#79dcc0;transform:none;transition:width .28s ease}
@media(hover:hover){body:has(#console-nav) .variable:hover{z-index:1;border-color:#1f5755;background:#1f5755;box-shadow:0 13px 26px rgba(2,25,27,.24);transform:translateY(-6px)}body:has(#console-nav) .variable:hover:before{width:100%}body:has(#console-nav) .variable:hover strong{color:#c7f6e6;transform:translateY(-2px)}body:has(#console-nav) .variable:hover span{color:#fff;transform:translateY(2px)}}

/* Tratamiento de Variables: réplica del panel de decisión previo. */
body:has(#console-nav) .variables{padding:clamp(38px,5vw,65px);background:#153d3d;color:#fff}
body:has(#console-nav) .variables h2{color:#fff}
body:has(#console-nav) .variables-head p{color:#cbe1dc}
body:has(#console-nav) .variables-grid{gap:1px;background:rgba(211,243,232,.21)}
body:has(#console-nav) .variable{min-height:156px;border:0;background:#153d3d}
body:has(#console-nav) .variable strong{color:#a9ead9}
body:has(#console-nav) .variable span{color:#eef7f4}
body:has(#console-nav) .variable:before{background:#a9ead9;transition:width .62s cubic-bezier(.2,.8,.2,1)}
@media(hover:hover){body:has(#console-nav) .variable:hover{background:#1f5755;border:0;box-shadow:0 13px 26px rgba(2,25,27,.24);transform:translateY(-6px)}body:has(#console-nav) .variable:hover strong{color:#c7f6e6}body:has(#console-nav) .variable:hover span{color:#fff}}
@media(max-width:820px){body:has(#console-nav) .variables{margin-right:-20px;margin-left:-20px;padding:35px 20px}body:has(#console-nav) .variable{min-height:128px}}

/* El subrayado del recorrido comparte el acento de Variables. */
body:has(#console-nav) .console-tab:after{background:#a9ead9}

/* En móvil todas las fases mantienen el mismo visor, incluso la vista general. */
@media(max-width:820px){body:has(#console-nav) .console-preview{height:clamp(200px,56vw,220px);min-height:0}body:has(#console-nav) .console-preview img{object-position:center 47%}}

/* Separación contenida entre Variables y el cierre de la sección. */
body:has(#console-nav) .variables{margin-bottom:62px}
@media(max-width:820px){body:has(#console-nav) .variables{margin-bottom:24px}body:has(#console-nav) .outcome{padding-top:28px}}