.card {
   
    position: relative;
    max-width: 100%;
    height: 400px;
    background-color: #f2f2f2;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    perspective: 1000px;
    box-shadow: 0 0 0 5px #ffffff80;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
  }
  
 
  

  
  .card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);
  }
  
  .card__content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #020202ec;
    transform: rotateX(-90deg);
    transform-origin: bottom;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
  
  .card:hover .card__content {
    transform: rotateX(0deg);
  }
  
  .card__title {
    margin: 0;
    font-size: 30px;
    color: #fdf9f9;
    font-weight: 700;
    
  }

  .card_titlediv{
   background-color: rgba(0, 0, 0, 0.733);
   width: 100%;
   padding: 1rem !important;
  font-size: 25px !important;
  border-radius: 0 !important;
  
  }
  
  .card:hover svg {
    scale: 0;
  }
  
  .card__description {
    margin: 10px 0 0;
    font-size: 18px;
    color: #f5f0f0;
    line-height: 1.4;
  }
  
.accordion-button:active{
  border: none !important;
  background-color: none;
}
  /* imagenes */

.tik{
  background-image: url('../img/TIK\ TOK\ -min.webp');
  background-position: 35% 65%;
    filter: grayscale(75%);
    background-size: cover;
    background-repeat: no-repeat;
  }
.campaña{
  background-image: url('../img/DSC_8632-min.webp');
  background-position: 85% 15%;
    filter: grayscale(75%);
    background-size: cover;
    background-repeat: no-repeat;
  }
.influencers{
    background-image: url('../img/IMG_4311.webp');
    background-position: 45% 55%;
    filter: grayscale(75%);
    background-size: cover;
    background-repeat: no-repeat;
  }
.foto{
    background-image: url('../img/PORTADA\ FOTO\ PRODUCTO.webp');
    background-position: 95% 5%;
    filter: grayscale(75%);
    background-size: cover;
    background-repeat: no-repeat;
  }
.eventos{
    background-image: url('../img/PORTADA\ DE\ COBERTURA\ DE\ EVENTOS.webp');
    background-position: 75% 25%;
    filter: grayscale(75%);
    background-size: cover;
    background-repeat: no-repeat;
  }
.cober{
    background-image: url('../img/IMG_4711-min.webp');
    background-position: 85% 15%;
    filter: grayscale(75%);
    background-size: cover;
    background-repeat: no-repeat;
  }

 .campaña:hover{
  filter: grayscale(0);
 } 
 .diseño:hover{
  filter: grayscale(0);
 } 
 .tik:hover{
  filter: grayscale(0);
 } 
 .pauta:hover{
  filter: grayscale(0);
 } 
  
 
 .card_titlediv{
    color: #ffffff;
    font-size: 35px;
    font-weight: bolder;
    padding: 3rem;
    border-radius: 5px;
    text-shadow: -1px 4px 6px rgba(0, 0, 0, 0.6);
    text-align: center;
  }

  @media (max-width: 820px) {
   .card{
    height:  400px;
    
   }
    .pauta{
      background-image: none;
      background-position: 55% 45%;
      filter: grayscale(80%);
      background-size: cover;
      background-repeat: no-repeat;
    }
    
    .campaña{
      background-image: url('../img/DSC_8632-min.jpg');
      background-position: 75% 25%;
      filter: grayscale(80%);
      background-size: cover;
      background-repeat: no-repeat;
    }
  
    .tik{
      background-image: url('../img/TIK\ TOK\ -min.jpg');
      background-position: 65% 35%;
      filter: grayscale(80%);
      background-size: cover;
      background-repeat: no-repeat;
    }
  }



  /* Redes sociales buttons */


  .social-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f2f2f2;
    box-shadow: 0px 0px 15px #00000027;
    padding: 15px 10px;
    border-radius: 5em;
  }
  
  .social-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 0 10px;
    background-color: #fff;
    box-shadow: 0px 0px 4px #00000027;
    transition: 0.3s;
  }
  
  .social-button:hover {
    background-color: #f2f2f2;
    box-shadow: 0px 0px 6px 3px #00000027;
  }
  
  .social-buttons svg {
    transition: 0.3s;
    height: 20px;
  }
  
  .facebook {
    background-color: #333;
  }
  
  .facebook svg {
    fill: #f2f2f2;
  }
  
  .facebook:hover svg {
    fill: #3b5998;
  }
  
  .github {
    background-color: #333;
  }
  
  .github svg {
      
    fill: #f2f2f2;
  }
  
  .github:hover svg {
    fill: #333;
  }
  
  .linkedin {
    background-color: #333;
    width: 50px;
    height: 50px;
  }
  
  .linkedin svg {
    fill: #f2f2f2;
  }
  
  .linkedin:hover svg {
    fill: #33b500;
  }
  
  .instagram {
    background-color: #333;
  }
  
  .instagram svg {
    fill: #f2f2f2;
  }
  
  .instagram:hover svg {
    fill: #c13584;
  }
  

  /* Quienes somos cards */

  .card-more {
    margin-left: -1rem;
    margin-right: -1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin-bottom: 2rem;
    width: 320px;
    display: flex;
    flex-direction: column;
    border-radius: 0.25rem;
    background-color: rgb(13, 13, 14);
    padding: 1.5rem;
  }
  
  .header-more {
    display: flex;
    flex-direction: column;
  }
  
  .title-more {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    color: #fff
  }
  
  .price {
    font-size: 2.75rem;
    line-height: 1;
    font-weight: 700;
    color: #fff
  }
  
  .desc {
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    line-height: 1.625;
    color: rgba(156, 163, 175, 1);
  }
  
  .lists {
    margin-bottom: 1.5rem;
    flex: 1 1 0%;
    color: rgba(156, 163, 175, 1);
  }
  
  .lists .list {
    margin-bottom: 0.5rem;
    display: flex;
    margin-left: 0.5rem
  }
  
  .lists .list svg {
    height: 1.5rem;
    width: 1.5rem;
    flex-shrink: 0;
    margin-right: 0.5rem;
    color: rgb(67, 66, 68);
  }
  
  .action {
    border: none;
    outline: none;
    display: inline-block;
    border-radius: 0.25rem;
    background-color: rgb(77, 77, 80);
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: rgb(243, 244, 247);
  }