/* ==========================================================================
   6 - MODAL DE CASO  ·  la ventana de "Explorar el caso"
   Toma el color de la marca de cada caso (--marca lo pone el JS).
   ========================================================================== */

.modal-caso{position:fixed;inset:0;background:rgba(11,32,53,.55);backdrop-filter:blur(6px);z-index:99;
  display:none;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto}
.modal-caso.abierto{display:flex}

.modal-caja{background:var(--TARJETA);border-radius:26px;max-width:820px;width:100%;overflow:hidden;
  box-shadow:0 40px 90px rgba(11,32,53,.45);animation:entra .35s cubic-bezier(.2,.9,.3,1)}
@keyframes entra{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:none}}

.modal-top{padding:30px 34px;color:#fff;position:relative;background:var(--marca,var(--AZUL))}
.modal-top .sec{font-size:12px;text-transform:uppercase;letter-spacing:.1em;opacity:.85;margin-bottom:6px}
.modal-top h3{font-size:30px;margin-bottom:6px;color:#fff}
.modal-top p{opacity:.92;font-size:15px}
.cerrar{position:absolute;top:20px;right:22px;width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.2);color:#fff;border:0;cursor:pointer;font-size:16px;transition:var(--SUAVE)}
.cerrar:hover{background:rgba(255,255,255,.35);transform:rotate(90deg)}

.modal-cuerpo{padding:30px 34px 34px}
.resultados{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:26px}
.res{background:var(--FONDO-2);border-radius:14px;padding:16px;text-align:center}
.res b{display:block;font-family:var(--LETRA-TITULOS);font-size:25px;color:var(--marca,var(--AZUL))}
.res small{font-size:12px;color:var(--TEXTO-2)}

.modal-cuerpo .bloque{margin-bottom:22px}
.modal-cuerpo .bloque h4{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--marca,var(--AZUL));margin-bottom:8px}
.modal-cuerpo .bloque p{color:var(--TEXTO-2);line-height:1.75;font-size:15px}
.modulos{display:flex;flex-wrap:wrap;gap:7px}
.modulos span{padding:6px 14px;border-radius:100px;background:var(--FONDO-2);border:1px solid var(--BORDE);font-size:13px;color:var(--TEXTO-2)}

@media (max-width:600px){
  .resultados{grid-template-columns:1fr}
  .modal-top,.modal-cuerpo{padding-left:22px;padding-right:22px}
  .modal-top h3{font-size:24px}
}