/* BSO · Principales soluciones — cards verticales con hover */
.bso-sol{
  --bso-red:#e81a3b;
  --bso-navy:#0d1b2a;
  --bso-blur:3px;          /* desenfoque de la card activa */
  --bso-card-w:260px;      /* ancho fijo de la card */
  --bso-card-h:390px;      /* alto fijo de la card (vertical) */
  padding:48px clamp(20px,5vw,64px);   /* márgenes laterales */
}
.bso-sol *{box-sizing:border-box}
.bso-wrap{max-width:calc(var(--bso-card-w)*4 + 60px);margin:0 auto}  /* ancho exacto de 4 cards: título y cards alineados */
.bso-bar{width:44px;height:4px;background:var(--bso-red);margin-bottom:16px}
.bso-title{margin:0 0 28px;color:var(--bso-navy)}

/* Grilla: las cards mantienen su tamaño y se acomodan 4 > 3 > 2 > 1 */
.bso-grid{display:grid;grid-template-columns:repeat(auto-fit,var(--bso-card-w));justify-content:center;gap:20px}

.bso-card{position:relative;display:block;width:var(--bso-card-w);max-width:100%;height:var(--bso-card-h);overflow:hidden;border-radius:4px;color:#fff;text-decoration:none;isolation:isolate;box-shadow:0 2px 8px rgba(13,27,42,.12);transition:transform .35s,box-shadow .35s}
.bso-bg{position:absolute;inset:0;z-index:-2;background-color:#14283d;background-size:cover;background-position:center;filter:brightness(.8) saturate(1.15);transform:scale(1);transition:filter .35s linear,transform .5s ease}
.bso-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(13,27,42,.92) 0%,rgba(13,27,42,.5) 45%,rgba(13,27,42,0) 100%)}
.bso-card::after{content:"";position:absolute;top:0;left:0;height:4px;width:44px;background:var(--bso-red);transition:width .45s ease}

.bso-content{position:absolute;left:0;right:0;bottom:0;padding:22px}
.bso-content h3{margin:0;font-size:20px;line-height:1.2}
.bso-reveal{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s ease,opacity .35s ease}
.bso-reveal>div{overflow:hidden}
.bso-reveal p{margin:12px 0 16px;font-size:15px;line-height:1.5;color:#eef2f6}
.bso-btn{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;background:var(--bso-red);font-size:14px;font-weight:600}
.bso-btn svg{transition:transform .25s}

/* Hover / foco de teclado */
.bso-card:hover,.bso-card:focus-visible{transform:translateY(-4px);box-shadow:0 18px 34px rgba(13,27,42,.28);outline:none}
.bso-card:hover::after,.bso-card:focus-visible::after{width:100%}
.bso-card:hover .bso-bg,.bso-card:focus-visible .bso-bg{filter:brightness(.4) saturate(1) blur(var(--bso-blur));transform:scale(1.08)}
.bso-card:hover .bso-reveal,.bso-card:focus-visible .bso-reveal{grid-template-rows:1fr;opacity:1}
.bso-card:hover .bso-btn svg{transform:translateX(5px)}

/* Las demás cards se apagan (el título queda nítido) */
.bso-grid:hover .bso-card:not(:hover) .bso-bg{filter:brightness(.55) saturate(0) blur(4px);transform:scale(1.08)}
.bso-grid:has(.bso-card:focus-visible) .bso-card:not(:focus-visible) .bso-bg{filter:brightness(.55) saturate(0) blur(4px);transform:scale(1.08)}

/* Pantallas táctiles: sin hover, el texto queda siempre visible */
@media (hover:none){
  .bso-reveal{grid-template-rows:1fr;opacity:1}
  .bso-bg,.bso-card:hover .bso-bg,.bso-grid:hover .bso-card:not(:hover) .bso-bg{filter:brightness(.55) saturate(1.1);transform:none}
  .bso-card:hover{transform:none}
}
/* Pantallas angostas con mouse: también texto visible */
@media (max-width:560px){
  .bso-reveal{grid-template-rows:1fr;opacity:1}
  .bso-bg,.bso-card:hover .bso-bg,.bso-grid:hover .bso-card:not(:hover) .bso-bg{filter:brightness(.55) saturate(1.1);transform:none}
}
@media (prefers-reduced-motion:reduce){
  .bso-sol *,.bso-sol *::before,.bso-sol *::after{transition:none!important}
}