/* Sección extra */
.seccion_extra {
  background-color: black;
  color: white;
}

/* Títulos */
.content h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 2em;
}

/* Contenedor con flexbox */
.container-md {
  display: flex; /* Usamos flexbox para alinear los elementos */
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  background-color: black;
}

.content {
  flex: 1;
  margin-right: 40px;
  text-align: left;
}

/* Estilos de botón */
.btn {
  padding: 10px 20px;
  text-decoration: none;
}

.btn-outline-danger {
  border: 1px solid red;
  color: red;
  background-color: transparent;
}

/* Estilos de botón light */
.btn-outline-light {
  display: inline-block;
  transition: background-color 0.3s, border-color 0.3s;
  border-radius: 40px !important;
  padding: 10px 50px !important;
}

.btn-outline-light:hover {
  color: black !important;
}

/* Responsividad: Estilos para pantallas pequeñas */
@media (max-width: 768px) {
  .container-md {
    flex-direction: column;
    align-items: flex-start;
  }

  .content {
    margin-right: 0;
    margin-bottom: 10px;
  }
}

/* Estilos para cards */
.container.extra {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.card.opiniones {
  background-color: #1f2123;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.2) 1px, rgba(0, 0, 0, 0) 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, rgba(0, 0, 0, 0) 1px);
  background-size: 2px 2px, 1px 1px;
  background-position: 0 0, 1px 1px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
}

.col-lg-6 > .card.opiniones:hover {
  border: none !important;
  transform: none !important;
  box-shadow: none !important;
  cursor: default;
  transition: none !important;
}

.card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Footer de las tarjetas */
.card-footer {
  display: flex;
  align-items: center;
  border-top: 1px solid #ddd;
}

.card-footer img {
  border-radius: 50%;
  margin-right: 10px;
  width: 40px;
  height: 40px;
}

/* Imagen dentro de la tarjeta */
.card-img-top {
  width: 100%;
  height: 200px;
  object-fit: contain;
}

/* Sección con fondo */
section.seccion_extra {
  background: linear-gradient(
    136deg,
    #0c0a10 71%,
    rgba(56, 2, 3, 1) 95%
  );
  background-blend-mode: normal;
}

div.container-fluid.section3.luz {
  background: linear-gradient(
    237deg,
    #0c0a10 71%,
    rgba(56, 2, 3, 1) 95%
  );
  background-blend-mode: normal;
  
}
.youtube:hover {
  font-weight: 800;
  background: linear-gradient(
    45deg,
    rgb(248, 1, 5) 16%,
    rgba(244, 252, 242, 1) 82%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: 0.4s;
}