@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,600;1,800&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
}

:root {
  --color-primario: #f3f3f3;
  --color-secundario: linear-gradient(
    225deg,
    rgb(128, 88, 53) 0,
    rgb(212 169 107) 25%,
    rgb(249 237 180) 50%,
    rgb(212 169 107) 75%,
    rgb(128 88 53) 100%
  );
  --color-tercero: #ffffff;
  --color-cuarto: #f1f1f1;
  --color-texto: #282828;
  --subtitulo: 22px;
  --titulo: 32px;
  --parrafo: 15px;
  --footer: #414040;
}
html {
  overflow-x: hidden;
  width: 100%;
  font-family: montserrat, "sans-serif";
}
.header {
  position: relative;
  height: 800px;
  display: flex;
  justify-content: center;
  align-content: flex-start;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: 200px;
}
.header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.logo {
  animation: movimiento-left 1s;
}
.contacto {
  padding: 10px;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 25px;
  width: 100%;
  justify-content: flex-start;
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
}
.contacto-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  column-gap: 35px;
  letter-spacing: 1px;
  margin: 0 15px;
  row-gap: 7px;
}
.contacto-info span {
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 1px;
}
.contacto-info i {
  margin-right: 5px;
  font-size: 14px;
  font-weight: bold;
}

.contenido {
  position: absolute;
  top: 16%;
  bottom: 0;
  display: flex;
  flex-wrap: wrap-reverse;
  flex-direction: row-reverse;
  justify-content: center;
  height: 900px;
  align-items: center;
  width: 100%;
}
.columna1 {
  width: 100%;
  max-width: 850px;
  padding: 10px 10px 0 10px;
  font-size: var(--titulo);
  display: flex;
  flex-wrap: wrap;
  row-gap: 15px;
  flex-direction: column;
  margin-top: -135px;
  z-index: 3;
  margin-bottom: 30px;
  background-color: var(--color-texto);
  animation: opacity 1.5s;
}
.columna1 h1 {
  font-weight: 600;
  color: var(--color-primario);
  font-size: var(--titulo);
  width: 100%;
  text-align: center;
  letter-spacing: 1px;
}
.parrafo .cir {
  font-size: var(--parrafo);
  color: var(--color-primario);
  text-align: center;
  font-weight: 500;
  letter-spacing: 1px;
}
.cirujano {
  font-size: var(--subtitulo);
  color: var(--color-primario);
  text-align: center;
  font-weight: 500;
  letter-spacing: 1px;
}
.contenido .columna2 {
  width: 100%;
  max-width: 400px;
  height: 400px;
  margin: 0 auto;
  max-width: 400px;
  display: flex;
  justify-content: center;
}
.contenido .columna2:hover img {
  transform: translateX(-5%);
}
.contenido .columna2 img {
  height: 100%;
  width: 280px;
  animation: opacity 1.5s;
  margin-top: 50px;
  transition: 1s ease all;
}
.contenido .columna2 .parrafo {
  margin-top: 20px;
}
.parrafo {
  font-size: 14px;
  text-align: center;
  color: var(--color-primario);
  letter-spacing: 1px;
  line-height: 20px;
  margin: 0 auto;
  max-width: 300px;
}
.articulo {
  color: var(--color-primario);
}
.boton {
  border: 1px solid var(--color-primario);
  width: auto;
  margin: 0px auto 40px auto;
  font-size: var(--parrafo);
  padding: 15px 30px;
  color: var(--color-tercero);
  display: flex;
  flex-wrap: wrap;
  transition: 0.5s ease all;
  border-radius: 10px;
  font-weight: 700;
  overflow: hidden;
  text-align: center;
  position: relative;
  align-items: center;
  position: relative;
  content: "";
  box-shadow: 0px 5px 15px #28282862;
  overflow: hidden;
  background: transparent;
}
.boton i {
  padding: 0 10px;
  transform: scale(1);
  position: absolute;
  left: -50px;
  transition: 0.5s;
}
.boton:hover {
  color: var(--color-texto);
  transform: scale(1, 1);
  box-shadow: 0px 5px 15px #28282862;
  text-align: right;
}
.boton::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 100%;
  bottom: 0;
  transition: 0.5s ease all;
  background: var(--color-secundario);
  z-index: -1;
}
.boton:hover::before {
  right: 0;
  color: #f1f1f1;
}

@media (min-width: 850px) {
  .header {
    height: 700px;
    margin-bottom: 40px;
  }
  .contacto {
    padding: 0;
  }
  .boton:hover .fa-chevron-right {
    transform: scale(1);
    left: 0;
  }
  .contenido {
    flex-direction: row-reverse;
    align-items: flex-end;
    height: 60%;
    margin: 0;
    align-content: center;
    justify-content: space-around;
  }
  .contenido .columna1 {
    background: none;
    max-width: 420px;
    margin: auto auto 20px 0;
  }
  .contenido .columna1 .cir {
    font-size: 18px;
    font-weight: bold;
  }
  .contenido .columna1 h1 {
    text-align: left;
  }
  .contenido .columna1 .parrafo {
    text-align: left;
    font-size: 15px;
    letter-spacing: 1px;
    line-height: 25px;
  }
  .contenido .columna1 .boton {
    font-size: 18px;
    margin: 20px auto 20px 0;
    letter-spacing: 1px;
  }
  .contenido .columna2 {
    max-width: 420px;
    width: 100%;
    height: 610px;
    margin: 0px 0 -100px 0;
    display: flex;
    align-items: flex-end;
  }
  .contenido .columna2 img {
    height: 90%;
    margin-bottom: -25px;
  }
  .parrafo {
    max-width: 600px;
  }
}