*,*::before,*::after {box-sizing:border-box; touch-action: manipulation;}

body::-webkit-scrollbar{width:8px;} body::-webkit-scrollbar:hover{width:12px;} body::-webkit-scrollbar-track{background-color:#15171C;} body::-webkit-scrollbar-thumb {background-color:#007AFF; border-radius:10px;} body::-webkit-scrollbar-thumb:hover {background-color: #17C692;}
body {font-family:var(--t-tar-fnt),"Lato", sans-serif;
    margin:0; padding:0; height:100vh;
    background: var(--fondo);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    scroll-behavior: smooth;
}

 
.portada {position:relative; 1display:flex; width:clac(100% - 10px); height:200px; border-radius:20px;
      background: var(--portada);
      margin:-5px -5px 49px -5px;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

.avatar-grande{
                width: 150px;
                height: 150px;
                border-radius:50%;
                border: 1px solid rgba(var(--t-tar-col-pri),1);
                margin:0px auto 5px auto;
                box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
                border-color: rgba(var(--t-tar-col-pri),1); 
                background-image: var(--avatar);
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
            }


.retrato-foto{
width:100%;
height:300px;
border-radius:25px 25px 0 0;
background:linear-gradient(180deg, rgba(0,0,0, 0.05) 75%, rgba(255,255,255, 0.9)), var(--avatar) no-repeat center center;
                    -webkit-background-size: cover;
                    -moz-background-size: cover;
                    -o-background-size: cover;
                    background-size: cover;
                    display: flex;
                    justify-content: space-between;
                    align-items: space-between;
                    flex-direction: column;


                }

@media screen and (max-width: 480px) {
.retrato-foto{border-radius:0; height:250px;}
}


.avatar-cir {
      position: absolute;
      left: calc(50% - 50px);
      top:150px;
      width: 100px;
      height: 100px;
      background:rgba(var(--t-tar-col-pri), 0.2);
      
      border-color: rgba(var(--t-tar-col-pri),1); 
      background-image: var(--avatar);
      background-repeat: no-repeat; background-position: 50%; border-radius: 50%; background-size: 100% auto;
      
      border-radius: 50%;
      border: 2px solid rgba(var(--t-tar-col-pri),1);
      box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
      animation: pulse; 
        animation-duration: 2s;
    }



.filos-portada{
    
width:100%;
height:240px;
border-radius:20px 20px 0 0;
    margin: 0 0 -150px 0;
                    background:var(--portada);
                    -webkit-background-size: cover;
                    -moz-background-size: cover;
                    -o-background-size: cover;
                    background-size: cover;
                    1111margin:0 0 20px 0;
                    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 70%);
                }

.filos-avatar{top: 1px;
                    width: 130px;
                    height: 130px;
                    position: relative; 
                    1top:-130px;
                    left: 20px;
                    1margin: 0 0 -90px 0;
                    -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
                    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
                    background:var(--avatar) no-repeat center center;
                    -webkit-background-size: cover;
                    -moz-background-size: cover;
                    -o-background-size: cover;
                    background-size: cover;
                }


.ondas-foto{
                    width:100%;
                    1height: clamp(200px, 100%, 350px);
                    height:220px;
                    border-radius:25px 25px 0 0;
                    1background: url('.colossus_dominio_base.'/i/u/'.INF_user['portada_foto'].') no-repeat center center;
                    background: var(--portada);
                    -webkit-background-size: cover;
                    -moz-background-size: cover;
                    -o-background-size: cover;
                    background-size: cover;
                    display: flex;
                    justify-content: space-between;
                    align-items: space-between;
                    flex-direction: column;
                    text-align:left;
                    margin:0 0 -118px 0;
                    clip-path: polygon(100% 0%, 0% 0% , 0.00% 85.05%, 2.50% 84.47%, 5.00% 84.03%, 7.50% 83.74%, 10.00% 83.61%, 12.50% 83.64%, 15.00% 83.82%, 17.50% 84.17%, 20.00% 84.66%, 22.50% 85.29%, 25.00% 86.04%, 27.50% 86.91%, 30.00% 87.87%, 32.50% 88.90%, 35.00% 89.99%, 37.50% 91.11%, 40.00% 92.24%, 42.50% 93.36%, 45.00% 94.44%, 47.50% 95.47%, 50.00% 96.41%, 52.50% 97.27%, 55.00% 98.01%, 57.50% 98.62%, 60.00% 99.09%, 62.50% 99.41%, 65.00% 99.58%, 67.50% 99.58%, 70.00% 99.43%, 72.50% 99.12%, 75.00% 98.66%, 77.50% 98.06%, 80.00% 97.34%, 82.50% 96.49%, 85.00% 95.55%, 87.50% 94.53%, 90.00% 93.45%, 92.50% 92.34%, 95.00% 91.21%, 97.50% 90.09%, 100.00% 89.00%);
                    1position: relative;
                }
.ondas-avatar{top:4x;
                    width: 120px;
                    height: 120px;
                    position: relative; 
                    left: 20px;
                    1margin: 0 0 -120px 0;
                    border: solid 2px #fff;
                    border-radius:50%;
                    background:var(--avatar) no-repeat center center;
                    -webkit-background-size: cover;
                    -moz-background-size: cover;
                    -o-background-size: cover;
                    background-size: cover;
                }





    

.popup {max-width:600px; width:100%; align-items:center; box-sizing:border-box; display:inline-block; background:#fff;border-radius:30px; padding:4px; margin:2% 0; transition: all 0.2s ease-in-out;}
.popup-borde {
    position: relative;
    isolation: isolate;
    background: var(--tarjeta);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.popup-borde::before{
    border-radius:30px;
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:0;
    
  
backdrop-filter:blur(20px) saturate(110%);
-webkit-backdrop-filter:blur(20px) saturate(110%);
-moz-backdrop-filter: blur(20px) saturate(110%);
-ms-backdrop-filter: blur(20px) saturate(110%);
-o-backdrop-filter: blur(20px) saturate(110%);



  1background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.28) 0%,rgba(255,255,255,.15) 45%,rgba(255,255,255,.08) 100%);
  1border:1px solid rgba(255,255,255,.48);
  1box-shadow:inset 0 0 14px rgba(255,255,255,.35),0 6px 40px rgba(0,0,0,.35);
  box-shadow:inset 0 0 14px rgba(255,255,255,.35),0 0px 5px rgba(0,0,0,.05);
  transition:background .35s,box-shadow .35s;
    
    
    
}
.popup-borde > *{position:relative;z-index:1;}

.popup-borde:hover { 1box-shadow:inset 0 0 14px rgba(255,255,255,.35),0 6px 40px rgba(0,0,0,.35); 1box-shadow: 0 0.125rem 0.625rem rgba(22, 170, 255, 0.4), 0 0.0625rem 0.125rem rgba(22, 170, 255, 0.5);} 
.popup .titulo {color:#01B5FF; #161823; font-size: 19.5px; font-weight:600; margin: 5px 0 7px 0px;}
.popup .subtitulo {color: #333; font-size: 20px; font-weight:600; margin: 2px 0; width:98%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow: 0 0 2px rgba(255, 255, 255, 1), 0 0 1px rgba(255, 255, 255, 1);}
.popup .texto {width: 98%; color: #3A3A3A; font-size: 17px; margin: 2px 5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; text-shadow: 0 0 2px rgba(255, 255, 255, 1), 0 0 1px rgba(255, 255, 255, 1);}
.popup .texto a {color: #01B5FF; font-size: 18px; text-decoration: none;}
.popup .texto a:hover {color: #F2BB00;}
.popup .linea {background: #01B5FF; height:1px; margin:10px -2px 0px -2px;}

.popup .fila:after {content:"";display:table;clear:both;width:100%;}
.popup .col {float:left;}

.marco-traslucido{
    background:rgb(255,255,255,0); border-radius:6px; padding:2px 2px;
}

.linea-animada {
  background: repeating-linear-gradient(to right,#5f86f2 12.5%, #a65ff2 25%, #f25fd0 37.5%, #f25f61 50%, #f2cb5f 62.5%, #abf25f 75%, #5ff281 87.5%, #5ff2f0 100%);
  width: 94%; height: 1px;
  background-size: 200% auto;
  background-position: 0 100%;
  animation: linea-gradient 2s infinite;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  margin:7px auto 0 auto;
}

@keyframes linea-gradient { 0% { background-position: 0 0;} 100% { background-position: -200% 0;} }

.tarjeta {position:relative; text-align:center; margin:4px; padding:5px 5px 4px 5px; border-radius: 25px; background:rgba(255,255,255, 0.92);} 

.bar-cabeza {float:left; height:102px; }


.zoom-in-texto {animation:zoomIn-txt .5s ease-in-out;}
@keyframes zoomIn-txt {
0% {transform: scale(0.5); opacity: 0;}
25% {transform: scale(1.3); opacity: 1;}
75% {transform: scale(0.5); opacity: 0;}
100% {transform: scale(1.3); opacity: 1;}
}

@keyframes headShake {
    0% {
      transform: translateX(0);
    }
    6.5% {
      transform: translateX(-6px) rotateY(-9deg);
    }
    18.5% {
      transform: translateX(5px) rotateY(7deg);
    }
    31.5% {
      transform: translateX(-3px) rotateY(-5deg);
    }
    43.5% {
      transform: translateX(2px) rotateY(3deg);
    }
    50% {
      transform: translateX(0);
    }
  }
  
   @keyframes zoomIn {
    0% {
      opacity: 0;
      transform: scale(0.3);
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }



.bar-redes {text-align: center;animation:headShake 2s ease-in-out 3.5s; animation-duration: 2s; animation-delay: 4s;animation-iteration-count: 3;}
.bar-redes-titulo {font-size:12.5px;margin:4px 0 5px 0;color:#333;}
.bar-redes a {width:45px; display:inline-block; margin-right:2px; text-decoration:none; color:#333; padding:2px; border-radius:4px; transition:transform 0.2s, background-color 0.2s, box-shadow 0.2s, color 0.2s;}
.bar-redes a:hover {transform:translateY(-1.5px); background:#F1F1F4; box-shadow:0 1px 5px rgba(0, 0, 0, 0.2); color:#000;}
.bar-redes a:active {background:transparent; transform:scale(0.90); box-shadow:none; box-shadow: 7px 5px 56px -10px #C3D900;}        
.bar-redes i {display:block; font-size:32px;}
.bar-redes span {display:block; font:10.8px abel,arial; text-shadow: 0 0 4px rgba(255, 255, 255, 0.5), 0 0 4px rgba(255, 255, 255, 0.5);}
    


.1bar-redes{padding:5px 0; background:#e8e8e8;}
.1bar-redes a {
  display: inline-block;
  margin:8px 5px 0 0;
  width: auto;
  1place-items: center;
  background: #fff;
  padding: 8px;
  border-radius: 10px;
  box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
          -6px -6px 10px -1px rgba(255,255,255,0.7);
  border: 1px solid rgba(0,0,0,0);
  cursor: pointer;
  transition: transform 0.5s;
}

.1bar-redes a:hover {
  box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.2),
          inset -4px -4px 6px -1px rgba(255,255,255,0.7),
          -0.5px -0.5px 0px rgba(255,255,255,1),
          0.5px 0.5px 0px rgba(0,0,0,0.15),
          0px 12px 10px -10px rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.1);
  transform: translateY(0.5em);
}

.1bar-redes a i {font-size:32px;}
.1bar-redes a span {display:none;}



.btn_contacto{ margin:0 10px; padding:12px 6px 2px 5px; display: inline-block; animation: zoomIn; animation-duration: 0.6s; animation-delay: 1s;
}
.btn_contacto span{ position:relative; margin-top:5px;}

.btn_tar {width: 50px; height: 48px; margin:0 auto 4px auto; font-size:20px; border-radius:16px; color: #fff; text-align: center; box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
        transition:transform .25s,box-shadow .25s; background: linear-gradient(140deg , rgb(var(--t-tar-col-pri)) 100%, rgb(95, 99, 104) 100%);}
.btn_tar i {padding: 12px 0 0 0; font-size:23px ;}
.btn_tar:hover, .btn_tar:active {transform:scale(1.15); box-shadow:inset 0 0 10px rgba(255,255,255,.4),0 6px 30px rgba(0,0,0,.3);
background:#fff; color:rgb(var(--t-tar-col-pri)) ; 1box-shadow: 0 0.125rem 0.625rem rgba(22, 170, 255, 0.4), 0 0.0625rem 0.125rem rgba(22, 170, 255, 0.5); 1filter: brightness(135%);} 

.btn_contacto a {font:13.4px cabin,arial,poppins  ; color: #4C5863; font-weight: 600; text-decoration: none; 1letter-spacing:0.8px; }

.btn_contacto a span {text-shadow: 0 0 3px rgba(255, 255, 255, 0.7), 0 0 1px rgba(255, 255, 255, 1);}

.btn_contacto a:hover {color: #01B5FF; }

.avatar { height: 95px; width:100%; max-width: 100px; border: 1px solid #01B5FF; background:rgba(var(--t-fon-col), 0.07); background-repeat: no-repeat; background-position: 50%; border-radius: 50%; background-size: 100% auto;}

.btn-mg-administrar {width:35px;height:35px;margin:4px 6px;float:right;cursor:pointer;background:#EFEFEF;#fff;color:#272727;#6E6E73;font:14.5px colossus;font-weight:bold;border:none;border:1px solid #E3E3E3;#E2E2E2;transition:0.4s;text-decoration:none;display:flex;align-items:center;justify-content:center;border-radius:50%;111box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;} .btn-mg-administrar:hover {color:#fff; background:rgba(var(--t-tar-col-pri),1);text-decoration:none;box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;}
.btn-mg-administrar i {font-size:19px;}
.btn-mg-administrar img{width:35px; border-radius: 50%; margin:0;}
.btn-mg-administrar .usr-activo{animation: zoomIn; animation-duration: 1s; animation-delay: 1.5s;}
.btn-compartir-pro {position:absolute;z-index:100;float:left;}

@media screen and (max-width: 600px) {.popup {width:99%;margin:2px 0 0 0;} .btn_contacto{margin:0 6px;}}

@media screen and (max-width: 480px) {
.popup {width:100%; padding:0px;}
.marco-traslucido{padding:0px;}
}
.btn_contacto{margin:0 4px; padding:12px 1px 2px 0px;}
}
@media screen and (max-width: 392px) {
.popup { width:99.5%;}
.btn_contacto{ margin:0 3px; }
}
@media screen and (max-width: 340px) {

.bar-redes a {width:38px;}
.bar-redes i {font-size:28px;}
.bar-redes span {font-size:8.5px;}
.btn_contacto{ margin:0 0.5px;}
.btn-mg-administrar{margin:4px 3px;}
}
@media screen and (max-width: 312px) {
.popup {width:100%; }
}

@media (max-width: 298px) { .btn_contacto{margin:0px;} .btn_contacto .btn_tar {width:42px;} }








    .mi-qr {border-radius:12px; margin:12px;width:fit-content;padding: 5px 5px 1px 5px;background:#fff;}
    .mi-qr a{text-decoration: none;}
    .mi-qr:hover {scale: 1.04;} 

    

    
    .red {width: 48px; height: 48px; paddin:20px; background:rgba(var(--t-tar-col-pri),1);}
    
    .animacion-perfil{
        animation: zoomIn;
        animation-duration: 1s;
    }
    
    .negocio{
        width: 95%;
        margin:10px 0;
        border-radius:12px;
        padding:5px;
        background:rgba(255,255,255,0.9);
        1box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
        1box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 5px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px;
    }
    
    .tienda-titulo {
        display: flex;
        align-items: center; /* Alinea los elementos verticalmente en el centro */
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        padding: 4px;
    }
    
    .titulo-img {
        width: 60px;
        height: 60px;
        display: inline-block;
        padding: 0 2px 0 0; /* Ajusta el padding para alinear correctamente */
        vertical-align: middle;
    }
    
    .titulo-img img {
        border-radius: 5px;
        width: 100%;
        height: 100%;
        object-fit: contain; /* Ajusta la forma en que la imagen se ajusta al contenedor */
    }
    
    .titulo-text {
        padding: 4px 0 0 5px;
        width: calc(100% - 77px);
        height: 60px;
        display: inline-block;
    }
    
    .tienda-titulo p {
        padding: 0;
        margin: 0;
        overflow: hidden;
        max-width: 100%;
    }
    
    .titulito {
        font-weight: 700;
    }
    
    .container {
        width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      1margin: 30px;
      gap:10px;
      padding:4px 0;
    }
    
    .card {
      1display:inline-block;
      1margin: 2%;
      border:1px solid #EFEFEF;
      color:#007aff;
      width: 25%;
      height: 50px;
      box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.04) 0px 1px 2px 0px;
      border-radius: 10px;
      transition: .2s all;
      cursor: pointer;
      1align-items: center;
      1text-align: center;
      font-size: 13px;
      padding: 5px 5px 0 5px;
      text-decoration:none;
    }
    .card i{
        font-size:22px;
    }
    
    .card > span {
      display: block;
      margin: auto;
      1max-width: 40px;
    }
    
    .container:hover .card {
      filter: blur(3px);
      opacity: .5;
      transform: scale(.98);
      box-shadow: none;
    }
    
    .container:hover .card:hover {
      transform: scale(1);
      filter: blur(0px);
      opacity: 1;
      box-shadow: 0 8px 20px 0px rgba(0, 0, 0, 0.125);
      background: #007aff;
      color: #fff;
      border:1px solid #EFEFEF;
    }
    
    .pie-tarjeta{
        margin-top:10px;
        color:#9A9CAE;
        background:rgba(13, 14, 18, 0.75);
        border-radius:10px;
        padding:6px 2px;
        font-weight: 600;
    }
    
.texto-form {text-align:left; font: 20px VVDSCondMed, impact;}

.text-condicion {text-align:left; font:11.5px arial,tahoma; color:#5d7186;padding:0 5px 5px 12px;}

.texto-form-titulo {color: rgba(var(--t-tar-col-pri),1); font-weight: bold;}



  .video {
    width: 98%;
    aspect-ratio: 16/9; /* Mantener relación de aspecto para video */
    max-height: 190px; /* Límite máximo */
    margin: 15px 0;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    cursor: pointer;
    background: #000; 
    1border: solid 1px #fff;
  }
  .video .videoId {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #000;
  }
  .video .video-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .video .play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    background: url(tarjeta/boton-play.webp) no-repeat center;
    background-size: 50%;
    transform: translate(-50%, -50%);
  }
  .video .videotxt {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    bottom: 27px;
  }
  .video .videotxt span {
    max-width: 90%;
    background: rgba(0,0,0,0.3);
    border-radius: 6px;
    padding: 2px 10px;
    font: 15px arial, verdana;
    color: #fff;
    text-shadow: 0 0 5px #000, 0 0 5px #000;
  }
  @media (max-width: 420px) {
    .video {
      max-height: 150px;
      width: 97%;
    }
  }
    @media (max-width: 320px) {
    .video {
      max-height: 140px;
      width: 96%;
    }
  }