@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Caveat&family=Poppins:wght@300&display=swap");
body {
  font-family: poppins, sans-serif;
  margin: 0px; }

* {
  scroll-behavior: smooth !important; }

/* map */
.navbar {
  background-color: #eee460 !important; }
  .navbar .navbar-nav {
    text-align: center; }

/* Agrego una magia para que el menú no pise el subtitulo de la página */
.perspectiva {
  padding-top: 50px;
  margin-top: -50px; }

/*PORTADA Index.html*/
.portada {
  height: 100vh;
  display: block; }
  .portada .fondoAmarillo {
    background-color: #eee460; }
  .portada .imagenPortada {
    width: 50%;
    /* Agrego una animacion personalizada usando KeyFrame*/
    animation-name: saltar;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: forwards; }

.comoHacemos {
  color: white !important;
  /*Con el linear gradient oscurezco la imagen de fondo*/
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("../assets/pexels-anna-guerrero-1765005.webp");
  background-repeat: no-repeat;
  background-size: cover; }

article {
  text-align: justify !important; }

.fondoNegro {
  /* background-color: rgb(51, 49, 49); */
  background-color: #333131 !important; }

.colorBlanco {
  color: white; }

.alto50 {
  height: 50px; }

.paddingLeft20 {
  padding-left: 20px; }

footer h6 {
  margin: none;
  padding: 5px; }

/* Declaro un map para utilizar para caso de uso por el desafío. */
.row--medida {
  width: 100% !important; }

.row--medida {
  width: 70% !important; }

.row--medida {
  width: 40% !important; }

/*Utilizo el map en el about.html*/
.gracias {
  background-color: #333131;
  color: white;
  height: 70vh;
  padding-top: 50px;
  text-align: center; }

/* Botones  */
/*Contenedor de botones en el index*/
.containButton {
  margin-top: 10px; }
  .containButton .botonAzul {
    min-width: 130px;
    height: 40px;
    color: #fff;
    padding: 5px 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    outline: none;
    border-radius: 5px;
    border: none;
    background: #3a86ff;
    box-shadow: 0 5px #4433ff; }
  .containButton .botonAzul:hover {
    box-shadow: 0 3px #4433ff;
    top: 1px; }
  .containButton .botonAzul:active {
    box-shadow: 0 0 #4433ff;
    top: 5px; }

/*****************************************************/
/* EFECTOS */
/*Clase para girar imágenes */
.giroImagen {
  transition: transform .7s ease-in-out; }
  .giroImagen:hover {
    transform: translate(50px, 0);
    transition: transform 2s ease-in-out; }

.escaloElemento {
  overflow: hidden; }
  .escaloElemento:hover {
    -webkit-transform: scale(1.3);
    transform: scale(1.3); }

.saltaElemento {
  animation-name: saltar;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: forwards; }

.disminuyoElemento {
  overflow: hidden; }
  .disminuyoElemento:hover {
    -webkit-transform: scale(1.3);
    transform: scale(0.8);
    transition-duration: 2s; }

.deslizarContenido {
  animation-duration: 1.5s;
  animation-name: deslizar; }

.deslizarDerecha {
  animation-name: entrada-derecha;
  animation-duration: 1.5s; }

.deslizarIzquierda {
  animation-name: entrada-izquierda;
  animation-duration: 1.5s; }

@keyframes saltar {
  0% {
    opacity: 0;
    transform: scale(0.3) translate3d(0, 0, 0); }
  50% {
    opacity: 0.9;
    transform: scale(1.1); }
  80% {
    opacity: 1;
    transform: scale(0.89); }
  100% {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0); } }

@keyframes deslizar {
  from {
    margin-left: 100%;
    width: 300%; }
  to {
    margin-left: 0%;
    width: 100%; } }

@keyframes entrada-izquierda {
  0% {
    transform: translateX(-100%); }
  100% {
    transform: translateX(0); } }

@keyframes entrada-derecha {
  0% {
    transform: translateX(100%); }
  100% {
    transform: translateX(0); } }

input {
  transition: all .2s ease-in-out; }
  input:hover {
    border-color: #4433ff; }
  input:focus {
    transform: scale(1.1);
    border-color: #4433ff; }

textarea {
  transition: all .2s ease-in-out; }
  textarea:hover {
    border-color: #3a86ff; }
  textarea:focus {
    transform: scale(1.1);
    border-color: #3a86ff; }

/* Doy movimiento a la flecha*/
@keyframes movVertical {
  0% {
    left: 0%; }
  25% {
    left: -10%; }
  50% {
    left: 0%; }
  75% {
    left: 10%; }
  100% {
    left: 0%; } }

.flecha {
  position: relative;
  animation-name: movVertical;
  animation-duration: 3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite; }

@media (max-width: 576px) {
  /*Esta clase se utiliza para el caso de uso que se pide en el desafio*/
  .imagenPort, .portada .imagenPortada {
    position: relative !important;
    top: 10px; }
  .noResponsive {
    display: none; }
  article img {
    width: 70%; }
  .portada .fondoAmarillo {
    height: 100vh;
    background-color: #eee460 !important; }
  .portada .imagenPortada {
    margin-bottom: 50px;
    width: 45%; }
  .portada .fondoAmarillo:nth-child(1) {
    text-align: center; }
  .margenTop30 {
    margin-top: 30px; }
  /*ABOUT*/
  .about p {
    text-align: justify;
    margin: none !important; }
  .about h3, .about img, .about div, .about .row {
    text-align: center; }
  .tamañoVideo {
    width: 360px;
    height: 215px; }
  .imgContacto {
    width: 30%; }
  form {
    width: 100%; }
    form input, form textarea {
      width: 100%; } }

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .noResponsive {
    display: none; }
  .portada .fondoAmarillo {
    height: 100vh;
    background-color: #eee460 !important; }
  .portada .imagenPortada {
    width: 55%;
    margin-bottom: 45px;
    position: relative !important;
    top: 40px; }
  .margenTop30 {
    margin-top: 30px; }
  article img {
    width: 70%; }
  .imgResponsive {
    width: 50%; }
  .imgContacto {
    width: 40%; }
  /*ABOUT*/
  .about p {
    text-align: justify;
    margin: none !important; }
  .about h3, .about img, .about div, .about .dow {
    text-align: center; }
  form {
    width: 100%; }
    form input, form textarea {
      width: 100%; } }

@media (max-width: 768px) and (max-height: 480px) {
  .imagenPortada {
    margin-bottom: 50px;
    width: 20%;
    position: relative !important;
    top: 10px; } }

@media (max-width: 992px) {
  .navbar {
    box-shadow: 1px 5px 20px #888888; } }

/* Tablets en horizonal y escritorios normales */
@media (min-width: 768px) {
  /* Clase para ocultar cuando estoy responsivo*/
  .noResponsive {
    display: none; }
  .imgResponsive {
    width: unset; }
  article img {
    width: 70%; }
  .portada .fondoAmarillo img {
    width: 100%; }
  .portada .imagenPortada {
    width: 100%;
    position: relative !important;
    top: 20px;
    /* Este cambio lo agrego por último porque la imagen queda demasiado grande*/ }
  .portada .fondoAmarillo {
    height: 100vh;
    background-color: #eee460 !important; }
  /*ABOUT*/
  .about p {
    text-align: unset;
    margin: none; }
  .about h3, .about img, .about div, .about .dow {
    text-align: center; }
  .tamañoVideo {
    width: 560px;
    height: 315px; }
  .imgContacto {
    width: 40%; }
  form {
    width: 100%; }
    form input, form textarea {
      width: 100%; } }

@media (max-device-width: 768px) and (orientation: landscape) {
  .col4Landscape {
    width: 25% !important; }
  .landscape {
    width: 50% !important; }
    .landscape.imagenPortada {
      width: 50%; } }

@media (max-device-width: 1002px) and (orientation: landscape) {
  .landscape {
    width: 50% !important; }
    .landscape.imagenPortada {
      width: 50%; } }

@media screen and (min-device-width: 768px) and (max-device-width: 1824px) and (orientation: landscape) {
  .imagenPortada {
    width: 50%;
    margin-top: 0;
    padding: 0;
    position: relative;
    top: 50px; }
  .portada .fondoAmarillo {
    height: 100vh;
    background-color: #eee460 !important; }
  .col4Landscape {
    width: 25%; }
  .landscapeMarginTop20 {
    margin-top: 50px; } }

@media screen and (min-device-width: 992px) and (max-device-width: 1824px) and (orientation: landscape) {
  .landscapeMarginTop20 {
    margin-top: 100px; } }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .navbar {
    box-shadow: none !important; }
  .noResponsive {
    display: unset; }
  .soloResponsive {
    display: none; }
  .portada .fondoAmarillo {
    height: 70vh;
    background-color: #eee460 !important; }
  .portada .imagenPortada {
    position: relative !important;
    top: 80px; }
  .portada .fondoAmarillo img {
    width: 100%; }
  .img60 {
    width: 60%; }
  article img {
    width: 70%; }
  .imgContacto {
    width: 40%; }
  form {
    width: 80%; }
    form input, form textarea {
      width: 80%; } }

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .portada .fondoAmarillo {
    height: 75vh;
    background-color: #eee460 !important; }
  .portada .imagenPortada {
    position: relative !important;
    top: 40px; }
  .portada .fondoAmarillo img {
    width: 95%; }
  .img60 {
    width: unset; }
  .imgContacto {
    width: 60%; } }

/*// XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .portada .fondoAmarillo {
    height: 80vh;
    background-color: #eee460 !important; }
  .portada .imagenPortada {
    position: relative !important;
    top: 40px; }
  .imgContacto {
    width: 30%; } }