/* ==========================
   CONTENIDO CENTRAL
========================== */

.central {

  max-width: 1150px;

  margin: auto;

  padding: 40px;

  text-align: justify;

  background-image: url("../imagenes/fondo_copia.png");
  background-repeat: no-repeat;
  background-size: cover;

  backdrop-filter: blur(6px);

  border-radius: 20px;

  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.08);
}


/* ==========================
   TITULOS
========================== */

.central h1 {

  font-size: 40px;

  margin-bottom: 25px;

  text-align: center;
}

.central h2 {

  font-size: 28px;

  margin-bottom: 20px;
}

.central p {

  line-height: 1.9;

  font-size: 16px;
}

/* ==========================
   INTRO
========================== */

.intro {

  display: flex;

  align-items: center;

  gap: 40px;

  margin-bottom: 50px;
}

.intro img {

  width: 150px;

  height: 250px;

  object-fit: contain;

  border-radius: 20px;

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.15);
}

.intro-texto {

  flex: 1;
}

/* ==========================
   QR
========================== */

.bloque-qr {

  display: inline-flex;

  align-items: center;

  gap: 10px;
}

.qr {

  width: 90px;

  height: 90px;

  object-fit: contain;

  display: block;

  margin-left: auto;

  margin-top: 15px;
}

/* ==========================
   GALERIA
========================== */

.galeria {

  display: flex;

  flex-wrap: wrap;

  gap: 20px;

  margin: 40px 0;
}

.galeria img {

  flex: 1 1 220px;

  height: 180px;

  object-fit: contain;

  border-radius: 20px;

  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.12);

  transition:
    transform .3s ease;
}

.galeria img:hover {

  transform: scale(1.03);
}

/* ==========================
   SLIDER
========================== */

.caja-slider {

  width: 100%;

  height: 380px;

  margin: 50px auto;

  overflow: hidden;

  position: relative;

  border-radius: 20px;

  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.15);
}

.caja-slider h2 {

  position: absolute;

  top: 20px;

  left: 30px;

  z-index: 2;

  color: white;

  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.6);
}

.caja-slider img {

  position: absolute;

  top: 0;

  left: 50%;

  width: 120%;

  height: 100%;

  object-fit: cover;

  animation:
    slider 10s infinite alternate ease-in-out;
}

@keyframes slider {

  from {

    transform:
      translateX(-50%) translateX(0%);
  }

  to {

    transform:
      translateX(-50%) translateX(-15%);
  }
}

/* ==========================
   RESPONSIVE
========================== */

@media (max-width:900px) {

  .intro {

    gap: 25px;
  }
}

@media (max-width:768px) {

  .central {

    padding: 25px;
  }

  .intro {

    flex-direction: column;

    text-align: center;
  }

  .intro img {

    width: 120px;

    height: 180px;
  }

  .central h1 {

    font-size: 32px;
  }

  .central h2 {

    font-size: 24px;
  }

  .central p {

    font-size: 16px;
  }

  .galeria img {

    width: 100%;

    height: 240px;
  }

  .caja-slider {

    height: 240px;
  }

  .caja-slider img {

    width: 140%;
  }
}