.mg-tarjeta-shop {width:99%; 1max-width:448px; height:auto; padding:8px 14px 0px 14px; border-radius:26px;margin:5px 0 5px 0; Background: rgba(255, 255, 255, 0.99); grid-template-rows:auto 1fr; font-family: sans-serif,colossus,arial ; 11box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.2) 0px 0px 1px 0px; display:grid; gap:20px 10px; grid-template-columns:repeat(5, 1fr);}
.mg-tarjeta-shop a {text-decoration:none;}



.mg-tarjeta-shop .mg-titulo {
    
/* width:100%; grid-column: 1 / -1; font:20px VVDSCondMed,impact; text-align:center; letter-spacing: 1.2px; color:#000;
padding:0 5px; display:flex; justify-content:space-between; align-items:center; */
    border-radius: 20px 20px 10px 10px;
    background:#fff;
1margin: 0 0 8px 0;
  padding:0 5px 4px 5px;
  display:flex;
  flex-wrap:nowrap;               /* 🔑 nunca se va a la línea siguiente */
  justify-content:space-between;
  align-items:center;
  width:100%;
  grid-column:1 / -1;
  font:20px VVDSCondMed,impact;
  text-align:center;
  letter-spacing:1.2px;
  color:#000;
  overflow:hidden;      
  border-bottom: 1px solid rgba(240, 240, 240, 1);
}

