#exp-interactiva{
    font-family:Arial;
    background:#000000;
    color:white;
}

/* #exp-interactiva .exp-contenedor{
    margin:30px;
} */

#exp-interactiva .exp-zona{
    width: 100%; 
    min-height:260px;
    /* max-height: 300px; */
    background:#0000009c;
    padding:20px;
    border-radius:14px;
    border: 2px solid #0EA597; 
}

#exp-interactiva .exp-zona h5{
    font-size: clamp(14px, 1.5vw, 22px);
    line-height: 1.3;
}

@media (min-width: 992px){
  #exp-interactiva .exp-zona{
    width: 32%;
  }
}

#exp-interactiva .exp-tarjetas{
    display:flex;
    flex-wrap:wrap;
    gap:15px;
    justify-content:center;
    margin:20px 0 0 30px; /* menos espacio en móvil */
}

#exp-interactiva .exp-card{
    background:#ffffff;
    color: black;
    padding:15px;
    border-radius:6px;
    cursor:grab;
    width:100%;        /* se adapta */
    /* max-width:260px;   */
}

#exp-interactiva .exp-card:hover{
background:#656d6c;
opacity:0.6;
}

#exp-interactiva .correct{
    background:#0EA597 !important;
}

#exp-interactiva .incorrect{
    background:#656d6c !important;
}

#exp-interactiva .exp-botones{
    text-align:center;
    margin:30px;
}

#exp-interactiva .btn-accion{
    padding:12px 25px;
    margin:10px;
    border:none;
    background:#656d6c;
    color:white;
    font-weight:bold;
    cursor:pointer;
}

#exp-interactiva .btn-accion:hover{
    background:#0EA597;
    color:white;
}

#exp-interactiva .btn-accion:disabled{
  opacity:0.5;
  cursor:not-allowed;
}

/* RESULTADO */

#exp-interactiva .resultado-exp{

    margin-top:20px;

    text-align:center;

    font-size:22px;

    font-weight:700;

    color:#fff;

    background:
    linear-gradient(
        145deg,
        rgba(14,165,151,.18),
        rgba(255,255,255,.03)
    );

    border:1px solid rgba(14,165,151,.25);

    border-radius:16px;

    padding:16px;

    backdrop-filter:blur(10px);

    box-shadow:0 10px 30px rgba(0,0,0,.18);
}

/* =========================
   MOBILE UX
========================= */

@media(max-width:768px){

/* CONTENEDOR */
#exp-interactiva .exp-contenedor{

    width:100%;

    padding:0 10px;
}

/* INSTRUCCION */
#exp-interactiva .instruccion{

    flex-direction:column;

    align-items:flex-start !important;

    gap:12px;

    text-align:left;

    font-size:clamp(14px,4vw,17px) !important;

    line-height:1.5;

    margin-bottom:25px;
}

/* ZONAS */
#exp-interactiva .exp-zona{

    width:100% !important;

    min-height:170px;

    padding:18px;

    border-radius:18px;

    background:
    linear-gradient(
        145deg,
        rgba(255,255,255,.06),
        rgba(255,255,255,.02)
    );

    backdrop-filter:blur(10px);

    transition:.3s ease;
}

/* TITULO ZONA */
#exp-interactiva .exp-zona h5{

    font-size:clamp(16px,4vw,20px);

    line-height:1.4;

    margin-bottom:10px;
}

/* CONTENEDOR TARJETAS */
#exp-interactiva .exp-tarjetas{

    width:100%;

    margin:25px 0 0;

    gap:12px;
}

/* TARJETAS */
#exp-interactiva .exp-card{

    width:100%;

    padding:16px;

    border-radius:14px;

    font-size:clamp(14px,4vw,17px);

    font-weight:600;

    text-align:center;

    box-shadow:0 6px 20px rgba(0,0,0,.18);

    touch-action:none;
}

/* EFECTO TOUCH */
#exp-interactiva .exp-card:active{

    transform:scale(.98);
}

/* BOTONES */
#exp-interactiva .exp-botones{

    position:sticky;

    bottom:0;

    background:#21202E;

    padding:15px 10px;

    margin:25px -10px 0;

    display:flex;

    gap:10px;

    z-index:100;
}

/* BOTONES */
#exp-interactiva .btn-accion{

    flex:1;

    margin:0;

    border-radius:14px;

    padding:14px 10px;

    font-size:15px;
}

/* BOTON BACK */
#exp-interactiva .btn-back{

    width:42px;

    height:42px;

    border-radius:12px;
}

/* ROW */
#exp-interactiva .row{

    gap:18px;
}
}