* {
  box-sizing: border-box;
}

/* Estilo de fuente */

@font-face {
  font-family: Inter;
  src: url(fonts/Inter.ttf);
}

@font-face {
  font-family: Droid;
  src: url(fonts/DroidSans.ttf);
}

@font-face {
  font-family: Barlow;
  src: url(fonts/Barlow-Bold.ttf);
}

.iniciales {
  color: #1ba098;
  font-size: 80px;
}

/* Texto justificado */
body {
  text-align: justify;
  text-justify: inter-word;
}

.he {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

/* Contenedor principal del encabezado */
.heading-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Estilo para la imagen en el encabezado */
.heading-img {
  width: 100%;
  margin-left: 5%;
  margin-right: 5%;
}

/* Estilo para el texto principal */
.heading-text {
  margin-top: 80px;
  font-family: Inter, sans-serif;
  width: 72%;
  margin-bottom: 0;
}

/* Estilo para el título grande */
.pfae {
  color: #583611;
  font-size: 175px;
  margin: 0;
}

/* Estilo para la descripción */
.heading-desc {
  color: rgb(123, 123, 123);
  font-size: 20px;
  margin: 0;
}

/* Estilo base para las tarjetas */
.tarjeta {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 1.25rem;
  display: flex;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: transform 0.3s ease-in-out;
  /* Agrega una transición de 0.3 segunds para un efecto suave */

  /* height: 200px; */
}

/* Contenedor de todas las tarjetas */
.todasLasTarjetas {
  width: 90%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  /* Centrar horizontalmente */
  padding-top: 100px;
  padding-bottom: 100px;
}

/* Estilo para las tarjetas dentro del contenedor */
.tarjetas-container {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  /* Una columna por defecto */
  gap: 40px;
  /* Espacio entre elementos */
}

.contenedorimagen {
  background-color: #d9d9d9;
  border-radius: 3%;
  padding: 20px;
}

.imagen {
  background-color: #d9d9d9;
  border-radius: 1.25rem;
  width: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.imagen img {
  /* margin: auto; */
  height: auto;
  border-radius: 20%;
  width: 90%;
}

.contenido {
  padding: 20px;
  width: 100%;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.todasLasTarjetas h3 {
  text-align: left;
  color: #000;
  font-family: Inter, sans-serif;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  word-spacing: 0.3rem;
}

.todasLasTarjetas p {
  text-align: left;
  color: #000;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.centrarboton button {
  /* background-color: #E15DAA; */
  background-color: #915d2a;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 3px 10px 7px 3px; /*Hemos cambiado el tamaño del padding para ajustar el tamaño de la caja*/
  /* padding: 10px 20px; */
  cursor: pointer;
  /* position: absolute; */
  /* bottom: 10px;
    right: 10px; */
    
  font-family: Inter, sans-serif;
  text-align: center;
  font-weight: 550;
  font-size: 1.1rem;
  margin-top: 20px;
  color: #ffff;
  text-decoration: none;
}

.centrarboton {
  width: 100%;
  display: flex;
  /* justify-content: left; */
}

.centrarboton a:hover {
  text-decoration: none;
}

/* ---------- MEDIAS ---------*/

/* Media query para tres columnas por fila en pantallas muy anchas */
@media (min-width: 1920px) {
  .tarjetas-container {
    width: auto;
    grid-template-columns: repeat(3, 1fr);
    /* 3 columnas por fila */
  }
}

/* Efecto de las tarjetas hover para pantallas grandes*/

@media (min-width: 1024px) {
  .tarjeta:hover {
    transform: scale(1.08);
    /* Aumenta el tamaño al 108% del tamaño original */
    opacity: 0.9;
    /* Reduce la opacidad al 70% */
  }
}

/* Media query para dos columnas por fila en pantallas anchas */
@media (min-width: 1024px) {
  .tarjetas-container {
    grid-template-columns: repeat(2, 1fr);
    /* Dos columnas por fila */
  }
}

@media (min-width: 1024px) and (max-width: 1164px) {
  main {
    justify-content: center;
    /* Centra horizontalmente el contenido */
    align-items: center;
    /* Centra verticalmente el contenido */
  }

  .tarjeta {
    width: 96%;
  }
}

@media (max-width: 1024px) {
  .heading-text {
    margin-left: 5%;
    font-family: Inter, sans-serif;
    width: 30%;
    margin-bottom: 0;
    flex: 1;
  }

  .pfae {
    font-size: 140px;
  }

  .heading-img {
    width: 45%;
    margin-left: 2%;
    margin-right: 2%;
  }
}

/* Media query para ajustar en pantallas pequeñas primer bloque */
@media (max-width: 768px) {
  .heading-container {
    flex-direction: column;
    /* Cambia la dirección de flex a columna */
    text-align: center;
    /* Centra el texto en el medio */
  }

  main {
    display: flex;
    justify-content: center;
    /* Centra horizontalmente el contenido */
    align-items: center;
    /* Centra verticalmente el contenido */
    margin-left: 50px;
    margin-right: 50px;
  }

  .heading-img {
    width: 80%;
    /* Cambia el ancho de la imagen en pantallas pequeñas */
    margin-left: 0;
  }

  .heading-text {
    width: 80%;
    /* Cambia el ancho del texto en pantallas pequeñas */
    margin-left: 0;
  }

  .pfae {
    font-size: 120px;
    /* Tamaño del título más pequeño en pantallas pequeñas */
  }
}

/* Media query para 1 columna  en pantallas de hasta 600 px */

@media (max-width: 600px) {
  .todasLasTarjetas h3 {
    font-size: 17px;
    text-align: center;
  }

  .todasLasTarjetas {
    width: 98%;
  }

  .he {
    width: auto;
    display: block;
    /* Cambia la trajeta a bloque */
    flex-direction: column;
    /* Cambia la dirección de flex a columna */
    align-items: center;
    align-content: center;
  }

  .pfae {
    font-size: 100px;
    /* Tamaño del título más pequeño en pantallas pequeñas */
  }

  .tarjeta {
    /* width: auto; */
    display: block;
    /* Cambia la trajeta a bloque */
    flex-direction: column;
    /* Cambia la dirección de flex a columna */
    align-items: center;
    align-content: center;
  }

  .imagen {
    width: auto;
  }

  .centrarboton {
    padding-top: 20px;
  }
}