:root {
     --color-primary: #B31942;
 }

 /* COLOCAR ESTOS ESTILOS EN UNA HOJA DE ESTILOS */
 .que-es {
     background-color: var(--color-primary);
 }

 .fondo-color-primary {
     background-color: var(--color-primary);
 }

 .btn-primary {
     background-color: var(--color-primary);
     border-color: var(--color-primary);
 }

 .btn-primary:hover {
     background-color: #8c1332;
     border-color: #8c1332;
 }

 .btn-conoce-mas-chec {
     background-color: #006341;
     border-color: #006341;
     color: #ffffff;
 }

 .btn-conoce-mas-chec:hover {
     background-color: #004d2a;
     border-color: #004d2a;
     color: #ffffff;
 }

 .swiper-slide img {
     filter: grayscale(100%);
     transition: filter 0.3s ease;
 }

 .swiper-slide img:hover {
     filter: grayscale(0%);
 }

 .carta-por-que {
     background-color: #0A3161;
     color: #ffffff;
 }

 .imagen-punto {
     width: 200px;
 }

 .mesa-card {
     background: #3d3d3d;
     color: white;
     border-radius: 20px;
     padding: 30px;
     position: relative;
     /* important: allows absolute positioning inside */
     display: flex;
     flex-direction: column;
     justify-content: center;
     /* centers text vertically */
     text-align: left;
 }

 .mesa-title {
     font-size: 20px;
     font-weight: 700;
     margin-bottom: 0.2rem;
     width: 75%;
 }

 .mesa-subtitle {
     margin: 0;
     font-size: 15px;
 }

 .mesa-icon img {
     width: 150px;
     height: 150px;
     object-fit: cover;
     border-radius: 50%;
     background-color: #fdfdfd;
     border: 2px solid #3d3d3d;
     position: absolute;
     padding: 10px;
     right: -50px;
     /* pushes it outside the card */
     top: 50%;
     /* anchor at middle */
     transform: translateY(-50%);
     /* perfect vertical centering */
 }

 .swiper-wrapper {
     height: 200px !important;
 }

 @media screen and (max-width: 768px) {
     .mesa-icon img {
         position: static;
         /* back inside card for mobile */
         width: 100px;
         height: 100px;
         transform: none;
         /* reset centering */
         margin-top: 15px;
     }

     .mesa-title {
         width: 100%;
     }
 }