/* Estilos propios de la landing Mystery Shopper (los mismos del diseño en el canvas), con la misma especificidad reforzada. */
body.ms-base:not(#ms-x) .lead-w {
max-width:62ch
}
body.ms-base:not(#ms-x) .sec-head {
display:flex;flex-direction:column;gap:16px;max-width:760px;margin-bottom:40px
}
body.ms-base:not(#ms-x) .row-between {
display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px
}
body.ms-base:not(#ms-x) .ms-carousel-nav[hidden] {
display:none!important
}
body.ms-base:not(#ms-x) a.ms-tag {
text-decoration:none;color:var(--text-muted)
}
body.ms-base:not(#ms-x) a.ms-tag:hover {
color:var(--cta);box-shadow:inset 0 0 0 1px var(--cta)
}
body.ms-base:not(#ms-x) .sol-box {
background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-xl);padding:clamp(16px,4vw,48px);box-shadow:var(--shadow-sm)
}
body.ms-base:not(#ms-x) .sol-tabs {
display:flex;justify-content:center;margin:0 0 32px
}
body.ms-base:not(#ms-x) .opt-card {
display:flex;flex-direction:column;gap:12px
}
body.ms-base:not(#ms-x) .opt-num {
width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:var(--on-primary);font:600 .9375rem/1 var(--font-sans);flex:none
}
body.ms-base:not(#ms-x) .opt-q {
font-size:1.125rem;line-height:1.4;color:var(--text);font-weight:500
}
body.ms-base:not(#ms-x) .inner-dash {
border:1.5px dashed var(--border);border-radius:var(--radius-md);padding:16px 18px;display:flex;flex-direction:column;gap:8px
}
body.ms-base:not(#ms-x) .scale-line {
display:flex;justify-content:space-between;gap:12px;margin-top:16px;padding-top:10px;border-top:1px solid var(--line);font:600 .6875rem/1.3 var(--font-label);letter-spacing:.1em;text-transform:uppercase;color:var(--text-subtle)
}
body.ms-base:not(#ms-x) .mods {
display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))
}
@media (max-width:1024px) {
body.ms-base:not(#ms-x) .mods {
grid-template-columns:minmax(0,1fr)
}
}
body.ms-base:not(#ms-x) .mod {
display:flex;flex-direction:row;gap:16px;align-items:flex-start;padding:22px
}
body.ms-base:not(#ms-x) .mod > .ms-icon-badge {
flex:none
}
body.ms-base:not(#ms-x) .mod > div {
flex:1 1 auto;min-width:0
}
body.ms-base:not(#ms-x) .terr {
position:relative;overflow:hidden;background-color:var(--surface-deep)
}
body.ms-base:not(#ms-x) .terr .ms-bg-media img {
opacity:.95
}
body.ms-base:not(#ms-x) .terr-panel {
position:relative;z-index:1;border-radius:var(--radius-xl);background:rgba(12,31,39,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--line-on-deep);padding:clamp(24px,4vw,48px)
}
body.ms-base:not(#ms-x) .step-card {
display:flex;flex-direction:column;gap:10px;padding:24px
}
body.ms-base:not(#ms-x) .step-n {
width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:var(--on-primary);font:600 .9375rem/1 var(--font-sans)
}
body.ms-base:not(#ms-x) .case-card {
gap:14px
}
body.ms-base:not(#ms-x) .case-head {
display:flex;align-items:center;gap:14px
}
body.ms-base:not(#ms-x) .case-head p {
margin:0
}
body.ms-base:not(#ms-x) .case-ind {
font-weight:600;font-size:1rem;color:var(--text)
}
body.ms-base:not(#ms-x) .case-mod {
font:600 .75rem/1.3 var(--font-label);letter-spacing:.08em;text-transform:uppercase;color:var(--primary);margin-top:2px!important
}
body.ms-base:not(#ms-x) .case-lbl {
color:var(--text);font-weight:600
}
body.ms-base:not(#ms-x) .case-impact {
margin-top:auto;background:var(--surface-deep);border-radius:var(--radius-md);padding:16px 18px;display:flex;flex-direction:column;gap:8px
}
body.ms-base:not(#ms-x) .case-impact__t {
display:flex;align-items:center;gap:6px;margin:0;color:var(--primary);font-weight:600;font-size:.9375rem
}
body.ms-base:not(#ms-x) .case-impact ul {
margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;color:var(--text);font-size:.9375rem;line-height:1.5
}
body.ms-base:not(#ms-x) .team-row {
display:flex;gap:16px;align-items:flex-start;padding:24px;border-bottom:1px solid var(--line)
}
body.ms-base:not(#ms-x) .team-row:last-child {
border-bottom:0
}
body.ms-base:not(#ms-x) .cta-final {
position:relative;overflow:hidden;padding-block:clamp(96px,10vw,140px)
}
body.ms-base:not(#ms-x) .cta-final .ms-bg-media img {
opacity:.9;object-position:center bottom
}
[data-theme="dark"] body.ms-base:not(#ms-x) .cta-final .ms-bg-media img {
filter:invert(1) hue-rotate(180deg);opacity:.4
}
body.ms-base:not(#ms-x) .sec-head {
display:flex;flex-direction:column;gap:16px;max-width:760px;margin-bottom:40px
}
body.ms-base:not(#ms-x) .row-between {
display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px
}body.ms-base:not(#ms-x) .case-card .ms-card__title {
min-height:2.6em;min-height:2lh;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}
body.ms-base:not(#ms-x) .case-impact__x {
margin:0;color:var(--text);font-size:.9375rem;line-height:1.5
}
/* Casos: las cinco tarjetas comparten filas (subgrid), así industria, título, "Qué hicimos" e "Impacto" quedan alineados en todas */
body.ms-base:not(#ms-x) .ms-carousel:has(> .case-card) {
display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * var(--space-4)) / 3);grid-template-rows:repeat(4,auto);column-gap:var(--space-4);row-gap:0
}
body.ms-base:not(#ms-x) .ms-carousel > .case-card {
display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:14px
}
body.ms-base:not(#ms-x) .case-card .case-impact {
margin-top:0
}
@media (max-width:1024px) {
body.ms-base:not(#ms-x) .ms-carousel:has(> .case-card) {
grid-auto-columns:calc((100% - var(--space-4)) / 2)
}
}
@media (max-width:640px) {
body.ms-base:not(#ms-x) .ms-carousel:has(> .case-card) {
grid-auto-columns:86%
}
}
/* Soluciones: entrada de cada pestaña en máximo 2 líneas y misma altura en ambas, para que las tarjetas queden alineadas */
body.ms-base:not(#ms-x) .sol-intro {
margin-bottom:24px;min-height:calc(2 * 1.6em)
}
/* Monitoreo: programa recomendado, con contorno naranja */
body.ms-base:not(#ms-x) .opt-card--featured, body.ms-base:not(#ms-x) .opt-card--featured:hover {
border-color:var(--cta);box-shadow:0 0 0 1px var(--cta),var(--shadow-sm)
}
body.ms-base:not(#ms-x) .opt-card--featured:hover {
box-shadow:0 0 0 1px var(--cta),var(--shadow-md)
}
/* Inteligencia territorial: el panel se eleva con contorno blanco al pasar el cursor */
body.ms-base:not(#ms-x) .terr-panel {
transition:transform var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard)
}
body.ms-base:not(#ms-x) .terr-panel:hover {
transform:translateY(-3px);border-color:var(--text-on-deep);box-shadow:0 0 0 1px var(--text-on-deep),var(--shadow-lg)
}
@media (prefers-reduced-motion:reduce) {
body.ms-base:not(#ms-x) .terr-panel {
transition:none
}
body.ms-base:not(#ms-x) .terr-panel:hover {
transform:none
}
}