.mg-tarjeta-shop .btn_carrito {padding:5px 10px; background:#0066FF; color:#fFF; border-radius:10px; font-size:15px;}
.mg-tarjeta-shop .btn_carrito i {font-size:12px; margin-left:3px;}
.mg-tarjeta-shop .btn_carrito:hover {background:rgba(var(--t-tar-col-pri), 1);}

.mg-tarjeta-shop .mg-oferta {min-width:100px; width:100%; padding:0 0 7px 0; border:1px solid #fff; 1background:#fff; display:inline-block; text-align:left; font-size:13.5px; color:#222; overflow:hidden; position:relative; border-radius:12px; 1border:1px solid rgba(219, 218, 222,0.5); 1box-shadow:rgba(0, 0, 0, 0.05) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 2px 20px 0px; transition:border-width 0.4s ease, border-color 0.4s ease;}
.mg-tarjeta-shop .mg-oferta .btn-agregar, .mg-tarjeta-shop .mg-oferta .btn-agregar-log {width:90%;
display:block;
    height: 35px;
    margin: 4px auto 0 auto;
    background:#3D3D5C;
    color: #fff;
    border-radius: 12px;
    font-size: 14px;
    border:none;
    text-align:center;
    font-weight: bold;
    1box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px;
} 
.mg-tarjeta-shop .mg-oferta .btn-agregar i, .mg-tarjeta-shop .mg-oferta .btn-agregar-log i {font-size:16px;color:#fff;}
.mg-tarjeta-shop .mg-oferta article{background:url(https://mercadogratis.com/i/fw/mg-logo-70x50.png) 50% 35% no-repeat; background-size:50px 35px;}


.mg-tarjeta-shop .mg-oferta:hover {border:1px solid #fff; color: rgba(var(--t-tar-col-pri), 1); box-shadow:0 .1875rem .5rem 0 rgba(34, 48, 62, .1);}
.mg-tarjeta-shop .mg-oferta:hover article {cursor: zoom-in;}
.mg-tarjeta-shop .mg-oferta:hover .btn-agregar, .mg-tarjeta-shop .mg-oferta:hover .btn-agregar-log {color:#fff; background: rgba(var(--t-tar-col-pri), 1); cursor:pointer; transition: background-color 0.3s ease;}
.mg-tarjeta-shop .mg-oferta:hover .btn-agregar i, .mg-tarjeta-shop .mg-oferta:hover .btn-agregar-log i {color:#fff;}
.mg-tarjeta-shop .mg-oferta .mg-oferta-img{transition:transform 0.2s ease; background:#f5f5f5; width:100%; height:200px; position:relative; border-radius:12px;   filter: url(#sharpen)  contrast(1.05) brightness(1.1) saturate(1.1);image-rendering:auto;image-rendering:crisp-edges;image-rendering:-webkit-optimize-contrast;}
.mg-tarjeta-shop .mg-oferta:hover .mg-oferta-img {transform: scale(0.96);}
.mg-tarjeta-shop .mg-oferta .tipo {position: absolute; right:0; bottom:99px; left:0; top:0; padding: 0 0 6px 0;border-radius: 12px; font-weight: bold; display: flex; color: #fff; font-size: 12px; align-items: flex-end; justify-content:center;    background-color: #0000; background-image: linear-gradient(180deg, #0000 65%, #000a);}
.mg-tarjeta-shop .mg-oferta .tipo span {padding:5px 4px; 5px 5px}
.mg-tarjeta-shop .mg-oferta .tiempo {font-size:13px;color:rgb(246,194,12);padding:5px 4px;}
.mg-tarjeta-shop .mg-oferta .precio {width:94%; margin:0 auto; 1color:#444; padding:4px 0 3px 0; display:flex; justify-content:space-between;}
.mg-tarjeta-shop .mg-oferta .precio b {font-size:14px; color:#6a6a6a;#384551; font-weight:normal;}
.mg-tarjeta-shop .mg-oferta .precio small {11color:#909090; font-size:10.5px;}
.mg-tarjeta-shop .mg-oferta span.pro_titulo {color:#111; font-weight: bold;
    font-family: 'abel', arial;


  padding: 0 4px;
  font-size: clamp(15.5px, 3vw, 13.5px);
  line-height: 1.05;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%; /* Asegura que el ancho sea variable */
  box-sizing: border-box; /* Asegura que el padding no afecte el ancho total */
height: 32px;Edición
}


.mg-tarjeta-shop .mg-oferta.activo {padding: 0; background:#fff; border:1px solid rgba(0,0,0,0.35);}
1111background:#DEEFFE;#1B1C22; color:#343537; border:1px solid rgba(var(--t-tar-col-pri), 0.8);#404040; transform: scale(1.012, 1.012);}

.mg-tarjeta-shop .mg-oferta.activo:hover .pedido_can {background:#0066FF; color:#fff; font-weight: bold; }

.mg-titulo > a{
  flex:1 1 auto;                  /* puede crecer y encogerse */
  min-width:0;                    /* 🔑 permite el ellipsis */
  display:block;                  /* ocupa todo el alto */
}




.mg-tarjeta-shop .marca_card {
  display:flex;
  align-items:center;
  min-width:0;                    /* 🔑 permite truncar hijos */
  overflow:hidden;
}



.mg-tarjeta-shop .marca_foto {
  width: 65px;
  height: auto;
  border-radius: 8px;
  margin-right: 15px;
  
 
}

/* INFORMACIÓN DE LA MARCA */
.marca_info{
  display:flex;
  flex-direction:column;
  min-width:0;                    /* 🔑 */
  overflow:hidden;
}


.mg-tarjeta-shop .marca_nombre {
text-align: left;
text-transform: uppercase;
letter-spacing: 0.5px;
  display: block;
   white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;         /* muestra … */
  min-width:0;

}

.mg-tarjeta-shop .estrellas {color:#efb810; padding:0 0 0 8px; font-size:15px;}

.mg-tarjeta-shop .marca_ciudad {
  font:14.5px arial,verdana;
  text-align: left;
  letter-spacing: -0.5px;
  color:#577;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;         /* muestra … */
  min-width:0;


}

@media (max-width:480px){
  .mg-tarjeta-shop .marca_ciudad{font-size:13px;}
}

.virtual-ven-modal {
            display: none;
            position: fixed;
            z-index: 3;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
        }
        .virtual-ven-modal-content {
            background: #F2F3F3;
            border: 1px solid #F1F3F4;
            padding: 20px;
            border-radius: 10px;
            width: 100%;
            max-width: 300px;
            text-align: center;
            position: relative;
        }
#virtual-ven-product-image {width:100%; height:auto; margin:10px 0; border-radius:12px;}

#virtual-ven-openModalBtn {height:40px;display:flex; align-items:center; padding:2px 8px 1px 10px; cursor:pointer; border-radius:12px; color:#fff; background:rgba(var(--t-tar-col-pri),1); transition: background 0.3s ease;
    animation: headShake 2s ease-in-out 3.5s;
    animation-duration: 2s;
    animation-delay: 10s;
    animation-iteration-count: 2;
    1box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    1background: linear-gradient(140deg, rgb(var(--t-tar-col-pri)) 30%, rgb(95, 99, 104) 100%);
}    
    
}
#virtual-ven-openModalBtn:hover {filter: brightness(110%);  background#fff; color:rgba(var(--t-tar-col-pri),1);}
#virtual-ven-openModalBtn i {font-size:24px; margin-right:2px;}

.columnas {margin-left:4px;
  display: flex;
  flex-direction: column;
}

.vendedor {
  font-family: Arial, sans-serif;
  text-align:left;
  font-size: 11px;
    margin-bottom: -4px;
    letter-spacing: normal;
}

        .virtual-ven-close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 20px;
            background: none;
            border: none;
            cursor: pointer;
            color:#333;
        }
        .virtual-ven-close-btn:hover {
            color: red;
        }
        
        .virtual-btn{
            width:90%;
display:block;
    height: 40px;
    margin: 4px auto 0 auto;
    1padding: 4px 0px;
    1background: #fff;
    background: rgba(var(--t-tar-col-pri), 1);
    color: #fff;
    border-radius: 7px;
    font-size: 16px;
    border:none;
    text-align:center;
    font-weight: bold;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.09) 0px 1px 2px 0px;
        }
    

@media screen and (max-width: 340px) {
    .columnas {
  display: none;
}

}




ul.loc_insig{display:flex;flex-wrap:wrap;gap:8px 4px;margin:0;padding:0;list-style:none}
ul.loc_insig li{width:46px;border-radius:3px;display:none;flex-direction:column;align-items:center;font-size:.7rem;}
ul.loc_insig li i{font-size:1.4rem;color:#595C60;}
ul.loc_insig li span{margin-top:2px;color:#777}
.pago_img_qr {width:115px; border-radius:12px; margin:5px 0 0 0;}
.resumen_pedido {width: 98%; padding:4px 14px; background:#FAFAFA; border-radius:12px; margin:8px 0 0 0;}
.resumen_pedido .rp_fila{display:flex; color:#555; justify-content: space-between; padding:3px 0; font-size:14.5px;}
.resumen_pedido .rp_total{border-top:1px solid #E6E6E6; color:#000; font-size:17px;}








.pedido_can {
     1margin: 4px auto 0 auto;
     1padding:1.5px;
     1height: 40px;
    width:100%;
    min-width: 95px;
    display: none;
    1align-items: center;
    background: #fff;
    border-radius: 0 0 5px 5px;
    1box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    color: #222;
    1font-size:30px;
    border-top:1px solid rgba(0,0,0,0.25);;
}

.pedido_can .btn-menos, .pedido_can .btn-mas {cursor: pointer;
    width:20%;
    min-width:30px;
    1height: 60px;
    background: rgba(0, 0, 0, 0.045);
    1color: inherit;
    1border-radius: 7px;
    font-size: 25px;
    border: 1px solid transparent;
    font-weight: bold;
    text-align: center;
    line-height: 40px;

}

.pedido_can .btn-menos:hover, .pedido_can .btn-mas:hover {background:#0066FF; color:#fff;}

.pedido_can .btn-mas { color:rgba(var(--t-tar-col-pri), 1);}

.pedido_can .cant_num {
    min-width: calc(100% - 60px);
    width:60%;
    height: 45px;
    background: transparent;
    border: 1px solid transparent;
    1color: inherit;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    1outline: none;
    line-height: 40px; 
}

.can_num_i {position:absolute; bottom:0;}

.total {display:none; width:100%; position:absolute; top:0; padding:5px 3px; background:rgba(0,0,0,0.65); color:#fff; font-size:11px;font-weight: bold; text-align:center;}
.total b {font-size:15.5px;}

.1111mg-tarjeta-shop .checkbox:checked + label .mg-oferta {background:#f1f1f4; border:1px solid #1B8835;}
.111mg-tarjeta-shop .checkbox:checked + label .mg-oferta::before {z-index:1; content: "✔"; width:25.5px; height:25.5px; position:absolute; top:4px; right:7px; text-align:center; font-weight:900; font-size:18px; color:#fff; background:RGBA(23,198,83,1);border-radius: 50%; border:1px solid #1B8835;}


.mg-tarjeta-shop .cod_pais {position:absolute; width:30px; height:40px; top:10px; left:5px;
    
  1-webkit-appearance: none; /* Chrome, Safari, Opera */
  1-moz-appearance: none; /* Firefox */
  appearance: none; /* Estándar */
  1border: none; /* Quita el borde */
  background:transparent; /* Quita el fondo */
  1padding: 0; /* Quita el relleno */
  1margin: 0; /* Quita el margen */
  1font: inherit; /* Usa la fuente del elemento padre */
  1color: inherit; /* Usa el color del elemento padre */
  cursor: pointer;
  
        border: none;
      background: none;
       outline: none;
       color:#000;
    
}

.mg-tarjeta-shop .tarjeta-form {
grid-column: 1 / -1;
display: flex;
flex-direction: column;
gap: 2px;

1max-width: 350px;
background-color: #fff;
1padding: 10px 0 5px 0;
1position: relative;
}

.mg-tarjeta-shop .tarjeta-form .flex {
  display: flex;
  1width: 50%;
  gap: 10px;
}

.mg-tarjeta-shop .tarjeta-form label {
  position: relative;
}

.mg-tarjeta-shop .tarjeta-form label .input, textarea {

  width: 100%;
  font:18px arial,verdana;
  padding: 10px;
  border:1px solid rgb(219, 218, 222);
  border-radius: 15px;
  outline: 0;
  background:#FaFaFa;
  margin:10px 0 0 0;
}

.mg-tarjeta-shop .tarjeta-form label .input:hover, .mg-tarjeta-shop .tarjeta-form label .input:focus {

  border: 1px solid #1A73E8;
  caret-color: red;

  }  

 .mg-tarjeta-shop .tarjeta-form label .input + span {
  position: absolute;
  left: 10px;
  1top: 27px;
  color: grey;
  font-size: 15px;
  cursor: text;
  transition: 0.3s ease;
  background:#FaFaFa;
  padding:0 6px;
  border-radius:5px;
}

.mg-tarjeta-shop .tarjeta-form label .input:placeholder-shown + span {top:22px;font-size:18px;background:#FaFaFa;}
.mg-tarjeta-shop .tarjeta-form label .input:focus + span{top:4px;font-size:12px;color:#000;font-weight:600;}
.mg-tarjeta-shop .tarjeta-form label .input:valid + span  {top:4px;font-size:12px;color:#356f72;font-weight: 600; }
.mg-tarjeta-shop .tarjeta-form label .input:read-only + span,
.mg-tarjeta-shop .tarjeta-form label .input[readonly] + span {top:4px;font-size:0.75em;font-weight:600;color:#333;}

.1mg-tarjeta-shop .tarjeta-form label .input:read-only:hover,
.1mg-tarjeta-shop .tarjeta-form label .input[readonly]:hover,
.1mg-tarjeta-shop .tarjeta-form label .input:read-only:focus,
.1mg-tarjeta-shop .tarjeta-form label .input[readonly]:focus {1border:1px solid #000;outline:none;}  


.mg-tarjeta-shop .tarjeta-form label .input:invalid:not(:focus):not(:placeholder-shown) + span {
  top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #DF1414;
}




.mg-tarjeta-shop .tarjeta-form .tar-nota {
    1width: 100%;
    font-family: Arial;
    box-sizing: border-box;
    padding: 10px;
    font-size: 14px;
    line-height: 1.5;
    resize: none; /* Evita que el usuario cambie el tamaño manualmente */
    overflow: hidden; /* Oculta la barra de desplazamiento */
    caret-color: red; /* Cambia el color del cursor a rojo */
      border: 1px solid rgba(105, 105, 105, 0.397);
  border-radius: 15px;
}
.mg-tarjeta-shop .tarjeta-form .tar-nota::placeholder,
.mg-tarjeta-shop .tarjeta-form .tar-nota::-webkit-input-placeholder,
.mg-tarjeta-shop .tarjeta-form .tar-nota:-moz-placeholder,
.mg-tarjeta-shop .tarjeta-form .tar-nota::-moz-placeholder,
.mg-tarjeta-shop .tarjeta-form .tar-nota:-ms-input-placeholder {
    font-family: Arial, sans-serif;
    font-size: 10px;
    color: #ccc;
}

.coti_ubi_direccion_texto {width: 100%;margin:8px 4px;text-align:left;}
.mg-tarjeta-shop .tarjeta-form .tar-nota:hover, .mg-tarjeta-shop .tarjeta-form .tar-nota:focus {

  border: 1px solid #0066FF;
  caret-color: #0066FF;

  } 

.mg-tarjeta-shop .tarjeta-form .datos {width:100%; display:flex; flex-direction:column; gap:10px;}

.mg-tarjeta-shop .tarjeta-form .dato-izq .conten, .mg-tarjeta-shop .tarjeta-form .dato-der .conten {
  1display: flex; 
  1align-items: center;
  1justify-content: center;
  1min-height:50px;
  1padding:10px 0 0 0;
 }

@media (min-width: 768px) {
.mg-tarjeta-shop .tarjeta-form .datos {flex-direction:row;}
.mg-tarjeta-shop .tarjeta-form .dato-izq, .mg-tarjeta-shop .tarjeta-form .dato-der {flex:1; }
}



.mg-tarjeta-shop .sticky {width:100%; background:#fff; grid-column: 1 / -1; display:none; padding:4px; border-radius:12px; position:-webkit-sticky; position:sticky; bottom:0; z-index:1000; animation: zoomIn; animation-duration: 0.6s;}

.mg-tarjeta-shop .enviar-pedido {width:60%; height:45px; position:relative; overflow:hidden; text-align:center; color:#fff; font-size:15px; font-weight:600; border-radius:15px; text-decoration:none; background:rgba(var(--t-tar-col-pri), 1); 11111background:linear-gradient(170deg, rgba(var(--t-tar-col-pri), 1) 30%, rgb(95, 99, 104) 100%); border:none; cursor:pointer; text-shadow: 1px 1px 1px #00000040; transition:all 0.2s;
11box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
11box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;}
.mg-tarjeta-shop .enviar-pedido .spinner {display:none; position:absolute; top:18px; right:10px;}
.mg-tarjeta-shop .enviar-pedido:active .spinner {display: inline-block;}
.mg-tarjeta-shop .enviar-pedido:hover {filter:brightness(120%);   border: none;}
.mg-tarjeta-shop .enviar-pedido:active {transform:scale(0.98); box-shadow: 0px 0px 10px 0px rgba(195,217,0.3); 17px 5px 56px -10px  #C3D900;} 
#con-turnos{margin:0 10px 0 0;}
.mg-tarjeta-shop .valores {width:40%; font-size:14px; font-weight: bold; display:inline-block; text-align:right; 
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;    
    color:#000;
}
.mg-tarjeta-shop .item {font-size:18px; color:#777;}
.mg-tarjeta-shop .item i {font-size:15px; color:#0066FF;}

#informacion {
        background: #fff; border-radius:19px;
    width:100%;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;

}
#informacion.visible {
    max-height: max-content; /* Ajusta esto a la altura que necesites */
    opacity: 1;
    1margin:10px auto 0 auto;
padding:8px 25px 5px 25px;
}

@media (max-width:768px) {
.mg-tarjeta-shop {padding:6px 10px 0 10px; gap:20px 10px;}
}

@media (max-width: 600px) {
.mg-tarjeta-shop {grid-template-columns:repeat(4, 1fr);}
}

@media (max-width: 529px) {.mg-tarjeta-shop {width:100%;}
.mg-tarjeta-shop {grid-template-columns:repeat(3, 1fr);}
.mg-tarjeta-shop .mg-oferta .mg-oferta-img{height:170px;}
}

@media (max-width:499px) {
.mg-tarjeta-shop {grid-template-columns:repeat(3, 1fr); gap:16px 8px;}
.mg-tarjeta-shop .mg-oferta .mg-oferta-img{height:165px;}
.mg-tarjeta-shop .mg-oferta .precio b {font-size:12.5px}
#informacion.visible {padding:8px 5px 2px 5px;}
}

@media (max-width:425px) {
.mg-tarjeta-shop .mg-oferta .mg-oferta-img{height:155px;}
}

@media (max-width: 360px) {
.mg-tarjeta-shop {grid-template-columns:repeat(2, 1fr); padding:4px 10px 0px 10px; gap:20px 10px}
.mg-tarjeta-shop .mg-oferta .mg-oferta-img{height:170px;}
}
@media (max-width: 320px) {
.mg-tarjeta-shop {padding:4px 8px 0px 8px; gap:16px 8px}
.mg-tarjeta-shop .mg-oferta .mg-oferta-img{height:160px;}
.mg-tarjeta-shop .enviar-pedido {width:50%;}
.mg-tarjeta-shop .valores {width:50%;}
}
@media (max-width: 300px) {
.mg-tarjeta-shop {grid-template-columns:repeat(2, 1fr); padding:4px 8px 0px 8px; gap:16px 8px}
.mg-tarjeta-shop .mg-oferta .mg-oferta-img{height:150px;}
}
@media (max-width: 275px) {
.mg-tarjeta-shop {grid-template-columns:repeat(1, 1fr); padding:4px 14px 0px 14px; gap:20px 14px}
.mg-tarjeta-shop .mg-oferta .mg-oferta-img{height:180px;}    
}


.mdl_basico {position:fixed; color:#333; left: 0; top: 0; width:100%; height:100%; overflow:auto; z-index:1002; display: none; background-color: rgba(29, 29, 31, 0.65); -webkit-backdrop-filter:saturate(180%) blur(2px); backdrop-filter:saturate(180%) blur(2px);}
.mdl_basico .contenido {margin:0 auto; padding:15px 8px 0.5px 8px; background:#fff; font:15px Poppins,sans-serif; border-radius:10px; position:relative; width:98%; max-width:300px; top:50%; transform:translateY(-50%); box-shadow:rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;}
.mdl_basico .contenido .avatar {height:60px;width:60px;margin:0 0 10px 0;border:1px solid #01B5FF; background-repeat: no-repeat; background-position: 50%; border-radius: 50%; background-size: 100% auto;}
.mdl_basico .contenido .btn_conservar {width:45%; height:45px; padding:0 4px; margin:0 4px; text-align:center; color:#fff; font-size:15px; font-weight:600; border-radius:15px; text-decoration:none; background:rgba(var(--t-tar-col-pri), 1); border:none; cursor:pointer;text-shadow: 1px 1px 1px #00000040;}
.mdl_basico .contenido .btn_conservar:hover, .mdl_basico .cnt1  .btn_conservar:active {filter: brightness(160%);}


.mdl {
    display: none;
    font:16px Poppins, sans-serif;
    color:#444;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: saturate(180%) blur(0.5px);
    backdrop-filter: saturate(180%) blur(0.5px);
    1background-color: rgba(29, 29, 31, 0.45);
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 70%, rgba(0, 0, 0, 0.8) 100%);
    overflow: auto;
    transition: opacity 0.3s ease;
    opacity: 0;
    z-index:10001;
}


.mdl.mos {display:block; opacity:1;}
.mdl .cnt { background: #fff;
    margin: 0 auto;
    1padding: 5px 0;
    border:none;
    border-radius: 10px;
    position: relative;
    1width: 90%;
    max-width: 800px;
    
    top: 50%;
    transform: translateY(-50%); 
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease; 
    box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
}


.mdl .cuerpo {
    display: flex;
    flex-direction: row;
    overflow-y: auto;
    overflow-x: none;
    height: 391px;
    border-radius:10px;
}


.mdl.mos .cnt {
    transform: translateY(-50%) scale(1);
    opacity: 1;
}

.mdl span.crr {
    position: absolute;
    right: 20px;
    top: 10px;
    padding: 4px 8px;
    cursor: pointer;
    text-align: center;
    z-index: +2;
    color: #6E6E73;
    border-radius:50%;
    1-webkit-backdrop-filter: saturate(180%) blur(20px);
    1backdrop-filter: saturate(180%) blur(20px);
    background-color:#fff; rgba(29, 29, 31, 0.35);
    box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;

}
.mdl .crr i {font-size: 24px; }

.mdl .crr:hover {scale:0.90; background:#FF7E86;}






.mdl .img, .mdl .des {width:50%;}
.mdl .img {position:sticky; top:0; background: #F6F6F6; border-radius:10px 0 0 10px;}
.mdl .img img {width:100%; border-radius:10px 0 0 10px;}
.mdl .des {padding: 0 10px 0px 40px; font-size:15.5px; background:#fff; line-height:1.45;}
.mdl .des h4 {position:sticky; top:0; margin:0; background:#fff; font-size:16px; padding:20px 50px 10px 0; width:100%; border-bottom:1px solid #ccc; color:rgba(var(--t-tar-col-pri),1);}
.mdl .pre {margin:5px 0; font-size:18px;}



@media (max-height: 412px) {.mdl .cuerpo { height: 290px;}}


@media (max-width: 600px) {
    .mdl .cnt {
        width: 98%;
    }
    .mdl .des { padding: 0 10px; }
}

@media (max-width: 430px) {
    .mdl .cnt {
        width: 96%;
        max-width: none;
    }
    
    .mdl .cuerpo {
        flex-direction: column;
        height: 85vh;
    }            

    .mdl .img, .mdl .des {
        width: 100%;
    }

    .mdl .des { padding: 0 30px; border-radius: 0 0 10px 10px;}
    .mdl .img { position: relative; border-radius: 10px 10px 0 0; }

    .mdl .img img {
        width: 100%;
        height: auto;
        border-radius: 10px 10px 0 0;
    }
}