/* escritorio____________________*/

.foto {
    grid-column: 2/12;
}

.fotocuadrada {
    grid-column: 3/11;
}

.chip3c {
    grid-column: 9/11;
    margin-top: 12px;
}

.texto {
    grid-column: 3/8;
    margin-top: 12px;
}

.tip {
    grid-column: 3/11;
}

.chipvertical {
    grid-column: 3/5;
}

.fotovertical {
    grid-column: 5/11;
    margin-left: 24px;
}

.citavertical {
    grid-column: 3/5;
    margin-top: -350px;
}

.corazon {
    position: absolute;
    z-index: 2;
    width: 30px;
    height: 30px;
    right: 312px;
    top:336px;
    animation: corazon 6s linear infinite;
}
@keyframes corazon {
    0%{
        transform: translateY(0px) translateX(0px) scale(1, 1) rotate(0);
        opacity: 1;
    }
    10% {
        transform: translateY(-50px) translateX(20px) scale(1, 1.05);
        opacity: 0.5;
    }
    20% {
        transform: translateY(-100px) translateX(0px) scale(1, 1.1);
        opacity: 1;

    }
    30% {
        transform: translateY(-150px) translateX(20px) scale(1, 1.15);
        opacity: 0.5;
    }
    40% {
        transform: translateY(-200px) translateX(0px) scale(1, 1.2);
        opacity: 0;
    }
    100% {
        transform: translateY(-200px) translateX(0px) scale(1, 1.2);
        opacity: 0;
    }
    
}

.estrella {
    position: absolute;
    z-index: 2;
    width: 30px;
    height: 30px;
    left: 312px;
    top:132px;
    animation: estrella 3s linear infinite;
}
@keyframes estrella {
    0%{
        transform: translateY(0px) translateX(0px) scale(1, 1) rotate(0);
        opacity: 1;
    }
    5% {
        transform: translateY(-40px) translateX(20px) scale(1, 1.05) rotate(90deg);
        opacity: 1;
    }
    10% {
        transform: translateY(-80px) translateX(30px) scale(1, 1.1) rotate(180deg);
        opacity: 1;

    }
    15% {
        transform: translateY(-120px) translateX(40px) scale(1, 1.15) rotate(270deg);
        opacity: 1;
    }
    20% {
        transform: translateY(-160px) translateX(50px) scale(1, 1.2) rotate(360deg);
        opacity: 0;
    }
    100% {
        transform: translateY(-160px) translateX(50px) scale(1, 1.2) rotate(0);
        opacity: 0;
    }
    
}

.burbuja {
    position: absolute;
    z-index: 2;
    width: 40px;
    height: 40px;
    right: 3vw;
    top:33vw;
    animation: burbuja 5s linear infinite;
}
@keyframes burbuja {
    0%{
        transform: translateY(0px) translateX(0px) scale(1, 1);
        opacity: 1;
    }
    10% {
        transform: translateY(-40px) translateX(20px) scale(1, 1.05);
        opacity: 1;
    }
    20% {
        transform: translateY(-80px) translateX(0px) scale(1, 1.1);
        opacity: 1;

    }
    30% {
        transform: translateY(-120px) translateX(20px) scale(1, 1.15);
        opacity: 1;
    }
    40% {
        transform: translateY(-160px) translateX(0px) scale(1, 1.2);
        opacity: 0;
    }
    100% {
        transform: translateY(-160px) translateX(0px) scale(1, 1.2);
        opacity: 0;
    }
    
}









/* responsive _________________ */
@media (max-width:768px){


    .foto {
        grid-column: 1/-1;
    }
    
    .fotocuadrada {
        grid-column: 1/-1;
    }
    
    .chip3c {
        grid-column: 1/-1;
        grid-row: 2/3;
        margin-top: 12px;
    }
    
    .texto {
        grid-column: 1/-1;
        margin-top: 12px;
    }
    
    .tip {
        grid-column: 1/-1;
    }
    
    .chipvertical {
        grid-column:1/-1;
        grid-row: 2/3;
    }
    
    .fotovertical {
        grid-column: 1/-1;
        margin-left: 0;
    }
    
    .citavertical {
        grid-column: 1/-1;
        margin-top: 12px;
    }
  
   
}



/*Resoluciones mayores a 1200 */
@media screen and (min-width: 1200px) {
 


}