:root {
  --blueFundation: #2579cc;
  --blueFundationOpa: #2579cc9c;
}

.fondoApertura {
  background-image: url("../Img/Carrusel/Diseño\ sin\ título.gif");
  background-repeat: no-repeat;
  background-size: cover; /* Hace que cubra toda la pantalla */
  background-position: center; /* Centrado */
  height: 40rem;
  position: relative;
}

.fondoApertura::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--blueFundationOpa); /* negro con 50% opacidad */
  z-index: 1; /* se coloca sobre el fondo */
}

.fondoApertura h2 {
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: white;
  z-index: 2; /* encima de la capa oscura */
  font-size: 2rem;
  font-weight: bold;
}

.mensajeApertura {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  z-index: 2;
  align-items: center;
  row-gap: 2rem;
  text-align: center;
}

.mensajeApertura .txt {
  padding: 2rem 3rem; /* espacio interno */
  border-radius: 1rem; /* bordes redondeados */
  color: white; /* texto en blanco */

  font-weight: bold;
  font-size: 25px;
}

.enlace {
  width: fit-content;
  padding: 15px 25px;
  border-radius: 8px;
  margin: 0 auto;
  text-decoration: none;
  font-weight: bold;
  font-size: 20px;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  transform-origin: center;
}

.enlace:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.smallMargin {
  margin-top: 1rem;
  margin-bottom: 0rem;
}

.orange {
  background-color: #d0774a;
  color: white;
}