* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /*COLORES PRINCIPALES*/
  --color-A500: #45a3a8;
  --color-B500: #b7519e;
  --color-C500: #00636a;
  --color-D500: #fec44a;
  --color-E500: #ffffff;

  /*COLORES SECUNDARIOS CLAROS*/
  --color-B200: #edd3e7;

  /*COLORES SECUNDARIOS OSCUROS*/
  --color-C800: #00191b;

  /*TIPOGRAFIA ESCRITORIO*/
  --tipografia-estilo: "Roboto", sans-serif;
  --tipografia-tamano-xs: 12px; /* Notas équeñas - detalles */
  --tipografia-tamano-sm: 14px; /* texto auxiliar - etiquetas */
  --tipografia-tamano-md: 16px; /* texto normal - parrafos */
  --tipografia-tamano-lg: 20px; /* subtitulo menor  */
  --tipografia-tamano-xl: 24px; /* subtitulo */
  --tipografia-tamano-xxl: 32px; /* titul principal */

  /* TELEFONOS (TIPOGRAFIAS)*/
  --tipografia-tamano-xs-telefono: 12px; /* Notas équeñas - detalles */
  --tipografia-tamano-sm-telefono: 14px; /* texto auxiliar - etiquetas */
  --tipografia-tamano-md-telefono: 15px; /* Texto normal - párrafos */
  --tipografia-tamano-lg-telefono: 18px; /* Subtítulo menor */
  --tipografia-tamano-xl-telefono: 20px; /* Subtítulo */
  --tipografia-tamano-xxl-telefono: 24px; /* Título principal */
}

body {
  background-color: var(--color-B200);
  font-family: var(--tipografia-estilo);
}

.liston-azul {
  width: 100%;
  height: 8vh;
  background-color: var(--color-A500);
}

.section-descripcion {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.foto-texto {
  text-align: center;
  width: 40%;
  margin-top: 2%;
  margin-bottom: 3%;
}

.logo-feliz-viaje {
  border-radius: 100%;
  width: 130px;
  height: 130px;
  margin-bottom: 3%;
}

.texto-safra {
  margin-bottom: 1%;
  font-size: var(--tipografia-tamano-md);
}

.div-entrar {
  background-color: var(--color-E500);
  padding: 30px;
  text-align: center;
  width: 35%;
  border-radius: 15px;
  box-shadow: 0 4px 18px var(--color-C800);
}

.div-entrar h1,
.div-entrar p {
  background-color: transparent;
}

.div-entrar h1 {
  color: var(--color-B500);
  font-size: var(--tipografia-tamano-xxl);
  font-weight: bold;
}

.icono-entrada i {
  font-size: 32px;
  display: inline-block;
  margin: 16px auto;
  background-color: var(--color-E500);
  color: var(--color-B500);
  padding: 5px;
  transition: 0.3s;
}

.icono-entrada i:hover {
  background-color: var(--color-B500);
  color: var(--color-E500);
  transition: 0.3s;
  border-radius: 8px;
  cursor: pointer;
}